Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- Сделайте цвет первых букв (у четырех абзацев) красного цвета. HTML код менять нельзя. Используйте теорию из этого урока.
Существует четыре псевдоэлемента: первая буква, первая строка, стили до и после элемента.
Первая буква
Давайте сделаем первую букву каждого абзаца больше, чем другие и красного цвета. Смотрим пример первый.
p:first-letter {
color: red;
font-size: 2em;
}<p>Абзац номер ван</p>
<p>Абзац номер ту</p>Первая строка
Довольно просто можно сделать красного цвета первую строку.
p:first-line {
color: red;
}Стили "до" и "после" элемента
Допустим, нам нужно перед каждым абзацем ставить тире (-). Сделать это очень просто, при помощи псевдоэлемента before и правила для генерации содержимого content. Смотрим третий пример.
p:before {
content: '- ';
}<p>Пункт 1</p>
<p>Пункт 2</p>
<p>Пункт 3</p>
<p>Пункт 4</p>И еще вдруг нам нужно ставить точки в конце абзацев. Для этого есть псевдоэлемент after. Смотрим пример четыре.
p:after {
content: '.';
}Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
