Có bao nhiêu phần của CSS?

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ó bao nhiêu phần của CSS?
Có bao nhiêu phần của CSS?

Christopher Robbins / Photodisc / Getty Images

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 Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

Marco :-)

6. Chúng tôi sẽ liên kết đến tệp CSS từ bên trong tệp HTML

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 Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

Marco :-)

7

Có bao nhiêu phần của CSS?

Bây giờ hãy mở



  
    
    
    Web Portfolio of Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

Marco :-)

8 của bạn và thêm phần tử


  
    
    
    Web Portfolio of Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

Marco :-)

9 vào bên trong phần tử
h2 {
  background-color: #607d8b;
  color: #ffffff;
}
0. Với phần tử


  
    
    
    Web Portfolio of Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

Marco :-)

9, chúng tôi yêu cầu trang HTML tải tệp CSS

Liên kết đến tệp CSS
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 Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

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 Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

Marco :-)

7 và nó nằm trong thư mục gốc của chúng tôi. Với
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. css
h2 {
  background-color: #607d8b;
  color: #ffffff;
}

Kết quả sẽ giống như thế này

Có bao nhiêu phần của CSS?

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ó bao nhiêu phần của CSS?

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
Máy tạo bảng màu
  • 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ị

Có bao nhiêu phần của CSS?

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

CSS
p, .red, #sub, div a:link { color: #f00; }
3
HTML
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; }
36

CSS
th, td, p.red, div#firstred { color: red; }
1
HTML
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; }
54

CSS
th,
td,
p.red,
div#firstred
{
color: red;
}
1
HTML
th,
td,
p.red,
div#firstred
{
color: red;
}
2

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,
td,
p.red,
div#firstred
{
color: red;
}
6

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 Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

Marco :-)

0

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 Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

Marco :-)

1

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 Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

Marco :-)

2

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 Marco
  
  
    

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.

Có bao nhiêu phần của CSS?

Marco :-)

3

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

Các phần của CSS là gì?

Một quy tắc CSS bao gồm hai phần chính. bộ chọn ('h1') và phần khai báo ('màu. đỏ') . Trong HTML, tên phần tử không phân biệt chữ hoa chữ thường nên 'h1' hoạt động tốt như 'H1'. Tuyên bố có hai phần. tên thuộc tính ('màu') và giá trị thuộc tính ('đỏ').

3 kiểu CSS là gì?

Có 3 phương pháp riêng biệt để tạo kiểu trong CSS, Kiểu cục bộ, Kiểu cấp độ trang và Kiểu bên ngoài

Có bao nhiêu phần tử trong CSS?

W3Schools liệt kê 228 trong số đó. HTML Dog liệt kê 125 . Niên giám của chúng tôi có 176, và tôi biết chúng tôi cố tình bỏ qua những thứ (e. g. chúng tôi gửi lề trái dưới lề thay vì tạo mục nhập của riêng mình).

3 phần chính của cú pháp mã CSS là gì?

Cú pháp CSS bao gồm một bộ quy tắc. Các quy tắc này có 3 phần. bộ chọn, thuộc tính và giá trị .