标签：repeat color 元素 background div 选择器 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。