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

CSS基础选择器和文字属性控制

news 来源：原创 2025/9/14 17:36:28

CSS

层叠样式表(Cascading Style Sheets)，是一种样式表语言，它和HTML一起被用来描述网页的样式。HTML 主要用来定义网页的内容，也就是骨架，CSS 用来定义网页的样式。

CSS 是由选择器和属性声明组成的。选择器用来选择元素，属性声明用来设置元素的样式。CSS 的语法如下：

selector {property: value;
}

选择器：选择器用于选择元素。选择器可以是标签名、类名、ID、属性等。
属性：属性是样式的属性，如颜色、字体、大小、边框、背景等。

CSS 引入方式

CSS 引入方式有三种：

内联样式：在 HTML 标签中直接写样式，如：<div style="color: red;">Hello World</div>。
内部样式表：在 HTML 文件中通过 style 标签引入样式，如：<style>div { color: red; }</style>。
外部样式表：在 HTML 文件中通过 link 标签引入样式，如：<link rel="stylesheet" href="style.css">。

在开发中，一般我们都是使用外部样式表的方式来引入 CSS。例如：

<!-- 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><link rel="stylesheet" href="./my.css">
</head>
<body><p>这是 p 标签</p><div>这是 div 标签</div>
</body>
</html>

/* CSS样式表 */
p {color: red;
}
div {color: blue;
}

CSS 选择器

CSS 选择器用于选择元素。选择器可以是标签名、类名、ID、属性等。

标签选择器

选择器是标签名，如：p、div、span等。使用标签选择器，可以匹配所有该标签的元素。适用场景是匹配所有该标签的元素。

类选择器

使用类选择器，可以匹配所有该类名的元素。使用的时候需要在 CSS 文件中定义类名，然后在标签中添加 class 属性。例如：

<!-- 在标签中添加 class 属性 -->
<p class="red"></p>

/* 在 CSS 文件中定义类名 */
.red {color: red;
}

需要注意的是 CSS 文件中定义的类名是 .red，在标签中添加 class 属性的时候是 red。

ID 选择器

使用 ID 选择器，可以匹配所有该 ID 的元素。使用的时候需要在 CSS 文件中定义 ID，然后在标签中添加 ID 属性。例如：

<!-- 在标签中添加 ID 属性 -->
<p id="red"></p>

/* 在 CSS 文件中定义 ID */
#red {color: red;font-size: 20px;font-weight: bold;
}

需要注意的是，ID 选择器在 CSS 文件中定义的 ID 是 #red，在标签中添加 ID 属性的时候是 red。ID 选择器只能匹配一个元素，如果多个元素有相同的 ID，那么 CSS 文件中定义的 ID 只会生效一个。

通配符选择器

通配符选择器是匹配所有元素的选择器。使用通配符选择器，可以匹配所有元素。适用场景是匹配所有元素。通配符选择器是 *。例如：

/* 在 CSS 文件中定义通配符选择器 */
* {color: red;font-size: 20px;font-weight: bold;
}

<!-- 使用了通配符选择器之后，全部都是红色 -->
<p>这是 p 标签</p>
<div>这是 div 标签</div>
<span>这是 span 标签</span>
<h1>这是 h1 标签</h1>

通配符选择器通常用于以下情况：

在不同浏览器中，元素的默认样式可能不同，使用 * 选择器可以重置默认样式。例如：

* {margin: 0;padding: 0;box-sizing: border-box;
}

全局字体/颜色
在某些情况下，可能需要全局设置字体和颜色，这时候可以使用通配符选择器。例如：

* {font-family: Arial, Helvetica, sans-serif;color: #333;font-size: 14px;
}

文字属性控制

文字属性控制是指控制文字的样式，如颜色、字体、大小、边框、背景等。
文字属性控制可以使用以下 CSS 属性：

字体属性	描述
font-family	设置字体，例如：Arial, Helvetica, sans-serif;
font-size	设置字体大小，例如：16px;
font-weight	设置字体的粗细，例如：bold;
font-style	设置字体的样式(是否倾斜)，例如：italic;
line-height	设置行高，例如：1.5; 表示行高为字体的1.5倍；设置为 30px，表示行高为30px
color	设置字体颜色，例如：red;
text-indent	设置首行缩进，例如：2em; em表示当前标签的字体大小
text-align	设置文本水平方向的对齐方式，默认是左对齐，例如：center;
text-decoration	设置文本修饰线，例如：underline;
font	复合属性，例如：font: 16px Arial, Helvetica, sans-serif; 必须设置字号和字体，否则font属性不生效。

行高是包括字体的上下边距以及字体本身的高度在内的，因此在设置单行字体垂直居中的时候，可以将字体的高度和行高设置为相等，这样字体就会垂直居中。
font-family 是设置字体的，它可以设置多个字体，如果第一个字体不支持，则会使用第二个字体，以此类推。一般最后一个字体设置为 sans-serif，表示无衬线字体族。
color 是设置字体颜色的，它可以设置颜色名称、十六进制颜色值、RGB颜色值等。通常在开发时，使用的都是 RGB 颜色值，而不是颜色名称。

CSS基础选择器和文字属性控制

CSS 层叠样式表(Cascading Style Sheets)，是一种样式表语言，它和HTML一起被用来描述网页的样式。HTML 主要用来定义网页的内容，也就是骨架，CSS 用来定义网页的样式。 CSS 是由选择器和属性声明组成的。选择器用来选择元素&#…...

编程日记 2025/9/14 17:36:28

保护密码等敏感信息的几个常用方法

概述在生产环境，保护数据库账号密码等敏感信息是至关重要的，这些信息不能被所有研发工程师看见，本文介绍几种避免明文存储的常用方法。方法1： 使用配置中心加密适用场景：已采用配置中心（如Spring Clou…...

编程日记 2025/9/14 17:36:26

【Golang 面试题】每日 3 题（六十七）

✍个人博客：Pandaconda-CSDN博客 📣专栏地址：http://t.csdnimg.cn/UWz06 📚专栏简介：在这个专栏中，我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话，欢迎点赞👍收藏…...

编程日记 2025/9/14 10:35:50

JavaScript系列（89）--前端模块化工程详解

前端模块化工程详解 🧩 前端模块化是现代Web开发的核心理念之一，它帮助我们组织和管理日益复杂的前端代码。本文将详细探讨前端模块化工程的各个方面，从基础概念到实际应用。模块化概述 🌟 💡 小知识：模…...

编程日记 2025/9/14 11:54:03

PDF处理控件Aspose.PDF教程：使用 Python 将 PDF 转换为 TIFF

TIFF文件是高质量图像的首选。它们广泛用于印刷、存档和图形设计。企业通常需要转换PDF文档以获得更好的兼容性。了解如何以编程方式执行此转换可以节省时间和资源。在这篇教程中，我们将探讨如何使用 Python 将 PDF 转换为 TIFF。本文涵盖以下主题： P…...

编程日记 2025/9/14 11:48:30

【开源免费】基于SpringBoot+Vue.JS美食烹饪互动平台（JAVA毕业设计）

本文项目编号 T 219 ，文末自助获取源码 \color{red}{T219，文末自助获取源码} T219，文末自助获取源码目录一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/9/9 22:37:36

QT 引入Quazip和Zlib源码工程到项目中，无需编译成库，跨平台，加密压缩，带有压缩进度

前言最近在做项目时遇到一个需求，需要将升级的文件压缩成zip，再进行传输； 通过网络调研，有许多方式可以实现，例如QT私有模块的ZipReader、QZipWriter；或者第三方库zlib或者libzip或者quazip等&#xff1…...

编程日记 2025/9/14 17:34:46

【GO】学习笔记

目录学习链接开发环境开发工具 GVM - GO多版本部署 GOPATH 与 go.mod go常用命令环境初始化编译与运行 GDB -- GNU 调试器基本语法与字符类型关键字与标识符格式化占位符基本语法初始值&零值&默认值变量声明与赋值 _ 下划线的用法字…...

编程日记 2025/9/14 17:36:27

docker安装etcd:docker离线安装etcd、docker在线安装etcd、etcd镜像下载、etcd配置详解、etcd常用命令、安装常见问题总结

官方网站官方网址：etcd 二进制包下载：Install | etcd GitHub社区项目：etcd-io GitHub GitHub社区项目版本历史：Releases etcd-io/etcd GitHub 一、镜像下载 1、在线下载在一台能连外网的linux上执行docker镜像拉取命令…...

编程日记 2025/9/14 17:34:44

港科大提出开放全曲音乐生成基础模型YuE:可将歌词转换成完整歌曲

YuE是港科大提出的一个开源的音乐生成基础模型，专为音乐生成而设计，专门用于将歌词转换成完整的歌曲（lyrics2song）。它可以生成一首完整的歌曲，时长几分钟，包括朗朗上口的声乐曲目和伴奏曲目。YuE 能够模拟…...

编程日记 2025/9/9 6:33:17

Hive从入门到运用

hive简介 hive的设计思想（本质是一个翻译器） 上传安装包解压，查看运行hive（一定要启动hadoop，是有依赖关系的。） 测试启动方法，和建表文件创建很上传到hdfs，直接上传到hive表的目…...

编程日记 2025/9/8 12:43:14

unity学习55：按钮 button

目录 1 按钮 button 1.1 按钮button 其实就是一个组合体 1.2 测试按钮，在UI中添加1个按钮 1.3 按钮的属性 2 按钮的图片属性 3 按钮的变换 transition 3.1 按颜色变换 3.2 按图片精灵变换 3.3 按动画变换 4 按钮的导航 5 按钮的事件和脚本 1 按钮 …...

编程日记 2025/9/11 20:04:26

《论基于构件的软件开发方法及其应用》审题技巧 - 系统架构设计师

软考论文写作框架：基于构件的软件开发方法及其应用一、考点概述本论题“基于构件的软件开发方法及其应用”主要考察的是软件工程专业中关于基于构件开发（CBSD）的深入理解与实践应用。考点涵盖以下几个方面： 首先，…...

编程日记 2025/9/13 18:04:57

穷举vs暴搜vs深搜vs回溯vs剪枝（典型算法思想）—— OJ例题算法解析思路

回溯算法的模版 void backtrack(vector<int>& path, vector<int>& choice, ...) {// 满⾜结束条件if (/* 满⾜结束条件 */) {// 将路径添加到结果集中res.push_back(path);return;}// 遍历所有选择for (int i 0; i < choices.size(); i) {// 做出选择…...

编程日记 2025/9/14 1:46:56

java23种设计模式-命令模式

命令模式（Command Pattern）学习笔记 1. 模式定义行为型设计模式，将请求封装为对象，使请求的发送者与接收者解耦。支持请求的排队、记录、撤销/重做等操作。 2. 适用场景 ✅ 需要将操作参数化 ✅ 需要支持事务操作&#xff08…...

编程日记 2025/9/14 6:00:06

交流异步电动机PI双闭环SVPWM矢量控制Simulink

关注微♥“电机小子程高兴的MATLAB小屋”获取专属优惠 1.模型简介本仿真模型基于MATLAB/Simulink（版本MATLAB 2017Ra）软件。建议采用matlab2017 Ra及以上版本打开。（若需要其他版本可联系代为转换） 2.仿真算法： (…...

编程日记 2025/9/8 16:26:15

利用 Open3D 保存并载入相机视角的简单示例

1. 前言在使用 Open3D 进行三维可视化和点云处理时，有时需要将当前的视角（Camera Viewpoint）保存下来，以便下次再次打开时能够还原到同样的视角。本文将演示如何在最新的 Open3D GUI 界面（o3d.visualization.gui / o…...

编程日记 2025/9/10 11:02:00

kiln微调大模型-使用deepseek R1去训练一个你的具备推理能力的chatGPT 4o

前言随着deepseek的爆火，对于LLM的各种内容也逐渐步入我的视野，我个人认为，可能未来很长一段时间，AI将持续爆火，进入一段时间的井喷期，AI也会慢慢的走入我们每个家庭之中，为我们的生活提供便利…...

编程日记 2025/9/10 4:09:37

《从Kokoro看开源语音模型的“无限可能”》：此文为AI自动生成

开源语音模型 Kokoro 是一款轻量级、高性能的文本转语音（TTS）模型，以下是关于它的详细介绍：核心优势卓越的音质：即使参数规模仅 8200 万，也能生成自然流畅、富有表现力的语音。轻量高效：占用资源少，运行速度快，在 CPU 上即可实现近乎实时的语音生成，在 GPU 端则能…...

编程日记 2025/9/9 18:21:08

Spring 事务和事务传播机制（详解）

1 .事务 1.1.什么是事务？ 事务是一组操作的集合,是不可分割的操作事务作为一个整体，要不同时完成，要不同时失败 1.2什么时候需要事务？ 关于金钱的操作基本都会有事务例如转账操作： 第一步 A账号 - 500元第二步 B账…...

编程日记 2025/9/12 21:26:49

Innodb MVCC实现原理

什么是MVCC? MVCC全称多版本并发控制，是在并发访问数据库时对操作数据做多版本管理，避免因为写数据时要加写锁而阻塞读取数据的请求问题。 Innodb对mvcc的实现 1、事务版本号每次事务开启前都会从数据库获得一个自增长的事务ID，可以从事…...

编程日记 2025/9/7 21:23:03

【网络编程】网络套接字和使用案例

一、为什么大多数网络编程使用套接字在网络编程中，套接字 (socket) 是最常用的接口，但并不是所有的底层通信都依赖于套接字。尽管如此，绝大多数网络应用（特别是在操作系统层面）都使用套接字进行通信，因为…...

编程日记 2025/9/8 17:28:13

【Java企业生态系统的演进】从单体J2EE到云原生微服务

Java企业生态系统的演进：从单体J2EE到云原生微服务目录标题 Java企业生态系统的演进：从单体J2EE到云原生微服务摘要1. 引言2. 整体框架演进：从原始Java到Spring Cloud2.1 原始Java阶段（1995-1999）2.2 J2EE阶段&#x…...

编程日记 2025/9/7 0:54:24

【爬虫基础】第二部分爬虫基础理论 P1/3

上节内容回顾：【爬虫基础】第一部分网络通讯 P1/3-CSDN博客【爬虫基础】第一部分网络通讯-Socket套接字 P2/3-CSDN博客【爬虫基础】第一部分网络通讯-编程 P3/3-CSDN博客爬虫相关文档，希望互相学习，共同进步风123456789&#xff…...

编程日记 2025/9/10 8:17:58

第2章_保护您的第一个应用程序

第2章_保护您的第一个应用程序在本章中，您将学习如何使用 Keycloak 保护您的第一个应用程序。为了让事情更有趣，您将运行的示例应用程序由两部分组成，前端 Web 应用程序和后端 REST API。这将向您展示用户如何向前端进行身份验证&#xff0…...

编程日记 2025/9/9 14:29:31

山东大学软件学院人工智能导论实验之知识库推理

目录实验目的： 实验代码： 实验内容： 实验结果实验目的： 输入相应的条件，根据知识库推理得出相应的知识。实验代码： def find_data(input_process_data_list):for epoch, data_process in enumerat…...

编程日记 2025/9/12 0:41:07

Java 网络协议面试题答案整理，最新面试题

TCP和UDP的主要区别是什么？ TCP（传输控制协议）和UDP（用户数据报协议）的主要区别在于TCP是面向连接的协议，而UDP是无连接的协议。这导致了它们在数据传输方式、可靠性、速度和使用场景方面的不同。 1、连接…...

编程日记 2025/9/11 21:56:19

win10把c盘docker虚拟硬盘映射迁移到别的磁盘

c盘空间本身就比较小、如果安装了docker服务后，安装的时候没选择其他硬盘，虚拟磁盘也在c盘会占用很大的空间，像我的就三十多个G，把它迁移到其他磁盘一下子节约几十G 1、先输入下面命令查看 docker 状态 wsl -l -v 2、如果没有停止…...

编程日记 2025/9/14 6:13:53

AOP进阶-02.通知顺序

一.通知顺序当有多个切面类中的切入点表达式一样时，这些切面类的执行顺序是怎样的呢？如图我们将定义两个切面类，一个MyAspect2，一个MyAspect3，一个MyAspect4。执行后我们发现， 对于目标方法前的通知方法&…...

编程日记 2025/9/8 14:17:07

${sym} 与 String(sym) 的区别

在 JavaScript 中，${sym}（模板字符串插值）和 String(sym)（显式类型转换）虽然都涉及将值转换为字符串，但它们的底层逻辑和行为存在显著差异，尤其是在处理 Symbol 等特殊类型时。以下是具体对比&a…...

编程日记 2025/9/11 11:49:37

sglang框架源码笔记

文章目录整体架构1. **客户端（Client）**：2. **服务器端（Server）**：3. **调度器与模型工作节点（Scheduler & Model Worker）**： TpModelWorker类ModelRunner类TpModel…...

编程日记 2025/9/8 11:38:30

2025年SCI一区智能优化算法：混沌进化优化算法（Chaotic Evolution Optimization, CEO），提供MATLAB代码

一、混沌进化优化算法 https://github.com/ITyuanshou/MATLABCode 1. 算法简介混沌进化优化算法（Chaotic Evolution Optimization, CEO）是2025年提出的一种受混沌动力学启发的新型元启发式算法。该算法的主要灵感来源于二维离散忆阻映射的混沌进化过…...

编程日记 2025/9/14 3:43:51

uake 网络安全 reverse网络安全

🍅 点击文末小卡片 ，免费获取网络安全全套资料，资料在手，涨薪更快本文首发于“合天网安实验室” 首先从PEID的算法分析插件来介绍，要知道不管是在CTF竞赛的REVERSE题目中，还是在实际的商业产品中&#xf…...

编程日记 2025/9/8 17:46:20

C语言实现单链表

单链表是数据结构中最基础的链式结构，它不按照线性的顺序存储数据，而是由若干个同一结构类型的“节点”依次串联而成的，即每一个节点里保存着下一个节点的地址（指针）。上图中，一个表头变量head是用来存储链表首节点的地址，链表中每个节点有data（数据）部分和n…...

编程日记 2025/9/10 7:25:58

Rk3568驱动开发_点亮led灯代码完善(手动挡)_6

1.实现思路： 应用层打开设备后通过write函数向内核中写值，1代表要打开灯，0代表要关闭灯 Linux配置gpio和控制gpio多了一个虚拟内存映射操作 2.注意事项： 配置和读写操作的时候要谨慎，比如先关掉gpio再注销掉虚拟内存…...

编程日记 2025/9/8 17:04:09

threejs：document.createElement创建标签后css设置失效

vue3threejs，做一个给模型批量CSS2D标签的案例，在导入模型的js文件里，跟着课程写的代码如下： import * as THREE from three; // 引入gltf模型加载库GLTFLoader.js import { GLTFLoader } from three/addons/loaders/GLTFLoader.…...

编程日记 2025/9/13 16:03:06

在 compare-form.vue 中添加 compareDate 隐藏字段，并在提交时自动填入当前时间

在 compare-form.vue 中添加 compareDate 隐藏字段，并在提交时自动填入当前时间。提交表单时存入的对象是FakeRegistration，这个对象里面有compareDate字段，刚好表格查询的对象也是FakeRegistration，所以表格展示的时间就是刚才…...

编程日记 2025/9/12 23:01:00

使用DeepSeek/ChatGPT等AI工具辅助编写wireshark过滤器

随着deepseek,chatgpt等大模型的能力越来越强大，本文将介绍借助deepseek，chatgpt等大模型工具，通过编写提示词，辅助生成全面的Wireshark显示过滤器的能力。每一种协议的字段众多，流量分析的需求多种多样，…...

编程日记 2025/9/10 10:45:58

Java 大视界 -- Java 大数据在智能物流路径规划与车辆调度中的创新应用（102）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/9/11 5:29:39

YOLOv12 ——基于卷积神经网络的快速推理速度与注意力机制带来的增强性能结合

概述实时目标检测对于许多实际应用来说已经变得至关重要，而Ultralytics公司开发的YOLO（You Only Look Once，只看一次）系列一直是最先进的模型系列，在速度和准确性之间提供了稳健的平衡。注意力机制的低效阻碍了它们在…...

编程日记 2025/9/4 15:31:31

一个行为类似标准库find算法的模板

函数需要两个模板类型参数，一个表示函数的迭代器参数，另一个表示值的类型。代码 #include<iostream> #include<string> #include<vector> #include<list>using namespace std;template <typename IterType,typename T>…...

编程日记 2025/9/8 12:07:29

LLC谐振变换器恒压恒流双竞争闭环simulink仿真

1.模型简介本仿真模型基于MATLAB/Simulink（版本MATLAB 2017Ra）软件。建议采用matlab2017 Ra及以上版本打开。（若需要其他版本可联系代为转换）针对全桥LLC拓扑，利用Matlab软件搭建模型，分别对轻载&#xf…...

编程日记 2025/9/8 1:43:52

Elasticsearch 的分布式架构原理：通俗易懂版

Elasticsearch 的分布式架构原理：通俗易懂版 Lucene 和 Elasticsearch 的前世今生 Lucene 是一个功能强大的搜索库，提供了高效的全文检索能力。然而，直接基于 Lucene 开发非常复杂，即使是简单的功能也需要编写大量的 Java 代码&…...

编程日记 2025/9/8 17:59:15

[深度学习]基于C++和onnxruntime部署yolov12的onnx模型

基于C和ONNX Runtime部署YOLOv12的ONNX模型，可以遵循以下步骤： 准备环境：首先，确保已经下载后指定版本opencv和onnruntime的C库。模型转换： 安装好yolov12环境并将YOLOv12模型转换为ONNX格式。这通常涉及使用深度学习…...

编程日记 2025/9/14 5:28:29

seacmsv9报错注入

1、seacms的介绍 seacms中文名：海洋影视管理系统。是一个采用了php5mysql架构的影视网站框架，因此，如果该框架有漏洞，那使用了该框架的各个网站都会有相同问题。 2、源码的分析漏洞的部分源码如下： <?php …...

编程日记 2025/9/14 6:21:45

comments: true edit_url: https://github.com/doocs/leetcode/edit/main/lcof2/%E5%89%91%E6%8C%87%20Offer%20II%20033.%20%E5%8F%98%E4%BD%8D%E8%AF%8D%E7%BB%84/README.md 剑指 Offer II 033. 变位词组题目描述给定一个字符串数组 strs ，将变位词组合在一起…...

编程日记 2025/9/10 10:56:33

【2025全网最新最全】前端Vue3框架的搭建及工程目录详解

文章目录安装软件Node.js搭建Vue工程创建Vue工程精简Vue项目文件 Vue工程目录的解读网页标题的设置设置全局样式路由配置安装软件Node.js 下载地址：https://nodejs.org/zh-cn/ 安装完成后，打开cmd,查看环境是否准备好 node -v npm -vnpm使用之前一定…...

编程日记 2025/9/13 19:34:53