Hoja de referencia rápida y práctica de CSS de Toptal

Publicado: 2022-03-11

Las hojas de estilo en cascada, o CSS para abreviar, es un lenguaje de hojas de estilo escrito en un lenguaje de marcas. CSS define la presentación, el aspecto y los elementos de formato de los documentos web, como el diseño, los colores y las fuentes.

La sintaxis de CSS es completa y no es fácil saber siempre la sintaxis exacta o conocer todas las propiedades de CSS disponibles y los valores correspondientes. Para ayudar a los desarrolladores y diseñadores de CSS, Toptal creó una guía de referencia rápida y se la ofreció a la comunidad como descarga gratuita. La guía de referencia de CSS incluye la sintaxis de CSS, los selectores, las propiedades, los tamaños y las unidades más importantes, y otra información útil de CSS en un formato breve e informativo. Esperamos que encuentre la hoja de trucos de CSS como un recurso valioso.

También puede consultar las páginas de recursos de Toptal para obtener información adicional sobre errores comunes de CSS, una guía de contratación de CSS, preguntas de entrevistas de CSS y consejos y mejores prácticas de CSS.

Haga clic aquí para descargar la hoja de trucos de CSS

Hoja de trucos de CSS

Sintaxis		Modelo de caja
/* Comentarios */ @tipo de medio { seleccionador { valor de propiedad; } } Nota: el tipo de medio es opcional
Estilo en línea <etiqueta>
Estilo incrustado <cabeza> <tipo de estilo="texto/css"> selector { propiedad: valor; } </estilo> </cabeza>
Hoja de estilo externa <cabeza> <enlace rel="hoja de estilo" tipo="texto/css" href="estilo.css" /> </cabeza>		Cajas
		margen	margen superior margen derecho margen inferior margen izquierdo

Selectores		relleno	acolchado superior acolchado-derecho fondo acolchado relleno-izquierda
*	Todos los elementos
etiqueta	Todos los elementos de la etiqueta	frontera	borde superior borde derecho borde inferior borde izquierdo
etiqueta *	Todos los elementos dentro de la etiqueta
etiqueta etiqueta2	elementos tag2 dentro de la etiqueta	color del borde	borde-superior-color borde-derecho-color borde-fondo-color borde-izquierda-color
etiqueta, etiqueta2	Todos los elementos tag y tag2
etiqueta > etiqueta2	tag2 es un hijo de la etiqueta	estilo de borde	borde-superior-estilo borde-derecho-estilo borde-inferior-estilo estilo de borde izquierdo
etiqueta + etiqueta2	etiqueta2 precedida por etiqueta
.clase	Elementos con clase 'clase'	ancho del borde	borde-superior-ancho borde-derecho-ancho borde-inferior-ancho borde-izquierda-ancho
etiqueta.clase	Todas las etiquetas con clase 'clase'
#identificación	Elemento con id 'id'	Tamaño y colores
etiqueta#id	Etiqueta con id 'id'	Tamaños relativos	ellos \| rem \| ex \| ch volvo \| vh \| vmín \| vmáx \| %
Pseudo-selectores
:activo	Agrega estilo al elemento activo	Tamaños absolutos	centímetros \| milímetros \| en píxeles \| punto \| ordenador personal
:después	Agrega contenido después del elemento
:antes de	Contenido de anuncios antes del elemento	Colores	Hexadecimal #ff00ff
:primer hijo	Añade estilo al primer hijo.		RGB rgb(255,0,255)
:primera letra	Añade estilo al primer carácter.	Posicionamiento
:primera linea	Agrega estilo a la primera línea	posición	absoluto \| fijo \| pariente \| estático \| heredar
:enfocar	Agrega estilo al elemento enfocado
:flotar	Agrega estilo cuando el mouse ha terminado	flotador	izquierda \| derecho \| ninguno \| heredar
:Enlace	Agrega estilo al enlace no visitado
:visitó	Agrega estilo al enlace visitado	parte superior derecha, abajo, izquierda	Establece el desplazamiento desde el borde.
Texto
Familia tipográfica	Especifica la familia de fuentes	claro	izquierda \| derecho \| ambos \| ninguno \| heredar
tamaño de fuente	Especifica el tamaño de fuente
Estilo de fuente	normales \| cursiva \| oblicuo \| heredar	mostrar	Especifica la ubicación del elemento en el flujo del documento.

variante de fuente	normales \| de pequeña capitalización \| heredar	Desbordamiento	visible \| escondido \| pergamino \| automóvil \| heredar
fuente -peso	normales \| negrita \| más audaz \| encendedor \| entero (100- 900) \| heredar
		visibilidad	visible \| escondido \| colapso \| heredar
color	Establece el color del texto.
altura de la línea	normales \| entero \| % \| heredar	índice z	automóvil \| entero \| heredar
texto alineado	izquierda \| derecho \| centro \| justificar \| heredar	Dimensiones
		altura	automóvil \| entero \| % \| heredar
texto- decoración	ninguno \| subrayar \| línea superior \| línea directa \| parpadeo \| heredar	Altura máxima	ninguno \| entero \| % \| heredar
		anchura máxima	ninguno \| entero \| % \| heredar
guion de texto	entero \| % \| heredar	min-altura	entero \| % \| heredar
texto- transformar	ninguno \| capitalizar \| mayúsculas \| minúsculas \| heredar	ancho mínimo	entero \| % \| heredar
		ancho	automóvil \| entero \| % \| heredar
vertical -alinear	entero \| % \| línea de base \| secundario \| súper \| parte superior \| centro superior de texto \| abajo \| fondo de texto \| heredar	Otro
		antecedentes	Formato: fondo (color) (imagen) (repetir) (posición)
blanco -espacio	normales \| ahora rap \| anterior \| pre-línea \| pre-envoltura \| heredar
		cursor	Establecer el tipo de cursor
espacio entre palabras	normales \| longitud \| heredar	citas	Establecer tipo de comillas