Trong hướng dẫn này, bạn sẽ tìm hiểu các phương pháp khác nhau để xác định giá trị màu trong CSS.

Đặt thuộc tính màu

    Thuộc tính color xác định màu văn bản của một phần tử.

    Chẳng hạn, thuộc tính color được chỉ định trong body xác định màu văn bản mặc định cho toàn bộ trang. Hãy thử ví dụ sau để xem nó hoạt động như thế nào:

body {
    color: #ff5722;
}

Xác định giá trị màu

    Màu sắc trong CSS thường được chỉ định theo các định dạng sau:

• Một từ khóa màu - như "red", "green", "blue", v.v.
• Một giá trị HEX - như "#ff0000", "#00ff00", v.v.
• Một giá trị RGB - như "rgb(255, 0, 0)"

    CSS3 đã giới thiệu một số định dạng màu khác như HSL, HSLA và RGBA cũng hỗ trợ độ trong suốt của alpha. Chúng ta sẽ tìm hiểu về chúng chi tiết hơn trong chương màu CSS3 .

    Hiện tại, hãy tuân thủ các phương pháp cơ bản để xác định các giá trị màu:

Từ khóa color

    CSS xác định một vài từ khóa màu cho phép bạn chỉ định các giá trị màu một cách dễ dàng.

    Những từ khóa màu cơ bản này là: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white. Tên màu không phân biệt chữ hoa chữ thường.

h1 {
    color: red;
}
p {
    color: purple;
}

    Tuy nhiên, các trình duyệt web hiện đại thực tế hỗ trợ nhiều tên màu hơn so với tên được xác định trong tiêu chuẩn CSS, nhưng để an toàn hơn, bạn nên sử dụng các giá trị màu hex thay thế.

    Xem tài liệu tham khảo về tên màu CSS để biết danh sách đầy đủ các tên màu có thể có.

Giá trị màu HEX

    Hex (viết tắt của Hexadecimal) cho đến nay là phương pháp xác định màu được sử dụng phổ biến nhất trên web.

    Hex đại diện cho các màu bằng cách sử dụng mã gồm sáu chữ số, đứng trước một ký tự băm, như #rrggbb, trong đó rr, gg và bb tương ứng đại diện cho thành phần màu đỏ, lục và lam của màu.

    Giá trị của mỗi thành phần có thể thay đổi từ 00 (không màu) và FF (đầy đủ màu sắc) trong ký hiệu thập lục phân hoặc 0 và 255 trong ký hiệu tương đương thập phân. Do đó #ffffff đại diện cho màu trắng và #000000 đại diện cho màu đen. Hãy cùng xem ví dụ sau:

h1 {
    color: #ffa500;
}
p {
    color: #00ff00;
}

Giá trị màu RGB

    Màu sắc có thể được xác định trong mô hình RGB (Đỏ, Lục và Lam) bằng cách sử dụng rgb().

    Hàm rgb() chấp nhận ba giá trị được phân tách bằng dấu phẩy, xác định lượng thành phần màu đỏ, xanh lục và xanh lam của màu. Các giá trị này thường được chỉ định là số nguyên trong khoảng từ 0 đến 255, trong đó 0 đại diện cho màu không và 255 đại diện cho màu đầy đủ hoặc màu tối đa .

    Ví dụ sau chỉ định màu giống như trong ví dụ trước nhưng ở ký hiệu RGB.

h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0, 255, 0);
}

Ảnh hưởng của thuộc tính màu đối với đường viền và đường viền

    Thuộc tính color không chỉ dành cho nội dung văn bản mà còn dành cho bất kỳ thứ gì ở phía trước có giá trị màu. Chẳng hạn, nếu border-color hoặc outline-color giá trị chưa được xác định rõ ràng cho phần tử, thì giá trị màu sẽ được sử dụng thay thế. Hãy xem một ví dụ:

p.one {
    color: #0000ff;
    border: 2px solid;
}
p.two {
    color: #00ff00;
    outline: 2px solid;
}