Desenvolvimento Web CSS – Cascading Style Sheets Folhas de Estilo em Cascata Profa. Célia Taniwaki.

Apresentação em tema: "Desenvolvimento Web CSS – Cascading Style Sheets Folhas de Estilo em Cascata Profa. Célia Taniwaki."— Transcrição da apresentação:

1 Desenvolvimento Web CSS – Cascading Style Sheets Folhas de Estilo em Cascata Profa. Célia Taniwaki

2 O que é CSS? É a sigla de Cascading Style Sheets, ou Folhas de Estilo em Cascata Documento no qual são definidas regras de formatação ou de estilos a serem aplicadas aos elementos estruturais de marcação Finalidade: –Retirar do (X)HTML todas as declarações relacionadas à formatação ou apresentação do documento (tags do tipo,,,, etc) –(X)HTML para estruturar –CSS para apresentar

3 Vantagens do uso de CSS Controle total sobre a apresentação do site a partir de um arquivo central Agilização da manutenção e redesign do site Saída para diferentes tipos de mídia a partir de uma versão única de (X)HTML Redução do tempo de carga dos documentos web Adequação simplificada aos critérios de acessibilidade e usabilidade Elaboração de documentos consistentes com as aplicações de usuários futuras Aumento considerável na portabilidade dos documentos web

4 Web Standards CSS – prática recomendada pelo W3C para projetos web Órgãos normatizadores incentivam: –Elaboração de documentos web: Acessíveis Usáveis Portáteis CSS – facilitam e simplificam obtenção dessas características

5 Regra CSS Unidade mínima de programação de estilos Serve para estilizar uma ou mais propriedades CSS Tem uma sintaxe própria seletor { propriedade: valor; } –seletor - identifica um elemento (X)HTML –propriedade: valor é uma declaração CSS –Exemplo: p { text-indent: 10px; }

6 Regra CSS Caracteres permitidos: –Letras de a-z, A-Z –Números de 0-9 –Caractere sublinhado, hífen, caracteres de escape –Caracteres Unicode 161-255, e de códigos numéricos Não é permitido iniciar um nome com um traço ou número Comentários CSS /* comentário CSS */

7 Efeito Cascata das CSS Método pelo qual é aplicada uma regra CSS em função do peso (importância, prioridade) da regra (quando há conflito de regras). Ordem para o efeito Cascata 1.Regra mais específica é aplicada. 2.Regras com declaração !important tem prioridade sobre as que não têm. Regras do usuário tem prioridade sobre as do autor. 3.Regras do usuário tem prioridade sobre as do autor 4.Regras mais específicas têm prioridade sobre as menos específicas. 5.As declaradas por último na sequência de regras na folha de estilos

8 Aplicação das CSS As CSS podem ser salvas em 3 lugares: –Dentro da própria tag (X)HTML que se quer estilizar (Estilo inline) Exemplo: Parágrafo com recuo de 10px –Dentro da tag, colocada na seção do documento (X)HTML (Estilo incorporado) Exemplo: p {text-indent: 12px; font-size: 12px; } –Em um arquivo independente, salvo com a extensão.css (Folha de estilos externa)

9 Folha de estilo externa Arquivo com extensão.css que pode ser linkado a um ou vários documentos (X)HTML Maneira mais eficaz de se formatar todo um site, mudar sua aparência, parcial ou globalmente Uso do elemento link, dentro da seção head Exemplo: <link rel= “stylesheet” href= “meu_estilo.css” type = “text/css”>