COMO DESENVOLVER EM CSS
Conteúdo
Quais são as formas de utilização do CSS?
Desculpa a introdução um pouco apelativa, no estilo buzzfeed, mas realmente existe uma quarta maneira de usar o CSS que não é muito falada em sites de tutorias na internet, pelo menos eu não vejo. Normalmente falam em 3 maneiras, que vou falar mais adiante, mas vou começar com essa diferente.
Nesse artigo você verá as vantagens, desvantagens, quando usar e como chamar cada um dos modos. Alguns conteúdos bem fáceis de achar na internet e outras experiências profissionais minhas que não vejo por aí.
Entre as tags <body></body>
Essa maneira não é muito falada na internet mas é uma das melhores que acho. Principalmente para configurar o CSS de página ou artigo específico. Para isso é usado a tag scoped.
Como usar ou chamar o conteúdo
<body>
<style rel="stylesheet" scoped="scoped" type="text/css"><!-- Abre o CSS-->
.classe #id subclasse {
/** Aqui são chamados os elementos e aplicado os estilos **/
}
</style><!-- Fecha o CSS-->
</body>
Desse modo você faz a chamada do CSS no <body> e pode configurar do mesmo mesmo modo de quando chama no <head> ou em um arquivo externo.
É importante fazer a chamada "<style rel="stylesheet" scoped="scoped" type="text/css">" com todos esses elementos para funcionar. Pois chamando igual no <head> apenas, não funciona.
Vantagens
Funciona em página específica;
O mesmo estilo definido em diferentes classes ou divs, sem precisar repetir códigos;
Não carrega arquivos externos.
Desvantagens
Não se aplica em todo o site;
Apenas uma página por vez;
Não faz requisição externa;
Quando usar
Em um estilo de página especifica com elementos que não serão usados em todo o site.
Configuração de artigo específico.
Paginas editadas por editores de HTML.
Arquivo extermo
Esse modo é o mais usado principalmente para a definição de leiaute do site inteiro.
Como usar ou chamar o conteúdo
Primeiro é configurado todos os elementos que serão trabalhados em um arquivo normalmente chamado de style.css que ficam dentro de assets/css. Esse caminho não é obrigatório, pode ser qualquer outro. O arquivo fica assim:
.classe #id subclasse {
/** Aqui são chamados os elementos e aplicado os estilos **/
}
Depois é chamado o arquivo dentro das tags <head> no html.
<head>
</head>
Também pode ser usado mais de um arquivo, basta duplicar a linha "<link hre..." e modificar o caminho do CSS.
Vantagens
Configurar um arquivo para todo o site;
Usar um arquivo para páginas específicas;
Mais fácil a manutenção sem precisar mexer no HTML.
Deixa o HTML mais limpo e menor.
Pode ser minimizado depois.
O navegador cacheia o arquivo para usar posteriormente.
Desvantagens
Normalmente é adicionado junto com o arquivo de header geral. Por isso para configurar conteúdo de página específica teria que chamar outro arquivo.
Cada um desses arquivos chamados é uma requisição que demora um pouco no carregamento da página.
O arquivo CSS pode não carregar por falha ou lentidão, e a página HTML ficar sem leiaute.
Quando fizer atualização deve sinalizar o navegador para atualizar o cachê.
Quando usar
No arquivo de leiaute ou estilo geral do site ou de páginas específicas.
Entre as tags <head></head>
Essa é usada para elementos carregarem mais rápido em todo o site. Também é chamado de interno.
Como usar ou chamar o conteúdo
<head>
<!-- Abre o CSS-->
<style type="text/css"><!-- Pode ser usado apenas <style> -->
.classe #id subclasse {
/** Aqui são chamados os elementos e aplicado os estilos **/
}
</style><!-- Fecha o CSS-->
</head>
É feita a configuração entre as tags <head></head> da página.
Vantagens
Carregamento mais rápido na página.
Mais fácil manutenção que o inline.
Não carrega arquivos externos.
Desvantagens
Mais complicado de configurar quando cada página tem um header.
Quando usar
Em páginas específicas que não compartilham o estilo com outras.
Em páginas que compartilham o header com outras.
Direto no elemento
É inserido o estilo em cada elemento dentro de cada tag <> HTML. Também chamado de inline.
Como usar ou chamar o conteúdo
<p style="/** Aqui são aplicados os estilos **/">
Dentro de qualquer elemento pode ser aplicado o style para ele. Nesse exemplo usei um paragrafo, mas poderia ser uma <div>, <body>, <span>, <b>, qualquer elemento visível, então apenas no <head> não funcionária.
Vantagens
Mais fácil de testar;
É considerado o mais importante pelo navegador, então se tiver conflito de estilo esse que irá aparecer normalmente.
Não altera o leiaute do site.
Não carrega arquivos externos.
Reduz requisições HTTP.
Desvantagens
Serve apenas para o elemento onde está inserido.
Não tem como configurar todos os estados de links como hover ou visited.
Mistura CSS com HTML.
Complica a manutenção pois terá que ser feita a cada elemento.
Quando usar
Para testar um estilo direto no navegador.
Configurar um estilo que será usado em apenas um elemento específico, sem alterar o leiaute do site.
É pouco usado em produção e não é recomendável.
Pode ser usado em artigo específicos ou páginas criadas com editor de HTML.
Em e-mail marketing, ou com html em geral, normalmente esse é o único modo interpretado por todos navegadores e programas de correio eletrônico.
Veja mais em:
