1. Селекторы

Селектор – это способ применения стилей в CSS к определённым объектам HTML.

Слово "селектор" происходит от английского слова "select", что в переводе означает «выбирать». Чаще всего на практике применяются селекторы тегов, классов и идентификаторов. Например, нам нужно задать стили форматирования для тега абзацев <p>. Для этого перейдем в Aptana Studio 3 и создадим файл внешней таблицы стилей style.css, в котором запишем следующие строки (Рис.26).

При записи имени селекторов не допускается использование русских символов. Имена селекторов должны начинаться с латинских букв. Имена могут содержать арабские цифры, знаки дефиса (-) и подчеркивания (_)

Универсальный селектор

Универсальный селектор обозначается звездочкой (*). Он применяется, когда необходимо установить один стиль для всех элементов web-страницы. Рассмотрим универсальный селектор на следующем примере. Создадим HTML-страницу с заголовком (тег <h1>), абзацем (тег <p>) и ссылкой (тег <a>) (Рис. 27).

Подключим к ней файл style.css, в котором пропишем универсальный селектор (Рис.28)

Все элементы web-страницы (заголовок, абзац, ссылка) станут голубые (Рис.29). Такой же результат получим, если установим все эти свойства для тега <body>, т.е. в файле style.css вместо звездочки (*) укажем селектор тега <body> (body).

Селекторы тегов

В качестве селектора тегов может быть любой тег HTML, для которого можно установить определенные правила.

Синтаксис:

имя тега {свойство1; свойство2; ... свойствоN}

Например, сделаем заголовок зеленого цвета. Для этого в файле style.css запишем следующие строки (Рис.30):

Сохраним файл и обновим страничку в браузере (Рис.31)

Классы

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

Переходим в файл style.css и записываем класс следующим образом: ставим точку, прописываем имя класса p2, открываем фигурные скобки и задаем нужные css-команды (Рис.32).

Переходим в файл *.html. Задаем абзац и внутри него прописываем атрибут class со значением "p2" (class="p2")(Рис.33)

Идентификаторы

Служат для описания конкретного элемента страницы, и может применяться только один раз. Идентификатор в файле *.css обозначается символом решетки (#). Как и при использовании классов, идентификаторы могут применяться для конкретного тега.

Переходим в файл style.css и записываем класс следующим образом: ставим символ решетки, прописываем имя идентификатора, открываем фигурные скобки и задаем нужные css-команды (Рис.34).

Переходим в файл *.html. Задаем еще абзац и внутри него прописываем id="abzac2" (Рис.35).

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

На практике при создании web-страниц очень часто одни теги являются вложенными в другие. Контекстные селекторы позволяют задать отдельный стиль для тега, который расположен внутри другого. Рассмотрим пример. В документе *.html создадим вместо первого абзаца, т.е. тега <p>, блочный элемент тег <div>. Сделаем жирными первые слова раздела и абзаца при помощи тега <b> (Рис.36).

Переходим в файл style.css и прописываем следующий стиль p b{} (Рис.37):

Контекстные селекторы могут содержать не только один вложенный тег. В зависимости от дизайна страницы контекстные селекторы могут содержать два и более последовательно вложенных друг в друга селекторов.

Наибольшие возможности контекстные селекторы дают при совместном использовании их вместе с классами и идентификаторами.

Соседние селекторы

Соседними селекторами называются селекторы, которые располагаются сразу друг за другом. Общий синтаксис соседних селекторов выглядит следующим образом

Синтакис:

Селектор1 + Селектор2 {Свойство1; Свойство2 ... СвойствоN}

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

Рассмотрим следующий пример, в котором теги <i> и <u> являются соседними, а теги <b> и <u> (тег u отвечает за подчеркивание текста) не являются соседними (Рис.38).

Переходим в файл style.css и прописываем следующий стиль b+i {} (Рис.39):

Результат в браузере будет выглядеть следующим образом (Рис.40):

Дочерние селекторы

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

Все селекторы, относящиеся к тегам, которые находятся внутри раздела <div>, будут являться дочерними по отношению к селектору тега <div>, т.е. селекторы тегов <i> и <u> и <b> будут дочерними.

Синтаксис:

селектор1 > селектор2 {свойство1, свойство2 ... свойствоN}

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

Переходим в файл style.css и прописываем следующий стиль (Рис.41):

Результат в браузере будет выглядеть следующим образом (Рис.42):

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

Псевдоклассы задают стиль элементам страницы, которые изменяют свое состояние действиями пользователя. К примеру, у ссылки можно изменить цвет текста при наведении на нее курсором мыши с помощью псевдокласса hover.

Для этого в документе *.css нужно прописать следующий стиль (Рис.43).

Ссылка изменит свой цвет на зеленый, если мы наведем на нее мышкой.