Hasta ahora, el contenido de las etiquetas utilizadas en los documentos HTML de ejemplo se ha mostrado de forma predefinida, por ejemplo, El texto de los encabezados aparecerá en negrita de con tamaños de fuente de menores en órdenes descendente desde <h1> uno, <h6>, Los enlaces eran de color azul y estaban subrayados, etc. A partir de ahora aprenderá a utilizarse CSS para establecer el aspecto que quiera que tenga cada uno de ellos.
Si con HTML es estructurada el contenido de una página web, con CSS podrá decidir cómo se muestra en pantalla.
Para ello, este lenguaje identifica las propiedades visuales de los elementos HTML y define los valores que pueden llegar a tener.
También define las distintas formas de aplicar los estilos, que van desde hacerlo dentro de la propia etiqueta hasta un archivo CSS diferente que del que tiene el Código HTML.
Ese será el objeto de estudio de la primera sección del presente capítulo.
En las siguientes secciones se describirán las diferentes formas de especificar el color, característica visual impredecible en prácticamente todos los elementos HTML.
Luego conocerá el modelo de caja con el que se termina el tamaño de cualquier elemento, teniendo en cuenta los bordes y márgenes existentes.
A continuación. Sea, la analizarán las propiedades específicas de los textos, las imágenes y las listas.
En la exposición de los hipervínculos se introducirá el concepto de pseudoclase, necesario para cambiar su apariencia en función del estado en el que se encuentren (visitados, pulsados, etc.).
También se enseñará cómo crear un efecto de sombra en cualquier elemento y, por último, se describirán dos de los valores más comunes en todas las propiedades vistas a lo largo del capítulo: Initial e inherit se utilizarán para recuperar el valor por defecto o el heredado del contenedor en el que se encuentra el elemento.
La lista de todas las propiedades CSS y sus posibles valores la fue encontrar en https://developer.mozilla.org/es/docs/Web/CSS/Reference o en https://www.w3schools.com/cssref/index.php
Cómo se acaba de comentar en la introducción de este capítulo, los elementos mostrados en una página web tienen una serie de características visuales que pueden ser modificadas asignando ciertos valores a las propiedades adecuadas.
Para ello, CSS proporciona 3 formas de hacerlo.
En la propia etiqueta, como un valor del atributo style.
Dentro de la etiqueta <style>. En la cabecera de documento HTML como reglas de estilo.
Mediante hojas de estilo almacenadas en uno o varios archivos externos que se vinculan a la página HTML.
En el primer caso, el estilo afecta únicamente al elemento HTML, dentro de cuya etiqueta se definió.
Su principal inconveniente es que no separa el contenido de la forma de demostrarlo, por lo que se ha salvado páginas muy sencillas (Como muchos de los ejemplos de este libro), se recomienda utilizar reglas de estilo, bien sea dentro de la cabecera del propio documento HTML o en hojas de estilo si la página fuera muy compleja.
En los siguientes apartados se describe en detalle todas estas formas de aplicar un estilo a los elementos HTML de una página web.
Cuando el ámbito de aplicación de un estilo es el de una etiqueta concreta, la opción más sencilla es utilizar el atributo style de dicha etiqueta, cuyo valor deberá seguir la siguiente sintaxis:
style = "propiedad: valor; ...; propiedad: valor;"
Observe que el valor del atributo style va entre comillas y que este se compone de múltiples declaraciones (pares propiedad: valor) separadas por un punto y coma (;).
Si alguno de los valores de una declaración tuviera que ir entre comillas, utilice comillas simples (no dobles).
El punto y como final no es imprescindible, pero se recomienda añadirlo siempre.
En el siguiente código puede ver un ejemplo de uso del atributo style, mediante el que se especifica que el subtítulo de una página (etiqueta <h2>) se escriba en azul sobre un fondo amarillo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Título principal de la página</h1> <h2 style="color:blue;background-color: yellow;">Subtítulo</h2> <h2>Otro subtítulo</h2> </body> </html>
Para ello, se emplean las propiedades color y background-color que tendrá ocasión de estudiar más adelante.
Al cargar esta página en su navegador, obtendrá el resultado mostrado a continuación:
Más adelante entenderá por qué el fondo amarillo se extiende todo el ancho de la ventana del navegador y aprenderá a limitarlo únicamente al texto (o hasta donde quiera).
Como puede observar, el estilo establecido en una etiqueta con el atributo style solo afecta a dicha etiqueta.
Por ese motivo, el siguiente subtítulo <h2> se muestra con su aspecto original.
El atributo style aplica el estilo a todo el contenido de una etiqueta.
Sin embargo, hay ocasiones en las que solo se requiere hacerlo en un fragmento.
Para resolver este problema, deberá añadir la etiqueta <span> como parte de dicho contenido, incluir dentro únicamente el fragmento afectado y definir para este su propio estilo.
Por ejemplo, suponga que quiere que solo una de las palabras de un párrafo se escriba sobre un fondo de color amarillo, no todo él.
El siguiente código de ejemplo muestra cómo hacerlo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Título principal de la página</h1> <h2 style="color:blue;background-color: yellow;">Subtítulo</h2> <h2>Otro subtítulo</h2> </body> </html>
En esta ocasión, además del texto, el párrafo incluye la etiqueta <span>, dentro de la que se encuentra la palabra que se quiere mostrar sobre un fondo amarillo.
Para ello, se utiliza el atributo style de esta última con el fin de asignar el valor yellow a la propiedad background-color.
El resultado lo puede ver a continuación:
Como puede comprobar, el texto del párrafo se muestra de la forma habitual, excepto la palabra que se ha incluido dentro de la etiqueta.
En general, las páginas web están formadas por multitud de etiquetas, por lo que asignarles un estilo de forma individual sería una labor tediosa y propensa a fallos.
Además, cuando se quisiera renovar el aspecto de una página, habría que modificar el estilo de todas las etiquetas, lo que supondría un enorme esfuerzo.
No menos importante es el hecho de que, cuando se utilizan estilos en línea, se está mezclando el contenido con la forma de presentarlo.
Eso tiene muchas desventajas, ya que en los sitios webs profesionales la persona que edita dicho contenido no tiene por qué ser la responsable de darle formato, algo que formaría parte de la labor de un diseñador gráfico.
Para evitar estos inconvenientes, CSS permite la creación de reglas de estilo que sacan del cuerpo del documento HTML todo lo que tiene que ver con el aspecto de los elementos que componen la página y lo llevan a la cabecera, dentro de la etiqueta <style>, tal como puede ver a continuación:
<style>
regla de estilo
...
regla de estilo
</style>
Una regla de estilo está formada por un selecto y un bloque de declaraciones (Pares, propiedades: valor) El selector será el que determine el conjunto de elementos sobre los que se aplica la regla y las declaraciones específicas su aspecto visual, su sintaxis es la siguiente.
selector {
propieda: valor;
...
propieda: valor;
}
Olvidarse de escribir el punto y coma (;) al final de cada declaración puede provocar errores difíciles de detectar.
Existen múltiples clases de selectores, pero los principales son:
Etiqueta. El bloque de declaraciones afecta a todas las etiquetas de un tipo.
Identificador. La regla solo se aplica a la etiqueta que tenga dicho identificador.
Clase.
Su efecto se extiende únicamente a las etiquetas vinculadas a esa clase.
Un selector muy especial es el universal, representado por un asterisco (*), que aplica la regla a todos los elementos de la página.
En los siguientes apartados aprenderá a crear reglas de estilo utilizando estos tres tipos de selectores.
Un selector de etiqueta asocia una regla de estilo a una etiqueta, pero no a una en concreto (como sucedía cuando se utilizaba el atributo style) sino a todas ellas.
El siguiente código de ejemplo contiene una regla de estilo, cuyo selector de etiqueta establece la forma en la que se tienen que mostrar los encabezados de segundo nivel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* formato de los subtitulos */
h2 {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Titulo principal de la página</h1>
<h2>Subtitulo</h2>
<h2>Otro subtitulo</h2>
</body>
</html>
Como puede observar, en la cabecera del documento HTML (dentro de la etiqueta <style>) se ha definido una regla de estilo cuyo selector es h2, por lo que afecta a todos los encabezados de segundo nivel (texto de las etiquetas <h2>).
El valor asignado a las propiedades color y background-color determinan que estos se escriban en color azul sobre un fondo amarillo.
Le habrá llamado la atención el texto situado sobre la regla de estilo:
/* formato de los subtítulos */
Se trata de un comentario CSS.
Este no es interpretado por el navegador, ya que su finalidad es proporcionar información que permita entender las reglas de estilo y facilitar su posterior mantenimiento.
Tiene una sintaxis diferente de la de los comentarios HTML, motivo por el que debe ir siempre dentro de la etiqueta <style>.
El cuerpo del documento está compuesto por un encabezado principal (<h1>) y dos de segundo nivel (<h2>).
Como puede comprobar en la siguiente imagen, estos últimos se escriben en color azul sobre un fondo amarillo.
Si hubiera más encabezados <h2>, todos se mostrarían de la misma forma.
Cuando se utiliza un selector de etiqueta, la regla de estilo se aplica al contenido de todas las etiquetas de ese tipo.
Sin embargo, a veces se quiere que el estilo afecte solo a una etiqueta en concreto (no a todas ellas).
Una forma de hacerlo sería mediante el atributo style de la etiqueta afectada.
Pero si prefiere usar una regla de estilo por las ventajas que ello supone, deberá asignarle un identificador (entre comillas) con el atributo id:
<etiqueta id="identificador">
Posteriormente, dicho identificador (sin las comillas) se utilizaría como selector en la regla de estilo, precedida del carácter '#':
#identificador
El valor de un id no se puede repetir. Debe ser único para cada elemento HTML.
Con el fin de entender la forma de sustituir el atributo style de una etiqueta por una regla de estilo cuyo selector sea un identificador, este primer código de ejemplo muestra un párrafo compuesto de una línea escrita en color blanco sobre un fondo negro:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="color: white; background-color: black;">
Este texto forma parte de un párrafo.
</p>
</body>
</html>
Como puede observar, el aspecto del párrafo se determina en línea mediante el atributo style en la propia etiqueta <p>, para lo que se emplean las propiedades color y background-color.
Una vez cargado el código en el navegador, vería lo siguiente:
Ahora sustituya el documento HTML anterior por este otro.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#blanco-y-negro {
color: white;
background-color: black;
}
</style>
</head>
<body>
<p id="blanco-y-negro">
Este texto forma parte de un párrafo.
</p>
</body>
</html>
Aunque este código es diferente del anterior, el navegador mostrará el mismo resultado.
El motivo es porque las declaraciones de estilo del párrafo siguen siendo las mismas.
Lo único que se ha hecho es trasladarlas de la propia etiqueta a una regla de estilo, cuyo selector es el identificador “blanco-y-negro” que previamente se le ha asignado mediante el atributo id.
Tal como se expuso en el capítulo anterior, cuando se quiere aplicar un mismo estilo a un grupo de elementos HTML, solo tiene que incluirlos dentro de un contenedor (por ejemplo, <div>) en el que se defina dicho estilo.
La única condición (limitación) es que deben ir juntos en el documento HTML (unos debajo de otros).
Eso es lo que se ha hecho en el siguiente código de ejemplo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Este texto forma parte de un párrafo sin estilo</p>
<div style="color:blue;background-color: yellow;">
<p>Este texto hereda el estilo de su contenedor</p>
<p>Este texto hereda el estilo de su contenedor</p>
<p>Este texto hereda el estilo de su contenedor</p>
<p>Este texto hereda el estilo de su contenedor</p>
</div>
<p>Este texto forma parte de un párrafo sin
estilo</p>
</body>
</html>
Como puede apreciar, el cuerpo del documento se compone de un primer y último párrafo sin estilo, entre los cuales se sitúa un contenedor en el que se ha utilizado su atributo style para especificar un color de tinta azul y otro de fondo amarillo (propiedades color y background-color).
Dicho estilo será el heredado por los párrafos que contiene, tal como puede ver a continuación:
No todas las propiedades se heredan.
Sin embargo, en muchas ocasiones los elementos que comparten un mismo estilo no pueden agruparse (están repartidos por toda la página). En ese caso, deberá vincularlos a una clase.
Para asociar una etiqueta a una clase deberá asignar su nombre (entre comillas) al atributo class.
<etiqueta class = "nombre de la clase">
Posteriormente, dicho nombre (sin las comillas) se utilizará como selector en una regla de estilo, precedida de un punto (.):
.clase
Una etiqueta se puede asociar a varias clases. Para ello, solo tiene que separarlas por un espacio:
<etiqueta class="clase1 clase2 ...">
Para saber cómo se utiliza este nuevo atributo, en el siguiente ejercicio se crean dos reglas de estilo cuyos selectores son clases, en cada una de las cuales se especifica un color de tinta y de fondo diferente.
Así, los párrafos de la página se mostrarán de una u otra forma según la clase a la que se hayan vinculado, tal como puede ver a continuación, donde se han intercalado párrafos de ambos estilos:
El código con el que se ha conseguido el resultado anterior es el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.blanco-y-negro {
color: white;
background-color: black;
}
.azul-y-amarillo {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p class="blanco-y-negro">
Este texto forma parte del párrafo 1
</p>
<p class="azul-y-amarillo">
Este texto forma parte del párrafo 2
</p>
<p class="blanco-y-negro">
Este texto forma parte del párrafo 3
</p>
<p class="azul-y-amarillo">
Este texto forma parte del párrafo 4
</p>
</body>
</html>
En esta ocasión no tiene sentido utilizar un contenedor <div>, por lo que a cada párrafo se le asocia la clase que determina el estilo con el que se quiere mostrar (se asigna el valor “blanco-y-negro” o “azul-y-amarillo” al atributo class).
Los nombres de estas clases se utilizan como selectores de dos reglas de estilo, en cuyo bloque de declaraciones se asigna el color correspondiente a las propiedades color y background-color.
Además de una clase, un selector puede estar compuesto por pseudoclases que permiten restringir la aplicación de una regla solo a los elementos que estén en un determinado estado (por ejemplo, cuando el ratón se sitúe por encima o se pulsen).
En esta obra solo se emplearán en el contexto de los hipervínculos, por lo que su estudio se aplaza a la sección dedicada a estos elementos.
En todos los ejercicios realizados hasta el momento, las reglas de estilo utilizaban selectores simples.
Sin embargo, estos se pueden combinar mediante operadores que amplían o restringen los elementos a los que tiene que aplicarse.
Aunque CSS dispone de diversos operadores, los selectores compuestos más comunes son:
Selector de combinación . El bloque de declaraciones actúa sobre los elementos HTML afectados por cada uno de los selectores simples.
Utiliza el operador coma (,).
selector_simple, selector_simple, ...
Selector anidado . El bloque de declaraciones aplica solo a los elementos HTML del selector de la derecha que están incluidos en los de la izquierda (necesariamente tendrán que ser contenedores).
En este caso, el operador empleado es el espacio ().
selector_simple selector_simple ...
Si alguno de los selectores simples no tuviera la sintaxis correcta, la regla no se aplicaría a ningún elemento HTML.
Si olvidara el espacio o la coma entre los selectores simples, y estos fueran clases (no tiene sentido con identificadores y etiquetas), la regla aplicaría a los elementos HTML que estuvieran vinculados a dichas clases (a todas, no solo a alguna):
.clase1.clase2...
Si alguno de los selectores simples no tuviera la sintaxis correcta, la regla no se aplicaría a ningún elemento HTML.
Seguramente tenga dudas sobre la aplicación práctica de este tipo de selectores, así que, como la mejor forma de aprender es practicando, en el siguiente código de ejemplo se empieza haciendo uso del primer selector (el de combinación):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1, h2 {
color: blue;
}
</style>
</head>
<body>
<h1>Texto de un encabezado h1</h1>
<h2>Texto de un encabezado h2</h2>
</body>
</html>
El cuerpo del documento HTML está formado únicamente por dos encabezados, uno de cada tipo (<h1> y <h2>).
En la cabecera, la única regla de estilo tiene un bloque de declaraciones en el que se establece un color de tinta azul (la propiedad color tiene el valor blue).
Como el selector es de combinación, dicho color se aplica a ambas etiquetas, tal como puede ver a continuación.
La principal ventaja de este tipo de selectores es la de evitar tener que repetir con el mismo bloque de declaraciones. (En este caso se Evita tener una regla para las etiquetas <h1> y otra para <h2>).
Ahora modifique el Código HTML anterior para obtener este otro.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1, h2 {
color: blue;
}
.fondo-amarillo h1 {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Texto de un encabezado h1</h1>
<div class="fondo-amarillo">
<h1>Texto de un encabezado h1 dentro de un contenedor</h1>
<h2>Texto de un encabezado h2 dentro de un contenedor</h2>
</div>
<h2>Texto de un encabezado h2</h2>
</body>
</html>
Lo primero que se ha hecho es añadir la siguiente regla de estilo a continuación de la existente en el documento HTML original:
.fondo-amarillo h1 { background-color: yellow;
}
En ella se establece un color de fondo amarillo (se asigna el valor yellow a la propiedad background-color).
El selector está formado por una clase (“fondo-amarillo”) y el nombre de una etiqueta (h1) separados por un espacio.
Por lo tanto, al tratarse de un selector anidado, esta regla solo aplicará a las etiquetas <h1> que estén dentro de algún contenedor que pertenezca a dicha clase.
El cuerpo de este nuevo documento HTML mantiene el encabezado <h1> inicial y <h2> final del documento original.
Sin embargo, en medio se ha incorporado un contenedor <div> dentro del que hay otra pareja de encabezados <h1> y <h2>.
Además, dicho contenedor se ha vinculado a la clase “fondo-amarillo” mediante el atributo class.
Como la nueva regla de estilo afecta a cualquier elemento <h1> que esté dentro de otro perteneciente a dicha clase, el que hay dentro del contenedor se mostrará con un color de fondo amarillo, mientras que el de fuera lo hará como antes (solo con un color de tinta azul, al igual que el resto de los encabezados <h2>).
Observe que el color del texto del encabezado <h1> que hay dentro del contenedor sigue siendo azul.
Eso es debido a que se le han aplicado las dos reglas de estilo, a diferencia del resto de encabezados, en los que solo tiene efecto la primera.
En este caso, como el documento HTML solo tiene un contenedor <div>, la siguiente regla de estilo tendría el mismo efecto:
div h1 {
background-color: yellow;
}
Si lo hiciera así y añadiera más contenedores <div>, todos los encabezados <h1> que estuvieran dentro de cualquiera de ellos tendrían un color de fondo amarillo (naturalmente, ya no haría falta asociar dichos contenedores a ninguna clase).
Pero si la regla solo tuviera que aplicarse a un determinado grupo de contenedores (no a todos), no le quedaría más remedio que utilizar de nuevo selectores de clase.
En páginas profesionales, donde el número de reglas de estilo es muy variado, lo habitual es llevarlas a un archivo independiente.
De esa forma, el código HTML quedaría completamente separado del CSS.
En ese caso, lo que se hace es añadir una etiqueta <link> en la cabecera del documento HTML cuyo atributo href especifique la ruta de acceso a dicho archivo (o archivos).
Con el fin de demostrar la forma de usar una hoja de estilo, cree una carpeta debajo de “Practicas” llamada “CSS” y guarde en ella el siguiente código con el nombre “estilos.css”:
@charset "UTF-8";
h1, h2 {
color: blue;
}
.fondo-amarillo h1 {
background-color: yellow;
}
Como puede comprobar, contiene las reglas de estilo definidas dentro de la etiqueta <style> en el código de ejemplo del ejercicio anterior.
La primera línea es una directiva que se recomienda utilizar por seguridad para evitar problemas con nombres que pudieran tener acentos.
Ahora modifique el código del documento HTML del ejercicio anterior de forma que ahora quede así:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/estilos.css">
</head>
<body>
<h1>Texto de un encabezado h1</h1>
<div class="fondo-amarillo">
<h1>Texto de un encabezado h1 dentro de un contenedor</h1>
<h2>Texto de un encabezado h2 dentro de un contenedor</h2>
</div>
<h2>Texto de un encabezado h2</h2>
</body>
</html>
En esta ocasión, en la cabecera del documento HTML se ha sustituido la etiqueta <style> por <link>. El valor de href es la ruta de acceso a la hoja de estilos (“../css/estilos.css”) y el de rel indica al navegador que se trata de una hoja de estilos ("stylesheet").
La estructura de carpetas utilizada en este ejercicio es:
/Prácticas /CSS estilos.css /Capitulo3 el documento HTML
Cargue este documento en el navegador y compruebe que el resultado es el mismo del mencionado ejercicio.
El empleo del color es imprescindible en el desarrollo de cualquier actividad cuyo objetivo sea la transmisión visual de información.
Aunque la pintura es el arte en el que alcanza su mayor expresión, la creación de páginas web no deja de ser también un trabajo artístico.
Por eso, aquellas que utilizan una combinación de colores inapropiada pueden provocar rechazo.
En consecuencia, además de un diseño gráfico correcto, un buen sitio web siempre deberá disponer de una paleta de colores adecuada.
En HTML cualquier elemento es susceptible de tener color, desde el utilizado para la tinta de un texto, pasando por el del borde de una imagen hasta el de fondo de un contenedor, por poner algún ejemplo.
En todos estos casos, se tendrá que hacer uso de propiedades que irá conociendo poco a poco durante la lectura de este libro, aunque hay dos que destacan sobre las demás:
color. Establecen el color de tinta.
background-color. Determinan el color de fondo.
Ambas propiedades toman como valor un color, al que se identifica por su nombre.
La mayoría de los navegadores reconoce alrededor de 140 nombres de colores, entre los que se encuentran el blanco (white), el negro (black), el rojo (red), el verde (green) o el azul (blue).
En https://developer.mozilla.org/es/docs/Web/CSS/color_value puede encontrar una lista completa con los nombres de todos los colores.
A modo de ejemplo, a continuación puede ver los correspondientes a los distintos tonos de rosa:
Como ha practicado con ambas propiedades en secciones anteriores, ya sabe cómo utilizarlos, sin embargo, aunque en un principio 140 colores le puedan parecer muchos, los ordenadores actuales pueden reproducir millones.
Si quisiera utilizar cualquiera de ellos, deberá conocer los espacios de color manejados por HTML.
Aunque HTML identifica muchos colores por su nombre, tarde o temprano querrá utilizar otros diferentes.
Por ese motivo, debe saber que un color se puede especificar conforme a los siguientes espacios de color:
RGB ( red, green y blue ). Tal como indica este acrónimo, el color se descompone en los colores rojo, verde y azul.
HSL ( hue, saturation y lightness ). En este caso, el color se describe como una combinación de matiz, saturación y luminosidad.
Empecemos estudiando el primero.
Si es observador, en la imagen donde se mostraba el nombre de las diferentes tonalidades de rosa, a su lado también aparecía un código decimal y otro hexadecimal.
En ambos casos, se trata de un valor RGB, es decir, una terna formada por tres números que representan la intensidad de los componentes rojo, verde y azul con los que se obtiene el color.
En CSS, la forma de especificar un color en formato RGB es:
rgb(rojo, verde, azul)
Cada uno de los valores de esta terna podrá variar entre 0 y 255.
Cuando los tres colores tienen el máximo nivel de intensidad, se obtiene el color blanco, mientras que el nivel mínimo daría como resultado el negro.
Si uno de los colores tuviera una intensidad máxima y el resto cero, se obtendría el color primario correspondiente (en estado puro).
En resumen, los valores de estos colores serían los siguientes:
Blanco: rgb(255, 255, 255) Negro: rgb(0, 0, 0) Rojo: rgb(255, 0, 0) Verde: rgb(0, 255, 0) Azul: rgb(0, 0, 255)
Los tonos de gris se obtienen cuando el nivel de los tres colores es el mismo. Cuanto más alto sea dicho valor, más claro será este.
Por ejemplo, rgb(200, 200, 200) sería un gris claro mientras que rgb(50, 50, 50) sería oscuro.
La intensidad de cada color primario también se puede representar en formato hexadecimal.
En ese caso, su valor no sería un número del 0 al 255, sino 2 caracteres cuyo valor puede ser 0, 1, 2, 3..., 8, 9, A, B, ..., E, F. Aunque no se describirá este sistema de numeración, a modo de ejemplo, el valor 0 decimal corresponde a 00 en hexadecimal y el 255 a FF.
Cuando se utiliza la notación hexadecimal, la sintaxis con la que se especifica un color es distinta a la decimal, ya que los valores de la intensidad de todos los colores van juntos y se preceden del carácter ‘#’.
De ese modo, los colores de la lista anterior se escribirían así en hexadecimal:
Blanco: #FFFFFF Negro: #000000 Rojo: #FF0000 Verde: #00FF00 Azul: #0000FF
Si en vez del espacio de color RGB utilizara el HSL, la forma de especificar un color sería descomponiéndolo en su matiz, saturación y luminosidad.
La siguiente imagen (tomada de https://es.wikipedia.org/wiki/Modelo_de_color_HSL) lo representa gráficamente.
El matiz se simboliza como un ángulo cuyos valores posibles van de 0 a 360°.
Dentro de este rango, cada color primario (rojo, verde o azul) ocupa 360/3= 120°.
Así, a partir del valor 0 se encontrarían los matices de rojo, en el 120 empezarían los de verde y en el 240 los de azul.
La saturación representa la pureza del color, y sus valores posibles van del 0% al 100%.
Cuanto menor sea la saturación de un color, mayor tonalidad grisácea tendrá y más decolorado estará.
La siguiente imagen muestra gráficamente este concepto aplicado al color azul, cuya saturación varía entre el 100% y 0% a intervalos del 20%.
La luminosidad determina el brillo de la imagen, que puede variar del 0 al 100%.
Cuanto más alto sea este valor, más clara se la será la imagen, tal como se muestra a continuación en la.
En la que esta variable dicho rango a intervalos del 20%.
Observe que con un brillo del 0% la imagen es negra mientras que al 100% es blanca.
Un color puro se obtiene con una luminosidad del 50%.
La forma de especificar un color en formato HSL es:
CSS hsl(tono, saturación, luminosidad)
De este modo, tomando de nuevo como ejemplo la lista de colores anterior, su valor en formato HSL sería:
Blanco: hsl(0, 0%, 100%) Negro: hsl(0, 0%, 0%) Rojo: hsl(0, 100%, 50%) Verde: hsl(120, 100%, 50%) Azul: hsl(240, 100%, 50%)
En este caso, los tonos de gris se obtienen modificando la luminosidad, mientras el matiz y la saturación toman un valor del 0%. Cuanto más alto sea dicho valor, más claro será el gris resultante.
Para conocer los valores RGB o HSL que debe tener un color determinado, deberá utilizar una herramienta que le permita seleccionarlo y genere como salida estos valores en ambos espacios de color.
En Internet existen muchas de carácter gratuito, como la mostrada en la siguiente imagen (https://htmlcolorcodes.com/color-picker/):
Si utiliza el editor Visual Studio Code, al escribir el nombre de la propiedad color se despliega un menú contextual cuyas opciones son los nombres de los distintos colores que le puede asignar.
Una vez elegido uno de ellos, al situar el ratón encima aparece un selector de color que le permitiría personalizarlo como quiera.
Una vez seleccionado el punto donde está el color señalado por la flecha, en la parte superior se muestra, de izquierda a derecha, el color elegido, el valor hexadecimal y decimal de los componentes RGB, así como el de los componentes HSL.
En el siguiente código de ejemplo. Se muestran tres encabezados de color verde, cuyo valor se establece en los espacios de color que se acaban de describir.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 style="color: rgb(0, 255, 0)">
Texto verde RGB decimal
</h1>
<h1 style="color: #00ff00">
Texto verde RGB hexadecimal
</h1>
<h1 style="color: hsl(120, 100%, 50%)">
Texto verde HSL
</h1>
</body>
</html>
El resultado obtenido demuestra que las tres formas de especificar un color son equivalentes.
HTML permite definir el nivel de transparencia de un color.
Para ello, solo debe incorporar el parámetro alpha en su especificación.
Este valor es decimal y está comprendido entre 0 (transparente) y 1 (sólido).
El parámetro alpha se puede añadir tanto en el modelo de color RGB como HSL.
En ese caso, la sintaxis que deberá emplear será la siguiente:
rgba(rojo, verde, azul, alpha) hsl(tono, saturación, luminosidad, alpha)
En el siguiente código de ejemplo se utiliza este parámetro para mostrar cinco encabezados <h1> que se van haciendo transparentes de forma progresiva:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 style="color: rgb(0, 0, 255)">
Texto azul con un grado de transparencia 1
</h1>
<h1 style="color: rgb(0, 0, 255, 0.75)">
Texto azul con un grado de transparencia 0.75
</h1>
<h1 style="color: rgb(0, 0, 255, 0.5)">
Texto azul con un grado de transparencia 0.5
</h1>
<h1 style="color: rgb(0, 0, 255, 0.25)">
Texto azul con un grado de transparencia 0.25
</h1>
<h1 style="color: rgb(0, 0, 255, 0)">
Texto azul con un grado de transparencia 0
</h1>
</body>
</html>
Como puede observar, el color de los encabezados <h1> se especifica con una notación RGBA. El valor de los componentes rojo y verde es 0 mientras que el del azul tiene el valor máximo (255), motivo por el que estos tendrán dicho color.
El valor del parámetro alpha decrece a intervalos de 0.25, por lo que el texto de los encabezados se va difuminando de forma gradual hasta dejar de verse (el último es completamente transparente).
Ese es el motivo de que en la siguiente imagen solo aparezcan cuatro de los cinco encabezados que componen el cuerpo del documento HTML.
Con el fin de mejorar la visualización de los elementos que conforman una página web, HTML proporciona un variado conjunto de propiedades que determinan su aspecto, y entre ellos su tamaño.
Precisamente, las que hacen referencia a esta última característica forman parte de un grupo que constituye el modelo de caja, cuyo conocimiento es imprescindible para el correcto diseño gráfico de la página.
Según este modelo, cualquier elemento HTML se encuentra dentro de una caja rectangular formada por su propio contenido (un texto, una imagen, una lista, etc.), un margen interno y el borde.
Si el margen interno es el que hay entre el contenido y el borde, el externo es el que va más allá de este y sirve para separarlo del resto de elementos de la página.
Dicha separación es la suma de los márgenes externos de ambos elementos en sentido horizontal, pero solo la del mayor en sentido vertical.
La siguiente imagen lo representa gráficamente, ya que muestra tres elementos HTML con sus respectivos márgenes externos, donde se aprecia la separación que habría entre ellos:
Para establecer el tamaño del contenido, los márgenes o los bordes de un elemento, CSS proporciona las siguientes propiedades:
width y height. Determina el ancho y el alto del contenido.
margin. Establece los márgenes externos.
padding. Fija los márgenes internos.
border. Especifica aquello que tiene que ver con el borde, como el tipo de línea, el color, el grosor, etc.
En las siguientes secciones se describirán en detalle cada una de estas propiedades.
Sin embargo, antes deberá conocer las unidades de medida utilizadas para especificar el valor de todas ellas.
Estas unidades las usará con frecuencia, ya que los elementos HTML que se muestran en pantalla lo hacen siempre con un tamaño determinado.
Una longitud se puede expresar de dos formas distintas, que determinan el tipo de unidad de medida utilizado:
Absoluta.
Relativa.
Las unidades de medida absolutas establecen un tamaño fijo (siempre el mismo), independientemente del tipo de dispositivo.
Son las siguientes:
in. Pulgadas. El nombre de la unidad procede del inglés “inches” (1 pulgada son 2.54 centímetros).
cm. Centímetros.
mm. Milímetros.
pt. Puntos. No lo confunda con píxeles (1 punto equivale a 1/72 pulgada, aproximadamente 0.35 milímetros).
pc . Picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)
Por lo tanto, el tamaño de un elemento HTML puede ser, por ejemplo, de 2 pulgadas ( 2in ), 3 centímetros ( 3cm ) o 10 puntos ( 10pt ).
Observe que entre el valor y la unidad de medida no hay ningún espacio.
Por el contrario, las unidades de medida relativas requieren de una referencia para obtener el valor definitivo.
En concreto, con HTML se pueden usar las siguientes:
px. Corresponde al tamaño de un píxel de la pantalla, cuyo tamaño depende de la resolución del dispositivo (aunque, sería más adecuado hablar de la densidad de píxeles por pulgada).
%. Es un porcentaje del tamaño del elemento contenedor en el que se incluya el elemento.
Si no estuviera dentro de ninguno, correspondería al de la ventana del navegador.
vw y vh. Equivalen al 1% del ancho y el alto de la ventana del navegador, respectivamente.
De forma particular, cuando se trabaja con textos se suelen utilizar la unidad em, que coincide con el ancho de la letra ‘M’ en la fuente utilizada, o rem, que es el de la fuente por defecto del navegador.
Estas no son las únicas unidades permitidas por HTML. Si quiere conocerlas todas, visite la página https://developer.mozilla.org/es/docs/Web/CSS/length.
A primera vista, seguro que piensa que las unidades absolutas son las más intuitivas y, por lo tanto, se decante por ellas.
A fin de cuentas, todos estamos acostumbrados a usarlas en la vida diaria.
Sin embargo, se recomienda encarecidamente el uso de las relativas porque, a diferencia de las anteriores, adaptan el tamaño de los elementos HTML a la pantalla del dispositivo en el que se muestran.
En consecuencia, si quiere que una página web se vea de forma correcta tanto en una tableta, como en un móvil o un ordenador personal, utilice siempre unidades de relativas.
Todos los elementos visibles de una página web lo hacen con un tamaño susceptible de modificarse.
Según el modelo de caja, sus dimensiones vienen determinadas por el ancho y el alto del contenido del elemento, al que se suma el grosor del margen interno y el borde.
En esta sección se describirán las propiedades que determinan únicamente el tamaño del contenido (sin borde ni márgenes), en concreto, width y height.
Los valores que pueden llegar a tomar ambas propiedades son:
auto. El navegador se encarga de calcular el ancho y el alto del elemento.
Un número seguido de la unidad de medida utilizada.
Un porcentaje del tamaño del contenedor en el que se encuentra.
Además de los valores anteriores, tanto width como height pueden tomar el valor:
inherit. Heredan el valor que se hubiera asignado al contenedor donde estén incluidos.
initial. La propiedad vuelve a tomar el valor por defecto (se supone que ha sido modificada previamente).
En la última sección de este capítulo se explican en detalle estos valores tan especiales.
Por último, y en el caso de que el elemento sea un contenedor, ambas propiedades también podrán tomar este otro valor:
fit-content. Ajusta el tamaño del contenedor al del contenido.
Con el fin de practicar con estas importantes propiedades, se utilizará un código de ejemplo compuesto por un contenedor <div> dentro del que se han incluido cuatro párrafos <p>:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="background-color: yellow;">
<p>Este texto forma parte del párrafo 1</p>
<p>Este texto forma parte del párrafo 2</p>
<p>Este texto forma parte del párrafo 3</p>
<p>Este texto
forma parte del párrafo 4</p>
</div>
</body>
</html>
Para ver el espacio ocupado por el contenedor y, de esta forma, apreciar con claridad los cambios de tamaño que experimenta al modificar los valores de las propiedades width y height, se le ha asignado un color de fondo amarillo (el valor de la propiedad background-color es yellow).
El documento HTML anterior no hace uso de las propiedades width y height, por lo que el alto y el ancho del contenedor lo define el navegador (su efecto es el mismo que si les hubiera asignado el valor auto).
Como puede ver a continuación, su ancho coincide con el de la pantalla.
En cambio, el alto se ajusta al contenido para englobar los cuatro párrafos que agrupa.
Ahora, añada la propiedad width al estilo de la etiqueta <div> con el fin de reducir su ancho a la mitad del que tiene la ventana del navegador:
<div style="background-color:yellow; width: 50%;">
En esta otra imagen se puede comprobar cómo el fondo amarillo pasa a ocupar solo la mitad del ancho de la pantalla.
Podría pensar que, si asignara un valor del 50% a la propiedad height, el alto del contenedor sería la mitad de la ventana del navegador:
<div style="background-color:yellow; height: 50%;">
Sin embargo, al refrescar la página comprobaría que no es así.
El motivo es porque no se ha fijado de forma explícita el tamaño de los contenedores dentro de los que se encuentra, en este caso, el de las etiquetas <body> y <html>.
Por lo tanto, para que el contenedor <div> ocupe la mitad del alto de la ventana del navegador, deberá hacer los siguientes cambios:
<html style="height: 100%;">
...
<body style="height: 100%;">
<div style="background-color:yellow; height: 50vh;">
...
</div>
</body>
</html>
Estas modificaciones no serían necesarias si en vez de un %, utilizara vh como unidad de medida (recuerde que representa el 1% del tamaño de la pantalla).
En ese caso, el único ajuste que habría que hacer sobre el código original, sería:
<div style="background-color:yellow; height: 50vh;">
En ambos casos, el resultado sería el siguiente:
Si lo que quiere es ajustar el ancho del <div> al de su contenido, solo tiene que asignar el valor fit-content a la propiedad width (el alto, como ha comprobado, ya se ajusta automáticamente):
<div style="background-color:yellow; width: fit-content;">
Esta nueva imagen demuestra que ahora el espacio ocupado por el contenedor coincide con el de su contenido, es decir, el de los cuatro párrafos:
En todos los ejercicios realizados hasta el momento, los contenedores incluían elementos HTML cuyo tamaño era inferior. Pero ¿qué sucedería si eso no fuera así?
Para comprobarlo, se utilizará un código HTML muy parecido al utilizado en los ejercicios de la sección anterior:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="background-color: yellow; height: 100px; width: 200px;">
<p>Este texto forma parte del párrafo 1</p>
<p>Este texto forma parte del párrafo 2</p>
<p>Este texto forma parte del párrafo 3</p>
<p>Este texto forma parte del párrafo 4</p>
</div>
</body>
</html>
Como puede observar, el tamaño del contenedor dentro del que están los cuatro párrafos se limita a 200 x 100 píxeles.
Al especificar unas dimensiones concretas, se asumen estas y se ignoran las de su contenido, que termina saliendo fuera de sus límites, como se aprecia a continuación:
Observé que el navegador ha dividido el texto del párrafo en varias líneas para acomodarlo al ancho del contenedor.
Sin embargo, eso no se puede hacer a lo alto, por lo que este se desborda por debajo.
Con el fin de controlar estas situaciones, HTML ofrece la propiedad overflow, a la que se puede asignar los siguientes valores:
visible. Aunque el contenido sale fuera del contenedor, se sigue viendo. Es el valor por defecto, mostrado en la imagen anterior.
hidden. Todo lo que no entra en el contenedor deja de verse.
scroll. Muestra siempre una barra de desplazamiento, independientemente de si el contenido sale fuera del contenedor, o no.
auto. La barra de desplazamiento solo aparece cuando el contenido desborda el contenedor.
Esta propiedad solo tiene efecto en aquellos elementos que se muestran en modo bloque (en el capítulo de distribución de elementos se estudia cuáles son).
Para demostrar los efectos de esta propiedad, añádala al estilo de la etiqueta <div>:
<div style="background-color:yellow; height: 100px; width: 200px; overflow: hidden;">
A continuación, se puede advertir el efecto producido al asignar el valor hidden a la propiedad overflow.
Como puede comprobar, el texto que no cabe en el contenedor (recuadro amarillo) deja de verse
En cambio, esta otra imagen muestra el resultado obtenido si se hubiera asignado el valor scroll, donde se aprecian las barras de desplazamiento que permitan leerlo por completo.
Cuando se especifica el tamaño de un elemento HTML, no solo es posible asignarle un valor concreto mediante las propiedades width y height , sino también un margen entre los que estaría limitado.
En ese caso, las propiedades que habría que utilizar son:
max-height y max-width.
min-height y min-width .
Las dos primeras determinan la altura o anchura máxima del elemento.
Si su contenido fuera más pequeño, no tendría ningún efecto.
En caso contrario, este se mostraría según la estrategia establecida en la propiedad overflow.
Las dos últimas fijan la altura o anchura mínima del elemento.
Si su contenido fuera más pequeño, se aplicaría este tamaño. En caso contrario, no tendría ningún efecto.
Los valores que pueden llegar a tener estas propiedades son:
Un número seguido de una unidad de medida.
Un porcentaje del tamaño del contenedor en el que se encuentra el elemento.
Además de los valores anteriores, max-height , max-width también pueden tomar el valor none , que no establece ningún valor máximo.
Es su valor por defecto. El de las propiedades min-height y min-width es 0 .
Como sucede con otras muchas propiedades, estas también pueden tomar los valores initial e inherit .
El siguiente código demuestra el comportamiento de los elementos que utilizan estas propiedades:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="background-color: yellow; max-width: 300px; min-height: 200px;">
<p>Este texto forma parte del párrafo 1</p>
<p>Este texto forma parte del párrafo 2</p>
<p>Este texto forma parte del párrafo 3</p>
<p>Este texto forma parte del párrafo 4</p>
</div>
</body>
</html>
El cuerpo del documento le resultará familiar porque es el mismo manejado en ejercicios anteriores. La diferencia está en el estilo asociado al contenedor que agrupa los cuatro párrafos.
Ahora, además de tener un color de fondo amarillo (propiedad background), se fija un ancho máximo de 300 píxeles y un alto mínimo de 200 píxeles (propiedades max-width y min-height).
A continuación, se muestra el resultado obtenido:
Como el alto de los cuatro párrafos es menor que el valor mínimo, prevalece este último.
Además, el ancho del contenedor se ajusta al valor máximo (no ocupa todo el ancho de la pantalla del navegador, que es su comportamiento por defecto).
Esta otra imagen muestra el resultado de añadir dos párrafos más al contenedor, el último de los cuales supera el ancho máximo.
Como ahora la altura de todos los párrafos es mayor que la mínima del contenedor, la propiedad min-height deja de tener efecto y el alto del navegador vuelve a ajustarse al de su contenido (comportamiento habitual).
Además, el último párrafo se divide en dos líneas para ajustarse al ancho máximo del contenedor.
Para finalizar esta sección, me gustaría recordarle que el diseño de una página web no es más que un conjunto de áreas creadas mediante contenedores que tienen un determinado tamaño y ocupan una posición concreta en la pantalla.
Si el contenido de dichos contenedores no se ajustara a su tamaño o no se adoptara la estrategia de desbordamiento adecuada, el resultado no coincidirá con el diseño previsto.
Téngalo siempre presente, porque con frecuencia es motivo de resultados aparentemente incomprensibles que no se parecen al esperado.
En el modelo de caja, el contenido del elemento HTML se encuentra rodeado por un margen interno, un borde y un margen externo.
En esta sección estudiará los márgenes, cuyo tamaño se determina con las propiedades margin y padding.
Ambas pueden tomar los siguientes valores:
Un número seguido de la unidad de medida utilizada. El valor por defecto es 0.
Un porcentaje del ancho del contenedor en el que se encuentra el elemento.
Si bien los valores anteriores son comunes a ambas propiedades, margin dispone de uno adicional:
auto. El navegador es el que calcula el margen.
Como verá más adelante, este valor distribuye de forma uniforme el espacio del contenedor en ambos lados del elemento HTML, lo que permite centrarlo horizontalmente.
Al igual que ocurre con otras muchas propiedades de estilo, las correspondientes a los márgenes también pueden tomar los valores initial e inherit.
Estas propiedades pueden tomar uno, dos, tres o cuatro valores. En el caso más sencillo, su sintaxis es:
margin: margen_externo; padding: margen_interno;
En este supuesto, el valor del espacio interior o exterior que rodea el contenido del elemento (por ejemplo, un texto o una imagen) es el mismo arriba, abajo, a derecha y a izquierda.
El extremo opuesto es cuando se requiere que el margen sea diferente en cada uno de los lados, lo que requeriría cuatro valores:
margin: superior derecho inferior izquierdo; padding: superior derecho inferior izquierdo;
A veces, el margen izquierdo y derecho suele ser el mismo, motivo por el que estas propiedades también pueden tener tres valores:
margin: superior izquierdo_y_derecho inferior; padding: superior izquierdo_y_derecho inferior;
Si además a la izquierda y a derecha, el margen de arriba y el de abajo también coincidieran, solo serían necesarios dos valores:
margin: superior_e_inferior izquierdo_y_derecho; padding: superior_e_inferior izquierdo_y_derecho;
Si no quiere especificar todos los márgenes sino el de algún lado en concreto, siempre tiene la posibilidad de hacerlo con las propiedades margin-top, margin-bottom, margin-left y margin-right para los márgenes externos, o bien padding-top, padding-bottom, padding-left y padding-right para los internos.
Con el fin de entender mejor estos conceptos, realizará una primera práctica en la que se muestran dos párrafos con márgenes internos diferentes.
Su código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="padding: 20px; background-color: yellow;">
Texto con margen interno de 20 píxeles
</p>
<p style="padding: 40px; background-color: yellow;">
Texto con margen interno de 40 píxeles
</p>
</body>
</html>
El primer párrafo tiene un margen interno de 20 píxeles, mientras que el segundo se eleva a 40 píxeles (propiedad padding).
Para hacerlos visibles, ambos se pintan de color amarillo (propiedad background-color).
La imagen mostrada a continuación pone en evidencia el diferente espesor de la capa amarilla que rodea el texto de los dos párrafos (excepto en el lado derecho, ya que, por defecto, un párrafo ocupa todo el ancho de la ventana del navegador).
Modifique el texto del primer párrafo y añada al estilo un margen externo de 30 píxeles (propiedad margin):
<p style="padding:20px; margin:30px; background-color:yellow">
Texto con margen interno de 20 píxeles
y externo de 30 píxeles
</p>
Ahora, además del espacio interno de 20 píxeles, alrededor del primer párrafo se crea otro externo de 30 píxeles de grosor.
Dicho espacio no adopta el color de fondo del elemento (es exterior a este), de modo que su existencia queda en evidencia por la separación con el resto de elementos de la página (en este caso, con el segundo párrafo) y de los bordes de la ventana del navegador.
Algunas etiquetas ya se muestran con márgenes por defecto. Ese es el motivo de la separación entre los fondos amarillos de ambos párrafos en la imagen anterior a esta.
Además, el navegador añade un margen adicional de separación en la parte superior, derecha e izquierda de la ventana, tal como también se puede comprobar en esa misma imagen.
Ahora, sustituya el código anterior por este otro en el que solo hay un párrafo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {
width: fit-content;
padding: 20px;
margin: 20px auto;
background-color: yellow;
}
</style>
</head>
<body>
<p>
Texto centrado con un margen interno de 20 píxeles.
</p>
</body>
</html>
En este caso se utiliza una regla de estilo porque el número de propiedades empieza a ser elevado.
De ellas, las relevantes desde el punto de vista de este ejercicio son las dos primeras, con las que se ajusta el ancho del párrafo al del texto (la propiedad width toma el valor fit-content) y se centra horizontalmente (se asigna el valor auto a la propiedad margin).
Como puede apreciar en la imagen anterior, el texto permanece siempre centrado horizontalmente, aunque se cambie el tamaño de la ventana del navegador.
Siguiendo el modelo de cajas, cualquier elemento de un documento HTML puede tener un borde.
Las propiedades que ofrece CSS para establecer sus principales características visuales son:
border-style. Determina el tipo de línea del borde (sólida, de puntos, discontinua, etc.).
border-color. Le da color.
border-width. Fija el ancho de la línea.
border-radius. Redondea sus esquinas.
Si quiere conocer el resto de propiedades relacionadas con los bordes, visite la página https://developer.mozilla.org/en-US/docs/Web/CSS/border.
Veamos en detalle los valores que pueden llegar a tomar cada una de ellas.
En cualquier caso, y al igual que sucede en otras muchas propiedades, además de los que se describan en las siguientes líneas, estas también podrán llegar a tomar los valores inherit (hereda el del contenedor donde estén incluidos) e initial (la propiedad vuelve a tomar el valor por defecto).
El tipo de línea viene determinado por el valor que tome la propiedad border-style, entre los que destacan:
none. No se dibuja ningún borde (es el valor por defecto).
solid. Línea continua.
double. Línea continua doble.
dotted. Línea de puntos.
dashed. Línea discontinua.
El siguiente ejemplo muestra el aspecto de cada tipo de borde, aplicado a una etiqueta <h1>:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1 {
color: blue;
text-align: center;
}
#solid {
border-style: solid;
}
#double {
border-style: double;
}
#dotted {
border-style: dotted;
}
#dashed {
border-style: dashed;
}
</style>
</head>
<body>
<h1 id="solid">Borde de tipo <solid></h1>
<h1 id="double">Borde de tipo <double></h1>
<h1 id="dotted">Borde de tipo <dotted></h1>
<h1 id="dashed">Borde de tipo <dashed></h1>
</body>
</html>
Como puede observar, en el cuerpo del mensaje hay cuatro encabezados <h1>, cada uno de los cuales tiene un atributo id, cuyo valor coincide con el del estilo que se le quiere dar (este valor podría haber sido cualquier otro).
En la cabecera del documento se establece una regla de estilo que centra y escribe de color azul todos los encabezados <h1> (su selector es el nombre de dicha etiqueta).
Las siguientes reglas asignan un valor diferente a la propiedad border-style.
El resultado se puede ver a continuación:
También es posible establecer bordes 3D con los valores groove, ridge, inset y outset.
Le animo a que experimente con ellos, si bien el efecto producido será diferente según el ancho o el color del borde.
Aunque en el ejemplo anterior se ha asignado un único valor a la propiedad border-style, al igual que sucedía con margin, esta propiedad también puede tener dos, tres o cuatro valores:
border-style: estilo; border-style: superior_e_inferior izquierdo_y_derecho; border-style: superior izquierdo_y_derecho inferior; border-style: superior derecho inferior izquierdo;
Si es observador, se habrá dado cuenta de que en la imagen anterior el color del borde coincidía con el del elemento (en este caso, un texto).
Si quiere que sea cualquier otro, deberá asignárselo empleando la propiedad border-color.
Dicho color podrá ser el mismo o diferente en cada lado del elemento según el número de valores proporcionados:
border-color: color; border-color: superior_e_inferior izquierdo_y_derecho; border-color: superior izquierdo_y_derecho inferior; border-color: superior derecho inferior izquierdo;
Otra de las características del borde que se puede modificar es el grosor de la línea, cuyo valor puede especificarse mediante la propiedad border-width como:
Una longitud expresada en cualquiera de las unidades de medida estudiadas.
Las palabras clave que representan anchos estándar: thick (grueso) medium (medio, valor por defecto), thin (delgado).
Al igual que las propiedades anteriores, border-width también puede tomar de uno a cuatro valores con el fin de que el borde tenga el mismo o diferentes anchos a cada lado:
border-width: ancho; border-width: superior_e_inferior izquierdo_y_derecho; border-width: superior izquierdo_y_derecho inferior; border-width: superior derecho inferior izquierdo;
Con el fin de practicar con estas nuevas propiedades, escriba el siguiente documento HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1 {
color: blue;
text-align: center;
border-style: solid;
}
#rojo {
border-color: red;
}
#ancho {
border-width: 5px;
}
#ancho2 {
border-width: 2px 10px;
}
</style>
</head>
<body>
<h1 id="rojo">Borde rojo</h1>
<h1 id="ancho">Borde de mismo ancho</h1>
<h1 id="ancho2">Borde con anchos diferentes</h1>
</body>
</html>
A diferencia del código anterior, el cuerpo de este documento HTML solo contiene tres encabezados <h1>, cada uno con su correspondiente identificador (atributo id).
En la cabecera, la regla de estilo que afecta a las etiquetas <h1> se utiliza para mostrar los encabezados en color azul (propiedad color), centrarlos horizontalmente (propiedad text-align) y dibujar un borde con un tipo de línea continua (propiedad border-style).
El resto de reglas tienen como selector uno de los identificadores de dichos encabezados.
La primera (selector “ancho1”) usa la propiedad border-color para pintar el borde de color rojo (en vez de azul, como el texto).
La segunda y la tercera regla establecen el ancho de la línea, el mismo para todos los lados en el primer caso (selector “ancho1”); y el mismo arriba y abajo, pero diferente del existente a izquierda y derecha en el segundo (selector “ancho2”).
El resultado obtenido se puede ver a continuación:
Cuando se especifican las características visuales de un borde, generalmente se indica su tipo, grosor y/o color.
Por ese motivo, en vez de las propiedades border-style, border-width y border-color se emplea únicamente border con el siguiente formato:
border: ancho estilo color
A este tipo de propiedades que combinan y sustituyen otras diferentes, se les conoce como atajos ( shorthand en inglés).
Así, el siguiente código muestra dos imágenes con un borde sólido de color rojo y 5 píxeles de grosor:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
border: 5px solid red;
/* Borde rojo de 5px */
padding: 20px;
/* Espacio interno de 20px */
margin: 20px;
/* Margen externo de 20px */
width: 200px;
/* Ancho fijo de 200px */
}
</style>
</head>
<body>
<img src="./Imagenes/fontana-di-trevi.JPG">
<img src="./Imagenes/coliseo.jpg">
</body>
</html>
El cuerpo del documento está formado por dos imágenes (etiquetas <img>) cuyos atributos src delatan que se trata de la Fontana de Trevi y el Coliseo.
En el bloque de declaraciones de la regla de estilo asociada a esta etiqueta se encuentra la propiedad border con la que se establece el tipo, el grosor y el color del borde que las rodea.
De forma adicional, se ha establecido que las imágenes tengan 200 píxeles el ancho (propiedad width) y unos márgenes internos y externos de 20 píxeles de grosor (propiedades padding y margin).
El resultado lo puede ver a continuación:
Dicho código nos sirve también para calcular la separación entre ambas imágenes.
Para ello, tiene que saber que el tamaño de un elemento HTML viene determinado por:
ANCHO DEL ELEMENTO =
ancho del contenido +
margen interno derecho + margen interno izquierdo +
borde izquierdo + borde derecho
ALTO DEL ELEMENTO =
alto del contenido +
margen interno superior + margen interno inferior +
borde superior + borde inferior
A continuación, se muestra gráficamente el tamaño real de cada imagen mediante una línea de puntos.
Según el gráfico anterior, se deduce que las fotos de ambas imágenes están separadas por una distancia de:
Si las imágenes se hubieran situado una debajo de la otra (en el siguiente capítulo sabrá cómo hacerlo) El margen exterior inferior de la primera no se habría sumado al superior de la segunda, sino que se tomaría el mayor de los 2:
En ese caso, la distancia de separación sería:
Este mismo tipo de cálculos será el que tenga que realizar para establecer la distancia de separación de cualquier otro tipo de elementos HTML, ya sean imágenes, textos, listas, hipervínculos o contenedores.
Como puede apreciar en la imagen anterior, el navegador añade por defecto un margen en el lado superior y otro en el izquierdo.
Si los bordes de todos los elementos de una página son iguales, podría pensar en añadir la propiedad border a una regla de estilo cuyo selector sea el nombre de la etiqueta <body>, en vez de repetirlo en las reglas asociadas a los elementos que contenga.
No lo haga, ya que, en ese caso, sería la propia página el que tendría el borde, no los elementos contenidos (el borde no es heredable).
Para demostrarlo, sustituya las reglas de estilo del código anterior por estas otras:
body {
border: 5px solid red;
padding: 20px;
margin: 20px;
}
img {
width: 200px;
}
Ahora, las propiedades que definen el borde y los márgenes internos y exteriores se llevan a la regla asociada a la etiqueta <body>.
En la regla de estilo de la imagen solo queda la declaración que determina su ancho.
Observa el resultado que se obtiene al refrescar la página.
Como se había avanzado, el borde rodea a la página, no a cada elemento por separado.
Además, los márgenes internos ahora hacen referencia a la separación del contenedor que representa el cuerpo del documento (etiqueta <body>) con las imágenes en la parte interior del borde (propiedad padding) y con los lados de la ventana del navegador en la parte exterior (propiedad margin).
La siguiente imagen lo muestra gráficamente.
A diferencia del ejercicio anterior, en esta ocasión el navegador no añade ningún espacio en la parte superior, derecha ni izquierda de la ventana, ya que estos se han fijado explícitamente en la propia etiqueta <body> con la propiedad margin.
Por ese motivo, si asignara un valor de 0 píxeles a dicha propiedad, comprobaría que las esquinas superior izquierda y derecha del borde coinciden con las de la ventana del navegador, tal como se puede confirmar a continuación:
Por supuesto, este mismo razonamiento es válido para los elementos que haya dentro de cualquier contenedor, ya sea semántico o genérico.
La última propiedad que se va a estudiar es border-radius, cuyo valor es el radio del arco de la circunferencia con el que se redondean las esquinas del borde.
Este podrá expresarse como una longitud (en cualquiera de las unidades estudiadas) o un porcentaje.
Además, y de forma similar al resto de propiedades, el arco también podrá ser el mismo o diferente en cada esquina según el número de valores que se le asigne:
border-radius: radio; border-radius: superior_e_inferior izquierdo_y_derecho; border-radius: superior izquierdo_y_derecho inferior; border-radius: superior derecho inferior izquierdo;
El siguiente código muestra un encabezado con un borde que tiene las esquinas redondeadas:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1 {
color: white;
/* Texto en color blanco */
background-color: blue;
/* Fondo azul */
width: fit-content;
/* Ancho ajustado al contenido */
padding: 20px;
/* Espacio interno de 20px */
border-radius: 20px;
/* Bordes redondeados (20px de radio) */
}
</style>
</head>
<body>
<h1>Cfrculo</h1> <!-- Nota: "Cfrculo" parece un error tipográfico (¿"Círculo"?) -->
</body>
</html>
Como puede comprobar, en el cuerpo del documento solo hay un encabezado <h1> cuyo aspecto se define en la cabecera del documento con una regla de estilo.
En ella, se establece un color de fondo negro que destaque el texto escrito en color blanco (propiedades background-color y color).
Como los encabezados ocupan por defecto todo el ancho de la pantalla, se asigna el valor fit-content a la propiedad width para que se ajuste al texto.
Además, se especifica un margen interior de 10 píxeles (propiedad padding) que adopta el color del fondo.
La última propiedad (border-radius) redondea las esquinas con un radio de 20 píxeles.
A continuación se puede ver el resultado obtenido:
Cuando se utilizan bordes redondeados se pueden crear efectos muy originales.
Por ejemplo, sustituyen la regla de estilo del código anterior, el valor de la propiedad. Border-radius por este otro.
Border-radius: 50%;
Ahora, el resultado es completamente diferente.
Finalmente, realiza un último cambio en el valor de esta misma propiedad.
Boder-radius: 50px 0;
Como se puede apreciar en esa otra imagen, el aspecto del encabezado cambia radicalmente.
Los bordes rectos también pueden jugar un papel importante, por ejemplo, a la hora de destacar un capítulo del resto de secciones del libro.
Tal como se puede ver a continuación.
El código utilizado para obtener este resultado es el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1 {
border-left: 10px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>Captful</h1>
<h2>Section del capitulo</h2>
</body>
</html>
En el cuerpo del documento hay un encabezado <h1> que representa el capítulo y otro <h2> la sección.
El aspecto con el que se quiere mostrar el texto del capítulo se define en una regla de estilo donde la propiedad border-left especifica un borde sólido en el lado izquierdo de color negro y 10 píxeles de grosor, en tanto que la propiedad padding añade un margen interno de 10 píxeles para que la línea con la que se dibuje sea más alta y quede más separada del texto (el tamaño del encabezado crece internamente a lo alto y a lo ancho).
La siguiente imagen representa gráficamente este efecto:
Le animo a que experimente con estas propiedades y descubra por sí mismo las innumerables formas en las que se puede llegar a mostrar un mismo elemento.
Es el mejor modo de crear un estilo particular que dote a sus páginas de carácter propio.
Hasta ahora, el tamaño de los elementos se establecía con las propiedades width y height.
Sin embargo, tal como se apuntó al describir el modelo de caja, el valor asignado a dichas propiedades hace referencia solo al contenido, ya que no se tiene en cuenta el espacio de los márgenes internos o el grosor de los bordes.
Esto es un grave inconveniente cuando se quieren alinear elementos o a la hora de realizar un diseño, en el que es necesario trabajar con su tamaño real (no solo el de su contenido).
Para resolver este problema, HTML proporciona la propiedad box-sizing, que indica al navegador cómo calcular el tamaño del elemento.
Puede tomar los siguientes valores:
content-box. Solo se tiene en cuenta el ancho y el alto del contenido del elemento (son los especificados mediante las propiedades width y height). Es el valor por defecto.
border-box. El tamaño del elemento incluye los márgenes internos y los bordes.
Al igual que otras muchas propiedades, esta también puede tomar el valor inherit o initial.
Para entender la importancia de esta propiedad se utilizará el siguiente código de ejemplo, en el que se muestran dos párrafos aparentemente iguales:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- Primer párrafo -->
<p style="width:500px; height:100px; padding:10px; border:solid;">
Párrafo con un tamaño de 500x100 píxeles.
</p>
<!-- Segundo párrafo -->
<p style="width:500px; height:100px; padding:40px; border:solid;">
Párrafo con un tamaño de 500x100 píxeles.
</p>
</body>
</html>
Aunque parezca que ambos párrafos ocupan el mismo espacio (500 × 100 píxeles, especificado mediante las propiedades width y height), no es así porque el primero tiene un margen interno de 10 píxeles y el segundo de 40 píxeles (propiedad padding).
Para demostrarlo, se ha dibujado un borde (propiedad border) que delimita el área de cada párrafo, tal como puede ver a continuación:
Si quiere que el área que ocupen sea realmente la misma, deberá añadir la siguiente declaración al estilo de ambos párrafos:
box-sizing: border-box;
Ahora, el valor asignado a las propiedades width y height no solo incluye el tamaño del contenido, sino también el ancho del margen interno y del borde.
Como resultado, esta vez los dos párrafos tendrán el mismo tamaño (500 × 100 píxeles).
Para que la propiedad box-sizing surta efecto, asegúrese de que el valor asignado a la propiedad width sea mayor que la suma del ancho del contenido, los márgenes internos a derecha e izquierda y el grosor del borde en ambos lados (lo mismo sucedería con la propiedad height pero en sentido vertical).
Téngalo en cuenta, porque es un error que suele dar muchos quebraderos de cabeza.
Aunque las páginas web tienden a ser cada vez más visuales, todas ellas necesitan hacer uso de textos en los títulos de las secciones, en su contenido, en las opciones de la barra de navegación, etc. Por defecto, el navegador muestra el texto de cada etiqueta de forma predefinida, lo que permite distinguir la función que realizan (organizar el contenido, llevar a otras partes del documento o del sitio web, dar información complementaria, etc.).
Sin embargo, dicho estilo siempre es el mismo y, por lo general, resulta demasiado austero.
Para salvar esta limitación, CSS proporciona una serie de propiedades que se van a clasificar según el aspecto visual al que afectan:
Color. Propiedades color y background-color.
Fuente. Propiedad font-family.
Tamaño. Propiedad font-size.
Alineación. Propiedad text-align.
Espaciado. Propiedades text-indent, letter-spacing, word-spacing y line-height.
Formato. Propiedades text-decoration, vertical-align, font-style y font-weight.
A los valores que se describen en las siguientes secciones para cada una de esas propiedades, deberá añadir los de inherit (hereda el del contenedor donde esté incluido el texto) e initial (la propiedad vuelve a tomar el valor por defecto).
Los valores de todas estas propiedades se heredan, por lo que, si se asociaran a un contenedor, se aplicarían a los textos que contuviera.
Las propiedades asociadas al color (color y background-color) ya las conoce porque se han empleado en numerosos ejercicios, motivo por el que no se darán explicaciones adicionales.
El resto se expondrán en detalle en las siguientes secciones.
Una fuente es un tipo de letra, es decir, un conjunto de caracteres alfanuméricos que se distingue del resto por un diseño característico que les da un aspecto coherente.
Dicho diseño permite clasificar cada fuente o tipo de letra por familias, que serán la que deba asignar a la propiedad font-family.
En HTML existen las siguientes grandes familias:
Serif . Se caracteriza por las pequeñas líneas o trazos que se extienden desde los extremos de los caracteres, dando un aire refinado a la escritura.
Sans-serif . Las fuentes de esta familia, a diferencia de la anterior, eliminan los trazos superfluos, con lo que se consigue un aspecto más simple y actual.
Por ese motivo resultan más fáciles de leer que las Serif .
Monospace . El rasgo que la hace singular es que el ancho de todas las letras es el mismo.
Cursive . Imita la escritura humana.
Fantasy . Su nombre lo dice todo. Aquí cabe cualquier tipo de fuente de carácter decorativo.
Las fuentes que suelen admitir la mayoría de los navegadores son las pertenecientes a las dos primeras familias.
Si quiere asegurarse de que una página se vea en cualquiera de ellos, se recomienda usar Arial, Verdana, Helvetica y Tahoma de la familia Serif ;
o Times New Roman y Garamond de la familia Sans-serif .
También podría emplear la fuente Courier New de la familia Monospace .
En https://www.w3.org/Style/Examples/007/fonts.en.html puede ver las fuentes pertenecientes a cada familia y una muestra de su aspecto.
Sin embargo, no se puede asegurar con certeza que dichas fuentes estén instaladas en todos los navegadores.
Por ese motivo, es conveniente especificar siempre fuentes alternativas. De esa forma, si la primera no funcionara el navegador lo intentaría con la siguiente, y así sucesivamente.
Finalice siempre la lista con el nombre de la familia (además del obligado punto y coma), tal como puede ver en el siguiente código de ejemplo:
font-family: Arial, Verdana, Helvetica, Serif;
Si desea emplear sus propias fuentes o, simplemente, aquellas de las que no disponga por defecto un navegador, deberá usar la regla @font-face (no se va a tratar en esta obra).
El siguiente código de ejemplo muestra el texto de etiquetas <h1> con una fuente de cada familia:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 style="font-family: Arial, Verdana, serif;">
Texto escrito en Arial
</h1>
<h1 style="font-family: 'Times New Roman', Garamond, sans-serif;">
Texto escrito en Times New Roman
</h1>
<h1 style="font-family: 'Courier New', monospace;">
Texto escrito en Courier New
</h1>
<h1 style="font-family: cursive;">
Texto escrito en cursive
</h1>
<h1 style="font-family: fantasy;">
Texto escrito en fantasy
</h1>
</body>
</html>
En el primer encabezado, el texto se escribe en Arial (de la familia Serif). Si el navegador no tuviera dicha fuente, lo intentaría con Verdana.
Observe que, tanto las fuentes como la familia se separan por comas.
La fuente del texto del segundo encabezado es Times New Roman (de la familia Sans-serif).
Como el nombre de esta fuente está formada de varias palabras separadas por espacios, se deben utilizar las comillas simples (va dentro de las dobles, correspondientes al valor de la propiedad style).
El tercer y cuarto encabezado utilizan la fuente que tenga definida por defecto el navegador para las familias cursive y fantasy .
A continuación, puede ver el resultado obtenido en Chrome.
En un texto, además del color y la fuente, también se puede especificar su tamaño con la propiedad font-size.
Admite los siguientes valores:
Un número seguido de cualquiera de las unidades de medida que conoce.
Un porcentaje del tamaño de la fuente utilizada.
Una de las unidades de medida específicas para textos es em, cuyo tamaño es el del ancho de la letra ‘M’ de la fuente actual.
Pero, si no quisiera depender de dicha fuente (puede variar según el estilo definido en cada contenedor), se recomienda la unidad rem, cuya referencia es el tamaño de letra del elemento raíz (etiqueta <html>).
En la mayoría de los navegadores suele ser de 16 píxeles.
Otra unidad de medida menos empleada es ex, que toma como referencia el alto de la letra ‘x’ de la fuente actual.
Si el tamaño de la fuente fuera un porcentaje, se usaría como referencia el tamaño de la fuente actual (por defecto, la del navegador).
Por ejemplo, un valor del 200% aumentaría al doble el tamaño de la fuente y un 50% lo reduciría a la mitad.
En el siguiente documento HTML se utilizan tres unidades de medida diferentes:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Texto de párrafo (tamaño por defecto)</p>
<p style="font-size: 1em;">
Texto de 1em (similar al anterior)
</p>
<p style="font-size: 100%;">
Texto de 100% (equivale a 1em)
</p>
<p style="font-size: 16px;">
Texto de
16px (equivale a 1em o 100%)
</p>
<p style="font-size: 2em;">
Texto de 2em (doble que los textos anteriores)
</p>
<p style="font-size: 300%;">
Texto de 300% (equivale a 3em)
</p>
<p style="font-size: 64px;">
Texto de 64 píxeles (equivale a 4em o 400%)
</p>
</body>
</html>
Como resultado, las cuatro primeras líneas aparecen con el mismo tamaño, el de la fuente por defecto del navegador (16 píxeles).
Las tres últimas líneas lo hacen con un tamaño 2, 3 y 4 veces superior, tal como puede ver a continuación:
Una forma alternativa de especificar el tamaño de una fuente es mediante una serie de medidas predefinidas, representadas por los valores:
medium. Tamaño con el que se muestra un texto por defecto.
small, x-small y xx-small. Tamaños preestablecidos más pequeños que el anterior.
large, x-large, xx-large. Tamaños preestablecidos mayores.
Los valores anteriores son absolutos (siempre son el mismo). En cambio, los siguientes son relativos, ya que tienen en cuenta el tamaño de la fuente actual (en muchas ocasiones, heredada del contenedor en el que se encuentran):
smaller. Reduce el tamaño de la fuente actual en una proporción preestablecida.
larger . Aumenta el tamaño de la fuente actual en una proporción preestablecida.
En la imagen mostrada a continuación puede ver de forma comparativa el aspecto de un texto con algunos de estos valores.
Aunque CSS proporciona diversas propiedades relacionadas con la alineación de textos, la más utilizada es text-align, cuyo valor determina la forma de hacerlo:
right. A la derecha.
left. A la izquierda.
center. Al centro.
justify. El espacio de una línea se distribuye entre las palabras para que sus bordes se alineen con ambos márgenes (igual que los párrafos de este libro).
Con objeto de familiarizarse con el efecto producido por cada uno de los valores de esta propiedad, el siguiente código de ejemplo muestra tres etiquetas <h1>, la primera alineada a la derecha, la segunda centrada y la tercera alineada a la izquierda:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 style="text-align: right;">Texto alineado a la derecha</h1>
<h1 style="text-align: center;">Texto centrado</h1>
<h1 style="text-align: left;">Texto alineado a la izquierda</h1>
</body>
</html>
A continuación, se muestra el aspecto de este documento HTML.
Aunque en esta ocasión el texto se alinea respecto de la página, con carácter general se hace tomando como referencia el ancho del contenedor en el que se encuentre.
Para demostrarlo, incluya los encabezados <h1> del código anterior dentro de un contenedor <div>, cuyo ancho sea la mitad de la ventana del navegador:
<div style="width: 50%;">
<h1 style="text-align: right;">Texto alineado a la derecha</h1>
<h1 style="text-align: center;">Texto centrado</h1>
<h1 style="text-align: left;">Texto alineado a la izquierda</h1>
</div>
Al asignar el valor 50% a la propiedad width del contenedor <div>, este ocupa la mitad del ancho de la ventana del navegador.
Como los encabezados <h1> están dentro de dicho contenedor, estos se alinean a la izquierda, al centro y a la derecha de este, no al de la pantalla.
El espaciado establece la separación entre las líneas, las letras o las palabras de un texto.
Para llevarlo a cabo, CSS dispone de las siguientes propiedades:
text-indent. Determina la sangría de la primera línea de un párrafo.
letter-spacing y word-spacing. Fija el espacio entre letras o entre palabras, respectivamente.
line-height. Especifica el alto de la línea y, por lo tanto, la separación entre líneas.
El uso de la sangría en textos no está reglado, por lo que algunos autores prescinden de ella, mientras que otros la emplean en todos los párrafos o a partir del segundo.
La forma de añadir una sangría a un párrafo es mediante la propiedad text-indent, cuyo valor podrá expresarse mediante cualquiera de las unidades de medida admitidas por HTML o como un porcentaje del ancho del contenedor donde se encuentra.
El siguiente código de ejemplo muestra un párrafo con una sangría de 30 píxeles:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="text-indent: 30px;">
Este texto tiene una sangría de 30 píxeles,
lo que significa que la primera línea está desplazada
a la derecha de dicho espacio, algo que no ocurre con
las siguientes.
</p>
</body>
</html>
El resultado se puede ver a continuación, donde, efectivamente, la primera línea se indenta 30 píxeles.
Tal como se indicó al principio de esta sección, las propiedades letter-spacing y word-spacing fijan el espacio entre letras y palabras, respectivamente.
En ambos casos, podrá especificar su valor con las unidades de medida admitidas por HTML, pero no como un porcentaje.
Si después de modificarlo quisiera recuperar el espaciado utilizado por defecto en el navegador, deberá asignarle el valor normal.
Con objeto de apreciar los efectos de estas propiedades, sustituya el código del cuerpo del documento HTML anterior, por este otro:
<p>
Esta línea utiliza la separación de caracteres y palabras por defecto.
</p>
<p style="letter-spacing: 10px;">
En esta línea los caracteres se separan 10 píxeles.
</p>
<p style="word-spacing: 10px;">
Esta última línea separa las palabras 10 píxeles.
</p>
Se trata de tres párrafos, en el primero de los cuales el navegador decide el espaciado utilizado.
En cambio, en el segundo y el tercero se fija una separación de 10 píxeles entre caracteres y entre palabras, respectivamente.
Observe el resultado producido en cada caso.
líneas. Se trata de line-height y sus valores son:
normal. Valor por defecto.
Un número seguido de cualquiera de las unidades de medida que ya conoce.
Un porcentaje del tamaño de la fuente actual.
Un número que no va seguido de una unidad de medida.
En ese caso, la altura se calcula multiplicando dicho número por el tamaño de la fuente actual.
Para probar esta nueva propiedad, sustituya una vez más el código del cuerpo del documento HTML anterior por este otro:
<p>
Este párrafo, que ocupa dos líneas al reducir al mínimo
el ancho de la ventana del navegador, está escrito
con una separación entre líneas normal.
</p>
<p style="line-height:2">
Este párrafo, que ocupa dos líneas al reducir al mínimo
el ancho de la ventana del navegador, está escrito
a doble espacio.
</p>
Ahora solo se muestran dos párrafos. El primero se escribe con un alto de línea por defecto, mientras que el segundo lo hace a doble espacio (el valor de line-height es 2), tal como se puede apreciar a continuación.
Las propiedades que dan formato al texto son aquellas que permiten que este se escriba en negrita, cursiva, subrayado, tachado, como un subíndice o un superíndice, entre otros.
Si recuerda, esto mismo también se podía hacer con las etiquetas <b>, <i>, <u>, <del>, <sub> y <sup>.
Aunque el resultado es el mismo, el uso de estas propiedades supone obtener las ventajas asociadas a las reglas de estilo.
De las etiquetas de formato de texto estudiadas en el capítulo anterior, las únicas para las que no se ha indicado ninguna propiedad equivalente son <mark> y <small>.
El efecto producido por la primera se podría conseguir con un color de fondo amarillo y el de la segunda con un tamaño de fuente más pequeña.
Aunque HTML ofrece muchas propiedades relacionadas con el formato del texto, en esta sección solo se estudiarán las siguientes:
font-style. Permite escribir un texto en cursiva.
font-weight. Determina el grosor de los caracteres.
vertical-align. En general, establece la alineación vertical de un elemento; en este contexto particular, la de un texto.
text-decoration. Dibuja una línea por encima, por debajo (subrayado) o en medio (tachado) de un texto.
Veamos los valores que se pueden asignar a cada una de estas propiedades (además de initial e inherit).
La propiedad font-style toma los siguientes valores:
normal. Forma en la que se escribe el texto por defecto.
italic y oblique. Muestra un estilo de fuente en cursiva.
Por su parte, los valores de la propiedad font-weight son:
normal. El texto se escribe de la forma habitual (valor por defecto).
bold y bolder. Los caracteres aparecen en negrita o más gruesos.
lighter. Los caracteres tienen un grosor inferior al normal.
Un número entre 100 y 900 a intervalos de 100. Cuanto mayor es el número, más gruesos serán los caracteres.
Para que tenga una referencia, el valor 400 equivale a normal, y 700 a bold.
La propiedad vertical-align puede tomar numerosos valores, entre los que destacan aquellos que permiten el uso de superíndices o subíndices:
sub. Escribe un texto como subíndice.
super. Lo hace como un superíndice.
Todos los valores de esta propiedad los encontrará en https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
La última de las propiedades (text-decoration) en realidad es un atajo de:
text-decoration-line. El valor de esta propiedad determina si el texto está subrayado (underline) o tachado (line-through).
Aunque es menos usado, el valor overline sitúa la línea encima del texto.
Su valor por defecto es none, que no dibuja ningún tipo de línea.
text-decoration-color. Establece el color de la línea (por defecto, el negro).
text-decoration-style. Sus valores determinan el estilo de la línea. Por defecto, dibuja una línea continua (solid), aunque también podría ser doble (double), discontinua (dashed), de puntos (dotted) u ondulada (wavy).
text-decoration-thickness. Determina el grosor de la línea. Su valor se especifica mediante cualquiera de las unidades de medida que conoce o como un porcentaje. Generalmente se deja el valor por defecto (auto).
Todas estas propiedades se pueden sustituir por text-decoration, por lo que su valor es una combinación de los que tomarían cada uno de ellos:
text-decoration: línea color estilo y grosor
De todos ellos, el único obligatorio es el primero (línea).
A fin de practicar con estas nuevas propiedades, desarrollará un documento HTML que muestre exactamente con el mismo formato, el texto del ejercicio realizado en la sección donde se describieron las etiquetas <i>, <b>, <del>, <sub>, <sup>, <mark> y <small>.
¿Se anima a hacerlo por su cuenta? Si no lo consigue, esta es una posible solución:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#cursiva {
font-style: italic;
}
#negrita {
font-weight: bold;
}
#subrayado {
text-decoration: underline;
}
#tachado {
text-decoration: line-through;
}
#superindice {
vertical-align: super;
font-size: small;
}
#subindice {
vertical-align: sub;
font-size: small;
}
#marcado {
background-color: yellow;
}
#pequeno {
font-size: small;
line-height: 158%;
letter-spacing: 0.012em;
}
</style>
</head>
<body>
<p>
En este primer párrafo se encontrará un
<span id="cursiva">texto en cursiva</span>
</p>
<p>
Este otro tiene un
<span id="negrita">texto en negrita</span>, una palabra
<span id="subrayado">subrayada</span> y otra
<span id="tachado">tachada</span>.
</p>
<p>
El superíndice es útil para expresar potencias, como:
2<span id="superindice">2</span> = 4.
</p>
<p id="pequeno">
Accept/2022 Tomas Domínguez Mínguez
</p>
</body>
</html>
Como puede observar, el cuerpo del documento está formado por los mismos párrafos que el utilizado de referencia.
La diferencia es que, para dar el formato a cada parte del texto de cada párrafo, esta vez se usa una etiqueta <span> para cada parte.
Por ejemplo:
<p>Esta línea incluye una <small>nota al margen</small>.</p>
Por su sencillez, las reglas responsables de escribir el texto en cursiva, negrita, subrayado, tachado y marcado no requieren de ninguna explicación.
Las que se utilizan para subíndices y superíndices, además de la propiedad vertical-align, emplean font-size para reducir el tamaño del texto, ya que así es como lo hacen por defecto las etiquetas <sup> y <sub>.
Algo más elaborada es la regla responsable de crear las notas al margen ya que, para que el texto coincida con el mostrado por la etiqueta <small>, no es suficiente con reducir el tamaño de la fuente con font-size, sino que también hay que aumentar el alto de la línea un 150% (propiedad line-height) y el espaciado entre caracteres (letter-spacing).
Una vez cargado este archivo en Chrome, la imagen mostrada a continuación le resultará familiar.
Por defecto, el texto de un hipervínculo aparece en color azul cuando todavía no se ha pulsado, morado si se ha hecho en alguna ocasión o rojo en el momento de hacerlo.
En esta sección no solo aprenderá a modificar dicho color, sino todo aquello que permita cambiar su apariencia para adaptarlo al diseño de la página, como el borde o los márgenes que lo rodean.
Además, dicho aspecto podrá ser diferente dependiendo del estado en el que se encuentre, representado mediante una pseudoclase.
Su importancia radica en la posibilidad de formar parte del selector de una regla.
En ese caso, esta solo aplicaría a los elementos que se encontrasen en dicho estado.
Su sintaxis es la siguiente:
selector : pseudoclase
Existe una gran variedad de pseudoclases, pero las más empleadas con los hipervínculos son:
link. El hipervínculo no ha sido visitado.
visited. Ha sido visitado alguna vez.
hover. El ratón pasa por encima.
active. Se pulsa con el ratón.
Si quiere conocer todas pseudoclases existentes visite https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes.
Las pseudoclases se pueden utilizar con cualquier elemento HTML, no solo hipervínculos.
Con el fin de probar la flexibilidad que proporciona HTML a la hora de mostrar un hipervínculo en función de su estado, desarrollará un documento HTML que contenga uno cuyo aspecto sea el de un botón, tal como se aprecia a continuación:
La particularidad de este enlace es que él poner el ratón sobre él. Su color cambia a verde y al pulsarlo pasa a ser rojo, el código es el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
text-align: center;
padding: 50px;
}
a {
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 20px;
background-color: blue;
display: inline-block; /* Para que el padding funcione correctamente */
}
a:hover {
background-color: green;
}
a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.google.com/">
Acceso a Google
</a>
</body>
</html>
Como puede observar, dentro del cuerpo del documento HTML solo hay un hipervínculo (etiqueta <a>), cuyo enlace muestra el texto “Acceso a Google”.
En la cabecera se especifican los estilos, tanto del cuerpo como del hipervínculo.
La regla de estilo del cuerpo se utiliza para centrar el hipervínculo en la ventana del navegador (la propiedad text-align toma el valor center).
Además, se crea un margen interno de separación de 50 píxeles (propiedad padding) para separarlo de los bordes de la pantalla.
Podría pensar que sería mejor utilizar la propiedad margin en la regla de estilo del hipervínculo, en vez de padding en la del cuerpo del documento.
Sin embargo, como descubrirá en el próximo capítulo, esta propiedad no se tiene en cuenta en los elementos que se muestran en línea (como este).
En dicho capítulo aprenderá a subsanar este inconveniente de la forma más adecuada.
El hipervínculo tiene una serie de propiedades cuyo valor es el mismo independientemente del estado en el que se encuentre, motivo por el que la regla vinculada a esta etiqueta establece que:
El color del texto del enlace sea blanco (propiedad color).
El grosor del margen interno, cuyo tamaño se rellenará con el color de fondo sea de 10 píxeles arriba y abajo, y de 20 píxeles a derecha e izquierda (valores de la propiedad padding).
Por defecto, el texto de los hipervínculos aparece subrayado. Para evitarlo, se asigna el valor none a la propiedad text-decoration.
Con el fin de que el enlace sea estéticamente más agradable, se redondean las esquinas 20 píxeles con la propiedad border-radius.
La parte interesante es aquella en la que se definen los estilos del hipervínculo en cada estado, para lo que se utilizan pseudoclases en los selectores de las reglas correspondientes.
En ese sentido, tanto si se hubiera pulsado en alguna ocasión como si no, se quiere que su color de fondo sea azul, motivo por el que la regla de estilo asociado a dichos estados (:link y :visited) asigna el valor blue a la propiedad background-color.
Observe que, para no repetir la regla, en su selector se han combinado las pseudoclases que representan ambos estados.
Las dos últimas reglas hacen algo similar, ya que asignan un color de fondo verde al hipervínculo cuando el ratón se sitúa encima o rojo cuando se pulsa (estados :hover y :active, respectivamente).
Solo queda abrir esta página en Chrome y comprobar que el aspecto del hipervínculo es el esperado en todos los estados.
Como sabe, una lista es una enumeración de elementos.
Por defecto, aparecen de forma descendente precedidos por un pequeño círculo (listas desordenadas) o un número (listas ordenadas).
En esta sección aprenderá a sustituir estos marcadores por algunos de los muchos que ofrece CSS de forma predeterminada o, incluso, por imágenes personalizadas.
Naturalmente, además de las propiedades específicas de las listas, podrá utilizar otras de tipo genérico, como las que permiten asignar colores de tinta o de fondo, tanto a la lista como a sus elementos, crear bordes, márgenes, etc.
En esta sección estudiará las siguientes propiedades, relacionadas con rasgos visuales específicos de las listas:
list-style-type.
Determina el tipo de marcador que precede cada elemento de la lista.
list-style-image. Sustituye el marcador por un icono.
list-style-position.
Establece la posición del marcador o la imagen respecto del elemento.
Como acaba de comentar, los elementos de una lista van precedidos de un marcador que, por defecto, es un pequeño círculo negro en las desordenadas o un número en las ordenadas.
Con la propiedad list-style-type podrá sustituirlo por cualquier otro diferente.
Algunos de los marcadores proporcionados por CSS para las listas desordenadas son:
disc. Círculo relleno. Es el valor por defecto.
circle.
Círculo sin rellenar.
square. Cuadrado.
Los marcadores de las listas ordenadas se pueden agrupar en dos clases:
Numéricos.
Los más utilizados son los que ofrecen una numeración decimal (valor por defecto) o la romana (lower- roman y upper-roman, según se utilicen caracteres en minúscula o mayúscula).
Alfabéticos. En vez de números, los marcadores son letras. El alfabeto más utilizado es el latino, que corresponde a los valores lower-latin, upper-latin (mayúsculas o minúsculas).
Sin embargo, también se pueden usar otros alfabetos, como el griego.
Para conocer todos los valores posibles de esta propiedad, visite la página https://developer.mozilla.org/es/docs/Web/CSS/list-style-type.
El siguiente código muestra una lista desordenada en la que el marcador es un círculo vacío:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<ul style="list-style-type: circle;">
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
<li>Cuarto elemento de la lista</li>
</ul>
</body>
</html>
Este sería el aspecto exhibido para dicha lista.
Sustituya la etiqueta <ul> por esta otra:
<ol style="list-style-type: upper-roman;">
Puede que los marcadores que proporciona HTML por defecto le resulten aburridos y quiera tener los suyos propios.
En ese caso, la propiedad list-style-image le permite utilizar un icono personalizado.
Su valor debe seguir el formato:
list-style-image: url('URL o ruta de acceso a la imagen')
Si en vez de un URL o una ruta, el valor de esta propiedad fuera none, no se mostraría ningún marcador.
Es el valor por defecto.
Modifique de nuevo la etiqueta con la que se creaba la lista desordenada en el código anterior para incluir un icono en forma de aspa almacenado en el archivo “marcador-lista.ico” (localizado en la carpeta “Imágenes”):
<ul style="list-style-image: url('../Imagenes/marcador-lista.ico');">
Este cambio provoca el resultado mostrado a continuación:
Al igual que el favicon , dicho icono ha sido desarrollado con el editor online https://www.favicon.cc/.
En cualquier caso, podrá utilizar cualquier imagen de pequeño tamaño.
Por último, la propiedad list-style-position establece la posición de los marcadores respecto de los elementos. Sus principales valores son:
outside.
Los marcadores quedan fuera del elemento de la lista. Es el valor por defecto.
inside.
Los marcadores forman parte del elemento de la lista.
Como es habitual, tanto estas propiedades como las anteriores también pueden tomar el valor inherit (heredan el valor asignado en el contenedor donde esté incluida la etiqueta) o initial (la propiedad vuelve a tomar el valor por defecto).
Este nuevo código de ejemplo demuestra el efecto producido por dichos valores en una lista:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
ul {
list-style-type: circle;
list-style-position: outside;
background-color: lightgreen;
width: fit-content;
padding: 10px;
}
li {
background-color: lightyellow;
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<ul>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
<li>Cuarto elemento de la lista</li>
</ul>
</body>
</html>
Como puede observar, en el cuerpo del documento solo hay una lista desordenada, cuyos elementos le resultarán familiares.
En este caso, ninguna de las etiquetas hace uso del atributo style, ya que su aspecto se determina con las dos reglas de estilo creadas en la cabecera del documento, una para la propia lista (selector “ul”) y otra para sus elementos (selector “li”).
Empecemos analizando la correspondiente a la lista.
En la primera declaración de esta regla de estilo se asigna el valor circle a la propiedad list-style-type para que el marcador de sus elementos sea un círculo sin rellenar.
Este quedará fuera del espacio reservado a dichos elementos, ya que la propiedad list-style-position toma el valor outside.
El color de fondo de la lista será verde claro (la propiedad background-color toma el valor lightgreen).
Como la propiedad width toma el valor fit-content, su ancho se ajustará al de su contenido, es decir, al del elemento más largo.
Por último, la propiedad padding crea un margen interno de 10 píxeles.
La combinación de las tres propiedades anteriores servirá para enmarcar el espacio ocupado por la lista (recuerde que este adquiere el color de fondo).
La regla de estilo de los elementos de la lista establece que su color de fondo sea amarillo claro (la propiedad background-color toma el valor lightyellow).
Asimismo, con las propiedades padding y margin se crea un margen interno de 5 píxeles y otro externo de 10 píxeles que enmarca los elementos y los separa entre sí.
Además, como el color de fondo de la lista es diferente al de los elementos, se delimita claramente el espacio ocupado por esta y el de cada uno de ellos.
El resultado de cargar este código en Chrome se muestra a continuación:
Como puede apreciar, los marcadores no forman parte de los elementos. Cambie el valor de la propiedad list-style-position por inside.
Tal como puede ver en esta otra imagen, ahora los marcadores quedan incorporados a dichos elementos:
Si va a necesitar utilizar varias de las propiedades que acaba de estudiar, se recomienda usar list-style, que agrupa a las tres.
Esta propiedad toma tres valores, separados por espacios, en el siguiente orden:
list-style: tipo posición imagen
En consecuencia, las dos declaraciones que formaban parte de la regla de estilo vinculada a la lista en el código anterior:
list-style-type: circle;
list-style-position: outside;
Se podrían sustituir por esta otra:
list-style: circle outside;
Las imágenes son una parte fundamental de cualquier página web.
Sin embargo, la etiqueta <img> solo permite modificar su tamaño mediante los atributos width y height, algo claramente insuficiente a la hora de mostrarlas de una forma creativa.
Con el fin de ampliar las posibilidades de presentación de este importante recurso informativo, CSS proporciona una serie de propiedades con las que, además de modificar el ancho y el alto de la imagen, podrá especificar su opacidad, la forma de los bordes o, incluso, convertirla en un fondo de pantalla.
Veamos en detalle cada una de ellas, ya que serán las que hagan posible darle nuestro toque personal.
Como sabe, los atributos width y height de la etiqueta <img> permiten escalar el tamaño de una imagen.
Eso mismo también lo podrá hacer con las propiedades CSS del mismo nombre.
Aunque el resultado producido sea idéntico, obtendrá las ventajas que supone el uso de reglas de estilo.
En este primer código de ejemplo se utilizan ambas propiedades para que la imagen de la Fontana de Trevi (almacenada en el archivo “fontana-di-trevi.jpg”, dentro de la carpeta “Imágenes”) ocupe el 50% del ancho de la pantalla del navegador:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="./Imagenes/fontana-di-trev1.jpg"
style="width:50%; height: auto;">
</body>
</html>
Observe que la propiedad height toma el valor auto.
Esto hace que su altura mantenga las proporciones de la imagen y no se deforme.
Aunque en este caso el uso la propiedad height es opcional, se recomienda utilizarla.
En la imagen mostrada a continuación se puede comprobar que la foto ocupa exactamente la mitad del ancho de la pantalla, independientemente del tamaño de la ventana del navegador.
La transparencia determina el grado de opacidad de un elemento.
Se establece con la propiedad opacity, que toma un valor decimal comprendido entre 0 (la imagen no se ve porque es completamente transparente) y 1 (su aspecto es el original).
Aunque la imagen no se vea, esta seguirá ocupando su espacio (aparecerá vacío).
Recuerde que, en el caso de los colores, la transparencia se consigue con el parámetro alpha.
Si no quiere que una imagen siga ocupando espacio en la página cuando desaparezca, asigne el valor none a la propiedad display (la estudiará en el siguiente capítulo).
A continuación, se puede ver el Coliseo con un grado de transparencia de 1, 0.8, 0.6, 0.4, 0.2 y 0:
Advierta que la última imagen no se ve (solo está el hueco que ocupa).
Para dar una utilidad práctica a esta nueva propiedad, le propongo desarrollar un código en el que la imagen del Coliseo sea un hipervínculo.
Esta se verá semitransparente hasta que sitúe el ratón sobre ella y la pulse para acceder a la web oficial de este importante monumento romano.
Con el propósito de hacer más interesante este ejercicio, dicha imagen formará parte de una composición que simule un efecto de una foto polaroid, tal como puede ver a continuación:
El código de documento HTML utilizado es el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
padding: 10px;
border: 1px solid;
width: 50%;
}
p {
text-align: center;
}
img {
width: 100%;
height: auto;
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<div>
<a href="https://www.coopculture.it/it/prodotti/...">
<img src="./Images/coliseo.jpg">
</a>
<p>El Coliseo</p>
</div>
</body>
</html>
Observe que el cuerpo del documento solo contiene un contenedor <div> que representa el papel fotográfico sobre el que se muestra la imagen y el texto.
Dicho contenedor incorpora la etiqueta <img> y un párrafo con un texto descriptivo.
La regla de estilo asociada al contenedor <div> define las propiedades del “papel” fotográfico sobre el que se imprime la imagen y el texto.
En primer lugar, establece que su tamaño sea la mitad del ancho de la pantalla (la propiedad width toma el valor 50%).
También crea un margen interno de 10 píxeles (propiedad padding) para separar la imagen y el texto de los bordes del “papel”, que se dibujan con una línea continua de 1 píxel de grosor (propiedad border).
La regla de estilo del párrafo centra el texto en el papel fotográfico (asigna el valor center a la propiedad text-align).
El bloque de declaraciones de la regla de estilo que afecta a la imagen ajusta su ancho al del contenedor (el valor de la propiedad width es 100%) y la hace semitransparente (el valor de la propiedad opacity es 0.5).
La última regla de estilo utiliza la pseudoclase :hover para restituir el aspecto original de la imagen al poner el ratón sobre ella (se asigna el valor 1 a la propiedad opacity).
Cargue la página y compruebe que se produce el efecto manifestado a continuación, donde se ve la imagen del Coliseo antes y después de situar encima el ratón.
Hasta ahora, las imágenes se mostraban en un área rectangular.
Si quiere añadirle un toque artístico, la propiedad border-radius permite recortar sus esquinas de forma redondeada para obtener diferentes efectos, tal como evidencia el siguiente código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
width: 100%;
height: auto;
border-radius: 20px;
}
</style>
</head>
<body>
<img src="./images/fontana-di-trev1.jpg" alt="Fontana di Trevi">
</body>
</html>
En el cuerpo del mensaje únicamente se incluye la etiqueta <img> con la que se muestra la Fontana de Trevi.
En la cabecera del documento hay una regla de estilo que afecta a dicha etiqueta, cuya primera declaración hace que el ancho de la imagen coincida con el de la ventana del navegador (el valor de la propiedad width es 100%).
Para asegurar que la imagen no se deforme, se asigna el valor auto a la propiedad height (no es imprescindible).
Por último, la propiedad border-radius toma un valor de 20 píxeles, que es el tamaño del radio con el que se dibuja el arco con el que se redondean las esquinas.
El resultado se puede ver a continuación:
Ahora, asigne el valor 50% a la propiedad border-radius:
border-radius: 50%;
Como puede apreciar en la siguiente imagen, este sencillo cambio produce un resultado espectacular:
Si quiere que una imagen sea el fondo de pantalla de una página, no utilice la etiqueta <img> sino la propiedad background-image de la etiqueta <body>, cuyo valor deberá seguir el siguiente formato:
background-image: url('URL o ruta de acceso a la imagen')
El siguiente código muestra la forma de usar esta nueva propiedad:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background-image: url('./images/fontana-di-trev1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
p {
color: white;
font-size: 40px;
text-align: center;
margin-top: 50px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<p>La Fontana di Trevi</p>
</body>
</html>
En el cuerpo del mensaje solo hay un párrafo (<p>) con el texto: “La Fontana de Trevi”.
Este se escribirá en la página como si no hubiera ninguna imagen de fondo.
Para hacerlo más visible, la regla de estilo asociada a esta etiqueta establece un color de tinta blanco y un tamaño de 40 píxeles (propiedades color y text-size).
La otra regla de estilo afecta al propio cuerpo del documento HTML (selector “body”).
La primera declaración específica la ruta de acceso al archivo donde se almacena la imagen de fondo mediante la propiedad background-image.
Esta no suele ir sola, sino acompañada de las siguientes propiedades:
background-repeat.
Cuando la imagen es más pequeña que la ventana del navegador, el valor de esta propiedad indica si se repite (se muestra varias veces, tantas como quepan) o no.
En caso afirmativo, también se determina la disposición en la que se irían añadiendo (vertical, horizontal, etc.).
Al haberse asignado el valor no-repeat, solo aparecerá una vez.
background-attachment.
Especifica si la imagen se desplaza con el contenido de una página al hacer scroll o permanece fija (opción elegida en este caso, cuyo valor es fixed).
background-size. El valor de esta última propiedad (cover) asegura que la imagen cubrirá toda la superficie del navegador sin deformarla.
Le animo a que conozca todos los posibles valores de estas propiedades, ya que puede haber alguno que le resulte interesante.
Este procedimiento es igualmente válido para asignar una imagen de fondo a cualquier contenedor.
A continuación se muestra el aspecto de este documento HTML:
Si en vez de una imagen quisiera un color de fondo, recuerde que dispone de la propiedad background-color.
Solo tendría que asociarla al cuerpo del documento (etiqueta <body>) y asignarle el color que quiera.
Sustituya la regla de estilo del cuerpo del documento HTML anterior por esta otra:
body {
background-color: gray;
}
Ahora, el resultado sería el siguiente:
Todos los elementos HTML que se muestran en una página web son susceptibles de tener una sombra.
Esta podrá aplicarse al espacio ocupado por dicho elemento o, si fuera un texto, el de las letras que lo componen.
En el primer caso se utiliza la propiedad box-shadow y en el segundo text-shadow.
Veamos la sintaxis de estas propiedades y los efectos que se pueden llegar a producir, empezando por la primera.
Tal como se acaba de comentar, la propiedad box-shadow afecta al espacio ocupado por el elemento.
Su valor puede ser none (por defecto, no se muestra ninguna sombra), además de los consabidos initial e inherit.
Sin embargo, este habitualmente es se compone de los siguientes parámetros:
offset_horizontal offset_vertical difuminado radio_de_extension color
Si se añadiera inset al final de la lista de parámetros anterior, la sombra aparecería por dentro en vez de por fuera.
Los parámetros offset_horizontal y offset_vertical son los únicos obligatorios y establecen el desplazamiento de la sombra en cada dirección por debajo del elemento.
La siguiente imagen los muestra gráficamente:
Si el valor del offset horizontal fuera negativo, la sombra aparecería a la izquierda.
En el caso de ser el vertical, lo haría por arriba.
El parámetro difuminado determina el grado de desvanecimiento de la sombra. Cuanto mayor sea, más difuminada estará.
El parámetro radio_de_extension fija el tamaño de la sombra.
Cuanto más positivo sea, mayor será el área que ocupe.
Si, por el contrario, dicho valor fuera negativo, su superficie sería menor.
El parámetro color especifica el color de la sombra.
Para ver el efecto obtenido al añadir una sombra a un encabezado, escriba el siguiente código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1 {
padding: 10px;
margin: 20px;
background-color: lightblue;
width: fit-content;
box-shadow: 5px 5px 0 0 gray;
border-radius: 5px;
/* Añadido para suavizar esquinas */
font-family: Arial, sans-serif;
/* Mejor tipografía */
}
</style>
</head>
<body>
<h1>Contenedor con sombra</h1>
</body>
</html>
En el cuerpo del documento solo hay un encabezado <h1>, cuyo aspecto se define en una regla de estilo cuyas primeras declaraciones son auxiliares (no afectan a la sombra).
Son las que establecen un margen interno de 10 píxeles y otro externo de 20 píxeles (propiedades padding y margin), un color de fondo azul claro (propiedad background-color) y un ancho ajustado al propio texto (la propiedad width toma el valor fit-content).
La propiedad box-shadow, con la que se muestra la sombra, objeto de estudio de esta sección, la pinta de color gris con un desplazamiento tanto horizontal
como vertical de 5 píxeles (no se ha difuminado ni se ha ampliado o reducido su radio de expansión).
A continuación, puede ver el resultado obtenido al cargar este código en Chrome:
Cambie el signo de los parámetros de offset:
box-shadow: -5px -5px 0 0 gray;
Ahora la sombra aparece sobre la parte superior izquierda del encabezado, tal como puede observar en esta otra imagen:
En efecto, cuando los parámetros que establecen el offset son positivos, la sombra aparece debajo desplazada hacia la derecha.
Con valores negativos lo hace arriba desplazada hacia la izquierda.
Para difuminar la sombra, modifique de nuevo el valor asignado a la propiedad box-shadow de esta forma:
box-shadow: 5px 5px 10px 0 gray;
La siguiente imagen presenta el resultado obtenido en esta ocasión:
Por último, aumente el radio de expansión de la sombra:
box-shadow: 5px 5px 10px 5px gray;
Su aspecto pasará a ser el mostrado a continuación:
Le animo a que pruebe diferentes combinaciones para tratar de descubrir aquellas que se acercan más a sus gustos.
Los elementos HTML no son los únicos capaces de proyectar una sombra. Las letras de los textos también pueden hacerlo.
Para ello, deberá utilizar la propiedad text-shadow, cuyo valor sigue la siguiente sintaxis:
offset_horizontal offset_vertical radio_de_extension color
La propiedad text-shadow también puede tomar los valores none (por defecto, no se proyecta ninguna sombra), initial e inherit.
Como puede comprobar, esta propiedad tiene los mismos parámetros que la anterior, salvo difuminado.
Y, al igual que aquella, los únicos requeridos son los de offset_horizontal y offset_vertical.
Para probar el efecto producido por esta propiedad se utilizará el siguiente documento HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1 {
margin: 20px;
}
#sombra {
text-shadow: 5px 5px gray;
}
#neon {
color: red;
text-shadow: 0 0 10px red;
}
</style>
</head>
<body>
<h1 id="sombra">Encabezado con sombra</h1>
<h1 id="neon">Encabezado efecto neón</h1>
</body>
</html>
El cuerpo del mensaje consta de dos encabezados <h1>, cuyo identificador (atributo id) será el selector de la regla de estilo que les dé el efecto deseado.
En la cabecera del documento están las reglas de estilo, la primera de la cuales afecta a los dos encabezados <h1>.
Su función es auxiliar, ya que se utiliza para separarlos 20 píxeles (propiedad margin) y dejar espacio a las sombras.
La regla de estilo del primer encabezado (selector “sombra”) proyecta una sombra de color gris claro desplazada 5 píxeles a la derecha y por debajo de cada letra.
La del segundo (selector “neon”) juega con los parámetros de la propiedad text-shadow para ofrecer un efecto de letras de neón de color rojo.
Para conseguirlo, la sombra no se desplaza (el offset horizontal y vertical es 0), pero se amplía con un radio de difusión de 4 píxeles.
El resultado de ambos efectos se puede ver a continuación:
Con el fin de obtener resultados más llamativos, la propiedad text-shadow permite combinar varias sombras.
Solo tiene que separarlas por comas, como se ha hecho en estas dos reglas de estilo:
#trees_colores {
color: white;
text-shadow: 1px 1px 5px black,
1px 1px 15px red,
1px 1px 25px darkred;
}
#borde {
color: lightblue;
text-shadow: -1px 0 black,
0 1px black,
1px 0 black,
0 -1px black;
}
La primera regla crea un efecto de halo mediante tres sombras: una negra, otra roja y una tercera con un tono más oscuro.
Sus offsets son los mismos (1 píxel en horizontal y otro en vertical), por lo que el efecto deseado se consigue modificando el radio de extensión de cada una de ellas, que se resalta aún más al usar un texto de color blanco (propiedad color).
La segunda regla dibuja un borde negro alrededor de cada letra, que destaca sobre un texto de color claro (propiedad color).
A la hora de pintarlo, la propiedad text-shadow combina cuatro sombras en las que los offsets van tomando los valores 0, -1 y 1 de forma alternativa.
Sustituya las reglas de estilo del documento de ejemplo anterior por estas últimas.
Luego, modifique los identificadores de los encabezados <h1> para que coincidan con los utilizados en dichas reglas:
<h1 id="tres_colores"> Encabezado con sombra de tres colores </h1> <h1 id="borde">Encabezado con borde</h1>
Una vez guardados los cambios, refresque la página en el navegador.
El resultado obtenido deberá ser similar al siguiente:
Le animo a realizar todas las combinaciones de parámetros y valores que se le ocurran.
Los efectos que se pueden llegar a producir son realmente sorprendentes.
En las secciones anteriores se han descrito las propiedades que se emplean con más frecuencia para determinar el aspecto de los elementos mostrados en una página web.
Cada una de ellas podía tomar un conjunto de valores, entre los que generalmente se encontraban los siguientes:
initial.
Restablece el valor por defecto.
inherit. Utiliza el valor heredado del contenedor al que pertenece.
Cuando se añade una etiqueta al cuerpo de un documento HTML, esta se muestra en la ventana del navegador de una forma predeterminada.
Al asignar un valor a cualquiera de sus propiedades, lo que está haciendo es modificar dicho aspecto.
Si en algún momento quisiera volver a recuperarlo, no tendría por qué conocer cuál era, ya que bastaría con asignarle el valor initial.
Si, por el contrario, lo que deseara es utilizar el heredado del contenedor donde se encuentra, el valor que debería asignarle es inherit.
El siguiente código muestra un sencillo, pero representativo, ejemplo de uso de este valor:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {
color: lightgrey;
font-size: 30px;
}
div {
font-size: 20px;
}
</style>
</head>
<body>
<p>Este texto sigue el estilo del párrafo.</p>
<div>
<p>
Este texto sigue el estilo del párrafo,
aunque esté dentro de la sección.
</p>
<p style="font-size: inherit;">
Este texto hereda el tamaño de fuente de la sección,
pero mantiene el color del párrafo.
</p>
</div>
<p style="color: initial;">
Este texto restablece el color por defecto del párrafo.
</p>
</body>
</html>
A continuación, se muestra el aspecto a esta página.
Analicemos el código de este documento HTML para descubrir el motivo del color y el tamaño adoptado por cada uno de los párrafos.
En la cabecera se definen dos estilos: uno para los párrafos y otro para los contenedores.
El de los párrafos establece un tamaño de fuente de 30 píxeles y un color de texto gris claro (propiedades font-size y color), mientras que el de los contenedores determina únicamente un tamaño de fuente de 20 píxeles.
El cuerpo del documento está formado por cuatro párrafos, dos de los cuales están dentro de un contenedor <div>.
El primer párrafo se muestra tal como se ha establecido en la cabecera (con un tamaño de 30 píxeles y un color de texto gris claro).
El segundo párrafo, aunque esté dentro del contenedor, sigue el mismo estilo.
El tercer párrafo hereda del contenedor el tamaño de la fuente (se ha asignado a la propiedad font-size el valor inherit), que es de solo 20 píxeles, motivo por el que se muestra más pequeño.
El color sigue siendo el del estilo especificado para los párrafos en la cabecera del documento.
El último párrafo, que no está dentro del contenedor, restituye el color por defecto de los párrafos (la propiedad color toma el valor initial), motivo por el que aparece en negro.
El tamaño de la fuente sigue siendo el establecido en la regla de estilo, es decir, de 30 píxeles.