Лекция 8. Псевдоклассы и псевдоэлементы

Что такое псевдоклассы в HTML?

Псевдоклассы в HTML — это классы, которые не прописаны в коде HTML, но которые, будучи описаны в CSS изменяют внешний вид страницы. Псевдоклассов существует довольно большое количество, но наиболее часто их применяют для описания гиперссылок.

Описание гиперссылки

Для задания параметров гиперссылки в CSS просто описывается стиль элемента a. Например:

1
2
3
4
a {
  color: red;
  font-size: 24px;
}

Однако поведение гипесрсылки предусматривает взаимодействие с курсором мыши — ссылка реагирует на наведенный курсор. Для задания такого поведения используется псевдокласс Hover, который определяет стиль элемента когда на него наведена мышь.

1
2
3
4
a:hover {
  color: green;
  font-size: 36px;
}
в данном примере, при наведении мыши, ссылка станет зеленого цвета, а размер ссылки увеличится. Обратите внимание, сто запись a:hover пишется слитно. А разделителем между элементом и псевдоклассом служит двоеточие.

Псевдокласс hover можно применять не только к гиперссылкам, но и к любым другим элементам в HTML

Рассмотрите два примера, демонстрирующих действие псевдокласса hover:

See the Pen pseudo hover by Alex (@Asmodey) on CodePen.

Также гиперссылка способна реагировать на нажатие клавиши, для этого используется псевдокласс active:

1
2
3
a:active {
    color: yellow;
}
Т.е. при нажатии на ссылку, гиперссылка становится желтой.

И послединй псевдокласс — visited, который задает оформление ссылке, которая уже была посещена.

Пример применения псевдокласса visited и active, показан ниже:

See the Pen active, visited hyperlink by Alex (@Asmodey) on CodePen.

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

Обратите внимание, что посещенная ссылка стала серого цвета и не реагирует на мышь, это следствие того, что класс visited выше класса hover. Просто перенесите описание visited выше класса hover.

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

Псевдоэлементами называются элементы, которые не присутствуют в HTML коде, но будучи описаны в CSS могут добавлять контент на страницу. Главное отличие от псевдоклассов, заключается в том, что псевдоэлементы добавляют контент, а псевдоклассы изменяют поведение. Однако, иногда очень тяжело отличить псевдокласс от псевдоэлемента. Рассмотрим три наиболее часто встречающихся псевдоэлемента: first-letter, after, before

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

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

1
2
3
4
5
6
7
p::first-letter {
    color: red;
    font-weight: bold;
}
и "живой пример":
<p data-height="82" data-theme-id="14887" data-slug-hash="MwZEjb" data-default-tab="result" data-user="Asmodey" class='codepen'>See the Pen <a href='http://codepen.io/Asmodey/pen/MwZEjb/'>first-letter pseudo</a> by Alex (<a href='http://codepen.io/Asmodey'>@Asmodey</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Как видно из примера псевдоэлемент отделяется двойным двоеточием, и не содержит в своей записи пробелов.

Псевдоэлементы before и after

Используются для добавления контента перед и после элемента, к которому применяется оформление. Данные псевдоклассы обязательно требуют применения свойстваcontent, в которое заносится значение элемента, либо ставятся просто пустые скоби. Пример:

1
2
3
  p::before {
    content="Hello ";
  }
Рассмотрим «живой» способ применения псевдоэлементов:

See the Pen before, after, css by Alex (@Asmodey) on CodePen.

Таким образом, можно псевдоэлементы применять для добавления как строк, так и блоков, добавляя к ним нужные стили оформления.

Задание 1. Используя изученный материал, оформите гиперссылки так, как показано в таблице:

Link Hover Active Visited
Зеленый Красный Желтый Черный
Красный Оранжевый Синий Серый
Черный Синий Зеленый Фиолетовый
<a href="#" class="L1">Link 1</a><br>
<a href="#" class="L2">Link 2</a><br>
<a href="#" class="L3">Link 3</a><br>

See the Pen z7 by Alex (@Asmodey) on CodePen.


Задание 2. С помощью псевдоэлемента first-letter сделайте первые буквы показанного ниже текста: жирными, размер 30px, курсивом.

<p>Как хороша судьба элиты! Как ненавистен общий фон! Так долго метил в короли ты, и наконец купил «Айфон». Ты к джинсам пришивал заплаты. Не кушал и почти не пил. Ты год откладывал с зарплаты, и наконец его купил. Так недоверчиво и робко, окончив вереницу бед, в твою ладонь легла коробка — как орден в знак твоих побед. Ты стал как будто выше ростом. Как будто вырос над людьми. И твой «Айфон» казался просто... ну просто ми-ми-ми-ми-ми!</p>
<p>В нем есть духовность, идеалы, и оберег, и талисман. Ты выше всяких казуалов, что «Нокию» кладут в карман. Пусть гaстарбайтер яму роет. Пусть вкалывает гегемон. Для них изобретен «Андроид», для низших каст годится он. А нас, элиту в этом мире, приподнимает до небес — «Айфон». Причем, «Айфон-четыре». А лучше, чтоб «четыре-эс».</p>
<p>Сокровище в кармане пряча, дивясь скупой его красе, ты чувствовал себя иначе: теперь уж не таким, как все. Как мошкара в лучах плафона, потоки городской толпы вокруг летали без «Айфона» — несовершенны и тупы. А ты стоял, упершись рогом, не замечая никого. И чувствовал себя не Богом, но приложением его.</p>
<p>В «Айфоне» мощные программы. Но круче всех других программ была для посвященных самых такая штука: «Инстаграм». Он позволял улучшить фото аристократам вроде нас (на зависть прочим идиотам с эффектами от красных глаз). Он мастерил из ширпотреба шедевры чистой красоты. И отсылал куда-то в небо — где доступ лишь таким, как ты.</p>
<p>Когда хороший ценишь стиль ты, тебе не нравится говно. И в «Инстаграме» были фильтры, которых быдлу не дано. Его таинственные недра глотали фоторепортаж, и выходил нуар, и ретро, и прочий, так сказать, винтаж. Как будто фотка в пыльной папке летела к нам издалека. Как будто найдена у бабки среди развалов чердака. Для нас, взыскательных эстетов, которым красота важна, он всякий раз лепил конфету из откровенного говна. Он фотку обрезал квадратом и делал что-то типа рам. Короче, нам, аристократам, был крайне нужен «Инстаграм».</p>
<p>Он был манерным как повидло из черной паюсной икры. Он отделял нас всех от быдла и уносил в свои миры. Неэстетичны, как на зоне, срамны, кому ни покажи, все фотки аппаратов «Сони», «Самсунгов», «Нокий» и «ЭлЖи». Пусть неудачник рожу строит, пытаясь удивить подруг. Вы не элита, вы Андроид. И для таких, как вы, Фейсбук. И ты, гуляя с видом гордым, осознавал и вес, и роль: с «Айфоном» ты был просто лордом, но с «Инстаграмом» ты король!</p>
<p>И тут как будто астероид упал с небес на череп нам: кто сделал быдлу под «Андроид» такой же точно Инстаграм?!! Ну как же тут не обижаться? Как не поднять всеобщий вой? Как будто бьют часы двенадцать у Золушки над головой! И стала чем-то вроде тыквы вся элитарная среда! Вы были лорд, а стали фрик вы! Причем, похоже навсегда! И мы, сложив покорно руки, переживали этот срам. И вдруг придуркам на Фейсбуке совсем продали «Инстаграм»! Да вы там обалдели что ли?! Да это ж охренеть не встать!!! Да кто же это вам позволил, святое бисером метать?!! Подонки!!! Бляди!!! Как же это?!! Не отличит теперь страна, где утонченные эстеты, а где обычная шпана.</p>

See the Pen JYGXbb by Alex (@Asmodey) on CodePen.


Задание 3. Используя псевдо-элементы after и before добавьте в указанному ниже span дефисы. До и после.

<span>This is SPARTAAAA</span>

See the Pen EVPKZK by Alex (@Asmodey) on CodePen.

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

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