美文网首页
前端入门03 -- Emmet，复合选择器，显示模式，背景

前端入门03 -- Emmet，复合选择器，显示模式，背景

作者: YanZi_33 | 来源:发表于2021-12-17 16:40 被阅读0次
    Emmet语法
    • Emmet语法可提高html/css的编写速度，VSCode内部已经集成了该语法；
    • 快速生成Html结构语法：
      • 生成标签，直接输入标签名 按tab键，例如输入div 然后按下tab键，就可以生成<div></div>标签；
      • 若想生成多个相同的标签，输入div*3 然后按下tab键；
      • 若有父子级关系的标签，可以用> 例如 ul>li；
      • 若有兄弟级关系的标签，可以用+ 例如div+p；
      • 若生成带有类名或者id名字的，直接写p.demo或者p#two 然后按下tab键；
      • 若生成的div类名是有顺序的，可以使用自增符号$；
      • 若想要在生成的标签内部写内容可使用{}；
    • 快速生成CSS结构语法：
      • 写属性中的各首字母，然后按下tab键；
    • 格式化代码：
      • VSCode快速格式化代码：shift + alt + f
      • 设置Command+S保存时，自动格式化代码，操作如下：
        image.png
    Snip20211222_37.png 
    "editor.formatOnType" : true
"editor.formatOnSave" : true
    • ul>li*5>a：表示ul中包含5个li，li中包含5个a标签；
    • 批量设置属性值 shift + alt + 向下拖动 然后输入数据内容；
    复合选择器
    • 复合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的；
    • 复合选择器可更精准，更高效的选择目标标签；
    • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；
    • 复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等；
    • 后代选择器：又称包含选择器，可以选择父元素里面的子元素，其语法就是把外层标签写在前面，内部标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就称为外层标签的后代；
    • 语法格式：
    元素1 元素2 {
   color: red;
}
    • 选取元素1中的所有元素2，设置样式；
    • 元素1与元素2以空格隔开；
    • 元素1是父级，元素2是子级，最终选择的是元素2；
    • 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可；
    • 元素1 元素2 可以是任意基础选择器；
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 将ol中li选取出来 */
        
        ol li {
            color: red;
        }
        
        ol li a {
            color: indigo;
        }
        
        ul li {
            color: green;
        }
        /* 将class=nav的ul中li中a选取出来 */
        
        .nav li a {
            color: yellow;
        }
    </style>

</head>

<body>
    <ol>
        <li>ssssd</li>
        <li>ssssd</li>
        <li>ssssd</li>
        <li>
            <a href="#">我是孙子</a>
        </li>
    </ol>
    <ul>
        <li>中国是多少</li>
        <li>中国是多少</li>
        <li>中国是多少</li>
        <li>中国是多少</li>
    </ul>
    <ul class="nav">
        <li>中国是多少</li>
        <li>中国是多少</li>
        <li>中国是多少</li>
        <li>
            <a href="#">的身份和颠三倒四</a>
        </li>
    </ul>
</body>

</html>
    • 子选择器：只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素，其语法格式如下：
    元素1>元素2 {
    color: red;
}
    • 元素1与元素2之间用大于号隔开；
    • 元素1是父级 元素2是子级，最终选择的是元素2；
    • 元素2必须是亲儿子；
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>
    • 并集选择器：可以选择多组标签，同时为它们定义相同的样式，其语法格式如下：
    元素1,元素2 {
  color: red;
}
    • 元素1与元素2之间以逗号隔开；
    • 同时设置元素1与元素2的样式；
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div,
        p,
        .pig li {
            color: red;
        }
    </style>

</head>

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

</html>
    • 伪类选择器：用于给某些选择器添加特殊效果；
    • 链接伪类选择器：
      • a:link：选择所有未被访问的链接；
      • a:visited：选择所有已被访问的链接；
      • a:hover：选择鼠标指针位于其上的链接；
      • a:active：选择活动链接(鼠标按下未弹起的链接)；
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 未访问的链接*/
        
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* 已被访问的链接*/
        
        a:visited {
            color: yellow;
        }
        /* 鼠标指针位于其上的链接*/
        
        a:hover {
            color: skyblue;
        }
        /* 鼠标按下未弹起的链接*/
        
        a:active {
            color: green;
        }
    </style>

</head>

<body>
    <a href="#">西游记</a>
</body>

</html>
    • 为了确保链接伪类能生效，请按照link->visited->hover->active的顺序编写；
    • 链接a标签默认是有样式的，需要单独设置样式；
    • foucus伪类选择器：用于选取 获取焦点的表单元素，焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对于表格元素来说；
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

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

</head>

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

</html>
    • 总结：
    image.png
    元素的显示模式 -- 元素类型
    • 元素的显示模式：元素标签以什么方式进行显示，例如div标签独占一行；
    • Html元素一般分为块元素和行内元素两种类型；
    • 块元素：常见的块元素有h1-h6，p，div，ul，ol，li等等，其特点如下：
      • 独占一行；
      • 高度，宽度，外边距以及内边距都可以控制；
      • 宽度默认是容器(父标签的宽度的)100%；
      • 是一个容器及盒子，里面可以放行内元素或块元素；
      • 文字类的元素内不能使用块元素，例如h1-h6和p标签放文字，不能放块元素；
    • 行内元素：常见的行内元素有a，strong，b，em，i，del，s，ins，u，span等等，也可称为内联元素，其特点如下：
      • 相邻行内元素在一行上，一行可以显示多个；
      • 高，宽直接设置是无效的；
      • 默认宽度就是本身内容的宽度；
      • 行内元素只能容纳文本或其他行内元素；
      • a标签中不能再放a标签；
      • 特殊情况链接a标签里面可以放块级元素，但是给a标签转换一下块级模式最安全；
    • 行内块元素：在行内元素中有几个特殊的标签，img，input，td，button，它们同时具有块元素和行元素的特点，可称之为行内块元素，其特点如下：
      • 和相邻行内元素在一行上，但是它们之间默认会有空白的间隙，一行可以显示多个(行内元素特点)；
      • 默认宽度就是本身内容的宽度(行内元素特点)；
      • 高度，行高，外边距以及内边距都可以控制(块元素特点)；
    • 总结：
    image.png
    • 元素显示模式的转换：一个模式的元素需要另外一种模式的特性，例如想要增加a标签的触发范围；
    • 转换为块元素：display: block
    • 转换为行内元素：display: inline
    • 转换为行内块元素：display: inline-block 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 行内元素转换为块元素 */
            display: block;
        }
        
        div {
            width: 300px;
            height: 100px;
            background-color: red;
            /* 块元素转换为行内元素 */
            display: inline;
        }
        
        span {
            width: 300px;
            height: 30px;
            background-color: green;
            /* 行内元素转换为行内块元素 */
            display: inline-block;
        }
    </style>

</head>

<body>
    <a href="http:www.baidu.com">前往百度</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>

    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>

</body>

</html>
    • 小米左侧边栏的案例实现：
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        a {
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
            /* 行内元素转块元素 */
            display: block;
        }
        
        a:hover {
            /* 鼠标经过 背景颜色发生变化 */
            background-color: #ff6700;
        }
    </style>

</head>

<body>

    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>

</body>

</html>
    • 效果图如下：
    image.png
    • 单行文字垂直居中显示：让文字的行高等于盒子的高度，原理在于行高 = 上间距+文字高度+下间距；
    背景
    • CSS通过背景属性可以设置标签的背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等等；
    • 背景颜色：属性background-color，一般情况下标签的背景颜色默认为transparent(透明的)；
    • 背景图片：属性background-image，可设置标签的背景图片，常见于logo或者超大的背景图片，可非常便于控制位置，默认值为none；
    image.png
    • 背景平铺：属性background-repeat，默认值为repeat；
      • 标签可以设置背景颜色，也可设置背景图片，背景颜色在最下面；
    image.png
    • 背景图片位置：属性background-position，可以设置图片在标签中位置，参数有x与y表示坐标，其坐标值可以是方位名词也可以是精确单位；
    • 参数值为方位名词：center，top，left，right，bottom；
      • 两个方位名词参数的前后顺序无关；
      • 若只指定了一个方位名词，那么第二个默认为居中对齐；
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ai {
            width: 300px;
            height: 300px;
            background-color: orange;
            background-image: url("180.png");
            background-repeat: no-repeat;
            background-position: center top;
        }
        
        .ci {
            width: 150px;
            height: 40px;
            background-color: green;
            line-height: 40px;
            background-image: url("circle.png");
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 2.5em;
        }
    </style>
</head>

<body>
    <div class="ai"></div>
    <div class="ci">我爱新中国</div>
</body>

</html>
    • 效果图如下：
    image.png
    • 参数值为精确坐标值：设置X轴坐标与Y轴坐标；
      • 精确坐标值，第一个肯定是X轴坐标，第二个是Y轴坐标；
      • 若只设定一个值，那么该值一定是X轴坐标，另一个默认垂直居中；
    • 参数值为混合单位：即方位名词与精确数值之间的混合；
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ai {
            width: 300px;
            height: 300px;
            background-color: orange;
            background-image: url("180.png");
            background-repeat: no-repeat;
            /* 精确数值 */
            background-position: 20px 40px;
        }
        
        .ci {
            width: 150px;
            height: 40px;
            background-color: green;
            line-height: 40px;
            background-image: url("circle.png");
            background-repeat: no-repeat;
            /* 混合单位 */
            background-position: 3px center;
            text-indent: 2.5em;
        }
    </style>
</head>

<body>
    <div class="ai"></div>
    <div class="ci">我爱新中国</div>
</body>

</html>
    • 背景固定：属性background-attachment，可控制背景图像是否固定或者随着页面的其余部分滚动，可实现视差滚动的效果；
    image.png 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ai {
            width: 300px;
            height: 300px;
            background-color: orange;
            background-image: url("180.png");
            background-repeat: no-repeat;
            /* 精确数值 */
            background-position: 20px 40px;
            /* 背景图片固定住 */
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <div class="ai"></div>
</body>

</html>
    • 背景属性的复合写法：background: 背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ai {
            width: 300px;
            height: 300px;
            /* background-color: orange;
            background-image: url("180.png");
            background-repeat: no-repeat; */
            /* 精确数值 */
            /* background-position: 20px 40px; */
            /* 背景图片固定住 */
            /* background-attachment: fixed; */
            /* 背景的复合写法 */
            background: orange url("180.png") no-repeat fixed 20px 40px;
        }
    </style>
</head>

<body>
    <div class="ai"></div>
</body>

</html>
    • 背景颜色半透明：background-color: rgb(0, 0, 0, 0.1) 背景颜色设置alpha参数即可；
      • 是CSS3新增的属性，IE+9版本浏览器才支持的；
    • 总结：
    image.png
    CSS的三大特性
    • 三大特性分别为：层叠性，继承性与优先级；
    • 层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式；
      • 样式冲突，遵循的原则是就近原则，哪个样式离结构越近，就执行哪个样式；
      • 样式不冲突，不会发生层叠；
    • 继承性：子标签会继承父标签的某些样式，比如文本的颜色和字号，简单理解就是：子承父业；
      • 子标签可以继承父标签的样式主要是跟文本相关的，例如text-，font-，line-这些元素开头的可以继承，以及color属性；
      • 行高的继承：行高可以跟单位，也可以不跟单位，跟单位表示实际行高，不跟单位表示当前标签文字大小的倍数作为行高；
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            color: red;
            font: 20px/1.5 Arial;
        }
        div {
            /* 子标签继承父元素body的行高的1.5 */
            /* 此1.5 就是当前标签文字大小的1.5倍 即14*1.5=21 */
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>的富可敌国地方</div>
    <p>稻盛和夫考试的分数</p>
    <ul>
        <!-- li会继承ul的行高，ul继承body的行高  -->
        <!-- 所以li继承body的行高 = 20 * 1.5 =18 -->
        <li>我的行高是多少</li>
    </ul>
</body>
</html>
    • 优先级：当同一个元素标签指定多个选择器，就会有优先级的产生；
      • 选择器相同，则执行层叠性；
      • 选择器不同，则根据选择器的权重执行，
      • 选择器的权重如下所示：
    image.png 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            /** !important 权重是最高的*/
            color: red!important
        }
        
        .text {
            color: green;
        }
    </style>
</head>

<body>
    <div class="text">的富可敌国地方</div>
</body>

</html>
    • 权重叠加：复合选择器会有权重叠加的问题，需要计算权重；
    • div ul li：0003；
    • .nav ul li：0012；
    • a:hover：0011，a是元素选择器，hover是伪类选择器；
    • .nav a：0011；
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /** li的权重为0001 */
        
        li {
            color: red;
        }
        /** ul中的li的权重为 0001+0001=0002 */
        
        ul li {
            color: green;
        }
        /** ul中的li的权重为 0010+0001=0011 */
        
        .nav li {
            color: hotpink;
        }
    </style>
</head>

<body>
</body>
<ul class="nav">
    <li>似懂非懂上课</li>
    <li>风打底衫</li>
    <li>行高水淀粉</li>
    <li>返回都看过的</li>
    <li>黄金分割了科菲迪斯</li>
</ul>
</html>

    相关文章

      网友评论

          本文标题：前端入门03 -- Emmet，复合选择器，显示模式，背景

          本文链接：https://www.haomeiwen.com/subject/orfifrtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|前端入门03 -- Emmet，复合选择器，显示模式，背景|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！