““@”O símbolo é usado para adicionar regras no CSS. As regras adicionadas através do “@Símbolo é chamado de “nas regras”. Essas regras minimizam o esforço do desenvolvedor de maneiras diferentes. As operações que “nas regras”O desempenho está importando propriedades CSS diretamente sem precisar escrever ou copiar todas as propriedades do CSS em cada arquivo, aplicando propriedades em determinadas mídias e baixando diretamente e aplicando fontes no conteúdo da página da web.

A seguir são os principais “nas regras”No CSS:

• A regra @import
• A regra @media
• A regra @font-face

Vamos discutir brevemente cada um dos três “nas regras”Para entender como eles funcionam.

Qual é a regra @import no CSS?

O "@importar”A regra no CSS é usada para importar uma folha de estilo CSS de outra folha de estilo. Se houver uma folha de estilo CSS que contenha propriedades ou instruções de estilo para diferentes elementos de uma página da web e é necessário adicionar o mesmo estilo em outro arquivo de página da web, escrevendo apenas “@importar”Com o nome dessa folha de estilo (que contém propriedades CSS) no lado direito em ambos os suportes redondos com“url”Ou em vírgulas invertidas pode importar todas as propriedades dessa folha de estilo e aplicá -las diretamente na folha de estilo onde“@importar”A regra foi adicionada.

Sintaxe

Deve haver o nome do arquivo de folha de estilo formatado CSS escrito após “@importar”. Então, a sintaxe a adicionar “@importar”Regra em uma folha de estilo é a seguinte:

@import "StylesheetName.CSS ";

A regra de importação também pode ser escrita como a seguinte para o mesmo objetivo, pois também gerará o mesmo resultado:

@Import URL (STILESHEETNAME.css);

Qual é a regra @media no CSS?

O "@meios de comunicação”A regra é usada para adicionar instruções de mídia à página da web. Esta regra funciona de acordo com a condição aplicada ao adicionar esta regra. A condição é adicionada logo após adicionar “@meios de comunicação”No lado direito e depois dentro da regra entre os colchetes, estão as propriedades ou as instruções que precisam ser implementadas quando a condição é verdadeira.

Exemplo: Aplicando a regra @media

Para entender por exemplo, podemos adicionar algum conteúdo à página da web:

Bem -vindo ao Tutorial Linuxhint!

No trecho de código acima, há um título criado para exibir isso como o conteúdo da página da web.

Vamos dar um exemplo de adição de instruções de mídia quando as dimensões ou a largura da página aumentam ou diminuem. Primeiro, escreva “@meios de comunicação”E então adicione a condição e, em seguida, os colchetes encaracolados definem as propriedades do CSS que devem ser implementadas se a condição com“@meios de comunicação”Torna -se verdade:

@media (Max-Width: 700px)
.minha classe
cor preta;
Antecedentes: verde;


@Media (Min-Width: 700px) e (Max-Width: 900px)
.minha classe
cor preta;
Antecedentes: amarelo;


@media (largura min: 900px)
.minha classe
cor preta;
Antecedentes: ciano;

No código acima, foi mencionado tamanhos diferentes de largura como condição para três regras de mídia diferentes para executar de acordo. Por exemplo, de acordo com o código acima, quando a largura mínima será 700px, a cor de fundo do texto mudará para amarelo.

O seguinte será o resultado gerado através do código acima. Alterar o tamanho da tela alterará as cores de fundo do texto:

Qual é a regra @font-face no CSS?

A regra de Fontface é um método fácil de adicionar estilos de fonte diretamente à página da web. As fontes são baixadas diretamente e aplicadas ao texto através desta regra.

Exemplo: Aplicando @regra de font-face

Vamos entender o método para adicionar o “@Tipo de letra”Regra através de um exemplo simples:

Bem -vindo ao Tutorial Linuxhint!

O trecho de código acima tem o mesmo título de texto descrito na seção anterior deste post.

Vamos implementar o “@Tipo de letra”Regra para a“

“Indo para mudar sua fonte:

@Tipo de letra
Fonte-família: "Dejavu Sans";
src: url ("./fontes/dejavusans.TTF ") formato (" ttf ");
Peso da fonte: 500;

H1
Fonte-família: 'Dejavu Sans';
Peso da fonte: 500;

No trecho de código acima, há o nome da família de fontes que é necessária e depois o ““url”Link de onde a fonte deve ser baixada e depois o peso da fonte. Quando a face da fonte é especificada através do “@Tipo de letraRegra, o nome da face da fonte pode ser usado com qualquer elemento, como neste código que foi usado para o “H1" cabeçalho.

A execução deste código mudará a fonte de acordo com as instruções mencionadas no “@Tipo de letra" regra. O seguinte será a saída do trecho de código acima:

Isso resume o objetivo do “@”Símbolo no CSS.

Conclusão

O "@”O símbolo no CSS é usado para adicionar“nas regras”No CSS. Essas regras executam tarefas muito úteis enquanto usam CSS para modelar os documentos i.e. Eles importam folhas de estilo inteiro de outro arquivo CSS através do “@importarRegra, aplique propriedades CSS na mídia definida de acordo com as condições através de “@meios de comunicação”Regra e baixe diretamente fontes para usar na página da web através do“@Tipo de letra" regra.