Có phải tất cả các thuộc tính CSS đều được kế thừa?
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 ________1 Bâ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 đó Thuộc tính CSS nào không được kế thừa?Mỗi phần tử HTML có mọi thuộc tính CSS được xác định theo mặc định với một giá trị ban đầu. Giá trị ban đầu là thuộc tính không được kế thừa và hiển thị dưới dạng mặc định nếu tầng không tính được giá trị cho phần tử đó
Thuộc tính CSS nào có thể được kế thừa?Từ khóa CSS inherit làm cho phần tử lấy giá trị tính toán của thuộc tính từ phần tử cha của nó. Nó có thể được áp dụng cho bất kỳ thuộc tính CSS nào, bao gồm cả thuộc tính tốc ký CSS all .
Các thuộc tính CSS chiều rộng và chiều cao có được kế thừa theo mặc định không?initial - Đặt chiều cao/chiều rộng thành giá trị mặc định. kế thừa - Chiều cao/chiều rộng sẽ được kế thừa từ giá trị gốc .
Những phong cách nào được kế thừa?Cá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 ta thường sử dụng phần tử |