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

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

 
между важными местами
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
© Бюро Горбунова

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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

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

Стили оформления абзацев

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

И «швейцарский», со слепой строкой, подходящий для повседневных современных документов, прекрасно живущий в ортогональной многоколоночной сетке и флаговом наборе.

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

На экране читать тяжелее, поэтому дополнительное разбиение пустой строкой помогает глазу. А эксперименты с абзацным отступом на сайтах, как правило, выглядят натужно и неудачно. Особенно с автоматической выключкой по ширине.

Красная строка

В ЦСС отступ крас­ной строки, втяжка абзаца, зада­ётся свой­ством text-indent. Его зна­че­ния могут быть фик­си­ро­ван­ными, напри­мер, в пик­се­лях или отно­си­тель­ными, напри­мер, в про­цен­тах или em:

p {
  text-indent: 1em; /* Задаём абзацный отступ в круглую */
  margin: 0; /* И убираем вертикальные отступы */
}

p:first-child,
h1 + p,
h2 + p,
h3 + p {
  /* У абзацев, стоящих первыми
     или сразу после заголовков
     и подзаголовков,
     абзацный отступ избыточен:
     можно его обнулить */
  text-indent: 0;
}

Почему в вебе так распространён безабзацный способ набора текста

Стили оформления абзацев

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

И «швейцарский», со слепой строкой, подходящий для повседневных современных документов, прекрасно живущий в ортогональной многоколоночной сетке и флаговом наборе.

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

На экране читать тяжелее, поэтому дополнительное разбиение пустой строкой помогает глазу. А эксперименты с абзацным отступом на сайтах, как правило, выглядят натужно и неудачно. Особенно с автоматической выключкой по ширине.

Красная строка

В ЦСС отступ красной строки, втяжка абзаца, задаётся свойством text-indent. Его значения могут быть фиксированными, например, в пикселях или относительными, например, в процентах или em:

p {
  text-indent: 1em; /* Задаём абзацный отступ в круглую */
  margin: 0; /* И убираем вертикальные отступы */
}

p:first-child,
h1 + p,
h2 + p,
h3 + p {
  /* У абзацев, стоящих первыми
     или сразу после заголовков
     и подзаголовков,
     абзацный отступ избыточен:
     можно его обнулить */
  text-indent: 0;
}

Почему в вебе так распространён безабзацный способ набора текста

Упражнение: кегль, шрифты, выключка и регистр

Изме­ните ЦСС так, чтобы пер­вая тек­сто­вая стра­ница повто­рила вторую.


  

    
font-family: Bureauserif, serif;

    
font-family: Roboto Condensed, sans-serif;

    
font-size: 1.125em;

    
font-size: 3em;

    
font-style: italic;

    
font-variant: all-small-caps;

    
font-weight: bold;

    
line-height: 1.25;

    
line-height: .9;

    
margin-top: 2em;

    
margin: 0;

    
margin: 0;

    
text-align: right;

    
text-indent: 0;

    
text-indent: 1em;

    
text-transform: uppercase;

  





.exerciseFontBasics h1 {




}




.exerciseFontBasics p {




}




.exerciseFontBasics h1 + p {

  


}




.exerciseFontBasics .smallcapitals {

  


}

Вёрстка

Скоро
скидки

Текст — базовый элемент вёрстки.

Текст — несжимаемая жидкость, принимающая форму сосуда. Верстальщик определяет форму, пропорции и объём контейнера, впускает в него воздух, разделяет на сообщающиеся сосуды. Один и тот же текст заполняет стакан или расползается лужей по плоскости страницы.

Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.

Дизайн

Скоро
скидки

Текст — базовый элемент вёрстки.

Текст — несжимаемая жидкость, принимающая форму сосуда. Верстальщик определяет форму, пропорции и объём контейнера, впускает в него воздух, разделяет на сообщающиеся сосуды. Один и тот же текст заполняет стакан или расползается лужей по плоскости страницы.

Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.

Вёрстка

Скоро
скидки

Текст — базовый элемент вёрстки.

Текст — несжимаемая жидкость, принимающая форму сосуда. Верстальщик определяет форму, пропорции и объём контейнера, впускает в него воздух, разделяет на сообщающиеся сосуды. Один и тот же текст заполняет стакан или расползается лужей по плоскости страницы.

Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.

Дизайн

Скоро
скидки

Текст — базовый элемент вёрстки.

Текст — несжимаемая жидкость, принимающая форму сосуда. Верстальщик определяет форму, пропорции и объём контейнера, впускает в него воздух, разделяет на сообщающиеся сосуды. Один и тот же текст заполняет стакан или расползается лужей по плоскости страницы.

Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.

Упражнение: кегль, шрифты, выключка и регистр

Измените ЦСС так, чтобы первая текстовая страница повторила вторую.


  

    
font-family: Bureauserif, serif;

    
font-family: Roboto Condensed, sans-serif;

    
font-size: 1.125em;

    
font-size: 3em;

    
font-style: italic;

    
font-variant: all-small-caps;

    
font-weight: bold;

    
line-height: 1.25;

    
line-height: .9;

    
margin-top: 2em;

    
margin: 0;

    
margin: 0;

    
text-align: right;

    
text-indent: 0;

    
text-indent: 1em;

    
text-transform: uppercase;

  





.exerciseFontBasics h1 {




}




.exerciseFontBasics p {




}




.exerciseFontBasics h1 + p {

  


}




.exerciseFontBasics .smallcapitals {

  


}

Цвет

Бордовый алерт с полупрозрачным фоном

Цвет тек­ста и фона задают свой­ствами color и background-color. Можно исполь­зо­вать HSL, RGB или RGBA, если нужно доба­вить цвету прозрачность:

.alert {
  /* Задаём бордовый цвет текста в HSL */
  color: hsl(354.6, 61%, 32.2%);

  /* В RGB */
  color: rgb(132, 32, 41);

  /* Он же в шестнадцатеричном виде */
  color: #842029;

  /* Для фона берём красный
     с 15% прозрачностью */
  background-color: rgba(255, 0, 0, .15);

  /* И добавляем внутренние отступы
     для аккуратности */
  padding: 21px 11px 40px;
}

Инвертированная плашка с рамкой в 2 пк

Когда точ­ные цвета неважны, напри­мер, во время отладки или в демон­стра­ци­он­ных целях, быст­рее исполь­зо­вать име­но­ван­ные цвета:

.inverted {
  color: white;
  background-color: black;
  border: 2px solid red;
  padding: 19px 9px 38px;
}

См. также:

Цвет

Бордовый алерт с полупрозрачным фоном

Цвет текста и фона задают свойствами color и background-color. Можно использовать HSL, RGB или RGBA, если нужно добавить цвету прозрачность:

.alert {
  /* Задаём бордовый цвет текста в HSL */
  color: hsl(354.6, 61%, 32.2%);

  /* В RGB */
  color: rgb(132, 32, 41);

  /* Он же в шестнадцатеричном виде */
  color: #842029;

  /* Для фона берём красный
     с 15% прозрачностью */
  background-color: rgba(255, 0, 0, .15);

  /* И добавляем внутренние отступы
     для аккуратности */
  padding: 21px 11px 40px;
}

Инвертированная плашка с рамкой в 2 пк

Когда точные цвета неважны, например, во время отладки или в демонстрационных целях, быстрее использовать именованные цвета:

.inverted {
  color: white;
  background-color: black;
  border: 2px solid red;
  padding: 19px 9px 38px;
}

См. также:

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