- CSS 教程
- CSS - 首页
- CSS - 路线图
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 包含
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图片
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 块级边框
- CSS - 内联边框
- CSS - 外边距
- CSS - 列表
- CSS - 内边距
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS - 清除浮动
- CSS - 浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 顺序
- CSS - 位置
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 聚焦
- CSS - 缩放
- CSS - 平移
- CSS - 高度
- CSS - 连字符字符
- CSS - 宽度
- CSS - 不透明度
- CSS - Z 索引
- CSS - 底部
- CSS - 导航栏
- CSS - 覆盖层
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS - 根元素
- CSS - 盒模型
- CSS - 计数器
- CSS - 剪辑
- CSS - 书写模式
- CSS - Unicode 双向算法
- CSS - min-content
- CSS - 全部
- CSS - 内嵌
- CSS - 隔离
- CSS - 滚动溢出
- CSS - Justify Items
- CSS - Justify Self
- CSS - 制表符大小
- CSS - 指针事件
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - 最大块级尺寸
- CSS - 最小块级尺寸
- CSS - 混合模式
- CSS - 最大内联尺寸
- CSS - 最小内联尺寸
- CSS - 偏移
- CSS - 重音颜色
- CSS - 用户选择
- CSS 高级
- CSS - 网格
- CSS - 网格布局
- CSS - Flexbox
- CSS - 可见性
- CSS - 定位
- CSS - 图层
- CSS - 伪类
- CSS - 伪元素
- CSS - @规则
- CSS - 文本效果
- CSS - 分页媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图片精灵
- CSS - 重要
- CSS - 数据类型
- CSS3 教程
- CSS3 - 教程
- CSS - 圆角
- CSS - 边框图片
- CSS - 多重背景
- CSS - 颜色
- CSS - 渐变
- CSS - 盒阴影
- CSS - 盒装饰中断
- CSS - 光标颜色
- CSS - 文本阴影
- CSS - 文本
- CSS - 2D 变换
- CSS - 3D 变换
- CSS - 过渡
- CSS - 动画
- CSS - 多列
- CSS - 盒尺寸
- CSS - 工具提示
- CSS - 按钮
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 函数
- CSS - 数学函数
- CSS - 遮罩
- CSS - 形状
- CSS - 样式图片
- CSS - 特异性
- CSS - 自定义属性
- CSS 响应式
- CSS RWD - 简介
- CSS RWD - 视口
- CSS RWD - 网格视图
- CSS RWD - 媒体查询
- CSS RWD - 图片
- CSS RWD - 视频
- CSS RWD - 框架
- CSS 工具
- CSS - PX 到 EM 转换器
- CSS - 颜色选择器和动画
- CSS 资源
- CSS - 有用资源
- CSS - 讨论
CSS 数据类型 - <named-color>
CSS 中的<named-color> 数据类型指的是一组预定义的颜色关键字，这些关键字表示特定的颜色。这些关键字是常用颜色的直观名称，提供了一种方便的方法来在 CSS 代码中指定颜色。您可以使用这些关键字设置颜色，而无需使用 RGB 值或十六进制代码。
<named-color> 值可以在任何使用 <color> 的地方使用。
语法
color: red; color: orange; color: tan; color: currentcolor; color: transparent;
可能的值
命名颜色包括标准颜色、透明和currentcolor。
CSS <named-color> - 标准颜色
常见的标准颜色与简单、易于理解和记忆的名称相关联。以下是基本颜色的列表，以及它们的 RGB 十六进制值和示例
| 关键字 | RGB 十六进制值 | 示例 |
|---|---|---|
| 黑色 | #000000 | |
| 银色 | #c0c0c0 | |
| 灰色 | #808080 | |
| 白色 | #ffffff | |
| 栗色 | #800000 | |
| 红色 | #ff0000 | |
| 紫色 | #ff0000 | |
| 紫红色 | #ff00ff | |
| 绿色 | #008000 | |
| 酸橙色 | #00ff00 | |
| 橄榄色 | #808000 | |
| 黄色 | #ffff00 | |
| 海军蓝 | #000080 | |
| 蓝色 | #0000ff | |
| 蓝绿色 | #008080 | |
| 青绿色 | #00ffff |
除了上面列出的 16 种颜色之外，实际上还有 150 多种颜色与特定的关键字相关联，如下所示。
| 关键字 | RGB 十六进制值 | 示例 |
|---|---|---|
| 淡蓝色 | #f0f8ff | |
| 古董白 | #faebd7 | |
| 青绿色 | #00ffff | |
| 碧绿色 | #7fffd4 | |
| 天蓝色 | #f0ffff | |
| 米色 | #f5f5dc | |
| 肉粉色 | #ffe4c4 | |
| 黑色 | #000000 | |
| 杏色 | #ffebcd | |
| 蓝色 | #0000ff | |
| 蓝紫色 | #8a2be2 | |
| 棕色 | #a52a2a | |
| 黄褐色 | #deb887 | |
| 海军蓝 | #5f9ea0 | |
| 黄绿色 | #7fff00 | |
| 巧克力色 | #d2691e | |
| 淡蓝色 | #f0f8ff | |
| 古董白 | #faebd7 | |
| 青绿色 | #00ffff | |
| 碧绿色 | #7fffd4 | |
| 天蓝色 | #f0ffff | |
| 米色 | #f5f5dc | |
| 肉粉色 | #ffe4c4 | |
| 黑色 | #000000 | |
| 杏色 | #ffebcd | |
| 蓝色 | #0000ff | |
| 蓝紫色 | #8a2be2 | |
| 棕色 | #a52a2a | |
| 黄褐色 | #deb887 | |
| 海军蓝 | #5f9ea0 | |
| 黄绿色 | #7fff00 | |
| 巧克力色 | #d2691e | |
| 珊瑚色 | #ff7f50 | |
| 矢车菊蓝 | #6495ed | |
| 玉米黄 | #fff8dc | |
| 猩红色 | #dc143c | |
| 青色 | #00ffff (青绿色的同义词) | |
| 深蓝色 | #00008b | |
| 深青色 | #008b8b | |
| 深金黄 | #b8860b | |
| 深灰色 | #a9a9a9 | |
| 深绿色 | #006400 | |
| 深灰色 | #a9a9a9 | |
| 深卡其色 | #bdb76b | |
| 深洋红 | #8b008b | |
| 深橄榄绿 | #556b2f | |
| 深橙色 | #ff8c00 | |
| 深紫罗兰色 | #9932cc | |
| 深红色 | #8b0000 | |
| 深鲑粉色 | #e9967a | |
| 深海绿 | #8fbc8f | |
| 深石板蓝 | #483d8b | |
| 深石板灰 | #2f4f4f | |
| 深石板灰 | #2f4f4f | |
| 深绿松石色 | #00ced1 | |
| 深紫罗兰色 | #9400d3 | |
| 深粉色 | #ff1493 | |
| 深天蓝 | #00bfff | |
| 暗淡的灰色 | #696969 | |
| 暗淡的灰色 | #696969 | |
| 亮蓝色 | #1e90ff | |
| 砖红色 | #b22222 | |
| 花白色 | #fffaf0 | |
| 森林绿 | #228b22 | |
| 紫红色 | #ff00ff | |
| 银灰色 | #dcdcdc | |
| 金色 | #ffd700 | |
| 金黄 | #daa520 | |
| 灰色 | #808080 | |
| 绿色 | #008000 | |
| 黄绿色 | #adff2f | |
| 灰色 | #808080 (灰色的同义词) | |
| 蜜瓜色 | #f0fff0 | |
| 艳粉色 | #ff69b4 | |
| 印度红 | #cd5c5c | |
| 靛蓝色 | #4b0082 | |
| 象牙色 | #fffff0 | |
| 卡其色 | #f0e68c | |
| 淡紫色 | #e6e6fa | |
| 淡紫红色 | #fff0f5 | |
| 草绿色 | #7cfc00 | |
| 柠檬绸色 | #fffacd | |
| 浅蓝色 | #add8e6 | |
| 浅珊瑚色 | #f08080 | |
| 浅青色 | #e0ffff | |
| 浅金黄色 | #fafad2 | |
| 浅灰色 | #d3d3d3 | |
| 浅绿色 | #90ee90 | |
| 浅灰色 | #d3d3d3 | |
| 浅粉色 | #ffb6c1 | |
| 浅鲑粉色 | #ffa07a | |
| 浅海绿色 | #20b2aa | |
| 浅天蓝色 | #87cefa | |
| 浅石板灰 | #778899 | |
| 浅石板灰 | #778899 | |
| 浅钢蓝色 | #b0c4de | |
| 浅黄色 | #ffffe0 | |
| 酸橙色 | #00ff00 | |
| 鲜绿色 | #32cd32 | |
| 亚麻色 | #faf0e6 | |
| 洋红色 | #ff00ff (紫红色的同义词) | |
| 栗色 | #800000 | |
| 中等碧绿色 | #66cdaa | |
| 中等蓝色 | #0000cd | |
| 中等紫罗兰色 | #ba55d3 | |
| 中等紫色 | #9370db | |
| 中等海绿色 | #8a2be2 | |
| 中等石板蓝 | #7b68ee | |
| 中等春绿色 | #00fa9a | |
| 中等绿松石色 | #48d1cc | |
| 中等紫红色 | #c71585 | |
| 午夜蓝 | #191970 | |
| 薄荷奶油色 | #f5fffa | |
| 雾玫瑰色 | #ffe4e1 | |
| 鹿皮色 | #ffe4b5 | |
| 纳瓦霍白 | #ffdead | |
| 海军蓝 | #000080 | |
| 旧蕾丝色 | #fdf5e6 | |
| 橄榄色 | #808000 | |
| 橄榄褐色 | #6b8e23 | |
| 橙色 | #ffa500 | |
| 橙红色 | #ff4500 | |
| 兰花紫 | #da70d6 | |
| 淡金黄 | #eee8aa | |
| 淡绿色 | #98fb98 | |
| 淡绿松石色 | #afeeee | |
| 淡紫红色 | #db7093 | |
| 木瓜黄 | #ffefd5 | |
| 秘鲁色 | #cd853f | |
| 粉红色 | #ffc0cb | |
| 玉米黄 | #dda0dd | |
| 李子色 | #dc143c | |
| 粉蓝色 | #b0e0e6 | |
| 紫色 | #800080 | |
| 红色 | #ff0000 | |
| 玫瑰棕色 | #bc8f8f | |
| 宝蓝色 | #4169e1 | |
| 马鞍棕色 | #8b4513 | |
| 鲑鱼色 | #fa8072 | |
| 沙棕色 | #f4a460 | |
| 海绿色 | #2e8b57 | |
| 贝壳色 | #fff5ee | |
| 赭色 | #a0522d | |
| 银色 | #c0c0c0 | |
| 天蓝色 | #87ceeb | |
| 石板蓝 | #6a5acd | |
| 石板灰 | #708090 | |
| 石板灰 | #708090 | |
| 雪白色 | #fffafa | |
| 春绿色 | #00ff7f | |
| 钢蓝色 | #4682b4 | |
| 棕褐色 | #d2b48c | |
| 蓝绿色 | #008080 | |
| 蓟色 | #d8bfd8 | |
| 番茄色 | #ff6347 | |
| 透明 | 查看 透明 | |
| 绿松石色 | #40e0d0 | |
| 紫罗兰色 | #ee82ee | |
| 小麦色 | #f5deb3 | |
| 白色 | #ffffff | |
| 烟白色 | #f5f5f5 | |
| 黄绿色 | #9acd32 |
CSS <named-color> - 透明
在 CSS 中，术语透明表示一种完全透明的颜色，并显示背景颜色。
它最初作为 rgba(0,0,0,0) 的快捷方式，但在处理渐变时使用单独的计算以防止出现意外结果。在旧版浏览器中，它可能默认为不透明的黑色。
transparent 在 CSS 颜色级别 3 中被重新定义为一个有效颜色，可以在任何适合使用颜色的场景中使用，包括 Alpha 通道。
一些关键字可以作为彼此的同义词
青绿色 / 青色
紫红色 / 洋红色
深灰色 / 深灰色
深石板灰 / 深石板灰
暗淡的灰色 / 暗淡的灰色
浅灰色 / 浅灰色
浅石板灰 / 浅石板灰
灰色 / 灰色
石板灰 / 石板灰
CSS <named-colors> - 基本示例
以下示例演示了 CSS 的`
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 20;
}
.large-box {
width: 500px;
height: 500px;
border: 3px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 10px;
padding: 15px;
}
.small-box {
width: 100%;
height: 100%;
border: 3px solid black;
}
.crimson-demo {
background-color: crimson;
}
.dodgerblue-demo {
background-color: dodgerblue;
}
.seagreen-demo {
background-color: seagreen;
}
.gold-demo {
background-color: gold;
}
.purple-demo {
background-color: purple;
}
.orange-demo {
background-color: orange;
}
.cyan-demo {
background-color: cyan;
}
.magenta-demo {
background-color: magenta;
}
.brown-demo {
background-color: brown;
}
.pink-demo {
background-color: pink;
}
.khaki-demo {
background-color: khaki;
}
.darksalmon-demo {
background-color: darksalmon;
}
</style>
</head>
<body>
<div class="large-box">
<div class="small-box crimson-demo"></div>
<div class="small-box dodgerblue-demo"></div>
<div class="small-box seagreen-demo"></div>
<div class="small-box gold-demo"></div>
<div class="small-box purple-demo"></div>
<div class="small-box orange-demo"></div>
<div class="small-box cyan-demo"></div>
<div class="small-box magenta-demo"></div>
<div class="small-box brown-demo"></div>
<div class="small-box pink-demo"></div>
<div class="small-box khaki-demo"></div>
<div class="small-box darksalmon-demo"></div>
</div>
</body>
</html>
广告