Автор: Никита Иванов | 07 июля 2013 13:18

Урок 2. Селекторы и правила CSS

1. Пример работы CSS
Селекторы в CSS
2. Идентификаторы (id)
3. Классы (class)
4. Унифицированные селекторы
5. Контекстные селекторы
6. Группировка селекторов в CSS

В прошлом уроке мы разбирали способы подключения CSS. Теперь перейдём к самому языку.

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

1. Селектор (выбор объекта, с которым будем работать. Например, заголовок, div, таблица и тд.)
2. Блок стилей - описание одного или нескольких свойств объекта - цвет, размер и тд. Заключается в фигурные скобки {}

Мы видим, как заголовку - селектор, в блоке стилей присваивается свойство цвет текста (color) - синий.
Блок стилей состоит из свойств и их значений, которые при перечислении разделяются точкой с запятой ( ; ), как в примере ниже.

Теперь мы добавляем ещё одно свойство - форматирование текста (font). В нём мы придаём значение размер текста - 20 пикселей.

Пример работы CSS

Создайте в любом месте папку, например, урок 2. В ней создайте файл style.css. В него скопируйте весь код ниже. В коде CSS мы задаём свойства для тега <body> и заголовков <h1> и <h2>.

Код CSS (файл style.css)

body{
  background: gray;
  color: white;
}
h1{color:#0085cc;}
h2{color:white;}

Обратите внимание, не будет разницы, записывать блок стилей в строчку (h1,h2) или в столбик (body). И тот, и другой вариант будут работать. Выбирайте так, как Вам удобно.

Теперь создаём HTML-файл. Неважно, какое будет название, главное, чтобы путь к файлу с CSS кодом был указан верно. Указывается также как и в ссылках, путях к изображениям. В примере ниже указан путь (style.css) в ту же директорию, что и html-файл. То есть оба файла должны быть в одной папке.

Код HTML

<html>
  <head>
    <title>Пример работы CSS</title>

      <!-- Подключаем CSS. После href= в кавычках путь к файлу -->
      <link rel="stylesheet" type="text/css" href="style.css">

  </head>
  <body>

<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>

  </body>
</html>

Результат работы кода можно увидеть по ссылке ниже.

Демонстрация Скачать исходники

Если Вы измените какие-либо свойства в блоке стилей, то для обновления дизайна достаточно обновить страницу (Ctrl+F5).

Селекторы CSS

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

Идентификаторы

Идентификатор элемента - это селектор, который присваивается одному элементу и делает его уникальным. Задаётся при помощи параметра id.

<p id="blue">Данному параграфу присвоен id. У него будут уникальные свойства.</p>
<p>Параметры текста останутся по умолчанию.</p>

Разберём пример

Код HTML и CSS

<html>
  <head>
    <title>Пример работы CSS</title>

      <!-- В этот раз используем встроенные стили, не из отдельного файла. -->
      <style>
      p{ color:black; } 
      p#blue{ color:blue; }
      </style>

  </head>
  <body>

<p id="blue">Текст который будет синего цвета, потому что есть id</p>
<p>Цвет текста останется по умолчанию.</p>

  </body>
</html>

Сначала в стилях у всех параграфов в свойстве цвета указан черный цвет, а текст параграфа с id "blue" будет синим. Селектор в данном случае состоит из элемента (p - параграф), разделителя (# - обозначение идентификатора) и имени идентификатора (blue).

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

Если хотите задать стили для нескольких элементов, то следует использовать классы.

Классы

Класс (class) - это селектор, который позволяет применить стили к одному и более элементам. Например, id применим только к одному уникальному элементу. В качестве значения принимается имя элемента.

Названия (имя) для id и class могут быть одинаковыми, однако для CSS это всё равно будут разные элементы. В CSS к идентификатору обращается упоминанием символа #, а к классу . (точкой).

Рассмотрим пример:

Код HTML и CSS

<html>
  <head>
    <title>Пример работы CSS</title>

      <!-- В этот раз используем встроенные стили, не из отдельного файла. -->
      <style>
      p{ color:black; } 
      p#blue{ color:blue; }
      p.blue{ color:blue; font-weight: bold;}
      </style>

  </head>
  <body>

<p>Цвет текста чёрный.</p>
<p class="blue">Текст полужирный и синего цвета.</p>
<p id="blue">Текст синего цвета.</p>
<p class="blue">Текст полужирный и синего цвета.</p>
<p>Цвет текста чёрный.</p>

  </body>
</html>

В результате параграф с идентификатором (id) blue будет иметь текст синего цвета, элементы с class blue будут выделены полужирным шрифтом и синим цветом. А все остальные элементы p будут иметь шрифт чёрного цвета.

Как видите, класс можно применить несколько раз. Соответственно всё элементы будут иметь свойства описанные для данного класса.

Унифицированные селекторы

Унифицированные селекторы (.) - это селектор, который можно присвоить разному типу элементов, например, и заголовкам, и параграфам, и блокам (div). Самый распространённый вариант. До этого мы использовали конструкцию в коде CSS p#blue и p.blue, то есть сначала указывали тип элемента (p - параграф), а потом уже сам идентификатор или класс. Так вот можно указывать конструкцию проще, сразу начинать с .blue. Подобный селектор будет применим уже не только к параграфам, а к другим элементам.

Код HTML и CSS

<html>
  <head>
    <title>Пример работы CSS</title>

      <!-- В этот раз используем встроенные стили, не из отдельного файла. -->
      <style>
      p{ color:black; } 
      #blue{ color:blue; }
      .blue{ color:blue; font-weight: bold;}
      </style>

  </head>
  <body>

<h1 id="blue">Заголовок с идентификатором.</h1>

<p>Цвет текста чёрный.</p>
<p class="blue">Текст полужирный и синего цвета.</p>
<div class="blue">Текст в блоке тоже полужирный и синего цвета</div>
<span class="blue">Текст в строчном элементе тоже полужирный и синего цвета</span>

  </body>
</html>

В результате унифицированный селектор, в данном случае класс .blue, мы применили и к парафграфу (p), и к блоку (div), и к строковому элементу (span). Результат везде одинаковый - текст полужирный и синего цвета.

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

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

Код HTML и CSS

<html>
  <head>
    <title>Пример работы CSS</title>

      <style>
      p strong{ color:blue;}
      </style>

  </head>
  <body>

<p>Цвет текста чёрный. Но теги полужирный шрифта тут не упоминаются.</p>
<strong>Обычный полужирный текст</strong>, который не содержится в параграфе. Поэтому и цвет у него не меняется.
<p>И внимание!!! Параграф с фразой <strong>полужирным шрифтом синего цвета</strong></p>

  </body>
</html>

Соответственно синим будет выделен только тот полужирный текст (strong), который будет в параграфе (p).

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

Группировка селекторов - это такая конструкция таблицы стилей, где блок объявления стилей обращён к одному и более ранее упоминаемым элементам и добавляет новое свойство.

По тексту сложно понять. Лучше сразу к примеру.

h1, h2, h3{ color:blue; } 
h1{ font-size:18px; } 
h2{ font-size:16px; } 
h3{ font-size:14px; }

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

Последующими упоминаниями данных элементов мы добавляем им значения новых свойств. В данном случае размера шрифта.

Код HTML и CSS

<html>
  <head>
    <title>Пример работы CSS</title>

      <style>
      h1, h2, h3{ color:blue; } 
      h1{ font-size:18px; } 
      h2{ font-size:16px; } 
      h3{ font-size:14px; }
      </style>

  </head>
  <body>

<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>

  </body>
</html>

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

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

Спасибо за внимание! Урок окончен!

30 июля 2013 13:06	Урок 3. Псевдоклассы и псевдоэлементы
02 марта 2015 18:30	Урок 10. Плавающие элементы
02 августа 2013 14:33	Урок 4. Оформление и декор текста в CSS
30 января 2013 16:49	Урок 1. Как подключить таблицу стилей CSS?
13 мая 2014 16:19	Урок 6. Отступы и поля в CSS. Что такое margin и padding?

Урок 2. Селекторы и правила CSS

Пример работы CSS

Селекторы CSS

Похожие статьи

Комментарии к статье (vk.com)