Màu trong CSS3 | Color trong CSS3
CSS3 hỗ trợ thêm các thuộc tính color như sau:
- RGBA color
- HSL color
- HSLA color
- Opacity
RGBA là viết tắt của Red Green Blue Alpha. Đây là một sự kế thừa từ CSS2, Alpha xác định độ trong suốt của một màu và số tham số là một số từ 0.0 đến 1.0. Một cú pháp mẫu của RGBA như sau:−
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}
HSL là viết tắt cho Huge, Saturation, Lightness. Ở đây, Huge là độ màu, Saturation, Lightness là các giá trị % từ 0 tới 100%. Một cú pháp mẫu của HSL như sau:
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}
HSLAlà viết tắt cho Huge, Saturation, Lightness và Alpha. Giá trị Alpha giống như trong RGBA. Một cú pháp mẫu của HSLA như sau:
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}
opacity là một thuốc màu loãng cần được thêm vào để tăng độ trong suốt. Cú pháp mẫu của Opacity là:
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}
Ví dụ dưới đây minh họa cách sử dụng của thuộc tính rgb để xác định màu trong CSS:
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>Gia tri mau RGBA tren tuong ung:</p>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
</body>
</html>
Kết quả là:
Ví dụ dưới đây minh họa cách sử dụng của thuộc tính HSL để xác định màu trong CSS:
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>Gia tri mau HSL tren tuong ung:</p>
<p id="g1">Green</p>
<p id="g2">Normal Green</p>
<p id="g3">Dark Green</p>
</body>
</html>
Kết quả là:
Ví dụ dưới đây minh họa cách sử dụng của thuộc tính HSLA để xác định màu trong CSS:
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>Gia tri mau HSLA tren tuong ung:</p>
<p id="d1">Less opacity green</p>
<p id="d2">Green</p>
<p id="d3">Green</p>
</body>
</html>
Kết quả là:
Ví dụ dưới đây minh họa cách sử dụng của thuộc tính opacity để xác định màu trong CSS:
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id="m1">Red</p>
<p id="m2">Green</p>
<p id="m3">Blue</p>
</body>
</html>
Kết quả là:
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học CSS phổ biến khác tại vietjack.com:
