jairogarcíarincón

Hojas de estilo CSS (2/2)

14.1K

23/08/2020

Contenidos

Margin y padding

En HTML cada elemento es considerado como una caja. El margen (margin) es en realidad el espacio alrededor del elemento, el que se encuentra por fuera del borde de esa caja.

Por contra, el estilo padding es el espacio alrededor del contenido del elemento pero dentro de sus bordes.

Para definir tanto margin como padding, se pueden usar diferentes nomenclaturas. Los siguientes ejemplos muestran las más comunes:

div{

	margin-top: 10px; /* margen superior */

	margin-bottom: 8px; /* margen inferior */

	margin-left: 6px; /* margen izquierdo */

	margin-right: 5px; /* margen derecho */

}



div{

	margin: 10px 5px 8px 6px; /* margen superior, derecho, inferior y izquierdo */

}



div{

	margin: 10px 20px; /* margen superior e inferior 10px, margen derecho e izquierdo  20px*/

}



div{

	margin: 10px; /* todos los márgenes del div son de 10px */

}



div{

	padding-top: 10px; /* padding superior */

	padding-bottom: 8px; /* padding inferior */

	padding-left: 6px; /* padding izquierdo */

	padding-right: 5px; /* padding derecho */

}



div{

	padding: 10px 5px 8px 6px; /* padding superior, derecho, inferior y izquierdo */

}



div{

	padding: 10px 20px; /* padding superior e inferior 10px, padding derecho e izquierdo  20px*/

}



div{

	padding: 10px; /* todos los padding del div son de 10px */

}

Puedes ver el efecto del margin y el padding observando las características de los dos <div> siguientes haciendo clic en el botón derecho y luego en Inspeccionar elemento:

Este div tiene un margen por los 4 lados de 20px.

Este div tiene un margen por los 4 lados de 20px y un padding de 10px.

Unidades: medidas en px, pt, rem, em y %

Hasta ahora hemos utilizado los píxeles (px) para definir nuestros estilos, bien sea el tamaño de las fuentes, como los márgenes, paddings, etc. También podíamos haber declarado los tamaños en pt o puntos, una medida más utilizada el medio gráfico pero igualmente absoluta y cuya correspondencia aproximada es de 0.75pt por cada 1px.

No obstante, en un entorno cada vez más adaptable o responsive, en el que tenemos que asegurarnos de que nuestra página web se vea bien en todos los tipos de dispositivos debemos, frente a los valores absolutos en píxeles o puntos, acostumbrarnos a utilizar medidas relativas.

La más común es emphasis o rem, que tomará la relación del tamaño de letra base del documento. Por defecto, si no indicamos el tamaño de letra en la hoja de estilos, el navegador aplica un tamaño de 16px. De este modo, si queremos un tamaño de letra de 24px, sólo tendremos que definir en la hoja de estilos que sea de 24/16 = 1.5em.

¿Y cuáles son las ventajas de definir los tamaños de fuente en pixeles frente a em? Principalmente son dos:

En cualquier momento el usuario puede optar por cambiar el tipo de letra del navegador, y si están definidas en rem, todas cambiarán proporcionalmente.
El programador, con cambiar el tamaño de fuente base, puede modificar proporcionalmente el contenido de todos los estilos relativos.

Existe una unidad de medida aún más relativa que la anterior, que sería el relative emphasis o rem. En este caso, las unidades dependerán del tamaño del elemento anterior. Esto es, tal y como muestra el ejemplo siguiente, si el tamaño fuente base del body es de 16px y tenemos un div con tamaño de fuente 1.5rem, esto equivaldría a un tamaño de fuente de 24px. Si ahora dentro de ese contenedor queremos añadir un párrafo con un tamaño de fuente que sea la mitad que el del div, sólo tendremos que poner 0.5rem:

body{

	font-size: 16px; /* tamaño de letra por defecto del documento */

}



div{

	font-size: 1.5em; /* tamaño de letra equivalente a 24px  */

}



p{

	font-size: 0.5rem; /* tamaño de letra equivalente a 12px (24/12)  */

}

<!DOCTYPE html >

<html lang="es">

	<head></head>

	<body>

		<div>

			Este texto tiene 1.5em, equivalente a 24px

			<p>Este texto tiene 0.5rem, equivalente a 12px</p>

		</div>

	</body>

</html>

Por último, en ocasiones también utilizaremos las medidas en porcentajes %, sobre todo para definir anchos de divs o imágenes que sean flexibles.

A continuación se muestra una tabla con la relación entre cada unidad de medida, si bien estos valores se puedne ver afectados por cómo el usuario tenga configurado su navegador o dispositivo.

Fuente: Daniel Medina (webadictos.com)

Position

Una propiedad importante a la hora de ubicar los elementos en pantalla es position. Esta propiedad, cuyo valor por defecto es statics, permite especificar el tipo de posicionamiento utilizado, a saber:

static: Los elementos se posiciona en el orden en que son declarados. Es la opción por defecto.
relative: El elemento se posiciona de manera relativa a su posición normal. De este modo, si por ejemplo añadimos left: 20px; el elemento se moverá 20px a la izquierda.
absolute: El elemento se posiciona en relación a su elemento "padre". En este caso, la propiedad float será ignorada.
fixed: El elemento se posiciona en relación a la ventana del navegador.

El siguiente enlace muestra un ejemplo de los distintos valores de la propiedad position:

Ver ejemplo

Por otro lado, hemos puesto como ejemplo el uso de la propiedad left, pero de igual modo, es posible utilizar right, top y/o bottom para posicionar elementos que no sean de tipo static.

Por último, al añadir a varios elementos la propiedad position: absolute o position: fixed, podemos encontrarnos con que unos queden encima de otros. es posible gestionar la disposición de estos elementos en capas utilizando la propiedad z-index.

De este modo, un elemento con z-index: 2 estará por delante de otro con z-index: 1. Es posible además utilizar valores negativos de z-index.

Width y Height

Las propiedades width y height (ancho y alto) nos permiten establecer el ancho y/o alto de un elemento. El valor por defecto es auto y se puede establecer en pixels, ems, rems o %.

IMPORTANTE: El valor establecido se define dentro del padding del elemento, con lo que no incluye los valores de las propiedades padding, margin y border.

Las propiedades min-width, max-width, min-height y max-height anulan, respectivamente, las anteriores width y height.

Border

Para establecer bordes a nuestro elemento, existen varias propiedades que podemos utilizar. Estas son las más comunes:

border-color: Establece el color del borde en cualquier formato de color aceptado (#000, rgb(0,0,0), etc.)
border-width: Establece el ancho del borde en px, em, etc.
border-style: Establece el estilo del borde. Los más comunes son solid (continuo), dotted (con puntos), dashed (con rayas), double (doble borde) o none (sin borde).
border: Es un estilo rápido para definir los 3 anteriores. Por ejemplo: border: 1px solid #000;

Además, es posible redondear los bordes mediante la propiedad border-radius utilizando una nomenclatura similar a la de margin y padding:

.div1{

	border-radius: 15px 50px 30px 5px; /* 4 valores (superior izquierdo, superior derecho, inferior derecho, inferior izquierdo  */

}

.div2{

	border-radius: 15px 50px; /* 2 valores (superior izquierdo e inferior derecho, superior derecho, e inferior izquierdo  */

}

.div3{

	border-radius: 15px; /* 1 único valor para las 4 esquinas  */

}

border-radius: 15px 50px 30px 5px;

border-radius: 15px 50px;

border-radius: 15px;

Por último, cualquiera de las propiedades anteriores se puede aplicar para una sola sección del elemento, por ejemplo, border-top, border-bottom-color, border-left-radius, etc.

Background

Otra de las propiedades más utilizadas en nuestros elementos es la de aplicar un fondo de cualquier tipo. Si queremos aplicar un color de fondo, debemos utilizar la propiedad:

background-color: permite aplicar un color de fondo en cualquier formato de color aceptado (#000, rgb(255,0,0), rgba(255,0,0,0.1), etc.)

Por el contrario, si queremos utilizar una imagen de fondo, podemos utilizar las siguientes propiedades:

background-image: permite aplicar una imagen de fondo de la siguiente manera url("ruta-hasta-la-imagen/imagen.jpg");
background-repeat: indica si debemos repetir el fondo cuando el elemento sea más grande que la imagen. Las opciones más comunes son no-repeat, repeat (por defecto), repeat-x, repeat-y.
background-size: permite establecer el tamaño de la imagen de fondo. Ejemplos background-size: 100px 100px; o background-size: 50% 50%;
background-position: permite especificar la posición en la que debe empezar la imagen de fondo en forma de par de valores x e y que se especifican en px o en cualquier otra unidad CSS. También es posible establecer esos valores según las palabras clave descritas en el siguiente ejemplo de w3schools.
background: Permite establecer varias propiedades de las anteriores de forma simultánea, por ejemplo: background: #00ff00 url("smiley.gif") no-repeat;

Estilos de Texto

/*text-align */

h1{

	text-align: left; /* alineación de texto izquierda */

	text-align: center; /* alineación de texto centrada */

	text-align: right; /* alineación de texto derecha */

	text-align: justify; /* alineación de texto justificada */

}



/*text decoration */

h1{

	text-decoration: underline; /* (subrayado) */

	text-decoration: overline; /* (línea por encima del texto) */

	text-decoration: line-through; /*  (tachado) */

	text-decoration: none; /* (sin decoración) */

}



/*text transformation */

h1{

	text-transform: uppercase; /* (mayúsculas) */

	text-transform: lowercase; /* (minúsculas) */

	text-transform: capitalize; /* (primera mayúscula) */

	text-decoration: none; /* (sin transformación) */

}



/*text indentation */

p{

	text-indent: 50px; /* indentación de la primera línea de un párrafo */

}



/*letter spacing */

p{

	letter-spacing: 3px; /* espacio entre caracteres (admite valores negativos) */

}



/*line height */

p{

	line-height: 1.5; /* espacio entre líneas de texto */

}



*text direction*/

p{

	direction: rtl; /* escribe el texto de derecha a izquierda */

}



*word spacing*/

p{

	word-spacing: 10px; /* espacio entre palabras del párrafo */

}



*text shadow*/

p{

	text-shadow: 4px 2px blue; /*añade una sombra azul al texto de 4px en horizontal y 2px en vertical */

}

Fuentes

Las propiedades de fuentes de CSS definen la familia, el tamaño, el peso (negrita) y las variantes.

En CSS; hay dos tipos de nombres de familia:

familias genéricas: las que tienen una apariencia similar (serif, sans-serif o monospace)
familias de fuentes: fuentes específicas (Times New Roman, Georgia, Arial, Verdana, Courier New, Lucida Console, etc.)

/*declaración de familia de fuentes (al menos dos siempre) */

p{

	font-family: "Times New Roman", serif;  /* utilizará la Times New Roman si está disponible, y si no el grupo serif por defecto. */

}

Además de las fuentes integradas en cualquier navegador, es posible importar fuentes tipográficas a partir de archivos externos, tales como fuentes True Type. El problema es que en general requerirá de algún programa de conversión de fuentes, ya que tendremos que generar diferentes archivos para compatibilidad entre navegadores.

/*declaración de una fuente llamada MiFuente a partir de unos archivos en la carpeta fonts */

@font-face {

	font-family: 'MiFuente';

	src: url('../fonts/mifuente.eot'); /* IE9  */

	src: url('../fonts/mifuente.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

		url('../fonts/mifuente.woff2') format('woff2'), /* Navegadores super actuales */

		url('../fonts/mifuente.woff') format('woff'), /* Navegadores actuales */

		url('../fonts/mifuente.ttf')  format('truetype'), /* Safari, Android, iOS */

		url('../fonts/mifuente.svg#svgFontName') format('svg'); /* iOS antiguo */

}



p{

	body: "MiFuente", serif;  /* utilizará la MiFuente si está disponible, y si no el grupo serif por defecto. */

}

No obstante, la opción más recomendada actualmente es el uso de fuentes enlazadas de otros proveedores, como Google Fonts, que provee de un extenso catálogo de fuentes gratuitas y compatibles con todos los navegadores actuales.

Para importarlas podemos hacerlo directamente en el archivo CSS:

@import url('https://fonts.googleapis.com/css?family=Roboto');

o como etiqueta link en el head de nuestro html:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

En ambos casos, Google Fonts nos permite "customizar" la fuente con diferentes grosores, idiomas, etc. Una vez importadas, las utilizaremos en la forma habitual:

body{

	font-family: "Roboto", sans-serif;  /* utilizará la Roboto si está disponible, y si no el grupo sans-serif por defecto. */

}

Una vez declarada nuestra familia, existen una serie de estilos básicos que podemos aplicar:

/*font-style */

h1{

	font-style: normal; /* texto normal */

	font-style: italic; /* texto cursiva*/

	font-style: oblique; /* similar a cursiva, menos soportado por los navegadores  */

}



/*font-size */

h1{

	font-size: 16px; /* (tamaño en pixels) */

	font-size: 1em; /* (tamaño en em, que permite al usuario re-dimensionar la fuente desde el menú del navegador. 1em = 16px) */

	font-size: 1rem; /* (tamaño en rem, relativos al elemento padre anterior) */

}



/*combinación de font-size */

body{

	font-size: 100%; /* (tamaño en porcentaje) */

}

h1{

	font-size: 2.5em; /* (tamaño en pixels) */

}



/*responsive font-size (se adapta a los dispositivos) */

h1{

	font-size: 10vw /* (10% del ancho del viewport o ventana del navegador) */

}



/*font variant */

p{

	font-variant: small-caps; /* las minúsculas se convierten en mayúsculas pequeñas*/

	font-variant: normal; /* texto normal*/

}

Colores

En HTML, los colores pueden ser identificados mediante nombres como green, violet o tomato. Existen hasta 140 colores disponibles.

No obstante, es posible definir los colores de una forma más técnica (más ejemplos interactivos AQUÍ):

p{

	color: Tomato;  /* Utilizando un color keyword. */

	color: rgb(255, 99, 71);  /* Utilizando los valores RGB (red, green, blue entre 0 y 255). */

	color: rgba(255, 99, 71, 0.5);  /* Como el anterior con una transparencia del 50%. */

	color: #FF6347;  /* Utilizando el valor HEX (red, green, blue en hexadecimal entre 00 y FF). */

	color: hsl(9, 100%, 64%);  /* Utilizando los valores HSL (hue o matiz en la rueda de color de 0 a 360, saturation o saturación de 0 a 100%, lightness o luminosidad de 0 a 100%). */

	color: hsla(9, 100%, 64%, 0.5);  /* Como el anterior con una transparencia del 50%. */

}

Si bien se han explicado muchas propiedades CSS, existen aún muchas otras, tales como degradados, sombras de cajas, efectos de texto y más que puedes consultar y probar en la web de w3schools.

Ejercicios propuestos:

3. Modifica el ejercicio propuesto 2 (Películas de Harry Potter), mejorando su visualización y diseño mediante hojas de estilo CSS

4. Crear una página web que incluya un listado de 10 países con su bandera alineada a la izquierda y el nombre y continente a la derecha. Debe cumplir los siguientes requisitos:

tendrá una cabecera con logo, título y subtítulo
la cabecera del listado (título de la section) tendrá un formato diferente al resto de las filas
las filas pares tendrán un color de fondo diferente a las filas impares
las filas que correspondan a cada continente tendrán el borde del mismo color (y diferente al del resto de continentes)
un footer sencillo y alineado al centro

5. Crea una página web de ancho fijo 1000px que se parezca los más posible a la siguiente imagen y, a continuación, modifícala incluyendo al menos 3 fuentes diferentes importadas desde Google Fonts

Publicado el 23 de Noviembre de 2024

aplicacionesweb