O QUE É UMA STYLE SHEET
Paulo Candido
Um style sheet é formada por uma série de regras que dizem ao browser como cada elemento de uma
página html deve ser desenhado. A linha abaixo, é uma regra que define o que o browser deve fazer
ao encontrar um tag <p> na página HTML:
p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt
}
|
Uma regra é formado por um selecionador e por uma declaração.
O selecionador define o elemento ao qual estamos nos referindo. O p é o selecionador do elemento acima.
A declaração diz ao browser o que fazer com elemento. A declaração é escrita entre chaves. No exemplo, a declaração é
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt
}
|
Existem vários tipos de selecionadores. Os mais comuns são os selecionadores de tags HTML. Mas
existem também os selecionadores para classes, de ids, de contexto, de pseudo-classe, de
pseudo-elemento e grupos.
Já vimos um exemplo de selecionador de tag HTML acima.
Selecionadores de classes e de ids são similares. Na style sheet, podemos definir uma regra para
uma classe utilizando um "." e o nome da classe:
.texto_normal{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt
}
|
Dada esta regra, qualquer elemento definido no HTML como pertencente à classe texto_normal
será escrita deste modo. Por exemplo:
Os selecionadores de id funcionam como as classes, mas se aplicam ao tag id no HTML. Definimos
regras para ids utilizando o # e o nome do id:
#texto_normal{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt
}
|
se aplica a um elemento HTML escrito assim:
Selecionadores de pseudo-classes são extremamente específicos. São usados para definir o layout de
links:
a:link { color: #FFFF00 }
a:visited { color: #FFFFFF }
a:active { color: #FF0000 }
|
Selecionadores de pseudo-elementos também são específicos. Existem dois deles, first-line e
first-letter. Eles permitem que você determine layouts diferenciados para a primeira letra e para
a primeira linha de um parágrafo (ou de outro tag qualquer).
Os grupos não são selecionadores. São, como diz o nome, grupos de selecionadores aos quais você
quer atribuir o mesmo layout. Cada selecionador é separado do outro por uma vírgula:
body, p, td, li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt
}
|
» Integrando-a à página »
