本文共 3987 字，大约阅读时间需要 13 分钟。
样式规则：1.选择器用于指定css样式作用的HTML对象
2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置样式属性，例如：字体大小、文本颜色
4.属性与属性值之间同英文“:”链接
5.多个“键值对”之间用“;”进行分区
注释：/*............*/ 快捷键：ctrl+/
类命名：见名知意，用英文
CSS外观：
颜色：color：颜色（英文单词）
16进制（可以调制 也可简写）（尽量用的）
rgb（ ， ， ，）
字体大小：font-size:px（像素）一般为14px（默认16px）
字体：font-family：" 字体形式"（默认微软雅黑）引号（一般都要写）
宋体 ：SimSun \5B8B\4F53
微软雅黑：Microsoft YaHei \5FAE\8F6F\96C5\9ED1
字体粗细：font-weight:属性值（normal、bold、bolder、lighter、100-900（100的整数倍 400等于normal 700等于bold））
字体风格：font-style：属性值：（默认normal（正常 是斜体不倾斜）、italic（斜体））
字体综合设定：font：属性值：（style、weight、size/line-hight（行高）、family。（前两个可以省略后两个（size、family）不可以））
复习 CSS样式总结
以后都会根据它复习，并且我也会添加新的内容，后续不断更新，同样也希望自己涉猎广一点深一点。加油！！！
界面结果：
标签选择器：例如：p div等
类选择器：
例如：
.mingren { color: pink;} 名人 谷歌（标签 类选择器）：
谷歌 G o o g l e
多类名选择器：
.pink { color: pink; } 亚瑟 亚瑟 亚瑟 亚瑟 ID选择器：
#pink1 { color: pink; }.red1 { color: red; } 张三 张三丰 张三疯子 张大大 通配符选择器：
*{ color:red; } 伪类选择器：
1.链接为类选择器：
:link /*未访问的链接*/
:visited /*已访问的链接*/
:hover /*鼠标移动到链接上*/
:active /*选定的链接*/
a:link { font-size: 14px; color: gray; font-weight: 700; } a:visited { font-size: 14px; color: orange; font-weight: 700; } a:hover { font-size: 14px; color: red; font-weight: 700; } a:active { font-size: 14px; color: green; font-weight: 700; } 2.结构为类选择器：
：first-child:选取属于其父元素的首个子元素的指定选择器
：last-child：选取属于其元素的最后一个子元素的指定选择器
：nth-child（n）：匹配属于其父元素的第n个子元素，不论元素的类型
：nth-last-child（n）：匹配属于其父元素的第n个子元素，从最后一个元素开始计算。同nth-child(n)一样使用
li:fist-child { color: pink; } li:last-child { color: purple; } li:nth-child(4) { color: skyblue; } li:nth-child(3) { color: gray; } - 第一个孩子
- 第二个孩子
- 第三个孩子
- 第四个孩子
- 第五个孩子
- 第六个孩子
- 第七个孩子
特殊例子1选择奇偶：
li:nth-child(odd) {/*可以选择所有的奇数*/ color: pink; } li:nth-child(even) {/*可以选择所有的偶数*/ color: purple; } - 第一个孩子
- 第二个孩子
- 第三个孩子
- 第四个孩子
- 第五个孩子
- 第六个孩子
- 第七个孩子
特殊例子2选择n的倍数：
li:nth-child(n) {/*是全选的结果*/ color: pink; } li:nth-child(2n) {/*选择偶数*/ color: purple; } li:nth-child(2n+1) {/*选择奇数*/ color: gray;/*....可以3n....*/ } - 第一个孩子
- 第二个孩子
- 第三个孩子
- 第四个孩子
- 第五个孩子
- 第六个孩子
- 第七个孩子
目标伪类选择器：你如果定位到某个.....则其会发生变化（变化根据：target内的东西来定）
:target { color: red; } 个人生活1 个人生活2 个人生活3 个人生活4 个人生活1
个人生活2
个人生活3
个人生活4
行之间的距离：
行间距（行高）：line-height： px
文字水平对齐：taxt-align
首行缩进：text-indent：2em（两个汉子的距离）
字与字（单词）之间的距离：
letter-space 字间距
word-space 单词间距 针对于英文
颜色：
文字半透明：color：rgba（r,g,b,a）a是alpha透明的意思 取值0~1之间
例如：
文字可以半透明
文字阴影：
text-shadow：水平距离 垂直距离 模糊距离 阴影颜色；
文字可以半透明
引入css样式表：
1.内部样式表
css样式写在html内部
2.行内样式表
my name is hellomy name is hellomy name is hello
3.外部样式表
半透明
块级标签（每个块元素通常都会独自占据一整行或多行，可以对其设置宽度、高度、对齐等属性、常用于网页布局和网页结构搭建）
1.总是从新行开始
2.高度、行高、外边距以及内边距都可以控制
3.宽度默认是容器的100%
4.可以容纳内联元素和其他块元素
行内标签：（不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可设置宽度、高度、对齐、等属性常用于控制页面中文本样式）
1.和相邻行内元素在一行上
2.高、宽无效，但水平方向的padding和margin可以设置，垂直方向无效
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或者其他行内元素
显示模式转换：display显示
块转行内：display：inline
行内转换：display：block
块、行元素转换为行内块：display：inline block；
css复合选择器：
交集选择器：
p.red { font-size: 30px ; } 熊大 熊二 熊熊 小明
小红
小强
并集选择器：
熊熊小明
小小答案
后代选择器：
小明
笑话
笑话
子元素选择器：（）
1.空格 后代选择器 可以选择 儿子 孙子 重孙子
2.大于号 子元素选择器 只选择 亲儿子
测试：
左侧导航栏
属性选择器：(选取标签带有某些属性的选择器)
属性选择器用中括号表示
伪类选择器：