Thứ tự lớp CSS
|
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 tìm hiểu các "khái niệm lớn" của CSS. Kế thừa, Cascade và Tính đặc hiệu là ba yếu tố lớn. Hiểu những khái niệm này sẽ cho phép bạn viết các biểu định kiểu 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 Show Trong CSS, một số kiểu được kế thừa xuống cây tài liệu HTML trong khi những kiểu khác thì không Mặc dù điều này có thể gây nhầm lẫn, nhưng 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 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 các kiểu phông chữ của mình Phần tử 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ẽ có kích thước 14px với chiều cao dòng 18px và là Helvetica hoặc Verdana Các kiểu không được kế thừaCác kiểu không được kế thừa thường liên quan đến sự xuất hiện của các phần tử Ví dụ: thuộc tính đường viền không được kế thừa vì nó sẽ không có ý nghĩa. Hãy nhớ điều gì xảy ra khi chúng ta sử dụng bộ chọn chung để đặt thuộc tính đường viền? Trang tham khảo thừa kếNói chung, bạn chỉ cần sử dụng lẽ thường để tìm hiểu xem một tài sản có được thừa kế hay không. Hãy tự nghĩ: "Có nên thừa kế tài sản này không?" Nếu lý luận đơn giản không thành công, trang tham chiếu CSS sau đây sẽ liệt kê nhiều thuộc tính CSS. Cột bên phải cho biết tài sản có được thừa kế hay không Cá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 các quy tắc xung đột sẽ được áp dụng như thế nào Tính cụ thể là một trong những cách mà các quy tắc xung đột được áp dụng Bộ chọn có các giá trị quan trọng (hoặc tính đặc hiệu) khác nhau. Đâ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 cụ thể hoặc quan trọng nhất sẽ được áp dụng Tính toán mức độ cụ thểThô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 mình để tạo 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ụ thể của từng quy tắc Giả sử chúng ta có đoạn mã HTML sau ________1Bây giờ, giả sử chúng ta có các quy tắc CSS sau (số dòng được thêm vào để rõ ràng)
Có một hệ thống tính điểm đơn giản cho từng kiểu mà bạn đưa 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, tất cả các quy tắc CSS 1-3 trong đoạn mã trên đều áp dụng cho cùng một thẻ
Như chúng ta có thể thấy, bộ chọn
Đối với những bạn không thiên về toán học, luôn có phương pháp đồ thị này Chúng ta đã nói về cách có thể có nhiều nguồn phong cách 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, các biểu định kiểu xếp tầng theo thứ tự quan trọng. Nếu các quy tắc trong các biểu định kiểu khác nhau xung đột với nhau, thì quy tắc từ biểu định kiểu quan trọng nhất sẽ thắng Dưới đây là danh sách các nguồn có thể có của quy tắc CSS. Chúng được liệt kê theo thứ tự quan trọng. Là người tạo biểu định kiểu, bạn là tác giả
Chúng tôi đã thấy thác trong hành động. Tất cả các trình duyệt đều có biểu định kiểu mặc định, được chỉ định là ít quan trọng nhất Điều gì xảy ra khi xung đột xảy ra?Đôi khi có thể áp dụng hai hoặc nhiều khai báo cho cùng một phần tử. Cũng có thể giữa họ có mâu thuẫn. Khi xung đột như thế này xảy ra, khai báo có trọng số cao nhất được sử dụng. 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 Điều gì xảy ra khi xung đột xảy ra? Các vấn đề về đơn đặt hàng CSSTrong CSS, thứ tự mà chúng tôi chỉ định các quy tắc của mình rất quan trọng Nếu tồn tại một quy tắc từ cùng một biểu định kiểu, có cùng mức độ cụ thể, thì 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
Trong đoạn mã trên, chúng tôi đã tạo quy tắc cho các đoạn văn có ba màu khác nhau. Rõ ràng, các quy tắc này mâu thuẫn với nhau Quy tắc #3 là quy tắc 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à
Quy tắc #4 được khai báo cuối cùng trong tài liệu CSS và do đó, ghi đè Quy tắc #1 đã khai báo trước đó Các lớp được áp dụng CSS theo thứ tự nào?Thứ tự ghi đè các thuộc tính được xác định theo vị trí chúng xuất hiện trong CSS, không phải theo thứ tự các lớp được xác định trong thuộc tính lớp, i. e. kiểu được xác định ở cuối lớp CSS sẽ là kiểu được áp dụng .
Thứ tự của các lớp CSS có quan trọng không?Các vấn đề về đơn đặt hàng CSS
. Nếu tồn tại một quy tắc từ cùng một biểu định kiểu, có cùng mức độ cụ thể, thì 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. the order in which we specify our rules matters. If a rule from the same style sheet, with the same level of specificity exists, the rule that is declared last in the CSS document will be the one that is applied.
Thứ tự ưu tiên cho CSS là gì?Thứ tự ưu tiên của vị trí là. quy tắc mặc định của trình duyệt, quy tắc biểu định kiểu bên ngoài, kiểu nhúng và quy tắc kiểu nội tuyến .
Làm cách nào để đặt hàng bộ chọn CSS?Từ Chung đến Cụ thể
. ❧ Khi sắp xếp quy tắc, hãy sử dụng bộ chọn đầu tiên của mỗi quy tắc để xác định vị trí của quy tắc, cả trong phần và trong biểu định kiểu. Làm điều này sau khi tất cả các bộ chọn của quy tắc đã được sắp xếp. sort by the first simple selector, then the next, &c. ❧ When sorting rules, use the first selector of each rule to determine the rule's location, both within a section and within the style sheet. Do this after all the rules' selectors have been sorted. |
