Cascading Style Sheets (CSS)/Specificarea Font-ului si a Mostenirii

De la Wikimanuale, o colecţie de manuale libere !

Problema ce o discutam acum este "specificarea font-ului si a mostenirii".

Pentru aceasta problema venim cu o declaratie "font-family:" astfel :

p {
  font-family: Georgia, Verdana, "Trebuchet MS", "sans-serif";
}

Dupa cum se observa mai sus, am scris o lista de font-uri, separate prin virgule. Aceasta va spune browser-ului utilizatorului, ca in cazul in care nu gaseste primul font specificat sa il ia pe al doilea sau al treilea. Ultima declaratie "sans-serif" specifica clasa de font-uri. Motivul pentru care am incadrat-o in ghilimele se refera la faptul ca in interiorul cuvantului ca intreg, avem spatii ( exemplu: Trebuchet MS ) sau alte caractere non-literare. ( - / + = \ ) CSS ofera 5 clase de font-uri, si anume : serif / sans-serif / monospace / cursive / fantasy.

Toate browserele folosesc o lista de font-uri care cad in cele 5 familii. In cazul in care sunt specificate font-uri ce nu se gasesc pe masina utilizatorului, browser-ul va alege automat un font din clasa specificata.

Cele 2 clase fantasy si cursive, ofera probleme, in primul rand ca fantasy este un "catch-all" pentru celelalte clase, intelegand de aici ca in cazul in care nu se gaseste nici un font, din nici o clasa, sau din cele specificate, se va folosi font-ul din fantasy, iar "cursive" pune problema browser-ului care nu ar putea reda un font cursiv.

Nu trebuie sa declaram o clasa CSS pentru fiecare tag folosit, deoarece un tag 'copil' mosteneste atributele tag-ului parinte.

Singurele tag-uri care nu mostenesc sunt h2 si p care sunt copii ai tag-ului body. In cazul in care mostenirea s-ar face, aspectul unei pagini ar deveni bizar.

Un alt caz in care mostenirea nu are loc, e in cazul in care browserul nu suporta acest lucru. De exemplu in Netscape 4, tag-urile 'copil' pot sa nu mosteneasca atributele font-family si color. Pentru aceasta exista un o solutie:

body {

 font-family: Georgia, Times, "Times New Roman", serif;

 color: #030;

}

h1, h2, h3, h4, h5, h6, p, td, ul, ol, li, dl, dt, dd, {

 font-family: Georgia, Times, "Times New Roman", serif;

 color: #030;

}