HTML+CSS

思维导图

20200507153758833

网页的基本描述：

<!DOCTYPE html>
<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签，它用来描述我们网站的一些信息-->
    <meta charset="UTF-8">
    <title>网页bast</title>
</head>
<!--body标签代表网页主体-->
<body>
网页内容测试
</body>
</html>

网页的基本标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<!--段落标签-->
<p>这是一个段落</p>
<!--换行标签-->
这是换行<br/>
    换行成功<br/>
<!--水平线标签-->
<hr/>
<!--粗体、斜体标签-->
<h1>字体样式标签</h1>
粗体：<strong>这是粗体</strong> 
斜体：<em>这是斜体</em>
</body>
</html>

单标签：单标签也被称为“空标签”，是指用一个标签符号就可以完整地描述某个功能的标签。
单标签基本语法格式如下:

<标签名/>

注意：在标签名与“/”之间有一个空格，虽然在显示效果上有无空格都一样，但是按照规范的要求，建议加上空格。

双标签也称体标签，是指由开始和结束两个标签符组成的标签。
双标签基本语法格式如下：

<标签名>内容</标签名>

注释标签，如果需要在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标签。
注释标签的基本语法格式如下：

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，注释标签可以被下载到用户的计算机上，或者用户查看源代码时也可以看到注释标签

<body> <p>使用HTML制作网页时， <span>通过br标签</span>可以实现<br />换行效果 </p> </body>

在HTML中，使用标签控制网页中文本的样式，如字体、字号和颜色。
标签的基本语法格式如下：

<font 属性 = “属性值”>文本内容

HTML网页中创建表格的基本语法格式如下所示：

单元格内的文字

注意：

、和
是创建表格的基本标签，缺一不可。用于定义一个表格，用于定义表格中的行，必须嵌套在

标签中，标签中。

在HTML中，

标签用于定义表单域，即创建一个表单。标签基本语法如下所示：

各种表单控件

action属性：用于指定表单提交的地址。
method属性：用于设置表单数据的提交方式，它有GET和POST两个值，其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制；而使用POST提交方式不但保密性好，还可以提交大量的数据，因此开发中通常使用POST方式提交表单。

表单空间
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用控件可以在表单中定义这些元素。
控件基本语法格式如下：

type属性为控件最基本的属性，用来指定不同的控件类型。
控件还可以定义很多其他属性，其中，比较常用的有id、name、value、size，它们分别用来指定控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。

为用户添加用户名输入控件和密码输入框控件。

html中添加性别选择控件和复选框控件
            <td align="right">性别:</td>
            <td>
                <input type="radio" name="gender" value="male" /> 男 
                <input type="radio" name="gender" value="female" /> 女 
            </td>
        </tr>
        <tr>
            <td align="right">兴趣:</td>
           <td>
           <input type="checkbox" name="interest" value="film" /> 看电影
           <input type="checkbox" name="interest" value="code" /> 敲代码
           <input type="checkbox" name="interest" value="game" /> 玩游戏
           </td>
        </tr>
添加文件上传控件、提交按钮控件和重置按钮
            <td align="right">头像:</td>
            <td>
                <input type="file" name="photo" />
            </td>
        </tr>
        <tr>
            <td colspan="2"  align="center">
                <input type="submit" value="注册" />  
                <input type="reset" value="重填" />    
            </td>
        </tr>
无序列表：
无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下所示。
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
   ...
标签用于定义无序列表，

标签嵌套在

标签中，用于描述具体的列表项，每对

中至少应包含一对

。

有序列表：
有序列表是一种强调排列顺序的列表，使用
标签定义，内部可以嵌套多个
标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下:
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
   ...
注意：

标签用于定义有序列表，

为具体的列表项，和无序列表类似，每对

中也至少应包含一对

。

定义列表
定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即dl、dt、dd。定义列表的基本语法格式如下：

名词1

dd是名词1的描述信息1

dd是名词1的描述信息2

名词2

dd是名词2的描述信息1

dd是名词2的描述信息2

注意：

标签用于指定定义列表，

和

并列嵌套于

中。其中，

标签用于指定术语名词，

标签用于对名词进行解释和描述。一对

可以对应多对

, 也就是说可以对一个名词进行多项解释。
例子：

<body>
<d1>
<dt>红色 </dt>
     <dd>是光谱的三原色和心理四色之一</dd>
     <dd>代表着吉祥、喜庆、火热、幸福、豪放、
      斗志、革命、轰轰烈烈、激情澎湃等</dd>
<dt>绿色</dt>
     <dd>是自然界中常见的颜色</dd>
     <dd>绿色有无公害，健康的意思</dd>
</d1>
</body>

超链接是网页中最常用的元素，一个网站通常由多个页面构成，进入网站时首先看到的是首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。
使用标签创建超链接的基本语法格式如下所示。

文本或图像

图像标签
标签基本语法格式如下：

src属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径，它是标签的必需属性。

特殊符号：

空    格：
空&nbsp;格
空&nbsp;格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end
<br/>
&gt;大于
<br/>
&lt;小于
<br/>
&copy;版权符号
图像格式（图片的插入）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>

<img src="resources/image/1.jpg（图片链接路径）"alt="图像替代文字（在没有图片的时候显示）"title="悬停文字（鼠标放在图片上显示）"width="600"height="400">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>


<a href="图像标签.html">点击跳转到指定界面</a>
<a href="http://www.baidu.com">点击跳转到百度</a>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<a name="top">顶部</a>

<a href="图像标签.html"target="_blank">点击跳转到指定界面</a>
<a href="http://www.baidu.com"target="_self">点击跳转到百度</a>

<br/>

<a href="http://www.csdn.net">
    <img src="resources/image/1.jpg"alt="测试"title="悬停文字"width="600"height="400">
</a>

<p>
    <a href="http://www.csdn.net">
        <img src="resources/image/1.jpg"alt="测试"title="悬停文字"width="600"height="400">
    </a>
</p>

<p>
    <a href="http://www.csdn.net">
        <img src="resources/image/1.jpg"alt="测试"title="悬停文字"width="600"height="400">
    </a>
</p>

<p>
    <a href="http://www.csdn.net">
        <img src="resources/image/1.jpg"alt="测试"title="悬停文字"width="600"height="400">
    </a>
</p>

<p>
    <a href="http://www.csdn.net">
        <img src="resources/image/1.jpg"alt="测试"title="悬停文字"width="600"height="400">
    </a>
</p>


<a href="#top">回到顶部</a>

<a name="down">down</a>


<a href="mailto:2641123591@qq.com">点击联系我</a>


<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="在这里通过QQ沟通" title="在这里通过QQ沟通"/></a>


</body>
</html>
行内元素和块元素

块元素：

无论内容多少，该元素独占一行

（p、h1-h6…)

行内元素：

内容撑开宽度，左右都是行内元素的可以排在一行

（a,strong,em…)

列表

列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览器者能更快捷地获得相应的信息

列表的分类：

无序列表

有序列表

定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签学习</title>
</head>
<body>

<ol>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>
<hr/>


<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>

</ul>
<hr>


<dl>
   <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>linux</dd>
    <dd>C/C++</dd>
    <hr>
    <dt>位置</dt>
    <dd>四川</dd>
    <dd>重庆</dd>
    <dd>西安</dd>
</dl>

</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>

<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

</body>
</html>
视频和音频

视频元素：

vidio

音频元素：

audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<video src="resources/vidio/target_video.mp4" controls autoplay></video>

<audio src="resources/audio/测试.mp3" controls="controls" autoplay="autoplay"></audio>
</body>
</html>
页面结构分析

用于定义表格中的单元格，也可称为表格中的列，必须嵌套在

用户名:

密码:

元素名描述

header 标题头部区域的内容（用于页面或页面中的一块区域

footer 标记脚步区域的内容（用于整个页面中的一块区域）

section web页面中的一块独立区域

article 独立的文章内容

aside 相关内容或应用（常用于侧边栏）

nav 导航类型辅助内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构学习</title>
</head>
<body>

<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>






<iframe src=""  name="hello" frameborder="0" width="1000px" height="800"></iframe>

<a href="媒体元素.html" target="hello">点击跳转</a>

</body>
</html>
表单语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>


<form action="媒体元素.html"method="get">

    <p>名字:<input type="text" name="username"></p>
    
    <p>密码:<input type="password" name="pwd"></p>
<p>
    <input type="submit">

    <input type="reset">

</p>
</form>
</body>
</html>
表单元素格式

属性说明

type 指定元素类型。text、password、checkbox、radio、submit、resrt、file、hidden、image和button，默认为text

name 指定表单元素的名称

value 元素的初始值。type为radio时必须指定一个值

size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位

maxlength type为text或password时，输入的最大字符数

checked type为radio或checkbox时,指定按钮是否是被选中

文本框和单选框
<form action="媒体元素.html"method="get">



    <p>名字:<input type="text" name="username" value="输入内容" maxlength="8" size="30"></p>
    
    <p>密码:<input type="password" name="pwd"></p>
<p>
    <input type="submit">

    <input type="reset">

</p>
</form>
单选框：

    <p>性别
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女

</p>
按钮和多选框

多选框：
</p>

<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">游戏
</p>
按钮：

<p>按钮:
    <input type="button" name="btn1" value="点击变长">
    <input type="image" src="resources/image/头像3.gif">
</p>
<p>
    <input type="submit">

    <input type="reset">

</p>
列表框文本域和文件域

下拉框：

<P>下拉框
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="选项的值">美国</option>
        <option value="ger"selected>德国</option>
        <option value="ch">瑞士</option>
    </select>
</P>
文本域：

<p>反馈
    <textarea name="textarea" cols="30" rows="10">文本内容</textarea>

</p>
文件域：

<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>
搜索框滑块和简单验证

滑块：

<p>滑块：
    <input type="range" min="0" max="100" step="5">
</p>
搜索框：

    <p>搜索
        <input type="search" name="search">
    </p>
验证：

<p>邮箱
    <input type="email" name="email">
</p>

    <p>URL
        <input type="url" name="url">
    </p>

    <p>数字
        <input type="number" name="num" max="100" min="0" step="10">

    </p>
表单的应用

隐藏域hidden

只读readonly

禁用disabled
readonly（可以将内容设定为只读，无法修改
disabled（可以将选择内容禁用，然后该选项无法选中）
hidden（可以把内容隐藏起来，但是属性还在）

    <p>
    <label for="mark">点击试试</label>
    <input type="text">
</p>
表单初级验证

常用方式：

placeholder——提示信息

required——非空判断

pattern——正则表达式（较复杂，网络搜索相关的正则表达式

placeholder:默认信息提示用户输入
<p>名字:<input type="text" name="username" placeholder="请输入用户名"></p>
required:表示此处内容不能为空（必须输入有内容才能提交）

pattern：正则表达式的验证

    <p>自定义邮箱：
        <input type="text" name="dymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
    </p>
CSS

一、什么是CSS

CSS 是 Cascading Style Sheet的缩写，译作“层叠样式表单”，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS定义的规则具体如下：

选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;…}
选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和属性值以键值对“属性:属性值”的形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）连接，多个“键值对”之间用 “;”（英文分号）进行分隔。
通过CSS样式对

标签进行设置

div{ border: 1px solid red; width: 600px; height: 400px;}

div为选择器，表示CSS样式作用的HTML对象，border、width和height为CSS属性，分别表示边框、宽度和高度，其中border属性有3个值“1px solid red;”分别表示该边框为1像素、实心边框线、红色。

行内式：
行内式也被称为内联式，是通过标签的style属性设置标签的样式。行内式基本语法格式如下：

<标签名 style=”属性1:属性值1;属性2:属性值2;属性3:属性值3;”>内容</ 标签名>
style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。属性和属性值的书写规范与CSS样式规则一样。行内式只对其所在的标签及嵌套在其中的子标签起作用。

行内式是写在根标签中，例如下面的示例代码

使用CSS行内式修饰一级标题的字体大小和颜色

使用
标签的style属性设置行内式CSS样式，用来修饰一级标题的字体和颜色。需要注意的是：行内式是通过标签的属性来控制样式的，这样并没有做到结构域样式分离，所以不推荐使用。

内嵌式：
内嵌式是将CSS代码集中写在HTML文档的头部标签中，并用

“`

    <link rel="stylesheet" href="style.css">
</head>
<body>



<h1>这是标题</h1>
<h2>这是第二个测试</h2>

<h3 style="color:red">这是行内样式</h3>

</body>
</html>
扩展：外部样式两种写法
2.链接样式

链接式：

html

    <link rel="stylesheet" href="style.css">
3.导入样式

导入式：(不建议使用)

CSS2.1

    <style>
        @import url("style.css")
    </style>
link属于html标签。@import在css中使用表示导入外部样式表；
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重高于@import的权重；
link 支持使用javascript改变样式（document.styleSheets），后者不可
本质上区别不大，但是为了软件中编辑布局网页html代码，一般使用link较多。

二、选择器

基本选择器

作用：选择页面上的某一个或者某一类元素

标签选择器：选择一类标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器，会选择到页面上所有的这个标签元素 */
        h1{
            color: #f8be2c;
            background: #06eea4;
            border-radius:24px;
        }
        p{
            font-size:60px;
        }
    </style>

</head>
<body>

<h1>学习Java</h1>
<h1>学习Java</h1>
<p>听狂神说</p>
</body>
</html>
类选择器class：选择所有class属性一致的标签，跨标签，.类名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>

    <style>
        /*类选择器的格式 .class的名称{}
        好处：可以多个标签归类，同一个class，可以复用
        class可以全局复用

        */
        .qinjiang{
            color:#06eea4;
        }
        .kuangshen{
            color:#ec760c;
        }


    </style>

</head>
<body>

<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1>标题3</h1>
<p class="qinjiang">P标签</p>

</body>
</html>
id选择器：全局唯一！！ #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>

    <style>
/*
id选择器——id必须保证全局唯一！！！
#id名称{}
不遵循就近原则，固定的
id选择器》class选择器》标签选择器
*/
#qingjiang{
    color:#f8be2c;
}
    </style>

</head>
<body>
<h1 id="qingjiang">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级：id > class >标签

层次选择器

后代选择器：在某个元素的后面 ——祖爷爷爷爷爸爸你
/*后代选择器*/
body p{
    background: red;
}
子选择器，一代，儿子
/*子选择器*/

body>p{
    background: #06eea4;
}
相邻兄弟选择器-同辈
/*相邻兄弟选择器，只有一个，相邻（向下衍生）*/
.active + p{
    background: #f8be2c;
}
通用选择器
/*通用兄弟选择器 ,当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: #feec85;
}
层次选择器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
/*background背景颜色*/
       /* p{
            background: #ec760c;
        }
*/
/*后代选择器*/
/*body p{
    background: red;
}*/

    /*子选择器*/
/*body>p{
    background: #06eea4;
}*/
/*相邻兄弟选择器，只有一个，相邻（向下衍生）*/
/*.active + p{
    background: #f8be2c;
}*/
/*通用兄弟选择器 ,当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: #feec85;
}

    </style>
</head>
<body>

<p>p0</p>
<p class="active">p01</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

</body>
</html>
后代选择器：

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素：

这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：
<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
结构伪类选择器

伪类：
/*ul的第一个子元素*/
ul li:first-child{
    background: #f8be2c;
}
    /*ul的最后一个子元素*/
ul li:last-child{
    background: #f35626;
}

    /*选中p1:定位到父元素，选择当前的第一个元素
    选中当前p元素的父级元素，选中父级元素的第一个
    */
p:nth-child(1){
    background: chocolate;
}
/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(2){
    background: yellow;
}
属性选择器

属性选择器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .demo a{
            display: block;
            height: 50px;
            width: 50px;
            float:left;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: beige;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
         /*属性名，属性名=属性值（正则）
         =表示绝对等于
         *=表示包含
         ^=表示以...开头
         $=表示以...结尾
         存在id属性的元素  a[]{}
         */
        /* a[id]{
             background: red;
         }*/

         /*id=first的元素*/
       /* a[id=first]{
            background: aqua;
        }*/

        /*class中有links元素*/
       /* a[class = "links item2 first2"]{
            background: orange;
        }*/
        /*a[class*="links"]{
            background: black ;
        }*/
        /*选中href中以http开头的元素*/
        a[href^="http"]{
            background: orange;
        }
    </style>

</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="/adad/faf" class="links item2 first2" >2</a>
    <a href="qwe123" class="links item3 first3" >3</a>
    <a href="eweqe" class="links item4 first4" >4</a>
    <a href="rrrrr" class="links item5 first5" >5</a>
    <a href="ttt" class="links item6 first6" >6</a>
    <a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>
简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
/*把包含标题（title）的所有元素变为红色，可以写作：*/
*[title] {color:red;}
/*可以只对有 href 属性的锚（a 元素）应用样式：*/
a[href] {color:red;}
/*可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，*/
a[href][title] {color:red;}
/*可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像*/
img[alt] {border: 5px solid red;}
/*想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：*/
planet[moons] {color:red;}
/*让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：*/
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
/*根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。*/
/*例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：*/

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
/*与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。*/
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
/*这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：*/
<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
<a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
<a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>
/**/
三、美化网页元素

字体样式

span标签：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title{
            font-size:50px;
        }
    </style>

</head>
<body>
欢迎学习<span id="title">Java</span>
</body>
</html>
    /*
    font-family:字体
    font-size:字体大小
    font-weight:字体粗细
    color:字体颜色
    */
    <style>
        body{
            font-family: 楷体;
            color:#f8be2c;
        }
        h1{
            font-size: 50;
        }
        p1{
            font-weight: bold;
        }
    </style>
字体风格：
通过 font-family 属性设置更具体的字体
h1 {font-family: Georgia;}
如果用户没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。

我们可以通过结合特定字体名和通用字体系列来解决这个问题：

h1 {font-family: Georgia, serif;}
如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：

body {font-family: sans-serif;}
font-style 属性最常用于规定斜体文本。

该属性有三个值：

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体变形：

font-variant 属性可以设定小型大写字母。

小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
p {font-variant:small-caps;}
字体加粗：

font-weight 属性设置文本的粗细。

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
<html>
<head>
<style type="text/css">
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
</head>

<body>
<p class="normal">This is a paragraph</p>

<p class="thick">This is a paragraph</p>

<p class="thicker">This is a paragraph</p>
</body>

</html>
字体大小

font-size 属性设置文本的大小。

通过像素设置文本大小，可以对文本大小进行完全控制：
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
使用em来设置字体大小：

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em：pixels/16=em

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
结合使用百分比和EM：

CSS 字体属性

属性描述

font 简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family 设置字体系列。

font-size 设置字体的尺寸。

font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）

font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）

font-style 设置字体风格。

font-variant 以小型大写字体或者正常字体显示文本。

font-weight 设置字体的粗细。

文本样式

颜色 color rgb rgba

文本对齐方式 text-align = center

首行缩进 text-indent:2em

行高:line-height: 单行文字上下居中！ line-height = height

装饰 text-decoration;

文本图片水平对齐：vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本的装饰</title>

    <style>
        h1{
            color:rgba(0,255,255,0.8);
            /*这是文本居中*/
            text-align:center;
        }
        /*这是首行缩进，段落缩进*/
        .p1{
            text-indent: 2em;
        }
        /*这里设置行高*/
        .p3{
            background: royalblue;
            height:300px;
            line-height:50px;
        }
    </style>

</head>
<body>
<h1>这是一个测试文本</h1>
   <p class="p1"> 嘉峪关城，城墙高9米，还要在城墙之上修建数十座大小不同的楼阁和众多的垛墙，用砖数量之大是非常惊人的，当时，施工条件很差，没有吊运设备，全靠人工搬运。</p>
    <p class="p3">而当时修关城所用的砖，都是在40里以外的地方烧制而成。砖烧好后，用牛车拉到关城之下，再用人工往上背。</p>
    <p>由于城高，唯一能上下的马道坡度大，上下很困难，尽管派了许多人往城墙上背砖，个个累得要死，但背上去的砖却仍然供不应求，工程进展受到了严重影响。</p>
<p>一天，一个放羊的孩子来到这里放羊玩耍，看到这个情景，灵机一动，解下腰带，两头各捆上一块砖，搭在山羊身上，然后，用手拍一下羊背，身子轻巧的山羊，驮着砖一溜小跑就爬上了城墙。</p>
<p> 人们看了又惊又喜，纷纷仿效，大量的砖头很快就运上了城墙。</p>


</body>
</html>
text-indent:2em;//段落首行缩进
background://颜色
line-height://行高
文本阴影和超链接伪类

阴影
/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径    */
        #price{
            text-shadow: #3d98e9 10px 10px 2px;
        }
伪类

正常情况下，a,a:hover
 a{
            /*Default color*/	默认颜色
            text-decoration: none;
            color:#000000;
        }
    /*鼠标悬浮的状态（只需记住：hover)*/
        a:hover{
            color:orange;
            font-size;50px;
        }
列表
/*ul li*/
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
    background: #929090;
}
ul li{
    height: 30px;
    list-style:none ;
    text-indent: 1em ;
}
背景
background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/
背景颜色

背景图片
background:red url("图片相对路劲") 270px 10px no-repeat
background-position：/*定位：背景位置*/
 <style>
        div{
            width:1000px;
            height:700px;
            border:1px solid red;
            background-image: url("images/mao1.jpg");
        /*    默认全部平铺*/
        }
        div1{
            background-repeat: repeat-x;
        }
        div2{
            background-repeat: repeat-y;
        }
        div3{
            background-repeat: no-repeat;
        }
    </style>
渐变

网址：https://www.grablent.com
径向渐变、圆形渐变
渐变
background-color: #4158D0;
background-image: linear-gradient(225deg, #4158D0 0%, #C850C0 5%, #FFCC70 12%, #56d9cc 75%, #e38bb9 100%);
/*https://www.grabient.com/*/
盒子模型

margin：外边距

padding：内边距

border：边框

边框

用户登录框
<div id="box">
    <h2>会员登录</h2>
    <from action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </from>

</div>
</from>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            /*body:总有一个默认的外边距margin:0*/
            /*h1,ul,li,a,body{*/
            /*    margin:0;*/
            /*    padding:0;*/
            /*    text-decoration: none;*/
            /*}*/
        /*border:粗细，样式，颜色*/
        #box{
            width:300px;
            border:1px solid red;
        }
            h2{
                font-size:16px;
                background-color:#63a35c;
                line-height:30px ;
                margin:0;
            }
        form{
            background:#63a35c;
        }
        div:nth-of-type(1)>input{
            border:3px solid black;
            /*border”参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红色）。
边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线），*/
        }
        div:nth-of-type(2)>input{
            border:3px dashed #f9ef74;/*dashed，用来形成虚框*/
        }

    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>

</div>
</from>
</body>
</html>
border：粗细样式颜色

边框的粗细

边框的样式

边框的颜色

外边距—-妙用：居中

margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下
margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/
盒子的计算方式：

margin+border+padding+内容的大小

总结：
body总有一个默认的外边距 margin:0
常见操作：初始化
margin:0;
padding:0;
text-decoration:none;
圆角边框—-border-radius

border-radius有四个参数（顺时针），左上开始
圆圈：圆角=半径
<style>
        div{
           width:100px;
            height:100px;
            border:10px solid red;/*边框,solid:实线*/
            border-radius:100px;
        /*    圆圈： 圆角 = 半径！*/
        /*    左上，右上，右下，z下，顺时针*/
        }
    </style>
盒子阴影

浮动

标准文档流

块级元素：独占一行 h1~h6 、p、div、列表…
行内元素：不独占一行 span、a、img、strong

行内元素可以包含在块级元素中，反之则不可以

display

block：块元素

inline：行内元素

inline-block：是块元素，但是可以内联，在一行

none：消失

这也是一种行内元素排列的方式，但是我们很多情况用float
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

原文地址：http://www.cnblogs.com/junze101/p/16786565.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性

思维导图

网页的基本描述：

网页的基本标签：

特殊符号：

图像格式（图片的插入）：

链接标签

行内元素和块元素

列表

表格

视频和音频

页面结构分析

iframe内联框架

表单语法

表单元素格式

文本框和单选框

按钮和多选框

列表框文本域和文件域

搜索框滑块和简单验证

表单的应用

表单初级验证

CSS

一、什么是CSS

2.链接样式

3.导入样式

二、选择器

基本选择器

层次选择器

结构伪类选择器

属性选择器

三、美化网页元素

字体样式

CSS 字体属性

文本样式

文本阴影和超链接伪类

阴影

伪类

列表

背景

渐变

盒子模型

边框

用户登录框

外边距—-妙用：居中

盒子的计算方式：

圆角边框—-border-radius

display

排行榜展示

标签

模型