Начнем со следующего кода
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Варкалось. Хливкие шорьки<br>
Пырялись по наве,<br>
И хрюкотали зелюки,<br>
Как мюмзики в мове.<br>
</body>
</html>
дальше буду писать только то что находится в body.
И так современный html код примерно на 95% состоит из комбинаций тега div, который мы почему-то пока ни разу не упомянули.
Этот тег в отличие от тех что мы рассматривали в предыдущем задании, никак на оформление не влияет, и именно поэтому является идеальным кандидатом в качестве некоторой оболочки для контента.
Попробуем обернуть код в тег div
<div>
Варкалось. Хливкие шорьки<br>
Пырялись по наве,<br>
И хрюкотали зелюки,<br>
Как мюмзики в мове.<br>
</div>
выглядит все один в один
Зачем же он собственно нужен? А для того чтобы указывать стили для каждого блока.
Стили
Например, вот хочу я чтобы текст был выровнен по центру. Как мне это сделать?
Тут нам пригодятся так называемые атрибуты. Добавим атрибут для указания стиля
и пропишем в нем стиль который укажет что мы хотим выравнивать текст по центру (стиль text-align)
проверяем
мы можем указать несколько стилей, например, я могу указать чтобы весь текст был толстым (стиль font-weight):
то есть в целом, любой стиль имеет вид:
название: значение;
соответственно, если несколько стилей, то пишем
название1: значение1; название2: значение2; ...
по сути div тег является таким обобщенным тегом который позволяет более тонко настраивать отображение текста.
Я могу использовать сколько угодно тегов div
<div style="text-align: center; font-weight: bold;">
Варкалось. Хливкие шорьки
</div>
<div style="text-align: right; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="text-align: left; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="text-align: center; font-style: italic;">
Как мюмзики в мове.
</div>
плюс нет необходимости использовать тег переноса на новую строку, так как div по умолчанию занимает все строку и не позволяет другим divам находится на той же строке
Граница border
Вообще надо понять принцип поведения блока div.
Он занимает все расстояние от левого до правого края и расширяется в высоту в зависимости от содержимого.
Добавим границу к нашему блоку. Для этого есть стиль border
<div style="text-align: center; border: 1px solid black;">
Варкалось. Хливкие шорьки
</div>
получится так
формат стиля border такой:
- border: <толщина линии> <тип линии> <цвет линии>
а если запихать текст побольше, он начнет расширять область в высоту
<div style="text-align: center; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в Москве,
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в летнюю серенькую пару,
был маленького роста, упитан, лыс, свою приличную шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
сверхъестественных размеров очки в черной роговой оправе.
Второй – плечистый, рыжеватый, вихрастый молодой человек в
заломленной на затылок клетчатой кепке – был в ковбойке,
жеваных белых брюках и в черных тапочках.
</div>
<div style="text-align: right; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="text-align: left; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="text-align: center; font-style: italic;">
Как мюмзики в мове.
</div>
кстати еще один интересный момент, несмотря на переносы в тексте, в html они игнорируются, но тем не менее браузер автоматически делает переносы текста и расширяет область, чтобы текст влезал на страницу.
Отступ внутри рамки (padding)
Еще один очень важный стиль, который очень часто используется в природе это padding (отступ). Грубо говоря это расстояние от текста до границы блока. Задавать его можно тремя разными способами:
- padding: <отступ с каждого края> (например padding: 8px)
- padding <отступ сверху и с низу> <отступ слева и справа> (например padding: 8px 16px)
- padding <отступ сверху> <отступ справа> <отступ снизу> <отступ слева> (например padding: 8px 16px 8px 16px)
<div style="text-align: center; padding: 8px 16px; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в Москве,
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в летнюю серенькую пару,
был маленького роста, упитан, лыс, свою приличную шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
сверхъестественных размеров очки в черной роговой оправе.
Второй – плечистый, рыжеватый, вихрастый молодой человек в
заломленной на затылок клетчатой кепке – был в ковбойке,
жеваных белых брюках и в черных тапочках.
</div>
Отступ снаружи рамки (margin)
Тоже регулярно используется. Допусти добавлю я все div-ам рамки:
<div style="text-align: center; padding: 8px 16px; border: 1px solid black;">
<!-- это комментарий, его копировать не надо, я его сюда вставил чтобы весь текст не копировать ... -->
</div>
<div style="text-align: right; border: 1px solid black; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="text-align: left; border: 1px solid black; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="text-align: center; border: 1px solid black; font-style: italic;">
Как мюмзики в мове.
</div>
выглядит это все слеплено:
так вот, внешние границы позволяют убрать эту склееность. Формат тот же что и у padding
- margin: <отступ с каждого края> (например, margin: 8px)
- margin <отступ сверху и с низу> <отступ слева и справа> (например margin: 8px 16px)
- margin <отступ сверху> <отступ справа> <отступ снизу> <отступ слева> (например, margin: 8px 16px 8px 16px)
добавляем:
<div style="margin: 8px 0; text-align: center; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
<div style="margin: 8px 0; text-align: right; border: 1px solid black; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="margin: 8px 0; text-align: left; border: 1px solid black; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="margin: 8px 0; text-align: center; border: 1px solid black; font-style: italic;">
Как мюмзики в мове.
</div>
вот теперь красота:
Фон блока (background)
Часто хочется как-то выделить или раскрасить блок. Для этого используется стиль background. У него очень много всяких форм, но мы рассмотрим две, для заливки одним цветом или для заливки градиентом
- background: <цвет в hex формате> (например: background: #a6ff00)
- background: linear-gradient(<угол градиента><цвет в hex формате>, <цвет в hex формате>); (например inear-gradient(90deg, #00aeff, #ffa6f3)
<div style="background: #a6ff00; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
чтобы подкорректировать цвет просто наведи мышку на цвет и немного подожди:
получится как-то так:
градиент делается вот так
<div style="background: linear-gradient(90deg, #00aeff, #ffa6f3); text-align: right; margin: 8px 0; border: 1px solid black; text-decoration: underline;">
Пырялись по наве,
</div>
а выглядит вот так:
Ширина блока (width)
Иногда очень хочется ограничить размеры блока. Тут на помощь приходит свойство width, формат простой:
- width: <ширина> (например: width: 300px)
<div style="width: 300px; background: #a6ff00; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
причем указывать размер не обязательно в px, можно указать в процентах, например, 50%:
<div style="width: 50%; background: #a6ff00; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
правда он все равно займет не 50 процентов. На деле окажется что 50% будет занимать только сам текст, а плюсом будет еще идти всякие padding и margin и даже ширина границы
чтобы такое поведение подправить надо добавить свойство box-sizing: border-box;, вот так:
<div style="box-sizing: border-box; width: 50%; background: #a6ff00 ; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
вот тогда все будет четко
Вообще, не пугайся что мы так много пишем в этот несчастный атрибут style, в следующем задании мы научимся делать классы, и писать станет сильно комфортнее.
Подсветка отдельных слов или предложений (span)
Помимо управления видом самих блоков, можно также управлять видом отдельных частей текста.
Для этого используется тег span. Он также используется в качестве обертки текста.
А главное отличие от div заключается в том, что он не добавляет переносы на новую строку.
То есть я могу выделить отдельное слово и, например, изменить фон текста:
<div style="...">
Однажды весною, в час небывало жаркого заката, в <span style="background: red;">Москве</span>,
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в летнюю серенькую пару,
был маленького роста, упитан, лыс, свою приличную шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
сверхъестественных размеров очки в черной роговой оправе.
Второй – плечистый, рыжеватый, вихрастый молодой человек в
заломленной на затылок клетчатой кепке – был в ковбойке,
жеваных белых брюках и в черных тапочках.
</div>
будет выглядеть вот так:
могу padding добавить:
<div style="width: 50%; box-sizing: border-box; background: #a6ff00 ; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в <span style="padding: 8px; background: red;">Москве</span>,
<!-- ... -->
</div>
странно выглядит, правда:
дело в том, что span пытается не нарушать межстрочных интервалов и вообще стандартной логики поведения текста.
Но часто хочется прямо вот сильно выделить слово. Для этого добавляется специальный стиль display: inline-block;, вот так:
<div style="width: 50%; box-sizing: border-box; background: #a6ff00 ; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в <span style="display: inline-block; padding: 8px; background: red;">Москве</span>,
<!-- ... -->
</div>
тогда оно выглядит нормально
вот такие дела =)
Ну думаю хватит пока, можно теперь и задание поделать
