Soportes CSS3 hojas de estilo externas.

Esta técnica le permite definir una hoja de estilo como un documento separado e importar en tus páginas web. Para ver por qué esto podría ser atractivo, eche un vistazo al ejemplo.

Cuando nos fijamos en el código de externalStyle.html, puede que se sorprenda de ver ninguna información obvia estilo en absoluto!

Estilo Externa
Esta página no tiene estilos establecidos para los párrafos, el cuerpo y encabezado 1.
Los estilos se definen en una hoja de estilos externa.

En la que normalmente ves etiquetas de estilo (en la cabecera), no hay ningún estilo. En lugar de ello, se ve una etiqueta. Esta etiqueta especial se utiliza para conectar el documento actual con otro documento.

¿Cómo definir el estilo externo

Cuando se utiliza un estilo externo, los elementos de estilo no se incrustan en el encabezado de la página, pero en un documento totalmente independientes.

En este caso, la página está conectado a un archivo especial llamado mystyle.css. Este archivo contiene todas las reglas CSS:

/ * Mystyle.css * / body {background-color: # 333300 color: # FFFFFF-} h1 {color: # FFFF33-text-align: center-font: cursiva 200% fantasía-} p {background-color: # FFFF33-color: # 333300-text-align: right; fronteriza: 3px ranura # FFFF33-}

La hoja de estilo se parece a un estilo de nivel de página, a excepción de algunas diferencias clave:

• Las reglas de hojas de estilo están contenidos en un archivo separado. El estilo ya no es parte de la página HTML, pero es un archivo completamente separada almacenada en el servidor. Archivos CSS por lo general terminan con la .css extensión.

• No existen las etiquetas. Estos no son necesarios porque el estilo ya no está incrustado en HTML.

• El código comienza con un comentario. los / * * / par indica un comentario en la CSS. A decir verdad, usted puede poner comentarios en el CSS en el nivel de página. Archivos CSS externos suelen tener comentarios en ellos.

• El documento no tiene estilo HTML. Documentos CSS contienen nada más que CSS. Esto se acerca más a la meta de separar el estilo (en el documento CSS) y el contenido (en el documento HTML).

• El documento no está ligado a ninguna página en particular. La gran ventaja de CSS externo es la reutilización. El documento CSS no es parte de cualquier página en particular, pero cualquier página puede utilizarlo.

Cómo reutilizar un estilo CSS externo

Hojas de estilo externas son muy divertido cuando se tiene más de una página que necesita el mismo estilo. La mayoría de los sitios web de hoy en día usan varias páginas, y deben compartir una hoja de estilos común para mantener la consistencia.

El código muestra la facilidad con que se hace esto:

Segunda página
Esta página usa el mismo estilo queexternalStyle.html.

Hojas de estilo externas tienen algunas ventajas enormes:

• Una hoja de estilo puede controlar muchas páginas: Por lo general, tiene un gran número de diferentes páginas de un sitio web que todos compartimos el mismo estilo general. Se puede definir la hoja de estilos en un solo documento y tener todos los archivos HTML se refieren al archivo CSS.

• Los cambios globales son más fáciles: Si usted está usando estilos externos, se realiza un cambio en un solo lugar y es propaga automáticamente a todas las páginas en el sistema.

• La separación de contenido y diseño: Con CSS externo, todo el diseño se encuentra en la CSS y los datos están en HTML.

• Actualizaciones sencillas: Debido a que los parámetros de diseño de todo el sitio se definen en un archivo, puede cambiar fácilmente el sitio sin tener que perder el tiempo con archivos HTML individuales.

La etiqueta de enlace

los tag es la clave para añadir una referencia CSS a un documento HTML. los etiqueta tiene las siguientes características:

• los tag es parte de la página HTML. Usar una etiqueta en su documento HTML para especificar qué CSS documento será utilizado por la página HTML.

• los la etiqueta sólo se produce en la cabecera. ni idea etiqueta, el etiqueta puede ocurrir sólo en el encabezado.

• La etiqueta no tiene presencia visual. El usuario no puede ver el etiqueta, sólo sus efectos.

• los enlace etiqueta se utiliza para relacionar el documento con otro documento. Se utiliza el etiquetas para describir la relación entre los documentos.

• los etiqueta tiene un rel atribuir, que define el tipo de relación. Por ahora, la única relación que vamos a usar es el hoja de estilo atribuir.

• los etiqueta también tiene un href atributo, que describe la ubicación de el otro documento.

Tags Enlace a menudo se utilizan para conectar una página de un documento estilo definido externamente.

La mayoría de las personas se refieren a los hipervínculos creados por el ancla () Etiqueta como hipervínculos o enlaces. Esto puede llevar a cierta confusión, ya que, en este sentido, la etiqueta de enlace no crea ese tipo de enlace.

Cómo especificar un enlace externo

Para utilizar el etiqueta para especificar una hoja de estilos externa, siga estos pasos:

1. Definir la hoja de estilos.

   Hojas de estilo externas son muy similares a los que usted ya conoce. Sólo hay que poner todos los estilos en un documento de texto por separado sin la y las etiquetas.

2. Crear un enlace elemento en el área de la cabeza de la página HTML para definir la relación entre las páginas HTML y CSS.

   Mi elemento de enlace se ve así:

3. Ajuste el enlace's relación estableciendo el rel = "hoja de estilo"Atributo.

   Honestamente, hoja de estilo es casi la única relación que vamos a usar nunca, por lo que este debe ser automático.

4. Especifique el tipo de estilo mediante el establecimiento de type = "text / css".

5. Determinar la ubicación de la hoja de estilos con el href atribuir.