css基础,css选择器
程序员文章站
2022-08-20 15:50:52
07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1. 内联式 书写位置:在 head标签内定义一个stype标签内 CSS语法:css选择器{样式1;样式2} 优缺点:可读性强,有复用 ......
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如果有根据优先级进行取舍,没有则增加
上一篇: 国内外手机号码正则表达式
下一篇: 小程序web-view