Màu sắc được áp dụng cho phần tử HTML bằng CSS. Bạn cũng có thể chọn phần nào của phần tử để áp dụng màu cho
Chúng ta vừa thấy nhiều cách khác nhau để áp dụng kiểu dáng cho tài liệu HTML. Một số ví dụ bao gồm thêm màu vào tài liệu. Xem màu sắc là một phần quan trọng của bất kỳ thiết kế trang web nào, chúng ta hãy xem xét kỹ hơn về việc áp dụng màu sắc cho trang web
Màu nền
Màu nền trước được sử dụng để thay đổi màu văn bản của phần tử
Màu nền trước được chỉ định như thế này color:orange;
Ví dụ
Thử nó
Màu nền trước cũng có thể [gián tiếp] ảnh hưởng đến màu của các phần khác của phần tử, bao gồm cả đường viền của nó
Điều này có thể hoặc không thể là hiệu ứng mong muốn. Tuy nhiên, nó luôn có thể bị ghi đè bằng cách chỉ định rõ ràng màu cho thuộc tính bị ảnh hưởng
Thử cái này
Dưới đây là một ví dụ trong đó một đường viền được chỉ định, cùng với màu của nó
Xóa border-color:olivedrab; khỏi các kiểu, sau đó nhấp vào Chạy để xem nó thay đổi màu của đường viền như thế nào
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Xem trước trình chỉnh sửa
Màu nền
Màu nền được chỉ định như thế này. background-color:yellow
Ví dụ
Thử nó
Màu viền
Chúng ta đã thấy một ví dụ về việc chỉ định màu cho đường viền của phần tử [ở trên]. Đó là một cách để chỉ định các thuộc tính đường viền khác nhau
Bạn cũng có thể chỉ định một số thuộc tính đường viền trong một lần [thay vì tách chúng thành các khai báo khác nhau]. Bạn có thể làm điều này bằng thuộc tính phím tắt border, cho phép bạn chỉ định chiều rộng, kiểu và màu của đường viền ở một nơi
Đây là một ví dụ
Thử nó
Kiểu nhúng và kiểu bên ngoài
Các ví dụ trên trang này sử dụng kiểu nội tuyến. Như với tất cả các kiểu, bạn cũng có thể sử dụng phương thức nhúng hoặc phương thức bên ngoài
Tên màu
Trong các ví dụ trên, tôi đã sử dụng tên màu để chỉ định màu
Bạn có thể chỉ định một màu theo tên của nó [ví dụ: blue], giá trị thập lục phân của nó [ví dụ: #0000ff], giá trị RGB [ví dụ: rgb[0,0,255]] hoặc giá trị HSL của nó [ví dụ: hsl[240,100%,100%]]
Người mới bắt đầu có thể thấy dễ dàng hơn khi chỉ định màu theo tên màu của chúng, vì tên màu có thể dễ nhớ hơn nhiều so với các tùy chọn khác. Mặc dù tên màu dễ nhớ hơn nhưng các ký hiệu thập lục phân, RGB và HSL cung cấp cho bạn nhiều tùy chọn màu hơn
Mã màu thập lục phân là sự kết hợp của các chữ cái và số. Các số đi từ 0 đến 9 và các chữ cái đi từ A đến F. Khi sử dụng các giá trị màu thập lục phân trong HTML/CSS của bạn, bạn đặt trước giá trị một dấu thăng [#]. Mặc dù ban đầu các giá trị thập lục phân có thể trông hơi lạ, nhưng bạn sẽ sớm quen với chúng
Nếu bạn sử dụng phần mềm đồ họa, chẳng hạn như Adobe Photoshop hoặc GIMP, bạn có thể quen với các phương pháp RGB hoặc HSL
Biểu đồ bên dưới hiển thị một số ví dụ về tên màu, cùng với các giá trị thập lục phân và RGB tương ứng của chúng
Tên màu Mã Hex
RGBMã thập phân
RGBBlack0000000,0,0SilverC0C0C0192,192,192Gray808080128,128,128WhiteFFFFFF255,255,255Maroon800000128,0,0RedFF000,0255,0Color
RGBDecimal Code
RGBPurple800080128,0,128FuchsiaFF00FF255,0,255Green0080000,128,0Lime00FF000,255,0Olive808000128,128,0YellowFFFF00255,255,0Color NameHex Code
RGBDecimal Code
RGBNavy0000800,0,128Blue0000FF0,0,255Teal0080800,128,128Aqua00FFFF0,255,255
Bảng này là một ví dụ nhỏ về phạm vi màu khổng lồ có sẵn trong HTML. Để xem thêm, hãy xem Mã màu HTML
Bạn có thể tạo màu của riêng mình bằng cách nhập bất kỳ giá trị thập lục phân gồm sáu chữ số nào [đứng trước một hàm băm]
Trong ví dụ sau, chúng tôi chỉ định cùng một màu bằng ba phương thức khác nhau. Màu kết quả là như nhau
Thử nó
Nếu chúng tôi muốn thay đổi sang một màu xanh lam khác, chúng tôi có thể thay đổi giá trị của mình một chút như thế này
Thử nó
minh bạch
Bạn cũng có thể sử dụng alpha để chỉ định mức độ mờ mà màu nên có. Điều này chỉ khả dụng trên các ký hiệu RGB và HSL. Để thực hiện việc này, hãy thêm chữ "a" vào ký hiệu chức năng [i. e. border-color:olivedrab;0 và border-color:olivedrab;1]. Ví dụ: border-color:olivedrab;2 cho kết quả là màu xanh bán trong suốt, cũng như kết quả của border-color:olivedrab;3
Đây là một ví dụ về việc sử dụng RGBA để thay đổi độ mờ
Thử nó
Đây là một ví dụ về việc sử dụng HSLA để thay đổi độ mờ
Thử nó
Chọn màu - Cách dễ dàng
Bằng cách sử dụng ký hiệu thập lục phân, RGB hoặc HSL, bạn có thể lựa chọn hơn 16 triệu màu khác nhau. Ví dụ: bạn có thể bắt đầu bằng border-color:olivedrab;4 và tăng dần một giá trị cho đến hết border-color:olivedrab;5. Mỗi giá trị khác nhau đại diện cho một màu hơi khác nhau
Nhưng đừng lo — bạn sẽ không cần phải nhớ từng giá trị màu thập lục phân. Bộ chọn màu HTML và biểu đồ màu giúp bạn dễ dàng chọn màu cho trang web của mình