Уроки CSS для новичков - Селекторы - урок 6


High Star

Селекторы




Если вы решили, что все уже знаете про каскадные таблицы стилей, то глубоко заблуждаетесь! Мы их даже толком и не начинали применять! То, что я рассказала в предыдущих уроках было лишь легкое введение. И сегодня я расскажу вам... нет, не сказку, я расскажу вам что такое селекторы и куда их можно приложить. Я не буду больше рекламировать свой сайт. Он уже достаточно намозолил вам глаза в предыдущих уроках, так что даже не умоляйте меня об этом!!!

Так что же за штука такая страшная "селектор"? Отвечу сразу, что ничего страшного в этом слове нет. Если попробовать перевести это слово с английского, то оно будет обозначать просто "выбор". Вот и запомните, что это выбор по... элементам, классам и по "ID". Если два первых понятия можно еще как-то представить, то третье, по моему скромному мнению, сокращенно от identifier, что переводится как "идентификатор", или короче, уникальный идентификатор для уникального объекта.

Селекторы по элементам

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

Ну, и некоторые другие не столь важных. Вот каждый этот тег и можно считать за элемент! Сейчас каждому элементу мы можем приписать любое значение, какое только взбредет нам в голову. Так начнем же скорее экспериментировать!

На этот раз мы создадим таблицу CSS во внешнем файле. Поэтому всего у нас будет два файла - один файл element.css, а другой - обычный документ element.html. А вы можете дать своим файлам другие названия, и необязательно одинаковые. Это я для себя, чтоб не запутаться!

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

А вставлять комментарии очень просто! Нужно просто включить их между открывающейся скобкой c восклицательным знаком и двумя черточками-тире <!-- и закрывающейся скобкой с двумя черточками, расположенной перед этой закрывающейся скобкой --<,

вот так:

<!-- Комментарий -->

И будьте уверены, никто не увидит на страничке ваш комментарий (разве что откроет код и не сопрет весь ваш труд, включая комментарии). Помню, давно, я все не могла решить одну проблему - как поместить свой копирайт внизу страницы, ну, и недолго думая, полезла на http://www.tema.ru/ - сайт Артемия Лебедева (а кто его не знает, а кто к нему не лезет!!!), открыла исходник, и вот что я там увидела...


<!-- Да, это тот самый сайт, куда половина рунета ходит читать исходники -->

<!-- Старый домик был страшен как смертный грех, даром что про-висел тут с 1995 по 2002 год.
В августе 2002 года я взял FreeHand, нарисовал в нем домик, распечатал, приложил распечатку к красной пленке, обвел контур, вырезал домик из пленки, провел линейкой, чтобы получился заворот, после чего сфотографировал на цифровик. Затем в Фотошопе по контуру нарисовал красивого красного цвета, оставив немного живой фактуры, чтобы не выглядело искусственно. Тень состоит из 7 слоев - это тебе не гауссова размывка на скопированный слой -->

А ведь, сама его страничка выглядит так:


Без комментариев…

Однако вернемся к уроку. Что касается стилей CSS, комментарии обозначаются немного по другому, а именно:

/* Комментарий */ (Такой комментарий может растянуться на несколько строк)

// Комментарий в одну строчку

Итак, напишем же скорее код!

Листинг 17. Файл element.css

BODY{
  background-color:#ccc;
  font-size:18px;
  }
/* задаем общий фон на страничке светло-серого цвета, а шрифт размером 18px */

TABLE{
  font-size:16pt;
  background-color: blue;
  width:400px;
  }
/* Я думаю, голубая таблица на сером фоне будет смотреть-ся хоть куда! А шрифт в таблице сделаем поменьше основного, ну и ширину таблицы тут запросто можно указать, равной 400px */

H2{
  color:red;
  font-size:30px;
  font-famely:sans-serif;
  text-align:center;
  }
/*заголовок красного цвета, размером в 30px, выполненным шрифтом без засечек и расположенным ровно по центру*/

P{
  color:green;
  text-align:right;
  font-style:italic;
  }
/* параграф будет выровнен по краему борту браузера, выведен курсивом зеленого цвета */

LI{
  font-size:16px;
  font-weight:bold;
  color: white;
  }
/* элементы списка пусть будут белого цвета, жирненькими и размером в 16 px */ A {color:yellow}//ссылка будет желтого цве-та

Теперь я напишу простую html-страничку. Помните, я обещала не рекламировать свой сайт? Но большего я не обещала! А так как я устроилась на работу страховым агентом, то про свою работу могу и написать несколько строк! А вы, можете вместо моих данных вписать свои! Я не обижусь!

(ПЫ-СЫ: теперь практически не работаю, так как времени не остается)

Открываем Notepad и пишем:

Листинг 18. Файл element.html

<HTML>
  <HEAD>
    <TITLE>Пример</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css" HREF="element.css">
  </HEAD>
  <BODY>
    <H2>Я - страховой агент!</H2>
      Никогда не думала, что когда-нибудь стану страховым агентом, но дела повернулись таким образом, что я вынуждена была взяться за первую попавшуюся возможность.
    <P>
      А перед этим я пыталась зарегистрироваться на бирже труда, но там постоянно что-то было не так с моими документами - то печать на такая, то фотография не та, то вообще там выходной или нет бланков...     </P>
      И вот теперь я агент крупной страховой компании! И, знаете, мне там сразу понравилось! И вот что я страхую:
  <TABLE border=5>
    <TR>
      <TD>
        <UL>
          <LI>Автострахование
          <LI>Добровольное медицинское страхование
          <LI>Страхование имущества частных лиц
          <LI>Страхование имущества предприятий
          <LI>Страхование судов и грузов, авиариски
          <LI>Страхование во время поездок
          <LI>Страхование от несчастных случаев
          <LI>Страхование жизни
        </UL>
      </TD>
    </TR>
  </TABLE>
    <H2>
      Так что, если вы еще не застрахованы - спешите стать моим клиентом!!!
  </H2>
  </BODY>
</HTML>

Сохраняю оба файла element.css и eltment.html в одной папке, открываю element.html и вижу следующую картину:


Страничка страхового агента

Ну вот, вроде все получилось - какие значения присваивали нашим тегам-элиментам, такие они и получились - заголовки красного цвета, ссылки - желтыми и т.д. Так что теперь можно перейти и к следующему разделу - селектору по классам!

Селекторы по классам

Если бы не было селектора по классам, было бы очень грустно. Представьте, вот установили вы для таблиц синий цвет. А потом подумали-подумали... и решили сделать часть таблиц с красным фоном. Но ничего у вас не получается! Таблицы упорно получаются такими, какими мы их определили в своих стилях. Ну и что же делать? Не возвращаться же к дедовским методам, когда мы для каждой таблицы писали свои значения...

Но плохо вы знаете CSS, если решили сдаться! Оказывается, можно просто элементы разбить на классы!!! И каждому классу задать свой стиль! Например, пусть для всех таблиц у нас назначен синий цвет:

TABLE {color:blue;}

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

TABLE {color:blue;} //все таблицы будут синего цвета
TABLE.yellow {color:yellow;} //кроме этих, конечно!

Ну, и давайте опять подробно, для наглядности я напишу не во внешнем файле, а все в одном, чтобы не писать два файла:

Листинг 19. Классный файл!

<HTML>
  <HEAD>
    <TITLE>Классы стилей</TITLE>
  <STYLE TYPE="text/css">
    ТABLE{
      color:blue;
      background-color:black;
      }
    TABLE.yellow;{
      color:yellow;
      }
  </STYLE>

  </HEAD>
  <BODY>
    Первая таблица:
  <TABLE border=1>
    <TR>
      <TD>
        Вот она какая синяя-пресиняя!На черном фоне!
      </TD>
    </TR>
  </TABLE>
    Вторая таблица:
  <TABLE class="yellow" border=1>
    <TR>
      <TD>
        Вот она какая желтая-прежелтая!
      </TD>
    </TR>
  </TABLE>
  </BODY>
</HTML>

И вот что получим:


Классные таблицы!

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

background-color:transparent

либо задать любой другой цвет.

Листинг 20.

<HTML>
  <HEAD>
    <TITLE>Классы стилей</TITLE>
  <STYLE TYPE="text/css">
    ТABLE{
      color:blue;
      background-color:black;
      }
    TABLE.yellow{
      color:yellow;
      background-color:transparent;
      }
  </STYLE>

  </HEAD>
  <BODY>
    Первая таблица:
  <TABLE border=1>
    <TR>
      <TD>
        Вот она какая синяя-пресиняя!На черном фоне!
      </TD>
    </TR>
  </TABLE>
    Вторая таблица:
  <TABLE class="yellow" border=1>
    <TR>
      <TD>
        Вот она какая желтая-прежелтая!
      </TD>
    </TR>
  </TABLE>
  </BODY>
</HTML>

И вот что получим:


Стиль второй таблицы отменяет общий стиль

Ну, и так для остальных элемнтов! Вводя сколько угодно классов для любого элемента, мы можем так разнообразить свои странички, что все, не знакомые со стилями CSS просто от зависти лопнут!

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

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

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

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

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

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

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

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

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

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

P I {color:red}

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

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

Листинг 21. Контекстные селекторы

<HTML>   <HEAD>
    <TITLE>Контекстные селекторы</TITLE>
  <STYLE TYPE="text/css">
    P I {color:red}
  </STYLE>

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

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


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

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

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

TABLE TH I {color:red}

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

Листинг 22. Таблица с выделенными словами

<HTML>   <HEAD>
    <TITLE>Контекстные селекторы</TITLE>
  <STYLE TYPE="text/css">
    TABLE TH I {color:red}
  </STYLE>

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

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


Таблица с выделением

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