Crear la hoja de estilo CSS
De la misma manera que creamos un archivo de texto separado para el HTML, creará un archivo de texto para CSS. Si necesita imágenes para este proceso, consulte el primer tutorial. Estos son los pasos para crear su hoja de estilo CSS en el Bloc de notas:
- Escoger Archivo> Nuevo en el Bloc de notas para obtener una ventana vacía
- Guarde el archivo como CSS haciendo clic en Archivo
- Navegue a la carpeta my_website en su disco duro
- Cambiar el "Guardar como tipo:" a "Todos los archivos"
- Ponle un nombre a tu archivo "styles.css"(deje las comillas) y haga clic en Ahorrar
Vincula la hoja de estilo CSS a tu HTML
Una vez que tienes un hoja de estilo para su sitio web, deberá asociarlo a la propia página web. Para hacer esto, usa la etiqueta de enlace. Coloque la siguiente etiqueta de enlace en cualquier lugar dentro del.
Corregir los márgenes de la página
Cuando estas escribiendo XHTML para diferentes navegadores, una cosa que aprenderá es que todos parecen tener diferentes márgenes y reglas sobre cómo muestran las cosas. La mejor manera de asegurarse de que su sitio tenga el mismo aspecto en la mayoría de los navegadores es no permitir que elementos como los márgenes se establezcan de forma predeterminada en la elección del navegador.
Preferimos comenzar las páginas en la esquina superior izquierda, sin relleno ni margen adicional que rodee el texto. Incluso si vamos a rellenar el contenido, establecemos los márgenes en cero para comenzar con la misma pizarra en blanco. Para hacer esto, agregue lo siguiente a su documento styles.css:
html, cuerpo {
margen: 0px;
relleno: 0px;
borde: 0px;
izquierda: 0px;
arriba: 0px;
}
Cambiar la fuente en la página
La fuente suele ser lo primero que querrá cambiar en una página web. El valor por defecto fuente en una página web puede ser feo y en realidad depende del navegador web en sí, por lo que si no define la fuente, realmente no sabe cómo se verá su página.
Normalmente, cambiaría la fuente en los párrafos o, a veces, en todo el documento. Para este sitio, definiremos la fuente a nivel de encabezado y párrafo. Agregue lo siguiente a su documento styles.css:
p, li {
fuente: 1em Arial, Helvetica, sans-serif;
}
h1 {
fuente: 2em Arial, Helvetica, sans-serif;
}
h2 {
fuente: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
fuente: 1.25em Arial, Helvetica, sans-serif;
}
Comenzamos con 1em como tamaño base para párrafos y elementos de lista y luego lo usamos para establecer el tamaño de mis titulares. No esperamos usar un título más profundo que h4, pero si lo planeas, también querrás darle estilo.
Hacer que sus enlaces sean más interesantes
Los colores predeterminados para los enlaces son azul y morado para los enlaces visitados y no visitados, respectivamente. Si bien esto es estándar, es posible que no se ajuste al esquema de color de sus páginas, así que cambiémoslo. En su archivo styles.css, agregue lo siguiente:
un enlace {
familia de fuentes: Arial, Helvetica, sans-serif;
color: # FF9900;
decoración de texto: subrayado;
}
a: visitado {
color: # FFCC66;
}
a: hover {
fondo: #FFFFCC;
font-weight: negrita;
}
Configuramos tres estilos de enlace, el enlace a: como predeterminado, a: visitado para cuando se ha visitado, cambiamos el color y a: hover. Con un: hover, el enlace obtiene un color de fondo y se pone en negrita para enfatizar que es un enlace para hacer clic.
Aplicar estilo a la sección de navegación
Ya que colocamos la sección de navegación (id = "nav") primero en el HTML, primero le damos estilo. Necesitamos indicar qué tan ancho debe ser y poner un margen más amplio en el lado derecho para que el texto principal no choque contra él. nosotros también le ponemos un borde.
Agregue el siguiente CSS a su documento styles.css:
#nav {
ancho: 225px;
margen derecho: 15px;
borde: sólido medio # 000000;
}
#nav li {
estilo de lista: ninguno;
}
.footer {
tamaño de fuente: .75em;
Limpia los dos;
ancho: 100%;
alineación de texto: centro;
}
La propiedad list-style configura la lista dentro de la sección de navegación para que no tenga viñetas ni números, y el .footer estiliza la sección de derechos de autor para que sea más pequeña y centrada dentro de la sección.
Colocación de la sección principal
Al posicionar su sección principal con posicionamiento absoluto, puede estar seguro de que permanecerá exactamente donde desea que permanezca en su página web. Lo hicimos 800px de ancho para acomodar monitores más grandes, pero si tiene un monitor más pequeño, es posible que desee hacerlo más estrecho.
Coloque lo siguiente en su documento styles.css:
#principal {
ancho: 800px;
arriba: 0px;
posición: absoluta;
izquierda: 250px;
}
Dar estilo a sus párrafos
Como ya configuré la fuente del párrafo anterior, quería darle a cada párrafo un toque extra para que se destaque mejor. Hice esto colocando un borde en la parte superior que resaltaba el párrafo más que solo la imagen.
Coloque lo siguiente en su documento styles.css:
.topline {
borde superior: sólido grueso # FFCC00;
}
Decidimos hacerlo como una clase llamada "línea superior" en lugar de simplemente definir todos los párrafos de esa manera. De esta manera, si decidimos que queremos tener un párrafo sin una línea amarilla superior, simplemente podemos dejar class = "topline" en la etiqueta del párrafo y no tendrá el borde superior.
Aplicar estilo a las imágenes
Las imágenes suelen tener un borde alrededor, esto no siempre es visible a menos que la imagen sea un enlace, pero nos gusta tener una clase dentro del Hoja de estilo CSS que desactiva el borde automáticamente. Para esta hoja de estilo, creamos la clase "noborder" y la mayoría de las imágenes del documento son parte de esta clase.
La otra parte especial de estas imágenes es su ubicación en la página. Queríamos que fueran parte del párrafo en el que estaban sin usar tablas para alinearlos. La forma más sencilla de hacer esto es usar la propiedad de CSS flotante.
Coloque lo siguiente en su documento styles.css:
#main img {
flotador izquierdo;
margen derecho: 5px;
margen inferior: 15px;
}
.Sin bordes {
borde: 0px ninguno;
}
Como puede ver, también hay propiedades de margen establecidas en las imágenes, para asegurarse de que no se rompan contra el texto flotante que está al lado de ellas en los párrafos.
Ahora mira tu página completa
Una vez que haya guardado su CSS, puede volver a cargar la página pets.htm en su navegador web. Su página debe verse similar a la que se muestra en esta imagen, con las imágenes alineadas y la navegación colocada correctamente en el lado izquierdo de la página.
Siga estos mismos pasos para todas sus páginas internas de este sitio. Quiere tener una página para cada página en su navegación.