As folhas de estilo em cascata (CSS) têm muitos benefícios. Eles permitem que você use a mesma folha de estilo em todo o site. Existem duas maneiras de fazer isso.
- vinculando com o elemento LINK
<link rel = "stylesheet" href = "styles.css">
- importando com o comando @import
<style>
@import url ('http://www.yoursite.com/styles.css');
</style>
Vantagens e desvantagens das folhas de estilo externas
Uma das melhores coisas sobre folhas de estilo em cascata é que você pode usá-las para manter seu site consistente. A maneira mais fácil de fazer isso é vincular ou importar uma folha de estilo externa.
Se você usar a mesma folha de estilo externa para todas as páginas do seu site, pode ter certeza de que todas as páginas terão os mesmos estilos.
Algumas das vantagens de usar folhas de estilo externas incluem que você pode controlar a aparência de vários documentos ao mesmo tempo. Isso é especialmente útil se você trabalhar com uma equipe de pessoas para criar seu site.
Muitas regras de estilo podem ser difíceis de lembrar e, embora você possa ter um guia de estilo impresso, é tedioso ter que folheá-lo constantemente para determinar se o texto de exemplo deve ser escrito em fonte Arial de 12 pontos ou Courier de 14 pontos.
Você pode criar classes de estilos que podem ser usados em muitos elementos HTML diferentes. Se você costuma usar uma fonte Wingdings especial para dar ênfase a várias coisas em sua página, você pode usar a classe Wingdings que você configurou em sua folha de estilo para criá-los em vez de definir um estilo específico para cada instância de ênfase.
Você pode agrupar facilmente seus estilos para ser mais eficiente. Todos os métodos de agrupamento disponíveis para CSS podem ser usados em folhas de estilo externas, e isso fornece a você mais controle e flexibilidade em suas páginas.
Dito isso, também há boas razões para não usar folhas de estilo externas. Por um lado, eles podem aumentar o tempo de download se você criar links para vários deles.
Cada vez que você cria um novo arquivo CSS e o vincula ou importa para o seu documento, isso requer que o navegador da Web faça outra chamada ao servidor da Web para obter o arquivo. E as chamadas do servidor reduzem o tempo de carregamento da página.
Se você tiver apenas um pequeno número de estilos, eles podem aumentar a complexidade de sua página.
Como os estilos não são visíveis diretamente no HTML, qualquer pessoa que olhe para a página precisa obter outro documento (o arquivo CSS) para descobrir o que está acontecendo.
Como criar uma folha de estilo externa
As folhas de estilo externas são escritas da mesma maneira que as folhas de estilo embutidas e embutidas. Mas tudo que você precisa escrever é o seletor de estilo e a declaração . Você não precisa de um elemento ou atributo STYLE no documento.
Como acontece com todos os outros CSS, a sintaxe de uma regra é:
seletor {propriedade: valor; }
Essas regras são gravadas em um arquivo de texto com a extensão
styles.css
Vinculando documentos CSS
Para vincular uma folha de estilo, você usa o elemento LINK. Possui os atributos rel e href. O atributo rel informa ao navegador o que você está vinculando (neste caso, uma folha de estilo) e o atributo href contém o caminho para o arquivo CSS.
Também há um tipo de atributo opcional que você pode usar para definir o tipo MIME do documento vinculado. Isso não é necessário em HTML5, mas deve ser usado em documentos HTML 4.
Aqui está o código que você usaria para vincular uma folha de estilo CSS chamada styles.css:
<link rel = "stylesheet" href = "styles.css">
E em um documento HTML 4 você escreveria:
<link rel = "stylesheet" href = "styles.css" type = "text / css" >
Importando folhas de estilo CSS
As folhas de estilo importadas são colocadas no elemento STYLE. Você também pode usar estilos incorporados, se desejar. Você também pode incluir estilos importados em folhas de estilo vinculadas. Dentro do documento ESTILO ou CSS, escreva:
@import url ('http://www.yoursite.com/styles.css');
