Moștenirea în CSS

Moștenirea CSS

Când un element nu are nicio valoare specificată pentru o proprietate, moștenirea decide ce se întâmplă. Proprietatea fie își ia valoarea de la elementul părinte, fie revine la valoarea sa inițială (implicită).

Care dintre cele două se aplică depinde de tipul proprietății:

proprietăți moștenite
proprietăți nemoștenite

Proprietăți moștenite

În mod implicit, o proprietate moștenită fără valoare proprie primește valoarea calculată a elementului părinte.

Proprietățile legate de text funcționează de obicei astfel, printre ele color, font-family, font-size, line-height și text-align, ceea ce păstrează o stilizare consistentă a textului pe tot documentul.

Mai jos, elementul părinte  transmite valorile sale color și font-size elementului , așa că textul din interiorul acestuia este albastru și are 20px.

Exemplu

Aici, atât color, cât și font-size se transmit de la paragraf:

Creați o pagină HTML care arată cum funcționează proprietățile CSS moștenite. Stilizați un paragraf cu culoare albastră și font-size de 20px și includeți un element <strong> în interiorul acestuia pentru a demonstra că elementul copil moștenește atât culoarea, cât și dimensiunea fontului de la părinte.

> Rezultat: pagină HTML completă
"}, {

Prompt

Creați o pagină HTML care arată cum funcționează proprietățile CSS moștenite. Stilizați un paragraf cu culoare albastră și font-size de 20px și includeți un element în interiorul acestuia pentru a demonstra că elementul copil moștenește atât culoarea, cât și dimensiunea fontului de la părinte.

Rezultat: pagină HTML completă "}, {

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Inherited Properties</title>
<style>
p {
  color: blue;
  font-size: 20px;
}
</style>
</head>
<body>

<p>This is a paragraph with some <strong>important</strong> text.</p>

</body>
</html>

Proprietăți nemoștenite

Fără o valoare setată, o proprietate nemoștenită își folosește pur și simplu propria valoare inițială (implicită).

Proprietățile de model de casetă (box model) și de aspect se comportă de obicei astfel, inclusiv border, background, margin, padding, width și height.

Mai jos, border-style pornește de la none, așa că elementul  nu primește o bordură suplimentară, chiar dacă elementul  din jurul lui are una.

Exemplu

Aici, border rămâne pe paragraf și nu se transmite mai departe:

Creați o pagină HTML care arată cum funcționează proprietățile CSS nemoștenite. Stilizați un paragraf cu o bordură de 1px solid red și includeți un element <strong> în interiorul acestuia pentru a demonstra că elementul copil nu moștenește bordura de la părinte.

> Rezultat: pagină HTML completă
"}, {

Prompt

Creați o pagină HTML care arată cum funcționează proprietățile CSS nemoștenite. Stilizați un paragraf cu o bordură de 1px solid red și includeți un element în interiorul acestuia pentru a demonstra că elementul copil nu moștenește bordura de la părinte.

Rezultat: pagină HTML completă "}, {

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Non-inherited Properties</title>
<style>
p {
  border: 1px solid red;
}
</style>
</head>
<body>

<p>This is a paragraph with some <strong>important</strong> text.</p>

</body>
</html>

Cuvântul cheie inherit

Pentru a cere moștenirea explicit, scrie cuvântul cheie inherit, care funcționează la fel pe proprietățile moștenite și pe cele nemoștenite.

Mai jos, acesta îi spune elementului  din interiorul elementului  să preia valoarea bordurii de la părintele său, așa că elementul  primește o bordură suplimentară.

Exemplu

Aici, cuvântul cheie inherit cere explicit moștenirea:

Creați o pagină HTML care arată cum funcționează cuvântul cheie CSS inherit. Stilizați un paragraf cu o bordură de 1px solid red. Apoi folosiți cuvântul cheie inherit pe elementul strong din interiorul acestuia pentru a moșteni explicit bordura de la părinte.

> Rezultat: pagină HTML completă
"}, {

Prompt

Creați o pagină HTML care arată cum funcționează cuvântul cheie CSS inherit. Stilizați un paragraf cu o bordură de 1px solid red. Apoi folosiți cuvântul cheie inherit pe elementul strong din interiorul acestuia pentru a moșteni explicit bordura de la părinte.

Rezultat: pagină HTML completă "}, {

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS inherit Keyword</title>
<style>
p {
  border: 1px solid red;
}

strong {
  border: inherit;
}
</style>
</head>
<body>

<p>This is a paragraph with some <strong>strong</strong> text.</p>

</body>
</html>