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

前端快速入门学习3——CSS介绍与选择器

article 2026/2/4 13:47:58

1.概述

CSS全名是cascading style sheets,中文名层叠样式表。
用于定义网页样式和布局的样式表语言。
通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

HTML与CSS的关系：HTML相当于毛坯房，CSS是装修。

CSS 通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式

选择器的声明中可以写无数条属性
声明的每一行属性，都需要以英文分号结尾;
声明中的所有属性和值都是以键值对这种形式出现的;

CSS三种导入方式：
1.内联样式（Inline Styles）
2.内部样式表（Internal Stylessheet）
3.外部样式表（External Stylesheet）
三种导入方式的优先级：内联样式>内部样式表>外部样式表
内联样式：

<head><link rel="stylesheet" href="style.css"><style>h2{color: red;font-size: 30px;}</style>
</head>
<body>
<h1 style="color: yellowgreen;">这是一个内联样式</h1>
<h2>二级标题标签，应用内部样式</h2>
<h3>三级标题标签,使用外部样式</h3>
</body>

style.css

h3{color: aqua;font-size: 20px;
}

效果：
在这里插入图片描述

2.选择器

选择器是 CSS中的关键部分，它允许你针对特定元素或一组元素定义样式

(1)元素选择器

<head><style>h1{color: red;font-size: 30px;}</style>
</head>
<body>
<h1>这是一个元素选择器</h1>
</body>

（2）类选择器

<head><style>.highlight {color: red;font-size: 30px;}</style>
</head>
<body>
<h1 class="highlight">这是一个类选择器</h1>
</body>

（3）id选择器

<head><style>#unique {color: blue;font-size: 25px;}</style>
</head>
<body><h2 id="unique">这是一个ID选择器</h2>
</body>

（4）通用选择器

<head><style>* {font-family: KaiTi;font-size: 20px;color: green;}</style>
</head>
<body><h2 id="unique">这是一个ID选择器</h2><p>这是一个简单的HTML示例1。</p><p>这是一个简单的HTML示例2。</p>
</body>

（5）子元素选择器

<head><style>.father > .son {color: yellow;font-size: 20px;}</style>
</head>
<body><div class="father"><p class="son">这是一个子元素选择器</p></div>
</body>

（6）后代选择器

<head><style>.father .grandson {color: orange;font-size: 10px;}</style>
</head>
<body><div class="father"><p class="son">这是一个子元素选择器</p><div><p class="grandson">这是一个后代选择器</p></div>
</body>

（7）兄弟选择器

<head><style>h3 + p {color: pink;font-size: 18px;}</style>
</head>
<body><p>这是一个普通的标签</p><h3>这是相邻兄弟选择器示例</h3><p>这是另一个P标签</p>
</body>

（8）伪类选择器

伪类是用来添加一些选择器的特殊效果。
如链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

<head><style>#element:hover{background-color: lightblue;}</style>
</head>
<body><p id="element">这是一个伪类选择器</p>
</body>

在这里插入图片描述

前端快速入门学习3——CSS介绍与选择器

1.概述 CSS全名是cascading style sheets,中文名层叠样式表。用于定义网页样式和布局的样式表语言。通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。 HTML与CSS的关系：HTML相当…...

编程日记 2026/1/24 14:31:55

Redash：一个开源的数据查询与可视化工具

Redash 是一款免费开源的数据可视化与协作工具，可以帮助用户快速连接数据源、编写查询、生成图表并构建交互式仪表盘。它简化了数据探索和共享的过程，尤其适合需要团队协作的数据分析场景。数据源 Redash 支持各种 SQL、NoSQL、大数据和 API 数据源&am…...

编程日记 2026/1/24 14:53:38

嵌入式Linux驱动—— 1 GPIO配置

目录 1.GPIO操作 1.1 IO命名 1.2 GPIO 时钟使能（CCM） 1.3 IO 复用（IOMUXC） 1.4 IO 配置 1.5 GPIO 配置 1.GPIO操作 GPIO操作主要是以下流程： 使能某组GPIO模块（GPIO1、2、...）&#…...

编程日记 2026/2/1 4:05:17

[ICLR 2025]Biologically Plausible Brain Graph Transformer

论文网址：Biologically Plausible Brain Graph Transformer 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用目录 …...

编程日记 2026/2/1 11:12:37

SpringBoot+MyBatis Plus+PageHelper+vue+mysql 实现用户信息增删改查功能

静态资源展示 （1）静态资源下载 （2）下载后文件放到resources/static 目录下 (3) main函数启动项目访问对应文件，http://127.0.0.1:8080/user-list.html 数据库添加表和数据 SET FOREIGN_KEY_CHECKS0;-- --------…...

编程日记 2026/1/27 1:10:44

企业常用Linux服务搭建

1.需要两台centos 7服务器，一台部署DNS服务器，另一台部署ftp和Samba服务器。 2. 部署DNS 服务器 #!/bin/bash# 更新系统 echo "更新系统..." sudo yum update -y# 安装 BIND 和相关工具 echo "安装 BIND 和相关工具..." sudo y…...

编程日记 2026/1/30 7:24:24

Qwen-7B-Chat 本地化部署使用

通义千问简介通义千问是阿里云推出的超大规模语言模型，以下是其优缺点： 优点强大的基础能力：具备语义理解与抽取、闲聊、上下文对话、生成与创作、知识与百科、代码、逻辑与推理、计算、角色扮演等多种能力。可以续写小说、编写邮件、解…...

编程日记 2026/2/1 18:28:43

QGIS获取建筑矢量图-Able Software R2V

1.QGIS截图说明：加载天地图矢量图层，然后进行截图。 2.Able Software R2V 说明：Able Software R2V 是一款将光栅图像（如扫描图纸、航拍照片）自动转换为矢量图形（如DXF格式）的软件&a…...

编程日记 2026/2/4 12:47:33

CSS：换行与不换行

一、CSS 不允许换行在 CSS 中，有几种方法可以控制文本不换行： 1. 使用 white-space 属性 .no-wrap {white-space: nowrap; } white-space: nowrap; 会强制文本在一行显示，不换行。 2. 使用 overflow 和 text-overflow 通常与 white-sp…...

编程日记 2025/11/18 18:39:37

【MiniMind】不能全局用 `pip install --upgrade pip`

Q：WARNING: Running pip as the ‘root’ user can result in broken permissions and conflicting behaviour with the system package manager, possibly rendering your system unusable. It is recommended to use a virtual environment instead: https://pip.…...

编程日记 2025/11/9 7:09:10

form实现pdf文件转换成jpg文件

说明： 我希望将pdf文件转换成jpg文件请去下载并安装 Ghostscript，gs10050w64.exe 配置环境变量：D:\Program Files\gs\gs10.05.0\bin 本地pdf路径：C:\Users\wangrusheng\Documents\name.pdf 输出文件目录：C:\Users\wan…...

编程日记 2026/1/26 22:09:51

STM32单片机入门学习——第13节: [6-1] TIM定时中断

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难，但我还是想去做！ 本文写于：2025.04.04 STM32开发板学习——第13节: [6-1] TIM定时中断前言开发板说明引用解答和科普一…...

编程日记 2026/1/27 5:26:52

量子纠错码实战：从Shor码到表面码

引言：量子纠错的必要性量子比特的脆弱性导致其易受退相干和噪声影响，单量子门错误率通常在10⁻~10⁻量级。量子纠错码（QEC）通过冗余编码测量校正的机制，将逻辑量子比特的错误率降低到可容忍水平。本文从首个量子纠错…...

编程日记 2026/1/31 11:22:57

【2】搭建k8s集群系列（二进制）之安装etcd数据库集群

一、etcd服务架构 Etcd 是一个分布式键值存储系统，Kubernetes 使用 Etcd 进行数据存储，所以先准备一个 Etcd 数据库，为解决 Etcd 单点故障，应采用集群方式部署，这里使用 3 台组建集群，可容忍 1 台机器故障…...

编程日记 2026/1/26 2:31:53

Linux常用命令详解：从基础到进阶

目录一、引言二、文件处理相关命令 （一）grep指令 （二）zip/unzip指令编辑 （三）tar指令 （四）find指令三、系统管理相关命令 （一）shutdown指…...

编程日记 2026/1/30 11:37:36

【Docker】使用Docker快速部署n8n和unclecode/crawl4ai

Docker部署自动化工具n8n和crawl4ai详细教程前言本文将详细介绍如何使用 Docker 来部署和运行自动化工作流工具 n8n 以及 crawl4ai。这两个工具对于需要进行自动化工作流程的开发者来说都非常有用。一、环境准备在开始之前，请确保您的系统已经安装了&#x…...

编程日记 2025/11/28 8:55:46

数据库权限获取

1. into outfile（手写） 1.1. 利用条件 • web 目录具有写入权限，能够使用单引号 • 知道网站绝对路径（根目录，或则是根目录往下的目录都行） • secure_file_priv 没有具体值（在 mysql/my.ini 中查看） 1.2. secure_file_priv 介绍 secure_file_priv 是用来限制 loa…...

编程日记 2026/1/9 12:51:22

基于spring boot的外卖系统的设计与实现【如何写论文思路与真正写出论文】

目录系统开发实现链接： 背景与分析： 背景（题目）： 用户功能配送员功能管理员功能分析： 过程（主体展示为主，部分功能不一一展示）： 目录论文前面…...

编程日记 2026/1/26 23:38:03

Kubernetes 存储 Downward API

1.介绍 1.提供容器元数据比如我们 golang语言我们说他会根据当前CPU的数量以此去确认我们的进程线程和协程之间的关系以此去释放我们当前CPU的更大的这么一个并行任务的能力但是这里会出现一个问题容器它是把当前的应用封装在我们固定的名称空间了而且给它以特定的…...

编程日记 2026/1/27 0:43:21

使用ctags+nvim自动更新标签文件

ctags是一个强大的语言分析工具，可以分析多种语言并生成语法结构文件，通过这些文件可以快速进行函数跳转，但是这有一个缺点，就是每次在项目里更新了代码之类的比如新增了一个函数，都需要重新使用ctags -R .来重新更新标…...

编程日记 2026/1/7 4:20:32

RK3568 gpio模拟i2c 配置hym8563 RTC时钟

1、使用模拟i2c，确认使用的gpio未被占用，为gpio功能以GPIO0_C6 GPIO0_C7为例，查看管脚的复用关系。 cat /sys/kernel/debug/pinctrl/pinctrl-rockchip-pinctrl/pinmux-pins2、使用内核模块i2c-gpio.c 内核make menuconfig 开启i2c_gpio支持 Device Drivers->I2C sup…...

编程日记 2025/12/13 23:45:16

HANA如何在存储过程里执行动态SQL

业务场景需求： 在HANA里如何实现动态的SQL控制，比如需要多个单据里，实现某个自定义字段不允许重复一般的写法是需要在每个业务单据里加对应的存储过程控制，这样的话，需要在每个业务单据里进行控制，SQL维…...

编程日记 2025/12/9 5:00:38

01人工智能基础入门

一、AI应用场景和发展历程 1.1行业应用 1、deepdream图像生成、yolo目标检测 2、知识图谱、画风迁移 3、语音识别、计算机视觉 4、用户画像 5、百度人工智能布局 1.2发展历程人工智能的发展经历了 3 个阶段： 1980年代是正式成形期，尚不具备影响力。 …...

编程日记 2026/1/28 1:18:17

嵌入式AI的本地化部署的好处

嵌入式AI本地化处理（即边缘计算）的核心优势在于将AI算力下沉至设备端，直接处理数据而非依赖云端，这种模式在多个维度上展现出显著价值： 一、数据隐私与安全性提升 1. 敏感数据本地存储金融、医疗等涉及隐私的行业…...

编程日记 2025/12/5 17:04:07

进程和内存管理

目录一.进程的基本信息 1.1进程的定义 1.2进程的特征 1.3进程的组成 1.4线程产生的背景 1.5线程的定义 1.6进程与线程的区别 1.7进程的类别 1.8进程的优先级 1.8.1进程优先级的概念 1.8.2PRI和NI 1.9僵尸进程 1.9.1僵尸进程的定义 1.9.2僵尸进程产生的原因 1.9…...

编程日记 2026/1/27 0:11:49