CSS Módulo V. Funcionamiento Visor Web Servidor Web Documentos Página Web Solicitud Entrega.

Presentación del tema: "CSS Módulo V. Funcionamiento Visor Web Servidor Web Documentos Página Web Solicitud Entrega."— Transcripción de la presentación:

1 CSS Módulo V

2 Funcionamiento Visor Web Servidor Web Documentos Página Web Solicitud Entrega

3 Hojas de Estilo Permiten aplicar formato a los documentos escritos en HTML separando el contenido de las páginas de su apariencia. Una hoja de estilo permite aumentar el control del diseñador sobre cómo se verán sus páginas Web, asociando un conjunto de propiedades de formato físico a los elementos estándar del lenguaje HTML. De esta forma, el resultado final que observa la persona en su visor es una mezcla entre las características predefinidas para cada comando HTML y la hoja de estilo.

4 Ventajas Alterar la presentación de cada elemento sin tocar el código HTML, ahorrando esfuerzo y tiempo de edición. El lenguaje de las CSS ofrece herramientas de composición más potentes que HTML. Se evita tener que recurrir a trucos para conseguir algunos efectos. Las hojas de estilo pueden aplicarse de varias maneras y combinarse formando una cascada de estilos con la información de cada una.

5 Características Compatibilidad hacia atrás y hacia adelante. Complementariedad con documentos estructurados. –ej., HTML y aplicaciones XML Independencia del vendedor, la plataforma y el dispositivo. Mantenibilidad. Simplicidad. Rendimiento de la red. –proporciona una compacta codificación para presentar los contenidos Flexibilidad. –pueden ser aplicadas al contenido de varias maneras Riqueza. –Proporciona a los autores un abundante juego de efectos de procesamiento Combinación con lenguajes alternativos. Accesibilidad.

6 Desventajas Soporte irregular por distintos Visores y versiones Esto puede provocar que: –Una página sea visualizada por el lector con un formato no deseado por el autor. –Algunas propiedades de las CSS puedan provocar que una parte del contenido de nuestra página resulte inaccesible desde ciertos navegadores si no son utilizadas correctamente.

7 Funcionamiento Visor Web Página HTML Abcd Bcsy Caswd Hoja de Estilo Página Web

8 Componentes Un Estilo está formado por reglas. Cada regla está constituida por un selector y un conjunto de declaraciones. Cada declaración está formada por una propiedad y un valor. Ejemplo: H1 { font-family: Arial, Sans-serif; font-size: 19pt; color: #0000FF; text-align: center; }

9 Declaración de Estilos Añadiendo declaraciones de estilo sólo a marcadores concretos o a un grupo de ellos. Incluyendo las declaraciones de estilo en el documento HTML de una página concreta, permite cambiar la apariencia de una hoja entera. Enlazando varias páginas con un archivo de estilo, de modo que se puede cambiar la apariencia de múltiples páginas modificando dicho archivo.CSS.

10 Estilos para un marcador o un grupo Se agrega el atributo STYLE a un marcador HTML. Se emplea el marcador DIV para agrupar marcadores. Por ejemplo: Un primer párrafo con las reglas del visor. Un segundo párrafo con las reglas redefinidas.

11 Estilos para un documento Se coloca el marcador en el encabezado del documento HTML. Por ejemplo: BODY { background: yellow ; font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in }

12 Estilos para varios documentos Se colocan las reglas en un archivo con la extensión.css En todas las páginas que utilizarán este estilo concreto, solamente se debe añadir el siguiente comando:

13 Cascada Para evitar conflictos entre los distintos métodos usados simultáneamente, existe un orden de preferencia –Estilo dentro de un marcador. –Bloque de estilo en el encabezado del documento HTML. –Enlace a un archivo que contiene la hoja de estilo.CSS

14 Herencia Cada página HTML está compuesta por una serie de elementos (títulos, párrafos, listas, tablas, etc.) organizados en una estructura donde cada elemento está contenido por otro elemento, que a su vez puede estar contenido por otro. En esta estructura existe un elemento raíz que es el que actúa de contenedor de todos los demás elementos. La importancia de este hecho es que cada elemento hereda las propiedades del elemento que lo contiene (llamado el elemento padre).

15 Selectores Los selectores identifican a un elemento dentro de la página Web para luego poder definir sus propiedades. Pueden ser –Selectores de Tipos –Selectores de Clases –Selectores ID –Pseudo-clases –Pseudo-elementos

16 Selector de Tipos Son los que identifican a un tipo de elemento dentro de los que conforman el código HTML. Usan la misma palabra que el marcador sin los signos. Ejemplo: H1 {text-align: center}

17 Selector de Clases El selector de clases es un punto (.) seguido por el nombre de la clase que se haya creado (el nombre lo elige uno) Ejemplo: P.pregunta {font-weight: bold; font-style: italic} A los marcadores P se les agrega el atributo CLASS dentro de la marca de la página HTML: Esta es una pregunta del reportero

18 Selector ID Son una opción para aquellos casos en que se necesite identificar de modo exclusivo un determinado elemento de la página. Los selectores de ID sólo pueden aplicarse a un elemento de la página. Se utiliza el carácter de numeral (#): Ejemplo: H1#titulo1 {text-align: center} #volanta {font-style: italic}

19 Selector de Atributos Los selectores de atributos permiten seleccionar elementos de la página según sus propiedades o el valor asignado a estas propiedades. Ejemplo: P[CLASS] {margin-left: 1cm} Ahora, si se desea seleccionar solamente aquellos párrafos que tengan el atributo CLASS="pregunta", deberá usar: P[CLASS="pregunta"] {margin-left: 1cm}

20 Selector Universal El selector universal se escribe con un asterisco (*) y representa a cualquier elemento de la página. Por ejemplo, con: * {color: red}

21 Agrupamiento Cuando se tiene varios selectores que comparten las mismas declaraciones pueden agruparse en una lista separada por comas (,). H1 {font-family: Arial, Sans-serif} #volanta {font-family: Arial, Sans-serif} Podemos simplificarlo de este modo: H1, #volanta {font-family: Arial, Sans-serif}

22 Selectores Contextuales Los selectores de descendientes permiten especificar un elemento que está contenido dentro de otro elemento. H1 EM {color: blue} Los selectores de hijos identifican a un elemento cuando es hijo de otro elemento. DIV > P {color: blue} Los selectores de hermanos adyacentes tienen una sintaxis similar a los dos anteriores, usando como combinador el signo más (+). H1 + P {text-indent: 0}

23 Pseudo-clases Las pseudo-clases no pueden deducirse simplemente observando la estructura del documento. Son abstracciones que permiten referirse a elementos que de otro modo resultarían inaccesibles. Las pseudo-clases son: :first-child :link y :visited :hover, :active y :focus :lang

24 Pseudo-elementos Son llamados pseudo-elementos porque en realidad no existen en el documento fuente (ninguna marca identifica la primer letra de un párrafo, por ejemplo) pero son muy útiles para seleccionar elementos importantes dentro de la composición. Los pseudo-elementos son: :first-line :first-letter :before y :after