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ư ...
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à:
Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: và
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để 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:
