Cách xóa thuộc tính kế thừa trong CSS

1

2

    Heading

3

    I am a span

4

    
This is a paragraph

  

5

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 CSS

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

2

3

4

5

2

2

2

2

2

2

2

    Heading

    Heading

    Heading

Nếu bạn muốn có một kiểu phông chữ thống nhất cho tất cả nội dung này, bạn chỉ phải tạo kiểu cho phần tử nội dung

1

2

    Heading

3

    Heading

Điều này có thể thực hiện được do tính kế thừa giữa các phần tử HTML. Và nó rất hữu ích, vì chúng ta không phải lặp lại kiểu

Mặc dù tính kế thừa khiến mọi thứ trở nên dễ dàng đối với chúng ta, nhưng mọi thứ sẽ không dễ dàng như vậy nếu tất cả các thuộc tính CSS hoạt động theo cách này

Đây là một ví dụ khác

1

3

2

3

3

3

4

3

5

3

2

    I am a span

2

    I am a span

2

    I am a span

2

    I am a span

2

    I am a span

    Heading

4

    Heading

4

4

4

4

4

4

    I am a span

    
This is a paragraph

    
This is a paragraph

    
This is a paragraph

    I am a span

    
This is a paragraph

  

    
This is a paragraph

    
This is a paragraph

    
This is a paragraph

    
This is a paragraph

4

5

4

5

4

5

4

5

4

Ai biết dưa chuột là quả mọng?. Chúng tôi sẽ triển khai một số kiểu cho danh sách gốc và xem kiểu nào được kế thừa theo huyết thống

Các kiểu

Vậy những thuộc tính nào khác được kế thừa?

Danh sách đầy đủ các thuộc tính được thừa kế

Theo W3C, đây là các thuộc tính có thể được kế thừa

1. 80

2. 81

3. 82

4. 83

5. 75

6. 85

7. 86

8. 87

9. 88

10. 89

11. 90

12. 91

13. 92

14. 93

15. 74

16. 95

17. 96

18. 97

19. 98

20. 99

21. 2

    00

22. 2

    01

23. 2

    02

24. 2

    03

25. 2

    04

26. 2

    05

27. 2

    06

28. 2

    07

29. 2

    08

30. 2

    09

31. 2

    10

32. 2

    11

33. 2

    12

34. 2

    13

35. 2

    14

36. 2

    15

37. 2

    16

38. 2

    17

39. 2

    18

40. 2

    19

41. 2

    20

Bạn có thể tìm hiểu thêm về danh sách này trên trang web của W3C [bạn chắc chắn không cần phải ghi nhớ tất cả những điều này. ]

Cách buộc các thuộc tính kế thừa

Vì một số thuộc tính không thể được kế thừa, nên bạn có thể nghĩ rằng cách giải quyết là áp dụng chúng cho cả các phần tử con. Các phong cách chúng tôi sử dụng ở trên có thể trông như thế này

1

5

2

3

4

5

    Heading

2

2

2

2

    Heading

Chúng tôi vẫn chỉ có các kiểu đường viền trên danh sách mẹ và danh sách con đầu tiên. Nhưng vấn đề là chúng ta đã phải lặp lại chính mình. Nỗi đau sao chép lặp đi lặp lại cùng một phong cách trở nên rõ ràng

Một giải pháp tốt sẽ là giải pháp mà bạn chỉ cần áp dụng kiểu một lần, tốt nhất là trên cha mẹ và thực hiện một chút điều chỉnh cho con để kế thừa. Điều này sẽ giữ cho mọi thứ khô ráo và sạch sẽ

Từ khóa người thừa kế

Theo Tài liệu MDN

“Từ khóa CSS kế thừa khiến phần tử được chỉ định lấy thuộc tính được tính toán của thuộc tính từ phần tử cha của nó. ” – MDN

Nói cách khác, đó là một cách để nói rằng giá trị của một thuộc tính cụ thể phải được lấy từ phần tử cha của phần tử. Từ khóa này có thể được sử dụng trên bất kỳ thuộc tính CSS nào

Quay trở lại ví dụ của chúng tôi, đây là cách phong cách sẽ xuất hiện

1

5

2

3

4

5

    Heading

2

2

2

2

    Heading

Với điều đó, kết quả sẽ như thế này

Vì vậy, nếu các kiểu đường viền của chúng ta cần thay đổi, chúng ta chỉ cần thay đổi chúng ở một nơi

Cách buộc các thuộc tính không được kế thừa

Mặc dù có thể thực thi kế thừa trên các thuộc tính không thể kế thừa theo mặc định, nhưng trong một số trường hợp, có thể không nên làm như vậy. Một cách khác là sử dụng các giá trị ban đầu của thuộc tính

Từ khóa ban đầu

Bạn có thể đặt giá trị mặc định hoặc giá trị ban đầu của thuộc tính CSS bằng cách sử dụng từ khóa CSS

2

Trong ví dụ này có một vài điều xảy ra. Chúng tôi có hai phần tử

2

2

2

2

1

2

3

    Heading

4

5

2

2

2

2

2

    Heading

    Heading

    Heading

4

4

    Heading

2

2

Các từ khóa kế thừa CSS khác

Ngoài các từ khóa

2

2

2

2

2

Từ khóa không được đặt

Từ khóa không được đặt khác biệt một cách tinh tế. Nó đặt lại giá trị của một phần tử thành giá trị được kế thừa [nếu nó được kế thừa] và giá trị ban đầu của nó nếu không. Đây là ví dụ của chúng tôi một lần nữa

1

2

3

    Heading

4

5

2

2

2

2

2

    Heading

    Heading

    Heading

4

4

    Heading

Trong trường hợp này, thuộc tính

2

Hoàn nguyên từ khóa

Cuối cùng, chúng ta có từ khóa

2

2

Phần kết luận

Khi một quy tắc kiểu được khai báo trong biểu định kiểu, có rất nhiều nơi giá trị của thuộc tính có thể đến từ đó;

1. Biểu định kiểu do tác giả web xác định
2. Kiểu do người dùng xác định
3. Kiểu do trình duyệt xác định

Các kiểu được tìm nạp từ đâu tùy thuộc vào cách hoạt động của thuộc tính liên quan đến tính kế thừa. Nếu thuộc tính có thể kế thừa, thì giá trị của nó sẽ đến từ cha của nó, giá trị này sẽ được khai báo trong biểu định kiểu do tác giả web tạo. Nếu không, nó sẽ đến từ nguồn thứ hai hoặc thứ ba

Làm cách nào để xóa CSS kế thừa?

Làm cách nào để xóa thuộc tính trong CSS?

Làm cách nào để tránh thừa kế trong CSS?

Mặt trái của Kế thừa trong CSS là gì?