Modelo de formateo visual
em CSS
Conferencia 6
MSc. Yoenis Pantoja Zaldívar
Programação Web
Recordando…
fundolargura
altura
borde
recheio
margen
Atributos das caixas
Resumo
Tipos de posicionamento.
Visualização
Listas
Estrutura ou Layout
Objetivo
Caracterizar o posicionamento de
os elementos HTML através das
propriedades que brinda CSS para
condicionar o desenho e estrutura de
as páginas web.
BIBLIOGRAFÍA
EGUÍLUZ, J. Introducción a CSS [en línea]. Disponible en: http://progwebisutic.wordpress.com/bibliografia. Cap. 5.
HERNÁN, M. Programación Web Avanzada. 2007. Cap. 2, pág. 108-119.
W3C, Guía de Referencia Rápida de CSS 2.1, disponible en: <http://w3c.org>
CSS
XHTML
Funcionamento navegadores
Procesamiento
Salida
Aspectos - generação de caixas
Propriedades width e height
O tipo de cada elemento HTML – de bloco ou em linha
Posicionamento da caixa– normal, relativo, absoluto, fixo ou flotante
As relacões entre elementos
Outro tipo de informação – tamanho de imágens, tamanho da janela, etc.
Tipos de elementos HTML
Començam numa nova
linha.
Ocupam todo o espaço
disponível até o final da
linha.
Não començam em
nova linha
necesariamente.
Só ocupam o espaço
ocupado por seu
contéudo.
Elementos em
linha
Elementos de
bloco
Exemplo
Elementos mais usados
a
br
em
strong
img
input
label
select
textarea
span
legend
En linha
h1-h6
hr
p
pre
div
table
ul
ol
dl
form
fieldset
De bloco
Posicionamento (5 modelos)
position:static | relative
| absolute |
fixed
float:left | right
Normal ou estático
Relativo
Absoluto
Fixo
Flutuante
Posicionamento Normal
position: static; – Posicionamento por defecto dos elementos
em linha e os de bloco.
Posicionamento Relativo
position: relative; – Permite deslocar uma caixa com respeito a
sua posição original com as propriedades
top, right, bottom e left. As posições dos
seguintes elementos não se afectam.
Posicionamento Relativo
Posicionamento Absoluto
position: absolute;
– Permite estabelecer de forma precisa a
posição de um elemento com respeito
ao primeiro elemento pai
posicionado com as propriedades top,
right, bottom e left. As posições dos
seguintes elementos são afectadas.
Posicionamento Absoluto
Situação original:
img { position: absolute; top: 3em; left: 3em; }
¿Por que toma como refere o ecrã do navegador
e não o div?
div {position: relative; }
div { position: relative; }
Posicionamiento fijo
position: fixed;– Nos medios visuales
(como o ecrã) o
elemento é mostrado
numa posição fixa
independiente do
movimento da janela
do navegador.
Posicionamento Flotante
float: left | right;
– Consiste em posicionar o elemento
segundo o esquema normal e uma vez
colocado, movê-lo todo o possível para
a esquerda ou para a direita.
– Os elementos de bloco anteriores e
posteriores visualizam-se como se a
caixa deslocada não existisse.
Posicionamento Flotante
Posicionamento Flotante
Posicionamento Flotante
Posicionamento Flotante
Posicionamento Flotante
Posicionamento Flotante
Visualização
display
overflow
visibility
z-index
CSS define outras 4 propriedades que
controlam a visualização:
inline | block | none | … visible | hidden | …
Tarefa
Propriedades display e visibility
Tipos de display
Estilo nas listas
CSS define varias propriedades para controlar o tipo de vinheta, a posição da vinheta, etc.
A propriedad que controla o tipo de vinheta se denomina list-style-type.
Os valores que pode tomar são disc, circle , square , decimal e none entre outros.
Estilo nas listas
Vinhetas personalizadas
none: lista na que seus elementos não
contêm quadrinhos, números ou
letras.
disc, circle , square: círculo recheado,
um círculo vazio e um quadrado
recheado
• ul.ok { list-style-image: url("imagenes/ok.png"); }
• ul.flecha { list-style-image: url("imagenes/saeta.png"); }
• ul.circulo { list-style-image: url("imagenes/circle.png"); }
list-style-image
Menú a partir de lista
Menú a partir de lista
<ul>
<li><a href="#">Elemento 1</a></li>
<li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
<li><a href="#">Elemento 4</a></li>
<li><a href="#">Elemento 5</a></li>
<li><a href="#">Elemento 6</a></li>
</ul>
Menú a partir de lista
ul.menu {
list-style: none;
margin: 0;
padding: 0;
width: 180px;
}
Menú a partir de lista
ul.menu {
border: 1px solid #7C7C7C;
border-bottom: none;
list-style: none;
margin: 0;
padding: 0;
width: 180px;
}
ul.menu li {
background: #F4F4F4;
border-bottom: 1px solid #7C7C7C;
border-top: 1px solid #FFF;
}
Menú a partir de lista
ul.menu li a {
color: #333;
display: block;
padding: .2em 0 .2em .5em;
text-decoration: none;
}
Conclusões
O posicionamento com CSS permite:
Localizar elementos para conseguir um
desenho desejado.
A criação de menus (horizontais ou
verticais) a partir de listas.
Ocultar/mostrar elementos.
Definir a estrutura geral dos conteúdos
(maquetación) sem tabelas
Tarefa
Estudiar as propriedades seguintes:
clear
z-index
overflow
Modelo de formateo visual
em CSS
Conferencia 6
MSc. Yoenis Pantoja Zaldívar
Programação Web