CSS初级教程(文本)【第六天】

news2024/12/23 18:37:08

文章目录

  • 【1】CSS 文本[字体颜色|背景色]
  • 【2】CSS 文本对齐
  • 【3】CSS 文字装饰
  • 【4】CSS 文本转换[大写或小写]
  • 【5】CSS 文字间距
  • 【6】CSS 文本阴影
  • 【7】所有 CSS 文本属性

CSS上回学习链接
CSS初级教程 颜色【第一天】
CSS初级教程 背景【第二天】
CSS初级教程 边框【第三天】
CSS初级教程 边距、高度、宽度【第四天】
CSS初级教程(轮廓)【第五天】

【1】CSS 文本[字体颜色|背景色]

TEXT FORMATTING
文本格式化
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored “Try it Yourself” link.

该文本使用某些文本格式属性来设置样式。标题使用 text-align、text-transform 和 color 属性。段落缩进、对齐，并指定了字符间距。然后从这个彩色的“亲自试一试”链接中删除了下划线。
在这里插入图片描述
实例

<!DOCTYPE html>
<html>
<head>
<style>
div {/*内部风格 边距大小1px 实线 边距颜色灰色*/
  border: 1px solid gray;
  padding: 55px;/*文本缩进 上下左右8px*/
}

h1 {
  text-align: center;
  text-transform: uppercase;/*大写字母*/
  color: #4CAF50;/*字体颜色*/
}

p {
  text-indent: 20px;/*首行缩进*/
  text-align: justify;
  letter-spacing: 1px;/*间距*/
}

a {
  text-decoration: none;
  color: #ff0000;
}
</style>
</head>
<body>

<div>
  <h1>text formatting</h1>
  <p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
  The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored
  <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
</div>

</body>
</html>

在这里插入图片描述

【1】文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

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

查看 CSS 颜色值，以获取可能颜色值的完整列表。

页面的默认文本颜色是在 body 选择器中定义的。

实例

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: green;
}
</style>
</head>
<body>

<h1>这是标题 1</h1>

<p>这是一段普通的段落。请注意文本为蓝色。页面的默认文本颜色在 body 选择器中定义。</p>

<p>另一段文本。</p>

</body>
</html>

在这里插入图片描述

提示：对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性。

【2】文本颜色和背景色
在本例中，我们定义了 background-color 属性和 color 属性：

实例

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h1>此标题是带黑色背景的白色文本</h1>
<p>此页面有灰色背景和蓝色文本。</p>
<p>另一段文本。</p>

</body>
</html>

在这里插入图片描述

【2】CSS 文本对齐

【1】文本对齐
text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>标题 1（居中对齐）</h1>
<h2>标题 2（左对齐）</h2>
<h3>标题 3（右对齐）</h3>

<p>上面的三个标题是居中、左和右对齐。</p>

</body>
</html>

在这里插入图片描述

当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

实例

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 5px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
</style>
</head>
<body>

<h1>text-align: justify; 实例</h1>

<p>text-align: justify; 值会拉伸线条，使每条线都有相等的宽度（比如报纸和杂志）。</p>

<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>

</body>
</html>

在这里插入图片描述

【2】文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<p>This is the default text direction.</p>

<p class="ex1">This is right-to-left text direction.</p>

</body>
</html>

在这里插入图片描述

【3】垂直对齐
vertical-align 属性设置元素的垂直对齐方式。

本例演示如何设置文本中图像的垂直对齐方式：

实例

<!DOCTYPE html>
<html>
<head>
<style>
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}
</style>
</head>
<body>

<p>一幅 <img src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 默认对齐方式的图像。</p><br>

<p>一幅 <img class="top" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 上对齐的图像。</p><br>

<p>一幅 <img class="middle" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 居中对齐的图像。</p><br>

<p>一幅 <img class="bottom" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 下对齐的图像。</p>

</body>
</html>

在这里插入图片描述

【3】CSS 文字装饰

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

text-decoration: none; 通常用于从链接上删除下划线：

实例

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>

<p>没有下划线的链接：<a href="https://www.w3school.com.cn">W3School.com.cn</a></p>

</body>
</html>

在这里插入图片描述

其他 text-decoration 值用于装饰文本：

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;/*在文本上的线*/
}

h2 {
  text-decoration: line-through;/*删除线*/
}

h3 {
  text-decoration: underline;/*下划线*/
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>

在这里插入图片描述
注释：建议不要在非链接文本加下划线，因为这经常会使读者感到困惑。

【4】CSS 文本转换[大写或小写]

文本转换
text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;/*大写*/
}

p.lowercase {
  text-transform: lowercase;/*小写*/
}

p.capitalize {
  text-transform: capitalize;/*首字母大写*/
}
</style>
</head>
<body>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>

在这里插入图片描述

【5】CSS 文字间距

文字缩进
text-indent 属性用于指定文本第一行的缩进：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

在这里插入图片描述

字母间距
letter-spacing 属性用于指定文本中字符之间的间距。

下例演示如何增加或减少字符之间的间距：

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -5px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>

在这里插入图片描述

行高
line-height 属性用于指定行之间的间距：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}
</style>
</head>
<body>

<p>
这是有标准行高的段落<br>
大多数浏览器中的默认行高大概是 110% 到 120%。<br>
</p>

<p class="small">
这是行高更小的段落。<br>
这是行高更小的段落。<br>
</p>

<p class="big">
这是行高更大的段落。<br>
这是行高更大的段落。<br>
</p>

</body>
</html>

在这里插入图片描述

字间距
word-spacing 属性用于指定文本中单词之间的间距。

下例演示如何增加或减少单词之间的间距：

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  word-spacing: 20px;
}

h2 {
  word-spacing: -12px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>

在这里插入图片描述

空白
white-space 属性指定元素内部空白的处理方式。

此例演示如何禁用元素内的文本换行：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h2>空白</h2>
<!-- 以下文本不会换行-->
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>请尝试删除 white-space 属性来看一下区别。</p>

</body>
</html>

在这里插入图片描述

【6】CSS 文本阴影

文本阴影
text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

文字阴影效果！

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>文本阴影效果！</h1>

</body>
</html>

在这里插入图片描述

接下来，向阴影添加颜色（红色）：
在这里插入图片描述
实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>文本阴影效果！</h1>

</body>
</html>

在这里插入图片描述

然后，向阴影添加模糊效果（5px）：
在这里插入图片描述
实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>文本阴影效果！</h1>

</body>
</html>

在这里插入图片描述

【7】所有 CSS 文本属性

属性描述
color设置文本颜色。
direction指定文本的方向 / 书写方向。
letter-spacing设置字符间距。
line-height设置行高。
text-align指定文本的水平对齐方式。
text-decoration指定添加到文本的装饰效果。
text-indent指定文本块中首行的缩进。
text-shadow指定添加到文本的阴影效果。
text-transform控制文本的大小写。
text-overflow指定应如何向用户示意未显示的溢出内容。
unicode-bidi与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align指定文本的垂直对齐方式。
white-space指定如何处理元素内的空白。
word-spacing设置单词间距。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/148662.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows访问控制 -- SID

Windows访问控制 -- SID

Windows访问控制是一个比较大的题目&#xff0c;因此计划用一系列的文章简单谈一下这个。本篇是开篇&#xff0c;介绍SID。 Windows访问控制定义 Windows访问控制的含义可以参考MSDN的描述&#xff1a;Access control refers to security features that control who can acce…
阅读更多...
Java集合容器介绍

Java集合容器介绍

Java 容器分为 Collection 和 Map 两大类&#xff0c;其下又有很多子类&#xff0c;如下所示&#xff1a; Collection接口&#xff1a;单列数据&#xff0c;定义了存取一组对象的方法的集合 1、List&#xff1a;元素有序(指的是存储时&#xff0c;与存放顺序保持一致)、可重复的…
阅读更多...
【Docker】（四）使用volume持久化Docker容器中的Redis数据

【Docker】（四）使用volume持久化Docker容器中的Redis数据

1.前言 本系列文章记录了从0开始学习Docker的过程&#xff0c;Docker系列历史文章&#xff1a; &#xff08;一&#xff09;基本概念与安装使用 &#xff08;二&#xff09;如何使用Docker发布一个SpringBoot服务 &#xff08;三&#xff09;使用registry远程镜像仓库管理镜像…
阅读更多...
[ 数据结构 ] 赫夫曼编码--------数据、文件压缩解压

[ 数据结构 ] 赫夫曼编码--------数据、文件压缩解压

0 引出 如上图:给定字符串按定长编码处理,最终对应二进制长度为359 思考:如何压缩,将359有效降低? ----回顾:赫夫曼树 1 数据压缩 拿到数据(字符串)的第一反应,虽然知道应该也像上面一样转为字节数组,但就不知道该怎么办了?统计数组中各字节使用的次数,将次数作为权值,字节…
阅读更多...
2023.1.8 学习周报

2023.1.8 学习周报

文章目录摘要文献阅读1.题目2.摘要3.介绍4.论文主要贡献5.相关工作5.1 序列感知的推荐系统5.2 神经注意模型6.模型&#xff1a;ATTREC6.1 序列推荐6.2 基于Self-Attention的用户短期兴趣建模6.3 用户长期兴趣建模6.4 模型学习7.实验7.1 数据集7.2 评估指标7.3 模型比较7.4 实验…
阅读更多...
SSO单点登录实例详解（前端传Code授权登录）

SSO单点登录实例详解（前端传Code授权登录）

什么是 SSO&#xff08;单点登录&#xff09; SSO 英文全称 Single Sign On&#xff0c;单点登录。SSO 是在多个应用系统中&#xff0c;用户只需要登录一次就可以访问所有相互信任的应用系统。 单点登录流程 单点登录大致流程如下所示&#xff1a; 单点登录详细流程&#x…
阅读更多...
【自学C++】C++变量初始化

【自学C++】C++变量初始化

C变量初始化 C变量初始化教程 变量 的初始化就是在定义变量的同时&#xff0c;给变量设置一个初始值&#xff0c;在 C 中&#xff0c;如果定义变量没有初始化&#xff0c;那么变量有可能会被赋值也有可能不会赋值。 如果是定义的 全局变量 或者 静态变量&#xff0c;未初始化…
阅读更多...
2022年语音合成（TTS)和语音识别(ASR)年度总结

2022年语音合成（TTS)和语音识别(ASR)年度总结

论文统计每月更新一次&#xff0c;主要跟踪语音合成和语音识别的发展状况(很多文章都是在会议后才发出&#xff0c;但不影响统计。统计过程难免存在疏漏&#xff0c;因此统计结果仅供参考。所有文章语音合成领域统计列表请访问http://yqli.tech/page/tts_paper.html&#xff0c…
阅读更多...
绝大多数人远远低估了软件开发的难度

绝大多数人远远低估了软件开发的难度

给你付钱了&#xff0c;你应该把软件做好&#xff01; 这个话相当于&#xff1a; 给你付钱了&#xff0c;你应该把月亮摘下来&#xff01; 趣讲大白话&#xff1a;臣妾做不到 ********** 软件是特殊商品服务 可以说很难有标准 开发的难度取决于需求多少&#xff0c;技术难度&a…
阅读更多...
Java Map集合的介绍和使用

Java Map集合的介绍和使用

什么是Map类型的集合 介绍 1.用于保存具有映射关系的数据&#xff08;key——value&#xff09;。 2.Map中的key和value可以是任意的类型的数据。 3.Map中的key值不允许重复。 4.Map中的value值可以重复。 5.一般常用string作为value的key。 6.key和value之间存在一一对…
阅读更多...
如何进行地图SDK开发（二）——示例文档

如何进行地图SDK开发（二）——示例文档

概述 前面的文章文章我们写到了SDK的开发以及ak认证的实现&#xff0c;在本文我们继续讲讲地图SDK开发中的示例文档的实现。 技术点 vue3viteelement-plusmonaco-editor 实现后效果 实现 1. 工程初始化 1.1 搭建工程 搭建工程的过程请参照博文(使用vite搭建vue3项目&…
阅读更多...
javaEE初阶 — 线程池

javaEE初阶 — 线程池

文章目录线程池1 什么是线程池2 标准库中的线程池2.1 什么是工厂模式2.2 如何使用标准库中的线程池完成任务2.3 ThreadPoolExecutor 构造方法的解释3 实现一个线程池线程池 1 什么是线程池 随着并发程度的提高&#xff0c;随着对性能要求标准的提高会发现&#xff0c;好像线程…
阅读更多...
［cpp进阶］C++异常

［cpp进阶］C++异常

文章目录C语言传统处理错误的方式C异常概念C异常使用异常的抛出和捕获异常的重新抛出异常安全异常规范自定义异常体系C标准库的异常体系异常的优缺点C语言传统处理错误的方式 传统的错误处理机制&#xff1a; 终止程序。assert断言直接终止程序。缺点&#xff1a;过于粗暴&am…
阅读更多...
Fiddler抓取手机APP报文

Fiddler抓取手机APP报文

Http协议代理工具有很多&#xff0c;比如Burp Suite、Charles、Jmeter、Fiddler等&#xff0c;它们都可以用来抓取APP报文&#xff0c;其中charles和Burp Suite是收费的&#xff0c;Jmeter主要用来做接口测试&#xff0c;而Fiddler提供了免费版&#xff0c;本文记录一下在Windo…
阅读更多...
位运算做加法，桶排序找消失元素，名次与真假表示，杨氏矩阵，字符串左旋（外加两道智力题）

位运算做加法，桶排序找消失元素，名次与真假表示，杨氏矩阵，字符串左旋（外加两道智力题）

Tips 1. 2. 3. 大小端字节序存储这种顺序只有在放进去暂时存储的时候是这样的&#xff0c;但是一旦我里面的数据需要参与什么运算之类的&#xff0c;会“拿出来”先恢复到原先的位置再参与运算&#xff0c;因此&#xff0c;大小端字节序存储的什么顺序不影响移位运算等等…
阅读更多...
【案例教程】CLUE模型构建方法、模型验证及土地利用变化情景预测实践技术

【案例教程】CLUE模型构建方法、模型验证及土地利用变化情景预测实践技术

【前沿】&#xff1a;土地利用/土地覆盖数据是生态、环境和气象等领域众多模型的重要输入参数之一。基于遥感影像解译&#xff0c;可获取历史或当前任何一个区域的土地利用/土地覆盖数据&#xff0c;用于评估区域的生态环境变化、评价重大生态工程建设成效等。借助CLUE模型&…
阅读更多...
声音产生感知简记

声音产生感知简记

声音产生 人的发音器官包括:肺、气管、声带、喉、咽、鼻腔、口腔、唇。肺部产生的气流冲击声带，产生震动。 声带每开启和闭合一次的时间是基音周期(Pitch period,T)，其到数为基音频率(F.=1/T，基频)，范围在70-450Hz。基频越高，声音越尖细，如小孩的声音比大人尖，就是…
阅读更多...
编译错误2

编译错误2

本文迁移自本人网易博客&#xff0c;写于2015年11月25日&#xff0c;编译错误2 - lysygyy的日志 - 网易博客 (163.com)1、error C2059:语法错误&#xff1a;“<L_TYPE_RAW>”error C2238:意外的标记位于“;”之前.错误代码定位于&#xff1a;BOOL TreeView_GetCheckState…
阅读更多...
excel函数公式：常用高频公式应用总结 上篇

excel函数公式：常用高频公式应用总结 上篇

公式1&#xff1a;条件计数条件计数在Excel的应用中十分常见&#xff0c;例如统计人员名单中的女性人数&#xff0c;就是条件计数的典型代表。条件计数需要用到COUNTIF函数&#xff0c;函数结构为COUNTIF(统计区域,条件)&#xff0c;在本例第一个公式COUNTIF(B:B,G2)中&#xf…
阅读更多...
《栈~~队列~~优先级队列》

《栈~~队列~~优先级队列》

目录 前言&#xff1a; 1.stack 1.stack的介绍 2.stack的使用&#xff1a; 3.stack的模拟实现 4.有关stack的oj笔试题 2.queue 1.队列的介绍 2.队列的使用 3.队列的模拟实现 4.有关队列的oj笔试题 3.priority_queue 1.优先级队列的介绍 2.优先级队列的使用 3.优先级队列的模拟实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023