лзва свойства за подравняване на текст, преобразуване на текст и цвят. Абзацът е отстъпен, подравнен и е посочено интервала между символите. Подчертаването е премахнато от тази цветна връзка „Опитайте сами“ .
1. Цвят на текста
В colorимота се използва за задаване на цвета на текста. Цветът се определя от:
- име на цвят - като "червен"
- шестнадесетична стойност - като "# ff0000"
- RGB стойност - като "rgb (255,0,0)"
Погледнете CSS стойностите на цвета за пълен списък с възможни стойности на цветовете.
Цветът на текста по подразбиране за страница е дефиниран в селектора на тялото.
Пример
body {
color: blue;
}
h1 {
color: green;
}Забележка: За CSS, съвместим с W3C: Ако дефинирате colorсвойството, трябва да дефинирате и background-color.
Цвят на текста и цвят на фона
В този пример дефинираме както background-colorсвойството, така и colorсвойството:
Пример
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}2. Подравняване на текста
В text-alignимота се използва за задаване на хоризонталното подравняване на текст.
Текстът може да бъде подравнен вляво или вдясно, центриран или оправдан.
Следващият пример показва изравнен по центъра и подравнен вляво и вдясно текст (подравняването вляво е по подразбиране, ако посоката на текста е отляво надясно, а подравняването вдясно е по подразбиране, ако посоката на текста е отдясно наляво):
Пример
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}Когато text-alignсвойството е зададено да "оправдава", всеки ред се разтяга, така че всеки ред да има еднаква ширина, а лявото и дясното поле са прави (като в списания и вестници):
Пример
div {
text-align: justify;
}Посока на текста
На directionи unicode-bidiсвойства могат да се използват за промяна на посоката на текста на елемент:
Пример
p {
direction: rtl;
unicode-bidi: bidi-override;
}Вертикално подравняване
В vertical-alignимота определя вертикалното подравняване на елемент.
Този пример демонстрира как да зададете вертикално подравняване на изображение в текст:
Пример
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}3. Декорация на текст
В text-decorationимота се използва за задаване или премахване на декорации от текст.
Стойността text-decoration: none;често се използва за премахване на подчертавания от връзки:
Пример
a {
text-decoration: none;
}Останалите text-decorationстойности се използват за украса на текст:
Пример
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}Забележка: Не се препоръчва да се подчертава текст, който не е връзка, тъй като това често обърква читателя.
4. Преобразуване на текст
В text-transformимота се използва за определяне на главни и малки букви в текста.
Може да се използва, за да превърне всичко в главни или малки букви или да изписва с главна буква първата буква на всяка дума:
Пример
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}5. Отстъп на текст
В text-indentимота се използва за определяне на отстъп на първия ред на текста:
Пример
p {
text-indent: 50px;
}Разстояние между буквите
В letter-spacingимота се използва за определяне на разстоянието между героите в един текст.
Следващият пример демонстрира как да увеличите или намалите интервала между символите:
Пример
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}Височина на линията
В line-heightимота се използва за определяне на пространството между редовете:
Пример
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}Разстояние между думи
В word-spacingимота се използва за определяне на пространството между думите в текста.
Следващият пример показва как да увеличите или намалите интервала между думите:
Пример
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}Бяло пространство
В white-spaceимота се уточнява как се борави с паузи вътре елемент.
Този пример демонстрира как да деактивирате обвиването на текст вътре в елемент:
Пример
p {
white-space: nowrap;
}6. Текстова сянка
В text-shadowимота добавя сянка към текст.
При най-простата употреба вие посочвате само хоризонталната сянка (2px) и вертикалната сянка (2px):
Ефект на сянка на текст!
Пример
h1 {
text-shadow: 2px 2px;
}След това добавете цвят (червен) към сянката:
Ефект на сянка на текст!
Пример
h1 {
text-shadow: 2px 2px red;
}След това добавете ефект на размазване (5px) към сянката:
Ефект на сянка на текст!
Пример
h1 {
text-shadow: 2px 2px 5px red;
}Съвет: Отидете в нашата глава за CSS шрифтове, за да научите как да променяте шрифтовете, размера на текста и стила на текста.
Съвет: Отидете в нашата глава CSS Text Effects, за да научите за различните текстови ефекти.
Изпробвайте се с упражнения!
Всички CSS текстови свойства
| Property | Description |
|---|---|
| color | Sets the color of text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space between words in a text |
