Cómo incluir un archivo CSS en otro?

Al desarrollar proyectos extensos, es mejor crear archivos separados para HTML y CSS. Como sabemos, CSS proporciona numerosas propiedades que los desarrolladores pueden usar para hacer que las páginas web y los documentos HTML sean más estéticos. Por lo tanto, el enfoque ideal es crear múltiples archivos CSS para diferentes componentes del proyecto. Esto ayuda a los desarrolladores a buscar modificación el código específico.

Esta publicación explicará cómo agregar un archivo CSS a otro.

Cómo incorporar un archivo CSS en otro?

El CSS "@Regla de Import"Se utiliza para incorporar un archivo CSS en otro. Mira el ejemplo de una comprensión clara.

Ejemplo: incluir un archivo CSS en otro

Primero, cree tres archivos, un HTML y dos archivos CSS.

Paso 1: Crear archivo HTML

Cree un archivo HTML, "índice.html", Luego agregue el""Elemento en el""Sección como se da a continuación. Aquí "rey"El atributo se utiliza para definir la relación entre HTML y el archivo vinculado, y"href"Se usa para especificar la fuente del archivo:

En el ""Sección, realice los siguientes pasos:

• Agrega un ""Elemento y asignarlo dos clases"Contenido-Div" y "libro".
• Agregar "

  "Elemento para encabezar y"

  Elemento para crear una lista.
  • Para enumerar los elementos, agregue "
  • "Etiquetas:
  
  

  Libros

  
  
  
  
  • Alquimista
  
  
  • El Volador de cometas
  
  
  
  

  Paso 2: Crear archivo CSS

  Después de eso, crea el "principal.CSS"Archivo y agregue el siguiente código:

  .contenido-div
  Ancho: 400px;
  Altura: 300px;
  margen: auto;
  Color de fondo: RGB (245, 230, 212);
  

  El ".Contenido-Div"Se utiliza para acceder al""Elemento tiene clase nombrado como"Contenido-Div"Y las siguientes propiedades se aplican a él:

  • "ancho"Determina el ancho del elemento.
  • "altura"Ajusta la altura del elemento.
  • "margen"Genera el espacio alrededor del elemento HTML.
  • "color de fondo"Cambia el color de fondo del elemento HTML.

  Producción

  Paso 3: crear el segundo archivo CSS

  A continuación, cree un segundo archivo CSS, "libro.CSS". Luego, acceda al nombre de la segunda clase ".libro”Y asignarlo las siguientes propiedades CSS:

  .libro
  Image de fondo: url (/imágenes/hojas-.jpg);
  tamaño de fondo: cubierta;
  relleno: 15px;
  tamaño de fuente: 40px;
  Font-Weight: Bold;
  Color: RGB (243, 243, 243);
  

  Aquí:

  • "imagen de fondo"Se usa para establecer la imagen de fondo definiendo la URL de la imagen.
  • "tamaño de fondo"Especifica el tamaño de la imagen de fondo del elemento.
  • "relleno"Aplica espacio dentro del borde del elemento.
  • "tamaño de fuente"Establece el tamaño de fuente.
  • "pescado"Designa el grosor de la fuente.
  • "color"Determina el color de la fuente.

  Añade el "@importar"Regla en la parte superior del"principal.CSS" archivo:

  @Import URL (libros.CSS);

  El "@importar”Regla importa el archivo CSS a otro archivo CSS. Por ejemplo, el "libros.CSS"Está incluido en el"principal.CSS" archivo.

  La salida verifica que las propiedades CSS de ambos archivos se han aplicado correctamente:

  Hemos incluido con éxito un archivo CSS en otro.

  Conclusión

  Para incluir un archivo CSS en otro, use el CSS "@importar" regla. La regla "@Import" debe especificarse en la parte superior del archivo CSS donde desea incluir otro archivo CSS. Para vincular los archivos CSS en HTML, el ""Tag, junto con el"href"Atributo, se usa. Esta publicación ha explicado cómo incorporar un archivo CSS en otro.