1 Emmet语法

1.1 快速生成HTML结构语法

1 Emmet语法

Emmet语法的前身是Zen coding，它使用缩写，来提高HTML / CSS的编写速度，Vscode内部已经集成该语法。

快速生成HTML结构语法
快速生成CSS样式语法

1.1 快速生成HTML结构语法

生成标签直接输入标签名按tab键即可，然后tab键，就可以生成<div></div>。
如果想要生成多个相同标签，加上*就可以了。比如 div*3，就可以快速生成3个div。【不要加空格，不然不起效果】
如果有父子级关系的标签，可以用>。比如ul>li 就可以了。
如果有兄弟关系的标签，用 + 就可以了，比如div+p。
如果生成带有类名或者id名字的，直接写 .demo / #id名 +tab键就可以了。
【默认<div></div>，如需p标签，p.demo即可】
如果生成的div类名是有顺序的，可以用自增符号$。

7.若果想要在生成的标签内部写内容可以用{}表示。

1.2 快速生成CSS样本语法

（各种简写）

eg：w100px→ width: 100px;

bgc→ background-color

1.3 快速格式化代码

Vscode 快速格式化代码 shift+alt+F

也可以设置当我们保存页面的时候自动格式化代码：）

1.CSS的复合选择器

1.1 什么是复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

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

1.2 后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法是把外层标签写在前面，内层标签在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

ol li {color:#000;}

上述语法表示选择元素1-ol里面的所有元素2-li（后代元素）。
元素1和元素2可以是任意选择器。
元素1是父级，元素2是子级，最终选择的是元素2。
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。

ol li a {font-size:20px;}

1.3 子选择器（重要）

子元素选择器（子选择器）只能作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

<div>
    <a>1</a>
    <div>
        <a>2</a>
    </div>
</div>

此时样式 div>a {color：red；} 只对<a>1</a>起样式修饰作用，而对<a>2</a>无效。

即元素2必须是亲儿子，其孙子、重孙之类都不归他管，“亲儿子选择器”

课堂练习

1、将下列链接文字修改为红色。

<div class="nav">
    <ul>
        <li><a href="#">百度</a></li>
        <li><a href="#">百度</a></li>
    </ul>
</div>

div ul li a {color:red;}

or写为：【但不推荐后续代码多了容易乱】

.class a {color:red;}

2、请将下面的大肘子文字修改为红色。

<div>
    <a href="#">大肘子</a></li>
    <ul>
        <li><a href="#">猪头</a></li>
        </li><a href="#">猪尾巴</a></li>
    <ul>
</div>

div>a {color:red;}

1.4 并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

div, p {color:red;}

约定的语法规范，我们并集选择器喜欢竖着写；
注意最后一个选择器后不加逗号。

1.5 伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大特点：用冒号（：）表示，比如：hover、first-child。

伪类选择器有链接伪类、结构伪类等。

1.6 链接伪类选择器

a:link       /*选择所有未被访问的链接*/
a:visited    /*选择所有已被访问的链接*/
a:hover      /*选择鼠标指针位于其上的链接*/
a:active     /*选择活动链接（鼠标按下未弹起的链接）*/
                 /*开 没完全开*/

未/已访问依据浏览器历史记录界定。

链接伪类选择器注意事项
1. 为确保生效，按照LVHA的顺序声明 :link -:visited -:hover -:active (love hate)
2. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
3. 实际开发工作中的写法↓（足够用）。

        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #369;
            text-decoration: underline;
        }

1.7 :focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况<input>表单元素才能获取，因此这个选择器也是主要针对于表单元素来说。

        input:focus {
            background-color: black;
            color: red;
        }

1.8 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	任意子孙后代	较多	符号是空格 .nav a
子代选择器	仅选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	选择不同状态的链接	链接相关	较多	重点记住 a { } 和 a:hover { }
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus

2.CSS的元素显示模式

了解元素的显示模式可以更好的让我们布局页面。

2.1 什么是元素显示模式

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好地布局我们的页面。

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己自己占一行，比如一行可以放多个<span>。

HTML元素一般分为块元素和行内元素两种类型。

2.2 块元素

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

块级元素的特点：

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

注意：文字类元素内不能使用块级元素，如<p><h>

2.3 行内元素

也称内联元素。常见的行内元素有<a><img><del><i><s><u><b><span>等，其中<span>标签是最典型的行内元素。

特点：

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

注意：

链接中不能再放链接；
特殊情况下<a>中可以放块级元素，但是给<a>转换一下块级模式最安全。

2.4 行内块元素

在行内元素中有几个特殊标签——<img /><input /><td>等，它们同时具有块元素和行内元素的特点，称之为“行内块元素”

行内块元素特点：

和相邻行内元素（行内块）在一行上，但他们之间会有空白缝隙。一行内显示多个（行内元素特点）；
默认宽度是其本身宽度；
高度、行高、外边距可控（块级元素特点）。

2.5 元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含	特征
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何元素	单独可调整
行内元素	一行可以放多个行内元素	不能直接设置宽高	内容本身宽度	容纳文本或其他行内元素	多个不可调
行内块元素	一行可以放多个行内块元素	可以设置宽度高度	内容本身宽度		多个可调整

2.6 元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性。

        a {
            /* 把行内元素a转换为块级元素 */
            display: block;
            width: 100px;
            height: 100px;
            background-color: #000;
        }

        div {
            /* 把块级元素div转换为行内元素 */
            display: inline;
            background-color: #333;
        }

        span {
            /* 行内元素转换为行内块元素 */
            display: inline-block;
        }

转换为块元素 display:block;
转换为行内元素 display:inline;
转换为行内块元素 display:inline-block;

2.7 一个小工具使用snipaste

Snipaste是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上。

常用快捷方式：

1、F1可以截图，同时测量大小，设置箭头、书写文字等；

2、F3在桌面置顶显示；

3、点击图片，alt可以取色（按下shift可以切换取色模式）；

4、按下esc取消图片显示。

2.7 单行文字垂直居中

CSS没有提供文字垂直居中的代码，但可让文字行高=盒子高度来实现。

案例：简洁版小米侧边栏

3 CSS背景

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

3.1 背景颜色

background-color属性定义了元素的背景颜色。

background-color：颜色值；
background-color：transparent；  背景透明度

一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明度

3.2 背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些修饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）

background-image : none | url (url)
none : 　无背景图（默认）
url : 　使用绝对或相对地址指定背景图像

3.3 背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

background-repeat：repeat(重复) | no-repeat | repeat-x（沿着X轴平铺） | repeat-y

页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

3.4 背景图片位置

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

background-position：x y；
/*参数代表的意思是：X坐标和Y坐标。可以使用方位名词或者精确单位*/

参数值	说明
length	百分比 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right （方位名词）

1、参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致。
- 当一个属性值是center时，其作用于另一属性值所在轴(Y/X)的另外轴（X/Y)
如果只指定一个方位名词，另一个值省略，则第二个值默认居中对齐。

background-position: center bottom;

2、参数是精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。
如果只指定一个参数，则该参数一定是X坐标，y坐标默认居中。

3、参数是混合单位

即参数值是精确坐标与方位名词混合，那么第一个肯定是x坐标，第二个一定是y坐标。

4、背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或随页面其余部分滚动。

（后期可制作视差滚动效果）

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

3.6 背景复合写法

为了简化背景属性代码，可以将这些属性合并简写在同一个属性background中，从而节约代码。

当使用简写属性时，没有特定的书写顺序，一般习惯顺序为：

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

            background: blue url(赵云-黄紫.jpg) no-repeat fixed top;

3.7 背景半透明

background:rgba(0,0,0,0.3)

a→alpha透明度，取值为（0,1）
我们习惯把0.3的0省略，写为background：rgba（0,0,0,.3）;
注意：仅对盒子背景半透明，盒子里面的内容不受影响。
此为CSS3新增属性，是IE9+版本浏览器才支持的。

3.8 背景总结

综合案例（五彩导航）

30mins

        a {
            display: inline-block;
            width: 120px;
            height: 58px;
            line-height: 50px;
            background: no-repeat;
            text-align: center;
            text-decoration: none;
            color: white;
        }
        #wu {background: url(img/bg1.png);}
        #wu:hover {background: url(img/bg11.png);}
        #cai {background: url(img/bg2.png);}
        #cai:hover {background: url(img/bg22.png);}
        #dao {
            background: url(img/bg3.jpg);
        }
        #dao:hover {
            background: url(img/bg3.png);
        }
        #hang {
            background: url(img/bg4.png);
        }

        #hang:hover {
            background: url(img/bg5.png);
        }

    <div>
        <a href="#" id="wu">五彩导航</a>
        <a href="#" id="cai">五彩导航</a>
        <a href="#" id="dao">五彩导航</a>
        <a href="#" id="hang">五彩导航</a>
    </div>

快捷键：shift+alt+鼠标左键可实现多行编写