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

十、HTML 样式- CSS

news 2025/12/15 16:25:10

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

一、实例

1、HTML使用样式

本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML使用样式</title><style type="text/css">h1 {color: red;}p {color: blue;}</style>
</head><body><h1>这是一个标题</h1><p>这是一个段落。</p>
</body></html>

 运行结果：

​

 2、本例演示如何使用样式属性做一个没有下划线的链接。

 如何使用 style 属性制作一个没有下划线的链接。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>做一个没有下划线的链接</title>
</head><body><a href="http://www.baidu.com/" style="text-decoration:none;">访问 baidu.com!</a></body></html>

 运行结果：

​

3、链接到一个外部样式表

本例演示如何 标签链接到一个外部样式表。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>​​​​​​​链接到一个外部样式表</title><link rel="stylesheet" type="text/css" href="styles.css">
</head><body><h1>我使用了外部样式文件来格式化文本 </h1><p>我也是!</p>
</body></html>

运行结果：

二、如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件。

三、内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

四、HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>​​​​​​背景颜色</title>
</head><body style="background-color:yellow;"><h2 style="background-color:red;">这是一个标题</h2><p style="background-color:green;">这是一个段落。</p>
</body></html>

运行结果：

五、HTML 样式实例 - 字体, 字体颜色 ，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML 样式实例 - 字体, 字体颜色 ，字体大小</title>
</head><body><h1 style="font-family:verdana;">一个标题</h1><p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
</body></html>

运行结果：

六、HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML 样式实例 - 文本对齐方式</title>
</head><body><h1 style="text-align:center;">居中对齐的标题</h1><p>这是一个段落。</p></body></html>

运行结果：

七、内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head><style type="text/css">body {background-color:yellow;}p {color:blue;}</style>
</head>

八、外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

九、HTML 样式标签

相关文章：

十、HTML 样式- CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。 一、实例 1、HTML使用样式 本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>HTM…...

编程日记 2024/1/9 10:27:53

Spring的mybatis整合

​ mybatis整合 主要是处理dao包下的接口和xml文件&#xff0c;以及service下的类和接口 第一步 在resource目录下创建mybatis-config.xml文件【注意点&#xff1a;mybatis-config.xml文件下通常都是写别名、和mappers】 <?xml version"1.0" encoding"U…...

编程日记 2024/1/9 10:22:48

React 入门 - 01

本章内容 目录 1. 简介1.1 初始 React1.2 React 相关技术点1.3 React.js vs Vue.js 2. React 开发环境准备2.1 关于脚手架工具2.2 create-react-app 构建一个 React 项目工程 1. 简介 1.1 初始 React React JS 是 Facebook 在 2013年5月开源的一款前端框架&#xff0c;其带来…...

编程日记 2024/1/9 10:20:46

Windows Server 2019 Standard 和 Datacenter 版本差异比较

文章目录 正式版本的通用功能差异锁定和限制差异服务器角色差异可用功能差异Windows 2019 ISO下载推荐阅读 在测试hyper-V的过程中&#xff0c;计划安装一个Windows 2019的OS&#xff0c;顺便了解Windows Server 2019 的 Standard 和 Datacenter 版本有哪些差异&#xff1f;我们…...

编程日记 2024/1/9 10:17:44

计算机网络的交通灯：停止-等待协议

停止-等待协议是一种在计算机网络通信中常用的协议&#xff0c;用于在数据传输过程中进行流量控制。它的核心思想是在发送端发送数据后&#xff0c;等待接收端的确认信号&#xff0c;确保数据的可靠传输。本文将深入探讨停止-等待协议的原理、优缺点以及在实际应用中的局限性。…...

编程日记 2024/1/9 10:14:38

命令行模式的rancher如何安装？

在学习kubectl操作的时候&#xff0c;发现rancher也有命令行模式&#xff0c;学习整理记录此文。 说明 rancher 命令是 Rancher 平台提供的命令行工具&#xff0c;用于管理 Rancher 平台及其服务。 前提 已经参照前文安装过了rancher环境了&#xff0c;拥有了自己的k8s集群…...

编程日记 2024/1/9 10:13:30

苍穹外卖Day01——总结1

总结1 1. 软件开发整体介绍1.1 软件开发流程1.2 角色分工1.3 软件环境 2. 苍穹外卖项目介绍2.1 项目介绍2.2 技术选项 3. Swagger4. 补充内容&#xff08;待解决...&#xff09; 1. 软件开发整体介绍 1.1 软件开发流程 1.2 角色分工 从角色分工里面就可以查看自己以后从事哪一…...

编程日记 2024/1/9 10:12:28

Java 基础（二）

数组 数组就是一个容器&#xff0c;用来存一批同类型的数据 数组关键要素&#xff1a;定义及初始化、元素访问和元素遍历 1.静态初始化数组 // 完整格式 数据类型[] 数组名 new 数据类型[]{元素1&#xff0c;元素2 &#xff0c;元素3… };// 简化格式数据类型[] 数组名 …...

编程日记 2024/1/9 10:08:25

BERT 模型是什么

科学突破很少发生在真空中。相反&#xff0c;它们往往是建立在积累的人类知识之上的阶梯的倒数第二步。要了解 ChatGPT 和 Google Bart 等大型语言模型 &#xff08;LLM&#xff09; 的成功&#xff0c;我们需要回到过去并谈论 BERT。 BERT 由 Google 研究人员于 2018 年开发&…...

编程日记 2024/1/9 10:06:23

Elasticsearch中object类型与nested类型以及数组之间的区别

一、区别&#xff1a; 0、一般情况下用object 类型来查es中为json对象的字段数据&#xff0c;用nested来查es中为JsonArray数组类型的字段数据。 1、默认情况下ES会把JSON对象直接映射为object类型&#xff0c;只有手动设置才会映射为nested类型 2、object类型可以直接使用普…...

编程日记 2024/1/9 10:01:17

办公文档，私人专用

一、安装Minio 1.1、创建文件夹&#xff0c;并在指定文件夹中下载minio文件 cd /opt mkdir minio cd minio touch minio.log wget https://dl.minio.io/server/minio/release/linux-amd64/minio1.2、赋予minio文件执行权限 chmod 777 minio1.3、启动minio ./minio server /…...

编程日记 2024/1/9 10:00:16

linux 使用log4cpp记录项目日志

为什么要用log4cpp记录项目日志 在通常情况下&#xff0c;Linux/UNIX 每个程序在开始运行的时刻&#xff0c;都会打开 3 个已经打开的 stream. 分别用来输入&#xff0c;输出&#xff0c;打印错误信息。通常他们会被连接到用户终端。这 3 个句柄的类型为指向 FILE 的指针。可以…...

编程日记 2024/1/9 9:57:13

Kafka集群部署

文章目录 一、实例配置二 、zookeeper集群安装三、kafka集群安装四、验证 没有提示&#xff0c;所有机器都执行 在kafka集群中引入zookeeper&#xff0c;主要是为了管理kafka集群的broker。负责管理集群的元数据信息&#xff0c;确保 Kafka 集群的高可用性、高性能和高可靠性。…...

编程日记 2024/1/9 9:56:12

软件测试|深入理解SQL CROSS JOIN：交叉连接

简介 在SQL查询中&#xff0c;CROSS JOIN是一种用于从两个或多个表中获取所有可能组合的连接方式。它不依赖于任何关联条件&#xff0c;而是返回两个表中的每一行与另一个表中的每一行的所有组合。CROSS JOIN可以用于生成笛卡尔积&#xff0c;它在某些情况下非常有用&#xff…...

编程日记 2024/1/9 9:54:10

数据权限-模型简要分析

权限管控可以通俗的理解为权力限制&#xff0c;即不同的人由于拥有不同权力&#xff0c;他所看到的、能使用的可能不一样。对应到一个应用系统&#xff0c;其实就是一个用户可能拥有不同的数据权限&#xff08;看到的&#xff09;和操作权限&#xff08;使用的&#xff09;。 …...

编程日记 2024/1/9 9:51:08

echarts柱状图加单位，底部文本溢出展示

刚开始设置了半天都不展示单位&#xff0c;后来发现是被挡住了&#xff0c;需要调高top值 // 基于准备好的dom&#xff0c;初始化echarts实例var myChart echarts.init(document.getElementById("echartD"));rankOption {// backgroundColor: #00265f,tooltip: {…...

编程日记 2024/1/9 9:50:07

x-cmd pkg | gh - GitHub 官方 CLI

目录 简介首次用户功能特点与 x-cmd gh 模块的关系相关作品进一步探索 简介 gh&#xff0c;是由 GitHub 官方使用 Go 语言开发和维护的命令行工具&#xff0c;旨在脚本或是命令行中便捷管理和操作 GitHub 的工作流程。 注意: 由于 x-cmd 提供了同名模块&#xff0c;因此使用官…...

编程日记 2024/1/9 9:49:06

Python解析XML，简化复杂数据操作的最佳工具！

更多Python学习内容&#xff1a;ipengtao.com XML&#xff08;可扩展标记语言&#xff09;是一种常见的文本文件格式&#xff0c;用于存储和交换数据。Python提供了多种库和模块&#xff0c;用于解析和操作XML文件。本文将深入探讨如何使用Python操作XML文件&#xff0c;包括XM…...

编程日记 2024/1/9 9:47:04

rpm数据库被破坏，无法使用yum

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 问题描述&#xff1a; 云服务器在安装了开源的HIDS插件后&#xff0c;发现安装了插件的服务器全部突然无法正常使用yum安装软件…...

编程日记 2024/1/9 9:41:00

国标GB28181视频监控EasyCVR平台：视频集中录制存储/云端录像功能及操作介绍

安防视频监控系统EasyCVR视频综合管理平台&#xff0c;采用了开放式的网络结构&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;同时还具备权限管理、设…...

编程日记 2024/1/9 9:39:59

RocketMQ延迟消息机制

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

编程新知 2025/12/10 15:30:40

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/12/10 2:57:55

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/10/12 2:43:11

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2025/12/15 8:00:52

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

编程新知 2025/11/3 8:50:43

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/11/1 12:32:15

[拓扑优化] 1.概述

常见的拓扑优化方法有&#xff1a;均匀化法、变密度法、渐进结构优化法、水平集法、移动可变形组件法等。 常见的数值计算方法有&#xff1a;有限元法、有限差分法、边界元法、离散元法、无网格法、扩展有限元法、等几何分析等。 将上述数值计算方法与拓扑优化方法结合&#…...

编程新知 2025/12/15 14:10:01