O QUE É CSS? - BENEFÍCIOS DE UTILIZAÇÃO
CSS é a abreviatura para Cascading Style Sheets: Folha de Estilos em Cascata
O CSS formata a informação entregue pelo HTML. Essa informação pode ser qualquer coisa: imagem, texto, vídeo, áudio ou qualquer outro elemento criado. Essa formatação na maioria das vezes é visual, mas não necessariamente. No CSS Aural, manipula-se o áudio entregue ao visitante pelo sistema de leitura de tela. Nós controlamos volume, profundidade, tipo da voz ou em qual das caixas de som a voz sairá. De certa forma estamos formatando a informação que está em formato de áudio e que o visitante está consumindo ao entrar no site utilizando um dispositivo ou um sistema de leitura de tela. O CSS prepara essa informação para que ela seja consumida da melhor maneira possível. Contudo proporciona mais opções e é mais preciso e sofisticado, sendo suportado também por todos os navegadores atuais.
Os benefícios concretos do uso de CSS incluem:
*Controle do layout de vários documentos a partir de uma simples folha de estilos;
*Maior precisão no controle do layout;
*Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);
*Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.
Link: http://pt-br.html.net/tutorials/css/lesson1.php
FORMAS DE UTILIZAÇÃO
EXTERNA
Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html. O arquivo de folha de estilo deve ser gravado com a extensão .css.
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo).
<head>
...
<link rel="stylesheet" type="text/css" href="estilo.css">
...
</head>
A sintaxe geral para importar uma folha de estilo chamada estilo.css é mostrada a seguir:
<head>
...
<style type="text/css">
@import url("estilo.css");
</style>
...
</head>
O navegador "lerá" as regras de estilo do arquivo estilo.css, e formatará o documento de acordo com elas.
Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser gravadas com uma extensão .css
.
EMBUTIDA
Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.
Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada.
As regras de estilo incorporadas e válidas para o documento, são declaradas na seção head do documento com a tag de estilo <style>, conforme sintaxe mostrada a seguir:
<head>
...
<style type="text/css">
<!--
body {
background: #000;
url(imagens/minhaimagem.gif);
}
h3 {
color: #f00;
}
p {
margin-left: 15px;
padding:1.5em;
}
-->
</style>
...
</head>
O navegador "lerá" as regras de estilo na própria página, e formatará o documento de acordo com elas. Nota: Um navegador ignora normalmente as tags desconhecidas. Isto significa que um navegador antigo que não suporte estilos, ignorará a tag <style>, mas o conteúdo da tag será mostrado na tela.
É possível impedir que um navegador antigo mostre o conteúdo da tag,"escondendo-o" através do uso da marcação de comentário do HTML.
Observe a inclusão dos símbolos <!-- (abre comentário) --> (fecha comentário) no código acima. Nos dias atuais mesmo os navegadores mais antigos ainda em uso suportam CSS e a prática de se marcar regras de estilo com sinais de comentário HTML está em desuso.
INLINE
Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML com uso do atributo style.
Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento.
A sintaxe para aplicar estilo inline é mostrada a seguir:
Aqui um parágrafo de cor preta e com 5px nas 4 margens.
</p>
Link: http://maujor.com/tutorial/insetut.php
TIPOS DE SELETORES
Seletor é uma entidade que faz parte da regra CSS e define o alvo dessa regra. O alvo é um elemento integrante da árvore do documento HTML (ou elementos). Vejamos a sintaxe da regra CSS:
seletor {propriedade: valor;}
Um seletor pode ser simples ou combinado. Um seletor simples é um seletor qualquer sozinho, já um seletor combinado consiste de dois ou mais seletores simples separados por um elemento de combinação. Os elementos de combinação são o espaço em branco, o sinal maior que (>) e o sinal de adição (+). Esses elementos de combinação definem respectivamente o seletor descendente, o seletor filho e o seletor adjacente filho do mesmo pai (irmão).
SELETOR CLASSE
Com um seletor classe você pode definir estilos diferentes para o mesmo tipo de elemento HTML. Talvez você queira ter em seu documento dois tipos de cabeçalhos diferentes. Um cabeçalho h1 na cor verde, alinhado a esquerda e um cabeçalho h1 na cor vermelha alinhado a direita.
Veja como ficaria a sintaxe abaixo:
h1.cabecalho{
text-align: left;
Color: #008000;
}
text-align: left;
Color: #008000;
}
h1.cabecalho2{
Text-align: right;
Color: #ff0000;
}
Text-align: right;
Color: #ff0000;
}
A sintaxe usada para seletores de classe é bem simples, consiste em um sinal de ponto (.) e logo em seguida o nome da classe.
*menu
*cabeçalho
*rodapé
Todos esses nomes são nomes válidos. Veja algumas dicas para criar nomes corretamente:
*Use sempre letras minúsculas
*Evite iniciar nomes com números
*Evite usar caracteres especiais
Veja o exemplo:
.center{
text-align: center;
color: #ffffff;
}
text-align: center;
color: #ffffff;
}
Na aplicação abaixo, os dois elementos p e h1 estão usando a mesma classe .center
<h1 class="center">Este cabeçalho está centralizado</h1>
<p class="center">Este parágrafo está centralizado</p>
<p class="center">Este parágrafo está centralizado</p>
Neste exemplo todos os parágrafos que usarem a classe .center ficarão com seu texto centralizado. E todos os elementos h1 também ficarão centralizados. Da mesma forma qualquer elemento html que utilize a classe .center possuirão as mesmas características.
SELETOR ID
Um ID é definido como um identificador que é único para um elemento. Dentro do contexto de estilização o seletor id é muito semelhante à classe.
A sintaxe de uma id é mostrada abaixo: #nome da id
Veja a seguir alguns exemplos de nomes de id’s válidos:
#menu #principal
#main #body
#main #body
A sintaxe de uma "id" sempre começa com uma # (tralha) seguida pelo nome da id. Diferente da classe, que você usa quantas vezes quiser dentro de um documento, o identificador id só pode ser referenciado uma vez em um documento ou página.
Só para reforçar:
Um id só pode ser usado uma única vez no mesmo documento, quando houver apenas uma ocorrência de um elemento por página, use uma id e quando houver mais de uma ocorrência por página use uma classe.
Veja abaixo alguns exemplos de id’s válidos:
Exemplo 1:
#cor1{
color: #ff0000;
background-color: #c1c1c1;
}
color: #ff0000;
background-color: #c1c1c1;
}
Exemplo 2:
div #main{
Background-color: #008000;
}
Background-color: #008000;
}
No exemplo 1 definimos a id "cor1" com as seguintes regras:
color: #ff0000; ( cor do texto vermelho )
background-color: #c1c1c1; ( cor de fundo cinza )
background-color: #c1c1c1; ( cor de fundo cinza )
Exemplo de uso:
<p id="cor1">Parágrafo usando a id "cor1"</p>
No exemplo 2 definimos apenas uma cor de fundo para a div "main":
background-color: #008000; ( cor de fundo verde ).
Exemplo de uso:
<div id="main">Elemento div usando o id main</div>
Um id é um identificador e só pode ser usado uma vez em cada página.
SINTAXE
Comentário: Você pode inserir comentários nas CSS para explicar seu código, e principalmente ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. Daqui há alguns meses a menos que você seja um privilegiado, terá esquecido a maior parte daquilo que você levou horas para "bolar". O comentário introduzido no código, será ignorado pelo navegador. Um comentário nas CSS começa com o "/*", e termina com " */". Veja o exemplo abaixo:
/* este é um comentário*/
p {
font-size: 14px; /* este é outro comentário*/
color: #000;
font-family: Arial, Serif;
}
Regras CSS: Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor.
Seletor: É o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
Propriedade: É o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).
Valor: É a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)
Link 2: http://sabercss.com/index.php
UNIDADES DE MEDIDA
As unidades de medida de comprimento CSS referem-se a medidas na horizontal ou na vertical (e em sentido mais amplo, em qualquer direção).
O formato para declarar o valor de uma unidade de medida CSS é um número com ou sem ponto decimal imediatamente precedido do sinal '+' (mais) ou do sinal '-' (menos), sendo o sinal '+' (mais) o valor "default" e imediatamente seguido por uma unidade identificadora (medida CSS válida - p.ex., px, em, deg, etc...). A unidade identificadora é opcional quando se declara um valor '0' (zero).
Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida. A adoção de valores negativos podem complicar a formatação do elemento e devem ser usados com cautela. Se valores negativos não forem suportados pela aplicação de usuário, eles serão convertidos para o valor mais próximo suportado (e isso pode tornar-se desastroso para um layout).
RELATIVA: é aquela tomada em relação a uma outra medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas são mais apropriadas para ajustes de uso em diferentes tipos de mídia. (p. ex., de uma tela de monitor para uma impressora laser).
O valor é tomado em relação:
- em: ...ao tamanho da fonte ('font-size') herdada;
- ex: ...a altura da letra x (xis) da fonte herdada;
- px: ...ao dispositivo (midia) de exibição;
- %: ... a uma medida previamente definida.
em: A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade font-size referencia-se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento (p. ex: <html> em documentos html) referencia-se ao valor inicial (default) do tamanho de fonte (letra).
Os exemplos abaixo esclarecem as definições:
h1 { line-height: 1.2em }
line-height de <h1> será 20% maior do que o tamanho das letras de <h1>
h1 { font-size: 1.2em }
font-size de <h1> será 20% maior do que o tamanho das letras herdado por <h1> p.ex.: se h1 estiver contido numa div com font-size=10px então font-size de h1 = 12px.
ex: A unidade de medida de comprimento ex é igual a altura da letra x(xis) minúscula).
pixel "px": A unidade de medida de comprimento pixel é relativa a resolução do dispositivo de exibição (p.ex: a tela de um monitor). Sem entrar em maiores considerações teóricas a mais simplista definição de pixel que encontrei é esta:
Pixel é o menor elemento em um dispositivo de exibição, ao qual é possivel atribuir-se uma cor.
Considere um dispositivo de exibição construido com uma densidade de 90 dpi (dpi = dots per inch = pontos por polegada). Por definição, a referência padrão para pixel é igual a um ponto no citado dispositivo. Daí pode-se concluir que 1 pixel naquele dispositivo de exibição é igual a 1/90 inch = 0,28 mm.
Para uma densidade de 300 dpi 1 pixel é igual a 1/300 inch = 0,085mm. Assim, pixel é uma medida relativa a resolução do dispositivo de exibição.
porcentagem "%": Valores em percentagem são relativos a um outro valor anterior declarado. Este valor anterior há que estar bem definido e em geral esta definição está em uma determinada propriedade do mesmo elemento, na propriedade do elemento "pai" (por exemplo: uma medida CSS de comprimento) ou mesmo no contexto geral da formatação (por exemplo: a largura do bloco de conteúdo).
p { font-size: 10px }
p { line-height: 120% }/*120% de'font-size'=12px*/
ABSOLUTA: é aquela que não esta referenciada a qualquer outra unidade e nem é herdada. São unidades de medida de comprimento definidas nos sistemas de medidas pela física e em fim são os conhecidos "centímetros, polegadas etc...). São indicadas para serem usadas quando as mídias de exibição são perfeitamente conhecidas.
Abaixo exemplos ilustrativos do uso destas medidas de comprimento CSS:
div { margin: 1.5em; }
h4 { margin: 2ex; }
p { font-size: 14px; }
.classe { padding: 90%; }
hr { width: 14pt; }
h1 { margin: 1pc; }
h2 { font-size: 4mm; }
p.classe { padding: 0.3cm; }
h5.classe { padding: 0.5in; }
Abaixo eis as unidades absolutas:
in: Polegadas (1 polegada = 2.54 cm)
cm: Centímetros
mm: Milímetros
pt: Pontos (1 pt = 1/72 polegadas)
pc: Picas (1 pica = 12 pontos)
