«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


В CSS оформление для некоторых элементов, например, для текстовых ссылок, задается с помощью псевдоклассов.

Псевдоклассы - это переменные, при помощи которых меняется оформление определенных элементов страницы в основном в зависимости от действий пользователя или в зависимости от положения этих элементов.

Синтаксис применения псевдоклассов немного отличен от привычного синтаксиса CSS и имеет следующую структуру:

Селектор: Псевдокласс {свойство: значение; свойство: значение;...}

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

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

Следует знать, что при работе с псевдоклассами, можно применять селектор по элементу,селектор по классу и контекстный селектор. То есть задавать стилевое оформление, используя псевдоклассы, можно при помощи тега <style> (глобальные стили), который как известно располагается в голове документа. Либо работать с внешним файлом со стилями (связанные или внешние стили).

Параметр style не используется для применения псевдоклассов (внутренние стили ).



Ссылки и псевдоклассы active, link, visited и hover

Псевдоклассы, работающие с ссылками, применяются к тегу <a>.

В зависимости от используемого псевдокласса, действий пользователя и указанных свойств CSS меняется оформление ссылок.

- active – псевдокласс определяет стиль для активных ссылок. Ссылка является активной в момент нажатия на нее.

- link – псевдокласс определяет стиль для ссылок, которые еще не посещались.

- visited – псевдокласс определяет стиль для посещенных ссылок. Браузер запоминает, что ссылка посещалась, и какое-то время ссылка отображается в соответствии с заданным стилем.

- hover – псевдокласс определяет стиль, который применяется к ссылке в момент наведения на нее курсора.

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Ссылки и псевдоклассы </title>

<style type="text/css">
a:link {color:#0066FF; font-size:18px; font-family: "Courier New", Courier, monospace;}
a:visited {color:
#0066FF; font-size:18px; font-family: "Courier New", Courier, monospace;}
a:hover {
color:#009933; font-size:20px; text-decoration:none;}
a:active {color:#009933; font-size:20px; text-decoration:none;
font-weight:bold;}

a.class:link {color:#009933; font-size:18px; font-family: "Courier New", Courier, monospace;}
a.class:visited {color:#009933; font-size:18px; font-family: "Courier New", Courier, monospace;}
a.class:hover {
color:#FF0000; font-size:20px; text-decoration:none;}
a.class:active {
color:#990000; font-size:20px; text-decoration:none;}
</style>

</head>
<body>

<p> <a href=
"view_tag.php?id=3" target="_blank"> Ссылка на тег а </a> </p>
<p> <a href=
"view_html_step.php?id=6" target="_blank"> Ссылки в HTML </a> </p>
<p> <a href=
"view_css_step.php?id=2" target="_blank" class="class"> Селектор CSS </a> </p>

</body>
</html>

Результат

В приведенном примере мы применили псевдоклассы active, hover, link и visited для оформления ссылок. В голове документа, в теге <style>, указаны два стиля.

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

Во втором случае, использование селектора по классу, позволяет применять, указанный стиль (идентифицированный как .class) для оформление одной или нескольких ссылок по выбору разработчика.

Псевдоклассы active и hover

Если псевдоклассы link и visited работают исключительно с тегом <a>, то псевдоклассы active и hover применимы также и к другим элементам страницы.

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

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

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Псевдоклассы active и hover </title>

<style type="text/css">
p:active {color:#FF0000; font-style:italic}

tr {
text-align:center;}
tr.head:hover {
background-color:#009966; color:#FFFFFF;}
tr:hover {
background-color:#0099FF; color:#FFFFFF;}
</style>

</head>
<body>

<p>
Наведите на любую строку таблицы курсор!</p>
<table width="700px" border="1">
<caption> Каталог аквариумов: </caption>
<tr class=
"head">
<td>
Наименование </td>
<td>
Описание </td>
<td>
Стоимость </td>
<td>
Наличие </td>
</tr>
<tr>
<td>
Аквариум "Классика 60" </td>
<td>
Размер 556*306*510 Стекло 6 мм 2*15Вт </td>
<td>
2500 </td>
<td>
+ </td>
</tr>
<tr>
<td>
Аквариум "Классика 75" </td>
<td>
Размер 556*256*510 Стекло 6 мм 1*15Вт </td>
<td>
3000 </td>
<td>
- </td>
</tr>
<tr>
<td>
Аквариум "Трапеция 105" </td>
<td>
Размер 706*356*510 Стекло 6 мм 2*18Вт </td>
<td>
3700 </td>
<td>
+ </td>
</tr>
</table>


</body>
</html>

Результат

В этом примере сначала, при помощи селектора по элементу, мы установили выравнивание текста в строках таблицы по центру. Затем, используя контекстный селектор tr.head совместно с псевдоклассом hover, мы установили стилевое офрмление, которое применили к первой строке таблицы. И далее, последнее стилевое офрмление мы применяем к остальным строкам таблицы, которые также как и первая строка, меняют свое оформление при наведении на них курсора.

При клике на абзац (тег <p>), он также изменит свой стиль.

Псевдокласс дочерних элементов first-child

Дочерние элементы - это элементы, расположенные внутри других - родительских элементов. Например, пункты списка - теги <li> являются дочерними по отношению к тегам <ol> или <ul>, которые образуют список.

Или, например, абзацы - теги <p>, расположенные внутри контейнера <div>, также будут являться дочерними элементами по отношению к тегу <div>.

Так вот, псевдокласс first-child задает стиль для первого дочернего элемента.

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Псевдокласс first-child </title>

<style type="text/css">
li {font-size:24px; color:#006699;}
li:first-child {
color:#FF3300;}
</style>

</head>
<body>

<ul>
<li>
Учиться </li>
<li>
Учиться </li>
<li>
И еще раз учиться </li>
</ul>
<ul>
<li>
Вера </li>
<li>
Надежда </li>
<li>
Любовь </li>
</ul>

</body>
</html>

Результат

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

Псевдокласс focus

Псевдокласс focus применим к тем элемента страницы, которые могут получить фокус. Например, фокус получают элементы, которые принимают ввод символов с клавиатуры или как-то реагируют при клике по ним курсором мыши: это теги <input>, <option>, <select>и <textarea>, а также тег <a>

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Псевдокласс focus </title>

<style type="text/css">
input {border:#3399FF solid 1px;}
input:focus {
color:#FF0033; font-size:16px; padding:3px;}

textarea {
color:green; font-style:italic;}
textarea:focus {
color:#3399FF;}
</style>

</head>
<body>

<form>
<p>
<input type="text" size="50" value="Введите Имя..."> </p>
<p>
<textarea name="text" cols="40" rows="5"> Коротко о себе... </textarea> </p>
<p>
<input type="reset" value="Сбросить"> </p>
</form>

</body>
</html>

Результат

Псевдокласс lang

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

Синтаксис применения псевдокласса lang таков:

Элемент:lang(язык) {свойство: значение; свойство: значение;...}

В качестве языка используют следующие значения: ru — русский; en — английский; de — немецкий; fr — французский; it — итальянский.

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Псевдокласс lang </title>

<style type="text/css">
p:lang(ru) {color:#00CC99; font-size:20px;}
p:lang(en) {
color:#3399FF; font-size:20px; text-decoration:underline;}
p:lang(fr) {
color:#FF0099; font-size:20px; font-style:italic;}

q:lang(ru) {
quotes: "\201E" "\201C";}
q:lang(en) {
quotes: "\201C" "\201D";}
q:lang(fr) {
quotes: "\00ab" "\00bb";}
</style>

</head>
<body>

<p lang=
"ru"> <q lang="ru"> Здравствуйте </q> - Приветствие на Русском! </p>
<p lang=
"en"> <q lang="en"> Hello </q> - Greeting in English! </p>
<p lang=
"fr"> <q lang="fr"> Bonjour </q> - La salutation sur le francais! </p>

</body>
</html>

Результат

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

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

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

Немного другими словами: свойство content непосредственно вставляет содержимое, а псевдоэлементы before и after указывают где это содержимое расположить.

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Псевдоэлементы before и after </title>

<style type="text/css">
p.last:before {content: "Последняя заметка..."; color:#FF0033;
font-size
:18px;}
</style>

</head>
<body>

<p class=
"last"> В 2012-м человечество, возможно, победит рак. Этот тезис озвучил журнал The Economist, публикуя свою версию прогноза развития науки в 2012 году. </p>
<p>
В 2012 году соцсети окончательно завоюют интернет и для многих рядовых пользователей попросту заменят его собой. Уже сегодня многие люди попросту не выходят за пределы своей любимой соцсети в течение дня. </p>

</body>
</html>

Результат

Пояснение к примеру: псевдоэлемент before указывает на то, что перед абзацами (тег <p>), к которым применяется стиль .last, будет располагаться фраза "Последняя заметка...", оформленная определенным образом.

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта