CSS（二）

（一）Emmet语法

Emmet语法的前身是Zen Coding,它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法

1.快速生成HTML结构语法

1.生成标签，直接输入标签名然后按tab键即可，比如，div然后按tab键，就可生成div标签
2.如果想要生成多个相同标签，输入标签名后 * n即可，比如 div*3，就可生成三个div标签
3.如果有父子级关系，可以用>，比如ul>li
4.如果有兄弟关系，可以用+，比如div+p
5.如果生成带有类名或者id名的直接写.属性值或者#属性值+tab键
6.如果生成的div类名是有顺序的，可以用自增符号$
7.如果想在生成的标签内部写内容可以用{}表示

<!--1. div + tab -->
<div></div>
<!--2. p*3 + tab -->
<p></p>
<p></p>
<p></p>
<!--3. ul>li + tab -->
<ul>
    <li></li>
</ul>
<!--3. tr>td*3 + tab-->
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<!--4. div+p + tab-->
<div></div>
<p></p>
<!--5. p.demo+tab -->
<p class="demo"></p>
<!--5. p#demo+tab -->
<p id="demo"></p>
<!--6. div$*5 + tab-->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!--7. div{老八秘制小汉堡} + tab-->
<div>老八秘制小汉堡</div>
<!--7. div{老八秘制小汉堡}*3 + tab-->
<div>老八秘制小汉堡</div>
<div>老八秘制小汉堡</div>
<div>老八秘制小汉堡</div>
<!--7. div{$}*5 + tab-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

2.快速生成CSS样式语法

在CSS中采用简写的形式即可
1.比如w20 按tab 可以生成 width: 20px
2.比如lh26 按tab 可以生成 line-height: 26px

<style>
    p {
        /* tac + tab */
        text-align: center;
        /* w20 + tab */
        width: 20px;
        /* tdn + tab */
        text-decoration: none;
	}
</style>

3.快速格式化代码

shift+alt+f 快速格式化文档

保存页面时自动格式化代码
1.文件-->首选项-->设置
2.搜索emmet.include;
3.在setting.json下的用户中添加以下语句
"editor.formatOnType":true,
"editor.formatOnSave":true

（二）CSS的复合选择器

1.复合选择器简介

在CSS中，可以根据选择器类型分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的，常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等

复合选择器可以更加准确、更加高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

2.后代选择器

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

父元素 子元素 {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

<style>
    /* 要把ol里的li选择出来改为红色 */
    ol li {
        color: red;
    }

    ol li a {
        color: red;
    }

    .nav li a {
        color: yellow;
    }
</style>

PS：
1.父元素与子元素之间要用空格隔开
2.后代选择器最终是给子元素做样式修改
3.子代不限与时儿子，也可以是孙子
4.父元素和子元素可以是任意的基础选择器

3.子选择器

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

父元素>子元素 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

<style>
    div>a {
        color: red;
    }
</style>

PS：
1.父元素与子元素之间要用>隔开
2.子元素选择器只能选择最近一级的子元素，不能选择其他后代

4.并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明，通俗理解就是元素1和元素2一起改变样式

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

元素1,
元素2 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

<style>
    /* 要求1：将熊大和熊二改成红色 */
    /* 
    div,
    p {
    color: red;
    } 
    */
    /* 要求2：将熊大和熊二改成绿色，并将沈阳大街团队改为绿色 */
    div,
    p,
    ul li {
        color: green;
    }
</style>

PS：
1.并集选择器要竖着写
2.最后一个选择器不用加逗号

5.伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或者选择第一个元素，第n个元素
伪类选择器的书写特点是用：表示，比如 ：hover、：first-child
常见的伪类选择器有链接伪类、结构伪类等

6.链接伪类选择器

a:link    {color:blue;}		/*选择未被访问的链接*/
a:visited {color:blue;}		/*选择已被访问的链接*/
a:hover   {color:red;}		/*选择鼠标指针位于其上的链接*/
a:active  {color:yellow;}	/*选择活动链接（鼠标按下未抬起的链接）*/

<style>
    /*选择未被访问的链接*/
    a:link {
        color: blue;
        text-decoration: none;
    }
    /*选择已被访问的链接*/
    a:visited {
        color: green;
    }
    /*选择鼠标指针位于其上的链接*/
    a:hover {
        color: red;
    }
    /*选择活动链接（鼠标按下未抬起的链接）*/
    a:active {
        color: yellow;
    }
</style>

PS：
1.为确保生效，要按照LVHA顺序声明 link visited hover active
2.因为a链接在浏览器中有默认的样式，所以都需要给链接单独指定样式
3.实际开发中的写法

<style>
    /*选择未被访问的链接*/
    a:link {
        color: blue;
        text-decoration: none;
    }
    /*选择鼠标指针位于其上的链接*/
    a:hover {
        color: red;
        text-decoration: underline;
    }
</style>

7.focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况下类表单标签才能获取，因此这个选择器也要针对于表单元素来说的

<style>
    input:focus {
        backgroud-color: yellow;
    }
</style>

8.交集选择器

交集选择器 既...又...

标签名类名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

注意：如果有标签选择器，则将标签选择器放在第一个

div.demo {
    color: aqua;
}
/*既是div标签，又有demo这个类名*/

9.兄弟选择器

兄弟选择器：

• ​ +：会选择下一个相邻的兄弟

元素1+元素2 {
     属性:属性值
 }

.bro+div {
    color: red;
}

• ​ ~：会选择下面所有同名的兄弟

元素1~元素2 {
	属性:属性值
}

.bro~.bro2 {
    color: pink;
}

（三）CSS的元素显示模式

1.元素显示模式简介

作用：了解元素的特点可以更好的布局页面
元素显示模式就是元素（标签）以什么方式进行显示，比如div自己占用一行，一行可以放多个span
HTML元素一般可以分为块元素和行内元素两种

2.元素显示模式分类

1）块元素

常见的块元素有 h1~h6、p、div、ul、ol、li等，其中div就是最经典的块元素

<style>
    div {
        width: 500px;
        height: 100px;
        background-color: pink;
        text-align: center;
        border: 2px dotted;
        border-color: red;
    }
</style>

块元素的特点：
1.独占一行
2.宽度、高度、外边框、内边框都可以自定义
3.宽度默认是容器（父级元素）的100%
4.是一个容器即盒子，里面可以放行内或者块级元素

PS：文字类（p标签、h1~h6标签等)的元素内不能使用块级元素

2）行内元素

常见的块元素有 a、strong、b、em、i、del、s、ins、u、span等，其中span就是最经典的行内元素（内联元素）

行内元素的特点：
1.一行可显示多个元素
2.宽度、高度都不可以自定义
3.宽度默认是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素

PS：
1.a 链接里面不能再放链接
2.特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式是最安全的

3）行内块元素

在行内元素中有几个特殊的标签——img、input、td，他们同时具有块元素和行内元素的特点

行内块元素的特点：
1.和相邻元素显示在一行上，但是它们之间会有空白间隙，一行可以显示多个
2.默认宽度就是它本身的内容的宽度
3.高度、宽度、行高、外边距都可以自定义

3.元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式特性，比如想要增加链接a的触发范围

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

<style>
    a {
        width: 150px;
        height: 30px;
        background-color: pink;
        color: black;
        text-decoration: none;
        /* 将行内元素转换为块元素 */
        display: block;
    }

    div {
        width: 150px;
        height: 30px;
        background-color: pink;
        /* 将块级元素转换为行内元素 */
        display: inline;
    }

    span {
        width: 150px;
        height: 30px;
        background-color: pink;
         /* 将块级元素转换为行内块元素 */
        display: inline-block;
    }
</style>

（四）CSS的背景

1.背景颜色

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

<style>
    div {
        width: 500px;
        height: 500px;
        /* background-color: transparent;透明的 */
        background-color: red;
    }
</style>

2.背景图片

background-image属性定义了元素的背景图片，实际开发中常见于logo或者一些装饰性的一些小图片，或者是大的背景图片，优点是非常便于控制图片的位置

<style>
    div {
        width: 1500px;
        height: 800px;
        /* 没有背景图片 */
        /* background-image: none; */
        /* 不要忘记url() */
        background-image: url(/AnniEiffel.jpg);
    }
</style>

3.背景平铺

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

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。

<style>
    div {
        width: 800px;
        height: 400px;
        background-image: url(/二维码.png);
        /* 平铺 */
        /* background-repeat: repeat; */
        /* 不平铺 */
        /* background-repeat: no-repeat; */
        /* 沿X轴平铺 */
        /* background-repeat: repeat-x; */
        /* 沿Y轴平铺 */
        background-repeat: repeat-y;
    }
</style>

PS：页面元素既可以添加背景颜色，也可以添加背景图片，背景颜色在最底层

4.背景图片的位置

如果想改变HTML页面上对背景图片的位置，可以使用background-position属性

background-position: x y;

值	描述
top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

1）参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只有一个方位名词，则第二个默认是居中

<style>
    div {
        width: 800px;
        height: 400px;
        background-color: pink;
        background-repeat: no-repeat;
        background-image: url(/皇冠.jpg);
        /* 居中向上 */
        /* background-position: center top; */
        /* 居左向下 */
        /* background-position: left bottom; */
        /* 省略一个方位名词，左侧居中 */
        /* background-position: left; */
    }
</style>

2）参数是精确单位

如果参数值是精确单位，第一个一定是x坐标，第二个一定是y坐标
如果只有一个精确单位，则第二个默认是居中

<style>
    div {
        width: 800px;
        height: 400px;
        background-color: pink;
        background-repeat: no-repeat;
        background-image: url(/皇冠.jpg);
        background-position: 20px 50px;
    }
</style>

3）参数是混合单位

如果参数值是精确单位和方位名词混合使用，第一个值是x坐标，第二个值是y坐标

<style>
    div {
        width: 800px;
        height: 400px;
        background-color: pink;
        background-repeat: no-repeat;
        background-image: url(/皇冠.jpg);
        /* x轴20距离，垂直居中 */
        /* background-position: 20px center; */
        /* x轴居中，垂直20距离 */
        /* background-position: center 20px; */
    }
</style>

5.背景图片固定

如果想固定图片使之不随页面滚动可以使用background-attachment属性

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。

<style>
    body {
        width: 1800px;
        height: 2400px;
        background-image: url(/皇冠.jpg);
        background-repeat: no-repeat;
        background-color: pink;
        /* 背景图片滚动 */
        /* background-attachment: scroll; */
        /* 背景图片固定 */
        background-attachment: fixed;
    }
</style>

6.背景图片复合写法

为简化背景属性的代码，可以使用背景属性复合写在background中
规定顺序 background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
使用background复合属性时，各属性间以空格隔开

background: pink url(/皇冠.jpg) no-repeat fixed left center;

7.背景色半透明

CSS3提供了背景色半透明的效果，通过background：rgba(0,0,alpha)来设置,alpha是透明度

background: rgba(0, 0, 0, 0.5);

PS：
1.我们习惯将alpha属性的0省略，直接写.x
2.背景半透明盒子不影响里面的内容
3.CSS3新增属性，只有IE9以上的版本才支持

（五）CSS的三大特性

1.层叠性

给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，主要解决了冲突的问题
样式冲突，层叠性遵循就近原则，哪个样式离结构与近，就执行哪个样式。样式不冲突，不会层叠

<style>
    div{
        /*颜色冲突，颜色会被覆盖，最终为红色*/
        color:pink;
        /*字体大小没有冲突，不会被覆盖，仍被设置为20px*/
        font-size:20px;
    }
    div{
        color:red
    }
</style>

2.继承性

CSS中子标签会继承父标签的某些样式（主要是文字的属性，不是所有样式），如文本颜色，字号等，恰当的使用继承会简化代码

行高的继承

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

行高可以跟单位也可以不跟单位，不带单位时，表示子元素行高为当前字体大小的倍数，例如，1.5，即文字大小的1.5倍

3.优先级

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

如果选择器相同则为层叠性
如果选择器不同，则根据选择器的权重执行

选择器	选择器权重
继承 ， *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式style=""	1，0，0，0
！important	无穷大

<style>
    div{
        /*!important最高权重*/
        color: #fff !important;
    }
</style>

PS：
1.权重是由4组数字组成，但是不会有进位
2.类选择器永远大于元素选择器，id选择器永远大与类选择器
3.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
4.a标签浏览器默认指定了一个样式，所以不会继承父元素样式

复合选择器权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重

<style>
     /*权重li=0,0,0,1*/
    li{
        color: #000;
    }
    /*权重计算ul+li=0,0,0,1+0,0,0,1=0,0,0,2*/
    ul li{
        color: #fff ;
    }
    /*权重计算.nav+li=0,0,1,0+0,0,0,1=0,0,1,1*/
    .nav li{
        color: red;
    }
</style>

（六）CSS的注释

/* 注释*/
/*
多行注释
*/

标签：repeat,color,元素,background,div,选择器,CSS
来源： https://www.cnblogs.com/Kongqingzhi/p/16548966.html