Nomes de propriedades com o prefixo --, como --example-name, representam Propriedade personalizadas que contém um valor que pode ser reutilizado por todo o documento usando a função ({{cssxref("var")}}).
+
Nomes de propriedades com o prefixo --, como --example-name, representam Propriedade personalizadas que contém um valor que pode ser reutilizado por todo o documento usando a função ({{cssxref("var")}}).
Propriedades personalizadas participam na cascata: cada uma delas pode aparecer várias vezes e o valor da variável corresponderá ao valor definido na propriedade personalizada, decidido pelo algoritmo de cascata.
A propriedade CSS -webkit-overflow-scrolling controla quando dispositivos com a funcionalidade de toque na tela usam uma rolagem baseada no "momentum" de um dado elemento.
+
A propriedade CSS -webkit-overflow-scrolling controla quando dispositivos com a funcionalidade de toque na tela usam uma rolagem baseada no "momentum" de um dado elemento.
O @font-faceCSSat-rule especifica uma fonte customizada com a qual exibe o texto; a fonte pode ser carregada de um servidor remoto ou de uma fonte instalada localmente no computador do usuário. Se a função local() for fornecida, a especificação do nome da fonte a ser procurada no computador do usuário, e a {{Glossary("user agent")}} encontrar uma correspondência, essa fonte local será usada. Caso contrário, o recurso de fonte especificado usando a função url() é baixado e usado.
+
O @font-faceCSSat-rule especifica uma fonte customizada com a qual exibe o texto; a fonte pode ser carregada de um servidor remoto ou de uma fonte instalada localmente no computador do usuário.
+
+
Se a função local() for fornecida, a especificação do nome da fonte a ser procurada no computador do usuário, e a {{Glossary("user agent")}} encontrar uma correspondência, essa fonte local será usada. Caso contrário, o recurso de fonte especificado usando a função url() é baixado e usado.
Ao permitir que os autores forneçam suas próprias fontes, @font-face torna possível projetar conteúdo sem se limitar às chamadas fontes "seguras para a web" (ou seja, as fontes que são tão comuns que são consideradas como universalmente disponível). A capacidade de especificar o nome de uma fonte instalada localmente a ser procurada e usada permite personalizar a fonte além do básico, ao mesmo tempo em que é possível fazê-lo sem depender de uma conexão com a Internet.
Assim comoos agentes do usuáriopodem evitara recuperação derecursospara os tipos demídia incompatíveis, os autores podemespecificar regras@importdependentes de mídia.Estas importaçõescondicionaisdevem ter media queriesseparadas por vírgulas após a URI. Na ausênciade qualquerconsulta de mídia (media queries), a importaçãoé incondicional.Especificandotodospara o médiotem o mesmo efeito.
+
Assim como os agentes do usuário podem evitar a recuperação de recursos para os tipos de mídia incompatíveis, os autores podem especificar regras @import dependentes de mídia. Estas importações condicionais devem ter media queries separadas por vírgulas após a URI. Na ausência de qualquer consulta de mídia (media queries), a importação é incondicional. Especificando todos para o médio tem o mesmo efeito.
Sintaxe
@@ -54,7 +54,7 @@
Especificações
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}
The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.
+
The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.
@keyframes slidein {
from {
diff --git a/files/pt-br/web/css/@media/aspect-ratio/index.html b/files/pt-br/web/css/@media/aspect-ratio/index.html
index 5dbd8db55ebe6e..03f9625114e0e1 100644
--- a/files/pt-br/web/css/@media/aspect-ratio/index.html
+++ b/files/pt-br/web/css/@media/aspect-ratio/index.html
@@ -55,10 +55,6 @@
CSS
-
_Exemplo
-
-
utilizado iframe e DataURL para que este iframe possa redimensionar
The @mediaCSSat-rule pode ser usada para aplicar estilos com base no resultado de uma ou mais consultas de mídia, que testam o tipo, as características específicas e o ambiente de um dispositivo.
+
The @mediaCSSat-rule pode ser usada para aplicar estilos com base no resultado de uma ou mais consultas de mídia, que testam o tipo, as características específicas e o ambiente de um dispositivo.
No CSS, a regra @media deve ser posta na parte superior do seu código ou aninhada dentro de algum outro conditional group at-rule.
A regra CSS @page é utilizada para modificar algumas propriedades CSS quando o documento for impresso.Você não pode mudar todas as propriedades CSS com @page. Você poderá somente mudar as margens, orphans, widows, e page breaks do documento. Na tentativa de mudar outra propriedade CSS, elas serão ignoradas.
+
A regra CSS @page é utilizada para modificar algumas propriedades CSS quando o documento for impresso.Você não pode mudar todas as propriedades CSS com @page. Você poderá somente mudar as margens, orphans, widows, e page breaks do documento. Na tentativa de mudar outra propriedade CSS, elas serão ignoradas.
-
A regra CSS @page pode ser acessada via interface do modelo de objeto {{domxref("CSSPageRule")}}.
+
A regra CSS @page pode ser acessada via interface do modelo de objeto {{domxref("CSSPageRule")}}.
-
Nota:A W3C está analisando como lidar com unidades viewport-related {{cssxref("<length>")}}, vh, vw, vmin, and vmax. Enquanto isso, não use eles junto com a regra @page.
+
Nota: A W3C está analisando como lidar com unidades viewport-related {{cssxref("<length>")}}, vh, vw, vmin, and vmax. Enquanto isso, não use eles junto com a regra @page.
Representa todos os selects na página que estão selecionados
-
Usando checkboxes escodindos para amarzenar algum valor booleano.
+
Usando checkboxes escodindos para amarzenar algum valor booleano.
A pseudo-classe :checked aplicada em checkboxes escondidos, adicionado ao início de sua página pode
ser aplicada de forma a armazenar algum booleano dinâmico para ser usado por uma regra CSS. O exemplo a seguir mostra como exibir/esconder um elemento expansível com um simples clique em um botão (download esse demo).
A pseudo-classe CSS:disabled representa qualquer elemento desativado. Um elemento é desativado se não puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado habilitado, no qual ele pode ser ativado ou aceitar o foco.
+
A pseudo-classe CSS:disabled representa qualquer elemento desativado. Um elemento é desativado se não puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado habilitado, no qual ele pode ser ativado ou aceitar o foco.
Este exemplo mostra um formulário básico de envio. Ele usa o evento JavaScriptchange para permitir que o usuário ative / desative os campos de faturamento.
+
Este exemplo mostra um formulário básico de envio. Ele usa o evento JavaScriptchange para permitir que o usuário ative / desative os campos de faturamento.
A pseudo-classe CSS:enabled representa qualquer elemento ativado. Um elemento é ativado se puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado desativado, no qual não pode ser ativado nem aceitar foco.
+
A pseudo-classe CSS:enabled representa qualquer elemento ativado. Um elemento é ativado se puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado desativado, no qual não pode ser ativado nem aceitar foco.
O exemplo a seguir torna a cor do texto e do botão <input>verde quando ativada e cinza quando desativada. Isso ajuda o usuário a entender quais elementos podem ser interagidos..
+
O exemplo a seguir torna a cor do texto e do botão <input>verde quando ativada e cinza quando desativada. Isso ajuda o usuário a entender quais elementos podem ser interagidos..
A pseudo-classe :fullscreen do CSS representa os elementos que estão atualmente no modo tela-cheia. Se vários elementos estiverem em tela-cheia, isto seleciona todos.
+
A pseudo-classe :fullscreen do CSS representa os elementos que estão atualmente no modo tela-cheia. Se vários elementos estiverem em tela-cheia, isto seleciona todos.
Sintaxe
@@ -23,7 +23,7 @@
HTML
The page's HTML looks like this:
-
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
+
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
change the style of a button used to toggle full-screen mode on and off,
@@ -37,14 +37,14 @@
CSS
The magic happens in the CSS. There are two rules here. The first establishes the background color of the "Toggle Full-screen Mode" button when the element is not in a full-screen state. The key is the use of the :not(:fullscreen), which looks for the element to not have the :fullscreen pseudo-class applied to it.
Este seletor não seleciona apenas {{htmlElement("input")}}/{{htmlElement("textarea")}} elementos - ele selecionará qualquer elemento que possa ser editado pelo usuário, como um {{htmlelement("p")}} elemento com {{htmlattrxref("contenteditable")}} definido sobre ele.
-
<p contenteditable>Este parágrafo é editável; é read-write.</p>
+
<p contenteditable>Este parágrafo é editável; é read-write.</p>
<p>Este parágrafo não é editável; é read-only.</p>
A pseudo-classe CSS:target representa um único elemento (o elemento alvo) com uma {{htmlattrxref("id")}} correspondente ao fragmento da URL.
-
/* Seleciona um elemento com a ID correspondente ao fragmento da URL */
+
/* Seleciona um elemento com a ID correspondente ao fragmento da URL */
:target {
border: 2px solid black;
}
Por exemplo, a seguinte URL tem um fragmento (denotado pelo sinal de #) que aponta para o elemento chamado section2:
-
http://www.example.com/index.html#section2
+
http://www.example.com/index.html#section2
O seguinte elemento será selecionado pelo seletor :target quando a URL for igual acima:
-
<section id="section2">Exemplo</section>
+
<section id="section2">Exemplo</section>
Sintaxe
@@ -32,7 +32,7 @@
Índice
HTML
-
<h3>Índice</h3>
+
<h3>Índice</h3>
<ol>
<li><a href="#p1">Ir para o primeiro parágrafo!</a></li>
<li><a href="#p2">Ir para o segundo parágrafo!</a></li>
@@ -49,7 +49,7 @@
Em CSS, ::after cria um pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade {{cssxref("content")}}. É inline por padrão.
+
Em CSS, ::after cria um pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade {{cssxref("content")}}. É inline por padrão.
-
/* Adiciona uma seta após os links */
-a::after{
- content: "→";
-}
+
/* Adiciona uma seta após os links */
+a::after {
+ content: "→";
+}
::before cria um pseudo-elemento que é o primeiro filho do elemento atingido. É frequentemente utilizado para adicionar conteúdo decorativo à um element utilizando a propriedade {{cssxref("content")}}. Este elemento é inline por padrão.
+
::before cria um pseudo-elemento que é o primeiro filho do elemento atingido. É frequentemente utilizado para adicionar conteúdo decorativo à um element utilizando a propriedade {{cssxref("content")}}. Este elemento é inline por padrão.
Sintaxe
@@ -128,7 +128,7 @@
Saída
Notas
-
Embora as correções posicionadas e fixadas no Firefox 3.5 não permitam que o conteúdo seja gerado como um irmão anterior ao elemento (conforme a especificação para o CSS indicam "Os Pseudo-elementos :before e :after interagem com outros elementos como se fosse elementos reais inseridos dentro do elemento associado."), eles podem ser usados para proporcionar uma ligeira melhora em layouts sem tables (por exemplo, para alcançar a centralização), a medida que o conteúdo a ser centrado está envolvido com um elemento filho adicional, uma coluna antes e depois do conteúdo pode ser introduzida sem adicionar elementos filhos reais (isto é, talvez mais semanticamente correto para adicionar uma pequena distância, do que seria adicionar um div vazio antes e / ou depois). (E sempre lembre-se de adicionar uma largura a um flutuador, pois, de outra forma, não flutuará!)
+
Embora as correções posicionadas e fixadas no Firefox 3.5 não permitam que o conteúdo seja gerado como um irmão anterior ao elemento (conforme a especificação para o CSS indicam "Os Pseudo-elementos :before e :after interagem com outros elementos como se fosse elementos reais inseridos dentro do elemento associado."), eles podem ser usados para proporcionar uma ligeira melhora em layouts sem tables (por exemplo, para alcançar a centralização), a medida que o conteúdo a ser centrado está envolvido com um elemento filho adicional, uma coluna antes e depois do conteúdo pode ser introduzida sem adicionar elementos filhos reais (isto é, talvez mais semanticamente correto para adicionar uma pequena distância, do que seria adicionar um div vazio antes e / ou depois). (E sempre lembre-se de adicionar uma largura a um flutuador, pois, de outra forma, não flutuará!)
A primeira letra de um elemento não é necessariamente uma identificação trivial:
-
Pontuação, que é qualquer caractere definido em Unicode de abertura (Ps), de fechamento (Pe), aspa inicial (Pi), aspa final (Pf) e outras pontuações (Po), precedendo ou imediatamente após a primeira letra também é correspondidapor esse pseudo-elemento.
-
Da mesma forma, alguns idiomas têm dígitos que são sempre escritos em maiúsculas, como o IJ em holandês.Nesses casos raros, as duas letras do dígrafo devem corresponder ao pseudo-elemento :: first-letter.(Isso é pouco suportado pelos navegadores, verifique a tabela de compatibilidade).
-
Finalmente, uma combinação do pseudoelemento {{cssxref (":: before")}} e a propriedade {{cssxref ("content")}} podem injetar algum texto no início do elemento.Nesse caso, ::first-letter corresponderá à primeira letra deste conteúdo gerado.
+
Pontuação, que é qualquer caractere definido em Unicode de abertura (Ps), de fechamento (Pe), aspa inicial (Pi), aspa final (Pf) e outras pontuações (Po), precedendo ou imediatamente após a primeira letra também é correspondida por esse pseudo-elemento.
+
Da mesma forma, alguns idiomas têm dígitos que são sempre escritos em maiúsculas, como o IJ em holandês. Nesses casos raros, as duas letras do dígrafo devem corresponder ao pseudo-elemento :: first-letter. (Isso é pouco suportado pelos navegadores, verifique a tabela de compatibilidade).
+
Finalmente, uma combinação do pseudoelemento {{cssxref (":: before")}} e a propriedade {{cssxref ("content")}} podem injetar algum texto no início do elemento. Nesse caso, ::first-letter corresponderá à primeira letra deste conteúdo gerado.
-
Uma primeira linha tem apenas significado em uma caixa de contêiner de bloco; portanto, o pseudo-elemento ::first-letter apenas afeta os elementos com um valor de {{cssxref ("display")}} de block, inline-block, table-cell, list-item ou table-caption.Em todos os outros casos, ::first-letter não tem efeito.
+
Uma primeira linha tem apenas significado em uma caixa de contêiner de bloco; portanto, o pseudo-elemento ::first-letter apenas afeta os elementos com um valor de {{cssxref ("display")}} de block, inline-block, table-cell, list-item ou table-caption. Em todos os outros casos, ::first-letter não tem efeito.
-
Somente um pequeno subconjunto de todas as propriedades CSS pode ser usado dentro de um bloco de declaração de um conjunto de regras CSS que contém um seletor usando o pseudoelemento ::first-letter:
+
Somente um pequeno subconjunto de todas as propriedades CSS pode ser usado dentro de um bloco de declaração de um conjunto de regras CSS que contém um seletor usando o pseudoelemento ::first-letter:
Todas as propriedades de fonts : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}.
Todas as propriededas de background : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}}.
Todas as propriedades de margem: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.
Todas as propriedades de "padding" (preenchimento): {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.
-
Todas as bordas: the taquigraficas {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, e as propriedades manuscritas.
+
Todas as bordas: the taquigraficas {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, e as propriedades manuscritas.
Como toda essa lista será estendida no futuro, é recomendado que você não use qualquer propriedade dentro da declaração do bloco, afim de manter o CSS a qualquer prova.
-
No CSS 2, os pseudoelementos eram prefixados com um caractere de dois pontos (:).Como as pseudo-classes também estavam seguindo a mesma convenção, elas eram indistinguíveis.Para resolver isso, o CSS 2.1 mudou a convenção para pseudoelementos.Agora, um pseudoelemento é prefixado com dois caracteres de dois pontos (::) e uma pseudo-classe ainda é prefixado com um único dois pontos (:).
+
No CSS 2, os pseudoelementos eram prefixados com um caractere de dois pontos (:). Como as pseudo-classes também estavam seguindo a mesma convenção, elas eram indistinguíveis. Para resolver isso, o CSS 2.1 mudou a convenção para pseudoelementos. Agora, um pseudoelemento é prefixado com dois caracteres de dois pontos (::) e uma pseudo-classe ainda é prefixado com um único dois pontos (:).
Exemplo de pseudoclasse: .classedoelemento:hover { ... }
@@ -42,18 +42,18 @@
Sumário
Exemplo de pesudoelemento: .classedoelemento::first-letter { ... }
-
Como vários navegadores já implementaram a versão CSS 2 em uma versão de lançamento, todos os navegadores que suportam a sintaxe de dois pontos também suportam a antiga sintaxe de dois pontos.
+
Como vários navegadores já implementaram a versão CSS 2 em uma versão de lançamento, todos os navegadores que suportam a sintaxe de dois pontos também suportam a antiga sintaxe de dois pontos.
-
Mas isso pode mudar, portanto use SEMPRE :: para pseudolementos
+
Mas isso pode mudar, portanto use SEMPRE :: para pseudolementos
-
...a não se que você precise muito que seu código seja compatível com Internet Explore 8, então use um carectere de dois pontos.
+
...a não se que você precise muito que seu código seja compatível com Internet Explore 8, então use um carectere de dois pontos.
Exemplo
-
/* Fazendo odas as letras dos paragrados maior e vermelha */
+
/* Fazendo odas as letras dos paragrados maior e vermelha */
p::first-letter { /* Use :first-letter if você precise muito de compatibilidade com IE 8 */
color: red;
@@ -75,7 +75,7 @@
Propriedades permitidas generalizadas para tipografia, decoração de texto e propriedades de layout embutido, {{ cssxref("opacity") }} e {{ cssxref("box-shadow") }}.
+
Propriedades permitidas generalizadas para tipografia, decoração de texto e propriedades de layout embutido, {{ cssxref("opacity") }} e {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}
Comportamento definido entre maiúsculas e minúsculas, como nos itens da lista, ou com comportamento específico do idioma (como o dígrafo holandêsIJ). A sintaxe de dois dois-pontos para pseudo-elementos foi introduzida.
+
Comportamento definido entre maiúsculas e minúsculas, como nos itens da lista, ou com comportamento específico do idioma (como o dígrafo holandês IJ). A sintaxe de dois dois-pontos para pseudo-elementos foi introduzida.
O pseudoelemento ::first-line aplica estilos à primeira linha de um elemento no nível do bloco. Observe que o comprimento da primeira linha depende de muitos fatores, incluindo a largura do elemento, a largura do documento e o tamanho da fonte do texto.
+
O pseudoelemento ::first-line aplica estilos à primeira linha de um elemento no nível do bloco. Observe que o comprimento da primeira linha depende de muitos fatores, incluindo a largura do elemento, a largura do documento e o tamanho da fonte do texto.
-
/* Seleciona a primeira linha dentro da tag <p> */
+
/* Seleciona a primeira linha dentro da tag <p> */
p::first-line {
color: red;
}
@@ -36,7 +36,7 @@
Exemplos
HTML
-
<p>Os estilos serão aplicados apenas à primeira linha deste parágrafo.
+
<p>Os estilos serão aplicados apenas à primeira linha deste parágrafo.
Depois disso, todo o texto será estilizado normalmente. Entendeu o que eu quis dizer?</p>
<span>A primeira linha deste texto não receberá um estilo especial
@@ -44,7 +44,7 @@
O pseudo-elemento CSS ::selection aplica estilos para partes do documento que foram selecionadas pelo usuário (tal como clicar e arrastar o ponteiro do mouse através de um texto.
+
O pseudo-elemento CSS ::selection aplica estilos para partes do documento que foram selecionadas pelo usuário (tal como clicar e arrastar o ponteiro do mouse através de um texto.
-
::selection {
+
::selection {
background-color: cyan;
}
@@ -32,7 +32,7 @@
Propriedades permitidas
Sintaxe
-
/* Sintaxe legado do Firefox (até a versão 61) */
+
/* Sintaxe legado do Firefox (até a versão 61) */
::-moz-selection
{{CSSSyntax}}
@@ -42,13 +42,13 @@
Exemplo
HTML
-
Esse texto tem estilos especiais quando selecionado.
+
Esse texto tem estilos especiais quando selecionado.
<p>Tente selecionando também o texto nesse parágrafo.</p>
This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap).
Syntax
-
/* Basic positional alignment */
+
/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: center; /* Pack items around the center */
align-content: start; /* Pack items from the start */
@@ -51,6 +49,7 @@
The items are packed flush to each other in the center of the alignment container along the cross axis.
normal
The items are packed in their default position as if no align-content value was set.
-
baseline
- first baseline
- last baseline
-
-
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
- The fallback alignment for first baseline is start, the one for last baseline is end.
+
baseline, first baseline, last baseline
+
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+
+
The fallback alignment for first baseline is start, the one for last baseline is end.
+
space-between
The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis.
space-around
@@ -103,7 +102,7 @@
Examples
CSS
-
#container {
+
#container {
height:200px;
width: 240px;
align-content: center; /* Can be changed in the live sample */
@@ -171,7 +170,7 @@
\ No newline at end of file
diff --git a/files/pt-br/web/css/animation-delay/index.html b/files/pt-br/web/css/animation-delay/index.html
index 33e7b865e293bb..19e6027d06b8ec 100644
--- a/files/pt-br/web/css/animation-delay/index.html
+++ b/files/pt-br/web/css/animation-delay/index.html
@@ -28,9 +28,8 @@
Valores
{{cssxref("<time>")}}
-
O deslocamento do tempo, a partir do momento em que a animação é aplicada ao elemento, no qual a animação deve começar. Isso pode ser especificado em segundos (s) ou milesegundos or milliseconds (ms). A unidade é necessaria.
-
Um valor positivo indica que a animação deve começar após o período de especificação ter decorrido. O valor de 0s, que é o padrão, incida que a animação deve começar desde que foi aplicada.
-
+
O deslocamento do tempo, a partir do momento em que a animação é aplicada ao elemento, no qual a animação deve começar. Isso pode ser especificado em segundos (s) ou milesegundos or milliseconds (ms). A unidade é necessaria.
+
Um valor positivo indica que a animação deve começar após o período de especificação ter decorrido. O valor de 0s, que é o padrão, incida que a animação deve começar desde que foi aplicada.
Um valor negativo faz com que a animação comece imediatamente, mas parcialmente através do seu ciclo. Por exemplo, se você específicar -1s como tempo da animation-delay , a animação vai começar imediatamente, mas começará 1 segundo na sequência de animação. Se você específicar um valor negativo para a animation-delay, mas o valor inicial é implícito, o valor inicial é retirado do momento em que a animação é aplicada ao elemento.
<p>Move your mouse over the gray box!</p>
<div class="demo">
<div class="growsandstays">This grows and stays big.</div>
<div class="grows">This just grows.</div>
@@ -122,7 +122,7 @@
A função attr() do CSS é utilizada para se obter o valor de um determinado atributo do elemento selecionado e usá-lo na folha de estilo. Também pode ser utilizado em pseudo-elementos, nesse caso o valor do atributo no pseudo-elemento do elemento original é retornado.
-
/* Uso Simples */
+
/* Uso Simples */
attr(data-count);
attr(title);
@@ -67,7 +67,7 @@
Valores
{{cssxref("<color>")}}
O valor do atributo é analisado como hash (3- ou 6-valores hash) ou a palavra-chave. Precisa ser um valor {{cssxref("<string>")}} CSS válido.
Os espaços do lead e trail são retirados.
Essa chave significa que o background é fixo em relação ao conteúdo do elemento: ise ele tem um mecanismo de rolar, o background rola com o conteúdo do elemento, e a área pintada e o posicionamento do background são relativos à área de rolagem do elemento ao invés da borda de fronteira deles.
scroll
Essa chave significa que o background é fixo em relação ao elemento em si e não rola com seu conteúdo. (É efetivamente ligado à borda do elemento.)
A fonte para esta exemplo interativo está disponível no repositório GitHub. Se você pudesse contribuir com os exemplos de projetos interativos, por favor copie https://github.com/mdn/interactive-examples e envie-nos um pull request.
-
Note que background-origin é ignorado quando {{cssxref("background-attachment")}} é fixed.
Nota: A taquigrafia {{cssxref("background")}} redefine o valor desta propriedade para seu valor inicial se esta não foi específicada.
A fonte deste exemplo interativo está alocado em um repositório GitHub. Se você pudesse contribuir com os exemplos de projetos interativos , por favor "clone" https://github.com/mdn/interactive-examples e envie-nos um pull request.
A {{cssxref("<position>")}}. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one or two values. If two values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be center.
-
+
A {{cssxref("<position>")}}. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one or two values. If two values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be center.
A propriedade CSS background é um atalho para definir os valores de fundo individuais em um único lugar na folha de estilo. Background pode ser usado para definir os valores para um ou mais dos seguintes: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}} , {{cssxref("background-repeat")}}, {{cssxref("background-size")}} e {{cssxref("background-attachment")}}.
+
A propriedade CSS background é um atalho para definir os valores de fundo individuais em um único lugar na folha de estilo. Background pode ser usado para definir os valores para um ou mais dos seguintes: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}} , {{cssxref("background-repeat")}}, {{cssxref("background-size")}} e {{cssxref("background-attachment")}}.
-
O fundo CSS propriedade estenográfica atribui valores dados explícitos e conjuntos de propriedades para seus valores iniciais em falta.
+
O fundo CSS propriedade estenográfica atribui valores dados explícitos e conjuntos de propriedades para seus valores iniciais em falta.
-
{{cssinfo}}
+
{{cssinfo}}
-
Sintaxe
+
Sintaxe
+
+
/ * Usando uma <cor-de-fundo> * /
+background: green;
+
+/ * Usando uma <imagem-de-fundo> e <estilo-de-repetição> * /
+background: url("test.jpg") repeat-y;
+
+/ * Usando uma <box> e <cor-de-fundo> * /
+background: border-box red;
-
/ * Usando uma <cor-de-fundo> * /
-background: green;
-
-/ * Usando uma <imagem-de-fundo> e <estilo-de-repetição> * /
-background: url("test.jpg") repeat-y;
-
-/ * Usando uma <box> e <cor-de-fundo> * /
-background: border-box red;
-
/ * Uma única imagem, centrado e escalado * /
-background: no-repeat center/80% url( "../img/image.png");
+background: no-repeat center/80% url( "../img/image.png");
-
Nota: O {{cssxref ( "background-color")}} só pode ser definido no último fundo, como há apenas uma cor de fundo para todo o elemento.
+
Nota: O {{cssxref ( "background-color")}} só pode ser definido no último fundo, como há apenas uma cor de fundo para todo o elemento.
-
Valores
+
Valores
-
Um ou mais dos seguintes, por qualquer ordem:
+
Um ou mais dos seguintes, por qualquer ordem:
-
<anexo>
-
Veja {{cssxref ( "background-attachment")}}
-
<box>
-
Veja {{cssxref ( "background-clip")}}
-
<cor-de-fundo>
-
Veja {{cssxref ( "background-color")}}
-
<imagem-de-fundo>
-
Veja {{Cssxref ( "background-image")}}
-
<posição>
-
Veja {{cssxref ( "background-position")}}
-
<estilo-de-repetição>
-
Veja {{cssxref ( "background-repeat")}}
-
<tamanho-do-fundo>
-
Veja {{cssxref ( "background-size")}}. Esta propriedade deve ser especificado após <posição> , separados com o caractere '/'.
+
<anexo>
+
Veja {{cssxref ( "background-attachment")}}
+
<box>
+
Veja {{cssxref ( "background-clip")}}
+
<cor-de-fundo>
+
Veja {{cssxref ( "background-color")}}
+
<imagem-de-fundo>
+
Veja {{Cssxref ( "background-image")}}
+
<posição>
+
Veja {{cssxref ( "background-position")}}
+
<estilo-de-repetição>
+
Veja {{cssxref ( "background-repeat")}}
+
<tamanho-do-fundo>
+
Veja {{cssxref ( "background-size")}}. Esta propriedade deve ser especificado após <posição> , separados com o caractere '/'.
A propriedade taquigráfica foi estendido para suportar múltiplas origens e a nova {{cssxref("background-size")}}, {{cssxref("background-origem")}} e {{cssxref("background-clip")}} propriedades.
A propriedade taquigráfica foi estendido para suportar múltiplas origens e a nova {{cssxref("background-size")}}, {{cssxref("background-origem")}} e {{cssxref("background-clip")}} propriedades.
A cor final é o resultado da divisão da cor de baixo pelo inverso da cor de cima.
Um fundo preto não altera as cores. Uma cor de cima inversa a cor de baixo, resulta em uma cor bastante luminosa.
- Este blend-mode é similar a screen, mas a cor de cima precisa ser apenas tão clara quanto o inverso da cor de fundo para deixar o resultado muito luminoso.
-
+ Este blend-mode é similar a screen, mas a cor de cima precisa ser apenas tão clara quanto o inverso da cor de fundo para deixar o resultado muito luminoso.
O código-fonte para este exemplo interativo está disponível em um repostitório no Github. Caso queira contribuir com os projetos de exemplos interativos, por favor clone https://github.com/mdn/interactive-examples e envie-nos um pull request.
The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties {{cssxref("border-color")}} or {{cssxref("border-left")}}.
+
The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties {{cssxref("border-color")}} or {{cssxref("border-left")}}.
O box-shadow é uma propriedade do CSS, é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, os separando com virgulas. Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco e propagação do raio e cor.
+
O box-shadow é uma propriedade do CSS, é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, os separando com virgulas.
-
/* offset-x | offset-y | color */
+
Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco e propagação do raio e cor.
Se não for especificado, a sombra ganha o efeito de como se a caixa fosse aumentada acima do conteúdo).
A presença da palavra-chave inset muda a sombra para dentro da moldura (como se o conteúdo estivesse pressionado dentro da caixa). As sombras de inserção são desenhadas dentro da borda (mesmo as transparentes), acima do plano de fundo, mas abaixo do conteúdo.
Existem dois valores {{cssxref("<length>")}} para configurar o desvio (offset) da sombra:
-
<offset-x> especifica a distância horizontal. Valores negativos colocarão a sombra à esquerda do elemento.
-
<offset-y> especifca a distância vertical. Valores negativos colocam a sombra acima do elemento.
-
Consulte {{cssxref("<length>")}} para as unidades disponíveis.
-
Se ambos os valores forem 0, a sombra será posicionada atrás do elemento (e poderá gerar um efeito de desfocagem caso <blur-radius> e/ou <spread-radius> estiverem configurados).
+
Existem dois valores {{cssxref("<length>")}} para configurar o desvio (offset) da sombra:
+
<offset-x> especifica a distância horizontal. Valores negativos colocarão a sombra à esquerda do elemento.
+
<offset-y> especifca a distância vertical. Valores negativos colocam a sombra acima do elemento.
+
+
Consulte {{cssxref("<length>")}} para as unidades disponíveis.
+
Se ambos os valores forem 0, a sombra será posicionada atrás do elemento (e poderá gerar um efeito de desfocagem caso <blur-radius> e/ou <spread-radius> estiverem configurados).
Este é um terceiro valor para {{cssxref("<length>")}}. Quanto maior for este valor, maior o efeito de desfocagem, desta forma a sombra se tornará maior e mais clara. Valores negativos não são permitidos. Se não for especificado, o valor padrão é 0 (os limites da sombra serão retos). A especificação não inclui um algoritmo exato de como o raio de esmaecimento deve ser calculado, no entanto, descreve o seguinte:
-
-
...para uma sombra com bordas longas e retas, deverá ser criada uma transição de cor do comprimento da distância de desfocagem que é perpendicular e centralizada com as bordas da sombra, e isto deve variar da cor total da sombra do seu ponto central até totalmente transparente no ponto final fora dela.
-
+
Este é um terceiro valor para {{cssxref("<length>")}}. Quanto maior for este valor, maior o efeito de desfocagem, desta forma a sombra se tornará maior e mais clara. Valores negativos não são permitidos. Se não for especificado, o valor padrão é 0 (os limites da sombra serão retos). A especificação não inclui um algoritmo exato de como o raio de esmaecimento deve ser calculado, no entanto, descreve o seguinte:
+
...para uma sombra com bordas longas e retas, deverá ser criada uma transição de cor do comprimento da distância de desfocagem que é perpendicular e centralizada com as bordas da sombra, e isto deve variar da cor total da sombra do seu ponto central até totalmente transparente no ponto final fora dela.
Este é um quarto valor de {{cssxref("<length>")}}. Valores positivos farão com que a sombra expanda e cresça maior, valores negativos farão com que a sombra encolha. Se não for especificado, o valor padrão é 0 (a sombra terá o mesmo tamanho do elemento)
A função calc()CSS permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualquer lugar , como {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, e {{cssxref("<integer>")}} é permitido.
calc() torna mais fácil posicionar um objeto com uma margem definida. Nesse exemplo, o CSS cria um banner que se estende pela janela, com um espaço de 40px entre os dois lados do banner e das bordas da janela:
<p class="vermelho">Este parágrafo tem o texto vermelho.</p>
+
<p class="vermelho">Este parágrafo tem o texto vermelho.</p>
<p class="vermelho amarelo-bg">Este parágrafo possui texto em vermelho e fundo amarelo.</p>
<p class="vermelho elegante">Este parágrafo possui texto em vermelho e uma propriedade de estilo "elegante".</p>
<p>Este é um parágrafo comum.</p>
diff --git a/files/pt-br/web/css/clear/index.html b/files/pt-br/web/css/clear/index.html
index a0ed165dccc8f9..e560d98bf752d5 100644
--- a/files/pt-br/web/css/clear/index.html
+++ b/files/pt-br/web/css/clear/index.html
@@ -14,8 +14,6 @@
O fonte desse exemplo está armazenado em um repositório no Github. Se você gostaria de contribuir com esse exemplo, por favor clone o projeto https://github.com/mdn/interactive-examples e nos envie um pull request.
-
Quando essa propriedade é aplicada em elementos não flutuantes, ele move a borda (border edge) desse elemento para a borda da margem (margin edge) de todos os elementos flutuantes relevantes. Ocorre um colapso das margens verticais dos elementos não flutuantes.
As margens verticais entre dois elementos flutuantes não irão sofrer esse colapso. Quando aplicada a elementos flutuantes, a borda de margem (margin edge) do elemento inferior é movida abaixo da borda de margem (border edge) de todos os elementos flutuantes relevantes. Isso afeta a posição dos elementos flutuantes posteriores, sendo que os elementos flutuantes posteriores não podem ser posicionados acima dos anteriores.
A propriedade color do CSS definine o valor da cor de um elemento com seu conteúdo em texto e seus decorações (estilos). Também define o valorer da {{cssxref("currentcolor")}}, no qual pode ser usado um valor indireto de outra propriedade, e tem como padrão as cores de outras propriedades (enquanto não definida), tal como a propriedade {{cssxref("border-color")}}.
+
A propriedade color do CSS definine o valor da cor de um elemento com seu conteúdo em texto e seus decorações (estilos). Também define o valorer da {{cssxref("currentcolor")}}, no qual pode ser usado um valor indireto de outra propriedade, e tem como padrão as cores de outras propriedades (enquanto não definida), tal como a propriedade {{cssxref("border-color")}}.
A fonte deste exemplo interativo é armazenada em um repositório GitHub. Se você gostaria de contribuir para o projeto de exemplos interativos, acesse https://github.com/mdn/interactive-examples e nos envie uma sugestão.
-
Para uma visão geral de como usar a propriedade color e semelhantes no HTML, veja Cor - CSS, como começar.
rgb(255 0 0)
/* optional alpha value */
-rgb(255,0,0,0.4) /* 40% opaque red */
-rgb(255,0,0,40%) /* 40% opaque red with percentage value for alpha */
-rgb(255 0 0 / 0.4) /* 40% opaque red */
-rgb(255 0 0 / 40%) /* 40% opaque red with percentage value for alpha */
+rgb(255,0,0,0.4) /* 40% opaque red */
+rgb(255,0,0,40%) /* 40% opaque red with percentage value for alpha */
+rgb(255 0 0 / 0.4) /* 40% opaque red */
+rgb(255 0 0 / 40%) /* 40% opaque red with percentage value for alpha */
#f030 /* 0% opaque red */
-#F03F /* full opaque red */
-#ff003300 /* 0% opaque red */
-#FF003388 /* 50% opaque red */
-rgba(255,0,0,0.1) /* 10% opaque red */
-rgba(255,0,0,0.4) /* 40% opaque red */
-rgba(255,0,0,0.7) /* 70% opaque red */
-rgba(255,0,0, 1) /* full opaque red */
+
#f030 /* 0% opaque red */
+#F03F /* full opaque red */
+#ff003300 /* 0% opaque red */
+#FF003388 /* 50% opaque red */
+rgba(255,0,0,0.1) /* 10% opaque red */
+rgba(255,0,0,0.4) /* 40% opaque red */
+rgba(255,0,0,0.7) /* 70% opaque red */
+rgba(255,0,0, 1) /* full opaque red */
/* whitespace syntax */
-rgba(255 0 0 / 0.4) /* 40% opaque red */
+rgba(255 0 0 / 0.4) /* 40% opaque red */
/* percentage value for alpha */
-rgba(255 0 0 / 40%) /* 40% opaque red */
+rgba(255 0 0 / 40%) /* 40% opaque red */
Colors can be defined in the hue-saturation-lightness-alpha model (HSLa) using the hsla() functional notation. HSLa extends the HSL color model to include the alpha channel, allowing specification of the opacity of a color. a means opacity: 0=transparent; 1=opaque;
-
hsla(240,100%,50%,0.05) /* 5% opaque blue */
-hsla(240,100%,50%, 0.4) /* 40% opaque blue */
-hsla(240,100%,50%, 0.7) /* 70% opaque blue */
-hsla(240,100%,50%, 1) /* full opaque blue */
+
hsla(240,100%,50%,0.05) /* 5% opaque blue */
+hsla(240,100%,50%, 0.4) /* 40% opaque blue */
+hsla(240,100%,50%, 0.7) /* 70% opaque blue */
+hsla(240,100%,50%, 1) /* full opaque blue */
/* whitespace syntax */
-hsla(240 100% 50% / 0.05) /* 5% opaque blue */
+hsla(240 100% 50% / 0.05) /* 5% opaque blue */
/* percentage value for alpha */
-hsla(240 100% 50% / 5%) /* 5% opaque blue */
+hsla(240 100% 50% / 5%) /* 5% opaque blue */
/* angle values for hue component; also accepts rad, grad, turn */
-hsla(240deg 100% 50% / 5%) /* 5% opaque blue */
-hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
+hsla(240deg 100% 50% / 5%) /* 5% opaque blue */
+hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
Uma URL que designa um recurso externo (como uma imagem). Se o recurso não puder ser exibido, ele será ignorado ou um placeholder será exibido no seu lugar.
{{cssxref("<counter>")}}
-
O valor de um contador CSS, geralmente um número. Ele pode ser exibido usando a função counter() ou counters().
-
+
O valor de um contador CSS, geralmente um número. Ele pode ser exibido usando a função counter() ou counters().
A função counter() tem duas formas: 'counter(nome)' ou 'counter(nome, estilo)'. O texto gerado será o valor do contador mais próximo do nome fornecido no pseudoelemento. Ele será formatado com o estilo especificado (o padrão é decimal).
A função counters() também tem duas formas: 'counters(nome, string)' ou 'counters(nome, separador, estilo)'. O texto gerado será o valor de todos os contadores com o mesmo nome no escopo do pseudoelemento, do mais afastado ao mais próximo, separados pelo separador especificado. Os contadores serão exibidos no estilo indicado (o padrão é decimal).
Animações CSS tornam possível fazer coisas incríveis com os elementos que compoem seus documentos e aplicativos. No entanto, existem coisas que você pode querer fazer que não são óbvias, ou jeitos espertos de fazer coisas que você pode não ter pensado de imediato. Esse artigo é uma coleção de dicas e truques que descobrimos que podem tornar seu trabalho mais fácil, incluindo como rodar uma animação parada novamente.
+
Animações CSS tornam possível fazer coisas incríveis com os elementos que compoem seus documentos e aplicativos. No entanto, existem coisas que você pode querer fazer que não são óbvias, ou jeitos espertos de fazer coisas que você pode não ter pensado de imediato. Esse artigo é uma coleção de dicas e truques que descobrimos que podem tornar seu trabalho mais fácil, incluindo como rodar uma animação parada novamente.
A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real. Você pode tanto aumentar como diminuir a imagem.
+
A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real. Você pode tanto aumentar como diminuir a imagem.
Duplicando uma imagem grande
@@ -13,7 +13,7 @@
Duplicando uma imagem
-
Isto pode ser conseguidousandooseguinteCSS:
+
Isto pode ser conseguido usando o seguinte CSS:
.square {
width: 300px;
@@ -26,11 +26,11 @@
Duplicando uma imagem
}
-
O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas você podeconsiderar a adição deuma versãopré-fixadase vocêestá focando em browsersmuito antigos.
+
O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas você pode considerar a adição de uma versão pré-fixada se você está focando em browsers muito antigos.
Esticando uma imagem
-
Você também pode especificarambosostamanhos,horizontal e verticalda imagem,assim:
+
Você também pode especificar ambos os tamanhos, horizontal e vertical da imagem, assim:
background-size: 300px 150px;
@@ -39,9 +39,9 @@
Esticando uma imagem
-
Aumentando escala de umaimagem
+
Aumentando escala de uma imagem
-
Na outra extremidadedo espectro, é possíveldimensionar-seuma imagemnofundo.Aqui nós aumentamos a escala de umfaviconde pixel32x32 para 300x300pixels:
+
Na outra extremidade do espectro, é possível dimensionar-se uma imagem no fundo. Aqui nós aumentamos a escala de um favicon de pixel 32x32 para 300x300 pixels:
@@ -56,15 +56,15 @@
-
Como você pode ver, oCSSé, na verdade, essencialmenteidêntico, salvoo nome doarquivo de imagem.
+
Como você pode ver, o CSS é, na verdade, essencialmente idêntico, salvo o nome do arquivo de imagem.
Valores especiais: "contain" e "cover"
-
Da mesma maneira que o {{cssxref("<length>")}}, a propriedadeCSS de {{ cssxref("background-size") }} oferece doisvalores de tamanhoespecial, contain e cover.Vamos dar umaolhada nestes.
+
Da mesma maneira que o {{cssxref("<length>")}}, a propriedade CSS de {{ cssxref("background-size") }} oferece dois valores de tamanho especial, contain e cover. Vamos dar uma olhada nestes.
contain
-
Ovalor contain especificaque, independentementedotamanhoda caixa que contém,a imagem de fundodeveserdimensionadode modo a quecadaladoseja tão grande quantopossível ao mesmo tempoque não excedaocomprimento do ladocorrespondente do recipiente.Tente redimensionara janelausando um navegador quesuportaimagens de fundode escala(como oFirefox 3.6ou posterior) paraver isso em açãono exemplovivoabaixo.
+
O valor contain especifica que, independentemente do tamanho da caixa que contém, a imagem de fundo deve ser dimensionado de modo a que cada lado seja tão grande quanto possível ao mesmo tempo que não exceda o comprimento do lado correspondente do recipiente. Tente redimensionar a janela usando um navegador que suporta imagens de fundo de escala (como o Firefox 3.6 ou posterior) para ver isso em ação no exemplo vivo abaixo.
{{ EmbedLiveSample("contain", "100%", "220") }}
@@ -74,7 +74,7 @@
contain
<p>Tente redimensionar a janela e ver o que acontece.</p>
</div>
-
Ovalor cover especificaquea imagem de fundodeve ser dimensionadode modo que sejatão pequena quantopossível ao mesmo tempoassegurarque ambas as dimensõessão maioresdo queou igualà dimensãocorrespondente do recipiente.
+
O valor cover especifica que a imagem de fundo deve ser dimensionado de modo que seja tão pequena quanto possível ao mesmo tempo assegurar que ambas as dimensões são maiores do que ou igual à dimensão correspondente do recipiente.
Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de {{ cssxref("background-color") }}. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.
+
Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de {{ cssxref("background-color") }}. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.
As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
+
As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
-
+
-
Margin collapsing ocorre em três casos básicos:
+
Margin collapsing ocorre em três casos básicos:
-
Irmãos adjacentes
-
As margens de irmãos adjacentes são colapsadas (execeto quando o último irmão precisar ser limpado devido ao uso de floats em elementos anteriores ). Por exemplo:
-
+
Irmãos adjacentes
+
As margens de irmãos adjacentes são colapsadas (execeto quando o último irmão precisar ser limpado devido ao uso de floats em elementos anteriores ). Por exemplo:
<p>A margem inferior deste parágrafo é colapsada...</p>
<p>... com margem superior deste parágrafo.</p>
-
Pai e primeiro/último filho
-
Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.
-
+
Pai e primeiro/último filho
+
Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.
+
Blocos vázios
+
Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.
-
-
Blocos vázios
-
Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.
-
-
+
Algumas coisas podem ser observadas:
-
Algumas coisas podem ser observadas:
-
-
+
Margin collapsing mais complexo (de mais de duas margens) ocorrem quando esses casos são combinados.
Essas regras se aplicam até mesmo a margens que são zero, portanto a margem e um primeiro/último filho termina fora de seu pai(de acordo com as regras acima) sendo a margem do pai zero ou não.
Quando margens negativas são envolvidas, o tamanho da margem colapsada é a soma da maior margem positiva e da menor margem negativa(a mais negativa).
Se ambos são negativos, o valor negativo maior será usado. Essa definição se aplica a elementos adjacentes e a elementos aninhados.
O uso de cores é uma forma fundamental da expressão humana. Crianças experimentam com cores antes mesmo de ter a destreza manual para desenhar. Talvez por isso, a cor é uma das primeiras coisas com a qual as pessoas querem experimentar quando estão aprendendo a desenvolver websites. ComCSS, há muitas maneiras de acrescentar cor nos seus elementos HTML para criar exatamente o visual que você quiser. Esse artigo é um preparativo introduzindo cada uma das formas que a cor CSS pode ser usada no HTML.
+
O uso de cores é uma forma fundamental da expressão humana. Crianças experimentam com cores antes mesmo de ter a destreza manual para desenhar. Talvez por isso, a cor é uma das primeiras coisas com a qual as pessoas querem experimentar quando estão aprendendo a desenvolver websites. Com CSS, há muitas maneiras de acrescentar cor nos seus elementos HTML para criar exatamente o visual que você quiser. Esse artigo é um preparativo introduzindo cada uma das formas que a cor CSS pode ser usada no HTML.
Felizmente, adicionar cor no seu HTML é muito fácil, e você pode colorir praticamente qualquer coisa.
@@ -138,11 +138,8 @@
Notação funcional HSL
Designers e artistas frequentemente preferem trabalhar usando o método de cor {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity, tradução: "Matiz/Saturação/Luminosidade"). Na web, cores HSL são representadas usando notação funcional HSL. O uso da função CSS hsl() é muito similar ao da função rgb().
-
-
-Figura 1. Um cilindro de cor HSL. Hue (matiz) define a cor em si, com base na sua posição ao longo de um círculo que representa as cores do espectro visível. Saturation (saturação) é uma porcentagem que representa sua posição no caminho entre ser um tom de cinza ou ter a maior quantidade possível da matiz dada. Conforme o valor de Luminance ou Lightness (luminosidade) aumenta, a cor transiciona do mais escura possível até o mais clara possível (do preto ao branco). Imagem cortesia do usuário SharkD na Wikipedia, distribuída sob a licença CC BY-SA 3.0.
-
-
+
+Um cilindro de cor HSL. Hue (matiz) define a cor em si, com base na sua posição ao longo de um círculo que representa as cores do espectro visível. Saturation (saturação) é uma porcentagem que representa sua posição no caminho entre ser um tom de cinza ou ter a maior quantidade possível da matiz dada. Conforme o valor de Luminance ou Lightness (luminosidade) aumenta, a cor transiciona do mais escura possível até o mais clara possível (do preto ao branco). Imagem cortesia do usuário SharkD na Wikipedia, distribuída sob a licença CC BY-SA 3.0.
O valor do componente hue/matriz (H) de uma cor HSL é um ângulo partindo do vermelho e passando em círculo pelo amarelo, verde, ciano, azul e magenta (terminando de volta no vermelho em 360°) que identifica qual é a cor base. O valor pode ser especificado em qualquer unidade de {{cssxref("<angle>")}} (ângulo) suportada por CSS, incluindo graus (deg, de "degrees"), radianos (rad, de "radians"), grados (grad, de "gradians") ou revoluções (turn, de "turns"). Mas isso não controla quão vívida ou apagada, ou quão clara ou escura a cor é.
@@ -292,7 +289,7 @@
CSS
outline: 2px solid darkred;
}
-
A classe .boxLeft—que, apropriadamente, é usada para estilizar a caixa na esquerda—flutua a caixa para a esquerda, e então configura as cores:
+
A classe .boxLeft—que, apropriadamente, é usada para estilizar a caixa na esquerda—flutua a caixa para a esquerda, e então configura as cores:
A cor de fundo da caixa é definida mudando o valor da propriedade CSS {{cssxref("background-color")}} para rgb(245, 130, 130).
Contadores CSS são em essência, as variáveis mantidas pelo CSS cujos valores podem ser incrementado por regras do CSS para controlar quantas vezes eles são usados.Isso permite ajustar a aparência do conteúdo com base na sua colocação no documento. contadores CSS são uma implementação de Contadores automáticos e numeração em CSS 2.1.
+
Contadores CSS são em essência, as variáveis mantidas pelo CSS cujos valores podem ser incrementado por regras do CSS para controlar quantas vezes eles são usados.Isso permite ajustar a aparência do conteúdo com base na sua colocação no documento. contadores CSS são uma implementação de Contadores automáticos e numeração em CSS 2.1.
O valor de um contador é manipulado através da utilização de {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} pode ser exibido em uma página usando o counter() ou counters() função da propriedade de conteúdo.
@@ -14,7 +14,7 @@
Usando contadores
Para usar um contador, tem quer definir um valor para ele (ele é 0 default). Para adicionar o valor do contador em um elemento, use a função counter(). O CSS abaixo adiciona "Section [o valor do contador]:" no início de cada elemento h3.
-
body {
+
body {
counter-reset: section; /* Set the section counter to 0 */
}
h3::before {
@@ -25,7 +25,7 @@
Um contador CSS pode ser especialmente útil para fazer listas descritas porque uma nova instância de um contador CSS é criado automaticamente em elementos filho . Usando a função counters(), uma corda pode ser inserido entre diferentes níveis de contadores aninhados. Por exemplo, esta CSS :
-
ol {
+
ol {
counter-reset: section; /* Creates a new instance of the
section counter with each ol
element */
@@ -55,7 +55,7 @@
To prevent the image growing too large, add a {{cssxref("max-width")}} to the image. As that side of the media object is using the initial values of flexbox it can shrink but not grow, and uses a flex-basis of auto. Any {{cssxref("width")}} or max-width applied to the image will become the flex-basis.
-
.image img {
+
.image img {
max-width: 100px;
}
You could also allow both sides to grow and shrink in proportion. If you set both sides to flex: 1, they will grow and shrink from a {{cssxref("flex-basis")}} of 0, so you will end up with two equal-sized columns. You could either take the content as a guide and set both to flex: auto, in which case they would grow and shrink from the size of the content or any size applied directly to the flex items such as a width on the image.
You could also give each side different {{cssxref("flex-grow")}} factors, for example setting the side with the image to flex: 1 and the content side to flex: 3. This will mean they use a flex-basis of 0 but distribute that space at different rates according to the flex-grow factor you have assigned. The flex properties we use to do this are described in detail in the guide Controlling ratios of flex items along the main axis.
Neste próximo exemplo, eu crio o mesmo layout usando Grid. Desta vez, temos três faixas de coluna 1fr. Não precisamos definir nada nos itens em si; eles se estabelecerão em cada célula da grade criada. Como você pode ver, eles ficam em uma grade rígida, alinhando-se em linhas e colunas. Com cinco itens, temos uma lacuna no final da segunda linha.
Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.
- Sintaxe:nome-da-tag
+ Sintaxe:nome-da-tag Exemplo:input corresponderá a qualquer elemento {{HTMLElement('input')}}.
Este seletor básico escolhe elementos baseados no valor de seu atributo classe. Sintaxe:.nome-da-classe
diff --git a/files/pt-br/web/css/css_transforms/using_css_transforms/index.html b/files/pt-br/web/css/css_transforms/using_css_transforms/index.html
index 314814b846d4f4..74c0c8dcba29df 100644
--- a/files/pt-br/web/css/css_transforms/using_css_transforms/index.html
+++ b/files/pt-br/web/css/css_transforms/using_css_transforms/index.html
@@ -53,163 +53,452 @@
Configurando uma perspectiva
Quanto será a sensação de encolhimento é definida pela propriedade {{ cssxref("perspective") }}. Quanto menor o valor, mais profundidade terá o objeto.
-
-
-
-
-
perspective:0;
-
perspective:150px;
-
perspective:300px;
-
perspective:600px;
-
-
-
-
-
-
-
-
1
-
-
2
-
-
3
-
-
4
-
-
5
-
-
6
-
-
-
-
-
-
-
-
-
1
-
-
2
-
-
3
-
-
4
-
-
5
-
-
6
-
-
-
-
-
-
-
-
-
1
-
-
2
-
-
3
-
-
4
-
-
5
-
-
6
-
-
-
-
-
-
-
-
-
1
-
-
2
-
-
3
-
-
4
-
-
5
-
-
6
-
-
-
-
-
-
-
-
-
O segundo elemento a ser configurado é a posição de visão, que será definida pela propriedade {{ cssxref("perspective-origin") }}. Por padrão a perspectiva é centralizada, o que nem sempre é o ideal.
-
-
-
-
-
-
perspective-origin:150px 150px;
-
perspective-origin:50% 50%;
-
perspective-origin:-50px -50px;
-
-
-
-
-
-
1
-
-
2
-
-
3
-
-
4
-
-
5
-
-
6
-
-
-
-
-
-
-
1
-
-
2
-
-
3
-
-
4
-
-
5
-
-
6
-
-
-
-
-
-
-
1
+
HTML
+
+
O HTML abaixo cria quatro cópias da mesma caixa, com a perspectiva definida em valores diferentes.
O CSS estabelece classes que podem ser usadas para definir a perspectiva a diferentes distâncias. Ele também inclui classes para a caixa do recipiente e o próprio cubo, bem como cada uma de suas faces.
O segundo elemento a ser configurado é a posição do espectador, com a propriedade {{cssxref("perspective-origin")}}}. Por padrão, a perspectiva está centrada no telespectador, o que nem sempre é adequado.
+
+
Mudando a origem da perspectiva
+
+
Este exemplo mostra cubos com valores populares do perspective-origin.
CSS transitions provê uma forma de controlar a velocidade de uma animação quando há mudanças de propriedades CSS. Ao invés de uma propriedade entrar em vigor imediatamente, você pode fazer com que as mudanças em uma propriedade ocorram durante um periodo de tempo. Por exemplo, se você mudar a cor de um elemento de branco para preto, a alteração será instantanea. Utilizando transições CSS, as alterações acontecem em uma intervalo de tempo que seguem uma curva de aceleração, e todas podem ser personalizadas
+
CSS transitions provê uma forma de controlar a velocidade de uma animação quando há mudanças de propriedades CSS. Ao invés de uma propriedade entrar em vigor imediatamente, você pode fazer com que as mudanças em uma propriedade ocorram durante um periodo de tempo. Por exemplo, se você mudar a cor de um elemento de branco para preto, a alteração será instantanea. Utilizando transições CSS, as alterações acontecem em uma intervalo de tempo que seguem uma curva de aceleração, e todas podem ser personalizadas
Animações que envolvem transições entre dois estados geralmente são chamadas de transições implicitas, como os estados entre o começo e o fim são implicitamente definidos pelo browser
O combinador descendente - normalmente representado por um caractere de espaço simples () - combina dois seletores para que os elementos correspondidos pelo segundo seletor sejam selecionados se eles tiverem um elemento ancestral (pai, pai ou mãe, pai ou mãe, etc.) correspondente ao primeiro seletor.Os seletores que utilizam um combinador descendente são chamados de seletores descendentes.
+
O combinador descendente - normalmente representado por um caractere de espaço simples () - combina dois seletores para que os elementos correspondidos pelo segundo seletor sejam selecionados se eles tiverem um elemento ancestral (pai, pai ou mãe, pai ou mãe, etc.) correspondente ao primeiro seletor. Os seletores que utilizam um combinador descendente são chamados de seletores descendentes.
-
/* Listar itens descendentes da lista "my-things" */
+
/* Listar itens descendentes da lista "my-things" */
ul.my-things li {
margin: 2em;
}
-
O combinador descendente é tecnicamente um ou mais caracteres de espaço em branco do {{Glossary ("CSS")}} -o caractere de espaço e/ou um dos quatro caracteres de controle: retorno de carro (carriage return), Quebra de página ( form feed), nova linha e caracteres de tabulação — entre dois seletores na ausência de outro combinador. Além disso, os caracteres de espaço em branco dos quais o combinador é composto podem conter qualquer número de comentários CSS.
+
O combinador descendente é tecnicamente um ou mais caracteres de espaço em branco do {{Glossary ("CSS")}} - o caractere de espaço e/ou um dos quatro caracteres de controle: retorno de carro (carriage return), Quebra de página ( form feed), nova linha e caracteres de tabulação — entre dois seletores na ausência de outro combinador. Além disso, os caracteres de espaço em branco dos quais o combinador é composto podem conter qualquer número de comentários CSS.
-
Sintaxe
+
Sintaxe
selector1selector2 {
- /* declarações de propriedade */
+ /* declarações de propriedade */
}
O elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo circundante, como se fosse uma única caixa embutida (se comportando como um elemento substituído).
-
É equivalente a inline flow-root.
+
É equivalente a inline flow-root.
inline-table
O inline-table O valor não possui um mapeamento direto em HTML. Ele se comporta como um HTML{{HTMLElement("table")}} elemento, mas como uma caixa embutida, em vez de uma caixa no nível do bloco. Dentro da caixa da tabela há um contexto em nível de bloco.
diff --git a/files/pt-br/web/css/display-outside/index.html b/files/pt-br/web/css/display-outside/index.html
index e3ca5784b49b82..fa02173785f863 100644
--- a/files/pt-br/web/css/display-outside/index.html
+++ b/files/pt-br/web/css/display-outside/index.html
@@ -19,10 +19,8 @@
Valor
inline
O elemento gera uma ou mais caixas de elementos embutidos que não geram quebras de linha antes ou depois de si mesmas. No fluxo normal, o próximo elemento estará na mesma linha se houver espaço
run-in {{Experimental_Inline}}
-
O elemento gera uma caixa de introdução. Se o irmão adjacente do elemento definido comodisplay: run-in box é uma caixa de bloco, o run-in box se torna a primeira caixa embutida da caixa de bloco a seguir.
-
Os elementos de entrada funcionam como linhas ou blocos, dependendo dos elementos circundantes. Ou seja: Se a caixa de introdução contém uma caixa de bloco, o mesmo que bloco. Se uma caixa de bloco segue a caixa de introdução, a caixa de introdução torna-se a primeira caixa embutida da caixa de bloco. Se uma caixa embutida se seguir, a caixa de introdução se tornará uma caixa de bloco.
-
-
+
O elemento gera uma caixa de introdução. Se o irmão adjacente do elemento definido comodisplay: run-in box é uma caixa de bloco, o run-in box se torna a primeira caixa embutida da caixa de bloco a seguir.
+
Os elementos de entrada funcionam como linhas ou blocos, dependendo dos elementos circundantes. Ou seja: Se a caixa de introdução contém uma caixa de bloco, o mesmo que bloco. Se uma caixa de bloco segue a caixa de introdução, a caixa de introdução torna-se a primeira caixa embutida da caixa de bloco. Se uma caixa embutida se seguir, a caixa de introdução se tornará uma caixa de bloco.
A propriedade CSS display especifica o tipo de caixa de renderização usada por um elemento. No HTML, os valores padrões da propriedade display são feitas a partir do comportamento descrito nas especificações HTML ou da folha de estilo padrão do navegador/usuário. O valor padrão em XML é inline.
-
Além dos muitos tipos diferentes de exibição de caixa, o valor none permite desativar a exibição de um elemento; quando você usa none, todos os elementos descendentes também tem a sua exibição desativada. O documento é renderizado como se o elemento não existisse na árvore do documento.
+
Além dos muitos tipos diferentes de exibição de caixa, o valor none permite desativar a exibição de um elemento; quando você usa none, todos os elementos descendentes também tem a sua exibição desativada. O documento é renderizado como se o elemento não existisse na árvore do documento.
{{cssinfo}}
@@ -50,9 +50,9 @@
Valores
display-value
-
-
É a palavra-chave para definir tipo de renderização que será usada no elemento. Os valores possiveis e seus significados são:
-
+
É a palavra-chave para definir tipo de renderização que será usada no elemento. Os valores possiveis e seus significados são:
Esse exemplo usa uma {{HTMLElement("div")}} escondida como background. O elemento de background tem um gradiente, mas tambem um texto que é usado como parte do background.
-
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
<p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>
@@ -46,7 +46,7 @@
Um exemplo de alguma maneira real
+</div>
A {{HTMLElement("div")}} com ID "myBackground1" é usada como background, mantendo o paragrafo "This box uses the element with the #myBackground1 ID as its background!".
@@ -56,7 +56,7 @@
Um exemplo ainda mais bizarro
Esse exemplo usa um elemento {{HTMLElement("button")}} se repetindo como background. Isso mostra que você pode usar qualquer elemento como background, mas não mostra necessariamente boas praticas de design.
A função CSSenv() pode ser usada para inserir o valor de uma variável de ambiente definida pelo agente do usuário em seu CSS, de uma maneira semelhante à função {{cssxref("var")}} e propriedades personalizadas. A diferença é que, além de serem definidas pelo agente do usuário em vez de serem definidas pelo usuário, as variáveis de ambiente têm escopo global para um documento, enquanto as propriedades personalizadas têm um escopo para o(s) elemento(s) no(s) qual(is) é/são declarado(s).
/* Usando os quatro valores de inserção safe area sem valores de fallback */
+
/* Usando os quatro valores de inserção safe area sem valores de fallback */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
@@ -63,7 +63,7 @@
Exemplos
O exemplo abaixo faz uso do segundo parâmetro opcional de env(), que permite fornecer um valor de fallback caso a variável de ambiente não esteja disponível.
-
<p>
+
<p>
Se a função <code>env()</code> é suportada em seu navegador,
o texto deste parágrafo deverá estar na borda <i>top</i>, <i>right</i> e <i>bottom</i>,
ter 50px de preenchimento entre a borda e o texto. O CSS é equivalente
@@ -73,7 +73,7 @@
padding: env(safe-area-inset-bottom, 50px); /* zero para todos agentes do usuário que são retangulares*/
+
padding: env(safe-area-inset-bottom, 50px); /* zero para todos agentes do usuário que são retangulares*/
padding: env(Safe-area-inset-bottom, 50px); /* 50px porque as propriedades do agente do usuário diferenciam maiúsculas de minúsculas */
padding: env(x, 50px 20px); /* como se estivesse preenchendo: '50px 20px' que foram definidos, porque x não é uma variável de ambiente válida */
padding: env(x, 50px, 20px); /* ignorado '50px, 20px' porque não é um valor de preenchimento válido e x não é uma variável de ambiente válida */
diff --git a/files/pt-br/web/css/filter-function/grayscale/index.html b/files/pt-br/web/css/filter-function/grayscale/index.html
index a4c79d08d3addf..1f585508ac726d 100644
--- a/files/pt-br/web/css/filter-function/grayscale/index.html
+++ b/files/pt-br/web/css/filter-function/grayscale/index.html
@@ -25,7 +25,7 @@
Sintaxe
Parâmetros
-
quantidade
+
quantidade
A quantia da conversão é especificada em {{cssxref ("<number>")}} (número) ou {{cssxref ("<percentage>")}} (porcentagem). Um valor de 100% indica que a cor está compeltamente dentro da escala de cinza. Um valor de 0% não altera as cores da imagem, que permanecerá igual a original. Valores entre 0% e 100% são multiplicadores lineares no efeito cinza, modificando a escala de cores conforme a quantidade determinada. A quantia em número é equivalente a em porcentagem.
elemento {
/* O eixo principal é a direção do bloco com main-start e main-end invertidos.
* Os itens flex estão dispostos em múltiplas linhas */
flex-flow: column-reverse wrap;
diff --git a/files/pt-br/web/css/flex-wrap/index.html b/files/pt-br/web/css/flex-wrap/index.html
index 4190846cdd7b28..68326656f764c4 100644
--- a/files/pt-br/web/css/flex-wrap/index.html
+++ b/files/pt-br/web/css/flex-wrap/index.html
@@ -20,7 +20,7 @@
Os itens flexíveis são agrupados em uma unica linha, o que pode fazer com que o flex container transborde. Ocross-start é equivalente ao início ou antes, dependendo do valor da {{cssxref("flex-direction")}}. Este é o valor padrão.
+
Os itens flexíveis são agrupados em uma unica linha, o que pode fazer com que o flex container transborde. O cross-start é equivalente ao início ou antes, dependendo do valor da {{cssxref("flex-direction")}}. Este é o valor padrão.
wrap
-
Os itens flexíveis são quebrados em multiplas linhas. O cross-start é equivalente a iniciar ou antes dependendo do valor do flex-direction e cross-end é o oposto do especificado cross-start.
+
Os itens flexíveis são quebrados em multiplas linhas. O cross-start é equivalente a iniciar ou antes dependendo do valor do flex-direction e cross-end é o oposto do especificado cross-start.
wrap-reverse
-
Se comporta da mesma maneira que o wrap mas a de linha ocorre na direção contrária, ou seja, para a linha acima.
+
Se comporta da mesma maneira que o wrap mas a de linha ocorre na direção contrária, ou seja, para a linha acima.
Formal definição
@@ -60,7 +60,7 @@
Definindo valores em um fle
HTML
-
<h4>This is an example for flex-wrap:wrap </h4>
+
<h4>This is an example for flex-wrap:wrap </h4>
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
@@ -82,7 +82,7 @@
A propriedade font-family do CSS permite que se faça uma lista de prioridades de familias de fontes e/ou nomes genéricos de famílias a serem especificados para um elemento selecionado. Ao contrário da maioria das demais propriedades CSS, os valores são separados por vírgula para indicar quais são as alternativas. O Browser irá utilizar a primeira fonte da lista que for encontrada no computador, ou poderá fazer o dowload utilizando a informação contida na regra {{cssxref("@font-face")}}.
-
Programadores WEB devem sempre adicionar pelo menos uma família genérica para a lista de font-family, já que não há garantia que aquela fonte específica está instalada no computador, ou possa ser baixada pela regra {{cssxref("@font-face")}}. A família genérica permite o browser selecionar uma fonte aceita pelo computador, quando necessário.
+
Programadores WEB devem sempre adicionar pelo menos uma família genérica para a lista de font-family, já que não há garantia que aquela fonte específica está instalada no computador, ou possa ser baixada pela regra {{cssxref("@font-face")}}. A família genérica permite o browser selecionar uma fonte aceita pelo computador, quando necessário.
É também conveniente usar de antemão a propriedade {{cssxref("font")}} para definir a font-size e outras propriedades relacionadas a fonte todas de uma só vez.
/* Use the default settings */
font-feature-settings: normal;
/* Set values for OpenType feature tags */
@@ -55,7 +55,7 @@
Sintaxe formal
Exemplos
-
/* use small-cap alternate glyphs */
+
/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }
/* convert both upper and lowercase to small caps (affects punctuation also) */
diff --git a/files/pt-br/web/css/font-size/index.html b/files/pt-br/web/css/font-size/index.html
index fb3e268fdf57c0..963d53e9dcf778 100644
--- a/files/pt-br/web/css/font-size/index.html
+++ b/files/pt-br/web/css/font-size/index.html
@@ -5,11 +5,11 @@
---
{{CSSRef}}
-
A propriedade font-size no CSS estabelece o tamanho da fonte. Esta propriedade também é usada para computaro tamanho de em, ex, e outras unidades {{cssxref("<length>")}} relativas.
A código fonte deste exemplo interativo está armazenado em um repositório no GitHub. Se você deseja contribuir com o projeto de exemplos interativos, clone https://github.com/mdn/interactive-examples e envie-nos um pull request.
-
Note: This property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. {{cssxref("font-weight")}}, {{cssxref("font-style")}}).
-
Note: font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade. In some browsers, this is currently only true when the @font-face declaration includes a font-weight range.
+
Note: font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade. In some browsers, this is currently only true when the @font-face declaration includes a font-weight range.
Keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloca os itens preenchendo cada linha de uma vez, adicionando novas linhas se necessário. Se nem row(linha) ou column(coluna) for especificado, row (linha) é assumido.
column (coluna)
É uma keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloque os itens preenchendo colunas, adicionando novas se necessário.
-
-
-
dense (denso)
-
Keyword (palavra-chave) que determina que o algoritmo de arrumação automática use um formato de compactação "denso", que tenta preencher os espaços anteriores do grid caso receba itens menores após. Isto talvez deixe os itens fora de ordem, preenchendo espaços deixados por itens maiores.
-
Se omitido, o algoritmo "esparso" é utilizado, onde o algoritmo de arrumação somente "avança" no grid ao colocar os itens, nunca voltando para preencher os espaços. Isso garante que todos os itens colocados automaticamente apareçam "em ordem", mesmo que deixem espaçs que poderiam ser preenchidos por itens posteriores.
+
Keyword (palavra-chave) que determina que o algoritmo de arrumação automática use um formato de compactação "denso", que tenta preencher os espaços anteriores do grid caso receba itens menores após. Isto talvez deixe os itens fora de ordem, preenchendo espaços deixados por itens maiores.
+
Se omitido, o algoritmo "esparso" é utilizado, onde o algoritmo de arrumação somente "avança" no grid ao colocar os itens, nunca voltando para preencher os espaços. Isso garante que todos os itens colocados automaticamente apareçam "em ordem", mesmo que deixem espaçs que poderiam ser preenchidos por itens posteriores.
A propriedade grid-template-columns do CSS define os nomes das linhas e funções de dimensionamento (track sizing) do {{glossary("grid column", "grid columns")}}.
Is a functional notation that defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. As a maximum, a <flex> value sets the track’s flex factor. It is invalid as a minimum.
auto
-
Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
-
+
Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
Note: auto track sizes (and only auto track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.
Is a functional notation that defines a size range, greater than or equal to min, and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. As a maximum, a <flex> value sets the track’s flex factor. It is invalid as a minimum.
auto
-
Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
-
+
Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
Note: auto track sizes (and only auto track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.
A fonte deste exemplo interativo é armazenada em um repositório GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone https://github.com/mdn/interactive-examples e envie-nos um pull request.
-
-
Nota: Você pode especificar apenas as propriedades explícitas ou implícitas da grade em uma única declaração grid. As subpropriedades que você não especifica são definidas como seu valor inicial, como é normal para abreviações. Além disso, as propriedades da medianiz NÃO são redefinidas por essa abreviação.
+
Nota: Você pode especificar apenas as propriedades explícitas ou implícitas da grade em uma única declaração grid. As subpropriedades que você não especifica são definidas como seu valor inicial, como é normal para abreviações. Além disso, as propriedades da medianiz NÃO são redefinidas por essa abreviação.
Configura um fluxo automático definindo as faixas da coluna explicitamente por meio da propriedade {{cssxref("grid-template-columns")}} (e a propriedade {{cssxref("grid-template-rows")}} para none) e especificando como repetir automaticamente as faixas de linha via {{cssxref("grid-auto-rows")}} (e setando {{cssxref("grid-auto-columns")}} para auto). {{cssxref("grid-auto-flow")}} também é definido para row de acordo com dense, se especificado.
-
Todas as outras subpropriedades grid são redefinidas para seus valores iniciais.
+
Todas as outras subpropriedades grid são redefinidas para seus valores iniciais.
height: auto /* auto keyword */
diff --git a/files/pt-br/web/css/image/index.html b/files/pt-br/web/css/image/index.html
index 05024d0faa0c63..6c10b90fd204dc 100644
--- a/files/pt-br/web/css/image/index.html
+++ b/files/pt-br/web/css/image/index.html
@@ -21,17 +21,15 @@
Tipos de imagens
CSS pode lidar com os seguintes tipos de imagens:
-
Imagens com dimensões intrínsecas (tamanho natural), tipo um JPEG, PNG, ou outro formato rasterizado.
-
Imagens com multiplas dimensões intrínsecas,
-
-
existente em várias versões dentro de um único arquivo, como alguns formatos .ico. (Nesse caso, a dimensões intrínsecas serão a largura da imagem na área e a proporção mais semelhante à caixa contendo.)
-
+
Imagens com dimensões intrínsecas (tamanho natural), tipo um JPEG, PNG, ou outro formato rasterizado.
+
Imagens com multiplas dimensões intrínsecas,
+ existente em várias versões dentro de um único arquivo, como alguns formatos .ico. (Nesse caso, a dimensões intrínsecas serão a largura da imagem na área e a proporção mais semelhante à caixa contendo.)
-
Imagens sem dimensões intrínsecas mas com um aspecto intrínseco entre a largura e altura, como um SVG ou outrovetor.
-
Imagens com nenhuma dimensões intrínsecas, e nenhuma relação de aspecto intrínsecocomo um gradiente CSS.
+
Imagens sem dimensões intrínsecas mas com um aspecto intrínseco entre a largura e altura, como um SVG ou outro vetor.
+
Imagens com nenhuma dimensões intrínsecas, e nenhuma relação de aspecto intrínseco como um gradiente CSS.
-
CCS determina um tamanho concreto do objeto usando (1)suas dimensões intrínsecas; (2) seu tamanho especificado, definido por propriedades CSS como {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("background-size")}}; e (3) é o tamanho padrão,determinado pelo tipo de propriedade em que a imagem é usada:
+
CCS determina um tamanho concreto do objeto usando (1) suas dimensões intrínsecas; (2) seu tamanho especificado, definido por propriedades CSS como {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("background-size")}}; e (3) é o tamanho padrão, determinado pelo tipo de propriedade em que a imagem é usada:
@@ -43,7 +41,7 @@
Tipos de imagens
{{cssxref("background-image")}}
-
O tamanho da área de posicionamento do fundo do elemento.
+
O tamanho da área de posicionamento do fundo do elemento.
{{cssxref("list-style-image")}}
@@ -55,7 +53,7 @@
Tipos de imagens
{{cssxref("cursor")}}
-
O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente
+
O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente
{{cssxref("border-image-source")}}
@@ -74,8 +72,8 @@
Tipos de imagens
?
-
Substituí o conteúdo, como quando combinando {{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::before")}})
-
Um 300px × 150px retângulo
+
Substituí o conteúdo, como quando combinando {{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::before")}})
+
Um 300px × 150px retângulo
@@ -84,13 +82,13 @@
Tipos de imagens
Se o tamanho especificado define tanto a largura quanto a altura, esses valores serão usado no tamanho concreto do objeto.
-
Se o tamanho especificado define apenas a largura ou a altura, o valor que falta é determind se o valor espeficiado ado usando a relação intrínseca, se existir algum, as dimensões intrínsecas se o valoer espeficicado combinar, ou o tamanho do objeto padrão para esse valor ausente.
-
Se o tamanho especificado define nem largura ou altura, o tamanho concreto é calculado de modo que corresponda à proporção intrínseca da imagem mas sem exceder o tamanho padrão do objeto em qualquer dimensão. Se a imagem não tiver relação de aspecto intrínseco, o relação de aspecto intrínseco do objeto é aplicado para ser usado; se esse objeto for vazio, a largura ou altura que faltam são retirados do tamanho de objeto padrão.
+
Se o tamanho especificado define apenas a largura ou a altura, o valor que falta é determind se o valor espeficiado ado usando a relação intrínseca, se existir algum, as dimensões intrínsecas se o valoer espeficicado combinar, ou o tamanho do objeto padrão para esse valor ausente.
+
Se o tamanho especificado define nem largura ou altura, o tamanho concreto é calculado de modo que corresponda à proporção intrínseca da imagem mas sem exceder o tamanho padrão do objeto em qualquer dimensão. Se a imagem não tiver relação de aspecto intrínseco, o relação de aspecto intrínseco do objeto é aplicado para ser usado; se esse objeto for vazio, a largura ou altura que faltam são retirados do tamanho de objeto padrão.
-
Nota: Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.
+
Nota: Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.
-
Sintaxe
+
Sintaxe
O tipo de data <image> pode ser representado por qualquer item seguinte:
CSS é uma das principais linguagens da open web e é padronizada em navagadores web de acordo com as especificação da W3C. Desenvolvido em níveis, o CSS1 está atualmente obsoleto, o CSS2.1 é uma recomendação e o CSS3, agora dividido em pequenos módulos, está progredindo para a sua padronização.
-
-
-
Introdução CSS
+
+
Introdução CSS
Se você é novo no desenvolvimento web, certifique-se de ler nosso artigo CSS básico para aprender o que é CSS e como usá-lo.
-
Tutoriais CSS
+
Tutoriais CSS
Nossa área de aprendizado CSS contém diversos tutoriais para levá-lo do nível iniciante ao avançado, cobrindo todos os fundamentos.
-
Referências CSS
+
Referências CSS
Nossa extensa referência CSS para desenvolvedores web experientes descreve todas as propriedades e conceitos do CSS.
-
-
-
Tutoriais
+
Tutoriais
Nossa área de aprendizado CSS contempla múltiplos módulos que ensinam CSS desde o início — não é necessário conhecimento prévio.
@@ -71,14 +68,12 @@
Referências
-
-
-
Livro de receitas
+
Livro de receitas
O livro de receitas de layout CSS tem como objetivo juntar receitas para padrões comuns de layout, coisas que você pode precisar para implementar em seus sites. Além de prover código você pode usá-lo como ponto de partida em seus projetos, essas receitas destacam as diferentes formas de utilização das especificações de layout e as escolhas que você pode fazer como desenvolvedor.
-
Ferramentas para desenvolvimento de CSS
+
Ferramentas para desenvolvimento de CSS
Você pode usar o W3C CSS Validation Service para verificar se o seu CSS é válido. Essa é uma ferramenta indispensável de depuração.
@@ -86,9 +81,6 @@
Ferramentas para
O complemento Web Developer para Firefox também permite a observação e edição de CSS ao vivo dos sites visualizados.
A palavra-chave CSS initial CSS se aplica ao valor inicial (ou padrão) de uma propriedade para um elemento. Este valor inicial é definido pelo navegador. Este valor pode ser aplicado em qualquer propriedade CSS. Isto inclui também o atalho CSS {{cssxref("all")}}, no qual o initial pode ser utilizado para restaurar todas as propriedades CSS para o seu estado inicial.
+
A palavra-chave CSS initial CSS se aplica ao valor inicial (ou padrão) de uma propriedade para um elemento. Este valor inicial é definido pelo navegador. Este valor pode ser aplicado em qualquer propriedade CSS.
+
+
Isto inclui também o atalho CSS {{cssxref("all")}}, no qual o initial pode ser utilizado para restaurar todas as propriedades CSS para o seu estado inicial.
Nota: Em propriedades herdadas, O valor inicial pode ser inesperado. Neste caso, considere o uso dos termos {cssxref("inherit")}}, {{cssxref("unset")}}, ou {{cssxref("revert")}}.
O Valor inicial de uma propriedade CSS é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.
Existem várias alternativas possíveis para esse padrão, dependendo dos navegadores que você deseja oferecer suporte. Um bom exemplo seria flutuar a imagem para a esquerda e adicionar uma correção clara à caixa para garantir que ela contivesse as flutuações.
Depois que os elementos flutuantes se tornam itens da grade, o flutuador não se aplica mais; portanto, você não precisa fazer nada de especial para limpá-lo.
A fonte desse exemplo interativo é armazenada em um repositório do GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone https://github.com/mdn/interactive-examples e nos envia um pull request
-
A propriedade não tem efeito em non-replaced elementos inline, como {{HTMLElement("span")}} ou {{HTMLElement("code")}}.
O código fonte para este exemplo interativo está armazenado em um repositório GitHub. Se você desejar contribuir para o projeto de exemplos interativos, por favor clone https://github.com/mdn/interactive-examples e envie-nos um pull request.
-
Sintaxe
/* Aplica para todos os quatro lados */
diff --git a/files/pt-br/web/css/mask/index.html b/files/pt-br/web/css/mask/index.html
index 901795ad66dea9..62ec6685600092 100644
--- a/files/pt-br/web/css/mask/index.html
+++ b/files/pt-br/web/css/mask/index.html
@@ -17,7 +17,7 @@
Resumo
-
A propriedademáscaranoCSSpermite aos usuários alterarem a visibilidade deum itemparcialmente outotalmenteescondendo oitem.Isso é obtidopor qualquermascaramentooucortes na imagemem pontos específicos.
+
A propriedade máscara no CSS permite aos usuários alterarem a visibilidade de um item parcialmente ou totalmente escondendo o item. Isso é obtido por qualquer mascaramento ou cortes na imagem em pontos específicos.
Estende-se a sua utilização para elementos HTML.
+ Estende sua sintaxe, tornando-a uma simplificação para as novas propriedades da mask-* definidos nessa especificação.
O código dos exemplos interativos está armazenado em um repositório GitHub. Se você gostaria de contribuir com o projeto exemplos interativos, por favor clone https://github.com/mdn/interactive-examples e nos envie um pull request.
-
max-width substitui {{cssxref("width")}}, mas {{cssxref("min-width")}} substitui max-width.
Sintaxe
-
/* <length> valor */
+
/* <length> valor */
max-width: 3.5em;
/* <porcentagem> valor */
@@ -90,14 +88,14 @@
Definindo a largura máxima em pi
Neste exemplo, o "filho" terá 150 pixels de largura ou a largura do "pai", o que for menor:
-
<div id="pai">
+
<div id="pai">
<div id="filho">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
Uma media query consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor. Media queries, adicionadas noCSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.
+
Uma media query consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor. Media queries, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.
Sintaxe
@@ -92,7 +92,7 @@
not
only
-
A palavra chave only previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:
+
A palavra chave only previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
@@ -396,7 +396,6 @@
-moz-device-pixel-ratio
Dar o número de pixels do dispositivo por pixels do CSS.
-
Não use este recurso.
Em vez disso, use o recurso resolution com a unidade dppx.
@@ -411,9 +410,8 @@
-moz-device-pixel-ratio
(min-resolution: 192dpi) /* dppx fallback */
Veja este artigo CSSWG para ccompatibilidade de boas práticas em relação a resolution e dppx.
-
-
Nota: Esta media feature é também implementada pelo Webkit e pelo IE 11 para Windows Phone 8.1como -webkit-device-pixel-ratio. Os prefixos min e max implementados pelo Gecko são nomeados min--moz-device-pixel-ratio e max--moz-device-pixel-ratio; mas os mesmos prefixos implementados pelo Webkit são chamados -webkit-min-device-pixel-ratio e -webkit-max-device-pixel-ratio.
+
Nota: Esta media feature é também implementada pelo Webkit e pelo IE 11 para Windows Phone 8.1como -webkit-device-pixel-ratio. Os prefixos min e max implementados pelo Gecko são nomeados min--moz-device-pixel-ratio e max--moz-device-pixel-ratio; mas os mesmos prefixos implementados pelo Webkit são chamados -webkit-min-device-pixel-ratio e -webkit-max-device-pixel-ratio.
Aplicativos da Microsoft, como Edge e Internet Explorer, suportam uma série de extensões especiais da Microsoft para css. Essas extensões são prefixadas com .-ms-
+
Aplicativos da Microsoft, como Edge e Internet Explorer, suportam uma série de extensões especiais da Microsoft para css. Essas extensões são prefixadas com .-ms-
Propriedades somente para Microsoft (evite usar em sites)
É um {{cssxref("number")}} no intervalo de 0.0 a 1.0, sendo estes incluídos, representando a opacidade do canal, que é o valor de seu canal alfa. Qualquer valor fora do intervalo, apesar de válido, é aproximado ao valor mais próximo dentro do intervalo.
-
+
É um {{cssxref("number")}} no intervalo de 0.0 a 1.0, sendo estes incluídos, representando a opacidade do canal, que é o valor de seu canal alfa. Qualquer valor fora do intervalo, apesar de válido, é aproximado ao valor mais próximo dentro do intervalo.
Contornos não ocupam espaços, eles são desenhados acima do conteúdo.
Contornos podem não ser retangulares. Eles são retangulares no Gecko/Firefox. Mas por exemplo, Opera desenha uma forma não retangular em torno de uma construção como este:
- TEXTTEXTTEXT
A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding areaéoespaçoentreoconteúdodoelementoeaborda.Umvalornegativonãoépermitido.
+
A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.
A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
+
A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
/* Aplica-se à todas as bordas */
padding: 1em;
diff --git a/files/pt-br/web/css/position/index.html b/files/pt-br/web/css/position/index.html
index eab301e63188f6..b3d66fadcef970 100644
--- a/files/pt-br/web/css/position/index.html
+++ b/files/pt-br/web/css/position/index.html
@@ -41,17 +41,17 @@
Valores
static
O elemento é posicionado de acordo com o fluxo normal do documento. O {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, e {{cssxref("z-index")}} propriedades não têm efeito.. Este é o valor padrão.
relative
-
O elemento é posicionado de acordo com o fluxo normal do documento e, em seguida, deslocado em relação a si mesmo com base nos valores de top, right, bottom, e left. O deslocamento não afeta a posição de nenhum outro elemento; assim, o espaço dado para o elemento no layout da página é o mesmo que se a posição fosse static.
-
Este valor cria um novo stacking context (contexto de empilhamento) quando o valor de z-index não for auto. Seu efeito em table-*-group, table-row, table-column, table-cell e os elementos table-caption são indefinidos.
+
O elemento é posicionado de acordo com o fluxo normal do documento e, em seguida, deslocado em relação a si mesmo com base nos valores de top, right, bottom, e left. O deslocamento não afeta a posição de nenhum outro elemento; assim, o espaço dado para o elemento no layout da página é o mesmo que se a posição fosse static.
+
Este valor cria um novo stacking context (contexto de empilhamento) quando o valor de z-index não for auto. Seu efeito em table-*-group, table-row, table-column, table-cell e os elementos table-caption são indefinidos.
absolute
-
O elemento é removido do fluxo normal de documentos e nenhum espaço é criado para o elemento no layout da página. Ele é posicionado em relação ao seu ancestral posicionado mais próximo, se houver; caso contrário, ele é colocado em relação ao inicial containing block. Sua posição final é determinada pelos valores de top, right, bottom, e left.
-
Este valor cria um novo stacking context quando o valor de z-index não é auto. As margens das caixas posicionadas absolutamente não collapse com outras margens.
+
O elemento é removido do fluxo normal de documentos e nenhum espaço é criado para o elemento no layout da página. Ele é posicionado em relação ao seu ancestral posicionado mais próximo, se houver; caso contrário, ele é colocado em relação ao inicial containing block. Sua posição final é determinada pelos valores de top, right, bottom, e left.
+
Este valor cria um novo stacking context quando o valor de z-index não é auto. As margens das caixas posicionadas absolutamente não collapse com outras margens.
fixed
-
O elemento é removido do fluxo normal de documentos e nenhum espaço é criado para o elemento no layout da página. Ele está posicionado em relação ao inicial containing block estabelecido pelo {{glossary("viewport")}}, exceto quando um de seus ancestrais tiver uma propriedade transform, perspective ou filter definida como algo diferente de none (see the CSS Transforms Spec), nesse caso, esse ancestral se comporta como o bloco que o contém. (Observe que há inconsistências no navegador com perspective e filter contribuindo para conter a formação do bloco.) Sua posição final é determinada pelos valores de top, right, bottom e left.
-
Este valor sempre cria um novo stacking context. Em documentos impressos, o elemento é colocado na mesma posição em todas as páginas.
+
O elemento é removido do fluxo normal de documentos e nenhum espaço é criado para o elemento no layout da página. Ele está posicionado em relação ao inicial containing block estabelecido pelo {{glossary("viewport")}}, exceto quando um de seus ancestrais tiver uma propriedade transform, perspective ou filter definida como algo diferente de none (see the CSS Transforms Spec), nesse caso, esse ancestral se comporta como o bloco que o contém. (Observe que há inconsistências no navegador com perspective e filter contribuindo para conter a formação do bloco.) Sua posição final é determinada pelos valores de top, right, bottom e left.
+
Este valor sempre cria um novo stacking context. Em documentos impressos, o elemento é colocado na mesma posição em todas as páginas.
sticky
-
O elemento é posicionado de acordo com o fluxo normal do documento e, em seguida, deslocado em relação ao ancestral de rolagem mais próximo e containing block (ancestral de nível de bloco mais próximo), incluindo elementos relacionados à tabela, com base nos valores de top, right, bottom e left. O deslocamento não afeta a posição de nenhum outro elemento.
-
Este valor sempre cria um novo stacking context. Observe que um elemento sticky "gruda" em seu ancestral mais próximo que possui um "mecanismo de rolagem" (criado quando overflow é hidden, scroll, auto ou overlay), mesmo que esse ancestral não seja o ancestral de rolagem mais próximo. Isso inibe efetivamente qualquer comportamento "pegajoso" (see the Github issue on W3C CSSWG).
+
O elemento é posicionado de acordo com o fluxo normal do documento e, em seguida, deslocado em relação ao ancestral de rolagem mais próximo e containing block (ancestral de nível de bloco mais próximo), incluindo elementos relacionados à tabela, com base nos valores de top, right, bottom e left. O deslocamento não afeta a posição de nenhum outro elemento.
+
Este valor sempre cria um novo stacking context. Observe que um elemento sticky "gruda" em seu ancestral mais próximo que possui um "mecanismo de rolagem" (criado quando overflow é hidden, scroll, auto ou overlay), mesmo que esse ancestral não seja o ancestral de rolagem mais próximo. Isso inibe efetivamente qualquer comportamento "pegajoso" (see the Github issue on W3C CSSWG).
<h1>Absolute positioning</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
@@ -108,7 +108,7 @@
Posicionamento absolut
<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 <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="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
<div class="outer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
@@ -165,7 +165,7 @@
Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For instance...
-
#one { position: sticky; top: 10px; }
+
#one { position: sticky; top: 10px; }
...would position the element with id one relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.
Scrolling elements containing fixed or sticky content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the sticky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add {{cssxref("will-change", "will-change: transform")}} to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.
Uma pseudo-classe CSS é uma palavra-chave adicionada a seletores que especifica um estado especial do elemento selecionado. Por exemplo, {{Cssxref(":hover")}} pode ser usado para alterar a cor de um botão quando o usuário passar o cursor sobre ele.
-
/*Qualquer botão sobre o qual o ponteiro do usuário esteja passando sobre*/
+
/*Qualquer botão sobre o qual o ponteiro do usuário esteja passando sobre*/
button:hover {
color: blue;
}
No caso de igualdade de especificação, a última declaração encontrada no CSS é aplicada ao elemento.
-
Note: O fato de elementos estarem próximos naárvore do documentonão tem efeito sobrea especificação.
+
Note: O fato de elementos estarem próximos na árvore do documento não tem efeito sobre a especificação.
Ordem crescente de especificação
@@ -29,7 +29,7 @@
Ordem crescente de especificaçãoEstilo Inline
-
A exceção!important
+
A exceção !important
Quando a regra !important é utilizada na declaração do estilo substitui qualquer outra declaração feita no CSS, onde quer que esteja na lista de declaração. Contudo, !important não tem nada a ver com especificação.
@@ -59,13 +59,13 @@
A exceção :not
Irá aparecer na tela assim:
-
Esta é a div outer.
+
Esta é a div outer.
-
Este texto está na div inner.
+
Este texto está na div inner.
Especificação Form-based
-
A especificação é baseada na forma de um seletor. No seguinte caso, o seletor contém os atributos noalgoritmo de determinação de especificação, emboraele selecioneum ID.
+
A especificação é baseada na forma de um seletor. No seguinte caso, o seletor contém os atributos no algoritmo de determinação de especificação, embora ele selecione um ID.
A seguir veja as declarações de estilo:
@@ -84,9 +84,9 @@
Especificação Form-based
Vai acabar parecendo algo como:
-
Eu sou um simples texto.
+
Eu sou um simples texto.
-
Porque coincide com omesmo elemento, maso seletor deIDtem uma especificaçãosuperior.
+
Porque coincide com o mesmo elemento, mas o seletor de ID tem uma especificação superior.
A definição de propriedades CSS para um valor específico é a função principal da linguagem CSS. A propriedade e valor são chamados de declaração, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem adequadamente, a fim de exibí-locom o estilo correto.
+
A definição de propriedades CSS para um valor específico é a função principal da linguagem CSS. A propriedade e valor são chamados de declaração, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem adequadamente, a fim de exibí-lo com o estilo correto.
Tanto as propriedades como os valores são case-sensitive no CSS. Os pares se separam por dois pontos, ':' (U+003A COLON), e espaços em branco antes, entre e depois de propriedades e valores, porém os espaços dentro da declaração são ignorados.
A propriedade CSS text-align descreve como conteúdo inline, como texto, é alinhado no elemento pai em bloco. text-align não controla o alinhamento de elementos em bloco, apenas o seu conteúdo inline.
+
A propriedade CSS text-align descreve como conteúdo inline, como texto, é alinhado no elemento pai em bloco. text-align não controla o alinhamento de elementos em bloco, apenas o seu conteúdo inline.
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
@@ -78,7 +78,7 @@
HTML
CSS
-
.example {
+
.example {
text-align: left;
border: solid;
}
@@ -91,7 +91,7 @@
Texto centralizado
HTML
-
<p class="example">
+
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
@@ -100,7 +100,7 @@
HTML
CSS
-
.example {
+
.example {
text-align: center;
border: solid;
}
@@ -113,7 +113,7 @@
Justificado
HTML
-
<p class="example">
+
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
@@ -122,7 +122,7 @@
HTML
CSS
-
.example {
+
.example {
text-align: justify;
border: solid;
}
@@ -135,17 +135,17 @@
Notas
O modo compátivel-padrão de centralizar um bloco em si sem centralizar seu conteúdo inline é setando a {{cssxref("margin")}} left e right para auto, e.g.:
A propriedadeCSS text-decoration-style CSSdefineo estilo daslinhas especificadaspor {{cssxref("text-decoration-line")}}.Omodeloaplica-se atodas as linhas,não há nenhuma forma dedefinirestilos diferentes para cada uma daslinhas utilizando text-decoration-line.
+
A propriedade CSS text-decoration-style CSS define o estilo das linhas especificadas por {{cssxref ("text-decoration-line")}}. O modelo aplica-se a todas as linhas, não há nenhuma forma de definir estilos diferentes para cada uma das linhas utilizando text-decoration-line.
- Sea decoraçãoespecificadatem umsignificado semânticoespecífico,como uma linha de line-througho que significa queum textotenha sido excluído,autoressão encorajados adenotareste significadousando uma tagHTML, como{{ HTMLElement("del") }} ou {{ HTMLElement("s") }}.Comoos navegadores podem ser deficientesem alguns casos,o significado semânticonão vai desaparecerem tal situação.
+ Se a decoração especificada tem um significado semântico específico, como uma linha de line-through o que significa que um texto tenha sido excluído, autores são encorajados a denotar este significado usando uma tag HTML, como {{ HTMLElement("del") }} ou {{ HTMLElement("s") }}. Como os navegadores podem ser deficientes em alguns casos, o significado semântico não vai desaparecer em tal situação.
O corte acontece na borda da caixa; para cortar no limite de caracteres de uma string personalizada, pode-se usar ('').
-
Essa propriedade afeta apenas o conteúdo que está ultrapassando o bloco ou a div no sentido da linha horizontal (não corta o texto na parte de baixo de um bloco ou div, por exemplo). O texto pode ultrapassar ou transbordar quando utilizado ‘white-space:nowrap’ ou quando uma palavra for muito grande.
+
Essa propriedade afeta apenas o conteúdo que está ultrapassando o bloco ou a div no sentido da linha horizontal (não corta o texto na parte de baixo de um bloco ou div, por exemplo). O texto pode ultrapassar ou transbordar quando utilizado ‘white-space:nowrap’ ou quando uma palavra for muito grande.
-
Essa propriedade do CSS não força um estouro para que ele ocorra. Para que isso aconteça, é necessário que o autor utilize algumas propriedades adicionais no elemento, como setar a propriedade overflow para hidden.
+
Essa propriedade do CSS não força um estouro para que ele ocorra. Para que isso aconteça, é necessário que o autor utilize algumas propriedades adicionais no elemento, como setar a propriedade overflow para hidden.
In Dutch (nl), the ij digraph becomes IJ, even with text-transform: capitalize, which only put the first letter of a word in uppercase.
-
In Greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ).
+
In Greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ).
In Greek (el), the lowercase sigma character has two forms: σ and ς. ς is used only when sigma terminates a word. When applying text-transform: lowercase to an uppercase sigma (Σ), the browser needs to choose the right lowercase form based on context.
@@ -54,7 +54,7 @@
Syntax
Is a keyword forcing the first letter of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element's text. A letter is any Unicode character part of the Letter or Number general categories {{experimental_inline}} : it excludes any punctuation marks or symbols at the beginning of the word.
-
Authors should not expect capitalize to follow language-specific title casing conventions (such as skipping articles in English).
+
Authors should not expect capitalize to follow language-specific title casing conventions (such as skipping articles in English).
The capitalize keyword was under-specified in CSS 1 and CSS 2.1. There were differences between browsers in the way the first letter was calculated (Firefox considered - and _ as letters, but not the others. Both Webkit and Gecko incorrectly considered letter-based symbols like ⓐ to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases). By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The capitalize line in the browser compatibility table contains the version the different engines started to support this now precisely defined behavior.
@@ -151,10 +151,10 @@
capitalizecapitalize (Dutch ij digraph)
<p>Initial String
- <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
+ <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>text-transform: capitalize
- <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
+ <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
</p>
A distância de perspectiva usada porperspective() é especificada por um valor {{cssxref("<length>")}}, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.
A função CSSrotate()define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.
+
A função CSSrotate() define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.
-
O eixo de rotação passa por uma origem, definido pela propriedade CSS {{ cssxref("transform-origin") }}.
+
O eixo de rotação passa por uma origem, definido pela propriedade CSS {{ cssxref("transform-origin") }}.
-
Sintaxe
+
Sintaxe
-
A quantidade de rotação criada por rotate()é especificado por um {{cssxref("<angle>")}}. Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de point reflection (reflexão do ponto).
+
A quantidade de rotação criada por rotate() é especificado por um {{cssxref("<angle>")}}. Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de point reflection (reflexão do ponto).
-
rotate(a)
+
rotate(a)
Valores
a
-
É um {{ cssxref("<angle>") }} representando o ângulo da rotação.Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.
+
É um {{ cssxref("<angle>") }} representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.
A quantidade de rotação criada por rotate3d() é especificada por três {{cssxref("<number>")}} e um {{cssxref("<angle>")}}. Os <number> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O <angle> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.
A propriedade CSS transform permite modificar o espaço coordenado do modelo de formatação CSS. Usando-a, elementos podem ser traduzidos, rotacionados, ter seu tamanho ajustado e inclinados de acordo com os valores definidos.
+
A propriedade CSS transform permite modificar o espaço coordenado do modelo de formatação CSS. Usando-a, elementos podem ser traduzidos, rotacionados, ter seu tamanho ajustado e inclinados de acordo com os valores definidos.
Se a propriedade tem um valor diferente de none, um contexto de empilhamento será criado. Neste caso, o objeto atuará como um bloco recipiente para position: fixed para os elementos que estão contidos.
+
Se a propriedade tem um valor diferente de none, um contexto de empilhamento será criado. Neste caso, o objeto atuará como um bloco recipiente para position: fixed para os elementos que estão contidos.
O seletor de tipo CSS corresponde aos elementos pelo nome do nó. Em outras palavras, ele seleciona todos os elementos do tipo fornecido em um documento.
-
/* Todos os elementos <a> */
+
/* Todos os elementos <a> */
a {
color: red;
}
Sintaxe
-
element { style properties }
+
element { style properties }
Exemplos
CSS
-
span {
+
span {
background-color: skyblue;
}
HTML
-
<span>Here's a span with some text.</span>
+
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>
<div>
<div class="one">1:</div>
<div class="two">2: Text <span class="five">5 - more text</span></div>
<input class="three">
@@ -80,7 +80,7 @@
Primeiros Passos com Variáveis CSS
Note a repetição no CSS. O bacgkround-color (cor de fundo) foi definida como brown em diversos lugares. Para algumas declarações CSS, é possível declarar isso no topo e deixar a herança CSS resolver esse problema naturalmente. Para projetos não triviais, isto nem sempre é possível. Ao declarar uma variável na pseudo-classe :root, um desenvolvedor pode interromper algumas das repetições usando variavel.
Perceba a repetição no CSS. A cor do background foi definida como marrom em diversos lugares. Para algumas declarações CSS é possível declarar isto em um elemento superior na cascata e deixar a propriedade ser herdada para resolver o problema. Porém em alguns projetos, isto nem sempre é possível. Ao declarar uma variável na pseudo-classe :root, o autor do CSS pode eliminar algumas repetições utilizando uma variável.
Propriedades customizadas herdam os valores. Isto significa que, se nenhum valor for declarado para uma propriedade customizada em um dado elemento, o valor do elemento pai é usado:
CSS value definition syntax, a formal grammar, is used for defining the set of valid values for a CSS property or function. In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).
+
CSS value definition syntax, a formal grammar, is used for defining the set of valid values for a CSS property or function. In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).
The definition syntax describes which values are allowed and the interactions between them. A component can be a keyword, some characters considered as a literal, or a value of a given CSS data type or of another CSS property.
A função CSSvar() pode ser usada para inserir o valor de uma custom property (propriedade personalizada) substituindo qualquer parte do valor de outra propriedade.
-
var(--header-color, blue);
+
var(--header-color, blue);
A função var() não pode ser usada em nomes de propriedades, seletores ou qualquer outra coisa além de valores de propriedades. (Isso geralmente produz sintaxe inválida, ou então um valor cujo significado não tem conexão com a variável.)
/* Argumento alternativo */
/* No estilo de componente: */
.component .header {
color: var(--header-color, blue);
diff --git a/files/pt-br/web/css/visibility/index.html b/files/pt-br/web/css/visibility/index.html
index a07627cd8ed16a..69d2174e9b6706 100644
--- a/files/pt-br/web/css/visibility/index.html
+++ b/files/pt-br/web/css/visibility/index.html
@@ -5,7 +5,7 @@
---
{{CSSRef}}
-
A propriedade CSS de visibilidade pode mostrar ou ocultar um elemento sem afetar o layout de um documento (ou seja, o espaço é criado para elementos independentemente de serem visíveis ou não).A propriedade também pode ocultar linhas ou colunas em um {{HTMLElement("table")}}.
+
A propriedade CSS de visibilidade pode mostrar ou ocultar um elemento sem afetar o layout de um documento (ou seja, o espaço é criado para elementos independentemente de serem visíveis ou não). A propriedade também pode ocultar linhas ou colunas em um {{HTMLElement("table")}}.
A propriedade é especificada como um dos valores das palavras-chave listados abaixo.
+
A propriedade é especificada como um dos valores das palavras-chave listados abaixo.
Valores
@@ -51,7 +51,7 @@
Formal syntax
Interpolação
-
Visibility values are interpolable between visible and not-visible. One of the start or ending values must therefore be visible or no interpolation can happen. The value is interpolated as a discrete step, where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.
+
Visibility values are interpolable between visible and not-visible. One of the start or ending values must therefore be visible or no interpolation can happen. The value is interpolated as a discrete step, where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.
The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS.
+
The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS.
The visual formatting model transforms each element of the document and generates zero, one, or several boxes that conform to the CSS box model. The layout of each box is defined by:
@@ -107,7 +107,7 @@
Inline-level elements and inline
Note: Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are not inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
Atomic inline boxes cannot be split into several lines in an inline formatting context.
-
The text in the span can be split into several lines as it is an inline box.
+
The text in the span can be split into several lines as it is an inline box.
<style>
span {
@@ -136,8 +136,7 @@
Inline-level elements and inline
which leads to:
-
The text in the span cannot be split into several lines as it is an inline-block box.
-
+
The text in the span cannot be split into several lines as it is an inline-block box.
Anonymous inline boxes
@@ -162,7 +161,7 @@
Run-in boxes
Note: Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered experimental. They should not be used in production.
-
Model-induced boxes
+
Model-induced boxes
Besides the inline and block formatting contexts, CSS specifies several additional content models that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:
@@ -199,9 +198,9 @@
Exemplo
There are two sub-cases of the normal flow: static positioning and relative positioning:
-
In static positioning, triggered by the value static of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.
+
In static positioning, triggered by the value static of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.
[image]
-
In relative positioning, triggered by the value relative of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.
+
In relative positioning, triggered by the value relative of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.
A propriedade CSS white-space é usada para descrever como os espaços em branco dentro dos elementos são manipulados.
+
A propriedade CSS white-space é usada para descrever como os espaços em branco dentro dos elementos são manipulados.
{{cssinfo}}
@@ -40,7 +40,7 @@
Valores
normal
Sequências de espaços em branco são recolhidas. Caracteres de nova linha no código são tratados como outros espaços em branco. As linhas quebram conforme a necessidade para preencher as linhas das caixas (boxes).
nowrap
-
Recolhe os espaços em branco como no normal, mas suprime as quebras de linha (quebra de texto) no texto.
+
Recolhe os espaços em branco como no normal, mas suprime as quebras de linha (quebra de texto) no texto.
pre
Sequências de espaço em branco são preservadas, linhas são quebradas apenas em carateres de nova linha no código e em elementos {{HTMLElement("br")}}.
pre-wrap
@@ -49,7 +49,7 @@
Valores
Sequências de espaços em branco são recolhidas. Linhas são quebradas em caracteres de nova linha, em {{HTMLElement("br")}} e quando necessário para preencher as linhas das caixas (boxes).
-
A tabela a seguir resume o comportamento dos valores para white-space:
+
A tabela a seguir resume o comportamento dos valores para white-space:
@@ -64,13 +64,13 @@
Valores
normal
Recolhido
-
Recolhido
+
Recolhido
Quebra
nowrap
-
Recolhido
-
Recolhido
+
Recolhido
+
Recolhido
Sem quebra
@@ -81,13 +81,13 @@
Valores
pre-wrap
-
Preservado
+
Preservado
Preservado
Quebra
pre-line
-
Preservado
+
Preservado
Recolhido
Quebra
@@ -131,7 +131,7 @@
Compatibilidade de N
[1] Internet Explorer 5.5+ suporta {{Cssxref("word-wrap")}}: break-word;
- O código a seguir permite quebras de linhas dentro de elementos pre:
+ O código a seguir permite quebras de linhas dentro de elementos pre:
A propriedade will-change do CSS fornece um modo dos autores dizerem aos navegadores sobre que tipo de mudanças devem ser esperadas no elemento, então o navegador pode fazer as otimizações apropriadas com antecedência, antes do elemento ser efetivamente modificado. Esses tipos de otimizações podem aumentar a capacidade de resposta de uma página, fazendo o trabalho potencialmente caro antes do tempo antes que eles são realmente necessários.
+
A propriedade will-change do CSS fornece um modo dos autores dizerem aos navegadores sobre que tipo de mudanças devem ser esperadas no elemento, então o navegador pode fazer as otimizações apropriadas com antecedência, antes do elemento ser efetivamente modificado.
+
+
Esses tipos de otimizações podem aumentar a capacidade de resposta de uma página, fazendo o trabalho potencialmente caro antes do tempo antes que eles são realmente necessários.
O uso adequado dessa propriedade pode ser um pouco complicado:
<p>1. <code>word-break: normal</code></p>
-<pclass="normal narrow">This is a long and
+
<p>1. <code>word-break: normal</code></p>
+<p class="normal narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+ 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
-<p>2. <code>word-break: break-all</code></p>
-<pclass="breakAll narrow">This is a long and
+<p>2. <code>word-break: break-all</code></p>
+<p class="breakAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+ 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
-<p>3. <code>word-break: keep-all</code></p>
-<pclass="keepAll narrow">This is a long and
+<p>3. <code>word-break: keep-all</code></p>
+<p class="keepAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+ 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
-<p>4. <code>word-break: break-word</code></p>
-<pclass="breakWord narrow">This is a long and
+<p>4. <code>word-break: break-word</code></p>
+<p class="breakWord narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
- 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+
-
-
A propriedade CSS
