Для чого потрібні таблиці стилів? , CSS, HTML, XML, DHTML, статті

Каскадні таблиці стилів або CSS (від англійського Cascading Style Sheets)
є наслідком подальшого розвитку HTML і дають нам можливість перейти на
наступний рівень представлення інформації. Таблиці стилів дозволяють розділити
смислове вміст сторінки та її оформлення.

Як ми пам’ятаємо, у перших версіях стандарту HTML не було передбачено жодних
засобів для управління зовнішнім виглядом інформації. Загальна концепція гіпертексту
була спрямована на доступність інформації для будь-яких пристроїв, здатних
відтворювати текст. Для розмітки рекомендувалося використовувати тільки
логічні теги, що визначають заголовки, підзаголовки, списки, абзаци, цитати та
т.д. – Тобто, ті елементи, які і складають структуру документа.
Інтерпретація ж зовнішнього вигляду залишалася повністю на совісті кінцевого
терміналу.

Однак з тих пір багато що змінилося, і стандарт HTML втратив первинну
стрункість. Спочатку Netscape додав “поліпшені теги”, які дозволили більш
широко управляти зовнішнім виглядом представляється. Нововведення
прижилося, і всі розширення Netscape стали стандартом de facto. Потім точно
також надійшла Microsoft. Коли схаменулися, то HTML являв собою жахливу
суміш логічних і оформлювальних тегів, несумісних розширень і повністю
перестав відповідати первісної концепції – подавати інформацію на будь-якому
пристрої незалежно від його характеристик з виведення інформації.

Тоді була зроблена широкомасштабна стандартизація. В результаті чого на
світло з’явився стандарт HTML 3.2. Він не був революційним, а лише розставив по
місцях всі нововведення і виробив загальні рекомендації для виробників
броузерів. Революційні зміни були введені в новому стандарті – HTML 4.0
або, як його стали називати, Dynamic HTML. В обіг були введені шари,
таблиці стилів і універсальна об’єктна модель броузера.

У новому стандарті спробували повернутися до витоків концепції HTML. Четверта
версія, як і перша, рекомендує створювати сторіночки таким чином, щоб вони
могли бути відтворені на будь-якому пристрої – будь це 21 “монітор або
маленький чорно-білий екран стільникового телефону.

Яким же чином була вирішена проблема з поданням зовнішнього вигляду
інформації? У цьому і полягає революційність підходу. Все оформлення
рекомендується винести в зовнішній стильовий файл. Основна ж сторінка буде
містити тільки інформацію та посилання на необхідні стилі.

При показі сторінки конкретному пристрою повинна бути задіяна
відповідна нагоди таблиця стилів. Для стільникового телефону і монітора
комп’ютера вони, зрозуміло, повинні бути різними. У першому випадку ми використовуємо
мінімальне оформлення, яке дозволить представити інформацію найбільш
оптимально і компактно. У другому ж випадку в нашому розпорядженні є все
багатство шрифтового і колірного оформлення.

Таблицю стилів потрібно написати всього один раз при створенні сайту для кожного
з пристроїв, на якому планується виведення інформації. До того ж таблиця стилів
може бути єдиною для цілого сайту. І, отже, не потрібно буде повторювати
одні і ті ж описи стилів на кожній сторінці.

Розміщення всієї стильової інформації в одному зовнішньому файлі відкриває нам і
інші корисні можливості – адже змінивши вміст лише одного (!)
стильового файлу, ми можемо за лічені секунди змінити весь дизайн сайту. Причому
ніяких інших переробок не знадобиться. Зрозуміло, це вірно лише в тому
випадку, якщо спочатку сайт був спроектований вірно.

Розібравшись трохи з теорією, давайте переходити до практики, і почнемо ми з
питання підключення таблиці стилів до HTML-файлу.

Підключення таблиць стилів


Для здійснення цього завдання ми можемо скористатися одним з 3-х
пропонованих методів:


Почнемо з найпростішого, з так званого inline-описи або описи,
вбудованого в тег:

Цей текст перевизначений стилем


За допомогою додаткового атрибута style ми можемо визначити потрібні нам
стильові параметри в будь-якому теге. Це найлегший спосіб, і діє він в
межах лише одного тега. Але уявіть, наскільки виросте розмір файлу, і
наскільки незручно буде його виправляти, якщо ми будемо вказувати стиль у кожного
тега. Цей спосіб не дуже відрізняється, наприклад, від прямого опису зовнішнього
вигляду за допомогою тега .

Набагато зручніше заздалегідь визначити всі потрібні стилі оформлення і згодом
просто застосовувати їх до відповідних тегами. Це буде другий спосіб – опис
в секції заголовка. Його дія поширюється на всю сторінку. Визначення
стилів відбувається за допомогою класів, які являють собою списки з
визначенням всіх необхідних параметрів оформлення.

При використанні цього методу опис стилів необхідно розмістити в секції
заголовка:

<head>
….
<style type="text/css">
<!–
.header { text-align : center; font-size : 27pt;}
.red { color : red; }
–>
</style>
</head>

Тепер ці стилі можна застосовувати в будь-якому місці html-коду. Для цього
використовується наступна конструкція:

Цей текст написаний стилем header

Цей текст написаний червоним кольором


Як бачите, все не так вже й складно. Головне зрозуміти основні принципи. Крім
визначення нових класів ми також маємо можливість перевизначати стандартні
теги. Наприклад, тег

:

<style type="text/css">
<!–
p { text-align : center; font-size : 12pt;}
–>
</style>

Тепер весь текст, укладений у теги

, буде виглядати
так, як визначено даними стилем. Це дуже зручно і дозволяє легко
адаптувати вже існуючі сторінки до використання стилів. Крім того, це
трохи зменшує обсяг файлу за рахунок відсутності зайвих атрибутів class.

І нарешті, третій спосіб – винесення опису стилів у зовнішній файл.
Діапазон його впливу простирається на всі файли, в які включено опис.
Це спосіб найбільш відповідає концепції HTML 4.0. У разі, якщо нам
потрібно змінити зовнішній вигляд сайту, то буде досить скорегувати лише
один цей файл. Порівняйте його з попередніми способами. В одному з них доведеться
міняти опис на кожній сторінці, а в іншому навіть більше того – біля кожного
тега, що, зрозуміло, зовсім не надихає.

Яким же чином проводиться впровадження зовнішнього файлу? Для початку створюється
стильовий файл з описом всіх потрібних нам класів (mystyle.css):

.header { text-align : center; font-size : 27pt;}
.red { color : red; }
p { text-align : center; font-size : 12pt;}

А потім посилання на нього впроваджується в документ за допомогою тега :

<head>
….
<link rel="stylesheet" type="text/css" href="css/mystyle.css" title="MyStyleSheet">
….
</head>

Це найзручніший спосіб, і для основної таблиці стилів рекомендується
користуватися саме ним.

Чому я сказав “основний”? Справа в тому, що на практиці доводиться
користуватися всіма трьома способами, і тут у гру вступає “каскадного”
стилів. Але про це ми поговоримо вже наступного разу.

Продовжуємо розмову про застосування таблиць стилів. Спочатку розберемося з
каскадних стилів, а потім перейдемо до розгляду синтаксису і огляду
найбільш часто зустрічаються параметрів, що застосовуються при створенні стилів.

Каскадних стилів


Отже, для початку розберемося, чому стилі називаються каскадними. Дозволь,
дорогий читачу, я ще раз наведу способи впровадження стилів на сторінку:


Каскадне полягає в тому, що стилі можуть перевизначатися. Наведений
вище список способів впровадження стилів відповідає порядку перевизначення.
Нижчерозташованими спосіб може перевизначати вищерозташованих.

Наприклад, ми визначили в зовнішньому стильовому файлі, що текст в тезі

повинен бути написаний за допомогою шрифту висотою 10 пунктів. Але якщо в заголовку
сторінки ми додатково вкажемо, що той же текст в тезі

повинен бути
написаний шрифтом в 12 пунктів, то текст буде виведений саме таким кеглем – тобто
стиль в заголовку сторінки перевизначити стиль у зовнішньому файлі.

Для чого це потрібно? О, це дуже корисна річ. І зараз я покажу це на
конкретному прикладі. Припустимо, що для всіх посилань у заголовку на нашій
сторінці визначений наступний стиль:

<style type="text/css">
<!–
a.link { text-decoration: none; color:red; }
–>
</style>
</head>

І, отже, будь-який текст, який є гіперпосиланням, автоматично
стає червоним і перестає бути підкресленим. І от ми вирішили в кінці
сторінки вказати копірайт, але зробити це не сильно помітно, щоб не
акцентувати на цьому увагу. Але, тим не менш, ми хочемо, щоб копірайт також
був посиланням. Зробити це нам потрібно всього лише в одному місці сторінки і
визначати для цього додатковий клас недоцільно. У цьому випадку нам на
допомогу прийде каскадних стилів. Досить локально перевизначити колір
посилання:

<a href="#"><span style="color: #000000;">Copyright (C)
1998-2001 Cherry-Design</span></a>

Зробили ми це за допомогою параметр style, а він, як Ви пам’ятаєте, діє
лише в межах того тега, в якому було визначено. Що нам і потрібно.

Ви напевно звернули увагу, що у вищенаведеному прикладі я ввів в
обіг новий тег . Він призначений спеціально для
таких випадків. Все, що він робить – це визначає якусь область, до якої ми
можемо застосувати стиль. Це дуже зручний тег, тому що не вставляє ні до, ні після
себе непотрібних відбиттів (тобто пусте вертикальний простір), як це робить
тег

.

У яких тегах краще визначати стилі за допомогою класу? Найчастіше для цього
використовується одна з наступних конструкцій:

Щось

Щось
Щось
Щось

Тег подібний , але тільки з тією відмінністю, що робить до
і після себе відбиття (точно так само, як і

). А ось стиль тексту,
яким набрано основний вміст сторінки, найкраще зробити
перевизначенням тега

, а не визначенням окремого класу.

І невелике доповнення, пов’язане з коректним показом в обох броузерах –
якщо Ви використовуєте табличну верстку для дизайну сайту, то визначати стиль
основного тексту потрібно не тільки в теге

, а й у

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

Розібравшись з каскадного, давайте поговоримо про синтаксис.

Синтаксис CSS


Опис кожного класу робиться за допомогою конструкції, подібної цієї:

.small { font-size: 9pt; }

Спочатку вказується назва класу – воно може бути довільним, але бажано
все-таки давати осмислене назву. Далі, у фігурних дужках {} перераховуються
всі необхідні параметри для даного класу. Параметри відокремлюються один від одного
крапкою з комою. Ось ще один приклад, в якому використовується довший
опис:

.small { font-size: 9pt; color: #eeeeee; text-align: center; }

Зауважте, що в обох конструкціях я почав ім’я класу з точки і таким чином
визначив універсальний клас, тобто такий, що може бути застосований до будь-якого
тегу. І робиться це за допомогою наступної конструкції:

Накладаємо стиль на цей текст

Накладаємо стиль на цей текст

Раз є універсальні класи, то, ймовірно, існують і якісь інші?
Все правильно, ще бувають так звані тегів класи:

p.small { font-size: 9pt; }

Клас, визначений таким чином, спрацює тільки в тому теге, для якого
він призначений, а для всіх інших буде проігноровано:

Цей текст буде виведений стилем small

А цей залишиться незмінним

Ми можемо визначати параметри не тільки для одного тега, але і відразу для
декількох. Для цього у визначенні стилю досить перерахувати їх через
кому:

p, td { font-size: 9pt; color:green;}

Такий прийом називається угрупованням, і в даному випадку ми визначили і для

, і для

однаковий розмір і колір тексту.

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

Псевдокласи


У CSS є таке поняття як псевдокласс. На відміну від звичайного класу,
дію псевдокласса поширюється не на весь текст, до якого застосовано
даний стиль, а лише на його частину і можливе лише в певному стані.
Щоб було зрозуміліше, давайте розберемо ефект, при якому посилання підкреслюються
лише при наведенні на них курсора. Ефект досить поширений, і його
можна спостерігати в тому числі і на цьому сайті. Ось фрагмент таблиці стилів,
який дозволяє досягати вищеописаного ефекту:

a { text-decoration: none; }
a:hover { text-decoration: underline; }

Верхня рядок – це перевизначення стандартного тега , яке
забороняє підкреслювати посилання, а от нижня – це визначення стилю для
псевдокласса hover, який описує стиль посилання в момент, коли курсор
знаходиться над нею.

А ось і інший приклад псевдокласса – визначення буквиці спочатку абзацу:

p:first-letter { font-size: 200%; font-weight: bold; }

Зауважте, що і в тому, і в іншому випадку дія стилю поширюється або
на певний стан (користувач збирається клацнути по посиланню), або на
фрагмент тексту (змінюється тільки перша буква абзацу). У цьому й полягає
сенс псевдокласів.

Коментарі


Як і в будь-якому досить складною мовою, при створенні таблиці стилів можна
користуватися коментарями. Їх формат аналогічний класичному C:

/ * Цей текст є коментарем * /

Для невеликих сайтів ця можливість Вам навряд чи стане в нагоді, а от при
створення складних, багаторівневих таблиць стилів коментарі можуть придатися.
До речі, тут буде доречно навести золоте правило – чим зрозуміліше названа
змінна (в даному випадку ім’я класу), тим менше коментарів необхідно.

Основні параметри 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), пікселях (px), середньою шириною букви “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),..
  • І закінчимо цю статтю декількома прикладами опису таблиці стилів:
.epigraph {
font-size: 12pt;
font-style: italic;
text-align: right;
color: rgb(127,127,0);
}

p.big {
font-size: 16px;
font-weight: bold;
color: #ff0000;
}

.menu {
font-weight: bold;
font-size: 9pt;
font-family: arial, helvetica, sans-serif;
}

a:hover {
color: #b63a3a;
text-decoration: none;
}


Сподіваюся, що цей невеликий довідник допоможе Вам на перших порах, а для
написання більш складних стильових таблиць найкраще скористатися спеціальними
програмами – наприклад, що входять до складу HomeSite редактором TopStyle, який,
до речі, містить і прекрасний довідник властивостей.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*