Комментарии в CSS | CSS справочник
CSS комментарии
Комментарий в CSS начинается с символов /* и заканчивается символами */ и может занимать несколько строк, его содержимое никак не отражается на разметку и игнорируется браузерами.
/*Комментарий 1*/
/*
Многострочный
Комментарий
!!!
*/Комментарии в CSS, могут применяться в разных случаях, напрмер:
- Комментарии нужны, чтобы делать пояснения по поводу применения CSS свойств (Помогает разобраться в большом объеме кода)
nav p{ padding-left:20px;/*Отступ слева для параграфов в навигации*/ } - Для разделения структурных блоков (если вы пишите весь css в одном файле, удобно размечать начало каждого следующего блока с помощью комментариев например:
/*Шапка*/ ... /*Навигация*/ ... /*Тело*/ ... /*Подвал*/ Отключение части CSS свойст при отладке (если вы хотите посмотреть как будет смотреться блок, если вы поменяете пару свойств, но при этом не хотите переписывать код заново, если вы решили вернуть всё как было, то целесообразно просто закоментировать необходимые CSS свойства)
p{ /* color:red;Параграф красного цвета (было)*/ color:green;/*Параграф зеленого цвета (стало)*/ }
Коментарии в CSS увеличивают объем текста
Как вы понимаете, чем больше комментариев в CSS вы используете, тем более понятней становится ваш код и вам легче в нем ориентироваться. Но увеличение колличества символов в CSS файле влечет за собой увеличение размера файла, а следовательно сайт будет загружаться медленней. По этому комментарии используются только в процессе разработки и отладки. Когда верстка сайта готова, необходимо
- Первый для работы
- Второй для загрузки на сервер.
Вы также можете продолжать работать с рабочим файлом, но при каждой выгрузке минимизировать его и загружать на сервер сжатый файл.
Примечание: Нельзя вложить один комментарий в другой. Это случается, когда вы временно отключаете css свойство у 1 блока, а потом хотите закомментировать блок полностью, но внутри уже есть вложенный комментарий. Любой текстовый редактор должен вам указать на ошибку, выделив цветом тот кусок css кода который действительно будет закоментирован
/*
p {
color: red; /* цвет текста в абзацах - красный */
background-color: green;
}
*/
Базовый синтаксис 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 — зелёным. Какой цвет текста будет на странице?
- красный.
- синий.
- зелёный.
- чёрный.
- установленный в браузере по умолчанию.
2. В какой строке кода содержится ошибка?
- p { text-align: center; color: #000000 }
- div { color: red; font-size: 11pt; }
- title { color: #fc0; margin: 10px; }
- p { color: green; color; }
- html { float: left; }
3. Какая ошибка содержится в следующем коде?
/* ———————————
div {
color: #fc0; /* Цвет теска */
margin: 10px; /* Поля вокруг элемента */
float: left /* Обтекание по правому краю */
}
——————————— */
- Опечатка в тексте комментария.
- Вложенные комментарии.
- Нет точки с запятой.
- Недопустимые значения у стилевых свойств.
- Лишние переносы в коде.
4. В какой строке содержится корректный синтаксис?
- body:color=black
- body{color:black}
- {body;color:black}
- {body:color=black}
- body{color=black}
5. Как правильно вставить комментарий в CSS-файл?
- ‘ комментарий
- // комментарий
- // комментарий //
- /* комментарий */
- <!— комментарий —>
Ответы
1. синий.
2. p { color: green; color; }
3. Вложенные комментарии.
4. body{color:black}
5. /* комментарий */
Комментарии в CSS
Комментарии в CSS, также как и в любых других программных кодах, для комментирования участков кода: секций или отдельных свойств. Это делает код более понятным, что позволяет несколько сократить время разработки и отладки файлов стилей.
Синтаксис
Содержимое комментариев, браузеры игнорируют.
Допустимые значения
| Значение по умолчанию | |
|---|---|
| Применимо | ко всем элементам |
| Наследование | нет |
| Соответсвие версиям CSS | CSS 1, CSS 2, CSS 2.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 рекомендуется удалять все «лишнее», в том числе комментарии, чтобы максимально сократить размер файла.
По теме
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>Результат в браузере
Комментарии в CSS
Последнее обновление: 25.01.2011
Комментарии в CSS, также как и в любых других программных кодах, для комментирования участков кода: секций или отдельных свойств. Это делает код более понятным, что позволяет несколько сократить время разработки и отладки файлов стилей.
Синтаксис
Содержимое комментариев, браузеры игнорируют.
Допустимые значения
| Значение по умолчанию | |
|---|---|
| Применимо | ко всем элементам |
| Наследование | нет |
| Соответсвие версиям CSS | CSS 1, CSS 2, CSS 2.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
Комментировать ваш код CSS — очень хорошая привычка в работе. Когда работа свежая, она живет в вашей памяти, все логические связи на своих местах. Однако если вам придется вернуться к коду через год, будет не так просто. Не говоря уже о случаях, когда над проектом работает команда программистов, и велика вероятность того, что в ваш код заглянет кто-то кроме вас.
Комментарии служат двум основным целям:
• Заметки и напоминаниями
Комментарии позволяют оставлять себе заметки о том, для чего служат определенные разделы Вашего файла стилей. Довольно часто и вольнонаемным, и офисным веб-разработчикам приходится возвращаться к коду CSS, с которым они работали более полугода назад, и в этом случае комментарии помогут быстро вспомнить, что именно делает конкретная часть кода.
• «Флажки» до и после проблемных участков кода
Код, окруженный разметкой комментария перестает выполняться. Так как код CSS в широком смысле читается сверху вниз, можно вычислить расположение проблемного кода, закомментировав и отключив таким образом по очереди разные части разметки, и так найти причину возникших сложностей.
Содержимое, разметка и код в комментариях не отображаются на веб-странице, но могут быть прочитаны кем угодно при доступе к исходному коду. Это легко сделать в любом браузере.
Синтаксис комментариев CSS
/* Так записывается комментарий в коде CSS */
Комментарии CSS также могут быть разбиты на несколько строк:
/* p { font-color: black; } hr { color: red; } обе строки выше будут проигнорированы браузером, как и эта строка с текстом */
Стоит подчеркнуть, что как и комментарии в коде HTML, комментарии в коде CSS должны быть полезными и по делу. В дополнение к очевидным причинам для этого, некоторые грубые слова в файлах стилей могут привести к проблемам с отображением веб-сайта на компьютерах с излишне чувствительными фильтрами.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии в HTML-, CSS-, JS- и PHP-коде
Эту статью я начну с того, для чего нужны комментарии. Предположим, что вы разрабатываете модуль со сложной структурой. Или делаете верстку с множеством вложений элементов. В таких случаях некоторые участки кода лучше всего как-то помечать – для этого и существуют комментарии.
Сейчас я подробно покажу четыре типа комментариев, точнее, все их виды для четырех разных кодов.
Комментарии в HTML-разметке
Для того чтобы добавить комментарий в HTML-разметку, используем:
<!-- Текст, код или прочее -->Все, что стоит в этих тегах, не видно на экране, но доступно для просмотра в исходном коде.
Комментарии в CSS-стилях
Для того чтобы добавить комментарий в CSS-стили, используем:
/* Текст, код или прочее */ Все, что стоит в этих тегах, не учитывается при формировании стилей, но доступно для просмотра в самом файле стилей.
Комментарии в JavaScript-коде
Для добавления комментариев в JavaScript существуют два их типа.
Первый тип:
// Текст, код или прочееВторой тип:
/* Текст, код или прочее */ Все, что стоит в этих тегах, не учитывается при выполнении скрипта, но доступно для просмотра в самом файле JavaScript.
Комментарии в PHP-коде
Этот язык программирования, в отличие от предыдущих, имеет 3 типа комментариев.
Первый тип:
// Текст, код или прочее Второй тип:
/* Текст, код или прочее */И третий тип:
# Текст, код или прочееВсе, что стоит в этих тегах, не учитывается при выполнении скрипта и видно только в самом файле PHP.
Обратите внимание!
1. Не рекомендуется делать двойное вложение комментариев. Например,
/* /* Мой код */ */ выведет вам ошибку.
2. Комментарии, которые пишутся через /* */ и <!— —>, могут писаться в несколько строк:
/*
Это
Мой
Код
*/ В остальных же случаях для каждой строки нужно писать специальный символ комментария, например:
// Это
// Мой
// Код В противном случае вы также обнаружите ошибку.
CSS Comments — SitePoint
Каждый язык программирования позволяет добавлять примечания и другие подсказки, которые помогут вам понять, что происходит. Не весь CSS так понятен на первый взгляд, как, скажем, что-то вроде font-size: 20px , поэтому некоторые разделы кода могут выиграть от добавления заметок или других подсказок поблизости. Вот пример:
.cf {
масштабирование: 1; / * для IE6 и IE7 * /
} Комментарий в этой строке кода — это часть, которая говорит «для IE6 и IE7», и идентифицируется как таковая по предыдущей обратной косой черте, за которой следует звездочка, а также звездочка и обратная косая черта в конце.
Мы можем добавить столько из них в нашу таблицу стилей, сколько захотим, и рекомендуется использовать комментарии CSS, чтобы помочь идентифицировать части любой таблицы стилей, которые могут быть трудными для понимания с беглого взгляда. Используя комментарии CSS, чтобы сделать наши таблицы стилей более удобочитаемыми, CSS будет легче поддерживать в будущем.
При необходимости комментарий CSS может занимать несколько строк. Все, что находится между открывающим и закрывающим символами комментария, будет игнорироваться браузером, как и сами символы комментария.Часто в файле CSS можно встретить что-то вроде этого:
/ ***************************
****************************
Это стили для
раздел заголовка
****************************
*************************** / Обратите внимание, что в этом примере я не только включил открывающую и закрывающую звездочку и обратную косую черту, но также добавил некоторые дополнительные символы звездочки, охватывающие несколько строк. Это позволяет легко найти комментарий при прокрутке файла CSS.Добавьте такие заголовки разделов в CSS, чтобы упорядочить его в читаемые связанные фрагменты кода.
К сожалению, в CSS нет простого способа представить действительный однострочный комментарий, в котором используется только комбинация начальных символов комментария. Например, в JavaScript вы можете закомментировать одну строку кода следующим образом:
// Это комментарий JavaScript Это полезно в JavaScript, потому что позволяет легко обнулить всю строку кода или добавить полезный комментарий, состоящий всего из двух символов (обратная косая черта).Но в CSS необходимо использовать как открывающие, так и закрывающие символы, чтобы указать границы любых комментариев.
Однако для быстрых временных исправлений допустимо создать своего рода фальшивый комментарий CSS, применив принцип, который мы обсуждали в предыдущем разделе об ошибках CSS. Допустим, у нас есть следующий CSS:
.center-global {
максимальная ширина: 1020 пикселей;
маржа: 0 авто;
} Допустим, мы хотим временно удалить первую строку (объявление max-width ).Мы могли сделать это:
.center-global {
/ * максимальная ширина: 1020 пикселей; * /
маржа: 0 авто;
} Это работает нормально, но более быстрый способ добиться того же результата — просто поместить несколько случайных символов в начало строки, например:
.center-global {
AAAAmax-width: 1020 пикселей;
маржа: 0 авто;
} Это быстро и эффективно, но никогда не оставляйте свой CSS в таком виде на действующем веб-сайте. Это недействительный CSS, и его следует использовать только при разработке для быстрой отладки.
.Искусство комментариев | CSS-уловки
Я считаю, что комментирование кода важно. Больше всего я считаю, что комментарии понимаются неправильно. На днях я написал в Твиттере, что «я слышу противоречивые мнения о том, следует ли вам писать комментарии. Но я получаю благодарность от младших разработчиков за их написание, поэтому я продолжу ». Ответы, которые я получил, были разными, но что бросилось в глаза, так это то, что для каждого человека, согласившегося с необходимостью комментариев, у всех были разные причины верить в это.
Комментирование — вещь более тонкая, чем мы думаем. Нет никакой номенклатуры для комментариев (хотя она и должна быть), но объединение всех комментариев в одну кучу — это чрезмерное упрощение. Пример из этого комикса, который был написан в Твиттере, верен:
От AbstrusegooseЯ думаю, что именно здесь кроется много неправильных представлений о комментариях. Об этом говорится в книге Роберта Мартина «Чистый код»: в комментариях нет необходимости, потому что код должен быть самодокументированным.Если вы считаете, что комментарий необходим, вам следует переписать его, чтобы он был более разборчивым. Я согласен и не согласен с этим. В процессе написания комментария вы часто можете найти вещи, которые можно было бы написать лучше, но это не вариант «или / или». Возможно, я все еще смогу переписать этот код, чтобы он был более самодокументированным, а также написать комментарий по следующей причине:
Код может описать как, но не может объяснить почему.
Это не новая концепция, но это обычная тема, которую я замечаю в полезных комментариях, которые мне попадались.Возможность передать то, что код не может или не может кратко.
Все это говорит о том, что нет ни одного правильного способа или одной причины написать комментарий. Чтобы лучше усвоить информацию, давайте рассмотрим некоторые из множества полезных типов комментариев, которые могут служить разной цели, а затем рассмотрим шаблоны, которых мы, возможно, захотим избежать.
Хорошие отзывы
Почему
В этой категории можно разместить множество примеров хороших комментариев.Код объясняет, какой компьютер вам нужен
.Учебник CSS
CSS — это язык, который мы используем для стилизации HTML-документа.
CSS описывает, как должны отображаться элементы HTML.
Это руководство научит вас CSS от начального до продвинутого.
Начните изучать CSS прямо сейчас »примеров в каждой главе
Это руководство по CSS содержит сотни примеров CSS.
С помощью нашего онлайн-редактора вы можете редактировать CSS и нажимать кнопку, чтобы просмотреть результат.
Пример CSS
тело {цвет фона: голубой;
}
h2
{
цвет белый;
выравнивание текста: центр;
}
п.
{
семейство шрифтов: вердана;
размер шрифта: 20 пикселей;
}
Щелкните кнопку «Попробуйте сами», чтобы увидеть, как это работает.
Примеры CSS
Учитесь на более чем 300 примерах! С помощью нашего редактора вы можете редактировать CSS и нажимать на кнопку, чтобы просмотреть результат.
Перейти к примерам CSS!
Использование меню
Мы рекомендуем читать это руководство в последовательности, указанной в меню.
Если у вас большой экран, меню всегда будет слева.
Если у вас маленький экран, откройте меню, щелкнув значок верхнего меню ☰.
Шаблоны CSS
Мы создали для вас несколько адаптивных шаблонов W3.CSS.
Вы можете изменять, сохранять, публиковать и использовать их во всех своих проектах.
бесплатных шаблонов CSS!
CSS-упражнения и викторина
Проверьте свои навыки CSS в W3Schools!
Начать упражнения по CSS!
Начать викторину по CSS!
Ссылки CSS
На W3Schools вы найдете полные ссылки CSS всех свойств и селекторов с синтаксисом, примерами, поддержкой браузера и многим другим.
Экзамен CSS — Получите свой диплом!
Интернет-сертификация W3Schools
Идеальное решение для профессионалов, которым необходимо совмещать работу, семью и карьеру.
Уже выдано более 25 000 сертификатов!
Получите сертификат »
Сертификат HTML документирует ваши знания HTML.
Сертификат CSS документирует ваши знания в области CSS.
Сертификат JavaScript документирует ваши знания JavaScript и HTML DOM.
Сертификат Python документирует ваши знания Python.
Сертификат jQuery подтверждает ваши знания о jQuery.
Сертификат SQL документирует ваши знания SQL.
Сертификат PHP подтверждает ваши знания PHP и MySQL.
Сертификат XML документирует ваши знания XML, XML DOM и XSLT.
Сертификат Bootstrap документирует ваши знания о среде Bootstrap.
.
Как добавить CSS
Когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с информация в таблице стилей.
Три способа вставки CSS
Есть три способа вставить таблицу стилей:
- Внешний CSS
- Внутренний CSS
- Встроенный CSS
Внешний CSS
С внешняя таблица стилей, вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!
Каждая страница HTML должна содержать ссылку на файл внешней таблицы стилей внутри элемент внутри раздела заголовка.
Пример
Внешние стили определяются в элементе в разделе
HTML-страницы:Это заголовок
Это абзац.