Что такое 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 объявлений, разделённых точкой с запятой, фигурные скобки не используются.

Замечание: Стоит избегать использования вышеописанного способа. Inline-стили смешивают содержимое документа и его дизайн, в то время как идеологически более правильно отделять содержимое документа и информацию о его оформлении.

Синтаксис CSS

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

Как обычно выглядит css-правило

Как это может  выглядеть на практике? Вот три  примера CSS-правил:

Каждое правило  начинается с селектора (по-русски –  указателя), указывающего на те html-элементы, к которым мы собираемся применить css-правило.

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

Селекторы

Чтобы применить css-оформление к HTML-элементу или множеству  элементов, обычно используются селекторы – специальные указатели на HTML-объекты, к которым мы планируем применить css-правило.

Вот три основных вида селекторов.

HTML селекторы

Это простейший случай – в качестве селектора  мы используем имя того html-элемента, который хотим изменить. Например, для тега   селектором будет .  Соответственно, для тега селектором будет , и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:

Селекторы класса

«Класс» - это  некое имя, строка, которое мы можем  применить к любым HTML-тегам, чтобы впоследствии ссылаться на них по имени класса. В качестве имени класса вы можете использовать практически любую строку. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса:

ID селекторы (или  идентификаторы)

Любой идентификатор (ID) – это некое имя, которое  вы, так же, как и в случае с  классами, можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа:

Как применить один стиль  к нескольким селекторам

Очень распространённая задача – применить один набор  правил к нескольким разным селекторам. Это делается элементарно – достаточно перечислить селекторы через  запятую:

Впоследствии оформление для селекторов можно переопределить индивидуально:

Селекторы, зависящие от контекста

Мы научились  устанавливать стили для элементов HTML независимо от того, где именно в  документе они расположены. Но CSS чуть гибче, чем кажется. Мы можем  «прицеливаться» точнее и определять стили для элементов в зависимости от контекста (англ. Contextual Selectors).

Вот, посмотрите:

Это самый распространённый метод создания контекстуальных  селекторов, который называется «селектором  потомков». Разберём его подробнее.

Селекторы потомков

«Потомками» элемента HTML называются любые вложенные в  него элементы: это его «дети» (то есть непосредственно вложенные), дети его детей, и так далее, вглубь иерархии тегов.

Правильно используя  селекторы, мы можем прицельно применить CSS стили к нужным элементам, сославшись на их родительский элемент. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их пробелом.

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

Селекторы детей

«Детьми» или  «дочерними элементами» элемента HTML называются непосредственно вложенные  в него элементы, он для них является «родительским» элементом. Элементы, находящиеся  на 2-м и более глубоких уровнях  вложенности, «детьми» не являются – это дети детей, то есть «потомки» (см. предыдущий раздел).

CSS позволяет  нам создать селектор для выбора  дочерних элементов любого элемента  и изменить их свойства, применив CSS стили. Для этого перед селектором  искомого элемента надо вставить селекторы его «предков», разделив их знаком >.

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

Селекторы смежных элементов (Adjacent Sibling Selectors)

Иногда нам  надо выбрать элемент, расположенный  в HTML-документе непосредственно  за другим элементом. Так, например, чтобы  выбрать все заголовки H1, следующие  за параграфами P, и изменить их верхний  отступ, мы напишем следующее правило CSS:

Важно: будет выбран только первый (!) заголовок H1, расположенный непосредственно после P. Если между элементами P и H1 встретится любой элемент, хоть один (даже если это  
) – то селектор не сработает и правило не применится.

Важно: селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.

Обзор свойств CSS

Справочник опирается  на актуальную сейчас спецификацию CSS 2.1, соответственно, приведенный ниже список css-свойств ограничен рамками спецификации.

Основные  свойства

Список базовых  свойств, которые должен знать даже начинающий веб-мастер:

margin, padding, border, background-color, color, font-family, font-size, float

Фон

background

Сокращенный вариант записи для свойств background-color, background-image, background-repeat, background-attachment и background-position.

background-attachment

Устанавливает, должна ли фоновая картинка скролиться или должна быть зафиксирована в  окне браузера.

background-color

Устанавливает цвет фона для элемента.

background-image

Устанавливает фоновую картинку для элемента.

background-position

Устанавливает первоначальное положение для фоновой  картинки.

background-repeat

Управляет циклическим  повторением фоновой картинки.

Рамка (граница, бордюр)

Влияют  на все четыре рамки

border

Краткий вариант  записи для свойств border-width, border-style и border-color. Влияет на все четыре границы элемента.

border-color

Устанавливает цвет рамки со всех сторон элемента.

border-width

Устанавливает толщину рамки со всех сторон элемента.

border-style

Определяет  стиль оформления рамки вокруг элемента.

border-collapse

Указывает ячейкам  таблицы, иметь ли собственный бордюр или общий с соседней ячейкой.

border-spacing

Устанавливает расстояние между ячейками таблицы.

Верхняя рамка

border-top

Краткий вариант доступа к свойствам border-top-width, border-top-style и border-top-color.

border-top-color

Устанавливает цвет верхнего бордюра.

border-top-style

Устанавливает стиль линии верхнего бордюра.

border-top-width

Устанавливает ширину верхнего бордюра.

Нижняя рамка

border-bottom

Краткий вариант доступа к свойствам border-bottom-width, border-bottom-style и border-bottom-color.

border-bottom-color

Устанавливает цвет нижнего бордюра.

border-bottom-style

Устанавливает стиль линии нижнего бордюра.

border-bottom-width

Устанавливает ширину нижнего бордюра.

Левая рамка

border-left

Краткий вариант доступа к свойствам border-left-width, border-left-style and border-left-color.

border-left-color

Устанавливает цвет левого бордюра.

border-left-style

Устанавливает стиль линии левого бордюра.

border-left-width

Устанавливает ширину левого бордюра.

Правая  рамка

border-right

Краткий вариант  доступа к свойствам volume, border-right-style и border-right-color.

border-right-color

Устанавливает цвет правого бордюра.

border-right-style

Устанавливает стиль линии правого бордюра.

volume

Устанавливает ширину правого бордюра.

Шрифт

font

Краткий вариант записи свойств font-style, font-variant, font-weight, font-size, line-height и font-family.

font-family