CSS legível

  • Revision slug: CSS/Como_começar/CSS_legível
  • Revision title: CSS legível
  • Revision id: 274661
  • Created:
  • Creator: Verruckt
  • Is current revision? Não
  • コメント /* Seletores agrupados */

Revision Content

Esta página discute o estilo e a gramática da linguagem CSS.

Você muda a maneira em que seu arquivo de amostra CSS é exibido, para torná-lo mais legível.

Informação: CSS legível

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.

Espaço em branco

Espaços em branco significam espaços reais, tabs e linhas novas. Você pode adicionar espaços em branco para tornar suas folhas de estilo mais legíveis.

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.

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.

Exemplos
Algumas pessoas gostam de uma diposição compacta que temos usado, somente dividindo a linha quando ela se torna muito longa:
.carrot {color: orange; text-decoration: underline; font-style: italic;}

Algumas pessoas preferem uma propriedade-valor por linha:

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

Algumas pessoas usam tabs – dois espaços, quatro espaços, ou um tab são comuns:

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

Algumas pessoas gostam de enfileirar a linha verticalmente (mas é difícil de manter uma disposição assim):

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

Algumas pessoas usam tabs para a disposição. Algumas pessoas usam somente espaços.

Comentários

Comentários em CSS começam com /* e terminam com */.

Você pode usar comentários para fazer comentários reais na sua folha de estilo, e também para descomentar partes que estiverem temporariamente para propósito de testes.

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.

Exemplo
/* Estilo para a letra C inicial no primeiro parágrafo */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

Seletores agrupados

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.

Em outra parte da sua folha de estilo você pode especificar os mesmos seletores, de novo individualmente, para aplicar estilo individual às suas regras.

Exemplo
Esta regra faz os elementos H1, H2 and H3 da mesma cor.

Isto é conveniente para especificar a cor em somente um lugar, no caso em que precisa ser alterado.

/* cores para os cabeçalhos */
h1, h2, h3 {color: navy;}

Ação: Adicionando comentários e melhorando o arranjo

Edite seu arquivo CSS, e assegure-se que ele tem todas as regras nele (em qualquer ordem):

strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}

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.

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:

Cascading Style Sheets
Cascading Style Sheets


Desafio
Comente parte de sua folha de estilo, sem mudar qualquer coisa, para fazer a primeira letra de seu documento vermelha:
Cascading Style Sheets
Cascading Style Sheets

(Existe mais de uma maneira de fazer isto.)


O que vem depois?

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 Discussão.

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: Estilos de texto

{{ wiki.languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "it": "it/Conoscere_i_CSS/CSS_leggibili" } ) }}

Revision Source

<p>
</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>
<h3 name="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel"> Informação: CSS legível </h3>
<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>
<h4 name="Espa.C3.A7o_em_branco"> Espaço em branco </h4>
<p>Espaços em branco significam espaços reais, tabs e linhas novas.
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 style="font-weight:bold; text-align:left; margin-top:1em;">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>
<h4 name="Coment.C3.A1rios"> Comentários </h4>
<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 <i>descomentar</i> 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 style="font-weight:bold; text-align:left; margin-top:1em;">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>
<h4 name="Seletores_agrupados"> Seletores agrupados </h4>
<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 style="font-weight:bold; text-align:left; margin-top:1em;">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>
<h3 name="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo"> Ação: Adicionando comentários e melhorando o arranjo </h3>
<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>
<p><br>
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#ffe;">
<caption style="font-weight:bold; text-align:left;">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>
<p><br>
</p>
<h4 name="O_que_vem_depois.3F"> O que vem depois? </h4>
<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">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: <b><a href="pt/CSS/Como_come%c3%a7ar/Estilos_de_texto">Estilos de texto</a></b>
</p>{{ wiki.languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "it": "it/Conoscere_i_CSS/CSS_leggibili" } ) }}
Revert to this revision