🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Трюк: увеличение области клика с помощью псевдоэлемента
Поскольку псевдоэлементы расположены внутри элемента и технически являются его содержимым, за их счёт можно увеличивать область клика элемента.
Псевдоэлемент с абсолютным позиционированием и отрицательными вытяжками увеличит область клика элемента на размер отрицательной вытяжки. Абсолютное позиционирование мы подробнее разберём дальше в книге.
В примере область клика ссылок подкрашена для наглядности.
.extClickArea {
position: relative;
}
.extClickArea::after {
content: '';
position: absolute;
/* Вытягиваем псевдоэлемент на −0,3em за границы родителя — самого элемента */
inset: -0.3em;
}
Будьте осторожны, когда используете этот трюк для элементов, расположенных у границ экрана. Выступающий псевдоэлемент может добавить странице лишние поля и скролл
Позиционирование
Трюк: увеличение области клика с помощью псевдоэлемента
Поскольку псевдоэлементы расположены внутри элемента и технически являются его содержимым, за их счёт можно увеличивать область клика элемента.
Псевдоэлемент с абсолютным позиционированием и отрицательными вытяжками увеличит область клика элемента на размер отрицательной вытяжки. Абсолютное позиционирование мы подробнее разберём дальше в книге.
В примере область клика ссылок подкрашена для наглядности.
.extClickArea {
position: relative;
}
.extClickArea::after {
content: '';
position: absolute;
/* Вытягиваем псевдоэлемент на −0,3em за границы родителя — самого элемента */
inset: -0.3em;
}
Будьте осторожны, когда используете этот трюк для элементов, расположенных у границ экрана. Выступающий псевдоэлемент может добавить странице лишние поля и скролл
Позиционирование
Тест по разделу «Модули»
Для чего мы советуем перечислять несколько шрифтов в font-family?
Если на компьютере не установлен шрифт, если он не загрузился или в нём нет нужной буквы, браузер попробует следующий шрифт из списка
Как работают ключевые слова serif или sans-serif в font-family?
serif, браузер включит только строчные; если указан sans-serif, выключит ихКлючевое слово в конце списка описывает тип шрифта: serif — с засечками, sans‑serif — без засечек. Если браузер доберётся до него, то возьмёт системный шрифт соответствующего семейства
По какому признаку шрифты в этой книге называют веб‑безопасными?
Веб‑безопасными называют шрифты, входящие в стандартный набор операционной системы
Выберите верные утверждения о назначении ЦСС‑свойств.
font-size — кегльfont-size — ширина текстовой колонкиline-height — высота символовline-height — интерлиньяжfont-weight — кегльfont-weight — максимально допустимый размер файла шрифтаfont-weight — «жирность» шрифтаfont-style — подчёркивание, зачёркивание, надчёркиваниеfont-style — начертание шрифта, курсив и наклонtext-decoration — особенности шрифта, лигатуры и сглаживаниеtext-decoration — подчёркивание, зачёркивание, надчёркиваниеfont‑size и line‑height управляют кеглем и интерлиньяжем, font‑style управляет начертанием, font‑weight задаёт «жирность» шрифта, а text‑decoration добавляет подчёркивание, зачёркивание или надчёркивание
Какому элементу мы советуем задавать основной шрифт страницы и почему?
body, чтобы стили не пришлось повторять для всего подряд, принцип наследования в ЦССarticle и main, чтобы стили наследовались для всех статей и текстов, принцип «семантическое ядро»Наследование стилей позволяет писать меньше кода, избегать повторов стилей, последовательно стилизовать страницу от общего к частному
Чем управляет свойство font-variant?
Свойство font‑variant включает лигатуры и капитель
Для чего мы рекомендуем использовать атрибут alt?
Атрибут alt нужен на случай, когда картинка по ссылке недоступна, для помощи людям, которые используют программы чтения с экрана, и для поисковых роботов
чтобы узнать результат.
Тест по разделу «Модули»
Для чего мы советуем перечислять несколько шрифтов в font-family?
Если на компьютере не установлен шрифт, если он не загрузился или в нём нет нужной буквы, браузер попробует следующий шрифт из списка
Как работают ключевые слова serif или sans-serif в font-family?
serif, браузер включит только строчные; если указан sans-serif, выключит ихКлючевое слово в конце списка описывает тип шрифта: serif — с засечками, sans‑serif — без засечек. Если браузер доберётся до него, то возьмёт системный шрифт соответствующего семейства
По какому признаку шрифты в этой книге называют веб‑безопасными?
Веб‑безопасными называют шрифты, входящие в стандартный набор операционной системы
Выберите верные утверждения о назначении ЦСС‑свойств.
font-size — кегльfont-size — ширина текстовой колонкиline-height — высота символовline-height — интерлиньяжfont-weight — кегльfont-weight — максимально допустимый размер файла шрифтаfont-weight — «жирность» шрифтаfont-style — подчёркивание, зачёркивание, надчёркиваниеfont-style — начертание шрифта, курсив и наклонtext-decoration — особенности шрифта, лигатуры и сглаживаниеtext-decoration — подчёркивание, зачёркивание, надчёркиваниеfont‑size и line‑height управляют кеглем и интерлиньяжем, font‑style управляет начертанием, font‑weight задаёт «жирность» шрифта, а text‑decoration добавляет подчёркивание, зачёркивание или надчёркивание
Какому элементу мы советуем задавать основной шрифт страницы и почему?
body, чтобы стили не пришлось повторять для всего подряд, принцип наследования в ЦССarticle и main, чтобы стили наследовались для всех статей и текстов, принцип «семантическое ядро»Наследование стилей позволяет писать меньше кода, избегать повторов стилей, последовательно стилизовать страницу от общего к частному
Чем управляет свойство font-variant?
Свойство font‑variant включает лигатуры и капитель
Для чего мы рекомендуем использовать атрибут alt?
Атрибут alt нужен на случай, когда картинка по ссылке недоступна, для помощи людям, которые используют программы чтения с экрана, и для поисковых роботов
2
Расстановка
Позиционирование
Флексбоксы
Гриды
Адаптивная вёрстка
2
Расстановка
Позиционирование
Флексбоксы
Гриды
Адаптивная вёрстка
Позиционирование
Есть несколько способов разложить элементы по странице: позиционирование, флоаты, таблицы, флексбоксы и гриды. Мы постепенно разберём их все, а начнём с самого простого — позиционирования свойством position.
По умолчанию блоки выстраиваются друг под другом. С помощью position можно изменить это поведение и разместить элемент в любом месте страницы, задав ему координаты свойствами top, right, left и bottom. Есть пять значений свойства:
Static
Это значение по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.
Relative
Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.
position: relative;
left: 50px;
top: 80px;
Absolute
Элемент с абсолютным позиционированием располагается по заданным координатам, а из того места, где он был, удаляется.
position: absolute;
left: 50px;
top: 80px;По умолчанию эти координаты отсчитываются от окна. Но если у элемента есть родитель с position: relative или absolute, то координаты будут отсчитываться уже от него.
Fixed и sticky
Элемент с фиксированным позиционированием ведёт себя так же, как с абсолютным, но при этом не прокручивается вместе со страницей, зависая над ней. Закреплённое позиционирование — гибрид между обычным и фиксированным: элемент остаётся на месте, а когда область просмотра достигнет заданных координат — залипает.
position: sticky;
top: 18px;
Чаще всего используется для «залипающих» элементов. Например, с помощью position: sticky залипают иконки закладки и поиска в нашей книге. Аналогично работает и этот разворот: страница с примером залипает с position: sticky, а другая прокручивается.
Позиционирование
Есть несколько способов разложить элементы по странице: позиционирование, флоаты, таблицы, флексбоксы и гриды. Мы постепенно разберём их все, а начнём с самого простого — позиционирования свойством position.
По умолчанию блоки выстраиваются друг под другом. С помощью position можно изменить это поведение и разместить элемент в любом месте страницы, задав ему координаты свойствами top, right, left и bottom. Есть пять значений свойства:
Static
Это значение по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.
Relative
Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.
position: relative;
left: 50px;
top: 80px;
Absolute
Элемент с абсолютным позиционированием располагается по заданным координатам, а из того места, где он был, удаляется.
position: absolute;
left: 50px;
top: 80px;По умолчанию эти координаты отсчитываются от окна. Но если у элемента есть родитель с position: relative или absolute, то координаты будут отсчитываться уже от него.
Fixed и sticky
Элемент с фиксированным позиционированием ведёт себя так же, как с абсолютным, но при этом не прокручивается вместе со страницей, зависая над ней. Закреплённое позиционирование — гибрид между обычным и фиксированным: элемент остаётся на месте, а когда область просмотра достигнет заданных координат — залипает.
position: sticky;
top: 18px;
Чаще всего используется для «залипающих» элементов. Например, с помощью position: sticky залипают иконки закладки и поиска в нашей книге. Аналогично работает и этот разворот: страница с примером залипает с position: sticky, а другая прокручивается.
position: relative
Относительное позиционирование чаще всего используют для создания контекста, в котором будут абсолютно позиционироваться другие вложенные элементы:
.dots { position: relative }
.dot { position: absolute }
.top.left { top: 7px; left: 7px }
.top.right { top: 7px; right: 7px }
.bottom.left { bottom: 7px; left: 7px }
.bottom.right { bottom: 7px; right: 7px }
Важный момент: абсолютно спозиционированный элемент будет отсчитывать свои координаты от ближайшего родителя с position: relative
.dots { position: relative }
.dot {
position: absolute;
top: 0;
right: 0;
}
position: relative
Относительное позиционирование чаще всего используют для создания контекста, в котором будут абсолютно позиционироваться другие вложенные элементы:
.dots { position: relative }
.dot { position: absolute }
.top.left { top: 7px; left: 7px }
.top.right { top: 7px; right: 7px }
.bottom.left { bottom: 7px; left: 7px }
.bottom.right { bottom: 7px; right: 7px }
Важный момент: абсолютно спозиционированный элемент будет отсчитывать свои координаты от ближайшего родителя с position: relative
.dots { position: relative }
.dot {
position: absolute;
top: 0;
right: 0;
}