Cách xóa thuộc tính kế thừa trong CSS
Các phần tử có thể chuyển thông tin kiểu văn bản xuống phần tử con của chúng. Bạn có thể đặt kiểu văn bản trên các phần tử gốc, các kiểu này sẽ xếp tầng xuống và bạn có thể ghi đè các kiểu này trên các phần tử con của chúng Show
Người ta thường sử dụng kỹ thuật này để đặt các kiểu phông chữ chung trên thẻ Nội dung, để căn chỉnh văn bản và các thành phần khác bên trong các phần và để ghi đè các kiểu khối liên kết mặc định. Dưới đây là ba ví dụ được trình bày sâu hơn để cho thấy cách thức hoạt động của xếp tầng kiểu văn bản Ví dụ 1 — Kế thừa các style từ BodyTrong ví dụ này, chúng tôi có một bố cục đơn giản
Theo mặc định, các thành phần này kế thừa kiểu dáng văn bản của chúng từ Nội dung. Bạn có thể thấy điều này bằng cách nhấp vào chỉ báo màu cam bên cạnh kiểu văn bản. Thay đổi họ phông chữ trên Nội dung do đó sẽ thay đổi họ phông chữ cho tất cả các phần tử con của nó. Bạn có thể ghi đè kiểu văn bản kế thừa này bằng cách chọn một trong các thành phần văn bản và thay đổi họ phông chữ. Sau đó, bạn sẽ thấy một chỉ báo màu xanh lam cho biết rằng một thay đổi kiểu dáng đã được thực hiện trên thành phần đó Bạn có thể xóa kiểu này bằng cách nhấp vào chỉ báo màu xanh lam và chọn “Xóa kiểu này” (hoặc giữ ALT và nhấp). Xóa kiểu sẽ đặt họ phông chữ trở lại kế thừa từ phần thân Lưu ý rằng nội dung là thành phần cấp cao nhất, những thay đổi được thực hiện đối với nội dung sẽ chỉ ảnh hưởng đến trang cụ thể đó. Để áp dụng kiểu cho nội dung của tất cả các trang, trước tiên hãy chọn phần tử nội dung và xóa tên lớp. Sau đó, bạn có thể chọn Thẻ của nó và thay đổi kiểu văn bản Ví dụ 2 — Kế thừa kiểu từ MụcMặc dù một phần không phải là thành phần văn bản, bạn có thể áp dụng kiểu phông chữ tại đây. Theo mặc định, một phần sẽ kế thừa kiểu dáng văn bản của nó từ phần tử nội dung. Bạn có thể ghi đè điều này bằng cách chọn phần và thay đổi kiểu văn bản Trước khi thực hiện những thay đổi này, các phần tử Tiêu đề và Đoạn văn đã tìm kiếm tất cả các cách lên đầu cấu trúc phân cấp để lấy các kiểu văn bản của chúng từ phần thân. Lưu ý cách thức, sau khi các thay đổi được thực hiện, cả Tiêu đề và Đoạn văn—con của thành phần phần—hiện kế thừa các kiểu này. Điều này là do việc thay đổi kiểu văn bản trên phần tử phần đã phá vỡ chuỗi kế thừa từ phần thân Việc thay đổi căn chỉnh văn bản thành Trung tâm trên một phần là điều phổ biến. Điều này sẽ căn chỉnh tất cả các phần tử văn bản và khối nội tuyến, như hình ảnh và nút, bên trong một phần được căn giữa Ví dụ 3 — Khối liên kếtTrong ví dụ này, có một số văn bản được lồng trong Khối liên kết. Bạn có thể trực tiếp tạo kiểu cho văn bản này hoặc bạn có thể chọn Khối liên kết và thực hiện các thay đổi tại đây. Giống như trước đây, những thay đổi kiểu này sẽ phá vỡ chuỗi kế thừa và khiến văn bản kế thừa từ Khối liên kết. Để kiểm tra điều này, bạn có thể chọn thành phần văn bản và nhấp vào chỉ báo màu cam để thấy rằng các thay đổi kiểu văn bản trên Khối liên kết cũng được thay đổi tại đây Bạn cũng có thể ghi đè các kiểu văn bản màu xanh lam mặc định của Khối liên kết bằng cách chọn thành phần văn bản và thực hiện các thay đổi. Logic tương tự cũng được áp dụng ở đây—việc tạo kiểu trực tiếp cho thành phần văn bản sẽ ghi đè mọi kiểu văn bản kế thừa Các mối quan hệ tồn tại trong HTML và các mối quan hệ này giúp chúng tôi có thể chọn và tạo kiểu cho các thành phần của trang web. Khi một phần tử HTML được lồng trong một phần tử khác, phần tử bên ngoài được gọi là phần tử cha, trong khi phần tử bên trong là phần tử con 1
Một phần tử con có thể trở thành phần tử cha của một phần tử khác. Tại sao tất cả lời mở đầu và cốt truyện này? . Khi bạn tạo kiểu cho phần tử cha, trong một số trường hợp, kiểu sẽ được kế thừa bởi các phần tử con của nó. Tôi nói một số trường hợp vì kiểu thừa kế này không phải lúc nào cũng đúng Tầm quan trọng của kế thừa CSSNếu bạn đã từng tạo kiểu cho nội dung của một trang web, rất có thể bạn đã không viết kiểu phông chữ cho mọi thành phần phải hiển thị văn bản. Có thể bạn chỉ thêm các kiểu phông chữ của mình vào phần tử cơ thể, chẳng hạn 1
|