Otros estilos CSS¶
Veremos a continuación una serie de propiedades que podemos aplicar a diferentes elementos CSS que no se han recogido en los documentos anteriores. como estilos específicos para listas, enlaces o tablas.
1. Estilos para listas¶
Ya hemos visto en documentos anteriores que existen diferentes tipos de listas HTML (ordenadas, no ordenadas y de definición) y que las etiquetas disponen de una serie de atributos para, por ejemplo, elegir el tipo de numeración (letras, números romanos, etc), el número de comienzo, tipo de viñeta, etc.
Mediante CSS podemos aplicar los estilos generales que hemos visto hasta ahora para texto y párrafo (tipo de letra, interlineado, etc), pero también existen una serie de propiedades específicas para el estilo de las listas en sí.
list-style-type
Esta propiedad permite elegir el tipo de viñeta (listas no ordenadas) o numeración (listas ordenadas) que aplicar en las listas. Sería la alternativa al atributo type en las etiquetas ol o ul.
En el caso de listas no ordenadas, algunos de los valores posibles son disc, circle, square... Para las listas ordenadas, podemos elegir entre numeración normal (decimal), romanos en minúscula (lower-roman), en mayúscula (upper-roman), letras en minúscula (lower-alpha), mayúscula (upper-alpha), etc. Aquí podéis encontrar información más detallada sobre los valores de esta propiedad.
En este ejemplo, definimos que las listas ordenadas estarán definidas por números romanos en mayúscula:
ol
{
list-style-type: upper-roman;
}
list-style-position
Esta propiedad define la posición de la viñeta (o numeración) respecto al contenido del ítem. Sus valores pueden ser inside (la viñeta o numeración se añade junto al contenido del ítem, lo que provoca que todo quede alineado a la izquierda), o outside (la viñeta o numeración queda fuera del ítem, con lo que las viñetas se alinean por su cuenta, y los items por la suya. Es el valor por defecto).
Por ejemplo, esta lista ordenada con números romanos queda definida con posición inside:
ol
{
list-style-type: upper-roman;
list-style-position: inside;
}
...
<ol>
<li>Uno</li>
<li>Este es el dos</li>
<li>Este el tres</li>
<li>Y, para finalizar, este es el cuatro</li>
</ol>
Obtendríamos este resultado:
- Uno
- Este es el dos
- Este el tres
- Y, para finalizar, este es el cuatro
En cambio, si la definimos con posición outside (o no indicamos posición)...
ol
{
list-style-type: upper-roman;
}
... obtendríamos este otro resultado:
- Uno
- Este es el dos
- Este el tres
- Y, para finalizar, este es el cuatro
list-style-image
Esta propiedad permite definir nuestra propia imagen como viñeta, y utilizarla en listas no ordenadas.
ul
{
list-style-image: url("imagenes/estrella.svg");
}
Sin embargo, la propiedad está algo limitada en algunos aspectos. Por ejemplo, no podemos controlar el tamaño de la imagen a mostrar (tendríamos que guardarla ya escalada al tamaño que queramos mostrar), y tampoco podríamos controlar su posición. Como alternativa, podemos definir un estilo de viñeta nulo (none) sobre la lista en general, y poner un estilo sobre cada item de la lista (li) indicando que queremos ponerle una imagen de fondo sin repetir, que hará de viñeta. En este caso, podemos especificar la posición y tamaño de la imagen. Por ejemplo:
ul
{
list-style-type: none;
}
ul li
{
padding-left: 10px;
background-image: url("imagenes/estrella.svg");
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
}
1.1. Listas y posicionamiento¶
Es muy habitual utilizar listas para definir los elementos de un menú de navegación (dentro de una etiqueta nav, por ejemplo). En este caso, los elementos suelen estar adyacentes, uno junto a otro. Pero, como hemos visto, las listas son elementos de bloque en los que, por defecto, los ítems se colocan uno debajo del otro. Sin embargo, podemos utilizar la propiedad display de los items de la lista para indicar que queremos que se comporten como elementos en línea. Además, podemos definir la propiedad list-style-type como none para que no tengan ningún tipo de viñeta. Uniendo ambas cosas, podemos definir un menú de navegación horizontal. Aquí vemos un ejemplo:
nav
{
background-color: #CCC;
}
nav ul.navegacion
{
list-style-type: none;
text-align: center;
}
nav ul.navegacion li
{
display: inline;
margin: 20px;
}
Y lo podríamos aplicar de este modo a una lista en una barra de navegación:
<nav>
<ul class="navegacion">
<li>Inicio</li>
<li>Preguntas frecuentes</li>
<li>Tienda online</li>
<li>Contacto</li>
</ul>
<nav>
El resultado sería algo así:
Ejercicio 1
En este enlace puedes descargar el contenido HTML de una página web que simula la página de inicio de un instituto. Hay un título principal de la página, un menú de navegación, un apartado de oferta formativa, y otro de novedades. Finalmente, hay una sección de pie de página con información de contacto del instituto. Se propone añadir el CSS necesario (desde un archivo aparte) para que se vea de este modo:
Algunas pistas
- El color de fondo del encabezado y el pie es
#84250C. - El encabezado está ubicado pegado a la esquina superior izquierda, y el pie a la esquina inferior izquierda.
- La zona entre encabezado y pie tiene un margen superior de 150px, y lateral de 20% a cada lado.
2. Estilos para enlaces¶
Los enlaces son un elemento muy potente en una página web, pero su estilo es difícil de controlar. De hecho, nada más poner el enlace, se nos verá de color azul en la página, y cuando hagamos clic sobre él, el resto de veces aparecerá de color morado, indicando que es un enlace que ya hemos visitado antes.
Imaginemos que queremos hacer una página web con el color de fondo azul. ¿Qué pasaría con los enlaces? Apenas se verían. O incluso si usamos otros colores, puede que el color de los enlaces desentone con lo que hay alrededor. Cambiar el estilo de los enlaces mediante CSS es algo más complicado que para un elemento normal (como un párrafo, por ejemplo), ya que los enlaces tienen diferentes estados, y debemos cambiar el estilo para cada uno de esos estados. Para hacer esto, se utilizan unos elementos de CSS llamados pseudo-clases, que complementan a un selector para indicar una característica particular del mismo.
El estilo para el estado normal de un enlace se cambia con la pseudo-clase :link, formando el selector a:link. Por ejemplo, si queremos poner el texto del enlace de color blanco:
a:link { color: white }
Pero si hacemos clic en el enlace, como ya pasará a ser un enlace visitado, la próxima vez que carguemos la página ya no aparecerá blanco, sino morado (color por defecto para enlaces visitados). Para el estilo para enlaces visitados, usamos el selector a:visited, que contiene la pseudo-clase :visited:
a:visited { color: white }
Adicionalmente, el enlace tiene tres estados más sobre los que podemos actuar: cuando pasamos el ratón por encima del enlace, sin pincharlo (se accede con el selector a:hover), cuando hacemos clic en el enlace (se accede con el selector a:active) y cuando establecemos el foco en el enlace a través del teclado (selector a:focus, aunque éste apenas se utiliza).
Por ejemplo, si queremos que, en cualquier estado, los enlaces se muestren de color blanco, tendríamos que añadir estas reglas a nuestro CSS (en realidad bastaría con las dos primeras, si no queremos hacer nada al usar el ratón en los enlaces):
a:link { color: white; }
a:visited { color: white; }
a:focus { color: white; }
a:hover { color: white; }
a:active { color: white; }
O bien una sola regla conjunta:
a:link, a:visited, a:focus, a:hover, a:active { color: white; }
La primera opción es más versátil si luego queremos añadir alguna opción extra en algún estado (por ejemplo, cambiar el tamaño de la letra al pasar el ratón por encima). Es importante mantener el orden al definir estas reglas, porque son acumulativas y se van aplicando una tras otra. Así, cuando hacemos clic en un enlace (selector :active), también estamos encima de él (selector hover).
También podemos, entre otras cosas, actuar sobre el subrayado que hay en los enlaces, con la propiedad text-decoration. Si por ejemplo queremos que los subrayados se quiten al pasar el ratón por encima, haríamos:
a:hover { color: white; text-decoration: none; }
Ejercicio 2
Vamos a seguir modificando el archivo harrypotter.html que hemos venido haciendo en ejercicios anteriores. Añade estos estilos:
- Haz que todo el documento (selector body) tenga tipo de letra Arial y color de fondo azul claro (en formato hexadecimal, busca un tono que te guste).
- Haz que los enlaces (para el índice inicial) tengan letra de color blanco, sin subrayado, y que al pasar el ratón por encima, o hacer clic en el enlace, la letra cambie a color naranja y subrayado.
2.1. Añadir iconos en enlaces¶
Podemos añadir un icono o imagen pequeña como parte de un enlace (junto con el texto) de varias formas. Por ejemplo, añadiendo la correspondiente etiqueta img dentro del enlace, y posicionándola junto con el texto. Alternativamente, podemos definir el icono del enlace a través de CSS:
a
{
background: url('imagenes/icono.png') no-repeat 100% 0;
background-size: 2rem;
padding-right: 2.5rem;
}
Este estilo hará que se cargue la imagen icono.png pegada al borde derecho del enlace (100% del ancho), y a 0 píxeles del borde superior, con un escalado (2rem) y un padding o separación entre el texto y el icono.
2.2. Definir enlaces con apariencia de botones¶
Jugando con propiedades como el color de fondo o los bordes podemos definir enlaces que, en determinadas ubicaciones, tengan una apariencia de botones. Por ejemplo, en sesiones anteriores hemos definido barras de navegación utilizando listas:
nav
{
background-color: darkgrey;
}
nav ul.navegacion
{
list-style-type: none;
text-align: center;
}
nav ul.navegacion li
{
display: inline;
margin: 20px;
}
Podemos definir enlaces en cada uno de los items de la lista de navegación:
<nav>
<ul class="navegacion">
<li><a href="...">Inicio</a></li>
<li><a href="...">Preguntas frecuentes</a></li>
<li><a href="...">Tienda online</a></li>
<li><a href="...">Contacto</a></li>
</ul>
<nav>
Y añadir estilos adicionales a los anteriores para concretar cómo se van a mostrar estos enlaces. Por ejemplo, podemos cambiar su color de fondo cuando pasemos el ratón por encima:
nav ul li a
{
text-decoration: none;
display: inline-block;
padding: 1rem;
color: black;
}
nav ul li a:hover
{
background: lightgrey;
}
nav ul li a:active
{
background: white;
}
Ejercicio 3
Descarga esta plantilla de ejercicio. Verás una página index.html con una lista de enlaces (vacíos), y una carpeta con 3 iconos. Se pide que añadas un documento estilos.css enlazado desde la página anterior para mostrar una apariencia como esta:
Al pasar el ratón por encima de cada item, se cambiará el color de fondo como se muestra en el caso de Twitter en el ejemplo (puedes elegir los colores que quieras).
3. Estilos para tablas¶
En documentos anteriores, cuando hemos visto cómo definir tablas en HTML, comentamos que existen algunos atributos que nos permitían modificar algunas propiedades de las tablas, tales como su borde o su anchura. Sin embargo, la mejor forma de definir la apariencia visual de un elemento no es a través de sus atributos HTML, sino de los estilos CSS.
Podemos utilizar la propiedad border de CSS para definir el borde tanto de toda la tabla (borde alrededor de los límites de la tabla) como de las casillas que la componen (elementos th y td).
table, th, td
{
border: 1px solid black;
}
Esto dejará una apariencia como la que tendríamos poniendo table border="1" en la propia etiqueta table. Sin embargo, ya vimos al tratar estos bordes en HTML que la apariencia final deja un borde doble, debido a que todos los elementos (tanto la tabla en sí como las celdas) tienen un borde. Para evitar esto y dejar un único borde en cada elemento, podemos colapsar estos bordes, a través de la propiedad border-collapse:
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
}
Nota
La propiedad border-collapse se puede aplicar únicamente a la tabla (etiqueta table), no es necesario aplicarla también a las casillas de la misma.
En lo que respecta a la anchura (width), podemos especificar una anchura general para la tabla en sí:
table
{
width: 60%;
}
O también para alguna de sus columnas (previamente identificada con algún tipo de clase o id):
td.primera
{
width: 50%;
}
td.segunda
{
width: 30%;
}