Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Ссылки и Псевдоклассы Блоковая модель в CSS

Ссылки и Псевдоклассы в CSS

Ссылки и псевдоклассы active, link, visited и hover
Псевдоклассы active и hover
Псевдокласс дочерних элементов first-child
Псевдокласс focus
Псевдокласс lang
Псевдоэлементы before и after


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример

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

<!DOCTYPE ...>
<html>
<head>
<meta http-...>
<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>
<head>
<meta http-...>
<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>
<head>
<meta http-...>
<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>
<head>
<meta http-...>
<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>
<head>
<meta http-...>
<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>
<head>
<meta http-...>
<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, будет располагаться фраза "Последняя заметка...", оформленная определенным образом.

Списки в CSS Ссылки и Псевдоклассы Блоковая модель в CSS
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru