css 的位置

1.行内样式
在标签内部设置样式，只能对一个产生影响

image.png

2.内部样式表（在head中）

image.png
3.外部样式表（写在html外）
用link连接css文件和html文件
image.png
image.png
image.png

css的注释

image.png

快捷键也是ctrl+/

css的基本语法

选择器+声明块

常用选择器

1.元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{}、h1{} div{}...

2.ID选择器（ID不能重复，尽管效果一致）
作用：根据元素的ID属性来选中指定的元素
语法：#id属性值{}
例子：#abc{}、#Tn...

3.类选择器（可以同时为一个元素指定多个class）
作用：根据元素的class属性选中元素
语法：.class属性值
例子：.blue{}、...

image.png

不同的class要用空格隔开

4.通配选择器
作用：选中页面的所有元素
语法：*{}
例子：*{ color：red；}（所有元素的颜色都变红了）

复合选择器

1.交集选择器
作用：同时选中多个满足条件的元素
语法：选择器1选择器2选择器3...{}
注意：交集选择器中如果有元素选择器，必须元素选择器开头

image.png

div.red表示div中的class属性
.a.b.c表示同时包含a，b，c三种class属性的元素

2.并集选择器
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，...{}

例如： image.png

表示选择id为b1，class为p1，元素标签h1，span，div.red

关系选择器

image.png
image.png

其中，div是p元素的父元素，p是div的子元素，div是span的祖先元素

1.子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素

image.png
image.png

表示选中父元素为div的子元素span，因为p中的span为后代元素，所以不生效

2.后代元素选择器
作用：选中指定元素的后代元素（包括子元素）
语法：祖先 后代（中间加个空格）

image.png
image.png

3.兄弟选择器
 3.1 选择下一个兄弟
  作用：找紧挨着的元素
  语法：前一个+后一个
 3.2选择下面所有兄弟
  作用：选择下面所有的兄弟
  语法：兄~弟

image.png

表示找紧挨在p后面的span标签，如果p和span中间有别的元素隔开，那就不生效

image.png

表示选择p标签同级的下面的所有span元素，有东西隔开不影响选择

属性选择器

image.png

伪类（：开头）

表示不存在的类，特殊的类

image.png

以上伪类都是根据所有子元素进行排序，并不是说第一个li中的第一个li，而是说所有元素中li在第一个

image.png
这个伪类就可以表明是同类型中的顺序，比如first-of-type就可以表面是同类型中的第一个

否定伪类
作用：将符合条件的元素从选择器中去除

image.png

表明除去了li中的同类型的第三个元素，也就是去除了文字“第二个”的样式

超链接的伪类

image.png

link和visited都是a专属的伪类，hover和active是所有属性通用的伪类

伪元素（前面+::）

image.png

before和after不会被选中，因为这是在css中加的东西