07.29自我总结
css基础
一.什么是CSS
CSS是级联样式表
CSS术语标记语言,没有逻辑
CSS作用 完成网页内容的样式与布局
二.CSS的三种引入方式
1. 内联式
- 书写位置:在 head标签内定义一个stype标签内
- CSS语法:css选择器{样式1;样式2}
- 优缺点:可读性强，有复用性，样式被html页面绑定了，不能提供给其它html页面使用
2. 外联式
- 书写位置:在外部css文件中，在html文件中通过link标签引入css文件
- CCS文件内CSS语法:css选择器{样式1;样式2}
- HTML文件中导入CSS文件语法:
<link rel="stylesheet" href="CSS文件路径"> - 优缺点: 可读性强，有复用性，适合团队开发(文件级别的复用性)
3. 行间式
- 书写位置:在标签的style属性中书写样式
- CSS语法:
<标签 stype='样式1;样式2;'> - 优缺点:可读性差，没有复用性，书写直接
4. 三种方式的优先级别
- 内联与外联之间没有优先级区别，由于html属于解释性语言，书写在下方的会覆盖上方的样式
- 行间式的优先级要高于一切
三.CSS选择器
-
统配选择器
* {
样式1;
}
<!--表示所有样式--> -
标签选择器
标签名 {
样式1;
}
<!--表示该标签内的样式--> -
类选择器
.类名{
样式1;
}
<!--表示该类内的样式--> -
ID选择器
#ID名称{
样式1;
}
<!--表示该ID下的样式--> -
高级选择器(简单讲解)
标签名.类名{
样式1;
}
<!--同类名的情况下比较前面的标签的个数,个数越多优先级越高--> -
关键字! important
写在样式后面用宫格隔开
优先级:! important > 行间式 > id > class > 标签 > 统配
从作用范围来判断的优先级:作用范围越精确，优先级越高
样式内容key如果有根据优先级进行取舍,没有则增加