background

Tìm hiểu cách thêm màu vào các thành phần CSS của bạn bằng cách sử dụng mã màu Hex, giá trị RGB và HSL.

Màu văn bản CSS

Trong hướng dẫn nhanh này, chúng tôi sẽ cho bạn thấy cách sử dụng CSS để tô màu cho bất kỳ phần tử văn bản HTML nào bằng cách sử dụng thẻ HTML, ID hoặc lớp.

Màu văn bản CSS sử dụng thẻ HTML

Để bắt đầu, hãy định dạng một số văn bản cơ bản. Chúng tôi sẽ sử dụng thẻ <h1> trong ví dụ này, nhưng bạn có thể định dạng hầu hết mọi phần tử văn bản bằng cách sử dụng CSS. Dưới đây là tài liệu HTML ví dụ của chúng tôi, một trang rất đơn giản chỉ với một tiêu đề và một đoạn văn ngắn.

html

<head>
</head>
<body>
  <h1>Title</h1>
  <p>Some paragraph text.</p>
</body>

Hãy tô màu cho phần tử <h1> thành màu đỏ. Trong <head> của tài liệu HTML của chúng tôi, chúng tôi sẽ thêm một kiểu CSS cho phần tử <h1>, thay đổi màu từ màu đen mặc định sang màu đỏ.

html

<head>
  <style>
    h1 { color: #FF0000; }
  </style>
</head>
<body>
  <h1>Title</h1>
  <p>Some paragraph text.</p>
</body>

Màu văn bản CSS sử dụng ID

Một cách khác để chúng tôi có thể định dạng phần tử <h1> là bằng cách gán cho nó một ID; trong ví dụ này, chúng tôi sẽ sử dụng ID là heading. Các ID có thể được định dạng bằng CSS theo cách giống như các thẻ HTML, nhưng được thêm tiền tố bằng ký hiệu #.

html

<head>
  <style>
    #heading { color: #FF0000; }
  </style>
</head>
<body>
  <h1 id="heading">Title</h1>
  <p>Some paragraph text.</p>
</body>

Màu văn bản CSS sử dụng lớp

Một phương pháp thứ ba để thêm màu cho các phần tử HTML là sử dụng các lớp - rất giống với các ID, ngoại trừ việc chúng được thêm tiền tố bằng dấu chấm . thay vì #. Ở đây, chúng tôi áp dụng cùng một màu CSS cho phần tử <h1> nhưng sử dụng một lớp có tên là heading.

html

<head>
  <style>
    .heading { color: #FF0000; }
  </style>
</head>
<body>
  <h1 class="heading">Title</h1>
  <p>Some paragraph text.</p>
</body>
Chia sẻ với bạn bè của bạn!
  • Tweet
  • Post
  • LinkedIn
  • Reddit