CSS é a abreviatura de Cascading Style Sheets. CSS1 é um mecanismo simples de folhas de estilo que permitem aos autores e leitores associar estilos (ou design) a documentos HTML.
Um documento CSS é composto por blocos, cada qual tem uma zona de selecção de etiquetas (ver secção Selecção) e, entre chavetas, um conjunto de propriedades separadas por um ponto e vírgula (ver secção Propriedades).
<selector-1> { <propriedades-1> }
<selector-2> {
<propriedades-2>
}
Os comentários podem ser inseridos entre blocos usando a mesma notação usada na linguagem C:
em { color: red } /* red, really red!! */
A inclusão de folhas de estilo em documentos HTML pode ser realizada a três níveis diferentes:
style da etiqueta e colocando como seu valor uma
string com as propriedades em causa:
<h1 style="font-color: red">Título</h1>
head). Para
isso é usada a etiqueta style da seguinte forma:
<style type="text/css"><!--
h1 { font-color: red }
--></style>
Neste caso, usa-se o comentário para esconder o código CSS de browsers
mais antigos que possam não reconhecer a etiqueta style. A sintaxe
é a usada para ficheiros de folhas de estilo.
link dentro do cabeçalho do HTML (head)
da seguinte forma:
<link rel="stylesheet" type="text/css"
href="http://style.com/cool";/>
A CSS em causa estaria num ficheiro denominado cool. É possivel e
correcto usar mais do que uma destas ligações.
Estes métodos podem ser usados em conjunto. Nestes casos, a precedência para propriedades repetidas é daquelas que são especificadas na própria etiqueta.
Cada um dos métodos apresentados pode ser usado com outros, sempre que faça sentido.
H1, H2, H3 { font-family: helvetica }
class de cada
elemento. Neste caso,
.title { color: red }
iria colocar todos os elementos com class="title" a vermelho.
id), único nesse documento, é possível
associar a esse elemento uma propriedade inserindo um # antes do
identificador:
#mainTitle { font-size: 20px }
LI serão seleccionados apenas se estiverem num nível
maior que dois:
ul ul li { font-size: x-small }
a que permitem as pseudo-classes hover,
active, link e visited. Estas pseudo-classes são usadas
quando o cursor estiver sobre o link, quando o link estiver activo,
nos links normais e nos links já visitados (respectivamente).
Note-se que as pseudo-classes e classes podem ter nomes iguais, sem que isso os associe à mesma propriedade.
a:link { color: red } /* unvisited link */
a:visited { color: blue } /* visited links */
a:active { color: lime } /* active links */
/* associar às primeiras linhas de parágrafos */
p:first-line { font-variant: small-caps }
/* associar à primeira letra de cada parágrafo */
p:first-letter { font-size: 200%; float: left }
Embora nem todas as propriedades possam ser associadas a qualquer tipo de elemento, estas não serão distinguidas neste documento. Para mais informação veja o standard no W3C.
serif, sans-serif, cursive, fantasy e
monospace. O primeiro tipo da lista presente no sistema é escolhido.
body { font-family: "new century schoolbook", serif }
normal, italic ou oblique.
em { font-style: italic }
normal ou small-caps.
h3 { font-variant: small-caps }
normal, bold, bolder, lighter, 100, 200,
..., 900. Os valores numéricos correspondem a vários níveis de
negrito, em que 900 é o mais escuro, e 100 o mais claro. A
palavra-chave normal corresponde a 500, enquanto que bold
corresponde a 700.
b { font-weight: 900 }
As palavras-chave bolder e lighter escolhem um tipo mais escuro
ou claro, respectivamente, do que o activo no momento actual.
xx-small,
x-small, small, medium, large, x-large ou xx-large.
Também pode ser um valor em pixeis (com unidade px) ou outros
valores absolutos ou relativos. Para mais informação, consultar o
standard.
h1 { font-size: 50px }
p { font: bold italic large Palatino, serif }
HowTo por Alberto Simões <albie@alfarrabio.di.uminho.pt>.
Baseado na especificação do W3C <http://www.w3.org> e nas referências e tutoriais do ZVON <http://www.zvon.org>.