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

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

news 2025/11/12 20:16:26

学习笔记

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

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/11/9 15:32:13

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/11/10 22:19:58

SpringAI实战：ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

编程新知 2025/9/27 0:41:04

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/8/17 6:30:11

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

编程新知 2025/11/11 2:15:46

加密通信 + 行为分析：运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

编程新知 2025/9/9 18:03:51

机器学习的数学基础：线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...

编程新知 2025/10/2 9:07:50

2025年- H71-Lc179--39.组合总和(回溯,组合）--Java版

1.题目描述 2.思路 当前的元素可以重复使用。 &#xff08;1&#xff09;确定回溯算法函数的参数和返回值&#xff08;一般是void类型&#xff09; &#xff08;2&#xff09;因为是用递归实现的&#xff0c;所以我们要确定终止条件 &#xff08;3&#xff09;单层搜索逻辑 二…...

编程新知 2025/11/10 3:13:54

虚幻基础：角色旋转

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 移动组件使用控制器所需旋转&#xff1a;组件 使用 控制器旋转将旋转朝向运动&#xff1a;组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转&#xff1a;必须移动才能旋转&#xff0c;不移动不旋转控制器…...

编程新知 2025/10/24 21:11:44