diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-pt/web/css | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/pt-pt/web/css')
102 files changed, 16667 insertions, 0 deletions
diff --git a/files/pt-pt/web/css/@font-face/index.html b/files/pt-pt/web/css/@font-face/index.html new file mode 100644 index 0000000000..8a150d736c --- /dev/null +++ b/files/pt-pt/web/css/@font-face/index.html @@ -0,0 +1,143 @@ +--- +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 new file mode 100644 index 0000000000..b67776898e --- /dev/null +++ b/files/pt-pt/web/css/@import/index.html @@ -0,0 +1,53 @@ +--- +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 new file mode 100644 index 0000000000..959cc3c59f --- /dev/null +++ b/files/pt-pt/web/css/@media/index.html @@ -0,0 +1,276 @@ +--- +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/_colon_after/index.html b/files/pt-pt/web/css/_colon_after/index.html new file mode 100644 index 0000000000..f59fbcd5dd --- /dev/null +++ b/files/pt-pt/web/css/_colon_after/index.html @@ -0,0 +1,34 @@ +--- +title: ':after | ::after' +slug: 'Web/CSS/:after' +tags: + - Referencia_CSS +translation_of: '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/_colon_before/index.html b/files/pt-pt/web/css/_colon_before/index.html new file mode 100644 index 0000000000..5572a818ef --- /dev/null +++ b/files/pt-pt/web/css/_colon_before/index.html @@ -0,0 +1,63 @@ +--- +title: ':before | ::before' +slug: 'Web/CSS/:before' +tags: + - Referencia_CSS +translation_of: '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/at-rule/index.html b/files/pt-pt/web/css/at-rule/index.html new file mode 100644 index 0000000000..bbf7651358 --- /dev/null +++ b/files/pt-pt/web/css/at-rule/index.html @@ -0,0 +1,83 @@ +--- +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/azimuth/index.html b/files/pt-pt/web/css/azimuth/index.html new file mode 100644 index 0000000000..24e469dc63 --- /dev/null +++ b/files/pt-pt/web/css/azimuth/index.html @@ -0,0 +1,72 @@ +--- +title: azimuth +slug: Web/CSS/azimuth +tags: + - Referencia_CSS +translation_of: Archive/Web/CSS/azimuth +--- +<p>{{ CSSRef() }}</p> +<h3 id="Resumo" name="Resumo">Resumo</h3> +<p>Em combinação com <code><a href="/pt/CSS/elevation" title="pt/CSS/elevation">elevation</a></code>, <code>azimuth</code> habilita diferentes fontes de áudio para serem posicionadas espacialmente para apresentações aurais. Isto é importante porque proporciona uma maneira natural de contar várias vozes a parte, como cada uma pode ser posicionada para originar em uma localização diferente no estágio de som. Saída estéreo produz um estágio de som lateral, enquanto instalações de fones de ouvido e microfones permitem um estágio tridimencional completo.</p> +<ul> + <li>Valor inicial: center</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/Aural" title="pt/CSS/Media/Aural">aural</a></li> + <li>Valor computado: ângulo normalizado</li> +</ul> +<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> +<pre class="eval">azimuth: <em>angle</em> | [[ left-side | far-left | left | + center-left | center | center-right | right | + far-right | right-side ] || behind ] | leftwards | + rightwards | inherit +</pre> +<h3 id="Valores" name="Valores">Valores</h3> +<dl> + <dt> + angle </dt> + <dd> + Posição de fonte audível é descrita como um ângulo dentro da faixa de <code>-360deg</code> até <code>360deg</code>. O valor <code>0deg</code> significa diretamente adiante do centro do estágio de som (este é o valor padrão). <code>90deg</code> é para a direita, <code>180deg</code> é atrás e <code>270deg</code> ou <code>-90deg</code> é para a esquerda.</dd> +</dl> +<p><img alt="Image:Azimuth.png"></p> +<h4 id="Palavras-chave_relativas_a_posi.C3.A7.C3.A3o" name="Palavras-chave_relativas_a_posi.C3.A7.C3.A3o">Palavras-chave relativas a posição</h4> +<ul> + <li><strong>left-side</strong>: O mesmo que <code>270deg</code>.</li> + <li><strong>left-side behind</strong>: O mesmo que <code>270deg</code>.</li> + <li><strong>far-left</strong>: O mesmo que <code>300deg</code>.</li> + <li><strong>far-left behind</strong>: O mesmo que <code>240deg</code>.</li> + <li><strong>left</strong>: O mesmo que <code>320deg</code>.</li> + <li><strong>left behind</strong>: O mesmo que <code>220deg</code>.</li> + <li><strong>center-left</strong>: O mesmo que <code>340deg</code>.</li> + <li><strong>center-left behind</strong>: O mesmo que <code>200deg</code>.</li> + <li><strong>center</strong>: O mesmo que <code>0deg</code>.</li> + <li><strong>center behind</strong>: O mesmo que <code>180deg</code>.</li> + <li><strong>center-right</strong>: O mesmo que <code>20deg</code>.</li> + <li><strong>center-right behind</strong>: O mesmo que <code>160deg</code>.</li> + <li><strong>right</strong>: O mesmo que <code>40deg</code>.</li> + <li><strong>right behind</strong>: O mesmo que <code>140deg</code>.</li> + <li><strong>far-right</strong>: O mesmo que <code>60deg</code>.</li> + <li><strong>far-right behind</strong>: O mesmo que <code>120deg</code>.</li> + <li><strong>right-side</strong>: O mesmo que <code>90deg</code>.</li> + <li><strong>right-side behind</strong>: O mesmo que <code>90deg</code>.</li> + <li><strong>behind</strong>: O mesmo que <code>180deg</code>. Também é usado como um modificador para outros valores de palavras-chave posicionais, como acima.</li> + <li><strong>leftwards</strong>: Move o som no sentido anti-horário em 20 graus, relativo ao ângulo corrente.</li> + <li><strong>rightwards</strong>: Move o som no sentido horário em 20 graus, relatico ao ângulo corrente.</li> +</ul> +<h3 id="Exemplos" name="Exemplos">Exemplos</h3> +<pre>h1 { azimuth: 30deg } +td.a { azimuth: far-right } /* 60deg */ +#12 { azimuth: behind far-right } /* 120deg */ +p.comment { azimuth: behind } /* 180deg */ +</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/aural.html#spatial-props">CSS 2.1</a></li> +</ul> +<p><span class="comment">== Compatibilidade com navegadores == TBD (this might be abandoned in favour of a centralized compatibility chart)</span></p> +<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3> +<p>{{ Cssxref("elevation") }}</p> +<p><span class="comment">Categorias</span></p> +<p><span class="comment">Interwiki Language Links</span></p> +<p>{{ languages( { "en": "en/CSS/azimuth", "fr": "fr/CSS/azimuth", "pl": "pl/CSS/azimuth" } ) }}</p> diff --git a/files/pt-pt/web/css/background-attachment/index.html b/files/pt-pt/web/css/background-attachment/index.html new file mode 100644 index 0000000000..ca851ae58c --- /dev/null +++ b/files/pt-pt/web/css/background-attachment/index.html @@ -0,0 +1,140 @@ +--- +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 new file mode 100644 index 0000000000..4d713de239 --- /dev/null +++ b/files/pt-pt/web/css/background-color/index.html @@ -0,0 +1,108 @@ +--- +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 new file mode 100644 index 0000000000..fd513e19b1 --- /dev/null +++ b/files/pt-pt/web/css/background-image/index.html @@ -0,0 +1,131 @@ +--- +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 new file mode 100644 index 0000000000..5445184e42 --- /dev/null +++ b/files/pt-pt/web/css/background-position/index.html @@ -0,0 +1,85 @@ +--- +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 new file mode 100644 index 0000000000..582f6f86f8 --- /dev/null +++ b/files/pt-pt/web/css/background-repeat/index.html @@ -0,0 +1,138 @@ +--- +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.cdn.mozilla.net/media/redesign/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 new file mode 100644 index 0000000000..3118d1b239 --- /dev/null +++ b/files/pt-pt/web/css/background/index.html @@ -0,0 +1,117 @@ +--- +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 new file mode 100644 index 0000000000..0a6c79941e --- /dev/null +++ b/files/pt-pt/web/css/border-bottom-color/index.html @@ -0,0 +1,110 @@ +--- +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 new file mode 100644 index 0000000000..be873908d9 --- /dev/null +++ b/files/pt-pt/web/css/border-bottom-style/index.html @@ -0,0 +1,94 @@ +--- +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 new file mode 100644 index 0000000000..299636a962 --- /dev/null +++ b/files/pt-pt/web/css/border-bottom-width/index.html @@ -0,0 +1,112 @@ +--- +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 new file mode 100644 index 0000000000..08da201a5f --- /dev/null +++ b/files/pt-pt/web/css/border-bottom/index.html @@ -0,0 +1,109 @@ +--- +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 new file mode 100644 index 0000000000..0f1acaaf50 --- /dev/null +++ b/files/pt-pt/web/css/border-collapse/index.html @@ -0,0 +1,87 @@ +--- +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 new file mode 100644 index 0000000000..e97253bd58 --- /dev/null +++ b/files/pt-pt/web/css/border-color/index.html @@ -0,0 +1,116 @@ +--- +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 new file mode 100644 index 0000000000..f358f01aa0 --- /dev/null +++ b/files/pt-pt/web/css/border-left-color/index.html @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 0000000000..f482151b58 --- /dev/null +++ b/files/pt-pt/web/css/border-left-style/index.html @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 0000000000..caf87d5d71 --- /dev/null +++ b/files/pt-pt/web/css/border-left-width/index.html @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 0000000000..e0cd0e9f6f --- /dev/null +++ b/files/pt-pt/web/css/border-left/index.html @@ -0,0 +1,50 @@ +--- +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 new file mode 100644 index 0000000000..9a58ad9d69 --- /dev/null +++ b/files/pt-pt/web/css/border-right-color/index.html @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 0000000000..0aa34c58bd --- /dev/null +++ b/files/pt-pt/web/css/border-right-style/index.html @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 0000000000..60840f3117 --- /dev/null +++ b/files/pt-pt/web/css/border-right-width/index.html @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 0000000000..964e932736 --- /dev/null +++ b/files/pt-pt/web/css/border-right/index.html @@ -0,0 +1,49 @@ +--- +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 new file mode 100644 index 0000000000..36747dc64d --- /dev/null +++ b/files/pt-pt/web/css/border-spacing/index.html @@ -0,0 +1,100 @@ +--- +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 new file mode 100644 index 0000000000..5df05465a6 --- /dev/null +++ b/files/pt-pt/web/css/border-top-color/index.html @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 0000000000..b5132d5a35 --- /dev/null +++ b/files/pt-pt/web/css/border-top-style/index.html @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 0000000000..45fcd9b374 --- /dev/null +++ b/files/pt-pt/web/css/border-top-width/index.html @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 0000000000..d284e0bc7a --- /dev/null +++ b/files/pt-pt/web/css/border-top/index.html @@ -0,0 +1,49 @@ +--- +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 new file mode 100644 index 0000000000..c3cd9915f2 --- /dev/null +++ b/files/pt-pt/web/css/border-width/index.html @@ -0,0 +1,112 @@ +--- +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 new file mode 100644 index 0000000000..7110cc6c8d --- /dev/null +++ b/files/pt-pt/web/css/border/index.html @@ -0,0 +1,51 @@ +--- +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 new file mode 100644 index 0000000000..2aa2e1e2f7 --- /dev/null +++ b/files/pt-pt/web/css/bottom/index.html @@ -0,0 +1,81 @@ +--- +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 new file mode 100644 index 0000000000..8fcfd728ca --- /dev/null +++ b/files/pt-pt/web/css/clear/index.html @@ -0,0 +1,93 @@ +--- +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 new file mode 100644 index 0000000000..bd7fe973b2 --- /dev/null +++ b/files/pt-pt/web/css/color/index.html @@ -0,0 +1,47 @@ +--- +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/como_começar/caixas/index.html b/files/pt-pt/web/css/como_começar/caixas/index.html new file mode 100644 index 0000000000..b3906acb4f --- /dev/null +++ b/files/pt-pt/web/css/como_começar/caixas/index.html @@ -0,0 +1,358 @@ +--- +title: Caixas +slug: Web/CSS/Como_começar/Caixas +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Building_blocks +--- +<p>{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}</p> + +<p>Esta página descreve como você pode usar as CSS para controlar o espaço que um elemento ocupa quando é exibido.</p> + +<p>Em seu documento de amostra, você muda o espaçamento e adiciona regras decorativas.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Caixas" name="Informa.C3.A7.C3.A3o:_Caixas">Informação: Caixas</h2> + +<p>Quando seu navegador exibe um elemento, o elemento ocupa um espaço. Existem quatro partes do espaço que ele ocupa.</p> + +<p>No meio, está o espaço que o elemento precisa para exibir seu conteúdo. Em torno disso, está o enchimento. Em torno disso, está a borda. Em torno disso, está a margem.</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #eee;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><em>A paleta cinza mostra partes da disposição.</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #fff;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><em>Isto é o que você vê em seu navegador.</em></p> + </td> + </tr> + </tbody> +</table> + +<p>O enchimento, a borda e a margem podem ter diferentes tamanhos no topo, na direita, em baixo e na esquerda do elemento. Qualquer ou todos estes tamanhos podem ser zero.</p> + +<p>O enchimento é sempre da mesma cor do fundo do elemento. Então quando você configura a cor de fundo, você vê a cor aplicada ao próprio elemento e ao seu enchimento. A margem é sempre transparente.</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #ded;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><em>O elemento tem um fundo verde.</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #efe;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><em>É isto que você vê no seu navegador.</em></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Bordas" name="Bordas">Bordas</h3> + +<p>Você pode usar bordas para decorar elementos com linhas ou caixas.</p> + +<p>Para especificar a mesma borda em torno de todo o elemento, use a propriedade <code>border</code>. Especifique a largura (usualmente em pixels para exibir na tela), o estilo, e a cor.</p> + +<p>Os estilos são:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 6em;"> + <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> + </td> + </tr> + <tr> + <td style="width: 6em;"> + <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> + </td> + </tr> + </tbody> +</table> + +<p>Você pode também configurar o estilo para <code>none</code> ou <code>hidden</code> para remover a borda explicitamente, ou configurar a cor para <code>transparent</code> para fazer a borda invisível sem mudar a disposição.</p> + +<p>Para especificar bordas em um lado de cada vez, use as propriedades: <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code>, <code>border-left</code>. Você pode usar isto para especificar uma borda em somente um lado, ou diferentes bordas em diferentes lados.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplos</caption> + <tbody> + <tr> + <td>Esta regra configura a cor de fundo e a borda do topo dos elementos do cabeçalho: + <div style="width: 40em;"> + <pre class="eval"> +h3 { + border-top: 4px solid #7c7; /* mid green */ + background-color: #efe; /* pale green */ + color: #050; /* dark green */ + } +</pre> + </div> + + <p>O resultado deve ser como este:</p> + + <table> + <tbody> + <tr> + <td> + <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Cabeçalho elegante</p> + </td> + </tr> + </tbody> + </table> + + <p><br> + Esta regra faz as imagens fáceis de ver dando-as uma borda com um cinza-médio em toda a volta:</p> + + <div style="width: 30em;"> + <pre class="eval"> +img {border: 2px solid #ccc;} +</pre> + </div> + + <p>O resultado deve ser como este:</p> + + <table> + <tbody> + <tr> + <td>Imagem:</td> + <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2528/=Blue-rule.png"></td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="Margens_e_enchimento" name="Margens_e_enchimento">Margens e enchimento</h3> + +<p>Use margens e enchimento para ajustar a posição dos elementos e para criar espaços ao redor deles.</p> + +<p>Use a propriedade <code>margin</code> ou a propriedade <code>padding</code> para configurar a largura da margem ou do enchimento respectivamente.</p> + +<p>Se você especificar uma largura, isto se aplicará em torno de todo o elemento (topo, direita, baixo e esquerda).</p> + +<p>Se você especificar duas larguras, a primeira se aplicará ao topo e à baixo, e a segunda à direita e à esquerda.</p> + +<p>Você pode especificar todas as quatro larguras na ordem: topo, direita, baixo, esquerda.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta regra diferencia parágrafos com a classe <code>remark</code> dando-os uma borda vermelha em toda a sua volta. + <p>O Enchimento em toda a volta separa um pouco a borda do texto.</p> + + <p>Uma margem esquerda identifica o parágrafo relativo ao resto do texto:</p> + + <div style="width: 30em;"> + <pre class="eval"> +p.remark { + border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> + </div> + + <p>O resultado deve ser como este:</p> + + <table> + <tbody> + <tr> + <td> + <p>Aqui está um parágrafo normal.</p> + + <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui está um com observação.</p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Quando você usa margens e enchimento para ajustar o modo como os elementos são exibidos, suas regras de estilo interagem com o padrão dos navegadores de maneiras que podem ser complexas. + <p>Navegadores diferentes exibem os elementos diferentemente. Os resultados podem ser similares antes de sua folha de estilo mudar coisas. Algumas vezes isto pode fazer sua folha de estilo dar resultados surpreendedores.</p> + + <p>Para ter o resultado que você precisa, você pode ter que mudar a marcação do seu documento. A próxima página deste tutorial tem mais informações sobre isto.</p> + + <p>Para informações detalhas sobre enchimento, margens e bordas, veja <a class="external" href="http://www.w3.org/TR/CSS21/box.html">Box model</a> em CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Adicionando_bordas" name="A.C3.A7.C3.A3o:_Adicionando_bordas">Ação: Adicionando bordas</h2> + +<p>Edite seu arquivo CSS. Adicione esta regra para desenhar uma linha até o fim da página sobre cada cabeçalho:</p> + +<div style="width: 30em;"> +<pre class="eval">h3 {border-top: 1px solid gray;} +</pre> +</div> + +<p>Se você pegou o desafio na página anterior, modifique a regra que você criou, se não, adicione esta nova regra para adicionar um espaço em baixo de cada item da lista:</p> + +<div style="width: 30em;"> +<pre class="eval">li { + list-style: lower-roman; + margin-bottom: 8px; + } +</pre> +</div> + +<p>Atualize seu navegador para ver o resultado:</p> + +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p> + + <ul style=""> + <li style="margin-bottom: 8px;">Ártico</li> + <li style="margin-bottom: 8px;">Atlântico</li> + <li style="margin-bottom: 8px;">Pacífico</li> + <li style="margin-bottom: 8px;">Índico</li> + <li style="margin-bottom: 8px;">Antártico</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Parágrafos numerados</p> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Adicione uma regra à sua folha de estilo, fazendo um borda larga em toda a volta dos oceanos em uma cor que te lembre o mar — algo como isto: + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p> + + <div style="border: 12px solid #69b; padding-left: 1em;"> + <ul style=""> + <li style="margin-bottom: 8px;">Ártico</li> + <li style="margin-bottom: 8px;">Atlântico</li> + <li style="margin-bottom: 8px;">Pacífico</li> + <li style="margin-bottom: 8px;">Índico</li> + <li style="margin-bottom: 8px;">Antártico</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Parágrafos numerados</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> + </table> + + <p>(Não é necessário fazer exatamente com a largura e a cor que usadas aqui.)</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois" name="O_que_vem_depois">O que vem depois</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Caixas" title="Talk:pt/CSS/Como_começar/Caixas">Discussão</a>.</p> + +<p>Especificando margens e enchimento, você modificou a disposição do seu documento. Na próxima página você poderá mudar a disposição do seu documento de outras maneiras: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="pt/CSS/Como_começar/Disposição">Disposição</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}</p> diff --git a/files/pt-pt/web/css/como_começar/cascata_e_herança/index.html b/files/pt-pt/web/css/como_começar/cascata_e_herança/index.html new file mode 100644 index 0000000000..ee12da94f0 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/cascata_e_herança/index.html @@ -0,0 +1,134 @@ +--- +title: Cascata e herança +slug: Web/CSS/Como_começar/Cascata_e_herança +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<p>{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}</p> + +<p>Esta página esboça como folhas de estilo interagem numa cascata, e como os elementos subordinados herdam o estilo do elementos primários.</p> + +<p>Você alterará à sua folha de estilo de amostra, usando herança para mudar o estilo de muitas partes do seu documento em um passo.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Cascata_e_heran.C3.A7a" name="Informa.C3.A7.C3.A3o:_Cascata_e_heran.C3.A7a">Informação: Cascata e herança</h2> + +<p>O estilo final para um elemento pode ser especificado em muitos lugares diferentes, que pode interagir num meio complexo. Esta interação complexa faz CSS poderoso, mas às vezes isto pode deixar confuso e difícil de depurar.</p> + +<p>Três códigos principais de informação de estilo formam uma cascata. Eles são:</p> + +<ul> + <li>O estilo padrão do navegador para a linguagem de marcação</li> + <li>O estilo especificado por um usuário que está lendo o documento</li> + <li>O estilo ligado ao documento pelo seu autor</li> +</ul> + +<p>O estilo do usuário modifica o estilo padrão do navegador. O estilo do autor do documento então modifica algum outro estilo. Neste tutorial, você é o autor do seu documeto de amostra, e você trabalha somente com folhas de estilo do autor.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Quando você lê este documento no seu navegador Mozilla, parte do estilo que você vê, vem do padrão do seu navegador para HTML. + <p>Parte do estilo deve vir das configurações do seu navegador em Opções, ou de um arquivo <code>userConten.css</code> no seu perfil no navegador.</p> + + <p>Parte do seu estilo vem de folhas de estilo ligadas ao documento pelo server do wiki.</p> + </td> + </tr> + </tbody> +</table> + +<p><br> + Quando você abre seu documento de amostra no seu navegador, os elementos STRONG são mais fortes do que o resto do texto. Isto vem do estilo padrão do seu navegador para o HTML.</p> + +<p>Os elementos STRONG são vermelhos, Isto vem da sua folha de estilo de amostra.</p> + +<p>Os elementos STRONG as vezes também herdam muito do estilo de elemento P, pois eles são subordinados. No mesmo caminho, o elemento P herda muito do estilo do elemento BODY.</p> + +<p>Para estilos em cascata, o autor das folhas de estilo tem prioridade, depois o leitor das folhas de estilo, e por último o padrão do navegador.</p> + +<p>Para estilos em herança, um nó subordinado tem prioridade sobre o estilo que herdou do nó principal.</p> + +<p>Estas não são as únicas propriedades que se aplicam. Uma página posterior neste turorial explicará mais.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>CSS às vezes providencia um meio para o leitor anular o estilo do autor do documento, usando a palavra-chave <code>!important</code>. + <p>Este meio é para o autor do documento, você não pode sempre predizer exatamente o que os leitores verão.</p> + + <p>Se você quer saber todos os detalhes sobre cascata e herança, veja <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> na CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Usando_heran.C3.A7a" name="A.C3.A7.C3.A3o:_Usando_heran.C3.A7a">Ação: Usando herança</h2> + +<p>Edite seu arquivo de amostra CSS.</p> + +<p>Adicione esta linha copiando e colando isto. Não importa realmente se você adicionar a linha antes ou depois da que já está lá. Entretando, adicionar isto no topo é mais lógico pois no seu documento o elemento P é primário ao elemento STRONG:</p> + +<pre class="brush: css">p {color: blue; text-decoration: underline;} +</pre> + +<p>Agora atualize seu navegador para ver o efeito no seu documento de amostra. O sublinhado afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos STRONG herdaram o estilo sublinhado do elemento primário P.</p> + +<p>Mas os elementos STRONG ainda são vermelhos. A cor vermelha é própria do estilo, então isto tem prioridade sobre a cor azul do seu elemento primário P.</p> + +<table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;"> + <caption>Antes</caption> + <tbody> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <caption>Depois</caption> + <tbody> + <tr> + <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Mude sua folha de estilo deixando somente as letras vermelhas sublinhadas: + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h2> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Cascata_e_heran%C3%A7a" title="Talk:pt/CSS/Como_começar/Cascata_e_herança">Discussão</a>.</p> + +<p>Sua folha de estilo de amostra especifica o estilo para os tags, <code>P</code> e <code>STRONG</code>, mudando o estilo dos elementos correspondentes em todo o seu documento original. A próxima página descreve como espeficar estilos em meios mais seletivos: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Seletores" title="pt/CSS/Como_começar/Seletores">Seletores</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}</p> diff --git a/files/pt-pt/web/css/como_começar/como_o_css_trabalha/index.html b/files/pt-pt/web/css/como_começar/como_o_css_trabalha/index.html new file mode 100644 index 0000000000..d291b92e03 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/como_o_css_trabalha/index.html @@ -0,0 +1,129 @@ +--- +title: Como o CSS trabalha +slug: Web/CSS/Como_começar/Como_o_CSS_trabalha +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}</p> + +<p>Esta página explica como o CSS trabalha no seu navegador. Você analiza seu documento de amostra, reavaliando os detalhes do seu estilo.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Como_o_CSS_trabalha" name="Informa.C3.A7.C3.A3o:_Como_o_CSS_trabalha">Informação: Como o CSS trabalha</h2> + +<p>Quando o Mozilla exibe um documento, é necessário combinar o conteúdo do documento com seu estilo de informação. Então o documento é processado em dois estágios:</p> + +<ul> + <li>No primeiro estágio, o Mozilla converte a linguagem de marcação e o CSS em <em>DOM</em> (Document Object Model - Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Isto combina o conteúdo do documento com seu estilo.</li> +</ul> + +<ul> + <li>No segundo estágio, o Mozilla exibe o DOM.</li> +</ul> + +<p>Uma linguagem de marcação usa tags para definir a estrutura do documento. Uma tag pode armazenar outras tags entre seu início e fim.</p> + +<p>Um DOM tem a estrutura como a de uma árvore. Cada tag e período do texto na linguagem de marcação torna-se um <em>nó</em> na estrutura da árvore. Os nós do DOM não são armazenadores. Em substituição, eles são primários aos nós subordinados.</p> + +<p>Os nós que correspondem a tags também são conhecidos por <em>elementos</em>.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>No seu documento de amostra, a tag <code><p></code> e seu fim <code></p></code> criam um armazenamento: + <div style="width: 24em;"> + <pre class="eval"> +<p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + </div> + + <p>No DOM, o corespondente ao nó P é um primário. Os subordinados são os nós <small>STRONG</small> e os nós do texto. Os nós <small>STRONG</small> são os primários, e os nós do texto são os subordinados.</p> + + <div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;"> + <p><span style="color: black;">P</span> ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">C</span>"<br> + │<br> + ├─"<span style="color: black;">ascading</span>"<br> + │<br> + ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>"<br> + │<br> + ├─"<span style="color: black;">tyle</span>"<br> + │<br> + ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>"<br> + │<br> + └─"<span style="color: black;">heets</span>"</p> + </div> + </td> + </tr> + </tbody> +</table> + +<p>O entendimento do DOM ajuda-o a projetar, depurar e manter seu CSS, pois o DOM é onde o seu CSS e o conteúdo do documento se unem.</p> + +<h2 id="A.C3.A7.C3.A3o:_Analizando_um_DOM" name="A.C3.A7.C3.A3o:_Analizando_um_DOM">Ação: Analizando um DOM</h2> + +<p>Para analizar um DOM, você precisa de um software especial. Aqui, você usa o <a href="/pt/DOM_Inspector" title="pt/DOM_Inspector">DOM Inspector</a> (DOMi) da Mozilla para analizar um DOM.</p> + +<p>Use seu navegador Mozilla para abrir seu documento simples.</p> + +<p>Na barra de menu do seu navegador, escolha Ferramentas – DOM Inspector, ou talvez Ferramentas – Desenvolvimento Web – DOM Inspector.</p> + +<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Se seu navegador Mozilla não tem o DOMi, você pode reinstalá-lo assegurando-se de escolher para instalar o componente de ferramentas da web. Então retorne a este tutorial. + <p>Se você não quiser instalar o DOMi, você pode pular esta seção e ir diretamente para a próxima página. Pulando esta seção você não interfere com o resto deste tutorial.</p> + </td> + </tr> + </tbody> +</table> + +<p><br> + No DOMi, expanda os nós do seu documento clicando em suas flechas.</p> + +<p><strong>Nota:</strong> O espaçamento em seu arquivo HTML faz com que o DOMi mostre alguns nós de texto vazios, que você pode ignorar.</p> + +<p>O resultado deve ser parecido com isto, dependendo do que você tenha expandido:</p> + +<table style="border: 2px outset #36b; padding: 0 0 0 2em;"> + <tbody> + <tr> + <td> + <div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;"> + <p>│<br> + <span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span> │ │ │ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span> │ │ └<span style="color: darkblue;">#text</span> │ ├╴<span style="color: darkblue;">#text</span> │ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span> │ │</p> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Quando você seleciona algum nó, você pode usar o painel direito do DOMi para achar mais sobre ele. Por exemplo, quando você seleciona um nó do texto, DOMi mostra para você o texto no painel da direita.</p> + +<p>Quando você seleciona um elemento nó, DOMi o analiza e fornece uma enorme quantidade de informações no seu painel direito. A informação sobre estilo é somente uma parte das informações que ele fornece.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>No DOMi, clique no nó <small>STRONG</small>. + <p>Use o painel direito do DOMi para achar onde fica a cor do nó (vermelho) e onde sua aparência é mais forte que o texto normal (negrito).</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Como_o_CSS_trabalha" title="Talk:pt/CSS/Como_começar/Como_o_CSS_trabalha">Discussão</a>.</p> + +<p>Se você tomou o desafio, você viu o estilo da informação em mais de um lugar interagir para criar o estilo final para um elemento.</p> + +<p>A próxima página explica mais sobre estas interações: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Cascata_e_heran%C3%A7a" title="pt/CSS/Como_começar/Cascata_e_herança">Cascata e herança</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}</p> diff --git a/files/pt-pt/web/css/como_começar/conteúdo/index.html b/files/pt-pt/web/css/como_começar/conteúdo/index.html new file mode 100644 index 0000000000..523c408aad --- /dev/null +++ b/files/pt-pt/web/css/como_começar/conteúdo/index.html @@ -0,0 +1,188 @@ +--- +title: Conteúdo +slug: Web/CSS/Como_começar/Conteúdo +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Howto/Generated_content +--- +<p>{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}</p> + +<p>Esta página descreve algumas maneiras que você pode usar no CSS para adicionar conteúdo quando um documento é exibido.</p> + +<p>Você modifica sua folha de estilo para adicionar conteúdo de texto e uma imagem.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Conte.C3.BAdo" name="Informa.C3.A7.C3.A3o:_Conte.C3.BAdo">Informação: Conteúdo</h2> + +<p>Uma das vantagens importantes das CSS é que ele o ajuda a separar o estilo do documento do seu conteúdo. Mas há situações onde faz sentido especificar certo conteúdo como parte de sua folha de estilo, não como parte do seu documento.</p> + +<p>O conteúdo especificado em uma folha de estilo pode consistir em texto ou imagens. Você especifica o conteúdo em sua folha de estilo quando o conteúdo tem uma ligação próxima à estrutura do documento.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Especificar o conteúdo em uma folha de estilo pode causar complicações. Por exemplo, você pode ter versões diferentes da língua do seu documento que compartilham uma folha de estilo. Se parte da folha de estilo tem que ser traduzida, isto mostra que você precisa por estas partes da folha de estilo em arquivos separados e arrumá-los para então ligá-los com a versão apropriada da língua do seu documento. + <p>Estas complicações não surgem se o conteúdo que você especificou consistir em símbolos ou imagens que se aplicam em todas as línguas e culturas.</p> + + <p><br> + O conteúdo especificado em uma folha de estilo não se tornará parte do DOM.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Conte.C3.BAdo_do_texto" name="Conte.C3.BAdo_do_texto">Conteúdo do texto</h3> + +<p>CSS pode inserir um texto antes ou depois de um elemento. Para especificar isto, faça uma regra e adicione <code>:before</code> ou <code>:after</code> ao seletor. Na declaração, especifique a propriedade <code>content</code> com o conteúdo do texto como seu valor.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta regra adiciona o texto <span style="font-weight: bold; color: navy;">Referência:</span> antes de todo elemento com a classe <code>ref</code>: + <div style="width: 30em;"> + <pre class="eval"> +.ref:before { + font-weight: bold; + color: navy; + content: "Referência: "; + } +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>O caractere de configuração de uma folha de estilo é por padrão o UTF-8, mas isto pode ser especificado na ligação, na própria folha de estilo ou por outras maneiras. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> na CSS Specification. + <p>Caracteres individuais podem às vezes ser especificados por um mecanismo de escape que use o contra barra (\) com o caráter de escape. Por exemplo, \265B é um símbolo do xadrez para a rainha preta ♛. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a> e também <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> em CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Conte.C3.BAdo_da_imagem" name="Conte.C3.BAdo_da_imagem">Conteúdo da imagem</h3> + +<p>Para adicionar uma imagem antes ou depois de um elemento, você pode especificar a URL de um arquivo de imagem no valor da propriedade <code>content</code>.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta regra adiciona um espaço e um ícone depois de cada ligação da classe <code>glossary</code>: + <div style="width: 45em;"> + <pre class="eval"> +a.glossary:after {content: " " url("../images/glossary-icon.gif");} +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p><br> + Para adicionar uma imagem ao fundo de um elemento, especifique a URL de um arquivo de imagem no valor da propriedade <code>background</code>. Isto é uma propriedade que especifica a cor do fundo, a imagem, como a imagem repete, e alguns outros detalhes.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta regra configura o fundo de um elemento específico, usando uma URL para especificar um arquivo de imagem. + <p>O seletor especifica o id do elemento. O valor <code>no-repeat</code> faz a imagem aparecer apenas uma vez:</p> + + <div style="width: 50em;"> + <pre class="eval"> +#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;} +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Para informações sobre propriedades individuais que afetam o fundo, e sobre outras opções que você pode especificar para as imagens de fundo, veja <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">The background</a> na CSS Specification.</td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Adicionando_uma_imagem_de_fundo" name="A.C3.A7.C3.A3o:_Adicionando_uma_imagem_de_fundo">Ação: Adicionando uma imagem de fundo</h2> + +<p>Esta imagem é um quadrado branco com uma linha azul em baixo. Baixe o arquivo desta imagem no mesmo diretório do seu arquivo CSS:</p> + +<table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2528/=Blue-rule.png"></td> + </tr> + </tbody> +</table> + +<p>(Por exemplo, clique com o botão direito sobre isto para abrir o menu de contexto, então escolha Salvar Imagem Como... e especifique o diretório que você está usando para este tutorial.)</p> + +<p>Edite o seu arquivo CSS e adicione esta regra ao corpo, configurando a imagem de fundo para a página inteira.</p> + +<div style="width: 40em;"> +<pre class="eval">background: url("Blue-rule.png"); +</pre> +</div> + +<p>O valor <code>repeat</code> é o padrão, então isto não precisa ser especificado. A imagem é repetida horizontal e verticalmente, dando a aparência parecida com a de um papel de escrita com linhas:</p> + +<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> +<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/2527/=Blue-rule-ground.png"></p> + +<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> +<div style="font-style: italic; width: 24em;"> +<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p> +</div> + +<div style="font-style: normal; padding-top: 2px; height: 8em;"> +<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p> +</div> +</div> +</div> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Baixe esta imagem: + <table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></td> + </tr> + </tbody> + </table> + + <p>Adicione uma regra à sua folha de estilo então isto mostrará a imagem no começo de cada linha:</p> + + <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> + <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/2527/=Blue-rule-ground.png"></p> + + <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> + <div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div> + + <div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Uma maneira comum de adicionar conteúdo à folha de estilo é marcar os itens em listas. Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="Talk:pt/CSS/Como_começar/Conteúdo">Discussão</a>.</p> + +<p>A próxima página descreve como especificar o estilo para elementos de listas: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Listas" title="pt/CSS/Como_começar/Listas">Listas</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}</p> diff --git a/files/pt-pt/web/css/como_começar/cor/index.html b/files/pt-pt/web/css/como_começar/cor/index.html new file mode 100644 index 0000000000..6ebb2347b9 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/cor/index.html @@ -0,0 +1,340 @@ +--- +title: Cor +slug: Web/CSS/Como_começar/Cor +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +<p>{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}</p> + +<p>Esta página explica mais sobre como você pode especificar cores no CSS.</p> + +<p>Em sua folha de estilo de amostra, você é introduzido nas cores de fundo.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Cor" name="Informa.C3.A7.C3.A3o:_Cor">Informação: Cor</h2> + +<p>Neste tutorial até agora, você usou um limitado número de cores nomeadas. CSS 2 suporta ao todo 17 cores nomeadas. Alguns dos nomes podem não ser o que você espera:</p> + +<table style="border: 0px; margin-left: 2em; text-align: right;"> + <tbody> + <tr> + <td> </td> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: black;"> </td> + <td>gray</td> + <td style="width: 2em; height: 2em; background-color: gray;"> </td> + <td>silver</td> + <td style="width: 2em; height: 2em; background-color: silver;"> </td> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> + </tr> + <tr> + <td>primárias</td> + <td>red</td> + <td style="width: 2em; height: 2em; background-color: red;"> </td> + <td>lime</td> + <td style="width: 2em; height: 2em; background-color: lime;"> </td> + <td>blue</td> + <td style="width: 2em; height: 2em; background-color: blue;"> </td> + </tr> + <tr> + <td>secundárias</td> + <td>yellow</td> + <td style="width: 2em; height: 2em; background-color: yellow;"> </td> + <td>aqua</td> + <td style="width: 2em; height: 2em; background-color: aqua;"> </td> + <td>fuchsia</td> + <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> + </tr> + <tr> + <td> </td> + <td>maroon</td> + <td style="width: 2em; height: 2em; background-color: maroon;"> </td> + <td>orange</td> + <td style="width: 2em; height: 2em; background-color: orange;"> </td> + <td>olive</td> + <td style="width: 2em; height: 2em; background-color: olive;"> </td> + <td>purple</td> + <td style="width: 2em; height: 2em; background-color: purple;"> </td> + <td>green</td> + <td style="width: 2em; height: 2em; background-color: green;"> </td> + <td>navy</td> + <td style="width: 2em; height: 2em; background-color: navy;"> </td> + <td>teal</td> + <td style="width: 2em; height: 2em; background-color: teal;"> </td> + </tr> + </tbody> +</table> + +<p> </p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Seu navegador pode suportar muitas cores nomeadas, como: + <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> + <tbody> + <tr> + <td>dodgerblue</td> + <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> + <td>peachpuff</td> + <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> + <td>tan</td> + <td style="width: 2em; height: 2em; background-color: tan;"> </td> + <td>firebrick</td> + <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> + <td>aquamarine</td> + <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> + </tr> + </tbody> + </table> + + <p>Para detalhes sobre esta lista extendida, veja: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> no CSS 3 Color Module. Cuidado ao usar cores nomeadas, pois seu navegador pode não suportar.</p> + </td> + </tr> + </tbody> +</table> + +<p><br> + Para uma paleta maior, específica de cores de componentes vermelho, verde ou azul você precisa usar um sinal numérico (#) e três digitos <em>hexadecimais</em> na faixa de 0 – 9 e a – f. As letras a – f representam os valores 10 – 15:</p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000</code></td> + </tr> + <tr> + <td>pure red</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>pure green</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#0f0</code></td> + </tr> + <tr> + <td>pure blue</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#00f</code></td> + </tr> + <tr> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + </tbody> +</table> + +<p><br> + Para a paleta total, especifique dois digitos hexadecimais por cada componente:</p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000000</code></td> + </tr> + <tr> + <td>pure red</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#ff0000</code></td> + </tr> + <tr> + <td>pure green</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#00ff00</code></td> + </tr> + <tr> + <td>pure blue</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#0000ff</code></td> + </tr> + <tr> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#ffffff</code></td> + </tr> + </tbody> +</table> + +<p>Você pode usualmente pegar estes seis digitos em código hexadeximal de seu programa de imagens ou alguma outra ferramenta.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption>Exemplos</caption> + <tbody> + <tr> + <td>Com uma pequena prática, você pode ajustar as cores de três digitos manualmente para a maioria dos propósitos: + <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> + <tbody> + <tr> + <td>Começe com vermelho puro:</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>Para tornar isto mais pálido, adicione um pouco de verde e azul:</td> + <td style="width: 2em; height: 2em; background-color: #f77;"> </td> + <td><code>#f77</code></td> + </tr> + <tr> + <td>Para tornar isto mais alaranjado, adicione um pouquinho mais de verde:</td> + <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> + <td><code>#fa7</code></td> + </tr> + <tr> + <td>Para tornar isto mais escuro, reduza todos os componentes:</td> + <td style="width: 2em; height: 2em; background-color: #c74;"> </td> + <td><code>#c74</code></td> + </tr> + <tr> + <td>Para reduzir a saturação, faça os componentes mais parecidos:</td> + <td style="width: 2em; height: 2em; background-color: #c98;"> </td> + <td><code>#c98</code></td> + </tr> + <tr> + <td>Se você quiser deixar todos os componentes iguais, você obterá cinza:</td> + <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> + <td><code>#ccc</code></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td>Para uma sombra pastel como azul pálido: + <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> + <tbody> + <tr> + <td>Começe com branco puro:</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + <tr> + <td>Reduza um pouco os outros componentes:</td> + <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> + <td><code>#eef</code></td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Você pode também especificar uma cor usando valores decimais RGB na faixa de 0 – 255, ou porcentagens. + <p>Por exemplo, este marrom (vermelho escuro):</p> + + <div style="width: 24em;"> + <pre> +rgb(128, 0, 0) +</pre> + </div> + + <p><br> + Para maiores detalhes sobre como especificar cores, veja: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> na CSS Specification.</p> + + <p>Para informação sobre sistema de cores combinadas como o Menu and ThreeDFace, veja: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> na CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Propriedades_de_cor" name="Propriedades_de_cor">Propriedades de cor</h3> + +<p>Você já usou a propriedade <code>color</code> para textos.</p> + +<p>Você também já usou a propriedade <code>background-color</code> para mudar elementos de fundo.</p> + +<p>Fundos podem ser configurados para <code>transparent</code> para remover qualquer cor explicitamente, reavaliando os elementos principais do fundo.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>As caixas de <strong>Exemplo</strong> neste tutorial usam este fundo amarelo pálido: + <div style="width: 24em;"> + <pre> +background-color: #fffff4; +</pre> + </div> + + <p>As caixas de <strong>Mais detalhes</strong> usam esta paleta cinza:</p> + + <div style="width: 24em;"> + <pre> +background-color: #f4f4f4; +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Usando_c.C3.B3digos_de_cor" name="A.C3.A7.C3.A3o:_Usando_c.C3.B3digos_de_cor">Ação: Usando códigos de cor</h2> + +<p>Edite seu arquivo CSS. Faça a mudança mostrada aqui em negrito, para dar às letras iniciais um fundo azul pálido. (O layout e os comentários no seu arquivo irão provavelmente diferir do arquivo mostrado aqui. Mantenha o layout e os comentários como você preferir.)</p> + +<div style="width: 32em;"> +<pre class="eval">/*** CSS Tutorial: Página de Cor ***/ + +/* Fonte da Página */ +body {font: 16px "Comic Sans MS", cursive;} + +/* Parágrafos */ +p {color: blue;} +#first {font-style: italic;} + +/* Letras Iniciais */ +strong { + color: red; + <strong>background-color: #ddf;</strong> + font: 200% serif; + } + +.carrot {color: red;} +.spinach {color: green;} +</pre> +</div> + +<p>Atualize seu navegador para ver o resultado:</p> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>No seu arquivo CSS, mude todos os nomes das cores para o código de cor com três digitos sem afetar o resultado. + <p>(Isto não pode ser feito exatamente, mas você pode deixar parecido. Para fazer isso exatamente você precisa do código com seis dígitos, e você precisa olhar a Especificação CSS ou usar uma ferramenta gráfica para converter as cores.)</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Cor" title="Talk:pt/CSS/Como_começar/Cor">Discussão</a>.</p> + +<p>Seu documento de amostra e sua folha de estilo de amostra separam rigorosamente o conteúdo do estilo.</p> + +<p>A próxima página explica como você pode fazer exceções para separar rigorosamente: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}</p> diff --git a/files/pt-pt/web/css/como_começar/css_legível/index.html b/files/pt-pt/web/css/como_começar/css_legível/index.html new file mode 100644 index 0000000000..7edd9f859e --- /dev/null +++ b/files/pt-pt/web/css/como_começar/css_legível/index.html @@ -0,0 +1,187 @@ +--- +title: CSS legível +slug: Web/CSS/Como_começar/CSS_legível +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +<p>{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}</p> + +<p>Esta página discute o estilo e a gramática da linguagem CSS.</p> + +<p>Você muda a maneira em que seu arquivo de amostra CSS é exibido, para torná-lo mais legível.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel" name="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel">Informação: CSS legível</h2> + +<p>Você pode adicionar espaço em branco e comentários na sua folha de estilo para fazê-la mais legível. Você pode também juntar seletores de grupo, quando as mesmas regras de estilo se aplicam aos elementos selecionados em meios diferentes.</p> + +<h3 id="Espa.C3.A7o_em_branco" name="Espa.C3.A7o_em_branco">Espaço em branco</h3> + +<p>Espaços em branco significam espaços reais, tabs e quebras de linha. Você pode adicionar espaços em branco para tornar suas folhas de estilo mais legíveis.</p> + +<p>Seu arquivo de amostra de CSS atualmente tem uma regra por linha, e quase o mínimo de espaço em branco. Em uma uma folha de estilo complexa esta disposição pode dificultar a leitura, dificultando também a manutenção da sua folha de estilo.</p> + +<p>A disposição que você escolhe é usualmente um preferência pessoal, mas se suas folhas de estilo são parte de projetos compartilhados, estes projetos podem ter suas próprias convenções.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplos</caption> + <tbody> + <tr> + <td>Algumas pessoas gostam de uma diposição compacta que temos usado, somente dividindo a linha quando ela se torna muito longa: + <pre> +.carrot {color: orange; text-decoration: underline; font-style: italic;} +</pre> + + <p>Algumas pessoas preferem uma propriedade-valor por linha:</p> + + <div style="width: 45em;"> + <pre class="eval"> +.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</pre> + </div> + + <p>Algumas pessoas usam tabs – dois espaços, quatro espaços, ou um tab são comuns:</p> + + <div style="width: 45em;"> + <pre class="eval"> +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; +} +</pre> + </div> + + <p>Algumas pessoas gostam de enfileirar a linha verticalmente (mas é difícil de manter uma disposição assim):</p> + + <div style="width: 45em;"> + <pre class="eval"> +.carrot + { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> + </div> + + <p>Algumas pessoas usam tabs para a disposição. Algumas pessoas usam somente espaços.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Coment.C3.A1rios" name="Coment.C3.A1rios">Comentários</h3> + +<p>Comentários em CSS começam com <code>/*</code> e terminam com <code>*/</code>.</p> + +<p>Você pode usar comentários para fazer comentários reais na sua folha de estilo, e também para <em>descomentar</em> partes que estiverem temporariamente para propósito de testes.</p> + +<p>Para comentar parte da folha de estilo, coloque a parte em um comentário então o navegador ignorará isso. Tome cuidado onde você começa e termina o seu comentário. O resto da sua folha de estilo ainda deve ter a sintaxe correta.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td> + <div style="width: 45em;"> + <pre class="eval"> +/* Estilo para a letra C inicial no primeiro parágrafo */ +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<h3 id="Seletores_agrupados" name="Seletores_agrupados">Seletores agrupados</h3> + +<p>Quando muitos elementos tiverem o mesmo estilo, você pode especificar um grupo de seletores, separando-os com comentários. A declaração se aplica a todos os elementos selecionados.</p> + +<p>Em outra parte da sua folha de estilo você pode especificar os mesmos seletores, de novo individualmente, para aplicar estilo individual às suas regras.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta regra faz os elementos <small>H1</small>, <small>H2</small> and <small>H3</small> da mesma cor. + <p>Isto é conveniente para especificar a cor em somente um lugar, no caso em que precisa ser alterado.</p> + + <div style="width: 30em;"> + <pre class="eval"> +/* cores para os cabeçalhos */ +h1, h2, h3 {color: navy;} +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo" name="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo">Ação: Adicionando comentários e melhorando o arranjo</h2> + +<p>Edite seu arquivo CSS, e assegure-se que ele tem todas as regras nele (em qualquer ordem):</p> + +<div style="width: 30em;"> +<pre class="eval">strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +#first {font-style: italic;} +p {color: blue;} +</pre> +</div> + +<p>Faça isto mais legível rearranjando isto em um meio que possa ser achado lógicamente, adicionando espaços em branco e comentários da maneira que você achar melhor.</p> + +<p>Salve o arquivo e atualize a tela do seu navegador, assegure-se que as mudanças que você fez não afetaram o modo como a folha de estilo trabalha:</p> + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Comente parte de sua folha de estilo, sem mudar qualquer coisa, para fazer a primeira letra de seu documento vermelha: + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>(Existe mais de uma maneira de fazer isto.)</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/CSS_leg%C3%ADvel" title="Talk:pt/CSS/Como_começar/CSS_legível">Discussão</a>.</p> + +<p>Seu documento de amostra usou o texto em itálico e o texto com sublinhado. A próxima página descreve mais caminhos para especificar a aparência do texto no seu documento: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Estilos_de_texto" title="pt/CSS/Como_começar/Estilos_de_texto">Estilos de texto</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}</p> diff --git a/files/pt-pt/web/css/como_começar/dados_xml/index.html b/files/pt-pt/web/css/como_começar/dados_xml/index.html new file mode 100644 index 0000000000..d0245353fa --- /dev/null +++ b/files/pt-pt/web/css/como_começar/dados_xml/index.html @@ -0,0 +1,239 @@ +--- +title: Dados XML +slug: Web/CSS/Como_começar/Dados_XML +tags: + - 'CSS:Como_começar' +translation_of: Archive/Beginner_tutorials/XML_data +--- +<p>{{ Previous("Web/CSS/Como_começar/Gráficos_SVG") }}</p> + +<p> </p> + +<p>Esta página contém um exemplo de como você pode usar o CSS com dados XML.</p> + +<p>Você cria um documento XML de amostra e uma folha de estilo que você pode usar para exibí-lo em seu navegador.</p> + +<h3 id="Informa.C3.A7.C3.A3o:_Dados_XML" name="Informa.C3.A7.C3.A3o:_Dados_XML">Informação: Dados XML</h3> + +<p><em><a href="/pt/XML" title="pt/XML">XML</a></em> (eXtensible Markup Language) é uma linguagem de propósito geral para qualquer tipo de dados estruturados.</p> + +<p>Por padrão, seu navegador Mozilla mostra o XML em um formato muito similar aos dados originais no arquivo XML. Você vê as tags reais que definem a estrutura dos dados.</p> + +<p>Ligando a folha de estilo CSS com o documento XML, você pode definir outras maneiras para mostrá-lo. Para fazer isto, sua folha de estilo usa regras que mapeiam os tags no documento XML para mostrar tipos usados pelo HTML.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Dados em um documento XML usando tags <code><INFO></code>. Você quer que os elementos <small>INFO</small> do documento sejam mostrados como parágrafos no HTML. + <p>Na folha de estilo do documento, você especifica como os elementos <small>INFO</small> serão exibidos:</p> + + <div style="width: 30em;"> + <pre class="eval"> +INFO { + display: block; + margin: 1em 0; + } +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Os valores mais comuns para a propriedade <code>display</code> são:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="padding-right: 2em;"><code>block</code></td> + <td>Monstrado como <small>DIV</small> do HTML (para cabeçalhos, parágrafos)</td> + </tr> + <tr> + <td><code>inline</code></td> + <td>Mostrado como <small>SPAN</small> do HTML (para ênfases no texto)</td> + </tr> + </tbody> +</table> + +<p>Adicione seu próprio estilo de regras para especificar a fonte, espaçamento e outros detalhes da mesma maneira que no HTML.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Outros valores de <code>display</code> mostram o elemento como o item de uma lista, ou como o componente de uma tabela. + <p>Para a lista completa de tipos de exibição, veja <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a> em CSS Specification.</p> + + <p>Usando CSS sozinho, a estrutura de exibição precisa ser a mesma da estrutura do documento. Outras tecnologias pode modificar a estrutura da exibição — por exemplo, o XBL pode adicionar conteúdo, e o JavaScript pode modificar o DOM.</p> + + <p>Para mais informações sobre o XML no Mozilla, veja a página <a href="/pt/XML" title="pt/XML">XML</a> neste wiki.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_XML" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_XML">Ação: Uma demonstração XML</h3> + +<p>Crie um novo arquivo XML, <code>doc9.xml</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre><?xml version="1.0"?> +<!-- XML demonstration --> + +<?xml-stylesheet type="text/css" href="style9.css"?> + +<!DOCTYPE planet> +<planet> + +<ocean> +<name>Arctic</name> +<area>13,000</area> +<depth>1,200</depth> +</ocean> + +<ocean> +<name>Atlantic</name> +<area>87,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Pacific</name> +<area>180,000</area> +<depth>4,000</depth> +</ocean> + +<ocean> +<name>Indian</name> +<area>75,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Southern</name> +<area>20,000</area> +<depth>4,500</depth> +</ocean> + +</planet> +</pre> +</div> + +<p>Crie um novo arquivo CSS, <code>style9.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre>/*** XML demonstration ***/ + +planet:before { + display: block; + width: 8em; + font-weight: bold; + font-size: 200%; + content: "Oceans"; + margin: -.75em 0px .25em -.25em; + padding: .1em .25em; + background-color: #cdf; + } + +planet { + display: block; + margin: 2em 1em; + border: 4px solid #cdf; + padding: 0px 1em; + background-color: white; + } + +ocean { + display: block; + margin-bottom: 1em; + } + +name { + display: block; + font-weight: bold; + font-size: 150%; + } + +area { + display: block; + } + +area:before { + content: "Area: "; + } + +area:after { + content: " million km\B2"; + } + +depth { + display: block; + } + +depth:before { + content: "Mean depth: "; + } + +depth:after { + content: " m"; + } +</pre> +</div> + +<p>Abra o documento em seu navegador:</p> + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;"> + <p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p> + + <p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><strong>Arctic</strong><br> + Area: 13,000 million km²<br> + Mean depth: 1,200 m</p> + + <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>Atlantic</strong><br> + Area: 87,000 million km²<br> + Mean depth: 3,900 m</p> + + <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>. . .</strong></p> + </div> + </td> + </tr> + </tbody> +</table> + +<p><br> + Notas sobre esta demonstração:</p> + +<ul> + <li>O 2 sobre-escrito (em "million km²") um caractér Unicode, é codificado com <code>\B2</code> no arquivo CSS.</li> + <li>O cabeçalho, "Oceans", tem uma margem negativa no topo, movendo-o para cima quando exibido no topo da borda.</li> +</ul> + +<p> </p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Mude a folha de estilo de modo que ela mostre o documento como uma tabela. + <p>(Veja o capítulo <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> em CSS Specification para exemplos que você pode adaptar.)</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h4> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Dados_XML" title="Talk:pt/CSS/Como_começar/Dados_XML">Discussão</a>.</p> + +<p>Esta é a última página do tutorial. Para mais informações sobre CSS no Mozilla, veja a página principal <a href="/pt/CSS" title="pt/CSS">CSS</a> neste wiki.</p> + +<p>{{ Previous("Web/CSS/Como_começar/Gráficos_SVG") }}</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/como_começar/disposição/index.html b/files/pt-pt/web/css/como_começar/disposição/index.html new file mode 100644 index 0000000000..e4efedf77a --- /dev/null +++ b/files/pt-pt/web/css/como_começar/disposição/index.html @@ -0,0 +1,452 @@ +--- +title: Disposição +slug: Web/CSS/Como_começar/Disposição +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/CSS_layout +--- +<p>{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}</p> + +<p>Esta página descreve algumas maneiras para ajustar a disposição do seu documento.</p> + +<p>Você muda a disposição do seu documento de amostra...</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Disposi.C3.A7.C3.A3o" name="Informa.C3.A7.C3.A3o:_Disposi.C3.A7.C3.A3o">Informação: Disposição</h2> + +<p>Você pode usar as CSS para especificar vários efeitos visuais que mudam a disposição do seu documento. Algumas técnicas para especificação da disposição são avançadas,e além do alcance deste tutorial básico.</p> + +<p>Quando você desenha uma disposição que aparece similar em vários navegadores, sua folha de estilo interage com a folha de estilo padrão do navegador e o motor de disposição em alguns caminhos pode se tornar complexo. Isto é também uma matéria avançada, além do alcance deste tutorial básico.</p> + +<p>Esta página descreve algumas técnicas simples que você pode tentar.</p> + +<h4 id="Estrutura_do_documento" name="Estrutura_do_documento">Estrutura do documento</h4> + +<p>Se você quer controlar a disposição do seu documento, então você pode ter que mudar sua estrutura.</p> + +<p>A linguagem de marcação do seu documento pode ter tags com propósito geral para criar a estrutura. Por exemplo, no HTML você pode usar a tag <code>DIV</code> para criar a estrutura.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>No seu documento de amostra, os parágrafos numerados sob o segundo título não tem um "recipiente" próprio. + <p>Sua folha de estilo não pode desenhar uma borda ao redor destes parágrafos, porque não há elemento especificado no seletor.</p> + + <p>Para fixar este problema estrutural, você pode adicionar uma tag <code>DIV</code> em torno dos parágrafos. Esta tag é única, então isto pode ser identificado por um atributo <code>id</code>:</p> + + <div style="width: 40em; color: gray;"> + <pre class="eval"> +<H3 class="numbered">Parágrafos numerados</H3> +<strong style="color: black;"><DIV id="numbered"></strong> +<P class="numbered">Lorem ipsum</P> +<P class="numbered">Dolor sit</P> +<P class="numbered">Amet consectetuer</P> +<P class="numbered">Magna aliquam</P> +<P class="numbered">Autem veleum</P> +<strong style="color: black;"></DIV></strong> +</pre> + </div> + + <p>Agora sua folha de estilo pode use uma regra para especificar bordas em tordo de ambas as listas:</p> + + <div style="width: 30em;"> + <pre class="eval"> +ul, #numbered { + border: 1em solid #69b; + padding-right:1em; + } +</pre> + </div> + + <p>O resultado deve ser como este:</p> + + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p> + + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Ártico</li> + <li>Atlântico</li> + <li>Pacífico</li> + <li>Índico</li> + <li>Antártico</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p> + + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="Tamanhos_das_unidades" name="Tamanhos_das_unidades">Tamanhos das unidades</h3> + +<p>Anteriormente neste tutorial, você especificou tamanhos em pixels (<code>px</code>). Estes são apropriados para alguns propósitos em um dispositivo de exposição como uma tela de computador. Mas quando o usuário muda o tamanho da fonte, sua disposição pode ficar errada.</p> + +<p>Para muitos propósitos é melhor especificar tamanhos com porcentagem ou em ems (<code>em</code>). Um em é nominalmente o tamanho da fonte corrente (a largura de uma letra m). Quando o usuário muda o tamanho da fonte, sua disposição ajusta-se automaticamente.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>A borda da esquerda deste texto tem o tamanho especificado em pixels. + <p>A borda da direita tem o tamanho especificado em ems. No seu navegador, mude o tamanho da fonte para ver como a borda da direita se ajusta mas a borda da esquerda não:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div style="">Redimensione-me por favor</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Para outros dispositivos, outras unidades de comprimento são apropriadas. + <p>Há mais informação sobre isto em uma página anterior deste tutorial.</p> + + <p>Para detalhes completos sobre os valores e unidades que você pode usar, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> em CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Disposi.C3.A7.C3.A3o_do_texto" name="Disposi.C3.A7.C3.A3o_do_texto">Disposição do texto</h3> + +<p>Duas propriedades especificam como o conteúdo de um elemento é alinhado. Você pode usá-las para ajustes simples na disposição:</p> + +<ul> + <li><code>text-align</code></li> +</ul> + +<dl> + <dd>Alinha o conteúdo. Use um destes valores: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd> +</dl> + +<ul> + <li><code>text-indent</code></li> +</ul> + +<dl> + <dd>Indenta o conteúdo, colocando o espaço que você especificar.</dd> +</dl> + +<p>Estas propriedades aplicam-se a qualquer conteúdo como texto no elemento, não somente ao texto atual. Lembre-se que elas são herdadas pelo elemento filho, então você pode ter que desativá-las nos elementos filhos para não se surpreender com os resultados.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Para centralizar títulos: + <div style="width: 30em;"> + <pre class="eval"> +h3 { + border-top: 1px solid gray; + text-align: center; + } +</pre> + </div> + + <p>Resulta em:</p> + + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) Os oceanos</p> + </td> + </tr> + </tbody> + </table> + + <p>Em um documento HTML, o conteúdo que você vê abaixo do título não é contido estruturalmente pelo título. Então quando você alinha um título como isto, as tags abaixo do título não são afetadas pela herança.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Flutuantes" name="Flutuantes">Flutuantes</h3> + +<p>A propriedade <code>float</code> força um elemento para a esquerda ou direita. Isto é uma maneira simples de controlar sua posição e tamanho.</p> + +<p>O resto do conteúdo do documento normalmente flui ao redor do elemento flutuado. Você pode controlar isto usando a propriedade <code>clear</code> em outros elementos para fazê-los permanecer sem flutuantes.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Em seu documento de amostra, as listas esticam através da janela. Você pode prevenir isto flutuando-os para a esquerda. + <p>Para manter os títulos no lugar, você precisa também especificar que eles permaneçam limpos de flutuantes à sua esquerda:</p> + + <div style="width: 30em;"> + <pre class="eval"> +ul, #numbered {float: left;} +h3 {clear: left;} +</pre> + </div> + + <p>O resultado deve se parecer com isto:</p> + + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li>Ártico</li> + <li>Atlântico</li> + <li>Pacífico</li> + <li>Índico</li> + <li>Antártico</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> + </table> + + <p>(Um pequeno enchimento é necessário à direita das caixas, onde a borda fica muito perto do texto.)</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Posicionamento" name="Posicionamento">Posicionamento</h3> + +<p>Você pode especificar a posição dos elementos de quatro maneiras, especificando a propriedade <code>position</code> e um dos valores seguintes:</p> + +<p>Estas são propriedades avançadas. É possível usá-las de maneiras simples — esta é a razão pela qual elas são mencionadas neste tutorial básico. Mas usando-as para disposições complexas pode-se dificultar.</p> + +<ul> + <li><code>relative</code></li> +</ul> + +<dl> + <dd>A posição do elemento é alterada relativamente à sua posição normal.</dd> + <dd>Use-o para mover um elemento por uma quantidade especificada. Às vezes você pode usar a margem do elemento para obter o mesmo efeito.</dd> +</dl> + +<ul> + <li><code>fixed</code></li> +</ul> + +<dl> + <dd>A posição do elemento é fixa.</dd> + <dd>Especifique a posição do elemento relativa à janela do documento. Mesmo que o resto do documento seja rolado, o elemento permanece fixo.</dd> +</dl> + +<ul> + <li><code>absolute</code></li> +</ul> + +<dl> + <dd>A posição do documento é fixada relativamente a um elemento pai.</dd> + <dd>Somente um elemento pai que esteja posicionado com <code>relative</code>, <code>fixed</code> ou <code>absolute</code> o fará.</dd> +</dl> + +<dl> + <dd>Você pode tornar qualquer elemento principal apropriado, especificando <code>position: relative;</code> sem especificar qualquer movimento.</dd> +</dl> + +<ul> + <li><code>static</code></li> +</ul> + +<dl> + <dd>O padrão. Use este valor caso precise desativar a posição explicitamente.</dd> +</dl> + +<p>Agora, com estes valores da propriedade <code>position</code> (exeto para <code>static</code>), especifique uma ou mais propriedades: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> para identificar onde você quer que o elemento apareça, e talvez também seu tamanho.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Para posicionar dois elementos no topo, crie um "recipiente" principal em seu documento com os dois elementos dentre dele: + <div style="width: 30em;"> + <pre class="eval"> +<DIV id="parent-div"> +<P id="forward">/</P> +<P id="back">\</P> +</DIV> +</pre> + </div> + + <p>Na sua folha de estilo, faça a posição principal <code>relative</code>. Ela não precisa que seja especificado qualquer movimento atual. Faça a posição subordinada <code>absolute</code>:</p> + + <div style="width: 30em;"> + <pre> +#parent-div { + position: relative; + font: bold 200% sans-serif; + } + +#forward, #back { + position: absolute; + margin:0px; + top: 0px; + left: 0px; + } + +#forward { + color: blue; + } + +#back { + color: red; + } +</pre> + </div> + + <p>O resultado deve ser como isto, com a contra barra (\) sobre a barra (/):</p> + + <div style="position: relative; left: .33em; font: bold 300% sans-serif;"> + <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> + + <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> + </div> + + <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> + </table> + + <p> </p> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>A história completa sobre posicionamento toma dois complexos capítulos em CSS Specification: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> e <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>. + <p>Se você está desenhando folhas de estilo para trabalharem em vários navegadores, então você também precisa levar em conta as diferenças na maneira em que os navegadores interpretam o padrão, e talvez bugs em algumas versões de alguns navegadores.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Especificando_a_disposi.C3.A7.C3.A3o" name="A.C3.A7.C3.A3o:_Especificando_a_disposi.C3.A7.C3.A3o">Ação: Especificando a disposição</h2> + +<p>Mude seu documento de amostra e sua folha de estilo usando os exemplos anteriores nas seções <strong>Estrutura do documento</strong> e <strong>Flutuantes</strong>.</p> + +<p>No exemplo dos <strong>Flutuantes</strong>, adicione enchimento para separar o texto da borda direita por 0,5 em.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Mude seu documento de amostra, adicionando esta tag perto do fim, somente antes de <code></BODY></code> + <pre> +<IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> + + <p>Se você não baixou o arquivo de imagem anteriormente neste tutorial, baixe-o agora:</p> + + <table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></td> + </tr> + </tbody> + </table> + + <p>Prediga onde a imagem irá aparecer no seu documento. Então atualize seu navegador para ver se você estava certo.</p> + + <p>Adicione uma regra à sua folha de estilo que fixe a imagem no topo e a direita do seu documento.</p> + + <p>Atualize seu navegador e diminua o tamanho da janela. Cheque se a imagem permanece no topo e a direita mesmo que você role seu documento:</p> + + <div style="position: relative; width: 29.5em; height: 18em;"> + <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> + <ul style=""> + <li>Ártico</li> + <li>Atlântico</li> + <li>Pacífico</li> + <li>Índico</li> + <li>Antártico</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p> + + <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + + <p style=""> </p> + + <div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></div> + </div> + </div> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="Talk:pt/CSS/Como_começar/Disposição">Discussão</a>.</p> + +<p>A próxima página descreve seletores para regras mais avançadas das CSS, e algumas maneiras específicas de estilizar tabelas: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Tabelas" title="pt/CSS/Como_começar/Tabelas">Tabelas</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}</p> diff --git a/files/pt-pt/web/css/como_começar/estilos_de_texto/index.html b/files/pt-pt/web/css/como_começar/estilos_de_texto/index.html new file mode 100644 index 0000000000..2e32166761 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/estilos_de_texto/index.html @@ -0,0 +1,157 @@ +--- +title: Estilos de texto +slug: Web/CSS/Como_começar/Estilos_de_texto +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<p>{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}</p> + +<p>Esta página dá mais exemplos de estilos de texto.</p> + +<p>Você modifica sua folha de estilo de amostra para usar diferentes fontes.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Estilos_de_texto" name="Informa.C3.A7.C3.A3o:_Estilos_de_texto">Informação: Estilos de texto</h2> + +<p>CSS tem várias propriedades para estilos de texto.</p> + +<p>Há uma conveniente propriedade de abreviação de caracteres/palavras que facilitam a escrita, <code>font</code>, que você pode usar para especificar várias coisas de uma vez — por exemplo:</p> + +<ul> + <li>Negrito, itálico e letras minúsculas</li> + <li>O tamanho</li> + <li>A altura da linha</li> + <li>O tipo da fonte</li> +</ul> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td> + <div style="width: 40em;"> + <pre class="eval"> +p {font: italic 75%/125% "Comic Sans MS", cursive;} +</pre> + </div> + + <p>Esta regra coloca várias propriedades da fonte, fazendo todos os parágrafos em itálico.</p> + + <p>O tamanho da fonte é três quartos (75%) do tamanho em cada elemento do paragrafo principal e a altura da linha é 125% (um pouco mais espaçada que o normal).</p> + + <p>O tipo da fonte é Comic Sans MS, mas se a fonte não estiver disponível então o navegador usará sua fonte cursiva padrão (escrita a mão).</p> + + <p>A regra tem o efeito colateral de desativar o negrito e as letras minúsculas (colocando-os no estilo <code>normal</code>)</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Tipos_de_fonte" name="Tipos_de_fonte">Tipos de fonte</h3> + +<p>Você não pode predizer quais fontes os leitores do seu documento terão. Então quando você especifica tipos de fonte é uma boa idéia colocar uma lista de alternativas em ordem de preferência.</p> + +<p>Acabe a lista com um dos tipos de fontes internas padrão: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> ou <code>monospace</code>. (Algumas destas podem ser configuradas nas Opções do seu navegador.)</p> + +<p>Se o tipo não for suportado por algumas características no documento, então o navegador pode substituí-lo por um tipo diferente. Por exemplo, o documento pode conter caracteres especiais que a fonte não suporte. Se o navegador puder encontrar outra fonte que tenha os caracteres, então ele usará a outra fonte.</p> + +<p>Para especificar um tipo de fonte por conta própria, use a propriedade <code>font-family</code>.</p> + +<h3 id="Tamanho_da_fonte" name="Tamanho_da_fonte">Tamanho da fonte</h3> + +<p>Leitores que usam os navegadores Mozilla podem configurar o tamanho padrão das fontes em Opções, e mudar o tamanho do texto quando lêem uma página, isso a torna boa para você usá-la com tamanho relativos onde você puder.</p> + +<p>Você pode usar alguns valores internos para o tamanho das fontes, como: <code>small</code>, <code>medium</code> e <code>large</code>. Você pode também usar valores relativos para o tamanho das fontes do elemento primário, como: <code>smaller</code>, <code>larger</code>, <code>150%</code> ou <code>1.5em</code>.</p> + +<p>Se necessário você pode especificar um tamanho atual, como: <code>12px</code> (12 pixels) para um instrumento de exibição ou <code>12pt</code> (12 pontos) para uma impressora. Este tamanho é nominalmente a largura de uma letra m, mas fontes variam na maneira do tamanho, você vê relatos do tamanho que você especifica.</p> + +<p>Para especificar um tamanho de fonte por conta própria, use a propriedade <code>font-size</code>.</p> + +<h3 id="Altura_da_linha" name="Altura_da_linha">Altura da linha</h3> + +<p>A altura da linha especifica o espaçamento entre linhas. Se seu documento tem longos parágrafos com muitas linhas, um espaçamento mais largo que o normal faz com que a leitura seja mais fácil, especialmente se o tamanho da fonte for pequeno.</p> + +<p>Para especificar a altura da linha por conta própria, use a propriedade <code>line-height</code>.</p> + +<h3 id="Decora.C3.A7.C3.A3o" name="Decora.C3.A7.C3.A3o">Decoração</h3> + +<p>A propriedade separada <code>text-decoration</code> pode especificar outros estilos, como <code>underline</code> ou <code>line-through</code>. Você pode configurar isto para <code>none</code> removendo explicitamente qualquer decoração.</p> + +<h3 id="Outras_propriedades" name="Outras_propriedades">Outras propriedades</h3> + +<p>Para especificar itálico por conta própria, use <code>font-style: italic;</code><br> + Para especificar negrito por conta própria, use <code>font-weight: bold;</code><br> + Para especificar letras minúsculas por conta própria, use <code>font-variant: small-caps;</code></p> + +<p>Para tornar qualquer destes valores individualmente desativado, você pode especificar o valor <code>normal</code> ou <code>inherit</code>.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Você pode especificar os estilos do texto em uma variedade de outras maneiras. + <p>Por exemplo, algumas propriedades mencionadas aqui têm outros valores que podem ser usados.</p> + + <p>Em uma folha de estilo complexa, evite usar a propriedade de abreviação de caracteres/palavras que facilitam a escrita <code>font</code>, por causa de seus efeitos colaterais (o re-escolher de outras propriedades individuais).</p> + + <p>Para maiores detalhes sobre as propriedades relacionadas às fontes, veja <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> na especificação do CSS. Para maiores detalhes sobre decoração de textos, veja <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Especificando_fontes" name="A.C3.A7.C3.A3o:_Especificando_fontes">Ação: Especificando fontes</h2> + +<p>Para um documento de amostra, você pode escolher a fonte do elemento <small>BODY</small> e o resto do documento herda as configurações.</p> + +<p>Edite seu arquivo CSS. Adicione esta regra para mudar a fonte completamente. O topo do arquivo CSS é um local lógico para isto, mas isto terá o mesmo efeito em qualquer lugar que for posicionado:</p> + +<div style="width: 40em;"> +<pre class="eval">body {font: 16px "Comic Sans MS", cursive;} +</pre> +</div> + +<p>Adicione um comentário à regra, e deixe um espaço em branco para fazer sua disposição preferido.</p> + +<p>Atualize seu navegador para ver o efeito. Se o seu sistema tem Comic Sans MS, ou outra fonte cursiva que não suporta itálico, então seu navegador escolhe um tipo diferente de fonte para o texto em itálico na primeira linha:</p> + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>Da barra de menu do seu navegador, escolha Exibir – Tamanho do Texto – Aumentar. Mesmo que o estilo especificado seja 16 pixels, um usuário lendo o documento pode mudar o tamanho.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Sem mudar mais nada, faça todas as seis letras iniciais duas vezes o tamanho na fonte serifada padrão do navegador: + <table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Estilos_de_texto" title="Talk:pt/CSS/Como_começar/Estilos_de_texto">Discussão</a>.</p> + +<p>Seu documento de amostra está pronto para usar várias cores nomeadas. A próxima página lista os nomes das cores padrão e explica como você pode especificar outras: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Cor" title="pt/CSS/Como_começar/Cor">Cor</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}</p> diff --git a/files/pt-pt/web/css/como_começar/gráficos_svg/index.html b/files/pt-pt/web/css/como_começar/gráficos_svg/index.html new file mode 100644 index 0000000000..074f78c92d --- /dev/null +++ b/files/pt-pt/web/css/como_começar/gráficos_svg/index.html @@ -0,0 +1,215 @@ +--- +title: Gráficos SVG +slug: Web/CSS/Como_começar/Gráficos_SVG +tags: + - 'CSS:Como_começar' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +<p>{{ PreviousNext("CSS:Como começar:Interfaces de usuário XUL", "CSS:Como começar:Dados XML") }}</p> + +<p>Esta página ilustra a linguagem especializada para criação de gráficos: SVG.</p> + +<p>Você cria uma simples demonstração que roda em seu navegador Mozilla com SVG ativado.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_SVG" name="Informa.C3.A7.C3.A3o:_SVG">Informação: SVG</h2> + +<p><em>SVG</em> (Scalable Vector Graphics) é uma linguagem baseada em XML para criação de gráficos.</p> + +<p>Ela pode ser usada para imagens estáticas, e também para animações e interfaces de usuário.</p> + +<p>Como outras linguagens baseadas em XML, SVG suporta folhas de estilo CSS então você pode separar o estilo de um gráfico do seu conteúdo.</p> + +<p>As folhas de estilo que você usa com linguagens de marcação em outros documentos também podem especificar o URL de um gráfico SVG onde uma imagem é requerida. Por exemplo, uma folha de estilo que você usa com documentos HTML pode especificar uma URL de um gráfico SVG no valor da propriedade <code>background</code>.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td><span class="comment">Enquanto escrevo (metade de 2005), somente algumas novas construções dos navegadores Mozilla tem suporte a SVG contruída. Você pode adicionar suporte ao SVG à outras versões instalando um plugin tal como este fornecido pela {{ mediawiki.external('http://www.adobe.com/svg/viewer/install/main.html Adobe') }}.</span> + <p>Para mais informações sobre SVG no Mozilla, veja a página <a href="/pt/SVG" title="pt/SVG">SVG</a> neste wiki.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_SVG" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_SVG">Ação: Uma demonstração SVG</h2> + +<p>Crie um novo documento SVG de um arquivo de texto simples, <code>doc8.svg</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre><?xml version="1.0" standalone="no"?> + +<?xml-stylesheet type="text/css" href="style8.css"?> + +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + +<title>SVG demonstration</title> +<desc>Mozilla CSS Getting Started - SVG demonstration</desc> + +<defs> + <g id="segment" class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g id="quadrant"> + <use xlink:href="#segment"/> + <use xlink:href="#segment" transform="rotate(18)"/> + <use xlink:href="#segment" transform="rotate(36)"/> + <use xlink:href="#segment" transform="rotate(54)"/> + <use xlink:href="#segment" transform="rotate(72)"/> + </g> + <g id="petals"> + <use xlink:href="#quadrant"/> + <use xlink:href="#quadrant" transform="rotate(90)"/> + <use xlink:href="#quadrant" transform="rotate(180)"/> + <use xlink:href="#quadrant" transform="rotate(270)"/> + </g> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> + </defs> + +<text id="heading" x="-280" y="-270"> + SVG demonstration</text> +<text id="caption" x="-280" y="-250"> + Move your mouse pointer over the flower.</text> + +<g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" + stroke="none" fill="url(#fade)"/> + <use id="outer-petals" xlink:href="#petals"/> + <use id="inner-petals" xlink:href="#petals" + transform="rotate(9) scale(0.33)"/> + </g> + +</svg> +</pre> +</div> + +<p>Crie um novo arquivo CSS, <code>style8.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre>/*** Demonstração SVG ***/ + +/* página */ +svg { + background-color: beige; + } + +#heading { + font-size: 24px; + font-weight: bold; + } + +#caption { + font-size: 12px; + } + +/* flor */ +#flower:hover { + cursor: crosshair; + } + +/* gradiente */ +#fade-stop-1 { + stop-color: blue; + } + +#fade-stop-2 { + stop-color: white; + } + +/* outras pétalas */ +#outer-petals { + opacity: .75; + } + +#outer-petals .segment-fill { + fill: azure; + stroke: lightsteelblue; + stroke-width: 1; + } + +#outer-petals .segment-edge { + fill: none; + stroke: deepskyblue; + stroke-width: 3; + } + +#outer-petals .segment:hover > .segment-fill { + fill: plum; + stroke: none; + } + +#outer-petals .segment:hover > .segment-edge { + stroke: slateblue; + } + +/* pétalas internas */ +#inner-petals .segment-fill { + fill: yellow; + stroke: yellowgreen; + stroke-width: 1; + } + +#inner-petals .segment-edge { + fill: none; + stroke: yellowgreen; + stroke-width: 9; + } + +#inner-petals .segment:hover > .segment-fill { + fill: darkseagreen; + stroke: none; + } + +#inner-petals .segment:hover > .segment-edge { + stroke: green; + } +</pre> +</div> + +<p>Abra o documento no seu navegador com SVG ativado. Mova o ponteiro do seu mouse sobre o gráfico.</p> + +<p>Este wiki não suporta página com SVG, então não é possível demonstrá-lo aqui. Os gráficos deverão parecer com isto:</p> + +<table style="border: 2px outset #36b;"> + <tbody> + <tr> + <td><img alt="SVG demonstration" class="internal" src="/@api/deki/files/2553/=SVG-flower.png"></td> + </tr> + </tbody> +</table> + +<p>Notas sobre esta demonstração:</p> + +<ul> + <li>O documento SVG é ligado à folha de estilo normalmente.</li> + <li>O SVG tem suas propriedades e valores CSS. Alguns deles são similares às propriedades do CSS para o HTML.</li> +</ul> + +<p> </p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Mude a folha de estilo de modo que as pétalas interiores tornem-se todas rosa quando o ponteiro do mouse estiver sobre alguma delas, sem mudar a maneira como as outras pétalas trabalham.</td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Gr%C3%A1ficos_SVG" title="Talk:pt/CSS/Como_começar/Gráficos_SVG">Discussão</a>.</p> + +<p>Nesta demonstração, seu navegador com SVG ativado já sabe como mostrar elementos SVG. A folha de estilo somente modifica a exibição em certos caminhos. Isto também é verdade para documentos HTML e XUL. Mas você pode usar o CSS para propósitos gerais em documentos XML, onde não é predefinido um caminho para exibir os elementos. A próxima página demonstra isto: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Dados_XML" title="pt/CSS/Como_começar/Dados_XML">Dados XML</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Interfaces de usuário XUL", "CSS:Como começar:Dados XML") }}</p> diff --git a/files/pt-pt/web/css/como_começar/index.html b/files/pt-pt/web/css/como_começar/index.html new file mode 100644 index 0000000000..a0cf76e018 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/index.html @@ -0,0 +1,91 @@ +--- +title: Como começar +slug: Web/CSS/Como_começar +tags: + - CSS + - 'CSS:Como_começar' + - Todas_as_Categorias +translation_of: Learn/CSS/First_steps +--- +<p> </p> + +<h3 id="Introdu.C3.A7.C3.A3o" name="Introdu.C3.A7.C3.A3o">Introdução</h3> + +<p>Este tutorial o introduz às CSS (Cascading Style Sheets - Folhas de Estilo em Cascata).</p> + +<p>Este tutorial o orienta nos recursos básicos de CSS com exemplos práticos que você pode experimentar sozinho em seu computador. Ele é dividido em duas partes:</p> + +<ul> + <li>A Parte I ilustra os recursos básicos das CSS que funcionam nos navegadores Mozilla e também na maioria dos navegadores modernos.</li> +</ul> + +<ul> + <li>A Parte II contém alguns exemplos de recursos especiais que funcionam no Mozilla, mas não necessariamente em outros ambientes.</li> +</ul> + +<p>Este tutorial é baseado na <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Specification</a>.</p> + +<h4 id="Quem_deve_ler_este_tutorial.3F" name="Quem_deve_ler_este_tutorial.3F">Quem deve ler este tutorial?</h4> + +<p>Este tutorial é direcionado para iniciantes em CSS, mas você também poderá usá-lo caso tenha alguma experiência em CSS.</p> + +<p>Se você é um iniciante em CSS, leia a Parte I deste tutorial para entender CSS e aprender a usá-lo. Em seguida, leia a Parte II para entender o escopo de CSS no Mozilla.</p> + +<p>Se você conhece CSS, poderá ignorar as partes desse tutorial que já conhece e ler apenas as partes que lhe interessam.</p> + +<p>Se você já tem experiência em CSS mas não no Mozilla, pode ir direto para a Parte II.</p> + +<h4 id="O_que_voc.C3.AA_precisa_antes_de_come.C3.A7ar.3F" name="O_que_voc.C3.AA_precisa_antes_de_come.C3.A7ar.3F">O que você precisa antes de começar?</h4> + +<p>Para melhor aproveitar este tutorial, você precisa de um editor de arquivos de texto e um navegador Mozilla (Firefox, Mozilla Suite ou Seamonkey). Você também deve saber como utilizá-los de um modo básico.</p> + +<p>Se não deseja editar arquivos, você pode apenas ler o tutorial e observar as imagens, mas este não é o melhor modo de aprendizado.</p> + +<p>Poucas partes deste tutorial podem requerer outro software Mozilla. Essas partes são opcionais. Você pode ignorar essas partes se não desejar fazer o download de outro software Mozilla.</p> + +<p><strong>Nota:</strong> As CSS oferece modos de se trabalhar com cores, de modo que partes deste tutorial dependem de cores. Você poderá utilizar essas partes facilmente somente se tiver um monitor colorido e uma visão colorida normal.</p> + +<h4 id="Como_utilizar_este_tutorial" name="Como_utilizar_este_tutorial">Como utilizar este tutorial</h4> + +<p>Para utilizar este tutorial, leia cuidadosamente as páginas e em seqüência. Se perder uma página, você poderá ter dificuldades para entender as páginas posteriores.</p> + +<p>Em cada página, utilize a seção<em>Informações</em> para entender como o CSS funciona. Utilize a seção<em>Ações</em> para tentar usar o CSS em seu próprio computador.</p> + +<p>Para testar seus conhecimentos, faça o teste ao final de cada página. As soluções para alguns testes são reveladas nas páginas posteriores no tutorial.</p> + +<p>Para se aprofundar em CSS, leia as informações nas caixas entituladas<em>Mais detalhes</em>. Utilize os links para localizar informações referentes às CSS.</p> + +<h3 id="Tutorial_Parte_I" name="Tutorial_Parte_I">Tutorial Parte I</h3> + +<p>Um guia passo-a-passo para CSS.</p> + +<ol> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/O_que_%c3%a9_CSS">O que é CSS</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Porque_usar_CSS">Porque usar CSS</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Como_o_CSS_trabalha">Como o CSS trabalha</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Cascata_e_heran%c3%a7a">Cascata e herança</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Seletores">Seletores</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/CSS_leg%c3%advel">CSS legível</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Estilos_de_texto">Estilos de texto</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Cor">Cor</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Conte%c3%bado">Conteúdo</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Listas">Listas</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Caixas">Caixas</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Disposi%c3%a7%c3%a3o">Disposição</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Tabelas">Tabelas</a></strong></li> + <li><strong><a href="/pt-PT/docs/Web/CSS/Como_começar/Mídia">Média</a></strong></li> +</ol> + +<h3 id="Tutorial_Parte_II" name="Tutorial_Parte_II">Tutorial Parte II</h3> + +<p>Exemplos que mostram o escopo da CSS no Mozilla.</p> + +<ol> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/JavaScript">JavaScript</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/XBL_bindings">XBL bindings</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Interfaces_de_usu%c3%a1rio_XUL">Interfaces de usuário XUL</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Gr%c3%a1ficos_SVG">Gráficos SVG</a></strong></li> + <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Dados_XML">Dados XML</a></strong></li> +</ol> + +<p>{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p> diff --git a/files/pt-pt/web/css/como_começar/interfaces_de_usuário_xul/index.html b/files/pt-pt/web/css/como_começar/interfaces_de_usuário_xul/index.html new file mode 100644 index 0000000000..46408abaa8 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/interfaces_de_usuário_xul/index.html @@ -0,0 +1,336 @@ +--- +title: Interfaces de usuário XUL +slug: Web/CSS/Como_começar/Interfaces_de_usuário_XUL +tags: + - 'CSS:Como_começar' +translation_of: Archive/Beginner_tutorials/XUL_user_interfaces +--- +<p>{{ PreviousNext("CSS:Como começar:XBL bindings", "CSS:Como começar:Gráficos SVG") }}</p> + +<p>Esta página ilustra a linguagem especializada do Mozilla para criação de interfaces de usuário.</p> + +<p>Você cria uma simples demonstração que roda no seu navegador Mozilla.</p> + +<h2 id="Informa.C3.A7.C3.A3o_Intefaces_de_usu.C3.A1rio" name="Informa.C3.A7.C3.A3o:_Intefaces_de_usu.C3.A1rio">Informação: Interfaces de usuário</h2> + +<p>Embora o HTML tenha algum suporte à interfaces de usuário, ele não suporta todas as características que você precisa para fazer uma aplicação autônoma.</p> + +<p>O Mozilla supera esta limitação providenciando uma linguagem especializada para criar interfaces de usuário: <em>XUL</em> (XML User-interface Language, usualmente pronunciada como "<em>zool</em>").</p> + +<p>Em XUL, muitas características comuns de interfaces de usuário podem ser construídas. Por exemplo, XUL proporciona janelas especializadas como diálogos, assim como barras de estado, menus, barras de ferramenta, e mesmo navegadores.</p> + +<p>Mais características especializadas podem ser construídas em partes usando XUL juntamente com outras tecnologias que você viu neste tutorial: estilo CSS, código JavaScript e XBL bindings.</p> + +<p>Como outras linguagens baseadas em XML, XUL usa folhas de estilo CSS.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Para maiores informações sobre interfaces de usuário XUL, veja a página <a href="/pt/XUL" title="pt/XUL">XUL</a> neste wiki.</td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o_Uma_demonstra.C3.A7.C3.A3o_XUL" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_XUL">Ação: Uma demonstração XUL</h2> + +<p>Crie um novo documento XUL de um simples arquivo de texto, <code>doc7.xul</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<?xml-stylesheet type="text/css" href="style7.css"?> + +<window + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + title="CSS Getting Started - XUL demonstration" + onload="init();"> + +<script type="application/x-javascript" src="script7.js"/> + +<label class="head-1" value="XUL demonstration"/> + +<vbox> + + <groupbox class="demo-group"> + <caption label="Day of week calculator"/> + <grid> + <columns> + <column/> + <column/> + </columns> + <rows> + <row> + <label class="text-prompt" value="Date:" + accesskey="D" control="date-text"/> + <textbox id="date-text" type="timed" + timeout="750" oncommand="refresh();"/> + </row> + <row> + <label value="Day:"/> + <hbox id="day-box"> + <label class="day" value="Sunday" disabled="true"/> + <label class="day" value="Monday" disabled="true"/> + <label class="day" value="Tuesday" disabled="true"/> + <label class="day" value="Wednesday" disabled="true"/> + <label class="day" value="Thursday" disabled="true"/> + <label class="day" value="Friday" disabled="true"/> + <label class="day" value="Saturday" disabled="true"/> + </hbox> + </row> + </rows> + </grid> + <hbox class="buttons"> + <button id="clear" label="Clear" accesskey="C" + oncommand="clearDate();"/> + <button id="today" label="Today" accesskey="T" + oncommand="setToday();"/> + </hbox> + </groupbox> + + <statusbar> + <statusbarpanel id="status"/> + </statusbar> + +</vbox> + +</window> +</pre> +</div> + +<p>Crie um novo arquivo CSS, <code>style7.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre>/*** XUL demonstration ***/ +window { + -moz-box-align: start; + background-color: -moz-dialog; + font: -moz-dialog; + padding: 2em; + } + +.head-1 { + font-weight: bold; + font-size: 200%; + padding-left: 5px; + } + + +/* the group box */ +.demo-group { + padding: 1em; + } + +.demo-group grid { + margin-bottom: 1em; + } + +.demo-group column { + margin-right: .5em; + } + +.demo-group row { + margin-bottom: .5em; + } + +.demo-group .buttons { + -moz-box-pack: end; + } + + +/* the day-of-week labels */ +.day { + margin-left: 1em; + } + +.day[disabled] { + color: #777; + } + +.day:first-child { + margin-left: 4px; + } + + +/* the left column labels */ +.text-prompt { + padding-top: .25em; + } + + +/* the date input box */ +#date-text { + max-width: 8em; + } + + +/* the status bar */ +statusbar { + width: 100%; + border: 1px inset -moz-dialog; + margin: 4px; + padding: 0px 4px; + } + +#status { + padding: 4px; + } + +#status[warning] { + color: red; + } +</pre> +</div> + +<p>Crie um novo arquivo de texto, <code>script7.js</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego todo o conteúdo daqui:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre>// XUL demonstration + +var dateBox, dayBox, currentDay, status; // elements + +// called by window onLoad +function init() { + dateBox = document.getElementById("date-text") + dayBox = document.getElementById("day-box") + status = document.getElementById("status") + setToday(); + } + +// called by Clear button +function clearDate() { + dateBox.value = "" + refresh() + } + +// called by Today button +function setToday() { + var d = new Date() + dateBox.value = (d.getMonth() + 1) + + "/" + d.getDate() + + "/" + d.getFullYear() + refresh() + } + +// called by Date textbox +function refresh() { + var d = dateBox.value + var theDate = null + + showStatus(null) + if (d != "") { + try { + var a = d.split("/") + var theDate = new Date(a[2], a[0] - 1, a[1]) + showStatus(theDate) + } + catch (ex) {} + } + setDay(theDate) + } + +// internal +function setDay(aDate) { + if (currentDay) currentDay.setAttribute("disabled", "true") + if (aDate == null) currentDay = null + else { + var d = aDate.getDay() + currentDay = dayBox.firstChild + while (d-- > 0) currentDay = currentDay.nextSibling + currentDay.removeAttribute("disabled") + } + dateBox.focus(); + } + +function showStatus(aDate) { + if (aDate == null) { + status.removeAttribute("warning") + status.setAttribute("label", "") + } + else if (aDate === false || isNaN(aDate.getTime())) { + status.setAttribute("warning", "true") + status.setAttribute("label", "Date is not valid") + } + else { + status.removeAttribute("warning") + status.setAttribute("label", aDate.toLocaleDateString()) + } + } +</pre> +</div> + +<p>Para ver o resultado exatamente como pretendido use o tema padrão do seu navegador. Se você usa um tema diferente, isto mode mudar alguns estilos da interface do usuário e a demonstração pode parecer estranha.</p> + +<p>Abra o documento no seu navegador Mozilla e use a interface.</p> + +<p>Este wiki não suporta XUL e JavaScript nas páginas, então não é possível fazer a demonstração aqui. Deve se parecer com isto:</p> + +<table style="background-color: threedface; border: 2px outset #3366bb; cursor: default; margin: .5em 0; padding: 1em; white-space: nowrap;"> + <tbody> + <tr> + <td> + <p style="font-size: 150%; font-weight: bold; margin: 0; padding: 0;">XUL demonstration</p> + + <div style="position: relative; border: 2px groove threedhighlight; margin-top: 1em;"> + <p style="float: left; margin: -1em 0 0 .5em; padding: 0; background-color: threedface;">Day of week calculator</p> + + <table style="background-color: threedface; margin: .5em; padding-right: .5em;"> + <tbody> + <tr> + <td style="padding-right: .5em;"><u>D</u>ate:</td> + <td style="background-color: white; border: 1px solid #000; width: 8em; float: left; cursor: text; padding: .15em .25em;">6/27/2005</td> + </tr> + <tr> + <td>Day:</td> + <td style="color: graytext;">Sunday <span style="color: #000000;">Monday</span> Tuesday Wednesday Thurdsay Friday Saturday</td> + </tr> + <tr> + <td></td> + <td> + <div style="float: right; margin-top: .5em;"> + <p><span style="border: 2px outset threedface; padding: .25em 1em;"><u>C</u>lear</span> <span style="border: 2px outset threedface; padding: .25em 1em;"><u>T</u>oday</span></p> + </div> + </td> + </tr> + </tbody> + </table> + </div> + + <div style="border: 1px inset threedface; margin-top: 1em;"> + <p style="margin: 0; padding: .25em .5em;">June 27, 2005</p> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Notas sobre esta demonstração:</p> + +<ul> + <li>O documento XUL é ligado à folha de estilo normalmente, e também ligado ao script.</li> + <li>O script não é importante nesta demonstração.</li> + <li>Muito do estilo que você vê é determinado pelo tema do seu navegador.</li> +</ul> + +<p>Examine a folha de estilo do documento para ver se você entende todas as regras dele. Se houver alguma regra que você não entende, comente-a e atualize o seu navegador para ver o efeito no documento.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Use a ferramenta DOM Inspector para examinar a caixa de texto Date. Ela é feita de outros elementos que são gerados por seu XBL binding. + <p>Descubra a <em>classe</em> do elemento <code>html:input</code>. Este é o elemento que atualmente recebe a entrada do usuário.</p> + + <p>Usando este conhecimento, adicione uma regra à sua folha de estilo que faça o fundo da caixa Date de um azul pálido quando ele tiver o foco do teclado (mas branco quando o foco do teclado estiver em outro lugar).</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Intefaces_de_usu%C3%A1rio" title="Talk:pt/CSS/Como_começar/Intefaces_de_usuário">Discussão</a>.</p> + +<p>Nesta demonstração, você viu que as formas retangulares padrão são comuns na maioria das interfaces de usuário. Mozilla também suporta uma linguagem especializada de gráficos para criar padrões, usando folhas de estilo CSS para especificar o estilo. A próxima página demonstra isto: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Gr%C3%A1ficos_SVG" title="pt/CSS/Como_começar/Gráficos_SVG">Gráficos SVG</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:XBL bindings", "CSS:Como começar:Gráficos SVG") }}</p> diff --git a/files/pt-pt/web/css/como_começar/javascript/index.html b/files/pt-pt/web/css/como_começar/javascript/index.html new file mode 100644 index 0000000000..5cb8faf696 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/javascript/index.html @@ -0,0 +1,159 @@ +--- +title: JavaScript +slug: Web/CSS/Como_começar/JavaScript +tags: + - 'CSS:Como_começar' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<p>{{ PreviousNext("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}</p> + +<p>Esta é a Parte II do tutorial. A Parte II contém alguns exemplos que mostram o escopo do CSS no Mozilla.</p> + +<p>Cada página na Parte II ilustra como o CSS interage com algumas outras tecnologias. Estas páginas não são desenhadas para ensinar como usar estas outras tecnologias. Vá para outros tutorias para aprender isto em detalhes.</p> + +<p>Em vez disso, estas páginas são desenhadas para ilustrar os muitos usos do CSS. Para usar estas páginas, você deve ter um conhecimento em CSS, mas você não precisa qualquer conhecimento em outras tecnologias.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_JavaScript" name="Informa.C3.A7.C3.A3o:_JavaScript">Informação: JavaScript</h2> + +<p>JavaScript é uma <em>linguagem de programação</em>. Quando você usa alguma aplicação Mozilla (por exemplo, seu naverador Mozilla) muito do código que o seu computador roda é escrito em JavaScript.</p> + +<p>JavaScript pode interagir com folhas de estilo, permitindo a você escrever programas que mudem o estilo do documento dinamicamente.</p> + +<p>Existem três maneiras para fazer isto:</p> + +<ul> + <li>Trabalhando com uma lista de folhas de estilo no documento — por exemplo: adicionando, removendo ou modificando uma folha de estilo.</li> + <li>Trabalhando com as regras de uma folha de estilo — por exemplo: adicionando, removendo ou modificando uma regra.</li> + <li>Trabalhando com um elemento individual no DOM — modificando seu estilo independentemente da folha de estilo do seu documento.</li> +</ul> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Para mais informações sobre JavaScript no Mozilla, veja a página <a href="/pt/JavaScript" title="pt/JavaScript">JavaScript</a> neste wiki.</td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_de_JavaScript" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_de_JavaScript">Ação: Uma demonstração de JavaScript</h2> + +<p>Criei um novo documento HTML, <code>doc5.html</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Como Começar Mozilla CSS - Demonstração JavaScript</TITLE> +<LINK rel="stylesheet" type="text/css" href="style5.css"> +<SCRIPT type="text/javascript" src="script5.js"></SCRIPT> +</HEAD> + +<BODY> +<H1>JavaScript de amostra</H1> + +<DIV id="square"></DIV> + +<BUTTON type="button" onclick="doDemo(this);">Clique Aqui</BUTTON> + +</BODY> +</HTML> +</pre> +</div> + +<p>Crie um novo arquivo CSS, <code>style5.css</code>. Copie e cole o conteúdo daqui:</p> + +<div style="width: 48em;"> +<pre>/*** Demonstração JavaScript ***/ +#square { + width: 20em; + height: 20em; + border: 2px inset gray; + margin-bottom: 1em; + } + +button { + padding: .5em 2em; + } +</pre> +</div> + +<p>Crie um novo arquivo de texo, <code>script5.js</code>. Copie e cole o conteúdo daqui:</p> + +<div style="width: 48em;"> +<pre>// Demonstração JavaScript +function doDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "#fa4" + button.setAttribute("disabled", "true") + setTimeout(clearDemo, 2000, button) + } + +function clearDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "transparent" + button.removeAttribute("disabled") + } +</pre> +</div> + +<p>Abra o documento no seu navegador e pressione o botão.</p> + +<p>Este wiki não suporta o JavaScript nas páginas, então não é possível mostrar a demonstração aqui. Deve se parecer como isto, antes e depois de você pressionar o botão:</p> + +<table> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><strong>Demonstração JavaScript</strong></p> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><strong>Demonstração JavaScript</strong></p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p>Notas sobre esta demonstração:</p> + +<ul> + <li>O documento HTML é ligado à folha de estilo normalmente, e também é ligado ao script.</li> + <li>O script trabalha com elementos individuais no DOM. Isto modifica o estilo dos quadrados diretamente, porém, modifica o estilo do botão indiretamente mudando um atributo.</li> + <li>Em JavaScript, <code>document.getElementById("square")</code> é similar em função ao seletor CSS <code>#square</code>.</li> + <li>Em JavaScript, <code>backgroundColor</code> corresponde à propriedade <code>background-color</code> do CSS.</li> + <li>Seu navegador tem uma regra construída das CSS para <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> que muda a aparência do botão quando ele está desabilitado.</li> +</ul> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Mude o script de modo que o quadrado salte para a direita em 20 em quando sua cor mudar, e salte para trás mais tarde.</td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/JavaScript" title="Talk:pt/CSS/Como_começar/JavaScript">Discussão</a>.</p> + +<p>Nesta demonstração, o documento HTML linka o script mesmo que somente o elemento button use o script. Mozilla extende o CSS para que possa ser ligado ao código JavaScript (e também conteúdo e outras folhas de estilo) para elementos selecionados. A próxima página demonstra isto: <strong><a href="/pt/CSS/Como_come%C3%A7ar/XBL_bindings" title="pt/CSS/Como_começar/XBL_bindings">XBL bindings</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}</p> diff --git a/files/pt-pt/web/css/como_começar/listas/index.html b/files/pt-pt/web/css/como_começar/listas/index.html new file mode 100644 index 0000000000..5d6ca00f01 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/listas/index.html @@ -0,0 +1,361 @@ +--- +title: Listas +slug: Web/CSS/Como_começar/Listas +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<p>{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}</p> + +<p>Esta página descreve como você pode usar as CSS para especificar a aparência das listas.</p> + +<p>Você cria um novo documento de amostra contendo listas, e uma nova folha de estilo que estiliza as listas.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Listas" name="Informa.C3.A7.C3.A3o:_Listas">Informação: Listas</h2> + +<p>Se você resolveu o desafio da última página (<strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong>), então você viu como você pode adicionar conteúdo antes de qualquer elemento para mostrar isto como o item de uma lista.</p> + +<p>CSS proporciona propriedades especiais que foram designadas para listas. Geralmente é mais conveniente usar estas propriedades sempre que você puder.</p> + +<p>Para especificar o estilo para uma lista, use a propriedade <code>list-style</code> para especificar o tipo de marcador.</p> + +<p>O seletor nas regras do seu CSS pode selecionar qualquer um dos elementos na sua lista de itens (por exemplo, <code>LI</code>), ou isto pode selecionar o elemento primário da lista (por exemplo, <code>UL</code>). Então os elementos da lista herdam o estilo.</p> + +<h3 id="Listas_n.C3.A3o_ordenadas" name="Listas_n.C3.A3o_ordenadas">Listas não ordenadas</h3> + +<p>Em uma lista <em>não ordenada</em>, cada item da lista é marcado da mesma maneira.</p> + +<p>CSS tem três tipos de marcador. Aqui está como seu navegador os mostra:</p> + +<ul style="padding-left: 2em;"> + <li style=""><code>disc</code></li> + <li style=""><code>circle</code></li> + <li style=""><code>square</code></li> +</ul> + +<p>Alternativamente, você pode especificar a URL de uma imagem.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Estas regras especificam diferentes marcadores para diferentes classes de itens da lista: + <div style="width: 30em;"> + <pre class="eval"> +li.open {list-style: circle;} +li.closed {list-style: disc;} +</pre> + </div> + + <p>Quando estas classes são usadas em uma lista, elas distinguem entre os itens aberto (open) e fechado (closed):</p> + + <div style="width: 30em;"> + <pre class="eval"> +<UL> + <LI class="open">Lorem ipsum</LI> + <LI class="closed">Dolor sit</LI> + <LI class="closed">Amet consectetuer</LI> + <LI class="open">Magna aliquam</LI> + <LI class="closed">Autem veleum</LI> +</UL> +</pre> + </div> + + <p>O resultado será parecido com:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul style="padding-right: 6em;"> + <li style="">Lorem ipsum</li> + <li style="">Dolor sit</li> + <li style="">Amet consectetuer</li> + <li style="">Magna aliquam</li> + <li style="">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="Listas_ordenadas" name="Listas_ordenadas">Listas ordenadas</h3> + +<p>Em uma lista <em>ordenada</em>, cada item da lista é marcado diferentemente para mostrar a posição em seqüência.</p> + +<p>Use a propriedade <code>list-style</code> para especificar o tipo de marcador:</p> + +<ul style="padding-left: 2em;"> + <li style=""><code>decimal</code></li> + <li style=""><code>lower-roman</code></li> + <li style=""><code>upper-roman</code></li> + <li style=""><code>lower-latin</code></li> + <li style=""><code>upper-latin</code></li> +</ul> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta regra especifica os elementos <small>OL</small> com a classe <code>info</code>, os itens são identificados com letras maiúsculas. + <div style="width: 30em;"> + <pre class="eval"> +ol.info {list-style: upper-latin;} +</pre> + </div> + + <p>Os elementos <small>LI</small> na lista herdam este estilo:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul> + <li style="padding-right: 6em;">Lorem ipsum</li> + <li style="padding-right: 6em;">Dolor sit</li> + <li style="padding-right: 6em;">Amet consectetuer</li> + <li style="padding-right: 6em;">Magna aliquam</li> + <li style="padding-right: 6em;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>A propriedade <code>list-style</code> é uma propriedade "abreviada". Em folhas de estilo complexas você pode preferir usar propriedades separadas para configurar valores separados. Para detalhes sobre estas propriedades separadas, e mais detalhes sobre como as CSS especificam listas, veja <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">Lists</a> na CSS Specification. + <p>Se você está usando a linguagem de marcação como o HTML que proporciona tags convecionais para listas não ordenadas (<small>UL</small>) e ordenadas (<small>OL</small>), então é bom praticar usando tags da maneira que foi explicado. Contudo, você pode usar as CSS para fazer <small>UL</small> mostrar ordenado e <small>OL</small> para mostrar não ordenado se você precisar.</p> + + <p>Os navegadores diferem no modo como implementam os estilos das listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Contadores" name="Contadores">Contadores</h3> + +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> +<p><strong>Note: </strong> Alguns navegadores não suportam contadores.</p> +</div> + +<p>Você pode usar contadores para numerar quaisquer elementos, não somente itens listados. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.</p> + +<p>Para especificar uma numeração, você precisa de um <em>contador</em> com um nome que você especifica.</p> + +<p>Em alguns elementos antes da contagem começar, re-inicie o contador com a propriedade <code>counter-reset</code> e o nome do seu contador. O principal dos elementos que você estiver contando é um bom lugar para isto, mas você pode usar qualquer elemento que esteja antes da lista de itens.</p> + +<p>Em cada elemento que o contador incrementar, use a propriedade <code>counter-increment</code> e o nome do seu contador.</p> + +<p>Para mostrar seu contador, adicione <code>:before</code> ou <code>:after</code> ao seletor e use a propriedade <code>content</code> (como fez na página anterior, <strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong>).</p> + +<p>No valor da propriedade <code>content</code>, especifique <code>counter()</code> com o nome do seu contador. Opcionalmente especifique um tipo. Os tipos são como na seção passada em <strong>Listas ordenadas</strong>.</p> + +<p>Normalmente o elemento que mostra o contador também incrementa isto.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta regra inicializa um contador para cada elemento <small>H3</small> com a classe <code>numbered</code>: + <div style="width: 30em;"> + <pre class="eval"> +h3.numbered {counter-reset: mynum;} +</pre> + </div> + + <p>Esta regra mostra e incrementa o contador para cada elemento <small>P</small> com a classe <code>numbered</code>:</p> + + <div style="width: 30em;"> + <pre class="eval"> +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> + </div> + + <p>O resultado se parece com isto:</p> + + <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> + <tbody> + <tr> + <td><strong>Cabeçalho</strong> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Você não pode usar contadores a menos que você saiba que todos os que lêem o seu documento têm um navegador que os suporta. + <p>Se você puder usar contadores, eles tem a vantagem de que você pode estilizar os contadores separadamente da lista de itens. No exemplo anterior, os contadores estão em negrito mas a os itens da lista não.</p> + + <p>Você pode também usar contadores em meios mais complexos — por exemplo, para numerar seções, cabeçalhos, sub-cabeçalhos e parágrafos em documentos formais. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> em CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Listas_denominadas" name="A.C3.A7.C3.A3o:_Listas_denominadas">Ação: Listas denominadas</h2> + +<p>Crie um novo documento HTML, <code>doc2.html</code>. Copie e cole o conteúdo daqui, tendo certeza de que você rola o mouse para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Documento de amostra 2</TITLE> +<LINK rel="stylesheet" type="text/css" href="style2.css"> +</HEAD> +<BODY> + +<H3 id="oceans">Os oceanos</H3> +<UL> +<LI>Ártico</LI> +<LI>Atlântico</LI> +<LI>Pacífico</LI> +<LI>Índico</LI> +<LI>Antártico</LI> +</UL> + +<H3 class="numbered">Numbered paragraphs</H3> +<P class="numbered">Lorem ipsum</P> +<P class="numbered">Dolor sit</P> +<P class="numbered">Amet consectetuer</P> +<P class="numbered">Magna aliquam</P> +<P class="numbered">Autem veleum</P> + +</BODY> +</HTML> +</pre> +</div> + +<p>Faça uma nova folha de estilo, <code>style2.css</code>. Copie e cole o conteúdo daqui:</p> + +<div style="width: 48em;"> +<pre class="eval">/* parágrafos numerados */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> +</div> + +<p>Se a disposição e o comentário não estiver ao seu gosto, mude-os.</p> + +<p>Abra o documento no seu navegador. Se o seu navegador suporta contadores, você verá algo semelhante ao exemplo abaixo. Se o seu navegador não suporta contadores, então você não verá os números (e provavelmente nem sequer os dois pontos (:)):</p> + +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Os oceanos</p> + + <ul style=""> + <li>Ártico</li> + <li>Atlântico</li> + <li>Pacífico</li> + <li>Índico</li> + <li>Antártico</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Parágrafos numerados</p> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 60%;"> + <caption>Desafios</caption> + <tbody> + <tr> + <td>Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais Romanos de i até v: + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Os oceanos</p> + + <ul style=""> + <li>Ártico</li> + <li>Atlântico</li> + <li>Pacífico</li> + <li>Índico</li> + <li>Antártico</li> + </ul> + </td> + </tr> + </tbody> + </table> + + <p><br> + Se o seu navegador suporta contadores, mude sua folha de estilo para identificar o cabeçalho com letras maiúsculas em parênteses como isto:</p> + + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) Os oceanos</p> + + <p><strong>. . .</strong></p> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Parágrafos numerados</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Listas" title="Talk:pt/CSS/Como_começar/Listas">Discussão</a>.</p> + +<p>Quando seu navegador exibe seu documento de amostra, cria espaços ao redor dos elementos quando eles são exibidos na página.</p> + +<p>A próxima página descreve como você pode usar as CSS para trabalhar com formas subjacentes de elementos: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Caixas" title="pt/CSS/Como_começar/Caixas">Caixas</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}</p> diff --git a/files/pt-pt/web/css/como_começar/mídia/index.html b/files/pt-pt/web/css/como_começar/mídia/index.html new file mode 100644 index 0000000000..0038962474 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/mídia/index.html @@ -0,0 +1,433 @@ +--- +title: Média +slug: Web/CSS/Como_começar/Mídia +tags: + - 'CSS:Como_começar' +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +<p>{{ PreviousNext("CSS:Como começar:Tabelas", "CSS:Como começar:JavaScript") }}</p> + +<p>Muitas das páginas neste tutorial focalizaram nas propriedades e nos valores das CSS que você pode usar para especificar o modo de exibir o documento.</p> + +<p>Esta página mostra novamente a proposta e a estrutura das folhas de estilo CSS.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_M.C3.ADdia" name="Informa.C3.A7.C3.A3o:_M.C3.ADdia">Informação: Média</h2> + +<p>A proposta das CSS é especificar como os documentos são apresentados ao usuário. A apresentação pode tomar mais de uma forma.</p> + +<p>Por exemplo, você provavelmente está lendo esta página em um dispositivo de exibição. Mas você pode também querer projetá-lo em uma tela para uma grande audiência, ou imprimi-la. Estas diferentes mídias podem ter diferentes características. CSS proporciona maneiras para apresenter um documento diferentemente em diferentes mídias.</p> + +<p>Para especificar regras específicas para um tipo de mídia, use <code>@media</code> seguido do tipo de mídia e de chaves para incluir as regras</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Um documento em um site na web tem uma área de navegação para permitir ao usuário mover em torno do site. + <p>Na linguagem de marcação, o elemento principal da área de navegação tem o id <code>nav-area</code>.</p> + + <p>Quando o documento é impresso a área de navegação não tem propósito, então a folha de estilo remove-a completamente:</p> + + <div style="width: 30em;"> + <pre class="eval"> +@media print { + #nav-area {display: none;} + } +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Alguns tipos de mídia comuns são:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td><code>screen</code></td> + <td>Exposição na tela do computador</td> + </tr> + <tr> + <td><code>print</code></td> + <td>Mídias paginadas</td> + </tr> + <tr> + <td style="padding-right: 1em;"><code>projection</code></td> + <td>Exposição projetada</td> + </tr> + <tr> + <td><code>all</code></td> + <td>Todas as mídias (o padrão)</td> + </tr> + </tbody> +</table> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Existem outras maneiras para especificar o tipo de mídia com uma série de regras. + <p>A linguagem de marcação do documento permite o tipo de mídia tornar-se específico quando a folha de estilo é ligada ao documento. Por exemplo, em HTML você pode opcionalmente especificar o tipo de mídia com o atributo <code>media</code> na tag <code>LINK</code>.</p> + + <p>Em CSS você pode usar <code>@import</code> no começo da folha de estilo para importar outras folhas de estilo de uma URL, opcionalmente especificando o tipo de mídia.</p> + + <p>Usando estas técnicas você pode separar regras de estilo para diferentes tipos de mídia em diferentes aquivos. Esta é algumas vezes uma maneira útil para estruturar sua folha de estilos.</p> + + <p>Para detalhes completos sobre tipos de mídia, veja <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> em CSS Specification.</p> + + <p>Existem mais exemplos da propriedade <code>display</code> em uma página posterior neste tutorial: <a href="/pt/CSS/Como_começar/Dados_XML" title="pt/CSS/Como_começar/Dados_XML">Dados XML</a>.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Imprimindo" name="Imprimindo">Impressão</h3> + +<p>CSS possui suporte específico para impressão e para mídias paginadas em geral.</p> + +<p>Uma regra <code>@page</code> pode configurar as margens da página. Para imprimir frente e verso, você pode especificar as margens separadamente para <code>@page:left</code> e <code>@page:right</code>.</p> + +<p>Para mídias impressas, você normalmente usa unidades de comprimento apropriadas em polegadas (<code>in</code>) e pontos (<code>pt</code> = 1/72 polegadas), ou centímetros (<code>cm</code>) e milímetros (<code>mm</code>). É igualmente apropriado o uso de ems (<code>em</code>) para combinar tamanhos de fontes, e porcentagens (<code>%</code>).</p> + +<p>Você pode controlar como o conteúdo do documento quebra através de limites de página, usando as propriedades <code>page-break-before</code>, <code>page-break-after</code> e <code>page-break-inside</code>.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Exemplos</caption> + <tbody> + <tr> + <td>Esta regra configura as margens da página para uma polegada em todos os quatro lados: + <div style="width: 30em;"> + <pre class="eval"> +@page {margin: 1in;} +</pre> + </div> + + <p>Esta regra assegura que todos os elementos <small>H1</small> comecem em uma nova página:</p> + + <div style="width: 30em;"> + <pre class="eval"> +h1 {page-break-before: always;} +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Para detalhes completos sobre o suporte das CSS para páginas de mídia, veja <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> em CSS Specification. + <p>Como outras características das CSS, imprimir depende do seu navegador e de suas configurações. Por exemplo, seu navegador Mozilla proporciona por padrão margens, cabeçalhos e rodapés quando é impresso. Quando outros usuários imprimem seu documento, você provavelmente não poderá predizer o navegador e as configurações que eles usarão, então você provavelmente não poderá controlar os resultados completamente.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Interfaces_de_usu.C3.A1rio" name="Interfaces_de_usu.C3.A1rio">Interfaces do utilizador</h3> + +<p>CSS tem algumas propriedades especiais para dispositivos que suportem a interface de usuário, como a tela do computador. Isto faz a aparência do documento mudar dinamicamente como o usuário trabalha com a interface.</p> + +<p>Não existe um tipo de mídia especial para dispositivos com interfaces de usuários.</p> + +<p>Existem cinco seletores especiais:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Seletor</strong></td> + <td><strong>Seleciona</strong></td> + </tr> + <tr> + <td><code>E:hover</code></td> + <td>Qualquer elemento E que tenha um ponteiro sobre ele</td> + </tr> + <tr> + <td><code>E:focus</code></td> + <td>Qualquer elemento E que tenha um foco no teclado</td> + </tr> + <tr> + <td><code>E:active</code></td> + <td>O elemento E que é envolvido na corrente ação do usuário</td> + </tr> + <tr> + <td><code>E:link</code></td> + <td>Qualquer elemento E que seja um hiperlink para uma URL que o usuário <em>não visitou</em> recentemente</td> + </tr> + <tr> + <td><code>E:visited</code></td> + <td>Qualquer elemento E que seja um hiperlink para uma URL que o usuário <em>visitou</em> recentemente</td> + </tr> + </tbody> +</table> + +<p>A propriedade <code>cursor</code> especifica a forma do ponteiro: Algumas das formas comuns são como segue. Coloque seu mouse sobre os itens nesta lista para ver as formas comuns dos ponteiros no seu navegador:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Seletor</strong></td> + <td><strong>Seleciona</strong></td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td>Indica um link</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td>Indica que o programa não pode aceitar a entrada</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td>Indica que o programa está trabalhando, mas ainda pode aceitar a entrada</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td>O padrão (usualmente uma flecha)</td> + </tr> + </tbody> +</table> + +<p><br> + Uma propriedade <code>outline</code> cria um contorno que é normalmente usado para indicar foco do teclado. Estes valores são similares aos da propriedade <code>border</code>, exceto que você não pode especificar lados individuais.</p> + +<p>Algumas outras características das interfaces de usuário são implementadas usando atributos, de uma maneira normal. Por exemplo, um elemento que está desabilitado ou somente leitura tem o atributo <code>disabled</code> ou o atributo <code>readonly</code>. Seletores podem especificar estes atributos como qualquer outros atributos, usando colchetes: <code>{{ mediawiki.external('disabled') }}</code> ou <code>{{ mediawiki.external('readonly') }}</code>.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Estas regras especificam estilos para um botão que muda dinamicamente como a interação do usuário com isso: + <div style="width: 30em;"> + <pre> +.green-button { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.green-button[disabled] { + background-color:#cdc; + color:#777; + } + +.green-button:active { + border-style: inset; + } +</pre> + </div> + + <p>Este wiki não suporta uma interface de usuário na página, então estes botões não são "clicáveis". Aqui estão algumas imagens estáticas para ilustrar a idéia:</p> + + <table style="background-color: #ffffff; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table> + <tbody> + <tr> + <td><span style="background-color: #ccddcc; border: 2px outset #cceecc; color: #777777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Clique Aqui</span></td> + <td><span style="background-color: #cceecc; border: 2px outset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Clique Aqui</span></td> + <td><span style="background-color: #cceecc; border: 2px inset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Clique Aqui</span></td> + </tr> + <tr style="line-height: 25%;"> + <td> </td> + </tr> + <tr style="font-style: italic;"> + <td>desativado</td> + <td>normal</td> + <td>ativo</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + + <p>Um botão plenamente funcional também tem um contorno escuro em toda a sua volta quando isto é o padrão, e um contorno pontilhado na face do botão quando ele é focado pelo teclado. Isto pode também ter um efeito quando o ponteiro está sobre ele.</p> + </td> + </tr> + </tbody> +</table> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Para mais informações sobre interfaces de usuário em CSS, veja <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> em CSS Specification. + <p>Existe um exemplo da linguagem de marcação Mozilla para interfaces de usuário, XUL, na segunda parte deste tutorial.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Imprimindo_um_documento" name="A.C3.A7.C3.A3o:_Imprimindo_um_documento">Ação: Imprimir um documento</h2> + +<p>Crie um novo documento HTML, <code>doc4.html</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Impressão de amostra</TITLE> +<LINK rel="stylesheet" type="text/css" href="style4.css"></strong> +</HEAD> + +<BODY> +<H1>Seção A</H1> +<P>Esta é a primeira seção...</P> + +<H1>Seção B</H1> +<P>Esta é a segunda seção...</P> + +<DIV id="print-head"> +Dirigir para mídias paginadas +</DIV> + +<DIV id="print-foot"> +Página: +</DIV> + +</BODY> +</HTML> +</pre> +</div> + +<p>Crie uma nova folha de estilo, <code>style4.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre>/*** Impressão de amostra ***/ + +/* Padrão para a tela */ +#print-head, +#print-foot { + display: none; + } + +/* Somente impressão */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#print-head { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#print-foot { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#print-foot:after { + content: counter(page); + counter-increment: page; + } + +} /* Fim de somente impressão */ +</pre> +</div> + +<p>Quando você exibe este documento em seu navegador, ele usa o estilo padrão do navegador.</p> + +<p>Quando você imprime (ou prevê a impressão) do documento, a folha de estilo coloca cada seção em uma página separada, e adiciona um cabeçalho e um rodapé para cada página. Se o seu navegador suportar contadores, isto adiciona um número na página no seu rodapé.</p> + +<table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Cabeçalho</div> + + <div style="font-size: 150%; font-weight: bold;">Secção A</div> + + <div style="font-size: 75%;">Esta é a primeira secção...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Página: 1</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Cabeçalho</div> + + <div style="font-size: 150%; font-weight: bold;">Secção B</div> + + <div style="font-size: 75%;">Esta é a segunda secção...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Página: 2</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Desafios</caption> + <tbody> + <tr> + <td>Mova o estilo específico de impressão para um arquivo CSS separado. + <p>Use as ligações nesta página para ler a CSS Specification. Ache detalhes de como importar o novo arquivo CSS específico para impressão em sua folha de estilo.</p> + + <p>Faça os cabeçalhos serem azuis quando o ponteiro do mouse estiver sobre eles.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/M%C3%ADdia" title="Talk:pt/CSS/Como_começar/Mídia">Discussão</a>.</p> + +<p>Até agora, todas as regras de estilo neste tutorial foram especificadas em arquivos. As regras e seus volumes são fixos. A próxima página descreve como você muda as regras dinamicamente usando uma linguagem de programação: <strong><a href="/pt/CSS/Como_come%C3%A7ar/JavaScript" title="pt/CSS/Como_começar/JavaScript">JavaScript</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Tabelas", "CSS:Como começar:JavaScript") }}</p> diff --git a/files/pt-pt/web/css/como_começar/o_que_é_css/index.html b/files/pt-pt/web/css/como_começar/o_que_é_css/index.html new file mode 100644 index 0000000000..a87487b3a3 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/o_que_é_css/index.html @@ -0,0 +1,134 @@ +--- +title: O que é CSS +slug: Web/CSS/Como_começar/O_que_é_CSS +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{Next("CSS:Como começar:Porque usar CSS")}}</p> + +<p>Esta página explica o que é CSS. Você cria um documento de amostra para que possa trabalhar com as páginas seguintes.</p> + +<h3 id="Informa.C3.A7.C3.B5es:_O_que_.C3.A9_CSS.3F" name="Informa.C3.A7.C3.B5es:_O_que_.C3.A9_CSS.3F">Informações: O que é CSS?</h3> + +<p>CSS é uma linguagem que especifica como os documentos são apresentados aos usuários.</p> + +<p>Um <em>documento</em> é uma coleção de informações estruturadas utilizando uma <em>linguagem de marcação</em>.</p> + +<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>Exemplos</caption> + <tbody> + <tr> + <td> + <ul> + <li>Uma página da Web como esta é um documento.<br> + As informações que você vê em uma página da Web, geralmente, é estruturada utilizando a linguagem de marcação HTML (HyperText Markup Language - Linguagem de Marcação de Hiper Texto).</li> + </ul> + + <ul> + <li>Uma caixa de diálogo em um aplicativo Mozilla é um documento.<br> + A interface com o usuário controla o que aparece em uma caixa de diálogo Mozilla, que é estruturada utilizando a linguagem de marcação XUL (XML User-interface Language - Linguagem de Interface do Usuário XML).</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>Neste tutorial, os quadros entitulados <strong>Mais detalhes</strong> como este logo abaixo, contêm informações opcionais. Se você está com pressa para progredir no tutorial, você pode ignorar esses quadros, retornando para lê-los posteriormente. Caso contrário, leia-os ao encontrá-los, e talvez siga os links para aprender mais.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td> + <p>Um documento não é igual a um arquivo. Ele pode ou não ser armazenado em um arquivo.</p> + + <p>Por exemplo, o documento que você está lendo agora não está armazendo em um arquivo. Quando seu navegador da Web solicita esta página, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. Entretanto, neste tutorial você vai trabalhar com documentos que estão armazenados em arquivos.</p> + + <p>Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste Web site — por exemplo:</p> + + <table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="/pt/HTML" title="pt/HTML">HTML</a></td> + <td>para páginas da Web</td> + </tr> + <tr> + <td><a href="/pt/XML" title="pt/XML">XML</a></td> + <td>para documentos estruturados em geral</td> + </tr> + <tr> + <td><a href="/pt/SVG" title="pt/SVG">SVG</a></td> + <td>para gráficos</td> + </tr> + <tr> + <td><a href="/pt/XUL" title="pt/XUL">XUL</a></td> + <td>para interfaces com o usuário no Mozilla</td> + </tr> + </tbody> + </table> + + <p>Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.</p> + </td> + </tr> + </tbody> +</table> + +<p><em>Apresentar</em> um documento a um usuário significa convertê-lo para uma forma que humanos possam usá-lo. O Mozilla é projetado para apresentar documentos visualmente — por exemplo, em uma tela de computador, projetor ou impressora.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>CSS não serve apenas para navegadores e apresentação visual. Em uma terminologia formal de CSS, o programa que apresenta um documento ao usuário é chamado de <em>agente usuário</em> (UA - User Agent). Um navegador é apenas um tipo de UA. Entretanto, na Parte I deste tutorial você irá trabalhar apenas com CSS em um navegador. + <p>Para mais definições formais de terminologia sobre CSS, consulte <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> na CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="A.C3.A7.C3.A3o:_Criando_um_documento" name="A.C3.A7.C3.A3o:_Criando_um_documento">Ação: Criando um documento</h3> + +<p>Utilize seu computador para criar um novo diretório e um novo arquivo de texto dentro dele. O arquivo irá conter seu documento.</p> + +<p>Copie e cole o código HTML mostrado abaixo. Salve o arquivo utilizando o nome <code>doc1.html</code></p> + +<div style="width: 40em;"> +<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<html> + <head> + <title>Documento de amostra</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> +</div> + +<p>Em seu navegador, abra uma aba ou uma nova janela, e abra o arquivo do diretório.</p> + +<p>Você deve ver o texto com as iniciais em negrito, conforme abaixo:</p> + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>O que você vê em seu navegador pode não ser exatamente como o exibido aqui, por causa das configurações de seu navegador e deste wiki. Se houver diferenças na fonte, espaçamento ou cor, não há importância.</p> + +<h4 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h4> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/O_que_%C3%A9_CSS" title="Talk:pt/CSS/Como_começar/O_que_é_CSS">Discussão</a>.</p> + +<p>Seu documento ainda não utiliza CSS. Na página a seguir você utilizará CSS para especificar o estilo: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Porque_usar_CSS" title="pt/CSS/Como_começar/Porque_usar_CSS">Porque usar CSS</a></strong></p> + +<p>{{Next("CSS:Como começar:Porque usar CSS")}}</p> diff --git a/files/pt-pt/web/css/como_começar/o_que_é_css_question_/index.html b/files/pt-pt/web/css/como_começar/o_que_é_css_question_/index.html new file mode 100644 index 0000000000..d386670557 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/o_que_é_css_question_/index.html @@ -0,0 +1,94 @@ +--- +title: O que é CSS? +slug: Web/CSS/Como_começar/O_que_é_CSS? +tags: + - 'CSS:Como_começar' +--- +<p> +</p><p>This page explains what CSS is. +You create a simple document that you will work with on the following pages. +</p> +<h3 id="Information:_What_is_CSS.3F" name="Information:_What_is_CSS.3F"> Information: What is CSS? </h3> +<p>CSS is a language for specifying how documents are presented to users. +</p><p>A <i>document</i> is a collection of information that is structured using a <i>markup language</i>. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Examples +</caption><tbody><tr> +<td> +<ul><li>A web page like this one is a document.<br>The information that you see in a web page is usually structured using the markup language HTML (HyperText Markup Language). +</li></ul> +<ul><li>A dialog in a Mozilla application is a document.<br>The user interface controls that you see in a Mozilla dialog are structured using the markup language XUL (XML User-interface Language). +</li></ul> +</td></tr></tbody></table> +<p>In this tutorial, boxes captioned <b>More details</b> like the one below contain optional information. +If you are in a hurry to progress with the tutorial then you could skip these boxes, perhaps returning to read them later. Otherwise read them when you come to them, and perhaps follow the links to learn more. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>More details +</caption><tbody><tr> +<td> +<p>A document is not the same as a file. It might or might not be stored in a file. +</p><p>For example, the document that you are reading now is not stored in a file. When your web browser requests this page, the server queries a database and generates the document, gathering parts of the document from many files. However, in this tutorial you will work with documents that are stored in files. +</p><p>For more information about documents and markup languages, see other parts of this web site—for example: +</p> +<table style="background-color: inherit; margin-left: 2em;"> +<tbody><tr> +<td><a href="pt/HTML">HTML</a></td><td>for web pages +</td></tr> +<tr> +<td><a href="pt/XML">XML</a></td><td>for structured documents in general +</td></tr> +<tr> +<td><a href="pt/SVG">SVG</a></td><td>for graphics +</td></tr> +<tr> +<td><a href="pt/XUL">XUL</a></td><td>for user interfaces in Mozilla +</td></tr></tbody></table> +<p>In Part II of this tutorial you will see examples of these markup languages. +</p> +</td></tr></tbody></table> +<p><i>Presenting</i> a document to a user means converting it into a form that humans can make use of. Mozilla is designed to present documents visually—for example, on a computer screen, projector or printer. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>More details +</caption><tbody><tr> +<td> CSS is not just for browsers, and not just for visual presentation. In formal CSS terminology, the program that presents a document to a user is called a <i>user agent</i> (UA). A browser is just one kind of UA. However, in Part I of this tutorial you will only work with CSS in a browser. +<p>For some formal definitions of terminology relating to CSS, see <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> in the CSS Specification. +</p> +</td></tr></tbody></table> +<h3 id="Action:_Creating_a_document" name="Action:_Creating_a_document"> Action: Creating a document </h3> +<p>Use your computer to create a new directory and a new text file there. +The file will contain your document. +</p><p>Copy and paste the HTML shown below. Save the file using the name <code>doc1.html</code> +</p> +<div style="width: 40em;"><pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<html> + <head> + <title>Sample document</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre></div> +<p>In your browser, open a new tab or a new window, and open the file there. +</p><p>You should see the text with the initial letters bold, like this: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets +</td></tr></tbody></table> +<p>What you see in your browser might not look exactly the same as this, because of settings in your browser and in this wiki. If there are some differences in the font, spacing and colors that you see, they are not important. +</p> +<h4 id="What_next.3F" name="What_next.3F"> What next? </h4> +<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page. +</p><p>Your document does not yet use CSS. +On the next page you use CSS to specify its style: +<b><a href="pt/CSS/Getting_Started/Why_use_CSS%3f">Why use CSS?</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/What_is_CSS", "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Czym_jest_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS" } ) }} diff --git a/files/pt-pt/web/css/como_começar/porque_usar_css/index.html b/files/pt-pt/web/css/como_começar/porque_usar_css/index.html new file mode 100644 index 0000000000..fad0fc8ea8 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/porque_usar_css/index.html @@ -0,0 +1,110 @@ +--- +title: Porque usar CSS +slug: Web/CSS/Como_começar/Porque_usar_CSS +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ PreviousNext("CSS:Como começar:O que é CSS", "CSS:Como começar:Como o CSS trabalha") }}</p> + +<p>Esta página explica porque os documentos usam CSS. Você usa CSS para adicionar uma folha de estilo ao seu documento de amostra.</p> + +<h2 id="Informa.C3.A7.C3.B5es:_Por_que_usar_CSS.3F" name="Informa.C3.A7.C3.B5es:_Por_que_usar_CSS.3F">Informações: Por que usar CSS?</h2> + +<p>CSS ajuda a manter o conteúdo das informações de um documento separado dos detalhes de como exibí-lo. Os detalhes de como exibir o documento são conhecidos como <em>estilo</em>. Você mantém o estilo separado do conteúdo, de modo que você pode:</p> + +<ul> + <li>Evitar duplicação</li> + <li>Tornar a manutenção mais fácil</li> + <li>Utilizar o conteúdo com diferentes estilos para diferentes propósitos</li> +</ul> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Seu Web site pode ter milhares de páginas similares. Utilizando CSS, você armazena as informações em arquivos comuns que todas as páginas compartilham. + <p>Quando um usuário exibe uma página da Web, o navegador do usuário carrega as informações de estilo junto com o conteúdo da página.</p> + + <p>Quando um usuário imprime uma página da Web, você fornece informações de estilo diferentes que tornam a página impressa mais fácil de ler.</p> + </td> + </tr> + </tbody> +</table> + +<p>Geralmente, com CSS, você utiliza a linguagem de marcação para descrever o conteúdo das informações do documento, não seu estilo. Você utiliza CSS para especificar o estilo, não o conteúdo. (Posteriormente neste tutorial, você verá algumas exceções deste método.)</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Uma linguagem de marcação, como o HTML, também fornece alguns modos de especificar o estilo. + <p>Por exemplo, em HTML, você pode usar uma tag <code><b></code> para tornar o texto negrito, e você pode especificar a cor do segundo plano de uma página na tag <code><body></code>.</p> + + <p>Ao utilizar CSS, você normalmente evita utilizar esses recursos da linguagem de marcação para que todas as informações de estilo de seu documento estejam em um só lugar.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Criando_uma_folha_de_estilo" name="A.C3.A7.C3.A3o:_Criando_uma_folha_de_estilo">Ação: Criando uma folha de estilo</h2> + +<p>Crie outro arquivo de texto no mesmo diretório do anterior. Este arquivo será sua folha de estilo. Nomeie-o como: <code>style1.css</code></p> + +<p>Em seu arquivo CSS, copie e cole esta única linha, então salve o arquivo:</p> + +<div style="width: 40em;"> +<pre class="eval">strong {color: red;} +</pre> +</div> + +<h4 id="Ligando_seu_documento_.C3.A0_sua_folha_de_estilo" name="Ligando_seu_documento_.C3.A0_sua_folha_de_estilo">Ligando seu documento à sua folha de estilo</h4> + +<p>Para ligar seu documento com sua folha de estilo, edite seu aquivo HTML. Adicione a linha mostrada aqui em negrito:</p> + +<div style="width: 40em; color: gray;"> +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + <HEAD> + <TITLE>Documento de amostra</TITLE> + <strong style="color: black;"><LINK rel="stylesheet" type="text/css" href="style1.css"></strong> + </HEAD> + <BODY> + <P> + <STRONG>C</STRONG>ascading + <STRONG>S</STRONG>tyle + <STRONG>S</STRONG>heets + </P> + </BODY> +</HTML> +</pre> +</div> + +<p>Salve o arquivo e atualize a tela do seu navegador. A folha de estilo fez as letras iniciais aparecerem em vermelha, como isto:</p> + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption>Desafio</caption> + <tbody> + <tr> + <td>Além do vermelho, CSS permite algumas outras cores com nomes. + <p>Sem olhar um referência, ache mais cinco nomes de cores que trabalham em sua folha de estilo.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Porque_usar_CSS" title="Talk:pt/CSS/Como_começar/Porque_usar_CSS">Discussão</a>.</p> + +<p>Agora você tem um documento de amostra ligado a uma folha de estilo separada, você está pronto para ler mais sobre como seu navegador combina-os quando exibe o documento na tela: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Como_o_CSS_trabalha" title="pt/CSS/Como_começar/Como_o_CSS_trabalha">Como o CSS trabalha</a></strong>.</p> + +<p>{{ PreviousNext("CSS:Como começar:O que é CSS", "CSS:Como começar:Como o CSS trabalha") }}</p> diff --git a/files/pt-pt/web/css/como_começar/seletores/index.html b/files/pt-pt/web/css/como_começar/seletores/index.html new file mode 100644 index 0000000000..250eb58d3f --- /dev/null +++ b/files/pt-pt/web/css/como_começar/seletores/index.html @@ -0,0 +1,207 @@ +--- +title: Seletores +slug: Web/CSS/Como_começar/Seletores +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<p>{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}</p> + +<p>Esta página explica como você pode aplicar estilos seletivamente, e como diferentes tipos de seletor têm propriedades diferentes.</p> + +<p>Você adiciona alguns atributos às tags do seu documento de amostra, e usa estes atributos em sua folha de estilo de amostra.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Seletores" name="Informa.C3.A7.C3.A3o:_Seletores">Informação: Seletores</h2> + +<p>CSS tem sua própria terminologia para descrever a linguagem CSS. Anteriormente neste tutorial, você criou uma linha em sua folha de estilo com esta:</p> + +<div style="width: 30em;"> +<pre>strong {color: red;} +</pre> +</div> + +<p>Na terminologia das CSS, esta linha inteira é uma <em>regra</em>. Esta regra começa com <code>STRONG</code>, que é um <em>seletor</em>. Isto seleciona que elementos no DOM a regra se aplicará.</p> + +<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>A parte interior das chaves é a <em>declaração</em>. + <p>A palavra-chave <code>color</code> é uma <em>propriedade</em>, e <code>red</code> é um <em>valor</em>.</p> + + <p>O ponto-e-vírgula depois do par propriedade-valor separa isto de outros pares propriedade-valor na mesma descrição.</p> + + <p>Este tutorial refere-se a um seletor <code>STRONG</code>, como um seletor de <em>tag</em>. A Especificação das CSS refere-se a isto como um seletor de <em>tipo</em>.</p> + </td> + </tr> + </tbody> +</table> + +<p>Esta página do tutorial explica mais sobre os seletores que você pode usar nas regras das CSS.</p> + +<p>Em adição aos nomes de tags, você pode usar valores de atributo nos seletores. Isto permite a você que as regras tornem-se mais específicas.</p> + +<p>Dois atributos tem estado especial para as CSS. Eles são <code>class</code> e <code>id</code>.</p> + +<p>Use o atributo <code>class</code> em uma tag para nomear a tag com um nome de classe. Isto é, o nome que você escolher para a classe.</p> + +<p>Na sua folha de estilo, digite um registro completo (período) antes do nome de classe quando você usá-lo em um seletor.</p> + +<p>Use o atributo <code>id</code> em uma tag para nomear a tag com um nome de id. Isto é, o nome que você escolher para o id. O nome do id deve ser único no documento.</p> + +<p>Na sua folha de estilo, digite um sinal de número (#) antes do id quando você usá-lo em um seletor.</p> + +<table style="border: 1px solid #36b; background-color: #ffe; padding: 1em;"> + <caption>Exemplos</caption> + <tbody> + <tr> + <td>Este tag HTML tem ambos os atributos <code>class</code> e <code>id</code>. + <div style="width: 30em;"> + <pre> +<P class="key" id="principal"> +</pre> + </div> + + <p>O id, <code>principal</code>, deve ser o único no documento, mas outras tags no documento podem ter o mesmo nome de classe, <code>key</code>.</p> + + <p>Em uma folha de estilo CSS, esta regra faz todos os elementos da classe <code>key</code> verdes. (Eles podem não ser todos elementos <small>P</small>.)</p> + + <div style="width: 30em;"> + <pre> +.key {color: green;} +</pre> + </div> + + <p>Esta regra faz um elemento com o id <code>principal</code> negrito:</p> + + <div style="width: 30em;"> + <pre> +#principal {font-weight: bolder;} +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Se mais de uma regra se aplicar a um elemento e especificar a mesma propriedade, então CSS dará prioridade para a regra que tiver o seletor mais específico. Um seletor id é mais específíco que um seletor classe, que por sua vez é mais específico que um seletor tag.</p> + +<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Você pode combinar seletores para fazer um seletor mais específico. + <p>Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que tem o nome de classe <code>key</code>. O seletor <code>p.key</code> seleciona somente os elementos P que tiverem o nome de classe <code>key</code>.</p> + + <p>Você não está restrito aos dois atributos especiais, <code>class</code> e <code>id</code>. Você pode especificar outros atributos igualando entre colchetes. Por exemplo, o seletor <code>{{ mediawiki.external('type=button') }}</code> seleciona todos os elementos que tiverem um atributo <code>type</code> com o valor <code>button</code>.</p> + + <p>Uma página posterior deste tutorial (<a href="/pt/CSS/Como_come%C3%A7ar/Tabelas" title="pt/CSS/Como_começar/Tabelas">Tabelas</a>) tem informações sobre seletores complexos baseados em parentescos.</p> + + <p>Para um informação completa sobre seletores, veja <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> na CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<p>Se sua folha de estilo tiver regras conflitantes e elas estiverem igualmente especificadas, então CSS dará prioridade para a regra que foi especificada por último na folha de estilo.</p> + +<p>Quando você tiver um problema com regras conflitantes, tente resolvê-lo fazendo uma das regras mais especificada, então ela terá prioridade. Se você não puder fazer isto, tente mover uma das regras para mais perto do fim da folha de estilo, então esta terá prioridade.</p> + +<h3 id="A.C3.A7.C3.A3o:_Usando_seletores_de_classe_e_id" name="A.C3.A7.C3.A3o:_Usando_seletores_de_classe_e_id">Ação: Usando seletores de classe e id</h3> + +<p>Edite seu arquivo HTML, e duplique o paragrafo copiando e colando-o. Então adicione os atributos de id e classe na primeira cópia, e um id na segunda cópia como mostrado abaixo. Um alternativa é copiar e colar o arquivo inteiro novamente:</p> + +<div style="width: 48em; color: gray;"> +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + <HEAD> + <TITLE>Documento de amostra</TITLE> + <LINK rel="stylesheet" type="text/css" href="style1.css"> + </HEAD> + <BODY> + <P <strong style="color: black;">id="first"</strong>> + <STRONG <strong style="color: black;">class="carrot"</strong>>C</STRONG>ascading + <STRONG <strong style="color: black;">class="spinach"</strong>>S</STRONG>tyle + <STRONG <strong style="color: black;">class="spinach"</strong>>S</STRONG>heets + </P> + <strong style="color: black;"><P id="second"> + <STRONG>C</STRONG>ascading + <STRONG>S</STRONG>tyle + <STRONG>S</STRONG>heets + </P></strong> + </BODY> +</HTML> +</pre> +</div> + +<p>Agora edite seu arquivo CSS. Substitua os componentes inteiros com:</p> + +<div style="width: 40em;"> +<pre>strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +#first {font-style: italic;} +</pre> +</div> + +<p><br> + Atualize seu navegador para ver o resultado:</p> + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p><br> + Você pode tentar re-dispor as linhas no seu arquivo CSS para mostrar que a ordem não muda o efeito.</p> + +<p>Os seletores de classe <code>.carrot</code> e <code>.spinach</code> tem prioridade sobre o seletor de tag <code>STRONG</code>.</p> + +<p>O seletor id <code>#first</code> tem prioridade sobre a classe o os seletores de tag.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption>Desafios</caption> + <tbody> + <tr> + <td>Sem mudar seu arquivo HTML, adicione uma única regra para seu arquivo CSS deixando todas as letras iniciais da mesma cor que estão agora, mas fazendo todo o segundo parágrafo aparecer em azul: + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>Agora mude a regra que você acabou de adicionar (sem mudar mais nenhuma coisa), para fazer o primeiro parágrafo em azul também:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Seletores" title="Talk:pt/CSS/Como_começar/Seletores">Discussão</a>.</p> + +<p>Sua folha de estilo de amostra está começando a parecer densa e complicada. A próxima página descreve caminhos para fazer o CSS mais fácil de ler: <strong><a href="/pt/CSS/Como_come%C3%A7ar/CSS_leg%C3%ADvel" title="pt/CSS/Como_começar/CSS_legível">CSS legível</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}</p> diff --git a/files/pt-pt/web/css/como_começar/tabelas/index.html b/files/pt-pt/web/css/como_começar/tabelas/index.html new file mode 100644 index 0000000000..c8daefb048 --- /dev/null +++ b/files/pt-pt/web/css/como_começar/tabelas/index.html @@ -0,0 +1,654 @@ +--- +title: Tabelas +slug: Web/CSS/Como_começar/Tabelas +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<p>{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}</p> + +<p>Esta página descreve seletores mais avançados, e algumas maneiras específicas para estilizar tabelas.</p> + +<p>Você cria um novo documento de amostra contendo uma tabela, e uma folha de estilo para isto.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Mais_seletores" name="Informa.C3.A7.C3.A3o:_Mais_seletores">Informação: Mais seletores</h2> + +<p>CSS possui algumas maneiras para selecionar elementos baseadas nas relações entre eles. Você pode usá-las para fazer seletores que sejam mais específicos.</p> + +<p>Aqui está um sumário de seletores baseados em relações:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Seletor</strong></td> + <td><strong>Seleciona</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Qualquer elemento E que seja <em>descendente</em> de um elemento A (isso é: um subitem, ou um subitem de um sub item, <em>etc</em>.)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Qualquer elemento E que seja subitem de um elemento A</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Qualque elemento E que seja o primeiro subitem do seu principal</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Qualquer elemento E que seja o próximo <em>irmão</em> de um elemento B (isso é: o próximo subitem do mesmo principal)</td> + </tr> + </tbody> +</table> + +<p>Você pode combinar isto para expressar relações complexas.</p> + +<p>Você pode também usar o símbolo <code>*</code> (asterisco) para dizer "qualquer elemento".</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Uma tabela HTML tem um atributo <code>id</code>, mas suas linhas e células não tem identificadores individuais: + <div style="width: 30em;"> + <pre class="eval"> +<TABLE id="data-table-1"> +... +<TR> +<TD>Prefix</TD> +<TD>0001</TD> +<TD>default</TD> +</TR> +... +</pre> + </div> + + <p>Estas regras fazem a primeira célula em cada linha em negrito, e a segunda célula em cada linha monoespaçada. Elas afetam somente uma tabela específica no documento:</p> + + <div style="width: 45em;"> + <ol> + <li>data-table-1 td:first-child {font-weight: bolder;}</li> + <li>data-table-1 td:first-child + td {font-family: monospace;}</li> + </ol> + </div> + + <p>O resultado é algo como isto:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table style="width: 18em; margin-right: 2em;"> + <tbody> + <tr> + <td><strong>Prefix</strong></td> + <td><code>0001</code></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>De maneira usual, se você faz um seletor mais específico então você aumenta sua prioridade. + <p>Usando estas técnicas, você evita precisar especificar atributos <code>class</code> ou <code>id</code> em muitas tags no seu documento. Em vez disso, CSS faz o trabalho.</p> + + <p>Em grandes projetos onde a velocidade é importante, você pode fazer suas folhas de estilo mais eficientes evitando regras complexas que dependem da relação entre elementos.</p> + + <p>Para detalhes completos sobre seletores, veja <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> em CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Informa.C3.A7.C3.A3o:_Tabelas" name="Informa.C3.A7.C3.A3o:_Tabelas">Informação: Tabelas</h2> + +<p>Uma tabela é um arranjo de informação em uma grade retangular. Algumas tabelas podem ser complexas, e para tabelas complexas diferentes navegadores podem exibir diferentes resultados.</p> + +<p>Quando você desenha seu documento, use e a tabela para expressar as relações entre as peças da informação. Então não importará se os diferentes navegadores apresentarem a informação de maneiras levemente diferentes, pois o significado ainda pode ser compreendido.</p> + +<p>Não use tabelas de maneiras não usuais para produzir disposições visuais particulares. As técnicas na página anterior deste tutorial (<a href="/pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="pt/CSS/Como_começar/Disposição">Disposição</a>) são melhores para isto.</p> + +<h4 id="Estrutura_da_tabela" name="Estrutura_da_tabela">Estrutura da tabela</h4> + +<p>Em uma tabela, cada peça de informação é exibida em uma <em>célula</em>.</p> + +<p>As células em uma linha horizontal na página compõem uma <em>linha</em>.</p> + +<p>Em algumas tabelas, as linhas podem ser agrupadas. Um grupo especial de linhas no começo da tabela é o <em>cabeçalho</em>. Um grupo especial de linhas no final da tabela é o <em>rodapé</em>. As linhas principais na tabela são o <em>corpo</em>, e elas podem também estar em grupos.</p> + +<p>As células em uma linha vertical na página compõem uma <em>coluna</em>, mas as colunas têm usos limitados nas tabelas das CSS.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>A tabela de seletores próxima ao topo desta página tem dez células em cinco linhas. + <p>A primeira linha é o cabeçalho. As outras quatro linhas são o corpo. Não há um rodapé.</p> + + <p>Ela tem duas colunas.</p> + </td> + </tr> + </tbody> +</table> + +<p>Este tutorial somente cobre tabelas simples, onde os resultados são razoavelmente previsíveis. Em uma tabela simples, toda célula ocupa somente uma linha e coluna. Você pode usar CSS para tabelas complexas onde células <em>expandam</em> (extendam-se sobre) mais do que uma linha ou coluna, mas tabelas como estas estão fora do escopo deste tutorial básico.</p> + +<h3 id="Bordas" name="Bordas">Bordas</h3> + +<p>Células não têm margens.</p> + +<p>Células têm bordas e enchimento. Por padrão, as bordas são separadas pelo valor da propriedade <code>border-spacing</code> da tabela. Você pode também remover o espaçamento completamente configurando a propriedade <code>border-collapse</code> da tabela para <code>collapse</code>.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Aqui estão três tabelas. + <p>A tabela da esquerda tem espaçamento de borda 0.5 em. A tabela do centro tem espaçamento da borda zero. A tabela da direita tem bordas unidas:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Paus</td> + <td style="border: 1px solid #c00; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Ouros</td> + <td style="border: 1px solid #c00; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Paus</td> + <td style="border: 1px solid #c00; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Ouros</td> + <td style="border: 1px solid #c00; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Paus</td> + <td style="border: 1px solid #c00; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Ouros</td> + <td style="border: 1px solid #c00; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="Subt.C3.ADtulos" name="Subt.C3.ADtulos">Subtítulos</h3> + +<p>Um <em>subtítulo</em> é uma etiqueta que se aplica à tabela inteira. Por padrão, isto é mostrado no topo da tabela.</p> + +<p>Para mover isto para o fim, configure a propriedade <code>caption-side</code> para <code>bottom</code>. A propriedade é herdada, então alternativamente você pode configurar isto na tabela em outro elemento ascendente.</p> + +<p>Para estilizar o texto do subtítulo, use qualquer das propriedades usuais para texto.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta tabela tem um subtítulo no fim: + <div style="width: 30em;"> + <pre class="eval"> +#demo-table > caption { + caption-side: bottom; + font-style: italic; + text-align: right; + } +</pre> + </div> + + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table> + <caption>Naipes</caption> + <tbody> + <tr> + <td> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid gray; text-align: center;">Paus</td> + <td style="border: 1px solid gray; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid gray; text-align: center;">Ouros</td> + <td style="border: 1px solid gray; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="C.C3.A9lulas_vazias" name="C.C3.A9lulas_vazias">Células vazias</h3> + +<p>Você pode exibir células vazias (isto é, suas bordas e fundos) especificando <code>empty-cells: show;</code> para o elemento da tabela.</p> + +<p>Você pode escondê-los especificando <code>empty-cells:hide;</code>. Então, se um elemento principal tem um fundo e o chama, isto mostra através da célula vazia.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Estas tabelas tem um fundo de verde pálido. Suas células tem um fundo de cinza pálido e bordas de cinza escuro. + <p>Na esquerda da tabela, a célula vazia é mostrada. Na direita, é escondida:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Ouros</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Ouros</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Para informações detalhasdas sobre tabelas, veja <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> em CSS Specification. + <p>A informação lá vai além do que há neste tutorial, mas não cobre as diferenças entre os navegadores que podem afetar tabelas complexas.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Estilizando_uma_tabela" name="A.C3.A7.C3.A3o:_Estilizando_uma_tabela">Ação: Estilizando uma tabela</h2> + +<p>Faça um novo documento HTML, <code>doc3.html</code>. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre><DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Documento de amostra 3</TITLE> +<LINK rel="stylesheet" type="text/css" href="style3.css"> +</HEAD> +<BODY> + +<TABLE id="demo-table"> +<CAPTION>Oceanos</CAPTION> + +<THEAD> +<TR> +<TH></TH> +<TH>Área</TH> +<TH>Profundidade Média</TH> +</TR> +<TR> +<TH></TH> +<TH>milhões de km<SUP>2</SUP></TH> +<TH>m</TH> +</TR> +</THEAD> + +<TBODY> +<TR> +<TH>Ártico</TH> +<TD>13,000</TD> +<TD>1,200</TD> +</TR> +<TR> +<TH>Atlântico</TH> +<TD>87,000</TD> +<TD>3,900</TD> +</TR> +<TR> +<TH>Pacífico</TH> +<TD>180,000</TD> +<TD>4,000</TD> +</TR> +<TR> +<TH>Índico</TH> +<TD>75,000</TD> +<TD>3,900</TD> +</TR> +<TR> +<TH>Antártico</TH> +<TD>20,000</TD> +<TD>4,500</TD> +</TR> +</TBODY> + +<TFOOT> +<TR> +<TH>Total</TH> +<TD>361,000</TD> +<TD></TD> +</TR> +<TR> +<TH>Média</TH> +<TD>72,000</TD> +<TD>3,800</TD> +</TR> +</TFOOT> + +</TABLE> + +</BODY> +</HTML> +</pre> +</div> + +<p>Crie uma nova folha de estilo, <code>style3.css</code>. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre>/*** Estilo para doc3.html (Tabelas) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; + } + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; + } + + +/* basic shared rules */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; + } + +#demo-table th { + font-weight: bold; + padding-left: .5em; + } + + +/* header */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; + } + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; + } + +/* fix size of superscript */ +#demo-table sup { + font-size: 75%; + } + +/* body */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; + } + +#demo-table tbody th:after { + content: ":"; + } + + +/* footer */ +#demo-table tfoot { + font-weight: bold; + } + +#demo-table tfoot th { + color: blue; + } + +#demo-table tfoot th:after { + content: ":"; + } + +#demo-table > tfoot td { + background-color: #cee; + } + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; + } +</pre> +</div> + +<p>Abra o documento no seu navegador. Deve ser muito similar a este:</p> + +<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceanos</p> + + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Área</th> + <th style="padding-left: .5em; padding-right: .5em;">Profundidade média</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">milhões de km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Ártico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlântico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacífico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Índico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Antártico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Média:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Compare estas regras em sua folha de estilo com a tabela exibida, para se assegurar de que entende o efeito de cada regra. Se você achou uma regra com a qual não está seguro sobre, descomente-a e atualize o navegador para ver o que acontece.</p> + +<p>Aqui estão algumas notas sobre esta tabela:</p> + +<ul> + <li>O subtítulo encontra-se fora da borda da tabela.</li> + <li>Se você tiver um tamanho mínimo do ponto ajustado nas Opções, isto pode afetar o sobre-escrito no km<sup>2</sup>.</li> + <li>Existem três células vazias. Duas delas permitem que o fundo da tabela apareça através. A terceira tem um fundo e uma borda no topo.</li> + <li>As colunas são adicionadas pela folha de estilos.</li> +</ul> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption>Desafios</caption> + <tbody> + <tr> + <td>Mude a folha de estilo para fazer a tabela parecer com isto: + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Área</th> + <th style="padding-left: .5em; padding-right: .5em;">Profundidade média</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">milhões de km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Ártico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlântico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacífico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Índico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Antártico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Média:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceanos</p> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor combribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Tabelas" title="Talk:pt/CSS/Como_começar/Tabelas">Discussão</a>.</p> + +<p>Esta é a última página deste tutorial que foca as propriedades e valores das CSS. Para um sumário completo de propriedades e valores, veja <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> em CSS Specification.</p> + +<p>A próxima página mostra novamente o propósito e a estrutura das folhas de estilo CSS: <strong><a href="/pt/CSS/Como_come%C3%A7ar/M%C3%ADdia" title="pt/CSS/Como_começar/Mídia">Mídia</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}</p> diff --git a/files/pt-pt/web/css/consulta_de_mídia/index.html b/files/pt-pt/web/css/consulta_de_mídia/index.html new file mode 100644 index 0000000000..2bf4f5470c --- /dev/null +++ b/files/pt-pt/web/css/consulta_de_mídia/index.html @@ -0,0 +1,436 @@ +--- +title: Utilizar consultas de média +slug: Web/CSS/Consulta_de_mídia +tags: + - Avançado + - CSS + - Desenho Adaptável + - Guía + - Media +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<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/consultas_de_media/index.html b/files/pt-pt/web/css/consultas_de_media/index.html new file mode 100644 index 0000000000..f9bbd7b94e --- /dev/null +++ b/files/pt-pt/web/css/consultas_de_media/index.html @@ -0,0 +1,110 @@ +--- +title: Consultas de média +slug: Web/CSS/Consultas_de_media +tags: + - CSS + - Consultas de Média + - Consultas de média CSS3 + - Desenho Adaptável + - Referencia + - Visão Geral +translation_of: Web/CSS/Media_Queries +--- +<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/content/index.html b/files/pt-pt/web/css/content/index.html new file mode 100644 index 0000000000..cc627821d8 --- /dev/null +++ b/files/pt-pt/web/css/content/index.html @@ -0,0 +1,18 @@ +--- +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 new file mode 100644 index 0000000000..43197dba12 --- /dev/null +++ b/files/pt-pt/web/css/counter-increment/index.html @@ -0,0 +1,66 @@ +--- +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 new file mode 100644 index 0000000000..709c4f8112 --- /dev/null +++ b/files/pt-pt/web/css/counter-reset/index.html @@ -0,0 +1,69 @@ +--- +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_background_and_borders/index.html b/files/pt-pt/web/css/css_background_and_borders/index.html new file mode 100644 index 0000000000..87b26bd607 --- /dev/null +++ b/files/pt-pt/web/css/css_background_and_borders/index.html @@ -0,0 +1,154 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_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_background_and_borders/múltiplos_planos_de_fundo/index.html b/files/pt-pt/web/css/css_background_and_borders/múltiplos_planos_de_fundo/index.html new file mode 100644 index 0000000000..dbd858e82c --- /dev/null +++ b/files/pt-pt/web/css/css_background_and_borders/múltiplos_planos_de_fundo/index.html @@ -0,0 +1,57 @@ +--- +title: Utilização de múltiplos fundos em CSS +slug: Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +<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 new file mode 100644 index 0000000000..cb4dd91343 --- /dev/null +++ b/files/pt-pt/web/css/css_box_model/index.html @@ -0,0 +1,167 @@ +--- +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/introducao_modelo_caixa_css/index.html b/files/pt-pt/web/css/css_box_model/introducao_modelo_caixa_css/index.html new file mode 100644 index 0000000000..388a72ab39 --- /dev/null +++ b/files/pt-pt/web/css/css_box_model/introducao_modelo_caixa_css/index.html @@ -0,0 +1,69 @@ +--- +title: Introdução ao modelo de Caixa de CSS +slug: Web/CSS/CSS_Box_Model/Introducao_modelo_caixa_CSS +tags: + - CSS + - Modelo de Caixa de CSS + - Principiante + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +<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/ferramenta_selecao_cor/index.html b/files/pt-pt/web/css/css_colors/ferramenta_selecao_cor/index.html new file mode 100644 index 0000000000..696f2afd11 --- /dev/null +++ b/files/pt-pt/web/css/css_colors/ferramenta_selecao_cor/index.html @@ -0,0 +1,3243 @@ +--- +title: Ferramenta de seleção de cor +slug: Web/CSS/CSS_Colors/Ferramenta_selecao_cor +tags: + - CSS + - Ferramentas + - Seleção de cor + - cor +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +<div style="display: none;"> +<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 new file mode 100644 index 0000000000..6a356077b5 --- /dev/null +++ b/files/pt-pt/web/css/css_columns/index.html @@ -0,0 +1,240 @@ +--- +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/alinhamento_de_itens_num_recipiente_flex/index.html b/files/pt-pt/web/css/css_flexible_box_layout/alinhamento_de_itens_num_recipiente_flex/index.html new file mode 100644 index 0000000000..4e1d10f5de --- /dev/null +++ b/files/pt-pt/web/css/css_flexible_box_layout/alinhamento_de_itens_num_recipiente_flex/index.html @@ -0,0 +1,215 @@ +--- +title: Alinhamento de Itens num Recipiente Flex +slug: Web/CSS/CSS_Flexible_Box_Layout/alinhamento_de_itens_num_recipiente_flex +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 +--- +<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/casos_de_utilizacao_tipicos_do_flexbox/index.html b/files/pt-pt/web/css/css_flexible_box_layout/casos_de_utilizacao_tipicos_do_flexbox/index.html new file mode 100644 index 0000000000..cd89209634 --- /dev/null +++ b/files/pt-pt/web/css/css_flexible_box_layout/casos_de_utilizacao_tipicos_do_flexbox/index.html @@ -0,0 +1,143 @@ +--- +title: Casos de utilização típicos do Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/casos_de_utilizacao_tipicos_do_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 +--- +<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_flexible_box_layout/index.html b/files/pt-pt/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..ec5c17b62e --- /dev/null +++ b/files/pt-pt/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,155 @@ +--- +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/ordenacao_dos_itens_flex/index.html b/files/pt-pt/web/css/css_flexible_box_layout/ordenacao_dos_itens_flex/index.html new file mode 100644 index 0000000000..b2bc22df09 --- /dev/null +++ b/files/pt-pt/web/css/css_flexible_box_layout/ordenacao_dos_itens_flex/index.html @@ -0,0 +1,140 @@ +--- +title: Ordenação do itens Flex +slug: Web/CSS/CSS_Flexible_Box_Layout/ordenacao_dos_itens_flex +tags: + - Acessibilidade + - CSS + - Flex + - Guía + - direção + - flexbox + - ordem + - reverter +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +<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/relação_do_flexbox_com_outros_métodos_de_layout/index.html b/files/pt-pt/web/css/css_flexible_box_layout/relação_do_flexbox_com_outros_métodos_de_layout/index.html new file mode 100644 index 0000000000..83c570f33e --- /dev/null +++ b/files/pt-pt/web/css/css_flexible_box_layout/relação_do_flexbox_com_outros_métodos_de_layout/index.html @@ -0,0 +1,125 @@ +--- +title: Relação do flexbox com outros métodos de layout +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/relação_do_flexbox_com_outros_métodos_de_layout +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 +--- +<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_tipos/index.html b/files/pt-pt/web/css/css_tipos/index.html new file mode 100644 index 0000000000..ea7049f5a4 --- /dev/null +++ b/files/pt-pt/web/css/css_tipos/index.html @@ -0,0 +1,65 @@ +--- +title: CSS - Tipos de datos básicos +slug: Web/CSS/CSS_Tipos +tags: + - CSS + - Referencia + - Resumo + - Sinopse + - Tipos de Dados de CSS +translation_of: Web/CSS/CSS_Types +--- +<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 new file mode 100644 index 0000000000..152fe3b344 --- /dev/null +++ b/files/pt-pt/web/css/cursor/index.html @@ -0,0 +1,159 @@ +--- +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 new file mode 100644 index 0000000000..a89e7a1b6c --- /dev/null +++ b/files/pt-pt/web/css/direction/index.html @@ -0,0 +1,46 @@ +--- +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 new file mode 100644 index 0000000000..43db53135e --- /dev/null +++ b/files/pt-pt/web/css/display/index.html @@ -0,0 +1,707 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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" style="display: none;"> </div> + +<div id="SL_shadow_translator" style="display: none;"> +<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" style="display: none;"> +<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 new file mode 100644 index 0000000000..62f8ddf017 --- /dev/null +++ b/files/pt-pt/web/css/float/index.html @@ -0,0 +1,111 @@ +--- +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/folhas_de_estilo_alternativas/index.html b/files/pt-pt/web/css/folhas_de_estilo_alternativas/index.html new file mode 100644 index 0000000000..250bb3eef9 --- /dev/null +++ b/files/pt-pt/web/css/folhas_de_estilo_alternativas/index.html @@ -0,0 +1,23 @@ +--- +title: Folhas de estilo alternativas +slug: Web/CSS/Folhas_de_estilo_alternativas +translation_of: Web/CSS/Alternative_style_sheets +--- +<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/font-size-adjust/index.html b/files/pt-pt/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..bc7b060a83 --- /dev/null +++ b/files/pt-pt/web/css/font-size-adjust/index.html @@ -0,0 +1,75 @@ +--- +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 new file mode 100644 index 0000000000..e3d0ca9fa8 --- /dev/null +++ b/files/pt-pt/web/css/font-size/index.html @@ -0,0 +1,83 @@ +--- +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 new file mode 100644 index 0000000000..2cab7696d8 --- /dev/null +++ b/files/pt-pt/web/css/font-smooth/index.html @@ -0,0 +1,85 @@ +--- +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 new file mode 100644 index 0000000000..55bd8de94f --- /dev/null +++ b/files/pt-pt/web/css/font-style/index.html @@ -0,0 +1,40 @@ +--- +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 new file mode 100644 index 0000000000..8879e55501 --- /dev/null +++ b/files/pt-pt/web/css/font-weight/index.html @@ -0,0 +1,119 @@ +--- +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 new file mode 100644 index 0000000000..e212941e9f --- /dev/null +++ b/files/pt-pt/web/css/font/index.html @@ -0,0 +1,140 @@ +--- +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/grid-gap/index.html b/files/pt-pt/web/css/grid-gap/index.html new file mode 100644 index 0000000000..fef808f4cb --- /dev/null +++ b/files/pt-pt/web/css/grid-gap/index.html @@ -0,0 +1,177 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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 new file mode 100644 index 0000000000..e3b2b71c2c --- /dev/null +++ b/files/pt-pt/web/css/height/index.html @@ -0,0 +1,86 @@ +--- +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 new file mode 100644 index 0000000000..9f7a65ea5f --- /dev/null +++ b/files/pt-pt/web/css/index.html @@ -0,0 +1,105 @@ +--- +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 new file mode 100644 index 0000000000..8bfcd334e5 --- /dev/null +++ b/files/pt-pt/web/css/inherit/index.html @@ -0,0 +1,7 @@ +--- +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/layout_de_grelha_css/index.html b/files/pt-pt/web/css/layout_de_grelha_css/index.html new file mode 100644 index 0000000000..db142d2dde --- /dev/null +++ b/files/pt-pt/web/css/layout_de_grelha_css/index.html @@ -0,0 +1,250 @@ +--- +title: CSS - Layout de Grade +slug: Web/CSS/layout_de_grelha_css +tags: + - CSS + - Grades + - Layout + - Layout de Grade + - Referencia + - Resumo +translation_of: Web/CSS/CSS_Grid_Layout +--- +<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/list-style/index.html b/files/pt-pt/web/css/list-style/index.html new file mode 100644 index 0000000000..3a6cf6d36d --- /dev/null +++ b/files/pt-pt/web/css/list-style/index.html @@ -0,0 +1,79 @@ +--- +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/média_paginada/index.html b/files/pt-pt/web/css/média_paginada/index.html new file mode 100644 index 0000000000..49df122031 --- /dev/null +++ b/files/pt-pt/web/css/média_paginada/index.html @@ -0,0 +1,19 @@ +--- +title: Média paginada +slug: Web/CSS/Média_paginada +tags: + - CSS + - CSS3 + - Quebras de Página +translation_of: Web/CSS/Paged_Media +--- +<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/pseudoclasses/index.html b/files/pt-pt/web/css/pseudoclasses/index.html new file mode 100644 index 0000000000..d65bef9e51 --- /dev/null +++ b/files/pt-pt/web/css/pseudoclasses/index.html @@ -0,0 +1,165 @@ +--- +title: Pseudoclasses +slug: Web/CSS/Pseudoclasses +tags: + - CSS + - Pseudoclasse + - Referencia + - Resumo + - Seletores + - Sinopse +translation_of: Web/CSS/Pseudo-classes +--- +<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/pseudoelementos/index.html b/files/pt-pt/web/css/pseudoelementos/index.html new file mode 100644 index 0000000000..780d17c378 --- /dev/null +++ b/files/pt-pt/web/css/pseudoelementos/index.html @@ -0,0 +1,104 @@ +--- +title: Pseudoelementos +slug: Web/CSS/Pseudoelementos +tags: + - CSS + - Pseudoelemento + - Referencia + - Resumo + - Seletores + - Sinopse +translation_of: Web/CSS/Pseudo-elements +--- +<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/referência_css/index.html b/files/pt-pt/web/css/referência_css/index.html new file mode 100644 index 0000000000..1be349b1c9 --- /dev/null +++ b/files/pt-pt/web/css/referência_css/index.html @@ -0,0 +1,171 @@ +--- +title: CSS - Referência +slug: Web/CSS/Referência_CSS +tags: + - CSS + - Referencia + - Resumo + - Sinopse + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +<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 new file mode 100644 index 0000000000..47f2e968f9 --- /dev/null +++ b/files/pt-pt/web/css/replaced_element/index.html @@ -0,0 +1,23 @@ +--- +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 new file mode 100644 index 0000000000..8bfb4a4bbc --- /dev/null +++ b/files/pt-pt/web/css/shorthand_properties/index.html @@ -0,0 +1,143 @@ +--- +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 new file mode 100644 index 0000000000..3e2f304073 --- /dev/null +++ b/files/pt-pt/web/css/top/index.html @@ -0,0 +1,54 @@ +--- +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 new file mode 100644 index 0000000000..8dc2ee3951 --- /dev/null +++ b/files/pt-pt/web/css/transform/index.html @@ -0,0 +1,238 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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/usando_transformações_css/index.html b/files/pt-pt/web/css/usando_transformações_css/index.html new file mode 100644 index 0000000000..62190c37dc --- /dev/null +++ b/files/pt-pt/web/css/usando_transformações_css/index.html @@ -0,0 +1,34 @@ +--- +title: CSS/Usando_transformações_CSS +slug: Web/CSS/Usando_transformações_CSS +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +<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/width/index.html b/files/pt-pt/web/css/width/index.html new file mode 100644 index 0000000000..f865e76bed --- /dev/null +++ b/files/pt-pt/web/css/width/index.html @@ -0,0 +1,86 @@ +--- +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 new file mode 100644 index 0000000000..0ff1013362 --- /dev/null +++ b/files/pt-pt/web/css/z-index/index.html @@ -0,0 +1,41 @@ +--- +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" } ) }} |