1.1 色彩
CSS (Cascading Style Sheets) 提供许多属性来为文本添加样式。其中最重要的是
color，font-size 和 font-weight。这些属性分别用于控制文本的颜色、大小和字体粗细。让我们具体看看每一个属性。
属性 color 设置文本的颜色。可以通过多种色彩格式来定义，包括颜色名称、十六进制值、RGB、RGBA、HSL 和 HSLA。
使用示例
1. 颜色名称：
CSS
p {
color: red;
}
2. 十六进制值：
CSS
p {
color: #ff0000;
}
3. RGB 和 RGBA：
CSS
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}
4. HSL 和 HSLA：
CSS
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
}
HTML 中的使用示例：
CSS
p {
color: #3498db; /* 蓝色 */
}
HTML
<body>
<p>这段文本将会是蓝色的。</p>
</body>
1.2 属性 font-size
属性 font-size 用于设置文本的大小。可以用各种单位表示，如像素 (px)，相对单位 (em, rem, %)，以及基于像素的单位 (mm, cm, pt, pc), vw 和 vh (视口宽度和高度) 等等。
使用示例
1. 像素：
CSS
p {
font-size: 16px;
}
2. 相对单位：
%, em, rem
CSS
p {
font-size: 150%; /* 150% 的基础字体大小 */
font-size: 1.5em; /* 1.5 倍于基础字体大小 */
font-size: 1.5rem; /* 相对于 <html> 元素的字体大小 */
}
3. "视口"单位：
CSS
p {
font-size: 2vw; /* 2% 视口宽度 */
font-size: 2vh; /* 2% 视口高度 */
}
HTML 中的使用示例：
CSS
p {
font-size: 18px; /* 文本大小为 18 像素 */
}
HTML
<body>
<p>这段文本将会是 18 像素大小。</p>
</body>
1.3 属性 font-weight
属性 font-weight 设置文本粗细。数值可以是关键字 (normal, bold, bolder, lighter) 或者数值从 100 到 900，其中 400 相当于 normal，700 相当于 bold。
使用示例
1. 关键字：
CSS
p {
font-weight: bold;
}
2. 数值：
CSS
p {
font-weight: 300; /* 轻文字 */
font-weight: 700; /* 等价于 bold */
}
HTML 中的使用示例：
CSS
p {
font-weight: 700; /* 粗体文本 */
}
HTML
<body>
<p>这段文本将会是粗体。</p>
</body>
GO TO FULL VERSION