diff options
Diffstat (limited to 'files/pt-pt/web/css')
39 files changed, 0 insertions, 4417 deletions
diff --git a/files/pt-pt/web/css/_colon_after/index.html b/files/pt-pt/web/css/_doublecolon_after/index.html index f59fbcd5dd..f59fbcd5dd 100644 --- a/files/pt-pt/web/css/_colon_after/index.html +++ b/files/pt-pt/web/css/_doublecolon_after/index.html diff --git a/files/pt-pt/web/css/_colon_before/index.html b/files/pt-pt/web/css/_doublecolon_before/index.html index 5572a818ef..5572a818ef 100644 --- a/files/pt-pt/web/css/_colon_before/index.html +++ b/files/pt-pt/web/css/_doublecolon_before/index.html diff --git a/files/pt-pt/web/css/folhas_de_estilo_alternativas/index.html b/files/pt-pt/web/css/alternative_style_sheets/index.html index 250bb3eef9..250bb3eef9 100644 --- a/files/pt-pt/web/css/folhas_de_estilo_alternativas/index.html +++ b/files/pt-pt/web/css/alternative_style_sheets/index.html 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 deleted file mode 100644 index dff3dfb0ac..0000000000 --- a/files/pt-pt/web/css/como_começar/caixas/index.html +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: Caixas -slug: Web/CSS/Como_começar/Caixas -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -<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 deleted file mode 100644 index b73abb297f..0000000000 --- a/files/pt-pt/web/css/como_começar/cascata_e_herança/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_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 deleted file mode 100644 index bd667439ff..0000000000 --- a/files/pt-pt/web/css/como_começar/como_o_css_trabalha/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/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 deleted file mode 100644 index 523c408aad..0000000000 --- a/files/pt-pt/web/css/como_começar/conteúdo/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -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 deleted file mode 100644 index d5c15375d7..0000000000 --- a/files/pt-pt/web/css/como_começar/cor/index.html +++ /dev/null @@ -1,341 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -<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 deleted file mode 100644 index 08ede46aa3..0000000000 --- a/files/pt-pt/web/css/como_começar/css_legível/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -<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/disposição/index.html b/files/pt-pt/web/css/como_começar/disposição/index.html deleted file mode 100644 index 0612aad9b5..0000000000 --- a/files/pt-pt/web/css/como_começar/disposição/index.html +++ /dev/null @@ -1,453 +0,0 @@ ---- -title: Disposição -slug: Web/CSS/Como_começar/Disposição -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/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 deleted file mode 100644 index 373688d00f..0000000000 --- a/files/pt-pt/web/css/como_começar/estilos_de_texto/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -<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 deleted file mode 100644 index 074f78c92d..0000000000 --- a/files/pt-pt/web/css/como_começar/gráficos_svg/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -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 deleted file mode 100644 index fa514756bd..0000000000 --- a/files/pt-pt/web/css/como_começar/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started ---- -<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/javascript/index.html b/files/pt-pt/web/css/como_começar/javascript/index.html deleted file mode 100644 index f752fdbf6c..0000000000 --- a/files/pt-pt/web/css/como_começar/javascript/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: JavaScript -slug: Web/CSS/Como_começar/JavaScript -tags: - - 'CSS:Como_começar' -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -<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 deleted file mode 100644 index cff2108b51..0000000000 --- a/files/pt-pt/web/css/como_começar/listas/index.html +++ /dev/null @@ -1,362 +0,0 @@ ---- -title: Listas -slug: Web/CSS/Como_começar/Listas -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/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 deleted file mode 100644 index 0038962474..0000000000 --- a/files/pt-pt/web/css/como_começar/mídia/index.html +++ /dev/null @@ -1,433 +0,0 @@ ---- -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 deleted file mode 100644 index 2ee2937e47..0000000000 --- a/files/pt-pt/web/css/como_começar/o_que_é_css/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -<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 deleted file mode 100644 index d386670557..0000000000 --- a/files/pt-pt/web/css/como_começar/o_que_é_css_question_/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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 deleted file mode 100644 index 2adc531924..0000000000 --- a/files/pt-pt/web/css/como_começar/porque_usar_css/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -<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 deleted file mode 100644 index f9d4505614..0000000000 --- a/files/pt-pt/web/css/como_começar/seletores/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: Seletores -slug: Web/CSS/Como_começar/Seletores -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/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 deleted file mode 100644 index ff21a00c82..0000000000 --- a/files/pt-pt/web/css/como_começar/tabelas/index.html +++ /dev/null @@ -1,655 +0,0 @@ ---- -title: Tabelas -slug: Web/CSS/Como_começar/Tabelas -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/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/css_background_and_borders/index.html b/files/pt-pt/web/css/css_backgrounds_and_borders/index.html index 59c2117194..59c2117194 100644 --- a/files/pt-pt/web/css/css_background_and_borders/index.html +++ b/files/pt-pt/web/css/css_backgrounds_and_borders/index.html 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_backgrounds_and_borders/using_multiple_backgrounds/index.html index a30a9383be..a30a9383be 100644 --- a/files/pt-pt/web/css/css_background_and_borders/múltiplos_planos_de_fundo/index.html +++ b/files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html 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/introduction_to_the_css_box_model/index.html index 388a72ab39..388a72ab39 100644 --- a/files/pt-pt/web/css/css_box_model/introducao_modelo_caixa_css/index.html +++ b/files/pt-pt/web/css/css_box_model/introduction_to_the_css_box_model/index.html diff --git a/files/pt-pt/web/css/css_colors/ferramenta_selecao_cor/index.html b/files/pt-pt/web/css/css_colors/color_picker_tool/index.html index 696f2afd11..696f2afd11 100644 --- a/files/pt-pt/web/css/css_colors/ferramenta_selecao_cor/index.html +++ b/files/pt-pt/web/css/css_colors/color_picker_tool/index.html 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/aligning_items_in_a_flex_container/index.html index 4e1d10f5de..4e1d10f5de 100644 --- 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/aligning_items_in_a_flex_container/index.html 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/ordering_flex_items/index.html index b2bc22df09..b2bc22df09 100644 --- 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/ordering_flex_items/index.html 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/relationship_of_flexbox_to_other_layout_methods/index.html index 83c570f33e..83c570f33e 100644 --- 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/relationship_of_flexbox_to_other_layout_methods/index.html 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/typical_use_cases_of_flexbox/index.html index cd89209634..cd89209634 100644 --- 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/typical_use_cases_of_flexbox/index.html diff --git a/files/pt-pt/web/css/layout_de_grelha_css/index.html b/files/pt-pt/web/css/css_grid_layout/index.html index db142d2dde..db142d2dde 100644 --- a/files/pt-pt/web/css/layout_de_grelha_css/index.html +++ b/files/pt-pt/web/css/css_grid_layout/index.html diff --git a/files/pt-pt/web/css/usando_transformações_css/index.html b/files/pt-pt/web/css/css_transforms/using_css_transforms/index.html index 62190c37dc..62190c37dc 100644 --- a/files/pt-pt/web/css/usando_transformações_css/index.html +++ b/files/pt-pt/web/css/css_transforms/using_css_transforms/index.html diff --git a/files/pt-pt/web/css/css_tipos/index.html b/files/pt-pt/web/css/css_types/index.html index ea7049f5a4..ea7049f5a4 100644 --- a/files/pt-pt/web/css/css_tipos/index.html +++ b/files/pt-pt/web/css/css_types/index.html diff --git a/files/pt-pt/web/css/grid-gap/index.html b/files/pt-pt/web/css/gap/index.html index 06c9881278..06c9881278 100644 --- a/files/pt-pt/web/css/grid-gap/index.html +++ b/files/pt-pt/web/css/gap/index.html diff --git a/files/pt-pt/web/css/consultas_de_media/index.html b/files/pt-pt/web/css/media_queries/index.html index f9bbd7b94e..f9bbd7b94e 100644 --- a/files/pt-pt/web/css/consultas_de_media/index.html +++ b/files/pt-pt/web/css/media_queries/index.html diff --git a/files/pt-pt/web/css/consulta_de_mídia/index.html b/files/pt-pt/web/css/media_queries/using_media_queries/index.html index 2bf4f5470c..2bf4f5470c 100644 --- a/files/pt-pt/web/css/consulta_de_mídia/index.html +++ b/files/pt-pt/web/css/media_queries/using_media_queries/index.html diff --git a/files/pt-pt/web/css/média_paginada/index.html b/files/pt-pt/web/css/paged_media/index.html index 49df122031..49df122031 100644 --- a/files/pt-pt/web/css/média_paginada/index.html +++ b/files/pt-pt/web/css/paged_media/index.html diff --git a/files/pt-pt/web/css/pseudoclasses/index.html b/files/pt-pt/web/css/pseudo-classes/index.html index d65bef9e51..d65bef9e51 100644 --- a/files/pt-pt/web/css/pseudoclasses/index.html +++ b/files/pt-pt/web/css/pseudo-classes/index.html diff --git a/files/pt-pt/web/css/pseudoelementos/index.html b/files/pt-pt/web/css/pseudo-elements/index.html index 780d17c378..780d17c378 100644 --- a/files/pt-pt/web/css/pseudoelementos/index.html +++ b/files/pt-pt/web/css/pseudo-elements/index.html diff --git a/files/pt-pt/web/css/referência_css/index.html b/files/pt-pt/web/css/reference/index.html index 1be349b1c9..1be349b1c9 100644 --- a/files/pt-pt/web/css/referência_css/index.html +++ b/files/pt-pt/web/css/reference/index.html |