CSS basics презентация

Зміст (Agenda)
Визначення CSS. Що потрібно для вивчення CSS.
Що таке CSS:
У чому різниця між HTML і CSS.
Чому і хто створив CSS.
Які переваги дасть CSS.
Як працює CSS.
Робота з кольором та фоном.
Робота з шрифтами.
Робота з текстом.
Посилання (псевдокласи).
Види селекторів.

Що таке CSS
CSS (Cascading Style Sheets) - «каскадні листи стилів».
CSS відповідає за зовнішній вигляд HTML-сторінки.
Синтаксис мови досить простий: він складається з селектору і властивостей.
За допомогою селекторів можна сказати браузеру які саме елементи ми хочемо оформити.
Властивості описують як саме ми хочемо оформити ці елементи.

Що таке CSS
Термін каскадні означає, що потрібно враховувати пріоритети стилів: локальний стиль відміняє глобальний.
Містить правила для подання HTML.
о від HTML-розмітки (контенту).
CSS був введений, щоб зберегти інформацію, подану окремо від HTML-розмітки (контенту).

Вступ
Каскадні таблиці стилів /Cascading Style Sheets (CSS) це вражаючий винахід для поліпшення вигляду ваших web-сайтів. Він допоможе заощадити багато часу і надасть Вам абсолютно нові можливості в дизайні web-сайтів. CSS необхідний абсолютно кожному, хто працює з web-дизайном.

Вступ
Яке програмне забезпечення необхідно мати?
Не використовуйте при роботі такі програми, як FrontPage, DreamWeaver або Word. Ці просунуті програми не допоможуть вам у вивченні CSS. Навпаки, вони сильно обмежать ваше просування в цьому напрямку.

Вступ
Вам знадобиться безкоштовний і простий текстовий редактор.
Наприклад, Microsoft Windows поставляється з програмою Блокнот (Notepad). Вона зазвичай знаходиться в Accessories меню Пуск, в Programs. Ви можете також використовувати простий текстовий редактор, наприклад Pico для Linux або Simple Text для Macintosh.
Простий текстовий редактор ідеально підходить для вивчення HTML і CSS, оскільки він не змінює введений вами код. Так ви швидко просунетеся, а помилки будуть тільки вашими, а не програмними.

Вступ
Для вивчення CSS можна використовувати будь-який браузер. Ми радимо мати новітню версію браузера.
Браузер і простий текстовий редактор - ось все, що вам необхідно, а ще…..
ВАШЕ БАЖАННЯ і наполегливість :)

Що таке CSS?
Що можна робити за допомогою CSS?
CSS це мова стилів, що визначає відображення HTML-документів.
Наприклад, CSS працює з шрифтами, кольором, полями, рядками, висотою, шириною, фоновими зображеннями, позиціонуванням елементів і багатьма іншими речами. Потерпіть, і побачите!
HTML може використовуватися для оформлення web-сайтів, але:
CSS надає більші можливості та більш точний і пропрацьований.
CSS, на сьогоднішній день, підтримується всіма браузерами.
Проcлухавши лекції, ви зможете створювати власні таблиці стилів і використовувати CSS для додання вашому web-сайту чудового вигляду.

Що таке CSS?
У чому різниця між CSS і HTML?
HTML використовується для структурування вмісту сторінки.
CSS використовується для форматування цього структурованого вмісту.
Давним-давно, коли Мадонна була дівою, а хлопець на ім'я Тім Бернерс-Лі винайшов World Wide Web, мову HTML використовували тільки для виводу структурованого тексту. Автор міг тільки розмічати текст: "це - заголовок" або "це - параграф", використовуючи HTML-теги, такі як
і
.

Що таке CSS?
У чому різниця між CSS і HTML?
У міру розвитку Web дизайнери почали шукати можливості форматування онлайнових документів. Щоб задовольнити збільшеним вимогам споживачів, виробники браузерів (тоді - Netscape і Microsoft) винайшли нові HTML-теги, такі, наприклад, як
, які відрізнялися від оригінальних HTML-тегів тим, що вони визначали зовнішній вигляд, а не структуру.
Це також призвело до того, що оригінальні теги структурування, такі як , стали все більше застосовуватися для дизайну сторінок замість структурування тексту. Багато нових тегів дизайну, такі як
, підтримувалися тільки одним браузером. "Вам необхідний браузер X для перегляду цієї сторінки" - така відмова стала звичайним явищем на web сайтах.
Слайд 12
Що таке CSS?
У чому різниця між CSS і HTML?
CSS був створений для виправлення
цієї ситуації шляхом надання web-дизайнерам можливостей точного дизайну, підтримуваних всіма браузерами. Одночасно відбувся поділ подання та вмісту документа, що значно спростило роботу.
Слайд 13
Що таке CSS?
Які переваги дасть мені CSS?
Поява CSS стало революцією в світі web-дизайну.
Конкретні переваги CSS:
управління відображенням безлічі документів за допомогою однієї таблиці стилів;
більш точний контроль над зовнішнім виглядом сторінок;
поданням для різних носіїв інформації (екран, друк, і т. д.);
складна і пророблена техніка дизайну.
Слайд 14
Синтаксис CSS?
Базовий синтаксис CSS
Скажімо, нам потрібен червоний колір фону web-сторінки:
У HTML
це можна зробити так:
За допомогою CSS того ж самого результату можна досягти так:
body {background-color: # FF0000;}
Слайд 15
Як працює CSS?
Базовий синтаксис CSS
Але де розміщувати CSS-код? Саме цим питанням ми
і займемося зараз.
Слайд 16
Основні визначення
Селектор – елемент, до якого відноситься певний стиль.
CSS – правило –
це блок, який складається з хоча б одного селектору і визначення стиля (стильової властивості).
Листи стилів – це фактично набори CSS-правил, які задають властивості форматування елементів документу.
Слайд 17
Як працює CSS?
Застосування CSS до HTML-документу
Є три способи застосувати CSS-правила до HTML-документу:
атрибут
style (вбудований стиль).
тег style (стиль заголовку).
посилання на листи стилів (.css).
Ми рекомендуємо зосередитися на третьому - тобто
зовнішній / external таблиці стилів.
Слайд 18
Як працює CSS?
Метод 1: Інлайн / In-line (атрибут style)
Можна застосовувати CSS до
HTML за допомогою HTML-атрибуту style. Червоний колір фону можна встановити так:
Приклад
Це червона сторінка
Слайд 19
Як працює CSS?
Метод 2: Внутрішній (тег style)
Другий спосіб вставки CSS-кодів - HTML-тег
. Наприклад: <br><p><html>
<head>
<title>Приклад</title>
<style type="text/css">
body {background-color: #FF0000;}
Це червона сторінка
Слайд 20
Як працює CSS?
Метод 3: Зовнішній (посилання на листи стилів) - рекомендований метод.
Зовнішня таблиця стилів це просто текстовий файл з розширенням .css. Ви можете помістити таблицю стилів на ваш web-сервер або на жорсткий диск, як і інші файли.
Слайд 21
Як працює CSS?
Метод 3: Зовнішній (посилання на таблицю стилів)
Наприклад, скажімо, ваша таблиця
стилів називається style.css і знаходиться в папці style. Це можна проілюструвати так:
Слайд 22
Як працює CSS?
Метод 3: Зовнішній (посилання на таблицю стилів)
Весь фокус полягає в
тому, щоб створити посилання з HTML-документа (default.htm) на таблицю стилів (style.css). Це можна зробити одним рядком HTML-коду:
Слайд 23
Як працює CSS?
Метод 3: Зовнішній (посилання на таблицю стилів)
Цей рядок коду потрібно
вставляти в розділі header HTML, тобто між тегами і . Наприклад, так:
Мій документ
...
Слайд 24
Як працює CSS?
Метод 3: Зовнішній (посилання на таблицю стилів)
Слайд 25
Як працює CSS?
Завдання №1
Відкрийте Блокнот (або інший ваш текстовий редактор) і створіть
два файли - HTML-файл і CSS-файл - такого змісту:
Мій документ
Моя перша таблиця стилів
default.html
style.css
body {
background-color: #FF0000;
}
Слайд 26
Як працює CSS?
Отже, деякі зауваження:
зовнішню таблицю стилів можна створити в будь-якому текстовому
редакторі;
файл із зовнішньою таблицею стилів не повинен містити ніяких тегів html;
файл із зовнішньою таблицею стилів необхідно зберегти з розширенням .css
Слайд 27
Колір і фон
Розглянемо наступні CSS-властивості:
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Слайд 28
Колір і фон
Колір переднього плану: властивість 'color'
Наприклад, ми хочемо зробити всі заголовки
документа темно-червоними. Заголовки позначаються HTML-елементом
:
h1 {
color: # ff0000;
}
Слайд 29
Колір і фон
Слайд 30
Колір і фон
Властивість background-color описує колір фону елемента.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Слайд 31
Колір і фон
Слайд 32
Колір і фон
Фонові зображення [background-image]
Для вставки малюнка в якості фонового зображення web-сторінки
просто застосуйте властивість background-image в тезі і вкажіть місце розташування малюнка.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Слайд 33
Колір і фон
Слайд 34
Колір і фон
Повторення / мультиплікація фонового зображення [background-repeat]
Слайд 35
Колір і фон
Наприклад, для скасування повторення / мультиплікації фонового малюнка ми повинні
записати такий код:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Слайд 36
Колір і фон
Слайд 37
Колір і фон
Блокування фонового зображення [background-attachment] - визначає, фіксується фоновий малюнок, чи
прокручується разом з вмістом сторінки.
Слайд 38
Колір і фон
Блокування фонового зображення [background-attachment]. Приклад:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1
{
color: #990000;
background-color: #FC9804;
}
Слайд 39
Колір і фон
Слайд 40
Колір і фон
Розташування фонового малюнка [background-position] – це набір координат.
Наприклад, значення
'100px 200px' розташовує фоновий малюнок на 100px зліва і на 200px зверху у вікні браузера.
Слайд 41
Колір і фон
Слайд 42
Колір і фон
Розташування фонового малюнка [background-position]. Приклад:
Слайд 43
Колір і фон
У прикладі коду фонове зображення розташовується в правому нижньому кутку
екрану:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Слайд 44
Колір і фон
Слайд 45
Колір і фон
Скорочений запис [background]
Властивість background входить до складу всіх властивостей, які перераховані.
За допомогою background ви
можете стискати кілька властивостей і записувати ваші стилі в скороченому вигляді, що полегшує читання таблиць.
Слайд 46
Колір і фон
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Використовуючи background, того ж результату
можна досягти одним рядком коду:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Слайд 47
Колір і фон
Порядок властивостей цього елемента такий:
[Background-color] | [background-image] | [background-repeat] |
[background-attachment] | [background-position]
Якщо властивість відсутня, воно автоматично отримує значення за замовчуванням. Наприклад, якщо background-attachment і background-position немає в даному прикладі:
background: #FFCC66 url("butterfly.gif") no-repeat;
Слайд 48
Шрифт
CSS-властивості:
font-family
font-style
font-variant
font-weight
font-size
font
Слайд 49
Шрифт
Сімейство шрифту [font-family].
Властивість font-family вказує пріоритетний список шрифтів, що використовуються для відображення даного елемента або
web-сторінки.
Для категоризації шрифтів використовуються два типи імен:
ім'я сімейства / family-name
загальне / родове сімейство / generic family.
Слайд 50
Шрифт
Сімейство шрифту [font-family].
Family-name
Приклад family-name (часто зване просто "шрифт") це, наприклад, "Arial", "Times New
Roman" або "Tahoma".
Generic family
Його можна простіше описати як групу family-names, що мають характерні спільні риси. Приклад - sans-serif, набір шрифтів без "зарубок / feet".
Слайд 51
Шрифт
Слайд 52
Шрифт
Сімейство шрифту [font-family].
Список шрифтів може виглядати так:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times
New Roman", serif;}
Слайд 53
Шрифт
Стиль шрифту [font-style]
Може приймати такі значення:
normal (звичайний); italic (курсив); oblique (похилий).
У прикладі всі
заголовки
будуть показані курсивом italic.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Слайд 54
Шрифт
Стиль шрифту [font-style]
Слайд 55
Шрифт
Варіант шрифту [font-variant]
Властивість font variant може мати одне з двох можливих значень:
normal (звичайний шрифт);
small-caps (шрифт
з малими прописними літерами).
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Слайд 56
Шрифт
Вага шрифту [font-weight]
Кожен шрифт може приймати наступні значення:
normal (звичайний);
lighter (тонкий);
bold (жирний);
bolder (ще більш
жирний);
100-900 числовий опис ваги, в якому значення 100 відповідає самому тонкому зображенню, а 900 — товстому зображенню).
Слайд 57
Шрифт
Вага шрифту [font-weight]
Приклад:
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Слайд 58
Шрифт
Розмір шрифту [font-size]
Приклад:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Слайд 59
Шрифт
Розмір шрифту [font-size]
Приклад з em:
Страуси
Живуть також в Африке
Слайд 60
Шрифт
Скорочений запис [font]
Приклад: використовуючи скорочений запис, код можна спростити:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family:
arial, sans-serif;
}
p {
font: italic bold 30px arial, sans-serif;
}
Порядок властивостей font такий:
font-style | font-variant | font-weight | font-size | font-family
Слайд 61
Текст
Форматування та встановлення стилю тексту - ключова проблема для будь-якого web-дизайнера. Розглянемо наступні
властивості:
text-indent
text-align
text-decoration
letter-spacing
text-transform
Слайд 62
Текст
Відступи [text-indent]
Властивість text-indent дозволяє виділити параграф за допомогою установки відступу для його першого рядка. У
прикладі 30px застосовується до всіх
:
p {
text-indent: 30px;
}
Слайд 63
Текст
Вирівнювання тексту [text-align]
Текст може бути вирівняний left, right, center або justify.
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Слайд 64
Текст
Вирівнювання тексту [text-align]
Слайд 65
Текст
Декоративний варіант [text-decoration]
Властивість text-decoration дозволяє додавати різні "декоративні ефекти". Наприклад, можна підкреслити текст, провести лінію
по або над текстом і т. д.
У прикладі
підкреслені,
- мають риску над текстом, а
- перекреслені.
Слайд 66
Текст
Декоративний варіант [text-decoration]
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Слайд 67
Текст
Інтервал між буквами [letter-spacing]
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Слайд 68
Текст
Трансформація тексту [text-transform]
Є чотири можливих значення text-transform:
capitalize
Капіталізує кожне слово. Наприклад: "john doe" стане
"John Doe".
uppercase
Конвертує всі символи у верхній регістр. Наприклад: "john doe" стане "JOHN DOE".
lowercase
Конвертує всі символи в нижній регістр. Наприклад: "JOHN DOE" стане "john doe".
none
Трансформації немає - текст відображається так само, як в HTML-коді.
Слайд 69
Текст
Трансформація тексту [text-transform]
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Слайд 70
Посилання
Що таке псевдоклас?
Псевдоклас — це властивість, яка дозволяє змінювати стиль елемента у залежності від дій
користувача, а також розташування елемента (тега) у загальному потоці документа, що додає у дизайн сторінки деяку динаміку і логіку.
Класичним прикладом застосування псевдокласу є посилання, що змінює свій колір при наведенні на нього вказівника. Посилання в коді html задають контейнером a. У CSS можна використати цей тег як селектор:
a{color: blue;}
Слайд 71
Посилання
Що таке псевдоклас?
Псевдокласи можна використати для встановлення різних стилів для відвіданих і невідвіданих
посилань відповідно. Перелічимо ці псевдокласи посилання:
a:visited — відвідані;
a:link — невідвідані;
a:active — активні;
a:hover — під вказівником.
Слайд 72
Посилання
a:link {
color: #6699CC;
}
Псевдоклас : link використовується для посилань на сторінки, які користувач ще не відвідував. У прикладі
коду невідвідані посилання - сині.
Слайд 73
Посилання
Псевдоклас: visited
Псевдоклас : visited використовується для посилань на сторінки, які користувач відвідав. У прикладі коду
відвідані посилання - фіолетові.
a:visited {
color: #660099;
}
Слайд 74
Посилання
Псевдоклас: active
Псевдоклас : active використовується для активних посилань.
У прикладі активні посилання мають жовтий фон.
a:active {
background-color: #FFFF00;
}
Слайд 75
Посилання
Псевдоклас: hover
Псевдоклас : hover використовується для посилань, над якими знаходиться курсор миші.
Це можна використовувати для
створення цікавих ефектів. Наприклад, якщо ми хочемо, щоб посилання ставали помаранчевими і курсивними при проходженні покажчика над ними, то наш CSS повинен виглядати так:
Слайд 76
Посилання
Псевдоклас: hover
a:hover {
color: orange;
font-style: italic;
}
Слайд 77
Посилання
Приклад 1: Ефект при знаходженні покажчика над посиланням
Ми розглянемо декілька додаткових прикладів для
псевдокласа : hover.
Приклад 1a: Відстань між літерами
Як ви пам'ятаєте, відстань між символами можна встановити властивістю letter-spacing. Це можна застосувати для посилання:
Слайд 78
Посилання
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Слайд 79
Посилання
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Приклад 1b: UPPERCASE і lowercase
Ми розглянули властивість text-transform, яке може перемикати символи з
верхнього на нижній регістр. Це також можна використовувати для створення ефектів на посиланні:
Слайд 80
Посилання
Приклад 2: Видалення підкреслення посилань
Звичайне питання - як видалити підкреслення посилань?
Ви повинні точно
визначити, чи потрібно прибрати підкреслення посилань, так як це може значно знизити використання вашого web-сайту.
Слайд 81
Посилання
Приклад 2: Видалення підкреслення посилань
Люди звикли бачити на web-сторінках сині підкреслені посилання і
знають, що за ним потрібно клацати. Якщо ви приберете підкреслення і зміните колір посилань, досить імовірно, що це збентежить користувачів і вони не отримають доступу до всього вмісту вашого сайту.
Слайд 82
Посилання
a {
text-decoration:none;
}
Приклад 2: Видалення підкреслення посилань
Взагалі-то видалити підкреслення посилань дуже просто. Як ви,
можливо, пам'ятаєте, властивість text-decoration можна використовувати для визначення підкреслення тексту. Для видалення підкреслення просто встановіть в text-decoration значення none.
Слайд 83
Види селекторів
Селектори типу.
Селектори класу.
Селектори id (ідентифікатори).
Слайд 84
Селектор типу
Задавати атрибут style для кожного тега незручно і довго. Особливо, якщо той
же результат можна отримати за допомогою єдиного CSS-правила, в якому використовується селектор для тега li.
За допомогою селектора типу (по назві тега) можна задати стилі для всіх елементів списку, зображень, абзаців і так далі. Ці селектори містять ім'я тега без символів <і>. наприклад:
li {
/ * Стилі для елементів списку * /
}
Слайд 85
Селектор класу
Клас - це один з атрибутів тегів. Виглядає він ось так:
Цей атрибут
особливий, так як в CSS існує можливість вибирати елементи по класу. Робиться це за допомогою такого селектора: .ім’я_класа. наприклад:
Імена класів можуть складатися з латинських символів, цифр і знаків - і _. Ім'я класу має починатися з літери.
.first {
/* стилі для класа first */
}
Слайд 86
Селектор id
Існує ще один HTML-атрибут, для якого існує спеціальний селектор. Цей атрибут
ID (ідентифікатор), а селектор записується за допомогою символу #, наприклад, #some-id.
На значення ID поширюються ті ж обмеження, що і на ім'я класу.
Ідентифікатор повинен бути унікальним на сторінці.
Використання селектора по ID при оформленні вважається поганою практикою.
Слайд 87
Завдання 1
Оформлення тексту за допомогою CSS.
Оформіть текст, як показано на рисунку, при умові,
що розмір всього тексту - 5em. Використайте: font-size, font-family, letter-spacing, vertical-aligan.
Використайте стиль заголовку.
Слайд 88
Завдання 2
Нижній та верхній Індекси.
Напишіть CSS-правила, щоб отримати такий результат.
Використати позначення грецького символу
λ, як λ або λ
Имя файла: CSS-basics.pptx
Количество просмотров: 139
Количество скачиваний: 0
Скачать
- Предыдущая
Понятие документа, классификация документов
Следующая -
Криминалистическая фотография и видеозапись
Похожие презентации
Растровая и векторная графика. Форматы графических файлов
Постановка задач линейного программирования и исследование их структуры. Тема 4
Архитектурный дизайн IT инфраструктуры компании
Система контроля версий файлов. (Лекция 7)
Интеллектуальные системы автоматического управления
Современные технологии и средства создания и распространения информационных ресурсов
Создание итоговых запросов
Типи даних, що визначає програміст
Информатика и информация
Родительская неосведомленность детской онлайн безопасности
Возможности ресурса Google Earth
История создания Windows XP
Эхо Чернобыля - виртуальная композиция
Паскаль тіліндегі негізгі алгоритмдік құрылымдарды бағдарламалау. (Тема 1)
Flutter в действии
Программирование на языке Паскаль. Введение
Математический аппарат для построения компьютерных систем. Введение в предмет
Сайт Wiki spaces
Кодирование данных
Помехоустойчивое кодирование в системах телекоммуникаций (ПКСТ)
Операциялық жүйеге кіріспе. Операциялық жүйенің негізгі концепциялары
Связи между классами. Объектно-ориентированное программирование. (Лекция 3)
Презентация к уроку
Базы данных
Влияние СМИ на сознание молодёжи
Урок Безопасность в интернете
Web-дизайн. Сравнительный анализ интернет-сайтов
My alien
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S){return {data:{meta:{result:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:x,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:i,item_slide_header:y,item_images:z,item_images_tag:A,item_words_h3:c,item_words_tag:B,item_words_1:i,routing:C,item_slide_skipping:D,item_download_timeout:E,item_slider_width:F,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:k,header_bg:j,accent:j}},social:G}},categories:{result:[{id:H,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:H,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:I,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:J,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:i,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]},item:{result:{id:200468,name:l,category:I,count:89,jpg:"jpg\u002F200468",hits:J,download:b,h1:"CSS basics презентация",meta:{h1:l,title:l,description:"CSS basics презентация на тему, доклад, Информатика",keywords:"CSS basics, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему CSS basics из раздела Информатика. Презентация на заданную тему содержит 89 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EЗміст (Agenda)\u003Cbr\u003E\u003Cp\u003EВизначення CSS. Що потрібно для вивчення CSS.\u003Cbr\u003EЩо таке CSS:\u003Cbr\u003EУ чому різниця між HTML і CSS.\u003Cbr\u003EЧому і хто створив CSS.\u003Cbr\u003EЯкі переваги дасть CSS.\u003Cbr\u003EЯк працює CSS.\u003Cbr\u003EРобота з кольором та фоном.\u003Cbr\u003EРобота з шрифтами.\u003Cbr\u003EРобота ",file:"CSS-basics.pptx",texts:["Березень, 2016\u003Cbr\u003E","\u003Cp\u003EЗміст (Agenda)\u003Cbr\u003E\u003Cp\u003EВизначення CSS. Що потрібно для вивчення CSS.\u003Cbr\u003EЩо таке CSS:\u003Cbr\u003EУ чому різниця між HTML і CSS.\u003Cbr\u003EЧому і хто створив CSS.\u003Cbr\u003EЯкі переваги дасть CSS.\u003Cbr\u003EЯк працює CSS.\u003Cbr\u003EРобота з кольором та фоном.\u003Cbr\u003EРобота з шрифтами.\u003Cbr\u003EРобота з текстом.\u003Cbr\u003EПосилання (псевдокласи).\u003Cbr\u003EВиди селекторів.\u003Cbr\u003E","\u003Cp\u003EЩо таке CSS\u003Cbr\u003E\u003Cp\u003ECSS (Cascading Style Sheets) - «каскадні листи стилів». \u003Cbr\u003ECSS відповідає за зовнішній вигляд HTML-сторінки. \u003Cbr\u003EСинтаксис мови досить простий: він складається з селектору і властивостей.\u003Cbr\u003EЗа допомогою селекторів можна сказати браузеру які саме елементи ми хочемо оформити.\u003Cbr\u003EВластивості описують як саме ми хочемо оформити ці елементи. \u003Cbr\u003E","\u003Cp\u003EЩо таке CSS\u003Cbr\u003E\u003Cp\u003EТермін каскадні означає, що потрібно враховувати пріоритети стилів: локальний стиль відміняє глобальний.\u003Cbr\u003EМістить правила для подання HTML. \u003Cbr\u003E\u003Cbr\u003Eо від HTML-розмітки (контенту). \u003C\u002F Li\u003E \u003C\u002F UL\u003E\u003Cbr\u003E\u003Cbr\u003ECSS був введений, щоб зберегти інформацію, подану окремо від HTML-розмітки (контенту). \u003Cbr\u003E","\u003Cp\u003EВступ\u003Cbr\u003E\u003Cp\u003EКаскадні таблиці стилів \u002FCascading Style Sheets (CSS) це вражаючий винахід для поліпшення вигляду ваших web-сайтів. Він допоможе заощадити багато часу і надасть Вам абсолютно нові можливості в дизайні web-сайтів. CSS необхідний абсолютно кожному, хто працює з web-дизайном. \u003Cbr\u003E","\u003Cp\u003EВступ\u003Cbr\u003E\u003Cp\u003EЯке програмне забезпечення необхідно мати?\u003Cbr\u003EНе використовуйте при роботі такі програми, як FrontPage, DreamWeaver або Word. Ці просунуті програми не допоможуть вам у вивченні CSS. Навпаки, вони сильно обмежать ваше просування в цьому напрямку. \u003Cbr\u003E","\u003Cp\u003EВступ\u003Cbr\u003E\u003Cp\u003EВам знадобиться безкоштовний і простий текстовий редактор. \u003Cbr\u003EНаприклад, Microsoft Windows поставляється з програмою Блокнот (Notepad). Вона зазвичай знаходиться в Accessories меню Пуск, в Programs. Ви можете також використовувати простий текстовий редактор, наприклад Pico для Linux або Simple Text для Macintosh. \u003Cbr\u003EПростий текстовий редактор ідеально підходить для вивчення HTML і CSS, оскільки він не змінює введений вами код. Так ви швидко просунетеся, а помилки будуть тільки вашими, а не програмними. \u003Cbr\u003E","\u003Cp\u003EВступ\u003Cbr\u003E\u003Cp\u003EДля вивчення CSS можна використовувати будь-який браузер. Ми радимо мати новітню версію браузера. \u003Cbr\u003EБраузер і простий текстовий редактор - ось все, що вам необхідно, а ще…..\u003Cbr\u003EВАШЕ БАЖАННЯ і наполегливість :)\u003Cbr\u003E","\u003Cp\u003EЩо таке CSS?\u003Cbr\u003E\u003Cp\u003EЩо можна робити за допомогою CSS?\u003Cbr\u003ECSS це мова стилів, що визначає відображення HTML-документів. \u003Cbr\u003EНаприклад, CSS працює з шрифтами, кольором, полями, рядками, висотою, шириною, фоновими зображеннями, позиціонуванням елементів і багатьма іншими речами. Потерпіть, і побачите! \r\n\u003Cbr\u003EHTML може використовуватися для оформлення web-сайтів, але:\u003Cbr\u003ECSS надає більші можливості та більш точний і пропрацьований.\u003Cbr\u003ECSS, на сьогоднішній день, підтримується всіма браузерами. \r\n\r\nПроcлухавши лекції, ви зможете створювати власні таблиці стилів і використовувати CSS для додання вашому web-сайту чудового вигляду.\r\n\u003Cbr\u003E","\u003Cp\u003EЩо таке CSS?\u003Cbr\u003E\u003Cp\u003EУ чому різниця між CSS і HTML?\u003Cbr\u003EHTML використовується для структурування вмісту сторінки. \u003Cbr\u003ECSS використовується для форматування цього структурованого вмісту. \u003Cbr\u003E\r\n\tДавним-давно, коли Мадонна була дівою, а хлопець на ім'я Тім Бернерс-Лі винайшов World Wide Web, мову HTML використовували тільки для виводу структурованого тексту. Автор міг тільки розмічати текст: \"це - заголовок\" або \"це - параграф\", використовуючи HTML-теги, такі як \u003Ch1\u003E і \u003Cp\u003E. \r\n\r\n\u003Cbr\u003E","\u003Cp\u003EЩо таке CSS?\u003Cbr\u003E\u003Cp\u003EУ чому різниця між CSS і HTML?\u003Cbr\u003E\r\n\tУ міру розвитку Web дизайнери почали шукати можливості форматування онлайнових документів. Щоб задовольнити збільшеним вимогам споживачів, виробники браузерів (тоді - Netscape і Microsoft) винайшли нові HTML-теги, такі, наприклад, як \u003Cfont\u003E, які відрізнялися від оригінальних HTML-тегів тим, що вони визначали зовнішній вигляд, а не структуру. \r\n\r\n\tЦе також призвело до того, що оригінальні теги структурування, такі як \u003Ctable\u003E, стали все більше застосовуватися для дизайну сторінок замість структурування тексту. Багато нових тегів дизайну, такі як \u003Cblink\u003E, підтримувалися тільки одним браузером. \"Вам необхідний браузер X для перегляду цієї сторінки\" - така відмова стала звичайним явищем на web сайтах. \r\n\r\n\u003Cbr\u003E","\u003Cp\u003EЩо таке CSS?\u003Cbr\u003E\u003Cp\u003EУ чому різниця між CSS і HTML?\u003Cbr\u003E\r\n\r\n\tCSS був створений для виправлення цієї ситуації шляхом надання web-дизайнерам можливостей точного дизайну, підтримуваних всіма браузерами. Одночасно відбувся поділ подання та вмісту документа, що значно спростило роботу.\u003Cbr\u003E","\u003Cp\u003EЩо таке CSS?\u003Cbr\u003E\u003Cp\u003EЯкі переваги дасть мені CSS?\u003Cbr\u003E\tПоява CSS стало революцією в світі web-дизайну. Конкретні переваги CSS:\u003Cbr\u003Eуправління відображенням безлічі документів за допомогою однієї таблиці стилів;\u003Cbr\u003Eбільш точний контроль над зовнішнім виглядом сторінок;\u003Cbr\u003Eподанням для різних носіїв інформації (екран, друк, і т. д.);\u003Cbr\u003Eскладна і пророблена техніка дизайну.\u003Cbr\u003E","\u003Cp\u003E Синтаксис CSS?\u003Cbr\u003E\u003Cp\u003EБазовий синтаксис CSS\u003Cbr\u003EСкажімо, нам потрібен червоний колір фону web-сторінки: \u003Cbr\u003EУ HTML це можна зробити так: \u003Cbr\u003E\u003Cbody bgcolor=\"#FF0000\"\u003E\u003Cbr\u003EЗа допомогою CSS того ж самого результату можна досягти так: \u003Cbr\u003Ebody {background-color: # FF0000;}\u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EБазовий синтаксис CSS\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003EАле де розміщувати CSS-код? Саме цим питанням ми і займемося зараз.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E Основні визначення\u003Cbr\u003EСелектор – елемент, до якого відноситься певний стиль.\u003Cbr\u003ECSS – правило – це блок, який складається з хоча б одного селектору і визначення стиля (стильової властивості).\u003Cbr\u003EЛисти стилів – це фактично набори CSS-правил, які задають властивості форматування елементів документу.\u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EЗастосування CSS до HTML-документу\u003Cbr\u003EЄ три способи застосувати CSS-правила до HTML-документу:\u003Cbr\u003Eатрибут style (вбудований стиль).\u003Cbr\u003E тег style (стиль заголовку).\u003Cbr\u003Eпосилання на листи стилів (.css).\u003Cbr\u003E Ми рекомендуємо зосередитися на третьому - тобто \u003Cbr\u003Eзовнішній \u002F external таблиці стилів.\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EМетод 1: Інлайн \u002F In-line (атрибут style)\u003Cbr\u003EМожна застосовувати CSS до HTML за допомогою HTML-атрибуту style. Червоний колір фону можна встановити так: \r\n\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Ctitle\u003EПриклад\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody style=\"background-color: #FF0000;\"\u003E\u003Cbr\u003E \u003Cp\u003EЦе червона сторінка\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E \u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EМетод 2: Внутрішній (тег style)\u003Cbr\u003EДругий спосіб вставки CSS-кодів - HTML-тег \u003Cstyle\u003E. Наприклад: \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\r\n \u003Chead\u003E\r\n \u003Ctitle\u003EПриклад\u003C\u002Ftitle\u003E\r\n \u003Cstyle type=\"text\u002Fcss\"\u003E\r\n body {background-color: #FF0000;}\r\n \u003C\u002Fstyle\u003E\r\n \u003C\u002Fhead\u003E\r\n \u003Cbody\u003E\r\n \u003Cp\u003EЦе червона сторінка\u003C\u002Fp\u003E\r\n \u003C\u002Fbody\u003E\r\n \u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EМетод 3: Зовнішній (посилання на листи стилів) - рекомендований метод. \r\n\u003Cbr\u003EЗовнішня таблиця стилів це просто текстовий файл з розширенням .css. Ви можете помістити таблицю стилів на ваш web-сервер або на жорсткий диск, як і інші файли. \u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EМетод 3: Зовнішній (посилання на таблицю стилів)\u003Cbr\u003E\u003Cp\u003EНаприклад, скажімо, ваша таблиця стилів називається style.css і знаходиться в папці style. Це можна проілюструвати так: \u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EМетод 3: Зовнішній (посилання на таблицю стилів)\u003Cbr\u003E\u003Cp\u003EВесь фокус полягає в тому, щоб створити посилання з HTML-документа (default.htm) на таблицю стилів (style.css). Це можна зробити одним рядком HTML-коду: \r\n\u003Cbr\u003E\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"style\u002Fstyle.css\"\u002F\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EМетод 3: Зовнішній (посилання на таблицю стилів)\u003Cbr\u003E\u003Cp\u003EЦей рядок коду потрібно вставляти в розділі header HTML, тобто між тегами \u003Chead\u003E і \u003C\u002Fhead\u003E. Наприклад, так: \r\n\u003Chtml\u003E\r\n \u003Chead\u003E\r\n \u003Ctitle\u003EМій документ\u003C\u002Ftitle\u003E\r\n \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"style\u002Fstyle.css\" \u002F\u003E\r\n \u003C\u002Fhead\u003E\r\n \u003Cbody\u003E\r\n ...\u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EМетод 3: Зовнішній (посилання на таблицю стилів)\u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EЗавдання №1\u003Cbr\u003EВідкрийте Блокнот (або інший ваш текстовий редактор) і створіть два файли - HTML-файл і CSS-файл - такого змісту:\r\n\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Ctitle\u003EМій документ\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"style.css\" \u002F\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cp\u003EМоя перша таблиця стилів\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E \u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003Edefault.html\u003Cbr\u003E\u003Cp\u003Estyle.css\u003Cbr\u003E\u003Cp\u003Ebody {\r\nbackground-color: #FF0000;\r\n}\u003Cbr\u003E","\u003Cp\u003E Як працює CSS?\u003Cbr\u003E\u003Cp\u003EОтже, деякі зауваження:\u003Cbr\u003Eзовнішню таблицю стилів можна створити в будь-якому текстовому редакторі;\u003Cbr\u003Eфайл із зовнішньою таблицею стилів не повинен містити ніяких тегів html;\u003Cbr\u003Eфайл із зовнішньою таблицею стилів необхідно зберегти з розширенням .css\u003Cbr\u003E","\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EРозглянемо наступні CSS-властивості:\u003Cbr\u003Ecolor\u003Cbr\u003Ebackground-color\u003Cbr\u003Ebackground-image\u003Cbr\u003Ebackground-repeat\u003Cbr\u003Ebackground-attachment\u003Cbr\u003Ebackground-position\u003Cbr\u003Ebackground\u003Cbr\u003E\r\n\u003Cbr\u003E","\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EКолір переднього плану: властивість 'color'\u003Cbr\u003E\r\nНаприклад, ми хочемо зробити всі заголовки документа темно-червоними. Заголовки позначаються HTML-елементом \u003Ch1\u003E:\r\n\u003Cbr\u003E\u003Cp\u003Eh1 {\u003Cbr\u003Ecolor: # ff0000;\u003Cbr\u003E}\u003Cbr\u003E",f,"\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EВластивість background-color описує колір фону елемента.\u003Cbr\u003E\u003Cp\u003Ebody {\r\nbackground-color: #FFCC66;\r\n}\r\n\r\nh1 {\r\ncolor: #990000;\r\nbackground-color: #FC9804;\r\n}\u003Cbr\u003E",f,"\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EФонові зображення [background-image]\u003Cbr\u003EДля вставки малюнка в якості фонового зображення web-сторінки просто застосуйте властивість background-image в тезі \u003Cbody\u003E і вкажіть місце розташування малюнка. \r\n\u003Cbr\u003E\u003Cp\u003Ebody {\u003Cbr\u003Ebackground-color: #FFCC66;\u003Cbr\u003Ebackground-image: url(\"butterfly.gif\");\u003Cbr\u003E}\u003Cbr\u003Eh1 {\u003Cbr\u003Ecolor: #990000;\u003Cbr\u003Ebackground-color: #FC9804;\u003Cbr\u003E}\u003Cbr\u003E",f,"\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EПовторення \u002F мультиплікація фонового зображення [background-repeat]\u003Cbr\u003E","\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EНаприклад, для скасування повторення \u002F мультиплікації фонового малюнка ми повинні записати такий код: \u003Cbr\u003E\u003Cp\u003Ebody {\r\nbackground-color: #FFCC66;\r\nbackground-image: url(\"butterfly.gif\");\r\nbackground-repeat: no-repeat;\r\n}\r\nh1 {\r\ncolor: #990000;\r\nbackground-color: #FC9804;\r\n}\u003Cbr\u003E",f,"\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EБлокування фонового зображення [background-attachment] - визначає, фіксується фоновий малюнок, чи прокручується разом з вмістом сторінки. \u003Cbr\u003E","\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EБлокування фонового зображення [background-attachment]. Приклад:\u003Cbr\u003E\u003Cp\u003Ebody {\r\nbackground-color: #FFCC66;\r\nbackground-image: url(\"butterfly.gif\");\r\nbackground-repeat: no-repeat;\r\nbackground-attachment: fixed;\r\n}\r\n\r\nh1 {\r\ncolor: #990000;\r\nbackground-color: #FC9804;\r\n}\u003Cbr\u003E",f,"\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EРозташування фонового малюнка [background-position] – це набір координат. \u003Cbr\u003E\u003Cp\u003EНаприклад, значення '100px 200px' розташовує фоновий малюнок на 100px зліва і на 200px зверху у вікні браузера. \r\n\u003Cbr\u003E",f,"\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EРозташування фонового малюнка [background-position]. Приклад: \u003Cbr\u003E","\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EУ прикладі коду фонове зображення розташовується в правому нижньому кутку екрану: \r\n\u003Cbr\u003E\u003Cp\u003Ebody {\r\nbackground-color: #FFCC66;\r\nbackground-image: url(\"butterfly.gif\");\r\nbackground-repeat: no-repeat;\r\nbackground-attachment: fixed;\r\nbackground-position: right bottom;\r\n}\r\nh1 {\r\ncolor: #990000;\r\nbackground-color: #FC9804;\r\n}\u003Cbr\u003E",f,"\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EСкорочений запис [background]\u003Cbr\u003EВластивість background входить до складу всіх властивостей, які перераховані. \r\n\r\nЗа допомогою background ви можете стискати кілька властивостей і записувати ваші стилі в скороченому вигляді, що полегшує читання таблиць. \r\n\r\n\u003Cbr\u003E","\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003Ebackground-color: #FFCC66;\u003Cbr\u003Ebackground-image: url(\"butterfly.gif\");\u003Cbr\u003Ebackground-repeat: no-repeat;\u003Cbr\u003Ebackground-attachment: fixed;\u003Cbr\u003Ebackground-position: right bottom;\u003Cbr\u003E\u003Cp\u003EВикористовуючи background, того ж результату можна досягти одним рядком коду: \u003Cbr\u003E\u003Cp\u003Ebackground: #FFCC66 url(\"butterfly.gif\") no-repeat fixed right bottom;\u003Cbr\u003E","\u003Cp\u003E Колір і фон\u003Cbr\u003E\u003Cp\u003EПорядок властивостей цього елемента такий: \r\n\r\n[Background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position] \r\n\r\nЯкщо властивість відсутня, воно автоматично отримує значення за замовчуванням. Наприклад, якщо background-attachment і background-position немає в даному прикладі: \u003Cbr\u003E\u003Cp\u003Ebackground: #FFCC66 url(\"butterfly.gif\") no-repeat;\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003ECSS-властивості:\u003Cbr\u003Efont-family\u003Cbr\u003Efont-style\u003Cbr\u003Efont-variant\u003Cbr\u003Efont-weight\u003Cbr\u003Efont-size\u003Cbr\u003Efont\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EСімейство шрифту [font-family].\u003Cbr\u003E\u003Cp\u003EВластивість font-family вказує пріоритетний список шрифтів, що використовуються для відображення даного елемента або web-сторінки.\u003Cbr\u003EДля категоризації шрифтів використовуються два типи імен:\u003Cbr\u003Eім'я сімейства \u002F family-name \u003Cbr\u003Eзагальне \u002F родове сімейство \u002F generic family. \r\n\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EСімейство шрифту [font-family].\u003Cbr\u003E\u003Cp\u003EFamily-name\r\nПриклад family-name (часто зване просто \"шрифт\") це, наприклад, \"Arial\", \"Times New Roman\" або \"Tahoma\".\r\n\u003Cbr\u003EGeneric family\r\nЙого можна простіше описати як групу family-names, що мають характерні спільні риси. Приклад - sans-serif, набір шрифтів без \"зарубок \u002F feet\".\r\n\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EСімейство шрифту [font-family].\u003Cbr\u003E\u003Cp\u003EСписок шрифтів може виглядати так: \u003Cbr\u003E\u003Cp\u003Eh1 {font-family: arial, verdana, sans-serif;}\r\nh2 {font-family: \"Times New Roman\", serif;}\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EСтиль шрифту [font-style]\u003Cbr\u003E\u003Cp\u003EМоже приймати такі значення:\u003Cbr\u003Enormal (звичайний); italic (курсив); oblique (похилий).\u003Cbr\u003E У прикладі всі заголовки \u003Ch2\u003E будуть показані курсивом italic. \r\n\u003Cbr\u003E\u003Cp\u003Eh1 {font-family: arial, verdana, sans-serif;}\u003Cbr\u003Eh2 {font-family: \"Times New Roman\", serif; font-style: italic;}\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EСтиль шрифту [font-style]\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EВаріант шрифту [font-variant]\u003Cbr\u003E\u003Cp\u003EВластивість font variant може мати одне з двох можливих значень:\u003Cbr\u003Enormal (звичайний шрифт);\u003Cbr\u003Esmall-caps (шрифт з малими прописними літерами).\u003Cbr\u003E\u003Cp\u003Eh1 {font-variant: small-caps;}\u003Cbr\u003Eh2 {font-variant: normal;}\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EВага шрифту [font-weight]\u003Cbr\u003E\u003Cp\u003EКожен шрифт може приймати наступні значення:\u003Cbr\u003Enormal (звичайний);\u003Cbr\u003Elighter (тонкий);\u003Cbr\u003Ebold (жирний);\u003Cbr\u003Ebolder (ще більш жирний);\u003Cbr\u003E100-900 числовий опис ваги, в якому значення 100 відповідає самому тонкому зображенню, а 900 — товстому зображенню).\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EВага шрифту [font-weight]\u003Cbr\u003E\u003Cp\u003EПриклад:\u003Cbr\u003E\u003Cp\u003Ep {font-family: arial, verdana, sans-serif;}\u003Cbr\u003Etd {font-family: arial, verdana, sans-serif; font-weight: bold;}\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EРозмір шрифту [font-size]\u003Cbr\u003E\r\n\u003Cbr\u003E\u003Cp\u003EПриклад:\u003Cbr\u003E\u003Cp\u003Eh1 {font-size: 30px;}\r\nh2 {font-size: 12pt;}\r\nh3 {font-size: 120%;}\r\np {font-size: 1em;}\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EРозмір шрифту [font-size]\u003Cbr\u003E\r\n\u003Cbr\u003E\u003Cp\u003EПриклад з em:\u003Cbr\u003E\u003Cp\u003E\u003Cdiv style=\"font-size:1.5em\"\u003E\u003Cbr\u003E Страуси\u003Cbr\u003E\u003Cdiv style=\"font-size:1.5em\"\u003EЖивуть також в Африке \u003C\u002Fdiv\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EСкорочений запис [font]\u003Cbr\u003E\u003Cp\u003EПриклад: використовуючи скорочений запис, код можна спростити: \u003Cbr\u003E\u003Cp\u003Ep {\u003Cbr\u003Efont-style: italic;\u003Cbr\u003Efont-weight: bold;\u003Cbr\u003Efont-size: 30px;\u003Cbr\u003Efont-family: arial, sans-serif;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003Ep {\r\nfont: italic bold 30px arial, sans-serif;\r\n}\u003Cbr\u003E\u003Cp\u003EПорядок властивостей font такий: \r\n\r\nfont-style | font-variant | font-weight | font-size | font-family\u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EФорматування та встановлення стилю тексту - ключова проблема для будь-якого web-дизайнера. Розглянемо наступні властивості:\u003Cbr\u003Etext-indent\u003Cbr\u003Etext-align\u003Cbr\u003Etext-decoration\u003Cbr\u003Eletter-spacing\u003Cbr\u003Etext-transform\u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EВідступи [text-indent]\u003Cbr\u003E\u003Cp\u003EВластивість text-indent дозволяє виділити параграф за допомогою установки відступу для його першого рядка. У прикладі 30px застосовується до всіх \u003Cp\u003E: \u003Cbr\u003E\u003Cp\u003Ep {\u003Cbr\u003Etext-indent: 30px;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EВирівнювання тексту [text-align]\u003Cbr\u003E\u003Cp\u003EТекст може бути вирівняний left, right, center або justify. \r\n\u003Cbr\u003E\u003Cp\u003Eth {\u003Cbr\u003Etext-align: right;\u003Cbr\u003E}\u003Cbr\u003Etd {\u003Cbr\u003Etext-align: center;\u003Cbr\u003E}\u003Cbr\u003Ep {\u003Cbr\u003Etext-align: justify;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EВирівнювання тексту [text-align]\u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EДекоративний варіант [text-decoration]\u003Cbr\u003E\u003Cp\u003EВластивість text-decoration дозволяє додавати різні \"декоративні ефекти\". Наприклад, можна підкреслити текст, провести лінію по або над текстом і т. д. \u003Cbr\u003EУ прикладі \u003Ch1\u003E підкреслені, \u003Ch2\u003E - мають риску над текстом, а \u003Ch3\u003E - перекреслені. \u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EДекоративний варіант [text-decoration]\u003Cbr\u003E\u003Cp\u003Eh1 {\r\ntext-decoration: underline;\r\n}\r\n\r\nh2 {\r\ntext-decoration: overline;\r\n}\r\n\r\nh3 {\r\ntext-decoration: line-through;\r\n}\u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EІнтервал між буквами [letter-spacing]\u003Cbr\u003E\u003Cp\u003Eh1 {\u003Cbr\u003Eletter-spacing: 6px;\u003Cbr\u003E}\u003Cbr\u003Ep {\u003Cbr\u003Eletter-spacing: 3px;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EТрансформація тексту [text-transform]\u003Cbr\u003E\u003Cp\u003EЄ чотири можливих значення text-transform: \r\ncapitalize\r\nКапіталізує кожне слово. Наприклад: \"john doe\" стане \"John Doe\". \r\nuppercase\r\nКонвертує всі символи у верхній регістр. Наприклад: \"john doe\" стане \"JOHN DOE\". \r\nlowercase\r\nКонвертує всі символи в нижній регістр. Наприклад: \"JOHN DOE\" стане \"john doe\". \r\nnone\r\nТрансформації немає - текст відображається так само, як в HTML-коді.\u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EТрансформація тексту [text-transform]\u003Cbr\u003E\u003Cp\u003Eh1 {\r\ntext-transform: uppercase;\r\n}\r\nli {\r\ntext-transform: capitalize;\r\n}\u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003EЩо таке псевдоклас?\u003Cbr\u003EПсевдоклас — це властивість, яка дозволяє змінювати стиль елемента у залежності від дій користувача, а також розташування елемента (тега) у загальному потоці документа, що додає у дизайн сторінки деяку динаміку і логіку.\u003Cbr\u003EКласичним прикладом застосування псевдокласу є посилання, що змінює свій колір при наведенні на нього вказівника. Посилання в коді html задають контейнером a. У CSS можна використати цей тег як селектор:\u003Cbr\u003Ea{color: blue;}\u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003EЩо таке псевдоклас?\u003Cbr\u003EПсевдокласи можна використати для встановлення різних стилів для відвіданих і невідвіданих посилань відповідно. Перелічимо ці псевдокласи посилання:\u003Cbr\u003Ea:visited — відвідані;\u003Cbr\u003Ea:link — невідвідані;\u003Cbr\u003Ea:active — активні;\u003Cbr\u003Ea:hover — під вказівником.\u003Cbr\u003E\r\n\u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003Ea:link {\r\ncolor: #6699CC;\r\n}\u003Cbr\u003E\u003Cp\u003EПсевдоклас : link використовується для посилань на сторінки, які користувач ще не відвідував. У прикладі коду невідвідані посилання - сині. \u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003EПсевдоклас: visited\u003Cbr\u003EПсевдоклас : visited використовується для посилань на сторінки, які користувач відвідав. У прикладі коду відвідані посилання - фіолетові.\u003Cbr\u003E\u003Cp\u003Ea:visited {\r\ncolor: #660099;\r\n}\u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003EПсевдоклас: active\u003Cbr\u003EПсевдоклас : active використовується для активних посилань. \r\nУ прикладі активні посилання мають жовтий фон. \u003Cbr\u003E\u003Cp\u003Ea:active {\r\nbackground-color: #FFFF00;\r\n}\u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003EПсевдоклас: hover\u003Cbr\u003EПсевдоклас : hover використовується для посилань, над якими знаходиться курсор миші. \r\nЦе можна використовувати для створення цікавих ефектів. Наприклад, якщо ми хочемо, щоб посилання ставали помаранчевими і курсивними при проходженні покажчика над ними, то наш CSS повинен виглядати так: \r\n\u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003EПсевдоклас: hover\u003Cbr\u003E\u003Cp\u003Ea:hover {\r\ncolor: orange;\r\nfont-style: italic;\r\n}\u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003EПриклад 1: Ефект при знаходженні покажчика над посиланням\u003Cbr\u003EМи розглянемо декілька додаткових прикладів для псевдокласа : hover.\u003Cbr\u003EПриклад 1a: Відстань між літерами\u003Cbr\u003EЯк ви пам'ятаєте, відстань між символами можна встановити властивістю letter-spacing. Це можна застосувати для посилання: \r\n\u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003Ea:hover {\r\nletter-spacing: 10px;\r\nfont-weight:bold;\r\ncolor:red;\r\n}\u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003Ea:hover {\r\ntext-transform: uppercase;\r\nfont-weight:bold;\r\ncolor:blue;\r\nbackground-color:yellow;\r\n}\u003Cbr\u003E\u003Cp\u003EПриклад 1b: UPPERCASE і lowercase\u003Cbr\u003EМи розглянули властивість text-transform, яке може перемикати символи з верхнього на нижній регістр. Це також можна використовувати для створення ефектів на посиланні: \u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003EПриклад 2: Видалення підкреслення посилань\u003Cbr\u003EЗвичайне питання - як видалити підкреслення посилань? \u003Cbr\u003E\r\n\tВи повинні точно визначити, чи потрібно прибрати підкреслення посилань, так як це може значно знизити використання вашого web-сайту. \u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003EПриклад 2: Видалення підкреслення посилань\u003Cbr\u003EЛюди звикли бачити на web-сторінках сині підкреслені посилання і знають, що за ним потрібно клацати. Якщо ви приберете підкреслення і зміните колір посилань, досить імовірно, що це збентежить користувачів і вони не отримають доступу до всього вмісту вашого сайту. \r\n\u003Cbr\u003E","\u003Cp\u003EПосилання\u003Cbr\u003E\u003Cp\u003Ea {\r\ntext-decoration:none;\r\n}\u003Cbr\u003E\u003Cp\u003EПриклад 2: Видалення підкреслення посилань\u003Cbr\u003EВзагалі-то видалити підкреслення посилань дуже просто. Як ви, можливо, пам'ятаєте, властивість text-decoration можна використовувати для визначення підкреслення тексту. Для видалення підкреслення просто встановіть в text-decoration значення none. \u003Cbr\u003E","\u003Cp\u003EВиди селекторів\u003Cbr\u003E\u003Cp\u003EСелектори типу.\u003Cbr\u003EСелектори класу.\u003Cbr\u003EСелектори id (ідентифікатори).\u003Cbr\u003E","\u003Cp\u003EСелектор типу\u003Cbr\u003E\u003Cp\u003EЗадавати атрибут style для кожного тега незручно і довго. Особливо, якщо той же результат можна отримати за допомогою єдиного CSS-правила, в якому використовується селектор для тега li.\u003Cbr\u003EЗа допомогою селектора типу (по назві тега) можна задати стилі для всіх елементів списку, зображень, абзаців і так далі. Ці селектори містять ім'я тега без символів \u003Cі\u003E. наприклад:\u003Cbr\u003E\u003Cp\u003Eli {\u003Cbr\u003E \u002F * Стилі для елементів списку * \u002F\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСелектор класу\u003Cbr\u003E\u003Cp\u003EКлас - це один з атрибутів тегів. Виглядає він ось так:\u003Cbr\u003E\u003Cbr\u003EЦей атрибут особливий, так як в CSS існує можливість вибирати елементи по класу. Робиться це за допомогою такого селектора: .ім’я_класа. наприклад:\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E Імена класів можуть складатися з латинських символів, цифр і знаків - і _. Ім'я класу має починатися з літери.\u003Cbr\u003E\u003Cp\u003E\u003Cli class=\"first\"\u003E\u003C\u002Fli\u003E\u003Cbr\u003E\u003Cp\u003E.first {\u003Cbr\u003E \u002F* стилі для класа first *\u002F\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСелектор id \u003Cbr\u003E\u003Cp\u003EІснує ще один HTML-атрибут, для якого існує спеціальний селектор. Цей атрибут ID (ідентифікатор), а селектор записується за допомогою символу #, наприклад, #some-id.\u003Cbr\u003EНа значення ID поширюються ті ж обмеження, що і на ім'я класу. \u003Cbr\u003EІдентифікатор повинен бути унікальним на сторінці.\u003Cbr\u003E\u003Cp\u003EВикористання селектора по ID при оформленні вважається поганою практикою.\u003Cbr\u003E","\u003Cp\u003EЗавдання 1\u003Cbr\u003E\u003Cp\u003EОформлення тексту за допомогою CSS.\u003Cbr\u003EОформіть текст, як показано на рисунку, при умові, що розмір всього тексту - 5em. Використайте: font-size, font-family, letter-spacing, vertical-aligan. \u003Cbr\u003EВикористайте стиль заголовку.\u003Cbr\u003E","\u003Cp\u003EЗавдання 2\u003Cbr\u003E\u003Cp\u003EНижній та верхній Індекси.\u003Cbr\u003EНапишіть CSS-правила, щоб отримати такий результат.\u003Cbr\u003EВикористати позначення грецького символу λ, як &lambda; або &#955;\u003Cbr\u003E \u003Cbr\u003E","\u003Cp\u003EЗавдання 3\u003Cbr\u003E\u003Cp\u003EКвадрати, які чергуються.\u003Cbr\u003EЗробіть набір квадратів, у яких змінюється колір заливки (рис. 1). При наведенні на будь-який квадрат його колір змінюється на помаранчевий (рис. 2).\u003Cbr\u003E \u003Cbr\u003E"],href:"\u002Finformatika\u002Fcss-basics",href_category:"\u002Finformatika",date:1633757325,related:[{id:228816,name:"Растровая и векторная графика. Форматы графических файлов",href:"\u002Finformatika\u002Frastrovaya-i-vektornaya-grafika-formaty-graficheskih",jpg:"jpg\u002F228816"},{id:344549,name:"Постановка задач линейного программирования и исследование их структуры. Тема 4",href:"\u002Finformatika\u002Fpostanovka-zadach-lineynogo-programmirovaniya-i-issledovanie",jpg:"jpg\u002F344549"},{id:124379,name:"Архитектурный дизайн IT инфраструктуры компании",href:"\u002Finformatika\u002Farhitekturnyy-dizayn-it-infrastruktury-kompanii",jpg:"jpg\u002F124379"},{id:218955,name:"Система контроля версий файлов. (Лекция 7)",href:"\u002Finformatika\u002Fsistema-kontrolya-versiy-faylov-lektsiya-7",jpg:"jpg\u002F218955"},{id:372096,name:"Интеллектуальные системы автоматического управления",href:"\u002Finformatika\u002Fintellektualnye-sistemy-avtomaticheskogo-upravleniya",jpg:"jpg\u002F372096"},{id:397535,name:"Современные технологии и средства создания и распространения информационных ресурсов",href:"\u002Finformatika\u002Fsovremennye-tehnologii-i-sredstva-sozdaniya-i-1",jpg:"jpg\u002F397535"},{id:285272,name:"Создание итоговых запросов",href:"\u002Finformatika\u002Fsozdanie-itogovyh-zaprosov",jpg:"jpg\u002F285272"},{id:96061,name:"Типи даних, що визначає програміст",href:"\u002Finformatika\u002Ftipi-danih-shcho-viznacha-programst",jpg:"jpg\u002F96061"},{id:413912,name:"Информатика и информация",href:"\u002Finformatika\u002Finformatika-i-informatsiya-3",jpg:"jpg\u002F413912"},{id:224185,name:"Родительская неосведомленность детской онлайн безопасности",href:"\u002Finformatika\u002Froditelskaya-neosvedomlennost-detskoy-onlayn-bezopasnosti",jpg:"jpg\u002F224185"},{id:3516,name:"Возможности ресурса Google Earth",href:"\u002Finformatika\u002Fvozmozhnosti-resursa-google-earth",jpg:"jpg\u002F3516"},{id:578891,name:"История создания Windows XP",href:"\u002Finformatika\u002Fistoriya-sozdaniya-windows-xp",jpg:"jpg\u002F578891"},{id:113196,name:"Эхо Чернобыля - виртуальная композиция",href:"\u002Finformatika\u002Feho-chernobylya-virtualnaya-kompozitsiya",jpg:"jpg\u002F113196"},{id:7362,name:"Паскаль тіліндегі негізгі алгоритмдік құрылымдарды бағдарламалау. (Тема 1)",href:"\u002Finformatika\u002Fpaskal-tlndeg-negzg-algoritmdk-rylymdardy-badarlamalau",jpg:"jpg\u002F7362"},{id:331189,name:"Flutter в действии",href:"\u002Finformatika\u002Fflutter-v-deystvii",jpg:"jpg\u002F331189"},{id:301381,name:"Программирование на языке Паскаль. Введение",href:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-paskal-vvedenie-1",jpg:"jpg\u002F301381"},{id:442182,name:"Математический аппарат для построения компьютерных систем. Введение в предмет",href:"\u002Finformatika\u002Fmatematicheskiy-apparat-dlya-postroeniya-kompyuternyh-sistem",jpg:"jpg\u002F442182"},{id:182585,name:"Сайт Wiki spaces",href:"\u002Finformatika\u002Fsayt-wiki-spaces",jpg:"jpg\u002F182585"},{id:169255,name:"Кодирование данных",href:"\u002Finformatika\u002Fkodirovanie-dannyh",jpg:"jpg\u002F169255"},{id:129884,name:"Помехоустойчивое кодирование в системах телекоммуникаций (ПКСТ)",href:"\u002Finformatika\u002Fpomehoustoychivoe-kodirovanie-v-sistemah-telekommunikatsiy-pkst",jpg:"jpg\u002F129884"},{id:207319,name:"Операциялық жүйеге кіріспе. Операциялық жүйенің негізгі концепциялары",href:"\u002Finformatika\u002Foperatsiyaly-zhyege-krspe-operatsiyaly-zhyen-negzg",jpg:"jpg\u002F207319"},{id:108749,name:"Связи между классами. Объектно-ориентированное программирование. (Лекция 3)",href:"\u002Finformatika\u002Fsvyazi-mezhdu-klassami-obektno-orientirovannoe-programmirovanie",jpg:"jpg\u002F108749"},{id:544099,name:"Презентация к уроку",href:"\u002Finformatika\u002Fprezentatsiya-k-uroku-26202313",jpg:"jpg\u002F544099"},{id:439488,name:"Базы данных",href:"\u002Finformatika\u002Fbazy-dannyh-2050",jpg:"jpg\u002F439488"},{id:294205,name:"Влияние СМИ на сознание молодёжи",href:"\u002Finformatika\u002Fvliyanie-smi-na-soznanie-molodyozhi",jpg:"jpg\u002F294205"},{id:469928,name:"Урок Безопасность в интернете",href:"\u002Finformatika\u002Furok-bezopasnost-v-internete",jpg:"jpg\u002F469928"},{id:303142,name:"Web-дизайн. Сравнительный анализ интернет-сайтов",href:"\u002Finformatika\u002Fweb-dizayn-sravnitelnyy-analiz-internet-saytov-1",jpg:"jpg\u002F303142"},{id:408028,name:"My alien",href:"\u002Finformatika\u002Fmy-alien",jpg:"jpg\u002F408028"}],navigation:{next:"\u002Fyurisprudentsiya\u002Fkriminalisticheskaya-fotografiya-i-videozapis-3",next_name:"Криминалистическая фотография и видеозапись",prev:"\u002Fyurisprudentsiya\u002Fponyatie-dokumenta-klassifikatsiya-dokumentov",prev_name:"Понятие документа, классификация документов"}}}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:K,SITE_HOST:"mypreza.com",SITE_LANG:L,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:K,short_name:a,description:a,lang:L,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:M,purpose:h},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:N,purpose:h},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:O,purpose:h},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:P,purpose:h},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:h},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:R,purpose:h},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:S,purpose:h}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:x,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:i,item_slide_header:y,item_images:z,item_images_tag:A,item_words_h3:c,item_words_tag:B,item_words_1:i,routing:C,item_slide_skipping:D,item_download_timeout:E,item_slider_width:F,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:k,header_bg:j,accent:j}},social:G,token:a}}}}("",0,false,"image\u002Fpng",true,"\u003Cp\u003E Колір і фон\u003Cbr\u003E","any","maskable",13,"#d53032","#ffffff","CSS basics","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E",1,"Информатика",139,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Що таке CSS?
У чому різниця між CSS і HTML?
CSS був створений для виправлення цієї ситуації шляхом надання web-дизайнерам можливостей точного дизайну, підтримуваних всіма браузерами. Одночасно відбувся поділ подання та вмісту документа, що значно спростило роботу.

Що таке CSS?
Які переваги дасть мені CSS?
Поява CSS стало революцією в світі web-дизайну. Конкретні переваги CSS:
управління відображенням безлічі документів за допомогою однієї таблиці стилів;
більш точний контроль над зовнішнім виглядом сторінок;
поданням для різних носіїв інформації (екран, друк, і т. д.);
складна і пророблена техніка дизайну.

Синтаксис CSS?
Базовий синтаксис CSS
Скажімо, нам потрібен червоний колір фону web-сторінки:
У HTML це можна зробити так:
За допомогою CSS того ж самого результату можна досягти так:
body {background-color: # FF0000;}

Як працює CSS?
Базовий синтаксис CSS
Але де розміщувати CSS-код? Саме цим питанням ми і займемося зараз.

Основні визначення
Селектор – елемент, до якого відноситься певний стиль.
CSS – правило – це блок, який складається з хоча б одного селектору і визначення стиля (стильової властивості).
Листи стилів – це фактично набори CSS-правил, які задають властивості форматування елементів документу.

Як працює CSS?
Застосування CSS до HTML-документу
Є три способи застосувати CSS-правила до HTML-документу:
атрибут style (вбудований стиль).
тег style (стиль заголовку).
посилання на листи стилів (.css).
Ми рекомендуємо зосередитися на третьому - тобто
зовнішній / external таблиці стилів.

Як працює CSS?
Метод 1: Інлайн / In-line (атрибут style)
Можна застосовувати CSS до HTML за допомогою HTML-атрибуту style. Червоний колір фону можна встановити так:
Приклад
Це червона сторінка

Як працює CSS?
Метод 2: Внутрішній (тег style)
Другий спосіб вставки CSS-кодів - HTML-тег
. Наприклад: <br><p><html>
<head>
<title>Приклад</title>
<style type="text/css">
body {background-color: #FF0000;}
Це червона сторінка

Як працює CSS?
Метод 3: Зовнішній (посилання на листи стилів) - рекомендований метод.
Зовнішня таблиця стилів це просто текстовий файл з розширенням .css. Ви можете помістити таблицю стилів на ваш web-сервер або на жорсткий диск, як і інші файли.

Як працює CSS?
Метод 3: Зовнішній (посилання на таблицю стилів)
Наприклад, скажімо, ваша таблиця стилів називається style.css і знаходиться в папці style. Це можна проілюструвати так:

Як працює CSS?
Метод 3: Зовнішній (посилання на таблицю стилів)
Весь фокус полягає в тому, щоб створити посилання з HTML-документа (default.htm) на таблицю стилів (style.css). Це можна зробити одним рядком HTML-коду:

Як працює CSS?
Метод 3: Зовнішній (посилання на таблицю стилів)
Цей рядок коду потрібно вставляти в розділі header HTML, тобто між тегами і . Наприклад, так:
Мій документ
...

Як працює CSS?
Метод 3: Зовнішній (посилання на таблицю стилів)

Як працює CSS?
Завдання №1
Відкрийте Блокнот (або інший ваш текстовий редактор) і створіть два файли - HTML-файл і CSS-файл - такого змісту:
Мій документ
Моя перша таблиця стилів
default.html
style.css
body {
background-color: #FF0000;
}

Як працює CSS?
Отже, деякі зауваження:
зовнішню таблицю стилів можна створити в будь-якому текстовому редакторі;
файл із зовнішньою таблицею стилів не повинен містити ніяких тегів html;
файл із зовнішньою таблицею стилів необхідно зберегти з розширенням .css

Колір і фон
Розглянемо наступні CSS-властивості:
color
background-color
background-image
background-repeat
background-attachment
background-position
background

Колір і фон
Колір переднього плану: властивість 'color'
Наприклад, ми хочемо зробити всі заголовки документа темно-червоними. Заголовки позначаються HTML-елементом
:
h1 {
color: # ff0000;
}

Колір і фон

Колір і фон
Властивість background-color описує колір фону елемента.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Колір і фон

Колір і фон
Фонові зображення [background-image]
Для вставки малюнка в якості фонового зображення web-сторінки просто застосуйте властивість background-image в тезі і вкажіть місце розташування малюнка.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}

Колір і фон

Колір і фон
Повторення / мультиплікація фонового зображення [background-repeat]

Колір і фон
Наприклад, для скасування повторення / мультиплікації фонового малюнка ми повинні записати такий код:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Колір і фон

Колір і фон
Блокування фонового зображення [background-attachment] - визначає, фіксується фоновий малюнок, чи прокручується разом з вмістом сторінки.

Колір і фон
Блокування фонового зображення [background-attachment]. Приклад:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Колір і фон

Колір і фон
Розташування фонового малюнка [background-position] – це набір координат.
Наприклад, значення '100px 200px' розташовує фоновий малюнок на 100px зліва і на 200px зверху у вікні браузера.

Колір і фон

Колір і фон
Розташування фонового малюнка [background-position]. Приклад:

Колір і фон
У прикладі коду фонове зображення розташовується в правому нижньому кутку екрану:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Колір і фон

Колір і фон
Скорочений запис [background]
Властивість background входить до складу всіх властивостей, які перераховані.
За допомогою background ви можете стискати кілька властивостей і записувати ваші стилі в скороченому вигляді, що полегшує читання таблиць.

Колір і фон
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Використовуючи background, того ж результату можна досягти одним рядком коду:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

Колір і фон
Порядок властивостей цього елемента такий:
[Background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Якщо властивість відсутня, воно автоматично отримує значення за замовчуванням. Наприклад, якщо background-attachment і background-position немає в даному прикладі:
background: #FFCC66 url("butterfly.gif") no-repeat;

Шрифт
CSS-властивості:
font-family
font-style
font-variant
font-weight
font-size
font

Шрифт
Сімейство шрифту [font-family].
Властивість font-family вказує пріоритетний список шрифтів, що використовуються для відображення даного елемента або web-сторінки.
Для категоризації шрифтів використовуються два типи імен:
ім'я сімейства / family-name
загальне / родове сімейство / generic family.

Шрифт
Сімейство шрифту [font-family].
Family-name
Приклад family-name (часто зване просто "шрифт") це, наприклад, "Arial", "Times New Roman" або "Tahoma".
Generic family
Його можна простіше описати як групу family-names, що мають характерні спільні риси. Приклад - sans-serif, набір шрифтів без "зарубок / feet".

Шрифт

Шрифт
Сімейство шрифту [font-family].
Список шрифтів може виглядати так:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Шрифт
Стиль шрифту [font-style]
Може приймати такі значення:
normal (звичайний); italic (курсив); oblique (похилий).
У прикладі всі заголовки
будуть показані курсивом italic.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}

Шрифт
Стиль шрифту [font-style]

Шрифт
Варіант шрифту [font-variant]
Властивість font variant може мати одне з двох можливих значень:
normal (звичайний шрифт);
small-caps (шрифт з малими прописними літерами).
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

Шрифт
Вага шрифту [font-weight]
Кожен шрифт може приймати наступні значення:
normal (звичайний);
lighter (тонкий);
bold (жирний);
bolder (ще більш жирний);
100-900 числовий опис ваги, в якому значення 100 відповідає самому тонкому зображенню, а 900 — товстому зображенню).

Шрифт
Вага шрифту [font-weight]
Приклад:
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Шрифт
Розмір шрифту [font-size]
Приклад:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Шрифт
Розмір шрифту [font-size]
Приклад з em:
Страуси
Живуть також в Африке

Шрифт
Скорочений запис [font]
Приклад: використовуючи скорочений запис, код можна спростити:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
p {
font: italic bold 30px arial, sans-serif;
}
Порядок властивостей font такий:
font-style | font-variant | font-weight | font-size | font-family

Текст
Форматування та встановлення стилю тексту - ключова проблема для будь-якого web-дизайнера. Розглянемо наступні властивості:
text-indent
text-align
text-decoration
letter-spacing
text-transform

Текст
Відступи [text-indent]
Властивість text-indent дозволяє виділити параграф за допомогою установки відступу для його першого рядка. У прикладі 30px застосовується до всіх
:
p {
text-indent: 30px;
}

Текст
Вирівнювання тексту [text-align]
Текст може бути вирівняний left, right, center або justify.
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}

Текст
Вирівнювання тексту [text-align]

Текст
Декоративний варіант [text-decoration]
Властивість text-decoration дозволяє додавати різні "декоративні ефекти". Наприклад, можна підкреслити текст, провести лінію по або над текстом і т. д.
У прикладі
підкреслені,
- мають риску над текстом, а
- перекреслені.

Текст
Декоративний варіант [text-decoration]
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}

Текст
Інтервал між буквами [letter-spacing]
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}

Текст
Трансформація тексту [text-transform]
Є чотири можливих значення text-transform:
capitalize
Капіталізує кожне слово. Наприклад: "john doe" стане "John Doe".
uppercase
Конвертує всі символи у верхній регістр. Наприклад: "john doe" стане "JOHN DOE".
lowercase
Конвертує всі символи в нижній регістр. Наприклад: "JOHN DOE" стане "john doe".
none
Трансформації немає - текст відображається так само, як в HTML-коді.

Текст
Трансформація тексту [text-transform]
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}

Посилання
Що таке псевдоклас?
Псевдоклас — це властивість, яка дозволяє змінювати стиль елемента у залежності від дій користувача, а також розташування елемента (тега) у загальному потоці документа, що додає у дизайн сторінки деяку динаміку і логіку.
Класичним прикладом застосування псевдокласу є посилання, що змінює свій колір при наведенні на нього вказівника. Посилання в коді html задають контейнером a. У CSS можна використати цей тег як селектор:
a{color: blue;}

Посилання
Що таке псевдоклас?
Псевдокласи можна використати для встановлення різних стилів для відвіданих і невідвіданих посилань відповідно. Перелічимо ці псевдокласи посилання:
a:visited — відвідані;
a:link — невідвідані;
a:active — активні;
a:hover — під вказівником.

Посилання
a:link {
color: #6699CC;
}
Псевдоклас : link використовується для посилань на сторінки, які користувач ще не відвідував. У прикладі коду невідвідані посилання - сині.

Посилання
Псевдоклас: visited
Псевдоклас : visited використовується для посилань на сторінки, які користувач відвідав. У прикладі коду відвідані посилання - фіолетові.
a:visited {
color: #660099;
}

Посилання
Псевдоклас: active
Псевдоклас : active використовується для активних посилань.
У прикладі активні посилання мають жовтий фон.
a:active {
background-color: #FFFF00;
}

Посилання
Псевдоклас: hover
Псевдоклас : hover використовується для посилань, над якими знаходиться курсор миші.
Це можна використовувати для створення цікавих ефектів. Наприклад, якщо ми хочемо, щоб посилання ставали помаранчевими і курсивними при проходженні покажчика над ними, то наш CSS повинен виглядати так:

Посилання
Псевдоклас: hover
a:hover {
color: orange;
font-style: italic;
}

Посилання
Приклад 1: Ефект при знаходженні покажчика над посиланням
Ми розглянемо декілька додаткових прикладів для псевдокласа : hover.
Приклад 1a: Відстань між літерами
Як ви пам'ятаєте, відстань між символами можна встановити властивістю letter-spacing. Це можна застосувати для посилання:

Посилання
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

Посилання
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Приклад 1b: UPPERCASE і lowercase
Ми розглянули властивість text-transform, яке може перемикати символи з верхнього на нижній регістр. Це також можна використовувати для створення ефектів на посиланні:

Посилання
Приклад 2: Видалення підкреслення посилань
Звичайне питання - як видалити підкреслення посилань?
Ви повинні точно визначити, чи потрібно прибрати підкреслення посилань, так як це може значно знизити використання вашого web-сайту.

Посилання
Приклад 2: Видалення підкреслення посилань
Люди звикли бачити на web-сторінках сині підкреслені посилання і знають, що за ним потрібно клацати. Якщо ви приберете підкреслення і зміните колір посилань, досить імовірно, що це збентежить користувачів і вони не отримають доступу до всього вмісту вашого сайту.

Посилання
a {
text-decoration:none;
}
Приклад 2: Видалення підкреслення посилань
Взагалі-то видалити підкреслення посилань дуже просто. Як ви, можливо, пам'ятаєте, властивість text-decoration можна використовувати для визначення підкреслення тексту. Для видалення підкреслення просто встановіть в text-decoration значення none.

Види селекторів
Селектори типу.
Селектори класу.
Селектори id (ідентифікатори).

Селектор типу
Задавати атрибут style для кожного тега незручно і довго. Особливо, якщо той же результат можна отримати за допомогою єдиного CSS-правила, в якому використовується селектор для тега li.
За допомогою селектора типу (по назві тега) можна задати стилі для всіх елементів списку, зображень, абзаців і так далі. Ці селектори містять ім'я тега без символів <і>. наприклад:
li {
/ * Стилі для елементів списку * /
}

Селектор класу
Клас - це один з атрибутів тегів. Виглядає він ось так:
Цей атрибут особливий, так як в CSS існує можливість вибирати елементи по класу. Робиться це за допомогою такого селектора: .ім’я_класа. наприклад:
Імена класів можуть складатися з латинських символів, цифр і знаків - і _. Ім'я класу має починатися з літери.
.first {
/* стилі для класа first */
}

Селектор id
Існує ще один HTML-атрибут, для якого існує спеціальний селектор. Цей атрибут ID (ідентифікатор), а селектор записується за допомогою символу #, наприклад, #some-id.
На значення ID поширюються ті ж обмеження, що і на ім'я класу.
Ідентифікатор повинен бути унікальним на сторінці.
Використання селектора по ID при оформленні вважається поганою практикою.

Завдання 1
Оформлення тексту за допомогою CSS.
Оформіть текст, як показано на рисунку, при умові, що розмір всього тексту - 5em. Використайте: font-size, font-family, letter-spacing, vertical-aligan.
Використайте стиль заголовку.

Завдання 2
Нижній та верхній Індекси.
Напишіть CSS-правила, щоб отримати такий результат.
Використати позначення грецького символу λ, як λ або λ