Propiedades de Css part 1

 

Imágenes de fondo 

En el caso de querer utilizar una imagen de fondo, como ya hemos dicho, utilizaremos la propiedad background-image y en el valor, el nombre de la imagen (o la dirección donde está alojada), siempre rodeada del texto url().

Propiedad	Valor	Significado
background-image	none	No utiliza ninguna imagen de fondo.
background-image	url(imagen.jpg)	Usa la imagen de nombre imagen.jpg como fondo.

En el caso de que sólo se coloque el nombre de la imagen (por ejemplo, imagen.jpg), el navegador buscará la imagen en la misma carpeta donde está el archivo CSS. Esto es lo que se llama una ruta relativa. En el caso de que se coloque la ruta completa, por ejemplo https://i.emezeta.com/img/logo.png, se accederá a la imagen alojada en esa dirección web. Esto es lo que se llama ruta absoluta.

NOTA: En el caso de que no se encuentre la imagen o el valor de background-image se haya establecido a none, no se utilizará ninguna imagen de fondo, y en su lugar se mostrará el color establecido con background-color.

Una vez establecida una imagen de fondo con background-image, se puede personalizar la forma en la que se mostrará dicha imagen mediante propiedades como background-repeat, background-attachment o background-position, entre otras:

Propiedad	Valor	Significado
background-repeat	repeat	Repite la imagen de fondo horizontal y verticalmente.
	repeat-x	Repite la imagen de fondo sólo horizontalmente (eje x).
	repeat-y	Repite la imagen de fondo sólo verticalmente (eje y).
	space	Repite la imagen y rellena con espacio los huecos.
	round	Repite la imagen y amplia cada repetición para ajustar.
	no-repeat	La imagen de fondo no se repite.
background-attachment	scroll	Cuando hacemos scroll la imagen de fondo se desplaza.
	fixed	Cuando hacemos scroll, la imagen de fondo permanece fija.
background-position		1 parámetro. Desplaza la imagen de fondo al punto (x, 50%).
		2 parámetros. Desplaza la imagen de fondo al punto (x, y).

La propiedad background-repeat especifica si la imagen se repetirá horizontalmente (repeat-x), si se repetirá verticalmente (repeat-y), si lo hará en ambas direcciones (repeat) o en ninguna (no-repeat). Por defecto, si no se indica nada, esta propiedad está ajustada en repeat.

Existen también dos valores interesantes, space y round, los cuales asumen implícitamente que se repite el fondo. En el caso de que tengamos una imagen de fondo que se repita varias veces en mosaico, space evita que se corte la imagen, introduciendo un espacio entre las repeticiones individuales.

Por su parte, round lo que hace es ajustar la imagen individual, de modo que la expande o contrae para ajustarla al espacio disponible. En ambos casos la repetición de los fondos nunca se mostrará cortada.

Siempre se podrá combinar en cada eje, con valores mixtos, por ejemplo, utilizando background-repeat: space round, lo que aplicará space al eje X y round al eje Y. Si sólo se especifica uno, se aplicará a ambos ejes.

La propiedad background-attachment especificará si la imagen de fondo seguirá el desplazamiento del usuario (scroll, el comportamiento por defecto) o por el contrario, se quedará fijado y no se moverá (fixed), mientras el usuario se desplaza por la página.

Por último, background-position coloca la imagen en la zona especificada por  y por . Por defecto, esos valores son 0% 0%, pero pueden especificarse con unidades (porcentajes, píxels, etc...) o mediante palabras clave que representan zonas predefinidas (top, left, right, bottom y center).

Si sólo se especifica un valor, se tomará para el eje x, mientras que el valor del eje Y será automáticamente establecido a center (o 50%).

Atajo clásico: Fondos 

Es posible establecer todas estas propiedades anteriores en una sola regla de CSS a modo de atajo, y así ahorrar mucho espacio en escribir las propiedades anteriores por separado. Aunque no es estrictamente obligatorio, se aconseja respetar el siguiente orden (acostumbrarse a usar el mismo orden es una buena práctica):

div {
  /* background: <color> <image> <repeat> <attachment> <position> */
  background: #FFF url(imagen.jpg) repeat-x scroll top left;
}

Y con esto, ya conocemos las ventajas básicas de CSS a través de propiedades tan interesantes como background-color o background-image . Sin embargo, la llegada de CSS3 incorporó novedades muy interesantes en nuestros navegadores, que mediante versiones anteriores a CSS3 no era posible realizar (o era algo bastante complejo).

Opacidad 

Es posible utilizar la propiedad CSS3 opacity para establecer una transparencia total sobre el elemento indicado. Cuando decimos «transparencia total» nos referimos a que la transparencia se aplicará al elemento en cuestión y a todos los elementos HTML que estén en su interior.

Propiedad	Valor	Significado
opacity		Establece una transparencia (0 = 100% transparente, a 1 = 100% opaco)

El valor a indicar es un número  entre 0 (completamente transparente) y 1 (completamente visible), pudiendo establecer decimales para valores intermedios:

div {
  background-color: #FF0000;
  color: #FFFFFF;
  opacity: 0.5;
}

Como se puede ver en la imagen, esto hará que la capa div (el recuadro rojo) se muestre al 50% de opacidad, con color de texto blanco (en el caso de existir texto) y fondo de color rojo. Si buscamos una transparencia parcial (color de fondo transparente que no afecte al texto) debemos utilizar los valores RGBA o HSLA (canales alfa) en la propiedad background-color:

div {
  color: white;
  background-color: RGBA(255, 0, 0, 0.5);
}

De este modo, sólo aplicamos la transparencia al color de fondo, mientras que con opacity se aplica a toda la capa en sí, por lo que afecta a todos los elementos que están dentro de la capa.

Fondos múltiples 

CSS3 ofrece nuevas características a la hora de utilizar imágenes de fondo, como por ejemplo la posibilidad de establecer múltiples imágenes de fondo de forma simultánea:

div {
  background-image: url(manz.png), url(fondo2.jpg), url(fondo3.jpg);
  background-repeat: no-repeat;
}

De esta forma, se pueden utilizar varias imágenes y superponerlas una sobre la otra, algo especialmente interesante si la primera imagen de fondo está en formato PNG (la cuál soporta transparencias). Al establecer imágenes de fondo múltiples, las propiedades complementarias a los fondos como background-repeat, background-position y otras, pueden actuar de forma personalizada para cada fondo.

Mientras que en el fragmento de código anterior, el navegador le indica a cada una de las tres imágenes que no debe repetirse, en el siguiente fragmento de código veremos que es posible indicar individualmente el comportamiento de cada una, separando por comas:

div {
  background-image: url(manz.png), url(fondo2.jpg), url(fondo3.jpg);
  background-repeat: no-repeat, repeat-x, repeat;
}

Además, CSS3 también añade nuevas propiedades para especificar como cubrirá la imagen de fondo al elemento en cuestión:

Propiedad	Valor	Significado
background-clip	border-box | padding-box | content-box	Modo de relleno de la imagen de fondo
background-origin	border-box | padding-box | content-box	Origen del modo de relleno del fondo

La propiedad background-clip establece la forma en la que el color o la imagen de fondo cubrirá el elemento, mientras que la propiedad background-origin intenta posicionar el comienzo de la imagen de fondo, útil con imágenes. La primera utiliza border-box como valor por defecto, mientras que la segunda utiliza padding-box.

Ambas propiedades pueden tomar uno de los siguientes valores:

Valor	Significado
padding-box	La imagen o color de fondo cubrirá la zona del espaciado y contenido.
border-box	La imagen o color de fondo cubrirá la zona del borde, espaciado y contenido.
content-box	La imagen o color de fondo cubrirá sólo la zona del contenido.

Consejo: Una buena forma de darse cuenta del funcionamiento de estas propiedades es establecer un borde grueso punteado. Usando border-box la imagen de fondo se extenderá en todo el elemento, incluyendo borde, espaciado y contenido. El valor padding-box extenderá la imagen de fondo sólo mediante el padding y el contenido, y por último, la propiedad content-box extenderá la imagen de fondo sólo en la zona del contenido.

Tamaño de fondos 

Una de las últimas incorporaciones a la familia de propiedades de fondos de imagen es la propiedad background-size, la cuál ajusta el tamaño (ancho y alto) de la imagen de fondo, por si deseamos escalarla a un tamaño diferente. Por defecto, una imagen de fondo toma automáticamente el tamaño de la imagen (que podría ser demasiado grande, por ejemplo). Para no tener que modificar la imagen original de forma manual con un editor de imágenes, podemos utilizar esta propiedad y ajustarla a nuestro agrado mediante CSS:

Propiedad	Valor	Significado
background-size		1 parámetro. Aplica un  de (ancho × auto) a la imagen de fondo.
		2 parámetros. Aplica un  de (ancho × alto) a la imagen de fondo.

Los valores de tamaño que podemos utilizar, son los siguientes:

Valor	Significado
auto	No escala la imagen. Utiliza el tamaño original. Es el valor por defecto.
unidad	Indicamos el tamaño específico que queremos usar (píxels o porcentaje, por ej.).
cover	Escala el ancho de la imagen de fondo al ancho del elemento.
contain	Escala el alto de la imagen de fondo al alto del elemento.

Los dos últimos valores (cover y contain) sólo pueden utilizarse en el caso de que se especifique un sólo parámetro como valor en la propiedad background-size.

Atajo moderno: Fondos 

Los navegadores modernos, incluyen una nueva propiedad de atajo background que permite incluir los valores de propiedades CSS3 como background-clip , background-origin o background-size, que fueron incorporados más tarde que los demás. Es por ello, que el orden aconsejado para adquirir buenas prácticas es el siguiente y varía un poco respecto a la otra propiedad de atajo tradicional:

div {
  /* background: <color> <position> <size> <repeat> <origin> <clip> <attachment> <image> */
  background: #FFF top left cover repeat-x padding-box border-box scroll url(imagen.jpg);
}

Dar estilos a los textos con CSS

Ahora ya tenemos una amplia noción de como estructurar el texto con XHTML, pero esto no significa que llegamos al final del camino.

Si observamos los elementos que creamos por defecto con estas etiqueta, podremos darnos cuenta que no son para nada atractivos visualmente, por lo que es muy probable que deseemos darle un estilo para crear un mejor entorno.

Para ello vamos a recurrir a CSS para tomar el control de las fuentes, tamaños, colores y espacios.

Tipo de fuente

En muchos casos, el primer encuentro con el manejo de fuentes en un ordenador  se puede remontar a un procesador de texto, al momento de realizar nuestros trabajos o tareas utilizábamos ciertas fuentes para identificar los encabezados y el contenido, cada quien escogía el tipo que más se adecuaba al documento y a nuestros gustos.

Tenemos que tener en cuenta que muchas fuentes no son universales por lo que si incluimos alguna de estás en nuestra página un usuario no la puede apreciar de la misma manera.

La primera parte de esta propiedad que estudiaremos es “font-family”, con esta parte podemos definir que fuente o tipografía usaremos en el documento.

El uso de muchas fuentes en un sólo documento puede estropear nuestra web, no lucirá nada bien y sólo atormentaremos al usuario invadiéndolo con basura anti-estética.

Por ello esta propiedad debe usarse relativamente poco, pero su importancia no disminuye para nada.

El valor de “font-family” puede ser el nombre de una fuente, el cual debe ir entre comillas, o también puede ser el nombre de varias fuentes separados por comas; de esta manera podemos crear un respaldo, en caso de que el navegador no pueda encontrar la fuente principal usará la siguiente en la lista.

Este respaldo es comúnmente utilizado por cuestiones de seguridad, existen ocasiones en que algunas fuentes tienen nombres diferentes en distintos sistemas operativos o simplemente la fuente que estamos utilizando es muy rara, por lo que se opta por utilizar fuentes genéricas como sans-serif o monospace para actuar en caso de que todas las demás fallen.

body { font-family: "Arial" }
.contenido { font-family: Arial, Helvetica, Sans-serif }

Tipografía en pantalla vs. tipografía impresa

La tipografía de las páginas web tienen diferencias sustanciales con la tipografía impresa.

La resolución de las tipografías de las páginas web está muy limitada por la cantidad de puntos por pulgada (ppp), que en los sistemas de impresión, aún los de menor resolución, son muy superiores.

Sin embargo, gracias al sistema “anti-alias” que los sistemas operativos aplican a sus fuentes, es posible mejorar la visibilidad de las mismas.

El “anti-alias” es el suavizado de los bordes mediante la aplicación de un gradiente.

En la siguiente imagen, veremos una comparación de fuentes con y sin anti-alias.

Muchos diseñadores noveles tienden a justificar el texto en pantalla. Ten en cuenta desde el principio que un texto justificado en pantalla se lee pero que alineado a la izquierda.

El modo de renderizar este tipo de alineación no es óptima en pantallas de ordenador.

El navegador tiende a justificar el texto a costa de establecer espacios irregulares entre las palabras, algunas aparecen más juntas, otras claramente alejadas provocando saltos bruscos dentro de las frases lo que dificulta su lectura. Lo más usable es dejar el texto alineado a la izquierda.

Color del texto

La propiedad “color” ya fue mencionada anteriormente en nuestro manual, como su nombre lo indica sirve para establecer un color para un elemento, en este caso nos ayudará a determinar el color en que se mostrarán las letras del texto.

En cambio si lo que quisiéramos es cambiar el fondo del texto, entonces debemos utilizar la propiedad “background-color”, la cual únicamente se encarga de resaltar la parte que queda exactamente atrás del texto.

body {
  font-family: Arial, Helvetica, Sans-serif;
  color: white;
  background-color: blue;
}

Tamaño

Para definir el tamaño de la fuente tenemos a “font-size”, dicha propiedad recibe unidades de tipo píxel, em o porcentaje como valor, pero también tiene la particularidad de recibir cadenas de texto como “small”, “medium” y “large” las cuales establecen un valor predefinido para el tamaño, el cual puede variar según el navegador.

body {
  font-family: Arial, Helvetica, Sans-serif;
  color: white;
  background-color: blue;
  font-size: 12px;
}

.contenido{
  font-size: 80%;
}

Interlineado (line-height)

En muchas ocasiones existe la necesidad de ajustar la altura de la línea (interlineado) donde desplegamos el texto, para ello muchos recurren a modificar la fuente del texto, pero el proceso correcto sería utilizar la propiedad “line-height”.

Dicha propiedad nos permitirá crear un texto más legible al ajustar la línea de texto en elementos como párrafos.

p { line-height: 1.5; }

Otro aspecto que mejora la legibilidad y la estética, la utilización correcta de espacios en blanco. Establecer márgenes a los lados del texto sirve como método de establecer separación entre contenidos y proporciona alivio visual.

La utilización correcta del interlineado favorece la lectura de los textos, ya que es mucho más sencillo ubicar la siguiente línea.

Para que el usuario no se canse de la lectura, es una buena medida establecer párrafos relativamente cortos y con espacios en blanco entre ellos, de forma tal que se produzca un descanso visual.

Otro factor que provoca cansancio visual y dificultades para encontrar la siguiente línea, es establecer anchos de párrafo de mucha longitud, siendo preferible que el texto se extienda más en lo vertical con anchos de línea más reducidos.

Negrita y cursiva

Si lo que queremos es establecer el grosor y la inclinación de nuestro texto entonces debemos recurrir a “font-weight” y “font-style” para definirlo.

La propiedad “font-weight” se encargará de definir el grosor de la fuente, los valores típicos para esto son “bold” que nos pondrá el texto en negritas y “normal” que lo regresará a una visualización común.

Por su parte, la propiedad “font-style” se usará para volver cursiva un tipo de letra, y por cursiva nos referimos a dar un formato itálico.

p { 
  font-weight: bold; 
  font-style: italic;
}

Mayúsculas y minúsculas

Una vez adentrado en la estilización del texto, podemos pasar a aspectos más específicos como por ejemplo el aspecto de cada letra, dentro de esto encontramos a las mayúsculas y minúsculas.

Muchos consideran de mala educación y mal gusto escribir todo el texto con mayúsculas, por lo que es mejor escribir el texto de forma normal.

No obstante, hay propiedades CSS que sirven para cambira la forma del texto, estas propiedades son “font-variant” y “text-transform”.

En el caso de “font-variant” tenemos el calor “small-caps” que sirve para convertir un texto a pequeñas letras mayúsculas que no revasen la altura de una minúscula, es decir simplemente toman la forma.

Por otro lado “text-transform” nos permite jugar más con las letras, ya que con su propiedad “uppercase” podemos transformar todo el texto a mayúsculas o con “lowercase” convertirlas a minúsculas, y si lo que queremos es una palabra correctamente escrita entonces podemos usar “capitalize” que convierte a mayúscula únicamente la primera letra de la palabra.

h1 { text-transform: capitalize; }

Alineación

Finalmente, una vez que ya tenemos estilizadas las letras, podemos definir una alineación adecuada para mostrar nuestro texto.

Como en todo lo que es bidimensional, existen dos formas básicas de alinear, la horizontal y la vertical, siendo el primer caso el más fácil.

Para definir una alineación horizontal basta con utilizar la propiedad “text-align”, la cual se encargará de utilizar el elemento padre como marco para alinear el texto con alguno de sus 4 valores “left”, “right”, “center” o “justify”.

La alineación horizontal tiene utilidad en algunos tipos de textos muy especiales, pero para bloques de texto más o menos extensos, es mejor que se encuentren alineados a la izquierda.

Esto se debe a que para el lector es más sencillo ubicar los principios de línea, lo que resulta mucho más difícil cuando el texto se encuentra alineado a la derecha, debido a la irregularidad de los comienzos de línea ubicados a la derecha.

Por otra parte, los textos justificados necesitan modificar el espacio entre palabras para que tanto los comienzos como los finales se encuentren alineados, como dijimos un poco más arriba, esto que provoca una fuerte asimetría que perjudica la lectura y la presentación de la página.

El código CSS para alinear el texto es el siguiente:

text-align: center; /* texto centrado */
text-align: left; /* texto alineado a la izquierda, por defecto */
text-align: right; /* texto alineado a la derecha */
text-align: justify; /* texto justificado */

Por su parte el alineado vertical de textos es un poco más de trucos, podemos utilizar la propiedad “vertical-align” pero puede que los resultados no sean los esperados.

Los valores para esta propiedad son “middle”, “bottom”, “text-top”, “text-bottom”, “sub” y “super”.

p { vertical-align: middle; }

Propiedad Font

Existe una manera sencilla de reflejar todo los cambios que hemos realizado hasta el momento, y esta es la propiedad “font”.

Muchos le llamarán atajo, pero sigue siendo una propiedad en sí y básicamente su función consiste en combinar los valores de “font-style”, “font-variant”, “font-weight”, “font-size”, “line-height” y “font-family” en una sola línea de texto.

Estos pequeños atajos son proporcionados por CSS para definir un gran número de estilos con poco código, y nos iremos encontrando con otros más conforme avancemos.

La manera de definir su valor es separar cada propiedad separada por un espacio, como se muestra aquí:

p { font: bold 12px/1.5 arial, helvetica, sans-serif; }

Tratamiento de textos para páginas web

El contenido más importante de todas las páginas web se encuentra en los textos, aún en aquellos casos en los que las imágenes ocupan un porcentaje mucho mayor respecto del espacio de la página.

Estudios científicos indican que el cansancio que se experimenta en la lectura de textos en un ordenador es mucho mayor que en los medios impresos, y que la velocidad de lectura es más rápida en los últimos.

Además, el tiempo de atención de los usuarios de Internet es diferente, siendo mucho más corta que en otros medios más tradicionales.

Estas características tan especiales de las páginas web, hace que la producción, disposición y la forma en que se presentan los textos, deba ser especialmente cuidada, ya que descuidar este aspecto podría provocar una pérdida de usuarios.

Consejos para formatear los textos en una web

• Cada párrafo, debe contener solo una idea. Esto agiliza notablemente la lectura y simplifica la comprensión del texto en general.
• Cada tema o subtema, debe estar separado del resto mediante la aplicación de subtítulos claros y que contengan información de utilidad sobre el contenido que los lectores encontrarán en los párrafos siguientes.
• La calidad de los textos debe ser muy alta. Simplicidad en la elaboración de frases y oraciones, buena sintaxis, ortografía sin errores y estilo cuidado.
• Todo texto debe estar iniciado por un título perfectamente visible, debe resultar llamativo y lo suficientemente explícito como para que los usuarios tengan una idea clara del tema tratado en los párrafos siguientes.
• Es necesaria la disposición del texto en párrafos, separados por un interlineado visible, de forma tal que un texto no de la impresión de tratarse de un gran bloque que nunca termina.
• Los párrafos deben ser cortos, ya que los bloques de textos de muchas líneas, hace que muchos usuarios se pierdan al cambiar de línea.
• Dentro de los párrafos, los conceptos más importantes y las palabras clave es conveniente que estén más visibles que el resto del texto, por lo que deben ir en negrita. No conviene abusar de esta técnica.
• En cambio, el subrayado es totalmente desaconsejado, ya que generalmente las palabras subrayadas suelen ser empleadas para los enlaces, lo que puede generar confusión en los usuarios.
• El texto en un solo color, suele ser monótono, lo que puede provocar que el usuario encuentre poco atractiva la propuesta. Por lo general, para hacer que el texto deje de ser algo monótono, basta con incluir colores diferentes a los títulos y subtítulos para que la apariencia general se muestre en forma atractiva.
• Dotar de buen contraste del texto sobre el fondo sobre el cual se encuentra. Esto es particularmente importante en el caso de las páginas que tienen imágenes como fondo, ya que en esos casos, la lectura es aún más compleja que en las páginas que tienen un color sólido de fondo.
• No utilizar efectos en los textos. Los efectos de marquesina, el texto parpadeante o textos móviles logrados con algunos js, por lo general deben ser evitados, ya que tienen efectos contraproducentes.
• Usar un máximo de tres fuentes diferentes y dos o tres colores para el texto.
• Hacer que los enlaces se distingan muy bien del resto del texto.
• Usar un espaciado apropiado entre líneas, párrafos, títulos y subtítulos, sangrías, etc.

Enlaces en css

Los estados de un enlace

Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes pseudoclases):

• Link (no visitado): El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase :link.
• Visited: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase :visited.
• Hover: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase :hover.
• Focus: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla Tab del teclado o se le da el foco mediante programación usando HTMLElement.focus()); se le aplica un formato diferente con la pseudoclase :focus.
• Active: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase :active.

Estilos predeterminados

El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el CSS simplemente amplía y centra el texto para que destaque más).

<p><a href="#">Un enlace simple</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

A medida que explores los estilos predeterminados, observarás algunas cosas:
Los enlaces están subrayados.
Los enlaces no visitados se ven de color azul.
Los enlaces visitados se ven de color morado.
Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano.
Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción Acceso total por teclado: Todos los controles presionando Ctrl + F7 para que funcione).
Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic).
Curiosamente, estos estilos predeterminados son casi los mismos que se utilizaban al inicio de los navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías:
Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma.
Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan.
Los estilos por defecto se pueden desactivar/cambiar usando las propiedades CSS siguientes:
color para el color del texto.
cursor para el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo).
outline para el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco.
Nota: No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste. ¡Solo trata de que no resulte descabellado!
Dar formato a algunos enlaces
Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos de enlace.
Para empezar, escribiremos nuestro conjunto de reglas vacío:
a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}
Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como LoVe Fears HAte.
Ahora vamos a añadir algo más de información para darles formato:
body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}
También proporcionaremos algún ejemplo de HTML al que aplicar CSS:
<p>Dispones de varios navegadores, como <a href="#">Mozilla
Firefox</a>, <a href="#">Google Chrome</a> y
<a href="#">Microsoft Edge</a>.</p>
¿Qué hemos hecho aquí? Sin duda tiene un aspecto diferente al estilo predeterminado, pero todavía ofrece una experiencia lo suficientemente familiar como para que los usuarios sepan de qué se trata:
Las dos primeras reglas no presentan gran interés en esta explicación.
La tercera regla usa el selector a para eliminar el subrayado de texto predeterminado y el contorno en el estado de foco (que de todos modos varía dependiendo del navegador), y añade una pequeña cantidad de área de relleno a cada enlace (todo esto se aclarará más adelante).
A continuación, utilizamos los selectores a:link y a:visited para establecer un par de variaciones de color en los enlaces no visitados y visitados, para que se distingan.
Las dos reglas siguientes usan a:focus y a:hover para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado para que el enlace destaque aún más. Aquí destacamos dos aspectos:
El subrayado se ha creado usando border-bottom y no text-decoration, y es que algunas personas lo prefieren porque el primero tiene mejores opciones en cuanto a estilo, y se dibuja un poco más abajo, por lo que no pisa los trazos descendentes de la palabra que se subraya (por ejemplo, los trazos de la g o la y).
El valor border-bottom se ha establecido en 1px solid sin especificar ningún color. Así, el borde adopta el mismo color que el texto del elemento, lo que es útil en casos en los que el texto es de un color diferente en cada caso.
Finalmente, a:active se usa para dar a los enlaces un esquema de color inverso mientras se activan, ¡para dejar claro que algo importante sucede!
Aprendizaje activo: proporciona estilo a tus enlaces
En esta sesión de aprendizaje activo, queremos que tomes nuestro conjunto de reglas vacías y añadas tus propias declaraciones para lograr unos enlaces geniales. Da rienda suelta a tu imaginación. Estamos seguros de que puedes crear algo genial y tan funcional como nuestro ejemplo anterior.
Si te equivocas, puedes volver a empezar pulsando el botón Reinicio. Si te quedas encallado, pulsa el botón Mostrar la solución para recuperar el ejemplo anterior.
Incluir iconos en los enlaces
Una práctica común es incluir iconos en los enlaces para proporcionar más de un indicador en cuanto a qué tipo de contenido apunta. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos este fantástico ejemplo de icons8.com.
Echemos un vistazo a algunos elementos HTML y CSS que nos van a proporcionar el efecto que queremos. En primer lugar, algunos elementos HTML sencillos para dar estilo:
<p>Para obtener más información sobre el tiempo, visite nuestra <a href="http://#">página del tiempo</a>,
mire la <a href="http://#">Wikipedia</a>, o cheque
<a href="http://#">Extreme Science</a>.</p>
A continuación, el CSS:
body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}
¿Qué pasa aquí? Omitiremos la mayor parte del CSS, ya que es la misma información que has visto antes. Sin embargo, la última regla es interesante: insertamos una imagen de fondo personalizada en enlaces externos de una manera similar a como manejamos viñetas personalizadas en los elementos de lista en el último artículo. Esta vez, sin embargo, utilizamos la propiedad abreviada background en lugar de las propiedades individuales. Establecemos la ruta a la imagen que queremos insertar, especificamos el valor no-repeat para que solo se inserte una copia, y luego especificamos la posición como al 100% a la derecha del contenido de texto y a 0 píxeles del extremo superior.
También usamos background-size para especificar el tamaño de la imagen de fondo (es útil tener un icono más grande y luego cambiar su tamaño de esta manera, según sea necesario para fines de diseño web adaptativo). Sin embargo, esto solo funciona con Internet Explorer 9 y versiones posteriores, por lo que si trabajas con navegadores antiguos, tendrás que cambiar el tamaño de la imagen e insertarla tal como es.
Finalmente, establecemos un área de relleno a la derecha (padding-right) para los enlaces, para crear un espacio en que aparezca la imagen de fondo, de modo que no se superponga con el texto.
Un último apunte: ¿cómo seleccionamos solo los enlaces externos? Bueno, si escribes tus enlaces HTML de forma adecuada, solo deberías usar URL absolutos para los enlaces externos. Para enlazar con otras partes del mismo sitio web, resulta más eficiente usar enlaces relativos. Por lo tanto, el texto «http» solo debe aparecer en los enlaces externos y es posible seleccionarlos con un selector de atributos: a[href*="http"] selecciona los elementos <a>, pero solo si tienen un atributo href con un valor que contiene «http» en algún lugar de su contenido textual.
Eso es todo. Vuelve a la sección de aprendizaje activo anterior ¡y prueba esta nueva técnica!
Nota: No te preocupes si aún no estás familiarizado con los fondos y el diseño web adaptativo, lo explicaremos en otros artículos.
Dar aspecto de botón a un enlace
Las herramientas que has explorado hasta ahora en este artículo también se pueden usar de otras maneras. Por ejemplo, los estados como hover se pueden usar para diseñar muchos elementos diferentes, no solo enlaces. Es posible que desees diseñar un estado que señale el paso del cursor por encima de párrafos, elementos de lista u otras cosas.
Además, suele ser bastante común dar a los enlaces un aspecto y un comportamiento de botón en ciertas circunstancias: el menú de navegación de un sitio web generalmente está marcado como una lista que contiene enlaces, y es posible aplicarle estilo fácilmente para que se parezca a un conjunto de botones de control o pestañas que proporcionan al usuario acceso a otras partes del sitio web. Vamos a ver cómo.
En primer lugar, un poco de HTML:
<ul>
  <li><a href="#">Inicio</a></li> <li><a href="#">Pizza</a></li> <li><a href = "#">Música</a> </li> <li><a href="#">Wombats</a></li> <li><a href="#">Finlandia</a></li>
</ul>
Y ahora nuestro CSS:
body,html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {
  background: orange;
}

a:active {
  background: red;
  color: white;
}
Nuestra segunda regla elimina el área de relleno (padding) predeterminada del elemento <ul> y establece un ancho para abarcar el 100% del contenedor externo (el <body>, en este caso).
Los elementos <li> por defecto suelen ser elementos de bloque (repasa los tipos de cajas CSS), lo que significa que ocupan sus propias líneas. En este caso, creamos una lista de enlaces horizontal, para lo que en la tercera regla establecemos la propiedad display en el valor inline, que ubica todos los elementos de la lista sobre la misma línea porque ahora se comportan como elementos de línea.
La cuarta regla (que da formato al elemento <a>) es la más complicada. Vamos a verla paso a paso:
Como en los ejemplos anteriores, comenzamos por desactivar las propiedades predeterminadas text-decoration y outline, ya que no queremos que estropeen nuestro aspecto.
A continuación, configuramos la propiedad display en el valor inline-block: los elementos <a> se muestran en línea de forma predeterminada y, aunque no queremos que ocupe más de una línea, como haría un valor de block, queremos poderlos dimensionar: inline-block nos permite hacerlo.
Ahora nos centramos en el tamaño. Queremos llenar todo el ancho del elemento de lista <ul> y dejar un pequeño margen entre cada botón (pero ningún hueco en el borde derecho), y queremos los 5 botones del mismo tamaño. Para hacer esto, establecemos el atributo width en 19,5%, y el atributo margin-right en 0,625%. Observa que el ancho completo suma 100,625%, lo que haría caer el último botón <ul> a la siguiente línea por desbordamiento. Sin embargo, lo restituimos al 100% con la siguiente regla, que selecciona solo el último elemento <a> de la lista y elimina de él el margen. ¡Hecho!
Las tres últimas declaraciones son bastante sencillas y tienen principalmente finalidades estéticas. Centramos el texto dentro de cada enlace, establecemos line-height en 3 para dar algo de altura a los botones (lo que también presenta la ventaja de centrar verticalmente el texto), y establecemos el color del texto a negro.
Nota: Es posible que hayas observado que en el HTML se han colocado todos los elementos de lista en una misma línea; esto es porque los espacios/saltos de línea que se colocan entre elementos de bloque crean espacios en la página, igual como lo hacen los espacios entre las palabras, y estos espacios romperían nuestro diseño de menú de navegación horizontal. Así que hemos eliminado esos espacios. Puede encontrar más información sobre este problema (y sus soluciones) en Combatir los espacios entre elementos de bloque colocados en línea.
Resumen
Esperamos que este artículo te haya proporcionado todo lo que necesitas saber acerca de los enlaces... ¡por ahora! En el artículo final de nuestro módulo de aplicar estilo al texto detallaremos cómo usar tipos de letra personalizados para sitios web (o tipos de letra para web, como se les conoce comúnmente).
Anterior
Overview: Styling text
Siguiente
En este módulo
Nociones de aplicación de estilo con CSS a textos y tipos de letra
Aplicar estilo a listas
Aplicar estilo a enlaces
Tipos de letra para web
Composición tipográfica de una página de inicio de una escuela comunitaria

Listas en Css

Un ejemplo sencillo de lista
Para empezar, veamos un ejemplo sencillo de una lista. A lo largo de este artículo veremos listas no ordenadas, listas ordenadas y listas de descripciones; todas tienen características de estilo similares, algunas que son particulares del tipo de lista. El ejemplo sin ningún estilo aplicado está disponible en Github (consulta también el código fuente.)
El HTML para nuestro ejemplo de lista se ve así:
<h2>Shopping (unordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ul>
  <li>Humous</li>
  <li>Pitta</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h2>Recipe (ordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ol>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

<h2>Ingredient description list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<dl>
  <dt>Humous</dt>
  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
  <dt>Pitta</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>
Si accedes al ejemplo en vivo e investigas los elementos de la lista usando las herramientas de desarrollador del navegador, observarás un par de valores de estilo predeterminados:
Los elementos <ul> y <ol> tienen un margin superior e inferior de 16px (1em)  y un padding-left de 40px (2.5em.)
Los elementos de lista <li> no tienen valores de espacio predeterminados.
El elemento <dl> tiene un margin superior e inferior de 16px (1em), pero no tiene ningún padding establecido.
Los elementos <dd> tienen un margin-left de 40px (2.5em).
Los elementos de referencia <p> que hemos incluido tienen un margin superior e inferior de 16px (1em), al igual que los diferentes tipos de lista.
Manejar el espaciado de la lista
Al diseñar listas, es necesario ajustar el diseño para que mantengan los mismos espaciados verticales (a veces denominados ritmos verticales) que el resto de elementos circundantes, como párrafos e imágenes; y el mismo espaciado horizontal entre uno y otro (en Github puedes ver el ejemplo de diseño terminado, y también encontrar el código fuente.)
El CSS que se utiliza para aplicar estilo al texto y al espaciado de texto es el siguiente:
/* Estilos generales */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Estilos para las listas de descripciones */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}
La primera regla establece un tipo de letra para todo el sitio y un tamaño de letra base de 10px. Estos valores se heredan para toda la página.
Las reglas 2 y 3 establecen tamaños de letra relativos para los títulos, diferentes tipos de listas (que heredan los hijos de los elementos de listas), y párrafos. Esto significa que todos los párrafos y todas las listas tendrán el mismo tamaño de letra y el mismo espaciado superior e inferior, lo que ayudará a mantener el ritmo vertical constante.
La regla 4 establece el mismo interlineado (line-height) en los párrafos y los elementos de las listas, de modo que todos los párrafos y todos los elementos individuales de las listas tendrán el mismo espaciado entre las líneas. Esto también ayudará a mantener el ritmo vertical consistente.
Las reglas 5 y 6 se aplican a las listas de descripciones; establecemos la misma altura de interlineado (line-height) en los términos y las descripciones de la lista de descripciones, así como hicimos con los párrafos y los elementos de la lista. De nuevo, ¡la coherencia es buena! También establecemos que los términos de las descripciones tengan un estilo de negrita, para que destaquen visualmente.
Estilos específicos de las listas
Ahora que hemos analizado el espaciado general de las listas, exploremos algunas propiedades específicas de las listas. Para empezar, debes conocer tres propiedades que pueden establecerse en los elementos <ul> o <ol>:
list-style-type: Establece el tipo de viñetas para la lista, por ejemplo, viñetas cuadradas o circulares para una lista no ordenada; números, letras, o números romanos para una lista ordenada.
list-style-position: Establece si las viñetas aparecen dentro de los elementos de la lista o fuera de ellos, antes del inicio de cada elemento.
list-style-image: Te permite usar una imagen personalizada para la viñeta, en lugar de un simple cuadrado o círculo.
El estilo de la viñeta
Como ya sabes, la propiedad list-style-type te permite establecer qué tipo de viñeta usar. En nuestro ejemplo, hemos establecido que se usen números romanos en mayúsculas para la lista ordenada, con:
ol {
  list-style-type: upper-roman;
}
Esto nos da el aspecto siguiente:
Puedes encontrar muchas más opciones si echas un vistazo a la página de referencia de list-style-type.
La posición de la viñeta
La propiedad list-style-position establece si las viñetas aparecen dentro de los elementos de la lista, o fuera de ellos antes del inicio de cada elemento. El valor por defecto es outside, que provoca que las viñetas se sitúen fuera de los elementos de lista, como se observa arriba.
Si estableces el valor en inside, las viñetas se ubican dentro de las líneas:
ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}
Uso de una imagen personalizada como viñeta
La propiedad list-style-image te permite usar una imagen personalizada para tu viñeta. La sintaxis es muy simple:
ul {
  list-style-image: url(star.svg);
}
Sin embargo, esta propiedad es un poco limitada por lo que respecta al control de la posición, el tamaño, etc., de las viñetas. Es más conveniente usar la familia de propiedades background, de la cual aprenderás mucho más en el módulo Aplicar diseño a las cajas.
En nuestro ejemplo terminado, hemos aplicado estilo a la lista no ordenada de este modo (encima de lo que ya has visto arriba):
ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}
Aquí hemos hecho lo siguiente:
Reducir el valor de la propiedad padding-left del elemento <ul> desde su valor predeterminado de 40 px hasta 20 px. A continuación, establecer
la misma cantidad para los elementos de la lista. De este modo, todos los elementos de la lista siguen alineados con los elementos de la lista ordenada y las descripciones, pero los elementos de lista tienen algo de relleno (padding) para poder insertar las imágenes de fondo. Si no hiciéramos esto, las imágenes de fondo se solaparían con el texto de los elementos de la lista y quedaría un aspecto desordenado.
Establecer la propiedad list-style-type en none, para que no aparezca la viñeta predeterminada. En lugar de ello, vamos a utilizar las propiedades background para manejar las viñetas.
Insertar una viñeta en cada elemento de la lista sin ordenar. Las propiedades relevantes son las siguientes:
background-image: Proporciona la ruta que apunta al archivo de imagen que quieres usar como viñeta.
background-position: Define en qué lugar del elemento seleccionado va a aparecer la imagen; en este caso le decimos 0 0, que significa que la viñeta va a aparecer en el extremo superior izquierdo de cada elemento de lista.
background-size: Establece el tamaño de la imagen de fondo. En teoría queremos que las viñetas sean del mismo tamaño que los elementos de lista (o solo un poco menores o mayores). Utilizamos un tamaño de 1.6rem (16px), que encaja muy bien con el área de relleno de 20px que hemos elegido para que quepa la viñeta; 16 px más 4 px de espacio entre la viñeta y el texto del elemento de lista funciona bien.
background-repeat: Por defecto, las imágenes de fondo se repiten hasta rellenar todo el espacio de fondo disponible. En este caso solo queremos una copia de la imagen, de modo que establecemos el valor de esta propiedad en no-repeat.
Esto nos da el resultado siguiente:
Propiedad abreviada list-style
Es posible configurar las tres propiedades anteriores con una sola propiedad abreviada, list-style. Por ejemplo, observa el CSS siguiente:
ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}
Podría reemplazarse por esto:
ul {
  list-style: square url(example.png) inside;
}
Los valores pueden escribirse en cualquier orden, y puedes usar uno, dos o los tres (los valores por defecto que se utilizan para las propiedades que no están incluidas son disc, none y outside). Si se especifican tanto type como image, el tipo se usa como una segunda opción en el caso de que la imagen no sea posible cargar la imagen por cualquier motivo.
Control de numeración de las listas
A veces puedes querer numerar las listas de manera diferente, por ejemplo, que empiece con un número que no sea el 1, o que cuente hacia atrás, o que cuente a saltos de más de una unidad. HTML y CSS tienen algunas herramientas para ayudarte con esto.
start
El atributo start te permite empezar la numeración de la lista en un número diferente de 1. Observa el ejemplo siguiente:
<ol start="4">
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>
Aprendizaje activo: aplicar estilo a una lista anidada
En esta sesión de aprendizaje activo, queremos que tomes lo que has aprendido arriba y pruebes a aplicar estilo a una lista anidada. Te hemos provisto con un HTML, y queremos que hagas lo siguiente:
Poner viñetas cuadradas en la lista no ordenada.
Establecer un interlineado de 1,5 con respecto al tamaño de la letra tanto para la lista ordenada como para la lista no ordenada.
Poner letras minúsculas en la lista ordenada.
Juega con el ejemplo, libremente y cuanto quieras, experimenta con los tipos de viñetas, los espacios, o cualquier otra cosa con que te encuentres.
Si te equivocas, puedes volver a empezar con el botón Reinicio. Si te quedas encallado, pulsa el botón Mostrar la solución para ver una posible solución.