CSS 复合选择器
emmet 语法
通过简写提高编码效率
emmet 语法生成 html 标签
- N:连续生成 N 个,举例:div*5
- 父>子:生成父子关系结构,举例:ul>li*5
- 兄+弟:生成兄弟关系结构,举例:h1+div2+h4+p2
- .class / #id:生成带 class 或 id 的div,举例:.red / #app
- tag.class / tag#id:生成带 class 或 id 的 tag,举例:p.red/ span#nav
emmet 语法快速生成 css 样式
常用属性大多用英文单词的首字母连写即可,示例如下:
tac → text-align: center;
ti2em → text-indent: 2em;
lh26px → line-height: 26px;
tdn → text-decoration: none;
设置宽高:
w100 → width: 100px;
h200 → height: 200px;
「快速格式化代码」扩展 —— 保存时自动格式化
- ctrl + , → 首选项 / 设置
- 输入 fromat,勾选 Format On Save
CSS 复合选择器
特点:
- 对基础选择器进行组合
- 由两个或多个基础选择器,通过不同方式组合而成的
解决问题:
更准确、更高效的选择目标元素
四类复合选择器:
后代、子代、并集、伪类
后代选择器
应用场景:可以选择父元素中的子元素
语法格式:
选择器1 选择器2 {样式声明;}
后代选择器的选择器之间使用空格分开
后代选择器最终选中的元素是子代元素 → 后代元素
后代选择器的元素除了使用标签选择器,还可以使用其他的基础选择器
后代选择器中的元素可以是任意一种基础选择器
在书写后代选择器时,元素 1 和元素 2 不一定要是父子关系
子元素选择器
应用场景:选择某个元素最近一级的子元素(亲儿子)
语法格式:
选择器1 > 选择器2 {样式声明;}
子代选择器的选择器之间使用 > 分开
代选择器最终选中的元素是子代元素 → 亲儿子
并集选择器
应用场景:集体声明——选择多组标签,同时设置相同的样式
语法格式:
选择器1,
选择器2 {
样式声明;
}
并集选择器的选择器之间使用 , 分开,最后一个选择器不需要逗号
并集选择器通常会竖式排列选择器,提高代码的可读性
并集选择器也可以使用后代选择器或子代选择器
链接伪类选择器
应用场景:针对链接的不同状态设置不同的样式
链接伪类选择器 | 说明 |
---|---|
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有已经被访问的链接 |
a:hover | 选择鼠标指针位于其上的链接 |
a:active | 选择激活链接(鼠标按下未抬起的链接) |
链接伪类选择器的书写顺序:LoVe HAte(爱与恨) L V H A
在实际开发中,因为 a 标签是有点击跳转行为的,默认与其他文本的显示样式就不相同,所以需要给 a 标签单独设置样式
在实际开发中,通常只使用链接伪类选择器的(:hover)状态,因为只有鼠标经过链接时,与用户的交互是最直接的
示例代码:
a {
color: #777;
text-decoration: none;
}
a:hover {
color: red;
}
focus 伪类选择器
应用场景:在表单中突出显示当前获得焦点的表单元素,提升用户体验
总结:
交集选择器
应用场景:
1.交集选择器在项目中使用一般是为了提权
2.交集选择器不需要使用分割符分割
元素的显示模式
块级元素—— block
常见的块元素:
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
<div> 标签是最典型的块元素
块级元素的特点:
1.独占一行
2.可以设置宽度、高度、外边距、边框和内边距
3.宽度默认是父级容器的宽度
4.可以存放其他行内元素和块级元素
注意事项:开发时不要在文本类元素中添加其他元素,专注于文本存放(h1~h6、p)
行内元素 —— inline
常见的行内元素:
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
1.相邻行内元素在一行显示,一行多个
2.给行内元素设置宽高是无效的
3.默认宽度是内容的宽度(被内容撑开)
4.只能容纳文本或其他行内元素
注意事项:链接不能再放链接;特殊情况的链接可以存放块级元素(例如在电商网站点击商品列表项跳转到商品明细项)
行内块元素 —— inline-block
行内块元素的特点:
1.相邻行内元素在一行显示,一行多个(行内元素特点)
2.默认宽度就是本身内容的宽度(行内元素特点)
3.可以设置宽度、高度、外边距、边框和内边距(块级元素特点)
学习过的标签中的行内块元素:img、input、td
总结
显示模式的转换
应用场景:
1.让行内元素具有宽高:把行内元素转换成块元素或者行内块元素
2.让块元素一行显示:把块元素转换成行内块元素
三种显示模式转换的代码:
display: block 转换为块元素
display: inline-block 转换为行内块元素
display: inline 转化为行内元素(使用较少)
在写 CSS 时,记住把 display 转换显示模式的设置写在第一行。
单行文字垂直居中
实现方式:将 line-height 设置为盒子的高度
原理:
行高的上空隙和下空隙把文字挤到中间了,
如果行高小于盒子高度,文字会偏上,
如果行高大于盒子高度,则文字偏下。
背景
背景颜色
background-color 定义元素的背景颜色
语法:
background-color:颜色值;
元素背景颜色默认值是 transparent(透明)
background-color:transparent;
背景图片
background-image 描述元素的背景图像
应用场景:
logo
装饰图片
超大图片
精灵图(雪碧图)
背景图片的优点:非常容易控制位置
语法:
background-image: none | url(url);
指定背景图片的 url 时不需要引号
背景平铺
background-repeat 描述背景图像平铺
语法:
background-repeat: repeat | no-repeat | repeat-x | repeat-y
在使用背景图片时,默认背景是平铺的
使用了背景图片还可以再指定背景颜色
背景位置
background-position 描述图片在背景中的位置
方位名词
background-position: x y;
方位名词都分别对应的方位:
水平方向:left / right / center
垂直方向:top / bottom / center
使用方位名词指定背景图片位置没有顺序要求,因为从方位名词能够分清方向
如果指指定了一个方位名词,第二个值默认居中对齐
语法:
background-position: center; 居中对齐
background-position: left; 水平方向左对齐,垂直方向居中
background-position: top; 水平方向居中,垂直方向靠上
精确单位
用精确坐标指定背景图片有顺序要求,第一个值一定是 x / 第二个值一定是 y
如果只指定了一个值,是x 方向,另一个方向垂直方向居中显示
混合单位
指定背景图片可以混合使用单位,顺序是第一个值一定是 x / 第二个值一定是 y
背景固定
background-attachment 的两个参数:
scroll 默认,背景图像跟随滚动
fixed,背景图像固定
背景属性复合写法
为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性 background 中,从而节约代码量
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background: color image repeat attachment position;
写法:
background: red url(image.jpg) no-repeat fixed 20px top ;
背景颜色半透明
使用 background-color 可以设置背景颜色半透明,因为 background: rgba(0, 0, 0, 0.3); 本质上就是在设置背景颜色
rgba 中的 alpha 取值范围:0 ~ 1(0 完全透明 / 1 完全不透明)