Статьи / Веб-разработка / CSS по шагам / Шаг 8. Комментарии
Шаг 8. КомментарииПросмотров: 1800
15.04.2009 16:16
 
Комментарии нужны, чтобы делать пояснения по поводу использования того или иного свойства 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 и приводит к ошибкам при проверке кода на валидность.

Автор: Влад Мержевич
Источник: htmlbook.ru