Electiva I - Css

Electiva I – Internet Hojas de Estilos

Prof. Renny Batista

¿Qué es CSS?

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Al crear una página web, se utiliza en primer lugarel lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cadaelemento dentro de la página, etc.

Cómo incluir CSS en un documento XHTML

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección ).
Ejemplo de estilos CSS en el propio documento p { color: black; font‐family: Verdana; } Un párrafo de texto.Cómo incluir CSS en un documento XHTML

Este método anterior se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web. El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesariomodificar todas las páginas que incluyen el estilo que se va a modificar.

Definir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta . Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css Si se quieren incluir los estilos del ejemplo anterior en un archivo CSSexterno, se 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; }

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

Definir CSS en un archivo externo

3. En la página HTML se enlaza el archivo CSSexterno mediante la etiqueta :
Ejemplo de estilos CSS en un archivo externo Un párrafo de texto.

Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos también descarga los archivos CSS externos enlazados mediante la etiqueta y aplica los estilos a los contenidos de la página.

Definir CSS en un archivo externo

Normalmente, la etiqueta  incluye cuatroatributos cuando se enlaza un archivo CSS:
rel: indica el tipo de relación que tiene 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 contienelos 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.

Glosario básico

CSS define una serie de términos que permiten describir cada una de las partes que componen los estilosCSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:

Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada declaración puede estar formada por un número infinito de pares propiedad/valor.

Glosario básico

Los diferentes términos se definen a continuación: Regla: cada uno de los estilos que componen una...