Modelo de formateo visual em CSS

Tamanho: px

Começar a partir da página:

Download "Modelo de formateo visual em CSS"

Ana Laura Martinho da Conceição
6 Há anos
Visualizações:

1 Programação Web Modelo de formateo visual em CSS Conferencia 6 MSc. Yoenis Pantoja Zaldívar

2 Recordando Atributos das caixas largura borde margen fundo altura recheio

3 Resumo Tipos de posicionamento. Visualização Listas Estrutura ou Layout

4 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.

5 BIBLIOGRAFÍA EGUÍLUZ, J. Introducción a CSS [en línea]. Disponible en: Cap. 5. HERNÁN, M. Programación Web Avanzada Cap. 2, pág W3C, Guía de Referencia Rápida de CSS 2.1, disponible en: <

6 Funcionamento navegadores XHTML CSS Procesamiento Salida

7 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.

8 Tipos de elementos HTML Elementos em linha Não començam em nova linha necesariamente. Só ocupam o espaço ocupado por seu contéudo. Elementos de bloco Començam numa nova linha. Ocupam todo o espaço disponível até o final da linha.

9 Exemplo

10 Elementos mais usados En linha span img a input br label em select strong textarea legend De bloco div ul h1-h6 ol hr dl p form pre fieldset table

11 Posicionamento (5 modelos) Normal ou estático Relativo Absoluto Fixo Flutuante position: static relative absolute fixed float: left right

12 Posicionamento Normal position: static; Posicionamento por defecto dos elementos em linha e os de bloco.

13 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.

14 Posicionamento Relativo

15 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.

16 Posicionamento Absoluto

17 Situação original:

18 img { position: absolute; top: 3em; left: 3em; } Por que toma como refere o ecrã do navegador e não o div?

19 div { position: relative; } div {position: relative; }

20 Posicionamiento fijo position: fixed; Nos medios visuales (como o ecrã) o elemento é mostrado numa posição fixa independiente do movimento da janela do navegador.

21 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.

22 Posicionamento Flotante

23 Posicionamento Flotante

24 Posicionamento Flotante

25 Posicionamento Flotante

26 Posicionamento Flotante

27 Posicionamento Flotante

28 Visualização CSS define outras 4 propriedades que controlam a visualização: display inline block none overflow visibility visible hidden z-index Tarefa

29 Propriedades display e visibility

30 Tipos de display

31 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.

32 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

34 list-style-image 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"); }

35 Menú a partir de lista

36 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>

37 ul.menu { list-style: none; margin: 0; padding: 0; width: 180px; } Menú a partir de lista

38 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; }

39 Menú a partir de lista ul.menu li a { color: #333; display: block; padding:.2em 0.2em.5em; text-decoration: none; }

40 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

41 Tarefa Estudiar as propriedades seguintes: clear z-index overflow

42 Programação Web Modelo de formateo visual em CSS Conferencia 6 MSc. Yoenis Pantoja Zaldívar

Documentos relacionados

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com