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

【2024】前端学习笔记9-内部样式表-外部导入样式表-类选择器

news 2025/9/20 20:34:05

学习笔记

  • 内部样式表
  • 外部导入样式表
  • 类选择器：class

内部样式表

内部样式表是将 CSS 样式规则写在 HTML 文档内部。通过<style>标签在 HTML 文件的<head>部分定义样式。

简单示例：

   <!DOCTYPE html><html><head><style>p {color: red;font - size: 16px;}</style></head><body><p>这是一个段落。</p></body></html>

其中<head>部分的<style>就是一个内部样式表，<p>是选择器，这个真是规则针对<html>中所有的<p>元素做出规范，在此例中是设置颜色为红色，字体大小为16px。

对于小项目而言定制方便，易于修改和维护；缺点是缺乏代码复用性，不利于大型项目。

需要注意行内样式表优先级高于内部样式表。

外部导入样式表

外部样式表是将 CSS 样式规则写在一个独立的.css 文件中，然后通过 HTML 文件引入这个.css 文件来应用样式。在 HTML 文件中，使用<link>标签来导入外部样式表。

示例：

我的项目中有一个css目录，其中有一个test.css文件，其中定义着以下内容：

p {color: blue;font-size: 20px;
}

然后在html中引用此css文件

<head><link rel = "stylesheet" href = "css/test.css">
</head>
<body><p>这是一个段落。</p>

展示效果：

在这里插入图片描述

link标签的rel属性值为stylesheet，表示这是一个样式表链接；href属性指定外部样式表的路径。

注意：link的位置决定哪个生效，如果在style后面则是link生效，在前面则是style生效。

类选择器：class

类选择器是 CSS 中一种常用的选择器，用于选择具有特定类名（class）的 HTML 元素。类名是开发人员在 HTML 元素的class属性中自定义定义的标识。

在 CSS 中，类选择器以一个点（.）开头，后面跟着类名。

示例：

一个test.css文件中定义两个元素，分别为intro和background。

.intro {color: blue;font-size: 20px;
}.background {width: 300px; height: 200px;background-color: royalblue;padding: 20px;margin: 20px;border-radius: 10px;
}

然后在html中引用

<!DOCTYPE html>
<html>
<head><link rel = "stylesheet" href = "css/test.css"> 
</head>
<body><p class="intro">这是一个段落。</p><div class="background"></div>
</body>
</html>

展示效果：

在这里插入图片描述
使用类选择器的优势：

  • 类选择器可以在多个不同的 HTML 元素上使用
  • 通过类选择器可以方便地对元素进行样式分组

相关文章：

【2024】前端学习笔记9-内部样式表-外部导入样式表-类选择器

学习笔记 内部样式表外部导入样式表类选择器&#xff1a;class 内部样式表 内部样式表是将 CSS 样式规则写在 HTML 文档内部。通过<style>标签在 HTML 文件的<head>部分定义样式。 简单示例&#xff1a; <!DOCTYPE html><html><head><style…...

编程日记 2024/9/20 15:21:28

回归传统，Domino拷贝式迁移！

大家好&#xff0c;才是真的好。 前面讲太多普及型的概念&#xff0c;今天我们来点实在的内容。 在Notes/Domino的黄金年代&#xff0c;有一件事情大家干得风生水起&#xff0c;那就是Domino服务器迁移。 要么迁移到另一台硬件服务器上&#xff0c;要么迁移到新换的磁盘当中…...

编程日记 2024/9/20 15:20:27

商品搜索API返回值解析：关键字搜索如何优化商品推荐

优化商品推荐 关键字搜索优化&#xff1a;分析用户搜索的关键字&#xff0c;并确定每个关键字的权重&#xff0c;使用这些权重来调整搜索结果和推荐结果的相关性。 taobao.item_search 公共参数 请求地址: 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接…...

编程日记 2024/9/20 15:18:22

暴雨总裁孙辉：不是所有应用都要追求“大”模型

9月19日&#xff0c;在暴雨青海渠道大会上&#xff0c;暴雨总裁孙辉谈及了AI的发展趋势和暴雨的智能化战略。 当前AI依然火热&#xff0c;孙辉认为&#xff1a;“从商业应用角度看&#xff0c;从来没有一项技术进步像AI一样&#xff0c;在如此短的时间内产生如此大的影响。AI技…...

编程日记 2024/9/20 15:15:19

【掌桥科研-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…...

编程日记 2024/9/20 15:13:13

BERT推理显存爆满？7个实用技巧教你快速优化！显存优化的最佳实践指南

如果只使用BERT进行推理得到词向量&#xff0c;但显存仍然爆满&#xff0c;以下几个建议可以帮助缓解显存问题&#xff1a; 分批处理&#xff08;Batching&#xff09;&#xff1a; 即使是在推理阶段&#xff0c;也可以将输入数据分成较小的批次&#xff08;batch&#xff09;&…...

编程日记 2024/9/20 15:12:12

JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)

大家好&#xff0c;今天我要分享的是如何在树形结构的数据中&#xff0c;根据特定条件设置节点及其所有子节点的显示属性。在实际项目中&#xff0c;这种需求非常常见&#xff0c;特别是在需要动态展示和隐藏节点的情况下。下面我将通过一个具体的示例来讲解实现过程。 需求分析…...

编程日记 2024/9/20 15:08:08

第二证券：金价涨了！创一历史之最！

当地时间周四&#xff0c;金融商场进一步消化美联储大幅降息50个基点的利率抉择&#xff0c;认为这是为了完结美国经济“软着陆”的一次防备式降息&#xff0c;而非紧急应对阑珊风险的降息&#xff0c;加之当天公布的上星期初度申请赋闲救助人数低于预期&#xff0c;投资者对美…...

编程日记 2024/9/20 15:07:07

maxwell 输出消息到 kafka

文章目录 1、kafka-producer2、运行一个Docker容器&#xff0c;该容器内运行的是Zendesk的Maxwell工具&#xff0c;一个用于实时捕获MySQL数据库变更并将其发布到Kafka或其他消息系统的应用3、进入kafka容器内部4、tingshu_album 数据库中 新增数据5、tingshu_album 数据库中 更…...

编程日记 2024/9/20 15:05:04

青柠视频云——视频丢包（卡顿、花屏、绿屏）排查

一、问题说明 近期有客户反馈&#xff0c;接入平台的设备经常出来卡顿、花屏、录屏的情况&#xff0c;出现这样的场景很是尴尬。 客户是私有化部署在公网环境&#xff0c;于是我们联系客户&#xff0c;对问题进行追踪排查。 二、场景复现 我们现场情况确认的过程中&#xff0c;…...

编程日记 2024/9/20 15:04:03

单片机原理及应用

引言 单片机&#xff08;Microcontroller Unit, MCU&#xff09;作为现代电子技术的核心之一&#xff0c;广泛应用于工业自动化、消费电子、医疗设备、汽车电子、航空航天等多个领域。它集成了CPU&#xff08;中央处理器&#xff09;、存储器、输入输出接口及定时/计数器等功能…...

编程日记 2024/9/20 15:02:00

sql中拼接操作

SQL中的拼接操作 常用listagg聚合函数用法 也可用 XMLAGG代替上述操作 常用listagg聚合函数 LISTAGG(column, [separator]) WITHIN GROUP (ORDER BY order_by_clause)column&#xff1a;你想要连接起来的列。 [separator]&#xff1a;可选参数&#xff0c;用于指定列值之间的分…...

编程日记 2024/9/20 15:00:58

基于C语言+SQL Server2008实现（控制台）图书管理系统

第1章 概述 1.1项目背景 随着科技的发展&#xff0c;尤其是计算机技术的迅猛发展&#xff0c;图书馆管理的问题从以往的人工管理&#xff0c;到现在的电脑化&#xff0c;系统化&#xff0c;是对图书馆管理方法的质的飞跃&#xff0c;这些技术不仅让图书馆管理变得更加方便、快…...

编程日记 2024/9/20 14:57:55

Msf之Python分离免杀

Msf之Python分离免杀 ——XyLin. 成果展示&#xff1a; VT查杀率:8/73 (virustotal.com) 火绒和360可以过掉&#xff0c;但Windows Defender点开就寄掉了 提示&#xff1a;我用360测的时候&#xff0c;免杀过了&#xff0c;但360同时也申报了&#xff0c;估计要不了多久就寄…...

编程日记 2024/9/20 14:56:54

electron-updater实现electron全量版本更新

在 Electron 应用中使用 electron-updater 来实现自动更新功能时&#xff0c;通常你会在一个专门的模块或文件中管理更新逻辑。如果你想要使用 ES6 的 import 语法来引入 electron-updater&#xff0c;你需要确保你的项目已经配置好了支持 ES6 模块的构建工具&#xff08;如 We…...

编程日记 2024/9/20 14:55:53

Mysql梳理6——order by排序

目录 6 order by排序 6.1 排序数据 6.2 单列排序 6.3 多行排列 6 order by排序 6.1 排序数据 使用ORDER BY字句排序 ASC&#xff08;ascend&#xff09;:升序DESC(descend):降序 ORDER BY子句在SELECT语句的结尾 6.2 单列排序 如果没有使用排序操作&#xff0c;默认…...

编程日记 2024/9/20 14:54:52

Java设计模式—面向对象设计原则(三) -----＞ 依赖倒转原则DIP(完整详解，附有代码+案例)

文章目录 3.3 依赖倒转原则(DIP)3.3.1概述3.3.2 案例 3.3 依赖倒转原则(DIP) 依赖倒转原则&#xff1a;Dependency Inversion Principle&#xff0c;DIP 3.3.1概述 高层模块不应该依赖低层模块&#xff0c;两者都应该依赖其抽象&#xff1b;抽象不应该依赖细节&#xff0c;细…...

编程日记 2024/9/20 14:51:48

Linux操作系统 进程(3)

接上文 Linux进程优先级之后&#xff0c;我们了解到僵尸进程与孤儿进程的形成原因&#xff0c;既然是因为父进程没有接收子进程的退出状态导致的&#xff0c;那么我们该如何去获取子进程的退出状态呢&#xff1f;那本篇文章将围绕这个问题来解释进程。 环境 &#xff1a; vsco…...

编程日记 2024/9/20 14:49:46

QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第五期]

QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第五期] 第五期介绍&#xff1a;频道模块之接口授权管理和发言管理 目录 QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第五期]第五期介绍&#xff1a;频道模块之接口授权管理和发言管理获取机器人在频道可用权限列表…...

编程日记 2024/9/20 14:48:45

代码签名证书快速申请指南

申请代码签名证书是确保软件或应用程序在分发和安装过程中不被篡改的重要步骤。以下是详细的快速申请指南&#xff1a; 一、选择证书品牌和服务商 选择知名证书品牌&#xff1a;首先&#xff0c;选择一个国际知名的代码签名证书品牌&#xff0c;如GlobalSign、Digicert、Comod…...

编程日记 2024/9/20 14:47:44

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/9/17 23:20:26

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/9/8 21:10:29

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/9/7 8:50:46

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/9/19 3:20:21

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/9/9 10:10:16

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2025/9/3 11:05:24

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2025/9/13 17:31:41

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

编程新知 2025/9/15 9:06:23

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

编程新知 2025/9/17 20:46:11