Comandos de CSS: instrucciones para los más utilizados

Para crear una página web se necesita una gran variedad de comandos de CSS. Te ofrecemos una visión general de los comandos de CSS más importantes y frecuentes, complementada con algunos ejemplos breves y personalizables para el diseño web.

Variedad de comandos de CSS con CSS 3

Al principio, los comandos de CSS se utilizaban para definir fuentes y colores de letra, hacer más atractivas las tablas o hacer que el texto fluyera alrededor de los elementos, pero las posibilidades se han ampliado considerablemente. Hoy en día, se pueden crear degradados de color, recortar imágenes, generar sombras y redondeces o usar animaciones.

Un comando CSS, también llamado regla CSS, se estructura de la siguiente manera:

La propiedad y el valor de la propiedad juntos forman lo que se llama una declaración.

Con CSS debes tener en cuenta que, a pesar de las mejoras y ajustes, no todos los navegadores lo “entienden” todo. En CSS existen los llamados prefijos de navegador, con los que los comandos se dirigen específicamente a los motores de los navegadores. Estos prefijos son:

• -moz-: para Firefox
• -ms-: para Internet Explorer
• -khtml-: para Konqueror
• -o-: para versiones antiguas de Opera
• -webkit-: para Safari, Chrome y versiones nuevas de Opera

Un ejemplo sencillo:

.box { 
-moz-border-radius: 10px; / *Instrucciones para Firefox* / 
border-radius: 10px; 
}

En la página CANIUSE puedes probar gratuitamente la compatibilidad de los comandos de CSS con todos los navegadores habituales.

Para el diseño responsivo de páginas web, se han añadido la CSS Flexbox, la CSS Grid y las Media Queries, que ayudan a aplicar el principio “Mobile First” con nuevos comandos de CSS.

Colores en CSS

El mundo de los colores en Internet se basa en el espacio de color RGB. Existen comandos de CSS para definir los colores de los distintos componentes de una página web. Casi cada elemento puede ser provisto de un color o incluso de un degradado de colores.

Opciones para especificar los valores de color

• Hexcode: #63f0ac
• Nombres de colores: red, green, blue, coral, white, black …
• RGB: rgb(238,130,238) y transparencia RGB con rgba(238,130,238, 0.7)
• HSL con transparencia: hsla(140,20%,50%,0.5) -Hue (Tono de color) de 0 a 360 grados en la rueda de color -Saturation (Saturación): de 0 % incoloro a 100 % de mayor intensidad de color -Lightness (Luminosidad): de 0 % como negro a 100 % como blanco -Valor numérico de transparencia hasta 1,0 = cobertura total del color

Ejemplos de definición de colores para elementos HTML

Para el color del texto, se utiliza la propiedad color:

p { color: red; } / *un párrafo en rojo* / 
div { color: #ffc3dd; } / *contenedor DIV con texto en rosa claro* / 
h1 { color: rgba(220,0,218,0.85); } / *título en violeta intenso con una transparencia del 85 %* /

Los gradientes de color también son posibles

Lo gradientes de color, que antes había que crear con archivos de imagen, ahora se puede hacer con comandos de CSS. Para ello se utiliza la instrucción background-image: gradient o de forma abreviada background:gradient. El gradient representa un valor para una imagen sin dimensiones y crea un gradiente de color que puede cambiarse en puntos definidos.

La tabla muestra solo algunos de los atributos posibles. Todos los valores comunes pueden utilizarse como especificaciones de color, incluidos los valores de color con transparencia.

El formato completo de un comando CSS podría ser, por ejemplo:

.box { background-image: linear-gradient(to top, white 0%, black 50%); }

Comandos de CSS para fuentes

Con el comando CSS font, se pueden cambiar de una sola vez las seis propiedades de una fuente utilizada.

p { font: italic small-caps 700 1.2em/1.5em Arial, Helvetica, sans-serif; }

Esta declaración CSS resumida se puede desglosar individualmente, en el orden dado:

La definición de font-family para el cuerpo de la página web se hereda en todas las instrucciones subyacentes. El color del texto no se establece con una instrucción font, sino con color:valor de color.

Puedes encontrar más información sobre las unidades de medida a utilizar para font-size en el artículo sobre tipografía en el diseño web adaptable.

Comandos de CSS para el diseño de texto

Además de la fuente, su color y tamaño, hay otras sutilezas tipográficas importantes para la legibilidad de una página web. Entre ellas:

Comandos de CSS para líneas y marcos

Para diseñar bordes, se utiliza el elemento CSS border, en el que, de forma similar a font, se resumen varias propiedades.

Ejemplo: una imagen, con la etiqueta HTML img, está rodeada por una línea de 5 píxeles de ancho en azul marino. La forma abreviada es:

img { border: 5px solid #000080; }

Este comando CSS puede desglosarse de la siguiente manera:

Las líneas a lo largo de los bordes individuales de una imagen o rectángulo se colocan individualmente con border-top, border-right, border-bottom y border-left con los mismos atributos que en la forma abreviada de border.

Comandos de CSS para definir el espaciado

Existen dos tipos de espaciado:

• padding como distancia interior del contenido al elemento circundante
• margin como distancia exterior de un elemento al siguiente

Distancia interior

El padding define la distancia entre un bloque de texto o una imagen y el marco circundante. Existe una forma abreviada y especificaciones definidas para todas las páginas de un bloque de contenido.

Cuando en la forma abreviada de padding se proporcionan valores para las cuatro posiciones, se procede desde arriba en sentido horario, es decir, en el siguiente formato:

p { padding: 5px 0 5px 0; } / *5 píxeles arriba y abajo, ningún espacio interior a la derecha e izquierda* /

Distancia exterior

El comando CSS margin define la distancia entre un elemento de diseño y el siguiente. La sintaxis y enumeración de los valores individuales es idéntica a padding.

Comandos de CSS para enlaces

Si defines el diseño de los enlaces en CSS, puedes diseñar cada estado de un enlace por separado. Además de la apariencia normal, también puedes especificar cómo se muestra un enlace al pasar el ratón por encima de él, durante el clic y al seleccionarlo (por ejemplo, con la tecla Tab).

a:link   { background-color: black; color: white;}

Por regla general, se realizan cambios en estas llamadas pseudoclases para cambiar el color de los enlaces. En principio, sin embargo, todos los comandos de CSS posibles pueden integrarse en estas clases.

Comandos de CSS para fondos

El fondo de una página web también puede modificarse mediante CSS. Esto puede hacerse especificando el color o añadiendo una imagen, por ejemplo. Si seleccionas una imagen, también puedes definir características adicionales.

Estos son comandos de detalle. También pueden anidarse bajo el comando de nivel superior fondo:

background: white url("http://example.org/image.png") 
    repeat-x

Aquí se integran los parámetros background-color, background-image y background-repeat.