Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

Комментарии в CSS

Комментарии в CSS можно указывать в любом месте, между любыми параметрами, но их нельзя вкладывать друг в друга. Каждый комментарий начинается с символов слеша и звездочки (/*) и заканчивается ими же, но в другом порядке (*/).

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

Старайтесь во внешних таблицах стилей указывать комментарии только на латинице. Дело в том, что некоторые старые браузеры порой впадают в ступор при виде комментариев на русском языке, в частности этим грешит Internet Explorer 6.0. Но естественно в примерах этого учебника я буду писать их на русском.

Пример создания комментариев в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Создание комментариев</title>
  <style type="text/css">
   p {
    color: red; /* цвет текста параграфов */
 /* background: blue; фоновый цвет */
   }
  </style>
 </head>
 <body>
  <p>Параграф.</p>
 </body>
</html>

Результат в браузере

Параграф.

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

Пример скрытия CSS от старых браузеров

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Создание комментариев для скрытия CSS</title>
  <style type="text/css">
   <!--
   p {
    color: red; /* цвет текста параграфов */
    background: blue; /* фоновый цвет */
   }
   -->
  </style>
 </head>
 <body>
  <p>Параграф.</p>
 </body>
</html>

Результат в браузере

Параграф.

Значения и единицы измерения CSS← Содержание →Селекторы тегов
Учебник CSS