Лекція 3 Каскадні таблиці стилей.

Основи CSS.

План 1. Використання CSS в HTML. 2. Способи застосування CSS.

– вбудовані, внутрішні, зовнішні, імпорт стилей

3. Синтаксис стилей, види селекторів. – селектори тегів, ідентифікатори, класи,

псевдокласи – спадкування стилей

4. “Читабельність” документу з CSS. 5. Типи селекторів за призначенням.

– основні селектори.

6. Основні властивості стилів.

2

Використання CSS в HTML.

• Код HTML створювався для структурування й розмітки документів у Веб. Однак, досить швидко він почав містити і елементи форматування, а також використовуватись “не за призначенням”: – замість заголовочних елементів – параметри тегу <font>. – таблиці – як елемент верстки веб-сторінок (замість

відображення табличних даних).

• В результаті, код HTML став переповнений параметрами тегів, які створювали заплутаний код, який було важко зрозуміти.

• Таблиці стилей (СSS, Cascading Style Sheets) дозволяють відділити зміст документу від його оформлення: – HTML – зміст документу. – CSS – оформлення.

• “Змістовна” (смысловая) розмітка – теги використовуються за їх прямим призначенням.

• Стилі CSS схожі на стилі в документі MSWord або OOWriter.

3

H1 {color: green;} Селектор Властивість Значення

4

Способи застосування CSS.

CSS можуть бути застосовані двома способами: • Стилі оголошуються й використовуються в

межах тегу – вбудовані стилі (inline). – Вбудовані стилі слід використовувати лише в

крайніх випадках. <P style=“font-size: 10; color: green”>

• Стилі оголошені і застосовуються в одному й тому ж файлі - внутрішні стилі. – Дозволяють скоротити розмір файлів за рахунок

багаторазового використання. <STYLE type=“text/css”> .layer1 {font-size: 10; color: green} </STYLE> <P class=layer1>це приклад внутрішнього стилю</P>

5

Способи застосування CSS.

• Стилі оголошені в одному документі (з розширенням файлу .CSS), а використовуються – в іншому (.HTML) – зовнішні стилі. – Дозволяють суттєво скоротити розмір файлів – Дозволяють одночасно змінювати оформлення УСІХ

документів сайту. – Використовуються найчастіше.

файл *.css:

.layer1 {font-size: 10; color: green} файл *.html: <LINK rel=“stylesheet” href=“*.css” type=“text/css”> <P class=layer1>це приклад зовнішнього стилю</P>

6

Способи застосування CSS.

• Стилі оголошені в одному документі (з розширенням файлу .CSS), а використовуються – в іншому (.HTML або .CSS) – імпорт стилей. – Дозволяють суттєво скоротити розмір файлів – Дозволяють одночасно змінювати оформлення УСІХ

документів сайту, задавати різні типи оформлення для нових і старих браузерів.

<style type="text/css"> @import url("/css/advanced.css"); </style>

7

Синтаксис стилей, види селекторів.

CSS записуються у наступному узагальненому вигляді:

Селектор { властивість1: аргументи; властивість2: аргументи}

Селектор – це ім`я стилю. Можуть бути:

• Селектори тегів.

– використовуються для визначення вбудованих тегів HTML.

P { color: green; background: #f0f0f0; }

A LI { color: green; background: #f0f0f0; }

• Ідентифікатори.

– використовують для керування сторінкою за допомогою скриптів.

– кожен ідентифікатор повинен бути індивідуальним в межах сторінки.

#ident { color: green; background: #f0f0f0; }

- опис ідентифікатора в тезі <STYLE>

<P id=“ident”>приклад використання ідентифікатора</P> - приклад використання в тілі HTML-документу.

8

Види селекторів.

• Класи. – Класи використовують для створеня стилей, які можуть бeти

застосовані до будь-якого тегу HTML, для зміни стилей блоків.

– .layer1 { color: green; background: #f0f0f0; } - опис класа в тезі <STYLE>

<P class=“layer1”>приклад використання класу</P> <TABLE class=“layer1”>приклад використання

класу</TABLE> - приклад використання в тілі HTML-документу.

• Псевдокласи. – Псевдокласи дозволяють змінювати оформлення в

залежності від певних ознак (наприклад, чи було натиснуте гіперпосилання).

– a:link {color: blue;} – a:visited {color: green;} – a:active {color: red;}

9

• Спадкування полягає в тому, що елементи успадковують властивості від свого батька (елемента, що їх містить).

• Каскад проявляється в тому, як різні види таблиць стилів застосовуються до документу, і як конфліктуючі правила скасовують одне одного.

10

11

Особливості спадкування

Специфікацією CSS передбачено

спадкування властивостей, що відносяться до текстового вмісту сторінки

color, font, letter-spacing, line-height, list-

style, text-align, text-indent, text-

transform, visibility, white-space и word-spacing

Властивості, що відносяться до форматування блоків не успадковуються

background, border, display, float, clear, height, width,

margin, min-max-height,

min—max-width, outline, overflow, padding, position,

text-decoration, vertical-align и z-index

12

Універсальний селектор.

– Зірочка (*) – дозволяє задати параметри стилю для УСІХ елементів.

* {padding: 0; margin: 0;}

13

Специфічність селекторів

• ‘!important’ – перекриває всі інші стилі

• Inline-Style - 1000

• ID - 0100

• Class/pseudo class/attribute - 0010

• Tag - 0001

• Browser default – 0000

14

Наприклад:

* {box-sizing: border-box} /* 0000 */

li {color:red} /* 0001*/

ul li {color:red} /* 0002*/

.list li {color:red} /* 0011*/

#list li {color:red} /* 0101*/

a[href =“#"] {text-decoration: underline} /* 0011 */

15

Якщо декілька !important

li {color:red !imporatnt} /* специфічність 0001 - win*/

ul li {color:red} /* специфічність 0002*/

li {color:red !imporatnt} /* специфічність 0001*/

ul li {color:red !imporatnt} /*специфічність 0002 - win*/

16

“Читабельність” документу з CSS.

Рекомендації для покарщення читабельності. • Давати імена лише за змістом а не за стилем оформлення

(так як він може змінюватись): – .MainNav, .Content, .Intro – правильно. – .rightHandNav, .leftColumn, .Para – неправильно.

• Не створювати дуже багато класів, використовувати можливості HTML для розмітки: <hЗ сlаss=“nеwsНеаd">Новина</hЗ> <р class="newsText">Текст</р> <р class="newsText"><a href ="news.php" class="newsLink"> Додаткова інформація</а></р> <div class=“news”> <hЗ> Новина</hЗ> <р>Текст</р> <р><a href ="news.php">Додаткова інформація</а></р></div>

17

“Читабельність” документу з CSS.

• Використовувати тег <DIV> тільки у тих випадках, якщо для виділення ділянки не підходить жоден інший елемент розмітки (абзац, таблиця, зображення): <div id=“mainNav"> <ul> <li>Головна</li> <li>Контакти</li> </ul> </div> <ul id=“mainNav"> <li>Головна</li> <li>Контакти</li> </ul>

• Для зменшення кількості класів думайте, чим ті чи інші елементи різних класів відрізняються один від одного.

• Створюйте коментарі: / * це коментар * /

18

Типи властивостей за призначенням.

Всі властивостей можна розділити за призначенням: • властивості фону; • меж; • позиціонування; • форматування; • кольору; • шрифту; • тексту; • списків; • відступів; • полів; • таблиць; • курсору.

19

Властивості кольору.

Властивість color (колір)

• Синтаксис: – color: значення;

• Об’єктна модель (для скриптів): – [window.]document.getElementById("el

ementID").style.color

• Аналоги HTML: – <body text="цвет">

<font color="цвет">

20

√ A

Спадк. Вик.

Властивості фону.

Властивість background (фон зображення і його параметри)

• Синтаксис:

– background: background-attachment || background-color || background-image || background-position || background-repeat позиціонування;

• Об’єктна модель (для скриптів):

– [window.]document.getElementById("elementID").style.background

• Приклад:

– background: #fc0 /* Цвет фона */ url('sample.gif') /* Путь к фоновому изображению */ repeat-y;

• Аналоги HTML:

– <body bgcolor="цвет" background="URL" bgproperties="fixed"> <table | thead | tbody | tfoot | tr | th | td bgcolor="цвет" background="URL">

21

- A

Спадк. Вик.

Властивості фону.

Властивість background-attachment («прокручування» фону)

• Синтаксис: – background-attachment: fixed | scroll

• Базове значення: scroll • Об’єктна модель:

– [window.]document.getElementById("elementID").style.backgroundAttachment

• Аналог HTML: – <body bgproperties="fixed">

22

- A

Спадк. Вик.

Властивості фону.

Властивість background-color (колір фону)

• Синтаксис: – background-color: колір | transparent

• Базове значення: transparent • Об’єктна модель:

– [window.]document.getElementById("elementID").style.backgroundColor

• Аналог HTML: – <body bgcolor="цвет">

23

- A

Спадк. Вик.

Властивості фону.

Властивість background-image (фоновий рисунок)

• Синтаксис: – background-image: url(«шлях до файлу»)

| none

• Базове значення: none • Об”єктна модель:

– [window.]document.getElementById("elementID"). style.backgroundImage

• Аналог HTML: – <body background="URL">

24

- A

Спадк. Вик.

Властивості фону.

Властивість background-position (позиція фонового рисунку)

• Синтаксис: – background-position: [проценты | значение] |

[left | center | right] || [top | center | bottom]

• Базове значення 0 0

• Об”єктна модель: – [window.]document.getElementById("elementI

D").style.backgroundPosition

• Аналог HTML: – нема

25

- В

Спадк. Вик.

Властивості фону.

Властивість background-repeat (повторення фон. рис.)

• Синтаксис: – background-repeat: no-repeat | repeat |

repeat-x | repeat-y

• Базове значення: repeat • Об”єктна модель:

– [window.]document.getElementById("elementID").style.backgroundRepeat

• Аналог HTML: – нема

26

- A

Спадк. Вик.

Властивості фону.

Властивість opacity (прозорість фонового рисунку)

• Синтаксис:

– opacity: число від 0 до 1.

• Базове значення: 1 (непрозоре)

• Аналог HTML:

– нема

27

- A

Спадк. Вик.

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

Властивість font • Синтаксис:

– font: [font-style || font-variant || font-weight] font-size [/line-height] font-family ;

• Об’єктна модель (для скриптів): – [window.]document.getElementById("elementI

D").style.font

• Приклад: – p { font: bold italic 12pt serif; }

• Аналоги HTML: – <I>, <B>, <FONT>

28

√ A

Спадк. Вик.

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

Властивість font-family • Синтаксис:

– font-family: имя шрифта [, имя шрифта[, ...]] ; – serif, sans-serif, cursive, fantasy, monospace

• Базове значення: Times New Roman • Об’єктна модель (для скриптів):

– [window.]document.getElementById("elementID").style.fontFamily

• Приклад: – H1 { font-family: Geneva, Arial, Helvetica, sans-

serif;}

• Аналоги HTML: – <font face="...">

29

√ A

Спадк. Вик.

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

Властивість font-size • Синтаксис:

– font-size: абсолютный размер | относительный размер | значение | проценты

– xx-small, x-small, small, medium, large, x-large, xx-large

• Базове значення: Medium • Об’єктна модель (для скриптів):

– [window.]document.getElementById("elementID").style. fontSize

• Приклад: – H1 { font-size: 11pt}

• Аналоги HTML: – <font size="...">

30

√ A

Спадк. Вик.

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

Властивість font-style • Синтаксис:

– font-style: normal | italic | oblique (базове значення – normal)

• Об”єктна модель (для скриптів): – [window.]document.getElementById("elementID").style.fontStyle

• Аналоги HTML: – <I>

Властивість font-variant • Синтаксис:

– font-variant: normal | small-caps (базове значення – normal)

• Об”єктна модель (для скриптів): – [window.]document.getElementById("elementID").style.fontVariant

• Аналоги HTML - нема

31

√ A

Спадк. Вик.

√ A

Спадк. Вик.

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

Властивість font-weight (насиченість шрифта)

• Синтаксис: – font-weight: bold | bolder | lighter | normal |

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

• Базове значення: normal (400) • Об’єктна модель (для скриптів):

– [window.]document.getElementById("elementID").style.fontWeight

• Аналоги HTML: – <font size="...">

32

√ A

Спадк. Вик.

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

Властивість letter-spacing (відстань між символами) • Синтаксис:

– letter-spacing: значение | normal

• Базове значення: normal • Аналоги HTML: нема.

Властивість line-height (інтерлінія – відстань між рядками)

• Синтаксис: – line-height: normal | множитель | значение | проценты

• Базове значення: normal • Аналоги HTML: нема.

33

√ A

Спадк. Вик.

√ A

Спадк. Вик.

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

Селектор text-align (вирівнювання тексту по горизонталі, )

• Синтаксис: – text-align: center | justify | left | right

• Базове значення: left

• Аналоги HTML: – <center>

– <p | h1 | div | table | thead | tbody | tfoot | tr | th | td align>

34

√ A

Спадк. Вик.

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

Властивість text-decoration (оформлення тексту) • Синтаксис:

– text-decoration: blink | line-through | overline | underline | none

• Базове значення: none • Аналоги HTML:

– <U>, <S>, <STRIKE>.

• Браузер ІЕ не відображає blink (миготіння)

Властивість text-indent (абзацний відступ) • Синтаксис:

– text-indent: значение | проценты

• Базове значення: 0 • Аналоги HTML: нема.

35

- A

Спадк. Вик.

√ В

Спадк. Вик.

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

Властивість white-space (пробіли та переноси) • Синтаксис:

– white-space: normal | nowrap | pre

• Базове значення: normal • Аналоги HTML:

– <PRE>, <NOBR>.

Властивість word-spacing (інтервал між словами) • Синтаксис:

– word-spacing: значение | normal

• Базове значення: normal • Аналоги HTML: нема.

36

√ В

Спадк. Вик.

√ А

Спадк. Вик.

Властивості списків.

Властивість list-style (стиль списку) • Синтаксис:

– list-style: list-style-type || list-style-position || list-style-image

• Базове значення: – disc (для <UL>); decimal (для <OL>)

• Аналоги HTML: – <ul type> | <ol type> | <li type>

Властивість list-style-image (маркер списку) • Синтаксис:

– list-style-image: none | url('путь к файлу')

• Базове значення: – none

• Аналоги HTML: нема

37

√ L

Спадк. Вик.

√ L

Спадк. Вик.

38

Властивості полів.

Властивість padding (внутрішні поля) • Синтаксис:

– padding: значение | auto {1, 4}

• Базове значення: нема • Аналоги HTML: нема • Порядок запису:

– 1, 2, 3 чи 4 аргументи, розділених прогаликом. – 1 аргумент: поля для всіх боків елементу. – 2 аргументи: 1-й - верхнє й нижнє, 2-й – ліве й праве поля. – 3 аргументи: 1-й – верхнє, 2-й – ліве й праве, 3-й – нижнє

поле. – 4 аргументи: верхнє, праве, нижнє, ліве поля.

• Також може бути використано як: – padding-top, padding-bottom, padding-left, padding-right

- A

Спадк. Вик.

39

Властивості відступів.

Властивість margin (зовнішні відступи) • Синтаксис:

– margin: значение | auto {1, 4}

• Базове значення: нема • Аналоги HTML: нема • Порядок запису:

– 1, 2, 3 чи 4 аргументи, розділених прогаликом. – 1 аргумент: відступи для всіх боків елементу. – 2 аргументи: 1-й - верхній і нижній, 2-й – лівий і правий

межі. – 3 аргументи: 1-й – верхній, 2-й – лівий й правий, 3-й –

нижній відст. – 4 аргументи: верхній, правий, нижній, лівий відступи.

• Також може бути використано як: – margin-top, margin-bottom, margin-left, margin-right

- A

Спадк. Вик.

40

Приклад використання полів і відступів

DIV.parent { margin: 20%; /* Отступы вокруг элемента */ background: #fd0; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */}

DIV.child { border: 3px solid #666; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ margin: 10px; /* Отступы вокруг */} </style></head><body> <div class="parent"> <div class="child"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </body></html>

41

42

Ширина.

Властивість width (ширина контейнеру)

• Синтаксис: – width: значення | проценты | auto

• Базове значення: auto • Аналоги HTML: <img width>, <table

width> • Ширина в процентах – відносно

“батьківського” контейнеру (того, в який вкладений даний контейнер).

- A

Спадк. Вик.

43

Позиція.

Властивість position (ширина контейнеру) • Синтаксис:

– position: absolute | fixed | relative | static

• Базове значення: static • Аналоги HTML: нема • relative

– Положення встановлюється відносно його початкового місця. Властивості top чи bottom, left чи right зсувають елемент в бік.

√ A

Спадк. Вик.

Конт.1 Конт.3 Конт.2 position: relative «Батьківський» конт.

top: 10px

left: 30px

44

Позиція.

• absolute – Елемент виймається з потоку, його положення

встановлюється відносно батьківського контейнеру, або ж початку сторінки. Властивості top чи bottom, left чи right зсувають елемент в бік.

Конт.1 Конт.2

Конт.3 position: absolute «Батьківський» конт.

top: 80px

left: 130px

45

Позиція. • fixed

– Майже те ж саме, що й absolute, але позиція не змінюється навіть при скролінгу екрану.

Конт.1 Конт.2

Конт.3 position: absolute «Батьківський» конт.

top: 80px

left: 130px

46

Плаваючий блок.

Властивість float (плаваючий блок) • Синтаксис:

– float : left | none | right

• Базове значення: none • Аналоги HTML: align="right | left" • Властивість показує, до якого боку «прилипає» вказаний

блок.

- А

Спадк. Вик.

Конт.2 Конт.1

Конт.3

Конт.2 Конт.1

Конт.3

47

Заборона обтікання.

Властивість clear (заборона обтікання) • Синтаксис:

– clear: both | left | none | right

• Базове значення: none • Аналоги HTML: <br clear=left | right |

all> • Властивість показує, з якого боку

заборонено обтікання блоку іншими блоками: – both – з обох боків.

- B

Спадк. Вик.

48

z-index.

Властивість z-index (місце в «стопці») • Синтаксис:

– z-index: число | auto

• Базове значення: auto • Аналоги HTML: нема • Будь-які позиціоновані елемети можуть

накладатись один на одного, імітуючи третій вимір. Чим більше значення z-index, тим вище знаходиться елемент.

• http://jsfiddle.net/j62gjed5/1/ - приклад

- А

Спадк. Вик.

49

Flexbox, SASS(SCSS), LESS, Bootstrap

http://frontender.info/a-guide-to-flexbox/#polnoerukovodstvopoflexbox – Гайд по flexbox

http://lesscss.org/ - LESS

http://sass-lang.com/ - SASS

http://twbs.docs.org.ua/ - документація Bootstrap українською

- А

Спадк. Вик.

Посилання

• Шпаргалка по CSS • https://css-tricks.com/ - Сайто про

CSS • http://learnlayout.com/ - підручник

СSS • https://developer.mozilla.org/ru/docs/

Web/CSS – довідник, самовчитель, приклади

• http://www.w3schools.com/css/default.asp - специфікація, туторіал і т.д.

50

Завдання #2

1. Виконати завдання з практикумів (див. посилання з лекції по html)

2. Додати CSS до власного проекту.

51

Дякую за увагу!

52