1 高级选择器
并集选择器(群组、集体)
语法:选择器1,选择器2,.....选择器n {属性: 属性值;}
关系选择器(必须存在嵌套关系)
后代选择器
语法:选择器1 选择器2 {属性: 属性值;}
子代选择器
语法:选择器1>选择器2 {属性: 属性值;}
区别:后代选择器不管你是我后边的几代我都会生效
子代选择器只管我后边的一代
交集选择器(绑定选择器)
语法:标签 选择器名(id或者class) {属性: 属性值;}
2 选择器的权重
继承的权重最小
标签选择器:0001 class选择器:0010
id选择器:0100 行内样式表:1000
并集选择器的权重是所有的选择器权重之和
交集选择器是选择器权重之和
无穷大:!important (在属性值的后边添加)
3 css的层叠
样式表的层叠(样式表的优先级)
选择器的层叠(选择器的权重)
当给一个标签使用多个样式表时设置了相同的属性,值不同生效的是谁
行内优先级最高,内部与外部就近原则,优先级相同采用就近原则
当给一个标签使用多个选择器时设置了相同的属性,值不同生效的是谁
当都没有!important或者当都有!important时,比较的是权重
当某一个存在!important时,生效的是这个
如果权重相同,采用就近原则
4 颜色的色值设置
- 1 直接写英文单词 color:red;
- 2 六个十六进制数:color:#ff0000 值0-9 a-f 如果两两相同可以缩写成三位
- 3 三原色形式 color:rgb(255,0,0) 值0-255
- css3.0提供的颜色写法(低版本浏览器不支持)
- 三原色+透明度 color:rgba(255,0,0,0.5) 值0-255 a代表透明度 值0-1
- 色相饱和度和明度 color:hsl() h代表色相0-359 s 饱和度0-100% l 明度0-100%
- hsla()同上 a 透明度,值0-1
5 css的文字相关属性
- 1 文字颜色 color
- 2 文字大小 font-size 单位px(常用) em rem pt默认情况下,1em=16px=1rem,9pt=12px
- 网页默认文字大小16px,可使用关键字代表文字大小,一般不用,网页文字一般是12 14 16等偶数
- 3 文字的字体 font-family
- 如果是汉字字体,需要加引号 font-family: "楷体"
- 如果是由一个英文单词组成的字体,不需要添加引号, font-family: Arial
- 如果是由一组英文单词组成的字体,需要添加引号,font-family: "Times New Roman "
- 如果给同一个标签设置多个字体,中间用逗号隔开,font-family:Arial,"微软雅黑"
- 如果电脑上存在第一个字体则按照第一个字体去解析,如果第一个没有则查找第二个,以此类推,如果最后一个也没有则按照系统默认字体去解析
- 4 文字是否加粗 font-weight bold 加粗 normal 不加粗
- 5 文字是否倾斜 font-style italic倾斜 oblique 倾斜度大一些 normal 不倾斜
- 6 行间距 line-height
- 可以直接写**px具体数值,如果不加数值,代表的是文字大小的倍数,若line-height与height的值相同,可以实现单行(一行)文本垂直方向的居中
- 7 将小写字母变成小型的大写字母 font-variant:small-caps