Existem duas regras de sintaxe incluídas no CSS:
Regras ordinárias: compostas por seletores, atributos e valores, utilizamos principalmente esse tipo de regras em estudos anteriores;
@Rule: Começa com @ e é seguido por uma palavra-chave. Também é chamada de "regra AT". Pode ser dividida em " regra regular " e " regra aninhada " de acordo com os diferentes métodos de uso.
Vamos apresentar principalmente a regra @ em CSS.
1. Regras gerais
As chamadas "regras regulares" referem-se a regras com sintaxe semelhante à seguinte:
@[PALAVRA-CHAVE](REGRA);
(1)@charset
@charset é usado para definir a codificação de caracteres usada em arquivos CSS. O formato da sintaxe é o seguinte:
@charset<charset>;
Entre eles, <charset> é a codificação de caracteres específica e o valor padrão é "utf-8".
Você precisa prestar atenção aos seguintes pontos ao usá-lo:
① Se @charset estiver definido, ele deverá aparecer na frente do arquivo CSS e nenhum caractere poderá aparecer antes de @charset;
②A codificação de caracteres precisa ser colocada entre aspas duplas;
③ É necessário usar um espaço para separar o nome da @rule (@charset) e a codificação de caracteres específica;
④O ponto e vírgula após a regra não pode ser omitido;
⑤Se vários @charsets forem definidos, apenas a primeira instrução será válida;
⑥@charset não pode ser usado em elementos HTML ou tags <style>;
⑦Se várias regras de codificação de caracteres forem definidas de maneiras diferentes, sua ordem de prioridade será a seguinte:
● Declaração de codificação de caracteres no início do arquivo HTML;
●Declaração de codificação de caracteres no cabeçalho da solicitação HTTP;
●A declaração de codificação de caracteres definida por @charset é usada no arquivo CSS;
●A declaração de codificação de caracteres definida pelo atributo charset na tag <link> (descontinuada em HTML5).
O exemplo a seguir demonstra o uso de @charset, bem como vários exemplos de erros:
/*Defina o formato de codificação CSS para UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*Não diferencia maiúsculas de minúsculas*//*Demonstração de erro*/@charset'iso-8859-15';/*Inválido Sim, as aspas erradas são usadas */@charset'UTF-8';/*Inválido, as aspas erradas são usadas*/@charsetUTF-8;/*Inválido, há um espaço extra entre @charset e a codificação de caracteres * /@charsetUTF-8;/*Inválido, há um espaço extra antes da regra @*/@charsetUTF-8;/*Inválido, a codificação de caracteres precisa ser colocada entre aspas duplas*/
(2) @importar
@import é usado para importar outros arquivos de estilo para o arquivo de estilo CSS atual. Todo o conteúdo, exceto @charset, em outros arquivos de folhas de estilo pode ser introduzido através de @import. Além disso, @import também deve ser colocado na frente do arquivo de estilo. O formato da sintaxe de @import é o seguinte:
@import<url><media_query_list>
Entre eles, <url> é o caminho do arquivo da folha de estilos externa a ser importado usando um caminho absoluto ou relativo. Você também pode usar a função url() para especificar o caminho do arquivo. <media_query_list> é um parâmetro opcional, usado para especificar o caminho do arquivo. condições da consulta de mídia Use vírgulas para separar várias condições.
Em projetos reais, não é recomendado usar muito @import, pois causará muitas solicitações extras e bloqueará o carregamento de outros arquivos.
Ao usar @import, você também precisa prestar atenção aos seguintes pontos:
●@import deve ser declarado primeiro no início do arquivo da folha de estilo e a declaração deve terminar com ponto e vírgula. Se o ponto e vírgula final for omitido, a folha de estilo externa poderá não ser importada corretamente;
●Usar @import no navegador IE só pode introduzir até 35 folhas de estilo.
O exemplo a seguir demonstra o uso de @import:
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bluish.css)projeção,tv;@import'custom.css';@ importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);Os métodos de definição acima são todos válidos. Ao usar url() para definir o caminho do arquivo da folha de estilo, as aspas do caminho de quebra são opcionais ao usar um caminho específico para definir diretamente o caminho do arquivo da folha de estilo; o caminho de quebra de aspas deve ser mantido.
(3)@espaço para nome
@namespace é usado para definir a regra @ do namespace XML na folha de estilo CSS. Ele pode definir o namespace especificado para todos os seletores no arquivo de estilo atual. @namespace normalmente é usado para lidar com documentos que contêm vários namespaces, como SVG embutido em HTML5, MathML ou XML misturado com vários vocabulários.
@namespace deve ser definido depois de @charset e @import, e antes de qualquer outra declaração de estilo na folha de estilo. @namespace pode ser usado para definir um namespace padrão Quando o namespace padrão é especificado, todos os seletores universais e seletores de classe (mas não os seletores de atributos) serão aplicados apenas aos elementos neste namespace. @namespace também pode ser usado para definir um prefixo de namespace Quando um seletor geral, de classe ou de atributo é precedido por um prefixo de namespace, esse seletor corresponderá apenas aos elementos cujo namespace corresponda ao nome do elemento ou atributo.
O exemplo a seguir demonstra o uso de @namespace:
/*Namespace padrão*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*Prefixo de namespace*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. Regras aninhadas
As chamadas "regras aninhadas" significam que a regra @ precisa ser seguida por uma chave { }, que contém algumas outras declarações de regras, semelhantes às seguintes:
@[KEYWORD]{/*Declarações aninhadas*/}(1)@mídia
@media é usado para aplicar uma determinada parte da folha de estilo (informações de estilo entre chaves) com base nos resultados de uma ou mais consultas de mídia. Usando @media você pode especificar um conjunto de consultas de mídia e um bloco de estilo CSS se e somente. se a mídia Os estilos CSS especificados só serão aplicados ao documento quando a consulta corresponder ao dispositivo que está sendo usado.
Consulta de mídia é um conjunto de condições usadas para determinar informações do dispositivo, como valor de largura e altura do dispositivo, proporção de aspecto, cor, resolução, etc. Quando as condições corresponderem, as informações de estilo aninhadas serão executadas.
@media pode ser colocado em qualquer lugar da folha de estilo ou em outras regras @. O código de exemplo é o seguinte:
@mediaalland(min-width:1280px){/*largura maior que 1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(min-resolution:2dppx){/*Tela Retina*/ } @mediaprint{/*print*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}(2)@página
@page é usado para modificar certas propriedades CSS ao imprimir um documento. Deve-se observar que usando @page você só pode modificar algumas propriedades CSS, como a margem da propriedade de espaçamento externo, órfãos relacionados à impressão, propriedades do Windows e quebra de página. -* propriedades, outras propriedades CSS serão ignoradas.
/*Indica que as margens superior e esquerda da primeira página durante a impressão são ambas de 50%*/@page:first{margin-left:50%;margin-top:50%;}(3)@suportes
@supports é usado para verificar se o navegador suporta um determinado recurso CSS, também conhecido como "consulta de recurso". A estrutura de sintaxe desta regra é a seguinte:
@supports(rule)[operador(rule)]*{sRules};Entre eles, regra é um estilo CSS específico e deve ser colocado entre parênteses; os valores opcionais do operador são ou, e, e não. Vários estilos CSS podem ser especificados por meio do parâmetro do operador.
@supports pode ser definido no topo de um arquivo de estilo ou dentro de outras regras aninhadas. No entanto, @supports ainda está em fase experimental. Antes de usá-lo, você deve primeiro confirmar se o navegador o suporta.
O exemplo a seguir demonstra o uso de @supports:
/*Estilo CSS a ser usado quando o navegador suportar o atributo display:grid*/@supports(display:grid){div{display:grid;}}/*CSS a ser usado quando o navegador não suportar o display:grid atributo Estilo*/@supportsnot(display:grid){div{float:right;}}/*Verifique várias condições ao mesmo tempo*/@supports(display:flex)and(-webkit-appearance:checkbox){.module {exibição: flexível;}}(4) @fonte-face
@font-face é usado para carregar a fonte especificada do servidor remoto ou do usuário localmente. O formato da sintaxe é o seguinte:
@font-face{font-family:<identificador>;src:<url>[format(<string>)][,<url>[format(<string>)]]*;<font>;}A descrição do parâmetro é a seguinte:
●<identificador>: nome da fonte;
●<url>: Use url() (fonte remota) ou local() (fonte local) para especificar o caminho de armazenamento da fonte, que pode ser um caminho relativo ou absoluto;
●<string>: usado para especificar o formato de fontes personalizadas, como os seguintes tipos: truetype, opentype, incorporado-opentype, svg, etc.;
●<fonte>: Defina estilos relacionados à fonte.
Dica: @font-face pode ser colocado no topo de uma folha de estilo CSS ou dentro de outras regras aninhadas. Se você usar a função local() e a função url() para carregar fontes, a fonte local definida na função local() será carregada primeiro. Se não for encontrada, a fonte remota definida na função url() será. carregado.
O exemplo a seguir demonstra o uso de @font-face:
/*Definir regras @font-face*/@font-face{/*Especificar o nome da fonte*/font-family:OpenSans;/*Especificar o caminho para o arquivo da fonte*/src:url(/fonts/OpenSans-Regular -webfont.woff2)formato(woff2),url(/fonts/OpenSans-Regular-webfont.woff)formato(woff);}/*Aplicativo de fonte*/p{font-family:OpenSans;}(5)@quadros-chave
@keyframes é usado para definir o estilo dos quadros-chave de animação (ou waypoints) em CSS3 para controlar as etapas intermediárias na sequência de animação. Depois de definir esta regra, você precisa utilizá-la através do atributo nome-animação. As sequências de quadros-chave são nomeadas por porcentagens, com os estados inicial e final sendo de e até representando 0% e 100%, respectivamente.
O formato da sintaxe de @keyframes é o seguinte:
@keyframes<identificador>{<blocos-quadros-chave>}Dentre eles, <identi fier> é utilizado para definir o nome da animação; <keyframes-blocks> é utilizado para definir o estilo da animação em cada etapa, ou seja, animação de quadros.
O uso de @keyframes é demonstrado no exemplo a seguir:
/*Instrução*/@keyframessslidein{from{margin-left:100%;width:300%;}to{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50%{top:30px;}100%{top:60px;}}/*Aplicar*/p{nome da animação:slidein;duração da animação:4s;}div{nome da animação:slideout;duração da animação:4s ;}(6)@documento
@document é usado para limitar o escopo de estilos no documento com base na URL do documento. Este atributo pode ser usado para definir estilos exclusivos para usuários especificados. Atualmente @document ainda está em fase experimental, e os padrões específicos serão determinados em CSS4.
As funções disponíveis em @document são as seguintes:
●url(): corresponde à URL inteira;
●url-prefix(): Se a URL do documento correspondente começa com o valor especificado pelo parâmetro;
●domain(): se o nome de domínio do documento correspondente é o nome de domínio especificado no parâmetro ou seu nome de subdomínio;
●regexp(): se o URL do documento correspondente corresponde à expressão regular especificada no parâmetro. A expressão deve corresponder ao URL inteiro.
Dica: Os parâmetros fornecidos às funções url(), url-prefix() e domain() podem ser colocados sem aspas, mas os parâmetros fornecidos à função regexp() devem ser colocados entre aspas.
O exemplo a seguir demonstra o uso de @document:
@documenturl(http://www.weixueyuan.net/),prefixo de url(http://www.weixueyuan.net/Style/),domínio(weixueyuan.net),regexp(https:.*){/* Esta regra CSS será aplicada às seguintes páginas da web: + A página cujo URL é http://www.weixueyuan.net/ + Qualquer página da web cujo URL comece com http://www.weixueyuan.net/Style/ +. O nome de domínio weixueyuan. Todas as páginas da web em net + quaisquer páginas da web cujo URL comece com https:*//*define style*/body{color:purple;background:yellow;}