十、CSS

---恢复内容开始---

作用：结构和样式相分离，用样式控制结构，是页面更加好看

简介：CSS通常称为层叠样式表，主要用于设置HTML页面的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能、如字体、颜色、背景的控制及整体排版等

一、CSS选择器

1.语法

选择器  {

　　属性1：属性值1；

　　属性2：属性值2；

}

F12打开开发者调试工具，ctrl +/-   可以放大/缩小视图

多类名之间用空格隔开，顺序与css样式表中顺序有关

2.选择器分类

伪类选择器也是选择器，用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，也可以选择，第一个，第n个元素

l类选择器是一个点，伪类选择器是2个点

2.1类选择器：.red {color:red}

2.2伪类选择器：   a:hover {color:purple}     :hover 是链接伪类选择器

2.2.1链接伪类选择器

2.2.2结构（位置）伪类选择器

:first-child   选取属于其父元素的首个子元素的指定选择器

:first-child   选取属于其父元素的最后一个子元素的指定选择器

:nth-child(n) 匹配属于其父元素的第n个子元素，even是偶数，odd是奇数，n从0开始

:nth-last-child(n) 匹配属于其父元素的第n个子元素，even是偶数，odd是奇数，n从0开始

语法：li:first-child {color:red}

2.2.3目标伪类选择器：选择器可以选择当前活动的目标元素

::target {color:red}当前被选中元素设置样式

3.css外观样式及应用

width、height：宽高属性只适应于块级元素或行内块级元素（img、input），对行内元素无效

color：文本颜色，取值方式有3种（英文字母颜色、十六进制、rgb)

line-height：行间距，就是行与行之间的距离，即字符的垂直距离，一般情况下，行距比字号大7/8 像素就可以了（上一行底边缘的到下一行底边缘的高度）

行高撑开的是内容区域，与padding无关系

test-aline：水平对齐方式，属性用来设置文本内容的水平对齐（在浏览器中的）

test-indent：首行缩进，用于设置首行文本的缩进，一般使用em作为单位，1em就是1个子的宽度，如果是汉字的段落，1em就是1个汉字的宽度

letter-spacing：字间距。就是字符与字符之间的空白（英文字母之间的空白）

word-spacing：单词之间的间距，仅针对英文

rgba(255,0,0,0.5):半透明

test-shadow：文字阴影，4个参数：水平位置、垂直位置、模糊距离、阴影颜色，前2个参数必须写 

test-decoration：none取消下划线

line-height=height 可让文本垂直居中

4.元素分类（标签）

常见的块级元素：h1-h6，div，p，ul，ol，li等

常见的行内元素有：a，strong，em，i，del，ins，span等

常见的行内块元素有：img、input、td等

4.1块级元素：每个块级元素通常会独自占据一整行或多整行可以设置宽度、高度、对齐等属性，通常用来网页布局和网页结构的搭建。

特点：

（1）单独占一行，总是从新行开始

（2）宽高、行高、外边距以及内边距都可以控制

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他元素（h1-h6，p，dt都是文字类的块级元素，里面不能放其他块级元素 ）

4.2行内元素（内联元素）：不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽高、行高、对齐等属性，常用于控制页面中文本的样式。

特点：

（1）和相邻行内元素在一行上

（2）宽高无效，但水平方向的padding、margin可以设置，垂直方向上设置无效

（3）默认宽度就是它本身内容的宽度

（4）行内元素只能容纳文本或其他行内元素（a标签例外）

4.3行内块元素（内联元素）：既有块级元素的特点又有行内元素的特点

特点：

（1）和相邻行内（行内块）元素在一行上，但是之间会有空白缝隙。（例如img图片是行内块元素，span是行内元素，同行排列时会形成间隙，且底部对齐）

（2）默认宽度就是它本身内容的宽度。

（3）高度、行高、内边距、外边距都可以控制。

4.4标签显示模式转换display

5.CSS盒模型及应用

网页布局的本质：把网页元素比如文字图片等等放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

盒模型中，content为浅蓝色，padding为青色，border为淡黄色，margin为黄色，width为content宽度，盒子的宽度=contrnt+padding+border

5.1边框（相当于橘子皮）：border-width,border=style,border-color

border：0  没有边框

border-style:none,没有边框，即忽略所有边框的宽度

table(border-collapse:collapse)表示表格的边框合并在一起

border-radius：圆角，顺序：左上角、右上角、右下角、左下角  2个值代表：左上角/右下角，右上角/左下角   3个值代表：左上角，右上角./左下角，右下角

5.2内边距padding，padding会撑开盒子

4个值表示上右下左顺时针的顺序，3个值表示上，左右，下；2个值表示上下，左右

5.3外边距margin

5.3.1外边距实现盒子居中

1）.盒子必须是块级元素且指定了宽度

2）.margin ：0 auto；

5.3.2文本水平居中和盒子居中

文本水平居中：test-align：center，文本垂直居中：line=height等于height，盒子水平居中margin：0 auto；

5.4插入图片和背景图片的区别

1.img相当于一个小盒子，占据位置，背景图不占位置。

2.img可通过width和height更改大小，背景图只能通过background-size 改变大小（宽高）

3.img可通过margin和padding更改位置，背景图只能通过background-position 改变位置（2个值分别表示到盒子左边、上边距离）

5.5清除元素内外边距body,ul,li{margin:0;padding:0}

谷歌浏览器中，body默认含有8px的margin，ul标签含有16px的上下margin和40px的左padding

行内元素只有左右外边距，上下外边距设置无效，行内元素可以设置左右内边距，上下内间距会有显示问题，所以尽量不要给行内元素设置上下的内外边距

5.6外边距合并

1）垂直的块级盒子会出现外边距合并的现象，以最大的外边距为准

2）嵌套结构中，子元素设置margin会传递到父级，父级带着子级一起向下移动，解决办法是给父级设置边框或内边距，或者给父级设置overflow：hidden

5.7盒子的尺寸

1）内盒尺寸：width+padding+border

2）外盒尺寸：width+padding+border+margin

5.8盒模型注意点

5.8.1width、height：宽高属性只适应于块级元素或行内块级元素（img、input），对行内元素无效

5.8.2计算盒模型的总高度时，还应考虑上下2个盒子垂直外边距合并的情况

5.8.3如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子大小(还是父级盒子的宽度，不会撑开父级盒子)

5.8盒模型布局稳定性width>padding>margin

5.9标准盒模型和诡异盒模型

box-sizing：content-box

box-sizing：border-box   padding和border不会撑开盒子大小

6.hover

6.1 选择器:hover{样式}，鼠标悬停在选择器对应的盒子上时，选中该标签，给该标签设置样式

6.2鼠标移到父级上，让子级样式发生改变(可以1对多，给不同的子级设置不同的hover效果)

父级选择器:hover  子级选择器{样式}

7.盒子透明度和背景透明度opacity rgba()

8.transition：过度效果，一个盒子从一个样式变为另一种样式所需要的时间

9.选择器的优先级:j级数越高，选择器优先级越高，同级数的情况下，从最外层 一层一层进行比较

---恢复内容结束---