Dropcap абзаца с CSS: элементы первой строки и элементы первой буквы

Есть несколько CSS-селекторов или свойств, которые, я думаю, редко используются в дикой природе, но на самом деле они существуют со времен CSS1; некоторые из них включают в себя: первая строка и: первая буква pesudo-элементы,

Рекомендуемое чтение: понимание псевдоэлемента: до и после:

Как пользоваться?

Эти псевдоэлементы в основном работают подобно своим братьям и сестрам: до и после, и я думаю, что они также довольно просты. Первая буква будет нацелена на первую букву или символ выбранного элемента, это Псевдо-элемент обычно используется для создания типографского эффекта, такого как буквица. Вот как это делается.

p: первая буква {
размер шрифта: 50 пикселей;
}

Этот код приводит к следующей презентации.
Следует отметить несколько вещей, однако этот эффект будет применяться только тогда, когда первому символу не предшествует другой элемент, например, изображение. Кроме того, когда у нас есть несколько одинаковых целевых элементов подряд, они также будут затронуты.
Далее, с точки зрения: первой линии, это Псевдо-элемент будет нацелена на первую строку целевого элемента, этот пример ниже показывает, как мы выделим жирным шрифтом первую строку абзаца.

p: первая строка {
вес шрифта: полужирный;
}

Как и предыдущий код: first-letter, это также повлияет на все первые строки в элементах абзаца на странице.
Итак, в реальных случаях, когда мы обычно хотим добавить буквицу или изменить первую строку только в первом абзаце, нам нужно быть более конкретными – либо добавив дополнительный атрибут класса, либо применив эти псевдоэлементы вместе с: first-child или: селектор первого типа, вот так.

р: первый ребенок: первая буква {
размер шрифта: 50 пикселей;
}
p: первый ребенок: первая строка {
вес шрифта: полужирный;
}

Итак, затронутый абзац теперь только первый.

Рекомендуемое чтение: Взгляд в: CSS3: первый в своем роде структурный селектор

Псевдоэлементы на работе

Хорошо, теперь давайте попробуем разработать лучший вид абзаца, используя псевдоэлементы. Но прежде чем мы начнем, нам нужен специальный шрифт для нашей буквицы, и вот мой выбор: Hominis Пол Ллойд. Затем мы определяем новое семейство шрифтов в таблице стилей следующим образом.

@ 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’) (‘истинный тип’),
формат url (‘fonts / HOMINIS-webfont.svg # HominisNormal’) (‘svg’);
Вес шрифта: нормальный;
стиль шрифта: нормальный;
}

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

п {
цвет: # 555;
семья шрифтов: «Грузия», Times, Serif;
высота строки: 24px;
}

В этом примере мы будем использовать селектор: first-child для нацеливания на первый абзац и применять декоративные стили, чтобы он выглядел более заметным:

р: первый ребенок {
отступы: 30 пикселей;
рамка слева: 5px solid # 7f7664;
цвет фона: # f5f4f2;
высота строки: 32px;
тень от коробки: 5px 5px 0px 0px rgba (127, 118, 100, 0,2);
положение: относительное;
}

Затем мы добавляем буквицу с помощью: первой буквы, увеличиваем размер шрифта, а также назначаем ему новое семейство шрифтов;

р: первый ребенок: первая буква {
размер шрифта: 72 пикселя;
плыть налево;
набивка: 10 пикселей;
высота: 64 пикс;
семейство шрифтов: ‘HominisNormal’;
цвет фона: # 7F7664;
поле справа: 10 пикселей;
цвет белый;
радиус границы: 5 пикселей;
высота строки: 70px;
}

Мы также подчеркнем первую строку с: первая строка, вот так.

p: первый ребенок: первая строка {
вес шрифта: полужирный;
размер шрифта: 24 пикселя;
цвет: # 7f7664;
}

Наконец, мы хотим добавить декоративный атрибут в первый абзац с помощью скрепки, используя: after Псевдо-элемент,

р: первый ребенок: после {
background: url (“../ images / paper-clip.png”) прокрутка без повтора 0 0 прозрачная;
содержание: “”;
дисплей: встроенный блок;
высота: 100 пикселей;
положение: абсолютное;
справа: -5px;
верх: -35px;
ширина: 100 пикселей;
}

Вот и весь код, который нам нужен, теперь наш абзац должен выглядеть намного лучше;
Вы также можете увидеть живое демо по ссылкам ниже:

Последняя мысль

Как мы упоминали ранее в этом посте, эти псевдоэлементы, а именно: first-letter и: first-line, были включены с CSS1, поэтому они также поддерживаются даже в Internet Explorer 8 ранее.

Тем не менее, насколько я знаю, они не так широко применяются в условиях дикой природы. Итак, мы надеемся, что это руководство может каким-то образом вдохновить вас попробовать эти функции CSS на вашем сайте.