在 CSS 中，可以通过以下属性设置字体大小和颜色：
1. 设置字体大小（font-size）
selector {
font-size: 值;
}常用单位：
px：像素（绝对单位，如16px）em：相对单位（基于父元素字体大小，如1.5em）rem：相对单位（基于根元素<html>的字体大小，如1.2rem）%：百分比（如120%）vw/vh：视窗宽度/高度的百分比（如2vw）
示例：
p {
font-size: 16px; /* 固定像素 */
}
h1 {
font-size: 2em; /* 父元素字体大小的2倍 */
}
body {
font-size: 1.2rem; /* 根元素字体大小的1.2倍 */
}2. 设置字体颜色（color）
selector {
color: 颜色值;
}颜色值的写法：
- 颜色名称：如
red,blue,green - 十六进制：如
#ff0000（红色），简写#f00 - RGB/RGBA：如
rgb(255, 0, 0)或rgba(255, 0, 0, 0.5)（带透明度） - HSL/HSLA：如
hsl(0, 100%, 50%)（色相、饱和度、亮度）
示例：
h1 {
color: #333; /* 深灰色 */
}
.highlight {
color: rgb(255, 0, 0); /* 红色 */
}
.transparent-text {
color: rgba(0, 0, 255, 0.7); /* 半透明蓝色 */
}完整示例
<style> .title { font-size: 24px; color: #ff5722; /* 橙色 */ } .subtitle { font-size: 1.5rem; color: hsl(210, 100%, 50%); /* 亮蓝色 */ } .small-text { font-size: 0.8em; color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */ } </style> <h1 class="title">这是标题</h1> <p class="subtitle">这是副标题</p> <p class="small-text">这是小号文字</p>
注意事项：
- 响应式设计：建议优先使用
rem或em单位，便于整体调整字体大小。 - 可访问性：确保颜色对比度足够（如深色文字配浅色背景）。
- 继承性：
color属性会被子元素继承，但font-size的具体表现取决于使用的单位（如em基于父元素，rem基于根元素）。 如果需要同时设置字体家族，可以结合
font-family使用：
×
如果觉得文章对您有用，请随意打赏。
您的支持是我们继续创作的动力！
微信扫一扫
支付宝扫一扫
扫描二维码，在手机上阅读
评论一下？