livro css um mero resumo

CSS3

Um mero resumo

Jonas Mayer

versão 1.0

1

Sumário1.O que é CSS ?.......................................................................................................................................................3

1.1.Novas propriedades do CSS3.......................................................................................................................32.Usando CSS..........................................................................................................................................................43.Seletores...............................................................................................................................................................5

3.1.Seletores Complexos....................................................................................................................................73.2. Pseudo-Classes............................................................................................................................................73.8.Seletores de atributos..................................................................................................................................10

4.Principais propriedades CSS..............................................................................................................................114.1.Propriedades de background ......................................................................................................................114.2.Propriedades de texto..................................................................................................................................124.3.Propriedades de fonte.................................................................................................................................134.4.Propriedades de Links.................................................................................................................................154.5.Propriedades de lista...................................................................................................................................154.6.Propriedades de tabela................................................................................................................................164.7.Propriedades de dimensão..........................................................................................................................17

5.Box Model..........................................................................................................................................................175.1.Bordas CSS.................................................................................................................................................185.2.Contorno.....................................................................................................................................................205.3.Margem externa..........................................................................................................................................205.4.Margem interna...........................................................................................................................................21

6.Dimensão............................................................................................................................................................227.Visualização e Visibilidade.................................................................................................................................258.Cores e Efeitos....................................................................................................................................................26

8.1.Gradiente.....................................................................................................................................................288.2.TRANSFORM 2D......................................................................................................................................298.3.Transições e animações..............................................................................................................................298.4.Bordas com imagens...................................................................................................................................318.5.Múltiplos backgrounds...............................................................................................................................32

9.Barra de Navegação............................................................................................................................................329.1.Barra de Navegação Vertical.......................................................................................................................339.2.Barra de Navegação Horizontal..................................................................................................................33

10.Imagens............................................................................................................................................................3410.1.Galeria de imagens...................................................................................................................................3410.2.Imagens Opacas e Transparentes..............................................................................................................3510.3.Imagens Sprites.........................................................................................................................................36

11.Tipos de mídia..................................................................................................................................................3712.Módulo TEMPLATE LAYOUT.......................................................................................................................3813.Guia de Referência...........................................................................................................................................41

2

CSS

1.O que é CSS ?CSS é a abreviação de Cascading Style Sheets (folha de estilo em cascata), é um conjunto informações sobre a formatação e

exibição dos componentes HTML e do layout de uma página WEB. Folhas de estilo foram introduzidas no HTML 4.0, para separar a estrutura do estilo das páginas.

O uso de estilos nas páginas WEB permite que diferentes atributos possam ser agrupados, nomeados e aplicados a vários elementos, deste modo, a partir de um ponto central, arquivo de estilos, é possível padronizar a aparência de todas as páginas de um site.

Existem quatro versões de CSS: CSS Level 1 (CSS1) lançada pelo W3C Consortium em 1996, a CSS-Positioning (CSS-P), que é a segunda versão já permitia o posicionamento dos elementos, CSS Level 2 (CSS2) foi lançada 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-seem sua terceira versão, porém nem todos os navegadores implementaram todos os novos recursos.

1.1.Novas propriedades do CSS3Segue aqui uma lista das principais propriedades que são novidade em CSS3.Bordas

• border-color - É possível definir a cor da borda• border-image - É possível definir uma imagem como borda• border-radius - É possível arredondar os cantos das bordas• box-shadow - É possível 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 começa a ser desenhado.• background-size - Tamanho do background.• fazer camadas com múltiplas imagens de fundo

Cor• cores HSL - Abreviação de hue, saturation e luminosity.• cores HSLA- Abreviação de Hue, saturation, luminosity e alfa• cores RGBA - Abreviação de red, Green, blue.• Opacidade - Define a transparência 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 espaço

reservado para ele. Bastante comum em sites de artigos/blogs em que exibem na home apenas uma parte do conteúdo.• Ruptura de palavras longas

Interface• box-sizing: Indica que o tamanho do Box levará em consideração possíveis bordas que você venha incluir.• resize - Especifica se um elemento é ou não redimensionável pelo usuário.• 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 navegação 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 básico• overflow-x, overflow-y: Utilizada para realizar recortes nas bordas do eixo x e y.

Outros• media queries: Definem algumas condições para o uso de css específicos.• criação de múltiplas colunas de texto• propriedades orientadas a discurso ou leitura automática de páginas web• Web Fonts

3

2.Usando CSSO CSS possui três 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 página, normalmente utilizado junto

com linguagens de script (JavaScript).Uma regra e formada por três partes:

• o seletor, que identifica a regra; • a propriedade que informa o que está sendo definido; • e os valores que são os modificadores das propriedades.

seletor { propriedade: valor;}

Podemos aplicar o CSS de três formas em um documento HTML:1. Definindo as propriedades CSS diretamente no elemento HTML através 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 incluído com as seguintes formas:• Diretamente na tag: o uso da CSS nas tags individuais é útil quando se deseja substituir os estilos definidos universalmente.

Estas declarações devem estar entre aspas (" "). CSS pode ser adicionado com o uso do atributo style. Essa prática não é recomendada, pois dessa forma não é possível reaproveitar o código CSS, além de dificultar a leitura do código

HTML. Exemplo:

<p style="font-size:20px;">Este parágrafo em tamanho de fonte igual a20px</p><p style="font-family:courier;">Este parágrafo em fonte Courier</p><p style="font-size:16px; font-family:cambria">Este parágrafo em fonteCambria e tamanho 20px</p>

• Na página WEB: este uso do CSS permite a inserção de informações que serão aplicadas a todo um documento. Por Exemplo:

<html><head><title>Minha primeira página 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 página CSS</h1><h2>Bem vindo à minha primeira página CSS</h2><p>Aqui você verá como funciona CSS</p></body></html>

Inserindo o estilo CSS na seção HEAD do documento o estilo de aplicara ao documento inteiro.

• Arquivo externo: este deve ser um arquivo texto composto somente de regras CSS e comentários. È ideal para quando o estilo é aplicado a várias páginas, com isso você pode alterar a aparência de um site inteiro modificando apenas o CSS.

No HTML vincula-se a folha de estilo com o documento com HTML através 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.csshr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}

4

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 contém código 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 contém código CSS.arquivo.css - indica o nome do arquivo.

3.Seletores Infográfico (http://www.linhadecodigo.com.br/artigos/img_artigos/Joel_Rodrigues/InfograficoSeletoresCSS/infograficoSeletores.jpg)

A sintaxe do CSS é simples:A propriedade é a característica que você deseja modificar no elemento. O valor é o valor referente a esta característica.O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar quais elementos de um grupo de

elementos serão formatados.

Seletor universalO 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 tipoO seletor de tipo seleciona todos os elementos cuja tag seja igual ao tipo indicado pelo seletor na declaração da regra CSS.

No exemplo a seguir selecionaremos todos os elementos que possuem a tag textarea.

textarea {border : 1px solid red ; }

5

http://www.linhadecodigo.com.br/artigos/img_artigos/Joel_Rodrigues/InfograficoSeletoresCSS/infograficoSeletores.jpg

http://www.linhadecodigo.com.br/artigos/img_artigos/Joel_Rodrigues/InfograficoSeletoresCSS/infograficoSeletores.jpg

Seletor de descendentesChamamos de seletor de descendentes a seleção de um ou mais elementos fazendo o uso de outros seletores separados por

espaços. Um espaço indica que os elementos selecionados pelo seletor à sua direita são 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 filhosChamamos de seletor de filhos a seleção de umou mais elementos fazendo o uso de outros seletores separados pelo caractere >.

Um caractere > indica que os elementos selecionados pelo seletor à sua direita são 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 irmão adjacenteChamamos de seletor de irmão adjacente a seleção 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 irmãos 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 irmãos e imediatamente precedidos por elementos com a tag label.

label + input { color : green ;}

Seletor de atributosO 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 declaração da regra CSS. Os atributos são informados dentro de colchetes [].No exemplo abaixo selecionaremos todos os elementos que possuam o atributo name igual acidade.

*[ name = cidade ] { font - weight : italic ; }

Se desejarmos também 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 idO seletor de id seleciona um único elemento cujo atributo id possui o valor indicado pelo seletor na declaração da regra CSS.

No exemplo abaixo selecionaremos o elemento cujo atributo id possui o valor cidade. Repare que o seletor de id começa como caractere #.

# cidade { font - weight : bold ;}

Seletor de classeO seletor de classe seleciona todos os elementos cujo atributo class possui o valor indicado pelo seletor na declaração da regra

CSS.No exemplo abaixo selecionaremos todos os elementos cujo atributo class possui o valor títulos. Repare que o seletor de classe começa com o caractere . (ponto).

. titulos { font - size : 40 px; }

6

3.1.Seletores Complexos

Estes seletores são para cobrir suas necessidades básicas de formatação de elementos. Eles fazem o simples. O que vai fazer você trabalhar menos, escrever menos código CSS e também menos código JavaScript são 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 então você formatá-lo. Com os seletores complexos você consegue formatar elementos que antes eram inalcançáveis.

Exemplo de funcionamentoImagine que você tenha um título (h1) seguido de um parágrafo (p). Você precisa selecionar todos os parágrafos que vem depois de um título h1. Com os seletores complexos você fará assim:

h1 + p {color:red;}

3.2. Pseudo-ClassesCSS pseudo-classes são usados para adicionar efeitos especiais a alguns seletores.

SintaxeA sintaxe das pseudo-claases:

selector:pseudo-class {property:value;}

Classes CSS também pode ser usadas como pseudo-classes:

selector.class:pseudo-class {property:value;}

Pseudo-classes ÂncoraOs 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 definição da CSS, para funcionar!Nota: a: active deve vir depois de a: hover na definição da CSS, para funcionar!Nota: Nomes Pseudo-classe não são case-sensitive.

Pseudo-classes e classes CSSPseudo-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 versões anteriores será necessário 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;}

7

</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 :langA 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

8

CSS pseudo-elementos são usados para adicionar efeitos especiais a alguns seletores.SintaxeA sintaxe de um pseudo-elemento:

selector:pseudo-element {property:value;}

Classes CSS também pode ser usadas com pseudo-elementos:

selector.class:pseudo-element {property:value;}

O pseudo-elemento :first-lineUm 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" pseudo-elemento (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-letterO 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 CSSPseudo-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 parágrafos com class ="article", em vermelho.

9

Múltiplos pseudo-elementosVários pseudo-elementos podem também ser combinados.No exemplo a seguir, a primeira letra de um parágrafo será vermelha, de um tamanho de fonte xx-grande. O restante da primeira

linha será azul, e em small-caps. O resto do parágrafo será o tamanho padrão 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 conteúdo antes que o conteúdo de um elemento.O exemplo a seguir insere uma imagem antes de cada elemento <h1>:

h1:before {content:url(smiley.gif);}

O pseudo-elemento :afterO pseudo-elemento ":after" pode ser usado para inserir algum conteúdo após o conteúdo de um elemento.

O exemplo a seguir insere uma imagem após cada elemento <h1>:

h1:after{content:url(smiley.gif);}

3.8.Seletores de atributosÉ possível por estilo elementos HTML que possuem atributos específicos, não só de classe e id.

Seletores de atributosO exemplo a seguir define estilo em todos os elementos com um atributo de título:

[title]{color:blue;}

Seletores de atributos e valorO exemplo a seguir define o estilo dos elementos com title="W3Schools":

[title=W3Schools]{border:5px solid green;}

Seletores de atributos e valor com múltiplos valoresO exemplo a seguir define o estilo de todos os elementos com um atributo de título que contém um valor especificado. Isso

funciona mesmo se o atributo tem valores separadas por espaço:

[title~=hello] { color:blue; }

O exemplo a seguir estila todos os elementos com um atributo lang que contém um valor especificado. Isso funciona mesmo se o atributo tem valores separados por hífen (-):

[lang|=en] { color:blue; }

Definindo estilos de formuláriosOs seletores de atributo são particularmente úteis para modelar formulários 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 não.

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 padrão, a propriedade background-image repete uma imagem horizontalmente e verticalmente.Algumas imagens deve ser repetida apenas horizontalmente ou verticalmente, ou eles vão parecerestranhas, como esta. Para que a

imagem seja repetida apenas horizontalmente (repeat-x), logicamente (repeat-y) para apenas verticalmente e no-repeat para não repetir.

body{

background-image:url('gradient2.png');background-repeat:repeat-x;

}

A posição 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 posição 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 visível do elemento.

body{background-image:url('paper.gif');background-repeat:repeat-y;}

• background - abreviação da propriedade, define todas as propriedades de background em uma única linha.Para encurtar o código, também é possível 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-color2. background-image3. background-repeat4. background-attachment5. background-position

Não importa se um dos valores de propriedades está em falta, enquanto aqueles que estão presentes estão 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 padrão do texto de uma página é definida no seletor body.• direction - define a direção do texto.

div{direction:rtl;}

• letter-spacing - define o espaçamento 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 decoraçãoou efeito de um texto.A propriedade text-decoration é usado principalmente para remover sublinhado de links para fins de concepção:

a {text-decoration:none;}

Ela também 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 maiúsculas e minúsculas em um texto.Ela pode ser usada para transformar tudo em letras maiúsculas ou minúsculas, ou colocar em maiúsculo 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 espaços do texto serão tratados.

p{white-space:nowrap;}

• word-spacing - define o espaçamento entre as palavras do texto.

p{ word-spacing:30px;}

4.3.Propriedades de fonte• font-family - define a família de fontes a ser utilizada.

Em CSS, existem dois tipos de nomes de família de fontes:1. família genérica - um grupo de famílias de fontes com uma aparência semelhante (como "Serif" ou "Monospace")2. família da fonte - uma família de fonte específica (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 não suporta a primeira fonte, ele tenta a próxima fonte.

Comece com a fonte que você quer, e termine com uma família genérica, para deixar o navegador escolher uma fonte semelhante na família genérica, se não houver a fonte desejada.

Nota: Se o nome de uma família 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◦ Não permite que o usuário altere o tamanho do texto em todos os navegadores (ruim por razões de acessibilidade)◦ Tamanho absoluto é útil quando o tamanho físico da saída é conhecida

Tamanho relativo:◦ Define o tamanho relativo aos elementos circundantes◦ Permite que o usuário altere o tamanho do texto em navegadores

Se você não especificar um tamanho de fonte, o tamanho padrão para texto normal, como parágrafos, é 16px (16px = 1em).

Tamanho em pixelsDefinir 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 EMPara evitar o problema de redimensionamento com versões 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 padrão em navegadores é 16px. Então, o tamanho padrão de

1em é 16px. O tamanho pode ser calculado a partir dos pixels para em usando esta fórmula: 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 combinação de percentual e EmA solução que funciona em todos os navegadores, é definir um padrão 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 itálico.

Esta propriedade tem três valores:◦ normal - O texto é exibido normalmente◦ italic - O texto está em itálico◦ oblique - O texto é "inclinado" (oblíqua é muito semelhante a itálico, mas menos compatível)

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 não.

p.small{font-variant:small-caps;}

• font-weight - define a espessura dos traços 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 LinksLink podem ser formatados com qualquer propriedade CSS. Mas existem propriedades especiais para links. Links podem ter

estilos diferentes de pendendo de seu estado.São 4 estados:

1. a: link - normal, não visitado2. a: visited - visitado3. a: hover - quando o usuário 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 vários 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 não 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.

Solução CrossbrowserO 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: abreviação 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 estão 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 (médio):

td{height:50px;vertical-align:bottom;}

• padding - controla o espaço entre a borda e o conteúdo 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 dimensão• width - define a largura de um elemento.• min-width - define a largura mínima de um elemento.• max-width - define a largura máxima de um elemento.

16

• height - define a altura de um elemento.• min-height - define a altura mínima de um elemento.• max-height - define a altura máxima de um elemento.

5.Box ModelTodos 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 conteúdo real.

1. Margem externa (margin) - Limpa uma área em torno da fronteira. A margem não tem uma cor de fundo, ela é completamente transparente

2. Borda (border) - A borda que circunda a margem interna e o conteúdo. A borda é afetado pela cor de fundo da caixa3. Margem interna (padding) - Limpa uma área em torno do conteúdo. A margem interna é afetada pela cor de fundo da caixa4. Conteúdo - O conteúdo da caixa, onde o texto e as imagens aparecem

Um erro comum quando estamos começando a aprender CSS é que nos esquecer de considerar as dimensões das margens internas e externas no cálculo das dimensões 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 elementoImportante: Quando você definir a largura e de altura de um elemento com CSS, você apenas define a largura e altura da área do

conteúdo. Para calcular o tamanho total de um elemento, você também 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 versões anteriores do IE, a largura da margem interna e da borda são incluídas na propriedade largura.Para corrigir esse problema, adicione um <! DOCTYPE html> para a página de HTML.

5.1.Bordas CSSAs propriedades borda CSS permitem que você especifique o estilo ea cor da borda de um elemento.

Estilos de BordasA propriedade border-style especifica o tipo de borda que será exibida.

Valores border-style:none : define como sem bordadotted: define uma borda pontilhadadashed: define uma borda tracejadasolid: define uma borda solidadouble: define uma borda dupla. A largura das duas bordas são 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 BordaA propriedade border-width é usada para definir a largura da borda.A largura é definida em pixels, ou usando um dos três valores pré-definidos: thin (fino), medium (médio) ou thick (grosso).

Nota: O "border-width" propriedade não 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 bordaA 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 não 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 individuaisEm CSS é possível 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 também 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 é sólida◦ borda inferior é dupla◦ borda esquerda é tracejada

• border-style:dotted solid double;◦ borda superior é pontilhada◦ bordas direita e esquerda são sólidas◦ borda inferior é dupla

• border-style:dotted solid;◦ bordas superior e inferior são pontilhadas◦ bordas direita e esquerda são sólidas

• border-style: dotted;◦ todas as quatro bordas são pontilhadas

A propriedade border-style é usada no exemplo acima. No entanto, ela também trabalha com largura da margem e cor da borda.

Propriedades abreviadasComo você pode ver nos exemplos acima, existem muitas propriedades a considerar quando se trata de bordas

Para encurtar o código, também é possível 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.ContornoUm 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 não é uma parte das dimensões de um elemento; a largura e altura total de elemento não é afetado pela largura do

contorno.

Propriedades:outline - propriedade abreviadaoutline-color - define cor do contornooutline-style - define estilo do contornooutline-width - define largura do contorno

19

5.3.Margem externaA margem externa limpa uma área em torno de um elemento (fora da borda). A margem não 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 também pode ser usada, para alterar todas as margens externas de uma só vez.Valores possíveisauto - O navegador calcula uma margemlength - define a margem em px, pt, cm, etc. O valor padrão é 0px.% - Especifica uma margem em percentagem da largura do elemento de contençãoinherit - Especifica que a margem deve ser herdado do elemento pai

Lados individuaisEm CSS, é possível especificar as margens externas diferentes para diferentes lados:

margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;

Propriedade abreviadaA propriedade abreviação 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 são 50px◦ margem inferior é de 75px

• margin:25px 50px;◦ margens superior e inferior são 25px◦ margens direita e esquerda são 50px

• margin:25px;◦ todas as quatro margens são 25px

5.4.Margem internaA margem interna limpa uma área em torno do conteúdo (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 também pode ser usada, para alterar todas as margens internas de uma só vez.

Possíveis valoreslength - Define uma margem interna fixa (em pixels, pt, em, etc)% - Define uma margem interna em % do elemento que contém

Lados individuaisEm CSS, é possível especificar margens internas diferente para lados diferentes:

padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;

Propriedade abreviadaAssim como as margens externas margens internas tem uma abreviação de propriedade.A abreviação para todas as propriedades de

preenchimento é "padding":

20

padding:25px 50px;

Assim como margens externas podem ter de um a quatro valores.

6.DimensãoAs propriedades de dimensão 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 mínima de um elemento. Aceita none, length, % e inherit.• max-width - define a largura máxima 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 mínima de um elemento. Aceita none, length, % e inherit.• max-height - define a altura máxima de um elemento. Aceita none, length, % e inherit.

Sendo:auto - definido pelo navegadornone - não definidolength - medida em px, pt, com etc.% - porcentagem do elementoinherit -herda do elemento pai

Posicionamento de elementosAs propriedades de posicionamento CSS permitem que você posicione um elemento. Também pode colocar um elemento atrás de

outro, e especificar o que deve acontecer quando o conteúdo de um elemento é muito grande.

Há quatro diferentes métodos 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 distância do topo do elemento em relação a outro elemento ou em relação a janela.• left - define a distância do lado esquerdo do elemento em relação a outro elemento ou em relação a janela.• bottom - define a distância da base do elemento em relação a outro elemento ou em relação a janela.• right - define a distância do lado direito do elemento em relação a outro elemento ou em relação a janela.

Os elementos podem ser posicionados usando a parte superior, inferior, esquerda e propriedades adequadas. No entanto, essas propriedades não funcionará a menos que a propriedade de posição é 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. Também devemos nos lembrar que se definirmos uma distância para o atributo left, não devemos utilizar o atributo right. A mesma ideia vale para os atributos top e bottom.

Eles também funcionar de forma diferente, dependendo do método de posicionamento.

Posicionamento estáticoEste tipo de posicionamento, em geral, não precisa ser definido, pois é o tipo de posicionamento padrão de todos os elementos. O

posicionamento estático é definido através do atributo position com o valor static e não é afetado pelos atributos top, bottom, left e right.

Posicionamento fixoUm elemento com posicionamento fixo é posicionado em relação à janela do navegador. É definido através do atributo position

com o valor fixed e sua posição é definida pelos atributos top, bottom, left e/ou right.Todos os elementos posicionados fixamente não mudam de posição mesmo quando ocorrer uma rolagem vertical ou horizontal.

p.pos_fixed{position:fixed;top:30px;right:5px;}

Posicionamento relativoUm elemento com posicionamento relativo é posicionado em relação à sua posição original. É definido através do atributo position

com o valor relative e sua posição é 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 conteúdo de elementos relativamente posicionado pode ser movido e sobrepor outros elementos, mas o espaço reservado para o elemento é ainda preservado no fluxo normal.

h2.pos_top{position:relative;top:-50px;}

Elementos relativamente posicionados são muitas vezes utilizados como blocos de contêineres para elementos posicionados absolutamente.

Posicionamento absolutoUm elemento com posicionamento absoluto é posicionado em relação a um elemento ancestral que tem uma posição estática

diferente. Se nenhum elemento for encontrado, o bloco de conteúdo é <html>:É definido através do atributo position com o valor absolute e sua posição é definida pelos atributos top, bottom, left e/ou right.

h2{position:absolute;left:100px;top:150px;}

Elementos posicionados absolutamente são removidos do fluxo normal. O documento e os outros elementos se comportam como oelemento de posicionamento absoluto não existem.

Elementos posicionados absolutamente podem se sobrepor outros elementos.

Elementos sobrepostosQuando os elementos são 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

trás, 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 sobrepõem, sem um z-index especificado, o último elemento posicionado no código HTMLserá mostrado no topo.

Unidades de medidasEm CSS possuímos diversas unidades de medida como podemos verificar na listagem abaixo:

• in - polegada.• cm - centímetro.• mm- milímetro.• 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"minúscula 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 são px e em.

Alinhamento HorizontalEm CSS, várias propriedades são usados para alinhar os elementos horizontalmente.

Alinhando elementos de blocosUm elemento é um elemento de bloco, que ocupa toda a largura disponível, e tem uma quebra de linha antes e depois dele.

Exemplos de elementos de bloco:

• <h1>• <p>• <div>

Alinhar no centro usando a propriedade marginElementos de bloco podem ser alinhados definindo as margens esquerda e direita como "auto".

Nota: O uso margin: auto não 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 disponível de forma igual. O resultado é um elemento centralizado:

.center{margin-left:auto;margin-right:auto;width:70%;background-color:#b0e0e6;}

Dica: O alinhamento não tem efeito se a largura é de 100%.

Alinhando a direita e esquerda usando a propriedade positionUm método de alinhar elementos é utilizar o posicionamento absoluto:

.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}

Nota: Elementos com alinhamento absoluto são removidos do fluxo normal e podem sobrepor elementos

Problemas de compatibilidade crossbrowserAo alinhar elementos como este, é sempre uma boa ideia de predefinir margin e padding para o elemento <body>. Isso é para

evitar diferenças visuais em diferentes navegadores.

Há um problema com o IE8 e versões anteriores, quando se usa a propriedade position. Se um elemento de recipiente (no nosso caso <div class="container">) tem uma largura especificada, e a declaração !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 floatUm método de alinhamento de elementos utilizando a propriedade float:

.right{float:right;width:300px;background-color:#b0e0e6;}

Problemas de compatibilidade crossbrowserAo alinhar elementos como este, é sempre uma boa ideia de predefinir margin e padding para o elemento <body>. Isso é para

evitar diferenças visuais em diferentes navegadores.

Há um problema com o IE8 e versões anteriores, quando se usa a propriedade float. Para evitar problemas a declaração !DOCTYPE deve estar presente.

7.Visualização e Visibilidade

A propriedade display especifica se / como um elemento é exibido, e a propriedade Visibility especifica se um elemento deve ser visível ou oculto.

Ocultando um elemento - display:none ou visibility:hiddenEsconder um elemento pode ser feito definindo a propriedade display para "none" ou a propriedade de visibilidade para "hiden".

No entanto, note que estes dois métodos produzem resultados diferentes:

visibility: hidden oculta um elemento, mas ele ainda ocupam o mesmo espaço de antes. O elemento será escondido, mas ainda afeta o layout.

h1.hidden {visibility:hidden;}

display: none esconde um elemento, e este não vai assumir qualquer espaço. O elemento será escondido, e a página será exibida comose o elemento não está lá:

h1.hidden {display:none;}

Blocos e elementos embutidosUm elemento bloco é um elemento, que ocupa toda a largura disponível, 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 necessária, e não forçar quebras de linhas.

Exemplos de elementos em linha• <span>• <a>

Mudando a forma como um elemento é exibidoMudando um elemento embutido para um elemento de bloco, ou vice-versa, pode ser útil para fazendo a página parecer de uma

maneira específica, e ainda seguir os padrões 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 FlutuantesCom 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 também é útil quando se trabalha com layouts.

Como Flutuar ElementosElementos são flutuados na horizontal, o que significa que um elemento só pode ser lançado à esquerda ou direita, não 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 contém.

img{float:right;}

Elementos flutuantes um ao lado do outroSe colocar vários elementos flutuantes após o outro, eles irão flutuar ao lado do outro, se houver espaço.

Aqui fizemos uma galeria de imagens usando a propriedade float:

.thumbnail {float:left;width:110px;height:90px;margin:5px;}

Desligar Float - Usando clearElementos após 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 não são permitidos.Adicionando uma linha de texto para a galeria de imagens, usando a propriedade clear:

.text_line{clear:both;}

8.Cores e EfeitosEm uma propriedade CSS na qual que devemos atribuir uma cor, podemos utilizar três 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 notação RGB devemos utilizar a função 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 possuímos mais três formas: RGBA, HSL e HSLA.

RGBA e a diferença 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 também fica opaco e não 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, além dos 3 canais RGB (Red, Green e Blue) há um quarto canal, A (Alpha) que controla a opacidade da cor. Sendo A um número 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 através da matiz, saturação e luminosidade (hue, saturation e lightness).Devemos utilizar a função 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 funções rgba(R, G, B, A) e hsla(H, S, L, A), respectivamente.Ambas as funções possuem um último parâmetro que significa a opacidade da cor (alpha).Esse valor varia de 0 a 1.

currentColorO valor currentColor é muito simples de se entender e pode ser muito útil para diminuirmos o retrabalho em alguns momentos da

produção. Imagine que o currentColor é uma variável cujo seu valor é definido pelo valor da propriedade color do seletor. Veja o código 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 redundância de código, que nesse caso é irrelevante, mas quando falamos de dezenas de arquivos de CSS modulados, com

centenas de linhas cada, essa redundância pode incomodar a produtividade. A função do currentColor é simples: ele copia para outras propriedades do mesmo seletor o valor da propriedade color. Veja o código 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 faça utilização de cor como background, border, etc. Obviamente não funciona para a propriedade color. O currentColor também não funciona em seletores separados, ou seja, você não consegue atrelar o valor da propriedade color ao currentColor de outro seletor.

8.1.GradienteUma das features mais interessantes é a criação de gradientes apenas utilizando CSS. O IE(8,9) não suporta esse recurso para isso

é possível usar uma imagem:Veja abaixo um exemplo de código, juntamente com o fallback de imagem:

div {width:200px;height:200px;background-color: #FFF;/* imagem caso o browser não 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 gradienteO padrão é que o gradiente ocupe 100% do elemento como vimos no exemplo anterior, mas muitas vezes queremos fazer apenas

um detalhe.Nesse caso nós temos que definir um STOP, para que o browser saiba onde uma cor deve terminar para começar 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 começa o gradiente da cor exatamente ali. O código 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%);

Também é possível adicionar um valor ao verde.

COLUMNScolumn-countA 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-widthCom a propriedade column-width definimos a largura destas colunas.

/* Define qual a largura mínima 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-gapA propriedade column-gap cria um espaço entre as colunas, um gap.

/* Define o espaço entre as colunas. */-moz-column-gap: 50px;-webkit-column-gap: 50px;

8.2.TRANSFORM 2DA propriedade transform manipula a forma com que o elemento aparecerá na tela. Você poderá manipular sua perspectiva, escala e

ângulos. Uma transformação é especificada utilizando a propriedade transform. Os browsers que suportam essa propriedade, a suportam com o prefixo especificado.Os valores possíveis até agora estão especificados abaixo:scaleO valor scale modificará a dimensão do elemento. Ele aumentará proporcionalmente o tamanho do elemento levando em consideraçãoo tamanho original do elemento.

skewSkew modificará os ângulos dos elementos. Você pode modificar os ângulos individualmente dos eixos X e Y como no código abaixo:

-webkit-transform: skewY(30deg);-webkit-transform: skewX(30deg);

translationO translation moverá o elemento no eixo X e Y. O interessante é que você não precisa se preocupar com floats, positions, margins e etc. Se você aplica o translation, ele moverá o objeto e pronto.

27

rotateO rotate rotaciona o elemento levando em consideração seu ângulo, especialmente quando o ângulo é personalizado com o transform-origin.

Várias transformações em um único elementoPara utilizarmos vários valores ao mesmo tempo em um mesmo elemento, basta definir vários valores separando-os com espaços 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-originA propriedade transform-origin define qual o ponto do elemento a transformação terá origem. A sintaxe é idêntica ao background-position. Observe o código 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 padrão as transições sempre acontecem tendo como ponto de âncora o centro do objeto. Há algumas situações que pode ser que você queira modificar essa âncora, fazendo com que por exemplo, a rotação aconteça em algum dos cantos do elemento. O códigode exemplo acima fará com que a transformação aconteça a partir dos 10px do topo no canto esquerdo.

8.3.Transições e animaçõesA propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a função que o CSS tem perante o HTML

acrescentando maneiras de produzirmos animações e transições. Não estou dizendo que você fará animações complicadas, com diversos detalhes técnicos e etc. Para esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza farão um trabalho melhor com menos esforço. Mas é fato que as animações via CSS nos ajudará a levar a experiência do usuário para outro patamar.

O básico: propriedade transitionO 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 ativação da função. Esta é uma técnica simples e que serve para manipularmos transições básicas como cor, tamanho, posição etc.

No código 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 código abaixo faz exatamente isso:

a {color: white;background: gray;}a:hover {color: black;background: red;}

O problema é que a transição é muito brusca. O browser apenas modifica as características entre os dois blocos e pronto. Não há nenhuma transição suave entre os dois estados.

Podemos fazer a mudança de um estado para outro utilizando a propriedade transition. Suponha que ao passar o mouse, as mudanças 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 características do link com uma pequena transição de meio segundo. O código 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 keyframeA propriedade trasition trabalha de forma muito simples e inflexível. Você praticamente diz para o browser qual o valor inicial e o

valor final para que ele aplique a transição automaticamente, controlamos praticamente apenas o tempo de execução. Para termos mais controle sobre a animação temos a propriedade animation que trabalha juntamente com a rule keyframe.

Basicamente você consegue controlar as características do objeto e suas diversas transformações definindo fases da animação. Observe o código abaixo e veja seu funcionamento:

@-webkit-keyframes rodar {from {-webkit-transform:rotate(0deg);}to {-webkit-transform:rotate(360deg);}}

Propriedade Definição

animation-name Especificamos o nome da função de animação

animation-duration Define a duração da animação. O valor é declarado em segundos

animation-timing-function Descreve qual será a progressão da animação a cada ciclo de duração. Existem uma série de valores possíveis e que pode ser que o seu navegador ainda não suporte, mas são 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 padrão é ease.

animation-interation-count Define o número de vezes que o ciclo deve acontecer. O padrão é um, ou seja, a animação acontece uma vez e pára. Pode ser também infinito definindo o valor infinite no valor.

animation-direction Define se a animação irá acontecer ou não no sentido inverso em ciclos alternados. Ou seja, se a animação está acontecendo no sentido horário, ao acabar a animação, o browser faz a mesma animação no elemento, mas no sentido anti-horário. Os valores são alternate ou normal.

animation-play-state Define se a animação está acontecendo ou se está pausada. Você poderá por exemplo, via script, pausar a animação se ela estiver acontecendo. Os valores são running ou paused.

animation-delay Define quando a animação irá começar. Ou seja, você define um tempo para que a animação inicie. O valor 0, significa que a animação começará imediatamente.

Definindo ciclosPodemos flexibilizar melhor nosso keyframe definindo as fases da animação. Por exemplo, podemos dizer para o elemento ter

uma cor de background diferente quando a animação 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 imagensA sintaxe do border-image se divide em três 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 imagemPara posicionar a imagem devidamente em seu objeto o browser divide a imagem em 9 seções: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. Sevocê fizer o teste, a imagem aparecerá no elemento como se estivesse desproporcional. Isso é normal porque a imagem deve seguir as proporções do elemento e não as suas próprias.

Comportamento da imagemO comportamento da imagem é a parte mais importante porque define como o centro da imagem (no caso do nosso exemplo a

seção de número 5), irá ser tratada. Há vários 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 não 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.Múltiplos backgroundsA sintaxe para múltiplos backgrounds é praticamente idêntica 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 vários, com suas respectivas definições de posição, repeat e attachment (fixed).

9.Barra de NavegaçãoTer fácil navegação é importante para qualquer site. Com CSS você pode transformar chatos menus HTML em barras de

navegação de boa aparência.

Barra de Navegação = Lista de links

30

Uma barra de navegação precisa de HTML padrão como base.Em nossos exemplos, vamos construir a barra de navegação a partir de uma lista padrão HTML.

Uma barra de navegação é 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 navegação não precisa de marcadores de lista2. Definir margens e preenchimento como 0 para remover as configurações padrão do navegador

O código, no exemplo acima é o código padrão usado em ambas as barras de navegação verticais e horizontais.

9.1.Barra de Navegação VerticalPara criar uma barra de navegação vertical é apenas necessário além 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 clicável (não apenas o texto), e que nos permite especificar a largurawidth: 60px - Elementos de bloco ocupam toda a largura disponível por padrão. Queremos especificar uma largura de 60 px

Nota: Sempre especifique a largura para os elementos <a> em uma barra de navegação vertical. Se você omitir a largura, o IE6 pode produzir resultados inesperados.

9.2.Barra de Navegação HorizontalHá duas maneiras de criar uma barra de navegação horizontal. Usando itens da lista embutidos ou flutuante.Ambos os métodos funcionam bem, mas se você quiser que os links sejam do mesmo tamanho, você tem que usar o método

flutuante.

Lista de Itens EmbutidosUma forma de construir uma barra de navegação horizontal é especificar os elementos <li> como embutidos, além do código de

barra de navegação "padrão" citado acima:

li{display:inline;}

Exemplo explicado:display: inline; - Por padrão, elementos <li> são elementos de bloco. Aqui, é removido as quebras de linha antes e depois de cada itemda lista, para exibi-los em uma linha

Lista de Itens FlutuantesNo exemplo acima, os links têm 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 são exibidos como elementos de bloco tornando toda área do link clicável (não apenas o texto), e que nos permite especificar a larguralargura: 60px - Uma vez que os elementos do bloco ocupem toda a largura disponível, não podem flutuar ao lado do outro. Nós especificamos a largura dos links para 60px.

10.Imagens

10.1.Galeria de imagensCSS 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 TransparentesCriar imagens transparentes com CSS é fácil.A propriedade CSS3 para transparência é 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 código no exemplo acima. Além disso, nós adicionamos o que deve acontecer quando um usuário passar o mouse sobre uma das imagens. Neste caso, queremos que a imagem não seja transparente quando o usuário 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. Então vamos criar uma pequena div (class = "transbox") dentro do primeiro elemento div. A div "transbox" tem uma largura fixa, umacor de fundo, e uma borda - e é transparente. Dentro da div transparente, é adicionado algum texto dentro de um elemento p.

10.3.Imagens SpritesUm imagem sprite é uma coleção de imagens colocadas em uma única imagem.Uma página web com muitas imagens pode levar um longo tempo para carregar e gera pedidos de vários servidores.Usando imagem sprites reduzirá o número de solicitações 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 não 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 posição (à esquerda 0px, 0px topo)

34

Esta é a maneira mais fácil de usar sprites de imagem, agora queremos expandi-lo usando links e efeitos hover.

Criando uma lista de navegação com imagens spriteQueremos usar a imagem do sprite ("img_navsprites.gif") para criar uma lista de navegação.

Nós vamos usar uma lista de HTML, porque pode ser um link e também 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;} -posição é 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 são definido como 0, estilo de

lista é removido, e todos os itens da lista são posicionados como absolutos.• #navlist li, #navlist a{height:44px;display:block;} -a altura de todas as imagens são 44px

Agora começam a posição e estilo de cada parte específica:

• #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 posição (à esquerda 0px, 0px topo)• #prev{left:63px;width:43px;} - Posicionado 63px para a direita (#home width 46px + algum espaço 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 + espaço

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 spritesAgora queremos adicionar um efeito de foco para a nossa lista de navegação.

A nova imagem ("img_navsprites_hover.gif") contém três imagens de navegação e três imagens para uso de efeitos em foco:Porque esta é uma única imagem, e não seis arquivos separados, não haverá atraso de carregamento quando um usuário passa o

mouse sobre a imagem.

Nós só adicionamos três linhas de código 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 contém um link, podemos usar a pseudo-classe :hover • #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} -Para todas as três imagens de foco

especifique a mesma posição de fundo, só 45px mais baixo.

11.Tipos de mídiaCom os tipos de mídia uma página pode ter um layout para tela, uma para impressão, uma para dispositivos portáteis, etcAlgumas propriedades CSS são projetados somente para uma determinada mídia. Por exemplo, o "voice-family" propriedade é

projetado para os agentes do usuário sonoros. Algumas outras propriedades podem ser usados para diferentes tipos de mídias de comunicação. Por exemplo, o "font-size" propriedade pode ser usada para a tela e mídia 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 são mais fáceis

35

de ler na tela, enquanto fontes com serif são mais fáceis de ler no papel.

A regra @mediaA regra @ media permite que regras de estilo diferentes para diferentes meios de comunicação 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 midiaNota: Os nomes de tipo de mídia não são case-sensitive.all - Usado para todos os dispositivos do tipo de mídiaaural- Usado para a fala e sintetizadores de vozbraille - Usado para dispositivos braille com feedback tátilembossed - Usado para impressoras em braille com paginadohandheld - Usado para dispositivos pequenos ou de mãoprint - Usado para impressorasprojection - Usado para apresentações projetadas, como slidesscreen - Usado para telas de computadortty - Usado para mídia usando uma grade de caracteres de densidade fixa, como teletipos e terminaistv - Usado para televisão

12.Módulo TEMPLATE LAYOUTO float cuida de toda a diagramação do site, desde os elementos que definirão as áreas mestres do site até os pequenos detalhes de

imagens e ícones.A propriedade float é muito simples de se entender. O problema não é o funcionamento, mas os efeitos que a propriedade float

causa nos elementos próximos. 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 são problemas corriqueiros que já tem soluções inteligentes e que não apresentam chateações mais graves.

Infelizmente o float não é o ideal para a diagramação e organização 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 módulo. Na verdade ele não é o único, e nem pode ser para que tenhamos diversas formas de trabalhar. O módulo em questão é chamado de Template Layout. Esse módulo consiste em uma forma decriarmos e organizarmos os elementos e informações do layout de forma menos espartana e mais flexível.

Podemos dividir a construção do layout em duas grandes partes: 1) Definição dos elementos mestres e grid a ser seguido. 2) Formatação de font, cores, background, bordas etc.

As propriedades nesta especificação trabalham associando uma política de layout de um elemento. Essa política é chamada de template-based positioning (não tem nada a ver com a propriedade position, pelo contrário é uma alternativa) que dá ao elemento umagrid invisível para alinhar seus elementos descendentes.

Porque o layout deve se adaptar em diferentes janelas e tamanhos de papéis, as colunas e linhas do grid deve ser fixas ou flexíveis dependendo do tamanho.

36

O W3C mostra alguns casos comuns:• Páginas complexas com múltiplas barras de navegação em áreas com posições fixas como publicidade, submenus e etc.• Formulários complexos, onde o alinhamento de labels e campos podem ser facilmente definidos com as propriedades deste

módulo com a ajuda das propriedades de margin, padding e tables.• GUIs, onde botões, toolbars, labels, ícones etc, tem alinhamentos complexos e precisam estar sempre alinhados caso o

tamanho ou a resolução da tela mudam.• Medias que são paginadas, como medias de impressão onde cada página são divididos em áreas fixas para conteúdos de

gêneros diferentes.

Template-based positioning são 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. Não que seja errado, mas definitivamentenão é a melhor forma. Costumo dizer em meus cursos e palestras que position é para detalhes. Nada muito grande, mas para pequenosdetalhes. Usamos position para posicionarmos elementos que não tem relação direta com sua posição no código HTML. Ou seja, não importa onde o elemento esteja, o position:absolute; irá posicionar o elemento nas coordenadas que você quiser.

Sintaxe e funcionamentoO módulo 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 módulo adiciona mais alguns valores e funcionalidades, são 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 código 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 posição destes elementos. O código 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 displayA propriedade display define a organização 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 conteúdo será colocando em colunas e linhas. A única diferença é que o

número de linhas e colunas não dependem do conteúdo é fixaO funcionamento da propriedade displayA propriedade display define a organização 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 conteúdo será colocando em colunas e linhas. A única diferença é que o

número de linhas e colunas não dependem do conteúdo é fixa pelo valor da propriedade. E a outra principal diferença é que a ordem dos descendentes no código não importa.

Existem alguns valores para que você trabalhe: letra, @ (arroba) e “.” (pronto).Cada letra diferente é um slot de conteúdo diferente. O @ define um sinal para um slot padrão. E o “.” (ponto) define um espaço

em branco.Não é possível fazer um slot que não seja retangular ou vários slots com a mesma letra. Um template sem letra nenhuma também

não é possível. Um template com mais de um @ também é proibido. Se houverem esses erros a declaração é ignorada pelo browser.Pra definir a altura da linha (row-height) podemos utilizar o valor padrão “auto”, que define altura que a altura da linha é feito de

acordo com a quantidade de conteúdo no slot. Você pode definir um valor fixo para a altura. Não é possível definir um valor negativo.Quando definimos um * (asterísco) para a altura, isso quer dizer que todas as alturas de linha serão iguais.

A largura da coluna (col-width) é definida com valores fixos, como o row-height. Podemos definir também 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-contentque fazem com que a largura seja determinada de acordo com o conteúdo. Outro valor é o minmax(p,q) que funciona assim: a largura

37

das colunas são fixadas para ser maiores ou iguais a p e menores ou iguais a q. Pode haver um espaço branco (white space) em volta de p e q. Se q > p, então 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 slotsPara 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” / 150px100px 400px 100px;

Formatando de uma maneira que você entenda, fica assim:

display: “a a a” /150px“b c d”“e e e” /150px100px 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 também. A linha do meio, como não tem altura definida terá a altura de acordo com a quantidade de conteúdo.O espaço entre as colunas são definidos com “.” (pontos). Veja o exemplo abaixo:

display: “a a a” /150px“. . .” /50px“b c d”“. . .” /50px“e e e” /150px100px 400px 100px;

No exemplo acima fiz duas colunas no código compostos por pontos em vez de fazer com letras. Isso quer dizer que entre as colunas do grid haverá um espaço em branco de 50px de altura. Veja a imagem abaixo para entender melhor o código:

O funcionamento da propriedade positionO valor da propriedade position especifica qual linha e coluna o elemento será colocado no template. Você escreve apenas uma

letra por elemento. Vários elementos podem ser colocados em um mesmo slot. Logo estes elementos terão o mesmo valor de position.

Lembre-se que não importa a posição dos elementos no código. E essa é a mágica. Podemos organizar o código HTML de acordo com nossas necessidades e levando em consideração SEO, Acessibilidade e processo de manutenção. O HTML fica totalmente intactoseparado de qualquer formatação. 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 formatação será aplicada diretamente no slot e não no elemento que você colocou lá. Fica mais simples de se formatar porque você não 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 estão sendo estudados pelo W3C se elas entrarão ou não.

13.Guia de Referência

Animation• @keyframes - Especifica a animação

38

• animation - A propriedade abreviada para todas as propriedades de animação abaixo, exceto a propriedade animation-play-state property

• animation-name - Especifica um nome para a animação @keyframes• animation-duration - Especifica quantos segundos ou milissegundos uma animação leva para completar um ciclo• animation-timing-function - Especifica a curva velocidade da animação • animation-delay - Especifica quando a animação vai começar• animation-iteration-count - Especifica o número de vezes que uma animação deve ser reproduzida• animation-direction - Especifica se a animação deve reproduzir no sentido inverso em ciclos alternados• animation-play-state - Especifica se a animação está em execução ou em pausa

Background • background - Propriedade abreviada• background-attachment - Define se uma imagem de fundo é fixa ou rola com o resto da página• background-color - Define a cor de fundo de um elemento• background-image - Define a imagem de fundo de um elemento• background-position - Define a posição 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• border - Propridade abreviada• border-bottom - Define todas as propriedades borda inferior em uma declaração• 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 declaração• 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 declaração• 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 declaração• 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 declaração• 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 além 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

Box

39

• overflow-x - Especifica se deve ou não cortar as margens esquerda / direita do conteúdo, se ele passar da área do elemento• overflow-y - Especifica se deve ou não cortar as margens superior/inferior do conteúdo, se ele passar da área do elemento• overflow-style -Especifica o método preferencial para a rolagem elementos que transbordam

Color• color-profile - permite a especificação de um perfil de fonte de cor diferente do padrão• opacity - Define o nível de opacidade de um elemento• rendering-intent - permite a especificação de um método de renderização de perfil de cor diferente do padrão

Content Media• bookmark-label - Especifica o rótulo do favorito• bookmark-level -Especifica o nível do favorito• bookmark-target - Especifica o destino do link do favorito• float-offset - Empurra elementos flutuantes na direção oposta de onde eles foram flutuados com o flutuador• hyphenate-after - Especifica o número mínimo de caracteres em uma palavra com hífen após o caráter de hifenização• hyphenate-before - Especifica o número mínimo de caracteres em uma palavra hifenizada antes do caractere hifenização• hyphenate-character -Especifica uma string que é mostrada quando um ocorre uma quebra de linha com hífen • hyphenate-lines - Indica o número máximo de linhas sucessivas hifenizadas em um elemento• hyphenate-resource - Especifica uma lista separada por vírgula de recursos externos que podem ajudar o navegador a

determinar os pontos de hifenização• hyphens - Define como dividir as palavras para melhorar o layout dos parágrafos• image-resolution - Especifica a resolução correta de imagens• marks - Adiciona marcas ao documento• string-set

Dimension • height - Define a altura de um elemento• max-height - define a altura máxima de um elemento• max-width - Define a largura máxima de um elemento• min-height - Define a altura mínima de um elemento• min-width - Define a largura mínima 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 direção em que os filhos de uma caixa são exibidos• box-flex - Especifica se os filhos de uma caixa é flexível ou inflexível em tamanho• box-flex-group - Atribui elementos flexíveis para flexionar grupos• box-lines - Especifica se colunas irá para uma nova linha sempre que ficar sem espaço na caixa de pai• box-ordinal-group - Especifica a ordem de exibição 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 posição horizontal em caixas horizontais e a posição vertical em caixas verticais

Font• font - propriedade abreviada, define todas as propriedades da fonte em uma declaração• font-family -Especifica a família 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 não 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 conteúdo gerado• counter-increment - incrementos um ou mais contadores• counter-reset - Cria ou restaura um ou mais contadores• quotes - Define o tipo de aspas para citações embutidas• crop - Permite que um elemento substituído para ser apenas uma área retangular de um objeto, em vez de todo o objeto• move-to - Causa a remoção de um elemento que será reinserido posteriormente no documento• page-policy - Determina qual ocorrência 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 nível é alinhado em relação ao seu pai• baseline-shift - Permite reposicionamento da relação 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 conexão primário• 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

• 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

List• 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• 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

Marquee• marquee-direction - Define a direção do conteúdo em movimento• marquee-play-count - Define quantas vezes o conteudo se move.• marquee-speed -Define o quão rápido o conteúdo rola• marquee-style - Define o estilo de movimento do conteúdo

Multi-column• column-count - Especifica o número 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 espaçamento superior;• padding-right - define a espaçamento direita;• padding-bottom - define a espaçamento inferior;

41

• padding-left - define a espaçamento esquerda;• padding - maneira abreviada para todas os espaçamentos

Paged Media• fit - Dá uma sugestão de como dimensionar um elemento substituído, se nem a sua largura, nem sua propriedade altura é

automática• fit-position - Determina o alinhamento do objeto dentro da caixa• image-orientation – Especifica uma rotação no sentido horario ou anti-horario • page - Especifica um tipo especial de página, onde um elemento deve ser exibido• size - Especifica o tamanho e a orientação da caixa que contém o conteúdo da página

Positioning• bottom - Especifica a posição do fundo de um elemento posicionado• clear -Especifica que os lados de um elemento onde outros elementos flutuantes não são 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 não uma caixa deve flutuar• left - Especifica a posição esquerda de um elemento posicionado• overflow - Especifica o que acontece se estourar o conteúdo da caixa de um elemento• position - Especifica o tipo de método de posicionamento utilizado para um elemento (static, relative, absolute ou fixed)

• right - Especifica a posição direita de um elemento posicionado• top - Especifica a posição de topo de um elemento posicionado• visibility - Especifica se um elemento é visível• z-index - Define a ordem de empilhamento de um elemento posicionado

Impressão• orphans - Define o número mínimo de linhas que devem ser deixados no fundo de uma página quando ocorre uma quebra de

página dentro de um elemento• page-break-after -Define o comportamento de quebra de página depois de um elemento• page-break-before - Define o comportamento de quebra de página antes de um elemento• page-break-inside - Define o comportamento de quebra de página dentro de um elemento• widows - Define o número mínimo de linhas que deve ser deixado no topo de uma página quando uma quebra de página

ocorre dentro de um elemento

Table• border-collapse – Especifica se as bordas devem ou não ser recolhidas• border-spacing - Especifica a distância entre as bordas das células adjacentes• caption-side - Especifica a colocação de uma legenda da tabela• empty-cells - Especifica se deve ou não exibir as bordas e fundo para as células vazias em uma tabela• table-layout - Define o algoritmo de layout a ser utilizado para a tabela

Texto• color – Define a cor do texto• direction – Especifica a direção do texto• letter-spacing - Aumenta ou diminui o espaço 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 decoração adicionada ao texto• text-indent - Especifica o recuo da primeira linha em um bloco de texto• text-transform - Controla a capitalização de texto (maiúscula e minúscula)• vertical-align – Define o alinhamento vertical do texto• white-space - Especifica como espaço em branco dentro de um elemento é tratado• word-spacing - Aumenta ou diminui o espaço entre as palavras de um texto• hanging-punctuation - Especifica se um caracter de pontuação pode ser colocado fora da caixa linha• punctuation-trim - Especifica se um caractere de pontuação deve ser aparado• text-align-last - descreve como a última linha de um bloco ou uma linha antes de uma quebra de linha forçada está alinhado

quando text-align é "justify"• text-justify -Especifica o método de justificação 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 contém• 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 não-CJK• word-wrap – Permite que palavras longas não sejam inquebraceis e passarão para a próxima linha

Transformação 2D/3D • transform - Aplica-se uma transformação em 2D ou 3D a um elemento• transform-origin - Permite alterar a posição em elementos transformados• transform-style - Especifica como elementos aninhados são processadas no espaço 3D• perspective - Especifica a perspectiva sobre a forma como os elementos 3D são vistos• perspective-origin - Especifica a posição inferior de elementos 3D• backface-visibility - Define se o elemento deve ser visível ou não quando não está voltado para a tela

Transição• transition – A propriedade abreviada para definir as quatro propriedades de transição.• transition-property – Especifica o tipo da propriedade de transição CSS• transition-duration - Especifica a duração em segundos ou milisegundos.• transition-timing-function - Especifica a curva da velocidade do efeito de transição• transition-delay - Especifica quando o efeito de transição vai começar

Interface do Usuário• appearance - Permite que você faça um elemento parecer como um elemento da interface de usuário padrão• 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 tabulação de um elemento• nav-left - Especifica onde navegar ao usar a tecla de navegação de seta esquerda• nav-right - Especifica onde navegar ao usar a tecla de navegação de seta direita• nav-up - Especifica onde navegar ao usar a tecla de navegação de seta cima• outline-offset – Desloca um contorno• resize - Especifica se um elemento é redimensionável pelo usuário

CSS Rubyhttp://www.w3.org/TR/css3-ruby/

Algo Mais:Algo Mais:

Guia de referência CSS 2.1 (não tem CSS3)

REFERÊNCIAS

[W3] W3scholl; CSS tutorial, http://www.w3schools.com/css/default.asp

[K19] K19; K02-Desenvolvimento Web com HTML, CSS e JavaScript

43

http://www.w3schools.com/css/default.asp

http://www.w3c.br/divulgacao/pdf/guia-css-w3cbr.pdf

http://www.w3.org/TR/css3-ruby/

livro css um mero resumo

Documents