CSS стили по умолчанию, которые браузеры применяют к HTML-элементам, могут значительно различаться между разными браузерами. Эти стили задают базовое отображение элементов до того, как будут применены какие-либо пользовательские стили. Ниже представлены примеры некоторых типичных CSS стилей по умолчанию для различных элементов. Эти примеры иллюстрируют, как элементы могут отображаться в браузере без дополнительного стилизации.
1. Текст и шрифты
Параграфы <p>:
- Маржины сверху и снизу для отступов между абзацами.
p {
margin-top: 1em;
margin-bottom: 1em;
}
Заголовки <h1>—<h6>:
- Большие маржины сверху и снизу, увеличенный размер шрифта.
h1 {
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
}
2. Списки
Маркированные и нумерованные списки <ul>, <ol>:
- Отступ слева для выравнивания маркеров или номеров вне потока контента.
ul, ol {
margin-top: 1em;
margin-bottom: 1em;
padding-left: 40px;
}
3. Ссылки
Ссылки <a>:
- Цвет текста и подчёркивание для выделения.
a {
color: blue;
text-decoration: underline;
}
4. Элементы формы
Кнопки <button> и поля ввода <input>:
- Бордюры, внутренние отступы и фоновый цвет.
button, input[type="button"], input[type="submit"] {
padding: 2px 6px 3px;
border: 1px solid #ccc;
background-color: #f7f7f7;
}
5. Таблицы
Таблицы <table>:
- Границы и внутренние отступы для отделения ячеек.
table {
border-collapse: collapse;
}
td, th {
padding: 8px;
border: 1px solid #ddd;
}
Как справиться с различиями стилей по умолчанию
Для создания консистентного вида на разных браузерах и устройствах, разработчики часто используют CSS Reset или Normalize.css, чтобы «обнулить» или «нормализовать» стили по умолчанию.
- CSS Reset убирает все стили по умолчанию, давая вам «чистый лист» для начала стилизации.
- Normalize.css сохраняет полезные стандартные стили, исправляет ошибки и улучшает кросс-браузерную совместимость.
Использование одного из этих подходов поможет упростить стилизацию элементов и уменьшить вероятность неожиданного поведения в различных браузерах.
