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

十、HTML 样式- CSS

news 2026/5/12 4:21:15

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

浏览器端微信使用指南：告别繁琐安装，开启轻量沟通新时代

浏览器端微信使用指南&#xff1a;告别繁琐安装&#xff0c;开启轻量沟通新时代 【免费下载链接】wechat-need-web 让微信网页版可用 / Allow the use of WeChat via webpage access 项目地址: https://gitcode.com/gh_mirrors/we/wechat-need-web 还在为微信PC版的庞大…...

编程新知 2026/5/12 4:00:10

智能缓存优化LibraVDB视频数据库内存管理实战

1. 项目概述与核心价值 最近在折腾一个需要处理大量视频流和图像识别的项目&#xff0c;遇到了一个老生常谈但又极其棘手的问题&#xff1a;内存。尤其是在使用像LibraVDB这样的开源视频数据库进行帧级数据存取时&#xff0c;传统的缓存策略要么命中率低&#xff0c;要么内存占…...

编程新知 2026/5/12 3:58:09

003、TinyML与传统ML、边缘AI的区别与联系

TinyML与传统ML、边缘AI的区别与联系 从一次“模型跑死”的现场说起 上周帮一个做智能门锁的团队调模型，他们用MobileNetV2在STM32F4上做人脸检测。板子一上电，串口疯狂打印“HardFault”，复位后连RTOS都起不来。我一看代码，好家伙，直接把一个4MB的TFLite模型塞进了256K…...

编程新知 2026/5/12 3:45:40

从协议到代码：用Python仿真5G NR下行同步全流程（含PBCH解码与MIB解析）

从协议到代码&#xff1a;用Python仿真5G NR下行同步全流程&#xff08;含PBCH解码与MIB解析&#xff09; 在通信系统设计中&#xff0c;下行同步是终端接入网络的第一步关键操作。5G新空口(NR)技术引入了更复杂的同步信号结构&#xff0c;这对算法工程师和研究人员提出了更高要…...

编程新知 2026/5/12 3:05:33

Gemini自动生成PPT实战手册：从零输入到专业演示文稿，3步完成95%的幻灯片工作流

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Gemini自动生成PPT的核心原理与能力边界 Gemini 生成 PPT 的本质并非传统模板填充&#xff0c;而是基于多模态理解与结构化内容重构的端到端推理过程。其核心依赖于对用户输入&#xff08;文本、大纲、…...

编程新知 2026/5/12 2:07:20

别再只盯着密钥了！深入ESP32 eFuse，看懂flash加密背后的硬件安全逻辑

别再只盯着密钥了&#xff01;深入ESP32 eFuse&#xff0c;看懂flash加密背后的硬件安全逻辑 当你在ESP32项目中使用flash加密功能时&#xff0c;是否曾疑惑过&#xff1a;为什么简单地烧录几个eFuse位就能实现固件保护&#xff1f;那些看似神秘的DISABLE_DL_DECRYPT、FLASH_CR…...

编程新知 2026/5/12 1:52:29

鸿蒙 App 的 Task + State 双核心架构

子玥酱 &#xff08;掘金 / 知乎 / CSDN / 简书 同名&#xff09; 大家好&#xff0c;我是 子玥酱&#xff0c;一名长期深耕在一线的前端程序媛 &#x1f469;‍&#x1f4bb;。曾就职于多家知名互联网大厂&#xff0c;目前在某国企负责前端软件研发相关工作&#xff0c;主要聚…...

编程新知 2026/5/11 23:16:35

41_《智能体微服务架构企业级实战教程》智能助手主应用服务之创建FastMCP客户端

前言 配套视频教程： 在 Bilibili课堂、CSDN课程、51CTO学堂 同步发售，提供：源码+部署脚本+文档。 bilibili课堂视频教程：智能体微服务架构企业级实战教程_哔哩哔哩_bilibili CSDN课程视频教程：智能体微服务架构企业级实战教程_在线视频教程-CSDN程序员研修院 51CTO学堂…...

编程新知 2026/5/11 22:35:29

原来市面上这些匹克球装备制造厂，都有啥独特之处？

匹克球运动近年来愈发火热&#xff0c;市面上的匹克球装备制造厂也如雨后春笋般涌现&#xff0c;每个品牌都有其独特的优势和特点。下面为你介绍其中一部分具有代表性的厂家及其独特之处。凯瑞麟体育用品&#xff1a;科技与文化的融合凯瑞麟体育用品成立于2025年11月&#xff0…...

编程新知 2026/5/11 21:41:11

AD19原理图编译总报off grid pin警告？手把手教你从库源头搞定封装与栅格对齐

AD19原理图编译报off grid pin警告&#xff1f;从库源头解决封装与栅格对齐问题 每次在AD19中编译原理图时&#xff0c;看到那一长串的"off grid pin"警告&#xff0c;是不是感觉特别烦躁&#xff1f;这些看似无害的警告实际上可能隐藏着严重的设计隐患。作为一位经历…...

编程新知 2026/5/11 21:24:20