Thuộc tính màu sắc trong CSS
Học Css bắt đầu với Hello, World
Tự làm quen với các bài tập và gửi đoạn code đầu tiên của bạn bằng cách hoàn thành bài đầu tiên "Hello, World!".
Luyện tập

    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:

Ví dụ

body {
    color: #ff5722;
}

 

 

    Lưu ý: Thuộc tính color thường kế thừa giá trị màu từ phần tử cha của chúng, ngoại trừ trường hợp phần tử neo . Ví dụ: nếu bạn chỉ định color cho body, nó sẽ tự động được chuyển xuống h1, p, v.v.

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.

Ví dụ

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 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:

Ví dụ

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

 

 

    Lưu ý: Hệ thập lục phân hoặc Hệ thập lục phân đề cập đến sơ đồ đánh số sử dụng 16 ký tự làm cơ sở. Nó sử dụng các số từ 0 đến 9 và các chữ cái A, B, C, D, E và F tương ứng với các số thập phân 10, 11, 12, 13, 14 và 15 tương ứng.

 

 

    Mẹo: Nếu mã thập lục phân của một màu có các cặp giá trị, thì mã đó cũng có thể được viết bằng ký hiệu tốc ký để tránh phải nhập thêm, ví dụ: giá trị màu hex #ffffff cũng có thể được viết là #fff, #000000 thành #000, # 00ff00 là #0f0, #ffcc00 là #fc0, v.v.

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.

Ví dụ

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

 

 

    Lưu ý: Bạn cũng có thể chỉ định các giá trị RGB bên trong rgb()theo tỷ lệ phần trăm, trong đó 100% đại diện cho màu đầy đủ và 0% ( không chỉ đơn giản là 0 ) không đại diện cho màu nào. Ví dụ: bạn có thể chỉ định màu đỏ là rgb(255, 0, 0) hoặc rgb(100%, 0%, 0%).

 

 

    Mẹo: Nếu tất cả R, G và B đều được đặt thành 255, nghĩa là rgb(255, 255, 255) sẽ có màu trắng. Tương tự như vậy, nếu tất cả các kênh được đặt thành 0, nghĩa là rgb(0, 0, 0) sẽ có màu đen. Thử với các giá trị RGB trong minh họa sau đây để hiểu nó thực sự hoạt động như thế nào.

Ả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ụ:

Ví dụ

p.one {
    color: #0000ff;
    border: 2px solid;
}
p.two {
    color: #00ff00;
    outline: 2px solid;
}
Một số bài viết liên quan
Devsne VN 6224 lượt xem

Tìm hiểu về clip-path trong CSS

Devsne VN 4077 lượt xem

CSS gạch chân thẻ a với thuộc tính box-shadow

Devsne VN 878 lượt xem

3D Gallery Đơn Giản Chỉ Với CSS

Devsne VN 8486 lượt xem

[CSS] Lesson 2 - Selectors

Devsne VN 10338 lượt xem

Writing Standard-compliant CSS for Front-end Developers

Devsne VN 5609 lượt xem

Một vài tip debug website của bạn chỉ với CSS

Devsne VN 10037 lượt xem

Các lỗi thường gặp khi sử dụng HTML và CSS.

Devsne VN 10033 lượt xem

CSS - Grid Layout

Devsne VN 9462 lượt xem

Các cách căn giữa trong css

Devsne VN 3197 lượt xem

Hướng dẫn in PDF từ mã HTML, CSS và JAVASCRIPT