Технологія CSS (Каскадні аркуші стилів)

Каскадні листи стилів (далі просто - стилі) розроблені для полегшення роботи Web-майстрів. Наприклад, створюючи сайт з безлічі сторінок Ви хочете щоб форматування елементів сторінки проходило за певним шаблоном, що не примушувала б зайвий раз вводити в код кожної сторінки довгі значення атрибутів. Таким шаблоном і є стилі. Загальний принцип написання їх зводиться до наступній послідовності:

свойства_стіля1: значення; свойство_стіля2: значення; ....... свойство_стіляN: значення,

де інші знаки пунктуації застосовуються залежно від властивостей стилю.

За своїми властивостями стилі діляться на три групи.

  1. Знаходять застосування, коли потрібно відформатувати елемент що не повторює більше ніде на сторінці і має відношення до конкретного тегом. Описується даний стиль так: <ТЕГ атрибут1 = "значення" ...... атрібутN = "значення" STYLE = "свойство_стіля1: значення ... свойство_стіляN: значення">
  2. Застосовуються для опису способів форматування елементів сторінок глобально з присвоєнням імені для кожного стилю. Даний опис поміщається безпосередньо в код сторінки - в контейнер <HEAD> за допомогою контейнера <STYLE>. Наводимо приклад: <HEAD> <STYLE type = text / css> .імя_стіля {опісаніе_стіля} TD. імя_стіля {опісаніе_стіля} </ STYLE> </ HEAD>, де "type = text / css" - обов'язкова інформація, а TD - позначення тега до якого буде застосовуватися стиль. Під словами "опісаніе_стіля" слід розуміти різні параметри форматування елемента, яких може бути багато.
  3. Використовуються при застосуванні стилів у великих кількостях або коли є більше десяти сторінок, вдаючи із себе окремий текстовий файл з розширення .css. Посилання на такий файл вказується в контейнері <HEAD> і має такий вигляд: <LINK HREF = "адрес_файла стилів / ім'я_файлу .css" TYPE = "text / css" REL = "stylesheet">, де TYPE і REL -атрібути, що визначають тип файлу. До речі послатися можна і по іншому: @import url ( "адрес_файла стилів / ім'я_файлу .css").

Після того, як вкажемо стилі в самій сторінці чи зробимо посилання на них - можна застосовувати їх при безпосередній участі атрибутів <CLASS> або <ID> на потрібних тегах. приклад:

<TD CLASS = "імя_стіля"> елемент_страніци </ TD>.

Існує також ще два способи застосування стилів - опис псевдокласів і псевдоелементів.

Одиниці виміру в CSS позначаються в:

  • пікселях (px) - мінімальна точка на екрані
  • пунктах (pt) - одиниця виміру шрифту (1Пункт = 1/72 дюйма
  • піках (pc) - 1 піку дорівнює 12пунктам
  • відсотках (%) - відношення до іншої величини
  • міліметрах (mm) і сантиметрах (cm) - без коментарів
  • дюймах (in) - 1 дюйм дорівнює 2,52 cm

У стилях, як і в усьому мовою HTML, при описі кольору застосовується модель RGB .

У специфікації HTML 4.01 цієї мови каскадні листи стилів потрібно використовувати повсюдно, де вони можуть мати застосування. Міжнародний консорціум W3C, який затвердив цю специфікацію, рекомендує використовувати CSS (Cascading Style Sheets). Інші методи відзначені в ній як небажані.

Вбудовані інструменти зі створення каскадних аркушів стилів багатьох HTML-редакторів дозволяють дуже швидко і зручно впорається з цим завданням. Однак не маючи достатніх знань в цьому напрямку - результат буде зворотним.

Серед широкого вибору HTML-редакторів в яких є можливість створення каскадних аркушів стилів варто виділити на наш погляд прості і зрозумілі - Macromedia HomeSite 5.0 з його Top Style і Macromedia Dreamweaver MX 2004. Останній стануть більш доступними для новачків.

Перш ніж переходити до редакторів настійно рекомендуємо пройти теоретичні заняття з тих посиланнях.