Thuộc tính kế thừa của CSS là gì?
Kế thừa CSS mô tả cách các kiểu nhất định được khởi tạo hoặc tính toán tùy thuộc vào thuộc tính CSS và liệu giá trị có được đặt hay không. Một số thuộc tính được kế thừa với giá trị ban đầu, mặc định. Các thuộc tính khác không được kế thừa và được đặt thành giá trị được tính toán của phần tử chứa nó theo mặc định Show
Các thuộc tính kế thừa áp dụng cho phần tử và phần tử con của nó Thuộc tínhMô tả 1Đặt màu văn bản của một phần tử. 2Thuộc tính 2 đặt giao diện của con trỏ chuột khi di chuột qua một phần tử. 4Đặt thuộc tính phông chữ của phần tử trong một khai báo. 5Chỉ định kiểu chữ phông chữ trong bộ quy tắc. 6Đặt kích thước phông chữ cho văn bản của phần tử. 7Để đặt kiểu phông chữ mà văn bản sẽ xuất hiện. 8Để đặt văn bản dày hơn hoặc mỏng hơn. 9Đặt khoảng cách ngang giữa các ký tự riêng lẻ trong một phần tử. 0Đặt khoảng cách dọc giữa các dòng văn bản. 20Để đặt căn chỉnh văn bản của nội dung trong dòng. 21Thụt lề (để trống) dòng đầu tiên trong khối văn bản. ________ 222 Đặt phương thức biện minh cho văn bản khi ________ 223 được áp dụng cho một phần tử. 24Thêm bóng vào văn bản. 25Chỉ định cách viết hoa văn bản của phần tử. 26Ẩn hoặc hiển thị một thành phần mà không ảnh hưởng đến vị trí của nó trong trang. 27Đặt khoảng cách giữa các từThuộc tính không được thừa kế không được thừa kế bởi con của nó Thuộc tính Mô tảTất cả thuộc tính nềnThêm hình ảnh nền cho phần tử HTML. Tất cả các thuộc tính đường viền Xác định kiểu đường viền của một phần tử. 28Bao gồm 29 và 20 trong phép tính 21 và 22 của một nguyên tố. Tất cả các thuộc tính của Flexbox Sắp xếp các phần tử một cách nhạy bén và theo kích thước màn hình. 23Định vị lại một phần tử sang bên trái hoặc bên phải của phần tử chứa nó. Tất cả các thuộc tính Lưới Sử dụng các hàng, cột và khoảng trống để sắp xếp nội dung trên trang web. Tất cả thuộc tính ________ 224 Đặt khoảng cách bên ngoài đường viền của phần tử. Tất cả các thuộc tính tràn Quản lý nội dung tràn ra bên ngoài hộp của nó. Tất cả các thuộc tính đệmĐặt khoảng cách giữa nội dung và lề của một phần tử. Tất cả các thuộc tính vị trí Xác định vị trí của một phần tử trên trang web. Tất cả các thuộc tính định cỡXác định các giá trị 21 và 22 của một phần tử. 27Tạo kiểu cho văn bản của một phần tử bằng cách trang trí đường kẻ. 28Chỉ định cách báo hiệu nội dung ẩn cho người dùng. ________ 229 Cho phép chúng tôi xoay, chia tỷ lệ, nghiêng và dịch một phần tử. 40Đặt vị trí của phần tử được biến đổi so với nguồn gốc của nó. 41Xác nhận xem phần tử con của phần tử có được làm phẳng hoặc định vị trong không gian 3D hay không. Tất cả các thuộc tính chuyển tiếp Kiểm soát tốc độ hoạt ảnh và thời gian thay đổi thuộc tính trong một phần tử Người ta thường thấy sự thừa kế đang hoạt động trong cuộc sống thực. Trừ khi có một số yếu tố khác phát huy tác dụng, còn không thì thường xảy ra trường hợp cha mẹ cao thì con cao, v.v. Chúng ta có thể thấy một cái gì đó tương tự trong CSS Nếu bạn đặt màu trên phần tử vùng chứa thành màu xanh lá cây, thì trừ khi một số quy tắc ghi đè giá trị màu đó, màu của tất cả các phần tử bên trong vùng chứa sẽ có màu xanh lá cây. Cơ chế mà qua đó giá trị của một số thuộc tính nhất định được truyền từ phần tử cha sang phần tử con được gọi là thừa kế Trong bài viết này, bạn sẽ tìm hiểu về các khía cạnh khác nhau của thừa kế và cách nó ảnh hưởng đến sự xuất hiện của các phần tử khác nhau Kế thừa CSS hữu ích như thế nào?Kế thừa CSS giúp giảm đáng kể thời gian và công sức cần thiết để tạo một trang web. Hãy tưởng tượng bạn sẽ phải viết bao nhiêu CSS để đặt màu cho tất cả phần tử con của thẻ 3. Điều này sẽ tốn thời gian, dễ xảy ra lỗi và khó bảo trì. Tương tự, bạn có thể tưởng tượng cơn ác mộng sẽ như thế nào nếu bạn buộc phải đặt 5 hoặc 6 trên mọi phần tử con của vùng chứaNhìn vào bản demo sau Xem ví dụ về Kế thừa Pen CSS của SitePoint (@SitePoint) trên CodePen Ở đây tôi đã định nghĩa các thuộc tính 5, 6 và 1 trên phần tử 3 nhưng tất cả các giá trị này được kế thừa bởi các phần tử khác nhau được lồng bên trong 3. Điều này mang lại sự đồng nhất cho bố cục mà không cần lặp lại các thuộc tính giống nhau trên nhiều phần tửChỉ một số thuộc tính nhất định được kế thừaTrong cuộc sống thực, không phải tất cả các thuộc tính của cha mẹ đều được truyền cho con cái của họ. Điều này cũng đúng trong CSS; . Trên thực tế, nếu tất cả các thuộc tính đều được kế thừa, hiệu ứng sẽ tương tự như không có sự kế thừa nào cả và bạn sẽ phải viết rất nhiều CSS để ghi đè hành vi này Ví dụ: nếu thuộc tính 4 có thể kế thừa, việc đặt đường viền trên một phần tử sẽ khiến cùng một đường viền xuất hiện trên tất cả các phần tử con của nó. Tương tự, nếu con cái được thừa kế tài sản 5 từ cha mẹ, kết quả sẽ rất lộn xộn. Ví dụ về CodePen sau đây minh họa loại thứ này sẽ trông như thế nào khi sử dụng giá trị từ khóa CSS mà tôi sẽ thảo luận trong phần tiếp theoXem Bút Đường viền sẽ hoạt động như thế nào nếu chúng được SitePoint (@SitePoint) kế thừa theo mặc định trên CodePen Buộc thừa kếNói chung, việc có để tài sản thừa kế hay không là do lẽ thường. Ví dụ: ngoài các ví dụ đã thảo luận trong phần trước, bạn có thể không muốn tất cả các phần tử con của một phần tử kế thừa giá trị phần đệm của phần tử cha của chúng. Tuy nhiên, bạn thường thích màu của văn bản hoặc phông chữ được sử dụng cho các thành phần con khác nhau của vùng chứa giống nhau Trong một số trường hợp, một thuộc tính cụ thể có thể không được kế thừa nhưng bạn vẫn có thể muốn nó được kế thừa từ phần tử cha. Điều này có thể đạt được bằng cách đặt giá trị của thuộc tính đó thành 6 cho phần tử con
Giả sử bạn muốn màu của tất cả các thành phần liên kết trên trang web của mình giống với màu được xác định trên thành phần chính của chúng. Có một vài cách để làm điều này. Ví dụ, bạn có thể sử dụng các lớp khác nhau cho các liên kết và thành phần vùng chứa với các màu khác nhau. Tuy nhiên, một trong những cách rõ ràng nhất để làm điều này là sử dụng từ khóa 6Khi thuộc tính màu của các thành phần liên kết được đặt thành 6, chúng sẽ bắt đầu kế thừa màu của cha mẹ chúng
Đây là bản demo Xem Bút Sử dụng từ khóa `inherit` để buộc kế thừa bởi SitePoint (@SitePoint) trên CodePen Kế thừa bằng cách sử dụng tốc ký CSSĐiểm đặc biệt của từ khóa 6 là khi bạn áp dụng nó cho một thuộc tính tốc ký, nó sẽ áp dụng cho tất cả các thuộc tính phụ, ngay cả những thuộc tính mà bạn có thể không nhận ra lúc đầu đang bị buộc phải kế thừa. Ngoài ra, với cách viết tắt, bạn không thể chỉ định rằng một thuộc tính phụ sẽ kế thừa một giá trịVí dụ: bạn có thể muốn đoạn CSS sau áp dụng đường viền liền có chiều rộng 1px có màu được kế thừa từ phần tử gốc. Tuy nhiên, tuyên bố thực sự không hợp lệ
Tương tự, bạn không thể sử dụng các thuộc tính tốc ký để đặt lề hoặc phần đệm thành một giá trị cụ thể ở một bên và thành một giá trị kế thừa ở bên kia. Điều này một lần nữa sẽ làm cho tuyên bố không hợp lệ 0Một giải pháp cho vấn đề này là đặt thuộc tính mà bạn muốn kế thừa thành một số giá trị tùy ý, sau đó sử dụng 6 với thuộc tính longhand tương ứng 2Thiếu giá trị tốc kýKhi viết tốc ký, bất kỳ thuộc tính phụ bị thiếu nào có giá trị chưa được cung cấp rõ ràng sẽ được đặt thành giá trị ban đầu (hoặc mặc định) của nó. Hãy xem xét CSS sau 3Ở đây, văn bản đoạn văn sẽ không kế thừa giá trị của 1 từ vùng chứa của nó. Giá trị 1 sẽ thực sự được đặt lại về giá trị ban đầu là 3. Do đó, trong trường hợp này, nếu bạn muốn phần viết tắt của cha 4 được kế thừa mà vẫn đảm bảo rằng đoạn còn lại là 5, bạn sẽ phải sử dụng thuộc tính phần viết tắt của 6Xem Kế thừa CSS bút và viết tắt của SitePoint (@SitePoint) trên CodePen Sử dụng DevTools để xem các giá trị kế thừaDevTools có thể được sử dụng để xem các thuộc tính mà một phần tử kế thừa từ phần tử cha của nó hoặc từ một phần tử khác trên cây DOM. Như đã đề cập, không phải tất cả các thuộc tính của phần tử cha đều có thể kế thừa. Tất cả các thuộc tính có thể kế thừa đều không đi đến cuối chuỗi thừa kế mà không bị quy tắc CSS khác ghi đè ở một nơi khác DevTools cung cấp cho bạn các dấu hiệu trực quan khác nhau để dễ dàng phân biệt giữa tất cả các thuộc tính đó. Bạn có thể thấy các thuộc tính này trong ảnh chụp màn hình bên dưới, lấy từ CSS của SitePoint Bất kỳ thuộc tính nào không thể kế thừa bởi phần tử đã chọn đều bị làm mờ. Các thuộc tính có thể kế thừa nhưng đã bị ghi đè được hiển thị bằng văn bản gạch ngang Danh sách thuộc tính CSS được kế thừaDường như không có một nguồn chính thức nào liệt kê tất cả các thuộc tính CSS kế thừa, nhưng dưới đây là danh sách có thể đúng, dựa trên một số nguồn
Ngoài ra còn có một số thuộc tính CSS liên quan đến giọng nói được kế thừa và không có trong danh sách trên Dưới đây là một vài nguồn cho danh sách tài sản thừa kế
Bạn cũng có thể xem thông tin về một thuộc tính CSS riêng lẻ trong thông số kỹ thuật hoặc trong bất kỳ tham chiếu CSS toàn diện nào và nó thường sẽ cho bạn biết liệu thuộc tính đó có được kế thừa theo mặc định hay không Phần kết luậnĐể tóm tắt những gì tôi đã thảo luận. thừa kế cho phép bạn tránh viết các quy tắc CSS trùng lặp để áp dụng cùng một bộ thuộc tính cho tất cả các phần tử con của một phần tử. Nó đơn giản hóa rất nhiều quá trình thêm kiểu vào trang web và do đó là một tính năng tuyệt vời của CSS CSS cũng cho phép bạn sử dụng từ khóa 6 để buộc kế thừa trên các thuộc tính không được kế thừa theo mặc định. DevTools cung cấp cho bạn quyền truy cập dễ dàng vào tất cả các thuộc tính mà một phần tử kế thừa từ tổ tiên của nó. Điều này có thể giúp bạn nhanh chóng tìm ra giải pháp cho các vấn đề phổ biến liên quan đến bố cụcChia sẻ bài viết nàyAsha Laxmi Asha là một nhà phát triển và người hướng dẫn front-end, thích làm việc với các thư viện JavaScript mới và thú vị. Cô ấy cũng thích đi du lịch và cô ấy đọc rất nhiều sách khi rảnh rỗi Thuộc tính kế thừa là gì?Thuộc tính được kế thừa là thuộc tính được kế thừa từ lớp sản phẩm gốc . Bạn tùy chỉnh miền thuộc tính kế thừa bằng cách chỉnh sửa định nghĩa của nó ở cấp lớp con. Khi bạn chỉnh sửa định nghĩa thuộc tính được kế thừa, các thay đổi sẽ truyền tới tất cả các thành viên của lớp con, bao gồm các lớp con khác trong lớp con đó.
Kế thừa và khởi tạo trong CSS là gì?kế thừa. Lấy thuộc tính từ phần tử cha. ban đầu. Giá trị mặc định cho thuộc tính (mặc định của trình duyệt) . bỏ đặt. Hoạt động như một trong hai kế thừa hoặc ban đầu. Nó sẽ hoạt động như kế thừa nếu cha mẹ có giá trị phù hợp, nếu không, nó sẽ hoạt động như ban đầu.
Tự động và kế thừa trong CSS là gì?auto - Trình duyệt tính chiều cao. Đây là mặc định. inherit - Chỉ định rằng giá trị của thuộc tính chiều cao sẽ được kế thừa từ phần tử cha .
Làm cách nào để kế thừa lớp CSS?Kế thừa CSS trong CSS
. Bộ chọn thuộc tính cho phép chúng ta áp dụng các thuộc tính của nút cơ sở cho bất kỳ phần tử nào có lớp khớp với “nút-“. Nó trông như thế này. [class*=“button-“] {/* thuộc tính nút cơ sở */ }. move the inheritance to CSS with the attribute selector. The attribute selector allows us to apply the base button properties to any element with a class that matches “button-“. It looks like this: [class*=“button-“] { /* base button properties */ } . |