Merge branch 'master' into master

1 files changed, 54 insertions, 13 deletions

diff --git a/pt-br/css-pt.html.markdown b/pt-br/css-pt.html.markdown
index b1fbd961..38937894 100644
--- a/pt-br/css-pt.html.markdown
+++ b/pt-br/css-pt.html.markdown
@@ -9,23 +9,25 @@ contributors:
     - ["Deepanshu Utkarsh", "https://github.com/duci9y"]
 translators:
     - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"]
+    - ["Gabriele Luz", "https://github.com/gabrieleluz"]
+
 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.
+No início 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 tornara comum.
 
-CSS ajuda a manter a separação entre o conteúdo (HTML) e o look-and-feel de uma página web.
+CSS ajuda a manter a separação entre o conteúdo (HTML) e o visual 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.
+Este guia foi escrito para CSS2, embora CSS3 esteja 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/).
+**NOTA:** Porque CSS produz resultados visuais, a fim de aprender, você precisa treinar 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 * /
+   Não há "comentários de uma linha"; este é o único estilo de comentário * /
 
 /* ####################
    ## SELETORES
@@ -40,7 +42,7 @@ Abaixo um elemento de exemplo:
 <div class='class1 class2' id='anID' attr='value' otherAttr='pt-br foo bar' />
 */
 
-/* Você pode direciona-lo usando uma das suas classes CSS */
+/* Você pode direcioná-lo usando uma das suas classes CSS */
 .class1 { }
 
 /* ou ambas as classes! */
@@ -80,9 +82,9 @@ 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. */
+/* Ou um descendente de um outro elemento. Os filhos são os descendentes diretos de
+   seu elemento pai, apenas um nível abaixo da árvore. Pode ser quaisquer descendentes
+   nivelados por baixo da árvore. */
 div.some-parent class-name {}
 
 /* Atenção: o mesmo seletor sem espaço tem um outro significado.
@@ -95,7 +97,7 @@ div.some-parent.class-name {}
 /* 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
+/* 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 */
@@ -116,7 +118,7 @@ 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 */
+/* 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 {}
@@ -125,7 +127,7 @@ seletor::before {}
 seletor::after {}
 
 /* Nos locais apropriados, um asterisco pode ser utilizado como um curinga para selecionar todos
-   elemento */
+   os elementos */
 * {} /* */ Todos os elementos
 .parent * {} /* */ todos os descendentes
 .parent> * {} /* */ todas as crianças
@@ -179,7 +181,7 @@ seletor {
 
 ## Uso
 
-Guardar uma folha de estilo CSS com a extensão `.css`.
+Salvar uma folha de estilo CSS com a extensão `.css`.
 
 ```xml
 <!-- Você precisa incluir o arquivo css no da sua página <head>. Isto é o
@@ -236,6 +238,45 @@ A precedência de estilo é a seguinte. Lembre-se, a precedência é para cada
 * `B` é o próximo.
 * `D` é a última.
 
+## Media Queries
+Media queries são recursos do CSS3 que permitem especificar quando determinadas regras de CSS devem ser aplicadas; é possível aplicar regras diferentes quando a página é impressa, quando a tela possui determinadas dimensões ou densidade de pixels e quando é lida por um leitor de tela. Media queries não adicionam especificidade ao seletor.
+
+```css
+/* Uma regra que será aplicada a todos os dispositivos */
+h1 {
+  font-size: 2em;
+  color: white;
+  background-color: black;
+}
+
+/* Altera a cor do h1 para utilizar menos tinta durante a impressão */
+@media print {
+  h1 {
+    color: black;
+    background-color: white;
+  }
+}
+
+/* Altera o tamanho da fonte quando exibida numa tela com pelo menos 480px de largura */
+@media screen and (min-width: 480px) {
+  h1 {
+    font-size: 3em;
+    font-weight: normal;
+  }
+}
+```
+Media queries podem incluir os seguintes atributos: `width`, `height`, `device-width`, `device-height`, `orientation`, `aspect-ratio`, `device-aspect-ratio`, `color`, `color-index`, `monochrome`, `resolution`, `scan`, `grid`. A maioria desses atributos pode ser prefixada com `min-` ou `max-`.
+
+O atributo `resolution` não é suportado em dispositivos mais antigos. Em vez disso, use `device-pixel-ratio`.
+
+Muitos smartphones e tablets tentarão renderizar a página como se estivesse num desktop a menos que você utilize a meta-tag `viewport`.
+
+```html
+<head>
+  <meta name="viewport" content="width=device-width; initial-scale=1.0">
+</head>
+```
+
 ## Compatibilidade
 
 A maior parte dos recursos do CSS 2 (e muitos em CSS 3) estão disponíveis em todos os navegadores e dispositivos. Mas é sempre boa prática para verificar antes de usar um novo recurso.