Desenvolvimento Web

Desenvolvimento Web

CSS – Cascading Style Sheets

Folhas de Estilo em Cascata

Profa. Célia Taniwaki

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 <font>, <b>, <em>, <i>, etc)

– (X)HTML para estruturar– CSS para apresentar

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

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

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; }

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 */

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 Cascata1. 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 autor4. 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

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:<p style= “text-indent: 10px;”> Parágrafo com recuo de 10px </p>

– Dentro da tag <style>, colocada na seção <head> do documento (X)HTML (Estilo incorporado)

• Exemplo:<head>

<style type= “text/css”>

p {text-indent: 12px;

font-size: 12px; }

</style>

</head>

– Em um arquivo independente, salvo com a extensão .css (Folha de estilos externa)

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: <head> <link rel= “stylesheet” href= “meu_estilo.css” type = “text/css”>

</head>

Desenvolvimento Web

Documents

Transcript of Desenvolvimento Web