Tema: Estilos CSS. Combinadores. Posicionamiento.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Tema: Estilos CSS. Combinadores. Posicionamiento."

Santiago Roldán Cordero
hace 8 años
Vistas:

1 Diseño Digital V. Guía 5 1 Tema: Estilos CSS. Combinadores. Posicionamiento. Objetivos Contenidos Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V A través del desarrollo de la guía el estudiante será capaz de estructurar una página web con HTML5 y aplicar formato y estilo con CSS. Combinadores. Propiedad Display. Posicionamento con CSS, propiedad position. Materiales y Equipo Guía 5 previamente leída. Hoja de evaluación correspondiente a la guía 5. v Un combinador es algo que explica la relación entre los selectores. Un selector de CSS puede contener más de un selector simple. Entre los selectores simples, podemos hacer que se restrinja el alcance de un selector, por ejemplo: p.aviso { padding: 20px; border: 1px solid #98be10; background: #f6feda; En el caso anterior se aplica la regla a todos los elementos <p> que contengan la clase aviso. Además hay combinadotes más complejos, los avanzados. Hay cuatro combinadores avanzados diferentes en CSS3: selector de descendiente selector de hijo selector de hermanos adyacentes selector de hermanos en general Selector Descendiente: El selector de descendiente modifica todo elemento que es descendiente de un elemento especificado. El siguiente ejemplo selecciona todos los elementos <p> dentro del elemento <div> Selector de hijo: El selector de hijo se seleccionan todos los elementos que son los hijos inmediatos de un elemento especificado. El siguiente ejemplo selecciona todos los elementos <p> que

con HTML5 y aplicar formato y estilo con CSS. Combinadores. Propiedad Display. Posicionamento con CSS, propiedad position. Materiales y Equipo Guía 5 previamente leída.

2 2 Manual de laboratorios son hijos inmediatos de un elemento <div> Selector de hermanos adyacentes: El selector de hermanos adyacentes se seleccionan todos los elementos que son los hermanos adyacentes de un elemento especificado. Elementos relacionados deben tener el mismo elemento padre, y adyacente significa inmediatamente después. El siguiente ejemplo selecciona todos los elementos <p> que se colocan inmediatamente después del elemento <div> Selector General de Hermanos: El selector de hermanos en general selecciona todos los elementos que son hermanos de un elemento especificado. El siguiente ejemplo selecciona todos los elementos <p> que son hermanos de los elementos <div> Pseudo-clases: CSS pseudo-clases se utilizan para añadir efectos especiales a algunos selectores (1). También las clases se pueden utilizar con pseudo-clases (2). (1) (2) Ejemplos (1) : /* Color del vínculo */ a:link { color: #FF0000; /* Link visitado */ a:visited { color: #00FF00; /* Ratón sobre el mouse */ a:hover { color: #FF00FF; /* Vínculo seleccionado */ a:active { color: #0000FF;

El siguiente ejemplo selecciona todos los elementos <p> que se colocan inmediatamente después del elemento <div> Selector General de Hermanos: El selector de hermanos en general selecciona todos los

3 Diseño Digital V. Guía 5 3 Ejemplos (2) : <html> <head> <style> p:first-child { color: blue; </style> </head> <body> <p>i am a strong man.</p> <p>i am a strong man.</p> </body> </html> Propiedad Display con CSS La propiedad display especifica el tipo de caja utilizada para un elemento HTML. Esta propiedad especifica el tipo de caja de representación que se usará para un elemento. En un lenguaje como el HTML donde los elementos existentes tienen un comportamiento bien definido, los valores por defecto del la propiedad display se toman de los comportamientos descritos en las especificaciones de HTML o de las hojas de estilo del navegador o el usuario. En lenguajes en los que el comportamiento de display no está definido (como XML) el valor por defecto es: inline. La propiedad display nos permite visualizar elementos de una forma específica según el valor que se aplique a la propiedad. Los valores para la propiedad display son: Valor inherit none inline block inline-block Descripción Especifica el valor de este elemento igual que el de su elemento padre. Este valor desactiva la presentación del elemento (no tiene efecto en el formato); todos los elementos hijo son escondidos de forma incondicional. El documento es representado como si el elemento y sus hijos fueran inexistentes en el árbol del documento. Para hacer que un elemento forme parte de un documento, mientras que su contenido es invisible, vea la propiedad visibility. Hace que el elemento genere uno o más elementos en la misma línea. Hace que el elemento genere una caja de bloque. Valor introducido a partir de CSS 2.1. Hace que un elemento se represente como una caja seguida de forma fluida, por un contenido, como si formase parte de la misma caja.

Esta propiedad especifica el tipo de caja de representación que se usará para un elemento.

4 4 Manual de laboratorios Posicionamiento Las propiedades de posicionamiento CSS le permite colocar un elemento dentro de la página web en una posición deseada. También se puede colocar un elemento detrás de otro, y especificar qué debe suceder cuando el contenido de un elemento es demasiado grande. Los elementos pueden ser colocados utilizando la parte superior, inferior, izquierda, y derecha, ya sea de un elemento contenedor o del navegador mismo. Sin embargo, estas propiedades no funcionarán a menos que la propiedad position se establezca en primer lugar. También trabajan de manera diferente dependiendo del método de posicionamiento. Hay cuatro métodos de posicionamiento diferentes. Estático Fijo Relativo Absoluto Posicionamiento estático Elementos HTML se colocan de forma estática por defecto. Un elemento con posición estática está siempre posicionado de acuerdo con el flujo normal de la página. Los elementos con posición estática no se ven afectados por la parte superior, inferior, izquierda, y derecha. Posicionamiento fijo Un elemento con posición fija se coloca en relación con la ventana del navegador. No se moverá incluso si la ventana se desplaza: Elementos con posicionamiento fijo se elimina del flujo normal. El documento y otros elementos se comportan como si no existe el elemento posicionado fijo. Elementos posicionados fijos pueden superponerse otros elementos. Posicionamiento relativo Un elemento posicionado relativo se posiciona en relación a su posición normal. El contenido de los elementos con posición relativa se pueden mover y superponer con otros elementos, pero el espacio reservado para el elemento aún se conserva en el flujo normal.

Los elementos pueden ser colocados utilizando la parte superior, inferior, izquierda, y derecha, ya sea de un elemento contenedor o del navegador mismo.

5 Diseño Digital V. Guía 5 5 Posicionamiento absoluto Un elemento de posición absoluta se posiciona en relación con el primer elemento de matriz que tiene una posición que no estática. Si no se encuentra dicho elemento, el bloque de contención es <html>: Los elementos con posición absoluta se eliminan del flujo normal. El documento y otros elementos se comportan como si no existe el elemento con posición absoluta. La superposición de elementos Cuando los elementos están colocados fuera del flujo normal, se pueden superponer otros elementos. La propiedad z-index especifica el orden de apilamiento de un elemento (elemento que se debe colocar delante o detrás, de los otros). Un elemento puede tener un orden de apilamiento positivo o negativo: Ejemplo utilizando la propiedad z-index con diferentes valores:

El documento y otros elementos se comportan como si no existe el elemento con posición absoluta.

6 7 Manual de laboratorios Hoja de resultados 5 NOTA FINAL: Guía 5: Estilos CSS. Combinadores. Posicionamiento. Alumno: Puesto No: EVALUACIÓN CONOCIMIENTO Optimización de Imágenes para la web, creación de recursos para la web, Adobe Firework como herramienta de edición % Nota 20% Conocimiento deficiente de los conceptos de maquetación web y estilos CSS Conocimiento y explicación incompleta de los conceptos de maquetación web y estilos CSS Conocimiento completo y explicación clara de los conceptos de maquetación web y estilos CSS APLICACIÓN DEL CONOCIMIENTO 30% No creó la hoja de estilos. No hay reglas de CSS aplicadas. Creó la hoja de estilos pero no la adjunto correctamente al HTML, o la realizó de forma interna. Las reglas CSS contienen errores de sintaxis. Creó correctamente la hoja de estilos externa y la adjunto al HTML utilizando la etiqueta adecuada y en el elemento adecuado. Creó correctamente la sintaxis de las reglas CSS 30% No posicionó los elementos correctamente. Los elementos no poseen la posición correcta. No utilizó de forma adecuada los valores de la propiedad position Utilizó correctamente la propiedad position y colocó todos los elementos de manera correcta en el contenedor ACTITUD Responsabilidad, lectura de guías de laboratorio, materiales requeridos para la práctica, bocetos 10% Materiales incompletos o no cumplen con lo requerido para la práctica. Los materiales requeridos para la práctica no están desarrollados adecuadamente o no fueron entregados puntualmente. Trajo los materiales requeridos para la práctica y fueron presentados puntualmente. 10% No tiene actitud proactiva. Actitud propositiva y con propuestas no aplicables al contenido de la guía. Tiene actitud proactiva y sus propuestas son concretas.

deficiente de los conceptos de maquetación web y estilos CSS Conocimiento y explicación incompleta de los conceptos de maquetación web y estilos CSS Conocimiento completo y explicación clara de los

Documentos relacionados

Tema: Maquetación Web y CSS

Diseño Digital V. Guía 4 1 Tema: Maquetación Web y CSS Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V Objetivos Contenidos A través del desarrollo de la guía el estudiante