②css之Emmet语法、复合选择器、元素显示模式、背景图片

最新推荐文章于 2024-06-12 12:52:53 发布

煤气罐罐202

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量236

点赞数

分类专栏： HTML5+CSS 文章标签： html5 css html

本文链接：https://blog.csdn.net/LINZHONG21/article/details/120633079

版权

1.Emmet语法

1.1快速生成HTML结构语法

生成标签直接输入标签名按tab键即可比如div 然后tab键，就可以生成< div> </ div>
如果想要生成多个相同标签加上就可以了比如div3 就可以快速生成3个div
如果有父子级关系的标签,可以用 > 比如ul > li就可以了
如果有兄弟关系的标签,用+就可以了比如div+p
如果生成带有类名或者id名字的，直接写.demo, 或者#two tab 键就可以了
如果生成的div类名是有顺序的,可以用自增符号$
如果想要在生成的标签内部写内容可以用{}表示

1.2快速生成CSS样式语法

CSS基本采取简写形式即可.

比如 w200 按 tab可以生成 width: 200px;
比如 Ih26 按 tab 可以生成 line-height: 26px;

1.3快速格式化代码

Vscode快速格式化代码: shift+alt+f
也可以设置当我们保存页面的时候自动格式化代码:
1 )文件------> [首选项] ------>[设置] ;
2 )搜索emmet.include;
3 )在settings.json下的【用户】中添加以下语句:
" editor.formatOnType": true,
"editor.formatOnSave*: true
只需要设置一次即可,以后都可以自动保存格式化代码

2.CSS的复合选择器

1.1什么是复合选择器

在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
●复合选择器可以更准确、更高效的选择目标元素(标签)
●复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
●常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

1.2后代选择器(重要)

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

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

上述语法表示选择元素1里面的所有元素2 (后代元素)。
例如:

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-后代选择器</title>
    <style>
        ol li {
     
            color: pink;
        }
        ol li a {
     
            color: red;
        }
        .nav li a {
     
            color: yellow;
        }
    </style>
</head>
<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
    </ul>
</body>
</html>

在这里插入图片描述

1.3子选择器(重要)

**子元素选择器(子选择器)**只能选择作为某元索的最近一级子元素。简单理解就是选亲儿子元素.
语法:

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

上述语法表示选择元素1里面的所有直接后代(子元素)元素2。
例如:

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav>a {
     
            color: red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">我是儿子</a>
    </div>
    <p>
        <a href="#">我是孙子</a>
    </p>
</body>
</html>

在这里插入图片描述

1.4 开集选择器(重要)

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法:

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

上述语法表示选择元素1和元素2.
例如:

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

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

<!DOCTYPE html>
<html

最低0.47元/天解锁文章

煤气罐罐202

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
②css之Emmet语法、复合选择器、元素显示模式、背景图片

1.Emmet语法1.1快速生成HTML结构语法生成标签直接输入标签名按tab键即可比如div 然后tab键，就可以生成< div> </ div>如果想要生成多个相同标签加上就可以了比如div3 就可以快速生成3个div如果有父子级关系的标签,可以用 > 比如ul > li就可以了如果有兄弟关系的标签,用+就可以了比如div+p如果生成带有类名或者id名字的，直接写.demo, 或者#two tab 键就可以了如果生成的div类名是有顺序的,可以用自增符
复制链接

扫一扫