『HTMLCSS』文本格式化

2024-01-31 00:18
文章标签 css html frontend 文本格式

本文主要是介绍『HTMLCSS』文本格式化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本篇博客介绍一些文本格式相关的内容，如字体，行间距等相关的设置。

长度单位

首先，我们来了解一下CSS中的长度单位，单位一共有三个，分别是px（像素）、百分比、em：

  • px（像素）：像素是网页中使用最多的一个单位，一个像素相当于屏幕中的一个小点；
    屏幕实际上就是由这些像素点构成的，例如分辨率为1920 × 1080的屏幕，就是横着1920个像素点，竖着1080个像素点，共1920 × 1080 = 2073600个像素点。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>长度单位：px(像素)</title><style type = "text/css">.c1 {width: 200px;height: 200px;background-color: green;}</style></head><body><div class="c1"></div></body>
</html>

在这里插入图片描述

  • 百分比：网页中也可以将长度设置为一个百分比的形式，这样浏览器就会根据其父元素的样式来计算该值；
    使用百分比的好处是当父元素的属性值放生变化时，子元素也会按照比例发生改变；
    创建自适应的页面时，经常使用百分比作为单位。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>长度单位：百分比</title><style type = "text/css">.c1 {width: 200px;height: 200px;background-color: green;}.c2 {width: 90%;height: 90%;background-color: blue;}</style></head><body><div class="c1"><div class="c2"></div></div></body>
</html>

在这里插入图片描述

  • em：和百分比类似，它是相当于当前元素的字体大小来计算的，1em = 1font-size；
  • 使用em时，当字体大小发生改变时，em也会随之变化，当设置字体相关样式时，经常会使用em。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>长度单位：em</title><style type = "text/css">.c1 {font-size: 20px;width: 10em;height: 10em;background-color: green;}</style></head><body><div class="c1"></div></body>
</html>

在这里插入图片描述

颜色表示

同样的，在CSS中，颜色也有三种表示方式：

  • 可以直接使用颜色单词来表示。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>颜色单位：使用颜色单词</title><style type = "text/css">.c1 {width: 200px;height: 200px;background-color: green;}</style></head><body><div class="c1"></div></body>
</html>

在这里插入图片描述

  • 也可以使用RGB值来表示不同的颜色，所谓的RGB值指的是通过Red、Green、Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色；
    例如：rgb(红色的浓度, 绿色的浓度, 蓝色的浓度)；
    颜色的浓度需要一个0 ~ 255之间的值，255最大，0表示没有浓度；可以使用截屏工具查看某一块的RGB值；三个值全为0表示黑色，全为255表示白色。
    浓度也可以采用一个百分数来设置，0% ~ 100%，最终也会转换成0 ~ 255，两种用法一样。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>颜色单位：使用RGB值表示</title><style type = "text/css">.c1 {width: 200px;height: 200px;background-color: rgb(0, 255, 0);}</style></head><body><div class="c1"></div></body>
</html>

在这里插入图片描述

  • 也可以使用16进制RGB值来表示颜色，原理和上述RGB原理一样，只不过使用16进制数来代替，使用三组两位的16进制数来表示一个颜色；
    语法：#00ff00，00表示最小0，ff表示最大255；
    #00ff00可以简写为#0f0；
<!doctype html>
<html><head><meta charset = "utf-8" /><title>颜色单位：使用16进制RGB值表示</title><style type = "text/css">.c1 {width: 200px;height: 200px;background-color: #00ff00;}</style></head><body><div class="c1"></div></body>
</html>

在这里插入图片描述

字体分类

网页中，将字体分为五大类：

  • serif（衬线字体），有笔锋的字体；
  • sans-serif（非衬线字体），横平竖直的字体；
  • monospace（等宽字体），写代码常用等宽字体；
  • cursive（草书字体）；
  • fantasy（虚幻字体）；

字体设置

对于字体的设置有很多：包括字体颜色，大小，字体粗细等等：

  • 设置字体颜色：使用color属性可以设置字体颜色。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>字体设置：字体颜色</title><style type = "text/css">.c1 {color: green;}</style></head><body><p class = "c1">路漫漫其修远兮，吾将上下而求索。</p></body>
</html>

在这里插入图片描述

  • 设置字体大小：默认为16px，font-size属性设置的并不是文字本身的大小；
    在页面中，每个文字都是处在一个看不到的框中，我们设置的font-size，实际上设置的是框的高度，并不是字体的大小；
    一般情况下，文字都要比这个框小一些，也有时候比框大，根据字体的不同，显示效果也不同。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>字体设置：字体大小</title><style type = "text/css">.c1 {color: green;font-size: 25px;}</style></head><body><p class = "c1">路漫漫其修远兮，吾将上下而求索。</p></body>
</html>

在这里插入图片描述

  • 设置字体：使用font-family属性可以指定文字的字体；
    当采用某种字体的时候，如果浏览器支持，则使用；否则使用默认字体；
    该属性可以指定多个字体，多个字体之间使用逗号分隔，当采用多个字体时，浏览器会优先使用前边的字体，如果前边的字体浏览器不支持，则使用后面的；
    浏览器使用的是计算机中的字体，如果计算机中有，则使用，如果没有就不用；
    可以将字体设置为前面介绍的五大类字体中的某个，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式；
    一般会将字体大分类指定位font-family属性的最后一个属性值，兜底用。
    查看当前计算机有哪些字体？
    在这里插入图片描述
<!doctype html>
<html><head><meta charset = "utf-8" /><title>字体设置：字体</title><style type = "text/css">.c1 {color: green;font-size: 25px;font-family: "华文彩云";}</style></head><body><p class = "c1">路漫漫其修远兮，吾将上下而求索。</p></body>
</html>

在这里插入图片描述

  • 字体样式：使用font-style属性设置字体样式，有三个属性值：italic（以斜体形式显示），normal（默认值，正常显示），oblique（文字会以倾斜的效果显示）；
    大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique，它们的效果往往是一样的，一般只使用italic。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>字体设置：字体样式</title><style type = "text/css">.c1 {color: green;font-size: 25px;font-family: "华文彩云";font-style: italic;}</style></head><body><p class = "c1">路漫漫其修远兮，吾将上下而求索。</p></body>
</html>

在这里插入图片描述

  • 字体粗细：使用font-weight属性设置字体的粗细，可以设置多个属性值，如下：
    在这里插入图片描述
    该样式可以指定100 ~ 900中的9个值，但是计算机中没有这么多级别的字体，所以不能达到我们的效果，一般只使用normal和bold。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>字体设置：字体粗细</title><style type = "text/css">.c1 {color: green;font-size: 25px;font-family: "华文彩云";font-style: italic;font-weight: bold;}</style></head><body><p class = "c1">路漫漫其修远兮，吾将上下而求索。</p></body>
</html>

在这里插入图片描述

  • 设置小型大写字母：使用font-variant属性，属性值small-caps（文本以小型大写字母显示）；
    小型大写字母：将所有的字母都以大写形式显示，但小写字母的大写比大写字母的大写要小一点。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>字体设置：小型大写字母</title><style type = "text/css">.c1 {color: green;font-size: 25px;font-family: "华文彩云";font-style: italic;font-weight: bold;font-variant: small-caps;}</style></head><body><p class = "c1">路漫漫其修远兮，吾将上下而求索。Hello, World!</p></body>
</html>

在这里插入图片描述

前面，我们介绍了很多字体的相关属性，但是我们发现，要设置一个字体需要很多个属性，太过于麻烦，如下图：
在这里插入图片描述
有没有什么方法，可以简写呢？既然这么说了，那肯定是有的。CSS中为我们提供了一个属性叫做font，使用该属性可以同时设置字体相关的所有样式：

  • 语法示例：font: italic small-caps bold 25px ''华文彩云";
  • 将字体的属性的值，同一写在font属性中，不同的值之间使用空格隔开；
  • 使用font设置字体样式时，斜体，加粗，小型大写字母没有顺序要求，甚至可以不写，不写使用默认值；但是文字的大小和字体必须写，而且字体必须在最后一个，字体大小必须在倒数第二个；
  • 使用font属性，性能也会比前面的写法好，有几个属性浏览器就要解析几次。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>字体设置：font属性</title><style type = "text/css">.c1 {color: green;font: italic small-caps bold 25px "华文彩云";}</style></head><body><p class = "c1">路漫漫其修远兮，吾将上下而求索。Hello, World!</p></body>
</html>

在这里插入图片描述

文本设置

文本设置也有很多，如：行间距设置，文本大小写，文本对齐，文本修饰，首行缩进等等：

  • 设置行间距：CSS中并没有提供一个直接设置行间距的方式，只能通过设置行高来间接的设置行间距；行高越大，行间距越大，使用line-height来设置行高。
    行高类似于我们上学时使用的单线本，单线本是一行一行的，线与线之间的距离就是行高；
    网页中的文字实际上也是写在一个看不见的线中，而文字会默认在行高中垂直居中显示。
    行 间 距 = 行 高 − 字 体 大 小 行间距 = 行高 - 字体大小 行间距=行高−字体大小。
    在这里插入图片描述
    ling-height可以接收的值：可以接收一个大小；也可以接收一个百分比，行高相当于字体的百分比；也可以接收一个正数，如：1、1.5，表示行高为字体的多少倍。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>文本设置：设置行间距</title><style type = "text/css">.c1 {color: green;font: small-caps bold 25px "楷体";/* 行间距 = 行高 - 字体大小 */line-height: 50px;}</style></head><body><p class = "c1">夫何瑰逸之令姿，独旷世以秀群；表倾城之艳色，期有德以传闻。佩鸣玉以比洁，齐幽兰以争芬；淡柔情于俗内，负雅志于高云。悲晨曦之易夕，感人生之长勤。同一尽于百年，何欢寡而愁殷！褰朱帏而正坐，泛清瑟以自欣。送纤指之余好，攘皓袖之缤纷。瞬美目以流眄，含言笑而不分。</p></body>
</html>

在这里插入图片描述

  • 对于单行文本来说，可以将行高设置为和父元素高度一致，这样可以使单行文本在父元素中居中显示。
    在这里插入图片描述
    在这里插入图片描述

在font属性中也可以指定行高，语法如下：font: 30px/50px ''楷体'';，/后的50px表示行高，如果不写的话，使用默认值。
我们将前面代码略作调整，将line-height和font两行交换一下。

<!doctype html>
<html><head><meta charset = "utf-8" /><title>文本设置：设置行间距</title><style type = "text/css">.c1 {color: green;/* 行间距 = 行高 - 字体大小 */line-height: 50px;font: small-caps bold 25px "楷体";}</style></head><body><p class = "c1">夫何瑰逸之令姿，独旷世以秀群；表倾城之艳色，期有德以传闻。佩鸣玉以比洁，齐幽兰以争芬；淡柔情于俗内，负雅志于高云。悲晨曦之易夕，感人生之长勤。同一尽于百年，何欢寡而愁殷！褰朱帏而正坐，泛清瑟以自欣。送纤指之余好，攘皓袖之缤纷。瞬美目以流眄，含言笑而不分。</p></body>
</html>

在这里插入图片描述
但是，看效果，行间距和前面差别很大，这是因为，font中并没有设置行高，所以使用了默认值，而这个默认值行高将前面设置的line-height值覆盖掉了。

  • 设置文本大小写：使用text-transform属性来设置文本的大小写；
  • 有以下几个属性值：none（默认值，不做任何处理）、capitalize（单词的首字母大写，通过空格来识别单词）、uppercase（所有的字母都大写）、lowercase（所有的字母都小写）。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>文本设置：设置文本大小写</title><style type = "text/css">.c1 {color: green;font: 25px "consolas";text-transform: capitalize;}.c2 {color: green;font: 25px "consolas";text-transform: uppercase;}.c3 {color: green;font: 25px "consolas";text-transform: lowercase;}</style></head><body><p class = "c1">text-transform: capitalize; <br />It is not enough to be industrious, so are the ants. What are you industrious for? </p><p class = "c2">text-transform: uppercase; <br />It is not enough to be industrious, so are the ants. What are you industrious for?</p><p class = "c3">text-transform: lowercase; <br />It is not enough to be industrious, so are the ants. What are you industrious for?</p></body>
</html>

在这里插入图片描述

  • 设置文本修饰：使用text-decoration属性设置，属性值有：none（默认值）、underline（下划线）、overline（上划线）、line-through（穿过文本的线，删除线）；
    超链接的text-decoration默认值是underline，想要去掉下划线，将text-decoration的值设置为none即可。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>文本设置：文本修饰</title><style type = "text/css">.c1 {color: green;font: 25px "consolas";text-decoration: underline;}.c2 {color: green;font: 25px "consolas";text-decoration: overline;}.c3 {color: green;font: 25px "consolas";text-decoration: line-through;}#i1 {text-decoration: none;}</style></head><body><p class = "c1">text-decoration: underline;It is not enough to be industrious, so are the ants. What are you industrious for? </p><p class = "c2">text-decoration: orveline;It is not enough to be industrious, so are the ants. What are you industrious for? </p><p class = "c3">text-decoration: line-through;It is not enough to be industrious, so are the ants. What are you industrious for? </p><a id = "i1"; href="#">这是一个超链接</a><a id = "i2"; href="#">这是一个超链接</a></body>
</html>

在这里插入图片描述

还可以使用属性letter-spacing指定字符间距，使用属性word-spacing指定单词间间距（设置空格的长度）。

<!doctype html>
<html><head><meta charset = "utf-8" /><title>文本设置：文本修饰</title><style type = "text/css">.c1 {color: green;font: 25px "consolas";letter-spacing: 5px;}.c2 {color: green;font: 25px "consolas";word-spacing: 5px;}</style></head><body><p class = "c1">letter-spacing: 5px; <br />It is not enough to be industrious, so are the ants. What are you industrious for? </p><p class = "c2">word-spacing: 5px; <br />It is not enough to be industrious, so are the ants. What are you industrious for? </p></body>
</html>

在这里插入图片描述

  • 设置文本对齐：使用text-align属性设置文本对齐方式；
    left（默认值，左对齐）、right（文本靠右对齐）、center（文本居中对齐）、justify（两端对齐，通过调整文本之间空格的大小来达到两端对齐的目的）。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>文本设置：文本对齐</title><style type = "text/css">.c1 {color: green;font: 25px "consolas";}.c2 {color: green;font: 25px "consolas";text-align: right;}.c3 {color: green;font: 25px "consolas";text-align: center;}.c4 {color: green;font: 25px "consolas";text-align: justify;}</style></head><body><p class = "c1">text-align: left; <br />It is not enough to be industrious, so are the ants. What are you industrious for? </p><p class = "c2">text-align: right; <br />It is not enough to be industrious, so are the ants. What are you industrious for? </p><p class = "c3">text-align: center; <br />It is not enough to be industrious, so are the ants. What are you industrious for? </p><p class = "c4">text-align: justify; <br />It is not enough to be industrious, so are the ants. What are you industrious for? </p></body>
</html>

在这里插入图片描述

  • 设置首行缩进：使用text-indent属性设置首行缩进；
    给定一个正值时，向右侧缩进指定像素；给定一个负值，向左侧缩进指定像素。
    向左侧缩进，可以隐藏内容，让用户看不到，但是搜索引擎可以看到。
<!doctype html>
<html><head><meta charset = "utf-8" /><title>文本设置：首行缩进</title><style type = "text/css">.c1 {color: green;font: 25px "consolas";text-indent: 50px;}.c2 {color: green;font: 25px "consolas";text-indent: -50px;}</style></head><body><p class = "c1">text-indent: 50px; <br />It is not enough to be industrious, so are the ants. What are you industrious for? </p><p class = "c2">text-indent: -50px; <br />It is not enough to be industrious, so are the ants. What are you industrious for? </p></body>
</html>

在这里插入图片描述

这篇关于『HTMLCSS』文本格式化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/662003。

相关文章

vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v
阅读更多...
JS纯前端实现浏览器语音播报、朗读功能的完整代码

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面：本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本：① 语音自选参数，按钮控制语音：② 效果图：二、朗读多条文本：① 语音有默认值：②
阅读更多...
vue监听属性watch的用法及使用场景详解

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,：本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的
阅读更多...
前端导出Excel文件出现乱码或文件损坏问题的解决办法

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,：本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1：直接下载（推荐）方案 2：手动构造
阅读更多...
Vue实现路由守卫的示例代码

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫（Navigation Guards）本质上就是 在路
阅读更多...
uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面：本文主要介绍uni-app小程序项目中实... 目录方式一：使用<canvas>实现图片压缩（推荐，兼容性好）示例代码（小程序平台）：方式二：使用uni
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2