Hojas de Estilo
El lenguaje HTML define la estructura y la semántica de los documentos y se centra, sobre todo, en el contenido.
Las HOJAS DE ESTILO son una serie de reglas que afectan a la apariencia de un documento. Estas reglas se refieren al modo en que aparecerá un documento en pantalla cuando el usuario utilice un navegador o explorador gráfico, controlando el color, el fondo, tipo de fuente, apariencia de los bordes, márgenes, alineación y espacio entre caracteres.
Las ventajas que ofrece la utilización de HOJAS DE ESTILO es que se diseñan de forma independiente al documento HTML y que se se pueden aplicar a los documentos que se desee, facilitando la consistencia y homogeneidad en el diseño y la imagen del sitio web.
Además, las hojas de estilo se pueden adecuar a los distintos medios de presentación de documentos (pantallas del ordenador, impresoras, televisiones, navegadores basados en voz, documentos en Braille...). (Fuente: http://www.hipertexto.info/documentos/css.htm )
Una de las cosas importantes que debemos tener presente cuando vayamos a utilizar CSS es el orden de prioridad de cuando se muestren los estilos:
Estilo de línea
Hojas de estilo internas
Hojas de estilo externas
Por defecto del navegador
A continuación os muestro mi primera página web y las modificaciones que he realizado en HTML y en CSS.
Modificaciones en HTML:
1. Le cambiamos el nombre a la pestaña que se nos abrirá en la red mediante la etiqueta:
<title>Sitio web de Marta</title>
2. Realizamos una llamada al fichero en CSS:
<link rel="stylesheet" type ="text/css" href="final2.css">
3. Mostramos el título con la letra más grande a través de: <h1>Sitio web de Marta</h1>
4. El menú que observamos en la parte superior, se realiza mediante el siguiente código HTML:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Sobre mi</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="http://scm-martagemaga2018.blogspot.com.es">Mi Blog</a></li>
</ul>
En este caso, he puesto el enlace a mi blog.
5. Lo que observamos en en centro de la página se realizará del siguiente modo:
</div>
<div id="mainContainer">
<div id ="content">
<h2> Proyectos </h2>
<p>Informacion acerca de los proyectos realizados</p>
<h2>Ultimos trabajos desarrollados</h2>
<p>Informacion acerca de los ultimos trabajos desarrollados</p>
</div>
6. Por último se muestra el menú que aparece a la derecha:
<h3 id="m">MENU</h3>
<ul>
<li>Proyectos</li>
<li>Curiosidades</li>
<li>+ info</li>
</ul>
Modificaciones en CSS:
1. Antes de nada, ponemos la fuente que más nos guste, en mi caso será times.
body{
font-family:times, helvetica,sans-serif;
}
2. Para poner el menú superior con un fondo tono rosa introducimos el siguiente código:
#menu{
float:left;
width:100%;
background-color:lightpink;
3. Realizamos el mismo proceso para darle más apariencia al menú mostrado a la derecha:
#sidebar {
float:right;
width:30%;
padding: 20px 0;
margin: 0;
display: inline;
background-color:#5c5b5b;
color: lightpink;
}
4. En el pie de página, se ha añadido el nombre de la asignatura con la misma combinación de colores mostrada anteriormente:
#footer {
clear:left;
background-color:#5c5b5b;
text-align:center;
padding: 1px 0;
height:1%;
color: lightpink;
}
Es importante recordar que sólamente son modificaciones de un código inicial. No es el código completo de la página. Y, que deben hacerse dos ficheros diferentes uno en HTML y otro en CSS.
Además, el código debe escribirse correctamente.
¡Espero que os sirva de ayuda y que visitéis mi página web! 👍
Comentarios
Publicar un comentario