Introducción
En este capítulo, vamos a estudiar conceptos básicos de
CSS y las nuevas técnicas de
CSS3 ya disponibles para presentación y estructuración. También aprenderemos cómo utilizar los nuevos selectores y pseudo clases que hacen más fácil la selección e identificación de elementos
HTML.
Es importante destacar antes de comenzar que no todas las funcionalidades de
CSS3 se encuentran implementadas en las últimas versiones de los navegadores y algunas de ellas se encuentran aún en estado experimental. Por esta razón, en ocasiones estos nuevos estilos deberán ser precedidos por prefijos tales como
–moz- o -webkit- para ser efectivamente interpretados.
Estructura básica
Con respecto a la estructura, básicamente cada navegador ordena los elementos por defecto de acuerdo a su tipo:
block (bloque) o
inline (en línea). Esta clasificación está asociada con la forma en que los elementos son mostrados en pantalla.
- Los elementos block se posicionan uno sobre otro hacia abajo en la página. Por ejemplo, los elementos tipo div se posicionan por defecto como block.
- Los elementos inline se posicionan uno al lado del otro en la misma línea y sin ningún salto de línea a menos que ya no haya más espacio horizontal para ubicarlos. Por ejemplo, los elementos tipo span se posicionan por defecto como inline.
Casi todos los elementos estructurales en nuestros documentos serán tratados por los navegadores como elementos
block por defecto. Esto significa que cada elemento HTML que representa una parte de la organización visual (
section, nav, header, footer, div, etc.) será posicionado debajo del anterior, y si no queremos que sea así debemos indicarlo mediante estilos.
Estas propiedades se definen mediante el estilo
display, que además de
block e
inline, también puede tener otros valores, como por ejemplo:
- table: estilo tabla
- list-item: estilo ítem de lista li
- inline-block: estilo en línea con ancho determinado
- flex: estilo flexible, utilizado sobre todo en diseños adaptados a dispositivos
- none: no mostrar el elemento
De la misma manera que utilizamos
display para estructurar nuestro documento, utilizando la propiedad
float podemos hacer que nuestros elementos pasen de comportarse como una caja (
box) a "flotar" en nuestro documento, para permitirnos colocar unos al lado de otros. Esta propiedad tomará los valores
none (se comportará como una caja),
left (se alineará a la izquierda o
right (se alineará a la derecha).
Más adelante profundizaremos en estas propiedades mediante un ejemplo práctico.
Estilos en línea
Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de las etiquetas por medio del atributo
style. El siguiente ejemplo muestra un código simple con un elemento
p modificado por el atributo
style con el valor
font-size: 20px. Este estilo cambia el tamaño por defecto del texto dentro del elemento
p a un nuevo tamaño de 20 pixeles.
Ver ejemplo de código
La técnica anterior es una buena manera de probar estilos y obtener una vista rápida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento, ya que tendríamos que escribir y repetir cada estilo en cada uno de los elementos que queremos modificar.
Estilos embebidos
Una alternativa mejor es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los elementos HTML correspondientes:
Ver ejemplo de código
Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código más consistente y actualizable, pero nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro sitio web.
Hojas de estilo en archivos externos
La solución más óptima consiste en
mover todos los estilos a un archivo externo y luego utilizar el elemento
link dentro de la etiqueta
head para insertar este archivo dentro de cada documento que los necesite.
Este método nos permite cambiar los estilos por completo simplemente incluyendo un archivo diferente. También nos permite modificar o adaptar nuestros documentos a cada circunstancia o dispositivo, como veremos más adelante:
Ver ejemplo de código
Y el código del archivo CSS correspondiente sería éste:
Ver ejemplo de código
El lugar óptimo para almacenar nuestro(s) archivo(s) de estilos será
dentro de una subcarpeta llamada css.
Referencias entre HTML y CSS
Existen varios métodos para seleccionar qué elementos HTML serán afectados por unas determinadas reglas CSS:
- referencia por la palabra clave del elemento
- referencia por el atributo id
- referencia por el atributo class
Referenciando con palabra clave
Ver ejemplo de código
Esta técnica es útil cuando quiero referenciar todos los elementos del mismo tipo, pero para seleccionar un elemento HTML específico desde las reglas de nuestro archivo CSS, debemos usar
id o
class.
Referenciando con el atributo id
El atributo
id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser duplicado. Este nombre debe ser único en todo el documento.
Para referenciar un elemento en particular usando el atributo
id desde nuestro archivo CSS la regla debe ser declarada con el símbolo
# seguido del valor que usemos para identificar el elemento:
Ver ejemplo de código
Y en nuestro archivo HTML:
Ver ejemplo de código
El resultado de este procedimiento es que cada vez que hacemos una referencia usando el identificador
texto1 en nuestro archivo CSS, el elemento con ese valor de
id será modificado, pero el resto de los elementos
p, o cualquier otro elemento en el mismo documento, no serán afectados.
Dada su especificidad, el atributo
id es de hecho más apropiado para referencias en
Javascript, como veremos más adelante o para referencias de enlaces mediante anclas, como vimos en el apartado de Etiquetas.
Referenciando con el atributo class
La mayoría del tiempo, en lugar de utilizar el atributo
id para propósitos de estilos es mejor utilizar
class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que comparte un diseño similar.
Para trabajar con el atributo class, debemos declarar la regla CSS con
un punto . seguido del nombre de la clase:
Ver ejemplo de código
Y en nuestro archivo HTML:
Ver ejemplo de código
La ventaja de este método es que insertar el atributo
class con el valor
texto1 será suficiente para asignar estos estilos a cualquier elemento que queramos, sin afectar al resto del mismo tipo. De este modo, los dos primeros elementos de tipo
p anteriores comparten la misma regla y ambos serán afectados por el estilo
texto1, mientras que último elemento
p conservará los estilos por defecto otorgados por el navegador.
También es posible utilizar referencias más complejas, como la siguiente en la cual creamos una regla que referencia la clase llamada
texto1 pero solo para los elementos de tipo
p. Si cualquier otro elemento tiene el mismo valor en su atributo class no será modificado por esta regla en particular.
Ver ejemplo de código
Referenciando con otros atributos
Aunque los métodos de referencia estudiados anteriormente cubren un variado espectro de situaciones, a veces no son suficientes para encontrar el elemento exacto. CSS3 incorpora nuevas formas de referenciar elementos HTML. Una de ellas es el
selector de atributo, que nos permite referenciar un elemento no solo por los atributos
id y
class sino también
a través de cualquier otro atributo:
Ver ejemplo de código
La primera línea del código anterior cambia solo elementos
<p> que tienen un atributo llamado
name, mientras que la segunda cambia los elementos
<p> que tienen un atributo llamado
name cuyo valor es igual a
mitexto.
Además, utilizando expresiones regulares como las que estudiaremos en
JavaScript, es posible combinar el operador
"=" para hacer selecciones más específicas:
Ver ejemplo de código
En el ejemplo anterior:
- La regla con el selector ^= será asignada a todo elemento <p> que contiene un atributo name con un valor comenzado en “mi” (por ejemplo, “mitexto”, “micasa”).
- La regla con el selector $= será asignada a todo elemento <p> que contiene un atributo name con un valor finalizando en “mi” (por ejemplo “textomi”, “casami”).
- La regla con el selector *= será asignada a todo elemento <p> que contiene un atributo name con un valor que incluye el texto “mi” (“textomicasa”, "casami", "micasa").
Referenciando con pseudo clases
CSS3 también incorpora nuevas pseudo clases que hacen la selección aún más específica. El ejemplo siguiente contiene cuatro elementos
<p> que, considerando la estructura HTML, son hermanos entre sí e hijos del mismo elemento
<div>. Usando pseudo clases podemos aprovechar esta organización y referenciar un elemento específico sin importar cuánto conocemos sobre sus atributos y el valor de los mismos:
Ver ejemplo de código
Ver ejemplo de código
Lo que la primera
pseudo clase está realmente indicando es algo como: “el hijo en la posición...” por lo que el número entre paréntesis será el número de la posición del hijo (el índice). De este modo, la primera regla anterior está referenciando cada segundo elemento
<p> encontrado en el documento, mientras que las siguientes referencian, respectivamente, las ocurrencias impares (1 y 3) y pares (2 y 4) de los elementos
p.
Existen otras importantes pseudo clases relacionadas con esta última, como
first- child,
last-child y
only-child. La pseudo clase
first-child referencia solo el primer hijo,
last-child referencia solo el último hijo, y
only-child afecta un elemento siempre y cuando sea el único hijo disponible. Estas pseudo clases en particular no requieren palabras clave o parámetros, y se implementarían de la siguiente forma:
Ver ejemplo de código
Otras pseudo clases bastante utilizadas son las siguientes:
Ver ejemplo de código
También es posible referenciar
a todos los elementos mediante el selector universal
* para, por ejemplo, eliminar todos los márgenes por defecto. De la misma manera, se puede referenciar a todos los elementos del documento
menos a los de un tipo o clase determinados mediante el selector
not:
Ver ejemplo de código
Para finalizar, existen nuevos tipos de selectores que utilizan os símbolos
>,
+ y
~ para especificar la relación entre elementos.
Ver ejemplo de código
El selector
> está indicando que el elemento a ser afectado por la regla es el elemento de la derecha cuando tiene al de la izquierda como su padre. En este caso, modifica los elementos
p que son hijos de un elemento
&div. En este caso, afectaría al elemento
p de
clase mitexto2 que sea hijo de un elemento de tipo
div.
El selector
+ referencia al elemento de la derecha cuando es inmediatamente precedido por el de la izquierda. Ambos elementos deben compartir el mismo padre. La regla por tanto afecta al elemento
p que se encuentra ubicado después de otro elemento
p con la clase
mitexto2. En el código HTML con cuatro elementos tipo
p> anterior, el texto
en el tercer elemento p aparecerá en color rojo debido a que este elemento
p en particular está posicionado inmediatamente después del elemento
p identificado con el valor
mitexto2 en su atributo
class.
El selector
~ es similar al anterior pero el elemento afectado no necesita estar precediendo de inmediato al elemento de la izquierda. Además, más de un elemento puede ser afectado. El estilo será aplicado a todos los elementos
p que son hermanos y se encuentran luego del elemento
p identificado con el valor
mitexto2 en su atributo
class. La regla afectaría por tanto al tercer y cuarto elemento
p de nuestro último ejemplo HTML.
Referenciando con pseudo elementos
CSS· también permite utilizar pseudo-elementos o lo que es lo mismo, elegir cierta parte de un elemento:
Ver ejemplo de código
Conclusiones
Como resumen de lo anterior y del final del capítulo, se recomienda al alumno consultar la
Página de Referencia oficial de CSS de MDN y la visualización de los siguientes videos, extraídos del canal de YouTube
pildorasinformáticas:
Ver vídeo
Ver vídeo