search

Làm cách nào để đặt màu trong CSS?

Ngày đăng: 22/12/2022
Trả lời: 0
Lượt xem: 65

CSS cung cấp một số cách khác nhau để khai báo màu sắc, mỗi cách có cú pháp, lợi ích và nhược điểm riêng. Nó có thể hơi khó hiểu, đặc biệt là khi họ vẫn đang thêm những cách mới

Show

Nếu bạn không phải lúc nào cũng chắc chắn về cách bạn nên thực hiện và khai báo màu của mình trong CSS, thì trong bài đăng này, chúng tôi muốn làm sáng tỏ vấn đề này. Trong phần sau đây, chúng ta sẽ xem xét các cách khác nhau để gán màu cho các thành phần của trang web, cách sử dụng chúng, ưu và nhược điểm cũng như khi nào nên sử dụng cái gì.

Gán màu trong CSS

Khai báo màu sắc trong CSS nhìn chung không khó lắm. Có rất nhiều thuộc tính CSS lấy màu sắc làm giá trị bao gồm ________ 04, ________ 05, ________ 06, _______ 07, v.v. Ví dụ: đây là cách bạn thay đổi màu văn bản cho thành phần đoạn văn (tìm hiểu các cách khác để tùy chỉnh văn bản qua CSS tại đây)

p {
	color: #999;
}

Tuy nhiên, có rất nhiều cách khác nhau để bạn có thể đặt giá trị màu, đó là những gì chúng ta sẽ nói bây giờ

1. Tên màu HTML

Cách cơ bản nhất để gán màu trong CSS là chỉ cần đặt tên màu. Nếu bạn muốn một cái gì đó có màu xanh dương, đỏ hoặc xanh lá cây, bạn chỉ cần đặt cái này vào CSS của mình và trình duyệt sẽ hiển thị nó

Làm cách nào để đặt màu trong CSS?

Đây là mã đi kèm trông như thế nào

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}

Điều này hoạt động vì có một danh sách dài các mã màu HTML mà mọi người đã đồng ý vào ngày trước và vẫn hoạt động

Làm cách nào để đặt màu trong CSS?

Có những lựa chọn nào?

Khi sử dụng tên màu, cũng có rất nhiều tùy chọn. Tất cả các màu cơ bản mà bạn có thể nghĩ đến đều có sẵn bao gồm ________ 08, ________ 09 và rất nhiều màu xám. Đồng thời, bạn cũng có thể chọn từ các tùy chọn kỳ lạ hơn như 

#div-one {
	background-color: #46f2e1;
}

#div-two {
	background-color: #f25752;
}

#div-three {
	background-color: #f2a93a;
}

#div-four {
	background-color: #3af278;
}
0, 
#div-one {
	background-color: #46f2e1;
}

#div-two {
	background-color: #f25752;
}

#div-three {
	background-color: #f2a93a;
}

#div-four {
	background-color: #3af278;
}
1, 
#div-one {
	background-color: #46f2e1;
}

#div-two {
	background-color: #f25752;
}

#div-three {
	background-color: #f2a93a;
}

#div-four {
	background-color: #3af278;
}
2, 
#div-one {
	background-color: #46f2e1;
}

#div-two {
	background-color: #f25752;
}

#div-three {
	background-color: #f2a93a;
}

#div-four {
	background-color: #3af278;
}
3 hoặc 
#div-one {
	background-color: #46f2e1;
}

#div-two {
	background-color: #f25752;
}

#div-three {
	background-color: #f2a93a;
}

#div-four {
	background-color: #3af278;
}
4

Làm cách nào để đặt màu trong CSS?

Lưu ý rằng trong CSS, tên màu không phân biệt chữ hoa chữ thường, vì vậy bạn có thể viết chúng theo cách bạn muốn. Ngoài ra, một số màu là từ đồng nghĩa, chẳng hạn như 

#div-one {
	background-color: #46f2e1;
}

#div-two {
	background-color: #f25752;
}

#div-three {
	background-color: #f2a93a;
}

#div-four {
	background-color: #3af278;
}
5 và 
#div-one {
	background-color: #46f2e1;
}

#div-two {
	background-color: #f25752;
}

#div-three {
	background-color: #f2a93a;
}

#div-four {
	background-color: #3af278;
}
6 hoặc 
#div-one {
	background-color: #46f2e1;
}

#div-two {
	background-color: #f25752;
}

#div-three {
	background-color: #f2a93a;
}

#div-four {
	background-color: #3af278;
}
7/
#div-one {
	background-color: #46f2e1;
}

#div-two {
	background-color: #f25752;
}

#div-three {
	background-color: #f2a93a;
}

#div-four {
	background-color: #3af278;
}
8

Nhược điểm là tất cả chúng đều có màu trơn, đặc, không có khả năng thêm độ trong suốt. Ngoài ra còn có từ khóa 

#div-one {
	background-color: #46f2e1;
}

#div-two {
	background-color: #f25752;
}

#div-three {
	background-color: #f2a93a;
}

#div-four {
	background-color: #3af278;
}
9, làm cho một phần tử hoàn toàn trong suốt, tuy nhiên, không có cách nào để thực hiện các thay đổi dần dần đối với điều này. Vì vậy, nếu độ trong suốt là thứ bạn cần, thì việc gán màu qua tên màu chắc chắn không phải là lựa chọn đúng đắn.

Bạn có nên sử dụng tên màu HTML trong CSS?

Nếu muốn, bạn có thể học thuộc lòng tất cả các tên màu có sẵn và sử dụng chúng để khai báo màu trong dự án web của mình. Như đã đề cập, có rất nhiều sự lựa chọn

Tuy nhiên, đây có lẽ không phải là cách tiếp cận kinh tế nhất và cũng không chắc là bạn sẽ luôn có màu sắc phù hợp với dự án hoặc trường hợp sử dụng cụ thể của mình. Trên thực tế, bạn hiếm khi thấy các khai báo màu CSS có tên màu bên ngoài mã ví dụ và hầu như không bao giờ thấy trong môi trường sản xuất

Tất nhiên, những gì bạn có thể làm là sử dụng chúng để lấy cảm hứng và làm cơ sở để tìm ra màu sắc phù hợp cho dự án web của mình. Bạn cũng có thể dễ dàng tìm thấy chúng trong các ký hiệu màu khác, vì vậy chúng dễ dàng tùy chỉnh theo nhu cầu của bạn

Tên màu – Khả năng tương thích với trình duyệt

Tin tốt về tên màu HTML là đã có từ khá lâu nên tất cả các trình duyệt đều có thể xử lý chúng.

2. Giá trị HEX

Giá trị HEX là cách phổ biến nhất để khai báo màu trong CSS khi bạn không cần kiểm soát độ mờ. Họ trông như thế nào?

Làm cách nào để đặt màu trong CSS?

Đây là cách để đạt được những điều trên trong đánh dấu CSS

________số 8

Giá trị màu HEX hoạt động như thế nào

Ký hiệu màu này dựa trên các giá trị RGB (đỏ, lục, lam). Số thập lục phân mô tả tỷ lệ của mỗi màu

Về cơ bản, định dạng là như thế này. 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
90 (R=đỏ, G=xanh lục, B=xanh dương, nếu bạn chưa tự nghĩ ra điều đó). Hệ thập lục phân sử dụng các giá trị từ 0 đến 255 được biểu thị bằng các số 0-9 và các chữ cái a-f. Thấp nhất là ________ 191, cao nhất là _______ 192. Điều này cho phép bạn trộn ba màu chia sẻ thông qua các giá trị tương ứng của chúng để tạo ra tất cả các loại màu khác nhau

Ví dụ: màu đỏ là 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
93 (màu đỏ có giá trị cao nhất, những màu khác không có), màu xanh lá cây 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
94 và màu xanh lam 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
95. Đen là 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
96 và trắng là 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
97, cả hai thường được rút gọn thành các giá trị có ba chữ số là 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
98 và 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
99. Rút ngắn cũng hoạt động đối với các màu khác trong đó hai giá trị cho mỗi màu giống nhau, e. g. 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
90 có thể trở thành 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
91 hoặc 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
92 giống như 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
93

Bạn cũng có thể kiểm soát độ trong suốt bằng cách thêm hai chữ số phụ ở cuối để kiểm soát kênh alpha

Làm cách nào để đặt màu trong CSS?

Điều này cũng phải nằm trong khoảng từ 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
91 (hoàn toàn trong suốt) đến 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
92 (hoàn toàn mờ đục) để xác định mức độ trong suốt

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
9

Tuy nhiên, việc sử dụng các giá trị hex theo cách này không phổ biến lắm. Như đã đề cập ở trên, chúng chủ yếu được sử dụng để tạo màu đồng nhất trong CSS, chẳng hạn như cho văn bản

Một trong những nhược điểm của cách viết màu này là bạn không hiểu từ mã hex màu đó là gì (trừ khi bạn có nhiều kinh nghiệm làm việc với chúng). Chúng cũng khó thao tác và tạo sắc thái nếu không có các công cụ khác trực quan hóa chúng. Đó là điều bạn có thể dễ dàng thực hiện hơn với các phương pháp khác, như bạn sẽ thấy bên dưới

Giá trị màu HEX – Khả năng tương thích với trình duyệt

Khả năng tương thích cho ký hiệu màu thập lục phân có sẵn trong hầu hết mọi trình duyệt

Làm cách nào để đặt màu trong CSS?

Tuy nhiên, hãy lưu ý rằng nó sẽ trở nên nổi bật hơn khi bạn bao gồm giá trị độ trong suốt

Làm cách nào để đặt màu trong CSS?

3. rgb() và rgba()

Hệ thống RGB hoạt động khá giống với màu HEX ở chỗ các ký hiệu màu được tạo thành từ các giá trị cho màu đỏ, lục và lam.

Làm cách nào để đặt màu trong CSS?

Tuy nhiên, thay vì sử dụng hệ thập lục phân, trong trường hợp này, bạn viết ra phần chia sẻ của chúng dưới dạng số thập phân hoặc tỷ lệ phần trăm và trong ngoặc của thuộc tính CSS 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
96

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
9

Lưu ý rằng bạn có thể viết nó được phân tách bằng dấu phẩy và, đối với các trình duyệt hiện đại, cũng có thể được chia theo dấu cách. Vì vậy, trước đây màu đỏ là ________ 193, bây giờ là ________ 298, màu trắng là ________ 299 và màu đen là 

p {
	color: #999;
}
10. Thay vì các số 0-255, bạn cũng có thể viết phần trăm từ 0% đến 100%

Không quá khó phải không?

Sử dụng rgba() để thêm độ trong suốt

Điều đặc biệt về 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
96 là nó cũng có thuộc tính chức năng riêng để thêm kênh alpha cho độ mờ. Cách này hoạt động tương tự như 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
96 nhưng thay vào đó, bạn phải viết 
p {
	color: #999;
}
13 và thêm giá trị thứ tư giữa 
p {
	color: #999;
}
14 (hoàn toàn trong suốt) và 
p {
	color: #999;
}
15 (không trong suốt, hoàn toàn mờ đục)

Làm cách nào để đặt màu trong CSS?

Ở đây, bạn cũng có thể sử dụng phần trăm thay vì các số trong khoảng từ 

p {
	color: #999;
}
16 đến 
p {
	color: #999;
}
17. Cũng có thể bỏ qua số trước dấu thập phân và chỉ cần viết đại loại như 
p {
	color: #999;
}
18

p {
	color: #999;
}
1

p {
	color: #999;
}
13 từ lâu đã là giải pháp hiệu quả để tăng tính minh bạch cho các thành phần của trang web. Nó cũng dễ đọc hơn màu hex. Tuy nhiên, một lần nữa, trừ khi bạn thực sự giỏi về lý thuyết màu sắc, bạn có thể vẫn gặp khó khăn khi cố ý tạo màu bằng phương pháp này

rgb() và rgba() – Khả năng tương thích với trình duyệt

Trước khi chúng ta tiếp tục, hãy kiểm tra nhanh tính tương thích của trình duyệt. Không có gì ngạc nhiên khi 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
20
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
21 và 
p {
	color: #999;
}
13 được ủng hộ rộng rãi

Làm cách nào để đặt màu trong CSS?

4. hsl() và hsla()

Ký hiệu màu HSL sử dụng một hệ thống khác để tạo màu. Thay vì trộn màu đỏ, xanh lá cây và xanh lam, nó khai báo các giá trị cho Hue, Saturation và Lightness. Một cái gì đó mà các nhà thiết kế có thể thấy trực quan hơn và có thể quen thuộc hơn. Nó cũng giúp dễ dàng tạo các sắc thái cùng màu vì bạn có thể kiểm soát độ bão hòa và độ sáng

Ký hiệu trong CSS có định dạng tương tự như 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
96 chỉ sử dụng 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
24 thay thế. Tuy nhiên, khi khai báo các màu như thế này, điều quan trọng cần biết là màu sắc được định nghĩa là một giá trị góc, có thể là độ, radian, độ dốc hoặc lượt. Tuy nhiên, phổ biến nhất là độ, đây cũng là giá trị mặc định khi bạn chỉ cung cấp một số

Kết quả là, nó thường lấy một số từ 

p {
	color: #999;
}
16 đến 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
26 (nghĩ về một bánh xe màu trong đó 0° là màu đỏ, 120° là màu lục và 240° là màu lam) trong khi độ bão hòa và độ sáng đều chiếm tỷ lệ phần trăm. Màu càng ít bão hòa thì càng có nhiều màu xám. Khi bão hòa hoàn toàn, bạn có đầy đủ màu sắc được chọn trong giá trị 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
27. Ở mức 50%, độ sáng là trung tính, thấp hơn sẽ chuyển sang màu đen, cao hơn sẽ chuyển sang màu trắng hoàn toàn

Nghe có vẻ khó hiểu?

Làm cách nào để đặt màu trong CSS?
Hình ảnh. SharkD/Wikimedia

Cách sử dụng hsl() để khai báo màu CSS

Được rồi, đủ lý thuyết, điều này trông như thế nào trong thực tế?

Làm cách nào để đặt màu trong CSS?

Nếu bạn muốn đạt được những điều trên, đây là cách thực hiện trong CSS

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
2

Bạn cũng có thể viết nó theo cú pháp khác, e. g. bỏ dấu phẩy và chỉ phân tách các giá trị bằng dấu cách. Nếu bạn làm như vậy, hãy đảm bảo tính nhất quán vì mục đích dễ đọc của mã

Một lần nữa, hãy tận dụng lợi thế của hsla() để minh bạch

Tương tự như ________ 296, bạn cũng có thể thêm kênh alpha vào 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
24 bằng cách sử dụng ________ 630 cho phép bạn kiểm soát độ mờ. Nó được sử dụng giống như trên với các số từ 
p {
	color: #999;
}
14 đến 
p {
	color: #999;
}
15 hoặc theo phần trăm

Làm cách nào để đặt màu trong CSS?

Kết quả là, đây là đánh dấu đi kèm cho hình ảnh ví dụ ở trên

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
3

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
24 và 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
30 cũng tuyệt vời để tự động tính toán màu sắc bằng cách sử dụng các thuộc tính tùy chỉnh CSS. Nếu bạn quan tâm đến điều đó, bài đăng này là một nơi tốt để bắt đầu

hsl() và hsla() – Khả năng tương thích với trình duyệt

Cuối cùng, cả hai phương thức giá trị màu CSS đều rất tương thích với các trình duyệt hiện đại. Bạn sẽ không gặp rắc rối khi sử dụng chúng để xác định màu trong CSS của mình

Làm cách nào để đặt màu trong CSS?

5. hwb()

Chuyển sang phương pháp tiếp theo, 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
35 tương tự như 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
24, chỉ khác ở đây là từ viết tắt của Hue, Whiteness và Blackness. Màu sắc được chỉ định giống như trong 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
24 và độ trắng và đen lấy giá trị phần trăm

Làm cách nào để đặt màu trong CSS?

Đối với cú pháp, hãy lưu ý rằng, không giống như các ví dụ trước đó, trong các giá trị của 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
35 không bao giờ được phân tách bằng dấu phẩy mà chỉ bằng dấu cách

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
3

Một điều khác cần ghi nhớ là sự pha trộn giữa màu trắng và màu đen. Vì vậy, nếu bạn muốn toàn màu trắng hoặc đen, bạn phải đặt một cái thành 100% và cái kia thành 0%. Nếu không, bạn sẽ tạo ra bóng của sắc độ đã chỉ định

Ngoài ra, 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
35 cũng có một kênh alpha, tuy nhiên, nó không đi kèm với thuộc tính riêng của nó (e. g. 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
30). Thay vào đó, nếu bạn muốn sửa đổi độ trong suốt, bạn phải thêm nó vào cuối được phân tách bằng dấu gạch chéo lên như vậy

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
6

Ngoài ra, nó vẫn như mọi khi, sử dụng 

p {
	color: #999;
}
14 đến 
p {
	color: #999;
}
15 hoặc phần trăm để kiểm soát nó

hwb() – Khả năng tương thích với trình duyệt

Biểu thị màu CSS bằng 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
35 là tương đối mới, do đó, hỗ trợ trong trình duyệt có nhiều điểm hơn một chút. Hiện tại chỉ Firefox và Safari mới render được

Làm cách nào để đặt màu trong CSS?

6. phòng thí nghiệm()

Bây giờ chúng ta có một trong những thuộc tính đầu tiên được tạo để tạo màu độc lập với thiết bị. 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
34 được cho là có thể hiển thị toàn bộ tầm nhìn của con người. Các hệ thống RGB và HSL có vấn đề là chúng không đồng nhất và trong HSL, tùy thuộc vào màu sắc bạn chọn, độ đậm nhạt có thể có tác động rất khác nhau

Làm cách nào để đặt màu trong CSS?

Ví dụ: các màu trên đều có cùng giá trị độ đậm nhạt. Bạn có nghĩ rằng tất cả chúng đều có mức độ sáng như nhau khi nhìn vào chúng không?

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
34 được đưa ra trong không gian màu CIE L*a*b* (còn được viết là CIELAB). Đó là một không gian màu có sẵn trong các công cụ như Photoshop và là một lựa chọn tốt nếu bạn muốn màu của mình trông giống nhau trên màn hình và trên bản in

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
36 là viết tắt của độ sáng, 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
37 và 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
38 là viết tắt của các trục của không gian màu Lab, lần lượt chuyển từ xanh lục sang đỏ và xanh dương sang vàng. Các giá trị âm trên 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
37 chuyển sang màu xanh lục, dương chuyển sang màu đỏ. Điều này cũng đúng với trục 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
38 với màu xanh lam và vàng

Khi tạo màu trong CSS bằng cách sử dụng 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
34, bạn cho độ sáng theo phần trăm (0% là màu đen 100% là màu trắng) và 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
37/
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
38 là khoảng cách

Làm cách nào để đặt màu trong CSS?

Các giá trị không được phân tách bằng dấu phẩy

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
0

Về lý thuyết, độ sáng có thể hơn 100%, trên thực tế có thể lên tới 400% và các giá trị của 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
37 và 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
38 là không giới hạn. Tuy nhiên, trên thực tế, có những giới hạn, đặc biệt là do những gì màn hình có thể hiển thị. Vì lý do đó, giá trị của 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
37 và 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
38 được giới hạn ở +/-160. Ngoài ra, cũng có thể thêm kênh alpha có dấu gạch chéo như chúng ta đã thấy cho 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
35

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
1

tính tương thích của trình duyệt web

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
34 định nghĩa màu hiện chỉ được Safari hỗ trợ vì chúng vẫn là một tính năng thử nghiệm

Làm cách nào để đặt màu trong CSS?

7. lch()

Màu sắc trong không gian LCH tương tự như LAB nhưng chúng sử dụng Chroma và Hue làm tọa độ. 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
36 lại là độ sáng theo phần trăm có thể vượt quá một trăm, 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
01 lại là góc trên bánh xe màu trong khoảng từ 0 đến 360 độ và 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
02 là lượng màu, tương tự như độ bão hòa

Làm cách nào để đặt màu trong CSS?

Về mặt lý thuyết, không có giới hạn đối với 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
02 nhưng trình duyệt chỉ có thể hiển thị các giá trị trong khoảng từ 
p {
	color: #999;
}
16 đến 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
05. Ngoài ra, thêm độ bão hòa sẽ không tạo ra sự khác biệt. Về cơ bản, cú pháp giống hệt với 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
34, bao gồm khả năng thêm giá trị alpha ở cuối thông qua dấu gạch chéo lên phía trước

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
2

tính tương thích của trình duyệt web

Vì 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
34 và 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
08 dựa trên cùng một không gian màu, nên hiện tại, 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
34 và 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
08 cũng chỉ được hỗ trợ trong Safari

8. màu()

Phương pháp cuối cùng để khai báo màu sắc trong CSS là sử dụng 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
09. Đây là một tính năng thử nghiệm khác chưa thực sự có sẵn để sản xuất. Nó cho phép bạn hiển thị màu sắc trong một không gian cụ thể mà bạn có thể xác định thông qua 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
10 và kiểm tra bằng truy vấn phương tiện 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
11

Tất cả những điều này chưa được thông qua, vì vậy đây là một điều lý thuyết hơn. Với 

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
09, bạn xác định một không gian màu, sau đó bao gồm các tham số hoặc tên cho màu bạn muốn sử dụng cùng với một giá trị alpha tùy chọn

#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
3

Bạn chưa thực sự phải lo lắng về điều này, tôi chỉ muốn nói với bạn rằng nó có trên sách

tính tương thích của trình duyệt web

Như các ví dụ trước, hiện tại chỉ có Safari biết bạn đang nói về cái gì nếu bạn cố gắng sử dụng cái này

Làm cách nào để đặt màu trong CSS?

Suy nghĩ cuối cùng. Tuyên bố màu CSS

Biết cách khai báo màu sắc trong CSS là điều tối quan trọng nếu bạn muốn làm bất cứ việc gì liên quan đến thiết kế web hay front-end. Đặc biệt là vì có nhiều phương pháp khác nhau để làm như vậy

Ở trên, chúng tôi đã điểm qua các phương pháp quan trọng nhất, lợi ích và hạn chế của chúng cũng như cách sử dụng chúng. Chúng tôi cũng đã xem xét một số điều sắp tới

Nếu bạn là người dùng bình thường, rất có thể bạn sẽ sử dụng các giá trị hex cộng với 

p {
	color: #999;
}
13 bất cứ khi nào bạn cần thứ gì đó minh bạch. 
#div-one {
	background-color: red;
}

#div-two {
	background-color: green;
}

#div-three {
	background-color: blue;
}

#div-four {
	background-color: black;
}
24 là một lựa chọn tuyệt vời cho các nhà thiết kế. Mọi thứ khác sẽ trở nên quan trọng hơn theo thời gian, đặc biệt là khi màn hình trở nên tốt hơn

Cách yêu thích của bạn để khai báo màu sắc trong CSS là gì?

4 cách để đặt màu trong CSS là gì?

Có một số cách khác nhau để chỉ định màu trong CSS. .
từ khóa màu
thập lục phân

Cú pháp cho màu sắc trong CSS là gì?

Cú pháp. màu. RGB(giá trị, giá trị, giá trị);

programming css

Bài Viết Liên Quan

Eevee cach tiến hóa mạnh nhất fire red năm 2024
Eevee cach tiến hóa mạnh nhất fire red năm 2024

mẹo hay
Bài tập đọc hiểu ngữ văn 10 có đáp án năm 2024
Bài tập đọc hiểu ngữ văn 10 có đáp án năm 2024

mẹo hay Khỏe Đẹp Bài tập
Cỏ nhân tạo sân bóng đá là gì năm 2024
Cỏ nhân tạo sân bóng đá là gì năm 2024

là ai Hỏi Đáp Là gì
Bài tập về khuếch đại tín hiệu nhỏ năm 2024
Bài tập về khuếch đại tín hiệu nhỏ năm 2024

mẹo hay Khỏe Đẹp Bài tập
Sau đó tiếng trung là gì năm 2024
Sau đó tiếng trung là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng trung
Cach tìm lỗi dư dấu cách trong văn bản năm 2024
Cach tìm lỗi dư dấu cách trong văn bản năm 2024

mẹo hay Mẹo Hay Cách
Loại hình tổ chức nào không cần có giám đốc năm 2024
Loại hình tổ chức nào không cần có giám đốc năm 2024

mẹo hay
Phat sinh có trong kế toán tiếng anh là gì năm 2024
Phat sinh có trong kế toán tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Chung cư green stars 234 phạm văn đồng năm 2024
Chung cư green stars 234 phạm văn đồng năm 2024

mẹo hay
Bài giảng văn 8 bài hai chữ nước nhà năm 2024
Bài giảng văn 8 bài hai chữ nước nhà năm 2024

mẹo hay Xây Đựng Nhà
Cơ cấu là gì công nghệ 8 năm 2024
Cơ cấu là gì công nghệ 8 năm 2024

là ai Hỏi Đáp Là gì Công Nghệ Công nghệ VietJack 8
Chất độc màu da cam tiếng anh là gì năm 2024
Chất độc màu da cam tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Agent Orange
Kênh trắc nghiệm ông tập học kì 1 hóa 12 năm 2024
Kênh trắc nghiệm ông tập học kì 1 hóa 12 năm 2024

mẹo hay Học Tốt Học
Bài tập 3 bài thực hành 5 tin học 11 năm 2024
Bài tập 3 bài thực hành 5 tin học 11 năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Học
Đám tang đức hồng y nguyễn văn thuận năm 2024
Đám tang đức hồng y nguyễn văn thuận năm 2024

mẹo hay Đức Hồng y
Chùm ho sốt thứ phát là gì năm 2024
Chùm ho sốt thứ phát là gì năm 2024

là ai Hỏi Đáp Là gì
Bài 2 trang 101 ngữ văn 6 tập 2 năm 2024
Bài 2 trang 101 ngữ văn 6 tập 2 năm 2024

mẹo hay
Giáo dục sức khỏe bệnh nhân xuất huyest tiêu hóa năm 2024
Giáo dục sức khỏe bệnh nhân xuất huyest tiêu hóa năm 2024

mẹo hay Khỏe Đẹp Khỏe
Hợp đồng giao chậm về lãi suất là gì năm 2024
Hợp đồng giao chậm về lãi suất là gì năm 2024

là ai Hỏi Đáp Là gì
Phát xít nhật vào đông dương khi nào năm 2024
Phát xít nhật vào đông dương khi nào năm 2024

mẹo hay

Quảng Cáo

Có thể bạn quan tâm

Già hóa dân số ở các nước đang phát triển năm 2024
1 ngày trước . bởi PainfulRecurrence
Lỗi không mở được camera trên win 7 năm 2024
1 ngày trước . bởi DamagedFastball
Bài toán tính lãi suất 11 áp dụng csn năm 2024
1 ngày trước . bởi InnermostColors
Rfq là viết tắt của từ gì năm 2024
1 ngày trước . bởi Hand-heldAdvertising
Căn cứ chứng minh khi có hóa đơn bỏ trốn năm 2024
1 ngày trước . bởi GrievingQuilting
Thời vụ du lịch là gì năm 2024
1 ngày trước . bởi RelevantInsanity
Các cách cân bằng phương trình hóa học cực nhanh năm 2024
1 ngày trước . bởi Tax-freeAllocation
Nhân viên kinh doanh ngoại hối là làm gì năm 2024
1 ngày trước . bởi FabulousAlligator
Canada là một đất nước như thế nào năm 2024
1 ngày trước . bởi VindictiveEmbroidery
Không có câu hỏi nào ngớ ngẩn ebook năm 2024
1 ngày trước . bởi IcedSalvation

Toplist được quan tâm

#1
Top 6 bản thân em phải làm gì để phòng chống hiv/aids 2023
6 tháng trước
#2
Top 7 số 20 gồm 2 và 0 đúng hay sai 2023
6 tháng trước
#3
Top 7 địa lý lớp 6 bài 19: lớp đất và các nhân tố hình thành đất một số nhóm đất điển hình trang 178 2023
6 tháng trước
#4
Top 7 h thực hiện chủ trương đường lối chính sách của đảng pháp luật của nhà nước 2023
6 tháng trước
#5
Top 6 on tập tiếng việt lớp 7 học kĩ 2 violet 2023
6 tháng trước
#6
Top 7 trung du và miền núi bắc bộ có thế mạnh nổi bật về luyện kim đen 2023
6 tháng trước
#7
Top 8 mơ thấy có người to tình với mình 2023
6 tháng trước
#8
Top 6 nước yến cao cấp yến sào thiên hoàng 2023
6 tháng trước
#9
Top 7 ví dụ về quyết định hành chính nhà nước 2023
6 tháng trước

Quảng cáo

Xem Nhiều

Suửa lỗi chính tả tự động trong word năm 2024
4 ngày trước . bởi JubilantGallery
Văn khấn thần tài thổ địa ngày rằm tháng giêng năm 2024
3 ngày trước . bởi Two-wayLeopard
Bless the lord oh my soul là gì năm 2024
1 ngày trước . bởi PowderedLongevity
Danh mục hàng hóa mật mã dân sự năm 2024
6 ngày trước . bởi Blue-eyedSpecs
Gia hạn chữ ký số tiếng anh là gì năm 2024
1 tuần trước . bởi Self-confidentMotto
Thực thi công vụ là gì năm 2024
3 ngày trước . bởi FeatheryDrafting
App kiểm tra nguồn gốc hàng hóa qua mã vạch năm 2024
2 ngày trước . bởi DeprivedCivility
Mặt nổi mấy mục đốm đen là bị gì năm 2024
4 ngày trước . bởi CrackingDoorstep
Hội chứng đao ở người biểu hiện như thế nào năm 2024
3 ngày trước . bởi BarbedEncouragement
Làm thế nào để có hơi thở thơm mát năm 2024
5 ngày trước . bởi Ill-advisedMartin

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Hỏi Đáp Inc.