CSS Cascading Style Sheets Style Sheets
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
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.
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.
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.
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
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.
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.
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}
Exemplo 1
Exemplo 2
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
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
Exemplo External Style Sheet Para página default.htm quer a folha de estilo style.css Faz-se a seguinte referência:
External Style Sheet
External Style Sheet Uma outra forma de usar a declaração externa é importando a folha de estilo: <head> <style type="text/css"> @import url("estilo.css"); </style> </head> <head> <style type="text/css"> @import "dojo/dojo/resources/dojo.css"; </style> </head>
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>
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>
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)
Exemplo de Cascateamento Digamos que uma declaração externa define para h3: Depois, uma declaração interna define para h3:
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
Exemplo Cor de Fundo
Exemplo Figura de Fundo
Exemplo Especificando Espaços entre as Linhas
Exemplo Controlando as Letras
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
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.
Indentificando e agrupando elementos (classes e id) Agora podemos definir propriedades específicas para links pertencentes as classes whitewine e redwine, respectivamente.
Indentificando e agrupando elementos (classes e id) Usando id:
Indentificando e agrupando elementos (classes e id) Definição / Resultado
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.
Agrupando elementos (span e div) Exemplo usando o <span>:
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.
Agrupando elementos (span e div) Exemplo usando o <div>:
Agrupando elementos (span e div)
Propriedades de Texto
Propriedades da Fonte
Propriedades de Margem
Propriedades de Padding
Referências www.w3schools.com/ www.pt-br.html.net/tutorials/css/ www.maujor.com/tutorial/ Sugestão: www.csszengarden.com/