随笔- 86 文章- 0 评论- 0 阅读- 25338

文本

文本颜色和背景色

color 属性用于设置文本的颜色，background-color属性用于设置文本的背景颜色
颜色由以下值指定：
- 颜色名，例如 blue
- 十六进制值，例如 #FF0000
- RGB 值（RGBA），例如 RGBA(0, 255, 255, 0.3)

文本对齐

text-align属性用来设置元素中文本的水平对齐方式，该属性的常用可选值如下：

值描述

left 默认值，左对齐

right 右对齐

center 居中对齐

justify 两端对齐
vertical-align属性用来定义元素内文本的垂直对齐方式，通常使用在图片上，将图片垂直方向的中线与文本的中线（文字元素行内框的中线）对齐

值	描述
left	默认值，左对齐
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

text-decoration 属性用于设置或删除文本装饰
最常用的做法就是使用 text-decoration: none 属性来删除<a>标签的默认下划线

该属性的可选值如下：

值	描述
none	默认值，标准文本，没有额外装饰，可以用来删除已有的文本装饰
underline	在文本下方添加一条下划线
overline	在文本上方添加一条上划线
line-through	在文本的中间定义一条横向贯穿文本的线（类似于删除线）

文字间距

text-indent属性用来为元素中的文本添加首行缩进的效果
letter-spacing属性用来设置字符之间的间距（可为负值）
word-spacing 属性用于指定文本中单词之间的间距
line-height 属性用于指定行之间的间距，即行高
height属性设置元素的高度，即块高度

文本转换

text-transform属性用来控制文本中英文字母的大小写
通过该属性可以在不修改原文的基础上，将文本中的英文统一更改为小写字母、大写字母或者首字母大写的形式

该属性的可选值如下：

值	描述
none	默认值，以原文显示，对文本中的英文不做更改
capitalize	将文本中的每个单词更改为以大写字母开头的形式
uppercase	将文本中的英文字母全部更改为大写
lowercase	将文本中的英文字母全部更改为小写

文本阴影

text-shadow属性用来为文本添加阴影及模糊效果，属性的语法格式如下：
```
 text-shadow: h-shadow v-shadow blur color;
```
- h-shadow：必填值，设置阴影的水平位置，允许为负值
- v-shadow：必填值，设置阴影的垂直位置，允许为负值
- blur：可选值，设置模糊的距离（模糊半径）
- color：可选值，设置阴影的颜色

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            /* 颜色: 单词 RGB RGBA */
            color: RGBA(0, 255, 255, 0.3);
            /* 排版: 居中 */
            text-align: center;
        }
 
        .p1 {
            /* 首行缩进(1em等于一个字) */
            text-indent: 2em;
        }
 
        .p2 {
            /* 文字阴影效果 */
            text-shadow: 10px 10px 2px orange;
        }
 
        .p3 {
            /* 背景颜色 */
            background-color: blueviolet;
            /* 块高度 */
            height: 200px;
            /* 行高 */
            line-height: 200px;
            /* 转换为大写字母 */
            text-transform: uppercase;
            /* 字符间距 */
            letter-spacing: -3px;
        }
 
        a {
            /* 从链接上删除下划线 */
            text-decoration: none;
        }
 
        .line1 {
            /* 上划线 */
            text-decoration: overline;
        }
 
        .line2 {
            /* 中划线 */
            text-decoration: line-through;
        }
 
        .line3 {
            /* 下划线 */
            text-decoration: underline;
        }
 
        img, span {
            /* 图片与文字中线对齐 */
            vertical-align: middle;
        }
    </style>
</head>
 
<body>
    <a href="http://">a标签(链接)去下划线</a>
 
    <p class="line1">上划线</p>
    <p class="line2">中划线</p>
    <p class="line3">下划线</p>
 
    <h1>故事介绍</h1>
    <p class="p1">在阿克佩乐高大陆，冒险者们发现通过一个隐秘的洞窟就可以到达一个极度冰冷的地方，里面充满了巨大的冰层。</p>
    <p class="p2">一头肥硕的白熊从洞窟深处向人群中冲来，没人知道这头熊从哪里来，它在洞中呆了多久，它又是靠吃什么生存下来的。白熊一身蛮肉，孔武有力，不好对付，必须打败它，才能继续探险之旅!</p>
 
    <img src="C:\Windows\Web\Wallpaper\Windows\imgX.jpg" alt="img" width="160px" , height="100px">
    <span>文本中图像的垂直对齐</span>
 
    <p class="p3">But you, gods, will give us some faults to make us men.</p>
</body>
 
</html>

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。

posted @ 2022-09-19 10:41 TNTksals 阅读(280) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 网页基本标签

· 属性选择器

· 13文本属性

· CSS - 9、文本属性

· 文本颜色color 文本对齐文本装饰文本缩进

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现

公告

昵称： TNTksals
园龄： 3年4个月
粉丝： 4
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

TNTksals

那些隔过黑暗的花与水......

文本

文本

文本颜色和背景色

文本对齐

文字装饰

文字间距

文本转换

文本阴影

示例

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	h1 {
	/* 颜色: 单词 RGB RGBA */
	color: RGBA(0, 255, 255, 0.3);
	/* 排版: 居中 */
	text-align: center;
	}

	.p1 {
	/* 首行缩进(1em等于一个字) */
	text-indent: 2em;
	}

	.p2 {
	/* 文字阴影效果 */
	text-shadow: 10px 10px 2px orange;
	}

	.p3 {
	/* 背景颜色 */
	background-color: blueviolet;
	/* 块高度 */
	height: 200px;
	/* 行高 */
	line-height: 200px;
	/* 转换为大写字母 */
	text-transform: uppercase;
	/* 字符间距 */
	letter-spacing: -3px;
	}

	a {
	/* 从链接上删除下划线 */
	text-decoration: none;
	}

	.line1 {
	/* 上划线 */
	text-decoration: overline;
	}

	.line2 {
	/* 中划线 */
	text-decoration: line-through;
	}

	.line3 {
	/* 下划线 */
	text-decoration: underline;
	}

	img, span {
	/* 图片与文字中线对齐 */
	vertical-align: middle;
	}
	</style>
	</head>

	<body>
	<a href="http://">a标签(链接)去下划线</a>

	<p class="line1">上划线</p>
	<p class="line2">中划线</p>
	<p class="line3">下划线</p>

	<h1>故事介绍</h1>
	<p class="p1">在阿克佩乐高大陆，冒险者们发现通过一个隐秘的洞窟就可以到达一个极度冰冷的地方，里面充满了巨大的冰层。</p>
	<p class="p2">一头肥硕的白熊从洞窟深处向人群中冲来，没人知道这头熊从哪里来，它在洞中呆了多久，它又是靠吃什么生存下来的。白熊一身蛮肉，孔武有力，不好对付，必须打败它，才能继续探险之旅!</p>

	<img src="C:\Windows\Web\Wallpaper\Windows\imgX.jpg" alt="img" width="160px" , height="100px">
	<span>文本中图像的垂直对齐</span>

	<p class="p3">But you, gods, will give us some faults to make us men.</p>
	</body>

	</html>