Текстът е важен, дори и за най-фантастичния, визуално взискателен уеб дизайн. Обърнете на текста си вниманието, което заслужава с тези CSS свойства.
Каскадните стилови таблици (CSS) описват как HTML показва елементи на екрана. CSS може да контролира оформлението на множество уеб страници с няколко реда код.
CSS има свойства за форматиране, които влияят на разстоянието, външния вид и подравняването на текста. Ето някои свойства, които можете да използвате, за да стилизирате текст на страниците на приложението си.
1. Цвят на текста
The цвят свойството определя основния цвят на преден план на вашия текст. Можете да използвате предварително зададено име на цвят като червен, бяло, или зелено. Можете също да използвате шестнадесетична стойност или други единици като RGB, HSL и RGBA.
CSS рамки като Попътен вятър CSS имат вградена цветна функция, която показва различни нюанси. Това ви улеснява при избора на нюанс, който предпочитате. Нека променим цвета на следните заглавия, като използваме някои от тези свойства:
<тяло>
<h1>Промяна на моя цвятh1><h2>Промяна на моя цвятh2>
<h3>Промяна на моя цвятh3>
<h4>Промяна на моя цвятh4>
тяло>
CSS ще изглежда така:
h1 {
цвят: оранжево;
}h2 {
цвят: #ff6600;
}h3 {
цвят: rgb(255, 102, 0);
}
h4 {
цвят: hsl(24, 100%, 50%);
}
И стилизираният текст ще изглежда така:
2. Цвят на фона
Можете да използвате Цвят на фона собственост за създаване привлекателни фонове. Използвайте го, за да зададете различни фонове за следните заглавия:
<тяло>
<h1>Промяна на моя фонов цвятh1><h2>Промяна на моя фонов цвятh2>
<h3>Промяна на моя фонов цвятh3>
<h4>Промяна на моя фонов цвятh4>
тяло>
Със следния CSS:
h1 {
Цвят на фона: оранжево;
}h2 {
Цвят на фона: #009900;
}h3 {
Цвят на фона: rgb(204, 0, 0);
}
h4 {
Цвят на фона: hsl(60, 100%, 50%);
}
Когато браузърът ви визуализира тази страница, тя ще изглежда по следния начин:
3. Подравняване на текст
The подравняване на текст свойството задава хоризонталното подравняване на текста. Тази стойност може да бъде наляво, точно, център, или оправдавам.
Стойността за оправдаване разтяга всеки ред от текста, така че всички те заемат еднаква ширина в дясното и лявото поле. Използвайте следния примерен код, за да изследвате тези четири стойности:
<тяло>
<h1>Подравнете ме влявоh1><h2> Align Me Righth2>
<h3>Подравнете ме в центъраh3>
<стрклас="ex4"><силен>Изравнете ме оправданосилен>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.стр>
<стр><силен>Без подравняване силен>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.стр>
тяло>
Използвайте следния CSS, за да приложите различни подравнявания:
h1 {
подравняване на текст: наляво;
}h2 {
подравняване на текст: точно;
}h3 {
подравняване на текст: център;
}
.ex4{
подравняване на текст: оправдавам;
}
В браузъра това ще изглежда така:
4. Посока на текста
The текст-посока свойството определя посоката на текста. Определете посоката с помощта на свойства rtl (отдясно наляво) или ltr (Отляво надясно). Тези две указват в коя посока искате да тече текстът.
Например, използвайте rtl когато работите с езици, написани отдясно наляво, като иврит или арабски. Ти използваш ltr за езици, написани отляво надясно като английски.
Нека илюстрираме това с кода по-долу:
<тяло>
<див>
<стрклас='ex1'>Този параграф върви от дясно на ляво. Курсорът
се мести отдясно наляво, когато въвеждате повече информация за
страница.стр>
<стрдокумент за самоличност="ex2">Този параграф върви отляво надясно. Курсорът се движи
отляво, за да пишете, когато пишете повече информация на страницата!стр>
див>
тяло>
С този придружаващ CSS:
.ex1 {
посока: rtl;
}
#ex2 {
посока: ltr;
}
Крайният резултат ще изглежда така:
5. Текстова декорация
The текст-украса свойство задава външния вид на декоративни линии върху текста. Това е съкращение за текст-украса-ред,цвят на декорацията на текста,text-decoration-style, и текст-декорация-дебелина Имот. Ако не желаете да имате свойството върху елементи, които имат връзки, използвайте текст-декорация: няма;
Трябва да избягвате подчертаването на нормален текст, тъй като този стил обикновено означава връзка. Следната илюстрация показва някои примери в код:
<тяло>
<h1>Декорация на надчертан текстh1><h2>Декорация на текст през редh2>
<h3>Декорация на подчертан текстh3>
<стрклас="бивш">Надчертаване и подчертаване на текст.стр>
<стр><аhref="default.asp">Това е връзкаа>стр>
тяло>
Можете да прилагате различни декоративни ефекти с този CSS:
h1 {
текст-украса: надчертайте;
}h2 {
текст-украса: линейно преминаване;
}h3 {
текст-украса: подчертавам;
}стр.пр {
текст-украса: надчертайтеподчертавам;
}
а {
текст-украса: нито един;
}
И те ще покажат нещо подобно:
6. Трансформация на текст
The преобразуване на текст свойството указва типа регистър, в който се появяват буквите. Това може да бъде с главни или малки букви. Можете също да го използвате за главна първа буква на всяка дума:
Следният пример показва как да го направите в код:
<тяло>
<h1>Примери за свойство за преобразуване на текстh1><стрклас="Главна буква">Това изречение е с главни букви.стр>
<стрклас="малка буква">Това изречение е с малки букви.стр>
<стрклас="с главни букви">Напишете този текст с главни букви.стр>
тяло>
CSS файлът:
стр.Главна буква {
преобразуване на текст: Главна буква;
}стр.малка буква {
преобразуване на текст: малка буква;
}
стр.с главни букви {
преобразуване на текст: капитализирам;
}
Със следния резултат:
7. Разстояние между буквите
The разстояние между буквите свойството указва разстоянието между буквите в текста. Следващият пример илюстрира как да зададете различни стилове на разстояние.
<тяло>
<h1>Примери за междубуквени интервалиh1><h2>Това е заглавие 1h2>
<h3>Това е заглавие 2h3>
тяло>
Използвайте пиксели или други мерни единици във вашия CSS файл:
h2 {
разстояние между буквите: 7px;
}
h3 {
разстояние между буквите: -2px;
}
И полученият текст ще бъде разтегнат или притиснат:
8. Разстояние между думите
The разстояние между думите свойството указва разстоянието между думите в текста. Браузърите имат стандартна дължина за интервал между думите, но вие можете да зададете своя собствена. Следният пример илюстрира как да увеличите или намалите разстоянието между думите:
<тяло>
<h1>Примери за свойството Word-spacingh1><стр>Нормално разстояние между думите.стр>
<стрклас="ex1">Голямо разстояние между думите.стр>
<стрклас="ex2">Малко разстояние между думите.стр>
тяло>
Използвайки този CSS:
стр.ex1 {
разстояние между думите: 1рем;
}
стр.ex2 {
разстояние между думите: -0.3rem;
}
Можете ясно да видите ефекта от разстоянието между думите:
9. Височина на линията
The височина на линията свойство определя разстоянието между редовете в абзац. Стандартната и стандартната височина на реда в повечето браузъри е около 110% до 120%. Следният код илюстрира как да го промените:
<тяло>
<h1>Използване на line-heighth1><стр>
Стандартна височина на линията.Стандартна височина на линията.
стр>
<стрклас="малък">
Малък малък ред-височина.Малка височина на линията
стр>
<стрклас="голям">
По-голяма височина на линията.По-голяма височина на линията.
стр>
тяло>
Използвайки следния CSS:
стр.малък {
височина на линията: 0.7;
}
стр.голям {
височина на линията: 1.8;
}
Можете да видите резултатите между всеки ред във всеки параграф:
10. Текстова сянка
The текст-сянка свойството прилага сенки към текста. Трябва да посочите хоризонталната сянка и вертикалната сянка. Текст-сянка може да включва цвят и радиус на замъгляване. Нека илюстрираме това със следния код:
<тяло>
<h1>ПримеринаТекст-сянкаефект.h1><h1клас="ex1">Текст-сянкасцвятh1>
<h1клас="ex2">Текст-сянкасразмазванеефект.h1>
тяло>
С този CSS:
h1 {
текст-сянка: 2px 2px;
}.ex1 {
текстова сянка: 2px 2px оранжево;
}
.ex2 {
текстова сянка: 2px 2px 10px червено;
}
Ще доведе до някои необичайни и интересни ефекти:
Защо да научите CSS свойства за стилизиране на текст?
CSS е гръбнакът на съвременния уеб дизайн. Независимо дали във ванилова форма или в рамките, основната функция на свойствата на CSS е една и съща. Овладяването на свойствата за форматиране на текст ви позволява да създавате привлекателни и четливи потребителски интерфейси.
Последната версия на CSS, CSS3, въвежда нови концепции от анимации до оформления с няколко колони. Тези концепции улесняват създаването на професионални приложения и документи.