CSS

CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

CSS - одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название "стандарты Web". В 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 года. Среди возможностей, предоставляемых этой рекомендацией:
• Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля - обычного, курсивного или полужирного.
• Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
• Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
• Выравнивание для текста, изображений, таблиц и других элементов.
• Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

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

Уровень 2.1 (CSS2.1)
Рабочая версия W3C от 8 сентября 2009 года. Построена на CSS2, содержит исправления ошибок.

Уровень 3 (CSS3)
Находится в разработке. Сильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и введением переменных.


Структура CSS.
Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Схематически это можно показать так:

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

Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется "каскадом", в котором для свойств рассчитываются приоритеты или "веса", что делает результаты предсказуемыми.
Приоритеты рассчитываются таким образом (от большего к меньшему):
1. свойство задано при помощи !important?
2. стиль прописан напрямую в теге?
3. количество идентификаторов (#id) в селекторе (чем больше, тем больше приоритет);
4. количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе;
5. количество имён тегов в селекторе;

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

p {
  font-family: "Garamond", serif;
}
h2 {
  font-size: 110 %;
  color: red;
  background: white;
}
.note {
  color: red;
  background: yellow;
  font-weight: bold;
}
p#paragraph1 {
  margin: 0;
}
a:hover {
  text-decoration: none;
}
#news p {
  color: blue;
}

Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p. В первых двух правилах HTML-элементам p (абзацу) и h2 (заголовку второго уровня) назначаются стили. Абзацы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками ("serif"). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем. Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например:

<p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>

Четвёртое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin). Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами. Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным "news".

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

<link rel="stylesheet" type="text/css" href="style.css" />

• Еще один способ подключить CSS, находящиеся в отдельном файле:

<style type="text/css" media="all">@import "style.css";</style>

• Непосредственно в HTML-документе:

<style type="text/css">
    body {
        color: red;
    }
 </style>

• Непосредственно в элемент:

<p style="font-size: 21px; color: green;">Рассказ </p>

Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox) и WebKit (Google Chrome, Safari), а также браузер Opera. В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично - CSS 3. Для проверки поддержки браузером различных частей стандарта CSS был разработан тест Acid.
До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Преимущества:

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

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

• Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.

• Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Недостатки:

• Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.

• Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML и код PHP, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.