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 - qual delas 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.
Publicado em: 07/03/2008 Última atualização: 10/03/2009