html css

TRABAJO PRÁCTICO Nº 2 CSS
Paso 1: Escribir el código HTML



Mi primera página con estilo






Página principal
Meditaciones
Mi ciudad
Enlaces



Mi primera página con estilo

¡Bienvenido a mi primera página con estilo!

No tiene imágenes, pero tiene estilo.
También tiene enlaces, aunque no te lleven a
ningún sitio…

Debería haber más cosas aquí, perotodavía no sé
qué poner.


Creada el 13 de agosto de 2010
por mí mismo.



Paso 2: Añadir algunos colores

body {
color: purple;
background-color: #d8da3d }

La primera línea indica que hemos añadido estilo al elemento "body". La segunda línea establece el color del texto como morado y la siguiente línea lo que hace es darle al fondo una especie de amarillo verdoso.
Paso 3:Añadir tipo de letra
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }


Deberían aparecer tipos de letra diferentes para el encabezado y para el otro texto.

Paso 4: Añadir una barra de navegación
body {padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }

Deberías tener la lista de enlaces a la izquierda del texto principal. Laforma es similar a los frames que hemos aprendido en el 1° cuatrimestre.
position: absolute' indica que el elemento ul está situado independientemente de cualquier texto que esté antes o después en el documento. 'left' y 'top' indican cuál es la posición. En este caso, está a 2em de la parte de arriba de la ventana y a 1em del lado izquierdo.
'2em' significa 2 veces el tamaño del tipo de letraactual. Por ejemplo, si el menú se muestra con un tipo de letra de 12 puntos, entonces '2em' es 24 puntos. 'em' es una unidad muy útil en CSS ya que se puede adaptar automáticamente al tipo de letra que el usuario esté utilizando. La mayoría de los navegadores tienen un menú para aumentar o disminuir el tamaño de letra: puedes probarlo y ver la forma en la que el menú aumenta de tamaño a la vezque lo hace el tipo de letra, lo que no ocurriría si hubiéramos utilizado un tamaño en píxeles.

Paso 5: Dar estilo a los enlaces
El menú de navegación todavía parece una lista en lugar de un menú. Vamos a cambiar su aspecto. Quitaremos los puntos que indican los diferentes elementos de la lista y moveremos los elementos a la izquierda, donde estaban antes los puntos. También le daremos a cadaelemento un fondo blanco y un cuadrado negro. Utilizaremos el azul para aquellos enlaces que el usuario no ha visitado todavía, y morado para los enlaces que ya ha visitado:

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {color: purple }


Paso 6: Añadir una línea horizontal
El último elemento a añadir en la hoja de estilo es una regla horizontal para separar el texto de la firma que se encuentra al final. Utilizaremos 'border-top' para añadir una línea punteada encima del elemento
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;...