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

Как проходит стилизация и что такое селекторы?

Каждый СSS-стиль имеет две основные части: селектор и блок объявления, который в свою очередь  содержит форматирующие свойства— цвет, размер шрифта текста и т. д. Они относятся лишь к оформлению. Волшебство CSS заключается как раз в самых первых символах, начинающих
определение любого стиля, — селекторах.

Например:

h1{

font-family: Arial;

color: #ccc
}

 

Здесь первая часть стиля- это селектор. Он определяет элементы, подлежащие форматированию.
В данном случае h1 означает все заголовки первого уровня (тега <h1>) веб-страницы.

Как видно из примера, в имена не входят символы < и >, в которые заключены соответствующие
НТМL-теги. Поэтому, например, когда Вы пишете стиль для тега <р>, набирайте только название - р.

Именно селектор контролирует дизайн веб-страницы, определяя элемент, который вы хотите изменить. Другими словами, именно он используется для форматирования множества элементов одновременно. Если дать более подробное описание, то селекторы позволяют выбрать один или несколько схожих элементов для их последующего изменения с помощью свойств в блоке объявления. Селекторы CSS — большой потенциал для создания дизайна веб-страниц.

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

Такие селекторы представляют весьма эффективное средство проектирования дизайна веб-страниц, поскольку определяют стиль всех экземпляров конкретного НТМL-элемента.

С их помощью можно быстро изменять дизайн веб-страницы с небольшими
усилиями. Например, если надо отформатировать все абзацы текста, используя
шрифт одного начертания размера, а также цвета, то Вам просто нужно создать
стиль с селектором Р (применительно к тегу <р>). Он переопределяет, каким образом
браузер отобразит отдельно взятый тег (в данном случае <р> ).

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

Селекторы тегов исключительно просто задать в СSS-стилях, так как они наследуют название форматируемых элементов — p, h1, table, img и т. д. В примере ниже все теги h5 на странице будут окрашены в красный, иметь стиль шрифта Tahoma и  его размер 20pt.

Пример:

p{

font-size: 20pt;

font-family: Tahoma;

color: red;
}

Так это выглядит у меня:

2016-10-11_151116

Селекторы классов.

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

Например, Вы можете создать класс copyright и с его помощью выделить абзац,
содержащий информацию об авторских правах, не затрагивая остальные абзацы.
Селекторы классов позволяют указать конкретный элемент веб-страницы, независимо
от тегов. Предположим, Вы хотите отформатировать одно или несколько
слов абзаца. В данном случае применяется форматирование не ко всему тегу <р>,
а лишь к фрагменту абзаца. Таким образом, Вам нужно использовать селектор класса
для выделения определенного текста. Можно применть изменения к множеству
элементов, входящих в различные НТМL-теrи.

Пример:

HTML

<p>Потрясающая салатная заправка «Убик»! Где былая слава французской и итальянской кухни? Она давно миновала. Лишь «Убик» откроет вам, что такое подлинное наслаждение! Очнитесь! Мир новых, неведомых ощущений ждет вас! Это — «Убик»!!!</p>
<p class="copyright">Филип Киндред Дик</p>

CSS

.copyright{

font-size: 12pt;

font-style: italic;
}

При стилизации классами важно помнить о нескольких важных вещах:

  • Все названия селекторов классов должны начинаться с точки. С ее помощью
    браузеры находят селекторы классов в таблице стилей CSS.
  • При именовании стилевых классов разрешается использование только букв
    алфавита, чисел, дефисов, знаков подчеркивания.
  • Имена стилевых классов чувствительны к регистру. Например, .SIDEBAR и .sidebar
    рассматривается языком CSS по-разному, как различные классы .

 

ID селекторы.

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

Использование ID-селекторов не представляет никаких сложностей. Если в селекторах
классов перед названием ставится точка ( . ),то тут вначале должен быть
указан символ решетки(#). Во всем остальном руководствуйтесь теми же правилами,
что и для классов.

Пример:

HTML

<div id="banner">В продаже появилась новинка - Убик!</div>

 

CSS

#banner{

background: blue;

color: white;

height: 200px;

width: 700px
}

 

Примите во внимание то, что решить конфликты стилей позволяет использование ID селекторов, которым браузеры придают больший приоритет, чем классовым. Например, когда попадаются два различных стиля, относящихся к одному и тому же тегу, но определяющих, допустим, различный цвет фона. В этом
случае применяется свойство стиля с ID селектором, как имеющее более высокий приоритет.

Итоги.

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

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

Пользуйтесь ID селекторами, когда необходимо определить логические разделы Веб-страницы,
которые встречаются один раз.

Для стилизации таких тегов как body, h1-h6, a, img, code, ul, ol и т.д применяйте селекторы тегов.

Думаю этого вполне достаточно, чтобы познакомить Вас с основными селекторами в CSS. В последующих статьях я ещё вернусь к теме стилизации. Для полной картины предлагаю Вам взглянуть на результат приведённых выше примеров:

Кто оценил отсылку к книге Убик пишите в комментарии =) До скорого!

dmkweb.ru Права на контент защищены.