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