『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。

相关文章

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2