Жақсы типографиялық дизайн сәтті веб-сайттың маңызды бөлігі болып табылады. CSS сізге веб-беттердегі мәтіннің пайда болуына үлкен мән береді. Бұл сіз қолданатын кез-келген қаріп түсін өзгертуге мүмкіндік береді.
Қаріптің түстерін сыртқы стиль кестесін , ішкі стиль кестесін пайдаланып өзгертуге болады немесе оны HTML құжат ішіндегі сызықты сәндеу арқылы өзгертуге болады. Ең жақсы тәжірибелер CSS стилі үшін сыртқы мәнер парағын пайдалану керектігін көрсетеді. Құжатыңыздың «басында» тікелей жазылған стилі болатын ішкі стиль парағы әдетте шағын, бір беттік сайттар үшін ғана пайдаланылады. Кірістірілген стильдерді болдырмау керек, өйткені олар ескі «шрифт» тегтеріне ұқсас, олар біз көп жылдар бұрын қарастырдық. Бұл кірістірілген стильдер, қаріп мәнерін басқару үшін өте қиын етеді, себебі оларды кірістірілген мәнердің әр данасында өзгерту қажет болады.
Бұл мақалада сыртқы мәнер парағын және параграфында пайдаланылатын мәнерді пайдаланып қаріп түсін өзгерту жолын үйренесіз. Мәтінді қоршап тұрған кез келген тегтің қаріп түсін өзгерту үшін бірдей мәнер сипатын қолдануға болады, оның ішінде
тегі.Қаріп түсін өзгерту үшін мәнерлерді қосу
Осы мысал үшін, бетіңізді түзетуге арналған HTML құжаты және осы құжатқа бекітілген жеке CSS файлы болуы керек. HTML құжатында ол бірнеше элементтерді шығаруы мүмкін. Осы мақаланың мақсаттары үшін алаңдағанымыз - бұл тармақ элементі.
Мәнер парағының ішіндегі мәтіннің қаріп түсінін сыртқы мәнер парағын пайдаланып қалай өзгерту керек.
Түс мәндері түсті кілт сөздер, RGB түстік сандары немесе он алтылық түстер сандары ретінде көрсетілуі мүмкін.
- Параграф тегіне арналған стиль атрибутын қосыңыз:
- p {}
- Түс сипатын мәнерге орналастырыңыз. Осы қасиетінен кейін қос нүкте қойыңыз:
- p {түсі:}
- Содан кейін сипатты кейін түсті мәніңізді қосыңыз. Бұл мәнді жартылай колонтық нүктемен аяқтауды ұмытпаңыз:
- p {түсі: қара;}
Сіздің параграфтарыңыз енді қара болады.
Бұл мысал түсті кілт сөзді пайдаланады - «қара». Бұл CSS-де түс қосудың бір жолы, бірақ ол өте шектеулі. «Қара» және «ақ» үшін кілт сөздерді пайдалану қарапайым, өйткені бұл екі түсті өте ерекше, бірақ «қызыл», «көк» немесе «жасыл» сияқты кілт сөздерді пайдаланғанда не болады? Қандай көлеңкеден қызыл, көк немесе жасыл түсті болады? Қандай түс реңкіңізді кілт сөздерді қажет ететінін нақты көрсете алмайсыз. Міне, осылайша он алтылық мәндері жиі түс кілт сөздерінің орнына қолданылады.
p {түсі: # 000000; }
Бұл CSS мәнері сіздің абзацтарыңыздың түсін қара етіп орнатады, себебі # 000000-ден оншақты код қара тілге аударылады. Сіз тіпті оншақты мәнмен стенографияны қолданып, оны # 000 ретінде жаза аласыз және сіз сол нәрсені аласыз.
Жоғарыда айтылғандай, тек қана қара немесе ақ түспен түс қажет болған кезде, алты мәндер жақсы жұмыс істейді. Міне мысал:
p {түсі: # 2f5687; }
Бұл hex мәні ежелерді көгілдір түсті етіп орнатады, бірақ «көк» кілт сөзіне қарағанда, бұл ондық код сізге көк түстің ерекше көлеңкесін орнату мүмкіндігін береді - мүмкін, дизайнер таңдаған кезде интерфейсті жасайды Бұл веб-сайт. Бұл жағдайда түстің орташа диапазоны, шифер тәрізді көк болуы мүмкін.
Ақырында, RGBA түсінің мәндерін қаріптердің түстеріне де қолдануға болады. Қазіргі уақытта RGCA барлық заманауи браузерлерде қолданады, сондықтан сіз бұл мәндерді веб-браузерде қолдау көрсетілмейтіндігімен алаңдатпай пайдалана аласыз, бірақ сіз сондай-ақ оңай қалпына келтіруді орната аласыз.
p {түсі: rgba (47,86,135,1); }
Бұл RGBA мәні бұрын көрсетілген сланец көк түсімен бірдей. Алғашқы 3 мәндер Қызыл, Жасыл және Көк мәндерін орнатады, ал соңғы сан альфа параметрі болып табылады. Ол «1» деп орнатылған, бұл «100%» дегенді білдіреді, сондықтан бұл түс мөлдір болмайды. Егер сіз оны 85 секундтық санға орнатсаңыз, ол 85% мөлдірлікке айналады және түсі біршама мөлдір болады.
Егер сіз түсті мәндеріне қарсы тұрсаңыз, мұны орындаңыз:
p {
түсі: # 2f5687;
Түсі: rgba (47,86,135,1);
}
Бұл синтаксис алдымен ондық кодты орнатады. Содан кейін бұл мән RGBA нөмірімен қайта жазылады. Бұл RGBA-ды қолдамайтын кез-келген ескі браузер бірінші мәнді алып, екіншісін елемейді дегенді білдіреді. Қазіргі браузерлер CSS каскадының екінші нұсқасын пайдаланады.