思维导图
Mind mapping
一、颜色表示方式
Color Representation Methods
十六进制颜色(Hexadecimal Colors)
组成字符：0-9 和 A-F（A=10，F=15）
Characters used: 0-9 and A-F (A=10, F=15)
格式：#RRGGBB（如 #FF0000 表示红色）
Format: #RRGGBB (e.g., #FF0000 = red)
缩写规则：当每对字符相同时可缩写为 3 位（如 #F00 → #FF0000）
Shorthand notation: When pairs are identical, abbreviate to 3 digits (e.g., #F00 → #FF0000)
亮度规则：0（无颜色）→ F（最高亮度）
Brightness rules: 0 (no color) → F (maximum brightness)
RGB 颜色(RGB Colors)
格式：rgb(红, 绿, 蓝)
Format: rgb(red, green, blue)
数值范围：0-255（对应十六进制的 00-FF）
Value range: 0-255 (corresponding to 00-FF in hex)
示例：rgb(255, 0, 0) 表示红色
Example: rgb(255, 0, 0) = red
二、CSS 变量
CSS Variables
1、定义变量(Defining Variables)
:root {
--main-color: #FF0000; /* 全局变量 */
}
.element {
--secondary-color: #00F; /* 局部变量 */
}
2、使用变量（Using Variables)
.box {
color: var(--main-color);
background: var(--secondary-color, blue); /* 备用值为 blue */
}
3、变量特性(Variable Characteristics）
继承性：子元素继承父元素的变量（除非被覆盖）
Inheritance: Child elements inherit variables from parent elements (unless overridden).
作用域：:root 中定义的变量全局有效，局部变量只在选择器内有效
Scope: Variables defined in :root are global; local variables are selector-specific.
动态更新：可通过 JavaScript 实时修改变量值
Dynamic Updates: Values can be modified in real-time via JavaScript.
三、实际应用技巧
Practical Techniques
1、主题切换示例（Theme Switching Example)
:root {
--primary-color: coral;
--text-color: black;
}
.dark-theme {
--primary-color: darkred;
--text-color: white;
}
2、JavaScript 动态修改（Dynamic Modification with JavaScript）
// 修改全局变量
document.documentElement.style.setProperty('--primary-color', 'green');
四、注意事项
Key Considerations
变量名区分大小写（--Color ≠ --color）
Case Sensitivity: Variable names are case-sensitive (--Color ≠ --color).
推荐命名规范（如 --primary-color）
Naming Convention: Use semantic names (e.g., --primary-color).
合理使用备用值增强兼容性
Fallback Values: Enhance compatibility with fallbacks (e.g., var(--color, red)).
優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務" 的經(jīng)營理念，誠信務實的服務了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設、網(wǎng)站與各類業(yè)務系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設（品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發(fā)、移動端應用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應用服務。
公安局備案號：
專屬顧問
