CSS
Frontend - FINEST 2024
ISBO DGETP-UTU
Las hojas de estilo, o archivos .css, son los que aplican los estilos a
un sitio web en forma de cascada, leyendo el código de arriba
hacia abajo.
Anatomía de una regla CSS
El selector indicará a qué componente del HTML se le aplicarán
las propiedades escritas.
Dentro de la declaración tendremos que indicar una propiedad y
un valor a modificar. Las propiedades que podemos alterar son
varias, algunas dependen de que otras propiedades tengan
ciertos valores específicos.
Aplicar un archivo CSS en HTML
Aplicar estilos a los componentes de un HTML puede realizarse de varias maneras.
1. Añadir mediante enlace externo:
Es la forma más recomendada y conveniente de hacerlo, pues los estilos son escritos en
un documento aparte. Para hacerlo, se tiene que crear un archivo .css junto a nuestro
[Link], el nombre de este archivo suele ser: [Link]. Luego lo referimos en el
<head>, indicando la ruta correspondiente.
2. Se puede agregar como estilo embebido a una etiqueta HTML:
Si bien la propiedad se aplica correctamente, escribir de esta manera no es para nada
practico, sobre todo si pensamos aplicar muchos estilos.
3. Agregar los estilos dentro de la etiqueta head:
Aplicar estilos de esta manera es prácticamente lo mismo que hacerlo desde un archivo
CSS. La diferencia es que ocupamos espacio de nuestro <head> en el HTML, lo que hace
el código difícil de leer.
Clases y IDs
Para agregar estilos a una etiqueta de HTML usamos clases y IDs. Siendo
las clases las más útiles para elementos generales y los IDs para
elementos específicos.
Seleccionar etiquetas HTML mediante clases
Para modificar las etiquetas HTML mediante clases deberemos escribir la
regla CSS de la siguiente forma:
“nombre_clase” es el nombre que más creamos conveniente para identificar la clase. Nótese que antes del nombre se
incluye un “.”, este carácter es el que indica que dicho selector será una clase.
Al guardar la hoja de estilos no veremos cambios en nuestro HTML, así lo tengamos referido en
el <head>. Esto es porque toca llamar a la clase en las etiquetas que queramos cambiar, de esta
manera:
Lo anterior cambiará el color de únicamente la etiqueta que tiene la clase, de querer que el color se
cambie en otras etiquetas, deberemos igualmente llamar a la clase en cada una de esas etiquetas.
Qué ocurre?
De no querer reutilizar las clases una y otra vez en
cada etiqueta, podemos llamar a la clase dentro
una etiqueta contenedora, esto aplicará la
propiedad en todas las etiquetas “hijas”.
De tener una etiqueta con clase dentro una
etiqueta contenedora con clase, podemos
referirnos a ella específicamente dentro de CSS.
Una etiqueta puede tener varias clases. Esto es
útil en caso de que queramos aplicar una
propiedad específica a una etiqueta con clase.
Seleccionar etiquetas mediante IDs
Para modificar las etiquetas HTML mediante IDs deberemos escribir la regla CSS de la siguiente
forma:
Donde “nombre_id” es el nombre que más creamos conveniente para identificar el ID. Nótese
que antes del nombre se incluye un “#”, este carácter es el que indica que dicho selector será un
ID.
A diferencia de las clases, una etiqueta solo puede tener un ID, y un ID solo puede ser utilizado
una vez.
Es por esta razón que el ID es recomendable usarlo para referir elementos en JS, no en CSS, si
bien podemos usarlos en casos específicos.
Pseudo-clases y pseudo-elementos
Las pseudo-clases y los pseudo-elementos son
selectores que nos permitirán modificar
aspectos puntuales de un elemento.
Pseudo-clases
Las pseudo-clases especifican un estado especial a un elemento
seleccionado.
Una pseudo-clase bastante particular es “:hover”, que indica el estado
de un elemento cuando el cursor del ratón está sobre este.
Las pseudoclases, junto con los pseudoelementos, permiten aplicar
un estilo a un elemento no sólo en relación con el contenido del
árbol de documento, sino también en relación a factores externos
como el historial del navegador (:visited, por ejemplo), el estado
de su contenido (como :checked en algunos elementos de
formulario), o la posición del ratón (como :hover que permite
saber si el ratón está encima de un elemento o no).
Pseudo-elementos
A diferencia de las pseudo-clases los pseudo-elementos no describen un estado especial,
sino que permiten añadir estilos a una parte concreta (a veces muy específica) de un
elemento.
Por ejemplo, el pseudo-elemento “::first-letter” se refiere solo a la primera letra de un
elemento.
Medidas en CSS
Para establecer el tamaño de un elemento en CSS, deberemos de considerar las medidas
que existen. Las hay de dos tipos:
● Medidas absolutas: es un tipo de medida que no cambia en ningún momento. Los pixeles
son de este tipo.
● Medidas relativas: son medidas que son dependientes de otros elementos y que, por ende,
si cambian.
Las medidas relativas (EM y REM)
Las medidas Em tomaran el tamaño de fuente de su padre directo. Por ejemplo:
Supongamos que tenemos un párrafo dentro de un <div> con un tamaño de fuente de
16px.
Ahora supongamos que en nuestro CSS nos
referimos a la etiqueta <p> y cambiamos el
tamaño de fuente con medida Em.
El tamaño de nuestro texto cambiará en consecuencia. Por tanto, podemos decir
que:
● 1em = 16px
● 2em = 32px
● 1.5em = 24px
REM
A diferencia de las medidas Em, las Rem harán referencia a la etiqueta root (base) de nuestro HTML, la
cual siempre será <html>. Por tanto, 1rem siempre será igual a 16px (ya que 16px es el tamaño de fuente
predeterminado de todo archivo HTML).
Dato adicional: podemos modificar el tamaño de fuente de la etiqueta <html> para utilizar las medidas
Rem de la misma forma que los píxeles, así:
● 1rem = 10px
● 1.6rem = 16px
● 2rem = 20px
Para ello deberemos agregar las siguientes líneas al inicio de nuestro CSS:
Modelo de caja
Cada vez que trabajamos con componentes en HTML, estamos manipulando “cajas”, que son
contenedoras del contenido que vamos asignando. Esto lo podemos ver de mejor manera con el
inspeccionar elementos del navegador.
Como podemos observar, son 4 los componentes que conforman
cada” caja”, estos son:
● Margin: el espacio externo de la caja.
● Border: el borde del contenido.
● Padding: el espacio interno entre la caja y el contenido.
● Content: el contenido dentro de la caja (texto, imágenes y
videos). Son las medidas de este componente las que cambian
cuando utilizamos las propiedades width y height.
Position:
Existen distintas propiedades para modificar la
posición de los componentes en el HTML
Static: el componente se queda ubicado en su posición inicial. Es la
propiedad que se aplica por defecto.
Relative: el componente se ubica respecto a su posición original, por
tanto, se superpondrá a los demás elementos a pesar de no estar ubicado
en esa posición. Los demás elementos conservarán su posición original.
Absolute: la posición del componente deja de depender del resto de la página,
por tanto, se va a superponer sobre los demás elementos. Los demás
elementos ocuparán la posición del componente con posición absoluta.
Fixed: el componente conservará su posición en todo momento a pesar de
que se haga scroll.
Sticky: el componente conservará su posición en todo momento cuando el
usuario se lo encuentre al hacer scroll.
Ejemplo interactivo que explica las diferencias entre “relative” y
“absolute”
Tipos de Display
La propiedad Display es la más importante a la hora de manejar el diseño de nuestro proyecto
web, pues especificará como un elemento debe mostrarse en pantalla. Entre los tipos de Display
más utilizados podemos encontrar los siguientes:
Display block
El Display block usará la totalidad del ancho que tenga sin importar si el
contenido tiene o no ese espacio, por tanto, de tener varios elementos, se van
a apilar uno encima del otro.
Display inline
El Display inline usará solo el espacio del contenido, por tanto, los
elementos se agruparán uno al lado del otro
Display inline-block:
El display inline-block usará el espacio del elemento, no del contenido.
Display flex
Flex nos permite distribuir el espacio entre los elementos de una manera
mucho más fácil, pues distribuye los contenedores a modo de fila o
columna. Para usar flex siempre debemos tener un contenedor padre el
cual usará el display flex, puede ser un <div>, <section>, <main>, etc.
En el ejemplo anterior, flex está utilizando sus ajustes por defecto, por lo que
distribuirá los elementos en fila.
Para ajustar la forma en la que flex distribuye los contenedores deberemos
considerar las siguientes propiedades: “flex-wrap” y “flex-direction”.
“flex-wrap” hará que los elementos se ajusten al viewport width del usuario,
por tanto, de haber muchos elementos en pantalla, estos irán bajando para
formar columnas.
“flex-direction” especificará la dirección o forma en la que los
elementos se distribuirán.
De querer que los elementos se distribuyan en columnas, se
deberá poner el valor “column”.
“box-sizing”: De poner el valor “border-box”, se sumará
el padding y el margin con el width del elemento, por
tanto, no perderemos contenido ni generaremos un
scroll horizontal involuntario.
