Visão Geral CSS
O CSS é uma simples linguagem de design que visa facilitar o processo de estilização de um web site. Com o CSS, você pode controlar a cor do texto, o estilo das fontes, o espaçamento entre parágrafos, o tamanho e posicionamento de colunas e quais imagens e cores de fundo de fundo devem ser utilizadas, bem como uma variedade de efeitos.
O CSS foi criado em uma linguagem fácil de entender e aprender, mas oferece um controle poderoso sobre a forma como um documento é exibido. Na maioria das vezes, o CSS é combinado com linguagens de marcação HTML ou XHTML.
Essas linguagens de marcação contêm os textos que você vê em uma pagina da web – os parágrafos, cabeçalhos, listas e tabelas – são o elo com documento da web. Eles contêm dados da página, enquanto o documento CSS contém a informação de como deverá ser o visual dessa pagina.
Existem três formas diferentes na qual podemos associar estilos a elementos de uma página web:1- Usar um arquivo CSS externo
Você pode colocar as suas regras de estilo em um arquivo externo e em seguida vincular este arquivo a qualquer página web na qual você deseja que as regras de estilo sejam aplicadas. Para referenciar um arquivo CSS externo a partir de um formulário web você deve incluir tag no elemento head da página:
<link rel="stylesheet" type="text/css" href="carambola.css" />
2- Usar um arquivo CSS embutido
Você pode colocar as regras de estilo para uma página no interior das tags <style type="text/css"> dentro do cabeçalho da página (seção head).
3 - Usar regras de estilos inline
Utilizar estilos inline permite a você definir estilos para um único elemento usando um atributo style.
Seletores - http://www.w3c.br/divulgacao/guiasreferencia/css2/
Seletor – Classe
O seletor de classe é representando por um ponto , “.”, e tem como alvo elementos com um determinado valor para seu atributo class. A regra a seguir aplica-se a todo elemento parágrafo , cuja classe tenha o nome “info”.
Seletor – ID
O seletor ID é representado por um sinal de “tralha” (#) , e tem como alvo elementos com um determinado valor de atributo ID. A regra a seguir aplica-se a todos os elementos cujo nome de ID seja “info” , independentemente do tipo de elemento.
Comentários em CSS
Os comentários servem para explicar seu código, e principalmente para ajuda-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. O comentário introduzido no código será ignorado pelo navegador. Exemplo:
As unidades em CSS se dividem em:
Você pode colocar as regras de estilo para uma página no interior das tags <style type="text/css"> dentro do cabeçalho da página (seção head).
Utilizar estilos inline permite a você definir estilos para um único elemento usando um atributo style.
Seletores - http://www.w3c.br/divulgacao/guiasreferencia/css2/
Seletor – Classe
O seletor de classe é representando por um ponto , “.”, e tem como alvo elementos com um determinado valor para seu atributo class. A regra a seguir aplica-se a todo elemento parágrafo , cuja classe tenha o nome “info”.
a. p.info {background:#ff0;}
O seletor ID é representado por um sinal de “tralha” (#) , e tem como alvo elementos com um determinado valor de atributo ID. A regra a seguir aplica-se a todos os elementos cujo nome de ID seja “info” , independentemente do tipo de elemento.
a. #info {background:#ff0;}
Comentários em CSS
Os comentários servem para explicar seu código, e principalmente para ajuda-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. O comentário introduzido no código será ignorado pelo navegador. Exemplo:
a. “ /* Isto é um teste de comentário */ ”
As unidades em CSS se dividem em:
Relativas:
Px
Em Tamanho relativo à fonte utilizada no elemento ao qual está inserido
EX
Absolutas:
In Polegadas (1 polegada = 2.54 cm)
Cm Centímetros
Mm Milímetros
Pt Pontos (1pt = 1/72 polegadas)
Pc Picas (1 pica = 12 pontos)
Porcentagem
% Porcentagem
0 Valor ‘0’ não requer atribuição de unidade
