Web Style Sheets
CSS съвети и трикове

Конфети меню

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

Тази style sheet позволява до 10 елемента в менюто, примерът горе използва 8. Ето HTML кода на горния пример:

<div class="map">
<p id="p1"><a href="http://dichev.com/Style/CSS/#news">Какво ново?</a>
<p id="p2"><a href="http://dichev.com/Style/CSS/#learn">Обучение по CSS</a>
<p id="p3"><a href="http://dichev.com/Style/CSS/#browsers">CSS Браузъри</a>
<p id="p4"><a href="http://dichev.com/Style/CSS/#editors">Редактори</a>
<p id="p10"><a href="http://dichev.com/Style/CSS/#specs">Спецификации</a>
<p id="p6"><a href="http://dichev.com/Style/CSS/Test">CSS1 Тест Серия</a>
<p id="p9"><a href="http://dichev.com/StyleSheets/Core">W3C Основни Стилове</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Валидатор</a>
</div>

Обърнете внимание на класа "map" на DIV елемента, който го превръща в контейер на менюто, и на ID атрибутите на параграфите. Всеки елемент P трябва да има (различно) ID, с имена p1, p2,... или p10. не е необходимо да използвате ID-тата по ред (както е показано в примера). Може да използвате style sheet, копирайки я във Вашата собствена style sheet, или с използване на @import или LINK елемент за да създадете връзка към map.css и да го използвате директно от уебсайта на W3C: или

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

или

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

Разяснение на style sheet-а

Ето как работи тази style sheet. Започва с дефиниране на елемент DIV от клас "map". Създава се място с височина 190px, в което да се помести съдържанието на P елементите. На всеки елемент с ID от p1 до p10 се задава цвят и шрифт, като всеки от тях се позиционира в пространството създадено вътре в DIV-а, според свойството 'margin': отрицателен top margin премества елемента нагоре в DIV-а, а положителен bottom margin осигурява следващия елемент да започне отново в долната част на DIV-а.

(Недостатъкът на тази style sheet, е че работи с пиксели. Може да се промени и вместо това да използва проценти, ако браузърът имплементира 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}    /* горе дясно */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* горе ляво */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* център */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* център дясно */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* център ляво */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* долу център */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* долу дясно */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* долу ляво */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* долу дясно */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* център ляво */

Разбира се, възможно е да се промени style sheet-а с използване на други шрифтове, цветове и позиции, или да се саздадат допълнителни правила за стил за повече от 10 елемента. Погледнете също лявото и дясното отстояние (margin) на DIV-а: те са отрицателни, така менюто е по-широко от околния текст, но във Вашата страница отстоянията може да не са достатъчни за конкретната ширина на текста и може да се наложи да премахнете тези правила.

Ако пробвате стила, ще забележите, че не работи добре в Netscape 4. Това, разбира се, е грешка на Netscape 4. Въпреки това, map-ns.css е style sheet е подобен и изглежда, че работи OK в този браузър. Следният трик в head-а на 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">

Правилните CSS имплементации ще прочетат и двете style sheets, но правилата във втората ще презаместят тези от първата, така че освен малкото допълнителна работа, намя да има разлика в стила. Netscape 4 намя да зареди втората style sheet, защото не познава атрибута "media".

Може да се питате, защо елементите са позиционирани чрез (отрицателни) отстояния (margins), след като това е удобен случай за използването на свойства за абсолютно позициониране. Действително, това може да се нбаправи с 'position' и 'left' и 'right'. Причината за използването на отстояния вместо това, е че по този начин style sheet-a работи и в браузъри, които имплементират само CSS1.