Комментарии нужны, чтобы делать пояснения по поводу использования того или иного свойства 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 Transitional//EN">
<html>
<head>
<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 Transitional//EN">
<html>
<head>
<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 и приводит к ошибкам при проверке кода на валидность.
