美文网首页
前端入门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，复合选择器，显示模式，背景

    Emmet语法 Emmet语法可提高html/css的编写速度，VSCode内部已经集成了该语法； 快速生成Htm...

  • CSS相关---复合选择器

    第01阶段.前端基础 CSS 复合选择器 复合选择器后代选择器并集选择器 标签显示模式 CSS背景背景位置 CSS...

  • CSS：复合选择器 & 标签显示模式 & CSS 三大特性

    学习目标 复合选择器后代选择器并集选择器 标签显示模式 CSS 背景背景位置 CSS 三大特性优先级 1. CSS...

  • CSS-2

    1.复合选择器 2.emmet语法 3.背景色 背景图片 背景平铺 背景位置 背景相关属性连写 4.元素显...

  • 2022-02-03 CSS第二天

    emmet语法 CSS的复合选择器 后代选择器 子元素选择器 并集选择器 链接类选择器 focus伪类选择器 复合...

  • css笔记

    css布局 flex布局 总结： 1.复合选择器总结 元素显示模式 块级元素 行内元素 行内块元素 元素转换： 行...

  • web-4

    目录1 选择器进阶 (找到标签)2 背景相关属性3 元素显示模式4 CSS样式5 综合案例 一: 选择器进阶 1 ...

  • 2018-08-31 学习笔记3

    前端代码模板：Emmet Emmet 的使用 Emmet 的介绍 Emmet 的前身叫做：Zen Coding，也...

  • 前端学习之CSS——复合选择器

    1、什么是复合选择器？ 在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在...

  • 十一、CSS复合选择器

    一、CSS的复合选择器 1.1、什么是复合选择器 在CSS中，可以根据选择器的类型把选择器分为和，复合选择器是建立...

网友评论

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

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

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

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

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

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

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

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