基于上篇文章是对HTML的基础总结，本文讲述了另一个兄弟CSS ，只是基础知识。

如有不足，望指正。 ————————————————————————————————正文————————————

一、CSS简介

CSS是什么？CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。

1. CSS的基本规则

层叠样式表
选择器——告诉浏览器要设置样式的html元素
声明块——⽤于设置样式

二、内容

1.css的引入方式****

在HTML中引入CSS共有3种方式：

外部样式表； —— link标签将css资源引⼊
内部样式表； —— 写在style标签⾥⾯的
内联样式表；—— 写在元素的style属性⾥⾯的

1) 外部样式表

外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。外部样式表在单独文件中定义，并且在标签对中使用link标签来引用

举例：

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
    <!--在HTML页面中引用文件名为index的css文件-->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>   
     <div></div>
</body>
</html>

说明：外部样式表都是在head标签内使用link标签来引用的。

2) 内部样式表

内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在标签对是放在标签对内的

举例：

<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
  <title></title>    
  <!--这是内部样式表，CSS样式在style标签中定义-->    
  <style type="text/css">
          p{color:Red;}      
   </style>
 </head>
 <body>   
  <p>绿叶学习网</p>  
  <p>绿叶学习网</p>
 </body>

说明：对于内部样式表，CSS样式在<style>标签内定义，而<style>标签必须放在<head>标签内。

3) 内联样式表

内联样式表，也是把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在标签对中定义，而是在标签的style属性中定义。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p style="color:Red; ">绿叶学习网</p>
    <p style="color:Red; ">绿叶学习网</p>
    <p style="color:Red; ">绿叶学习网</p>
</body>
</html>

三、选择器

必须掌握的选择器 |选择器|使用注意事项| | --- | --- | | 元素（标签）选择器 | “选中”相同的元素，然后对相同的元素设置同一个CSS样式。 | |类选择器|id名前面必须要加上前缀“#”，否则该选择器无法生效。| |id选择器(结合JavaScript)|对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作。class名前面必须要加上前缀“.”（英文点号），否则该选择器无法生效。类名前面加上“.”，表明这是一个class选择器。|
开发过程中常⽤的选择器 | 选择器 |使用注意事项 | --------- | ------------------------------------------------------------------------------------------------------- | | 通配符选择器 * | 选择页面中所有元素，设置一个样式浏览器的最低级别默认样式，可替代 | | 派⽣选择器 | 根据⽂档dom结构来选择html元素 | | ⼦元素选择器 | 就是选中某个元素下的子元素，然后对该子元素设置CSS样式。父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。 | | 相邻选择器 | 相邻选择器，就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。“#lv+div{…}”表示选择“id为lv的元素”的相邻的下一个兄弟元素div，也就是第3个div元素。| 后代选择器 | 可使用空格 | | 群组选择器 | 对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效 | | CSS核⼼之特殊的选择器伪类选择器的使⽤ | | | 选中⼀些元素的特殊效果未访问信息已访问信息悬浮点击瞬间 | /* 需要注意顺序 /
/ 未访问的链接 /
a:link {color:#FF0000;}
/ 已访问的链接 /
a:visited {color:#00FF00;}
/ ⿏标悬浮后的链接 /
a:hover {color:#FF00FF;}
/ 已选中的链接 /
a:active {color:#0000FF;} | | 在某些场景选中有关系元素 | / 选择父元素下面第一个子元素 /
div p:first-child{ color: green; }
/ 选择父元素下面最后一个子元素 /
div p:last-child{ color: red; }
/ :nth-child() /
div p:nth-child(2){ background-color:yellow; }
/ 某些情况下好⽤的伪类选择器 */
元素:first-child {}
元素:last-child {}元素:nth-child(n) {} n是从0开始的
注意兼容性|

四、文本样式总结

CSS文字属性

属性	说明
font-family	字体类型举例：“font-family:微软雅黑;”
font-size	字体大小举例：举例：“font-size:15px;”
font-weight	字体粗细举例：“font-family:微软雅黑;”
font-style	字体斜体举例：“font-style:italic;”
color	颜色举例：举例：“color:blue;”

font-style属性 |font-style属性值 | 说明 | | --- | --- | | normal | 默认值，正常体 | | italic | 斜体，这是一个属性| oblique | 将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique |
段落属性

属性	说明
text-decoration	下划线、删除线、顶划线使用“text-decoration:none”这个属性值可以去除a标签的默认样式。学了这个属性之后，我们应该摒弃HTML入门教程中学习到的~~标签（删除线）和标签（下划线）。~~
text-transform	文本大小写使用text-transform属性来转换文本的大小写，这个是针对英文
font-varient	将英文文本转换为“小型”大写字母
text-indent	段落首行缩进text-indent:像素值;
text-align	文本水平对齐方式
line-height	行高line-height:像素值;
letter-spacingletter-spacing	字距letter-spacing:像素值; 我们几乎都用不上，我们直接采用浏览器默认样式就可以了。大家完全可以忽略掉这个属性。
word-spacing	词距word-spacing:像素值;

text-decoration属性值

text-decoration属性值	说明
text-decoration	下划线、删除线、顶划线
none	默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline	下划线
line-through	删除线
overline	顶划线
uppercase	转换成大写
lowercase	转换成小写
capitalize	将每个英文单词的首字母转换成大写，其余无转换发生

font-variant属性值 normal | 默认值，正常效果 | | ---------- | --------- | | small-caps | 小型大写字母的字体|
text-align属性 text-align属性 | 说明 | | ------------ | ------- | | left | 默认值，左对齐 | | center | 居中对齐 | | right | 右对齐|

五、边框属性

1. 边框属性 (可简写 border:1px solid gray; )

要设置一个元素的边框必须要设置以下3个方面：

（1）边框的宽度；

（2）边框的外观（实线，或者虚线）；

（3）边框的颜色

属性	说明
border-width	边框的宽度border-width:像素值;
border-style	边框的外观border-style:属性值;
border-color	边框的颜色border-color:颜色值

2. 边框局部样式

在CSS中，我们可以分别针对上下左右四条边框设置单独的样式

1、上边框border-top

border-top-width:1px;

border-top-style:solid;

border-top-color:red;

简洁写法：border-top:1px solid red;

2、下边框border-bottom

border-bottom-width:1px;

border-bottom-style:solid;

border-bottom-color:orange;

简洁写法：border-bottom:1px solid orange;

3、左边框-left

border-left-width:1px;

border-left-style:solid;

border-left-color:blue;

简洁写法：border-left:1px solid blue;

4、右边框border-right

border-right-width:1px;

border-right-style:solid;

border-right-color:red;

简洁写法：border-right:1px solid red;

六．背景样式

1. CSS背景样式

在CSS中，背景样式主要包括背景颜色和背景图像。在传统的布局中，一般使用HTML的background属性为<body>、<table>和<td>等几个少数的标签定义背景图像，然后使用bgcolor属性为它们定义背景颜色。

但是随着Web2.0时代的到来，传统布局的方式已经满足不了设计者的需求。如今的背景样式不再使用HTML属性来定义。大家记得喔，不要再使用HTML的bgcolor这些属性了，现在几乎全部都是使用CSS的background属性来控制元素的背景颜色和背景图像。

2. 背景颜色

在CSS中，使用background-color属性来控制元素的背景颜色。

color和background-color区别
Color 元素文本元素	background-color 元素背景颜色

3. 背景图像

在CSS中，为元素设置背景图像，往往涉及到以下属性：

属性	说明
background-image	定义背景图像的路径，这样图片才能显示嘛background-image:url("图像地址");
background-repeat	定义背景图像显示方式，例如纵向平铺、横向平铺background-repeat:取值;
background-position	定义背景图像在元素哪个位置background-positon:像素值/关键字;
background-attachment	定义背景图像是否随内容而滚动background-attachment:scroll/fixed;

background-repeat属性取值属性值 | 说明 | | --------- | ---------------------------- | | no-repeat | 表示不平铺 | | repeat | 默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺 | | repeat-x | 表示在水平方向（x轴）平铺 | | repeat-y | 表示在垂直方向（y轴）平铺|
background-positon属性的长度设置值设置值 | 说明 | | ----- | --------------- | | x（数值） | 设置网页的横向位置，单位为px | | y（数值） | 设置网页的纵向位置，单位为px|

注：当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，只不过值不是使用px为单位的数值，而是使用关键字代替。

background-position属性的关键字设置值

属性值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom righ	右下

六、超链接样式

在所有浏览器中，超链接的样式如下：

链接在鼠标点击不同时期的样式是不一样的。

默认情况：字体为蓝色，带有下划线；
鼠标点击时：字体为红色，带有下划线；
鼠标点击后：字体为紫色，带有下划线；注：点击时，指的是点击超链接的一瞬间，字体是红色的。这个样式变化是一瞬间的事情。

1) 去除超链接下划线

超链接默认情况下带有下划线，在CSS中，一般使用“text-decoration:none”来去除超链接下划线

2) 定义超链接伪类

在CSS中，我们使用超链接伪类来定义超链接在不同时期的不同样式。

使用伪类定义动态超链接 属性 | 说明 | | ------ | ------------ | | a:link | 定义a元素未访问时的样式 a:visited | 定义a元素访问后的样式 | | a:hover | 定义鼠标经过显示的样式 | | a:active | 定义鼠标单击激活时的样式|

3) 深入了解超链接伪类

不是每一个超链接都必须要定义4种状态的样式，一般情况下，我们只用到2种状态：未访问状态和鼠标经过状态。

未访问状态，我们直接在a标签定义就行了，没必要使用“a:link”。

语法：

Ø a{CSS样式}

Ø a:hover{CSS样式}

4) 深入了解:hover伪类、

“:hover”伪类可以定义任何一个元素在鼠标经过时的样式！

语法： 元素:hover{}

说明： “元素”可以是任意的块元素和行内元素。

七．鼠标样式

1. cursor属性

在CSS中，使用cursor属性来定义鼠标的样式。

语法： cursor:属性值;

说明： cursor属性取值如下，默认值为default。在实际开发中，我们一般只用到“default”和“pointer”这两个属性值，其他的一般都很少用得上

八．图片样式

1. 图片大小width和height

在CSS中，对于图片的大小用width和height来定义

语法： width:像素值; height:像素值;

2. 图片边框border

在CSS中，对于图片的边框是使用border属性来定义。

语法：

border-width:像素值;
border-style:属性值;
border-color:颜色值;

可简写：“border:1px solid gray;”。

3. 图片水平对齐text-align

text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。

语法： text-align:属性值;

说明：text-align属性取值如下表：

text-align属性值	说明
left	默认值，左对齐
center	居中对齐
right	右对齐

4. CSS图片垂直对齐 vertical-align属性

在CSS中，我们可以使用vertical-align属性来定义图片的垂直对齐方式。

语法： vertical-align:属性值;

说明：

vertical即“垂直的”，align即“使排整齐”。

vertical-align属性取值如下表：

vertical-align属性取值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

vertical-align属性定义是：vertical-align属性定义行内元素相对于该元素的垂直对齐方式。

5. 文字环绕效果-初识float

1、float属性

在网页布局的过程中，常常遇到图文混排的效果。图文混排，也就是文字环绕着图片进行布局。文字环绕图片的方式在实际页面中的应用非常广泛，如果再配合内容、背景等多种手段便可以实现各种绚丽的效果。

在CSS中，使用浮动属性float可以设置文字在某个元素的周围，它能应用于所有的元素。

语法： float:取值;

说明： float属性的取值很简单也很容易记忆，就2个属性值：

left	元素向左浮动
right	元素向右浮动

2、设置图片与文字的间距

文字紧紧环绕在图片周围，如果希望图片本身与文字有一定的距离，只需要给<img>标签添加margin属性即可。

margin属性包括margin-top（上外边距）、margin-bottom（下外边距）、margin-left（左外边距）、margin-right（右外边距）。

语法：

margin-top:像素值;

margin-bottom:像素值;

margin-left:像素值;

margin-right:像素值;

九．列表样式

1. 元素中定义列表项符号list-style-type

在CSS中，不管是有序列表还是无序列表，都统一使用list-style-type属性来定义列表项符号

语法： list-style-type:属性值;

说明：

list-style-type属性取值如下：

decimal	默认值，数字1、2、3
lower-roman	小写罗马数字i、ii、iii
upper-roman		大写罗马数字I、II、III
lower-alpha	小写英文字母a、b、c
upper-alpha	大写英文字母A、B、C

无序列表list-style-type取值 list-style-type属性值 | 说明 | | ------------------ | ---------- | | disc | 默认值，实心圆“●” | | circle | 空心圆“○” | | square | 实心正方形“■”|
去除列表项符号 none | 去除列表项符号 | | ---- | -------|

2. 自定义列表项符号list-style-image

在CSS中，我们可以使用list-style-image属性来自定义列表项符号。

语法： list-style-image:url(图像地址);

说明：图像地址可以是相对地址，也可以是绝对地址。请查看“相对路径和绝对路径”

举例：

我们把下面这个小图标自定义为列表项符号：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>list-style-image属性</title>
    <style type="text/css">
        ul{list-style-image:url("../App_images/lesson/run_cj/list.png");}
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

分析：自定义列表项符号，实际上就是列表项符号改为一张图片，而引用一张图片就要给出它的引用路径。

十、表格样式

1. 表格边框合并border-collapse

在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙。

语法： border-collapse:属性值;

说明： border-collapse是表格独有的属性。除了表格，在其他地方是用不上的。

border-collapse属性取值如下：

border-collapse属性值	说明
separate	默认值，边框分开，不合并
collapse	边框合并，如果相邻，则共用一个边框
separate意思是“分离”，而collapse意思是“折叠，瓦解”。
只需要在table元素中设置border-collapse属性值就行，没必要在th、td这些元素也设置，造成代码冗余。

2. 表格边框间距border-spacing

在CSS中，我们使用border-spacing属性来定义表格边框间距。

语法： border-spacing:像素值;

说明：该属性指定单元格边界之间的距离。当只指定了1个像素值时，这个值将作用于横向和纵向上的间距；当指定了2个length值时，第1个作用于横向间距，第2个作用于纵向间距。

border-spacing属性跟上节课学到的border-collapse属性一样，只需要在table元素设置就可以生效，没必要在th、td这些元素中设置，造成代码冗余。

3. 表格标题位置caption-side

在CSS中，我们使用caption-side属性来定义表格标题的位置。

语法： caption-side:属性值;

说明：

caption-side属性取值如下：

caption-side属性值	说明
top	默认值，标题在顶部
bottom	标题在底部

十、CSS盒子模型

1. CSS盒子模型简介

属性	说明
border	（边框）元素边框边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border
margin	（外边距）用于定义页面中元素与元素之间的距离即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。
padding	（内边距）用于定义内容与边框之间的距离关于内边距的属性有5种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。方向：顺时针上下右左
content	（内容）可以是文字或图片内容区有3个属性：width、height和overflow。方向：顺时针上下右左

2. 宽度width和高度height

width：像素值;

height：像素值

说明：

只有块元素能设置width和height，行内元素无法设置width和height。

div元素是块元素，span是行内元素。因此div元素可以设置宽度width和高度height，而span元素无法设置宽度width和高度height。

3. 边框border

语法： border:像素值边框类型颜色值

说明：

两个属性值之间一定要用空格隔开。

十二、浮动布局

1. 什么是“正常文档流”？

什么叫文档流？简单来说，就是元素在页面出现的先后顺序。正常文档流的简单定义：正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右地依次排列元素。

因为div、p、hr都是块元素，因此独占一行。而span、i、img都是行内元素，因此如果两个行内元素相邻，就会会位于同一行，并且从左到右排列。

2. 什么叫“脱离正常文档流”？

脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用CSS样式去控制的HTML文档结构，你写的界面的顺序就是网页展示的顺序。比如写了5个div元素。正常文档流就是按照依次显示这5个div元素。由于div元素是块元素，因此每个div元素独占一行：然后，所谓的脱离文档流就是指它所显示的位置和文档代码的顺序不一致了，比如可以用CSS控制，把最后一个div元素显示在第一个div元素的位置

3. 浮动float简介

在传统的印刷布局中，文本可以按照实际需要来围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里被文字包围的图片一样。

浮动属性float是CSS布局的最佳利器，我们可以通过不同的浮动属性值灵活地定位div元素，以达到布局网页的目的。我们可以通过CSS的属性float使元素向左或向右浮动。也就是说，让盒子及其中的内容浮动到文档的右边或者左边。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

语法： float:取值;

说明：

float属性的取值很简单也很容易记忆，就2个属性值

float属性值	说明
left	元素向左浮动
right	元素向右浮动

清除浮动clear简介

在CSS中，清除浮动都是在设置左浮动或者右浮动之后的元素内设置。

语法： clear:取值;

说明：

clear属性取值如下：

clear属性值	说明
left	清除左浮动
right	清除右浮动
both	左右浮动一起清除

使用clear属性清除浮动，我们比较少使用“clear:left;”或者“clear:right;”来判断是清除左浮动，还是清除右浮动。我们往往直截了当地使用“clear:both;”来把所有浮动清除，还省事

十三、定位布局

1. CSS定位布局简介

CSS浮动布局。浮动布局比较灵活，但是不容易控制。而定位布局的出现，使得用户精准定位页面中的任意元素成为可能，使得网页布局变得更加随心所欲。当然由于定位布局缺乏灵活性，也给空间大小和位置不确定的版面布局带来困惑。

CSS定位将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动，能够创建多种高级而精确地布局定位的方法有很多种，它们分别是固定定位（fixed）、相对定位（relative）、绝对定位（absolute）和静态定位（static）

默认情况下，“固定定位元素和绝对定位元素的位置是相对于浏览器而言，而相对定位元素的位置是相对原始位置而言”

2.CSS固定定位fixed

当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。

语法：

position:fixed;

top:像素值;

bottom;像素值;

left:像素值;

right:像素值;

“position:fixed;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。top、bottom、left和right这4个属性不一定全部都用到。注意，这4个值的参考对象是浏览器的4条边。

固定定位的div元素不会有任何位置改变，但是无定位的div元素会改变。固定定位其实很简单，就是使用“position:fixed”设置某一个元素为固定定位，接着使用top、bottom、left和right这4个属性来设置一下元素相对浏览器的位置就可以了。固定定位用途也很多，一般用于“回顶部”特效和固定栏目的设置。

3.CSS相对定位简介relative

采用相对定位的元素，其位置是相对于它的原始位置计算而来的。相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。采用相对定位的元素会获得相应的空间。

语法：

position:relative; 

top:像素值;

bottom:像素值;

left:像素值;

right:像素值;

说明：

“position:relative;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:relative;”使得元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对原始位置。相对定位的容器浮上来后，其所占的位置仍然留有空位，后面的无定位元素仍然不会“挤上来”。

在这里要非常清楚这一点：默认情况下，CSS相对定位元素的位置是相对于原始位置而言，而CSS固定定位元素的位置是相对浏览器而言！

4.CSS绝对定位absolute

当元素的position属性值为absolute时，这个元素就变成了绝对定位元素。绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地把元素移动到任意你想要的位置。

一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的

语法：

position:absolute;

top:像素值;

bottom:像素值;

left:像素值;

right:像素值;

说明：

“position:absolute;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:absolute;”使得元素成为绝对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

现在，我们暂且可以这样理解：CSS固定定位元素和CSS绝对定位元素的位置是相对于浏览器而言，而CSS相对定位元素的位置是相对原始位置而言。

5.CSS静态定位static

如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。

说白了，平常我们根本就用不到“position:static”，不过呢，如果有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用“position:static;”来实现。

进阶CSS3

一、什么是CSS3？

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

二、 CSS3新特性及核⼼知识

新特性	说明
el1~el2	匹配element1元素之后的每⼀个element2元素，必须具有相同的⽗元素

[attribute^=value]	匹配元素属性值以指定value值开头的元素
[attribute$=value]	匹配元素属性值以指定value值结尾的元素
[attribute*=value]	匹配元素属性值包含指定value值的元素

el:fifirst-of-type	匹配的el元素是其⽗元素的第⼀个⼦元素
el:last-of-type	匹配的el元素是其⽗元素的最后⼀个⼦元素
el:only-of-type	匹配的el元素是其⽗元素唯⼀的⼦el元素
el:only-child	匹配属于⽗元素中唯⼀⼦元素的el元素
n可以是数字，关键字或者公式
el:nth-child(n)	匹配⽗元素中的第n个⼦元素，⼦元素不是el元素则不⽣效
el:nth-last-child(n)	匹配⽗元素中的倒数第n个⼦元素，⼦元素不是el元素则不⽣效
el:nth-last-of-type(n)	匹配⽗元素中同类型的倒数第n个⼦元素
el:last-child	匹配⽗元素中最后⼀个⼦元素

:root	匹配⽂档的根元素，该选择器等同于html(在html⽂档中根元素就是html)

el:empty	匹配每个没有任何⼦级的元素(包过⽂本节点)

:target	匹配当前活动的target元素的样式

el:enabled	匹配每个启⽤的元素(主要⽤于表单元素)
el:disabled	匹配每个禁⽤的元素(主要⽤于表单元素)
el:checked	匹配每个选中的输⼊元素(仅⽤于单选按钮或复选框)

:not(selector)	匹配除了指定selector元素的其他元素
::selection	匹配被⽤户选中或处于⾼亮状态的元素该选择器只可以应⽤于少数的css属性：color，background，cursor和outline

el:out-of-range	匹配值在指定区间外的input元素注意：该选择器只作⽤于能指定区间之外值得元素，例如input元素的min和max属性

el:in-range	匹配值在指定区间内的input元素

el:read-write	匹配可读及可写的元素

el:optional	匹配可选的输⼊元素
optional	选择器只适⽤于表单元素：input、select和textarea
el:required	匹配设置了required属性的元素
required	选择器只适⽤于表单元素：input、select和textarea
el:valid	匹配输⼊值为合法的元素注意： :valid 选择器只作⽤于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

el:invalid	匹配输⼊值为⾮法的元素

二、CSS3新增的⽤户界⾯属性

1.resize属性规定是否可以调整元素尺⼨

属性	说明
none	默认值，无法调节高度
both	可调整元素的高度和宽度
horizontal	可调整元素的宽度
vertical	可调整元素的高度

2.box-sizing属性改变盒子模型的组成方式以下是该属性的三个值：

content-box 默认值 padding和border不计⼊width和height内

border-box padding和border计⼊width和height内

inherit 继承⽗元素的box-sizing属性的值

outline-offffset属性设置轮廓框架在border边缘外的偏移

outline与border有两点不同：

outline不占⽤空间

outline可能是⾮矩形

三、 CSS3常⽤的样式属性边框与盒阴影

1.CSS3圆⻆属性border-radius：被⽤于创建圆⻆

border-radius属性每个半径四个值的顺序分别是左上，右上，右下，左下

可传的值如下：

length：定义圆形半径或椭圆的半⻓轴，半短轴。负值⽆效。

percentage：使⽤百分数定义圆形半径或椭圆的半⻓轴,半短轴。⽔平半轴相对于盒模

/斜杆分隔写法，斜杆左边的值为⽔平半轴，右边值垂直半轴

2.CSS3盒阴影属性box-shadow：被⽤来添加阴影语法：box-shadow: h-shadow v-shadow blur spread color inset;

说明：

h-shadow：必需的。⽔平阴影的位置。允许负值
v-shadow：必需的。垂直阴影的位置。允许负值
blur：可选。模糊距离
spread：可选。阴影的⼤⼩
color：可选。阴影的颜⾊。
inset：可选。阴影向内扩散

3. CSS3图⽚边框属性border-image：指定⼀个图⽚作为边框

语法： border-image: border-image-source border-image-slice / border-image-width border-image-outset border-image-repeat

说明：

border-image-source：边框图⽚的资源路径


border-image-slice：切割图⽚,[< number> | < percentage>]

border-image-width：图像边界的宽度 [ < length> | < percentage> | < number> | auto ]

        length 带 px, em, in … 单位的尺⼨值

percentage 百分⽐

number 不带单位的数字；它表示 border-width 的倍数

auto 使⽤ auto， border-image-width 将会使⽤ border-image-slice 的值

border-image-outset：定义边框图像向外偏移的宽度[ < length> | < number> ]

border-image-repeat：⽤于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）

四、CSS3背景新特性及精灵图⽚的使⽤

1. background-image：添加背景图⽚

可添加多个背景，每张图⽚⽤，逗号隔开，前⾯的图⽚会绘制在后⾯的图⽚上

2.background-size：设置背景图⽚的⼤⼩

可传的值如下：

<length> 值，指定背景图⽚⼤⼩，不能为负值。

<percentage> 值，指定背景图⽚相对背景区（background positioning area）的百分⽐。

<auto> 值，以背景图⽚的⽐例缩放背景图⽚。

<cover> 值，缩放背景图⽚以完全覆盖背景区。

<contain> 值，按原有宽⾼⽐例缩放背景图⽚以完全装⼊背景区。

3. background-origin：指定背景图⽚的位置

可传的值如下：

border-box：背景图⽚的摆放以border区域为参考

padding-box：默认值 背景图⽚的摆放以padding区域为参考

content-box：背景图⽚的摆放以content区域为参考

注意：当使⽤ background-attachment 为fifixed时，该属性将被忽略不起作⽤。

4. background-clip：指定从哪个位置开始绘制

可传的值如下：

border-box：默认值，背景延伸⾄边框外沿（但是在边框下层）。

padding-box：背景延伸⾄内边距（padding）外沿。不会绘制到边框处。

content-box：背景被裁剪⾄内容区（content box）外沿。

五、详细讲解CSS3 渐变背景

线性渐变（linear-gradient）

标准语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction:渐变的⽅向，默认情况是从上到下

标准语法⽅向是渐变的末尾位置，其他浏览器前缀语法是渐变的起始位置

注意：标准语法要放在其他浏览器语法后⾯

2.⻆度渐变：

标准语法0度指向北，其他浏览器前缀语法指向东

换算公式：90-标准语法⻆度=其他浏览器前缀语法⻆度

重复的线性渐变：repeating-linear-gradient()

径向渐变（radial-gradient）

标准语法：

background: radial-gradient(shape size at position, start-color, ..., last-color);

3.重复径向渐变：repeating-radial-gradient()

六、 CSS3⽂本效果及特殊字体引⼊

text-shadow：给⽂本添加阴影效果

语法： text-shadow: h-shadow v-shadow blur color;

对应值描述如下：

text-overflflow：指定当⽂本溢出包含它的元素的形式

语法： text-overflow: clip|ellipsis|string;

对应值描述如下：

word-wrap：属性允许内容在过⻓情况下可以⾃动换⾏。

语法： word-wrap: normal|break-word;

对应值描述如下：

word-break：指定内容的断⾏规则。

语法： word-break: normal|break-all|keep-all; 对应值如下：

@font-face 规则：定义⾃⼰的⽂本字体

⾸先定义字体的名称（⽐如 myFirstFont），然后指向该字体⽂件。提示：URL请使⽤⼩写字⺟的字体，⼤写字⺟在IE

七、 CSS3的多列布局

column-count 指定了需要分割的列数。

column-gap 指定了列与列间的间隙

column-rule-style 指定了列与列间的边框样式

column-rule-width 指定了两列的边框厚度

column-rule-color 指定了两列的边框颜⾊

column-rule 是 column-rule-* 所有属性的简写

l column-width 指定了列的宽度

八、设备兼容必备知识多媒体查询

使⽤多媒体查询可以在指定的设备上使⽤对应的样式替代原有的样式。

九、体验CSS3特效的乐趣

transform属性下的函数 Ø translate(x,y)平移：x为x轴上的平移，y为y轴上的平移

另外两种⽅法：

translateX(x)元素仅在⽔平⽅向位移
translateY(y)元素仅在垂直⽅向位移

rotate(angle)旋转

正度数表示顺时针旋转，负值则相反

- scale()缩放

scale()⽅法可以将元素根据中⼼原点进⾏缩放

另外两种⽅法：

scaleX(x)元素仅在⽔平⽅向上缩放(x轴缩放)
scaleY(y)元素仅在垂直⽅向上缩放(y轴缩放)

skew()倾斜

语法：

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的⻆度，如果第⼆个参数为空，则默认为0，参数为负表示向相反⽅向倾斜。

skewX(< angle>);表示只在X轴(⽔平⽅向)倾斜。

skewY(< angle>);表示只在Y轴(垂直⽅向)倾斜。

2. 深度讲解3D 转换动画效果

translate3d(x,y,z)定义3d转换

translateZ(z) 在z轴上的平移，z轴为⾯向屏幕的这个⽅向

perspective() ⽅法设置3d透视视图

在⽗元素上加上transform-style: preserve-3d可修改元素层级

rotateX定义沿着X轴的3d旋转

rotateY定义沿着Y轴的3d旋转

3. CSS3过渡实⽤技巧

CSS3 过渡是元素从⼀种样式逐渐改变为另⼀种的效果。

语法：

transition: property duration timing-function delay;

案列：

transition-property属性

transition-timing-function属性

添加多个样式变换效果，属性之间使⽤逗号分隔

4. 解锁CSS3 动画特效技能

CSS3 @keyframes规则

@keyframes规则内指定⼀个CSS样式和动画将逐步从⽬前的样式更改为新的样式。

语法： animation: name duration timing-function delay iteration-count direction fill-mode play-state;

单个属性设置如下：

案例：

过渡的速度曲线如下：（animation-timing-function）

animation-delay 属性允许负值，例如-2s 使动画⻢上开始，但跳过 2 秒进⼊动画画。
animation-iteration-count传数字（表示播放多少次）或者infifinite(⽆限播放)
animation-direction 属性定义是否循环交替反向播放动画。

注意： 如果动画被设置为只播放⼀次，该属性将不起作⽤。

animation-fifill-mode属性

animation-play-state属性

十、 css3 flflex弹性布局 -容器属性

1. 了解前端核⼼知识点flflex 弹性布局

flex布局是什么？ Flex意思是弹性布局，是css3中的新布局模块，⽤来为盒模型提供最⼤的灵活性。可改进容器中的项⽬对⻬，⽅向和顺序，即使他们具有动态甚⾄是未知⼤⼩。Flex容器能够调节⼦节点的宽度或⾼度，以便适应不同的屏幕尺⼨。
基本概念 flex布局可以将⼀个元素看成⼀个容器，⽗元素下的⼦元素会⾃动成为⼦容器，这样就构成⼀个flex

容器存在两根轴：⽔平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴开始的位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

用法：

1.使⽤flflex布局，需在⽗元素上设置display属性

或者将其显示为⾏内元素

注意，设置flflex布局后，⼦元素的flfloat、clear和vertical-align属性将失效。

2. flflex 布局容器六⼤属性之flflex-direction

flflex-direction属性决定主轴的⽅向

3. flflex 布局容器六⼤属性之flflex-wrap和flflex-flflow

flflex-wrap属性设置⼦项⽬的换⾏⽅式

flflex-flflow属性是flflex-direction属性和flflex-wrap属性的简写⽅式，默认值是row nowrap。

语法： flex-flow: <flex-direction> || <flex-wrap>;

4. flflex 布局容器六⼤属性之justify-content

justify-content属性设置⼦项⽬在主轴上的对⻬⽅式。

5. flflex 布局容器六⼤属性之align-items

align-items属性规定⼦项⽬在交叉轴上的对⻬⽅式

6. flflex 布局容器六⼤属性之align-content

align-content多⾏情况下的对⻬⽅式，类似justify-content的对⻬⽅式

十二、第六章 css3 flflex 弹性布局-项⽬

属性

1. flflex 布局项⽬六⼤属性之order和flflex-grow

order属性规定⼦容器（项⽬）的排列顺序。数值越⼩越靠前，默认为0,⽀持负数

flflex-grow属性规定⼦容器的放⼤⽐例，默认为0，剩余空间不⾜则不会放⼤。如果⼦容器的flflex-grow属性都为1，则等分剩余空间。

2. flflex 布局项⽬六⼤属性之flflex-shrink

flflex-shrink属性规定了⼦容器的缩⼩⽐例，默认为1，如果空间不⾜，该⼦容器将缩⼩。

如果⼦容器的flflex-shrink属性都为1，当空间不⾜时，都将等⽐例缩⼩。

3. flflex 布局项⽬六⼤属性之flflex-basis和flflex

flflex-basis属性可修改⼦容器占据的主轴空间的⼤⼩。默认值为auto，即⼦容器的本来⼤⼩

flflex属性是flflex-grow，flflex-shrink和flflex-basis的简写，默认值是0 1 auto，后两个属性可选。

该属性设置auto等同于（1 1 auto），none等同于（0 0 auto）

提示：建议优先使⽤这个属性，⽽不是单独写三个分离的属性，因为浏览器会推算相关值。

4. flflex 布局项⽬六⼤属性之align-self

align-self属性允许单个⼦容器与其他⼦容器有不⼀样的对⻬⽅式，可覆盖align-items属性。默认值为auto，表示继承⽗元素的align-items属性。

———————————————————————————本文结束了

给个辛苦赞吧。。。

如果哪里有总结的不对，欢迎评论区或者私信我。。。

前端三剑客——CSS

一、CSS简介

二、内容

1.css的引入方式****

1) 外部样式表

2) 内部样式表

3) 内联样式表

三、选择器

四、 文本样式总结

五、边框属性

1. 边框属性 (可简写 border:1px solid gray; )

2. 边框局部样式

六．背景样式

1. CSS背景样式

2. 背景颜色

3. 背景图像

六、超链接样式

1) 去除超链接下划线

2) 定义超链接伪类

3) 深入了解超链接伪类

4) 深入了解:hover伪类、

七．鼠标样式

1. cursor属性

八．图片样式

1. 图片大小width和height

2. 图片边框border

3. 图片水平对齐text-align

4. CSS图片垂直对齐 vertical-align属性

5. 文字环绕效果-初识float

1、float属性

2、设置图片与文字的间距

九．列表样式

1. 元素中定义列表项符号list-style-type

2. 自定义列表项符号list-style-image

十、表格样式

1. 表格边框合并border-collapse

2. 表格边框间距border-spacing

3. 表格标题位置caption-side

十、CSS盒子模型

1. CSS盒子模型简介

2. 宽度width和高度height

3. 边框border

十二、浮动布局

2. 什么叫“脱离正常文档流”？

3. 浮动float简介

清除浮动clear简介

十三、定位布局

1. CSS定位布局简介

2.CSS固定定位fixed

3.CSS相对定位简介relative

4.CSS绝对定位absolute

5.CSS静态定位static

进阶CSS3

一、什么是CSS3？

二、 CSS3新特性及核⼼知识

二、CSS3新增的⽤户界⾯属性

三、 CSS3常⽤的样式属性边框与盒阴影

四、CSS3背景新特性及精灵图⽚的使⽤

五、 详细讲解CSS3 渐变背景

六、 CSS3⽂本效果及特殊字体引⼊

七、 CSS3的多列布局

八、 设备兼容必备知识多媒体查询

九、体验CSS3特效的乐趣

2. 深度讲解3D 转换动画效果

3. CSS3过渡实⽤技巧

4. 解锁CSS3 动画特效技能

十、 css3 flflex弹性布局 -容器属性

1. 了解前端核⼼知识点flflex 弹性布局

2. flflex 布局容器六⼤属性之flflex-direction

3. flflex 布局容器六⼤属性之flflex-wrap和flflex-flflow

4. flflex 布局容器六⼤属性之justify-content

5. flflex 布局容器六⼤属性之align-items

6. flflex 布局容器六⼤属性之align-content

十二、第六章 css3 flflex 弹性布局-项⽬

属性

1. flflex 布局项⽬六⼤属性之order和flflex-grow

2. flflex 布局项⽬六⼤属性之flflex-shrink

3. flflex 布局项⽬六⼤属性之flflex-basis和flflex

4. flflex 布局项⽬六⼤属性之align-self

四、文本样式总结

五、详细讲解CSS3 渐变背景

八、设备兼容必备知识多媒体查询