1 css基础
1.1 css介绍
css 层叠样式表(英⽂全称:Cascading Style Sheets)不仅可以静态地修饰⽹⻚,还可以配合各种脚本语⾔动态地对⽹⻚各元素进⾏格式化
css 能够对⽹⻚中元素位置的排版进⾏像素级精确控制,⽀持⼏乎所有的字体字号样式,拥有对⽹⻚对象和模型样式编辑的能⼒
1.2 css基础语法
css 样式由选择器,⼀条或多条声明两部分组成
-
选择器 选择器可以是任意类型的(比如类选择器或者ID选择器)
-
声明 每条声明由⼀个属性和⼀个值组成
-
属性(property)是想要设置的样式属性(style attribute)
-
每个属性有⼀个值,属性和值被冒号分开
选择器{ 样式属性名1:样式属性值1; 样式属性名2:样式属性值2; ... }
1.3 css注释
注释是⽤来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
div { /*color:red;*/ width:200px; }
1.4 css引⼊⽅式
1.4.1 ⾏内样式
<h1 style="color:red">这是⾏内样式的使⽤⽅式</h1>
1.4.2 内嵌样式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .text{ color:red; } </style> </head> <body> <h1 class="text">这是内部样式引⼊⽅式</h1> </body> </html>
1.4.3 外部样式
通过 link 标签引⼊
<link rel="stylesheet" href="url">
其中 href 属性是外部样式表⽂件的URL
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./index.css"> </head> <body> <h1 class="text">外部样式</h1> </body> </html>
1.5 选择器
1.5.1 选择器介绍
css 选择器⽤于选择你想要的元素的样式的模式
要使⽤css对HTML⻚⾯中的元素实现⼀对⼀,⼀对多或者多对⼀的控制,这就需要⽤到CSS选择器
HTML⻚⾯中的元素就是通过CSS选择器进⾏控制的
1.5.2 常⽤选择器
-
通配符选择器 *
-
ID选择器 #id
-
类型选择器 .class
-
标签选择器 element
-
⼦代选择器 parent > child
-
后代选择器 parent child
-
群组选择器 selector1,selector2,selectorN
-
属性选择器 [attribute]
* {margin:0;} #center {text-align:center} p {text-align:center;} p > a {text-align:center;} p img {text-align:center;} div,p{color:red;} input[name="username"]{color:red;}
1.5.3 选择器权重
权值等级划分, 一般来说是划分4个等级:
类型 | 权重 |
---|---|
内联样式 | 如: style=" ",权值为1000 |
ID选择器 | 如:#name,权值为0100 |
class类选择器,伪类和属性选择器 | 如.name,权值为0010 |
标签选择器和伪元素选择器 | 如div p,权值为0001 |
通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~) | 如*,权值为0000 |
注意:数位之间没有进制,级别之间不可超越
1.5.4 最⾼权重
!important 的作用是提升优先级,换句话说。加了这句的样式的优先级是最高的(比内联样式的优先级还高)。
当 !important 规则被应⽤在⼀个样式声明中时,该样式声明会覆盖CSS中任何其他的声明,⽆论它处在声明列表中的哪个位置。
-
css选择规则的权值不同时,权值高的选择器优先
-
css选择规则的权值相同时,后定义的选择器规则优先
-
css属性后面加 !important 时,无条件绝对优先
总体来说: !important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器
注意:减少选择器的个数:“在css规则中尽可能的使用较少的选择器”。
1.6 css三⼤特性
1.6.1 层叠性
-
所谓层叠性是指多种CSS样式的叠加
-
层叠性是浏览器处理冲突的⼀个能⼒,如果⼀个属性通过两个相同选择器设置到同⼀个元素上,那么这个时候⼀个属性就会将另⼀个属性层叠掉(覆盖)
-
样式不冲突,不会层叠
-
样式冲突;就会层叠; 按照优先级,决定哪个样式⽣效
1.6.2 继承性
-
CSS 的继承特性指的是应⽤在⼀个标签上的⼀些 CSS 属性被传到其⼦标签上;就是被⼦标签继承
-
不是所有的样式都会被⼦标签继承, 字体类font- ; ⽂本类 text- ; 颜⾊color ; ⾏⾼line-height 等可以被继承
-
a标签⽐较特殊,没有办法通过继承改变a标签的字体颜⾊
1.6.3 优先级
-
权重的优先级,决定哪个样式最终⽣效
-
权重相同: 后者⽣效; 权重不同: 权重⾼者⽣效