EL MODELO DE CAJA CSS

Transcripción

1 EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil

2 LA ETIQUETA <div> HTML

3 <DIV> La etiqueta <div> define una división o una sección en un documento HTML. La etiqueta <div> se utiliza para agrupar bloques de elementos para darles formato con CSS. La etiqueta <div> es compatible con la de los atributos globales en HTML. La etiqueta <div> es compatible con la atributos de eventos en HTML. Los atributos más utilizados con esta etiqueta son id (para identificar la sección de forma única) y class (para aplicar a la sección estilos CSS).

4 DIVISIONES COMUNES contenedor (wrapper) suele encerrar la mayor parte de los contenidos de la página y se emplea para definir las características básicas de la página: su anchura, sus bordes, imágenes laterales, si se centra o no respecto de la ventana del navegador, etc. cabecera (header) que incluye todos los elementos invariantes de la parte superior de la página (logotipo, imagen o banner, cuadro de búsqueda superior, etc.) contenido (content) engloba el contenido principal del sitio (la zona de noticias, la zona de artículos, la zona de productos, etc. dependiendo del tipo de sitio web) menu (menu) se emplea para agrupar todos los elementos del menú lateral de navegación de la página pie (footer) que incluye todos los elementos invariantes de la parte inferior de la página (aviso de copyright, política de privacidad, términos de uso, etc.) lateral (sidebar) se emplea para agrupar los elementos de las columnas laterales y secundarias de la página.

5 CSS BOX MODEL En CSS, el término Box Model se utiliza cuando se habla de diseño y maquetación. El modelo de caja CSS es esencialmente una caja que se envuelve alrededor de los elemento HTML, y se compone de: Márgenes Bordes Relleno Contenido Margen (Margin) Borde (Border) Relleno (Padding) Contenido (Content)

6 PROPIEDADES CSS

7 CSS BORDER Las propiedades CSS Border permiten especificar el estilo, tamaño y color del borde de un elemento. Propiedad border border-bottom border-bottom-color border-bottom-style border-bottom-width border-color border-left border-left-color border-left-style border-left-width Descripción Establece todas las propiedades de borde en una declaración. Establece todas las propiedades del borde inferior en una declaración. Establece el color del borde inferior. Establece el estilo del borde inferior. Establece el ancho del borde inferior. Establece el color de los cuatro bordes. Establece todas las propiedades del borde izquierdo en una declaración. Establece el color del borde izquierdo. Establece el estilo del borde izquierdo. Establece el ancho del borde izquierdo.

8 CSS BORDER Propiedad border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width Descripción Establece todas las propiedades del borde derecho en una declaración. Establece el color del borde derecho. Establece el estilo del borde derecho. Establece el ancho del borde derecho. Establece el estilo de los cuatro bordes. Establece todas las propiedades del borde superior en una declaración. Establece el color del borde superior. Establece el estilo del borde superior. Establece el ancho del borde superior. Establece el ancho de los cuatro bordes.

9 CSS OUTLINES Un esquema es una línea que se dibuja alrededor de los elementos (fuera de las fronteras) para hacer que el elemento "destaque". Las propiedades outlines especifican el estilo, el color y el ancho de un outline. Propiedad outline outline-color outline-style outline-width Descripción Establece todas las propietlinedades outline en una sola declaración. Establece el color de un outline. Establece el estilo de un outline. Establece el ancho de un outline.

10 CSS MARGIN Las propiedades CSS margin definen el espacio alrededor de los elementos. Propiedad margin margin-bottom margin-left margin-right margin-top Descripción Establece todas las propiedades de margén en una sola declaración. Establece el margen inferior de un elemento. Establece el margen izquierdo de un elemento. Establece el margen derecho de un elemento. Establece el margen superior de un elemento.

11 CSS PADDING Las propiedades CSS padding definen el espacio entre el borde del elemento y su contenido. Propiedad padding padding-bottom padding-left padding-right padding-top Descripción Establece todas las propiedades de relleno en una sola declaración. Establece la zona de relleno inferior de un elemento. Establece la zona de relleno izquierdo de un elemento. Establece la zona de relleno derecho de un elemento. Establece la zona de relleno superior de un elemento.

12 CSS DIMENSION Las propiedades CSS de dimensión permiten controlar la altura y el ancho de un elemento. Propiedad height max-height max-width min-height min-width width Descripción Establece el alto de un elemento. Establece la máxima altura de un elemento. Establece el ancho máximo de un elemento. Establece la mínima altura de un elemento. Establece el ancho mínimo de un elemento. Establece el ancho de un elemento.

13 LA PROPIEDAD DISPLAY La propiedad display especifica si/cómo se muestra un elemento. Cada elemento HTML tiene un valor de visualización predeterminado en función del tipo de elemento que es. El valor de visualización por defecto para la mayoría de los elementos es bloque (block) o en línea (inline). Elementos a nivel de bloque. Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha hasta donde pueda). Ejemplo: <div>, <h1>- <h6>, <p>, <form>, <header>, <footer>, <section> Elementos en línea. Un elemento en línea no se inicia en una nueva línea y sólo ocupa tanto el ancho como sea necesario. Ejemplo: <span>, <a>, <im>

14 LA PROPIEDAD POSITION La propiedad position especifica el tipo de método de posicionamiento utilizado para un elemento. Hay cuatro valores de posición diferentes: static relative fixed absolute Los elementos entonces se posicionan usando las propiedades top, bottom, left y right. Sin embargo, estas propiedades no funcionarán a menos que la propiedad position se establezca primero. También funcionan de forma diferente dependiendo del valor de la posición.

15 LA PROPIEDAD FLOAT Y CLEAR La propiedad float especifica si un elemento debe flotar. La propiedad clear se utiliza para controlar el comportamiento de los elementos flotantes. Si un elemento es más alto que el elemento que lo contiene, y que se hace flotar, este se desbordará fuera de su contenedor. Podemos añadir overflow: auto; al elemento contenedor para solucionar este problema.

16 By Ing. David Gil LABORATORIO 10 Maquetando con Div y CSS

17 OBJETIVOS Al finalizar este laboratorio, los estudiantes serán capaces de: Utilizar correctamente la etiqueta Div para estructurar una página web. Aplicar correctamente propiedades CSS para lograr el diseño de página propuesto. By Ing. David Gil

18 ENTREGABLES 1) Páginas del web maquetadas con Divs y CSS By Ing. David Gil