Можете да подравнявате абзаците или съдържанието на клетките на таблица според изискванията си, използвайки следните свойства. Тези свойства могат да се приложат също и на всички останали елементи, на които може да се определи или изчисли височина или широчина.
Индентиране на първия ред
Започваме със свойството text-indent. Определя как първият ред на абзац да бъде индентиран. Възможно е и "изкачането" наляво. За целта трябва да се използва отрицателна стойност на text-indent. (Подробна информация за кога е разумно да се извърши екстремно изкачване следва по-долу). Очаква се числена стойност.
Пример:
.абзац { text-indent: 2em; }
В браузъра това изглежда по следния начин:
Ако използвате отрицателна стойност, има изкачване на текст в първият тексчт на плъзгащият път.
.абзац {
text-indent: -2em;
}
И разбира се, още един поглед към резултата в браузъра:
Също така нещо такова е възможно. Обаче, при дефинирането на изкачвания, обърнете внимание, че съдържанието все още трябва да се чете, ако е необходимо. Всъщност text-indent може да стане интересно и в контекста на оптимизацията за търсачки. Така например, понякога по-скоро бихме искали да показваме графики вместо текст.
Но ако текстът все пак трябва да бъде достъпен за търсачките, първо ще се сблъскате с дилемата. Това дилема може да се реши чрез използването на text-indent. Този атрибут ви позволява да преместите текстове. Така че можете да скриете текстове от гледното поле на посетителите.
Предимството на варианта с text-indent: Текстът, който трябва да бъде заменен с графика, остава непроменен в изходния код.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
С тази синтакса се присвоява фоновата графика на елемента h1. (Свойството background вече беше представено в този ред). Чрез text-indent: -99999px текстът на заглавието се измества с 99999 пиксела наляво. Текстът вече не е видим. Сега фактически се показва само изображението.
Ако деактивирате стиловия лист, текстът отново се вижда напълно нормално.
Задаване на височина на реда
Вече бях споменал за височината на реда в контекста на общото свойство font. Тук ще разгледам темата по-подробно. Интересна е дефиницията на височината на реда във връзка с размера на шрифта (font-size).
Височината на реда може да се определи с помощта на свойството line-height. Разрешени са числени стойности. Процентните стойности също са възможни. Те се отнасят до размера на шрифта на елемента, за който е указана височината на реда. Преди да дефинирате височината на реда, обърнете внимание на следното: Може да се случи, че браузърът/устройството дава предимство на височината на реда пред други свойства и показва елементите отрязани, ако те са по-високи. Това може да е дразнещо особено при графиките. Така че тествайте резултатите, преди да публикувате страницата онлайн.
Следният пример показва как да използвате line-height.
<p style="line-height:1.4em; font-size:1em;">Понякога създадем страхотно оформление, но липсват снимки и когато използваме само празни рамки, оформлението изглежда досадно. Но има по-добро решение: <br /> В това видео обучение ще ви покажа най-добрите уеб адреси, където може бързо да получите подходящи изображения. Една гениална листа можете да намерите например тук: <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">тук</a>.</p> <p style="line-height:2em;font-size:1em;">Понякога създадем страхотно оформление, но липсват снимки и когато използваме само празни рамки, оформлението изглежда досадно. Но има по-добро решение: <br /> В това видео обучение ще ви покажа най-добрите уеб адреси, където може бързо да получите подходящи изображения. Една гениална листа можете да намерите например тук: <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">тук</a>.</p> <p style="line-height:1em; font-size:1em;">Понякога създадем страхотно оформление, но липсват снимки и когато използваме само празни рамки, оформлението изглежда досадно. Но има по-добро решение: <br /> В това видео обучение ще ви покажа най-добрите уеб адреси, където може бързо да получите подходящи изображения. Една гениална листа можете да намерите например тук: <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">тук</a>.</p>
Бяха дефинирани три текстови параграфа, на които бяха присвоени различни линейни височини.
Както виждате, линейната височина може значително да повлияе на четливостта на тексовете. Така че бъдете внимателни с line-height.
Накрая, разбира се, се появява въпросът, каква линейна височина трябва да изберете. Обикновено се предпочитат линейни височини между 130 и 150 процента.
p {
line-height: 150%;
}
В крайна сметка обаче добрата четливост зависи предимно от ширината на шрифта. Тук важи: линейната височина трябва да бъде по-голяма, колкото по-дълги са текстилните редове. Затова обязателно тествайте страницата, за да се уверите, че четливостта е запазена.
Хоризонтално подравняване на текста
Чрез свойството text-align се определя хоризонталното подравняване на текстови параграфи и други текстилни или инлайн елементи в блокови елементи. За text-align могат да се определят следните стойности:
• left – ляво подравняване
• right – дясно подравняване
• center – центрирано
• justify – оправено
Ето и един пример:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>И в браузъра резултатът изглежда така:
Отбележете, че text-align не се отнася само за текстово съдържание. Свойството е в сила за всички инлайн елементи. Следователно, ако бъде включена картинка, дефиницията на text-align се отнася и за този елемент.
Още едно забележка: text-align не би трябвало – поне съгласно официалната спецификация на CSS – да се отнася за блокови елементи. (Въпреки че има браузъри, които го прилагат и за блокови елементи). Ако искате да подравнявате блокови елементи, използвайте вече представените свойства за margin.
