---
language: CSS
filename: learncss-pt.css
contributors:
- ["Mohammad Valipour", "https://github.com/mvalipour"]
- ["Marco Scannadinari", "https://github.com/marcoms"]
- ["Geoffrey Liu", "https://github.com/g-liu"]
- ["Connor Shea", "https://github.com/connorshea"]
- ["Deepanshu Utkarsh", "https://github.com/duci9y"]
translators:
- ["Adaías Magdiel", "https://adaiasmagdiel.com/"]
- ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"]
- ["Gabriele Luz", "https://github.com/gabrieleluz"]
lang: pt-br
---
Páginas web são feitas utilizando HTML para demarcar o conteúdo.
O CSS (Cascading Style Sheets) é uma linguagem separada que é responsável
especificamente pela **aparência** da página.
Códigos CSS são construídos utilizando várias regras estáticas. Cada regra aceita um ou mais *seletores*
e aplica *valores* específicos de propriedades visuais. Essas propriedades são aplicadas
nos elementos da página indicados pelos seletores.
Este guia foi escrito com o CSS 2 em mente, complementado pelas novas
funcionalidades do CSS 3.
**NOTA:** Devido ao fato do CSS produzir resultados visuais, a fim de aprender, você precisa treinar em um playground CSS como [dabblet](http://dabblet.com/).
O foco principal deste artigo é a sintaxe e algumas dicas gerais.
```css
/* Comentários aparecem dentro de blocos com / e *, tal como esta linha!
Não há "comentários de uma linha"; este é o único estilo de comentário. * /
/* ####################
## SELETORES
#################### */
/* O seletor é usado para selecionar um elemento em uma página. */
seletor { propriedade: valor; /* Mais propriedades... */ }
/*
Abaixo um elemento de exemplo:
*/
/* Você pode seleciona-lo usando uma das suas classes CSS */
.class1 { }
/* Ou ambas as classes! */
.class1.class2 { }
/* Ou o seu nome */
div { }
/* Ou o seu id */
#anID { }
/* Ou através de um dos seus atributos! */
[attr] { font-size: smaller; }
/* Ou utilizando um atributo com um valor específico */
[attr='value'] { font-size: smaller; }
/* Um atributo que começa com um valor (CSS 3) */
[attr^='val'] { font-size:smaller; }
/* Ou termina com um valor (CSS 3) */
[attr$='ue'] { font-size: smaller; }
/* Ou contém um valor em uma lista separada por espaços */
[otherAttr~='foo'] {}
[otherAttr~='bar'] {}
/* Ou contém um valor em uma lista separada por hífen, ou seja, "-" (U + 002D) */
[otherAttr|='pt'] {font-size: smaller; }
/* Você pode combinar diferentes seletores para criar um seletor mais específica. Lembre-se
de não colocar espaço entre eles */
div.some-class[attr$='ue'] {}
/* Você pode selecionar um elemento que está diretamento dentro de outro elemento */
div.some-parent > .class-name {}
/* Ou um descendente desse elemento. Os filhos são os descendentes diretos de
um elemento pai, apenas um nível abaixo. Da seguinte forma, você pode seleciona qualquer
elemento que esteja dentro do elemento principal. */
div.some-parent .class-name {}
/* Atenção: o mesmo seletor sem espaço tem um outro significado.
Dessa forma você estará selecionando um elemento que contenha as duas classes. */
div.some-parent.class-name {}
/* Você também pode selecionar um elemento com base em seu irmão mais próximo */
.i-am-just-before + .this-element {}
/* Ou qualquer irmão que o precede */
.i-am-any-element-before ~ .this-element { }
/* Existem alguns seletores, chamados pseudo classes, que podem ser usados para selecionar um
elemento quando ele está em um determinado estado */
/* Por exemplo, quando o cursor passa sobre um elemento */
seletor:hover {}
/* Ou um link foi visitado */
seletor:visited {}
/* Ou não tenha sido visitado */
seletor:link {}
/* Ou um elemento em foco */
seletor:focus {}
/* Qualquer elemento que é o primeiro filho */
seletor:first-child {}
/* Qualquer elemento que é o último filho */
seletor:last-child {}
/* Assim como pseudo classes, pseudo elementos permitem que você estilize certas partes de um documento */
/* Corresponde a um primeiro filho virtual do elemento selecionado */
seletor::before {}
/* Corresponde a um último filho virtual do elemento selecionado */
seletor::after {}
/* Nos locais apropriados, um asterisco pode ser utilizado como um curinga para selecionar
todos os elementos */
* {} /* Todos os elementos */
.parent * {} /* todos os descendentes */
.parent > * {} /* todos os filhos */
/* ####################
## PROPRIEDADES
#################### */
seletor {
/* Unidades de comprimento pode ser absoluta ou relativa. */
/* Unidades relativas */
width: 50%; /* Percentagem de largura do elemento pai */
font-size: 2em; /* Múltiplos de font-size original de elemento */
font-size: 2rem; /* Ou do elemento raiz font-size */
font-size: 2vw; /* Múltiplos de 1% da largura da janela de exibição (CSS 3) */
font-size: 2vh; /* Ou a sua altura */
font-size: 2vmin; /* Qualquer um de VH ou um VW é menor */
font-size: 2vmax; /* Ou superior */
/* Unidades absolutas */
width: 200px; /* Píxeis */
font-size: 20pt; /* Pontos */
width: 5cm; /* Centímetros */
min-width: 50mm; /* Milímetros */
max-width: 5 polegadas; /* Polegadas */
/* Cores */
color: #F6E; /* Formato hexadecimal curto */
color: #FF66EE; /* Formato hexadecimal longo */
color: tomato; /* Uma cor nomeada */
color: rgb(255, 255, 255); /* Como valores rgb */
color: RGB(10%, 20%, 50%); /* Como porcentagens rgb */
color: rgba(255, 0, 0, 0,3); /* Como valores RGBA (CSS 3) NOTA: 0 . Esse é o
método recomendado. Consulte http://stackoverflow.com/questions/8284365 -->