Практическая работа с CSS

1) 2 балла
• Создать папку «20.02.24 Фамилия»
• Открыть блокнот, скопировать туда основную структуру html
• Сохранить документ в папку «20.02.24 Фамилия» под именем
Фамилия.html
• Открыть блокнот
• Сохранить документ в папку под именем style.css

3.

2) Документ Фамилия.html 4 балла
• Заголовок стихотворения
• Стихотворение (не менее 6 строк), автор
• Рисунок для стихотворения
• Название рецепта блюда
• Маркированный или нумерованный список для ингредиентов
• Рисунок для блюда
Рекомендации:
• Строки стихотворения оформлять отдельными абзацами в тегах <p></p>
каждая
• Рисунки сохранить в папку 20.02.24 Фамилия

4.

Пример работы без
подключения css

5.

Пример итоговой
работы

6.

2) Документ style.css 4 балла
• Селектор для абзаца (цвет, размер, междустрочное расстояние)
• Селектор для абзаца по id (другой цвет шрифта)
• Селектор для абзаца по классу для автора (см. пример итоговой работы)
• Селектор для заголовка
• Селектор для списка
• Селектор для рисунка (width; height; float; margin; border:1px solid #CCC;
padding;)
Рекомендации:
• Самостоятельно определите, какие свойства необходимы там, где они не
указаны

7.

Помощь
1. Для подключения файла style.css используйте строку:
<link rel="stylesheet" href="style.css">
Она располагается внутри тегов <head>
2. Для установления междустрочного интервала используй свойство line-height:
??px;
3. float:left; – позиционирование картинки по левому краю, текст обтекает
картинку справа
4. margin – задает внешние отступы, например, margin: 4px 10px 2px 0px; - мы
задали внешние отступы, 4px - от верха, 10px - справа, 2px снизу и 0px слева от
изображения
5. border:1px solid #CCC; – сплошная линию размером 1 пиксель и светло серым
цветом;
6. padding:6px; – внутренний отступ между изображением и рамкой, равный 6
пикселям

8.

Помощь
1. https://code.mu/ru/markup/book/prime/#r=/ru/markup/book/prime/th
eory/propeties-inheritance/
2. https://www.youtube.com/watch?v=iLvf9ewmONQ
3. Учебник: § 4.8 – 4.10

English Русский Rules