CSS
Selectores
A continuación tienes los distintos tipos de selectores que se pueden utilizar para definir una
regla CSS. Los selectores sirven para identificar los elementos a los que se aplicará el formato
definido por la lista de declaraciones. Describiré los selectores de más generales a más
específicos (o lo que es lo mismo, de menor a mayor prioridad).
Selector universal
Se define con * y se aplica a todos los elementos de la página:
*{
margin:0;
font-family: Verdana;
}
Como puedes ver en el ejemplo, suele utilizarse para configurar los márgenes, la fuente y poco
más.
Selector de etiqueta HTML
Indica el estilo que se va a aplicar a un elemento o etiqueta concreto.
h1,h2,h3,h4,h5,h6{
font-size: large;
}
Como muestra el ejemplo en los selectores quitamos el < y el > de la etiqueta.
Selector de clase
Es común añadir a los elementos HTML un atributo class que indica las clases a las que
pertenece el elemento. Esto nos permite tratar a esa “clase” de elemento de una forma
particular, tanto en el estilo CSS como en la programación con JavasScript. Desde el punto de
vista de las CSS, podemos aplicar una regla a todos los elementos que sean de una
determinada clase.
.cabecera{
color:blue;
}
En el ejemplo se pondrán en color azul todos los elementos (sean del tipo que sean) que sean
de la clase cabecera. Es equivalente a *.cabecera. Además, puede combinarse con un
elemento concreto:
h1.cabecera{
text-align: center;
}
1
En este último ejemplo se establece una alineación de párrafo a todos los elementos <h1> que
sean de la clase cabecera. Hay que tener cuidado de no dejar ningún espacio entre los
nombres y el punto, ya que ese espacio tiene significado.
Selector de identificador
Permiten aplicar un estilo único al único elemento de la página que tiene un determinado
identificador (especificado con el atributo id). El selector se especifica con # y el nombre del
identificador. Al igual que con las clases, es muy importante el uso de los espacios en blanco.
p#destacado{
background-color: yellow;
}
En este caso, hemos puesto un color de fondo amarillo al único párrafo que hemos
identificado como destacado.
Selectores descendentes y adyacentes
Estos selectores permiten aplicar seleccionar elementos contenidos dentro de otros de
acuerdo a la estructura en árbol del DOM. Si separamos dos selectores por un espacio en
blanco, entonces estaremos aplicando la regla a todos los descendientes del primer selector:
section p{
text-family: Verdana;
}
Este selector se aplica a todos los elementos <p> que son descendientes de un elemento
<section> (recuerda que pueden ser descendientes de cualquier nivel).
Podemos mezclar selectores descendentes con los de clase o identificador:
section .error{
color: red;
}
En este caso, se escribirá en rojo cualquier elemento de la clase error que sea descendiente de
un elemento <section>. Aquí vemos la importancia de usar correctamente los espacios en
blanco.
Si en lugar de aplicarlo a cualquier descendiente de un elemento lo queremos aplicar solo a
sus hijos (es decir, a sus descendientes directos), entonces usaremos el símbolo >:
section>p{
font-family: Verdana;
}
En este caso, la fuente Verdana solo se utiliza en los elementos <p> que son descendientes
directos de <section>.
También podemos seleccionar elementos hermanos, es decir, elementos que aparecen justo
después de otros elementos. Para ello utilizaremos el símbolo +. Por ejemplo:
2
h1 + p{
text-indent: 1.5em;
}
Este selector indenta el primer párrafo que aparece justo después de un encabezado <h1>.
Selectores de atributos
Estos selectores se utilizan para seleccionar elementos en función de sus atributos. Hay cinco
tipos:
• [atributo]: elementos que tienen definido el atributo llamado atributo,
independientemente de su valor.
• [atributo=valor]: elementos que tienen un atributo llamado atributo con el valor
especificado.
• [atributo=valor]: elementos que tienen un atributo llamado atributo y al menos uno
de los valores del atributo es el valor especificado.
• [atributo^=valor]: elementos que tienen un atributo llamado atributo y cuyo valor
empieza por el valor especificado.
• [atributo$=valor]: elementos que tienen un atributo llamado atributo y cuyo valor
termina por el valor especificado.
Pseudoclases
Existen selectores especiales para especificar elementos que tienen unas determinadas
propiedades. Son como clases “virtuales”, ya que no se especifican en el HTML, pero
representan las posiciones o estados en los que se puede encontrar un elemento mientras se
visualiza en el navegador.
Por ejemplo, si queremos aplicarlo solo si un elemento es el primer hijo de su padre, entonces
necesitaremos utilizar la pseudoclase first-child:
ul li:first-child{
color: green;
}
En este caso, solo el primer elemento <li> de una lista de viñetas (<ul>) aparecerá en color
verde.
Existen otras pseudoclases que nos ayudan a seleccionar a un hermano concreto de entre
todos los hijos de un elemento:
• :nth-child(n): representa el n-ésimo hermano. Permite incluir una forma más
compleja, como :nth-child(even) o :nth-child(odd), que representa los hijos que
representan posiciones pares o impares (por ejemplo, para hacer que las filas impares
de una tabla tengan distinto color de fondo).
• :nth-last-child(n): lo mismo que el anterior, pero contando desde el final.
Las pseudoclases anteriores suelen utilizarse, por ejemplo, para crear tablas cebreadas, donde
las filas pares e impares tienen apariencia diferente.
3
Hay también pseudoclases dinámicas, que indican el estado de los elementos cuando el
usuario interactúa con ellos:
• :hover: se utiliza para establecer el estilo cuando el usuario coloca el ratón sobre el
elemento.
• :active: se utiliza para establecer el estilo cuando el usuario pincha sobre el elemento
o mantiene el botón del ratón pulsado sobre él.
• :focus: se utiliza para establecer el estilo cuando el elemento tiene el foco.
Propiedades del texto
Las principales propiedades que se pueden emplear en los elementos que tienen texto son las
siguientes:
• color: indica el color de la fuente. Valores para el color rojo y sintaxis: RGB(255, 0, 0);
red; #FF0000; #F00 (versión reducida en hexadecimal).
• font-family: tipo de fuente (letra del tipo: verdana, arial, ‘times new roman’). Visitar
https://www.google.com/fonts para más información sobre fuentes.
• font-size: tamaño de la fuente. Mejor si es relativa: em, porcentaje (%). Absoluta seria
en pixeles (px).
• font-style: para letras en cursiva: normal, italic.
• font-weight: para letras en negrita o letras delgadas: normal, bold, bolder, lighter…
• text-decoration: para añadir subrayados y tachados: none, underline, line-through
(tachado), overline…
• text-transform: permite pasar a mayúsculas (uppercase) o a minúsculas (lowercase).
• letter-spacing y word-spacing: permite indicar el espacio entre letras y palabras.
• line-height: espacio entre líneas.
• text-align: alineación horizontal del texto en un elemento que lo contiene: left, right,
center, justify.
• text-indent: para añadir indentación a un bloque de texto. El valor es una unidad de
medida (em, porcentaje, px).
Posicionamiento de elementos
Modelo flexible
El posicionamiento flexible o flexbox permite acomodar los elementos de una página según
cambien las dimensiones y orientación de la página. Por tanto, nos permite hacer diseño
adaptativo para que nuestras páginas web se visualicen correctamente en cualquier
dispositivo. Las ventajas son un código más legible y simple, donde podemos, por ejemplo,
cambiar el orden de los elementos independientemente del orden en el código HTML. El
modelo flexible es apropiado para colocar pequeños componentes de una aplicación web. Para
hacer la disposición general de los elementos de una página se está imponiendo el modelo de
rejilla (Bootstrap).
La idea principal es que un contenedor flexible expande o comprime sus elementos para
rellenar el espacio libre o ajustarse al área disponible. De esta forma, tendremos un
contenedor flex (flex container) y una serie de elementos flex contenidos (flex ítem). Para
definir el contenedor utilizaremos la propiedad display: flex. Todos los elementos contenidos
pasarán a tener la condición de elementos flex.
4
En este modelo no se utilizan conceptos como ordenamiento horizontal o vertical, sino que se
define un eje principal (main axis) y otro secundario (cross axis). De esta forma, el diseño se
ajusta fácilmente a los cambios de orientación del dispositivo. Por cada eje podremos situar
componentes en su inicio (main-start o cross-start) y final (main-end o cross-end).
flex container
1 2
flex item flex item
Ilustración 1. Conceptos de Flexbox
Para mostrar las características de Flexbox partiremos del código del fichero que usaremos
como ejemplo. Comenzaremos con cuatro contenedores y luego iremos añadiendo más.
Dirección de los elementos
La propiedad flex-direction especifica la dirección del eje principal y, por tanto, cómo se
colocan los elementos dentro del contenedor. Podemos utilizar los valores: row (fila), row-
reverse (fila-invertida), column (columna) o column-reverse (columna invertida).
Ilustración 2. Propiedad flex-direction en Flexbox
5
Ajuste en el eje principal
La propiedad flex-wrap establece si es necesario ajustar los elementos para que quepan en
una sola fila (o columna). Los valores posibles son nowrap, que ajusta los elementos a una
línea; wrap, que los distribuye sin cambiar su tamaño; y wrap-reverse, que es similar al
anterior, pero en orden inverso de filas. Para comprobarlo en el código de ejemplo que
realizamos en clase. El resultado a continuación:
Ilustración 3. Propiedad flex-wrap
Alineación del contenido
Con la propiedad justify-content podemos alinear los elementos respecto al eje principal del
contenedor. De esta forma decidimos qué hacer con el espacio restante. Los posibles valores
son los siguientes: flex-start, que junta los elementos al principio del eje; flex-end, que junta al
final; center para centrarlos; space-beetween, que reparte el espacio entre los elementos
dejando los extremos pegados al borde; y space-around, donde todo el espacio restante se
reparte alrededor de cada elemento. El resultado a continuación:
Ilustración 4. Propiedad justify-content
6
Ajuste en el eje secundario
Para ajustar los elementos respecto al eje secundario contamos con la propiedad align-items.
En este caso, los valores posibles son strech para ocupar todo el ancho; flex-start y flex-end
para alinear al principio y final de este eje; y center para centrar. El resultado a continuación:
Ilustración 5. Propiedad align-items
Propiedades de los elementos
Hasta ahora hemos visto propiedades para configurar el contenedor principal, pero también
hay propiedades muy interesantes para los elementos que nos permiten ordenarlos e indicar
cómo ocupan el espacio. Estas propiedades son:
• order: indica el orden en que aparece el elemento dentro del contenedor. De esta
forma no es necesario cambiar el código HTML para reordenar los elementos, ya que
por defecto se muestran en el orden en que aparecen dentro del código. Simplemente
se indica un número de orden, por ejemplo, order:2.
• flex-grow: esta propiedad establece el factor de crecimiento del elemento. Es decir,
cómo crece el elemento con relación a los otros. Por ejemplo, si indicamos un flex-
grow:2, entonces el elemento crecerá el doble que los demás cuando el contenedor
tenga espacio libre.
• flex-shrink: análoga a la propiedad anterior, define el factor de encogimiento. Es decir,
cuánto tamaño se reduce con relación al resto.
• flex-basis: indica el tamaño por defecto (ancho) del elemento antes de que el espacio
libre sea distribuido. Normalmente se deja en el valor por defecto flex-basis:auto.
Existe una forma abreviada de las tres últimas propiedades llamada flex. Se le indican tres
valores que representan el flex-grow, flex-shrink y flex-basis. Por ejemplo: flex: 1 1 auto.
Resultado del ejemplo donde reordenamos e indicamos que uno de los elementos crezca el
doble que el resto:
Ilustración 6. Propiedades de los elementos en flex-box
7
8
