NTM Solutions

Facebook Youtube Google+

Thứ Tư, 28 tháng 3, 2018

Tự 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: