Каскадныя табліцы стыляў
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. Кожны з элементаў з IDs ад 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">

Карэктны апрацоўшчык CSS прачытае абедзве табліцы стыляў, але правілы ў другой табліцы перавызначаць правілы з першай, так што акрамя невялікай непатрэбнай працы нічога не адбудзецца. Netscape 4, пэўна, не будзе загружаць другую табліцу стыляў, таму што атрыбут "media" для яго не зразумелы.

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