Técnicas para la enseñanza de. Desarrollo Web. M is notas de CSS. Liliana Gutiérrez Flores. Enero de 2016

Transcripción

1 Técnicas para la enseñanza de Desarrollo Web M is notas de CSS. Liliana Gutiérrez Flores Enero de 2016 En el presente documento se presenta el proyecto de creación de una página Web con notas de CSS. Se dará una explicación breve de los conceptos de CSS y se propondrán ejercicios para ir desarrollando el proyecto. Al terminar los ejercicios, habremos repasado los conceptos y tengamos una referencia que podremos consultar posteriormente. Las primeras versiones de HTML incluían contenido, estructura e instrucciones de formato en un único documento; sencillo pero no muy potente. El W3C imaginó un sistema en el que las instrucciones de formato se podían guardar por separado del contenido y la estructura y poderse aplicar no solo a una párrafo o página, sino a todo un sitio. La versión 4 de HTML marcó la mayoría de los elementos de formato para eliminarlos, su uso quedaba desaconsejado. El nuevo sistema de instrucciones de formato llamado hojas de estilo en cascada, CSS (Cascading Style Sheets) en sus especificaciones originales se limitaba a recrear los efectos HTML. CSS 2 (1998) y CSS 2.1 (2006) trajeron nuevas posibilidades como la posibilidad de posicionar elementos con gran precisión.en la actualidad muchos sitios Web desarrollados en HTML5 toman ventaja de CSS3 para su estilo y presentación.

2 Ejercicio 1. En el directorio root de su servidor http, cree un nuevo documento llamado misnotascss.html con la estructura básica de un documento html. El título será Notas CSS y un encabezado con el texto Mis notas de CSS. El código se muestra a continuación. <!DOCTYPE html> <html> <head> <title>notas CSS</title> </head> <body> </body> </html> <h1>mis notas de CSS.</h1> CSS son las siglas de Cascading Style Sheets. CSS describe cómo serán desplegados los elementos HTML por el navegador. Ejercicio 2. Agregue un encabezado de nivel 2 a su documento para incluir el significado de CSS. <h2>cascading Style Sheets.</h2> Las etiquetas HTML deberán ser para describir el contenido de una página, por ejemplo <h1>esto es un encabezado</h1>, pero no para especificar el formato. Por ellos etiquetas como <font> ya no están recomendadas en HTML. Ejercicio 3. Podemos insertar estilos de tres formas, agregue una lista no ordenada para incluir en su documento estas tres formas. Utilice el siguiente código. <Podemos insertar estilos en tres formas: <ol> <li>en una etiqueta: con la el atributo style.</li> <li>en el encabezado: con la etiqueta &ltstyle&gt.</li> <li>en un archivo externo.</li> </ol> Note el uso de &lt para mostrar el menor que y &gt para mostrar el mayor que.

3 La sintaxis de una regla CSS es: selector {propiedad:valor; propiedad:valor;... Ejercicio 4. Agregue a su documento la sintaxis de una regla CSS. Utilice el siguiente código. Sintaxis de una regla CSS:<br> <pre>selector {propiedad:valor; propiedad:valor;...</pre> Note el uso de la etiqueta <pre> para insertar texto pre-formateado. Un selector es un patrón que se utiliza para seleccionar los elementos a los que se aplicara el estilo. Para aprender cómo se construyen estos patrones visite Ejercicio 5. Agregue una referencia a la página anterior. Pruebe su documento, vaya a la referencia y revisa la tabla de selectores CSS. <a href=" target="_blank">guía de selectores.</a> Ejercicio 6. Para agregar una hoja de estilos externa, agregue a su encabezado la siguiente línea. <link rel="stylesheet" type="text/css" href="miestilo.css"> Ejercicio 7. Para crear su hoja de estilos, cree el archivo miestilo.css y agregue una regla para cambiar color del fondo. body { background-color: AntiqueWhite;

4 Cuando hay más de un estilo para un elemento, primero se aplica el estilo definido en el propio elemento, posteriormente el último estilo definido en el encabezado y finalmente los valores por omisión del navegador. Ejercicio 8. Cree una segunda hoja de estilos, llame al archivo miotroestilo.css y agregue una regla para cambiar el fondo por una imagen. body { background-image: url(imagenfondo.jgp); /*background-image: url(unam.png); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; */ Cambie la referencia en el encabezado a esta nueva hoja y compruebe su resultado. Regrese la referencia a su archivo de estilo original. Ejercicio 9. Agregue un bloque a su documento con la etiqueta <div>. <div> Modelo de caja:<br> Soy una caja, tengo Content, Padding, Border y Margin. Mi fondo es lightgrey, mi ancho es 600px, mis márgenes de 25px, mi borde de 25px y mi padding de 25px.<br> Creada con &ltdiv&gt, no tengo id ni class.<br> Me aplica la regla de estilo con el selector<br> div {... </div> Agregue la siguiente regla a su hoja de estilo y verifique su resultado. div { background-color: lightgrey; width: 300px; padding: 25px; border: 25px solid navy; margin: 25px; Agregue otro bloque con cualquier contenido.

5 Ejercicio 10. Agregue un bloque a su documento con la etiqueta <div id= lgf >. <div id="lgf"> Modelo de caja:<br> Yo soy una caja creada con &ltdiv <mark>id="lgf"&gt</mark><br> Me aplica la regla de estilo con el selector<br> <mark>#lgf {...</mark> </div>pruebe su documento. Agregue una regla para el selector #lgf #lgf { background-color: lightgrey; width: 500px; padding: 15px; border: 25px solid orange; margin: 15px; Ejercicio 10. Agregue un bloque ahora con la etiqueta <div class= miclase >. <div class="miclase"> Modelo de caja:<br> Yo soy una caja creada con &ltdiv <mark>class="miclase"&gt</mark><br> Me aplica la regla de estilo con el selector<br> <mark>.miclase {...</mark> </div> Pruebe su documento. Agregue otra regla para el selector.miclase.miclase { background-color: lightgrey; width: 500px; padding: 5px; border: 5px solid orange; margin: 5px; oultine: 2px solid red;

6 Ejercicio 11. Agregue y pruebe los siguientes menús. a) Agregue 4 elementos <a>, con referencias a diferentes documentos html. Verifique que son elementos con despliegue en línea. <a href="index.html">home</a> <a href="noticias.html">noticias</a> <a href="contacto.html">contacto</a> <a href="nosotros.html">nosotros</a> b) Inserte sus elementos <a> a una lista ordenada, verifique que tanto <ul> como <li> son elementos con despliegue en bloque. <ul> <li><a href="index.html">home</a></li> <li><a href="noticias.html">noticias</a></li> <li><a href="contacto.html">contacto</a></li> <li><a href="nosotros.html">nosotros</a></li> c) Copie su lista ordenada, identifique su nueva lista con el valor uno es su atributo id; identifique cada elemento de la lista con el valor unoi. <ul id="uno"> <li id="unoi"><a href="index.html">home</a></li> <li id="unoi"><a href="noticias.html">noticias</a></li> <li id="unoi"><a href="contacto.html">contacto</a></li> <li id="unoi"><a href="nosotros.html">nosotros</a></li>

7 d) Agregue una regla de estilo para los elementos del tipo <ul> identificados con uno en su archivo de estilo. Cambie la propiedad list-style-type a none para quitar las viñetas, establezca las propiedades de padding y border a 0 para eliminar la configuración predeterminada de las listas y establezca un ancho de 90px. ul#uno{ list-style-type:none; padding:0px; border:0px; width:90px; e) Los elementos a, al estar incluido en un elemento de bloque, aparecen cada uno en diferente renglón, sin embargo siguen siendo elementos de despliegue en línea. Vamos a cambiar el tipo de despliegue a bloque para que el puntero del mouse cambie en toda el área y no sólo al pasar sobre la letra. Agregue una regla para los elementos a de la elementos li identificados por unoi, agregue la propiedad display con el valor block. También le estamos agregando un borde, alineando el texto y agregando un padding superior e inferior de 5px, para cambiar su apariencia. li#unoi a { display:block; padding-top:5px; padding-bottom:5px; border:1px solid blue;

8 f) Copie de nuevo su lista, en esta ocasión la vamos a identificar con dos y dosi para ul y li respectivamente. <ul id="dos"> <li id="dosi"><a href="index.html">home</a></li> <li id="dosi"><a href="noticias.html">noticias</a></li> <li id="dosi"><a href="contacto.html">contacto</a></li> <li id="dosi"><a href="nosotros.html">nosotros</a></li> g) Agregamos reglas de estilo para los elementos ul identificados con dos y para los elementos a de los elementos li identificados con dosi. Note que la regla ul#dos es igual que la regla ul#uno. Ahora en cambio para la regla li#dosi a estamos agregando un fondo, eliminamos la decoración de subrayado y eliminamos el borde. ul#dos{ list-style-type: none; padding: 0px; border:0px; width:90px; li#dosi a { display:block; background-color:#9999ff; padding-top:5px; padding-bottom:5px;

9 h) Ahora vamos a cambiar la apariencia de los elementos a cuando el puntero pasa sobre sobre ellos, agregue una regla li#dosi a:hover. Cambiamos el color del fondo, el color de la letra y mantenemos las propiedades de texto centrado y sin decoración. li#dosi a:hover { background-color:#cc9900; color: white; h) Para crear un nuevo menú, en esta ocasión horizontal, copie la lista e identifíquela con tres y tresi. <ul id="tres"> <li id="tresi"><a href="index.html">home</a></li> <li id="tresi"><a href="noticias.html">noticias</a></li> <li id="tresi"><a href="contacto.html">contacto</a></li> <li id="tresi"><a href="nosotros.html">nosotros</a></li> i) copie sus reglas del ejercicio dos, cambie los identificadores a tres y tresi. j) Agregue una nueva regla li# tresi, la propiedad display:inline cambiara los elementos de la lista a elementos de despliegue en línea, así no estará cada uno en diferente renglón. La Propiedad float forzará a que los elementos se vayan alineando a la izquierda. li#tresi{ display:inline; float:left;

10 k) Ya que todos los elementos de ul son flotante, ul se colapsará, agregue overflow:hidden; a ul# tres para corregir esto. Coloque también un margen de 20px. ul#tres{.. margin:20px; overflow: hidden;.. l) Cambie la regla li#tresi a, elimine el display:block y agregue float:left. Cambie también el padding para que ya no sea solo lateral sino en todos lados. La regla queda como sigue: li#tresi a { background-color:#9999ff; padding:10px; float:left; m) La regla li#tresia:hover no cambia.

11 Ejercicio 12. Agregue y pruebe el siguiente menú. <ul id="cuatro"> <li id="cuatroi"><a href="index.html">home</a></li> <li id="cuatroi"><a href="index.html">noticias</a></li> <li id="cuatroi"><a href="index.html">contacto</a></li> <li id="cuatroi"><a href="index.html">nosotros</a></li> ul#cuatro{ list-style-type: none; padding: 10px; border:3px solid #afcde3; border-radius: 5px; margin:20px; overflow: hidden; background-color:#afcde3; max-width:600px; font: 15px arial, sans-serif; li#cuatroi{ display:inline; float:left; li#cuatroi a { background-color:#9999ff; padding:10px; float:left; border:1px solid #afcde3; border-radius: 5px; li#cuatroi a:hover { background-color:#cc9900; color: white;

12 Ejercicio 13. Agregue y pruebe el siguiente menú. <ul id="dos"> <li id="dosi"><a href="index.html">home</a></li> <li id="dosi"><a href="index.html">noticias</a> <ul id="dos" > <li id="sdosi"><a href="index.html">primera</a></li> <li id="sdosi"><a href="index.html">segunda</a></li> <li id="sdosi"><a href="index.html">tercera</a></li> <li id="sdosi"><a href="index.html">cuarta</a></li> </li> <li id="dosi"><a href="index.html">contacto</a></li> <li id="dosi"><a href="index.html">nosotros</a></li> li#sdosi a { display:block; background-color:#eeeeee; padding-top:5px; padding-bottom:5px; text-shadow:5px 5px 10px red; li#sdosi a:hover { background-color:yellow; color: white;