CSS3

Um mero resumo

Jonas Mayer

verso 1.0

Sumrio
1.O que CSS ?.......................................................................................................................................................3 1.1.Novas propriedades do CSS3.......................................................................................................................3 2.Usando CSS..........................................................................................................................................................4 3.Seletores...............................................................................................................................................................5 3.1.Seletores Complexos....................................................................................................................................7 3.2. Pseudo-Classes............................................................................................................................................7 3.8.Seletores de atributos..................................................................................................................................10 4.Principais propriedades CSS..............................................................................................................................11 4.1.Propriedades de background ......................................................................................................................11 4.2.Propriedades de texto..................................................................................................................................12 4.3.Propriedades de fonte.................................................................................................................................13 4.4.Propriedades de Links.................................................................................................................................15 4.5.Propriedades de lista...................................................................................................................................15 4.6.Propriedades de tabela................................................................................................................................16 4.7.Propriedades de dimenso..........................................................................................................................17 5.Box Model..........................................................................................................................................................17 5.1.Bordas CSS.................................................................................................................................................18 5.2.Contorno.....................................................................................................................................................20 5.3.Margem externa..........................................................................................................................................20 5.4.Margem interna...........................................................................................................................................21 6.Dimenso............................................................................................................................................................22 7.Visualizao e Visibilidade.................................................................................................................................25 8.Cores e Efeitos....................................................................................................................................................26 8.1.Gradiente.....................................................................................................................................................28 8.2.TRANSFORM 2D......................................................................................................................................29 8.3.Transies e animaes..............................................................................................................................29 8.4.Bordas com imagens...................................................................................................................................31 8.5.Mltiplos backgrounds...............................................................................................................................32 9.Barra de Navegao............................................................................................................................................32 9.1.Barra de Navegao Vertical.......................................................................................................................33 9.2.Barra de Navegao Horizontal..................................................................................................................33 10.Imagens............................................................................................................................................................34 10.1.Galeria de imagens...................................................................................................................................34 10.2.Imagens Opacas e Transparentes..............................................................................................................35 10.3.Imagens Sprites.........................................................................................................................................36 11.Tipos de mdia..................................................................................................................................................37 12.Mdulo TEMPLATE LAYOUT.......................................................................................................................38 13.Guia de Referncia...........................................................................................................................................41

CSS

1.O que CSS ?

CSS a abreviao de Cascading Style Sheets (folha de estilo em cascata), um conjunto informaes sobre a formatao e exibio dos componentes HTML e do layout de uma pgina WEB. Folhas de estilo foram introduzidas no HTML 4.0, para separar a estrutura do estilo das pginas. O uso de estilos nas pginas WEB permite que diferentes atributos possam ser agrupados, nomeados e aplicados a vrios elementos, deste modo, a partir de um ponto central, arquivo de estilos, possvel padronizar a aparncia de todas as pginas de um site. Existem quatro verses de CSS: CSS Level 1 (CSS1) lanada pelo W3C Consortium em 1996, a CSS-Positioning (CSS-P), que a segunda verso j permitia o posicionamento dos elementos, CSS Level 2 (CSS2) foi lanada em 1998 e CCS Level 3 (CSS3) que ainda est sendo desenvolvido. Para alterarmos o aspecto visual dos elementos do HTML, o W3C recomenda que utilizemos o CSS. Atualmente o CSS encontra-se em sua terceira verso, porm nem todos os navegadores implementaram todos os novos recursos.

1.1.Novas propriedades do CSS3

Segue aqui uma lista das principais propriedades que so novidade em CSS3. Bordas border-color - possvel definir a cor da borda border-image - possvel definir uma imagem como borda border-radius - possvel arredondar os cantos das bordas box-shadow - possvel colocar uma sombra em um determinado Box, elemento ou imagem. Fundos background-origin- Quando colocamos uma imagem de fundo em um elemento de HTML . background-clip - Onde o background comea a ser desenhado. background-size - Tamanho do background. fazer camadas com mltiplas imagens de fundo Cor cores HSL - Abreviao de hue, saturation e luminosity. cores HSLA- Abreviao de Hue, saturation, luminosity e alfa cores RGBA - Abreviao de red, Green, blue. Opacidade - Define a transparncia do elemento. Texto text-shadow- Sombra do texto text-overflow- Definir o que acontece com o texto que sobra na div, ou seja, quando o texto maior do que o espao reservado para ele. Bastante comum em sites de artigos/blogs em que exibem na home apenas uma parte do contedo. Ruptura de palavras longas Interface box-sizing: Indica que o tamanho do Box levar em considerao possveis bordas que voc venha incluir. resize - Especifica se um elemento ou no redimensionvel pelo usurio. outline -Define uma segunda borda por fora na div. nav-top, nav-right, nav-bottom, nav-left : Essa propriedade especifica para onde vai ocorrer a navegao ao usar uma seta para esquerda ou direita por exemplo. Atualmente est sendo suportada apenas pelo navegador Opera Seletores Seletores por atributos Modelo de caixa bsico overflow-x, overflow-y: Utilizada para realizar recortes nas bordas do eixo x e y. Outros media queries: Definem algumas condies para o uso de css especficos. criao de mltiplas colunas de texto propriedades orientadas a discurso ou leitura automtica de pginas web Web Fonts

2.Usando CSS
O CSS possui trs tipos de regras: 1. seletores , que especificam como a tag ser exibida; 2. as classes, que podem possuir qualquer nome e podem ser aplicados a diversos elementos diferentes; 3. e o ID que pode ser aplicado a qualquer tag do HTML, mas somente a um elemento da pgina, normalmente utilizado junto com linguagens de script (JavaScript). Uma regra e formada por trs partes: o seletor, que identifica a regra; a propriedade que informa o que est sendo definido; e os valores que so os modificadores das propriedades. seletor { propriedade: valor; } Podemos aplicar o CSS de trs formas em um documento HTML: 1. Definindo as propriedades CSS diretamente no elemento HTML atravs do seu atributo style. 2. Definindo as regras CSS dentro de um elemento com a tag style. 3. Definindo as regras CSS em arquivo parte do documento HTML. O CCS pode ser includo com as seguintes formas: Diretamente na tag: o uso da CSS nas tags individuais til quando se deseja substituir os estilos definidos universalmente. Estas declaraes devem estar entre aspas (" "). CSS pode ser adicionado com o uso do atributo style. Essa prtica no recomendada, pois dessa forma no possvel reaproveitar o cdigo CSS, alm de dificultar a leitura do cdigo HTML. Exemplo: <p style="font-size:20px;">Este pargrafo em tamanho de fonte igual a 20px</p> <p style="font-family:courier;">Este pargrafo em fonte Courier</p> <p style="font-size:16px; font-family:cambria">Este pargrafo em fonte Cambria e tamanho 20px</p> Na pgina WEB: este uso do CSS permite a insero de informaes que sero aplicadas a todo um documento. Por Exemplo: <html> <head> <title>Minha primeira pgina CSS</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head> <body> <h1>Minha primeira pgina CSS</h1> <h2>Bem vindo minha primeira pgina CSS</h2> <p>Aqui voc ver como funciona CSS</p> </body> </html> Inserindo o estilo CSS na seo HEAD do documento o estilo de aplicara ao documento inteiro. Arquivo externo: este deve ser um arquivo texto composto somente de regras CSS e comentrios. ideal para quando o estilo aplicado a vrias pginas, com isso voc pode alterar a aparncia de um site inteiro modificando apenas o CSS. No HTML vincula-se a folha de estilo com o documento com HTML atravs das tags <link>, que deve ser declarada no <head>. No XHTML pode-se usar tanto a tag <link> quanto @import. Por exemplo: Arquivo Externo: modelo.css hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

XHTML <html> <head> <link rel="stylesheet" type=text/css media=print href="modelo.css" /> <style media="screen" type="text/css"> @import url(modelo2.css) </style> </head> <body> </body> </html> No documento HTML, o arquivo CSS dever ser linkado ou importado de dentro do elemento <head>. Para linkar uma folha de estilos usa-se a seguinte sintaxe geral: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Onde: rel="stylesheet" indica que o link feito com uma folha de estilos. type="text/css" indica que um arquivo de texto que contm cdigo CSS. href="arquivo.css" indica o nome do arquivo. Para IMPORTAR uma folha de estilos coloca-se a linha de comando @import url(arquivo.css) entre as tags <style> e </style>. Eis a sintaxe geral: <head> ... <style type="text/css"> @import url("arquivo.css"); </style> ... </head> Onde: type="text/css" - indica que um arquivo de texto que contm cdigo CSS. arquivo.css - indica o nome do arquivo.

3.Seletores
Infogrfico (http://www.linhadecodigo.com.br/artigos/img_artigos/Joel_Rodrigues/InfograficoSeletoresCSS/infografi coSeletores.jpg)
A sintaxe do CSS simples: A propriedade a caracterstica que voc deseja modificar no elemento. O valor o valor referente a esta caracterstica. O seletor representa uma estrutura. Essa estrutura usada como uma condio para determinar quais elementos de um grupo de elementos sero formatados. Seletor universal O seletor universal seleciona todos os elementos de um documento HTML. No exemplo a seguir faremos com que todos os elementos tenham margem igual a 0px. *{ margin : 0px; } Seletor de tipo O seletor de tipo seleciona todos os elementos cuja tag seja igual ao tipo indicado pelo seletor na declarao da regra CSS. No exemplo a seguir selecionaremos todos os elementos que possuem a tag textarea. textarea { border : 1px solid red ; }

Seletor de descendentes Chamamos de seletor de descendentes a seleo de um ou mais elementos fazendo o uso de outros seletores separados por espaos. Um espao indica que os elementos selecionados pelo seletor sua direita so filhos diretos ou indiretos dos elementos selecionados pelo seletor sua esquerda. No exemplo a seguir selecionaremos todos os elementos que possuem a tag input e que sejam filhos diretos ou indiretos de elementos com a tag p. p input { border : 1px solid red ; } Seletor de filhos Chamamos de seletor de filhos a seleo de umou mais elementos fazendo o uso de outros seletores separados pelo caractere >. Um caractere > indica que os elementos selecionados pelo seletor sua direita so filhos diretos dos elementos selecionados pelo seletor sua esquerda. No exemplo a seguir selecionaremos todos os elementos que possuem a tag a e que sejam filhos diretos de elementos coma tag p. p>a{ color : green ; } Seletor de irmo adjacente Chamamos de seletor de irmo adjacente a seleo de um ou mais elementos fazendo o uso de outros seletores separados pelo caractere +. Um caractere + indica que os elementos selecionados pelo seletor sua direita sejam irmos e imediatamente precedidos pelos elementos selecionados pelo seletor sua esquerda. No exemplo a seguir selecionaremos todos os elementos que possuema tag input e que sejam irmos e imediatamente precedidos por elementos com a tag label. label + input { color : green ; } Seletor de atributos O seletor de atributos seleciona um ou mais elementos que possuam o atributo ou o atributo juntamente com o seu valor da mesma forma como indicada pelo seletor na declarao da regra CSS. Os atributos so informados dentro de colchetes []. No exemplo abaixo selecionaremos todos os elementos que possuam o atributo name igual a cidade. *[ name = cidade ] { font - weight : italic ; } Se desejarmos tambm podemos informar apenas o atributo. No exemplo a seguir iremos selecionar todos os elementos com a tag img que possuam o atributo title. img [ title ] { width : 100 px; } Seletor de id O seletor de id seleciona um nico elemento cujo atributo id possui o valor indicado pelo seletor na declarao da regra CSS. No exemplo abaixo selecionaremos o elemento cujo atributo id possui o valor cidade. Repare que o seletor de id comea como caractere #. # cidade { font - weight : bold ; } Seletor de classe O seletor de classe seleciona todos os elementos cujo atributo class possui o valor indicado pelo seletor na declarao da regra CSS. No exemplo abaixo selecionaremos todos os elementos cujo atributo class possui o valor ttulos. Repare que o seletor de classe comea com o caractere . (ponto). . titulos { font - size : 40 px; }

3.1.Seletores Complexos
Estes seletores so para cobrir suas necessidades bsicas de formatao de elementos. Eles fazem o simples. O que vai fazer voc trabalhar menos, escrever menos cdigo CSS e tambm menos cdigo JavaScript so os seletores complexos. Os seletores complexos selecionam elementos que talvez voc precisaria fazer algum script em Javascript para poder marc-lo com uma CLASS ou um ID para ento voc format-lo. Com os seletores complexos voc consegue formatar elementos que antes eram inalcanveis. Exemplo de funcionamento Imagine que voc tenha um ttulo (h1) seguido de um pargrafo (p). Voc precisa selecionar todos os pargrafos que vem depois de um ttulo h1. Com os seletores complexos voc far assim: h1 + p { color:red; }

3.2. Pseudo-Classes
CSS pseudo-classes so usados para adicionar efeitos especiais a alguns seletores. Sintaxe A sintaxe das pseudo-claases: selector:pseudo-class {property:value;} Classes CSS tambm pode ser usadas como pseudo-classes: selector.class:pseudo-class {property:value;} Pseudo-classes ncora Os links podem ser exibidos de diferentes maneiras em um navegador com suporte a CSS: a:link {color:#FF0000;} /* link normal*/ a:visited {color:#00FF00;} /* link visitado */ a:hover {color:#FF00FF;} /* mouse sobre link */ a:active {color:#0000FF;} /* link selecionado */ Nota: a: hover deve vir depois de a: link e a: visited, na definio da CSS, para funcionar! Nota: a: active deve vir depois de a: hover na definio da CSS, para funcionar! Nota: Nomes Pseudo-classe no so case-sensitive. Pseudo-classes e classes CSS Pseudo-classes podem ser combinadas com classes CSS: a.red:visited {color:#FF0000;} <a class="red" href="css_syntax.asp">CSS Syntax</a> Se o link no exemplo for visitado ele ser mostrado em vermelho. A Pseudo-classe :first-child A pseudo classe :first-child corresponde a um elemento especificado que o primeiro filho de outro elemento. Nota: Para :first-child funcionar no IE8 e verses anteriores ser necessrio declarar o <DOCTYPE>. Corresponder ao primeiro elemento <p> No exemplo a seguir, o selector corresponde a qualquer elemento <p> que o primeiro filho de qualquer elemento: <html> <head> <style> p:first-child { color:blue; }

</style> </head> <body> <p>I am a strong man.</p> <p>I am a strong man.</p> </body> </html> Corresponder ao primeiro elemento <i> em todos os elementos <p> No exemplo a seguir, o seletor associa o elemento <i> primeiro em todos os elementos <p>: <html> <head> <style> p > i:first-child { color:blue; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html> Corresponder todos os elementos <i> em todos os primeiros elementos filhos de <p> <html> <head> <style> p:first-child i { color:blue; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html> A Pseudo-Classe :lang A pseudo-classe :lang permite que voc defina regras especiais para diferentes idiomas. Nota: IE8 suporta a pseudo-classe :lang somente se um <DOCTYPE> for especificado. No exemplo abaixo, a classe :lang define as aspas para elementos q com lang = "no": <html> <head> <style> q:lang(no) {quotes: "~" "~";} </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body> </html> Pseudo-elementos

CSS pseudo-elementos so usados para adicionar efeitos especiais a alguns seletores. Sintaxe A sintaxe de um pseudo-elemento: selector:pseudo-element {property:value;} Classes CSS tambm pode ser usadas com pseudo-elementos: selector.class:pseudo-element {property:value;} O pseudo-elemento :first-line Um pseudo-elemento "first line" usado para adicionar um estilo especial para a primeira linha de um texto. No exemplo seguinte, o navegador formata a primeira linha de texto no elemento p de acordo com o estilo da "first line" pseudoelemento (em que a quebra da linha do navegador, depende do tamanho da janela): p:first-line { color:#ff0000; font-variant:small-caps; } Nota: O pseudo-elemento "first line" s pode ser usado com elementos de bloco. Nota: As propriedades a seguir se aplicam ao pseudo-elemento "first line": font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear O pseudo-elemento :first-letter O pseudo-elemento "first letter" usado para adicionar um estilo especial letra inicial de um texto: p:first-letter { color:#ff0000; font-size:xx-large; } Nota: O pseudo-elemento "first letter" s pode ser usado com elementos de bloco. Nota: As propriedades a seguir se aplicam ao pseudo-elemento "first line": font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear Pseudo-elementos e classes CSS Pseudo-elementos podem ser combinados com classes CSS: p.article:first-letter {color:#ff0000;} <p class="article">A paragraph in an article</p> O exemplo acima ir exibir a primeira letra de todos os pargrafos com class ="article", em vermelho.

Mltiplos pseudo-elementos Vrios pseudo-elementos podem tambm ser combinados. No exemplo a seguir, a primeira letra de um pargrafo ser vermelha, de um tamanho de fonte xx-grande. O restante da primeira linha ser azul, e em small-caps. O resto do pargrafo ser o tamanho padro de fonte e cor: p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } O pseudo-elemento :before O pseudo-elemento ": before" pode ser usado para inserir algum contedo antes que o contedo de um elemento. O exemplo a seguir insere uma imagem antes de cada elemento <h1>: h1:before { content:url(smiley.gif); } O pseudo-elemento :after O pseudo-elemento ":after" pode ser usado para inserir algum contedo aps o contedo de um elemento. O exemplo a seguir insere uma imagem aps cada elemento <h1>: h1:after { content:url(smiley.gif); }

3.8.Seletores de atributos
possvel por estilo elementos HTML que possuem atributos especficos, no s de classe e id. Seletores de atributos O exemplo a seguir define estilo em todos os elementos com um atributo de ttulo: [title] { color:blue; } Seletores de atributos e valor O exemplo a seguir define o estilo dos elementos com title="W3Schools": [title=W3Schools] { border:5px solid green; } Seletores de atributos e valor com mltiplos valores O exemplo a seguir define o estilo de todos os elementos com um atributo de ttulo que contm um valor especificado. Isso funciona mesmo se o atributo tem valores separadas por espao: [title~=hello] { color:blue; } O exemplo a seguir estila todos os elementos com um atributo lang que contm um valor especificado. Isso funciona mesmo se o atributo tem valores separados por hfen (-): [lang|=en] { color:blue; } Definindo estilos de formulrios Os seletores de atributo so particularmente teis para modelar formulrios sem classe ou ID:

10

input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; }

4.Principais propriedades CSS

4.1.Propriedades de background
background-attachment - define se a imagem de background deve se mover com a rolagem de um elemento ou no. body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; } background-color - define a cor de fundo de um elemento. body {background-color:#b0c4de;} Uma cor pode ser especificada pelo valor HEX, valor RGB, pelo nome da cor, pelo valor HSL, pelo valor HSLA ou pelo valor RGBA. background-image - define a imagem como plano de fundo de um elemento. body {background-image:url('paper.gif');} Por padro, a propriedade background-image repete uma imagem horizontalmente e verticalmente. Algumas imagens deve ser repetida apenas horizontalmente ou verticalmente, ou eles vo parecerestranhas, como esta. Para que a imagem seja repetida apenas horizontalmente (repeat-x), logicamente (repeat-y) para apenas verticalmente e no-repeat para no repetir. body { background-image:url('gradient2.png'); background-repeat:repeat-x; } A posio da imagem especificado pela propriedade background-position: body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; } background-position - define a posio do background de um elemento. body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; }

11

 background-repeat - define se o background deumelemento de se repetir caso este seja menor que a parte visvel do elemento. body { background-image:url('paper.gif'); background-repeat:repeat-y; } background - abreviao da propriedade, define todas as propriedades de background em uma nica linha. Para encurtar o cdigo, tambm possvel especificar todas as propriedades de uma nica propriedade. Isso chamado de propriedade abreviada. body {background:#ffffff url('img_tree.png') no-repeat right top;} Ao usar a propriedade abreviada a ordem dos valores de propriedade : 1. background-color 2. background-image 3. background-repeat 4. background-attachment 5. background-position No importa se um dos valores de propriedades est em falta, enquanto aqueles que esto presentes esto nesta ordem.

4.2.Propriedades de texto
color - define a cor do texto. body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} A cor padro do texto de uma pgina definida no seletor body. direction - define a direo do texto. div { direction:rtl; } letter-spacing - define o espaamento entre as letras do texto. h1 {letter-spacing:2px} h2 {letter-spacing:-3px} line-height - define a altura das linhas de um texto. p.small {line-height:90%} p.big {line-height:200%} text-align - define o alinhamento horizontal do texto. O texto pode ser centralizado, ou alinhado esquerda ou direita, ou justificado. h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} text-decoration - define ou remove uma decoraoou efeito de um texto. A propriedade text-decoration usado principalmente para remover sublinhado de links para fins de concepo: a {text-decoration:none;} Ela tambm pode ser usada para decorar texto. h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} text-indent - define o recuo da primeira linha de um bloco de texto. p {text-indent:50px;}

12

 text-transform - usada para especificar as letras maisculas e minsculas em um texto. Ela pode ser usada para transformar tudo em letras maisculas ou minsculas, ou colocar em maisculo a primeira letra de cada palavra. p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} vertical-align - define o alinhamento vertical do texto. img { vertical-align:text-top; } white-space - define como os espaos do texto sero tratados. p { white-space:nowrap; } word-spacing - define o espaamento entre as palavras do texto.

p { word-spacing:30px; }

4.3.Propriedades de fonte
font-family - define a famlia de fontes a ser utilizada. Em CSS, existem dois tipos de nomes de famlia de fontes: 1. famlia genrica - um grupo de famlias de fontes com uma aparncia semelhante (como "Serif" ou "Monospace") 2. famlia da fonte - uma famlia de fonte especfica (como "Times New Roman" ou "Arial") A propriedade font-family deve manter nomes de diversas fontes como um sistema de "de reserva". Se o navegador no suporta a primeira fonte, ele tenta a prxima fonte. Comece com a fonte que voc quer, e termine com uma famlia genrica, para deixar o navegador escolher uma fonte semelhante na famlia genrica, se no houver a fonte desejada. Nota: Se o nome de uma famlia de fontes mais do que uma palavra, ele deve estar entre aspas, como font-family: "Times New Roman". p{font-family:"Times New Roman", Times, serif;} font-size - define o tamanho da fonte. O valor font-size pode ser um tamanho absoluto ou relativo. Tamanho absoluto: Define o texto a um tamanho especificado No permite que o usurio altere o tamanho do texto em todos os navegadores (ruim por razes de acessibilidade) Tamanho absoluto til quando o tamanho fsico da sada conhecida Tamanho relativo: Define o tamanho relativo aos elementos circundantes Permite que o usurio altere o tamanho do texto em navegadores Se voc no especificar um tamanho de fonte, o tamanho padro para texto normal, como pargrafos, 16px (16px = 1em). Tamanho em pixels Definir o tamanho do texto com pixels oferece controle total sobre o tamanho do texto: h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}

13

Tamanho em EM Para evitar o problema de redimensionamento com verses mais antigas do Internet Explorer, muitos desenvolvedores usar o EM em vez de pixels. A unidade de tamanho em recomendado pela W3C. 1em igual ao tamanho da fonte de corrente. O tamanho do texto padro em navegadores 16px. Ento, o tamanho padro de 1em 16px. O tamanho pode ser calculado a partir dos pixels para em usando esta frmula: EM = pixels/16 h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */ Use uma combinao de percentual e Em A soluo que funciona em todos os navegadores, definir um padro font-size em porcentagem para o elemento <body>: body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;} font-style - define o estilo de fonte. A propriedade font-style mais usado para especificar o texto em itlico. Esta propriedade tem trs valores: normal - O texto exibido normalmente italic - O texto est em itlico oblique - O texto "inclinado" (oblqua muito semelhante a itlico, mas menos compatvel) p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} font-variant - define se a fonte ser utilizada no formato small-caps ou no. p.small { font-variant:small-caps; } font-weight - define a espessura dos traos de uma fonte. p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} font - define todas as propriedades de fonte em uma nica linha. p.ex1 { font:15px arial,sans-serif; }

4.4.Propriedades de Links
Link podem ser formatados com qualquer propriedade CSS. Mas existem propriedades especiais para links. Links podem ter estilos diferentes de pendendo de seu estado. So 4 estados: 1. a: link - normal, no visitado 2. a: visited - visitado 3. a: hover - quando o usurio passa o mouse 4. a: active - no momento em que clicado a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ Ao definir o estilo para que ligue vrios estados, existem algumas regras de ordem:

14

-a: hover deve vir depois de a: link e a: visited -a: active deve vir depois de a: hover

4.5.Propriedades de lista
list-style-image - define uma imagem como indicador de item da lista. ul { list-style-image: url('sqpurple.gif'); } O exemplo acima no apresenta igualmente em todos os navegadores. IE e Opera ir exibir a imagem do marcador, um pouco maior do que o Firefox, Chrome e Safari. Soluo Crossbrowser O exemplo a seguir exibe o marcador imagem igual em todos os navegadores: ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; } Exemplo explicado: Para ul Define o style-type como none para temover o marcador de item da lista Define tanto preenchimento e margem como 0px (para a compatibilidade crossbroser) Para todo li no ul Definir a URL da imagem, e mostr-lo apenas uma vez (no-repeat) Posicione a imagem onde voc quiser ( esquerda e para baixo 0px 5px) Posicione o texto na lista com padding-left list-style-position - define se o indicador de item da lista ser exibido do lado de dentro ou de fora do elemento do item. list-style-type - define qual o tipo de indicador de item ser usado na lista. ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} list-style: abreviao de propriedade

ul { list-style: square url("sqpurple.gif"); }

4.6.Propriedades de tabela
border - especifica uma borda table, th, td { border: 1px solid black; }

15

Observe que a tabela do exemplo acima tem fronteiras duplas. Isto porque tanto a tabela e os elementos th / td tem fronteiras separadas. Para exibir uma nica fronteira para a tabela, use a propriedade border-collapse. border-collapse - define se as bordas da tabela esto recolhidos em uma nica borda ou separadas: table { border-collapse:collapse; } table,th, td { border: 1px solid black; } width e height - define largura e altura da tabela table { width:100%; } th { height:50px; } text-align - define o alinhamento horizontal, como left (esquerda), right(direita), ou center (centro): td { text-align:right; } vertical-align - define o alinhamento vertical, como top (superior), bottom (inferior) ou middle (mdio): td { height:50px; vertical-align:bottom; } padding - controla o espao entre a borda e o contedo de uma tabela, use a propriedade padding em td e elementos th:

td { padding:15px; } color - define as cores da tabela. O exemplo abaixo especifica a cor das bordas, e as cores de texto e fundo de elementos th: table, td, th { border:1px solid green; } th { background-color:green; color:white; }

4.7.Propriedades de dimenso
width - define a largura de um elemento. min-width - define a largura mnima de um elemento. max-width - define a largura mxima de um elemento.

16

height - define a altura de um elemento. min-height - define a altura mnima de um elemento. max-height - define a altura mxima de um elemento.

5.Box Model
Todos os elementos de HTML pode ser considerado como caixas. Em CSS, o "modelo de caixa" utilizada quando se fala em design e layout. O modelo de caixa CSS essencialmente uma caixa que envolve elementos HTML, o modelo de caixa consiste de: uma margem interna (padding), uma borda (border), uma margem externa (margin) e o contedo real.

1. 2. 3. 4.

Margem externa (margin) - Limpa uma rea em torno da fronteira. A margem no tem uma cor de fundo, ela completamente transparente Borda (border) - A borda que circunda a margem interna e o contedo. A borda afetado pela cor de fundo da caixa Margem interna (padding) - Limpa uma rea em torno do contedo. A margem interna afetada pela cor de fundo da caixa Contedo - O contedo da caixa, onde o texto e as imagens aparecem

Um erro comum quando estamos comeando a aprender CSS que nos esquecer de considerar as dimenses das margens internas e externas no clculo das dimenses de um elemento. A fim de definir a largura e altura de um elemento corretamente em todos os navegadores, voc precisa saber como funciona o modelo de caixa. Largura e altura de um elemento Importante: Quando voc definir a largura e de altura de um elemento com CSS, voc apenas define a largura e altura da rea do contedo. Para calcular o tamanho total de um elemento, voc tambm deve adicionar as bordas e margens. A largura total do elemento no exemplo abaixo 300px: width:250px; padding:10px; border:5px solid gray; margin:10px; A largura total de um elemento deve ser calculada assim: Largura total do elemento = largura + margem interna esquerda + borda esquerda + margem externa esquerda + margem interna direita + borda direita + margem externa direita A altura total de um elemento dever ser calculada assim: Altura total do elemento = altura + margem interna superior + borda superior + margem externa superior + margem interna inferior + borda inferior + margem externa inferior Problema de compatibilidade em Navegadores

17

IE8 e verses anteriores do IE, a largura da margem interna e da borda so includas na propriedade largura. Para corrigir esse problema, adicione um <! DOCTYPE html> para a pgina de HTML.

5.1.Bordas CSS
As propriedades borda CSS permitem que voc especifique o estilo ea cor da borda de um elemento. Estilos de Bordas A propriedade border-style especifica o tipo de borda que ser exibida. Valores border-style: none : define como sem borda dotted: define uma borda pontilhada dashed: define uma borda tracejada solid: define uma borda solida double: define uma borda dupla. A largura das duas bordas so igual ao valor border-width. groove: define uma borda 3D groove. O efeito depende do valor border-color. ridge: define uma borda 3D ridged . O efeito depende do valor border-color. inset: define uma borda 3D inset . O efeito depende do valor border-color. outset: define uma borda 3D outset . O efeito depende do valor border-color. Largura da Borda A propriedade border-width usada para definir a largura da borda. A largura definida em pixels, ou usando um dos trs valores pr-definidos: thin (fino), medium (mdio) ou thick (grosso). Nota: O "border-width" propriedade no funciona se for usado sozinho. Use o "border-style" propriedade para definir as bordas primeiro. p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } Cores da borda A propriedade border-color usado para definir a cor da borda. A cor pode ser definida pelo nome, RGB, Hex ou ainda pode ser definida transparent (transparente). Nota: O "border-color" propriedade no funciona se for usado sozinho. Use o "border-style" propriedade para definir as bordas primeiro. p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }

Borda de lados individuais Em CSS possvel especificar fronteiras diferentes para diferentes lados: p {

18

border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } O exemplo acima tambm pode ser definido com uma nica propriedade: border-style:dotted solid; A propriedade border-style pode ter de um a quatro valores. border-style:dotted solid double dashed; borda superior pontilhada borda direita slida borda inferior dupla borda esquerda tracejada border-style:dotted solid double; borda superior pontilhada bordas direita e esquerda so slidas borda inferior dupla border-style:dotted solid; bordas superior e inferior so pontilhadas bordas direita e esquerda so slidas border-style: dotted; todas as quatro bordas so pontilhadas A propriedade border-style usada no exemplo acima. No entanto, ela tambm trabalha com largura da margem e cor da borda. Propriedades abreviadas Como voc pode ver nos exemplos acima, existem muitas propriedades a considerar quando se trata de bordas Para encurtar o cdigo, tambm possvel especificar todas as propriedades da borda individuais em uma propriedade. Isso chamado de propriedade abreviada. A propriedade border um atalho para as seguintes propriedades de borda individuais: border-width border-style (required) border-color

border:5px solid red;

5.2.Contorno
Um contorno uma linha que desenhada em torno de elementos (fora das fronteiras) para fazer o elemento "se destacar". A propriedade outline especificar o estilo, cor e largura de um contorno. Um contorno uma linha que desenhada em torno de elementos (fora das bordas) para fazer o elemento "se destacar". No entanto, a propriedade de contorno diferente da propriedade de borda. O contorno no uma parte das dimenses de um elemento; a largura e altura total de elemento no afetado pela largura do contorno. Propriedades: outline - propriedade abreviada outline-color - define cor do contorno outline-style - define estilo do contorno outline-width - define largura do contorno

19

5.3.Margem externa
A margem externa limpa uma rea em torno de um elemento (fora da borda). A margem no tem uma cor de fundo, e completamente transparente. A margem externa superior, inferior, direita e esquerda pode ser alterado de forma independente usando propriedades separadas. A propriedade de margem abreviada tambm pode ser usada, para alterar todas as margens externas de uma s vez. Valores possveis auto - O navegador calcula uma margem length - define a margem em px, pt, cm, etc. O valor padro 0px. % - Especifica uma margem em percentagem da largura do elemento de conteno inherit - Especifica que a margem deve ser herdado do elemento pai Lados individuais Em CSS, possvel especificar as margens externas diferentes para diferentes lados: margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; Propriedade abreviada A propriedade abreviao para todas as propriedades de margem externa "margin": margin:100px 50px;margin:100px 50px; A propriedade de margem externa podem ter de um a quatro valores. margin:25px 50px 75px 100px; margem superior de 25px margem direita de 50px margem inferior de 75px margem esquerda 100px margin:25px 50px 75px; margem superior de 25px margens direita e esquerda so 50px margem inferior de 75px margin:25px 50px; margens superior e inferior so 25px margens direita e esquerda so 50px margin:25px; todas as quatro margens so 25px

5.4.Margem interna
A margem interna limpa uma rea em torno do contedo (dentro da borda) de um elemento. A margem interna afetada pela cor de fundo do elemento. A margem interna superior, inferior, direita e esquerda podem ser alterados de forma independente usando propriedades separadas. Uma propriedade de margem interna abreviada tambm pode ser usada, para alterar todas as margens internas de uma s vez. Possveis valores length - Define uma margem interna fixa (em pixels, pt, em, etc) % - Define uma margem interna em % do elemento que contm Lados individuais Em CSS, possvel especificar margens internas diferente para lados diferentes: padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; Propriedade abreviada Assim como as margens externas margens internas tem uma abreviao de propriedade.A abreviao para todas as propriedades de preenchimento "padding":

20

padding:25px 50px; Assim como margens externas podem ter de um a quatro valores.

6.Dimenso
As propriedades de dimenso CSS permitem controlar a altura e largura de um elemento. width - define a largura de um elemento. Aceita auto, length, % e inherit. min-width - define a largura mnima de um elemento. Aceita none, length, % e inherit. max-width - define a largura mxima de um elemento. Aceita none, length, % e inherit. height - define a altura de um elemento. Aceita auto, length, % e inherit. min-height - define a altura mnima de um elemento. Aceita none, length, % e inherit. max-height - define a altura mxima de um elemento. Aceita none, length, % e inherit.

Sendo: auto - definido pelo navegador none - no definido length - medida em px, pt, com etc. % - porcentagem do elemento inherit -herda do elemento pai Posicionamento de elementos As propriedades de posicionamento CSS permitem que voc posicione um elemento. Tambm pode colocar um elemento atrs de outro, e especificar o que deve acontecer quando o contedo de um elemento muito grande. H quatro diferentes mtodos de posicionamento. Para posicionar um elemento dentro de um documento HTML o CSS possui os seguintes atributos: position - define o tipo de posicionamento. top - define a distncia do topo do elemento em relao a outro elemento ou em relao a janela. left - define a distncia do lado esquerdo do elemento em relao a outro elemento ou em relao a janela. bottom - define a distncia da base do elemento em relao a outro elemento ou em relao a janela. right - define a distncia do lado direito do elemento em relao a outro elemento ou em relao a janela. Os elementos podem ser posicionados usando a parte superior, inferior, esquerda e propriedades adequadas. No entanto, essas propriedades no funcionar a menos que a propriedade de posio definida em primeiro lugar. Ao posicionarmos um elemento utilizando os atributos acima devemos nos lembrar que o sistema de coordenadas dentro de um documento HTML possui a coordenada (0,0) no canto superior esquerdo de um elemento ou da janela. Tambm devemos nos lembrar que se definirmos uma distncia para o atributo left, no devemos utilizar o atributo right. A mesma ideia vale para os atributos top e bottom. Eles tambm funcionar de forma diferente, dependendo do mtodo de posicionamento. Posicionamento esttico Este tipo de posicionamento, em geral, no precisa ser definido, pois o tipo de posicionamento padro de todos os elementos. O posicionamento esttico definido atravs do atributo position com o valor static e no afetado pelos atributos top, bottom, left e right. Posicionamento fixo Um elemento com posicionamento fixo posicionado em relao janela do navegador. definido atravs do atributo position com o valor fixed e sua posio definida pelos atributos top, bottom, left e/ou right. Todos os elementos posicionados fixamente no mudam de posio mesmo quando ocorrer uma rolagem vertical ou horizontal. p.pos_fixed { position:fixed; top:30px; right:5px; } Posicionamento relativo Um elemento com posicionamento relativo posicionado em relao sua posio original. definido atravs do atributo position com o valor relative e sua posio definida pelos atributos top, bottom, left e/ou right.

21

h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } O contedo de elementos relativamente posicionado pode ser movido e sobrepor outros elementos, mas o espao reservado para o elemento ainda preservado no fluxo normal. h2.pos_top { position:relative; top:-50px; } Elementos relativamente posicionados so muitas vezes utilizados como blocos de contineres para elementos posicionados absolutamente. Posicionamento absoluto Um elemento com posicionamento absoluto posicionado em relao a um elemento ancestral que tem uma posio esttica diferente. Se nenhum elemento for encontrado, o bloco de contedo <html>: definido atravs do atributo position com o valor absolute e sua posio definida pelos atributos top, bottom, left e/ou right. h2 { position:absolute; left:100px; top:150px; } Elementos posicionados absolutamente so removidos do fluxo normal. O documento e os outros elementos se comportam como o elemento de posicionamento absoluto no existem. Elementos posicionados absolutamente podem se sobrepor outros elementos. Elementos sobrepostos Quando os elementos so posicionados fora do fluxo normal, podem sobrepor outros elementos. A propriedade z-index especifica a ordem de empilhamento de um elemento (que elemento deve ser colocado em frente, ou para trs, os outros). Um elemento pode ter uma ordem de pilha positiva ou negativa: img { position:absolute; left:0px; top:0px; z-index:-1; } Um elemento com uma maior ordem da pilha est sempre em frente de um elemento com uma ordem mais baixa da pilha. Nota: Se dois elementos posicionados sobrepem, sem um z-index especificado, o ltimo elemento posicionado no cdigo HTML ser mostrado no topo. Unidades de medidas Em CSS possumos diversas unidades de medida como podemos verificar na listagem abaixo: in - polegada. cm - centmetro. mm- milmetro. em - tamanho relativo ao tamanho de fonte atual no documento. 1em igual ao tamanho da fonte atual, 2em o dobro do tamanho da fonte atual e assim por diante.

22

 ex - essa unidade igual altura da letra "x"minscula da fonte atual do documento. pt - ponto (1pt o mesmo que 1/72 polegadas). px - pixels (um ponto na tela do computador). Da lista acima, as unidades mais utilizadas so px e em. Alinhamento Horizontal Em CSS, vrias propriedades so usados para alinhar os elementos horizontalmente. Alinhando elementos de blocos Um elemento um elemento de bloco, que ocupa toda a largura disponvel, e tem uma quebra de linha antes e depois dele. Exemplos de elementos de bloco: <h1> <p> <div>

Alinhar no centro usando a propriedade margin Elementos de bloco podem ser alinhados definindo as margens esquerda e direita como "auto". Nota: O uso margin: auto no funciona no IE8 e anteriores, a menos que um DOCTYPE for declarado!. Definir as margens esquerda e direita para auto especifica que eles devem dividir a margem disponvel de forma igual. O resultado um elemento centralizado: .center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; } Dica: O alinhamento no tem efeito se a largura de 100%. Alinhando a direita e esquerda usando a propriedade position Um mtodo de alinhar elementos utilizar o posicionamento absoluto: .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; } Nota: Elementos com alinhamento absoluto so removidos do fluxo normal e podem sobrepor elementos Problemas de compatibilidade crossbrowser Ao alinhar elementos como este, sempre uma boa ideia de predefinir margin e padding para o elemento <body>. Isso para evitar diferenas visuais em diferentes navegadores. H um problema com o IE8 e verses anteriores, quando se usa a propriedade position. Se um elemento de recipiente (no nosso caso <div class="container">) tem uma largura especificada, e a declarao !DOCTYPE deve estar presente. body { margin:0; padding:0; } .container { position:relative; width:100%; }

23

.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; } Alinhando a esquerda e a direita usando a propriedade float Um mtodo de alinhamento de elementos utilizando a propriedade float: .right { float:right; width:300px; background-color:#b0e0e6; } Problemas de compatibilidade crossbrowser Ao alinhar elementos como este, sempre uma boa ideia de predefinir margin e padding para o elemento <body>. Isso para evitar diferenas visuais em diferentes navegadores. H um problema com o IE8 e verses anteriores, quando se usa a propriedade float. Para evitar problemas a declarao ! DOCTYPE deve estar presente.

7.Visualizao e Visibilidade
A propriedade display especifica se / como um elemento exibido, e a propriedade Visibility especifica se um elemento deve ser visvel ou oculto. Ocultando um elemento - display:none ou visibility:hidden Esconder um elemento pode ser feito definindo a propriedade display para "none" ou a propriedade de visibilidade para "hiden". No entanto, note que estes dois mtodos produzem resultados diferentes: visibility: hidden oculta um elemento, mas ele ainda ocupam o mesmo espao de antes. O elemento ser escondido, mas ainda afeta o layout. h1.hidden {visibility:hidden;} display: none esconde um elemento, e este no vai assumir qualquer espao. O elemento ser escondido, e a pgina ser exibida como se o elemento no est l: h1.hidden {display:none;} Blocos e elementos embutidos Um elemento bloco um elemento, que ocupa toda a largura disponvel, e tem uma quebra de linha antes e depois dele. Exemplos de elementos de bloco: <h1> <p> <div> Um elemento embutido ocupa apenas a largura necessria, e no forar quebras de linhas. Exemplos de elementos em linha <span> <a> Mudando a forma como um elemento exibido Mudando um elemento embutido para um elemento de bloco, ou vice-versa, pode ser til para fazendo a pgina parecer de uma maneira especfica, e ainda seguir os padres web. O exemplo a seguir exibe os itens da lista como elementos em linha: li {display:inline;}

24

O exemplo a seguir exibe elementos span como elementos do bloco: span {display:block;} Elementos Flutuantes Com CSS flutuante, um elemento pode ser empurrado para a esquerda ou para a direita, permitindo que os outros elementos sejam moldados volta dele. Float muito utilizado para imagens, mas tambm til quando se trabalha com layouts. Como Flutuar Elementos Elementos so flutuados na horizontal, o que significa que um elemento s pode ser lanado esquerda ou direita, no para cima ou para baixo. Um elemento flutuante pode se mover tanto para a esquerda ou direita,. Geralmente isso significa todo o caminho para a esquerda ou direita do elemento que o contm. img { float:right; } Elementos flutuantes um ao lado do outro Se colocar vrios elementos flutuantes aps o outro, eles iro flutuar ao lado do outro, se houver espao. Aqui fizemos uma galeria de imagens usando a propriedade float: .thumbnail { float:left; width:110px; height:90px; margin:5px; } Desligar Float - Usando clear Elementos aps o elemento flutuante vao fluir em torno dele. Para evitar isso, use a propriedade clear. A propriedade clear especifica quais os lados de um elemento outros elementos flutuantes no so permitidos. Adicionando uma linha de texto para a galeria de imagens, usando a propriedade clear: .text_line { clear:both; }

8.Cores e Efeitos
Em uma propriedade CSS na qual que devemos atribuir uma cor, podemos utilizar trs formas diferentes de se escrever esse valor: nome da cor, valor hexadecinal ou RGB. Uma cor heaxadecimal definida da seguinte forma: #RRGGBB, na qual RR, GG e BB devem variar de 00 a FF e representam os componentes vermelho, verde e azul de uma cor. Para definirmos uma cor utilizando a notao RGB devemos utilizar a funo rgb(R, G, B) substituindo as letras R, G e B por valores de 0 a 255 ou por uma porcentagem de 0% a 100%. Exemplo: p{ background:rgb(255,255,0); padding:10px; font:13px verdana; } Em CSS3 ainda possumos mais trs formas: RGBA, HSL e HSLA. RGBA e a diferena da propriedade OPACITY

25

O CSS3 nos trouxe a possibilidade de modificar a opacidade dos elementos via propriedade opacity. Lembrando que quando modificamos a opacidade do elemento, tudo o que est contido nele tambm fica opaco e no apenas o background ou a cor dele. O RGBA funciona da mesma forma que o RGB, ou seja, definindo uma cor para a propriedade. No caso do RGBA, alm dos 3 canais RGB (Red, Green e Blue) h um quarto canal, A (Alpha) que controla a opacidade da cor. Sendo A um nmero de ponto flutuante ente 0 a 1, que representa a porcentagem em i (valor% / 100) de opacidade. Exemplo: p{ background:rgba(255,255,0, 0.5); padding:10px; font:13px verdana; } O HSL define as cores atravs da matiz, saturao e luminosidade (hue, saturation e lightness). Devemos utilizar a funo hsl(H, S, L), na qual H pode variar de 0 a 360 e S e L de 0% a 100%. As formas RGBA e HSLA utilizam as funes rgba(R, G, B, A) e hsla(H, S, L, A), respectivamente. Ambas as funes possuem um ltimo parmetro que significa a opacidade da cor (alpha). Esse valor varia de 0 a 1. currentColor O valor currentColor muito simples de se entender e pode ser muito til para diminuirmos o retrabalho em alguns momentos da produo. Imagine que o currentColor uma varivel cujo seu valor definido pelo valor da propriedade color do seletor. Veja o cdigo abaixo: p{ background:red; padding:10px; font:13px verdana; color: green; border:1px solid green; } Note que o valor da propriedade color igual ao valor da cor da propriedade border. H uma redundncia de cdigo, que nesse caso irrelevante, mas quando falamos de dezenas de arquivos de CSS modulados, com centenas de linhas cada, essa redundncia pode incomodar a produtividade. A funo do currentColor simples: ele copia para outras propriedades do mesmo seletor o valor da propriedade color. Veja o cdigo abaixo para entender melhor: p{ background:red; padding:10px; font:13px verdana; color: green; border:1px solid currentColor; } Veja que apliquei o valor currentColor onde deveria estar o valor de cor da propriedade border. Agora, toda vez que o valor da propriedade color for modificado, o currentColor aplicar o mesmo valor para a propriedade onde ela est sendo aplicada. Isso funciona em qualquer propriedade que faa utilizao de cor como background, border, etc. Obviamente no funciona para a propriedade color. O currentColor tambm no funciona em seletores separados, ou seja, voc no consegue atrelar o valor da propriedade color ao currentColor de outro seletor.

8.1.Gradiente
Uma das features mais interessantes a criao de gradientes apenas utilizando CSS. O IE(8,9) no suporta esse recurso para isso possvel usar uma imagem: Veja abaixo um exemplo de cdigo, juntamente com o fallback de imagem: div { width:200px; height:200px; background-color: #FFF; /* imagem caso o browser no aceite a feature */ background-image: url(images/gradiente.png);

26

/* Firefox 3.6+ */ background-image: -moz-linear-gradient(green, red); /* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient(green, red); /* Opera 11.10+ */ background-image: -o-linear-gradient(green, red); } Stops ou definindo o tamanho do seu gradiente O padro que o gradiente ocupe 100% do elemento como vimos no exemplo anterior, mas muitas vezes queremos fazer apenas um detalhe. Nesse caso ns temos que definir um STOP, para que o browser saiba onde uma cor deve terminar para comear a outra. Perceba o 20% ao lado da cor vermelha. O browser calcula quanto 20% da altura (ou largura dependendo do caso) do elemento, e comea o gradiente da cor exatamente ali. O cdigo de exemplo segue abaixo: /* Firefox 3.6+ */ background-image: -moz-linear-gradient(green, red 20%); /* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient(green, red 20%); /* Opera 11.10+ */ background-image: -o-linear-gradient(green, red 20%); Tambm possvel adicionar um valor ao verde. COLUMNS column-count A propriedade column-count define a quantidade de colunas ter o bloco de textos. /* Define a quantidade de colunas, a largura definida uniformemente. */ -moz-column-count: 2; -webkit-column-count: 2; column-width Com a propriedade column-width definimos a largura destas colunas. /* Define qual a largura mnima para as colunas. Se as colunas forem espremidas, fazendo com que a largura delas fique menor que este valor, elas se transformam em 1 coluna automaticamente */ -moz-column-width: 400px; -webkit-column-width: 400px; column-gap A propriedade column-gap cria um espao entre as colunas, um gap. /* Define o espao entre as colunas. */ -moz-column-gap: 50px; -webkit-column-gap: 50px;

8.2.TRANSFORM 2D
A propriedade transform manipula a forma com que o elemento aparecer na tela. Voc poder manipular sua perspectiva, escala e ngulos. Uma transformao especificada utilizando a propriedade transform. Os browsers que suportam essa propriedade, a suportam com o prefixo especificado. Os valores possveis at agora esto especificados abaixo: scale O valor scale modificar a dimenso do elemento. Ele aumentar proporcionalmente o tamanho do elemento levando em considerao o tamanho original do elemento. skew Skew modificar os ngulos dos elementos. Voc pode modificar os ngulos individualmente dos eixos X e Y como no cdigo abaixo: -webkit-transform: skewY(30deg); -webkit-transform: skewX(30deg); translation O translation mover o elemento no eixo X e Y. O interessante que voc no precisa se preocupar com floats, positions, margins e etc. Se voc aplica o translation, ele mover o objeto e pronto.

27

rotate O rotate rotaciona o elemento levando em considerao seu ngulo, especialmente quando o ngulo personalizado com o transformorigin. Vrias transformaes em um nico elemento Para utilizarmos vrios valores ao mesmo tempo em um mesmo elemento, basta definir vrios valores separando-os com espaos em uma mesma propriedade transform: img { -webkit-transform: scale(1.5) skew(30deg); /* para webkit */ -moz-transform: scale(1.5) skew(30deg); /* para gecko */ -o-transform: scale(1.5) skew(30deg); /* para opera */ transform: scale(1.5) skew(30deg); /* para browsers sem prefixo */ } transform-origin A propriedade transform-origin define qual o ponto do elemento a transformao ter origem. A sintaxe idntica ao backgroundposition. Observe o cdigo abaixo: img { -webkit-transform-origin: 10px 10px; /* para webkit */ -moz-transform-origin: 10px 10px; /* para webkit */ -o-transform-origin: 10px 10px; /* para webkit */ transform-origin: 10px 10px; /* para webkit */ }

Como padro as transies sempre acontecem tendo como ponto de ncora o centro do objeto. H algumas situaes que pode ser que voc queira modificar essa ncora, fazendo com que por exemplo, a rotao acontea em algum dos cantos do elemento. O cdigo de exemplo acima far com que a transformao acontea a partir dos 10px do topo no canto esquerdo.

8.3.Transies e animaes
A propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a funo que o CSS tem perante o HTML acrescentando maneiras de produzirmos animaes e transies. No estou dizendo que voc far animaes complicadas, com diversos detalhes tcnicos e etc. Para esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza faro um trabalho melhor com menos esforo. Mas fato que as animaes via CSS nos ajudar a levar a experincia do usurio para outro patamar. O bsico: propriedade transition O que a propriedade transition faz comparar os valores das propriedades em comum entre os dois estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando h a ativao da funo. Esta uma tcnica simples e que serve para manipularmos transies bsicas como cor, tamanho, posio etc. No cdigo abaixo definimos que o link ter sua cor de texto igual a preta e seu background ser cinza. O resultado esperado que ao passar o mouse no link a cor do texto seja modificada, mudando do branco para o preto e que a cor de background mude de cinza para vermelho. O cdigo abaixo faz exatamente isso: a{ color: white; background: gray; } a:hover { color: black; background: red; } O problema que a transio muito brusca. O browser apenas modifica as caractersticas entre os dois blocos e pronto. No h nenhuma transio suave entre os dois estados. Podemos fazer a mudana de um estado para outro utilizando a propriedade transition. Suponha que ao passar o mouse, as mudanas acontecessem em um intervalo de meio segundo. Bastaria colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as caractersticas do link com uma pequena transio de meio segundo. O cdigo seria como se segue abaixo: a{

28

color: white; background: gray; -webkit-transition: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } a:hover { color: black; background: red; -webkit-transition: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } Propriedade animation e regra keyframe A propriedade trasition trabalha de forma muito simples e inflexvel. Voc praticamente diz para o browser qual o valor inicial e o valor final para que ele aplique a transio automaticamente, controlamos praticamente apenas o tempo de execuo. Para termos mais controle sobre a animao temos a propriedade animation que trabalha juntamente com a rule keyframe. Basicamente voc consegue controlar as caractersticas do objeto e suas diversas transformaes definindo fases da animao. Observe o cdigo abaixo e veja seu funcionamento: @-webkit-keyframes rodar { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }

Propriedade animation-name animation-duration animation-timing-function

Definio Especificamos o nome da funo de animao Define a durao da animao. O valor declarado em segundos Descreve qual ser a progresso da animao a cada ciclo de durao. Existem uma srie de valores possveis e que pode ser que o seu navegador ainda no suporte, mas so eles: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(<number>, <number>, <number>, <number>) [, ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(<number>, <number>, <number>, <number>)]* O valor padro ease. Define o nmero de vezes que o ciclo deve acontecer. O padro um, ou seja, a animao acontece uma vez e pra. Pode ser tambm infinito definindo o valor infinite no valor. Define se a animao ir acontecer ou no no sentido inverso em ciclos alternados. Ou seja, se a animao est acontecendo no sentido horrio, ao acabar a animao, o browser faz a mesma animao no elemento, mas no sentido anti-horrio. Os valores so alternate ou normal. Define se a animao est acontecendo ou se est pausada. Voc poder por exemplo, via script, pausar a animao se ela estiver acontecendo. Os valores so running ou paused. Define quando a animao ir comear. Ou seja, voc define um tempo para que a animao inicie. O valor 0, significa que a animao comear imediatamente.

animation-interation-count animation-direction

animation-play-state animation-delay

Definindo ciclos Podemos flexibilizar melhor nosso keyframe definindo as fases da animao. Por exemplo, podemos dizer para o elemento ter uma cor de background diferente quando a animao chegar aos 10% do ciclo, e assim por diante. Veja o exemplo: @-webkit-keyframes rodaroda { 0% { -webkit-transform:rotate(0deg); } 50% {

29

background:red; -webkit-transform:rotate(180deg); } 100% { -webkit-transform:rotate(360deg); } }

8.4.Bordas com imagens

A sintaxe do border-image se divide em trs partes: 1) URL da imagem que ser utilizada. 2) Tamanho do slice das bordas. 3) Como o browser ir aplicar a imagem na borda. Segue um exemplo da sintaxe abaixo: a{ display:block; width:100px; -webkit-border-image: url(border.gif) 10 10 10 10 stretch; } Acima definimos uma imagem com o nome de border.gif, logo depois definimos o width de cada uma das bordas do elemento. A sintaxe igual a outras propriedades com 4 valores: top, right, bottom, left. E logo depois colocamos qual o tipo de tratamento que a imagem vai receber. Dividindo a imagem Para posicionar a imagem devidamente em seu objeto o browser divide a imagem em 9 sees: Quando a imagem colocada no elemento, o browser posiciona os cantos da imagem juntamente com os cantos correspondentes do elemento. Ou seja, o bloco 1 da imagem colocado no canto superior esquerdo, o 3 no canto superior direito e assim por diante. Se voc fizer o teste, a imagem aparecer no elemento como se estivesse desproporcional. Isso normal porque a imagem deve seguir as propores do elemento e no as suas prprias. Comportamento da imagem O comportamento da imagem a parte mais importante porque define como o centro da imagem (no caso do nosso exemplo a seo de nmero 5), ir ser tratada. H vrios valores, mas que mais simples de se entender a stretch, que estica e escala a imagem para o tamanho do elemento aplicado. H outros valores como round e repeat. Mas hoje alguns browsers no tem tanto suporte e acabam ou ignorando esses valores ou como no caso do Safari e o Chrome, interpretam o round como o repeat. Vamos nos concentrar com o stretch e voc entender como funciona a propriedade.

8.5.Mltiplos backgrounds
A sintaxe para mltiplos backgrounds praticamente idntica a sintaxe para definir um background. Segue abaixo um exemplo: div { width:600px; height:500px; background: url(img1.png) top left repeat-X, url(img2.png) bottom left repeat-Y; }

Definimos apenas uma propriedade background, o valor dessa propriedade em vez de conter apenas um valor como normalmente fazemos, poder haver vrios, com suas respectivas definies de posio, repeat e attachment (fixed).

9.Barra de Navegao
Ter fcil navegao importante para qualquer site. Com CSS voc pode transformar chatos menus HTML em barras de navegao de boa aparncia. Barra de Navegao = Lista de links

30

Uma barra de navegao precisa de HTML padro como base.Em nossos exemplos, vamos construir a barra de navegao a partir de uma lista padro HTML. Uma barra de navegao basicamente uma lista de links, portanto, usar o <ul> e elementos <li> faz todo o sentido: <ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> Agora vamos remover os marcadores e as margens e preenchimento da lista: ul{ list-style-type:none; margin:0; padding:0; } Exemplo explicado: 1. list-style-type: none - Remove os marcadores. Uma barra de navegao no precisa de marcadores de lista 2. Definir margens e preenchimento como 0 para remover as configuraes padro do navegador O cdigo, no exemplo acima o cdigo padro usado em ambas as barras de navegao verticais e horizontais.

9.1.Barra de Navegao Vertical

Para criar uma barra de navegao vertical apenas necessrio alm do estilo acima, adicionar o estilo abaixo ao elemento <a>. a{ display:block; width:60px; } Exemplo explicado: display: block - Exibindo os links como elementos de bloco torna a toda rea de link clicvel (no apenas o texto), e que nos permite especificar a largura width: 60px - Elementos de bloco ocupam toda a largura disponvel por padro. Queremos especificar uma largura de 60 px Nota: Sempre especifique a largura para os elementos <a> em uma barra de navegao vertical. Se voc omitir a largura, o IE6 pode produzir resultados inesperados.

9.2.Barra de Navegao Horizontal

H duas maneiras de criar uma barra de navegao horizontal. Usando itens da lista embutidos ou flutuante. Ambos os mtodos funcionam bem, mas se voc quiser que os links sejam do mesmo tamanho, voc tem que usar o mtodo flutuante. Lista de Itens Embutidos Uma forma de construir uma barra de navegao horizontal especificar os elementos <li> como embutidos, alm do cdigo de barra de navegao "padro" citado acima: li{ display:inline; } Exemplo explicado: display: inline; - Por padro, elementos <li> so elementos de bloco. Aqui, removido as quebras de linha antes e depois de cada item da lista, para exibi-los em uma linha Lista de Itens Flutuantes No exemplo acima, os links tm larguras diferentes. Para todos os links terem uma largura igual, flutue os elementos <li> e especifique uma largura para os elementos <a>:

31

li{ float:left; } a{ display:block; width:60px; } Exemplo explicado: float: left - usardo float para pegar elementos de bloco para cploca-los lado-a-lado horizontalmente. display: block - os links so exibidos como elementos de bloco tornando toda rea do link clicvel (no apenas o texto), e que nos permite especificar a largura largura: 60px - Uma vez que os elementos do bloco ocupem toda a largura disponvel, no podem flutuar ao lado do outro. Ns especificamos a largura dos links para 60px.

10.Imagens
10.1.Galeria de imagens
CSS pode ser usado para criar uma galeria de imagens. Uma galeria de imagens criada com CSS assim: <html> <head> <style> div.img { margin:2px; border:1px solid #0000ff; height:auto; width:auto; float:left; text-align:center; } div.img img { display:inline; margin:3px; border:1px solid #ffffff; } div.img a:hover img { border:1px solid #0000ff; } div.desc { text-align:center; font-weight:normal; width:120px; margin:2px; } </style> </head> <body> <div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="klematis_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div>

32

<div class="img"> <a target="_blank" href="klematis2_big.htm"> <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis3_big.htm"> <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis4_big.htm"> <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div> </body> </html>

10.2.Imagens Opacas e Transparentes

Criar imagens transparentes com CSS fcil. A propriedade CSS3 para transparncia a opacity. Primeiro vamos criar uma imagem transparente com CSS. img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } A propriedade de opacidade pode ter um valor de 0,0 - 1.0. Um valor mais baixo torna o elemento mais transparente. Efeito Hover img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } O primeiro bloco de CSS semelhante ao cdigo no exemplo acima. Alm disso, ns adicionamos o que deve acontecer quando um usurio passar o mouse sobre uma das imagens. Neste caso, queremos que a imagem no seja transparente quando o usurio passar o mouse sobre ele. O CSS para isso : opacity = 1. Caixa de Texto transparente <html> <head> <style> div.background { width:500px; height:250px; background:url(klematis.jpg) repeat;

33

border:2px solid black; } div.transbox { width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. </p> </div> </div> </body> </html> Primeiro, criamos um elemento div (class = "background"), com uma altura e largura fixa, uma imagem de fundo, e uma borda. Ento vamos criar uma pequena div (class = "transbox") dentro do primeiro elemento div. A div "transbox" tem uma largura fixa, uma cor de fundo, e uma borda - e transparente. Dentro da div transparente, adicionado algum texto dentro de um elemento p.

10.3.Imagens Sprites
Um imagem sprite uma coleo de imagens colocadas em uma nica imagem. Uma pgina web com muitas imagens pode levar um longo tempo para carregar e gera pedidos de vrios servidores. Usando imagem sprites reduzir o nmero de solicitaes do servidor e economizara banda. Exemplo: Usaremos uma imagem sprites com 3 imagens. Com CSS, podemos mostrar apenas a parte da imagem que precisamos. No exemplo seguinte, o CSS especifica qual parte da imagem "img_navsprites.gif" mostrar: img.home { width:46px; height:44px; background:url(img_navsprites.gif) 0 0; } Exemplo explicou: <img class="home" src="img_trans.gif" /> - Apenas define uma pequena imagem transparente porque o atributo src no pode ser vazio. A imagem exibida ser a imagem de fundo que ser especificada no CSS width:46px;height:44px; - Define a parte da imagem que queremos usar background: url (img_navsprites.gif) 0 0; - Define a imagem de fundo e de sua posio ( esquerda 0px, 0px topo)

34

Esta a maneira mais fcil de usar sprites de imagem, agora queremos expandi-lo usando links e efeitos hover. Criando uma lista de navegao com imagens sprite Queremos usar a imagem do sprite ("img_navsprites.gif") para criar uma lista de navegao. Ns vamos usar uma lista de HTML, porque pode ser um link e tambm suporta uma imagem de fundo: #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites.gif') 0 0;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites.gif') -47px 0;} #next{left:129px;width:43px;} #next{background:url('img_navsprites.gif') -91px 0;} Exemplo expicado: #navlist{position:relative;} -posio definida como relativa para permitir o posicionamento absoluto dentro dela #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin e padding so definido como 0, estilo de lista removido, e todos os itens da lista so posicionados como absolutos. #navlist li, #navlist a{height:44px;display:block;} -a altura de todas as imagens so 44px Agora comeam a posio e estilo de cada parte especfica: #home{left:0px;width:46px;} - Posicionado alinhado a esquerda, e a largura da imagem 46px #home{background:url(img_navsprites.gif) 0 0;} - Define a imagem de fundo e de sua posio ( esquerda 0px, 0px topo) #prev{left:63px;width:43px;} - Posicionado 63px para a direita (#home width 46px + algum espao extra entre os itens), e a largura de 43px. #prev{background:url('img_navsprites.gif') -47px 0;} - Define a imagem de fundo 47px para a direita (#home width 46px + divisor de linha de 1px) #next{left:129px;width:43px;}- Posicionado 129px para a direita (inicia em #prev is 63px + #prev width 43px + espao extra), e a largura de 43px. #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Define a imagem de fundo 91px para a direita (#home width 46px + divisor de linha de 1px + #prev width 43px + divisor de linha de 1px )

Efeito Hover com imagens sprites Agora queremos adicionar um efeito de foco para a nossa lista de navegao. A nova imagem ("img_navsprites_hover.gif") contm trs imagens de navegao e trs imagens para uso de efeitos em foco: Porque esta uma nica imagem, e no seis arquivos separados, no haver atraso de carregamento quando um usurio passa o mouse sobre a imagem. Ns s adicionamos trs linhas de cdigo para adicionar o efeito hover: #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;} #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;} #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;} Exemplo explicado: Uma vez que o item da lista contm um link, podemos usar a pseudo-classe :hover #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} -Para todas as trs imagens de foco especifique a mesma posio de fundo, s 45px mais baixo.

11.Tipos de mdia
Com os tipos de mdia uma pgina pode ter um layout para tela, uma para impresso, uma para dispositivos portteis, etc Algumas propriedades CSS so projetados somente para uma determinada mdia. Por exemplo, o "voice-family" propriedade projetado para os agentes do usurio sonoros. Algumas outras propriedades podem ser usados para diferentes tipos de mdias de comunicao. Por exemplo, o "font-size" propriedade pode ser usada para a tela e mdia impressa, mas talvez com valores diferentes. Um documento normalmente precisa de um maior tamanho da fonte em uma tela do que no papel, e fontes sans-serif so mais fceis

35

de ler na tela, enquanto fontes com serif so mais fceis de ler no papel. A regra @media A regra @ media permite que regras de estilo diferentes para diferentes meios de comunicao na mesma folha de estilo. <html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } </style> </head> <body> .... </body> </html> Outros tipos de midia Nota: Os nomes de tipo de mdia no so case-sensitive. all - Usado para todos os dispositivos do tipo de mdia aural- Usado para a fala e sintetizadores de voz braille - Usado para dispositivos braille com feedback ttil embossed - Usado para impressoras em braille com paginado handheld - Usado para dispositivos pequenos ou de mo print - Usado para impressoras projection - Usado para apresentaes projetadas, como slides screen - Usado para telas de computador tty - Usado para mdia usando uma grade de caracteres de densidade fixa, como teletipos e terminais tv - Usado para televiso

12.Mdulo TEMPLATE LAYOUT

O float cuida de toda a diagramao do site, desde os elementos que definiro as reas mestres do site at os pequenos detalhes de imagens e cones. A propriedade float muito simples de se entender. O problema no o funcionamento, mas os efeitos que a propriedade float causa nos elementos prximos. Se voc pede para duas colunas ficarem flutuando esquerda e outra coluna direita, o rodap sobe. Ou se voc coloca um elemento envolvendo outros elementos com float, esse elemento perde a altura. Estes so problemas corriqueiros que j tem solues inteligentes e que no apresentam chateaes mais graves. Infelizmente o float no o ideal para a diagramao e organizao dos elementos do layout. Ele resolve muitos problemas, mas deixa a desejar em diversos sentidos. O float est completamente ligado a ordem dos elementos no HTML. Tendo em vista estes e outros problemas o W3C criou um novo mdulo. Na verdade ele no o nico, e nem pode ser para que tenhamos diversas formas de trabalhar. O mdulo em questo chamado de Template Layout. Esse mdulo consiste em uma forma de criarmos e organizarmos os elementos e informaes do layout de forma menos espartana e mais flexvel. Podemos dividir a construo do layout em duas grandes partes: 1) Definio dos elementos mestres e grid a ser seguido. 2) Formatao de font, cores, background, bordas etc. As propriedades nesta especificao trabalham associando uma poltica de layout de um elemento. Essa poltica chamada de template-based positioning (no tem nada a ver com a propriedade position, pelo contrrio uma alternativa) que d ao elemento uma grid invisvel para alinhar seus elementos descendentes. Porque o layout deve se adaptar em diferentes janelas e tamanhos de papis, as colunas e linhas do grid deve ser fixas ou flexveis dependendo do tamanho.

36

O W3C mostra alguns casos comuns: Pginas complexas com mltiplas barras de navegao em reas com posies fixas como publicidade, submenus e etc. Formulrios complexos, onde o alinhamento de labels e campos podem ser facilmente definidos com as propriedades deste mdulo com a ajuda das propriedades de margin, padding e tables. GUIs, onde botes, toolbars, labels, cones etc, tem alinhamentos complexos e precisam estar sempre alinhados caso o tamanho ou a resoluo da tela mudam. Medias que so paginadas, como medias de impresso onde cada pgina so divididos em reas fixas para contedos de gneros diferentes. Template-based positioning so uma alternativa para a propriedade position com o valor absolute. Antigamente lembro-me que quase todos os desenvolvedores tentavam organizar e diagramar layouts utilizando position. No que seja errado, mas definitivamente no a melhor forma. Costumo dizer em meus cursos e palestras que position para detalhes. Nada muito grande, mas para pequenos detalhes. Usamos position para posicionarmos elementos que no tem relao direta com sua posio no cdigo HTML. Ou seja, no importa onde o elemento esteja, o position:absolute; ir posicionar o elemento nas coordenadas que voc quiser. Sintaxe e funcionamento O mdulo Template Layout basicamente define slots de layout para que voc encaixe e posicione seus elementos. O mapeamento dos slots feito com duas propriedades que j conhecemos que este mdulo adiciona mais alguns valores e funcionalidades, so as propriedades position e display. A propriedade display ir definir como ser o Grid. Quantos slots e etc. A propriedade position ir posicionar seus elementos nestes slots. Veja o cdigo HTML abaixo: <div class=geral> <nav class=menu>...</nav> <aside class=menulateral>...</aside> <aside class=publicidade>...</aside> <article class=post>...</article> <footer>...</footer> </div> Agora iremos definir a posio destes elementos. O cdigo CSS seria assim: .geral { display: aaa bcd eee; } nav.menu {position:a;} aside.menulateral {position:b;} aside.publicidade {position:d;} article.post {position:c;} footer {position:e;} O funcionamento da propriedade display A propriedade display define a organizao dos slots. Um slot um local onde o seu elemento ficar. Cada elemento fica em um slot. Aqui o elemento display trabalha como um table, onde seu contedo ser colocando em colunas e linhas. A nica diferena que o nmero de linhas e colunas no dependem do contedo fixaO funcionamento da propriedade display A propriedade display define a organizao dos slots. Um slot um local onde o seu elemento ficar. Cada elemento fica em um slot. Aqui o elemento display trabalha como um table, onde seu contedo ser colocando em colunas e linhas. A nica diferena que o nmero de linhas e colunas no dependem do contedo fixa pelo valor da propriedade. E a outra principal diferena que a ordem dos descendentes no cdigo no importa. Existem alguns valores para que voc trabalhe: letra, @ (arroba) e . (pronto). Cada letra diferente um slot de contedo diferente. O @ define um sinal para um slot padro. E o . (ponto) define um espao em branco. No possvel fazer um slot que no seja retangular ou vrios slots com a mesma letra. Um template sem letra nenhuma tambm no possvel. Um template com mais de um @ tambm proibido. Se houverem esses erros a declarao ignorada pelo browser. Pra definir a altura da linha (row-height) podemos utilizar o valor padro auto, que define altura que a altura da linha feito de acordo com a quantidade de contedo no slot. Voc pode definir um valor fixo para a altura. No possvel definir um valor negativo. Quando definimos um * (astersco) para a altura, isso quer dizer que todas as alturas de linha sero iguais. A largura da coluna (col-width) definida com valores fixos, como o row-height. Podemos definir tambm o valor de * que funciona exatamente igual ao altura de linha, mas aplicados a largura da coluna. H dois valores chamados max-content e min-content que fazem com que a largura seja determinada de acordo com o contedo. Outro valor o minmax(p,q) que funciona assim: a largura

37

das colunas so fixadas para ser maiores ou iguais a p e menores ou iguais a q. Pode haver um espao branco (white space) em volta de p e q. Se q > p, ento q ignorado e o minmax(p,q) tratado como minmax(p,p). O valor fit-content o equivalente a minmax(min-content, max-content). Definindo a largura e altura dos slots Para definir a altura dos slots, utilizamos uma sintaxe diretamente na propriedade display. Veja abaixo um exemplo de como podemos fazer isso: display: a a a /150px b c d e e e / 150px 100px 400px 100px; Formatando de uma maneira que voc entenda, fica assim: display: a a a /150px b c d e e e /150px 100px 400px 100px; Ou seja, a primeira coluna do grid ter 100px de largura, a segunda 400px e a terceira 100px. As medidas que coloquei ao lado, iniciando com uma / (barra) definem a altura das linhas. Logo a primeira linha ter 150px e a terceira linha tambm. A linha do meio, como no tem altura definida ter a altura de acordo com a quantidade de contedo. O espao entre as colunas so definidos com . (pontos). Veja o exemplo abaixo: display: a a a /150px . . . /50px b c d . . . /50px e e e /150px 100px 400px 100px; No exemplo acima fiz duas colunas no cdigo compostos por pontos em vez de fazer com letras. Isso quer dizer que entre as colunas do grid haver um espao em branco de 50px de altura. Veja a imagem abaixo para entender melhor o cdigo: O funcionamento da propriedade position O valor da propriedade position especifica qual linha e coluna o elemento ser colocado no template. Voc escreve apenas uma letra por elemento. Vrios elementos podem ser colocados em um mesmo slot. Logo estes elementos tero o mesmo valor de position. Lembre-se que no importa a posio dos elementos no cdigo. E essa a mgica. Podemos organizar o cdigo HTML de acordo com nossas necessidades e levando em considerao SEO, Acessibilidade e processo de manuteno. O HTML fica totalmente intacto separado de qualquer formatao. Muito, mas muito interessante. Pseudo-elemento ::slot() Voc pode formatar um slot especifico simplesmente declarando-o no CSS. Suponha que voc queira que um determinado slot tenha um fundo diferente, alinhamento e etc... Essa formatao ser aplicada diretamente no slot e no no elemento que voc colocou l. Fica mais simples de se formatar porque voc no atrela um estilo ao elemento e sim ao slot. Se voc precisar posicionar aquele elemento em outro lugar, voc consegue facilmente. body { display: aaa bcd } body::slot(b) { background: #FF0 } body::slot(c), body::slot(d) { vertical-align: bottom } As propriedades aplicadas no pseudo elemento slot() seguem abaixo: Todos as propriedades background. vertical-align overflow box-shadow, block-flow e direction ainda esto sendo estudados pelo W3C se elas entraro ou no.

13.Guia de Referncia
Animation @keyframes Especifica a animao

38

animation - A propriedade abreviada para todas as propriedades de animao abaixo, exceto a propriedade animation-playstate property animation-name - Especifica um nome para a animao @keyframes animation-duration - Especifica quantos segundos ou milissegundos uma animao leva para completar um ciclo animation-timing-function - Especifica a curva velocidade da animao animation-delay - Especifica quando a animao vai comear animation-iteration-count - Especifica o nmero de vezes que uma animao deve ser reproduzida animation-direction - Especifica se a animao deve reproduzir no sentido inverso em ciclos alternados animation-play-state - Especifica se a animao est em execuo ou em pausa

Background background - Propriedade abreviada background-attachment - Define se uma imagem de fundo fixa ou rola com o resto da pgina background-color - Define a cor de fundo de um elemento background-image - Define a imagem de fundo de um elemento background-position - Define a posio inicial de uma imagem de fundo background-repeat - Define como uma imagem de fundo ser repetida background-clip - Especifica a rea de pintura do fundo background-origin - Especifica o posicionamento da rea das imagens de fundo background-size - Especifica o tamanho das imagens de fundo Border Box border - Propridade abreviada border-bottom - Define todas as propriedades borda inferior em uma declarao border-bottom-color - Define a cor da borda inferior border-bottom-style - Define o estilo da borda inferior border-bottom-width - Define a largura da borda inferior border-color - Define a cor das quatro bordas border-left - Define todas as propriedades da borda esquerda em uma declarao border-left-color - Define a cor da borda esquerda border-left-style - Define o estilo da borda esquerda border-left-width - Define a largura da borda esquerda border-right - Define todas as propriedades da borda direita em uma declarao border-right-color - Define a cor da borda direita border-right-style - Define o estilo da borda direita border-right-width - Define a largura da borda direita border-style - Define o estilo das quatro bordas border-top - Define todas as propriedades da borda superior em uma declarao border-top-color - Define a cor da borda superior border-top-style - Define o estilo da borda superior border-top-width - Define a largura da borda superior border-width - Define a largura das quatro bordas outline - Define todas as propriedades de contorno em uma declarao outline-color - Define a cor do contorno outline-style - Define o estilo de um contorno outline-width - Define a largura de um contorno border-bottom-left-radius - Define a forma da borda do canto inferior esquerdo border-bottom-right-radius - Define a forma da borda do canto inferior direito border-image - Uma propriedade abreviada para definir todas as propriedades border-image-* border-image-outset - Especifica o valor pelo qual a rea da imagem da borda se estende para alm da fronteira da borda border-image-repeat - Especifica se a imagem da borda deve ser repetida, arredondada ou alongada. border-image-slice - Especifica os deslocamentos para dentro da borda da imagem border-image-source - Especifica uma imagem a ser usada como uma borda border-image-width - Especifica a largura da imagem da borda border-radius - Propriedade abreviada para definir as quatro propriedades border-*-radius border-top-left-radius - Define a forma da borda do canto superior esquerdo border-top-right-radius -Define a forma da borda do canto superior direito box-decoration-break box-shadow - Anexa um ou mais drop-shadows para a caixa

39

 Color

overflow-x - Especifica se deve ou no cortar as margens esquerda / direita do contedo, se ele passar da rea do elemento overflow-y - Especifica se deve ou no cortar as margens superior/inferior do contedo, se ele passar da rea do elemento overflow-style -Especifica o mtodo preferencial para a rolagem elementos que transbordam color-profile - permite a especificao de um perfil de fonte de cor diferente do padro opacity - Define o nvel de opacidade de um elemento rendering-intent - permite a especificao de um mtodo de renderizao de perfil de cor diferente do padro

Content Media bookmark-label - Especifica o rtulo do favorito bookmark-level -Especifica o nvel do favorito bookmark-target - Especifica o destino do link do favorito float-offset - Empurra elementos flutuantes na direo oposta de onde eles foram flutuados com o flutuador hyphenate-after - Especifica o nmero mnimo de caracteres em uma palavra com hfen aps o carter de hifenizao hyphenate-before - Especifica o nmero mnimo de caracteres em uma palavra hifenizada antes do caractere hifenizao hyphenate-character -Especifica uma string que mostrada quando um ocorre uma quebra de linha com hfen hyphenate-lines - Indica o nmero mximo de linhas sucessivas hifenizadas em um elemento hyphenate-resource - Especifica uma lista separada por vrgula de recursos externos que podem ajudar o navegador a determinar os pontos de hifenizao hyphens - Define como dividir as palavras para melhorar o layout dos pargrafos image-resolution - Especifica a resoluo correta de imagens marks - Adiciona marcas ao documento string-set Dimension height - Define a altura de um elemento max-height - define a altura mxima de um elemento max-width - Define a largura mxima de um elemento min-height - Define a altura mnima de um elemento min-width - Define a largura mnima de um elemento width - Define a largura de um elemento Flexible Box box-align - especifica como alinhar os elementos filho de um caixa box-direction - - Especifica a direo em que os filhos de uma caixa so exibidos box-flex - Especifica se os filhos de uma caixa flexvel ou inflexvel em tamanho box-flex-group - Atribui elementos flexveis para flexionar grupos box-lines - Especifica se colunas ir para uma nova linha sempre que ficar sem espao na caixa de pai box-ordinal-group - Especifica a ordem de exibio dos elementos filhos de um caixa box-orient - Especifica se os filhos de uma caixa deve ser dispostos horizontalmente ou verticalmente box-pack Especifica a posio horizontal em caixas horizontais e a posio vertical em caixas verticais Font font - propriedade abreviada, define todas as propriedades da fonte em uma declarao font-family -Especifica a famlia da fonte font-size - especifica o tamanho da fonte font-style - Especifica o estilo da fonte font-variant - Especifica se a fonte deve ser exibida ou no em small-caps font-weight - Especifica o peso de uma fonte @font-face - Uma regra que permite que os sites baixem e usem outras fontes "web-safe" font-size-adjust - Preserva a legibilidade do texto quando ocorre troca de fontesx'

Generated Content content - Usado com os pseudo-elementos :before e :after pseudo-elements, para inserir o contedo gerado counter-increment - incrementos um ou mais contadores counter-reset - Cria ou restaura um ou mais contadores quotes - Define o tipo de aspas para citaes embutidas crop - Permite que um elemento substitudo para ser apenas uma rea retangular de um objeto, em vez de todo o objeto move-to - Causa a remoo de um elemento que ser reinserido posteriormente no documento page-policy - Determina qual ocorrncia page-based de um determinado elemento aplicada a um contador ou string

40

Grid

grid-columns - Especifica a largura de cada coluna em uma grade grid-rows - Especifica a altura de cada coluna em uma grade

Linebox alignment-adjust - Permite alinhamento mais preciso de elementos alignment-baseline - especifica como um elemento interno de nvel alinhado em relao ao seu pai baseline-shift - Permite reposicionamento da relao dominant-baseline para uma dominant-baseline dominant-baseline - Especifica uma escala de linha de base da tabela drop-initial-after-adjust - Define o ponto de alinhamento da queda inicial para o ponto de conexo primrio drop-initial-after-align - Sets which alignment line within the initial line box is used at the primary connection point with the initial letter box drop-initial-before-adjust - Sets the alignment point of the drop initial for the secondary connection point drop-initial-before-align - Sets which alignment line within the initial line box is used at the secondary connection point with the initial letter box drop-initial-size - Controls the partial sinking of the initial letter drop-initial-value - Activates a drop-initial effect inline-box-align - Sets which line of a multi-line inline block align with the previous and next inline elements within a line List Margin list-style-image - imagem como marcador da lista; list-style-position - onde o marcador da lista posicionado; list-style-type - tipo do marcador da lista; list-style - maneira abreviada para todas as propriedades; margin-top - define a margem superior; margin-right - define a margem direita; margin-bottom - define a margem inferior; margin-left - define a margem esquerda; margin - maneira abreviada para todas as margens line-stacking - A shorthand property for setting the line-stacking-strategy, line-stacking-ruby, and line-stacking-shift properties line-stacking-ruby - Sets the line stacking method for block elements containing ruby annotation elements line-stacking-shift - Sets the line stacking method for block elements containing elements with base-shift line-stacking-strategy - Sets the line stacking strategy for stacked line boxes within a containing block element text-height - Sets the block-progression dimension of the text content area of an inline box

Marquee marquee-direction - Define a direo do contedo em movimento marquee-play-count - Define quantas vezes o conteudo se move. marquee-speed -Define o quo rpido o contedo rola marquee-style - Define o estilo de movimento do contedo Multi-column column-count - Especifica o nmero de colunas que um elemento deve ser dividido column-fill - Especifica como preencher a coluna colu--rule - A propriedade abreviada para configurar todas as propriedades column-rule-* column-rule-color - Especifica a cor entre as colunas column-rule-style - Especifica o estilos entre as colunas column-rule-width - Especifica a largura entre as colunas column-span - especifica em quantas colunas o elemento deve ser dividido. column-width - Especifica a largura das colunas columns - A propriedade abreviada para definir todas as column-width e column-count Padding padding-top - define a espaamento superior; padding-right - define a espaamento direita; padding-bottom - define a espaamento inferior;

41

padding-left - define a espaamento esquerda; padding - maneira abreviada para todas os espaamentos

Paged Media fit - D uma sugesto de como dimensionar um elemento substitudo, se nem a sua largura, nem sua propriedade altura automtica fit-position - Determina o alinhamento do objeto dentro da caixa image-orientation Especifica uma rotao no sentido horario ou anti-horario page - Especifica um tipo especial de pgina, onde um elemento deve ser exibido size - Especifica o tamanho e a orientao da caixa que contm o contedo da pgina Positioning bottom - Especifica a posio do fundo de um elemento posicionado clear -Especifica que os lados de um elemento onde outros elementos flutuantes no so permitidos clip - Prende um elemento absolutamente posicionado cursor - Especifica o tipo de cursor para ser exibido display - Especifica como um determinado elemento HTML deve ser exibido float - Especifica se ou no uma caixa deve flutuar left - Especifica a posio esquerda de um elemento posicionado overflow - Especifica o que acontece se estourar o contedo da caixa de um elemento position - Especifica o tipo de mtodo de posicionamento utilizado para um elemento (static, relative, absolute ou fixed) right - Especifica a posio direita de um elemento posicionado top - Especifica a posio de topo de um elemento posicionado visibility - Especifica se um elemento visvel z-index - Define a ordem de empilhamento de um elemento posicionado

Impresso orphans - Define o nmero mnimo de linhas que devem ser deixados no fundo de uma pgina quando ocorre uma quebra de pgina dentro de um elemento page-break-after -Define o comportamento de quebra de pgina depois de um elemento page-break-before - Define o comportamento de quebra de pgina antes de um elemento page-break-inside - Define o comportamento de quebra de pgina dentro de um elemento widows - Define o nmero mnimo de linhas que deve ser deixado no topo de uma pgina quando uma quebra de pgina ocorre dentro de um elemento Table Texto

border-collapse Especifica se as bordas devem ou no ser recolhidas border-spacing - Especifica a distncia entre as bordas das clulas adjacentes caption-side - Especifica a colocao de uma legenda da tabela empty-cells - Especifica se deve ou no exibir as bordas e fundo para as clulas vazias em uma tabela table-layout - Define o algoritmo de layout a ser utilizado para a tabela color Define a cor do texto direction Especifica a direo do texto letter-spacing - Aumenta ou diminui o espao entre os caracteres de um texto line-height - Define a altura da linha text-align Define o alinhamento horizontal do texto text-decoration - Especifica a decorao adicionada ao texto text-indent - Especifica o recuo da primeira linha em um bloco de texto text-transform - Controla a capitalizao de texto (maiscula e minscula) vertical-align Define o alinhamento vertical do texto white-space - Especifica como espao em branco dentro de um elemento tratado word-spacing - Aumenta ou diminui o espao entre as palavras de um texto hanging-punctuation - Especifica se um caracter de pontuao pode ser colocado fora da caixa linha punctuation-trim - Especifica se um caractere de pontuao deve ser aparado text-align-last - descreve como a ltima linha de um bloco ou uma linha antes de uma quebra de linha forada est alinhado quando text-align "justify" text-justify -Especifica o mtodo de justificao usada quando text-align "justify"

42

text-outline -Especifica um contorno do texto text-overflow -Especifica o que deve acontecer quando o texto transborda o elemento que contm text-shadow - Adiciona sombra ao texto text-wrap - Especifica as regras de quebra de linha de texto word-break - Especifica as regras de quebra de linha parascripts no-CJK word-wrap Permite que palavras longas no sejam inquebraceis e passaro para a prxima linha

Transformao 2D/3D transform - Aplica-se uma transformao em 2D ou 3D a um elemento transform-origin - Permite alterar a posio em elementos transformados transform-style - Especifica como elementos aninhados so processadas no espao 3D perspective - Especifica a perspectiva sobre a forma como os elementos 3D so vistos perspective-origin - Especifica a posio inferior de elementos 3D backface-visibility - Define se o elemento deve ser visvel ou no quando no est voltado para a tela Transio transition A propriedade abreviada para definir as quatro propriedades de transio. transition-property Especifica o tipo da propriedade de transio CSS transition-duration - Especifica a durao em segundos ou milisegundos. transition-timing-function - Especifica a curva da velocidade do efeito de transio transition-delay - Especifica quando o efeito de transio vai comear Interface do Usurio appearance - Permite que voc faa um elemento parecer como um elemento da interface de usurio padro box-sizing - Permite definir alguns elementos para caber uma rea de uma determinada maneira icon - Fornece o autor a capacidade de estilo de um elemento com um equivalente cone nav-down - Especifica onde navegar ao usar a tecla de seta para baixo nav-index - Especifica a ordem de tabulao de um elemento nav-left - Especifica onde navegar ao usar a tecla de navegao de seta esquerda nav-right - Especifica onde navegar ao usar a tecla de navegao de seta direita nav-up - Especifica onde navegar ao usar a tecla de navegao de seta cima outline-offset Desloca um contorno resize - Especifica se um elemento redimensionvel pelo usurio

CSS Ruby http://www.w3.org/TR/css3-ruby/ Algo Mais: Guia de referncia CSS 2.1 (no tem CSS3) REFERNCIAS [W3] [K19] W3scholl; CSS tutorial, http://www.w3schools.com/css/default.asp K19; K02-Desenvolvimento Web com HTML, CSS e JavaScript

43