Hay 4 formas de introducir CSS en HTML. Dos de ellas consisten en añadir directamente código CSS en el archivo HTML, y las otras dos consisten en importar archivos CSS externos. A continuación veremos estas formas y sus ventajas y desventajas.

Método en línea

El método en línea se refiere a agregar CSS directamente en la etiqueta HTML, en elstyleatributo style.

Ejemplo:

<div style="background: red"></div>

Esta suele ser una forma muy mala de escritura; solo puede cambiar el estilo de la etiqueta actual. Si se quiere que varios<div>tengan el mismo estilo, tienes que repetir para cada<div>uno el mismo estilo. Si quieres modificar un estilo, tienes que modificar todo el código en style. Obviamente, introducir código CSS mediante el método en línea hace que el código HTML se vuelva extenso y que la página web sea difícil de mantener.

Método embebido

El método embebido se refiere a escribir código CSS en la cabecera HTML, debajo de la etiqueta<style><style>.

Ejemplo:

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

El CSS del método embebido solo es válido para la página web actual. Debido a que el código CSS está en el archivo HTML, el código queda más concentrado, lo que suele ser ventajoso cuando escribimos páginas de plantilla. Quien revise el código de la plantilla puede ver de un vistazo tanto la estructura HTML como los estilos CSS. Como el CSS embebido solo es válido para la página actual, cuando varias páginas necesitan introducir el mismo código CSS, escribir de este modo causa redundancia de código y tampoco favorece el mantenimiento.

Método de enlace

El método de enlace se refiere a utilizar en la cabecera HTML la etiqueta<head><link> para importar archivos CSS externos.

Ejemplo:

<head>
    <link rel="stylesheet" type="text/css" href="style.css.html">
</head>

Esta es la forma más común y también la más recomendada de introducir CSS. Con este método, todo el código CSS existe solo en un archivo CSS independiente, por lo que tiene una buena mantenibilidad. Además, todo el código CSS se encuentra solo en el archivo CSS; este archivo se cargará en la primera visita, y al cambiar de página solo será necesario cargar el archivo HTML.

Método de importación

El método de importación se refiere a usar reglas CSS para importar archivos CSS externos.

Ejemplo:

<style>
    @import url(style.css);
</style>

Comparación entre el método de enlace y el método de importación

El método de enlace (en adelante, «link») y el método de importación (en adelante,@import«@import») son formas de importar archivos CSS externos. A continuación compararemos estos dos métodos y explicaremos por qué no se recomienda usar@import。

  • link. link pertenece a HTML, y a través de<link>la etiqueta <link> y su atributo href se importa el archivo externo; mientras que@import«@import» pertenece a CSS, por lo que la declaración de importación debe escribirse en el CSS. Hay que tener en cuenta que la declaración de importación debe escribirse al principio de la hoja de estilo; de lo contrario, no se puede importar correctamente el archivo externo.

  • @import«@import» es un concepto que no apareció hasta CSS 2.1, por lo que si la versión del navegador es baja, no podrá importar correctamente el archivo de estilos externo.

  • Cuando se carga el archivo HTML, los archivos referenciados por link se cargan al mismo tiempo, mientras que@import«@import» esperará a que la página se haya descargado por completo para cargarse.

Resumen: Debemos usar en la medida de lo posible<link>la etiqueta <link> para importar archivos CSS externos, evitando o utilizando menos los otros tres métodos.

Fuente del artículo: https://segmentfault.com/a/1190000003866058