Изучаем CSS. Селекторы, названия и значения свойств. Урок 6.

Ранее мы уже с вами слегка касались изучения CSS. С этой главы я планирую заняться освещением этой темы более основательно.

Если вы пошагово следовали по моим урокам, то у вас в файле index.html должна быть секция со стилями, заключёнными в тэг <style></style>. Там должны быть описаны правила с двумя селекторами – для тэгов body и h2.

На всякий случай, если вы забыли, я повторю основные понятия, используемые в CSS.

body и h2 – это селекторы, в качестве которых указаны названия элементов, к которым будет применяться то, что заключено в фигурных скобках, то есть, правила.

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

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

p {
  color: red;
}

  Сохраняемся, проверяем. Вот что у нас в итоге получилось. 

А что если мы хотим поменять сам шрифт, у того же элемента p? Хотим чтобы шрифт у нас был не рублёный, а с засечками?

За это отвечает следующее правило:

font-family: sans-serif;

Оно означает, что теперь у нас будет использоваться любой шрифт из семейства с засечками. Если указать значение свойства serif, то соответственно будут использованы шрифты без засечек, то есть рублёные. Правила можно также объединять в одно. К примеру, мы хотим использовать шрифт с засечками не только для абзацев, но и для самих заголовков. Тогда можно записать так:

p, h2, h1 {
  font-family: sans-serif;
}

 Попробуйте сделать так же, и убедитесь в том, что это работает.

А что, если мы хотим подчеркнуть заголовок первого уровня? Вот правило:

h1 {
  border-bottom: 1px solid black;
}

Здесь мы видим следующее:

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

- в составе групповых селекторов (p, h2, h1);

- в качестве одиночного селектора (h1).

То есть ровным счётом вас ничего не ограничивает писать правила для h1 сколь угодно раз.

А что, если мы напишем вот так:

h1 {
  color: red;
}

 А через несколько строчек:

h1 {
  color: black;
}

 По идее два правила противоречат друг другу. Как браузер сможет определить, каким именно цветом он должен разукрашивать абзац – красным или чёрным? Так вот, если есть два правила для одного и того же элемента, и если одно из свойств одного правила противоречит другому правилу, то будет использоваться то правило, которое упомянуто последним, при прочих равных условиях.

Про «прочие равные условия» я расскажу чуть позже.

Подключение внешнего файла таблицы стилей (CSS).

Это конечно здорово, что у нас есть секция style, в которой мы можем прописывать правила для наших элементов. Но здесь следует сказать о том, что эти стили будут применены исключительно к той странице, на которой находятся. А что, если таких страниц у нас десять? Как быть? Неужели одни и те же правила в этом случае необходимо дублировать для каждой страницы? Это было бы крайне нерационально. Для таких случаев мы можем вынести все правила в отдельный CSS файл.

Давайте сейчас же это и сделаем. Создадим в папке с index.html папку, которую назовём css. А уже в этой папке файл style.css. К слову, все манипуляции с файлами и папками, рекомендую проделывать с помощью Total Commander. После того, как создали данный файл, возвращаемся к нашему index.html и вырезаем (Ctrl + X) всё, что находится между тэгами style и вставляем (Ctrl + V) в наш, вновь созданный style.css. А сами тэги <style type="text/css"></style> удаляем. А на том месте, где они были, делаем ссылку на наш файл со стилями. Вот таким вот образом: 

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

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

У него есть следующие атрибуты:

href – ссылка на внешний файл, который мы указываем в качестве значения атрибута.

type – тип информации, на которую мы хотим сослаться. В данном случае, это CSS.

rel – определяет взаимосвязь между текущим файлом и тем, на который мы ссылаемся. Мы указали в качестве значения - таблицу стилей (stylesheet).

А теперь подключите файл внешней таблицы стилей для других HTML-файлов, проделав аналогичную операцию. То есть вам нужно будет скопировать строку с тэгом link и вставить её между тэгами head. Будьте внимательны с путями к CSS файлу, прописывая относительные пути.

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

Наследование стилей.

В этом уроке, немногим ранее, мы с вами задавали семейство шрифтов для абзацев и заголовков первого и второго уровней. Хорошо. А что, если у нас внутри тэга p будут также встречаться строчные элементы? Такие как span, em, i? Неужели теперь нам нужно прописывать правила и для этих элементов тоже? Ответ - нет. Поскольку данные элементы расположены внутри тэга p, они наследуют правила, которые применяются к данному элементу. Но, хочу обратить внимание, далеко не все правила наследуются, но правило задания семейства шрифтов относится именно к наследуемым. А раз так, то почему бы нам не задать это правило сразу для элемента body? С тем, чтобы все входящие в него элементы, наследовали этот шрифт, по нисходящей цепочки. Это вполне логично и является допустимым. Убедимся в этом, применив это же правило для тэга body. Как видим, сработало.

Переопределение наследуемых свойств.

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

h1 {
  font-family: serif;
}

И оно сработает. Почему? Да потому что, тэг h1 вносит определённую конкретику. Грубо говоря, если представить наш документ в виде иерархической структуры, то h1 это ветка, а body это что-то вроде корня дерева. Так вот, если мы говорим о дереве, то говорим о нём как бы в общих чертах. А если речь идёт о какой-то ветке или листе, вот тут и рождается конкретика. Надеюсь, понятно объяснил.

А указывая правило для конкретной ветки, мы тем самым переопределяем наследуемое правило.

На этом всё. В дальнейших уроках, мы будем и дальше углублять свои познания в CSS. И дальше будет только интереснее.