查阅文档：
W3C：w3school 在线教程
MDN：MDN Web Docs
基本概念
CSS（层叠样式表）（cascading style sheets）也称为CSS样式表、级联样式表，是一种标记语言
作用：设置元素的外观显示样式、网页版面布局
组成
CSS语法规范由：选择器以及一条或多条声明组成。声明采用键值对的写法，属性和属性值相对的形式。
选择器{
属性：属性值；
属性：属性值；
}
p {
color: tomato;
}选择器
选择器的作用：根据不同的需求把不同的标签选出来
选择器分为基础选择器和复合选择器
基础选择器
| 基础选择器：单个选择器组成的 | ||
|---|---|---|
| 标签选择器 | p { 样式 } | 用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。 把某一类标签全部选择出来，快速的为页面中同类型的标签统一设置样式 |
| 类选择器 | .className { 样式 } | 想要差异化选择不同的标签，单独选一个或者几个标签。 一个标签可以有多个类名，多个类名之间用空格分开。 |
| id选择器 | #idName { 样式 } | 可以为标有特定id的HTML元素指定特有的样式。 一般用于页面唯一性的元素上，经常和JavaScript搭配使用 |
| 通配符选择器 | * { 样式 } | 选取页面中所有的元素。 通配符选择器不需要调用，自动给所有元素使用样式。特殊情况使用 |
复合选择器
| CSS复合选择器:复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素。是由俩个或多个基础选择器，通过不同的方式组合而成。 | ||
|---|---|---|
| 后代选择器 (包含选择器) | ol li { 样式 } | 可以选择父元素里面的子元素。选父元素里面所有的子元素 外层标签 内层标签{}当嵌套的时候，内层标签就是外层标签的子元素 |
| 子选择器 | ol>li { 样式 } | 只选择作为某元素的最近一级子元素。 选父元素下一级的子元素，只有一级 |
| 并集选择器 | div,p { 样式 } | 可以选择多组标签，同时为他们定义相同的样式。 通常用于集体声明各个元素之间用逗号隔开 |
| 伪类选择器 | 向某些选择器添加特殊的效果，或者第n个元素。有链接伪类、结构伪类、等等 用（：）冒号表示，冒号前后不能有空格 | |
| 链接伪类选择器：常和a标签配合使用 按照顺序声明，否则有些将不能起效果。Link,Visited,Hover,Active | |
|---|---|
| 选择所有未被访问过的链接 | a:link |
| 选择所有已被访问过的链接 | a:visited |
| 选择鼠标指针位于其上的链接，鼠标聚焦的时候 | a:hover |
| 选择活动链接（鼠标按下，未弹起的链接） | a:active |
| focus伪类选择器：常和表单配合使用 | |
|---|---|
| 选取获得焦点的表单元素 | input:focus |
三种引进方式
| 按照CSS书写的位置或者引入的方式不同，CSS样式表可以分为三大类 | |
|---|---|
| 行内样式表（行内式） | 在元素标签内部的style属性设定CSS样式，适用于简单样式。控制当前的标签样式 |
| 内部样式表（嵌入式） | 写在HTML页面内部，将所有的CSS代码抽取出来，单独放在一个<style>标签中，一般放在<head>中，可以方便控制整个页面的样式，代码结构清晰 |
| 外部样式表（链接式） | 实际开发使用的，样式比较多的情况， 样式单独写到CSS文件中，之后把CSS文件通过link引入到HTML文件中。 <link rel=”stylesheet” href=”xx.css”> |
三大特性
层叠性、继承性、优先级
| 层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。 |
|---|
| 原则：就近原则，哪个离结构近就执行哪个 |
| 继承性：子标签会继承父标签中的某些样式，简化代码，如文本颜色和字号 |
|---|
| 例如:text-,font-,line-height,color等 |
| 行高的继承：font:12px/1.5 ‘Microsoft YaHei’;子元素行高是子元素文字大小的1.5倍 可以让里面的子元素根据自己的文字大小自动调整行高 |
| 优先级：当同一个元素指定多个选择器，就会有优先级的产生 |
|---|
| 选择器相同的时候：就近原则 |
| 选择器不同的时候：根据优先级从高到低，这里是权重的问题 |
| 权重：从高到低写。 比较的时候先比较第一位，哪个数字大哪个权重高，若一样，再比较第二位，依此类推。 |
|---|
| !important，这个权重最高 !important用法：直接在样式属性里面写。例：color: pink!important; |
| 行内样式（1，0，0，0） |
| id选择器（0，1，0，0） |
| 类选择器/伪类选择器（0，0，1，0） |
| 标签选择器（0，0，0，1） |
| 继承/*（0，0，0，0） |
权重叠加：复合选择器会有权重叠加的问题
ul li {
color: green;
}例如：这是俩个标签选择器（0，0，0，1）+（0，0，0，1）=（0，0，0，2）
元素三种显示模式
元素的显示模式：元素以什么方式进行显示
| 分类 | ||
|---|---|---|
| 块元素 | 特点 | 独占一行； 高度、宽度、内外边距可以控制； 宽度默认是容器（父元素）的100%； 是一个容器及盒子，里面可以放行内或者块级元素。 |
| 例如 | h1-h6、p、div、ul、ol、li等 | |
| 注意 | 文字类的元素内不能用块级元素。比如p不能放块级标签。 | |
| 行内元素（内联元素） | 特点 | 一行可以显示多个； 高、宽直接设置是无效的； 默认宽度是它内容本身宽度； 行内元素只能容纳文本或其他行内元素。 |
| 例如 | span、a、strong、b、em、i、del、s、ins、u等 | |
| 注意 | a里面不能放a，可以放块级元素 | |
| 行内块元素 | 特点 | 和相邻行内元素（行内块）在一行上，一行可以显示多个； 默认宽高是它本身内容的高度； 高度、行高、内外边距都可以设置 |
| 例如 | img、input、td | |
| 注意 | 同时具有块元素和行内元素的特点 | |
| 元素显示模式的转换：一个模式的元素需要另外一个模式的特性 | |
|---|---|
| 行内转换为块级 | display:block; |
| 块级元素转换为行内 | display:inline; |
| 转换为行内块元素 | display:inline-block; |
样式
| 字体样式 | font- | 属性值 |
|---|---|---|
| 字体系列 | font-family | 定义文本字体。比如‘宋体’ ‘Microsoft YaHei’ |
| 字体大小 | font-size | 最常用单位px |
| 字体粗细 | font-weight | bold是加粗效果；bolder特粗；lighter细体；normal不加粗 数字400等价于normal，数字不带单位，700加粗，数字可以在（0，900+）取值 |
| 字体样式 | font-style | 文本的风格，normal正常，italic斜体。默认正常 |
| 简写 | font：风格 粗细 大小 字体 | 简写：简写font的时候，size和family必须保留，其他可以省略 font：italic 700 16px/26px ‘Microsoft YaHei’; |
| 文本样式 | text- | 属性值 |
|---|---|---|
| 文本颜色 | color | 预定义（red）、十六进制（#FF00FF）、RGB(rgb(255,0,255)或(100%,0%,20%))。十六进制用的最多 |
| 文本对齐 | text-align | left左（默认）、right右、center中间 只能设置元素内文本内容的水平对齐方式 |
| 装饰文本 | text-decoration | 设置文本下划线、删除线、上划线等 none（默认）没有；underline下划线；overline上划线；line-through删除线 |
| 文本缩进 | text-indent | 指定文本的第一行缩进，通常将段落的首行缩进，跟数字单位 |
| 行间距 | line-height | 设置行间的距离，可以控制文字行与行之间的距离。 行间距=上间距+文本高度+下间距，行间距是一行的行高 小技巧：line-height=height时，行高等于盒子的高，所以文字垂直居中 |
| 背景样式 | background- | 属性值 |
|---|---|---|
| 背景颜色 | background-color | 一般情况下背景颜色默认值是transparent透明的，也可以手动设置为透明色 |
| 背景颜色半透明 | background | rbga(0,0,0,.8) |
| 背景图片 | 背景图片、图片平铺、背景图片位置、背景图像固定 | |
| 背景图片 | background- | 属性值：背景图片会在背景颜色的上面 |
|---|---|---|
| 背景图片 | background-image | none或者url（这里写路径） 实际用于logo或者装饰性的小图片或者超大的背景图片，优点是便于控制位置 |
| 图片平铺 | background-repeat | repeat平铺（默认），no-repeat不平铺，repeat-x沿着x轴平铺，repeat-y沿着y轴平铺 |
| 图片位置 | background-position:x y | x y;可以用方位名词或者精确单位。 |
| 方位名词：right、left、center、top、bottom 俩个值都是方位名词，没有顺序关系。 一个词是方位名词，第二个词默认是center。 | ||
| 精确参数：x坐标，y坐标。参考点在左上角。 只有一个参数，默认参数是x轴，y轴垂直居中 | ||
| 混合单位：方位名词可以和精确参数混合使用，x,y | ||
| 图像固定 | background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 scroll滚动、fixed固定。默认是滚动的 |
| 简写 | background | 没有固定的顺序，一般这样的顺序写 background: color url(url) repeat scroll position |
元素的显示与隐藏
本质：让一个元素在页面中隐藏或者显示出来
| 属性 | 语义 | 属性值 |
|---|---|---|
| display | 一个元素如何显示 | none 隐藏元素，脱标不再占有原来的位置 |
| block 显示元素，或者转换成块级元素 | ||
| visibility | 元素隐藏还是可见 默认属性值inherit继承上一个父对象的可见性 | visible 元素可见 |
| hidden 元素隐藏，继续占有原来的位置 | ||
| overflow | 溢出部分，显示隐藏 默认属性值visible元素可见 | hidden 溢出的部分隐藏起来 |
| scroll 溢出的部分，显示滚动条来查看。不溢出也有滚动条 | ||
| auto 溢出的部分，在需要的时候添加滚动条。不溢出没有滚动条 |
932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
