锐单电子商城 , 一站式电子元器件采购平台!
  • 电话:400-990-0325

【前端】Emmet语法、CSS复合选择器、元素显示样式

时间:2023-01-26 22:30:00 5w200kr碳膜电阻

?? 信仰:当一个人走得很远的时候,他会忘记他为什么开始。我希望你不要忘记你的主动心态,不要随波逐流,继续前进
?? 欢迎关注点赞收藏留言
?? 本文由 程序喵在路上 原创,CSDN首发!
?? 系列专栏:HTML5 CSS3 移动端前端
?? 2022年7月9日
? 如果你得博主的文章还不错,希望朋友们三连支持。

阅读指南

  • ??学习目标
  • ??Emmet 语法
    • ? 快速生成 HTML 结构语法
    • ? 快速生成 CSS 样式语法
    • ? 快速格式化代码
  • ??CSS 复合选择器
    • ? 复合选择器是什么?
    • ? 后代选择器(重点)
    • ? 子选择器( 重点)
    • ? 并集选择器(重点)
    • ? 伪类选择器
    • ? 链接伪类选择器
    • ? :focus伪类选择器
    • ? 总结复合选择器
  • ??CSS 元素显示样式
    • ? 什么是元素显示模式
    • ? 块元素
    • ? 行内元素
    • ? 行内块元素
    • ? 总结元素显示模式
    • ? 转换元素显示模式
    • ? 案例:简单版小米侧栏
      • 目标
      • 核心思路
      • 让单行文字垂直居中
      • 源代码和效果图

??学习目标

? 能够使用 emmet 语法
? 能够使用 CSS 复合选择器
? 伪类选择器的使用规范可以写出来
? 有几种显示模式可以说出元素
? 能够写出元素显示模式的相互转换代码
? 背景图片的设置可以写出来
? 能够计算 CSS 的权重

??Emmet 语法

Emmet 语法的前身是 Zen coding,它使用缩写来改进 html/css 编写速度,Vscode 语法已经在内部集成

? 快速生成 HTML 结构语法

  1. 直接输入标签 enter 键或者 tab 比如 div 然后 tab 可以生成键
  2. 如果想要生成多个相同标签,加上 * 例如 div*3 它可以快速生成 3div
  3. 如果有父子关系的标签,可以使用 >,比如 ul>li 就可以了
  4. 如果有兄弟关系的标签,用 例如 div p
  5. 如果你想生成一个带有类名称或 id 直接写名字的标签 .demo 或者 #two tab 键就够了,默认是 div 标签;如果你想生成你想要的标签,你可以写 p.demospan#two 等等
  6. 若要生成 div 类名有序,可以使用自增符号 $ ,比如 div.demo$*3
  7. 如果你想在生成的标签中写内容,你可以使用它 {} 表示,比如 div{快速生成CSS样式语法} 然后按 enter 键或者 tab 按钮可以快速生成;如果你想一次生成多个,可以遵循 div{快速生成CSS样式语法}*3 写这样的格式;如果要生成多个自增标签,可以按照 div{demo$}*3 写这样的格式

在这里插入图片描述

? 快速生成 CSS 样式语法

CSS 基本采用简写形式

  1. 输入 w200 enter 键或者 tab 可以生成键 width: 200px;
  2. 输入 lh26px enter 键或者 tab 可以生成键 line-height: 26px;
  3. 输入 tac 就可以生成 text-align: center;
  4. 输入 ti2em 就可以生成 text-indent: 2em;
  5. 输入 h200 就可以生成 height: 200px;
  6. 输入 tdn 就可以生成 text-decoration: none;

? 快速格式化代码

IDEA 在里面,我们可以按 Ctrl Alt L 快捷键格式化我们的代码,让我们的代码看起来更漂亮;同样,Vscode 它还为我们提供了一种快速格式化代码的方您只需右击即可选择 “格式化文档” 或者按下 Shift Alt L 快捷键就够了


当我们保存页面时,也可以设置自动格式化代码,步骤如下

  1. 文件 ? 【首选】 【设置】
  2. 搜索 format
  3. 点击格式化列,然后将其放置 Format On SaveFormat On Type 可以勾选

具体步骤见下图

只需设置一次即可,以自动格式化代码

??CSS 复合选择器

? 复合选择器是什么?

CSS 在中间,选择器可以根据选择器的类型分为基本选择器和复合选择器。复合选择器是基于基本选择器组合的

● 目标元素(标签)可以更准确、更高效地选择复合选择器
● 复合选择器由两个或多个基本选择器以不同的方式组合而成
● 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪选择器等

? 后代选择器(重点)

后代选择器也被称为包含选择器,可以选择父元素中的子元素。它的写作方法是在前面写一个外部标签,在后面写一个内部标签,中间用空间分隔。当标签嵌套时,内部标签被称为外部标签的后代

语法格式如下

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

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

例如:

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

● 元素 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>复合选择器之后代选择器title>
    <style> /* 怎么把ol里面的小li选出来改变颜色呢 */ ol li { 
           color: red; } ol li a { 
           color: gold; } .nav li a { 
           color: pink; } 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>
    ul>
body>

html>

➥ 子选择器( 重点)

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素

语法格式如下

元素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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子选择器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 { 
         样式声明 }

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

例如:

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

● 元素 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>并集选择器title>
    <style> /* 1. 将熊大、熊二改为红色 */ /* div, p { color: red; } */ /* 2. 将熊大、熊二改为红色,吉吉国王、毛毛改为红色 */ div, p, .monkey li { 
           color: red; } style>
head>

<body>
    <div>熊大div>
    <p>熊二p>
    <span>光头强span>
    <ul class="monkey">
        <li>吉吉国王li>
        <li>毛毛li>
    ul>
body>

html>

➥ 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第 1 个,第 n 个元素

伪类选择器书写最大的特点是用冒号表示,比如 :hover:first-child

伪类选择器有很多,比如有链接伪类、结构伪类等

➥ 链接伪类选择器

语法格式如下

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>链接伪类选择器title>
    <style> /* 未访问过的链接 */ a:link { 
           color: #333; text-decoration: none; } /* 访问过的链接 */ a:visited { 
           color: red; } /* 选择鼠标经过的那个链接 */ a:hover { 
           color: skyblue; } /* 选择鼠标按下但还没有弹起的链接 */ a:active { 
           color: pink; } style>
head>

<body>
    <a href="#">夏目友人帐a><br>
    <a href="http://www.baidu.com" target="_blank">度娘a>
body>

html>


链接伪类选择器注意事项

  1. 为了确保生效,请按照 LVHA 的顺序声明 :link:visited:hover:active
  2. 记忆法:love hate 或者 lv 包包 hao
  3. 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式

链接伪类选择器实际工作开发中的写法

/* a 是标签选择器,所有的链接 */
a { 
        
	color: gray;
}
/* :hover 是链接伪类选择器,鼠标经过 */
a:hover { 
        
	color: red;	/* 鼠标经过的时候,由原来的灰色变成了红色 */
}

➥ :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素

焦点就是光标,一般情况 类表单元素才能获取,因为这个选择器也主要针对于表单元素来说

语法格式如下

input:focus { 
        
	background-color: yellow;
}
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>focus伪类选择器title>
    <style> input:focus { 
           background-color: skyblue; } style>
head>

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

html>

➥ 复合选择器总结

选择器 作用 特征 使用情况 隔开符号及其用法
后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格 .nav a
子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于号 .nav>p
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号 .nav, .header
链接伪类选择器 选择不同状态的链接 跟链接有关 较多 重点记住 a {}a:hover {} 实际开发的写法
:focus 选择器 选择获得光标的表单 跟表单有关 较少 input:focus 记住这个用法

🔯CSS 的元素显示样式

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

➥ 什么是元素显示模式

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

元素显示模式就是元素(标签)以什么方式进行显示,比如

让自己占一行,比如一行可以放多个

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

➥ 块元素

常见的块元素有

~

相关文章