Geek Penguin

¡De nuevo! Hoy vamos con más propiedades: las de borde, margen y lista.

Propiedades de borde

Las propiedades de borde permiten modificar el estilo y el color del borde de un elemento. Una cosa importante: los elementos HTML vienen generalmente sin borde, por lo que es necesario activarlo con el atributo border, y con un valor numérico, donde 1 es una línea normal. Las más importantes:

• La propiedad border-color modifica el color del borde. Se usa de la forma etiqueta_a_modificar {border-color: valor}, donde valor es un color en HTML. De nuevo se repite lo de la tabla de colores HTML.
• La propiedad border-width define el grosor del borde. Se usa de la forma etiqueta_a_modificar {border-width: valor}, donde valor puede ser thin (delgado), medium (medio), thick (grueso) o algún valor en porcentaje (x%) o pixeles (*px).
• La propiedad border-style es la más interesante, y define el estilo del borde. Se usa de la forma etiqueta_a_modificar {border-style: valor}, donde valor puede ser hidden (escondido), dotted (punteado), dashed (rayado), solid (sólido), double (doble), groove (ondas) y ridge (picos, crestas).

Propiedades de margen

Las propiedades de margen permiten cambiar las medidas de los espacios que tienen alrededor los elementos HTML. Son las más simples de manejar, vean por qué:

• Tiene 4 propiedades: margin-top (margen superior), margin-bottom (margen inferior), margin-left (margen izquierda) y margin-right (margen derecha). Todas se usan de la forma etiqueta_a_modificar {margin-****: valor}, donde valor se puede dar en porcentaje, pixeles o em. Las em son medidas relativas parecidas a los pixeles, aunque no los complico con esto.

Y eso es todo con las márgenes. Era fácil

Propiedades de lista

Las propiedades de lista modifican el estilo de la lista. Las dos más comunes:

• La propiedad list-style-image establece una imagen como viñeta. Se usa de la forma etiqueta_a_modificar {list-style-image: url(’ubicación’)}, donde ubicación es la URL exacta donde está ubicada la imagen.
• La propiedad list-style-type es una de las más completas que conozco, ya que tiene muchos valores posibles. Define la forma o la viñeta predeterminada que se mostrará, se usa de la forma etiqueta_a_modificar {list-style-type: valor}, donde valor puede ser (atencion a esto) disc (círculo vacío), circle (círculo relleno), square (cuadrado), decimal, decimal-leading-zero (decimal con cero a la izquierda), lower-roman (romanos en minúscula), upper-roman (romano en mayúscula), lower-greek (griego en minúsculas)… hay demasiadas, pero no les digo más, solo las esenciales.

Bueno, creo que es todo por hoy. ¡Hasta el próximo fin de semana!