Готові бібліотеки для скидання стилів у CSS
Розглядаємо готові CSS-рішення для скидання стандартних стилів браузера та знайомимося з класичним reset.css від Еріка Мейєра.
Навіщо потрібен готовий reset
За допомогою універсального селектора можна скинути margin і padding, але стандартні стилі браузера містять набагато більше правил. Наприклад, браузер може додавати стилі до списків, таблиць, цитат, заголовків, форм та інших HTML-елементів.
Тому існують готові CSS-файли, які скидають більшу кількість стандартних стилів. Один із найвідоміших прикладів — CSS Reset від Еріка Мейєра.
Reset CSS від Еріка Мейєра
Цей reset містить правила для багатьох стандартних HTML-елементів. Він прибирає стандартні margin, padding, border, розмір шрифту та деякі інші стилі.
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Що робить цей reset
- Прибирає стандартні margin і padding.
- Прибирає стандартні border для перелічених елементів.
- Встановлює базовий розмір шрифту.
- Вирівнює деякі елементи за допомогою vertical-align.
- Встановлює display: block для основних HTML5 структурних елементів.
- Прибирає маркери та нумерацію списків.
- Прибирає стандартне оформлення цитат.
- Встановлює однакову модель відображення меж таблиць.
Підключення reset.css
Як і звичайний reset, готовий CSS-файл потрібно підключити до HTML-документа до основного файлу стилів.
<!DOCTYPE html>
<html lang="uk"> <head> <meta charset="UTF-8"> <title>CSS Reset</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
</head>
<body> <h1>Заголовок</h1>
<p>Абзац тексту.</p>
<ul>
<li>Перший пункт</li>
<li>Другий пункт</li>
</ul>
</body> </html>Reset — це не готовий дизайн
Після підключення reset.css сторінка не отримує нового дизайну. Навпаки, частина стандартного оформлення браузера прибирається. Після цього розробник сам задає потрібні шрифти, відступи, кольори, розміри та інші стилі.
CSS Reset Еріка Мейєра — відомий класичний приклад. У сучасних проєктах часто використовують власний невеликий reset або сучасні готові CSS-рішення, адаптовані під конкретний проєкт.
Практичне завдання
- №1. Створіть файл reset.css.
- №2. Додайте до нього CSS Reset Еріка Мейєра.
- №3. Створіть HTML-сторінку із заголовками, абзацами, списком, посиланням і таблицею.
- №4. Підключіть reset.css до HTML-сторінки.
- №5. Перегляньте сторінку без власних CSS-стилів.
- №6. Порівняйте результат із виглядом сторінки до підключення reset.css.
💡 Показати підказку
Підключіть reset.css перед основним CSS-файлом. Поки що не додавайте власних стилів — завдання полягає в тому, щоб побачити результат роботи reset.
✅ Показати відповідь
<!-- index.html --> <!DOCTYPE html> <html lang="uk"> <head> <meta charset="UTF-8"> <title>CSS Reset</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Заголовок</h1> <p>Абзац тексту.</p> <ul> <li>Перший пункт</li> <li>Другий пункт</li> </ul> <a href="#">Посилання</a> </body> </html>