---
language: css
filename: learncss.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:
- ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"]
lang: pt-br
---
Nos primeiros dias da web não havia elementos visuais, apenas texto puro. Mas com maior desenvolvimento de navegadores da web, páginas web totalmente visuais também se tornou comum.
CSS ajuda a manter a separação entre o conteúdo (HTML) e o look-and-feel de uma página web.
CSS permite atingir diferentes elementos em uma página HTML e atribuir diferentes propriedades visuais para eles.
Este guia foi escrito para CSS2, embora CSS3 está rapidamente se tornando popular.
**NOTA:** Porque CSS produz resultados visuais, a fim de aprender, você precisa tentar de tudo em um playground CSS como [dabblet](http://dabblet.com/).
O foco principal deste artigo é sobre a sintaxe e algumas dicas gerais.
```css
/* Comentários aparecem dentro do slash-asterisk, tal como esta linha!
não há "comentários de uma linha"; este é o único estilo de comentário * /
/* ####################
## SELETORES
#################### */
/* O seletor é usado para direcionar um elemento em uma página.
seletor { propriedade: valor; / * Mais propriedades ... * / }
/*
Abaixo um elemento de exemplo:
*/
/* Você pode direciona-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 utilizando o fator de que tem um atributo!*/
[attr] { font-size:smaller; }
/* ou que o atributo tem um valor específico */
[attr='value'] { font-size:smaller; }
/* começa com um valor (CSS 3) */
[attr^='val'] { font-size:smaller; }
/* ou terminando 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 | = 'en'] {font-size: smaller; }
/* Você pode concatenar diferentes seletores para criar um seletor mais estreito. Não
colocar espaços entre eles. */
classe div.some [attr $ = 'ue'] {}
/* Você pode selecionar um elemento que é filho de outro elemento */
div.some-parent> .class-name {}
/* Ou um descendente de um outro elemento. As crianças são os descendentes diretos de
seu elemento pai, apenas um nível abaixo da árvore. Pode ser qualquer descendentes
nivelar por baixo da árvore. */
div.some-parent class-name {}
/* Atenção: o mesmo seletor sem espaço tem um outro significado.
Você consegue adivinhar o que? */
div.some-parent.class-name {}
/* Você também pode selecionar um elemento com base em seu irmão adjacente */
.i am just-antes + .Este elemento {}
/* Ou qualquer irmão que o precede */
.i am-qualquer-elemento antes ~ .Este elemento {}
/* Existem alguns selectores chamado 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 de seu pai */
seletor:first-child {}
/* Qualquer elemento que é o último filho de seu pai */
seletor:last-child {}
/* Assim como pseudo classes, pseudo elementos permitem que você estilo 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
elemento */
* {} /* */ Todos os elementos
.parent * {} /* */ todos os descendentes
.parent> * {} /* */ todas as crianças
/* ####################
## PROPRIEDADES
#################### */
seletor {
/* Unidades de comprimento pode ser absoluta ou relativa. */
/* Unidades relativas */
width: 50%; /* Percentagem de largura 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 */
cor: RGB (10%, 20%, 50%); /* Como porcentagens rgb */
cor: rgba (255, 0, 0, 0,3); /* Como valores RGBA (CSS 3) NOTA: 0 . Isto é o
método recomendado. Consulte http://stackoverflow.com/questions/8284365 -->