Добавьте меню и логотип к коду, который мы написали на занятии.
Занятие 2. Основы CSS.
Помните! Чтобы текстовые файлики открывались в браузере нужно изменить расширение файла с .txt на .html и .txt на .css:
Пока вы покупаете чай в Кафе «Дом кофе», вы случайно сталкиваетесь с директором:
- Мы мало знаем о HTML и CSS. А нам нужна веб-страница, описывающая продукцию «Дом кофе». Вы можете помочь?
Директор кафе протягивает Вам салфетку с записями:
| Спасибо, что согласились помочь! Нам нужна простая веб-страница (смотрите ниже), на которой будут названия, цены и описания напитков. И не забудьте про наш логотип. Напитки кафе Дом Кофе Домашняя смесь, 100 руб., 150 мл Мягкая, нетерпкая смесь различных сортов кофе из Мексики, Боливии и Гватемалы. Кофе мокко, 200 руб., 200 мл Эспрессо, кипяченое молоко и шоколадный сироп. Капучино, 190 руб., 200 мл Смесь эспрессо и кипяченого молока с добавлением пены. Чай, 70 руб, 300 мл Ароматный напиток из черного чая. Чай со льдом, 80 руб, 300 мл Ароматный напиток из черного чая с добавлением льда, идеален в жару. |
Создайте папку для нового проекта, откройте её в Visual Studio Code, создайте index.html, сверстайте простую веб-страницу, которая описана на салфетке от директора:
Чтобы оформить страницу, нужно добавить на нее новый элемент <style> после тега title. Давайте вернемся к странице Дома Кофе и придадим ей определенный стиль. Добавьте в тег style немного CSS так, чтобы:
|
|
|
Синтаксис CSS:
| Css-свойство: значение1 значение2; |
Необходимые css-свойства:
· background-color задает цвет фона. Значение цвета можно указывать кодом этого цвета, код жёлто-коричневого цвета – это #d2b48c;
· margin-left и margin-right устанавливает размер левого и правого отступов. Может принимать значение как в пикселях (px, так и в процентах). Используйте 20% ширины страницы для левого и правого отступа;
· border определяет, как будет выглядеть граница вокруг содержимого. Задаются значения толщины границы, например, в пикселях, затем значение внешнего вида границы (пунктирная, сплошная и т.д.), далее указывается значение цвета границы. Задайте границу размером 2px (2 пикселя), пунктирную dotted и укажите цвет black;
· Padding создает поля вокруг основного текста на странице; Задайте верхнее, правое, нижнее и левое поля размером 10 пикселей;
· font-family определяет, какой шрифт использовать для текста. Задайте шрифт sans-serif.
Создайте в папке проекта новый файл style.css. Подключите style.css к index.html в теге <head>:
<link rel="stylesheet" href="style.css">
Перенесите содержимое тега <style> в созданный файл style.css. Закомментируйте или удалите тег <style>. Комментарий в html-коде заключается в специальные символы:
|
|
|
<!-- Текст комментария -->
Добавьте на страницу изображения коктейлей, вы уже знакомы с тегом <img> с первого занятия. Помните, что все изображения должны находиться в папке с нашим проектом, а желательно в отдельной папке с названием img.
Мы хотим в будущем добавить в верхнюю часть страницы меню навигации по нашему сайту, поэтому нам необходимо, чтобы основной контент страницы располагался ниже пространства, которое займёт меню. Также мы хотим, чтобы основной контент страницы располагался на бежевом фоне в рамке поверх фонового градиента. Нам необходимо для этого весь контент страницы обернуть в тег <div> и наделить его частью тех свойств, которыми сейчас обладает <body> и присвоить тегу <div> css-класс, который будет определять его css-свойства. Это делается с помощью свойства class для html-тегов. Название класса указывается в кавычках и должно соответствовать названию селектора-класса в файле style.css:
<div class="drinks">
…
</div>
А что в style.css? body – универсальный селектор. Такие селекторы задают свойства всем соответствующим тегам html-страницы. .drinks – селектор класса. Такие селекторы могут выборочно применяться к любым тегам html-страницы, кроме этого к одному тегу можно применять сколько угодно классов:
|
|
|
body {
background: linear-gradient(#f3dcb1, #3d1d0e);
font-family: sans-serif;
margin: 0;
padding: 0;
}
.drinks{
border: 2px dotted black;
padding: 10px 10px 10px 10px;
background-color: rgb(248, 223, 185);
margin-left: 20%;
margin-right: 20%;
margin-top: 60px;
}
Что изменилось на странице?
Сделайте все заголовки на странице тёмно-коричневого цвета с помощью css-класса с названием tcolor. Цвет можно задавать в css по-разному. Можно написать название цвета, как мы это сделали для границы вокруг основного контента страницы. Цвет также можно задать функцией rgb, при этом в скобках в качестве параметров указывается числовое значения красного, зелёного и синего цвета от 0 до 255. Цвет также можно задать формулой, как мы это сделали для градиента фона страницы:
Сделайте только основной заголовок курсивным и подчёркнутым шрифтом и расположите его по центру. Существуют селекторы-идентификаторы. Такие селекторы применяются только 1 раз к элементу на странице:
Html:
<h1 id="dtext" class="tcolor">Напитки кафе "Дом Кофе"</h1>
Css:
#dtext{
text-decoration: underline;
font-style: italic;
text-align: center;
}
Необходимо далее сделать все изображения на странице по центру. Центрирование применяется только к блочным элементам, но по умолчанию тег <img> строчный элемент. За отображения элемента на странице отвечает css-свойство display. Для отображения элементов в виде блоков оно принимает значение block, для отображения в строку – inline. Центрирование выполняется с помощью внешнего отступа, который принимает значения 0 auto, что означает отступ 0 пикселей сверху и снизу и автоматическое выравнивание по ширине. Также задайте всем изображениям максимальную ширину 200 пикселей и высоту 300 пикселей.
|
|
|
Итак, наша страница готова, но мы что-то забыли… Давайте вспомним, что говорил нам директор… «Не забудьте про наш логотип». Но где нам его разместить? Вы звоните директору и спрашиваете о том, где разместить логотип его кофейни на страницы. На что директор говорит, что хочет, чтобы логотип всегда был на виду у посетителей сайта.
Задание 1**
Предположим, что нам необходимо развивать наш сайт и мы хотим в будущем добавить страницу с контактами и картой, чтобы было легко найти кафе Дом Кофе, хотим добавить галерею с фотографиями кафе.
Создайте меню для навигации по сайту. Меню должно занимать всю ширину страницы, вписываться по цветовой гамме в наш сайт и откликаться при наведении курсора на пункт меню, осветляя цвет фона. А также меню должно иметь фиксированное положение, чтобы при скроллинге страницы меню всегда оставалось в поле зрения пользователя.
Подумайте, с помощью каких тегов можно создать меню?
Подсказка:
Для изменения цвета фона пункта меню при наведении вам необходимо знание о псевдоселекторах. Псевдоселектор hover отвечает на свойства объекта, на котором находится курсор:
Css:
a:hover {
…
};
Сделать ссылку без перехода на другую страницу можно следующим образом:
<a href="#">Главная</a>
Задание 2*
Добавьте логотип кафе в правую часть меню логотип кафе. Сделайте логотип круглым.
Что должно получиться:
Добавьте меню и логотип к коду, который мы написали на занятии.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Дом Кофе</title>
<!-- <style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="drinks">
<h1 id="dtext" class="tcolor">Напитки кафе "Дом Кофе"</h1>
<h2 class="tcolor">Домашняя смесь, 100 руб., 150 мл </h2>
<img src="img/Домашняя смесь.png">
<p>Мягкая, нетерпкая смесь различных сортов кофе из Мексики, Боливии и Гватемалы.</p>
<h2 class="tcolor">Кофе мокко, 200 руб., 200 мл </h2>
<img src="img/Кофе мокко.png">
<p>Эспрессо, кипяченое молоко и шоколадный сироп.</p>
<h2 class="tcolor">Капучино 190 руб., 200 мл </h2>
<img src="img/Капучино.png">
<p>Смесь эспрессо и кипяченого молока с добавлением пены.</p>
<h2 class="tcolor"> Чай, 70 руб, 300 мл </h2>
<img src="img/Чай.png">
<p>Ароматный напиток из черного чая, специй, молока и меда.</p>
<h2 class="tcolor">Чай со льдом, 80 руб, 300 мл </h2>
<img src="img/Чай со льдом.png">
<p>Ароматный напиток из черного чая, специй, молока и меда с добавлением льда. Идеален в жару.</p>
</div>
</body>
</html>
CSS:
body {
background: linear-gradient(#f3dcb1, #3d1d0e);
font-family: sans-serif;
margin: 0;
padding: 0;
}
img {
display: block;
margin: 0 auto;
max-width: 200px;
max-height: 300px;
}
.drinks{
border: 2px dotted black;
padding: 10px 10px 10px 10px;
background-color: rgb(248, 223, 185);
margin-left: 20%;
margin-right: 20%;
margin-top: 60px;
}
#dtext{
text-decoration: underline;
font-style: italic;
text-align: center;
}
.tcolor{
color: rgb(78, 37, 21);
}
Дата добавления: 2019-11-16; просмотров: 102; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!