ЛЕКЦІЯ №8 CSS (каскадні листи стилів)

Способи застосування CSS Внутрішні таблиці стилів (Inline Style Sheets) - за допомогою спеціального атрибута поміщаються прямо в HTML теги. Приклад HTML: Приклад Приклад CSS: < FONT style="color:blue; font-size:12pt; font-family:Arial">Приклад ISS варто використовувати, тільки, якщо необхідно задати визначеному елементу свій індивідуальний стиль.

Способи застосування CSS 2. Глобальні таблиці стилів (Global Style Sheets) - визначають стиль елементів у всьому документі. Для цього використовується тег Тепер ці стилі можна застосовувати в будь-якому місці html-коду. Для цього використовуються наступні конструкції:

Цей заголовок написаний великим червоним курсивом

Способи застосування CSS 3. Зв'язані таблиці стилів (Linked Style Sheets) - можуть бути використані для декількох документів відразу і зберігаються в зовнішньому файлі. Приклад зовнішнього файлу: Файл main.css body {background:black; font-size:9pt; color:red; font-family:Arial Black} .base{color:blue; font-style:italic} h1 {color:white} #bold {font-weight:bold}

У HTML документах посилання на css файл робимо за допомогою тегу . Виглядає це так: Приклад: Файл Index.html Зміст Документа

Порядок перевизначення (Чому каскадні?) використання окремого стильового файлу і вставка його за допомогою тега опис стилю в заголовку документа застосування стилю, як параметра в тезі.

Спадкування Деякі значення успадковуються дочірніми елементами (тегами). BODY{color:black} - властивість 'color' є наслідуваним, тому всі нащадки елемента BODY успадкують колір 'black‘ Значення, задані у відсотках, не успадковуються, а значення, що обчислюються, успадковуються. BODY{font-size:10pt} H1{font-size:120%}

Деякий великий заголовок

Синтаксис CSS Селектор {Визначення стиля} -CSS-правило. Р { font-size: 9pt; color: #eeeeee; text-align: center; }

Селектори бувають декількох типів: Селектори класу - може бути застосований до будь-якого елемента або групи елементів. 1.

великий абзац

малий абзац

Селектори типу - можуть бути застосовані до конкретного тегу. Приклад: p { font-size: 9pt; } P, TD, LI { font-size: 9pt; color:green;}

3. Стилі можна описувати за допомогою ідентифікаторів (#id) (доповнення до класів) У випадку, коли параметр визначений і в класі, і в ідентифікаторі (приорітет в ідентифікаторі).

Дата написана одним шрифтом

Подія написана іншим шрифтом

Псевдокласи і псевдоелементи Псевдоклас визначають динамічний стан елементів, які змінюються з часом або за допомогою дій користувача, а також положення в дереві документа. Приклад, ефект, при якому посилання підкреслюються лише при наведенні на них курсору. a{text-decoration:none;} a:hover {text-decoration: underline;} Псевдоелементи дозволяють задати стиль логічних елементів, що не визначені в дереві елементів документа, а також генерувати вміст, якого немає у вихідному коді тексту. p:first-letter {font-size: 200%; font-weight: bold;} p:first-line {font-size: 12pt; font-weight: bold;}

Деякі параметри CSS Деякі параметри шрифту font-weight: [ bold | normal | number] - жирність шрифту font-style: [normal | italic | oblique] - нахил шрифту font-size: number - розмір шрифту font-family: name - гарнітура шрифту color: number - колір шрифту background-color: number - колір фону background: url – рисунок фону Деякі параметри абзацу text-align: [ left | right | center | justify] – вирівнювання text-indent: number - відступ першого рядка (абзац) line-height: number – міжрядковий інтервал (інтерліньяж) letter-spacing: number – міжбуквенний інтервал (трекінг) padding-left: number - відступ від тексту ліворуч padding-right: number - відступ від тексту праворуч padding-top: number - відступ від тексту зверху padding-bottom: number - відступ від тексту знизу margin-left: number - відступ від границі ліворуч margin-right: number - відступ від границі праворуч margin-top: number - відступ від границі зверху margin-bottom: number - відступ від границі знизу

Одиниці виміру в CSS відносний розмір у відсотках (%) відносний розмір за допомогою словесного опису (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large) абсолютний розмір у типографських одиницях - розмір може задаватися в пунктах (pt), піках (pc), середньою шириною букви "m" (em), середньою шириною букви "x" (eх) абсолютний розмір у стандартних одиницях довжини - розмір може задаватися в сантиметрах (cm), міліметрах (mm), дюймах (in) абсолютний у пикселях (px)

Завдання кольору в CSS за допомогою назви кольору: yellow, red, green, grey,.. шістнадцятковим заданням кольору у форматі #RRGGBB: #ff0000, #883490, #ffffff,.. десятковим заданням складових кольорів у форматі rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..

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