adambard/learnxinyminutes-docs
1
1
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2024-12-27 09:15:50 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #4849 from AdaiasMagdiel/adaiasmagdiel/pt-br/css

Browse Source 
[css/pt-br] Fix some errors in the last translation.
This commit is contained in:
Boris Verkhovskiy 2024-04-04 07:57:00 -07:00 committed by GitHub
commit 11cb7ff42a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 121 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
pt-br/css-pt.html.markdown
View File

@ -8,33 +8,36 @@ contributors:
- ["Connor Shea", "https://github.com/connorshea"] - ["Connor Shea", "https://github.com/connorshea"]
- ["Deepanshu Utkarsh", "https://github.com/duci9y"] - ["Deepanshu Utkarsh", "https://github.com/duci9y"]
translators: translators:
- ["Adaías Magdiel", "https://adaiasmagdiel.com/"]
- ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"] - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"]
- ["Gabriele Luz", "https://github.com/gabrieleluz"] - ["Gabriele Luz", "https://github.com/gabrieleluz"]
lang: pt-br lang: pt-br
--- ---
No início da web não havia elementos visuais, apenas texto puro. Mas com maior desenvolvimento de navegadores da web, páginas web totalmente visuais também se tornaram comuns. Páginas web são feitas utilizando HTML para demarcar o conteúdo.
O CSS (Cascading Style Sheets) é uma linguagem separada que é responsável
especificamente pela **aparência** da página.
CSS ajuda a manter a separação entre o conteúdo (HTML) e o visual de uma página web. Códigos CSS são construídos utilizando várias regras estáticas. Cada regra aceita um ou mais *seletores*
e aplica *valores* específicos de propriedades visuais. Essas propriedades são aplicadas
nos elementos da página indicados pelos seletores.
CSS permite atingir diferentes elementos em uma página HTML e atribuir diferentes propriedades visuais para eles. Este guia foi escrito com o CSS 2 em mente, complementado pelas novas
funcionalidades do CSS 3.
Este guia foi escrito para CSS2, embora CSS3 esteja rapidamente se tornando popular. **NOTA:** Devido ao fato do CSS produzir resultados visuais, a fim de aprender, você precisa treinar em um playground CSS como [dabblet](http://dabblet.com/).
O foco principal deste artigo é a sintaxe e algumas dicas gerais.
**NOTA:** Porque CSS produz resultados visuais, a fim de aprender, você precisa treinar em um playground CSS como [dabblet](http://dabblet.com/).
O foco principal deste artigo é sobre a sintaxe e algumas dicas gerais.
```css ```css
/* Comentários aparecem dentro do slash-asterisk, tal como esta linha! /* Comentários aparecem dentro de blocos com / e *, tal como esta linha!
Não há "comentários de uma linha"; este é o único estilo de comentário * / Não há "comentários de uma linha"; este é o único estilo de comentário. * /
/* #################### /* ####################
## SELETORES ## SELETORES
#################### */ #################### */
/* O seletor é usado para direcionar um elemento em uma página. /* O seletor é usado para selecionar um elemento em uma página. */
seletor { propriedade: valor; / * Mais propriedades ... * / } seletor { propriedade: valor; /* Mais propriedades... */ }
/* /*
Abaixo um elemento de exemplo: Abaixo um elemento de exemplo:
@ -42,63 +45,62 @@ Abaixo um elemento de exemplo:
<div class='class1 class2' id='anID' attr='value' otherAttr='pt-br foo bar' /> <div class='class1 class2' id='anID' attr='value' otherAttr='pt-br foo bar' />
*/ */
/* Você pode direcioná-lo usando uma das suas classes CSS */ /* Você pode seleciona-lo usando uma das suas classes CSS */
.class1 { } .class1 { }
/* ou ambas as classes! */ /* Ou ambas as classes! */
.class1.class2 { } .class1.class2 { }
/* ou o seu nome */ /* Ou o seu nome */
div { } div { }
/* ou o seu id */ /* Ou o seu id */
#anID { } #anID { }
/* ou utilizando o fator de que tem um atributo!*/ /* Ou através de um dos seus atributos! */
[attr] { font-size:smaller; } [attr] { font-size: smaller; }
/* ou que o atributo tem um valor específico */ /* Ou utilizando um atributo com um valor específico */
[attr='value'] { font-size:smaller; } [attr='value'] { font-size: smaller; }
/* começa com um valor (CSS 3) */ /* Um atributo que começa com um valor (CSS 3) */
[attr^='val'] { font-size:smaller; } [attr^='val'] { font-size:smaller; }
/* ou terminando com um valor (CSS 3) */ /* Ou termina com um valor (CSS 3) */
[attr$='ue'] { font-size:smaller; } [attr$='ue'] { font-size: smaller; }
/* Ou contém um valor em uma lista separada por espaços */ /* Ou contém um valor em uma lista separada por espaços */
[otherAttr ~ = 'foo'] {} [otherAttr~='foo'] {}
[otherAttr ~ = 'bar'] {} [otherAttr~='bar'] {}
/* Ou contém um valor em uma lista separada por hífen, ou seja, "-" (U + 002D) */ /* Ou contém um valor em uma lista separada por hífen, ou seja, "-" (U + 002D) */
[otherAttr | = 'en'] {font-size: smaller; } [otherAttr|='pt'] {font-size: smaller; }
/* Você pode concatenar diferentes seletores para criar um seletor mais estreito. Não /* Você pode combinar diferentes seletores para criar um seletor mais específica. Lembre-se
   colocar espaços entre eles. */ de não colocar espaço entre eles */
classe div.some [attr $ = 'ue'] {} div.some-class[attr$='ue'] {}
/* Você pode selecionar um elemento que é filho de outro elemento */ /* Você pode selecionar um elemento que está diretamento dentro de outro elemento */
div.some-parent> .class-name {} div.some-parent > .class-name {}
/* Ou um descendente de um outro elemento. Os filhos são os descendentes diretos de /* Ou um descendente desse elemento. Os filhos são os descendentes diretos de
   seu elemento pai, apenas um nível abaixo da árvore. Pode ser quaisquer descendentes um elemento pai, apenas um nível abaixo. Da seguinte forma, você pode seleciona qualquer
   nivelados por baixo da árvore. */ elemento que esteja dentro do elemento principal. */
div.some-parent class-name {} div.some-parent .class-name {}
/* Atenção: o mesmo seletor sem espaço tem um outro significado. /* Atenção: o mesmo seletor sem espaço tem um outro significado.
   Você consegue adivinhar o que? */ Dessa forma você estará selecionando um elemento que contenha as duas classes. */
div.some-parent.class-name {} div.some-parent.class-name {}
/* Você também pode selecionar um elemento com base em seu irmão adjacente */ /* Você também pode selecionar um elemento com base em seu irmão mais próximo */
.i am just-antes + .Este elemento {} .i-am-just-before + .this-element {}
/* Ou qualquer irmão que o precede */ /* Ou qualquer irmão que o precede */
.i am-qualquer-elemento antes ~ .Este elemento {} .i-am-any-element-before ~ .this-element { }
/* Existem alguns seletores chamados pseudo classes que podem ser usados para selecionar um /* Existem alguns seletores, chamados pseudo classes, que podem ser usados para selecionar um
   elemento quando ele está em um determinado estado */ elemento quando ele está em um determinado estado */
/* Por exemplo, quando o cursor passa sobre um elemento */ /* Por exemplo, quando o cursor passa sobre um elemento */
seletor:hover {} seletor:hover {}
@ -112,10 +114,10 @@ seletor:link {}
/* Ou um elemento em foco */ /* Ou um elemento em foco */
seletor:focus {} seletor:focus {}
/* Qualquer elemento que é o primeiro filho de seu pai */ /* Qualquer elemento que é o primeiro filho */
seletor:first-child {} seletor:first-child {}
/* Qualquer elemento que é o último filho de seu pai */ /* Qualquer elemento que é o último filho */
seletor:last-child {} seletor:last-child {}
/* Assim como pseudo classes, pseudo elementos permitem que você estilize certas partes de um documento */ /* Assim como pseudo classes, pseudo elementos permitem que você estilize certas partes de um documento */
@ -126,88 +128,91 @@ seletor::before {}
/* Corresponde a um último filho virtual do elemento selecionado */ /* Corresponde a um último filho virtual do elemento selecionado */
seletor::after {} seletor::after {}
/* Nos locais apropriados, um asterisco pode ser utilizado como um curinga para selecionar todos /* Nos locais apropriados, um asterisco pode ser utilizado como um curinga para selecionar
   os elementos */ todos os elementos */
* {} /* */ Todos os elementos
.parent * {} /* */ todos os descendentes * {} /* Todos os elementos */
.parent> * {} /* */ todos os filhos .parent * {} /* todos os descendentes */
.parent > * {} /* todos os filhos */
/* #################### /* ####################
   ## PROPRIEDADES ## PROPRIEDADES
   #################### */ #################### */
seletor { seletor {
/* Unidades de comprimento pode ser absoluta ou relativa. */
    /* Unidades de comprimento pode ser absoluta ou relativa. */ /* Unidades relativas */
width: 50%; /* Percentagem de largura do elemento pai */
font-size: 2em; /* Múltiplos de font-size original de elemento */
font-size: 2rem; /* Ou do elemento raiz font-size */
font-size: 2vw; /* Múltiplos de 1% da largura da janela de exibição (CSS 3) */
font-size: 2vh; /* Ou a sua altura */
font-size: 2vmin; /* Qualquer um de VH ou um VW é menor */
font-size: 2vmax; /* Ou superior */
    /* Unidades relativas */ /* Unidades absolutas */
    width: 50%; /* Percentagem de largura do elemento pai */ width: 200px; /* Píxeis */
    font-size: 2em; /* Múltiplos de font-size original de elemento */ font-size: 20pt; /* Pontos */
    font-size: 2rem; /* Ou do elemento raiz font-size */ width: 5cm; /* Centímetros */
    font-size: 2vw; /* Múltiplos de 1% da largura da janela de exibição (CSS 3) */ min-width: 50mm; /* Milímetros */
    font-size: 2vh; /* Ou a sua altura */ max-width: 5 polegadas; /* Polegadas */
    font-size: 2vmin; /* Qualquer um de VH ou um VW é menor */
    font-size: 2vmax; /* Ou superior */
    /* Unidades absolutas */ /* Cores */
    width: 200px; /* píxeis */ color: #F6E; /* Formato hexadecimal curto */
    font-size: 20pt; /* Pontos */ color: #FF66EE; /* Formato hexadecimal longo */
    width: 5cm; /* Centímetros */ color: tomato; /* Uma cor nomeada */
    min-width: 50mm; /* Milímetros */ color: rgb(255, 255, 255); /* Como valores rgb */
    max-width: 5 polegadas; /* Polegadas */ color: RGB(10%, 20%, 50%); /* Como porcentagens rgb */
color: rgba(255, 0, 0, 0,3); /* Como valores RGBA (CSS 3) NOTA: 0 <a <1 */
color: transparent; /* Equivale a definir o alfa a 0 */
color: HSL(0, 100%, 50%); /* Como porcentagens HSL (CSS 3) */
color: HSLA(0, 100%, 50%, 0,3); /* Como porcentagens HSLA com alfa */
    /* Cores */ /* Imagens como fundos de elementos */
    color: # F6E; /* Formato hexadecimal curto */ background-image: url(/img-path/img.jpg); /* O uso das aspas dentro de url() é opcional */
    color: # FF66EE; /* Formato hexadecimal longo */
    color: tomato; /* Uma cor nomeada */
    color: rgb (255, 255, 255); /* Como valores rgb */
    color: RGB (10%, 20%, 50%); /* Como porcentagens rgb */
    color: rgba (255, 0, 0, 0,3); /* Como valores RGBA (CSS 3) NOTA: 0 <a <1 */
    color: transparent; /* Equivale a definir o alfa a 0 */
    color: HSL (0, 100%, 50%); /* Como porcentagens HSL (CSS 3) */
    color: HSLA (0, 100%, 50%, 0,3); /* Como porcentagens HSLA com alfa */
    /* Imagens como fundos de elementos */ /* Fontes */
    background-image: url (/img-path/img.jpg); /* Citações dentro url () opcional */ font-family: Arial;
/* Se o nome da família de fonte tem um espaço, deve estar entre aspas */
    /* Fontes */ font-family: "Courier New";
    font-family: Arial; /* Se o primeiro não for encontrada, o navegador usa a próxima, e assim por diante */
    /* Se o nome da família de fonte tem um espaço, deve ser citado */ font-family: "Courier New", Trebuchet, Arial, sans-serif;
    font-family: "Courier New";
    /* Se o primeiro não for encontrada, o navegador usa o próximo, e assim por diante */
    font-family: "Courier New", Trebuchet, Arial, sans-serif;
} }
``` ```
## Uso ## Uso
Salvar uma folha de estilo CSS com a extensão `.css`. Salve o arquivo de estilos CSS com a extensão `.css`.
```xml ```html
<!-- Você precisa incluir o arquivo css no da sua página <head>. Isto é o <!-- Você precisa incluir o arquivo css dentro da tag <head>. Esse é o
     método recomendado. Consulte http://stackoverflow.com/questions/8284365 --> método recomendado. Consulte http://stackoverflow.com/questions/8284365 -->
<link rel='stylesheet' type='text/css' href='path/to/style.css' /> <link rel="stylesheet" type="text/css" href="path/to/style.css" />
<!-- Você também pode incluir alguns CSS inline na sua marcação. --> <!-- Você também pode incluir alguns CSS inline no seu HTML. -->
<style> <style>
   a { color: purple; } a { color: purple; }
</style> </style>
<!-- Ou diretamente definir propriedades CSS no elemento. --> <!-- Ou definir propriedades CSS diretamente no elemento. -->
<div style="border: 1px solid red;"> <div style="border: 1px solid red;">
</div> </div>
``` ```
## Precedência ou Cascata ## Precedência ou Cascata
Um elemento pode ser alvo de vários seletores e pode ter um conjunto de propriedades em que mais de uma vez. Nestes casos, uma das regras tem precedência sobre as outras. Geralmente, uma regra em um seletor mais específico têm precedência sobre um menos específico, e uma regra que ocorre mais tarde na folha de estilo substitui uma anterior. Um elemento pode ser alvo de vários seletores e pode ter um conjunto de propriedades que
são adicionados mais de uma vez. Nestes casos, uma das regras tem precedência sobre as
outras. Geralmente, uma regra em um seletor mais específico têm precedência sobre um
menos específico, e uma regra que ocorre mais tarde na folha de estilo substitui uma anterior.
Este processo é chamado de cascata, portanto, as Fichas de nome de estilo em cascata. Este processo é chamado de cascata, daí vem o nome: Cascading Style Sheets (Folhas de Estilo em Cascata).
Dado o seguinte CSS: Dado o seguinte CSS:
```css ```css
/* UMA */ /* A */
p.class1[attr="value"] p.class1[attr="value"]
/* B */ /* B */
@ -225,20 +230,22 @@ p { property: value !important; }
e a seguinte marcação: e a seguinte marcação:
```xml ```html
<p style='/*F*/ property:value;' class='class1 class2' attr='value' /> <p style='/*F*/ property:value;' class='class1 class2' attr='value' />
``` ```
A precedência de estilo é a seguinte. Lembre-se, a precedência é para cada **propriedade**, não para todo o bloco. A precedência de estilo é a seguinte: Lembre-se, a precedência se aplica a
cada **propriedade**, não ao bloco como um todo.
* `E` tem a precedência mais alta por causa de uma palavra-chave`!important`. É recomendável que você evitar seu uso. * `E` tem a precedência mais alta por causa de uma palavra-chave`!important`. É recomendado evitar seu uso.
* `F` é a próxima, porque é um estilo interno. * `F` é o seguinte, porque é um estilo interno.
* `A` é a próxima, porque é mais" específico "do que qualquer outra coisa. Tem 3 especificadores: O nome do elemento `p`, o seu `class1` classe, um atributo `attr='value'`. * `A` é o seguinte, porque é "mais específico" do que os outros. Tem 3 especificadores: O nome do elemento `p`, a sua classe `class1` e um atributo `attr="value"`.
* `C` está próximo, mesmo que ele tenha a mesma especificidade que `B`. Isso é porque ele aparece depois de `B`. * `C` é o seguinte, mesmo que ele tenha a mesma especificidade que `B`. Isso acontece porque ele aparece logo após o `B`.
* `B` é o próximo. * `B` é o seguinte.
* `D` é a última. * `D` é o último.
## Media Queries ## Media Queries
Media queries são recursos do CSS3 que permitem especificar quando determinadas regras de CSS devem ser aplicadas; é possível aplicar regras diferentes quando a página é impressa, quando a tela possui determinadas dimensões ou densidade de pixels e quando é lida por um leitor de tela. Media queries não adicionam especificidade ao seletor. Media queries são recursos do CSS3 que permitem especificar quando determinadas regras de CSS devem ser aplicadas; é possível aplicar regras diferentes quando a página é impressa, quando a tela possui determinadas dimensões ou densidade de pixels e quando é lida por um leitor de tela. Media queries não adicionam especificidade ao seletor.
```css ```css
@ -265,7 +272,8 @@ h1 {
} }
} }
``` ```
Media queries podem incluir os seguintes atributos: `width`, `height`, `device-width`, `device-height`, `orientation`, `aspect-ratio`, `device-aspect-ratio`, `color`, `color-index`, `monochrome`, `resolution`, `scan`, `grid`. A maioria desses atributos pode ser prefixada com `min-` ou `max-`.
Media queries podem incluir os seguintes atributos: `width`, `height`, `device-width`, `device-height`, `orientation`, `aspect-ratio`, `device-aspect-ratio`, `color`, `color-index`, `monochrome`, `resolution`, `scan` e `grid`. A maioria desses atributos pode ser prefixada com `min-` ou `max-`.
O atributo `resolution` não é suportado em dispositivos mais antigos. Em vez disso, use `device-pixel-ratio`. O atributo `resolution` não é suportado em dispositivos mais antigos. Em vez disso, use `device-pixel-ratio`.
@ -279,20 +287,22 @@ Muitos smartphones e tablets tentarão renderizar a página como se estivesse nu
## Compatibilidade ## Compatibilidade
A maior parte dos recursos do CSS 2 (e muitos em CSS 3) estão disponíveis em todos os navegadores e dispositivos. Mas é sempre boa prática verificar antes de usar um novo recurso. A maioria dos recursos do CSS 2 (e muitos do CSS 3) está disponível em todos os navegadores
e dispositivos.
## Recursos ## Recursos Adicionais
* Para executar uma verificação de compatibilidade rápida, [CanIUse](http://caniuse.com). * Para executar uma verificação de compatibilidade rápida, [CanIUse](http://caniuse.com).
* CSS Playground [Dabblet](http://dabblet.com/). * CSS Playground [Dabblet](http://dabblet.com/).
* [Documentação CSS Mozilla Developer Rede](https://developer.mozilla.org/en-US/docs/Web/CSS) * [Documentação CSS Mozilla Developer](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [Codrops 'Referência CSS](http://tympanus.net/codrops/css_reference/) * [Codrops Referência CSS](http://tympanus.net/codrops/css_reference/)
* [DevTips CSS Basics](https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy) (Tutorials)
## Leitura adicional ## Leitura adicional
* [Entendendo Estilo Precedência em CSS: Especificidade, Herança, e o Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) * [Entendendo Estilo Precedência em CSS: Especificidade, Herança, e o Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
* [Selecionando elementos usando atributos](https://css-tricks.com/almanac/selectors/a/attribute/) * [Selecionando elementos usando atributos](https://css-tricks.com/almanac/selectors/a/attribute/)
* [QuirksMode CSS](http://www.quirksmode.org/css/) * [QuirksMode CSS](http://www.quirksmode.org/css/)
* [Z-Index - O empilhamento context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) * [Z-Index - O contexto de empilhamento](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
* [SASS](http://sass-lang.com/) e [Less](http://lesscss.org/) para CSS pré-processamento * [SASS](http://sass-lang.com/) e [Less](http://lesscss.org/) para pré-processamento do CSS
* [CSS-Tricks](https://css-tricks.com) * [CSS-Tricks](https://css-tricks.com)