Notas y ejercicios CSS.
Anuncio
Técnicas para la enseñanza de
Desarrollo Web
M is notas de C SS.
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.
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>
<h1>Mis notas de CSS.</h1>
</body>
</html>
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.
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
http://www.w3schools.com/cssref/css_selectors.asp.
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="http://www.w3schools.com/cssref/css_selectors.asp"
target="_blank">Gu&iacute;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;
}
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&aacute;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.
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;
}
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
<a
<a
<a
href="index.html">Home</a>
href="noticias.html">Noticias</a>
href="contacto.html">Contacto</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
<li><a
<li><a
<li><a
</ul>
href="index.html">Home</a></li>
href="noticias.html">Noticias</a></li>
href="contacto.html">Contacto</a></li>
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
<li id="unoi"><a
<li id="unoi"><a
<li id="unoi"><a
</ul>
href="index.html">Home</a></li>
href="noticias.html">Noticias</a></li>
href="contacto.html">Contacto</a></li>
href="nosotros.html">Nosotros</a></li>
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;
text-align:center;
padding-top:5px;
padding-bottom:5px;
border:1px solid blue;
}
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
<li id="dosi"><a
<li id="dosi"><a
<li id="dosi"><a
</ul>
href="index.html">Home</a></li>
href="noticias.html">Noticias</a></li>
href="contacto.html">Contacto</a></li>
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;
text-align:center;
text-decoration:none;
padding-top:5px;
padding-bottom:5px;
}
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;
text-align:center;
text-decoration:none;
}
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
<li id="tresi"><a
<li id="tresi"><a
<li id="tresi"><a
</ul>
href="index.html">Home</a></li>
href="noticias.html">Noticias</a></li>
href="contacto.html">Contacto</a></li>
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;
}
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;
text-align:center;
text-decoration:none;
padding:10px;
float:left;
}
m) La regla li#tresia:hover no cambia.
Ejercicio 12. Agregue y pruebe el siguiente menú.
<ul id="cuatro">
<li id="cuatroi"><a
<li id="cuatroi"><a
<li id="cuatroi"><a
<li id="cuatroi"><a
</ul>
href="index.html">Home</a></li>
href="index.html">Noticias</a></li>
href="index.html">Contacto</a></li>
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;
text-align:center;
text-decoration:none;
padding:10px;
float:left;
border:1px solid #afcde3;
border-radius: 5px;
}
li#cuatroi a:hover {
background-color:#cc9900;
color: white;
text-align:center;
text-decoration:none;
}
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
<li id="sdosi"><a
<li id="sdosi"><a
<li id="sdosi"><a
</ul>
href="index.html">Primera</a></li>
href="index.html">Segunda</a></li>
href="index.html">Tercera</a></li>
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>
</ul>
li#sdosi a {
display:block;
background-color:#EEEEEE;
text-align:center;
text-decoration:none;
padding-top:5px;
padding-bottom:5px;
text-shadow:5px 5px 10px red;
}
li#sdosi a:hover {
background-color:yellow;
color: white;
text-align:center;
text-decoration:none;
}
