Màu HEX

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 26 trên 76.

Màu hex là cách xác định màu bằng các giá trị thập lục phân. Mã màu thập lục phân là một mã gồm sáu chữ số đứng trước ký hiệu thăng (#), biểu thị lượng ánh sáng đỏ, xanh lá và xanh dương tạo nên một màu.

Mỗi cặp chữ số trong code biểu thị cường độ của một trong các màu cơ bản này, trong khoảng từ 00 (không có cường độ) đến FF (cường độ tối đa). Màu HEX có nhiều lựa chọn màu sắc và được sử dụng rộng rãi trong thiết kế web.

Đây là cú pháp cơ bản để dùng màu thập lục phân trong CSS:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Ví dụ:

p {
    color: #FF0000; /* Đỏ */
    background-color: #00FF00; /* Xanh lá */
}

Bạn cũng có thể dùng ký hiệu viết tắt (shorthand notation) cho màu hex khi hai chữ số trong mỗi cặp giống nhau. Ví dụ:

p {
    color: #F00; /* Đỏ (tương đương #FF0000) */
    background-color: #0F0; /* Xanh lá (tương đương #00FF00) */
}

Thử thách

Dễ

Bạn có một tài liệu HTML gồm hai tiêu đề (<h1> và <h2>) cùng một đoạn văn (<p>). Nhiệm vụ của bạn là dùng mã màu hệ thập lục phân (hexadecimal) cho màu nền. Làm theo các bước sau:

Viết quy tắc CSS cho phần tử <h1>. Đặt màu nền thành tím điện bằng mã màu hex #BF00FF.
Viết quy tắc CSS cho phần tử <h2>. Đặt màu nền thành xanh lá neon bằng #39FF14.
Viết quy tắc CSS cho tất cả phần tử <p>. Đặt màu nền thành xám nhạt bằng #D3D3D3.

Tự làm thử

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>