C1 - CSS

Full Stack amb React

¿Qué es el CSS?

Full Stack amb React

El CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo que sirve para definir las propiedades visuales de los elementos de un documento HTML.

En las hojas de estilos CSS, que son independientes del HTML, escribiremos un listado de reglas que determinarán tamaños, colores, posiciones, bordes, formas, espaciados, etc.

Puede haber varias hojas de estilo en un mismo documento HTML.

body {    
    background-color: #95d9df;
}
.cabecera-contenedor {
    background-color: #5e81d1;
}
.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
}
.cabecera h1 {
    margin: 0;
    font-size: 1.6em;
}
.cabecera nav ul {
    margin: 0;
}
.cabecera nav ul a {
    color: inherit;
}

Full Stack amb React

¿Cómo aplico una hoja de estilos?

Full Stack amb React

Hay tres maneras de aplicar un conjunto de estilos CSS a un documento HTML. Siempre vamos a intentar aplicar la tercera:

Directamente sobre una etiqueta individual, a través de su atributo style.
Dentro de una etiqueta <style> insertada en el <head> del documento.
En un archivo aparte, referenciándolo mediante la etiqueta <link rel="stylesheet"> insertada en el <head> del documento.

<body style="background-color: #ff7f50">
  <p style="color: #fff">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum harum maxime esse in
    impedit fugiat velit provident laudantium ducimus maiores numquam odit sunt eveniet nemo, amet vitae eum dolor minus.</p>
</body>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primer documento HTML</title>
  <style>
    body {
      background-color: #ff7f50;
    }

    p {
      color: #fff;
    }
  </style>
</head>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primer documento HTML</title>
  <link rel="stylesheet" href="estilos.css">
</head>

Full Stack amb React

¿Qué escribo en una hoja de estilos?

Full Stack amb React

Una hoja de estilos está compuesta por un listado de reglas de estilo. Una regla es un trozo de código que establece cómo se presenta uno o varios elementos HTML determinados.

h3 {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}
a {
  color: #060;
  text-decoration: underline;
}

Este código tiene dos reglas:

Todos los elementos h3 deben tener:
- Un color de letra con código #333 (gris oscuro)
- Un tamaño de letra de 24px
- Negrita
Todos los elementos a deben tener:
- Un color de letra con código #060 (verde)
- Subrayado

Full Stack amb React

¿Cómo escribo los colores?

Full Stack amb React

En CSS puedo escribir un color de varias maneras:

color en inglés
color en hexadecimal
color en decimal

/* Nombre en inglés */
a {
  color: darkgreen;
  text-decoration: underline;
}

/* HEX */
a {
  color: #060;
  text-decoration: underline;
}

/* RGB */
a {
  color: rgb(0, 128, 0);
  text-decoration: underline;
}

/* RGBA */
a {
  color: rgba(0, 128, 0, 0.9);
  text-decoration: underline;
}

Formato hexadecimal:

#00bb88

00-ff

#0000ff

00-ff

#0000ff

#00f

Full Stack amb React

Selectores

Full Stack amb React

Básicos:

Elementos
h1
p
Id
#elemento
Clase
.elemento
Atributo
input[type="text"]

Los selectores me permiten indicar a qué elementos se aplica una regla de estilos, es decir, un grupo de propiedades. Los diferentes tipos de selectores son:

Combinaciones:

Descendencia
header h1
Descendencia directa
header > h1
Hermanos
h2 ~ p
Hermanos directos
h2 + p

Pseudo:

Pseudoclases
:focus
:disabled
:hover
Pseudoelementos
::selection
::after
::first-letter

Full Stack amb React

Propiedades

Full Stack amb React

font-size: tamaño de letra
font-family: tipografía
font-weight: peso de la letra (bold = negrita)
line-height: interlineado
text-transform: mayúsculas o minúsculas
text-decoration: líneas
text-align: alineación del texto
font-style: cursiva

color: color del texto
background-color: color de fondo
border: 1px solid #000
border-radius: esquinas redondeadas
list-style: estilo de los puntos en listas
margin: espacio hacia fuera del elemento
opacity: opacidad (transparencia)
width: ancho
height: alto

Full Stack amb React

El box model

Full Stack amb React

Todos los elementos HTML ocupan el espacio de una caja rectangular (o cuadrada). Yendo al inspector HTML de las developer tools y pasando el cursor por encima de los elementos podemos ver la caja correspondiente a cada elemento.

La caja de cada elemento está compuesta por cuatro partes o zonas:

Content
Padding
Border
Margin

Full Stack amb React

El box model

Full Stack amb React

Content: es la zona donde va el contenido del elemento, sus hijos (texto, imágenes, otros elementos...).
Padding: un espacio interior entre los límites del elemento y su contenido.
Border: el límite del elemento, su borde.
Margin: un espacio exterior al elemento, que lo separa de los demás y que es invisible.

Podemos inspeccionar las medidas de las cuatro zonas mediante las developer tools del navegador: seleccionando el elemento en el inspector, y yendo a la pestaña Computed.

Full Stack amb React

Márgenes

Full Stack amb React

Podemos establecer las medidas de los márgenes de varias maneras. Aquí podemos ver tres formas distintas de poner los cuatro márgenes a 10px:

margin: 10px;
margin: 10px 10px 10px 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

Si las medidas coinciden sólo de dos en dos (top & bottom, left & right), se puede sintetizar así:

margin: 10px 20px;

que equivale a:

margin: 10px 20px 10px 20px;

que equivale a:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

Full Stack amb React

Márgenes

Full Stack amb React

10px 20px 10px 20px

margin:

10px

margin: 10px 20px 10px 20px;

;

20px

10px

20px

Full Stack amb React

Márgenes

Full Stack amb React

10px 20px

margin:

10px

margin: 10px 20px;

;

20px

Full Stack amb React

Paddings

Podemos establecer las medidas de los paddings usando la misma sintaxis que para los márgenes:

padding: 10px;
padding: 10px 10px 10px 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

Full Stack amb React

Borders

Para establecer un borde podemos escribir tres de sus propiedades: ancho, estilo y color.

border: 2px solid #060;

La anterior es una forma abreviada de escribir las tres propiedades por separado:

border-width: 2px;

border-style: solid;

border-color: #060;

También podemos establecer los bordes de cada uno de los cuatro lados de manera individual:

border-top: 2px solid #060;

border-right: 2px solid #060;

border-bottom: 2px solid #060;

border-left: 2px solid #060;

CSS nos permite redondear las esquinas de un elemento:

border-radius: 10px;

Full Stack amb React

Medidas de la caja

Por defecto, cuando establecemos las dimensiones de un elemento con width y con height, se aplica siempre a la zona content.

Podemos cambiar este comportamiento con la propiedad:

box-sizing: border-box;

Esto hará que las medidas incluyan tanto content como padding y border.

Full Stack amb React

Unidades en CSS

px: píxeles (valor absoluto)
em: relativo al font-size del elemento
rem: relativo al font-size del elemento raíz
vh: relativo a la altura del viewport
vw: relativo a la anchura del viewport
%: relativo al elemento padre

Full Stack amb React

Variables CSS

Cuando queremos reutilizar valores, tenemos a nuestra disposición las custom properties o variables CSS.

Las variables CSS nos permiten asignar un identificador a un valor, para poder después usar el identificador en vez de el valor. Esto es muy útil cuando repetimos un mismo valor en varios sitios: usando las variables CSS podemos tenerlos en un único lugar y así el código será más fácil de mantener.

En vez de esto:

section p {
  font-size: 14px;
  color: #387622;
}
section li {
  list-style: none;
  color: #387622;
}
section .texto {
  color: #387622;
}

section {
  --color-texto: #387622;
}
section p {
  font-size: 14px;
  color: var(--color-texto);
}
section li {
  list-style: none;
  color: var(--color-texto);
}
section .texto {
  color: var(--color-texto);
}

Podemos tener esto:

O esto:

:root {
  --color-texto: #387622;
}
section p {
  font-size: 14px;
  color: var(--color-texto);
}
section li {
  list-style: none;
  color: var(--color-texto);
}
section .texto {
  color: var(--color-texto);
}

Full Stack amb React

Position

Un elemento puede tener cuatro valores diferentes de la propiedad position:

static: es la posición normal, el elemento aparece donde le toca por el flujo natural de elementos.
relative: tiene dos usos diferentes:
- sirve para modificar su posición de manera relativa a su punto natural de inserción, pero su caja permanece en el mismo sitio y no afecta al resto de elementos
- sirve para que el elemento sea punto de referencia para un descendiente que tenga position absolute
absolute: modifica su posición de manera relativa al primer ascendiente con position diferente de static. El elemento sale del flujo natural y queda flotando por encima del resto de elementos.
fixed: igual que el absolute, pero relativo al viewport

Podemos establecer la posición de un elemento con position diferente a static mediante estas cuatro propiedades:

top
bottom
left
right

Full Stack amb React

Media queries

Para que nuestra web sea responsive, es necesario que tenga el meta viewport, y también que hagamos uso de las media queries.

Una media query es un conjunto de reglas CSS que aplicamos sólo cuando el viewport tiene unas medidas específicas.

Gracias a las media queries podemos dar diferentes propiedades a un mismo elemento dependiendo de las medidas del viewport, y esto nos permitirá que la web se adapte a las diferentes dimensiones de los dispositivos.

/* Los párrafos tendrán un tamaño de letra de 1.4rem hasta 999px, 
   y a partir de 1000px tendrán un tamaño de letra de 1rem */
p {
  font-size: 1.4rem;
}
@media (min-width: 1000px) {
  p {
    font-size: 1rem;
  }
}

Full Stack amb React

Flexbox

Flexbox es un sistema de CSS que nos va a ofrecer diferentes propiedades para establecer cómo se relacionan espacialmente varios elementos entre sí.

Nos será útil para construir layouts y para alinear elementos.

Para convertir un elemento en un contenedor flexbox le damos la propiedad display: flex. Automáticamente todos sus hijos se van a alinear, en horizontal o en vertical dependiendo de la propiedad flex-direction, que puede tener como valor row o column.

Full Stack amb React

Flexbox

Si un elemento es contenedor flexbox, podemos establecer cuál va a ser el alineamiento de sus elementos hijos a lo largo de los dos ejes.

En flexbox no hablamos de eje vertical y eje horizontal, sino de eje principal y eje secundario. Para alinear en ambos ejes tenemos las propiedades:

justify-content: alineamiento en el eje principal

align-items: alineamiento en el eje secundario

Estas dos propiedades pueden tener los siguientes valores:

flex-start
center
flex-end
space-between
space-around
space-evenly

Full Stack amb React

Flexbox

Cuando los elementos hijos del contenedor flexbox no ocupan todo el espacio disponible, podemos hacer que lo rellenen, distribuyéndose a nuestro gusto.

La propiedad flex nos permite establecer cuánto espacio disponible se le da a cada elemento:

.elemento {
flex: 1; <-- mismo espacio para todos

}

.elemento {
flex: 1 100px; <-- mismo espacio para todos, pero respetando un mínimo de 100px

}

Full Stack amb React