1 Las hojas de estilo en cascada Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal utilizado para definir la presentación.

Presentación del tema: "1 Las hojas de estilo en cascada Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal utilizado para definir la presentación."— Transcripción de la presentación:

1 1 Las hojas de estilo en cascada Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal utilizado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.

2 2 Las hojas de estilo en cascada Las Hojas de Estilo en Cascada o Cascading Style Sheets en inglés, son un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos le ofrece a los desarrolladores el control total sobre el estilo y el formato de sus documentos.

3 3 Las hojas de estilo en cascada Ventajas de utilizar CSS: Un control centralizado sobre la presentación de un sitio Web completo con lo que se agiliza de forma considerable la actualización del mismo. Primero, las CSS, al contrario que el de JavaScript u otras soluciones de cliente, no tiene problemas con los navegadores que no las soportan: el contenido se verá peor, pero se ve. El contenido y la manera en la que se muestra se separan. Es quizás la mayor ventaja, ya que elimina muchos de los problemas del HTML tradicional.

4 4 Las hojas de estilo en cascada Ventajas de utilizar CSS: El uso de CSS reduce el tamaño de las páginas agilizando la descarga. La lectura y escritura de las reglas es mucho más intuitiva que las soluciones alternativas típicas, como el uso de innumerables tablas anidadas, el tag o las imágenes transparentes y demás. Las hojas de estilo son reutilizables y permiten homogeneizar la apariencia de las páginas con una gran sencillez.

5 5 Las hojas de estilo en cascada Sintaxis de las hojas de estilo en cascada: El CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo se componen por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y una declaración. A su vez la declaración se compone de una propiedad y el valor que se le asigne. h1 {color: red;} h1 es el selector {color: red;} es la declaración

6 6 Las hojas de estilo en cascada Las tres formas más conocidas para darle estilo a un documento son las siguientes: Utilizar una hoja de estilo externa que será vinculada a un documento a través del elemento, el cual debe ir ubicado en la sección. Ejercicio_1.html: Título <link rel="stylesheet" type="text/css“ href="http://www.w3.org/css/officeFloats.css" />

7 7 Las hojas de estilo en cascada Utilizar el elemento, en el interior del documento al que se le quiere dar estilo, y que, en general, se ubicaría en la sección. De esta forma, los estilos serán reconocidos antes de que la página se cargue por completo. Ejercicio_2.htm: hoja de estilo interna body { paddingleft:11em; fontfamily:Georgia, "Times New Roman", serif; color: red; backgroundcolor:#d8da3d; } h1 { fontfamily:Helvetica, Geneva, Arial, sansserif; } Aquí se aplicará el estilo de letra para el Título

8 8 Las hojas de estilo en cascada Utilizar los estilos directamente sobre aquellos elementos que lo permiten a través del atributo dentro de. Pero este tipo de estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.

9 9 Las hojas de estilo en cascada Algunas normas básicas a la hora de crear una CSS son las siguientes: En el ejemplo presentado a continuación, h1{color: red;}, el selector,, le dice al navegador cuál es la parte del documento que se verá afectada por esa regla. Los selectores pueden aparecer de forma individual o agrupados, separándolos con comas: h1, h2, h3 { color: red; } o lo que es lo mismo h1 {color: red;} h2 {color: red;} h3 {color: red;}

10 10 Las hojas de estilo en cascada En general, una propiedad se describe por línea, de la forma presentada a continuación: h1 { paddingleft:11em; fontfamily: Georgia, "Times New Roman",Times, serif; color: red; backgroundcolor: #d8da3d; color: red; } El valor, en este caso red, establece el valor de la propiedad. Es importante tener en cuenta que si el valor está formado por más de una palabra, se debe colocar entre comillas. p {fontfamily:"sans serif";}

11 11 Las hojas de estilo en cascada Comentarios en CSS Un comentario es un texto que se le añade al código para hacerlo mas entendible a la hora de revisarlo, o de que otra persona continué con el trabajo, de esta forma se puede indicar para qué se crea cada selector, que es cada atributo... pero que a la hora de la verdad no influyen en el funcionamiento de un código. Los comentarios en CSS son como los comentarios multilínea en C, esto quiere decir que una barra inclinada hacia la derecha seguida de un asterisco (/*) para abrir, y lo mismo en orden inverso para cerrar (*/), de esta manera, se puede escribir una o varias líneas de comentario como se verá en el ejemplo presentado a continuación: input { /* Este es el nuevo estilo input */ border: 5px solid black; }

12 12 Las hojas de estilo en cascada Estilos Las hojas de estilo CSS, son una novedad del lenguaje HTML 4.0. Las mismas permiten definir una serie de estilos para luego aplicarlos a una página o, incluso, a un grupo determinado. Con las hojas de estilo CSS se puede, tanto modificar etiquetas (o TAGS) de HTML, como crear nuevos estilos.

13 13 Las hojas de estilo en cascada Estilos Un ejemplo básico: Un truco muy común, visto en muchos sitios, es hacer que los hipervínculos cambien de color al pasar con el puntero del mouse por encima. Esto se logra porque los hipervínculos se pueden definir de tres maneras: a:link: representa el estilo del link común. a:hover: representa el estilo que adquiere el link cuando se le pasa el mouse por encima. a:active: es el formato que adquiere en el momento justo en que se hace clic sobre ést. a:visited: es el estilo del link una vez que ya se ha hecho clic sobre él.

14 14 Las hojas de estilo en cascada Estilos Ejercicio_3.html: a:link{color:#3399FF;textdecoration:none} a:hover{color:orange;textdecoration:underline} a:active{color:yellow;background:black;textdecoration:overline} a:visited{color:grey;fontstyle:italic} Portal UNEG Google

15 15 Las hojas de estilo en cascada Práctica: Visualizar y Analizar los ejercicios de la carpeta unidad 1

16 16 Las hojas de estilo en cascada Capas Éstas son una división, una parte de la página, que tienen un comportamiento muy independiente dentro de la ventana del navegador, ya que se pueden colocar en cualquier parte de la misma, y se pueden mover por de forma independiente, por mencionar dos ejemplos. En el uso de capas se basan muchos de los efectos más comunes del DHTML. Para resumir, capa puede ser definido como un recuadro que puede situarse en cualquier parte de la página y donde se puede insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.

17 17 Las hojas de estilo en cascada Capas Para la creación de capas se recomienda utilizar y, ya que son principalmente estilos de CSS. Estos atributos permiten la modificación, de una forma muy exhaustiva, de la presentación de los contenidos en la página. Si se desea aplicar estilos a estas etiquetas se utiliza el atributo de HTML style, de la forma presentada a continuación:...

18 18 Las hojas de estilo en cascada Capas El elemento DIV es un elemento de nivel bloque. DIV puede contener párrafos, encabezados, tablas, y aún otras divisiones. Esto hace ideal a DIV para hacer diferentes clases de contenedores, como capítulo, resumen o nota. Ejercicio_4.html: Divisiones El elemento DIV está definido en HTML 3.2, pero solo el atributo ALIGN está permitido en HTML 3.2. HTML 4.0 agrega los atributos CLASS, STYLE e ID, entre otros. Ya que DIV puede contener otros contenedores de nivel bloque, es útil para hacer grandes secciones de un documento, como esta nota. Requiere la etiqueta de cierre.

19 19 Las hojas de estilo en cascada Capas El elemento SPAN fue introducido en HTML para permitirle a los autores dar un estilo que no pudiera estar conectado a un elemento estructural HTML. Se puede utilizar SPAN como un selector en una hoja de estilo, ya que también acepta los atributos STYLE, CLASS e ID. El SPAN es un elemento en línea, así que puede utilizarse simplemente como un elemento, tal como EM y STRONG en HTML. La gran diferencia es que mientras EM y STRONG conllevan significado estructural, SPAN no tiene tal significado. Sólo existe para la aplicación de estilos, y por lo tanto, no tiene efecto cuando la hoja de estilo se encuentra desactivada.

20 20 Las hojas de estilo en cascada Estilos Ejercicio_5.html: Esta es mi primera hoja de estilos P B{color:blue} LI B {color:red} Aqui aparece azul.... En cambio en la siguiente lista aparece... Aparece rojo....

21 21 Las hojas de estilo en cascada Bordes y Padding Ejercicio_6.html: Una enorme ventaja que nos da CSS en tablas es la capacidad de aplicar no solo distintos márgenes y bordes a cada celda, sino a cada lado de cada celda. Por ejemplo:.celda1{ border:1px dotted 5E93B5; padding: 10px; }.celda2{ border-top: 2px solid 5E93B; border-right: 1px dotted #416D89; border-left:1px dotted #416D89; border-bottom:none; padding-top:10px; padding-right:3px; padding-left:20px; padding-bottom:12px; }

22 22 Las hojas de estilo en cascada Fondos Podemos especificar muchas más propiedades para las imágenes de fondo usando CSS, por ejemplo: repeat: podemos tener una imagen que se repita solo horizontalmente, solo verticalmente, hacia ambos lados, o que no se repita. position: podemos especificar que una imagen de fondo se alinee a cualquier borde de nuestra celda o tabla. attachment: nuestra imagen puede desplazarse o quedar fija cuando hagamos scroll a la pagina. También podemos definir colores de fondo para nuestras celdas.

23 23 Las hojas de estilo en cascada Ejercicio 7:.celda1{ background-image: url(../imgs/fondo2.gif); background-position: top right; background-repeat: no-repeat; }.celda2{ background-color:#EEEEEE; }.celda3{ background-image: url(../imgs/fondo1.gif); background-repeat: repeat-x; } Fuente: http://www.manualdecss.com/codigos-css/indice-codigos.html

24 24 Las hojas de estilo en cascada Práctica: Visualizar y Analizar los ejercicios de la carpeta unidad 2

25 25 Las hojas de estilo en cascada Ejercicio: Con los conocimientos adquiridos, realice una hoja de estilos para incorporar en sistemas futuros a desarrollar.

26 26 Gracias por su Atención