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

十、HTML 样式- CSS

news 2026/3/27 20:58:35

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

AIGlasses_for_navigation免配置环境：预置ffmpeg+opencv+torchvision全栈

AIGlasses_for_navigation免配置环境&#xff1a;预置ffmpegopencvtorchvision全栈 1. 引言&#xff1a;让AI视觉开发变得简单 如果你曾经尝试过搭建一个完整的AI视觉处理环境&#xff0c;一定知道那是个多么痛苦的过程&#xff1a;安装CUDA、配置ffmpeg、编译OpenCV、处理各…...

编程新知 2026/3/27 19:49:03

H3C交换机堆叠配置实战：从零开始搭建企业级网络环境

H3C交换机堆叠配置实战&#xff1a;从零开始搭建企业级网络环境 在中小型企业的网络架构中&#xff0c;交换机堆叠技术正逐渐成为简化管理、提升可靠性的标配方案。想象一下&#xff0c;当你的机房需要扩容时&#xff0c;不再需要逐台配置新交换机&#xff0c;所有设备如同一个…...

编程新知 2026/3/27 19:04:49

PyTorch张量拼接实战：torch.stack()与torch.cat()的5个典型场景对比

PyTorch张量拼接实战&#xff1a;torch.stack()与torch.cat()的5个典型场景对比 在深度学习项目中&#xff0c;数据维度的操作就像乐高积木的拼装——选错连接方式可能导致模型结构崩塌。作为PyTorch中高频使用的两种拼接操作&#xff0c;torch.stack()和torch.cat()常被混淆使…...

编程新知 2026/3/27 18:42:37

如何通过Vial-QMK打造专属键盘体验：从入门到精通的个性化定制指南

如何通过Vial-QMK打造专属键盘体验&#xff1a;从入门到精通的个性化定制指南 【免费下载链接】vial-qmk QMK fork with Vial-specific features. 项目地址: https://gitcode.com/gh_mirrors/vi/vial-qmk 在数字化时代&#xff0c;键盘作为人与计算机交互的核心工具&…...

编程新知 2026/3/27 16:57:34

用 OpenAI Codex 打造你的 AI 结对编程助手

用 OpenAI Codex 打造你的 AI 结对编程助手 告别重复劳动&#xff0c;让 AI 直接帮你写代码、修 Bug、跑测试 在 AI 编程工具层出不穷的今天&#xff0c;OpenAI Codex 依然是许多开发者心目中的“神器”。与普通的代码补全工具不同&#xff0c;Codex 是一款终端原生的 AI 编程助…...

编程新知 2026/3/27 16:49:32

从GigE Vision到千兆UDP：FPGA图像采集系统的灵活升级与10G MAC预留设计

从GigE Vision到千兆UDP&#xff1a;FPGA图像采集系统的灵活升级与10G MAC预留设计 在工业视觉和机器视觉领域&#xff0c;图像采集系统的带宽需求正以惊人的速度增长。随着4K、8K高分辨率相机的普及&#xff0c;以及多相机同步采集场景的增多&#xff0c;传统的千兆以太网接口…...

编程新知 2026/3/27 15:59:16

从浮点到定点：手把手教你用MATLAB自定义函数实现加减乘除（避坑溢出与精度损失）

从浮点到定点&#xff1a;手把手教你用MATLAB自定义函数实现加减乘除&#xff08;避坑溢出与精度损失&#xff09; 当算法需要从实验室环境迁移到嵌入式设备时&#xff0c;浮点运算的硬件开销常常成为瓶颈。这时定点数运算就像一把手术刀——精准控制每个比特的用途&#xff0c…...

编程新知 2026/3/27 15:18:56

OpenClaw安全加固指南：nanobot镜像的防火墙与权限配置

OpenClaw安全加固指南&#xff1a;nanobot镜像的防火墙与权限配置 1. 为什么需要安全加固&#xff1f; 当我第一次在本地部署OpenClaw时&#xff0c;最让我忐忑不安的就是安全问题。这个能操控我鼠标键盘、读写文件的AI助手&#xff0c;会不会不小心删掉我的重要文档&#xf…...

编程新知 2026/3/27 13:29:08

5倍效率提升：GIMP批量图像处理插件BIMP全攻略

5倍效率提升&#xff1a;GIMP批量图像处理插件BIMP全攻略 【免费下载链接】gimp-plugin-bimp 项目地址: https://gitcode.com/gh_mirrors/gi/gimp-plugin-bimp 在数字内容创作领域&#xff0c;批量图像处理是提升效率的关键环节。GIMP作为免费开源的图像编辑软件&#…...

编程新知 2026/3/27 12:50:50

3步颠覆传统性能管理：让你的华硕笔记本效能提升40%

3步颠覆传统性能管理&#xff1a;让你的华硕笔记本效能提升40% 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目地址: …...

编程新知 2026/3/27 11:11:54