Что такое CSS

CSS (Cascading Style Sheets — каскадные таблицы стилей) – одна из базовых технологий в современном Интернете. Нечасто можно встретить сайт, свёрстанный без примененения CSS.

CSS-код – это  список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.

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

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

Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением .css, либо в виде отдельного текстового фрагмента в начале XHTML/HTML-документа (см. Включение CSS в HTML документ).

Основная идея CSS в том, чтобы отделить дизайн документа  от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа.

Посмотрим на фрагмент XHTML-документа:

Из служебной XHTML разметки мы видим только элемент заголовка h1 и абзаца p, и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:

История

CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web».^[1] В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS.

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

Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

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

В середине 1990-х  Концорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

Уровень 1 (CSS1)

Рекомендация W3C, принята 17 декабря 1996 года, откорректирована 11 января 1999 года.^[2] Среди возможностей, предоставляемых этой рекомендацией:

• Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
• Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
• Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
• Выравнивание для текста, изображений, таблиц и других элементов.
• Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

Уровень 2 (CSS2)

Рекомендация W3C, принята 12 мая 1998 года.^[3] Построена на CSS1 с сохранением обратной совместимости. Добавление к функциональности:

• Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
• Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
• Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
• Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
• Расширенный механизм селекторов.
• Указатели.
• Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.

Уровень 2.1 (CSS2.1)

Рабочая версия W3C от 8 сентября 2009 года.^[4] Построена на CSS2, содержит исправления ошибок. 

Спецификация CSS2 определяет Каскадные таблицы Стилей, уровень 2 (CSS2). CSS2 - это язык таблиц стилей, позволяющий авторам и пользователям подключать стили (например, шрифты, пробелы и звуковые сигналы) в структурированные документы (например, документы HTML и приложения XML). CSS2 упрощает создание и обслуживание Web-сайта путём разделения структуры и стиля представления документов.

CSS2 построен  на основе CSS1 (см. [CSS1]), и, с очень небольшими исключениями, все таблицы стилей CSS1 остаются действующими в CSS2. CSS2 поддерживает таблицы для конкретных носителей, так что авторы могут создавать представление своих документов для визуальных браузеров, звуковых устройств, принтеров, брайль-устройств, ручных портативных устройств и т.д. Данная спецификация поддерживает также позиционирование содержимого, загружаемые шрифты, отображение таблиц, возможности интернационализации, автоматические счётчики и нумерацию и некоторые свойства, относящиеся к пользовательскому интерфейсу.

В чём разница между CSS и HTML?

HTML используется  для структурирования содержимого  страницы. CSS используется для форматирования  этого структурированного содержимого.

Согласен, это  звучит как-то заумно. Но, пожалуйста, читайте дальше. Вскоре всё начнёт проясняться.

Давным-давно, когда  Мадонна была девой, а парень по имени Tim Berners Lee изобрёл World Wide Web, язык HTML использовался  только для вывода структурированного текста. Автор мог только размечать  текст: "это - заголовок" или "это - параграф", используя HTML-тэги, такие как <h1> и <p>.

По мере развития Web дизайнеры начали искать возможности  форматирования онлайновых документов. Чтобы удовлетворить возросшим  требованиям потребителей, производители  браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как <font>, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру.

Это также привело  к тому, что оригинальные тэги структурирования, такие как <table>, стали всё больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как <blink>, поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал обычным явлением на web-сайтах.

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

Какие преимущества даст мне CSS?

Появление CSS стало  революцией в мире web-дизайна. Конкретные преимущества CSS:

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

Включение CSS в HTML документ

Для того, чтобы  применить таблицу стилей к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:

• применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента
• встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента
• применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута

Разберём эти  способы подробнее.

Внешние стили (external style sheets)

Применяются с  помощью элемента , который должен располагаться внутри элемента и нигде более.

.

Встретив в HTML-документе  этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций.

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

Таблицы стилей документа (document style sheets)

Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).

CSS-стили и  комментарии располагаются между  открывающим и закрывающим тегами  элемента  :

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

Стили, подставляемые в  строку (inline styles)

Иногда нужно  назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента . Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):

Атрибут есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body.

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