Kế thừa trong CSS
Bài viết này giải thích về việc kế thừa trong CSS.
Bạn có thể kiểm tra các thuộc tính thừa kế và không thừa kế tiêu biểu.
YouTube Video
HTML để Xem trước
css-inheritance.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Inheritance</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-inheritance.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Inheritance</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Inheritance</h2></header>
19 <article>
20 <h3>Example of Inheritance</h3>
21 <section>
22 <p>
23 Example of P Element.<br>
24 <span>Example of Span Element</span>
25 </p>
26 </section>
27 <div>
28 Example of Div Element
29 </div>
30 <ul>
31 <li>List Item 1</li>
32 <li>List Item 2</li>
33 <li>List Item 3</li>
34 </ul>
35 </article>
36 <article>
37 <h3>all</h3>
38 <section>
39 <h4>Initial</h4>
40 <div class="all-initial">This is an initial element</div>
41 </section>
42 <section>
43 <h4>Inherit</h4>
44 <div class="parent-inherit">
45 <div class="all-inherit">This is an inherited element</div>
46 </div>
47 </section>
48 <section>
49 <h4>Unset All</h4>
50 <div class="parent-unset">
51 <div class="all-unset">This is an unset element</div>
52 </div>
53 </section>
54 <section>
55 <h4>all and !important</h4>
56 <div class="important-style">
57 <div class="all-with-important">
58 This is an initial element with !important
59 </div>
60 </div>
61 </section>
62 </article>
63 </main>
64</body>
65</html>Kế thừa trong CSS
Trong CSS, một số thuộc tính được tự động thừa hưởng từ phần tử cha sang phần tử con. Đây là một cơ chế hữu ích vì một khi bạn thiết lập một thuộc tính cụ thể, các phần tử con cũng sẽ có cùng kiểu dáng, loại bỏ nhu cầu phải thiết lập nó nhiều lần. Tuy nhiên, không phải tất cả các thuộc tính đều được thừa hưởng; một số thuộc tính được thừa hưởng trong khi những thuộc tính khác thì không. Ví dụ, color và font-family được thừa hưởng, nhưng các thuộc tính mô hình hộp như margin và padding thì không.
Các thuộc tính được kế thừa
Các thuộc tính thừa hưởng chủ yếu là những thuộc tính liên quan tới văn bản và phông chữ.
Các thuộc tính thường được kế thừa
color: Màu chữ
1body {
2 color: black;
3}- Trong trường hợp này, tất cả các phần tử con bên trong
bodysẽ có màu văn bản đen.
font-family: Phông chữ
1body {
2 font-family: "Times New Roman", cursive;
3}- Tất cả các phần tử con sử dụng kiểu phông chữ
Arial.
font-size: Kích thước chữ
1body {
2 font-size: 16px;
3}- Tất cả văn bản trong
bodysẽ là16pxtheo mặc định.
line-height: Khoảng cách dòng
1p {
2 line-height: 1.5;
3}- Văn bản trong một phần tử
<p>sẽ được hiển thị với chiều cao dòng gấp 1.5 lần, ảnh hưởng đến cả các phần tử con của nó.
text-align: Căn chỉnh chữ
1div {
2 text-align: center;
3}- Văn bản và các phần tử nội tuyến bên trong phần tử
divđược hiển thị canh giữa.
visibility: Tính hiển thị của phần tử
1div {
2 visibility: hidden;
3}visibilitylà một thuộc tính kiểm soát sự hiển thị của một phần tử. Khi được đặt ở chế độ ẩn, phần tử sẽ trở nên vô hình.- Trong trường hợp này, các phần tử con bên trong
divcũng sẽ bị ẩn.
list-style: Kiểu danh sách (các dấu danh sách cho<ul>và<ol>)
1ul {
2 list-style: square;
3}- Trong trường hợp này, các mục danh sách trong thẻ ul sẽ được hiển thị với các dấu vuông.
Ví dụ:
Các thuộc tính không được kế thừa
Các thuộc tính liên quan đến bố cục và mô hình hộp thường không được thừa kế. Những thuộc tính này cần được đặt riêng cho từng phần tử.
Các thuộc tính không được kế thừa thường gặp
margin,padding: Lề ngoài và lề trong của một phần tử
1div {
2 margin: 10px;
3 padding: 20px;
4}- Ngay cả khi bạn thiết lập lề ngoài hoặc lề trong cho một phần tử
div, nó cũng không ảnh hưởng đến các phần tử con của nó.
border: Viền phần tử
1div {
2 border: 1px solid black;
3}- Ngay cả khi một viền được đặt trên phần tử cha, nó cũng không ảnh hưởng đến các phần tử con.
width,height: Chiều rộng và chiều cao phần tử
1div {
2 width: 100px;
3 height: 50px;
4}- Chiều rộng và chiều cao của một phần tử cha không tự động ảnh hưởng đến các phần tử con.
background: Kiểu nền
1body {
2 background-color: lightblue;
3}- Màu nền được đặt trên
bodykhông ảnh hưởng trực tiếp đến các phần tử con. Tuy nhiên, nếu một phần tử con có nền trong suốt, màu nền của phần tử cha có thể nhìn thấy qua nó.
Ví dụ:
Kiểm soát thừa kế
Sự thừa kế có thể được kiểm soát bằng cách sử dụng các từ khóa inherit, initial, hoặc unset.
- Nếu bạn muốn kích hoạt kế thừa: Bạn có thể bắt buộc kế thừa một cách rõ ràng bằng cách sử dụng từ khóa
inherit.
1div {
2 color: inherit; /* Inherit the color from its parent element */
3}- Nếu bạn không muốn kế thừa: Bạn có thể đặt lại thuộc tính về giá trị ban đầu của nó bằng cách sử dụng từ khóa
initialhoặcunset.
1p {
2 color: initial; /* Reset the color to its initial/default value */
3}Ví dụ:
Thuộc tính all
Thuộc tính all là một thuộc tính có thể đặt lại hầu hết tất cả các thuộc tính CSS, bao gồm cả những thuộc tính có thể được kế thừa, cho một phần tử được chỉ định ngay lập tức. Cụ thể, bạn có thể sử dụng ba từ khóa sau để đặt thuộc tính của một phần tử:.
initial: Đặt lại tất cả các thuộc tính về giá trị ban đầu của chúng.inherit: Kế thừa tất cả các thuộc tính từ phần tử cha.unset: Kế thừa thuộc tính nếu có thể kế thừa, nếu không thì đặt lại về giá trị ban đầu của nó.
all rất hữu ích khi bạn muốn đặt lại hoặc thiết lập nhiều thuộc tính một cách đồng loạt, thay vì chỉ thiết lập các thuộc tính cụ thể riêng lẻ.
Ví dụ về việc đặt lại giá trị ban đầu
1.all-initial {
2 all: initial;
3 background-color: lightskyblue;
4}-
Khi bạn muốn đặt lại tất cả các kiểu đã thiết lập trước đó cho một phần tử cụ thể và đưa nó về trạng thái ban đầu, sử dụng
all: initialnhư sau. -
Trong ví dụ này, tất cả các thuộc tính của phần tử
<div>với lớp.all-initialđược đặt lại về các giá trị mặc định ban đầu của trình duyệt.
Ví dụ về Thừa kế
1.parent-inherit {
2 color: blue;
3 font-size: 20px;
4 border: 1px solid blue;
5}
6
7.all-inherit {
8 all: inherit;
9 background-color: lightskyblue;
10}- Sử dụng
all: inheritlàm cho tất cả các thuộc tính được kế thừa từ phần tử cha. - Trong ví dụ này, các phần tử có lớp
.all-inheritkế thừa tất cả các thuộc tính, chẳng hạn nhưcolorvàfont-size, từ phần tử cha.
Ví dụ về việc xác định giá trị ban đầu hoặc thừa kế dựa trên điều kiện
1.parent-unset {
2 color: blue;
3}
4
5.all-unset {
6 font-weight: bold;
7}
8
9.all-unset {
10 all: unset;
11}- Sử dụng
all: unsetlàm cho các thuộc tính được kế thừa nếu chúng có thể; nếu không, chúng sẽ được đặt lại về các giá trị ban đầu. - Trong trường hợp này,
colorđược kế thừa, trong khifont-weightđược đặt lại về giá trị ban đầu của nó, thường lànormal.
Mối quan hệ với Độ cụ thể (Ưu tiên)
1.all-with-important {
2 color: red !important;
3 background-color: lightskyblue;
4}
5
6.all-with-important {
7 all: initial;
8}-
Thuộc tính
alllà một cơ chế đặt lại mạnh mẽ, nhưng nó bị ảnh hưởng bởi tính đặc hiệu của CSS. Nếu một phần tử cụ thể có các quy định về kiểu dáng mạnh mẽ, thuộc tínhallcó thể không thể ghi đè được các kiểu dáng đó. Ví dụ, các thuộc tính được chỉ định với!importantsẽ không bị ảnh hưởng. -
Trong ví dụ này, ngay cả khi bạn cố gắng đặt lại kiểu dáng bằng
all: initial, thuộc tínhcolorsẽ không được đặt lại do quy địnhcolor: red !important.
Các phần tử cấp khối và các phần tử nội tuyến
Các phần tử cấp khối
- Ví dụ:
<div>,<p>,<h1>〜<h6>,<ul>,<li>,<section> - Đặc điểm:
- Chúng luôn xuất hiện trên một dòng mới và mở rộng để lấp đầy chiều rộng toàn phần của phần tử cha.
- Chiều rộng (
width) và chiều cao (height) có thể được đặt tự do. - Lề (
margin) và khoảng đệm (padding) có thể được đặt ở mọi hướng và sẽ ảnh hưởng đến tất cả các mặt.
1div {
2 width: 80%; /* Set the width to 80% of its parent element's width */
3 padding: 20px; /* Add a padding of 20 pixels on all sides */
4 margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}Các phần tử nội tuyến
- Ví dụ:
<span>,<a>,<strong>,<em>,<img>,<label> - Đặc điểm:
- Chúng xuất hiện cùng các phần tử nội dòng khác trên cùng một dòng.
- Chiều rộng (
width) và chiều cao (height) không thể được đặt trực tiếp (trừ khi áp dụngdisplay: block). - Việc đặt lề (
margin) hoặc khoảng đệm (padding) theo chiều dọc có hiệu quả hạn chế (lề và khoảng đệm ngang có hiệu quả).
1a {
2 padding: 5px; /* Padding for inline elements */
3 margin-right: 10px; /* Set margin to the right */
4 color: blue;
5}Sự khác biệt giữa các phần tử mức khối và các phần tử nội tuyến
-
Thiết lập chiều rộng và chiều cao:
- Phần tử cấp khối: Chiều rộng và chiều cao có thể được đặt.
- Phần tử nội dòng: Chiều rộng và chiều cao thường không thể được đặt.
-
Lề và Khoảng cách:
- Phần tử cấp khối: Lề và khoảng đệm được áp dụng cho tất cả các mặt.
- Phần tử nội dòng: Lề và khoảng đệm ở trên và dưới không có hiệu quả hoặc có hiệu quả hạn chế.
-
Phương pháp bố trí:
- Phần tử cấp khối: Tự động được đặt trên một dòng mới.
- Phần tử nội dòng: Căn chỉnh trên cùng một dòng với các phần tử nội dòng khác.
Như bạn có thể thấy, có sự khác biệt về cách các kiểu CSS được áp dụng cho các phần tử cấp khối và các phần tử nội tuyến. Trong các phần tử cấp khối, các thuộc tính CSS liên quan đến bố cục như chiều rộng, chiều cao, lề, và đệm được áp dụng như đã chỉ định. Mặt khác, đối với các phần tử nội dòng, việc đặt các thuộc tính CSS liên quan đến bố cục như chiều rộng, chiều cao, lề hoặc khoảng đệm có thể không được áp dụng hoặc chỉ được áp dụng ở mức hạn chế.
Xử lý CSS của các phần tử cấp khối và nội tuyến
1span {
2 display: block; /* Display the span element as a block-level element */
3 width: 100px;
4 height: 50px;
5}Tuy nhiên, bằng cách đặt thuộc tính display thành block hoặc inline-block, bạn có thể điều chỉnh các kiểu như chiều rộng và chiều cao cho các phần tử nội dòng giống như chúng là các phần tử cấp khối.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.