【web前端HTML+CSS+JS】--- CSS学习笔记02

一、CSS（层叠样式表）介绍

1.优势

2.定义解释

如果有多个选择器共同作用的话，只有优先级最高那层样式决定最终的效果

二、无语义化标签

div和span：只起到描述的作用，不带任何样式

三、标签选择器

1.标签/元素选择器

为标签添加样式

2.类选择器

只想选择部分标签进行控制，需要任意对标签进行分类，并分别加上class属性

3.ID选择器

作用于单个标签上

4.全局选择器

选择全部标签

5.属性选择器

6.子字符串匹配选择器

7.忽略大小写匹配选择器

8.伪类选择器

根据状态（普通/行为）分类，不是手动分类

（1）普通伪类选择器

比如永远动态的对第一个段落控制样式

（2）行为伪类选择器

比如被点击的链接，不同的行为可以设置不同的样式

9.关系选择器

（1）交集选择器

格式：标签.类值 （必须标签在前，否则会把标签名当作类名的一部分，产生歧义）

（2）并集选择器

格式：标签和类用逗号隔开，前后顺序无所谓

（3）后代选择器

格式：父标签 空格 子标签

选择所有的子元素，包含直接和间接

（4）子代选择器

格式：父标签 >子标签

只控制一级子元素

（5）兄弟选择器

格式：某个标签+相邻的标签

只会对相邻的标签进行控制，样式对本身不起作用

格式：某个标签~相邻的标签

对同一级别的兄弟标签都会起作用，下面例子中段落123都会有样式，即使3不挨着2

四、样式添加类型

1.行内样式

标签和样式耦合在一起

2.内部样式

将样式抽取出来，但只能针对当面页面控制

在head中添加style，在style中的注释是/* */

3.外部样式

新建一个css文件，将样式写在里面

在html文件中引入css文件

五、选择器的优先级

1.非关系选择器优先级

2.关系选择器优先级

赋分比大小，分数一致遵循就近原则

显示蓝色

六、常见属性

w3school 在线教程 点击参考书有属性汇总

1.背景颜色

2.字体属性

（1）字体族属性

当不支持第一种字体时，依次用后面的

（2）字体大小属性

默认大小是16px

（3）字体风格属性

设置斜体 

（4）字体粗细属性

有的字体不支持所有的选项

（5）字体复合属性

通过font可以同时设置多个属性，不过必须按照一定的顺序来

3.文本属性

（1）文本颜色属性

（2）文本间距属性

英文字母以及汉字之间的间距：

英文单词之间的间距：

（3）文本划线属性

分别为下划线和中划线

（4）文本缩进属性

缩进两个字符，设置的值和字符的大小相关

（5）文本对齐选项

默认靠左对齐

（6）文本行高属性

设置行之间的距离

4.列表属性

5.边框属性

顺序没有要求

七、盒子模型

选择中间的容器，对内外上下左右有8个属性

八、元素分类

1.块级元素

2.行内元素

3.行内块级元素

4.元素类型转换

九、浮动

将二维的文档流变为三维，脱离文档流，让元素漂浮，将原来文档流的内容推开，从而实现图片可以和文字在一行

十、定位

1.静态定位

是文档流的默认位置

2.相对定位

3.绝对定位

4.固定定位