Kế thừa mô-đun CSS
|
Mô-đun CSS3 này mô tả cách các giá trị được gán cho thuộc tính. CSS cho phép một số biểu định kiểu ảnh hưởng đến việc hiển thị tài liệu và quá trình kết hợp các biểu định kiểu này được gọi là "xếp tầng". Nếu không thể tìm thấy giá trị nào thông qua xếp tầng, một giá trị có thể được kế thừa từ phần tử cha hoặc giá trị ban đầu của thuộc tính được sử dụng Show
Tình trạng của tài liệu nàyPhần này mô tả trạng thái của tài liệu này tại thời điểm xuất bản. Các tài liệu khác có thể thay thế tài liệu này. Danh sách các ấn phẩm hiện tại của W3C và bản sửa đổi mới nhất của báo cáo kỹ thuật này có thể được tìm thấy trong chỉ mục báo cáo kỹ thuật của W3C tại http. //www. w3. tổ chức/TR/ Việc xuất bản dưới dạng Dự thảo làm việc không có nghĩa là sự chứng thực của Tư cách thành viên W3C. Đây là một tài liệu dự thảo và có thể được cập nhật, thay thế hoặc lỗi thời bởi các tài liệu khác bất cứ lúc nào. Không phù hợp để trích dẫn tài liệu này ngoài công việc đang tiến hành Danh sách gửi thư công cộng (được lưu trữ) www-style@w3. org (xem hướng dẫn) được ưu tiên thảo luận về thông số kỹ thuật này. Khi gửi e-mail, vui lòng đặt văn bản “css3-cascade” trong chủ đề, tốt nhất là như thế này. “[css3-cascade] …tóm tắt nhận xét…” Tài liệu này được sản xuất bởi Nhóm làm việc CSS (một phần của Hoạt động Phong cách) Tài liệu này được sản xuất theo CPP ngày 24 tháng 1 năm 2002 được sửa đổi bởi Thủ tục chuyển đổi chính sách bằng sáng chế của W3C. Nhóm Công tác duy trì một danh sách công khai các tiết lộ bằng sáng chế liên quan đến tài liệu này; . Một cá nhân thực sự hiểu biết về bằng sáng chế mà cá nhân đó tin rằng có chứa (các) Yêu cầu cơ bản đối với thông số kỹ thuật này nên tiết lộ thông tin theo Đây là bản nháp của một mô-đun CSS cấp 3. Nó có thể sẽ được đi kèm với một số mô-đun khác trước khi nó trở thành một Mục đích chính của mô-đun này là viết lại các phần có liên quan của CSS2 dưới dạng mô-đun cho CSS3. Ngoại trừ giá trị @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 và @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
1, tất cả các tính năng được mô tả trong mô-đun này cũng tồn tại trong CSS2. So với CSS2, thứ tự xếp tầng đã được thay đổi trong hai trường hợp như đã lưu ý trong văn bảnMục lục1. Phụ thuộc vào các mô-đun khácMô-đun CSS3 này phụ thuộc vào các mô-đun CSS3 khác sau đây
Nó có các tham chiếu không quy chuẩn (mang tính thông tin) đến các mô-đun CSS3 khác sau đây
2. Giới thiệuMột trong những nguyên tắc thiết kế cơ bản của CSS là cho phép một số biểu định kiểu, có thể từ các nguồn khác nhau, ảnh hưởng đến việc hiển thị tài liệu. Mô-đun CSS3 này mô tả cách chọn một trong số các khai báo xung đột trên một tổ hợp phần tử/thuộc tính nhất định. Cơ chế được sử dụng trong quá trình lựa chọn được gọi là "xếp tầng". Khi không có khai báo nào cố gắng đặt giá trị của tổ hợp phần tử/thuộc tính, giá trị sẽ được kế thừa từ phần tử cha hoặc được đặt thành "giá trị ban đầu" của thuộc tính 3. Đầu vào và đầu ra của mô-đun nàyĐầu vào của quá trình xếp tầng và kế thừa là
Đầu ra của quá trình xếp tầng và kế thừa là một giá trị duy nhất, được gọi là giá trị được chỉ định Giá trị đã chỉ định được tìm thấy bằng cách sử dụng thuật toán giả sau
Giá trị được chỉ định có thể cần một số tính toán trước khi có thể sử dụng. Ví dụ: giá trị được chỉ định của thuộc tính 'cỡ chữ' cho một thành phần nhất định có thể là @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
6 cần được chuyển đổi thành các đơn vị dành riêng cho thiết bị trước khi được sử dụng để hiển thị tài liệu. Tính toán trên các giá trị đã chỉ định được mô tả trong mô-đun Giá trị và Đơn vị4. Biểu định kiểu bao gồm các biểu định kiểu khác. quy tắc @import url("fineprint.css") print; @import url("bluish.css") projection, tv; @import url("narrow.css") handheld and (max-width: 400px); 7[Khi phần này được viết lại để xác định rõ ràng hơn về sự tuân thủ của tác nhân người dùng, nó sẽ nêu rõ rằng (1) danh sách phương tiện được chỉ định trong quy tắc @import ngăn không cho quá trình nhập được xử lý nếu phương tiện không khớp, nhưng nó không " . (2) @import không có phương tiện phải bỏ qua bất kỳ phương tiện nào được chỉ định cho cùng một biểu định kiểu trong liên kết từ tài liệu. ] Quy tắc '@import' cho phép người dùng nhập quy tắc kiểu từ các biểu định kiểu khác. Bất kỳ quy tắc @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 nào cũng phải tuân theo tất cả quy tắc @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
9 và trước tất cả các quy tắc và bộ quy tắc khác trong biểu định kiểu. Từ khóa @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 phải được theo sau bởi URI của biểu định kiểu để bao gồm. Một chuỗi cũng được cho phép; Các dòng sau đây có ý nghĩa tương đương và minh họa cả hai cú pháp @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 (một cú pháp với @import url(layout1.css) screen "Plain style"; @import url(colors1.css) screen "Plain style"; @import url(style4.css) "Four-columns and dark";2 và một cú pháp với chuỗi rỗng) @import "mystyle.css";
@import url("mystyle.css");
Để tác nhân người dùng có thể tránh truy xuất tài nguyên cho các loại phương tiện không được hỗ trợ, tác giả có thể chỉ định quy tắc @import phụ thuộc vào phương tiện. Các lần nhập có điều kiện này chỉ định "truy vấn phương tiện" được phân tách bằng dấu phẩy sau URI Các quy tắc sau đây minh họa cách các quy tắc @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 có thể được thực hiện phụ thuộc vào phương tiện truyền thông@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
Cú pháp đầy đủ của các biểu thức sau URL được xác định bởi đặc tả Truy vấn phương tiện Trong trường hợp không có bất kỳ truy vấn phương tiện nào, việc nhập là vô điều kiện. Chỉ định 'tất cả' cho phương tiện cũng có tác dụng tương tự Ở cuối quy tắc @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 (sau bất kỳ truy vấn phương tiện nào), có thể có một chuỗi gán tên cho quá trình nhập@import url(layout1.css) screen "Plain style"; @import url(colors1.css) screen "Plain style"; @import url(style4.css) "Four-columns and dark"; Các mục nhập có tên khác (cùng với bất kỳ tên nào xem bên dưới) đại diện cho các biểu định kiểu thay thế. UA sẽ cung cấp một cách để người dùng chọn một phương án thay thế theo tên Các quy tắc để nhập biểu định kiểu như sau
Biểu định kiểu chỉ được nhập nếu truy vấn phương tiện trên @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 (nếu có) khớp với phương tiện mà UA hiển thị tài liệuNếu một @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 bị bỏ qua, thì tất cả các @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 bên trong biểu định kiểu mà nó trỏ tới cũng bị bỏ qua, bất kể tên của chúng là gìHTML sử dụng thuật ngữ biểu định kiểu ưa thích cho các biểu định kiểu được đặt tên mà tác giả đã đánh dấu là mặc định. Trong CSS, đây là tất cả các biểu định kiểu có tên là tên đầu tiên xuất hiện trên bất kỳ @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 hoặc @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
1 nào. Các biểu định kiểu thay thế là tất cả các biểu định kiểu được đặt tên khác. Cuối cùng, HTML gọi các biểu định kiểu mà không có tên biểu định kiểu liên tục, bởi vì chúng được nhập cùng với các biểu định kiểu ưa thích cũng như với bất kỳ lựa chọn thay thế nàoUA không chỉ cung cấp cho người dùng lựa chọn các biểu định kiểu thay thế mà còn cho phép người dùng tắt tất cả các biểu định kiểu. Xem [ở đâu?] Danh sách các biểu định kiểu thay thế mà người dùng có thể chọn bao gồm
I. e. , UA không được tìm kiếm các tên bổ sung bằng cách nhấp vào các liên kết có thuộc tính @import "common1.css"; @import "yellowfish.css" "Yellow Fish"; @import "simple.css" "Simple"; @import "extra.css" "Yellow Fish"; @import "deco-a.css" "Budapest"; @import "deco-b.css" "Budapest"; @import "common2.css";9 hoặc các quy tắc có tên @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0Các tên được so khớp phân biệt chữ hoa chữ thường hay chữ hoa chữ thường? Sẽ dễ đọc hơn nếu chúng ta đặt trước tên bằng một từ khóa hoặc một số dấu chấm câu? . g. , @media print {
body { font-size: 12pt; }
h1 { font-size: 24pt; }
}
@media screen and (color) {
body { font-size: medium; }
h1 { font-size: 2em; }
}
@media screen, print {
body { line-height: 1.2; }
}
0Quy tắc @media chỉ định các loại phương tiện đích (được phân tách bằng dấu phẩy) của một bộ quy tắc (được phân tách bằng dấu ngoặc nhọn). Cấu trúc @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
1 cho phép các quy tắc biểu định kiểu cho các phương tiện khác nhau trong cùng một biểu định kiểu@media print {
body { font-size: 12pt; }
h1 { font-size: 24pt; }
}
@media screen and (color) {
body { font-size: medium; }
h1 { font-size: 2em; }
}
@media screen, print {
body { line-height: 1.2; }
}
Cú pháp đầy đủ của các biểu thức sau @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
1 được xác định bởi đặc tả Truy vấn phương tiệnSau các truy vấn phương tiện, trước dấu "{", có thể có một chuỗi gán tên cho quy tắc @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
1@media all "Ultra blue" {
body { background: blue }
h1 { color: cyan }
}
@media screen, print "Simple and light" {
body { background: white; color: #333 }
h2 { font-size: bigger }
}
Tất cả các quy tắc @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
1 có tên, cùng với bất kỳ quy tắc @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
0 nào có cùng tên, trình bày các biểu định kiểu thay thế. UA phải đọc các quy tắc bên trong một số quy tắc @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
1 và bỏ qua các quy tắc khác, như sau
6. xếp tầngMục đích của xếp tầng là để tìm một khai báo chiến thắng trong tập hợp các khai báo áp dụng cho một kết hợp phần tử/thuộc tính nhất định Tác nhân người dùng phải sắp xếp khai báo theo các tiêu chí sau, theo thứ tự quan trọng
Quá trình sắp xếp tiếp tục cho đến khi tìm thấy một tuyên bố chiến thắng 7. Di sảnKế thừa là một cách truyền các giá trị thuộc tính từ các phần tử cha sang phần tử con của chúng. Kế thừa có nghĩa là giá trị đã chỉ định của tổ hợp phần tử/thuộc tính nhất định được sao chép từ giá trị được tính toán của phần tử cha. Phần tử gốc, không có phần tử cha, kế thừa giá trị ban đầu của thuộc tính Một số tài sản được cho là được thừa kế. Điều này có nghĩa là, trừ khi một giá trị được chỉ định cho sự kết hợp phần tử/thuộc tính, giá trị sẽ được xác định bởi tính kế thừa Tất cả các thuộc tính chấp nhận giá trị @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
3 xác định rõ ràng rằng giá trị sẽ được xác định theo thừa kế. Giá trị @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
3 có thể được sử dụng để củng cố các giá trị kế thừa và nó cũng có thể được sử dụng trên các thuộc tính thường không được kế thừa. Nếu giá trị @import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
3 được đặt trên phần tử gốc, thuộc tính được gán giá trị ban đầu của nó8. Giá trị ban đầuMỗi thuộc tính có một giá trị ban đầu trở thành giá trị được chỉ định khi xếp tầng và kế thừa không mang lại giá trị. Ngoài ra, giá trị ban đầu có thể được chỉ định rõ ràng bằng từ khóa 9. tính trọng lượngĐể sắp xếp các khai báo trong quy trình xếp tầng, trọng số của một khai báo phải được biết. Trong CSS3, trọng số của một khai báo dựa trên nguồn gốc của khai báo và mức độ quan trọng được đánh dấu của nó Biểu định kiểu CSS có thể có ba nguồn gốc khác nhau. tác giả, người dùng và tác nhân người dùng (UA)
Mỗi khai báo CSS có thể có hai mức độ quan trọng. bình thường (được mặc định) và quan trọng (phải được đánh dấu). Mô-đun cú pháp CSS3 mô tả cách khai báo được đánh dấu là quan trọng Trọng số của các biểu định kiểu từ các nguồn gốc khác nhau, theo thứ tự tăng dần, là
Theo mặc định, chiến lược này cho phép khai báo của tác giả có trọng số hơn so với khai báo của người dùng. Do đó, điều quan trọng là UA cung cấp cho người dùng khả năng tắt ảnh hưởng của một biểu định kiểu nhất định, chẳng hạn như. g. , thông qua menu kéo xuống Khai báo trong biểu định kiểu đã nhập có trọng số thấp hơn so với khai báo trong biểu định kiểu từ nơi chúng được nhập. Các biểu định kiểu đã nhập có thể tự nhập và ghi đè các biểu định kiểu khác theo cách đệ quy và áp dụng các khai báo ưu tiên tương tự Nếu tác nhân người dùng chọn tôn trọng các gợi ý trình bày từ các nguồn khác ngoài biểu định kiểu, thì các gợi ý này phải có cùng trọng số như biểu định kiểu mặc định của tác nhân người dùng. Quy tắc này dành cho các gợi ý trình bày trong HTML Các lớp CSS có thể kế thừa không?CSS cung cấp năm giá trị thuộc tính chung đặc biệt để kiểm soát quyền thừa kế . Mọi thuộc tính CSS đều chấp nhận các giá trị này. Đặt giá trị thuộc tính được áp dụng cho một phần tử được chọn giống với giá trị của phần tử cha của nó. Thực tế, điều này "bật kế thừa".
Các mô-đun CSS có toàn cầu không?Theo kho lưu trữ GitHub của Mô-đun CSS chính thức, Mô-đun CSS là một tệp CSS trong đó tất cả tên lớp và tên hoạt ảnh được đặt trong phạm vi cục bộ theo mặc định. Ngược lại, trong một tệp CSS thông thường, tất cả các bộ chọn CSS nằm trong phạm vi chung .
Đâu là sự khác biệt giữa. CSS và CSS mô-đun?Thay vì có các lớp và tệp CSS tĩnh, Mô-đun CSS tạo triển khai động có phạm vi cục bộ cho HTML với sự trợ giúp của Webpack hoặc Browserify. CSS Modules is popular in React because of the following reasons: Scoped: CSS Modules are scoped when you use them the right way.
Các mô-đun CSS có tốt không?Mô-đun CSS rất phổ biến vì chúng tự động đặt tên lớp và hoạt ảnh là duy nhất nên bạn không phải lo lắng về xung đột tên bộ chọn. |
