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

ЦСС вам даје контролу над изгледом текста на веб страницама које правите и којима управљате. У овом водичу ћемо вам показати како да промените боје фонта у ЦСС-у помоћу кључних речи у боји, хексадецималних кодова боја или РГБ бројева боја.

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

Вредности боја могу се изразити као кључне речи у боји, хексадецимални бројеви боја или РГБ бројеви боја. За ову лекцију мораћете да имате ХТМЛ документ да бисте видели промене ЦСС-а и а засебна ЦСС датотека која је приложена уз тај документ. Конкретно ћемо размотрити елемент пасуса.

Користите кључне речи у боји да бисте променили боје фонта

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

п {
боја Црна;
}

Користите хексадецималне вредности за промену боја фонтова

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

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

п {
боја: # 000000;
}

Хек вредности добро функционишу када вам је потребна боја која није једноставно црна или бела. На пример, овај хексадецимални код вам даје могућност да поставите врло специфичну нијансу плаве боје - плаву средину, попут шкриљевца:

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

Хек ради подешавањем РГБ (црвене, зелене, плаве) вредности боје одвојено са основних шеснаест вредности. Због тога садрже слова А. кроз Ф поред цифара 0 кроз 9.

Свака боја, црвена, зелена и плава, добија своју двоцифрену вредност. 00 је најнижа могућа вредност, док ФФ је највиша. Боје су наведене у РГБ редоследу у хексадецималном облику, тако да прве две цифре представљају вредност црвене боје и тако даље.

Користите вредности РГБА боја за промену боја фонта

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

Ова РГБА вредност је иста као горе наведена плава боја шкриљевца:

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

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

Ако желите да непробојно заштитите вредности боја, копирајте овај ЦСС код:

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

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

Важно је имати на уму да својство боје ради на било ком ХТМЛ елементу текста у ЦСС-у. Можете, на пример, да промените све боје везе. Овај пример ће ваше везе учинити светло зеленом:

а {
боја: # 16ц616;
}

Ово такође ради са више елемената одједном. Можете истовремено подесити сваки ниво наслова. На пример, ово ће поставити све елементе наслова на поноћно плаву боју:

х1, х2, х3, х4, х5, х6 {
боја: # 020833;
}

Састављање хек или РГБА вредности за ваше боје није увек лако. Већина веб дизајнера користиће програм за уређивање слика, попут Пхотосхопа или ГИМП-а, за генерисање тачних кодова. Такође можете на мрежи пронаћи прикладне алате за одабир боја, попут овај из в3сцхоолс.

Други начини обликовања ХТМЛ странице

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

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