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

【前端】如何制作一个自己的网页（8）

news 文章来源：https://blog.csdn.net/fmc121104/article/details/142997204 2025/5/10 20:40:12

以下内容接上文。

CSS的出现，使得网页的样式与内容分离开来。

HTML负责网页中有哪些内容，CSS负责以哪种样式来展现这些内容。因此，CSS必须和HTML协同工作，那么如何在HTML中引用CSS呢？

CSS的引用方式有三种：内部样式表、外部样式表、行内样式。

接下来，我们将重点学习内部样式表。

内部样式表

内部样式表，是指将CSS放到 <style> 标签中，而<style>标签必须放在HTML的<head>标签内。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        /* 使用CSS，设置h3元素的颜色为red */

        h3 {

            color: red;    

        }

    </style>

</head>

<body>

    <h3>夜曲编程</h3>

    <p>https://np.baicizhan.com/</p>   

</body>

</html>

解释代码

<style>标签

<style> 标签，必须放在HTML的<head>标签内。

<style> 标签类似于一个容器，里面包含着文档的样式信息，标签内部需要放入具体的CSS代码。

CSS代码

CSS代码，必须放在 <style> 标签内，用于设置具体的样式。

第7-9行的CSS代码，表示设置h3元素的颜色为red。

内部样式表，将CSS样式定义在HTML文档的内部。当我们对单个页面进行设置样式时，会使得整体结构较为清晰。

外部样式表与行内样式

在复杂应用中，外部样式表是最常见的引用CSS的方式。在这里，我们简单介绍一下它的用法。

外部样式表，是指将CSS样式代码复制到一个文本文件后，另存为 .css 文件。

然后，我们通过HTML的<link>标签将这个样式文件应用到HTML中。

下面，我们来浏览一下它的代码。

首先，我们需要单独定义一个.css 格式的样式文件（例如style.css）

然后，我们在HTML中使用<link>标签引入这个style.css文件。

注意，<link> 标签也是放在<head>标签中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- 使用<link>标签，引入路径为style.css的CSS文件 -->

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

</head>

<body>

    <h3>夜曲编程</h3>

    <p>https://np.baicizhan.com/</p>   

</body>

</html>

<link>标签的两个属性：

rel：定义当前文档与被连接文档的关系。这里的"stylesheet"，表示被连接文档是一个样式表文件。

href：定义所连接外部样式表文件的路径。

外部样式表的最方便之处，就在于一个样式可以同时应用于多个页面。

我们可以通过同一个CSS文件，来设置不同HTML文档的样式。

有兴趣的同学可以本地尝试一下~

行内样式

行内样式，也叫内联样式，是在 HTML 元素标签的style属性中直接定义CSS样式。

由于行内样式定义在标签内部，所以它只对所在的标签有效。

行内样式，虽然可以很方便的为HTML元素设置CSS样式，但它的缺点也非常明显：

1. 需要在每个HTML元素的标签中定义style属性，很不方便；

2. 修改页面样式时需要对页面逐个修改；

3. 过多的行内样式会导致HTML文档的体积增大。

所以，不推荐过多使用行内样式。

总结：

相关文章：

【前端】如何制作一个自己的网页（8）

以下内容接上文。 CSS的出现&#xff0c;使得网页的样式与内容分离开来。 HTML负责网页中有哪些内容&#xff0c;CSS负责以哪种样式来展现这些内容。因此&#xff0c;CSS必须和HTML协同工作&#xff0c;那么如何在HTML中引用CSS呢&#xff1f; CSS的引用方式有三种&#xff1…...

编程日记 2024/10/18 7:13:26

Java之模块化详解

Java模块化&#xff0c;作为Java 9引入的一项重大特性&#xff0c;通过Java Platform Module System (JPMS) 实现&#xff0c;为Java开发者提供了更高级别的封装和依赖管理机制。这一特性旨在解决Java应用的封装性、可维护性和性能问题&#xff0c;使得开发者能够构建更加结构化…...

编程日记 2024/10/18 7:12:25

HTB：Knife[WriteUP]

目录 连接至HTB服务器并启动靶机 1.How many TCP ports are open on Knife? 2.What version of PHP is running on the webserver? 并没有我们需要的信息&#xff0c;接着使用浏览器访问靶机80端口 尝试使用ffuf对靶机Web进行一下目录FUZZ 使用curl访问该文件获取HTTP头…...

编程日记 2024/10/18 7:09:22

MOE论文详解(4)-GLaM

2022年google在GShard之后发表另一篇跟MoE相关的paper, 论文名为GLaM (Generalist Language Model), 最大的GLaM模型有1.2 trillion参数, 比GPT-3大7倍, 但成本只有GPT-3的1/3, 同时效果也超过GPT-3. 以下是两者的对比: 跟之前模型对比如下, 跟GShard和Switch-C相比, GLaM是第一…...

编程日记 2024/10/18 7:08:21

LeetCode322：零钱兑换

题目链接&#xff1a;322. 零钱兑换 - 力扣&#xff08;LeetCode&#xff09; 代码如下 class Solution { public:int coinChange(vector<int>& coins, int amount) {vector<int> dp(amount 1, INT_MAX);dp[0] 0;for(int i 0; i < coins.size(); i){fo…...

编程日记 2024/10/18 7:03:17

速盾：高防 cdn 提供 cc 防护？

在当今网络环境中&#xff0c;网站面临着各种安全威胁&#xff0c;其中 CC&#xff08;Challenge Collapsar&#xff09;攻击是一种常见的分布式拒绝服务攻击方式。高防 CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;作为一种有效的网络安全防…...

编程日记 2024/10/18 7:02:16

【大数据应用开发】2023年全国职业院校技能大赛赛题第10套

如有需要备赛资料和远程培训，可私博主，详细了解 目录 任务A：大数据平台搭建（容器环境）（15分） 任务B：离线数据处理（25分） 任务C：数据挖掘（10分） 任务D：数据采集与实时计算（20分） 任务E：数据可视化（15分） 任务F：综合分析（10分） 任务A：大数据平台搭…...

编程日记 2024/10/18 7:01:15

【源码部署】解决SpringBoot无法加载yml文件配置，总是使用8080端口方案

打开idea&#xff0c;file ->Project Structure 找到Modules &#xff0c;在右侧找到resource目录&#xff0c;是否指定了resource&#xff0c;点击对应文件夹会有提示...

编程日记 2024/10/18 7:00:14

2010年国赛高教杯数学建模B题上海世博会影响力的定量评估解题全过程文档及程序

2010年国赛高教杯数学建模 B题 上海世博会影响力的定量评估 2010年上海世博会是首次在中国举办的世界博览会。从1851年伦敦的“万国工业博览会”开始&#xff0c;世博会正日益成为各国人民交流历史文化、展示科技成果、体现合作精神、展望未来发展等的重要舞台。请你们选择感兴…...

编程日记 2024/10/18 6:59:13

使用nginx配置静态页面展示

文章目录 前言正文安装nginx配置 前言 目前有一系列html文件&#xff0c;比如sphinx通过make html输出的文件&#xff0c;需要通过ip远程访问&#xff0c;这就需要ngnix 主要内容参考&#xff1a;https://blog.csdn.net/qq_32460819/article/details/121131062 主要针对在do…...

编程日记 2024/10/18 6:57:11

[IOI2018] werewolf 狼人（Kruskal重构树 + 主席树）

https://www.luogu.com.cn/problem/P4899 首先&#xff0c;我们肯定要建两棵Kruskal重构树的&#xff0c;然后判两棵子树是否有相同编号节点 这是个经典问题&#xff0c;我们首先可以拍成dfs序&#xff0c;然后映射过去&#xff0c;然后相当于是判断一个区间是否有 [ l , r …...

编程日记 2024/10/18 6:54:08

snmpgetnext使用说明

1.snmpgetnext介绍 snmpgetnext命令是用来获取下一个节点的OID的值。 2.snmpgetnext安装 1.snmpgetnext安装 命令： yum -y install net-snmp net-snmp-utils [root@logstash ~]# yum -y install net-snmp net-snmp-utils Loaded plugins: fastestmirror Loading mirror …...

编程日记 2024/10/18 6:52:06

frameworks 之 触摸事件窗口查找

frameworks 之 触摸事件窗口查找 1. 初始化数据2. 查找窗口3. 分屏处理4. 检查对应的权限5.是否需要将事件传递给壁纸界面6. 成功处理 触摸流程中最重要的流程之一就是查找需要传递输入事件的窗口&#xff0c;并将触摸事件传递下去。 涉及到的类如下 frameworks/native/service…...

编程日记 2024/10/18 6:51:05

memset的用法

memset 是 C 语言标准库中的一个函数&#xff0c;用于将一块内存区域设置为特定的值。它的原型如下&#xff1a; c void *memset(void *s, int c, size_t n); - s 参数是要被填充的内存块的起始地址。 - c 参数是要填充的值。这个值会被转换为无符号字符&#xff0c;然后用来…...

编程日记 2024/10/18 6:50:01

阿里云国际站DDoS高防增值服务怎么样?

利用国外服务器建站的话&#xff0c;选择就具有多样性了&#xff0c;相较于我们常见的阿里云和腾讯云&#xff0c;国外的大厂商还有谷歌云&#xff0c;微软云&#xff0c;亚马逊云等&#xff0c;但是较之这些&#xff0c;同等产品进行比较的话&#xff0c;阿里云可以说当之无愧…...

编程日记 2024/10/18 6:46:57

open-cd中的changerformer网络结构分析

open-cd 目录 open-cd1.安装2.源码结构分析主干网络1.1 主干网络类2.neck2.Decoder3.测试模型6. changer主干网络 总结 该开源库基于&#xff1a; mmcv mmseg mmdet mmengine 1.安装 在安装过程中遇到的问题&#xff1a; 1.pytorch版本问题&#xff0c;open-cd采用的mmcv版本比…...

编程日记 2024/10/18 6:44:55

太速科技-426-基于XC7Z100+TMS320C6678的图像处理板卡

基于XC7Z100TMS320C6678的图像处理板卡 一、板卡概述 板卡基于独立的结构&#xff0c;实现ZYNQ XC7Z100DSP TMS320C6678的多路图像输入输出接口的综合图像处理&#xff0c;包含1路Camera link输入输出、1路HD-SDI输入输出、1路复合视频输入输出、2路光纤等视频接口&#xff0c;…...

编程日记 2024/10/18 6:41:52

asp.net Core 自定义中间件

内联中间件 中间件转移到类中 推荐中间件通过IApplicationBuilder 公开中间件 使用扩展方法 调用中间件 含有依赖项的 》》》中间件 参考资料...

编程日记 2024/10/18 6:40:51

掌握 C# 设计模式：从基础到依赖注入

设计模式是一种可以在开发中重复使用的解决方案&#xff0c;能够提高代码的可维护性、扩展性和复用性。C# 中常见的设计模式包括单例模式、工厂模式、观察者模式、策略模式等。本文将介绍这些常见的设计模式&#xff0c;并探讨 SOLID 原则和依赖注入&#xff08;Dependency Inj…...

编程日记 2024/10/18 6:38:48

根据json转HttpClient脚本

String json “{\n” " “paths”: {\n" " “/dev-api/system/subjectResult/exportUserList”: {\n" " “post”: {\n" " “tags”: [\n" " “bd-subject-result-controller”\n" " ],\n" " “summ…...

编程日记 2024/10/18 6:37:48

如何将LiDAR坐标系下的3D点投影到相机2D图像上

将激光雷达点云投影到相机图像上做数据层的前融合&#xff0c;或者把激光雷达坐标系下标注的物体点云的3d bbox投影到相机图像上画出来&#xff0c;都需要做点云3D点坐标到图像像素坐标的转换计算&#xff0c;也就是LiDAR 3D坐标转像素坐标。 看了网上一些文章都存在有错误或者…...

编程日记 2024/10/18 6:31:41

JAVA就业笔记6——第二阶段（3）

课程须知 A类知识&#xff1a;工作和面试常用&#xff0c;代码必须要手敲&#xff0c;需要掌握。 B类知识&#xff1a;面试会问道&#xff0c;工作不常用&#xff0c;代码不需要手敲&#xff0c;理解能正确表达即可。 C类知识&#xff1a;工作和面试不常用&#xff0c;代码不…...

编程日记 2024/10/18 6:28:39

02.04、分割链表

02.04、[中等] 分割链表 1、题目描述 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你不需要 保留 每个分区中各节点的初始相对位置。 2、解题思路 本题要求将链表分隔…...

编程日记 2024/10/18 6:25:37

Excel 中根据患者的就诊时间标记病例为“初诊”或“复诊”

1. 假设&#xff1a; 患者表&#xff1a;包含患者的基本信息&#xff0c;如患者 ID 和患者姓名。 病例表&#xff1a;包含病例信息&#xff0c;如患者 ID、就诊时间和就诊状态。 2. 操作步骤&#xff1a; 合并数据&#xff1a; 确保病例表中有一列包含患者 ID&#xff0c;以…...

编程日记 2024/10/18 6:24:36

遇到“mfc100u.dll丢失”的系统错误要怎么处理？科学修复mfc100u.dll

遇到“mfc100u.dll丢失”的系统错误会非常麻烦&#xff0c;因为mfc100u.dll是Microsoft Visual C 2010 Redistributable Package的重要部分&#xff0c;许多应用程序和游戏在运行时都需要调用这个文件。如果这个文件缺失&#xff0c;可能会导致相关软件或游戏启动失败。面对这种…...

编程日记 2024/10/18 6:23:35

[Linux] 逐层深入理解文件系统 （1）—— 进程操作文件

标题&#xff1a;[Linux] 文件系统 &#xff08;1&#xff09;—— 进程操作文件 个人主页水墨不写bug &#xff08;图片来源于网络&#xff09; 目录 一、进程与打开的文件 二、文件的系统调用与库函数的关系 1.系统调用open() 三、内存中的文件描述符表 四、缓冲区…...

编程日记 2024/10/18 6:22:34

RT-Thread 互斥量的概念

目录 概述 1 互斥量定义 1.1 概念介绍 1.2 线程优先级翻转问题 2 互斥量管理 2.1 结构体定义 2.2 函数接口介绍 2.2.1 rt_mutex_create函数 2.2.2 rt_mutex_delete 函数 2.2.3 初始化和脱离互斥量 概述 本文主要介绍互斥量的概念&#xff0c;实现原理。还介绍RT-Thre…...

编程日记 2024/10/18 6:21:33

6.计算机网络_UDP

UDP的主要特点&#xff1a; 无连接&#xff0c;发送数据之前不需要建立连接。不保证可靠交付。面向报文。应用层给UDP报文后&#xff0c;UDP并不会抽象为一个一个的字节&#xff0c;而是整个报文一起发送。没有拥塞控制。网络拥堵时&#xff0c;发送端并不会降低发送速率。可以…...

编程日记 2024/10/18 6:20:32

Windows应急响蓝安服面试

Windows应急响应 蓝队溯源流程 学习Windows应急首先要站在攻击者的角度去学习一些权限维持和权限提升的方法.,文章中的方法其实和内网攻防笔记有类似l红队教你怎么利用 蓝队教你怎么排查 攻防一体,应急响应排查这些项目就可以 端口/服务/进程/后门文件都是为了权限维持,得到s…...

编程日记 2024/10/18 6:18:29

PCL 点云配准-4PCS算法（粗配准）

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 加载点云数据 2.1.2 执行4PCS粗配准 2.1.3 可视化源点云、目标点云和配准结果 2.2完整代码 三、实现效果 3.1原始点云 3.2配准后点云 PCL点云算法汇总及实战案例汇总的目录地址链接…...

编程日记 2024/10/18 6:16:28