La regla @import se usa para importar una hoja de estilo a otra hoja de estilo. Esta regla también admite consultas de medios para que el usuario pueda importar la hoja de estilo dependiente de los medios. La regla @import debe declararse en la parte superior del documento después de cualquier declaración @charset.
Sintaxis:
@import url|string list-of-mediaqueries;
Valores de propiedad:
- url|string: una url o una string representa la ubicación del recurso que se va a importar. La url puede ser relativa o absoluta
- list-of-mediaqueries: La lista de consultas de medios condiciona la aplicación de las reglas CSS definidas en la URL enlazada
Ejemplo: Considere los dos archivos CSS como se muestra a continuación.
- icss.css
@import url("i1css.css"); h1 { color: #00ff00; } - i1css.css
h1 { text-decoration: underline; font-size:60px; } p { padding-left: 20px; font-size: 60px; }
Vincule el primer archivo CSS icss.css en el siguiente archivo HTML y vea el resultado.
<!DOCTYPE html> <html> <head> <title>WebPage</title> <link href="icss.css" rel="stylesheet"> </head> <body> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> </body> </html>
Producción:
Navegadores compatibles: los navegadores compatibles con la regla @import se enumeran a continuación:
- Google Chrome
- Internet Explorer 5.5
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA