前端与移动开发-----CSS（emmet 语法+CSS 复合选择器+元素的显示模式）

最新推荐文章于 2023-11-04 21:20:38 发布
最新推荐文章于 2023-11-04 21:20:38 发布
阅读量301 收藏
点赞数
分类专栏： 前端与移动开发学习笔记 css学习笔记 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40440961/article/details/109104380
版权
本文介绍了前端开发中的效率工具Emmet及其用于快速生成HTML结构和CSS样式的语法，包括设置宽高、快速样式等。此外，详细阐述了CSS选择器的用法，如后代选择器、子元素选择器、并集选择器、伪类选择器等，以及如何利用这些选择器进行元素定位和样式设置。内容涵盖了链接伪类、焦点伪类以及元素的显示模式转换，帮助开发者提升编码效率。
摘要由CSDN通过智能技术生成

css

emmet 语法 —— 开发效率

emmet 的特点和作用：通过简写提高编码效率。
emmet 生成 HTML 结构语法：
在这里插入图片描述
emmet 语法快速生成 css 样式：
1，常用属性大多用英文单词的首字母连写即可，示例如下：
tac → text-align: center;
ti2em → text-indent: 2em;
lh26px → line-height: 26px;
tdn → text-decoration: none;
2，设置宽高：
w100 → width: 100px;
h200 → height: 200px;
下面展示一些快速样式，便于大家理解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- p*5 -->
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <!-- ul>li*5 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- h1+div*5+h2+p*2 -->
    <h1></h1>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <h2></h2>
    <p></p>
    <p></p>
    <!-- .red -->
    <div class="red"></div>
    <!-- p.red -->
    <p class="red"></p>
    <!-- p.class -->
    <p class="class"></p>
    <!-- p$*2 -->
    <p1></p1>
    <p2></p2>
</body>
</html>

CSS 复合选择器

后代选择器
应用场景：可以选择父元素中的子元素
语法格式：选择器1 选择器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>
        .adv-selector ul li {
            color: yellowgreen;
        }

    </style>
</head>
<body>
    <h3>基础选择器</h3>
<div>
  <ul>
    <li>标签选择器</li>
    <li>类选择器</li>
    <li>id 选择器</li>
    <li>通配符选择器</li>
  </ul>
</div>
<h3>复合选择器</h3>
<div class="adv-selector">
  <ul>
    <li>后代选择器</li>
    <li>子代选择器</li>
    <li>并集选择器</li>
    <li>伪类选择器</li>
  </ul>
</div>
</body>
</html>

子元素选择器（亲儿子选择器）
应用场景：选择某个元素最近一级的子元素（亲儿子）
语法格式：选择器1 > 选择器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>
</head>
<body>
<div class="nav">
  <ul>
    <li><a href="#">百度</a></li>
    <li><a href="#">百度</a></li>
  </ul>
</div>
</body>
</html>

参考代码：

```html
<!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 ul li a {
 					 color: red;
		}
    </style>
</head>
<body>
<div class="nav">
  <ul>
    <li><a href="#">百度</a></li>
    <li><a href="#">百度</a></li>
  </ul>
</div>
</body>
</html>

并集选择器
应用场景：集体声明 —— 选择多组标签，同时设置相同的样式。
语法格式：

选择器1,
选择器2 {
  样式声明;
}

实例：
使用并集选择器把素材代码中的熊大、熊二和小猪一家改为粉色；

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

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之并集选择器</title>
    <style>
        /* 要求1: 请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }

        /* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 一定要注意,最后一个选择器 不需要加逗号 */
    </style>
</head>

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

链接伪类选择器
应用场景：针对链接的不同状态设置不同的样式
链接伪类选择器：
a:link -----选择所有未被访问的链接
a:visited ----选择所有已经被访问的链接
a:hover ----选择鼠标指针位于其上的链接
a:active ----选择激活链接（鼠标按下未抬起的链接
参考代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>复合选择器之链接伪类选择器</title>
    <style>

      /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
      a:link {
        color: #333;
        text-decoration: none;
      }

      /*2. a:visited 选择点击过的(访问过的)链接 */
      a:visited {
        color: orange;
      }

      /*3. a:hover 选择鼠标经过的那个链接 */
      a:hover {
        color: skyblue;
      }

      /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
      a:active {
        color: green;
      }
    </style>
  </head>
  <body>
    <a href="#">小猪佩奇</a>
    <a href="http//www.baid1512656165161ucom.com">未知的网站</a>
  </body>
</html>

链接伪类选择器的书写顺序要求：
link visited hover active
记忆:
(L)o(V)e (H)(A)t [爱与恨]
（L）(V)包包（H）(A)o

focus 伪类选择器

应用场景：
在表单中突出显示当前获得焦点的表单元素，提升用户体验
实例：把获得光标的input表单元素选取出来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>focus伪类选择器</title>
    <style>
        /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

复合选择器总结
在这里插入图片描述

元素的显示模式

元素显示模式：
元素以什么方式进行显示 HTML

块元素 —— block

块级元素特点：

  1. 独占一行
  2. 可以设置宽度、高度、外边距、边框和内边距
  3. 宽度默认是父级容器的宽度
  4. 可以存放其他行内元素和块级元素
    块级元素注意事项：
    开发时不要在文本类元素中添加其他元素，专注于文本存放（ h1~h6 、 p ）
    常见的块级元素：
    div 、 ul 、 ol 、 li 、 h1~h6 、 p
    实例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之块级元素</title>
    <style>
        div {
            /* width: 200px; */
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>比较霸道,自己独占一行</div> 瑟瑟发抖
    <p>
        <div>这里有问题</div>
    </p>
</body>
</html>

行内元素 —— inline

行内元素有特点：

  1. 相邻行内元素在一行显示，一行多个
  2. 给行内元素设置宽高是无效的
  3. 默认宽度是内容的宽度（被内容撑开）
  4. 只能容纳文本或其他行内元素
    行内元素注意事项：
    链接不能再放链接
    特殊情况的链接可以存放块级元素
    实例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之行内元素</title>
    <style>
        span {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <span>你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong>
    <span>老师</span> <strong>品如的衣服</strong>

    <a href="http://www.baidu.com">
        <a href=""></a>
    </a>
</body>
</html>

行内块元素 —— inline-block

行内块元素特点：

  1. 相邻行内元素在一行显示，一行多个（行内元素特点）
  2. 默认宽度就是本身内容的宽度（行内元素特点）
  3. 可以设置宽度、高度、外边距、边框和内边距（块级元素特点）
    实例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之行内块元素(特殊情况)</title>
    <style>
        input {
            width: 249px;
            height: 35px;
        }
    </style>
</head>

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

元素显示模式总结

在这里插入图片描述

显示模式的转换

显示模式转换的应用场景：
让行内元素具有宽高：把行内元素转换成块元素或者行内块元素
让块元素一行显示：把块元素转换成行内块元素
三种显示模式转换的代码：
display: block 转换为块元素
display: inline-block 转换为行内块元素
display: inline 转化为行内元素（使用较少）

实例：简单小米侧边栏

  1. HTML 素材
<a href="#">手机 电话卡</a> 
<a href="#">电视 盒子</a> 
<a href="#">笔记本 平板</a> 
<a href="#">出行 穿戴</a> 
<a href="#">智能 路由器</a> 
<a href="#">健康 儿童</a> 
<a href="#">耳机 音响</a>
  1. 尺寸： 230px * 40px
  2. 颜色： #555 / #f70
    效果图：
    在这里插入图片描述
    参考代码：
<!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>
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: gray;
            text-decoration: none;
            color: #ffffff;
            text-indent: 2em;
            line-height: 40px;
        }
        a:hover{
            background-color: #ff7700;
        }
    </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>

单行文字垂直居中 ：将 line-height 设置为盒子的高度。
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单行文字垂直居中</title>
    <style>
        div {
            width: 200px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>我要居中</div>
</body>
</html>

背景图片

背景颜色
一般情况下元素的背景颜色是transparent 透明的
背景图片
背景图片的应用场景：

  1. logo 2. 装饰图片 3. 超大图片 4. 精灵图（雪碧图）
    背景图片的优点：非常容易控制位置
    背景图片的语法:
background-image: none | url(url);

背景平铺
背景平铺 background-repeat 的属性：
在这里插入图片描述
背景位置-方位名词
background-position (背景位置)
方位名词：
水平方向： left / right / center 垂直方向： top / bottom / center
实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-方位名词</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* background-position:  方位名词; */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
            /* background-position: center right; */
            /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
            /* background-position: right; */
            /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
            background-position: top;
        }
    </style>
</head>

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

</html>

背景位置-精确单位
第一个值一定是 x / 第二个值一定是 y
背景位置-混合单位
第一个值一定是 x / 第二个值一定是 y

背景固定

背景固定的应用场景：可以制作视差滚动效果
background-attachment 有两个参数分别代表含义：
1，scroll 默认，背景图像跟随滚动
2，fixed 背景图像固定

背景属性复合写法

推荐顺序是： background: color image repeat attachment position

背景颜色半透明

background: rgba(0, 0, 0, 0.3);
rgba 中的 alpha 取值范围： 0 ~ 1 0 完全透明 / 1 完全不透明
背景总结
在这里插入图片描述
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！

東三城
关注
专栏目录
【前端学习笔记】移动web-黑马程序员学习笔记
张张张张张高高的博客
07-09 3467
该笔记是博主在b站学习的移动web-黑马程序员的学习笔记，记录自己的学习，资料均为免费获取，禁止商用。
css学习笔记-黑马程序员前端视频
张张张张张高高的博客
06-10 2221
以下是在b站上学习的黑马程序员的前端视频，记录一下学习笔记，用于自己复盘，有需要学习的可以去b站学习原版视频
【练习】emmet插件，京东移动端
weixin_40326021的博客
03-20 241
1.emmet插件 http://blog.csdn.net/JourneyWT/article/details/53839952 按照上面网站步骤装完，发现html+tab出不来html页面，但是meta:vp能出来，ul&gt;li*10可以出来，说明emmet已经装上了。 http://blog.csdn.net/sunshinegirl_7/article/details/49802...
黑马程序员前端基础笔记：CSS篇
wc2356772894的博客
06-20 1925
CSS使用
黑马程序员学web前端HTML学习笔记
Wddym的博客
05-04 867
学习笔记
CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性
12-05
CSS基础-选择器进阶+背景属性+元素显示模式+三大特性 CSS基础选择器进阶： 在CSS中，选择器是用于选择HTML元素并应用样式的核心机制。选择器进阶是指在基础选择器的基础上，进一步学习和应用选择器的高级规则和...
CSS学习中EMMET语法、复合选择器、元素选择模式、以及背景的一些总结
11-04
在CSS的学习过程中，掌握EMMET语法、复合选择器、元素选择模式以及背景的设定是非常重要的。下面将分别对这些知识点进行详细的阐述。 首先，EMMET（前身为Zen Coding）是一种高效的HTML和CSS代码编写工具，它能显著...
Emmet语法与CSS结构伪类详细介绍
最新发布
10-09
本文档介绍了Emmet的基础及其对于前端开发工作者效率...学习Emmet能够提升HTML和CSS开发工作的效率，并使CSS的选择与样式应用更为便捷灵活，请务必反复练习Emmet语法规则和常用的选择器命令来巩固相关知识和技术手法。
front-end CSS（2）Emmet语法/复合选择器/块与行内元素
小灯泡儿的博客
01-11 106
前端基础知识 CSS（2）
CSS学习中Emmet语法、复合选择器、元素显示模式、背景的一些总结
m0_58684942的博客
11-04 82
本人学习CSS的一些总结，大家有问题欢迎留言，一起学习一起进步哇
html教程课堂笔记（黑马程序员）
03-22
视频资料以及笔记代码（其实只有笔记资源）
黑马程序员JAVA WEB全笔记pdf
03-26
Javaweb基础全课程笔记，黑马程序员上课笔记，主要涉及前端 jsp和servlet等
黑马程序员web前端基础视频（2015）笔记【一】
qq_36513469的博客
02-21 194
link标签 引入DNS预先解析 引入网站icon图标 引入css样式 h1到h6标题标签 文档中最重要核心主题的文本 h1最好就一个 不然不利于搜索引擎 sublime/相同内核IDE 标签名+TAB自动生成对应标签 ctrl+回车 快速到下一行行首 ctrl+z 撤销 ctrl+/ 快速注释 home和end 到当行行首和行尾 cmd里dir的作用 显示当前路径的文件和...
黑马程序员学习笔记----Web前端基础知识
04-22 405
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------    04.22 在html中 空格它是不认为是空格的。因为当我们要写一个复杂的HTML的时候会有很多缩进. 有一个特殊的方式可以做到。。&nbsp： 非隔行的空格 标签的开始和结束 段落 显示大于和小于得
B 站黑马程序员 pink 老师前端课程学习笔记_02 CSS3
PancrasG的博客
01-13 1353
本篇博客为B站对应课程的学习笔记，跟实际视频ppt内容有一定差异，欢迎一起交流学习。 课程地址：https://www.bilibili.com/video/BV14J4114768?p=61
黑马前端笔记1--HTML（1）
weixin_51584115的博客
01-11 1818
【参考课程】黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程：b站课程链接 文章目录01 网页的相关概念02 常用浏览器及其内核03 Web标准04 HTML语法规范HTML标签关系05 基本结构标签基本标签结构06 vscode工具创建页面08 DOCTYPE和lang以及字符集的作用文档类型声明标签``页面语言lang字符集Character set**以上三个标签，在vscode中输入 ! 可自动生成**09 标签语义10 标题标签 01 网页的相关概念
前端学习笔记02-css
abc_123_cba_123的博客
01-22 2056
CSS引入方式选择器1.1标签选择器1.2类选择器1.3id 选择器1.4通配符选择器字体属性文本属性 引入方式 css的引入方式有三种，分别是：行内样式、内部样式、外部样式 1.行内样式表 行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式. 例：<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div> 2. 内部样式表 内部样式表（内嵌样式表）是写到htm
黑马程序员————学习笔记（第二天）
Jero的Blog专栏
05-13 631
 <span style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px; text-align:center; line-height:19px; margin:0px; padding:0px">——————————<span style="font-family:Verdana,Arial,Helv
JavaWeb(黑马程序员): 前端部分
studyForMokey的博客
02-22 1154
前端
Emmet语法与CSS复合选择器速成教程：提升开发效率
在CSS学习的第二天，主要探讨了Emmet语法和CSS的复合选择器，这两个主题对于提升开发效率至关重要。 首先，Emmet语法是一种在编写HTML和CSS时使用的简写和快捷输入技术。它的前身是Zencoding，被集成到Visual ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

東三城

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值