C1 - CSS
Full Stack amb React
Full Stack amb React
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
R
00-ff
G
00-ff
B
00-ff
#0000ff
R
00-ff
G
00-ff
B
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
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
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
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
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
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
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
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
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
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
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
Full Stack amb React
Recursos interesantes de esta unidad
Artículos sobre CSS
Para consultar qué características de HTML, CSS o JS están implementadas en los navegadores
Todas las propiedades y los selectores CSS
Conceptos fundamentales para iniciarse con CSS
Explicación con gráficos sobre Flexbox
Desenvolupador Web Full Stack amb React - C1-CSS
By mariogl
Desenvolupador Web Full Stack amb React - C1-CSS
Diapositivas para el curso Desenvolupador Web Full Stack amb React, del 2 de febrero al 27 de abril de 2021 en Barcelona. Módulo C1 -CSS
- 285