- Tham gia
- 28/02/2015
- Bài viết
- 16,829
- Được Like
- 12,691
CSS Colors - CSS các màu sắc
Màu sắc được hiển thị đã kết hợp RED, GREEN, và BLUE nhẹ.
Màu sắc trong CSS thường được xác định bởi:
Màu sắc thiết lập bằng cách sử dụng tên màu:
Ví dụ:
Lưu ý: tên màu là trường hợp không phân biệt dạng chữ: "Red" là giống như "red" hay "RED".
HTML và CSS hỗ trợ 140 tên màu chuẩn.
RGB (Red, Green, Blue)
Giá trị màu RGB có thể được xác định bằng công thức này: rgb(red, green, blue)
Mỗi tham số (red, green, và blue) xác định cường độ của màu sắc giữa 0 và 255.
Ví dụ, rgb (255,0,0) được hiển thị như là màu đỏ, bởi vì màu đỏ được thiết lập với giá trị cao nhất của nó (255) và những màu khác được thiết lập là 0. Thử nghiệm bằng cách trộn các giá trị RGB dưới đây:
Sắc thái của màu xám thường được xác định bằng giá trị ngang nhau của tất cả 3 nguồn sáng:
Ví dụ:
Màu sắc hệ thập lục phân
Các giá trị RGB cũng có thể được xác định bằng giá trị màu thập lục phân trong các hình thức: #RRGGBB, trong đó RR (red), GG (green) và BB (blue) là giá trị thập lục phân giữa 00 và FF (giống như thập phân 0-255).
Ví dụ, #FF0000 được hiển thị là màu đỏ, bởi vì màu đỏ được thiết lập với giá trị cao nhất của nó (FF) và những màu khác được thiết lập với giá trị thấp nhất (00). Lưu ý: giá trị HEX là trường hợp không phân biệt dạng chữ: "#ff0000" cũng giống như "FF0000".
Ví dụ:
Sắc thái của màu xám thường được xác định bằng giá trị ngang nhau của tất cả 3 nguồn sáng:
Ví dụ:
Chúc các bạn thành công.
Màu sắc được hiển thị đã kết hợp RED, GREEN, và BLUE nhẹ.
Màu sắc trong CSS thường được xác định bởi:
- một tên màu hợp lệ - như "red"
- một giá trị RGB - như "rgb(255, 0, 0)"
- một giá trị HEX - như "#ff0000"
Màu sắc thiết lập bằng cách sử dụng tên màu:
Mã:
<!DOCTYPE html>
<html>
<body>
<h2>Color Names Examples</h2>
<p>Note: You will learn more about the background-color and the color property later in our tutorial.</p>
<h2 style="background-color:red">
Red background-color
</h2>
<h2 style="background-color:green">
Green background-color
</h2>
<h2 style="background-color:blue;color:white">
Blue background-color and white text color
</h2>
<h2 style="background-color:orange">
Orange background-color
</h2>
<h2 style="background-color:yellow">
Yellow background-color
</h2>
<h2 style="background-color:cyan">
Cyan background-color
</h2>
<h2 style="background-color:black;color:white">
Black background-color and white text color
</h2>
</body>
</html>
HTML và CSS hỗ trợ 140 tên màu chuẩn.
RGB (Red, Green, Blue)
Giá trị màu RGB có thể được xác định bằng công thức này: rgb(red, green, blue)
Mỗi tham số (red, green, và blue) xác định cường độ của màu sắc giữa 0 và 255.
Ví dụ, rgb (255,0,0) được hiển thị như là màu đỏ, bởi vì màu đỏ được thiết lập với giá trị cao nhất của nó (255) và những màu khác được thiết lập là 0. Thử nghiệm bằng cách trộn các giá trị RGB dưới đây:
Ví dụ:
Mã:
<!DOCTYPE html>
<html>
<body>
<h2>RGB Color Examples</h2>
<h2 style="background-color:rgb(0, 0, 0);color:white">
Background-color set by using rgb(0,0,0)
</h2>
<h2 style="background-color:rgb(128, 128, 128);color:white">
Background-color set by using rgb(128,128,128)
</h2>
<h2 style="background-color:rgb(255, 255, 255)">
Background-color set by using rgb(255,255,255)
</h2>
</body>
</html>
Các giá trị RGB cũng có thể được xác định bằng giá trị màu thập lục phân trong các hình thức: #RRGGBB, trong đó RR (red), GG (green) và BB (blue) là giá trị thập lục phân giữa 00 và FF (giống như thập phân 0-255).
Ví dụ, #FF0000 được hiển thị là màu đỏ, bởi vì màu đỏ được thiết lập với giá trị cao nhất của nó (FF) và những màu khác được thiết lập với giá trị thấp nhất (00). Lưu ý: giá trị HEX là trường hợp không phân biệt dạng chữ: "#ff0000" cũng giống như "FF0000".
Ví dụ:
Mã:
<!DOCTYPE html>
<html>
<body>
<h2>HEX Color Examples</h2>
<h2 style="background-color:#FF0000">
Background-color set by using #FF0000
</h2>
<h2 style="background-color:#00FF00">
Background-color set by using #00FF00
</h2>
<h2 style="background-color:#0000FF">
Background-color set by using #0000FF
</h2>
<h2 style="background-color:#FFA500">
Background-color set by using #FFA500
</h2>
<h2 style="background-color:#FFFF00">
Background-color set by using #FFFF00
</h2>
<h2 style="background-color:#00FFFF">
Background-color set by using #00FFFF
</h2>
</body>
</html>
Ví dụ:
Mã:
<!DOCTYPE html>
<html>
<body>
<h2>HEX Color Examples</h2>
<h2 style="background-color:#000000;color:white">
Background-color set by using #000000
</h2>
<h2 style="background-color:#808080;color:white">
Background-color set by using #808080
</h2>
<h2 style="background-color:#FFFFFF">
Background-color set by using #FFFFFF
</h2>
</body>
</html>
Nguồn: w3schools.com
Bài viết liên quan
Bài viết mới
