14:34 Способы использования псевдоэлементов CSS ":before" и ":after" |
| Если вы относитесь к тем людям, которые часто посещают обучающие сайты и статьи по веб-дизайну, вы, возможно, заметили, что появилось много уроков, посвященных созданию изображений и CSS-макетов с использованием псевдоэлементов ":before" и ":after". Возможно, такое внимание к этой теме объясняется гибкостью этих элементов и творческими возможностями, которые они предоставляют. В этой статье мы постараемся показать и научить общим аспектам использования этих псевдоэлементов, чтобы с помощью этой информации и знаний вы лучше понимали, как достигаются все те крутые вещи, которые показаны в учебниках.  Функция псевдоэлемента CSS Прежде всего, необходимо уточнить, что ":before" и ":after" - не единственные существующие псевдоэлементы, полный список включает ":first-letter", ":first-line", ":before", ":after" и "::selection", но поскольку в этот раз мы сосредоточимся только на двух уже упомянутых, каждый раз, когда мы будем упоминать термин "псевдоэлемент", мы будем фокусироваться на ":after" и ":before". Функция псевдоэлемента проста, в основном он делает то, на что указывает его название - создает поддельный элемент, чтобы вставить его до или после содержимого элемента, на который он ориентирован. Создание этих элементов ничего не меняет в документе, они включаются только для получения изменений, видимых пользователю. Эти новые элементы способны получать стилизацию CSS, поэтому их использовали для нанесения штрихов на элементы сайта. Кодирование псевдоэлементов CSS Кодировать псевдоэлементы довольно просто, достаточно запомнить два простых аспекта, чтобы создать их правильно. Во-первых, мы должны создать селектор, указывающий, к какому элементу мы будем создавать псевдоэлементы, то есть мы должны определить, в какой части документа будут добавлены ложные элементы, которые мы будем использовать. Например, если мы хотим создать псевдоэлемент перед div, обозначенным как "icon", то синтаксис моего селектора будет "#icon:before". Если мы не укажем элемент перед тем, как вызвать ":after" или ":before", утверждение будет работать, но это не принесет нам большой пользы, если только вы не хотите, чтобы какое-то содержимое было вставлено до или после каждого элемента, составляющего DOM вашего сайта. Второй аспект, который необходимо рассмотреть, это свойство "content", каждое объявление псевдоэлемента должно иметь это CSS свойство, если вы хотите, чтобы его создание вступило в силу, потому что без него мы не сможем ничего вставить в созданные псевдоэлементы. Короче говоря, "content", как следует из его названия, отвечает за перенос нового содержимого. В таких случаях можно использовать пустое свойство "content", но ни в коем случае не стоит его удалять. Этот случай может возникнуть, когда мы используем пустые поля, в которые мы только добавляем стили. Проанализировав эти два аспекта, мы можем определить, что наш базовый синтаксис будет выглядеть следующим образом: Код #icono:before { content: "Привет"; } #icono:after { content: "Мир"; } С помощью этого кода мы вставим "Привет" перед div "icon" и "мир" после него. Вставляемое содержимое Содержимое, вставленное через псевдоэлементы, будет видно только в коде CSS, и по умолчанию оно вставляется со стилем "inline", поэтому, если мы хотим показать содержимое корректным образом, нам часто приходится прибегать к свойствам CSS. Использование свойства "display" со значением "block" очень распространено при работе с псевдоэлементами, это свойство позволяет нам показать элемент блоком и задать ему пользовательскую высоту и ширину. Размещение контента Возможно, если мы возьмем очень буквальное представление о том, что означает каждый псевдоэлемент, наш разум представит, что добавленное содержимое будет размещено выше и ниже элемента, определенного селектором. Это обычное представление, поскольку мы рассматриваем веб-страницу как плоскую двухмерную вещь, где "до" означает "выше", а "после" - "ниже". Но на этот раз, при работе с псевдоэлементами, мы должны представить эти новые части как дочерние элементы элемента, который был указан в селекторе. Дочерние элементы, содержимое которых будет вставлено до или после содержимого родительского элемента. Типы содержимого Как вы уже могли видеть в приведенном выше примере, содержимое может быть текстового типа, но что касается других типов, то, что мы должны сделать, чтобы вставить, например, изображение, в основном то же самое, только с небольшими различиями. Если мы хотим вставить изображение в псевдоэлемент, созданный перед абзацем, мы сделаем примерно следующее: Код p:before { content: url(imagen.jpg); } Как вы видите, мы просто изменили значение свойства content на URL изображения и убрали инвертированные запятые, чтобы он не думал, что это текстовая строка. Поддержка браузеров В заключение этой статьи я хочу отметить, что псевдоэлементы в настоящее время поддерживаются почти всеми браузерами, Chrome, Firefox, Safari, Opera и Internet Explorer начиная с версии 8, хотя и с некоторыми ошибками. |
|
|
| Всего комментариев: 0 | |