Khóa học CSS - Bài 02 - Màu sắc

Quay về MỤC LỤC HỌC CSS

Màu sắc trong CSS được mô tả bằng tên, các hệ màu RGB, HEX, HSL, RGBA, HSLA.

1. Tên màu

Trong HTML cũng như CSS ,màu sắc có thể mô tả qua tên như:

Tomato, orange,DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray,…

Không phân biệt chữ HOA - thường.

Ví dụ:

<h1 style="background-color:DodgerBlue;">Xin chào</h1>

2. Màu nền

CSS có thể thiết lập màu nền cho phần tử HTML

<p style="background-color:Tomato;">Lớp học vi tính .COM</p>

3. Màu chữ

CSS có thể thiết lập màu nền cho chữ.

<h1 style="color:Tomato;">Xin chào</h1>
<p style="color:DodgerBlue;">Lớp học vi tính .COM</p>
<p style="color:MediumSeaGreen;">Lớp học anh văn .COM</p>

4. Màu viền

CSS có thể thiết lập màu viền cho phần tử HTML (viền của background)

<h1 style="border:2px solid Tomato;">Xin chào</h1>
<h1 style="border:2px solid DodgerBlue;">Xin chào</h1>
<h1 style="border:2px solid Violet;">Xin chào</h1>

5. Giá trị RGB

Mã màu RGB(Red, Green, Blue)

Với sự pha trộn các giá trị của 03 tham số từ 0-255

Màu trắng là (0,0,0)

Màu đen là (255,255,255)

01 số ví dụ:

rgb(255,0,0) -> màu đỏ

rgb(0,0,255) -> màu xanh dương

rgb(255,165,0) -> màu cam

đưa vào giá trị CSS -> <p style="color:rgb(255,0,0);">Lớp học vi tính .COM</p>

6. Giá trị HEX

Mã màu là dãy 06 chữ số thuộc hệ 16 với cú pháp : #ma_mau

Ví dụ:

#000000 -> màu đen

#ffffff -> màu trắng

#ff0000 -> màu đỏ

#0000ff -> màu xanh dương

Đưa vào giá trị CSS -> <p style="background-color:#ff0000;">Lớp học vi tính .COM</p>

7. Giá trị HSL

Mã màu HSL (Hue, Saturation, Lightness)

Hue là độ màu (từ 0-360) với 0 là màu đỏ, 120 là màu xanh lá và 240 là màu xanh dương.

Saturation là phần trăm cấp độ xám (0-100%)

Lightness là phần trăm cấp độ sáng (0-100%) 0% là đen và 100% là trắng

Ví dụ:

hsl(0,100%,50%) -> màu đỏ

hsl(240,100%,50%) -> màu xanh dương

hsl(120,100%,50%) -> màu xanh lá

đưa vào giá trị CSS -> <p style="background-color:hsl(120,100%,50%);">Lớp học vi tính .COM</p>

8. Giá trị RGBA

Mã màu RGBA(Red, Green, Blue, Alpha)

Alpha là độ trong suốt của phần tử mô tả(từ 0.0 -> 1.0)

0.0 -> trong suốt hoàn toàn

1.0 -> hoàn toàn che khuất

Ví dụ:

<p style="background-color:rgba(255,0,0,0.2);">Lớp học vi tính .COM</p>

9. Giá trị HSLA

Mã màu hsla(Hue, Saturation, Lightness, Alpha)

Ví dụ:

<p style="background-color:hsla(0,100%,50%,0.2);">Lớp học vi tính .COM</p>

Nếu còn chưa rõ các bạn xem thêm video clip sau:

Quay về MỤC LỤC HỌC CSS

• Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
• Trang fan page: https://www.facebook.com/lophocvitinhcom
• Trang web: http://lophocvitinh.com

Tác giả: #drM

Nguồn: Sưu Tầm