Я продолжаю цикл статей по созданию собственного веб-сайта в ОС Убунту
Итак, в прошлый раз мы остановились на изучении тегов <h1> - заголовок, <p> - параграф, <strong>. Ссылка на начало:
Рассмотрим тег div. Этим тегом ограничивается ширина контента. Познакомимся с ним на практике написав длинный контент на нашей странице. Для этого между открывающим и закрывающим тегом параграф напишем например это:
"Продолжаем изучать HTML. Мы уже изучили теги заголовка. И теги параграфа. Так же мы научились выделять текст тегом strong"
Сделаем отступ и снова открывающим и закрывающим тегом параграф напишем например:
"Теперь же изучим тег div и затронем базовый синтаксис CSS"
Теперь после тега <body> поставим открывающий тег <div> и в конце после закрывающего тега </p> поставим закрывающий тег </div>:
Теперь сохраним изменения комбинацией CTRL+S и откроем файл index.html браузером:
Теперь же попробуем изменить ширину блока. Что бы повлиять на ширину блока существует CSS. С помощью CSS можно оформить страницу как угодно. Для этого надо добавить тегу div так называемый class. Пишется это так: <div class="">
Назовем наш class "content". Вот так: <div class="content"> и сохраним изменения:
Если опять открыть файл через браузер то изменений не будет так как мы ещё не указали тегу div с классом контент как себя вести. Для того что бы указать классу контент стиль надо ввести следующую запись:
Введём новый тег style под закрывающим тегом div. Пишется он так:
<style type="text/css"></style>
Между открывающим и закрывающим тегом style будем писать наш CSS. Туда на скриншоте указывает красная стрелочка.
Для этого напишем .content{}
В скобках напишем ширину блока. Пишется это так:
В скобки наводим курсор и жмем ENTER и далее пишем width:; И дадим ширину триста пикселей написав width: 300px;
И так вкратце что же было написано?
Точка перед content означает обращение к классу.
content это имя класса.
{ это начало условий.
} это окончание условий.
width это ширина блока.
: 300px; это окончание условий.
Теперь сохраним изменения и посмотрим на результат открыв файл браузером:
Как видно, теперь контент стал шириной в триста пикселей.
Теперь попробуем через CSS немного разукрасить блок.
Для этого под width: 300px; напишем background-color: и после многоточия напишем нужный цвет. Например green;
green это название цвета. Обязательно после того как пишем какой-либо стиль, надо ставить точку с запятой.
Теперь сохраним изменения и посмотрим на результат:
Теперь наш фоновый блок с контентом стал зелёного цвета.
Теперь рассмотрим тег <span>
При помощи этого тега можно будет изменить цвета слов. Для этого напишем:
<span class="color_world">Мы уже изучили теги заголовка</span>. Далее удалить ранее написанное background-color: green; и под скобкой после width: 300px; напишем .color_world{}
И в скобках напишем color: red;
red это означает красный цвет.
Теперь сохраним изменения и посмотрим в браузере что получилось:
Как видно слова "Мы уже изучили теги заголовка." выделились красным цветом.
