Cómo importar hojas de estilo con @import en CSS
Puede haber varias hojas de estilo en un proyecto web. Para aplicar todas sus propiedades a los elementos HTML, se requiere integrarlas todas en una hoja de estilo. Para hacerlo, el CSS "@importar"La regla se puede utilizar. Usando la regla @Import, un archivo CSS contiene todos los estilos aplicados a todo el proyecto. Además, este archivo CSS se puede vincular con el HTML utilizando el elemento en la sección Head HTML.
Este artículo explicará el método para importar hojas de estilo con @import en CSS.
Para una mejor comprensión, analice el ejemplo a continuación!
Cómo importar hojas de estilo con @import en CSS?
Crearemos un archivo HTML y dos archivos CSS con los nombres "estilo.CSS" y "btnstyle.CSS":
- El archivo HTML contiene un elemento div. Dentro de este div, se especifica el elemento del botón.
- El estilo.CSS contendrá las propiedades de estilo del elemento Div.
- El btnstyle.CSS comprenderá las propiedades de estilo del elemento del botón.
- El btnstyle.El archivo CSS se importará al estilo.CSS, y luego, el archivo HTML vinculará al estilo.archivo CSS.
Paso 1: Crear archivo HTML
En HTML, primero, agregue un elemento Div con el nombre de la clase "contenido". Dentro de este elemento, agregue un elemento de botón:
Aquí está la salida:
El archivo HTML se crea con éxito. Ahora, diremos al estilo.archivo CSS.
Paso 2: Crear estilo.archivo CSS
A continuación se muestran las propiedades CSS agregadas al "estilo.CSS" archivo.
Estilo todos los elementos
*
margen: 0;
relleno: 0;
El asterisco "*Se utiliza el signo para referirse a todos los elementos HTML. Se les aplican las siguientes propiedades:
- "margen"La propiedad agrega espacio alrededor del elemento.
- "relleno"La propiedad agrega espacio alrededor del contenido del elemento o dentro del borde del elemento.
Estilo "Contenido" Div
.contenido
Ancho: 350px;
Altura: 150px;
borde: 1px sólido RGB (252, 198, 117);
Color de fondo: Blanchedalmond;
margen: auto;
Pantalla: Flex;
Justify-Content: Center;
Alineación de ítems: Centro;
Las siguientes son las propiedades que se aplican al elemento DIV:
- "anchoLa propiedad se utiliza para configurar el ancho del elemento.
- "alturaSe utiliza la propiedad para establecer la altura del elemento.
- "borde"La propiedad especifica el borde del elemento especificando los valores para el ancho de la frontera, el estilo de borde y el color del borde.
- "color de fondo"La propiedad agrega color al fondo del elemento.
- "mostrar"Propiedad con el valor"doblar"Hará que el diseño del elemento sea flexible para sus elementos.
- "Justify-ContentLa propiedad establece la posición de los elementos flexibles horizontalmente.
- "ítems alineados"La propiedad establece la posición de los elementos flexibles verticalmente, y el"margen"La propiedad funciona como se explicó anteriormente.
Paso 3: Enlace CSS al archivo HTML
El siguiente paso es vincular el estilo.Archivo CSS al archivo HTML utilizando el ""Elemento asociado con los atributos:
- rey: Este atributo se utiliza para especificar el tipo de documento.
- href: Este atributo se usa para agregar la URL del archivo.
Este elemento de enlace se especifica en el elemento principal del archivo HTML:
Entonces, aquí está la salida después de vincular el estilo.Archivo CSS al archivo HTML:
Entonces, ahora dirígete al "btnstyle.CSSArchivo "que mantendrá presionado las propiedades de estilo del elemento de botón.
Paso 4: Crea btnstyle.archivo CSS
Este archivo tiene las propiedades CSS del elemento del botón HTML.
Elemento de estilo "botón"
botón
Border-Radius: 5px;
relleno: 10px;
Ancho: 200px;
Color de fondo: RGB (253, 207, 137);
borde: 1px sólido RGB (245, 156, 21);
Shadow de caja: 1px 1px 1px gris;
El elemento del botón se especifica con las siguientes propiedades:
- "radio fronterizo"La propiedad se utiliza para hacer que los bordes del elemento redujeran.
- "sombra de la caja"Es una propiedad abreviada que establece una sombra alrededor de un elemento al especificar los valores para X-Offset, Y-Offset, Blur-Radius, Spread-Radius y Color of the Shadow.
- El "relleno","ancho","color de fondo", y "borde"Las propiedades funcionan como se describe anteriormente.
Paso 5: elemento de estilo "botón" en el flotador
Botón: Hover
transformar: traducido (2px);
Al pasar el rato, el elemento de botón se especifica con la siguiente propiedad:
- "transformar"La propiedad especifica la transformación del elemento donde"traduce ()"La función vuelve a posicionar el elemento en el eje y.
Paso 6: use la regla @import
Ahora, integraremos el BtnStyle.Archivo CSS en el estilo.archivo CSS. Para esto, especifique el BtnStyle.archivo CSS usando la regla @import en la parte superior del estilo.Archivo CSS de la siguiente manera:
@import "btnstyle.CSS ";
Producción
Has aprendido con éxito a importar hojas de estilo con @import en CSS.
Conclusión
Para aplicar todas las propiedades al archivo HTML de su proyecto, se requiere integrarlas. Para hacerlo, las hojas de estilo CSS se importan a la hoja de estilo utilizando la regla @Import. Luego, este archivo se puede vincular al archivo HTML utilizando el elemento de enlace HTML. Este artículo ha demostrado cómo importar hojas de estilo con @import en CSS.