добре уеб дизайн често е свързана с добра типография. Тъй като толкова много от съдържанието на уеб страница се представя като текст, умението да го оформяте като привлекателен и ефективен е важно умение, което трябва да притежавате като уеб дизайнер. За съжаление, нямаме същото ниво на типографски контрол онлайн, каквото имаме в печат. Това означава, че не винаги можем да стилизираме надеждно текста в уебсайта по същия начин, по който бихме могли да го направим в отпечатано парче.
Един често срещан стил на абзаца, който често виждате в печат (и който можем да пресъздадем онлайн), е първият ред на този абзац с отстъп пространство в раздела. Това позволява на читателите да видят къде започва един параграф, а друг завършва.
Не виждате този визуален стил толкова много в уеб страниците, защото браузърите по подразбиране показват абзаци с интервал под тях като начин да покажете къде свършва един и започва друг, но ако искате да оформите страница, за да го имате вдъхновен от печат отстъпен стил на параграфи, можете да го направите с текст-отстъп стил собственост.
Синтаксисът за това свойство е прост. Ето как бихте добавили отстъп на текст към всички параграфи в документ.
п {
отстъп на текст: 2em;
}
Персонализиране на отстъпите
Един от начините, по които можете да посочите точно абзаците за отстъп, можете да добавите клас към абзаците, които искате с отстъп, но това изисква да редактирате всеки абзац, за да добавите клас към него. Това е неефективно и не следва HTML кодиране най-добри практики.
Вместо това трябва да помислите, когато отстъпвате абзаци. Ти отстъпваш абзаци, които следват директно друг абзац. За да направите това, можете да използвате съседния селектор за братя и сестри. С този селектор избирате всеки абзац, който е непосредствено предшестван от друг абзац.
p + p {
отстъп на текст: 2em;
}
Тъй като отстъпвате първия ред, трябва също така да се уверите, че вашите параграфи нямат допълнително пространство между тях (което е браузърът по подразбиране). Стилистично трябва да имате интервал между абзаците или отстъпи първия ред, но не и двата.
п {
margin-bottom: 0;
подложка отдолу: 0;
}
p + p {
margin-top: 0;
подложка: 0;
}
Отрицателни отстъпи
Можете също да използвате текст-отстъп свойство, заедно с отрицателна стойност, да накара началото на ред да отиде вляво, за разлика от дясното като нормално отстъп. Можете да направите това, ако ред започва с кавичка, така че кавичката да се появява в леко поле отляво на абзаца и самите букви все още образуват хубаво ляво подравняване.
Кажете например, че имате абзац, който е потомък на блок цитат и искате той да бъде с отрицателни отстъпи. Можете да напишете този CSS:
blockquote p {
отстъп на текст: -.5em;
}
Това би дало началото на абзаца, който вероятно включва началния знак, да се премести леко вляво, за да се създаде висяща пунктуация.
По отношение на маржовете и подложките
Често използвате уеб дизайн, който използвате стойности на марж или подложка за преместване на елементи и създаване на бяло пространство. Тези свойства обаче няма да работят за постигане на ефекта на отстъпения абзац. Ако приложите някоя от тези стойности към абзаца, целият текст на този абзац, включително всеки ред, ще бъде разположен на интервали вместо само на първия ред.