Red de conocimiento informático - Material del sitio web - Cómo hacer referencia a archivos CSS en páginas html

Cómo hacer referencia a archivos CSS en páginas html

Agregar código

En HTML, hay cuatro formas principales de introducir CSS: en línea, incrustado, importado y vinculado.

1.estilo en línea: establece el estilo CSS en el atributo de estilo de la etiqueta. Básicamente, este método no refleja las ventajas de CSS y no se recomienda.

2. Incrustar: Escríbalos en la configuración de varios elementos de la página.

3. Tipo de importación: El formato del tipo de importación es el siguiente:

ltstyle type="text/css " >>p>

@Importar "mi estilo . CSS"

lt/style gt

4. format Como sigue:

ltlink href = " my style . CSS " rel = " stylesheet " type = " text/CSS "/ gt;

Después de usar los dos últimos métodos, el efecto de visualización es ligeramente diferente, las diferencias son las siguientes:

Enlace: el archivo CSS se cargará antes de cargar la parte principal de la página, de modo que la página web mostrada tenga un efecto de estilo desde el principio ;

Importar: archivo CSS Se cargará después de que se haya cargado toda la página. Para algunos navegadores, en algunos casos, si el tamaño del archivo de la página web es relativamente grande, habrá el efecto de mostrar primero la página sin estilo, parpadear y luego configurar el estilo. Desde la perspectiva de la audiencia, este es un defecto importante.

Para algunos sitios web grandes, para facilitar el mantenimiento, es posible que desee colocar todos los estilos CSS en varios archivos CSS, por lo que si utiliza la importación de conexión, necesitará varias declaraciones para importar los archivos CSS por separado. Si desea ajustar la clasificación de los archivos CSS, debe ajustar los archivos HTML al mismo tiempo, lo cual es un inconveniente para el trabajo de mantenimiento. Si utiliza la importación, solo puede importar un archivo CSS común y luego importar otros archivos CSS independientes a este archivo. La conexión no tiene esta característica.

Así que mi consejo para usted es: si solo necesita importar un archivo CSS, use el método de conexión; si necesita importar varios archivos CSS, primero importe un archivo CSS de "directorio" a través de una conexión. y luego importe los archivos CSS de este "directorio" dentro de otros archivos CSS.

Si desea utilizar javascript para decidir dinámicamente qué archivo css importar, debe utilizar la concatenación.