Os sites são uma combinação de estilo e estrutura e, na Web atual, é uma prática recomendada manter esses dois aspectos de um site separados um do outro.
O HTML sempre foi o que fornece um site com sua estrutura. Nos primeiros dias da Web, o HTML também continha informações de estilo. Elementos como o As tags estavam espalhadas pelo código HTML, adicionando informações de aparência e comportamento juntamente com informações estruturais. O movimento dos padrões da Web nos levou a mudar essa prática e, em vez disso, a inserir todas as informações de estilo em CSS ou Cascading Style Sheets. Levando isso um passo adiante, as recomendações atuais são que você use o que é conhecido como "folha de estilo externa" para as necessidades de estilo do seu site.
Vantagens e desvantagens de folhas de estilo externas
Uma das melhores coisas sobre o Cascading Style Sheets é que você pode usá-las para manter todo o site consistente. A maneira mais fácil de fazer isso é vincular ou importar uma folha de estilos externa. Se você usar a mesma folha de estilos externa para todas as páginas do seu site, pode ter certeza de que todas as páginas terão o mesmo estilo. Você também pode facilitar a realização de alterações para o futuro. Como todas as páginas usam a mesma folha de estilos externa, qualquer alteração nessa folha afetará todas as páginas do site. Isso é muito melhor do que ter que mudar cada página individualmente!
Vantagens de folhas de estilo externas
- Você pode controlar a aparência de vários documentos de uma só vez.
- Isso é especialmente útil se você trabalha 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, é ineficiente e tedioso folhear continuamente para determinar se o texto de exemplo deve ser escrito em fonte Arial de 12 pontos ou courier de 14 pontos. Por ter tudo em um só lugar, e como aquele lugar também é onde você faria mudanças, você pode tornar a manutenção muito mais fácil.
- Você pode criar classes de estilos que podem ser usadas em muitos elementos HTML diferentes.
- Se você costuma usar um determinado estilo de fonte para dar ênfase a várias coisas em sua página, você pode usar um atributo de classe que você configura na sua folha de estilo para obter essa aparência, em vez de definir um estilo específico para cada instância da página. ê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 proporciona mais controle e flexibilidade às suas páginas.
Desvantagens de folhas de estilo externas
- Folhas de estilo externas podem aumentar o tempo de download, especialmente se forem extremamente grandes. Como o arquivo CSS é um documento separado que deve ser carregado, ele afetará o desempenho para realizar esse download.
- As folhas de estilo externas ficam grandes rapidamente, pois é difícil dizer quando um estilo não está mais em uso porque ele não é excluído quando a página é removida. O gerenciamento adequado de seus arquivos CSS é importante, especialmente se várias pessoas estiverem trabalhando no mesmo arquivo.
- Se você tiver apenas um site de uma única página, talvez não seja necessário ter um arquivo externo para CSS, pois você tem apenas uma página para estilizar. Muitos dos benefícios do CSS externo são perdidos quando você tem apenas um site de página.
Como criar uma folha de estilos externa
Folhas de estilo externas são criadas com uma sintaxe semelhante às folhas de estilo de nível de documento. No entanto, tudo o que você precisa incluir é o seletor e a declaração. Assim como em uma folha de estilo no nível do documento, a sintaxe de uma regra é:
seletor {propriedade: valor;}
Salve essas regras em um arquivo de texto com a extensão .css. Isso não é obrigatório, mas é um bom hábito entrar, para que você possa reconhecer imediatamente suas folhas de estilo em uma listagem de diretórios.
Depois de ter um documento de folha de estilo, você precisa vinculá-lo às suas páginas da Web. Isso pode ser feito de duas maneiras:
- Vinculando
- Para vincular uma folha de estilos, você usa a tag HTML. Isso tem os atributos rel, tipoe href. O atributo rel informa o que você está vinculando (neste caso, uma folha de estilo), o tipo define o tipo MIME para o navegador e href é o caminho para o arquivo .css.
- Importando
- Você usaria uma folha de estilos importada em uma folha de estilos no nível do documento para poder importar os atributos de uma folha de estilos externa sem perder nenhum documento específico. Você o chama de maneira semelhante a chamar uma folha de estilos vinculada, mas deve ser chamada dentro de uma declaração de estilo de nível de documento. Você pode importar quantas folhas de estilo externas precisar para manter seu site.
Artigo original de Jennifer Krynin. Editado por Jeremy Girard em 8/8/17
