十、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外观样式及应用

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

line-height：行间距，就是行与行之间的距离，即字符的垂直距离，一般情况下，行距比字号大7/8 像素就可以了

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）和相邻行内（行内块）元素在一行上，但是之间会有空白缝隙。

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

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

4.4标签显示模式转换display

5.CSS盒模型及应用

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

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

border：0  没有边框

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

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

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

5.2内边距padding

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

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

十、CSS

原文：https://www.cnblogs.com/liankong/p/11380821.html