Dropcap абзаца с CSS: элементы первой строки и элементы первой буквы
Есть несколько CSS-селекторов или свойств, которые, я думаю, редко используются в дикой природе, но на самом деле они существуют со времен CSS1; некоторые из них включают в себя: первая строка и: первая буква pesudo-элементы,
Рекомендуемое чтение: понимание псевдоэлемента: до и после:
Как пользоваться?
Эти псевдоэлементы в основном работают подобно своим братьям и сестрам: до и после, и я думаю, что они также довольно просты. Первая буква будет нацелена на первую букву или символ выбранного элемента, это Псевдо-элемент обычно используется для создания типографского эффекта, такого как буквица. Вот как это делается.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
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 на вашем сайте.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)