Содержание

Комментарии в CSS | CSS справочник

CSS комментарии

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

/*Комментарий 1*/

/*
 Многострочный
 Комментарий
 !!!
*/

Комментарии в CSS, могут применяться в разных случаях, напрмер:

  • Комментарии нужны, чтобы делать пояснения по поводу применения CSS свойств (Помогает разобраться в большом объеме кода)
    nav p{
 padding-left:20px;/*Отступ слева для параграфов в навигации*/
}

     

  • Для разделения структурных блоков (если вы пишите весь css в одном файле, удобно размечать начало каждого следующего блока с помощью комментариев например: 
    /*Шапка*/
  ...
/*Навигация*/
  ...
/*Тело*/
  ...
/*Подвал*/

     

  • Отключение части CSS свойст при отладке (если вы хотите посмотреть как будет смотреться блок, если вы поменяете пару свойств, но при этом не хотите переписывать код заново, если вы решили вернуть всё как было, то целесообразно просто закоментировать необходимые CSS свойства)

    p{
/* color:red;Параграф красного цвета (было)*/
   color:green;/*Параграф зеленого цвета (стало)*/
}

     

Коментарии в CSS увеличивают объем текста

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

минимизировать CSS файл с помощью специальных сервисов, либо библиотек. В результате у вас будет 2 css файла.

  • Первый для работы
  • Второй для загрузки на сервер.

Вы также можете продолжать работать с рабочим файлом, но при каждой выгрузке минимизировать его и загружать на сервер сжатый файл.

 

Примечание: Нельзя вложить один комментарий в другой. Это случается, когда вы временно отключаете css свойство у 1 блока, а потом хотите закомментировать блок полностью, но внутри уже есть вложенный комментарий. Любой текстовый редактор должен вам указать на ошибку, выделив цветом тот кусок css кода который действительно будет закоментирован

/*
p {
  color: red; /* цвет текста в абзацах - красный */
  background-color: green;
}
*/

 

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

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

Синтаксис

Содержимое комментариев, браузеры игнорируют.

Допустимые значения

Значение по умолчанию
Применимоко всем элементам
Наследованиенет
Соответсвие версиям CSSCSS 1, CSS 2, CSS 2.1
Поддерживается браузерами
  • Internet Explorer 6 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример


.block {
height: 150px;
width: 120px;
padding-left: 30px
background: blue;

}
* html .block {
width: 150px;
}

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— div { width: 100px; /* ширина блока */ height: 100px; /* высота блока */ background: blue; /* цвет блока */ } —> </style> </head> <body> <div></div> </body> </html> Сделай код и жми тут

Результат:
большой полигон

Заметки

Помните, что дополнительный код (символы) — это дополнительный вес файла стилей, что замедляет скорость загрузки страницы. Используйте комментарии только там, где они действительны необходимы. В рабочей версии CSS рекомендуется удалять все «лишнее», в том числе комментарии, чтобы максимально сократить размер файла.

По теме

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

Последнее обновление: 25.01.2011

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

Синтаксис

Содержимое комментариев, браузеры игнорируют.

Допустимые значения

Значение по умолчанию
Применимоко всем элементам
Наследованиенет
Соответсвие версиям CSSCSS 1, CSS 2, CSS 2.1
Поддерживается браузерами
  • Internet Explorer 6 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример


.block {
height: 150px;
width: 120px;
padding-left: 30px
background: blue;
}
* html .block {
width: 150px;
}

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— div { width: 100px; /* ширина блока */ height: 100px; /* высота блока */ background: blue; /* цвет блока */ } —> </style> </head> <body> <div></div> </body> </html> Сделай код и жми тут

Результат:
большой полигон

Заметки

Помните, что дополнительный код (символы) — это дополнительный вес файла стилей, что замедляет скорость загрузки страницы. Используйте комментарии только там, где они действительны необходимы. В рабочей версии CSS рекомендуется удалять все «лишнее», в том числе комментарии, чтобы максимально сократить размер файла.

По теме

Базовый синтаксис CSS | htmlbook.ru

Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.

Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 5.1 показаны две разновидности оформления селекторов и их правил.

Пример 5.1. Использование стилей

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Заголовки</title>
  <style> 
   h2 { color: #a6780a; font-weight: normal; } 
   h3 { 
    color: olive; 
    border-bottom: 2px solid black; 
   }
  </style>
 </head>
 <body>
  
  <h2>Заголовок 1</h2>
  <h3>Заголовок 2</h3>
  
 </body>
</html>

В данном примере свойства селектора h2 записаны в одну строку, а для селектора h3 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика.

Правила применения стилей

Далее приведены некоторые правила, которые необходимо знать при описании стиля.

Форма записи

Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, как это показано в примере 5.2.

Пример 5.2. Расширенная форма записи

td { background: olive; }
td { color: white; }
td { border: 1px solid black; }

Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 5.3).

Пример 5.3. Компактная форма записи

td {
  background: olive;
  color: white;
  border: 1px solid black;
}

Эта форма записи более наглядная и удобная в использовании.

Имеет приоритет значение, указанное в коде ниже

Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже (пример 5.4).

Пример 5.4. Разные значения у одного свойства

p { color: green; }
p { color: red; }

В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

На самом деле такой записи лучше вообще избегать и удалять повторяющиеся значения. Но подобное может произойти случайно, например, в случае подключения разных стилевых файлов, в которых содержатся одинаковые селекторы.

Значения

У каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.

Комментарии

Комментарии нужны, чтобы делать пояснения по поводу использования того или иного стилевого свойства, выделять разделы или писать свои заметки. Комментарии позволяют легко вспоминать логику и структуру селекторов, и повышают разборчивость кода. Вместе с тем, добавление текста увеличивает объём документов, что отрицательно сказывается на времени их загрузки. Поэтому комментарии обычно применяют в отладочных или учебных целях, а при выкладывании сайта в сеть их стирают.

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию (пример 5.5).

Пример 5.5. Комментарии в CSS-файле

/* 
  Стиль для сайта htmlbook.ru
  Сделан для ознакомительных целей
*/
  
div {
  width: 200px; /* Ширина блока */
  margin: 10px; /* Поля  вокруг элемента */
  float: left; /* Обтекание по правому краю */
}

Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии недопустимы.

Вопросы для проверки

1. Люба подключила к HTML-документу одновременно два стилевых файла — style1.css и style2.css. Причём в файле style2.css первой строкой импортируется еще один файл с именем style3.css. В файле style1.css цвет текста задается красным, в style2.css — синим, а в style3.css — зелёным. Какой цвет текста будет на странице?

  1. красный.
  2. синий.
  3. зелёный.
  4. чёрный.
  5. установленный в браузере по умолчанию.

2. В какой строке кода содержится ошибка?

  1. p { text-align: center; color: #000000 }
  2. div { color: red; font-size: 11pt; }
  3. title { color: #fc0; margin: 10px; }
  4. p { color: green; color; }
  5. html { float: left; }

3. Какая ошибка содержится в следующем коде?

/* ———————————
div {
color: #fc0; /* Цвет теска */
margin: 10px; /* Поля вокруг элемента */
float: left /* Обтекание по правому краю */
}
——————————— */

  1. Опечатка в тексте комментария.
  2. Вложенные комментарии.
  3. Нет точки с запятой.
  4. Недопустимые значения у стилевых свойств.
  5. Лишние переносы в коде.

4. В какой строке содержится корректный синтаксис?

  1. body:color=black
  2. body{color:black}
  3. {body;color:black}
  4. {body:color=black}
  5. body{color=black}

5. Как правильно вставить комментарий в CSS-файл?

  1. ‘ комментарий
  2. // комментарий
  3. // комментарий //
  4. /* комментарий */
  5. <!— комментарий —>

Ответы

1. синий.

2. p { color: green; color; }

3. Вложенные комментарии.

4. body{color:black}

5. /* комментарий */

seodon.ru | Учебник CSS — Комментарии в CSS

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

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

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

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

Пример создания комментариев в 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=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" "http://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>

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

Комментарии в HTML-, CSS-, JS- и PHP-коде

Эту статью я начну с того, для чего нужны комментарии. Предположим, что вы разрабатываете модуль со сложной структурой. Или делаете верстку с множеством вложений элементов. В таких случаях некоторые участки кода лучше всего как-то помечать – для этого и существуют комментарии.

Сейчас я подробно покажу четыре типа комментариев, точнее, все их виды для четырех разных кодов.

Комментарии в HTML-разметке

Для того чтобы добавить комментарий в HTML-разметку, используем:

<!-- Текст, код или прочее -->

Все, что стоит в этих тегах, не видно на экране, но доступно для просмотра в исходном коде.

Комментарии в CSS-стилях

Для того чтобы добавить комментарий в CSS-стили, используем:

/* Текст, код или прочее */

Все, что стоит в этих тегах, не учитывается при формировании стилей, но доступно для просмотра в самом файле стилей.

Комментарии в JavaScript-коде

Для добавления комментариев в JavaScript существуют два их типа.

Первый тип:

// Текст, код или прочее

Второй тип:

/* Текст, код или прочее */

Все, что стоит в этих тегах, не учитывается при выполнении скрипта, но доступно для просмотра в самом файле JavaScript.

Комментарии в PHP-коде

Этот язык программирования, в отличие от предыдущих, имеет 3 типа комментариев.

Первый тип:

// Текст, код или прочее

Второй тип:

/* Текст, код или прочее */

И третий тип:

# Текст, код или прочее

Все, что стоит в этих тегах, не учитывается при выполнении скрипта и видно только в самом файле PHP.

Обратите внимание!

1. Не рекомендуется делать двойное вложение комментариев. Например,

/* /* Мой код */ */

выведет вам ошибку.

2. Комментарии, которые пишутся через /* */ и <!— —>, могут писаться в несколько строк:

/* 
Это 
Мой 
Код 
*/

В остальных же случаях для каждой строки нужно писать специальный символ комментария, например:

// Это 
// Мой 
// Код

В противном случае вы также обнаружите ошибку.

В поисках идеальной системы комментирования / Хабр

Каждый день в рунете создается порядка 3 тысяч новых сайтов. Владельцы стремятся как можно быстрее раскрутить свой сайт и пробиться в топы. Для этого существуют разные способы и один из них — комментарии. Комментарии позволяют создавать сообщества, постоянную аудиторию, которая со временем начинает привлекать новых клиентов. На сегодняшний день существует множество систем комментирования, но как выбрать самую подходящую для вашего сайта?

Я выбрал несколько самых популярных систем комментирования, сравнил по множеству параметров и сделал обзор каждой.

Основные возможности

Для сравнения были выбраны: Виджет Комментариев ВКонтакте, Facebook Comments, Disqus, Cackle, Livefyre и IntenseDebate. Это самые популярные системы, которые я встречаю на сайтах или в поисковиках.

Обзорная таблица всех основных возможностей имеет примерно следующий вид:

Возможность ВК комментарии FB comments Disqus Livefyre IntenseDebate Cackle
Скорость загрузки быстро медленно среднее быстро медленно быстро
Кнопка Like да да да да да да
Вставка картинок, видео да нет да да нет да
Доп. модераторы да да да да да да
Realtime обновление да да да да нет да
Подгонка размера нет нет да частично да да
Древовидность нет нет да да да да
Премодерация нет да да да да да
Akismet (спам защита) нет нет да нет да да
Бан юзера/IP только юзера только юзера да да да да
Анонимная авторизация нет нет да да нет да
Разные темы нет нет частично нет частично да
Редактирование CSS нет нет нет частично да да
UI CSS редактор нет нет нет нет нет платно
Редактирование HTML нет нет нет нет нет нет
Редактор заголовков нет нет нет нет нет да
Whitelabel нет нет нет да нет платно
Индексация поисковиками нет да частично нет нет частично
SSO нет нет платно да нет платно
API нет нет да да да да
Модерация на сайте нет нет частично да частично платно

Разберем некоторые возможности, подробнее.
Скорость загрузки

Для анализа скорости я сделал сайт, на главной странице которого, размещены все системы комментирования. При загрузке страницы, в javascript-е по timeout-у запускается функция, которая проверяет высоту контейнера с каждой системой комментирования. Если высота больше 300px, значит система комментирования загружена, сообщение об этом идет на сервер и суммируется с предыдущим значением. В итоге после запуска Selenium IDE на нескольких машинах, было установлено что:
  • ВКонтакте загружаются в среднем секунду
  • FB comments около 1.6 секунды
  • Disqus 1.4 секунды
  • Livefyre 600 миллисекунд
  • IntenseDebate чуть больше 2 секунду
  • Cackle 850 миллисекунду

Данное тестирование не претендует быть абсолютно правильным, так как много зависит от скорости подключения, но в среднем оно отражает реальные результаты. Сайт http://www.kommenti.com и сам отчет http://www.kommenti.com/summary.
Вставка картинки, видео

Все просто, вставляем ссылку на картинку (png, jpg) и несколько ссылок на видео c YouTube, Vimeo, ВКонтакте. В этом тесте порадовал Cackle, он распознал все картинки и видео, даже RuTube.
Подгонка размера

Подгонка виджета под размер контейнера никаких проблем не вызвала у Disqus, IntenseDebate и Cackle. Остальные системы требуют указания ширины (при создании) или выезжают за рамки.
Анонимная авторизация

Часто бывает ситуация, когда пользователь хочет отставить комментарий, но у него нет аккаунта в социальной сети или же он не хочет передавать свои данные. В этом случае он может войти как гость и оставлять комментарии без повторного ввода своих данных. Disqus, Livefyre и Cackle позволяют это делать, но последний для авторизации требует распознавания Google ReCAPTCHA, что несомненно является минусом.
Возможность менять css

Системы комментирования работающие через iframe, а это ВКонтакте, Facebook и Disqus, не позволяют менять css. Livefyre не имеет соответствующего поля в панели администрирования. У двух оставшихся IntenseDebate и Cackle таких проблем нет, можете подгонять css через FireBug или сохранять его в панели администрирования.

PS: UI css редактора нет ни в одной системе кроме Cackle, но он платный.

Whitelabel

Whitelabel — это возможность использовать продукт без копирайта (ссылок, баннеров или иконок компании). Есть только в Cackle, но платно.
Индексация поисковиками

На сегодняшний день, Google научился индексировать Facebook комментарии. Так же на сайте Disqus одна из возможностей это индексация в Google out-of-the-box, то есть без всякой дополнительной работы гемора. Но похоже, что в реальности это не работает, по крайней мере после запуска Disqus 2012 комментарии на главной странице (disqus.com) до сих пор не были проиндексированы. В остальных системах, например Cackle, придется сохранять комментарии, через API, в свою БД и отрисовывать в HTML.
SSO

Единая авторизация, то есть возможность авторизации и комментирования пользователей зарегистрированных на вашем сайте. Порадовал Livefyre, он предоставляет данную возможность абсолютно бесплатно, в отличии от остальных систем.

Теперь не много подробнее о каждой системе.

ВКонтакте и Facebook комментарии


Это два очень похожих и наверное самых распространенных виджета комментариев. Несмотря на довольно скупой функционал, эти системы имеют ряд неоспоримых преимуществ перед другими:
  • Пользователю не надо входить заново, если он уже авторизован в ВКонтакте или Facebook
  • Автоматический кросспостинг комментария в социальную сеть
  • Стабильная работа 24 часа в сутки

Последний пункт справедлив только для ВКонтакте виджета, а вот Facebook у меня подгружается не всегда.
Disqus


Это наверно самая старая система комментирования, была основана в 2007 году. Имеет достаточно широкий и мощный функционал. С помощью их API, можно реализовывать практически любые интеграции.

Из недостатков это частые глюки. К примеру, после сохранения настройки, они не применяются сразу, или комментарии после удаления остаются на странице.

Стоит отметить, что в 2012 году вышла новая версия виджета. Ребята перенесли Disqus в iframe, тем самым сделав невозможным переопределение дизайна (css), что конечно является большим минусом для веб-мастеров.

Livefyre


Отличная система, в бесплатной версии имеет много возможностей. Например SSO (Единую авторизацию), Callback публикации комментария (при публикации вызывается сторонний сервис). Так же на мой взгляд у Livefyre не плохой дизайн.

Основная идея Livefyre — это платная интеграция в крупные интернет порталы (у них нет тарифов). Цена начинается от 3000$ в месяц.

Интересной особенностью является то, что для создания виджета ваш сайт должен быть online, то есть при создании он пингуется.

IntenseDebate


Об этом сервисе я знаю довольно не много и честно говоря не самое лучшее. Например то, что он очень медленно работает, не поддерживает Realtime, не распознает картинки и видео. Почему по Alexa у него достаточно высокий рейтинг остается загадкой.

Хотя и тут есть несколько приятных возможностей. Например в настройках виджета, вы можете добавить или отменить практически любую фичу — рейтинг, подписка, RSS, кнопки логина.

Cackle


Система комментирования Cackle появилась недавно (2011 год), но почти за 1.5 года, смогла завоевать большу́ю часть рунета. По публичным данным системой пользуются более чем 17 000 сайтов. Основное преимущество перед остальными, практически все провайдеры авторизации как Российские так и зарубежные.

Из плюсов следует отметить гибкость, простоту в настройке и установке, возможность легко менять дизайн (например их css вообще можно отменить, передав виджету параметр var mcNoStyle = true).

В заключении для полноты картины предлагаю вашему вниманию небольшой опрос.

Синтаксис

— это плохая практика комментировать отдельные строки CSS с помощью //?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

    .

    Комментарии JavaScript

    комментариев JavaScript можно использовать для объяснения кода JavaScript, и чтобы сделать его более читабельным.

    комментариев JavaScript также можно использовать для предотвращения выполнения, когда тестирование альтернативного кода.

    Однострочные комментарии

    Однострочные комментарии начинаются с // .

    Любой текст между // и концом строки будет игнорироваться JavaScript. (не будет выполняться).

    В этом примере перед каждой строкой кода используется однострочный комментарий:

    Пример

    // Смена заголовка:
    document.getElementById («myH»). innerHTML = «Моя первая страница»;

    // Изменить абзац:
    document.getElementById («myP»). innerHTML = «Мой первый абзац.»;

    Попробуй сам »

    В этом примере используется однострочный комментарий в конце каждой строки. чтобы объяснить код:

    Пример

    var x = 5; // Объявить x, присвоить ему значение 5
    вар у = х + 2; // Объявить y, присвоить ему значение x + 2

    Попробуй сам »

    Многострочные комментарии

    Многострочные комментарии начинаются с / * и заканчиваются * / .

    Любой текст между / * и * / будет игнорироваться JavaScript.

    В этом примере для объяснения кода используется многострочный комментарий (блок комментария):

    Пример

    / *
    Код ниже изменит
    заголовок с id = «myH»
    и абзац с id = «myP»
    на моей веб-странице:
    * /
    document.getElementById («myH»). innerHTML = «Моя первая страница»;
    документ.getElementById («myP»). innerHTML = «Мой первый абзац.»;

    Попробуй сам »

    Чаще всего используются однострочные комментарии.
    Комментарии блока часто используется для формальной документации.

    Использование комментариев для предотвращения казни

    Использование комментариев для предотвращения выполнения кода подходит для тестирование кода.

    Добавление // перед строкой кода изменяет строки кода с исполняемой строки на комментарий.

    В этом примере используется // для предотвращения выполнения одной из строк кода:

    Пример

    //document.getElementById(«myH»).innerHTML = «Моя первая страница»;
    document.getElementById («myP»). innerHTML = «Мой первый абзац.»;

    Попробуй сам »

    В этом примере используется блок комментариев для предотвращения выполнения несколько строк:

    Пример

    / *
    document.getElementById («myH»). innerHTML = «Моя первая страница»;
    документ.getElementById («myP»). innerHTML = «Мой первый абзац.»;
    * /

    Попробуй сам »
    .

    Как стилизовать и настроить форму комментариев WordPress? Кроме того, измените внешний вид комментариев с помощью CSS • Crunchify

    / * ## Комментарии

    ——————————- ————— * /

    .comment-response,

    .entry-pings,

    .entry-comments {

    color: # 444;

    отступ: 20 пикселей 45 пикселей 40 пикселей 45 пикселей;

    граница: сплошная 1px #ccc;

    переполнение: скрыто;

    фон: #fff;

    -webkit-box-shadow: 0px 0px 8px rgba (0,0,0,0.3);

    -moz-box-shadow: 0px 0px 8px rgba (0,0,0,0.3);

    box-shadow: 0px 0px 8px rgba (0,0,0,0.3);

    border-left: 4px solid # 444;

    }

    .entry-comments h4 {

    font-size: 30px;

    нижнее поле: 30 пикселей;

    }

    .comment-response h4,

    .entry-pings h4 {

    font-size: 20px;

    нижнее поле: 30 пикселей;

    }

    .comment-response {

    padding-bottom: 5%;

    поля: 20px 1px 20px 1px;

    граница слева: нет! Важно;

    }

    .комментарий-заголовок {

    цвет: # adaeb3;

    размер шрифта: 14 пикселей;

    нижнее поле: 20 пикселей;

    }

    .comment-header цитирует границу {

    : нет;

    стиль шрифта: обычный;

    размер шрифта: 16 пикселей;

    font-weight: жирный;

    }

    .comment-header .comment-meta a {

    граница: нет;

    цвет: # adaeb3;

    }

    li.comment {

    background-color: #fff;

    граница-правая: нет;

    }

    .комментарий-содержание {

    ясно: оба;

    переполнение: скрыто;

    }

    .comment-list li {

    font-size: 14px;

    отступ: 20 пикселей 30 пикселей 20 пикселей 50 пикселей;

    }

    .comment-list .children {

    margin-top: 40px;

    граница: сплошная 1px #ccc;

    }

    .comment-list li li {

    background-color: # f5f5f6;

    }

    .comment-list li li li {

    background-color: #fff;

    }

    .комментарий-ответ ввод [type = «email»],

    . комментарий-ответ ввод [type = «text»],

    . комментарий-ответ ввод [type = «url»] {

    ширина: 50%;

    }

    . Комментарий-ответ метка {

    дисплей: блок;

    поле справа: 12 пикселей;

    }

    .entry-comments .comment-author {

    margin-bottom: 0;

    позиция: относительная;

    }

    .entry-comments .comment-author img {

    border-radius: 50%;

    граница: сплошная 5px #fff;

    слева: -80 пикселей;

    верх: -5 пикселей;

    позиция: абсолютная;

    ширина: 60 ​​пикселей;

    }

    .вход-пинги. ответ {

    дисплей: нет;

    }

    .bypostauthor {

    }

    .form-allowed-tags {

    background-color: # f5f5f5;

    размер шрифта: 16 пикселей;

    отступ: 24 пикселя;

    }

    .comment-reply-link {

    курсор: указатель;

    цвет фона: # 444;

    граница: отсутствует;

    радиус границы: 3 пикселя;

    цвет: #fff;

    размер шрифта: 12 пикселей;

    font-weight: 300;

    межбуквенный интервал: 1 пиксель;

    отступ: 4px 10px 4px;

    преобразование текста: прописные буквы;

    ширина: авто;

    }

    .комментарий-ответ-ссылка: наведите указатель мыши {

    цвет: #fff;

    }

    . Комментарий-примечания {

    дисплей: нет;

    }

    .

    единиц CSS

    Единицы CSS

    CSS имеет несколько различных единиц для выражения длины.

    Многие свойства CSS принимают значения длины, такие как ширина , поле , отступ , размер шрифта и т. Д.

    Длина — это число, за которым следует единица длины, например 10 пикселей, 2em и т. Д.

    Между числом и единицей не может быть пробела. Однако, если значение 0 единицу можно не указывать.

    Для некоторых свойств CSS разрешена отрицательная длина.

    Есть два типа единиц длины: абсолютные и относительные.

    Абсолютные длины

    Абсолютные единицы длины фиксированы, и длина, выраженная в любой из них, будет отображаться как точно такой размер.

    Единицы абсолютной длины не рекомендуется использовать на экране, потому что размеры экрана сильно различаются. Однако их можно использовать, если известно средство вывода, например что касается макета печати.

    Блок Описание
    см см Попытайся
    мм миллиметров Попытайся
    в дюймов (1 дюйм = 96 пикселей = 2,54 см) Попытайся
    пикселей * пикселей (1 пиксель = 1/96 часть 1 дюйма) Попытайся
    пт точек (1pt = 1/72 от 1in) Попытайся
    шт картинок (1шт = 12 пт) Попытайся

    * Пикселей (пикселей) относительно устройства просмотра.Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) экрана устройства. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.

    Относительная длина

    Единицы относительной длины определяют длину относительно другого свойства длины. Относительные единицы длины лучше масштабируются между различными средами рендеринга.

    Блок Описание
    см Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта) Попробуйте
    из Относительно высоты по оси x текущего шрифта (используется редко) Попробуйте
    шасси Относительно ширины «0» (нуля) Попробуйте
    рем Относительно размера шрифта корневого элемента Попробуйте
    VW Относительно 1% ширины области просмотра * Попробуйте
    vh Относительно 1% высоты области просмотра * Попробуйте
    vmin Относительно 1% меньшего размера области просмотра * Попробуйте
    vmax Относительно 1% размера области просмотра * большего размера Попробуйте
    % Относительно родительского элемента Попробуйте

    Совет: Единицы em и rem отлично подходят для создания масштабируемый макет!
    * Viewport = размер окна браузера.Если окно просмотра 50 см широкий, 1vw = 0,5 см.

    Поддержка браузера

    Числа в таблице указывают первую версию браузера, полностью поддерживающую единица длины.

    Единица длины
    em, ex,%, px, cm, mm, in, pt, pc 1,0 3.0 1,0 1,0 3,5
    шасси 27,0 9,0 1,0 7,0 20,0
    рем 4,0 9,0 3,6 4,1 11,6
    vh, vw 20.0 9,0 19,0 6,0 20,0
    vmin 20,0 9,0 * 19,0 6,0 20,0
    vmax 26,0 Не поддерживается 19,0 7,0 20.0

    Примечание. Internet Explorer 9 поддерживает vmin с нестандартным именем: vm.

    .

    No related posts.