Computer >> Máy Tính >  >> Lập trình >> CSS

Bộ chọn CSS:Hướng dẫn Cách thực hiện

Bộ chọn CSS chọn các phần tử mà bạn có thể áp dụng kiểu. Bộ chọn cơ bản nhất là bộ chọn phần tử, chọn một phần tử theo tên của nó. Các bộ chọn khác bao gồm bộ chọn id, lớp, phổ quát và con cháu.

Bộ chọn là một trong hai phần của bất kỳ câu lệnh CSS nào. Bộ chọn được sử dụng để nhắm mục tiêu các phần tử trên trang HTML cho một kiểu nhất định.

Có một loạt các bộ chọn CSS có thể được sử dụng để nhắm mục tiêu chính xác các phần tử trên trang web và cho phép bạn tùy chỉnh ở mức độ cao khi bạn đang thiết kế.

Hướng dẫn này sẽ khám phá những điều cơ bản về bộ chọn trong CSS cách bạn có thể tận dụng các bộ chọn được sử dụng phổ biến nhất trong mã của mình.

Bộ chọn CSS

Bộ chọn CSS xác định các phần tử HTML mà bạn muốn áp dụng kiểu CSS. Người chọn có thể chọn các phần tử dựa trên tên, ID, lớp và các thuộc tính khác của chúng. Các bộ chọn xuất hiện trước một cặp dấu ngoặc trong quy tắc CSS.

Trong CSS, các quy tắc được sử dụng để xác định các kiểu sẽ áp dụng cho một phần tử hoặc một loạt các phần tử. Quy tắc có hai thành phần:bộ chọn và khai báo.

Đây là một ví dụ về quy tắc trong CSS:

h1 {
	color: pink;
}

Quy tắc CSS này đặt màu của tất cả các phần tử h1 trên trang web thành màu hồng. Hai thành phần của quy tắc của chúng tôi là:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

  • h1 , là yếu tố mà phong cách của chúng tôi được áp dụng. Đây được gọi là bộ chọn.
  • màu:hồng , là kiểu được áp dụng cho các phần tử trong bộ chọn của chúng tôi. Đây được gọi là một khai báo. Trong ví dụ này, chúng tôi thay đổi màu của tất cả các phần tử h1 thành màu hồng.

Bộ chọn CSS là một phần cơ bản của việc thiết kế các kiểu web. Các bộ chọn cho phép bạn cho trình duyệt biết các phần tử nào nên sử dụng một kiểu cụ thể. Ví dụ:bạn có thể có một bộ chọn hướng dẫn trình duyệt tạo kiểu cho tất cả

phần tử hoặc tất cả

trên một trang web.

Các loại bộ chọn CSS

CSS cung cấp một loạt các bộ chọn. Hãy để chúng tôi khám phá một ví dụ về các bộ chọn chính mà bạn có thể gặp phải khi thiết kế các quy tắc CSS.

Bộ chọn dựa trên yếu tố CSS

Bộ chọn dựa trên phần tử cho phép bạn áp dụng một kiểu cho tất cả các trường hợp của một phần tử trong tài liệu tương ứng với một quy tắc. Ví dụ:bạn có thể sử dụng bộ chọn phần tử để áp dụng một kiểu cho tất cả

trên một trang.

Giả sử chúng ta muốn thay đổi màu của tất cả văn bản dựa trên đoạn văn trên một trang web thành màu xám. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

p {
	color: gray;
}

Các khai báo bên trong bộ chọn “p” của chúng tôi sẽ được áp dụng cho mọi đoạn văn (HTML

) trên trang web của chúng tôi.

Bộ chọn id CSS

Bộ chọn id CSS chọn một phần tử HTML trên một trang dựa trên ID của nó. Các ID HTML là duy nhất nên bộ chọn id được sử dụng để áp dụng các kiểu cho một phần tử duy nhất trên trang web. Cú pháp cho bộ chọn ID là một dấu thăng theo sau là ID phần tử.

Giả sử chúng ta muốn đặt giá trị của thuộc tính CSS height của một phần tử có tên là “box9” trên trang của chúng ta thành 150px. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

#box9 {
	height: 150px;
}

Quy tắc này sẽ đặt chiều cao của phần tử có id “box9” thành 150px.

Bộ chọn lớp CSS

Bộ chọn lớp CSS tìm các phần tử có thuộc tính lớp cụ thể. Cú pháp của bộ chọn lớp là dấu chấm (.) Và sau đó là tên của lớp bạn muốn chọn.

Vì vậy, nếu bạn muốn nhắm mục tiêu lớp “boxMiddle”, bạn sẽ sử dụng bộ chọn “.boxMiddle”.

Hãy để chúng tôi nói rằng chúng tôi đang thiết kế một hộp trên trang web của chúng tôi. Hộp phải có màu nền hồng. Hộp của chúng ta đã được gán lớp “pinkBox”, lớp này chúng ta có thể áp dụng các kiểu của mình. Đây là mã chúng tôi sẽ sử dụng để đặt màu của các phần tử có lớp pinkBox thành màu hồng:

.pinkBox {
	color: pink;
}

Mọi phần tử trên trang web có lớp “pinkBox” sẽ được đặt thành màu hồng.

Ngoài ra, bạn cũng có thể chỉ định rằng chỉ các phần tử cụ thể với một lớp cụ thể mới bị ảnh hưởng bởi một kiểu. Bằng cách chỉ sử dụng một bộ chọn lớp, mọi phần tử có một lớp cụ thể sẽ bị ảnh hưởng bởi kiểu bạn xác định.

Nếu chúng ta sử dụng một bộ chọn lớp đứng trước một kiểu phần tử, chúng ta có thể chỉ áp dụng một kiểu cho các phần tử cụ thể với một lớp nhất định. Giả sử chúng ta muốn màu nền của mọi HTML

với lớp “pinkBox” được đặt thành màu hồng. Kiểu cho điều này sẽ như sau:

div.pinkBox {
	color: pink;
}

Kiểu này sẽ chỉ được áp dụng cho mọi

gắn thẻ với lớp “pinkBox”.

Bộ chọn chung CSS

Bộ chọn phổ quát CSS chọn tất cả các phần tử trên một trang web. Bộ chọn được biểu thị bằng dấu hoa thị (*), theo sau là không có tên phần tử. Nó thường được sử dụng để đặt lề hoặc phông chữ mặc định cho một trang web.

Giả sử chúng ta muốn tất cả các phần tử trên một trang web được căn chỉnh cho chính giữa trang. Chúng tôi có thể sử dụng mã sau để áp dụng kiểu này cho trang web của mình:

* {
	text-align: center;
}

Quy tắc này áp dụng "text-align:center;" phong cách cho mọi mục trên trang web.

Bộ chọn hậu duệ của CSS

Các bộ chọn hậu duệ CSS chọn một phần tử là con của một phần tử khác mà một loạt các kiểu sẽ được áp dụng. Cú pháp là chỉ định một phần tử, theo sau là dấu cách, theo sau là phần tử con mà bạn muốn chọn.

Giả sử bạn muốn đặt màu nền của tất cả các liên kết trong danh sách thành màu vàng. Tuy nhiên, bạn không muốn phong cách này ảnh hưởng đến bất kỳ liên kết nào khác trên trang web. Bạn có thể làm như vậy bằng cách sử dụng mã này:

li a {
	background-color: yellow;
}

Kiểu này sử dụng bộ chọn con cháu “li a”. Điều này có nghĩa là kiểu mà chúng tôi đã tạo sẽ chỉ được áp dụng cho tất cả các thẻ trong HTML

  • nhãn. Phong cách của chúng tôi sẽ không áp dụng cho bất kỳ nào khác các thẻ xuất hiện trên trang web của chúng tôi.

    Danh sách bộ chọn CSS

    Nếu bạn có nhiều phần tử cần áp dụng một kiểu cụ thể, bạn có thể sử dụng danh sách bộ chọn. Danh sách bộ chọn áp dụng quy tắc cho tất cả các bộ chọn riêng lẻ trong danh sách.

    Giả sử chúng ta có hai quy tắc CSS với các quy tắc kiểu giống nhau. Những điều này như sau:

    h2 {
    	text-align: center;
    }
    
    .alignCenter {
    	text-align: center;
    }

    Chúng tôi có thể làm cho mã của mình dễ đọc hơn bằng cách kết hợp hai quy tắc này vào một danh sách bộ chọn. Chúng tôi có thể làm như vậy bằng cách thêm dấu phẩy vào giữa các kiểu của mình:

    h2, .alignCenter {
    	text-align: center;
    }

    Mã này hoạt động theo cách tương tự như ví dụ đầu tiên của chúng tôi. Tuy nhiên, ví dụ thứ hai của chúng tôi sử dụng danh sách bộ chọn giúp mã của chúng tôi ngắn gọn hơn.

    Bộ chọn nhóm CSS

    Bộ chọn nhóm CSS áp dụng một tập hợp các kiểu cho nhiều bộ chọn. Nó được sử dụng để giảm sự lặp lại và giúp bạn viết mã rõ ràng hơn. Cú pháp là một tập hợp các bộ chọn phần tử được phân tách bằng dấu phẩy, theo sau là các quy tắc CSS mà bạn muốn áp dụng cho các phần tử.

    Giả sử chúng tôi đang thiết kế một trang web sử dụng các kiểu sau:

    h1 {
    	text-align: center;
    	font-size: 32px;
    	font-weight: normal;
    }
    
    h2 {
    	text-align: center;
    	font-size: 24px;
    	font-weight: normal;
    }
    
    h3 {
    	text-align: center;
    	font-size 18px;
    	font-weight: normal;
    }

    Trong mã này, "font-weight:normal;" và “text-align:center;” phong cách được chia sẻ bởi tất cả các bộ chọn. Để giảm sự lặp lại trong mã của chúng tôi, chúng tôi có thể nhóm các kiểu này lại với nhau bằng cách sử dụng bộ chọn nhóm. Đây là mã chúng tôi sẽ sử dụng để thực hiện nhiệm vụ này:

    h1, h2, h3 {
    	text-align: center;
    	font-weight: normal;
    }
    
    h1 {
    	font-size: 32px;
    }
    
    h2 {
    	font-size: 24px;
    }
    
    h3 {
    	font-size: 18px;
    }

    Chúng tôi đã nhóm hai trong số các kiểu, text-align và font-weight với nhau, giống nhau trong mọi thẻ. Điều này đã cho phép chúng tôi làm cho mã của mình dễ đọc hơn.



    Kết luận

    Bộ chọn CSS cho phép bạn áp dụng một kiểu cho một phần tử cụ thể hoặc nhiều phần tử trên một trang web. Có rất nhiều bộ chọn do CSS cung cấp. Chúng bao gồm bộ chọn id, bộ chọn lớp và bộ chọn nhóm mà bạn có thể sử dụng để tạo các kiểu CSS chính xác.

    Bài viết này chỉ sơ lược về bề mặt của các bộ chọn trong CSS. Ngoài ra còn có các bộ chọn thuộc tính, lớp giả và phần tử giả, bộ tổ hợp và các bộ chọn khác được sử dụng trong CSS. Nếu bạn đang tìm cách phát triển các quy tắc nâng cao hơn, bạn có thể muốn nghiên cứu sâu hơn về các bộ chọn này.

    Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, cách sử dụng các bộ chọn được sử dụng phổ biến nhất trong CSS. Bây giờ bạn đã có kiến ​​thức cần thiết để bắt đầu sử dụng bộ chọn CSS để tạo kiểu như một chuyên gia.

    Để được tư vấn về các tài nguyên, khóa học và sách học CSS hàng đầu, hãy xem hướng dẫn Cách học CSS của chúng tôi.