③HTML+CSS 文本格式化 (颜色、单位、文本样式）

我就是我 2023-07-20 12:02 4阅读 0赞

### 文本格式化——为内容设置不同的样式 ###

*  单位 ※
 *  颜色 ※
 *  文本样式
 *   *  文字大小
     *  斜体和粗体 ※
     *  小型大写字母
     *  字体 ※
     *  行高 ※
     *  字体属性的简写 ※
     *  大写化 ※
     *  设置网页如何处理空白
     *  文本的修饰 ※
     *  首行缩进
     *  字母间距和单词间距
     *  对齐文本 ※
     *  图标字体

--------------------

***本人是个新手，写下博客用于自我复习、自我总结。  
如有错误之处，请各位大佬指出。  
学习资料来源于：尚硅谷***

--------------------

# 单位 ※ #

• px  
如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个像素，也就是1px。不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰  
，所以同样的200px在不同的设备下显示效果不一样

• 百分比 ※  
可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。也就是说，设置百分比可以使子元素跟随父元素的改变而改变

• em  
em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%

• rem  
rem是相对于根元素的字体大小来计算

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>单位</title>
        <style> html{ font-size: 30px; } .box1{ width: 300px; height: 100px; background-color: orange; } .box2{ width: 50%; height: 50%; background-color:aqua; } .box3{ font-size: 50px; /* width: 10em; height: 10em; */ width: 10rem; height: 10rem; background-color: greenyellow; } </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
        <div class="box3"></div>
    </body>
    </html>

--------------------

# 颜色 ※ #

• 在CSS中可以直接使用颜色的关键字来代表一种颜色。  
• 17中颜色  
aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。  
• 还有147种svg颜色，这里就不一一列举了，但是明显即使这些颜色变成double，也不足以描绘我们世界中所有的颜色。

• 用的最多的颜色是**十六进制符号**。一个颜色值，比如：\#6600FF实际上包含了三组十六进制的数字。（可以采用QQ截图的方式，将鼠标放在想选取的颜色上，再按Ctrl，既可以看到对应颜色的十六进制符号）  
• 上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。  
• 如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将\#6600FF缩短为\#60F。

**RGB值**  
• 也可以使用计算机中常用的RGB值来表示颜色。可以使用0 ~ 255的数值，也可以使用0%~100%的百分比数。  
如：  
RGB(100%,0%,0%)  
RGB(0,255,0)  
• 第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度。  
R red，G green ，B blue

**RGBA**  
• RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明，`.5`半透明 。  
如：RGBA(255,100,5,0.5)

**HSL值 HSLA值 ※**  
H 色相(0 - 360)  
S 饱和度，颜色的浓度 0% - 100%  
L 亮度，颜色的亮度 0% - 100%  
A 透明度，一个0-1之间的值。0表示完全透明，1表示完全不透明，`.5`半透明 。

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>颜色</title>
        <style> .box1{ width: 100px; height: 100px; background-color: red; background-color: rgb(255, 0, 0); background-color: rgb(0, 255, 0); background-color: rgb(0, 0, 255); background-color: rgb(255,255,255); background-color: rgb(106,153,85); background-color: rgba(106,153,85,.5); background-color: #ff0000; background-color: #ffff00; background-color: #ff0; background-color: #bbffaa; background-color: #9CDCFE; background-color: rgb(254, 156, 156); background-color: hsla(98, 48%, 40%, 0.658); } </style>
    </head>
    <body>
        <div class="box1"></div>
    </body>
    </html>

--------------------

# 文本样式 #

## 文字大小 ##

`font-size`用来指定文字的大小。

## 斜体和粗体 ※ ##

• font-style用来指定文本的斜体。  
– 指定斜体：`font-style:italic`  
– 指定非斜体：`font-style:normal`  
• font-weight用来指定文本的粗体。  
– 指定粗体：`font-weight:bold`  
– 指定非粗体：`font-weight:normal`

## 小型大写字母 ##

• font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。  
`font-variant:small-caps`

## 字体 ※ ##

• 通过font-family可以指定标签中文字使用的字体。  
• 例如：`p{font-family:Arial}`  
上边这行代码指定了p标签中使用名为arial作为字体  
• 一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。

• 通过font-family也可以同时指定多个字体。  
• 例如：`p{font-family:Arial , Helvetica , sans-serif}`  
• 如上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。  
• 这里面sans-serif并不是指的具体某一个字体。而是一类字体。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]  
以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。

font-face可以将服务器中的字体直接提供给用户去使用  
同时存在下列问题：  
1.加载速度  
2.版权  
3.字体格式

例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>字体</title>
        <style> @font-face { /* 指定字体的名字 */ font-family:'myfont' ; /* 服务器中字体的路径 */ src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype"); } p{ color: blue; font-size: 40px; /* font-family: 'Courier New', Courier, monospace; */ font-family: myfont; } </style>
    </head>
    <body>
        <p>
            今天天气真不错，Hello Hello How are you！
        </p>
    </body>
    </html>

--------------------

## 行高 ※ ##

`line-height`用于设置行高，行高越大则行间距越大。

行间距 = line-height – font-size

行高指的是文字占有的实际高度。行高可以直接指定一个大小（px em），也可以直接为行高设置一个整数。如果是一个整数的话，行高将会是字体的指定的倍数。  
比如：`line-height: 1.33;`

字体框就是字体存在的格子，如果有字体框，行高会在字体框的上下平均分配。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>行高</title>
        <style> div{ font-size: 50px; /* 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中 */ line-height: 200px; border: 1px red solid; /* line-height: 1.33; */ } </style>
    </head>
    <body>
        
        <div>今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello</div>
    
    </body>
    </html>

--------------------

## 字体属性的简写 ※ ##

• font可以一次性同时设置多个字体的样式。  
• 语法： `font:加粗 斜体 小型大写 大小/行高 字体`  
• 这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。行高可以省略不写，如果不写使用默认值。

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>字体的简写属性</title>
        <style> div{ font: bold italic 50px/2 微软雅黑, 'Times New Roman', Times, serif; } </style>
    </head>
    <body>
        <div>今天天气真不错 Hello hello</div>
    </body>
    </html>

--------------------

## 大写化 ※ ##

`text-transform`样式用于将元素中的字母全都变成同样大小。  
– 所有字母大写：`text-transform:uppercase`  
– 所有字母小写：`text-tansform:lowercase`  
– 所有单词首字母大写：`text-transform:capitalize`  
– 正常：`text-transform:none`

--------------------

## 设置网页如何处理空白 ##

`white-space`  
可选值：  
normal 正常  
nowrap 不换行  
pre 保留空白

--------------------

## 文本的修饰 ※ ##

• `text-decoration`属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。  
• 可选值：  
– underline  
– overline  
– line-through  
– none

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>文本样式</title>
        <style> .box1{ font-size: 50px; font-family: 微软雅黑; text-decoration: underline; } .box2{ width: 200px; /* white-space 设置网页如何处理空白 可选值： normal 正常 nowrap 不换行 pre 保留空白 */ white-space: nowrap; } </style>
    </head>
    <body>
        <div class="box2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt numquam. Dolores, cupiditate enim.
        </div>
        <div class="box1">
            今天天气真不错
        </div>
    </body>
    </html>

--------------------

## 首行缩进 ##

• `text-indent`用来设置首行缩进。  
• 该样式需要指定一个长度，并且只对第一行生效。

--------------------

## 字母间距和单词间距 ##

• `letter-spacing`用来设置字符之间的间距。  
• `word-spacing`用来设置单词之间的间距。  
• 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

--------------------

## 对齐文本 ※ ##

`text-align`用于设置文本的对齐方式。  
• 可选值：  
– left：左对齐  
– right：右对齐  
– justify：两边对齐  
– center：居中对齐

`vertical-align` 设置元素垂直对齐的方式  
• 可选值：  
\- baseline 默认值 基线对齐  
\- top 顶部对齐  
\- bottom 底部对齐  
\- middle 居中对齐

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>文本样式</title>
        <style> div{ width: 800px; border: 1px red solid; text-align: right; font-size: 50px; } span{ font-size: 20px; border: 1px blue solid; vertical-align:top; } p{ border: 1px red solid; } img{ vertical-align: bottom; } </style>
    </head>
    <body>
    	<div>
            今天天气<span>真不错 Hello</span>！
    	</div>
        <p>
           <img src="./img/2.gif" alt=""> 
        </p>
    </body>
    </html>

--------------------

## 图标字体 ##

*  在网页中经常需要使用一些图标，可以通过图片来引入图标。但是图片大小本身比较大，并且非常的不灵活。
 *  所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入
 *  这样我们就可以通过使用字体的形式来使用图标

fontawesome 使用步骤  
1.下载 https://fontawesome.com/  
2.解压  
3.将css和webfonts移动到项目中  
4.将all.css引入到网页中  
5.使用图标字体  
\- 直接通过类名来使用图标字体  
class=“fas fa-bell”  
class=“fab fa-accessible-icon”

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>图标字体</title>
        <link rel="stylesheet" href="./fa/css/all.css">
        <style> li{ list-style: none; } li::before{ /* 通过伪元素来设置图标字体 1.找到要设置图标的元素通过before或after选中 2.在content中设置字体的编码 3.设置字体的样式 */ content: '\f1b0'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: blue; margin-right: 10px; } </style>
    </head>
    <body>
        <ul>
            <li>锄禾日当午</li>
            <li>汗滴禾下土</li>
            <li>谁知盘中餐</li>
            <li>粒粒皆辛苦</li>
        </ul>
    
        
        <span class="fas"></span>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20230528/58d3de246fba4ca6bd1afa2b1d2cf877.png