Folha de dicas CSS rápida e prática da Toptal

Publicados: 2022-03-11

Cascading Style Sheets, ou CSS para abreviar, é uma linguagem de folha de estilo escrita em uma linguagem de marcação. CSS define os elementos de apresentação, aparência e formatação de documentos da Web, como layout, cores e fontes.

A sintaxe CSS é abrangente e nem sempre é fácil saber a sintaxe exata ou conhecer todas as propriedades CSS disponíveis e os valores correspondentes. Para ajudar desenvolvedores e designers de CSS, a Toptal criou um guia de referência rápida e o ofereceu à comunidade como um download gratuito. O guia de referência CSS inclui a sintaxe CSS, os seletores, propriedades, tamanhos e unidades mais importantes e outras informações CSS úteis em um formato curto e informativo. Esperamos que você ache a folha de dicas CSS um recurso valioso.

Você também pode verificar as páginas de recursos da Toptal para obter informações adicionais sobre erros comuns de CSS, um guia de contratação de CSS, perguntas de entrevista sobre CSS e dicas e práticas recomendadas de CSS.

Clique aqui para baixar CSS Cheat Sheet

Folha de dicas CSS

Sintaxe		Modelo de caixa
/* Comentários */ @tipo de mídia { seletor { valor da propriedade; } } Observação: o tipo de mídia é opcional
Estilo embutido <tag>
Estilo incorporado <cabeça> <style type="text/css"> seletor { propriedade: valor; } </style> </head>
Folha de Estilo Externa <cabeça> <link rel="folha de estilo" type="text/css" href="style.css" /> </head>		Caixas
		margem	margem superior margem direita margem inferior margem esquerda

Seletores		preenchimento	acolchoamento padding-right fundo de preenchimento padding-esquerda
*	Todos os elementos
marcação	Todos os elementos da tag	fronteira	topo de fronteira fronteira direita borda inferior borda esquerda
marcação *	Todos os elementos dentro da tag
etiqueta etiqueta2	elementos tag2 dentro da tag	Cor da borda	borda-top-color borda-direita-cor borda-fundo-cor borda-cor-esquerda
etiqueta, etiqueta2	Todos os elementos tag e tag2
etiqueta > etiqueta2	tag2 é filho de tag	estilo de borda	estilo de borda superior estilo de borda direita estilo de borda inferior estilo de borda esquerda
etiqueta + etiqueta2	tag2 precedido por tag
.classe	Elementos com classe 'class'	largura da borda	largura da borda largura da borda direita largura-fundo-borda largura da borda esquerda
classe.tag	Todas as tags com a classe 'class'
#identificação	Elemento com id 'id'	Tamanho e cores
etiqueta#id	Marcar com id 'id'	Tamanhos relativos	em \| rem \| ex \| CH vw \| vh \| vmin \| vmax \| %
Pseudo-seletores
:ativo	Adiciona estilo ao elemento ativo	Tamanhos absolutos	cm \| mm \| dentro px \| pt \| computador
:depois de	Adiciona conteúdo após o elemento
:antes de	Conteúdo dos anúncios antes do elemento	Cores	Hex #ff00ff
:primeiro filho	Adiciona estilo ao primeiro filho		RGB rgb(255,0,255)
:primeira carta	Adiciona estilo ao primeiro caractere	Posicionamento
:primeira linha	Adiciona estilo à primeira linha	posição	absoluto \| fixo \| parente \| estático \| herdar
:foco	Adiciona estilo ao elemento focado
:flutuar	Adiciona estilo quando o mouse está sobre	flutuador	esquerda \| direito \| nenhum \| herdar
:link	Adiciona estilo ao link não visitado
:visitou	Adiciona estilo ao link visitado	canto superior direito, inferior esquerdo	Define o deslocamento da borda
Texto
família de fontes	Especifica a família de fontes	Claro	esquerda \| direito \| ambos \| nenhum \| herdar
tamanho da fonte	Especifica o tamanho da fonte
estilo de fonte	normais \| itálico \| oblíquo \| herdar	tela	Especifica a colocação do elemento no fluxo de documentos

variante de fonte	normais \| versaletes \| herdar	transbordar	visível \| escondido \| rolar \| automóvel \| herdar
Fonte -peso	normais \| negrito \| mais ousado \| isqueiro \| int (100- 900) \| herdar
		visibilidade	visível \| escondido \| colapso \| herdar
cor	Define a cor do texto
altura da linha	normais \| int \| % \| herdar	índice z	automóvel \| int \| herdar
alinhamento de texto	esquerda \| direito \| centro \| justificar \| herdar	Dimensões
		altura	automóvel \| int \| % \| herdar
texto- decoração	nenhum \| sublinhar \| overline \| passagem de linha \| piscar \| herdar	altura máxima	nenhum \| int \| % \| herdar
		largura máxima	nenhum \| int \| % \| herdar
recuo de texto	int \| % \| herdar	min-altura	int \| % \| herdar
texto- transformar	nenhum \| capitalizar \| maiúsculas \| minúsculas \| herdar	largura mínima	int \| % \| herdar
		largura	automóvel \| int \| % \| herdar
vertical -alinhar	int \| % \| linha de base \| sub \| super \| topo \| meio texto-topo \| inferior \| fundo de texto \| herdar	De outros
		fundo	Formato: fundo (cor) (imagem) (repetir) (posição)
Branco -espaço	normais \| agorarap \| pré \| pré-linha \| pré-embrulhar\| herdar
		cursor	Defina o tipo de cursor
espaçamento entre palavras	normais \| comprimento \| herdar	citações	Definir tipo de aspas