🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Подключение собственных шрифтов
Можно подключить к странице свой файл шрифта. Конструкция @font-face объявляет браузеру новый шрифт, его название, формат и путь до файла.
Если качаете шрифт из интернета — убедитесь, что у вас есть лицензия для использования в вебе. Для некоторых шрифтов веб‑лицензия бесплатна.
Крайне не советуем использовать «пиратские» шрифты и шрифты, в правах использования которых вы не уверены. Это может обернуться не только репутационными потерями, но и реальным судебным разбирательством — крупные шрифтовые компании сегодня активно мониторят веб на предмет неправомерного использования своих шрифтов.
@font-face {
font-family: 'My Custom Font'; /* Это название будет использоваться для применения шрифта */
src: url('fonts/myCustomFont.woff2') format('woff2');
/* Путь до файла шрифта с указанием формата — рядом с ЦСС-файлом в папке fonts */
}
/* Для начертаний конструкция дублируется, но уже с указанием другого файла и нужного font-weight, название остаётся без изменений */
@font-face {
font-family: 'My Custom Font';
src: url('fonts/myCustomFont-Light.woff2') format('woff2');
font-weight: 100;
}
/* Используем объявленный шрифт на странице */
body {
font-family: 'My Custom Font', sans-serif;
font-weight: 100;
}
У подключения собственных шрифтов есть много нюансов, выходящих за рамки этой книги. Перед подключением ознакомьтесь с документацией: @font‑face
Подключение собственных шрифтов
Можно подключить к странице свой файл шрифта. Конструкция @font-face объявляет браузеру новый шрифт, его название, формат и путь до файла.
Если качаете шрифт из интернета — убедитесь, что у вас есть лицензия для использования в вебе. Для некоторых шрифтов веб‑лицензия бесплатна.
Крайне не советуем использовать «пиратские» шрифты и шрифты, в правах использования которых вы не уверены. Это может обернуться не только репутационными потерями, но и реальным судебным разбирательством — крупные шрифтовые компании сегодня активно мониторят веб на предмет неправомерного использования своих шрифтов.
@font-face {
font-family: 'My Custom Font'; /* Это название будет использоваться для применения шрифта */
src: url('fonts/myCustomFont.woff2') format('woff2');
/* Путь до файла шрифта с указанием формата — рядом с ЦСС-файлом в папке fonts */
}
/* Для начертаний конструкция дублируется, но уже с указанием другого файла и нужного font-weight, название остаётся без изменений */
@font-face {
font-family: 'My Custom Font';
src: url('fonts/myCustomFont-Light.woff2') format('woff2');
font-weight: 100;
}
/* Используем объявленный шрифт на странице */
body {
font-family: 'My Custom Font', sans-serif;
font-weight: 100;
}
У подключения собственных шрифтов есть много нюансов, выходящих за рамки этой книги. Перед подключением ознакомьтесь с документацией: @font‑face
Единицы измерения размеров
В ЦСС единицы измерения бывают относительными и абсолютными. Относительные считаются относительно чего‑то ещё:
em— относительно кегля родителя;rem— относительно кегля у<html>;vw— относительно ширины экрана,1vw— 1% ширины экрана;vh— относительно высоты экрана,1vh— 1% высоты экрана;%— относительно значения такого же свойства родителя, но с редкими исключениями.
Например, width: 50% задаст ширину равную половине ширины родителя. С другой стороны, margin-left: 25% задаст левый отступ равный четверти от ширины родителя, а не от его margin-left.
Абсолютные единицы измерения привязаны к конкретным размерам: 1cm на печати — это один «физический» сантиметр в реальном мире, 1px на экране — это один виртуальный пиксель вашего экрана.
Большая часть абсолютных единиц измерения используется при выводе страницы на печать: для вывода на экран сантиметры и дюймы конвертируются в пиксели и никогда не совпадают с реальными физическими единицами. Поэтому для указания точных и конкретных размеров на экране вы будете использовать пиксели, px.
См. также:
Единицы измерения размеров
В ЦСС единицы измерения бывают относительными и абсолютными. Относительные считаются относительно чего‑то ещё:
em— относительно кегля родителя;rem— относительно кегля у<html>;vw— относительно ширины экрана,1vw— 1% ширины экрана;vh— относительно высоты экрана,1vh— 1% высоты экрана;%— относительно значения такого же свойства родителя, но с редкими исключениями.
Например, width: 50% задаст ширину равную половине ширины родителя. С другой стороны, margin-left: 25% задаст левый отступ равный четверти от ширины родителя, а не от его margin-left.
Абсолютные единицы измерения привязаны к конкретным размерам: 1cm на печати — это один «физический» сантиметр в реальном мире, 1px на экране — это один виртуальный пиксель вашего экрана.
Большая часть абсолютных единиц измерения используется при выводе страницы на печать: для вывода на экран сантиметры и дюймы конвертируются в пиксели и никогда не совпадают с реальными физическими единицами. Поэтому для указания точных и конкретных размеров на экране вы будете использовать пиксели, px.
См. также:
Кегль и интерлиньяж
В ЦСС кегль задаётся свойством font-size, а интерлиньяж — свойством line-height. Их значения могут быть фиксированными — px, pt, in, cm, или относительными — %, em, rem:
body {
font-size: 20px;
/* Высота строки посчитается от кегля:
20px * 1.25 = 25px */
line-height: 1.25;
}
.sidenote {
/* Кегль посчитается от кегля родителя:
20px * 0.75 = 15px */
font-size: .75em;
/* Высота строки посчитается от кегля элемента:
15px * 1.2 = 18px */
line-height: 120%;
}Обратите внимание: значения в рамочке в этой книге можно менять, попробуйте их подвигать
Кегль и интерлиньяж
В ЦСС кегль задаётся свойством font-size, а интерлиньяж — свойством line-height. Их значения могут быть фиксированными — px, pt, in, cm, или относительными — %, em, rem:
body {
font-size: 20px;
/* Высота строки посчитается от кегля:
20px * 1.25 = 25px */
line-height: 1.25;
}
.sidenote {
/* Кегль посчитается от кегля родителя:
20px * 0.75 = 15px */
font-size: .75em;
/* Высота строки посчитается от кегля элемента:
15px * 1.2 = 18px */
line-height: 120%;
}Обратите внимание: значения в рамочке в этой книге можно менять, попробуйте их подвигать
Обычно кегль основного текста задают на самом высоком уровне в :root или body, а для остальных текстовых элементов используют rem или em:
/* :root — хитрый селектор, указывающий на корневой, самый высокий, элемент документа. По сути, :root идентичен <html> */
:root {
font-size: 18px;
/* Высота строки посчитается от кегля:
18px * 1.25 = 22.5px */
line-height: 1.25
}
h1 {
/* Кегль посчитается от кегля в :root:
18px * 2.666 = 48px */
font-size: 2.666rem;
/* Высота строки посчитается от кегля:
48px * 1 = 48px */
line-height: 1;
}
h2 {
/* Кегль посчитается от кегля в :root:
18px * 1.722 = 31px */
font-size: 1.722rem;
/* Высота строки посчитается от кегля:
41px * 0.935 = 38px */
line-height: .935;
}
h3 {
font-size: 1rem;
/* Высота строки унаследуется от :root */
line-height: inherit;
}
Получается система кеглей и интерлиньяжей, зависящая от единственного базового кегля, указанного в :root. Поменяли кегль в :root, поменялись кегли и интерлиньяжи у текста и заголовков, сохранив те же пропорции. Легко менять при переходе к мобильной или десктопной версии.
Обычно кегль основного текста задают на самом высоком уровне в :root или body, а для остальных текстовых элементов используют rem или em:
/* :root — хитрый селектор, указывающий на корневой, самый высокий, элемент документа. По сути, :root идентичен <html> */
:root {
font-size: 18px;
/* Высота строки посчитается от кегля:
18px * 1.25 = 22.5px */
line-height: 1.25
}
h1 {
/* Кегль посчитается от кегля в :root:
18px * 2.666 = 48px */
font-size: 2.666rem;
/* Высота строки посчитается от кегля:
48px * 1 = 48px */
line-height: 1;
}
h2 {
/* Кегль посчитается от кегля в :root:
18px * 1.722 = 31px */
font-size: 1.722rem;
/* Высота строки посчитается от кегля:
41px * 0.935 = 38px */
line-height: .935;
}
h3 {
font-size: 1rem;
/* Высота строки унаследуется от :root */
line-height: inherit;
}
Получается система кеглей и интерлиньяжей, зависящая от единственного базового кегля, указанного в :root. Поменяли кегль в :root, поменялись кегли и интерлиньяжи у текста и заголовков, сохранив те же пропорции. Легко менять при переходе к мобильной или десктопной версии.
Лайфхак: em или rem?
И em, и rem — относительные величины. Разница между ними в том, что em считается относительно кегля родительского элемента, а rem — относительно корневого. Сравните:
20px×1.224px
15px×0.812px
20px×1.224px
20px×0.62512.5px
20px×0.816px
Для независимых компонентов лучше подойдёт rem: не придётся беспокоиться, что родительский элемент повлияет на кегль в компоненте. Если вы, наоборот, хотите, чтобы вложенность влияла на кегль, берите em.
При использовании rem кегль на корневом элементе (:root) лучше не задавать в пикселях. Браузеры позволяют настроить базовый кегль текста. Если задать кегль в пикселях, эта настройка не сработает, cлабовидящим, возможно, придётся зумить страницу.
Вместо этого запомните, что кегль по умолчанию во всех браузерах — 16 пикселей, и задавайте базовый относительно него. То есть, вместо font-size: 18px — font-size: 1.125em
Лайфхак: em или rem?
И em, и rem — относительные величины. Разница между ними в том, что em считается относительно кегля родительского элемента, а rem — относительно корневого. Сравните:
20px×1.224px
15px×0.812px
20px×1.224px
20px×0.62512.5px
20px×0.816px
Для независимых компонентов лучше подойдёт rem: не придётся беспокоиться, что родительский элемент повлияет на кегль в компоненте. Если вы, наоборот, хотите, чтобы вложенность влияла на кегль, берите em.
При использовании rem кегль на корневом элементе (:root) лучше не задавать в пикселях. Браузеры позволяют настроить базовый кегль текста. Если задать кегль в пикселях, эта настройка не сработает, cлабовидящим, возможно, придётся зумить страницу.
Вместо этого запомните, что кегль по умолчанию во всех браузерах — 16 пикселей, и задавайте базовый относительно него. То есть, вместо font-size: 18px — font-size: 1.125em