<HTML>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/monokai-sublime.min.css" integrity="sha512-D1yMMyfRVVtm0nl+b4lvh3KleT8IUkwE7nKu6PoDhMT8U9onHDuuF7FJEt27ziNXZzDnWwQh8VyUH34WMKCr3A==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js" integrity="sha512-wi0CSCMJ8YYTI2EpZ/8nRSgbvKyvihlRCuqDIPoFppDMaYx3+FIltyBDfwtZk/1ejuePWmZZzYbKkOINwZqJOA==" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>CSS Normalize (нормализация CSS)</h1>
<p>
<code class="css">CSS Normalize (нормализация CSS)</code> - это набор стилей, который разработчики могут использовать для установки стандартизированных стилей для разных элементов HTML на всех веб-страницах. В отличие от <code class="css">CSS Reset (сброс стилей)</code>, который полностью удаляет все стили, включая отступы и размеры шрифтов, <code class="css">CSS Normalize</code> обеспечивает более сбалансированный и универсальный подход к стандартизации стилей веб-страниц.
</p>
<p>
При разработке веб-страницы, особенно когда используется CSS-фреймворк или разные браузеры, возникают проблемы с несоответствием стандартов и различиями в рендеринге элементов. <code class="css">Normalize CSS</code> помогает вам создавать кросс-браузерную, совместимую и последовательную визуализацию контента на разных устройствах.
</p>
<h2>Примеры кода, используя <code class="css">CSS Normalize</code></h2>
<pre><code class="css">
/* Normalize: <element> */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
progress {
vertical-align: baseline;
}
[hidden],
template {
display: none;
}
</code></pre>
<p>
В приведенном выше примере кода стилизованы различные элементы HTML с использованием <code class="css">CSS Normalize</code>. Например, используя селекторы <code>article</code>, <code>aside</code>, <code>footer</code>, <code>header</code>, <code>main</code>, <code>nav</code>, мы задаем для них свойство <code>display: block;</code>, чтобы они были отображены блочными элементами. Это помогает нам создавать структуру страницы согласно стандартам HTML.
</p>
<p>
Также, селектор <code>audio:not([controls])</code> позволяет скрывать элементы <code><audio></code>, которые не имеют атрибута <code>controls</code>, чтобы улучшить пользовательский интерфейс и предотвратить отображение ненужных элементов.
</p>
<p>
<code class="css">CSS Normalize</code> также предоставляет стандартные стили для других элементов, как например, <code><progress></code>, <code><canvas></code>, <code><video></code>, чтобы обеспечить более единообразный внешний вид для подобных компонентов.
</p>
<p>
Помимо примеров, приведенных выше, <code class="css">CSS Normalize</code> включает и другие стили для разных элементов, помогая разработчикам создавать кросс-браузерную и совместимую веб-страницу.
</p>
</body>
</HTML>