🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Васи­лий Полов­нёв, Игорь Пет­ров

ХТМЛ.
Вёрстка сайтов

Изда­тель­ство Бюро Гор­бу­нова
2021
Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова
2021
удк 004.42
ббк З973.42
П52
Васи­лий Полов­нёв, Игорь Пет­ров
П52
ХТМЛ. Вёрстка сай­тов для дизай­не­ров, редак­то­ров и руко­во­ди­те­лей.—
М.: Изд‑во Бюро Гор­бу­нова, 2021

Эта книга — поша­го­вая инструк­ция по вёрстке сай­тов на язы­ках ХТМЛ и ЦСС. Вы узна­ете не только как свер­стать сайт, но и как опуб­ли­ко­вать его в интер­нете, настро­ить кра­си­вый шаринг в соц­сети и под­клю­чить системы аналитики.

Отдель­ный раз­дел книги посвя­щён работе с вер­сталь­щи­ком: как ста­вить задачи, полу­чать пред­ска­зу­е­мый резуль­тат и пра­вильно при­ни­мать и внед­рять вёрстку.

ISBN 978‑5‑6041630‑9‑2
© Бюро Гор­бу­нова

Оглавление

    Зна­ком­ство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Кон­троль качества

    Публикация

    Как рабо­тать с верстальщиком

удк 004.42
ббк З973.42
П52
П52
Василий Половнёв, Игорь Петров
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.

ISBN 978‑5‑6041630‑9‑2
© Бюро Горбунова

Оглавление

    Знакомство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Контроль качества

    Публикация

    Как работать с верстальщиком

Скрыто 39 разворотов

Капитель, лигатуры и фичи шрифта

Капи­тель и лига­туры — фичи шрифта: какие‑то шрифты их под­дер­жи­вают, какие‑то нет. Вклю­ча­ются через 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 часть суши
1990—2017

С кернингом и дробями

1/3 часть суши
1990—2017

См. также:

Капитель, лигатуры и фичи шрифта

Капитель и лигатуры — фичи шрифта: какие‑то шрифты их поддерживают, какие‑то нет. Включаются через 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 часть суши
1990—2017

С кернингом и дробями

1/3 часть суши
1990—2017

См. также:

Межбуквенный и межсловный пробел

Чтобы изме­нить меж­бук­вен­ное или меж­с­лов­ное рас­сто­я­ние, исполь­зуют 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 задают не ширину пробела, а приращение к его ширине по умолчанию в шрифте. Соответственно, letter‑spacing: 0 не схлопнет растояние между буквами, а сделает его стандартным

Метро

Метрополитен

Мос­ков­ский Мет­ро­по­ли­тен
имени Вла­ди­мира Ильича Ленина

Метро

Метрополитен

Московский Метрополитен
имени Владимира Ильича Ленина

Межбуквенный и межсловный пробел

Чтобы изменить межбуквенное или межсловное расстояние, используют 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 задают не ширину пробела, а приращение к его ширине по умолчанию в шрифте. Соответственно, letter‑spacing: 0 не схлопнет растояние между буквами, а сделает его стандартным

normalitalic
BureausansBureausans
BureauserifBureauserif
HelveticaHelvetica
GeorgiaGeorgia
VerdanaVerdana
TrebuchetTrebuchet
PalatinoPalatino

Начертания

В ЦСС начер­та­нием управ­ляют свой­ства 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

font-weight отве­чает за «жир­ность», вес начер­та­ния. Зада­ется в чис­лах от 100 до 900.

Кроме чис­ло­вых зна­че­ний под­дер­жи­ва­ются клю­че­вые слова: normal, bold, lighter и bolder.

normal — это обыч­ное начер­та­ние, сино­ним font-weight: 400

font‑weight: 400
font‑weight: normal

bold — жир­ное начер­та­ние, сино­ним font-weight: 700

font‑weight: 700
font‑weight: bold

Лучше исполь­зо­вать клю­че­вые слова, а не их чис­ло­вые зна­че­ния: их проще вос­при­ни­мать, не нужно запо­ми­нать маги­че­ские числа.

Жир­ность начер­та­ния отно­си­тельно роди­теля зада­ётся с помо­щью клю­че­вых слов lighter (полегче) и bolder (пожирнее):

font‑weight: lighter
font‑weight: bolder

lighterfont‑weightbolder
light100, lightregular
light200, lightregular
light300, lightregular
light400, regularbold
light500, regularbold
regular600, boldbold
regular700, boldbold
bold800, boldbold
bold900, boldbold

Как меняется начертание от lighter, bolder и font‑weight родителя

font-weight отвечает за «жирность», вес начертания. Задается в числах от 100 до 900.

Кроме числовых значений поддерживаются ключевые слова: normal, bold, lighter и bolder.

normal — это обычное начертание, синоним font-weight: 400

font‑weight: 400
font‑weight: normal

bold — жирное начертание, синоним font-weight: 700

font‑weight: 700
font‑weight: bold

Лучше использовать ключевые слова, а не их числовые значения: их проще воспринимать, не нужно запоминать магические числа.

Жирность начертания относительно родителя задаётся с помощью ключевых слов lighter (полегче) и bolder (пожирнее):

font‑weight: lighter
font‑weight: bolder

light
font‑weight100, light
bolderregular
light
font‑weight200, light
bolderregular
light
font‑weight300, light
bolderregular
light
font‑weight400, regular
bolderbold
light
font‑weight500, regular
bolderbold
regular
font‑weight600, bold
bolderbold
regular
font‑weight700, bold
bolderbold
bold
font‑weight800, bold
bolderbold
bold
font‑weight900, bold
bolderbold

Как меняется начертание от lighter, bolder и font‑weight родителя

Бюро­санс
Бюросайн

Бюросанс поддерживает тонкое, нормальное и жирное начертания. Бюросайн — вариативный шрифт, поддерживающий все начертания, включая промежуточные

Чтобы исполь­зо­вать какое‑то начер­та­ние, шрифт дол­жен его под­дер­жи­вать. В про­тив­ном слу­чае бра­у­зер под­бе­рёт бли­жай­шее под­хо­дя­щее начер­та­ние из тех, что доступны ему в шрифте.

Отдель­ная исто­рия — вари­а­тив­ные шрифты, в кото­рых есть любые начер­та­ния. Они рабо­тают по прин­ципу интер­по­ля­ции: с помо­щью мате­ма­тики вычис­ляют неиз­вест­ные про­ме­жу­точ­ные начер­та­ния, исполь­зуя извест­ные крайние.

Как и в обыч­ных шриф­тах для зада­ния «жир­но­сти» в вари­а­тив­ных шриф­тах нужно исполь­зо­вать font‑weight:
font-weight: 400

Бюросанс
Бюросайн

Чтобы использовать какое‑то начертание, шрифт должен его поддерживать. В противном случае браузер подберёт ближайшее подходящее начертание из тех, что доступны ему в шрифте.

Отдельная история — вариативные шрифты, в которых есть любые начертания. Они работают по принципу интерполяции: с помощью математики вычисляют неизвестные промежуточные начертания, используя известные крайние.

Как и в обычных шрифтах для задания «жирности» в вариативных шрифтах нужно использовать font‑weight:
font-weight: 400

Бюросанс поддерживает тонкое, нормальное и жирное начертания. Бюросайн — вариативный шрифт, поддерживающий все начертания, включая промежуточные

Скрыто 176 разворотов
Закладки
Добавьте закладки
Ничего не нашлось