字体相关以及单位

2019/7/18 10:20:23

文本标签

1. 列表标签：

列表就相当于清单的形式，html中一共有三种列表：

• 无序列表：<ul>标签创建表格，<li>标签创建一个列表项，通过type属性可以修改无序列表的项目符号样式。但是默认的项目符号我们一般不用。可以用css来修改，去掉项目符号。

• 有序列表：和无序列表类似，只需用<ol>代替<ul>即可。默认用阿拉伯数字，type属性可以修改其项目符号样式。

• 定义列表：对一些词汇或者内容进行定义。<dl>创建一个定义列表，<dl>中有两个子标签，<dt>表示被定义的内容，<dd>表示对定义内容的描述。

备注：列表之间是可以互相嵌套的，可以在无序或有序列表中再嵌套一个无序或有序列表。

单位

1. 长度单位

• 像素px：像素是网页中使用最多的一个单位。
• 百分比%：浏览器将会根据其父元素的大小来对应设定其大小。在一些自适应的页面时用百分比作为单位比较合适。
• em：和百分比类似，他是相对于当前元素的字体大小来计算的。1em=1font-size。设置字体相关样式时常用em作为单位。

2. 颜色单位

• 使用单词来表示颜色：red、yellow等。
• 使用RGB值来表示颜色：RGB值是什么自行查询，格式rgb(红色浓度、绿色浓度、蓝色浓度);颜色浓度0-255之间。也可以用百分数来设置，0%-100%。
• 16进制RGB值来表示：使用三组2位16进制数组表示一个颜色，格式#红色绿色蓝色，每一组大小值为00-ff。#aabbcc可以简写为#abc（两两重复都可以）

字体

1. 字体颜色：使用color来设置
2. 字体大小：font-size，浏览器中一般默认文字大小为16px。font-size设置的并不是文字本身的大小，在页面中，每个文字都是处于一个看不见的框中，font-size实际上设置的是这个框的高度，并不是字体的大小。
3. 字体格式：font-family，可以指定文字的字体。例如font-family：微软雅黑；我们还可以同时指定多个字体，多个字体用逗号分开。浏览器会优先选择前面的字体，浏览器若不支持该字体会自动尝试使用下一个字体。浏览器使用的字体默认就是计算机中的字体。
4. 字体分类：网页中将字体分为五大类。

• serif：衬线字体
• sans-serif：非衬线字体
• monospace：等宽字体
• cursive：草书字体
• fantasy：虚幻字体

5. 文字倾斜效果，文字粗细等设置方法可以查阅W3School离线手册。

6. CSS中还提供了font样式，使用该样式可以统一设置字体的所有相关样式，例如：

   font: small-caps bold italic 60px "微软雅黑";

这些样式没有顺序要求，可写可不写，不写就使用默认值，但是文字的大小和字体是必写的，字体必须写在最后面，大小必须是倒数第二个。推荐使用font来设置字体样式。

7. 行间距：CSS并不能直接设置行间距，只能通过设置行高间接设置，行高通过line-height来设置。那么行间距=行高减去字体大小。line-height可以接收的值有：

• 直接接收一个大小。
• 指定百分数，则会相对于字体大小来计算行高。
• 直接传入一个数字，则行高会设置成字体大小相应的倍数。

在font样式中也可以设置行高，跟字体大小一起设置的，30px/50px，意思就是字体大小30px，行高为50px。