03 - PS - CSS

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
CSS - Cascading Style Sheet
 Linguagem criada pelo W3C para definir

estilos (cores, tipologia, posicionamento, etc.)
em páginas web.
 Acrônimo para Folhas de Estilo em Cascata
CSS - 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, formatação e manutenção
de páginas web.
CSS - Histórico
 Criado no final de 1996

 Padrão W3C (World Wide Web Consortium)
 Versão atual: CSS 2.1 (CSS 3.0 em Draft)
 Suportado pelos principais browsers...
 É um dos principais conceitos por trás dos
Web Standards
Proposta
 A linguagem HTML estrutura um documento

através de blocos de informação
 Títulos, cabeçalhos, parágrafos, links,etc.
 CSS controla a aparência e o layout do
documento
 Estrutura, cores, fontes, etc.
 Separa estilo de conteúdo
 Solução eficiente para administração de sites com
alto volume de páginas
Proposta
 Separação de Responsabilidades
Define o CSS Define a estrutura

estilo dos básica do
elementos Tags HTML documento
básicos do
documento
Conteúdo
Define a idéia
Principal do
http://marx.vanderlinden.com.br/ documento 8
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
Tipos
 Há três tipos de folhas de estilo

 Local:
 Trecho de texto (tag)
 Interno:
 Página
 Externo:
 Conjunto de páginas (Site)
Tipos
 Pode-se usar um dos três ou mesmo os três

no mesmo documento.
 Precedência
 Local > Interno > Externo
INTERNO
LOCAL
EXTERNO
Estrutura
 Cada elemento usado para definir estilo em

CSS é derivado da estrutura de elementos
HTML existentes
 Tamanho, cor e estilo de fonte
 Alinhamento de parágrafo
 Borda de Tabela
Folhas de Estilo
 Anatomia de um Estilo
 Estilos são definidos através de propriedades
Seletor
H1 {
font-size: 12pt;
color: red
}
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;...”
 Usado quando queremos sobrepor um estilo mais
amplo (Interno ou Externo)
<H1 STYLE="color:green">
Esse é um texto verde!
</H1>
Folhas Internas
<HTML>
<HEAD>
<TITLE> ::: ATÉ QUE ENFIM SAÍMOS DE
HTML... ::: </TITLE>
<STYLE>
H1 {size:12;color:red}
P {text-align: justify; font:
10pt,"Verdana"}
</STYLE>
</HEAD>
<body>
<H1> Folhas de Estilo </H1>
<P> Texto do parágrafo. </P>
</body> http://marx.vanderlinden.com.br/ 15
</html>
Folhas Internas
Folhas de Estilo
Texto do parágrafo.
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, é melhor utilizar

Folhas Externas.
Folhas Internas
 Observações
 Podem-se definir propriedades para várias
tags ao mesmo tempo
H1, H2, H3 { color:red }
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
Folhas Externas
definição.css
Fonte azul
Fonte Verde
Fonte Vermelha
<head> </head> <head> </head>
<body> <body>
aaaaaaaaaaaaa cccccccccccccc
bbbbbbbbbbbbb dddddddddddd
</body> </body>
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 .css
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">
Classes de Estilos
 Configurando Classes de Estilos

 Permite dividir os elementos HTML em
categorias ou classes a fim de aplicar os

estilos seletivamente.
 Parágrafos introdutórios X parágrafos
normais
 Aplicável apenas à Folhas Internas ou
Externas
Classes de Estilos
 Configurando Classes de Estilos

 Na seção <STYLE>
SELETOR.nomedaclasse
{ propriedade:valor }
 Na tag desejada no documento HTML
<SELETOR CLASS="nomedaclasse">
Classes de Estilos
<HTML>
<HEAD><TITLE> ::: CSS ::: </TITLE>
<STYLE>
P { COLOR:RED }
P.DIFERENTE { COLOR:BLUE }
</STYLE>
</HEAD>
<BODY>
<P> Isso é um parágrafo comum!!!! </P>
<P CLASS=“DIFERENTE”>
Parágrafo diferente! </P>
</BODY>
</HTML> http://marx.vanderlinden.com.br/ 25
Classes de Estilos
<HTML>
<HEAD><TITLE> ::: CSS ::: </TITLE>
<STYLE>
P.JOAO { FONT: BOLD; COLOR:RED }
P.MARIA { COLOR:BLUE }
</STYLE>
</HEAD>
<BODY>
<P CLASS=“JOAO”> “ONDE ESTIVESTES,
MARIA?” </P>
<P CLASS=“MARIA”> “NÃO É DE SUA
CONTA!” </P>
<P CLASS=“JOAO”> “CLARO QUE É! POIS
SOU TEU PAI!” </P>
</BODY> http://marx.vanderlinden.com.br/ 26
</HTML>
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
Herança
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>

Formatando Texto com Estilo
 Permite modificar, dentre outras coisas:

 Tamanho
 Inclinação
 Altura da linha
 Cor do primeiro plano e do fundo
 Espaçamento e alinhamento de texto
 Fontes
 São os elementos básicos de um
documento.
 São estilos de apresentação que se aplicam
a letras, números e símbolos especiais

 Atributos essenciais de uma fonte:
 Tipo (ou família)
 Tamanho
 Estilo (regular, itálico, etc)
 Peso (normal, negrito, leve, etc)

 Tipo ou Família de Fontes

 Define o tipo da fonte
 Propriedade: font-family
 Sintaxe:
font-family: fonte1, fonte2; fonte3...
H1 {font-family: garamond}
H2 {font-family: arial, helvetica,
sans-serif}
H3 {font-family: "TIMES NEW ROMAN"}
Famílias Genéricas
 Toda lista font-family deve ao menos terminar

com uma das famílias tipográficas genéricas:
IE7/Windows Safari/Mac
 Tamanho da fonte
 Propriedade font-size
 Valores atribuídos são absolutos ou relativos
font-size: xx-small font-size: larger

font-size: x-small font-size: smaller
font-size: small font-size: 12pt
font-size: medium font-size: 15px
font-size: large font-size: 150%
font-size: x-large
font-size: xx-large
 Estilo
 font-style define a inclinação da fonte.
 font-style:normal
 font-style: italic
H1{font-style: normal}
H3{font-style: italic}
 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
Implementação dos pesos
 bold  100
 bolder  200
 light  300
 lighter  400
 500
 600
 700
 800
 900
Cores
 Padrão RGB
#000000 #000066 #000099 #0000FF
#0066FF #0099FF #00CCFF #00FFFF
#006600 #006633 #006666 #00FF00
#990000 #990033 #990066 #990099
#CC0000 #CC3333 #993399 #9933CC
#FFFF00 #FFFF33 #FFFFCC #FFFFFF
Padrão RGB
#A0522D
Red: A0 → 160
Green: 52 → 82
Blue: 2D → 45
Hex: 00-FF, Decimal: 0-255

Cores
 Padrão Nominal
black navy aqua blue
gray silver olive yellow
green red teal lime
maroom fuchsia purple white
 Cor de Texto
 color : nome
 color : #RRGGBB
H1 { color : gray }
P { color : #FFFFFF }
 Cor de Texto
 color : rgb(R,G,B)
 Valores entre 0 e 255
 color : rgb(R%,G%,B%)
 Valores entre 0 e 100
<html>
<head><title> ::: Página Exemplo... :::
</title>
<style>
P { color:rgb(70,20,255); }
H1 {color:rgb(30%,50%,10%)}
</style>
</head>
<body>
<H1> Título da Página </H1>
<P> Um parágrafo começa aqui. </P>
</body>
</html>
 FONT
 Permite especificar várias propriedades de
uma só vez
 font: font-style, font-weight, font-size, font-
family
H1 {font: italic 24pt "sans serif"}
 Plano de fundo
 background-color : transparent
 background-color : cor
 background-color : #rrggbb
 background-image : url (caminho da imagem)
 Exemplos:
H1 { background-color : transparent;
color:black }
H2{ background-image: url(../img.gif) }
H3{ background-image:
url(file:///c:/imagens/sol.jpg) }
H1
H2
 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
V i v a o s o f w a r e l i v r e
 Récuo de Margem de Texto

 Permite dar um deslocamento em relação à
margem.
 text-ident : valor absoluto
 text-ident : porcentagem
<H1> Título da Página </H1>
<P style="text-indent:14pt"> Lorem ipsum

dolor sit amet, consectetuer adipiscing
elit. Praesent mauris diam, dictum ut,
vehicula vitae, adipiscing at, dolor. Nam
varius feugiat magna. Etiam ut ante ut odio
rhoncus tristique. Quisque orci est,
accumsan et, dapibus sit amet, ultrices ac,
nibh. Nulla vitae augue bibendum massa
commodo congue.</P>
 Alinhamento
 Define a posição do texto na página
 text-align:left
 text-align:right
 text-align:center
 text-align:justify
 Uso de Linhas
 Permite destacar um determinado texto
usando uma linha

 text-decoration:underline
 text-decoration:overline
 text-decoration:line-through
<html><head>
<title>Untitled Document</title>
<style>
p.sublinhado {text-decoration:underline}
p.porcima{text-decoration:overline}
p.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>
</body></html>
 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
 a:link { background:blue; color:yellow; text-

decoration:none }
 a:visited { background:black; color:yellow; text-
decoration:none }
 a:hover { background:cyan; color:yellow; text-
decoration:none }
 a:active { background:white; color:yellow; text-
decoration:none }
 Mudando o estado
 Maiúscula / Minúscula
 text-transform: capitalize
 text-transform: uppercase
 text-transform: lowercase
 text-transform: none
a:hover {text-transform:uppercase;}
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, verde,
azul)
Cor de Fundo
 Exemplos
H1 { background-color: yellow }
P { background-color: #AA00FF }
EM { background-color: rgb(255, 127, 63) }
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 quehttp://marx.vanderlinden.com.br/
contém a folha de estilo. 64
Imagem de Fundo
 Exemplos
H1 { background-image: url
(http://www.bla.com/img/a.gif) }
B { background-image: url (../esqueleto.gif)
<TD STYLE=“background-image: url

(flinstone.gif)”> ... </TD>
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
Imagem de Fundo
 Exemplos
BODY { background-image: url (ceu.gif);

background-repeat: repeat-x }
TABLE { background-image: url (sol.gif);

background-repeat: no-repeat }
Imagem de Fundo
 O posicionamento do papel de parede pode

também ser controlado
 Sintaxe:
 background-attachment: fixed
 background-attachment: scroll
Imagem de Fundo
 Exemplos
BODY {background-image: skull.gif;

background-attachment: fixed}
BODY {background-image: skull.gif;

background-attachment: scroll}
Plano de Fundo
 Podemos definir várias propriedades de uma

única vez:
 Sintaxe:
 background: background-color
background-image background-repeat
background-attachment background-
position
Plano de Fundo
 Exemplos
BODY { background: url(../popeye.gif)

white repeat-y scroll}
BODY { background: rgb(200,100,127) }

03 - PS - CSS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

03 - PS - CSS

Enviado por

Direitos autorais:

Formatos disponíveis

CSS

Marx Gomes Van der Linden

( Material baseado no original de

 O HTML foi desenvolvido como um sistema de

 Com o passar do tempo, o HTML foi

 Linguagem criada pelo W3C para definir

 Possibilita que determinadas propriedades

 Criado no final de 1996

 A linguagem HTML estrutura um documento

Define o CSS Define a estrutura

 Melhor controle da apresentação visual da

 Há três tipos de folhas de estilo

 Trecho de texto (tag)

 Conjunto de páginas (Site)

 Pode-se usar um dos três ou mesmo os três

 Cada elemento usado para definir estilo em

 Ideal quando o estilo se resume a um

 Adequadas para páginas individuais com

mais de uma página, é melhor utilizar

tags ao mesmo tempo

H1, H2, H3 { color:red }

 São ideais para dar uma aparência comum a

<head> </head> <head> </head>

 Criando uma Folha de Estilo Externa

seletor { lista de propriedades }

 Salve o arquivo com a extensão .css

 Utilizando uma Folha de Estilo Externa

<LINK REL="stylesheet" TYPE=text/css

 Configurando Classes de Estilos

categorias ou classes a fim de aplicar os

 Configurando Classes de Estilos

 Na tag desejada no documento HTML

 CSS suporta o conceito de Herança, para

 Podem-se definir relações de dependência

Define as propriedades dos elementos

<H1> Título <em>da</em> Página </H1>

 Permite modificar, dentre outras coisas:

 Cor do primeiro plano e do fundo

 Espaçamento e alinhamento de texto

a letras, números e símbolos especiais

 Tipo (ou família)

 Estilo (regular, itálico, etc)

 Peso (normal, negrito, leve, etc)

 Tipo ou Família de Fontes

 Toda lista font-family deve ao menos terminar

font-size: xx-small font-size: larger

#0066FF #0099FF #00CCFF #00FFFF

#006600 #006633 #006666 #00FF00

#990000 #990033 #990066 #990099

#CC0000 #CC3333 #993399 #9933CC

#FFFF00 #FFFF33 #FFFFCC #FFFFFF

Hex: 00-FF, Decimal: 0-255

black navy aqua blue

gray silver olive yellow

green red teal lime

maroom fuchsia purple white

H2{ background-image: url(../img.gif) }

 word-spacing:comprimento (pxl, pt)

 Entre letras (krening)

 letter-spacing:comprimento (pxl, pt)

Viva o software livre

 Récuo de Margem de Texto

<H1> Título da Página </H1>

<P style="text-indent:14pt"> Lorem ipsum