Проверка задания 2
На уроке 7 вы получили своё второе задание:
- Создать новый html-файл "project5.html";
- Вставить в него другой отрывок из стихотворения "Бородино";
- Расставить строки с помощью тега <br>;
- Выделить в отрывке жирным шрифтом существительные;
- Выделить в отрывке наклонным курсивом прилагательные;
- Подчеркнуть в отрывке союзы и предлоги.
Я взял очередной отрывок, и вот что получилось:
У вас должно быть то же самое, но со своим текстом, если вы не повторяли мой.
Сегодня мы освоим первый и один из самых важных селекторов языка проектирования CSS3 - margin.
Селектор отступа контейнера на экране браузера
Для того, чтобы мы могли двигать созданные нами на предыдущих занятиях контейнеры <div>, используют очень простой селектор:
margin - селектор CSS, который устанавливает величину отступа от каждого края контейнера.
Отступы могут выражаться в пикселях или процентах, хотя могут также быть и в дюймах или пунктах. Однако мы пока будем использовать для измерения пиксели. Величину в пикселях сложно представить точно, поэтому тренировка формирует "глазомер".
Первые уроки мы будем использовать открытый код, который имеет некоторые преимущества в работе новичка:
- Он виден и может быть быстро использован как пример;
- Он хорошо тренирует внимание и аккуратность в работе.
О недостатках открытого кода мы поговорим через несколько уроков!
Характеристики селектора margin
Значения характеристики пишутся очень просто, например, 10px.
Отступы бывают со всех четырёх сторон, поэтому часто указываются (перечисляются) четыре значения, например: 10px 20px 15px 25px.
Сам селектор оформляется так:
margin: 10px 20px 15px 25px;
В конце характеристики любого селектора ВСЕГДА ставиться знак ";".
Селекторы CSS с их характеристиками размещаются внутри открывающего тега. Так как CSS - это каскад стилей, то обязательно пишется команда "style".
Пример тега с селектором и его характеристикой:
<div style=" margin: 10px 20px 15px 25px;"> ... </div>
Давайте, теперь включим данный пример селектора CSS в контейнер нашего примера домашнего задания "project5.html":
Обновите свой файл (сохраните: File => Save) и откройте в браузере:
Контейнер у нас сдвинулся. Это и есть результат работы селектора margin.
Порядок характеристик селектора margin
Отступы перечисляются по часовой стрелке, начиная с верхнего края контейнера: верхний, правый, нижний, левый. Так как у нас пока только один контейнер в примере, то мы увидели, что он отодвинулся сверху на 10 пикселей (10px) и слева на 25 пикселей (25px) от краёв экрана.
Почему сверху слева? Дело в том, что в программировании и проектировании ноль координат (начало) находится в верхнем левом углу в отличие от привычной нам школьной геометрии. Так удобнее проектировать.
Если у вас задумано делать парные отступы "сверху-снизу" и "справа-слева", то повторяться не требуется - достаточно написать только размер отступа в каждой паре, например:
<div style=" margin: 15px 30px;"> ... </div>
В этом случае, сверху и снизу отступы будут по 15 пикселей (15px), а справа и слева - по 30 пикселей (30px).
Давайте, попробуем теперь изменить код CSS в нашем файле:
Если у вас задуманы одинаковые отступы от всех краёв контейнера, то достаточно написать одну характеристику, например:
<div style=" margin: 50px;"> ... </div>
В этом случае, все отступы будут по 50 пикселей (50px).
Давайте, попробуем теперь изменить код CSS в нашем файле:
Разновидности селектора margin
Не хотите себя утруждать расписыванием всех отступов, если нужен только один? Нет проблем! Для этого существуют варианты селектора:
- margin-top - отступ только сверху
- margin-right - отступ только справа
- margin-bottom - отступ только снизу
- margin-left - отступ только слева
Пока у нас только один контейнер, мы можем попробовать два частных селектора.
Сначала назначим только отступ сверху в 25 пикселей:
Теперь назначим только отступ слева в 25 пикселей:
Использование селектора margin с несколькими контейнерами
А теперь настало время вернуться к файлу "project3.html", где мы набирали текст о романе "Война и мир".
Настало время создать внутри html-файла второй контейнер <div>!!!
- Сохраним данный файл как "project6.html": File => Save As.
- Поставим курсор после закрывающего тега </div> и нажмём Enter.
- На новой строке ниже формируем новый контейнер <div></div>.
- Ставим курсор между тегами и нажимаем Enter, образовав пустую строку для контента.
Вставим туда любой текст, например: «Признанный критикой всего мира величайшим эпическим произведением новой европейской литературы, "Война и мир" поражает уже с чисто технической точки зрения размерами своего беллетристического полотна. Только в живописи можно найти некоторую параллель в огромных картинах Паоло Веронезе в венецианском Дворце дожей, где тоже сотни лиц выписаны с удивительною отчётливостью и индивидуальным выражением.»
Мы теперь видим 4 абзаца, но на самом деле у нас всего два контейнера <div>, внутри первого из которых 3 контейнера <p> (абзацы), то есть матрёшка - главный принцип веб-проектирования сайтов.
Теперь назначим для только первого контейнера отступы со всех сторон по 20 пикселей:
margin: 20px;
Второй контейнер сдвинулся ниже, но не изменился. Чтобы изменить и его расположение, присвоим его селектору отступа margin, например, 30 пикселей, но только справа и слева:
margin: 0px 30px;
Теперь вы научились перемещать контейнеры относительно рамки браузера и других контейнеров.
Практика
Задание 3. Поэкспериментируйте с отступами этих двух контейнеров друг от друга и краёв браузера, используя все варианты и частные варианты селектора margin. Выделите все глаголы жирным шрифтом, а прилагательные курсивом, подчеркните имена собственные.
На следующем уроке мы научимся эквилибрировать содержимым контейнера в "матрёшке" с помощью ещё одного селектора CSS.
Если вам понравилось, подписывайтесь на мой канал!
PhD Alexander G. Buychik, info@buychik.ru, +79217702472