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

CSS样式的引用方式以及选择器使用

news 文章来源：https://blog.csdn.net/lxl12138/article/details/142069452 2025/5/6 19:12:15

1. CSS 引用方式

CSS 可以通过三种方式引用到 HTML 文件中：

  • 行内样式（Inline Styles）：直接在 HTML 元素中定义样式。
  • 内部样式表（Internal CSS）：在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。
  • 外部样式表（External CSS）：将样式写在单独的 .css 文件中，并通过 <link> 标签进行引用。
示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 示例</title>

<!-- 引入外部样式表 -->

<link rel="stylesheet" href="styles.css">

<!-- 内部样式表 -->

<style>

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

} h1 { color: #333; }

</style>

</head>

<body>

<!-- 行内样式 -->

<h1 style="color: blue;">这是一个标题</h1>

<p class="text">这是一个段落。</p>

</body>

</html>

2. CSS 选择器的简单使用

CSS 选择器用于选取 HTML 元素并对其应用样式。以下是一些常用的 CSS 选择器。

1. 元素选择器

用于选择所有某一类型的 HTML 元素。

p { color: green; }

以上代码会将所有 <p> 标签中的文本颜色设置为绿色。

2. 类选择器（Class Selector）

使用类选择器可以为具有相同类名的元素应用样式。类选择器前面加上 .。

.text { font-size: 16px; color: #555; }

HTML：

<p class="text">这是一个段落。</p>

3. ID 选择器

ID 选择器用于选取具有特定 ID 的元素，前面加上 #。

#header { background-color: #4CAF50; color: white; padding: 10px; }

HTML：

<div id="header">网站头部</div>

4. 组合选择器

组合选择器用于选取多个元素或特定条件下的元素。

  • 后代选择器：选取某个元素内的所有指定后代元素。

    div p { color: red; }

    以上代码会选取所有位于 <div> 元素内的 <p> 标签。

  • 群组选择器：同时选取多个元素，并为其应用相同的样式。

    h1, h2, h3 { font-family: 'Arial', sans-serif; }

3. CSS 示例

外部样式表 styles.css：

/* 为所有 h1 标签设置样式 */

h1 {

color: darkblue;

font-size: 24px;

}

/* 为类为 text 的元素设置样式 */

.text {

font-size: 14px;

line-height: 1.6;

color: #666;

}

/* 为 ID 为 footer 的元素设置样式 */

#footer {

background-color: #333;

color: white;

text-align: center;

padding: 10px;

}

HTML 文件：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 简单使用</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>这是一个标题</h1>

<p class="text">这是段落内容。</p>

<div id="footer">网站底部</div> <

/body>

</html>

4. 总结

  • 行内样式：将样式直接写在元素内，不推荐使用，因为不利于维护。
  • 内部样式表：适合小型页面，但无法跨页面复用。
  • 外部样式表：最常用的方式，推荐用于大型项目，方便复用与管理。

使用 CSS 选择器可以为网页中的不同元素应用样式，选择器种类包括：元素选择器、类选择器、ID 选择器等。

相关文章：

CSS样式的引用方式以及选择器使用

1. CSS 引用方式 CSS 可以通过三种方式引用到 HTML 文件中&#xff1a; 行内样式&#xff08;Inline Styles&#xff09;&#xff1a;直接在 HTML 元素中定义样式。内部样式表&#xff08;Internal CSS&#xff09;&#xff1a;在 HTML 文档的 <head> 部分使用 <sty…...

编程日记 2024/9/10 0:21:37

Python Flask_APScheduler定时任务的正确(最佳)使用

描述 APScheduler基于Quartz的一个Python定时任务框架&#xff0c;实现了Quartz的所有功能。最近使用Flask框架使用Flask_APScheduler来做定时任务&#xff0c;在使用过程当中也遇到很多问题&#xff0c;例如在定时任务调用的方法中需要用到flask的app.app_context()时&#…...

编程日记 2024/9/10 0:20:17

Linux命名管道

​ ​通信的前提是让不同的进程看到同一份资源&#xff0c;因为路径是具有唯一性的&#xff0c;所以我们可以使用路径文件名来唯一的让不同进程看到同一份资源&#xff0c;实现没有血缘关系的两个进程进行管道通信 1.指令级 mkfifio&#xff08;FILENAME,0666&#xff09; …...

编程日记 2024/9/10 0:19:13

Xinstall助力App全渠道统计，参数传递下载提升用户体验！

在移动互联网时代&#xff0c;App已成为我们日常生活中不可或缺的一部分。然而&#xff0c;对于App开发者来说&#xff0c;如何有效地推广和运营自己的应用&#xff0c;却是一个不小的挑战。尤其是在面对众多渠道、复杂的数据统计和用户需求多样化的情况下&#xff0c;如何精准…...

编程日记 2024/9/10 0:16:53

【时时三省】(C语言基础)指针进阶 例题4

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 strlen是求字符串长度 这个需要算上&#xff3c;0 第一个arr 是打印6 因为它加上&#xff3c;0是有六个元素 第二个arr0 数组名相当于首元素的地址 a的地址加0还是a的地址 所以这个地方还是…...

编程日记 2024/9/10 0:15:52

k8s的配置管理

一、配置管理分为两种&#xff1a; 1. 加密配置&#xff1a;用来保存密码和token密钥对以及其它敏感的k8s资源。 2.应用配置&#xff1a;我们需要定制化的给应用进行配置&#xff0c;我们需要把定制好的配置文件同步到pod当中的容器。 二、加密配置 1.secret三种类型&#xf…...

编程日记 2024/9/10 0:13:23

JAVA- 多线程

一&#xff0c;多线程的概念 1.并行与并发 并行&#xff1a;多个任务在同一时刻在cpu 上同时执行并发&#xff1a;多个任务在同一时刻在cpu 上交替执行 2.进程与线程 进程&#xff1a;就是操作系统中正在运行的一个应用程序。所以进程也就是“正在进行的程序”。&#xff0…...

编程日记 2024/9/10 0:12:00

【Qt】解决设置QPlainTextEdit控件的Tab为4个空格

前言 PyQt5 是一个用于创建跨平台桌面应用程序的 Python 绑定集合&#xff0c;它提供了对 Qt 应用程序框架的访问。用于开发具有图形用户界面&#xff08;GUI&#xff09;的应用程序&#xff0c;以及非GUI程序。PyQt5 使得 Python 开发者可以使用 Qt 的丰富功能来构建应用程序。…...

编程日记 2024/9/10 0:10:56

elementUI根据列表id进行列合并@莫成尘

本文章提供了elementUI根据列表id进行列合并的demo&#xff0c;效果如图&#xff08;可直接复制代码粘贴&#xff09; <template><div id"app"><el-table border :data"tableList" style"width: 100%" :span-method"objectS…...

编程日记 2024/9/10 0:09:52

基于人工智能的智能安防监控系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据采集与预处理模型训练与预测实时监控与检测应用场景结论 1. 引言 随着科技的发展&#xff0c;智能安防监控系统逐渐成为家庭、企业和公共场所保障安全的核心工具。通过人工智能和计…...

编程日记 2024/9/10 0:08:45

分享从零开始学习网络设备配置--任务6.3 使用基本ACL限制网络访问

任务描述 某公司构建了互联互通的办公网&#xff0c;为保护公司内网用户数据的安全&#xff0c;该公司实施内网安全防范措施。公司分为经理部、财务部和销售部&#xff0c;分属3个不同的网段&#xff0c;3个部门之间用路由器进行信息传递。为了安全起见&#xff0c;公司领导要求…...

编程日记 2024/9/10 0:07:40

数据结构——线性表（静态链表、循环链表以及双向链表）

1、静态链表 用数组描述的链表叫做静态链表&#xff0c;这种描述方法叫做游标实现法。 静态链表需要对数组的第一个和最后一个元素作为特殊元素处理&#xff0c;不存数据。 最后一个指向第一个有数据的下标地址&#xff0c;第一个游标指向第一个没有数据的下标地址。 我们对…...

编程日记 2024/9/10 0:06:39

vue3_对接腾讯_实时音视频

项目需要对接腾讯的实时音视频产品&#xff0c;我这里选择的是多人会议&#xff0c;选择其他实时音视频产品对接流程也一样&#xff0c;如何对接腾讯实时音视频的多人会议产品&#xff0c;从开通服务到对接完成&#xff0c;一 一讲解。 一、开通腾讯实时音视频 1.腾讯实时音视…...

编程日记 2024/9/10 0:05:38

一台电脑对应一个IP地址吗？‌探讨两台电脑共用IP的可能性

在当今数字化时代&#xff0c;‌IP地址作为网络世界中的“门牌号”&#xff0c;‌扮演着至关重要的角色。‌它负责在网络上唯一标识每一台设备&#xff0c;‌使得数据能够在庞大的互联网中准确无误地传输。‌然而&#xff0c;‌对于IP地址与电脑之间的对应关系&#xff0c;‌许…...

编程日记 2024/9/10 0:03:33

XInput手柄输入封装

功能全面地封装了XInput的输入, 1. 普通按钮按下, 按住, 弹起状态检查, 2. 摇杆4个方向的按下, 按住, 弹起检查 3. 按键状态变化检测并且记录按下触发时间, 按住保持时间, 方便用来完全自定义的输入功能 4. 多手柄输入合并 CXinputHelper.h #pragma once #include <win…...

编程日记 2024/9/10 0:00:31

NodeMCU-ESP8266+flash_download_tool_3.9.7 烧录

USB-TTL 接 NodeMCU的RXD0, TXD0, GND 例程hello_world&#xff1a; Eclipse编译信息&#xff1a; python /d/ESP/ESP8266_RTOS_SDK/ESP8266_RTOS_SDK/components/esptool_py/esptool/esptool.py --chip esp8266 --port COM6 --baud 115200 --before default_reset --after …...

编程日记 2024/9/9 23:59:30

首例开源的自动驾驶混合运动规划框架，手握“规划可解释”和“决策准确”两张王牌！

导读&#xff1a; 本文开发了一种新的混合运动规划方法&#xff0c;将环境和预测信息集成在Frenet坐标系中&#xff0c;提升了运动规划能力。本文将传统运动规划算法的可预测性和稳定性与RL的动态适应性相结合&#xff0c;从而形成了一个能够有效管理复杂情况并适应不断变化的环…...

编程日记 2024/9/9 23:58:29

数据结构之红黑树的 “奥秘“

目录&#xff1a; 一.红黑树概念 二. 红黑树的性质 三.红黑树的实现 四.红黑树验证 五.AVL树和红黑树的比较 一.红黑树概念 1.红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。 通过对任何 一条从根…...

编程日记 2024/9/9 23:57:28

【鸿蒙 HarmonyOS NEXT】使用EventHub进行数据通信

✨本人自己开发的开源项目&#xff1a;土拨鼠充电系统 ✨踩坑不易&#xff0c;还希望各位大佬支持一下&#xff0c;在GitHub给我点个 Start ⭐⭐&#x1f44d;&#x1f44d; ✍GitHub开源项目地址&#x1f449;&#xff1a;https://github.com/cheinlu/groundhog-charging-syst…...

编程日记 2024/9/9 23:55:26

大模型RAG实战｜构建知识库：文档和网页的加载、转换、索引与存储

我们要开发一个生产级的系统&#xff0c;还需要对LlamaIndex的各个组件和技术进行深度的理解、运用和调优。本系列将会聚焦在如何让系统实用上&#xff0c;包括&#xff1a;知识库的管理&#xff0c;检索和查询效果的提升&#xff0c;使用本地化部署的模型等主题。我将会讲解相…...

编程日记 2024/9/9 23:54:25

江协科技stm32————11-5 硬件SPI读写W25Q64

一、开启时钟&#xff0c;开启SPI和GPIO的时钟 二、初始化GPIO口&#xff0c;其中SCK和MOSI是由硬件外设控制的输出信号&#xff0c;配置为复用推挽输出 MISO是硬件外设的输入信号&#xff0c;配置为上拉输入&#xff0c;SS是软件控制的输出信号&#xff0c;配置为通用推挽输出…...

编程日记 2024/9/9 23:53:25

网络编程day04（UDP、Linux IO 模型）

目录 【1】UDP 1》通信流程 2》函数接口 1> recvfrom 2> sendto 3》代码展示 1> 服务器代码 2> 客户端代码 【2】Linux IO 模型 场景假设一 1》阻塞式IO&#xff1a;最常见、效率低、不耗费CPU 2》 非阻塞 IO&#xff1a;轮询、耗费CPU&#xff0c;可以处…...

编程日记 2024/9/9 23:50:22

【android10】【binder】【2.servicemanager启动——全源码分析】

系列文章目录 可跳转到下面链接查看下表所有内容https://blog.csdn.net/handsomethefirst/article/details/138226266?spm1001.2014.3001.5501文章浏览阅读2次。系列文章大全https://blog.csdn.net/handsomethefirst/article/details/138226266?spm1001.2014.3001.5501 目录 …...

编程日记 2024/9/9 23:47:20

Java实现简易计算器功能（idea）

目的&#xff1a;写一个计算器&#xff0c;要求实现加减乘除功能&#xff0c;并且能够循环接收新的数据&#xff0c;通过用户交互实现。 思路&#xff1a; &#xff08;1&#xff09;写4个方法&#xff1a;加减乘除 &#xff08;2&#xff09;利用循环switch进行用户交互 &…...

编程日记 2024/9/9 23:46:19

Parsec问题解决方案

Parsec目前就是被墙了&#xff0c;有解决方案但治标不治本&#xff0c;如果想稳定串流建议是更换稳定的串流软件&#xff0c;以下是一些解决方案 方案一&#xff1a;在%appdata%/Parsec/config.txt中&#xff0c;添加代理 app_proxy_address 127.0.0.1 app_proxy_scheme http…...

编程日记 2024/9/9 23:43:14

Swift 创建扩展(Extension)

类别(Category) 和 扩展(Extension) 的 用法很多. 常用的 扩展(Extension) 有分离代码和封装模块的功能,例如登陆页面有注册功能,有登陆功能,有找回密码功能,都写在一个页面就太冗余了,可以考虑使用 扩展(Extension) 登陆页面的方法来分离代码 本文介绍Swift 如何创建扩展(Ex…...

编程日记 2024/9/9 23:39:10

九月五日（k8s配置）

一、安装环境 环境准备&#xff1a;&#xff08;有阿里云&#xff09; k8s-master 192.168.1.11 k8s-node1 192.168.1.22 k8s-node2 192.168.1.33 二、前期准备 在k8s-master主机 [rootk8s-master ~]# vim /etc/hosts …...

编程日记 2024/9/9 23:38:09

某极验4.0 -消消乐验证

⚠️前言⚠️ 本文仅用于学术交流。 学习探讨逆向知识&#xff0c;欢迎私信共享学习心得。 如有侵权&#xff0c;联系博主删除。 请勿商用&#xff0c;否则后果自负。 网址 aHR0cHM6Ly93d3cyLmdlZXRlc3QuY29tL2FkYXB0aXZlLWNhcHRjaGE 1. 浅聊一下 验证码样式 验证成功 - …...

编程日记 2024/9/9 23:35:06

洛谷 P10798 「CZOI-R1」消除威胁

题目来源于&#xff1a;洛谷 题目本质&#xff1a;贪心&#xff0c;st表&#xff0c;单调栈 解题思路&#xff1a;由于昨天联练习了平衡树&#xff0c;我就用平衡树STL打了个暴力&#xff0c;超时得了30分 这是暴力代码&#xff1a; #include<bits/stdc.h> using name…...

编程日记 2024/9/9 23:34:05

Pow(x, n)

题目 实现 pow(x, n) &#xff0c;即计算 x 的 n 次幂函数&#xff08;即&#xff0c;xn&#xff09;。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;1024.00000示例 2&#xff1a; 输入&#xff1a;x 2.10000, n 3 输出&#xff1a;9.26100示…...

编程日记 2024/9/9 23:33:04