Curso de CSS - Cascading Style Sheets        Desenvolvimento, aplicações e referências de acordo com as normas do W3C     ...
Curso de CSS - Cascading Style Sheets         Desenvolvimento, aplicações e referências de acordo com as normas do W3C14 –...
Curso de CSS - Cascading Style Sheets    Desenvolvimento, aplicações e referências de acordo com as normas do W3C•    bord...
Curso de CSS - Cascading Style Sheets    Desenvolvimento, aplicações e referências de acordo com as normas do W3C•    max-...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C        ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C       O...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C      fo...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C      Es...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C1.4 Sele...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C<style t...
Curso de CSS - Cascading Style Sheets        Desenvolvimento, aplicações e referências de acordo com as normas do W3CP   {...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3CElemento...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C1.7 Posi...
Curso de CSS - Cascading Style Sheets       Desenvolvimento, aplicações e referências de acordo com as normas do W3C2. Por...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3CHTML. O ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C       E...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C      No...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C   </p><...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C       O...
Curso de CSS - Cascading Style Sheets         Desenvolvimento, aplicações e referências de acordo com as normas do W3Cp   ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C        ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C<style t...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C   <p>  ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3CUma casc...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C<head><s...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C       O...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3Crgb(verm...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3CPropried...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C<title><...
Curso de CSS - Cascading Style Sheets       Desenvolvimento, aplicações e referências de acordo com as normas do W3Cbody  ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3CImagens ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3CUma únic...
Curso de CSS - Cascading Style Sheets       Desenvolvimento, aplicações e referências de acordo com as normas do W3C      ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C        ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3CEspecifi...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3CDecoraçã...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3CControla...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C8. Contr...
Curso de CSS - Cascading Style Sheets      Desenvolvimento, aplicações e referências de acordo com as normas do W3C       ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3CDefinir ...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C  </body...
Curso de CSS - Cascading Style Sheets     Desenvolvimento, aplicações e referências de acordo com as normas do W3C</html>T...
Curso de CSS - Cascading Style Sheets      Desenvolvimento, aplicações e referências de acordo com as normas do W3C       ...
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Apostila: CSS
Upcoming SlideShare
Loading in …5
×

Apostila: CSS

2,132 views
2,006 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,132
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
168
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Apostila: CSS

  1. 1. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C ÍndicePARTE I – CSS Básico1 – Primeiro contato................................................................................................. 6 A sintaxe CSS.................................................................................................... 6 Agrupar seletores...............................................................................................8 Seletores de classe............................................................................................8 Seletor de id....................................................................................................... 10 Escrever comentários........................................................................................ 11 A colocação dos elementos............................................................................... 12 Posicionamento absoluto e posicionamento relativo......................................... 142 – Porque é que devemos formatar com estilos? ............................................... 15 Vantagens dos estilos CSS............................................................................... 15 O "mecanismo" de cascata................................................................................ 15 Porque é que a formatação com estilos é superior? ........................................ 16 Limitações dos browsers atuais........................................................................ 173 – Escrita e combinação de estilos....................................................................... 17 Inserir uma folha de estilos interna.................................................................... 17 Definição de estilos com o atributo style............................................................18 Folha de estilos num arquivo externo................................................................ 19 Como se combinam estilos concorrentes.......................................................... 20 Herança de estilos entre elementos.................................................................. 224 – Definir cores em CSS......................................................................................... 26 Formas de exprimir cores.................................................................................. 26 Nomes de Cores................................................................................................ 27 Quatro formas possíveis para definir cores....................................................... 27 Cuidados que devemos ter................................................................................ 285 – Propriedades dos fundos dos elementos (background) ............................... 286 - Unidades de Medida............................................................................................ 33 Medição de distâncias numa página HTML....................................................... 33 Definição de Cores............................................................................................ 347 – Propriedades do texto........................................................................................ 348 – Controlar o tipo de letra..................................................................................... 399 – As linhas de contorno dos elementos (border) .............................................. 43PARTE II – CSS Avançado10 – Controlar as margens dos elementos............................................................ 5511 – Propriedades de "padding"............................................................................. 5812 – Controle das dimensões dos elementos........................................................ 6213 – Posicionamento dos elementos...................................................................... 64 <meta name="autor" content="Rafael Feitosa"> 2
  2. 2. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C14 – Formatação de listas........................................................................................ 6915 – Propriedades de classificação........................................................................ 7316 – Pseudo-classes.................................................................................................78 Sintaxe............................................................................................................... 78 Pseudo-classes para ligações........................................................................... 79 A pseudo-classe :first-child................................................................................ 79 A pseudo-classe :lang........................................................................................80 Lista de pseudo-classes.................................................................................... 8117 – Pseudo-elementos............................................................................................ 82 Sintaxe............................................................................................................... 83 Uma formatação especial para a primeira linha................................................ 83 O pseudo-elemento first-letter........................................................................... 84 Pseudo-elementos em classes CSS................................................................. 85 Vários pseudo-elementos.................................................................................. 85 Os pseudo-elementos :before e :after............................................................... 85 Lista de pseudo-elementos................................................................................ 8618 – Tipos de media................................................................................................. 88 A Regra @media............................................................................................... 88 Os vários tipos de media................................................................................... 89PARTE III – Material de Referência Rápida CSS19 – Listagem das propriedades definidas em CSS............................................. 90 Fundos (background) ....................................................................................... 90 Linhas de fronteira (border) .............................................................................. 90 Propriedades de classificação........................................................................... 92 Controle dos tamanhos dos elementos............................................................. 93 Tipos de letra (font) ........................................................................................... 93 Gerar conteúdos................................................................................................ 95 Listas e marcadores...........................................................................................96 Margens............................................................................................................. 96 Linhas de contorno............................................................................................ 97 Espaço em branco dentro de um elemento (padding) ...................................... 97 Posicionamento................................................................................................. 98 Formatação de tabelas...................................................................................... 99 Formatação de texto.......................................................................................... 9920 – Referência de CSS2 Print.................................................................................100 Propriedades para impressão de documentos.................................................. 100PARTE IV – Referência CSS • background..................................................................................................... 102 • background-attachment.................................................................................. 102 • background-color............................................................................................ 102 • background-image.......................................................................................... 103 • background-position........................................................................................ 103 • background-repeat.......................................................................................... 104 • border.............................................................................................................. 104 <meta name="autor" content="Rafael Feitosa"> 3
  3. 3. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C• border-bottom................................................................................................. 107• border-bottom-color........................................................................................ 108• border-bottom-style......................................................................................... 108• border-bottom-width........................................................................................ 109• border-collapse............................................................................................... 131• border-color..................................................................................................... 105• border-left........................................................................................................ 107• border-left-color............................................................................................... 108• border-left-style............................................................................................... 108• border-left-width.............................................................................................. 109• border-right..................................................................................................... 107• border-right-color............................................................................................ 108• border-right-style............................................................................................. 108• border-right-width............................................................................................ 109• border-style..................................................................................................... 106• border-top....................................................................................................... 107• border-top-color.............................................................................................. 108• border-top-style............................................................................................... 108• border-top-width.............................................................................................. 109• border-width.................................................................................................... 106• bottom............................................................................................................. 128• clear................................................................................................................ 109• clip................................................................................................................... 129• color................................................................................................................ 131• content............................................................................................................ 120• counter-increment........................................................................................... 121• counter-reset................................................................................................... 122• cursor.............................................................................................................. 110• direction.......................................................................................................... 132• display............................................................................................................. 111• float................................................................................................................. 112• font.................................................................................................................. 116• font-family....................................................................................................... 116• font-size.......................................................................................................... 117• font-size-adjust................................................................................................ 118• font-stretch...................................................................................................... 118• font-style......................................................................................................... 119• font-variant...................................................................................................... 119• font-weight...................................................................................................... 120• height.............................................................................................................. 113• left................................................................................................................... 128• letter-spacing.................................................................................................. 132• line-height....................................................................................................... 114• list-style........................................................................................................... 122• list-style-image................................................................................................ 123• list-style-position............................................................................................. 123• list-style-type................................................................................................... 123• margin............................................................................................................. 124• margin-bottom................................................................................................. 125• margin-left....................................................................................................... 125• margin-right..................................................................................................... 125• margin-top....................................................................................................... 125 <meta name="autor" content="Rafael Feitosa"> 4
  4. 4. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C• max-height...................................................................................................... 114• max-width........................................................................................................114• min-height....................................................................................................... 115• min-width.........................................................................................................115• outline............................................................................................................. 125• outline-color.................................................................................................... 127• outline-style..................................................................................................... 127• outline-width.................................................................................................... 127• overflow...........................................................................................................130• padding........................................................................................................... 127• padding-bottom............................................................................................... 128• padding-left..................................................................................................... 128• padding-right................................................................................................... 128• padding-top..................................................................................................... 128• page-break-after............................................................................................. 135• page-break-before.......................................................................................... 135• page-break-inside........................................................................................... 136• position............................................................................................................ 112• right................................................................................................................. 128• text-align......................................................................................................... 132• text-decoration................................................................................................ 133• text-indent....................................................................................................... 133• text-transform.................................................................................................. 134• top................................................................................................................... 128• vertical-align.................................................................................................... 130• visibility............................................................................................................ 113• white-space..................................................................................................... 134• width................................................................................................................ 115• word-spacing................................................................................................... 134• z-index............................................................................................................ 131 <meta name="autor" content="Rafael Feitosa"> 5
  5. 5. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C PARTE I: CSS Básico A forma recomendada para formatar as páginas escritas em HTML baseia-senos padrões "Cascading Style Sheets" (folhas de estilos em cascata), publicados peloWorld Wide Web Consortium (W3C). A utilização deste padrão da Web permite ganhar tempo, dar consistência efacilitar muito a escrita de páginas para a Web. Neste curso vamos aprender a usarfolhas de estilos em cascata (estilos CSS) para criar páginas mais flexíveis, maisleves, e controlar o seu aspecto gráfico com maior precisão e com maior facilidade nacorreção de erros. Para seguir as matérias que aqui são apresentadas o aluno precisa saberconstruir páginas simples em HTML. É necessário que já se tenha uma base bemsólida sobre o HTML.1. Primeiro contato A maioria das pessoas que fazem um curso voltado para a web gostam decomeçar a fazer coisas muito rapidamente, portanto, vamos já começar a ver algunsexemplos e realizar exercícios práticos. Logo a seguir teremos um capítulo de"conversa" em que analisaremos a situação que levou o W3C a criar este padrão edepois vários capítulos com a matéria a sério e dezenas de exercícios práticos.1.1 A sintaxe CSS A sintaxe das definições CSS é composta por duas partes: um seletor e umadeclaração. Vejamos um exemplo: Neste exemplo o seletor H1 diz que o estilo se aplica a elementos <h1> e adefinição diz que a cor do texto destes elementos deve ser verde ("green"). A declaração fica entre chaves ({...}) e pode conter várias definições. Cadadefinição é formada por um par de propriedade:valor, em que o valor é separado dapropriedade pelo caractere : (dois pontos). O exemplo seguinte ilustra isto de formagenérica:seletor { propriedade: valor } O exemplo seguinte permite-lhe experimentar isto de imediato:<html><head><style type="text/css"> H1 { color: green }</style></head><body> <H1>Este cabeçalho tem cor verde</H1></body></html> <meta name="autor" content="Rafael Feitosa"> 6
  6. 6. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C O seletor é normalmente o nome de um elemento do HTML, mas também podeser um seletor de classe, um seletor de ID ou um seletor contextual (estes conceitosserão esclarecidos mais à frente.) Se o valor que queremos dar à propriedade tiver mais do que uma palavradevemos colocá-lo entre aspas, como se mostra a seguir:<html><head><style type="text/css"> p { font-family: "comic sans ms" }</style></head><body> <p> O texto deste parágrafo tem tipo de letra "comic sans ms". </p></body></html> Dentro das chaves (caracteres { e }) podemos colocar várias definiçõesseparadas pelo caractere ";" (ponto e vírgula). O exemplo seguinte define trêspropriedades para o elemento <p>, que são o alinhamento, a cor do texto e o tipo deletra.<html><head><style type="text/css">p { text-align: center; color: green; <meta name="autor" content="Rafael Feitosa"> 7
  7. 7. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C font-family: arial }</style></head><body> <p> O texto deste parágrafo tem tipo de letra "arial", cor verde e está alinhado ao centro. </p></body></html> Para tornarmos mais legíveis as definições dos estilos colocamos cadadefinição numa linha diferente, mas podíamos ter escrito tudo na mesma linha.1.2 Agrupar seletores Se precisarmos aplicar os estilos a mais do que um elemento podemos agruparos seletores que partilham das mesmas definições. Para isso escrevemos uns a seguiraos outros separados por vírgulas. No exemplo seguinte os elementos de <h1> até<h6> partilham todos a mesma definição:h1,h2,h3,h4,h5,h6 { color: green }1.3 Seletores de classe Os seletores de classe permitem-nos definir estilos diferentes que podem seraplicados ao mesmo elemento. Imagine que precise ter dois tipos diferentes deparágrafo no documento: um alinhado à direita e outro alinhado ao centro. Vejamoscomo os seletores de classe tornam isto muito fácil:<html><head><style type="text/css">p.direita { text-align: right }p.centro { text-align: center }</style></head><body> <p class="direita"> Este parágrafo está alinhado a direita. </p> <p class="centro"> <meta name="autor" content="Rafael Feitosa"> 8
  8. 8. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C Este parágrafo está alinhado ao centro. </p></body></html> Nota: O atributo class, como qualquer outro atributo, só pode ser especificadouma única vez num dado elemento. O exemplo seguinte está errado:<p class="direita" class="verde"> Este parágrafo tem um erro causado pela utilização repetida do atributo class.</p> Os seletores de classe também podem ser definidos sem colocarmos o nomede um elemento no início da definição. Quando isso acontece as definições podem seraplicadas a qualquer elemento cujo atributo class tenha o mesmo valor. O exemploseguinte define uma classe que pode ser utilizada com qualquer elemento do HTML:<html><head><style type="text/css">.centro { text-align: center }</style></head><body> <h2 class="centro"> Cabeçalho alinhado ao centro </h2> <p class="centro"> Este parágrafo também está alinhado ao centro. </p></body></html> <meta name="autor" content="Rafael Feitosa"> 9
  9. 9. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C1.4 Seletor de id O seletor de id é diferente do seletor de classe porque se aplica a um únicoelemento da página. As regras do HTML ditam que os valores do atributo id nãopodem repetir-se numa mesma página. Daí resulta que o número de elementos nodocumento com um determinado id é um ou é zero. A regra de seleção para o estilo definido no exemplo seguinte indica que ele sópode ser aplicado a um elemento <p> que tenha o valor "para1" no atributo id:<html><head><style type="text/css">p#para1 { text-align: center; color: red }</style></head><body> <p id="para1"> Este parágrafo está alinhado ao centro e tem cor vermelha. </p></body></html> Se tentarmos aplicar esta regra a um elemento <div>, usando id="para1",vemos que o browser não a aceita:<html><head> <meta name="autor" content="Rafael Feitosa"> 10
  10. 10. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C<style type="text/css">p#para1 { text-align: center; color: red }</style></head><body> <div id="para1"> Este elemento não está alinhado ao centro e não tem cor vermelha porque não é um parágrafo. </div></body></html> Se quisermos que a regra se aplique a qualquer elemento que tenha o id para1basta escrevê-la na forma seguinte:*#para1 { text-align: center; color: red } A regra acima é aplicável a qualquer elemento que tenha o id para1 porque oseletor * diz que ela se aplica a todos os elementos. No exemplo seguinte ela seriaaplicada ao elemento <h1>:<h1 id="para1">Este é um texto de cabeçalho</h1>1.5 Escrever comentários numa folha de estilos Podemos inserir comentários nas definições CSS para explicar o código queescrevemos tornando-o mais fácil de compreender. Quando mais tarde voltarmos auma folha de estilos, ou se a partilharmos com outra pessoa, será mais fácil percebercomo ela funciona. Os comentários devem ser ignorados pelo browser, mas as versões 5 do MSIEos lê como se eles fossem definições, o que pode causar erros. Por isso coloquecomentários apenas em folhas de estilos que sejam lidas apenas pelos browserssuperiores as versões MSIE 6, Netscape 7/Mozilla ou pelo Opera. Para iniciar um comentário escreva a seqüência de caracteres "/*", depois otexto do comentário, e no fim escreva "*/" para terminar o comentário. O exemploseguinte mostra como se faz: <meta name="autor" content="Rafael Feitosa"> 11
  11. 11. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CP { text-align: center; /* Isto é um comentário */ color: black; /* O MSIE 5 não reconhece os comentários!!! */ font-family: arial }1.6 A colocação dos elementos em CSS baseia-se em caixas Todos os elementos que podem ser vistos numa página da Web ocupam umadeterminada área na página. Essa área tem a forma de um retângulo, que designamospor caixa. A caixa de um elemento contém tudo aquilo que lhe diz respeito: conteúdo,linhas de contorno, margens e espaço em branco. O gráfico que pode ver a seguirrepresenta as diversas áreas que constituem a caixa de um elemento. Para percebermos o significado deste gráfico encontram - se abaixo algunsesclarecimentos: • O conteúdo do elemento fica dentro de um retângulo ao redor do qual existem outras áreas. • Entre o conteúdo do elemento e os seus limites (border) pode existir espaço em branco, que designamos por padding. • Os limites do elemento designam-se por border. É aí que o elemento termina. • O retângulo (caixa) que contém o elemento pode ter margens (margin) que o separa dos outros elementos da página. As margens estão fora dos limites do elemento. A largura de um elemento é determinada unicamente pela largura do seuconteúdo. Já a largura da caixa que contém o elemento é dada pela soma da largurado conteúdo mais as larguras ocupadas pelas linhas de contorno (border) e peloespaço em branco (padding). A altura de um elemento calcula-se de forma análoga.As margens servem para deslocar o retângulo (caixa) do elemento relativamente à suaposição normal. <meta name="autor" content="Rafael Feitosa"> 12
  12. 12. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CElementos de bloco e elementos "inline" Todos os elementos visíveis numa página escrita em HTML pertencem a umdestes dois tipos: bloco ou "inline". Os elementos de bloco, como por exemplo <div>ou <table>, começam numa nova linha e ao terminarem ocorre novamente umamudança de linha. Os elementos de bloco recebem larguras que são calculadas emfunção da largura do bloco em que estão contidos. Os elementos "inline", como <b> ou <span>, não dão início a uma nova linha ea sua largura é determinada apenas pelo seu conteúdo. O seu comportamento ésemelhante ao comportamento do texto simples.Exemplos de AplicaçãoElementos de bloco<html><head><title></title></head><body> <h1>Os cabeçalhos são elementos de bloco</h1>texto normal <p>Os parágrafos são elementos de bloco</p> <div> Os elementos &lt;div&gt; e &lt;table&gt; também são elementos de bloco </div></body></html>Elementos "inline"<html><head><title></title></head><body> <p> Os elementos <b>&lt;b&gt; (bold)</b>, <i>&lt;i&gt; (itálico)</i>, <strong>&lt;strong&gt; (texto forte)</strong>, <code>&lt;code&gt; (código de computador)</code> são exemplos de elementos "inline". </p></body></html> <meta name="autor" content="Rafael Feitosa"> 13
  13. 13. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C1.7 Posicionamento absoluto e posicionamento relativo A ordem de colocação dos elementos numa página HTML consistehabitualmente em desenhá-los à medida que eles vão surgindo. Este método édesignado por posicionamento relativo. Contudo, as folhas de estilos CSS introduziram um ingrediente novo: oselementos de bloco podem ser colocados em qualquer ponto da página e podemsobrepor-se uns aos outros. Este método é designado por posicionamento absolutoporque nos permite indicar o local exato da página em que queremos que o elementoseja desenhado. Se esse local já estiver ocupado por outro elemento não há qualquerproblema porque os estilos CSS permitem-nos sobrepor elementos. Tudo se passacomo se a página fosse uma mesa sobre a qual podemos colocar folhas umas sobreas outras.Exemplos de AplicaçãoPosicionamento absoluto com sobreposição de elementos<html><head><title></title></head><body> <p> Este parágrafo está na posição normal (relativa.) </p> <p style="position: absolute; top: 100px; left: 30px"> Este parágrafo está numa posição absoluta. </p> <p style="position: relative"> Este parágrafo também está numa posição relativa. </p></body></html> <meta name="autor" content="Rafael Feitosa"> 14
  14. 14. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C2. Porque é que devemos formatar com estilos?2.1 Vantagens dos estilos CSS • Os estilos CSS foram adicionados pelo W3C às recomendações HTML 4 e XHTML para resolver problemas muito sérios que afetavam a qualidade das páginas escritas em HTML e dificultavam a sua manutenção. • A utilização de folhas de estilos externas permite poupar tempo, ganhar flexibilidade e aumentar a consistência das páginas que constituem um website. • Quando guardamos os estilos num arquivo externo e os aplicamos a todas as páginas de um website, a modificação de diversas qualidades do aspecto gráfico passa a ser uma tarefa fácil. • As páginas que usam estilos CSS, além de serem mais fáceis de escrever, são também mais leves e aparecem mais depressa no browser.As folhas de estilos permitem ganhar tempo e flexibilidade Os estilos CSS definem o aspecto gráfico a dar aos elementos do HTML. Osestilos podem ser definidos numa folha de estilos externa ou internamente no própriodocumento HTML. Quando definidos num arquivo externo, os estilos podem serpartilhados por muitas páginas, o que permite alterar instantaneamente o aspectográfico de todas as páginas modificando apenas o arquivo em que os estilos sãodefinidos. Quando tínhamos que usar as técnicas antigas para fazer alterações noaspecto gráfico de um website éramos obrigados a alterar todos os elementos <font> etodas as tabelas usadas para formatar as páginas. Isto tinha de ser feito em todas aspáginas. Quando utilizamos estilos CSS basta modificar um número reduzido dedefinições numa única folha de estilos para instantaneamente atualizarmos centenasou milhares de páginas com um esforço mínimo. Os erros ocorrem com menorfreqüência e são mais fáceis de corrigir. A facilidade com que as alterações passam a ser feitas dá uma maiorflexibilidade ao website e melhoram o seu desempenho. As páginas ficamsimultaneamente mais ricas e mais leves.2.2 O "mecanismo" de cascata As folhas de estilos CSS nos dão muita liberdade na forma de definir os estilos.No mesmo documento podemos utilizar um ou mais arquivos externos, definir osestilos na seção head do documento ou utilizar o atributo style nos elementos do <meta name="autor" content="Rafael Feitosa"> 15
  15. 15. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CHTML. O browser lê todas as definições de estilos que encontra e quando aparecemestilos repetidos ele combina-os num só estilo seguindo algumas regras simples. Uma das regras da cascata diz que ao encontrar várias versões para o mesmoestilo o browser guarda a última que encontrou. Outra regra diz que alguns estilos sãoherdados pelos elementos que se encontram dentro de outros elementos.2.3 Porque é que a formatação com estilos é superior? As etiquetas que definem os elementos do HTML foram concebidas para definirconteúdos. O autor do HTML nunca teve qualquer intenção de usar esta linguagempara definir estilos gráficos para as páginas. Os elementos do HTML foram idealizadospara declarar coisas como "Isto é um parágrafo", ou "Isto é um cabeçalho". Para issocolocavam-se etiquetas como <p> ou <h1> ao redor do texto. A forma como estainformação devia ser apresentada graficamente era um problema que o browser tinhaque resolver tendo em consideração o significado de cada elemento. Este conceito perfeitamente racional era muito adequado enquanto o objetivodas páginas foi apenas a escrita e a partilha de textos na Web, mas a rápida aceitaçãoda Web fez com que as pessoas que davam importância ao design também seinteressassem por este meio. Esse interesse levou a esforços para criar páginas graficamente elaboradas,mais ao gosto dos designers. Um dos efeitos mais importantes desses esforços foi acompleta adulteração do propósito de diversos elementos. O elemento <table>, porexemplo, foi concebido unicamente para apresentar tabelas com dados numéricos,mas os designers passaram a usá-lo, colocando esses elementos em diversos pontosdas páginas em arranjos cada vez mais complexos. Mas isto não era suficiente porque havia coisas que não podiam ser feitasusando apenas os elementos disponíveis. Para dar aos designers aquilo que elespediam os criadores dos browsers acharam que era uma boa idéia inventarem as suaspróprias etiquetas e acrescentaram atributos estilísticos aos que já existiam. Estasextensões permitiram usar o HTML para dar cores e estilos diferentes ao texto eaplicar outras formatações.A formatação baseada em etiquetas e atributos estilísticos estava errada! As iniciativas dos criadores destas novas etiquetas e atributos ignoraram porcompleto a filosofia na qual o criador do HTML, Tim Berners-Lee, se baseou para criara linguagem. As novas etiquetas (como a famigerada <font>) davam importância aoaspecto gráfico que produziam e não ao significado daquilo que continham. Apesar de todas as contra-indicações, a criação e rápida disseminação deetiquetas conduziu a uma situação em que os conteúdos das páginas estavamcompletamente misturados com os aspectos estilísticos. Isto levou a que no final dadécada de 1990 o HTML estivesse num estado em que era muito difícil criar e fazer amanutenção de websites compostos por mais que fosse um número reduzido depáginas. Os conteúdos das páginas não eram mais do que imensas "sopas deetiquetas" mal organizadas cujo significado não era muito claro. Este problema começou a ser resolvido pelo World Wide Web Consortium(W3C) com a criação dos padrões HTML 4, CSS, XML e XHTML. O HTML deve serusado em conjunto com estilos CSS, sendo que os conteúdos se exprimem em HTMLe os estilos em CSS. <meta name="autor" content="Rafael Feitosa"> 16
  16. 16. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C Este novo paradigma para a criação de páginas é bem suportado por todos osbrowsers dominantes: Netscape/Mozilla, Microsoft Internet Explorer e Opera. Estarealidade faz com que ninguém tenha desculpas para continuar a escrever um mauHTML!2.4 Limitações dos browsers atuais Apesar de os browsers atuais (Netscape/Mozilla, MSIE 7, Opera 9) ofereceremum bom suporte para os estilos CSS, é preciso chamar a atenção para o fato de aindasubsistirem alguns problemas quando aplicamos técnicas avançadas de formataçãobaseada em CSS. Os problemas mais graves são causados pelo MSIE, que contém bugs que lhedão alguns comportamentos que se desviam dos padrões CSS. O bug mais graveresulta da implementação errada do modelo de dimensionamento dos elementos.Esse bug é bem conhecido e pode quase sempre ser superado recorrendo a truquesque não comprometem o funcionamento das páginas nos restantes browsers. Além deste bug e de outros bugs menos importantes devemos ter sempre ematenção o fato de as implementações dos padrões CSS serem geralmenteincompletas. Isto significa que não podemos contar com algumas propriedades.Apesar disso podemos estar seguros de que as propriedades com que podemoscontar são suficientemente úteis para não querermos passar sem elas. As limitações associadas ao suporte que os browsers atuais oferecem têm deestar sempre presentes na mente do criador de páginas baseadas em CSS. Se usarapenas as funcionalidades que são bem suportadas, que já são muitas, não serápreciso tomar muitas precauções. Se você decidiu utilizar funcionalidades maisavançadas definidas pelos padrões CSS lembre-se que é preciso testar tudo de formaexaustiva em todos os browsers relevantes para não ter surpresas desagradáveis.3. Escrita e combinação de estilos Quando o browser encontra uma folha de estilos num documento ele usa-apara formatar os elementos desse documento. Existem três formas diferentes paradefinir estilos e inseri-los num documento.3.1 Inserir uma folha de estilos interna Uma folha de estilos interna deve ser usada quando os estilos são usados umaúnica vez. Nesse caso as definições fazem-se dentro de um elemento <style> quedeve ser colocado dentro do elemento <head> da página HTML, assim:<head><style type="text/css">hr { color: blue }p { margin-left: 20px }body { background-image: url("images/back40.gif") }</style></head> O browser lê as definições contidas no elemento <style> e faz a formataçãodos elementos da página aplicando essas definições. <meta name="autor" content="Rafael Feitosa"> 17
  17. 17. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C Nota: O comportamento normal dos browsers consiste em ignorar oselementos cujo significado desconhecem. Isto significa que um browser muito antigoque não suporta estilos CSS ignorará o elemento <style>, mas não ignorará o textoque está escrito lá dentro. Se for necessário evitar que esse browser escreva o textodas definições devemos ocultá-lo colocando-o dentro de um comentário do HTML,como se mostra a seguir:<head><style type="text/css"><!--hr { color: blue }p { margin-left: 20px }body { background-image: url("backgrnd.jpg") } --></style></head>3.2 Definição de estilos com o atributo style A definição de estilos utilizando o atributo style nos faz perder muitas dasvantagens das folhas de estilos porque acaba misturando os estilos com osconteúdos. Esta forma de definir estilos deve ser usada com moderação e apenasquando precisarmos aplicar um estilo uma única vez a um único elemento. O atributo style aceita quase todas as propriedades CSS. O exemplo seguintemostra como podemos controlar a cor e a margem esquerda de um parágrafo:<html><body> <p style="color: blue; margin-left: 20px"> Isto é um parágrafo formatado com o atributo style </p></body></html> Se precisarmos dar a uma propriedade um valor que contém espaços devemoscolocá-lo entre aspas. O exemplo seguinte faz isso para dar o tipo de letra "sans serif"a um parágrafo e "comic sans ms" a outro.<html><body> <p style="font-family: sans-serif"> Neste parágrafo o tipo de letra é "sans-serif" </p> <p style="font-family: comic sans ms"> Neste parágrafo o tipo de letra é "comic sans ms" <meta name="autor" content="Rafael Feitosa"> 18
  18. 18. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C </p></body></html>3.3 Folha de estilos num arquivo externo Uma folha de estilos externa constitui a melhor opção quando os mesmosestilos são aplicados a várias páginas. Com uma folha de estilos externa podemosalterar o aspecto gráfico de muitas páginas bastando para isso alterar apenas oarquivo em que estão definidos os estilos. Cada página contém um elemento <link>que a liga à folha de estilos. O elemento <link> deve ser colocado dentro do elemento<head> nas páginas HTML:<head> <link rel="stylesheet" type="text/css" href="estilos.css"></head>Exemplos de AplicaçãoEstilos definidos num arquivo externoestilos.cssh1 { font-family: sans-serif; color: #666666; }p { font-family: cursive; }<html><head><link href="estilos.css" type="text/css" rel="stylesheet"><title>Exemplo</title></head><body> <h1>Este cabeçalho foi formatado com uma folha de estilos.</h1> <p>Este parágrafo também!</p></body></html> <meta name="autor" content="Rafael Feitosa"> 19
  19. 19. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C O browser lê as definições contidas na folha de estilos (estilos.css) e faz aformatação dos elementos do documento aplicando essas definições. Se ao executar o exemplo de aplicação mais acima você prestou atenção noarquivo de estilos então reparou que a folha de estilos externa é apenas um arquivo detexto que contém definições CSS. No seu conteúdo não podem aparecer elementosdo HTML, só são permitidas definições CSS válidas.3.4 Como se combinam estilos concorrentes Um documento HTML pode definir ou utilizar mais do que uma folha de estilos.Quando isso acontece é possível que algumas propriedades sejam definidas numafolha e definidas de novo numa outra. Nestes casos o browser deve aplicar regraspara decidir qual das definições é mais importante.A ordem da cascata Quando um estilo é definido mais de uma vez qual das definições deve obrowser escolher? A primeira? A última? Nenhuma delas? Para decidir o browseraplica as regras seguintes (listadas por ordem crescente de importância): 1. Estilos definidos por omissão (são aplicados sempre que não existirem outros que se sobreponham a eles) 2. Estilos definidos numa folha de estilos interna (dentro do elemento <style>) ou num arquivo externo 3. Estilos "inline" (definidos através do atributo style nos elementos do documento HTML) Assim, temos que os estilos que são definidos no próprio elemento através doatributo style têm a prioridade mais elevada. As definições que o atributo style fazsobrepor-se a qualquer definição que tenha sido feita antes. O exercício de aplicação seguinte ilustra melhor este mecanismo:Exemplos de AplicaçãoRegras de cascata com um arquivo externo e estilos internos<html><head><link href="estilos.css" type="text/css" rel="stylesheet"><style type="text/css"> <meta name="autor" content="Rafael Feitosa"> 20
  20. 20. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3Cp { font-family: arial }</style><title>Exemplo</title></head><body> <h1>Este cabeçalho foi formatado com uma folha de estilos externa.</h1> <p> Repare que o tipo de letra deste parágrafo é aquele indicado pela folha de estilos interna ("arial"). Apesar de a folha externa contida no arquivo "estilos.css" conter uma definição diferente ("cursive") as regras de cascata dizem que caso existam duas definições concorrente deve prevalecer a mais recente. </p></body></html> Apesar de o exemplo de aplicação anterior ser elucidativo analisemos mais umexemplo. Suponhamos que uma folha de estilos externa define as seguintespropriedades para o seletor h3:h3 { color: red; text-align: left; font-size: 8pt } Mas existe uma folha de estilos interna com as seguintes propriedades tambémpara o seletor h3:h3 { text-align: right; font-size: 20pt } Se a página que contém a folha de estilos interna usar o elemento <link> parase ligar à folha de estilos externa indicada antes, então as duas definições serãocombinadas para produzir a seguinte versão final para o seletor h3:h3 { color: red; text-align: right; font-size: 20pt } <meta name="autor" content="Rafael Feitosa"> 21
  21. 21. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C A cor foi herdada da folha externa, mas o alinhamento do texto e o tamanho deletra foram substituídos pelas definições dadas na folha interna.3.5 Herança de estilos entre elementos Algumas propriedades CSS definidas para um elemento passamautomaticamente a ser aplicadas aos descendentes desse elemento. Quando issoacontece diz-se que as propriedades são herdadas. O exemplo seguinte mostra comofunciona este mecanismo de "herança" de estilos:<html><head><style type="text/css">div { color: blue }</style></head><body> <div> O texto dos elementos &lt;div&gt; tem cor azul. <p> Este parágrafo está dentro de um elemento &lt;div&gt;. Ele herda a cor azul. </p> </div> <p> Este parágrafo não está dentro de nenhum elemento que lhe deixe uma "herança". </p></body></html> No exemplo que acabamos de ver, a folha de estilos diz que o texto doselementos <div> deve ter cor azul. O parágrafo que está dentro de um elemento <div>herda a cor azul porque a propriedade color é herdada pelos descendentes de umelemento. Já o segundo parágrafo não está dentro de nenhum elemento que lhe deixeuma "herança" (que neste caso é a propriedade color) por isso o seu texto tem a cornormal. Há outras propriedades que só afetam o elemento ao qual são aplicadas e nãose propagam aos seus descendentes. Diz-se que estas propriedades não sãoherdadas. O exemplo seguinte é semelhante ao anterior, mas agora à propriedadeherdada color juntamos a propriedade border, que não é herdada:<html><head> <meta name="autor" content="Rafael Feitosa"> 22
  22. 22. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C<style type="text/css">div { color: blue; border: solid thin red }</style></head><body> <div> Os elementos &lt;div&gt; recebem uma linha de contorno vermelha (border) e texto com cor azul. <p> Este parágrafo está dentro de um elemento &lt;div&gt;. Ele herda a cor azul mas não herda a linha de contorno (border). </p> <div> Tal como o elemento &lt;div&gt; principal este elemento &lt;div&gt; recebe a sua própria linha de contorno. </div> </div></body></html> Como pode observar, a propriedade color propaga-se ao elemento <p> mas apropriedade border não.Exemplos de AplicaçãoUma cascata de estilos com "herança"<html><head><style type="text/css">div { color: blue }.verde { color: green }</style><title></title></head><body> <div> A folha de estilos diz que o texto dos elementos &lt;div&gt; deve ter cor azul. <p> Este parágrafo está dentro de um elemento &lt;div&gt;. Ele herda a cor azul porque a propriedade color é herdada pelos descendentes de um elemento. </p> </div> <meta name="autor" content="Rafael Feitosa"> 23
  23. 23. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C <p> Ao contrário do parágrafo anterior este parágrafo não está dentro de nenhum elemento que lhe deixe uma "herança" (que neste caso é a propriedade color). </p></body></html>Uma cascata de estilos com e sem "herança"<html><head><style type="text/css">div { border: solid thin red; color: blue }</style><title></title></head><body> <div> A folha de estilos diz que os elementos &lt;div&gt; devem ter uma linha de contorno vermelha e o texto deve ser azul. <p> Este parágrafo está dentro de um elemento &lt;div&gt;, mas não tem linha de contorno. Isto acontece porque a propriedade border não é herdada pelos descendentes de um elemento. Já a cor é azul porque a propriedade color é herdada. </p> </div> <p> O texto deste parágrafo, tal como o anterior, não tem linha de contorno. A cor é diferente porque não há nada para herdar. </p></body></html> <meta name="autor" content="Rafael Feitosa"> 24
  24. 24. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CUma cascata de estilos simples<html><head><style type="text/css">p { color: blue; font-family: cursive; font-size:16px }</style><title></title></head><body> <p style="color: red"> A última definição de estilos encontrada diz que a cor deste texto deve ser vermelha ("red"). De acordo com as regras de cascata é ela que prevalece por ser a mais recente. O tipo de letra definido inicialmente ("cursive") mantém-se. </p> <p> Este parágrafo possui todas as definições feitas na folha de estilos. </p></body></html>Outra cascata de estilos<html> <meta name="autor" content="Rafael Feitosa"> 25
  25. 25. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C<head><style type="text/css">p { color: blue; font-family: cursive; font-size:16px }.verde { color:green }</style><title></title></head><body> <p class="verde" style="color: red"> A última definição de estilos encontrada diz que a cor deste texto deve ser vermelha ("red"). </p> <p class="verde"> O texto deste parágrafo é verde porque a última definição (atributo class="verde") lhe dá essa cor. </p> <p> Este parágrafo possui as definições normais. </p></body></html>4. Definir cores em CSS Podemos obter qualquer cor à nossa escolha combinando em proporçõescorretas três cores base: vermelho (red), verde (green) e azul (blue).4.1 Formas de exprimir cores Em CSS a forma recomendada para exprimir cores baseia-se em notaçãohexadecimal. Nesta forma as cores exprimem-se usando três números hexadecimaisque definem as quantidades de vermelho, verde e azul que entram na composição deuma determinada cor. O valor mais baixo de uma determinada cor é 0 (#00 na notaçãohexadecimal usada em CSS) e o valor mais alto é 255 (#FF em notação hexadecimal.)Assim, a cor preta tem 0 Vermelho, 0 Verde e 0 Azul escrevendo na forma de#000000. Já o branco tem 255 vermelho, 255 verde e 255 azul escrevendo na formade #FFFFFF. O amarelo forte tem 255 de vermelho, 255 de verde e zero de azul eescreve-se como #FFFF00. Consulte o Curso de HTML para ter referências mais completas sobre as corese suas possíveis combinações. <meta name="autor" content="Rafael Feitosa"> 26
  26. 26. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C O exemplo seguinte mostra três formas diferentes para escrever o texto comcor vermelha.<html><body> <p style="color: rgb(255, 0, 0)"> Este parágrafo tem cor rgb(255, 0, 0) </p> <p style="color: #FF0000"> Este parágrafo tem cor #FF0000 </p> <p style="color: Red"> Este parágrafo tem cor "Red" </p> <p style="color: #0000FF"> Este parágrafo tem cor #0000FF </p></body></html>4.2 Nomes de Cores Consulte o Curso de HTML para ter acesso às cores oficias definidas pelospadrões do W3C. É importante ressaltar que nem todas as cores possuem nomesoficiais, porém a maioria é reconhecida pelos browsers mais atuais.4.3 Quatro formas possíveis para definir cores Acabamos de ver que podemos definir uma cor numa folha de estilosindicando-a de três formas: 1) indicando o seu nome, por exemplo "Aqua"; 2)indicando a sua forma rgb, por exemplo rgb(0, 255, 255) para a cor "Aqua"; 3)indicando a sua forma hexadecimal, por exemplo #00FFFF para a cor "Aqua". Além destas três formas podemos usar uma outra forma rgb baseada emporcentagens do valor máximo de cada cor. Esta forma é menos recomendada do queas restantes mas pode ser útil em algumas situações. A tabela seguinte apresentauma listagem de todas as formas que podemos usar.Forma Descriçãocolor_name Um nome de cor (por exemplo red, ou blue)rgb(vermelho,verde,azul) Um valor rgb para a cor (por exemplo rgb(255,0,0) é a cor vermelha.) <meta name="autor" content="Rafael Feitosa"> 27
  27. 27. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3Crgb(vermelho%, verde%, azul%) Um valor rgb dado como uma porcentagem do valor máximo de cor (por exemplo rgb(100%,0%,0%) é a cor vermelha.)#rrggbb Um número hexadecimal (por exemplo #ff0000 para a cor vermelha).4.4 Cuidados que devemos ter quando utilizamos cores Atualmente praticamente todos os monitores de computador estão preparadospara apresentar mais de 16 milhões de cores diferentes. No entanto, é preciso levarem conta que existem cada vez mais dispositivos móveis com tela a cores (telefonescelulares e PDAs) que em regra possuem paletas bastante mais reduzidas. Algunsconseguem mostrar apenas 256 cores, outros 4096 e outros 65536. Normalmente umaparelho de pequenas dimensões e baixo consumo não vai muito além disto. Se deseja que as páginas criadas por você sejam vistas corretamente nessesaparelhos deve ter alguns cuidados ao escolher as cores para suas páginas. Uma boaforma de conseguir resultados aceitáveis consiste em usar apenas cores seguras daWeb nas suas páginas. Para aprender mais sobre este assunto consulte o Curso deHTML.5. Propriedades dos fundos dos elementos (background) As propriedades dos fundos dos elementos definem cores de fundo e imagensde fundo para os elementos do HTML. Estas propriedades nos permitem controlar ascores e as imagens de fundo dos elementos (posição, repetição, etc).5.1 Propriedades dos Fundos (background):Notas Importantes Nota 1: A última coluna da tabela, cujo título é W3C, indica o padrão que definea propriedade. CSS1 significa que a propriedade é definida pelo padrão "CascadingStyle Sheets level 1" e CSS2 significa que a propriedade é definida pelo padrão"Cascading Style Sheets level 2". Nota 2: É preciso não esquecer que os browsers apresentam deficiências naforma como suportam os padrões CSS. O padrão CSS1 é bem suportado e por issopode usar todas as propriedades CSS1 praticamente sem restrições. Quanto aopadrão CSS2 o grau de suporte já é muito amplo mas é preciso tomar precauções. Sedecidiu utilizar funcionalidades mais avançadas definidas em CSS2 lembre-se que épreciso testar tudo de forma exaustiva em todos os browsers relevantes para não tersurpresas desagradáveis. Os exemplos que apresentamos exploram apenas aspropriedades que são bem suportadas. Nota 3: Muitas propriedades estão descritas apenas de forma sumária nestatabela. Nesses casos consulte o nome da propriedade na referencia de CSS paraobter informações mais completas. Nota 4: Os browsers da Microsoft contêm bugs que lhe dão algunscomportamentos que se desviam dos padrões CSS. O bug mais grave resulta daimplementação errada do modelo de dimensionamento dos elementos. Esse bug ébem conhecido e pode quase sempre ser superado recorrendo a truques que nãocomprometem o funcionamento das páginas nos restantes browsers. <meta name="autor" content="Rafael Feitosa"> 28
  28. 28. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CPropriedade Descrição Valores W3Cbackground Nos oferece uma forma Esta propriedade CSS1 abreviada para escrever aceita os valores que todas as propriedades do podemos dar a todas fundo numa única as restantes declaração. propriedades desta tabela (background- color, background- image, background- repeat background- attachment e background-position)background- A propriedade background- scroll CSS1attachment attachment indica se a fixed imagem de fundo deve permanecer imóvel na janela do browser ou se acompanha o conteúdo quando o movemos (scroll).background-color Define a cor de fundo de color-rgb CSS1 um elemento. color-hex color-name transparentbackground-image Define uma imagem de url CSS1 fundo para ser usada no none elementobackground-position Define o local onde se top left CSS1 começa a desenhar a top center imagem de fundo. top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-posbackground-repeat Estabelece se a imagem de repeat CSS1 fundo deve repetir-se repeat-x (formando um mosaico) ou repeat-y não, e as direções da no-repeat repetição.Exemplos de AplicaçãoDefinir a cor de fundo<html><head><style type="text/css">body { background-color: yellow }h1 { background-color: #00ff00 }h2 { background-color: transparent }p { background-color: rgb(250,0,255) }</style> <meta name="autor" content="Rafael Feitosa"> 29
  29. 29. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C<title></title></head><body> <h1>Isto é um cabeçalho de nível 1</h1> <h2>Isto é um cabeçalho de nível 2</h2> <p>Isto é um parágrafo</p> </body></html>Colocar uma imagem como fundo de um elemento<html><head><style type="text/css">body { background-image: url("bg-pegadas.jpg") }</style><title></title></head><body> <p>Texto da página</p><br> <p>Texto da página</p><br> <p>Texto da página</p><br> <p>Texto da página</p></body></html>Repetir a imagem de fundo (background) na vertical<html><head><style type="text/css"> <meta name="autor" content="Rafael Feitosa"> 30
  30. 30. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3Cbody { background-image: url("bg-pegadas.jpg"); background-repeat: repeat-y }</style><title></title></head><body> <p>Texto da página</p><br> <p>Texto da página</p><br> <p>Texto da página</p><br> <p>Texto da página</p> </body></html>Controlar a posição de uma imagem de fundo<html><head><style type="text/css">body { background-image: url("bg-pegadas.jpg"); background-repeat: no-repeat; background-position: 30 50 }</style><title></title></head><body> <p>Texto da página</p><br> <p>Texto da página</p><br> <p>Texto da página</p><br> <p>Texto da página</p> </body></html> <meta name="autor" content="Rafael Feitosa"> 31
  31. 31. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CImagens de fundo fixas (não acompanham o deslocamento da página)<html><head><style type="text/css">body { background-image: url("bg-pegadas.jpg"); background-repeat: no-repeat; background-attachment: fixed }</style><title></title></head><body> <p style="width: 1400px"> Esta imagem de fundo permanece imóvel quando se desce ou sobe na página ou quando se desloca para a direita ou para a esquerda </p><br><br> <p> Esta imagem de fundo permanece imóvel quando se desce ou sobe na página ou quando se desloca para a direita ou para a esquerda </p><br><br> <p> Esta imagem de fundo permanece imóvel quando se desce ou sobe na página ou quando se desloca para a direita ou para a esquerda </p><br><br> <p> Esta imagem de fundo permanece imóvel quando se desce ou sobe na página ou quando se desloca para a direita ou para a esquerda </p><br><br> <p> Esta imagem de fundo permanece imóvel quando se desce ou sobe na página ou quando se desloca para a direita ou para a esquerda </p><br><br></body></html> <meta name="autor" content="Rafael Feitosa"> 32
  32. 32. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CUma única declaração para definir todas as propriedades do fundo<html><head><style type="text/css">body {background: #00ffff url("bg-pegadas.jpg") no-repeat fixed center center}</style><title></title></head><body> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> </body></html>6. Unidades de Medida6.1 Medição de distâncias numa página HTML O valor de um comprimento escreve-se com um número seguido de umaabreviação que indica as unidades de medida. Não podemos colocar espaços entre onúmero e as unidades (não escreva 2 cm mas sim 2cm). Quando o comprimento é 0(zero) não é preciso indicar as unidades. <meta name="autor" content="Rafael Feitosa"> 33
  33. 33. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C A tabela seguinte descreve as unidades de medida que podemos usar emCSS.Unidade Descrição% porcentagem de um valorin polegadas (inch)cm centímetrosmm milímetrosem 1 em é igual ao tamanho do tipo de letra que está sendo usadoex 1 ex é igual à altura da letra "x" no tipo de letra que está sendo usado (cerca de metade do valor da propriedade font-size).pt pontos (1 pt é o mesmo que 1/72 polegadas)pc picas (1 pc é o mesmo que 12 pt)px pixels (1 px é um ponto na tela do computador)6.2 Definição de cores Esta tabela limita-se a resumir o que vimos num capítulo anterior.Forma Descriçãocolor_name Um nome de cor (por exemplo red, ou blue)rgb(vermelho,verde,azul) Um valor rgb para a cor (por exemplo rgb(255,0,0) é a cor vermelha.)rgb(vermelho%, verde%, azul%) Um valor rgb dado como uma porcentagem do valor máximo de cor (por exemplo rgb(100%,0%,0%) é a cor vermelha.)#rrggbb Um número hexadecimal (por exemplo #ff0000 para a cor vermelha).7. Propriedades do texto As propriedades de texto definem o aspecto gráfico a dar ao texto. Estaspropriedades permitem-nos controlar cores, aumentar ou reduzir o espaço entre oscaracteres, alinhar o texto, escolher o tipo de letra, decorá-lo, etc.7.1 Propriedades de Texto:Propriedade Descrição Valores permitidos W3Ccolor Define a cor do texto cor CSS1direction Define a direção de escrita ltr CSS2 do texto rtlletter-spacing Aumenta ou diminui o normal CSS1 espaço entre os caracteres comprimentotext-align Alinha o texto dentro de um left CSS1 elemento right center justifytext-decoration Adiciona pormenores none CSS1 decorativos ao texto underline overline <meta name="autor" content="Rafael Feitosa"> 34
  34. 34. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C line-through blinktext-indent Desloca para a direita ou comprimento CSS1 para a esquerda a primeira % letra da primeira linha do texto.text-transform Controla as letras de um none CSS1 elemento capitalize uppercase lowercaseunicode-bidi normal CSS2 embed bidi-overridewhite-space Define a forma como é normal CSS1 tratado o espaço em branco pre dentro de um elemento nowrapword-spacing Aumenta ou diminui o normal CSS1 espaço entre as palavras comprimentoExemplos de AplicaçãoDefinir a cor do texto<html><head><style type="text/css">h1 { color: #00ff00 }h2 { color: #dda0dd }p { color: rgb(0,0,255) }</style><title></title></head><body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br> <p>Texto da página</p><br><br></body></html> <meta name="autor" content="Rafael Feitosa"> 35
  35. 35. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CEspecificar o espaço que separa os caracteres<html><head><style type="text/css">h1 { letter-spacing: -3px }h4 { letter-spacing: 0.5cm }</style><title></title></head><body> <h1>Cabeçalho de nível 1</h1> <h4>Cabeçalho de nível 4</h4></body></html>Alinhamento do texto<html><head><style type="text/css">h1 { text-align: center }h2 { text-align: left }h3 { text-align: right }</style><title></title></head><body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3></body></html> <meta name="autor" content="Rafael Feitosa"> 36
  36. 36. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CDecoração do texto<html><head><style type="text/css">h1 { text-decoration: overline }h2 { text-decoration: line-through }h3 { text-decoration: underline }a { text-decoration: none }</style><title></title></head><body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3> <p><a href="http://www.w3.org">Isto é uma ligação</a></p></body></html>Inícios de parágrafo<html><head><style type="text/css">p { text-indent: 1cm }</style><title></title></head><body> <p> A primeira linha de cada parágrafo inicia-se um pouco mais à direita do que as linhas seguintes. Isto deve-se ao estilo CSS que usamos para formatar os parágrafos desta página. </p> <p> A primeira linha de cada parágrafo inicia-se um pouco mais à direita do que as linhas seguintes. Isto deve-se ao estilo CSS que usamos para formatar os parágrafos desta página. </p></body></html> <meta name="autor" content="Rafael Feitosa"> 37
  37. 37. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CControlar as letras de um texto<html><head><style type="text/css">p.uppercase { text-transform: uppercase }p.lowercase { text-transform: lowercase }p.capitalize { text-transform: capitalize }</style><title></title></head><body> <p class="uppercase"> A class que demos a este parágrafo dá-lhe uma formatação em que todas as letras são maiúsculas (em inglês "upercase".) </p> <p class="lowercase"> A class que demos a este parágrafo dá-lhe uma formatação em que todas as letras são minúsculas (em inglês "lowercase".) </p> <p class="capitalize"> A class que demos a este parágrafo dá-lhe uma formatação em que todas as palavras começam com letra maiúscula ("capitalize" em inglês.) </p></body></html> <meta name="autor" content="Rafael Feitosa"> 38
  38. 38. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C8. Controlar o tipo de letra8.1 Propriedades "font": As propriedades do tipo de letra definem aspectos estilísticos das letras comque se escreve o texto. Elas nos permitem escolher entre vários conjuntos decaracteres que desenham as letras de forma diferente, controlar os tamanhos, ajustaras suas formas, etc.Propriedade Descrição Valores W3Cfont Aceita os valores que icon CSS1 podem ser dados ao menu restante das propriedades message-box desta tabela mais aqueles small-caption que se encontram na status-bar coluna seguinte desta linha. Oferece-nos uma forma abreviada para definir numa única declaração todas as propriedades relativas ao tipo de letra.font-family A propriedade font-family family-name CSS1 consiste numa lista com os generic-family tipos de letra que o browser pode escolher para escrever os textos. A lista está ordenada de forma prioritária: a primeira escolha aparece primeiro, a seguir vem a segunda escolha e assim sucessivamente. O browser escolhe o primeiro tipo que seja capaz de usar. Os nomes dos tipos de letra podem ser nomes de família ou nomes genéricos.font-size Define o tamanho de um xx-small CSS1 tipo de letra x-small small medium large x-large xx-large smaller larger comprimento %font-size-adjust Se o tipo de letra (font) none CSS2 escolhido não estiver número disponível, o browser vê-se obrigado a usar um outro tipo diferente. A propriedade font-size-adjust <meta name="autor" content="Rafael Feitosa"> 39
  39. 39. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C especifica o "aspect value" do tipo de letra escolhido para que o browser possa substituí-lo por um outro tipo que esteja acessível preservando a altura da letra "x" e mantendo a legibilidade do texto.font-stretch A propriedade font-stretch normal CSS2 provoca uma expansão ou wider uma contração horizontal ultra-condensed no tamanho da letra. extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expandedfont-style Define o estilo de letra a normal CSS1 usar italic obliquefont-variant Escreve o texto usando um normal CSS1 tipo de letra "small-caps" ou small-caps o tipo normalfont-weight Define a espessura do traço normal CSS1 com que são desenhadas a bold letras bolder lighter 100 200 300 400 500 600 700 800 900Exemplos de AplicaçãoDefinir o tipo de letra para um texto<html><head><style type="text/css">h3 { font-family: times }p { font-family: courier }p.sansserif { font-family: sans-serif }</style><title></title></head><body> <h3>Isto é um cabeçalho de nível 3</h3> <p>Isto é um parágrafo</p> <p class="sansserif">Isto é um parágrafo com uma class diferente</p></body></html> <meta name="autor" content="Rafael Feitosa"> 40
  40. 40. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3CDefinir o tamanho das letras<html><head><style type="text/css">h1 { font-size: 150% }h2 { font-size: 130% }p { font-size: 100% }</style><title></title></head><body> <h1>Isto é um cabeçalho de nível 1</h1> <h2>Isto é um cabeçalho de nível 2</h2> <p>Isto é um parágrafo</p></body></html>Definir o estilo das letras<html><head><style type="text/css">h1 { font-style: italic }h2 { font-style: normal }p { font-style: oblique }</style><title></title></head><body> <h1>Isto é um cabeçalho de nível 1</h1> <h2>Isto é um cabeçalho de nível 2</h2> <p>Isto é um parágrafo</p> <meta name="autor" content="Rafael Feitosa"> 41
  41. 41. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C </body></html>Definir uma variante de um tipo de letra<html><head><style type="text/css">p.normal { font-variant: normal }p.small { font-variant: small-caps }</style><title></title></head><body> <p class="normal">Isto é um parágrafo</p> <p class="small">Isto é um parágrafo</p></body></html>Escrever com texto mais carregado (negrito)<html><head><style type="text/css">p.normal { font-weight: normal }p.thick { font-weight: bold }p.thicker { font-weight: 900 }</style><title></title></head><body> <p class="normal">Isto é um parágrafo com letra normal</p> <p class="thick">Isto é um parágrafo com letra mais grossa</p> <p class="thicker">Isto é um parágrafo com letra muito grossa</p></body> <meta name="autor" content="Rafael Feitosa"> 42
  42. 42. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C</html>Todas as propriedades do tipo de letra numa única declaração<html><head><style type="text/css">p { font: italic small-caps 900 13px arial }</style><title></title></head><body> <p>Isto é um parágrafo</p></body></html>9. As linhas de contorno dos elementos (border)9.1 Propriedades das Margens Como vimos antes, o limite de um elemento designa-se por "border". Ao redordo limite podemos desenhar linhas de contorno. O padrão CSS permite-nosespecificar o estilo, a cor e a espessura das linhas que delimitam um elemento doHTML. Antes de termos os estilos CSS, para desenharmos linhas ao redor de umelemento tínhamos de colocá-lo dentro de uma tabela e desenhar as linhas usando oselementos da tabela juntamente com o atributo "border".Propriedade Descrição Valores W3Cborder Oferece uma forma border-width CSS1 abreviada para escrever border-style numa única declaração border-color todos os parâmetros relativos às linhas de <meta name="autor" content="Rafael Feitosa"> 43
  43. 43. Curso de CSS - Cascading Style Sheets Desenvolvimento, aplicações e referências de acordo com as normas do W3C fronteira. Aceita os valores que podem ser dados às propriedades listadas à direita.border-bottom Oferece-nos uma forma border-width CSS1 abreviada para escrever border-style todas as propriedades da border-color linha de fronteira do lado de baixo numa única declaração. Aceita os valores que podem ser dados às propriedades listadas à direita.border-bottom-color Define a cor da linha de border-color CSS2 fronteira de baixoborder-bottom-style Define o estilo da linha de border-style CSS2 fronteira de baixoborder-bottom-width Define a espessura da linha border-width CSS1 de fronteira de baixoborder-color Define as cores das quatro cor CSS1 linhas de fronteira. Aceita de um a quatro valores.border-left Oferece-nos uma forma border-width CSS1 abreviada para border-style escrevermos todas as border-color propriedades da linha de fronteira do lado esquerdo numa única declaração. Aceita os valores que podem ser dados às propriedades listadas à direita.border-left-color Define a cor da linha de border-color CSS2 fronteira do lado esquerdoborder-left-style Define o estilo da linha de border-style CSS2 fronteira do lado esquerdoborder-left-width Define a espessura da linha border-width CSS1 de fronteira do lado esquerdoborder-right Oferece-nos uma forma border-width CSS1 abreviada para border-style escrevermos todas as border-color propriedades da linha de fronteira do lado direito numa única declaração. Aceita os valores que podem ser dados às propriedades listadas à direita.border-right-color Define a cor da linha de border-color CSS2 fronteira do lado direitoborder-right-style Define o estilo da linha de border-style CSS2 fronteira do lado direito <meta name="autor" content="Rafael Feitosa"> 44

×