@Reguli

In acest articol am sa vorbesc despre cateva @reguli importante:

• @import – importa un alt fisier de stil in fisierul curent
• @charset – indica setul de caractere folosit de fisierul de stil
• @font-face – este folosit pentru a descrie un font ce va fi folosit in document
• !important – indica un stil important ce trebuie sa aiba prioritate

@import

Aceasta regula permite importarea unui alt fisier de stil in fisierul de stil curent. Ar trebuii sa apara chiar la inceputul fisierului de stil inainte de alte reguli, iar valoarea lui ar trebuii sa fie un URL.

O putem  folosi in urmatoarele moduri:

?

1 2 3 4 5

<style tyle="text/css"> <!-- @import "mystyle.css"; --> </style>

sau

?

1 2 3 4 5

<style tyle="text/css"> <!-- @import url("mystyle.css"); --> </style>

Aceasta regula este importanta si folositoare pentru ca ne permite sa ne creeam un “sistem” de stiluri modular.Puteti creea mai multe fisiere de stil si le puteti include doar unde va sunt necesare.@charset

Daca scrieti un document ce va folosi alt set de caractere in afara de ASCII sau ISO-8859-1 trebuies a folositi regula @charset la inceputul stylesheet-ului pentru a indica in setul de caractere in care este scris.

O putem  folosi in urmatorul mod:

?

1 2 3 4 5 6

<style tyle="text/css"> <!-- @charset "iso-8859-1" .......alte reguli CSS ..... --> </style>

@font-face

Aceasta regula poati fi folosita pentru a descrie un font  ce va fi folosit in fisierul de stil, sau locatia din care poate fi downloadat un font.

De obicei aceasta regula este ceva mai complicata, deci nu este recomandat sa fie folosita de catre incepatori.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style tyle="text/css"> <!-- @font-face {   font-family: "Scarborough Light";  src: url("http://www.font-uri.com/s/scarbo-lt"); } @font-face {  font-family: Santiago;  src: local ("Santiago"),  url("http://www.font-uri.com/s/santiago.tt")  format("truetype");  unicode-range: U+??,U+100-220;  font-size: all;  font-family: sans-serif; } --> </style>

!important

CSS, acronim pentru Cascading Style Sheets, asta inseamna ca stilurile scrise aici sunt citite si interpretate de catre browser in ordinea scrierii. Primul stil este aplicat, iar apoi al doilea, apoi al treile si asa mai departe.

Aceasta regula, !important, ne permite sa ii spunem browserului ce stiluri sunt importante si trebuiesc aplicate indiferent ce altceva mai este scris in fisier.

De exmplu, putem avea doua stiluri diferite pentru un div, primul stil va face fontul din div-uri rosu, air al doilea il va face galen:

?

1 2	div{ color: red; } div{ color: yellow; }

rezultatul este clar, fontul va fi galben, pentru ca acela este ultimul stil pentru div.Dar, pentru rezolva aceasta problema putem face aceasta simpla modificare:

?

1 2	div{ color: red !important; } div{ color: yellow; }