xhtml_03 44
64 pág.

xhtml_03 44


DisciplinaAnálise Textual9.512 materiais293.874 seguidores
Pré-visualização6 páginas
conjunto o verde e os restante para o azul 
\u2013 Sempre inicie uma notação hexa com o sinal \u201c#\u201d
p {
color : #cc6600;
}
# CC 66 00
CC
\u2022Onde:
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\u2026) de cores na Web
Disponível por HTTP em: http://en.wikipedia.org/wiki/Web_colors
42
Um exemplo breve\u2026
Laboratório 08: fontes, cores, validador, \u2026LaboratórioLaboratório 0808:: fontesfontes, cores,, cores, validadorvalidador, \u2026, \u2026
43
\u2022 CSS permite utilizar um modelo de caixa para controlar como elementos (tag\u2019s)
xhtml serão exibidos no navegador
\u2013 As \u201ccaixas\u201d têm um conteúdo, um padding*, uma borda* e uma margem*
\u2022 Cada um destas partes são comentadas abaixo:
\u2013\u2013 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)
\u2013\u2013 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)
\u2013\u2013 BordaBorda:: fica ao redor do padding(se houver algum) e, por sua vez, do conteúdo
\u2013\u2013 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\u2026
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\u2026
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
um conteúdo um conteúdo
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
\u2022 Altere a espessura da borda com a propriedade border-width
\u2022 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 \u2026
\u2026
47
Bordas(cont.)
\u2022 Altere o estilo da borda com a propriedade border-style
\u2022 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\u2026) !
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\u2026
Laboratório 09: bordas, box model, \u2026LaboratórioLaboratório 0909:: bordasbordas, box model, \u2026, box model, \u2026
49
O atributo id
\u2022 Até aqui, temos usado classes quando desejávamos aplicar um mesmo 
estilo a um grupo específico de elementos XHTML da página
\u2013 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, ...)?
\u2022 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!!
\u2022 Use o atributo id para prover a um elemento um nome único
\u2013 Deve haver apenas um único elemento na página com um dado id
\u2013 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 \u201c#\u201d seguido do nome do 
id para selecionar um único
elemento da página
Uma forma simples é
escrever # primeiro\u2026
A definição de um id ocorre 
dentro do arquivo CSS (junto
com as demais regras, quando
for o caso\u2026)
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 \u201cvermelho\u201d
\u2026 e, depois, o nome do id.
51
id (conceitos avançados)
\u2022 E se houver dois elementos de mesmo id na página e uma regra id?
\u2013 Ambos serão estilizados, mas, seu documento XHTML não será validado!
\u2022 Um elemento pode ter um id único e ainda fazer parte de uma classe 
\u2013 Mas\u2026e se houver regras conflitantes escritas nas regras da classe e do id?
\u2022 Uma regra escrita com id deterá maior prioridade em relação a uma regra escrita
com elementos XHTML ou até mesmo classes! Pense nisso\u2026
\u2022 Vale também saber que um id pode ser utilizado como um \u201calvo\u201d na 
criação de links internos (vide módulo XHTML) *
\u2013 Isso já é uma indicação da W3C (tornará as coisas mais simples\u2026)
* Ainda não suportada por todos os navegadores (sobretudo os mais antigos).
52
Quiz\u2026
\u2022 Qual a escolha mais adequada para cada item abaixo? Id ou Classe? 
\u2013 Um parágrafo contendo o rodapé da página xhtml
\u2013 Uma imagem na página representando a \u201cfoto do dia\u201d
\u2013 Parágrafos que contém comentários de visitantes sobre um dado filme
\u2013 A lista de produtos em um carrinho de compras (a imagem do produto, sua 
descrição, preço, quantidade em estoque, etc.)
\u2013 O parágrafo que foi estilizado na prática 09?
53
Elemento <div>
\u2022 Elementos <div> são usados, basicamente, para agrupar elementos 
relacionados na página de modo a criar seções lógicasseções lógicas
\u2013 Na verdade, ele age como um \u201ccontainer\u201d para vários elementos XHTML que 
devam ser relacionados dentro da página