前端入门 CSS 进阶

---

一、Emmet 语法

1.快速生成 HTML 结构语法

① 直接输入标签名按 Tab 键即可快速生成标签，比如 div 然后 Tab 键，就可以生成<div></div>；
② 如果想要生成多个相同标签，加上 * 就可以了，比如 div*3 就可以快速生成3个 div；
③ 如果有父子级关系的标签，可以用 > ，比如 ul > li 就可以了；
④ 如果有兄弟关系的标签，用 + 即可，比如 div + p；
⑤ 如果生成带有类名或者 id 名字的 div ，直接写成 .demo 或者 #two，然后按下Tab键；
⑥ 想要生成带有类名或 id 名字的其他标签，可以这样写 p.one 就可以生成<p class="one"></p>
⑦ 如果生成的 div 类名是有顺序的，可以用自增符号 $；
⑧ 在生成的标签内写内容使用 {} 表示，div{ 哟呵 }。

2.快速生成 CSS 样式

单词首字母加 Tab 键，快速生成 CSS 样式！

例如：
① text-align: center 这样写，tac + Tab键；
② width: 200px 这样写，w200 + Tab键；
③ height: 100px 这样写，h100 +Tab键；
④ line-height: 20px 这样写，lh20 + Tab键。

3.快速格式化代码

编写代码时，有时候会发现代码的格式不太规范或美观，如果一个一个地修改格式会特别麻烦又浪费时间，学习快速格式化代码，会大大提高我们写代码的效率。

① Vscode 快速格式化代码
shift + alt + f

②Vscode 设置保存页面时自动格式化代码

（1）文件 → 【首选项】→ 【设置】
（2）搜索 emmet.include
（3）在 settings.json 下的【用户】中添加以下语句：
“editor.formatOnType”:true,
“editor.formatOnSave”:true

只需设置一次就好，以后都可以保存自动格式化

二、复合选择器

复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。

① 复合选择器可以更准确、更高效低选择目标元素；
②复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；
③ 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

1.后代选择器

精确选择：我是家里蹲大学集体挖煤学院250班的王美丽！

/*li是ol的后代*/
ol li {
color: red;
}
/*一层一层往下查找*/
ol li a {
color: green;
}
/*父子孙元素可以是任意选择器*/
.nav li a {
color: blue;
}

2.子选择器

直系选择：你是我儿子！（只要不是王叔的儿子都属于ME）

/*选择离它最近的那一级子元素*/
.nav>a {
color: pink;
}

3.并集选择器

随便选择：我和你，我和他，你管我和谁！

/*可以选择多组标签，同时为它们定义相同的样式*/
.nav,div {
color: white;
} 
/**/
div,p,pig li {
color: yellow;
}

注意点：
① 任何形式的选择器都可以作为并集选择器的一部分；
② 我们并集选择器喜欢竖着写，逗号换行；
③ 最后一个选择器不需要加逗号。

4.伪类选择器

伪类选择器用于向某些选择器添加特殊效果，它在书写的过程中最大的特点是用冒号表示，比如 :hover、:first-child 。

① 链接伪类选择器

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标经过其上的链接
a:active 选择鼠标按下未弹起的链接

注意 link、visited、hover、active 这四个顺序不能颠倒！

实际开发中，并不需要太多花里胡哨的样式，大多数都是这样写的：

a {
color:gray;
}
/*实际开发一般只会用到 hover 样式*/
a:hover {
color: yellow;
}

② 焦点伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况<input>类表单元素才能被获取，因此这个选择器主要是针对表单元素来说的。

/*把获得光标的input表单元素选取出 */
input:focus {
background-color: yellow;
}

把获得光标的 input 表单元素选取出来，为其添加样式；
注意这里的样式只有在获得光标时才有效果，当光标移走后是没有效果的。

三、元素显示模式

了解元素的显示模式可以帮助我们更好地布局页面！

1.块元素

常见的块元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最常见的块元素。

块级元素的特点：
① 比较霸道，自己独占一行；
② 高度、宽度、外边距以及内边距都可以控制；
③ 宽度默认是容器（父级元素）的100%；
④ 是一个容器及盒子，里面可以放行内或块级元素。

<h> 和 <p> 标签里面不允许再使用块级元素！

2.行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、i、<del>、<s>、<ins>、<u>、<span>等，其中<span>是最典型的行内元素。

行内元素的特点：
① 相邻行内元素在一行，一行可以显示多个；
② 高、宽直接进行设置是无效的；
③ 默认宽度就是它本身内容的宽度；
④ 行内元素只能容纳文本或其他行内元素。

行内元素里面不允许放块级元素，<a>标签除外！

3.行内块元素

在行内元素中有几个特殊的标签<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点。

行内块元素的特点：
① 和相邻行内元素（行内块）在一行，但是它们之间有空白间隙，一行可以显示多个；
② 默认宽度就是它本身的的宽度；
③ 高度、行高、外边距以及内边距都是可以控制的。

4.显示模式的转换

/*转换为块级元素就可以给链接设置宽度和高度了，常用*/
a {
display: block;
}
/*转换为行内元素，很少用*/
div {
display: inline;
}
/*转化为行内块元素，常用*/
a {
display: inline-block;
}

5.单行文字垂直居中

还记得让文本水平居中如何设置吗？水平居中可以直接将 text-align 属性值设为 center 即可，但是 CSS 没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现。
解决方案：让文字的行高等于盒子的高度！

div {
height: 40px;
line-height: 40px;
}

如果行高小于盒子高度，则文字位置会偏上！

四、CSS的背景

1.背景颜色

background-color: red;

2.背景图片

实际开发中，我们并不会直接在 HTML 中插入图片，更多的是使用 CSS 样式为页面添加背景图片，优点是非常便于控制位置。

background-image: url(images/logo.jpg);

3.背景平铺

如果需要在 HTML 页面中对背景图像进行平铺，可以使用background-repeat属性来实现。页面元素既可以添加背景颜色又可以添加背景图片，只不过背景图片会压住背景颜色！

参数：
repeat 平铺、no repeat 不平铺、repeat-x 沿 x 轴平铺、repeat-y 沿 y 轴平铺，默认为 repeat 平铺

4.背景位置

利用background-position属性可以改变图片在背景中的位置。

/*x坐标和y坐标*/
background-position: x y;

① 参数值可以是百分比、数字长度，也可以是方位名词（top、bottom、left、right、center）；
② 当参数值是方位名词时 x、y 顺序没有关系，center left 和 left center 效果是一样滴；
③ 当参数值是精确数值，那么第一个必须是 x，第二个必须是 y，距左上的距离；
④ 混合参数单位background-position: 20px center规定第一个值一定是 x，第二个一定是 y；
⑤ 当方位名词只写一个参数时，另一个参数默认居中，当精确数值只写一个参数时，该参数一定为 x 值，y 值默认居中。

5.背景固定

background-attachment属性设置背景图像是否是固定的还是随着页面其余部分滚动，后期可以制作视差滚动效果。

参数：
scroll 背景图像随对象内容滚动（默认值），fixed 背景图像固定

6.背景色半透明

/*最后一个参数用来控制背景的透明度*/
background: rgba(0, 0, 0, 0.5);

注意是让盒子的背景色变透明，但盒子里面的内容不会受到影响！

五、CSS 三大特性

1.层叠性

给相同的选择器设置相同的样式，此时一个样式就会覆盖另一个相同的样式，层叠性主要解决样式冲突的问题。

层叠性规则：
① 样式冲突，遵循的原则是就近原则，哪个样式离结构近就执行哪个样式；
② 样式不冲突，不会覆盖。

2.继承性

子标签会继承父标签中的某些样式，主要继承的是文字相关的样式，如文本颜色和字号！

行高的继承性

body {
font: 12px/1.5 Microsoft YaHei;
}

① 行高可以跟单位也可以不跟单位；
②如果子元素没有设置行高，则会继承父元素的行高；
③ 此时行高为当前子文字大小的1.5倍，也就是 12*1.5 px；
④ body 行高 1.5 这样写最大的优势就是里面的子元素可以根据自己文字的大小自动调整行高。

3.优先级

当同一个元素指定多个选择器时，就会有优先级的产生。

① 选择器相同，则执行层叠性；
② 选择器不同，则根据选择器权重执行。

选择器权重如图：

/*加上!important后的选择器权重成为最高*/
div {
color: green!important;
}

单独选出来的选择器权重更高，不要看父级权重！父亲的权重可能很大，但是继承的权重始终为0，永远最低！

那么当出现复合选择器时，我们的权重又是如何计算的呢？这里又出现一个新概念 —— 权重的叠加！

li {
color: green;
}
ul li {
color: red;
}
.nav li {
color: blue;
}

很显然，从上到下三个选择器的权重逐渐增大，那么它们的优先级就显而易见了！

权重有叠加，但永远不会进位！