CSS legível

  • Revision slug: CSS/Como_começar/CSS_legível
  • Revision title: CSS legível
  • Revision id: 274645
  • Created:
  • Creator: Verruckt
  • Is current revision? Não
  • コメント /* Action: Adding comments and improving the layout */

Revision Content

This page discusses the style and grammar of the CSS language itself.

You change the way your sample CSS file looks, to make it more readable.

Informação: CSS legível

You can add white space and comments to your stylesheets to make them more readable. You can also group selectors together, when the same style rules apply to elements selected in different ways.

Espaço em branco

White space means actual spaces, tabs and new lines. You can add white space to make your stylesheets more readable.

Your sample CSS file currently has one rule per line, and almost the minimum of white space. In a complex stylesheet this layout would be difficult to read, making the stylesheet difficult to maintain.

The layout you choose is usually a personal preference, but if your stylesheets are part of shared projects, those projects might have their own conventions.

Exemplos
Some people like the compact layout that we have been using, only splitting a line when it becomes very long:
.carrot {color: orange; text-decoration: underline; font-style: italic;}

Some people prefer one property-value per line:

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

Some people use indentation—two spaces, four spaces, or a tab are common:

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

Some people like everything to line up vertically (but layout like this is difficult to maintain):

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

Some people use tabs for the layout. Some people only use spaces.

Comentários

Comments in CSS begin with /* and end with */.

You can use comments to make actual comments in your stylesheet, and also to comment out parts of it temporarily for testing purposes.

To comment out part of a stylesheet, place that part in a comment so that the browser ignores it. Be careful where you start and end the comment. The rest of the stylesheet must still have correct syntax.

Exemplo
/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

Seletores agrupados

When many elements have the same style, you can specify a group of selectors, separating them with commas. The declaration applies to all the selected elements.

Elsewhere in your stylesheet you can specify the same selectors again individually, to apply individual style rules to them.

Exemplo
This rule makes H1, H2 and H3 elements the same color.

It is convenient to specify the color in only one place, in case it has to be changed.

/* color for headings */
h1, h2, h3 {color: navy;}

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

Edit your CSS file, and ensure that it has these rules in it (in any order):

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

Make it more readable by rearranging it in a way that you find logical, and by adding white space and comments in whatever way you think best.

Save the file and refresh your browser's display, to make sure that your changes do not affect how the stylesheet works:

Cascading Style Sheets
Cascading Style Sheets


Desafio
Comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red:
Cascading Style Sheets
Cascading Style Sheets

(There is more than one way to do this.)


O que vem depois?

Seu documento simples 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>This page discusses the style and grammar of the CSS language itself.
</p><p>You change the way your sample CSS file looks, to make it more readable.
</p>
<h3 name="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel"> Informação: CSS legível </h3>
<p>You can add white space and comments to your stylesheets to make them more readable.
You can also group selectors together, when the same style rules apply to elements selected in different ways.
</p>
<h4 name="Espa.C3.A7o_em_branco"> Espaço em branco </h4>
<p>White space means actual spaces, tabs and new lines.
You can add white space to make your stylesheets more readable.
</p><p>Your sample CSS file currently has one rule per line, and almost the minimum of white space.  In a complex stylesheet this layout would be difficult to read, making the stylesheet difficult to maintain.
</p><p>The layout you choose is usually a personal preference, but if your stylesheets are part of shared projects, those projects might have their own conventions.
</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> Some people like the compact layout that we have been using, only splitting a line when it becomes very long:
<pre>
.carrot {color: orange; text-decoration: underline; font-style: italic;}
</pre>
<p>Some people prefer one property-value per line:
</p>
<div style="width:45em;">
<pre class="eval">.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
</div>
<p>Some people use indentation—two spaces, four spaces, or a tab are common:
</p>
<div style="width:45em;">
<pre class="eval">.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}
</pre>
</div>
<p>Some people like everything to line up vertically (but layout like this is difficult to maintain):
</p>
<div style="width:45em;">
<pre class="eval">.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }
</pre>
</div>
<p>Some people use tabs for the layout.  Some people only use spaces.
</p>
</td></tr></tbody></table>
<h4 name="Coment.C3.A1rios"> Comentários </h4>
<p>Comments in CSS begin with <code>/*</code> and end with <code>*/</code>.
</p><p>You can use comments to make actual comments in your stylesheet, and also to <i>comment out</i> parts of it temporarily for testing purposes.
</p><p>To comment out part of a stylesheet, place that part in a comment so that the browser ignores it.
Be careful where you start and end the comment.
The rest of the stylesheet must still have correct syntax.
</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">/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }
</pre>
</div>
</td></tr></tbody></table>
<h4 name="Seletores_agrupados"> Seletores agrupados </h4>
<p>When many elements have the same style, you can specify a group of selectors, separating them with commas.
The declaration applies to all the selected elements.
</p><p>Elsewhere in your stylesheet you can specify the same selectors again individually, to apply individual style rules to them.
</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> This rule makes <small>H1</small>, <small>H2</small> and <small>H3</small> elements the same color.
<p>It is convenient to specify the color in only one place, in case it has to be changed.
</p>
<div style="width:30em;">
<pre class="eval">/* color for headings */
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>Edit your CSS file, and ensure that it has these rules in it (in any order):
</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>Make it more readable by rearranging it in a way that you find logical, and by adding white space and comments in whatever way you think best.
</p><p>Save the file and refresh your browser's display, to make sure that your changes do not affect how the stylesheet works:
</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> Comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red:
<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>(There is more than one way to do this.)
</p>
</td></tr></tbody></table>
<p><br>
</p>
<h4 name="O_que_vem_depois.3F"> O que vem depois? </h4>
<p>Seu documento simples 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