Herencia de propiedades CSS
Supongamos que tenemos un párrafo, y dentro de él algún
texto en la etiqueta i:
<p>
This is some <i>text</i> in paragraph.
</p>
Demos color rojo a los párrafos:
p {
color: red;
}
Como resultado, no solo se coloreará el texto del párrafo,
sino también el texto de la etiqueta i:
El asunto es que la propiedad color
se hereda. Esto significa que si
la etiqueta padre tiene un color definido,
ese color será aplicado a los descendientes. No todas
las propiedades CSS se heredan, pero muchas sí (de las que
ya conoces, todas se heredan).
Sin embargo, si se desea, se puede anular la propiedad del padre, definiendo un selector para el descendiente. Por ejemplo, demos color rojo al párrafo y color azul al texto en cursiva:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
color: red;
}
i {
color: blue;
}
:
El orden de los selectores en el código CSS en este caso
no tiene importancia. Si se intercambian los lugares
del selector i y el selector p, todo funcionará
igual:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Estudiando el código, diga de qué color será
el texto en la etiqueta b:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
Estudiando el código, diga de qué color será
el texto en la etiqueta b:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
Estudiando el código, diga de qué color será
el texto en la etiqueta b:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
Estudiando el código, diga de qué color será
el texto en la etiqueta li:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
Estudiando el código, diga de qué color será
el texto en la etiqueta li:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Estudiando el código, diga de qué color será
el texto en la etiqueta i:
<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;
}
Estudiando el código, diga qué tamaño tendrá
el texto en la etiqueta i:
<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;
}
