Guía básica para empezar con css, desde lo más usado.
- Documentación: https://cssreference.io
- Practicar: https://playcode.io/css | https://codepen.io
Los selectores en CSS se utilizan para "seleccionar" los elementos HTML que queremos estilizar. Hay varios tipos de selectores:
Selector de tipo: selecciona elementos por su nombre de etiqueta.
// <h1>Hello</h1>
h1 {
color: red;
}Selector de clase: selecciona elementos por su nombre de clase.
// se usa el punto para seleccionar un elemento por su clase
// <div class="my-class"></div>
.my-class {
color: red;
}Selector de pseudo-clase: selecciona elementos en un estado específico. se usa para cuando el usuario pase por encima del elemento
// se usa para cuando el usuario pase por encima del elemento
// <a href="#">Link</a>
a:hover {
color: red;
}Otros selectores
// por ID
// <div id="my-id">Hola</div>
#my-id {
color: red;
}
// por atributo: elementos en función de un atributo o su valor.
// <input type="text">
input[type="text"] {
color: red;
}Las propiedades en CSS son las características que se pueden aplicar a los elementos seleccionados.
Los valores son las configuraciones aplicadas a las propiedades CSS. Por ejemplo, en color: blue;, "blue" es el valor que se aplica a la propiedad "color".
color: color del texto.padding: espacio interior dentro del elemento.margin: espacio exterior alrededor del elemento.font-size: tamaño de la fuente.text-align: alineamiento del texto.font-weight: grosor de la fuente.background|background-color: color de fondo del elemento.display: visibilidad del elemento.
width: ancho del elemento.height: alto del elemento.border: borde del elemento.border-radius: borde redondeado del elemento.opacity: opacidad del elemento.
- https://cssreference.io/flexbox/
display: flex;: propiedades de flexbox del elemento.justify-content: alineamiento horizontal de los elementos hijos.align-items: alineamiento vertical de los elementos hijos.
font-family: tipo de fuente:serif,sans-serif, etc.line-height: altura de la línea referente al texto.font: Propiedad abreviada parafont-stylefont-variantfont-weightfont-sizeline-heightyfont-family.
background-image: imagen de fondo del elemento.box-shadow: sombra del elemento.text-shadow: sombra de texto.position: posición del elemento.top | right | bottom | left: ubicación del elemento.z-index: orden de visualización del elemento.overflow: desbordamiento del elemento.max-width|min-width: ancho máximo o mínimo del elemento.max-height|min-height: alto máximo o mínimo del elemento.cursor: cursor del mouse.text-decoration: decoración del texto.text-transform: transformación del texto(mayúsculas, etc).outline: contorno del elemento.
transform: transformación del elemento.transition: transición del elemento.animation: animación del elemento.
Tailwind: https://tailwindcss.com
Las unidades en CSS se utilizan para definir la medida de varias propiedades. Las unidades más comunes incluyen:
px(píxeles): una unidad fija.emrelativa al tamaño de la fuente del elemento.remrelativa al tamaño de la fuente del elemento raíz.%(porcentaje): relativo a otro valor, generalmente el contenedor del elemento.vw(viewport width): porcentaje del ancho del viewport.vh(viewport height): porcentaje de la altura del viewport.
Las variables en CSS permiten almacenar valores que pueden ser reutilizados en el documento. Se definen con -- y se utilizan con la función var(). Por ejemplo:
:root {
--main-color: black;
}
body {
color: var(--main-color);
}Las queries en CSS permiten definir reglas de estilo para diferentes tamaños de pantalla. Por ejemplo, se pueden utilizar para ajustar el tamaño de la fuente en función del ancho de la pantalla.
Para escribir la media query, se debe hacer con un enfoque first mobile(Primeros móviles luego tablets y desktop) que normalmente sería @media (min-width: 768px).
body {
font-size: 14px;
}
@media (min-width: 768px) {
body {
font-size: 16px;
}
}Ejm: tamaño de la fuente sería de 14px para todos los dispositivos menores a 768px de ancho de pantalla y de 16px para todos los dispositivos superiores a 768px.