CSS

Поделись знанием:
Перейти к: навигация, поиск
CSS
Тип формата

Язык стилей

Стандарт(ы)

[www.w3.org/TR/CSS1 Level 1 (Recommendation)]
[www.w3.org/TR/CSS2/ Level 2 (Recommendation)]
[www.w3.org/TR/CSS21/ Level 2 Revision 1 (Recommendation)]

Каскадные таблицы стилей
Таблица стилей

CSS Zen Garden

The Zen of CSS Design

CSSTidy

Internet Explorer box model bug
Сравнение
Браузерных движков Языков таблиц стилей
Веб-дизайн
Бестабличный • Holy Grail • Адаптивный
Каскадные таблицы стилей
п • о • р
   HTML
У этого термина существуют и другие значения, см. CSS (значения).

CSS (/siːɛsɛs/ англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.





Содержание

Обзор

Цель создания CSS

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

Способы подключения CSS к документу

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

  • когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
<!DOCTYPE html>
<html>
   <head>
      .....
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      .....
   </body>
</html>
  • когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;
<!DOCTYPE html>
<html>
   <head>
      .....
      <style media="all">
         @import url(style.css);
      </style>
   </head>
</html>
  • когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа;
<!DOCTYPE html>
<html>
   <head>
      .....
      <style>
         body { 
            color: red;
         }
      </style>
   </head>
   <body>
      .....
   </body>
</html>
  • когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.
<!DOCTYPE>
<html>
   <head>
      .....
   </head>
   <body>
      <p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
         .....
      </p>
   </body>
</html>

В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях — внутренние таблицы стилей.

Для добавления CSS к XML-документу, последний должен содержать специальную ссылку на таблицу стилей. Например: 

  <?xml-stylesheet type="text/css" href="style.css"?>

Иерархия элементов внутри документа

Как известно, HTML-документы строятся на основании иерархии элементов, которая может быть наглядно представлена в древовидной форме. Элементы HTML друг для друга могут быть родительскими, дочерними, элементами-предками, элементами-потомками, сестринскими.

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

В CSS могут задаваться при помощи селекторов не только одиночные элементы, но и элементы, являющиеся потомками, дочерними или сестринскими элементами других элементов (см. подраздел «виды селекторов»).

Правила построения CSS

В первых трёх случаях подключения таблицы CSS к документу (см. выше) каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком ": ". Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них. 

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

В четвёртом случае подключения таблицы CSS к документу (см. список) правило CSS (являющееся значением атрибута style тега, на который оно действует) представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».

Виды селекторов

Универсальный селектор
* {
   margin: 0; 
   padding: 0; 
}
Селектор элементов
p {
   font-family: arial, helvetica, sans-serif; 
}
Селектор классов
.note {
   color: red; 
   background-color: yellow; 
   font-weight: bold; 
}
Селектор идентификаторов
#paragraph1 {
    margin: 0; 
}
Селектор атрибутов
 
a[href="www.somesite.com"] {
   font-weight: bold; 
}
Селектор потомков (контекстный селектор)
div#paragraph1 p.note {
   color: red; 
}
Селектор дочерних элементов
p.note > b {
   color: green; 
}
Селектор сестринских элементов
h1 + p {
   font-size: 24pt; 
}
Селектор псевдоклассов
a:active {
   color: blue;
}
Селектор псевдоэлементов
p:first-letter {
   font-size: 32px;
}

Классы и идентификаторы элементов

Класс или идентификатор может быть присвоен какому-нибудь элементу (тегу) HTML посредством атрибутов class или id этого элемента (тега): 

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>
         Селекторы классов и идентификаторов
      </title>
      <style>
         p.Big {
            font-family: arial, helvetica, sans-serif;
            color: maroon; 
         }
         div#First {
            background-color: silver; 
         }
      </style>
   </head>
   <body>
       .....
       <div id="First">
          .....
       </div>
       <p class="Big">
          .....
       </p>
   </body>
</html>

Основное отличие между классами элементов и идентификаторами элементов в том, что в документе какой-нибудь класс может быть присвоен сразу нескольким элементам, а идентификатор — только одному. Также отличие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.

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

Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.

Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с «.»), или свойство идентификатора самого по себе (в таком случае селектор начинается с «#»), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.

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

Наследование. Каскадирование. Приоритеты стилей CSS.

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p. Так сделано в предположении, что обрамление всех-всех вложений в тег - менее тривиальная задача, чем задание одиночной рамки. А вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе, до тех пор, пока этому тегу не будет назначен свой цвет шрифта. Который, в свою очередь, будет теперь наследоваться всеми вложенными в него подэлементами, не распространяясь на элементы-соседи тега.

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

  • Наиболее низким приоритетом обладает стиль браузера;
  • Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
  • И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
    • Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
    • Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;
    • Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. При расчёте специфичности селектора принимается во внимание:
      • количество идентификаторов (#id) в селекторе — ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);
      • количество классов (.class), атрибутов ([attr], [attr="value"]) и псевдоклассов (:pseudo-class) в селекторе — ((0,1,0) за каждый объявленный класс, атрибут и псевдокласс в селекторе правила CSS);
      • количество элементов (h1, input) и псевдоэлементов (::pseudo-element) в селекторе — ((0,0,1) за каждый объявленный элемент и псевдоэлемент в селекторе правила CSS).
Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0), (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.
    • Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;
    • И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.

Пример таблицы стилей

Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css либо же обрамлена тегами <style> и размещена в «шапке» той самой веб-страницы, на которую она действует): 

p {
   font-family: arial, helvetica, sans-serif; 
}
h2 {
   font-size: 20pt; 
   color: red; 
   background: white; 
}
.note {
   color: red; 
   background-color: yellow; 
   font-weight: bold; 
}
p#paragraph1 {
   padding-left: 10px;
}
a:hover {
   text-decoration: none;
}
#news p {
   color: blue;
}
[type="button"] {
   background-color: green;
}

Здесь приведено семь правил CSS с селекторами p, h2, .note, p#paragraph1, a:hover, #news p и [type="button"].

  1. Первое правило присвоено HTML-элементу p (абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Arial или, если такой шрифт недоступен, тогда Helvetica или Sans-serif, иначе, другим шрифтом этого семейства.
  2. Второе правило присвоено HTML-элементу h2 (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным размером.
  3. Третье правило будет применено к любому элементу, атрибут class которого равен «note». Например, к параграфу: <p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне. </p>
  4. Четвёртое правило будет применяться только к элементу p, атрибут id которого равен paragraph1. Такой элемент будет иметь внутренний отступ в 10 пикселей (padding).
  5. Пятое правило определяет стиль hover для элементов a — гиперссылок. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.
  6. Шестое правило, применяется для элементов p, которые находятся внутри какого-либо элемента с атрибутом id, равным «news» (#news p — это типичный случай селектора потомков, см. 5-й пункт списка выше).
  7. Седьмое правило применяется для всех элементов, у которых атрибут type равен button. Например, это правило будет применено к элементу <input type="button"> (обычная кнопка), изменив его цвет фона на зеленый.

CSS-вёрстка

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

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

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

Недостатки:

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

История создания и развития 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 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:

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

В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1

Уровень 2, ревизия 1 (CSS2.1)

Рекомендация W3C, принята 7 июня 2011 года.

CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторые и вовсе удалены. Удаленные части могут быть в будущем добавлены в CSS3.

Уровень 3 (CSS3)

CSS3 (англ. Cascading Style Sheets 3 — каскадные таблицы стилей третьего поколения) — активно разрабатываемая спецификация CSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS, поддержка линейных и радиальных градиентов, теней, сглаживания и многое другое.

Преимущественно используется как средство описания и оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Разрабатываемая версия (список всех модулей)[4].

В отличие от предыдущих версий спецификация разбита на модули, разработка и развитие которых идёт независимо.

CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые.

Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и, возможно, введением переменных[5][6].

Уровень 4 (CSS4)

Разрабатывается W3C с 29 сентября 2011 года.[7][8]

Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft).

Например:

  • [dev.w3.org/csswg/css-cascade/ CSS Cascading and Inheritance Level 4]
  • [dev.w3.org/csswg/selectors-4/ Selectors Level 4]
  • [dev.w3.org/csswg/css-images-4/ CSS Image Values and Replaced Content Module Level 4]
  • [dev.w3.org/csswg/css-backgrounds-4/ CSS Backgrounds and Borders Module Level 4]
  • [dev.w3.org/csswg/css-color/ CSS Color Module Level 4]
  • [dev.w3.org/csswg/mediaqueries-4/ Media Queries Level 4]
  • [dev.w3.org/csswg/css-pseudo-4/ CSS Pseudo-Elements Module Level 4]
  • [dev.w3.org/csswg/css-text-4/ CSS Text Module Level 4]

Поддержка CSS браузерами

Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera)[9].

Бывший когда-то самым распространённым браузером[10] Internet Explorer 6 поддерживает CSS далеко не полностью[11].

Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS[12][13], но всё ещё содержит значительное количество ошибок[14].

В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3[15].

Для проверки поддержки браузером веб-стандартов (в том числе и различных частей стандарта CSS) был разработан тест Acid. Его вторая версия называется Acid2, а третья, соответственно, Acid3.

Различные блоковые модели

В стандартах CSS от Консорциума W3C используется модель, в которой свойство width определяет ширину содержимого блока, не включая в неё отступы и рамки. Ранние версии Internet Explorer (4 и 5), реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (padding) и рамки (border). Кроме Internet Explorer 5 эту модель так же понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.

В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing, со значениями content-box для указания на использование стандартной модели W3C и border-box для использования модели IE 5.

В браузере Mozilla, при поддержке этого свойства, под собственным «рабочим» названием -moz-box-sizing, ввели еще одно значение — padding-box, таким образом создав третью блочную модель, в которой width это размер содержимого и отступов блока, не включая рамки.

CSS-фильтры

Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять (или не применять) стили к различным элементам. Например, известно, что Internet Explorer 6 применяет правила, использующие селекторы вида * html селектор (фильтр, известный как «star html bug»). Тогда, чтобы заставить и браузеры, использующие блоковую модель W3C и IE, работающего в Quirks mode со своей блоковой моделью, отображать блок #someblock шириной в 100 пикселей и внутренними отступами в 10 пикселей, можно написать такой код: 

/* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */
#someblock { width: 80px; padding: 10px; }
/* Следующее правило применит только IE6. */
* html #someblock { width: 100px; padding: 10px; }

Ещё одним способом выборочного применения правил для Internet Explorer являются условные комментарии.

Безопасность

Все поддерживаемые на конец 2010 года версии Internet Explorer были уязвимы: при обработке браузером каскадных таблиц стилей (CSS) может возникнуть неинициализированная память, используемая затем для удалённого запуска на компьютере пользователя вредоносного кода[16].

CSS Framework

Основная статья: CSS Framework

CSS Framework (также Web design framework) — это заранее подготовленная css-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Так же как и библиотеки скриптовых языков программирования, CSS-фреймворки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя неискушённому в тонкостях вёрстки программисту или дизайнеру правильно создать xhtml-макет.

Расширения CSS

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

Для решения этих вопросов и ускорения разработки существует несколько расширений языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:

  • во время запуска страницы на стороне клиента (средствами JavaScript)
  • во время запуска страницы на стороне сервера
  • во время вёрстки сайта средствами специального компилятора

Примеры расширений CSS:

См. также

Имеется викиучебник по теме
«CSS»
Имеется викиучебник по теме
«CSS»

Напишите отзыв о статье "CSS"

Примечания

  1. ↑ Дэйв Ши, Молли Е. Хольцшлаг. Философия CSS-дизайна. / Пер. с англ. А. Слинкина. — М.: НТ Пресс, 2005. — 312 с.: ил.
  2. ↑ [www.w3.org/TR/CSS1 Cascading Style Sheets, level 1]
  3. ↑ [www.w3.org/TR/2008/REC-CSS2-20080411/ Cascading Style Sheets, level 2 CSS2 Specification]
  4. ↑ W3C: [www.w3.org/Style/CSS/current-work CSS: current work], CSS 3, etc.
  5. ↑ [rip747.wordpress.com/2008/04/10/css3-css-variables-are-a-bad-idea-just-allow-us-to-call-other-selectors/ CSS3: css variables are a bad idea. Just allow us to call other selectors.] // Rip’s Domain
  6. ↑ [www.dave-woods.co.uk/index.php/css-variables/ CSS Variables] // dave-woods.co.uk
  7. ↑ [www.w3.org/TR/2011/WD-selectors4-20110929/ Selectors Level 4]. W3.org (29 сентября 2011). [www.webcitation.org/682WaRboP Архивировано из первоисточника 30 мая 2012].
  8. ↑ [www.webmonkey.com/2011/10/discover-whats-new-in-css-4/ Discover What's New in CSS 4 | Webmonkey | Wired.com]. Webmonkey (26 октября 2011). [www.webcitation.org/682WbfhI6 Архивировано из первоисточника 30 мая 2012].
  9. ↑ [www.webdevout.net/browser-support-summary Web browser standards support]
  10. ↑ [www.onestat.com/html/aboutus_pressbox53-firefox-mozilla-browser-market-share.html Mozilla’s Firefox global usage share is still growing according to OneStat.com]
  11. ↑ [www.quirksmode.org/css/contents.html Contents and browser compatibility]
  12. ↑ [blogs.msdn.com/ie/archive/2006/08/22/712830.aspx Details on our CSS changes for IE7] IEBlog
  13. ↑ [msdn2.microsoft.com/en-us/library/bb250496(VS.85).aspx Cascading Style Sheet Compatibility in Internet Explorer 7] MSDN
  14. ↑ [www.positioniseverything.net/explorer.html The weird and wonderful world of Internet Explorer]
  15. ↑ [msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx CSS Compatibility and Internet Explorer] MSDN
  16. ↑ [www.interfax.by/article/74491 Microsoft: все версии Internet Explorer уязвимы для хакеров]

Литература

  • Эд Титтел, Джефф Ноубл. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. — М.: «Диалектика», 2011. — 400 с. — ISBN 978-5-8459-1752-2.
  • Стивен Шафер. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition. — М.: «Диалектика», 2011. — 656 с. — ISBN 978-5-8459-1676-1.
  • Энди Бадд, Камерон Молл, Саймон Коллизон. CSS: профессиональное применение Web-стандартов = CSS Mastery: Advanced Web Standards Solutions. — М.: «Вильямс», 2008. — 272 с. — ISBN 978-5-8459-1199-5.
  • Кристофер Шмитт. CSS. Рецепты программирования = CSS. Cookbook. — СПб.: БХВ-Петербург, 2007. — 592 с. — ISBN 978-5-9775-0075-3.
  • Эрик А. Мейер. CSS-каскадные таблицы стилей: подробное руководство = Cascading Style Sheets: The definitive Guide. — М.: Символ, 2006. — 576 с. — ISBN 5-93286-075-8.

Ссылки

Англоязычные ресурсы

  • [www.w3.org/Style/CSS/Overview.en.html Cascading Style Sheets Home page] (англ.)
  • [www.w3.org/Style/Overview.en.html Web Style Sheets Home page] (англ.)
  • [www.quirksmode.org/css/box.html Различные блоковые модели CSS] (англ.)
  • [css3test.com/ CSS3-тест браузера]  (англ.)
  • [www.webdevout.net/browser_support_css.php Таблицы поддерживаемых браузерами возможностей CSS] (англ.)
  • [jigsaw.w3.org/css-validator/ Валидатор CSS] (англ.)
  • [www.csszengarden.com/ Демонстрация возможностей CSS-вёрстки] (англ.)
  • [www.css3.info/preview/ CSS3 Preview — Демонстрация новых возможностей CSS3] (англ.)
  • [www.romancortes.com/blog/pure-css-coke-can/ Демонстрация возможностей] (англ.)
  • [cssresizer.com Оптимизатор CSS кода] (англ.)

Русскоязычные ресурсы

  • [www.w3.org/Style/CSS/Overview.ru.html Каскадные Таблицы Стилей Домашняя страница] (рус.)
  • [www.w3.org/Style/Overview.ru.html Веб таблицы стилей Домашняя страница] (рус.)
  • [jigsaw.w3.org/css-validator/validator.html.ru Сервис проверки CSS от W3C]
  • [ru.html.net/tutorials/css/ Учебник CSS] (рекомендован [www.w3.org/Style/CSS/learning w3.org])
  • [htmlbook.ru/css Справочник CSS]
Режимы
Стандартные
CSS · DSSSL · XSL
Нестандартные
JSSS</span>ruen · FOSI</span>ruen · Qt Style Sheets · Sass · LESS · Stylus</span>ruen · SMIL Timesheets</span>ruen

Отрывок, характеризующий CSS

– Я от эрцгерцогини. Там я ничего не слыхал.
– И не видали, что везде укладываются?
– Не видал… Да в чем дело? – нетерпеливо спросил князь Андрей.
– В чем дело? Дело в том, что французы перешли мост, который защищает Ауэсперг, и мост не взорвали, так что Мюрат бежит теперь по дороге к Брюнну, и нынче завтра они будут здесь.
– Как здесь? Да как же не взорвали мост, когда он минирован?
– А это я у вас спрашиваю. Этого никто, и сам Бонапарте, не знает.
Болконский пожал плечами.
– Но ежели мост перейден, значит, и армия погибла: она будет отрезана, – сказал он.
– В этом то и штука, – отвечал Билибин. – Слушайте. Вступают французы в Вену, как я вам говорил. Всё очень хорошо. На другой день, то есть вчера, господа маршалы: Мюрат Ланн и Бельяр, садятся верхом и отправляются на мост. (Заметьте, все трое гасконцы.) Господа, – говорит один, – вы знаете, что Таборский мост минирован и контраминирован, и что перед ним грозный tete de pont и пятнадцать тысяч войска, которому велено взорвать мост и нас не пускать. Но нашему государю императору Наполеону будет приятно, ежели мы возьмем этот мост. Проедемте втроем и возьмем этот мост. – Поедемте, говорят другие; и они отправляются и берут мост, переходят его и теперь со всею армией по сю сторону Дуная направляются на нас, на вас и на ваши сообщения.
– Полноте шутить, – грустно и серьезно сказал князь Андрей.
Известие это было горестно и вместе с тем приятно князю Андрею.
Как только он узнал, что русская армия находится в таком безнадежном положении, ему пришло в голову, что ему то именно предназначено вывести русскую армию из этого положения, что вот он, тот Тулон, который выведет его из рядов неизвестных офицеров и откроет ему первый путь к славе! Слушая Билибина, он соображал уже, как, приехав к армии, он на военном совете подаст мнение, которое одно спасет армию, и как ему одному будет поручено исполнение этого плана.
– Полноте шутить, – сказал он.
– Не шучу, – продолжал Билибин, – ничего нет справедливее и печальнее. Господа эти приезжают на мост одни и поднимают белые платки; уверяют, что перемирие, и что они, маршалы, едут для переговоров с князем Ауэрспергом. Дежурный офицер пускает их в tete de pont. [мостовое укрепление.] Они рассказывают ему тысячу гасконских глупостей: говорят, что война кончена, что император Франц назначил свидание Бонапарту, что они желают видеть князя Ауэрсперга, и тысячу гасконад и проч. Офицер посылает за Ауэрспергом; господа эти обнимают офицеров, шутят, садятся на пушки, а между тем французский баталион незамеченный входит на мост, сбрасывает мешки с горючими веществами в воду и подходит к tete de pont. Наконец, является сам генерал лейтенант, наш милый князь Ауэрсперг фон Маутерн. «Милый неприятель! Цвет австрийского воинства, герой турецких войн! Вражда кончена, мы можем подать друг другу руку… император Наполеон сгорает желанием узнать князя Ауэрсперга». Одним словом, эти господа, не даром гасконцы, так забрасывают Ауэрсперга прекрасными словами, он так прельщен своею столь быстро установившеюся интимностью с французскими маршалами, так ослеплен видом мантии и страусовых перьев Мюрата, qu'il n'y voit que du feu, et oubl celui qu'il devait faire faire sur l'ennemi. [Что он видит только их огонь и забывает о своем, о том, который он обязан был открыть против неприятеля.] (Несмотря на живость своей речи, Билибин не забыл приостановиться после этого mot, чтобы дать время оценить его.) Французский баталион вбегает в tete de pont, заколачивают пушки, и мост взят. Нет, но что лучше всего, – продолжал он, успокоиваясь в своем волнении прелестью собственного рассказа, – это то, что сержант, приставленный к той пушке, по сигналу которой должно было зажигать мины и взрывать мост, сержант этот, увидав, что французские войска бегут на мост, хотел уже стрелять, но Ланн отвел его руку. Сержант, который, видно, был умнее своего генерала, подходит к Ауэрспергу и говорит: «Князь, вас обманывают, вот французы!» Мюрат видит, что дело проиграно, ежели дать говорить сержанту. Он с удивлением (настоящий гасконец) обращается к Ауэрспергу: «Я не узнаю столь хваленую в мире австрийскую дисциплину, – говорит он, – и вы позволяете так говорить с вами низшему чину!» C'est genial. Le prince d'Auersperg se pique d'honneur et fait mettre le sergent aux arrets. Non, mais avouez que c'est charmant toute cette histoire du pont de Thabor. Ce n'est ni betise, ni lachete… [Это гениально. Князь Ауэрсперг оскорбляется и приказывает арестовать сержанта. Нет, признайтесь, что это прелесть, вся эта история с мостом. Это не то что глупость, не то что подлость…]
– С'est trahison peut etre, [Быть может, измена,] – сказал князь Андрей, живо воображая себе серые шинели, раны, пороховой дым, звуки пальбы и славу, которая ожидает его.
– Non plus. Cela met la cour dans de trop mauvais draps, – продолжал Билибин. – Ce n'est ni trahison, ni lachete, ni betise; c'est comme a Ulm… – Он как будто задумался, отыскивая выражение: – c'est… c'est du Mack. Nous sommes mackes , [Также нет. Это ставит двор в самое нелепое положение; это ни измена, ни подлость, ни глупость; это как при Ульме, это… это Маковщина . Мы обмаковались. ] – заключил он, чувствуя, что он сказал un mot, и свежее mot, такое mot, которое будет повторяться.
Собранные до тех пор складки на лбу быстро распустились в знак удовольствия, и он, слегка улыбаясь, стал рассматривать свои ногти.
– Куда вы? – сказал он вдруг, обращаясь к князю Андрею, который встал и направился в свою комнату.
– Я еду.
– Куда?
– В армию.
– Да вы хотели остаться еще два дня?
– А теперь я еду сейчас.
И князь Андрей, сделав распоряжение об отъезде, ушел в свою комнату.
– Знаете что, мой милый, – сказал Билибин, входя к нему в комнату. – Я подумал об вас. Зачем вы поедете?
И в доказательство неопровержимости этого довода складки все сбежали с лица.
Князь Андрей вопросительно посмотрел на своего собеседника и ничего не ответил.
– Зачем вы поедете? Я знаю, вы думаете, что ваш долг – скакать в армию теперь, когда армия в опасности. Я это понимаю, mon cher, c'est de l'heroisme. [мой дорогой, это героизм.]
– Нисколько, – сказал князь Андрей.
– Но вы un philoSophiee, [философ,] будьте же им вполне, посмотрите на вещи с другой стороны, и вы увидите, что ваш долг, напротив, беречь себя. Предоставьте это другим, которые ни на что более не годны… Вам не велено приезжать назад, и отсюда вас не отпустили; стало быть, вы можете остаться и ехать с нами, куда нас повлечет наша несчастная судьба. Говорят, едут в Ольмюц. А Ольмюц очень милый город. И мы с вами вместе спокойно поедем в моей коляске.
– Перестаньте шутить, Билибин, – сказал Болконский.
– Я говорю вам искренно и дружески. Рассудите. Куда и для чего вы поедете теперь, когда вы можете оставаться здесь? Вас ожидает одно из двух (он собрал кожу над левым виском): или не доедете до армии и мир будет заключен, или поражение и срам со всею кутузовскою армией.
И Билибин распустил кожу, чувствуя, что дилемма его неопровержима.
– Этого я не могу рассудить, – холодно сказал князь Андрей, а подумал: «еду для того, чтобы спасти армию».
– Mon cher, vous etes un heros, [Мой дорогой, вы – герой,] – сказал Билибин.


В ту же ночь, откланявшись военному министру, Болконский ехал в армию, сам не зная, где он найдет ее, и опасаясь по дороге к Кремсу быть перехваченным французами.
В Брюнне всё придворное население укладывалось, и уже отправлялись тяжести в Ольмюц. Около Эцельсдорфа князь Андрей выехал на дорогу, по которой с величайшею поспешностью и в величайшем беспорядке двигалась русская армия. Дорога была так запружена повозками, что невозможно было ехать в экипаже. Взяв у казачьего начальника лошадь и казака, князь Андрей, голодный и усталый, обгоняя обозы, ехал отыскивать главнокомандующего и свою повозку. Самые зловещие слухи о положении армии доходили до него дорогой, и вид беспорядочно бегущей армии подтверждал эти слухи.
«Cette armee russe que l'or de l'Angleterre a transportee, des extremites de l'univers, nous allons lui faire eprouver le meme sort (le sort de l'armee d'Ulm)», [«Эта русская армия, которую английское золото перенесло сюда с конца света, испытает ту же участь (участь ульмской армии)».] вспоминал он слова приказа Бонапарта своей армии перед началом кампании, и слова эти одинаково возбуждали в нем удивление к гениальному герою, чувство оскорбленной гордости и надежду славы. «А ежели ничего не остается, кроме как умереть? думал он. Что же, коли нужно! Я сделаю это не хуже других».
Князь Андрей с презрением смотрел на эти бесконечные, мешавшиеся команды, повозки, парки, артиллерию и опять повозки, повозки и повозки всех возможных видов, обгонявшие одна другую и в три, в четыре ряда запружавшие грязную дорогу. Со всех сторон, назади и впереди, покуда хватал слух, слышались звуки колес, громыхание кузовов, телег и лафетов, лошадиный топот, удары кнутом, крики понуканий, ругательства солдат, денщиков и офицеров. По краям дороги видны были беспрестанно то павшие ободранные и неободранные лошади, то сломанные повозки, у которых, дожидаясь чего то, сидели одинокие солдаты, то отделившиеся от команд солдаты, которые толпами направлялись в соседние деревни или тащили из деревень кур, баранов, сено или мешки, чем то наполненные.
На спусках и подъемах толпы делались гуще, и стоял непрерывный стон криков. Солдаты, утопая по колена в грязи, на руках подхватывали орудия и фуры; бились кнуты, скользили копыта, лопались постромки и надрывались криками груди. Офицеры, заведывавшие движением, то вперед, то назад проезжали между обозами. Голоса их были слабо слышны посреди общего гула, и по лицам их видно было, что они отчаивались в возможности остановить этот беспорядок. «Voila le cher [„Вот дорогое] православное воинство“, подумал Болконский, вспоминая слова Билибина.
Желая спросить у кого нибудь из этих людей, где главнокомандующий, он подъехал к обозу. Прямо против него ехал странный, в одну лошадь, экипаж, видимо, устроенный домашними солдатскими средствами, представлявший середину между телегой, кабриолетом и коляской. В экипаже правил солдат и сидела под кожаным верхом за фартуком женщина, вся обвязанная платками. Князь Андрей подъехал и уже обратился с вопросом к солдату, когда его внимание обратили отчаянные крики женщины, сидевшей в кибиточке. Офицер, заведывавший обозом, бил солдата, сидевшего кучером в этой колясочке, за то, что он хотел объехать других, и плеть попадала по фартуку экипажа. Женщина пронзительно кричала. Увидав князя Андрея, она высунулась из под фартука и, махая худыми руками, выскочившими из под коврового платка, кричала:
– Адъютант! Господин адъютант!… Ради Бога… защитите… Что ж это будет?… Я лекарская жена 7 го егерского… не пускают; мы отстали, своих потеряли…
– В лепешку расшибу, заворачивай! – кричал озлобленный офицер на солдата, – заворачивай назад со шлюхой своею.
– Господин адъютант, защитите. Что ж это? – кричала лекарша.
– Извольте пропустить эту повозку. Разве вы не видите, что это женщина? – сказал князь Андрей, подъезжая к офицеру.
Офицер взглянул на него и, не отвечая, поворотился опять к солдату: – Я те объеду… Назад!…
– Пропустите, я вам говорю, – опять повторил, поджимая губы, князь Андрей.
– А ты кто такой? – вдруг с пьяным бешенством обратился к нему офицер. – Ты кто такой? Ты (он особенно упирал на ты ) начальник, что ль? Здесь я начальник, а не ты. Ты, назад, – повторил он, – в лепешку расшибу.
Это выражение, видимо, понравилось офицеру.
– Важно отбрил адъютантика, – послышался голос сзади.
Князь Андрей видел, что офицер находился в том пьяном припадке беспричинного бешенства, в котором люди не помнят, что говорят. Он видел, что его заступничество за лекарскую жену в кибиточке исполнено того, чего он боялся больше всего в мире, того, что называется ridicule [смешное], но инстинкт его говорил другое. Не успел офицер договорить последних слов, как князь Андрей с изуродованным от бешенства лицом подъехал к нему и поднял нагайку:
– Из воль те про пус тить!
Офицер махнул рукой и торопливо отъехал прочь.
– Всё от этих, от штабных, беспорядок весь, – проворчал он. – Делайте ж, как знаете.
Князь Андрей торопливо, не поднимая глаз, отъехал от лекарской жены, называвшей его спасителем, и, с отвращением вспоминая мельчайшие подробности этой унизи тельной сцены, поскакал дальше к той деревне, где, как ему сказали, находился главнокомандующий.
Въехав в деревню, он слез с лошади и пошел к первому дому с намерением отдохнуть хоть на минуту, съесть что нибудь и привесть в ясность все эти оскорбительные, мучившие его мысли. «Это толпа мерзавцев, а не войско», думал он, подходя к окну первого дома, когда знакомый ему голос назвал его по имени.
Он оглянулся. Из маленького окна высовывалось красивое лицо Несвицкого. Несвицкий, пережевывая что то сочным ртом и махая руками, звал его к себе.
– Болконский, Болконский! Не слышишь, что ли? Иди скорее, – кричал он.
Войдя в дом, князь Андрей увидал Несвицкого и еще другого адъютанта, закусывавших что то. Они поспешно обратились к Болконскому с вопросом, не знает ли он чего нового. На их столь знакомых ему лицах князь Андрей прочел выражение тревоги и беспокойства. Выражение это особенно заметно было на всегда смеющемся лице Несвицкого.
– Где главнокомандующий? – спросил Болконский.
– Здесь, в том доме, – отвечал адъютант.
– Ну, что ж, правда, что мир и капитуляция? – спрашивал Несвицкий.
– Я у вас спрашиваю. Я ничего не знаю, кроме того, что я насилу добрался до вас.
– А у нас, брат, что! Ужас! Винюсь, брат, над Маком смеялись, а самим еще хуже приходится, – сказал Несвицкий. – Да садись же, поешь чего нибудь.
– Теперь, князь, ни повозок, ничего не найдете, и ваш Петр Бог его знает где, – сказал другой адъютант.
– Где ж главная квартира?
– В Цнайме ночуем.
– А я так перевьючил себе всё, что мне нужно, на двух лошадей, – сказал Несвицкий, – и вьюки отличные мне сделали. Хоть через Богемские горы удирать. Плохо, брат. Да что ты, верно нездоров, что так вздрагиваешь? – спросил Несвицкий, заметив, как князя Андрея дернуло, будто от прикосновения к лейденской банке.
– Ничего, – отвечал князь Андрей.
Он вспомнил в эту минуту о недавнем столкновении с лекарскою женой и фурштатским офицером.
– Что главнокомандующий здесь делает? – спросил он.
– Ничего не понимаю, – сказал Несвицкий.
– Я одно понимаю, что всё мерзко, мерзко и мерзко, – сказал князь Андрей и пошел в дом, где стоял главнокомандующий.
Пройдя мимо экипажа Кутузова, верховых замученных лошадей свиты и казаков, громко говоривших между собою, князь Андрей вошел в сени. Сам Кутузов, как сказали князю Андрею, находился в избе с князем Багратионом и Вейротером. Вейротер был австрийский генерал, заменивший убитого Шмита. В сенях маленький Козловский сидел на корточках перед писарем. Писарь на перевернутой кадушке, заворотив обшлага мундира, поспешно писал. Лицо Козловского было измученное – он, видно, тоже не спал ночь. Он взглянул на князя Андрея и даже не кивнул ему головой.
– Вторая линия… Написал? – продолжал он, диктуя писарю, – Киевский гренадерский, Подольский…
– Не поспеешь, ваше высокоблагородие, – отвечал писарь непочтительно и сердито, оглядываясь на Козловского.
Из за двери слышен был в это время оживленно недовольный голос Кутузова, перебиваемый другим, незнакомым голосом. По звуку этих голосов, по невниманию, с которым взглянул на него Козловский, по непочтительности измученного писаря, по тому, что писарь и Козловский сидели так близко от главнокомандующего на полу около кадушки,и по тому, что казаки, державшие лошадей, смеялись громко под окном дома, – по всему этому князь Андрей чувствовал, что должно было случиться что нибудь важное и несчастливое.
Князь Андрей настоятельно обратился к Козловскому с вопросами.
– Сейчас, князь, – сказал Козловский. – Диспозиция Багратиону.
– А капитуляция?
– Никакой нет; сделаны распоряжения к сражению.
Князь Андрей направился к двери, из за которой слышны были голоса. Но в то время, как он хотел отворить дверь, голоса в комнате замолкли, дверь сама отворилась, и Кутузов, с своим орлиным носом на пухлом лице, показался на пороге.
Князь Андрей стоял прямо против Кутузова; но по выражению единственного зрячего глаза главнокомандующего видно было, что мысль и забота так сильно занимали его, что как будто застилали ему зрение. Он прямо смотрел на лицо своего адъютанта и не узнавал его.
– Ну, что, кончил? – обратился он к Козловскому.
– Сию секунду, ваше высокопревосходительство.
Багратион, невысокий, с восточным типом твердого и неподвижного лица, сухой, еще не старый человек, вышел за главнокомандующим.
– Честь имею явиться, – повторил довольно громко князь Андрей, подавая конверт.
– А, из Вены? Хорошо. После, после!
Кутузов вышел с Багратионом на крыльцо.
– Ну, князь, прощай, – сказал он Багратиону. – Христос с тобой. Благословляю тебя на великий подвиг.
Лицо Кутузова неожиданно смягчилось, и слезы показались в его глазах. Он притянул к себе левою рукой Багратиона, а правой, на которой было кольцо, видимо привычным жестом перекрестил его и подставил ему пухлую щеку, вместо которой Багратион поцеловал его в шею.
– Христос с тобой! – повторил Кутузов и подошел к коляске. – Садись со мной, – сказал он Болконскому.
– Ваше высокопревосходительство, я желал бы быть полезен здесь. Позвольте мне остаться в отряде князя Багратиона.
– Садись, – сказал Кутузов и, заметив, что Болконский медлит, – мне хорошие офицеры самому нужны, самому нужны.
Они сели в коляску и молча проехали несколько минут.
– Еще впереди много, много всего будет, – сказал он со старческим выражением проницательности, как будто поняв всё, что делалось в душе Болконского. – Ежели из отряда его придет завтра одна десятая часть, я буду Бога благодарить, – прибавил Кутузов, как бы говоря сам с собой.
Князь Андрей взглянул на Кутузова, и ему невольно бросились в глаза, в полуаршине от него, чисто промытые сборки шрама на виске Кутузова, где измаильская пуля пронизала ему голову, и его вытекший глаз. «Да, он имеет право так спокойно говорить о погибели этих людей!» подумал Болконский.
– От этого я и прошу отправить меня в этот отряд, – сказал он.
Кутузов не ответил. Он, казалось, уж забыл о том, что было сказано им, и сидел задумавшись. Через пять минут, плавно раскачиваясь на мягких рессорах коляски, Кутузов обратился к князю Андрею. На лице его не было и следа волнения. Он с тонкою насмешливостью расспрашивал князя Андрея о подробностях его свидания с императором, об отзывах, слышанных при дворе о кремском деле, и о некоторых общих знакомых женщинах.


Кутузов чрез своего лазутчика получил 1 го ноября известие, ставившее командуемую им армию почти в безвыходное положение. Лазутчик доносил, что французы в огромных силах, перейдя венский мост, направились на путь сообщения Кутузова с войсками, шедшими из России. Ежели бы Кутузов решился оставаться в Кремсе, то полуторастатысячная армия Наполеона отрезала бы его от всех сообщений, окружила бы его сорокатысячную изнуренную армию, и он находился бы в положении Мака под Ульмом. Ежели бы Кутузов решился оставить дорогу, ведшую на сообщения с войсками из России, то он должен был вступить без дороги в неизвестные края Богемских
гор, защищаясь от превосходного силами неприятеля, и оставить всякую надежду на сообщение с Буксгевденом. Ежели бы Кутузов решился отступать по дороге из Кремса в Ольмюц на соединение с войсками из России, то он рисковал быть предупрежденным на этой дороге французами, перешедшими мост в Вене, и таким образом быть принужденным принять сражение на походе, со всеми тяжестями и обозами, и имея дело с неприятелем, втрое превосходившим его и окружавшим его с двух сторон.
Кутузов избрал этот последний выход.
Французы, как доносил лазутчик, перейдя мост в Вене, усиленным маршем шли на Цнайм, лежавший на пути отступления Кутузова, впереди его более чем на сто верст. Достигнуть Цнайма прежде французов – значило получить большую надежду на спасение армии; дать французам предупредить себя в Цнайме – значило наверное подвергнуть всю армию позору, подобному ульмскому, или общей гибели. Но предупредить французов со всею армией было невозможно. Дорога французов от Вены до Цнайма была короче и лучше, чем дорога русских от Кремса до Цнайма.
В ночь получения известия Кутузов послал четырехтысячный авангард Багратиона направо горами с кремско цнаймской дороги на венско цнаймскую. Багратион должен был пройти без отдыха этот переход, остановиться лицом к Вене и задом к Цнайму, и ежели бы ему удалось предупредить французов, то он должен был задерживать их, сколько мог. Сам же Кутузов со всеми тяжестями тронулся к Цнайму.
Пройдя с голодными, разутыми солдатами, без дороги, по горам, в бурную ночь сорок пять верст, растеряв третью часть отсталыми, Багратион вышел в Голлабрун на венско цнаймскую дорогу несколькими часами прежде французов, подходивших к Голлабруну из Вены. Кутузову надо было итти еще целые сутки с своими обозами, чтобы достигнуть Цнайма, и потому, чтобы спасти армию, Багратион должен был с четырьмя тысячами голодных, измученных солдат удерживать в продолжение суток всю неприятельскую армию, встретившуюся с ним в Голлабруне, что было, очевидно, невозможно. Но странная судьба сделала невозможное возможным. Успех того обмана, который без боя отдал венский мост в руки французов, побудил Мюрата пытаться обмануть так же и Кутузова. Мюрат, встретив слабый отряд Багратиона на цнаймской дороге, подумал, что это была вся армия Кутузова. Чтобы несомненно раздавить эту армию, он поджидал отставшие по дороге из Вены войска и с этою целью предложил перемирие на три дня, с условием, чтобы те и другие войска не изменяли своих положений и не трогались с места. Мюрат уверял, что уже идут переговоры о мире и что потому, избегая бесполезного пролития крови, он предлагает перемирие. Австрийский генерал граф Ностиц, стоявший на аванпостах, поверил словам парламентера Мюрата и отступил, открыв отряд Багратиона. Другой парламентер поехал в русскую цепь объявить то же известие о мирных переговорах и предложить перемирие русским войскам на три дня. Багратион отвечал, что он не может принимать или не принимать перемирия, и с донесением о сделанном ему предложении послал к Кутузову своего адъютанта.
Перемирие для Кутузова было единственным средством выиграть время, дать отдохнуть измученному отряду Багратиона и пропустить обозы и тяжести (движение которых было скрыто от французов), хотя один лишний переход до Цнайма. Предложение перемирия давало единственную и неожиданную возможность спасти армию. Получив это известие, Кутузов немедленно послал состоявшего при нем генерал адъютанта Винценгероде в неприятельский лагерь. Винценгероде должен был не только принять перемирие, но и предложить условия капитуляции, а между тем Кутузов послал своих адъютантов назад торопить сколь возможно движение обозов всей армии по кремско цнаймской дороге. Измученный, голодный отряд Багратиона один должен был, прикрывая собой это движение обозов и всей армии, неподвижно оставаться перед неприятелем в восемь раз сильнейшим.
Ожидания Кутузова сбылись как относительно того, что предложения капитуляции, ни к чему не обязывающие, могли дать время пройти некоторой части обозов, так и относительно того, что ошибка Мюрата должна была открыться очень скоро. Как только Бонапарте, находившийся в Шенбрунне, в 25 верстах от Голлабруна, получил донесение Мюрата и проект перемирия и капитуляции, он увидел обман и написал следующее письмо к Мюрату:
Au prince Murat. Schoenbrunn, 25 brumaire en 1805 a huit heures du matin.
«II m'est impossible de trouver des termes pour vous exprimer mon mecontentement. Vous ne commandez que mon avant garde et vous n'avez pas le droit de faire d'armistice sans mon ordre. Vous me faites perdre le fruit d'une campagne. Rompez l'armistice sur le champ et Mariechez a l'ennemi. Vous lui ferez declarer,que le general qui a signe cette capitulation, n'avait pas le droit de le faire, qu'il n'y a que l'Empereur de Russie qui ait ce droit.
«Toutes les fois cependant que l'Empereur de Russie ratifierait la dite convention, je la ratifierai; mais ce n'est qu'une ruse.Mariechez, detruisez l'armee russe… vous etes en position de prendre son bagage et son artiller.
«L'aide de camp de l'Empereur de Russie est un… Les officiers ne sont rien quand ils n'ont pas de pouvoirs: celui ci n'en avait point… Les Autrichiens se sont laisse jouer pour le passage du pont de Vienne, vous vous laissez jouer par un aide de camp de l'Empereur. Napoleon».
[Принцу Мюрату. Шенбрюнн, 25 брюмера 1805 г. 8 часов утра.
Я не могу найти слов чтоб выразить вам мое неудовольствие. Вы командуете только моим авангардом и не имеете права делать перемирие без моего приказания. Вы заставляете меня потерять плоды целой кампании. Немедленно разорвите перемирие и идите против неприятеля. Вы объявите ему, что генерал, подписавший эту капитуляцию, не имел на это права, и никто не имеет, исключая лишь российского императора.
Впрочем, если российский император согласится на упомянутое условие, я тоже соглашусь; но это не что иное, как хитрость. Идите, уничтожьте русскую армию… Вы можете взять ее обозы и ее артиллерию.
Генерал адъютант российского императора обманщик… Офицеры ничего не значат, когда не имеют власти полномочия; он также не имеет его… Австрийцы дали себя обмануть при переходе венского моста, а вы даете себя обмануть адъютантам императора.
Наполеон.]
Адъютант Бонапарте во всю прыть лошади скакал с этим грозным письмом к Мюрату. Сам Бонапарте, не доверяя своим генералам, со всею гвардией двигался к полю сражения, боясь упустить готовую жертву, а 4.000 ный отряд Багратиона, весело раскладывая костры, сушился, обогревался, варил в первый раз после трех дней кашу, и никто из людей отряда не знал и не думал о том, что предстояло ему.


В четвертом часу вечера князь Андрей, настояв на своей просьбе у Кутузова, приехал в Грунт и явился к Багратиону.
Адъютант Бонапарте еще не приехал в отряд Мюрата, и сражение еще не начиналось. В отряде Багратиона ничего не знали об общем ходе дел, говорили о мире, но не верили в его возможность. Говорили о сражении и тоже не верили и в близость сражения. Багратион, зная Болконского за любимого и доверенного адъютанта, принял его с особенным начальническим отличием и снисхождением, объяснил ему, что, вероятно, нынче или завтра будет сражение, и предоставил ему полную свободу находиться при нем во время сражения или в ариергарде наблюдать за порядком отступления, «что тоже было очень важно».
– Впрочем, нынче, вероятно, дела не будет, – сказал Багратион, как бы успокоивая князя Андрея.
«Ежели это один из обыкновенных штабных франтиков, посылаемых для получения крестика, то он и в ариергарде получит награду, а ежели хочет со мной быть, пускай… пригодится, коли храбрый офицер», подумал Багратион. Князь Андрей ничего не ответив, попросил позволения князя объехать позицию и узнать расположение войск с тем, чтобы в случае поручения знать, куда ехать. Дежурный офицер отряда, мужчина красивый, щеголевато одетый и с алмазным перстнем на указательном пальце, дурно, но охотно говоривший по французски, вызвался проводить князя Андрея.
Со всех сторон виднелись мокрые, с грустными лицами офицеры, чего то как будто искавшие, и солдаты, тащившие из деревни двери, лавки и заборы.
– Вот не можем, князь, избавиться от этого народа, – сказал штаб офицер, указывая на этих людей. – Распускают командиры. А вот здесь, – он указал на раскинутую палатку маркитанта, – собьются и сидят. Нынче утром всех выгнал: посмотрите, опять полна. Надо подъехать, князь, пугнуть их. Одна минута.


Источник — «http://wiki-org.ru/wiki/index.php?title=CSS&oldid=81191240»