- 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>
廣告