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