soportes CSS3 hojas de estilo externas. Esta técnica le permite definir una hoja de estilo como un documento separado y la importación en sus páginas web. Para ver por qué esto podría ser atractivo, echar un vistazo al ejemplo.

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

externalStyle.html

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 se ve etiquetas de estilo (en la cabecera), no hay un estilo. En su lugar, se ve una etiqueta. Esta etiqueta especial se utiliza para conectar el documento actual con otro documento.

¿Cómo definir el estilo externa

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

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

/ * * Miestilo.css / body {background-color: # 333300 color: # FFFFFF-} h1 {color: # FFFF33-text-align: center-fuente: cursiva 200% Fantasy-} 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 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 el CSS. A decir verdad, se puede poner comentarios en el CSS en el nivel de página. archivos CSS externos con frecuencia tienen comentarios en ellos.
El documento no tiene estilo HTML. documentos CSS contienen nada más que CSS. Esto se acerca más al objetivo 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 externa

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 utilizan varias páginas, y deben compartir una hoja de estilo común para mantener la coherencia.

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

SecondPage.html

Segunda pagina

Esta página utiliza el mismo estilo queexternalStyle.html.

hojas de estilo externas tienen algunas grandes ventajas:

Una hoja de estilo puede controlar muchas páginas: En general, usted tiene un gran número de diferentes páginas de un sitio web que comparten el mismo estilo general. Se puede definir la hoja de estilos en un solo documento y tienen todos los archivos HTML se refieren al archivo CSS.
Los cambios globales son más fáciles: Si estás usando estilos externos, se realiza un cambio en un solo lugar y se está propaga automáticamente a todas las páginas en el sistema.
Separación de contenido y diseño: Con CSS externa, todo el diseño está ubicado en el CSS, y los datos están en formato HTML.
Actualizaciones sencillas: Debido a que los parámetros de diseño de todo el sitio se definen en un archivo, se puede cambiar fácilmente el sitio sin tener que perder el tiempo con archivos HTML individuales.

La etiqueta de enlace

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

los etiqueta es parte de la página HTML. Usar una etiqueta en su documento HTML para especificar qué documento CSS será utilizado por la página HTML.
los etiqueta sólo se produce en la cabecera. A diferencia de la etiqueta, el etiqueta puede ocurrir sólo en la cabecera.
La etiqueta no tiene una presencia visual. El usuario no puede ver el etiqueta, sólo sus efectos.
los enlazar etiqueta se utiliza para relacionar el documento con otro documento. Se utiliza el etiqueta para describir la relación entre los documentos.
los etiqueta tiene una rel atributo, que define el tipo de relación. Por ahora, la única relación que va a utilizar es la hoja de estilo atributo.
los También tiene una etiqueta href atributo, que describe la ubicación de otro documento.

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

La mayoría de la gente se refiere a los hipervínculos creados por el ancla (tag) como hipervínculos o enlaces. Esto puede dar lugar 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:

Definir la hoja de estilo.
hojas de estilo externas son muy similares a los que ya conoce. Sólo hay que poner todos los estilos en un documento de texto independiente y sin las etiquetas.
Crear un enlazar elemento en la zona de la cabeza de la página HTML para definir la relación entre las páginas HTML y CSS.
Mi elemento de enlace es el siguiente:
```
 
```
Selecciona el enlazar‘S relación estableciendo el rel = “hoja de estilo”Atributo.
Honestamente, hoja de estilo es casi la única relación que va a utilizar cada vez, por lo que este debe ser automático.
Especificar el tipo de estilo de ajustando type = “text / css“.
Determinar la ubicación de la hoja de estilos con el href atributo.