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