如何在CSS中使用颜色名称_color关键字基础实践

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中使用颜色名称_color关键字基础实践

2025-11-21

浏览次数：次

返回列表

颜色关键字是CSS中预定义的英文名称，如red、blue、green等，共140多个，可直接用于color、background-color等属性，代码直观易读，适合初学者和快速开发，不区分大小写，推荐小写书写，gray与grey拼写均支持，但色彩有限，精确配色建议用十六进制或rgb()，所有主流浏览器完全兼容。

如何在css中使用颜色名称_color关键字基础实践

在CSS中使用颜色名称是一种简单直观的方式，适合初学者快速上手网页设计。颜色关键字是预定义的英文单词，可以直接代表特定颜色，无需记忆复杂的代码或数值。

常用颜色关键字示例

CSS支持140多个标准颜色关键字，以下是几个高频使用的例子：

red：红色
blue：蓝色
green：绿色
black：黑色
white：白色
gray 或 grey：灰色（美式与英式拼写都支持）
yellow：黄色
cyan：青色
magenta：品红
orange：橙色

这些关键字可直接用于任何接受颜色值的CSS属性中。

在样式中应用颜色关键字

颜色关键字可以用于设置文本颜色、背景色、边框颜色等。以下是一些实际用法：

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

p {
  color: blue;          /* 文字为蓝色 */
}
<p>h1 {
background-color: yellow; /<em> 背景为黄色 </em>/
}</p><p>.button {
border: 2px solid green;  /<em> 边框为绿色 </em>/
}</p><p>div.highlight {
color: white;
background-color: black;  /<em> 白字黑底 </em>/
}</p>