Ejemplos de css 2
Ejemplos de EL LENGUAJE DE HOJAS DE ESTILO CSS 2.0 (I):
Para dar formato a la presentación nuestro sitio web debemos utilizar algún lenguaje de hojas de estilo. Una de estos lenguajes es CSS (Cascading Style Sheets) que ha sido desarrollado por el W3C y que encuentra en su versión 2.0.
- La unidad básica en CSS es la regla y esta nos permite definir cómo se debe de representar la información de uno o varios elementos HTML de nuestro documento.
- Los elementos básicos de una regla son:
- Un selector: es el nexo de unión entre la hoja de estilo y el documento HTML. Normalmente se corresponde con un elemento de HTML (p. ej. body, h1, p, table …) aunque también existen otro tipo de selectores como podrás comprobar en el documento de referencia sobre CSS que encontrarás en http://www.bib.uc3m.es/~nogales/doc/ti/ti7.html
- Una declaración de estilo: es la parte de la regla que establece las propiedades aplicables a ese elemento. Una declaración se compone de al menos una propiedad y un valor para ella y se escribe entre los símbolos “{“ y “}”. (p. ej. {color : blue}, {color : red ; text-align : center}) Para conocer las diferentes propiedad y sus posibles valores consulta el documento de referencia sobre CSS señalado anteriormente.
- Ejemplos de reglas CSS:
body {color : green }
h1 {color : red ; text-align : center }
- Cuando no especificamos ninguna información sobre como debe ser representado un elemento HTML se aplicarán los valores por defecto o iniciales para cada una de sus propiedades. Así, si no modificamos los valores de las propiedades del elemento h1, nuestro navegador nos mostrará ese elemento en Times New Roman negrita 24, alineado a la izquierda y en color negro.
CÓMO INCLUIR NORMAS DE ESTILO EN HTML:
- Podemos incluir normas de estilo en un documento HTML de dos formas diferentes:
- Dentro del elemento style de HTML cuyas etiquetas inicial y final son <style> </style>. En un documento HTML podremos tener varios elementos style pero estos siempre se encuentra dentro de la cabecera, head, del documento HTML. P.ej. :
<head>
<title>… </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="…">
<style type="text/css">
body {color : black ; background-color : #ffffcc }
a:link { color : #009900 ; }
a:visited { color : #003300 ; }
a:hover { color : #00cc00 ; }
p { text-indent : 0 ; }
</style>
</head>
- En una hoja de estilo externa: que es un documento de texto con extensión .css al que debemos hacer referencia en nuestros documentos HTML por medio de un elemento link. Link es un elemento vacío, (por lo que sólo existe etiqueta de inicio de elemento <link>), y se inserta en la cabecera HTML. El elemento link debe llevar al menos tres atributos: rel, type y href para poder especificar que será una hoja de estilo persistente (de aplicación obligatoria si está activada la opción de hojas de estilo en el navegador), el lenguaje del recurso o tipo de fichero y el URL o la ruta para acceder a la hoja de estilo. Según esto para vincular nuestro documento a una hoja de estilo externa deberíamos insertar:
<head>
<title>… </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="…">
<link rel="stylesheet" type="text/css" href="miruta/miojadestilo.css">
</head>
PRACTICA CSS
- Crea una hoja de estilo externa, utilizando el bloc de notas de Windows, para modificar la presentación del C.V. que has realizado durante las clases prácticas de HTML.
Puedes utilizar el documento Introducción al lenguaje de hojas de estilo CSS2 que encontrarás en http://www.bib.uc3m.es/~nogales/doc/ti/ti7.html , como fuente de apoyo para conocer las principales propiedades de los elementos y sus posibles valores, pero no es necesario que se utilicen todas las que aparecen en el documento.