Ошибки CSS
Ошибки в CSS могут привести к неожиданному поведению или к стилям, которые применяются некорректно.
На этой странице показаны распространённые ошибки CSS и способы их избежать.
Отсутствующие точки с запятой
Забытая точка с запятой в конце декларации может сломать всё правило.
Пример
У значения color нет точки с запятой, поэтому правило ломается.
<style> определите правило .bad, где после декларации цвета нет точки с запятой перед следующей декларацией, из-за чего правило ломается. Примените class="bad" к абзацу в body.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
color: red
background-color: yellow;
}
</style>
</head>
<body>
<p class="bad">The missing semicolon after "red" breaks this rule.</p>
</body>
</html>
Недопустимые имена свойств
Если вы используете несуществующее имя свойства, браузер просто игнорирует его.
Пример
Свойство с опечаткой colr игнорируется, но font-size по-прежнему работает.
<style> определите правило .bad, использующее свойство с ошибкой в написании (colr вместо color) плюс корректный font-size. Браузер игнорирует неизвестное свойство, но сохраняет корректное. Примените class="bad" к абзацу.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
colr: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p class="bad">The "colr" property is ignored, but the font-size still works.</p>
</body>
</html>
Недопустимые значения
Корректное свойство с недопустимым значением также игнорируется.
Пример
Отрицательная width игнорируется, но color по-прежнему применяется.
<style> определите правило .bad с отрицательной шириной (недопустимой и игнорируемой) и корректным зелёным цветом. Примените class="bad" к абзацу.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
width: -100px;
color: green;
}
</style>
</head>
<body>
<p class="bad">The negative width is ignored, but the green color still applies.</p>
</body>
</html>
Незакрытые фигурные скобки
Если вы забудете закрыть фигурную скобку }, всё правило может быть проигнорировано.
Пример
У правила отсутствует закрывающая фигурная скобка.
<style> определите правило .bad с padding и margin, но пропустите закрывающую фигурную скобку, из-за чего всё правило может быть проигнорировано. Примените class="bad" к абзацу.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
padding: 20px;
margin: 10px;
</style>
</head>
<body>
<p class="bad">The missing closing brace can cause the rule to be ignored.</p>
</body>
</html>
Лишние двоеточия или скобки
Опечатки, такие как лишнее двоеточие или неправильно расположенная скобка, могут сломать правило.
Пример
Двойное двоеточие делает декларацию недействительной.
<style> определите правило .bad с опечаткой в виде двойного двоеточия (color:: blue;), чтобы декларация была недействительной. Примените class="bad" к абзацу.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
color:: blue;
}
</style>
</head>
<body>
<p class="bad">The double colon makes this declaration invalid, so the color is not applied.</p>
</body>
</html>
Советы, как избежать ошибок CSS
- Используйте редактор кода с подсветкой синтаксиса.
- Проверяйте свой CSS с помощью линтера или валидатора.
- Пишите CSS небольшими разделами и тестируйте часто.