Bộ chọn số CSS
Phần này mô tả ngữ pháp (và các quy tắc phân tích cú pháp tương thích chuyển tiếp) chung cho mọi cấp độ CSS (bao gồm cả CSS 2. 1). Các bản cập nhật CSS trong tương lai sẽ tuân thủ cú pháp cốt lõi này, mặc dù chúng có thể thêm các ràng buộc cú pháp bổ sung Show Những mô tả này là tiêu chuẩn. Chúng cũng được bổ sung bởi các quy tắc ngữ pháp chuẩn mực được trình bày trong Phụ lục G Trong đặc điểm kỹ thuật này, các cụm từ "ngay trước" hoặc "ngay sau" có nghĩa là không có khoảng trắng xen vào hoặc nhận xét Tất cả các cấp CSS — cấp 1, cấp 2 và bất kỳ cấp nào trong tương lai — sử dụng cùng một cú pháp cốt lõi. Điều này cho phép các UA phân tích các biểu định kiểu (mặc dù không hiểu hoàn toàn) được viết ở các mức CSS không tồn tại tại thời điểm các UA được tạo. Nhà thiết kế có thể sử dụng tính năng này để tạo các biểu định kiểu hoạt động với các tác nhân người dùng cũ hơn, đồng thời thực hiện các khả năng của các cấp CSS mới nhất Ở cấp độ từ vựng, biểu định kiểu CSS bao gồm một chuỗi các mã thông báo. Danh sách các mã thông báo cho CSS như sau. Các định nghĩa sử dụng biểu thức chính quy kiểu Lex. Mã bát phân tham khảo ISO 10646 (). Như trong Lex, trong trường hợp có nhiều trận đấu, trận đấu dài nhất sẽ xác định mã thông báo TokenDefinitionIDENT-moz-box-sizing -moz-border-radius -wap-accesskey0ATKEYWORD -moz-box-sizing -moz-border-radius -wap-accesskey1STRING -moz-box-sizing -moz-border-radius -wap-accesskey2BAD_STRING -moz-box-sizing -moz-border-radius -wap-accesskey3BAD_URI -moz-box-sizing -moz-border-radius -wap-accesskey4BAD_COMMENT -moz-box-sizing -moz-border-radius -wap-accesskey5HASH -moz-box-sizing -moz-border-radius -wap-accesskey6NUMBER -moz-box-sizing -moz-border-radius -wap-accesskey7PERCENTAGE -moz-box-sizing -moz-border-radius -wap-accesskey8DIMENSION -moz-box-sizing -moz-border-radius -wap-accesskey9URI 0UNICODE-RANGE 1CDO. 2; 3{ 4} 5( 6) 7[ 8] 9S 0BÌNH LUẬN 1CHỨC NĂNG_______20_______2BAO GỒM 3DASHMATCH_______20_______4DELINhiều ký tự khác không khớp với một hoặc hai ký tự ở trên và trích dẫnCác macro trong dấu ngoặc nhọn ({}) ở trên được định nghĩa như sau MacroDefinitionident 5name 6nmstart 7nonascii 8unicode 9escape 0nmchar 1num 2string 3string1 4string2 5badstring 6badstring1 7badstring2 8badcomment 9badcomment1 0badcomment2 1baduri 2baduri1 3baduri2 4baduri3 5nl 6w 7(các) ví dụ Ví dụ: quy tắc của trận đấu dài nhất có nghĩa là " 8" được mã hóa thành IDENT " 9" theo sau là DELIM "_______50_______00", thay vì dưới dạng IDENT theo sau là CDCDưới đây là cú pháp cốt lõi cho CSS. Các phần tiếp theo mô tả cách sử dụng nó. Phụ lục G mô tả ngữ pháp hạn chế hơn, gần với ngôn ngữ CSS cấp 2 hơn. Các phần của biểu định kiểu có thể được phân tích cú pháp theo ngữ pháp này nhưng không theo ngữ pháp trong Phụ lục G nằm trong số các phần sẽ bị bỏ qua theo stylesheet : [ CDO | CDC | S | statement ]*; statement : ruleset | at-rule; at-rule : ATKEYWORD S* any* [ block | ';' S* ]; block : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*; ruleset : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*; selector : any+; declaration : property S* ':' S* value; property : IDENT; value : [ any | block | ATKEYWORD S* ]+; any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES | DASHMATCH | ':' | FUNCTION S* [any|unused]* ')' | '(' S* [any|unused]* ')' | '[' S* [any|unused]* ']' ] S*; unused : block | ATKEYWORD S* | ';' S* | CDO S* | CDC S*; Sản xuất "không sử dụng" không được sử dụng trong CSS và sẽ không được sử dụng bởi bất kỳ tiện ích mở rộng nào trong tương lai. Nó được bao gồm ở đây chỉ để giúp xử lý lỗi. (Nhìn thấy ) Mã thông báo NHẬN XÉT không xuất hiện trong ngữ pháp (để giữ cho nó có thể đọc được), nhưng bất kỳ số lượng mã thông báo nào trong số này có thể xuất hiện ở bất kỳ đâu bên ngoài các mã thông báo khác. (Tuy nhiên, lưu ý rằng một nhận xét trước hoặc trong quy tắc @charset sẽ vô hiệu hóa @charset. ) Mã thông báo S trong ngữ pháp trên là viết tắt của khoảng trắng. Chỉ các ký tự "dấu cách" (U+0020), "tab" (U+0009), "nạp dòng" (U+000A), "xuống dòng" (U+000D) và "nạp biểu mẫu" (U+000C . Các ký tự giống như khoảng trắng khác, chẳng hạn như "em-space" (U+2003) và "dấu cách chữ tượng hình" (U+3000), không bao giờ là một phần của khoảng trắng Ý nghĩa của thông tin đầu vào không thể mã hóa hoặc phân tích cú pháp không được xác định trong CSS 2. 1 Từ khóa có dạng Từ khóa không được đặt giữa dấu ngoặc kép (". " hoặc '. '). Như vậy, red là một từ khóa, nhưng "red" không phải. (Nó là một. ) Các ví dụ bất hợp pháp khác ví dụ bất hợp pháp)
4. 1. 2. 1 Tiện ích mở rộng dành riêng cho nhà cung cấpTrong CSS, số nhận dạng có thể bắt đầu bằng '_______50_______01' (dấu gạch ngang) hoặc ' red02' (dấu gạch dưới). Các từ khóa và bắt đầu bằng red01' hoặc ' red02' được dành riêng cho các tiện ích mở rộng dành riêng cho nhà cung cấp. Các tiện ích mở rộng dành riêng cho nhà cung cấp đó phải có một trong các định dạng sau '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name (các) ví dụ Ví dụ: nếu tổ chức XYZ đã thêm thuộc tính để mô tả màu của đường viền ở phía Đông của màn hình, họ có thể gọi thuộc tính đó là -xyz-border-east-color Các ví dụ đã biết khác -moz-box-sizing -moz-border-radius -wap-accesskey Dấu gạch ngang hoặc dấu gạch dưới ban đầu được đảm bảo không bao giờ được sử dụng trong thuộc tính hoặc từ khóa bởi bất kỳ cấp độ CSS hiện tại hoặc tương lai nào. Do đó, việc triển khai CSS điển hình có thể không nhận ra các thuộc tính đó và có thể bỏ qua chúng theo. Tuy nhiên, vì dấu gạch ngang đầu tiên hoặc dấu gạch dưới là một phần của ngữ pháp nên CSS 2. 1 người triển khai phải luôn có thể sử dụng trình phân tích cú pháp tuân thủ CSS, cho dù họ có hỗ trợ bất kỳ tiện ích mở rộng dành riêng cho nhà cung cấp nào hay không Tác giả nên tránh các tiện ích mở rộng dành riêng cho nhà cung cấp 4. 1. 2. 2 Ghi chú Lịch sử Thông tinPhần này là thông tin Tại thời điểm viết, các tiền tố sau được biết là tồn tại prefixorganizationred05, red06Microsoft red07Mozilla red08, red09Opera Software red10Advanced Television Standards Committee red11The WAP Forum red12KDE red13Apple red14YesLogic red15Antenna House red16Hewlett Packard red17Real Objects red18Research In Motion red19TallComponents Các quy tắc sau đây luôn giữ
Một biểu định kiểu CSS, đối với mọi cấp độ CSS, bao gồm một danh sách các câu lệnh (xem phần trên). Có hai loại tuyên bố. quy tắc tại và bộ quy tắc. Có thể có xung quanh các tuyên bố Quy tắc tại bắt đầu bằng từ khóa tại, ký tự '@' ngay sau đó là ký tự (ví dụ: '@import', '@page') Một quy tắc bao gồm mọi thứ cho đến và bao gồm cả dấu chấm phẩy tiếp theo (;) hoặc tiếp theo tùy điều kiện nào đến trước CSS 2. 1 tác nhân người dùng phải có bất kỳ quy tắc nào xảy ra bên trong hoặc sau bất kỳ câu lệnh không bị bỏ qua nào ngoài quy tắc @charset hoặc @import ví dụ bất hợp pháp) Ví dụ: giả sử rằng CSS 2. 1 trình phân tích cú pháp bắt gặp biểu định kiểu này
'@import' thứ hai là bất hợp pháp theo CSS 2. 1. CSS 2. 1 toàn bộ quy tắc, giảm hiệu quả biểu định kiểu thành
ví dụ bất hợp pháp) Trong ví dụ sau, quy tắc '@import' thứ hai không hợp lệ vì nó xảy ra bên trong '@media'
Thay vào đó, để đạt được hiệu quả của việc chỉ nhập biểu định kiểu cho phương tiện 'in', hãy sử dụng quy tắc @import với cú pháp phương tiện, e. g
Một khối bắt đầu bằng dấu ngoặc nhọn trái ({) và kết thúc bằng dấu ngoặc nhọn phải phù hợp (}). Ở giữa có thể có bất kỳ mã thông báo nào, ngoại trừ dấu ngoặc đơn (( )), dấu ngoặc vuông ([ ]) và dấu ngoặc nhọn ({ }) phải luôn xuất hiện theo cặp giống nhau và có thể được lồng vào nhau. Dấu ngoặc đơn (') và dấu ngoặc kép (") cũng phải xuất hiện trong các cặp phù hợp và các ký tự giữa chúng được phân tích cú pháp dưới dạng chuỗi. Xem ở trên để biết định nghĩa của một chuỗi ví dụ bất hợp pháp) Đây là một ví dụ về một khối. Lưu ý rằng dấu ngoặc nhọn bên phải giữa các dấu ngoặc kép không khớp với dấu ngoặc đơn mở của khối và dấu ngoặc đơn thứ hai là một và do đó không khớp với dấu ngoặc đơn đầu tiên red0 Xin lưu ý rằng quy tắc trên không phải là CSS hợp lệ 2. 1, nhưng nó vẫn là một khối như đã định nghĩa ở trên Một bộ quy tắc (còn được gọi là "quy tắc") bao gồm một bộ chọn theo sau là một khối khai báo Một khối khai báo bắt đầu bằng dấu ngoặc nhọn trái ({) và kết thúc bằng dấu ngoặc nhọn phải phù hợp (}). Ở giữa phải có một danh sách gồm 0 hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy (;) Bộ chọn (xem thêm phần về bộ chọn) bao gồm mọi thứ cho đến (nhưng không bao gồm) dấu ngoặc nhọn bên trái đầu tiên ({). Bộ chọn luôn đi cùng với khối khai báo. Khi tác nhân người dùng không thể phân tích cú pháp bộ chọn (i. e. , đó không phải là CSS hợp lệ 2. 1), nó cũng phải là bộ chọn và khối khai báo sau (nếu có) CSS 2. 1 mang ý nghĩa đặc biệt cho dấu phẩy (,) trong bộ chọn. Tuy nhiên, vì không biết liệu dấu phẩy có thể mang ý nghĩa khác trong các bản cập nhật CSS trong tương lai hay không, nên toàn bộ câu lệnh sẽ là nếu có lỗi ở bất kỳ đâu trong bộ chọn, mặc dù phần còn lại của bộ chọn có vẻ hợp lý trong CSS 2. 1 ví dụ bất hợp pháp) Ví dụ: vì "&" không phải là mã thông báo hợp lệ trong CSS 2. 1 bộ chọn, CSS 2. 1 tác nhân người dùng phải toàn bộ dòng thứ hai và không đặt màu của H3 thành màu đỏ red1 (các) ví dụ Đây là một ví dụ phức tạp hơn. Hai cặp dấu ngoặc nhọn đầu tiên nằm bên trong một chuỗi và không đánh dấu phần cuối của bộ chọn. Đây là một CSS hợp lệ 2. 1 quy tắc red2 Một khai báo trống hoặc bao gồm một tên thuộc tính, theo sau là dấu hai chấm (. ), theo sau là giá trị thuộc tính. Xung quanh mỗi trong số này có thể có Do cách thức hoạt động của bộ chọn, nhiều khai báo cho cùng một bộ chọn có thể được tổ chức thành các nhóm được phân tách bằng dấu chấm phẩy (;) (các) ví dụ Vì vậy, các quy tắc sau red3 tương đương với red4 Tên thuộc tính là một. Bất kỳ mã thông báo nào có thể xảy ra trong giá trị thuộc tính. Dấu ngoặc đơn ("( )"), dấu ngoặc nhọn ("[ ]"), dấu ngoặc nhọn ("{ }"), dấu ngoặc đơn (') và dấu ngoặc kép (") phải đi theo cặp giống nhau và dấu chấm phẩy không có trong chuỗi phải là. Dấu ngoặc đơn, dấu ngoặc đơn và dấu ngoặc nhọn có thể được lồng vào nhau. Bên trong dấu ngoặc kép, các ký tự được phân tích dưới dạng chuỗi Cú pháp của các giá trị được chỉ định riêng cho từng thuộc tính, nhưng trong mọi trường hợp, các giá trị được tạo từ mã định danh, chuỗi, số, độ dài, tỷ lệ phần trăm, URI, màu sắc, v.v. Tác nhân người dùng phải khai báo có tên thuộc tính không hợp lệ hoặc giá trị không hợp lệ. Mỗi thuộc tính CSS có các hạn chế về cú pháp và ngữ nghĩa riêng đối với các giá trị mà nó chấp nhận ví dụ bất hợp pháp) Ví dụ: giả sử một CSS 2. 1 trình phân tích cú pháp bắt gặp biểu định kiểu này red5 Khai báo thứ hai trên dòng đầu tiên có giá trị không hợp lệ '12pt'. Khai báo thứ hai trên dòng thứ hai chứa một thuộc tính không xác định 'font-vendor'. CSS 2. 1 trình phân tích cú pháp sẽ thực hiện các khai báo này, giảm hiệu quả biểu định kiểu thành red6 Chú thích bắt đầu bằng ký tự "/*" và kết thúc bằng ký tự "*/". Chúng có thể xuất hiện ở bất kỳ đâu bên ngoài các mã thông báo khác và nội dung của chúng không ảnh hưởng đến kết xuất. Nhận xét có thể không được lồng nhau CSS cũng cho phép các dấu phân cách nhận xét SGML ("") ở một số vị trí nhất định được xác định bởi ngữ pháp, nhưng chúng không phân định các nhận xét CSS. Chúng được phép để các quy tắc kiểu dáng xuất hiện trong tài liệu nguồn HTML (trong phần tử STYLE) có thể bị ẩn khỏi tiền HTML 3. 2 tác nhân người dùng. Xem đặc tả HTML 4 () để biết thêm thông tin Trong một số trường hợp, tác nhân người dùng phải bỏ qua một phần của biểu định kiểu không hợp lệ. Thông số kỹ thuật này định nghĩa bỏ qua có nghĩa là tác nhân người dùng phân tích cú pháp phần không hợp lệ (để tìm điểm bắt đầu và kết thúc của nó), nhưng nếu không thì hành động như thể nó không có ở đó. CSS 2. 1 dự trữ cho các bản cập nhật trong tương lai của CSS tất cả thuộc tính. kết hợp giá trị và từ khóa @ không chứa mã định danh bắt đầu bằng dấu gạch ngang hoặc dấu gạch dưới. Việc triển khai phải bỏ qua các kết hợp như vậy (ngoài những kết hợp được giới thiệu bởi các bản cập nhật CSS trong tương lai) Để đảm bảo rằng các thuộc tính mới và giá trị mới cho các thuộc tính hiện có có thể được thêm vào trong tương lai, tác nhân người dùng bắt buộc phải tuân theo các quy tắc sau khi họ gặp phải các tình huống sau
Một số loại giá trị có thể có giá trị số nguyên (ký hiệu là ) hoặc giá trị số thực (ký hiệu là ). Số thực và số nguyên chỉ được chỉ định trong ký hiệu thập phân. Bao gồm một hoặc nhiều chữ số "0" đến "9". Có thể là một hoặc có thể là 0 hoặc nhiều chữ số theo sau là dấu chấm (. ) theo sau bởi một hoặc nhiều chữ số. Cả số nguyên và số thực đều có thể đặt trước dấu "-" hoặc "+" để chỉ dấu. -0 tương đương với 0 và không phải là số âm Lưu ý rằng nhiều thuộc tính cho phép một số nguyên hoặc số thực làm giá trị thực sự hạn chế giá trị ở một số phạm vi, thường là giá trị không âm Độ dài đề cập đến các phép đo khoảng cách Định dạng của giá trị độ dài (được biểu thị trong thông số kỹ thuật này) là (có hoặc không có dấu thập phân) ngay sau đó là mã định danh đơn vị (e. g. , px, em, v.v. ). Sau độ dài bằng 0, mã định danh đơn vị là tùy chọn Một số thuộc tính cho phép giá trị độ dài âm, nhưng điều này có thể làm phức tạp mô hình định dạng và có thể có các giới hạn triển khai cụ thể. Nếu không thể hỗ trợ giá trị độ dài âm, giá trị đó phải được chuyển đổi thành giá trị gần nhất có thể được hỗ trợ Nếu giá trị độ dài âm được đặt trên một thuộc tính không cho phép giá trị độ dài âm, khai báo sẽ bị bỏ qua Trong trường hợp không thể hỗ trợ độ dài, tác nhân người dùng phải tính gần đúng độ dài đó trong Có hai loại đơn vị độ dài. tương đối và tuyệt đối. Đơn vị độ dài tương đối chỉ định độ dài so với thuộc tính độ dài khác. Các biểu định kiểu sử dụng các đơn vị tương đối có thể dễ dàng thay đổi quy mô từ môi trường đầu ra này sang môi trường đầu ra khác đơn vị tương đối là
(các) ví dụ "red"9 Đơn vị 'em' bằng với giá trị tính toán của thuộc tính của phần tử mà nó được sử dụng. Ngoại lệ là khi 'em' xuất hiện trong giá trị của chính thuộc tính 'cỡ chữ', trong trường hợp đó, nó đề cập đến kích thước phông chữ của phần tử gốc. Nó có thể được sử dụng để đo dọc hoặc ngang. (Đơn vị này đôi khi còn được gọi là bốn chiều rộng trong các văn bản chính tả. ) Đơn vị 'ex' được xác định bởi phông chữ có sẵn đầu tiên của phần tử. Ngoại lệ là khi 'ex' xuất hiện trong giá trị của thuộc tính, trong trường hợp đó, nó đề cập đến 'ex' của phần tử gốc 'Chiều cao x' được gọi như vậy vì nó thường bằng chiều cao của chữ thường "x". Tuy nhiên, 'ex' được xác định ngay cả đối với các phông chữ không chứa "x" Chiều cao x của phông chữ có thể được tìm thấy theo nhiều cách khác nhau. Một số phông chữ chứa số liệu đáng tin cậy cho chiều cao x. Nếu không có số liệu phông chữ đáng tin cậy, UAs có thể xác định chiều cao x từ chiều cao của glyph chữ thường. Một phương pháp phỏng đoán khả thi là xem xét glyph cho chữ thường "o" kéo dài bên dưới đường cơ sở bao xa và trừ giá trị đó khỏi đầu hộp giới hạn của nó. Trong trường hợp không thể hoặc không thực tế để xác định chiều cao x, giá trị bằng 0. 5em nên được sử dụng (các) ví dụ quy tắc 0có nghĩa là chiều cao dòng của phần tử "h1" sẽ lớn hơn 20% so với kích thước phông chữ của phần tử "h1". Mặt khác 1có nghĩa là kích thước phông chữ của các phần tử "h1" sẽ lớn hơn 20% so với kích thước phông chữ được kế thừa bởi các phần tử "h1" Khi được chỉ định cho thư mục gốc của (e. g. , "HTML" trong HTML), 'em' và 'ex' đề cập đến thuộc tính của Các phần tử con không kế thừa các giá trị tương đối được chỉ định cho phần tử cha của chúng; (các) ví dụ Theo các quy tắc sau, giá trị được tính toán của phần tử "h1" sẽ là 36px, không phải 45px, nếu "h1" là phần tử con của phần tử "body" 2Đơn vị độ dài tuyệt đối được cố định trong mối quan hệ với nhau. Chúng chủ yếu hữu ích khi môi trường đầu ra được biết đến. Các đơn vị tuyệt đối bao gồm các đơn vị vật lý (in, cm, mm, pt, pc) và đơn vị px
Đối với thiết bị CSS, các kích thước này được cố định (i) bằng cách liên kết các đơn vị vật lý với các phép đo vật lý của chúng hoặc (ii) bằng cách liên kết đơn vị pixel với pixel tham chiếu. Đối với phương tiện in và các thiết bị có độ phân giải cao tương tự, đơn vị neo phải là một trong các đơn vị vật lý tiêu chuẩn (inch, centimet, v.v.). Đối với các thiết bị có độ phân giải thấp hơn và các thiết bị có khoảng cách xem bất thường, thay vào đó, đơn vị neo nên là đơn vị pixel. Đối với những thiết bị như vậy, đơn vị pixel đề cập đến toàn bộ số lượng pixel của thiết bị gần đúng nhất với pixel tham chiếu Lưu ý rằng nếu đơn vị neo là đơn vị pixel, các đơn vị vật lý có thể không khớp với các phép đo vật lý của chúng. Ngoài ra, nếu đơn vị neo là đơn vị vật lý, thì đơn vị pixel có thể không ánh xạ tới toàn bộ số pixel thiết bị Lưu ý rằng định nghĩa đơn vị pixel và đơn vị vật lý này khác với các phiên bản CSS trước đó. Đặc biệt, trong các phiên bản trước của CSS, đơn vị pixel và đơn vị vật lý không liên quan với nhau theo một tỷ lệ cố định. các đơn vị vật lý luôn được gắn với các phép đo vật lý của chúng trong khi đơn vị pixel sẽ thay đổi để khớp gần nhất với pixel tham chiếu. (Thay đổi này được thực hiện vì có quá nhiều nội dung hiện có dựa trên giả định 96dpi và việc phá vỡ giả định đó sẽ phá vỡ nội dung. ) Pixel tham chiếu là góc nhìn của một pixel trên thiết bị có mật độ pixel là 96dpi và cách đầu đọc một sải tay. Đối với chiều dài danh nghĩa của cánh tay là 28 inch, do đó, góc nhìn là khoảng 0. 0213 độ. Để đọc ở độ dài của cánh tay, do đó, 1px tương ứng với khoảng 0. 26 mm (1/96 inch) Hình ảnh bên dưới minh họa ảnh hưởng của khoảng cách xem đối với kích thước của pixel tham chiếu. khoảng cách đọc là 71 cm (28 inch) dẫn đến pixel tham chiếu là 0. 26 mm, trong khi khoảng cách đọc là 3. 5 m (12 feet) dẫn đến pixel tham chiếu là 1. 3 mm Hình ảnh thứ hai này minh họa ảnh hưởng của độ phân giải của thiết bị đối với đơn vị pixel. diện tích 1px x 1px được bao phủ bởi một dấu chấm trong thiết bị có độ phân giải thấp (e. g. màn hình máy tính điển hình), trong khi cùng một khu vực được bao phủ bởi 16 chấm trong thiết bị có độ phân giải cao hơn (chẳng hạn như máy in) (các) ví dụ 3Định dạng của một giá trị phần trăm (được biểu thị bằng trong thông số kỹ thuật này) ngay sau đó là '%' Giá trị phần trăm luôn liên quan đến giá trị khác, ví dụ: độ dài. Mỗi thuộc tính cho phép tỷ lệ phần trăm cũng xác định giá trị mà tỷ lệ phần trăm đề cập đến. Giá trị có thể là giá trị của thuộc tính khác cho cùng một phần tử, thuộc tính của phần tử tổ tiên hoặc giá trị của ngữ cảnh định dạng (e. g. , chiều rộng của a ). Khi giá trị phần trăm được đặt cho một thuộc tính của phần tử và tỷ lệ phần trăm được xác định là đề cập đến giá trị kế thừa của một số thuộc tính, giá trị kết quả là tỷ lệ phần trăm nhân với thuộc tính đó (các) ví dụ Vì các phần tử con (thường) kế thừa phần tử cha của chúng, nên trong ví dụ sau, các phần tử con của phần tử P sẽ thừa hưởng giá trị 12px cho , không phải giá trị phần trăm (120%) 4Các giá trị URI (Mã định danh tài nguyên thống nhất, xem , bao gồm URL, URN, v.v.) trong thông số kỹ thuật này được biểu thị bằng. Ký hiệu chức năng được sử dụng để chỉ định các URI trong các giá trị thuộc tính là "url()", như trong (các) ví dụ 5Định dạng của giá trị URI là 'url(' theo sau là tùy chọn, tiếp theo là ký tự trích dẫn đơn (') hoặc trích dẫn kép (") tùy chọn, theo sau là chính URI, tiếp theo là ký tự trích dẫn đơn (') hoặc trích dẫn kép (" . Hai ký tự trích dẫn phải giống nhau (các) ví dụ Một ví dụ không có dấu ngoặc kép 6Một số ký tự xuất hiện trong URI không được trích dẫn, chẳng hạn như dấu ngoặc đơn, ký tự khoảng trắng, dấu ngoặc đơn (') và dấu ngoặc kép ("), phải được thoát bằng dấu gạch chéo ngược để giá trị URI kết quả là mã thông báo URI. '\(', '\)' Tùy thuộc vào loại URI, cũng có thể viết các ký tự trên dưới dạng thoát URI (trong đó "(" = %28, ")" = %29, v.v. ) như được mô tả trong Lưu ý rằng mã thông báo COMMENT không thể xảy ra trong các mã thông báo khác. do đó, "url(/*x*/pic. png)" biểu thị URI "/*x*/pic. png", không phải "ảnh. png" Để tạo biểu định kiểu mô-đun không phụ thuộc vào vị trí tuyệt đối của tài nguyên, tác giả có thể sử dụng các URI tương đối. URI tương đối (như được định nghĩa trong ) được phân giải thành URI đầy đủ bằng cách sử dụng URI cơ sở. RFC 3986, phần 5, xác định thuật toán quy chuẩn cho quy trình này. Đối với biểu định kiểu CSS, URI cơ sở là của biểu định kiểu, không phải của tài liệu nguồn (các) ví dụ Ví dụ: giả sử quy tắc sau 7được đặt trong một biểu định kiểu được chỉ định bởi URI 8Nền của CƠ THỂ của tài liệu nguồn sẽ được lát bằng bất kỳ hình ảnh nào được mô tả bởi tài nguyên được chỉ định bởi URI 9Tác nhân người dùng có thể khác nhau về cách họ xử lý các URI không hợp lệ hoặc URI chỉ định các tài nguyên không khả dụng hoặc không thể áp dụng Counters are denoted by case-sensitive identifiers (see the and properties). To refer to the value of a counter, the notation 'counter()'or 'counter(, <'list-style-type'>)', with optional white space separating the tokens, is used. The default style is 'decimal'. To refer to a sequence of nested counters of the same name, the notation is 'counters(,)' or 'counters(,, <'list-style-type'>)' with optional white space separating the tokens. Xem trong chương về nội dung được tạo để biết cách tác nhân người dùng phải xác định giá trị hoặc các giá trị của bộ đếm. Xem định nghĩa về các giá trị bộ đếm của thuộc tính để biết cách nó phải chuyển đổi các giá trị này thành một chuỗi In CSS 2.1, the values of counters can only be referred to from the property. Note that 'none' is a possible <'list-style-type'>: 'counter(x, none)' yields an empty string. (các) ví dụ Đây là một style sheet đánh số các đoạn (p) cho mỗi chương (h1). Các đoạn văn được đánh số la mã, sau đó là dấu chấm và khoảng trắng '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name0 A là từ khóa hoặc thông số kỹ thuật số RGB Danh sách các từ khóa màu sắc là. nước, đen, xanh dương, hoa vân anh, xám, xanh lá cây, vôi, màu hạt dẻ, hải quân, ô liu, cam, tím, đỏ, bạc, mòng két, trắng và vàng. 17 màu này có giá trị như sau màu hạt dẻ #800000 đỏ #ff0000 cam #ffA500 vàng #ffff00 ô liu #808000 tím #800080 fuchsia #ff00ff trắng #ffffff vôi #00ff00 xanh lá cây #008000 hải quân #000080 màu xanh lam #0000ff aqua #00ffff xanh mòng két #008080 đen #000000 bạc #c0c0c0 xám #808080 Ngoài các từ khóa màu này, người dùng có thể chỉ định các từ khóa tương ứng với màu được sử dụng bởi các đối tượng nhất định trong môi trường của người dùng. Vui lòng tham khảo phần trên để biết thêm thông tin (các) ví dụ '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name1 Mô hình màu RGB được sử dụng trong thông số kỹ thuật màu số. Tất cả các ví dụ này chỉ định cùng một màu (các) ví dụ '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name2 Định dạng của một giá trị RGB trong ký hiệu thập lục phân là '#' ngay sau đó là ba hoặc sáu ký tự thập lục phân. Ký hiệu RGB ba chữ số (#rgb) được chuyển đổi thành dạng sáu chữ số (#rrggbb) bằng cách sao chép các chữ số, không phải bằng cách thêm số không. Ví dụ: #fb0 mở rộng thành #ffbb00. Điều này đảm bảo rằng màu trắng (#ffffff) có thể được chỉ định bằng ký hiệu ngắn (#fff) và loại bỏ mọi phụ thuộc vào độ sâu màu của màn hình Định dạng của giá trị RGB trong ký hiệu chức năng là 'rgb(' theo sau là danh sách ba giá trị số được phân tách bằng dấu phẩy (ba giá trị số nguyên hoặc ba giá trị phần trăm) theo sau là ')'. Giá trị số nguyên 255 tương ứng với 100% và với F hoặc FF trong ký hiệu thập lục phân. rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. các ký tự được phép xung quanh các giá trị số Tất cả các màu RGB được chỉ định trong không gian màu sRGB (xem tài liệu tham khảo). Các tác nhân người dùng có thể khác nhau về độ trung thực mà chúng đại diện cho các màu này, nhưng việc sử dụng sRGB cung cấp định nghĩa rõ ràng và có thể đo lường khách quan về màu nên có, có thể liên quan đến các tiêu chuẩn quốc tế (xem ) có thể hạn chế nỗ lực hiển thị màu của chúng để thực hiện hiệu chỉnh gamma trên chúng. sRGB chỉ định gamma hiển thị là 2. 2 trong các điều kiện xem được chỉ định. Tác nhân người dùng nên điều chỉnh các màu được cung cấp trong CSS sao cho, khi kết hợp với gamma hiển thị "tự nhiên" của thiết bị đầu ra, gamma hiển thị hiệu quả là 2. 2 được sản xuất. Lưu ý rằng chỉ những màu được chỉ định trong CSS mới bị ảnh hưởng; . g. , hình ảnh phải mang thông tin màu của riêng chúng Các giá trị bên ngoài gam thiết bị phải được cắt bớt hoặc ánh xạ vào gam khi biết gam. các giá trị đỏ, lục và lam phải được thay đổi để nằm trong phạm vi được thiết bị hỗ trợ. Tác nhân người dùng có thể thực hiện ánh xạ màu chất lượng cao hơn từ gam này sang gam khác. Đối với một màn hình CRT thông thường, có gam thiết bị giống như sRGB, bốn quy tắc dưới đây là tương đương (các) ví dụ '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name3 Các thiết bị khác, chẳng hạn như máy in, có gam màu khác với sRGB; . 255 sRGB sẽ được thể hiện (bên trong gam thiết bị), trong khi các màu khác bên trong 0. 255 sRGB sẽ nằm ngoài phạm vi thiết bị và do đó sẽ được ánh xạ Ghi chú. Ánh xạ hoặc cắt các giá trị màu phải được thực hiện với gam thiết bị thực tế nếu biết (có thể lớn hơn hoặc nhỏ hơn 0. 255) Chuỗi có thể được viết bằng dấu nháy kép hoặc dấu nháy đơn. Dấu ngoặc kép không thể xảy ra bên trong dấu ngoặc kép, trừ khi thoát (e. g. , dưới dạng '\"' hoặc '\22'). Tương tự cho dấu nháy đơn (e. g. , "\'" hoặc "\27") (các) ví dụ '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name4 Một chuỗi không thể trực tiếp chứa một dòng mới. Để bao gồm một dòng mới trong một chuỗi, hãy sử dụng một lối thoát đại diện cho ký tự nguồn cấp dữ liệu theo tiêu chuẩn ISO-10646 (U+000A), chẳng hạn như "\A" hoặc "\00000a". Ký tự này đại diện cho khái niệm chung về "dòng mới" trong CSS. Xem tài sản cho một ví dụ Có thể ngắt chuỗi trên một số dòng, vì lý do thẩm mỹ hoặc lý do khác, nhưng trong trường hợp như vậy, bản thân dòng mới phải được thoát bằng dấu gạch chéo ngược (\). Chẳng hạn, hai bộ chọn sau hoàn toàn giống nhau (các) ví dụ '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name5 Nếu một UA không hỗ trợ một giá trị cụ thể, nó sẽ bỏ qua giá trị đó khi phân tích biểu định kiểu, như thể giá trị đó là một. Ví dụ (các) ví dụ '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name6 Một UA hỗ trợ giá trị 'chạy thử' cho thuộc tính 'hiển thị' sẽ chấp nhận khai báo hiển thị đầu tiên và sau đó "ghi đè" giá trị đó bằng khai báo hiển thị thứ hai. Một UA không hỗ trợ giá trị 'run-in' sẽ xử lý khai báo hiển thị đầu tiên và bỏ qua khai báo hiển thị thứ hai Biểu định kiểu CSS là một chuỗi các ký tự từ Bộ ký tự chung (xem phần ). Để truyền và lưu trữ, các ký tự này phải được mã hóa bằng mã hóa ký tự hỗ trợ bộ ký tự có sẵn trong US-ASCII (e. g. , UTF-8, ISO 8859-x, SHIFT JIS, v.v. ). Để có phần giới thiệu tốt về bộ ký tự và mã hóa ký tự, vui lòng tham khảo đặc tả HTML 4 (, chương 5). Xem thêm XML 1. 0 đặc điểm kỹ thuật (, phần 2. 2 và 4. 3. 3, và Phụ lục F) Khi một biểu định kiểu được nhúng trong một tài liệu khác, chẳng hạn như trong phần tử STYLE hoặc thuộc tính "kiểu" của HTML, biểu định kiểu sẽ chia sẻ mã hóa ký tự của toàn bộ tài liệu Khi một biểu định kiểu nằm trong một tệp riêng biệt, tác nhân người dùng phải tuân thủ các ưu tiên sau khi xác định mã hóa ký tự của biểu định kiểu (từ mức ưu tiên cao nhất đến thấp nhất)
Tác giả sử dụng quy tắc @charset phải đặt quy tắc ở đầu biểu định kiểu, không có ký tự trước. (Nếu dấu thứ tự byte phù hợp với mã hóa được sử dụng, nó có thể đứng trước quy tắc @charset. ) Sau "@charset", tác giả chỉ định tên của một ký tự mã hóa (trong dấu ngoặc kép). Ví dụ '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name7 @charset phải được viết theo nghĩa đen, tôi. e. , 10 ký tự '@charset "' (chữ thường, không có dấu gạch chéo ngược thoát), theo sau là tên mã hóa, theo sau là ';' Tên phải là tên bộ ký tự như được mô tả trong sổ đăng ký IANA. Xem danh sách đầy đủ các bộ ký tự. Tác giả nên sử dụng tên bộ ký tự được đánh dấu là "tên MIME ưa thích" trong sổ đăng ký IANA Tác nhân người dùng phải hỗ trợ ít nhất mã hóa UTF-8 Tác nhân người dùng phải bỏ qua bất kỳ quy tắc @charset nào không có ở đầu biểu định kiểu. Khi tác nhân người dùng phát hiện mã hóa ký tự bằng BOM và/hoặc quy tắc @charset, họ phải tuân theo các quy tắc sau
Tác nhân người dùng phải bỏ qua biểu định kiểu trong mã hóa không xác định Một biểu định kiểu có thể phải tham chiếu đến các ký tự không thể được biểu diễn trong mã hóa ký tự hiện tại. Các ký tự này phải được viết dưới dạng tham chiếu đến các ký tự ISO 10646. Những dấu thoát này có cùng mục đích như tham chiếu ký tự số trong tài liệu HTML hoặc XML (xem, chương 5 và 25) Cơ chế thoát ký tự nên được sử dụng khi chỉ một vài ký tự phải được biểu diễn theo cách này. Nếu hầu hết biểu định kiểu yêu cầu thoát, tác giả nên mã hóa nó bằng mã hóa phù hợp hơn (e. g. , nếu biểu định kiểu chứa nhiều ký tự Hy Lạp, tác giả có thể sử dụng "ISO-8859-7" hoặc "UTF-8") Bộ xử lý trung gian sử dụng mã hóa ký tự khác có thể dịch các chuỗi đã thoát này thành chuỗi byte của mã hóa đó. Mặt khác, bộ xử lý trung gian không được thay đổi các chuỗi thoát làm hủy bỏ ý nghĩa đặc biệt của ký tự ASCII phải ánh xạ chính xác tới ISO-10646 tất cả các ký tự trong bất kỳ mã hóa ký tự nào mà chúng nhận ra (hoặc chúng phải hoạt động như thể chúng đã làm) Ví dụ: biểu định kiểu được truyền dưới dạng ISO-8859-1 (Latin-1) không thể chứa trực tiếp các chữ cái Hy Lạp. "κουρος" (tiếng Hy Lạp. "kouros") phải được viết là "\3BA\3BF\3C5\3C1\3BF\3C2" Ghi chú. Trong HTML 4, các tham chiếu ký tự số được diễn giải trong các giá trị thuộc tính "kiểu" chứ không phải trong nội dung của phần tử STYLE. Do sự bất đối xứng này, chúng tôi khuyên các tác giả nên sử dụng cơ chế thoát ký tự CSS thay vì tham chiếu ký tự số cho cả thuộc tính "kiểu" và phần tử STYLE. Ví dụ: chúng tôi khuyên bạn nên Bộ chọn CSS có thể có số không?Trong CSS, mã định danh (bao gồm tên phần tử, lớp và ID trong bộ chọn) chỉ có thể chứa ký tự [a-zA-Z0-9] và ký tự ISO 10646 U+00A0 trở lên, cùng với dấu gạch nối (- . they cannot start with a digit, two hyphens, or a hyphen followed by a digit.
Làm cách nào để viết bộ chọn id trong CSS?Để sử dụng bộ chọn ID trong CSS, bạn chỉ cần viết thẻ bắt đầu bằng # (#) theo sau là ID của phần tử .
5 bộ chọn trong CSS là gì?Có nhiều loại bộ chọn cơ bản khác nhau. . Bộ chọn phần tử bộ chọn id Bộ chọn lớp Bộ chọn chung Bộ chọn nhóm Bộ chọn thuộc tính Bộ chọn lớp giả Bộ chọn phần tử giả 4 bộ chọn CSS là gì?Bộ chọn CSS . Bộ chọn đơn giản (chọn các phần tử dựa trên tên, id, lớp) Bộ chọn tổ hợp (chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng) Bộ chọn lớp giả (chọn các phần tử dựa trên một trạng thái nhất định) Bộ chọn phần tử giả (chọn và tạo kiểu cho một phần của phần tử) |