CSS第二节：Emmet语法+CSS的复合选择器+CSS元素选择模式+CSS背景

最新推荐文章于 2024-07-08 23:31:51 发布
最新推荐文章于 2024-07-08 23:31:51 发布
阅读量324 收藏 1
点赞数
分类专栏： HTML5+CSS3 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56600567/article/details/125967238
版权

文章目录

上一章

Emmet语法

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

  1. 快速生成HTML结构语法
  2. 快速生成CSS样式语法

快速生成HTML结构语法

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

快速生成CSS样式语法

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

  1. 比如 w200 按tab 可以 生成 width: 200px;
  2. 比如 lh26px 按tab 可以生成 line-height: 26px;

快速格式化代码

Vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
1）文件 ------.>【首选项】---------->【设置】；
2）搜索emmet.include;
3）在settings.json下的【工作区设置】中添加以下语句：
“editor.formatOnType”: true，
“editor.formatOnSave”: true

CSS 的复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素（标签）
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

在这里插入图片描述

后代选择器

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。

语法

元素1 元素2 { 样式声明 }
  • 元素1和元素2之间用空格隔开
  • 元素1和元素2可以是任意的基础选择器

语法解释

选择元素1中所有的元素2，并将元素2选择器包含的内容按照样式声明进行外观或者布局的改变。
其中，元素2只需要在元素1中出现即可

实例

<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>

<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>

在这里插入图片描述

子选择器

子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

语法

元素1 > 元素2{样式声明}
  • 元素1和元素2之间用大括号隔开
  • 元素1和元素2可以是任意的基础选择器
  • 元素2必须是元素1的亲儿子

语法解释

选择元素1的儿子元素2，对元素2包含的部分按照样式声明进行外观或者布局的改变。

实例

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

在这里插入图片描述

并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明

语法

元素1,元素2 { 样式声明 }
  • 元素1和元素2之间用逗号隔开
  • 元素1和元素2可以是任意的基础选择器
  • 可以有N个元素

语法解释

选择元素1，元素2，将他们按照样式声明进行布局或者外观的改变。

实例

<html>
<head>
<style>
h1, h3, h5{color:blue;}
</style>
</head>

<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<h5>这是 heading 5</h5>
<h6>这是 heading 6</h6>
</body>
</html>

在这里插入图片描述

:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

语法

input:focus {样式声明}
  • 针对input类表单

语法解释

当鼠标点击到对应的input框中时，就会有相应的样式变化
鼠标移开后，就不会有变化了

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
input:focus
{
	background-color:yellow;
}
</style>
</head>
<body>

<p>点击文本输入框表单可以看到黄色背景:</p>

<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>

<p><b>注意:</b>  :focus 作用于 IE8,DOCTYPE 必须已声明</p>

</body>
</html>

在这里插入图片描述

CSS的元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示

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

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

在这里插入图片描述

块元素

块级元素的一些例子：
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

块级元素的特点：
① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。

注意： 
* 文字类的元素内不能使用块级元素
* <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div> 
*  同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

行内元素的一些例子：
<span>
<a>
<img>

行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。

注意： 
* 链接里面不能再放链接
* 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

行内块元素

行内块元素的一些例子
<img >
<input >
<td>

行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）

显示模块转化

模式转换：
display:inline;	#转化为行内元素
display: block;	#转化为块内元素
display:inline-block;	#转化为行内块元素

<!DOCTYPE html>
<html>

<head>
    <style>
        a {
            width: 300px;
            height: 50px;
            background-color: aqua;
            display: block;
        }
    </style>
</head>

<body>
    <p>行内元素a--->块级元素：</p>
        <a href="/html/default.asp" target="_blank">HTML</a>
        <br>
        <a href="/css/default.asp" target="_blank">CSS</a>
        <br>
        <a href="/js/default.asp" target="_blank">JavaScript</a>
</body>

</html>

在这里插入图片描述

综合案例：简洁版小米侧边栏

案例的核心思路分为两步:

  1. 把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度.
  2. 鼠标经过a 给 链接设置背景颜色
<!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--->块级元素 */
        a {
            display: block;
            width: 300px;
            height: 40px;
            font-size: 15px;
            background-color: rgba(29, 29, 30, 0.852);
            color: white;
            /* 删除下划线 */
            text-decoration: none;
            /* 设置文字的位置：为了让文字在合适的位置 */
            text-indent: 2em;
            line-height: 40px;
        }
        /* 鼠标经过块内，变换块的背景颜色 */
        a:hover {
            background-color: rgba(206, 217, 80, 0.788);
        }
    </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>

在这里插入图片描述

CSS的背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

背景颜色

background-color 属性指定元素的背景色。

语法：

background-color:颜色值;

一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。

通过 CSS，颜色通常由以下方式指定：

  • 有效的颜色名称 - 比如 “red”
  • 十六进制值 - 比如 “#ff0000”
  • RGB 值 - 比如 “rgb(255,0,0)”
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color 实例</h1>

<div>
这是 div 元素内的文本。
<p>本段有其自己的背景色。</p>
我们仍然在 div 元素中。
</div>

</body>
</html>

在这里插入图片描述

补充：透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

在这里插入图片描述
注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用 RGBA 的透明度

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

在这里插入图片描述

实例

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>
<h1>透明框</h1>

<p>使用 opacity：</p>
<div style="opacity:0.1;">
	<h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
	<h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
	<h1>60% opacity</h1>
</div>
<div>
	<h1>opacity 1</h1>
</div>
<p>使用 RGBA 颜色值：</p>
<div class="first">
	<h1>10% opacity</h1>
</div>
<div class="second">
	<h1>30% opacity</h1>
</div>
<div class="third">
	<h1>60% opacity</h1>
</div>
<div>
	<h1>默认</h1>
</div>
</body>
</html>

在这里插入图片描述

背景图像

background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

在这里插入图片描述

实例

  • images/logo.png
    请添加图片描述
<style>
        div {
            width: 300px;
            height: 300px;
            /* 不要落下 url()   */
            background-image: url(images/logo.png);
        }
    </style>

xiaoguo:
在这里插入图片描述

图像平铺

background-repeat 属性设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

在这里插入图片描述

背景图像的位置

background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像（由 background-image 定义）的位置

提示：您需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

语法：

background-position: 参数;

参数表：
在这里插入图片描述

背景图像固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

值：
在这里插入图片描述

芒着可爱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器、CSS级联、CSS继承
Conely的博客
08-19 366
基本选择器 *{} 普通选择器 #id id选择器 .class 类选择器 div{} 标签选择器 组合选择器 #one,.two,div{} 嵌套选择器 div#one.two{} 后代选择器 空格 后代 子代 下一个兄弟 ~ 之后所有的兄弟 属性选择器 [attr] 有attr属性名的 [attr=val] 有attr属性并且值是val [attr^=val] 有attr属性并且以val开头 [attr$=val] 有a
CSS基础与CSS选择器
qq_47416353的博客
07-25 232
CSS基础、CSS选择器大全
CSS学习笔记2：Emmet语法、复合选择器、元素显示样式、背景属性等
m0_73560798的博客
08-04 116
1、这里简单总结一下快速生成HTML语法的快捷键： 2、快速生成CSS语法的快捷键：可以直接缩写再按tab键,例如w500=width: 500px;3、自动格式化代码，可以去vscode的设置里面打开下图两个选项：语法： 实例： 若只想把ul中的li标签变成红色，a标签变成绿色，显然用标签选择器无法做到，用类选择器又太繁琐，这时我们可以用后代选择器。空格是后代选择器的最明显标志。 若此时有两个ul标签，但是只想选择第一个ul标签中的li和a，该怎么办呢此时只需要给第一个ul加上类名，clas
CSS第二天总结——emmet语法、CSS的复合选择器、CSS的显示模式、CSS的背景
m0_55879104的博客
05-18 124
一、emmet语法 1、简介 ​ Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。 ​ 快速生成HTML结构语法 ​ 快速生成CSS样式语法 2、快速生成HTML结构语法 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div 如果有父子级关系的标签，可以用 > 比如 ul
CSS学习中EMMET语法、复合选择器、元素选择模式、以及背景的一些总结
11-04
在CSS的学习过程中，掌握EMMET语法、复合选择器、元素选择模式以及背景的设定是非常重要的。下面将分别对这些知识点进行详细的阐述。 首先，EMMET（前身为Zen Coding）是一种高效的HTML和CSS代码编写工具，它能显著...
CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性
12-05
CSS基础-选择器进阶+背景属性+元素显示模式+三大特性 CSS基础选择器进阶： 在CSS中，选择器是用于选择HTML元素并应用样式的核心机制。选择器进阶是指在基础选择器的基础上，进一步学习和应用选择器的高级规则和...
CSS学习第2天总结.pdf
10-11
【CSS学习第2天总结】 在CSS的学习过程中，掌握高效的编码工具和选择器的使用是提升效率的关键。Emmet语法是HTML和CSS开发中的一个重要工具，它可以极大地加速HTML结构和CSS样式的编写。 1. Emmet语法： - Emmet...
css.vim：[不建议使用]
02-02
3. **整合性**：一些现代的 IDE 和编辑器集成了更强大的 CSS 配套工具，如 Sublime Text 的 Emmet 或 VSCode 的 CSS IntelliSense。 **替代方案** 1. **Vim-HTML5**：这个插件通常会包含对 CSS 的支持，因为它会...
language-css：AtomCSS包
01-30
1. **语法高亮**：`language-css`包能准确识别并高亮CSS中的关键字、选择器、属性和值，使代码更易读，有助于开发者快速定位和理解代码。 2. **代码片段（Snippets）**：通过预定义的代码片段，开发者可以快速输入...
CSS里的几个小知识
07-08 202
在 中，rel=“stylesheet” 表示被链接的文档（即 mystyle.css）是一个样式表（style sheet），用于为当前页面提供样式定义。在 HTML 中，用于指定链接指向的资源地址。标签的属性，可以帮助搜索引擎更好地理解和索引网页，优化页面在不同设备上的显示，以及实现一些特定的功能，如自动刷新、设置字符集等。1、“rel” 是 “relation” 或 “relationship” 的缩写，意思是“关系；在 HTML 中， 标签的 rel 属性用于定义当前文档与被链接文档之间的关系。
旋转木马案例
喵喵的博客
07-08 509
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
css使用伪元素after或者before的时候想要给after设置z-index无效
qq_49416650的博客
07-05 280
css使用伪元素after或者before的时候想要给after或者before设置一个层级关系，使该伪类写入的样式在box的下面，发现给box设置z-index无效，需要找到父级元素，在父级元素上设置z-index值并且将伪类设置z-index:-1。
微信小程序：rpx详解，使用 tailwindcss最佳方案rem转rpx
Z_Wonderful的博客
07-05 245
微信小程序：rpx详解，使用 tailwindcss最佳方案rem转rpx
如何在vue3中使用scss
最新发布
qq_74351687的博客
07-08 121
需要在vite.config.ts中配置一个全局配置。在src文件下新建一个文件夹叫做styles。variable.scss用来配置全局属性。index.scss主要用来引用其他文件。reset.scss用来清除默认的样式。要使用scss首先需要下载相关的包。可以在终端使用下面的命令下载相关包。在文件夹下创建三个文件。
如何使一个盒子水平垂直居中（常用的）
karlaofsky的博客
07-08 368
相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。//子元素宽度的一半。//子元素高度的一半。来直接减去盒子自身的50%大小。将盒子的上下左右定位全部设置为0，同时设置外边距自适应。
【前端从入门到精通：第六课：CSS常用基本属性(字体、文本、列表、背景、尺寸)】
weixin_50556117的博客
07-07 922
baseline： 把当前盒的基线与父级盒的基线对齐。contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。super： 把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）sub： 把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）text-bottom： 把当前盒的bottom和父级的内容区的bottom对齐。text-top： 把当前盒的top和父级的内容区的top对齐。
前端面试题25（css常用的预处理器）
God's asylum的博客
07-08 237
在前端开发领域，CSS预处理器在面试中经常被提及，其中最流行的三种预处理器是Sass、LESS和Stylus。
CSS Float（浮动）
07-05 381
CSS Float（浮动）是一种布局技术，它允许开发人员将元素（如图片或文本）沿着其容器的左侧或右侧放置，并且让其他内容围绕它流动。这种技术在过去被广泛用于创建多栏布局，尽管现代CSS提供了更多高级的布局方法（如Flexbox和Grid），但理解浮动仍然是很有价值的，因为它在许多现有网站和应用程序中仍然被使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值