Логотип Хекслета

Основы HTML, CSS и веб-дизайна

Теория: Каскад

Добавление стилей в HTML-документ

Помните невидимую «голову» документа? Именно в ней можно указать адрес CSS-файла со стилями:

<head>
  <link rel="stylesheet" href="main.css">
</head>

Если HTML-файл лежит в одной директории с файлом main.css, то стили из этого CSS-файла будут применены к странице. Если же файл лежит в другом месте, то нужно указать путь к нему. Например, если структура директорий такая:

my_site/ ├── css/ │ ├── main.css ├── html/ │ ├── index.html

То в файле index.html путь нужно указать так:

<head>
  <link rel="stylesheet" href="../css/main.css">
</head>

Такой путь называется относительным. Он указывается относительно текущего расположения файла index.html. Чтобы добраться до файла main.css нам было нужно выйти из директории html. Это делается с помощью конструкции ../. Далее мы указали директорию css и название нашего CSS файла.

Существуют также абсолютные пути. Они всегда строятся от корня файловой системы. В таком случае путь всегда начинается со слэша. Если представить, что сайт лежит в корне нашей файловой системы, то путь выглядел бы следующим образом: /css/main.css.

Стили также можно поместить прямо в HTML-файл, не создавая отдельный CSS-файл:

<!DOCTYPE html>
<html>
  <head>
    <title>Моё резюме</title>
    <style>
      .important {
        color: green;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>Алексей Примадонин</h1>
    <h3 class="important">Веб-разработчик</h3>
    <p>
      <a href="mailto:alprim@grail.com">alprim@grail.com</a>,
      <a href="https://github.com/alprim">github.com/alprim</a>
    </p>
  </body>
</html>

Такой вариант может быть уместен для минимальных страниц, которые гарантированно не будут разрастаться. В целом, лучше всегда разделять HTML и CSS на отдельные файлы. Один CSS-файл можно использовать в нескольких HTML-документах, к тому же разделение представления (presentation — это стили) и содержания (content — это сам HTML) — правильная стратегия при построении информационных систем.

Каскад

Почему же C в CSS — это cascade? Дело в том, что стили складываются каскадом в единый набор.

p {
  color: green;
  font-size: 20px;
}

p {
  color: red;
}

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

Можно представить, что стили собрались каскадом в такой набор:

{
  color: red;
  font-size: 20px;
}

Каскад происходит сверху вниз, и работает даже внутри одного селектора. Ниже — странный пример, но результат будет тем же: цвет текста будет красным:

p {
  color: green;
  color: red;
  font-size: 20px;
}

Каскадность также заключается в том, что один элемент может попадать под действие нескольких селекторов разного типа. Например:

p {
  color: red;
}

p.important {
  font-size: 20px;
}

#intro {
  font-style: italic;
}
<p class="important" id="intro">
  Индейские племена Манахаттоу и Канарси.
</p>

Такой элемент будет одновременно красным, размером 20 пикселей и курсивом. Но у разных видов селекторов разный приоритет.

Порядок таков:

  1. Селектор типа элемента (p)
  2. Селектор класса (.important)
  3. Селектор id (#intro)

1 — низкий приоритет, 3 — высокий приоритет.

Пример:

#intro {
  color: green;
}

p {
  color: blue;
  font-weight: bold;
}

p.important {
  color: purple;
  font-style: italic;
}
<p class="important" id="intro">
  Индейские племена Манахаттоу и Канарси.
</p>

Текст в этом элементе будет наклонным, полужирным и зелёным, потому что:

  1. Селектор типа элемента p:
    • синий цвет
    • полужирность
  2. Селектор класса p.important:
    • синий цвет заменил на пурпурный цвет
    • курсив
  3. Селектор идентификатора #intro:
    • пурпурный цвет заменил на зелёный цвет

Стили сложились каскадом, что-то заменилось, что-то нет, и в итоге получился такой набор:

{
  color:green;
  font-weight: bold;
  font-style: italic;
}
Навигация
Теория
Тесты