一、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.静态定位
是文档流的默认位置