BOX
BOX
Box
`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/p)\). Para dar estilo a um outro elemento, é só mudar o seletor. #### Declaração \(Declaration\) Uma regra simples como `color: red;` especificando quais das **propriedades** do elemento você quer estilizar. #### Propriedades \(Property\) Forma pela qual você estiliza um elemento HTML. \(Nesse caso, `color` é uma propriedade dos elementos [`
`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/p).\) Em CSS, você escolhe quais propriedades você deseja afetar com sua regra. #### Valor da propriedade \(Property value\) À direita da propriedade, depois dos dois pontos, nós temos o **valor de propriedade**, que escolhe uma dentre muitas aparências possíveis para uma determinada propriedade \(há muitos valores `color(cor)` além do `red(vermelho)`\). #### Note outras partes importantes da sintaxe: * Cada linha de comando deve ser envolvida em chaves \(`{}`\). * Dentro de cada declaração, você deve usar dois pontos \(`:`\) para separar a propriedade de seus valores. * Dentro de cada conjunto de regras, você deve usar um ponto e vírgula \(`;`\) para separar cada declaração da próxima. Aqui está um exemplo que faz com que todos os parágrafos HTML fiquem amarelos num fundo preto: ```markup Curso Front-End
Aprendendo CSS.
- Item 1
- Item 2
Este parágrafo não tem ID
Este parágrafo tem um ID
``` ```css .seletor_desc h1{ color: #5D6063; } .seletor_desc p{ background-color: yellow; color: #5D6063; } ```  ## Agrupando Seletores Vamos colocar o H1 e o H3 na cor: Verde ```css ``` ```css h1, h3 { color: green; } ```  Vamos colocar a cor **Azul** na tag`H6` que está dentro ``, `
,` `
- `, ``, `
considere que encontra-se dentro de uma caixa.`
**Vamos ver o exemplo abaixo:**
```markup
Introducção ao CSS
Aprendendo Box Model
CSS (Cascading Style Sheets) é uma linguagem declarativa que controla a apresentação visual de páginas web em um navegador.O navegador aplica as declarações de estilo CSS aos os elementos selecionados para exibi-los apropriadamente. Uma declaração de estilo contem as propriedades e seus valores, que determinam a aparência de uma página web.
Agora que exploramos algumas noções básicas de CSS, vamos começar a adicionar mais regras e informações no nosso arquivo style.css para deixar nosso exemplo bonito. Vamos começar fazendo nossas fontes e textos parecerem um pouco melhores.
``` _Observando o exemplo acima, visualize cada elemento HTML como quatro caixas empilhadas._ O "modelo de caixa CSS" é um conjunto de regras que definem como todas as páginas da Web na Internet são renderizadas. O CSS trata cada elemento do seu documento HTML como uma "caixa" com várias propriedades diferentes que determinam onde ele aparece na página. Como esperado, o layout CSS é baseado principalmente no _modelo de caixas_. Cada um dos blocos que ocupam espaço na sua página tem propriedades como essas: **O que consiste em uma caixa:** * `padding:` o espaço ao redor do conteúdo \(ex.: ao redor do texto de um parágrafo\). * `border:` a linha sólida do lado de fora do padding. * `margin:`o espaço externo a um elemento. * `content:` o conteúdo da caixa.  ## Height e Width: O conteúdo de um elemento tem duas dimensões: uma altura e uma largura. Por padrão, as dimensões de uma caixa HTML são definidas para conter o conteúdo bruto da caixa. a propriedade `height`e as `width`podem ser usados para modificar essas dimensões padrão. ```css p{ width:240px; height:80px; } ``` ## Border: Uma _borda_ é uma linha que envolve um elemento, como uma moldura em torno de uma pintura. Fronteiras pode ser definido com um específico `width`, `style`e `color`. `width`- A espessura da borda. Espessura de uma borda pode ser definida em pixels ou com um dos seguintes palavras-chave: `thin`, `medium`ou `thick`. `style`- O design da fronteira. Os navegadores da Web podem renderizar qualquer um dos [10 estilos diferentes](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values) . Alguns destes estilos incluem: `none`, `dotted`, e `solid`. `color`- a cor da borda. Os navegadores da Web podem renderizar cores usando alguns formatos diferentes, incluindo [140 palavras-chave coloridas](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) . ```css p{ border: 3px solid coral;} ``` No exemplo acima, a borda tem uma largura de 3 pixels, um estilo `solid`e uma cor de `coral`. Todas as três propriedades são definidas em uma linha de código. ## Border-radius: Você pode modificar os cantos da caixa de borda de um elemento com a propriedade `border-radius` ```css div.container { border: 3px solid rgb(22, 77, 100); border-radius: 5px; } ``` O código no exemplo acima definirá _todos os quatro cantos_ da borda com um raio de 5 pixels \(ou seja, a mesma curvatura que um círculo com raio de 5 pixels teria\). Você pode criar uma borda que seja um círculo perfeito, definindo o raio igual à altura da caixa ou a `100%`. ```css div.container { height: 60px; width: 60px; border: 3px solid rgb(22, 77, 100); border-radius: 100%; } ``` O código no exemplo acima cria um ``círculo perfeito.
## Padding
O espaço entre o conteúdo de uma caixa e as bordas de uma caixa é conhecido como _preenchimento_ . O preenchimento é como o espaço entre uma imagem e a moldura ao redor. Em CSS, você pode modificar esse espaço com a propriedade `padding`
```css
div{
border: 3px solid coral;
padding: 10px;
}
```
O código neste exemplo coloca 10 pixels de espaço entre o conteúdo do parágrafo \(o texto\) e as bordas, nos quatro lados.
Se você quiser ser mais específico sobre a quantidade de preenchimento em cada lado do conteúdo de uma caixa, poderá usar as seguintes propriedades:
1. `padding-top`
2. `padding-right`
3. `padding-bottom`
4. `padding-left`
Cada propriedade afeta o preenchimento em apenas um lado do conteúdo da caixa, oferecendo mais flexibilidade na personalização.
```css
p.content-header {
border: 3px solid fuschia;
padding-bottom: 10px;
}
```
no exemplo acima, o preenchimento será aplicado apenas na parte inferior.
Outra implementação da `padding`propriedade permite especificar exatamente quanto preenchimento deve haver em cada lado do conteúdo em uma única declaração.
```css
p.content-header {
border: 3px solid grey;
padding: 6px 11px 4px 9px;
/* top 6px, right 11px, bottom 4px e left 9px*/
}
```
No exemplo acima, os quatro valores `6px 11px 4px 9px`correspondem à quantidade de preenchimento em uma rotação no sentido horário. Em ordem, especifica a quantidade de preenchimento nos lados superior \(6 pixels\), direito \(11 pixels\), inferior \(4 pixels\) e esquerdo \(9 pixels\) do conteúdo.
Ao usar esta implementação da `padding`propriedade, devemos especificar um valor de preenchimento para todos os quatro lados do elemento.
No entanto, se os valores superior e inferior do preenchimento se igualarem, e os valores esquerdo e direito do preenchimento também se igualarem, você poderá usar o seguinte atalho:
```css
p.content-header{
padding: 5px 10px;
}
```
O primeiro valor `5px` define o valor de preenchimento para os lados superior e inferior do conteúdo. O segundo valor `10px`, define o valor de preenchimento para os lados esquerdo e direito do conteúdo.
### Margin
Até agora, você aprendeu sobre os seguintes componentes do modelo de caixa: conteúdo, bordas e preenchimento. O quarto e último componente do modelo de caixa é a _margem_ .
Margem refere-se ao espaço diretamente fora da caixa. A `margin`propriedade é usada para especificar o tamanho desse espaço.
```css
p {
border: 1px solid aquamarine;
margin: 20px;
}
```
O código no exemplo acima colocará 20 pixels de espaço na parte externa da caixa do parágrafo nos quatro lados. Isso significa que outros elementos HTML da página não podem ficar dentro de 20 pixels da borda do parágrafo.
Se você quiser ser ainda mais específico sobre a quantidade de margem em cada lado de uma caixa, poderá usar as seguintes propriedades:
1. `margin-top`
2. `margin-right`
3. `margin-bottom`
4. `margin-left`
Cada propriedade afeta a margem em apenas um lado da caixa, proporcionando mais flexibilidade na personalização.
```css
p {
border: 3px solid DarkSlateGrey;
margin-right: 15px;
}
```
No exemplo acima, apenas o lado direito da caixa do parágrafo terá uma margem de 15 pixels. É comum ver valores de margem usados para um lado específico de um elemento.
### Margin Auto:
A `margin`propriedade também permite centralizar o conteúdo. No entanto, você deve seguir alguns requisitos de sintaxe. Veja o seguinte exemplo:
```markup
.container { margin : 0 auto ;}
```
No exemplo acima, `margin: 0 auto;`centralizará a `div` nos elementos que os contêm. O valor `0`define o margens superior e inferior a 0 pixels. O valor `auto` informa ao navegador para ajustar as margens esquerda e direita até que o elemento seja centralizado dentro do elemento que o contém.
As `div`elementos no exemplo acima devem estar centralizados em um elemento que preenche a página, mas isso não ocorre. Por quê?
Para centralizar um elemento, uma largura deve ser definida para esse elemento. Caso contrário, a largura da div será automaticamente definida para a largura total do elemento que a contém, como , por exemplo. Não é possível centralizar um elemento que ocupa toda a largura da página.
```markup
.container
{
margin : 0 auto;
width: 800px;
}
```
## Minimum e Maximum Height e Width
Como uma página da Web pode ser visualizada através de exibições de tamanhos de tela diferentes, o conteúdo da página da Web pode sofrer essas alterações de tamanho. Para evitar esse problema, o CSS oferece duas propriedades que podem limitar o tamanho ou a largura da caixa de um elemento.
1. `min-width` - essa propriedade garante uma largura mínima da caixa de um elemento.
2. `max-width` - essa propriedade garante uma largura máxima da caixa de um elemento.
```css
p {
min-width: 300px;
max-width: 600px;
}
```
No exemplo acima, a largura de todos os parágrafos não diminuirá abaixo de 300 pixels, nem excederá 600 pixels.
O conteúdo, como o texto, pode se tornar difícil de ler quando uma janela do navegador é reduzida ou expandida. Essas duas propriedades garantem que o conteúdo seja legível limitando as larguras mínima e máxima de um elemento.
Você também pode limitar a _altura_ mínima e máxima de um elemento.
```css
p {
min-height: 150px;
max-height: 300px;
}
```
1. `min-height` - essa propriedade garante uma altura mínima para a caixa de um elemento.
2. `max-height` - essa propriedade garante uma altura máxima da caixa de um elemento.
No exemplo acima, a altura de todos os parágrafos não diminuirá abaixo de 150 pixels e a altura não excederá 300 pixels.
O que acontecerá com o conteúdo da caixa de um elemento se a `max-height`propriedade estiver configurada muito baixa? É possível que o conteúdo seja derramado fora da caixa,
## Overflow
Todos os componentes do modelo de caixa compreendem o tamanho de um elemento. Por exemplo, uma imagem com as seguintes dimensões tem 364 pixels de largura e 244 pixels de altura.
* 300 pixels de largura
* 200 pixels de altura
* 10 pixels preenchidos à esquerda e à direita
* 10 pixels de preenchimento na parte superior e inferior
* Borda de 2 pixels à esquerda e à direita
* Borda de 2 pixels na parte superior e inferior
* Margem de 20 pixels à esquerda e à direita
* Margem de 10 pixels na parte superior e inferior
As dimensões totais \(364 por 244 pixels\) são calculadas adicionando todas as dimensões verticais e todas as dimensões horizontais. Às vezes, esses componentes resultam em um elemento que é maior que a área que contém os pais.
Como podemos garantir que podemos visualizar todos os elementos maiores que a área contendo os pais?
A `overflow`propriedade controla o que acontece com o conteúdo que derrama ou transborda fora da caixa. Pode ser definido como um dos seguintes valores:
* `hidden` - quando definido com esse valor, qualquer conteúdo que exceda o limite será oculto.
* `scroll` - quando definido como esse valor, uma barra de rolagem será adicionada à caixa do elemento para que o restante do conteúdo possa ser visualizado rolando.
* `visible`- quando definido para esse valor, o conteúdo excedente será exibido fora do elemento que o contém. Observe que esse é o valor padrão.
```markup
.box{
display: flex;
}
```
No exemplo acima, a div com a classe `.box` são containers flexíveis. Se eles têm filhos, os filhos são itens flexíveis. Uma div com a declaração `display: flex;`permanecerá no nível do bloco\(lembra do display, block?\) no entanto, ele mudará o _**comportamento de seus elementos filhos**_. Os elementos filhos não serão iniciados em _**novas linhas ou seja ele não se quebra.**_
## inline-flex
Se não quiséssemos que os elementos div fossem elementos em nível de bloco, usaríamos `display: inline`. No Flexbox, no entanto, fornece o `inline-flex`valor para o atributo `display`, o que nos permite criar contêineres flexíveis que também são elementos em linha.
```markup
.container {
width: 200px;
height: 200px;
display: inline-flex;
background-color:tomato;
}
```
## Justify-Content
Propriedade do Container \( Pai\) objetivo de posicionar os itens **horizontalmente** da esquerda, direita, centro e entre eles, usamos a propriedade chamada **`justify-content`**.
Existem cinco valores para a propriedade **`justify-content`**
1. **`flex-start`** - todos os itens serão posicionados em ordem, a partir da esquerda do contêiner pai, sem espaço extra entre eles ou antes deles.
2. **`flex-end`** - todos os itens serão posicionados em ordem, com o último item começando no lado direito do contêiner pai, sem espaço extra entre eles ou depois deles.
3. **`center`** - todos os itens serão posicionados em ordem, no centro do contêiner pai, sem espaço extra antes, entre ou depois deles.
4. **`space-around`** - os itens serão posicionados com espaço igual antes e depois de cada item, resultando no dobro do espaço entre os elementos.
5. **`space-between`** - os itens serão posicionados com espaço igual entre eles, mas sem espaço extra\(\*\) antes do primeiro ou após o último elemento.
_\(\*\)Nas definições acima, “sem espaço extra” significa que margens e bordas serão respeitadas, mas não será adicionado mais espaço \(além do especificado na regra de estilo para o elemento em particular\) entre os elementos. O tamanho de cada item flexível individual não é alterado por essa propriedade._
## Align Items
você aprendeu como justificar o conteúdo de um contêiner flexível da esquerda para a direita na página. Também é possível alinhar itens flexíveis _**verticalmente dentro do contêiner**_. A propriedade `align-items` torna possível espaçar itens flexíveis verticalmente.
Existem cinco valores que podemos usar para a `align-items`propriedade:
1. **`flex-start`** - todos os elementos serão posicionados na parte superior do contêiner pai.
2. **`flex-end`** - todos os elementos serão posicionados na parte inferior do contêiner pai.
3. **`center`** - o centro de todos os elementos será posicionado a meio caminho entre a parte superior e inferior do contêiner pai.
4. **`baseline`** - a parte inferior do conteúdo de todos os itens será alinhada entre si.
5. **`stretch`** - se possível, os itens serão estendidos de cima para baixo no contêiner \(este é o valor padrão; os elementos com uma altura especificada não serão esticados; os elementos com uma altura mínima ou nenhuma altura especificada serão estendidos\).
## Flex-Grown \( Crescimento Flexível\)
O flex-grow uma propriedade de um flex-item, o objetivo dele é fazer o item crescer ex: se o contêiner pai for maior que o necessário, os itens flexíveis não serão estendidos por padrão. A propriedade `flex-grow` permite especificar se os itens devem crescer para preencher um contêiner e também quais itens devem crescer proporcionalmente mais ou menos que outros.
```css
.container {
display: flex;
}
.side {
width: 100px;
flex-grow: 1;
}
.center {
width: 100px;
flex-grow: 2;
}
```
## flex-shrink
Assim como a `flex-grow`propriedade estende proporcionalmente os itens flexíveis, a `flex-shrink`propriedade pode ser usada para especificar quais elementos serão reduzidos e em que proporções.
Vamos dar uma olhada neste site abaixo para exemplos!
[Guia Completo Flexbox](https://origamid.com/projetos/flexbox-guia-completo/)
## Referências
[CSS Básico](https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico)
https://developer.mozilla.org/pt-BR/docs/Aprender/Getting\_started\_with\_the\_web/CSS\_basico
[Como o CSS é estruturado](https://developer.mozilla.org/pt-BR/docs/Learn/CSS/First_steps/Como_CSS_e_estruturado)
[https://developer.mozilla.org/pt-BR/docs/Learn/CSS/First\_steps/Como\_CSS\_e\_estruturado](https://developer.mozilla.org/pt-BR/docs/Learn/CSS/First_steps/Como_CSS_e_estruturado)
[Conceitos básicos de Flexbox](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox)
[https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS\_Flexible\_Box\_Layout/Conceitos\_Basicos\_do\_Flexbox](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox)
[ORIGAMID - Conceitos Flexbox](https://origamid.com/projetos/flexbox-guia-completo/)
[https://origamid.com/projetos/flexbox-guia-completo/](https://origamid.com/projetos/flexbox-guia-completo/)
{% embed url="https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS\_Flexible\_Box\_Layout/Conceitos\_Basicos\_do\_Flexbox" %}
{% embed url="https://developer.mozilla.org/pt-BR/docs/CSS/Usando\_caixas\_flexiveis\_css" %}
A propriedade margin também permite centralizar o conteúdo. No entanto, você deve seguir alguns requisitos de sintaxe. Veja o seguinte exemplo:
agora vai centralizar o elemento!
No exemplo acima, se algum conteúdo do parágrafo exceder o limite (talvez um usuário redimensione a janela do navegador),uma barra de rolagem aparecerá para que os usuários possam visualizar o restante do conteúdo.
p { overflow: scroll; } ``` No exemplo acima, se algum conteúdo do parágrafo exceder o limite \(talvez um usuário redimensione a janela do navegador\), uma barra de rolagem aparecerá para que os usuários possam visualizar o restante do conteúdo. A propriedade overflow é configurada em um elemento pai para instruir um navegador da web como renderizar elementos filho. Por exemplo, se a propriedade overflow de uma div estiver definida como `scroll`, todos os filhos dessa div exibirão o conteúdo excedente com uma barra de rolagem. ## Redefinindo padrões Todos os principais navegadores da Web possuem uma folha de estilo padrão que eles usam na ausência de uma folha de estilo externa. Essas folhas de estilo padrão são conhecidas como _folhas de estilo do agente do usuário_ . Nesse caso, o termo " [agente do usuário](https://en.wikipedia.org/wiki/User_agent) " é um termo técnico para o navegador. As folhas de estilo do agente do usuário geralmente têm regras CSS padrão que definem valores padrão para preenchimento e margem. Isso afeta a maneira como o navegador exibe elementos HTML, o que pode dificultar o desenvolvimento ou o estilo de uma página da web. Muitos desenvolvedores optam por redefinir esses valores padrão para que possam realmente trabalhar com uma lista limpa. ```css *{ margin:0 ; padding:0;} ``` O código no exemplo acima redefine os valores padrão de margem e preenchimento de todos os elementos HTML. Geralmente, é a primeira regra de CSS em uma folha de estilo externa. Observe que ambas as propriedades estão definidas como `0`. Quando essas propriedades são definidas como `0`, elas não requerem uma unidade de medida. ### Revisando o Modelo de caixa abordamos as quatro propriedades do modelo de caixa: altura e largura, preenchimento, bordas e margens. Compreender o modelo de caixa é um passo importante para aprender tópicos mais avançados sobre HTML e CSS. Vamos dedicar um minuto para revisar o que você aprendeu. 1. O modelo de caixa compreende um conjunto de propriedades usadas para criar espaço ao redor e entre elementos HTML. 2. A altura e a largura de uma área de conteúdo podem ser definidas em pixels ou porcentagem. 3. As bordas circundam a área de conteúdo e o preenchimento de um elemento. A cor, o estilo e a espessura de uma borda podem ser configurados com propriedades CSS. 4. Preenchimento é o espaço entre a área de conteúdo e a borda. Pode ser definido em pixels ou porcentagem. 5. Margem é a quantidade de espaçamento fora da borda de um elemento. 6. As margens horizontais são adicionadas, portanto, o espaço total entre as bordas dos elementos adjacentes é igual à soma da margem direita de um elemento e da margem esquerda do elemento adjacente. 7. As margens verticais são reduzidas, portanto o espaço entre os elementos adjacentes verticalmente é igual à margem maior. 8. `margin: 0 auto` centraliza horizontalmente um elemento dentro de sua área de conteúdo pai, se tiver uma largura. 9. A `overflow`propriedade pode ser definida como `display`, `hide`ou `scroll`, e determina como o HTML irá renderizar o conteúdo que excede a área de conteúdo de seu pai. ## Tipos de Box Model Existem dois tipos de modelo de caixa que você encontrará no CSS: o modelo de caixa de conteúdo e o modelo de caixa de borda. ### Content Box: Muitas propriedades no CSS têm um valor padrão e não precisam ser definidas explicitamente na folha de estilo. Por exemplo, o padrão `font-weight`do texto é `normal`, mas esse par de propriedade e valor geralmente não é especificado em uma folha de estilo. O mesmo pode ser dito sobre o modelo de caixa que os navegadores assumem. Em CSS, a `box-sizing`propriedade controla o tipo de modelo de caixa que o navegador deve usar ao interpretar uma página da web. O valor padrão dessa propriedade é `content-box`. Esse é o mesmo modelo de caixa afetado pela espessura da borda e pelo preenchimento.  {% hint style="info" %} Width+Padding+Border = Tamanho da Caixa - modelo de caixa afetado pela espessura da borda e pelo preenchimento. {% endhint %} ```markupHello World
* { box-sizing: content-box; } h1 { border: 1px solid red; height: 200px; width: 300px; padding: 10px; } /*Largura total da caixa é de 322px e altura 222px*/ /* 300+10+10+1+1 Largura*/ /* 200+10+10+1+1 Altura*/ ``` ## Modelo de Caixa: Border-Box O código no exemplo acima redefine o modelo de caixa `border-box`para todos os elementos HTML. Esse novo modelo de caixa evita os problemas dimensionais existentes no modelo de caixa anterior que você aprendeu. Neste modelo de caixa, a altura e a largura da caixa permanecerão fixas. A espessura da borda e o preenchimento serão incluídos dentro da caixa, o que significa que as dimensões gerais da caixa não mudam.  {% hint style="info" %} a propriedade **width** é igual à largura real processada do elemento. A área de conteúdo é dimensionada automaticamente com base na largura restante, depois que a borda e o preenchimento são subtraídos. Segue exemplo abaixo. {% endhint %} ```markupHello World
* { box-sizing: border-box; } h2 { border: 1px solid blue; height: 200px; width: 300px; padding: 10px; } /*Largura total da caixa é de 300px e altura 200px*/ /* inspecione o código no navegador e veja a diferença no modelo de caixa no Box Model*/ ``` {% hint style="info" %} No exemplo acima, a altura da caixa permaneceria em 200 pixels e a largura em 300 pixels. A espessura da borda e o preenchimento permaneceriam inteiramente _dentro_ da caixa. {% endhint %} [Link com exemplo no codepen.](https://codepen.io/karinamachado/pen/LYpBEQj?editors=1100) ## Revisão: Alterando o modelo de caixa Você aprendeu sobre uma importante limitação do modelo de caixa padrão: as dimensões da caixa são afetadas pela espessura da borda e pelo preenchimento. Vamos revisar o que você aprendeu: 1. No modelo de caixa padrão, as dimensões da caixa são afetadas pela espessura da borda e pelo preenchimento. 2. A `box-sizing`propriedade controla o modelo de caixa usado pelo navegador. 3. O valor padrão da `box-sizing`propriedade é `content-box`. 4. O valor para o novo modelo de caixa é `border-box`. 5. O `border-box`modelo não é afetado pela espessura da borda ou preenchimento. ## Especificidade Especificidade é a ordem pela qual o navegador decide quais estilos CSS serão exibidos. Uma prática recomendada no CSS é estilizar elementos enquanto estiver usando o menor grau de especificidade, para que, se um elemento precisar de um novo estilo, seja fácil substituí-lo. Os _**IDs**_ são o seletor mais específico em CSS, seguido pelas _**classes**_ ****e, finalmente, pelas _**tags**_. Por exemplo, considere o seguinte HTML e CSS: ```markupNotícias
h1 { color: red; } .news { color: blue; } ``` No exemplo acima, que terá prioridade para implementar o CSS será a classe **`.news`** porque o seletor de classe é mais específico que a tag. Se um atributo de ID \(e seletor\) fosse adicionado ao código acima, os estilos no corpo do seletor de ID substituiriam todos os outros estilos para o cabeçalho. A única maneira de substituir um ID é adicionar _outro_ ID com estilo adicional. ```markupNotícias
h1 { color: red; } #news { color: purple; } ``` Com o tempo, à medida que os arquivos crescem com o código, muitos elementos podem ter **IDs**, o que pode dificultar a edição do CSS, pois um novo estilo mais específico deve ser criado para alterar o estilo de um elemento. Para facilitar a edição dos estilos, é melhor estilizar com um seletor de **tags**, se possível. Caso contrário, adicione um seletor de classe. Se isso não for específico o suficiente, considere usar um seletor de ID. ## Important! Há uma coisa que é ainda mais específico do que IDs: `!important`. pode ser aplicado a atributos específicos em vez de regras completas. Ele substituirá _qualquer_ estilo, por mais específico que seja. Como resultado, quase nunca deve ser usado. Uma vez usado `!important`, é muito difícil substituir. ```css p { color: blue !important; } .main p { color: red; } ``` Como `!important`é usado no atributo `p`do seletor `color`, todos os `p`elementos aparecerão `blue`, mesmo que exista um `.main p`seletor mais específico que defina o `color`atributo `red`. {% hint style="info" %} O `!important`sinalizador é útil apenas quando um elemento aparece da mesma maneira 100% do tempo. Como é quase impossível garantir que isso seja verdade ao longo de um projeto e ao longo do tempo, é melhor evitar {% endhint %} ### EXIBIÇÃO E POSICIONAMENTO CSS Um navegador irá renderizar os elementos de um documento HTML que não possui CSS da _esquerda_ para a _direita_, de _cima_ para _baixo_, na mesma ordem em que existem no documento. Isso é chamado de _fluxo_ de elementos em HTML. Além das propriedades que fornece para estilizar elementos HTML, o CSS inclui propriedades que alteram a maneira como um navegador _posiciona_ elementos. Essas propriedades especificam onde um elemento está localizado em uma página. Conheça as cinco propriedades para ajustar a posição dos elementos HTML no navegador: * `position: static,relative, absolute e fixed.` Cada uma dessas propriedades nos permitirá posicionar e visualizar elementos em uma página da web. Eles podem ser usados em conjunto com quaisquer outras propriedades de estilo que você possa conhecer. ### Posicionamento  A `position`propriedade permite especificar a posição de um elemento de três maneiras diferentes. **`static`** - o valor padrão \(não precisa ser especificado\) Quando definida como **`relative`**, a posição de um elemento é relativa à sua posição padrão na página.  Quando definida como **`absolute`**, a posição de um elemento é relativa ao seu elemento pai posicionado mais próximo. Ele pode ser fixado em qualquer parte da página da Web, mas o elemento ainda será movido com o restante do documento quando a página for rolada.  ```css .box-top{ background-color: Aquamarine; position: relative; width: 300px; height: 300px; top: 20px; left: 50px; } .box-bottom{ background-color: DeepSkyBlue; width: 300px; height: 300px; position: absolute; top: 20px; left:50px; /* o elemento será posicionado relativamente a propriedade de deslocamento top (acima 20px e a direita 50px*/ /*Para a propriedade funcionar é necessário definir a propriedade de deslocamento: top, left, right, bottom - conforme a sua necessidade e do layout da página.*/ } ``` Quando definida como **`fixed`**, a posição de um elemento pode ser fixada em qualquer parte da página da web. O elemento permanecerá em exibição.  ```css .box-bottom { background-color: DeepSkyBlue; position: fixed; top: 20px; left: 50px; } ``` ### Posicionamento z-index `z-index: 1 ou 0` Quando as caixas em uma página da web têm uma combinação de posições diferentes, as caixas \(e, portanto, seu conteúdo\) podem se sobrepor, dificultando a leitura ou o consumo do conteúdo. A propriedade `z-index` controla a que distância o elemento "volta" ou "avança" um elemento deve aparecer na página da web quando os elementos se sobrepõem. Isso pode ser pensado na _profundidade_ dos elementos, com elementos mais profundos aparecendo atrás dos elementos mais rasos. ```css .box-top { background-color: Aquamarine; position: relative; z-index: 2; } .box-bottom { background-color: DeepSkyBlue; position: absolute; top: 20px; left: 50px; z-index: 1; } ```  ### Exibição - Display * `display: inline, block, inline-block` * `float: left, right` A propriedade `display`permite controlar como um elemento pode fluir vertical e horizontalmente um documento, fornece a capacidade de transformar qualquer elemento tipo bloco como parágrafos, divs e títulos em linha. **`inline`**os elementos ocupam o mínimo de espaço possível, não exigindo uma nova linha após cada elemento e não podem ser ajustados ao **`width`**ou **`height`**. **`block`**Os elementos ocupam a largura do contêiner e podem ter **`height`** ajustados manualmente . **`inline-block`**elementos podem ter definido **`width`**e _`height`_, mas também podem aparecer próximos um do outro e não ocupam toda a largura do contêiner. A propriedade**`float`** pode mover elementos mais à esquerda ou o mais à direita possível em uma página da web.  ## O que é Responsividade? Sabemos que o uso de dispositivo móvel para navegar na internet está crescendo cada vez mais, sempre estão lançando novos dispositivos e a cada dispositivo temos tamanho de tela diferentes, resoluções. maneiras de visualizar seja portrait ou landscape. Diante dessa situação, quando estamos desenvolvendo nosso website, temos que fazer com que o conteúdo responda ao tamanho da tela do dispositivo, dessa forma, garantindo que o visitante do site tenha uma boa navegabilidade. Uma grande parte do processo para que seu site fique responsivo, está bem antes de implementar somente técnicas de breakpoints e consulta de mídias, para deixar o design responsivo, é interessante saber alguns princípios quando você está desenvolvendo o seu website para que seu conteúdo se apresente de uma forma bacana em todas as resoluções. ## 1\) Responsivo x Adaptativo  ### Design Responsivo. E um design fluido, que se adapta ao tamanho da tela que deseja, independente do dispositivo, utiliza consulta de mídia css \(@screen, @print\) para alterar estilos com o foco no dispositivo desejado. ### Design Adaptativo. Usa layouts estáticos baseados em pontos de interrupção de quebra \(breakpoint\) que não respondem até que sejam inicialmente carregados. O adaptativo detecta o tamanho da tela e carrega o layout apropriado para ele, um site adaptável tem vários tipo de tela \( 320px, 480, 760px, 1200px, 1600px\). Ex: em uma tela desktop de 1366px de largura que é o padrão hoje na web, se estiver navegando um um dispositivo mobile um Android ou Iphone, uma conexão 3G ou 4G, você pode ter uma cópia de imagem e transformando em uma miniatura e nessa resolução seja exibido de acordo com a proporção do dispositivo e também em um tamanho menor ex: 320px ou 400px. De acordo com o elemento que está trabalhando ou com a resolução você pode utilizar as duas técnicas, de uma forma que não prejudique a navegação do usuário e a aparência. Enfim, não quer dizer que uma técnica é mais correta ou melhor que a outra, você pode estar utilizando umas das duas em seu projeto. ### Unidade de Medidas Relativas x Fixas  Pela imagem acima, já percebemos a diferença em usar medida relativa ou fixa no seu CSS, mas é importante saber em que momento vamos usar unidade relativa ou fixa, então se você criar um container de conteúdo, você vai utilizar porcentagem % nesse caso, afinal vai ter que encaixar dois ou mais elementos e cada um vai ter a sua proporção dentro da área útil. Agora quando você estiver trabalhando com espaçamento interno ou externo, não é vantagem usar porcentagem % pelo motivo de renderização nos navegadores, ex: se visualizar no chrome, vai se comportar bem, porque vai conseguir interpretar. o % da margin e padding, já no firefox ou edge, como não tem um contexto fixo, uma altura por exemplo esses navegadores não vão conseguir calcular um percentual baseado no elemento.Portanto o ideal é trabalhar com unidades estáticas para espaçamento internos e externos, garantindo que o seu conteúdo fique distribuído de uma forma uniforme. **"em"** é uma medida relativa ao dispositivo, que no geral configura a mesma coisa que 16px. Portanto 1em == 16px, 1.2em == 19,2px... ### Breakpoints  É uma técnica que vamos utilizar muito para fazer o nosso design responsivo na nossa página, ou seja constitui na ação de redimensionar o seu navegador e quando o conteúdo estiver fora da área, desalinhado, é onde você vai usar ponto de quebra em uma determinada resolução e faz a alteração necessária e com isso você vai conseguir alinhar os elementos, esconder ou exibir. A vantagem é que é totalmente flexível, embora já temos as medidas padrões que já sabemos dos dispositivos móveis seja, um android, iphone, tablet etc..., mas com o breakpoint podemos ajustar os elementos com uma nova medida. ### Valores Máximos e Mínimos  Olhando a animação acima, percebemos que utilizando a propriedade max-width, ou seja o valor máximo, quando o layout chega nesse valor o site para de esticar, o conteúdo vai ultrapassar a largura determinada. A maioria dos containers de conteúdo a dica é colocar max-width. Ex: max-width: 1300px, mas numa resolução 768px que é um tamanho de um tablet/ipad o conteúdo vai ajustar ocupando 100% da tela. ### Bitmaps x Vetores  Vetor é uma imagem que quando você expande para um tamanho grande ou pequeno ela não perde a qualidade da imagem, não distorce. Imagem em bitmap como: png, jpg, se tivermos uma imagem de 200px e aumentar para 800px, essa imagem será distorcida. Mas não quer dizer que todas as imagens do meu site tem que ser em vetor , é interessante usar em logomarcas, menus e ícones. Para as imagens tipo png ou jpg é legal usar para foto de perfil, de artigo entre outros. ## Principais propriedades do CSS **Propriedades de background:** {% hint style="info" %} **background-color: pink;** _Implementa uma cor de fundo para o elemento._ {% endhint %} {% hint style="info" %} **backgroundi- mage: url\(logo.png\);** _Implementa uma imagem de fundo para o elemento._ **** {% endhint %} {% hint style="info" %} **background-position: center 20%;** Implementa a posição da imagem de fundo, o primeiro valor determina a posição do eixo horizontal e o segundo valor no eixo vertical. {% endhint %} {% hint style="info" %} **background-repeat: norepeat;** Define se a imagem de fundo deve se repetir ou não. Principais valores possíveis: no-repeat, repeat, repeat-x, repeat-y. {% endhint %} #### Propriedades de fonte {% hint style="info" %} **font-size: 60px;** Define o tamanho da fonte. {% endhint %} {% hint style="info" %} **font-weight: bold;** Define o peso do texto, ex: 400, 500, 600, 700 {% endhint %} {% hint style="info" %} **font-family: Roboto;** Define a fonte utilizada no texto. A fonte precisa estar instalada na máquina do usuário ou importada de um endereço externo. {% endhint %} **Propriedades de texto** {% hint style="info" %} **font: 10px Open Sans regular;** forma de definir várias propriedades em uma linha. {% endhint %} {% hint style="info" %} **line-height: 20px;** Define o tamanho da linha do texto. {% endhint %} {% hint style="info" %} **letter-spacing: 2.5px;** Define o espaçamento de cada caractere no texto. {% endhint %} {% hint style="info" %} t**ext-align: center;** Define o alinhamento horizontal do texto, valore: left, center, right. {% endhint %} {% hint style="info" %} **text-decoration: underline;** Define uma decoração ao texto. Principais valores possíveis: underline, line-through, none. {% endhint %} #### Propriedade de exibição {% hint style="info" %} **display: block;** \(O elemento se comporta como um bloco, ocupando toda largura possível\) {% endhint %} {% hint style="info" %} **display: inline;** \(O elemento ocupa apenas o espaço necessário horizontalmente dentro da linha\) {% endhint %} {% hint style="info" %} **display: none;** \(O elemento não seja exibido na tela\) {% endhint %} {% hint style="info" %} **display: grid;** \(O elemento se comporta como um grid\) {% endhint %} {% hint style="info" %} **display: flex;** \(O elemento se comporte como um container flexível\) {% endhint %} {% hint style="info" %} **opacity: 0.5;** Define a opacidade do elemento, de 0 \(zero\) até 1 \(100%\). {% endhint %} {% hint style="info" %} **width: 100px / max-width: 80% / min-width: 10vw;** Define a largura inicial, largura máxima e largura mínima de um elemento. {% endhint %} {% hint style="info" %} **height: 100px / max-height: 80% / min-height: 10vh;** Define a altura inicial, largura máxima e largura mínima de um elemento. {% endhint %} {% hint style="info" %} **position: relative;** \(torna o elemento relativo, qualquer outro elemento dentro desse irá se posicionar sempre de forma relativa ao pai\) {% endhint %} {% hint style="info" %} **position: absolute;** \(torna o elemento flutuante, sua posição se baseia no elemento pai mais próximo com posicionamento relativo\) {% endhint %} {% hint style="info" %} **position: fixed;** \(torna o elemento fixo, independente do scroll do usuário, ele sempre permanece na mesma posição\) {% endhint %} {% hint style="info" %} **Valores possíveis:** **border-radius: 20px;** \(20px de arredondamento em todos lados\) **border-radius: 10px 20px;** \(10px de arredondamento no canto superior-esquerdo e no inferior-direito, 20px no restante\) **border-radius: 10px 20px 30px;** \(10px superior-esquerdo, 20px superior-direito e inferior-esquerdo, 30px inferior-direito\) **border-radius: 10px 20px 30px 40px;** \(10px superior-esquerdo, 20px superior-esquerdo, 30px inferior-direito, 40px inferior-esquerdo\) {% endhint %} #### **Propriedades de espaçamento** {% hint style="info" %} Valores possíveis: **padding: 20px;** \(20px de espaçamento em todos lados\) **padding: 10px 20px;** \(10px de espaçamento vertical e 20px horizontal\) **padding: 10px 20px 30px;** \(10px no topo, 20px horizontal e 30px abaixo\) **padding: 10px 20px 30px 40px;** \(10px topo, 20px direita, 30px abaixo e 40px esquerda\) {% endhint %} ## Flexbox Foi projetado tanto como um modelo de _layout_ unidimensional quanto como um método capaz de organizar os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. O _flexbox_ ou o Flexible Box Layout, uma nova ferramenta desenvolvida para CSS3 que simplifica bastante a posição dos elementos. Existem dois componentes importantes em um layout do flexbox: _**flex containers**_ ****e _**flex items**_ . Um contêiner flexível é um elemento em uma página que contém itens flexíveis. Todos os elementos filhos diretos de um contêiner flexível são itens flexíveis. Essa distinção é importante porque algumas das propriedades que você aprenderá se aplicam aos _**contêineres flexíveis**_, enquanto outras se aplicam aos _**itens flexíveis.**_  Para designar um elemento como um contêiner flexível, defina a `display`propriedade do elemento como `flex`ou `inline-flex`. Depois que um item é um contêiner flexível, existem várias propriedades que podemos usar para especificar como seus filhos se comportam. #### Flex Container O Flex Container é a tag que envolve os itens flex, ao indicar `display: flex`, essa tag passa a ser um Flex Container. ```markupDisplay: Flex
1
2
3
I’m inside of a flex container!
A flex container’s children are flex items!
I’m also a flex item!
Me too!