CSS - @ Rules
Este capítulo cobrirá as seguintes regras @ importantes -
o @import: regra importa outra folha de estilo para a folha de estilo atual.
o @charset regra indica o conjunto de caracteres que a folha de estilo usa.
o @font-face regra é usada para descrever exaustivamente uma face de fonte para uso em um documento.
o !important regra indica que uma regra definida pelo usuário deve ter precedência sobre as folhas de estilo do autor.
NOTE - Existem outras regras @ que iremos cobrir nos capítulos subsequentes.
A regra @import
A regra @import permite importar estilos de outra folha de estilo. Deve aparecer logo no início da folha de estilo antes de qualquer uma das regras e seu valor é um URL.
Pode ser escrito de uma das seguintes maneiras -
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>O significado da regra @import é que ela permite que você desenvolva suas folhas de estilo com uma abordagem modular. Você pode criar várias folhas de estilo e incluí-las sempre que precisar.
A regra @charset
Se você está escrevendo seu documento usando um conjunto de caracteres diferente de ASCII ou ISO-8859-1, você pode querer definir a regra @charset no topo de sua folha de estilo para indicar em qual conjunto de caracteres a folha de estilo está escrita.
A regra @charset deve ser escrita logo no início da folha de estilo, sem nem mesmo um espaço antes dela. O valor é mantido entre aspas e deve ser um dos conjuntos de caracteres padrão. Por exemplo -
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>A regra @ font-face
A regra @ font-face é usada para descrever exaustivamente uma face de fonte para uso em um documento. @ font-face também pode ser usado para definir a localização de uma fonte para download, embora isso possa atingir limites específicos de implementação.
Em geral, @ font-face é extremamente complicado e seu uso não é recomendado para ninguém, exceto para aqueles que são especialistas em métricas de fontes.
Aqui está um exemplo -
<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>A regra! Importante
Cascading Style Sheets em cascata. Isso significa que os estilos são aplicados na mesma ordem em que são lidos pelo navegador. O primeiro estilo é aplicado e, em seguida, o segundo e assim por diante.
A regra! Important fornece uma maneira de fazer seu CSS em cascata. Também inclui as regras que devem ser aplicadas sempre. Uma regra com uma propriedade! Important sempre será aplicada, não importa onde essa regra apareça no documento CSS.
Por exemplo, na folha de estilo a seguir, o texto do parágrafo ficará preto, embora a primeira propriedade de estilo aplicada seja vermelha:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>Portanto, se você quiser garantir que uma propriedade seja sempre aplicada, adicione a propriedade! Important à tag. Portanto, para tornar o texto do parágrafo sempre vermelho, você deve escrevê-lo da seguinte maneira -
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>Aqui, você tornou p {color: # ff0000! Importante; } obrigatório, agora esta regra sempre se aplicará mesmo que você tenha definido outra regra p {cor: # 000000; }
Isso produzirá o seguinte resultado -