Màu css màu vàng. Đặt màu văn bản trong CSS. Các cách thể hiện màu sắc
HEX/HTML
Màu HEX không là gì ngoài biểu diễn thập lục phân của RGB.
Màu sắc được biểu diễn dưới dạng ba nhóm chữ số thập lục phân, trong đó mỗi nhóm chịu trách nhiệm về màu riêng của mình: #112233, trong đó 11 là màu đỏ, 22 là màu xanh lá cây, 33 là màu xanh lam. Tất cả các giá trị phải nằm trong khoảng từ 00 đến FF.
Nhiều ứng dụng cho phép ký hiệu màu thập lục phân được rút gọn. Nếu mỗi nhóm trong số ba nhóm chứa các ký tự giống nhau, ví dụ #112233, thì chúng có thể được viết là #123.
- h1 (màu: #ff0000; ) /* đỏ */
- h2 ( màu: #00ff00; ) /* xanh */
- h3 ( màu: #0000ff; ) /* xanh */
- h4 ( color: #00f; ) /* cùng màu xanh, viết tắt */
RGB
Không gian màu RGB (Đỏ, Xanh lục, Xanh lam) bao gồm tất cả các màu có thể được tạo ra bằng cách trộn màu đỏ, xanh lục và xanh lam. Mô hình này phổ biến trong nhiếp ảnh, truyền hình và đồ họa máy tính.
Giá trị RGB được chỉ định dưới dạng số nguyên từ 0 đến 255. Ví dụ: rgb(0,0,255) được hiển thị dưới dạng màu xanh lam vì tham số màu xanh lam được đặt thành giá trị cao nhất (255) và các tham số khác được đặt thành 0.
Một số ứng dụng (đặc biệt là trình duyệt web) hỗ trợ ghi phần trăm giá trị RGB (từ 0% đến 100%).
- h1 ( màu: rgb(255, 0, 0); ) /* đỏ */
- h2 ( màu: rgb(0, 255, 0); ) /* xanh */
- h3 ( màu: rgb(0, 0, 255); ) /* xanh */
- h4 ( color: rgb(0%, 0%, 100%); ) /* cùng màu xanh, mục nhập phần trăm */
Giá trị màu RGB được hỗ trợ trong tất cả các trình duyệt chính.
RGBA
Gần đây, các trình duyệt hiện đại đã học cách làm việc với mô hình màu RGBA - một phần mở rộng của RGB có hỗ trợ kênh alpha, xác định độ mờ của đối tượng.
Giá trị màu RGBA được chỉ định là: rgba(red, green, blue, alpha). Tham số alpha là một số nằm trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn mờ).
- h1 ( color: rgb(0, 0, 255); ) /* màu xanh lam trong RGB thông thường */
- h2 ( color: rgba(0, 0, 255, 1); ) /* cùng màu xanh lam trong RGBA, vì độ mờ: 100% */
- h3 ( color: rgba(0, 0, 255, 0.5); ) /* độ mờ: 50% */
- h4 ( color: rgba(0, 0, 255, .155); ) /* độ mờ: 15,5% */
- h5 ( color: rgba(0, 0, 255, 0); ) /* hoàn toàn trong suốt */
RGBA được hỗ trợ trong IE9+, Firefox 3+, Chrome, Safari và Opera 10+.
HSL
Mô hình màu HSL là sự thể hiện của mô hình RGB trong hệ tọa độ hình trụ. HSL thể hiện màu sắc theo cách trực quan và dễ đọc hơn so với RGB thông thường. Mô hình này thường được sử dụng trong các ứng dụng đồ họa, bảng màu và phân tích hình ảnh.
HSL là viết tắt của Hue (màu sắc/màu sắc), Saturation (độ bão hòa), Lightness/Luminance (độ sáng/độ sáng/độ sáng, đừng nhầm lẫn với độ sáng).
Hue chỉ định vị trí của màu trên bánh xe màu (từ 0 đến 360). Độ bão hòa là giá trị phần trăm của độ bão hòa (từ 0% đến 100%). Độ sáng là tỷ lệ phần trăm của độ sáng (từ 0% đến 100%).
- h1 ( màu: hsl(120, 100%, 50%); ) /* xanh */
- h2 ( màu: hsl(120, 100%, 75%); ) /* xanh nhạt */
- h3 ( màu: hsl(120, 100%, 25%); ) /* xanh đậm */
- h4 ( color: hsl(120, 60%, 70%); ) /* xanh nhạt */
HSL được hỗ trợ trong IE9+, Firefox, Chrome, Safari và Opera 10+.
HSLA
Tương tự như RGB/RGBA, HSL có chế độ HSLA hỗ trợ kênh alpha để biểu thị độ mờ của đối tượng.
Giá trị màu HSLA được chỉ định là: hsla(màu sắc, độ bão hòa, độ sáng, alpha). Tham số alpha là một số nằm trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn mờ).
- h1 ( color: hsl(120, 100%, 50%); ) /* màu xanh lá cây trong HSL bình thường */
- h2 ( color: hsla(120, 100%, 50%, 1); ) /* màu xanh lá cây tương tự trong HSLA, vì độ mờ: 100% */
- h3 ( color: hsla(120, 100%, 50%, 0.5); ) /* độ mờ: 50% */
- h4 ( color: hsla(120, 100%, 50%, .155); ) /* độ mờ: 15,5% */
- h5 ( color: hsla(120, 100%, 50%, 0); ) /* hoàn toàn trong suốt */
CMYK
Mô hình màu CMYK thường gắn liền với việc in và in màu. CMYK (không giống như RGB) là một mô hình trừ, nghĩa là giá trị cao hơn gắn liền với màu tối hơn.
Màu sắc được xác định bằng tỷ lệ màu lục lam (Cyan), đỏ tươi (Magenta), vàng (Yellow), có thêm màu đen (Key/blacK).
Mỗi con số xác định một màu trong CMYK đại diện cho phần trăm mực của màu đó tạo nên sự kết hợp màu sắc, hay chính xác hơn là kích thước của điểm màn hình được xuất ra trên máy sắp chữ trên phim có màu đó (hoặc trực tiếp). trên tấm in trong trường hợp CTP).
Ví dụ: để có được màu PANTONE 7526, bạn sẽ trộn 9 phần lục lam, 83 phần đỏ tươi, 100 phần vàng và 46 phần đen. Điều này có thể được ký hiệu như sau: (9,83,100,46). Đôi khi các ký hiệu sau được sử dụng: C9M83Y100K46 hoặc (9%, 83%, 100%, 46%) hoặc (0,09/0,83/1,0/0,46).
HSB/HSV
HSB (còn gọi là HSV) cũng tương tự như HSL nhưng là hai mẫu màu khác nhau. Cả hai đều dựa trên hình học hình trụ, nhưng HSB/HSV dựa trên mô hình "hexcone", trong khi HSL dựa trên mô hình "bi-hexcone". Các nghệ sĩ thường thích sử dụng mẫu này hơn, người ta thường chấp nhận rằng thiết bị HSB/HSV gần với cảm nhận màu sắc tự nhiên hơn. Đặc biệt, mô hình màu HSB được sử dụng trong Adobe Photoshop.
HSB/HSV là viết tắt của Hue (màu sắc/màu sắc), Saturation (độ bão hòa), Brightness/Value (độ sáng/giá trị).
Hue chỉ định vị trí của màu trên bánh xe màu (từ 0 đến 360). Độ bão hòa là giá trị phần trăm của độ bão hòa (từ 0% đến 100%). Độ sáng là phần trăm độ sáng (từ 0% đến 100%).
XYZ
Mô hình màu XYZ (CIE 1931 XYZ) là một không gian toán học thuần túy. Không giống như RGB, CMYK và các mô hình khác, trong XYZ các thành phần chính là “tưởng tượng”, nghĩa là bạn không thể kết hợp X, Y và Z với bất kỳ bộ màu nào để trộn. XYZ là mẫu chính cho hầu hết các mẫu màu khác được sử dụng trong lĩnh vực kỹ thuật.
PHÒNG THÍ NGHIỆM
Mô hình màu LAB (CIELAB, “CIE 1976 L*a*b*”) được tính toán từ không gian CIE XYZ. Mục tiêu thiết kế của Lab là tạo ra một không gian màu trong đó các thay đổi màu sắc sẽ tuyến tính hơn theo nhận thức của con người (so với XYZ), nghĩa là, cùng một sự thay đổi về giá trị tọa độ màu ở các vùng khác nhau của không gian màu sẽ tạo ra cảm giác thay đổi màu sắc tương tự.
Màu sắc trong CSS có thể được đặt theo nhiều cách khác nhau:
- bằng tên,
- theo giá trị thập lục phân,
- ở định dạng RGB và RGBA,
- ở định dạng HSL và HSLA.
Đặt màu theo tên
Trình duyệt hỗ trợ chỉ định một số màu cho các thành phần theo tên. Bảng này chứa một số từ khóa (tên màu tiếng Anh) dùng để chỉ định thuộc tính màu, mã RGB, mã thập lục phân (HEX) và mã HSL.
| Tên | Màu sắc | RGB | HEX | HSL | Sự miêu tả |
|---|---|---|---|---|---|
| trắng | rgb(255, 255, 255) | #ffffff hoặc #fff | hsl(0, 0%, 100%) | Trắng | |
| bạc | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Xám | |
| xám | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Màu xám đen | |
| đen | rgb(0, 0, 0) | #000000 hoặc #000 | hsl(0, 0%, 0%) | Đen | |
| Bỏ rơi | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Đỏ sẫm | |
| màu đỏ | rgb(255, 0, 0) | #ff0000 hoặc #f00 | hsl(0, 100%, 50%) | Màu đỏ | |
| quả cam | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Quả cam | |
| màu vàng | rgb(255, 255, 0) | #ffff00 hoặc #ff0 | hsl(60, 100%, 50%) | Màu vàng | |
| Ôliu | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Ôliu | |
| chanh xanh | rgb(0, 255, 0) | #00ff00 hoặc #0f0 | hsl(120, 100%, 50%) | Màu xanh lợt | |
| màu xanh lá | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Màu xanh lá | |
| nước | rgb(0, 255, 255) | #00ffff hoặc #0ff | hsl(180, 100%, 50%) | Màu xanh da trời | |
| màu xanh da trời | rgb(0, 0, 255) | #0000ff hoặc #00f | hsl(240, 100%, 50%) | Màu xanh da trời | |
| Hải quân | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Xanh đậm | |
| màu xanh mòng két | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Xanh lam | |
| hoa vân anh | rgb(255, 0, 255) | #ff00ff hoặc #f0f | hsl(300, 100%, 50%) | Hồng | |
| màu tím | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | màu tím |
Đây là một ví dụ về việc sử dụng tên màu, tên màu được lấy từ bảng mở rộng.
Đây là cách mã này hoạt động:
Đặt màu bằng RGB
RGB là một mô hình màu bổ sung. Bằng tiếng Anh phép cộng- phép cộng. RGB là tên viết tắt của các từ tiếng Anh: Red, Green, Blue - đỏ, lục, lam). Từ đó, rõ ràng là trong mô hình RGB, màu sắc được tổng hợp bằng cách thêm ba màu (đỏ, lục, lam) với số lượng khác nhau.
Bằng cách trộn các màu đỏ, xanh lá cây và xanh lam, bạn có thể thu được hàng triệu sắc thái. Tất cả các kết hợp có thể được lưu trữ trong bộ nhớ máy tính.
Vào vấn đề.
Để đặt thuộc tính ở định dạng này, hãy sử dụng ký hiệu rgb(r, g, b) , trong đó r, g, b là ba kênh cho mỗi màu (đỏ, lục, lam). Giá trị cho mỗi kênh được đặt trong phạm vi từ 0 đến 255.
Mã ví dụ.
Để làm cho mọi thứ rõ ràng, đây là một ví dụ về mã:
Đây là cách ví dụ này sẽ hoạt động:
Hình.1. Màu sắc trong RGB. Giải thích chẳng hạn.
Ở đầu trang chúng ta tạo lớp div.rgb, nó cần cho các khối được tạo bởi thẻ
Tiếp theo, trong mã chúng ta đặt màu nền của khối
Hãy thử chỉnh sửa ví dụ này và chỉ định các giá trị của riêng bạn, ví dụ rgb(100, 100, 100) .
Đặt màu bằng RGBA
CSS3 có một công cụ mới để làm việc với màu sắc - định dạng RGBA. Nó có thể được gọi là sự phát triển của mô hình RGB, nhưng với việc bổ sung một kênh mới - kênh A hoặc alpha. Kênh này thiết lập độ trong suốt của màu sắc. Các giá trị của nó được đặt trong phạm vi từ 0 đến 1. Giá trị 0 tương ứng với độ trong suốt hoàn toàn, 1 - độ mờ hoàn toàn (màu sẽ giống như được chỉ định trong ba kênh RGB đầu tiên) và các giá trị trung gian chẳng hạn như 0,4 hoặc 0,6 - độ trong mờ ở các mức độ khác nhau.
Mã ví dụ.
Đây là cách nó sẽ hoạt động:
Mã này trông giống như mã sau, sử dụng mô hình RGB để chỉ định giá trị màu:
Đây là kết quả của anh ấy:
Giá trị kênh alpha bằng 0 làm cho bất kỳ màu nào trở nên vô hình - hoàn toàn trong suốt; giá trị bằng một sẽ chuyển màu trong mã RGB mà không thay đổi. Thuộc tính rgba(255,0,0,1.0) hiển thị màu đỏ rgb(255, 0, 0) .
Theo giá trị thập lục phân (mã HEX)
Trong cuộc sống hàng ngày, chúng ta sử dụng hệ đếm thập phân. Nguồn gốc của nó rất đơn giản - bàn tay chúng ta có mười ngón và việc đếm trên ngón tay rất tiện lợi trong cuộc sống. Nếu hệ thập phân có mười chữ số: từ 0 đến 9, số 10 là chữ số tiếp theo thì hệ thập lục phân có 16 chữ số, chữ số tiếp theo là số 16.
Để biểu thị mã màu, các chữ số thập phân thông thường từ 0 đến 9 được sử dụng làm chữ số thập lục phân và các chữ cái Latinh từ A đến F được sử dụng để biểu thị các số từ 10 đến 15, nghĩa là (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Để rõ ràng, hãy đặt cái này vào một bảng:
Để viết các số thập lục phân lớn hơn F (15 trong hệ thập phân), cũng như trong hệ thập phân, họ cũng sử dụng kết hợp của hai chữ số, nhưng đã là thập lục phân, điều này là hiển nhiên. Vì vậy, để viết số thập phân 255 theo ký hiệu thập lục phân, hãy sử dụng ký hiệu FF.
Hệ thập lục phân dễ hiểu hơn đối với máy tính và nó xử lý các giá trị được đặt theo giá trị thập lục phân nhanh hơn.
Để chỉ định một màu ở dạng thập lục phân, hãy đặt trước giá trị số bằng dấu “#”, ví dụ: #FFC0CB. Bản thân giá trị #FFC0CB bao gồm ba chữ số thập lục phân FF, C0 và CB. Ý nghĩa của mục này giống như cài đặt màu ở định dạng RGB (rgb(r, g, b)) - mỗi chữ số thập lục phân trong mã HEX biểu thị độ bão hòa màu trong kênh của mô hình RGB.
Mã này sẽ hiển thị các yếu tố sau:
Và đây là hình ảnh với kết quả từ phần "Cài đặt màu bằng RGB" trên trang này ở trên.
Hình.1. Màu sắc trong RGB. Chúng ta thấy rằng màu sắc giống hệt nhau.
Cho phép ký hiệu rút gọn mã màu HEX: số có 6 chữ số có thể được viết dưới dạng số có 3 chữ số. Điều này chỉ hợp lệ khi hai chữ số trong giá trị màu của một kênh được lặp lại.
Nghĩa là, cách viết tắt sau đây được chấp nhận:
Ví dụ: màu #ff22aa có thể được viết là #f2a hoặc màu #44aa22 có thể được viết là #4a2 .
Cài đặt màu bằng HSL
CSS3 có định dạng mới để chỉ định màu sắc.
Định dạng HSL là viết tắt của các từ tiếng Anh: Hue (hue), Saturate (bão hòa) và Lightness (độ sáng).
Hue trong HSL là giá trị của một màu trên bánh xe màu đặc biệt (Hình 2) và được xác định bằng độ. Nếu chúng ta so sánh với mô hình RGB thì 0° tương ứng với màu đỏ, 120° tương ứng với màu xanh lá cây và 240° tương ứng với màu xanh lam.
Giá trị màu sắc sẽ thay đổi từ 0 đến 359.
Hình 2. Bánh xe màu HSL. Giá trị thứ hai - độ bão hòa (Saturate) được đặt dưới dạng phần trăm. Ở độ bão hòa 100%, màu sắc càng “ngon ngọt” càng tốt; khi chỉ báo độ bão hòa tiến về 0%, màu sắc ngày càng xỉn hơn và chuyển sang màu xám.
Giá trị thứ ba, Độ sáng, cũng được đặt dưới dạng phần trăm. Tỷ lệ phần trăm càng cao thì màu sẽ càng sáng. Các giá trị cực trị 0% và 100% sẽ lần lượt biểu thị các màu đen (không có ánh sáng) và trắng (phơi sáng quá mức) và việc chọn màu nào từ bánh xe màu trong kênh đầu tiên không quan trọng. Giá trị độ sáng màu tối ưu là 50%.
Cài đặt màu bằng HSLA
Định dạng HSLA có liên quan đến HSL, giống như RGB liên quan đến RGBA. Ở định dạng HSLA, như trong RGBA, một kênh alpha được thêm vào, kênh này chịu trách nhiệm về độ trong suốt của màu.
Màu được chỉ định ở định dạng HSL dễ đọc hơn. Chúng ta có thể nói rằng nó là trực quan. Ví dụ: mã hsl(120,60%,50%) có thể biểu thị màu cuối cùng nếu có hình ảnh của bánh xe màu HSL trong bộ nhớ. Điều tương tự không thể nói về các định dạng RGB và HEX; mã màu được chỉ định trong các định dạng này chỉ trở nên rõ ràng sau khi nó được hiển thị trên màn hình.
Các định dạng mới trong CSS3 (HSL, HSLA và RGBA) hoạt động trong các trình duyệt bắt đầu từ các phiên bản: IE 9.0, Opera 10.0 Firefox 3.0. Làm cách nào để tạo kiểu hoạt động trên các trình duyệt cũ hơn?
Somebloсk ( màu nền: rgb(255,50,50); màu nền: rgba(255,50,50,0.85) )
Khi sử dụng mã này trong các trình duyệt cũ hơn, màu nền của lớp .somebloсk, mặc dù nó sẽ không sử dụng kênh alpha, nhưng sẽ được hiển thị ở định dạng RGB.
Tôi bày tỏ lòng biết ơn gián tiếp tới Google về ý tưởng này và đưa ra lời khuyên cho các đồng nghiệp của mình: cần chia sẻ với độc giả các tài nguyên nước ngoài về phát triển web từ nguồn cấp dữ liệu RSS của tôi, nguồn cấp dữ liệu này viết một cách thực tế và thú vị về vấn đề này. Để giảm bớt việc nói chuyện nhàn rỗi, bạn cần tuân theo một số quy định đơn giản:
- Trên blog của bạn, xuất bản bản dịch (bạn có thể tự do, kèm theo nhận xét và bổ sung) của một bài viết từ nguồn được trình bày.
- Các bản dịch, giống như nguồn của chúng, không nên lặp lại để đảm bảo tính bao phủ và đa dạng của thông tin.
- Điều quan trọng là phải đề cập đến blogger đã nhận được tin vui và nếu có thể, hãy chuyển tiếp dùi cui.
- Thời gian của rơle không được đặt; Chắc chắn sẽ có người ngăn chặn được trò bacchanalia này.
Nguồn ban đầu của bài đăng này là một trong những bài đăng của Drew McLellan trên blog lịch tập thể 24ways. Đi!
Màu RGBA là gì?
Tôi sẽ không tiết lộ bí mật nếu tôi nói rằng sắc thái màu cần thiết được tạo trong CSS bằng cách trộn màu đỏ, xanh lá cây và xanh lam theo tỷ lệ yêu cầu. Tuy nhiên, có một sắc thái - cho dù chúng ta chọn màu gì, nó sẽ luôn có màu đặc và đục.
CSS3 cung cấp một số cách mới để chỉ định màu, một trong số đó là sử dụng mô hình màu RGBA. Chữ “A” trong từ viết tắt là viết tắt của “Alpha”; giá trị của nó chịu trách nhiệm về độ trong suốt của màu sắc. Bằng cách sử dụng mô hình này, chúng ta không chỉ có thể thiết lập sự kết hợp cần thiết của màu đỏ, xanh lá cây và xanh lam mà còn xác định được mức độ “tỏa sáng” của màu sắc. Có thể quan sát thấy điều gì đó tương tự khi làm việc với các lớp trong Photoshop.
Thuộc tính opacity để làm gì?
Vấn đề là định nghĩa về độ trong suốt của màu khác với cài đặt độ trong suốt cho một phần tử, được đặt bằng thuộc tính CSS độ mờ. Hãy xem một ví dụ.
Chúng tôi có tiêu đề h1 với các màu cụ thể cho văn bản và nền, nằm trên một trang có hình nền.
H1 ( màu: rgb(0, 0, 0); màu nền: rgb(255, 255, 255); )
Bằng cách đặt thuộc tính độ mờ, bạn có thể áp dụng độ trong suốt cho toàn bộ phần tử:
H1 (màu: rgb(0, 0, 0); màu nền: rgb(255, 255, 255); độ mờ: 0,5; )
Mô hình RGBA cung cấp cho chúng ta cơ hội linh hoạt hơn - chỉ kiểm soát độ trong suốt của màu chứ không phải toàn bộ phần tử. Ví dụ: bạn có thể đặt độ trong suốt cho màu nền:
H1 ( màu: rgb(0, 0, 0); màu nền: rgba(255, 255, 255, 0.5); )
Hoặc giữ nguyên nền và chỉ gán độ trong suốt cho văn bản:
H1 (màu: rgba(0, 0, 0, 0.5); màu nền: rgb(255, 255, 255); )
Có lẽ việc sử dụng cú pháp rgb() để chỉ định màu ít phổ biến hơn ký hiệu thập lục phân (như #fff), nhưng trong trường hợp này, điều đó là hoàn toàn cần thiết vì không thể viết giá trị RGBA bằng ký hiệu thập lục phân. Vì vậy, chúng tôi đặt rgba() chính xác như thế này:
Màu sắc: rgba(255, 255, 255, 0,5);
Giống như trong rgb(), ba giá trị đầu tiên chịu trách nhiệm kết hợp màu đỏ, xanh lá cây và xanh lam. Họ có thể lấy cả hai giá trị số nguyên trong phạm vi 0–255 và tỷ lệ phần trăm trong phạm vi từ 0 đến 100%. Giá trị thứ tư xác định mức độ trong suốt, từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn mờ đục).
Bạn có thể sử dụng phương pháp này một cách an toàn ở bất cứ nơi nào bạn thường đặt màu trong CSS: màu nền và màu văn bản, đường viền, đường viền, v.v.
Hỗ trợ trình duyệt
Hầu hết các trình duyệt hiện đại (Firefox, Safari, Opera, Google Chrome) đều hỗ trợ màu RGBA, nhưng Internet Explorer thì không.
Không còn gì để làm ngoài việc chỉ định màu RGBA cho các trình duyệt hỗ trợ chúng và tự mình nghĩ ra “chân chống” cho những phần còn lại.
Phân tích cú pháp CSS hoạt động trong trình duyệt theo cách mà nếu gặp bất kỳ giá trị không xác định nào khi phân tích quy tắc, nó sẽ bị bỏ qua. Hãy sử dụng kiến thức này để hiển thị màu mờ bình thường cho các trình duyệt "không hiểu". Để làm được điều này, chỉ cần chỉ định màu ở định dạng như quảng cáo đầu tiên là đủ. RGB và phần thứ hai đặt bóng màu theo định dạng RGBA— dành cho các trình duyệt hỗ trợ mô hình màu này.
H1 ( màu: rgb(127, 127, 127); màu: rgba(0, 0, 0, 0.5); )
Trong trường hợp bạn muốn áp dụng độ trong suốt cho thuộc tính màu nền, bạn có thể sử dụng hình ảnh PNG có kênh alpha để đạt được hiệu ứng tương tự. Tất nhiên, đây là một phương pháp đắt tiền hơn, trái ngược với CSS “thuần túy”, vì bạn sẽ phải tạo PNG của riêng mình cho từng mức độ trong suốt, nhưng không có cá, không có cá.
Chúng tôi sử dụng nguyên tắc tương tự như trong ví dụ trước: đầu tiên chúng tôi đặt nền cho tất cả các trình duyệt, sau đó chúng tôi viết lại dòng có tính đến RGBA.
H1 (nền: url trong suốt(black50.png); nền: rgba(0, 0, 0, 0.5) không có; )
Cần lưu ý rằng thiết kế này hoạt động vì chúng tôi đang sử dụng một dạng nền tốc ký cho phép chúng tôi đặt cả màu nền và hình nền cùng một lúc. Các trình duyệt gặp giá trị rgba() không xác định sẽ bỏ qua hoàn toàn dòng thứ hai và xử lý khai báo đầu tiên.
Thứ gì khác
Ưu điểm chính của RGBA là khả năng tạo ra nhiều giải pháp thiết kế khác nhau mà không cần sử dụng bản vẽ. Lợi ích ở đây không chỉ là các trang nhẹ hơn (và do đó nhanh hơn) mà còn tiết kiệm thời gian: các trang web sử dụng công nghệ được đề cập sẽ dễ tạo và duy trì hơn. Dưới tác động của Javascript hoặc phản ứng lại hành động của người dùng, các giá trị trong CSS có thể dễ dàng thay đổi. Trong trường hợp của chúng tôi, các bản vẽ có thể gây khó khăn cho việc chuyển đổi như vậy.
Div ( màu: rgba(255, 255, 255, 0.8); màu nền: rgba(142, 213, 87, 0.3); ) div:hover ( màu: rgba(255, 255, 255, 1); nền- màu: rgba(142, 213, 87, 0.6 )
Việc sử dụng hợp lý độ trong suốt cho màu đường viền sẽ giúp một số thành phần trên trang trông tự nhiên hơn:
Div ( color: rgb(0, 0, 0); màu nền: rgb(255, 255, 255); đường viền: rgba rắn 10px(255, 255, 255, 0.3); )
Cuối cùng
Như thường lệ, các cải tiến CSS tiên tiến được hỗ trợ bởi các trình duyệt hàng đầu. Hãy cùng hy vọng rằng những chàng trai đến từ Redmond sẽ nhận ra điều gì đó trong cuộc sống và tham gia vào số đông.
Màn hình máy tính, cũng như màn hình của điện thoại di động, điện thoại thông minh và máy tính bảng, bao gồm hàng nghìn ô vuông nhỏ gọi là pixel (nếu nhìn kỹ vào màn hình, bạn có thể thấy chúng). Khi màn hình tắt, nó có màu đen vì không phát ra ánh sáng; khi bật lên, mỗi pixel sẽ mang một màu khác nhau, điều này tạo nên hình ảnh mà chúng ta nhìn thấy khi nhìn vào màn hình.
Khi chúng tôi đặt màu cho khung của một phần tử, nền hoặc văn bản, chúng tôi sẽ đặt màu cụ thể cho các pixel mà chúng được tạo thành. Có hai cách tiếp cận chung để chỉ định màu trong CSS: theo tên hoặc theo giá trị. Đơn giản nhất là chỉ định một tên: đỏ là đỏ, xanh lam là xanh lam, v.v., nhưng CSS không cung cấp nhiều tên màu để chọn. Mặt khác, việc chỉ định một giá trị màu sẽ ngụ ý sự lựa chọn các sắc thái lớn hơn nhiều. Có một số cách để chỉ định giá trị màu, hai cách phổ biến nhất là giá trị RGB và thập lục phân. Chúng đã là một phần của CSS kể từ phiên bản đầu tiên và mọi trình duyệt web đều hỗ trợ chúng. CSS3 đã giới thiệu thêm một số tùy chọn để xác định màu: RGBA, HSL và HSLA, chúng ít có nhiều trình duyệt hơn nhưng các phiên bản trình duyệt mới nhất đã hỗ trợ chúng.
Tên hoa
Cách đơn giản và rõ ràng nhất để chỉ định màu trong CSS là chọn tên màu được xác định trước từ một bộ từ khóa. Tổng cộng có 147 từ khóa có tên màu: 17 tên là màu tiêu chuẩn đã được giới thiệu trong các phiên bản đầu tiên của HTML (trắng, đen, đỏ, vàng, xanh dương, xanh lá cây, cam, tím, xám, bạc, xanh nước biển, màu hoa vân anh, vôi , màu hạt dẻ, xanh nước biển, ô liu và xanh mòng két) và 130 màu bổ sung đã được thêm vào CSS2. Bạn có thể xem toàn bộ danh sách tên màu có sẵn trong phần HTML của bảng màu của chúng tôi.
RGB và RGBA
Hệ thống RGB sử dụng ba con số mô tả lượng màu đỏ, xanh lá cây và xanh lam tương đối được trộn với nhau để tạo ra bất kỳ màu sắc nào. Các số có thể nằm trong khoảng từ 0 đến 255. Hãy xem xét mã RGB cho màu tím đậm: rgb(204, 51, 255), chẳng hạn, mã này có thể được áp dụng cho thuộc tính CSS chịu trách nhiệm về màu phông chữ:
Màu sắc: rgb(205, 51, 255);
Hệ thống RGBA thêm một số khác mô tả độ trong suốt của màu, giá trị có thể nằm trong khoảng từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn mờ đục). Giá trị 0,5 làm cho màu bán trong suốt, hãy xem xét phiên bản bán trong suốt của màu tím đậm, được xác định bằng hệ thống RGBA:
Màu sắc: rgba(204, 51, 255, 0,5);
Bạn có thể thấy các giá trị màu đỏ, lục và lam tương tự như hệ thống RGB. Số thứ tư - 0,5 là mức độ minh bạch. Chữ “A” trong RGBA là viết tắt của kênh alpha, là thuật ngữ thiết kế đồ họa có nghĩa là độ trong suốt.
Màu RGBA rất hữu ích trong việc tạo các phần tử mờ giúp hiển thị các phần tử bên dưới chúng.
HSL và HSLA
Hệ thống HSL (màu sắc, độ bão hòa, độ sáng) mô tả màu sắc dựa trên màu sắc, độ bão hòa và độ sáng. Đây là màu tím đậm tương tự được chỉ định ở định dạng HSL:
Màu sắc: hsl(285, 100%, 60%);
Số đầu tiên là màu sắc, được biểu thị bằng độ từ 0 đến 360, xác định vị trí của màu trên bánh xe màu. Số thứ hai, độ bão hòa, được xác định bằng tỷ lệ phần trăm từ 0% đến 100%, cho biết màu sắc sẽ bão hòa (sáng) như thế nào. Số thứ ba là độ sáng, nó được định nghĩa là tỷ lệ phần trăm giống như độ bão hòa, độ sáng cho biết màu sắc sẽ sáng hay tối.
Hệ thống HSLA, giống như RGBA, thêm số thứ tư từ 0 đến 1 để xác định mức độ trong suốt của màu. Giá trị 0,5 làm cho màu bán trong suốt, hãy xem xét phiên bản bán trong suốt của màu tím đậm, được xác định bằng hệ thống HSLA:
Màu sắc: hsla(285, 100%, 60%, 0,5);
Giá trị màu thập lục phân
Mã màu thập lục phân là sáu ký tự theo sau ký hiệu #:
Mỗi bộ hai ký tự đại diện cho một số từ 0 đến 255. Vì vậy, hai ký tự đầu tiên tượng trưng cho màu đỏ, hai ký tự tiếp theo tượng trưng cho màu xanh lá cây và hai ký tự cuối cùng tượng trưng cho màu xanh lam. Theo cách này, mã thập lục phân rất giống với RGB, với điểm khác biệt là ở đây mỗi màu được chỉ định trong hệ thống số thập lục phân thay vì số thập phân.
Nếu mỗi cặp chữ số bao gồm các ký hiệu giống nhau thì giá trị màu có thể được rút ngắn. Tuy nhiên, nếu mã thập lục phân trông như thế này, chẳng hạn như #bbff10, thì mục nhập đó không thể rút ngắn được.
Màu sắc: #f00; màu sắc: #ff0000;
Lưu ý: Các trình duyệt không hỗ trợ các giá trị màu này (rgba, hsl và hsla) không liên kết bất kỳ màu nào với nền hoặc phông chữ, hoàn toàn bỏ qua khai báo. Trong trường hợp này, nền của phần tử sử dụng giá trị mặc định (nó trở nên trong suốt hoàn toàn) và văn bản sử dụng giá trị mặc định (màu đen) hoặc màu được kế thừa từ phần tử gốc.
Đối với các phiên bản trình duyệt cũ hơn, bạn nên thêm quy tắc bổ sung xác định màu ở định dạng RGB, giá trị thập lục phân hoặc theo tên. Quy tắc này phải xuất hiện trước quy tắc chỉ định màu ở định dạng RGBA, HSL hoặc HSLA. Điều này sẽ cung cấp một mạng lưới an toàn cho màu sắc vì trong CSS, nếu có hai quy tắc đặt giá trị cho cùng một thuộc tính thì quy tắc được đặt bên dưới trong mã luôn được ưu tiên. Điều này có nghĩa là nếu trình duyệt hỗ trợ các định dạng RGBA, HSL hoặc HSLA thì nó sẽ sử dụng quy tắc thứ hai và nếu không, nó sẽ sử dụng quy tắc thứ nhất.
Mã màu trong CSS được sử dụng để chỉ định màu sắc. Thông thường, mã màu hoặc giá trị màu được sử dụng để đặt màu cho màu nền trước của một phần tử (ví dụ: màu văn bản, màu liên kết) hoặc màu nền của một phần tử (màu nền, màu khối). Chúng cũng có thể được sử dụng để thay đổi màu của nút, đường viền, điểm đánh dấu, di chuột và các hiệu ứng trang trí khác.
Bạn có thể chỉ định giá trị màu của mình ở nhiều định dạng khác nhau. Bảng sau liệt kê tất cả các định dạng có thể có:
Các định dạng được liệt kê được mô tả chi tiết hơn dưới đây.
Màu CSS - Mã Hex
Mã màu thập lục phân là một đại diện sáu chữ số của màu sắc. Hai chữ số đầu tiên (RR) đại diện cho giá trị màu đỏ, hai chữ số tiếp theo đại diện cho giá trị màu xanh lá cây (GG) và hai chữ số cuối cùng đại diện cho giá trị màu xanh lam (BB).
Màu CSS - Mã Hex ngắn
Mã màu hex ngắn là một dạng ký hiệu sáu ký tự ngắn hơn. Ở định dạng này, mỗi chữ số được lặp lại để tạo ra giá trị màu gồm sáu chữ số tương đương. Ví dụ: #0F0 trở thành #00FF00.
Giá trị thập lục phân có thể được lấy từ bất kỳ phần mềm đồ họa nào như Adobe Photoshop, Core Draw, v.v.
Mỗi mã màu thập lục phân trong CSS sẽ được bắt đầu bằng dấu băm "#". Dưới đây là ví dụ về cách sử dụng ký hiệu thập lục phân.
Màu CSS - Giá trị RGB
Giá trị RGB là mã màu được đặt bằng thuộc tính rgb(). Thuộc tính này nhận ba giá trị: mỗi giá trị cho màu đỏ, xanh lục và xanh lam. Giá trị có thể là số nguyên, từ 0 đến 255 hoặc phần trăm.
Ghi chú: Không phải tất cả các trình duyệt đều hỗ trợ thuộc tính màu rgb(), vì vậy không nên sử dụng nó.
Dưới đây là ví dụ hiển thị nhiều màu sử dụng giá trị RGB.
Trình tạo mã màu
Bạn có thể tạo hàng triệu mã màu bằng dịch vụ của chúng tôi.
Màu sắc an toàn của trình duyệt
Dưới đây là bảng gồm 216 màu an toàn nhất và không phụ thuộc vào máy tính. Những màu này trong CSS có phạm vi từ mã thập lục phân 000000 đến FFFFFF. Chúng an toàn khi sử dụng vì chúng đảm bảo rằng tất cả các máy tính hiển thị màu chính xác khi làm việc với bảng màu 256.
| Bảng màu "an toàn" trong CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
