htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > CSS по шагам > Комментарии

Этот материал устарел, рекомендую Самоучитель CSS

Шаг 8. Комментарии

Влад Мержевич

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

Чтобы пометить, что текст является комментарием, применяют конструкцию /* ... */ (пример 8.1).

Пример 8.1. Комментарии в файле CSS

/* 
  Стиль для сайта htmlbook.ru
  Сделан для ознакомительных целей
*/

#toc { /* Блок с содержанием */
  width: 200px; /* Ширина блока */
  margin: 20px 0px 10px 0px; /* Поля вокруг элемента */
  float: left; /* Обтекание по правому краю */
}

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

Пример 8.2. Комментарии в коде HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Комментарии</title>
  <style type="text/css">
   P { 
    border: 5px double silver; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> 
 </body>
</html>

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

Пример 8.3. Комментирование отдельных свойств CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Комментарии</title>
  <style type="text/css">
   P { 
    border: 5px double silver; /* Параметры рамки */
    ~padding: 5px; /* Закомментируем этот параметр */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> 
 </body>
</html>

Замечание

Указанный метод комментирования свойств CSS рекомендуется использовать только в отладочных целях и никогда не добавлять в окончательную версию сайта. Данный способ входит в противоречие со спецификацией CSS и приводит к ошибкам при проверке кода на валидность.

Статья опубликована: 15.10.2005 Последнее обновление: 22.12.2008
CSS по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru