27. Основы css

Лекция посвящена основам технологии каскадных таблиц стилей (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 является его простота.