Абзац Dropcap з елементами CSS першого та першого літер

Є кілька CSS-селекторів або властивостей, які, на мою думку, рідко використовуються в дикій природі, але вони фактично існують з часів CSS1; деякі з них включають :перша лінія і : перша буква pesudo-елементи.

Як використовувати?

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

 p: перша буква font-size: 50px;  

Цей код призводить до наступної презентації.

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

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

 p: перший рядок font-weight: bold;  

Як і код попередників : перша буква, це також вплине на всі перші рядки в елементах абзацу, які є на сторінці.

Отже, у реальних випадках, коли ми взагалі хочемо додати краплю або змінити перший рядок тільки на першому абзаці ми повинні бути більш конкретними - або шляхом додавання додаткових атрибутів класу або застосування цих псевдоелементів разом з : перша дитина або : перший тип Селектор, начебто так.

 p: перша дитина: перша буква font-size: 50px;  p: перша дитина: перший рядок font-weight: bold;  

Там ми йдемо, порушений пункт зараз тільки перший.

Псевдоелементи на роботі

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

 @ font-face сім'я шрифтів: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: формат url ('fonts / HOMINIS-webfont.eot? #iefix') ('embedded-opentype'), формат url ('fonts / HOMINIS-webfont.woff') ('woff'), url ('fonts / HOMINIS-webfont.ttf ') формат (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') формат (' svg '); font-weight: нормальний; стиль шрифту: нормальний;  

Далі, ми встановлюємо сімейство шрифтів за замовчуванням для абзаців.

 p color: # 555; сім'я шрифтів: 'Georgia', Times, serif; висота рядка: 24px;  

У цьому прикладі ми будемо використовувати : перша дитина селектор, щоб націлити перший абзац і застосувати декоративні стилі, щоб він виглядав більш помітним:

 p: перша дитина заповнення: 30px; border-left: 5px solid # 7f7664; background-color: # f5f4f2; висота рядка: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); позиція: відносна;  

Потім додаємо кришку падіння : перша буква, збільшити розмір шрифту, а також призначити йому нове сімейство шрифтів;

 p: перша дитина: перша буква font-size: 72px; поплавок: лівий; заповнення: 10px; висота: 64px; сімейство шрифтів: 'HominisNormal'; фоновий колір: # 7F7664; margin-right: 10px; колір: білий; кордон-радіус: 5px; висота рядка: 70px;  

Ми також підкреслимо перший рядок :перша лінія, так.

 p: перша дитина: перший рядок font-weight: bold; розмір шрифту: 24px; колір: # 7f7664;  

Нарешті, ми хочемо додати декоративний атрибут до першого абзацу з використанням скріпки : після псевдоелемент.

 p: перша дитина: після background: url ("… /images/paper-clip.png") прокрутка без повторювання 0 0 прозора; зміст: ""; дисплей: вбудований блок; висота: 100px; позиція: абсолютна; праворуч: -5px; зверху: -35px; ширина: 100px;  

Це весь код, який ми потребуємо, тепер наш параграф повинен виглядати набагато краще;

Ви також можете побачити демонстрацію в прямому ефірі за посиланнями нижче:

• Переглянути демонстрацію
• Завантажити джерело

Заключна думка

Як ми вже згадували раніше в цій посаді, ці псевдоелементи, зокрема : перша буква і :перша лінія було включено з часу CSS1, тому вони також підтримуються навіть в Internet Explorer 8 раніше.

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