Область застосування CSS. Способи використання в HTML документі

Нажмите для полного просмотра!

Область застосування CSS. Способи використання в HTML документі, слайд №2

Область застосування CSS. Способи використання в HTML документі, слайд №3

Область застосування CSS. Способи використання в HTML документі, слайд №4

Область застосування CSS. Способи використання в HTML документі, слайд №5

Область застосування CSS. Способи використання в HTML документі, слайд №6

Область застосування CSS. Способи використання в HTML документі, слайд №7

Область застосування CSS. Способи використання в HTML документі, слайд №8

Область застосування CSS. Способи використання в HTML документі, слайд №9

Область застосування CSS. Способи використання в HTML документі, слайд №10

Область застосування CSS. Способи використання в HTML документі, слайд №11

Область застосування CSS. Способи використання в HTML документі, слайд №12

Область застосування CSS. Способи використання в HTML документі, слайд №13

Область застосування CSS. Способи використання в HTML документі, слайд №14

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Область застосування CSS. Способи використання в HTML документі. Доклад-сообщение содержит 14 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

CSS 3 основи Ігор Лютак

Слайд 2

Описание слайда:

ПЛАН Зрозуміти область застосування CSS Способи використання в HTML документі Основні можливості CSS Користуватись довідником Приклади елементів документу Завдання

Слайд 3

Описание слайда:

РЕСУРСИ В ІНТЕРНЕТІ ...

Слайд 4

Описание слайда:

ЩО ТАКЕ CSS? CSS це мова, що описує стиль HTML документу, тобто як будуть відображатись елементи. Наприклад: body { background-color: lightblue; } h1 { color: white; text-align: center; }

Слайд 5

Описание слайда:

ПІД'ЄДНАННЯ ДО HTML Є три способи: Зовнішній файл Всередині документу Як слиль елементу Наприклад:

Слайд 6

Описание слайда:

СЕЛЕКТОРИ Застосування стилю робиться за правилом: селектор і блок опису стилю. Селектор використовується для "пошуку" елементів в документі до яких буде застосовано стиль

Слайд 7

Описание слайда:

СЕЛЕКТОРИ ПРОДОВЖЕННЯ Можна групувати селектори (перераховуючи їх через кому), застосовувати один стиль для різних елементів, наприклад: h1, h2, p { text-align: center; color: red; } три елементи мають однакивий стиль

Слайд 8

Описание слайда:

КОЛЬОРИ Є три основні способи визначити колір: Через ім'я: h1 { color: red; } За допомогою значення RGB: h1 { color: rgb(255, 0, 0); } Через шістнадцяткове число: h1 { color: #FF0000; } Колір можна застосувати до: Тексту: h1 { color: blue; } Фону елементу: h1 { background-color: lightblue; } Границі елементу: h1 { border-color: green; } Прозорість кольору, функція rgba(0, 0, 0, 0.0): 0.0 - повністю прозорий, 1.0 - непрозорий p1 {background-color: rgba(255, 0, 0, 0.3);} /* червоний з прозорістю */

Слайд 9

Описание слайда:

МОДЕЛЬ "КОРОБКИ' Кожен елемент можна представляти у вигляді коробки у якої є набивка (padding), границя (border), відступ (margin) та обвід (outline) Наприклад:

Слайд 10

Описание слайда:

TEKCT Текст має багато властивостей до яких належать:

Слайд 11

Описание слайда:

ШРИФТИ Є 2 типи шрифтів: generic family (загальна сім'я) - виглядають однаково, (Times New Roman, Georgia) font family (сім'я) - специфічний шрифт сім'ї p { font-family: "Times New Roman", Times, serif; } через кому, перераховуємо різні сім'ї шрифтів. 818 Google Fonts Під'єднання шрифту у документ: Застосування стилю body { font-family: 'Sofia';font-size: 22px; }

Слайд 12

Описание слайда:

ВИДИМІСТЬ ЕЛЕМЕНТА Видимість елемента контролюється найважливішою властивістю для розмітки (положення) елементів display Кожен елемент має по замовчуванню своє значення. Елементи рівня блоку (block-level elements) - починаються завжди з нового рядка і заповнюють сторінку на всю ширину, наприклад теги "p", "div", , , , Вставні елементи (Inline Elements) - не починаються з нового рядка і заповнюють тільке потрібне місце, наприклад теги , , Невидимими елементи можна зробити так li { display: inline; } display: block; - робить елемент блоком display: inline; - робить елемент частиною зовнішнього елемента display: inline-block; - подібно як inline але мають ширину і висоту

Слайд 13

Описание слайда:

ПОЛОЖЕННЯ ЕЛЕМЕНТІВ Положення елементів визначається властивістю position Є 4 види положення static - по замовчуванню, тобто нормальне розміщення елементів один за одним relative - відносне положення (відносно нормального). Інші елементи не будуть заповнювати проміжки, що утворились fixed - фіксоване положення по відношенню до видимої частини сторінки absolute - фіксоване положення відносно зовнішнього елемента, який має значення position не static

Слайд 14

Описание слайда:

ЗАВДАННЯ Використовуючи глави щодо форматування списків щодо форматування меню Зробити власну горизонтальну панель меню. Лого зробити текстом подібно до зображення (не потрібно, щоб було один в один як на завданні). Іконки кнопок можна зробити за прикладом: