Aulas
Disciplinas

Cursos / Informática para Internet / Autoria Web / Aula

arrow_back Aula 04 - XHTML e CSS: definições e particularidades

Vinculação das folhas de estilo ao documento

Você deve especificar no documento (X)HTML onde o browser deve buscar as folhas de estilo, ou seja, você precisa vincular a declaração CSS ao documento (X)HTML. Existem três formas de vinculação, abaixo descritas.

1) Escritas no próprio elemento (X)HTML (estilo inline)

A declaração é feita dentro das próprias tags do (X)HTML. É um método direto e simples de aplicar estilos a um elemento de marcação através do atributo style. Seu efeito estará restrito a essa única tag. Nesse caso, a principal vantagem das CSS fica prejudicada, uma vez que a centralização da estilização não se aplica. A seguir, temos um exemplo da aplicação dessa vinculação.

2) Arquivos externos

Nesse caso, um arquivo contendo todas as regras da folha de estilo é criado e ele pode ser vinculado a qualquer página de um site. Você pode criar esse arquivo em um editor de texto simples e salvá-lo com a extensão .css, da mesma maneira que você cria arquivos HTML.

Essa é a forma de vinculação mais utilizada, pois centraliza todos os estilos de um site em um mesmo arquivo. Com isso, é mais fácil controlar e padronizar as diversas páginas de um mesmo site.

Essa forma de vinculação pode ser feita de duas maneiras: a) utilizando o elemento link, ou b) usando a diretiva @import dentro do elemento style. Em ambos os casos, esses elementos pertencem ao cabeçalho do documento (X)HTML, descrito pela tag <head>. Veja a seguir as duas formas de realizar esse tipo de vinculação.


Mas fique atento, pois essa segunda maneira de ligar o documento (X)HTML ao CSS, através do @import, não é reconhecido por browsers mais antigos. Assim, browsers antigos podem não renderizar suas páginas da maneira que você especificou no CSS. Portanto, dê preferência ao uso da tag <link> para associar um CSS às páginas (X)HTML.

3) Incorporadas ao documento

Os estilos incorporados são declarados no corpo do documento HTML e seu efeito abrange apenas a página na qual foi declarado. Sua declaração também é feita dentro da seção <head>, através da tag <style>.

Esse tipo de declaração deve ser utilizado quando você desejar que a estilização seja feita apenas na página em que ela está escrita, por exemplo, quando o site é constituído de um único arquivo.

Visto que há diferentes maneiras de associar um CSS a um documento (X)HTML, é possível utilizar mais de uma maneira ao mesmo tempo. Dessa forma, você deve estar se perguntando: Como fica o efeito cascata? Qual CSS prevalecerá se eu tentar estilizar o mesmo elemento de maneiras diferentes?

Respondendo, existe a seguinte prioridade entre as definições, da mais baixa para a mais alta:

  1. os padrões adotados pelo browser;
  2. CSS externos;
  3. CSS interno, definido na seção style do cabeçalho;
  4. CSS inline, definido no próprio elemento HTML.

Assim, o estilo inline é o que tem maior prioridade, ele sobrescreverá qualquer outro. Atente também para o seguinte: se o link para o CSS externo for colocado depois da tag style do cabeçalho, então o CSS externo sobrescreverá o CSS interno.

Versão 5.3 - Todos os Direitos reservados