diff options
Diffstat (limited to 'files/pt-pt/learn/css/css_layout/index.html')
| -rw-r--r-- | files/pt-pt/learn/css/css_layout/index.html | 453 |
1 files changed, 453 insertions, 0 deletions
diff --git a/files/pt-pt/learn/css/css_layout/index.html b/files/pt-pt/learn/css/css_layout/index.html new file mode 100644 index 0000000000..0612aad9b5 --- /dev/null +++ b/files/pt-pt/learn/css/css_layout/index.html @@ -0,0 +1,453 @@ +--- +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> |