Стилизиране на текст чрез CSS
В урока Работа с параграфи превърнахме един на пръв поглед труден и изморителен за четене текст в приятен и разбираем, който значително подобрява изживяването на посетителите на нашия сайт.
Докато в предишния урок фокуса бе повече върху структурата на текстовите параграфи и подобряване на техния визуален вид, то тук ще разгледаме няколко допълнителни CSS свойства, които ни предоставят дори по-голям контрол върху по-доброто стилизиране на съдържанието.
В този урок ще разгледаме следните CSS свойства:
line-height
Това е едно от най-важните и използвани свойства в уеб страницата като цяло, защото ни позволява да регулираме разстоянието между редовете.
Това означава, че можем да направим престоя на посетителите ни или ужасно труден, или ненатрапчиво приятен.
Две от най-важните характеристики при работа с текст е той да бъде с приемливо голям и лесен за четене шрифт, и с достатъчно разстояние между редовете, което да позволява на текста да “диша”.
Виж следните примери:
(Текста е част от произведението на Елин Пелин – “Гераците”)
В Пример 1 текста е прекалено малък. Освен това разстоянието между редовете е също много малко, което прави параграфа труден за четене.
В Пример 2 нещата изглеждат малко по-добре. Големината на шрифта е същата, но разстоянието между редовете е увеличено, което позволява на текста да “диша”. Параграфа е лесен за четене, но текста напрагя очите заради малкия му размер.
Пример 3 ни предоставя оптимален вариант, при който текста е достатъчно голям и разстоянието между редовете е балансирано. Посетителя на нашата страница, без излишно натоварване върху очите, може изцяло да се фокусира върху четенето на текста.
Това е и целта на нашата страница, нали?
Да предоставим на посетителите ни добро изживяване и полезна, лесно откриваема информация, която не се крие в малки, трудни за четене редове.
Нека се върнем към line-height.
Това свойство може да приеме няколко стойности. Те са:
- line-height: { length | number | percentage |
- normal | inherit };
- length (дължина) – Може да приеме различни величини. Формата на тази стойност е число (с или без десетична запетая) незабавно последвано от мерната единица (px, em, cm и др.). Когато стойността е 0, добавянето на мерна единица е по желание. Като цяло стойностите се делят на два вида: relative (относителни) и absolute (абсолютни). И при двата вида негативните стойности са нелегални.
- relative (относителни) – Този тип стойности се определят на базата на други стойности за дължина. Те също се делят на два вида:
- em – Като база се взима стойността на font-size за съответния шрифт. Използват се често и могат да се адаптират към различни изходящи среди (например смартфон, таблет, компютър/лаптоп и т.н.);
- ex – Като база се взима стойността на x-height за съответния шрифт. Използва се много рядко;
Пример:
- h1 { line-height: 1.2em; }
Разстоянието между редовете на h1 заглавието ще бъде 1.2 пъти по-голямо от размера на шрифта (font-size) за този елемент (h1). Ако размера на шрифта е 24px, то line-height ще бъде 24 х 1.2 = 28.8px
- absolute (абсолютни) – Този тип стойности са фиксирани. Те най-често се използват, когато знаем изходящата среда. Тези мерни единици се състоят от физичните мерни единици и пиксела (px). Това са: in, cm, mm, pt, pc и px.
Пример:
- h1 { line-height: 22px }
Без значение от средата, в която ще отворим нашия сайт, разстоянието между редовете ще бъде 22px.
- relative (относителни) – Този тип стойности се определят на базата на други стойности за дължина. Те също се делят на два вида:
- number (число) – Тази стойност е число (с или без десетична запетая), което се умножава със стойността на font-size на елемента. Негативните стойности са нелегални.
Пример:
- h1 {
- font-size:14px;
- line-height:1.5;
- }
Резултата за line-height е 14px х 1.5 = 21px.
- percentage (процент) – Работата на тази стойност е идентична на предишната. Числото, което използваме се умножава със стойността на font-size на елемента. Негативните стойности са нелегални.
Пример:
- h1 {
- font-size:14px;
- line-height:120%;
- }
Резултата за line-height е 14px х 120% = 16.8px.
- normal – Това е нормалното разстояние между редовете, което браузъра поставя по подразбиране. Обикновено това са стойности между 1.0 и 1.2.
- inherit - Унаследява стойността приложена върху родителския елемент.
В Стъпка 5 от упражнението към урока Работа с параграфи се запознахме с една лесна за запомняне и още по-лесна за прилагане формула, която ни помага да определим приблизително разстоянието между редовете.
Формулата е следната:
размер на шрифта х 1.5 = разстояние между редовете
Използвай я във всеки нов сайт, който създаваш, и в по-голямата част от случаите разстоянието между редовете ще бъде достатъчно.
Упражнение
Стъпка 1
Създай нов html документ и добави съдържание по твой избор, но бъди сигурен/а, че страницата съдържа поне 1-2 текстови параграфа. Също така създай и прикачи нов CSS файл, който ще използваме за стила на нашата страница.
(За текст съм използвал първите два абзаца от разказа на Елин Пелин – “Гераците”). За да не удължавам излишно страницата, ще използвам няколко думи от началото и края на всеки абзац. В работните файлове към урока обаче, текста ще бъде в пълния си вид.
При мен html документа изглеждат ето така:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html;
- charset=utf-8" />
- <title>YouDevelop.net - Стилизиране на текст чрез CSS</title>
- <link href="style.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <h1>Гераците - Първа глава</h1>
- <h4>Автор: Елин Пелин</h4>
- <p>Най-заможният човек в селото ...
- ... Затова всички го обичаха и почитаха.</p>
- <p>Неговата голяма и бяла къща, в която ...
- ... последните си дни много старци от рода им.</p>
- </body>
- </html>
CSS документа съдържа следното:
- body {
- font-family:Verdana;
- margin:0px auto;
- width:550px;
- }
- p {
- font-size:14px;
- }
Страницата е центрирана в браузъра и има ширина от 550px. Шрифта е Verdana, което го прави лесен за четене. Размера на текста в параграфите е 14px.
Като за начало резултата не изглежда зле, но разбира се целта ни е да го подобрим.
Стъпка 2
Нека увеличим разстоянието между редовете. Разгледай отново възможните стойности на свойството line-height и си избери няколко, които искаш да упражниш. В това упражнение аз ще работя с em стойност.
Промени CSS кода по следния начин:
- ...
- p {
- font-size:14px;
- line-height:1.5em;
- }
Разстоянието между редовете за всички параграфи ще бъде 1.5 пъти по-голямо от размера на текста: 14px х 1.5 = 21px.
Ако искаш да получиш същия резултат, но чрез проценти, тогава трябва да въведеш 150%.
Препоръчвам ти да отделиш няколко минути и да експериментираш с други стойности. Това е най-добрия начин да усвоиш всичко до тук.
text-align
Това свойство определя начина, по който съдържанието ще се подравни. Може да бъде приложено само върху блоков елемент. Може да приеме няколко стойности:
- text-align: { center | justify | left |
- right | inherit } ;
- center – Текста ще се центрира базирайки се на ширината на родителския елемент;
- justify – Текста ще се подравни от двете страни (ляво и дясно). В някои случаи се наблюдава прекомерно разстояние между думите.
- left – Текста ще се подравни от ляво;
- right – Текста ще се подравни от дясно;
- inherit - Унаследява стойността приложена върху родителския елемент.
Когато системата на четене е от ляво на дясно, по подразбиране текста ще бъде подравнен от ляво, освен ако не се приложат допълнителни настройки.
Когато системата на четене е от дясно на ляво, по подразбиране текста ще бъде подравнен от дясно, освен ако не се приложат допълнителни настройки.
Упражнение
Нека използме кода от упражнението към свойството line-height. Единственото, което ще допълним е CSS кода. Тъй като нашата система на четене е от ляво на дясно, браузъра по подразбиране ще подравни текста от ляво, затова нека упражним някои от другите стойности.
- ...
- p {
- font-size:14px;
- line-height:1.5em;
- text-align:justify;
- }
Резултата е следния (откъс от страницата):
text-decoration
Това свойство определя декорацията, която ще бъде приложена върху текстовото съдържание на даден елемент. Може да приеме няколко стойности:
- text-decoration: { { blink | line-through | overline |
- underline } … | none | inherit };
- blink – Кара текста да премига. Голяма част от браузърите не поддържат тази стойност;
- line-through – Прокарва хоризонтална черта през текста;
- overline – Прокарва хоризонтална черта над текста;
- underline – Прокарва хоризонтална черта под текста;
- none – Не поставя декорация върху текста;
- inherit - Унаследява стойността приложена върху родителския елемент;
Упражнение
Ще използвам същите файлове, върху които работихме до сега. Нека приложим това свойство върху h4 заглавието. След промяната CSS кода ще придобие следния вид:
- ...
- h4 {
- color:gray;
- text-decoration:underline;
- }
Запази промените и виж резултата в браузър.
text-indent
Ако си спомняш в училище госпожата по Български език все ни повтаряше, че когато започнем с писането на нов абзац е добре първият ред да бъде “два пръста по-навътре”. Това свойство ни позволява да направим точно това. След като го приложим, първият ред започва по-навътре (или по-навън, ако използваме негативна стойност).
Това свойство може да приеме няколко стойности:
- text-indent: { length | percentage | inherit };
- length (дължина) – Може да приеме същите стойности като length стойността на свойството line-height. Всичко, което важи за тази декларация, важи и тук. Негативните стойности са разрешени;
- percentage (процент) – Процент от ширината на елемента;
- inherit - Унаследява стойността приложена върху родителския елемент;
Стойността по подразбиране е 0.
Упражнение
Ще продължа с подобряването на кода, с който разполагаме понастоящем. Ще направим една малка промяна в стила, който прилагаме върху текстовите параграфи.
- ...
- p {
- font-size:14px;
- line-height:1.5em;
- text-align:justify;
- text-indent:1.5em;
- }
Резултата ще изглежда по следния начин.
text-transform
Това свойство контролира как и дали текстовото съдържанието на определен елемент ще бъде изписано с главни букви.
Може да приеме няколко стойности:
- text-transform: { capitalize | lowercase | none |
- uppercase | inherit };
- capitalize – Превръща първата буква от всяка дума в главна. Всички други букви остават непроменени;
- lowercase – Превръща всички букви в малки;
- none – Текста приема нормалния си вид;
- uppercase – Превръща всички букви в главни;
- inherit - Унаследява стойността приложена върху родителския елемент;
Упражнение
Нека приложим това свойство върху h1 заглавието. HTML кода ще си остане непроменен. В CSS документа, след кода който имаме до сега, въведи следното:
- ...
- h1 {
- text-transform:uppercase;
- }
Всички букви от заглавието ще бъдат превърнати в главни. Нека видим резултата:
letter-spacing
Това свойство ни позволява да добавим допълнително разстояние между символите (букви, цифри и др.) в текстовото съдържание на определен елемент.
Може да приеме няколко стойности:
- letter-spacing: { length | normal | inherit };
- length (дължина) – Тук важат същите правила като при свойството line-height. Негативните стойности са разрешени;
- normal – Стойността по подразбиране;
- inherit - Унаследява стойността приложена върху родителския елемент;
Упражнение
Нека подобрим h1 заглавието още малко. Стила му ще придобие следния вид:
- ...
- h1 {
- text-transform:uppercase;
- letter-spacing:2px;
- }
Резултат:
word-spacing
Това свойство е идентично с letter-spacing. Разликата тук е, че то ни позволява да добавим допълнително разстояние между думите в текстовото съдържание на определен елемент.
Може да приеме няколко стойности:
- letter-spacing: { length | normal | inherit };
- length (дължина) – Тук важат същите правила като при свойството line-height. Негативните стойности са разрешени;
- normal – Стойността по подразбиране;
- inherit - Унаследява стойността приложена върху родителския елемент;
Упражнение
В това упражнение ще променим разстоянието между думите в h4 заглавието. CSS кода ще придобие следния вид:
- h4 {
- color:gray;
- text-decoration:none;
- word-spacing:10px;
- }
Резултат:
Това е края на този урок. Разгледахме няколко полезни CSS свойства, които ни дават контрол върху стила на текста на нашата уеб страница.