Teoría
Teoría

Propiedades no heredables

En el ejercicio anterior vimos varias de las principales propiedades heredables. Otras propiedades no se heredan: las que controlan la posición, las dimensiones, los márgenes, el relleno, el fondo, los bordes, etc.

Por ejemplo: background, border, padding, margin, width, height y position.

Puedes consultar las propiedades no heredables en la tabla de propiedades de CSS 2.1: tienen el valor no en la columna Inherited?.

Esto tiene sentido. Si un bloque tiene relleno, no hace falta asignar automáticamente el mismo relleno a cada elemento de su interior. Estos valores suelen ser distintos para cada bloque.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Propiedades no heredables</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block1"> <p>Una línea de texto en el primer bloque</p> <p>Otra línea de texto en el primer bloque</p> <ul> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ul> </div> <div class="block2"> <p>Una línea de texto en el segundo bloque</p> <p>Otra línea de texto en el segundo bloque</p> <ul> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ul> </div> </body> </html>

CSS

body { font-family: "PT Sans", sans-serif; }

ObjetivosRealizado

Asigna a .block1 un relleno de 10px y un borde 1px solid #1abc9c.
Asigna al ul dentro de .block2 el color de fondo background-color: #3498db;.
Asigna a los li dentro de .block2 el color de fondo #e74c3c.