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

十、HTML 样式- CSS

news 2025/7/3 23:33:51

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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/6/30 7:02:19

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/6/17 14:49:12

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/6/18 5:34:10

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/6/25 7:34:58

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/7/2 15:27:51

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/6/21 15:30:57

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/6/24 6:22:14

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/6/19 14:18:18

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/6/24 4:03:42

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/7/3 18:27:24