2020-05-12
422
Шаг 1. В папке, содержащей созданный в ходе выполнения практической работы №1 проект, создайте папку CSS.
Внутри этой папки создайте текстовый файл style, который сохраните с расширением style.css. Переместите в этот файл содержимое блока <style>..</style> из файла index.html (без тегов <style>..</style>).
Удалите блок <style>..</style> из всех HTML-файлов проекта.
Вместо этого добавьте в каждый из файлов в область <head>…</head> строку подключения таблицы стилей:
<link href="css/style.css" rel="stylesheet" type="text/css">
Убедитесь в том, что сайт по-прежнему поддерживает все созданные ранее стили.
Теперь, для изменения стилей всего сайта будем править только таблицу стилей.
Шаг 2. Изменим стиль шрифта всего сайта. Для этого укажем (дополнительно, к уже имеющимся стилям)
| div#content { font-family:Verdana; font-style:normal; font-size:normal; font-weight:bold; text-align:center; } | /*Для всего содержимого страницы*/ /*Начертание шрифта*/ /*Стиль шрифта*/ /*Размер шрифта*/ /*Жирность шрифта*/ /*Выравнивание текста*/ |
Все возможные значения этих и других атрибутов шрифта можно увидеть, например по этой ссылке: http://htmlbook.ru/content/svoystva-teksta
|
|
|
Коды цветов можно получить пройдя по этой, например, ссылке: https://colorscheme.ru/html-colors.html
Однако, если Вы посмотрите на полученный результат, то становится очевидно, что жирный (bold) шрифт в основной области страницы не нужен.Возможно, также, лучше изменить выравнивание текста в этой области на выравнивание по всей ширине. Для этого мы можем переопределить это свойство в стиле блока с идентификатором main:
| #main { color:#008080; font-weight:normal; text-align:justify; } | /*Новый цвет текста содержимого*/ /*Отмена жирного шрифта*/ /*Выравнивание по всей ширине блока*/ |
Далее, хотелось бы, чтобы ссылки в меню были больше похожи на кнопки. Для этого их можно оформить, например, так:
| nav { height: 40px; border: solid #333; padding: 1em; text-align: center; list-style-type:none; background-color:#66CDAA; } nav a { margin-right:10px; text-decoration:none; padding: 10px; color:white; border:solid white 2px; } | /*цвет фона меню*/ /*отступ между пунктами меню*/ /*отменить подчеркивание ссылки*/ /*рамка для каждого пункта меню*/ |
Получим следующий результат:
Шаг 3. Теперь попробуем разбить содержимое главной области еще на три блока, в каждом из которых будет выводиться информация об одном из направлений путешествий. При этом, каждая область должна быть оформлена в одном и том же стиле, поэтому удобно применять классы.
Сохраним в папке проекта img три изображения, соответствующие трем странам, о которых хотим написать: turkey.jpg, thai.jpg, egipt.jpg.
Добавим в файл index.html такой фрагмент кода:
|
|
|
| <div id="countries"> <p>Акции и скидки</p> <div class="country"> <p>Турция</p> <img src="img/turkey.jpg" > <p> <a class="actia" href="#" > Подробнее об акции </a> </p> </div> <div class="country"> <p>Египет</p> <img src="img/egipt.jpg" > <p> <a class="actia" href="#"> Подробнее об акции </a> </p> </div> <div class="country"> <p>Таиланд</p> <img src="img/thai.jpg" > <p> <a class="actia" href="#"> Подробнее об акции </a> </p> </div> </div> | <!--Создадим блок-обертку для всех блоков по странам--> <!--Создаем новый блок класса country--> <!--Вставляем соответствущую картинку--> <!--Добавляем ссылку на страницу (будущую) с более подробной информацией--> <!--Создаем еще один блок такого же класса--> <!--Создаем еще один блок такого же класса--> <!--Закрываем блок-обертку--> |
Добавим к таблице стилей стили, описывающие новые блоки и их отдельные элементы:
| #countries{ text-align:left; } .country{ width:30%; border:#66CDAA solid 2px; text-align: center; padding:5px; margin:3px; float:left; } .country img{ Width-max; height:150px; } div.country a{ background-color:#66CDAA; text-decoration:none; padding: 3px; color:white; box-shadow: 20px 0 20px -20px #000 inset, -20px 0 20px -20px #000 inset; } | /*Для блока-обертки:*/ /*Выравнивание текста по левому краю*/ /*Для блоков каждой из стран:*/ /*Занимает 30% от ширины блока-обертки*/ /*В цветной рамке*/ /*Расположение текста по центру*/ /*Внутренний отступ со всех сторон*/ /*Внешний отступ со всех сторон*/ /*Прижимается к левой стороне, следующий блок обтекает его справа*/ /*Для картинок внутри блоков*/ /*Для ссылок внутри блоков (чтобы сделать их более похожими на кнопки, в одном стиле с кнопками меню*/ /*Кнопки с эффектом выпуклости*/ |
В результате получим:
Внешний вид страницы уже довольно привлекательный, однако, при попытке просмотреть эту страницу на меньшем экране вы заметите множество проблем. Эти проблемы мы попробуем решить в следующей работе.
