Добар типографски дизајн је важан део успешног сајта. ЦСС вам даје сјајну контролу над изгледом текста на веб страницама веб страница које градите. Ово укључује могућност промјене боје било којег фонта који користите.
Боје фонта могу се промијенити помоћу спољашњег листа стила , интерног стила или се може промијенити помоћу инлине стила унутар ХТМЛ документа. Најбоље праксе указују на то да користите спољашњи стилски стил за своје ЦСС стилове. Унутрашњи стилски стил, који су стилски написани директно у "глави" вашег документа, се углавном користи само за мале странице са једне стране. Треба избегавати инлине стилове јер су слични старим ознакама "фонта" са којима смо се бавили пре много година. Ти инлине стилови чине да је веома тешко управљати стилом фонта, јер бисте морали да их мењате у свакој инстанци инлине стила.
У овом чланку ћете научити како промијенити боју фонта користећи спољашњи стилски стил и стил који се користи у ознаци пасуса. Можете примијенити исту особину стила како бисте промијенили боју фонта на било којој ознаци која обрађује текст, укључујући и ознаку <боди>.
Додавање стилова за промену боје слова
За овај примјер, потребно је да имате ХТМЛ документ за означавање странице и засебну ЦСС датотеку која је приложена за тај документ. ХТМЛ документ би вероватно направио низ елемената у њему. Онај за који смо забринути у сврху овог чланка је елемент параграфа.
Ево како промијенити боју фонта текста унутар ознака пасуса користећи спољашњи стилски стил.
Вредности боје могу се изразити као кључне речи у боји, бројеви РГБ боја или хексадецимални бројеви боја.
- Додајте атрибу стила за ознаку пасуса:
- п {}
- Поставите својство боје у стил. Ставите дебело црево после тог својства:
- п {боја:}
- Затим додајте своју вриједност боје након својства. Уверите се да ову вредност завршите помоћу половине кључа:
- п {цолор: блацк;}
Ставови на вашој страници сада ће бити црни.
Овај примјер користи кључну ријеч боја - "црна". То је један начин додавања боје у ЦСС-у, али је врло ограничавајући. Коришћење кључних ријечи за "црно" и "бело" је једноставно јер су ове две боје врло специфичне, али шта се догађа ако користите кључне ријечи попут "црвене", "плаве" или "зелене"? Тачно каква ће вам нијанса црвене, плаве или зелене? Не можете прецизно навести коју боју боја желите са кључним речима. Због тога се често користе хексадецималне вредности уместо кључних ријечи у боји.
п {боја: # 000000; }
Овај ЦСС стил би такође поставио боју ваших параграфима у црно, јер хекс код # 000000 претвара у црно. Можете чак и користити стенографију с том вриједношћу хека и написати је као # 000 и добићете исту ствар.
Као што смо већ поменули, хек вриједности добро раде када вам је потребна боја која није једноставно црна или бијела. Ево примера:
п {боја: # 2ф5687; }
Ова вредност хекса би поставила параграфима плавом бојом, али за разлику од кључне речи "плава", овај хекс код вам даје могућност да поставите врло специфичну нијансу плаве боје - вероватно она коју дизајнер изабере када су креирали интерфејс за овај веб сајт. У овом случају боје би биле плаве боје средњег опсега.
Коначно, можете користити РГБА вриједности боје за боје фонта. РГЦА је сада подржана у свим модерним претраживачима, тако да можете користити ове вриједности са мало бриге да неће бити подржани у веб претраживачу, али такођер можете поставити једноставан повратак.
п {боја: ргба (47,86,135,1); }
Ова РГБА вриједност је иста као и плава боја предвиђена раније. Првих 3 вредности постављају вредности црвене, зелене и плаве, а крајњи број је алфа подешавање. Постављена је на "1", што значи "100%", па ова боја не би била транспарентна. Ако то подесите на децимални број, као што је .85, то би преводило на 85% прозирност и боја би била благо транспарентна.
Ако желите да отклоните своје вредности боје, урадите следеће:
п {
боја: # 2ф5687;
боја: ргба (47,86,135,1);
}
Ова синтакса прво поставља хек код. Затим преписује ту вредност са РГБА бројем. То значи да било који старији претраживач који не подржава РГБА би добио прву вриједност и игнорисао други. Савремени прегледници би користили другу по ЦСС каскади.