CSS

Programação de Servidores Marx Gomes Van der Linden

( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida )

Introdução

O HTML foi desenvolvido como um sistema de codificação universal

 

Em princípio, qualquer pessoa visualizaria as mesmas páginas, independente de plataforma. Definição de estrutura e aparência juntas Browsers diferentes... Visões diferentes...

http://marx.vanderlinden.com.br/

2

Introdução

Com o passar do tempo, o HTML foi recebendo cada vez mais novos elementos para agregar novas funcionalidades. Tags para fontes, cores e estilos. Uso excessivo de tabelas para diagramação.
  

 

Páginas desnecessariamente grandes Código complexo Difícil de ler e de manter

http://marx.vanderlinden.com.br/

3

Cascading Style Sheet  Linguagem criada pelo W3C para definir estilos (cores.CSS .com.) em páginas web.br/ 4 .  Acrônimo para Folhas de Estilo em Cascata http://marx.vanderlinden. etc. posicionamento. tipologia.

CSS . http://marx.br/ 5 .vanderlinden.com. formatação e manutenção de páginas web.Cascading Style Sheet   Possibilita que determinadas propriedades sejam aplicadas ao mesmo tempo a todos elementos de uma página ou site que estejam marcados com um tag específico. Facilitam a criação.

br/ 6 .0 em Draft) Suportado pelos principais browsers..CSS .1 (CSS 3. É um dos principais conceitos por trás dos Web Standards http://marx.Histórico      Criado no final de 1996 Padrão W3C (World Wide Web Consortium) Versão atual: CSS 2.com..vanderlinden.

br/ 7 .Proposta  A linguagem HTML estrutura um documento através de blocos de informação  Títulos. links.vanderlinden. parágrafos.com.etc. cores. Separa estilo de conteúdo Solução eficiente para administração de sites com alto volume de páginas http://marx. etc. fontes.  CSS controla a aparência e o layout do documento    Estrutura. cabeçalhos.

vanderlinden.br/ Define a idéia Principal do documento 8 .com.Proposta  Separação de Responsabilidades Define o estilo dos elementos básicos do documento CSS Tags HTML Conteúdo Define a estrutura básica do documento http://marx.

com.vanderlinden.Vantagens      Melhor controle da apresentação visual da página Redução de esforço e tempo na criação e manutenção de páginas Documentos menores e mais leves Sites mais acessíveis Gerência mais eficiente do layout http://marx.br/ 9 .

Tipos  Há três tipos de folhas de estilo  Local:  Trecho de texto (tag)  Interno:  Página  Externo:  Conjunto de páginas (Site) http://marx.vanderlinden.com.br/ 10 .

com.Tipos   Pode-se usar um dos três ou mesmo os três no mesmo documento. Precedência  Local > Interno > Externo INTERNO LOCAL EXTERNO http://marx.vanderlinden.br/ 11 .

vanderlinden.Estrutura  Cada elemento usado para definir estilo em CSS é derivado da estrutura de elementos HTML existentes    Tamanho.com.br/ 12 . cor e estilo de fonte Alinhamento de parágrafo Borda de Tabela http://marx.

br/ 13 .vanderlinden.Folhas de Estilo  Anatomia de um Estilo  Estilos são definidos através de propriedades Seletor H1 { font-size: 12pt. color: red } http://marx.com.

com...vanderlinden.br/ 14 ..”  Usado quando queremos sobrepor um estilo mais amplo (Interno ou Externo) <H1 STYLE="color:green"> Esse é um texto verde! </H1> http://marx.Folhas de Estilo Locais  Ideal quando o estilo se resume a um determinado trecho da página  Dentro da tag HTML digite:  STYLE=“propriedade1:valor1.

..color:red} P {text-align: justify.com. ::: </TITLE> <STYLE> H1 {size:12.Folhas Internas <HTML> <HEAD> <TITLE> ::: ATÉ QUE ENFIM SAÍMOS DE HTML. font: 10pt.br/ </html> 15 . </P> </body> http://marx.vanderlinden."Verdana"} </STYLE> </HEAD> <body> <H1> Folhas de Estilo </H1> <P> Texto do parágrafo.

Folhas Internas Folhas de Estilo Texto do parágrafo.com.vanderlinden. http://marx.br/ 16 .

Folhas Internas  Adequadas para páginas individuais com grande quantidade de formatação  Definições são colocadas no topo da página (fatoração)  As definições aplicam-se a vários trechos da página repetidamente  Se precisar aplicar os mesmos estilos a mais de uma página.com. http://marx.br/ 17 . é melhor utilizar Folhas Externas.vanderlinden.

Folhas Internas  Observações  Podem-se definir propriedades para várias tags ao mesmo tempo H1. H3 { color:red } http://marx.br/ 18 . H2.com.vanderlinden.

Folhas Externas  São ideais para dar uma aparência comum a um determinado conjunto de (ou mesmo todas) páginas de um site  Cada página HTML deverá consultar um arquivo de estilos  Fatoração deve ocorrer em todo o site http://marx.br/ 19 .vanderlinden.com.

css Fonte azul Fonte Verde Fonte Vermelha <head> <body> </head> <head> <body> </head> aaaaaaaaaaaaa bbbbbbbbbbbbb </body> cccccccccccccc dddddddddddd 20 http://marx.com.br/ </body> .Folhas Externas definição.vanderlinden.

vanderlinden.css http://marx.br/ 21 .Folhas Externas  Criando uma Folha de Estilo Externa  Crie um documento de texto plano  Digite os pares seletor { lista de propriedades }  Salve o arquivo com a extensão .com.

br/ 22 .vanderlinden.Folhas Externas  Utilizando uma Folha de Estilo Externa  Em cada página HTML onde deseja aplicar o estilo:  Na seção HEAD digite: <LINK REL="stylesheet" TYPE=text/css HREF="arquivo.css"> http://marx.com.

com.  Parágrafos introdutórios X parágrafos normais  Aplicável apenas à Folhas Internas ou Externas http://marx.br/ 23 .vanderlinden.Classes de Estilos  Configurando Classes de Estilos  Permite dividir os elementos HTML em categorias ou classes a fim de aplicar os estilos seletivamente.

com.br/ 24 .vanderlinden.nomedaclasse { propriedade:valor }  Na tag desejada no documento HTML <SELETOR CLASS="nomedaclasse"> http://marx.Classes de Estilos  Configurando Classes de Estilos  Na seção <STYLE> SELETOR.

vanderlinden.Classes de Estilos <HTML> <HEAD><TITLE> ::: CSS ::: </TITLE> <STYLE> P { COLOR:RED } P.com.DIFERENTE { COLOR:BLUE } </STYLE> </HEAD> <BODY> <P> Isso é um parágrafo comum!!!! </P> <P CLASS=“DIFERENTE”> Parágrafo diferente! </P> </BODY> </HTML> http://marx.br/ 25 .

MARIA?” </P> <P CLASS=“MARIA”> “NÃO É DE SUA CONTA!” </P> <P CLASS=“JOAO”> “CLARO QUE É! POIS SOU TEU PAI!” </P> </BODY> http://marx. COLOR:RED } P.JOAO { FONT: BOLD.vanderlinden.com.MARIA { COLOR:BLUE } </STYLE> </HEAD> <BODY> <P CLASS=“JOAO”> “ONDE ESTIVESTES.br/ </HTML> 26 .Classes de Estilos <HTML> <HEAD><TITLE> ::: CSS ::: </TITLE> <STYLE> P.

br/ 27 .vanderlinden.http://marx.com.

com.Herança  CSS suporta o conceito de Herança. para definir que propriedades são aplicadas a que elementos Algumas propriedades aplicadas a um elemento HTML são automaticamente aplicadas a todos os elementos-filhos  http://marx.br/ 28 .vanderlinden.

br/ 29 .vanderlinden.Herança http://marx.com.

com.vanderlinden.br/ 30 .Classes de Estilos  Podem-se definir relações de dependência H1 EM { color:red } Define as propriedades dos elementos EM dentro das tags H1 <H1> Título <em>da</em> Página </H1> http://marx.

Formatando Texto com Estilo  Permite modificar.com. dentre outras coisas:  Tamanho  Inclinação  Altura da linha  Cor do primeiro plano e do fundo  Espaçamento e alinhamento de texto http://marx.vanderlinden.br/ 31 .

negrito.br/ 32 .vanderlinden.com.Formatando Texto com Estilo  Fontes  São os elementos básicos de um documento. itálico. etc)  Peso (normal.  São estilos de apresentação que se aplicam a letras. leve. etc) http://marx. números e símbolos especiais  Atributos essenciais de uma fonte:  Tipo (ou família)  Tamanho  Estilo (regular.

Formatando Texto com Estilo  Tipo ou Família de Fontes   Define o tipo da fonte Propriedade: font-family  Sintaxe: font-family: fonte1.vanderlinden.com. helvetica. fonte2..br/ 33 . H1 {font-family: garamond} H2 {font-family: arial.. sans-serif} H3 {font-family: "TIMES NEW ROMAN"} http://marx. fonte3.

vanderlinden.Famílias Genéricas  Toda lista font-family deve ao menos terminar com uma das famílias tipográficas genéricas: IE7/Windows http://marx.br/ Safari/Mac 34 .com.

Formatando Texto com Estilo  Tamanho da fonte   Propriedade font-size Valores atribuídos são absolutos ou relativos xx-small x-small small medium large x-large xx-large font-size: font-size: font-size: font-size: font-size: larger smaller 12pt 15px 150% font-size: font-size: font-size: font-size: font-size: font-size: font-size: http://marx.br/ 35 .com.vanderlinden.

br/ 36 .com.vanderlinden. font-style:normal  font-style: italic  H1{font-style: normal} H3{font-style: italic} http://marx.Formatando Texto com Estilo  Estilo  font-style define a inclinação da fonte.

Formatando Texto com Estilo  Peso  font-weight define o peso ou largura da fonte •font-weight: bold •font-weight: bolder •font-weight: light •Font-weight: lighter •Font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |900 http://marx.com.br/ 37 .vanderlinden.

Implementação dos pesos     bold bolder light lighter         100 200 300 400 500 600 700 800 900 38 http://marx.com.vanderlinden.br/  .

Cores  Padrão RGB #000000 #0066FF #006600 #990000 #CC0000 #FFFF00 #000066 #0099FF #006633 #990033 #CC3333 #FFFF33 #000099 #00CCFF #006666 #990066 #993399 #FFFFCC #0000FF #00FFFF #00FF00 #990099 #9933CC #FFFFFF http://marx.com.br/ 39 .vanderlinden.

Decimal: 0-255 http://marx.Padrão RGB #A0522D Red: A0 → 160 Green: 52 → 82 Blue: 2D → 45 Hex: 00-FF.vanderlinden.com.br/ 40 .

vanderlinden.Cores  Padrão Nominal black gray green maroom navy silver red fuchsia aqua olive teal purple blue yellow lime white http://marx.com.br/ 41 .

vanderlinden.br/ 42 .Formatando Texto com Estilo  Cor de Texto  color : nome  color : #RRGGBB H1 { color : gray } P { color : #FFFFFF } http://marx.com.

B)  Valores entre 0 e 255 color : rgb(R%.br/ 43 .vanderlinden.com.B%)  Valores entre 0 e 100  http://marx.G.G%.Formatando Texto com Estilo  Cor de Texto  color : rgb(R.

com..br/ 44 .255).20. </P> </body> </html> http://marx.10%)} </style> </head> <body> <H1> Título da Página </H1> <P> Um parágrafo começa aqui. } H1 {color:rgb(30%.50%..vanderlinden.Formatando Texto com Estilo <html> <head><title> ::: Página Exemplo. ::: </title> <style> P { color:rgb(70.

br/ 45 .com.vanderlinden.Formatando Texto com Estilo http://marx.

vanderlinden.br/ 46 .Formatando Texto com Estilo  FONT  Permite especificar várias propriedades de uma só vez  font: font-style.com. font-weight. fontfamily H1 {font: italic 24pt "sans serif"} http://marx. font-size.

com.vanderlinden.br/ 47 .Formatando Texto com Estilo  Plano de fundo     background-color : transparent background-color : cor background-color : #rrggbb background-image : url (caminho da imagem) http://marx.

gif) } H3{ background-image: url(file:///c:/imagens/sol.com.vanderlinden../img.br/ 48 .jpg) } http://marx.Formatando Texto com Estilo  Exemplos: H1 { background-color : transparent. color:black } H2{ background-image: url(.

Formatando Texto com Estilo

H1

H2
http://marx.vanderlinden.com.br/ 49

Formatando Texto com Estilo

Espaçamento  Entre palavras (tracking)  word-spacing:comprimento (pxl, pt)  Entre letras (krening)  letter-spacing:comprimento (pxl, pt)

Viva o software livre Viva o software livre o s o f w a r e l i v r e
50 http://marx.vanderlinden.com.br/

V i v a

Formatando Texto com Estilo

Récuo de Margem de Texto  Permite dar um deslocamento em relação à margem.  text-ident : valor absoluto  text-ident : porcentagem

http://marx.vanderlinden.com.br/

51

com. accumsan et. nibh. Etiam ut ante ut odio rhoncus tristique. dolor. Quisque orci est. vehicula vitae. Nam varius feugiat magna. consectetuer adipiscing elit.br/ 52 .</P> http://marx. Praesent mauris diam. dapibus sit amet.vanderlinden. adipiscing at. dictum ut. Nulla vitae augue bibendum massa commodo congue. ultrices ac.Formatando Texto com Estilo <H1> Título da Página </H1> <P style="text-indent:14pt"> Lorem ipsum dolor sit amet.

com.br/ 53 .vanderlinden.Formatando Texto com Estilo http://marx.

vanderlinden.Formatando Texto com Estilo  Alinhamento  Define a posição do texto na página  text-align:left  text-align:right  text-align:center  text-align:justify http://marx.br/ 54 .com.

Formatando Texto com Estilo http://marx.com.br/ 55 .vanderlinden.

com.Formatando Texto com Estilo  Uso de Linhas  Permite destacar um determinado texto usando uma linha  text-decoration:underline  text-decoration:overline  text-decoration:line-through http://marx.vanderlinden.br/ 56 .

br/ </body></html> 57 .com.sublinhado {text-decoration:underline} p.porcima{text-decoration:overline} p.vanderlinden.riscado {text-decoration:line-through} </style> </head><body> <p class="sublinhado"> Esse texto está sublinhado </p> <p class="porcima"> Esse texto está sobrelinhado </p> <p class="riscado"> Esse texto está riscado </p> http://marx.Formatando Texto com Estilo <html><head> <title>Untitled Document</title> <style> p.

Formatando Texto com Estilo http://marx.vanderlinden.com.br/ 58 .

Formatando Texto com Estilo  Estados de uma Linha – a:link: o link não foi visitado – a:visited: o link já foi visitado – a:hover: o apontador do mouse está sobre o link – a:active: o apontador do mouse está sobre o link e o botão esquerdo do mouse está pressionado http://marx.vanderlinden.com.br/ 59 .

color:yellow. textdecoration:none }  a:hover { background:cyan.Formatando Texto com Estilo  a:link { background:blue. textdecoration:none } http://marx. textdecoration:none }  a:active { background:white.vanderlinden. color:yellow.com. color:yellow.br/ 60 . textdecoration:none }  a:visited { background:black. color:yellow.

} http://marx.vanderlinden.com.Formatando Texto com Estilo  Mudando o estado  Maiúscula / Minúscula  text-transform: capitalize  text-transform: uppercase  text-transform: lowercase  text-transform: none a:hover {text-transform:uppercase.br/ 61 .

vanderlinden.com. azul) http://marx. verde.br/ 62 .Cor de Fundo  As cores de fundo de qualquer elemento podem ser alteradas  background-color  Sintaxe:  background-color: transparent  background-color: nome-da-cor  background-color: #hexadecimal  background-color: rgb(vermelho.

127. 63) } http://marx.br/ 63 .vanderlinden.Cor de Fundo  Exemplos H1 { background-color: yellow } P { background-color: #AA00FF } EM { background-color: rgb(255.com.

vanderlinden. http://marx.Imagem de Fundo  Assim como é possível modificar as cores do fundo de um elemento. pode-se atribuir imagens:  background-imagem  Sintaxe:  background-image: none  background-image: url (URL da imagem)  Observação  As URLs são relativas à localização do arquivo que contém a folha de estilo.br/ 64 .com.

</TD> http://marx.gif)”> .com.gif) } B { background-image: url (..Imagem de Fundo  Exemplos H1 { background-image: url (http://www..com/img/a./esqueleto..br/ 65 .bla.gif) <TD STYLE=“background-image: url (flinstone.vanderlinden.

com.br/ 66 .vanderlinden.Imagem de Fundo  CSS permite um controle maior sobre a imagem de fundo:  Sintaxe:  background-repeat: repeat (default)  background-repeat: repeat-x  background-repeat: repeat-y  background-repeat: no-repeat http://marx.

Imagem de Fundo  Exemplos BODY { background-image: url (ceu.com.gif).gif).vanderlinden. background-repeat: repeat-x } TABLE { background-image: url (sol. background-repeat: no-repeat } http://marx.br/ 67 .

com.vanderlinden.Imagem de Fundo  O posicionamento do papel de parede pode também ser controlado  Sintaxe:  background-attachment: fixed  background-attachment: scroll http://marx.br/ 68 .

gif.gif.Imagem de Fundo  Exemplos BODY {background-image: skull.vanderlinden. background-attachment: scroll} http://marx.br/ 69 . background-attachment: fixed} BODY {background-image: skull.com.

Plano de Fundo  Podemos definir várias propriedades de uma única vez:  Sintaxe:  background: background-color background-image background-repeat background-attachment backgroundposition http://marx.br/ 70 .com.vanderlinden.

Plano de Fundo  Exemplos BODY { background: url(.com.br/ 71 .vanderlinden./popeye.gif) white repeat-y scroll} BODY { background: rgb(200.100..127) } http://marx.