1 / 9

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

deiondre
Download Presentation

Desenvolvimento Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <font>, <b>, <em>, <i>, 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 • Regra mais específica é aplicada. • Regras com declaração !important tem prioridade sobre as que não têm. Regras do usuário tem prioridade sobre as do autor. • Regras do usuário tem prioridade sobre as do autor • Regras mais específicas têm prioridade sobre as menos específicas. • 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: <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)

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

More Related