Kế thừa thuộc tính CSS

Giả sử chúng ta có một đoạn văn, và trong đó có một đoạn văn bản trong thẻ i:

<p>
	This is some <i>text</i> in paragraph.
</p>

Hãy tô màu các đoạn văn thành màu đỏ:

p {
	color: red;
}

Kết quả là không chỉ văn bản của đoạn văn được tô màu, mà cả văn bản trong thẻ i cũng vậy:

Tất cả là vì thuộc tính color được kế thừa. Điều này có nghĩa là nếu màu sắc được đặt cho thẻ cha, thì màu sắc đó cũng sẽ áp dụng cho các phần tử con. Không phải tất cả các thuộc tính CSS đều được kế thừa, nhưng nhiều thuộc tính thì có (trong số những thuộc tính bạn đã biết - tất cả đều được kế thừa).

Tuy nhiên, nếu muốn, bạn có thể ghi đè thuộc tính của phần tử cha bằng cách đặt bộ chọn cho phần tử con. Ví dụ, hãy đặt màu đỏ cho đoạn văn và màu xanh da trời cho chữ nghiêng:

<p>
	This is some <i>text</i> in paragraph.
</p>

p {
	color: red;
}
i {
	color: blue;
}

Trong trường hợp này, thứ tự của các bộ chọn trong mã CSS không quan trọng. Nếu hoán đổi vị trí của bộ chọn i và bộ chọn p, mọi thứ vẫn sẽ hoạt động tương tự:

<p>
	This is some <i>text</i> in paragraph.
</p>

i {
	color: blue;
}
p {
	color: red;
}

Sau khi nghiên cứu mã, hãy nói xem văn bản trong thẻ b sẽ có màu gì:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}

Sau khi nghiên cứu mã, hãy nói xem văn bản trong thẻ b sẽ có màu gì:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}
b {
	color: red;
}

Sau khi nghiên cứu mã, hãy nói xem văn bản trong thẻ b sẽ có màu gì:

<p>
	This is some <b>text</b> in paragraph.
</p>

b {
	color: red;
}
p {
	color: blue;
}

Sau khi nghiên cứu mã, hãy nói xem văn bản trong thẻ li sẽ có màu gì:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}

Sau khi nghiên cứu mã, hãy nói xem văn bản trong thẻ li sẽ có màu gì:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}

Sau khi nghiên cứu mã, hãy nói xem văn bản trong thẻ i sẽ có màu gì:

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}
i {
	color: green;
}

Sau khi nghiên cứu mã, hãy nói xem kích thước văn bản trong thẻ i sẽ là bao nhiêu:

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

i {
	font-size: 30px;
}
ul {
	font-size: 20px;
}
li {
	color: red;
	font-weight: bold;
}