Skip to main content

Како промијенити боје фонтова веб странице са ЦСС

Anonim

Добар типографски дизајн је важан део успешног сајта. ЦСС вам пружа сјајну контролу над изгледом текста на веб страницама које градите. Ово укључује могућност промјене боје било којег фонта који користите.

У наставку ћемо погледати промену боје фонта користећи спољашњи стилски стил и стил који се користи у ознаци ставка. Можете примијенити исту особину стила како бисте промијенили боју фонта на било којој ознаци која окружује текст, укључујући и таг.

Додавање стилова за промену боје слова

За овај примјер, морате имати ХТМЛ документ да бисте видели промјене ЦСС-а и засебну ЦСС датотеку која је приложена за тај документ. Ми ћемо погледати елемент параграфа, конкретно.

Да бисте променили боју текста за сваки пасус у ХТМЛ датотеки, идите на спољашњи стилски стил и унесите га п {}. Поставите боја својство у стилу које слиједи дебело црево п {боја:}. Затим додајте своју вриједност боје након својства, завршавајући је тачком и зарезом: п {цолор: блацк;}.

Вредности боје могу се изразити као кључне речи у боји, бројеви РГБ боја или хексадецимални бројеви боја. У нашем примеру текст текста се мења у црну боју.

Међутим, ако желите да промените боју текста на зелену, плаву, црвену итд., Користећи кључне речи у боји неће вам бити флексибилна, можда ћете желети да креирате различите нијансе. Тамо долазе хексадецималне вредности за игру.

п {боја: # 000000; }

Овај стил ЦСС-а може се користити за обарање ваших параграфа црно јер хекс број шифра # 000000 преводи у црно. Можете чак и користити стенографију са том хек вриједношћу и написати је као # 000 са истим резултатима.

п {боја: # 2ф5687; }

Као што смо већ поменули, хек вриједности добро функционишу када вам је потребна боја која није једноставно црна или бијела. Горња вредност ЦСС хекса би поставила параграфима плавом бојом, али за разлику од кључне речи "плава", овај хекс код вам даје могућност да поставите врло специфичну нијансу плаве боје, у овом случају .

п {боја: ргба (47,86,135,1); }

Коначно, можете користити и РГБА вриједности боје за боје фонта. РГЦА је подржана у свим модерним претраживачима, тако да можете ове вриједности користити са сигурношћу да ће то радити за већину гледатеља, али такођер можете поставити једноставан повратак.

Ова РГБА вриједност је иста као и плава боја предвиђена раније. Прве три вредности постављају вредности црвене, зелене и плаве, а коначни број је алфа поставка за транспарентност. Поставка алфа је подешена на 1 до 100 процената, па ова боја нема транспарентност. Ако поставите ту вредност на децимални број, као што је .85, он преводи до 85 процената непрозирности и боја би била благо транспарентна.

п { боја: # 2ф5687; боја: ргба (47,86,135,1);}

Ако желите да отклоните своје вредности боје, имитирајте горе наведени ЦСС код. Ова синтакса прво поставља хек код, а затим преписује ту вриједност са РГБА бројем. То значи да ће сваки старији претраживач који не подржава РГБА добије прву вриједност и игнорише други.

Други начини стила ХТМЛ страница

Боје фонта могу се мењати помоћу спољашњег листа стила, интерног стила или инлине стила унутар ХТМЛ документа. Међутим, најбоље праксе указују на то да користите спољашњи стилски стил за своје ЦСС стилове.

Унутрашњи стилски стил, који су стилски написани директно у "глави" вашег документа, углавном се користи само за мале странице са једне стране. Треба избегавати инлине стилове јер су слични старим ознакама "фонта" са којима смо се бавили пре много година. Ови инлине стилови веома тешко управљају стилом фонта, јер морате их мењати у свакој инстанци инлине стила.