CSS 2 emmet语法复合选择器元素显示模式

「已注销」

已于 2022-02-21 16:17:50 修改

阅读量597

点赞数 1

分类专栏：笔记文章标签： css css3 前端

于 2022-01-23 23:22:58 首次发布

本文链接：https://blog.csdn.net/weixin_62302666/article/details/122650228

版权

笔记专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍Emmet语法的应用、CSS复合选择器的使用方法、元素显示模式的理解与转换、背景属性的设置技巧等内容，并通过实例帮助读者掌握这些核心知识点。

摘要由CSDN通过智能技术生成

Emmet语法

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

1.快速生成HTML结构语法

2.快速生成CSS样式语法

1.1快速生成HTML结构标签

例：

<body>
        <!-- ul>li*3    -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
        <!-- .nav -->
    <div class="nav"></div>
        <!-- #banner -->
    <div id="banner"></div>
        <!-- span.gray -->
    <span class="gray"></span>
        <!-- ul>li#two -->
    <ul>
        <li id="two"></li>
    </ul>
        <!-- ul>li.demo$*5 -->
    <ul>
        <li class="demo1"></li>
        <li class="demo2"></li>
        <li class="demo3"></li>
        <li class="demo4"></li>
        <li class="demo5"></li>
    </ul>
        <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>

1.2快速生成CSS样式语法

CSS基本采取简写形式即可(单词首字母+大小)

1.比如w200 按tab 可以生成 width：200px；

2.比如lh26 按tab 可以生成 line-height: 26px;

3.比如tac 按tab 可以生成 text-align:center;

CSS的复合选择器

1.1什么是复合选择器

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

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

1.2后代选择器（重要）

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

语法：

元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2（后代元素）

例如：

ul li { 样式声明 } /*选择ul里面所有的li标签元素*/

元素1和元素2中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器

    <style>
        ol li a {
            color: pink;
        }

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

<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是ol的孙子</a></li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">我是ol的孙子</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">我是ol的孙子</a></li>
    </ul>
</body>

1.3子选择器（重要）

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

语法：

元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有直接后代（子元素）元素2。

例如：

div > p { 样式声明 } /*选择div里面所有最近一级p标签元素*/

元素1和原宿2中间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其孙子、重孙之类都不归他管。你也可以叫他亲儿子选择器
元素1和元素2可以是任意基础选择器

1.4并集选择器（重要）

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

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

语法：

元素1 ，元素2 { 样式声明 }

上述语法表示选择元素1和元素2。

例如：

ul , div { 样式声明 } /* 选择ul和div标签元素*/

元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

   
 <!-- 要求：把熊大和熊二改成粉色，还有小猪一家改为粉色 -->
 <style>
        div,
        p,
        .pig li {
            color: pink;
        }
        /* 约定的语法规范，我们并集选择器喜欢竖着写 */
        /* 一定要注意，最后一个选择器不需要加逗号 */
    </style>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

1.5伪类选择器

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

伪类选择器最大的特点就是用冒号（:）表示，比如:hover

因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

1.6链接伪类选择器

1.7：focus伪类选择器

例：

    <style>
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

结果：（此时光标落在第三个表单上面，显示背景颜色为粉色，文字为红色）

1.8复合选择器总结

CSS的元素显示模式

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

1.什么是元素的显示模式

2.元素显示模式的分类

3.元素显示模式的转换

2.1什么是元素的显示模式

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

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

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

2.2块元素

2.3行内元素

2.3行内块元素

行内块元素中间有默认的间隙但是设置浮动就不会有了

2.4元素显示模式总结

2.5元素显示模式的转换

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

比如想要增加链接<a>的触发范围。

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

2.6一个小工具的使用snipaste

课堂案例：简洁版小米侧边栏

案例的核心思路分为两步：

1.把链接a转化为块元素，这样链接就可以单独占一行，并且有宽度和高度。

2.鼠标经过a给链接设置背景颜色

代码：

    <style>
        a {
            color: white;
            text-decoration: none;
            display: block;
            background-color: #3f3d3d;
            width: 286px;
            height: 54px;
            line-height: 54px;
            text-indent: 2em;
        }

        a:hover {
            background-color: #ff6700;
        }
    </style>

<body>
    <a href="https:www.baidu.com" target=" blank">手机 电话卡</a>
    <a href="https:www.baidu.com" target=" blank"> 电视 盒子</a>
    <a href="https:www.baidu.com" target=" blank">笔记本 平板</a>
    <a href="https:www.baidu.com" target=" blank">出行 穿戴</a>
    <a href="https:www.baidu.com" target=" blank">智能 路由器</a>
    <a href="https:www.baidu.com" target=" blank">健康 儿童</a>
    <a href="https:www.baidu.com" target=" blank">耳机 音响</a>
    <a href="https:www.baidu.com" target=" blank">生活 箱包</a>
</body>

2.8一个小技巧——单行文字垂直居中

让文字的行高等于盒子的高度，即可使单行文字垂直居中（详见上例）

height:54px;

line-height:54px;

原理：文字行高由上间隙、文字、下间隙组成，其中上下间隙相等，使行高等于盒子高度，就达到了中间文字的垂直居中。

CSS的背景

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

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

3.1背景颜色

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

background-color : 像素值；

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

3.2背景图片

3.3背景平铺

例1：如果直接插入背景图片，默认repeat平铺。

例2：

    <style>
        div {
            width: 500px;
            height: 500px;
            background-image: url(../jpgs/王者荣耀.png);
            /* 1.背景图片不平铺 */
            background-repeat: no-repeat;
        }
    </style>

<body>
    <div></div>
</body>

则：

例3：

    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: pink;
            background-image: url(../jpgs/王者荣耀.png);
            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认的情况下，背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3.沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4.沿着y轴平铺 */
            background-repeat: repeat-y;
        }
    </style>

<body>
    <div></div>
</body>

上例3做了些修改，增加了y轴平铺以及背景颜色。所以，页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

3.4背景图片位置

3.4.1.参数是方位名词

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

            /* background-position: 方位名词; */
            /* background-position: center right; */
            /* 如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系 */
            /* background-position: right center; */

            /* background-position: right; */
            /* 此时，水平一定是靠右侧对齐 第二个参数省略y轴是垂直居中显示的 */

            /* background-position: top; */
            /* 此时，第一个参数一定是top y轴 顶部对齐 第二个参数省略 x 轴是水平居中显示的 */

3.4.2.参数是精确单位

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

            /* background-position: 20px 50px; */
            /* 此时，图片距x轴20px，距y轴50px */
            /* background-position: 20px; */
            /* 此时，图片距x轴20px，y轴上默认垂直居中对齐 */

3.4.3.参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

3.5背景图像固定（背景附着）

默认情况下，background-attachment属性为scroll，即背景图像随内容滚动，要想设置背景图片固定，可以设置background-attachment:fixed ，达到视差滚动的效果

3.6背景复合写法

3.7背景颜色半透明

CSS3为我们提供了背景颜色半透明的效果。

3.8背景总结

综合案例：五彩导航

注意：图片中未显示。但需要实现鼠标经过背景图片变化

参考代码：

    <style>
        .nav a {
            color: white;
            text-decoration: none;
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            line-height: 48px;
            text-align: center;
        }

        .nav .bg1 {
            background-image: url(../jpgs/五彩导航酒红色5.png);
        }

        .nav .bg2 {
            background-image: url(../jpgs/五彩导航浅蓝色.png);
        }

        .nav .bg3 {
            background-image: url(../jpgs/五彩导航紫色3.png);
        }

        .nav .bg4 {
            background-image: url(../jpgs/五彩导航粉色4.png);
        }

        .nav .bg1:hover {
            background-image: url(../jpgs/五彩导航橙色.png);
        }

        .nav .bg2:hover {
            background-image: url(../jpgs/五彩导航绿色22.png);
        }

        .nav .bg3:hover {
            background-image: url(../jpgs/五彩导航深蓝色3.jpg);
        }

        .nav .bg4:hover {
            background-image: url(../jpgs/五彩导航酒红色5.png);
        }
    </style>

<body>
    <div class="nav">
        <a href="" class="bg1">五彩导航</a>
        <a href="" class="bg2">五彩导航</a>
        <a href="" class="bg3">五彩导航</a>
        <a href="" class="bg4">五彩导航</a>
    </div>
</body>

CSS的三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级

1.1层叠性

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

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

1.2继承性

特殊：

1.3优先级

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

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

选择器权重如下表所示。

优先级注意点：

权重是有4组数字组成，但是不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
等级判断为从左到右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法：通配符和继承权重为0，标签选择器权重为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，！important无穷大
继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都为0.

例：

    <style>
        #father {
            color: red !important;

        }

        p {
            color: pink;
        }
    </style>

<body>
    <div id="father">
        <p>你还是很好看</p>
    </div>
</body>    
        //此时，p标签的颜色仍然是粉色，因为即使!important权重为无穷，但p标签继承权重为0
        //所以我们以后看标签到底执行哪个样式，就先看这个标签有没有直接被选出来

特殊：

//a链接浏览器默认制定了一个样式 蓝色的 有下划线 a{color：blue；}

因此a链接不继承body标签

CSS 2 emmet语法 复合选择器 元素显示模式

Emmet语法

1.1快速生成HTML结构标签

1.2快速生成CSS样式语法

CSS的复合选择器

1.1什么是复合选择器

1.2后代选择器（重要）

1.3子选择器（重要）

1.4并集选择器（重要）

1.5伪类选择器

1.6链接伪类选择器

1.7：focus伪类选择器

1.8复合选择器总结

CSS的元素显示模式

2.1什么是元素的显示模式

2.2块元素

2.3行内元素

2.3行内块元素

2.4元素显示模式总结

2.5元素显示模式的转换

2.6一个小工具的使用snipaste

课堂案例：简洁版小米侧边栏

2.8一个小技巧——单行文字垂直居中

CSS的背景

3.1背景颜色

3.2背景图片

3.3背景平铺

3.4背景图片位置

3.4.1.参数是方位名词

3.4.2.参数是精确单位

3.4.3.参数是混合单位

3.5背景图像固定（背景附着）

3.6背景复合写法

3.7背景颜色半透明

3.8背景总结

综合案例：五彩导航

CSS的三大特性

1.1层叠性

1.2继承性

1.3优先级

CSS的注释

CSS 2 emmet语法复合选择器元素显示模式