Chuleta CSS (cheat sheet) Nivel avanzado

Chuleta CSS (cheat sheet) Nivel avanzado

A continuación hemos recopilado en una chuleta CSS las propiedades vistas en el tutorial de CSS Avanzado. También puedes ver un resumen de propiedades de nivel inicial del tutorial de CSS básico disponible en Eniun. Esperamos que esta chuleta o Cheat sheet te ayude en el desarrollo de tus proyectos de diseño web.

1. Medios en CSS

Medio	Descripción
all	Todos los dispositivos
print	Para documentos paginados y mostrados en vista de impresión
screen	Pantallas de ordenador
speech	Sintetizadores para navegadores de voz utilizados por personas discapacitadas

Formas de definir los medios:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="especialStyle.css" />

@media print  { body { font-size: 11pt; } } 
@media screen { body { font-size: 12px; } } 
@media { body { color: blue; } } /* Se aplica a todo */

@import url("estilosPantalla.css") screen; 
@import url("estilosImpresora.css") print;
@import url("estilos.css"); /* Se aplica a todo por defecto*/

Ver más →

2. Media queries

@media (min-width: 768px) {
  /* Estilos para pantallas con un ancho mínimo de 768px */
}

@media (max-width: 767px) {
  /* Estilos para pantallas con un ancho máximo de 768px */
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Estilos para pantallas con un ancho entre 768px y 1024px */
}

Ver más →

3. Metaetiqueta viewport

A continuación, te presento una tabla con las propiedades más comunes utilizadas en la etiqueta «viewport» y sus ejemplos:

Propiedad	Descripción	Ejemplo
width	Ancho inicial del viewport	<meta name="viewport" content="width=device-width">
initial-scale	Nivel de escala inicial del viewport	<meta name="viewport" content="initial-scale=1.0">
minimum-scale	Escala mínima permitida del viewport	<meta name="viewport" content="minimum-scale=0.5">
maximum-scale	Escala máxima permitida del viewport	<meta name="viewport" content="maximum-scale=2.0">
user-scalable	Habilita/deshabilita el zoom del usuario	<meta name="viewport" content="user-scalable=yes">

Ver más →

4. Flexbox CSS

Propiedad	Descripción	Valores Ejemplo
display	Define el contenedor como un flex container	flex
flex-wrap	Controla si los elementos flex deben envolverse o no	nowrap (por defecto), wrap, wrap-reverse
justify-content	Alinea los elementos a lo largo del eje principal	flex-start (por defecto), flex-end, center, space-between, space-around, space-evenly
align-items	Alinea los elementos a lo largo del eje secundario	stretch (por defecto), flex-start, flex-end, center, baseline
flex-direction	Especifica la dirección principal de los elementos	row (por defecto), row-reverse, column, column-reverse
flex-grow	Controla cómo los elementos flex se expanden	Número (valor relativo)
flex-shrink	Controla cómo los elementos flex se encogen	Número (valor relativo)
flex-basis	Establece el tamaño inicial de los elementos flex	Valor, auto (por defecto)
order	Controla el orden de los elementos flex dentro del contenedor	Número (entero)
align-self	Alinea un elemento individual a lo largo del eje secundario	auto (por defecto), flex-start, flex-end, center, baseline, stretch

Ver más →

5. CSS Grid

Propiedad	Descripción	Valores Ejemplo
display	Define el contenedor como un grid container	grid (por defecto), inline-grid
grid-template-columns	Define las columnas del grid	grid-template-columns: 1fr 2fr 1fr
grid-template-rows	Define las filas del grid	grid-template-rows: 100px 200px
grid-gap	Propiedad abreviada para establecer grid-column-gap y grid-row-gap	grid-gap: 10px
grid-column-gap	Establece el tamaño del espacio entre columnas	grid-column-gap: 20px
grid-row-gap	Establece el tamaño del espacio entre filas	grid-row-gap: 10px

Ver más →