Проверка задания 4
На уроке 9 вы получили задание:
- Назначьте трём блокам <p> первого контейнера <div> различные индивидуальные селекторы и их персональные характеристики - в каждом блоке используйте все четыре селектора (см. "Разновидности селектора padding");
- Назначьте второму контейнеру <div> внешние отступы: 22px 34px 45px 30px;
- Назначьте второму контейнеру <div> жирную чёрную рамку толщиной 6 пикселей;
- Назначьте содержимому (контенту) второго контейнера <div> внутренний отступ от краёв контейнера: 20px 30px 25px 35px;
- Заключите содержимое (контент) второго контейнера <div> в отдельный блок-абзац <p>;
- Назначьте этому одиночному блоку жирную чёрную рамку толщиной 3 пикселя;
- Назначьте содержимому (контенту) этого одиночного блока <p> внутренний отступ от краёв контейнера: 22px 33px 44px 11px.
У меня получился такой результат в html-файле:
На экране браузера у вас должен появиться схожий результат дизайна:
При полном экране ваш результат будет выглядеть так:
Однако важно то, что ваши теги и селекторы правильно расставлены и получили корректные характеристики. Программа Sublime Text показывает это, придавая определённые цвета каждой категории вёрстки. У меня, как вы заметили, теги HTML оцвечиваются в красный, селекторы CSS - в небесно-синий, числовые характеристики тегов и селекторов - в фиолетовый.
А вот что будет показано в Sublime Text, если я допущу серьёзную ошибку:
В строке 3 я сейчас не поставил кавычки после знака "=" и в конце описания стилей CSS перед закрывающей скобкой тега <div>. Программа сразу оцветила область ошибки в зелёный.
А вот пример частичной ошибки кода и работа Sublime Text:
В строке 3 теперь я показал, что якобы забыл поставить открывающие кавычки описания стилей CSS, но в конце вспомнил и на автомате поставил. Sublime Text сразу выделил область частичной ошибки красным фоном. Значит, здесь чего-то не хватает.
Поэтому следите за цветовыми подсказками редактора, но тогда, когда вы закончили писать блок, контейнер или стили, потому что по самому ходу вашего написания редактор может не понять, напишите ли вы всё верное или нет.
Размерный селектор width и его характеристики
Сегодня мы с вами познакомимся с первым в курсе размерным селектором CSS:
width - селектор, устанавливающий ширину контейнера.
Характеристика ширины даётся обычно в процентах или пикселях, хотя может также быть и в дюймах или пунктах. Однако пока мы будем использовать для измерения пиксели и проценты. Дело в том, что ширина экрана браузера зависит от разрешения монитора, поэтому значения в пикселях могут отображаться на различных мониторах по-разному. Также может использоваться и значение auto, т.е. указывает ширину, исходя из типа и содержимого элемента.
Обычно же мы используем измерение в пикселях, например:
width: 500px;
Откроем наш домашний проектный html-файл "project7.html" и сохраним его уже под именем "project8.html":
Далее, чтобы поработать с ним, упростим значения внутренних отступов всех контейнеров до 10 пикселей.
Теперь поработаем с первым блоком <p> в верхнем контейнере <div>. Назначим ему ширину в 600 пикселей:
width: 600px;
Мы видим, что первый блок сжался влево по умолчанию, но "пустое" место справа никуда не делось - она осталось занято данным блоком:
На панели инструментов вёрстки внизу справа на схеме мы видим, что визуальная ширина нашего блока стала всего 600 пикселей.
Следующим шагом назначим второму блоку <p> ширину уже в процентах от ширины экрана браузера по умолчанию:
width: 50%;
Во многих случаях ширину блока или контейнера эффективнее назначать именно в процентах, чтобы на всех мониторах ваш дизайн выглядел максимально схоже. Иначе мы можем стать свидетелями такой вот ситуации:
Я сузил окно браузера Google Chrome. Ширина первого блока была назначена в пикселях, поэтому не изменилась в абсолютных значениях. Ширина второго блока - в процентах к общей ширине окна, следовательно, именно он пропорционально сузился. Текст в нём уже не помещался в 2 строки, и поэтому блок удлинился, чтобы вместить третью строку текстового контента.
А теперь назначим ширину в процентах всему первому контейнеру <div>:
width: 80%;
Как мы видим, контейнер сузился на 80%, а за ним пропорционально второй и третий блок, т.к. второй задан в процентах от границ контейнера, а третий действует автоматически, т.к. у него нет указания ширины. А вот первый блок так и остался при своей фиксированной ширине в 600 пикселей.
А вот что произойдёт, если мы искусственно сузим само окно браузера:
Мы видим, что второй контейнер стал даже уже первого, т.к. он сохраняет пропорции к ширине материнского контейнера, а первый - с фиксированной шириной.
А теперь зададим ширину контейнера 60%, а первого блока изменим с 600 на 900 пикселей:
И вот что получится, если мы сузим окно браузера на мониторе:
Первый блок уже вылез за пределы контейнера, что при вёрстке, конечно, недопустимо. Поэтому, чаще всего, используют именно процентные значения при характеристике селектора ширины контейнера.
Исправим ошибку тем, что растянем первый контейнер <div>, но не на весь экран, а на только 85%.
Практика
Задание 5.
- Создайте новый проектный html-файл "project9.html";
- Вставьте в файл три контейнера <div> с небольшими текстами, в которых будет по 2 абзаца, т.е. блока (контейнера) <p> по 3-4 предложения;
- Назначить каждому контейнеру <div> внешние отступы в 25 пикселей и жирную чёрную рамку толщиной 5 или 6 пикселей;
- Назначьте содержимому (контенту) каждого контейнера <div> внутренний отступ от краёв контейнера: 15px 22px 18px 27px;
- Назначьте ширину каждого контейнера <div> последовательно: 80%, 70% и 60%;
- Назначьте каждому блоку <p> внутри контейнеров <div> внешние отступы по 14 пикселей и жирную чёрную рамку толщиной 3 пикселя;
- Назначьте каждому блоку <p> внутри контейнеров <div> внутренние отступы по 18 пикселей;
- Назначьте каждому блоку <p> внутри каждого контейнера <div> различную ширину в процентах - 40% и 65% соответственно.
На следующем уроке мы научимся перемещать наши контейнеры и блоки внутри них как хотим!
Если вам понравилось, подписывайтесь на мой канал!
PhD Alexander G. Buychik, info@buychik.ru, +79217702472