CSS

1. 导入方式

优先级：就近原则

1. 行内样式：

   标题

2. 内部样式： h1{ color: red} 3
3. 外部样式 链接式
4. 外部样式 导入式 暂时不了解

2. 选择器

2.1基本选择器

1. 标签选择器

   标签名 +

2. 类选择器

   .类名 +

3. id选择器

   井号 + id

2.2层次选择器

1.后代选择器

body p{ 代码 } 会选择body里面的所有p标签

.class p { 代码 } 会选择class类里面的所有p标签

2.子选择器

body>p{ 代码 } 一代

.class>p{ 代码 } 一代

3.相邻兄弟选择器

.active + p{ 代码 } 同辈只有一个 向下 active是类

4.通用选择器

.active~p{ 代码 } 当前选中元素的向下的所有兄弟元素

2.3结构伪类选择器

C标签

​ A标签

​ A标签

​ B标签

​ B标签

​ C标签

​ A标签

• A的第一个子元素(B): A B:first-child{}

• 定位到A的父元素C,选中当前第三个元素，如果是A标签，则会选择，不是则无用 A:nth-child(3)

• 定位到A的父元素C,选中当前第三个A标签(会略过非A标签) A:nth-of-type(3)

标签[属性]{ } 某种标签中有某个属性的元素 可以用正则表达式限制

= 绝对等于某个属性

*= 包含某个属性

^= 以这个开头的某个属性

$= 以这个结尾的某个属性

• a[id]{} 相当于a标签中存在id属性的元素
• a[id="cat"]{} 相当于a标签中存在id="cat"属性的元素
• a[class*="cat"]相当于a标签中包含名为cat的class属性的元素
• a[class="cat"]相当于a标签中只有名为cat的class属性的元素，无其他class元素
• a[href^="cat.666"]href属性中以cat.666开头的a标签

4. 字体样式

• 字体 font-family : 宋体；
• 颜色 color : r#a13d30;
• 字体大小 font-size: 50px;
• 字体粗细 font-weight: bold;
• 斜体oblique
• 其他属性设置 font-XXX

5.文本样式

• 颜色 RGB color:#00AAFF;或者color: reba(0,255,255,1) 最后一个是透明度，范围(0-1)
• 文本位置 text-align:center;
• 首行缩进 text-indext:2em; 首行缩进两个字
• 块高度 height: 200px;
• 行间高度 line-height: 20px;
• 装饰 text-decoration: underline;
• 水平对齐 vaerticl-align: middle; 跟其他东西一块用

6. 文本阴影和超链接伪类

• 阴影颜色 水平偏移 垂直偏移 阴影半径 text-shadow: blue 5px 0px 2px;
• 鼠标选择特效 A : hover{}
• 鼠标按住状态 A : active{}

7. 列表