Лабораторна робота №6 Тема: Знайомство з CSS. Знайомство із селекторами.
Завдання:
0. Опрацювати теоретичні відомості:
https://html5book.ru/osnovy-css/
https://webref.ru/course/css-basics/color
https://webref.ru/course/css-basics/size
https://html5book.ru/block-inline-elements/
1. Пройти курси по CSS на HTMLAcademy:
https://htmlacademy.ru/courses/41
https://htmlacademy.ru/courses/42
2. Створити файл стилів style.css. Створити HTML-документ task1.html та підключити у ньому style.css.
1. Додати декілька абзаців тексту. Використовуючи селектор тегів задати для них зелений колір тексту та вирівнювання по центру. (color: red; text-align:center;).
2. Додати до 1-го та 3-го абзаців клас та за до селектору класів змінити колір тексу на червоний.
3. Додати до другого абзацу ідентифікатор та за до відповідного селектору змінити колір тексту на рожевий.
4. Додати на сторінку 2 будь-яких посилання та задати їм червоний колір тексту.
5. Створити багаторівневе меню (використати маркований список та тег для додавання посилань – кожен елемент списку – посилання):
⦁ Фрукти:
⦁ Ананас
⦁ Апельсин
⦁ Банан
⦁ Яблуко
⦁ Овочі:
⦁ Картопля
⦁ Огірок
⦁ Буряк
⦁ Ягоди
⦁ Полуниця
⦁ Малина
⦁ Смородина

5.1. Усім посиланням меню задати рожевий колір.
5.2. Лише пунктам головного меню (посиланням) задати зелений колір.
5.3. Прибрати маркери лише у вкладених списках
(list-style-type:none;).
5.4. Змінити тип маркера (list-style-type: square;) останнього списку (полуниця, малина, смородина).
5.5. Для посилань, що знаходяться в останньому списку задати властивість (text-decoration: none;).
При виконанні 5-ого завдання використати селектори тегів, класів, дочірні та контекстні селектори.
3. Створити HTML-документ task2.html та підключити у ньому style.css. Скопіювати в нього наступний код:
filter
Метод arr.filter(callback[, thisArg]) используется для фильтрации массива через функцию.
Он создаёт новый массив, в который войдут только те элементы arr, для которых вызов callback(item, i, arr)возвратит true.
Например:

var positiveArr = arr.filter(function(number) {
return number > 0;
});

alert( positiveArr ); // 1,2,3
3.1. Лише для абзацу, що знаходиться ПІСЛЯ заголовка першого рівня, задати розмір шрифту (font-size:20px;).
3.2. Для програмного коду, що міститься в абзаці задати червоний колір тексту.
3.3. Для програмного коду, що знаходиться ПІСЛЯ абзацу задати рожевий колір тексту.
При виконанні завдання використати дочірні та сусідні селектори.
4. Створити HTML-документ task3.html та підключити у ньому style.css. Реалізувати з використанням стилів для списків меню за зразком. Використати селектори для дочірніх елементів:

5. Створити HTML-файл за зразком. Оформити сторінку за до CSS. Зображення повинно бути посиланням на зображення більшого розміру:

6. Реалізувати сторінку за зразком за до HTML та CSS

7. Реалізувати форму за зразком.

8. Зберегти файл.

292

315

Посмотреть ответы 1

Ответы на вопрос:

Nelia88

Информатика

4,4(11 оценок)

38=100110 1110-10001010110 1011-11

Задай свой вопрос

Как otvet5GPT работает?

otvet5GPT использует большую языковую модель вместе с базой данных GPT для обеспечения высококачественных образовательных результатов. otvet5GPT действует как доступный академический ресурс вне класса.
Сколько это стоит?

Проект находиться на стадии тестирования и все услуги бесплатны.
Могу ли я использовать otvet5GPT в школе?

Конечно! Нейросеть может помочь вам делать конспекты лекций, придумывать идеи в классе и многое другое!
В чем отличия от ChatGPT?

otvet5GPT черпает академические источники из собственной базы данных и предназначен специально для студентов. otvet5GPT также адаптируется к вашему стилю письма, предоставляя ряд образовательных инструментов, предназначенных для улучшения обучения.