当前位置： 首页 > news >正文

CSS选择器的常见用法

news 文章来源：https://blog.csdn.net/m0_71690645/article/details/130582310 2025/4/19 14:20:01

 

目录

1、CSS编写方式

2.CSS选择器

1.标签选择器

2.类选择器

3.id选择器

4.后代选择器

3.CSS属性

CSS叫做"层叠样式表",作用就是装饰网页.类似于我们平时所说的化妆。

 

字体、大小、间距、颜色、位置、边框、背景等等统称为样式，用来描述一个网页。

 针对一个html的元素/标签，同时可以有很多组CSS样式，一个字体是一个样式，描述一个颜色也是一个样式。

1、CSS编写方式

CSS在进行编写的时候有三种引入方式：

1.内部样式，把CSS嵌入到HTML中，通过style标签

 

2.外部样式,把CSS写成一个单独的文件，通过HTML的link标签引入

创建一个CSS文件：

 

 通过link标签引入

3.内联样式：把CSS属性写到元素的style属性内

 

（一般来说，内联样式的优先级比较高，也比较方便）

2.CSS选择器

举个例子：

div:就是一个选择器，针对选择的内容进行属性设置

{}内：就是一些具体的CSS属性，描述各种样式。

好了，我们接下来详细说明一下CSS的几种常用选择器：

1.标签选择器

使用标签名，把页面中所有同名标签的元素全选中。

此时，我们选中了所有标签为div的元素，设置样式：

<body><div>陈宇</div><div>顾魏</div><div>琑儿</div><style>div{font-size: 23px;color: red;}</style>
</body>

 效果：

但是我们发现，这种选择器是有缺点的，无法针对某一个元素进行个性化设置。因此，我们引入了其他的选择器---类选择器以及id选择器。 

2.类选择器

通过创建一个类，实现很多属性。设置元素样式时，就可以直接使用这个类，达到想要的效果。

比如，我们创建了一个类one，在里面实现了设置颜色为绿色。元素陈宇调用这个类，将字体颜色设置成了绿色。

<!-- s调用class时,去掉. --><div class="one">陈宇</div><div>顾魏</div><div>琑儿</div><style>/* CSS类使用.开头 */.one{color: green;}div{color: red;font-size: 23px;}</style>

我们还可以创建多个类，实现不一样的样式。

<!-- s调用class时,去掉. --><div class="one">陈宇</div><div class="two">顾魏</div><div class="three">琑儿</div><style>/* CSS类使用.开头 */.one{color: green;}.two{color: red;}.three{color:yellow;}div{color: red;font-size: 23px;}

效果： 

在一个标签中，使用不同类：

 <div><span class="one">王</span><span class="two">一博</span></div>

 效果：

 

3.id选择器

id是这个元素的身份标识，我们使用id选择器可以将对应的元素设置样式

<div id="xiaozhan">肖战</div>
<style>/* id选择器使用#开头 */#xiaozhan{color: pink;}
}

效果： 

以上都为基础选择器

4.后代选择器

是多种基础选择器的综合，

 <div class="one"><h3>王一博</h3><h2>琑儿</h2></div><div class="two"><h3>肖战</h3></div><style>.one h3 {color: green;}.two h3{color:red;}</style>

 效果：

此时，先找实现的类的所有元素，再从这个类的后代（子标签/...）里查找指定的标签。

举例：

此时，我们的第一步就是找所有实现one这个类的元素，然后再从这些元素中查找标签为h3的元素，设置样式

 

3.CSS属性

常见的属性我们都可以在下面推荐的这个网站中找到：

CSS 参考手册 (w3school.com.cn) 

我们简单实现几个属性：

<div class="one">哈哈哈</div>
<div class="two">嘻嘻嘻</div>
<style>.one {/* 设置字体家族*/font-family: '宋体';/* 设置字体大小 */font-size: 28px;/* 设置字体粗细 (100-900)数字越大,字体越粗*/font-weight: 300;/* 设置文字样式 倾斜 */font-style:italic;}.two {color:red;/* 水平对齐 */text-align: center;/* 文本装饰 */text-decoration: line-through;}
</style>

 效果

  •  RGB

 光学三原色：Red Green Blue.

每个颜色，一个字节，8个比特位（0-255）

三种参数比例不同，展现的颜色也不同。

例如：（255,0,0)代表红色。

 

 除此之外，我们还可以通过十六进制来表示rgb:

一个十六进制的数字站4个比特位，一个字节就是两个十六进制的数字。所以位面可以用6个十六进制的数字来表示rgb。（每两个十六进制是一个分量）

转换成二进制就是1111 1111，0000 0000， 0000 0000，转换成十进制就是255 ，0，0.

注：如果每个分类的十六进制一样，就可以简写。比如：#AABBCC==>#ABC

  • 背景设置

1.设置背景颜色

background-color:

<div class="three">哭唧唧</div><style>.three{font-size: 50px;text-align: center;width: 400px;height: 600px;color: white;background-color:green;}</style>

效果：

 

2.设置背景图片：

background-image：

background-image: url(cy.png);

效果：

 

效果与我们想象的不同，这是由于，在默认情况下，图片是平铺的。就像我们的地砖一样。所以，为了美观，可以使用background-repeat禁止平铺。 

只需添加一行代码即可：background-repeat: no-repeat;

效果：

 

 3.设置背景大小：

background-size

如果发现图片不够背景大小，则使用background-size的cover，覆盖整个背景。

关于CSS的属性还有非常多，可以看上面给的链接，很全！！！ 

总结

CSS作为“层叠样式表”，可以通过实现多种样式，装饰一个网页，让网页变得更好看！！！

相关文章：

CSS选择器的常见用法

目录 1、CSS编写方式 2.CSS选择器 1.标签选择器 2.类选择器 3.id选择器 4.后代选择器 3.CSS属性 CSS叫做"层叠样式表",作用就是装饰网页.类似于我们平时所说的化妆。 字体、大小、间距、颜色、位置、边框、背景等等统称为样式&#xff0c;用来描述一个网页。 …...

编程日记 2023/5/14 6:28:01

Oracle EBS修改密码

FNDCPASS修改密码 用户名必须出现在FND_USER或FND_ORACLE_USERID表中。FNDCPASS实用程序和ALLRACLE功能是为应用程序用户/模式设计的。 对于FND_USER或FND_ORACLE_USERID中不存在的用户&#xff0c;可以使用alter命令更改密码。 查询用户是否存在FND_USER或FND_ORACLE_USERI…...

编程日记 2023/5/14 6:23:00

《花雕学AI》33：如何用XMind制作AI思维导图、鱼骨图和组织结构图

思维导图是一种有效的思维工具&#xff0c;它可以帮助我们整理信息&#xff0c;激发创意&#xff0c;提高效率。思维导图是一种以中心主题为核心&#xff0c;以分支结构为形式&#xff0c;以关键词和图像为内容的图形表示法。它可以让我们一目了然地看到知识的层次和逻辑&#…...

编程日记 2023/5/29 17:04:44

【rust】| 06——语言特性 | 所有权

系列文章目录 【rust】| 00——开发环境搭建 【rust】| 01——编译并运行第一个rust程序 【rust】| 02——语法基础 | 变量(不可变?)和常量 【rust】| 03——语法基础 | 数据类型 【rust】| 04——语法基础 | 函数 【rust】| 05——语法基础 | 流程控制 【rust】| 06——语言特…...

编程日记 2023/5/14 6:12:57

AUTOSAR入门

简介 AUTOSAR&#xff08;AUTomotive Open System ARchitecture&#xff09;是一种汽车软件架构标准&#xff0c;由德国大陆、博世、宝马等汽车及零部件制造商共同发起&#xff0c;拥有广泛的行业参与。其目标是为了解决汽车电子和软件系统日益复杂的问题&#xff0c;提高可重…...

编程日记 2023/5/14 6:07:55

运维高可用架构的 6 大常规方案

在介绍高可用架构的方案之前&#xff0c;先说一下什么是高可用架构&#xff0c;高可用架构应具备但不限于以下特征&#xff1a; 主从切换 很好理解&#xff0c;当其中一台机器的服务宕机后&#xff0c;对于服务调用者来说&#xff0c;能够迅速的切换到其他可用服务&#xff0c;…...

编程日记 2023/5/14 6:02:55

Java设计模式-桥接模式

简介 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构性设计模式&#xff0c;它的主要作用是将抽象部分和实现部分解耦&#xff0c;使它们可以独立变化而不会互相影响。桥接模式最早由GoF&#xff08;Gang of Four&#xff09;提出&#xff0c;在《设计模式》一书中…...

编程日记 2023/5/14 5:57:54

计及N-k安全约束的含光热电站电力系统优化调度模型【IEEE14节点、118节点】（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/5/14 5:52:53

欧拉函数详解

文章目录 欧拉函数定义性质计算公式求某个数欧拉函数值线性筛求区域内欧拉函数 欧拉函数 定义 在[1,n]的范围内所有与n互质的数字的个数。 我们用 φ ( n ) \varphi(n) φ(n)来表示数字n的欧拉函数的值&#xff0c;例如&#xff1a; φ ( 4 ) 2 \varphi(4)2 φ(4)2&#xf…...

编程日记 2023/5/14 5:47:52

手把手教你如何将安卓手机数据导入iPhone！【详解】

案例&#xff1a;安卓数据导入苹果手机 【大神们&#xff0c;刚换了新的苹果手机&#xff0c;原本的安卓手机数据怎么导入新手机&#xff1f;】 想要换用iPhone&#xff0c;但是又不想丢失安卓手机里的重要数据怎么办&#xff1f;如何将安卓手机数据导入iphone&#xff1f;本文…...

编程日记 2023/5/14 5:42:51

怎么轻松地搞定Win11系统备份任务？

“我是一个电脑小白&#xff0c;不是很懂电脑的一些操作。我刚买了一台新电脑&#xff0c;它装的是Win11系统&#xff0c;我害怕它出现什么问题&#xff0c;听朋友说可以通过备份的方法保护系统&#xff0c;这是真的吗&#xff1f;有谁知道该怎么进行Win11系统备份吗&#xff1…...

编程日记 2023/5/30 16:20:55

MySQL集群

目录 主从复制 主从复制流程&#xff1a; 为什么要有relay log中继日志&#xff1f; 为什么要有主从复制&#xff0c;好处&#xff1f; 实际生产环境中。如果对MySQL数据库的读写都在一台数据库服务器中操作&#xff0c;无论是再安全性、高可用性&#xff0c;还是高并发性等…...

编程日记 2023/5/14 5:32:44

关于Kerberos认证的一些攻击手法学习总结

Kerberos认证流程 前言 本文主要分享最近学习的关于域内Kerberos认证的一些攻击手法&#xff0c;以自我的理解为主&#xff0c;从原理理解切入到基本工具利用来阐述&#xff0c;个人的理解分析较为啰嗦&#xff0c;嫌太兀长的可以跳着看就好&#xff0c;还请各位谅解。如有错误…...

编程日记 2023/5/14 5:27:43

STL-deque容器

双端数组&#xff0c;可以对头端进行插入删除操作 deque 容器和 vecotr 容器有很多相似之处&#xff0c;比如&#xff1a; deque 容器也擅长在序列尾部添加或删除元素&#xff08;时间复杂度为O(1)&#xff09;&#xff0c;而不擅长在序列中间添加或删除元素。deque 容器也可…...

编程日记 2023/5/14 5:22:42

❤ go语言和java语言的优缺点

❤ go语言和java语言的优缺点对比 对比GOJAVA介绍Java是一种流行的面向对象的编程语言&#xff0c;它的语法类似于C&#xff0c;并且具有丰富的类库和工具。Java的可移植性很好&#xff0c;可以在多种平台上运行。Go是一种新兴的编程语言&#xff0c;它比Java更加简洁和易学&a…...

编程日记 2023/5/14 5:17:41

安全成就未来｜Fortinet Accelerate 2023·中国区巡展首站启幕

Fortinet Accelerate 2023中国区巡展 年度网络安全盛会 Fortinet Accelerate 2023中国区巡展&#xff0c;昨日在深圳拉开帷幕&#xff0c;开启15城巡展的“首城之站”。本年度巡展主题“安全成就未来”&#xff0c;Fortinet与中企通信、亚马逊云科技等生态合作伙伴&#xff0c…...

编程日记 2023/5/14 5:12:40

输入URL到显示界面的整个过程

以如下这个比较简单的网络拓扑模型作为例子&#xff0c;探究中间发生的整个过程&#xff1a; 1 HTTP 浏览器做的第一步工作就是要对 URL 进行解析&#xff0c;从而生成发送给 Web 服务器的请求信息。下图展示了一条长长的URL里各个元素代表什么&#xff1a; 所以整个长长的URL…...

编程日记 2023/5/14 5:07:39

BetaFlight飞控启动运行过程简介

BetaFlight飞控启动&运行过程简介 1. 源由2. 启动过程2.1 main&#xff08;主程序&#xff09;2.2 init &#xff08;初始化&#xff09;2.3 run 3. 任务调度3.1 任务定义3.2 scheduler (调度器) 4. 总结5. 参考资料6. 附录 -- 问题汇总6.1 Why desiredPeriodCycles is so …...

编程日记 2023/5/14 5:02:38

智能汽车实验二(视觉传感器标定)

实验二 视觉传感器标定&#xff08;实验报告&#xff09; 【实验目的】 1、了解开源图像处理库OpenCV的结构&#xff0c;掌握OpenCV的基本使用方法。 2、了解开源图像处理库OpenCV的基本模块功能&#xff0c;掌握常用图像处理方法。 3、掌握摄像机标定算法&#xff0c;学会使用…...

编程日记 2023/5/30 3:59:16

计算机网络：HTTP

目录 HTTP 是什么&#xff1f;HTTP 常见的状态码有哪些HTTP 常见字段有哪些参考资料 HTTP 是什么&#xff1f; HTTP 是超文本传输协议&#xff0c;也就是HyperText Transfer Protocol。 1. 「协议」 「协」字&#xff0c;代表的意思是必须有两个以上的参与者。「议」字&…...

编程日记 2023/5/14 4:52:36

Go 语言接口

Go 语言接口 Go 语言提供了另外一种数据类型即接口&#xff0c;它把所有的具有共性的方法定义在一起&#xff0c;任何其他类型只要实现了这些方法就是实现了这个接口。 实例 实例 /* 定义接口 */ type interface_name interface { method_name1 [return_type] method_name2…...

编程日记 2023/5/30 16:22:05

常用的intellij的快捷键

ctrlshiftspace(new 后面自动提示) ctrlshift/ (注释) itar后面tab (for循环) it后面ctrlj(很多智能代码生成) AltInsert(自动生成构造函数&#xff0c;get,set方法) ctrlaltt(自动生成try,catch) altenter(创建测试类和子类) ctrlshiftbackspace(最后编辑的地方) ctrl…...

编程日记 2023/5/14 4:42:34

Unity中的`SetPositionAndRotation()`

介绍 SetPositionAndRotation() 是Unity中的一个方法&#xff0c;用于同时设置物体的位置和旋转。它可以在不必分别调用 transform.position 和 transform.rotation 属性的情况下&#xff0c;直接设置物体的位置和旋转。 方法 以下是 SetPositionAndRotation() 方法的参数&a…...

编程日记 2023/5/31 7:13:53

API 接口的使用和功能

随着互联网的快速发展&#xff0c;API接口已经成为了现代开发中不可或缺的一部分。API接口可以让你的应用程序与其他应用程序、系统或服务进行数据交流和集成。如果你正在开发应用程序&#xff0c;那么最好的方法就是使用API接口来增强功能和性能。 我们的API接口是为您的应用…...

编程日记 2023/6/1 6:03:35

Vue插件

介绍 Vue插件是一种扩展Vue应用程序功能的方式。使用Vue插件&#xff0c;您可以在Vue应用程序中重复使用代码或添加新功能。更具体地说&#xff0c;Vue插件通常具有以下用途&#xff1a; 封装重复的功能或组件&#xff0c;以便在多个Vue组件中使用。 扩展Vue的核心功能并使其…...

编程日记 2023/5/14 4:27:31

C++好难（5）：内存管理

这一节学完&#xff0c;我们 C嘎嘎 就算是正式入门了&#xff0c;但是之后的课还会更上一阶d(ŐдŐ๑) 继续坚持&#xff01; 【本节目标】 1. C/C内存分布 2. C语言中动态内存管理方式 3. C中动态内存管理 4. operator new与operator delete函数 5. new和delete的实现原…...

编程日记 2023/5/29 17:06:20

vue-admin-template中vue动态路由不显示问题解决

使用的的是vue-admin-template&#xff0c;这是一个极简的 vue admin 管理后台&#xff0c;它只包含了 Element UI & axios & iconfont & permission control & lint&#xff0c;这些搭建后台必要的东西。需要根据自己的需求二次开发。 线上地址:vue-admin-tem…...

编程日记 2023/5/14 4:17:29

IP协议介绍

文章目录 一、IP协议的基本认识二、IP的协议头格式三、网段划分四、特殊的IP地址五、IP地址的数量限制六、私有IP地址和公网IP地址 一、IP协议的基本认识 IP在网络分层中属于网络层协议&#xff0c;传输层协议里的TCP协议解决的是可靠性问题&#xff0c;网络层协议里的IP协议能…...

编程日记 2023/5/14 4:12:28

将一个单体服务重构成微服务

将一个单体服务重构成微服务需要经过以下步骤&#xff1a; 1. 拆分服务&#xff1a;将单体服务拆分成多个小服务&#xff0c;每个服务只负责一个特定的功能。拆分的原则是将服务按照业务功能进行划分&#xff0c;每个服务都应该是相对独立的。 2. 设计API&#xff1a;为每个服务…...

编程日记 2023/5/31 4:23:41

SpringBoot项目如何打包成exe应用程序

准备 准备工作&#xff1a; 一个jar包&#xff0c;没有bug能正常启动的jar包 exe4j&#xff0c;一个将jar转换成exe的工具 链接: https://pan.baidu.com/s/1m1qA31Z8MEcWWkp9qe8AiA 提取码: f1wt inno setup&#xff0c;一个将依赖和exe一起打成一个安装程序的工具 链接:…...

编程日记 2023/5/14 4:02:26