Comandos de CSS: in­s­tru­c­cio­nes para los más uti­li­za­dos

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 im­po­r­ta­n­tes y fre­cue­n­tes, co­m­ple­me­n­ta­da con algunos ejemplos breves y pe­r­so­na­li­za­bles para el diseño web.

Variedad de comandos de CSS con CSS 3

Al principio, los comandos de CSS se uti­li­za­ban para definir fuentes y colores de letra, hacer más atra­c­ti­vas las tablas o hacer que el texto fluyera alrededor de los elementos, pero las po­si­bi­li­da­des se han ampliado co­n­si­de­ra­ble­me­n­te. Hoy en día, se pueden crear de­gra­da­dos de color, recortar imágenes, generar sombras y re­do­n­de­ces o usar ani­ma­cio­nes.

Un comando CSS, también llamado regla CSS, se es­tru­c­tu­ra de la siguiente manera:

La propiedad y el valor de la propiedad juntos forman lo que se llama una de­cla­ra­ción.

Con CSS debes tener en cuenta que, a pesar de las mejoras y ajustes, no todos los na­ve­ga­do­res lo “entienden” todo. En CSS existen los llamados prefijos de navegador, con los que los comandos se dirigen es­pe­cí­fi­ca­me­n­te a los motores de los na­ve­ga­do­res. 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 gra­tui­ta­me­n­te la co­m­pa­ti­bi­li­dad de los comandos de CSS con todos los na­ve­ga­do­res ha­bi­tua­les.

Para el diseño re­s­po­n­si­vo 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 co­m­po­ne­n­tes de una página web. Casi cada elemento puede ser provisto de un color o incluso de un degradado de colores.

Opciones para es­pe­ci­fi­car los valores de color

• Hexcode: #63f0ac
• Nombres de colores: red, green, blue, coral, white, black …
• RGB: rgb(238,130,238) y tra­n­s­pa­re­n­cia RGB con rgba(238,130,238, 0.7)
• HSL con tra­n­s­pa­re­n­cia: hsla(140,20%,50%,0.5) -Hue (Tono de color) de 0 a 360 grados en la rueda de color -Sa­tu­ra­tion (Sa­tu­ra­ción): de 0 % incoloro a 100 % de mayor in­te­n­si­dad de color -Lightness (Lu­mi­no­si­dad): de 0 % como negro a 100 % como blanco -Valor numérico de tra­n­s­pa­re­n­cia hasta 1,0 = cobertura total del color

Ejemplos de de­fi­ni­ció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 gra­die­n­tes de color también son posibles

Lo gra­die­n­tes 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 in­s­tru­c­ción ba­c­k­grou­nd-image: gradient o de forma abreviada ba­c­k­grou­nd:gradient. El gradient re­pre­se­n­ta un valor para una imagen sin di­me­n­sio­nes 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 uti­li­zar­se como es­pe­ci­fi­ca­cio­nes de color, incluidos los valores de color con tra­n­s­pa­re­n­cia.

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 pro­pie­da­des de una fuente utilizada.

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

Esta de­cla­ra­ción CSS resumida se puede desglosar in­di­vi­dua­l­me­n­te, en el orden dado:

La de­fi­ni­ción de font-family para el cuerpo de la página web se hereda en todas las in­s­tru­c­cio­nes su­b­ya­ce­n­tes. El color del texto no se establece con una in­s­tru­c­ción font, sino con color:valor de color.

Puedes encontrar más in­fo­r­ma­ción sobre las unidades de medida a utilizar para font-size en el artículo sobre ti­po­gra­fí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 ti­po­grá­fi­cas im­po­r­ta­n­tes para la le­gi­bi­li­dad 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 pro­pie­da­des.

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 de­s­glo­sar­se de la siguiente manera:

Las líneas a lo largo de los bordes in­di­vi­dua­les de una imagen o re­c­tá­n­gu­lo se colocan in­di­vi­dua­l­me­n­te 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 ci­r­cu­n­da­n­te
• 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 ci­r­cu­n­da­n­te. Existe una forma abreviada y es­pe­ci­fi­ca­cio­nes definidas para todas las páginas de un bloque de contenido.

Cuando en la forma abreviada de padding se pro­po­r­cio­nan valores para las cuatro po­si­cio­nes, 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 enu­me­ra­ción de los valores in­di­vi­dua­les 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 apa­rie­n­cia normal, también puedes es­pe­ci­fi­car cómo se muestra un enlace al pasar el ratón por encima de él, durante el clic y al se­le­c­cio­nar­lo (por ejemplo, con la tecla Tab).

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

Por regla general, se realizan cambios en estas llamadas pseu­do­cla­ses para cambiar el color de los enlaces. En principio, sin embargo, todos los comandos de CSS posibles pueden in­te­grar­se en estas clases.

Comandos de CSS para fondos

El fondo de una página web también puede mo­di­fi­car­se mediante CSS. Esto puede hacerse es­pe­ci­fi­ca­n­do el color o añadiendo una imagen, por ejemplo. Si se­le­c­cio­nas una imagen, también puedes definir ca­ra­c­te­rí­s­ti­cas adi­cio­na­les.

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 pa­rá­me­tros ba­c­k­grou­nd-color, ba­c­k­grou­nd-image y ba­c­k­grou­nd-repeat.