Como importar folhas de estilo com @import no CSS

Pode haver várias folhas de estilo em um projeto da web. Para aplicar todas as suas propriedades aos elementos HTML, é necessário integrá -los em uma folha de estilo. Para fazer isso, o CSS “@importar”A regra pode ser utilizada. Usando a regra @import, um arquivo CSS contém todos os estilos aplicados a todo o projeto. Além disso, este arquivo CSS pode ser vinculado ao HTML usando o elemento na seção HTML Head.

Este artigo explicará o método para importar folhas de estilo com o @Import no CSS.

Para uma melhor compreensão, analise o exemplo abaixo!

Como importar folhas de estilo com @import no CSS?

Criaremos um arquivo HTML e dois arquivos CSS com os nomes “estilo.CSS" e "Btnstyle.CSS”:

• O arquivo html contém um elemento div. Dentro desta div, o elemento do botão é especificado.
• O estilo.CSS conterá as propriedades de estilo do elemento div.
• O btnstyle.CSS compreenderá as propriedades de estilo do elemento de botão.
• O btnstyle.O arquivo CSS importará para o estilo.CSS e, em seguida, o arquivo html será vinculado ao estilo.arquivo CSS.

Etapa 1: Crie arquivo HTML

Em HTML, primeiro, adicione um elemento div com o nome da classe “contente”. Dentro deste elemento, adicione um elemento de botão:

Clique em mim

Aqui está a saída:

O arquivo html é criado com sucesso. Agora, vamos ao estilo.arquivo CSS.

Etapa 2: Crie estilo.arquivo CSS

Abaixo estão as propriedades CSS adicionadas ao “estilo.CSS" arquivo.

Estilo todos os elementos

*
margem: 0;
preenchimento: 0;

O asterisco “*”O sinal é utilizado para se referir a todos os elementos HTML. As seguintes propriedades são aplicadas a eles:

• ““margem”A propriedade adiciona espaço ao redor do elemento.
• ““preenchimento”A propriedade adiciona espaço ao redor do conteúdo do elemento ou dentro da borda do elemento.

Estilo “conteúdo” div

.contente
Largura: 350px;
Altura: 150px;
borda: 1px RGB sólido (252, 198, 117);
Background-Color: Blanchedalmond;
margem: automático;
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;

A seguir, estão as propriedades aplicadas ao elemento div:

• ““largura”A propriedade é usada para definir a largura do elemento.
• ““altura”A propriedade é utilizada para definir a altura do elemento.
• ““fronteira”Propriedade especifica a fronteira do elemento, especificando os valores para largura de borda, estilo de borda e cor da borda.
• ““cor de fundo”A propriedade adiciona cor ao fundo do elemento.
• ““mostrar”Propriedade com o valor“flex”Tornará o layout do elemento flexível para seus itens.
• ““Justify-Content”Propriedade define a posição dos itens flexíveis horizontalmente.
• ““alinhado-itens”Propriedade define a posição dos itens flexíveis verticalmente, e o“margem”A propriedade funciona como explicado acima.

Etapa 3: Link CSS ao arquivo HTML

O próximo passo é vincular o estilo.arquivo CSS para o arquivo html utilizando o “”Elemento associado aos atributos:

• rel: Este atributo é utilizado para especificar o tipo de documento.
• Href: Este atributo é usado para adicionar o URL do arquivo.

Este elemento de link é especificado no elemento principal do arquivo html:

Então, aqui está a saída depois de vincular o estilo.Arquivo CSS para o arquivo HTML:

Então, agora vá para o “Btnstyle.CSS”Arquivo que manterá as propriedades de estilo do elemento do botão.

Etapa 4: Crie Btnstyle.arquivo CSS

Este arquivo possui as propriedades CSS do elemento de botão HTML.

Elemento de "botão" de estilo

botão
Radio de fronteira: 5px;
preenchimento: 10px;
Largura: 200px;
Background-Color: RGB (253, 207, 137);
borda: 1px RGB sólido (245, 156, 21);
Shadow de caixa: 1px 1px 1px cinza;

O elemento do botão é especificado com as seguintes propriedades:

• ““Radio de fronteira”A propriedade é utilizada para fazer as bordas do elemento.
• ““Sombra da caixa”É uma propriedade abreviada que define uma sombra em torno de um elemento, especificando os valores para o deslocamento X, Y-offset, Blur-radius, Spread-Radius e cor da sombra.
• O "preenchimento","largura","cor de fundo", e "fronteira”As propriedades funcionam como descrito acima.

Etapa 5: Elemento do estilo "Button" no mouse

Botão: Hover
Transform: tradutor (2px);

No passe, o elemento do botão é especificado com a seguinte propriedade:

• ““transformar”Propriedade especifica a transformação do elemento onde“Tradlatey ()”A função reposiciona o elemento no eixo y.

Etapa 6: Use a regra @import

Agora, vamos integrar o btnstyle.arquivo CSS no estilo.arquivo CSS. Para isso, especifique o Btnstyle.arquivo CSS usando a regra @import no topo do estilo.Arquivo CSS da seguinte forma:

@import "Btnstyle.CSS ";

Saída

Você aprendeu com sucesso a importar folhas de estilo com @import no CSS.

Conclusão

Para aplicar todas as propriedades ao arquivo HTML do seu projeto, é necessário integrá -las. Para fazer isso, as folhas de estilo CSS são importadas para a folha de estilo, utilizando a regra @import. Em seguida, esse arquivo pode ser vinculado ao arquivo HTML, utilizando o elemento de link HTML. Este artigo demonstrou como importar folhas de estilo com @import no CSS.