xhtml_03 44
64 pág.

xhtml_03 44

Disciplina:Análise Textual7.750 materiais265.923 seguidores
Pré-visualização6 páginas
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