diff options
Diffstat (limited to 'files/pt-pt/learn/css/building_blocks')
5 files changed, 1703 insertions, 0 deletions
diff --git a/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..a35e695b08 --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,136 @@ +--- +title: Cascata e herança +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance +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 +original_slug: Web/CSS/Como_começar/Cascata_e_herança +--- +<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/learn/css/building_blocks/index.html b/files/pt-pt/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..62d3b77849 --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/index.html @@ -0,0 +1,360 @@ +--- +title: Caixas +slug: Learn/CSS/Building_blocks +tags: + - CSS:Como_começar +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +original_slug: Web/CSS/Como_começar/Caixas +--- +<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/learn/css/building_blocks/selectors/index.html b/files/pt-pt/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..d10ad5f044 --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,209 @@ +--- +title: Seletores +slug: Learn/CSS/Building_blocks/Selectors +tags: + - CSS:Como_começar +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +original_slug: Web/CSS/Como_começar/Seletores +--- +<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/learn/css/building_blocks/styling_tables/index.html b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..8967f90eb8 --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,656 @@ +--- +title: Tabelas +slug: Learn/CSS/Building_blocks/Styling_tables +tags: + - CSS:Como_começar +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +original_slug: Web/CSS/Como_começar/Tabelas +--- +<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/learn/css/building_blocks/values_and_units/index.html b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..1c5855e14c --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,342 @@ +--- +title: Cor +slug: Learn/CSS/Building_blocks/Values_and_units +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 +original_slug: Web/CSS/Como_começar/Cor +--- +<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> |