2.css基础语法
2023-02-27 20:34:28 11 举报AI智能生成
该思维导图介绍了css常用语法
作者其他创作
大纲/内容
2.css基本语法
基本语法
选择器
选择器用来指定要设置样式的元素
声明块
声明块用来设置样式
声明块是一个名值对
一个样式名对应一个(或多个样式值),之间用:链接,使用;结尾
4.属性选择器
根据元素的属性选中元素
语法
[属性名] 选择指定属性值的元素
- [属性名 = 属性值] 选中指定属性值的元素
[属性名 ^= 属性值] 选择属性值以指定值开头的元素
[属性名 $= 属性值] 选中属性值以指定内容结尾的元素
[属性名 *= 属性值] 选择属性值包含指定内容的元素
交集选择器
选中同时符合多个选择器的元素
语法
选择器1选择器2选择器3
列子
div[title = hello]{}
#id.box{}
分组选择器
同时选中多个对应的元素
选择器1,选择器2,选择器3,...选择器n{}
关系选择器
根据元素之间关系来选中元素
元素之间的关系
父子,祖先后代,兄弟
子元素选择器
选中指定元素的子元素
语法: 父元素 > 子元素{}
后代元素选择器
选中指定元素的后代元素
语法: 祖先 后代 {}
兄弟元素选择器
选中指定的兄弟元素
兄 + 弟 {}
选中紧随其后的一个兄弟
兄 ~ 弟 {}
选中后边所有兄弟元素
6.样式的继承与权重
设置在祖先元素上的样式,也会被同时应用到后代元素上
所有的布局,背景,边框等相关的样式都不会被继承
选择器权重
继承的样式:没有优先级
通配选择器:0000
元素选择器:0,0,0,1
类和伪类选择器:0,0,1,0
id选择器:0,1,0,0
内联样式:1,0,0,0
比较优先级时，需要将多个选择器的优先级一起计算
优先级高的优先显示，优先级的累加无法跨域数量级,
如果优先级一样，则优先显示靠下的样式
如果为样式添加 !important，则该样式会获得最高的优先级，优先于其他样式显示，慎用！
注意：分组选择器优先级都是单独计算的！
优先级高的优先显示，优先级的累加无法跨域数量级,
如果优先级一样，则优先显示靠下的样式
如果为样式添加 !important，则该样式会获得最高的优先级，优先于其他样式显示，慎用！
注意：分组选择器优先级都是单独计算的！
div.box1 0,0,1,1
.box1 0,0,1,0
#box1 0,1,0,0
.box1.box2.box3.box4.box5.box6.box7.box8.box9.box10.box11{} 0,0,11,0
.box1 0,0,1,0
#box1 0,1,0,0
.box1.box2.box3.box4.box5.box6.box7.box8.box9.box10.box11{} 0,0,11,0
1.简介
三种样式
内联样式
内部样式
外部样式
全称
css(层叠样式表)
网页三个部分
结构,行为,样式
3.基本选择器
元素选择器
根据标签进行选择多个元素
语法
标签名{}
列子
p{} div{} h1{}
id选择器
根据id属性选择一个属性
语法
#id
列子
#p1{} #box{}
类选择器(最常用)
根据class属性选择元素
语法
class{}
eg
.p1{} .p2{} .box{}
通配选择器(*)
选择页面中所有元素
语法
*{}
5.伪类
伪类是一个特殊的类,用来表示元素的状态
用 :visited来访问过的超链接
a的伪类
:link
表示未访问的超链接
:visited
访问过的链接
由于隐私原因,只能改变文字颜色
:hover
鼠标移入的元素
:active
鼠标点击的元素
结构伪类
:root
根元素
:empty
空元素
:first-child
第一个子元素
:first-of-type
同类型的第一个子元素
:last-child
最后一个子元素
:last-of-type
同类型的最后一个子元素
:nth-child
第n个子元素
:nth-of-type
同类型中第n子元素
:nth-last-child
倒数第n个元素
:nth-last-of-type
同类型倒数第n个元素
:only-child
唯一的子元素
:only-of-type
同类型中的唯一子元素
否定伪类
:not
否定伪类,除了这个元素
伪元素
befor,after
分别选中开始或结束位置,从而为其添加内容
1.通过它可以为元素添加一些统一的符号
2.也可以在特殊场景下通过它们来调整一下页面的样式
2.也可以在特殊场景下通过它们来调整一下页面的样式
::before
元素开始位置(开始标签之前)
::after
元素结束位置(结束标签之前)
::first-letter
首字母
::first:line
第一行
::selection
选中的文字样式
7.单位
长度单位
像素(px)
每一台设备的像素大小是不同的，越清晰的设备像素就越小
百分比(%)
设置%会根据父元素指定属性的百分比计算
em
1em = 1 font-size(当前元素的)
rem(root em) 1rem = 1根元素的font -size(html根元素)
颜色单位
颜色名
直接用颜色名来设置颜色
比如：red、blue、green、yellow、orange ...
rgb值
通过rgb值通过三种不同的颜色组合,来调配不同颜色
red green blue
语法：RGB(红色, 绿色, 蓝色)
取值范围：0-255
光的三原色
语法：RGB(红色, 绿色, 蓝色)
取值范围：0-255
光的三原色
HSL
h 色相 0 - 360
s 饱和度 0% - 100%
l 亮度 0% - 100%
s 饱和度 0% - 100%
l 亮度 0% - 100%
0 条评论
下一页
