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:
<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:
Full Stack amb React
¿Cómo escribo los colores?
Full Stack amb React
En CSS puedo escribir un color de varias maneras:
/* 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:
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:
Pseudo:
Full Stack amb React
Propiedades
Full Stack amb React
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:
Full Stack amb React
El box model
Full Stack amb React
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:
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:
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
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:
Podemos establecer la posición de un elemento con position diferente a static mediante estas cuatro propiedades:
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:
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