¿Es posible incluir un archivo CSS en otro?
Sí, es posible incluir un archivo CSS en otro y se puede hacer varias veces. Además, importe varios archivos CSS en el archivo HTML principal o en el archivo CSS principal. Se puede hacer usando la palabra clave @import.
Ejemplo 1:
- Sección HTML: el nombre del archivo es index.html
html
<!DOCTYPE html> <html> <head> <!-- linking css file with html file --> <link rel="stylesheet" href="style1.css"> </head> <body> <center> <marquee><h1>GeeksforGeeks</h1> </marquee> <div class="css1">GeeksforGeeks: It is a computer science portal. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </div> </center> </body> </html>
- Salida: sin usar el archivo CSS
- CSS sección 1: el nombre del archivo es style1.css
CSS
<!-- Including one css file into other -->
@import "style2.css";
h1 {
color:green;
}
.css1 {
color:black;
background-image: linear-gradient(to right, #DFF1DF, #11A00C);
position:static;
}
- Salida: Usando el archivo style1.css sin importar el segundo archivo CSS (style2.css).
- Sección 2 de CSS: el nombre del archivo es style2.css
CSS
body {
background:black;
opacity: 0.5;
}
- Salida: después de importar el archivo style2.css al archivo style1.css usando la palabra clave @import.
Nota: Muchos archivos CSS se pueden importar usando un archivo CSS.
Ejemplo 2:
- Sección HTML: el nombre del archivo es Example.html
html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styl.css"> </head> <body> <h1>GeeksforGeeks<h1> <div include="form-input-select()"> <select required> <option value="">Example Placeholder</option> <!-- Available Options --> <option value="1">GeeksforGeeks</option> <option value="2">w3skul</option> <option value="3">tuitorial point</option> <option value="4">CodeComunity</option> <option value="5">Coders</option> </select> </div> </body> </html>
- Salida: sin usar el archivo CSS
- Sección 1 de CSS: el nombre del archivo es style1.css
CSS
@import "style2.css";
body {
border:black;
justify-content: center;
text-align: center;
}
- Salida: Usando el archivo style1.css sin importar el archivo style2.css.
- Sección 2 de CSS: el nombre del archivo es style2.css
html
h1 {
color:green;
text-decoration: underline overline;;
}
- Salida: después de usar ambos archivos CSS (estilo1 y estilo2).
Nota: Hay dos formas diferentes de importar un archivo CSS a otro usando @import url(“style2.css”); o @importar “estilo2.css”; o importe directamente cualquier archivo CSS o múltiples archivos CSS en el archivo HTML directamente dentro de <style>@import “style1.css”; o .@importar url(“style2.css”);</style> en la sección de cabecera.
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA