diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/pt-pt/web/css | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/pt-pt/web/css')
81 files changed, 0 insertions, 11642 deletions
diff --git a/files/pt-pt/web/css/@font-face/index.html b/files/pt-pt/web/css/@font-face/index.html deleted file mode 100644 index 8a150d736c..0000000000 --- a/files/pt-pt/web/css/@font-face/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: '@font-face' -slug: Web/CSS/@font-face -translation_of: Web/CSS/@font-face ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Resumo">Resumo</h2> - -<p><code>@font-face </code>permite que autores especifiquem fontes online para exibir texto em suas páginas web. Permitindo autores a proporcionar suas próprias fontes,<code> @font-face </code>elimina a necessidade de depender do limitado número de fontes que os usuários tem instalado em seus computadores.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre>@font-face { - font-family: <a-remote-font-name>; - src: <source> [,<source>]*; - [font-weight: <weight>]; - [font-style: <style>]; -} -</pre> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><a-remote-font-name> </dt> - <dd>Especifica um nome para a fonte que será usado como valor de <code>font-face</code> na propriedade <code>font</code>.</dd> - <dt><source> </dt> - <dd>URL para a localização remota do arquivo da fonte ou o nome da fonte no computador do usuário na forma <code>local("Nome da Font")</code>.</dd> - <dt><weight> </dt> - <dd>Um valor para a espessura da fonte (<a class="internal" href="/en/CSS/font-weight" title="en/CSS/font-weight">font weight</a> (en)).</dd> - <dt><style> </dt> - <dd>Um valor para o estilo da fonte (<a class="internal" href="/en/CSS/font-style" title="en/CSS/font-style">font style</a> (en)).</dd> -</dl> - -<p>Você pode especificar uma fonte local no computador do usuário através do nome, usando a sintaxe <code>local()</code>. Se esta fonte não for encontrada, outras fontes serão tentadas até que uma seja encontrada.</p> - -<h2 id="Formatos_de_fontes_suportados">Formatos de fontes suportados</h2> - -<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <li style="margin-bottom: 0.25em;">O Gecko 1.9.1 (Firefox 3.5) suporta fontes True Type e OpenType.</li> - <li style="margin-bottom: 0.25em;">O Gecko 1.9.2 (Firefox 3.6) adiciona suporte para <a href="/en/About_WOFF" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/About WOFF">WOFF</a> (en).</li> -</ul> - -<h2 id="Exemplos">Exemplos</h2> - -<p>Este simples exemplo especifica uma fonte baixável para uso, aplicando-a ao corpo do documento.</p> - -<p><a class="internal" href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">Ver amostra</a></p> - -<pre><html> -<head> - <title>Web Font Sample</title> - <style type="text/css" media="screen, print"> - @font-face { - font-family: "Bitstream Vera Serif Bold"; - src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); - } - - body { font-family: "Bitstream Vera Serif Bold", serif } - </style> -</head> -<body> - This is Bitstream Vera Serif Bold. -</body> -</html> -</pre> - -<p>Neste exemplo, a cópia local do usuário de "Helvetica Neue Bold" é usada; se o usuário não possuir a fonte instalada (dois diferentes nomes são tentados), então, a fonte baixável, chamada "MgOpenModernaBold.ttf" é usada em seu lugar:</p> - -<pre class="brush: css">@font-face { - font-family: MyHelvetica; - src: local("Helvetica Neue Bold"), - local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); - font-weight: bold; -} -</pre> - -<h2 id="Notas">Notas</h2> - -<ul> - <li>No Gecko, fontes web estão sujeitas à mesma restrição de domínio (arquivos de fontes precisam estar no mesmo domínio da página que os está utilizando), a menos que <a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">HTTP access controls</a> (EN) seja usado para relaxar esta restrição.</li> - <li> - <div class="note"><strong>Nota:</strong> O tipo MIME do arquivo especificado não é considerado porque não há tipos MIME definidos parar fontes TrueType e OpenType.</div> - </li> - <li>Quando o Gecko exibe uma página que usa fontes web, ele inicialmente exibe o texto usando a melhor fonte <strong>fallback</strong> CSS disponível no computador do usuário enquanto aguarda o fim do download da fonte web. Conforme as fontes web são baixadas, o Gecko atualiza o texto que use essa fonte. Isto permite que o usuário leia o texto da página mais rapidamente.</li> -</ul> - -<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - <th>Suporte a</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td><strong>4.0</strong></td> - <td>Somente fontes OpenType embutidas</td> - </tr> - <tr> - <td rowspan="2">Firefox (Gecko)</td> - <td><strong>3.5</strong> (1.9.1)</td> - <td>Somente fontes TrueType e OpenType</td> - </tr> - <tr> - <td><strong>3.6</strong> (1.9.2)</td> - <td>Formato de fonte web aberta (WOFF)</td> - </tr> - <tr> - <td>Opera</td> - <td><strong>10.0</strong></td> - <td>Somente fontes TrueType e OpenType</td> - </tr> - <tr> - <td>Safari (WebKit)</td> - <td><strong>3.1</strong> (525)</td> - <td>Somente fontes TrueType e OpenType</td> - </tr> - </tbody> -</table> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Veja também <a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">MSDN Microsoft library @font-face</a> (EN).</p> - -<h2 id="Especificações">Especificações</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions" title="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions">CSS 2 Fonts</a> 12/05/1998 - Obsoleto</li> - <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-resources" title="http://www.w3.org/TR/css3-fonts/#font-resources">CSS 3 Fonts</a> 2009 - Rascunho em trabalho</li> - <li><a class="external" href="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html" title="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html">WOFF file format specification</a> - Rascunho</li> -</ul> - -<h2 id="Veja_também">Veja também</h2> - -<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <li style="margin-bottom: 0.25em;"><a class="external" href="http://www.fontsquirrel.com/fontface/generator" title="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a> (en)</li> - <li style="margin-bottom: 0.25em;"><a href="/en/About_WOFF" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/About WOFF">About WOFF</a> (en)</li> - <li style="margin-bottom: 0.25em;"><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/" title="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face </a>(en)</li> - <li style="margin-bottom: 0.25em;"><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a> (en)</li> - <li style="margin-bottom: 0.25em;"><a class="external" href="http://opentype.info/demo/webfontdemo.html" title="http://opentype.info/demo/webfontdemo.html">10 Great Free Fonts for @font-face embedding</a> (en)</li> -</ul> diff --git a/files/pt-pt/web/css/@import/index.html b/files/pt-pt/web/css/@import/index.html deleted file mode 100644 index b67776898e..0000000000 --- a/files/pt-pt/web/css/@import/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: '@import' -slug: Web/CSS/@import -tags: - - At-rule - - CSS - - Referencia - - Referencia_CSS - - import -translation_of: Web/CSS/@import ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p><code>@import</code> é utilizado para importar regras de estilo de outros folhas de estilo.</p> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">@import "<em>url</em>"; -@import "<em>url</em>"<em>media1</em>,<em>media2</em>,<em>...</em>; -@import url("<em>url</em>"); -@import url("<em>url</em>")<em>media1</em>; -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>De modo que agentes do usuário possam evitar recuperar recursos para tipos não suportados de mídia, autores podem especificar regras <code>@import</code> dependentes de mídia. A importação destas condicionais especifica separado por vírgulas os <a href="pt/CSS/@media#Media_types">tipos de mídia</a> depois da URL. No <code>all</code> para o médio tem o mesmo efeito.</p> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<pre class="eval">@import url("fineprint.css") print; -@import url("bluish.css") projection, tv; -</pre> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/REC-CSS1#the-cascade">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#at-import">CSS 2.1</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("@media") }}, {{ Cssxref("@font-face") }}, {{ Cssxref("@import") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/@import", "fr": "fr/CSS/@import", "pl": "pl/CSS/@import" } ) }}</p> diff --git a/files/pt-pt/web/css/@media/index.html b/files/pt-pt/web/css/@media/index.html deleted file mode 100644 index 959cc3c59f..0000000000 --- a/files/pt-pt/web/css/@media/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: '@media' -slug: Web/CSS/@media -tags: - - CSS - - Referencia - - Referencia_CSS -translation_of: Web/CSS/@media ---- -<p>{{ CSSRef() }}</p> - -<p id="Resumo">A <a href="/pt-PT/docs/Web/CSS/At-rule" title="en/CSS/At-rule">regra "at"</a> <code>@media</code> de <a href="/pt-PT/docs/Web/CSS" title="CSS">CSS</a> permite aplicar parte de uma folha de estilos com a condição definida por uma ou mais consultas de média.</p> - -<p>Pode utilizar-se tanto no início do código como dentro de qualquer outra regra "at" condicional.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> Em JavaScript, a funcionalidade desta regra está disponível através da interface {{domxref("CSSMediaRule")}} do modelo/objeto CSS.</p> -</div> - -<h2 id="Sintaxe" name="Sintaxe">Sintaxe</h2> - -<pre class="brush: css"><code>/* No nível mais abrangente do código */ -@media screen and (min-width: 900px) { - article { - padding: 1rem 3rem; - } -} - -/* Dentro de outra regra-"at" condicional */ -@supports (display: flex) { - @media screen and (min-width: 900px) { - article { - display: flex; - } - } -}</code></pre> - -<p>Para aprofundar a sintaxe de consultas de média, por favor leia <a href="/pt-PT/docs/Web/CSS/Consulta_de_mídia">Utilizar consultas de média</a>.</p> - -<h2 id="Tipos_de_m.C3.ADdia" name="Tipos_de_m.C3.ADdia">Tipos de média</h2> - -<dl> - <dt><code>all</code> (todos)</dt> - <dd>Destinado para todos os dispositivos.</dd> - <dt><code>print</code> (impressão)</dt> - <dd>Destinado para material paginado e para documentos visualizados no ecrã no modo de pré-visualizar impressão. Por favor, consulte a secção de <a href="/pt-PT/docs/Web/CSS/Média_paginada" title="https://developer.mozilla.org/en/CSS/Paged_Media">média paginada,</a> e a <a href="/pt-PT/docs/Web/CSS/Como_começar/Mídia" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">secção de média do tutorial de Como Começar </a>para informação sobre a formatação de problemas que são específicos para a média paginada.</dd> - <dt><code>screen</code> (ecrã)</dt> - <dd>Destinado primariamente para os ecrãs de computador a cores.</dd> - <dt><code>speech</code> (elocução)</dt> - <dd> - <p>Pretendido para sintetizadores de fala. Nota: CSS2 tem um tipo de mídia similar chamado 'aural' para esta proposta. Veja o apêndice em folhas de estilo aural para detalhes.</p> - </dd> -</dl> - -<h3 id="Grupos_de_m.C3.ADdia" name="Grupos_de_m.C3.ADdia">Grupos de Média</h3> - -<div class="blockIndicator note"> -<p><strong>Nota: </strong>Esta secção aplica-se a CSS 2.1. Há vários tipos de média, introduzidos nas especificações do CSS2.1 e <a href="https://drafts.csswg.org/mediaqueries-3/#background" rel="noopener">Media Queries 3</a>, que foram descontinuados, como <code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>. O tipo <code>aural</code> foi substituído pelo <code>speech</code>, que é semelhante.</p> -</div> - -<p>Tipos de média são também parte de diferentes grupos de média. A seguinte tabela indica que tipos estão em cada grupo.</p> - -<table class="standard-table"> - <tbody> - <tr> - <td></td> - <td class="header" colspan="10" style="text-align: center;">Grupos</td> - </tr> - <tr> - <td class="header">Tipos</td> - <td class="header">continuous</td> - <td class="header">paged</td> - <td class="header">visual</td> - <td class="header">audio</td> - <td class="header">speech</td> - <td class="header">tactile</td> - <td class="header">grid</td> - <td class="header">bitmap</td> - <td class="header">interactive</td> - <td class="header">static</td> - </tr> - <tr> - <td class="header">braille</td> - <td>X</td> - <td></td> - <td></td> - <td></td> - <td></td> - <td>X</td> - <td>X</td> - <td></td> - <td>X</td> - <td>X</td> - </tr> - <tr> - <td class="header">embossed</td> - <td></td> - <td>X</td> - <td></td> - <td></td> - <td></td> - <td>X</td> - <td>X</td> - <td></td> - <td></td> - <td>X</td> - </tr> - <tr> - <td class="header">handheld</td> - <td>X</td> - <td>X</td> - <td>X</td> - <td>X</td> - <td>X</td> - <td></td> - <td>X</td> - <td>X</td> - <td>X</td> - <td>X</td> - </tr> - <tr> - <td class="header">print</td> - <td></td> - <td>X</td> - <td>X</td> - <td></td> - <td></td> - <td></td> - <td></td> - <td>X</td> - <td></td> - <td>X</td> - </tr> - <tr> - <td class="header">projection</td> - <td></td> - <td>X</td> - <td>X</td> - <td></td> - <td></td> - <td></td> - <td></td> - <td>X</td> - <td>X</td> - <td></td> - </tr> - <tr> - <td class="header">screen</td> - <td>X</td> - <td></td> - <td>X</td> - <td>X</td> - <td></td> - <td></td> - <td></td> - <td>X</td> - <td>X</td> - <td>X</td> - </tr> - <tr> - <td class="header">aural</td> - <td>X</td> - <td></td> - <td></td> - <td></td> - <td>X</td> - <td></td> - <td></td> - <td></td> - <td>X</td> - <td>X</td> - </tr> - <tr> - <td class="header">tty</td> - <td>X</td> - <td></td> - <td>X</td> - <td></td> - <td></td> - <td></td> - <td>X</td> - <td></td> - <td>X</td> - <td>X</td> - </tr> - <tr> - <td class="header">tv</td> - <td>X</td> - <td>X</td> - <td>X</td> - <td>X</td> - <td></td> - <td></td> - <td></td> - <td>X</td> - <td>X</td> - <td>X</td> - </tr> - </tbody> -</table> - -<h2 id="Exemplos" name="Exemplos">Exemplos</h2> - -<pre> @media print { - body { font-size: 10pt } - } - @media screen { - body { font-size: 13px } - } - @media screen, print { - body { line-height: 1.2 } - } -</pre> - -<h2 id="Notas" name="Notas">Questões de acessibilidade</h2> - -<p>Para comodidade das pessoas que ampliam o tamanho do texto, deve-se utilizar medidas em <code>em</code> na definição de {{cssxref("<length>")}}. Esta medida funciona melhor do que <code>px</code> quando o utilizar muda o tamanho do texto no navegador.</p> - -<p>Considere usar consulta de média Level 4 (Nível 4) para melhorar experiência de utilização. Por exemplo, <code>prefers-reduced-motion</code> para detetar se o utilizador<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"> pediu ao sistema para minimizar a quantidade de animaçõe ou movimentos</a>.</p> - -<h2 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h2> - -<table> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td> - <td>{{Spec2('CSS5 Media Queries')}}</td> - <td>Reinstituída consultas de média <code>light-level</code>, <code>inverted-colors</code> e consultas média personalizadas, as quais foram removidas do Level 4 (Nível 4).<br> - Adicionados recursos de média <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code>, e <code>prefers-color-scheme</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td> - <td>{{Spec2('CSS3 Conditional')}}</td> - <td>Definida sintaxe básica da regra <code>@media</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td> - <p>Adicionados recursos média <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code>, e <code>overflow-inline</code>.<br> - Descontinuação de todos os tipos de média excepto <code>screen</code>, <code>print</code>, <code>speech</code>, e <code>all</code>.<br> - Tornou a sintaxe mais flexível com adição, entre outras coisas, da palavra-chave <code>or</code>.</p> - </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>Sem alterações.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<p><span class="comment">== Compatibilidade com navegadores ==</span></p> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Consulte também</h3> - -<ul> - <li><a class="internal" href="/pt-PT/docs/Web/CSS/Consulta_de_mídia" title="En/CSS/Media queries">Consultas de média</a></li> - <li>Em JavaScript, {{ domxref("CSSMediaRule") }} está associado a esta regra-at.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions#Media_features">Recursos de média em extensões da Mozilla</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions#Media_features">Recursos de média em extensões WebKit</a></li> -</ul> - -<p>{{ languages( { "en": "en/CSS/@media", "fr": "fr/CSS/@media", "pl": "pl/CSS/@media" } ) }}</p> diff --git a/files/pt-pt/web/css/_doublecolon_after/index.html b/files/pt-pt/web/css/_doublecolon_after/index.html deleted file mode 100644 index 26675ab646..0000000000 --- a/files/pt-pt/web/css/_doublecolon_after/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: ':after | ::after' -slug: Web/CSS/::after -tags: - - Referencia_CSS -translation_of: Web/CSS/::after -original_slug: Web/CSS/:after ---- -<p>{{ CSSRef() }}</p> -<h3 id="Resumo" name="Resumo">Resumo</h3> -<p><code>:after </code>cria um pseudo-elemento que é a última criança do elemento selecionado. Tipicamente usado para adicionar conteúdo cosmético a um elemento, pelo uso da propriedade CSS {{ cssxref("content") }}. Este elemento é <code>inline</code> por padrão.</p> -<p>{{ fx_minversion_note("3.5", "A versão do Firefox anterior à 3.5 somente tinha implementada a propriedade <code>:after</code> do CSS 2.0. Não foram permitidas <code>position, float, list-style-*</code> e algumas propriedades de exibição. O Firefox 3.5 removeu estas restrições. Note que isto independe da notação com :: mencionada anteriormente.") }}</p> -<h3 id="Sintaxe">Sintaxe</h3> -<pre>element:after { propriedades do estilo } /* sintaxe CSS2 */ - -element::after { <em>propriedades do estilo</em> } /* sintaxe CSS3, não suportada pelo IE8 */</pre> -<p>A notação<code> ::after </code>foi introduzida no CSS3 com o objetivo de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Navegadores também aceitam a notação<code> :after </code>introduzida no CSS 2.</p> -<div class="note"><strong>Nota:</strong> O Microsoft Internet Explorer 8 suporta somente a notação <code>:after</code>.</div> -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> -<pre>.boringtext:after { - content: " Obrigado por ler tudo isto!"; - font-size: small; - color: red; - background: gray; -} -</pre> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> -<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html" title="http://www.w3.org/TR/CSS21/generate.html">CSS 2.1 Generated Content</a> (EN)</li> <li><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#before-and-after" title="http://www.w3.org/TR/CSS21/selector.html#before-and-after">CSS 2.1 Selectors</a> (EN)</li> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#gen-content" rel="external nofollow" title="http://www.w3.org/TR/css3-selectors/#gen-content">CSS 3 Selectors</a> (EN) Rascunho em produção</li> -</ul> -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> -<table class="standard-table"> <tbody> <tr> <th>Navegador</th> <th>Versão mais antiga</th> <th>Suporte a</th> </tr> <tr> <td>Internet Explorer</td> <td>8.0</td> <td><code>:after</code></td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td><code>:after</code></td> </tr> <tr> <td>1.0 (1.5)</td> <td><code>:after | ::after</code></td> </tr> <tr> <td rowspan="2">Opera</td> <td>4.0</td> <td><code>:after</code></td> </tr> <tr> <td>7.0</td> <td><code>:after | ::after</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td><code>:after | ::after</code></td> </tr> </tbody> -</table> -<h3 id="Veja_também">Veja também</h3> -<p>{{ Cssxref(":before") }}, {{ cssxref("content") }}</p> -<p>{{ languages( { "fr": "fr/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after", "pt": "pt/CSS/:after" } ) }}</p> diff --git a/files/pt-pt/web/css/_doublecolon_before/index.html b/files/pt-pt/web/css/_doublecolon_before/index.html deleted file mode 100644 index 78a034d54c..0000000000 --- a/files/pt-pt/web/css/_doublecolon_before/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: ':before | ::before' -slug: Web/CSS/::before -tags: - - Referencia_CSS -translation_of: Web/CSS/::before -original_slug: Web/CSS/:before ---- -<p>{{ CSSRef() }}</p> -<h3 id="Resumo" name="Resumo">Resumo</h3> -<p>:before cria um pseudo-elemento que é a primeira criança do elemento selecionado. Tipicamente usado para adicionar conteúdo cosmético a um elemento. Este elemento é <code>inline</code> por padrão.</p> -<p>{{ fx_minversion_note("3.5", "A versão do Firefox anterior à 3.5 somente tinha implementada a propriedade <code>:before</code> do CSS 2.0. Não foram permitidas <code>position, float, list-style-*</code> e algumas propriedades de exibição. O Firefox 3.5 removeu estas restrições. Note que isto independe da notação com :: mencionada anteriormente.") }}</p> -<h3 id="Sintaxe">Sintaxe</h3> -<pre>element:before { propriedades do estilo } /* sintaxe CSS2 */ - -element::before { <em>propriedades do estilo</em> } /* sintaxe CSS3, não suportada pelo IE8 */</pre> -<p>A notação<code> ::before </code>foi introduzida no CSS3 com o objetivo de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Navegadores também aceitam a notação<code> :before </code>introduzida no CSS 2.</p> -<div class="note"><strong>Nota:</strong> O Microsoft Internet Explorer 8 suporta somente a notação <code>:<span style="font-family: Verdana,Tahoma,sans-serif;">before</span></code>.</div> -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> -<pre>q:before { content: "»" } -q:after { content: '«' } - -<q>Algumas citações</q>, ele disse, <q>são melhores que nenhuma</q>.</pre> -<p>Resultado: »Algumas citações«, ele disse, »são melhores que nenhuma«.</p> -<h3 id="Notas">Notas</h3> -<p>Apesar das correções de posicionamento, o Firefox 3.5 não permite que o conteúdo seja gerado como um irmão anteriormente separado (como a declaração das <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">CSS spec</a>(EN) "Os pseudo-elementos <code>:before</code> e <code>:after</code> interagem com outras caixas...como se fossem elementos reais inseridos dentro de seu elemento associado."), eles podem ser usados para proporcionar uma ligeira melhora nos arranjos sem tabelas (isto é, para alcançar o centro), tão longo como o conteúdo a ser centralizado é envolto em outro elemento criança, uma coluna antes e depois do conteúdo pode ser introduzida sem a adição de um irmão anterior ou posterior (por exemplo, talvez seja mais semanticamente correto adicionar um span a mais como anteriormente, que seria para adicionar um <code><div/></code> vazio antes e depois). (E sempre lembrar de adicionar uma largura para um flututante, uma vez que de outra forma ele não flutuará!)</p> -<pre class="brush: html"><style type="text/css"> - -#floatme {float:left; width:50%;} - -.example:before { - content: "Floated Before"; /* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */ - float: left; - width:25% -} -.example:after { - content: "Floated After"; - float: right; - width:25% -} - -/* For styling */ -.example:before, .example:after, .first { - background: yellow; - color: red; -} - - -</style> -<div class="example"> -<span id="floatme">"Floated Before" should be generated on the left of the -viewport and not allow overflow in this line to flow under it. Likewise -should "Floated After" appear on the right of the viewport and not allow this -line to flow under it.</span> -</div></pre> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> -<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html" title="http://www.w3.org/TR/CSS21/generate.html">CSS 2.1 Generated Content</a> (EN)</li> <li><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#before-and-after" title="http://www.w3.org/TR/CSS21/selector.html#before-and-after">CSS 2.1 Selectors</a> (EN)</li> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#gen-content" rel="external nofollow" title="http://www.w3.org/TR/css3-selectors/#gen-content">CSS 3 Selectors</a> (EN) Rascunho em produção</li> -</ul> -<h3 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com navegadores</h3> -<table class="standard-table"> <tbody> <tr> <th>Navegador</th> <th>Versão mais antiga</th> <th>Suporte a</th> </tr> <tr> <td>Internet Explorer</td> <td>8.0<code> <br> </code></td> <td><code>:before</code></td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td><code>:before<br> </code></td> </tr> <tr> <td><strong>1.0</strong> (1.5)</td> <td><code>:before | ::before</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.0</strong> (85)</td> <td><code><span style="font-family: Verdana,Tahoma,sans-serif;"><span style="font-family: monospace;">:</span></span>before | ::before</code></td> </tr> <tr> <td rowspan="2">Opera</td> <td>4.0</td> <td><code>:before<br> </code></td> </tr> <tr> <td><strong>7.0</strong></td> <td><code>:before | ::before</code></td> </tr> </tbody> -</table> -<h3 id="Examples" name="Examples">Veja também</h3> -<p>{{ Cssxref(":after") }}</p> -<p>{{ languages( { "en": "en/CSS/:before", "fr": "fr/CSS/:before", "pl": "pl/CSS/:before", "es": "es/CSS/before" } ) }}</p> diff --git a/files/pt-pt/web/css/alternative_style_sheets/index.html b/files/pt-pt/web/css/alternative_style_sheets/index.html deleted file mode 100644 index 9cf87539f9..0000000000 --- a/files/pt-pt/web/css/alternative_style_sheets/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Folhas de estilo alternativas -slug: Web/CSS/Alternative_style_sheets -translation_of: Web/CSS/Alternative_style_sheets -original_slug: Web/CSS/Folhas_de_estilo_alternativas ---- -<p>O Firefox oferece suporte a folhas de estilo alternativa. AS páginas que disponibilizam folhas de estilo alternativas permitem que o usuário selecione o estilo que a página será mostrada usando o submenu Exibir>Estilos da página. Fornecendo uma maneira de visualizar várias versões de uma mesma página, com base em suas necessidades e preferências.</p> -<p>Um site pode usar a tag link para adicionar as folhas de estilo alternativa.</p> -<p>Por exemplo:</p> -<pre class="eval"><link href="padrao.css" rel="stylesheet" type="text/css" title="Estilo padrao"> -<link href="estilo1.css" rel="alternate stylesheet" type="text/css" title="Estilo 1"> -<link href="estilo2.css" rel="alternate stylesheet" type="text/css" title="Estilo 2"> -</pre> -<p>Oferecendo essas três folhas de estilo, disponibilizaremos ao usuário as opções "Estilo Padrão", "Estilo 1" e "Estilo 2" no submenu. Quando o usuário selecionar um dos estilos, a página imediatamente será recarregada usando o estilo selecionado.</p> -<p>O valor do atributo title na tag link nomeia cada opção de estilo. Quando o valor deste atributo é repetido, entende-se como parte da mesma opção. Caso a tag link não possua o atributo title, a folha correspondente será sempre aplicada.</p> -<p>Use rel="stylesheet" para aplicar as folhas correspondente ao estilo padrão, e rel="alternate stylesheet" para aplicar as folhas correspondente aos estilos alternativos. Isso permite que o Firefox diferencie as folhas de estilo padrão das alternativas e permite que os navegadores que não suportam folhas de estilo alternativa apliquem somente as folhas do estilo padrão.</p> -<p> </p> -<h3 id="Exemplo" name="Exemplo">Exemplo</h3> -<p><a class="external" href="http://developer.mozilla.org/samples/cssref/altstyles/index.html">Clique aqui</a> para ver um exemplo.</p> -<p> </p> -<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> -<ul> - <li><a class="external" href="http://www.w3.org/TR/html401/present/styles.html#h-14.3">HTML 4.01: Folhas de Estilo Externa</a></li> -</ul> diff --git a/files/pt-pt/web/css/at-rule/index.html b/files/pt-pt/web/css/at-rule/index.html deleted file mode 100644 index bbf7651358..0000000000 --- a/files/pt-pt/web/css/at-rule/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Regra "At" -slug: Web/CSS/At-rule -tags: - - AT - - CSS - - Referencia - - Regra -translation_of: Web/CSS/At-rule ---- -<div>{{cssref}}</div> - -<p><span class="seoSummary">Uma <strong>regra "at"</strong> is a <a href="/en-US/docs/Web/CSS/Syntax#CSS_statements">CSS statement</a> beginning with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier and includes everything up to the next semi-colon, '<code>;</code>' (<code>U+003B SEMICOLON</code>), or the next <a href="/en-US/docs/Web/CSS/Syntax#CSS_declarations_blocks">CSS block</a>, whichever comes first.</span></p> - -<pre class="brush: css">/* General structure */ -@IDENTIFIER (RULE); - -/* Example: tells browser to use UTF-8 character set */ -@charset "utf-8";</pre> - -<p>There are several at-rules, designated by their identifiers, each with a different syntax:</p> - -<ul> - <li>{{cssxref("@charset")}} — Defines the character set used by the style sheet.</li> - <li>{{cssxref("@import")}} — Tells the CSS engine to include an external style sheet.</li> - <li>{{cssxref("@namespace")}} — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.</li> - <li><strong><em>at-rules integradas</em></strong> — A subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules: - <ul> - <li>{{cssxref("@media")}} — A conditional group rule which will apply its content if the device meets the criteria of the condition defined using a <em>media query</em>.</li> - <li>{{cssxref("@supports")}} {{experimental_inline}} — A conditional group rule which will apply its content if the browser meets the criteria of the given condition.</li> - <li>{{cssxref("@document")}} {{experimental_inline}} — A conditional group rule which will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. <em>(deferred to Level 4 of CSS Spec)</em></li> - <li>{{cssxref("@page")}} — Describes the aspect of layout changes which will be applied when printing the document.</li> - <li>{{cssxref("@font-face")}} — Describes the aspect of an external font to be downloaded.</li> - <li>{{cssxref("@keyframes")}} {{experimental_inline}} — Describes the aspect of intermediate steps in a CSS animation sequence.</li> - <li>{{cssxref("@viewport")}} {{experimental_inline}} — Describes the aspects of the viewport for small screen devices. <em>(currently at the Working Draft stage)</em></li> - <li>{{cssxref("@counter-style")}} — Defines specific counter styles that are not part of the predefined set of styles. <em>(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)</em></li> - <li>{{cssxref("@font-feature-values")}} (plus <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> and <code>@character-variant</code>)<br> - — Define common names in {{cssxref("font-variant-alternates")}} for feature activated differently in OpenType. <em>(at the Candidate Recommendation stage, but only implemented in Gekko as of writing)</em></li> - </ul> - </li> -</ul> - -<h2 id="Regras_de_grupo_condicionais">Regras de grupo condicionais</h2> - -<p>Much like the values of properties, each at-rule has a different syntax. Nevertheless, several of them can be grouped into a special category named <strong>conditional group rules</strong>. These statements share a common syntax and each of them can include <em>nested statements</em>—either <em>rulesets</em> or <em>nested at-rules</em>. Furthermore, they all convey a common semantic meaning—they all link some type of condition, which at any time evaluates to either <strong>true</strong> or <strong>false</strong>. If the condition evaluates to <strong>true</strong>, then all of the statements within the group will be applied.</p> - -<p>Conditional group rules are defined in <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> and are:</p> - -<ul> - <li>{{cssxref("@media")}},</li> - <li>{{cssxref("@supports")}},</li> - <li>{{cssxref("@document")}}. <em>(deferred to Level 4 of CSS Spec) </em></li> -</ul> - -<p>Since each conditional group may also contain nested statements, there may be an unspecified amount of nesting.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('CSS3 Conditional')}}</td> - <td>{{Spec2('CSS3 Conditional')}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td> - <td>{{Spec2('Compat')}}</td> - <td>Standardizes <code>@-webkit-keyframes</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Consultar_também">Consultar também:</h2> - -<ul> - <li>{{CSS_key_concepts}}</li> -</ul> diff --git a/files/pt-pt/web/css/background-attachment/index.html b/files/pt-pt/web/css/background-attachment/index.html deleted file mode 100644 index ca851ae58c..0000000000 --- a/files/pt-pt/web/css/background-attachment/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: background-attachment -slug: Web/CSS/background-attachment -tags: - - Referencia_CSS -translation_of: Web/CSS/background-attachment ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>Se um {{ Cssxref("background-image") }} é especificado, <code>background-attachment</code> determina se a posição da imagem é fixa na tela, ou rola junto com o bloco que a contém.</p> - -<ul> - <li>Valor inicial: scroll</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: não</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li> - <li>Valor computado: como especificado</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">background-attachment: scroll | fixed | inherit -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>scroll </dt> - <dd>Se <code>scroll</code> é especificado, a imagem de fundo irá rolar na tela com o bloco de imagem que a contém.</dd> - <dt>fixed </dt> - <dd>Se <code>fixed</code> é especificado, a imagem de fundo não rolará com o elemento que a contém, em vez disso, continua estacionária no mesmo lugar da tela.</dd> -</dl> -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Simple_example">Simple example</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush:css; highlight:[3];">p { - background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); - background-attachment: fixed; -} -</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><p> - There were doors all round the hall, but they were all locked; and when - Alice had been all the way down one side and up the other, trying every - door, she walked sadly down the middle, wondering how she was ever to - get out again. -</p></pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample("Simple_example")}}</p> - -<h3 id="Multiple_background_image_support">Multiple background image support</h3> - -<p>This property supports multiple background images. You can specify a different <code><attachment></code> for each background, separated by commas. Each image is matched with the corresponding attachment type, from first specified to last.</p> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush:css; highlight:[3];">p { - background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); - background-attachment: fixed, scroll; - background-repeat: no-repeat, repeat-y; -}</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><p> - There were doors all round the hall, but they were all locked; and when - Alice had been all the way down one side and up the other, trying every - door, she walked sadly down the middle, wondering how she was ever to - get out again. - - Suddenly she came upon a little three-legged table, all made of solid - glass; there was nothing on it except a tiny golden key, and Alice's - first thought was that it might belong to one of the doors of the hall; - but, alas! either the locks were too large, or the key was too small, - but at any rate it would not open any of them. However, on the second - time round, she came upon a low curtain she had not noticed before, and - behind it was a little door about fifteen inches high: she tried the - little golden key in the lock, and to her great delight it fitted! -</p></pre> - -<h4 id="Result_2">Result</h4> - -<p>{{EmbedLiveSample("Multiple_background_image_support")}}</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#background-attachment">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-attachment">CSS 3</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Firefox</td> - <td>1</td> - </tr> - <tr> - <td>Netscape</td> - <td>6</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p> </p> - -<p>{{ languages( { "en": "en/CSS/background-attachment", "fr": "fr/CSS/background-attachment", "pl": "pl/CSS/background-attachment" } ) }}</p> diff --git a/files/pt-pt/web/css/background-color/index.html b/files/pt-pt/web/css/background-color/index.html deleted file mode 100644 index 4d713de239..0000000000 --- a/files/pt-pt/web/css/background-color/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: background-color -slug: Web/CSS/background-color -tags: - - Referencia_CSS -translation_of: Web/CSS/background-color ---- -<p>{{CSSRef}}</p> - -<h2 id="Resumo" name="Resumo">Resumo</h2> - -<p><code>background-color</code> configura a cor de fundo de um elemento, com qualquer valor de cor ou a palavra-chave <code>transparent</code>.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxe" name="Sintaxe">Sintaxe</h2> - -<pre class="eval">background-color: <em>color</em> | transparent | inherit -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>color </dt> - <dd>A cor pode ser especificada com um valor RGB hexadecimal, um valor RGB regular ou usando umas das palavras-chave pré-definidas.</dd> - <dt>transparent </dt> - <dd>O valor padrão para <code>background-color</code> é <code>transparent</code>, o que significa que o elemento não tem cor própria, em vez disso ele exibe a cor do elemento de trás.</dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="exampleone"> - Lorem ipsum dolor sit amet, consectetuer -</div> - -<div class="exampletwo"> - Lorem ipsum dolor sit amet, consectetuer -</div> - -<div class="examplethree"> - Lorem ipsum dolor sit amet, consectetuer -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight:[2,7,12,17];">.exampleone { - background-color: teal; - color: white; -} - -.exampletwo { - background-color: rgb(153,102,153); - color: rgb(255,255,204); -} - -.examplethree { - background-color: #777799; - color: #FFFFFF; -} -</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Exemplos","200","150")}}</p> - - -<h2 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color">CSS 3</a></li> -</ul> - -<h2 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegadores</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4.0</td> - </tr> - <tr> - <td>Firefox (Gecko)</td> - <td>1.0 (1.0)</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - <tr> - <td>Safari (WebKit)</td> - <td>1.0 (85)</td> - </tr> - </tbody> -</table> - -<h2 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h2> - -<ul> - <li style="margin-bottom: 0.25em;"><a href="/en/CSS/Multiple_backgrounds" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/CSS/Multiple backgrounds">Multiple backgrounds</a></li> -</ul> diff --git a/files/pt-pt/web/css/background-image/index.html b/files/pt-pt/web/css/background-image/index.html deleted file mode 100644 index fd513e19b1..0000000000 --- a/files/pt-pt/web/css/background-image/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: background-image -slug: Web/CSS/background-image -tags: - - CSS_1 - - CSS_2.1 - - CSS_3 - - Referencia_CSS -translation_of: Web/CSS/background-image ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>A propriedade <code>background-image</code> configura a imagem de fundo para um elemento.</p> - -<ul> - <li>Valor inicial: none</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: não</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li> - <li>Valor computado: URI absoluta ou none</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">background-image:<em>uri</em> | none | inherit -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>uri </dt> - <dd>A localização da imagem de recurso para ser usada como imagem de fundo.</dd> - <dt>none </dt> - <dd>Usado para especificar que um elemento não tem imagem de fundo.</dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<p>Note that the star image is partially transparent and is layered over the cat image.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="catsandstars"> - This paragraph is full of cats<br />and stars. - </p> - <p>This paragraph is not.</p> - <p class="catsandstars"> - Here are more cats for you.<br />Look at them! - </p> - <p>And no more.</p> -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">pre, p { - font-size: 1.5em; - color: #FE7F88; - background-color: transparent; -} - -div { - background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); -} - -p { - background-image: none; -} - -.catsandstars { - background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), - url("https://mdn.mozillademos.org/files/7693/catfront.png"); - background-color: transparent; -} -</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample('Exemplos')}}</p> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>Desenvolvedores devem assegurar-se de especificar um {{ Cssxref("background-color") }} para ser usado se uma imagem não estiver disponível. Imagens de fundo são renderizadas sobre a cor de fundo.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#background-image">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-image">CSS 3</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Firefox</td> - <td>1</td> - </tr> - <tr> - <td>Netscape</td> - <td>4</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image" } ) }}</p> diff --git a/files/pt-pt/web/css/background-position/index.html b/files/pt-pt/web/css/background-position/index.html deleted file mode 100644 index 5445184e42..0000000000 --- a/files/pt-pt/web/css/background-position/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: background-position -slug: Web/CSS/background-position -tags: - - Referencia_CSS -translation_of: Web/CSS/background-position ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p><code>background-position</code> configura a posição inicial de qualquer imagem de fundo que seja configurada. -</p> -<ul><li> Valor inicial: 0% 0% -</li><li> Aplica-se a: todos os elementos -</li><li> Herdado: não -</li><li> Porcentagens: refere-se ao tamanho da própria caixa -</li><li> Mídia: <a href="pt/CSS/Media/Visual">visual</a> -</li><li> Valor computado: para <length> o valor absoluto, se não uma porcentagem -</li></ul> -<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3> -<pre class="eval">background-position: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit -</pre> -<h3 id="Valores" name="Valores"> Valores </h3> -<dl><dt> <percentage> <percentage></dt><dd> Com um par de valores de '0% 0%', o canto superior esquerdo da imagem é alinhado com o canto superior esquerdo do enchimento da borda da caixa. Um par de valores de '100% 100%' coloca o canto inferior direito da imagem no canto inferior direito da área de enchimento. Com um par de valores de '14% 84%', o ponto de 14% na horizontal e 84% na vertical da imagem é colocado no ponto 14% na horizontal e 84% na vertical da área de enchimento. -</dd><dt> <length> <length></dt><dd> Com um par de valores de '2cm 1cm', o canto superior esquerdo da imagem é colocado 2cm para a direita e 1cm abaixo do canto superior esquerdo da área de enchimento. -</dd><dt>top left e left top</dt><dd> O mesmo que '0% 0%'. -</dd><dt>top, top center e center top</dt><dd> O mesmo que '50% 0%'. -</dd><dt>right top e top right</dt><dd> O mesmo que '100% 0%'. -</dd><dt>left, left center e center left</dt><dd> O mesmo que '0% 50%'. -</dd><dt>center e center center</dt><dd> O mesmo que '50% 50%'. -</dd><dt>right, right center e center right</dt><dd> O mesmo que '100% 50%'. -</dd><dt>bottom left e left bottom</dt><dd> O mesmo que '0% 100%'. -</dd><dt>bottom, bottom center e center bottom</dt><dd> O mesmo que '50% 100%'. -</dd><dt>bottom right e right bottom</dt><dd> O mesmo que '100% 100%'. -</dd></dl> -<p>Se somente um valor é especificado, então ele configura a posição horizontal, com a posição vertical em 50%. Caso contrário, o primeiro valor especifica a posição horizontal. Combinações são permitidas de valores de palavras-chave, comprimento ou porcentagens, mas se palavras-chave forem misturadas com outros valores, <code>'left'</code> e <code>'right'</code> podem somente ser usados como o primeiro valor, e <code>'top'</code> e <code>'down'</code> podem somente ser usados como o segundo valor. Posições negativas são permitidas. -</p> -<h3 id="Exemplos" name="Exemplos"> Exemplos </h3> -<pre>.exampleone { - background-image: url("logo.png"); - background-position: top center; -} - -.exampletwo { - background-image: url("logo.png"); - background-position: 25% 75%; -} - -.examplethree { - background-image: url("logo.png"); - background-position: 2cm bottom; -} - -.examplefour { - background-image: url("logo.png"); - background-position: center 10%; -} - -.examplefive { - background-image: url("logo.png"); - background-position: 2cm 50%; -} - -</pre> -<p><span class="comment">== Notas ==</span> -</p> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es"> Especificações </h3> -<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#background-position">CSS 1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">CSS 2.1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position">CSS 3</a> -</li></ul> -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores"> Compatibilidade com navegadores </h3> -<table class="standard-table"> <tbody><tr> <th>Navegador</th> <th>Versão mais antiga</th> </tr> <tr> <td>Internet Explorer</td> <td>4</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>6</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> -</tbody></table> -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m"> Veja também </h3> -<p>{{ Cssxref("background") }}, -{{ Cssxref("background-attachment") }}, -{{ Cssxref("background-color") }}, -{{ Cssxref("background-image") }}, -{{ Cssxref("background-position") }}, -{{ Cssxref("background-repeat") }} -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position" } ) }} diff --git a/files/pt-pt/web/css/background-repeat/index.html b/files/pt-pt/web/css/background-repeat/index.html deleted file mode 100644 index c8ee0800ce..0000000000 --- a/files/pt-pt/web/css/background-repeat/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: background-repeat -slug: Web/CSS/background-repeat -tags: - - Referencia_CSS -translation_of: Web/CSS/background-repeat ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p><code>background-repeat</code> specifies whether the image is repeated (tiled), and how.</p> - -<ul> - <li>Valor inicial: repeat</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: não</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li> - <li>Valor computado: como especificado</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>repeat</dt> - <dd>A imagem é repetida vertical e horizontalmente.</dd> - <dt>repeat-x</dt> - <dd>A imagem é repetida somente horizontalmente.</dd> - <dt>repeat-y</dt> - <dd>A imagem é repetida somente verticalmente.</dd> - <dt>no-repeat</dt> - <dd>A imagem não é repetida: somente uma cópia da imagem é desenhada.</dd> -</dl> - - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><ol> - <li>no-repeat - <div class="one">&nbsp;</div> - </li> - <li>repeat - <div class="two">&nbsp;</div> - </li> - <li>repeat-x - <div class="three">&nbsp;</div> - </li> - <li>repeat-y - <div class="four">&nbsp;</div> - </li> - <li>repeat-x, repeat-y (multiple images) - <div class="five">&nbsp;</div> - </li> -</ol></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">/* Shared for all DIVS in example */ -li {margin-bottom: 12px;} -div { - background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); - width: 144px; - height: 84px; -} - -/* background repeat CSS */ -.one { - background-repeat: no-repeat; -} -.two { - background-repeat: repeat; -} -.three { - background-repeat: repeat-x; -} -.four { - background-repeat: repeat-y; -} - -/* Multiple images */ -.five { - background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), - url(https://developer.mozilla.org/static/img/favicon32.png); - background-repeat: repeat-x, - repeat-y; - height: 144px; -}</pre> - -<h3 id="Result">Result</h3> - -<p>In this example, each list item is matched with a different value of <code>background-repeat</code>.</p> - -<p>{{EmbedLiveSample('Exemplos', 240, 360)}}</p> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Firefox</td> - <td>1</td> - </tr> - <tr> - <td>Netscape</td> - <td>4</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/background-repeat", "fr": "fr/CSS/background-repeat", "pl": "pl/CSS/background-repeat" } ) }}</p> diff --git a/files/pt-pt/web/css/background/index.html b/files/pt-pt/web/css/background/index.html deleted file mode 100644 index 3118d1b239..0000000000 --- a/files/pt-pt/web/css/background/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: background -slug: Web/CSS/background -tags: - - Referencia_CSS -translation_of: Web/CSS/background ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Introdu.C3.A7.C3.A3o" name="Introdu.C3.A7.C3.A3o">Introdução</h3> - -<p>A propriedade <code>background</code> é usada para ajustar os valores do fundo em um único lugar na folha de estilos. <code>background</code> pode ser usada com os seguintes valores adicionais: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}.</p> - -<ul> - <li>Valor inicial: veja as propriedades individuais para detalhes;</li> - <li>Aplica-se a: todos os elementos;</li> - <li>Herdado: não;</li> - <li>Porcentagens: reservado para {{ Cssxref("background-position") }};</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">Visual</a>;</li> - <li>Valor computado: veja as propriedades individuais para detalhes.</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">background: [<em>background-color</em> ||<em>background-image</em> ||<em>background-repeat</em> ||<em>background-attachment</em> ||<em>background-position</em>] |<em>inherit</em>] -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>background-color</dt> - <dd>Veja <code><a href="pt/CSS/background-color">background-color</a></code>.</dd> - <dt>background-image </dt> - <dd>Veja <code><a href="pt/CSS/background-image">background-image</a></code>.</dd> - <dt>background-repeat </dt> - <dd>Veja <code><a href="pt/CSS/background-repeat">background-repeat</a></code>.</dd> - <dt>background-attachment </dt> - <dd>Veja <code><a href="pt/CSS/background-attachment">background-attachment</a></code>.</dd> - <dt>background-position </dt> - <dd>Veja <code><a href="pt/CSS/background-position">background-position</a></code>.</dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p class="topbanner"> - Starry sky<br/> - Twinkle twinkle<br/> - Starry sky -</p> -<p class="warning">Here is a paragraph<p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush:css' highlight:[2,6];">.warning { - background: red; -} - -.topbanner { - background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; -} -</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Exemplos")}}</p> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>Sendo uma declaração válida, a propriedade <code>background</code> ajusta primeiramente o background (fundo) individual para seus valores iniciais, e depois, atribui então os valores especificados na declaração. Você não precisa definir um valor para cada uma das propriedades, apenas para aquelas que você deseja alterar os valores padrões.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#background">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background">CSS 3</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Firefox</td> - <td>1</td> - </tr> - <tr> - <td>Netscape</td> - <td>6</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> - -<p><br> - <span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/background", "fr": "fr/CSS/background", "pl": "pl/CSS/background" } ) }}</p> diff --git a/files/pt-pt/web/css/border-bottom-color/index.html b/files/pt-pt/web/css/border-bottom-color/index.html deleted file mode 100644 index 0a6c79941e..0000000000 --- a/files/pt-pt/web/css/border-bottom-color/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: border-bottom-color -slug: Web/CSS/border-bottom-color -tags: - - Referencia_CSS -translation_of: Web/CSS/border-bottom-color ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p><code>border-bottom-color</code> configura a cor da borda inferior de um elemento, com o nome da cor ou a palavra-chave <code>transparent</code>.</p> - -<ul> - <li>Valor inicial: propriedade 'color'</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: não</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li> - <li>Valor computado: quando pego da propriedade 'color', o valor computado de 'color'; caso contrário, como especificado</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">border-bottom-color:<em>color</em> | transparent | inherit -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>color </dt> - <dd>A cor pode ser especificada como um valor RGB hexadecimal, um valor RGB regular ou usando uma das palavras-chave de cor pré-definidas.</dd> - <dt>transparent </dt> - <dd>O elemento não tem cor própria, dessa forma exibe a cor do elemento que fica atrás dele.</dd> -</dl> - -<h3 id="Propriedades_relacionadas" name="Propriedades_relacionadas">Propriedades relacionadas</h3> - -<ul> - <li>{{ Cssxref("border-color") }}</li> - <li>{{ Cssxref("border-left-color") }}</li> - <li>{{ Cssxref("border-right-color") }}</li> - <li>{{ Cssxref("border-top-color") }}</li> -</ul> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/border.html">View Live Examples</a></p> - -<pre>element { - width: 300px; - padding: 15px; - border-bottom-size: 1px; - border-bottom-style: solid; - border-bottom-color: #000; -} - -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<ul> - <li><a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a></li> -</ul> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-color">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-bottom">CSS 3</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Firefox</td> - <td>1</td> - </tr> - <tr> - <td>Netscape</td> - <td>6</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }},</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/border-bottom-color", "fr": "fr/CSS/border-bottom-color", "pl": "pl/CSS/border-bottom-color" } ) }}</p> diff --git a/files/pt-pt/web/css/border-bottom-style/index.html b/files/pt-pt/web/css/border-bottom-style/index.html deleted file mode 100644 index be873908d9..0000000000 --- a/files/pt-pt/web/css/border-bottom-style/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: border-bottom-style -slug: Web/CSS/border-bottom-style -tags: - - Referencia_CSS -translation_of: Web/CSS/border-bottom-style ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p><code>border-bottom-style</code> configura o estilo da linha da borda inferior de uma caixa.</p> - -<ul> - <li>Valor inicial: none</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: não</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li> - <li>Valor computado: como especificado</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">border-bottom-style: <border-style> | inherit -</pre> - -<h3 id=".3Cborder-style.3E_Valores" name=".3Cborder-style.3E_Valores"><border-style> Valores</h3> - -<dl> - <dt>none </dt> - <dd>Sem borda.</dd> - <dt>hidden </dt> - <dd>O mesmo que 'none', exceto em termos de conflitos na resolução de bordas para elementos de tabela.</dd> - <dt>dotted </dt> - <dd>Série de pontos.</dd> - <dt>dashed </dt> - <dd>Série de traços ou segmentos de linha.</dd> - <dt>solid </dt> - <dd>Simples, reto, linha contínua.</dd> - <dt>double </dt> - <dd>Duas linhas retas que adicionam uma quantidade de pixels definida por <code>border-width</code>.</dd> - <dt>groove </dt> - <dd>Efeito entalhado.</dd> - <dt>ridge </dt> - <dd>Contrário de 'groove'.</dd> - <dt>inset </dt> - <dd>Faz a caixa aparecer em baixo relevo.</dd> - <dt>outset </dt> - <dd>Contrário de 'inset'. Faz a caixa aparecer em alto relevo.</dd> -</dl> - -<h3 id="Propriedades_relacionadas" name="Propriedades_relacionadas">Propriedades relacionadas</h3> - -<ul> - <li>{{ Cssxref("border-left-style") }}</li> - <li>{{ Cssxref("border-right-style") }}</li> - <li>{{ Cssxref("border-top-style") }}</li> - <li>{{ Cssxref("border-style") }}</li> -</ul> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/border.html">View Live Examples</a></p> - -<pre>element { - border-bottom-size: 1px; - border-bottom-style: dotted; - border-bottom-color: #000; -} -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>A menos que seja configurado um valor para <code>border-style</code>, sua borda não aparecerá, pois o valor padrão configurado é 'none'.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-style">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-style">CSS 3</a></li> -</ul> - -<p><span class="comment">== Compatibilidade com navegadores ==</span></p> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-width") }},</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/border-bottom-style", "fr": "fr/CSS/border-bottom-style", "pl": "pl/CSS/border-bottom-style" } ) }}</p> diff --git a/files/pt-pt/web/css/border-bottom-width/index.html b/files/pt-pt/web/css/border-bottom-width/index.html deleted file mode 100644 index 299636a962..0000000000 --- a/files/pt-pt/web/css/border-bottom-width/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: border-bottom-width -slug: Web/CSS/border-bottom-width -tags: - - Referencia_CSS -translation_of: Web/CSS/border-bottom-width ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p><code>border-bottom-width</code> configura a largura da borda inferior de uma caixa.</p> - -<ul> - <li>Valor inicial: medium</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: não</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li> - <li>Valor computado: comprimento absoluto; '0' se o estilo da borda for 'none' ou 'hidden'</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">border-bottom-width: <border-width> | inherit -</pre> - -<h3 id="Valores_de_.3Cborder-width.3E" name="Valores_de_.3Cborder-width.3E">Valores de <border-width></h3> - -<dl> - <dt>thin </dt> - <dd>Uma borda fina.</dd> - <dt>medium </dt> - <dd>Uma borda média.</dd> - <dt>thick </dt> - <dd>Uma borda grossa.</dd> - <dt><length> </dt> - <dd>A espessura da borda tem um valor explícito. Valores explícitos de borda não podem ser negativos.</dd> - <dt><percentage> </dt> - <dd>A espessura da borda tem um valor em porcentagem, porcentagens da largura do bloco em que está contida. Larguras explícitas de borda não podem ser negativos.</dd> -</dl> - -<p>Nota: Um valor <code>em</code> também é suportado.</p> - -<h3 id="Propriedades_relacionadas" name="Propriedades_relacionadas">Propriedades relacionadas</h3> - -<ul> - <li>{{ Cssxref("border-left-width") }}</li> - <li>{{ Cssxref("border-right-width") }}</li> - <li>{{ Cssxref("border-top-width") }}</li> - <li>{{ Cssxref("border-width") }}</li> -</ul> - -<p> </p> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/border.html">View Live Examples</a></p> - -<pre>element { - border-bottom-width: thin; - border-bottom-style: solid; - border-bottom-color: #000; -} -</pre> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#border-width">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width">CSS 3</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td> </td> - </tr> - <tr> - <td>Firefox</td> - <td> </td> - </tr> - <tr> - <td>Netscape</td> - <td> </td> - </tr> - <tr> - <td>Opera</td> - <td> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/border-bottom-width", "fr": "fr/CSS/border-bottom-width", "pl": "pl/CSS/border-bottom-width" } ) }}</p> diff --git a/files/pt-pt/web/css/border-bottom/index.html b/files/pt-pt/web/css/border-bottom/index.html deleted file mode 100644 index 08da201a5f..0000000000 --- a/files/pt-pt/web/css/border-bottom/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: border-bottom -slug: Web/CSS/border-bottom -tags: - - Referencia_CSS -translation_of: Web/CSS/border-bottom ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>A propriedade <code>border-bottom</code> é uma propriedade<em>shorthand</em> que configura os valores de {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }} e {{ Cssxref("border-bottom-width") }}. Estas propriedades descrevem a borda inferior de elementos.</p> - -<ul> - <li>Valor inicial: veja as propriedades individuais para detalhes</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: não</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li> - <li>Valor computado: ver propriedades individuais</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">border-bottom: [ <border-width> || <border-style> || <border-color> ] |<em>inherit</em> -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt><border-width> </dt> - <dd>Veja {{ Cssxref("border-bottom-width") }}.</dd> - <dt><border-style> </dt> - <dd>Veja {{ Cssxref("border-bottom-style") }}.</dd> - <dt><border-color> </dt> - <dd>Veja {{ Cssxref("border-bottom-color") }}.</dd> -</dl> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/border.html">View Live Examples</a></p> - -<pre>element { - border-bottom-width: 1px solid #000; -} -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>Os três valores da propriedade<em>shorthand</em> podem ser especificados em qualquer ordem e um ou dois deles podem ser omitidos.</p> - -<p>Como com todas as propriedades<em>shorthand</em>, <code>border-bottom</code> sempre configura os valores de todas as propriedades que ele pode configurar, ainda que elas não sejam especificadas. Ele configura as que não especificadas para os seus valores padrão. De maneira que:</p> - -<pre> border-bottom-style: dotted; - border-bottom: thick green;</pre> - -<p>é realmente o mesmo que</p> - -<pre> border-bottom-style: dotted; - border-bottom: none thick green;</pre> - -<p>e o valor de {{ Cssxref("border-bottom-style") }} dado antes <code>border-bottom</code> é ignorado.</p> - -<p>Desde que o valor padrão de {{ Cssxref("border-bottom-style") }} seja <code>none</code>, não especificar o <border-style> torna o valor, o mesmo que a propriedade especifica na borda.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#border-bottom">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Firefox</td> - <td>1</td> - </tr> - <tr> - <td>Netscape</td> - <td>4</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }}</p> diff --git a/files/pt-pt/web/css/border-collapse/index.html b/files/pt-pt/web/css/border-collapse/index.html deleted file mode 100644 index 0f1acaaf50..0000000000 --- a/files/pt-pt/web/css/border-collapse/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: border-collapse -slug: Web/CSS/border-collapse -tags: - - Referencia_CSS -translation_of: Web/CSS/border-collapse ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>The border-collapse property is used to make the border collapse. This has a big influence on the look and style of the table cells. The rendering of table borders is divided into two categories in CSS2 - "collapsed" and "separated". This property specifies which border rendering mode to use. In the collapsed border model, adjacent table cells share borders. In the separated model, adjacent cells each have their own distinct borders (the distance between them given by the 'border-spacing' property.)</p> - -<ul> - <li>Valor inicial: separate</li> - <li>Herdado: sim</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">Visual</a></li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">border-collapse: value -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<ul> - <li><strong>inherit</strong> : Explicitly sets the value of this property to that of the parent.</li> - <li><strong>separate</strong> : Use the "separated borders" rendering model</li> - <li><strong>collapse</strong> : Use the "collapsed borders" rendering model</li> -</ul> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/border-collapse.html">View Live Examples</a></p> - -<pre><table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500"> -</pre> - -<pre><table border="1" style="border-collapse: separate" bordercolor="#111111" width="500"> -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>In the "collapsed border" rendering model, the 'border-style' value of "inset" behaves like "groove", and "outset" behaves like "ridge." CSS2 specifies that the initial value for this property is "collapse", but CSS2.1 and Mozilla/Opera all state or behave such that the initial value is "separate."</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS 3</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>5.5</td> - </tr> - <tr> - <td>Netscape</td> - <td>7</td> - </tr> - <tr> - <td>Opera</td> - <td>5</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("border-collapse") }}, {{ Cssxref("border-spacing") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse" } ) }}</p> diff --git a/files/pt-pt/web/css/border-color/index.html b/files/pt-pt/web/css/border-color/index.html deleted file mode 100644 index e97253bd58..0000000000 --- a/files/pt-pt/web/css/border-color/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: border-color -slug: Web/CSS/border-color -tags: - - Referencia_CSS -translation_of: Web/CSS/border-color ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>A propriedade <code>border-color</code> é muito útil para ajustar a cor dos quatro lados da borda do elemento.</p> - -<ul> - <li>Valor inicial: os elementos da propriedade {{ Cssxref("color") }}</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: não</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="/pt/CSS/Media/Visual" title="pt/CSS/Media/Visual">visual</a></li> - <li>Valor computado: O valor computado de <code>color</code> por padrão, ou como especificado.</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">border-color: [ <color> || transparent ]{1,4} | <em>inherit</em> -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt><color> </dt> - <dd>A cor pode ser especificada como um valor RGB hexadecimal, um valor RGB regular ou usando uma das palavras-chave de cores pré-definidas.</dd> -</dl> - -<dl> - <dt>transparent </dt> - <dd>A borda não é desenhada, mas ainda continua ocupando espaço na página.</dd> -</dl> - -<p>Até quatro valores podem ser fornecidos;</p> - -<p>Se um valor de cor é fornecido, então todas as quatros bordas ficam daquela cor.<br> - Se dois valores são fornecidos, as bordas inferior e superior utilizam-se do primeiro valor e as esquerda e direita do segundo valor.<br> - Se três valores são fornecidos, o primeiro é para a borda superior, o segundo para a esquerda e direita e o terceiro para a inferior.<br> - Se quatro valores são dados, o primeiro é para a borda superior, o segundo para a direita, o terceiro para a inferior e o quarto para a esquerda.</p> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/border.html">View Live Examples</a></p> - -<pre>element { - border-width: 1px; - border-style: solid; - border-color: black; -} -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>No caso de querer ver a borda, você deve ajustar o {{ Cssxref("border-width") }} para um valor positivo e o {{ Cssxref("border-style") }} para algo visível.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#border-color">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-color">CSS 3</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Firefox</td> - <td>1</td> - </tr> - <tr> - <td>Netscape</td> - <td>4</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Extens.C3.B5es_Mozilla" name="Extens.C3.B5es_Mozilla">Extensões Mozilla</h3> - -<p>As seguintes Extensões da Mozilla ajustam os respectivos lados da borda para múltiplas cores para navegadores Gecko.</p> - -<ul> - <li>{{ Cssxref("-moz-border-bottom-colors") }}</li> - <li>{{ Cssxref("-moz-border-left-colors") }}</li> - <li>{{ Cssxref("-moz-border-right-colors") }}</li> - <li>{{ Cssxref("-moz-border-top-colors") }}</li> -</ul> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/border-color", "fr": "fr/CSS/border-color", "pl": "pl/CSS/border-color" } ) }}</p> diff --git a/files/pt-pt/web/css/border-left-color/index.html b/files/pt-pt/web/css/border-left-color/index.html deleted file mode 100644 index f358f01aa0..0000000000 --- a/files/pt-pt/web/css/border-left-color/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: border-left-color -slug: Web/CSS/border-left-color -tags: - - Referencia_CSS -translation_of: Web/CSS/border-left-color ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p><code>border-left-color</code> configura a cor da borda esquerda de um elemento. -</p><p>Veja a propriedade <code><a href="pt/CSS/border-bottom-color">border-bottom-color</a></code> para mais informações. -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-left-color", "fr": "fr/CSS/border-left-color", "pl": "pl/CSS/border-left-color" } ) }} diff --git a/files/pt-pt/web/css/border-left-style/index.html b/files/pt-pt/web/css/border-left-style/index.html deleted file mode 100644 index f482151b58..0000000000 --- a/files/pt-pt/web/css/border-left-style/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: border-left-style -slug: Web/CSS/border-left-style -tags: - - Referencia_CSS -translation_of: Web/CSS/border-left-style ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p><code>border-left-style</code> configura o estilo da linha da borda esquerda de uma caixa. -</p><p>Veja a propriedade <code><a href="pt/CSS/border-bottom-style">border-bottom-style</a></code> para mais informações. -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-left-style", "fr": "fr/CSS/border-left-style" } ) }} diff --git a/files/pt-pt/web/css/border-left-width/index.html b/files/pt-pt/web/css/border-left-width/index.html deleted file mode 100644 index caf87d5d71..0000000000 --- a/files/pt-pt/web/css/border-left-width/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: border-left-width -slug: Web/CSS/border-left-width -tags: - - Referencia_CSS -translation_of: Web/CSS/border-left-width ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p><code>border-left-width</code> configura a largura da borda esquerda de um elemento. -</p><p>Veja a propriedade <code><a href="pt/CSS/border-bottom-width">border-bottom-width</a></code> para mais informações. -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-left-width", "fr": "fr/CSS/border-left-width" } ) }} diff --git a/files/pt-pt/web/css/border-left/index.html b/files/pt-pt/web/css/border-left/index.html deleted file mode 100644 index e0cd0e9f6f..0000000000 --- a/files/pt-pt/web/css/border-left/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: border-left -slug: Web/CSS/border-left -tags: - - Referencia_CSS -translation_of: Web/CSS/border-left ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p>A propriedade <code>border-left</code> é uma propriedade <i>shorthand</i> para configurar a largura, estilo e cor da borda esquerda de uma caixa. Esta propriedade pode ser usada para configurar um ou mais valores de {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }} e {{ Cssxref("border-left-color") }}. Valores omitidos são configurados com o valor inicial. -</p> -<ul><li> Valor inicial: veja as propriedades individuais para detalhes -</li><li> Aplica-se a: todos os elementos -</li><li> Herdado: não -</li><li> Porcentagens: N/A -</li><li> Mídia: <a href="pt/CSS/Media/Visual">visual</a> -</li><li> Valor computado: veja propriedades individuais -</li></ul> -<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3> -<pre class="eval">border-left: [<i>border-width</i> || <i>border-style</i> || <i>border-color</i> | <i>inherit</i>] ; -</pre> -<h3 id="Valores" name="Valores"> Valores </h3> -<dl><dt> border-width </dt><dd> Veja {{ Cssxref("border-width") }}. -</dd><dt> border-style </dt><dd> Veja {{ Cssxref("border-style") }}. -</dd><dt> border-color </dt><dd> Veja {{ Cssxref("border-color") }}. -</dd></dl> -<h3 id="Exemplos" name="Exemplos"> Exemplos </h3> -<pre>element { - border-left: 1px solid #000; -} -</pre> -<h3 id="Notas" name="Notas"> Notas </h3> -<p>Se a regra não especificar uma cor de borda, a borda terá a cor especificada pela propriedade {{ Cssxref("color") }}. -</p> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es"> Especificações </h3> -<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#border-left">CSS 1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left">CSS 2.1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a> -</li></ul> -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores"> Compatibilidade com navegadores </h3> -<table class="standard-table"> <tbody><tr> <th>Navegador</th> <th>Versão mais antiga</th> </tr> <tr> <td>Internet Explorer</td> <td>4</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>4</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> -</tbody></table> -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m"> Veja também </h3> -<p>{{ Cssxref("border") }}, -{{ Cssxref("border-left") }} -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-left", "fr": "fr/CSS/border-left", "pl": "pl/CSS/border-left" } ) }} diff --git a/files/pt-pt/web/css/border-right-color/index.html b/files/pt-pt/web/css/border-right-color/index.html deleted file mode 100644 index 9a58ad9d69..0000000000 --- a/files/pt-pt/web/css/border-right-color/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: border-right-color -slug: Web/CSS/border-right-color -tags: - - Referencia_CSS -translation_of: Web/CSS/border-right-color ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p><code>border-right-color</code> configura a cor da borda direita de um elemento. -</p><p>Veja a propriedade <code><a href="pt/CSS/border-bottom-color">border-bottom-color</a></code> para mais informações. -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-right-color", "fr": "fr/CSS/border-right-color", "pl": "pl/CSS/border-right-color" } ) }} diff --git a/files/pt-pt/web/css/border-right-style/index.html b/files/pt-pt/web/css/border-right-style/index.html deleted file mode 100644 index 0aa34c58bd..0000000000 --- a/files/pt-pt/web/css/border-right-style/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: border-right-style -slug: Web/CSS/border-right-style -tags: - - Referencia_CSS -translation_of: Web/CSS/border-right-style ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p><code>border-right-style</code> configura o estilo da linha da borda direita de uma caixa. -</p><p>Veja a propriedade <code><a href="pt/CSS/border-bottom-style">border-bottom-style</a></code> para mais informações. -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-right-style", "fr": "fr/CSS/border-right-style" } ) }} diff --git a/files/pt-pt/web/css/border-right-width/index.html b/files/pt-pt/web/css/border-right-width/index.html deleted file mode 100644 index 60840f3117..0000000000 --- a/files/pt-pt/web/css/border-right-width/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: border-right-width -slug: Web/CSS/border-right-width -tags: - - Referencia_CSS -translation_of: Web/CSS/border-right-width ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p><code>border-right-width</code> configura a largura da borda direita de uma caixa. -</p><p>Veja a propriedade <code><a href="pt/CSS/border-bottom-width">border-bottom-width</a></code> para mais informações. -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-right-width", "fr": "fr/CSS/border-right-width" } ) }} diff --git a/files/pt-pt/web/css/border-right/index.html b/files/pt-pt/web/css/border-right/index.html deleted file mode 100644 index 964e932736..0000000000 --- a/files/pt-pt/web/css/border-right/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: border-right -slug: Web/CSS/border-right -tags: - - Referencia_CSS -translation_of: Web/CSS/border-right ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p>A propriedade <code>border-right</code> é uma propriedade <i>shorthand</i> para configurar a largura, estilo e cor da borda esquerda de uma caixa. Esta propriedade pode ser usada para configurar um ou mais valores de {{ Cssxref("border-right-width") }}, {{ Cssxref("border-right-style") }} e {{ Cssxref("border-right-color") }}. Valores omitidos são configurados com o valor inicial. -</p> -<ul><li> Valor inicial: veja as propriedades individuais para detalhes -</li><li> Aplica-se a: todos os elementos -</li><li> Herdado: não -</li><li> Porcentagens: N/A -</li><li> Mídia: <a href="pt/CSS/Media/Visual">visual</a> -</li><li> Valor computado: veja as propriedades individuais -</li></ul> -<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3> -<pre class="eval">border-right: [<i>border-width</i> || <i>border-style</i> || <i>border-color</i> | <i>inherit</i>] ; -</pre> -<h3 id="Valores" name="Valores"> Valores </h3> -<dl><dt> border-width </dt><dd> Veja {{ Cssxref("border-width") }}. -</dd><dt> border-style </dt><dd> Veja {{ Cssxref("border-style") }}. -</dd><dt> border-color </dt><dd> Veja {{ Cssxref("border-color") }}. -</dd></dl> -<h3 id="Exemplos" name="Exemplos"> Exemplos </h3> -<pre>element { - border-right: 1px solid #000; -} -</pre> -<h3 id="Notas" name="Notas"> Notas </h3> -<p>Se a regra não especificar uma cor de borda, a borda terá a cor especificada pela propriedade {{ Cssxref("color") }}. -</p> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es"> Especificações </h3> -<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#border-right">CSS 1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right">CSS 2.1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a> -</li></ul> -<p><span class="comment">== Compatibilidade com navegadores ==</span> -</p> -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m"> Veja também </h3> -<p>{{ Cssxref("border") }}, -{{ Cssxref("border-right") }} -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-right", "fr": "fr/CSS/border-right", "pl": "pl/CSS/border-right" } ) }} diff --git a/files/pt-pt/web/css/border-spacing/index.html b/files/pt-pt/web/css/border-spacing/index.html deleted file mode 100644 index 36747dc64d..0000000000 --- a/files/pt-pt/web/css/border-spacing/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: border-spacing -slug: Web/CSS/border-spacing -tags: - - Referencia_CSS -translation_of: Web/CSS/border-spacing ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>The border-spacing property specifies the distance between the borders of adjacent cells (only for the <a href="pt/CSS/border-collapse">separated borders model</a>). This is equivalent to the cellspacing attribute in presentational HTML.</p> - -<ul> - <li>Valor inicial: 0</li> - <li>Aplica-se a: tabelas e tabelas em linha</li> - <li>Herdado: sim</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">Visual</a></li> - <li>Valor computado: dois comprimentos absolutos</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<p>border-spacing: <length> | <length> <length> | inherit</p> - -<h3 id="Valores" name="Valores">Valores</h3> - -<ul> - <li><strong><length></strong> : A length to be used for both horizontal and vertical border spacing.</li> - <li><strong><length> <length></strong> : The first length gives the horizontal spacing (space between cells in adjacent columns) and the second length gives the vertical spacing (space between cells in adjacent rows).</li> -</ul> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/border-spacing.html">View Live Examples</a></p> - -<pre>table#space { - border-collapse: separate; - border-spacing: 10px 5px; -} -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>This property applies only when {{ Cssxref("border-collapse") }} is "separate".</p> - -<p>The border-spacing is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing">CSS 2.1</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Netscape</td> - <td>6</td> - </tr> - <tr> - <td>Internet Explorer</td> - <td>7</td> - </tr> - <tr> - <td>Firefox</td> - <td>1</td> - </tr> - <tr> - <td>Mozilla</td> - <td>1</td> - </tr> - <tr> - <td>Safari</td> - <td>1</td> - </tr> - <tr> - <td>Opera</td> - <td>6</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("border-collapse") }}, {{ Cssxref("border-spacing") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/border-spacing", "fr": "fr/CSS/border-spacing" } ) }}</p> diff --git a/files/pt-pt/web/css/border-top-color/index.html b/files/pt-pt/web/css/border-top-color/index.html deleted file mode 100644 index 5df05465a6..0000000000 --- a/files/pt-pt/web/css/border-top-color/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: border-top-color -slug: Web/CSS/border-top-color -tags: - - Referencia_CSS -translation_of: Web/CSS/border-top-color ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p><code>border-top-color</code> configura a cor da borda superior de um elemento. -</p><p>Veja a propriedade <code><a href="pt/CSS/border-bottom-color">border-bottom-color</a></code> para mais informações. -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-top-color", "fr": "fr/CSS/border-top-color" } ) }} diff --git a/files/pt-pt/web/css/border-top-style/index.html b/files/pt-pt/web/css/border-top-style/index.html deleted file mode 100644 index b5132d5a35..0000000000 --- a/files/pt-pt/web/css/border-top-style/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: border-top-style -slug: Web/CSS/border-top-style -tags: - - Referencia_CSS -translation_of: Web/CSS/border-top-style ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p><code>border-top-style</code> configura o estilo da linha da borda superior de uma caixa. -</p><p>Veja a propriedade <code><a href="pt/CSS/border-bottom-style">border-bottom-style</a></code> para mais informações. -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-top-style", "fr": "fr/CSS/border-top-style" } ) }} diff --git a/files/pt-pt/web/css/border-top-width/index.html b/files/pt-pt/web/css/border-top-width/index.html deleted file mode 100644 index 45fcd9b374..0000000000 --- a/files/pt-pt/web/css/border-top-width/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: border-top-width -slug: Web/CSS/border-top-width -tags: - - Referencia_CSS -translation_of: Web/CSS/border-top-width ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p><code>border-top-width</code> configura a largura da borda superiror de uma caixa. -</p><p>Veja a propriedade <code><a href="pt/CSS/border-bottom-width">border-bottom-width</a></code> para mais informações. -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-top-width", "fr": "fr/CSS/border-top-width" } ) }} diff --git a/files/pt-pt/web/css/border-top/index.html b/files/pt-pt/web/css/border-top/index.html deleted file mode 100644 index d284e0bc7a..0000000000 --- a/files/pt-pt/web/css/border-top/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: border-top -slug: Web/CSS/border-top -tags: - - Referencia_CSS -translation_of: Web/CSS/border-top ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p>A propriedade <code>border-top</code> é uma propriedade <i>shorthand</i> para configurar a largura, estilo e cor da borda esquerda de uma caixa. Esta propriedade pode ser usada para configurar um ou mais valores de {{ Cssxref("border-top-width") }}, {{ Cssxref("border-top-style") }} e {{ Cssxref("border-top-color") }}. Valores omitidos são configurados com o falor inicial. -</p> -<ul><li> Valor inicial: veja as propriedades individuais para detalhes -</li><li> Aplica-se a: todos os elementos -</li><li> Herdado: não -</li><li> Porcentagens: N/A -</li><li> Mídia: <a href="pt/CSS/Media/Visual">visual</a> -</li><li> Valor computado: veja as propriedades individuais -</li></ul> -<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3> -<pre class="eval">border-top: [<i>border-width</i> || <i>border-style</i> || <i>border-color</i> | <i>inherit</i>] ; -</pre> -<h3 id="Valores" name="Valores"> Valores </h3> -<dl><dt> border-width </dt><dd> Veja {{ Cssxref("border-width") }}. -</dd><dt> border-style </dt><dd> Veja {{ Cssxref("border-style") }}. -</dd><dt> border-color </dt><dd> Veja {{ Cssxref("border-color") }}. -</dd></dl> -<h3 id="Exemplos" name="Exemplos"> Exemplos </h3> -<pre>element { - border-top: 1px solid #000; -} -</pre> -<h3 id="Notas" name="Notas"> Notas </h3> -<p>Se a regra não especificar uma cor de borda, a borda terá a cor especificada pela propriedade {{ Cssxref("color") }}. -</p> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es"> Especificações </h3> -<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#border-top">CSS 1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top">CSS 2.1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a> -</li></ul> -<p><span class="comment">== Compatibilidade com navegadores ==</span> -</p> -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m"> Veja também </h3> -<p>{{ Cssxref("border") }}, -{{ Cssxref("border-top") }} -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border-top", "fr": "fr/CSS/border-top", "pl": "pl/CSS/border-top" } ) }} diff --git a/files/pt-pt/web/css/border-width/index.html b/files/pt-pt/web/css/border-width/index.html deleted file mode 100644 index c3cd9915f2..0000000000 --- a/files/pt-pt/web/css/border-width/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: border-width -slug: Web/CSS/border-width -tags: - - Referencia_CSS -translation_of: Web/CSS/border-width ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p><code>border-width</code> configura a largura da borda de uma caixa.</p> - -<ul> - <li>Valor inicial: medium</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: não</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li> - <li>Valor computado: comprimento absoluto; '0' se o estilo da borda for 'none' ou 'hidden'</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval">border-width: <border-width> {1,4} | inherit -</pre> - -<h3 id="Valores_de_.3Cborder-width.3E" name="Valores_de_.3Cborder-width.3E">Valores de <border-width></h3> - -<dl> - <dt>thin </dt> - <dd>Uma borda fina.</dd> - <dt>medium </dt> - <dd>Uma borda média.</dd> - <dt>thick </dt> - <dd>Uma borda grossa.</dd> - <dt><length> </dt> - <dd>A espessura da borda tem um valor explícito. Valores explícitos de borda não podem ser negativos.</dd> - <dt><percentage> </dt> - <dd>A espessura da borda tem um valor em porcentagem, porcentagens da largura do bloco em que está contida. Larguras explícitas de borda não podem ser negativos.</dd> -</dl> - -<p>Nota: Um valor <code>em</code> também é suportado.</p> - -<h3 id="Propriedades_relacionadas" name="Propriedades_relacionadas">Propriedades relacionadas</h3> - -<ul> - <li>{{ Cssxref("border-bottom-width") }}</li> - <li>{{ Cssxref("border-left-width") }}</li> - <li>{{ Cssxref("border-right-width") }}</li> - <li>{{ Cssxref("border-top-width") }}</li> -</ul> - -<p> </p> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/border.html">View Live Examples</a></p> - -<pre>element { - border-width: thin; - border-style: solid; - border-color: #000; -} -</pre> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#border-width">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width">CSS 3</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td> </td> - </tr> - <tr> - <td>Firefox</td> - <td> </td> - </tr> - <tr> - <td>Netscape</td> - <td> </td> - </tr> - <tr> - <td>Opera</td> - <td> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/border-width", "fr": "fr/CSS/border-width" } ) }}</p> diff --git a/files/pt-pt/web/css/border/index.html b/files/pt-pt/web/css/border/index.html deleted file mode 100644 index 7110cc6c8d..0000000000 --- a/files/pt-pt/web/css/border/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: border -slug: Web/CSS/border -tags: - - Referencia_CSS -translation_of: Web/CSS/border ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p>A propriedade <code>border</code> é uma propriedade para ajustar os valores de propriedades individuais da borda em um único elemento na folha do estilo. <code>border</code> pode ser usado com as seguintes propriedades adicionais: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}. -</p> -<ul><li> Valor inicial: veja propriedades individuais para detalhes; -</li><li> Aplica-se a: todos elementos; -</li><li> Herdado: não; -</li><li> Porcentagem: N/A; -</li><li> Mídia: <a href="pt/CSS/Media/Visual">visual</a>; -</li><li> Valor computado: veja propriedades individuais para detalhes. -</li></ul> -<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3> -<pre class="eval">border: [<i>border-width</i> || <i>border-style</i> || <i>border-color</i> | <i>inherit</i>] ; -</pre> -<h3 id="Valores" name="Valores"> Valores </h3> -<dl><dt> border-width</dt><dd> Ver {{ Cssxref("border-width") }}. -</dd><dt> border-style </dt><dd> Ver {{ Cssxref("border-style") }}. -</dd><dt> border-color </dt><dd> Ver {{ Cssxref("border-color") }}. -</dd></dl> -<h3 id="Exemplos" name="Exemplos"> Exemplos </h3> -<p><a class="external" href="http://developer.mozilla.org/samples/cssref/border.html">Exemplos</a> -</p> -<pre>elemento { - border: 1px solid #000; -} -</pre> -<h3 id="Notas" name="Notas"> Notas </h3> -<p>Quando as propriedades {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, e {{ Cssxref("border-color") }} aceitarem acima de quatro valores, esta propriedade aceitará somente um valor para cada propriedade. -</p> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es"> Especificações </h3> -<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#border">CSS 1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#box-border-area">CSS 2.1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a> -</li></ul> -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores"> Compatibilidade com navegadores </h3> -<table class="standard-table"> <tbody><tr> <th>Navegador</th> <th>Versões mais antigas</th> </tr> <tr> <td>Internet Explorer</td> <td>4</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>4</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> -</tbody></table> -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m"> Veja também </h3> -<p>{{ Cssxref("border") }} -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/border", "fr": "fr/CSS/border", "pl": "pl/CSS/border" } ) }} diff --git a/files/pt-pt/web/css/bottom/index.html b/files/pt-pt/web/css/bottom/index.html deleted file mode 100644 index 2aa2e1e2f7..0000000000 --- a/files/pt-pt/web/css/bottom/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: bottom -slug: Web/CSS/bottom -tags: - - Referencia_CSS -translation_of: Web/CSS/bottom ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p>The <code>bottom</code> property specifies part of the position of positioned elements. -</p><p>For absolutely positioned elements (those with <code>position: absolute</code> or <code>position: fixed</code>), it specifies the distance between the bottom margin edge of the element and the bottom edge of its containing block. -</p><p>For relatively positioned elements (those with <code>position: relative</code>), it specifies the amount the element is moved above its normal position. However, the {{ Cssxref("top") }} property overrides the bottom property, so if <code>top</code> is not <code>auto</code>, the computed value of <code>bottom</code> is the negative of the computed value of <code>top</code>. -</p> -<ul><li> Valor inicial: auto -</li><li> Aplica-se a: elementos posicionados -</li><li> Herdado: não -</li><li> Porcentagens: referente à altura do bloco que o contêm. -</li><li> Mídia: <a href="pt/CSS/Media/visual">visual</a> -</li><li> Valor computado: comprimento absoluto, porcentagem ou automático -</li></ul> -<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3> -<pre class="eval"> bottom: <length> | <percentage> | auto | inherit -</pre> -<h3 id="Valores" name="Valores"> Valores </h3> -<dl><dt> <length> </dt><dd> A length, used as described in the <a href="#Summary">summary</a>. Can be negative, zero, or positive. -</dd><dt> <percentage> </dt><dd> A percentage of the containing block's height, used as described in the <a href="#Summary">summary</a>. -</dd><dt> <code>auto</code> </dt><dd> For absolutely positioned elements, position the element based on the {{ Cssxref("top") }} property and treat <code>height: auto</code> as a height based on the content. For relatively positioned elements, offset the element from its original position based on the {{ Cssxref("top") }} property, or if <code>top</code> is also <code>auto</code>, do not offset it at all. -</dd><dt> <code>inherit</code> </dt><dd> Inherits the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a <length>, a <percentage>, or <code>auto</code> -</dd></dl> -<h3 id="Exemplos" name="Exemplos"> Exemplos </h3> -<pre>element { - position: absolute; - bottom: 20px; - height: 200px; - border: 1px solid #000; -} -</pre> -<p>The following sample page contrasts <code>position:absolute</code> and <code>position:fixed</code>. When the regular text becomes taller than the viewable portion of the page (the browser window's viewport), blocks positioned with <code>position:absolute</code> will scroll with the page, while blocks positioned with <code>position:fixed</code> will not. Note that IE6 does not support <code>position:fixed</code>. -</p> -<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" - "http://www.w3.org/TR/html4/strict.dtd"> -<html> -<head> -<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> -<title>Position at bottom, absolute or fixed</title> -<style type="text/css"> -p {font-size:30px; line-height:3em;} -div.pos {width:49%; text-align:center; border:2px solid #00f;} -div#abs {position:absolute; bottom:0; left:0;} -div#fix {position:fixed; bottom:0; right:0;} -</style> -</head> -<body> - <p>This<br>is<br>some<br>tall,<br>tall, - <br>tall,<br>tall,<br>tall<br>content.</p> - <div id="fix" class="pos"><p>Fixed</p></div> - <div id="abs" class="pos"><p>Absolute</p></div> -</body> -</html></pre> -<h3 id="Notas" name="Notas"> Notas </h3> -<p>For absolutely positioned elements whose containing block is based on a block-level element, this property is an offset from the padding edge of that element. -</p><p>For absolutely positioned elements, the <code>bottom</code> property has no visible effect when all of {{ Cssxref("top") }}, {{ Cssxref("height") }}, and {{ Cssxref("margin-top") }} are <i>not</i> <code>auto</code> (which is the default value for <code>top</code> and <code>height</code>). -</p> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es"> Especificações </h3> -<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom">CSS 2.1</a> -</li><li> <a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a> -</li></ul> -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores"> Compatibilidade com navegadores </h3> -<span class="comment">This is as far back as the documentaion goes.</span><table class="standard-table"> <tbody><tr> <th>Navegador</th> <th>Versão mais antiga</th> </tr> <tr> <td>Internet Explorer</td> <td>5</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>6</td> </tr> <tr> <td>Opera</td> <td>6</td> </tr> -</tbody></table> -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m"> Veja também </h3> -<p>{{ Cssxref("bottom") }}, -{{ Cssxref("position") }}, -{{ Cssxref("top") }}, -{{ Cssxref("left") }}, -{{ Cssxref("right") }} -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/bottom", "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom" } ) }} diff --git a/files/pt-pt/web/css/clear/index.html b/files/pt-pt/web/css/clear/index.html deleted file mode 100644 index 8fcfd728ca..0000000000 --- a/files/pt-pt/web/css/clear/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: clear -slug: Web/CSS/clear -tags: - - Referencia_CSS -translation_of: Web/CSS/clear ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>A propriedade<em>clear</em> especifica se um elemento deve ser posicionado ao lado dos elementos <a href="pt/CSS/float">flutuantes</a> ou se devem ser colocados abaixo deles, "forçando" os elementos com float para cima.</p> - -<ul> - <li>Valor inicial: nenhum;</li> - <li>Aplica-se a: elementos de bloco de nível (incluindo flutuantes);</li> - <li>Herdado: não;</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">Visual</a></li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<p>clear: none | left | right | both | <a href="pt/CSS/inherit">inherit</a></p> - -<h3 id="Valores" name="Valores">Valores</h3> - -<ul> - <li><strong>none</strong> : O elemento<em>não</em> é abaixado para o espaço livre após elementos flutuantes.</li> - <li><strong>left</strong> : O elemento é movido abaixo dos elementos que estão com float a<em>esquerda</em>.</li> - <li><strong>right</strong> : O elemento é movido abaixo dos elementos que estão com float a<em>direita</em>.</li> - <li><strong>both</strong> : O elemento é abaixado para o espaço livre após elementos flutuando à<em>esquerda</em> e à<em>direita</em>.<em>Both</em> signifca<em>Ambos</em>.</li> -</ul> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/clear.html">View Live Examples</a></p> - -<pre>h1 { clear: none } -h2 { clear: right }</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>The clear property applies to both floating and non-floating elements.</p> - -<p>When it applies to non-floating blocks, it moves the <a href="pt/CSS/box_edges">border edge</a> of the element down until it is below the <a href="pt/CSS/box_edges">margin edge</a> of all relevant floats. This movement (when it happens) causes <a href="pt/CSS/margin_collapsing">margin collapsing</a> not to occur.</p> - -<p>When it applies to floating elements, it moves the <a href="pt/CSS/box_edges">margin edge</a> of the element below the <a href="pt/CSS/box_edges">margin edge</a> of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.</p> - -<p>The floats that are relevant to be cleared are the earlier floats within the same <a href="pt/CSS/block_formatting_context">block formatting context</a>.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/REC-CSS1#clear">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear">CSS 2.1</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Firefox</td> - <td>1</td> - </tr> - <tr> - <td>Netscape</td> - <td>4</td> - </tr> - <tr> - <td>Mozilla</td> - <td>1</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("float") }}, {{ Cssxref("clear") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/clear", "fr": "fr/CSS/clear", "pl": "pl/CSS/clear" } ) }}</p> diff --git a/files/pt-pt/web/css/color/index.html b/files/pt-pt/web/css/color/index.html deleted file mode 100644 index bd7fe973b2..0000000000 --- a/files/pt-pt/web/css/color/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: color -slug: Web/CSS/color -tags: - - Referencia_CSS -translation_of: Web/CSS/color ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p>A propriedade <code>color</code> ajusta a cor de primeiro plano de um texto contido no elemento. -</p> -<ul><li> Valor inicial: depende do agente do usuário; -</li><li> Aplica-se a: todos elementos; -</li><li> Herdado: sim; -</li><li> Porcentagens: N/A; -</li><li> {{ Cssxref("@media") }}: <a href="pt/CSS/Media/Visual">visual</a>; -</li><li> Valor computado: como especificado. -</li></ul> -<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3> -<pre class="eval">border-bottom-color: <i>color</i> | inherit -</pre> -<h3 id="Valores" name="Valores"> Valores </h3> -<dl><dt> color </dt><dd> O <code>color</code> pode ser especificado como valor hexadecimal RGB, valor RGB regular, ou usando as cores pre-definidas. -</dd></dl> -<h3 id="Exemplos" name="Exemplos"> Exemplos </h3> -<p>As maneiras seguintes são todas um exemplo de como deixar um elemento de texto com a cor vermelho: -</p> -<pre>element { color: red } -element { color: #f00 } -element { color: #ff0000 } -element { color: rgb(255,0,0) } -element { color: rgb(100%, 0%, 0%) } -</pre> -<h3 id="Notas" name="Notas"> Notas </h3> -<ul><li> <a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a> -</li></ul> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es"> Especificações </h3> -<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#color">CSS 1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">CSS 2.1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#color">CSS 3</a> -</li></ul> -<p><span class="comment">== Compatibilidade com navegadores ==</span> -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/color", "fr": "fr/CSS/color", "pl": "pl/CSS/color" } ) }} diff --git a/files/pt-pt/web/css/content/index.html b/files/pt-pt/web/css/content/index.html deleted file mode 100644 index cc627821d8..0000000000 --- a/files/pt-pt/web/css/content/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: content -slug: Web/CSS/content -translation_of: Web/CSS/content ---- -<p><span class="lang lang-pt">« <a href="/pt/Refer%c3%aancia_CSS" title="https://developer.mozilla.org/pt/Referência_CSS">Referência CSS</a></span></p> -<h3 id="Resumo">Resumo</h3> -<p>A propriedade <code>content</code> é usada com os pseudo-elementos <a href="/pt/CSS/%3abefore" title="pt/CSS/:before"><code>:before</code></a> e <a href="/pt/CSS/:after" title="pt/CSS/:after"><code>:after</code></a> para gerar conteúdo com o elemento.</p> -<ul> <li>Valor inicial: <code>normal</code></li> <li>Aplica-se a: Pseudo-elementos <code>:before</code> e <code>:after</code></li> <li>Herdado: não</li> <li>Mídia: todas</li> <li>Valor computado: <ul> <li>Em <code>:before</code> e <code>:after</code>, <code>normal</code> é computado como <code>none</code></li> <li>Para elementos sempre é computado como <code>normal</code></li> <li>Endereços são convertidos para absolutos</li> <li>Quando for <code>attr()</code>, o valor será o mesmo do atributo escolhido</li> <li>Para outras, fica como o especificado</li> </ul> </li> -</ul> -<h3 id="Sintáxe">Sintáxe</h3> -<pre>content: normal | none | - [ <string> | <uri> | <counter> | attr() | - open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit -</pre> -<h3 id="Valores">Valores</h3> -<dl> <dt>none</dt> <dd>O pseudo-elemento não é gerado.</dd> <dt>normal</dt> <dd>Computado como<code> none </code>para os pseudo-elementos <code>:before</code> e <code>:after</code>.</dd> <dt><string></dt> <dd>Conteúdo de texto.</dd> <dt><uri><code> url()</code></dt> <dd>O valor especifica um recurso externo (como uma imagem). Se o recurso não puder ser exibido, ele é ignorado ou um marcador aparece em seu lugar.</dd> <dt><counter></dt> <dd>Contadores podem ser especificados como duas funções: 'counter()' ou 'counters()'. O primeiro tem duas formas: 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default).">O texto gerado é o valor do contador de intimidades de o nome dado no âmbito deste pseudo-elemento, que é formatado no estilo indicado</span></span> ('decimal' por padrão).A segunda também tem duas formas: 'counters(<var>name</var>, <var>string</var>)' ou 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string.">O texto gerado é o valor de todos os contadores com o nome dado no âmbito deste pseudo-elemento, a partir ultraperiféricas intimidades separadas pela seqüência especificada</span></span>. Os contadores são testados da maneira indicada ('decimal' por padrão). Veja a seção contadores automáticos e numeração para mais informação. O nome não pode ser 'none', 'inherit' ou 'initial'. Isso faz com que a função seja ignorada.</dd> <dt>attr(X)</dt> <dd>Retorna o valor da propriedade X do elemento. Se não existir a propriedade X, será retornado um texto vazio. A diferenciação entre maiúsculas e minúsculas depende do idioma do documento.</dd> <dt>open-quote | close-quote</dt> <dd>Esses valores são trocadas pelo texto apropriado da propriedade <code><a href="/pt/CSS/quotes" rel="custom nofollow" title="pt/CSS/quotes">quotes</a></code>.</dd> <dt>no-open-quote | no-close-quote</dt> <dd>Não introduz conteúdo, previne a inserção em um elemento de um <code>open-quote</code> ou <code>close quote</code>.</dd> -</dl> diff --git a/files/pt-pt/web/css/counter-increment/index.html b/files/pt-pt/web/css/counter-increment/index.html deleted file mode 100644 index 43197dba12..0000000000 --- a/files/pt-pt/web/css/counter-increment/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: counter-increment -slug: Web/CSS/counter-increment -tags: - - CSS - - CSS List - - CSS Property - - Reference -translation_of: Web/CSS/counter-increment ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Resumo" name="Resumo">Resumo</h2> - -<p><code>counter-increment</code> é usado para aumentar o valor de <a href="pt/CSS_Counters">CSS Counters</a> com um valor dado.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxe" name="Sintaxe">Sintaxe</h2> - -<pre class="eval">counter-increment: [<identifier> <integer>?]+ | inherit | none -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>identifier </dt> - <dd>O nome do contador para incrementar.</dd> - <dt>integer </dt> - <dd>O valor para adicionar ao contador. O padrão é 1 se nada for dado.</dd> -</dl> - -<p>Você pode especificar como muitos contadores para incrementar como você quiser, cada um separado por um espaço.</p> - -<h2 id="Propriedades_relacionadas" name="Propriedades_relacionadas">Propriedades relacionadas</h2> - -<ul> - <li><a href="pt/CSS/counter-reset">counter-reset</a> reinicia os <a href="pt/CSS_Counters">CSS Counters</a> especificados a uma quantidade dada.</li> -</ul> - -<h2 id="Exemplos" name="Exemplos">Exemplos</h2> - -<pre>h1 { - counter-increment: chapter section 2 page; - /* Aumenta o valor dos contadores de capítulo e página em 1 - e o contador da seção em 2. */ -} -</pre> - -<p><span class="comment">== Notas ==</span></p> - -<h2 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment">CSS 2.1</a></li> -</ul> - -<p><span class="comment">== Compatibilidade com navegadores ==</span></p> - -<h2 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h2> - -<p><a href="pt/CSS_Counters">CSS Counters</a>, {{ Cssxref("counter-increment") }}, {{ Cssxref("counter-reset") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> diff --git a/files/pt-pt/web/css/counter-reset/index.html b/files/pt-pt/web/css/counter-reset/index.html deleted file mode 100644 index 709c4f8112..0000000000 --- a/files/pt-pt/web/css/counter-reset/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: counter-reset -slug: Web/CSS/counter-reset -tags: - - CSS - - CSS List - - CSS Property - - CSS Reference -translation_of: Web/CSS/counter-reset ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Resumo" name="Resumo">Resumo</h2> - -<p><code>counter-reset</code> é usado para reiniciar os <a href="pt/CSS_Counters">CSS Counters</a> a um valor dado.</p> - -<ul> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: não</li> -</ul> - -<h2 id="Sintaxe" name="Sintaxe">Sintaxe</h2> - -<pre class="eval">counter-reset: [<identifier> <integer>?]+ | inherit | none -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>identifier </dt> - <dd>O nome do contador para reiniciar.</dd> - <dt>integer </dt> - <dd>O valor para reiniciar o contador para cada ocorrência do elemento. O padrão é 0 se nada for dado.</dd> -</dl> - -<p>Você pode especificar como muitos contadores para reiniciar quando você quiser, cada um separado por um espaço.</p> - -<h2 id="Propriedades_relacionadas" name="Propriedades_relacionadas">Propriedades relacionadas</h2> - -<ul> - <li><a href="pt/CSS/counter-increment">counter-increment</a> aumenta o valor dos <a href="pt/CSS_Counters">CSS Counters</a> especificados a uma quantidade dada.</li> -</ul> - -<h2 id="Exemplos" name="Exemplos">Exemplos</h2> - -<pre>h1 { - counter-reset: chapter section 1 page; - /* Configura os contadores de capítulo e página em 0 - e o contador da seção em 1. */ -} -</pre> - -<p><span class="comment">== Notas ==</span></p> - -<h2 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset">CSS 2.1</a></li> -</ul> - -<p><span class="comment">== Browser compatibility ==</span></p> - -<h2 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h2> - -<p><a href="pt/CSS_Counters">CSS Counters</a>, {{ Cssxref("counter-increment") }}, {{ Cssxref("counter-reset") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> diff --git a/files/pt-pt/web/css/css_backgrounds_and_borders/index.html b/files/pt-pt/web/css/css_backgrounds_and_borders/index.html deleted file mode 100644 index 3c843d9d45..0000000000 --- a/files/pt-pt/web/css/css_backgrounds_and_borders/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: CSS Background and Borders -slug: Web/CSS/CSS_Backgrounds_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders -original_slug: Web/CSS/CSS_Background_and_Borders ---- -<p>{{CSSRef}}</p> - -<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p> - -<h2 id="Reference">Reference</h2> - -<h3 id="CSS_Properties">CSS Properties</h3> - -<div class="index"> -<ul> - <li>{{cssxref("background")}}</li> - <li>{{cssxref("background-attachment")}}</li> - <li>{{cssxref("background-clip")}}</li> - <li>{{cssxref("background-color")}}</li> - <li>{{cssxref("background-image")}}</li> - <li>{{cssxref("background-origin")}}</li> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-repeat")}}</li> - <li>{{cssxref("background-size")}}</li> - <li>{{cssxref("box-shadow")}}</li> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("border-bottom-color")}}</li> - <li>{{cssxref("border-bottom-left-radius")}}</li> - <li>{{cssxref("border-bottom-right-radius")}}</li> - <li>{{cssxref("border-bottom-style")}}</li> - <li>{{cssxref("border-bottom-width")}}</li> - <li>{{cssxref("border-collapse")}}</li> - <li>{{cssxref("border-color")}}</li> - <li>{{cssxref("border-image")}}</li> - <li>{{cssxref("border-image-outset")}}</li> - <li>{{cssxref("border-image-repeat")}}</li> - <li>{{cssxref("border-image-slice")}}</li> - <li>{{cssxref("border-image-source")}}</li> - <li>{{cssxref("border-image-width")}}</li> - <li>{{cssxref("border-left")}}</li> - <li>{{cssxref("border-left-color")}}</li> - <li>{{cssxref("border-left-style")}}</li> - <li>{{cssxref("border-left-width")}}</li> - <li>{{cssxref("border-radius")}}</li> - <li>{{cssxref("border-right")}}</li> - <li>{{cssxref("border-right-color")}}</li> - <li>{{cssxref("border-right-style")}}</li> - <li>{{cssxref("border-right-width")}}</li> - <li>{{cssxref("border-style")}}</li> - <li>{{cssxref("border-top")}}</li> - <li>{{cssxref("border-top-color")}}</li> - <li>{{cssxref("border-top-left-radius")}}</li> - <li>{{cssxref("border-top-right-radius")}}</li> - <li>{{cssxref("border-top-style")}}</li> - <li>{{cssxref("border-top-width")}}</li> - <li>{{cssxref("border-width")}}</li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt> - <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt> - <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Backgrounds') }}</td> - <td>{{ Spec2('CSS3 Backgrounds') }}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>4.0</td> - <td>3.5</td> - <td>1.0 (85)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("1.9.2")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html deleted file mode 100644 index 50c7a79499..0000000000 --- a/files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Utilização de múltiplos fundos em CSS -slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -original_slug: Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo ---- -<p>{{CSSRef}}</p> - -<p>Com <span class="seoSummary"><a href="https://developer.mozilla.org/en/CSS/CSS3" title="CSS3">CSS3 </a></span>pode aplicar <strong>múltiplos fundos</strong> aos elementos. Estes são colocados um sobre o outro, com o primeiro fundo fornecido no topo e o último fundo listado por trás. Só o último fundo pode incluir uma cor de fundo:</p> - -<p>É fácil especificar múltiplos fundos:</p> - -<pre class="brush: css">.myclass { - background: background1, background 2, ..., backgroundN; -} -</pre> - -<p>Você pode fazer isto com o apanhado da propriedade {{ cssxref("background") }} e das sub-propriedades desta: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<p>Neste exemplo, três fundos são empilhados: a logo do Firefox, um <a href="/en/CSS/-moz-linear-gradient" title="en/CSS/-moz-linear-gradient">gradiente linear</a> (en) e uma imagem com flores:</p> - -<pre class="brush: css">.multi_bg_example { - background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), - -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), - url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); - background-repeat: no-repeat, no-repeat, repeat; - background-position: bottom right, left, right; -} -</pre> - -<table class="standard-table" style="width: 450px;"> - <tbody> - <tr> - <td class="header">Foto</td> - <td class="header">Demonstração ao vivo</td> - </tr> - <tr> - <td><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png"></td> - <td> </td> - </tr> - </tbody> -</table> - -<p>Como pode ver aqui, o logótipo do Firefox (listado primeiro) está no topo, seguida pelo gradiente, que está uma camada acima do fundo florido. Cada sub-propriedade ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) subsequentes aplicam-se aos fundos correspondentes. Dessa forma, o primeiro valor listado para {{ cssxref("background-repeat") }} aplica-se ao primeiro fundo (mais a frente), e assim por diante.</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a href="/en/Using_gradients" title="en/Using gradients">Utilizar gradients de CSS</a></li> -</ul> diff --git a/files/pt-pt/web/css/css_box_model/index.html b/files/pt-pt/web/css/css_box_model/index.html deleted file mode 100644 index cb4dd91343..0000000000 --- a/files/pt-pt/web/css/css_box_model/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: CSS Box Model -slug: Web/CSS/CSS_Box_Model -tags: - - CSS - - CSS Box Model - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Box_Model ---- -<div>{{CSSRef}}</div> - -<p><strong>CSS Box Model</strong> is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.</p> - -<h2 id="Reference">Reference</h2> - -<h3 id="Properties">Properties</h3> - -<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4> - -<div class="index"> -<ul> - <li>{{cssxref("box-decoration-break")}}</li> - <li>{{cssxref("box-sizing")}}</li> - <li>{{cssxref("overflow")}}</li> - <li>{{cssxref("overflow-x")}}</li> - <li>{{cssxref("overflow-y")}}</li> -</ul> -</div> - -<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4> - -<div class="index"> -<ul> - <li>{{cssxref("height")}}</li> - <li>{{cssxref("width")}}</li> - <li>{{cssxref("max-height")}}</li> - <li>{{cssxref("max-width")}}</li> - <li>{{cssxref("min-height")}}</li> - <li>{{cssxref("min-width")}}</li> -</ul> -</div> - -<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4> - -<div class="index"> -<ul> - <li>{{cssxref("margin")}}</li> - <li>{{cssxref("margin-bottom")}}</li> - <li>{{cssxref("margin-left")}}</li> - <li>{{cssxref("margin-right")}}</li> - <li>{{cssxref("margin-top")}}</li> -</ul> -</div> - -<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4> - -<div class="index"> -<ul> - <li>{{cssxref("padding")}}</li> - <li>{{cssxref("padding-bottom")}}</li> - <li>{{cssxref("padding-left")}}</li> - <li>{{cssxref("padding-right")}}</li> - <li>{{cssxref("padding-top")}}</li> -</ul> -</div> - -<h4 id="Other_properties">Other properties</h4> - -<div class="index"> -<ul> - <li>{{cssxref("box-shadow")}}</li> - <li>{{cssxref("visibility")}}</li> -</ul> -</div> - -<h2 id="Guides_and_tools">Guides and tools</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt> - <dd>Explains one of the fundamental concept of CSS, the box model: describes the meaning of the margin, padding, as well as the different areas of a box.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt> - <dd>In several cases, two adjacent margins are collapsed into one. This article describes when this is happening and how to control it.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a></dt> - <dd>An interactive tool that allows to visually create shadows and to generate the needed syntax for the {{cssxref("box-shadow")}} property.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Box")}}</td> - <td>{{Spec2("CSS3 Box")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "box.html")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS1")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>3.0</td> - <td>3.5</td> - <td>1.0 (85)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/pt-pt/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/pt-pt/web/css/css_box_model/introduction_to_the_css_box_model/index.html deleted file mode 100644 index b8496849df..0000000000 --- a/files/pt-pt/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Introdução ao modelo de Caixa de CSS -slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -tags: - - CSS - - Modelo de Caixa de CSS - - Principiante - - Referencia -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -original_slug: Web/CSS/CSS_Box_Model/Introducao_modelo_caixa_CSS ---- -<p>{{CSSRef}}</p> - -<h2 id="Resumo">Resumo</h2> - -<p>In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine.</p> - -<p>In CSS, each of these rectangular boxes is described using the standard <em>box model</em>. This model describes the space of the content taken by an element. Each box has four edges: the <strong>margin edge</strong>, <strong>border edge</strong>, <strong>padding edge</strong>, and <strong>content edge</strong>.</p> - -<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p> - -<p><a name="content-area"></a>The <strong>content area</strong> is the area containing the real content of the element. It often has a background, a color or an image (in that order, an opaque image hiding the background color) and is located inside the <em>content edge</em>; its dimensions are the <em>content width</em>, or <em>content-box width</em>, and the <em>content height</em>, or <em>content-box height</em>.</p> - -<p>If the CSS {{ cssxref("box-sizing") }} property is set to default, the CSS properties {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }} control the content size.</p> - -<p><a name="padding-area"></a>The <strong>padding area</strong> extends to the border surrounding the padding. When the content area has a background, color, or image set on it, this will extend into the padding, which is why you can think of the padding as extending the content. The padding is located inside the <em>padding edge</em>, and its dimensions are the <em>padding-box width</em> and the <em>padding-box height</em>.</p> - -<p>The space between the padding and the content edge can be controlled using the {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} and the shorthand {{ cssxref("padding") }} CSS properties.</p> - -<p><a name="border-area"></a>The <strong>border area</strong> extends the padding area to the area containing the borders. It is the area inside the <em>border edge</em>, and its dimensions are the <em>border-box width</em> and the <em>border-box height</em>. This area depends on the size of the border that is defined by the {{ cssxref("border-width") }} property or the shorthand {{ cssxref("border") }}.</p> - -<p><a name="margin-area"></a>The <strong>margin area</strong> extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the <em>margin edge</em>, and its dimensions are the <em>margin-box width </em>and the <em>margin-box height</em>.</p> - -<p>The size of the margin area is controlled using the {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} and the shorthand {{ cssxref("margin") }} CSS properties.</p> - -<p>When <a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a> happens, the margin area is not clearly defined since margins are shared between boxes.</p> - -<p>Finally, note that, for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the {{ cssxref('line-height') }} property, even though the border and padding appear visually around the content.</p> - -<h2 id="Especificação">Especificação</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>Though more precisely worded, there is no practical change</td> - </tr> - <tr> - <td>{{ SpecName("CSS1","#formatting-model")}}</td> - <td>{{ Spec2('CSS1') }}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS" title="CSS Reference">Referência CSS</a></li> - <li>{{ CSS_key_concepts() }}</li> - <li>Related CSS properties: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li> -</ul> diff --git a/files/pt-pt/web/css/css_colors/color_picker_tool/index.html b/files/pt-pt/web/css/css_colors/color_picker_tool/index.html deleted file mode 100644 index 853610e804..0000000000 --- a/files/pt-pt/web/css/css_colors/color_picker_tool/index.html +++ /dev/null @@ -1,3244 +0,0 @@ ---- -title: Ferramenta de seleção de cor -slug: Web/CSS/CSS_Colors/Color_picker_tool -tags: - - CSS - - Ferramentas - - Seleção de cor - - cor -translation_of: Web/CSS/CSS_Colors/Color_picker_tool -original_slug: Web/CSS/CSS_Colors/Ferramenta_selecao_cor ---- -<div class="hidden"> -<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"> <div id="container"> - <div id="palette" class="block"> - <div id="color-palette"></div> - <div id="color-info"> - <div class="title"> CSS Color </div> - </div> - </div> - - <div id="picker" class="block"> - <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div> - <div id="picker-samples" sample-id="master"></div> - <div id="controls"> - <div id="delete"> - <div id="trash-can"></div> - </div> - <div id="void-sample" class="icon"></div> - </div> - </div> - - <div id="canvas" data-tutorial="drop"> - <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" - data-max="20" data-sensivity="10"></div> - </div> - </div> - -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">/* - * COLOR PICKER TOOL - */ - -.ui-color-picker { - width: 420px; - margin: 0; - border: 1px solid #DDD; - background-color: #FFF; - display: table; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-color-picker .picking-area { - width: 198px; - height: 198px; - margin: 5px; - border: 1px solid #DDD; - position: relative; - float: left; - display: table; -} - -.ui-color-picker .picking-area:hover { - cursor: default; -} - -/* HSV format - Hue-Saturation-Value(Brightness) */ -.ui-color-picker .picking-area { - background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; - - background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - - background-color: #F00; -} - -/* HSL format - Hue-Saturation-Lightness */ -.ui-color-picker[data-mode='HSL'] .picking-area { - background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background-color: #F00; -} - -.ui-color-picker .picker { - width: 10px; - height: 10px; - border-radius: 50%; - border: 1px solid #FFF; - position: absolute; - top: 45%; - left: 45%; -} - -.ui-color-picker .picker:before { - width: 8px; - height: 8px; - content: ""; - position: absolute; - border: 1px solid #999; - border-radius: 50%; -} - -.ui-color-picker .hue, -.ui-color-picker .alpha { - width: 198px; - height: 28px; - margin: 5px; - border: 1px solid #FFF; - float: left; -} - -.ui-color-picker .hue { - background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; - background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); -} - -.ui-color-picker .alpha { - border: 1px solid #CCC; - background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); -} - -.ui-color-picker .alpha-mask { - width: 100%; - height: 100%; - background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); -} - -.ui-color-picker .slider-picker { - width: 2px; - height: 100%; - border: 1px solid #777; - background-color: #FFF; - position: relative; - top: -1px; -} - -/* input HSV and RGB */ - -.ui-color-picker .info { - width: 200px; - margin: 5px; - float: left; -} - -.ui-color-picker .info * { - float: left; -} - -.ui-color-picker .input { - width: 64px; - margin: 5px 2px; - float: left; -} - -.ui-color-picker .input .name { - height: 20px; - width: 30px; - text-align: center; - font-size: 14px; - line-height: 18px; - float: left; -} - -.ui-color-picker .input input { - width: 30px; - height: 18px; - margin: 0; - padding: 0; - border: 1px solid #DDD; - text-align: center; - float: right; - - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -.ui-color-picker .input[data-topic="lightness"] { - display: none; -} - -.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { - display: none; -} - -.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { - display: block; -} - -.ui-color-picker .input[data-topic="alpha"] { - margin-top: 10px; - width: 93px; -} - -.ui-color-picker .input[data-topic="alpha"] > .name { - width: 60px; -} - -.ui-color-picker .input[data-topic="alpha"] > input { - float: right; -} - -.ui-color-picker .input[data-topic="hexa"] { - width: auto; - float: right; - margin: 6px 8px 0 0; -} - -.ui-color-picker .input[data-topic="hexa"] > .name { - display: none; -} - -.ui-color-picker .input[data-topic="hexa"] > input { - width: 90px; - height: 24px; - padding: 2px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -/* Preview color */ -.ui-color-picker .preview { - width: 95px; - height: 53px; - margin: 5px; - margin-top: 10px; - border: 1px solid #DDD; - background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - float: left; - position: relative; -} - -.ui-color-picker .preview:before { - height: 100%; - width: 50%; - left: 50%; - top: 0; - content: ""; - background: #FFF; - position: absolute; - z-index: 1; -} - -.ui-color-picker .preview-color { - width: 100%; - height: 100%; - background-color: rgba(255, 0, 0, 0.5); - position: absolute; - z-index: 1; -} - -.ui-color-picker .switch_mode { - width: 10px; - height: 20px; - position: relative; - border-radius: 5px 0 0 5px; - border: 1px solid #DDD; - background-color: #EEE; - left: -12px; - top: -1px; - z-index: 1; - transition: all 0.5s; -} - -.ui-color-picker .switch_mode:hover { - background-color: #CCC; - cursor: pointer; -} - -/* - * UI Component - */ - -.ui-input-slider { - height: 20px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.ui-input-slider * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Input Slider */ - -.ui-input-slider > input { - margin: 0; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.ui-input-slider-info { - width: 90px; - padding: 0px 10px 0px 0px; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-left, .ui-input-slider-right { - width: 16px; - cursor: pointer; - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; -} - -.ui-input-slider-right { - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; -} - -.ui-input-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 5px; - color: #FFF; - font-weight: bold; - line-height: 14px; - text-align: center; -} - -.ui-input-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -/* - * COLOR PICKER TOOL - */ - -body { - max-width: 1000px; - margin: 0 auto; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - box-shadow: 0 0 5px 0 #999; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - -} - -/** - * Resize Handle - */ -.resize-handle { - width: 10px; - height: 10px; - background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; - position: absolute; - bottom: 0; - right: 0; -} - -[data-resize='both']:hover { - cursor: nw-resize !important; -} - -[data-resize='width']:hover { - cursor: w-resize !important; -} - -[data-resize='height']:hover { - cursor: n-resize !important; -} - -[data-hidden='true'] { - display: none; -} - -[data-collapsed='true'] { - height: 0 !important; -} - -.block { - display: table; -} - - -/** - * Container - */ -#container { - width: 100%; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - display: table; -} - -/** - * Picker Zone - */ - -#picker { - padding: 10px; - width: 980px; -} - -.ui-color-picker { - padding: 3px 5px; - float: left; - border-color: #FFF; -} - -.ui-color-picker .switch_mode { - display: none; -} - -.ui-color-picker .preview-color:hover { - cursor: move; -} - -/** - * Picker Container - */ - -#picker-samples { - width: 375px; - height: 114px; - max-height: 218px; - margin: 0 10px 0 30px; - overflow: hidden; - position: relative; - float: left; - - transition: all 0.2s; -} - -#picker-samples .sample { - width: 40px; - height: 40px; - margin: 5px; - border: 1px solid #DDD; - position: absolute; - float: left; - transition: all 0.2s; -} - -#picker-samples .sample:hover { - cursor: pointer; - border-color: #BBB; - transform: scale(1.15); - border-radius: 3px; -} - -#picker-samples .sample[data-active='true'] { - border-color: #999; -} - -#picker-samples .sample[data-active='true']:after { - content: ""; - position: absolute; - background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; - width: 100%; - height: 12px; - top: -12px; - z-index: 2; -} - -#picker-samples #add-icon { - width: 100%; - height: 100%; - position: relative; - box-shadow: inset 0px 0px 2px 0px #DDD; -} - -#picker-samples #add-icon:hover { - cursor: pointer; - border-color: #DDD; - box-shadow: inset 0px 0px 5px 0px #CCC; -} - -#picker-samples #add-icon:before, -#picker-samples #add-icon:after { - content: ""; - position: absolute; - background-color: #EEE; - box-shadow: 0 0 1px 0 #EEE; -} - -#picker-samples #add-icon:before { - width: 70%; - height: 16%; - top: 42%; - left: 15%; -} - -#picker-samples #add-icon:after { - width: 16%; - height: 70%; - top: 15%; - left: 42%; -} - -#picker-samples #add-icon:hover:before, -#picker-samples #add-icon:hover:after { - background-color: #DDD; - box-shadow: 0 0 1px 0 #DDD; -} - -/** - * Controls - */ - -#controls { - width: 110px; - padding: 10px; - float: right; -} - -#controls #picker-switch { - text-align: center; - float: left; -} - -#controls .icon { - width: 48px; - height: 48px; - margin: 10px 0; - background-repeat: no-repeat; - background-position: center; - border: 1px solid #DDD; - display: table; - float: left; -} - -#controls .icon:hover { - cursor: pointer; -} - -#controls .picker-icon { - background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); -} - -#controls #void-sample { - margin-right: 10px; - background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); - background-position: center left; -} - -#controls #void-sample[data-active='true'] { - border-color: #CCC; - background-position: center right; -} - -#controls .switch { - width: 106px; - padding: 1px; - border: 1px solid #CCC; - font-size: 14px; - text-align: center; - line-height: 24px; - overflow: hidden; - float: left; -} - -#controls .switch:hover { - cursor: pointer; -} - -#controls .switch > * { - width: 50%; - padding: 2px 0; - background-color: #EEE; - float: left; -} - -#controls .switch [data-active='true'] { - color: #FFF; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-color: #777; -} - -/** - * Trash Can - */ - -#delete { - width: 100%; - height: 94px; - background-color: #DDD; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-repeat: repeat; - - text-align: center; - color: #777; - - position: relative; - float: right; -} - -#delete #trash-can { - width: 80%; - height: 80%; - border: 2px dashed #FFF; - border-radius: 5px; - background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; - - position: absolute; - top: 10%; - left: 10%; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - transition: all 0.2s; -} - -#delete[drag-state='enter'] { - background-color: #999; -} - -/** - * Color Theme - */ - -#color-theme { - margin: 0 8px 0 0; - border: 1px solid #EEE; - display: inline-block; - float: right; -} - -#color-theme .box { - width: 80px; - height: 92px; - float: left; -} - -/** - * Color info box - */ -#color-info { - width: 360px; - float: left; -} - -#color-info .title { - width: 100%; - padding: 15px; - font-size: 18px; - text-align: center; - background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); - background-repeat:no-repeat; - background-position: center left 30%; -} - -#color-info .copy-container { - position: absolute; - top: -100%; -} - -#color-info .property { - min-width: 280px; - height: 30px; - margin: 10px 0; - text-align: center; - line-height: 30px; -} - -#color-info .property > * { - float: left; -} - -#color-info .property .type { - width: 60px; - height: 100%; - padding: 0 16px 0 0; - text-align: right; -} - -#color-info .property .value { - width: 200px; - height: 100%; - padding: 0 10px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - font-size: 16px; - color: #777; - text-align: center; - background-color: #FFF; - border: none; -} - -#color-info .property .value:hover { - color: #37994A; -} - -#color-info .property .value:hover + .copy { - background-position: center right; -} - -#color-info .property .copy { - width: 24px; - height: 100%; - padding: 0 5px; - background-color: #FFF; - background-image: url('https://mdn.mozillademos.org/files/6073/copy.png'); - background-repeat: no-repeat; - background-position: center left; - border-left: 1px solid #EEE; - text-align: right; - float: left; -} - -#color-info .property .copy:hover { - background-position: center right; -} - - -/** - * Color Palette - */ - -#palette { - width: 1000px; - padding: 10px 0; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-repeat: repeat; - background-color: #EEE; - color: #777; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#color-palette { - width: 640px; - font-family: Arial, Helvetica, sans-serif; - color: #777; - float: left; -} - -#color-palette .container { - width: 100%; - height: 50px; - line-height: 50px; - overflow: hidden; - float: left; - transition: all 0.5s; -} - -#color-palette .container > * { - float: left; -} - -#color-palette .title { - width: 100px; - padding: 0 10px; - text-align: right; - line-height: inherit; -} - -#color-palette .palette { - width: 456px; - height: 38px; - margin: 3px; - padding: 3px; - display: table; - background-color: #FFF; -} - -#color-palette .palette .sample { - width: 30px; - height: 30px; - margin: 3px; - position: relative; - border: 1px solid #DDD; - float: left; - transition: all 0.2s; -} - -#color-palette .palette .sample:hover { - cursor: pointer; - border-color: #BBB; - transform: scale(1.15); - border-radius: 3px; -} - -#color-palette .controls { -} - -#color-palette .controls > * { - float: left; -} - -#color-palette .controls > *:hover { - cursor: pointer; -} - -#color-palette .controls .lock { - width: 24px; - height: 24px; - margin: 10px; - padding: 3px; - background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); - background-repeat: no-repeat; - background-position: bottom right; -} - -#color-palette .controls .lock:hover { - /*background-image: url('images/unlocked-hover.png');*/ - background-position: bottom left; -} - -#color-palette .controls .lock[locked-state='true'] { - /*background-image: url('images/locked.png');*/ - background-position: top left ; -} - -#color-palette .controls .lock[locked-state='true']:hover { - /*background-image: url('images/lock-hover.png');*/ - background-position: top right; -} - -/** - * Canvas - */ - -#canvas { - width: 100%; - height: 300px; - min-height: 250px; - border-top: 1px solid #DDD; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-repeat: repeat; - position: relative; - float: left; -} - -#canvas[data-tutorial='drop'] { - text-align: center; - font-size: 30px; - color: #777; -} - -#canvas[data-tutorial='drop']:before { - content: "Drop colors here to compare"; - width: 40%; - padding: 30px 9% 70px 11%; - - background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); - background-repeat: no-repeat; - background-position: left 35px top 60%; - - text-align: right; - - border: 3px dashed rgb(221, 221, 221); - border-radius: 15px; - - position: absolute; - top: 50px; - left: 20%; -} - -#canvas[data-tutorial='drop']:after { - content: "adjust, change or modify"; - width: 40%; - font-size: 24px; - position: absolute; - top: 130px; - left: 32%; - z-index: 2; -} - -#canvas [data-tutorial='dblclick'] { - background-color: #999 !important; -} - -#canvas [data-tutorial='dblclick']:before { - content: "double click to activate"; - width: 80px; - color: #FFF; - position: absolute; - top: 10%; - left: 20%; - z-index: 2; -} - -#canvas .sample { - width: 100px; - height: 100px; - min-width: 20px; - min-height: 20px; - position: absolute; - border: 1px solid rgba(255, 255, 255, 0.3); -} - -#canvas .sample:hover { - cursor: move; -} - -#canvas .sample[data-active='true']:after { - content: ""; - position: absolute; - background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; - width: 100%; - height: 12px; - top: -12px; - z-index: 2; -} - -#canvas .sample:hover > * { - cursor: pointer; - display: block !important; -} - -#canvas .sample .resize-handle { - display: none; -} - -#canvas .sample .pick { - width: 10px; - height: 10px; - margin: 5px; - background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; - position: absolute; - top: 0; - left: 0; - display: none; -} - -#canvas .sample .delete { - width: 10px; - height: 10px; - margin: 5px; - background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; - position: absolute; - top: 0; - right: 0; - display: none; -} - - -/** - * Canvas controls - */ - -#canvas .toggle-bg { - width: 16px; - height: 16px; - margin: 5px; - background: url("images/canvas-controls.png") center left no-repeat; - position: absolute; - top: 0; - right: 0; -} - -#canvas .toggle-bg:hover { - cursor: pointer; -} - -#canvas[data-bg='true'] { - background: none; -} - -#canvas[data-bg='true'] .toggle-bg { - background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; -} - -#zindex { - height: 20px; - margin: 5px; - font-size: 16px; - position: absolute; - opacity: 0; - top: -10000px; - left: 0; - color: #777; - float: left; - transition: opacity 1s; -} - -#zindex input { - border: 1px solid #DDD; - font-size: 16px; - color: #777; -} - -#zindex .ui-input-slider-info { - width: 60px; -} - -#zindex[data-active='true'] { - top: 0; - opacity: 1; -} - -</pre> - -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js">'use strict'; - -var UIColorPicker = (function UIColorPicker() { - - function getElemById(id) { - return document.getElementById(id); - } - - var subscribers = []; - var pickers = []; - - /** - * RGBA Color class - * - * HSV/HSB and HSL (hue, saturation, value / brightness, lightness) - * @param hue 0-360 - * @param saturation 0-100 - * @param value 0-100 - * @param lightness 0-100 - */ - - function Color(color) { - - if(color instanceof Color === true) { - this.copy(color); - return; - } - - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 1; - this.hue = 0; - this.saturation = 0; - this.value = 0; - this.lightness = 0; - this.format = 'HSV'; - } - - function RGBColor(r, g, b) { - var color = new Color(); - color.setRGBA(r, g, b, 1); - return color; - } - - function RGBAColor(r, g, b, a) { - var color = new Color(); - color.setRGBA(r, g, b, a); - return color; - } - - function HSVColor(h, s, v) { - var color = new Color(); - color.setHSV(h, s, v); - return color; - } - - function HSVAColor(h, s, v, a) { - var color = new Color(); - color.setHSV(h, s, v); - color.a = a; - return color; - } - - function HSLColor(h, s, l) { - var color = new Color(); - color.setHSL(h, s, l); - return color; - } - - function HSLAColor(h, s, l, a) { - var color = new Color(); - color.setHSL(h, s, l); - color.a = a; - return color; - } - - Color.prototype.copy = function copy(obj) { - if(obj instanceof Color !== true) { - console.log('Typeof parameter not Color'); - return; - } - - this.r = obj.r; - this.g = obj.g; - this.b = obj.b; - this.a = obj.a; - this.hue = obj.hue; - this.saturation = obj.saturation; - this.value = obj.value; - this.format = '' + obj.format; - this.lightness = obj.lightness; - }; - - Color.prototype.setFormat = function setFormat(format) { - if (format === 'HSV') - this.format = 'HSV'; - if (format === 'HSL') - this.format = 'HSL'; - }; - - /*========== Methods to set Color Properties ==========*/ - - Color.prototype.isValidRGBValue = function isValidRGBValue(value) { - return (typeof(value) === 'number' && isNaN(value) === false && - value >= 0 && value <= 255); - }; - - Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { - if (this.isValidRGBValue(red) === false || - this.isValidRGBValue(green) === false || - this.isValidRGBValue(blue) === false) - return; - - this.r = red | 0; - this.g = green | 0; - this.b = blue | 0; - - if (this.isValidRGBValue(alpha) === true) - this.a = alpha | 0; - }; - - Color.prototype.setByName = function setByName(name, value) { - if (name === 'r' || name === 'g' || name === 'b') { - if(this.isValidRGBValue(value) === false) - return; - - this[name] = value; - this.updateHSX(); - } - }; - - Color.prototype.setHSV = function setHSV(hue, saturation, value) { - this.hue = hue; - this.saturation = saturation; - this.value = value; - this.HSVtoRGB(); - }; - - Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { - this.hue = hue; - this.saturation = saturation; - this.lightness = lightness; - this.HSLtoRGB(); - }; - - Color.prototype.setHue = function setHue(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 359) - return; - this.hue = value; - this.updateRGB(); - }; - - Color.prototype.setSaturation = function setSaturation(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.saturation = value; - this.updateRGB(); - }; - - Color.prototype.setValue = function setValue(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.value = value; - this.HSVtoRGB(); - }; - - Color.prototype.setLightness = function setLightness(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.lightness = value; - this.HSLtoRGB(); - }; - - Color.prototype.setHexa = function setHexa(value) { - var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); - - if (valid !== true) - return; - - if (value[0] === '#') - value = value.slice(1, value.length); - - if (value.length === 3) - value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); - - this.r = parseInt(value.substr(0, 2), 16); - this.g = parseInt(value.substr(2, 2), 16); - this.b = parseInt(value.substr(4, 2), 16); - - this.alpha = 1; - this.RGBtoHSV(); - }; - - /*========== Conversion Methods ==========*/ - - Color.prototype.convertToHSL = function convertToHSL() { - if (this.format === 'HSL') - return; - - this.setFormat('HSL'); - this.RGBtoHSL(); - }; - - Color.prototype.convertToHSV = function convertToHSV() { - if (this.format === 'HSV') - return; - - this.setFormat('HSV'); - this.RGBtoHSV(); - }; - - /*========== Update Methods ==========*/ - - Color.prototype.updateRGB = function updateRGB() { - if (this.format === 'HSV') { - this.HSVtoRGB(); - return; - } - - if (this.format === 'HSL') { - this.HSLtoRGB(); - return; - } - }; - - Color.prototype.updateHSX = function updateHSX() { - if (this.format === 'HSV') { - this.RGBtoHSV(); - return; - } - - if (this.format === 'HSL') { - this.RGBtoHSL(); - return; - } - }; - - Color.prototype.HSVtoRGB = function HSVtoRGB() { - var sat = this.saturation / 100; - var value = this.value / 100; - var C = sat * value; - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = value - C; - var precision = 255; - - C = (C + m) * precision | 0; - X = (X + m) * precision | 0; - m = m * precision | 0; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - }; - - Color.prototype.HSLtoRGB = function HSLtoRGB() { - var sat = this.saturation / 100; - var light = this.lightness / 100; - var C = sat * (1 - Math.abs(2 * light - 1)); - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = light - C/2; - var precision = 255; - - C = (C + m) * precision | 0; - X = (X + m) * precision | 0; - m = m * precision | 0; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - }; - - Color.prototype.RGBtoHSV = function RGBtoHSV() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / cmax; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.value = (cmax * 100) | 0; - }; - - Color.prototype.RGBtoHSL = function RGBtoHSL() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - var lightness = (cmax + cmin) / 2; - var X = (1 - Math.abs(2 * lightness - 1)); - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / X; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.lightness = (lightness * 100) | 0; - }; - - /*========== Get Methods ==========*/ - - Color.prototype.getHexa = function getHexa() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (this.r < 16) r = '0' + r; - if (this.g < 16) g = '0' + g; - if (this.b < 16) b = '0' + b; - var value = '#' + r + g + b; - return value.toUpperCase(); - }; - - Color.prototype.getRGBA = function getRGBA() { - - var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; - var a = ''; - var v = ''; - var x = parseFloat(this.a); - if (x !== 1) { - a = 'a'; - v = ', ' + x; - } - - var value = 'rgb' + a + rgb + v + ')'; - return value; - }; - - Color.prototype.getHSLA = function getHSLA() { - if (this.format === 'HSV') { - var color = new Color(this); - color.setFormat('HSL'); - color.updateHSX(); - return color.getHSLA(); - } - - var a = ''; - var v = ''; - var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; - var x = parseFloat(this.a); - if (x !== 1) { - a = 'a'; - v = ', ' + x; - } - - var value = 'hsl' + a + hsl + v + ')'; - return value; - }; - - Color.prototype.getColor = function getColor() { - if (this.a | 0 === 1) - return this.getHexa(); - return this.getRGBA(); - }; - - /*=======================================================================*/ - /*=======================================================================*/ - - /*========== Capture Mouse Movement ==========*/ - - var setMouseTracking = function setMouseTracking(elem, callback) { - elem.addEventListener('mousedown', function(e) { - callback(e); - document.addEventListener('mousemove', callback); - }); - - document.addEventListener('mouseup', function(e) { - document.removeEventListener('mousemove', callback); - }); - }; - - /*====================*/ - // Color Picker Class - /*====================*/ - - function ColorPicker(node) { - this.color = new Color(); - this.node = node; - this.subscribers = []; - - var type = this.node.getAttribute('data-mode'); - var topic = this.node.getAttribute('data-topic'); - - this.topic = topic; - this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; - this.color.setFormat(this.picker_mode); - - this.createPickingArea(); - this.createHueArea(); - - this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); - this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); - this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); - this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); - - this.createAlphaArea(); - - this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); - this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); - this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); - - this.createPreviewBox(); - this.createChangeModeButton(); - - this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); - this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); - - this.setColor(this.color); - pickers[topic] = this; - } - - /*************************************************************************/ - // Function for generating the color-picker - /*************************************************************************/ - - ColorPicker.prototype.createPickingArea = function createPickingArea() { - var area = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'picking-area'; - picker.className = 'picker'; - - this.picking_area = area; - this.color_picker = picker; - setMouseTracking(area, this.updateColor.bind(this)); - - area.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createHueArea = function createHueArea() { - var area = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'hue'; - picker.className ='slider-picker'; - - this.hue_area = area; - this.hue_picker = picker; - setMouseTracking(area, this.updateHueSlider.bind(this)); - - area.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createAlphaArea = function createAlphaArea() { - var area = document.createElement('div'); - var mask = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'alpha'; - mask.className = 'alpha-mask'; - picker.className = 'slider-picker'; - - this.alpha_area = area; - this.alpha_mask = mask; - this.alpha_picker = picker; - setMouseTracking(area, this.updateAlphaSlider.bind(this)); - - area.appendChild(mask); - mask.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { - var preview_box = document.createElement('div'); - var preview_color = document.createElement('div'); - - preview_box.className = 'preview'; - preview_color.className = 'preview-color'; - - this.preview_color = preview_color; - - preview_box.appendChild(preview_color); - this.node.appendChild(preview_box); - }; - - ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { - var wrapper = document.createElement('div'); - var input = document.createElement('input'); - var info = document.createElement('span'); - - wrapper.className = 'input'; - wrapper.setAttribute('data-topic', topic); - info.textContent = title; - info.className = 'name'; - input.setAttribute('type', 'text'); - - wrapper.appendChild(info); - wrapper.appendChild(input); - this.node.appendChild(wrapper); - - input.addEventListener('change', onChangeFunc); - input.addEventListener('click', function() { - this.select(); - }); - - this.subscribe(topic, function(value) { - input.value = value; - }); - }; - - ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { - - var button = document.createElement('div'); - button.className = 'switch_mode'; - button.addEventListener('click', function() { - if (this.picker_mode === 'HSV') - this.setPickerMode('HSL'); - else - this.setPickerMode('HSV'); - - }.bind(this)); - - this.node.appendChild(button); - }; - - /*************************************************************************/ - // Updates properties of UI elements - /*************************************************************************/ - - ColorPicker.prototype.updateColor = function updateColor(e) { - var x = e.pageX - this.picking_area.offsetLeft; - var y = e.pageY - this.picking_area.offsetTop; - var picker_offset = 5; - - // width and height should be the same - var size = this.picking_area.clientWidth; - - if (x > size) x = size; - if (y > size) y = size; - if (x < 0) x = 0; - if (y < 0) y = 0; - - var value = 100 - (y * 100 / size) | 0; - var saturation = x * 100 / size | 0; - - if (this.picker_mode === 'HSV') - this.color.setHSV(this.color.hue, saturation, value); - if (this.picker_mode === 'HSL') - this.color.setHSL(this.color.hue, saturation, value); - - this.color_picker.style.left = x - picker_offset + 'px'; - this.color_picker.style.top = y - picker_offset + 'px'; - - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('value', value); - this.notify('lightness', value); - this.notify('saturation', saturation); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - - notify(this.topic, this.color); - }; - - ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { - var x = e.pageX - this.hue_area.offsetLeft; - var width = this.hue_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - // TODO 360 => 359 - var hue = ((359 * x) / width) | 0; - // if (hue === 360) hue = 359; - - this.updateSliderPosition(this.hue_picker, x); - this.setHue(hue); - }; - - ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { - var x = e.pageX - this.alpha_area.offsetLeft; - var width = this.alpha_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - this.color.a = (x / width).toFixed(2); - - this.updateSliderPosition(this.alpha_picker, x); - this.updatePreviewColor(); - - this.notify('alpha', this.color.a); - notify(this.topic, this.color); - }; - - ColorPicker.prototype.setHue = function setHue(value) { - this.color.setHue(value); - - this.updatePickerBackground(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - this.notify('hue', this.color.hue); - - notify(this.topic, this.color); - }; - - // Updates when one of Saturation/Value/Lightness changes - ColorPicker.prototype.updateSLV = function updateSLV() { - this.updatePickerPosition(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - - notify(this.topic, this.color); - }; - - /*************************************************************************/ - // Update positions of various UI elements - /*************************************************************************/ - - ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { - var size = this.picking_area.clientWidth; - var value = 0; - var offset = 5; - - if (this.picker_mode === 'HSV') - value = this.color.value; - if (this.picker_mode === 'HSL') - value = this.color.lightness; - - var x = (this.color.saturation * size / 100) | 0; - var y = size - (value * size / 100) | 0; - - this.color_picker.style.left = x - offset + 'px'; - this.color_picker.style.top = y - offset + 'px'; - }; - - ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { - elem.style.left = Math.max(pos - 3, -2) + 'px'; - }; - - ColorPicker.prototype.updateHuePicker = function updateHuePicker() { - var size = this.hue_area.clientWidth; - var offset = 1; - var pos = (this.color.hue * size / 360 ) | 0; - this.hue_picker.style.left = pos - offset + 'px'; - }; - - ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { - var size = this.alpha_area.clientWidth; - var offset = 1; - var pos = (this.color.a * size) | 0; - this.alpha_picker.style.left = pos - offset + 'px'; - }; - - /*************************************************************************/ - // Update background colors - /*************************************************************************/ - - ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { - var nc = new Color(this.color); - nc.setHSV(nc.hue, 100, 100); - this.picking_area.style.backgroundColor = nc.getHexa(); - }; - - ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { - this.alpha_mask.style.backgroundColor = this.color.getHexa(); - }; - - ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { - this.preview_color.style.backgroundColor = this.color.getColor(); - }; - - /*************************************************************************/ - // Update input elements - /*************************************************************************/ - - ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { - var value = parseInt(e.target.value); - this.setHue(value); - this.updateHuePicker(); - }; - - ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { - var value = parseInt(e.target.value); - this.color.setSaturation(value); - e.target.value = this.color.saturation; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { - var value = parseInt(e.target.value); - this.color.setValue(value); - e.target.value = this.color.value; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { - var value = parseInt(e.target.value); - this.color.setLightness(value); - e.target.value = this.color.lightness; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { - var value = parseInt(e.target.value); - this.color.setByName('r', value); - e.target.value = this.color.r; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { - var value = parseInt(e.target.value); - this.color.setByName('g', value); - e.target.value = this.color.g; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { - var value = parseInt(e.target.value); - this.color.setByName('b', value); - e.target.value = this.color.b; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { - var value = parseFloat(e.target.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) - this.color.a = value.toFixed(2); - - e.target.value = this.color.a; - this.updateAlphaPicker(); - }; - - ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { - var value = e.target.value; - this.color.setHexa(value); - this.setColor(this.color); - }; - - /*************************************************************************/ - // Internal Pub/Sub - /*************************************************************************/ - - ColorPicker.prototype.subscribe = function subscribe(topic, callback) { - this.subscribers[topic] = callback; - }; - - ColorPicker.prototype.notify = function notify(topic, value) { - if (this.subscribers[topic]) - this.subscribers[topic](value); - }; - - /*************************************************************************/ - // Set Picker Properties - /*************************************************************************/ - - ColorPicker.prototype.setColor = function setColor(color) { - if(color instanceof Color !== true) { - console.log('Typeof parameter not Color'); - return; - } - - if (color.format !== this.picker_mode) { - color.setFormat(this.picker_mode); - color.updateHSX(); - } - - this.color.copy(color); - this.updateHuePicker(); - this.updatePickerPosition(); - this.updatePickerBackground(); - this.updateAlphaPicker(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - - this.notify('hue', this.color.hue); - this.notify('saturation', this.color.saturation); - this.notify('value', this.color.value); - this.notify('lightness', this.color.lightness); - - this.notify('alpha', this.color.a); - this.notify('hexa', this.color.getHexa()); - notify(this.topic, this.color); - }; - - ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { - if (mode !== 'HSV' && mode !== 'HSL') - return; - - this.picker_mode = mode; - this.node.setAttribute('data-mode', this.picker_mode); - this.setColor(this.color); - }; - - /*************************************************************************/ - // UNUSED - /*************************************************************************/ - - var setPickerMode = function setPickerMode(topic, mode) { - if (pickers[topic]) - pickers[topic].setPickerMode(mode); - }; - - var setColor = function setColor(topic, color) { - if (pickers[topic]) - pickers[topic].setColor(color); - }; - - var getColor = function getColor(topic) { - if (pickers[topic]) - return new Color(pickers[topic].color); - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(callback) { - subscribers.indexOf(callback); - subscribers.splice(index, 1); - }; - - var notify = function notify(topic, value) { - if (subscribers[topic] === undefined || subscribers[topic].length === 0) - return; - - var color = new Color(value); - for (var i in subscribers[topic]) - subscribers[topic][i](color); - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-color-picker'); - var size = elem.length; - for (var i = 0; i < size; i++) - new ColorPicker(elem[i]); - }; - - return { - init : init, - Color : Color, - RGBColor : RGBColor, - RGBAColor : RGBAColor, - HSVColor : HSVColor, - HSVAColor : HSVAColor, - HSLColor : HSLColor, - HSLAColor : HSLAColor, - setColor : setColor, - getColor : getColor, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPickerMode : setPickerMode - }; - -})(); - - - -/** - * UI-SlidersManager - */ - -var InputSliderManager = (function InputSliderManager() { - - var subscribers = {}; - var sliders = []; - - var InputComponent = function InputComponent(obj) { - var input = document.createElement('input'); - input.setAttribute('type', 'text'); - input.style.width = 50 + obj.precision * 10 + 'px'; - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - var value = parseFloat(e.target.value); - - if (isNaN(value) === true) - setValue(obj.topic, obj.value); - else - setValue(obj.topic, value); - }); - - return input; - }; - - var SliderComponent = function SliderComponent(obj, sign) { - var slider = document.createElement('div'); - var startX = null; - var start_value = 0; - - slider.addEventListener("click", function(e) { - document.removeEventListener("mousemove", sliderMotion); - setValue(obj.topic, obj.value + obj.step * sign); - }); - - slider.addEventListener("mousedown", function(e) { - startX = e.clientX; - start_value = obj.value; - document.body.style.cursor = "e-resize"; - - document.addEventListener("mouseup", slideEnd); - document.addEventListener("mousemove", sliderMotion); - }); - - var slideEnd = function slideEnd(e) { - document.removeEventListener("mousemove", sliderMotion); - document.body.style.cursor = "auto"; - slider.style.cursor = "pointer"; - }; - - var sliderMotion = function sliderMotion(e) { - slider.style.cursor = "e-resize"; - var delta = (e.clientX - startX) / obj.sensivity | 0; - var value = delta * obj.step + start_value; - setValue(obj.topic, value); - }; - - return slider; - }; - - var InputSlider = function(node) { - var min = parseFloat(node.getAttribute('data-min')); - var max = parseFloat(node.getAttribute('data-max')); - var step = parseFloat(node.getAttribute('data-step')); - var value = parseFloat(node.getAttribute('data-value')); - var topic = node.getAttribute('data-topic'); - var unit = node.getAttribute('data-unit'); - var name = node.getAttribute('data-info'); - var sensivity = node.getAttribute('data-sensivity') | 0; - var precision = node.getAttribute('data-precision') | 0; - - this.min = isNaN(min) ? 0 : min; - this.max = isNaN(max) ? 100 : max; - this.precision = precision >= 0 ? precision : 0; - this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); - this.topic = topic; - this.node = node; - this.unit = unit === null ? '' : unit; - this.sensivity = sensivity > 0 ? sensivity : 5; - value = isNaN(value) ? this.min : value; - - var input = new InputComponent(this); - var slider_left = new SliderComponent(this, -1); - var slider_right = new SliderComponent(this, 1); - - slider_left.className = 'ui-input-slider-left'; - slider_right.className = 'ui-input-slider-right'; - - if (name) { - var info = document.createElement('span'); - info.className = 'ui-input-slider-info'; - info.textContent = name; - node.appendChild(info); - } - - node.appendChild(slider_left); - node.appendChild(input); - node.appendChild(slider_right); - - this.input = input; - sliders[topic] = this; - setValue(topic, value); - }; - - InputSlider.prototype.setInputValue = function setInputValue() { - this.input.value = this.value.toFixed(this.precision) + this.unit; - }; - - var setValue = function setValue(topic, value, send_notify) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = parseFloat(value.toFixed(slider.precision)); - - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; - - slider.value = value; - slider.node.setAttribute('data-value', value); - - slider.setInputValue(); - - if (send_notify === false) - return; - - notify.call(slider); - }; - - var setMax = function setMax(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.max = value; - setValue(topic, slider.value); - }; - - var setMin = function setMin(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.min = value; - setValue(topic, slider.value); - }; - - var setUnit = function setUnit(topic, unit) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.unit = unit; - setValue(topic, slider.value); - }; - - var setStep = function setStep(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.step = parseFloat(value); - setValue(topic, slider.value); - }; - - var setPrecision = function setPrecision(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - slider.precision = value; - - var step = parseFloat(slider.step.toFixed(value)); - if (step === 0) - slider.step = 1 / Math.pow(10, value); - - setValue(topic, slider.value); - }; - - var setSensivity = function setSensivity(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - - slider.sensivity = value > 0 ? value : 5; - }; - - var getNode = function getNode(topic) { - return sliders[topic].node; - }; - - var getPrecision = function getPrecision(topic) { - return sliders[topic].precision; - }; - - var getStep = function getStep(topic) { - return sliders[topic].step; - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.value); - }; - - var createSlider = function createSlider(topic, label) { - var slider = document.createElement('div'); - slider.className = 'ui-input-slider'; - slider.setAttribute('data-topic', topic); - - if (label !== undefined) - slider.setAttribute('data-info', label); - - new InputSlider(slider); - return slider; - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-input-slider'); - var size = elem.length; - for (var i = 0; i < size; i++) - new InputSlider(elem[i]); - }; - - return { - init : init, - setMax : setMax, - setMin : setMin, - setUnit : setUnit, - setStep : setStep, - getNode : getNode, - getStep : getStep, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPrecision : setPrecision, - setSensivity : setSensivity, - getPrecision : getPrecision, - createSlider : createSlider, - }; - -})(); - - -'use strict'; - -window.addEventListener("load", function() { - ColorPickerTool.init(); -}); - -var ColorPickerTool = (function ColorPickerTool() { - - /*========== Get DOM Element By ID ==========*/ - - function getElemById(id) { - return document.getElementById(id); - } - - function allowDropEvent(e) { - e.preventDefault(); - } - - /*========== Make an element resizable relative to it's parent ==========*/ - - var UIComponent = (function UIComponent() { - - function makeResizable(elem, axis) { - var valueX = 0; - var valueY = 0; - var action = 0; - - var resizeStart = function resizeStart(e) { - e.stopPropagation(); - e.preventDefault(); - if (e.button !== 0) - return; - - valueX = e.clientX - elem.clientWidth; - valueY = e.clientY - elem.clientHeight; - - document.body.setAttribute('data-resize', axis); - document.addEventListener('mousemove', mouseMove); - document.addEventListener('mouseup', resizeEnd); - }; - - var mouseMove = function mouseMove(e) { - if (action >= 0) - elem.style.width = e.clientX - valueX + 'px'; - if (action <= 0) - elem.style.height = e.clientY - valueY + 'px'; - }; - - var resizeEnd = function resizeEnd(e) { - if (e.button !== 0) - return; - - document.body.removeAttribute('data-resize', axis); - document.removeEventListener('mousemove', mouseMove); - document.removeEventListener('mouseup', resizeEnd); - }; - - var handle = document.createElement('div'); - handle.className = 'resize-handle'; - - if (axis === 'width') action = 1; - else if (axis === 'height') action = -1; - else axis = 'both'; - - handle.className = 'resize-handle'; - handle.setAttribute('data-resize', axis); - handle.addEventListener('mousedown', resizeStart); - elem.appendChild(handle); - }; - - /*========== Make an element draggable relative to it's parent ==========*/ - - var makeDraggable = function makeDraggable(elem, endFunction) { - - var offsetTop; - var offsetLeft; - - elem.setAttribute('data-draggable', 'true'); - - var dragStart = function dragStart(e) { - e.preventDefault(); - e.stopPropagation(); - - if (e.target.getAttribute('data-draggable') !== 'true' || - e.target !== elem || e.button !== 0) - return; - - offsetLeft = e.clientX - elem.offsetLeft; - offsetTop = e.clientY - elem.offsetTop; - - document.addEventListener('mousemove', mouseDrag); - document.addEventListener('mouseup', dragEnd); - }; - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - document.removeEventListener('mousemove', mouseDrag); - document.removeEventListener('mouseup', dragEnd); - }; - - var mouseDrag = function mouseDrag(e) { - elem.style.left = e.clientX - offsetLeft + 'px'; - elem.style.top = e.clientY - offsetTop + 'px'; - }; - - elem.addEventListener('mousedown', dragStart, false); - }; - - return { - makeResizable : makeResizable, - makeDraggable : makeDraggable - }; - - })(); - - /*========== Color Class ==========*/ - - var Color = UIColorPicker.Color; - var HSLColor = UIColorPicker.HSLColor; - - /** - * ColorPalette - */ - var ColorPalette = (function ColorPalette() { - - var samples = []; - var color_palette; - var complementary; - - var hideNode = function(node) { - node.setAttribute('data-hidden', 'true'); - }; - - var ColorSample = function ColorSample(id) { - var node = document.createElement('div'); - node.className = 'sample'; - - this.uid = samples.length; - this.node = node; - this.color = new Color(); - - node.setAttribute('sample-id', this.uid); - node.setAttribute('draggable', 'true'); - node.addEventListener('dragstart', this.dragStart.bind(this)); - node.addEventListener('click', this.pickColor.bind(this)); - - samples.push(this); - }; - - ColorSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - ColorSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { - this.color.copy(color); - var hue = (steps * degree + this.color.hue) % 360; - if (hue < 0) hue += 360; - this.color.setHue(hue); - this.updateBgColor(); - }; - - ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { - var saturation = color.saturation + value * steps; - if (saturation <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setSaturation(saturation); - this.updateBgColor(); - }; - - ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { - var lightness = color.lightness + value * steps; - if (lightness <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setLightness(lightness); - this.updateBgColor(); - }; - - ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { - var brightness = color.value + value * steps; - if (brightness <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setValue(brightness); - this.updateBgColor(); - }; - - ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { - var alpha = parseFloat(color.a) + value * steps; - if (alpha <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.a = parseFloat(alpha.toFixed(2)); - this.updateBgColor(); - }; - - ColorSample.prototype.pickColor = function pickColor() { - UIColorPicker.setColor('picker', this.color); - }; - - ColorSample.prototype.dragStart = function dragStart(e) { - e.dataTransfer.setData('sampleID', this.uid); - e.dataTransfer.setData('location', 'palette-samples'); - }; - - var Palette = function Palette(text, size) { - this.samples = []; - this.locked = false; - - var palette = document.createElement('div'); - var title = document.createElement('div'); - var controls = document.createElement('div'); - var container = document.createElement('div'); - var lock = document.createElement('div'); - - container.className = 'container'; - title.className = 'title'; - palette.className = 'palette'; - controls.className = 'controls'; - lock.className = 'lock'; - title.textContent = text; - - controls.appendChild(lock); - container.appendChild(title); - container.appendChild(controls); - container.appendChild(palette); - - lock.addEventListener('click', function () { - this.locked = !this.locked; - lock.setAttribute('locked-state', this.locked); - }.bind(this)); - - for(var i = 0; i < size; i++) { - var sample = new ColorSample(); - this.samples.push(sample); - palette.appendChild(sample.node); - } - - this.container = container; - this.title = title; - }; - - var createHuePalette = function createHuePalette() { - var palette = new Palette('Hue', 12); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 12; i++) { - palette.samples[i].updateHue(color, 30, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var createSaturationPalette = function createSaturationPalette() { - var palette = new Palette('Saturation', 11); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 11; i++) { - palette.samples[i].updateSaturation(color, -10, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - /* Brightness or Lightness - depends on the picker mode */ - var createVLPalette = function createSaturationPalette() { - var palette = new Palette('Lightness', 11); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - if(color.format === 'HSL') { - palette.title.textContent = 'Lightness'; - for(var i = 0; i < 11; i++) - palette.samples[i].updateLightness(color, -10, i); - } - else { - palette.title.textContent = 'Value'; - for(var i = 0; i < 11; i++) - palette.samples[i].updateBrightness(color, -10, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var isBlankPalette = function isBlankPalette(container, value) { - if (value === 0) { - container.setAttribute('data-collapsed', 'true'); - return true; - } - - container.removeAttribute('data-collapsed'); - return false; - }; - - var createAlphaPalette = function createAlphaPalette() { - var palette = new Palette('Alpha', 10); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 10; i++) { - palette.samples[i].updateAlpha(color, -0.1, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var getSampleColor = function getSampleColor(id) { - if (samples[id] !== undefined && samples[id]!== null) - return new Color(samples[id].color); - }; - - var init = function init() { - color_palette = getElemById('color-palette'); - - createHuePalette(); - createSaturationPalette(); - createVLPalette(); - createAlphaPalette(); - - }; - - return { - init : init, - getSampleColor : getSampleColor - }; - - })(); - - /** - * ColorInfo - */ - var ColorInfo = (function ColorInfo() { - - var info_box; - var select; - var RGBA; - var HEXA; - var HSLA; - - var updateInfo = function updateInfo(color) { - if (color.a | 0 === 1) { - RGBA.info.textContent = 'RGB'; - HSLA.info.textContent = 'HSL'; - } - else { - RGBA.info.textContent = 'RGBA'; - HSLA.info.textContent = 'HSLA'; - } - - RGBA.value.value = color.getRGBA(); - HSLA.value.value = color.getHSLA(); - HEXA.value.value = color.getHexa(); - }; - - var InfoProperty = function InfoProperty(info) { - - var node = document.createElement('div'); - var title = document.createElement('div'); - var value = document.createElement('input'); - var copy = document.createElement('div'); - - node.className = 'property'; - title.className = 'type'; - value.className = 'value'; - copy.className = 'copy'; - - title.textContent = info; - value.setAttribute('type', 'text'); - - copy.addEventListener('click', function() { - value.select(); - }); - - node.appendChild(title); - node.appendChild(value); - node.appendChild(copy); - - this.node = node; - this.value = value; - this.info = title; - - info_box.appendChild(node); - }; - - var init = function init() { - - info_box = getElemById('color-info'); - - RGBA = new InfoProperty('RGBA'); - HSLA = new InfoProperty('HSLA'); - HEXA = new InfoProperty('HEXA'); - - UIColorPicker.subscribe('picker', updateInfo); - - }; - - return { - init: init - }; - - })(); - - /** - * ColorPicker Samples - */ - var ColorPickerSamples = (function ColorPickerSamples() { - - var samples = []; - var nr_samples = 0; - var active = null; - var container = null; - var samples_per_line = 10; - var trash_can = null; - var base_color = new HSLColor(0, 50, 100); - var add_btn; - var add_btn_pos; - - var ColorSample = function ColorSample() { - var node = document.createElement('div'); - node.className = 'sample'; - - this.uid = samples.length; - this.index = nr_samples++; - this.node = node; - this.color = new Color(base_color); - - node.setAttribute('sample-id', this.uid); - node.setAttribute('draggable', 'true'); - - node.addEventListener('dragstart', this.dragStart.bind(this)); - node.addEventListener('dragover' , allowDropEvent); - node.addEventListener('drop' , this.dragDrop.bind(this)); - - this.updatePosition(this.index); - this.updateBgColor(); - samples.push(this); - }; - - ColorSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - ColorSample.prototype.updatePosition = function updatePosition(index) { - this.index = index; - this.posY = 5 + ((index / samples_per_line) | 0) * 52; - this.posX = 5 + ((index % samples_per_line) | 0) * 52; - this.node.style.top = this.posY + 'px'; - this.node.style.left = this.posX + 'px'; - }; - - ColorSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - ColorSample.prototype.activate = function activate() { - UIColorPicker.setColor('picker', this.color); - this.node.setAttribute('data-active', 'true'); - }; - - ColorSample.prototype.deactivate = function deactivate() { - this.node.removeAttribute('data-active'); - }; - - ColorSample.prototype.dragStart = function dragStart(e) { - e.dataTransfer.setData('sampleID', this.uid); - e.dataTransfer.setData('location', 'picker-samples'); - }; - - ColorSample.prototype.dragDrop = function dragDrop(e) { - e.stopPropagation(); - this.color = Tool.getSampleColorFrom(e); - this.updateBgColor(); - }; - - ColorSample.prototype.deleteSample = function deleteSample() { - container.removeChild(this.node); - samples[this.uid] = null; - nr_samples--; - }; - - var updateUI = function updateUI() { - updateContainerProp(); - - var index = 0; - var nr = samples.length; - for (var i=0; i < nr; i++) - if (samples[i] !== null) { - samples[i].updatePosition(index); - index++; - } - - AddSampleButton.updatePosition(index); - }; - - var deleteSample = function deleteSample(e) { - trash_can.parentElement.setAttribute('drag-state', 'none'); - - var location = e.dataTransfer.getData('location'); - if (location !== 'picker-samples') - return; - - var sampleID = e.dataTransfer.getData('sampleID'); - samples[sampleID].deleteSample(); - console.log(samples); - - updateUI(); - }; - - var createDropSample = function createDropSample() { - var sample = document.createElement('div'); - sample.id = 'drop-effect-sample'; - sample.className = 'sample'; - container.appendChild(sample); - }; - - var setActivateSample = function setActivateSample(e) { - if (e.target.className !== 'sample') - return; - - unsetActiveSample(active); - Tool.unsetVoidSample(); - CanvasSamples.unsetActiveSample(); - active = samples[e.target.getAttribute('sample-id')]; - active.activate(); - }; - - var unsetActiveSample = function unsetActiveSample() { - if (active) - active.deactivate(); - active = null; - }; - - var getSampleColor = function getSampleColor(id) { - if (samples[id] !== undefined && samples[id]!== null) - return new Color(samples[id].color); - }; - - var updateContainerProp = function updateContainerProp() { - samples_per_line = ((container.clientWidth - 5) / 52) | 0; - var height = 52 * (1 + (nr_samples / samples_per_line) | 0); - container.style.height = height + 10 + 'px'; - }; - - var AddSampleButton = (function AddSampleButton() { - var node; - var _index = 0; - var _posX; - var _posY; - - var updatePosition = function updatePosition(index) { - _index = index; - _posY = 5 + ((index / samples_per_line) | 0) * 52; - _posX = 5 + ((index % samples_per_line) | 0) * 52; - - node.style.top = _posY + 'px'; - node.style.left = _posX + 'px'; - }; - - var addButtonClick = function addButtonClick() { - var sample = new ColorSample(); - container.appendChild(sample.node); - updatePosition(_index + 1); - updateUI(); - }; - - var init = function init() { - node = document.createElement('div'); - var icon = document.createElement('div'); - - node.className = 'sample'; - icon.id = 'add-icon'; - node.appendChild(icon); - node.addEventListener('click', addButtonClick); - - updatePosition(0); - container.appendChild(node); - }; - - return { - init : init, - updatePosition : updatePosition - }; - })(); - - var init = function init() { - container = getElemById('picker-samples'); - trash_can = getElemById('trash-can'); - - AddSampleButton.init(); - - for (var i=0; i<16; i++) { - var sample = new ColorSample(); - container.appendChild(sample.node); - } - - AddSampleButton.updatePosition(samples.length); - updateUI(); - - active = samples[0]; - active.activate(); - - container.addEventListener('click', setActivateSample); - - trash_can.addEventListener('dragover', allowDropEvent); - trash_can.addEventListener('dragenter', function() { - this.parentElement.setAttribute('drag-state', 'enter'); - }); - trash_can.addEventListener('dragleave', function(e) { - this.parentElement.setAttribute('drag-state', 'none'); - }); - trash_can.addEventListener('drop', deleteSample); - - UIColorPicker.subscribe('picker', function(color) { - if (active) - active.updateColor(color); - }); - - }; - - return { - init : init, - getSampleColor : getSampleColor, - unsetActiveSample : unsetActiveSample - }; - - })(); - - /** - * Canvas Samples - */ - var CanvasSamples = (function CanvasSamples() { - - var active = null; - var canvas = null; - var samples = []; - var zindex = null; - var tutorial = true; - - var CanvasSample = function CanvasSample(color, posX, posY) { - - var node = document.createElement('div'); - var pick = document.createElement('div'); - var delete_btn = document.createElement('div'); - node.className = 'sample'; - pick.className = 'pick'; - delete_btn.className = 'delete'; - - this.uid = samples.length; - this.node = node; - this.color = color; - this.updateBgColor(); - this.zIndex = 1; - - node.style.top = posY - 50 + 'px'; - node.style.left = posX - 50 + 'px'; - node.setAttribute('sample-id', this.uid); - - node.appendChild(pick); - node.appendChild(delete_btn); - - var activate = function activate() { - setActiveSample(this); - }.bind(this); - - node.addEventListener('dblclick', activate); - pick.addEventListener('click', activate); - delete_btn.addEventListener('click', this.deleteSample.bind(this)); - - UIComponent.makeDraggable(node); - UIComponent.makeResizable(node); - - samples.push(this); - canvas.appendChild(node); - return this; - }; - - CanvasSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - CanvasSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - CanvasSample.prototype.updateZIndex = function updateZIndex(value) { - this.zIndex = value; - this.node.style.zIndex = value; - }; - - CanvasSample.prototype.activate = function activate() { - this.node.setAttribute('data-active', 'true'); - zindex.setAttribute('data-active', 'true'); - - UIColorPicker.setColor('picker', this.color); - InputSliderManager.setValue('z-index', this.zIndex); - }; - - CanvasSample.prototype.deactivate = function deactivate() { - this.node.removeAttribute('data-active'); - zindex.removeAttribute('data-active'); - }; - - CanvasSample.prototype.deleteSample = function deleteSample() { - if (active === this) - unsetActiveSample(); - canvas.removeChild(this.node); - samples[this.uid] = null; - }; - - CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { - this.node.style.top = posY - this.startY + 'px'; - this.node.style.left = posX - this.startX + 'px'; - }; - - var canvasDropEvent = function canvasDropEvent(e) { - var color = Tool.getSampleColorFrom(e); - - if (color) { - var offsetX = e.pageX - canvas.offsetLeft; - var offsetY = e.pageY - canvas.offsetTop; - var sample = new CanvasSample(color, offsetX, offsetY); - if (tutorial) { - tutorial = false; - canvas.removeAttribute('data-tutorial'); - var info = new CanvasSample(new Color(), 100, 100); - info.node.setAttribute('data-tutorial', 'dblclick'); - } - } - - }; - - var setActiveSample = function setActiveSample(sample) { - ColorPickerSamples.unsetActiveSample(); - Tool.unsetVoidSample(); - unsetActiveSample(); - active = sample; - active.activate(); - }; - - var unsetActiveSample = function unsetActiveSample() { - if (active) - active.deactivate(); - active = null; - }; - - var createToggleBgButton = function createToggleBgButton() { - var button = document.createElement('div'); - var state = false; - button.className = 'toggle-bg'; - canvas.appendChild(button); - - button.addEventListener('click', function() { - console.log(state); - state = !state; - canvas.setAttribute('data-bg', state); - }); - }; - - var init = function init() { - canvas = getElemById('canvas'); - zindex = getElemById('zindex'); - - canvas.addEventListener('dragover', allowDropEvent); - canvas.addEventListener('drop', canvasDropEvent); - - createToggleBgButton(); - - UIColorPicker.subscribe('picker', function(color) { - if (active) active.updateColor(color); - }); - - InputSliderManager.subscribe('z-index', function (value) { - if (active) active.updateZIndex(value); - }); - - UIComponent.makeResizable(canvas, 'height'); - }; - - return { - init : init, - unsetActiveSample : unsetActiveSample - }; - - })(); - - var StateButton = function StateButton(node, state) { - this.state = false; - this.callback = null; - - node.addEventListener('click', function() { - this.state = !this.state; - if (typeof this.callback === "function") - this.callback(this.state); - }.bind(this)); - }; - - StateButton.prototype.set = function set() { - this.state = true; - if (typeof this.callback === "function") - this.callback(this.state); - }; - - StateButton.prototype.unset = function unset() { - this.state = false; - if (typeof this.callback === "function") - this.callback(this.state); - }; - - StateButton.prototype.subscribe = function subscribe(func) { - this.callback = func; - }; - - - /** - * Tool - */ - var Tool = (function Tool() { - - var samples = []; - var controls = null; - var void_sw; - - var createPickerModeSwitch = function createPickerModeSwitch() { - var parent = getElemById('controls'); - var icon = document.createElement('div'); - var button = document.createElement('div'); - var hsv = document.createElement('div'); - var hsl = document.createElement('div'); - var active = null; - - icon.className = 'icon picker-icon'; - button.className = 'switch'; - button.appendChild(hsv); - button.appendChild(hsl); - - hsv.textContent = 'HSV'; - hsl.textContent = 'HSL'; - - active = hsl; - active.setAttribute('data-active', 'true'); - - function switchPickingModeTo(elem) { - active.removeAttribute('data-active'); - active = elem; - active.setAttribute('data-active', 'true'); - UIColorPicker.setPickerMode('picker', active.textContent); - }; - - var picker_sw = new StateButton(icon); - picker_sw.subscribe(function() { - if (active === hsv) - switchPickingModeTo(hsl); - else - switchPickingModeTo(hsv); - }); - - hsv.addEventListener('click', function() { - switchPickingModeTo(hsv); - }); - hsl.addEventListener('click', function() { - switchPickingModeTo(hsl); - }); - - parent.appendChild(icon); - parent.appendChild(button); - }; - - var setPickerDragAndDrop = function setPickerDragAndDrop() { - var preview = document.querySelector('#picker .preview-color'); - var picking_area = document.querySelector('#picker .picking-area'); - - preview.setAttribute('draggable', 'true'); - preview.addEventListener('drop', drop); - preview.addEventListener('dragstart', dragStart); - preview.addEventListener('dragover', allowDropEvent); - - picking_area.addEventListener('drop', drop); - picking_area.addEventListener('dragover', allowDropEvent); - - function drop(e) { - var color = getSampleColorFrom(e); - UIColorPicker.setColor('picker', color); - }; - - function dragStart(e) { - e.dataTransfer.setData('sampleID', 'picker'); - e.dataTransfer.setData('location', 'picker'); - }; - }; - - var getSampleColorFrom = function getSampleColorFrom(e) { - var sampleID = e.dataTransfer.getData('sampleID'); - var location = e.dataTransfer.getData('location'); - - if (location === 'picker') - return UIColorPicker.getColor(sampleID); - if (location === 'picker-samples') - return ColorPickerSamples.getSampleColor(sampleID); - if (location === 'palette-samples') - return ColorPalette.getSampleColor(sampleID); - }; - - var setVoidSwitch = function setVoidSwitch() { - var void_sample = getElemById('void-sample'); - void_sw = new StateButton(void_sample); - void_sw.subscribe( function (state) { - void_sample.setAttribute('data-active', state); - if (state === true) { - ColorPickerSamples.unsetActiveSample(); - CanvasSamples.unsetActiveSample(); - } - }); - }; - - var unsetVoidSample = function unsetVoidSample() { - void_sw.unset(); - }; - - var init = function init() { - controls = getElemById('controls'); - - var color = new Color(); - color.setHSL(0, 51, 51); - UIColorPicker.setColor('picker', color); - - setPickerDragAndDrop(); - createPickerModeSwitch(); - setVoidSwitch(); - }; - - return { - init : init, - unsetVoidSample : unsetVoidSample, - getSampleColorFrom : getSampleColorFrom - }; - - })(); - - var init = function init() { - UIColorPicker.init(); - InputSliderManager.init(); - ColorInfo.init(); - ColorPalette.init(); - ColorPickerSamples.init(); - CanvasSamples.init(); - Tool.init(); - }; - - return { - init : init - }; - -})(); -</pre> -</div> - -<p> </p> - -<p>{{CSSRef}}</p> - -<p>Esta ferramenta facilita a criação, ajuste, e experimentação de cores personalizadas na internet. Também facilita conversão entre vários <a href="/en-US/docs/Web/CSS/color_value">formatos de cor</a> disponíveis em <a href="/pt-PT/docs/Web/CSS">CSS</a>, incluindo: HEXA colors, RGB (Red/Green/Blue) e HSL (Hue/Saturation/Lightness). Também é possível controlar o canal alfa nos formatos RGB (rgba) and HSL (hsla).</p> - -<p>Ao ajustar os parâmetros que definem a cor, a mesma é mostrada nos três formatos padrão de CSS na internet. Além disso, com base na cor atualmente selecionada, é gerada uma paleta para HSL e HSV, assim como alfa. A caixa de seleção de cores no estilo "conta-gotas" pode mudar entre HSL e HSV. Também pode testar as cores e ver como se intersetam arrastando-as para a caixa por baixo da ferramenta e deslocando-as para o mesmo ponto. Ajuste o valor do índice-Z relativo para as mover para a frente e para trás umas das outras.</p> - -<p>Esta ferramenta vai ajudá-lo a identificar as cores perfeitas para o CSS do seu <a href="/pt-PT/docs/Web/HTML">HTML</a>.</p> - -<p>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</p> - -<p>As cores que gerou em cima podem ser usadas em qualquer sítio que estaria uma cor em CSS e/ou HTML, salvo indicação em contrário.</p> - -<h2 id="See_also">See also</h2> - -<p>Para mais informações sobre cores, consulte estes artigos:</p> - -<ul> - <li><a href="/pt-PT/docs/Web/HTML/Aplicar_cor_elementos_HTML_utilizando_CSS">Aplicar cor aos elementos HTML com CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamentos de estilização de texto e tipos de letra</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Estilizar contornos com CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Mudar estilo do fundo com CSS</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Cor e contraste</a></li> -</ul> - -<p> </p> - -<ul> - <li> </li> -</ul> diff --git a/files/pt-pt/web/css/css_columns/index.html b/files/pt-pt/web/css/css_columns/index.html deleted file mode 100644 index 6a356077b5..0000000000 --- a/files/pt-pt/web/css/css_columns/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: CSS Multi-column Layout -slug: Web/CSS/CSS_Columns -tags: - - CSS - - CSS Multi-column Layout - - Layout - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Columns ---- -<div>{{CSSRef("CSS3 Multicol")}}</div> - -<p>The <strong>CSS Multi-column Layout</strong> standard is a CSS module that adds support for multi-column layouts to CSS. This module makes it easier and more reliable than ever to produce columnar layouts without having to hand-code complicated and fragile structures. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes, column dividing lines (known as column rules), and so forth.</p> - -<h2 id="Multi-column_layout_basics">Multi-column layout basics</h2> - -<p>The three key properties used to produce the layout of columns in CSS are {{cssxref("column-count")}}, {{cssxref("column-width")}}, and {{cssxref("column-gap")}}. Other properties provide ways to fine-tune details of how things are organized and rendered within the layout structure built using those properties, but the job of figuring out what goes where is generally handled by these four.</p> - -<h3 id="Suggesting_the_number_of_columns_and_their_widths">Suggesting the number of columns and their widths</h3> - -<p>The first two properties, <code>column-count</code> and <code>column-width</code>, are both the most important and the most potentially misleading. It's important to understand that:</p> - -<ul> - <li>The {{cssxref("column-count")}} property specifies a <em>maximum</em> number of columns to use to render the text. The browser will consider the amount of horizontal space available, the value of <code>column-width</code>, and the value of <code>column-gap</code>, then draw the largest number of columns across that it can fit into the available space.</li> - <li>The {{cssxref("column-width")}} property specifies a <em>minimum</em> column width, given a {{cssxref("length")}} value. Each column the browser creates will be at least this wide, but may be wider. After determining the number of columns that it will draw, any remaining horizontal space may be divided up by the browser among the columns and added to their widths.</li> -</ul> - -<p>In a way, then, they're more like recommendations than hard and fast rules. And this makes sense once you consider the logic of it; this allows multi-column layouts to be responsive and adaptive to the screen width, while also supporting the overall layout of the page and the intent of the author. As the width of the containing space (or the screen) shrinks, the browser will reduce the number of columns it creates, adjusting the remaining columns' widths to ensure that the overall width is as expected.</p> - -<p>The other thing you can control is the distance between the columns, known as the column gap. The column gap can be controlled using the {{cssxref("column-gap")}} property. By convention, the default gap is <code>1em</code>, but this may or may not be the case in any given browser, so if it matters to you, explicitly set it. The column gap, unlike the column count and width, doesn't get adjusted by the browser as it tries to fit the content into the available space.</p> - -<p>Take a look at the example below, in which you can use the range control at the top to adjust the width of the columns' containing element.</p> - -<div class="hidden"> -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><p> - Use the slider to change the container width: -</p> -<div class="controls"> - <input type="range" id="widthSlider" min="350" max="625"> - <span id="widthDisplay"></span> -</div> -<div class="columnbox"> -<p> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Praesent dignissim feugiat tellus, vitae vehicula nunc - fermentum at. Nulla ut leo tincidunt turpis tincidunt - facilisis vel sit amet nisl. Duis odio mauris, ornare vitae - est eget, molestie aliquet quam. Quisque sed lacus sodales - nulla dignissim semper. Mauris finibus erat ut molestie - sagittis. Maecenas eget augue dapibus eros mollis - consectetur quis a mauris. Ut quis ipsum egestas, molestie - augue id, lobortis neque. Sed malesuada id justo nec - accumsan. Curabitur non tempus ligula, ut congue libero. - Morbi mattis, neque at feugiat rutrum, ipsum massa iaculis - risus, ut rutrum justo purus et urna. Aenean semper ornare - enim, maximus tincidunt ante tincidunt sed. Fusce imperdiet - id tellus molestie laoreet. -</p> -<p> - Sed non fringilla turpis, ac fermentum neque. Nunc tortor - sapien, convallis in odio dictum, maximus hendrerit metus. - Phasellus vitae molestie lacus, sed imperdiet enim. Praesent - tempus ligula eget orci interdum, et tempus nunc rutrum. - Cras vel arcu non ipsum sodales faucibus vestibulum eu mi. - Fusce sed laoreet turpis, eu rutrum leo. Vestibulum sit amet - porta mauris. Curabitur in nisi a neque ultricies iaculis - sit amet vel felis. Suspendisse lobortis iaculis gravida. Ut - bibendum vestibulum lacus eget dignissim. -</p> -</div></pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">let widthSlider = document.getElementById("widthSlider"); -let widthDisplay = document.getElementById("widthDisplay"); -let columnBox = document.querySelector(".columnbox"); - -widthSlider.value = columnBox.offsetWidth; -widthDisplay.innerText = widthSlider.value; - -widthSlider.addEventListener("input", function(event) { - columnBox.style.width = widthSlider.value.toString() + "px"; - widthDisplay.innerText = widthSlider.value; -}, false);</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">body { - font: 16px "Open Sans", "Arial", "sans-serif"; -} - -.columnbox { - width: 400px; - column-count: 3; - column-width: 12em; - border: 1px dotted black; -} - -.columnbox p:first-child { - margin-top: 0; -} - -.controls { - font: 16px "Open Sans", "Arial", sans-serif; -}</pre> - -<h4 id="Result">Result</h4> -</div> - -<p>{{EmbedLiveSample("Suggesting_the_number_of_columns_and_their_widths", 650, 800)}}</p> - -<h3 id="Text_wrapping_in_multi-column_layouts">Text wrapping in multi-column layouts</h3> - -<p>The {{cssxref("column-fill")}} property also affects layout. By default, the browser will create as many appropriately-sized columns as it can, then balance the contents across them so that each column is approximately the same length. If, however, you prefer to have the browser fill the first column to its maximum height before moving on to the next column, you can set <code>column-fill</code> to <code>auto</code> (instead of the default, <code>balance</code>).</p> - -<p>If there is no constraint on the column height, however, there will only be one column created, as it will never reach its maximum height to trigger wrapping to the second column, so be sure to either place your columns inside a container which constrains their height, either by using {{cssxref("height")}} or {{cssxref("max-height")}}.</p> - -<div class="note"> -<p>While the CSS specification defines the {{cssxref("break-before")}}, {{cssxref("break-after")}}, and {{cssxref("break-inside")}} properties to help control wrapping of elements across region, column, or page boundaries, these properties are generally not implemented widely enough to use in real-world code at this time.</p> -</div> - -<h3 id="Column_appearance">Column appearance</h3> - -<p>You can specify that a column rule—a dividing line drawn in the center of each column gap—be drawn between each column in the rendered output of your layout by using the {{cssxref("column-rule-style")}}, {{cssxref("column-rule-width")}}, and {{cssxref("column-rule-color")}} properties, or the shorthand property {{cssxref("column-rule")}}.</p> - -<h2 id="Reference">Reference</h2> - -<h3 id="CSS_properties">CSS properties</h3> - -<div class="index"> -<ul> - <li>{{cssxref("break-after")}}</li> - <li>{{cssxref("break-before")}}</li> - <li>{{cssxref("break-inside")}}</li> - <li>{{cssxref("column-count")}}</li> - <li>{{cssxref("column-fill")}}</li> - <li>{{cssxref("column-gap")}}</li> - <li>{{cssxref("column-rule")}}</li> - <li>{{cssxref("column-rule-color")}}</li> - <li>{{cssxref("column-rule-style")}}</li> - <li>{{cssxref("column-rule-width")}}</li> - <li>{{cssxref("column-span")}}</li> - <li>{{cssxref("column-width")}}</li> - <li>{{cssxref("columns")}}</li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Using CSS multi-column layouts</a></dt> - <dd>Step-by-step tutorial about how to build layouts using several columns.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Multicol')}}</td> - <td>{{Spec2('CSS3 Multicol')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}} {{property_prefix('-webkit')}}</td> - <td>{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}<br> - {{CompatGeckoDesktop(52)}}</td> - <td>10</td> - <td>11.10<br> - 15{{property_prefix('-webkit')}}</td> - <td>3.0 (522){{property_prefix('-webkit')}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>2.1{{property_prefix('-webkit')}}</td> - <td>{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}<br> - {{CompatGeckoMobile(52)}}</td> - <td>10</td> - <td>11.5<br> - 32{{property_prefix('-webkit')}}</td> - <td>3.2{{property_prefix('-webkit')}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<p>Other CSS layout technologies include:</p> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible box layout</a> (CSS flexbox)</li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid layout</a></li> -</ul> diff --git a/files/pt-pt/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/pt-pt/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html deleted file mode 100644 index 2c778a9dd6..0000000000 --- a/files/pt-pt/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Alinhamento de Itens num Recipiente Flex -slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container -tags: - - Alinhar - - CSS - - Flex - - Guía - - align-content - - align-items - - align-self - - alinhamento - - flexbox - - justificar - - justify-content -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container -original_slug: Web/CSS/CSS_Flexible_Box_Layout/alinhamento_de_itens_num_recipiente_flex ---- -<p>{{CSSRef}}</p> - -<p class="summary">Uma das razões pelas quais o flexbox atraiu rapidamente o interesse dos programadores da Web é que este trouxe os melhores recursos de alinhamento para a Web, pela primeira vez. Este permitiu o alinhamento vertical adequado, e assim nós podemos finalmente, centrar uma caixa facilmente. Neste guia, Nós iremos analisar detalhadamente como as propriedades de alinhamento e justificação funcionam no Flexbox.</p> - -<p>Para centrar a nossa caixa, nós utilizamos a propriedade <code>align-items</code> para alinhar o nosso item no eixo transversal, que neste caso é o eixo do bloco na vertical. Nós utilizamos o <code>justify-content</code> para alinhar o item no eixo principal, que neste caso é o eixo horizontal.</p> - -<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> - -<p> </p> - -<p>Podem ver o código do exemplo abaixo. Muda o tamanho do <em>container</em> ou do elemento aninhado e o elemento aninhado permanecerá centrado.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> - -<h2 id="Propriedades_que_controlam_o_alinhamento">Propriedades que controlam o alinhamento</h2> - -<p>As propriedades que nós iremos ver neste guia são as seguintes:</p> - -<ul> - <li>{{cssxref("justify-content")}} — controla o alinhamento de todos os itens no eixo principal.</li> - <li>{{cssxref("align-items")}} — controla o alinhamento de todos os itens no eixo transversal.</li> - <li>{{cssxref("align-self")}} — controla o alinhamento de um item <em>flex </em>individual no eixo transversal.</li> - <li>{{cssxref("align-content")}} — descrito na especificação como para “empacotar linhas do <em>flex</em>”; controla o espaço entre as linhas do <em>flex</em> no eixo das coordenadas.</li> -</ul> - -<p>Vamos também descobrir como as margens automáticas podem ser utilizadas para alinhamento em <em>flexbox</em>.</p> - -<div class="note"> -<p><strong>Nota</strong>: As propriedades de alinhamento em <em>Flexbox</em> foram colocadas na sua própria especificação — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. É expectável que esta especificação irá enfim substituir as propriedades definidas em <em>Flexbox Level One</em>.</p> -</div> - -<h2 id="O_Eixo_Transversal">O Eixo Transversal</h2> - -<p>As propriedades <code>align-items</code> e <code>align-self</code> controlam o alinhamento dos nossos itens da <em>flex</em> no eixo transversal, pelas colunas se a <code>flex-direction</code> for <code>row</code> e ao longo da linha se a <code>flex-direction</code> for <code>column</code>.</p> - -<p>Estamos a dar uso do alinhamento no eixo transversalno exemplo mais fácil do <em>flex</em>. Se adicionarmos <code>display: flex</code> a um <em>container</em>, os sub-elementos tornarão-se todos itens da <em>flex</em> numa linha. Irão esticar-se para serem tão altos quanto o item mais alto, já que esse item está a definir a altura dos itens do eixo transversal. Se o teu <em>flex container</em> tiver uma altura definida, então os itens irão esticar até essa altura, independentemente de quanto conteúdo estiver no item.</p> - -<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p> - -<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p> - -<p>A razão pela qual os items ficam da mesma altura é porque o valor inicial do <code>align-items</code>, a propriedade que controla o alinhamento no eixo transversal, está definida para <code>stretch</code>.</p> - -<p>Podemos utilizar outros valores para controlar de que forma os itens se alinham:</p> - -<ul> - <li><code>align-items: flex-start</code></li> - <li><code>align-items: flex-end</code></li> - <li><code>align-items: center</code></li> - <li><code>align-items: stretch</code></li> - <li><code>align-items: baseline</code></li> -</ul> - -<p>No exemplo de baixo, o valor do <code>align-items</code> é <code>stretch</code>. Experimenta os outros valores e observa como todos os itens se alinham em relação aos outros no <em>flex container</em>.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p> - -<h3 id="Alinhar_um_item_com_align-self">Alinhar um item com <em><code>align-self</code></em></h3> - -<p>A propriedade <code>align-items</code> define a propriedade <code>align-self</code> em todos os itens da <em>flex </em>como um grupo. Isto significa que tu podes explicitamente declarar a propriedade <code>align-self</code> para visar um único item. A propriedade <code>align-self</code> aceita todos os valores da <code>align-items</code> , mais o valor <code>auto</code>, que irá dar <em>reset</em> ao valor definido na <em>flex container</em>.</p> - -<p>Neste próximo exemplo, o <em>flex container</em> tem <code>align-items: flex-start</code>, o que significa que os itens estão todos alinhados com o início do eixo transversal. Eu visei o primeiro item utilizado um <code>first-child</code> e defini esse item para <code>align-items: stretch</code>; outro item foi selecionado utilizando a sua classe de <code>selected</code> e foi-lhe dado <code>align-items: </code><code>center</code>. Podes alterar o valor do <code>align-items</code> ou os valores do <code>align-self</code> em itens individuais para veres como funciona.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p> - -<h3 id="Alteração_do_eixo_principal">Alteração do eixo principal</h3> - -<p>Até agora observámos o comportamento quando o nosso <code>flex-direction</code> é <code>row</code>, enquanto trabalhamos numa linguagem escrita de cima a baixo. Isto significa que o eixo principal "corre" horizontalmente, e o alinhamento do nosso eixo transversal muda os itens para cima e para baixo.</p> - -<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p> - -<p>Se nós mudarmos o nosso <code>flex-direction</code> para <code>column</code>, o <code>align-items</code> e o <code>align-self</code> irão alinhar os itens para a esquerda e para a direita.</p> - -<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p> - -<p>Podes testar isto no exemplo abaixo, que tem um <em>flex container</em> com <code>flex-direction: column</code> mas de resto, é exatamente igual ao exemplo anterior.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p> - -<h2 id="Alinhar_conteúdo_no_eixo_transversal_—_a_propriedade_align-content">Alinhar conteúdo no eixo transversal — a propriedade <em>align-content</em></h2> - -<p>Até agora temos estado a alinhar os itens, ou um item individual, dentro da área definida pelo <em>flex-container</em>. Se tu tiveres um <em>wrapped multiple-line flex container</em> então também poderás querer utilizar a propriedade <code>align-content</code> para controlar a distribuição do espaço entrelinhas. Na especificação isto é descrito como <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">empacotar as linhas do <em>flex</em></a>.</p> - -<p>Para o <code>align-content</code> funcionar, precisarás de mais altura no teu <em>flex container</em> do que é necessário para mostrar os itens. Irá então afetar todos os itens como um conjunto, e ditará o que irá acontecer com esse espaço livre, e o alinhamento do conjunto inteiro de itens dentro dele.</p> - -<p>A propriedade <code>align-content</code> aceita os seguintes valores:</p> - -<ul> - <li><code>align-content: flex-start</code></li> - <li><code>align-content: flex-end</code></li> - <li><code>align-content: center</code></li> - <li><code>align-content: space-between</code></li> - <li><code>align-content: space-around</code></li> - <li><code>align-content: stretch</code></li> - <li><code>align-content: space-evenly</code> (não definido na especificação da <em>Flexbox</em>)</li> -</ul> - -<p>No exemplo abaixo, o <em>flex container</em> tem uma altura de 400 pixels, o que é mais do que necessário para mostrar os nossos itens. O valor do <code>align-content</code> é <code>space-between</code>, o que significa que o espaço disponível é partilhado entre as linhas da <em>flex</em>, que está posicionada nívelado com o início e o fim do <em>container</em> no eixo transversal.</p> - -<p>Experimenta os outros valores para veres como a propriedade <code>align-content</code> funciona.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p> - -<p>Mais uma vez podemos alterar o nosso <code>flex-direction</code> para <code>column</code> de forma a observar como esta propriedade se comporta quando estamos a trabalhar por coluna. Tal como anteriormente, precisamos de espaço suficiente no eixo transversal para ter algum espaço livre depois de mostrar todos os itens.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p> - -<div class="note"> -<p><strong>Nota</strong>: o valor <code>space-evenly</code> não está definido na especificação da <em>flexbox</em> e será uma adição posterior à especificação do Alinhamento da Caixa. O suporte dos navegadores para este valor não é tão bom quanto o suporte para os valore definidos na especificação da <em>flexbox</em>.</p> -</div> - -<p>Lê a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentação para o <code>justify-content</code> no MDN</a> para mais detalhes sobre todos estes valores, e o seu suporte em navegadores.</p> - -<h2 id="Alinhar_conteúdo_no_eixo_principal">Alinhar conteúdo no eixo principal</h2> - -<p>Agora que já vimos como o alinhamento funciona no eixo transversal, podemos dar uma olhada no eixo principal. Aqui temos apenas uma propriedade disponível — <code>justify-content</code>. Isto é porque apenas estaremos a lidar como itens como se fossem um grupo no eixo principal. Com o <code>justify-content</code> we control what happens with available space, should there be more space than is needed to display the items.</p> - -<p>In our initial example with <code>display: flex</code> on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of <code>justify-content</code> being <code>flex-start</code>. Any available space is placed at the end of the items.</p> - -<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> - -<p>The <code>justify-content</code> property accepts the same values as <code>align-content</code>.</p> - -<ul> - <li><code>align-content: flex-start</code></li> - <li><code>align-content: flex-end</code></li> - <li><code>align-content: center</code></li> - <li><code>align-content: space-between</code></li> - <li><code>align-content: space-around</code></li> - <li><code>align-content: stretch</code></li> - <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li> -</ul> - -<p>In the example below, the value of <code>justify-content</code> is <code>space-between</code>. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p> - -<p>If the main axis is in the block direction because <code>flex-direction</code> is set to <code>column</code>, then <code>justify-content</code> will distribute space between items in that dimension as long as there is space in the flex container to distribute.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p> - -<h3 id="Modos_de_Alinhamento_e_Gravação">Modos de Alinhamento e Gravação</h3> - -<p>Remember that with all of these alignment methods, the values of <code>flex-start</code> and <code>flex-end</code> are writing mode-aware. If the value of <code>justify-content</code> is <code>start</code> and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.</p> - -<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> - -<p>However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.</p> - -<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> - -<p>The live example below has the <code>direction</code> property set to <code>rtl</code> to force a right-to-left flow for our items. You can remove this, or change the values of <code>justify-content</code> to see how flexbox behaves when the start of the inline direction is on the right.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p> - -<h2 id="Alinhamento_e_flex-direction">Alinhamento e <em>flex-direction</em></h2> - -<p>The start line will also change if you change the <code>flex-direction</code> property — for example using <code>row-reverse</code> instead of <code>row</code>.</p> - -<p>In this next example I have items laid out with <code>flex-direction: row-reverse</code> and <code>justify-content: flex-end</code>. In a left to right language the items all line up on the left. Try changing <code>flex-direction: row-reverse</code> to <code>flex-direction: row</code>. You will see that the items now move to the right hand side.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p> - -<p>While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. <code>flex-start</code> will be where the start of a sentence of text would begin.</p> - -<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> - -<p>You can switch them to display in the block direction for the language of your document by selecting <code>flex-direction: column</code>. Then <code>flex-start</code> will then be where the top of your first paragraph of text would start.</p> - -<p><img alt="Diagram showing start and the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> - -<p>If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. <code>flex-start</code> will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.</p> - -<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> - -<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> - -<h2 id="Utilização_de_margen_automáticas_para_o_alinhamento_do_eixo_principal">Utilização de margen automáticas para o alinhamento do eixo principal</h2> - -<p>We don’t have a <code>justify-items</code> or <code>justify-self</code> property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.</p> - -<p>A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a <code>justify-self</code> property, however consider the image below. I have three items on one side and two on the other. If I were able to use <code>justify-self</code> on item <em>d</em>, it would also change the alignment of item <em>e</em> that follows, which may or may not be my intention.</p> - -<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> - -<p>Instead we can target item 4 and separate it from the first three items by giving it a <code>margin-left</code> value of <code>auto</code>. Auto margins will take up all of the space that they can in their axis — it is how entering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.</p> - -<p>In this live example, I have flex items arranged simply into a row with the basic flex values, and the class <code>push</code> has <code>margin-left: auto</code>. You can try removing this, or adding the class to another item to see how it works.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p> - -<h2 id="Funcionalidades_de_alinhamento_futuras_para_o_Flexbox">Funcionalidades de alinhamento futuras para o Flexbox</h2> - -<p>At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the <code>space-evenly</code> value for <code>align-content</code> and <code>justify-content</code> properties.</p> - -<p>The Box Alignment module also includes other methods of creating space between items, such as the <code>column-gap</code> and <code>row-gap</code> feature as seen in <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. The inclusion of these properties in Box Alignment means that in future we should be able to use <code>column-gap</code> and <code>row-gap</code> in flex layouts too. This will mean you won’t need to use margins to space out flex items.</p> - -<p>My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, and I have also compared how alignment works in these specifications in my <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p> diff --git a/files/pt-pt/web/css/css_flexible_box_layout/index.html b/files/pt-pt/web/css/css_flexible_box_layout/index.html deleted file mode 100644 index ec5c17b62e..0000000000 --- a/files/pt-pt/web/css/css_flexible_box_layout/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: CSS Flexible Box Layout -slug: Web/CSS/CSS_Flexible_Box_Layout -tags: - - CSS - - CSS Flexible Boxes - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Flexible_Box_Layout ---- -<div>{{CSSRef}}</div> - -<p class="summary"><strong>CSS Flexible Box Layout</strong> is a module of <a href="/en-US/docs/Web/CSS">CSS</a> that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.</p> - -<h2 id="Basic_Example">Basic Example</h2> - -<p>In the following example a container has been set to <code>display: flex</code>, which means that the three child items become flex items. The value of <code>justify-content</code> has been set to <code>space-between</code> in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of <code>align-items </code>being <code>stretch</code>. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> - -<h2 id="Reference">Reference</h2> - -<h3 id="CSS_Properties">CSS Properties</h3> - -<div class="index"> -<ul> - <li>{{cssxref("align-content")}}</li> - <li>{{cssxref("align-items")}}</li> - <li>{{cssxref("align-self")}}</li> - <li>{{cssxref("flex")}}</li> - <li>{{cssxref("flex-basis")}}</li> - <li>{{cssxref("flex-direction")}}</li> - <li>{{cssxref("flex-flow")}}</li> - <li>{{cssxref("flex-grow")}}</li> - <li>{{cssxref("flex-shrink")}}</li> - <li>{{cssxref("flex-wrap")}}</li> - <li>{{cssxref("justify-content")}}</li> - <li>{{cssxref("order")}}</li> -</ul> -</div> - -<h3 id="Glossary_entries">Glossary entries</h3> - -<div class="index"> -<ul> - <li><a href="/en-US/docs/Glossary/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Glossary/Flex_Container">Flex Container</a></li> - <li><a href="/en-US/docs/Glossary/Flex_Item">Flex Item</a></li> - <li><a href="/en-US/docs/Glossary/Main_Axis">Main Axis</a></li> - <li><a href="/en-US/docs/Glossary/Cross_Axis">Cross Axis</a></li> - <li><a href="/en-US/docs/Glossary/Flex">Flex</a></li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></dt> - <dd>An overview of the features of flexbox</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></dt> - <dd>How flexbox relates to other layout methods, and other CSS specifications</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></dt> - <dd>How the Box Alignment properties work with flexbox.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></dt> - <dd>Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></dt> - <dd>This article explains the flex-grow, flex-shrink and flex-basis properties.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></dt> - <dd>How to create flex containers with multiple lines and control the display of the items in those lines.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></dt> - <dd>Common design patterns that are typical flexbox use cases.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards compatibility of Flexbox</a></dt> - <dd>Browser status of flexbox, interoperability issues and supporting older browsers and versions of the spec</dd> -</dl> - -<h2 id="External_resources">External resources</h2> - -<ul> - <li><a href="https://github.com/philipwalton/flexbugs">Flexbugs — a community curated list of flexbox browser bugs and workarounds</a></li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Flexbox') }}</td> - <td>{{ Spec2('CSS3 Flexbox') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop("20.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>10.0{{property_prefix("-ms")}}<br> - 11.0</td> - <td>12.10</td> - <td>6.1{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown()}}</td> - <td>4.4</td> - <td>11</td> - <td>12.10</td> - <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/pt-pt/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/pt-pt/web/css/css_flexible_box_layout/ordering_flex_items/index.html deleted file mode 100644 index 3f17cfbffa..0000000000 --- a/files/pt-pt/web/css/css_flexible_box_layout/ordering_flex_items/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Ordenação do itens Flex -slug: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items -tags: - - Acessibilidade - - CSS - - Flex - - Guía - - direção - - flexbox - - ordem - - reverter -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items -original_slug: Web/CSS/CSS_Flexible_Box_Layout/ordenacao_dos_itens_flex ---- -<p>{{CSSRef}}</p> - -<p class="summary">Os novos métodos de layout, tais como Flexbox e Grielha trazem com eles a possibilidade de controlar a ordem do conteúdo. Neste artigo, nós iremos analisar as maneiras pelas quais pode alterar a ordem visual do seu conteúdo quando utilizar o Flexbox. Nós também iremos considerar as implicações de reordenar itens de um ponto de vista de acessibilidade. </p> - -<h2 id="Reverter_a_exibição_dos_itens">Reverter a exibição dos itens</h2> - -<p>The {{cssxref("flex-direction")}} property can take one of four values:</p> - -<ul> - <li><code>row</code></li> - <li><code>column</code></li> - <li><code>row-reverse</code></li> - <li><code>column-reverse</code></li> -</ul> - -<p>The first two values keep the items in the same order that they appear in the document source order and display them sequentially from the start line.</p> - -<p><img alt="The items are displayed in a row starting on the left." src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p> - -<p><img alt="The items are displayed as a column starting from the top " src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> - -<p>The second two values reverse the items by switching the start and end lines.</p> - -<p><img alt="The items are displayed in reverse order starting on the right-hand line." src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p> - -<p><img alt="The items are displayed in a column in reverse order starting at the bottom line." src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> - -<p>Remember that the start line relates to writing modes. The row-related examples above demonstrate how <code>row</code> and <code>row-reverse</code> work in a left-to-right language such as English. If you were working in a right-to-left language like Arabic then <code>row</code> would start on the right, <code>row-reverse</code> on the left.</p> - -<p><img alt="Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left." src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p> - -<p>This can seem like a neat way to display things in reverse order however you should be mindful that the items are only <em>visually</em> displayed in reverse order. The specification says the following on this matter:</p> - -<blockquote> -<p>“Nota: The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordering and Orientation</a></p> -</blockquote> - -<p>If your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order.</p> - -<p>If you are using a reverse value, or otherwise reordering your items, you should consider whether you actually need to change the logical order in the source. The specification continues with a warning not to use reordering to fix issues in your source:</p> - -<blockquote> -<p>“Authors must not use order or the <em>-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.” </em></p> -</blockquote> - -<div class="note"> -<p><strong>Nota</strong>: For some years Firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers. This has now been fixed. You should always take the source order as the logical order of the document as all up-to-date user agents will be following the specification and doing so.</p> -</div> - -<p>In the live example below I have added a focus style in order that as you tab from link to link you can see which is highlighted. If you change the order using <code>flex-direction</code> you can see how the tab order continues to follow the order that the items are listed in the source.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p> - -<p>In the same way that changing the value of <code>flex-direction</code> does not change the order in which items are navigated to, changing this value does not change paint order. It is a visual reversal of the items only.</p> - -<h2 id="A_propriedade_order">A propriedade <em><code>order</code></em></h2> - -<p>In addition to reversing the order in which flex items are visually displayed, you can target individual items and change where they appear in the visual order with the {{cssxref("order")}} property.</p> - -<p>The <code>order</code> property is designed to lay the items out in <em>ordinal groups</em>. What this means is that items are assigned an integer that represents their group. The items are then placed in the visual order according to that integer, lowest values first. If more than one item has the same integer value, then within that group the items are laid out as per source order.</p> - -<p>As an example, I have 5 flex items, and assign <code>order</code> values as follows:</p> - -<ul> - <li>Source item 1: <code>order: 2</code></li> - <li>Source item 2: <code>order: 3</code></li> - <li>Source item 3: <code>order: 1</code></li> - <li>Source item 4: <code>order: 3</code></li> - <li>Source item 5: <code>order: 1</code></li> -</ul> - -<p>These items would be displayed on the page in the following order:</p> - -<ul> - <li>Source item 3: <code>order: 1</code></li> - <li>Source item 5: <code>order: 1</code></li> - <li>Source item 1: <code>order: 2</code></li> - <li>Source item 2: <code>order: 3</code></li> - <li>Source item 4: <code>order: 3</code></li> -</ul> - -<p><img alt="Items have a number showing their source order which has been rearranged." src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p> - -<p>You can play around with the values in this live example below and see how that changes the order. Also, try changing <code>flex-direction</code> to <code>row-reverse</code> and see what happens — the start line is switched so the ordering begins from the opposite side.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p> - -<p>Flex items have a default <code>order</code> value of <code>0</code>, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit <code>order</code> value.</p> - -<p>You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave the order of all other items unchanged, you can give that item an order of <code>-1</code>. As this is lower than 0 the item will always be displayed first.</p> - -<p>In the live code example below I have items laid out using Flexbox. By changing which item has the class <code>active</code> assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p> - -<p>The items are displayed in what is described in the specification as <em>order-modified document order</em>. The value of the order property is taken into account before the items are displayed.</p> - -<p>Order also changes the paint order of the items; items with a lower value for <code>order</code> will be painted first and those with a higher value for <code>order</code> painted afterwards.</p> - -<h2 id="A_propriedade_order_e_acessibilidade">A propriedade <em>order</em> e acessibilidade</h2> - -<p>Use of the <code>order</code> property has exactly the same implications for accessibility as changing the direction with <code>flex-direction</code>. Using <code>order</code> changes the order in which items are painted, and the order in which they appear visually. It does not change the sequential navigation order of the items. Therefore if a user is tabbing between the items, they could find themselves jumping around your layout in a very confusing way.</p> - -<p>By tabbing around any of the live examples on this page, you can see how order is potentially creating a strange experience for anyone not using a pointing device of some kind. To read more about this disconnect of visual order and logical order and some of the potential problems it raises for accessibility, see the following resources.</p> - -<ul> - <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox and the keyboard navigation disconnect</a></li> - <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">HTML Source Order vs CSS Display Order</a></li> - <li><a href="https://alastairc.ac/2017/06/the-responsive-order-conflict">The Responsive Order Conflict for Keyboard Focus</a></li> -</ul> - -<h2 id="Casos_de_utilização_para_order">Casos de utilização para <em>order</em></h2> - -<p>There are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful. Used carefully the <code>order</code> property can allow for some useful common patterns to be easily implemented.</p> - -<p>You might have a design, perhaps a card that will display a news item. The heading of the news item is the key thing to highlight and would be the element that a user might jump to if they were tabbing between headings to find content they wanted to read. The card also has a date; the finished design we want to create is something like this.</p> - -<p><img alt="A design component with a date, then heading and then content." src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p> - -<p>Visually the date appears above the heading, in the source. However, if the card was read out by a screen reader I would prefer that the title was announced first and then the publication date. We can make this so using the <code>order</code> property.</p> - -<p>The card is going to be our flex container, with <code>flex-direction</code> set to column. I then give the date an <code>order</code> of <code>-1</code>. This pulls it up above the heading.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p> - -<p>These small tweaks are the sort of cases where the <code>order</code> property makes sense. Keep the logical order as the reading and tab order of the document, and maintain that in the most accessible and structured fashion. Then use <code>order</code> for purely visual design tweaks. When doing so take care that you are not reordering items that could be accessed by the keyboard as a user is tabbing around. Especially when using newer layout methods you should ensure that your browser testing includes testing the site using keyboard only, rather than a mouse or touchscreen. You will quickly see if your development choices make getting around the content difficult.</p> diff --git a/files/pt-pt/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/pt-pt/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html deleted file mode 100644 index 34e3a88d9b..0000000000 --- a/files/pt-pt/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Relação do flexbox com outros métodos de layout -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods -tags: - - CSS - - Guía - - Modo de Gravação - - alinhamento de caixa - - conteúdos - - exibição - - flexbox - - grelha -translation_of: >- - Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods -original_slug: >- - Web/CSS/CSS_Flexible_Box_Layout/relação_do_flexbox_com_outros_métodos_de_layout ---- -<div>{{CSSRef}}</div> - -<p class="summary">Neste artigo, nós iremos ver como o Flexbox se encaixa com todos os outros módulos de CSS. Nós iremos saber quais as especificações que também precisa de ter em consideração se quiser aprender flexboxm, e saber por que o flexbox é diferente de alguns outros módulos.</p> - -<div class="note"> -<p><strong>Nota</strong>: CSS versions 1 and 2 were a single monolithic specification where all of CSS was defined in one large document. As CSS became a more feature rich language, maintaining one huge specification became problematic, with different parts of CSS moving on at different speeds. CSS was therefore modularised, and the various CSS Specifications are different modules that make up CSS today. These modules relate to each other, and are at different stages of development.</p> -</div> - -<h2 id="O_módulo_de_alinhamento_de_caixa">O módulo de alinhamento de caixa</h2> - -<p>For many people the first reason they start to look at flexbox is because of the ability to properly align flex items inside a flex container. Flexbox provides access to properties that allow the alignment of items on their cross axis and justification of items on the main axis.</p> - -<p>These properties started life in the flexbox specification, but are now also part of the <a href="https://www.w3.org/TR/css-align-3/">Especificação de Alinhamento de Caixa</a> (inglês). This specification details how alignment works in all layout — not just flexbox. Box alignment deals with alignment and justification, and also distribution of space along an axis.</p> - -<p>The reason that the Box alignment properties remain detailed in the flexbox specification as well as being in box alignment is to ensure that completion of the flexbox spec is not held up by box alignment, which has to detail these methods for all layout types. There is a note in the flexbox spec stating that in future, once it is completed, the definitions in Box Alignment Level 3 will supercede those of flexbox:</p> - -<blockquote> -<p>"Note: While the alignment properties are defined in CSS Box Alignment <a href="">CSS-ALIGN-3</a>, Flexible Box Layout reproduces the definitions of the relevant ones here so as to not create a normative dependency that may slow down advancement of the spec. These properties apply only to flex layout until CSS Box Alignment Level 3 is finished and defines their effect for other layout modes. Additionally, any new values defined in the Box Alignment module will apply to Flexible Box Layout; in otherwords, the Box Alignment module, once completed, will supercede the definitions here."</p> -</blockquote> - -<p>In a later article in this series — Aligning items in a flex container — we will take a thorough look at how the Box Alignment properties apply to flex items.</p> - -<h3 id="As_propriedades_de_gap">As propriedades de <em>gap</em></h3> - -<p>A recent addition to the Box Alignment specification has been the {{cssxref("row-gap")}} and {{cssxref("column-gap")}} properties, long with the shorthand {{cssxref("gap")}}. These properties were initially defined in the CSS Grid specification and named <code>grid-row-gap</code>, <code>grid-column-gap</code> and <code>grid-gap</code>. They have been renamed and moved to Box Alignment in order that they can be used in all layout methods — this will ultimately include flexbox. Until browsers implement the <code>gap</code> properties for flexbox, {{cssxref("margin")}}s have to be used to create gaps between items.</p> - -<h2 id="Modos_de_Gravação">Modos de Gravação</h2> - -<p>In the <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic concepts of flexbox</a> article, I explained that flexbox is <strong>writing mode aware</strong>. Writing modes are fully detailed in the CSS <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes specification</a>, which details how CSS supports the various different writing modes that exist internationally. We need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. Understanding <strong>block</strong> and <strong>inline</strong> directions is key to new layout methods.</p> - -<p>It is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. See <a href="https://24ways.org/2016/css-writing-modes/">this article</a> for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons. </p> - -<h3 id="Os_modes_de_gravação">Os modes de gravação</h3> - -<p>The writing modes specification defines the following values of the {{cssxref("writing-mode")}} property, which serve to change the direction that blocks are laid out on the page, to match the direction that blocks lay out when content is formatted in that particular writing mode. You can change the live example below to these modes in order to see what happens to the flex layout.</p> - -<ul> - <li><code>horizontal-tb</code></li> - <li><code>vertical-rl</code></li> - <li><code>vertical-lr</code></li> - <li><code>sideways-rl</code></li> - <li><code>sideways-lr</code></li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p> - -<p>Note that <code>sideways-rl</code> and <code>sideways-lr</code> have support only in Firefox currently. There are also some known issues with regard to <code>writing-mode</code> and flexbox. You can see more information on browser support in the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">MDN documentation for writing-mode</a>. However if you are planning on using writing modes in your layout, carefully testing the results is advisable — not least because it would be easy to make things hard to read!</p> - -<p>Note that you would not normally use CSS and the <code>writing-mode</code> property to change an entire document to another writing mode. This would be done via HTML, by add a <code>dir</code> and <code>lang</code> attribute to the <code>html</code> element to indicate the document language and default text direction. This would mean that the document would display correctly even if CSS did not load.</p> - -<h2 id="Flexbox_e_outros_métodos_de_layout">Flexbox e outros métodos de <em>layout</em></h2> - -<p>The flexbox specification contains a <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">definition of what happens</a> if an item uses another layout method and then becomes a flex item. For example, if an item is floated and then its parent becomes a flex container. Or, how a flex container behaves as part of layout.</p> - -<p>An element set to <code>display: flex</code> behaves in most ways like any other block level container that establishes a containing block. Floats will not intrude, and the containers' margins will not collapse.</p> - -<p>With regard to flex items, if an item was floated or cleared and then becomes a flex item due to the parent having <code>display: flex</code> applied, the floating and clearing will no longer happen, and the item will not be taken out of normal flow in the way that floats are. If you have used the {{cssxref("vertical-align")}} property, as used with <code>inline-block</code> or table layout for alignment, this will no longer affect the item and you can use the alignment properties of flexbox instead.</p> - -<p>In this next live example the child elements have been floated, and then their container has had <code>display: flex</code> added. If you remove <code>display: flex</code>, you should see that the <code>.box</code> element collapses as we have no clearing applied. This demonstrates that the float is happening. Re-apply <code>display: flex</code> and the collapsing does not happen. This is because the items no longer have a float applied, as they have been transformed into flex items.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}</p> - -<h2 id="Flexbox_e_Layout_de_Grelha">Flexbox e <em>Layout</em> de Grelha</h2> - -<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> and Flexbox generally act in the same way with regards to overwriting other methods. You might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. This approach works very well. If a flex item becomes a grid item, then the <code>flex</code> properties that may have been assigned to the child elements will be ignored.</p> - -<p>You can use the Box Alignment properties across both layout methods, so using flexbox as a fallback for grid layout can work very well.</p> - -<h3 id="Flex_e_grelha_—_qual_é_a_diferença">Flex e grelha — qual é a diferença?</h3> - -<p>A common question is to ask what the difference is between Flexbox and CSS Grid Layout — why do we have two specifications that sometimes appear to be doing the same thing as each other?</p> - -<p>The most straightforward answer to this question is defined in the specifications themselves. Flexbox is a one-dimensional layout method whereas Grid Layout is a two-dimensional layout method. In the below example I have a flex layout. As already described in the Basic concepts article, flex items can be allowed to wrap but, once they do so, each line becomes a flex container of its own. When space is distributed flexbox does not look at the placement of items in other rows and tries to line things up with each other.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}</p> - -<p>If we create a very similar layout using Grid, we can control the layout in both rows and columns.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}</p> - -<p>These examples point to another key differences between these layout methods. In Grid Layout you do the majority of sizing specification on the container, setting up tracks and then placing items into them. In flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves.</p> - -<p>In some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your CSS. There is rarely a right or wrong answer.</p> - -<p>As a rule of thumb, if you are adding widths to flex items in order to make items in one row of a wrapped flex container line up with the items above them you really want two-dimensional layout. In this case it is likely that the component would be better laid out using CSS Grid Layout. It isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension. Try things out — we have a choice in layout method for the first time, so take advantage of it.</p> - -<p>For more comparisons of grid and flexbox see the article <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a>. This article details many of the ways that Grid Layout differs from flex layout, and demonstrates some of the extra functionality you get when using Grid Layout such as layering of items on the grid. This may also help in your decision as to which layout method to use.</p> - -<h2 id="Flexbox_e_exibição_conteúdos">Flexbox e exibição: conteúdos</h2> - -<p>The <code>contents</code> value of the {{cssxref("display")}} property is a new value that is described in the spec as follows:</p> - -<blockquote> -<p>“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”</p> -</blockquote> - -<p>This value of <code>display</code> controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is much easier to see with an example.</p> - -<p>In the following live example I have a flex container with three child elements. One of these flex items has two elements nested inside it, which would not ordinarily participate in flex layout. Flex layout only applies to the direct children of a flex container.</p> - -<p>By adding <code>display: contents</code> to the wrapper around the nested elements, you can see that that item has disappeared from the layout, allowing the two sub-children to be laid out as if they were direct children of the flex container. You can try removing the <code>display: contents</code> line to see it return.</p> - -<p>Note that this only removes the box from the layout; the sub-children don’t become direct children in any other way. You can see that as I have used a direct child selector to add the background and borders to the flex items, this has not been applied to our nested children. They have been laid out as flex items, but as they are not direct children they do not get the other styling.</p> - -<p>Also, having removed the box you cannot then use it to — for example — add a background colour behind the nested sub children. If you remove <code>display: contents</code> in this live example you will see that the direct child we are removing has an orange background colour. This also disappears when the box disappears. </p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}</p> - -<p>Browser support for <code>display:contents</code> is limited and required for this demo to work. Firefox supports <code>display: contents</code> already, and the value is being implemented in Chrome. Once there is better browser support this feature will be very useful in circumstances where you need the markup for semantic reasons but do not want to display the box that it would generate by default.</p> diff --git a/files/pt-pt/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/pt-pt/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html deleted file mode 100644 index 2c46d66a2c..0000000000 --- a/files/pt-pt/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Casos de utilização típicos do Flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -tags: - - CSS - - Caixa Flexível - - Flexible Box - - Guía - - flexbox - - padrões - - utilizações comuns -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -original_slug: Web/CSS/CSS_Flexible_Box_Layout/casos_de_utilizacao_tipicos_do_flexbox ---- -<p>{{CSSRef}}</p> - -<p class="summary">Neste guia, nós vamos dar uma vista de olhos em alguns dos casos de utilização comuns para o flexbox - esses lugares onde faz mais sentido do que outro método de layout .</p> - -<h2 id="Porque_escolher_flexbox">Porque escolher flexbox?</h2> - -<p>In a perfect world of browser support, the reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction or another. As you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items. These are the uses that flexbox was designed for. You can read more about the difference between flexbox and CSS Grid Layout in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of Flexbox to other layout methods</a>, where we discuss how flexbox fits into the overall picture of CSS Layout.</p> - -<p>In reality we also often use Flexbox for jobs that might be better done by Grid Layout, as a fallback for Grid, and also in order to get alignment capabilities. This is something that may well change once Box Alignment is implemented in Block Layout. In this guide I look at some of the typical things you might use flexbox for today.</p> - -<h2 id="Navegação">Navegação</h2> - -<p>A common pattern for navigation is to have a list of items displayed as a horizontal bar. This pattern, as basic as it seems, was difficult to achieve before flexbox. It forms the most simple of flexbox examples, and could be considered the ideal flexbox use case.</p> - -<p>When we have a set of items that we want to display horizontally, we may well end up with additional space. We need to decide what to do with that space, and have a couple of options. We either display the space outside of the items — therefore spacing them out with white space between or around them — or we absorb the extra space inside the items and therefore need a method of allowing the items to grow and take up this space.</p> - -<h3 id="Espaço_distribuído_fora_dos_itens">Espaço distribuído fora dos itens</h3> - -<p>To distribute the space between or around the items we use the alignment properties in flexbox, and the {{cssxref("justify-content")}} property. You can read more about this property in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a flex container</a>, which deals with aligning items on the main axis.</p> - -<p>In the below live example we display the items at their natural size and by using <code>justify-content: space-between</code> make equal amounts of space between the items. You can change how the space is distributed using the <code>space-around</code> value, or where supported, <code>space-evenly</code>. You could also use <code>flex-start</code> to place the space at the end of the items, <code>flex-end</code> to place it before them, or <code>center</code> to centre the navigation items.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p> - -<h3 id="Espaço_distribuído_dentro_dos_itens">Espaço distribuído dentro dos itens</h3> - -<p>A different pattern for navigation would be to distribute the available space within the items themselves, rather than create space between them. In this case we would use the {{cssxref("flex")}} properties to allow items to grow and shrink in proportion to one another as described in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling ratios of flex items along the main axis</a>.</p> - -<p>If I wanted all of my navigation items to have equal width, then I might use <code>flex: auto</code>, which is the shorthand for <code>flex: 1 1 auto</code> — all items grow and shrink from a flex-basis of auto. This would mean that the longer item would have more space.</p> - -<p>In the live example below try changing <code>flex: auto</code> to <code>flex: 1</code>. This is the shorthand for <code>flex: 1 1 0</code> and causes all of the items become the same width, as they are working from a flex-basis of 0 allowing all of the space to be distributed evenly.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p> - -<h2 id="Dividir_navegação">Dividir navegação</h2> - -<p>Another way to align items on the main axis is to use auto margins. This enables the design pattern of a navigation bar where one group of items are aligned left and another group aligned right.</p> - -<p>Here we are using the auto margins technique described in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">Using auto margins for main axis alignment</a>. The items are aligned on the main axis with <code>flex-start</code> as this is the initial behaviour of flexbox, and we are aligning the item on the right by giving it a left margin of auto. You can move the class from one item to another to change where the split happens.</p> - -<p>Also in this example we are using margins on the flex items to create a gap between items, and a negative margin on the container in order that the items still remain flush with the right and left edges. Until the <code>gap</code> properties from the Box Alignment specification are implemented in flexbox, we have to use margins in this way if we want to create a gutter between items.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p> - -<h2 id="Centrar_item">Centrar item</h2> - -<p>Before flexbox, developers would joke that the hardest problem in web design was vertical centering. This has now been made straightforward using the alignment properties in flexbox, as the following live example shows.</p> - -<p>You can play with the alignment, aligning the item to the start with <code>flex-start</code> or end with <code>flex-end</code>.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p> - -<p>In the future we may not need to make a container a flex container just to centre a single item, as the Box Alignment properties will ultimately be implemented in Block layout. For now however, if you need to properly centre one thing inside another, flexbox is the way to do it. As in the above example, make a container into a flex container, and then use either <code>align-items</code> on the parent element or target the flex item itself with <code>align-self</code>.</p> - -<h2 id="Card_layout_pushing_footer_down">Card layout pushing footer down</h2> - -<p>Whether you use flexbox or CSS Grid to lay out a list of card components, these layout methods only work on direct children of the flex or grid component. This means that if you have variable amounts of content, the card will stretch to the height of the grid area or flex container. Any content inside uses regular block layout, meaning that on a card with less content the footer will rise up to the bottom of the content rather than stick to the bottom of the card.</p> - -<p><img alt="Two card components showing that the internals of the component do not stretch with the wrapper." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p> - -<p>Flexbox can solve this. We make the card a flex container, with {{cssxref("flex-direction")}}<code>: column</code>. We then set the content area to <code>flex: 1</code>, which is the shorthand for <code>flex: 1 1 auto</code> — the item can grow and shrink from a flex basis of <code>auto</code>. As this is the only item that can grow, it takes up all available space in the flex container and pushes the footer to the bottom. If you remove the <code>flex</code> property from the live example you will see how the footer then moves up to sit directly under the content.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p> - -<h2 id="Objetos_de_multimédia">Objetos de multimédia</h2> - -<p>The media object is a common pattern in web design — this pattern has an image or other element to one side and text to the right. Ideally a media object should be able to be flipped — moving the image from left to right.</p> - -<p>We see this pattern everywhere, used for comments, and anywhere we need to display images and descriptions. With flexbox we can allow the part of the media object containing the image to take its sizing information from the image, and then the body of the media object flexes to take up the remaining space.</p> - -<p>In the live example below you can see our media object. I have used the alignment properties to align the items on the cross axis to <code>flex-start</code>, and then set the <code>.content</code> flex item to <code>flex: 1</code>. As with our column layout card pattern above, using <code>flex: 1</code> means this part of the card can grow.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p> - -<p>Some things that you might want to try in this live example relate to the different ways you might want to constrain the media object in your design.</p> - -<p>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 <code>flex-basis</code> of auto. Any {{cssxref("width")}} or max-width applied to the image will become the <code>flex-basis</code>.</p> - -<pre class="brush: css">.image img { - max-width: 100px; -} -</pre> - -<p>You could also allow both sides to grow and shrink in proportion. If you set both sides to <code>flex: 1</code>, 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 <code>flex: auto</code>, 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.</p> - -<pre class="brush: css">.media .content { - flex: 1; - padding: 10px; -} - -.image { - flex: 1; -}</pre> - -<p>You could also give each side different {{cssxref("flex-grow")}} factors, for example setting the side with the image to <code>flex: 1</code> and the content side to <code>flex: 3</code>. This will mean they use a <code>flex-basis</code> of <code>auto</code> but distribute that space at different rates according to the <code>flex-grow</code> factor you have assigned. The flex properties we use to do this are described in detail in the guide <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling ratios of flex items along the main axis</a>.</p> - -<pre class="brush: css">.media .content { - flex: 3; - padding: 10px; -} - -.image { - flex: 1; -}</pre> - -<h3 id="Flipping_the_media_object">Flipping the media object</h3> - -<p>To switch the display of the media object so that the image is on the right and the content is on the left we can use the <code>flex-direction</code> property set to <code>row-reverse</code>. The media object now displays the other way around. I have achieved this in the live example by adding a class of <code>flipped</code> alongside the existing <code>.media</code> class. This means you can see how the display changes by removing that class from the html.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p> - -<h2 id="Controlos_de_formulário">Controlos de formulário</h2> - -<p>Flexbox is particularly useful when it comes to styling form controls. Forms have lots of markup and lots of small elements that we typically want to align with each other. A common pattern is to have an {{htmlelement("input")}} element paired with a {{htmlelement("button")}}, perhaps for a search form or where you simply want your visitor to enter an email address.</p> - -<p>Flexbox makes this type of layout easy to achieve. I have contained my <code><button></code> and <code><input></code> field in a wrapper which I have given a border and set to <code>display: flex</code>. I have then set the <code>align-items</code> property to <code>center</code> so that the fields stay aligned with each other. I then use the flex properties to allow the <code><input></code> field to grow, while the button does not grow. This means we have a pair of fields, with the text field growing and shrinking as the available space changes.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p> - -<p>You could add a label or icon to the left as easily as we popped the button onto the right. I have added a label, and other than some styling for background colour I didn’t need to change the layout. The stretchy input field now has a little less space to play with but it uses the space left after the two items are accounted for.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p> - -<p>Patterns like this can make it much easier to create a library of form elements for your design, which easily accommodate additional elements being added. You are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do.</p> - -<h2 id="Conclusão">Conclusão</h2> - -<p>While exploring the above patterns you have hopefully started to see how you can think through the best way to use flexbox to achieve the result that you want. Quite often you have more than one choice. Mix items that cannot stretch with those that can, use the content to inform the size, or allow flexbox to share out space in proportion. It’s up to you. </p> - -<p>Think about the best way to present the content that you have and then see how flexbox or other layout methods can help you achieve it.</p> diff --git a/files/pt-pt/web/css/css_grid_layout/index.html b/files/pt-pt/web/css/css_grid_layout/index.html deleted file mode 100644 index cdb4293de2..0000000000 --- a/files/pt-pt/web/css/css_grid_layout/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: CSS - Layout de Grade -slug: Web/CSS/CSS_Grid_Layout -tags: - - CSS - - Grades - - Layout - - Layout de Grade - - Referencia - - Resumo -translation_of: Web/CSS/CSS_Grid_Layout -original_slug: Web/CSS/layout_de_grelha_css ---- -<p><strong>CSS - Layout de Grade </strong>destaca-se em dividir uma página em regiões principais, ou definir a relação em termos de tamanho, posição e camada, entre partes de um controle criado a partir de HTML primitivas. <br> - <br> - Tal como as tabelas, o layout de grelha permite que um autor alinhe os elementos em colunas e linhas. No entanto, são possíveis muitos mais layouts ou mais fáceis com a grelha de CSS do que eram com as tabelas. Por exemplo, os elementos filhos de um recipiente de grelha poderão posicionar-se a eles mesmos, e assim eles realmente se sobrepõem e a camada, similar aos elementos posicionados do CSSs..</p> - -<h2 id="Basic_Example" name="Basic_Example">Exemplo básico</h2> - -<p>O exemplo abaixo mostra uma grelha de faixa com três colunas, com novas linhas criadas com um mínimo de 100 píxeis e um máximo de <em>auto</em>. Os itens foram colocados na grelha utilizando o posicionamento baseado em linha .</p> - -<div id="example"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} -.wrapper { - max-width: 940px; - margin: 0 auto; -} - -.wrapper > div { - border: 2px solid rgb(233,171,88); - border-radius: 5px; - background-color: rgba(233,171,88,.5); - padding: 1em; - color: #d9480f; -}</pre> -</div> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="wrapper"> - <div class="one">One</div> - <div class="two">Two</div> - <div class="three">Three</div> - <div class="four">Four</div> - <div class="five">Five</div> - <div class="six">Six</div> -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: minmax(100px, auto); -} -.one { - grid-column: 1 / 3; - grid-row: 1; -} -.two { - grid-column: 2 / 4; - grid-row: 1 / 3; -} -.three { - grid-column: 1; - grid-row: 2 / 5; -} -.four { - grid-column: 3; - grid-row: 3; -} -.five { - grid-column: 2; - grid-row: 4; -} -.six { - grid-column: 3; - grid-row: 4; -} -</pre> - -<p>{{ EmbedLiveSample('example', '500', '440') }}</p> -</div> - -<h2 id="Referência">Referência</h2> - -<h3 id="CSS_-_propriedades">CSS - propriedades</h3> - -<div class="index"> -<ul> - <li>{{cssxref("grid-template-columns")}}</li> - <li>{{cssxref("grid-template-rows")}}</li> - <li>{{cssxref("grid-template-areas")}}</li> - <li>{{cssxref("grid-template")}}</li> - <li>{{cssxref("grid-auto-columns")}}</li> - <li>{{cssxref("grid-auto-rows")}}</li> - <li>{{cssxref("grid-auto-flow")}}</li> - <li>{{cssxref("grid")}}</li> - <li>{{cssxref("grid-row-start")}}</li> - <li>{{cssxref("grid-column-start")}}</li> - <li>{{cssxref("grid-row-end")}}</li> - <li>{{cssxref("grid-column-end")}}</li> - <li>{{cssxref("grid-row")}}</li> - <li>{{cssxref("grid-column")}}</li> - <li>{{cssxref("grid-area")}}</li> - <li>{{cssxref("grid-row-gap")}}</li> - <li>{{cssxref("grid-column-gap")}}</li> - <li>{{cssxref("grid-gap")}}</li> -</ul> -</div> - -<h3 id="CSS_-_funções">CSS - funções</h3> - -<div class="index"> -<ul> - <li>{{cssxref("repeat", "repeat()")}}</li> - <li>{{cssxref("minmax", "minmax()")}}</li> - <li>{{cssxref("fit-content", "fit-content()")}}</li> -</ul> -</div> - -<h3 id="CSS_-_tipos_de_dados">CSS - tipos de dados</h3> - -<div class="index"> -<ul> - <li>{{cssxref("<flex>")}}</li> -</ul> -</div> - -<h3 id="Glossário_-_entradas">Glossário - entradas</h3> - -<div class="index"> -<ul> - <li><a href="/pt-PT/docs/Glossário/grelha">Grelha</a></li> - <li><a href="/pt-PT/docs/Glossário/linhas_de_grelha">Linhas de Grelha</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> -</ul> -</div> - -<h2 id="Guias">Guias</h2> - -<div class="index"> -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> -</ul> -</div> - -<h2 id="Recursos_externos">Recursos externos</h2> - -<ul> - <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> - <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> - <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> - <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Grid') }}</td> - <td>{{ Spec2('CSS3 Grid') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/pt-pt/web/css/css_transforms/using_css_transforms/index.html b/files/pt-pt/web/css/css_transforms/using_css_transforms/index.html deleted file mode 100644 index dba05f3a78..0000000000 --- a/files/pt-pt/web/css/css_transforms/using_css_transforms/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: CSS/Usando_transformações_CSS -slug: Web/CSS/CSS_Transforms/Using_CSS_transforms -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms -original_slug: Web/CSS/Usando_transformações_CSS ---- -<p>{{ gecko_minversion_header("1.9.1") }}</p> -<p>Firefox 3.5 (Gecko 1.9.1) introduz suporte a transformações CSS; estas são implementadas utilizando um conjunto de propriedades CSS permitindo a você aplicar transformações lineares a elementos HTML. Essas transformações são baseadas sobre o <a class="external" href="http://webkit.org/blog/130/css-transforms/" title="http://webkit.org/blog/130/css-transforms/">design proposto pelo time WebKit</a> e incluem rotar, inclinar, escalar e usar translação. Enquanto isso, é um <a class="external" href="http://www.w3.org/TR/css3-2d-transforms/" title="http://www.w3.org/TR/css3-2d-transforms/">W3C working draft</a>.</p> -<p>Mozilla atualmente suporta as propriedades {{ Cssxref("-moz-transform") }} e {{ Cssxref("-moz-transform-origin") }}. Para detalhes sobre onde funções de transformação são suportadas, veja o artigo <a class="internal" href="/En/CSS/CSS_transform_functions" title="/en/CSS/CSS transform functions">CSS transform functions</a> (en).</p> -<div class="note"> - <strong>Nota:</strong> Até o momento não há suporte ao eixo Z, portanto, perspectiva, rotação 3D, escala 3D, e transformações 3D não são suportadas.</div> -<h2 id="Exemplo_Rotação">Exemplo: Rotação</h2> -<p>Este exemplo cria um <em>iframe</em> que lhe permite utilizar a página inicial do Google, girada 90 graus sobre seu canto inferior esquerdo.</p> -<p><a class="internal" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">Visualizar exemplo</a><br> - <a class="internal" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">Visualizar <em>screenshot</em> do exemplo</a></p> -<pre class="brush: html"><div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;"> - <iframe src="http://www.google.com/" width="500px" height="600px" /> -</div> -</pre> -<h2 id="Exemplo_Inclinação_e_translação">Exemplo: Inclinação e translação</h2> -<p>Este exemplo cria um iframe que lhe permite utilizar a página inicial do Google, inclinada 10 graus no eicho X.</p> -<p><a class="external" href="/@api/deki/files/2922/=skewed-google-sample.html" title="http://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">Visualizar exemplo</a><br> - <a class="internal" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">Visualizar <em>screenshot</em> do exemplo</a></p> -<pre class="brush: html"><div style="-moz-transform: skewx(10deg) translatex(150px); - -moz-transform-origin: bottom left;"> - <iframe src="http://www.google.com/" width="600px" height="500px" /> -</div> -</pre> -<h2 id="Veja_também">Veja também</h2> -<ul> - <li>{{ Cssxref("-moz-transform") }}</li> - <li>{{ Cssxref("-moz-transform-origin") }}</li> - <li><a class="internal" href="/En/CSS/CSS_transform_functions" title="En/CSS/CSS transform functions">CSS transform functions</a> (EN)</li> -</ul> -<p>{{ languages( { "ja": "ja/CSS/Using_CSS_transforms" } ) }}</p> diff --git a/files/pt-pt/web/css/css_types/index.html b/files/pt-pt/web/css/css_types/index.html deleted file mode 100644 index e469f49c98..0000000000 --- a/files/pt-pt/web/css/css_types/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: CSS - Tipos de datos básicos -slug: Web/CSS/CSS_Types -tags: - - CSS - - Referencia - - Resumo - - Sinopse - - Tipos de Dados de CSS -translation_of: Web/CSS/CSS_Types -original_slug: Web/CSS/CSS_Tipos ---- -<div>{{CssRef}}</div> - -<p><strong>CSS - tipos de dados básicos</strong> define typical values (including keywords and units) accepted by CSS properties and functions. They are a special kind of <a href="https://www.w3.org/TR/css3-values/#component-types">component value type</a>.</p> - -<p>In formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">".</p> - -<h2 id="Referência">Referência</h2> - -<div class="index"> -<ul> - <li>{{cssxref("<angle>")}}</li> - <li>{{cssxref("<basic-shape>")}}</li> - <li>{{cssxref("<blend-mode>")}}</li> - <li>{{cssxref("<color>")}}</li> - <li>{{cssxref("<custom-ident>")}}</li> - <li>{{cssxref("<filter-function>")}}</li> - <li>{{cssxref("<flex>")}}</li> - <li>{{cssxref("<frequency>")}}</li> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("<integer>")}}</li> - <li>{{cssxref("<length>")}}</li> - <li>{{cssxref("<number>")}}</li> - <li>{{cssxref("<percentage>")}}</li> - <li>{{cssxref("<position>")}}</li> - <li>{{cssxref("<ratio>")}}</li> - <li>{{cssxref("<resolution>")}}</li> - <li>{{cssxref("<shape-box>")}}</li> - <li>{{cssxref("<single-transition-timing-function>")}}</li> - <li>{{cssxref("<string>")}}</li> - <li>{{cssxref("<time>")}}</li> - <li>{{cssxref("<transform-function>")}}</li> - <li>{{cssxref("<url>")}}</li> -</ul> -</div> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Values') }}</td> - <td>{{ Spec2('CSS3 Values') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> diff --git a/files/pt-pt/web/css/cursor/index.html b/files/pt-pt/web/css/cursor/index.html deleted file mode 100644 index 152fe3b344..0000000000 --- a/files/pt-pt/web/css/cursor/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: cursor -slug: Web/CSS/cursor -tags: - - Referencia_CSS -translation_of: Web/CSS/cursor ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>A propriedade {{ Cssxref("cursor") }} especifica o estilo do ponteiro do mouse quando estiver sobre o elemento.</p> - -<ul> - <li>Valor inicial: <code>auto</code></li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: sim</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="/pt/CSS/Media/Visual" title="pt/CSS/Media/Visual">Visual</a>, <a href="/pt/CSS/Media/Interactive" title="pt/CSS/Media/Interactive">Interactive</a></li> - <li><a href="/pt/CSS/computed_value" title="pt/CSS/computed_value">Valor computado</a>: como especificado (endereços relativos são convertidos como absolutos)</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<p><code>cursor:</code> [ {{ mediawiki.external(' ,') }}* {{ mediawiki.external(' <code>auto</code> | <code>crosshair</code> | <code>default</code> | <code>pointer</code> | <code>move</code> | <code>e-resize</code> | <code>ne-resize</code> | <code>nw-resize</code> | <code>n-resize</code> | <code>se-resize</code> | <code>sw-resize</code> | <code>s-resize</code> | <code>w-resize</code> | <code>text</code> | <code>wait</code> | <code>help</code> | <code>progress</code> | <code>copy</code> | <code>alias</code> | <code>context-menu</code> | <code>cell</code> | <code>not-allowed</code> | <code>col-resize</code> | <code>row-resize</code> | <code>no-drop</code> | <code>vertical-text</code> | <code>all-scroll</code> | <code>nesw-resize</code> | <code>nwse-resize</code> | <code>ns-resize</code> | <code>ew-resize</code> ') }} ] | {{ Cssxref("inherit") }}</p> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt><url> </dt> - <dd>URL of custom cursor. More than one URL may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one of the other values) must be at the end of the fallback list. See <a href="pt/Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd> - <dt><code>default</code> </dt> - <dd>default cursor (typically an arrow)</dd> - <dt><code>auto</code> </dt> - <dd>equivalent to <code>text</code> when over text and <code>default</code> otherwise</dd> - <dt><code>crosshair</code> </dt> - <dd>cross cursor, often used to indicate selection in a bitmap</dd> - <dt><code>pointer</code> </dt> - <dd>cursor used when over links (typically a hand)</dd> - <dt><code>move</code> </dt> - <dd>move cursor</dd> - <dt><code>e-resize</code> </dt> - <dd>cursor for resizing the right edge of a box</dd> - <dt><code>ne-resize</code> </dt> - <dd>cursor for resizing the top right corner of a box</dd> - <dt><code>nw-resize</code> </dt> - <dd>cursor for resizing the top left corner of a box</dd> - <dt><code>n-resize</code> </dt> - <dd>cursor for resizing the top edge of a box</dd> - <dt><code>se-resize</code> </dt> - <dd>cursor for resizing the bottom right corner of a box</dd> - <dt><code>sw-resize</code> </dt> - <dd>cursor for resizing the bottom left corner of a box</dd> - <dt><code>s-resize</code> </dt> - <dd>cursor for resizing the bottom edge of a box</dd> - <dt><code>w-resize</code> </dt> - <dd>cursor for resizing the left edge of a box</dd> - <dt><code>text</code> </dt> - <dd>cursor indicating text can be selected (typically an I-beam)</dd> - <dt><code>wait</code> </dt> - <dd>cursor indicating the program is busy (sometimes an hourglass or a watch)</dd> - <dt><code>help</code> </dt> - <dd>cursor indicating help is available</dd> - <dt><code>progress</code> </dt> - <dd>cursor indicating that the program is busy but the user can still interact with it (unlike for <code>busy</code>)</dd> - <dt><code>copy</code> </dt> - <dd>cursor showing something that can be copied</dd> - <dt><code>alias</code> </dt> - <dd>cursor indicating an alias or shortcut is to be created</dd> - <dt><code>context-menu</code> </dt> - <dd>cursor indicating that a context menu is available under the cursor</dd> - <dt><code>cell</code> </dt> - <dd>cursor indicating that cells can be selected</dd> - <dt><code>not-allowed</code> </dt> - <dd>cursor showing that something cannot be done</dd> - <dt><code>col-resize</code> </dt> - <dd>cursor for resizing columns horizontally</dd> - <dt><code>row-resize</code> </dt> - <dd>cursor for resizing rows vertically</dd> - <dt><code>no-drop</code> </dt> - <dd>cursor showing that a drop is not allowed at the current location</dd> - <dt><code>vertical-text</code> </dt> - <dd>cursor indicating that vertical text can be selected (typically a sideways I-beam)</dd> - <dt><code>all-scroll</code> </dt> - <dd>cursor showing that something can be scrolled in any direction (panned)</dd> - <dt><code>nesw-resize</code> </dt> - <dd>cursor for resizing in the top-right or bottom-left directions</dd> - <dt><code>nwse-resize</code> </dt> - <dd>cursor for resizing in the top-left or bottom-right directions</dd> - <dt><code>ns-resize</code> </dt> - <dd>cursor for resizing up or down</dd> - <dt><code>ew-resize</code> </dt> - <dd>cursor for resizing left or right</dd> -</dl> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/cursor.html">View Live Examples</a></p> - -<pre>Inline: - -<span style="cursor: crosshair">Some Text</span> - -External: - -.pointer { - cursor: pointer; -} -.move { - cursor: move; -} - -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>While this property works on older browsers, not all values are fully supported.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#propdef-cursor">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">css3-ui</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga/th></th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Firefox</td> - <td>1.5</td> - </tr> - <tr> - <td>Netscape</td> - <td>6</td> - </tr> - <tr> - <td>Opera</td> - <td>7</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/cursor", "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor" } ) }}</p> diff --git a/files/pt-pt/web/css/direction/index.html b/files/pt-pt/web/css/direction/index.html deleted file mode 100644 index a89e7a1b6c..0000000000 --- a/files/pt-pt/web/css/direction/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: direction -slug: Web/CSS/direction -tags: - - Referencia_CSS -translation_of: Web/CSS/direction ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p>The <code>direction</code> property should be set to match the direction of the text: <code>rtl</code> for Hebrew or Arabic text and <code>ltr</code> for other scripts. This should normally be done as part of the document (e.g., using the <code>dir</code> attribute in HTML) rather than through direct use of CSS. -</p><p>The property sets the base text direction of block-level elements and the direction of embeddings created by the {{ Cssxref("unicode-bidi") }} property. It also sets the default alignment of text and block-level elements and the direction that cells flow within a table row. -</p> -<ul><li> Valor inicial: <code>ltr</code> -</li><li> Aplica-se a: todos os elementos -</li><li> Herdado: sim -</li><li> Porcentagens: N/A -</li><li> Mídia: <a href="pt/CSS/Media/Visual">visual</a> -</li></ul> -<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3> -<pre class="eval">direction: [ 'ltr' | 'rtl' | inherit ] ; -</pre> -<h3 id="Valores" name="Valores"> Valores </h3> -<dl><dt> ltr </dt><dd> The default value of <code>direction</code>. Text and other elements go from left to right -</dd><dt> rtl </dt><dd> Text and other elements go from right to left -</dd></dl> -<p>For the <code>direction</code> property to have any effect on inline-level elements, the {{ Cssxref("unicode-bidi") }} property's value must be 'embed' or 'override'. -</p> -<h3 id="Exemplos" name="Exemplos"> Exemplos </h3> -<pre class="eval">blockquote { - direction : rtl ; -} -</pre> -<h3 id="Notas" name="Notas"> Notas </h3> -<p>Unlike the <code>dir</code> attribute in HTML, the <code>direction</code> property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of the rows but not inside of the columns. -</p> -<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o"> Especificação </h3> -<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#direction">CSS 2.1</a> -</li><li> <a class="external" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction">CSS 3 Text Module</a> -</li></ul> -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m"> Veja também </h3> -<p>{{ Cssxref("unicode-bidi") }} -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/direction", "fr": "fr/CSS/direction", "pl": "pl/CSS/direction" } ) }} diff --git a/files/pt-pt/web/css/display/index.html b/files/pt-pt/web/css/display/index.html deleted file mode 100644 index 5a3e498cf3..0000000000 --- a/files/pt-pt/web/css/display/index.html +++ /dev/null @@ -1,707 +0,0 @@ ---- -title: display -slug: Web/CSS/display -tags: - - CSS - - CSS Display - - Propriedade de CSS -translation_of: Web/CSS/display ---- -<div>{{CSSRef}}</div> - -<p>Esta propriedade <strong><code>display</code></strong> de CSS especifica o tipo de caixa de renderização utilizado para um elemento. Em HTML, os valores da propriedade <code>display</code> predefinidos têm o seu comportamento descrito nas especificações de HTML ou de uma folha de estilo predefinida do navegador ou do utilizador. O valor predefinido no XML é <code>inline</code>, incluindo os elementos de <a href="/pt-PT/docs/Web/SVG">SVG</a> .</p> - -<p>Em adição aos diferentes tipos de caixa de exibição, o valor <code>none</code> deixa-o desativar a exibição de um elemento; quando utiliza <code>none</code>, todos os elementos descendentes também têm as suas exibições desativadas. O documento é renderizado como se o elemento não existisse na árvore do documento.</p> - -<pre class="brush:css no-line-numbers">/* <display-outside> values */ -display: block; -display: inline; -display: run-in; - -/* <display-inside> values */ -display: flow; -display: flow-root; -display: table; -display: flex; -display: grid; -display: ruby; -display: subgrid; - -/* <display-outside> plus <display-inside> values */ -display: block flow; -display: inline table; -display: flex run-in; - -/* <display-listitem> values */ -display: list-item; -display: list-item block; -display: list-item inline; -display: list-item flow; -display: list-item flow-root; -display: list-item block flow; -display: list-item block flow-root; -display: flow list-item block; - -/* <display-internal> values */ -display: table-row-group; -display: table-header-group; -display: table-footer-group; -display: table-row; -display: table-cell; -display: table-column-group; -display: table-column; -display: table-caption; -display: ruby-base; -display: ruby-text; -display: ruby-base-container; -display: ruby-text-container; - -/* <display-box> values */ -display: contents; -display: none; - -/* <display-legacy> values */ -display: inline-block; -display: inline-table; -display: inline-flex; -display: inline-grid; - -/* Global values */ -display: inherit; -display: initial; -display: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxe" name="Sintaxe">Sintaxe</h2> - -<p>A propriedade <code>display</code> é especificada utilizando os valores chave. Os valores chave são agrupados em seis categorias:</p> - -<ul> - <li><code><a href="#display-outside"><display-outside></a></code></li> - <li><code><a href="#display-inside"><display-inside></a></code></li> - <li><code><a href="#display-listitem"><display-listitem></a></code></li> - <li><code><a href="#display-internal"><display-internal></a></code></li> - <li><code><a href="#display-box"><display-box></a></code></li> - <li><code><a href="#display-legacy"><display-legacy></a></code></li> -</ul> - -<p>Currently it's best to specify <code>display</code> using a single keyword; although the latest specifications allow you to combine some keywords, this is not yet well supported by browsers.</p> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><a id="display-outside" name="display-outside"><code><display-outside></code></a></dt> - <dd>These keywords specify the element’s outer display type, which is essentially its role in flow layout. They are defined as follows: - <table class="standard-table"> - <thead> - <tr> - <td class="header">Valor</td> - <td class="header">Descrição</td> - </tr> - </thead> - <tbody> - <tr> - <td><code>block</code></td> - <td>The element generates a block element box.</td> - </tr> - <tr> - <td><code>inline</code></td> - <td>The element generates one or more inline element boxes.</td> - </tr> - <tr> - <td><code>run-in</code> {{experimental_inline}}</td> - <td>The element generates a run-in box. Run-in elements act like inlines or blocks, depending on the surrounding elements. That is: - <ul> - <li>If the run-in box contains a block box, same as block.</li> - <li>If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.</li> - <li>If an inline box follows, the run-in box becomes a block box.</li> - </ul> - </td> - </tr> - </tbody> - </table> - </dd> - <dt><a id="display-inside" name="display-inside"><code><display-inside></code></a></dt> - <dd>These keywords specify the element’s inner display type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). They are defined as follows: - <table class="standard-table"> - <thead> - <tr> - <td class="header">Value</td> - <td class="header">Description</td> - </tr> - </thead> - <tbody> - <tr> - <td><code>flow</code> {{experimental_inline}}</td> - <td>The element lays out its contents using flow layout (block-and-inline layout). - <p>If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.</p> - - <p>Depending on the value of other properties (such as {{cssxref("position")}}, {{cssxref("float")}}, or {{cssxref("overflow")}}) and whether it is itself participating in a block or inline formatting context, it either establishes a new <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a> for its contents or integrates its contents into its parent formatting context.</p> - </td> - </tr> - <tr> - <td><code>flow-root</code> {{experimental_inline}}</td> - <td>The element generates a block element box that establishes a new <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a>.</td> - </tr> - <tr> - <td><code>table</code></td> - <td>These elements behave like {{HTMLElement("table")}} HTML elements. It defines a block-level box.</td> - </tr> - <tr> - <td><code>flex</code></td> - <td>The element behaves like a block element and lays out its content according to the <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox model</a>.</td> - </tr> - <tr> - <td><code>grid</code></td> - <td>The element behaves like a block element and lays out its content according to the grid model.</td> - </tr> - <tr> - <td><code>subgrid</code> {{experimental_inline}}</td> - <td>If the parent element has <code>display:grid</code>, the element itself and its content are laid out according to the grid model.</td> - </tr> - <tr> - <td><code>ruby</code> {{experimental_inline}}</td> - <td>The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding {{HTMLElement("ruby")}} HTML elements.</td> - </tr> - </tbody> - </table> - </dd> - <dt><a id="display-listitem" name="display-listitem"><code><display-listitem></code></a></dt> - <dd> - <p>The element generates a block box for the content and a separate list-item inline box.</p> - - <p>If no <code><display-inside></code> value is specified, the principal box’s inner display type defaults to <code>flow</code>. If no <code><display-outside></code> value is specified, the principal box’s outer display type defaults to <code>block</code>.</p> - </dd> - <dt><a id="display-internal" name="display-internal"><code><display-internal></code></a></dt> - <dd> - <p>Some layout models, such as <span class="css">table</span> and ruby, have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those "internal" display values, which only have meaning within that particular layout mode.</p> - - <p>Unless otherwise specified, both the inner display type and the outer display type of elements using these display values are set to the given keyword.</p> - - <table class="standard-table"> - <thead> - <tr> - <td class="header">Valor</td> - <td class="header">Descrição</td> - </tr> - </thead> - <tbody> - <tr> - <td><code>table-row-group</code></td> - <td>These elements behave like {{HTMLElement("tbody")}} HTML elements</td> - </tr> - <tr> - <td><code>table-header-group</code></td> - <td>These elements behave like {{HTMLElement("thead")}} HTML elements.</td> - </tr> - <tr> - <td><code>table-footer-group</code></td> - <td>These elements behave like {{HTMLElement("tfoot")}} HTML elements.</td> - </tr> - <tr> - <td><code>table-row</code></td> - <td>These elements behave like {{HTMLElement("tr")}} HTML elements.</td> - </tr> - <tr> - <td><code>table-cell</code></td> - <td>These elements behave like {{HTMLElement("td")}} HTML elements.</td> - </tr> - <tr> - <td><code>table-column-group</code></td> - <td>These elements behave like {{HTMLElement("colgroup")}} HTML elements.</td> - </tr> - <tr> - <td><code>table-column</code></td> - <td>These elements behave like {{HTMLElement("col")}} HTML elements.</td> - </tr> - <tr> - <td><code>table-caption</code></td> - <td>These elements behave like {{HTMLElement("caption")}} HTML elements.</td> - </tr> - <tr> - <td><code>ruby-base</code> {{experimental_inline}}</td> - <td>These elements behave like {{HTMLElement("rb")}} elements.</td> - </tr> - <tr> - <td><code>ruby-text</code> {{experimental_inline}}</td> - <td>These elements behave like {{HTMLElement("rt")}} elements.</td> - </tr> - <tr> - <td><code>ruby-base-container</code> {{experimental_inline}}</td> - <td>These elements behave like {{HTMLElement("rbc")}} elements generated as anonymous boxes.</td> - </tr> - <tr> - <td><code>ruby-text-container</code> {{experimental_inline}}</td> - <td>These elements behave like {{HTMLElement("rtc")}} elements.</td> - </tr> - </tbody> - </table> - </dd> - <dt><a id="display-box" name="display-box"><code><display-box></code></a></dt> - <dd>These values define whether an element generates display boxes at all. - <table class="standard-table"> - <thead> - <tr> - <td class="header">Valor</td> - <td class="header">Descrição</td> - </tr> - </thead> - <tbody> - <tr> - <td><code>contents</code> {{experimental_inline}}</td> - <td>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.</td> - </tr> - <tr> - <td><code>none</code></td> - <td> - <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.</p> - - <p>To have an element take up the space that it would normally take, but without actually rendering anything, use the {{cssxref("visibility")}} property instead.</p> - </td> - </tr> - </tbody> - </table> - </dd> - <dt><a id="display-legacy" name="display-legacy"><code><display-legacy></code></a></dt> - <dd>CSS 2 used a single-keyword syntax for the <code>display</code> property, requiring separate keywords for block-level and inline-level variants of the same layout mode. They are defined as follows: - <table class="standard-table"> - <thead> - <tr> - <td class="header">Valor</td> - <td class="header">Descrição</td> - </tr> - </thead> - <tbody> - <tr> - <td><code>inline-block</code></td> - <td> - <p>The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)</p> - - <p>It is equivalent to <code>inline flow-root</code>.</p> - </td> - </tr> - <tr> - <td><code>inline-table</code></td> - <td> - <p>The <code>inline-table</code> value does not have a direct mapping in HTML. It behaves like a {{HTMLElement("table")}} HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.</p> - - <p>It is equivalent to <code>inline table</code>.</p> - </td> - </tr> - <tr> - <td><code>inline-flex</code></td> - <td> - <p>The element behaves like an inline element and lays out its content according to the flexbox model.</p> - - <p>It is equivalent to <code>inline flex</code>.</p> - </td> - </tr> - <tr> - <td><code>inline-grid</code></td> - <td>The element behaves like an inline element and lays out its content according to the grid model.</td> - </tr> - </tbody> - </table> - </dd> -</dl> - -<h3 id="Sintaxe_formal">Sintaxe formal</h3> - -{{csssyntax}} - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Hide_element" name="Hide_element">Elementos <em>Hide</em></h3> - -<h4 id="Conteúdo_de_HTML">Conteúdo de HTML</h4> - -<pre class="brush: html"><p>Visible text</p> -<p class="secret">Invisible text</p></pre> - -<h4 id="Conteúdo_de_CSS">Conteúdo de CSS</h4> - -<pre class="brush: css">p.secret { - display: none; -}</pre> - -<h3 id="Resultado">Resultado</h3> - -<p>{{EmbedLiveSample("Hide_element", 300, 60)}}</p> - -<p><a href="/samples/cssref/display.html">View Live Examples</a></p> - -<h2 id="Specifications" name="Specifications">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td> - <td>{{Spec2('CSS3 Display')}}</td> - <td>Added <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code>, and multi-keyword values.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td> - <td>{{Spec2('CSS3 Ruby')}}</td> - <td>Added <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, and <code>ruby-text-container</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td> - <td>{{Spec2('CSS3 Grid')}}</td> - <td>Added the grid box model values.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>Added the flexible box model values.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Added the table model values and <code>inline-block<em>.</em></code></td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#display', 'display')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition. Basic values: <code>none</code>, <code>block</code>, <code>inline</code>, and <code>list-item</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td><code>none</code>, <code>inline</code> and <code>block</code></td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>4.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>inline-block</code></td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>5.5<sup>[4]</sup></td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>list-item</code></td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>6.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td> - <td>1.0 [5]</td> - <td rowspan="2">{{CompatNo}}</td> - <td rowspan="2">{{CompatNo}}</td> - <td rowspan="2">8.0</td> - <td>7.0</td> - <td>1.0 (85)<sup>[5]</sup></td> - </tr> - <tr> - <td>4.0 Removed in 32</td> - <td>Not Blink versions (15 upwards)</td> - <td>5.0 (532.5) Removed in 8.0</td> - </tr> - <tr> - <td><code>inline-table</code></td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>8.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, and <code>table-caption</code></td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>8.0</td> - <td> - <p>7.0</p> - </td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>flex</code></td> - <td> - <p>21.0{{property_prefix("-webkit")}}</p> - - <p>29.0</p> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("20.0")}}</td> - <td> - <p>10{{property_prefix("-ms")}}<sup><font size="2">[8]</font></sup><br> - 11</p> - </td> - <td>12.50</td> - <td> - <p>6.1{{property_prefix("-webkit")}}</p> - - <p>9.0</p> - </td> - </tr> - <tr> - <td><code>inline-flex</code></td> - <td>21.0{{property_prefix("-webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("20.0")}}</td> - <td>10{{property_prefix("-ms")}}<sup><font size="2">[8]</font></sup><br> - 11</td> - <td>12.50</td> - <td>6.1{{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td><code>grid</code> {{experimental_inline}}</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-ms")}}</td> - <td>{{CompatGeckoDesktop("45.0")}}<sup>[6]</sup></td> - <td>10.0{{property_prefix("-ms")}}</td> - <td>{{CompatOpera(44)}}</td> - <td>TP</td> - </tr> - <tr> - <td><code>inline-grid</code> {{experimental_inline}}</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-ms")}}</td> - <td>{{CompatGeckoDesktop("45.0")}}<sup>[6]</sup></td> - <td>10.0{{property_prefix("-ms")}}</td> - <td>{{CompatOpera(44)}}</td> - <td>TP</td> - </tr> - <tr> - <td><code>subgrid</code> {{experimental_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, <code>ruby-text-container</code> {{experimental_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("34.0")}}<sup>[3]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>contents</code> {{experimental_inline}}</td> - <td>{{CompatChrome(58)}}<sup>[7]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("37")}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>flow-root</code></td> - <td>{{CompatChrome(58)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("53.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(45)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>7.0{{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td><code>grid</code> {{experimental_inline}}</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(44)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>inline-grid</code> {{experimental_inline}}</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(44)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>flow-root</code></td> - <td>{{CompatChrome(58)}}</td> - <td>{{CompatChrome(58)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(45)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>. Multi-line flexbox are supported since Firefox 28.</p> - -<p>[2] Before Firefox 37, the <code>contents</code> value was disabled by default, and could be enabled by setting the <code>layout.css.display-contents.enabled</code> pref to <code>true</code>. In Firefox 37, it was enabled by default, and in Firefox 53 the pref was removed altogether.</p> - -<p>[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.</p> - -<p>[4] In IE < 8, natural inline elements only.</p> - -<p>[5] Not before inline-elements.</p> - -<p>[6] CSS Grid support is unprefixed in Nightly/Alpha builds and behind pref "layout.css.grid.enabled" in Beta/release builds.</p> - -<p>[7] In Chrome, the <code>contents</code> value is currently disabled by default, but can be enabled with the "Experimental Web Platform features" flag.</p> - -<p>[8] In IE 10, only special prefixed values, <code>-ms-flexbox</code> and <code>-ms-inline-flexbox</code>, are recognized.</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>{{Cssxref("visibility")}}, {{Cssxref("float")}}, {{Cssxref("position")}}</li> - <li>{{Cssxref("flex")}}</li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; display: block; opacity: 0; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/css/float/index.html b/files/pt-pt/web/css/float/index.html deleted file mode 100644 index 62f8ddf017..0000000000 --- a/files/pt-pt/web/css/float/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: float -slug: Web/CSS/float -tags: - - Referencia_CSS -translation_of: Web/CSS/float ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>A propriedade <code>float</code> especifica se um elemento deve flutuar pelo lado direito, pelo esquerdo ou não flutuar, onde os elementos <code>inline</code> envolverão ao redor dele.</p> - -<ul> - <li>Valor inicial: none;</li> - <li>Aplica-se a: todos elementos;</li> - <li>Herdado: não;</li> - <li>Valor computado: como especificado.</li> -</ul> - -<p>Um <strong>elemento flutuante</strong> é um elemento onde o valor computado é diferente de <code>none</code>.</p> - -<p>Note que se você estiver referenciando a esta propriedade do JavaScript como um membro do objeto <a href="pt/DOM/element.style">element.style</a>, você precisa escrever isto em <strong>cssFloat</strong> (veja a lista do <a href="pt/DOM/CSS">DOM:CSS</a>). Note também que para o IE você precisa escrever <strong>styleFloat</strong>.</p> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<p>float: left | right | none | <a href="pt/CSS/inherit">inherit</a></p> - -<h3 id="Valores" name="Valores">Valores</h3> - -<ul> - <li><strong>left</strong> : O elemento flutua pelo lado esquerdo de um bloco;</li> - <li><strong>right</strong> : O elemento flutua pelo lado direito de um bloco;</li> - <li><strong>none</strong> : O elemento não flutua.</li> -</ul> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/float.html">View Live Examples</a></p> - -<pre><html> - <head> - <style type="text/css"> - b - { - font-size: 25px; - float:right; - } - </style> - </head> - <body> - - <p> - <b>HELLO!</b> - Isto é algum texto. Isto é algum texto. Isto é algum texto. - Isto é algum texto. Isto é algum texto. Isto é algum texto. - Isto é algum texto. Isto é algum texto. Isto é algum texto. - Isto é algum texto. Isto é algum texto. Isto é algum texto. - Isto é algum texto. Isto é algum texto. Isto é algum texto. - Isto é algum texto. Isto é algum texto. Isto é algum texto. - Isto é algum texto. Isto é algum texto. Isto é algum texto. - Isto é algum texto. Isto é algum texto. Isto é algum texto. - </p> - -</body> -</html> -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>TODO: deve explicar como os flutuantes se posicionam. Mencionar o <a href="pt/CSS/block_formatting_context">contexto de formatação de bloco</a>.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#float">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float">CSS 2.1</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Netscape</td> - <td>4</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}, {{ Cssxref("float") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/float", "fr": "fr/CSS/float" } ) }}</p> diff --git a/files/pt-pt/web/css/font-size-adjust/index.html b/files/pt-pt/web/css/font-size-adjust/index.html deleted file mode 100644 index bc7b060a83..0000000000 --- a/files/pt-pt/web/css/font-size-adjust/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: font-size-adjust -slug: Web/CSS/font-size-adjust -tags: - - Referencia_CSS -translation_of: Web/CSS/font-size-adjust ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>A propriedade {{ Cssxref("font-size-adjust") }} especifica que o tamanho da fonte deve ser escolhido baseado na altura das letras minúsculas antes da altura das letras maísculas.</p> - -<p>Isto é útil desde a legibilidade das fontes, especialmente em tamanhos pequenos, é mais determinado pelo tamanho das letras minúsculas do que pelo tamanho das letras maíusculas. Isto pode causar problemas quando a primeira escolha {{ Cssxref("font-family") }} não está disponível e sua substituição tem uma relação de aspecto significativamente diferente (a relação do tamanho das fontes minúsculas para o tamanho da fonte).</p> - -<p>Para fazer isto de forma que seja compatível com os navegadores que não suportam {{ Cssxref("font-size-adjust") }}, é especificado um número que a propriedade {{ Cssxref("font-size") }} é multiplicada por. Isto significa que o valor especificado para a propriedade deve geralmente ser a relação de aspecto da primeira escolha de fonte. Por exemplo, uma folha de estilo que especifica <code><a href="pt/CSS/font-size">font-size</a>: 16px; <a href="pt/CSS/font-size-adjust">font-size-adjust</a>: 0.5</code> está realmente especificando que as letras minúsculas da fonte deverão ter <code>8px</code> de altura (16px vezes 0.5).</p> - -<ul> - <li><a href="pt/CSS/initial_value">Valor inicial</a>: <code>none</code></li> - <li>Aplica-se a: todos os elementos</li> - <li><a href="pt/CSS/inheritance">Herdado</a>: sim</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li> - <li><a href="pt/CSS/computed_value">Valor computado</a>: como especificado</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<p><code>font-size-adjust:</code> <number> | <code>none</code> | {{ Cssxref("inherit") }}</p> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt><code>none</code> </dt> - <dd>Escolha o tamanho da fonte baseado somente na propriedade {{ Cssxref("font-size") }}.</dd> - <dt><code><number></code> </dt> - <dd> - <p>Escolha o tamanho da fonte de modo que suas letras minúsculas (como determinado pela métrica x-height da fonte) sejam o número especificado de vezes pelo {{ Cssxref("font-size") }}.</p> - - <p>O número especificado deve geralmente ser a relação de aspecto (relação de x-height para o tamanho da fonte) da primeira escolha de {{ Cssxref("font-family") }}. Isto significará que a primeira escolha de fonte, quando disponível, aparecerá no mesmo tamanho nos navegadores, se não suportarem o {{ Cssxref("font-size-adjust") }}.</p> - </dd> -</dl> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/font-size-adjust.html">View Live Examples</a></p> - -<pre>p{ - font: 12px Verdana, sans-serif; - font-size-adjust: 0.58; -} - -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font-size-adjust">CSS 2</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-size-adjust">css3-fonts</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<p>Suportado em todas as plataformas começando em Gecko 1.9 / Firefox 3, mas suportado no Windows somente signitivamente mais cedo.</p> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("font-size") }}, {{ Cssxref("font-size-adjust") }}, {{ Cssxref("font-family") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/font-size-adjust", "fr": "fr/CSS/font-size-adjust" } ) }}</p> diff --git a/files/pt-pt/web/css/font-size/index.html b/files/pt-pt/web/css/font-size/index.html deleted file mode 100644 index e3d0ca9fa8..0000000000 --- a/files/pt-pt/web/css/font-size/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: font-size -slug: Web/CSS/font-size -tags: - - Referencia_CSS -translation_of: Web/CSS/font-size ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>The font-size property specifies the size of the font. The font size may, in turn, change the size of other things, since it is used to compute the value of <code>em</code> and <code>ex</code> length units.</p> - -<ul> - <li>Valor inicial: <code>medium</code></li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: sim</li> - <li>Percentagens: relativas ao elemento font-size pai</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">Visual</a></li> - <li>Valor computado: comprimento absoluto</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<p><code>font-size:</code> <code>xx-small</code> | <code>x-small</code> | <code>small</code> | <code>medium</code> | <code>large</code> | <code>x-large</code> | <code>xx-large</code></p> - -<p><code>font-size:</code> <code>smaller</code> | <code>larger</code></p> - -<p><code>font-size:</code> <length> | <percentage> | {{ Cssxref("inherit") }}</p> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>xx-small, x-small, small, medium, large, x-large, xx-large </dt> - <dd>A set of absolute size keywords based on the user's default font size (which is <code>medium</code>). Similar to presentational HTML's <code><font size="1"></code> through <code><font size="7"></code> where the user's default font size is <code><font size="3"></code>.</dd> - <dt>larger, smaller </dt> - <dd>Larger or smaller than the parent element's font size, by roughly the ratio used to separate the absolute size keywords above.</dd> - <dt><a href="pt/CSS/length"><length></a> </dt> - <dd>A positive <a href="pt/CSS/length">length</a>.</dd> - <dt><percentage> </dt> - <dd>A positive percentage of the parent element's font size.</dd> -</dl> - -<p>It is best to avoid using values that are not relative to the user's default font size, such as <lengths> with units other than <code>em</code> or <code>ex</code>. However, if such values must be used, <code>px</code> are preferred over other units because their meaning does not vary depending on what the operating system thinks (generally incorrectly) the resolution of the monitor is.</p> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/font-size.html">View Live Examples</a></p> - -<pre>/* Set paragraph text to be very large. */ -p { font-size: xx-large } - -/* Set h1 (level 1 heading) text to be 2.5 times the size - * of the text around it. */ -h1 { font-size: 250% } - -/* Sets text enclosed within span tag to be 16px */ -span { font-size: 16px; } -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p><code>em</code> and <code>ex</code> units on the {{ Cssxref("font-size") }} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means <code>em</code> units and percentages do the same thing for {{ Cssxref("font-size") }}.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#font-size">CSS 1 </a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-size">css3-fonts</a></li> -</ul> - -<p><span class="comment">== Compatibilidade com navegadores ==</span></p> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("font") }} {{ Cssxref("font-family") }}, {{ Cssxref("font-size") }}, {{ Cssxref("font-size-adjust") }}, {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("line-height") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/font-size", "fr": "fr/CSS/font-size" } ) }}</p> diff --git a/files/pt-pt/web/css/font-smooth/index.html b/files/pt-pt/web/css/font-smooth/index.html deleted file mode 100644 index 2cab7696d8..0000000000 --- a/files/pt-pt/web/css/font-smooth/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: font-smooth -slug: Web/CSS/font-smooth -translation_of: Web/CSS/font-smooth ---- -<div>{{ CSSRef }} {{ Non-standard_header }}</div> - -<p>A propriedade <a href="/en/CSS" title="CSS">CSS</a> <strong><code>font-smooth</code></strong> controla a aplicação anti-aliasing quando as fontes são renderizadas.</p> - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{ Xref_cssinitial() }}</strong></td> - <td><code>auto</code></td> - </tr> - <tr> - <td><strong>Applies to</strong></td> - <td>todos os elementos e conteúdos gerados</td> - </tr> - <tr> - <td><strong>{{ Xref_cssinherited() }}</strong></td> - <td>sim</td> - </tr> - <tr> - <td><strong>Percentages</strong></td> - <td>relativo ao tamanho da fonte do elemento pai</td> - </tr> - <tr> - <td><strong>Media</strong></td> - <td>{{ Xref_cssvisual() }}</td> - </tr> - <tr> - <td><strong>{{ Xref_csscomputed() }}</strong></td> - <td>como especificado</td> - </tr> - </tbody> -</table> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="brush:css">/* Keyword values */ -font-smooth: auto; -font-smooth: never; -font-smooth: always; - -/* <length> value */ -font-smooth: 2em; -</pre> - -<div class="note"> -<p><strong>WebKit</strong> implementa uma propriedade similar, mas com valores diferentes: <strong><code>-webkit-font-smoothing</code></strong>. Isto só funciona no Mac OS X/macOS.</p> - -<ul> - <li><code>auto</code> - Deixa o navegador decidir (Usa o subpixel anti-aliasing quando disponível; este é o padrão)</li> - <li><code>none</code> - Desativa a suavização da fonte; exibe o texto com bordas afiadas e irregulares.</li> - <li><code>antialiased</code> - Suaviza a fonte no nível do pixel, ao contrário do subpixel. Muda a renderização de subpixel para o antialiasing para texto claro em fundos escuros e faz com que pareça mais suave.</li> - <li><code>subpixel-antialiased</code> - Na maioria de displays não retina, isso irá deixar o texto mais nítido.</li> -</ul> -</div> - -<div class="note"> -<p><strong>Firefox</strong> implementa uma propriedade similar, mas com valores diferentes: <strong><code>-moz-osx-font-smoothing</code></strong>. Isto só funciona no Mac OS X/macOS.</p> - -<ul> - <li><code>auto</code> - Permite que o navegador selecione uma otimização para suavização de fonte, normalmente <code>grayscale</code>.</li> - <li><code>grayscale</code> - Renderiza o texto com grayscale antialiasing, ao contrário do subpixel. Muda a renderização do subpixel para antialiasing para que texto o claro em fundos escuros pareça mais claro.</li> -</ul> -</div> - -<h2 id="Especificações">Especificações</h2> - -<p>Embora presente no início (2002) rascunhos de <a href="http://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts</a>, <code>font-smooth</code> foi removido e esta especificação não está na faixa de padrões.</p> - -<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2> - -<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div> - -<p>{{Compat("css.properties.font-smooth")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/">Please Stop "Fixing" Font Smoothing – UsabilityPost</a></li> - <li><a href="https://www.zachleat.com/web/font-smooth/">Laissez-faire font smoothing and anti-aliasing</a></li> -</ul> diff --git a/files/pt-pt/web/css/font-style/index.html b/files/pt-pt/web/css/font-style/index.html deleted file mode 100644 index 55bd8de94f..0000000000 --- a/files/pt-pt/web/css/font-style/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: font-style -slug: Web/CSS/font-style -tags: - - Referencia_CSS -translation_of: Web/CSS/font-style ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Sum.C3.A1rio" name="Sum.C3.A1rio">Sumário</h2> - -<p>A propriedade <strong>font-style</strong> especifica normal (também conhecido como<em>upright</em> ou<em>roman</em>), itálico, e oblíquo faces dentro do<em>font-family</em>.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<p><code>font-style:</code> <code>normal</code> | <code>italic</code> | <code>oblique</code></p> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>normal, oblique, italic </dt> - <dd>Especifica que o<em>user-agent</em> deve escolher a tipografia 'normal', 'oblique' ou 'italic' dentro do {{ Cssxref("font-family") }}.</dd> -</dl> - -<h2 id="Exemplos" name="Exemplos">Exemplos</h2> - -<pre>h1 { font-style: italic } -p { font-style: oblique } - -</pre> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#font-style">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-style">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-style">css3-fonts</a></li> -</ul> diff --git a/files/pt-pt/web/css/font-weight/index.html b/files/pt-pt/web/css/font-weight/index.html deleted file mode 100644 index 8879e55501..0000000000 --- a/files/pt-pt/web/css/font-weight/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: font-weight -slug: Web/CSS/font-weight -tags: - - Referencia_CSS -translation_of: Web/CSS/font-weight ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>A propeidade {{ Cssxref("font-weight") }} especifica o peso ou o traço da fonte:</p> - -<ul> - <li>Valor inicial: normal</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: sim</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">Visual</a></li> - <li>Valor computado: Um dos valores numéricos (100, etc.), ou um dos valores numéricos mais um dos valores relativos (mais realçado ou menos realçado)</li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<p><code>font-weight:</code> <code>normal</code> | <code>bold</code> | <code>bolder</code> | <code>lighter</code> | <code>100</code> | <code>200</code> | <code>300</code> | <code>400</code> | <code>500</code> | <code>600</code> | <code>700</code> | <code>800</code> | <code>900</code> | {{ Cssxref("inherit") }}</p> - -<h3 id="Valores" name="Valores">Valores</h3> - -<dl> - <dt>normal </dt> - <dd>O peso normal da fonte. Semelhante ao 400.</dd> - <dt>bold </dt> - <dd>O peso negrito da fonte. Semelhante ao 700.</dd> - <dt>lighter </dt> - <dd><span id="result_box" lang="pt"><span>Um peso de fonte mais leve que o elemento pai (entre os pesos disponíveis da fonte).</span></span></dd> - <dt>bolder </dt> - <dd><span id="result_box" lang="pt"><span>Um peso de fonte duas vezes grosso que o elemento pai (entre os pesos disponíveis da fonte).</span></span></dd> - <dt>100, 200, 300, 400, 500, 600, 700, 800, 900 </dt> - <dd><span id="result_box" lang="pt"><span class="alt-edited">Os pesos numéricos de fontes para fontes que fornecem mais do que apenas normal e negrito. Se o peso exato fornecido não estiver disponível, então 600-900 utiliza o mais próximo e disponível peso mais duas vezes grosso (ou, se não houver, o peso mais leve disponível e mais próximo) e 100-500 utiliza o peso mais leve disponível e mais próximo (ou, se não houver, o peso mais escuro disponível e mais próximo). Significa que para fontes que fornecem apenas normal e negrito, 100-500 são normais e 600-900 são negritos.</span></span></dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p> -<span id="result_box" lang="pt"><span class="alt-edited">Alice começava a ficar muito cansada de sentar-se junto à irmã no banco e -de não ter nada para fazer: uma ou duas vezes ela espiou o livro que a irmã -estava a ler, mas não tinha fotos nem conversas nele, «e qual é a utilização -de um livro», pensou Alice, «sem fotos ou conversas?»</span></span> -</p> - -<div>Sou quatro vezes grosso<br/> - <span>Sou mais leve</span> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush:css">/* <span class="short_text" id="result_box" lang="pt"><span>Definir o texto do parágrafo como negrito</span></span>. */ -p { - font-weight: bold; -} - -/* <span id="result_box" lang="pt"><span>Defina o texto div para dois passos mais grossos do -que o normal, mas menos que um negrito padrão.</span></span> */ -div { - font-weight: 600; -} - -/* <span id="result_box" lang="pt"><span>Define o texto dentro da tag span para -ser um passo mais leve que o pai.</span></span> */ -span { - font-weight: lighter; -}</pre> - -<h3 id="Resultado">Resultado</h3> - -<p>{{EmbedLiveSample("Exemplos","400","300")}}</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#font-weight">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-weight">css3-fonts</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>3</td> - </tr> - <tr> - <td>Netscape</td> - <td>4</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("font") }} {{ Cssxref("font-family") }}, {{ Cssxref("font-size") }}, {{ Cssxref("font-size-adjust") }}, {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("line-height") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/font-weight", "fr": "fr/CSS/font-weight" } ) }}</p> diff --git a/files/pt-pt/web/css/font/index.html b/files/pt-pt/web/css/font/index.html deleted file mode 100644 index e212941e9f..0000000000 --- a/files/pt-pt/web/css/font/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: font -slug: Web/CSS/font -tags: - - Referencia_CSS -translation_of: Web/CSS/font ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>The font property is a shorthand property for setting {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }} at the same place in the style sheet.</p> - -<ul> - <li>Valor inicial: refere-se a propriedades individuais</li> - <li>Aplica-se a: todos os elementos</li> - <li>Herdado: sim</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">Visual</a></li> -</ul> - -<p> </p> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<p><code>font:</code> [ <<a href="pt/CSS/font-style">font-style</a>> || <<a href="pt/CSS/font-variant">font-variant</a>> || <<a href="pt/CSS/font-weight">font-weight</a>> ]? <<a href="pt/CSS/font-size">font-size</a>> [ / <<a href="pt/CSS/line-height">line-height</a>> ]? <<a href="pt/CSS/font-family">font-family</a>></p> - -<p><code>font:</code> <code>caption</code> | <code>icon</code> | <code>menu</code> | <code>message-box</code> | <code>small-caption</code> | <code>status-bar</code> | <code>-moz-window</code> | <code>-moz-document</code> | <code>-moz-workspace</code> | <code>-moz-desktop</code> | <code>-moz-info</code> | <code>-moz-dialog</code> | <code>-moz-button</code> | <code>-moz-pull-down-menu</code> | <code>-moz-list</code> | <code>-moz-field</code></p> - -<p><code>font:</code> {{ Cssxref("inherit") }}</p> - -<h3 id="Valores" name="Valores">Valores</h3> - -<p>Using the {{ Cssxref("font") }} shorthand property sets the longhand properties as specified, and sets all other font-related properties to their initial values.</p> - -<p>See {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, and {{ Cssxref("font-family") }} for legal values of each property.</p> - -<p>System fonts can also be specified using the {{ Cssxref("font") }} property,<em>instead of</em> specifying individual longhand properties:</p> - -<dl> - <dt>caption </dt> - <dd>The font used for captioned controls (e.g., buttons, drop-downs, etc.).</dd> - <dt>icon </dt> - <dd>The font used to label icons.</dd> - <dt>menu </dt> - <dd>The font used in menus (e.g., dropdown menus and menu lists).</dd> - <dt>message-box </dt> - <dd>The font used in dialog boxes.</dd> - <dt>small-caption </dt> - <dd>The font used for labeling small controls.</dd> - <dt>status-bar </dt> - <dd>The font used in window status bars.</dd> - <dt>-moz-window </dt> - <dd> </dd> - <dt>-moz-document </dt> - <dd> </dd> - <dt>-moz-workspace </dt> - <dd> </dd> - <dt>-moz-desktop </dt> - <dd> </dd> - <dt>-moz-info </dt> - <dd> </dd> - <dt>-moz-dialog </dt> - <dd> </dd> - <dt>-moz-button </dt> - <dd> </dd> - <dt>-moz-pull-down-menu </dt> - <dd> </dd> - <dt>-moz-list </dt> - <dd> </dd> - <dt>-moz-field </dt> - <dd> </dd> -</dl> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/font.html">View Live Examples</a></p> - -<pre>/* Set the font size to 12pt and the line height to 14pt. Set the font family to sans-serif */ -p { font: 12pt/14pt sans-serif } -</pre> - -<pre>/* Set the font size to 80% of the parent tag or default value (if no parent tag present) -and set the font family to sans-serif */ -p { font: 80% sans-serif } -</pre> - -<pre>/* Set the font weight to bold, the font-style to italic, the font size to large, -and the font family to serif. */ -p { font: bold italic large serif } -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>The {{ Cssxref("font-size") }} and {{ Cssxref("font-family") }} parts of the shorthand are mandatory. Omitting them is a syntax error, and causes the entire declaration to be ignored.</p> - -<p>Properties for which no values are given are set to their initial value, which is <code>normal</code> for all properties that can be omitted ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, and {{ Cssxref("line-height") }}).</p> - -<p>The {{ Cssxref("font-size-adjust") }} property is also set to its initial value (<code>none</code>) when the {{ Cssxref("font") }} shorthand property is specified.</p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#font">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font">CSS 2</a> (for {{ Cssxref("font-size-adjust") }})</li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font">CSS 2.1</a></li> - <li><a class="external" href="http://www.w3.org/TR/css3-ui/#font">css3-ui</a> (for new system font values)</li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>3</td> - </tr> - <tr> - <td>Netscape</td> - <td>4</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p>{{ Cssxref("font") }} {{ Cssxref("font-family") }}, {{ Cssxref("font-size") }}, {{ Cssxref("font-size-adjust") }}, {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("line-height") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/font", "fr": "fr/CSS/font", "pl": "pl/CSS/font" } ) }}</p> diff --git a/files/pt-pt/web/css/gap/index.html b/files/pt-pt/web/css/gap/index.html deleted file mode 100644 index 11f5ba95b5..0000000000 --- a/files/pt-pt/web/css/gap/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: grid-gap -slug: Web/CSS/gap -translation_of: Web/CSS/gap -translation_of_original: Web/CSS/grid-gap -original_slug: Web/CSS/grid-gap ---- -<p>A propriedade CSS <strong><code>grid-gap</code></strong> é uma propriedade de <a href="/pt-PT/docs/Web/CSS/Shorthand_properties">taquigrafia</a> para {{cssxref("grid-row-gap")}} e {{cssxref("grid-column-gap")}} especificando os canais entre as linhas de grelha e as colunas.</p> - -<pre class="brush: css no-line-numbers">/* One <length> value */ -grid-gap: 20px; -grid-gap: 1em; -grid-gap: 3vmin; -grid-gap: 0.5cm; - -/* One <percentage> value */ -grid-gap: 16%; -grid-gap: 100%; - -/* Two <length> values */ -grid-gap: 20px 10px; -grid-gap: 1em 0.5em; -grid-gap: 3vmin 2vmax; -grid-gap: 0.5cm 2mm; - -/* One or two <percentage> values */ -grid-gap: 16% 100%; -grid-gap: 21px 82%; - -/* Global values */ -grid-gap: inherit; -grid-gap: initial; -grid-gap: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<p>This property is specified as a value for <code><'grid-row-gap'></code> followed optionally by a value for <code><'grid-column-gap'></code>. If <code><'grid-column-gap'></code> is omitted, it’s set to the same value as <code><'grid-row-gap'></code>.</p> - -<p><code><'grid-row-gap'></code> and <code><'grid-column-gap'></code> are each specified as a <code><length></code> or a <code><percentage></code>.</p> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code><length></code></dt> - <dd>Is the width of the gutter separating the grid lines.</dd> - <dt><code><percentage></code></dt> - <dd>Is the width of the gutter separating the grid lines, relative to the dimension of the element.</dd> -</dl> - -<h3 id="Sintaxe_formal">Sintaxe formal</h3> - -{{csssyntax}} - -<h2 id="Exemplo">Exemplo</h2> - -<h3 id="Conteúdeo_de_HTML">Conteúdeo de HTML</h3> - -<pre class="brush: html"><div id="grid"> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> -</div></pre> - -<h3 id="Conteúdo_de_CSS">Conteúdo de CSS</h3> - -<pre class="brush: css; highlight[5]">#grid { - display: grid; - height: 200px; - grid-template: repeat(3, 1fr) / repeat(3, 1fr); - grid-gap: 20px 5px; -} - -#grid > div { - background-color: lime; -} -</pre> - -<p>{{EmbedLiveSample("Example", "100%", "200px")}}</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<p> </p> - -<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir dos dados estruturados. Se pretender contribuir para os dados, por favor, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pedido de submissão.</div> - -<p>{{Compat("css.properties.grid-gap")}}</p> - -<p> </p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>Propriedade de CSS relacionadas: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}}</li> - <li>Guia de layout de grelha: <em><a href="/pt-PT/docs/Web/CSS/layout_de_grelha_css/conceitos_basicos_de_layour_de_grelha#Canais">Conceitos básicos de layout de grelha - Canais</a></em></li> -</ul> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/pt-PT/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/pt-PT/docs/Web/CSS/Referência_CSS"><strong>Referência CSS</strong></a></li> - <li><a href="/pt-PT/docs/Web/CSS/layout_de_grelha_css">CSS - Layout de Grelha</a></li> - <li data-default-state="open"><a href="#"><strong>Guias</strong></a> - <ol> - <li><a href="/pt-PT/docs/Web/CSS/layout_de_grelha_css/conceitos_basicos_de_layour_de_grelha">Conceitos básicos de layout de grelha</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Propriedades</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossário</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/pt-pt/web/css/height/index.html b/files/pt-pt/web/css/height/index.html deleted file mode 100644 index e3b2b71c2c..0000000000 --- a/files/pt-pt/web/css/height/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: height -slug: Web/CSS/height -tags: - - Referencia_CSS -translation_of: Web/CSS/height ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>A propriedade <code>height</code> é usada para configurar a altura dada a um elemento.</p> - -<ul> - <li>Valor inicial: auto</li> - <li>Aplica-se a: o nível do bloco e elementos substituídos</li> - <li>Herdado: não</li> - <li>Porcentagens: refere-se à altura do bloco que o contém</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">Visual</a></li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval"> height: [ <length> || <percentage> ] auto | inherit -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<ul> - <li><strong>length</strong> : pode ser em px, cm, in, em</li> - <li><strong>percentage</strong> : % especificado como uma porcentagem da altura do elemento pai</li> - <li><strong>auto</strong> : o navegador calculará e selecionará uma altura para o elemento especificado.</li> -</ul> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/height.html">View Live Examples</a></p> - -<pre>table{height: 100%;} - -img{height: 200px;} - -form{height: auto;} -</pre> - -<p><span class="comment">== Notas ==</span></p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#height">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">CSS 2.1</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Netscape</td> - <td>4</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p><a href="pt/CSS/box_model">box model</a>, {{ Cssxref("width") }}, {{ Cssxref("-moz-box-sizing") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/height", "fr": "fr/CSS/height" } ) }}</p> diff --git a/files/pt-pt/web/css/index.html b/files/pt-pt/web/css/index.html deleted file mode 100644 index 9f7a65ea5f..0000000000 --- a/files/pt-pt/web/css/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: 'CSS: Folhas de Estilo em Cascata' -slug: Web/CSS -tags: - - Apresentação - - CSS - - Desenho - - Design - - Disposição - - Estilos - - Folhas de Estilo em Cascata - - Folhas de estilo - - Landing - - Referencia - - 'l10n:prioridade' -translation_of: Web/CSS ---- -<div>{{CSSRef}}</div> - -<p class="summary"><span class="seoSummary"><strong>Folhas de Estilo em Cascata (CSS - Cascading Style Sheets</strong>) é uma linguagem de <a href="/pt-PT/docs/Web/API/Folha_de_estilo">folha de estilo</a> utilizada para descrever a apresentação de um documento escrito em <a href="/pt-PT/docs/Web/HTML" title="HyperText Markup Language">HTML</a> or <a href="/pt-PT/docs/Introducao_a_XML">XML</a> (incluindo dialetos de XML, tais como <a href="/pt-PT/docs/Web/SVG">SVG</a>, <a href="/pt-PT/docs/Web/MathML">MathML</a> ou </span> {{Glossary("XHTML", "", 1)}})<span class="seoSummary">. CSS descreve como os elementos deverão ser renderizados no ecrã, no papel, na fala, ou em outra média.</span></p> - -<p>CSS é uma das principais linguagens da Web aberta e está estandardizada nos navegadores de acordo com a <a class="external" href="http://w3.org/Style/CSS/#specs">especificação W3C</a>. Desenvolvida em níveis, CSS1 está agora obsoleta, CSS2.1 é a recomendação, e <a href="/pt-PT/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, agora divida em pequenos módulos, está a progredir a caminho da estandardização</p> - -<section id="sect1"> -<ul class="card-grid"> - <li><span>Introdução a CSS</span> - - <p>Se é novo no desenvolvimento Web, certifique-se que lê o nosso artigo de <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a> para saber o que é CSS e como utilizar.</p> - </li> - <li><span>Tutoriais de CSS</span> - <p>A nossa <a href="/pt-PT/docs/Learn/CSS">área de aprendizagem de CSS</a> contém uma grande quantidade de tutoriais para levá-lo do nível de principiante até à proficiência, abrangendo todos os conteúdos essenciais.</p> - </li> - <li><span>Referência de CSS</span> - <p>A nossa <a href="/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS">referência exaustiva de CSS </a>para os programadores da Web que descreve cada propriedade e conceito de CSS.</p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Tutoriais">Tutoriais</h2> - -<p>A nossa <a href="/pt-PT/docs/Learn/CSS">Área de Aprendizagem de CSS </a>apresenta múltiplos módulos que ensinam CSS desde o início — não é necessário conhecimento prévio.</p> - -<dl> - <dt><a href="/pt-PT/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a></dt> - <dd>Este módulo permite-lhe começar com os básicos de como o CSS funciona, incluindo selectores e propriedades, escrever regras CSS, aplicar CSS a HTML, como especificar comprimento, cor e outras unidades em CSS, cascata e herança, modelos básicos de caixa e depuração de CSS.</dd> - <dt><a href="/pt-PT/docs/Learn/CSS/Estilo_de_texto">Estilizar texto</a></dt> - <dd>Aqui aprendemos os fundamentos do estilo do texto, incluindo a definição da fonte, negrito e itálico, espaçamento entre linhas e letras, e sombras e outras características do texto. Nós terminamos o módulo, aplicando fontes personalizadas à sua página, e estilizando listas e links.</dd> - <dt><a href="/pt-PT/docs/Learn/CSS/Estilo_de_caixas">Estilizar caixas</a></dt> - <dd>A seguir, focamos em estilizar caixas, um dos passos fundamentais para a criação de uma página web. Neste módulo, recapitulamos o modelo da caixa e depois aprendemos a controlar a disposição das caixas, definindo preenchimentos, bordas e margens, cores de fundo personalizadas, imagens e outras características, bem como características mais avancadas como sombras e filtros nas caixas.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">Disposição de CSS (<em>layout</em>)</a></dt> - <dd>Até agora, já analisámos os fundamentos do CSS, como estilizar os textos, e como estilizar e manipular as caixas que o seu conteúdo contém. Agora é altura de ver como colocar as suas caixas no lugar certo em relação ao <em>{{Glossary("layout viewport", "viewport")}}</em>, e umas às outras. Cobrimos os pré-requisitos necessários para que possa agora mergulhar profundamente no layout do CSS, observando diferentes configurações de visualização, métodos tradicionais de layout envolvendo <em>float </em>e posicionamento, e novas ferramentas de posicionamento como o <em>flexbox</em>.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Tools" id="Referência">Referência</h2> - -<ul> - <li><a href="https://developer.mozilla.org/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS">CSS - Referência</a>: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.</li> - <li>CSS key concepts: - <ul> - <li>The <a href="/en-US/docs/Web/CSS/Syntax">syntax and forms of the language</a></li> - <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a>, <a href="/en-US/docs/Web/CSS/Inheritance">inheritance</a> and <a href="/en-US/docs/Web/CSS/Cascade">the Cascade</a></li> - <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a> and <a href="/en-US/docs/Web/CSS/margin_collapsing">margin collapse</a></li> - <li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/Web/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li> - <li><a href="/en-US/docs/Web/CSS/initial_value">Initial</a>, <a href="/en-US/docs/Web/CSS/computed_value">computed</a>, <a href="/en-US/docs/Web/CSS/used_value">used</a>, and <a href="/en-US/docs/Web/CSS/actual_value">actual</a> values</li> - <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS shorthand properties</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li> - </ul> - </li> -</ul> - -<h2 class="Tools" id="Cookbook">Cookbook</h2> - -<p>The <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a> aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.</p> - -<h2 class="Tools" id="Ferramentas_para_o_desenvolvimento_de_CSS">Ferramentas para o desenvolvimento de CSS</h2> - -<ul> - <li>You can use the <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> to check if your CSS is valid. This is an invaluable debugging tool.</li> - <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> lets you view and edit a page's live CSS via the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> and <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li> - <li>The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> for Firefox lets you track and edit live CSS on watched sites.</li> - <li>The Web community has created various other <a href="/en-US/docs/Web/CSS/Tools">miscellaneous CSS tools</a> for you to use.</li> -</ul> - -<h2 id="Erros_de_metadados">Erros de metadados</h2> - -<ul> - <li>Firefox: {{bug(1323667)}}</li> -</ul> -</div> -</div> -</section> - -<h2 id="Consultar_também">Consultar também:</h2> - -<ul> - <li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a>: Get a creative boost by exploring examples of the latest CSS technologies in action.</li> - <li>Web languages to which CSS is often applied: <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/XHTML">XHTML</a>, and <a href="/en-US/docs/XML">XML</a>.</li> - <li>Mozilla technologies that make extensive use of CSS: <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/Firefox">Firefox</a>, and <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Extensions">extensions</a> and <a href="/en-US/Add-ons/Themes">themes</a>.</li> -</ul> diff --git a/files/pt-pt/web/css/inherit/index.html b/files/pt-pt/web/css/inherit/index.html deleted file mode 100644 index 8bfcd334e5..0000000000 --- a/files/pt-pt/web/css/inherit/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: inherit -slug: Web/CSS/inherit -translation_of: Web/CSS/inherit ---- -<p>Herda propriedade do elemento pai. -</p> diff --git a/files/pt-pt/web/css/list-style/index.html b/files/pt-pt/web/css/list-style/index.html deleted file mode 100644 index 3a6cf6d36d..0000000000 --- a/files/pt-pt/web/css/list-style/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: list-style -slug: Web/CSS/list-style -tags: - - Referencia_CSS -translation_of: Web/CSS/list-style ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Resumo" name="Resumo">Resumo</h2> - -<p>A propriedade <code>list-style</code> é uma propriedade usada para configurar list-style-type, list-style-image, e list-style-position.</p> - -<ul> - <li>Valor inicial: olhar propriedades individuais para detalhes</li> - <li>Aplica-se a: elementos com 'display' com valor 'list-item'</li> - <li>Herdado: sim</li> - <li>Porcentagens: N/A</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">Visual</a></li> -</ul> - -<h2 id="Sintaxe" name="Sintaxe">Sintaxe</h2> - -<pre class="eval"> list-style: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none] -</pre> - -<h2 id="Valores" name="Valores">Valores</h2> - -<p>disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, inside, outside, <url>, none</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html">List 1 -<ul class="one"> - <li>List Item1</li> - <li>List Item2</li> - <li>List Item3</li> -</ul> -List 2 -<ul class="two"> - <li>List Item A</li> - <li>List Item B</li> - <li>List Item C</li> -</ul> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.one { - list-style: circle; -} - -.two { - list-style: square inside; -}</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample('Exemplos')}}</p> - -<h2 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style">CSS 1</a></li> -</ul> - -<p><span class="comment">* {{ mediawiki.external('http://www.w3.org/TR/CSS21/visudet.html#the-height-property CSS 2.1') }} == Compatibilidade com navegadores == <table class="standard-table"> <tr> <th>Navegador</th> <th>Versão mais antiga</th> </tr> <tr> <td>Internet Explorer</td> <td>4</td> </tr> <tr> <td>Netscape</td> <td>4</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> </table></span></p> - -<h2 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h2> - -<p><a href="pt/CSS/box_model">list-style-image</a>, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/list-style", "fr": "fr/CSS/list-style" } ) }}</p> diff --git a/files/pt-pt/web/css/media_queries/index.html b/files/pt-pt/web/css/media_queries/index.html deleted file mode 100644 index 13fc49d8ec..0000000000 --- a/files/pt-pt/web/css/media_queries/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Consultas de média -slug: Web/CSS/Media_Queries -tags: - - CSS - - Consultas de Média - - Consultas de média CSS3 - - Desenho Adaptável - - Referencia - - Visão Geral -translation_of: Web/CSS/Media_Queries -original_slug: Web/CSS/Consultas_de_media ---- -<div>{{CSSRef}}</div> - -<p><strong>Consultas de média</strong> permitem adaptar o seu site ou aplicação de acordo com diferentes características ou parâmetros dos dispositivos utilizados.</p> - -<p>São um elemento chave de <a href="/en-US/docs/Web/Apps/Progressive/Responsive">desenho adaptável </a>. Por exemplo, uma consulta de média pode reduzir o tamanho do texto em dispositivos pequenos, aumentar o espaço entre parágrafos quando a página é visualizada em modo de paisagem, ou ampliar os botões nos ecrãs táteis.</p> - -<p>Em <a href="/en-US/docs/Web/CSS">CSS</a>, utiliza-se a <a href="/en-US/docs/Web/CSS/At-rule">regra "at"</a> {{cssxref("@media")}} para aplicar, condicionalmente, parte de uma folha de estilos com base no resultado de uma consulta de média. E utiliza-se {{cssxref("@import")}} para aplicar, condicionalmente, uma folha de estilos inteira.</p> - -<h3 id="Consultas_de_média_em_HTML">Consultas de média em HTML</h3> - -<p>Em <a href="/en-US/docs/Web/HTML">HTML</a>, as consultas de média podem-se aplicar a vários elementos:</p> - -<ul> - <li>No atributo {{htmlattrxref("media", "link")}} do elemento {{HTMLElement("link")}}. O valor deste atributo define os média a que se deve aplicar o recurso ligado (tipicamente, este recurso é um documento CSS).</li> - <li>No atributo {{htmlattrxref("media", "source")}} do elemento {{HTMLElement("source")}} (apenas é válido quando este elemento está aninhado dentro de um elemento {{HTMLElement("picture")}}.). O valor deste atributo define quais os média que podem utilizar a imagem associada ao elemento.</li> - <li>No atributo {{htmlattrxref("media", "style")}} do elemento {{HTMLElement("style")}}. O valor deste atributo define os média a que são aplicados os estilos.</li> -</ul> - -<h3 id="Consultas_de_média_em_JavaScript">Consultas de média em JavaScript</h3> - -<p>Em <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, pode-se usar o método {{domxref("Window.matchMedia()")}} para verificar se a janela possui as características definidas na consulta de média. Também se pode utilizar {{domxref("MediaQueryList.addListener()")}} para gerar eventos sempre que houver mudanças no resultado da consulta de média. Com estas funcionalidades, o seu site ou aplicação pode responder a mudanças na configuração, orientação ou estado do dispositivo.</p> - -<p>Pode aprender mais sobre utilização programática das consultas de média no artigo <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testar consultas de média</a>.</p> - -<h2 id="Referências">Referências</h2> - -<h3 id="Regras_at">Regras "at"</h3> - -<div class="index"> -<ul> - <li>{{cssxref("@import")}}</li> - <li>{{cssxref("@media")}}</li> -</ul> -</div> - -<h2 id="Guias">Guias</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Utilizar consultas de média</a></dt> - <dd>Introdução às consultas de média, a sua sintaxe, os operadores e funcionalidades utilizadas para construir as expressões das consultas de média.</dd> - <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testar consultas de média programaticamente</a></dt> - <dd>Descrição de como utilizar consultas de média no código JavaScript code para determinar o estado do dispositivo, e como instalar <em>listeners</em> que notificam o código quando o resultado das consultas muda (por exemplo, quando o utilizador roda o ecrã ou redimensiona a janela do navegador).</dd> - <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">Utilizar Consultas de média para Acessibilidade</a></dt> - <dd>Este artigo explica de que forma as consultas de média podem ajudar os utilizadores a compreender melhor o seu site.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries')}}</td> - <td>{{Spec2('CSS5 Media Queries')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Conditional')}}</td> - <td>{{Spec2('CSS3 Conditional')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS4 Media Queries')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'media.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> - -<h3 id="media_rule">@media rule</h3> - -<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se gostaria de contribuir para estes dados, visite o repositório <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um <em>pull request</em>.</div> - -<p>{{Compat("css.at-rules.media")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>A regra {{cssxref("@supports")}} permite aplicar estilos em função da compatibilidade do navegador com diversas tecnologias CSS.</li> -</ul> diff --git a/files/pt-pt/web/css/media_queries/using_media_queries/index.html b/files/pt-pt/web/css/media_queries/using_media_queries/index.html deleted file mode 100644 index fee2c9ecf1..0000000000 --- a/files/pt-pt/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,437 +0,0 @@ ---- -title: Utilizar consultas de média -slug: Web/CSS/Media_Queries/Using_media_queries -tags: - - Avançado - - CSS - - Desenho Adaptável - - Guía - - Media -translation_of: Web/CSS/Media_Queries/Using_media_queries -original_slug: Web/CSS/Consulta_de_mídia ---- -<p>{{ gecko_minversion_header("1.9.1") }}</p> - -<p>As <strong>consultas de média </strong>permitem modificar um site ou aplicação de acordo com o tipo de dispositivo (ecrã ou impressora, por exemplo) ou características e parâmetros específicos (como a resolução de ecrã ou largura do {{glossary("viewport")}} do navegador). Podem utilizar-se para:</p> - -<ul> - <li>Aplicar estilos condicionalmente numa folha CSS, com recurso às regras {{cssxref("@media")}} e {{cssxref("@import")}};</li> - <li>Desenhar para um tipo de média específico com os elementos HTML {{HTMLElement("link")}}, {{HTMLElement("source")}}, e outros;</li> - <li>Testar e monitorizar estados de média utilizando os métodos de JavaScript {{domxref("Window.matchMedia()")}} and {{domxref("MediaQueryList.addListener()")}}.</li> -</ul> - -<h2 id="Sintaxe">Sintaxe</h2> - -<p>Consultas de média consistem num <a class="internal" href="/pt-PT/docs/Web/CSS/@media" title="En/CSS/@media">tipo de média</a> e uma ou mais expressões envolvendo recursos de média. Note que estas consultas não são sensíveis a maiúsculas. Pode-se combinar várias consultas com <em>operadores lógicos</em>.</p> - -<p>O resultado da consulta é verdadeiro se o tipo de média especificado na consulta de média encaixa com o tipo de dispositivo no qual o documento está a ser exibido <strong>e</strong> se todas as expressões na consulta de média forem verdadeiras.</p> - -<p>Quando uma consulta de média é verdadeira, a folha de estilos correspondente é aplicada seguinto as regras normais de cascata.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> Considere a etiqueta {{HTMLElement("link")}} com uma consulta de média. O ficheiro CSS que ela refere é descarregado mesmo que a consulta de média seja falsa; o conteúdo da folha não será aplicado até a consulta se tornar verdadeira.</p> -</div> - -<h3 id="Operadores_lógicos">Operadores lógicos</h3> - -<p>Você pode compor consultas de média complexas usando operadores lógicos, incluindo <code>not</code>, <code>and</code>, e <code>only</code> ; assim como combinar consultas de média numa lista separada por vírgulas, o que é equivalente a um operador "ou".</p> - -<h4 id="and"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>and</strong></span></font></h4> - -<p>O operador <code>and</code> indica que a consulta é verdadeira se cada subconsulta que a compõe for verdadeira. Também pode juntar os tipos de média às funcionalidades de média. Tem maior precedência que a vírgula ("ou") e o <code>not</code>.</p> - -<h4 id="not"><strong><code>not</code></strong></h4> - -<p>A palavra-chave <code>not</code>, nega o resultado de toda a consulta; por exemplo, "<code><span style="font-family: monospace;">all</span> and (not color)</code>" é verdadeiro para dispositivos monocromáticos independentemente do tipo de média. É o operador com menor precedência depois da vírgula.</p> - -<h4 id="only"><strong><code>only</code></strong></h4> - -<p>A palavra-chave <code>only</code> indica que só deve ser aplicado o estilo se a consulta inteira for verdadeira. Quando se utiliza este operador, é obrigatório especificar um tipo de média.</p> - -<p>É útil para esconder folhas de estilo de navegadores antigos que não suportam consultas de média. Por exemplo, se não for utilizado <code>only</code>, navegadores antigos interpretam a consulta <code>screen and (max-width: 500px)</code> apenas como <code>screen</code> - ignoram o resto e aplicam o estilo em todos os ecrãs. </p> - -<p>Este operador não pode ser utilizado em conjunto com o <code>not</code>, e ambos têm a mesma precedência.</p> - -<h4 id="(vírgula)"><code>,</code> (vírgula)</h4> - -<p>Cada subconsulta numa lista separada por vírgulas é avaliada isoladamente e e alguma for verdadeira, a consulta composta é verdadeira. Por outras palavras, as vírgulas são equivalentes a um "ou-lógico".</p> - -<h4 id="Precedência_dos_operadores">Precedência dos operadores</h4> - -<ul> - <li>As vírgulas têm a menor precedência;</li> - <li><code>only</code> e <code>not</code> têm a mesma precedência;</li> - <li><code>and</code> tem a maior precedência.</li> -</ul> - -<p>Os parênteses <strong>não </strong>podem ser utilizados para mudar esta precedência.</p> - -<p> </p> - -<h3 id="Pseudo_BNF_(para_aqueles_que_gostam_desde_tipo_de_coisa)">Pseudo BNF (para aqueles que gostam desde tipo de coisa)</h3> - -<pre>media_query_list: <media_query> [, <media_query> ]* -media_query: [[only | not]? <media_type> [ and <expression> ]*] - | <expression> [ and <expression> ]* -expression: ( <media_feature> [: <value>]? ) -media_type: all | aural | braille | handheld | print | - projection | screen | tty | tv | embossed -media_feature: width | min-width | max-width - | height | min-height | max-height - | device-width | min-device-width | max-device-width - | device-height | min-device-height | max-device-height - | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio - | color | min-color | max-color - | color-index | min-color-index | max-color-index - | monochrome | min-monochrome | max-monochrome - | resolution | min-resolution | max-resolution - | scan | grid</pre> - -<p>Consultas de média não diferenciam maiúsculas de minúsculas. Consultas de média que envolvem tipos de média desconhecidos são sempre falsas.</p> - -<div class="note"><strong>Nota:</strong> Os parênteses são requisitados a volta de expressões; esquecer de usá-los é um erro.</div> - -<h2 id="Recursos_de_média">Recursos de média</h2> - -<p>A maioria dos recursos de média pode ser prefixado com "min-" ou "max-" para expressar "maior ou igual a" ou "menor ou igual a". Isto evita usar os símbolos "<" e ">", que poderiam entrar em conflito com HTML e XML. Se você usar um recurso de média sem especificar um valor, a expressão é definida como verdadeira se o valor do recurso for diferente de zero.</p> - -<div class="note"><strong>Nota:</strong> Se um recurso de média não se aplica ao dispositivo no qual o navegador está sendo rodado, expressões envolvendo este recurso de média serão sempre falsas. Por exemplo, consultando a relação de aspecto de um dispositivo auditivo sempre resultará em falso.</div> - -<h3 id="color">color</h3> - -<p><strong>Valor:</strong> {{cssxref("<color>")}}<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> sim</p> - -<p>Indica o número de bits por componente de cor do dispositivo de saída. Se o dispositivo não é colorido, este valor é zero.</p> - -<div class="note"><strong>Nota:</strong> Se os componentes de cor tiverem diferentes de números de bits por componente de cor, o menor número é usado. Por exemplo, se uma tela usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo é considerado para usar 5 bits por componente de cor. Se o dispositivo usa cores indexadas, o número mínimo de bits por componente de cor na tabela de cores é usado.</div> - -<h4 id="Exemplos">Exemplos</h4> - -<p>Para aplicar uma folha de estilos a todos os dispositivos coloridos:</p> - -<pre>@media all and (color) { ... } -</pre> - -<p>Para aplicar uma folha de estilos a dispositivos com no mínimo 4 bits por componente de cor:</p> - -<pre>@media all and (min-color: 4) { ... } -</pre> - -<h3 id="color-index">color-index</h3> - -<p><strong>Valor:</strong> integer<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> sim</p> - -<p>Indica o número de entradas na tabela de cor para o dispositivo de saída.</p> - -<h4 id="Exemplos_2">Exemplos</h4> - -<p>Para indicar que uma folha de estilos deve ser aplicada a todos os dispositivos usando cores indexadas, você pode fazer:</p> - -<pre>@media all and (color-index) { ... } -</pre> - -<p>Para aplicar uma folha de estilos a dispositivos de cores indexadas com no mínimo 256 cores:</p> - -<pre><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> -</pre> - -<h3 id="device-aspect-ratio">device-aspect-ratio</h3> - -<p><strong>Valor:</strong> integer / integer<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>Aceita os prefixos min/max:</strong> sim</p> - -<p>Descreve a relação de aspecto do dispositivo de saída. Este valor consiste em dois positivos inteiros (integer) separados por um caractére barra ("/"). Isto representa o número de pixels horizontais sobre o número de pixels verticais.</p> - -<h4 id="Exemplo">Exemplo</h4> - -<p>O que vem a seguir selecionar uma folha de estilos especial para uso em dispositivos de tela comprida (widescreen):</p> - -<pre>@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> - -<p>Isto seleciona o estilo quando a relação de aspecto for 16:9 ou 16:10.</p> - -<h3 id="device-height">device-height</h3> - -<p><strong>Valor:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>Aceita os prefixos min/max: </strong>sim</p> - -<p>Descreve a altura do dispositivo de saída (sendo a tela ou página inteira, ao invés de somente a área de renderização, como a janela do documento).</p> - -<h4 id="Exemplo_2">Exemplo</h4> - -<p>Para aplicar uma folha de estilos a um documento quando exibido em uma tela que for mais fina do que 800 pixels, você pode usar isto:</p> - -<pre><link rel="stylesheet" media="screen and (max-device-width: 799px)" /> -</pre> - -<h3 id="device-width">device-width</h3> - -<p><strong>Valor:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>Aceita os prefixos min/max:</strong> sim</p> - -<p>Descreve a largura do dispositivo de saída (sendo a tela ou a página inteira, ao invés de somente a área de renderização, como a janela do documento).</p> - -<h3 id="grid">grid</h3> - -<p><strong>Valor:</strong> integer<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> all<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p>Determina Determines se o dispositivo de saída é um dispositivo <em>grid</em> ou um dispositivo bitmap. Se o dispositivo for baseado em <em>grid</em> (tal como um terminal tty ou uma tela de celular com somente uma fonte), o valor é 1. Caso contrário é zero.</p> - -<div class="note"><strong>Nota:</strong> Gecko (e consequentemente o Firefox) não suporta dispositivos <em>grid</em> atualmente, então este recurso de média não é suportado.</div> - -<h4 id="Exemplo_3">Exemplo</h4> - -<p>Para aplicar um estilo a dispositivos de mão com uma tela de 15 caracteres ou mais estreito:</p> - -<pre>@media handheld and (grid) and (max-width: 15em) { ... } -</pre> - -<div class="note"><strong>Nota:</strong> A unidade "em" tem um uso especial em dispositivos <em>grid</em>; desde que a largura exata de um "em" não pôde ser determinada, 1em é assumido como a largura de uma célula <em>grid</em> horizontal, e a altura de uma célula vertical.</div> - -<h3 id="height">height</h3> - -<p><strong>Valor:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>Aceita os prefixos min/max:</strong> sim</p> - -<p>O recurso de média <code>height</code> descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura da <em>viewport</em> ou da caixa de páginas em uma impressora).</p> - -<div class="note"><strong>Nota:</strong> Quando o usuário redimenciona a janela, o Firefox substituirá as folhas de estilos como for apropriado, baseado em consultas de média usando os recursos de média <code>width</code> e <code>height</code>.</div> - -<h3 id="monochrome">monochrome</h3> - -<p><strong>Valor:</strong> integer<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> sim</p> - -<p>Indica o número de bits por pixel em um dispositivo monocromático (escala de cinza). Se o dispositivo não for monocromático, o valor do dispositivo é 0.</p> - -<h4 id="Exemplos_3">Exemplos</h4> - -<p>Para aplicar uma folha de estilos para todos os dispositivos monocromáticos:</p> - -<pre>@media all and (monochrome) { ... } -</pre> - -<p>Para aplicar uma folha de estilos para dispositivos monocromáticos com no mínimo 8 bits por pixel:</p> - -<pre>@media all and (min-monochrome: 8) { ... } -</pre> - -<h3 id="orientation">orientation</h3> - -<p><strong>Valor:</strong> <code>landscape</code> | <code>portrait</code><br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p>Indica se o dispositivo está em modo paisagem (a exibição é mais larga do que alta) ou retrato (a exibição é mais alta do que larga).</p> - -<h4 id="Exemplo_4">Exemplo</h4> - -<p>Para aplicar uma folha de estilos somente na orientação retrato:</p> - -<pre>@media all and (orientation: portrait) { ... }</pre> - -<h3 id="resolution">resolution</h3> - -<p><strong>Valor:</strong> {{cssxref("<resolution>")}}<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> - <strong>Aceita os prefixos min/max:</strong> sim</p> - -<p>Indica a resolução (densidade de pixels) do dispositivo de saída. A resolução pode ser especificada tanto em pontos por polegada (dpi) quanto pontos por centímetro (dpcm).</p> - -<h4 id="Exemplo_5">Exemplo</h4> - -<p>Para aplicar uma folha de estilos a dispositivos com no mínimo 300 pontos por polegada de resolução:</p> - -<pre>@media print and (min-resolution: 300dpi) { ... } -</pre> - -<h3 id="scan">scan</h3> - -<p><strong>Valor:</strong> <code>progressive</code> | <code>interlace</code><br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/TV", "tv")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p>Descreve o processo de escaneamento de dispositivos de saída de televisão.</p> - -<div class="note"><strong>Nota: </strong>Gecko (e consequentemente o Firefox) não suportam o tipo de média <code>tv</code> atualmente, então este recurso de média não é suportado.</div> - -<h4 id="Exemplo_6">Exemplo</h4> - -<p>Para aplicar uma folha de estilos somente para televisões com escaneamento progressivo:</p> - -<pre>@media tv and (scan: progressive) { ... } -</pre> - -<h3 id="width">width</h3> - -<p><strong>Valor:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>Aceita os prefixos min/max:</strong> sim</p> - -<p>O recurso de média <code>width</code> descreve a largura da superfície de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de páginas em uma impressora).</p> - -<div class="note"><strong>Nota: </strong>Quando o usuário redimensiona a janela, o Firefox substituirá a folha de estilo como apropriado, baseado nas consultas de média usando os recursos de média <code>width</code> e <code>height</code>.</div> - -<h4 id="Exemplos_4">Exemplos</h4> - -<p>Se você desejar espeficar uma folha de estilos para dispositivos de mão, ou dispositivos de tela com uma largura maior do que 20em, você pode usar esta folha de estilos:</p> - -<pre>@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } -</pre> - -<p>Este recurso de média especifica uma folha de estilos que deve ser aplicada a médias impressas mais largas do que 8.5 polegadas:</p> - -<pre><link rel="stylesheet" media="print and (min-width: 8.5in)" - href="http://foo.com/mystyle.css" /> -</pre> - -<p>Este recurso especifica uma folha de estilos que é usável quando a <em>viewport</em> estiver entre 500 e 800 pixels de largura:</p> - -<pre>@media screen and (min-width: 500px) and (max-width: 800px) { ... } -</pre> - -<h2 id="Características_de_média_específicas_da_Mozilla">Características de média específicas da Mozilla</h2> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ gecko_minversion_header("1.9.2") }}</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">A Mozilla oferece várias características de média específicas para o Gecko. Algumas delas podem ser propostas como características oficiais de média.</p> - -<h3 id="-moz-images-in-menus">-moz-images-in-menus</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o dispositivo permitir às imagens, aparecer nos menus, recebe 1; caso contrário, o valor é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(images-in-menus)") }} do CSS.</p> - -<h3 id="-moz-mac-graphite-theme">-moz-mac-graphite-theme</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o usuário configurou o dispositivo para usar a aparência "Graphite" no Mac OS X, o valor é 1. Se o usuário está usando a aparência azul padrão, ou não for no Mac OS X, o valor é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} do CSS.</p> - -<h3 id="-moz-maemo-classic">-moz-maemo-classic</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o usuário está usando o Maemo com o tema original, o valor é 1; se estiver usando o novo tema "Fremantle", o valor é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(maemo-classic)") }} do CSS.</p> - -<h3 id="-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se a interface do dispositivo do usuário exibe um botão de seta para trás ao fim da barra de rolagem, o valor é 1. Caso contrário é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} do CSS.</p> - -<h3 id="-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se a interface do dispositivo do usuário exibe um botão de seta para frente ao fim da barra de rolagem, o valor é 1. Caso contrário é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} do CSS.</p> - -<h3 id="-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se a interface do dispositivo do usuário exibe uma seta para trás no início da barra de rolagem, o valor é 1. Caso contrário é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} do CSS.</p> - -<h3 id="-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se a interface do dispositivo do usuário exibe uma seta para frente no início da barra de rolagem, o valor é 1. Caso contrário é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} do CSS.</p> - -<h3 id="-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se a interface do dispositivo do usuário exibe a barra de rolagem proporcionalmente (isto é, tamanho baseado na porcentagem do documento que está visível), o valor é 1. Caso contrário é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} do CSS.</p> - -<h3 id="-moz-touch-enabled">-moz-touch-enabled</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o dispositivo suporta eventos de toque (para um tela sensível ao toque), o valor é 1. Caso contrário é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(touch-enabled)") }} do CSS.</p> - -<h4 id="Exemplo_7">Exemplo</h4> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Você pode usar isso para renderizar seus botões ligeiramente maiores, por exemplo, se o usuário estiver em um dispositivo com tela sensível ao toque, para torná-lo mais amigável aos dedos.</p> - -<h3 id="-moz-windows-classic">-moz-windows-classic</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o usuário estiver usando o Windows, sem tema (no modo clássico ao invés de usar "uxtheme"), o valor é 1; caso contrário é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(windows-classic)") }} do CSS.</p> - -<h3 id="-moz-windows-compositor">-moz-windows-compositor</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o usuário estiver usando o Windows com o compositor DWM, o valor é 1; caso contrário é 0.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Isto corresponde às pseudo classes {{ cssxref(":-moz-system-metric(windows-compositor)") }} do CSS.</p> - -<h3 id="-moz-windows-default-theme">-moz-windows-default-theme</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Valor:</strong> inteiro<br> - <strong style="font-weight: bold;">média</strong><strong>:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>Aceita os prefixos min/max:</strong> não</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Se o usuário está correntemente usando um dos temas do Windows (Luna, Royale, Zune ou Aero (incluindo o Vista Basic, Vista Advanced e o Aero Glass), o valor 1. Caso contrário é 0.</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a> (en)</li> - <li><a class="internal" href="/en/CSS/@media" title="En/CSS/@media">Media types</a> (en)</li> -</ul> diff --git a/files/pt-pt/web/css/paged_media/index.html b/files/pt-pt/web/css/paged_media/index.html deleted file mode 100644 index 53d7d35781..0000000000 --- a/files/pt-pt/web/css/paged_media/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Média paginada -slug: Web/CSS/Paged_Media -tags: - - CSS - - CSS3 - - Quebras de Página -translation_of: Web/CSS/Paged_Media -original_slug: Web/CSS/Média_paginada ---- -<p>Paged media properties control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable area, style left and right pages differently, and control breaks inside elements. Popularly supported properties include</p> - -<ul> - <li>{{ cssxref("page-break-before") }}</li> - <li>{{ cssxref("page-break-after") }}</li> - <li>{{ cssxref("page-break-inside") }}</li> - <li>{{ cssxref("orphans") }}</li> - <li>{{ cssxref("widows") }}</li> - <li>{{ cssxref("@page") }}</li> -</ul> diff --git a/files/pt-pt/web/css/pseudo-classes/index.html b/files/pt-pt/web/css/pseudo-classes/index.html deleted file mode 100644 index e6d3d58c0f..0000000000 --- a/files/pt-pt/web/css/pseudo-classes/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Pseudoclasses -slug: Web/CSS/Pseudo-classes -tags: - - CSS - - Pseudoclasse - - Referencia - - Resumo - - Seletores - - Sinopse -translation_of: Web/CSS/Pseudo-classes -original_slug: Web/CSS/Pseudoclasses ---- -<div>{{CSSRef}}</div> - -<p>A <a href="/pt-PT/docs/Web/CSS">CSS</a> <strong><dfn>pseudo-class</dfn></strong> is a keyword added to a selector that specifies a special state of the selected element(s). For example, {{CSSxRef(":hover")}} can be used to change a button's color when the user's pointer hovers over it.</p> - -<pre class="brush: css; no-line-numbers">/* Any button over which the user's pointer is hovering */ -button:hover { - color: blue; -}</pre> - -<p>Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator ({{CSSxRef(":visited")}}, for example), the status of its content (like {{CSSxRef(":checked")}} on certain form elements), or the position of the mouse (like {{CSSxRef(":hover")}}, which lets you know if the mouse is over an element or not).</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> In contrast to pseudo-classes, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a> can be used to style a <em>specific part</em> of an element.</p> -</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox">selector:pseudo-class { - property: value; -} -</pre> - -<p>Like regular classes, you can chain together as many pseudo-classes as you want in a selector.</p> - -<h2 id="Índice_de_pseudoclasses_padrões">Índice de pseudoclasses padrões</h2> - -<div class="index" id="index"> -<ul> - <li>{{CSSxRef(":active")}}</li> - <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":checked")}}</li> - <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":default")}}</li> - <li>{{CSSxRef(":defined")}}</li> - <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":disabled")}}</li> - <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":empty")}}</li> - <li>{{CSSxRef(":enabled")}}</li> - <li>{{CSSxRef(":first")}}</li> - <li>{{CSSxRef(":first-child")}}</li> - <li>{{CSSxRef(":first-of-type")}}</li> - <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":focus")}}</li> - <li>{{CSSxRef(":focus-visible")}}</li> - <li>{{CSSxRef(":focus-within")}}</li> - <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":host")}}</li> - <li>{{CSSxRef(":host()")}}</li> - <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":hover")}}</li> - <li>{{CSSxRef(":indeterminate")}}</li> - <li>{{CSSxRef(":in-range")}}</li> - <li>{{CSSxRef(":invalid")}}</li> - <li>{{CSSxRef(":lang", ":lang()")}}</li> - <li>{{CSSxRef(":last-child")}}</li> - <li>{{CSSxRef(":last-of-type")}}</li> - <li>{{CSSxRef(":left")}}</li> - <li>{{CSSxRef(":link")}}</li> - <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":matches", ":matches()")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":not", ":not()")}}</li> - <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li> - <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li> - <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li> - <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li> - <li>{{CSSxRef(":only-child")}}</li> - <li>{{CSSxRef(":only-of-type")}}</li> - <li>{{CSSxRef(":optional")}}</li> - <li>{{CSSxRef(":out-of-range")}}</li> - <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":read-only")}}</li> - <li>{{CSSxRef(":read-write")}}</li> - <li>{{CSSxRef(":required")}}</li> - <li>{{CSSxRef(":right")}}</li> - <li>{{CSSxRef(":root")}}</li> - <li>{{CSSxRef(":scope")}}</li> - <li>{{CSSxRef(":target")}}</li> - <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":valid")}}</li> - <li>{{CSSxRef(":visited")}}</li> -</ul> -</div> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Fullscreen")}}</td> - <td>{{Spec2("Fullscreen")}}</td> - <td>Defined <code>:fullscreen</code>.</td> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Defines when particular selectors match HTML elements.</td> - </tr> - <tr> - <td>{{SpecName("CSS4 Selectors")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>Defined <code style="white-space: nowrap;">:any-link</code>, <code>:blank</code>, <code style="white-space: nowrap;">:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code style="white-space: nowrap;">:placeholder-shown</code>, <code style="white-space: nowrap;">:user-invalid</code>, <code style="white-space: nowrap;">:nth-col()</code>, <code style="white-space: nowrap;">:nth-last-col()</code> and <code>:matches()</code>.<br> - No significant change for pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td>Copies the relevant section from the canonical (WHATWG) HTML spec.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Basic UI")}}</td> - <td>{{Spec2("CSS3 Basic UI")}}</td> - <td>Defined <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> and <code>:read-write</code>, but without the associated semantic meaning.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Selectors")}}</td> - <td>{{Spec2("CSS3 Selectors")}}</td> - <td>Defined <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> and <code>:not()</code>.<br> - Defined the syntax of <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>, but without the associated semantic meaning.<br> - No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Defined <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, and <code>:focus</code>.<br> - No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.</td> - </tr> - <tr> - <td>{{SpecName("CSS1")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>Defined <code>:link</code>, <code>:visited</code> and <code>:active</code>, but without the associated semantic meaning.</td> - </tr> - </tbody> -</table> - -<h2 id="Consultar_também">Consultar também:</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/CSS/Pseudoelementos">Pseudoelementos</a></li> -</ul> diff --git a/files/pt-pt/web/css/pseudo-elements/index.html b/files/pt-pt/web/css/pseudo-elements/index.html deleted file mode 100644 index 84716924ad..0000000000 --- a/files/pt-pt/web/css/pseudo-elements/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Pseudoelementos -slug: Web/CSS/Pseudo-elements -tags: - - CSS - - Pseudoelemento - - Referencia - - Resumo - - Seletores - - Sinopse -translation_of: Web/CSS/Pseudo-elements -original_slug: Web/CSS/Pseudoelementos ---- -<div>{{CSSRef}}</div> - -<p>Um <strong>pseudoelemento</strong> de CSS é uma palavra-chave adicionada ao seletor que lhe permite estilizar uma parte específica do(s) elemento(s) selecionado(s). Por exemplo, {{CSSxRef("::first-line")}} pode ser utilizado para alterar o tipo de letra da primeira linha de um parágrafo.</p> - -<pre class="brush: css no-line-numbers">/* The first line of every <p> element. */ -p::first-line { - color: blue; - text-transform: uppercase; -}</pre> - -<div class="note"> -<p><strong>Nota:</strong> In contrast to pseudo-elements, {{CSSxRef("pseudo-classes")}} can be used to style an element based on its <em>state</em>.</p> -</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox">selector::pseudo-element { - property: value; -}</pre> - -<p>You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.</p> - -<div class="note"> -<p><strong>Note:</strong> As a rule, double colons (<code>::</code>) should be used instead of a single colon (<code>:</code>). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.</p> -</div> - -<h2 id="Índice_de_pseudoelementos_padrões">Índice de pseudoelementos padrões</h2> - -<div class="index" id="index"> -<ul> - <li>{{CSSxRef("::after", "::after (:after)")}}</li> - <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("::before", "::before (:before)")}}</li> - <li>{{CSSxRef("::cue", "::cue (:cue)")}}</li> - <li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li> - <li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li> - <li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("::selection")}}</li> - <li>{{CSSxRef("::slotted", "::slotted()")}}</li> - <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li> -</ul> -</div> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão Mais Baixa</th> - <th>Suporta</th> - </tr> - <tr> - <td rowspan="2">Internet Explorer</td> - <td>8.0</td> - <td><code>:pseudo-element</code></td> - </tr> - <tr> - <td>9.0</td> - <td><code>:pseudo-element ::pseudo-element</code></td> - </tr> - <tr> - <td rowspan="2">Firefox (Gecko)</td> - <td>1.0 (1.0)</td> - <td><code>:pseudo-element</code></td> - </tr> - <tr> - <td>1.0 (1.5)</td> - <td><code>:pseudo-element ::pseudo-element</code></td> - </tr> - <tr> - <td rowspan="2">Opera</td> - <td>4.0</td> - <td><code>:pseudo-element</code></td> - </tr> - <tr> - <td>7.0</td> - <td><code>:pseudo-element ::pseudo-element</code></td> - </tr> - <tr> - <td>Safari (WebKit)</td> - <td>1.0 (85)</td> - <td><code>:pseudo-element ::pseudo-element</code></td> - </tr> - </tbody> -</table> - -<h2 id="Consultar_também">Consultar também:</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Pseudo-classes" style="white-space: nowrap;">Pseudoclasses</a></li> -</ul> diff --git a/files/pt-pt/web/css/reference/index.html b/files/pt-pt/web/css/reference/index.html deleted file mode 100644 index 836097577a..0000000000 --- a/files/pt-pt/web/css/reference/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: CSS - Referência -slug: Web/CSS/Reference -tags: - - CSS - - Referencia - - Resumo - - Sinopse - - l10n:priority -translation_of: Web/CSS/Reference -original_slug: Web/CSS/Referência_CSS ---- -<div>{{CSSRef}}</div> - -<p class="summary">Utilize esta <strong>referência de CSS </strong>para explorar<strong> </strong>um <a href="/pt-PT/docs/Web/CSS/Referência_CSS#Índex_de_palavra-chave">índex alfabético</a> de todas as propriedades de <a href="/pt-PT/docs/Web/CSS">CSS</a> padrão, <a href="/pt-PT/docs/Web/CSS/Pseudoclasses">pseudoclasses, </a><a href="/pt-PT/docs/Web/CSS/Pseudoelementos">pseudoelementos</a>, <a href="/pt-PT/docs/Web/CSS/CSS_Tipos">tipos de dados</a>, e <a href="/pt-PT/docs/Web/CSS/At-rule">regras "at"</a>. Também pode explorar uma lista de todos os <a href="/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS">seletores de CSS organizados pelo tipo</a> e uma lista de <a href="/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS$edit#Concepts">conceitos de CSS chave</a>. Também incluido nesta breve <a href="/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS$edit#DOM-CSS_CSSOM">referência de DOM-CSS / CSSOM</a>.</p> - -<h2 id="Sintaxe_Básica">Sintaxe Básica</h2> - -<h3 id="Estilo_padrão_de_sintaxe">Estilo padrão de sintaxe</h3> - -<pre class="syntaxbox notranslate"><strong><var>selectorlist</var> { - <var>property</var>: <var>value</var>;</strong> - <var>[more property:value; pairs]</var> -<strong>}</strong> - -... where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var> - -See <a href="#Selectors"><em>selector</em></a>, <a href="#pcls"><em>pseudo-class</em></a>, <em><a href="#pelm">pseudo-element</a></em> lists below. -</pre> - -<h4 id="Exemplos_de_regra_de_estilo">Exemplos de regra de estilo</h4> - -<pre class="brush: css notranslate">strong { - color: red; -} - -div.menu-bar li:hover > ul { - display: block; -} -</pre> - -<p>For a beginner-level introduction to the syntax of CSS selectors, please see <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">this tutorial</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">CSS syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p> - -<h3 id="Sintaxe_de_regra_At">Sintaxe de regra "At"</h3> - -<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p> - -<h2 id="Índex_de_palavra-chave">Índex de palavra-chave</h2> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> Os nomes das propriadades neste índex <strong>não</strong> incluem os <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference">nomes de JavaScript </a>onde eles diferem com nomes padrão de CSS.</p> -</div> - -<div>{{CSS_Ref}}</div> - -<h2 id="Seletors"><a href="/en-US/docs/Web/CSS/CSS_Selectors">Seletors</a></h2> - -<div class="hidden"> -<div class="blockIndicator todo"> -<p><strong>TODO:</strong> Consider using the <code><a href="https://github.com/mdn/kumascript/blob/master/macros/page.ejs">\{{Page}}</a></code> macro for this section.</p> -</div> -</div> - -<h3 id="Seletores_básicos"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Basic_selectors">Seletores básicos</a></h3> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code>elementname</code></li> - <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.classname</code></li> - <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#idname</code></li> - <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a> <code>[attr=value]</code></li> -</ul> - -<h3 id="Combinadores"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Combinators">Combinadores</a></h3> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling combinator</a> <code>A + B</code></li> - <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling combinator</a> <code>A ~ B</code></li> - <li><a href="/en-US/docs/Web/CSS/Child_selectors">Child combinator</a> <code>A > B</code></li> - <li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant combinator</a> <code>A B</code></li> - <li><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> <code>A || B</code> {{Experimental_Inline}}</li> -</ul> - -<h3 id="Pseudoclasses"><a href="/pt-PT/docs/Web/CSS/Pseudoclasses">Pseudoclasses</a></h3> - -<div class="index"> -<ul> - <li class="hidden">{{Page("/en-US/docs/Web/CSS/Pseudo-classes", "index")}}</li> -</ul> -</div> - -<h3 id="Pseudoelementos"><a href="/pt-PT/docs/Web/CSS/Pseudoelementos">Pseudoelementos</a></h3> - -<div class="index"> -<ul> - <li class="hidden">{{Page("/en-US/docs/Web/CSS/Pseudo-elements", "index")}}</li> -</ul> -</div> - -<div class="blockIndicator note"> -<p><strong>Consulte também:</strong> uma <a href="https://www.w3.org/TR/selectors/#selectors">lista de seletores</a> completa na especificação de Seletores Nível 3.</p> -</div> - -<h2 id="Conceitos">Conceitos</h2> - -<h3 id="Sintaxe_e_semântica">Sintaxe e semântica</h3> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li> - <li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li> - <li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li> - <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li> - <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li> - <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li> - <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li> - <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li> - <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li> -</ul> - -<h3 id="Valores">Valores</h3> - -<ul> - <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li> - <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li> - <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li> - <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li> - <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li> - <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li> -</ul> - -<h3 id="Layout">Layout</h3> - -<ul> - <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li> - <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li> - <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li> - <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li> - <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li> -</ul> - -<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> - -<h3 id="Major_object_types">Major object types</h3> - -<ul> - <li>document.<a href="/en-US/docs/Web/API/Document/styleSheets">styleSheets</a></li> - <li>styleSheets[i].<a href="/en-US/docs/Web/API/CSSRuleList">cssRules</a></li> - <li>cssRules[i].<a href="/en-US/docs/Web/API/CSSRule/cssText">cssText</a> (selector & style)</li> - <li>cssRules[i].<a href="/en-US/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li> - <li>elem.<a href="/en-US/docs/Web/API/HTMLElement/style">style</a></li> - <li>elem.style.<a href="/en-US/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li> - <li>elem.<a href="/en-US/docs/Web/API/Element/className">className</a></li> - <li>elem.<a href="/en-US/docs/Web/API/Element/classList">classList</a></li> -</ul> - -<h3 id="Métodos_importantes">Métodos importantes</h3> - -<ul> - <li>{{domxref("CSSStyleSheet.insertRule")}}</li> - <li>{{domxref("CSSStyleSheet.deleteRule")}}</li> -</ul> - -<h2 id="Consultar_também">Consultar também:</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code>-moz</code>)</li> - <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code>-webkit</code>)</li> - <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft CSS extensions</a> (prefixed with <code>-ms</code>)</li> -</ul> diff --git a/files/pt-pt/web/css/replaced_element/index.html b/files/pt-pt/web/css/replaced_element/index.html deleted file mode 100644 index 47f2e968f9..0000000000 --- a/files/pt-pt/web/css/replaced_element/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Elemento substituído -slug: Web/CSS/Replaced_element -tags: - - CSS - - Element -translation_of: Web/CSS/Replaced_element ---- -<div>{{CSSRef()}}</div> - -<h2 id="Resumo">Resumo</h2> - -<p>No CSS, um <strong>elemento substituído </strong>é um elemento cuja representação está fora do âmbito do CSS. <font><font>Estes são um tipo de objecto externo cuja representação é independente do CSS.</font></font> <font><font>Elementos substituídos típicos são</font></font> {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} <font><font>ou elementos de formulário como</font></font> {{HTMLElement("textarea")}} e {{HTMLElement("input")}}<font><font>. </font><font>Alguns elementos, como </font></font>{{HTMLElement("audio")}} ou {{HTMLElement("canvas")}} <font><font>são elementos só em casos específicos substituído. </font></font> <font><font>Objetos inseridos usando as propriedades CSS</font></font> {{cssxref("content")}} <font><font>são elementos substituídos anônimos</font></font><font><font>.</font></font></p> - -<p><font><font>CSS manipula elementos substituídos especificamente em alguns casos, como ao calcular margens e alguns valores automáticos.</font></font></p> - -<p><font><font>Note-se que alguns elementos substituído,mas não todos,têm dimensões intrínsecas ou uma linha de base definida (<em>baseline</em>), que é utilizada por algumas propriedades CSS como </font></font>{{cssxref("vertical-align")}}.</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{CSS_key_concepts()}}</li> -</ul> diff --git a/files/pt-pt/web/css/shorthand_properties/index.html b/files/pt-pt/web/css/shorthand_properties/index.html deleted file mode 100644 index 8bfb4a4bbc..0000000000 --- a/files/pt-pt/web/css/shorthand_properties/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Propriedades de taquigrafia -slug: Web/CSS/Shorthand_properties -tags: - - CSS - - Guía - - Referencia -translation_of: Web/CSS/Shorthand_properties ---- -<div>{{cssref}}</div> - -<p class="summary"><strong><dfn>Propriedades de taquigrafia </dfn></strong>são propriedades de CSS que lhe permitem definir simultaneamente os valores de várias outras propriedades de CSS. Ao utilizar uma propriedade de taquigrafia, pode escrever folhas de estilo mais concisas (e muitas vezes mais legíveis), poupando tempo e energia .</p> - -<p>The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.</p> - -<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Tricky edge cases</h2> - -<p>Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:</p> - -<ol> - <li>A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it <strong>overrides</strong> previously set values. Therefore: - - <pre class="brush:css">background-color: red; -background: url(images/bg.gif) no-repeat left top; -</pre> - will not set the color of the background to <code>red</code> but to {{cssxref("background-color")}}'s default, <code>transparent</code>, as the second rule has precedence.</li> - <li>Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword <code>inherit</code> can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword <code>inherit</code>.</li> - <li>Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories: - <ol> - <li>Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: - <table> - <tbody> - <tr> - <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td> - <td><em>The 1-value syntax</em>: <code>border-width: 1em</code> — The unique value represents all edges</td> - </tr> - <tr> - <td><img alt="border2.png" src="/files/3647/border2.png"></td> - <td><em>The 2-value syntax</em>: <code>border-width: 1em 2em</code> — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.</td> - </tr> - <tr> - <td><img alt="border3.png" src="/files/3648/border3.png"></td> - <td><em>The 3-value syntax</em>: <code>border-width: 1em 2em 3em</code> — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge</td> - </tr> - <tr> - <td><img alt="border4.png" src="/files/3649/border4.png"></td> - <td> - <p><em>The 4-value syntax</em>: <code>border-width: 1em 2em 3em 4em</code> — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word <em>trouble</em>: TRBL)</p> - </td> - </tr> - </tbody> - </table> - </li> - <li>Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners: - <table> - <tbody> - <tr> - <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td> - <td><em>The 1-value syntax</em>: <code>border-radius: 1em</code> — The unique value represents all corners</td> - </tr> - <tr> - <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> - <td><em>The 2-value syntax</em>: <code>border-radius: 1em 2em</code> — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.</td> - </tr> - <tr> - <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> - <td><em>The 3-value syntax</em>: <code>border-radius: 1em 2em 3em</code> — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner</td> - </tr> - <tr> - <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> - <td> - <p><em>The 4-value syntax</em>: <code>border-radius: 1em 2em 3em 4em</code> — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.</p> - </td> - </tr> - </tbody> - </table> - </li> - </ol> - </li> -</ol> - -<h2 id="Background_Properties" name="Background_Properties">Propriedades de segundo plano</h2> - -<p>A background with the following properties ...</p> - -<pre class="brush:css">background-color: #000; -background-image: url(images/bg.gif); -background-repeat: no-repeat; -background-position: left top;</pre> - -<p>... can be shortened to just one declaration:</p> - -<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat left top;</pre> - -<p>(The shorthand form is actually the equivalent of the longhand properties above plus <code>background-attachment: scroll</code> and, in CSS3, some additional properties.)</p> - -<h2 id="Font_Properties" name="Font_Properties">Propriedades de tipo de letra</h2> - -<p>The following declarations ...</p> - -<pre class="brush:css">font-style: italic; -font-weight: bold; -font-size: .8em; -line-height: 1.2; -font-family: Arial, sans-serif;</pre> - -<p>... can be shortened to the following:</p> - -<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre> - -<p>This shorthand declaration is actually equivalent to the longhand declarations above plus <code>font-variant: normal</code> and <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p> - -<h2 id="Border_Properties" name="Border_Properties">Propriedades de margem</h2> - -<p>With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...</p> - -<pre class="brush:css">border-width: 1px; -border-style: solid; -border-color: #000;</pre> - -<p>... can be simplified as:</p> - -<pre class="brush:css">border: 1px solid #000;</pre> - -<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Margin and padding properties</h2> - -<p>Shorthand versions of margin and padding values work the same way. The following CSS declarations ...</p> - -<pre class="brush:css">margin-top: 10px; -margin-right: 5px; -margin-bottom: 10px; -margin-left: 5px;</pre> - -<p>... are the same as the following declaration. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").</p> - -<pre class="brush:css">margin: 10px 5px 10px 5px;</pre> - -<h2 id="See_also" name="See_also">Consulte também</h2> - -<ul> - <li>{{css_key_concepts}}</li> - <li>Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li> -</ul> diff --git a/files/pt-pt/web/css/top/index.html b/files/pt-pt/web/css/top/index.html deleted file mode 100644 index 3e2f304073..0000000000 --- a/files/pt-pt/web/css/top/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: top -slug: Web/CSS/top -translation_of: Web/CSS/top ---- -<p><span class="lang lang-en">« <a href="/pt/Referência_CSS" title="pt/Referência CSS">Referência CSS</a><br> -</span></p> -<h3 id="Resumo"><span class="lang lang-en">Resumo</span></h3> -<p>A propriedade <code>top</code> especifica o posicionamento vertical do elemento de acordo com o topo.</p> -<p>Para elementos absolutamente posicionados (com a propriedade <code>position</code> ajustada como <code>absolute</code> ou <code>fixed</code>) especifica a distância apartir a margem superior do objeto (até onde vai o <code>background</code>).</p> -<p>Para relativamente posicionados (com a propriedade <code>position</code> ajustada como <code>relative</code>) especifica a distância de acordo com o posicionamento do objeto se a propriedade position fosse qualquer uma que não <code>absolute</code>, <code>relative</code> ou <code>fixed</code>.</p> -<ul> <li>Valor inicial: auto</li> <li>Aplica-se a: <a href="/pt/CSS/position" title="pt/CSS/position">Elementos posicionados</a></li> <li>Herdado: não</li> <li>Porcentagens: Referente a altura do próximo antecedente de posição block</li> <li>Valor computado: distância absoluta, porcentagem ou automático</li> -</ul> -<h3 id="Sintáxe">Sintáxe</h3> -<pre class="eval">top: <length> | <percentage> | auto | inherit -</pre> -<h3 id="Exemplos">Exemplos</h3> -<pre><?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> -<head> -<meta http-equiv="Content-Type" content="application/xhtml+xml" /> -<title>Mozilla.org altura, topo, esquerda, largura e direita - CSS</title> -<style type="text/css"> -/* As medidas de body podem ser mudadas para px para testar o comportamento da div */ -body{ - width: 100%; - height: 100%; -} -/* agora a div pode operar com porcentagem (a altura e a largura do body são a referência) */ -div{ - position: absolute; - left: 15%; - top: 30%; - bottom: 30%; - width: 70%; - height: 40%; - text-align: left; - border: 3px #000 solid; - background: #CCC; -} -</style> -</head> -<body> -<center> - <div>...Qualquer conteúdo...</div> -</center> -</body> -</html> -</pre> -<h3 id="Notas">Notas</h3> -<p><code>top</code> é mais relevante que bottom porque o alinhamento vertical padrão é no topo. Com mais propriedades de posicionamento, top torna-se dispensável.</p> -<h3 id="Veja_mais">Veja mais</h3> -<p><a href="/pt/CSS/position" rel="custom nofollow" title="pt/CSS/position">position</a>, <a href="/pt/CSS/right" rel="custom nofollow" title="pt/CSS/right">right</a>, <a href="/pt/CSS/bottom" rel="custom nofollow" title="pt/CSS/bottom">bottom</a>, <a href="/pt/CSS/left" rel="custom nofollow" title="pt/CSS/left">left</a></p> diff --git a/files/pt-pt/web/css/transform/index.html b/files/pt-pt/web/css/transform/index.html deleted file mode 100644 index 25f3a546a3..0000000000 --- a/files/pt-pt/web/css/transform/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: transform -slug: Web/CSS/transform -tags: - - CSS - - Experimental - - NeedsBrowserCompatibility - - Propriedade - - Propriedade de CSS - - Referencia - - Transforms -translation_of: Web/CSS/transform ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>The CSS <strong><code>transform</code></strong> property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.</p> - -<pre class="brush: css no-line-numbers">/* Keyword values */ -transform: none; - -/* Function values */ -transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); -transform: translate(12px, 50%); -transform: translateX(2em); -transform: translateY(3in); -transform: scale(2, 0.5); -transform: scaleX(2); -transform: scaleY(0.5); -transform: rotate(0.5turn); -transform: skew(30deg, 20deg); -transform: skewX(30deg); -transform: skewY(1.07rad); -transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -transform: translate3d(12px, 50%, 3em); -transform: translateZ(2px); -transform: scale3d(2.5, 1.2, 0.3); -transform: scaleZ(0.3); -transform: rotate3d(1, 2.0, 3.0, 10deg); -transform: rotateX(10deg); -transform: rotateY(10deg); -transform: rotateZ(10deg); -transform: perspective(17px); - -/* Multiple function values */ -transform: translateX(10px) rotate(10deg) translateY(5px); - -/* Global values */ -transform: inherit; -transform: initial; -transform: unset; -</pre> - -<p>If the property has a value different than <code>none</code>, a <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> will be created. In that case the object will act as a containing block for <code>position</code><code>: fixed</code> elements that it contains.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<p>The <code>transform</code> property may be specified as either the keyword value <code><a href="#none">none</a></code> or as one or more <code><a href="#<transform-function>"><transform-function></a></code> values.</p> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><a id="<transform-function>" name="<transform-function>"><code><transform-function></code></a></dt> - <dd>One or more of the <a href="/en-US/docs/Web/CSS/transform-function">CSS transform functions</a> to be applied, see below. Composite transforms are effectively applied in order from right to left.</dd> - <dt><a id="none" name="none"><code>none</code></a></dt> - <dd>Specifies that no transform should be applied.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Exemplos">Exemplos</h2> - -<p>See <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Using CSS transforms</a>.</p> - -<h2 id="Live_example">Live example</h2> - -<h3 id="HTML_content">HTML content</h3> - -<pre class="brush: html"><p>Transformed element</p></pre> - -<h3 id="CSS_content">CSS content</h3> - -<pre class="brush: css">p { - border: solid red; - - -webkit-transform: translate(100px) rotate(20deg); - -webkit-transform-origin: 0 -250px; - - transform: translate(100px) rotate(20deg); - transform-origin: 0 -250px; -}</pre> - -<p>{{EmbedLiveSample("Live_example", "400", "170")}}</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>Adds 3D transform functions.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> - <td>{{Spec2('CSS3 Transforms')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funionalidade</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> - 36</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - {{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("16.0")}}<sup>[2]</sup></td> - <td>9.0{{property_prefix("-ms")}}<sup>[3]</sup><br> - 10.0</td> - <td>10.5{{property_prefix("-o")}}<br> - 12.10<br> - 15.0{{property_prefix("-webkit")}}<br> - 23</td> - <td>3.1{{property_prefix("-webkit")}}<br> - 9.0</td> - </tr> - <tr> - <td>Suporte 3D</td> - <td>12.0{{property_prefix("-webkit")}}<br> - 36</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0{{property_prefix("-moz")}}<br> - {{CompatGeckoDesktop("16.0")}}</td> - <td>10.0</td> - <td>15.0{{property_prefix("-webkit")}}<br> - 23</td> - <td> - <p>4.0{{property_prefix("-webkit")}}<br> - 9.0</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}<sup>[4]</sup></td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - {{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<br> - 11.0{{property_prefix("-webkit")}}<sup>[5]</sup></td> - <td>11.5{{property_prefix("-webkit")}}</td> - <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - 9.0</td> - </tr> - <tr> - <td>Suporte 3D</td> - <td>{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}</td> - <td>{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>22{{property_prefix("-webkit")}}</td> - <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - 9.0</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p> - -<p>[2] Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.</p> - -<p>In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> - -<p>[3] Internet Explorer 5.5 or later supports a proprietary <a href="https://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p> - -<p>Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as <code>-ms-transform:rotate(10deg) translateZ(0);</code>, will prevent the entire property from being applied.</p> - -<p>Internet Explorer does not support the global values <code>initial</code> and <code>unset.</code></p> - -<p>[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a <code>-webkit-transform</code>.</p> - -<p>[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} <a href="https://msdn.microsoft.com/library/jj127312#code-snippet-1">prefixed variant as an alias for the default one</a>.</p> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></li> - <li><a href="/en-US/docs/Web/CSS/transform-function"><translation-function></a> data type</li> - <li><a href="https://www.paulirish.com/2010/introducing-css3please/#comment-36380">More info</a> on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.</li> - <li>A cross-browser 2D <a href="https://louisremi.github.io/jquery.transform.js/">transform plugin for jQuery</a></li> -</ul> diff --git a/files/pt-pt/web/css/width/index.html b/files/pt-pt/web/css/width/index.html deleted file mode 100644 index f865e76bed..0000000000 --- a/files/pt-pt/web/css/width/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: width -slug: Web/CSS/width -tags: - - Referencia_CSS -translation_of: Web/CSS/width ---- -<p>{{ CSSRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>A propriedade <code>width</code> é usada para configurar a largura dada a um elemento.</p> - -<ul> - <li>Valor inicial: auto</li> - <li>Aplica-se a: o nível do bloco e elementos substituídos</li> - <li>Herdado: não</li> - <li>Percentagens: refere-se à largura do bloco que o contém</li> - <li>Mídia: <a href="pt/CSS/Media/Visual">Visual</a></li> -</ul> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval"> width: [ <length> || <percentage> ] auto | inherit -</pre> - -<h3 id="Valores" name="Valores">Valores</h3> - -<ul> - <li><strong>length</strong> : pode ser em px, cm, in, em</li> - <li><strong>percentage</strong> : % especificado como uma porcentagem da largura do elemento pai</li> - <li><strong>auto</strong> : o navegador calculará e selecionará uma largura para o elemento especificado.</li> -</ul> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p><a href="/samples/cssref/width.html">View Live Examples</a></p> - -<pre>table{width: 100%;} - -img{width: 200px;} - -form{width: auto;} -</pre> - -<p><span class="comment">== Notas ==</span></p> - -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS1#width">CSS 1</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">CSS 2.1</a></li> -</ul> - -<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navegador</th> - <th>Versão mais antiga</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td>4</td> - </tr> - <tr> - <td>Netscape</td> - <td>4</td> - </tr> - <tr> - <td>Opera</td> - <td>3.5</td> - </tr> - </tbody> -</table> - -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> - -<p><a href="pt/CSS/box_model">box model</a>, {{ Cssxref("height") }}, {{ Cssxref("-moz-box-sizing") }}</p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/CSS/width", "fr": "fr/CSS/width" } ) }}</p> diff --git a/files/pt-pt/web/css/z-index/index.html b/files/pt-pt/web/css/z-index/index.html deleted file mode 100644 index 0ff1013362..0000000000 --- a/files/pt-pt/web/css/z-index/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: z-index -slug: Web/CSS/z-index -tags: - - Referencia_CSS -translation_of: Web/CSS/z-index ---- -<p> -{{ CSSRef() }} -</p> -<h3 id="Resumo" name="Resumo"> Resumo </h3> -<p>A propriedade <code>z-index</code> especifica a ordem-z de um elemento e de seus herdeiros. Quando os elementos sobrepõem, a z-ordem determina qual elemento cobre o outro. -</p> -<ul><li> Valor inicial: auto; -</li><li> Aplica-se a: elementos posicionados; -</li><li> Herdado: não; -</li><li> Mídia: <a href="pt/CSS/Media/Visual">Visual</a>; -</li><li> Valor computado: como especificado. -</li></ul> -<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3> -<p>z-index: auto | <integer> | <a href="pt/CSS/inherit">inherit</a> -</p> -<h3 id="Valores" name="Valores"> Valores </h3> -<dl><dt> auto </dt><dd> O elemento é desenhado na mesma ordem-z como um elemento com <code>z-index: 0</code>. Isto <i>não</i> cria uma nova pilha de contexto. -</dd><dt> <integer> </dt><dd> O elemento é desenhado na ordem-z dada. Isto cria também uma nova pilha de contexto, que significa que todos os descendentes também terão o desenho no mesmo z-index. Dessa forma os z-indexes dos descendentes não são comparados aos z-indexes dos elementos do lado de fora deste elemento. -</dd></dl> -<p><span class="comment">== Exemplos ==</span> -</p> -<h3 id="Notas" name="Notas"> Notas </h3> -<p>Valores <code>z-index</code> negativos são suportados corretamente iniciando em <a href="pt/Gecko">Gecko</a> 1.9 / <a href="pt/Firefox_3_para_desenvolvedores">Firefox 3</a>. Versões mais antigas implementaram o comportamento do CSS 2, não o comportamento do CSS 2.1 que é compatível com outros navegadores. -</p> -<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es"> Especificações </h3> -<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">CSS 2.1</a> -</li></ul> -<p><span class="comment">== Compatibilidade com navegadores ==</span> -</p> -<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m"> Veja também </h3> -<p>{{ Cssxref("position") }} -</p><p><span class="comment">Categorias</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p>{{ languages( { "en": "en/CSS/z-index", "fr": "fr/CSS/z-index", "pl": "pl/CSS/z-index" } ) }} |