CSS – CASCADING STYLE SHEETS
FOLHAS DE ESTILO EM CASCATA
Documento onde são definidas regras de formatação ou de estilos,
a serem aplicadas aos elementos estruturais de marcação.
O QUE É CSS?
TRAJETÓRIA
1990 – Separar Conteúdo de Layout
Style Sheet – início em 1994 por Hakon Lie
1995 - Propostada apresentada à recém criada W3C – World Wide Web Consortium
1997 – recomendação oficial pelo W3C do CSS de nível 1
Em Maio de 1998, lançada a recomendação do CSS de nível 2 CSS de nível 3 meados de 2000 estando em implantação até hoje
Qual é finalidade do CSS?
Retirar do HTML toda e qualquer declaração
que vise a formatação, na apresentação do documento.
Como por exemplo tags do tipo
<font>, <bold>, <b>, <i>....etc.
Quais as vantagens de se usar CSS ?
- controle total sobre a apresentação do site a partir de um arquivo central;
- agilização da manutenção e design do site;
- saída para diferentes tipos de mídia a partir de uma versão única de HTML;
- redução do tempo de carga dos documentos Web;
- elaboração de documentos consistentes;
- aumento considerável na portabilidade dos documentos Web.
COMO USAR?
Forma básica:
Seletor {propriedade: valor;}
Selecionador é normalmente um elemento/tag HTML que se deseja definir;
Propriedade é o atributo que se deseja alterar;
Cada propriedade pode ter um valor.
COMO USAR?
Exemplo
body{color: black;}
p {text-align: center; color: red;}
h1,h2,h3,h4,h5,h6 {color: green;}
Exemplo 2
p {text-indent:10px;} é uma regra CSS p é o seletor
{text-indent: 10px;} é a declaração CSS text-indent - é a propriedade CSS
10px - é o valor CSS
Quais são os caracteres permitidos em regras CSS?
São as letras de a-z, A-Z, os números de 0-9, underscore, hífen e caracteres de escape como:
\a - Bell, \b - BackSpace dentre outros
A sintaxe CSS é sensível a maiúsculas/minúsculas?
Não. Regras CSS não são case sensitivas, pode-se usar maiúsculas ou minúsculas nas folhas de estilo indiferentemente. Mas somente para as declarações específicas de CSS.
Posso incluir comentários nas regras CSS?
Sim. Comentários podem e devem ser usados nas folhas de estilo. É recomendável que se faça amplo uso de comentários para fornecer informações sobre os seletores, propriedades e valores declarados.
/* comentário em CSS */
O que é declaração CSS?
Declaração CSS é o fragmento de uma regra CSS dentro dos colchetes { }. A declaração CSS compõe-se de duas partes: a propriedade e o valor.
h1 {color: #000000; /* declaração em CSS */ }
Posso atribuir mais de uma declaração a um seletor?
Sim, as declarações devem ser separadas por ponto-e-vírgula.
p {color: #000000; text-align: center; font:12px Arial;}
O que é seletor?
Seletor é uma entidade que identifica um elemento HTML ou define uma classe ou pseudo classe na qual a regra de estilo será aplicada.
p {font: 12px;}
O seletor é p (elemento HTML parágrafo) e a regra CSS escrita determina que os parágrafos terão uma fonte de tamanho 12px.
Agrupamento de seletores
Agrupamento de seletores é uma forma compacta de reunir seletores que compartilham as mesmas regras de estilo.
p {color:#000000;}
.classeb {color: #000000;}
span {color: #000000;}
Os seletores p, .classeb e span são letras na cor preta, então podemos agrupá-los assim:
p, .classeb, span {color: #000000;}
Seletores agrupados devem ser separados por vírgula.