Добар типографски дизајн е важен дел од успешна веб-страница. CSS Ви дава голема контрола врз појавата на текстот на веб-страниците на веб-страниците што ги градите. Ова ја вклучува способноста да ја смените бојата на фонтови што ги користите.
Боите на фонтот може да се менуваат со користење на надворешен стилски лист , внатрешен стилски лист или може да се смени со втиснат стил во HTML-документот. Најдобрите практики диктираат дека треба да користите надворешен стилски лист за вашите CSS стилови. Внатрешен стилски лист, кои се стилови напишани директно во "главата" на вашиот документ, генерално се користат само за мали сајтови со една страница. Вградените стилови треба да се избегнуваат, бидејќи тие се слични на старите "фонтови" тагови со кои се занимававме пред многу години. Оние вродени стилови го прават многу тешко да управуваат со стилот на фонтот, бидејќи ќе треба да ги промените во секој инстант на вградениот стил.
Во оваа статија, ќе научите како да ја промените бојата на фонтот користејќи надворешен стилски лист и стил кој се користи во таг од став. Може да се примени ист стил на имотот за промена на бојата на фонтот на која било ознака што го опкружува текстот, вклучувајќи ја и ознаката
.Додавање стилови за промена на фонт на фонт
За овој пример, ќе треба да имате HTML документ за означување на страницата и посебна CSS-датотека што е прикачена на тој документ. HTML-документот најверојатно ќе направи голем број елементи во него. Она за што сме засегнати за целите на оваа статија е елементот од став.
Еве како да ја смените бојата на фонтот на текстот во табулаторот за став користејќи го вашиот надворешен стилски лист.
Вредностите на боја можат да се изразат како клучни зборови во боја, броеви на бои RGB или хексадецимални броеви на бои.
- Додајте атрибут на стилот за тагот на став:
- p {}
- Ставете ја сопственоста на бојата во стилот. Ставете дебело црево по тоа својство:
- p (боја:)
- Потоа додадете ја бојата по имотот. Бидете сигурни дека ќе ја завршите таа вредност со полу-дебелото црево:
- p (боја: црна;)
Пасусите на вашата страница сега ќе бидат црни.
Овој пример користи клучен збор во боја - "црно". Тоа е еден начин да се додаде бојата во CSS, но тоа е многу ограничување. Користењето на клучни зборови за "црно" и "бело" е едноставно бидејќи овие две бои се многу специфични, но што се случува ако користите клучни зборови како "црвено", "сино" или "зелено"? Точно каква сенка на црвена, сина или зелена ќе добиете? Вие не може да наведете точно која нијанса на бои сакате со клучни зборови. Ова е причината зошто хексадецималните вредности често се користат на местото на клучни зборови во боја.
p (боја: # 000000; }
Овој стил на CSS, исто така, ќе ја постави бојата на ставовите во црно, бидејќи хексадекот на # 000000 се преведува на црно. Можете дури и да користите стенографија со таа хекса вредност и да ја напишете како само # 000 и ќе добиете истото.
Како што веќе споменавме, хексадецималните вредности работат добро кога ви треба боја што не е само црна или бела боја. Еве еден пример:
p (боја: # 2f5687; }
Оваа хекса вредност ќе ги постави ставовите во сина боја, но за разлика од клучниот збор "сина", овој хексадецим ви дава можност да поставите многу специфична нијанса на сина боја - најверојатно оној што дизајнерот ќе го избере кога ќе го креира интерфејсот за оваа веб-страница. Во овој случај, бојата ќе биде сина во сина боја како среден опсег.
Конечно, можете да ги користите RGBA вредностите за боја за боите на фонтот. RGCA сега е поддржан во сите современи прелистувачи, па можете да ги користите овие вредности со малку грижи дека нема да бидат поддржани во веб-прелистувачот, но исто така можете да поставите лесно резервен одговор.
p (боја: rgba (47,86,135,1); }
Оваа RGBA вредност е иста како и сина боја означена погоре. Првите 3 вредности ги поставуваат црвените, зелените и сините вредности, а конечниот број е поставувањето алфа. Таа е поставена на "1", што значи "100%", така што оваа боја нема да има транспарентност. Ако го поставите тоа до децимален број, како .85, тоа ќе преведе 85% непроѕирност и бојата ќе биде малку транспарентна.
Ако сакате да ги заштитите вашите вредности на бои, ќе го направите ова:
p {
боја: # 2f5687;
боја: rgba (47,86,135,1);
}
Оваа синтакса прво го поставува хексадекот. Потоа таа ја пребрише таа вредност со бројот на RGBA. Ова значи дека секој постар прелистувач кој не поддржува RGBA ќе ја добие првата вредност и ќе го игнорира вториот. Современите прелистувачи ќе го користат вториот по каскадата на CSS.