Frontend Hub/CSS Course
Bài học: Colors & Typography
CSS Colors & Typography

CSS Colors & Typography

Học cách sử dụng màu sắc và typography trong CSS để tạo ra giao diện đẹp mắt và chuyên nghiệp

Color Values - Giá trị màu sắc

CSS hỗ trợ nhiều cách khác nhau để định nghĩa màu sắc. Mỗi định dạng có ưu điểm riêng và phù hợp với các tình huống khác nhau.

🎨 Các định dạng màu:

  • Hex: #ff6b6b, #f00 (3 hoặc 6 ký tự)
  • RGB: rgb(255, 107, 107)
  • RGBA: rgba(255, 107, 107, 0.8)
  • HSL: hsl(0, 100%, 71%)
  • HSLA: hsla(0, 100%, 71%, 0.8)
  • Named: red, blue, crimson

💡 Khi nào dùng gì:

  • Hex: Phổ biến nhất, design tools
  • RGB: Khi cần tính toán màu
  • RGBA: Khi cần độ trong suốt
  • HSL: Dễ điều chỉnh sáng/tối
  • HSLA: HSL + độ trong suốt
  • Named: Prototyping nhanh

Primary Colors

Red
#ff6b6b
Blue
#339af0
Green
#51cf66
Yellow
#ffd43b
Purple
#9775fa

Neutral Colors

Black
#000000
Dark
#495057
Gray
#868e96
Light
#dee2e6
White
#ffffff

Semantic Colors

Success
#51cf66
Warning
#ffd43b
Error
#ff6b6b
Info
#339af0
Muted
#868e96

Các định dạng màu sắc

/* Hex Colors */
.hex-red { color: #ff6b6b; }
.hex-short { color: #f00; }

/* RGB Colors */
.rgb-blue { color: rgb(52, 152, 219); }
.rgba-blue { color: rgba(52, 152, 219, 0.7); }

/* HSL Colors */
.hsl-green { color: hsl(120, 60%, 50%); }
.hsla-green { color: hsla(120, 60%, 50%, 0.8); }

/* Named Colors */
.named-purple { color: purple; }
.named-crimson { color: crimson; }

🎨 Tóm tắt CSS Colors & Typography

Color Values

Hex, RGB, HSL, Named

Backgrounds

Colors, gradients, images

Fonts

Family, size, weight, style

Text Properties

Align, decoration, transform

Text Spacing

Line, letter, word spacing

Colors và Typography là nền tảng để tạo ra giao diện đẹp mắt và dễ sử dụng! 🚀