Урок "Види CSS, Фон. Текст" - завдання 3, 4
Завдання 3 і 4 для уроку "Види CSS. Фон. Текст"
Завдання 3.
(щоб виконати, дивіться у статтю "Шпаргалка HTML" http://it-shkola.in.ua/uroky-html/99-shparhalka-po-html і статтю "Вступ у CSS" http://it-shkola.in.ua/uroky-css/90-urok-1-vstup-u-css )
1. Запустити HTML-редактор Notepad++
2. Створити новий документ, зберегти його з іменем index3.html
3. Створити основу html
4. Вказати мову сторінки - українська (підказка: <html lang="uk">)
5. Вказати кодування сторінки UTF-8 між тегами <head></head> (підказка: <meta charset="utf-8">)
6. Вказати заголовок сторінки Онлайн кінотеатр
7. Вказати найголовніший заголовок першого рівня Онлайн кінотеатр
8. Вставити абзац і у ньому - малюнок http://it-shkola.in.ua/images/css-lessons/kino_logo.png
9. Створити абзац і вставити текст:
Переваги непіратського кіно досить прості:
10. Створити нумерований список:
Також таким чином ви підтримуєте світове та українське кіно і допомагаєте поширенню українського дубляжу.
12. За допомогою вбудованого стилю налаштувати елементи сторінки:
1) h1
накреслення шрифта Garamond (підказка: font-family:Garamond;)
розмір шрифта 100px (підказка: font-size:100px;)
Переваги непіратського кіно досить прості:
10. Створити нумерований список:
1) ви отримуєте якісний фільм,
2) не порушуєте ніяке законодавство,
3) насолоджуєтесь переглядом.
11. Створити абзац і вставити текст:Також таким чином ви підтримуєте світове та українське кіно і допомагаєте поширенню українського дубляжу.
12. За допомогою вбудованого стилю налаштувати елементи сторінки:
1) h1
накреслення шрифта Garamond (підказка: font-family:Garamond;)
розмір шрифта 100px (підказка: font-size:100px;)
стиль шрифта курсив italic (підказка: font-style:italic;)
колір шрифта FireBrick (підказка: color:FireBrick;)
вирівнювання по центру (підказка: text-align:center;)
2) абзац з малюнком
вирівняти по центру
3) налаштувати малюнок
рамка товщиною 30px суцільною лінією кольору FireBrick (підказка: border:30px solid FireBrick;)
розмір малюнка 100% (підказка: width:100%;)
налаштування блока малюнка - включати рамка і внутрішні відступи (підказка: box-sizing: border-box;)
13. За допомогою внутрішнього стилю налаштувати елементи сторінки:
1) для усіх абзаців вказати
вирівнювання по центру
розмір шрифта 50px
колір фону FireBrick
колір тексту білий
2) для нумерованого списку вказати
вирівнювання по центру
колір шрифта FireBrick
розмір шрифта 20px
міжрядковий інтерал 150% (підказка: line-height:150%;)
стиль списку - без позначок (підказка: list-style:none;)
насиченість шрифта - напівжирний bold (підказка: font-weight:bold;)
Результат:
Завдання 4.
Увага! Для виконання завдання необхідно скористатись кодом, написаним для Завдання 3.
1. Підібрати новий основний колір сторінки і замінити ним колір FireBrick (див. сайт https://colorscheme.ru/html-colors.html )
2. Для заголовка h1 підібрати нове накреслення шрифта і вказати його замість Garamond (шрифти системи можна побачити, запустивши Microsoft Word)
3. Змінити налаштування абзацу, у якому розміщено малюнок:
1) вказати для нього клас "image-logo"
2) вказати фон для цього класу - білий
4. Вказати ширину малюнка 80%
5. Змінити налаштування рамки малюнка
1) поекспериментувати зі стилем і вибрати свій (вказати замість solid такі можливі значення dotted | dashed | double | groove | ridge | inset | ouset )
2) підібрати на власний смак товщину рамки і колір
6. Для абзаців вказати нові налаштування (крім класу "image-logo")
вирівнювання (спробувати і підібрати за бажанням): вліво / вправо / по ширині / по центру (підказка: left, right, justify, center)
вирівнювання по центру (підказка: text-align:center;)
2) абзац з малюнком
вирівняти по центру
3) налаштувати малюнок
рамка товщиною 30px суцільною лінією кольору FireBrick (підказка: border:30px solid FireBrick;)
розмір малюнка 100% (підказка: width:100%;)
налаштування блока малюнка - включати рамка і внутрішні відступи (підказка: box-sizing: border-box;)
13. За допомогою внутрішнього стилю налаштувати елементи сторінки:
1) для усіх абзаців вказати
вирівнювання по центру
розмір шрифта 50px
колір фону FireBrick
колір тексту білий
2) для нумерованого списку вказати
вирівнювання по центру
колір шрифта FireBrick
розмір шрифта 20px
міжрядковий інтерал 150% (підказка: line-height:150%;)
стиль списку - без позначок (підказка: list-style:none;)
насиченість шрифта - напівжирний bold (підказка: font-weight:bold;)
Результат:
Завдання 4.
Увага! Для виконання завдання необхідно скористатись кодом, написаним для Завдання 3.
1. Підібрати новий основний колір сторінки і замінити ним колір FireBrick (див. сайт https://colorscheme.ru/html-colors.html )
2. Для заголовка h1 підібрати нове накреслення шрифта і вказати його замість Garamond (шрифти системи можна побачити, запустивши Microsoft Word)
3. Змінити налаштування абзацу, у якому розміщено малюнок:
1) вказати для нього клас "image-logo"
2) вказати фон для цього класу - білий
4. Вказати ширину малюнка 80%
5. Змінити налаштування рамки малюнка
1) поекспериментувати зі стилем і вибрати свій (вказати замість solid такі можливі значення dotted | dashed | double | groove | ridge | inset | ouset )
2) підібрати на власний смак товщину рамки і колір
6. Для абзаців вказати нові налаштування (крім класу "image-logo")
вирівнювання (спробувати і підібрати за бажанням): вліво / вправо / по ширині / по центру (підказка: left, right, justify, center)
розмір шрифта (спробувати і підібрати за бажанням): 120% / 40px / 100em / 150pt / xx-small, x-small, small, medium, large, x-large, xx-large /
міжрядковий інтервал (спробувати і підібрати за бажанням): 1.5 / 200% / 50px
насиченість шрифта (підібрати з вказаних варіантів): bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
стиль шрифта курсив / нахилений / звичайний (підказка: italic, obtique, normal)
7. Зробити першу літеру абзацу - червоного кольору і розміру 300%:
стиль шрифта курсив / нахилений / звичайний (підказка: italic, obtique, normal)
7. Зробити першу літеру абзацу - червоного кольору і розміру 300%:
p:first-letter {
font-size: 300%;
color: red;
}
