Представляю вашему вниманию вторую часть из цикла статей по языку стилей CSS. В первой части мы с вами рассмотрели три способа добавления стилей на веб-страницу, а именно изучили внутренние стили, которые являются расширением для одиночного тега HTML-документа, глобальные стили, при использовании которых стилевые свойства прописываются между тегами <style> и </style>, а также связанные стили, которые определяются в отдельном от HTML-документа файле с расширением .css
Очень важным понятием в языке CSS является селектор. Селектор определяет, к какому именно элементу (или элементам) в HTML-документе будет применен стиль. В CSS существует несколько типов селекторов, которые мы рассмотрим в данной статье.
Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS
Создадим следующую структуру HTML-документа, к которому уже подключен файл стилей selector_type.css (<link rel=”stylesheet” type=”text/css” href=”selector_type.css”/>)
Сохраним данный документ как selecror.html на флеш накопителе в папке CSS.
![](https://paratechnik.ru/wp-content/uploads/2019/02/1550850838_2.jpg)
Таким же образом создадим и сохраним файл selector_type.css на флеш накопителе в папке CSS.
![](https://paratechnik.ru/wp-content/uploads/2023/11/78363.jpg)
Добавим на веб-страницу selecror.html заголовок “Селекторы в CSS” и абзац “Селектор представляет собой….” .
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850799_4.jpg)
Также добавим на веб-страницу selecror.html таблицу, для этого пропишем теги <table> и </table> .
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850821_5.jpg)
Создаваемую таблицу выровняем по центру веб-страницы (атрибут align со значением center), а также зададим толщину рамки таблицы в 1 пиксель (border=”1″) .
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850864_6.jpg)
Между тегами <caption> и </caption> укажем название таблицы (Типы селекторов CSS) .
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850825_7.jpg)
Между тегами <table> и </table> пропишем теги <tr> и </tr>, этим мы создадим одну строку таблицы .
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850845_8.jpg)
Между тегами <tr> и </tr> пропишем два раза теги <td>…</td>, этим действием создадим два столбца в таблице. Названия столбцов укажем как “Селектор” и “Пример использования” .
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850869_9.jpg)
Аналогичным образом добавим в таблицу ещё семь строк (теги <tr> и </tr>), а в каждой строке создадим по два столбца (теги <td> и </td>) .
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850856_10.jpg)
В итоге веб-страница selector.html примет следующий вид .
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850818_11.jpg)
Из созданной таблицы видно, что существуют следующие типы CSS селекторов:
- Селектор типа.
- Селектор идентификатора.
- Селектор класса.
- Универсальный селектор.
- Селектор потомка.
- Селектор сестринского элемента.
- Селектор обобщённых родственных элементов.
Рассмотрим каждый тип селектора на примере веб-страницы selector.html
Селектор типа соответствует какому-либо имени элемента в HTML-документе. Например, на веб-странице selector.html есть заголовок “Селекторы в CSS”, который задан тегами <h1>…</h1>. Выровняем текст заголовка по центру веб-страницы и зададим ему красный цвет
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850881_12.jpg)
В файле стилей selector_type.css в качестве селектора типа указываем тег заголовка <h1>, далее в фигурных скобках указываем стилевое свойство и его значение, которое хотим применить к заголовку с текстом “Селекторы в CSS”
![](https://paratechnik.ru/wp-content/uploads/2023/11/1_78363.jpg)
Как видим, текст заголовка расположился по центру веб-страницы и имеет красный цвет
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850805_14.jpg)
Селектор сестринского элемента соответствует элементу, являющемуся сестринским по отношению к другому элементу. Например, тег (абзац “Селектор представляет собой….”) является сестринским по отношению к тегу <h1> (заголовок “Селекторы в CSS”).
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850809_15.jpg)
Изменим цвет текста абзаца (“Селектор представляет собой…”) , следующего за заголовком (“Селекторы в CSS”) на blueviolet, используя селектор сестринского элемента. В файле стилей selector_type.css дописываем строку h1+p {color: blueviolet}
![](https://paratechnik.ru/wp-content/uploads/2023/11/2_78363.jpg)
Как видим, цвет текста абзаца изменился на blueviolet
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850844_17.jpg)
Добавим на веб-страницу ещё два одинаковых абзаца после заголовка “Селекторы в CSS”
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850845_18.jpg)
Получаем следующее: текст первого абзаца имеет цвет blueviolet, а цвет текста остальных двух абзацев остался по умолчанию.
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850837_19.jpg)
Изменим цвет текста всех трёх абзацев, следующих за заголовком “Селекторы в CSS” на blueviolet, используя селектор обобщённых родственных элементов. Селектор обобщённых родственных элементов соответствует элементу, являющемуся сестринским по отношению к другому элементу. Например, несколько тегов <p> (три абзаца “Селектор представляет собой….”) являются сестринскими по отношению к тегу <h1> (заголовок “Селекторы в CSS”).
В файле selector_type.css пропишем следующую строку h1~p {color: blueviolet}
![](https://paratechnik.ru/wp-content/uploads/2023/11/3_78363.jpg)
В результате применения селектора обобщённых родственных элементов цвет текста всех трёх абзацев после заголовка “Селекторы в CSS” изменился на blueviolet
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850867_21.jpg)
Рассмотрим ещё один тип селектора CSS, такой как селектор идентификатора. Селектор идентификатора соответствует элементу, чей атрибут id имеет значение, совпадающее с указанным после символа #
Увеличим размер шрифта и изменим цвет текста в названии таблицы (теги <caption>…</caption>), используя селектор идентификатора. Внутри тега пропишем идентификатор с названием “capt”, как показано ниже (<caption id=”capt”>)
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850877_22.jpg)
В файле selector_type.css добавим следующую строку #capt {color: red; font-size: 20px}, где после символа # указан идентификатор “capt”
![](https://paratechnik.ru/wp-content/uploads/2023/11/4_78363.jpg)
Как видим, размер шрифта и цвет текста в названии таблицы изменился в соответствии со стилевым свойством, прописанным в файле selector_type.css
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850860_24.jpg)
В HTML-документе можно создавать множество идентификаторов, но только с условием, чтобы их названия никогда не повторялись. Пропишем ещё один идентификатор с названием “tr1″ внутри тега <tr>, как показано ниже (<tr id=”tr1”>)
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850849_25.jpg)
Используя идентификатор “tr1”, выровняем текст в названиях столбцов таблицы по центру, зададим им зеленый цвет, а также сделаем шрифт в названии столбцов жирным
В файле selector_type.css пишем #tr1 {text-align: center; font-weight: bold; color: green}
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2023/11/5_78363.jpg)
Получаем следующее
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850814_27.jpg)
Следующим рассматриваемым нами типом селектора является селектор класса. Селектор класса соответствует элементу, чей атрибут class имеет значение, совпадающее с указанным после точки. Поменяем цвет рамки таблицы на веб-странице selector.html на синий с помощью селектора класса. Для этого внутри тега <table> пропишем название класса следующим образом: table class=”class1″, где class1 – это название класса
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850845_28.jpg)
В файле стилей selector_type.css допишем следующую строку .class1 {border-color: blue}
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850824_29.jpg)
Как видим, цвет рамки таблицы изменился на синий
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850845_30.jpg)
Изменим цвет текста в таблице на зеленый. В файле selector_type.css пишем строку .class1 {color: green}
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2023/11/6_78363.jpg)
Видим, что цвет текста в таблице изменился на зеленый
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850810_32.jpg)
Добавим на веб-страницу какое-нибудь фоновое изображение, используя универсальный селектор. На флеш накопителе в папке CSS у нас есть файл изображения с именем image и расширением .jpg
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2023/11/7_78363.jpg)
В файле стилей selector_type.css допишем строку *{background-image: url(image.jpg)}
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850857_34.jpg)
В итоге веб-страница примет следующий вид
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850842_35.jpg)
Рассмотрим последний вид селектора, такой как селектор потомка. Селектор потомка соответствует элементу, являющемуся потомком другого элемента. Например, во всех трёх абзацах (теги <p> и </p>) заключим словосочетания “HTML-документа” и “CSS-правила” между тегами <i>…</i>, как это показано ниже. В этом случае тег <i> будет являться потомком тега <p>. Тег <i> изменит шрифт словосочетаний “HTML-документа” и “CSS-правила” на курсивный
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850821_36.jpg)
Словосочетания “HTML-документа” и “CSS-правила” в курсивном шрифте
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850866_37.jpg)
Изменим цвет текста словосочетаний “HTML-документа” и “CSS-правила” на красный с помощью селектора потомка. Для этого в файле стилей selector_type.css допишем строку p I {color: red}
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850842_38.jpg)
В итоге веб-страница примет следующий вид
![Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS Просто о сложном или изучаем CSS3. Часть 2. Типы селекторов CSS](https://paratechnik.ru/wp-content/uploads/2019/02/1550850881_39.jpg)