A maior rede de estudos do Brasil

Grátis
64 pág.
xhtml_03 44

Pré-visualização | Página 4 de 6

conjunto o verde e os restante para o azul 
– Sempre inicie uma notação hexa com o sinal “#”
p {
color : #cc6600;
}
# CC 66 00
CC
•Onde:
12(C) * 16 + 12 = 192 + 12 = 204
Red Green Blue
66 6 * 16 + 6 = 96 + 6 = 102
00 0 * 16 + 0 = 0 + 0 = 0
41
Catálogo (uma parte…) de cores na Web
Disponível por HTTP em: http://en.wikipedia.org/wiki/Web_colors
42
Um exemplo breve…
Laboratório 08: fontes, cores, validador, …LaboratórioLaboratório 0808:: fontesfontes, cores,, cores, validadorvalidador, …, …
43
• CSS permite utilizar um modelo de caixa para controlar como elementos (tag’s)
xhtml serão exibidos no navegador
– As “caixas” têm um conteúdo, um padding*, uma borda* e uma margem*
• Cada um destas partes são comentadas abaixo:
–– ConteúdoConteúdo: a área alocada para o conteúdo consiste do espaço mínimo necessário para 
receber o conteúdo (até tocar a borda do browser, se for o caso)
–– PaddingPadding: propriedade utilizada para criar um espaço ao redor do conteúdo (espaço 
interno entre o conteúdo e a borda, quando houver alguma)
–– BordaBorda:: fica ao redor do padding(se houver algum) e, por sua vez, do conteúdo
–– MargemMargem: fica ao redor da borda, padding e conteúdo; é usada para fornecer 
espaçamento entre elementos adjacentes*
Box Model
* padding, borda e margem são, conceitualmente, opcionais! Não esqueça disso…
44
Box Model(cont.)
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
Esta parte é chamada de conteúdo (e.g. 
um texto ou uma imagem)
Ao redor do conteúdo, pode
(não é obrigatório) haver um 
padding transparente
Finalmente, uma margem transparente
e também opcional pode ser colocada 
ao redor de todo o resto
Uma borda (opcional) pode
ser colocada ao redor do 
padding e do conteúdo
Todos os elementos são tratados como caixas:
parágrafos, cabeçalhos, listas, itens de lista, imagens,
texto enfatizado, links, quotas, citações em bloco, etc
45
Pode-se gerar várias combinações…
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
só conteúdo
só bordas
só margens
margens inf. e dir. distintas + borda esq.
margem sup. e inf. + borda
padding sup. e esq. diferentes
padding iguais
só margem dir. + padding sup.inf.
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
misturado J
46
Bordas
• Altere a espessura da borda com a propriedade border-width
• Altere a cor da borda com a propriedade border-color
p {
border-width : thin;
}
img {
border-width : 5px;
}
p {
border-color : red;
border-color : rgb(100%, 0%, 0%);
border-color : #FF0000;
}
thin
medium
thick
Você pode especificar usando
thin, medium, thick ou usando px
1px
2px
3px
4px
5px
6px
Você pode usar cores pré-definidas, valores em rgb ou 
usando a notação hexadecimal
Vide catálogo …
…
47
Bordas(cont.)
• Altere o estilo da borda com a propriedade border-style
• Especificando os lados da borda:
h1 {
border-style : dotted;
}
border-top-color
border-top-style
border-top-width
* Ainda não suportada por todos os navegadores.
solid
double
groove*
outsetExplore cada um dos valores (depreferência, no Firefox…) !
dotted*
dashed
inset
ridge*
border-right-color
border-right-style
border-right-width
border-bottom-color
border-bottom-style
border-bottom-width
border-left-color
border-left-style
border-left-width
h1 {
border-top-style : solid;
border-top-color : red;
border-top-width : 2px;
}
Exemplo:
48
Um exemplo breve…
Laboratório 09: bordas, box model, …LaboratórioLaboratório 0909:: bordasbordas, box model, …, box model, …
49
O atributo id
• Até aqui, temos usado classes quando desejávamos aplicar um mesmo 
estilo a um grupo específico de elementos XHTML da página
– Mas, e quando este conjunto contém apenas umum único elementoúnico elemento (e.g., o
rodapé da página, ou um parágrafo contendo uma mensagem do dia, ...)?
• Se há apenashá apenas umum único elementoúnico elemento a ser estilizado de maneira diferente
dos demais, classesclasses nãonão sãosão ((semanticamentesemanticamente) a) a melhor soluçãomelhor solução!!
• Use o atributo id para prover a um elemento um nome único
– Deve haver apenas um único elemento na página com um dado id
– A partir daí, pode-se usar este id para prover um único estilo ao elemento
50
Anatomia de um id
#vermelho {
color : red;
}
Use um “#” seguido do nome do 
id para selecionar um único
elemento da página
Uma forma simples é
escrever # primeiro…
A definição de um id ocorre 
dentro do arquivo CSS (junto
com as demais regras, quando
for o caso…)
Evite utilizar espaços em branco
e/ou caracteres especiais para 
nomear um id
Esta regra irá selecionar o
elemento que possuir o atributo
id de nome “vermelho”
… e, depois, o nome do id.
51
id (conceitos avançados)
• E se houver dois elementos de mesmo id na página e uma regra id?
– Ambos serão estilizados, mas, seu documento XHTML não será validado!
• Um elemento pode ter um id único e ainda fazer parte de uma classe 
– Mas…e se houver regras conflitantes escritas nas regras da classe e do id?
• Uma regra escrita com id deterá maior prioridade em relação a uma regra escrita
com elementos XHTML ou até mesmo classes! Pense nisso…
• Vale também saber que um id pode ser utilizado como um “alvo” na 
criação de links internos (vide módulo XHTML) *
– Isso já é uma indicação da W3C (tornará as coisas mais simples…)
* Ainda não suportada por todos os navegadores (sobretudo os mais antigos).
52
Quiz…
• Qual a escolha mais adequada para cada item abaixo? Id ou Classe? 
– Um parágrafo contendo o rodapé da página xhtml
– Uma imagem na página representando a “foto do dia”
– Parágrafos que contém comentários de visitantes sobre um dado filme
– A lista de produtos em um carrinho de compras (a imagem do produto, sua 
descrição, preço, quantidade em estoque, etc.)
– O parágrafo que foi estilizado na prática 09?
53
Elemento <div>
• Elementos <div> são usados, basicamente, para agrupar elementos 
relacionados na página de modo a criar seções lógicasseções lógicas
– Na verdade, ele age como um “container” para vários elementos XHTML que 
devam ser relacionados dentro da página