xhtml_03 44
64 pág.

xhtml_03 44


DisciplinaAnálise Textual9.476 materiais293.877 seguidores
Pré-visualização6 páginas
\u2022 Elementos <div> ainda ajudam o webdesigner a identificar e delimitar as
principais \u201cgrandes áreas\u201d de um documento: cabeçalho, rodapé, conteúdo, etc.
\u2022 <div> pode agrupar elementos de modo que recebam um estilo CSS
\u2013 Uma vez que elementos foram agrupados, pode-se estilizar div\u2019s como 
elementos XHTML quaisquer. 
\u2022 Ex.: criar uma borda ao redor de um grupo de elementos, adicionar uma mesma cor
de background, etc.
Obs: para maiores detalhes, estude a prática 10 feita passo-a-passo pelo professor em sala de aula!
54
Propriedade width
\u2022 É possível usar a propriedade width para configurar a largura de elementos
\u2013 Se não houver uma regra alterando a largura de um elemento, o browser, então, irá 
admitir a largura como sendo \u201cauto\u201d\u2026
\u2022 E irá expandir o elemento usando o espaço disponível (na área visível do browser)
\u2022 Cuidado: a propriedade width especifica somente a largura do conteúdoconteúdo
\u2013 Assim, se for preciso descobrir a largura total de um elemento, deve-se somar possíveis 
padding\u2019s, bordas, e margens (quando for o caso)
conteúdo conteúdo 
conteúdo conteúdo 
conteúdo conteúdo
À direita, encontra-se um parágrafo com
algumas indicações CSS. Qual será a largura
total do elemento na tela, em px?
p {
border-width : 2px;
padding: 5px 8px 10px 7px;
margin: 10px;
width: 300px;
}
10 2 7 300 8 2 10
Ex.:
55
Um exemplo breve\u2026
Laboratório 10: uso de <div>LaboratórioLaboratório 1010:: usouso de <div>de <div>
56
Elementos descendentes
\u2022 Com CSS, também é possível selecionar apenas determinados 
elementos descendentes (elementos filhos, netos, bisnetos, etc.)
\u2022 Pode-se fazer construções mais complexas\u2026
div#rodape p {
color : #FF4567;
}
Selecione apenas os parágrafos que 
são descendentes (em qualquer 
nível) da div rodapé
div#cabecalho > p {
color : #FF4567;
}
#h1+p {
color : #FF4567;
}
Selecione apenas os parágrafos que são filhos 
diretos da div. Se houvesse, por ex., um
blockquote na div que possuísse um
parágrafo como filho, este não iria ser
afetado, pois já seria, no caso, um \u201cneto\u201d\u2026
Selecione apenas aqueles parágrafos 
que aparecem imediatamente após 
os elementos h1
57
Propriedade text-align
\u2022 A propriedade text-align permite alinhar todos os elementos
\u201cinline\u201d (ou apenas texto) que estão dentro de elementos de bloco
\u2013 Lembre-se de que, apesar de text-align funcionar para qualquer 
elemento inline, ela sempre deve ser setada em elementos de bloco!
\u2022 Ex.: logo, tentar usar diretamente text-align em <img> não irá funcionar
\u2022 Note que é bastante comum setar text-align em um elemento
\u201cpai\u201d e o alinhamento ser passado para os filhos (inline\u2019s ou blocos)
\u2013 Ex: text-align em uma <div> que contém <p> e <h1> 
\u2022 Estes dois últimos elementos herdarão o alinhamento do pai.
58
Elemento <span>
\u2022 O elemento <span> é bastante similar ao <div> visto há pouco: 
é utilizado para agrupar elementos \u201cinline\u201d (em linha) ou texto puro
\u2013 Da mesma forma que com as div\u2019s, é possível adicionar span\u2019s à classes (ou 
até prover um id único para eles) visando estilizá-los em um arquivo CSS!
.vermelho { 
color: red;
font-weight: bold;
}
<p> Camisas <span class=\u201cvermelho\u201d> vermelhas </span>
terão 30% de desconto hoje mesmo! </p>
<h3> Afinal, o <span class=\u201cvermelho\u201d> vermelho </span>
é uma cor que está sempre na moda </h3>
\u2022Exemplo: arquivo.cssarquivo.html
<span> é um elemento inline. Logo, ele não causará 
nenhuma quebra de linha indesejada em um texto 
que, supostamente, deva ser contínuo...
\u2022Pergunta intrigante:
\u2026mas, por que não usar <em> no html e 
no css em vez de todo este cuidado?
59
<a> e pseudo-classes
\u2022 O elemento <a> é um exemplo de elemento que admite diferentes 
estadosestados (não-clicado, clicado, mouse sobre o link, etc.\u2026)
\u2013 A folha de estilos default do browser provê uma aparência para cada estado
\u2022 É bastante comum aplicar estilos a cada um destes estados de <a>
\u2013 Use pseudopseudo--classesclasses para contemplar cada estado possível
\u2022 É possível estilizar pseudo-classes, mas elas não irão aparecer na estrutura XHTML
\u2022 O browser é que irá fazer todo o trabalho de associar o link à classe correta com 
base na interação do visitante enquanto ele usa os links (isso tudo \u201con-the-fly\u201d)
a:link { color: green; } /* link não visitado */
a:visited { color: red; } /* link já visitado */
a:hover { color: yellow; } /* mouse sobre o link */
Teste isso\u2026
60
Layout
\u2022 Os browsers posicionam elemento seguindo um fluxo padrãofluxo padrão
\u2013 A partir do topo, até a parte inferior da área visível da página, com uma quebra de linha
antes e depois de cada elemento de bloco (não flutuante) encontrado
\u2022 Por default, cada elemento de bloco irá ocupar toda a largura da área visível do navegador
\u2013 Elementos \u201cinline\u201d (ou em linha), por sua vez, fluem a partir da parte superior esquerda
do elemento de bloco até encontrar sua parte inferior direita (default)
\u2022 Elementos são capazes de flutuar (com float) sobre o fluxo padrão
\u2013 A idéia é \u201cdescolar\u201d um elemento da página podendo movê-lo para esquerda ou à direita
\u2013 Lembre-se: se, por um lado, eles não são mais \u201cenxergados\u201d pelos elementos de bloco,
por outro, elementos inline irão considerar e respeitar os seus limites
\u2022 Lembre-se: para flutuar, um elemento deve ter um id e um width
61
Layout(cont.)
\u2022 Há diversas maneiras de conceber um layout para uma página
\u2013 Pode-se usar um layout \u201clayout \u201cflexívelflexível\u201d\u201d: o conteúdo principal da página poderá
\u201ccrescer\u201d ou \u201cdiminuir\u201d, conforme a janela do navegador é redimensionada 
\u2022 Este layout possui algumas limitações (vide práticas anteriores)
\u2013 Pode-se usar um layout \u201clayout \u201cfixofixo\u201d\u201d: o tamanho do conteúdo principal da página 
não será alterado ainda que a janela do navegador seja redimensionada 
\u2022 Usa não apenas a propriedade width, mas height também
\u2022 Este layout também possui limitações, mas, atualmente, é bastante utilizado
\u2022 Não há um layout perfeito: a escolha recai no que o site deve permitir 
seu usuário fazer e o webdesigner saber ou não implementá-lo
62
Um exemplo breve\u2026
Lista de revisão para a prova\u2026ListaLista dede revisão pararevisão para aa provaprova\u2026\u2026
63
Para um melhor aproveitamento\u2026
\u2022 Ao codificar exemplos mostrados em sala, procure verificar pontos de 
dúvidas com o professor.
\u2022 Não estude apenas por slides (são apenas tópicos)!
\u2022 Mantenha em dia todas as questões das listas de listas de exercíciosexercícios e práticas e práticas 
de laboratóriode laboratório..
\u2022 Não se acanhe! Procure-me (ou monitor da disciplina, quando houver 
algum) e questione conceitos, listas, etc.
\u2022 Não deixe para começar a estudar em cima da hora.
64
Bibliografia
\u2022 DAMASCENCO, Aniele. WebdesignWebdesign Teoria e PráticaTeoria e Prática. Editora Visual Books, 2003.
\u2022 MEMÓRIA, Filipe. DesignDesign parapara InternetInternet. Editora Campus, 2005.
\u2022 NIEDERST, Jennifer. Aprenda Aprenda WebWeb DesignDesign. Editora Ciência Moderna, 2002.
\u2022 SCHMIDT, Paulo. Fundamentos de Auditoria de SistemasFundamentos de Auditoria de Sistemas. Editora Atlas, 2006.
\u2022 Artigos e materiais na Web.
	Cascading Style Sheets
	Roteiro
	O início da Web\u2026
	O início da Web(cont.)
	Um padrão de apresentação
	Sintaxe de uma regra
	Exemplo:
	Comentários
	Ligando o CSS ao XHTML
	Ligando o CSS ao XHTML(cont.)
	Anatomia de um LINK
	Um exemplo breve\u2026
	Otimizando o código CSS
	Otimizando o código CSS(cont.)
	Regras aplicadas a um mesmo seletor
	Overriding (sobreposição)
	Um meta-padrão
	Herança
	Herança(cont.)
	\u201cSobrepondo\u201d a Herança
	Herança, override, \u2026 confusão!
	Classes
	Declaração de uma classe
	Relacionando-se com classes
	Classes: conceitos avançados
	Um exemplo breve\u2026
	Validador CSS
	Uso do validador CSS
	Uso do validador CSS(cont.)
	Fontes
	Fontes(cont.)
	Fontes(cont.)
	Fontes(cont.)
	Fontes(cont.)
	Fontes(cont.)
	Fontes(cont.)
	Fontes(cont.)
	Cores
	Cores(cont.)
	Cores(cont.)
	Catálogo (uma parte\u2026) de cores na Web
	Um exemplo breve\u2026
	Box Model
	Box Model(cont.)
	Pode-se gerar várias combinações\u2026
	Bordas