前端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>

效果：图标中部与文字的中部对齐。

图片比文字小—调整时图片位置改变（与文字位置对齐，涉及到字体大小和行高）

图片比文字大—调整时文字位置改变（与图片位置对齐）

按钮内图标居中

行高—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，更合理。

前端css学习笔记4：常用样式设置

前言