diff options
Diffstat (limited to 'files/pt-pt/web/css/como_começar/disposição/index.html')
| -rw-r--r-- | files/pt-pt/web/css/como_começar/disposição/index.html | 453 |
1 files changed, 0 insertions, 453 deletions
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> |