🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Выключка
Выключка задаётся свойством text-align с ключевыми словами left (левый флаг), center (по центру), right (правый флаг) и justify (по формату).
text‑align: left
Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.
В отличие от заголовка, который стремится по форме к линии, текст — это прямоугольник. По пропорциям прямоугольник может быть широким — горизонтальным, высоким — вертикальным или квадратным.
text‑align: right
Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.
В отличие от заголовка, который стремится по форме к линии, текст — это прямоугольник. По пропорциям прямоугольник может быть широким — горизонтальным, высоким — вертикальным или квадратным.
text‑align: center
Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.
В отличие от заголовка, который стремится по форме к линии, текст — это прямоугольник. По пропорциям прямоугольник может быть широким — горизонтальным, высоким — вертикальным или квадратным.
text‑align: justify
Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.
В отличие от заголовка, который стремится по форме к линии, текст — это прямоугольник. По пропорциям прямоугольник может быть широким — горизонтальным, высоким — вертикальным или квадратным.
Выключка
Выключка задаётся свойством text-align с ключевыми словами left (левый флаг), center (по центру), right (правый флаг) и justify (по формату).
text‑align: left
Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.
text‑align: right
Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.
text‑align: center
Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.
text‑align: justify
Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.
Регистр
Регистр задаётся свойством text-transform с ключевыми словами uppercase (все прописные), lowercase (все строчные) и capitalize (первые буквые каждого слова прописными):
h1 {
text-transform: capitalize; /* «Капитализируем» заголовок статьи */
}
h2 {
/* Подзаголовки набираем заглавными
и жирным курсивом */
text-transform: uppercase;
font-style: italic;
font-weight: bold;
}
abbr {
font-variant: all-small-caps; /* Аббревиатуры набираем капителью */
}Регистр
Регистр задаётся свойством text-transform с ключевыми словами uppercase (все прописные), lowercase (все строчные) и capitalize (первые буквые каждого слова прописными):
h1 {
text-transform: capitalize; /* «Капитализируем» заголовок статьи */
}
h2 {
/* Подзаголовки набираем заглавными
и жирным курсивом */
text-transform: uppercase;
font-style: italic;
font-weight: bold;
}
abbr {
font-variant: all-small-caps; /* Аббревиатуры набираем капителью */
}Капитель, лигатуры и фичи шрифта
Капитель и лигатуры — фичи шрифта: какие‑то шрифты их поддерживают, какие‑то нет. Включаются через font-variant:
.smallcapitals {
font-variant: all-small-caps; /* В отличие от small-caps набирает капителью и строчные, и прописные */
}
.liga {
font-variant: common-ligatures; /* Включаем лигатуры */
}Для тонкой настройки используемых фич шрифта используют font-feature-settings:
body {
/* Используем кернинг и дроби:
1/3 превратится в ⅓ */
font-feature-settings: 'kern', 'frac';
}
Без капители и лигатур
КПСС, ЦСС и difficulty
С капителью и лигатурами
КПСС, ЦСС и difficulty
Без кернинга и дробей
1/3 часть суши
С кернингом и дробями
1/3 часть суши
Капитель, лигатуры и фичи шрифта
Капитель и лигатуры — фичи шрифта: какие‑то шрифты их поддерживают, какие‑то нет. Включаются через font-variant:
.smallcapitals {
font-variant: all-small-caps; /* В отличие от small-caps набирает капителью и строчные, и прописные */
}
.liga {
font-variant: common-ligatures; /* Включаем лигатуры */
}Для тонкой настройки используемых фич шрифта используют font-feature-settings:
body {
/* Используем кернинг и дроби:
1/3 превратится в ⅓ */
font-feature-settings: 'kern', 'frac';
}
Без капители и лигатур
КПСС, ЦСС и difficulty
С капителью и лигатурами
КПСС, ЦСС и difficulty
Без кернинга и дробей
1/3 часть суши
С кернингом и дробями
1/3 часть суши
Межбуквенный и межсловный пробел
Чтобы изменить межбуквенное или межсловное расстояние, используют letter-spacing и word-spacing. Расстояние можно указывать как в пикселях, так и в относительных единицах, например, в em или rem.
Уменьшим межбуквенное расстояние в «Метро» на 5,5 пикселей:
.metro,
.metropoliten,
.moscow-metro {
text-transform: uppercase;
text-align: center;
}
.metro {
letter-spacing: -5.5px;
}Разрядим буквы в «Метрополитен» на .25em:
.metropoliten {
letter-spacing: .25em;
}Увеличим расстояние между словами на .2em:
.moscow-metro {
word-spacing: .2em;
}
Интересный момент: и
Метро
Метрополитен
Московский Метрополитен
имени Владимира Ильича Ленина
Метро
Метрополитен
Московский Метрополитен
имени Владимира Ильича Ленина
Межбуквенный и межсловный пробел
Чтобы изменить межбуквенное или межсловное расстояние, используют letter-spacing и word-spacing. Расстояние можно указывать как в пикселях, так и в относительных единицах, например, в em или rem.
Уменьшим межбуквенное расстояние в «Метро» на 5,5 пикселей:
.metro,
.metropoliten,
.moscow-metro {
text-transform: uppercase;
text-align: center;
}
.metro {
letter-spacing: -5.5px;
}Разрядим буквы в «Метрополитен» на .25em:
.metropoliten {
letter-spacing: .25em;
}Увеличим расстояние между словами на .2em:
.moscow-metro {
word-spacing: .2em;
}
Интересный момент: и
| normal | italic |
|---|---|
| Bureausans | Bureausans |
| Bureauserif | Bureauserif |
| Helvetica | Helvetica |
| Georgia | Georgia |
| Verdana | Verdana |
| Trebuchet | Trebuchet |
| Palatino | Palatino |
Начертания
В ЦСС начертанием управляют свойства font-style, отвечающий за курсив и наклон, и font-weight, отвечающий за «жирность» текста.
font-style задаётся ключевыми словами: normal, italic и oblique. Чаще всего используют normal и italic, чтобы, соответственно, убрать или добавить курсив:
font‑style: normal
font‑style: italic
Курсив и наклонное начертание — не одно и то же. Курсив — начертание, имитирующее рукописный текст, а наклонное начертание образуется путем наклона обычных знаков вправо.
Чтобы использовать начертание, шрифт должен его поддерживать. Если шрифт не поддерживает наклонное начертание, браузер возьмёт вместо него курсивное. Если шрифт не поддерживает и курсивное начертание, браузер механически наклонит буквы, симулируя начертание.
Начертания
В ЦСС начертанием управляют свойства font-style, отвечающий за курсив и наклон, и font-weight, отвечающий за «жирность» текста.
font-style задаётся ключевыми словами: normal, italic и oblique. Чаще всего используют normal и italic, чтобы, соответственно, убрать или добавить курсив:
font‑style: normal
font‑style: italic
Курсив и наклонное начертание — не одно и то же. Курсив — начертание, имитирующее рукописный текст, а наклонное начертание образуется путем наклона обычных знаков вправо.
Чтобы использовать начертание, шрифт должен его поддерживать. Если шрифт не поддерживает наклонное начертание, браузер возьмёт вместо него курсивное. Если шрифт не поддерживает и курсивное начертание, браузер механически наклонит буквы, симулируя начертание.
| Bureausans |
|---|
| Bureausans |
| Bureauserif |
| Bureauserif |
| Helvetica |
| Helvetica |
| Georgia |
| Georgia |
| Verdana |
| Verdana |
| Trebuchet |
| Trebuchet |
| Palatino |
| Palatino |