Trong CSS, màu sắc được xác định bằng các màu có sẵn (red, white, ...vv), hoặc các mã màu như: RGB, HEX, HSL, RGBA, HSLA.
Những màu có sẵn trong CSS
Những màu này đã được định nghĩa từ trước:
CSS/HTML hỗ trợ 140 màu tiêu chuẩn.
Màu nền trong CSS
Ta có thể chỉnh màu phông nền của các thẻ HTML:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ví dụ
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
Màu chữ trong CSS
Chúng ta có thể chỉnh màu chữ của những đoạn text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ví dụ
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Màu viền trong CSS
Ta có thể chỉnh màu viền của thẻ HTML:
Hello World
Hello World
Hello World
Ví dụ
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
Những giá trị màu sắc
Trong CSS, màu sắc được xác định bằng giá trị RGB , giá trị HEX, giá trị HSL, giá trị RGBA, và giá trị HSLA:
Dưới đây là màu "Tomato" được xác định qua các mã khác nhau:
Cũng là màu "Tomato" nhưng trong suốt 50%:
Ví dụ
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Học nhiều hơn về các mã màu
Bạn sẽ được học chi tiết về RGB, HEX and HSL trong những chương tiếp.