Unidad 3
Diseño con estándares web CSS
En esta unidad veremos como crear páginas web con estándares CSS, el cual se centra en el estilo y formato visual de los documentos, dejando el contenido y la semántica al lenguaje XHTML.
Las hojas de estilo CSS son el conjunto de instrucciones o reglas que definen la apariencia de los elementos de un documento XHTML, cambiando su formato de presentación, en sólo una página o en un sitio web global.
Los elementos básicos de las hojas de estilo son:
- Selector; señala que etiqueta o parte del documento se ve afectado por las reglas.
- Propiedad; indica qué aspecto va a definir o modificarse.
- Valor; contenido de la propiedad.
La suma de los dos últimos elementos (propiedad + valor) forma una declaración de estilo.
Elementos básicos de las hojas de estilo
Las hojas de estilo se pueden aplicar de tres estilos diferentes:
- Estilo en línea, dentro de una etiqueta XHTML mediante el atributo “style”. <h1 style="font-size:2em;">Título</h1>
- Estilo interno, en la cabecera de cada documento XHTML mediante la etiqueta <style>_</style> con el atributo type=”text/css”. <style type="text/css"> body { background-color:#ccdd00; } h1 { font-face:arial, verdana,sans-serif; font-size: 2em; } </style>
- Estilo externo, vincula ficheros CSS desde todas las páginas dentro de la cabecera (<head>_</head>) de los mismos. <head>___<link rel="stylesheet" type="text/css" href="mi_fichero_de_estilo.css" /> </head>
Para formar las declaraciones de estilo se pueden utilizar, recomendando el siguiente orden, las etiquetas de XHTML, los selectores ID y las clases.
A la hora de aplicarse, hay que tener en cuenta que, por orden de cascada, primero se interpretarán las reglas de una hoja de estilo externa vinculada a la página, posteriormente las reglas definidas en la cabecera del documento y por último las reglas en línea, de forma que si en este último estadio existe una definición de propiedad para un elemento que también está definido en un elemento superior, tendrá mayor importancia la declarada en última instancia en el estilo en línea.
En esta unidad se desarrollan las principales propiedades de estilo son las de bloque, de color, de fondo, de fuente, de texto y de listas. También nos enseñan a crear una hoja de estilo CSS con el editor Kompozer (Nvu).
AQUÍ podéis ver mi página web creada con este editor, utilizando los estándares XHTML y CSS.
