Комментарии
Комментарии используются для добавления поясняющих заметок или для того, чтобы предотвратить интеграцию части кода в браузер.
Синтаксис
/* Комментарий */
Примеры
/* Однострочный комментарий */ /* Комментарий который содержит несколько строк */
Замечания
Данный /* */ синтаксис комментария используется для обоих вариантов, и однострочного и многострочного комментария. Нет других способов добавить комментарий во внешнюю таблицу стилей. Также, когда используется элемент , вы можете использовать , чтобы спрятать CSS от старых браузеров, но это не рекомендуется. Как и в большинстве языков программирования, которые используют синтаксис комментариев /* */ , комментарии нельзя вкладывать друг в друга. Другими словами, данная часть синтаксиса */, которая следует за /* закрывает комментарий.
Спецификации
Смотрите также
- Руководство по CSS
- Ключевые концепции CSS
- Синтаксис CSS
- @-правила
- комментарии
- специфичность
- наследование
- блочная модель
- режимы компоновки
- модели визуального форматирования
- Схлопывание отступов
- Значения
- начальные
- вычисленные
- используемые
- действительные
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как закомментировать код в CSS
Как правильно закомментировать код в css. Допустим, вы хотите временно отключить какие-то стили, но удалять код не хотите. Для этого можно воспользоваться специальным кодом для комментирования:
То есть, мы можем комментировать код с помощью открывающих символов /* и закрывающих */.
Причем комментировать можно не только код, но и любой текст. Например:
/* Заголовки */ h1 < color: red; font-size: 32px; text-align: center; /* выравниваем по центру блока */ >Статья была полезной?
Рекомендуем к прочтению
�� Комментарии:Отменить ответ
✏️ Наши авторы
Кирилл Черепахин
Публикаций: 13
ID; echo $user->display_name; the_author_image($user->ID); echo $user->description; —>
Владимир Самойлов
Публикаций: 195
ID; echo $user->display_name; the_author_image($user->ID); echo $user->description; —>
Публикаций: 123
ID; echo $user->display_name; the_author_image($user->ID); echo $user->description; —>
CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Вступай в клуб
���� Присоединяйся к сообществу!
Наш рейтинг
�� Лучшие биржи ссылок
GoGetLinks
Наш рейтинг
�� Лучший хостинг для сайта
Где учиться
���� Рекомендуемые курсы
Javascript-разработчик
Введение в программирование
SEO-специалист
Что читают?
�� Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 75367
Появление элементов при скролле
Просмотров: 55151
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 52983
Как изменить цвет SVG в CSS
Просмотров: 45395
Как выровнять картинку по центру с помощью CSS
Просмотров: 38821
Проверка знаний
�� Хорошо ли вы знаете CSS?Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:
.top < height: 30px; background-color: blue; margin-bottom: 10px; >.bottom
Больше интересных задачек по CSS в нашем Telegram канале ��
Viva Magenta
�� Цвет 2023 годаИсследовательский институт Pantone выбрал главный цвет 2023 года. Им стал карминово-красный оттенок с фиолетовым подтоном, который назвали Viva Magenta.
Ресурс WEB Головоломки создан для того, чтобы делиться накопленным опытом и знаниями. Мы надеемся, что наши статьи будут полезны новичкам — тем, которые только решили вникнуть в мир web-разработки.
На сайте вы найдете публикации по разным направлениям и темам: tilda, wordpress, верстка, seo-продвижение.
- О проекте
- Все записи
- Новости партнеров
- Тест по CSS
- Контакты
- Важность мета-тегов при продвижении сайта в Google
- Где купить ссылки для сайта
Комментарии в CSS
Нужно что-то скрыть, но не удалять? Хотите оставить пояснение или подсказку? Вам нужен комментарий.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 6 августа 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
Комментарии в CSS нужны, чтобы комментировать отдельные куски кода или быстро временно отключать свойства без удаления их из кода.
Комментарии не влияют на работу остального кода, а значит невозможно увидеть их, не заглядывая в файл со стилями.
Часто комментарии используются для визуального отделения блоков стилей друг от друга. Например, чтобы отделить стили для шапки сайта от стилей для остальной страницы.
Пример
Скопировать ссылку «Пример» Скопировано
В CSS существует только один вид комментариев, но их можно записывать по-разному.
/* Комментарий-блок, если нужно расписать что-то подробно.*/ .block /* Комментарий в строку */ text-align: center;>/* Комментарий-блок, если нужно расписать что-то подробно. */ .block /* Комментарий в строку */ text-align: center; >Обратите внимание, что комментарий вида / / в начале строки в CSS не поддерживается, он работает только в препроцессорах, вроде Sass или Less.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Комментарий оформляется при помощи двух пар символов, /* и * / :
/* Любой текст *//* Любой текст */По желанию или в соответствии с принятым в вашей команде стилем кода после открывающих символов можно перенести текст на новую строку, и закрывающую пару тоже поставить на следующей новой строке. Как-то так:
/* Я помню чудное мгновенье: Передо мной явилась ты, Как мимолетное виденье, Как гений чистой красоты.*//* Я помню чудное мгновенье: Передо мной явилась ты, Как мимолетное виденье, Как гений чистой красоты. */Как понять
Скопировать ссылку «Как понять» Скопировано
У комментария обязательно должны быть начало и конец. Открывать комментарий нужно при помощи /* , а закрывать — при помощи зеркальной конструкции * / .
Ещё пример
Скопировать ссылку «Ещё пример» Скопировано
Как выглядит закомментированное свойство:
.block /* height: 100%; */ width: 100%;>.block /* height: 100%; */ width: 100%; >А вот так можно закомментировать целый блок:
/* .block width: 100%; height: 100%;> *//* .block < width: 100%; height: 100%; >*/Иногда комментариями обозначают начало и конец смысловых блоков стилей:
/* Header */.header display: flex;>/* End Header*/ /* Footer */.footer background-color: pink;>/* End Footer *//* Header */ .header display: flex; > /* End Header*/ /* Footer */ .footer background-color: pink; > /* End Footer */В таком коротком куске кода комментарии избыточны и смотрятся грязно. Но когда файл со стилями состоит из тысяч строк (такого, конечно, стоит избегать), то такая навигация удобна.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Не злоупотребляйте комментариями. Не стоит пояснять всё подряд. Пишите комментарии только там, где без подсказки никак не понять, что происходит.
�� Но и не игнорируйте комментарии. Не молчите там, где есть что сказать. Например, вы использовали !important в коде (напомним, что это крайне нежелательная практика), но в данном случае он необходим. Поясните своё решение, чтобы следующий разработчик всё не сломал, удалив нежелательный элемент.
�� Чтобы быстро закомментировать или раскомментировать текущую строку или выделенный блок кода, в большинстве редакторов кода можно нажать Ctrl / или Cmd / .
На практике
Скопировать ссылку «На практике» Скопировано
Егор Левченко советует
Скопировать ссылку «Егор Левченко советует» Скопировано
�� Иногда в процессе разработки нужно быстро проверять какую-то гипотезу. Не хочется сгоряча удалять блок кода, вымученного кровью и потом. Просто закомментируй подозрительные строки. Если причина не в них, то раскомментируешь. Удалить всегда успеешь.
�� Удаляй все закомментированные свойства перед деплоем — публикацией проекта. Комментарии — утилитарная штука. Они полезны, но сильно загружают код и затрудняют его чтение. Если это не информационные комментарии, а следы экспериментов — удаляй их.
�� Иногда можно встретить в начале файла своеобразное оглавление, поясняющее в какой части файла искать стили для того или другого блока. Если у вас очень большой файл, то стоит попробовать такой подход. Он может оказаться удобным.
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Как всегда, стоит удалить все те комментарии, которые не должен видеть заказчик или пользователь конечного продукта, перед деплоем. Все, что неактуально, решено, касается внутренних процессов в вашей компании и не будет использоваться в дальнейшем — смело под нож!
Как закомментировать в css
В CSS используется один тип комментариев, который можно использовать как однострочный, так и многострочный. Для этого используется конструкция /* Тут комментарий */ . Так можно добавить пояснения к коду или закомментировать код, который сейчас не нужен:
.price /* Пример однострочного комментария */ display: flex; > .news /* Такая же конструкция для многострочного комментария */ > .nav-link /* Здесь закомментировали несколько свойств */ color: var(--bs-nav-link-color); display: block; /* font-size: var(--bs-nav-link-font-size); font-weight: var(--bs-nav-link-font-weight); */ padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); text-decoration: none; >