Комментарии CSS
Комментарии объясняют ваш CSS-код и помогают при последующем редактировании.
Они также удобны для временного отключения частей CSS.
Браузеры игнорируют комментарии, поэтому они никогда не отображаются на странице.
CSS-комментарий размещается внутри элемента <style>. Он начинается с /* и заканчивается на */.
Однострочный комментарий
Комментарий на отдельной строке над правилом.
<style> разместите комментарий вроде /* Это однострочный комментарий */ над правилом, делающим абзацы красными. Добавьте абзац в body.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* This is a single-line comment */
p {
color: red;
}
</style>
</head>
<body>
<p>Hello World! This paragraph is red.</p>
</body>
</html>
Комментарий после объявления
Комментарий можно добавить в любом месте, например после объявления.
<style> напишите правило, делающее абзацы красными, с комментарием вроде /* Устанавливает красный цвет текста */ после объявления цвета. Добавьте абзац в body.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<p>Hello World! This paragraph is red.</p>
</body>
</html>
Комментарий в середине строки
Комментарий может находиться в середине строки. Здесь red закомментирован, поэтому текст синий.
<style> напишите правило цвета абзаца вроде color: /red/blue; чтобы закомментированное значение игнорировалось, а текст был синим. Добавьте абзац в body.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
color: /*red*/blue;
}
</style>
</head>
<body>
<p>Hello World! This paragraph is blue, because red is commented out.</p>
</body>
</html>
Многострочный комментарий
Комментарий также может занимать несколько строк.
<style> разместите комментарий на несколько строк (используя /* ... */) над правилом, делающим абзацы красными. Добавьте абзац в body.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* This is
a multi-line
comment */
p {
color: red;
}
</style>
</head>
<body>
<p>Hello World! This paragraph is red.</p>
</body>
</html>
Комментарии HTML и CSS
Из учебника по HTML вы узнали, что можно добавлять HTML-комментарии с помощью синтаксиса <!-- ... -->.
В этом примере вместе используются HTML-комментарий и CSS-комментарий. Ни один из них не отображается в результате.
Пример
HTML-комментарий отмечает абзацы, а CSS-комментарий поясняет правило цвета.
<style> с комментарием CSS после правила, делающего абзацы красными. В body добавьте заголовок, комментарий HTML с синтаксисом и несколько абзацев. Ни один из комментариев не должен появляться в отображаемом результате.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<h2>My Heading</h2>
<!-- These paragraphs will be red -->
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>HTML and CSS comments are not shown in the output.</p>
</body>
</html>