Nếu bạn đang muốn áp dụng các quy tắc về phong cách cho trang web của mình, thì bộ chọn là tài nguyên được chỉ định. Có một số loại bộ chọn, một số trong đó phổ biến hơn. Vì điều này ngày hôm nay Chúng tôi cho bạn biết bộ chọn thuộc tính trong CSS là gì, để bạn có thể tận dụng tối đa các công cụ này.
Sử dụng CSS, bạn có thể sử dụng một số tùy chọn sẽ giúp ích rất nhiều cho bạn trong việc trình bày trang web của mình. Bộ chọn thuộc tính Chúng sẽ dùng để phân định các phần tử và giúp công việc tùy chỉnh trở nên dễ dàng hơn. Mặc dù chủ đề này có thể phức tạp đối với những người không liên quan đến nó nhưng việc tìm hiểu về nó có thể mở ra nhiều cánh cửa cho bạn.
CSS có nghĩa là gì?
Nếu bạn quan tâm đến thế giới thiết kế web, bạn sẽ thường xuyên nghe thấy thuật ngữ này. Cascading Style Sheets (CSS) là ngôn ngữ lập trình cho phép bạn tạo và sửa đổi tài liệu HTML một cách nhanh chóng và dễ dàng. Điều này có nghĩa rằng đó là ngôn ngữ mà bạn có thể quản lý thiết kế, thực hiện các thay đổi, trình bày, cải tiến và cá nhân hóa các trang web. Tên của nó xuất phát từ việc nó cho phép bạn tính toán các thuộc tính được kế thừa từ người khác trên nhiều trang tính. Trong thiết kế web, nó được gọi là thác nước.
Bộ chọn thuộc tính trong CSS là gì?
Bộ chọn CSS Chúng là những công cụ bạn sử dụng để xác định phong cách bạn muốn cung cấp cho các thành phần CSS của mình. Có nhiều loại bộ chọn trong ngôn ngữ này, mỗi loại có cú pháp và tiện ích riêng. Sử dụng các quy tắc lập trình chính xác sẽ giúp trình duyệt áp dụng các thuộc tính nhất định cho các phần tử được chỉ định.
Về phần mình, Bộ chọn thuộc tính là một trong những loại bộ chọn chúng ta có trong CSS. Chúng rất hữu ích, mặc dù đôi khi không được biết đến nhiều như các bộ chọn phổ biến khác như bộ chọn lớp hoặc thẻ. Bộ chọn CSS được sử dụng để chỉ định trường nào chúng tôi muốn áp dụng kiểu.
Trong CSS, bộ chọn dùng để phân định các thành phần HTML của trang web mà chúng ta muốn áp dụng một kiểu. CSS có nhiều bộ chọn cho phép bạn chọn các phần tử với độ chính xác cao khi áp dụng phong cách. Những cái gọi là bộ chọn thuộc tính này đảm bảo rằng bạn chọn các phần tử HTML dựa trên thuộc tính và/hoặc giá trị của chúng.
Các loại bộ chọn thuộc tính là gì?
[tên_thuộc tính] chọn các phần tử có thuộc tính có tên attribute_name được đặt bất kể giá trị của nó.
[thuộc tính_name=giá trị] chọn các phần tử có thuộc tính có tên attribute_name được đặt thành giá trị bằng value.
[tên_thuộc tính~=giá trị] chọn các phần tử có thuộc tính được gọi là attribute_name và ít nhất một trong các giá trị thuộc tính là value.
[tên_thuộc tính|=giá trị], chọn các phần tử có thuộc tính được gọi là tập hợp attribute_name.
[thuộc tính_name$=giá trị] Chọn các thẻ có thuộc tính kết thúc bằng giá trị này.
[tên_thuộc tính^=giá trị] Chọn các thẻ có thuộc tính bắt đầu bằng giá trị này.
Làm thế nào để liên kết chữ hoa và chữ thường?
Nếu bạn muốn liên kết các giá trị của các thuộc tính Không phân biệt chữ hoa chữ thường, bạn có thể sử dụng giá trị "i" trước dấu ngoặc đóng. Cờ này yêu cầu trình duyệt khớp với tất cả các ký tự ASCII, bất kể chúng là chữ hoa hay chữ thường. Nếu không có cờ này, các giá trị sẽ được nối theo nguyên tắc ngôn ngữ phân biệt chữ hoa chữ thường của tài liệu. HTML phân biệt chữ hoa chữ thường.
Toán tử chọn thuộc tính là gì?
Chúng ta có thể sử dụng một số toán tử cho bộ chọn thuộc tính chưa được biết đến nhiều và điều đó cho phép chúng tôi tinh chỉnh đáng kể diện mạo của một số giá trị nhất định trong các thuộc tính được tư vấn.
Đây là các toán tử có sẵn trong bộ chọn thuộc tính
*= (có chứa): Toán tử * cho phép bạn chọn các phần tử có một chuỗi cụ thể làm giá trị của thuộc tính ít nhất một lần.
^= (xảy ra ở đầu giá trị thuộc tính): Chọn các phần tử có thuộc tính có giá trị bắt đầu bằng một chuỗi cụ thể.
$= (xảy ra ở cuối giá trị thuộc tính): Chọn các phần tử có thuộc tính có giá trị kết thúc bằng một chuỗi cụ thể.
~= (chứa một từ chính xác hoặc cách nhau bằng dấu cách): Chọn các phần tử có giá trị thuộc tính có nội dung khớp chính xác với một chuỗi được chỉ định hoặc chứa một từ được phân tách bằng dấu cách bằng một chuỗi được chỉ định.
|= (chứa từ chính xác hoặc được phân tách bằng dấu gạch nối): Tương tự như trên nhưng có thể phân tách từ bằng dấu gạch nối thay vì dấu cách.
Làm cách nào để sử dụng bộ chọn trong CSS?
Có hai cách để sử dụng bộ chọn trong CSS. Nếu bạn có mã HTML và mã CSS trong cùng một tài liệu, Tất cả những gì bạn cần làm là thêm bộ chọn CSS vào phần đầu trang web của bạn.
Mặt khác, nếu HTML và CSS của bạn nằm trong các tài liệu riêng biệt, bạn có thể có một tài liệu có tên là index.html và một tài liệu khác có tên style.css. Tệp index.html phải bao gồm một dòng mã gọi tệp CSS để các kiểu hiển thị chính xác trên trang web của bạn.
Chúng ta tìm thấy những loại bộ chọn nào khác trong CSS?
Có nhiều nhóm bộ chọn khác nhau. Hãy nhận biết loại bộ chọn bạn cần sẽ giúp bạn sử dụng công cụ lý tưởng cho dự án của bạn. Đó là lý do tại sao chúng tôi chỉ cho bạn một số điều dưới đây:
Bộ chọn loại, lớp và mã định danh
Nhóm này bao gồm bộ chọn hạn chế phần tử HTML, giống như một tập tin. Nó cũng chứa các bộ chọn hạn chế một lớp hoặc mã định danh.
Lớp giả và phần tử giả
Nhóm bộ chọn này bao gồm các lớp giả, chúng Chúng định dạng các trạng thái cụ thể của một phần tử. Ví dụ: lớp giả di chuột chỉ chọn một phần tử khi chuột di chuột qua nó. Cũng bao gồm các phần tử giả chọn một phần cụ thể của phần tử thay vì chính phần tử đó
Bộ kết hợp
Thông qua loạt bộ chọn này các bộ chọn khác được kết hợp, với mục đích tách các phần tử khác nhau của tài liệu của chúng tôi.
bộ chọn đa năng
Tự động có dấu hoa thị (*) là biểu tượng bộ chọn phổ quát, chọn tất cả các thành phần của một tài liệu nhất định.
bộ chọn ID
Loại này đạt được với mục tiêu lựa chọn các phần tử dựa trên thuộc tính ID.
Nếu bạn đang tìm cách kiểm soát mọi thứ diễn ra trên một trang web, chắc chắn cách tốt nhất để có được nó là thông qua thiết kế của riêng bạn. Đối với họ, bạn có thể sử dụng các công cụ như bộ chọn thuộc tính. Vì thế Nếu bạn đang thắc mắc bộ chọn thuộc tính trong CSS là gì, Trong bài viết này chúng tôi hy vọng đã cho bạn câu trả lời. Nếu bạn nghĩ rằng chúng tôi đã bỏ sót điều gì đó quan trọng, hãy cho chúng tôi biết trong phần nhận xét.
