CSS - Parte 3: Box Model, Bordas, Padding, Margens, Dimensionamento, Posicionamento e Float

Prévia do material em texto

CSS - Parte 3
DCC 121 – Laborato´rio de Programac¸a˜o Web
Prof. Luiz Maur´ılio da Silva Maciel
Departamento de Cieˆncia da Computac¸a˜o
Instituto de Cieˆncias Exatas
Universidade Federal de Juiz de Fora
20 de outubro de 2014
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 1 / 37
Roteiro
1 Box Model
2 Bordas
3 Padding
4 Margens
5 Dimensionamento
6 Posicionamento
7 Float
8 Alinhamento
9 Barra de navegac¸a˜o
10 Compondo seletores
11 Validac¸a˜o de arquivos
12 Exerc´ıcios
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 2 / 37
Box Model
Box Model
Elementos HTML podem ser considerados caixas
Em CSS, box model e´ essencialmente uma caixa que envolve
elementos HTML, consistindo de: margens, bordas, padding e
conteu´do
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 3 / 37
Box Model
Box Model
Elementos que compo˜em o box model :
Conteu´do: o conteu´do do elemento, onde aparecem o texto e as
imagens
Padding: a´rea livre (transparente) entre o conteu´do e a borda
Borda: a borda que envolve o conteu´do e o padding
Margem: a´rea livre (transparente) que fica do lado de fora da borda
A seguir sera´ mostrado como definir padding, bordas e margens em
CSS
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 4 / 37
Bordas
Bordas de elementos
As bordas de qualquer elemento HTML podem ser definidas pelas
propriedades border-style, border-width e border-color da forma como
foi visto na aula passada
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 5 / 37
Bordas
Bordas individuais
Pode-se definir individualmente as propriedades das bordas de cada
lado right, left, top e bottom
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 6 / 37
Padding
Padding
A propriedade padding define um espac¸o entre o conteu´do e a borda
do elemento
A a´rea do padding e´ afetada pela cor do fundo do elemento
Pode ser especificado como um tamanho fixo (em px, pt, cm etc) ou
em porcentagem do elemento
Pode-se especificar separadamente para cada lado
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 7 / 37
Padding
Padding (exemplo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 8 / 37
Margens
Margens
A propriedade margin e´ utilizada para definir espac¸o em volta dos
elementos (fora da borda)
Margens na˜o teˆm cor de fundo (sa˜o totalmente transparentes)
Podem ser especificadas como um tamanho fixo (em px, pt, cm etc),
em porcentagem da largura do elemento que o conte´m ou com o
valor auto (o navegador calcula uma margem)
Pode-se especificar separadamente para cada lado
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 9 / 37
Margens
Margens (exemplo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 10 / 37
Dimensionamento
Dimensionando elementos
As propriedades height and width sa˜o utilizadas para alterar a altura e
a largura dos elementos, respectivamente
Os valores das dimenso˜es podem ser especificados com um valor fixo
(em px, cm, pt etc), em porcentagem ou com o valor auto (o
navegador calcula a dimensa˜o)
Exemplo: arquivo HTML:
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 11 / 37
Dimensionamento
Dimensionamento (exemplo)
Arquivo CSS:
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 12 / 37
Dimensionamento
Dimensionamento
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 13 / 37
Posicionamento
Posicionamento de elementos
Propriedades de posicionamento sa˜o utilizadas para definir a posic¸a˜o
dos elementos dentro da pa´gina, permitindo organizar o layout
A propriedade position define qual me´todo sera´ utilizado para
posicionamento
Tem-se os seguintes valores para position: static (default), fixed,
relative e absolute
Uma vez definido o me´todo, define-se a posic¸a˜o dos elementos
atrave´s das propriedades left, right, top e bottom
Essas propriedades so´ tera˜o efeito se a propriedade position for definida
primeiro!
Os valores de cada posic¸a˜o podem ser especificados com um valor fixo
(em px, cm, pt etc), em porcentagem ou com o valor auto (o
navegador calcula a posic¸a˜o)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 14 / 37
Posicionamento
Posicionamento fixo
Utiliza-se o valor fixed para a propriedade position para posicionar um
elemento em uma posic¸a˜o fixa em relac¸a˜o a` janela do navegador
O elemento na˜o ira´ se mover, mesmo com a rolagem da janela
Elementos com posicionamento fixo sa˜o retirados do fluxo normal
Os demais elementos se comportam como se eles na˜o existissem
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 15 / 37
Posicionamento
Posicionamento fixo (exemplo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 16 / 37
Posicionamento
Posicionamento relativo
Utilizando o valor relative para a propriedade position, posiciona-se
um elemento em uma posic¸a˜o relativa em relac¸a˜o a sua posic¸a˜o
normal
Valores negativos podem ser utilizados, deslocando o elemento em
sentido contra´rio
O espac¸o reservado ao elemento permanece no fluxo normal
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 17 / 37
Posicionamento
Posicionamento relativo (exemplo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 18 / 37
Posicionamento
Posicionamento absoluto
Utilizando o valor absolute para a propriedade position, posiciona-se
um elemento em relac¸a˜o ao primeiro elemento pai que tem
posicionamento diferente de static. Se tal elemento na˜o existe, o
bloco pai e´ considerado o <html>
Elementos com posicionamento absoluto sa˜o retirados do fluxo normal
Os demais elementos se comportam como se eles na˜o existissem
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 19 / 37
Posicionamento
Posicionamento absoluto (exemplo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 20 / 37
Posicionamento
Sobreposic¸a˜o de elementos
Quando elementos sa˜o posicionados fora do fluxo normal eles podem
se sobrepor
A propriedade z-index e´ utilizada para definir ordem dos elementos na
pilha, ou seja, qual elemento e´ colocado na frente ou atra´s dos outros
Elementos podem ter valor negativo ou positivo de z-index
Elementos com valor maior sa˜o posicionados a` frente
Se o z-index na˜o e´ definido, elementos definidos por u´ltimo no arquivo
HTML ficam a` frente
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 21 / 37
Posicionamento
Sobreposic¸a˜o de elementos (exemplo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 22 / 37
Posicionamento
Sobreposic¸a˜o de elementos (elementos)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 23 / 37
Float
Flutuando elementos
A propriedade float e´ utilizada para colocar um elemento a` direita ou
a` esquerda (valores right ou left), permitindo que os outros elementos
sigam o fluxo ao lado dele
Um elemento flutuante ficara´ o mais a` direita ou a` esquerda poss´ıvel
dentro do elemento que o conte´m
Todos os elementos apo´s o elemento flutuante seguira˜o o fluxo ao
lado dele
Os elementos anteriores a ele na˜o sera˜o afetados
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 24 / 37
Float
Flutuando elementos (exemplo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 25 / 37
Alinhamento
Alinhando elementos
Existem diferentesformas de alinhar elementos em CSS
Por exemplo, pode-se centralizar elementos definindo as margens
direita e esquerda como auto
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 26 / 37
Alinhamento
Alinhando elementos (exemplo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 27 / 37
Alinhamento
Alinhando elementos
Pode-se alinhar elementos a` esquerda ou a` direita por meio do
posicionamento absoluto ou atrave´s da propriedade float
Para todos os alinhamentos vistos aqui, recomenda-se predefinir as
propriedades margin e padding para o elemento <body> a fim de
evitar problemas de compatibilidade de navegadores
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 28 / 37
Alinhamento
Alinhando elementos (exemplo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 29 / 37
Barra de navegac¸a˜o
Barra de Navegac¸a˜o
Nesta sec¸a˜o, veremos como criar uma barra de navegac¸a˜o (menu)
atrave´s de uma lista de links
No arquivo HTML cria-se uma lista de links:
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 30 / 37
Barra de navegac¸a˜o
Barra de Navegac¸a˜o
Na sequeˆncia, retira-se os marcadores da lista, margens e padding
A seguir, pode-se utilizar nos links a propriedade display com o valor
block para tornar toda a a´rea do link clica´vel e pode-se alterar a
largura
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 31 / 37
Barra de navegac¸a˜o
Barra de navegac¸a˜o horizontal
Temos duas formas para exibir o menu horizontalmente:
Utilizando a propriedade display com o valor inline para o elemento
<li> (links na˜o tem mesmo tamanho)
Utilizando a propriedade float para os elementos <li>. Pode-se enta˜o
definir display: block e alterar a largura dos elementos <a>
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 32 / 37
Compondo seletores
Composic¸a˜o de seletores
Podemos combinar seletores, de modo que somente os elemento
interno a um bloco seja estilizado
Exemplo 1:
#secao2 p{
align: justify;
}
Nesse caso, somente os para´grafos do bloco com id secao2 sera˜o
justificados
Exemplo 2:
.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
Nesse caso, somente os elementos <ul> dentro de elementos com class
menu sera˜o estilizados
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 33 / 37
Validac¸a˜o de arquivos
Validac¸a˜o de HTML e CSS
O W3C oferece uma ferramenta para validac¸a˜o de arquivos HTML.
Esse validador pode ser acessado aqui
Existe tambe´m uma ferramenta para validac¸a˜o de arquivos CSS. Esse
validador pode ser acessado aqui
Fica a dica: usem esses validadores nos arquivos do Trabalho 2!!!
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 34 / 37
Exerc´ıcios
Exerc´ıcio
1 Baixe o arquivo index.html do site da disciplina
2 Crie um arquivo style.css e o referencie no arquivo .html (me´todo
externo)
3 Defina as seguintes estilizac¸o˜es (somente a criac¸a˜o de divs e a
definic¸a˜o de ids e classes devem ser feitas no arquivo HTML):
Adicione uma cor de fundo para a pa´gina, altere a cor do texto e o tipo
da fonte e retire as bordas
Crie um bloco (div) com altura de 200 pixels e que ocupe toda a
largura, contendo o cabec¸alho h1 da pa´gina. Altere a cor de fundo
desse bloco.
Para o cabec¸alho h1: centralize o texto, retire as margens, altere a cor
do texto, o tamanho da fonte para 40 pt e altere a posic¸a˜o para 80
pixels abaixo da posic¸a˜o normal.
Retire as margens dos cabec¸alhos h2
Estilize o menu para que tenha a forma de uma barra horizontal. Fac¸a
com que os links fiquem diferentes ao passar o mouse sobre eles.
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 35 / 37
Exerc´ıcios
Exerc´ıcio
Crie um bloco que contenha todo o conteu´do da pa´gina (restante dos
elementos a partir do cabec¸alho “Introduc¸a˜o”). O bloco deve ter
largura de 960 pixels e ficar sempre centralizado. Adicione bordas a`
esquerda e a` direita. As bordas devera˜o ficar a 20 pixels do conteu´do.
Altere a cor de fundo do bloco.
Coloque borda na tabela (colapse as bordas)
Centralize a tabela
Fac¸a com que o conteu´do das ce´lulas de t´ıtulo da tabela fique a 5
pixels da borda superior e 10 pixels da borda inferior
Fac¸a com que o conteu´do das demais ce´lulas fique a 3 pt das bordas
direita e esquerda
Coloque a imagem flutuando a` direita e a 5 pixels do texto
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 36 / 37
Exerc´ıcios
Instruc¸o˜es para o envio dos exerc´ıcios
Crie um arquivo compactado (.zip, .rar ou .7z) contendo todos os
arquivos dos exerc´ıcios
Nomeie seu arquivo da seguinte forma:
DCC121 Tarefa7 NumeroDeMatricula NomeSobrenome.zip
Exemplo: DCC121 Tarefa7 200822017 LuizMaciel.zip
Envie para o email do professor (luiz.maurilio@ice.ufjf.br) com o
seguinte assunto: DCC121 Tarefa 7
Prazo para envio: ate´ as 23:59 de 26/10/2014 (domingo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) CSS - Parte 3 20 de outubro de 2014 37 / 37
	Box Model
	Bordas
	Padding
	Margens
	Dimensionamento
	Posicionamento
	Float
	Alinhamento
	Barra de navegação
	Compondo seletores
	Validação de arquivos
	Exercícios