CSS Својства текста¶
CSS правила нам омогућавају да опишемо изглед текста у HTML елементима.
Својство |
Дефиниција |
|---|---|
|
величина фонта, најчешће у пикселима |
|
фамилија фонтова која представља стил којим ће бити приказан текст |
|
дебљина фонта, најчешће у пикселима |
|
боја фонта (нпр. |
За елементе који садрже текст могу се подесити и друга својства, као што је background-color – које дефинише која ће бити боја позадине елемента у коме се налази текст (нпр. red, blue, green).
Дефиниција изгледа слова која ће се применити на сваки параграф веб-стране може се написати овако:
Кад год претраживач наиђе на параграф текста који је представљен елементом <p> у HTML документу, текст тог параграфа ће приказати на жутој позадини црвеним словима величине 12 пиксела из фамилије Times New Roman.
Фамилије фонтова¶
У многим напредним програмима за процесирање текста као што је Microsoft Word сте вероватно видели да постоје такозване фамилије фонтова, којима се дефинише на који начин треба приказати слова.
Пример фамилије фонтова је Times New Roman, који је коришћен у британским новинама „The Times“. У случају да желите да текст на вашој веб-страни изгледа као текст у овим новинама, онда би требало да одговарајућим HTML елементима доделите ову фамилију користећи CSS атрибут font-family.
Може се задати опште (генеричко) име фамилије или тачно (специфично) име фамилије.
Генеричко име фамилије описује опште карактеристике слова као што су писана слова (Cursive), слова са украсима-стопицама на ивицама (Serif), без украса (Sans-Serif), слова исте ширине (Monospaced), и слично.
Тачно име фамилије прецизно означава како треба приказати слова. Примери могу да буду Times New Roman који је специјална врста Serif фамилије, Arial који је специјална врста Sans-Serif фамилије, или Courier New који је специјална врста Monospace фамилије.
Као вредност CSS атрибута font-family се у пракси наводи листа више фонтова или њихових фамилија, а биће примењена прва препозната фамилија у редоследу навођења. Нека је на пример, наведено:
Како ће изгледати пример у вашем прегледачу зависи од фамилије фонтова која је подржана.
Узмимо пример првог параграфа где је листа фонтова наведена редом:
Times New RomanTimesserif
То је редослед којим ће прегледач покушати да прикаже текст. Прво ће покушати Times New Roman. Уколико фамилија фонтова није инсталирана, покушаће Times. Ако ни ово не успе, онда ће приказати слова неким подразумеваним типом из генеричке Serif фамилије.
Фамилија фонтова Times New Roman је подржана од већине прегледача, али Lato није. Тако се у трећем параграфу види да је текст заправо приказан типом из генеричке Monospaced фамилије.
Сајт W3Schools садржи листу фамилија фонтова које су подржане од стране већине прегледача.