Khi sử dụng CSS để tạo kiểu cho các trang web, bạn thường muốn nhắm mục tiêu các phần nhất định trên trang của mình. Một trong những cách bạn có thể chọn một hoặc nhiều phần tử là theo thuộc tính ID và / hoặc Class của chúng.
Khi bạn xem qua hướng dẫn này, hãy kiểm tra Codepen tương tác và chỉ cần chơi cùng tôi!
Bộ chọn thuộc tính ID và CSS
Hãy tiếp tục và tạo một đoạn văn đơn giản, sử dụng thẻ
:
<p> Color this paragraph! </p>
ID là một số nhận dạng duy nhất mà bạn thêm bất kỳ phần tử đơn lẻ nào để nhận dạng duy nhất nó. Nó tuân theo quy ước id =”# NAME”.
Với ý nghĩ đó và vì chúng tôi muốn tô màu cho đoạn văn của mình, hãy đặt tên cho đoạn văn đó bằng một cái tên duy nhất.
<p id="paragraph-colored"> Color this paragraph! </p>
Bây giờ chúng tôi đã có mã nhận dạng duy nhất ID của mình, chúng tôi cần đảm bảo rằng chúng tôi không thêm cùng một ID vào một phần tử khác. Mặc dù trình duyệt sẽ không phàn nàn, nhưng nó sẽ làm mất mục đích và CSS sẽ không hoạt động như dự định.
Với ID của chúng tôi tại chỗ, chúng tôi có thể chọn nó bằng cách sử dụng ký hiệu hashtag # với CSS. Hãy làm cho thẻ p của chúng ta có màu tím:
#paragraph-colored {
color: purple;
} Dễ dàng phải không? &# 128516;
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ọ.
Thuộc tính lớp và Bộ chọn CSS của nó
Tuyệt vời, chúng tôi có đoạn văn của chúng tôi với văn bản màu tím. Bây giờ chúng ta hãy giả sử chúng ta có một loạt các hình ảnh quả bơ bên dưới thẻ p duy nhất của chúng ta:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
Làm thế nào chúng tôi có thể xác định và chọn tất cả những người phát triển bơ này (bất kể điều đó có nghĩa là gì)? Chúng tôi biết rằng chúng tôi không thể sử dụng thẻ ID, bởi vì thẻ đó được sử dụng để xác định duy nhất một mặt hàng. Đây là lúc thuộc tính class phát huy tác dụng.
Thuộc tính class tuân theo quy ước class =”# CLASS_NAME”. Vì nhiều thành viên có thể thuộc về một lớp, nên tất cả các nhà phát triển bơ của chúng tôi có thể được chỉ định một lớp chẳng hạn như:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado" class="avocado-devs">
Tuyệt quá! Hình ảnh quả bơ của chúng tôi đã được gán cho lớp “các nhà phát triển quả bơ”. Bây giờ chúng ta có thể sử dụng bộ chọn lớp CSS được biểu thị bằng một dấu chấm (.) Đơn giản. Hãy tiếp tục và thêm thuộc tính bộ lọc CSS vào các nhà phát triển bơ của chúng tôi. Chúng tôi cho rằng họ đang làm việc vào ban đêm, vì vậy hãy đảo ngược màu sắc của họ 100 phần trăm.
.avocado-devs {
filter: invert(100)
} Với các lớp về cơ bản, chúng ta tạo các nhóm và sau đó với bộ chọn lớp CSS, chúng ta có thể áp dụng các kiểu như chúng ta muốn cho nhóm các phần tử.
Sử dụng Bộ chọn thẻ chung với Bộ chọn loại
Chúng ta thường thấy rằng khi chọn các lớp bằng CSS, tốt hơn là sử dụng các bộ chọn thẻ chung kết hợp với bộ chọn dấu chấm. Tại sao? Bởi vì càng cụ thể chúng tôi cùng với bộ chọn của mình, CSS của chúng tôi sẽ áp dụng tốt hơn nhiều.
Với CSS, chúng tôi sử dụng các bộ chọn thẻ chung bằng cách đề cập đến chúng theo tên thẻ. Vì vậy, ví dụ, đây là tất cả các công cụ chọn thẻ hợp lệ:
/* H1 */
h1{}
/* Paragraphs */
p{ }
Vì vậy, chúng tôi có thể cấu trúc lại bộ chọn hình ảnh của mình bằng cách bao gồm img thẻ chung:
img.avocado-devs {
filter: invert(100)
} Chức năng không thay đổi, nhưng khi mã của bạn phát triển, tính cụ thể này rất quan trọng. Nó cũng sẽ làm cho mã của bạn dễ đọc hơn. Các nhà phát triển khác sẽ thấy rằng lớp butter-devs đề cập đến một hình ảnh.
Điều này rất quan trọng vì ở đây chúng tôi chỉ áp dụng bộ lọc cho những hình ảnh có tên lớp cụ thể. Nếu chúng ta thêm một hình ảnh bơ-dev khác mà không có lớp thích hợp, kiểu này sẽ không áp dụng. Là nhà phát triển web, hành vi có điều kiện này thường là những gì chúng tôi muốn.