Khi bạn nhóm các bộ chọn CSS, bạn áp dụng các kiểu giống nhau cho một số thành phần khác nhau mà không cần lặp lại các kiểu trong biểu định kiểu của mình. Thay vì có hai, ba hoặc nhiều quy tắc CSS thực hiện cùng một việc [ví dụ: đặt màu của một thứ gì đó thành màu đỏ], bạn sử dụng một quy tắc CSS duy nhất thực hiện cùng một việc. Bí mật của chiến thuật tăng cường hiệu quả này là dấu phẩy
Cách nhóm các bộ chọn CSS
Để nhóm các bộ chọn CSS trong biểu định kiểu, hãy sử dụng dấu phẩy để phân tách nhiều bộ chọn được nhóm trong biểu định kiểu. Trong ví dụ này, kiểu ảnh hưởng đến phần tử p và div
div, p { color: #f00; }
Trong ngữ cảnh này, dấu phẩy có nghĩa là "và", vì vậy bộ chọn này áp dụng cho tất cả các thành phần đoạn văn và tất cả các thành phần phân chia. Nếu dấu phẩy bị thiếu, bộ chọn thay vào đó sẽ áp dụng cho tất cả các phần tử đoạn là con của một phép chia. Đó là một loại bộ chọn khác, vì vậy dấu phẩy rất quan trọng
Bạn có thể nhóm bất kỳ dạng bộ chọn nào với bất kỳ bộ chọn nào khác. Ví dụ này nhóm bộ chọn lớp với bộ chọn ID
p.red, #sub { color: #f00; }
Kiểu này áp dụng cho bất kỳ đoạn văn nào có thuộc tính lớp là màu đỏ và bất kỳ phần tử nào [vì loại không được chỉ định] có thuộc tính ID là phụ.
Bạn có thể nhóm bất kỳ số lượng bộ chọn nào, bao gồm cả bộ chọn từ đơn và bộ chọn ghép. Ví dụ này bao gồm bốn bộ chọn khác nhau
p, .red, #sub, div a:link { color: #f00; }
Quy tắc CSS này sẽ áp dụng cho
- Bất kỳ phần tử đoạn nào
- Bất kỳ phần tử nào có lớp màu đỏ
- Bất kỳ phần tử nào có ID là phụ
- Lớp giả liên kết của các phần tử neo là hậu duệ của một bộ phận
Bộ chọn cuối cùng đó là bộ chọn ghép. Như được hiển thị, nó dễ dàng kết hợp với các bộ chọn khác trong quy tắc CSS này. Quy tắc đặt màu #f00 [đỏ] trên bốn bộ chọn này, tốt hơn là viết bốn bộ chọn riêng biệt để đạt được kết quả tương tự
Bất kỳ bộ chọn nào cũng có thể được nhóm lại
Bạn có thể đặt bất kỳ bộ chọn hợp lệ nào trong một nhóm và tất cả các phần tử trong tài liệu khớp với tất cả các phần tử được nhóm sẽ có cùng kiểu dựa trên thuộc tính kiểu đó
Một số nhà thiết kế thích liệt kê các thành phần được nhóm trên các dòng riêng biệt để dễ đọc trong mã. Giao diện trên trang web và tốc độ tải vẫn như cũ. Ví dụ: bạn có thể kết hợp các kiểu được phân tách bằng dấu phẩy thành một thuộc tính kiểu trong một dòng mã
th, td, p.red, div#firstred { color: red; }
hoặc bạn có thể liệt kê các kiểu trên từng dòng riêng lẻ để rõ ràng
th,
td,
p.red,
div#firstred
{
color: red;
}
Tại sao lại nhóm Bộ chọn CSS?
Nhóm các bộ chọn CSS giúp giảm thiểu kích thước của biểu định kiểu của bạn để nó tải nhanh hơn Phải thừa nhận rằng các biểu định kiểu không phải là thủ phạm chính khiến tải chậm; . Tuy nhiên, mọi phần tối ưu hóa đều hữu ích và nếu bạn có thể loại bỏ một số kích thước khỏi CSS của mình và tải các trang nhanh hơn nhiều, thì đó là một điều tốt
Bộ chọn nhóm cũng làm cho việc bảo trì trang web dễ dàng hơn nhiều. Nếu cần thay đổi, bạn chỉ cần chỉnh sửa một quy tắc CSS duy nhất thay vì nhiều quy tắc. Cách tiếp cận này tiết kiệm thời gian và rắc rối
Điểm mấu chốt. Nhóm các bộ chọn CSS giúp tăng hiệu quả, năng suất, tổ chức và trong một số trường hợp, thậm chí cả tốc độ tải
Trích dẫn bài viết này
Định dạng
trích dẫn của bạn
Kyrnin, Jennifer. "Nhóm nhiều bộ chọn CSS. "ThinkCo. https. //www. suy nghĩ. com/grouping-multiple-css-selectors-3467065 [truy cập ngày 3 tháng 1 năm 2023]
Trong phần trước, chúng tôi đã tạo và xuất bản trang web đầu tiên của mình. Tôi thừa nhận, trang web có rất ít nội dung và trông không có gì đặc biệt hấp dẫn. Chúng tôi muốn thay đổi điều này ngay bây giờ. Trong phần này, bạn sẽ học cách sử dụng CSS để tạo kiểu cho trang. Trong phần sau, chúng tôi sẽ thêm nhiều phong cách hơn vào trang web của mình với sự trợ giúp của một khung có tên là Bootstrap
Cấu trúc và Phong cách
Chỉ như một lời nhắc nhở. HTML mô tả cấu trúc của một trang web trong khi CSS xác định giao diện trực quan
Tách cấu trúc và phong cách có nhiều lợi thế, như chúng ta sẽ thấy. Không bắt buộc, nhưng thường thì tốt hơn là viết HTML và CSS trong các tệp riêng biệt
Liên kết đến tệp CSS
Tệp CSS là một tệp văn bản thông thường có phần mở rộng là
Web Portfolio of Marco6. Chúng tôi sẽ liên kết đến tệp CSS từ bên trong tệp HTMLWeb Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
Tạo một tệp mới trong thư mục Danh mục đầu tư của bạn. Đặt tên cho tệp mới là
Web Portfolio of Marco7Web Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
Bây giờ hãy mở
Web Portfolio of Marco8 của bạn và thêm phần tửWeb Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
Web Portfolio of Marco9 vào bên trong phần tửWeb Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
h2 { background-color: #607d8b; color: #ffffff; }0. Với phần tử
Web Portfolio of Marco9, chúng tôi yêu cầu trang HTML tải tệp CSSLiên kết đến tệp CSSWeb Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
p.red, #sub { color: #f00; }1
Chèn phần tử này vào khối
h2 { background-color: #607d8b; color: #ffffff; }0 của bạn. Bây giờ mã của bạn sẽ giống như sau
Web Portfolio of MarcoWeb Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
Quan trọng. Để tìm thấy CSS, thuộc tính
h2 { background-color: #607d8b; color: #ffffff; }3 phải chứa đường dẫn tệp chính xác. Chúng tôi chỉ có một
Web Portfolio of Marco7 và nó nằm trong thư mục gốc của chúng tôi. VớiWeb Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
h2 { background-color: #607d8b; color: #ffffff; }5 hàng đầu, chúng tôi có thể truy cập thư mục gốc từ mọi nơi, ngay cả khi tệp HTML của chúng tôi nằm trong thư mục con. Do đó, tệp CSS của chúng tôi luôn có thể được tải bằng
h2 { background-color: #607d8b; color: #ffffff; }6. Tìm hiểu thêm về điều này trong phần 1 bên dưới
Màu sắc
Cho đến thời điểm này, tệp CSS vẫn trống. Hãy viết những dòng CSS đầu tiên của chúng ta. Trong CSS, chúng tôi viết cái gọi là quy tắc CSS. Với quy tắc CSS, chúng tôi có thể chỉ định trình duyệt sẽ làm gì với một phần cụ thể trong HTML của chúng tôi
Ví dụ: chúng tôi sẽ thay đổi màu nền và màu văn bản của tiêu đề thứ hai. Viết các dòng sau vào tệp CSS của bạn
chủ yếu. cssh2 { background-color: #607d8b; color: #ffffff; }
Kết quả sẽ giống như thế này
Mã màu
Màu sắc được tạo ra trên màn hình bằng cách trộn các phần khác nhau của màu đỏ, xanh lục và xanh lam [RGB]. Sự kết hợp của màu đỏ, xanh lục và xanh lam có thể được thể hiện bằng CSS theo hai cách. dưới dạng giá trị RGB hoặc dưới dạng giá trị thập lục phân [giá trị hex]. Ký hiệu thập lục phân là phổ biến nhất
Hãy xem ví dụ của chúng tôi với màu nền xanh xám từ phía trên
- Dưới dạng giá trị Hex.
h2 { background-color: #607d8b; color: #ffffff; }
7 - Là giá trị RGB.
h2 { background-color: #607d8b; color: #ffffff; }
8
Trong ký hiệu Hex, hai ký tự đầu tiên đại diện cho kênh màu đỏ, ký tự ở giữa là kênh màu lục và hai ký tự cuối cùng đại diện cho kênh màu xanh lam
Làm việc với mã màu
Thể hiện màu sắc với các giá trị thập lục phân rất phổ biến vì với nó, bạn có thể thể hiện một lượng lớn các kết hợp màu sắc [hơn 16. 7 triệu]. Tuy nhiên, hơi khó để làm việc với họ. Trong hầu hết các trường hợp, bạn sẽ cần một bộ chọn màu
Nếu bạn đang sử dụng Visual Studio Code làm trình chỉnh sửa, bạn có thể mở bộ chọn màu ngay trong tệp CSS của mình. Di chuột qua mã màu và bạn sẽ thấy bộ chọn màu xuất hiện
Công cụ chọn màu trực tuyến
Nếu bạn không có bộ chọn màu được tích hợp trong trình chỉnh sửa của mình, bạn có thể chuyển sang nhiều bộ chọn màu trực tuyến
- Mã màu HTML
- Bộ chọn màu
- Và nhiều thứ khác nữa…
Bảng màu trực tuyến
Trong hầu hết các trường hợp, bạn sẽ cần nhiều hơn một màu cho trang web của mình. Bạn sẽ cần một bảng màu. Chỉ với một công cụ chọn màu đơn giản, khá khó để chọn các màu phối hợp tốt với nhau
Có một số công cụ giúp tìm bảng màu dễ dàng hơn. Đây là vài ví dụ
Bảng màu được xác định trước- Máy làm mát
- màu sắc
- Bảng màu Google
- Kuler - xác định quy tắc màu, kéo núm có mũi tên nhỏ và bạn có năm màu khớp với nhau
- Paletton - một bộ điều khiển tinh vi để tìm bảng màu
- ColourCode - một trình tạo bảng màu thực tế khác
Quy tắc CSS
Bạn đã thấy cách các quy tắc CSS có thể thay đổi màu của phần tử HTML. Hãy xem xét kỹ hơn cách các quy tắc CSS được xây dựng
Quy tắc CSS bao gồm ba thành phần, bộ chọn, thuộc tính và giá trị
Quy tắc này nói rằng tất cả các phần tử
h2 { background-color: #607d8b; color: #ffffff; }9 sẽ có màu nền là
h2 { background-color: #607d8b; color: #ffffff; }7
Bộ chọn CSS
Bộ chọn cho biết quy tắc CSS được áp dụng cho các phần tử HTML nào
Ghi chú. Chúng tôi sẽ chỉ tìm hiểu các bộ chọn quan trọng nhất. Bạn sẽ tiến khá xa với những. Để có danh sách mở rộng hơn, hãy tìm kiếm trên internet cụm từ "CSS selectors. "
Bộ chọn loại
Bộ chọn loại nhắm mục tiêu tất cả các phần tử có thẻ HTML cụ thể. Ví dụ: nếu chúng tôi muốn giải quyết tất cả các phần tử
p, .red, #sub, div a:link { color: #f00; }31, điều này sẽ giống như sauCSS
p, .red, #sub, div a:link { color: #f00; }3HTML
p, .red, #sub, div a:link { color: #f00; }5
Bộ chọn lớp
Bộ chọn lớp được sử dụng rất thường xuyên. Chúng cụ thể hơn một chút so với bộ chọn loại, vì chúng nhắm mục tiêu một nhóm phần tử cụ thể thay vì tất cả các phần tử của một loại
Để sử dụng bộ chọn lớp, hãy thêm thuộc tính
p, .red, #sub, div a:link { color: #f00; }32 vào một phần tử và đặt cho nó một giá trị tùy ý. Trong CSS, giờ đây bạn có thể xử lý tất cả các phần tử có cùng thuộc tính
p, .red, #sub, div a:link { color: #f00; }32. Các lớp được biểu thị bằng dấu chấm trước, theo sau là giá trị
p, .red, #sub, div a:link { color: #f00; }32
Trong ví dụ sau, bộ chọn lớp nhắm mục tiêu tất cả các phần tử có thuộc tính
p, .red, #sub, div a:link { color: #f00; }32 với giá trị
p, .red, #sub, div a:link { color: #f00; }36CSS
th, td, p.red, div#firstred { color: red; }1HTML
th, td, p.red, div#firstred { color: red; }2
Trong HTML này, quy tắc CSS sẽ được áp dụng cho phần tử
p, .red, #sub, div a:link { color: #f00; }31 thứ nhất và thứ ba. Như bạn có thể thấy, một mục cũng có thể có nhiều lớp [
p, .red, #sub, div a:link { color: #f00; }36 và
p, .red, #sub, div a:link { color: #f00; }39], được phân tách bằng dấu cách
Bộ chọn ID
Bộ chọn id rất giống với bộ chọn lớp. Họ chọn tất cả các thành phần HTML có thuộc tính
p, .red, #sub, div a:link { color: #f00; }50 với một giá trị cụ thể. Id được biểu thị bằng dấu thăng đứng đầu [_______251], theo sau là giá trị thuộc tính
p, .red, #sub, div a:link { color: #f00; }50
Sự khác biệt quan trọng đối với bộ chọn lớp là bộ chọn ID chỉ xuất hiện một lần trên mỗi trang HTML, trong khi một lớp có thể được sử dụng cho bất kỳ số lượng phần tử nào
Trong ví dụ sau, bộ chọn ID chọn phần tử có thuộc tính
p, .red, #sub, div a:link { color: #f00; }50 với giá trị
p, .red, #sub, div a:link { color: #f00; }54CSS
th,1HTML
td,
p.red,
div#firstred
{
color: red;
}
th,2
td,
p.red,
div#firstred
{
color: red;
}
Thêm bộ chọn
Có thêm một vài bộ chọn [Google là bạn của bạn]. Nhưng điều quan trọng nhất một lần được mô tả ở trên
Thuộc tính CSS
Các quy tắc CSS xác định cách hiển thị các phần tử HTML. Có nhiều thuộc tính có thể được định nghĩa trong CSS. Hai trong số chúng ta đã thấy,
p, .red, #sub, div a:link { color: #f00; }55 và
p, .red, #sub, div a:link { color: #f00; }56
Tôi sẽ không giải thích thêm về nhiều thuộc tính CSS ở đây. Nhưng tôi muốn chỉ ra cách bạn có thể tự học thêm kiến thức CSS. Sẽ có ý nghĩa hơn khi bạn tìm hiểu chúng khi bạn thực sự có nhu cầu cụ thể về chúng. Có hai kịch bản về cách tiến hành
Trường hợp 1. Bạn nhìn thấy một thuộc tính CSS mà bạn không biết…
… tìm kiếm tài sản trên internet. Sử dụng tên chỗ nghỉ cùng với
p, .red, #sub, div a:link { color: #f00; }57 làm cụm từ tìm kiếm của bạn. Bạn có thể thử ngay bây giờ bằng cách tìm hiểu xem quy tắc CSS sau đây làm gì
th,6
td,
p.red,
div#firstred
{
color: red;
}
Sử dụng
p, .red, #sub, div a:link { color: #f00; }58 làm cụm từ tìm kiếm của bạn. Không chỉ giải quyết cho kết quả tìm kiếm đầu tiên mà hãy mở 5 kết quả đầu tiên trở lên. Sau đó quyết định trang web nào bạn muốn đọc chi tiết
Hãy thử áp dụng quy tắc CSS này cho phần tử
p, .red, #sub, div a:link { color: #f00; }59 trong dự án danh mục đầu tư của bạn
Trường hợp 2. Bạn muốn thay đổi một cái gì đó nhưng bạn không biết thuộc tính CSS…
… tìm kiếm trên internet những gì bạn muốn làm cùng với từ khóa ________ 257 trong cụm từ tìm kiếm của bạn. Bạn có thể sẽ cần thử vài lần trước khi tìm thấy những gì bạn đang tìm kiếm
Một ví dụ. Giả sử bạn muốn thay đổi kích thước văn bản. Trong trường hợp này, hãy sử dụng
th, td, p.red, div#firstred { color: red; }11 làm cụm từ tìm kiếm. Xin nhắc lại, đừng chỉ giải quyết cho kết quả tìm kiếm đầu tiên
Giá trị CSS
Chúng tôi đã thấy một vài giá trị CSS. Ví dụ: các giá trị thập lục phân như
th, td, p.red, div#firstred { color: red; }12 hoặc thông số kích thước như
th, td, p.red, div#firstred { color: red; }13. Tùy thuộc vào thuộc tính CSS, đôi khi bạn phải sử dụng các từ cụ thể như
th, td, p.red, div#firstred { color: red; }14 hoặc
th, td, p.red, div#firstred { color: red; }15 để căn chỉnh văn bản chẳng hạn
Một trong những giá trị CSS được sử dụng thường xuyên nhất là thông số kích thước. Do đó, chúng tôi sẽ xem xét chúng chi tiết hơn
Thường thì kích thước được xác định bằng pixel, được viết tắt là
th, td, p.red, div#firstred { color: red; }16
Web Portfolio of Marco0Web Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
Một khả năng khác là chỉ ra kích thước theo tỷ lệ phần trăm. Tỷ lệ phần trăm luôn liên quan đến phần tử gốc. Trong ví dụ sau, nếu cha mẹ của
p, .red, #sub, div a:link { color: #f00; }31 kéo dài toàn bộ chiều rộng của màn hình, thì
p, .red, #sub, div a:link { color: #f00; }31 sẽ bằng 60% chiều rộng đó
Web Portfolio of Marco1Web Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
Một đơn vị phổ biến khác cho kích thước là
th, td, p.red, div#firstred { color: red; }19. Một
th, td, p.red, div#firstred { color: red; }19 luôn liên quan đến kích thước phông chữ. Điều này có nghĩa là nếu bạn thay đổi kích thước phông chữ thì kích thước của một
th, td, p.red, div#firstred { color: red; }19 cũng sẽ thay đổi
Một ví dụ. Nếu một phần tử có kích thước phông chữ là
th, td, p.red, div#firstred { color: red; }22 và chiều rộng là
th, td, p.red, div#firstred { color: red; }23, thì chiều rộng của phần tử đó sẽ là
th, td, p.red, div#firstred { color: red; }24
Web Portfolio of Marco2Web Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
Bộ chọn lớp trong danh mục đầu tư của chúng tôi
Giả sử chúng ta muốn mở rộng tiêu đề chính “Web Portfolio of Marco”. Điều đó rõ ràng là có thể thực hiện được bằng cách xác định quy tắc CSS cho phần tử
th, td, p.red, div#firstred { color: red; }25 như thế này
Web Portfolio of Marco3Web Portfolio of Marco
Welcome!
Thanks for stopping by.
Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.
Marco :-]
Vấn đề với điều này là tất cả các yếu tố
th, td, p.red, div#firstred { color: red; }25 trên toàn bộ trang web của chúng tôi sẽ được mở rộng. Nhưng nếu chúng ta chỉ muốn phóng to tiêu đề đầu tiên, tốt hơn chúng ta nên sử dụng bộ chọn lớp
Để làm điều này, chúng tôi thêm thuộc tính lớp vào phần tử
th, td, p.red, div#firstred { color: red; }25 trong HTML. Ta có thể gán bất kỳ giá trị nào cho lớp đó, tôi chọn giá trị
th, td, p.red, div#firstred { color: red; }28