Hay dos reglas de sintaxis incluidas en CSS:
Reglas ordinarias: compuestas por selectores, atributos y valores, utilizamos principalmente este tipo de reglas en estudios anteriores;
@Rule: comienza con @ y va seguida de una palabra clave. También se denomina "regla AT". Se puede dividir en " regla regular " y " regla anidada " según los diferentes métodos de uso.
Introduzcamos principalmente la regla @ en CSS.
1. Reglas generales
Las llamadas "reglas regulares" se refieren a reglas con una sintaxis similar a la siguiente:
@[PALABRA CLAVE](REGLA);
(1)@juego de caracteres
@charset se utiliza para configurar la codificación de caracteres utilizada en los archivos CSS. El formato de sintaxis es el siguiente:
@charset<juego de caracteres>;
Entre ellos, <charset> es la codificación de caracteres específica y el valor predeterminado es "utf-8".
Debe prestar atención a los siguientes puntos al usarlo:
① Si se establece @charset, debe aparecer al frente del archivo CSS y no pueden aparecer caracteres antes de @charset;
②La codificación de caracteres debe estar entre comillas dobles;
③ Se debe utilizar un espacio para separar el nombre @rule (@charset) y la codificación de caracteres específica;
④No se puede omitir el punto y coma después de la regla;
⑤Si se configuran varios @charsets, solo la primera declaración es válida;
⑥@charset no se puede utilizar en elementos HTML o etiquetas <style>;
⑦Si se definen varias reglas de codificación de caracteres de diferentes maneras, su orden de prioridad es el siguiente:
● Declaración de codificación de caracteres al principio del archivo HTML;
●Declaración de codificación de caracteres en el encabezado de solicitud HTTP;
●La declaración de codificación de caracteres definida por @charset se utiliza en el archivo CSS;
●La declaración de codificación de caracteres establecida por el atributo charset en la etiqueta <link> (obsoleta en HTML5).
El siguiente ejemplo demuestra el uso de @charset, así como varios ejemplos de errores:
/*Establezca el formato de codificación CSS en UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*No distingue entre mayúsculas y minúsculas*//*Demostración de error*/@charset'iso-8859-15';/*No válido Sí, se utilizan comillas incorrectas */@charset'UTF-8';/*No válido, se utilizan comillas incorrectas*/@charsetUTF-8;/*No válido, hay un espacio adicional entre @charset y la codificación de caracteres * /@charsetUTF-8;/*No válido, hay un espacio adicional antes de la regla @*/@charsetUTF-8;/*No válido, la codificación de caracteres debe estar entre comillas dobles*/
(2) @importar
@import se utiliza para importar otros archivos de estilo al archivo de estilo CSS actual. Todo el contenido excepto @charset en otros archivos de hojas de estilo se puede introducir a través de @import. Además, @import también debe colocarse al frente del archivo de estilo. El formato de sintaxis de @import es el siguiente:
@importar<url><media_query_list>
Entre ellos, <url> es la ruta del archivo de la hoja de estilo externa que se importará utilizando una ruta absoluta o relativa. También puede usar la función url() para especificar la ruta del archivo. <media_query_list> es un parámetro opcional, que se utiliza para especificar la ruta. condiciones de la consulta de medios Utilice comas para separar varias condiciones.
En proyectos reales, no se recomienda usar @import demasiado, porque provocará muchas solicitudes adicionales y bloqueará la carga de otros archivos.
Al utilizar @import, también debes prestar atención a los siguientes puntos:
●@import debe declararse primero al principio del archivo de hoja de estilo y la declaración debe finalizar con un punto y coma. Si se omite el punto y coma final, es posible que la hoja de estilo externa no se importe correctamente;
●El uso de @import en el navegador IE sólo puede introducir hasta 35 hojas de estilo.
El siguiente ejemplo demuestra el uso de @import:
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bluish.css)proyección,tv;@import'custom.css';@ importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);Todos los métodos de definición anteriores son válidos cuando se usa url () para establecer la ruta del archivo de hoja de estilo, las comillas de la ruta de ajuste son opcionales cuando se usa una ruta específica para establecer directamente la ruta del archivo de hoja de estilo; Se debe conservar la ruta de ajuste de las comillas.
(3)@espacio de nombres
@namespace se utiliza para definir la regla @ del espacio de nombres XML en la hoja de estilos CSS. Puede establecer el espacio de nombres especificado para todos los selectores en el archivo de estilo actual. @namespace se utiliza normalmente para manejar documentos que contienen múltiples espacios de nombres, como SVG en línea en HTML5, MathML o XML mezclado con múltiples vocabularios.
@namespace debe definirse después de @charset y @import, y antes de cualquier otra declaración de estilo en la hoja de estilos. @namespace se puede utilizar para definir un espacio de nombres predeterminado. Cuando se especifica el espacio de nombres predeterminado, todos los selectores universales y de clase (pero no los selectores de atributos) solo se aplicarán a los elementos de este espacio de nombres. @namespace también se puede utilizar para definir un prefijo de espacio de nombres. Cuando un selector general, de clase o de atributo está precedido por un prefijo de espacio de nombres, este selector solo coincidirá con elementos cuyo espacio de nombres coincida con el nombre o atributo del elemento.
El siguiente ejemplo demuestra el uso de @namespace:
/*Espacio de nombres predeterminado*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*Prefijo de espacio de nombres*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. Reglas anidadas
Las llamadas "reglas anidadas" significan que la regla @ debe ir seguida de una llave { }, que contiene algunas otras declaraciones de reglas, similares a las siguientes:
@[KEYWORD]{/*Declaraciones anidadas*/}(1)@medios
@media se utiliza para aplicar una determinada parte de la hoja de estilo (información de estilo entre llaves) en función de los resultados de una o más consultas de medios. Con @media puede especificar un conjunto de consultas de medios y un bloque de estilo CSS si y solo. si los medios Los estilos CSS especificados solo se aplican al documento cuando la consulta coincide con el dispositivo que se utiliza.
La consulta de medios es un conjunto de condiciones que se utilizan para determinar la información del dispositivo, como el valor de ancho y alto del dispositivo, relación de aspecto, color, resolución, etc. Cuando las condiciones coinciden, se ejecutará la información de estilo anidado.
@media se puede colocar en cualquier lugar de la hoja de estilo o en otras reglas @. El código de muestra es el siguiente:
@mediaalland(ancho mínimo:1280px){/*ancho mayor que 1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(resolución mínima:2dppx){/*Pantalla Retina*/ } @mediaprint{/*print*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}(2)@página
@page se usa para modificar ciertas propiedades de CSS al imprimir un documento. Cabe señalar que al usar @page solo puede modificar algunas propiedades de CSS, como el margen de propiedad de espacio exterior, los huérfanos relacionados con la impresión, las propiedades de Windows y el salto de página. -* propiedades, se ignorarán otras propiedades CSS.
/*Indica que los márgenes superior e izquierdo de la primera página al imprimir son ambos del 50%*/@page:first{margin-left:50%;margin-top:50%;}(3)@soportes
@supports se utiliza para comprobar si el navegador admite una determinada función CSS, también conocida como "consulta de funciones". La estructura de sintaxis de esta regla es la siguiente:
@supports(regla)[operador(regla)]*{sReglas};Entre ellos, la regla es un estilo CSS específico y debe estar entre paréntesis; los valores opcionales del operador son o, y se pueden especificar varios estilos CSS a través del parámetro del operador.
@supports se puede definir en la parte superior de un archivo de estilo o dentro de otras reglas anidadas. Sin embargo, @supports aún se encuentra en la etapa experimental. Antes de usarlo, primero debe confirmar si el navegador lo admite.
El siguiente ejemplo demuestra el uso de @supports:
/*Estilo CSS que se utilizará cuando el navegador admita el atributo display:grid*/@supports(display:grid){div{display:grid;}}/*CSS que se utilizará cuando el navegador no admita display:grid atributo Estilo*/@supportsnot(display:grid){div{float:right;}}/*Verifique varias condiciones al mismo tiempo*/@supports(display:flex)and(-webkit-appearance:checkbox){.module {pantalla: flexionar;}}(4) @fuente-cara
@font-face se utiliza para cargar la fuente especificada desde el servidor remoto o el usuario localmente. El formato de sintaxis es el siguiente:
@font-face{font-family:<identificador>;src:<url>[formato(<cadena>)][,<url>[formato(<cadena>)]]*;<fuente>;}La descripción del parámetro es la siguiente:
●<identificador>: nombre de la fuente;
●<url>: utilice url() (fuente remota) o local() (fuente local) para especificar la ruta de almacenamiento de fuentes, que puede ser una ruta relativa o absoluta;
●<cadena>: se utiliza para especificar el formato de fuentes personalizadas, como los siguientes tipos: truetype, opentype, incrustado-opentype, svg, etc.;
●<fuente>: define estilos relacionados con la fuente.
Consejo: @font-face se puede colocar en la parte superior de una hoja de estilos CSS o dentro de otras reglas anidadas. Si utiliza tanto la función local() como la función url() para cargar fuentes, la fuente local definida en la función local() se cargará primero. Si no se encuentra, se cargará la fuente remota definida en la función url(). cargado.
El siguiente ejemplo demuestra el uso de @font-face:
/*Definir reglas de @font-face*/@font-face{/*Especificar el nombre de la fuente*/font-family:OpenSans;/*Especificar la ruta al archivo de fuente*/src:url(/fonts/OpenSans-Regular -webfont.woff2)formato(woff2),url(/fonts/OpenSans-Regular-webfont.woff)formato(woff);}/*Aplicación de fuente*/p{font-family:OpenSans;}(5)@fotogramas clave
@keyframes se utiliza para definir el estilo de los fotogramas clave de animación (o puntos de referencia) en CSS3 para controlar los pasos intermedios en la secuencia de animación. Después de definir esta regla, debe usarla a través del atributo de nombre de animación. Las secuencias de fotogramas clave se denominan mediante porcentajes, siendo los estados inicial y final desde y hasta el 0% y el 100% respectivamente.
El formato de sintaxis de @keyframes es el siguiente:
@keyframes<identificador>{<keyframes-bloques>}Entre ellos, <identi fier> se usa para definir el nombre de la animación; <keyframes-blocks> se usa para definir el estilo de la animación en cada etapa, es decir, animación de cuadros.
El uso de @keyframes se demuestra en el siguiente ejemplo:
/*Declaración*/@keyframessslidein{desde{margin-left:100%;width:300%;}a{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50%{top:30px;}100%{top:60px;}}/*Aplicar*/p{animation-name:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s ;}(6)@documento
@document se usa para limitar el alcance de los estilos en el documento según la URL del documento. Este atributo se puede usar para definir estilos exclusivos para usuarios específicos. Actualmente @document todavía se encuentra en la etapa experimental y los estándares específicos se determinarán en CSS4.
Las funciones disponibles en @document son las siguientes:
●url(): coincide con la URL completa;
●url-prefix(): si la URL del documento coincidente comienza con el valor especificado por el parámetro;
●dominio(): si el nombre de dominio del documento coincidente es el nombre de dominio especificado en el parámetro o su nombre de subdominio;
●regexp(): si la URL del documento coincidente coincide con la expresión regular especificada en el parámetro. La expresión debe coincidir con la URL completa.
Consejo: Los parámetros proporcionados a las funciones url(), url-prefix() y domain() se pueden entrecomillar sin comillas, pero los parámetros proporcionados a la función regexp() deben estar entre comillas.
El siguiente ejemplo demuestra el uso de @document:
@documenturl(http://www.weixueyuan.net/),prefijo de URL(http://www.weixueyuan.net/Style/),dominio(weixueyuan.net),regexp(https:.*){/* Esta regla CSS se aplicará a las siguientes páginas web: + La página cuya URL es http://www.weixueyuan.net/ + Cualquier página web cuya URL comience con http://www.weixueyuan.net/Style/ + El nombre de dominio weixueyuan. Todas las páginas web en net + cualquier página web cuya URL comience con https:*//*define style*/body{color:purple;background:amarillo;}