Hojas De Estilo
Páginas: 7 (1512 palabras)
Publicado: 26 de septiembre de 2012
Hojas de Estilo
Programación Web
5 de Septiembre de 2012
Prof. Dagoberto Rodríguez Rendón
Adriana Leyva García
Hojas de Estilo
Las hojas de estilo intentan separar el contenido de una página de la forma de presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro texto.
El primer navegador en soportar hojas de estilo fueel Explorer 3.0. Utiliza la llamada sintaxis en cascada. El Communicator acepta esa sintaxis e introduce una nueva basada en JavaScript.
Tipos de hojas de estilo
Existen tres tipos de aplicación de estilos para el html, según en que contexto se usen. Estos tipos son, por orden de especificidad, las siguientes: Reglas de estilo integradas, Hojas de estilo incrustadas y Hojas de estilo externas.Las reglas integradas se aplican a un solo elemento en un documento HTML, las hojas incrustadas se aplican a todo un documento, y las hojas externas pueden aplicarse a varios documentos. Se pueden usar los tres tipos de hoja en un mismo documento, y cada uno de ellos tiene preferencia sobre los siguientes.
* Reglas de estilo integradas
Las reglas de estilo integradas son la forma máselemental de usar CSS. se trata simplemente de asignar una regla a una etiqueta HTML por medio de su atributo STYLE de la siguiente forma:
<P STYLE="color: #00ff00;">
Este párrafo (y solo este, sin afectar a los demás párrafos del documento) aparecerá en color rojo. Como puedes ver, es una forma muy simple y poco eficiente de usar CSS, ya que tendríamos que repetir la regla por cada uno de lospárrafos que queramos mostrar en ese color. Además, para poder usar este método sin tener posibles problemas de compatibilidad, deberíamos poner, en la cabecera del documento HTML (entre las etiquetas <HEAD> y </HEAD>) la siguiente declaración:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Que sirve para avisar al navegador de que el lenguaje que estamos usando en lashojas de estilo es CSS.
* Hojas de estilo incrustadas
Las hojas de estilo incrustadas se definen en la cabecera de un documento HTML, y se aplican a todo este. Para ello contamos con la instrucción <STYLE>...</STYLE>, que usaremos del siguiente modo:
<STYLE TYPE="text/css">
<!--
Reglas de estilo aquí...
...
...
-->
</STYLE>
El atributo TYPE de STYLE sirve,otra vez, para explicarle al navegador que el lenguaje que usaremos en la hoja de estilo va a ser CSS. Las etiquetas de comentarios ( <!-- --> ) se usan para evitar que los navegadores antiguos ( y que, por tanto, no reconozcan la etiqueta STYLE ) muestren el contenido de la hoja en pantalla. Entre las etiquetas de comentario es donde se indicarán las reglas de estilo tal y como ya lashemos visto. Un ejemplo de una hoja de estilo incrustada es este:
<STYLE TYPE="text/css">
<!--
IMG { vertical-align: 50%;}
P {color: #00ff00;}
A {font-family: sans-serif;}
A:link {color: #0000ee;}
A:visited {color: #551a8b;}
A:active {color: #ff0000;}
-->
</STYLE>
Que debería ir entre las etiquetas <HEAD> y </HEAD> de la página Web. Este tipo de hoja se aplicaa todo el documento, salvo que entre en contradicción con una regla de estilo integrada que, al tener preferencia, se impondría sobre esta. (Es decir, que si hemos definido un párrafo con la etiqueta <P STYLE="color: #000000;">, este aparecerá en color negro, aunque los demás sí tendrán color rojo. El atributo TYPE solo es necesario si no hemos definido el lenguaje de hojas de estilo con laetiqueta <META>, tal como vimos antes.
Otra cosa que puedes poner en las hojas incrustadas es la sentencia @import url("dirección de página"), donde "dirección de página" es la URL donde se encuentra un archivo con otra hoja de estilo, cuyas reglas se añadirán a las de esta. La clausula @import debe ir siempre la primera en una hoja de estilo, antes de cualquier regla. algunos ejemplo...
Programación Web
5 de Septiembre de 2012
Prof. Dagoberto Rodríguez Rendón
Adriana Leyva García
Hojas de Estilo
Las hojas de estilo intentan separar el contenido de una página de la forma de presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro texto.
El primer navegador en soportar hojas de estilo fueel Explorer 3.0. Utiliza la llamada sintaxis en cascada. El Communicator acepta esa sintaxis e introduce una nueva basada en JavaScript.
Tipos de hojas de estilo
Existen tres tipos de aplicación de estilos para el html, según en que contexto se usen. Estos tipos son, por orden de especificidad, las siguientes: Reglas de estilo integradas, Hojas de estilo incrustadas y Hojas de estilo externas.Las reglas integradas se aplican a un solo elemento en un documento HTML, las hojas incrustadas se aplican a todo un documento, y las hojas externas pueden aplicarse a varios documentos. Se pueden usar los tres tipos de hoja en un mismo documento, y cada uno de ellos tiene preferencia sobre los siguientes.
* Reglas de estilo integradas
Las reglas de estilo integradas son la forma máselemental de usar CSS. se trata simplemente de asignar una regla a una etiqueta HTML por medio de su atributo STYLE de la siguiente forma:
<P STYLE="color: #00ff00;">
Este párrafo (y solo este, sin afectar a los demás párrafos del documento) aparecerá en color rojo. Como puedes ver, es una forma muy simple y poco eficiente de usar CSS, ya que tendríamos que repetir la regla por cada uno de lospárrafos que queramos mostrar en ese color. Además, para poder usar este método sin tener posibles problemas de compatibilidad, deberíamos poner, en la cabecera del documento HTML (entre las etiquetas <HEAD> y </HEAD>) la siguiente declaración:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Que sirve para avisar al navegador de que el lenguaje que estamos usando en lashojas de estilo es CSS.
* Hojas de estilo incrustadas
Las hojas de estilo incrustadas se definen en la cabecera de un documento HTML, y se aplican a todo este. Para ello contamos con la instrucción <STYLE>...</STYLE>, que usaremos del siguiente modo:
<STYLE TYPE="text/css">
<!--
Reglas de estilo aquí...
...
...
-->
</STYLE>
El atributo TYPE de STYLE sirve,otra vez, para explicarle al navegador que el lenguaje que usaremos en la hoja de estilo va a ser CSS. Las etiquetas de comentarios ( <!-- --> ) se usan para evitar que los navegadores antiguos ( y que, por tanto, no reconozcan la etiqueta STYLE ) muestren el contenido de la hoja en pantalla. Entre las etiquetas de comentario es donde se indicarán las reglas de estilo tal y como ya lashemos visto. Un ejemplo de una hoja de estilo incrustada es este:
<STYLE TYPE="text/css">
<!--
IMG { vertical-align: 50%;}
P {color: #00ff00;}
A {font-family: sans-serif;}
A:link {color: #0000ee;}
A:visited {color: #551a8b;}
A:active {color: #ff0000;}
-->
</STYLE>
Que debería ir entre las etiquetas <HEAD> y </HEAD> de la página Web. Este tipo de hoja se aplicaa todo el documento, salvo que entre en contradicción con una regla de estilo integrada que, al tener preferencia, se impondría sobre esta. (Es decir, que si hemos definido un párrafo con la etiqueta <P STYLE="color: #000000;">, este aparecerá en color negro, aunque los demás sí tendrán color rojo. El atributo TYPE solo es necesario si no hemos definido el lenguaje de hojas de estilo con laetiqueta <META>, tal como vimos antes.
Otra cosa que puedes poner en las hojas incrustadas es la sentencia @import url("dirección de página"), donde "dirección de página" es la URL donde se encuentra un archivo con otra hoja de estilo, cuyas reglas se añadirán a las de esta. La clausula @import debe ir siempre la primera en una hoja de estilo, antes de cualquier regla. algunos ejemplo...
Leer documento completo
Regístrate para leer el documento completo.