Hướng dẫn what are the four css rules? - bốn quy tắc css là gì?
|
Quy tắc CSS bao gồm một bộ chọn và khối khai báo. Show CSS Cú pháp Bộ chọn chỉ vào phần tử HTML bạn muốn tạo kiểu. Khối khai báo chứa một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy. Mỗi tuyên bố bao gồm một tên thuộc tính CSS và một giá trị, được phân tách bằng một dấu hai chấm. Nhiều khai báo CSS được phân tách bằng dấu chấm phẩy và các khối khai báo được bao quanh bởi niềng răng xoăn. Thí dụTrong ví dụ này, tất cả các yếu tố sẽ được liên kết giữa, với màu văn bản màu đỏ: p {& nbsp; & nbsp; màu: màu đỏ; & nbsp; & nbsp; văn bản-align: trung tâm; } Hãy tự mình thử » Ví dụ giải thích
Bạn sẽ tìm hiểu nhiều hơn về các thuộc tính của CSS và CSS trong các chương tiếp theo! Quay lại lớp bốn trang » Bây giờ bạn bắt đầu quen với việc sử dụng một số quy tắc CSS cơ bản, đã đến lúc bắt đầu học "các khái niệm lớn" của CSS. Di truyền, thác, và tính đặc hiệu là ba lớn. Hiểu các khái niệm này sẽ cho phép bạn viết các kiểu dáng rất mạnh mẽ và cũng tiết kiệm thời gian bằng cách viết ít quy tắc CSS hơn. Di sảnTrong CSS, một số kiểu được kế thừa cây tài liệu HTML trong khi những kiểu khác thì không.inherited down the HTML document tree while others are not. Mặc dù điều này có thể gây nhầm lẫn, nguyên tắc đằng sau nó thực sự được thiết kế để cho phép viết ít quy tắc CSS hơn. Phong cách kế thừaCác kiểu được kế thừa thường liên quan đến kiểu dáng của văn bản tài liệu. Thuộc tính phông chữ được kế thừa. Đây là lý do tại sao chúng tôi thường sử dụng phần tử để đính kèm kiểu phông chữ của chúng tôi. Phần tử 1 section). Setting the font property on the 0 element allows the rest of the document to inherit the font rule. 3 Sử dụng quy tắc ở trên, tất cả văn bản (trừ khi chúng tôi chỉ định khác) sẽ là 14px với chiều cao dòng 18px và là Helvetica hoặc Verdana. Phong cách không được kế thừaCác phong cách không được kế thừa thường liên quan đến sự xuất hiện của các yếu tố. Ví dụ, thuộc tính biên giới không được kế thừa, bởi vì nó sẽ không có ý nghĩa. Hãy nhớ những gì xảy ra khi chúng ta sử dụng bộ chọn phổ quát để đặt thuộc tính Border? Trang tham khảo kế thừaNói chung, bạn chỉ có thể sử dụng thông thường để tìm ra một tài sản có được kế thừa hay không. Hãy nghĩ cho chính mình, "Liệu nó có ý nghĩa cho tài sản này được thừa kế không?" Nếu lý luận đơn giản thất bại, trang tham chiếu CSS sau đây liệt kê nhiều thuộc tính CSS. Cột bên phải cho biết liệu thuộc tính có được kế thừa hay không.
Tính đặc hiệuCác quy tắc CSS thường xung đột với nhau. Trong thực tế, đây là những gì chúng tôi muốn. Bí quyết là hiểu làm thế nào các quy tắc mâu thuẫn sẽ được áp dụng. Tính đặc hiệu là một trong những cách mà các quy tắc mâu thuẫn được áp dụng. Bộ chọn có các giá trị quan trọng khác nhau (hoặc tính đặc hiệu). Dưới đây là danh sách ngắn (được liệt kê theo thứ tự quan trọng):
Nếu nhiều quy tắc CSS xung đột với nhau, thì bộ chọn quan trọng nhất hoặc cụ thể là quy tắc sẽ được áp dụng. Tính toán mức độ đặc hiệuThông thường, chúng tôi kết hợp các loại bộ chọn khác nhau trong CSS của chúng tôi để thực hiện các quy tắc. Chúng ta có thể sử dụng một kỹ thuật tương đối đơn giản để đánh giá mức độ đặc hiệu của từng quy tắc. Giả sử chúng ta có đoạn trích HTML sau: 4 Bây giờ giả sử chúng tôi có các quy tắc CSS sau (số dòng được thêm vào cho rõ ràng): 5 Có một hệ thống tính điểm đơn giản cho mỗi kiểu mà bạn cắm vào bố cục ba giá trị như thế này: A - B - C Đây là cách hệ thống tính điểm hoạt động:
Vì vậy, các quy tắc CSS 1-3 trong mã trên đều áp dụng cho cùng một thẻ 6. Cái nào thắng? 7 Như chúng ta có thể thấy, bộ chọn 8 thắng, bởi vì nó là cụ thể nhất. Màu văn bản trong 6 sẽ có màu xanh. Đối với những bạn không quá nghiêng về mặt toán học, luôn có phương pháp đồ họa này. Dòng thácChúng ta đã nói về cách có thể có nhiều nguồn kiểu CSS khác nhau. Làm thế nào để chúng ta biết cái nào sẽ được sử dụng? Trong CSS, phong cách bảng xếp tầng theo thứ tự quan trọng. Nếu các quy tắc trong các bảng phong cách khác nhau xung đột với nhau, thì quy tắc từ bảng phong cách quan trọng nhất sẽ thắng.cascade by order of importance. If rules in different style sheets conflict with one another, the rule from the most important style sheet wins. Dưới đây là danh sách các nguồn có thể của quy tắc CSS. Chúng được liệt kê theo thứ tự quan trọng. Là người tạo ra bảng phong cách, bạn là tác giả.you're the author.
Chúng tôi đã thấy Cascade hoạt động. Tất cả các trình duyệt có một bảng kiểu mặc định, được chỉ định là ít quan trọng nhất. Bất cứ khi nào chúng tôi xác định quy tắc CSS, như gia đình phông chữ, chúng tôi thực sự đang ghi đè quy tắc bảng kiểu trình duyệt mặc định. Đây là tầng trong hành động.overriding a default browser style sheet rule. This is the cascade in action.Điều gì xảy ra khi xung đột xảy ra?Có thể có hai lúc hai hoặc nhiều khai báo được áp dụng cho cùng một yếu tố. Cũng có thể là có thể có một cuộc xung đột giữa họ. Khi xung đột như thế này xảy ra, tuyên bố với trọng lượng cao nhất được sử dụng. Vì vậy, trọng lượng được xác định như thế nào? Các quy tắc Cascade
Để biết mô tả đầy đủ về các quy tắc này, hãy xem những gì xảy ra khi xung đột xảy ra? CSS đặt hàng vấn đềTrong CSS, thứ tự chúng tôi chỉ định các quy tắc của chúng tôi có vấn đề. Nếu một quy tắc từ cùng một bảng kiểu, với cùng mức độ đặc hiệu tồn tại, quy tắc được khai báo cuối cùng trong tài liệu CSS sẽ là quy tắc được áp dụng. Một ví dụ sẽ minh họa điều này tốt nhất. 1. div { color: red; } 2. div#nav { color: blue; } 3. div.links { color: lime; } 4. body div#nav { color: green; } 5. body div#nav ul li { color: aqua; } 6. body div#nav ul li.active { color: purple; }0 Trong mã trên, chúng tôi đã tạo ra các quy tắc cho các đoạn văn là ba màu khác nhau. Rõ ràng, những quy tắc này xung đột với nhau. Quy tắc số 3 là cụ thể nhất vì nó chỉ định tất cả các đoạn cũng có giá trị thuộc tính lớp là 1. div { color: red; } 2. div#nav { color: blue; } 3. div.links { color: lime; } 4. body div#nav { color: green; } 5. body div#nav ul li { color: aqua; } 6. body div#nav ul li.active { color: purple; }1. Quy tắc #1 và #4 Xung đột. Chúng là từ cùng một biểu định phong cách và chúng có cùng mức độ đặc thù. Nếu tất cả những thứ khác bằng nhau trong tầng, chúng tôi sắp xếp theo thứ tự được chỉ định.sort by order specified. Quy tắc số 4 được khai báo cuối cùng trong tài liệu CSS và do đó, ghi đè quy tắc số 1 được khai báo trước đó. Quay lại lớp bốn trang » Các quy tắc CSS là gì?Quy tắc CSS là nhóm của một hoặc nhiều thuộc tính CSS được áp dụng cho một hoặc nhiều phần tử HTML đích. Quy tắc CSS bao gồm bộ chọn CSS và một tập hợp các thuộc tính CSS. Bộ chọn CSS xác định những phần tử HTML nào để nhắm mục tiêu với quy tắc CSS.a grouping of one or more CSS properties which are to be applied to one or more target HTML elements. A CSS rule consists of a CSS selector and a set of CSS properties. The CSS selector determines what HTML elements to target with the CSS rule.
3 Quy tắc CSS là gì?Di truyền, thác, và tính đặc hiệu là ba lớn. Hiểu các khái niệm này sẽ cho phép bạn viết các kiểu dáng rất mạnh mẽ và cũng tiết kiệm thời gian bằng cách viết ít quy tắc CSS hơn. are the big three. Understanding these concepts will allow you to write very powerful stylesheets and also save time by writing fewer CSS rules.
Có bao nhiêu quy tắc trong CSS?W3Schools liệt kê 228 trong số đó.228 of them.
Bốn khả năng của CSS là gì?CSS có thể xác định màu sắc, phông chữ, căn chỉnh văn bản, kích thước, đường viền, khoảng cách, bố cục và nhiều đặc điểm typographic khác, và có thể thực hiện độc lập cho các chế độ xem trên màn hình và in. CSS cũng định nghĩa các phong cách phi vi phạm, chẳng hạn như tốc độ đọc và nhấn mạnh cho độc giả văn bản âm thanh.color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics, and can do so independently for on-screen and printed views. CSS also defines non-visual styles, such as reading speed and emphasis for aural text readers. |
