|
|
TUTORIAL CSS
LIÇÕES PRELIMINARES
PARTE II
|
 |
regras css externas:
Há, como anteriormente mencionado, duas formas de
estabelecer regras de estilo para uma página através
de arquivos externos, quais sejam:
1- Folhas de estilo linkadas -
a vinculação à folha de estilo respectiva se dá
através do elemento link, que deve ser colocado
na seção head. Veja a sintaxe para utilização
desta modalidade de associação no exemplo a seguir:
<head>
<link rel="stylesheet" type="text/css" href="emprimeiro.css">
</head>
Sabemos que o documento que possuir a seção supracitada
terá suas regras de estilo definidas em um arquivo
CSS que resolvemos nomear emprimeiro. Utilizando
o mesmo exemplo de n.º 1 do tutorial antecedente,
teríamos o seguinte código:
<head>
<link rel="stylesheet" type="text/css" href="emprimeiro.css">
</head>
<body>
<p>Emprimeiro: aqui você estará sempre em primeiro
lugar</p>
</body>
O arquivo denominado emprimeiro.css terá
o seguinte conteúdo:
p {
width: 250px;
font-family: verdana;
font-size: 10px;
color: red;
}
Veja o resultado do exemplo supracitado:
exemplo-link
2 - Folhas de estilo importadas - Outra
forma de associar uma regra de estilo externa a
um documento web é a utilização do comando @import
que, assim como na modalidade anterior, deverá ser
colocado na seção head. Veja a sintaxe para
utilização desta modalidade de associação no exemplo
a seguir:
<head>
<link rel="stylesheet" type="text/css" href="emprimeiro.css"
media="screen">
</head>
Sabemos que o documento que possuir a seção supracitada
terá suas regras de estilo definidas em um arquivo
CSS que, em nosso caso, será aquele mesmo arquivo
CSS a que nos referimos acima, denominado emprimeiro.
Utilizando o mesmo já referido exemplo de
n.º 1 do tutorial antecedente, teríamos o seguinte
código:
<head>
<style type="text/css">
@import url('emprimeiro.css');
</style>
</head>
<body>
<p>Emprimeiro: aqui você estará sempre em primeiro
lugar</p>
</body>
O arquivo denominado emprimeiro.css terá
o seguinte conteúdo:
p {
width: 250px;
font-family: verdana;
font-size: 10px;
color: red;
}
Como é possível constatar, as formas de definição
de estilos através de arquivos externos são semelhantes,
sendo que no primeiro exemplo, através do elemento
link, o desenvolvedor associa documentos
contidos em um mesmo lugar (mesmo endereço), enquanto
ao utilizar a diretiva @import permite invocar
um arquivo CSS localizado em lugar distinto (no
caso, uma url distinta daquela em que se encontra
o documento referenciado).
Há detalhes que, por ora, não serão abordados
haja vista não serem imprescindíveis para a compreensão
do conjunto de informações que servirão de alicerce
para o prosseguimento de seu aprendizado. Todos
os aspectos serão, oportuna e seqüencialmente veiculados.
Espera-se somente, até então, que você saiba
quais são as 4 (quatro) formas possíveis de estabelecer
regras de estilo e formatação através das CSS. No
próximo tutorial iremos abordar a hierarquia das
regras: elas são semelhantes a "uma cascata"...
Para não ficar na absoluta subjetividade, imagine
um documento que contém os 4 (quatro) tipos de vinculação
de estilos: sim, é isto mesmo, um único documento
web contendo as diferentes modalidades de
estilização... Em caso de conflito entre regras
de estilo - por exemplo duas regras distintas
aplicáveis a um parágrafo - qualdelas
prevalecerá ? Há a hipótese de uma regra anular
a outra ? Exercite sua imaginação e aguarde muitas
respostas que virão com o nosso próximo tutorial.
e-mail para contato:
Caso queira, disponibilizamos endereço eletrônico
para contato. Alertamos para o fato de que nem todos
os e-mails recebidos serão respondidos de maneira
individualizada, sendo certo, contudo, que todos
serão atenciosamente lidos e examinados. Fale conosco
através do e-mail
tutoriaiscss@emprimeiro.com.br que estará
disponível até o dia 27 de junho do ano corrente.
No próximo tutorial - Efeito Cascata - A hierarquia
dos comandos CSS - que será publicado no dia
14/03/2008, lhe apresentaremos alguns critérios
e ferramentas que serão utilizados em seu aprendizado,
juntamente com os primeiros exemplos práticos.
Publicado: 07/03/2008
|
