Các lớp giả CSS so với các phần tử giả: Tìm hiểu sâu

Maya Patel included in Programming Web Design Css

2023-09-27 2193 words 11 minutes

Contents

CSS hỗ trợ nhiều bộ chọn khác nhau để xác định các thành phần để tạo kiểu, mỗi bộ có bộ quy tắc riêng. Trong khi hầu hết các phương pháp lựa chọn đều đơn giản, các lớp giả và phần tử giả mang lại sự linh hoạt hơn. Chúng cho phép bạn chọn các thành phần dựa trên trạng thái hoặc vị trí của chúng trong cấu trúc hoặc chúng chọn các phần nội dung cụ thể.

Người ta có thể thấy khó khăn khi sử dụng các bộ chọn này một cách hiệu quả vì có khả năng gây nhầm lẫn giữa các lớp giả và các phần tử giả. Làm cách nào để phân biệt giữa hai loại bộ chọn riêng biệt này?

Tìm hiểu các lớp giả CSS

Lớp giả CSS đại diện cho một công cụ sửa đổi tình huống có thể được áp dụng cho bộ chọn, cho phép tạo kiểu cho các phần tử trong các điều kiện cụ thể. Những từ khóa như vậy cho phép nhắm mục tiêu các thành phần dựa trên các lần xuất hiện như di chuột, tương tác nhấp chuột hoặc nhập văn bản trong trường nhập.

Các lớp giả nâng cao khả năng tương tác của trang web bằng cách sửa đổi giao diện hoặc hành vi của các thành phần để đáp ứng với tương tác của người dùng, khi được sử dụng cùng với các bộ chọn CSS khác, cung cấp khả năng kiểm soát tinh tế hơn cả về kiểu dáng và tính tương tác.

Cú pháp và cách sử dụng lớp giả CSS

Cú pháp của một lớp giả CSS bao gồm dấu hai chấm (:) theo sau là chỉ định của một lớp giả, được cấu trúc như sau:

 selector:pseudo-class {
    /* styles */
}

Trong cú pháp này:

Thuật ngữ “bộ chọn” trong CSS dùng để chỉ thành phần hoặc các thành phần cụ thể của tài liệu HTML nhằm nhận các thuộc tính kiểu dáng thông qua việc áp dụng các lớp giả khác nhau. Bộ chọn có thể có nhiều dạng bất kỳ, bao gồm các thẻ HTML riêng lẻ, lớp, ID hoặc thậm chí các lựa chọn tổng hợp bao gồm nhiều tiêu chí. Mặc dù các bộ chọn thường được sử dụng trong các bộ quy tắc CSS, nhưng sự vắng mặt của chúng sẽ dẫn đến việc lớp giả áp dụng các quy tắc kiểu của nó một cách phổ biến trên các phần tử đủ điều kiện.

Trong ngữ cảnh này, một lớp giả đề cập đến một từ khóa biểu thị một điều kiện hoặc trạng thái cụ thể mà người ta muốn tập trung vào và giải quyết.

Các lớp giả trong CSS có thể được phân loại rộng rãi thành nhiều loại khác nhau tùy thuộc vào chức năng và tiêu chí mà chúng đáp ứng, bao gồm:1. Lớp (chung): Các lớp giả này áp dụng cho tất cả các thành phần trong một danh mục hoặc loại cụ thể. Các ví dụ bao gồm di chuột, tiêu điểm và hoạt động.2. Lớp con: Các lớp giả dành riêng cho các danh mục con nhất định của một phần tử. Ví dụ: lượt truy cập chỉ dành cho liên kết.3. Hậu duệ: Các lớp giả chọn các phần tử có hậu duệ với các thuộc tính cụ thể. Một ví dụ sẽ là:first-child.4. Con: Chọn các phần tử là con của phần tử khác. Ví dụ::last-child.5. Anh chị em: Lựa chọn giữa hai hoặc nhiều anh chị em dựa trên vị trí của họ so với nhau

Tương tác người dùng

:bay lượn

Tập lệnh chọn một phần tử được chỉ định khi con trỏ di chuyển qua nó bằng cách sử dụng sự kiện di chuột tích hợp trong JavaScript.

:tích cực

Khi người dùng tương tác với một thành phần giao diện, chẳng hạn như bằng cách nhấp vào nó, hệ thống sẽ chọn thành phần cụ thể đó. Quá trình lựa chọn này cho phép tương tác và thao tác sâu hơn với phần tử đã chọn trong chương trình hoặc ứng dụng.

:đã ghé thăm

Chọn các liên kết mà người dùng đã truy cập.

Cấu trúc

:con đầu lòng

Lặp lại qua từng phần tử con trực tiếp của nút cha đã chỉ định, trả về phần tử gặp phải ban đầu trong chuỗi.

:con cuối cùng

Truy xuất phần tử con cuối cùng trong nút cha đã cho.

:nth-con(n)

Chọn và chọn các phần tử dựa trên vị trí phân cấp của chúng trong thực thể mẹ, cho phép người ta nhắm đến các phần tử con cụ thể.

Liên quan đến biểu mẫu

:tàn tật

Chọn các thành phần biểu mẫu bị vô hiệu hóa.

:đã kiểm tra

Chọn các nút radio hoặc hộp kiểm đã chọn.

Trạng thái thành phần giao diện người dùng

:không hợp lệ

Chọn các thành phần biểu mẫu không hợp lệ.

:yêu cầu

Chọn các trường bắt buộc của các thành phần biểu mẫu.

:không bắt buộc

Chọn các phần tử biểu mẫu là các trường tùy chọn.

Liên quan đến liên kết

:liên kết

Chọn các liên kết chưa được truy cập.

Dựa trên ngôn ngữ

:lang()

Chọn và chọn các thành phần bằng cách sử dụng thông tin ngôn ngữ được cung cấp bởi thuộc tính “lang” của chúng.

Người ta có thể thử nghiệm ứng dụng hiệu ứng di chuột lên hình ảnh trong thư viện, trong đó các lựa chọn phong cách điển hình liên quan đến việc phóng to hoặc làm mờ hình ảnh khi người dùng tương tác thông qua di chuột.

Khám phá các phần tử giả CSS

Việc sử dụng các phần tử giả CSS cung cấp khả năng sử dụng các từ khóa chuyên biệt kết hợp với bộ chọn, cho phép tạo kiểu cho các khía cạnh cụ thể trong nội dung của phần tử hoặc bổ sung tài liệu bổ sung. Những từ khóa như vậy tạo điều kiện thuận lợi cho việc nhắm mục tiêu và tùy chỉnh các phần tử theo thành phần cấu trúc của chúng.

Các phần tử giả cung cấp một phương tiện mạnh mẽ để nâng cao hình thức trực quan và bố cục của các trang web, mô phỏng chức năng của các phần tử HTML truyền thống thông qua các kỹ thuật tạo kiểu. Bằng cách sử dụng các yếu tố này, các nhà thiết kế có thể tạo ra các thiết kế hấp dẫn về mặt hình ảnh trong khi vẫn duy trì tính toàn vẹn về ngữ nghĩa.

Cú pháp và triển khai phần tử giả CSS

Các lớp giả trong CSS sử dụng một cấu trúc ngữ pháp cụ thể, đòi hỏi phải sử dụng hai dấu hai chấm (:::) theo sau là danh pháp của lớp giả. Biểu thức cơ bản có thể được biểu diễn như sau:

 selector::pseudo-element {
    /* styles */
}

Trong cú pháp này:

Lớp giả :: trước hoặc ::after được áp dụng cho một phần tử cụ thể được chỉ định bởi bộ chọn được cung cấp bên trong nó. Bộ chọn có thể đại diện cho bất kỳ quy tắc CSS hợp lệ nào và cũng có thể không bao gồm bộ chọn nào cả.

Phần tử giả, còn được gọi là::pseudo-element hoặc::pseudo, là một quy tắc CSS nhắm mục tiêu vào một phần cụ thể trong cấu trúc của phần tử HTML mà không ảnh hưởng đến bố cục hoặc nội dung của nó. Nó cho phép các nhà phát triển tạo hiệu ứng hình ảnh và tùy chỉnh giao diện người dùng bằng cách thao tác các yếu tố theo những cách sáng tạo. Các phần tử giả thường được sử dụng một mình trong bộ chọn vì mục đích của chúng là sửa đổi hình thức của một phần tử thay vì nhiều phần tử.

Dưới đây là một số phần tử giả:

::trước

Chèn văn bản đã cho vào một vị trí cụ thể trong nội dung của phần tử HTML đã xác định, trước nội dung hiện có của nó.

—|—

::sau đó

Hoạt động này liên quan đến việc chèn tài liệu mới ngay sau văn bản hiện có trong một phần tử HTML được chỉ định, thường được biểu thị bằng tên thẻ hoặc giá trị thuộc tính ID của nó. Quá trình này thường được sử dụng để thêm nội dung bổ sung như hình ảnh, video hoặc thông tin bổ sung vào trang web hiện có mà không cần phải sửa đổi trực tiếp mã nguồn gốc.

::chữ cái đầu tiên

Tô điểm cho ký tự đầu tiên của văn bản được bao bọc trong một thành phần nhất định với các cải tiến về mặt văn phong.

:: lựa chọn

Tô điểm cho đoạn văn bản đã chọn bằng con trỏ của người dùng với vẻ ngoài hấp dẫn.

::đánh dấu

Sửa đổi cách trình bày trực quan của một mục riêng lẻ trong danh sách, chẳng hạn như điều chỉnh hình thức của dấu đầu dòng hoặc chỉ báo số liên quan đến mục đó.

::gợi ý

Sử dụng các cấu hình phong cách theo tín hiệu trong các thành phần đa phương tiện như và, thường được áp dụng cho ngữ cảnh phụ đề và chú thích.

Việc sử dụng các phần tử giả::trước và::after có thể gây khó khăn cho việc hiểu, do đó, việc làm quen với các khái niệm này là điều cần thiết để thành thạo các khía cạnh khác của CSS.

Điểm tương đồng và khác biệt

Các lớp giả và các phần tử giả trong Cascading Style Sheets (CSS) có những điểm tương đồng nhất định, đồng thời cũng thể hiện những khác biệt đáng chú ý.

Lớp giả

Yếu tố giả

—|—|—

Cú pháp

Tiền tố được bắt đầu bằng một dấu hai chấm (:).

Tiền tố có hai dấu hai chấm (::).

Cách sử dụng

Chọn và định dạng các thành phần theo trạng thái hiện tại, vị trí hoặc tương tác của người dùng.

Sử dụng các khía cạnh phong cách của nội dung của một phần tử hoặc tạo các thành phần ảo để nâng cao khả năng trình bày trực quan và trải nghiệm người dùng.

Bộ chọn

Bộ chọn phức hợp hoặc phức hợp có thể chứa danh sách các thành phần được phân tách bằng dấu phẩy và giá trị dấu phẩy động bên trong có thể được chèn vào bất kỳ đâu trong danh sách này.

Câu lệnh đã cho như sau một cách trang nhã: Phần tử cuối cùng của bộ chọn, nó phải đóng vai trò là thành phần cuối cùng của nó khi chỉ xuất hiện một lần.

Chèn nội dung

Chức năng chính của phần tử này là tạo kiểu cho văn bản dựa trên trạng thái hoặc ngữ cảnh hiện tại của nó, thay vì chèn bất kỳ nội dung thực tế nào.

Bạn có khả năng kết hợp tài liệu bổ sung bên trong hoặc gắn nó vào nội dung của một phần tử được chỉ định.

Kiểu chữ

Thường không được sử dụng để tạo kiểu chữ.

Được sử dụng để truyền tải các sắc thái văn bản và kiểu chữ chẳng hạn như kiểu::first-line và::first-letter.

Các bộ phận được nhắm mục tiêu

Nhắm mục tiêu toàn bộ phần tử.

Nhắm mục tiêu các phần cụ thể trong nội dung của một phần tử.

Hỗ trợ trình duyệt

Nói chung là được hỗ trợ tốt.

Khả năng tương thích trình duyệt của trang web này nhìn chung là mạnh mẽ, mặc dù một số trình duyệt lỗi thời nhất định có thể gặp phải chức năng hạn chế.

Các lớp giả và các phần tử giả đóng một vai trò quan trọng trong việc truyền đạt các thuộc tính phong cách đa dạng và các chức năng tương tác cho các trang web thông qua CSS. Mặc dù có những điểm tương đồng nhất định nhưng chúng thể hiện những chức năng đặc biệt liên quan đến thiết kế và phát triển web.

Lớp giả và phần tử giả đang hoạt động

Bạn có thể nâng cao hiểu biết của mình về các lớp và thành phần giả CSS bằng cách áp dụng chúng trong nhiều nỗ lực sáng tạo khác nhau. Một số nhiệm vụ đơn giản có thể được thực hiện bao gồm thiết kế thẻ hồ sơ, tạo menu điều hướng và tinh chỉnh kiểu danh sách, cùng với các khả năng khác. Những hoạt động theo đuổi như vậy mang lại trải nghiệm thực tế cho phép thực hiện thành thạo hơn các khả năng CSS của một người đồng thời mang lại sự năng động và hấp dẫn trực quan cho các sản phẩm kỹ thuật số của họ.