CSS BASICO 01
CSS
BASICO – PARTE 02
– FORMAS DE INSERIR
CSS NO HTML
O código CSS pode ser inserido em uma
página HTML de diversas formas, que vão desde a inserção direta
nas tags, até a criação de um arquivo específico para armazenar o
código separadamente.
O
código CSS fica entre as tags <style></style>
ou no comando style
e pode ser inserido no código HTML das seguintes formas:
1ª
FORMA: INSERÇÃO DIRETA NAS TAGS HTML UTILIZANDO O COMANDO STYLE
Essa forma normalmente é utilizada em
situações de improviso em que se utiliza pouco CSS. Exemplo:
|
<input
style=’background:yellow’>
|
Neste caso, a caixa de entrada input
ficaria com fundo amarelo.
2ª
FORMA: ATRAVÉS DE UMA CLASSE OU ID CSS NO HEAD DA PÁGINA HTML
No HEAD da página HTML podem ser
criados blocos com vários comandos CSS relacionados a uma
determinada tag por meio dos comandos class
ou id.
Exemplo
01: Bloco de comandos CSS relacionado para ser relacionado com class.
|
<HEAD>
<style>
.div01
{
background:
blue;
color:white;
font:
50px;
width:
200px;
height:
100px;
}
</style>
</HEAD>
<BODY>
<div
class='div01'>div com fundo azul</div>
</BODY>
|
No exemplo dado, os comandos CSS foram
aplicados a uma divisão na página HTML para que esta fique com
fundo azul, letra branca com tamanho de 50 pixels, largura de 200
pixels e altura de 100 pixels.
Exemplo
02:
Bloco de comandos CSS relacionados para ser relacionado com id.
|
<HEAD>
<style>
#div02
{
background:
green;
color:yellow;
font:
100px;
width:
400px;
height:
200px;
}
</style>
</HEAD>
<BODY>
<div
id='div02'>div com fundo verde</div>
</BODY>
|
Neste segundo exemplo, os comandos CSS
foram aplicados a uma divisão na página HTML para que esta fique
com fundo verde, letra amarela com tamanho de 100 pixels, largura de
400 pixels e altura de 200 pixels.
A
diferença entre class
e id
é que o nome dado a uma class é precedido por um ponto final(.),
enquanto que o nome dado a uma id é precedido pelo simbolo
cerquilha(#). Um outro detalhe importante que deve ser observado é
que uma class pode ser relacionada a várias tags HTML, enquanto que
uma id é única, ou seja, pode ser relacionada a apenas uma tag
HTML.
3ª
FORMA: INCORPORANDO UM ARQUIVO CONTENDO O CÓDIGO CSS A UM ARQUIVO
CONTENDO O CÓDIGO HTML
Em
um projeto de criação de site onde se utiliza muito código CSS,
criar arquivos separados, específicos para o seu armazenamento, pode
facilitar a sua manutenção. Tais arquivos CSS podem ser
incorporados aos arquivos HTML das seguintes formas:
Exemplo
01: no HEAD da página HTML com a tag LINK.
|
<HEAD>
<link
rel='stylesheet' type='text/css' href='codigo.css'/>
</HEAD>
|
Exemplo
02: no HEAD da página HTML através do comando @import.
|
<HEAD>
<style>
@import
url('codigo.css');
</style>
</HEAD>
|
Exemplo
03: no HEAD da página HTML através do comando PHP include.
|
<HEAD>
<?include(‘codigo.css’)?>
</HEAD>
|
Observação:
codigo.css é o nome do arquivo que contém as CLASS e ID que serão
utilizadas em tags do documento HTML.
ATIVIDADES
1)
Crie um arquivo chamado css01.htm e implemente 4 input (caixas de
entrada) com diferentes cor de fundo, utilizando inserção direto de
CSS.
2)
Crie um arquivo chamado css02.htm e implemente o exemplo dado,
utilizando CSS com CLASS.
3)
Crie um arquivo chamado codigo.css,
contendo uma class CSS, e incorpore-o em um arquivo HTML chamado
pagina.htm, utilizando um dos exemplos dados na 3ª forma de inserção
de código CSS.
|
Créditos:
artigo redigido em outubro de 2016 – Professor Roni Márcio Fais
– Todos os direitos reservados a www.rmfais.com.
|
