CSS-selector, và vai trò của nó trong định dạng html-tài liệu

Tạo một trang web và điền nó với một số yếu tố của trang web, mọi người sẽ phải đối mặt với hạn như CSS-selector. Nó phục vụ để xác định chính xác hơn tất cả các yếu tố của html-file thiết kế và vị trí của họ trên trang. Để làm điều này, tạo ra một CSS-một tài liệu giải thích rõ ràng selectors nhất định và tùy chọn định dạng của họ: màu sắc, kích thước, vị trí và khác. Mỗi nhà thiết kế web nên biết và có thể nhập đúng các lựa chọn mong muốn. Họ được chia theo loại, chính trong đó chúng tôi thảo luận dưới đây.

Loại selectors trong CSS

Tùy thuộc vào yếu tố nào được áp dụng định dạng HTML, CSS-selector có thể liên quan đến một trong các nhóm sau:

• tag chọn;
• lớp chọn;
• id-selector;
• thuộc tính chọn.

selector Tag

Nó cũng được gọi là "loại selector" hay "yếu tố", đó là đơn giản nhất và phổ biến. Như CSS-tài liệu của ông là tên của các yếu tố của html-file, mà chúng tôi mô tả. Ví dụ, nếu chúng ta cần phải thiết lập các kiểu đoạn văn, chúng tôi xác định các thuộc tính và giá trị của họ cho các phần tử p {background: x; màu: y; kích thước: z}. Trong trường hợp này, tất cả các đoạn văn bản của trang web sẽ có dạng tương tự (màu nền, kích thước văn bản, và vân vân. D.).

selector lớp

Và nếu bạn cần phải hỏi mỗi đoạn của bạn là khác nhau từ phong cách khác? Để làm điều này, có một bộ chọn lớp.

CSS-tài liệu trong trường hợp này sẽ chứa một mục có dạng sau: p.first {color: x; font-size: y}. Do đó, chúng tôi xác định các tính chất của "màu" và "kích thước" chỉ cho đoạn lớp đầu tiên.

Trong một html-tài liệu trong trường hợp này bước vào một thuộc tính lớp với tên của phong cách đầu tiên. Lớp học có thể càng nhiều càng tốt các phong cách bạn muốn áp dụng cho một thành phần của trang web.

id Selector

Thường có nhu cầu để xác định một phong cách chính xác hơn, ví dụ như đối với bất kỳ một yếu tố của trang, hoặc lấy mẫu chúng. Trong tình huống này, sự trợ giúp đến id-selector. Các tập tin html gán một tên mục mong muốn xác định nó trong số những người khác. Ví dụ, các yếu tố mà chúng tôi muốn thiết lập khác nhau từ phong cách khác sẽ là tiêu đề bài viết.

Sau đó, trong một html-văn bản giao cho các định danh h1 header, articlename như vậy. Và trong CSS-file, xác định kiểu, thêm vào tên ID lưới tản nhiệt: #articlename {color: blue; text-align: center}. Bây giờ tít của chúng tôi sẽ có màu xanh và làm trung tâm.

Mỗi phòng trong số các loại trên có thể được mô tả như "một đơn giản CSS-selector". Họ xác định định dạng cho một tham số cụ thể của html-tài liệu: hợp các yếu tố tương tự (ví dụ, tất cả các đoạn văn của bài báo), một lớp (ví dụ, chỉ có đoạn đầu tiên) hoặc một mục cụ thể (ví dụ, tiêu đề bài viết).

thuộc tính selectors

Ngoài việc trên, có một CSS-selectors thuộc tính - phương pháp phức tạp hơn các phong cách ứng dụng. Nó cho phép các yếu tố định dạng html trên thuộc tính hoặc giá trị được chọn. Có một số loại selector này:

• bởi sự hiện diện của thuộc tính;
• theo giá trị chính xác của nó;
• bởi giá trị thuộc tính cục bộ;
• về giá trị cụ thể của nó.

Chúng ta hãy xem xét mỗi một trong các loài:

1. Trường hợp đầu tiên. Định dạng được áp dụng, nếu hiện diện trong một thuộc tính html-code cụ thể (có thể là một p, div, tiêu đề, vv). Nếu nó không phải là, nó sử dụng một chung cho tất cả các yếu tố của phong cách. Ví dụ, đối với các yếu tố có danh hiệu (công cụ mũi).
2. Trường hợp thứ hai. Phong cách chỉ áp dụng cho html-yếu tố mà có một kết hợp chính xác các giá trị thuộc tính. Ví dụ, để nhập các yếu tố, trong đó giá trị của thuộc tính type bằng nộp.
3. Trường hợp thứ ba. Theo định dạng sẽ chỉ bao gồm các mục trong danh sách các giá trị mà có một từ nào đó. Ví dụ, sideBar thuộc tính "đẳng cấp" cho các yếu tố div.
4. Trường hợp thứ tư. Phong cách được định nghĩa chỉ dành cho những yếu tố của html-tài liệu, có thuộc tính cụ thể có một giá trị nhất định, và bắt đầu với anh ta. Ví dụ, việc sử dụng màu sắc quy định cho tất cả các yếu tố mà các thuộc tính ngôn ngữ tiếng Anh (có thể en, en-rus, en-au và t. D.).

Do đó, bằng cách sử dụng một hay khác, bộ chọn CSS, có thể tốt nhất được quy định như toàn bộ một trang web, và mô tả một số yếu tố của nó.