Khái niệm cơ bản về màu CSS

Hướng dẫn CSS

Cơ bản về sắc trong CSS

Sử dụng màu trong CSS (viết tắt của cascading stylesheets) thực sự khá dễ dàng. Trong hướng dẫn này, chúng tôi sẽ cho bạn thấy cách sử dụng tất cả các định dạng màu khác nhau trong CSS, bao gồm mã màu Hex, tên màu HTML và giá trị RGB cũng như HSL. Nếu bạn mới bắt đầu với CSS, chỉ cần tìm kiếm 'intro to CSS', có rất nhiều hướng dẫn tuyệt vời ở đó.

Cách sử dụng mã màu Hex trong CSS

Mã màu Hex là phương pháp phổ biến nhất để thêm màu cho một phần tử HTML bằng cách sử dụng CSS. Trong tệp stylesheet của bạn, bạn có thể sử dụng thuộc tính màu CSS để thay đổi màu mặc định của văn bản trên trang web của bạn.

css

/* In your .css stylesheet */
body { color: #FF0000; }

Một tùy chọn thứ hai là bao gồm các kiểu CSS ngay trong <head> của tài liệu HTML của bạn bằng cách sử dụng thẻ <style>, như dưới đây:

html

<!-- In your HTML document -->
<head>
  <style>
    body { color: #FF0000; }
  </style>
</head>

Dễ dàng, phải không? Bạn có thể sử dụng thuộc tính màu CSS với mã Hex trên hầu hết mọi phần tử HTML, thẻ <body> chỉ là một ví dụ. Hãy thoải mái sáng tạo!

Cách sử dụng tên màu HTML trong CSS

Tên màu HTML là một cách khác để định dạng nội dung của bạn trong CSS và thường dễ hiểu hơn. Bạn có thể sử dụng một tên màu theo cách giống như mã màu Hex, đặt nó làm giá trị cho thuộc tính màu CSS trong tệp stylesheet của bạn.

css

/* In your .css stylesheet */
body { color: red; }

Cách sử dụng giá trị RGB trong CSS

RGB, viết tắt của Red, Green và Blue, là một hệ thống màu thường thấy trong nhiều ứng dụng thiết kế và công nghệ, và gần đây đã trở thành lựa chọn hàng đầu cho các nhà thiết kế web và lập trình viên. Trong CSS, các màu RGB có thể được sử dụng bằng cách bọc các giá trị trong dấu ngoặc đơn và thêm tiền tố với chữ thường rgb.

css

/* In your .css stylesheet */
body { color: rgb(255, 0, 0); }

Một trong những lợi ích của việc sử dụng RGB trong CSS là khả năng kiểm soát độ trong suốt bên cạnh màu sắc. Thêm một 'a' vào tiền tố rgb() cho phép gán một giá trị thứ tư xác định độ trong suốt của màu sắc trên thang điểm từ 0 đến 1. Trong ví dụ này, văn bản trên trang HTML sẽ hiển thị với độ trong suốt 50% vì 0.5 nằm giữa 0 và 1.

css

/* In your .css stylesheet */
body { color: rgba(255, 0, 0, 0.5); }

Cách sử dụng giá trị HSL trong CSS

Bạn có thể đã nghe về HSL, viết tắt của Hue, Saturation và Lightness, một hệ thống màu khác được sử dụng trong nhiều ứng dụng. Hue được đo bằng độ từ 0 - 360, trong khi Saturation và Lightness sử dụng thang điểm từ 0% - 100%. Trong CSS, HSL có thể dễ dàng được triển khai theo cú pháp tương tự như RGB nhưng thay vào đó được thêm tiền tố hsl.

css

/* In your .css stylesheet */
body { color: hsl(0, 100%, 50%); }

Tương tự như vậy, HSL cũng hỗ trợ một kênh alpha để kiểm soát độ trong suốt của màu sắc. Cách sử dụng giống như RGB, với một giá trị thứ tư giữa 0 và 1 khi sử dụng tiền tố hsla.

css

/* In your .css stylesheet */
body { color: hsla(0, 100%, 50%, 0.5); }

*Lưu ý rằng rgba(), hsl() và hsla() là những bổ sung tương đối mới cho CSS và không được hỗ trợ bởi một số trình duyệt cũ hơn. Tùy thuộc vào tình huống của bạn, bạn có thể muốn chọn các phương pháp khác nhau để điều chỉnh độ trong suốt của các màu sắc.

Chia sẻ với bạn bè của bạn!

Tweet
Post
LinkedIn
Reddit

Tweet Post LinkedIn Reddit

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.