Интернет-агентство BINN » Руководство по созданию комментариев в CSS
В CSS вы можете добавлять комментарии, чтобы организовать разделы ваших таблиц стиля. Такие комментарии могут быть полезны при отладке или редизайне вашего сайта.
Если вы просматривали таблицу стилей ранее, то вы скорее всего уже видели комментарии — их можно узнать по знакам / * * /, которые их заключают. Комментарии объясняют читателю, зачем нужна та или иная строка в CSS. Эти сведения особенно полезны, если на сайте работают несколько разработчиков или, если вы унаследовали сайт от другого владельца.
В этой статье мы рассмотрим, как создавать свои собственные комментарии в CSS.
Как оставить комментарий в CSSЧтобы оставить комментарий в CSS, необходимо поместить текст в / * * / marks. Это покажет браузеру, что комментарий — это не основной текст и он не должен отображаться во внешнем интерфейсе.
Вы можете добавить комментарий к своей таблице стилей двумя способами. Наиболее распространенный формат — однострочный комментарий, как в коде ниже:
Вы также можете отформатировать комментарий как многострочный:
Также вы можете разместить любой из этих фрагментов кода в разделе <head> вашей веб-страницы или во внешней таблице стилей CSS, чтобы оформить следующий HTML-код:
Вот результат:
Если вы работаете в CSS-среде Bootstrap, вместо создания сайта с нуля, то используйте следующий код CSS:
HTML-код будет другим, потому что мы хотим поместить заголовок и элемент абзаца так, чтобы по краям было несколько отступов:
Вот результат:
Единственное отличие в интерфейсе — это семейство шрифтов, которое задается в Bootstrap.
Комментарии могут не только расшифровывать разделы кода, но и аннулировать наборы правил CSS или отдельных объявлений. Если вы поместите знаки / * * / вокруг набора правил или объявлений — вы «закомментируете» CSS-код так, что браузер поймет, что этот стиль не применяется.
Набор правил — это селекторы CSS и все объявления внутри скобок. Они позволяют нам стилизовать любой элемент HTML. Ниже приведен набор правил для всех элементов абзаца на веб-странице, которые мы использовали в примерах выше:
Теперь рассмотрим пример отдельно закомментированного объявления в этом наборе правил.
CSS-код:
HTML-код:
Вот результат:
Теперь рассмотрим пример закомментированного набора правил.
CSS-код:
HTML-код:
Вот результат:
Если вы хотите добавить примечания или запретить браузеру отображать определенные части таблицы стилей — вы можете использовать комментарии.
Комментарии не повлияют на отображение других частей вашей таблицы стилей или макет вашего сайта. Их также легко создавать, даже если вы только начинаете изучать HTML и CSS.
Источник: Hubspot
Комментирование кода CSS: полное руководство для начинающих
5 / 5 — (125 голосов)
В CSS вы можете добавлять комментарии, объясняющие или упорядочивающие различные разделы вашей таблицы стилей. Этот шаг может показаться излишним в процессе кодирования, но обратная связь может быть чрезвычайно полезна при отладке или редизайне вашего веб-сайта.
Важность комментариев в CSS
Комментарии в CSS могут показаться незначительными, но они играют решающую роль в развитии и обслуживании вашего сайта. Вот несколько причин, почему вы должны использовать комментарии:
1. Понимание кода
Комментарии помогают объяснить, как работает ваш код CSS. Это облегчает понимание для вас и других разработчиков, работающих над проектом. Добавляя четкие и лаконичные пояснения, вы делаете свой код более доступным и избегаете недопонимания.
2. Упрощенная отладка
Когда вы сталкиваетесь с проблемами в своем коде CSS, правильно размещенные комментарии могут помочь вам быстро выявить ошибки. Указывая на определенные части кода или добавляя информацию о назначении раздела, вы можете сэкономить драгоценное время при отладке.
3. Повторное использование кода
Комментарии CSS также позволяют документировать повторно используемые фрагменты кода. Вместо поиска определенного стиля в ваших файлах вы можете просто проверить комментарии, чтобы найти нужный код. Это облегчает поддержку и обновление вашего сайта в будущем.
Как добавить комментарий в CSS
Существует простой способ добавления комментариев в CSS. Используйте следующий синтаксис:
/* Ваш комментарий здесь */
Просто поместите свой комментарий между тегами /* et */. Вот несколько примеров комментариев, обычно используемых в CSS:
1. Закомментируйте часть кода
/* Название раздела: Стили для основного баннера Описание: Эти стили применяются к основному баннеру главной страницы.*/
*/
В этом примере вы можете увидеть, как комментарий может помочь прояснить назначение и контекст определенного раздела кода CSS.
2. Прокомментируйте строку кода
р {цвет: #333; /* Цвет текста для абзацев */ }
Добавляя комментарий рядом со строкой кода, вы указываете цель этой строки. Это помогает быстро понять функцию каждой части кода.
3. Временно отключить правило стиля
/* .hide { display: none; /* Временно скрываем элемент * } */
Комментарии также можно использовать для временного отключения правила стиля. В этом примере правило стиля закомментировано, чтобы элемент был скрыт во время разработки и снова отображался после тестирования.
Заключение
Комментарии в CSS — это мощный инструмент для улучшения читабельности, облегчения отладки и оптимизации обслуживания вашего сайта. Выработайте привычку добавлять четкие, информативные комментарии к своему коду CSS, и вы быстро увидите преимущества, которые они предлагают при разработке вашего сайта.
Что это такое и как это работает
Нужна помощь, чтобы понять, с чего начать, когда вы хотите попробовать настроить WordPress CSS?
Вы можете изменить дизайн своего сайта полностью или на отдельных страницах, используя стили CSS.
Знание CSS-комментариев в WordPress необходимо, если вы хотите улучшить свое понимание платформы разработки WordPress или лучше контролировать внешний вид своего веб-сайта.
Это особенно актуально, если вы планируете отлаживать или переделывать его.
- Часто задаваемые вопросы
- Что такое комментарий CSS?
- Как вы комментируете в CSS?
- Понимание CSS в WordPress
- Как работают комментарии CSS?
- Как настроить тему WordPress с помощью комментариев CSS
- Что такое CSS?
- 3. Простой пользовательский CSS
Часто задаваемые вопросы
Что такое комментарий CSS? Вы можете добавить пояснения к коду или запретить браузеру понимать определенный раздел таблицы стилей, используя комментарий CSS.
Комментарии не предназначены для изменения структуры документа.
Прочтите основы CSS, чтобы лучше понять его.
Как вы комментируете в CSS?Действие по заключению раздела кода в метки комментариев (/* *), чтобы сделать его неактивным, известно как CSS Comment Out.
Сохраняя код для использования в будущем, разработчики могут отключить определенные стили, закомментировав их.
Понимание CSS в WordPress
CSS в WordPress работает немного иначе.
Управление осуществляется с помощью тем, состоящих из файлов шаблонов, тегов и, очевидно, таблицы стилей CSS.
Все они могут быть изменены, несмотря на то, что они созданы вашей темой.
Теги шаблонов используются для доступа к ним и другим элементам из вашей базы данных.
Файлы шаблонов разделяют различные области вашего веб-сайта на сегменты (например, header.php или archive.php).
Большинство этих файлов состоят из PHP и HTML, хотя при необходимости может быть включен и CSS.
Таблица стилей, часто известная как style.css, — это то, что вам действительно нужно.
Как работает комментарий CSS?
Комментарии CSS описывают код и могут быть полезны при обновлении исходного кода в будущем.
Те, кому может потребоваться более близкое знакомство с кодом, могут изучить важнейшие аспекты CSS из правильно оформленных комментариев.
Люди, которые ранее работали на веб-сайте, но еще не работали в последнее время, также могут получить большую пользу от комментариев; Веб-дизайнеры часто работают над разными веб-сайтами, и сохранение принципов дизайна от одного к другому может быть сложной задачей.
Комментарии можно вставлять везде, где есть место в таблице стилей.
Они используются на нескольких линиях или на одной линии.
Вы можете закомментировать одну или несколько строк CSS с помощью косой черты (/) и звездочки (*).
CSS позволяет создавать встроенные и многострочные комментарии, начиная их с дефиса и звездочки (/*) и заканчивая единицей (*/).
Встроенный комментарий в CSS выглядит следующим образом:
/* Это встроенный комментарий CSS */
Многострочный комментарий выглядит следующим образом:
/* Этот является а многострочный CSS комментарий */
Как настроить тему WordPress с помощью комментариев CSS
Просто заключите любой обычный текст в метки /* */, чтобы сделать комментарий CSS.
Это информирует браузер о том, что это заметки и не должны отображаться в пользовательском интерфейсе.
Для начала перейдите к Внешний вид > Редактор тем , затем Style.css.
У вас есть два варианта добавления комментариев к CSS.
Наиболее типичным форматом является однострочный комментарий, как показано ниже:
Комментарии CSS не влияют на то, как стили отображаются во внешнем интерфейсе, поскольку браузеры их игнорируют.
Вот пример многострочного комментария CSS.
Что такое CSS Comment Out
Действие по заключению раздела кода в метки комментариев (/* *), чтобы сделать его неактивным, известно как CSS Comment Out.
Сохраняя код для использования в будущем, разработчики могут отключить определенные стили, закомментировав их.
Кроме того, вы можете использовать его для хранения целых блоков кода CSS, которые могут вам понадобиться в будущем, не удаляя их.
Комментирование полезно при отладке и проверке кода CSS.
Поскольку объявление становится невидимым для браузера при размещении внутри комментария, это позволяет вам экспериментировать с различными стилистическими сочетаниями.
Теперь давайте посмотрим на пример набора правил, в котором закомментировано конкретное объявление.
В результате комментария объявление «цвет: белый» больше не применимо.
Что такое однострочный комментарий CSS
Теоретически, некоторые браузеры по-разному подходят к комментированию одной строки кода CSS.
Вместо использования обычного синтаксиса /*… */ вы должны поместить двойную косую черту (//) перед кодом, который хотите удалить.
Настоятельно рекомендуется не использовать этот метод в своем коде.
Поскольку подход /*… */ стандартизирован в CSS, он гарантированно будет работать во всех браузерах, а метод двойной косой черты — нет.
Да, некоторые современные браузеры могут его поддерживать.
Однако эти браузеры могут перестать поддерживать эту функцию в любой момент, что приведет к недоумению ваших посетителей, неработоспособности ваших комментариев и поломке вашего CSS.
Мы рекомендуем вам придерживаться техники комментирования /*… */, о которой мы говорили, потому что это общепринятая практика, совместимая со всеми текущими операционными системами и браузерами, и в ближайшее время она не будет прекращена.
Плагины, которые можно использовать для добавления комментариев в CSS
Некоторые темы не позволяют изменять раздел style.css, например, если вы используете программное обеспечение для дизайна веб-сайтов.
Вот несколько плагинов, которые вы можете установить, чтобы создавать комментарии CSS.
1. WP Добавить пользовательский CSS
После установки ваша панель инструментов будет включать новый раздел для плагина.
Вы можете сразу увидеть все изменения, обновив браузер.
Преимущество заключается в том, что для вашего удобства к каждому сообщению прилагается редактор CSS; вы можете использовать различные правила CSS, так как для разных публикаций они разные.
2. SiteOrigin CSS
SiteOrigin CSS — это удобный плагин, с которым вы также можете поиграть.
Вы можете выбрать любую часть вашего веб-сайта и изменить ее, используя встроенные функции плагина или вручную добавив код благодаря простому интерфейсу редактирования.
Доступ к инструменту можно получить после установки, выбрав «Внешний вид» > «Пользовательский CSS».
3. Simple Custom CSS
Один из самых популярных настраиваемых плагинов CSS для WordPress, Simple Custom CSS, позволяет изменять CSS для текущей темы или добавлять собственные стили.
Введенные здесь значения сохранятся, даже если вы поменяете тему.
Аналогичные руководства для ознакомления
- Как использовать пользовательский CSS в WordPress: Вам не нужно знать, как писать код для оформления веб-сайта WordPress, но вы можете изменить стиль своей темы.
- Как использовать важное свойство CSS: Вы находитесь в нужном месте, если вы новичок в CSS Important. Мы расскажем, как это влияет на ваш веб-сайт, как реализовать его на вашем веб-сайте и как правильно использовать важный CSS.
- Как использовать переполнение в CSS: Если вам нужно больше контроля над макетом и указать, что происходит, когда содержимое выходит за пределы поля элемента, вы можете использовать функцию переполнения. Мы покажем вам, как использовать Overflow в CSS.
Подведение итогов
Вы можете использовать комментарии, чтобы добавить дополнительную информацию или запретить браузерам отображать определенные разделы вашей таблицы стилей.
Комментарии не повлияют на то, как другие компоненты читают вашу таблицу стилей или на то, как настроен внешний вид веб-сайта.
Даже если вы только изучаете CSS, их легко реализовать.
Мы надеемся, что этот пост поможет вам настроить макет ваших комментариев WordPress.
Пожалуйста, не стесняйтесь оставлять комментарии ниже, если у вас есть какие-либо вопросы или рекомендации для нас.
Простое руководство по добавлению комментария CSS
Назад Простое руководство по добавлению комментария CSS
Создание веб-сайта может потребовать большого количества кода. Отслеживание каждого выбора, варианта и обоснования этого кода может привести к большому количеству дополнительной работы без какой-либо формы организации. Конечно, вы можете держать под рукой заметки, чтобы разобраться во всех этих темах и обращаться к ним при необходимости. Однако есть гораздо лучший способ справиться с этим. Введите использование комментария CSS.
Как и в других языках кодирования, таких как HTML, комментарии внутри CSS позволяют дизайнеру передавать подробности своей работы другим разработчикам непосредственно в самом коде. Это не только отличный непосредственный источник информации, но и хранит эти детали именно там, где они могут помочь больше всего.
Вы можете спросить, как вставить комментарий в файл CSS? В этом кратком руководстве вы узнаете об этом и многом другом.
Добавление комментария в таблицу стилей CSS довольно прямолинейно и просто. Возьмите следующий пример кода CSS ниже. Вы можете видеть, что он настроен для стилизации элемента абзаца с применением различных наборов свойств.
Теперь скажем, что коллега попросил вас вставить детали, чтобы сообщить ему, почему вы добавили выбранные вами варианты стилей. Вы можете добавить текст непосредственно в таблицу стилей CSS, как показано ниже.
Как видно из выделенного вверху текста, это довольно легко сделать. Тем не менее, без надлежащих тегов комментариев это вызывает проблемы. Обратите внимание, как слово «стиль» и буква «а» выделены красным. Это связано с тем, что редактор кода знает, что это файл таблицы стилей CSS, и соответствующим образом применяет правила синтаксиса. По сути, комментарий в его нынешнем виде выглядит для редактора как странный неработающий код.
Здесь в игру вступают секции открытия и закрытия комментариев CSS. Чтобы открыть комментарий CSS, вы просто начинаете с косой черты, за которой следует звездочка. Содержание комментария добавляется после этого. Чтобы закрыть комментарий, вы добавляете звездочку, за которой следует косая черта. См. пример ниже для более наглядного представления.
Теперь, чтобы применить это обратно к предыдущему примеру кода CSS, вокруг текста, введенного в редактор, будут размещены те же самые открывающий и закрывающий теги.
Теперь текст перешел от интерпретации кода CSS к комментарию CSS. Обратите внимание, как изменился цвет текста. Это может варьироваться в зависимости от используемого текстового редактора, однако почти все обеспечивают некоторое визуальное представление текста, становящегося комментарием.
Комментирование кода CSS Вы также можете использовать комментарий CSS, чтобы удалить строку кода. По сути, теги комментариев делают раздел кода, который вы хотите игнорировать, невидимым для редактора.
Это отличный способ протестировать изменения в вашем коде без необходимости удалять и переписывать раздел снова и снова, когда вы пробуете новые методы. См. пример ниже.
Если свойство background-color закомментировано, значение голубого цвета не будет использоваться как часть предоставленного кода CSS, что приведет к следующему результату.
Теперь, если теги комментариев CSS снова удаляются из раздела кода;
Редактор кода без проблем вернется к чтению этого раздела.
Многострочные комментарии CSSКомментарии CSS не должны ограничиваться одной строкой. Вы можете разместить комментарий на нескольких строках, используя те же открывающие и закрывающие теги, которые вы видели выше. Помните, что таблица стилей CSS будет считать все, что находится после открывающего тега комментария, частью содержимого комментария. Пока вы не закроете этот тег комментария, он не будет знать, где остановиться.
Вот почему возможны многострочные комментарии.
Это также обеспечивает некоторую столь необходимую ясность. Подумайте, есть ли у вас четыре или пять пунктов, которые нужно сделать в разделе кода. Вы можете ввести каждый как отдельный комментарий CSS. Хотя это было бы немного утомительно для обеих сторон. Вместо этого разбиение комментария на несколько строк облегчит написание и чтение в редакторе.
В приведенном ниже примере комментарий добавлен на семь строк. Он имеет открывающий и закрывающий набор с размещенным внутри содержимым.
Это делает комментарий легко читаемым и понятным, и он умещается в компактной области, а не растягивается на одной строке.
Обратите внимание, что это можно использовать в самом коде, как отдельный комментарий! Как и в предыдущем примере, где свойство background-color было закомментировано, также можно просто закомментировать большие участки кода. Просто будьте осторожны, чтобы добавить некоторые контекстные комментарии относительно того, почему вы решили сделать это для себя или других, работающих за вами.
В приведенном выше примере многострочный комментарий был разбит на семь отдельных строк. Открывающий и закрывающий теги мы разместили на отдельных строках в этом дизайне. Этого не должно было быть. Открывающий тег можно было разместить в строке с первым предложением, так же как закрывающий тег отлично работал бы в той же строке, что и последнее предложение.
Структура этого комментария CSS была выбором дизайна. Это может быть очень важным элементом того, как вы используете силу комментариев. Например, если вы работали вместе с другими дизайнерами, и комментарии, которые вы добавили, полностью отличались от их дизайна.
Их можно читать и работать с ними, но было бы лучше рассмотреть общую структуру комментариев CSS, используемую для работы в тандеме со всеми остальными. Чтобы проиллюстрировать это на практике, взгляните на пример ниже. Вы можете увидеть три отдельных комментария к одному и тому же простому набору кода.
Вы можете видеть, что первый комментарий очень прямой и простой, и все в одной строке. Второй комментарий CSS разбит более подробно и состоит из нескольких строк. Последняя запись комментария не только разбивает несколько строк для деталей, но также добавляет аргументацию кода, а также запись имени/даты в конце.
Некоторым может показаться, что этот поток подробностей помогает со всеми комментариями в рабочей среде. Другие могут счесть это не только чрезмерным, но и вредным для использования комментария. Вот почему это отличная идея, чтобы обсудить с другими стиль и структуру ваших комментариев. Вы можете обнаружить, что все три приведенных выше примера можно использовать в проекте. Это просто вопрос того, как сделать сам комментарий полезным. Если вы перечитаете комментарий и обнаружите, что он недостаточен или сбивает с толку, есть большая вероятность, что это сделают и другие.
Подробнее: вперед и вверх! Работа в области веб-дизайна дает множество возможностей для развития различных навыков.
Вы можете пойти еще дальше, используя концепции дизайна UI/UX, чтобы действительно воплотить в жизнь весь дизайн-пакет. Какой бы путь вы ни выбрали, комментарии будут ключевым аспектом. Знание того, как добавлять комментарии к своей работе, важно не только для аспекта общения, но и для вашей собственной заботы.
Понимание того, почему вы решили реализовать одну идею, а не другую, поможет вам сделать лучший выбор в будущем. Подумайте, добавили ли вы комментарий, в котором объяснялось, что вы выбрали вариант А вместо варианта Б просто потому, что не знали, как использовать вариант Б. Позже вы можете обнаружить, что теперь можете использовать вариант Б и с большей эффективностью.
____________________________________________________________________________________
Зачем останавливаться только на веб-разработке? Сила программирования дает людям возможность делать еще больше со своими проектами.