Практичні завдання для самостійного вивчення CSS/JS/JQuary.
Любомир Іваницький

Урок 1.

Існує 3 способи, як здійснити підключення CSS стилів для вашого сайту.

1 спосіб.Опис стилю CSS безпосередньо в самому тезі.
Внутрішній CSS атрибут style використовується для конкретного тега HTML.
Цей варіант підключення CSS не є практичним, так як в цьому випадку необхідно налаштовувати кожен тег HTML окремо.
Завдання 1 Створіть сторінку css.html. Випробуйте такий варіант підключення:

<Html>
<Body style = "background-color:black;">

<H1 style = "color:white;padding: 30px;"> ВПУ №14 м. Коломия</h1>
<P style = "color:white;">Здобуть тут свою майбутню  професію </P>

</Body>
</Html>
 

2 спосіб.Опис стилю CSS задається безпосередньо в тезі голови сторінки <Head> </Head>
Завдання 2 Відредагуйте файл css.html. Вилучте описи стилів з тегів, задайте їх в інший спосіб:
<Head>
<Style type = "text/css">
body {
      background-color: blue;
  }
  h1 {
      color: red;
      padding: 60px;
  }
<Style>
</Head>

3 спосіб.Опис стилю CSS найзручніший варіант в зовнішньому .css файлі.
Цей варіант розглянемо в наступних уроках.

Застосовують стиль за допомогою css властивостей.
Формат запису властивостей такий назва властивості:значення властивості(правило);

Нижче подано перелік властивостей, які використовують для опису стилю шрифта.
Таблиця 1.
Властивість
Опис
Значення
Приклад запису
font-family
Сімейство шрифта
Serif - шрифти з «зарубками»
Sans-serif - шрифти рубані,
Monospace - моноширинні шрифти
body {font-family: Verdana, Helvetica, Arial, sans-serif;}
font-style
Стиль шрифта
Normal (звичайний)
Italic (курсивний)
Oblique (похилий)
Inherit (наслідування батьківської властивості)
h2 {font-family: "Times New Roman", serif; font-style: italic;}
font-variant
Трансформація букв шрифта в зменшені заголовні букви
Normal
small-caps
inherit
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
font-weight
Ширина ліній шрифта ("Жирність")
Normal (нормальний)
Bold (жирний)
Bolder (збільшення жирності)
Lighter (зменшення жирності)
100 (жирність в числовому значенні)
200
300
400
500
600
700
800
900
inherit
H1{font-family: arial, verdana, sans-serif; font-weight: bold;}
font-size
Розмір шрифта
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
розмір %
inherit
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}


Приклади використання шрифтів.
font-family:Open Sans; З Вас панове кава для Любомира Михайловича
font-family:Comic Sans MS,sans-serif; З Вас панове кава для Любомира Михайловича

Типи накреслення.
font-style:normal; З Вас панове кава для Любомира Михайловича
font-style:italic; З Вас панове кава для Любомира Михайловича
!!!Можна курсив задати інакше:
font-style:oblique;З Вас панове кава для Любомира Михайловича
font-style:oblique 40 deg;З Вас панове кава для Любомира Михайловича

!!!Врахуйте, що не всі шрифти підтримують цей набір.
Розмір.
font-size:8px; З Вас панове кава для Любомира Михайловича
font-size:12px; З Вас панове кава для Любомира Михайловича
font-size:14px; З Вас панове кава для Любомира Михайловича

Насиченість шрифту
100 - тонке накреслення;
200 - зверхсвітле;
300 - світле;
400 - нормальне (аналогічно normal);
500 - середнє;
600 - напівжирний;
700 - жирне (аналогічно bold);
800 - сверхжірное;
900 - важке.
!!!Врахуйте, що не всі шрифти підтримують цей набір.
font-weight: 100; З Вас панове кава для Любомира Михайловича
font-weight: 400; З Вас панове кава для Любомира Михайловича
font-weight: normal; З Вас панове кава для Любомира Михайловича
font-weight: 500;З Вас панове кава для Любомира Михайловича
font-weight: bold; З Вас панове кава для Любомира Михайловича
font-weight: 900; З Вас панове кава для Любомира Михайловича

Варіанти
font-variant:normal; З Вас панове кава для Любомира Михайловича
font-variant:small-caps;З Вас панове кава для Любомира Михайловича

Розтягування
ultra - condensed Робить літери максимально вузькими
extra-condensed Робить літери дуже вузькими
condensed Робить літери вузькими
semi-condensed Робить літери трохи вузькими
normal- Літери як зазвичай
semi-expanded Робить літери трохи широкими
expanded Робить літери широкими
extra-expanded Робить літери дуже широкими
ultra-expanded Робить літери максимально широкими

font-stretch:ultra-condensed; З Вас панове кава для Любомира Михайловича
font-stretch:extra-condensed; З Вас панове кава для Любомира Михайловича
font-stretch:condensed; З Вас панове кава для Любомира Михайловича
font-stretch:normal;З Вас панове кава для Любомира Михайловича
font-stretch:semi-condensed; З Вас панове кава для Любомира Михайловича
font-stretch:expanded; З Вас панове кава для Любомира Михайловича
font-stretch:extra-expanded; З Вас панове кава для Любомира Михайловича
font-stretch:ultra-expanded;З Вас панове кава для Любомира Михайловича
Розтянування можна задати в %;
font-stretch:40%;З Вас панове кава для Любомира Михайловича
font-stretch:100%;З Вас панове кава для Любомира Михайловича
font-stretch:150%;З Вас панове кава для Любомира Михайловича
!!!Врахуйте, що не всі шрифти підтримують цей набір.

Завдання 3 - Створіть веб сторінку Font.html за зразком, яка містить теги: звголовків, абзацу,списку, посилання.
- Застосуйте за допомогою 2 способу стилі із таблиці 1, до вказаного внизу тексту, використовуючи теги
<h1>, <p>,<li>, <a href="">).
- Випробуйте всі властивості.
                                ВІТАЄМО НАШИХ ПЕРЕМОЖЦІВ!!!
    20 листопада 0 19.00 відбулася Всеукраїнська гра Mind Game (інтелектуально-розважальна гра) 
 в розважальному комплексі "Троя". У цій грі брали участь 8 команд, різних вікових категорій, навчальних закладів та міст. 
 Команда "БЕМС" у складі, якої були учні ВПУ-14 м. Коломиї зайняли I місце.

Склад команди:
Капітан: Борисевич Володимир.
Члени команди: 
1.Процюк Христина, 
2.Гладій Назар
3.Мокрій Христина
3.Абрам'юк Артур
4.Гелембин Ярослав

Гра виявилась, дуже захоплива, та емоційна гра!!
Пишаємося нашими учнями. Молодці!!!!.
                     Адміністратор сайту ВПУ 14 м.Коломия
					 www.vpu14.ho.ua
					 

Завдання 4
- Створіть веб сторінку Font2.html. - Наберіть текст "Я хочу навчитися вебдизайну", копіюйте його і застосовуйте властивості з Таблиці 2.
Додаткові властивості оформлення шрифтів
Таблиця 2.
Властивість
Значення
Опис
Приклад запису
line-height
Normal
Множник
Точно
%
Інтерліньяж (міжрядковий інтервал)
line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%
text-decoration
None
Прибрати усе оформлення
text-decoration: none
Underline
Підкреслення
Overline
Лінія над текстом
Line-through
Перекреслювання
Blink
Мигання тексту
text-transform
None
Прибрати усі ефекти
text-transform: capitalize
Capitalize
Розпочинати з прописних
Uppercase
Усі прописні
Lowercase
Усі рядкові
text-align
Вирівнювання тексту:
text-align: justify
Left
по лівій стороні
Right
по правій стороні
Center
по центру
Justify
по ширині
text-indent
Точно
%
Відступ першого рядка
text-indent: 15рх;
text-indent: 10%
text-shadow
none
відсутність значення (за замовчуванням).
text-shadow: white 2px 2px 3px;
color
колір затінення тексту.
перше числове значення
віддалення по горизонталі вправо від тексту
Негативне значення
Відстань  вліво від тексту
друге числове значення
Віддалення  по вертикалі вниз від тексту
Негативне значення
відстані вгору від тексту..
третє числове значення
Радіус нерізкості тіні тексту
letter-spacing
Визначає інтервал між символами тексту
p { letter-spacing: 5px }
none
інтервал, звичайні для використовуваного шрифту
будь-яка довжина
довжина інтервалу межу букв
inherit
застосовується значення батьківського елементу