🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Скроем элемент. Для этого кликнем по нему правой кнопкой и выберем Hide Element.
Элемент исчез, но всё ещё занимает место на странице.
Чтобы полностью удалить элемент, кликнем по нему правой кнопкой и выберем Delete Element.
Элемент исчез со страницы и из веб‑инспектора.
Чтобы отменить последнее действие и вернуть элемент, нужно нажать
Отредактируем портфолио, скрыв или убрав заголовок второго уровня
Оранжевые поля показывают внешние отступы элемента, маржины
Чтобы скрыть элемент, веб‑инспектор добавляет ему visibility: hidden
Элемент удалился только в браузере. Если обновить страницу, он вернётся
Удаление элемента веб‑инспектором похоже на действие display: none
Отредактируем портфолио, скрыв или убрав заголовок второго уровня
Оранжевые поля показывают внешние отступы элемента, маржины
Чтобы скрыть элемент, веб‑инспектор добавляет ему visibility: hidden
Элемент удалился только в браузере. Если обновить страницу, он вернётся
Удаление элемента веб‑инспектором похоже на действие display: none
Скроем элемент. Для этого кликнем по нему правой кнопкой и выберем Hide Element.
Элемент исчез, но всё ещё занимает место на странице.
Чтобы полностью удалить элемент, кликнем по нему правой кнопкой и выберем Delete Element.
Элемент исчез со страницы и из веб‑инспектора.
Чтобы отменить последнее действие и вернуть элемент, нужно нажать
user agent stylesheet — это стили элементов по умолчанию, зашитые в браузер
Браузер будет подсказывать и дополнять возможные свойства и их значения
Как видите, браузер просто дописывает новые стили в атрибут style
Зачёркнутые правила либо отключены, либо переопределены где‑то ещё
В веб‑инспекторе Хрома цифровые значения также можно изменять прокруткой
Поменяем стили заголовка. Справа показаны стили выбранного элемента. Чтобы добавить стилей, кликнем в element.style.
Панель со стилями перейдёт в режим редактирования. Допишем стили, указав кегль, шрифт и отступы заголовка.
Чтобы отключить свойство, кликнем по чекбоксу возле него.
Чтобы поменять значение «на глаз», кликнем в него и понажимаем клавиши‑стрелки ↑↓. Работает как в Фотошопе: с зажатым ⌘ увеличивает или уменьшает значение на сотни, с Shift — на десятки, с Option — на одну десятую.
user agent stylesheet — это стили элементов по умолчанию, зашитые в браузер
Браузер будет подсказывать и дополнять возможные свойства и их значения
Как видите, браузер просто дописывает новые стили в атрибут style
Зачёркнутые правила либо отключены, либо переопределены где‑то ещё
В веб‑инспекторе Хрома цифровые значения также можно изменять прокруткой
Поменяем стили заголовка. Справа показаны стили выбранного элемента. Чтобы добавить стилей, кликнем в element.style.
Панель со стилями перейдёт в режим редактирования. Допишем стили, указав кегль, шрифт и отступы заголовка.
Чтобы отключить свойство, кликнем по чекбоксу возле него.
Чтобы поменять значение «на глаз», кликнем в него и понажимаем клавиши‑стрелки ↑↓. Работает как в Фотошопе: с зажатым ⌘ увеличивает или уменьшает значение на сотни, с Shift — на десятки, с Option — на одну десятую.
Отладка мобильной версии. Чтобы посмотреть, как страница выглядит на разных экранах и мобильных устройствах, используют отладчики мобильной версии.
В Хроме отладчик спрятан за кнопкой Toggle Device Toolbar в веб‑инспекторе. В Сафари — это отдельный режим, Responsive Design Mode.
Отладчик мобильной версии в Сафари открывается с помощью
Что дальше
Инструментами разработчика можно отладить анимацию, скорость загрузки страницы, плавность прокрутки и многое другое. Об этом пишут разработчики инструментов у себя в документации и блогах:
Отладка мобильной версии. Чтобы посмотреть, как страница выглядит на разных экранах и мобильных устройствах, используют отладчики мобильной версии.
В Хроме отладчик спрятан за кнопкой Toggle Device Toolbar в веб‑инспекторе. В Сафари — это отдельный режим, Responsive Design Mode.
Отладчик мобильной версии в Сафари открывается с помощью
Что дальше
Инструментами разработчика можно отладить анимацию, скорость загрузки страницы, плавность прокрутки и многое другое. Об этом пишут разработчики инструментов у себя в документации и блогах:
1
Модули
Текстовые модули
Иллюстрации
Таблицы
Формы
Псевдоклассы
Псевдоэлементы ::after и ::before
1
Модули
Текстовые модули
Иллюстрации
Таблицы
Формы
Псевдоклассы
Псевдоэлементы ::after и ::before
Текстовые модули
Чтобы сверстать текстовый модуль, нужно задать шрифт, настроить кегль, интерлиньяж, начертание и выравнивание. За шрифт отвечает ЦСС‑свойство font-family, за кегль и интерлиньяж — font-size и line-height. Разберём их подробнее.
The only easy day
was yesterday
Текстовые модули
Чтобы сверстать текстовый модуль, нужно задать шрифт, настроить кегль, интерлиньяж, начертание и выравнивание. За шрифт отвечает ЦСС‑свойство font-family, за кегль и интерлиньяж — font-size и line-height. Разберём их подробнее.
The only easy day
was yesterday