CSS - @ Reglas
Este capítulo cubrirá las siguientes reglas importantes:
los @import: rule importa otra hoja de estilo a la hoja de estilo actual.
los @charset La regla indica el conjunto de caracteres que utiliza la hoja de estilo.
los @font-face La regla se utiliza para describir exhaustivamente una fuente para su uso en un documento.
los !important regla indica que una regla definida por el usuario debe tener prioridad sobre las hojas de estilo del autor.
NOTE - Hay otras @ reglas que trataremos en capítulos posteriores.
La regla @import
La regla @import le permite importar estilos desde otra hoja de estilo. Debería aparecer justo al principio de la hoja de estilo antes de cualquiera de las reglas, y su valor es una URL.
Puede escribirse de una de las dos formas siguientes:
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>La importancia de la regla @import es que le permite desarrollar sus hojas de estilo con un enfoque modular. Puede crear varias hojas de estilo y luego incluirlas donde las necesite.
La regla @charset
Si está escribiendo su documento con un conjunto de caracteres que no sea ASCII o ISO-8859-1, es posible que desee establecer la regla @charset en la parte superior de su hoja de estilo para indicar en qué conjunto de caracteres está escrita la hoja de estilo.
La regla @charset debe escribirse justo al principio de la hoja de estilo sin ni siquiera un espacio antes. El valor se mantiene entre comillas y debe ser uno de los conjuntos de caracteres estándar. Por ejemplo
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>La regla @ font-face
La regla @ font-face se utiliza para describir exhaustivamente una fuente para su uso en un documento. @ font-face también se puede usar para definir la ubicación de una fuente para descargar, aunque esto puede encontrarse con límites específicos de implementación.
En general, @ font-face es extremadamente complicado y su uso no se recomienda para nadie excepto para aquellos que son expertos en métricas de fuentes.
Aquí hay un ejemplo:
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>La! Importante regla
Cascada de hojas de estilo en cascada. Significa que los estilos se aplican en el mismo orden en que los lee el navegador. Se aplica el primer estilo y luego el segundo y así sucesivamente.
La regla! Important proporciona una forma de hacer que su CSS funcione en cascada. También incluye las reglas que se deben aplicar siempre. Siempre se aplicará una regla que tenga una propiedad! Important, sin importar dónde aparezca esa regla en el documento CSS.
Por ejemplo, en la siguiente hoja de estilo, el texto del párrafo será negro, aunque la primera propiedad de estilo aplicada sea roja:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>Por lo tanto, si desea asegurarse de que una propiedad siempre se aplique, debe agregar la propiedad! Important a la etiqueta. Entonces, para que el texto del párrafo siempre sea rojo, debe escribirlo de la siguiente manera:
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>Aquí ha hecho que p {color: # ff0000! Importante; } obligatorio, ahora esta regla siempre se aplicará incluso si ha definido otra regla p {color: # 000000; }
Producirá el siguiente resultado: