initial commit

1 files changed, 187 insertions, 0 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
new file mode 100644
index 0000000000..7edd9f859e
--- /dev/null
+++ b/files/pt-pt/web/css/como_começar/css_legível/index.html
@@ -0,0 +1,187 @@
+---
+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
+---
+<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>