Hay varias formas en que puede aplicar estilos CSS a una página web, incluidas las hojas de estilo externas o incluso los estilos en línea. Si está utilizando una hoja de estilo externa, que es la forma recomendada para dictar la apariencia de un documento HTML, un enfoque es utilizar
@importar.
los
@importar La regla le permite importantes hojas de estilo externas en su documento, ya sea en una página HTML o incluso en otros documentos CSS. Dividir muchos estilos en varios archivos más pequeños y enfocados (uno para el diseño, uno para la tipografía, uno para las imágenes, etc.) a veces puede facilitar la administración de esos archivos y los diversos estilos que contienen. Si desea disfrutar de ese beneficio, entonces la importación de esos archivos es lo que tendrá que hacer para que todos trabajen para la visualización de su página web.
Importando a HTML
Usar el
@importar regla en su HTML, usted agregaría lo siguiente a la
del documento:
:
Este código ahora importaría esta hoja de estilo para usar en esta página HTML y usted podría administrar todos sus estilos en ese archivo. La desventaja de las hojas de estilo importantes de esta manera es que este método no permite descargas paralelas. La página debe descargar una hoja de estilo completa antes de pasar al resto de la página, incluyendo cualquier otro archivo CSS que esté importando con este método. Esto tendrá un efecto negativo en la velocidad de tu página y en el rendimiento de descarga. Teniendo en cuenta lo importante que es el rendimiento de la página para el éxito del sitio web, este inconveniente solo puede ser una razón por la que desearía evitar el uso de @import.
Enfoque alternativo
Como alternativa al uso.
@importar en su HTML, puede enlazar a ese archivo CSS como este:
Esto funciona de manera muy similar a la
@importar ya que le permite administrar todo su CSS desde una ubicación / archivo central, pero este método es preferible desde una perspectiva de descarga. Si aún desea segmentar diferentes tipos de estilos en archivos separados, puede seguir haciéndolo y usar la funcionalidad @import dentro de su archivo CSS maestro. Esto significa que sus archivos CSS externos aún pueden administrarse individualmente, pero dado que todos se importan en un CSS maestro, el rendimiento mejora.
Importando a CSS
Utilizando la
el ejemplo de código anterior traería el archivo "default.css" para usar en su página HTML. Dentro de ese archivo CSS, tendrías tus varios estilos de página. Puede tener todos esos estilos detallados en esa página, o puede usar @import para separarlos para una administración más fácil. Una vez más, digamos que estamos usando 4 archivos CSS separados: uno para el diseño, uno para la tipografía y otro para las imágenes. El cuarto archivo es nuestro archivo "maestro", que es a lo que se vincula nuestra página (para este ejemplo, esto es "default.css"). En la parte superior de ese archivo CSS maestro, podemos agregar las reglas que se muestran a continuación:
@import url ('/ styles / layout.css'); @ import url ('/ styles / type.css'); @ import url ('/ styles / images.css');
Tenga en cuenta que estas reglas debe estar ante todo otro contenido en su archivo CSS para que funcionen. No puede tener ningún otro estilo CSS antes de estas reglas de importación.
Debajo de esas reglas de importación, puedes agregar cualquier otro estilo CSS que quieras tener en tu hoja predeterminada. Cuando se carga ese archivo CSS principal, primero se importarán estos archivos separados y se agregarán sus estilos a la parte superior de la hoja de estilos. Luego tendrá todos sus otros estilos debajo de estos importados, creando el archivo CSS completo que el navegador web utilizará para mostrar su sitio. Obtiene la ventaja de administrar archivos más pequeños y más enfocados mientras aún tiene una hoja de estilo única vinculada a ese HTML.
Usando @import para consultas de medios
Una cosa que puede considerar al separar las consultas de medios de su sitio web para estilos de sitios web receptivos en un archivo separado. Debido a que estos estilos de respuesta pueden ser confusos cuando se ven junto con otras reglas de estilo de su sitio, tenerlos en un archivo diferente puede ser atractivo. Una preocupación con este enfoque es que, desde su
@importar las reglas deben ser las primeras, esto significa que sus consultas de medios se cargarán antes que el resto de los estilos de su sitio. Al crear un sitio sensible al móvil que tenga en cuenta el rendimiento, es probable que esto sea un problema. Por esta razón, se sugiere que no separa los estilos de respuesta de su sitio por separado y que no use
@importar para traerlos a su sitio. Sí, puede parecer que hay beneficios de hacerlo, pero los inconvenientes superan esos beneficios.
¿Necesito usar @import?
No, no lo haces. Muchos sitios simplemente muestran todos sus estilos principales dentro de un archivo y, por muy grande que sea ese archivo, se administra de esa manera (así es como lo hago en mi propio trabajo). Si tu encuentras
@importar útil, entonces puede ser parte de su flujo de trabajo. De lo contrario, puede crear páginas web que Tu única hoja de estilo de todas tus reglas CSS.
Soporte del navegador
Muy, los navegadores muy antiguos tienen problemas con algunas de estas reglas de importación, pero es poco probable que estos navegadores sean un problema para usted en estos días. Esto es especialmente cierto ahora que ha pasado el plazo de finalización de la vida útil para versiones anteriores de Internet Explorer. En definitiva, si decides utilizar
@importar En su HTML o CSS, no debe tener problemas con las versiones heredadas de los navegadores web a menos que tenga una extraña necesidad de ser compatible con versiones increíblemente antiguas de IE.
Editado por Jeremy Girard
