Каскадні таблиці стилів
CSS поради & прийоми

Меню "конфетті"

Різнокольорове меню, яке ви бачите нижче - просто DIV елемент з елементом P усередині. Візуальний ефект досягається тим фактом, що кожний елемент P має власне позиціонування, колір та шрифт. Це відмінно працює з короткими фразами, тому що візуальний ефект оснований на перекриванні, але якщо фрази будуть довгими, перекривання будуть створювати складності для читання.

Таблиці стилів дозволяють до 10 елементів в меню, для приклада вище використовується 8. Ось початковий HTML для прикладу вище:

<div class="map">
<p id="p1"><a href="http://www.w3.org/Style/CSS/#news">What's new?</a>

<p id="p2"><a href="http://www.w3.org/Style/CSS/#learn">Learning CSS</a>

<p id="p3"><a href="http://www.w3.org/Style/CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="http://www.w3.org/Style/CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="http://www.w3.org/Style/CSS/#specs">Specs</a>

<p id="p6"><a href="http://www.w3.org/Style/CSS/Test">CSS1 Test Suite</a>

<p id="p9"><a href="http://www.w3.org/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Примітка: клас "map" знаходиться в елементі DIV, який є контейнером для меню. Кожний елемент P повинен мати (різний) ID, названий p1, p2,... або p10. Немає необхідності давати кожному ID послідовне ім'я (як у прикладі вище), достатньо зробити його унікальним. Ви можете використовувати таблиці стилів, копіюючи їх у свої власні, або використовуючи @import або елемент LINK для копіювання map.css прямо з сайту W3C: або

@import "http://www.w3.org/Style/map.css";

або

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

Пояснення до таблиці стилів

Тут я розповім, як працюють таблиці стилів. Таблиці стилів починають визначати DIV, елемент якого клас "map". Це створює простір висотою 190 пікселів в якому будуть розміщені елементи P. Кожний з елементів з ID від p1 до p10 отримає свій колір й шрифт, кожний з P елементів отримає свою позицію у просторі визначеним елементом DIV, враховуючі значення 'margin': негативний top margin здвине елемент вгору, а позитивний bottom margin надасть можливість елементові відображатися знизу DIVа.

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

DIV.map {                   /* Залишаємо місце для посилань */
  padding-top: 190px;
  margin-left: -2em;             /* Адаптуємо до вашої сторінки... */
  margin-right: -2em;            /* Адаптуємо до вашої сторінки... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

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

Нажаль, таблиці стилів не дуже добре працюють у Netscape 4. Це - помилка Netscape 4, звичайно. Проте, таблиця стилів map-ns.css є ідентичною попередній та працює добре в цьому браузері. Наступний прийом у назві вашого HTML документу дозволить версії Netscape 4 та вище адекватно виконувати CSS :

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Коректний обробник СSS прочитає обидві таблиці стилів, але правила у другій таблиці перевизначає правила з першої, так що окрім невеликої непотрібної роботи нічого не відбудеться. Netscape 4, напевно, не буде завантажувати другу таблицю стилів, тому що атрибут "media" для нього не зрозумілий

Також вам хотілося би знати, чому елементи позиціонуються за значенням (негативним) margins, якщо це виглядає як першочерговий кандидат для абсолютного позиціонування. Насправді, ви можете зробити те ж саме з 'position' й 'left' & 'right'. Причина, з якої таблиці стилів використовують відступи в тому, що такий метод працює у браузерах, які підтримують тільки CSS1.