Ao desenvolver sites e aplicativos da Web, o mesmo estilo em todas as páginas da web é frequentemente necessário para manter a consistência do aplicativo da web. Por exemplo, se as cores da página principal de um aplicativo da web forem uma combinação de rosa e roxo, ficará estranho se a próxima página do aplicativo da web for de qualquer outra cor como preto e laranja.

Mas durante a codificação, é difícil incluir as mesmas propriedades CSS para cada página da web separadamente. Portanto, é necessário usar uma solução através da qual uma única folha de estilo pode ser criada e depois acessada por vários arquivos facilmente.

Qual é a regra @import no CSS?

A melhor maneira de incluir as propriedades do estilo CSS é usando a regra @import. @import é usado para importar ou acessar uma folha de estilo CSS de outra folha de estilo. Isso reduz o esforço do desenvolvedor, pois todas as propriedades adicionadas na folha de estilo importadas são implementadas diretamente ao escrever @import e, em seguida, o nome exato da folha de estilo.

Sintaxe da regra @import

A sintaxe para adicionar a regra @import para acessar uma folha de estilo de outra folha de estilo é a seguinte:

@import "StylesheetName.CSS ";

A regra @import também pode ser adicionada pelo seguinte método:

@Import URL (STILESHEETNAME.css);

Simplesmente, adicione o nome do arquivo da folha de estilo CSS em vírgulas invertidas ou em suportes redondos com “url"Depois de escrever"@importar”.

Exemplo: Adicionando @import regra

Para entender como a regra @import funciona, escrevemos um snippet de código simples:

Este é um texto simples!

No trecho de código acima, há um

Caminhando com uma frase simples de uma linha adicionada em um documento HTML. Este código simples gerará a seguinte saída:

Vamos criar uma folha de estilo para definir algumas propriedades CSS que podem ser importadas posteriormente do arquivo através do qual a interface da página da web acima é criada. Criamos outro arquivo e o nomeamos “folha de estilo”Com o tipo de arquivo declarado como“CSS”, E simplesmente adicionar algumas propriedades para

cabeçalho e corpo:

H1
Cor: Midnightblue;
Background-Color: Azure;
Alinhamento de texto: centro;

corpo
Background-Color: LightBlue;

Para acessar o arquivo da folha de estilo que contém as propriedades do estilo para

cabeçalho e corpo, precisamos simplesmente adicionar a regra @import em qualquer um dos arquivos CSS onde esse estilo é necessário.

Adicionar apenas uma regra simples @import implementará todas as propriedades de estilo à interface da página da web sem precisar digitar as propriedades separadamente em cada página da web.

Portanto, é necessário escrever a regra @import como:

@import "Sheet de Styles.CSS ";

Adicionando a regra @import escrevendo “url”E o nome do arquivo CSS nos colchetes redondos também exibirá os mesmos resultados:

@import url (folha de estilo.css);

As propriedades definidas no “folha de estilo”O arquivo é implementado apenas adicionando um simples“@importar”Regra para isso:

Esta é a maneira mais fácil de incluir as propriedades do CSS em um arquivo sem nenhum esforço adicional.

Benefícios da regra @import no CSS

A regra @import é usada comumente pelos seguintes motivos:

• O uso da regra @import reduz o tempo e o esforço do desenvolvedor, pois implementa todas as propriedades de uma folha de estilo específica, apenas escrevendo o nome dessa folha após @import.
• Em aplicativos da web grandes e complexos, a regra @import prova ser muito vantajosa, pois as mesmas propriedades de estilo podem ser implementadas em vários arquivos apenas adicionando o nome do arquivo de estilo de estilo.
• Elementos da folha de estilo, como cabeçalhos, rodapés, corpo, etc. podem ser armazenados em arquivos de chapas de estilo separadas e, ao usar a regra @import, qualquer um dos estilos necessários pode ser importado sem precisar adicionar, remover ou comentário propriedades de estilo de um arquivo.

Isso resume o uso da regra @import e explica como essa regra é considerada o melhor método para incluir CSS.

Conclusão

Uma folha de estilo CSS pode ser importada ou acessada diretamente de outra folha de estilo e todas as propriedades na folha de estilo importado são implementadas diretamente na página da web do arquivo em que foi importado. Não há necessidade de escrever cada propriedade CSS separadamente para todas as interface da página da web. Só é necessário adicionar o nome do arquivo de folha de estilo CSS com @import. E este é considerado o melhor método para adicionar CSS.