Урок №3. Селекторы CSS.

В мире CSS существует некая разновидность селекторов.

В данном уроке разберем следующее:

Селекторы по идентификатору.
Селекторы по классу.
Контекстный селектор.
Группирование селекторов.


 

Селекторы по идентификатору

Если на странице присутствуют несколько одинаковых тегов, а Вам нужно видоизменить только один из них. Допустим, у вас есть 4 заголовка 3 уровня (h3), все они стандартно чёрного цвета, а нужно что бы 1 из 4 стал синего цвета, в таком случае используется идентификатор.

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

Пример HTML:

   <h3>Заголовок чёрного цвета !!!</h3>

   <h3 id="blue">Этот заголовок будет синего цвета !!!</h3>

   <h3> Заголовок чёрного цвета !!!</h3>

   <h3> Заголовок чёрного цвета !!!</h3>

 

Пример CSS:

   #blue{

   color:blue;}

 

Из примера видно, что селектор по идентификатору в CSS задается при помощи символа #. Именно он дает понять что стиль задан с помощью селектора по идентификатору.

Имена для элементов можно давать любые, кроме слов используемых в самом языке(к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body. Добавим на страницу несколько параграфов и одному из них добавим идентификатор:

   <html>

     <head>

       <title>CSS id</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <p>Это первый обычный абзац!</p>

       <p>Это второй обычный абзац</p>

       <p id="blue">Это абзац с идентификатором (id)</p>

     </body>

   </html>

 

При открытии данной страницы в браузере все абзацы будут одинакового цвета.
Добавим в таблицу стилей, правила для абзаца:

p{

  color:red;

}

p#blue{

  color:blue;

}

 

Как видно, первое правило делает все абзацы в документе красного цвета.
Второе правило показывает, что в абзаце, где присутствует идентификатор, цвет текста будет синим.

 


 

Селектор по классу

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

Возьмем тот же html-документ, но с добавлением заголовков:

   <html>

     <head>

       <title>CSS class</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <h3>Заголовок третьего уровня №1</h3>

       <p>Это первый обычный абзац!</p>

       <h3 class="gold">Заголовок с селектором по классу №1</h3>

       <p>Это второй обычный абзац</p>

       <h3>Заголовок третьего уровня №2</h3>

       <p>Это третий обычный абзац</p>

       <h3 class="gold"> Заголовок с селектором по классу №2</h3>

       <p>Это четвёртый обычный абзац</p>

       <p id="blue">Это абзац с идентификатором (id)</p>

     </body>

   </html>

 

Что бы указать стиль для заголовков, в таблице стилей пишем следующее правило, где в качестве селектора будет использован элемент h3 и имя gold. В качестве разделителя используется точка (.):

p{

  color:red;

}

p#blue{

  color:blue;

}

h3{

  color:black;

}

h3.gold{

  color:gold;

}

 

        И так, вывод:

  1. Если одинаковые элементы должны быть в одном стиле, тогда селектор будет выглядеть как p{color:red;}
  2. Если из одинаковых элементов нужно выделить один, тогда хорошо использовать селектор с идентификатором (id) и разделителем в качестве решетки (#) , пример: p#red{color:red;}
  3. Если из одинаковых элементов нужно выделить несколько, тогда используем селектор по классам, с разделителем в качестве точки (.), например: p.red{color:red;}
  4. При указании класса и идентификатора для одного элемента, будет применено значения идентификатора, по причине более высокого приоритета.

 


 

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

Возьмем документ, примерно следующего содержания:

   <html>

     <head>

       <title>Селекторы</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <p>Простой текст заключен в параграф</p>

       Это простой текст без параграфа.

       <strong>Этот текст выделен жирным шрифтом.</strong>

       <p>Надпись находится в параграфе, но<strong>эта часть выделена жирным</strong></p>

     </body>

   </html>

 

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

strong{

  color:red;

}

 

Вот что получится:

Простой текст заключен в параграф

Это простой текст без параграфа. Этот текст выделен жирным шрифтом и красным цветом.

Надпись находится в параграфе, но эта часть выделена жирным и красным.

А если нужно выделить не весь жирный текст на странице, а только тот, что находится в параграфе?

Тогда в таблице стилей, нужно записать следующее:

p strong{

  color:red;

}

 

Таким образом, мы даем указания для браузера, что данный стиль стоит применять к элементу strong, который находится внутри элемента p. Это и называют – контекстными селекторами.

 


 

Группирование селекторов

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

Пример:

strong, i{

  color:red;

}

strong{

  font-size:18px;

}

i{

  font-size:15px;

}

 

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

Группирование селекторов – личное дело каждого. Помните о разных подходах, и будет вам счастье.

До встречи на следующем уроке.

 


 

Закрыть меню