Thuộc tính color, màu trong HTML

Màu trong HTML được chỉ định bằng cách sử dụng tên màu hoặc các giá trị RGB, HEX, HSL, RGBA, HSLA, tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết thuộc tính color, màu trong HTML.

Trong bài viết trước Taimienphi.vn đã giới thiệu cho bạn về thẻ comment trong HTML. Bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính color trong HTML.

thuoc tinh color trong html hoc html

Thuộc tính color trong HTML

 

Mục Lục bài viết:
1. Thuộc tính color trong HTML
1.1. Tên màu (color name)
1.2. Màu nền trong HTML
1.3. Thiết lập màu cho văn bản trong HTML
1.4. Thiết lập màu cho đường viền trong HTML
1.5. Giá trị màu trong HTML
1.6. Giá trị RGB trong HTML
1.7. Giá trị HEX trong HTML
1.8. Giá trị HSL trong HTML
1.9. Giá trị RGBA trong HTML
1.10. Giá trị HSLA trong HTML

 

1. Thuộc tính color trong HTML

 

1.1 Tên màu (color name)

Trong HTML, chúng ta có thể chỉ định màu bằng cách sử dụng tên màu.

Ví dụ: Dưới đây là ví dụ về cách chỉ định màu trong HTML:

thuoc tinh color trong html

Kết quả trả về có dạng như dưới đây:

thuoc tinh color trong html 2

HTML hỗ trợ 140 mã màu và tên màu khác nhau.

 

1.2 Màu nền trong HTML

Chúng ta có thể thiết lập màu nền background cho các phần tử HTML.

Ví dụ: ví dụ dưới đây minh họa các thiết lập màu nền background cho các phần tử HTML:

thuoc tinh color trong html 3

Kết quả trả về sau khi áp dụng màu nền trong HTML có dạng như dưới đây:

thuoc tinh color trong html 4

 

1.3 Thiết lập màu cho văn bản trong HTML

Ngoài thiết lập màu nền background, chúng ta cũng có thể thiết lập màu cho văn bản trong HTML.

Ví dụ: ví dụ dưới đây minh họa các thiết lập màu cho văn bản trong HTML:

thuoc tinh color trong html 5

Kết quả trả về sau khi áp dụng màu nền cho văn bản trong HTML có dạng như dưới đây:

thuoc tinh color trong html 6

 

1.4 Thiết lập màu cho đường viền trong HTML

Tương tự chúng ta có thể thiết lập màu cho đường viền trong HTML.

Ví dụ: ví dụ dưới đây minh họa các thiết lập màu đường viên trong HTML:

thuoc tinh color trong html 7

Kết quả trả về sau khi áp dụng màu cho đường viền có dạng như dưới đây:

thuoc tinh color trong html 8

 

1.5 Giá trị màu trong HTML

Trong HTML, chúng ta có thể chỉ định màu bằng cách sử dụng các giá trị như RGB, HEX, HSL, RGBA và HSLA.

Ví dụ: ví dụ dưới đây minh họa sử dụng các giá trị màu trong HTML:

thuoc tinh color trong html 9

Kết quả trả về sau khi áp dụng giá trị màu có dạng như dưới đây:

thuoc tinh color trong html 10

 

1.6 Giá trị RGB trong HTML

Trong HTML, chúng ta có thể chỉ định một màu dưới dạng giá trị RBG, bằng cách sử dụng công thức dưới đây:

rgb(red, green, blue)

Mỗi một tham số (red, green và blue) xác định cường độ màu trong khoảng từ 0 đến 255.

Ví dụ 1: giá trị rgb (255, 0, 0) sẽ hiển thị màu đỏ, vì màu đỏ được đặt là giá trị cao nhất (255) và các giá trị khác được đặt thành 0.

Để hiển thị màu đen, chúng ta chỉ cần thiết lập tất cả các tham số màu là 0, có dạng như sau rgb(0, 0, 0).

Để hiển thị màu đen, chúng ta chỉ cần thiết lập tất cả các tham số màu là 255, có dạng như sau rgb(255, 255, 255).

Ví dụ 2: trong ví dụ dưới đây chúng ta sẽ trộn các giá trị RBG:

thuoc tinh color trong html 11

Kết quả trả về sau khi áp dụng trộn các giá trị RBG có dạng như dưới đây:

thuoc tinh color trong html 12

Để hiển thị các màu sắc tối màu, chúng ta sử dụng các giá trị bằng nhau.

Ví dụ 3: trong ví dụ dưới đây minh họa các màu sắc tối màu:

thuoc tinh color trong html 13

Kết quả trả về có dạng như dưới đây:

thuoc tinh color trong html 14

 

1.7 Giá trị HEX trong HTML

Để chỉ định màu trong HTML bằng cách sử dụng giá trị Hex, chúng ta sử dụng công thức dưới đây:

#rrggbb

Trong công thức trên rr là red (màu đỏ), gg là green (màu xanh lá cây) và bb là blue (màu xanh da trời) là các giá trị thập lục phân trong khoảng 00ff.

Ví dụ 1:#ff0000 hiển thị là màu đỏ vì màu đỏ được thiết lập giá trị cao nhất (ff) và các giá trị khác được thiết lập giá trị thấp nhất (00).

thuoc tinh color trong html 15

Kết quả trả về có dạng như dưới đây:

thuoc tinh color trong html 16

Để hiển thị các màu sắc tối màu, chúng ta sử dụng các giá trị bằng nhau.

Ví dụ 2: ví dụ dưới đây hiển thị các màu sắc tối màu:

thuoc tinh color trong html 17

Kết quả trả về có dạng như dưới đây:

thuoc tinh color trong html 18

 

1.8 Giá trị HSL trong HTML

Trong HTML, màu có thể được chỉ định bằng cách sử dụng hue, saturation và lightness (HSL) dưới dạng:

hsl(hue, saturation, lightness)

Trong công thức trên:

- Hue có giá trị từ 0 - 360. 0 là màu đỏ, 120 là màu xanh lá cây và 240 là màu xanh da trời.

- Saturation có giá trị từ 0 - 100%, trong đó 0% là màu xám và 100% là full.

- Lightness có giá trị từ 0 - 100%, trong đó 0% là màu đen, 50% là màu sáng hoặc tối và 100% là màu trắng.

Ví dụ: ví dụ dưới đây minh họa cách sử dụng giá trị HSL trong HTML:

thuoc tinh color trong html 19

Kết quả trả về có dạng như dưới đây:

thuoc tinh color trong html 20

 

1.9 Giá trị RGBA trong HTML

Giá trị màu RGBA là phần mở rộng của giá trị RGB với kênh alpha - chỉ định độ mờ của màu.

Giá trị màu RGBA được chỉ định bằng công thức:

rgba(red, green, blue, alpha)

Trong công thức trên, tham số alpha là một số trong khoảng 0.0 (hoàn toàn trong suốt) và 1.0 (không trong suốt).

Ví dụ: dưới đây là ví dụ về giá trị RGBA trong HTML:

thuoc tinh color trong html 21

Kết quả trả về có dạng như dưới đây:

thuoc tinh color trong html 22

 

1.10 Giá trị HSLA trong HTML

Giá trị màu HSLA là phần mở rộng của giá trị màu HSL với kênh alpha - chỉ định độ mờ của màu.

Giá trị màu HSLA được chỉ định bằng công thức:

hsla(hue, saturation, lightness, alpha)

Trong công thức trên, tham số alpha là một số trong khoảng 0.0 (hoàn toàn trong suốt) và 1.0 (không trong suốt).

Ví dụ: dưới đây là ví dụ về giá trị HSLA trong HTML:

thuoc tinh color trong html 23

Kết quả trả về có dạng như dưới đây:

thuoc tinh color trong html 24

https://thuthuat.taimienphi.vn/thuoc-tinh-color-trong-html-50612n.aspx
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về thuộc tính color trong HTML. Trong bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính style trong HTML.

Tác giả: Thuỳ Chi     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

HTML và XHTML, khái niệm về cách sử dụng
Đường dẫn file trong HTML, link Ảnh tuyệt đối và tương đối
Thẻ Heading trong HTML, thẻ H1, H2, H3, H4, H5, H6
Thuộc tính Style trong HTML
Thẻ định dạng văn bản trong HTML
Từ khoá liên quan:

Thuộc tính color trong HTML

, HTML, thuộc tính Style trong HTML,

SOFT LIÊN QUAN
  • Copy HTML

    Sao chép mã nguồn HTML

    Rất ít người trong chúng ta còn xa lạ HTML, đây là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên hoặc diễn tả một trang web. Ví dụ như chỉ cần một đoạn thông tin trong bất kỳ trang web nào đó là bạn đã có thể tra ra ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá