前端css学习笔记4：常用样式设置
本文为个人学习总结，如有谬误欢迎指正。前端知识众多，后续将继续记录其他知识点！
目录
前言
一、颜色
表示方法：
作用：设置背景色，文本颜色，边框颜色
二、文本属性
字体
大小—font-size
常用长度单位
px（像素）—绝对单位
em（相对于当前元素或其父元素的font-size的倍数）
编辑rem（相对于根元素html标签的font-size的倍数）
编辑%（相对其父元素的百分比）
字体族（种类）—font-family
字体风格—font-style
字体粗细—font-weight
复合写法—font
间距
letter-spacing 属性用于指定文本中字符之间（包括字母和中文）的间距。
word-spacing 属性用于指定文本中单词之间（不包括中文）的间距。（通过空格识别单词）
text-decoration 属性用于设置或删除文本装饰。
缩进—text-indent
（水平）对齐—text-align
（垂直）对齐—vertical-align
编辑实际应用示例
图文混排居中
按钮内图标居中
行高—line-height
前言
在学习 CSS 的过程中，文本样式的设置是基础且高频的应用场景 —— 从文字的颜色、大小，到字体的选择、间距的调整，再到文本的对齐方式，每一个细节都影响着页面的可读性与美观度。本文聚焦 CSS 文本属性及颜色表示方法，希望这份笔记能为同样正在学习CSS的同学提供参考，也欢迎大家结合原课程视频深入学习，共同进步。
网课链接： https://www.bilibili.com/video/BV1p84y1P7Z5/?share_source=copy_web&vd_source=faad59aa4025692c65fca19bc4320e39
一、颜色
表示方法：
- 颜色名：直接使用颜色对应的英文单词，编写比较简单，例如：.红色：red 绿色：green 蓝色：blue。。
- rgb或者rgba：用红、黄、蓝这三种光的三原色进行组合。
- r表示红色。
- g表示绿色
- b表示蓝色
- a表示透明度
作用：设置背景色，文本颜色，边框颜色
二、文本属性
字体
大小—font-size
div{font-size：40px;
} - Chrome浏览器支持的最小文字为12px，默认的文字大小为16px，并且0px会自动消失。
- 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
- 通常以给body设置font-size属性，这样body中的其他元素就都可以继承了
用 em 设置字体大小——使用 em 尺寸单位
- 为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。
- 1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。
- pixels/16=em
还可以使用百分比和vm
body {font-size: 100%;
}可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewport width"）。
这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放。
常用长度单位
px（像素）—绝对单位
em（相对于当前元素或其父元素的font-size的倍数）
- 1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。
- pixels/16=em
- 如果不写当前元素的font-size，会先找其父元素的font-size，然后找祖先元素（包括body和html标签），都没有，使用浏览器默认值16px
- 如果当前元素的font-size单位也是em，那找其父元素，找到单位是px的计算
rem（相对于根元素html标签的font-size的倍数）
%（相对其父元素的百分比）
字体族（种类）—font-family
- 规定文本的字体。
- font-family 属性应包含多个字体名称（从左到右依次寻找）作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。以需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。
- 如果字体名称不止一个单词或者有空格，则必须用引号引起来，例如："Times New Roman"。
字体风格—font-style
font-style 属性主要用于指定斜体文本。（默认值是normal）
此属性可设置三个值：
- normal - 文字正常显示
- italic - 文本以斜体显示
- oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
em标签也可显示倾斜字体，但是它表示语义上强调
字体粗细—font-weight
font-weight 属性指定字体的粗细：
此属性值有：
- lighter：细
- normal:正常
- bold:粗
- bolder：很粗（多数字体不支持）
数值：
- 100~1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）。
- 100~300等同于lighter，400~500等同于normal，600及以上等同于bold。
复合写法—font
有顺序-字体族最后，字体大小倒数第二
- 把上述字体样式合并成一个属性
- 规则：
- font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。
- 字体族必须是最后一位、字体大小必须是倒数第二位。
- 各个属性间用空格隔开。
间距
单位是px；正值（增加），负值（减少）
letter-spacing 属性用于指定文本中字符之间（包括字母和中文）的间距。
- 正值—增加；负值—减少字符之间的间距
<!DOCTYPE html>
<html>
<head>
<style>
h1 {letter-spacing: 3px;
}h2 {letter-spacing: -3px;
}
</style>
</head>
<body> <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h2>计算机网络</h2></body>
</html> word-spacing 属性用于指定文本中单词之间（不包括中文）的间距。（通过空格识别单词）
- 正值—增加；负值—减少单词之间的间距
text-decoration 属性用于设置或删除文本装饰。
修饰（上/下划线;删除线）—text-decoration
此属性可选值：
- none:无装饰线（常用）；通常用于从链接上删除下划线：
- underline：下划线（常用）
- overline：上划线
- line-through:删除线
可搭配如下值使用（直接在text-decoration值后面加）：
1.dotted：虚线
2.wavy：波浪线
3.也可以指定颜色
颜色，dotted/wavy,underline/overline/line-through这三者顺序无所谓（都是text-decoration的值）
缩进—text-indent
text-indent 属性用于指定文本第一行的缩进：
缩进距离还与字体大小有关，单位目前是px（还可以写em等）
（水平）对齐—text-align
text-align 属性用于设置文本的水平对齐方式。
此属性可选值：
- left：左对齐（默认）
- right：右对齐
- center：居中对齐。
- justify：将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）
（垂直）对齐—vertical-align
作用：用于指定同一行元素之间（行内元素）<可以控制文字或者图片>或者表格单元格内文字的垂直对齐方式
- 行内元素（如
<span>、<img>、<input>）在行框（line box）内的垂直对齐。 - 表格单元格（
<td>、<th>）内容的对齐。
此属性可选值：
- baseline（默认值）：使元素的基线与父元素的基线对齐。
- bottom：使元素的底部与其所在行的底部对齐。(同一行其他文字不一定对齐）
baseline看字母底线，bottom贴行框底边！
- top：使元素的顶部与其所在行的顶部对齐。(同一行其他文字不一定对齐）
- middle：将元素的中部与父元素的 基线（baseline） + 父元素 x-height 的一半 对齐。（行内元素近似居中、表格单元格绝对居中）
- x-height：指字母
x的高度（小写字母的主体部分）。 - 和父元素的x字母中心点对齐
- 即使父元素没有字母
x，浏览器会模拟一个虚拟的x的基线（baseline）和 x-height 作为对齐依据：
- 基线（baseline）：默认是父元素字体设计的基线位置（即使没有字符）。
- x-height：使用父元素字体的
ex单位（1ex ≈ 小写字母x的高度）。
- 若父元素是
inline-block图片或图标：- 浏览器会将基线与图片底部对齐，
middle以图片高度的一半为参考。
- 浏览器会将基线与图片底部对齐，
注意：
- vertical-line不能控制块元素（p，div），也不能控制父元素（标签中只有一个元素）
.test{width:400px;height:4400px;background-color:green;vertical-align:midlle;
}
<!-- 123是div的直接元素，vertical-line的位置依赖于父元素 -->
<div class="test">123</div>- 多行文字居中：height=line-height
- 对于middle属性：
- 行内元素（文本、图片）：本或图片的中部与父元素的 baseline + 0.5ex 对齐。如果父元素设置了较大的 line-height，可能看起来略微偏下。
- 表格单元格：单元格内容绝对垂直居中（与 line-height 无关）
实际应用示例
图文混排居中
<p><img src="icon.png" style="vertical-align: middle;"> 文字与图标居中
</p>效果：图标中部与文字的中部对齐。
图片比文字小—调整时图片位置改变（与文字位置对齐，涉及到字体大小和行高）
图片比文字大—调整时文字位置改变（与图片位置对齐）
按钮内图标居中
<button><svg style="vertical-align: middle;"></svg><span style="vertical-align: middle;">按钮</span>
</button>行高—line-height
line-height 属性用于指定行之间的间距，与多行文字的垂直间距有关（行高大，文字垂直间距大）
可选值：
- normal：由浏览器根据文字大小决定的一个默认值。
- 像素(px)。
- 数字：参考自身font-size 的倍数（很常用）。
- 百分比：参考自身font-size 的百分比。
div{line-height: 60px;line-height: 1.5;line-height:150%;
}应用场景：
- 多行文字：控制行与行之间的距离。
- 对于单行文字：让height等于line-height，可以实现文字垂直居中。（不是绝对的垂直居中）
注意：
- 由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
- 一般不会把行高（line-height）设置为字体大小（font-size）一样(数字也不写1；百分比不写100）
- 行高过小，文字产生重叠，且最小值是θ（多行文字重叠，背景色消失【如果设置了】），不能为负数。
- line-height是可以继承的，且为了能更好的呈现文字，最好写数值。
line-height和height是什么关系？
- 设置了height，那么高度就是height的值。
- 不设置height的时候，会根据line-height计算高度。
- height是整体的行高（如果设置了height）
但是行高最高写数字，自动缩放比例，根据不同的字体大小自动计算（只继承缩放比例），直接写像素就直接继承像素
✅ 推荐使用无单位的 line-height（如 1.6），因为它能更好地适应不同字体大小。
❌ 避免使用 em 或 % 单位，除非你有特殊需求。
❌ 使用 px 固定值会失去灵活性，不利于响应式设计。
body { font-size: 16px; line-height: 1.5em; } /* 计算为 24px */
h1 { font-size: 32px; } /* 但 h1 的行高仍然是 24px，可能太挤 */如果 line-height 是无单位的 1.5，h1 会自动计算为 32px × 1.5 = 48px，更合理。