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

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

news 2026/2/9 1:42:14

学习笔记

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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2026/2/8 16:53:48

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/23 8:33:56

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2026/1/31 13:18:46