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

Web前端：CSS篇（二）背景，文本，链接

news 2026/2/9 21:56:23

CSS 背景

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

PS：一般来说，如果用的是好用点的文本编辑器，这个颜色是可以直接选择的

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

页面背景图片设置实例:

body {background-image:url('图片文件URL');}

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，

下面可以使图像只在水平方向平铺 (repeat-x)

body
{
background-image:url('图片文件URL'');
background-repeat:repeat-x;
}

背景图像- 设置定位与不平铺

如果你不想让图像平铺，你可以使用 background-repeat 属性:

body
{
background-image:url('图片文件URL'');
background-repeat:no-repeat;
}

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

补充：CSS3 多重背景(multiple backgrounds)

多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式：

background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意：

用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。

CSS 文本效果

文字颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head><body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head><body>
<h1>CSS text-align 实例</h1>
<p class="date">2024.8.17</p>
<p class="main">这是文本内容</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body></html>

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线，使界面更佳美观：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
a {text-decoration:none;}
</style>
</head><body>
<p>链接到: <a href="http://www.baidu.com/">百度</a></p>
</body></html>

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

设置字体大小像素

设置文字的大小与像素，让您完全控制文字大小：

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。

虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title>
<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body><h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>使用 em 单位，允许在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
</p>
</body>
</html>

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

CSS 链接

不同的链接可以有不同的样式。

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

常见的链接样式

根据上述链接的颜色变化的例子，看它是在什么状态。

让我们通过一些其他常见的方式转到链接样式：

文本修饰

text-decoration 属性主要用于删除链接中的下划线：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
</style>
</head><body>
<p><b><a href="/css/" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>

背景颜色

背景颜色属性指定链接背景色：

a:link {background-color:#B2FF99;} /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;} /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;} /* 鼠标点击时 */

Web前端：CSS篇（二）背景，文本，链接

CSS 背景背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中: body {background-color:#b0c4de;} CSS中，颜色值通常以以下方式定义: 十六进制 - 如："#ff0000"RGB - 如："rgb(255,0…...

编程日记 2024/8/18 18:58:53

ubuntu 24.04 软件源配置，替换为国内源

ubuntu 默认的官网源下载速度非常慢，新装 ubuntu 系统首先把 apt 软件源替换成国内源。 1、使用软件和更新设置国内源打开软件和更新，选择位于中国的服务器： 外链图片转存失败，源站可能有防盗链机制，建议将图片保存…...

编程日记 2024/8/18 18:56:49

【Java 并发编程】(三) 从CPU缓存开始聊 volatile 底层原理

并发编程三大问题在并发编程中，原子性、有序性和可见性是三个重要的问题，解决这三个问题是保证多线程程序正确性的基础。原子性: 指的是一个操作不可分割, 要么全部执行完成, 要么不执行, 不存在执行一部分的情况.有序性: 有序性是指程序的执行顺序与…...

编程日记 2024/8/18 18:50:43

YOLOV8网络结构|搞懂Backbone-Conv

参数量计算： (输入通道*w)*(输出通道*w)*k^2+(输出通道*w)*2 w是模型缩放里面的width - [-1, 1, Conv, [64, 3, 2]] # 0-P1/2 输出通道c2=64,k=3,s=2 P1/2 特征图变小一半先定义算子层再搭一个forward前向传播 class Conv(nn.Module):"""Standard convo…...

编程日记 2024/8/18 18:49:42

Elasticsearch Nested类型详解与实战

Elasticsearch（简称ES）是一个基于Lucene的全文搜索引擎，它提供了强大的搜索能力以及对数据的高效索引和查询。在ES中，数据通常以JSON格式存储，并且可以采用多种数据类型。其中，nested类型是一种特殊的对象数…...

编程日记 2024/8/18 18:48:40

网络编程，网络协议，UDP协议

网络： 1.协议：通信双方约定的一套标准 2.国际网络通信协议标准： 1.OSI协议： 应用层发送的数据内容表示层数据是否加密会话层是否建立会话连接传输层 …...

编程日记 2024/8/18 18:46:37

每日一题——第六十三题

题目：判断一个数是否为合数 #include <stdio.h> #include <stdbool.h> // 为了使用bool类型 // 函数声明，用于判断是否为合数 bool isComposite(int x); int main() { int x; printf("请输入一个正整数: "); scanf(&quo…...

编程日记 2024/8/18 18:45:37

人工智能算法，图像识别技术；基于大语言模型的跨境商品识别与问答系统；图像识别

目录一 .研究背景二,大语言模型介绍三,数据采集与预处理商品识别算法四. 跨境商品问答系统设计五.需要源码联系一 .研究背景在当今全球化的背景下，跨境电商行业迅速发展，为消费者提供了更广泛的购物选择和更便利的购物方式。然而&#xf…...

编程日记 2024/8/18 18:42:33

数据库系统第18节数据库安全

数据库安全是确保数据库管理系统（DBMS）中存储的数据的保密性、完整性和可用性的过程。以下是一些关键的数据库安全措施： 用户身份验证（Authentication）： 这是确定用户或系统是否有权访问数据库的第一步。通…...

编程日记 2024/8/18 18:41:31

Golang | Leetcode Golang题解之第338题比特位计数

题目： 题解： func countBits(n int) []int {bits : make([]int, n1)for i : 1; i < n; i {bits[i] bits[i&(i-1)] 1}return bits }...

编程日记 2024/8/18 18:39:29

【Python变量简析】

Python变量简析在 Python 中，变量是用于存储和操作数据的命名内存位置。变量的概念类似于代数中的方程变量，比如对于方程式 y x * x ，x 就是变量。 Python 变量具有以下特点： 变量名可以由字母、数字和下划线组成&#xff0c…...

编程日记 2024/8/18 18:33:21

智慧零售模式下物流优化与开源AI智能名片S2B2C商城系统的深度融合

摘要：在数字化浪潮的推动下，智慧零售模式正逐步成为零售业的新常态。该模式通过深度融合物联网、大数据、人工智能等先进技术，实现了线上线下无缝衔接，为消费者提供了更加便捷、个性化的购物体验。物流作为智慧零售的重要支撑&…...

编程日记 2024/8/18 18:31:19

socket和websocket 有什么区别

Socket 和 WebSocket 都用于网络通信，但它们的用途、协议、以及使用方式有所不同。以下是两者的主要区别： ### 1. **基础协议** - **Socket**: - Socket 是网络通信的一个抽象概念，通常基于传输层协议，如 TCP&#xff08…...

编程日记 2024/8/18 18:29:17

亿玛科技：TiDB 6.1.5 升级到 7.5.1 经验分享

作者： foxchan 原文来源： https://tidb.net/blog/6e628afd 为什么要升级？ 本次升级7.5的目的如下： 1、tidb有太多的分区表需要归档整理。7.5版本这个功能GA了。 2、之前集群tikv节点的region迁移过慢，影响tikv节…...

编程日记 2024/8/18 18:28:16

8.16-ansible的应用

编程日记 2024/8/18 18:25:13

相似度计算方法-编辑距离 (Edit Distance)

定义编辑距离（Edit Distance），也称为Levenshtein距离，是一种衡量两个字符串相似度的方法。它定义为从一个字符串转换为另一个字符串所需的最少单字符编辑操作次数，这些操作包括插入、删除或替换一个字符。计算方法 …...

编程日记 2024/8/18 18:23:10

初识FPGA

大学的时候有一门verilog语言，觉得很难，不愿学。有学习套件是黑金的一块FPGA开发板，可能当时点灯和点数码管了。全都忘了。今项目需要，使用FPGA中的ZYNQ，需要c语言开发，随即开始学习相关知识。 ZYNQ内部…...

编程日记 2024/8/18 18:22:09

探索 JavaScript：从入门到精通

目录 1. JavaScript 的介绍与基础示例：弹出欢迎信息 JavaScript，作为网络时代最流行的脚本语言之一，赋予了网页生动活泼的动态功能。无论是新手还是经验丰富的开发者，掌握 JavaScript 的核心概念和技能都是开启网络编程之门的钥…...

编程日记 2024/8/18 18:21:08

这4款视频压缩软件堪称是压缩界的神器！

视频在我们的日常设备当中会占用相对较多的空间，尤其是喜欢用视频记录的朋友。但是过多过大的视频不仅会给我们的设备带来了压力，也不利于分享和管理。今天我就要给大家分享几个视频压缩的小妙招。 1、福昕压缩直通车：www.foxitsoftware.cn…...

编程日记 2024/8/18 18:20:07

【ARM 芯片安全与攻击 5.6 -- 侧信道与隐蔽信道的区别】

文章目录侧信道与隐蔽信道的区别侧信道攻击（Side-channel Attack）侧信道攻击简介侧信道攻击使用方法侧信道攻击示例隐蔽信道（Covert Channel）隐蔽信道简介隐蔽信道使用方法隐蔽信道代码示例侧信道与隐蔽信道在芯片及系统安全方面的使用侧信道的应用隐蔽信道的应用Summary…...

编程日记 2024/8/18 18:19:04

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致：梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

使用VSCode开发Django指南

使用VSCode开发Django指南一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/8 16:24:38

QMC5883L的驱动

简介本篇文章的代码已经上传到了github上面，开源代码作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

【JVM】- 内存结构

引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

汽车生产虚拟实训中的技能提升与生产优化

在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

【生成模型】视频生成论文调研

工作清单上游应用方向：控制、速度、时长、高动态、多主体驱动类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/2/9 7:06:29

注意力热力图可视化在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2026/1/20 13:43:41

CSS 背景

背景颜色

背景图像

背景图像 - 水平或垂直平铺

背景图像- 设置定位与不平铺

CSS 文本效果

文字颜色

文本的对齐方式

文本修饰

文本转换

文本缩进

字体系列

字体样式

字体大小

设置字体大小像素

用em来设置字体大小

使用百分比和EM组合

CSS 链接

链接样式

常见的链接样式

文本修饰

背景颜色

相关文章：