Tutorial CSS – CSS Básico
Veja dicas de CSS Básico
CSS é uma linguagem de programação ótima que dá estilo ao HTML ela é escrita de uma form bem básica e fácil que pode ser escrito com uma arquivo a parte entre as tag do HTML ou inline que é direto no elemento usando o parametro style
Para utilizar com um arquivo externo você chama ele desta forma
Para utilizar no arquivo HTML você usa desta forma
Com o CSS você pode adicionar estilo a ids classes e pseudo-classes chamando elas dessa forma
#root – exemplo de id designada pelo cerquilho, joga da velha, que seja, antes do nome
.links – exemplo de classe designada pelo ponto antes do nome
html – exemplo de pseudo-classe designada pelo nome por exemplo, div, span, a…
Os comentários no css são adicionados desta forma, podendo ser um bloco ou uma linha.
/* Comentário */
O código CSS as vezes se torna chato e dificil com a questão de ser cross browser ou seja funcionar de forma idêntica ou parecida em todos os browsers e isso é uma tarefa bem chata. Com a morte aos poucos do highlander da internet que é o i.e 6 isso tem começado a ficar um pouco menos chato mas não tão trabalhoso como é normalmente.
O CSS tem o conceito de herança da programação orientada a objeto que é ótimo para muitas coisas você pode usar um id que agrega diversas classes e ir modificando detalhes de algumas ajudando o código e fazendo com que você poupe trabalho e peso no arquivo.
Agora vou passar aqui alguns trechos de código CSS e na próxima parte eu explico mais alguns outros conceitos e dicas sobre esta linguagem muito boa
html,body{
padding:0;
margin:0;
font-family:verdana,tahoma;
font-size:13px;
}
Acima eu coloquei aqui um exemplo de zeramento do html e a definição da fonte que será o padrão do documento e também o tamanho da fonte os dois podem ser alterados no decorrer do código mas todos que não tiverem alteração seguirão este padrão.
#bannner{
position:absolute;
z-index:500;
width:300px;
height:300px;
left:0;
top:0;
}
Acima eu coloquei um exemplo de um banner que fica acima do conteudo do site (position:absolute) e que irá aparecer na camada 500 (z-index:500) eu uso números exagerados neste parametro para não acontecer alguma falha, este banner mede 300 pixels de largura (width) por 300 de altura (height) e fica fixo no ponto zero apartir do topo (top) e no ponto zero apartir da esquerda (left).
