Глава 15. Псевдоклассы

Глава 15. Псевдоклассы

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Глава 15. Псевдоклассы

Глава 15. Псевдоклассы

www.homa.xp3.biz 

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

Вот список всех псевдоклассов:

  • hover - стиль элемента на который наведён курсор мыши;
  • active - стиль для ссылки которая становится активной, но переход по ней еще не совершен;
  • visited - стиль для недавно посещённой ссылки;
  • link - стиль для нечасто посещаемой ссылки;
  • focus - стиль элемента находящегося в фокусе;
  • first-child - стиль первого дочернего элемента;
  • lang - определяет язык, который используется в фрагменте документа.

    О каждом псевдоклассе мы отдельно поговорим ниже, а сейчас пару слов о синтаксисе.

    Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса: a:hover{color:#ff0}

    где:

  • a - элемент (селектор, тег), к которому применим псевдокласс (ссылку);
  • :hover - после 2-точия нужный псевдокласс;
  • {color:#ff0} - блок объявления стилей в фигурных скобках.

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

    Так собственно мы подошли к псевдоклассу hover.

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

    Псевдокласс hover активизируется в том случае, если на элемент наведен курсор.

    Пример:

    <title>Псевдоклассы</title>

    <style>

    .menu{display:block;width:180px;background:#fdc;color:#008;font-size:16px;text-decoration:none;padding:3px} .menu:hover{display:block;width:180px;background:#b88;color:#fff;padding:3px;font-size:16px;text-decoration:none} tr:hover{background:#b88} </style>

    <p>Чем Вам не блок навигации по сайту?

    <a href=# class=menu>Главная</a>

    <a href=# class=menu>Карта сайта</a>

    <p>А вот ещё 1 распространенный трюк. Строки в таблице подсвечиваются при наведении на них курсором.

    <table border bordercolor=#ccc width=600 cellpadding=1 cellspacing=0>

    <tr>

    <td>Иванов<td>+<td><td><td>+<td><td>

    <tr>

    <td>Петров<td><td>+<td><td><td>+<td>

    <tr>

    <td>Сидоров<td><td><td>+<td><td><td>+

    </table>

    смотреть пример

    Несколько слов к примеру выше.

    Как Вы наверное заметили в качестве селектора псевдокласса может выступать не только какой либо элемент - тег, но и класс. Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид: .menu:hover{color:#ff0}

    Не запутались в терминологии?

    Мы сказали браузеру, чтобы подсвечивал красным только те ссылки, которые находятся в навигационном блоке (выведены в класс menu), а остальное оставить, как есть!

    Псевдокласс hover может быть применён к любому элементу, выводимому на экран. В примере для того чтобы организовать подсветку строк таблицы, применен к тегу tr (IE6 и его более ранние версии поддерживает псевдокласс hover только для ссылок, строки таблицы при наведении на них курсора в браузерах IE6 и ниже подсвечиваться не будут).

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

    Рассмотрим сразу 3 псевдокласса созданных для работы со ссылками.

  • active - стиль активной ссылки;
  • visited - стиль для недавно посещённой ссылки;
  • link - стиль для нечасто посещаемой ссылки.

    Пример:

    <title>Псевдоклассы и ссылки</title>

    <style>

    a:link{color:#0ff}

    a:active{color:#ff0}

    a:visited{color:#008}

    </style>

    <a href=#1>Ссылка на 1 якорь</a>

    <a href=#2>Ссылка на 2 якорь</a>

    <a href=#3>Ссылка на 3 якорь</a>

    <hr>

    <a name=1><h4>1 якорь</h4></a>

    <p>Псевдокласс link в примере указывает, что все непосещенные ссылки должны отображаться синим цветом.

    <a name=2><h4>2 якорь</h4></a>

    <p>Попробуйте нажать и удерживать на 1 из непосещенных ссылок, чтобы увидеть для работу псевдокласса active.

    <a name=3><h4>3 якорь</h4></a>

    <p>visited - псевдокласс, который в примере говорит о том, что все посещенные ссылки должны отображаться зеленым цветом.

    смотреть пример

    Теперь расскажу более подробно.

    Псевдокласс active присваивает ссылке определённый стиль в тот момент когда эта ссылка активна, т.е. в тот момент когда пользователь нажал на ссылку, но еще не отпустил кнопку мыши. Active - это стиль ссылки в момент клика по ней.

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

    Псевдокласс link описывает стиль ссылки, которая ранее не посещалась пользователем. Надо отметить, что никакой ощутимой разницы между записью a{.} и a:link{.} нет, так что применение данного псевдокласса в этом случае ровным счетом ничего не меняет.

    Все 3 вышеперечисленных псевдокласса предназначены для работы с ссылками, однако псевдокласс active может быть применён к любому элементу (работать будет везде, кроме браузера IE 6 и ниже).

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

    Данный псевдокласс определяет стиль элемента, если тот находится в фокусе. Теперь о том, что такое фокус? Фокус в CSS обозначает элемент, который находится в центре внимания пользователя. Такими элементами могут быть теги a, input, select и textarea.

    Пример:

    <title>Псевдокласс focus</title>

    <style>

    input:focus{color:red}

    </style>

    <form>

    <input type=text value=Ввод size=30>

    </form>

    <p>Ввели? А теперь щелкните по пустому месту на экране, чтобы форма потеряла фокус.

    смотреть пример

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

    Псевдокласс first-child

    Все элементы можно определить как родительские или дочерние, а элемент-родитель может содержать в себе несколько дочерних элементов, например:

    <div> - блок родитель

    <p> - 1-й дочерний элемент

    <p> - 2-й дочерний элемент

    </div>

    Псевдокласс first-child определят стиль 1-го дочернего элемента, находящегося в родительском контейнере.

    <title>Псевдокласс first-child</title>

    <style>

    div{margin:20px;padding:30px;background:#c0e;border:2px solid #008} p{color:#555;background:#dcd;border:2px solid #555} p:first-child{color:#f00;background:#c5f;border:2px solid #008} </style>

    <div>

    <p>1-й дочерний параграф - выделен псевдоклассом first-child.

    <p>2-й дочерний параграф.

    <p>3-й дочерний параграф.

    </div>

    <div>

    <p>и здесь 1-й дочерний параграф выделен, хотя блок-родитель уже другой.

    <p>2-й дочерний параграф.

    </div>

    смотреть пример

    Обратите внимание на тот факт, что если бы в блоке-родителе перед дочерними параграфами стоял любой другой тег, напрмер, заголовок h1, то псевдокласс first-child уже не действовал бы к 1-му параграфу, т.к. хоть параграф то он и 1-й, но элемент в блоке родителе уже 2-й.

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

    Язык текста

    Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.

    Если Вы помните из курса HTML, язык документа определяют атрибуты: charset (кодировка документа) и content (язык документа).

    Для того, чтобы определить язык отдельно взятого текстового блока, используют псевдокласс lang(), в круглых скобках которого и указывается язык.

    Пример:

  • ru - русский;
  • en - английский;
  • de - немецкий;
  • fr - французский;
  • it - итальянский.

    Всё вместе пишется так: span:lang(en){font-style:italic}//текст взятый в контейнер span - английский, он должен отображаться курсивом.

    Пример:

    <title>Псевдокласс lang</title>

    <style>

    p:lang(ru){color:#00f}

    p:lang(en){color:#f00}

    </style>

    <p lang=ru>Русский текст выделен синим.

    <p lang=en>English text is chosen red.

    смотреть пример

    Обратите внимание, что в теге (в параграфе), указывается с помощью атрибута lang используемый язык и его стиль: <p lang=en>текст прописанный в блоке CSS.

    Так же псевдокласс lang позволяет определять вид кавычек для цитат (тег q) с помощью значения quotes (кавычки). В России привычно использовать двойные кавычки, в других странах дела обстоят иначе.

    Пишется так:

    q:lang(en){quotes:"\201C" "\201D"}

    В фигурных скобках после значения quotes указывается юникод символов или просто смволы для открывающей и закрывающей кавычки.

    Пример:

    <title>Псевдокласс lang. Цитаты</title>

    <style>

    q:lang(en){quotes:"\201C" "\201D"}

    q:lang(de){quotes:"\201E" "\201C"}

    q:lang(fr){quotes:"\00AB" "\00BB"}

    q:lang(ru){quotes:"ёклмн." ".ёпрст"}

    </style>

    <div>

    <p>Обратите внимание на вид кавычек для цитат:

    <p><q>цитата по умолчанию</q>

    <p><q lang=fr>французская цитата</q>

    <p><q lang=de>немецкая цитата</q>

    <p><q lang=en>английская цитата</q>

    <p><q lang=ru>русская цитата</q>

    </div>

    смотреть пример

    Полезные советы:

  • Псевдоклассы нельзя внедрять в HTML документ с помощью атрибута style, можно только с помощью тега style в голове документа или внешнего CSS файла.
  • Если селектор, какого-либо псевдокласса явно не указывать, а написать вот так: hover{color:#ff0}, то это будет значить, что действие данного псевдокласса будет распространятся на все элементы документа.
  • Браузер IE6 и ниже игнорирует практически все псевдоклассы.

    << предыдущая глава | следующая глава >>

  • Отвечу на любые вопросы. С уважением, Дмитрий Владимирович:
    8-965-148-98-02, diplom07@mail.ru.
    Печатать страницу: Глава 15. Псевдоклассы

    Глава 15, Псевдоклассы, Глава, 15, Псевдоклассы, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, Создание сайтов, web-программирование, seo-продвижение, создание и раскрутка сайтов, вбиваю в топ-10, как гвозди, попробуйте бесплатно, Создание сайтов, web-программирование, seo-продвижение, Глава, 15, Псевдоклассы, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, раскрутка сайтов, Вбиваю в ТОП-10, как гвозди, раскрутка сайтов, Делаю и раскручиваю сайты, Дмитрий Владимирович

    ×

    Ваше письмо