XSystemX
Usuário XPZ
E aew galera da Xpzone. Encontrei um tutorial, na internet, de como inserir CSS em uma página html. No tutorial, são 3 métodos que podem ser usados.
INSERINDO CSS NA PÁGINANesta lição, irei detalhar os 3 métodos que podemos usar para inserir estilos CSS em uma página.
MÉTODO 1: ARQUIVO EXTERNO CSSEste é o método que apresenta maior versatilidade. Um arquivo externo CSS pode ser ligado a quantas páginas desejarmos, desta forma deixando a manutenção de um site muito mais fácil (apenas um arquivo CSS pode controlar o visual de um site inteiro). Para este método, utilizamos o elemento link, da seguinte forma:
1
<link href="css/arquivo.css" rel="stylesheet">
A tag link é uma tag que auto-fecha, assim como br e meta. O atributo href indica o endereço do arquivo CSS (hiper-referência), neste exemplo um arquivo chamado "arquivo.css" dentro de uma pasta "css". O atributo rel determina a relação deste "link" com a página, aqui sendo stylesheet ou folha de estilos. Se estivéssemos utilizando a sintaxe XHTML, também é necessário o atributo type com o valortext/css.
Atenção: a tag link não é utilizada para fazer "links" no site como dizemos informalmente. Para links, é utilizada a tag a (anchor or âncora), que veremos na unidade 3.
Este método é o que tem menor precedência em relação aos outros. Ou seja, estilos aplicados utilizando os outros métodos abaixo terão preferência de aplicação em caso de um conflito (estilos aplicados a um mesmo elemento). Veremos mais detalhes sobre cascata, herança e precedência na unidade 2.
MÉTODO 2: TAG STYLECom este método, aplicamos estilos apenas na página onde o elemento está inserido. Para isso, utiliza-se a tag style. Exemplo:
1
2
3
4
5
<style>
p {
color: red;
}
</style>
No exemplo acima, os estilos definifos aplicarão a cor vermelha para todos os parágrafos do documento HTML. Todos os elementos style devem ficar dentro do elemento head de uma página.
Os estilos em uma tag style tem precedência sobre os estilos em um arquivo externo.
MÉTODO 3: ATRIBUTO STYLEEste é o método que deve ser menos utilizado, por ir contra a divisão de um página em 3 camadas, como vimos anteriormente. Utilizando o atributo style, podemos aplicar estilos a um elemento específico. Exemplo:
1
<p style="color: red;">Texto</p>
No exemplo acima, aplicamos a cor vermelha apenas para um parágrafo escolhido (existem maneiras melhores de se selecionar apenas um elemento ou grupo de elementos para aplicação de estilos). Este método é chamado de "inline styles" (ou estilos em linha) por serem localizados junto com o código HTML. Ele tem precedência de aplicação sobre todos os outros.
Porém, seu uso não é recomendado, pois mistura o código CSS com o HTML e dificulta a manutenção do site, além de ir contra ideia de separação da página em camadas. Portanto, o seu uso esporádico deve ser feito com cuidado e bom senso.
Fonte / Créditos:
INSERINDO CSS NA PÁGINANesta lição, irei detalhar os 3 métodos que podemos usar para inserir estilos CSS em uma página.
MÉTODO 1: ARQUIVO EXTERNO CSSEste é o método que apresenta maior versatilidade. Um arquivo externo CSS pode ser ligado a quantas páginas desejarmos, desta forma deixando a manutenção de um site muito mais fácil (apenas um arquivo CSS pode controlar o visual de um site inteiro). Para este método, utilizamos o elemento link, da seguinte forma:
1
<link href="css/arquivo.css" rel="stylesheet">
A tag link é uma tag que auto-fecha, assim como br e meta. O atributo href indica o endereço do arquivo CSS (hiper-referência), neste exemplo um arquivo chamado "arquivo.css" dentro de uma pasta "css". O atributo rel determina a relação deste "link" com a página, aqui sendo stylesheet ou folha de estilos. Se estivéssemos utilizando a sintaxe XHTML, também é necessário o atributo type com o valortext/css.
Atenção: a tag link não é utilizada para fazer "links" no site como dizemos informalmente. Para links, é utilizada a tag a (anchor or âncora), que veremos na unidade 3.
Este método é o que tem menor precedência em relação aos outros. Ou seja, estilos aplicados utilizando os outros métodos abaixo terão preferência de aplicação em caso de um conflito (estilos aplicados a um mesmo elemento). Veremos mais detalhes sobre cascata, herança e precedência na unidade 2.
MÉTODO 2: TAG STYLECom este método, aplicamos estilos apenas na página onde o elemento está inserido. Para isso, utiliza-se a tag style. Exemplo:
1
2
3
4
5
<style>
p {
color: red;
}
</style>
No exemplo acima, os estilos definifos aplicarão a cor vermelha para todos os parágrafos do documento HTML. Todos os elementos style devem ficar dentro do elemento head de uma página.
Os estilos em uma tag style tem precedência sobre os estilos em um arquivo externo.
MÉTODO 3: ATRIBUTO STYLEEste é o método que deve ser menos utilizado, por ir contra a divisão de um página em 3 camadas, como vimos anteriormente. Utilizando o atributo style, podemos aplicar estilos a um elemento específico. Exemplo:
1
<p style="color: red;">Texto</p>
No exemplo acima, aplicamos a cor vermelha apenas para um parágrafo escolhido (existem maneiras melhores de se selecionar apenas um elemento ou grupo de elementos para aplicação de estilos). Este método é chamado de "inline styles" (ou estilos em linha) por serem localizados junto com o código HTML. Ele tem precedência de aplicação sobre todos os outros.
Porém, seu uso não é recomendado, pois mistura o código CSS com o HTML e dificulta a manutenção do site, além de ir contra ideia de separação da página em camadas. Portanto, o seu uso esporádico deve ser feito com cuidado e bom senso.
Fonte / Créditos: