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

阅读量：3964 次

发布时间：2019-05-24

本文共 4238 字，大约阅读时间需要 14 分钟。

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

本人是个新手，写下博客用于自我复习、自我总结。

如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

单位 ※

• px

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

，所以同样的200px在不同的设备下显示效果不一样

• 百分比 ※

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

• em

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

• rem

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

例：

颜色 ※

• 在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半透明。

例：

文本样式

文字大小

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并不是指的具体某一个字体。而是一类字体。

以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。

font-face可以将服务器中的字体直接提供给用户去使用

同时存在下列问题：

1.加载速度

2.版权

3.字体格式

例：

字体

今天天气真不错，Hello Hello How are you！

行高 ※

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

行间距 = line-height – font-size

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

比如：line-height: 1.33;

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

    
       
       
       行高            
   
    今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello

字体属性的简写 ※

• font可以一次性同时设置多个字体的样式。

• 语法： font:加粗斜体小型大写大小/行高字体

• 这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。行高可以省略不写，如果不写使用默认值。

例：

    
       
       
       字体的简写属性        
   
    今天天气真不错 Hello hello

大写化 ※

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

例：

    
       
       
       文本样式        
   
            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.    
   
    
   
            今天天气真不错

首行缩进

• text-indent用来设置首行缩进。

• 该样式需要指定一个长度，并且只对第一行生效。

字母间距和单词间距

• letter-spacing用来设置字符之间的间距。

• word-spacing用来设置单词之间的间距。

• 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

对齐文本 ※

text-align用于设置文本的对齐方式。

• 可选值：

– left：左对齐

– right：右对齐

– justify：两边对齐

– center：居中对齐

vertical-align 设置元素垂直对齐的方式

• 可选值：

- baseline 默认值基线对齐

- top 顶部对齐

- bottom 底部对齐

- middle 居中对齐

例：

文本样式

今天天气

真不错 Hello！

图标字体

在网页中经常需要使用一些图标，可以通过图片来引入图标。但是图片大小本身比较大，并且非常的不灵活。

所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入

这样我们就可以通过使用字体的形式来使用图标

fontawesome 使用步骤

1.下载 https://fontawesome.com/

2.解压

3.将css和webfonts移动到项目中

4.将all.css引入到网页中

5.使用图标字体

- 直接通过类名来使用图标字体

class=“fas fa-bell”

class=“fab fa-accessible-icon”

例：

例：