CSS kế thừa tất cả

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ẻ

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

1. Đ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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

2 hoặc

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

3 cho mọi phần tử con của vùng chứa

Nhì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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

2,

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

3 và

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

1 trên phần tử

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

1 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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

1. Đ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 được kế thừa

Trong 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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

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 theo

Xem 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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

6 cho phần tử con

.some-child {
  color: inherit;
}

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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

6

Khi thuộc tính màu của các thành phần liên kết được đặt thành

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

6, chúng sẽ bắt đầu kế thừa màu của cha mẹ chúng

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

Đâ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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

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ệ

.example {
  /* Invalid CSS */
  border: 1px solid inherit;
}

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ệ

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

0

Mộ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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

6 với thuộc tính longhand tương ứng

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

2

Thiế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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

3

Ở đây, văn bản đoạn văn sẽ không kế thừa giá trị của

.example {
  /* Invalid CSS */
  border: 1px solid inherit;
}

1 từ vùng chứa của nó. Giá trị

.example {
  /* Invalid CSS */
  border: 1px solid inherit;
}

1 thực sự sẽ được đặt lại về giá trị ban đầu là

.example {
  /* Invalid CSS */
  border: 1px solid inherit;
}

3. Do đó, trong trường hợp này, nếu bạn muốn phần viết tắt của cha

.example {
  /* Invalid CSS */
  border: 1px solid inherit;
}

4 được kế thừa mà vẫn đảm bảo rằng đoạn còn lại là

.example {
  /* Invalid CSS */
  border: 1px solid inherit;
}

5, bạn sẽ phải sử dụng thuộc tính phần viết tắt của

.example {
  /* Invalid CSS */
  border: 1px solid inherit;
}

6

Xem 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ừa

DevTools 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ừa

Dường như không có một nguồn chính xác nào liệt kê tất cả các thuộc tính CSS kế thừa, nhưng bên dưới là danh sách có thể đúng, dựa trên một số nguồn

• sụp đổ biên giới
• khoảng cách biên giới
• phụ đề
• màu
• con trỏ
• phương hướng
• ô trống
• họ phông chữ
• cỡ chữ
• kiểu chữ
• biến thể phông chữ
• trọng lượng phông chữ
• điều chỉnh cỡ chữ
• kéo dài phông chữ
• nét chữ
• khoảng cách giữa các chữ cái
• chiều cao giữa các dòng
• danh sách-kiểu-hình ảnh
• danh sách-kiểu-vị trí
• kiểu danh sách
• kiểu danh sách
• trẻ mồ côi
• dấu ngoặc kép
• kích thước tab
• căn chỉnh văn bản
• text-align-last
• văn bản-trang trí-màu sắc
• thụt lề văn bản
• căn chỉnh văn bản
• bóng văn bản
• chuyển đổi văn bản
• hiển thị
• khoảng trắng
• góa phụ
• phá vỡ từ
• khoảng cách giữa các từ
• gói từ

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ế

• CSS2. 2 Bảng tài sản đầy đủ
• Thuộc tính CSS nào được kế thừa?

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

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

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ục

Chia sẻ bài viết này

Asha 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

CSS có kế thừa không?

Thuộc tính CSS nào được kế thừa?

Màu CSS có kế thừa không?

Kế thừa và khởi tạo trong CSS là gì?