2022
Folha de referências CSS
BACKGROUND – FONT – TEXT
FONTE: ADAPTADO E TRADUZIDO DE HTTPS://[Link]/CSS3-CHEAT-SHEET/
TRADUÇÃO: @DCBMARIANO
Introdução
Olá!
Neste documento apresentaremos uma folha de referência rápida para as principais propriedades CSS para
background, font e text. 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: [Link]
Sumário
Introdução ................................................................................................................................... 1
Sumário ....................................................................................................................................... 2
Planos de fundo .......................................................................................................................... 4
Background ............................................................................................................................. 4
background-image .................................................................................................................. 4
background-position ............................................................................................................... 4
background-size ...................................................................................................................... 4
background-repeat .................................................................................................................. 4
background-attachment .......................................................................................................... 5
background-origin .................................................................................................................. 5
background-clip ...................................................................................................................... 5
background-color .................................................................................................................... 5
Font ............................................................................................................................................. 6
Font ......................................................................................................................................... 6
font-family .............................................................................................................................. 6
font-style ................................................................................................................................. 6
font-variant ............................................................................................................................. 6
font-size .................................................................................................................................. 6
font-weight.............................................................................................................................. 6
Text ............................................................................................................................................. 7
Direction ................................................................................................................................. 7
letter-spacing .......................................................................................................................... 7
text-outline .............................................................................................................................. 7
white-space ............................................................................................................................. 7
white-space-collapse ............................................................................................................... 7
punctuation-trim ..................................................................................................................... 7
text-align ................................................................................................................................. 7
text-align-last .......................................................................................................................... 8
text-decoration ........................................................................................................................ 8
text-shadow ............................................................................................................................. 8
word-break .............................................................................................................................. 8
word-wrap............................................................................................................................... 8
text-emphasis .......................................................................................................................... 8
text-indent ............................................................................................................................... 8
text-justify ............................................................................................................................... 8
text-transform ......................................................................................................................... 9
text-wrap ................................................................................................................................. 9
word-spacing .......................................................................................................................... 9
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
• %