Hướng dẫn what are the 3 elements of css syntax? - 3 yếu tố của cú pháp css là gì?

Tuyên bố CSS

Đặt các thuộc tính CSS thành các giá trị cụ thể là hàm cốt lõi của ngôn ngữ CSS. Một cặp tài sản và giá trị được gọi là khai báo và bất kỳ động cơ CSS nào tính toán các khai báo nào áp dụng cho mọi yếu tố của một trang để đặt nó một cách thích hợp và để tạo kiểu cho nó.declaration, and any CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it.

Cả hai thuộc tính và giá trị đều không nhạy cảm trường hợp theo mặc định trong CSS. Cặp đôi được phân tách bởi một dấu hai chấm, ':' (U+003A COLON) và không gian trắng trước, giữa và sau các thuộc tính và giá trị, nhưng không nhất thiết phải bị bỏ qua.

Có hơn 100 thuộc tính khác nhau trong CSS và vô số giá trị khác nhau. Không phải tất cả các cặp thuộc tính và giá trị được cho phép và mỗi thuộc tính xác định các giá trị hợp lệ là gì. Khi một giá trị không hợp lệ đối với một thuộc tính nhất định, khai báo được coi là không hợp lệ và hoàn toàn bị bỏ qua bởi động cơ CSS.

Khối khai báo CSS

Các khai báo được nhóm lại thành các khối, nằm trong một cấu trúc được phân định bằng một nẹp mở, '{' (U+007B LEFT CURLY BRACKET) và kết thúc, '}' (color0). Các khối đôi khi có thể được lồng, vì vậy việc mở và đóng niềng răng phải được khớp.blocks, that is in a structure delimited by an opening brace, '{' (U+007B LEFT CURLY BRACKET), and a closing one, '}' (color0). Blocks sometimes can be nested, so opening and closing braces must be matched.

Các khối như vậy được gọi một cách tự nhiên các khối khai báo và khai báo bên trong chúng được phân tách bằng dấu chấm phẩy, 'color1' (color2). Một khối khai báo có thể trống, có chứa tuyên bố null. Không gian trắng xung quanh các tuyên bố bị bỏ qua. Tuyên bố cuối cùng của một khối không cần phải bị chấm dứt bởi một dấu chấm phẩy, mặc dù nó thường được coi là phong cách tốt để làm điều đó vì nó ngăn chặn quên thêm nó khi mở rộng khối với một tuyên bố khác.declaration blocks and declarations inside them are separated by a semicolon, 'color1' (color2). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semicolon, though it is often considered good style to do it as it prevents forgetting to add it when extending the block with another declaration.

Một khối khai báo CSS được hiển thị trong sơ đồ dưới đây.

Lưu ý: Nội dung của khối khai báo CSS, đó là danh sách các khai báo phân tách dấu chấm phẩy, không có niềng răng ban đầu và đóng, có thể được đặt bên trong thuộc tính HTML color3. The content of a CSS declaration block, that is a list of semicolon-separated declarations, without the initial and closing braces, can be put inside an HTML color3 attribute.

Quy tắc CSS

Nếu các bảng phong cách chỉ có thể áp dụng một tuyên bố cho từng yếu tố của một trang web, chúng sẽ khá vô dụng. Mục tiêu thực sự là áp dụng các tuyên bố khác nhau cho các phần khác nhau của tài liệu.

CSS cho phép điều này bằng cách liên kết các điều kiện với các khối khai báo. Mỗi khối khai báo (hợp lệ) được đi trước bởi một hoặc nhiều bộ chọn được phân tách bằng dấu phẩy, là điều kiện chọn một số yếu tố của trang. Một nhóm chọn và một khối khai báo liên quan, cùng nhau, được gọi là một quy tắc, hoặc thường là một quy tắc.selectors, which are conditions selecting some elements of the page. A selector group and an associated declarations block, together, are called a ruleset, or often a rule.

Một quy tắc CSS (hoặc quy tắc) được hiển thị trong sơ đồ dưới đây.

Vì một yếu tố của trang có thể được khớp bởi một số bộ chọn, và do đó bởi một số quy tắc có khả năng chứa một thuộc tính nhất định nhiều lần, với các giá trị khác nhau, CSS Standard xác định cái nào có quyền ưu tiên Thuật toán Cascade.

Lưu ý: Điều quan trọng cần lưu ý là ngay cả khi một quy tắc được đặc trưng bởi một nhóm bộ chọn là một loại tốc ký thay thế các quy tắc bằng một bộ chọn duy nhất, điều này không áp dụng cho tính hợp lệ của chính quy tắc. It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.

Điều này dẫn đến một kết quả quan trọng: Nếu một bộ chọn cơ bản duy nhất không hợp lệ, như khi sử dụng một yếu tố giả hoặc phân loại giả, toàn bộ bộ chọn không hợp lệ và do đó toàn bộ quy tắc bị bỏ qua (cũng như không hợp lệ).

Báo cáo CSS

Các quy tắc là các khối xây dựng chính của một bảng kiểu, thường chỉ bao gồm một danh sách lớn của chúng. Nhưng có những thông tin khác mà một tác giả web muốn truyền tải trong bảng kiểu, như bộ ký tự, các bảng kiểu bên ngoài khác để nhập, phông chữ hoặc mô tả bộ đếm và nhiều hơn nữa. Nó sẽ sử dụng các loại tuyên bố khác và cụ thể để làm điều đó.

Một tuyên bố là một khối xây dựng bắt đầu với bất kỳ ký tự không gian nào và kết thúc ở niềng hoặc dấu chấm phẩy đầu tiên (bên ngoài một chuỗi, không được trừ và không được đưa vào một cặp {}, () hoặc [] hoặc []).statement is a building block that begins with any non-space characters and ends at the first closing brace or semicolon (outside a string, non-escaped and not included into another {}, () or [] pair).

Có hai loại tuyên bố:

• Các quy tắc (hoặc quy tắc), như đã thấy, liên kết một tập hợp các khai báo CSS với một điều kiện được mô tả bởi một bộ chọn. (or rules) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
• Các quy tắc bắt đầu bằng dấu hiệu tại một dấu hiệu, 'color4' (color5), theo sau là một định danh và sau đó tiếp tục đến cuối câu lệnh, đó là vào phần bán kết tiếp theo (;) bên ngoài một khối, hoặc kết thúc của khối tiếp theo. Mỗi loại quy tắc, được xác định bởi định danh, có thể có cú pháp nội bộ riêng và tất nhiên là ngữ nghĩa. Chúng được sử dụng để truyền tải thông tin dữ liệu meta (như color6 hoặc color7), thông tin có điều kiện (như color8 hoặc color9) hoặc thông tin mô tả (như red0). that start with an at sign, 'color4' (color5), followed by an identifier and then continuing up to the end of the statement, that is up to the next semicolon (;) outside of a block, or the end of the next block. Each type of at-rules, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like color6 or color7), conditional information (like color8 or color9), or descriptive information (like red0).

Bất kỳ tuyên bố nào không phải là một quy tắc hoặc một quy tắc không hợp lệ và bị bỏ qua.

Tuyên bố lồng nhau

Có một nhóm một tuyên bố khác - các tuyên bố lồng nhau. Đây là những tuyên bố có thể được sử dụng trong một tập hợp con cụ thể của các quy tắc-các quy tắc nhóm có điều kiện. Các câu lệnh này chỉ được áp dụng nếu một điều kiện cụ thể được khớp: Nội dung quy tắc color8 chỉ được áp dụng nếu thiết bị mà trình duyệt chạy khớp với điều kiện được thể hiện; Nội dung quy tắc color9 chỉ được áp dụng nếu trang hiện tại khớp với một số điều kiện, v.v. Trong CSS1 và CSS2.1, chỉ có các quy tắc có thể được sử dụng bên trong các quy tắc nhóm có điều kiện. Điều đó rất hạn chế và hạn chế này đã được dỡ bỏ trong các điều kiện CSS Cấp 3. Bây giờ, mặc dù vẫn thử nghiệm và không được hỗ trợ bởi mọi trình duyệt, các quy tắc nhóm có điều kiện có thể chứa một phạm vi nội dung rộng hơn: quy tắc nhưng cũng không phải là tất cả .nested statements. These are statements that can be used in a specific subset of at-rules – the conditional group rules. These statements only apply if a specific condition is matched: the color8 at-rule content is applied only if the device on which the browser runs matches the expressed condition; the color9 at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.

Xem thêm