introducción a csss
TRANSCRIPT
CSS:Hoja de estilo
Las hojas de estilo representan un
avance importante para los diseñadores de páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas. En los entornos científicos en que la Web fue concebida, la gente estaba más preocupada por el contenido de sus páginas que por su presentación.
CSS fue toda una revolución en el mundo del
diseño web. Entre los beneficios concretos de CSS encontramos:
control de la presentación de muchos documentos desde una única hoja de estilo;
control más preciso de la presentación; aplicación de diferentes presentaciones a
diferentes tipos de medios (pantalla, impresión, etc.);
numerosas técnicas avanzadas y sofisticadas.
Beneficios de css
Los autores deberían usar el elemento META
para especificar el lenguaje de hojas de estilo por defecto de un documento. Por ejemplo, para especificar que el valor por defecto es CSS, los autores deberían poner la siguiente declaración en la sección HEAD de sus documentos:
<META http-equiv="Content-Style-Type" content="text/css">
Especificación del lenguaje de hojas de estilo por defecto
Necesitamos añadir un elemento <style> en
el archivo HTML. La hoja de estilo estará en el interior de ese elemento.
Añadir color
Los estilos se definen en una zona específica
del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).
Cómo incluir CSS en un documento XHTML
Ejemplo:
En este caso, todos los estilos CSS se incluyen
en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css
e deben seguir los siguientes pasos: 1) Se crea un archivo de texto y se le añade
solamente el siguiente contenido: p { color: black; font-family: Verdana; }
Definir CSS en un archivo externo
2) Se guarda el archivo de texto con el
nombre estilos.css Se debe poner especial atención a que el archivo tenga extensión .css y no .txt
3) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:
Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:
rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet
type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css
href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los medios CSS y su funcionamiento.
Ejecutada la pagina: