Tutorial CSS – CSS Básico

tutorial-css

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).

Redação Dicas Diárias O site Dicas Diárias tem mais de uma década no ar, desde 2009 oferecemos as melhores dicas para você ficar antenado em tudo o que acontece. Estamos passando por reformulações constantes e atualizações em nosso conteúdo.
Deixe seu comentário