Hojas de estilo en cascada tiene muchos beneficios. Le permiten utilizar la misma hoja de estilo en todo su sitio web. Hay dos maneras de hacer esto:
- enlazando con el elemento LINK
- importar con el comando @import
Ventajas y desventajas de las hojas de estilo externas
Una de las mejores cosas de Hojas de estilo en cascada es que puede utilizarlos para mantener la coherencia de su sitio. La forma más sencilla de hacerlo es vincular o importar una hoja de estilo externa. Si usa la misma hoja de estilo externa para cada página de su sitio, puede estar seguro de que todas las páginas tendrán la misma estilos.
Algunas de las ventajas de utilizar hojas de estilo externas incluyen que puede controlar la apariencia de varios documentos a la vez. Esto es especialmente útil si trabaja con un equipo de personas para crear su sitio web. Muchas reglas de estilo pueden ser difíciles de recordar y, si bien es posible que tenga una guía de estilo impresa, es tedioso tener para hojearlo constantemente para determinar si el texto de ejemplo debe escribirse en fuente Arial de 12 puntos o en 14 puntos Mensajero.
Puede crear clases de estilos que luego se pueden usar en muchos elementos HTML diferentes. Si a menudo usa una fuente especial Wingdings para enfatizar varias cosas en su página, puede usar Wingdings clase que configuró en su hoja de estilo para crearlos en lugar de definir un estilo específico para cada instancia de la énfasis.
Puede agrupar fácilmente sus estilos para que sea más eficiente. Todos los métodos de agrupación que están disponibles para CSS se pueden utilizar en hojas de estilo externas, y esto le proporciona más control y flexibilidad en sus páginas.
Dicho esto, también hay muy buenas razones para no utilizar hojas de estilo externas. Por un lado, pueden aumentar el tiempo de descarga si se vincula a muchos de ellos.
Cada vez que crea un nuevo archivo CSS y lo vincula o lo importa a su documento, es necesario que el navegador web realice otra llamada al servidor web para obtener el archivo. Y las llamadas al servidor ralentizan los tiempos de carga de la página.
Si solo tiene una pequeña cantidad de estilos, pueden aumentar la complejidad de su página. Debido a que los estilos no son visibles directamente en el HTML, cualquiera que vea la página debe obtener otro documento (el archivo CSS) para averiguar qué está pasando.
Cómo crear una hoja de estilo externa
Las hojas de estilo externas se escriben de la misma manera que las hojas de estilo integradas e integradas. Pero todo lo que necesitas para escribir es el estilo. selector y el declaración. No necesita un elemento o atributo de ESTILO en el documento.
Como con todos los demás CSS, la sintaxis de una regla es:
selector {propiedad: valor; }
Estas reglas se escriben en un archivo de texto con la extensión.
.css. Por ejemplo, puede nombrar su hoja de estilo.
styles.css.
Vinculación de documentos CSS
Para vincular una hoja de estilo, utilice el elemento LINK. Tiene los atributos rel y href. El atributo rel le dice al navegador lo que está vinculando (en este caso una hoja de estilo) y el atributo href contiene la ruta al archivo CSS.
También hay un tipo de atributo opcional que puede utilizar para definir el tipo MIME del documento vinculado. Esto no es necesario en HTML5, pero debe usarse en documentos HTML 4.
Aquí está el código que usaría para vincular una hoja de estilo CSS llamada styles.css:
Y en un documento HTML 4 escribirías:
type = "texto / css">
Importación de hojas de estilo CSS
Las hojas de estilo importadas se colocan dentro del elemento ESTILO. A continuación, también puede utilizar estilos incrustados si lo desea. También puede incluir estilos importados dentro de hojas de estilo vinculadas. Dentro del documento STYLE o CSS, escriba:
@import url (' http://www.yoursite.com/styles.css');