Добрая друкарская дызайн з'яўляецца важнай часткай паспяховага сайта. CSS дае вам большы кантроль над знешнім выглядам тэксту на вэб - старонках вэб - старонак вы будуеце. Гэта ўключае ў сябе магчымасць змяніць колер любых шрыфтоў, якія вы выкарыстоўваеце.
Колер шрыфта можна змяніць з дапамогай знешняй табліцы стыляў , у ўнутраных табліцы стыляў , ці яно можа быць зменена з дапамогай убудаванага стылю ў HTML - дакуменце. Лепшыя практыкі дыктуюць, што вы павінны выкарыстоўваць знешнюю табліцу стыляў для стыляў CSS. Унутраная табліца стыляў, якія стылі напісаны непасрэдна ў «галаве» дакумент, як правіла, выкарыстоўваецца толькі для сайтаў, маленькіх, адзін-старонак. Убудаваныя стылі варта пазбягаць, паколькі яны падобна старым «шрыфт» тэгаў, якія мы мелі справу з шмат гадоў таму. Гэтыя ўнутраныя стылі робяць яго вельмі цяжка кіраваць стылем шрыфта, так як вам трэба будзе змяніць іх у кожным выпадку ўнутранага стылю.
У гэтым артыкуле вы даведаецеся, як змяніць колер шрыфта, выкарыстоўваючы знешнюю табліцу стыляў і стыль, які выкарыстоўваецца ў пункце тэга. Вы можаце ўжыць тое ж ўласцівасць стылю, каб змяніць колер шрыфта на любым тэгу, які акружае тэкст, у тым ліку тэга
.Даданне стыляў Змена колеру шрыфта
Для гэтага прыкладу, Вы павінны былі б мець HTML-дакумент для вашай старонкі разметкі і асобнага файла CSS, які прыкладаецца да гэтага дакумента. HTML дакумент, хутчэй за ўсё, зрабіць шэраг элементаў у ім. Адзін мы маем справу з мэтай гэтага артыкула з'яўляецца пункт элемент.
Вось як змяніць колер шрыфта тэксту ўнутры тэгаў абзаца з дапамогай вонкавай табліцы стыляў.
Значэння колеру можа быць выяўленыя ў выглядзе каляровых ключавых слоў, нумары колеру RGB або шаснаццаткавыя нумары колеру.
- Дадайце атрыбут стылю для тэга абзаца:
- р {}
- Змесціце ўласцівасць колеру ў стылі. Змесціце двукроп'е пасля гэтага ўласцівасці:
- р {колер:}
- Дадайце значэнне колеру пасьля ўласцівасці. Пераканайцеся ў тым, каб скончыць гэта значэнне з коскай:
- р {колер: чорны;}
Пункты ў вашай старонцы цяпер будуць чорнымі.
У гэтым прыкладзе выкарыстоўваецца ключавое слова колер - «чорны». Гэта адзін са спосабаў, каб дадаць колер у CSS, але гэта вельмі абмяжоўвае. Выкарыстанне ключавых слоў для «чорнага» і «белага» з'яўляецца прамым, так як гэтыя два колеры вельмі спецыфічныя, але што адбудзецца, калі вы выкарыстоўваеце ключавыя словы, як «чырвоны», «сіні», або «зялёны»? Менавіта тое, што адценне чырвонага, сіняга ці зялёнага колеру вы атрымаеце? Вы не можаце вызначыць, які менавіта адценне вы хочаце з дапамогай ключавых слоў. Таму шаснаццаткавыя значэння часта выкарыстоўваюцца замест каляровых ключавых слоў.
р {колер: # 000000; }
Гэты стыль CSS будзе таксама ўсталяваць колер абзацаў ў чорны, так як шаснаццатковы код # 000000 перакладаецца на чорны. Можна нават выкарыстоўваць скарочаны з гэтым шаснаццатковай значэннем і запісаць яго як раз # 000, і вы атрымаеце тое ж самае.
Як мы ўжо згадвалі, шасцігранныя значэння працуюць добра, калі вам патрэбен колер, які не проста чорны ці белы. Вось прыклад:
р {колер: # 2f5687; }
Гэта шаснаццатковае значэнне будзе ўсталёўваць абзацы ў сіні колер, але ў адрозненне ад ключавога слова «блакітнага», гэта шаснаццатковы код дае магчымасць усталяваць вельмі спецыфічны адценне сіняга - верагодна, той, які дызайнер выбіраць, калі яны стваралі інтэрфейс для гэты сайт. У гэтым выпадку колер будзе ў сярэдзіне дыяпазону, шыфер, як сіні.
Нарэшце, вы можаце выкарыстоўваць значэнне колеру RGBA для колеру шрыфта, а таксама. RGCA зараз падтрымліваецца ва ўсіх сучасных браўзэрах, так што вы можаце выкарыстоўваць гэтыя значэння з невялікай колькасцю турботы, што яна не будзе падтрымлівацца ў вэб-браўзэры, але вы таксама можаце ўсталяваць просты запасны варыянт.
Р {колер: RGBA (47,86,135,1); }
Гэта значэнне RGBA з'яўляецца такім жа, як шыфер сіняга колеру, названым раней. Першыя 3 значэння задаюць значэння Чырвоны, зялёны і сіні, і канчатковае лік з'яўляецца ўсталяванне альфа. Ён усталёўваецца ў «1», што азначае «100%», таму гэты колер не будзе мець празрыстасць. Калі ўсталявана, што дзесятковы лік, як .85, было б перавесці на 85% непразрыстасці і колер будзе трохі празрыстым.
Калі вы хочаце куленепрабівальныя каляровыя значэння, вы маглі б зрабіць гэта:
р {
колер: # 2f5687;
Колер: RGBA (47,86,135,1);
}
Гэты сінтаксіс ўсталёўвае шаснаццатковы код першым. Затым ён перапісвае гэта значэнне з нумарам RGBA. Гэта азначае, што любы старэйшы браўзэр, які не падтрымлівае RGBA б атрымаць першае значэнне і ігнараваць другі. Сучасныя браўзэры будуць выкарыстоўваць другія згодна CSS каскаду.