🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Тест
Выберите верные утверждения о раскладке элементов с помощью position.
absolute располагает элемент по заданным координатам относительно ближайшего родителя position: relativebody, если родителей с position: relative нетfixed располагает элемент над страницей, элемент зависает над ней в указанных координатахstatic создаёт контекст, в котором будут абсолютно позиционироваться другие элементыsticky значение по умолчанию, элементы просто выстраиваются друг под другомЭлементы с position: absolute и fixed перестают занимать место в потоке элементов и переносятся в указанные координаты. При этом элемент с position: absolute прокручивается вместе со страницей, а элемент с position: fixed висит над ней
Что в этой книге считается ключевой идеей раскладки флексбоксами?
Флексбокс заставляет вложенные элементы раскладываться и выравниваться по двум осям: главной и поперечной
Каким свойством включается раскладка флексбоксами внутри элемента?
flex: 1flex: onflexbox: truedisplay: flexdisplay: flexboxvisibility: flexalign-items: flexdisplay: flex включит раскладку флексбоксами. Элемент станет флекс‑контейнером, а вложенные в него элементы — флекс‑элементами
Выберите верные утверждения о назначении ЦСС‑свойств.
flex-direction управляет направлением главной осиflex-direction управляет направлением поперечной осиjustify-content управляет расположением элементов на поперечной осиjustify-content управляет расположением элементов на главной осиalign-items управляет высотой элементовalign-items управляет расположением элементов на поперечной осиalign-items управляет расположением элементов на главной осиflex‑direction задаёт направление главной оси. justify‑content задаёт выравнивание по главной оси, а align‑items — по поперечной
Какое свойство задаёт выравнивание флекс‑элементам по отдельности на поперечной оси?
align-selfjustify-contentself-alignelement-positionlist-style-positionalign‑self отвечает за расположение отдельного элемент на поперечной оси
Что по умолчанию происходит с элементами, не вмещающимися во флекс‑контейнер?
По умолчанию флекс‑контейнер однострочный: не вмещающиеся элементы переполняют его
За что отвечает свойство align-content?
align‑content управляет выравниванием строк в многострочных флекс‑контейнерах
Какими из этих свойств можно задать отступы между флекс‑элементами?
flex-distancemargingapflex-wraplist-style-positionСвойство margin задаёт внешние отступы любых элементов, а gap управляет отступами элементов внутри флекс‑контейнера
Выберите верные утверждения о назначении ЦСС‑свойств.
flex-basis рекомендует идеальный или предположительный размер элемента по главной осиflex-basis включает раскладку флексбоксамиflex-basis управляет выравниванием отдельного взятого элемента на главной осиflex-grow задаёт коэффициент, определяющий, какую долю свободного места в контейнере получит элементflex-grow флекс‑элементов задаёт пропорцию, в которой они поделят свободное пространствоflex-grow указывает направление, в котором должен увеличиваться элементflex-shrink выключает раскладку флексбоксамиflex-shrink сужает флекс‑контейнер, «отжимая» воздух внутриflex-shrink задаёт коэффициент, определяющий, насколько сильно уменьшится элемент, если в контейнере не хватит местаflex-shrink приказывает элементу исчезнуть из контейнера, если другим элементам понадобится больше местаflex-basis определяет начальный, идеальный размер элемента. Если в контейнере останется свободное место, flex-grow определит, какую его долю получит элемент. Если места не хватит, flex-shrink определит, как сильно элемент уменьшится, чтобы всё вместилось в контейнер
Для чего используют свойство order?
order управляет порядком отдельных флекс‑элементов
чтобы узнать результат.
Тест
Выберите верные утверждения о раскладке элементов с помощью position.
absolute располагает элемент по заданным координатам относительно ближайшего родителя position: relativebody, если родителей с position: relative нетfixed располагает элемент над страницей, элемент зависает над ней в указанных координатахstatic создаёт контекст, в котором будут абсолютно позиционироваться другие элементыsticky значение по умолчанию, элементы просто выстраиваются друг под другомЭлементы с position: absolute и fixed перестают занимать место в потоке элементов и переносятся в указанные координаты. При этом элемент с position: absolute прокручивается вместе со страницей, а элемент с position: fixed висит над ней
Что в этой книге считается ключевой идеей раскладки флексбоксами?
Флексбокс заставляет вложенные элементы раскладываться и выравниваться по двум осям: главной и поперечной
Каким свойством включается раскладка флексбоксами внутри элемента?
flex: 1flex: onflexbox: truedisplay: flexdisplay: flexboxvisibility: flexalign-items: flexdisplay: flex включит раскладку флексбоксами. Элемент станет флекс‑контейнером, а вложенные в него элементы — флекс‑элементами
Выберите верные утверждения о назначении ЦСС‑свойств.
flex-direction управляет направлением главной осиflex-direction управляет направлением поперечной осиjustify-content управляет расположением элементов на поперечной осиjustify-content управляет расположением элементов на главной осиalign-items управляет высотой элементовalign-items управляет расположением элементов на поперечной осиalign-items управляет расположением элементов на главной осиflex‑direction задаёт направление главной оси. justify‑content задаёт выравнивание по главной оси, а align‑items — по поперечной
Какое свойство задаёт выравнивание флекс‑элементам по отдельности на поперечной оси?
align-selfjustify-contentself-alignelement-positionlist-style-positionalign‑self отвечает за расположение отдельного элемент на поперечной оси
Что по умолчанию происходит с элементами, не вмещающимися во флекс‑контейнер?
По умолчанию флекс‑контейнер однострочный: не вмещающиеся элементы переполняют его
За что отвечает свойство align-content?
align‑content управляет выравниванием строк в многострочных флекс‑контейнерах
Какими из этих свойств можно задать отступы между флекс‑элементами?
flex-distancemargingapflex-wraplist-style-positionСвойство margin задаёт внешние отступы любых элементов, а gap управляет отступами элементов внутри флекс‑контейнера
Выберите верные утверждения о назначении ЦСС‑свойств.
flex-basis рекомендует идеальный или предположительный размер элемента по главной осиflex-basis включает раскладку флексбоксамиflex-basis управляет выравниванием отдельного взятого элемента на главной осиflex-grow задаёт коэффициент, определяющий, какую долю свободного места в контейнере получит элементflex-grow флекс‑элементов задаёт пропорцию, в которой они поделят свободное пространствоflex-grow указывает направление, в котором должен увеличиваться элементflex-shrink выключает раскладку флексбоксамиflex-shrink сужает флекс‑контейнер, «отжимая» воздух внутриflex-shrink задаёт коэффициент, определяющий, насколько сильно уменьшится элемент, если в контейнере не хватит местаflex-shrink приказывает элементу исчезнуть из контейнера, если другим элементам понадобится больше местаflex-basis определяет начальный, идеальный размер элемента. Если в контейнере останется свободное место, flex-grow определит, какую его долю получит элемент. Если места не хватит, flex-shrink определит, как сильно элемент уменьшится, чтобы всё вместилось в контейнер
Для чего используют свойство order?
order управляет порядком отдельных флекс‑элементов
Гриды
CSS grid layout или гриды — это набор свойств для раскладки элементов на странице или в отдельном элементе.
Чтобы включить гриды, нужно задать элементу display: grid и сетку: количество строк и столбцов, размеры и расстояния между ними. Элемент станет грид‑контейнером, а все вложенные в него элементы станут грид‑элементами и встанут по сетке.
Относитесь к гридам, как к прямоугольному формату, внутри которого можно определить направляющие — грид‑линии, задав таким образом колонки и строки, и разложить в получившиеся ячейки содержимое.
Начнём с разметки и направляющих:
<div class="grid"></div>.grid {
display: grid;
grid-template-rows: 200px 100px; /* Задаём горизонтальные направляющие, два ряда высотой в 200 и 100 пк */
grid-template-columns: 150px 150px 200px; /* Задаём вертикальные направляющие, две колонки шириной 150 пк и одну шириной 200 пк */
gap: 18px 18px; /* Задаём отступы между рядами и колонками */
}
Добавим внутрь несколько элементов. Элементы заняли три верхние ячейки.
<div class="grid">
<div>Первый элемент</div>
<div>Второй элемент</div>
<div>Третий элемент</div>
</div>
Добавим ещё один элемент, но поставим его между первыми двумя. Новый элемент занял вторую ячейку и «вытолкнул» последующие элементы в нижний ряд.
<div class="grid">
<div>Первый элемент</div>
<div>Внезапный элемент</div>
<div>Второй элемент</div>
<div>Третий элемент</div>
</div>
Гриды
CSS grid layout или гриды — это набор свойств для раскладки элементов на странице или в отдельном элементе.
Чтобы включить гриды, нужно задать элементу display: grid и сетку: количество строк и столбцов, размеры и расстояния между ними. Элемент станет грид‑контейнером, а все вложенные в него элементы станут грид‑элементами и встанут по сетке.
Относитесь к гридам, как к прямоугольному формату, внутри которого можно определить направляющие — грид‑линии, задав таким образом колонки и строки, и разложить в получившиеся ячейки содержимое.
Начнём с разметки и направляющих:
<div class="grid"></div>.grid {
display: grid;
grid-template-rows: 200px 100px; /* Задаём горизонтальные направляющие, два ряда высотой в 200 и 100 пк */
grid-template-columns: 150px 150px 200px; /* Задаём вертикальные направляющие, две колонки шириной 150 пк и одну шириной 200 пк */
gap: 18px 18px; /* Задаём отступы между рядами и колонками */
}
Добавим внутрь несколько элементов. Элементы заняли три верхние ячейки.
<div class="grid">
<div>Первый элемент</div>
<div>Второй элемент</div>
<div>Третий элемент</div>
</div>
Добавим ещё один элемент, но поставим его между первыми двумя. Новый элемент занял вторую ячейку и «вытолкнул» последующие элементы в нижний ряд.
<div class="grid">
<div>Первый элемент</div>
<div>Внезапный элемент</div>
<div>Второй элемент</div>
<div>Третий элемент</div>
</div>
За вертикальные направляющие, а следовательно, за количество и размер колонок отвечает свойство grid-template-columns. Задаётся в любых величинах длины: пикселях, em, rem, vw, vh и процентах от ширины родителя.
.columns {
display: grid;
grid-template-columns: 50px 20% auto; /* Первая колонка получит ширину в 50 пк, вторая — 20%, третья — всё оставшееся пространство */
}Единицы измерения длины
За вертикальные направляющие, а следовательно, за количество и размер колонок отвечает свойство grid-template-columns. Задаётся в любых величинах длины: пикселях, em, rem, vw, vh и процентах от ширины родителя.
.columns {
display: grid;
grid-template-columns: 50px 20% auto; /* Первая колонка получит ширину в 50 пк, вторая — 20%, третья — всё оставшееся пространство */
}Единицы измерения длины
grid‑template‑columns: 1fr создаст колонку на всю ширину контейнера
grid‑template‑columns: 1fr 1fr поделит контейнер пополам
grid‑template‑columns: 2fr 1fr поделит контейнер в соотношении 2:1
grid‑template‑columns: 1fr 100px 2fr выделит второй колонке 100 пк, а оставшееся место поделит между первой и третьей колонкой в соотношении 1:2
Чтобы поделить контейнер на колонки в нужной пропорции, используют единицу измерения fr (от fraction). Для каждой «резиновой» колонки укажите её долю в fr относительно других колонок, также заданных в fr.
Абсолютные единицы и fr можно смешивать. В этом случае пропорции посчитаются относительно свободного места, оставшегося после выделения фиксированных колонок.
Чтобы поделить контейнер на колонки в нужной пропорции, используют единицу измерения fr (от fraction). Для каждой «резиновой» колонки укажите её долю в fr относительно других колонок, также заданных в fr.
Абсолютные единицы и fr можно смешивать. В этом случае пропорции посчитаются относительно свободного места, оставшегося после выделения фиксированных колонок.
grid‑template‑columns: 1fr создаст колонку на всю ширину контейнера
grid‑template‑columns: 1fr 1fr поделит контейнер пополам
grid‑template‑columns: 2fr 1fr поделит контейнер в соотношении 2:1
grid‑template‑columns: 1fr 100px 2fr выделит второй колонке 100 пк, а оставшееся место поделит между первой и третьей колонкой в соотношении 1:2
grid‑template‑columns: repeat(6, 1fr) — то же самое, что grid‑template‑columns: 1fr 1fr 1fr 1fr 1fr 1fr
grid‑template‑columns: repeat(3, 2fr) repeat(3, 1fr) поделит контейнер в соотношении 2:2:2:1:1:1
grid‑template‑columns: 50px repeat(4, 1fr) 50px выделит первой и последней колонке по 50 пк, а оставшееся место поделит поровну между четырьмя колонками
Чтобы не дублировать описания одинаковых колонок, используют функцию repeat. Скажем, repeat(6, 1fr) создаст шесть направляющих шириной в 1fr. Функцию можно использовать в перемешку с другими значениями и повторять столько раз, сколько нужно.
Чтобы не дублировать описания одинаковых колонок, используют функцию repeat. Скажем, repeat(6, 1fr) создаст шесть направляющих шириной в 1fr. Функцию можно использовать в перемешку с другими значениями и повторять столько раз, сколько нужно.
grid‑template‑columns: repeat(6, 1fr) — то же самое, что grid‑template‑columns: 1fr 1fr 1fr 1fr 1fr 1fr
grid‑template‑columns: repeat(3, 2fr) repeat(3, 1fr) поделит контейнер в соотношении 2:2:2:1:1:1
grid‑template‑columns: 50px repeat(4, 1fr) 50px выделит первой и последней колонке по 50 пк, а оставшееся место поделит поровну между четырьмя колонками