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 quebras de linha. 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.
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.
/* 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.
| 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 |
Comente parte de sua folha de estilo, sem mudar qualquer coisa, para fazer a primeira letra de seu documento vermelha:
(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