Web ништяки (обновляемое)
Относительные единицы измерения CSS
- em -> высота шрифта текущего элемента
- rem -> высота шрифта базового значения
- ex -> высота символа x
- px -> пиксель
- % -> процент
- in -> дюйм (1 дюйм равен 2,54 см)
- cm -> сантиметр
- mm -> миллиметр
- pt -> пункт (1 пункт равен 1/72 дюйма)
- pc -> пика (1 пика равна 12 пунктам)
- vh -> высота вьюпорта (окна браузера)
- vw -> ширина вьюпорта (окна браузера)
- vmin -> размер в процентах от меньшей размерности вьюпорта. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.
- vmax -> размер в процентах от большей размерности вьюпорта. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
Разговор о единице измерения em и rem
За единицу измерения em и rem берут базовое значение размера шрифта, обычно это — 16 px. Но также его можно изменить, если задать свой базовый размер шрифта для всего сайта
rem будет всегда брать за единицу этот размер, em же будет менять свою единицу, он будет наследовать размер его родительского блока, например:
style.css
html { font-size: 10px; }
.block { font-size: 1.5rem; }
.example1 { font-size: 2rem; }
.example2 { font-size: 2em; }
index.html
html {
<div class="block"> здесь будет 15px, 10px умножить на 1.5rem
<p class="example1">Test 1</p> здесь будет 20px, 10px умножить на 2rem
<p class="example2">Test 2</p> здесь будет 30px, тк у род. блока размер 15px умножаем на 2em
</div>
}
Кстати, для простоты расчетов, можно задать базовый размер шрифта 10px, тогда 14px будет 1.4em или rem, как угодно.
Немного кода
[class^="box-"] {
background-color: skyblue; /* Размещаем контейнеры по центру */
display: grid;
place-items: center;
}
Сброс стилей normalize.css
Современная, готовая к HTML5 альтернатива сбросу CSS. Normalize.css заставляет браузеры отображать все элементы более последовательно и в соответствии с современными стандартами. Он точно нацелен только на стили, которые нуждаются в нормализации.
Установить через менеджер пакетов -> npm install normalize.css смотрите Node.js в полезных ссылках
Скачать -> http://necolas.github.io/normalize.css/
Назначить удаленно отсюда -> https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css
Полезные ссылки
Learn Code -> https://www.w3schools.com
HTML5CSS -> https://html5css.ru
Справочник HTML -> http://htmlbook.ru/html
Справочник CSS -> https://webref.ru/css
Справочник HTML -> https://webref.ru/html
CSS3 медиа-запросы ->https://webref.ru/css/value/media и http://htmlbook.ru/css/value/media
CSS3 селекторы -> https://learn.javascript.ru/css-selectors
CSS3 Reference -> https://cssreference.io
Методология БЭМ создана в Яндексе для разработки сайтов, которые надо делать быстро,а поддерживать долгие годы. Она позволяет создавать расширяемые и повторно используемые компоненты интерфейса. -> https://ru.bem.info/methodology/
Can I use... Поддержка таблиц для HTML5, CSS3 и т. д. -> https://caniuse.com/
Что такое Flexbox? -> https://html5.by/blog/flexbox/
№1 Современный и простой генератор веб-шрифтов css @font-face -> https://transfonter.org
№2 Генератор веб-шрифтов -> https://www.fontsquirrel.com/tools/webfont-generator
Node.js® кроссплатформенная среда выполнения JavaScript с открытым исходным кодом -> https://nodejs.org/en/
Gulp набор инструментов для автоматизации и улучшения вашего рабочего
процесса -> https://gulpjs.com
npm сайт-ресурс плагинов -> https://www.npmjs.com/package/plugins
jQuery Validation: Проверяйте формы так, как никогда раньше -> https://jqueryvalidation.org/documentation/
React Hook Form Validation. Эффективные, гибкие и расширяемые формы с простой в использовании проверкой. -> https://react-hook-form.com
JavaScript маска ввода разных данных (дата, номер телефона и т.д.) -> https://imask.js.org
Just-add-water CSS animations -> https://animate.style
W3C Markup Validation Service -> https://validator.w3.org
Скорость загрузки сайта -> https://pagespeed.web.dev
Генератор метатегов -> https://metatags.io
#1 Генератор фавиконок -> https://realfavicongenerator.net
#2 Генератор фавиконок -> https://www.favicon-generator.org
JSHint Options -> https://jshint.com/docs/options/