---
# System prepended metadata

title: Cheatsheet de propriedades básicas do CSS
tags: [front-end, cheatsheet, módulo 1]

---

# Cheatsheet de propriedades básicas do CSS

### cores
nomes de cores (red, white), hexadecimais (#FFFFFF, #F0F0F0), RGB (rgb(255, 0, 0), rgb(255, 255, 255)) e outros. 
referência: [W3 Schools Unidades de cores](https://www.w3schools.com/cssref/css_colors_legal.asp)

### unidades de tamanho
px, em, rem, vh, e outros
referência: [W3 Schools Unidades de tamanho/posição](https://www.w3schools.com/cssref/css_units.asp)

## Texto

| Nome                                                                                          | Descrição                                                                                                   | Valores                                                                |
| --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| [`color`](https://www.w3schools.com/cssref/pr_text_color.asp)                                 | Define a cor do texto                                                                                       | [**cores**](#cores)                                                    |
| [`text-align`](https://www.w3schools.com/cssref/pr_text_text-align.asp)                       | Define o alinhamento horizontal do texto                                                                    | left, right, center, justify                                           |
| [`text-decoration`](https://www.w3schools.com/cssref/pr_text_text-decoration.asp)             | **Shorthand** para as propriedades `text-decoration-line`, `text-decoration-color`, `text-decoration-style` | `text-decoration-line` `text-decoration-color` `text-decoration-style` |
| [`text-decoration-line`](https://www.w3schools.com/cssref/css3_pr_text-decoration-line.asp)   | Define qual decoração utilizar no texto                                                                     | none, underline, overline, line-through                                |
| [`text-decoration-color`](https://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp) | Define a cor da decoração do texto                                                                          | [**cores**](#cores)                                                    |
| [`text-decoration-style`](https://www.w3schools.com/cssref/css3_pr_text-decoration-style.asp) | Define o estilo da decoração do texto                                                                       | solid, double, dotted, dashed, wavy                                    |

## Fontes

| Nome          | Descrição                                 | Valores                                                                                                |
| ------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| [`font-family`](https://www.w3schools.com/cssref/pr_font_font-family.asp) | Define a fonte do texto                   | nomes de fontes (Arial, Times New Roman) e fontes genéricas (sans-serif, serif)                        |
| [`font-weight`](https://www.w3schools.com/cssref/pr_font_weight.asp) | Define o peso ou intensidade de uma fonte | normal, bold, bolder, lighter e números de 100 até 900                                                 |
| [`font-size`](https://www.w3schools.com/cssref/pr_font_font-size.asp)   | Define o tamanho da fonte                 | medium, small, large, smaller, larger, [**unidades de tamanho**](#unidades-de-tamanho), porcentagem do tamanho da fonte do pai |

## Elementos

| Nome                                                                                 | Descrição                                                                                                                                         | Valores                                                                                                |
| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| [`background`](https://www.w3schools.com/cssref/css3_pr_background.asp)              | **Shorthand** para as propriedades `background-color`, `background-image`, `background-position`, `background-size`, `background-repeat` e outras | `background-color` `background-image` `background-position/background-size` `background-repeat`        |
| [`background-color`](https://www.w3schools.com/cssref/pr_background-color.asp)       | Define a cor do fundo de um elemento                                                                                                              | transparent ou [**cores**](#cores)                                                                     |
| [`background-image`](https://www.w3schools.com/cssref/pr_background-image.asp)       | Define uma ou mais imagens para o fundo do elemento                                                                                               | url (caminho para a imagem) ou none                                                                    |
| [`background-position`](https://www.w3schools.com/cssref/pr_background-position.asp) | Define a posição inicial da imagem de fundo do elemento                                                                                           | combinação de 2 valores (left, top, right, bottom e center), (x% e y%) ou (x e y)                      |
| [`background-size`](https://www.w3schools.com/cssref/css3_pr_background-size.asp)    | Define o tamanho da imagem de fundo do elemento                                                                                                   | auto, cover, contain, [**unidades de tamanho**](#unidades-de-tamanho) ou porcentagem do tamanho do pai |
| [`opacity`](https://www.w3schools.com/cssref/css3_pr_opacity.asp)                    | Define o nível de opacidade/transparência de um elemento                                                                                          | de 0 a 1 onde 0.0 é totalmente transparente e 1.0 totalmente opaco                                     |

###### tags: `cheatsheet` `front-end` `módulo 1`