Проверка задания 6
На уроке 11 вы получили задание:
- Переименуйте ваш проект в следующий - "project11.html".
- Приведите все блоки <p> в каждом контейнере к одинаковой ширине в 220 пикселей.
- Откорректируйте высоту блоков "inside11" и "inside12", чтобы они помещались внутри контейнера "inside1".
- Откорректируйте высоту блоков "inside21" и "inside22", чтобы они помещались внутри контейнера "inside2".
- Откорректируйте высоту контейнеров "inside1" и "inside2", чтобы все они помещались внутри контейнера "common".
- Разместите третий контейнер "out" во внутрь контейнера "common", как мы уже сделали с двумя первыми во время занятия, и расположите его правее.
- Откорректируйте высоту блоков "out1" и "out2" и его самого контейнера "out", чтобы всё вмещалось в единый контейнер "common".
У меня получился такой результат в html-файле:
На экране браузера у вас должен появиться схожий результат дизайна:
Как вы видите, у меня вторые блоки в парах, например, прижались к первым в контейнерах. Это можно легко поправить, или изменить, увеличив значение селектора left во вторых блоках <p> пар c 250 пикселей, например, на 270 пикселей. Тогда получится уже красивее:
Также попробуйте сузить экран вашего браузера, и вы заметите, что внутренние контейнеры сохранили свои размеры, а вот общий контейнер "поплыл" вслед за вашим браузером. Это произошло потому, что у нас поставлена его ширина "auto", т.е. автоматическая ширина по экрану браузера.
Чтобы исключить данную проблему в нашем проекте, необходимо автоматическое значение изменить на абсолютную. Как же сделать так, чтобы ширину не подбирать сто раз? Тогда надо заняться арифметикой:
- отступ общего контейнера "common" - 20 пикселей;
- отступ первого внутреннего контейнера - 25 пикселей;
- ширина каждого внутреннего контейнера - 500 пикселей;
- третий внутренних контейнер сдвинут вправо на 1200 пикселей.
Суммируем: 1200 + 500 + 20 + 25 = 1745 (пикселей). Мы должны ещё прибавить толщину границ внутренних контейнеров. В общем, получается ещё 30 пикселей. Итого - 1775 пикселей.
Поэтому получается, чтобы поставить более-менее симметричную рамку общего контейнера, мне необходимо назначить ширину, примерно 1815 пикселей.
Таким образом, при использовании абсолютных значений селекторов ширины (width) и высоты (height) мы должны их просчитывать, чтобы получить достаточно корректный дизайн.
В дальнейшем, мы научимся делать "резиновые" блоки, которые будут гармонично изменяться, но сохранять положение относительно друг друга при любом изменении параметров экрана браузера и самого монитора.
На этом же занятии мы познакомимся с двумя селекторами цвета.
Селектор цвета заднего фона
background-color - селектор CSS, включающий цветовое изменение фона страницы в целом или любого его сектора, занятого контейнером или блоком.
Значения данного селектора записываются либо словесно латиницей (не все цвета), либо цифрами и буквами после хэштега. Примеры самых простых цветов:
- чёрный - black или 000000,
- серый - grey или 808080,
- синий - blue или 0000FF,
- красный - red или FF0000,
- зелёный - green или 008000,
- жёлтый - yellow или FFFF00,
- белый - white или FFFFFF.
На будущее, вы можете пользоваться таблицами цветов, например здесь:
Запись селектора цвета заднего фона и его значения производится следующим образом:
background-color: lightblue; или background-color: хэштегADD8E6;
Сохраним наш домашний проект под новым именем "project12.html" и впишем в стили общего контейнера "common" параметры заднего фона первым способом. Сохраним новый проект и откроем его в браузере Google Chrome. У вас должно получиться то же, что и у меня:
Теперь можно поэкспериментировать с отдельными контейнерами и блоками внутри них. Давайте, контейнеры окрасим в лимонный цвет (LemonChiffon) с использованием словесного значения, а блоки в коралловый (Coral) с использованием буквенно-цифрового значения:
- лимонный цвет - LemonChiffon,
- коралловый цвет - хэштегFF7F50.
У вас должен получиться такой код вашей страницы:
Теперь покрупнее отдельные контейнеры и их блоки:
В итоге, сохранив файл и обновив браузер, мы получаем следующий дизайн:
Как мы видим, общий контейнер "common" сохранил свой фоновый цвет, а внутренние контейнеры приобрели лимонный цвет, в то же время внутренние блоки отдельно окрасились в определённый нами цвет.
Таким образом, мы научились задавать фоновый цвет любого сегмента страницы браузера, используя цветовую палитру.
Для более профессионального использования цветов я рекомендую скачать и пользоваться программой ColorMania последней версии, например, 6.3.
Селектор цвета шрифта
Скачав и установив программу ColorMania, о которой было сказано выше, мы можем устанавливать не только любой, даже самый уникальный цвет фона, но и цвет шрифта, используя специальный селектор CSS:
color - селектор CSS, включающий цвет текстового контента контейнера или отдельного блока.
Чтобы понять, как он работает, впишем данный селектор в блок "inside11" контейнера "inside1" и дадим тексту словесное значение белого цвета (white).
Следовательно, дизайн вашей страницы должен немного измениться:
Как мы видим, текст первого блока изменил цвет с чёрного на белый и остался читабельным на данном коралловом фоне.
Теперь уделим внимание интерфейсу самой программы ColorMania, чтобы уметь ею пользоваться корректно.
Слева сверху показывается выбранный цвет, ниже вы видите меню. По умолчанию мы видим первую строку меню - HTML Hex, т.е. как раз цвета в кодировке веб-вёрстки. Ниже высвечивается код цвета. Достаточно нажать кнопку "Copy" под кодом, и можно вставить его в свой html-файл. По центру расположены горизонтальные показатели в кодировке RGB, т.е. создания цвета с помощью опции "красный-зелёный-синий". Ниже три качественные опции. Справа круг цветовой гаммы, где можно поискать уникальный цвет: нажав там на какую-либо точку, вы увидите слева её полный цвет и код в системе HTML, т.е веб-вёрстки.
Теперь попробуем на центральной панели RGB настроить нужный нам цвет, например, красный 68, зелёный 65 и синий 255. У вас высветится следующая информация слева:
Вот этот цветовой код HTML Hex мы и будем использовать для шрифта второго блока "inside12". Вставим его в стили данного блока:
1) нажать "Copy" под кодом цвета в программе;
2) прописать селектор "color" в стиле блока "inside12";
3) вставить скопированный код цвета после двоеточия селектора, хлопнув правой кнопкой мыши и выбрав во всплывшем окне меню команду "Paste" (Вставить);
4) поставить точку с запятой после вставленного значения селектора перед кавычками.
В моём примере селектор "color" уже вписан в конце второй строки стилей. вам необходимо не забывать прописывать сам селектор, а потом уже после двоеточия вставлять его значение.
В итоге мы получаем следующее изменение в дизайне нашей страницы - цвета текста второго блока первого контейнера:
Таким образом, в мы научились управлять селектором CSS цвета текстового контента. Он очень сход с управлением селектором CSS фонового цвета.
Практика
Задание 7.
- Переименовать наш проект в следующий - "project13.html".
- Создать под контейнером "common" дополнительный контейнер "under" такой же ширины и рамкой толщиной 5 пикселей и общим отступом 20 пикселей.
- Создать в контейнере "under" два внутренних контейнера "under1" и "under2" равной ширины и рамкой толщиной 4 пикселя.
- В каждом из внутренних контейнеров создать по два блока, назначив им соответствующие верхним блокам имена и рамкой толщиной 2 пикселя.
- Вставить в блоки тексты в 12-15 слов, отодвинув их от краёв блоков (рамок) на 10 пикселей.
- Откорректировать все контейнеры и блоки контейнера "under" по ширине и высоте, чтобы они заняли равные площади.
- Назначить внутренним контейнерам внешние отступы сверху, снизу и слева по 20 пикселей, столько же между ними.
- Назначить внутренним блокам внешние отступы сверху, снизу и слева по 15 пикселей и равное между ними внутри своих контейнеров.
- Придать новому общему контейнеру фоновый цвет.
- Придать внутренним контейнерам заданный вами в ColorMania фоновый цвет.
- Придать внутренним блокам заданный вами в ColorMania фоновый цвет.
- Придать текстовому контенту каждого блока контейнера "under" свой индивидуальный цвет, который сохранит читабельность текста.
На следующем уроке мы научимся работать со шрифтами.
Если вам понравилось, подписывайтесь на мой канал!
PhD Alexander G. Buychik, info@buychik.ru, +79217702472