文本样式、 数值单位
我们先了解一下 文本元素 （比如 p 、 span 、 h1 、 a ）的常见样式
颜色
前面的学习，我们已经知道文字的颜色是用 color 指定的
color 指定了文字的颜色， 其实还可以用 background-color 指定背景色
<body style="background-color:lightgray">
<h1 style="color:red;background-color:white">白月黑羽今日信息</h1>
</body>
颜色的取值可以有如下这些
关键字值
就是直接用对应颜色的英文词汇表示颜色，前面我们都是这样用的。
比如 red、green、white、blue、black、yellow、teal、gray 等等
可以点击这里，查看所有的 颜色关键字定义
Hex RGB值
这是用 红绿蓝（RGB） 3色的 16进制值 组合表示的颜色，
比如
<head>
<style>
div{
margin:2rem;
padding: 1rem
}
/* 可以修改RGB颜色值看看变化*/
.one {
background-color: #02798b;
}
</style>
</head>
<body>
<div class="box one">#02798b</div>
</body>
也可以加入第4个表示透明的的 16进制值， 00 表示完全透明， FF表示完全不透明
比如
.one {
background-color: #02798b80;
}
rgb函数
也可以使用 rgb() 函数，参数为 红绿蓝（RGB） 3色的 10进制值
比如
<head>
<style>
div{
margin:2rem;
padding: 1rem
}
/* 可以修改RGB颜色值看看变化*/
.one {
background-color: rgb(2, 121, 139);
}
</style>
</head>
<body>
<div class="box one">rgb(2, 121, 139)</div>
</body>
你还可以给rgb() 函数 传入第4个参数，表示透明度的alpha值。
如果为 0 表示 完全透明，1表示完全不透明， 0.5 表示 50%的透明度，比如
.one {
background-color: rgb(2, 121, 139, .7);
}
长度单位
文本字体的大小由 font-size 指定
比如
<p style='font-size: 16px;'>白月黑羽日活用户突破3万</p>
16px 表示 文字的大小是 16个像素。
px是一种 长度单位
css中属性值是一种长度单位的，常见的还有 width 、height 等
长度单位值的表示常见的有 px 、 rem 、 em 、 vw 、 vh
px
px 是很常见的长度单位，表示像素个数 ， 比如 16px 表示16个像素点长度。
这里的像素是对应 96 DPI 的显示器上的 物理像素 。 浏览器会根据当前显示器的dpi 做转换。
DPI 是 Dots per Inch ， 也就是：每英寸长度有多少个点（像素）
比如，你的显示器 是 192 DPI， 那么 1px 等于 2个物理像素
但是对 font-size 来说，到底是高度、还是宽度、还是对角线 长度 是 16 个像素？
我查询的资料（参考这里），大多说是高度， 但是实际上根据系统的实现，也不完全是这样。
比如
<h1 style="color:red;font-size: 1px;">白月黑羽</h1>
可见，其大小并非1个像素
所以，font-size 的px值，我们目前就看作 也是一个相对大小的单位，px 前面的数字越大，字体越大。
但是，对宽度、高度，这样的css属性，px是一个精确的单位
<div style="background-color: green;width:200px;height:1px"></div>
rem
rem 是一种 相对长度单位
{
/*数字 和 rem之间不能有空格*/
width : 1.2rem;
height : 2rem;
font-size : 2rem;
}
rem 为单位的数值， 相对的是 根元素 html 的字体大小。
1rem 表示和 根元素字体大小一致， 1.2em 表示 根元素字体大小的 1.2 倍
下面的例子中，如果你修改html的字体大小，会发现span元素字体大小会跟着变，
而修改body的字体大小，则不会跟着变
<!DOCTYPE html>
<html>
<head>
<style>
html{
font-size: 10px;
}
body{
font-size: 20px;
}
span{
font-size: 1rem;
}
</style>
</head>
<body>
<span>
黑羽压测1.44版发布
</span>
</body>
</html>
同样， rem用来修饰元素的 宽度、高度 ，也是相对于 根元素 html 的字体大小。
下面的例子中，如果你修改html的字体大小，会发现 div 大小会跟着变，
而修改body、或者div自身的字体大小，则不会
<!DOCTYPE html>
<html>
<head>
<style>
html{
font-size: 10px;
}
body{
font-size: 20px;
}
div{
background-color: green;
font-size: 5px;
width:20rem;
height:.1rem
}
</style>
</head>
<body>
<div />
</body>
</html>
em
em 也是一种 相对长度单位
{
/*数字 和 em 之间不能有空格*/
width : 1.2em;
height : 2em;
font-size : 2em;
}
em 为单位的数值，
-
如果用在 印刷类型的属性上（比如
font-size）， 相对的是其 父元素 的字体大小1em表示和 父元素字体大小一致，1.2em表示 父元素字体大小的 1.2 倍
下面的例子中，如果你修改 div#d2 的字体大小，会发现 span元素字体大小会跟着变，
而修改 div#d1 的字体大小，则不会
<!DOCTYPE html> <html> <head> <style> #d1 { font-size: 10px; } #d2 { font-size: 20px; } span{ font-size: 1em; } </style> </head> <body> <div id='d1'> <div id='d2'> <span> 黑羽压测1.44版发布 </span> </div> </div> </body> </html>
但是，如果用在 其它属性上（比如 width height）， 相对的是其 本身 的字体大小，而不是父元素的字体大小。
1em 表示和 本身字体大小一致， 1.2em 表示 本身字体大小的 1.2 倍
下面的例子中，如果你修改div自身的字体大小，会发现 div 宽度、高度会跟着变，
而修改body、或者html的字体大小，则不会
<!DOCTYPE html>
<html>
<head>
<style>
html{
font-size: 10px;
}
body{
font-size: 20px;
}
div{
background-color: green;
font-size: 5px;
width:20em;
height:.1em
}
</style>
</head>
<body>
<div />
</body>
</html>
vw、vh
有时，我们会使用 vw 、 vh 这两个相对单位， 分别表示 相对整个浏览器网页内容的显示框 viewport 的 宽度 和 高度
1vw 表示 viewport 的 宽度 1%，
100vw 表示 viewport 的 宽度 100%，也就是整个内容显示框的宽度。
同理，
1vh 就是 1% 的 viewport高度
100vh 就是 100% 的 viewport高度
比如
<!DOCTYPE html>
<html>
<head>
<style>
span{
font-size: 5vh;
}
</style>
</head>
<body>
<span>
黑羽压测1.44版发布
</span>
</body>
</html>
可以发现，随着窗口高度的调整，字体大小跟着变化
一个典型的vh的使用是，设置body的高度为 占满整个 viewport。
如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>白月黑羽web教学</title>
<style>
body {
height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
nav {
background: #218a8a;
color:white;
padding: 1rem;
}
main {
background: whitesmoke;
color: #444;
padding: 1rem;
}
footer {
background: #e0e0e0;
padding: 1rem;
text-align:center
}
</style>
</head>
<body>
<nav>
导航栏
</nav>
<main>
<strong>这里是主体内容.</strong>
</main>
<footer>
白月黑羽版权所有
<br>
<small>2020-2022 @copy rights reserved</small>
</footer>
</body>
</html>
缺省情况下 html 和 body的高度是由其内容决定的。
如果网页有页脚，body的内容小于viewport 的高度 页脚就不会显示在viewport的最下面，显得比较难看
设置 body的高度为 100vh，就可以很好的解决这个问题
字体
类别
文本类型的元素， 其字体是由 font-family 属性设定的
比如
{
font-family: 'Courier New', monospace, Menlo, 新宋体;
}
指定的值可以由多种字体组成，中间用逗号隔开。
字体名称中如果有空格，建议用 引号 引起来。
排在前面的字体优先级最高，每个字符，浏览器都会按照字体列表的顺序依次查找， 如果这个字符该字体中找不到（比如中文），就会往后面查看下一个字体。
这些字体要在本机安装才能有效。
粗细/倾斜/装饰线
- font-weight
文本元素可以用 font-weight 指定 文字显示 粗体程度
其值 可以用1-1000的数字指定， 越大表示 字体越粗
取值也可以是 lighter 、 normal 、 bold 、 bolder ，字体从细到粗。
大家直接 点击这里看 MDN 官方的文档示例即可，非常清楚
- font-style
文本元素可以用 font-style 指定 文字显示是否为 斜体。
如果值 是 italic 表示为斜体， normal 表示正常显示不倾斜
-
text-decoration
text-decoration用来 设置 或者 取消 文本的 上划线、下划线none: 取消已经存在的任何文本装饰。
典型的用法就是取消
<a>元素的下划线-
underline: 设置文本有下划线 -
overline: 设置文本有上划线 -
line-through: 设置文本有穿越线 strikethrough
text-decoration 可以指定多个值，比如：
{
text-decoration: underline overline
}
边框
可以通过 CSS border 属性给元素设置边框
比如
<p style='border:1px solid green'>白月黑羽 自动化测试 教程</p>
这里border的值 1px solid green 分别代表了边框的 线宽、 样式 、 颜色
边框线宽
线宽的单位可以是 px em rem 等， 也可以是 thin、medium、thick 这样的关键字
边框样式
样式可以是如下的值
- none 不显示边框
- dotted 边框显示为圆点线
- dashed 边框显示为虚线
- solid 边框显示为实线
- double 边框显示为双实线
- groove 边框线显示为雕刻效果，与 ridge 相反
- ridge 边框线显示为浮雕效果，与 groove 相反
- inset 边框线显示为陷入效果
- outset 边框线显示为突出效果
边框颜色
指定了边框的颜色，可以是前文说明的任何取值
比如 green、red、#ccaa99、 rgb(2, 121, 139) 等
边框边角弧度
缺省情况下，边框是矩形，边角当然是直角。
可以通过 border-radius 指定边角的弧度，形成圆角边框
比如
<head>
<style>
div {
width: 400px;
height:200px;
margin: 1rem auto;
background-color: #02798b;
border-radius: 40px;
}
</style>
</head>
<body>
<div>边角弧度展示</div>
</body>
border-radius: 40px 表示四个边角各为一个圆的1/4扇形，对应圆的半径为 40个像素
如果，改为 border-radius: 50%; ，则表示四个边角各为一个椭圆的1/4，垂直、水平方向 各为 元素高度、宽度的50%。
四个角都是这样，就正好形成一个椭圆。如下图所示
<head>
<style>
div{
width: 400px;
height:200px;
margin: 1rem auto;
background-color: #02798b;
border-radius: 50%;
}
</style>
</head>
<body>
<div>边角弧度展示</div>
</body>
如果 修饰的元素本身是正方形，就形成一个正圆形，如下
<head>
<style>
div{
width: 200px;
height:200px;
margin: 1rem auto;
background-color: #02798b;
border-radius: 50%;
}
</style>
</head>
<body>
<div>边角弧度展示</div>
</body>
文字布局
下面介绍一些 和 文字布局 相关的CSS属性
对齐
text-align 属性指定文本内容 的对齐方式 。
注意，这个对齐的范围是该元素所属的 包含块区（后面有详细讲解）
取值如下：
-
left: 左对齐文本 -
right: 右对齐文本 -
center: 居中文字
如下示例中，你可以尝试修改 text-align 的值，看看最终的显示效果
<body>
<h3 style='text-align:center'>我们的教程有</h3>
<div style='text-align:center'>
<p>白月黑羽 Python 教程</p>
<p>白月黑羽 自动化测试 教程</p>
<p>白月黑羽 前端开发 教程</p>
</div>
</body>
行高
line-height 属性设置文本每行之间的高，可以接受大多数长度单位，比如 px、em、rem等
通常更多的是设置一个无单位的值，作为 font-size 的倍数，比如 1.5
行与行之间拉开合适的空间，正文文本看起来更好更容易阅读。
推荐的行高大约是 1.5–2
如下示例中，你可以尝试修改 line-height 的值，
分别为 5px/10px/1em/2em/1rem/2rem/1.5/2.5，看看最终的显示效果
<body>
<h3 style='text-align:center'>我们的教程有</h3>
<div style='text-align:center;line-height: 2.5;'>
<p>白月黑羽 Python 教程</p>
<p>白月黑羽 自动化测试 教程</p>
<p>白月黑羽 前端开发 教程</p>
</div>
</body>
字词间距
letter-spacing 属性 设置 文本中 字母与字母 之间的间距。
word-spacing 属性 设置 文本中 单词与单词 之间的间距。
它们可以使用大多数长度单位，比如 px、em、rem 等
如下
<body>
<h3 style='text-align:center'>我们的教程有</h3>
<div style='text-align:center;letter-spacing: 2px;word-spacing:4px'>
<p>白月黑羽 Python 教程</p>
<p>白月黑羽 自动化测试 教程</p>
<p>白月 黑羽 前端开发 教程</p>
</div>
</body>
注意：连续的中文（没有空格）是看作同一个词的
white-space
white-space 指定了如何处理元素内部的空白和换行
-
normal
连续的空白符会被
合并，换行符会被当作空白符来处理。文本长度到了限制宽度，会自动换行，保证不超过限制宽度。
-
nowrap
连续的空白符会被
合并，换行符会被当作空白符来处理。文本长度到了限制宽度，不会自动换行，而是一直在一行呈现
-
pre
就是尽量按照html里面的文本内容呈现
连续的空白符会被
保留。换行符也会做换行处理。文本长度到了限制宽度，不会自动换行，而是一直在一行呈现
-
pre-wrap
和 pre 类似，除了：文本长度到了限制宽度，会自动换行，保证不超过限制宽度。
-
pre-line
和 pre-wrap 类似，除了：连续的空白符会被
合并而不是保留 -
break-spaces
与 pre-wrap 类似，除了：
任何保留的空白序列总是占用空间，包括在行尾。每个保留的空格字符后都存在换行机会，包括空格字符之间。
这样如果一行末尾有连续的空格，长度超过限制长度，会导致下面有空行
根据视频讲解，下面的html中的 white-space 换成 不同的取值，看看显示效果的差异
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 90%;
margin: 0 auto;
}
p {
font-family: 新宋体;
background-color: rgb(79,185,227);
padding: 1em;
width: 400px;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>white-space示例</h1>
<p>
我们 不是 上大班课的学习方式
我们 是 定制学习路线 + 实战练习 + 1对1 指导答疑
学习练习过程中有任何问题， 随时找老师解答指导， 简单问题文字语音，复杂问题连线指导
</p>
</body>
</html>