CSS Hojas de Estilo en Cascada Clase 20

CSS Hojas de Estilo en Cascada
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.
Las hojas de estilo permiten separar la definición de los contenidos de la

definición de su aspecto por esta razón presenta numerosas ventajas, ya que
obliga a crear documentos HTML/XHTML bien definidos y con significado
completo (también llamados "documentos semánticos"). Además, mejora la
accesibilidad del documento, reduce la complejidad de su mantenimiento y
permite visualizar el mismo documento en infinidad de dispositivos diferentes.
Al crear una página web, se utiliza en primer lugar el 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 cada elemento dentro de la
página, etc.
Soporte de CSS en los navegadores
El trabajo del diseñador web siempre está limitado por las posibilidades de los
navegadores que utilizan los usuarios para acceder a sus páginas. Por este
motivo es imprescindible conocer el soporte de CSS en cada uno de los
navegadores más utilizados del mercado.
Internamente los navegadores están divididos en varios componentes. La parte

del navegador que se encarga de interpretar el código HTML y CSS para
mostrar las páginas se denomina motor. Desde el punto de vista del diseñador
CSS, la versión de un motor es mucho más importante que la versión del
propio navegador.
La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco
navegadores más utilizados por los usuarios:
Navegador Motor CSS 1 CSS 2.1 CSS 3
Completo Completo
Internet
Trident desde la desde la Prácticamente nulo
Explorer
versión 6.0 versión 8.0
Selectores, pseudo-
Firefox Gecko Completo Casi completo clases y algunas
propiedades
Todos los selectores,

Safari WebKit Completo Casi completo pseudo-clases y muchas
propiedades

Opera Presto Completo Casi completo pseudo-clases y muchas
propiedades

Google
WebKit Completo Casi completo pseudo-clases y muchas
Chrome
propiedades
Los navegadores Safari y Opera son los más avanzados en el soporte de CSS,
ya que incluyen muchos elementos de la futura versión CSS 3 y un soporte casi
perfecto de la actual version 2.1. El navegador Firefox no tiene un soporte tan
avanzado de CSS 3 pero las últimas versiones están alcanzando rápidamente
a Safari y Opera.
Por su parte, el navegador Internet Explorer sólo puede considerarse adecuado

desde el punto de vista de CSS a partir de su versión 7. Internet Explorer 6,
utilizado todavía por un número significativo de usuarios, sufre carencias muy
importantes y contiene decenas de errores en su soporte de CSS. Internet
Explorer 8 incluye el soporte completo de todas las propiedades y
características de CSS 2.1.
Funcionamiento básico de CSS
Antes de que se generalizara el uso de CSS, los diseñadores de páginas web

utilizaban etiquetas HTML especiales para modificar el aspecto de los
elementos de la página. El siguiente ejemplo muestra una página HTML con
estilos definidos sin utilizar CSS:
<html>
<head>
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Sistema más
importante</font></h1>
<p><font color="gray" face="Verdana" size="2">Información
importante</font></p>
</body>
</html>
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size
para definir el color, el tipo y el tamaño de letra de cada elemento de la página.
El problema de utilizar este método para definir el aspecto de los elementos se

puede ver claramente con el siguiente ejemplo: si la página tuviera 50
elementos diferentes, habría que insertar 50 etiquetas <font>. Si el sitio
web entero se compone de 10.000 páginas diferentes, habría que definir
500.000 etiquetas <font>. Como cada etiqueta <font> tiene tres atributos,
habría que definir 1.5 millones de atributos.
Como el diseño de los sitios web está en constante evolución, es habitual

modificar cada cierto tiempo el aspecto de las páginas del sitio. Siguiendo con
el ejemplo anterior, cambiar el aspecto del sitio requeriría modificar 500.000
etiquetas y 1.5 millones de atributos.
La solución que propone CSS es mucho mejor, como se puede ver en el

siguiente ejemplo:
<html>
<head>
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 {color: red; font-family: Arial; font-size: large;}
p {color: gray; font-family: Verdana; font-size: medium;}
</style>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Sistema más
importante</font></h1>
<p><font color="gray" face="Verdana" size="2">Información
importante</font></p>
</body>
</html>
CSS permite separar los contenidos de la página y la información sobre su

aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea una
zona especial en la que se incluye toda la información relacionada con los
estilos de la página.
Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y
sin contaminar el código HTML de los contenidos con etiquetas <font>. Como
se verá más adelante, la etiqueta <style> crea una zona especial donde se
incluyen todas las reglas CSS que se aplican en la página.
En el ejemplo anterior, dentro de la zona de CSS se indica que todas las

etiquetas <h1> de la página se deben ver de color rojo, con un tipo de letra
Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la página
se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de
letra medio.
Definir los estilos de esta forma ahorra miles de etiquetas y millones de

atributos respecto a la solución anterior, pero sigue sin ser una solución ideal.
Como los estilos CSS sólo se aplican en la página que los incluye, si queremos
que las 10.000 páginas diferentes del sitio tengan el mismo aspecto, se
deberían copiar 10.000 veces esas mismas reglas CSS. Más adelante se
explica la solución que propone CSS para evitar este problema.
Cómo incluir CSS en un documento HTML
Una de las principales características de CSS es su flexibilidad y las diferentes

opciones que ofrece para realizar una misma tarea. De hecho, existen tres
opciones para incluir CSS en un documento HTML.
Incluir CSS en el mismo documento HTML
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>).
<html>
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Este método 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 necesario modificar 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 <link>. Un archivo de tipo CSS
no es más que un archivo simple de texto cuya extensión es .css Se pueden
crear todos los archivos CSS que sean necesarios y cada página HTML puede
enlazar tantos archivos CSS como necesite.
Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo,
se deben seguir los siguientes pasos:
1. Se crea un archivo de texto y se le añade solamente el siguiente contenido:
{ 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
3. En la página HTML se enlaza el archivo CSS externo mediante la etiqueta
<link>:
<html>
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />
</head>
<body>
</body>
</html>
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 <link> y aplica los estilos a los contenidos de la página.
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.
De todas las formas de incluir CSS en las páginas HTML, esta es la más
utilizada con mucha diferencia. La principal ventaja es que se puede incluir un
mismo archivo CSS en multitud de páginas HTML, por lo que se garantiza la
aplicación homogénea de los mismos estilos a todas las páginas que forman un
sitio web.
Con este método, el mantenimiento del sitio web se simplifica al máximo, ya

que un solo cambio en un solo archivo CSS permite variar de forma
instantánea los estilos de todas las páginas HTML que enlazan ese archivo.
Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos

CSS externos, también se puede utilizar la etiqueta <style>.
La forma alternativa de incluir un archivo CSS externo se muestra a

continuación:
<html>
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import 'estilo.css';
</style>
</head>
<body>
</body>
</html>
En este caso, para incluir en la página HTML los estilos definidos en archivos
CSS externos se utiliza una regla especial de tipo @import. Las reglas de tipo
@import siempre preceden a cualquier otra regla CSS (con la única excepción
de la regla @charset).
La URL del archivo CSS externo se indica mediante una cadena de texto
encerrada con comillas simples o dobles o mediante la palabra reservada url().
De esta forma, las siguientes reglas @import son equivalentes:
@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");
Incluir CSS en los elementos HTML

El último método para incluir estilos CSS en documentos HTML es el menos
utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas
<font>.
<html>
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
</head>
<body>
<p style="color: red; font-family: Verdana;">Un párrafo de texto.</p>
</body>
</html>
Esta forma de incluir CSS directamente en los elementos HTML solamente se

utiliza en determinadas situaciones en las que se debe incluir un estilo muy
específico para un solo elemento concreto.

CSS Hojas de Estilo en Cascada Clase 20

Cargado por

Copyright:

Formatos disponibles

CSS Hojas de Estilo en Cascada Clase 20

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS Hojas de Estilo en Cascada Clase 20

Cargado por

Copyright:

Formatos disponibles

CSS Hojas de Estilo en Cascada

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o

Las hojas de estilo permiten separar la definición de los contenidos de la

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML

Soporte de CSS en los navegadores

Internamente los navegadores están divididos en varios componentes. La parte

Navegador Motor CSS 1 CSS 2.1 CSS 3

Todos los selectores,

Todos los selectores,

Todos los selectores,

Por su parte, el navegador Internet Explorer sólo puede considerarse adecuado

Funcionamiento básico de CSS

Antes de que se generalizara el uso de CSS, los diseñadores de páginas web

El problema de utilizar este método para definir el aspecto de los elementos se

Como el diseño de los sitios web está en constante evolución, es habitual

La solución que propone CSS es mucho mejor, como se puede ver en el

CSS permite separar los contenidos de la página y la información sobre su

En el ejemplo anterior, dentro de la zona de CSS se indica que todas las

Definir los estilos de esta forma ahorra miles de etiquetas y millones de

Cómo incluir CSS en un documento HTML

Una de las principales características de CSS es su flexibilidad y las diferentes

Incluir CSS en el mismo documento HTML

El principal inconveniente es que si se quiere hacer una modificación en los

1. Se crea un archivo de texto y se le añade solamente el siguiente contenido:

{ color: black; font-family: Verdana; }

2. Se guarda el archivo de texto con el nombre estilos.css Se debe poner

Cuando el navegador carga la página HTML anterior, antes de mostrar sus

Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un

Con este método, el mantenimiento del sitio web se simplifica al máximo, ya

Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos

La forma alternativa de incluir un archivo CSS externo se muestra a

Incluir CSS en los elementos HTML

Esta forma de incluir CSS directamente en los elementos HTML solamente se

También podría gustarte