В прошлом уроке мы разобрали внешние и внутренние таблицы стилей css, узнали как создавать их и подключать. В этом уроке речь пойдет о селекторах css, какие бывают и как их использовать.

  • Что такое CSS селекторы
  • Селекторы типов (тега)
  • Селекторы классов
  • ID селекторы
  • Групповые селекторы
  • Универсальный селектор

Мы уже разобрались с тем, что стиль css состоит из селектора и блока объявления в котором расположены форматирующие свойства. Форматирующие свойства указывают браузеру какие нужно произвести изменения над элементом, тогда как css селектор – говорит к какому именно объекту сайту нужно применить форматирующие эффекты.

В этом примере, селектором является символ (P), который указывает на то, что ко всем тегам <p> на сайте, нужно применить указанный размер.

Css селекторы контролируют дизайн веб страницы, определяя элемент, который вы хотите изменить. Именно css селекторы позволяют выбрать один или группу элементов для их последующего форматирования.

CSS селекторы типов или тега

Сss селекторы типов предоставляют весьма эффективные средства проектирования дизайна веб страницы. С помощью css селектора типов можно определить стиль всех экземпляров конкретного html элемента.

Он позволяет изменить дизайн веб страницы без особых проблем.

Объясню … Задав только одну строчку в таблице стилей, можно изменить цвет или размер всех абзацев на сайте, изменить отступы или размеры заголовков и т.д. Не нужно к каждому заголовку <h1> … <h6> применять отдельно стили, можно это сделать в таблице один раз для всех заголовков h1 или h2 или h3 и т.д.

Определить селектор типов очень просто, их название наследует названия соответствующих тегов в html, только без фигурных скобок <>.

Пример:

Каждый селектор соответствует тегу в html коде вашей страницы. Все теги <strong> будут покрашены в красный цвет, у каждой картинки на сайте будет отступ в 10px, все таблицы на сайте будут иметь светло серый фон.

Селекторы классов. Точное управление

Если вам понадобится отредактировать некоторые родственные элементы на веб странице иначе, чем другие, вам в этом помогут селекторы классов css. Что это значит?

Допустим у вас на странице 3 таблицы. Вам нужно придать двум из них серый фон, а одна должна иметь зеленый фон. Используя просто селектор тегов, вы покрасите все таблицы одним цветом. И выделить отдельно одну таблицу у вас не получится.

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

Для этого создаем класс .green-table и применяем его только к одно таблице.

Правила создания селектора класса:

  • Названия селектора всегда должно начинаться с точки, именно по ней браузер находит селекторы классов в таблице стилей
  • В названии селектора класса разрешается использовать только буквы алфавита, чисел, дефисов, знака подчеркивания
  • Название после точки всегда должно начинаться с буквы .name22 а не .22name или ._my-style и т.д.
  • Имена селекторов класса чувствительны к регистру. Это значит что .mystyle и .MYSTYLE и .MyStyle – это разные имена классов

После объявления селектора класса, идет блок объявления, как и у селектора типов:

Если селектор типов можно просто объявить в таблице стилей и он автоматически применится к нужным тегам на сайте, то селектор класса нужно вписывать в html код. К тому тегу или тегам к которым мы хотим.

Пример применения класса .myclass к таблице. Когда мы применяем класс в html коде, точка перед названием класса не ставится, обратите внимание!

Столкнувшись с тегом <table class=”myclass”> браузер поймет что к этой таблице нужно применить форматирующие свойства класса .myclass из таблицы стилей.

ID селекторы

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

Для селектора id, как и для селектор класса, вам нужно придумать название и применить прописать его в коде html к нужному элементу.

Разница в том, что id селекторы начинаются с символа (#).

Выше создан id селектор для шапки сайта.

Как его прописать в html коде?

Это делается очень просто:

Обратите внимания, что знак решетки в html коде, мы не указываем!

Применения id селектора

ID селектор нужно применять строго по назначению. Есть определенные условия для применения этого селектора:

  • Для стиля используемого неоднократно, применяйте классы.
  • Используйте id для определения разделов веб страницы или каких либо уникальных элементов (которые не повторяются)
  • Если вы используете JavaScript, то он работает только с id селекторами, в этом случае также применяют id селектор.
  • Имейте в виду, что если к html тегу прописан и id селектор и селектор класса, то id селектор будет иметь больший приоритет.

Групповые селекторы

Бывают случаи, когда нужно придать одинаковый стиль к разным элементам веб страницы. К примеру нужно что бы все заголовки от h1 до h2 имели одинаковый цвет. Прописывать стиль для каждого тега не очень удобно и быстро. Для таких случаев используются групповые селекторы.

Как создаются групповые css селекторы?

Вы просто пишете нужные селекторы и отделяете их запятыми.

Использовать можно не только селекторы типов, можно комбинировать все виды селекторов:

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

Групповой селектор можно использовать для группировки и придания нужного оформления для нескольких тегов, но что если вам нужно задать какой либо форматирующий стиль для всех тегов на странице?

Перечислять их у вас займет уйму времени, для этого в css есть универсальный селектор.

Универсальный селектор выглядит так (*), это просто знак звездочки:

Иногда трудно предсказать воздействия выбранного вами свойства на все теги, поэтому для таких целей используют механизм наследования в css, о котором мы поговорим в следующем уроке.

CSS селекторы Владимир Полковниченко Основы CSS,
В прошлом уроке мы разобрали внешние и внутренние таблицы стилей css, узнали как создавать их и подключать. В этом уроке речь пойдет о селекторах css, какие бывают и как их использовать. Что такое CSS селекторы Селекторы типов (тега) Селекторы классов ID селекторы Групповые селекторы Универсальный селектор Мы уже разобрались с тем, что стиль css состоит из...
В прошлом уроке мы разобрали <a title="внешние и внутренние таблицы стилей css" href="/css/obuchenie-css/osnovy-css/vneshnie-i-vnutrennie-tablicy-stilej-css-sozdaem-i-podklyuchaem.html" target="_blank">внешние и внутренние таблицы стилей css</a>, узнали как создавать их и подключать. В этом уроке речь пойдет о <em>селекторах css</em>, какие бывают и как их использовать. <ul> <li>Что такое CSS селекторы</li> <li>Селекторы типов (тега)</li> <li>Селекторы классов</li> <li>ID селекторы</li> <li>Групповые селекторы</li> <li>Универсальный селектор</li> </ul> <span id="more-168"></span> Мы уже разобрались с тем, что <a title="стиль css" href="/css/obuchenie-css/osnovy-css/chto-takoe-css-stili-pravila-i-kak-ix-sozdavat.html" target="_blank">стиль css</a> состоит из селектора и блока объявления в котором расположены форматирующие свойства. Форматирующие свойства указывают браузеру какие нужно произвести изменения над элементом, тогда как <strong>css селектор</strong> - говорит к какому именно объекту сайту нужно применить форматирующие эффекты. [crayon-56611e8a8f1b9138126573/] В этом примере, селектором является символ (P), который указывает на то, что ко всем тегам <p> на сайте, нужно применить указанный размер. Css селекторы контролируют дизайн веб страницы, определяя элемент, который вы хотите изменить. Именно <em>css селекторы</em> позволяют выбрать один или группу элементов для их последующего форматирования. <h3>CSS селекторы типов или тега</h3> <strong>Сss селекторы типов</strong> предоставляют весьма эффективные средства проектирования дизайна веб страницы. С помощью css селектора типов можно определить стиль всех экземпляров конкретного html элемента. Он позволяет изменить дизайн веб страницы без особых проблем. Объясню ... Задав только одну строчку в таблице стилей, можно изменить цвет или размер всех абзацев на сайте, изменить отступы или размеры заголовков и т.д. Не нужно к каждому заголовку <h1> ... <h6> применять отдельно стили, можно это сделать в таблице один раз для всех заголовков h1 или h2 или h3 и т.д. Определить селектор типов очень просто, их название наследует названия соответствующих тегов в html, только без фигурных скобок <>. Пример: [crayon-56611e8a8f1cc290871426/] Каждый селектор соответствует тегу в html коде вашей страницы. Все теги <strong> будут покрашены в красный цвет, у каждой картинки на сайте будет отступ в 10px, все таблицы на сайте будут иметь светло серый фон. <h3>Селекторы классов. Точное управление</h3> Если вам понадобится отредактировать некоторые родственные элементы на веб странице иначе, чем другие, вам в этом помогут <strong>селекторы классов css</strong>. Что это значит? Допустим у вас на странице 3 таблицы. Вам нужно придать двум из них серый фон, а одна должна иметь зеленый фон. Используя просто селектор тегов, вы покрасите все таблицы одним цветом. И выделить отдельно одну таблицу у вас не получится. Для этих целей созданы селекторы классов. Вы создаете селектор классов с нужным вам форматированием, и предаете его нужному элементу на странице. К примеру для всех таблиц, мы делаем цвет фона серый, а к одной таблице, применяем селектор классов в котором прописан зеленый цвет фона. Для этого создаем класс .green-table и применяем его только к одно таблице. <strong>Правила создания селектора класса:</strong> <ul> <li>Названия селектора всегда должно начинаться с точки, именно по ней браузер находит <em>селекторы классов</em> в таблице стилей</li> <li>В названии селектора класса разрешается использовать только буквы алфавита, чисел, дефисов, знака подчеркивания</li> <li>Название после точки всегда должно начинаться с буквы .name22 а не <del>.22name</del> или <del>._my-style</del> и т.д.</li> <li>Имена селекторов класса чувствительны к регистру. Это значит что .mystyle и .MYSTYLE и .MyStyle - это разные имена классов</li> </ul> После объявления селектора класса, идет блок объявления, как и у селектора типов: [crayon-56611e8a8f1d5974125366/] Если селектор типов можно просто объявить в таблице стилей и он автоматически применится к нужным тегам на сайте, то селектор класса нужно вписывать в html код. К тому тегу или тегам к которым мы хотим. [crayon-56611e8a8f1dc116077577/] Пример применения класса .myclass к таблице. Когда мы применяем класс в html коде, точка перед названием класса не ставится, обратите внимание! Столкнувшись с тегом <table class="myclass"> браузер поймет что к этой таблице нужно применить форматирующие свойства класса .myclass из таблицы стилей. <h3>ID селекторы</h3> В css id селекторы предназначены для идентификации уникальных элементов веб страницы. Этот селектор применяется больше при проектировании дизайна страницы. Это панель навигации, левый и правый блок сайта, шапка сайта или подвал и т.д. Любые уникальные блоки на странице. Для селектора id, как и для селектор класса, вам нужно придумать название и применить прописать его в коде html к нужному элементу. Разница в том, что id селекторы начинаются с символа (#). [crayon-56611e8a8f1e3443215813/] Выше создан id селектор для шапки сайта. Как его прописать в html коде? Это делается очень просто: [crayon-56611e8a8f1e9826516227/] Обратите внимания, что знак решетки в html коде, мы не указываем! <h4>Применения id селектора</h4> ID селектор нужно применять строго по назначению. Есть определенные условия для применения этого селектора: <ul> <li>Для стиля используемого неоднократно, применяйте классы.</li> <li>Используйте id для определения разделов веб страницы или каких либо уникальных элементов (которые не повторяются)</li> <li>Если вы используете JavaScript, то он работает только с id селекторами, в этом случае также применяют id селектор.</li> <li>Имейте в виду, что если к html тегу прописан и id селектор и селектор класса, то id селектор будет иметь больший приоритет.</li> </ul> <h3>Групповые селекторы</h3> Бывают случаи, когда нужно придать одинаковый стиль к разным элементам веб страницы. К примеру нужно что бы все заголовки от h1 до h2 имели одинаковый цвет. Прописывать стиль для каждого тега не очень удобно и быстро. Для таких случаев используются групповые селекторы. <strong>Как создаются групповые css селекторы?</strong> [crayon-56611e8a8f1f1708013352/] Вы просто пишете нужные селекторы и отделяете их запятыми. Использовать можно не только селекторы типов, можно комбинировать все виды селекторов: [crayon-56611e8a8f1f7495449824/] <h3> Универсальный селектор</h3> Групповой селектор можно использовать для группировки и придания нужного оформления для нескольких тегов, но что если вам нужно задать какой либо форматирующий стиль для всех тегов на странице? Перечислять их у вас займет уйму времени, для этого в css есть <strong>универсальный селектор</strong>. Универсальный селектор выглядит так (*), это просто знак звездочки: [crayon-56611e8a8f1ff098372753/] Иногда трудно предсказать воздействия выбранного вами свойства на все теги, поэтому для таких целей используют механизм наследования в css, о котором мы поговорим в следующем уроке.