黑马学习CSS第二天，芜湖，起飞~

CSS 复合选择器

emmet 语法

通过简写提高编码效率

emmet 语法生成 html 标签

1. N：连续生成 N 个，举例：div*5
2. 父>子：生成父子关系结构，举例：ul>li*5
3. 兄+弟：生成兄弟关系结构，举例：h1+div2+h4+p2
4. .class / #id：生成带 class 或 id 的div，举例：.red / #app
5. 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;

「快速格式化代码」扩展 —— 保存时自动格式化

1. ctrl + , → 首选项 / 设置
2. 输入 fromat，勾选 Format On Save

CSS 复合选择器

特点：

1. 对基础选择器进行组合
2. 由两个或多个基础选择器，通过不同方式组合而成的

解决问题：
更准确、更高效的选择目标元素

四类复合选择器：
后代、子代、并集、伪类

后代选择器

应用场景：可以选择父元素中的子元素

语法格式：

选择器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 完全不透明）

背景总结