Блог Тимура Казанского

Псевдоэлементы CSS с подробными примерами


Доброго времени суток уважаемые читатели. Сегодня вы узнаете, как вставить изображение или картинку в HTML с помощью CSS, что такое псевдоклассы, как можно легко и просто стилизовать первую букву или предложение вашего текста, и как с помощью CSS добавить содержимое в html документ не изменяя его.

Хочу заметить, что псевдоклассы, которые мы с вами изучали на прошлом уроке, не единственные в своем роде, существуют еще 4 псевдоэлемента, которые мы с вами сегодня подробно разберем.

И так, давайте приступим. В CSS3 псевдоэлементы обозначаются двойными двоеточиями(::), перед которыми ставится селектор (что это такое, я писал в Уроке 1. основы и правила CSS), и сегодня мы рассмотрим:

::first-line {}
::first-letter {}
::before {}
::after {}

Но в силу того, что еще не все браузеры в полной мере адаптированы под CSS3, рекомендую применять обозначение CSS2, а именно вместо двух двоеточий (::) использовать одно (:). Ну что ж, давайте посмотрим, как псевдоэлементы применяются на практике.

Стилизация первой строки

Для этой цели мы будет использовать псевдоэлемент «first-line {}», и вот с какими свойствами он работает:

:first-line {
font;
letter-spacing;
text-transform;
background;
text-decoration;
line-height;
color;
word-spacing;
vertical-align;
}

Проще говоря, это все 9 свойств, которые вы можете использовать для стилизации первой строки вашего текста.

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

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

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Пример использования псевдокласса first-line</title>
<style>
p:first-line {
text-decoration: underline;
color: blue;
}
</style>
</head>
<body>
<p>И так, вы имеете какой-либо текст или статью, и давайте попробуем задать определенный стиль к ней.
Воспользуемся свойством text-decoration и подчеркнем первую строку данного текста...
Ну и заодно давайте зададим синий цвет в качестве цвета с помощью свойства color!</p>
</body>
</html>

Стилизация первой буквы

Используем псевдокласс first-letter для стилизации первой буквы вашего текста, и заодно обратите внимание с какими свойствами данный псевдокласс имеет дело:

:first-letter {
font;
vertical-align;
margin;
float;
word-spacing;
color;
text-transform;
background;
border;
letter-spacing;
text-decoration;
padding;
line-height;
}

Ну а теперь, давайте взглянем на пример:

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

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Пример использования псевдокласса first-line</title>
<style>
p:first-letter {
letter-spacing: 15px;
color: red;
}
</style>
</head>
<body>
<p>И так, на этот раз мы задаем стиль для первой буквы "И" данного текста.
Воспользуемся свойством letter-spacing и оградим первую букву на 15 пикселей от остальных,
а также придадим нашей букве красный цвет...</p>
</body>
</html>

Вставляем текст ДО содержимого элемента

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

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

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

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Пример использования псевдокласса first-line</title>
<style>
p:before {
content: "-> ";
}
</style>
</head>
<body>
<p>Добавим символ стрелки в начало этого абзаца</p>
<p>И этого абзаца</p>
<p>Кстати символ стрелки на самом деле обозначается как &amp;rarr;, а выглядит вот так &rarr;</p>
<p>Но так как свойство content работает только с текстом, то довольствуемся альтернативой в виде стрелки и тругольной скобки -></p>
</body>
</html>

Вставляем текст ПОСЛЕ содержимого элемента

Псевдокласс after делает все с точностью до наоборот, и добавляет какой либо символ или текст в конец используемого элемента.

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

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Пример использования псевдокласса first-line</title>
<style>
p:after {
content: " ёоу!";
color: blue;
}
</style>
</head>
<body>
<p>На этот раз добавим текст в конец этого абзаца</p>
<p>И этого абзаца</p>
<p>Ну хватит</p>
</body>
</html>

Но только ли текст можно вставить в содержимое HTML элемента? Конечно в большинстве случаев вебмастера используют псевдоклассы «after» и «before» именно для этой цели. Но на самом деле, в документ HTML с помощью CSS можно вставить и изображение, давайте посмотрим, как это делается.

Вставляем изображение в HTML посредством CSS

Для этой цели используем свойство «content», которое мы оставляем пустым и свойство «background», где мы указываем путь к изображению или картинке, которую хотим отобразить в HTML элементе. Также используем свойства «width» (ширина) и «height»(высота), где указываем размеры добавляемого изображения в пикселях. Взгляните на пример:

Добавляем изображение в HTML с помощью CSS

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Пример использования псевдокласса first-line</title>
<style>
p.one:before {
content: "";
background: url(one.jpg);
display: block;
width: 400px;
height: 300px;
}
p.two:after {
content: "";
background: url(two.jpg);
display: block;
width: 299px;
height: 286px;
}
</style>
</head>
<body>
<p class="one">И так, барабанная дробь, мы добавляем изображение в начало HTML элемента p.</p>
<p class="two">И в конец. Кстати, вот такие вот супер унитазы используются в Японии =))</p>
</body>
</html>

Ну вот мы и подошли к концу изучения псевдоклассов CSS, очень надеюсь что данная статья оказалась вам полезной.

Всем пока и увидимся в следующих статей!

Категория: Уроки CSS для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0