MODELO DE CAIXA

(BOX MODEL)

Conferencia 5

Programação Web

MSc. Yoenis Pantoja Zaldívar

MODELO DE CAIXA (BOX MODEL)

“(…) comportamento de CSS que provoca

que todos os elementos incluidos numa

página HTML sejan representados mediante

caixas rectangulares”

EXEMPLO

ELEMENTOS DO MODELO DE CAIXA

• Conteúdo

• Relheno (padding)

• Borde (border)

• Imagen de fondo (background-image)

• Cor de fondo (background-color)

• Margen (margin)

TAREFA

Estudar a propiedade border.

Bibliografía: Epíg. 4.3 do libro Introducción a css.pdf

ELEMENTOS DO MODELO DE CAIXA

Representação tridimensional do box model de CSS

PROPIEDADES ANCHURA E ALTURA

Anchura (width) y Altura (height):

Controlan as dimensiões dos elementos.

Os valores que presentan são unidades

de medida ou percentaje (os valores em

percentaje se calculan a partir da anchura

de seu elemento pai)

PROPIEDAD MARGEN

margin-top Margen superior

margin-right Margen direito

margin-bottom Margen inferior

margin-left Margen esquerdo

EXEMPLO

div img {

margin: 20 px;

}

PROPRIEDADE RECHEIO

padding-top Recheio superior

padding-right Recheio direito

padding-bottom Recheio inferior

padding-left Recheio esquerdo

.p1 {margin: 2em;} .p2 {padding: 2em;}

EXEMPLO

EJEMPLO

div { width: 300px; padding-left: 50px; padding-

right: 50px; margin-left: 30px; margin-right: 30px;

border: 10px solid black; }

FONDOS

background-color: ( | transparent |

inherit)

background-color: #F5F5F5;

background-image: ( | none | inherit)

background-image: url ("imagenes/fondo.png");

background-repeat: (repeat | repeat-x |

repeat-y | no-repeat | inherit)

background-repeat: repeat-x;

EXEMPLO

body {

background- image:url(fondo.gif);

}

fondo.gif

EXEMPLO DE REPEAT-X

EJEMPLO DE REPEAT-Y

FONDOS

background-position: Posición de la imagende fondo.

background-position: bottom left;

background-position: right top;

background-position: 50% 50%;

background: ( || || || || ) | inherit

EXEMPLO GERAL

.prova {

}

…

…

Texto…

…

EXEMPLO

EXEMPLO

.prova {

border: 1px solid green;

}

EXEMPLO

EXEMPLO

.prova {

border: 1px solid green;

padding: 10px 50px 10px 100px;

}

EXEMPLO

EXEMPLO

.prova {

border: 1px solid green;

padding: 10px 50px 10px 100px;

margin: 30px;

}

EXEMPLO

EXEMPLO

.prova {

border: 1px solid green;

padding: 10px 50px 10px 100px;

margin: 30px;

background: #ececec url("cdr.gif")

no-repeat 10px 50%;

}

EXEMPLO

EXEMPLO

.prova {

border: 1px solid green;

padding: 10px 50px 10px 100px;

margin: 30px;

background: #ececec url("cdr.gif")

no-repeat 10px 50%;

width: 230px;

}

EXEMPLO

CONCEITO DE CASCATA

Os estilos se aplican neste orden ( em cascata):

1. El estilo definido en la propia etiqueta

con el atributo style

2. El estilo definido en la sección head

mediante la etiqueta style

3. El estilo definido en un fichero externo

4. El estilo por defecto

COLISÕES DE CSS

¿De que cor se presenta o parágrafo

seguinte?

NORMA DE ESPECIFICIDADE DE CSS

PRIORIDADE NAS DECLARACIONES CSS

CSS define a palabra reservada !important para

controlar a prioridade das declarações das

diferentes folhas de estilos.

p {

color: red !important;

color: blue;

}

CONCEITO DE HERANÇA

Aquí, p é um filho de body.

E b descende de p

• Ao definir um estilo para , éste é heredado

por

e também por .

• Ao definir um estilo para

, este é heredado por

.

CONCEITO DE HERANÇA

body {color: blue; text-decoration: underline}

This is header 1

This is header 2

This is a paragraph

, ,

han heredado los estilos definidos para

CONCEITO DE HERANÇA

body {color: blue; text-decoration: underline}

p {color: red}

This is header 1

This is header 2

This is a paragraph

tem una propriedade específica

Nova versão: CSS3

• Algumas características de CSS3:

Rellenos con gradientes

Bordes redondeados

Bordes con imágenes

Texto multicolumna

Animaciones

Efectos (sombra, resplandor, etc)

• Ainda não é estável

CONCLUSÕES

• Funcionamento de CSS.

– ¿Formas de inclusão? ¿Regras de estilos?

¿Selectores básicos?

• Elementos que compõem o modelo de

caixa.

– width, height, margin, padding, border,

background

• ¿Qué utilidad tem o CSS?

MODELO DE CAIXA

(BOX MODEL)

Conferencia 5

Programação Web

MSc. Yoenis Pantoja Zaldívar