Como adicionar um hiperlink ao CSS externo

Folhas de estilo em cascata (CSS) são instruções do navegador para estilizar elementos HTML que podem ser adicionados a páginas da Web de três maneiras: externamente, internamente ou inline. Duas vantagens do uso de folhas de estilo externas são que os estilos de uma página podem ser mantidos separadamente do conteúdo da página, e os mesmos estilos podem ser incluídos em várias páginas da Web. Os usuários também podem alterar referências de arquivos CSS interagindo com a interface de usuário da página (hiperlinks), um recurso que permite aos visitantes alterar dinamicamente alguns ou todos os estilos de uma página específica.

1

Abra um editor de texto e crie um novo arquivo chamado “externalBlue.css”. Normalmente, o processo para criar um novo arquivo de texto em um editor de texto é selecionar “Novo” no menu “Arquivo”.

2

Defina um estilo único em externalBlue.css. Esse estilo é o padrão e indica que a cor de plano de fundo (corpo) da página da Web deve ser azul. Certifique-se de usar a sintaxe de estilo apropriada (seletor, estilo, atributo) da seguinte maneira:

corpo {fundo: azul;}

Salve seu arquivo externalBlue.css e feche seu editor de texto.

3

Crie um segundo arquivo chamado "externalGreen.css" que será acessado quando o usuário selecionar um hiperlink na página. Defina um estilo indicando que a cor de plano de fundo (corpo) da página deve ser verde, salve e feche o arquivo:

corpo {fundo: verde;}

4

Crie um terceiro arquivo chamado “externalCSS.html”. Adicione as tags HTML básicas ao arquivo - "", "", "", "", "" e "" - da seguinte maneira:

5

Adicione a folha de estilo externalBlue.css a externalCSS.html colocando uma tag de link (“”) entre as tags “” e “” de abertura do arquivo. Adicione a tag "", defina o atributo "rel" da tag como "stylesheet", o atributo "href" como "externalBlue.css" e o atributo "id" como "styles". O link "styles" agora faz referência à folha de estilo externalBlue.css em externalCSS.html.

6

Adicione uma tag JavaScript aberta “” ao arquivo. Defina o atributo "type" da tag como "text / javascript". Coloque esse conjunto de tags abaixo da referência à tag de link "estilos".

7

Adicione uma função JavaScript chamada “changeStyle ()” a externalCSS.html entre a abertura e o fechamento Clique aqui para alterar a folha de estilo

9

Abra externalCSS.html em um navegador da Web. Clique no hiperlink “Clique aqui para alterar a folha de estilo” e verifique se a folha de estilo externalGreen.css é aberta e o fundo muda de azul para verde.

Coisas necessárias

  • Editor de texto
  • Acesso ao servidor da Web
  • Navegador da Web com JavaScript habilitado

Dicas

  • Folhas de estilo externas podem ser alteradas usando scripts do lado do servidor, embora esse método exija uma solicitação do servidor.
  • O atributo "type" em uma tag pode ser usado para especificar tipos de mídia, permitindo que navegadores que não suportam um determinado tipo de mídia ignorem o CSS.
  • O atributo "mídia" em uma tag pode ser usado para especificar um meio usado pela folha de estilo. Essas mídias incluem opções como print, screen e tty.
  • Algumas versões mais antigas do Internet Explorer podem não implementar completamente o JavaScript.

Aviso

  • Nem todos os navegadores suportam todos os estilos CSS, e alguns podem implementá-los de maneira diferente. Lembre-se disso ao usar estilos que alteram a aparência geral da página da Web.

Recomendado