Write In Front
个人主页:令夏二十三
欢迎各位→点赞 + 收藏⭐️ + 留言
系列专栏:前端
总结:希望你看完之后,能对你有所帮助,不足请指正!共同学习交流
今天是学习网页开发课程CSS基础的第二天,要学习的内容包括复合选择器、CSS特性、背景属性和显示模式。
定义:由两个或多个基础选择器,通过不同的方式组合而成。
作用:更准确、更高效地选择目标元素(标签)。
后代选择器:选中某元素的后代元素
选择器写法:父选择器 子选择器 { CSS属性 },父子选择器之间用空格隔开。
后代选择器
span 标签
这是div的儿子span
孙子 span
子代选择器:选中某元素的子代元素(最近的子级)。
选择器写法:父选择器>子选择器 { CSS属性 },父子选择器之间用 > 隔开。
子代选择器
儿子 span
孙子 span
并集选择器:选中多组标签设置相同的样式。
选择器写法:选择器1,选择器2,...,选择器N { CSS属性 },选择器之间用逗号隔开。
并集选择器
div 标签
p 标签
span 标签
交集选择器:选中同时满足多个条件的元素。
选择器写法:选择器1选择器2 { CSS属性 },选择器之间连写,没有任何符号。
交集选择器
p 标签,使用了类选择器 box
p 标签
div 标签,使用了类选择器 box
伪类选择器:伪类表示元素状态,选中元素的某个状态设置样式。
鼠标悬停状态:选择器:hover { CSS属性 }
伪类选择器
a 标签,超链接
div 标签
超链接一共有四个状态:
选择器 | 作用 |
:link | 访问前 |
:visited | 访问后 |
:hover | 鼠标悬停 |
:active | 点击时(激活) |
提示:如果要给超链接设置以上四个状态,需要按LVHA的顺序书写。
超链接伪类
a 标签,测试伪类
CSS特性:用来化简代码/定位问题,并解决问题
子级默认继承父级的文字控制属性。
CSS特性-继承性
div 标签
p 标签
span 标签
a 标签
h1 标签
特点:
优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。
规则:选择器优先级高的样式生效。
公式:通配符选择器<标签选择器<类选择器 (这个公式不用记,选中标签范围越大,优先级越低) 叠加计算:如果是复合选择器,则需要权重叠加计算。 公式:(每一级之间不存在进位) (行内样式,id选择器个数,类选择器个数,标签选择器个数) 规则: Emmet写法:代码的简写方式,输入缩写VS Code 会自动生成对应的代码。 大多数简写方式为属性单词的首字母。 网页中,使用背景图实现装饰性的图片效果。 属性名:background-image (bgi) 属性值:url(背景图URL) 属性名:background-repeat(bgr) 属性值: 属性名:background-poition(bgp) 属性值:水平方向位置 垂直方向位置 提示: 作用:设置背景图大小 属性名:background-size(bgz) 常用属性值: cover:等比例缩放背景图片以完全覆盖背景图,可能背景图片部分看不见 contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白 作用:背景不会随着元素的内容滚动。 属性名:background-attachment(bga) 属性值:fixed 属性名:background(bg) 属性值:见上方拆分写法(用空格隔开各个属性值,不区分顺序) 显示模式:标签的显示方式 作用:布局网页的时候,根据标签的显示方式选择合适的标签摆放内容。 分类: 转换显示模式:
优先级 - 叠加计算规则
三、Emmet写法
说明
标签结构
Emmet
类选择器
标签名.类名
id选择器
标签名#id名
同级标签
div+p
父子级标签
div>p
有多个相同标签
span*3
有内容的标签
div{内容}
四、背景属性
拆分写法
1. 背景图
2. 背景图平铺方式
属性值
效果
no-repeat
不平铺
repeat
平铺
repeat-x
水平方向平铺
repeat-y
垂直方向平铺
3. 背景图位置
关键字
位置
left
左侧
right
右侧
center
居中
top
顶部
bottom
底部
4. 背景图缩放
5. 背景图固定
复合写法
五、显示模式
属性值
效果
block
块级
inline-block
行内块
inline
行内