Каскадні таблиці стилів
Що таке таблиці стилів
Каскадні (багаторівневі) таблиці стилів -cascading style sheets (CSS)- це потужний стандарт на основі текстового формату, що визначає подання даних у броузері. Якщо формат HTML надає інформацію про склад документа, то таблиці стилів повідомляють як він має виглядати. Таким чином, каскадні таблиці стилів дають можливість зберігати вміст окремо від його представлення.
Стиль включає всі типи елементів дизайну: шрифт, фон, текст, кольори посилань, поля та розташування об'єктів на сторінці. CSS розроблялися так, щоб забезпечити більший рівень контролю за розміщенням тексту та графіки. Каскадні таблиці стилів забезпечують належний рівень єдності оформлення, організації та контролю під час розробки вузла, який є недосяжним за допомогою одного лише HTML.
CSS передбачає 3 типи таблиць стилів - вбудовані, впроваджені (внутрішні) і пов'язані (зовнішні).
Вперше ідея форматування HTML-документів за допомогою CSS була рекомендована Консорціумом W3C у 1996 році. Ця рекомендація, яка була оновлена у 1998 році, використовується Web-розробниками й досі.
Що означає слово "каскадний"? Термін "каскадний" означає, що в одній сторінці HTML можуть використовуватись різні стилі. Броузер, що підтримуватиме таблиці стилів, буде слідувати їх порядку (як по каскаду), інтерпретуючи інформацію стилів. Це означає, що ви можете використовувати всі три типи стилів, і браузер буде інтерпретувати спочатку пов'язані, потім впроваджені і, нарешті, вбудовані стилі. Навіть якщо до всього вузла будуть застосовані зразки стилів, можна буде керувати окремими аспектами сторінок за допомогою впроваджених стилів, а окремими областями усередині цих сторінок – за допомогою вбудованих стилів.стилів. Інший аспект каскадування - успадкування (inheritance). Спадкування означає, що якщо не вказано інше, конкретний стиль буде успадкований іншими елементами сторінки HTML. Наприклад, якщо ви застосуєте певний колір тексту в тезі , то всі теги всередині цього абзацу успадковують цей колір, якщо не зазначено інше.
Методи та синтаксис
Існує три методи для застосування таблиці стилів до документу HTML:
- Вбудований (Inline). Цей метод дозволяє взяти будь-який HTML тег і додати до нього стиль. Використання вбудованого методу надає максимальний контроль за всіма властивостями Web-сторінки. Припустимо, що ви хочете задати зовнішній вигляд окремого абзацу. Ви можете просто додати атрибут style до тега абзацу, і броузер відобразить цей абзац за допомогою параметрів стилю, доданого до коду.
- Впроваджений (Embedded). Використання дозволяє контролювати всю сторінку HTML. При використанні тега
Як видно з прикладу, наведеного вище, таблиця стилів тепер відрізняється від коду стандартної сторінки HTML, але все ж таки логіку простежити неважко. У нашому випадку для основної частини сторінки (body) вказано колір фону, колір тексту та верхнє, ліве та праве поля у дюймах. Для заголовка першого рівня (HI) вказується шрифт (назва шрифту та розмір у пунктах). У цьому полягає зручність каскадних таблиць стилів - ви можете задавати розміри у пунктах, а й пікселях (рх), відсотках (75%) і сантиметрах (cm).
Існує і кілька нових одиниць виміру, найвизначнішою з яких є m. На відміну від пунктів або пікселів, що представляють абсолютні розміри різних об'єктів, 1m - ширина літери m в тому шрифті про який йдеться. Щоправда, більшість броузерів про це не здогадуються.тому визначають 1m просто як розмір, заданий за умовчанням. Наприклад, Internet Explorer 4.0 і вище для гарнітури Verdana розмір 1m відповідає 12 пунктам. Точніше сказати "відповідає значенню, яке користувач встановив як розмір шрифту за замовчуванням. Таким чином, якщо встановити в броузері розмір шрифту за замовчуванням 16 пунктів, то і 1m теж дорівнюватиме 16 пунктам, і всі інші розміри будуть відповідно збільшені.
Однак повернемося до нашого прикладу. Інший цікавий момент цієї таблиці стилів - відмінність стилів шрифтів заголовка та абзацу. Вони відрізняються кольором, відступом та гарнітурою. У тегу якоря (А) можна побачити ще один дуже зручний елемент синтаксису. Рядок text-decoration: none видаляє підкреслення посилань, тому результат виглядає чисто і привабливо.
А тепер подивимося, як цей приклад впровадженого стилю буде виглядати на екрані. Натисніть тут!
Пов'язані таблиці стилів
Ось як виглядає приклад пов'язаної таблиці стилів:
Тепер збережемо цей документ як окремий файл. Назвемо його style-l.css і помістимо до папки таблиць стилів з ім'ям style. З цим документом будь-яка кількість сторінок HTML. Для цього потрібно використовувати між тегами та наступну конструкцію:
Будь-яка сторінка, що містить такий зв'язок, буде оформлена відповідно до стилів, зазначених у файлі style_1.css. Результати застосування стилів показані тут.
Код цієї сторінки виглядає так:
Тут важливо пам'ятати про сенс концепції каскадування. Якщо вам потрібні десять сторінок HTML, на які глобально впливає ця таблиця стилів, ви можете її застосувати. Потім, якщо потрібно внести невеликі коригування в окремі сторінки, можна впровадити в ці сторінки додаткові стилі, абовикористовувати вбудований стиль.
Далі до коду було додано впроваджений стиль, і ось що вийшло. - вбудований стиль застосовується поверх пов'язаного стилю
Обов'язково переглядайте сторінки з таблицями стилів у відповідному броузері – Internet Explorer 3.0 та вище та Netscape 4.0 та вище. А якщо ні, то всі ваші стилі можуть зникнути! Слід завжди тестувати такі сторінки без таблиці стилю (використовуйте старіший броузер або просто тимчасово змініть назву таблиці стилів, щоб броузер не міг її знайти) і перевіряти, щоб вони виглядали прийнятно.
Підтримка шрифтів у таблицях стилів
Якщо броузер не зможе знайти на комп'ютері клієнта перші три шрифти, він поставить замість них перший із доступних рубаних шрифтів сімейства sans-serif і його використовуватиме.
На жаль! На практиці, коли як перший шрифт був вказаний шрифт Verdana, а відображення на екран здійснювалося броузером Internet Explorer 3.0 замість заголовка "Каскадні таблиці стилів" я отримала абракадабру.
Завдання властивостей та значень шрифту
Шрифти мають дуже багато властивостей, які можна змінювати, і дуже багато значень, які можуть приймати ці властивості. Як і для стандартних шрифтів HTML, можна задавати властивості для керування розміром та кольором. Однак для шрифтів HTML не можна змінювати насиченість і тип шрифту, а також висоту рядка або інтерліньяж (відстань між окремими рядками тексту). Крім того, доступні в таблицях стилів методи керування розміром шрифту набагато перевершують рівень, пропонований стандартами HTML. Колір Таблиці стилів використовують стандартні методи роботи з кольорами броузера. Іншими словами, для отримання оптимальних результатів використовуйте шістнадцятковий (і найкраще підтримуванийброузерами) колір. Ви можете додавати колір, як і інші властивості стилю, в будь-який відповідний HTML тег для вбудованих, впроваджених і пов'язаних стилів. Наприклад, при описі кольору заголовка першого рівня вказано значенняcolor:#333399;, в результаті ми бачимо заголовок "Каскадні таблиці стилів" темно-синього кольору. Насиченість Насиченість показує товщину шрифту. Наприклад, для гарнітуриArialіснують такі різновиди: жирний (black), напівжирний (bold), світлий (light) і т.д.
Для шрифтів існують різні зображення. Якщо ви не впевнені на сто відсотків, що на комп'ютері клієнта встановлений певний шрифт, розумніше використовуватиме контур, доступний для всіх шрифтів. Існує лише одна (крім нормальної) стандартна насиченість, яка доступна більшості шрифтів. Це – напівжирне зображення!
Ось приклад застосування вбудованого зображення:
Напівжирне зображення застосовується до абзацу.
Ми є розумними видами і використовуємо нашу intelligence quite properly gives us pleasure. У цьому відношенні brain є як muscle. When it is in use we feel very good. Understanding is joyous.
Курсивне та напівжирне зображення повинні використовуватися економно. Їхня функція - виділення. Зазвичай не слід використовувати жирний або курсив для довгих фрагментів основного тексту.
Розмір Розмір шрифту в таблицях стилів можна визначати, використовуючи пункти (points), пікселі (pixels), дюйми (inches), сантиметри (centimeters), міліметри (millimeters) та піки (picas), а також використовуючи нові одиниці виміру. Для Web-дизайнерів природно вибирати пункти або пікселі, хоча все залежатиме від ваших уподобань.
Використання одиниць, відмінних від пунктів, може викликати серйозніпроблеми. Якщо замість пунктів використовуються пікселі, хоча текст, розмір якого заданий у пікселях, буде видно в броузерах з підтримкою таблиць стилів (типу Internet Explorer 3.0 і вище або Netscape 4.0 і вище), він може не виводитися на друк!
Інші параметри шрифту
Класи та угруповання
Два інші цікаві аспекти таблиць стилів - це класи та угруповання. Класи (class) визначають спосіб розбиття стилів на дуже точні частини. Щоразу, коли ви хочете, щоб певний фрагмент тексту якось відрізнявся від інших, ви можете створити власний тег HTML. Кожен тип форматування тексту, який ви визначаєте, називається стильовим класом (style class).
За стильовим класом у таблиці стилів закріплюється ім'я. Це ім'я задається як звичайне ім'я, але з точкою як перший символ.
Припустимо, що в документі вам потрібні два різні види заголовків H1. Можна створити стильовий клас для кожного з них, розміщуючи наступний код у таблиці стилів:
Для вибору між двома стилями класу в тезі (аналогічні правила діють і для інших тегів, що мають опис таблиці стилів) використовується атрибут class=имя_стиля. Зверніть увагу - тут ім'я іміджу використовується без крапки. Наприклад:
Слово Wisdom відображається шрифтом Times New Roman, 34 пункти темно-червоного кольору (на тих комп'ютерах, де є підтримка таблиць стилів броузерами), а слова More Wisdom відображаються шрифтом Arial, 18 пунктів темно-жовтогарячого кольору (при цьому встановлено вирівнювання заголовка) . Для тексту в проміжках між цими заголовками за замовчуванням використовується шрифт Times, оскільки явно не вказав шрифт для цих фрагментів. Тому броузер вибирає власний заданий за умовчанням основнийшрифт. Мудрі думки написані доброю англійською мовою, і належать справді мудрим людям. Як вправу спробуйте зробити переклад.
У HTML-коді запис цих "Мудростей" виглядає так:
Угруповання (grouping) полягає у поєднанні кількох властивостей та значень стилів. При цьому виникають жорсткіші правила для форматування. Нижче наведено приклад звичайного класу:
Це означає, що всі абзаци класу g відображатимуться шрифтом Arial, 22 пункти, з інтерліньяжем 14 пунктів. Якщо застосувати до цього класу угруповання, то вийде таке визначення:
Сторінка відображатиметься однаково в обох випадках. Зверніть увагу, що спочатку вказуються значення для розміру шрифту, висота рядка після похилої риси, а потім йде назва шрифту. При групуванні завжди потрібний правильний синтаксис виразу. Спробуємо скористатися розподілом абзацу класу g.
ПРИКЛАД абзацу класу g, до якого застосовано угруповання.
Короткий огляд способів розміщення елементів сторінки
Таблиці стилів можуть допомагати у створенні макета сторінки, надаючи широкі можливості вирівнювання елементів сторінки та керування полями. Вирівнювання тексту здійснюється за допомогою властивості text-align. Можливі значення left, right, center та justify.
Подивимося, як це виглядає.
Отже, у цьому прикладі використовується вбудований стиль для вирівнювання тексту та його на окремі абзаци.
Для керування полями Web-сторінки використовуються чотири властивості: margin-top, margin-bottom, margin-left та margin-right. Як і всі властивості CSS, вони можуть застосовуватись до будь-якого логічного об'єкта. Зазвичай керувати полями використовуються об'єкти BODY і Р (paragraph - абзац). Для вказівки значень полівможна використовувати різні одиниці виміру: пікселі, пункти, сантиметри, дюйми та відсотки. Для довідки - стандартні макети сторінок HTML зазвичай вимірюються в пікселях.
CSS дозволяють використовувати негативні значення для полів. Це дає можливість дизайнеру створювати області сторінки, що перекриваються, домагаючись цікавого ефекту.
На сторінці Приклад створення 3-D ефекту наводиться приклад, у якому використовувалося негативне значення полів margin-topдля створення графічного ефекту без використання графічних засобів.
Приклад створення 3-D ефекту
Розглянемо приклад, що створює ефект, який без завдання стилю можна було досягти лише за допомогою графіки. Під час створення Web-сторінки накладемо один текст на інший. Ця можливість часткового перекриття тексту часто використовується у дизайні реальних сторінок. Спершу подивимося на результат, а потім обговоримо, як він отриманий.
У цьому прикладі тег
Зверніть увагу, як у таблиці стилів визначається стиль - набору властивостей у фігурних дужках присвоюється ім'я, перед яким ставиться точка.
У цьому вся прикладі тексти визначаються як у шарах, які накладаються друг на друга. Спершу виводиться шар тінь, на нього накладається шар основа, а потім шар1 і шар2. Порядок, у якому шари накладаються один на одного, задається порядком проходження фрагментів тексту, помічених тегом
У розглянутому нами прикладі були використані такі характеристики: