Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS
Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS
Здравствуйте, уважаемые читатели сайта remontcompa.ru! Меня зовут Роман Нахват и я представляю вашему вниманию вторую часть из цикла статей по языку стилей CSS. В первой части мы с вами рассмотрели три способа добавления стилей на веб-страницу, а именно изучили внутренние стили, которые являются расширением для одиночного тега HTML-документа, глобальные стили, при использовании которых стилевые свойства прописываются между тегами
, а также связанные стили, которые определяются в отдельном от HTML-документа файле с расширением .css
Очень важным понятием в языке CSS является селектор. Селектор определяет, к какому именно элементу (или элементам) в HTML-документе будет применен стиль. В CSS существует несколько типов селекторов, которые мы рассмотрим в данной статье.
Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS
Создадим следующую структуру HTML-документа, к которому уже подключен файл стилей selector_type.css ()
Сохраним данный документ как selecror.html на флеш накопителе в папке CSS
Таким же образом создадим и сохраним файл selector_type.css на флеш накопителе в папке CSS
Добавим на веб-страницу selecror.html заголовок «Селекторы в CSS» и абзац «Селектор представляет собой….»
Также добавим на веб-страницу selecror.html таблицу, для этого пропишем теги
и
Создаваемую таблицу выровняем по центру веб-страницы (атрибут align со значением center), а также зададим толщину рамки таблицы в 1 пиксель (border=»1″)
Между тегами
Между тегами
и
пропишем теги
и
, этим мы создадим одну строку таблицы
Между тегами
и
пропишем два раза теги
…
, этим действием создадим два столбца в таблице. Названия столбцов укажем как «Селектор» и «Пример использования»
Аналогичным образом добавим в таблицу ещё семь строк (теги
и
), а в каждой строке создадим по два столбца (теги
и
)
В итоге веб-страница selector.html примет следующий вид
Из созданной таблицы видно, что существуют следующие типы CSS селекторов:
Селектор типа
Селектор идентификатора
Селектор класса
Универсальный селектор
Селектор потомка
Селектор сестринского элемента
Селектор обобщённых родственных элементов
Рассмотрим каждый тип селектора на примере веб-страницы selector.html
Селектор типа соответствует какому-либо имени элемента в HTML-документе. Например, на веб-странице selector.html есть заголовок «Селекторы в CSS», который задан тегами
…
. Выровняем текст заголовка по центру веб-страницы и зададим ему красный цвет
В файле стилей selector_type.css в качестве селектора типа указываем тег заголовка
, далее в фигурных скобках указываем стилевое свойство и его значение, которое хотим применить к заголовку с текстом «Селекторы в CSS»
Как видим, текст заголовка расположился по центру веб-страницы и имеет красный цвет
Селектор сестринского элемента соответствует элементу, являющемуся сестринским по отношению к другому элементу. Например, тег
(абзац «Селектор представляет собой….») является сестринским по отношению к тегу
(заголовок «Селекторы в CSS»).
Изменим цвет текста абзаца («Селектор представляет собой…») , следующего за заголовком («Селекторы в CSS») на blueviolet, используя селектор сестринского элемента. В файле стилей selector_type.css дописываем строку h1+p {color: blueviolet}
Как видим, цвет текста абзаца изменился на blueviolet
Добавим на веб-страницу ещё два одинаковых абзаца после заголовка «Селекторы в CSS»
Получаем следующее: текст первого абзаца имеет цвет blueviolet, а цвет текста остальных двух абзацев остался по умолчанию.
Изменим цвет текста всех трёх абзацев, следующих за заголовком «Селекторы в CSS» на blueviolet, используя селектор обобщённых родственных элементов. Селектор обобщённых родственных элементов соответствует элементу, являющемуся сестринским по отношению к другому элементу. Например, несколько тегов
(три абзаца «Селектор представляет собой….») являются сестринскими по отношению к тегу
(заголовок «Селекторы в CSS»).
В файле selector_type.css пропишем следующую строку h1~p {color: blueviolet}
В результате применения селектора обобщённых родственных элементов цвет текста всех трёх абзацев после заголовка «Селекторы в CSS» изменился на blueviolet
Рассмотрим ещё один тип селектора CSS, такой как селектор идентификатора. Селектор идентификатора соответствует элементу, чей атрибут id имеет значение, совпадающее с указанным после символа #
Увеличим размер шрифта и изменим цвет текста в названии таблицы (теги
…
), используя селектор идентификатора. Внутри тега
пропишем идентификатор с названием «capt», как показано ниже (
В файле selector_type.css добавим следующую строку #capt {color: red; font-size: 20px}, где после символа # указан идентификатор «capt»
Как видим, размер шрифта и цвет текста в названии таблицы изменился в соответствии со стилевым свойством, прописанным в файле selector_type.css
В HTML-документе можно создавать множество идентификаторов, но только с условием, чтобы их названия никогда не повторялись. Пропишем ещё один идентификатор с названием «tr1» внутри тега
, как показано ниже (
)
Используя идентификатор «tr1», выровняем текст в названиях столбцов таблицы по центру, зададим им зеленый цвет, а также сделаем шрифт в названии столбцов жирным
В файле selector_type.css пишем #tr1 {text-align: center; font-weight: bold; color: green}
Получаем следующее
Следующим рассматриваемым нами типом селектора является селектор класса. Селектор класса соответствует элементу, чей атрибут class имеет значение, совпадающее с указанным после точки. Поменяем цвет рамки таблицы на веб-странице selector.html на синий с помощью селектора класса. Для этого внутри тега
пропишем название класса следующим образом: table class=»class1″, где class1 — это название класса
Веб-дизайн, Разное
Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS