Лабораторна робота №6 Тема: Знайомство з CSS. Знайомство із селекторами.

Завдання:

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. Зберегти файл.