Hasta el momento hemos utilizado el lenguaje HTML para estructurar el contenido de nuestros sitios, ahora con las hojas de estilo podemos cambiar la apariencia de nuestras paginas asignando colores a los diferentes elementos, alineando el texto en pantalla y modificando un sin numero de características visuales de cada uno de los elementos.
Temas :
- La apariencia de las paginas web y el HTML
- Las Hojas de Estilo (CSS)
- Que es una hoja de estilo
- Creación de un archivo con la hoja de estilo
- Asignar a la pagina la hoja de estilo
- Cambiando el color de fondo de una pagina
- Espacio entre elemenos
- Margenes (margin)
- Acolchamiento (padding)
- Manejo de los Colores
- Color del Fondo
background-color: lightgray; - Color
color: lightgray;
http://www.w3.org/TR/css3-color/
Calculadora de Colores - Alineación del Texto :
- Centrar
text-align:center; - Justificar
text-align:justify; - Izquierda
text-align:left; - Derecha
text-align:right; - Decorando los enlaces :
- a:link
- a:visited
- a:hover
- a:active
- Decorando las listas :
- Listas con circulos
list-style-type: circle; - Listas con cuadrados
list-style-type: square; - Listas ordenas con numeros romanos :
list-style-type: upper-roman; - Listas ordenas con letras :
list-style-type: lower-alpha;
Actividad 05 :
- Descargar el archivo de la actividad 5
mcpw_actividad_05.zip - Ir al directorio sitio/css y abrir el archivo style.css
- Adicionar el color de fondo de la pagina :
body
{
background-color: lightgray;
} - Abrir cada archivo HTML y adicionar la definición del estilo
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head> - Hacer que las paginas estén separadas por 100 pixels del borde de la ventana
- Hacer que el contenido de los párrafos estén justificados
- Cambiar el estilo de los encabezados (h1) para que el fondo sea azul, la letra sea blanca y el texto este centrado
- Eliminar el subrayado de los enlaces
- Hacer que la lista de pregrado se visualice con un cuadrado
- Hacer que la lista de posgrado se visualice con números romanos
No hay comentarios:
Publicar un comentario