Стилі CSS. (Лекція 4)

Сентябрь 7, 2022

Главная
Алгебра
Стилі CSS. (Лекція 4)

Содержание

2. Основні поняття CSS Розшифровується CSS (англ. Cascading Style Sheets) як каскадні таблиці стилів і є технологією
3. .newfont{font-size:24px; color:#CC9933} Классы для створення тегів. Заголовок
5. Список властивостей, які можна змінити за допомогою CSS
6. Синтаксис і елементи CSS Додавання стилів CSS в HTML-документ Існує декілька способів скріплення документа і таблиці
7. Скріплення. Iнформація про стилі може розташовуватися або в окремому файлі, або безпосередньо в коді документа.
8. Впровадження. Другий варіант, при якому опис стилів розташовується в коді Web-странички, усередині тега HEAD, в теге
9. .el_cl_1{display:inline; z-index:1}; .el_lst{display:list-item; margin:-1%; background:#ff0000 url("bc.jpg") no-repeat};
10. Вбудовування в теги документа. Внимание! Імпортування Untitled @import url('css/default.css');
11. 2.2 Групування H1 {font-family: Verdana} H2 {font-family: Verdana} можна згрупувати і задати у вигляді одного правила
12. H2 {font-weight: bold} H2 {font-size: 14pt} H2 {font-family: Verdana} можна згрупувати у вигляді одного правила, згрупувавши
13. Селектори Правила каскадних таблиць стилів, в яких як селектор використовуються теги HTML, впливають на відображення всіх
14. Класи CSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а вибірково – для цього
15. H1.red {color: red; } H1.blue (color:red; background-color: blue} У тексті документа посилання на відповідний клас задається
16. .red {color: red; } .blue (color:red; background-color: blue} Тепер два класи red і blue можна застосовувати
17. Ідентифікатори Привласнення стилів за допомогою ідентифікаторів застосовується у випадку, якщо даному ідентифікатору відповідає тільки один елемент
18. Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор, передуючи йому символом #: #myID
19. 3 Властивості шрифту
22. B {font-weight: bolder;} .b {font-weight: bold;} .size {font-size: 200%;} Курсивный шрифт все букви заглавные Жирный шрифт
23. Колір елементу і колір фону
25. 5 Властивості тексту
28. H4 {text-decoration: underline;} A {text-decoration: none;} i {text-decoration:line-through;} b {text-decoration:overline;} H5 {text-align: center} b.cap {text-transform:capitalize;} .otstup
29. Увеличим проміжки між словами Уменьшим проміжки між буквами Формула спирту C 2 H 5 OH
30. 6 Одиниці вимірювання Умовно одиниці вимірювання можна розділити на три групи. Перша група - це величини,
31. До другої групи можна віднести величини, які прийшли в CSS з друкарні. Тобто вони використовуються для
33. Скачать презентацию

Слайд 2

Основні поняття CSS
Розшифровується CSS (англ. Cascading Style Sheets) як каскадні таблиці

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

Слайд 3

Классы для створення тегів.

newfont ">Заголовок

Слайд 4

Слайд 5

Список властивостей, які можна змінити за допомогою CSS

Слайд 6

Синтаксис і елементи CSS Додавання стилів CSS в HTML-документ
Існує декілька способів скріплення

документа і таблиці стилів:
Скріплення - дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок HTML
Впровадження - дозволяє задавати всі правила таблиці стилів безпосередньо в самому документі
Вбудовування в теги документа - дозволяє змінювати форматування конкретних елементів сторінки
Імпортування - дозволяє вбудовувати в документ таблицю стилів, розташовану на сервері

Слайд 7

Скріплення. Iнформація про стилі може розташовуватися або в окремому файлі, або безпосередньо

в коді документа.

Слайд 8

Впровадження.
Другий варіант, при якому опис стилів розташовується в коді Web-странички, усередині

тега HEAD, в теге

Слайд 10

Вбудовування в теги документа.
Внимание!

Імпортування

Untitled

Слайд 11

2.2 Групування
H1 {font-family: Verdana}
H2 {font-family: Verdana}
можна згрупувати і задати у

вигляді одного правила із списком селекторів
H1, H2 {font-family: Verdana}

Слайд 12

H2 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
можна згрупувати у вигляді одного

правила, згрупувавши визначення:
H2 (font-weight: bold; font-size: 14pt; font-family: Verdana;}

Слайд 13

Селектори
Правила каскадних таблиць стилів, в яких як селектор використовуються теги HTML,

впливають на відображення всіх елементів заданого типу в документі. Наступне правило відображає без підкреслення всі посилання в документі.
< STYLE TYPE="text/css"> A {text-decoration:none; }

Слайд 14

Класи
CSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а

вибірково – для цього використовується параметр CLASS = "ім'я класу" або ідентифікатор ID=«имя елементу», що привласнюються будь-якому елементу сторінки. Розглянемо ці можливості докладніше.

Слайд 15

У тексті

документа посилання на відповідний клас задається в параметрі CLASS:

Красный шрифт

Красный шрифт на синьому фоне

Слайд 16

Тепер два класи

red і blue можна застосовувати до будь-яких елементів документа:

Красный шрифт

Красный шрифт на синьому фоне

Слайд 17

Ідентифікатори
Привласнення стилів за допомогою ідентифікаторів застосовується у випадку, якщо даному

ідентифікатору відповідає тільки один елемент на сторінці. Якщо елементів, яким необхідно привласнити такий стиль, декілька – це вже клас.

Слайд 18

Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор,

передуючи йому символом #:

Розріджені слова в абзаце

Черный заголовок

Слайд 19

3 Властивості шрифту

Слайд 20

Слайд 21

Слайд 22

Курсивный шрифт
все

букви заглавные
Жирный шрифт bolder
Жирный шрифт bold
Жирный шрифт на 200 %

Слайд 23

Колір елементу і колір фону

Слайд 24

Слайд 25

5 Властивості тексту

Слайд 26

Слайд 27

Слайд 28

Слайд 29

Увеличим проміжки між словами
Уменьшим проміжки

між буквами

Формула спирту
C
2
H
5
OH

Слайд 30

6 Одиниці вимірювання
Умовно одиниці вимірювання можна розділити на три групи.
Перша

група - це величини, які використовуються для вимірювання довжин реальних предметів. До них відносяться:
in - дюйми;
cm - сантиметри;
mm - міліметри.

Слайд 31

До другої групи можна віднести величини, які прийшли в CSS з

друкарні. Тобто вони використовуються для установки розмірів шрифту, міжрядкових інтервалів і інших друкарських величин. Дана група величин звична поліграфістам. До них відносяться:
pt - друкарський пункт;
pc - спис;
ex - висота рядкової букви "x" в шрифті.

Стилі CSS. (Лекція 4)

Содержание

Основні поняття CSSРозшифровується CSS (англ. Cascading Style Sheets) як каскадні таблиці

<br> .newfont{font-size:24px; color:#CC9933}<br>Классы для створення тегів. newfont ">Заголовок

Список властивостей, які можна змінити за допомогою CSS

Синтаксис і елементи CSS Додавання стилів CSS в HTML-документ Існує декілька способів скріплення

Скріплення. Iнформація про стилі може розташовуватися або в окремому файлі, або безпосередньо

Впровадження.Другий варіант, при якому опис стилів розташовується в коді Web-странички, усередині

Вбудовування в теги документа.Внимание!ІмпортуванняUntitled <br>@import</div></h2><div class="slides-content">url('css/default.css');<br>

2.2 Групування H1 {font-family: Verdana}H2 {font-family: Verdana} можна згрупувати і задати у

H2 {font-weight: bold}H2 {font-size: 14pt}H2 {font-family: Verdana} можна згрупувати у вигляді одного

СелекториПравила каскадних таблиць стилів, в яких як селектор використовуються теги HTML,

КласиCSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а

<br>H1.red {color: red; } <br>H1.blue (color:red; background-color: blue}<br> У тексті

Красный шрифт

Красный шрифт на синьому фоне

<br>.red {color: red; }<br>.blue (color:red; background-color: blue} Тепер два класи

ІдентифікаториПривласнення стилів за допомогою ідентифікаторів застосовується у випадку, якщо даному

Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор,

Черный заголовок

3 Властивості шрифту

<br>B {font-weight: bolder;}<br>.b {font-weight: bold;}<br>.size {font-size: 200%;}<br>Курсивный шрифтвсе

Колір елементу і колір фону

5 Властивості тексту

Увеличим проміжки між словами Уменьшим проміжки

6 Одиниці вимірювання Умовно одиниці вимірювання можна розділити на три групи. Перша

До другої групи можна віднести величини, які прийшли в CSS з

Похожие презентации

Основні поняття CSS
Розшифровується CSS (англ. Cascading Style Sheets) як каскадні таблиці

Классы для створення тегів.

newfont ">Заголовок

Синтаксис і елементи CSS Додавання стилів CSS в HTML-документ
Існує декілька способів скріплення

Впровадження.
Другий варіант, при якому опис стилів розташовується в коді Web-странички, усередині

Вбудовування в теги документа.
Внимание!

Імпортування

Untitled

2.2 Групування
H1 {font-family: Verdana}
H2 {font-family: Verdana}
можна згрупувати і задати у

H2 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
можна згрупувати у вигляді одного

Селектори
Правила каскадних таблиць стилів, в яких як селектор використовуються теги HTML,

Класи
CSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а

У тексті

Тепер два класи

Ідентифікатори
Привласнення стилів за допомогою ідентифікаторів застосовується у випадку, якщо даному

Курсивный шрифт
все

Увеличим проміжки між словами
Уменьшим проміжки

6 Одиниці вимірювання
Умовно одиниці вимірювання можна розділити на три групи.
Перша