MODELO 3262 IDENTIFICADOR ÚNICO DE DEPÓSITO ... - "la Caixa"
MODELO DE CAIXA (BOX MODEL) - WordPress.com · ELEMENTOS DO MODELO DE CAIXA • Conteúdo •...
Transcript of MODELO DE CAIXA (BOX MODEL) - WordPress.com · ELEMENTOS DO MODELO DE CAIXA • Conteúdo •...
-
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