Olá!
Neste documento apresentaremos uma folha de referência rápida para as principais propriedades CSS para background, font e text. CSS (cascading style sheets) é a linguagem de estilos de folhas de estilo em cascata. Ela apresenta regras para configuração de aparências de páginas HTML. Este manuscrito não deve ser considerado uma documentação, mas sim um arquivo de referência rápida.
Para mais informações, consulte as especificações do CSS: https://www.w3.org/Style/CSS/specs.en.html.
Fonte: adaptado e traduzido de https://websitesetup.org/css3-cheat-sheet/
Sumário
Propriedades que alteram planos de fundo
Background
Essas propriedades alteram o plano de fundo de um site. Principais propriedades:
- background-image
- background-position
- background-size
- background-repeat
- background-attachment
- background-origin
- background-clip
- background-color
background-image
Permite o uso de imagens como planos de fundo. Pode receber os seguintes valores:
- url
- gradients
- none
background-position
Altera a posição da imagem de fundo. Pode receber os seguintes valores:
- top left | top center | top right | center left | center center | center right | bottom left | bottom
- center | bottom right
- x-% y-%
- x-pos y-pos
background-size
Altera o tamanho da imagem de plano de fundo. Pode receber os seguintes valores:
- length
- %
- auto | cover | contain
background-repeat
Determina se as imagens de fundo podem ser repetir. Pode receber os seguintes valores:
repeat | repeat-x | repeat-y | no-repeat
background-attachment
Determina o comportamento da imagem ao rolar a página. Pode receber os seguintes valores:
- scroll | fixed | local
background-origin
Pode receber os seguintes valores:
- border-box | padding-box | content-box
background-clip
Pode receber os seguintes valores:
- border-box | padding-box | content-box
background-color
Altera a cor de fundo. Pode receber os seguintes valores:
- color
- transparent
Font
Font
Altera as características tipográficas. Principais propriedades:
- font-style
- font-variant
- font-weight
- font-size/line-height
font-family
Altera a família da fonte. Pode receber os seguintes valores:
- serif | sans-serif | Font
- Name
font-style
Permite, por exemplo, a inserção de itálico. Pode receber os seguintes valores:
- normal | italic | oblique | inherit
font-variant
Altera a caixa a fonte para caixa alta, reduzindo o tamanho. Pode receber os seguintes valores:
- normal | small-caps | inherit
font-size
Determina o tamanho da fonte. Pode receber os seguintes valores:
- xx-small | x-small | small | medium | large | x-large | xxlarge | smaller | larger | inherit
- length
- %
font-weight
Determina o peso da fonte (ex.: negrito). Pode receber os seguintes valores:
- normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Text
Direction
Determina a direção do texto. Pode receber os seguintes valores:
- ltr | rtl | inherit
letter-spacing
Determina o espaçamento dos caracteres. Pode receber os seguintes valores:
- normal
- length
- %
text-outline
Pode receber os seguintes valores:
- none
- color
- length
white-space
Determina as configurações de espaçamento do texto. Pode receber os seguintes valores:
- normal | pre | nowrap | pre-wrap | pre-line
white-space-collapse
Determina o ponto de colapso (i.e., quando o texto ultrapassa um espaço delimitado). Pode receber os seguintes valores:
- perserve | collapse | pre-servebreaks | discard
punctuation-trim
Pode receber os seguintes valores:
- none | [ start | end | adjacent ]
text-align
Alinhamento do texto. Pode receber os seguintes valores:
- start | end | left | right | center | justify
text-align-last
Alinhamento do texto. Pode receber os seguintes valores:
- start | end | left | right | center | justify
text-decoration
Estilos para textos (exemplo, sublinhado). Pode receber os seguintes valores:
- none | underline | overline | line-thorugh | blink
text-shadow
Sombras em texto. Pode receber os seguintes valores:
- none
- color
- length
word-break
Quebra de palavra. Pode receber os seguintes valores:
- normal | keep-all | loose | break-strict | break-all
word-wrap
Quebra de palavra. Pode receber os seguintes valores:
- normal
- nowrap
text-emphasis
Ênfase de texto. Pode receber os seguintes valores:
- none | [ [ accent | dot | circle | disc | [ before | after ]?]
text-indent
Indentação do texto. Pode receber os seguintes valores:
- length
- %
text-justify
Variações de texto justificado. Pode receber os seguintes valores:
- auto | inter-word | interideograph | inter-cluster | distribute | kashida | tibetan
text-transform
Maiúsculas e minúsculas. Pode receber os seguintes valores:
- none | capitalize | uppercase | lowercase
text-wrap
Restrição de textos. Pode receber os seguintes valores:
- normal | unresrricted | none | suppress
word-spacing
Espaçamento entre palavras. Pode receber os seguintes valores:
- normal
- length
- %
