search

3 cách màu css được chỉ định là gì?

1 năms trước
Trả lời: 0
Lượt xem: 46

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 

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

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

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

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

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

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

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

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

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

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

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

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

#div-four {
	background-color: black;
}
7, 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ó

3 cách màu css được chỉ định là gì?

Đâ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

3 cách màu css được chỉ định là gì?

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 

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

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

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

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

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

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

#div-four {
	background-color: black;
}
9 và rất nhiều sắc thái của 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

3 cách màu css được chỉ định là gì?

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ử trở nên trong suốt hoàn toàn, 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?

3 cách màu css được chỉ định là gì?

Đâ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à 
#div-one {
	background-color: red;
}

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

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

#div-four {
	background-color: black;
}
91, cao nhất là 
#div-one {
	background-color: red;
}

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

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

#div-four {
	background-color: black;
}
92. Đ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

3 cách màu css được chỉ định là gì?

Đ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

3 cách màu css được chỉ định là gì?

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

3 cách màu css được chỉ định là gì?

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.

3 cách màu css được chỉ định là gì?

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)

3 cách màu css được chỉ định là gì?

Ở đâ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

3 cách màu css được chỉ định là gì?

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?

3 cách màu css được chỉ định là gì?
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ế?

3 cách màu css được chỉ định là gì?

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ư 

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

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

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

#div-four {
	background-color: black;
}
96, 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 
#div-one {
	background-color: red;
}

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

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

#div-four {
	background-color: black;
}
30 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

3 cách màu css được chỉ định là gì?

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

3 cách màu css được chỉ định là gì?

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 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

3 cách màu css được chỉ định là gì?

Đố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

3 cách màu css được chỉ định là gì?

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

3 cách màu css được chỉ định là gì?

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

3 cách màu css được chỉ định là gì?

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ế, vẫn có giới hạn, đặc biệt là do màn hình nào 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

3 cách màu css được chỉ định là gì?

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

3 cách màu css được chỉ định là gì?

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

3 cách màu css được chỉ định là gì?

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ì?

3 cách để chỉ định màu sắc trong HTML là gì?

Có ba loại phương pháp chính để đặt màu trên trang web của bạn, chúng như sau. .
Tên màu. Bạn có thể chỉ định trực tiếp tên màu để đặt văn bản hoặc màu nền. .
Mã lục giác. Mã thập lục phân là biểu diễn sáu chữ số của một màu. .
Giá trị RGB

Có bao nhiêu cách bạn có thể chọn màu trong CSS?

Xem xét một màu là kết quả của sự kết hợp giữa Đỏ, Xanh lục và Xanh lam và vì mỗi màu trong số 3 màu này có 256 giá trị có thể, nên có 256 * 256 * 256 = . Vì mô hình RGB có liên quan trực tiếp đến cách màu sắc được hiển thị vật lý nên nó đã trở thành một đơn vị màu CSS. possible colors available. Because the RGB model is directly related to how colors are physically rendered, it has become a CSS color unit.

Màu sắc được quy định như thế nào?

Một màu được chỉ định theo cường độ của các thành phần màu đỏ, lục và lam, mỗi màu được biểu thị bằng tám bit . Do đó, có 24 bit được sử dụng để chỉ định màu web trong gam sRGB và 16.777.216 màu có thể được chỉ định như vậy.

Ba cách chính để áp dụng màu cho các phần tử trong HTML và CSS là gì?

Nội tuyến - bằng cách sử dụng thuộc tính kiểu bên trong các phần tử HTML . Nội bộ - bằng cách sử dụng phần tử . Bên ngoài - bằng cách sử dụng phần tử .

programming css

Bài Viết Liên Quan

Làm thế nào để bạn chia phép chia trong html?
Làm thế nào để bạn chia phép chia trong html?

Làm thế nào để bạn có được X
Làm thế nào để bạn có được X

Làm thế nào để bạn thay thế none trong python?
Làm thế nào để bạn thay thế none trong python?

Isodate trong javascript là gì?
Isodate trong javascript là gì?

1kg mayonnaise bao nhiêu tiền?
1kg mayonnaise bao nhiêu tiền?

Đặt đường dẫn php trong ubuntu
Đặt đường dẫn php trong ubuntu

Cách chuyển giá trị đầu vào để hoạt động trong JavaScript
Cách chuyển giá trị đầu vào để hoạt động trong JavaScript

Bắt đầu học Python từ đâu
Bắt đầu học Python từ đâu

Cách tạo mật khẩu được mã hóa trong Unix
Cách tạo mật khẩu được mã hóa trong Unix

Hủy phiên đăng xuất trong PHP
Hủy phiên đăng xuất trong PHP

MỚI CẬP NHẬP

Xin lỗi ché muốn 2 chồng 32nd december love error năm 2024
51 giâys trước . bởi IneffectiveFixing
Dđề kiểm tra toán hình họ 11 vuông góc.violet năm 2024
35 phúts trước . bởi ManiacalGenesis
Tìm hiểu về anh hùng nguyễn văn trỗi năm 2024
53 phúts trước . bởi CompatibleLifeline
Thay đổi tên công ty có phải hủy hóa đơn năm 2024
1 giờs trước . bởi InconspicuousSquad
Good dịch sang tiếng việt là gì năm 2024
1 giờs trước . bởi UntroubledTwenties
400 triệu mua xe ô tô cũ loại nào năm 2024
1 giờs trước . bởi DivisionalBegun
Lỗi font khi đăng ký tài khoản từ app năm 2024
1 giờs trước . bởi GuardedSkate
Con át chủ bài tiếng anh là gì năm 2024
2 giờs trước . bởi SlenderVariation
Máy bay di chuyển trên mặt đất như the nào năm 2024
2 giờs trước . bởi NovelCilantro
Các sông ở đảo có đặc điểm như thế nào năm 2024
2 giờs trước . bởi StaticOrganisation

Xem Nhiều

File kẹp tài liệu đục lỗ tiếng anh là gì năm 2024
2 ngàys trước . bởi InsidiousReceptor
Lỗi khi mở folder màn hình view bị thu nhỏ năm 2024
4 ngàys trước . bởi RegimentalAdoption
Viết bài văn nghị luận về bảo vệ môi trường năm 2024
1 ngàys trước . bởi RaspingPatchwork
Công văn sở giáo dục đào tạo tỉnh quảng ngãi năm 2024
1 ngàys trước . bởi DapperFoothold
Uống vitamin d vào lúc nào tốt nhất năm 2024
3 ngàys trước . bởi PrimordialHacker
Rách giời rơi xuống nghĩa là gì năm 2024
4 ngàys trước . bởi VastOrientation
Bài 35 sách giáo khoa toán 8 tập 1 năm 2024
13 giờs trước . bởi TenuousScenery
Lỗi không gõ được tiếng việt trên amis năm 2024
1 ngàys trước . bởi PonderousCivility
Những bài toán lớp 1 giúp trẻ tư duy năm 2024
2 ngàys trước . bởi AnnoyedWomanhood
Bởi vì em hết yêu anh đạo từ bài nào năm 2024
5 ngàys trước . bởi ImprovisedTraveler

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.