Вечер добрый, уважаемые читатели wmbn.ru! Снова пополнилась рубрика Уроки Css, Html, Div новой записью о псевдоэлементах и псевдоклассах в Css. Иногда бывает так, что необходимо задать определенный стиль не ко всему объекту на странице, а его отдельной части. Способов задать такой стиль множество — манипулировать блоками div, стандартными селекторами Css или же просто добавить html теги. Однако каждый раз для одного и того же объекта задавать стиль в html дело не из приятных, в особенности если документ довольно обширный. Задать определенный стиль для части объекта можно с помощью псевдоэлемента, добавив в него лишь свои свойства.

Псевдоэлементы, псевдоклассы и классы в Css

Что касается псевдоклассов, то ни нужны для придания сайту некоторой динамики, т.е. чтобы задать элементу сайта какое-либо свойство, которое заметит пользователь при определенном действии, нужно использовать псевдокласы. Их применение можно встретить чаще, чем использование псевдоэлементов, в особенности это касается наложения эффектов к табам, ссылкам и кнопкам, которые при наведении курсора меняют свои свойства, написанные в Css с использованием псевдоклассов. Использование псевдоэлемента я наблюдал на сайтах, где часто выделяется первая буква и не более того. И конечно дело коснется простых классов, которые чаще всего используются в Css на многих (практически всех) сайтах, в особенности построенных на CMS.

Псевдоклассы — как использовать псевдоклассы на ссылках сайта для придания им стилей в style.css

Давайте подробнее поговорим о псевдоклассах, как я уже сказал, псевдоклассы нужны для задания эффекта определенному элементу при определенны действиях пользователя. Такая динамика несколько украшает сайт, хотя не всегда использование псевдоклассов бывает целесообразным, в особенности их избыточности использования на странице. При правильном их использовании можно добиться желаемого результата внешнего вида сайта, который состоит как раз из отдельных кусков (элементов).

Самое частое применение псевдоклассов в Css — задание действий для ссылок, а если быть конкретнее. то для выделения ссылки цветом, начертанием или другим шрифтом при наведении на нее курсора. У ссылок конечно уже сеть свои заданные параметры, в особенности выделение цветом, но при наведении мыши она цвет менять не будет, что можно спутать с обычным выделением текста, если такое применяется на странице документа.

Псевдокласс, отвечающий за выделение ссылки другим цветом — hover. Его часто можно заметить на сайте и в файле style.css, в котором он указывается:

a:hover {
color: #cccccc;

При использовании такого кода в Css, все ссылки, если они не указаны в других элементах, будут выделяться серым цветом при наведении. Элемент a: указывает на то, что псевдокласс hover применим только к ссылке, для которой установлен серый цвет. Но одно лишь выделение цветом может оказаться недостаточным, и в некоторых случаях используют выделение шрифта жирным начертанием:

a:hover {
font-weight: bold;

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

Другое свойство, которое можно задать для ссылки при использовании псевдокласса — стиль для недавно посещенной страницы. По умолчанию она уже задана, причем без использования Css, но если возникнет желание выделить посещенную ссылку цветом, то можно использовать псевдокласс visited. На примере это выглядит так:

a:visited {
color: #660000;

Было еще интересно узнать из Cssзадание стиля для не часто посещаемой ссылки или страницы. Долго думая, как это вообще реализуется на уровне браузера, через некоторое время вывод сделал сам (было давно, но жаль, что этого никто не мог объяснить) — браузер умеет запоминать время и промежуток, через который на ссылку нажмут снова. Возможно это используется через кеш, или что-то еще, но в такие подробности сильно вдаваться не стал, так как основная задача была выделить ссылку другим цветом. Такое свойство применяется при помощи псевдокласса link:

a:link {
color: #006600;
}

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

a:active,
a:hover {
color: #001122;
}

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

Применение псевдоклассов к отдельным элементам сайта. Применение классов и псевдоклассов вместе

Как и в случае с ссылками, псевдоклассы можно применять для отдельных элементов и других классов в Css, используя те же параметры. Очень часто можно заметить, когда пр наведении курсора на меню сайта, то каждый пункт меняет цвет.

Эффект покрытия меню с использованием псевдокласса

Такое свойство применяется с помощью того же псевдокласса hover, что указан для ссылки:

.mainmenu: hover {
color: #ffffff;
background-color: #000000;
font-weight: bold;
}

Очень интересна задумка подсветки ячеек или строк таблицы, когда при наведении мыши на объект, он начинает подсвечиваться. Такой же подход реализован в плагине WP-Table Reloaded. Пример использования подсветки ячейки таблицы:

td: hover {
color: #000066;
}

Кроме выделения можно указать активный пункт меню, задав для него псевдокласс active, т.е. при нахождении посетителя на странице, на которую вела ссылка.

Активный пункт меню

Она примет тот стиль, который задан для нее в Css (такое же свойство применимо во вкладках, или как их еще называют табы, чтобы выделить активную вкладку с ее содержимым от остальных):

.mainmenu :active {
color :#555;
}

С hover и active разобрались, осталось еще несколько несколько свойств, которые можно задать объектам. Псевдокласс focus — предназначен для объекта, который находится в активном состоянии, или так сказать работает с пользователем (фокусируется на объект). Это может касаться таких объектов сайта, как формы (кнопки, выпадающие списки, текстовые поля и т.д.), так и таблиц. к примеру выделить активную ячейку. Пример использования псевдокласса focus:

td: focus {
color: #999999;
}
input: focus {
color: #333333;
}

Теперь перейдем к классам — они задаются в Css тоже для выделения отдельного участка или тега, но при их использовании не требуется задавать определенные атрибуты типа active, focus и т.д. Стандартный пример класса:

.class {
color: red;
text-align: center;
}

Как видно из примера, стандартная запись класса схожа с записью селектора, но это лишь простой пример, если посмотреть в файл style.css любого шаблона на WordPress, то в нем можно увидеть сложный класс, применяемый для нескольких объектов с одновременным заданием стиля для тега:

.reply a,
a.comment-edit-link {
color: #888;
}

На этом участке кода останавливаться не будет, в будущем на практике постараюсь объяснить все элементы шаблона и Css, чтобы можно было без труда изменить стиль шаблона, сделав его по своему уникальным. Далее, создав свой класс, его нужно определить на странице — делается это точно так же, как и с простым селектором — нужно просто создать блок и задать для него свой класс:

<div class="class"></div>

Что мне нравится в Css — можно использовать сразу несколько объектов, т.е. совместно селекторы и классы, псевдоклассы и элементы, ну и, о чем я хочу рассказать — использование простых классов и псевдоклассов совместно. Нашел в Css стандартного шаблона WordPress такое применение:

.page-title a:active,
.page-title a:hover {
color: #ff4b33;

Как видно из участка кода — для класса page-title в ссылке прописан псевдокласс active и hover, причем здесь уже заданы псевдоклассы для одного объекта разные, но стиль применен один. Таких примеров можно найти приличное количество в любом шаблоне.

Использование псевдоэлементов в Css стилях — выделение первой буквой и работа с контентом

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

p: first-letter {
color: #990000;
}

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

p: first-letter {
color: #ff0000;
font-size: 22px;
font-family: Arial;
}

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

Псевдоэлемент в CSS first-letter

Кроме абзаца, псевдоэлемент first-letter можно применить для заголовков статей, к примеру заголовка третьего уровня h3:

h3: first-letter {
color: #990000;
font-size: 22px;
font-family: Arial;
}

Вот на счет выделения первой строки абзаца я немного сомневался в его применении, но возможно он где-нибудь применяется. Задается выделение первой строки с помощью псевдоэлемента first-line и имеет такие же атрибуты, что first-letter, но опять же повторюсь, что как такового применения я для него не нашел.

Очень интересным показался псевдоэлемент before и after, который вставляет в конец каждого документа, предварительно указав для него свойства, различные вставки. К примеру, если нужно каждый раз в текст поста в начале записи вставлять одну и ту же запись, то можно избавить себя от этой работы, вставив соответственно псевдоэлемент before перед тегом, блоком или элементом, который отрывает запись и является контейнером (главным) документа.

Но чтобы работать с певдоэлементом before необходимо разобраться с файлом style.css и посмотреть элементы, поняв какой из них родительский, какой дочерний, чтобы случайно не вставить текст во все элементы статьи или всего сайта. Простой пример использования псевдоэлемента before:

p:before {
content: "Текст будет вставлен в начало статьи благодаря псевдоэлементу before";
color:#CCCCCC;
}

Во второй строке можно заметить, что есть атрибут content, который указывает на то, что в пост будет помещен текст, который заключается в кавычках. Чтобы вставить кусок текста после элемента, нужно использовать псевдоэлемент after. По сути они имеют одинаковые свойства, только разные назначения. Так же можно указать ссылку, вставив за место content — url (), где в скобках нужно указать путь до файла или адрес страницы.

Выделение цитаты с использованием before и after

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

blockquote:before, blockquote:after {
content: '';
content: none;
}

И последний псевдоэлемент данного поста — selection, который позволяет выделить текст другим цветом, отличным от стандартного. Единственное , что в нем может вызвать сомнение — его написание:

p ::selection {
color: #111;
background: #999;
}

Псевдоэлемент selection применяется для абзаца, используя два двоеточия, а не одно, как это принято в псевдоклассах. Это в большей степени касается Css 3, так как там стали применять выделение, используя другие цвета, плюс к этому добавили новое обозначение псевдоэлементов, чтобы отделить их от других свойств. Такое обозначение :: должно решить путаницу с объектами, но так как полного перехода на Css3 не было и браузеры работают с Css 2, то можно использовать и одно двоеточие, но для выделения ::, так как это объект третьей версии каскадных таблиц.

На этом заканчиваю запись о псевдоэлементах, псевдоклассах и просто классах, которые применяются в Css. Я бы сделал небольшое отступление в качестве рекомендации — как вы могли заметить, то большинство элементов, о которых шла речь, есть в любом шаблоне, будь он для WordPress или простой Html, но в них можно найти интересное использование различных элементов совместно.

Комментариев: 7

  1. Виталий

    Хорошая статья для новичков в СSS, я бы еще добавил функцию смещения ссылок при наведении на них курсора, тоже очень эффектно.

    1. writer

      Итак, либо кому-то шаблон изменить, чтобы красиво все было (сколько новых CMS я увидел…и все заказные), либо себе, чтобы те же красивости были)))

    1. writer

      Открой сайт в вебмастере от Яндекс или Google, там можно посмотреть как робот видит сайт — ему главное найти текст, код страницы уже на втором плане, хотя и его тоже лучше не перегружать

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>