Como usar uma folha de estilo externa para html5 e css3 programação

suportes CSS3 folhas de estilo externas.

Esta técnica permite definir uma folha de estilo como um documento separado e importá-lo para suas páginas web. Para ver por que isso pode ser atraente, dê uma olhada no exemplo.

Quando você olha para o código para externalStyle.html, você pode se surpreender ao ver nenhuma informação de estilo óbvio em tudo!

externalStyle.html

Estilo externo

Esta página tem estilos definidos para os parágrafos, corpo e cabeçalho 1.

Os estilos são definidos em uma folha de estilo externa.

Onde você normalmente vê marcas de estilo (no cabeçalho), não existe um estilo. Em vez disso, você vê um tag. Esta etiqueta especial é utilizada para ligar o documento atual com outro documento.

Como definir o estilo externo

Quando você usa um estilo externo, os elementos de estilo não são incorporados no cabeçalho da página, mas em um documento totalmente separado.

Neste caso, a página é ligado a um arquivo especial chamado meuestilo.css. Este arquivo contém todas as regras CSS:

/ * Meuestilo.css * / body {background-color: # 333300-color: # FFFFFF-} h1 {color: # FFFF33-text-align: center-font: itálico 200% Fantasy-} p {background-color: # FFFF33-color: # 333300-text-align: right; border: 3px sulco # FFFF33-}

A folha de estilo se parece com um estilo de nível de página, com exceção de algumas diferenças fundamentais:

  • As regras de folhas de estilo estão contidos em um arquivo separado. O estilo não faz mais parte da página HTML, mas é um arquivo inteiramente separada armazenada no servidor. arquivos CSS geralmente terminam com a .css extensão.

  • Não há Tag. Estes não são necessários porque o estilo não é incorporado em HTML.

  • O código começa com um comentário. o / * * / par indica um comentário em CSS. Na verdade, você pode colocar comentários em CSS no nível da página. arquivos CSS externos têm frequentemente comentários neles.

  • O documento estilo não tem HTML. documentos CSS conter nada além de CSS. Isto vem mais perto do objetivo de separar estilo (no documento CSS) e conteúdo (no documento HTML).

  • O documento não está vinculado a qualquer página particular. A grande vantagem do CSS externo é a reutilização. O documento CSS não é parte de qualquer página particular, mas qualquer página pode usá-lo.

Como reutilizar um estilo CSS externa

folhas de estilo externas são realmente divertido quando você tem mais de uma página que precisa do mesmo estilo. A maioria dos sites hoje usam várias páginas, e eles devem compartilhar uma folha de estilo comum para manter a consistência.

O código mostra a facilidade com que isso é feito:

SecondPage.html

segunda página

Esta página usa o mesmo estiloexternalStyle.html.

folhas de estilo externas têm algumas vantagens enormes:



  • Uma folha de estilo pode controlar muitas páginas: Geralmente, você tem um grande número de diferentes páginas de um website que todos compartilham o mesmo estilo geral. Você pode definir a folha de estilo em um documento e ter todos os arquivos HTML consulte o arquivo CSS.

  • mudanças globais são mais fáceis: Se você estiver usando estilos externos, você faz uma alteração em um só lugar e é propagada automaticamente para todas as páginas do sistema.

  • Separação de conteúdo e design: Com CSS externo, todo o design está alojado no CSS, e os dados estão em HTML.

  • atualizações mais fáceis: Porque os parâmetros de design de todo o site são definidos em um arquivo, você pode facilmente mudar o local sem ter que mexer com arquivos HTML individuais.

A tag link

o tag é a chave para adicionar uma referência CSS a um documento HTML. o tag tem as seguintes características:

  • o tag faz parte da página HTML. Use um tag no seu documento HTML para especificar qual documento CSS será usado pela página HTML.

  • o tag só ocorre no cabeçalho. ao contrário do tag, o tag pode ocorrer apenas no cabeçalho.

  • A tag não tem presença visual. O usuário não pode ver o tag, apenas seus efeitos.

  • o ligação tag é utilizado para relacionar o documento com um outro documento. Você usa o tag para descrever a relação entre os documentos.

  • o tag tem um rel atributo, que define o tipo de relação. Por enquanto, a única relação que você vai usar é o stylesheet atributo.

  • o tag também tem um href atributo, que descreve a localização de outro documento.

tags de link são muitas vezes utilizados para ligar uma página a um documento estilo definido externamente.

A maioria das pessoas se referem aos hiperlinks criados pela âncora () Tag como hiperligações ou ligações. Isso pode levar a alguma confusão, porque, neste sentido, a tag link não criar esse tipo de link.

Como especificar um link externo

Para usar o tag para especificar uma folha de estilo externa, siga estes passos:

  1. Definir a folha de estilo.

    folhas de estilo externas são muito semelhantes aos que você já conhece. Basta colocar todos os estilos em um documento de texto separado, sem as tags.

  2. Crie um ligação elemento na área de cabeçalho da página HTML para definir a ligação entre as páginas HTML e CSS.

    Meu elemento de link parecido com este:

     
  3. Colocou o ligaçãorelacionamento ‘s, definindo a rel = stylesheet”Atributo.

    Honestamente, stylesheet é quase o único relacionamento que você nunca vai usar, por isso deve se tornar automático.

  4. Especifique o tipo de estilo, definindo tipo = text / css“.

  5. Determine a localização da folha de estilo com o href atributo.


Publicações relacionadas