diff options
Diffstat (limited to 'files/pt-pt/web/css/como_começar/css_legível/index.html')
| -rw-r--r-- | files/pt-pt/web/css/como_começar/css_legível/index.html | 188 |
1 files changed, 0 insertions, 188 deletions
diff --git a/files/pt-pt/web/css/como_começar/css_legível/index.html b/files/pt-pt/web/css/como_começar/css_legível/index.html deleted file mode 100644 index 08ede46aa3..0000000000 --- a/files/pt-pt/web/css/como_começar/css_legível/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: CSS legível -slug: Web/CSS/Como_começar/CSS_legível -tags: - - 'CSS:Como_começar' -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -<p>{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}</p> - -<p>Esta página discute o estilo e a gramática da linguagem CSS.</p> - -<p>Você muda a maneira em que seu arquivo de amostra CSS é exibido, para torná-lo mais legível.</p> - -<h2 id="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel" name="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel">Informação: CSS legível</h2> - -<p>Você pode adicionar espaço em branco e comentários na sua folha de estilo para fazê-la mais legível. Você pode também juntar seletores de grupo, quando as mesmas regras de estilo se aplicam aos elementos selecionados em meios diferentes.</p> - -<h3 id="Espa.C3.A7o_em_branco" name="Espa.C3.A7o_em_branco">Espaço em branco</h3> - -<p>Espaços em branco significam espaços reais, tabs e quebras de linha. Você pode adicionar espaços em branco para tornar suas folhas de estilo mais legíveis.</p> - -<p>Seu arquivo de amostra de CSS atualmente tem uma regra por linha, e quase o mínimo de espaço em branco. Em uma uma folha de estilo complexa esta disposição pode dificultar a leitura, dificultando também a manutenção da sua folha de estilo.</p> - -<p>A disposição que você escolhe é usualmente um preferência pessoal, mas se suas folhas de estilo são parte de projetos compartilhados, estes projetos podem ter suas próprias convenções.</p> - -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption>Exemplos</caption> - <tbody> - <tr> - <td>Algumas pessoas gostam de uma diposição compacta que temos usado, somente dividindo a linha quando ela se torna muito longa: - <pre> -.carrot {color: orange; text-decoration: underline; font-style: italic;} -</pre> - - <p>Algumas pessoas preferem uma propriedade-valor por linha:</p> - - <div style="width: 45em;"> - <pre class="eval"> -.carrot -{ -color: orange; -text-decoration: underline; -font-style: italic; -} -</pre> - </div> - - <p>Algumas pessoas usam tabs – dois espaços, quatro espaços, ou um tab são comuns:</p> - - <div style="width: 45em;"> - <pre class="eval"> -.carrot { - color: orange; - text-decoration: underline; - font-style: italic; -} -</pre> - </div> - - <p>Algumas pessoas gostam de enfileirar a linha verticalmente (mas é difícil de manter uma disposição assim):</p> - - <div style="width: 45em;"> - <pre class="eval"> -.carrot - { - color : orange; - text-decoration : underline; - font-style : italic; - } -</pre> - </div> - - <p>Algumas pessoas usam tabs para a disposição. Algumas pessoas usam somente espaços.</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="Coment.C3.A1rios" name="Coment.C3.A1rios">Comentários</h3> - -<p>Comentários em CSS começam com <code>/*</code> e terminam com <code>*/</code>.</p> - -<p>Você pode usar comentários para fazer comentários reais na sua folha de estilo, e também para <em>descomentar</em> partes que estiverem temporariamente para propósito de testes.</p> - -<p>Para comentar parte da folha de estilo, coloque a parte em um comentário então o navegador ignorará isso. Tome cuidado onde você começa e termina o seu comentário. O resto da sua folha de estilo ainda deve ter a sintaxe correta.</p> - -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption>Exemplo</caption> - <tbody> - <tr> - <td> - <div style="width: 45em;"> - <pre class="eval"> -/* Estilo para a letra C inicial no primeiro parágrafo */ -.carrot { - color: orange; - text-decoration: underline; - font-style: italic; - } -</pre> - </div> - </td> - </tr> - </tbody> -</table> - -<h3 id="Seletores_agrupados" name="Seletores_agrupados">Seletores agrupados</h3> - -<p>Quando muitos elementos tiverem o mesmo estilo, você pode especificar um grupo de seletores, separando-os com comentários. A declaração se aplica a todos os elementos selecionados.</p> - -<p>Em outra parte da sua folha de estilo você pode especificar os mesmos seletores, de novo individualmente, para aplicar estilo individual às suas regras.</p> - -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption>Exemplo</caption> - <tbody> - <tr> - <td>Esta regra faz os elementos <small>H1</small>, <small>H2</small> and <small>H3</small> da mesma cor. - <p>Isto é conveniente para especificar a cor em somente um lugar, no caso em que precisa ser alterado.</p> - - <div style="width: 30em;"> - <pre class="eval"> -/* cores para os cabeçalhos */ -h1, h2, h3 {color: navy;} -</pre> - </div> - </td> - </tr> - </tbody> -</table> - -<h2 id="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo" name="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo">Ação: Adicionando comentários e melhorando o arranjo</h2> - -<p>Edite seu arquivo CSS, e assegure-se que ele tem todas as regras nele (em qualquer ordem):</p> - -<div style="width: 30em;"> -<pre class="eval">strong {color: red;} -.carrot {color: orange;} -.spinach {color: green;} -#first {font-style: italic;} -p {color: blue;} -</pre> -</div> - -<p>Faça isto mais legível rearranjando isto em um meio que possa ser achado lógicamente, adicionando espaços em branco e comentários da maneira que você achar melhor.</p> - -<p>Salve o arquivo e atualize a tela do seu navegador, assegure-se que as mudanças que você fez não afetaram o modo como a folha de estilo trabalha:</p> - -<table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> - <caption>Desafio</caption> - <tbody> - <tr> - <td>Comente parte de sua folha de estilo, sem mudar qualquer coisa, para fazer a primeira letra de seu documento vermelha: - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>(Existe mais de uma maneira de fazer isto.)</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> - -<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/CSS_leg%C3%ADvel" title="Talk:pt/CSS/Como_começar/CSS_legível">Discussão</a>.</p> - -<p>Seu documento de amostra usou o texto em itálico e o texto com sublinhado. A próxima página descreve mais caminhos para especificar a aparência do texto no seu documento: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Estilos_de_texto" title="pt/CSS/Como_começar/Estilos_de_texto">Estilos de texto</a></strong></p> - -<p>{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}</p> |