ТРИДЦАТЬ ВОСЬМОЙ УРОК

Селекторы по ID

Отличие селектора ID от селектора по классам лишь в том, что классы можно применять сколько угодно раз, а с ID это дело не пройдет. Потому как он уникальный и требует к себе индивидуального подхода. А узнать уникальный идентификатор можно по решетке (#), которая ставится перед значением элемента.

Лучше я объясню это на примере. Создадим уникальный индентификатор ID, который ответственнен за красный цвет. Выглядеть это будет так:

#red {color:red} h1#blue {color:blue}

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

А в теле документа напишем:

<P ID=red> Этот абзац красного цвета <H1 ID=blue> А этот заголовок первого уровня голубого цвета

Думаю, тут все понятно, а если непонятно, то не заморачивайте свою голову, пойдемте лучше дальше!


Контекстные селекторы

Это очень интересная штука. Они пригодятся, когда одни теги приходится вкладывать в другие. Например, нам хочется, чтобы все слова в абзаце, выделенные курсивом были красного цвета. Тогда мы можем написать просто так:

I {color:red}

Обратите внимание, что теги в этом случае пишутся через пробел!

В документе напишем же так:

<p> Это вот у нас абзац обыкновенный <i>а эти слова написаны красным курсивом</i> а дальше опять обыкновенный абзац.

И вот что получится:

Согласитесь, очень удобно!

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

TABLE TH I {color:red}

В документе напишем же так:

<TABLE border=5> <TR> <TH> Вот такое у нас <I>выделенное место</I> в заголовке </TH> </TR> <TR> <TD>тут обыкновенная ячейка</TD> <TD>и тут <i>обыкновенная</i> ячейка</TD> </TR> </TABLE>

В результате должно получиться такая вот красота:

Обратите внимание! Курсив в документе в двух местах - в заголовке и во второй ячейке. Но красным выделилось только в заголовке. Потому как так и определено было правилом стилей. Вот так-то! И не говорите, что я долго пишу свои уроки и не жалуйтесь! Кто как не я так подробно и красочно все вам разжую-растолкую, ась?


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

Знаете, вы будете смеяться, но существует всего два псевдоэлемента - first-letter и first-line. Первый псевдоэлемент отвечает за Первую Букву Абзаца (параграфа), а второй - за Первую Линию Абзаца (параграфа). Зато как можно облагородить ваши странички! Как же они будут великолепно смотреться! Я же при каждом удобном случае стараюсь их куда-нибудь впихнуть. Красоты ради. Ну да ладно. Переходим от слов к делу.

Сразу разберемся с ними обоими. Ради этого я готова пожертвовать местом на своей страничке и произвести код целиком:

<html lang="ru"> <HEAD> <TITLE>Вот они какие псевдоэлементы</TITLE> <STYLE type="text/css"> DIV:first-line { font-size: 16pt; font-weight: bold; color: red } P:first-letter { font-size: 20pt; color: green } </STYLE> </HEAD> <BODY> <p> Как красиво, не правда ли? Пиши себе и пиши, первые буквы сами получатся большими и зелеными! <DIV> А в этом самом абзаце первая строчка будет в 16 pt; написана будет жирным шрифтом и красного цвета. И это не предел! </DIV> <P>Тут тоже буковка сама выскочила. Так что не теряйте времени даром, украшайте скорей свои странички! Пусть ваши посетители порадуются, что зашли на такую красивую страничку! </BODY> </HTML>

Обратите внимание, что первую строку first-line я задала c помощью div, так как этот элемент применяется только к блокам!

Ну и вот что получилось:

Лепота, согласитесь!

Ну и последнее, что мне хотелось бы рассмотреть в этом уроке, это Псевдоклассы.


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

Вот без чего не может обойтись ни один уважающий себя сайтостроитель, так это без псевдоклассов. Он может обойтись без псевдоэлементов, он может пройти мимо контекстных селекторов и наплевать на селекторы по ID, но игнорировать псевдоклассы он не в силах. Потому что к псевдоклассам относятся все состояния ссылок. А что такое сайт без красивых ссылок? Да фи! Ничего не стоит! Кто захочет пойти туда, куда его пошлют, если ссылка грязно-фиолетового или убого синего цвета? Да посетитель и мышку не захочет марать об такую ссылку! А если еще в стилях ссылок (забегу немного вперед) указать еще и задний фон каждой ссылки... так это вообще замечательно! Зачем рисовать, мучаться в Фотошопе, когда можно нарисовать ссылку с помощью средств CSS? Вы об этом подумали??? Так что давайте скорее разбираться с этими псевдоклассами.

С помощью подручных средств CSS мы можем переопределить навязанные по умолчанию нам и нашим дражайшим посетителям цвета ссылок! Вспомним (кто забыл, а кто не забыл - знайте!), что есть четыре состояния ссылок:

  • link - цвет еще не посещенной ссылки;
  • active - это когда на ссылку нажали;
  • visited - цвет посещенной ссылки;
  • hover - когда только навели мышкой на ссылку и думают... интересно что дальше будет? И до шестой версии Netscape вообще ее вроде как и не существовало.

А мы сейчас тюк! и перекрасим наши ссылки в другие цвета! Мы даже можем сделать их жирней или тоньше, выбрать шрифт, убрать подчеркивание и вообще, что хотим то и сделаем с ними! Дай нам только волю!

И вот я пришла дать вам волю... Пишите со мной, пишите без меня, пишите с друзьями, пишите пишите и пишите! Ни дня без строчки! Без ссылки! Посылайте всех! Открывайте Фотошоп, вызывайте цветовую палитру, тыкайте пипеткой понравившийся цвет, смотрите на цифровой эквивалент цвета, и вперед с песнями!!!

Что? Кому-то это непонятно? Все забыли, да? Эх, темнота... Ладно, показываю еще раз, но это в последний раз!

Посмотрите на картинку:

  1. нажимаем Set Foreground Color, вызываем Color Picker
  2. подбираем цветовую гамму
  3. если нужно ее уточняем в большом окошке
  4. запоминаем или копируем цифры, которые потом вставляем в код

Вот и все! Теперь мы вооружены и очень опасны! Я вот выбрала четыре цвета для разных состояний ссылок: #1EE6DF; #6CEAB3; #C5EB14; и #1F4292. Но мне этого мало! Я хочу, чтобы для каждого состояния ссылки был свой фон! Вот и четыре фона: #333; #666; #ccc и #999. Но я и на этом не успокоюсь! Хочу, чтоб активные ссылки были жирными, а подчеркивания ваще снесу нафих, оставив подчеркнутой только у наведенной ссылки. Чтоб посетитель докумекал, что это все-таки ссылка. А то бывают такие посетители, которым пока не подчеркнешь, так и не догадаются, что по этому слову надо щелкнуть мышкой.

Каюсь, все эти цвета брала "от балды", просто тыкая пипеткой в разные места Color Picker'a. Так что напишу код, а потом посмотрим что получится! Опять же для одной ссылки напишу весь код целиком. Мне не жалко для такого дела!

<html lang="ru"> <head> <STYLE type="text/css"> A:link { font-family: Arial; font-size: 14pt; COLOR: #1EE6DF; text-decoration: none; background-color: #333; } A:visited { font-family: Caption; font-size: 14pt; COLOR: #6CEAB3; text-decoration: none; background-color: #666; } A:active { font-family: Caption; font-size: 14pt; COLOR: #C5EB14; text-decoration: none; background-color: #999; } A:hover { font-family: Arial; font-size: 14pt; font-weight: bold; COLOR: #1F4292; text-decoration: underline; background-color: #ccc } </STYLE> </head> <body> <a href="#">Вот какая красивая ссылка!</a> </body> </html>

Вот что получилось:

Вот какая красивая ссылка получилась

Хм... сказать по правде получился тихий ужас. Ну да и ладно! Главное - все понятно! А если вы хотите не ко всем стиль такой применить, а к определенному типу ссылок, тогда введите в стилях для отдельных ссылок отдельный псевдокласс, например, такой:

a.balda:link {и дальше все значения} a.balda:vlink {и дальше все значения} a.balda:alink {и дальше все значения} a.balda:hover {и дальше все значения}

А в теле документа напишете около нужных ссылок:

<a href class="balda">А эта другая красивая ссылка. Еще краше</a>

Надеюсь, все понятно? Тогда дерзайте! И до следующего урока!


К списку всех уроков

(В. Ахметзянова, 2005 г)