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

можливості CSS
Користуватись довідником
Приклади елементів документу
Завдання
лайд

HTML документу, тобто як будуть відображатись елементи.
Наприклад:

body {

background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}

слайд

елементу
Наприклад:


слайд

опису стилю. Селектор використовується для "пошуку" елементів в документі

до яких буде застосовано стиль

слайд

Селектори можуть бути назвою елементу, id, класом, атрибутом і т. д.

застосовувати один стиль для різних елементів, наприклад:
h1, h2, p

{
text-align: center;
color: red;
}
три елементи мають однакивий стиль

слайд

Вибір всіх елементів всередині іншого (через пропуск), наприклад:
div p {
text-align: center;
color: red;
}
стиль застосовується до всіх елементів "p", що є всередині елементу div

Вибір елементів за допомогою псевдокласів, наприклад:
a:hover {
color: red;
background-color: yellow;
}
застосовує стиль до посилання, коли мишка є над ним

{ 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);} /* червоний з прозорістю */

слайд

у якої є набивка (padding), границя (border), відступ (margin)

та обвід (outline)
Наприклад:

слайд

p.one {
border-style: solid;
border-color: red;
}

p {
border: 2px solid red;
border-radius: 5px;
}

p {
margin: 100px 150px 100px 80px;
}

div {
height: 200px;
width: 50%; }

Вибір padding-top
сторони: padding-right
padding-bottom
padding-left

виглядають однаково, (Times New Roman, Georgia)
font family (сім'я) -

специфічний шрифт сім'ї
p { font-family: "Times New Roman", Times, serif; }
через кому, перераховуємо різні сім'ї шрифтів.


818 Google Fonts https://fonts.google.com/
Під'єднання шрифту у документ:

Застосування стилю

слайд

розмітки (положення) елементів display
Кожен елемент має по замовчуванню своє

значення.
Елементи рівня блоку (block-level elements) - починаються завжди з нового рядка і заповнюють сторінку на всю ширину, наприклад теги "p", "div",

,

,

види положення
static - по замовчуванню, тобто нормальне розміщення елементів

один за одним
relative - відносне положення (відносно нормального). Інші елементи не будуть заповнювати проміжки, що утворились
fixed - фіксоване положення по відношенню до видимої частини сторінки
absolute - фіксоване положення відносно зовнішнього елемента, який має значення position не static