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 em suas páginas web. Para ver por que isso pode ser atraente, dê uma olhada no exemplo.

image0.jpg

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

externalStyle.html

Estilo externa

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 ficheiro especial chamada 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 é mais parte da página HTML, mas é um arquivo totalmente separado armazenado no servidor. arquivos CSS geralmente terminam com a .css extensão.

  • Não há etiquetas. 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 faz 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.

image1.jpg

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 a adição de uma referência CSS para um documento HTML. o marcação 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á utilizado pela página HTML.

  • o tag só ocorre no cabeçalho. Ao contrário da marcação, 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 os seus efeitos.

  • o ligação tag é usada para relacionar o documento com 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 relacionamento. Por enquanto, a única relação que você vai usar é a stylesheet atributo.

  • o marcação 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 os hiperlinks criados pela marca de âncora () como hiperlinks ou links. Isso pode levar a alguma confusão, porque, nesse sentido, a tag link não criar esse tipo de link.

Como especificar um link externo

Para utilizar 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 e.

  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çãoO relacionamento da definindo a rel = "stylesheet"Atributo.

    Honestamente, stylesheet é quase o único relacionamento que você nunca vai usar, de modo que este deve tornar-se automática.

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

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

menu