HTML5+CSS——10 CSS长度单位、十六进制RGB值、字体样式、行高

一.长度单位

1）像素px 

作用：像素是我们网页中使用最多的一个单位。一个像素就相当于我们屏幕中的一个小点，我们屏幕实际上就是由这些像素点构成的。

像素px 

2）百分比%

作用：也可以将单位设置为一个百分比的形式，这样浏览器会根据其父元素的样式来计算该值。使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变。在我们创建一个自适应的页面时，经常使用百分比作为单位。

百分比%

3）em

em和百分比类似，它是相当于当前元素的字体大小来计算的

1em=1font-size

使用em时，当字体大小发生变化时，em也会随之改变，当设置字体相关的样式时，经常会使用em。

em

二.十六进制RGB值

颜色单位：在CSS可以直接使用个颜色的单词来表示不同的颜色

红色：red

蓝色：blue

绿色：green

也可以使用RGB值来表示不同的颜色

所谓的RGB值是指通过Red Green Blue三原色，通过这三种颜色的不同的弄高度，来表示出不同的颜色。

例如，RGB（红色的浓度，绿色的浓度，蓝色的浓度），颜色的浓度需要一个个0-255之间的值。255表示最大，0表示没有。

浓度也可以采用百分数来设置，需要一个0%-100%之间的数字，使用百分数最终也会转换为0-255之间的数。0%表示0，100%表示255

也可以使用十六进制的RGB值来表示颜色，原理和上边RGB原理一样，只不过是用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色，每组表示个颜色，第一组表示红色浓度，第二组表示绿色，第三组表示蓝色。

语法： #红色绿色蓝色

十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f

范围：00 - ff ，

00表示没有，相当于RGB中的0

ff 表示最大，相当于RGB中的55

例如，红色：#ff0000

像这种两两重复的颜色，可以简写，比如#ff0000可以写成#f00

#aabbcc可以写成#abc

三.字体样式

font的css属性

1）字体颜色

使用color来设置字体的颜色

2）字体大小

font-size ；浏览器一般默认文字大小为16px

3）文字字体

font-family ：微软雅黑；

注意，开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户的电脑里没有，就不能达到想要的效果了。

字体分类：

serif 衬线字体

sans-serif 非衬线字体

monospace 等宽字体

cursive 草书字体

fantasy 虚幻字体

字体分类

可以将字体设置为这些大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类，指定为font-family中的最后一个字体。

为了满足不同浏览器使用，一般会设置多个字体，serif为保底字体。

系统会优先最前面字体

4）字体风格

font-style 属于自定义字体的风格

字体风格

但是如果这样设置，需要些很多样式，会很麻烦。

设置字体样式

在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关所有样式，可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开。

使用font设置字体样式时，斜体 加粗 大小字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值，但是要求文字的大写和字体必须写，而且字体必须是最后一个样式，大写必须是倒数第二个样式。

font样式

除此之外，font 也可以指定行高，在字体后面添加 / 行高，来指定行高，该值是可选的，如果不指定则会使用默认值。

行高里外一种简写方式

四.行高

在CSS并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接的设置行间距，行高越大行间距越大。

使用line-height来设置行高，行高类似于我们上学单线簿，单线簿是一行一行的，线与线之间的距离就是行高。网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示。

行间距=行高-字体大小 。例如 行间距=50px-16px

行高

通过设置line-height可以间接的设置行高，可以接收的值：

1.直接就收一个的大小

2.指定一个百分数，则会相对字体去计算行高 

line-height：200%；

3.可以直接传一个数值，则行高会设置字体大小相应的倍数（最常用的）

line-height：2；

除此之外，对于单行文本来说，可以将行高设置为和父元素高度一致，这样可以是单行文本在父元素中垂直居中。

单行文本居中技巧

五.其他常用文本样式

CSS文本属性

具体使用去W3Shool查看

补充：text-indent用来设置首行缩进，指定值可以设置像素px，也可以设置em（最好设置em，这样可以跟随字体大小变化缩进。）当给它指定一个正值时，它会自动向右缩进指定的像素；如果给它 指定一个负值，则会向左移动指定 的像素，通过这种方式可以将一些不想显示的文字隐藏起来。