CSS. Cascading Style Sheets Style Sheets

Tamanho: px

Começar a partir da página:

Download "CSS. Cascading Style Sheets Style Sheets"

Fernando Benke Castelo
7 Há anos
Visualizações:

1 CSS Cascading Style Sheets Style Sheets

2 Agenda Histórico Definição Limitações do CSS-1 CSS2 - Características Por que usar CSS? Vantagens Sintaxe Básica Como inserir uma folha de Estilo Indentificando e agrupando elementos Algumas Propriedades Exemplos Referências

3 Histórico A especificação CSS-1 foi criada pela Microsoft (1996); A W3C aprovou, formalizou e recomendou a especificação; 1998 surge o CSS-2, como extensão da CSS-1 e resolvendo algumas limitações desta.

4 CSS - Definição Cascading Style Sheets Styles descrevem como os documentos dever ser apresentados; Styles são normalmente armazenados em Style Sheets; Múltiplas definições de estilo vão cascatear em uma.

5 Limitações do CSS-1 Atribui estilos somente a conteúdo que já aparece no documento. Não pode adicionar conteúdo, mesmo que simples pontuações; Não é capaz de transformar o conteúdo, como aplicar ordenação, etc; Não tem suporte para tabelas; Não consegue manipular texto em diferentes ordens, como acontece em Árabe, Chinês, Hebreu, etc.

6 CSS2 - Características Permite selecionar e formatar mais precisamente o elemento no documento; Suporte a tabelas; Suporte a linguagens não ocidentais; Suporte a estilos orais: especifica não como um documento deve ser renderizado mas sim como deve ser lido em voz alta; Entre outras

7 Por que usar CSS? ;( HTML XML não tem um conjunto finito de tags (como XML, por si só, não tem semântica relacionada à apresentação; Um processador XML genérico não tem idéia do que está representado em um documento XML; XML markup usualmente não incluem informações de formatação; A informação em um documento XML pode não estar na forma em que se deseja apresentá-la; Portanto, deve existir algo que, em adição ao documento XML, forneça informações sobre a maneira que o mesmo deve ser apresentado ou processado; Solução: CSS.

8 Vantagens Separa o conteúdo da apresentação; Portanto, os autores de conteúdo não precisam se preocupar com a apresentação; Reuso de dados: o mesmo conteúdo pode ser visualizado de formas diferentes em vários contextos; Estilo customizado às preferências do usuário (acessibilidade): leitores parasimplificadolayout, cor, impressãodetamanho auditivos. Uma única folha de estilo pode definir e manter a consistência de uma coleção de documentos, por exemplo: caso um usuário queira alterar a cor de fundo de um site basta atualizar código fonte.

9 Sintaxe Básica selector {property:value} body {color:black} p {font-family:"sans serif"} p {text-align:center;color:red} h1,h2,h3,h4,h5,h6 {color:green}

10 Exemplo 1

11 Exemplo 2

12 Como inserir uma folha de Estilo São três as formas de inserção de estilo: External Style Sheet Internal Style Sheet Inline Styles

13 External Style Sheet Ideal para aplicar em várias páginas; Cada página deve linkar à página de estilo usando a tag <link>; A tag <link> deve vir no cabeçalho do arquivo.html: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> O browser irá ler as definições do arquivo mystyle.css

14 Exemplo External Style Sheet Para página default.htm quer a folha de estilo style.css Faz-se a seguinte referência:

15 External Style Sheet

16 External Style Sheet Uma outra forma de usar a declaração externa é importando a folha de estilo: <head> <style url("estilo.css"); </style> </head> <head> <style "dojo/dojo/resources/dojo.css"; </style> </head>

17 Internal Style Sheet Usado quando um documento tem um estilo único; O estilo é definido no cabeçalho do arquivo.html a partir da tag <style>: <head> <style type="text/css"> hr {color:sienna} p {margin-left:20px} body {background-image:url("images/back40.gif")} </style> </head>

18 Inline Styles Usado quando um estilo deve ser aplicado num único elemento; Mistura o conteúdo com a apresentação; O estilo é definido dentro do elemento: <p style="color:sienna;margin-left:20px">this is a paragraph.</p>

19 Múltiplas Folhas de Estilo Se diferentes estilos forem definidos para um mesmo elemento, prevalece o de maior prioridade Cascading Ordem crescente de prioridade (Cascading Order): 1- Definições do Browser (Default) 2- External style sheet 3- Internal style sheet (inside the <head> tag) 4- Inline style (inside an HTML element)

20 Exemplo de Cascateamento Digamos que uma declaração externa define para h3: Depois, uma declaração interna define para h3:

21 Exemplo de Cascateamento E ainda uma declaração Inline: font-size:30pt Como resultado do cascateamento de estilos, tem-se: color:red; DeclaraçãoExterna text-align:right; Interna font-size:30pt Inline Declaração Declaração

22 Exemplo Cor de Fundo

23 Exemplo Figura de Fundo

24 Exemplo Especificando Espaços entre as Linhas

25 Exemplo Controlando as Letras

26 Indentificando e agrupando elementos (classes e id) Usando Classes: Temos duas listas de links para diferentes tipos de uvas usadas na produção de vinho branco e de vinho tinto

27 Indentificando e agrupando elementos (classes e id) Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na página permaneçam na cor azul.

28 Indentificando e agrupando elementos (classes e id) Agora podemos definir propriedades específicas para links pertencentes as classes whitewine e redwine, respectivamente.

29 Indentificando e agrupando elementos (classes e id) Usando id:

30 Indentificando e agrupando elementos (classes e id) Definição / Resultado

31 Agrupando elementos (span e div) Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id; O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento.

32 Agrupando elementos (span e div) Exemplo usando o <span>:

33 Agrupando elementos (span e div) Obs: é claro que você pode usar id para estilizar o elemento <span>; contudo deverá usar uma única id para cada um os três elementos <span>. Enquanto <span> é usado dentro de um elemento nível de bloco, <div> é usado para agrupar um ou mais elementos nível de bloco.

34 Agrupando elementos (span e div) Exemplo usando o <div>:

35 Agrupando elementos (span e div)

36 Propriedades de Texto

37 Propriedades da Fonte

38 Propriedades de Margem

39 Propriedades de Padding

40 Referências Sugestão:

Documentos relacionados

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS TUTORIAIS CSS Como inserir códigos CSS em páginas HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte