Criando um site – Parte 9

Continuando…
Veja abaixo instruções simples de CSS que podem valer a pena:

Termos:
cor: Cor em hexadecimal (#FF0000) ou em inglês (red)
Número: Pode ser medida em píxels (12px) em pontos (10 pt)  ou outra distância numérica
(opção1|opção2|opção3): Opções possíveis para a instrução

Instrução Código CSS Seletores
Aplicar Cor Normal/De Frente color: cor Todos

Aplicar Cor de Fundo

background-color: cor Todos
Adicionar Margem margin: 0 Os elementos block
Adicionar Espaçamento padding: 0 Os elementos block
Alterar tipo de bloco display: (block|inline) Todos
Deixar fonte negritada text-weight: bold Todos
Deixar fonte sublinhada text-decoration: underline Todos
Deixar fonte itálica font-style: italic Todos
Deixar fonte maiúscula text-transform: uppercase Todos
Deixar fonte minúscula text-transform: lowercase Todos
Mudar cor da borda border-color: cor Elementos block
Mudar tipo da borda border-style: (solid|dotted|dashed|inset|outset) Elementos block
Mudar espessura da borda border-size: 1px Elementos block

Eles podem ser aplicados nos elementos que estão na coluna “Seletores”.

Exercício: Coloque uma folha de estilos CSS no seu site. em HTML

Atributos ID e CLASS

O uso de CSS nos permite selecionar tags com um certo requisito. Mas e quando não queremos selecionar certas tags? Aí entra os atributos id e class. Eles são usados como seletores CSS e para aplicar efeito Javascript (parte 12). São aplicados nas tags div e span.

O uso dele é semelhante a isso:

<div id="intro">O Ubuntu troca o LXDM pelo LightDM, tornando login bem mais interessante e leve</div>
<span id="creditos">Fonte: Guia Do Hardware</span>

A diferença entre o id e o class é que:
»o id só pode ser usado uma vez por página
»o class pode ser usado várias vezes por página

O seletor do CSS para id deve ser assim:
#valid
onde valid é o valor do atributo id.

O seletor do CSS para class deve ser assim:
.valclass
onde valclass é o valor do atributo class.

Exercício: Crie uma página usando as tags div e span.

Na próxima parte eu vou ensinar alguns seletores avançados e mostrar alguns sites para se aprender mais seletores CSS – afinal, existem muitos!

Anúncios

Publicado em 16/05/2011, em Nível alto, Nível médio, tutoriais e marcado como , , . Adicione o link aos favoritos. 1 comentário.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: