Flexbox - Aprendendo desenvolvimento web

Flexbox
=======

* Anterior  (en-US)
* Menu: CSS layout
* Próxima  (en-US)

Uma nova tecnologia, mas com suporte bastante difundido entre navegadores, o Flexbox está se tornando apto para uso geral. Flexbox provê ferramentas para criação rápida de layouts complexos e flexíveis, e características que se mostraram historicamente difíceis com CSS. Este artigo explica todos os seus fundamentos.

|  |  |
| --- | --- |
| Pré-requisitos: |
 HTML básico (estude
 Introdução a HTML), e uma ideia de como CSS funciona (estude
 Introdução a CSS (en-US).)
  |
| Objetivo: | Aprender como usar o sistema de Flexbox layout para criar web layouts. |

Por quê *Flexbox*?
------------------

Por um longo tempo, as únicas ferramentas compatíveis entre browsers disponíveis para criação de layouts CSS eram coisas como floats (en-US) e posicionamento (en-US). Estas são boas e funcionam, mas em alguns casos também são limitadas e frustrantes.

Os requisitos de layouts a seguir são difíceis ou impossíveis de se conseguir com estas ferramentas, em qualquer tipo conveniente e flexível:

* Centralizar um bloco de conteúdo verticalmente dentro de seu pai.
* Fazer com que os filhos de um container ocupe uma quantidade igual de largura/altura disponível, independente da quantidade de largura/altura disponível.
* Fazer todas as colunas de um layout com múltiplas colunas adotem a mesma altura, mesmo que contenham uma quantidade diferente de conteúdo.

Como você verá nas seções subsequentes, *flexbox* faz muitas tarefas de layouts de maneira mais fácil. Vamos nos aprofundar!

Introduzindo um exemplo simples
-------------------------------

Neste artigo nós vamos trabalhar uma série de exercícios para ajudá-lo a entender como o flexbox funciona. Para começar, você deve fazer uma cópia local do arquivo inicial — flexbox0.html do nosso repositório no github — carregue-o em um navegador moderno (como Firefox ou Chrome), e abra o arquivo no seu editor de código. Você pode ver a página aqui também.

Você verá que temos um elemento `<header>` com um cabeçalho no nível superior dentro dele, e um elemento `<section>` contendo três `<article>`s. Nós vamos usá-los para criar um layout padrão de três colunas.

![](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example1.png)

Especificando os elementos a serem definidos como caixas *flex*
---------------------------------------------------------------

Para iniciar, vamos definir quais elementos serão flexible boxes. Para isto, temos que definir um valor especial de `display` no elemento pai dos elementos que queremos afetar. neste caso são os elementos `<article>`, portanto vamos definir o valor no elemento `<section>` (que se torna um flex container):

```css
section {
  display: flex;
}
```

O resultado disso deve ser algo assim:

![](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example2.png)

Então, esta única declaração nos dá tudo que precisamos — incrivel, certo? Nós temos um layout de múltiplas com tamanhos iguais, e todas as colunas tem a mesma altura. Isto porque o valor padrão dado aos flex items (os filhos do flex container) são configurados para resolver problemas comuns, como este. Voltaremos a este assunto depois.

**Nota:** Você pode definir também ao `display` o valor `inline-flex` se quiser colocar os items em linha como flexible boxes.

Um aparte no modelo *flex*
--------------------------

Quando os elementos são definidos como flexibles boxes, eles são dispostos ao longo de dois eixos:

![flex_terms.png](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox/flex_terms.png)

* O ***main axis*** é o eixo que corre na direção em que os flex items estão dispostos (por exemplo, as linhas da página, ou colunas abaixo da página.) O início e o fim do eixo é chamado ***main start*** e ***main end***.
* O ***cross axis*** é o eixo perpendicular que corre na direção em que os flex items são dispostos. O início e o fim deste eixo são chamados de ***cross start*** e ***cross end***.
* O elemento pai que possui `display: flex` configurado ( `<section>` em nosso exemplo) é chamado de ***flex container***.
* Os itens iniciados como flexible boxes dentro do flex container são chamados ***flex items*** (o `<article>` em nosso caso).

Tenha esta terminologia em mente à medida que passar para as seções subsequentes. Você pode voltar a esta referência se ficar confuso quanto aos termos usados inicialmente.

Colunas ou linhas?
------------------

Flexbox possui uma propriedade chamada `flex-direction` que especifica a direção do eixo principal (em qual direção os filhos da *flexbox* estarão arranjados) — que por padrão seu valor é `row` (linha), que faz com que eles fiquem arranjados numa linha na direção que o seu navegador está configurado de acordo com a direção de leitura do seu idioma (da esquerda para a direita, no caso do inglês ou português).

Experimente adicionar a seguinte declaração na seção de sua regra:

```css
flex-direction: column;
```

Você verá que isso organiza os elementos no layout de coluna, assim como eles estavam antes de adicionarmos qualquer regra CSS. Antes de você seguir, remova essa declaração do seu exemplo.

**Nota:** Você também pode arranjar itens flexíveis em direção reversa usando os valores `row-reverse` e `column-reverse`. Experimente usar esses valores no seu exemplo também!

Embrulhamento
-------------

Um problema que aparece quando você tem uma quantidade fixa de elementos com a mesma largura e altura no seu esquema é que eventualmente seus elementos filhos *flexbox* irão sobrepor seu elemento pai (*container*), quebrando o layout. Dê uma olhada no nosso exemplo flexbox-wrap0.html, e experimente visualizá-lo online (tenha uma cópia local desse arquivo no seu computador se você quiser continuar acompanhando os exemplos):

![](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example3.png)

Aqui vemos que os filhos estão de fato saindo fora do elemento recipiente (*container*). Uma maneira de consertar isso é adicionando a seguinte declaração na seção de sua regra CSS:

```css
flex-wrap: wrap;
```

Experimente isso agora; você verá que o layout parece muito melhor agora com essa regra:

![](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example4.png)Agora temos várias linhas — tantos elementos filhos *flexbox* estão encaixados em cada linha quantos fazem sentido, e qualquer sobreposição é movida para a próxima linha. A declaração `flex: 200px` configurada nos elementos `<article>` significa que cada um terá pelo menos 200 pixels de largura; discutiremos essa propriedade mais detalhadamente mais tarde. Você também deve notar que os últimos filhos na última linha estão mais largos para que a linha inteira possa ser preenchida.

Mas ainda tem mais para fazermos com isso. Primeiro, experimente mudar sua propriedade `flex-direction` para o valor `row-reverse` — agora você verá que ainda tem um layout com várias linhas, mas ele começa no canto oposto da janela do navegador e segue na direção reversa.

Forma abreviada: *flex-flow*
----------------------------

A esta altura vale ressaltar que existe uma abreviação para as regras `flex-direction` e `flex-wrap`: a `flex-flow`. Logo, você pode substituir as seguintes regras

```css
flex-direction: row;
flex-wrap: wrap;
```

por

```css
flex-flow: row wrap;
```

Dimensionamento flexível de elementos *flex*
--------------------------------------------

Vamos agora voltar ao nosso primeiro exemplo, e ver como podemos controlar qual a proporção de espaço os elementos *flex* pode tomar. Localize sua cópia local do arquivo flexbox0.html, ou tenha uma cópia de flexbox1.html como um novo ponto de partida (veja online).

Primeiro adicione a seguinte regra no final do seu CSS:

```css
article {
  flex: 1;
}
```

Esse é um valor relativo sem unidade que define quanto de espaço disponível pelo eixo principal cada elemento *flex* pode ter. Neste caso, estamos dando para cada elemento `<article>` o valor de 1, que significa que eles terão uma quantidade igual de espaço restante depois de coisas como preenchimento (`padding`) e margem (`margin`) forem definidos. É uma proporção, o que significa que dado que mesmo que você coloque o valor de "400000", para cada elemento *flex*, terá o mesmo efeito que o valor "1" previamente colocado.

Agora, adicione a seguinte regra abaixo da última:

```css
article:nth-of-type(3) {
  flex: 2;
}
```

Assim que você atualizar a página, você verá que o terceiro elemento `<article>` ocupa duas vezes mais do espaço disponível que os outros dois — existe agora quatro unidades na proporção total disponível. Os dois primeiros elementos *flex* tem uma unidade cada, dessa proporção, logo cada um deles ocupam 1/4 do espaço disponível. O terceiro tem 2 unidades, logo ele ocupa 2/4 (ou metade, 1/2) do espaço disponível.

Você também pode especificar um valor de tamanho mínimo para a regra *flex*. Experimente atualizar a regra para o `<article>` existente para que fique assim:

```css
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}
```

Isso basicamente diz o seguinte: "Para cada elemento *flex* primeiro será dado 200px do espaço disponível. Depois, o restante do espaço disponível será distribuído entre os elementos, de acordo com a unidade de proporção definida.". Atualize a página e você verá a diferença de como o espaço é distribuído.

![](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example1.png)

O valor real de cada caixa *flex* pode ser visto pela sua flexibilidade/responsividade — se você redimensionar a janela do navegador, ou adicionar outro elemento `<article>`, o layout continua funcionando sem quebrar.

*flex*: Forma abreviada ou forma normal?
----------------------------------------

`flex` é uma propriedade abreviada que pode especificar até três valores diferentes:

* O valor de proporção sem unidade que falamos sobre ele acima. Ele também pode ser especificado individualmente usando a regra `flex-grow` (en-US).
* Um segundo valor de proporção sem unidade — `flex-shrink` (en-US) — que convém ser usado quando os elementos *flex* estão sobrepondo a elemento recipiente (*container*). Este especifica qual a quantidade será retirada do tamanho de cada elemento *flex*, para que ele não ultrapasse o valor do elemento recipiente (*container*). Esta é uma funcionalidade bem avançada do *flexbox*, e não será abordada neste artigo.
* O valor mínimo para o tamanho que discutimos acima. Este pode ser especificado individualmente usando a regra `flex-basis` (en-US).

Aconselhamos usar sempre a forma abreviada a menos que você precise usar a regra normal (por exemplo para sobrescrever algum valor pré-definido). As regras normais, isto é não abreviadas, geram muito mais código e podem gerar confusão.

Alinhamento Horizontal e Vertical
---------------------------------

Você também pode usar as funcionalidade do *flexbox* para alinhar elementos no eixo principal ou no eixo transversal (relembre esse assunto na seção Um aparte no modelo flex). Vamos explorar isso olhando para um outro exemplo — flex-align0.html (veja online) — o qual vamos transformá-lo num botão/barra de ferramentas bem feito e flexível. Neste momento você verá uma barra de menu horizontal, com alguns botões expremidos no canto superior esquerdo:

![](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example5.png)

Primeiro, tenha uma cópia local desse exemplo.

Agora, adicione o seguinte trecho ao final do CSS no arquivo do exemplo:

```css
div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
```

Atualize a página e você verá que os botões estão agora bem arranjados no centro, horizontalmente e verticalmente. Fizemos isso através de duas novas propriedades.

**Nota:** Nesse exemplo, o eixo principal é representado horizontalmente e o eixo transversal é o vertical.

`align-items` controla onde os elementos *flex* ficam no eixo transversal:

* Por padrão, seu valor é `stretch`, que estica todos os elementos *flex* para preencher o elemento pai na direção do eixo transversal. Se o elemento pai não tem largura fixa na direção do eixo transversal, então todos os elementos *flex* esticarão até o mais comprido dos elementos *flex*. Foi assim que o nosso primeiro exemplo ficou com colunas de mesma altura por padrão.
* O valor `center` que usamos no exemplo acima, faz com que os elementos mantenham suas dimensões intrínsecas, mas que seja centralizados ao longo do eixo transversal. É por isso que os botões do nosso exemplo atual estão centralizados verticalmente.
* Você também pode colocar valores como `flex-start` e `flex-end`, os quais alinharão todos os elementos no início ou fim do eixo transversal, respectivamente. Veja `align-items` para maiores detalhes.

Você pode sobrescrever o comportamento de `align-items` para elementos individuais, usando a regra `align-self` nesses elementos. Por exemplo, experimente adicionar o seguinte trecho no seu CSS:

```css
button:first-child {
  align-self: flex-end;
}
```

Veja qual efeito isso dá, e remova novamente quando terminar.

`justify-content` (en-US) controla onde os elementos *flex* ficam no eixo principal.

* O valor padrão é `flex-start`, que faz com que todos os elementos estejam no início do eixo principal.
* Você pode usar `flex-end` para que eles fiquem no final.
* `center` também é um valor para `justify-content` (en-US), e fará com que os elementos *flex* fiquem no centro do eixo principal.
* O valor que usamos acima, `space-around`, é útil pois ele distribui todos os elementos igualmente pelo eixo principal, com um pouquinho de espaço no final.
* Existe um outro valor, `space-between`, o qual é muito similar ao `space-around`, exceto que ele não deixa nenhum espaço no final.

Nós sugerimos que você brinque um pouco mais com essas regras e seus valores para ver como funcionam ainda mais, antes de seguir nos estudos.

Ordenação de elementos *flex*
-----------------------------

O *flexbox* também tem uma funcionalidade para alteração da ordem dos elementos *flex* no layout, sem afetar a ordem no código fonte HTML. Esta é mais uma coisa que é impossível fazer nos métodos tradicionais de esquema de layouts.

O código para fazer isso é bem simples: experimente adicionar o seguinte CSS ao final do código do exemplo da barra de botões:

```css
button:first-child {
  order: 1;
}
```

Atualize seu navegador, você verá que o botão "*Smile*" foi movido para o final do eixo principal. Vamos falar sobre como isso funciona com mais detalhes:

* Por padrão, todos os elementos *flex* possuem uma propriedade `order` (en-US) com valor 0 (zero).
* Elementos *flex* com valores maiores de `order` (en-US), aparecerão depois na tela, do que elementos com valores menores, os quais aparecem antes.
* Elementos *flex* com o mesmo valor aparecerão de acordo com a ordem que possuem no documento HTML. Logo, se você tiver quatro elementos com os seguintes valores para `order` (en-US): 2, 1, 1 e 0, eles aparecerão na tela na seguinte ordem: 4º, 2º, 3º e 1º elemento, respectivamente.
* O 3º elemento aparece depois do 2º pois ele tem o mesmo valor para `order` (en-US) mas está definido depois no documento fonte.

Você também pode usar valores negativos para fazer elementos aparecerem antes do(s) elemento(s) definidos com `order` (en-US) 0 (zero). Por exemplo, Você poderia fazer com que o botão "*Blush*" aparecesse no começo do eixo principal (horizontal), usando a seguinte regra:

```css
button:last-child {
  order: -1;
}
```

Elementos *flex* aninhados
--------------------------

É possível criar layouts bem complexos com *flexbox*. É perfeitamente aceitável configurar um elemento *flex* para também ser um *container*, para que seus filhos também se comportem como caixas *flex*. Dê uma olhada em complex-flexbox.html (veja também online).

![](/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example7.png)

O HTML desse exemplo é relativamente simples. Temos um elemento `<section>` contendo três `<article>`. O terceiro desses `<article>` contém três elementos `<div>`:
```

section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button
```

Vamos dar uma olhada no código que usamos no layout.

Primeiro, configuramos para que os filhos da `<section>` se arranjem como elementos *flex*.

```css
section {
  display: flex;
}
```

Em seguida, configuramos alguns valores *flex* nos próprios elementos `<article>`. Veja especialmente a segunda regra aqui — estamos configurando para que o terceiro `<article>` tenha seus filhos arranjados como elementos *flex* também, mas desta vez eles estarão dispostos em coluna.

```css
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}
```

Depois, selecionamos o primeiro elemento `<div>`. Primeiro usamos `flex:1 100px;` para efetivamente dar a ele a altura de 100px, depois configuramos para que seus filhos (os elementos `<button>`) se arranjem como elementos *flex*. Aqui, nós os arranjamos em uma linha que os envolvem, e os alinhamos no centro do espaço disponível, como fizemos no exemplo do botão individual que vimos anteriormente:

```css
article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}
```

Finalmente, configuramos alguns tamanhos no botão, mas o mais interessante é que demos a ele o valor 1 para a propriedade *flex*. Isso dá um resultado interessante, que você verá se redimensionar a largura da janela do seu navegador. Esses botões tomarão o máximo de espaço que puderem e ficarão ao máximo na mesma linha, se puderem, mas quando não puderem mais caber na mesma linha, os que estão muito apertados irão para novas linhas de forma que o layout não quebre e o conteúdo ainda esteja legível ao usuário.

```css
button {
  flex: 1;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}
```

Compatibilidade com navegadores
-------------------------------

 O suporte a f*lexbox* está disponível nos navegadores mais novos — Firefox, Chrome, Opera, Microsoft Edge e IE 11, nas versões mais novas do Android e iOS, etc.
 Contudo você deve estar ciente que ainda existem navegadores antigos em uso que não suportam a regra *flexbox* (ou até suportam, mas numa versão desatualizada).

Enquanto você está apenas aprendendo ou testando, a compatibilidade entre navegadores não importa muito; no entanto se você pretende usar o *flexbox* num site de verdade, você precisa fazer testes e certificar que a experiência do usuário é aceitável em qualquer navegador possível.

*Flexbox* é um pouco mais ardiloso que algumas propriedades CSS. Por exemplo, se o suporte a sombras de CSS falta num browser, é muito menos provável de comprometer a usabilidade, afinal apenas as sombras dos elementos que não estarão aparecendo. Contudo, a falta de suporte à propriedade *flexbox* pode quebrar o layout do seu site, e comprometer a sua usabilidade.

Iremos discutir estratégias para contornar problemas complicados de compatibilidade entre navegadores num módulo futuro.

Sumário
-------

 Isso conclui nosso tour sobre o básico de *flexbox*. Esperamos que você tenha aproveitado, e que você continue aproveitando enquanto avança com seu aprendizado.
 No próximo tópico, veremos outro aspecto importante dos Esquemas em CSS: os sistemas de *grid,* como você pode ver nesse artigo sobre CSS grid layout.

* Anterior  (en-US)
* Menu: CSS layout
* Próxima  (en-US)


Layout de varias colunas - Aprendendo desenvolvimento web

Layout de varias colunas
========================

* Anterior  (en-US)
* Menu: CSS layout
* Próxima

A especificação de layout de várias colunas fornece um método de disposição do conteúdo em colunas, como você pode ver em um jornal. Este artigo explica como usar esse recurso.

|  |  |
| --- | --- |
| Pré requisitos: |
 HTML basico (estude
 Introduction to HTML) e uma ideia de como CSS funciona (estude
 Introduction to CSS (en-US)).
  |
| Objetivo: |
 Aprender como criar layouts de várias colunas em paginas web, tal qual
 estão formatadas as paginas de um jornal.
  |

Um exemplo basico
-----------------

Agora nós vamos explorar como usar layouts de varias colunas, frequentemente referido como *multicol*. Você pode começar pelo download do arquivo multicol - ponto de partida, e adicionar o CSS nos locais apropriados. Na parte inferior desta seção, você pode ver um exemplo real da aparência do código final.

Nosso ponto de partida contem um HTML simples; um invólucro com uma classe de `container` dentro do qual há um cabeçalho e alguns parágrafos.

O `<div>` com a classe de container se tornará nosso *muticol* container. Nós ativamos o *multicol* usando uma de duas propriedades `column-count` (en-US) ou `column-width` (en-US). A propriedade `column-count` criará tantas colunas quanto o valor que você atribuir; portanto, se voce adicionar o seguinte CSS à sua *stylesheet* e recarregar a pagina, você obterá três colunas:

```css
.container {
  column-count: 3;
}
```

As colunas que você criar têm larguras flexíveis - o navegador calcula quanto espaço será atribuido a cada coluna.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
```

```html
<div class="container">
  <h1>Simple multicol example</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>

  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>
```

```css
.container {
  column-count: 3;
}
```

Mude o seu CSS para usar `column-width`, como a seguir:

```css
.container {
  column-width: 200px;
}
```

O navegador agora fornecerá o maior número possível de colunas, do tamanho que você especificar; qualquer espaço restante é compartilhado entre as colunas existentes. Isso significa que você não terá exatamente a largura que especificar, a menos que seu container seja exatamente divisível por essa largura.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
```

```
<div class="container">
  <h1>Simple multicol example</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>

  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>
```

```css
.container {
  column-width: 200px;
}
```

Styling the columns
-------------------

The columns created by multicol cannot be styled individually. There is no way to make one column bigger than other columns, or to change the background or text color of a single column. You have two opportunities to change the way that columns display:

* Changing the size of the gap between columns using the `column-gap` (en-US).
* Adding a rule between columns with `column-rule` (en-US).

Using your example above, change the size of the gap by adding a `column-gap` property:

```css
.container {
  column-width: 200px;
  column-gap: 20px;
}
```

You can play around with different values — the property accepts any length unit. Now add a rule between the columns, with `column-rule`. In a similar way to the `border` (en-US) property that you encountered in previous lessons, `column-rule` is a shorthand for `column-rule-color` (en-US), `column-rule-style` (en-US), and `column-rule-width` (en-US), and accepts the same values as `border`.

```css
.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}
```

Try adding rules of different styles and colors.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}
```

```
<div class="container">
  <h1>Simple multicol example</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>

  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>
```

Something to take note of is that the rule does not take up any width of its own. It lies across the gap you created with `column-gap`. To make more space either side of the rule you will need to increase the `column-gap` size.

Columns and fragmentation
-------------------------

The content of a multi-column layout is fragmented. It essentially behaves the same way as content behaves in paged media — such as when you print a webpage. When you turn your content into a multicol container it is fragmented into columns, and the content breaks to allow this to happen.

Sometimes, this breaking will happen in places that lead to a poor reading experience. In the live example below, I have used multicol to lay out a series of boxes, each of which have a heading and some text inside. The heading becomes separated from the text if the columns fragment between the two.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
```

```html
<div class="container">
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
</div>
```

```css
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}
```

To control this behavior we can use properties from the CSS Fragmentation (en-US) specification. This specification gives us properties to control breaking of content in multicol and in paged media. For example, add the property `break-inside` (en-US) with a value of `avoid` to the rules for `.card`. This is the container of the heading and text, and therefore we do not want to fragment this box.

At the present time it is also worth adding the older property `page-break-inside: avoid` for best browser support.

```css
.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}
```

Reload the page and your boxes should stay in one piece.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
```

```
<div class="container">
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
</div>
```

```css
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}
```

Summary
-------

You now know how to use the basic features of multiple-column layout, another tool at your disposal when choosing a layout method for the designs you are building.

See also
--------

* CSS Fragmentation (en-US)
* Using multi-column layouts (en-US)
* Anterior  (en-US)
* Menu: CSS layout
* Próxima


Fluxo Normal - Aprendendo desenvolvimento web

Fluxo Normal
============

* Anterior
* Menu: CSS layout
* Próxima

Este artigo aborda o *Fluxo Normal* de alinhamento e acomodação do conteúdo de uma página HTML, na qual o desenvolvedor não inseriu estilos pessoais. Este fluxo é um padrão usado pelos navegodares web. É uma solução preguiçosa ou rápida. Se o *Fluxo Normal* por ventura não desagradar o programador, poupado será o seu tempo e esforço. Com o ônus adiado para quando ele quiser algo diferente.

|  |  |
| --- | --- |
| Prerrequisitos: |
 Introdução ao HTML (study
 Introduction to HTML), e uma noção de como o CSS funciona (study
 Introduction to CSS (en-US).)
  |
| Objectivo: |
 Explicar qual é o leiaute padrão aplicado pelos navegadores web - a um
 arquivo HTML - sempre que não houver estilo ou formatos definidos pelo
 desenvolvedor da referida página.
  |

Conforme detalhado na última lição de introdução ao leiaute, os elementos em uma página da web acomodam-se em Fluxo Normal, quando não é aplicada qualquer regra CSS para alterar a maneira como estes se comportam. And, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether. Starting with a solid, well-structured document that is readable in normal flow is the best way to begin any webpage. It ensures that your content is readable, even if the user is using a very limited browser or a device such as a screen reader that reads out the content of the page. In addition, as normal flow is designed to make a readable document, by starting in this way you are working with the document rather than fighting against it as you make changes to the layout.

Before digging deeper into different layout methods, it is worth revisiting some of the things you will have studied in previous modules with regard to normal document flow.

How are elements laid out by default?
-------------------------------------

First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier.

By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with `display: block;` (or even,`display: inline-block;` which mixes characteristics from both.)

That explains individual elements, but what about how elements interact with one another? The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block-level elements are laid out in the *block flow direction*, based on the parent's writing mode (*initial*: horizontal-tb) — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them. In English therefore, or any other horizontal, top to bottom writing mode, block-level elements are laid out vertically.

Inline elements behave differently — they don't appear on new lines; instead, they sit on the same line as one another and any adjacent (or wrapped) text content, as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing text or elements will move down to a new line.

If two adjacent elements both have the margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called margin collapsing, and we have met this before too.

Let's look at a simple example that explains all of this:

```html
<h1>Basic document flow</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p>
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements will
  <span>wrap onto a new line if possible (like this one containing text)</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>
```

```css
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}
```

Summary
-------

Now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design.

* Anterior
* Menu: CSS layout
* Próxima


O que é CSS? - Aprendendo desenvolvimento web

O que é CSS?
============

* Menu: First steps
* Próxima

**CSS** (Folhas de Estilo em Cascata) permite a você criar páginas web agradáveis, mas como isso funciona por baixo dos panos? Este artigo explica o que é CSS, com um exemplo de sintaxe simples, e, também, trata alguns conceitos-chaves sobre a linguagem.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimento básico sobre computador,
 softwares básicos instalados, conhecimento básico de
 como trabalhar com arquivos, e conhecimento básico sobre HTML (estude
 Introdução ao HTML.)
  |
| Objetivo: | Aprender o que é CSS. |

No módulo Introdução ao HTML vimos o que é HTML, e como ele é usado para fazer marcação de documentos. Estes documentos serão legíveis em um navegador web. Títulos serão mais largos do que textos comuns, parágrafos quebram em uma nova linha e tendo espaços entre eles. Links são coloridos e sublinhados para distingui-los do resto do texto. O que você está vendo é o estilo padrão do navegador - vários estilos básicos que o navegador aplica ao HTML, para garantir que ele será legível mesmo se não for explicitamente estilizado pelo autor da página web.

![The default styles used by a browser](/pt-BR/docs/Learn/CSS/First_steps/What_is_CSS/html-example.png)

No entanto, a web seria um lugar chato se todos os web sites tivessem estilos iguais ao mostrado na imagem acima. Usando CSS você pode controlar exatamente a aparência dos elementos HTML no navegador, apresentando a sua marcação com o design que desejar.

Para que serve o CSS?
---------------------

Como falamos antes, CSS é uma linguagem para especificar como documentos são apresentados aos usuários — como eles são estilizados, dispostos etc.

Um **documento** é normalmente um arquivo texto estruturado usando uma linguagem de marcação — HTML é a linguagem de marcação mais comum, mas você também pode encontrar outras, como SVG ou XML.

**Apresentar** um documento para um usuário significa convertê-lo para um formato utilizável pelo seu público. Browsers, como Firefox, Chrome (en-US), ou Edge (en-US) , são projetados para apresentar documentos visualmente, por exemplo, um uma tela de computador, projetor ou impressora.

**Nota:** **Observação**: Um navegador web é as vezes chamado de user agent (en-US), o que, basicamente, significa um programa de computador que representa uma pessoa por trás do sistema. Navegadores web são o principal tipo de agente do usuário que nos referimos quando falamos sobre CSS, contudo, ele não é o único. Há outros agentes de usuário disponíveis — tais como aqueles que convertem documentos HTML e CSS para PDF a serem impressos.

O CSS pode ser usado para estilizar um documento muito básico de texto — por exemplo, alterando a cor e tamanho dos títulos e links. Pode ser usado para criar layout — por exemplo, transformando uma simples coluna de texto em um layout (en-US) com uma área de conteúdo principal e um sidebar (barra lateral) para as informações relacionadas. Pode até ser usado para efeitos tais como animação (en-US). Dê uma olhada nos links deste parágrafo, para ver exemplos específicos.

Sintaxe CSS
-----------

CSS é uma linguagem baseada em regras. — Você define regras especificando grupos de estilo que devem ser aplicados para elementos particulares ou grupos de elementos na sua página web. Por exemplo, "Quero que o título principal, na minha página, seja mostrado como um texto grande e de cor vermelha.".

O código seguinte mostra uma regra CSS muito simples, que chegaria perto do estilo descrito acima:

```css
h1 {
  color: red;
  font-size: 5em;
}
```

A regra é aberta com um selector . Isso *seleciona* o elemento HTML que vamos estilizar. Neste caso, estamos estilizando títulos de nível um (`<h1>` (en-US)).

Temos, então, um conjunto de chaves `{ }`. Dentro deles, haverá uma ou mais **declarações**, que tomam a forma de pares **propriedade** e **valor**. Cada par especifica uma propriedade do(s) elemento(s) que estamos selecionando e, em seguida, então um valor que gostaríamos de atribuir à propriedade

Antes dos dois pontos, temos a propriedade, e, depois, o valor. CSS properties possui diferentes valores permitidos, dependendo de qual propriedade está sendo especificado. Em nosso exemplo, temos a propriedade `color`, que pode tomar vários valores para cor (en-US). Também temos a propriedade `font-size`. Essa propriedade pode ter vários unidades de tamanho (en-US) como um valor.

Uma folha de estilo CSS conterá muitas regras tais como essa, escrita uma após a outra.

```css
h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}
```

Você constatará que rapidamente aprende alguns valores, enquanto outros precisará pesquisar. As páginas de propriedades individuais no MDN dá a você uma maneira rápida de procurar propriedades e seus respectivos valores, quando você esquecer, ou desejar saber quais valores pode usar.

**Nota:** **Observação**: Você pode achar links para todas as páginas de propriedades CSS (junto com outros recursos CSS) listados no MDN referência CSS. Alternativamente, você deve se acostumar a pesquisar por "mdn *css-feature-name*" no seu motor de busca favorito sempre que precisar procurar mais informações sobre uma característica CSS. Por exemplo, experimente pesquisar por "mdn color" e "mdn font-size"!

Módulos CSS
-----------

Como existem tantas coisas que você pode estilizar com CSS, a linguagem é dividida em módulos. Verá referência a esses módulos a medida que explora o MDN e muita das páginas da documentação são organizadas em torno de um módulo em particular. Por exemplo, poderia dar uma olhada na referência MDN para os módulos Backgrounds and Borders (en-US) para descobrir qual é o seu objetivo, e quais diferentes propriedades e outras características ele contém. Você também encontrará links para a especificação CSS que define a tecnologia (veja abaixo).

Nesse ponto você não precisa se preocupar muito sobre como o CSS é estruturado. No entanto, isso pode tornar fácil achar informação se, por exemplo, você estiver ciente de que uma determinada propriedade provavelmente será encontrada entre outras coisas semelhantes e estiver, portanto, provavelmente na mesma especificação.

Para um exemplo específico, vamos voltar ao módulo Backgrounds e Borders — você pode achar que isso tem um senso lógico para as propriedades `background-color` e `border-color` (en-US) serem definidas neste módulo. E, você está certo!

### Especificações CSS

Todas as tecnologias de padrões web (HTML, CSS, JavaScript, etc.) são definidos em documentos gigantes chamados especificações (ou simplesmente "specs"), que são publicados por organizações de padrões (tais como W3C, WHATWG, ECMA, ou Khronos (en-US)) e definem precisamente como essas tecnologias devem se comportar.

Com CSS não é diferente — ele é desenvolvido por um grupo dentro do W3C chamado CSS Working Group. Esse grupo é formado por representantes de fornecedores de navegadores web e outras companhias que tem interesse em CSS. Também existe outras pessoas, conhecidas como peritos convidados *(invited experts*), que agem como vozes independentes; eles não são associados como um membro de alguma organização.

Novas características CSS são desenvolvidas, ou especificadas, pelo CSS Working Group. As vezes, porque um navegador em particular está interessado em alguma capacidade, outras vezes, porque designers web e desenvolvedores estão perguntando por uma característica, e, algumas vezes, porque o Working Group em si tem identificado uma necessidade. O CSS está em constante desenvolvimento, com novas peculiaridades ficando disponíveis. Contudo, uma ideia chave sobre CSS é que todos trabalham pesado para nunca alterar as coisas de uma maneira que não quebrem os sites antigos. Um site construído no ano 2000, usando um CSS limitado da época, deverá ainda ser utilizável em um navegador moderno!

Como iniciante no CSS, é provável que você ache as especificações CSS impressionantes — eles são direcionados a engenheiros para implementar suporte aos recursos nos agentes de usuário (navegadores), não para desenvolvedores lerem com o intuito de entender CSS. Muitos desenvolvedores experientes preferem consultar a documentação do MDN ou outros tutoriais. No entanto, vale a pena saber que eles existem, entender a relação entre o CSS que você usa, suporte ao navegador (veja abaixo), e os specs (especificações).

Suporte do navegador
--------------------

Uma vez que o CSS tenha sido especificado, então se torna útil para nós, em termos de desenvolvimento de páginas web, apenas se um ou mais navegadores implementá-los. Isso significa que o código foi escrito para transformar as instruções do nosso arquivo CSS em algo que possa ser mostrado na tela. Vamos olhar um pouco mais esse processo nas lições Como o CSS funciona. É inusitado implementarem uma característica ao mesmo tempo, e, geralmente, existe uma lacuna na qual se pode usar parte do CSS em alguns navegadores e em outros não. Por esse motivo, ser capaz de verificar o estado da implemtação é útil. Para cada página de propriedade no MDN, pode-se ver o estado dela, que se esta interessado. Assim, você saberá se pode usá-la em uma página.

A seguir, é apresentado o gráfico de dados compat para propriedade CSS `font-family`.

{{Compat}}A seguir
--------

Agora que você tem algum entendimento do que o CSS é, vamos ao Iniciando com CSS, onde pode começar a escrever alguma coisa, você mesmo.

* Menu: First steps
* Próxima


Como CSS é estruturado - Aprendendo desenvolvimento web

Como CSS é estruturado
======================

* Anterior
* Menu: First steps
* Próxima

Agora que você tem uma ideia sobre o que é o CSS e seu uso basico, é hora de olhar um pouco mais a fundo das estruturas da linguagem em si. Nós ja conhecemos muitos conceitos discutidos aqui, entretanto, você pode voltar para qualquer um em específico, se achar algum dos proximos conceitos um tanto confuso

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conceitos básicos de computação,
 softwares básicos instalados, conhecimentos básicos de
 operação com arquivos, básico de HTML (veja
 Introdução ao HTML), e uma ideia de
 Como funciona o CSS (en-US).
  |
| Objetivo: | Aprender as estruturas da sintaxe básica do CSS em detalhes. |

Aplicando CSS no seu HTML
-------------------------

A primeira coisa que você vai olhar é, os três métodos de aplicação do CSS em um documento.

### Folha de Estilos Externa

Em Começando com o CSS nós linkamos uma folha de estilos externas em nossa página. Isso é o método mais comum utilizado para juntar CSS em um documento, podendo utilizar tal método em multiplas páginas, permitindo você estillizar todas as páginas como as mesmas folha de estilos. Na maioria dos casos, as diferentes páginas do site vão parecer bem iguais entre si e por isso você pode usar as mesmas regras para o estilo padrão da página.

`Uma folha de estilos externa é quando você tem seu CSS escrito em um arquivo separado com uma extensão .css`, e você o refere dentro de um elemento `<link>` do HTML:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>
```

O arquivo CSS deve se parecer com algo nesse estilo:

```css
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
```

O atributo `href` do elemento `<link>`, precisa fazer referência a um arquivo em nosso sistema de arquivos.

No exemplo abaixo, o arquivo CSS está na mesma pasta que o documento HTML, mas você pode colocá-lo em outro lugar e reajustar o caminho marcado para encontrá-lo, como a seguir:

```html
<!-- Inside a subdirectory called styles inside the current directory -->
<link rel="stylesheet" href="styles/style.css" />

<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- Go up one directory level, then inside a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css" />
```

### Folha de estilos interna

Uma folha de estilos interna é usada quando você não tem um arquivo CSS externo, mas, ao contrário, coloca seu CSS dentro de elemento `<style>` localizado no `<head>` do documento HTML.

Deste modo, seu HTML se parecerá assim:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <style>
 h1 {
 color: blue;
 background-color: yellow;
 border: 1px solid black;
 }

 p {
 color: red;
 }
 </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>
```

Isso pode ser útil em algumas circunstâncias (talvez você esteja trabalhando em um sistema de gerenciamento de conteúdo - CMS - onde não tem permissão para modificar diretamente os arquivos CSS), entretanto isso não é tão eficiente quanto o uso de folhas de estilo externas — em um website, o CSS precisaria ser repetido em todas as páginas e atualizado em vários locais sempre que mudanças fossem necessárias.

### Estilos inline

Estilos inline são declarações CSS que afetam apenas um determinado elemento, inserido em um atributo `style`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
      Hello World!
    </h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>
```

**Por favor, não utilize isso a menos que seja estritamente necessário!** É péssimo para manutenção (você precisará atualizar a mesma informação diversas vezes em cada documento), além do que, mistura sua informação de estilização do CSS com sua informação de estrutura HTML, tornando seu código de difícil leitura e compreensão. Manter diferentes tipos de código separados torna o trabalho muito mais fácil para todos os que trabalham no código.

Existem alguns lugares onde o estilo embutido é mais comum, ou mesmo aconselhável. Você pode ter que recorrer ao uso deles se seu ambiente de trabalho for realmente restritivo (talvez o seu CMS permita apenas que você edite o corpo do HTML). Você também os verá sendo muito usados em e-mails em HTML de modo a obter compatibilidade com o maior número possível de clientes de e-mail.

Brincando com o CSS neste artigo
--------------------------------

Há muito CSS para brincar neste artigo. Para fazê-lo, recomendamos criar um novo diretório/pasta em seu computador e, dentro dele, criar uma cópia dos seguintes dois arquivos:

index.html:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiments</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Create your test HTML here</p>
  </body>
</html>
```

styles.css:

```css
/\* Create your test CSS here \*/

p {
  color: red;
}
```

Então, quando você encontrar algum CSS com o qual queira experimentar, substitua o conteúdo do <*body*> HTML por algum HTML para estilizar e comece a adicionar CSS para estilizá-lo dentro do seu arquivo CSS.

Se você não estiver usando um sistema em que possa criar arquivos facilmente, você pode usar o editor interativo abaixo para experimentar.

Continue lendo e divirta-se!

Seletores
---------

Não é possível falar de CSS sem conhecer os seletores, e nós já descobrimos vários tipos diferentes no tutorial Começando com o Css. Um seletor é o modo pelo qual nós apontamos para alguma coisa no nosso documento HTML para aplicar os estilos à ela. Se os seus estilos não forem aplicados, então é provável que o seu seletor não esteja ligado aquilo que você pensa que ele deveria.

Cada regra CSS começa com um seletor ou uma lista de seletores para informar ao navegador em qual elemento ou elementos as regras devem ser aplicadas. Todos os exemplos a seguir são válidos como seletores ou listas de seletores.

```css
h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro
```

**Tente criar algumas regras CSS que usem os seletores acima e algum HTML para ser estilizado por eles. Se você não souber o que significa alguma das sintaxes acima, tente procurar no MDN!**

**Nota:** Você aprenderá muito mais sobre seletores em nossos tutoriais CSS selectors, no próximo módulo.

### Especificidade

Muitas vezes, haverá cenários em que dois seletores podem selecionar o mesmo elemento HTML. Considere a folha de estilo abaixo, onde há uma regra com um seletor p que definirá parágrafos como azuis e também uma classe que definirá elementos selecionados como vermelhos.

```css
.special {
  color: red;
}

p {
  color: blue;
}
```

Digamos que em nosso documento HTML tenhamos um parágrafo com uma classe `special`. Ambas as regras poderiam ser aplicadas, então qual delas vence? Qual cor você acha que nosso parágrafo ficará?

```html
<p class="special">What color am I?</p>
```

A linguagem CSS possui regras para controlar qual regra vencerá em caso de colisão - elas são chamadas de **cascata** e **especificidade**. No bloco de código abaixo, definimos duas regras para o seletor p, mas o parágrafo acaba sendo colorido de azul. Isso ocorre porque a declaração que o define como azul aparece posteriormente na folha de estilo, e estilos mais recentes substituem os anteriores. Isso é a cascata em ação.

```css
p {
  color: red;
}

p {
  color: blue;
}
```

No entanto, no caso do nosso bloco anterior com o seletor de classe e o seletor de elemento, a classe vencerá, tornando o parágrafo vermelho - mesmo que apareça anteriormente na folha de estilo. Uma classe é descrita como sendo mais específica, ou tendo mais especificidade do que o seletor de elemento, então ela vence.

**Experimente o exemplo acima por si mesmo - adicione o HTML ao seu experimento, em seguida, adicione as duas regras p {...} à sua folha de estilo. Em seguida, altere o primeiro seletor p para .special para ver como ele muda o estilo.**

As regras de especificidade e cascata podem parecer um pouco complicadas no início e são mais fáceis de entender depois que você tiver acumulado mais conhecimento de CSS. Em nosso artigo Cascade and inheritance, que você verá no próximo módulo, explicarei isso em detalhes, incluindo como calcular a especificidade. Por enquanto, lembre-se de que isso existe e que às vezes o CSS pode não ser aplicado como você espera porque algo mais em sua folha de estilo tem uma especificidade maior. Identificar que mais de uma regra pode ser aplicada a um elemento é o primeiro passo para resolver esses problemas.

Propriedades e valores
----------------------

Em seu nível mais básico, CSS consiste em dois blocos de construção:

* **Properties**: Identificadores legíveis para humanos que indicam quais características estilísticas (por exemplo, `font-size`, `width`, `background-color`) que você deseja alterar.
* **Valores**: Cada propriedade especificada recebe um valor, que indica como você deseja alterar essas características estilísticas (por exemplo, o que deseja mudar a fonte, a largura ou a cor de fundo para).

A imagem abaixo destaca uma única propriedade e valor. O nome da propriedade é `color` e o valor é `blue`.

![Uma declaração destacada no CSS](/pt-BR/docs/Learn/CSS/First_steps/How_CSS_is_structured/declaration.png)

A property paired with a value is called a *CSS declaration*. CSS declarations are put within *CSS Declaration Blocks*. This next image shows our CSS with the declaration block highlighted.

Uma propriedade associada a um valor é chamada de *Declaração CSS*. As declarações CSS são colocadas dentro de *Blocos de Declaração CSS*. A próxima imagem mostra nosso CSS com o bloco de declaração destacado.

![Uma declaração de bloco destacada](/pt-BR/docs/Learn/CSS/First_steps/How_CSS_is_structured/declaration-block.png)

Por fim, blocos de declarações CSS são pareados com *seletores* para produzir *Conjuntos de Regras CSS* (ou *Regras CSS*). Nossa imagem contém duas regras, uma para o seletor `h1` e outra para o seletor `p`. A regra para o seletor h1 está destacada.

![A regra para h1 destacada](/pt-BR/docs/Learn/CSS/First_steps/How_CSS_is_structured/rules.png)

Definir propriedades CSS para valores específicos é a função central da linguagem CSS. O motor CSS calcula quais declarações se aplicam a cada elemento de uma página para ajustá-la e estilizá-la adequadamente. O que é importante lembrar é que tanto as propriedades quanto os valores diferenciam letras maiúsculas e minúsculas em CSS. A propriedade e o valor em cada par são separados por dois pontos (`:`).

**Tente procurar diferentes valores das seguintes propriedades e escrever regras CSS que as apliquem a diferentes elementos HTML:**

* **`font-size`**
* **`width`**
* **`background-color`**
* **`color`**
* **`border` (en-US)**

**Aviso:** **Importante**: Se uma propriedade é desconhecida ou se um valor não é válido para uma determinada propriedade, a declaração é considerada *inválida* e é completamente ignorada pelo motor CSS do navegador.

**Aviso:** **Importante**: Em CSS (e em outros padrões da web), a ortografia americana foi estabelecida como padrão a ser seguido quando houver incerteza linguística. Por exemplo, `color` deve ser *sempre* escrito como `color`. `colour` não funcionará.

### Funções

Embora a maioria dos valores sejam palavras-chave relativamente simples ou valores numéricos, existem alguns valores possíveis que assumem a forma de uma função. Um exemplo seria a função `calc()`. Essa função permite que você faça cálculos simples dentro do seu CSS, por exemplo:

```html
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
```

```css
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}
```

Isto é renderizado assim:

Uma função consiste no nome da função e, em seguida, em alguns parênteses nos quais os valores permitidos para essa função são inseridos. No exemplo `calc()` acima, estou pedindo para a largura desta caixa ser 90% da largura do bloco contenedor, menos 30 pixels. Isso não é algo que eu possa calcular com antecedência e simplesmente inserir o valor no CSS, pois não sei qual será 90%. Como em todos os valores, a página relevante no MDN terá exemplos de uso para que você possa ver como a função funciona.

Outro exemplo seriam os vários valores para `transform`, como `rotate()`.

```html
<div class="box"></div>
```

```css
.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}
```

A saída do código acima se parece com isso:

**Tente procurar diferentes valores das seguintes propriedades, e escreva regras CSS que as apliquem a diferentes elementos HTML:**

* **`transform`**
* **`background-image` (en-US), in particular gradient values**
* **`color`, in particular rgb/rgba/hsl/hsla values**
@rules
------

Até agora, não encontramos as regras, em inglês `@rules` (pronuncia-se "at-rules") do CSS. Estas são regras especiais que dão ao CSS algumas instruções sobre como se comportar. Algumas `@rules` são simples, com o nome da regra e um valor. Por exemplo, para importar uma folha de estilo adicional na sua folha de estilo CSS principal, você pode usar `@import`:

```css
@import "styles2.css";
```

Uma das `@rules` mais comuns que você encontrará é a `@media`, que permite usar media queries para aplicar CSS somente quando certas condições são verdadeiras (por exemplo, quando a resolução da tela está acima de um certo valor ou a tela é mais larga que uma largura específica).

Nesse CSS abaixo, temos um estilo que dá ao elemento `<body>` uma cor de fundo rosa. No entanto, usamos `@media` para criar uma seção do nosso estilo que será aplicada apenas em navegadores com uma viewport mais larga que 30em. Se o navegador for mais largo que 30em, a cor de fundo será azul.

```css
body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}
```

Você encontrará outras `@rules` durante estes tutoriais.

**Veja se você consegue adicionar uma consulta de mídia ao seu CSS que altere estilos com base na largura da viewport. Altere a largura da janela do seu navegador para ver o resultado.**

Atalhos
-------

Algumas propriedades como `font` (en-US), `background`, `padding`, `border` (en-US) e `margin` são chamadas de **propriedades abreviadas** - isso porque elas permitem que você defina vários valores de propriedade em uma única linha, economizando tempo e tornando seu código mais organizado no processo.

Por exemplo, está linha:

```css
/\* In 4-value shorthands like padding and margin, the values are applied
 in the order top, right, bottom, left (clockwise from the top). There are also other
 shorthand types, for example 2-value shorthands, which set padding/margin
 for top/bottom, then left/right \*/
padding: 10px 15px 15px 5px;
```

Faz a mesma coisa que todos eles juntos:

```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
```

Por exemplo, está linha:

```css
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
```

Faz a mesma coisa que todos eles juntos:

```css
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;
```

Não tentaremos ensinar isso exaustivamente agora - você encontrará muitos exemplos mais tarde no curso, e é aconselhável procurar os nomes das propriedades abreviadas em nossa Referência de CSS para saber mais.

**Tente adicionar as declarações acima ao seu CSS para ver como elas afetam o estilo do seu HTML. Tente experimentar com alguns valores diferentes.**

**Aviso:** Embora os atalhos geralmente permitam que você deixe de fora valores, eles então redefinem quaisquer valores que você não incluir para seus valores iniciais. Isso garante que um conjunto sensato de valores seja usado. No entanto, isso pode ser confuso se você estiver esperando que o atalho apenas mude os valores que passou.

Comentários
-----------

Assim como no HTML, você é incentivado a fazer comentários em seu CSS, para ajudá-lo a entender como seu código funciona quando voltar a ele depois de vários meses, e para ajudar outras pessoas a entenderem o código quando estiverem trabalhando nele.

Comentários em CSS começam com `/*` e terminam com `*/`. No bloco de código abaixo, foram usados comentários para marcar o início de diferentes seções de código distintas. Isso é útil para ajudar na navegação da sua base de código à medida que ela cresce - você pode procurar pelos comentários no seu editor de código.

```css
/\* Handle basic element styling \*/
/\* -------------------------------------------------------------------------------------------- \*/
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  /\* Let's special case the global font size. On large screen or window,
 we increase the font size for better readability \*/
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

/\* Handle specific elements nested in the DOM \*/
/\* -------------------------------------------------------------------------------------------- \*/
div p,
#id:first-line {
  background-color: red;
  background-style: none;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}
```

Os comentários também são úteis para *comentar* temporariamente partes do código para fins de teste, por exemplo, se você estiver tentando encontrar qual parte do seu código está causando um erro. No próximo exemplo, comentei as regras para o seletor `.special`.

```css
/\*.special {
 color: red;
}\*/

p {
  color: blue;
}
```

**Adicione alguns comentários ao seu CSS, para se acostumar a usá-los.**

Espaçamento
-----------

Espaços em branco significam espaços, tabulações e novas linhas. Da mesma forma que no HTML, o navegador tende a ignorar grande parte do espaçamento dentro do seu CSS; grande parte do espaçamento está presente apenas para ajudar na legibilidade.

No exemplo abaixo, temos cada declaração (e início/fim de regra) em sua própria linha - essa é uma maneira recomendada de escrever CSS, já que torna fácil manter e entender:

```css
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  background-style: none;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}
```

Você poderia escrever exatamente o mesmo CSS como abaixo, com grande parte do espaçamento removido - isto é, funcionalmente idêntico ao primeiro exemplo, mas é mais difícil de ler:

```css
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}
@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  background-style: none;
}
div p {
  margin: 0;
  padding: 1em;
}
div p + p {
  padding-top: 0;
}
```

O layout de código que você escolher geralmente é uma preferência pessoal, embora quando você começar a trabalhar em equipes, pode descobrir que a equipe existente tem seu próprio guia de estilo que especifica uma convenção acordada a seguir.

O espaçamento que você precisa ter cuidado no CSS é o espaçamento entre as propriedades e seus valores. Por exemplo, as seguintes declarações são CSS válidos:

```css
margin: 0 auto;
padding-left: 10px;
```

Mas os seguintes são inválidos:

```css
margin: 0auto;
padding- left: 10px;
```

`0auto` não é reconhecido como um valor válido para a propriedade `margin` (`0` e `auto` são dois valores separados), e o navegador não reconhece `padding-` como uma propriedade válida. Portanto, você sempre deve garantir que valores distintos estejam separados um do outro por pelo menos um espaço, mas mantenha os nomes das propriedades e os valores das propriedades juntos como uma única cadeia ininterrupta.

**Experimente brincar com espaçamento dentro do seu CSS, para ver o que quebra as coisas e o que não quebra.**

Qual é o próximo passo?
-----------------------

É útil entender um pouco sobre como o navegador pega seu HTML e CSS e transforma-o em uma página da web, então no próximo artigo — Como CSS Funciona — vamos dar uma olhada nesse processo.

* Anterior
* Menu: First steps
* Próxima


Como funciona o CSS - Aprendendo desenvolvimento web

Como funciona o CSS
===================

* Anterior
* Menu: First steps
* Próxima

Nós aprendemos o básico de CSS, porque e como escrever simples folhas de estílo. Nesta lição, nós daremos uma olhada em como um navegador transforma um CSS e HTML em uma página da web.

|  |  |
| --- | --- |
| Pré-requisito: |
 Alfabetização em computação básica,
 softwares básicos instalados, conhecimento básico sobre
 trabalhar com arquivos, e o básico de HTML (estude
 Introdução ao HTML.)
  |
| Objetivo: |
 Entender o básico sobre como o CSS e o HTML são interpretados pelo
 navegador (que em seu nome original chama-se browser do inglês), e o que
 acontece quando um browser encontra regras CSS mas não as compreende.
  |

Como o CSS funciona?
--------------------

Quando um navegador redenriza um documento, ele combina o documento com suas informações de estilo. E o documento é processado em estágios, nos quais estão listados abaixo. É sugerível ter em mente que esta é uma versão simplificada do que ocorre quando um navegador redenriza uma página web, e que diferentes navegadores podem manipular estes processos de diferentes formas. De toda forma, esta listagem é muito aproximada do processo comum feito pela maioria dos navegadores.

1. O navegador carrega o HTML (e.g. que é recebido pela internet).
2. Ele então converte o HTML para um DOM (*Document Object Model*). O DOM representa o documento na memória do computador. O DOM será também melhor detalhado na próxima seção.
3. O navegador então requisita a maioria dos recursos que estão lincados no documento HTML, elementos como imagens encorporadas e vídeos, e também, folhas de estilo CSS. O código em JavaScript é manipulado um pouco mais tarde durante o processo, e não falaremos muito sobre a manipulação do JavaScript agora para mantermos as coisas simples.
4. O navegador analisa o CSS encontrado (fetched) e interpreta as diferentes regras por meio de seus diferentes tipos de seletores em diferentes baldes (buckets), tais como elementos (ex: h1, h2), classes (.myElement), ID (#myNav), e outros mais. Baseado nos seletores encontrados, o navegador insere as regras de estilização que devem ser aplicadas para cada node no DOM, e anexa o estilo para os elementos como foram especificados nas folhas de estilização (este processo intermediário é chamado de render tree ou árvore de renderização).
5. A árvore de renderização é organizada na estrutura e deve aparecer depois das regras de estilo serem aplicadas ao documento.
6. O visual de visualização da página é por fim mostrado na tela (este estágio é chamado de *painting* ou pintura).

O diagrama a seguir também apresenta uma visão simples do processo.

![Rendering process overview](/pt-BR/docs/Learn/CSS/First_steps/How_CSS_works/rendering.svg)

Sobre o DOM
-----------

Um DOM uma estrutura árborea (tree-like). Cada elemento, atributo, ou fragmento de texto na linguagem de marcação (markup language) torna-se um DOM node (nó ou ponto de intersecção) (en-US) na estrutura de árvore. Os nodes (nós) são definidos por meio do relacionamento com outros nodes presentes DOM. Alguns elementos são pais ou superiores a elementos dentro de si (child node, ou em português, nós filhos ou nós secundários), e child nodes possuem elementos irmãos.

Compreender o DOM ajuda você organizar, debugar e manter seu CSS porque o DOM é onde seu CSS e o conteúdo do documento são combinados. Quando você começa a trabalhar com as DevTools do browser você estará navegando os elementos do DOM como itens ordenados selecionáveis para assim decidir quais regras de estilização aplicar.

Uma representação prática do DOM
--------------------------------

Ao invés de um longa e chata explicação, vamos observar um exemplo para vermos como um trecho real de um documento HTML é convertido em um DOM.

Pegue o seguinte código HTML:

```html
<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>
```

No DOM, o node (nó) especifica nosso elementro `<p>` como um elemento pai. Seus filhos são um text node e a árvore de nós que corresponde ao nossos elementos `<span>`. Os nós `SPAN` são também elementos pais, tendo os text nodes (textos dentro de si) como seus filhos:
```

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"
```

Esta é a forma como um browser interpreta o nosso trecho de documento HTML acima apresentado — O browser renderiza a árvore DOM e nos retorna uma saída no browser da seguinte forma:
```

p {
  margin: 0;
}
```

Aplicando CSS ao DOM
--------------------

Vamos adicionar um curto CSS ao nosso documento, para estiliza-lo. Novamente, usamos o trecho HTML seguinte:

```html
<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>
```

Vamos supor que aplicamos o seguinte CSS a ele:

```css
span {
  border: 1px solid black;
  background-color: lime;
}
```

O browser irá interpretar o HTML e criar um DOM baseado nele. Como a única regra de estilização CSS disponível possui um seletor `span`, o browser fará a combinação do CSS rapidamente! Ele irá aplicar a regra de estilo para cada um da árvore `<span>`s, e então paint (pintar) o resultado final na tela.

Ao atualizar há a seguinte saída:

Em nosso artigo Debugging CSS (en-US) no próximo módulo nós estaremos usando as DevTools do browser para debugar problemas no CSS, e aprenderemos mais sobre como o navegador interpreta o CSS.

O que acontece se um navegador não entende o CSS encontrado?
------------------------------------------------------------

Em uma lição anterior, eu mencionei que navegadores não implementam todo o novo CSS ao mesmo tempo. Em adição, muitas pessoas não usam a versão mais recente de um navegador. Dado que o CSS é processado o tempo todo, e que portanto está adiantado em relação ao que os browsers podem reconhecer, você pode imaginar o que acontece se um browser encontra um seletor ou uma declaração CSS que ele não reconhece.

A resposta é que ele não faz nada e vai para o próximo conteúdo em CSS!

Se um browser está analisando suas regras, e encontra uma propriedade ou valor que ele não entende, ele o ignora e segue para a próxima declaração. Ele vai fazer isto se você cometeu algum erro ou digitou incorretamente uma propriedade ou valor, ou se tal propriedade ou valor é recente e o browser ainda não o processa.

Similarmente, se um browser encontra um seletor que não comprende, ele o ignorará e seguirá para a próxima regra.

No exemplo abaixo usei a grafia em inglês britânico para a propriedade cor, o que a torna inválida e portanto ela não é reconhecida. Por isso, o parágrafo não recebe a coloração azul. Todos os outros CSS foram aplicados, no entanto, apenas aquele que foi considerado inválido foi ignorado.

```html
<p>Quero que este texto esteja grande, em negrito, e azul.</p>
```

```css
p {
  font-weight: bold;
  colour: blue; /\* grafia incorreta da propriedade cor \*/
  font-size: 200%;
}
```

Este comportamento é bastante útil. Ele significa que você pode usar o novo CSS como uma melhoria, sabendo que não ocorrerá um erro se ele não for completamente compreendido - o browser ou vai entender esta característica ou não. Em conjunto com a maneira que a cascata funciona, e o fato que browsers usarão o último CSS que eles encontrarem numa folha de estilos quando você possui duas regras com a mesma especificidade, você pode oferecer alternativas para browsers que não processam estilos CSS mais novos.

Isto funciona particularmente bem quando você usa um valor que é relativamente recente e que não é processado em todo lugar. Por exemplo, alguns browsers antigos não processam `calc()` como um valor. Eu posso dar um recuo com uma largura em pixels para um box, e então seguir e dar uma largura com o valor de `100% - 50px` com `calc()`. Browsers antigos irão utilizar a versão em pixels, ignorando a linha que trata de `calc()`, já que eles não a compreendem. Browsers mais novos irão interpretar inicialmente a linha que utiliza pixels, para em seguida a sobrepor com a linha utilizando `calc()` conforme ela aparece na cascata.

```css
.box {
  width: 500px;
  width: calc(100% - 50px);
}
```

Iremos visualizar várias outras maneiras de auxiliar diferentes browsers em lições futuras.

E por último
------------

Você está quase encerrando este módulo; só temos mais uma tarefa para fazer. No próximo artigo, você utilizará seu novo conhecimento para reestilizar um exemplo, testando seus aprendizados de CSS no processo.

* Anterior
* Menu: First steps
* Próxima


Iniciando com CSS - Aprendendo desenvolvimento web

Iniciando com CSS
=================

* Anterior
* Menu: First steps
* Próxima

Neste artigo iremos pegar um simples documento HTML e aplicar o CSS nele, aprendendo algumas coisas práticas sobre a linguagem no decorrer do processo.

|  |  |
| --- | --- |
| **pré-requisito**s: |
 Conhecimento básico sobre computador,
 softwares básicos instalados, conhecimento básico de
 como trabalhar com arquivos, e conhecimento básico sobre HTML (estude
 Introdução ao HTML.)
  |
| Objetivo: |
 Entender os fundamentos que vinculam um documento CSS a um arquivo HTML,
 e ser capaz de estilizar um texto simples com CSS.
  |

Iniciando com algum HTML
------------------------

Nosso ponto de partida e um documento HTML. Você pode copiar o código abaixo se desejar trabalhar no seu próprio computador. Salve-o como `index.html` em uma pasta, no seu computador.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSS</title>
  </head>

  <body>
    <h1>I am a level one heading</h1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span element</span> and also a
      <a href="http://example.com">link</a>.
    </p>

    <p>
      This is the second paragraph. It contains an <em>emphasized</em> element.
    </p>

    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item <em>three</em></li>
    </ul>
  </body>
</html>
```

**Nota:** **Observação**: Se você está lendo isso em um dispositivo móvel ou em um ambiente onde não possa criar arquivos, não se preocupe — editores de código ao vivo estão disponíveis abaixo para permitir que você escreva o código de exemplo aqui, nesta página.

Adicionando CSS para o nosso documento
--------------------------------------

A primeira coisa que precisamos fazer é falar para o HTML que temos algumas regras CSS que desejamos usar. Há três formas diferentes de aplicar CSS a um documento HTML que você normalmente vai encontrar, contudo, por enquanto, iremos olhar para o mais habitual e útil – vincular o CSS a partir do cabeçalho do seu documento.

Crie um arquivo na mesma pasta em que se encontra o seu documento HTML e salve-o como `style.css`. A extensão `.css` nos informa que se trata de um arquivo CSS.

Para ligar o `style.css` ao `index.html` adicione a seguinte linha em algum lugar dentro do `<head>` do documento HTML:

```html
<link rel="stylesheet" href="styles.css" />
```

Este `<link>` elemento diz ao navegador que temos uma folha de estilo, usando o atributo `rel`, e a localização desse arquivo como o valor do atributo `href`. Você pode testar se esse CSS funciona adicionando regras ao `styles.css`. Usando o seu editor de código, adicione as linhas seguintes ao seu arquivo CSS:

```css
h1 {
  color: red;
}
```

Salve os seus arquivos HTML e CSS e atualize a página no seu navegador. O nível de cabeçalho um, no topo do documento, deve estar agora em vermelho. Se tudo estiver correto, parabéns! - Você teve sucesso ao aplicar CSS a um documento HTML. Se nada aconteceu, observe cuidadosamente se você digitou tudo certo.

Você pode continuar trabalhando no `styles.css` localmente, ou pode usar nosso editor interativo abaixo pra continuar com este tutorial. O editor interativo age como se o CSS no primeiro painel estivesse vinculado ao documento HTML, assim como fizemos com o documento acima.

Estilizando elementos HTML
--------------------------

Fazendo o nosso cabeçalho ficar vermelho, demonstramos que podemos pegar e estilizar um elemento HTML. Fazemos isso especificando um seletor de elemento — Isto é, um seletor que combina diretamente com o nome do elemento HTML. Para especificar todos os parágrafos no documento, você usaria o seletor `p`. Para tornar todos os parágragos verdes, você usaria:

```css
p {
  color: green;
}
```

Você pode especificar múltiplos seletores, separando-os com virgula. Se eu quero que todos os parágrafos e todos os itens da lista se tornem verdes, então minha regra se parecerá com isto:

```css
p,
li {
  color: green;
}
```

Experimente isso no editor interativo abaixo (edit the code boxes), ou no seu arquivo CSS local.

Alterando o comportamento padrão dos elementos
----------------------------------------------

Quando olhamos para um documento HTML bem marcado, até algo tão simples como o nosso exemplo, podemos ver como o navegador está tornando o HTML legível adicionando algum estilo padrão. Títulos são grandes e em negritos, nossa lista possui marcadores. Isso acontece porque navegadores tem uma folha de estilo interna contendo estilo padrão, a qual eles aplicam para toda a página por padrão; sem eles, todo o texto seria executado em conjunto e teríamos que estilizar tudo do princípio. Todos os modernos navegadores mostram conteúdo HTML por padrão, da mesma maneira.

Contudo, você frequentemente irá desejar algo diferente do que foi escolhido pelo navegador. Isso pode ser feito simplesmente escolhendo o elemento HTML que você quer mudar, e usando uma regra CSS para alterar a forma como ele se parece. Um bom exemplo é o nosso `<ul>`, uma lista não ordenada. Ele tem uma lista marcada, e, se decido não escolher essa marcação, posso removê-los fazendo assim:

```css
li {
  list-style-type: none;
}
```

Experimente adicionar isto ao seu CSS agora.

A propriedade `list-style-type` é uma boa propriedade para se ver no MDN para ver quais valores são suportados. Dê uma olhada na página para `list-style-type` (en-US) e encontrará um exemplo interativo no topo da página para experimentar alguns valores diferentes nele, todos os valores permitidos são detalhados mais abaixo na página.

Olhando para essa página você descobrirá que, além de remover a marcação da lista, que você também pode alterá-los — Teste mudá-los para marcação quadrada, usando valores de `square`.

Incluindo uma classe
--------------------

Até agora, temos estilizado elementos baseado em seus nomes HTML. isto funciona enquanto você desejar que todos os elementos desse tipo, no seu documento, se pareçam o mesmo. Na maioria das vezes, isso não é o caso, e, então, você precisará encontrar uma maneira de selecionar um subconjunto de elementos sem alterar os outros. A maneira mais comum de fazer isso é adicionar uma classe ao seu elemento HTML e especificar essa classe.

No seu documento HTML, adicione um atributo de classe ao segundo item da lista. Sua lista se parecerá, agora, assim:

```html
<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>
```

No seu CSS, você pode especificar a classe `special` criando um seletor que inicia com um caractere de ponto final. Adicione o seguinte código ao seu arquivo CSS:

```css
.special {
  color: orange;
  font-weight: bold;
}
```

Salve e recarregue a página no navegador, para visualizar o resultado.

Você pode aplicar a classe `special` para qualquer elemento na sua página que desejar ter a mesma aparência o item dessa lista. Por exemplo, pode-se querer que o `<span>`, no parágrafo, também se torne laranja e em negrito. Experimente adicionar uma `class` de `special` a ele, em seguida, recarregue a sua página e veja o que acontece.

Algumas vezes, verá regras com um seletor que lista o seletor do elemento HTML junto com uma classe:

```css
li.special {
  color: orange;
  font-weight: bold;
}
```

Essa sintaxe significa "pegue qualquer elemento`li` que tenha uma classe `special`". Se você fizesse isso, não seria mais possível aplicar a classe a um `<span>` ou outro elemento, simplesmente adicionando a classe a ele; você teria que adicionar esse elemento à lista de seletores, assim:

```css
li.special,
span.special {
  color: orange;
  font-weight: bold;
}
```

Como pode imaginar, algumas classes podem ser aplicadas a muitos elementos e você não quer ter que editar seu CSS a cada vez que algo novo precisar assumir esse estilo. Portanto, as vezes é melhor ignorar o elemento e simplesmente se referir à classe, a menos que você queira criar algumas regras especiais para um elemento em particular, e, talvez, queira ter certeza que eles não serão aplicados aos outros.

Estilizando coisas baseadas em sua localização no documento
-----------------------------------------------------------

Há momentos quando você desejará que algo se pareça diferente, baseado onde ele está no documento. Existem vários seletores que podem lhe ajudar aqui, mas, por enquanto, iremos olhar apenas alguns. No nosso documento estão dois elementos `<em>` — um dentro de um parágrafo e o outro dentro do item de lista. Para selecionar apenas um `<em>` aninhado dentro de um elemento `<li>` posso usar um seletor chamado **combinador descendente**, a qual simplesmente, assume a forma de um espaço entre dois outros seletores.

Adicione a seguinte regra a sua folha de estilo.

```css
li em {
  color: rebeccapurple;
}
```

Este seletor selecionará qualquer elemento `<em>` que está dentro (um descendente de) um `<li>`. Deste modo, no seu documento de exemplo, você deve achar que o `<em>` no terceiro item da lista agora está roxo, mas o que está dentro do parágrafo permanece inalterado.

Outra coisa que você pode gostar de experimentar é estilizar um parágrafo quando ele vem diretamente após um título no mesmo nível de hierarquia no HTML. Para isso, coloque um `+` (um **combinador irmão adjacente**) entre os seletores.

Experimente adicionar esta regra à sua folha de estilo também:

```css
h1 + p {
  font-size: 200%;
}
```

O exemplo ativo abaixo inclui as duas regras acima. Verifique adicionando uma regra para tornar um span vermelho, se ele está dentro de um parágrafo. Você saberá se fez certo quando o span no primeiro parágrafo ficar vermelho, mas o do primeiro item da lista não mudar de cor.

**Nota:** **Observação**: Como pode ver, CSS nos dá várias maneiras de especificar elementos, e temos somente arranhado a superfície até agora! Analisaremos adequadamente todos esses seletores e muitos outros, nos nossos artigos Seletores posteriormente neste curso.

Estilizando coisas baseadas no estado
-------------------------------------

O tipo final de estilo, que vamos dar uma olhada neste tutorial, é a habilidade de estilizar coisas com base em seu estado. Um exemplo direto disso é quando estilizamos links. Quando aplicamos um estilo a um link, precisamos especificar o elemento `<a>` (âncora). Isto possui diferentes estados, dependendo se ele foi visitado, se não foi visitado, se o mouse está passando por ele, se foi teclado ou no processo de ser clicado (ativado). Você pode usar CSS para especificar estes diferentes estados — o CSS abaixo estiliza links não visitados com a cor rosa e links visitados com a cor verde.

```css
a:link {
  color: pink;
}

a:visited {
  color: green;
}
```

Você pode alterar a aparência do link quando o usuário passa o mouse sobre ele. Por exemplo, removendo o sublinhado, o que é realizado na próxima regra:

```css
a:hover {
  text-decoration: none;
}
```

No exemplo ativo abaixo, você pode brincar com diferentes valores para os vários estados do link. Adicionei as regras acima, e agora perceba que a cor rosa é bastante clara e difícil de ler. — porque não mudar isso para uma cor melhor? Pode deixá-los em negrito?

Removemos o sublinhado do nosso link ao passar o mouse. Pode-se remover os sublinhados de todos os estados de um link. Vale lembrar, no entanto, que em um site real, você deseja garantir que os visitantes saibam que um link é um link. Deixar o sublinhado no lugar pode ser uma pista importante para as pessoas perceberem que é possível clicar em algum texto dentro de um parágrafo — esse é o comportamento ao qual estão acostumados. Como tudo em CSS, existe o potencial de tornar o documento menos acessível com suas alterações — procuraremos destacar possíveis armadilhas em locais apropriados.

**Nota:** **Observação**: Você verá frequentemente menção de acessibilidade nessas lições e no MDN. Quando falamos sobre acessibilidade, estamos nos referindo aos requerimentos para a nossa página web ser compreensível e utilizável por todos.

Seu visitante pode muito bem estar em um computador com um mouse defeituoso, ou um dispositivo móvel com uma tela sensível ao toque. Ou eles podem estar usando um leitor de tela, que lê o conteúdo do documento, ou podem precisar de muito texto grande, ou estar navegando no site apenas usando o teclado.

Um documento HTML simples é geralmente acessível a todos — Ao começar a estilizar esse documento, é importante que você não o rone menos acessível.

Combinando seletores e combinadores
-----------------------------------

Vale ressaltar que você pode combinar vários seletores e combinadores. Até agora, vimos assim:

```css
/\* selects any <span> that is inside a <p>, which is inside an <article> \*/
article p span { ... }

/\* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> \*/
h1 + ul + p { ... }
```

Você pode combinar multiplos tipos juntos, também. Experimente acrescentar o seguinte código:

```css
body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}
```

Isso estilizará qualquer elemento com a classe `special`, a qual está dentro de um `<p>`, que vem logo após um `<h1>`, que, por sua vez, está dentro de um `<body>`. Ufa!

No HTML original que forncemos, o único elemento estilizado é `<span class="special">`.

Não se preocupe se isto parece complicado no momento — em breve, você começará a entender como escreve mais CSS.

Empacotando
-----------

Neste tutorial, demos uma olhada na quantidade de maneiras as quais pode-se estilizar um documento usando CSS. Estaremos desenvolvendo esse conhecimento ao longo da caminhada através das Lições. No entanto, agora, você já sabe o suficiente para estilizar o texto, aplicar CSS com base em diferentes maneiras de especificar elementos no documento e procurar propriedades e valores na documentação do MDN.

Na próxima lição, veremos como o CSS é estruturado.

* Anterior
* Menu: First steps
* Próxima


Usando seu novo conhecimento - Aprendendo desenvolvimento web

Usando seu novo conhecimento
============================

* Anterior
* Menu: First steps

Com o que você aprendeu nas últimas lições, você deve perceber que pode formatar simples documentos de texto utilizando CSS, implementado seu próprio estilo neles. Esta avaliação lhe dá a oportunidade de fazer exatamente isto.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Antes de tentar esta avaliação você deve ter passado pelo resto do
 módulo básico de CSS, além de também possuir uma compreensão básica de
 HTML (estude
 Introdução ao HTML).
  |
| Objetivo: | Trabalhar um pouco de CSS e testar seus novos conhecimentos. |

Ponto de partida
----------------

Você pode trabalhar com editor ao vivo abaixo, ou pode fazer o download do ponto de partida para trabalhar em seu próprio editor de texto. Esta é uma única página de HTML, além do ponto de partida no head do documento. Se preferir, você pode transferir este CSS para um arquivo separado quando criar o exemplo no seu computador. Ou ainda, você pode utilizar uma ferramenta online como por exemplo, o CodePen, jsFiddle, ou Glitch para realizar estas tarefas..

**Nota:** Se ficar emperrado, nos procure por ajuda — veja a seção Assessment or further help no final da página.

Trabalhando com CSS
-------------------

O seguite exemplo mostra uma biografia, o qual foi estilizado com CSS. As propriedades CSS que eu usei foram as mencionadas abaixo — cada uma está lincada a sua página de propriedades em MDN, a qual dará mais exemplos do uso dela.

* `font-family`
* `color`
* `border-bottom` (en-US)
* `font-weight`
* `font-size`
* `text-decoration`

Eu usei uma mistura de seletores, estilizando elementos como h1 e h2, mas também criando uma classe para o título da profissão e estilizando ela.

Use CSS para mudar como esta biografia aparece, alterando valores das propriedades que eu utilizei.

1. Faça o cabeçalho rosa, usando a chave de cor CSS `hotpink`.
2. Dê ao cabeçalho um pontilhado de tamanho 10px `border-bottom` (en-US) e que utiliza a chave de cor CSS `purple`.
3. Faça o cabeçalho nível 2 em itálico.
4. Dê ao `ul` usado para informações de contato uma `background-color` `#eeeeee`, e uma `border` (en-US) roxa sólida com de tamanho 5px. Implemente um `padding` para empurrar o conteúdo para longe da borda.
5. Torne os links `verdes` ao passar o mouse por cima deles.

Você deve acabar com algo parecido com esta imagem.

![Screenshot of how the example should look after completing the assessment.](/pt-BR/docs/Learn/CSS/First_steps/Styling_a_biography_page/learn-css-basics-assessment.png)

Após isto, tente pesquisar algumas propriedades não mencionadas nesta página em MDN CSS referências e se aventure!

Lembre-se de que não há resosta errada aqui — neste momento de seu aprendizado, você pode se dar ao luxo de de se divertir um pouco.

Avaliação ou ajuda adicional
----------------------------

Se gostaria de ter seu trabalho avaliado, ou se ficou emperrado e gostaria de ajuda:

1. Coloque seu trabalho num editor de texto compartilhado online tal como o CodePen, jsFiddle, ou Glitch.
2. Escreva um post perguntando por avaliação e/ou ajuda em MDN Discourse forum Learning category. Seu post deve incluir:
    * Um título descritivo, tal como "Avaliação desejada para primeiros passos em CSS".
    * Detalhes do que você já tentou, e o que gostaria que ós fizéssemos, p.e. se você está emperrado e precisa de ajuda, ou se deseja uma avalição.
    * Um link para o exemplo que você deseja ser avaliadao ou precisa de ajuda, em um editor online compartilhado (como mencionado no passo 1 acima). Esta é uma boa prática a se desenvolver — é muito difícil ajudar alguém com um problema de computação se não é possível ver o código dessa pessoa.
    * Um link para a atual págia de tarefa ou avaliaçãopara que possamos ver a questão que você está com dúvida.
O que vem a seguir?
-------------------

Parabéns por terminar seu primeiro módulo. Agora você deve ter uma boa compreensão geral de CSS, e ser capaz de entender boa parte do que acontece numa folha de estilos. No próximo módulo, CSS building blocks, iremos dar uma olhada com mais profundidade em várias áreas chave.

* Anterior
* Menu: First steps