Skip to content

Початкові шапки CSS

20 de Червень de 2021

Дізнайтеся, як використовувати CSS для створення вигадливих початкових обмежень для ваших абзаців. Існує навіть проста техніка заміни зображень, щоб використовувати графічне зображення для початкової шапки.

Основні стилі початкових літер

У документах є три основних стилі початкових літер:

  • Підняли – найпоширеніший, де перша буква більша і знаходиться в тому ж рядку, що і поточний текст.
  • Впав – також досить поширений, коли перша буква більша і опускається нижче першого рядка тексту. Потім наступний текст плаває навколо нього.
  • Сусідній – де перша буква знаходиться в одній колонці поряд з рештою тексту. Це частіше зустрічається у друку, ніж веб-дизайн.

Початкові шапки або краплі дуже добре знайомі. Вони є чудовим способом одягнути довгі та нудні інтервали тексту. А за допомогою властивості CSS: first-letter ви можете легко визначити, як зробити перші літери приємнішими.

Створіть просту початкову кришку

Все, що вам потрібно зробити, щоб створити просту підняту початкову кришку, – це збільшити першу літеру абзацу за допомогою псевдоелемента першої літери: p: перша буква {font-size: 3em; }

Але багато браузерів бачать, що перша буква більша за решту тексту на рядку, тому вони роблять провідний рівним тому, що має сенс для цієї першої літери, а не решту рядка. На щастя, це легко виправити за допомогою псевдоелемента першого рядка та властивості line-height: p: first-letter {font-size: 3em; }
p: перший рядок {line-height: 1em; }

Грайте з висотою рядка в документі, поки не знайдете потрібний розмір тексту.

Грайте з початковою шапкою

Як тільки ви зрозумієте, як створити початкову шапку, ви можете одягнути її в вишуканий одяг, щоб вона виділялася. Пограйте з кольорами, кольорами тла, рамками або тим, що вражає вас. Досить простий стиль – змінити кольори шрифту та кольору тла лише на першу літеру: p: перша буква {
розмір шрифту: 300%;
фон-колір: # 000;
колір: #fff;
}
p: перший рядок {висота рядка: 100%; }

Ще одна хитрість – відцентрувати перший рядок. Це може бути складно з CSS, оскільки середина рядка тексту може бути різною, якщо ваш макет гнучкий. Але, погравши зі значеннями, ви можете зробити відступ у першому рядку настільки, щоб перша буква здавалася посередині. Просто пограйте з відсотком на текстовому відступі абзацу, поки він не буде виглядати правильно: p: перша буква {
розмір шрифту: 300%;
фон-колір: # 000;
колір: #fff;
}
p: перший рядок {висота рядка: 100%; }
p {відступ тексту: 45%; }

Сусідні початкові шапки важкі з CSS

Сусідні початкові літери можуть бути складними з CSS, оскільки різні браузери відображають шрифти по-різному. Ідея створення сусіднього шапки в CSS полягає у використанні властивості text-indent у першому рядку, щоб виштовхнути його (ліворуч) негативне значення. Вам також потрібно буде змінити ліве поле цього абзацу на деяку суму. Грайте з цими цифрами, поки абзац не буде виглядати добре. p {
відступ тексту: -2,5em;
поле зліва: 3em;
}
p: перша буква {font-size: 3em; }
p: перший рядок {висота рядка: 100%; }

Отримання справді вигадливих початкових шапок

Найкращий спосіб створити вигадливу початкову шапку – це змінити шрифт на більш декоративний тип сімейства. Якщо ви використовуєте серію шрифтів, за якими слідує загальний шрифт, це допоможе гарантувати, що ваша початкова шапка добре відображається, щоб ваші клієнти могли це бачити, не вникаючи в проблеми доступності та юзабіліті. p: перша буква {
розмір шрифту: 3em;
сімейство шрифтів: “Edwardian Script ITC”, “Brush Script MT”, скоропис;
}
p: перший рядок {висота рядка: 100%; }

І, як зазвичай, ви можете об’єднати всі ці пропозиції, щоб створити початковий обмежувач, який відповідає стилю реклами для вашого абзацу.

Використання графічного початкового обмеження

Якщо після всього цього вам все одно не подобається, як виглядають початкові літери на сторінці, ви можете вдатися до графіки, щоб отримати точний ефект, який ви шукаєте. Але перш ніж ви вирішите перейти безпосередньо до графіки, вам слід усвідомити недоліки цього методу:

  • Клієнти без зображень не бачитимуть початкового обмеження та можуть не бачити прихованого тексту, який зображення замінює. Це може зробити абзац недоступним або в кращому випадку важким для читання.
  • Зображення завжди додають час завантаження сторінки. Якщо у вас багато початкових обмежень, ви можете значно збільшити час завантаження для того, що багато людей вважатимуть незначним.
  • Деякі браузери відображатимуть як приховану першу літеру, так і зображення, що може зробити текст абзацу дивним.
  • Автоматизувати цей параметр дуже важко, оскільки ви повинні точно знати, що таке перша буква, щоб використовувати правильну графіку. Отже, кожного разу, коли абзац редагується, можливо, вам доведеться створювати нову графіку.

Спочатку потрібно створити графіку першої літери. Ми використали Photoshop для створення літери L зі шрифтом “Edwardian Script ITC”. Ми зробили його величезним – розміром 300 балів. Потім ми обрізали зображення до мінімуму навколо літери та зазначили ширину та висоту зображення. Потім ми створили клас “capL” для нашого абзацу. Тут ми визначаємо, яке зображення використовувати, провідний (висота рядка) тощо. Вам потрібно використовувати ширину та висоту зображення, щоб встановити відступ тексту та абзац абзацу. Для нашого зображення L нам потрібні відступи 95 пікселів та відступ 72 пікселів. p.capL {
висота рядка: 1em;
фонове зображення: url (capL.gif);
фонове повторення: не повторювати;
відступ тексту: 95 пікселів;
підкладка: 72 пікселів;
}

Але це ще не все. Якщо ви залишите його там, то перша буква буде продубльована в абзаці, спочатку графікою, а потім текстом. Тож ми додали пробіл навколо цього першого елемента з класом “Initial” і сказали браузеру не відображати цю букву: span.initial {display: none; }

Потім графічне зображення відображається правильно. Ви можете пограти з текстовим відступом абзацу, щоб притиснути текст до літери, однак ви хочете, щоб він відображався.

Формат mla apa chicago Ваше посилання

Кірнін, Дженніфер. “Початкові шапки CSS.” ThoughtCo, травень. 14, 2021, thinkco.com/css-initial-caps-3466212.
Кірнін, Дженніфер. (2021, 14 травня). Початкові шапки CSS. Отримано з https://www.thoughtco.com/css-initial-caps-3466212
Кірнін, Дженніфер. “Початкові шапки CSS.” ДумкаCo. https://www.thoughtco.com/css-initial-caps-3466212 (доступ 20 червня 2021).