Informatica

Materia: Diseño y Programación Web I
Aplicaciones de Hojas de estilo

CSS: El atributo Class

El atributo “class” de los elementos HTML te permite llamar a un código CSS en todos los elementos que queramos (Puedes usar el selector CSS otra vez y otra vez…), solo deberemos llamar a la clase, por ejemplo, tengo un código CSS así:
.verde {  
color: green;  
margin: 2px;  font-size: small;  
} 

Entonces, en un párrafo, en vez de incluir la etiqueta “style”, llamamos a la clase, mucho más organizado:

Mi párrafo  

Esto hace al código mucho más sencillo y legible.

Sin clase:
Mi párrafo  


Tutorial de CSS
Comenzando con HTML + CSS

Este breve tutorial está pensado para aquellas personas que quieren comenzar a utilizar CSS y nunca han escrito una hoja de estilos CSS.No explica mucho sobre CSS. Se centra en cómo crear un archivo HTML, un archivo CSS y cómo hacer que los dos funcionen juntos. Una vez finalizado este tutorial, podras leer cualquiera de los otros tutoriales para darle más estilo a los archivos HTML y CSS. También podras utilizar un editor de HTML o CSS, para desarrollar sitios Web más avanzados.

PASO 1: ESCRIBIR EL CÓDIGO HTML – Guardar como“principal.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í, pero todavía no sé
qué poner.


Creada el 5 de abrilde 2012
por mí mismo.




La primera línea que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE significa DOCument TYPE - en español: TIPO de DOCumento). En este caso, se trata de la versión 4.01 de HTML.
Las palabras que se encuentran entre < y > se llaman etiquetas (tags) y, como puedes ver, el documento está entre las etiquetas y . Entre y hay espacio paradiferentes tipos de información que no aparecerán en la pantalla. Hasta ahora, el documento sólo contiene el título pero posteriormente también se añadirá la hoja de estilos de CSS.
El es dónde se sitúa el texto del documento. En un principio, cualquier cosa que se coloque ahí será mostrado, excepto el texto que esté dentro de las siguientes etiquetas , las cuales muestran el contenido situado enese lugar como un comentario de referencia para nosotros mismos. El navegador la ignorará.

“ul” representa una lista con un hipervínculo por cada elemento. Esto mostrará nuestro “menú de navegación del sitio” con enlaces a otras páginas (ficticias) del sitio Web. Supuestamente, todas las páginas de nuestro sitio Web tienen un menú similar.
Los elementos “h1” y “p” componen el único contenidode esta página, mientras que la firma al final (“address”) será la misma para todas las páginas del sitio.
Observa que no he cerrado los elementos "li" y "p". En HTML (pero no en XHTML), se pueden omitir las etiquetas y , que fue lo que hice aquí, precisamente para hacer el texto más sencillo de leer. Pero si se prefiere pueden ser añadidas.
Vamos a suponer que va a ser una página de un sitioWeb que tendrán varias páginas similares. Como es frecuente en páginas Web, ésta tiene un menú con enlaces a otras páginas en el sitio ficticio, un contenido único y una firma.

PASO 2: AÑADIR ALGUNOS COLORES

Probablemente estés viendo texto negro sobre un fondo blando, pero esto depende de cómo esté tu navegador configurado. Para que la página tenga algo más de encanto podemos añadir algunoscolores. (Deja el navegador abierto, lo utilizaremos más tarde).
Comenzaremos con una hoja de estilo interna en el archivo HTML. Más adelante, pondremos el HTML y el CSS en archivos diferentes. La separación de estos archivos es recomendable ya que facilita la utilización de la misma hoja de estilo para diferentes archivos HTML: sólo tienes que escribir la hoja de estilo una vez. Pero en...