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

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

news 文章来源：https://blog.csdn.net/qq_42527269/article/details/142380988 2025/5/9 5:24:12

学习笔记

  • 内部样式表
  • 外部导入样式表
  • 类选择器：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

安卓 uniapp跨端开发

HBuilder X 4.24 本地插件方式使用原生插件 例如 MT-TTS 地址PS: 播放 speek({text: ‘test’}) 应为 播放 speak({text: ‘test’})MT-TTS下载下来之后,将 nativeplugins 文件夹拷贝到 uniapp 项目根目录中manifest.json ---- App原生插件配置 运行 语音引擎测试文字转语音播…...

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

【高阶用法】uniapp的i18n多语言模块修复与增强(Typescript)

痛点 在i18n多语言模块使用过程中&#xff0c;发现下面几个问题&#xff0c;需要解决 1&#xff09;uni-best框架下&#xff0c;$t功能函数无法实时的切换语言&#xff0c;可能跟使用有关 2&#xff09;uni-best建议的translate方式在vue块外使用太繁琐&#xff0c;希望不用…...

编程日记 2024/9/20 14:43:39

SQL Server Data Tools (SSDT)入门教程

SSDT (SQL Server Data Tools) 是微软提供的一款用于开发、设计和管理SQL Server数据库的工具。它集成在Visual Studio中&#xff0c;允许开发人员和数据库管理员在统一的环境中进行数据库开发与管理。以下是关于SSDT的详细介绍&#xff1a; 1. 什么是SSDT&#xff1f; SQL S…...

编程日记 2024/9/20 14:42:37

窗户检测系统源码分享

窗户检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …...

编程日记 2024/9/20 14:39:33

2.计算机网络基础

2. 计算机网络基础 (1) 计算机网络的定义 计算机网络是指将地理位置不同、具有独立功能的多个计算机系统通过通信线路和设备连接起来，以功能完善的网络软件实现网络中资源共享的系统。最简单的定义是：计算机网络是一些互相连接的、自治的计算机系统的集合。最庞大的计算机网…...

编程日记 2024/9/20 14:37:31

硬中断，软中断恢复位置

汇编初始化栈指针&#xff0c;interrupt,svc preserve8 ;preserve8 和 restore8 通常用于保护寄存器的状态;以确保在函数调用前后某些寄存器的值保持不变area reset,code,readonlycode32entryb startldr pc,do_undefined;这些地址不能随便写&#xff0c;0x0,0x4,0x8....这些…...

编程日记 2024/9/20 14:36:30

MySQL基础（13）- MySQL数据类型

目录 一、数据类型概述 1.MySQL中的数据类型 二、整型 1.数据类型可选属性 2.使用建议 三、浮点数、定点数、位类型 1.类型介绍 2.浮点类型 3.定点数类型 4.位类型 四、日期时间类型 1.YEAR 2.DATE 3.TIME 4.DATETIME 5.TIMESTAMP 6.TIMESTAMP和DATETIME的区别…...

编程日记 2024/9/20 14:34:24

数据结构------二叉树简单介绍及实现

如果不是满二叉树或者完全二叉树&#xff0c;就要用链式存储 //搜索二叉树&#xff1a;左子树的所有值比根小&#xff0c;右子树的所有值比根大 // 实现查找&#xff0c;最多找高度次&#xff08;类似二分法&#xff09; //二分查找存在的问题&#xff1a…...

编程日记 2024/9/20 14:32:21

由一个 SwiftData “诡异”运行时崩溃而引发的钩深索隐（六）

概述 在 WWDC 24 中，苹果推出了数据库框架 SwiftData 2.0 版本。听说里面新增了能让数据记录“借尸还魂”的绝妙法器，到底是真是假呢？ 我们在上篇博文中介绍了 History Trace 是如何稳妥的处理数据删除操作的。而在这里，我们将继续介绍 SwiftData 2.0 中另一个新特性：“墓…...

编程日记 2024/9/20 14:31:20

尚品汇-秒杀下单实现-页面轮询查询订单状态（五十三）

目录&#xff1a; &#xff08;1&#xff09;整合秒杀业务 &#xff08;2&#xff09;秒杀下单 &#xff08;3&#xff09;秒杀下单监听 &#xff08;4&#xff09;页面轮询接口 &#xff08;1&#xff09;整合秒杀业务 秒杀的主要目的就是获取一个下单资格&#xff0c;拥…...

编程日记 2024/9/20 14:28:17