文章详细介绍了CSS中长度单位的使用，包括像素、百分比、em和rem，以及颜色单位的各种形式如RGB、RGBA、十六进制和HSL，并讲解了字体样式如颜色、大小、字体家族以及自定义字体的方法，最后讨论了行高的设定和其在文本垂直居中中的作用。
一、长度单位
1.像素 px
其实就是一个个发光的小点，肉眼是看不到的，这也是我们现阶段最常用的单位
而且是个固定（绝对）单位
2.百分比 %
它是个相对单位，相对于其父元素的宽度变化而变化，一般情况可以用来做流动式布局
3.em
也是个相对单位，它相对于自身字体大小的变化而变化，如果自身没有设置字体大小，就会继承其
父元素或者祖先元素的字体大小，直到继承根标签（html）的字体大小,如果根标签没有设置字体大小，
html根标签默认的字体大小是16px
4.rem
也是个相对单位，它是相对于根标签（html）标签的字体大小变化而变化,如果根标签没有设置字体大小，
html根标签默认的字体大小是16px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
html{
font-size: 30px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box1{
width: 5rem;
height: 5rem;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
box1
</div>
</div>
</body>
</html>二、颜色的单位
1.在CSS可以直接使用颜色的单词来表示不同的颜色
red green yello black等等
但不同的颜色单词种类繁多，也不好拼写，不好描述，所以不推荐使用
2.使用RGB值来表示不同的颜色
语法： rgb(red, green, blue)
分别以红色，绿色，蓝色三种颜色为基本色，根据不同的浓度值来勾兑出不同的颜色
浓度的范围：0-255，0最小的，255最大的
获取颜色：来到截屏的模式，将鼠标箭头对准你要的颜色，然后进行提取即可，
注意提取的颜色格式，不一定是rgb语法，也有可能是16进制的写法
3.RGBA
语法：rgba(red, green, blue, alpha)
alpha：透明度 0-1之间 0表示透明，1表示不透明
4.使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样
语法：#红色浓度绿色浓度蓝色浓度
浓度值也是0-255，只不过用16进制的写法
16进制：0-9abcdef
例如：#00ff00,像这种两两重复的写法，可以省略一位，简写#0f0
#0f0f0f,像这种就不可以简写
5.HSL值 HSLA值
语法：hsl(hue, saturation, lightness);
语法：hsla(hue, saturation, lightness, alpha)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.box1 {
width: 100px;
height: 100px;
/* background-color: rgb(0,255,0); */
background-color: rgba(0, 0, 255, 0.5);
/* background-color: rgba(255, 0, 0, 0.3); */
/* background-color: hsla(hue, saturation, lightness, alpha) */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
三、字体的样式
1:color 设置字体颜色,也可以设置其他颜色
2、font-size 设置字体的大小
3、font-family可以指定文字的字体
4、@font-face 可以自定义使用非电脑自带字体
使用步骤
（1）、先自定，设置好字体
（2）、去使用即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
@font-face {
/* 你给字体起的名字 */
font-family: "xiyangyang";
/* 自定义字体的路径 */
src: url(./字体/MeowScript-Regular.ttf);
}
p {
/* 1:color 设置字体颜色,也可以设置其他颜色 */
color: #999;
/* 2、font-size 设置字体的大小 */
font-size: 2rem;
/* 3、font-family可以指定文字的字体
有关字体，设计师会提前设计好
*/
/* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
/* 4、@font-face 可以自定义使用非电脑自带字体
使用步骤
（1）、先自定，设置好字体
（2）、去使用即可
*/
font-family: "xiyangyang";
}
</style>
</head>
<body>
<p>看说年罪千，则中薪。Lorem ipsum dolor sit amet.</p>
</body>
</html>
字体的分类：
在网页中将字体分成5大类：
serif ['serif]（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive ['kə:siv]（草书字体）
fantasy ['fæntəsi]（虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式一般会将字体的大分类，指定为font-family中的最后一个字体,用来兜底。
5、font-style 设置文字斜体
可选值：
normal 文字正常显示 默认值
italic 设置斜体 常用
oblique 设置斜体
6、font-weight 设置文字的加粗
可选值：
normal 文本正常显示，默认值
bold 加粗
bolder 加粗
100-900 100最细，900最粗
7、font简写
注意：
1、字体相关的样式值设置，需要以空格隔开
2、必须要写字体大小和字体
3、字体的大小必须在倒数第二位，字体必须在倒数第一位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.p1{
color: #999;
/* 设置一个文字大小 */
font-size: 2em;
/* 设置一个字体 */
font-family: sans-serif;
/*font-style 设置文字斜体
可选值：
normal 文字正常显示 默认值
italic 设置斜体 常用
oblique 设置斜体
*/
font-style: normal;
/*font-weight 设置文字的加粗
可选值：
normal 文本正常显示，默认值
bold 加粗
bolder 加粗
100-900 100最细，900最粗
*/
font-weight: 100;
/*font-variant 设置一个小型大写字母
可选值：
normal 文本正常显示，默认值
small-caps 将字母变成小型大写字母
*/
font-variant:small-caps;
}
.p2{
color: red;
/* font简写
注意：
1、字体相关的样式值设置，需要以空格隔开
2、必须要写字体大小和字体
3、字体的大小必须在倒数第二位，字体必须在倒数第一位
*/
font:bolder italic 3em serif;
}
</style>
</head>
<body>
<p class="p1">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefg</p>
<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
<p class="p3">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
四、行间距
1、行高（line height） 文字占有的实际高度
行高=上间距+字体大小+下间距
而且 上间距=下间距，所以我们也可以通过控制行高，来设置垂直方向，文字之间距离
line-height:; 设置行高
可选值：
（1）、直接长度单位 60px
（2）、直接写数字 1/2/3···· 是当前字体大小的倍数
（3）、写百分比 100%/200%/300%····
2、单行文本在父元素中垂直居中
只需将行高设置与元素高度一致即可
3、font中也可以指定行高
语法： font:字体大小/行高 字体;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!-- 1、行高（line height） 文字占有的实际高度
行高=上间距+字体大小+下间距
而且 上间距=下间距，所以我们也可以通过控制行高，来设置垂直方向，文字之间距离
line-height:; 设置行高
可选值：
（1）、直接长度单位 60px
（2）、直接写数字 1/2/3···· 是当前字体大小的倍数
（3）、写百分比 100%/200%/300%····
2、单行文本在父元素中垂直居中
只需将行高设置与元素高度一致即可
3、font中也可以指定行高
语法： font:字体大小/行高 字体;
-->
<style>
.p1{
font-size: 20px;
line-height: 200%;
}
.box{
width: 100px;
height: 100px;
background-color: pink;
line-height: 100px;
}
.p2{
font:italic 2em/1.5 sans-serif;
}
</style>
</head>
<body>
<p class="p1">一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。</p>
<p class="p2">在我的后园，可以看见墙外有两株树，一株是枣树，</p>
<div class="box">
<a href="#">超链接</a>
</div>
</body>
</html>
2258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
