Статья связана с репозиторием на GitHub.
В предыдущей статье мы создали вложенные div и раскрасили их в цвета радуги.
"Ты извинился, но сделал это без должного уважения"
"Крёстный отец"
Вот и мы также. Сделали - да, но сделали как говорится "инлайн" - без должного уважения: стили прописали прямо в коде HTML-документа. Как и говорилось ранее, это крайне порочная практика, ведущая к не приятным последствиям.
Займемся новой вёрсткой...
Итак, для начала - создадим пустой файл index.html.
Также создадим css-файл: в той же папке, где создали index.html, создадим index.css.
Но создать его мало - теперь нужно подключить. В index.html, в секции head, после <title>...</title>, пишем такую строку:
<link rel="stylesheet" type="text/css" href="index.css">
Должен получится такой текст в редакторе:
Вобщем-то всё: с добавлением закончили.
И попробуем создать что-то "по мотивам" этого:
Что мы видим? 5 блоков - значит у нас будет 5 тэгов div. Сразу раскрасим и расположим их (пока делаем БЕЗ уважения и смотрим, что выйдет из этого).
Для начала увеличим высоту нижнего и верхнего блоков - с ними проще всего.
Пояснение: размеры можно указывать в пикселях (px после числа - тогда размер будет именно заданным), процентах (% после числа - тогда браузер расчитает размер исходя из размеров родительского элемента), или же как для тэга body - число и vh (реальная высота экрана), либо vw (реальная ширина экрана). В случае vw/vh размер высчитывается автоматически исходя из реальных размеров окна браузера.
Тут можно даже рекомендовать использовать vw/vh для body и проценты для дочерних элементов. Тогда при изменении размеров окна, верстка будет динамически на это реагировать.
Стало "получше", но надо еще разобраться с синим и фиолетовым блоком.
Используем вложенность тэгов, о которой речь шла здесь. Для этого, обернем их еще одним тэгом div.
Обратите внимание на <div style="height: 65%;"> - высоту указываем именно у дочернего тэга, так как он расчитывает исходя из родительского body с высотой в полный экран (100vh).
Белая "дыра" на экране связана с тем, что мы задали высоту в 65%, но у дочерних высота не задана и определяется она сейчас исходя из высоты текста внутри div. Проверить это легко: в консоли уберите текст из синего или фиолетового блока и они перестанут быть видимыми. Остается добавить вариант расположения. Это инструкция display со свойством flex.
И еще расположим текст по центру (пока отцентрируем только по горизонтали). Это будет свойство text-align: center.
Смотрим?
Нужны еще рамки. Добавим ко всем закрашенным div такие строки: border: 2px solid black; margin: 0.1%; - тут мы говорим, что рамка будет у нас 2 пикселя в толщину, "solid" - сплошной линией черного цвета, и при этом каждый блок "сжать" со всех сторон на одну десятую процента от высоты и ширины соответственно.
Суть всего этого нагромождения картинок и текста - показать что такое CSS-файлы.
Теперь попробуем поиграться с возможностями, которые нам предоставляет добавление CSS.
Правила описания CSS:
В одной из предыдущих статей, я описывал основные свойства html-тэгов. Это id, name, class и аттрибуты. Всё это можно указывать в css-файле для установки свойств отображения определенных элементов.
Для наглядности возьму пример из той статьи:
<input id="login" class="auth_field" name="auth" type="text" _a="1">
- выборка по тэгу: input {...} - применяем указанное в фигурных скобках ко всем тэгам input в документе
- выборка по id: #login {...} - применяем только к элементу у которого id равен login
- выборка по классу: .auth_field {...} - применяем ко всем элементам, у которых класс auth_field
- выборка по аттрибуту и значению: [type="text"] {...} - применяем только к элементам, у которых есть аттрибут type и он равен text
- выборка по наличию аттрибута: [_a] {...} - применяем ко всем элементам, у которых есть аттрибут _a вне зависимости от его значения
Внутри фигурных скобок пишем ровно то, что писали в аттрибутах style. Таким образом, мы уменьшаем объем кода в HTML, и имеем возможность управлять стилями на странице из одного файла.
Смотрим на код и ищем повторяющиеся свойства. Тут может быть несколько вариантов. Любой будет хорош. Почему бы не этот к примеру:
Вся секция body пусть будет высотой на весь экран и с заливкой жёлтым цветом
body {height: 100vh; background-color: yellow;}
элемент с классом group будет высотой в 65% экрана и все, что внутри будет слева на право располагаться
.group {display: flex; height: 65%;}
если у элемента аттрибут _pos равен block10, то высота пусть будет 10%, а заливка голубым цветом
[_pos="block10"] {height: 10%; background-color: aqua;}
если у элемента аттрибут _pos равен block15, то высота пусть будет 15
[_pos="block15"] {height: 15%;}
для секции body и всех div, не имеющих класс group, устанавливаем границу в 2 пикселя сплошной линией черного цвета
body, div:not(.group) {border: 2px solid black;}
для всех div, не имеющих класс group, делаем сжатие на 0,1% и текст в них центрируем
div:not(.group) {text-align: center; margin: 0.1%;}
для первого div, вложеннего в элемент с классом group, делаем заливку синим цветом и устанавливаем ширину в 10%
.group div:nth-child(1) {background-color: blue; width: 10%;}
для второго div, вложеннего в элемент с классом group, делаем заливку фиолетовым цветом и устанавливаем ширину в 90%
.group div:nth-child(2) {background-color: magenta; width: 90%;}
для первого элемента внутри секции body устанавливаем цвет заливки в зеленый
body:first-child {background-color: green;}
второй элемент с аттрибутом _pos, равным block15, делаем заливку оранжевым цветом
[_pos="block15"]:nth-child(2) {background-color: orange;}
И параллельно делаем изменения в файле index2.html, убирая все без исключения style="...":
Код можно скопировать и попробовать у себя на компьютере.
Итак, что можно сказать о том, что такое CSS и зачем его стоит использовать?
Однозначно это уменьшение кода HTML-документа и структурирование стилей, накладываемых на его элементы. Это позволяет менять в одном месте дизайн отдельных элементов. К примеру - толщину рамок всех элементов мы можем сменить в 19 строке на правом скрине выше.
Смысл сейчас, вероятно, не очень очевиден. Ну есть в коде style и ладно. Но, нормальный проект имеет вполне может иметь под 50-100 полноценных страниц с повторяющимися элементами. CSS позволяет оптимизировать сразу все страницы, сколь много их не было бы в проекте, при этом в разы уменьшая размер кода.
Все статьи попадают в "Оглавление канала". Не пропускаем новости!