Уеб Стыле Схеетс
CSS типс & Трицкс

А мени конфете

На менију боја коју видите испод је једноставно DIV елемент са неколико елемената P унутра. Визуелни ефекат је због чињенице да је сваки елемент је позициониран P индивидуално и има сопствени фонта и боју. То најбоље ради са кратким текстовима, јер је визуелни ефекат се заснива на преклапање, али ако је текст предугачак, оверлапс га толико да он постаје тешко прочитати.

Тхе лист стила омогућава мени до 10 елемената, горњем примеру користи 8. Ово је HTML извор пример изнад:

<div class="map">
<p id="p1"><a href="../../CSS/#news">What's new?</a>
<p id="p2"><a href="../../CSS/#learn">Learning CSS</a>
<p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="../../CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="../../CSS/#specs">Specs</a>
<p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a>
<p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Напомена класи "улазница" у DIV елемент, што чини га у контејнер за менија, а ID атрибута на P. P елементи морају имати сваки (различитих) ID, назван p1, p2, ... или p10. Није потребно користити ознаке, како би (као што показује пример). Можете користити и лист стила копирањем у свој сопствени стил плахта, или помоћу @import увоз или линк елемент за увоз map.css директно од W3C сите: или

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

или

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

Објашњење на лист стила

Ево како изгледа листа радова. Тхе лист стила почиње одређујући DIV елемент са једне класе "мап". То ствара висок 190пкс простора у који се садржај P елементи ће бити постављени. Сваки од елемената са ID p1 до p10 се онда добија боју и фонт, и сваки елемент се налази унутар простора које су створили помоћу DIV од 'маргин' власништва: негативне топ маргин потези елемента горе у DIV простора и позитиван боттом маргин обезбјеђује следећи елемент почиње поново на дну је див.

(Слабост на лист стила је да се све што је у пкс. Ви мај желите променити користити проценте Уместо тога, ако имате броусер који имплементира CSS довољно добро.)

DIV.map {                        /* Reserve some room for the links */
  padding-top: 190px;
  margin-left: -2em;             /* Adapt this to your own page... */
  margin-right: -2em;            /* Adapt this to your own page... */
  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" атрибут, да не разуме.

Такође, ви мај запитали зашто елементи су позиционирани средствима (негативне) маргине, а ово изгледа као да је кандидат за премијера апсолутну позиционирање својства. Заправо, можете да учини исто са 'position' и 'left' и 'right'. Разлог овом стилу лист користи уместо маргине, да се на тај начин функционише у прегледачима да само имплементирати CSS1.

CSS ресурси

• Colors Style Sheet
• CSS Page Loading Times
• CSS Navigational Headings
• CSS tutorial
• CSS Background properties
• Creating Menus with CSS
• Style sheets for handheld devices