Преминете към основното съдържание

Стилове за текст

CSS свойствата, използвани за стилизиране на текст, обикновено се разделят на две категории:

Стилове на шрифта (Font styles) - Свойства, които влияят на шрифта на текста, например кой шрифт се прилага, неговият размер и дали е удебелен, курсив и др. Стилове на оформление на текста (Text layout styles) - Свойства, които влияят на разстоянието и други характеристики на оформлението на текста, позволявайки манипулиране, например на разстоянието между редовете и буквите и как текстът е подравнен в полето за съдържание. [1]

Шрифтове​

Използвайте свойствата за задаване на шрифт в CSS, за да стилизирате текст, да определите неговия размер, удебеляване и семейство от шрифтове.

Типографията е едно от първите неща, които потребителят забелязва на страницата, а CSS ви дава прецизен контрол върху нея. Свойствата на шрифта в CSS определят шрифта (семейството шрифтове - font family), размера, дебелината (удебелен шрифт) и стила (като курсив) на вашия текст. [2]

CSS свойството font е съкращение, което комбинира няколко свойства на шрифта. Ето отделните свойства, които го съставят:

Когато добавяме текст или връзки към уебстраница, ние ги стилизираме, използвайки тези свойства. Нека ги разгледаме подробно.

Font Family​

Използваме свойството font-family, за да укажем шрифта за текста. Това определя името на шрифта, използван на уебстраницата.

p {
    font-family: Arial, sans-serif;
}

Както можете да видите, приложихме свойството font-family към нашия таг <p>. Разграничаваме два вида семейства:

  • Generic family (общо семейство) - Група от семейства шрифтове с подобен вид (като "Serif" или "Sans-serif").
  • Font family (семейство шрифтове) - Определено семейство шрифтове (като "Times New Roman" или "Arial").
Бележка

Когато името на семейство шрифтове се състои от повече от една дума, оградете я в кавички (напр. "Times New Roman"). Препоръчително е също да предоставите резервно семейство шрифтове, в случай че браузърът не поддържа първото.

Font Style​

Използваме свойството font-style предимно за показване на текст в курсив.

Най-често използваните стойности за свойството font-style са:

  • normal - Показва текста нормално.
  • italic - Показва текста в курсив.
  • oblique - Накланя текста.

Code


<p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
<p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
<p style="font-style:oblique">This is paragraph with font-style property with oblique value.</p>

Preview

По подразбиране текстът ни ще бъде с normal стил на шрифта, дори без да се записва тази стойност.

Font Size​

Използваме свойството font-size, за да зададем размера на текста.

Стойностите могат да бъдат зададени в pixels, points, em, rem и др. Можете да намерите пълния списък със стойности в секцията font-size. Обърнете внимание, че 1em е равно на изчисления размер на шрифта на родителския елемент (често 16px по подразбиране). Пикселите (px) са най-често използваната единица.

Code


<h3 style="font-size:40px;"> Some heading with font-size property.</h3>
<p style="font-size:25px;"> Some paragraph with font-size property.</p>
<a style="font-size:2em;"> Some link with font-size property.</a>

Preview

Font Weight​

Сега нека научим как да направим обикновения текст по-удебелен, тъй като заглавията са удебелени по подразбиране.

За това използваме свойството font-weight.

Най-често използваните стойности за свойството font-weight са:

  • normal.
  • bold.

Стойностите могат да бъдат зададени и като числа.

Code


<p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
<p style="font-weight:normal">Some paragraph with the font-weight property with value normal.</p>
<p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>

Preview

Числовите стойности варират от 100 до 900. Стойността 400 съответства на нормален шрифт, а 700 съответства на удебелен. С увеличаване на числото от 100 до 900, шрифтът става по-удебелен.

Font Variant​

Свойството font-variant ви позволява да зададете текст на нормален или малък регистър (small-caps).

Стойността small-caps преобразува малките букви в главни, но ги показва с по-малък размер от оригиналните главни букви.

Code


<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p style="font-variant: small-caps;">But We Used A Text With Small-Caps Here.</p>

Preview

Font​

Вместо да пишете всяко свойство на отделен ред, можете да ги зададете всички наведнъж със съкращението font. Това прави вашите стилове по-кратки и групира свързаните декларации заедно.

Редът на стойностите е важен. Синтаксисът е:

font: font-style font-variant font-weight font-size/line-height font-family;

Няколко правила, които трябва да запомните:

  • font-size и font-family са задължителни. Ако някой от тях липсва, цялата декларация се игнорира.
  • font-style, font-variant, and font-weight са незадължителни и трябва да са преди font-size.
  • line-height е незадължителна и се пише след font-size, разделена с наклонена черта (/).
  • Всяка стойност, която пропуснете, се връща към стойността си по подразбиране, така че съкратеният вариант е удобен начин за изчистване на по-ранни декларации с пълен вариант.
/* Longhand */
p {
  font-style: italic;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
  font-family: Georgia, serif;
}

/* Equivalent shorthand */
p {
  font: italic bold 18px/1.5 Georgia, serif;
}

Текст​

CSS ви дава прецизен контрол върху това как изглежда текстът. Разгледани са основните свойства, които се прилагат върху текст. [3]

Text Color​

Свойството color задава цвета на текста на елемента (и по подразбиране, неговите текстови декорации, като например подчертавания - underlines). Можете да зададете стойността като цвят (red), HEX стойност (#ff0000), стойност на rgb() / rgba() (rgb(255 0 0)) или hsl() стойност. Тъй като цветът се наследява, задаването му върху контейнер го прилага към целия наследен текст, освен ако наследен елемент не го презапише.

Code


<p style="color:#ff0000">This is some paragraph in red.</p>

Preview

Text Alignment​

Свойството alignment се използва за подравняване на текст вътре в елемент вляво, вдясно, в центъра и т.н.

Подравняването на текст има четири стойности:

  • Left (text-align: left) - Подравнява текста вляво.
  • Right (text-align: right) - Подравнява текста вдясно.
  • Center (text-align: center) - Поставя текста в центъра на страницата.
  • Justify (text-align: justify) - Разтяга реда с текст, за да подравни и левия, и десния край (както в списания и вестници).

По подразбиране браузърите подравняват текста в началото на реда - вляво. Използвайте съответстващата стойност, когато се нуждаете от различно подравняване.

Code


<p>This is some paragraph</p>
<p style="text-align:center">Some paragraph with value center.</p>
<p style="text-align:right">Some paragraph with value right.</p>
<p style="text-align:justify">Some paragraph with value justify.</p>

Preview

Text Decoration​

Свойството text-decoration добавя линии към текста. В съвременния CSS това е съкращение за text-decoration-line, text-decoration-color и text-decoration-style. Най-често срещаните стойности за частта text-decoration-line са:

  • Overline (text-decoration: overline) - Чертае линия над текста.
  • Underline (text-decoration: underline) - Чертае линия под текста.
  • Line-through (text-decoration: line-through) - Чертае линия през средата на текста.
  • None (text-decoration: none) - Премахва всякаква декорация; това е, което използвате, за да премахнете подчертаването по подразбиране от хипервръзките.

Code


<a style="text-decoration:none">This is link without underline</a>
<h1 style="text-decoration:overline">Heading with value overline.</h1>
<p style="text-decoration:line-through">Some paragraph with value line-through.</p>
<a style="text-decoration:underline">Some hyperlink with value underline.</a>

Preview

Text Transform​

Свойството transform се използва за контрол на буквите в текста. Това означава, че можете да зададете текста да бъде с главни, малки или с първа главна (title case).

Свойството има следните стойности:

  • Uppercase (text-transform: uppercase) - Преобразува всички символи в главни.
  • Lowercase (text-transform: lowercase) - Преобразува всички символи в малки
  • Capitalize (text-transform: capitalize) - Преобразува първия символ от всяка дума в главен.
  • None (text-transform: none) - Оставя текста такъв, какъвто е въведен; това е настройката по подразбиране.

Code


<p style="text-transform:uppercase">Paragraph with uppercase.</p>
<p style="text-transform:lowercase">Paragraph with lowercase.</p>
<p style="text-transform:capitalize">Paragraph with capitalize.</p>

Preview

Бележка

Имайте предвид, че text-transform променя само начина, по който се показва текстът - основното HTML съдържание остава точно както сте го написали, което е важно за копиране и поставяне и достъпност.

Text Shadow​

Свойството text-shadow добавя една или повече сенки към текста. Всяка сянка е описана с до четири стойности, в следния ред:

text-shadow: h-shadow v-shadow blur-radius color;
  • h-shadow (задължително) - Хоризонтално отместване; положителната стойност премества сянката надясно, отрицателната - наляво.
  • v-shadow (задължително) - Вертикално отместване; положителната стойност премества сянката надолу, отрицателната - нагоре.
  • blur-radius (по избор) - Колко размазана е сянката; по-големите стойности я размазват повече (по подразбиране е 0).
  • color (по избор) - Цветът на сянката; ако е пропуснат, браузърът използва цвета на елемента.

Можете да подреждате множество сенки, като ги разделяте със запетаи, което е начинът, по който се изграждат ефектите на сияние и контур.

Code


<style>
h1 {
      text-shadow: 2px 2px 4px #888888;
}
h2 {
      /* Two shadows stacked to create a glow */
      text-shadow: 0 0 6px #ff0000, 0 0 12px #ff0000;
}
</style>

<h1>Heading with a soft drop shadow</h1>
<h2>Heading with a red glow</h2>

Preview

Text Indentation​

Свойството text-indentation (отстъп на текст) се използва за задаване на дължината на празното пространство на първия ред в текстов блок. Стойностите по-долу са валидни за това свойство:

  • length - Определя отстъпа в px, pt, cm, em и др. Стойността по подразбиране е 0. Допустими са отрицателни стойности.
  • percentage - Определя отстъпа като процент от ширината на съдържащия го блок.
  • each-line - Когато отстъпът засяга първия ред, както и всеки ред след принудително прекъсване на реда, но не засяга редовете след меко прекъсване.
  • hanging - Обръща кои редове са с отстъп. Първият ред не е с отстъп.
  • initial - Кара свойството да използва стойността си по подразбиране.
  • inherit - Наследява свойството от родителския елемент.

Code


<style>
p {
    text-indent: 100px;
    line-height: 24px;
    font-size: 16px;
}
</style>

<h2>Text Indentation Example</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>

Preview

Letter Spacing​

CSS свойството letter-spacing позволява да се дефинират интервалите между буквите/символите в текст. Следните стойности се поддържат от това свойство:

  • normal - Няма да има допълнителни интервали между символите. Това е стойността по подразбиране на това свойство.
  • length - Определя допълнително разстояние между символите. Допускат се отрицателни стойности.
  • initial - Кара свойството да използва стойността си по подразбиране.
  • inherit - Наследява свойството от родителския елемент.

Code


<style>
p {
    text-indent: 100px;
    line-height: 24px;
    font-size: 16px;
    letter-spacing: 5px;
}
h3 {
    letter-spacing: -1px;
}
</style>

<h2>Example of letter-spacing property</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h3>
Here is some text with letter-spacing property.
</h3>

Preview

Line Height​

Свойството line-height определя височината на реда. Използва се за задаване на водещите редове на текст. Ако стойността на line-height е по-голяма от стойността на font-size на елемент, разликата ще бъде водещата точка на текста. Ето стойностите, поддържани от това свойство:

  • normal - Определя нормална височина на реда. Това е стойността по подразбиране на това свойство.
  • length - Определя фиксирана височина на реда в px, cm и др.
  • number - Определя число, което се умножава по текущия размер на шрифта, за да се зададе височината на реда.
  • % - Определя височината на реда в проценти от текущия размер на шрифта.
  • initial - Кара свойството да използва стойността си по подразбиране.
  • inherit - Наследява свойството от родителския елемент.
Бележка

Числова стойност без мерни единици (например line-height: 1.5) обикновено е най-безопасният избор, защото се мащабира със собствения размер на шрифта на всеки елемент и избягва изненади при наследяване.

Code


<style>
p {
    line-height: 30px;
}
h3 {
    line-height: 1;
}
</style>

<h2>Example of line-height property</h2>
<p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
<h3>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</h3>

Preview

Word Spacing​

С помощта на свойството word-spacing можем да променяме разстоянието между думите в текст, а не отделните символи. Поддържа следните стойности:

  • normal - Определя нормално разстояние между думите. Това е стойността по подразбиране на това свойство.
  • length - Определя допълнително разстояние между думите. Може да се зададе в px, pt, cm, em и др. Отрицателните стойности са валидни.
  • initial - Кара свойството да използва стойността си по подразбиране.
  • inherit - Наследява свойството от родителския елемент.

Code


<style>
p {
    word-spacing: 1em;
}
h3 {
    word-spacing: -3px;
}
span {
    display: block;
    word-spacing: 3rem;
}
</style>

<h2>Example of word-spacing property</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h3>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</h3>
<span>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</span>

Preview

Използвана литература​