Sabemos que hay dos formas de hacer referencia a CSS externo en páginas web, a saber: @import y link. A menudo escuchamos a la gente decir que es mejor usar un enlace para introducir CSS, pero ¿sabes por qué?
enlace
El enlace es para conectar CSS externo a páginas web. El formulario específico es.
@importar
La diferencia entre importar y vincular es que puede introducir varios otros archivos CSS en un archivo CSS. La forma específica es.
Por qué usar @import
La mayoría de la gente usa @import porque los navegadores antiguos no admiten @import, lo que significa que podemos usar @import para introducir estilos CSS que solo los navegadores modernos pueden analizar.
Utilice el siguiente código para evitar que los navegadores IE6 y anteriores analicen el CSS (los métodos siguientes a IE6 están en mal estado y se omitirán aquí)
Pantalla @import url(../style.css); Otra razón principal es cuando su página web necesita introducir varios archivos CSS externos. Puede usar un enlace para introducir un CSS y luego usar el método @import en este archivo CSS. varios otros archivos CSS. Esto parece más fácil de administrar.
¿Por qué utilizar el enlace?
Una de las razones principales para utilizar el método de enlace es que puede permitir a los usuarios cambiar de estilo CSS. Todos los navegadores modernos como Firefox, Opera y Safari admiten el atributo rel="hoja de estilo alternativa" (es decir, puede elegir diferentes estilos). en el navegador). Por supuesto, también puede utilizar Javascript para permitir que IE admita a los usuarios que cambian de estilo.
Si no lo comprende, ingrese a esta página y haga clic en "Ver - Estilo de página" en Firefox.
Pequeños problemas con @import
Si la etiqueta principal de su página web es muy simple, con solo el atributo @import, cuando el usuario navega a una velocidad lenta de Internet, verá una página sin estilos, y luego podrá ver la página a medida que se descarga el archivo CSS. . Para evitar este tipo de problemas, debe asegurarse de que haya al menos un script o etiqueta de enlace en el encabezado.
Actualización 04-11: @import alargará el tiempo de carga general de CSS y hará que el orden de descarga de archivos se cambie en IE. Por ejemplo, los archivos de script colocados después de @import se descargarán antes que CSS.
Para obtener más información, consulte http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
¿Qué método se debe utilizar?
En la actualidad, parece que el enlace es más adecuado (o más popular) para sitios web pequeños. Por supuesto, si necesitamos modularizar CSS en el futuro, definitivamente usaremos @import.