Trong HTML, màu sắc được xác định bằng thuộc tính CSS. Thuộc tính bạn sử dụng cho một tình huống cụ thể sẽ phụ thuộc vào việc bạn đang áp dụng màu gì cho. Ví dụ: hai thuộc tính CSS phổ biến để xác định màu là thuộc tính color [để áp dụng màu nền trước cho văn bản] và thuộc tính background-color [để áp dụng màu cho nền của phần tử]
Khi nói đến việc chỉ định một màu thực tế, đó là lúc mọi thứ trở nên thú vị một chút. Có nhiều cách chỉ định màu trong HTML. Hầu hết các nhà phát triển web chọn phương pháp ưa thích của họ và gắn bó với phương pháp đó. Như đã nói, bạn nên biết về các phương pháp khác nhau để chỉ định một giá trị màu, bởi vì, bạn có thể thấy rằng bạn thích sử dụng kết hợp các phương pháp hơn.
Nhưng chúng ta đừng vượt lên chính mình. Trước tiên hãy xem xét một vài ví dụ đơn giản
Ví dụ màu HTML
Dưới đây là một số ví dụ về việc áp dụng màu sắc cho các phần tử HTML
Văn bản màu
Để chỉ định màu văn bản, bạn cần sử dụng color:{color code}, trong đó {mã màu} là tên màu, mã hex hoặc giá trị RGB thập phân
Ví dụ màu HTML
Màu nền văn bản
Để chỉ định màu nền, hãy sử dụng thuộc tính background-color
Ví dụ màu HTML
Màu viền văn bản
Để chỉ định màu đường viền, hãy sử dụng thuộc tính border, cùng với chiều rộng và kiểu đường viền
Ví dụ màu HTML
màu div
Bạn có thể áp dụng màu cho bất kỳ phần tử nào và nó sẽ xếp tầng xuống tất cả các phần tử trong phần tử đó. Ví dụ: ở đây chúng tôi áp dụng màu sắc cho phần tử Phần tử 'div' xung quanh có các thuộc tính sau được áp dụng cho nó. màu nền. màu vàng; . màu xanh da trời; . 1px màu đen đặc; Đây là một ví dụ khác. Lần này, tôi đã thêm một số văn bản khác, với các kiểu cụ thể thay thế những kiểu được xác định ở cấp độ Phần tử 'div' xung quanh có các thuộc tính sau được áp dụng cho nó. màu nền. màu vàng; . màu xanh da trời; . 1px màu đen đặc; Văn bản này đã được áp dụng các kiểu khác nhau. Nhưng bạn cũng có thể thay thế các kiểu này bằng cách sử dụng phần tử 'span', như this và this. Như bạn có thể thấy trong mã HTML & CSS ở trên, bạn chỉ định một màu bằng cách sử dụng thuộc tính màu CSS có liên quan [ví dụ: Có thể bạn chỉ cần sử dụng tên màu khi chỉ định màu HTML của mình. Rốt cuộc, tên màu rất dễ nhớ. Tuy nhiên, tôi khuyên bạn nên làm quen với các giá trị màu RGB và hệ thập lục phân. Điều này là do, màu thập lục phân và màu RGB cung cấp cho bạn dải màu rộng hơn nhiều so với tên màu. Nếu bạn gặp khó khăn trong khi cố gắng đưa ra bảng màu cho trang web của mình, tên màu có thể khá hạn chế. Hệ thập lục phân và RGB sẽ mở ngay các tùy chọn của bạn. Đặc biệt nếu bạn sử dụng công cụ chọn màu như bên dưới Nhấp vào bất kỳ đâu trong bộ chọn màu ở bên phải. Điều này sẽ chọn một màu. Sau khi bạn chọn một màu, bạn sẽ thấy các giá trị RGB, HSL và hệ thập lục phân được hiển thị cho màu đã chọn của bạn Đây là giải thích về hệ thập lục phân và RGB RGB là viết tắt của Red Green Blue. Do đó, khi sử dụng ký hiệu RGB, bạn đang chỉ định bao nhiêu màu đỏ, bao nhiêu màu xanh lá cây và bao nhiêu màu xanh lam sẽ được bao gồm trong màu cuối cùng. Điều này là do tất cả các màu là sự pha trộn của ba màu này Tương tự với ký hiệu thập lục phân, ngoại trừ, ký hiệu sử dụng cơ số 16 để chỉ định các giá trị màu đỏ, lục và lam Ví dụ: nếu bạn sử dụng ký hiệu RGB, thì Tất nhiên, bạn có thể sử dụng ít màu đỏ hơn và sử dụng nhiều màu khác hơn, ví dụ: Ở dạng thập lục phân, Div và văn bản
Chỉ định một giá trị màu
background-color], theo sau là dấu hai chấm [background-color0], theo sau là giá trị màu [ví dụ: background-color1]. Ví dụ, để làm cho một cái gì đó có màu vàng, bạn gõ background-color2. Giá trị màu có thể là một trong những điều sau đâybackground-color3background-color4 là màu đỏbackground-color5 giống như background-color4background-color7 là màu đỏbackground-color8 là màu đỏGiới thiệu về hệ thập lục phân và màu RGB
R H
G S
B V
# background-color9 chỉ định "tất cả màu đỏ và không có màu nào khác". Điều này là do color:{color code}0 cao nhất có thể trong ký hiệu RGBcolor:{color code}1 dẫn đến DarkSlateBlue . color:{color code}2 là cao nhất có thể và color:{color code}3 là thấp nhất [i. e. không ai]. Do đó, màu "DarkSlateBlue" sẽ được thể hiện là color:{color code}4. Tất nhiên, bạn có thể biểu thị màu này bằng tên màu của nó [tôi. e. color:{color code}5]Chủ Đề