Основы CSS

Введение

В предыдущих руководствах этого курса мы говорили о контенте Web-сайтов и о том, как структурировать этот контент с помощью HTML. Это очень важно, так как означает, что мы задаем для документов значение и структуру, позволяющие легко объединяться с другими технологиями. Наиболее важной обсуждаемой далее технологией Web является CSS (Каскадные таблицы стилей), которая используется для оформления HTML и размещения его на Web-странице. В этой лекции мы познакомимся с CSS — что это такое, как применяется к HTML, и как выглядит базовый синтаксис CSS. Лекция имеет следующую структуру:

• Что такое CSS?
• Определение правил стилей
  • Комментарии CSS
  • Селекторы объединения в группу
• Дополнительные селекторы CSS
  • Универсальные селекторы
  • Селекторы атрибутов элементов
  • Селекторы элементов потомков
  • Селекторы нижележащих элементов
  • Селекторы смежных одноуровневых элементов
  • Псевдо-классы
  • Псевдо-элементы
• Сокращенная запись CSS
  • Сравнение индивидуальных и сокращенных значений
  • Задание менее четырех значений для сокращенного свойства
  • Выбор между одиночным свойством и сокращенным значением
  • Справочник сокращений
• Применение CSS к HTML
  • Строковые стили
  • Вложенные стили
  • Внешние таблицы стилей
  • Импорт таблиц стилей
• Заключение
• Контрольные вопросы

Что такое CSS?

В то время как HTML структурирует документ и говорит браузеру, какую функцию имеет определенный элемент (будет ли это ссылка на другую страницу или заголовок), CSS выдает браузеру инструкции о том, как вывести определенный элемент — оформление, размещение пробелов и позиционирование. Если HTML является балками и кирпичами, которые составляют структуру дома, CSS является штукатуркой и покраской для его отделки.

Это реализуется с помощью системы правил, о точном синтаксисе которых вы узнаете немного позже. Эти правила определяют, какие элементы HTML должны быть дополнительно оформлены, и в каждом правиле перечислятся свойства (например, цвет, размер, шрифт и т.д.) этих элементов HTML, которыми они будут манипулировать, и какие значения будут для них заданы. Например, правило CSS может говорить: "я хочу найти все элементы h2 и сделать их зелеными", или "я хочу найти все параграфы с именем класса author-name, сделать их фон красным, увеличить размер шрифта в них в два раза по сравнению с обычным текстом параграфа, и создать пробел в 10 пикселей вокруг каждого".

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

Определение правил стилей

Без дальнейших рассуждений давайте посмотрим на пример кода CSS, а затем проанализируем его:

селектор {
  свойство1:значение;
  свойство2:значение;
  свойство3:значение;
}

В данном случае можно видеть следующие детали:

• Селектор определяет элементы HTML, к которым будет применяться правило, определяемые реальным названием элемента, например, body, или другими средствами, такими как значения атрибута class - мы вернемся к этому позже.
• Фигурные скобки содержат пары свойство/значение, которые разделяются между собой точкой с запятой; свойства отделяются от своих соответствующих значений двоеточием.
• Свойства определяют, что вы хотите сделать с выделенными элементами. Они могут быть достаточно разнообразны, и задавать цвет элемента, цвет фона, позицию, поля, заполнение, тип шрифта, и многие другие вещи.
• Значения являются теми значениями, которые вы хотите задать каждому свойству выделенных элементов. Эти значения зависят от свойства, например, свойства, которые влияют на цвет, могут принимать шестнадцатеричные значения цвета, такие как #336699, значения RGB, такие как rgb(12,134,22), или названия цветов, такие как red, green или blue.

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

Теперь давайте посмотрим на конкретный пример:

p {
  margin:5px;
  font-family:arial;
  color:blue;
}

Это правило выбирает элемент HTML p — для каждого элемента p в документах HTML, которые используют этот код CSS, будет применяться это правило, если только не будут существовать применяемые к ним более конкретные правила, в этом случае более конкретные правила будут переопределять это правило. Это правило влияет на свойства, которые определяют поля вокруг параграфа ( margin ), шрифт текста в параграфе ( font-family ), и цвет этого текста ( color ). Поля задаются размером в 5 пикселей, шрифт задается как Arial, а цвет текста задается как blue.

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

Все множество этих правил совместно формируют таблицу стилей (оформления). Это самый общий имеющийся синтаксис CSS. Существуют другие, но немного — возможно, самым ценным свойством CSS является его простота.

Комментарии CSS

Прежде всего необходимо узнать, как создавать в CSS комментарии. Комментарии добавляют, помещая их между символами /* и */. Комментарии могут охватывать несколько строк, и браузер будет игнорировать эти строки:

/* Это базовые селекторы элементов */

селектор {
  свойство1:значение;
  свойство2:значение;
  свойство3:значение;
}

Комментарии можно добавлять либо между правилами, либо внутри блока свойств — например, в следующем коде CSS второе и третье свойства помещены между ограничителями комментария, так что они будут игнорироваться браузером. Это будет полезно, когда вы проверяете, как влияют определенные части вашего CSS на Web-страницу; просто закомментируйте их, сохраните код CSS, и перезагрузите страницу HTML.

селектор {
  свойство1:значение;
/*
  свойство2:значение;
  свойство3:значение;
*/
}

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

Можно, конечно, при желании ограничить комментарий одной строкой, но все равно потребуется использовать открывающий и закрывающий ограничители комментария ( /* и */ ).

Селекторы объединения в группу

Можно также объеднить в группу различные селекторы. Предположим, что вы хотите применить одинаковое оформление к h1 и p, тогда можно было бы написать следующий CSS:

h1 {color:red}
p {color:red}

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

h1, p {color:red}

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

• p {}: селектор элемента

  соответствует всем элементам на странице с указанным названием (элементам p, в приведенном выше случае)

• .example{}: селектор класса

  соответствует всем элементам, которые имеют атрибут class с указанным значением, так что пример выше будет соответствовать <p class="example">, <li class="example"> или <div class="example">, или любому другому элементу со значением class равным example. Отметим, что селекторы класса не проверяют никакое конкретное название элемента.

• #example{}: селектор id

  соответствует всем элементам, которые имеют атрибут id с указанным значением, так что пример выше будет соотвествовать <p id="example">, <li id="example"> или <div id="example">, или любому другому элементу со значением id равным example. Отметим, что селекторы ID не проверяют название никакого элемента, и можно иметь только один селектор для каждого ID в документе HTML - они являются уникальными для каждой страницы.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Selectors Example</title>
  <link rel="stylesheet" href="selectors.css" type="text/css" media="screen">
</head>
<body>
  <h1>CSS Basics Example</h1>

  <ul id="menu">
    <li>Item</li>
    <li class="warning">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p class="warning">Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>

  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li id="extra">Item</li>
    <li>Item</li>
  </ul>
</body>
</html>

#menu{
  border-style:solid;
  border-color:rgb(0,0,0);
  border-width:1px;
}
.warning{
  background:red;
  color:white;
}
li{
  font-family:arial,sans-serif;
}

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

• p.warning{}

  соответствует всем параграфам со значением class равным warning

• div#example{}

  соответствует элементу со значением атрибута id равным example, но только когда он является div

• p.info, li.highlight{}

  соответствует параграфам со значением class равным info и элементам списка со значением class равным highlight

В следующем примере это используется для различия между разными стилями предупреждений:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Specific Selectors Example</title>
  <link rel="stylesheet" href="specificselectors.css" type="text/css" media="screen">
</head>
<body>
  <h1>CSS Basics Example</h1>

  <ul id="menu">
    <li>Item</li>
    <li class="warning">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p class="warning">Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>

  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li id="extra">Item</li>
    <li>Item</li>
  </ul>
</body>
</html>

#menu{
  border-style:solid;
  border-color:rgb(0,0,0);
  border-width:1px;
}
.warning{
  background:red;
  color:white;
}
p.warning{
  background:#fcc;
  color:red;
}
li{
  font-family:arial,sans-serif;
}
li#extra{
  padding:10px;
}