Каскадні таблиці стилів
Поміркуйте
Трохи історії
Трохи історії
Трохи історії
Трохи історії
Стиль
Розділ 2 § 8
Стиль — це набір правил оформлення та форматування, який можна застосувати до різних елементів веб-документа.
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
Каскадні таблиці стилів (англійською Cascading Style Sheets, CSS) — спеціальна мова, яку використовують для запису оформлення сторінок, написаних мовами розмітки даних.
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
Особливості використання каскадних таблиць стилів:
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
(Продовження…) Особливості використання каскадних таблиць стилів:
10�(11)
Каскадні таблиці стилів
Таблиці каскадних стилів містять параметри форматування частини або всього тексту веб-сторінки.
Якщо таку таблицю підключено, то у тегах можна просто вказувати посилання на неї, а не задавати велику кількість атрибутів.
У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету.
Таблиці каскадних стилів — це передусім набори параметрів, що змінюють властивості тегів HTML.
10�(11)
Каскадні таблиці стилів
Тут задано параметри для тегу абзацу <Р>, які встановлюють:
У документі достатньо ввести теги <Р>...</Р> із текстом абзацу, щоб автоматично надати йому зазначеного оформлення.
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
Каскадні таблиці стилів дають змогу розділити етапи:
удосконалення зовнішнього вигляду сторінки
й
створення
html-файла
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
Існують такі способи взаємодії таблиці стилів з html-файлом:
зв’язування
імпортування
вбудовування (використання стильових класів)
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
Зв'язування. Таблицю стилів створюють і зберігають в окремому файлі з розширенням css. Таку таблицю називають зовнішньою. Щоб зв'язати основний файл з такою таблицею стилів, у середині тегу <head> застосовують одинарний тег <link> з інформацією про таблицю.
<head> <link href="адреса таблиці стилів" type="text/css" rel="stylesheet"> </head>
href="адреса таблиці стилів"
адреса розташування файлу
type="text/css"
опис типу файлу
rel="stylesheet"
вказівка на відношення основного файлу з файлом таблиці стилю.
10�(11)
Використання стилів внутрішньої таблиці
Внутрішню таблицю стилів (Embedded Style Sheet) розміщують безпосередньо в розділі HEAD, у блоці, який обмежений тегами <STYLE> та </STYLE>.
Найпростіша внутрішня таблиця стилів — це послідовність визначень тегів, кожне з яких записується, як правило, з нового рядка. Визначення тегу містить його ім'я без кутових дужок, за яким у фігурних дужках через крапку з комою перелічують властивості тегів та їхні значення, розділені двокрапками.
10�(11)
Приклад
10�(11)
Нові стилі
У таблицях можна створювати нові стилі, надаючи їм імена з крапкою перед першим символом. У тегах звертаються до такого стилю за іменем, використовуючи атрибут СLASS=ім' я_стилю,
де ім'я записують вже без крапки. Для одного тегу можна використовувати декілька стилів форматування.
10�(11)
Приклад
Застосовуючи атрибут CLASS тегу </Р>, задамо для
двох абзаців різні стилі: першому надамо розмір шрифту 38 пунктів,
білий колір символів і оливковий колір тла, другому — розмір
шрифту 46 пунктів, фіолетовий колір символів і рожевий
колір тла.
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
Імпорт – те саме, що і зв'язування, але взаємодію файлів забезпечують засобами тегу <style> і такої вказівки:
@import URL(адреса таблиці стилів)
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
Вбудовування (використання стильових класів)
Якщо таблицю створено лише для деякого конкретного html-файлу, то її розташовують у цьому файлі в контейнері <style>. Таку таблицю стилів називають:
внутрішньою
вбудованою
або
Також стиль можна вбудувати безпосередньо в html-тег за допомогою атрибуту <style>. Наприклад, контейнер:
<span style="color: blue">Blue </span>
Створює блок з текстом синього кольору: Blue.
10�(11)
Вбудовані стилі
Вбудовані стилі (Inline Styles) вставляють у теги заголовків <Н1>...<Нб>, абзацу <Р>, тіла <BODY>, а також у теги <DIV>, <IMG> тощо за допомогою атрибута STYLE, в якому перелічують властивості та їх значення.
Визначені у такий спосіб властивості мають найвищий пріоритет порівняно з іншими, оскільки вони визначені безпосередньо у тегу. Цей підхід використовують для оформлення невеликої кількості елементів.
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
Правила в CSS працюють по каскаду ( пріоритету, вазі). Це дозволяє отримати передбачуваний результат у випадку, коли до одного елемента, одночасно, застосовуються декілька стильових правил.
Селектор (тег, id, клас) {
властивість 1: значення1;
властивість 2: значення2;
властивістьN: значенняN;
}
CSS-правило має наступну структуру:
Наприклад:
div p, #id:first-line {
background-color : red;
background-style : none;
}
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
Кожне правило починається з селектора (покажчика), що вказує на ті html-елементи, до яких ми будемо застосувати css-правило. У блоці оголошень відбувається найцікавіше - ми встановлюємо правила відображення обраних нами елементів, визначаємо їх властивості - розмір, колір, грані, поля, положення на екрані і т.д.
Псевдоклас — це властивість, що дає змогу змінювати стиль елемента залежно від дій користувача, а також розташування елемента (тега) у загальному потоці документа, що додає у дизайн сторінки деяку динаміку і логіку.
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
Деякі властивості стилів:
Назва властивості стилю
Значення (перелік або приклади)
Пояснення
background-color
red, green
колір тла
text-transform
none, uppercase, lowercase, capitalize
трансформація тексту
vertical-align
baseline, sub, super, top, text-top, middle, bottom,
text-bottom
вертикальне вирівнювання
letter-spacing
1 mm
відстань між символами
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
(Продовження…) Деякі властивості стилів:
Назва властивості стилю
Значення (перелік або приклади)
Пояснення
font-weight
normal (400), bold (700), bolder, lighter, 100–900
жирність шрифту
font-family
arial, sans-serif
гарнітура
font-style
normal, italic, oblique
стиль шрифту
10�(11)
Каскадні таблиці стилів
Розділ 2 § 8
(Продовження…) Деякі властивості стилів:
Назва властивості стилю
Значення (перелік або приклади)
Пояснення
text-decoration
blink, line-through, overline, underline
оздоблення тексту
text-align
left, right, center
вирівнювання тексту
red, green
color
колір шрифту
10�(11)