基本样式

选择器{ **//选择器严格区分大小写
属性1:属性值1; //多个属性之间必须用英文状态下的分号隔开
属性2:属性值2; //属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上引号。
属性3:属性值1; //空格不被解析**
}

行内式/内联样式

通过标记的style属性来设置元素的样式
<标记名 style=”属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标记名>

<h2 style="font-size:20px; color:red;">使用CSS行内式修饰二级标题的字体大小和颜色</h2>

内嵌式

将CSS代码集中写在头部标记中，并且用

<style type="text/css">
h2{ text-align:center;  /*定义标题标记居中对齐*/
p{ font-size:16px; color:red; text-decoration:underline;}   /*定义段落标记的样式*/
</style>

链入式

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。

//3.html文件
<link href="css/3.css" type="text/css" rel="stylesheet" />
//3.css
h2 { 
text-align:center;
}
p {
font-size:16px; 
color:red; 
text-decoration:underline;
}

基础选择器

标记选择器

用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。
标记名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
p { font-size:12px; color:#666; font-family:”微软雅黑”;}

类选择器

使用“.”（英文点号）进行标识，后面紧跟类名。
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。

//CSS：
<style type="text/css">
.red{color:red; }
.green{color:green; }
.font22{font-size:22px; }
p{ text-decoration:underline; font-family:"微软雅黑";}
</style>
//HTML：
<h2 class="red">二级标题文本</h2>
<p class="green font22">段落一文本内容</p>
<p class="red font22">段落二文本内容</p>
<p>段落三文本内容</p>

id选择器（只使用一次）

使用“#”进行标识，后面紧跟id名。
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

//CSS：
<style type="text/css">
#bold {font-weight:bold;}
#font24 {font-size:24px;}
</style>
//HTML：
<h2 id="bold">二级标题文本</h2>
<p id="font24">段落一文本内容</p>

通配符选择器

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

• {
  margin: 0; / 定义外边距/
  padding: 0; / 定义内边距/
  } /使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。 / ```html CSS：

HTML： G o o g l e

![image.png](https://cdn.nlark.com/yuque/0/2020/png/2211273/1601644295728-61160c2d-8a2e-49e6-b1da-8b486a19a771.png#align=left&display=inline&height=115&margin=%5Bobject%20Object%5D&name=image.png&originHeight=230&originWidth=760&size=19679&status=done&style=none&width=380)
<a name="pTyZm"></a>
# 字体样式
<a name="dpGYX"></a>
## **font-size:字号大小**
| **相对长度单位** | **说明** |
| --- | --- |
| **em** | 相对于当前对象内文本的字体尺寸 |
| **px** | 像素，最常用，推荐使用 |
| **绝对长度单位** | **说明** |
| --- | --- |
| **in** | 英寸 |
| **cm** | 厘米 |
| **mm** | 毫米 |
| **pt** | 点 |
<a name="aO0BJ"></a>
## **font-family:字体**
可以同时指定**多个字体**，中间以**逗号**隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。<br />body{font-family:"华文彩云","宋体","黑体";}
<a name="BMEMV"></a>
### tips
- **各种字体之间**必须使用英文状态下的**逗号**隔开。
- **中文字体**需要加英文状态下的**引号**，英文字体一般不需要加引号。当需要设置英文字体时，**英文字体名必须位于中文字体名之前**。
- 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的**单引号或双引号**，例如font-family: "Times New Roman";。
- 尽量**使用系统默认字体**，保证在任何用户的浏览器中都能正确显示。
<a name="V7l5F"></a>
## font-weight:字体粗细
| **值** | **描述** |
| --- | --- |
| **normal** | 默认值。定义标准的字符。 |
| **bold** | 定义粗体字符。 |
| **bolder** | 定义更粗的字符。 |
| **lighter** | 定义更细的字符。 |
| **100~900（100的整数倍）** | 定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗。 |
<a name="fT6Hg"></a>
## font-variant:变体
设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效
<a name="3a8FT"></a>
### normal
默认值，浏览器会显示标准的字体。
<a name="TnFQd"></a>
### small-caps
**所有的小写字母均会转换为大写**。但是所有使用小型大写字体的字母与其**余文本相比**，其字体**尺寸更小**
<a name="XgNJz"></a>
## font-style:字体风格
设置斜体、倾斜或正常字体，其可用属性值如下：
<a name="o7eSn"></a>
### normal：
默认值，浏览器会显示标准的字体样式。
<a name="qbzHj"></a>
### italic（常用）/oblique
浏览器会显示斜体的字体样式。
<a name="imv83"></a>
## font:综合设置字体样式
选择器{font: font-style font-variant font-weight /line-height font-family;}<br />使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中line-height指的是行高。<br />eg：<br />p{ font:italic small-caps bold 30px/40px Arial,"宋体" ;}
```html
//CSS：
<style type="text/css">
.one{ font:italic 18px/30px "隶书";}
.two{ font:italic 18px/30px;}
</style>
//HTML：
<p class="one">段落1：使用font属性综合设置段落文本的字体风格，字号，行高和字体。</p>
<p class="two">段落2：使用font属性综合设置段落文本的字体风格、字号和行高。由于省略了字体属性font-family，这时font属性不起作用。</p>

文本外观属性

color

letter-spacing:字间距

所谓字间距就是字符与字符之间的空白
允许使用负值，默认为normal

word-spacing:单词间距

定义英文单词之间的间距，对中文字符无效

line-height:行间距

单位

• 像素px（使用最多）
• 相对值em

• 百分比

  text-transform:文本转换

  用于控制英文字符的大小写

• none：不转换（默认值）。

• capitalize：首字母大写。
• uppercase：全部字符转换为大写。

• lowercase：全部字符转换为小写。

  text-decoration:文本装饰

• none：没有装饰（正常文本默认值）。

• underline：下划线。
• overline：上划线。

• line-through：删除线。

  text-align:水平对齐方式

• left：左对齐（默认值）

• right：右对齐。
• center：居中对齐。

eg:
h2{ text-align:center;}

text-indent:首行缩进

em：字符宽度的倍数（建议）
%：相对于浏览器窗口宽度的百分比

//CSS：
<style type="text/css">
p{ font-size:14px;}
.one{ text-indent:2em;}
.two{ text-indent:50px;}
</style>
//HTML：
<p class="one">这是段落1中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落1使用text-indent:2em;。</p>
<p class="two">这是段落2中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落2使用text-indent:50px;。</p>

white-space:空白符处理

• normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
• pre：预格式化，按文档的书写格式保留空格、空行原样显示。
• nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记
  。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

  //CSS：
  p{
  font-size:16px;         /*设置段落文本的字号*/
  font-family:"微软雅黑";  /*设置段落文本的字体*/
  line-height:28px;       /*设置段落文本的行高*/
  text-indent:2em;         /*设置段落文本首行缩进*/
  }  
  .blue{ color:#33F;}         /*特殊的蓝色文本*/
  .red{color:#F00;}           /*特殊的红色文本*/
  .money{ font-size:26px;}    /*18000的文本大小*/
  //HTML：
  <img src="img/hebau.jpg" alt="河北农业大学" style="width: 300px;"/>
  <p><em class="blue">导语</em>：全日制本科专业共<strong class="red">6</strong>个：计算机科学与技术专业、网络工程专业、电子信息科学与技术专业、软件工程专业、物联网工程专业、数据科学与大数据技术<em class="blue">【详情】</em></p>
  <p><em class="blue">就业薪资</em>：月薪<strong class="red money">8000</strong>元</p>

  

  复合选择器

  第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格 ```html //CSS：

//HTML：

普通段落文本（蓝色）

指定了.special类的段落文本（红色）

指定了.special类的标题文本（绿色）

段落文本嵌套在段落中，使用strong标记定义的文本（红色）。

二级标题文本。

三级标题文本,加下划线。

段落文本1，加下划线。

段落文本2，普通文本。

段落文本3，加下划线。

段落文本1

段落文本2

段落文本3

帮帮我，我到底显示什么颜色？

//蓝色

```html
strong{ color:red;}
#header{ color:green;}
Html为：
<p id="header" class="blue">
    <strong>继承样式不如自己定义</strong>
</p>
//红色

•行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提到的选择器都大的优先级。
•权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
•CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

//CSS：
<style type="text/css">
.box{
    width:200px;                /*盒子模型的宽度*/
    height:50px;                /*盒子模型的高度*/
    border:15px solid red;    /*盒子模型的边框*/
    background:#CCCCCC;          /*盒子模型的背景*/
    padding:30px;             /*盒子模型的内边距*/
    margin:20px;              /*盒子模型的外边距*/
}
</style>
//HTML：
<p class="box">盒子中包含的内容</p>

div

没有定义，就用来表示一个区块。可以代替footer header …所有标签

边框属性

border-style边框样式

综合设置四条边的样式

• none：没有边框（默认）
• solid：边框为单实线
• dashed：边框为虚线
• dotted：边框为点线

• double：边框为双实线

  单边设置样式

• border-top-style:上边框样式;

• border-right-style:右边框样式;
• border-bottom-style:下边框样式;
• border-left-style:左边框样式;
• border-style:上边框样式 右边框样式 下边框样式 左边框样式;（**顺时针，4个**）
• border-style:上边框样式 左右边框样式 下边框样式; （**上—-左右—-下，3个**）
• border-style:上下边框样式 左右边框样式; （**上下—-左右，2个）**
• border-style:上下左右边框样式; （都一样，1个）

eg：

<p>只有上边为虚线dashed，其他三边为单实线solid，可以使用border-style综合属性分别设置各边样式
p{ borer-style:dashed solid solid solid;}
//or
p{ border-style:solid;}        /*综合设置四边样式*/
p{ border-top-style:dashed;}   /*上边样式覆盖*/

border-width边框宽度

单位：像素px
同边框样式一样，边框宽度也可以针对四条边分别设置，或综合设置四条边的宽度。

• border-top-width：上边框宽度;
• border-right-width：右边框宽度;
• border-bottom-width：下边框宽度;
• border-left-width：左边框宽度;

• border-width：上边框宽度 [右边框宽度 下边框宽度 左边框宽度];

  border-color边框颜色

  边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，其默认边框颜色为父元素的文本颜色。

• border-top-color:上边框颜色;

• border-right-color:右边框颜色;
• border-bottom-color:下边框颜色;
• border-left-color:左边框颜色;

• border-color:上边框颜色 [右边框颜色 下边框颜色 左边框颜色];

  综合设置边框

• border-top:上边框宽度 样式 颜色;

• border-right:右边框宽度 样式 颜色;
• border-bottom:下边框宽度 样式 颜色;
• border-left:左边框宽度 样式 颜色;
• border:四边宽度 样式 颜色; ```html <!DOCTYPE html>

  设置边框属性

  该段落使用单侧边框的综合属性，分别给上、右、下、左四个边设置不同的样式。

  

![image.png](https://cdn.nlark.com/yuque/0/2020/png/2211273/1601880469327-71433f33-b707-44d8-8185-161961f382d3.png#align=left&display=inline&height=208&margin=%5Bobject%20Object%5D&name=image.png&originHeight=416&originWidth=905&size=176033&status=done&style=none&width=452.5)
<a name="3qx9r"></a>
# 背景设置
<a name="Ow9KB"></a>
## background-color背景颜色
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景颜色</title>
        <style type="text/css">
            body{ background-color: #CCC;}      /*设置网页的背景颜色*/
            h2{
                font-family:"微软雅黑"; 
                color:#FFF;
                background-color:#F00;          /*设置标题的背景颜色*/
            }
        </style>
    </head>
    <body>
        <h2>学不会，怎么办？</h2>
        <p>多看帖子、勤写代码，学计算机，高薪就业无忧！详情请见传www.hebau.edu.cn。</p>
    </body>
</html>

background-image图片背景

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景颜色</title>
        <style type="text/css">
            body{ 
                background-color: #CCC;
                background-image:url(img/jianbian.jpg);    
            }      /*设置网页的背景颜色和图片*/
            h2{
                font-family:"微软雅黑"; 
                color:#FFF;
                background-color:#F00;          /*设置标题的背景颜色*/
            }
        </style>
    </head>
    <body>
        <h2>学不会，怎么办？</h2>
        <p>多看帖子、勤写代码，学计算机，高薪就业无忧！详情请见传www.hebau.edu.cn。</p>
    </body>
</html>

background-repeat背景图像平铺

默认情况下，背景图像会自动向水平和竖直两个方向平铺
如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制

• repeat：沿水平和竖直两个方向平铺（默认值）
• no-repeat：不平铺（图像位于元素的左上角，只显示一次）
• repeat-x：只沿水平方向平铺
• repeat-y：只沿竖直方向平铺 ```html <!DOCTYPE html>

  主要学习哪些内容？

  主要学习的课程：Html 、 CSS 、 Javascript 。

![image.png](https://cdn.nlark.com/yuque/0/2020/png/2211273/1601881116295-a66f4851-69c6-44d6-9277-451e19b79fd2.png#align=left&display=inline&height=134&margin=%5Bobject%20Object%5D&name=image.png&originHeight=267&originWidth=847&size=213569&status=done&style=none&width=423.5)
<a name="LndVz"></a>
### background-position背景图像位置
单位：px  直接设置图像左上角在元素中的坐标。
<a name="3qVpo"></a>
#### 对齐方式
–水平方向值：left、center、right。<br />–垂直方向值：top、center、bottom。
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>平铺</title>
        <style type="text/css">
            body{
                background-image:url(img/wdjl.jpg);     /*设置网页的背景图像*/
                background-repeat:no-repeat;                 /*设置背景图像不平铺*/
                background-position: center bottom;
            }
        </style>
    </head>
    <body>
        <h2>主要学习哪些内容？</h2>
        <p style="height:300px">主要学习的课程：Html 、 CSS 、 Javascript 。 </p>
    </body>
</html>

百分比

• 0% 0% 表示图像左上角与元素的左上角对齐。
• 50% 50% 表示图像50% 50%中心点与元素50% 50%的中心点对齐。
• 20% 30% 表示图像20% 30%的点与元素20% 30%的点对齐。
• 100% 100% 表示图像右下角与元素的右下角对齐，而不是图像充满元素。

• 如果只有一个百分数，将作为水平值，垂直值则默认为50%。

  background-attachment背景图像固定

  scroll：图像随页面元素一起滚动（默认值）。
  fixed：图像固定在屏幕上，不随页面元素滚动。

  综合设置元素背景

  在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中

  语法

  background:背景色 url(“图像”) 平铺 定位 固定;

  元素的类型

  行内元素span

  常用于定义网页中某些特殊显示的文本，配合class属性使用。

  display元素转换

  常用的属性值及含义

• inline：此元素将显示为行内元素（行内元素默认的display属性值）。

• block：此元素将显示为块元素（块元素默认的display属性值）。
• inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
• none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。 ```java <!DOCTYPE html>
  第一个div中的文本
  第二个div中的文本
  第三个div中的文本
  第一个span中的文本 第二个span中的文本 第三个span中的文本

![image.png](https://cdn.nlark.com/yuque/0/2020/png/2211273/1602059069752-7cf21684-8533-47de-af6c-984da6f51b5d.png#align=left&display=inline&height=212&margin=%5Bobject%20Object%5D&name=image.png&originHeight=424&originWidth=721&size=114544&status=done&style=none&width=360.5)
<a name="JgFZM"></a>
# 伪类
CSS 伪类（**Pseudo-classes**）用于向某些选择器添加特殊的效果
<a name="dDFuh"></a>
## 链接伪类
![image.png](https://cdn.nlark.com/yuque/0/2020/png/2211273/1602059500395-b5ffabd3-9a8b-48c8-ac81-009b0a413bae.png#align=left&display=inline&height=160&margin=%5Bobject%20Object%5D&name=image.png&originHeight=228&originWidth=673&size=30096&status=done&style=none&width=473)<br />**提示**：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。<br />**提示**：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。<br />**定义顺序**：遵循“爱恨原则”，即“LoVe-HAte”原则
优先级：<br />若没有a{}<br />若无a:link，a:link将采用默认的字体大小和颜色<br />若无a:hover，a:hover将继承a:link的所有属性。若有a:link，a:hover继承自己没有的属性。<br />若没有a:active，a:active将先继承a:hover中的所有属性，然后从a:link继承没有的属性。<br />若没有a:visited,  a:visited将采用默认的字体大小和颜色。<br />总结：优先级L->V->H->A。可以这样记**LoVe HAte（爱恨）**
```java
a {
    color: #000;
    text-decoration: overline;
}
a:link {
    color: #F00;
    text-decoration: none;
}
a:visited {
    color: #0F0;
    text-decoration: none;
}
a:hover {
    color: #00F;
    text-decoration: underline;
}
a:active {
    color: #FF0;
    text-decoration: none;
}

伪类选择器

基本语法

selector:pseudo-class {property:value;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类选择器</title>
        <style type="text/css">
            h3{
                text-align:center;
                color:#900;
            }
            table{
            /* 表格边框宽度 */
                border:10px solid #E7E7E7;
            }
            /* 匹配第一个tr里的元素 */
            tr:first-child{
                background:#E7E7E7;
                font-weight:bold;
            }
            td{
                height:50px;
                width:160px;
                 /* td里面文字居中 */
                text-align:center;
                vertical-align:middle;
                border-bottom:#E7E7E7 1px solid;
                border-right:#E7E7E7 1px solid;
            }
            td:last-of-type{
                border-right:0px;
            }
            tr:nth-child(2n){
                background:#CFCFCF;
            }
        </style>
    </head>
    <body>
        <h3>鞋子尺码对照单</h3>
        <table align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td>脚长（单位：cm）</td>
                <td>尺码（单位：cm）</td>
                <td>欧码</td>
                <td>英码</td>
                <td>美码</td>
            </tr>
            <tr>
                <td>23.7</td>
                <td>24</td>
                <td>38.5</td>
                <td>5.5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>24.1</td>
                <td>24.5</td>
                <td>39</td>
                <td>6</td>
                <td>6.5</td>
            </tr>
            <tr>
                <td>24.5</td>
                <td>25</td>
                <td>40</td>
                <td>6</td>
                <td>7</td>
            </tr>
            <tr>
                <td>25</td>
                <td>25.5</td>
                <td>40.5</td>
                <td>6.5</td>
                <td>7.5</td>
            </tr>
            <tr>
                <td>25.4</td>
                <td>26</td>
                <td>41</td>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td>25.8</td>
                <td>26.5</td>
                <td>42</td>
                <td>7.5</td>
                <td>8.5</td>
            </tr>
            <tr>
                <td>26.2</td>
                <td>27</td>
                <td>42.5</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>26.7</td>
                <td>27.5</td>
                <td>43</td>
                <td>8.5</td>
                <td>9.5</td>
            </tr>
        </table>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类</title>
        <style type="text/css">
            h3{
                text-align:center;
            }
            table{
                border:1px solid #A6A6A6;
            }
            td{
                width:150px;
                height:40px;
                text-align:center;
                vertical-align:middle;
                /* 表格内外边框样式 */
                border:1px dashed #D1D1D1;
            }
            .content{
                background:#9CF;
                font-weight:bold;
                color:#F00;
            }
            /* hover 选择鼠标悬停链接上的状态 */
            tr:hover{ 
                background:#FCF;
            }
        </style>
    </head>
    <body>
        <h3>婴儿身高体重标准表</h3>
        <table  border="0" align="center" cellpadding="0" cellspacing="0">
            <tr class="content">
                <td rowspan="2">年龄</td>
                <td colspan="2">体重（kg）</td>
                <td colspan="2">身高（cm）</td>
            </tr>
            <tr class="content">
                <td>男</td>
                <td>女</td>
                <td>男</td>
                <td>女</td>
            </tr>
            <tr>
                <td>出生</td>
                <td>2.9-3.8</td>
                <td>2.7-3.6</td>
                <td>48.2-52.8</td>
                <td>47.7-52.0</td>
            </tr>
            <tr>
                <td>1月</td>
                <td>3.6-5.0</td>
                <td>3.4-4.5</td>
                <td>52.1-57.0</td>
                <td>51.2-55.8</td>
            </tr>
            <tr>
                <td>2月</td>
                <td>4.3-6.0</td>
                <td>4.0-5.4</td>
                <td>55.5-60.7</td>
                <td>54.4-59.2</td>
            </tr>
            <tr>
                <td>3月</td>
                <td>5.0-6.9</td>
                <td>4.7-6.2</td>
                <td>58.5-63.7</td>
                <td>57.1-59.5</td>
            </tr>
            <tr>
                <td>4月</td>
                <td>5.7-7.6</td>
                <td>5.3-6.9</td>
                <td>61.0-66.4</td>
                <td>59.4-64.5</td>
            </tr>
            <tr>
                <td>5月</td>
                <td>6.3-8.2</td>
                <td>5.8-7.5</td>
                <td>63.2-68.6</td>
                <td>61.5-66.7</td>
            </tr>
            <tr>
                <td>6月</td>
                <td>6.9-8.8</td>
                <td>6.3-8.1</td>
                <td>65.1-70.5</td>
                <td>63.3-68.6</td>
            </tr>
            <tr>
                <td>8月</td>
                <td>7.8-9.8</td>
                <td>7.2-9.1</td>
                <td>68.3-73.6</td>
                <td>66.4-71.8</td>
            </tr>
            <tr>
                <td>10月</td>
                <td>8.6-10.6</td>
                <td>7.9-9.9</td>
                <td>71.0-76.3</td>
                <td>69.0-74.5</td>
            </tr>
            <tr>
                <td>12月</td>
                <td>9.1-11.3</td>
                <td>8.5-10.6</td>
                <td>73.4-78.8</td>
                <td>71.5-77.1</td>
            </tr>
        </table>
    </body>
</html>

伪元素选择器

伪元素

虚拟元素，代表某元素的子元素，逻辑上存在，但不在文档树中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪元素</title>
        <style type="text/css">
            p
            {
                font-size:16px;
                line-height: 30px;
            }
            /* 选择p段落首字母 */
            p:first-letter 
            {
                color: #ff0000;
                font-size:20px;
                /* 首字母左边距 */
                margin-left: 30px;
            }
            /* p元素首行 */
            p:first-line
            {
                color:#0000ff;
                /* 英文变体 */
                font-variant:small-caps;
            }
            /* p内容前面插入新内容，必须配合content属性指定新内容 */
            p:before
            {    content: "";
                background:url(img/74ceec03d661763b9e56035ced83e34.jpg) no-repeat;
                background-size: 30px 30px;
                width:30px;
                height:30px;
                position: absolute;
            }
            p:after
            {
                content: "编辑：陈晨"
            }
        </style>
    </head>
    <body>
        <p>河北农业大学（Hebei Agricultural University）位于河北省保定市，是河北省人民政府与教育部、农业农村部、国家林业和草原局分别共建的省属重点骨干大学，学校入选第一批“卓越农林人才教育培养计划”和“卓越工程师教育培养计划”。</p>
        <p>河北农业大学的前身是光绪二十八年（1902年）创立的直隶农务学堂；1912年改为直隶公立农业专门学校；1921年直隶公立农业专门学校、医务学堂，还有法律、法政、高等师范等学堂合并，组成河北大学；1931年河北大学解散，河北省立农学院独立办学；1958年河北农学院更名为河北农业大学；1995年与原河北林学院合并组建为新的河北农业大学。 </p>
    </body>
</html>

优先级

position布局属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定位</title>
        <style type="text/css">
        h2.pos_left
        {
            position:relative;
            left:-20px
        }
        h2.pos_right
        {
            /* relative 相对其正常位置进行定位 */
            position:relative;
            /* 向left移动20像素 */
            left:20px
        }
        h2.pos_abs
        {
            /* 绝对定位 */
            position:absolute;
            left:100px;
            top:150px
        }
        p.one
        {
            /* 相对于阅览器窗口进行定位 */
            position:fixed;
            left:100px;
            top:200px;
        }
        p.two
        {
            position:fixed;
            top:200px;
            right:100px;
        }
        </style>
    </head>
    <body>
        <h2>这是位于正常位置的标题</h2>
        <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
        <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
        <h2 class="pos_abs">这是带有绝对定位的标题</h2>
        <p class="one">左侧文本。</p>
        <p class="two">右侧文本。</p>
    </body>
</html>

z-index堆叠顺序属性

注释：元素可拥有负的 z-index 属性值。
注释：Z-index仅能在定位元素上奏效（例如position:absolute;）！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>z-index</title>
        <style type="text/css">
            img.x
            {
           /* Z-index仅能在定位元素上奏效*/
                position:absolute;
                left:0px;
                top:0px;
                z-index:-1 /*可以是负的*/
            }
        </style>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <img class="x" src="img/eg_mouse.jpg" /> 
        <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
    </body>
</html>