Stillərin kaskadlı cədvəlləri
CSS məsləhətlər & üsullar

(Bu səhifə CSS stillərin kaskadlı cədvəllərini istifadə edir)

(Bu səhifə CSS stillərin kaskadlı cədvəllərini istifadə edir)

Bu sənəd məqalənin tərcüməsidir "Web Style Sheets CSS tips & tricks".
Sənədin original versiyası mövcüddür yalnız W3C saytında http://www.w3.org/Style/Examples/007/maps.html
Bü tərcümə rəsmi W3C sənəddi DEYIL.
Bütün Müəllif Hüqüqları W3C Malikdir.
Bu sənəddə tərcümə tərcümə səhvləri və mətbəə xətaları ola bilər.

Müəllif: Sabir Sabutai (bütün tərcümələr müəllifindir)
Lokal versiya: http://www.carionltd.com/Style/Example007/maps.html

"Konfetti" menyusu

Aşağıda gördüyünüz rəngbərəng menyu – içərisində Pelementi olan DIV elementidir. Vizual efekt ondan ibarıtdir ki, hər P elementin öz mövqe, rəng və şrifti var. Bu qısa kəlmələrlə əla işləyir, çünki vizual efekt üstünü örtmədə əsaslsnır, lakin frazalar uzun olsa, üstünü örtmələr oxumağı çətinləşdirəcəklər.

Stillər cədvəlləri menyuda 10 elementlərə qədər icazə verir, misal üçün yuxarıda 8 istifadə olunur. Bu yuxarıdakı misal üçün başlanğıc HTML-dır:

<div class="map">
<p id="p1"><a href="http://www.opensourceinitiative.net/Style/CSS/#news">What's new?</a>
<p id="p2"><a href="http://www.opensourceinitiative.net/Style/CSS/#learn">Learning CSS</a>

<p id="p3"><a href="http://www.opensourceinitiative.net/Style/CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="http://www.opensourceinitiative.net/Style/CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="http://www.opensourceinitiative.net/Style/CSS/#specs">Specs</a>
<p id="p6"><a href="http://www.carionltd.com/Style/CSS/Test">CSS1 Test Suite</a>

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

Qeyd: "map" sinfi DIV elementindədir, hansı ki menyuda konteynerdir. Hər P elementinin ID-si (frəqlənən) olmalıdır, p1, p2, ... və ya p10 adı ilə. Hər ID ardıcıllıq qaydası ilə mütləq olmamalıdır (yuxarıdakı misaldakı kimi), hərəsi unikal olsa kifayətdir. Stillər cədvəllərini özünüzünkinə kopi edərək və ya onları birbaşa W3C saytından @import və ya LINK elementini istifadə edərək kopi edərək map.css istifadə edə bilərsiniz: və ya

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

və ya

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

Stillər cədvəlinə izahat

Burada stillər cədvəli necə işlədiyi haqqında səylənilir. Stillər cədvəlləri "map" sinfi olan DIV elementini təyin etməyə başlayır. Bu isə hündürlüyü 190 poksel olan sahə yaradır, hansındaki P elementləri yerləşdiriləcək. ID olan p1-dən p10-qədər hər element öz rəng və şriftini alacaq, hər P elementi sahədə DIV elementi ilə qeyd edilmiş öz mövqesini alacaq, 'margin' təyinini nəzərə almaq şərtilə: mənfi top margin elementi yuxarıya keçirəcək, müsbət bottom margin isə elementə DIV-in aşağısında göstərilmə imkanı verəcəkdir.

(Stillərcədvəllərin zəifliyi ondadır ki, hər şey pikseldədir. Siz bunu dəyişdirə bilərsiniz və nisbəti vahidlərdən (faiz) istifadə edə bilərsiniz, əgər CSS ilə kifayət qədər yaxşı işləyən brauzeriniz varsa.)

DIV.map {                   /* İstinadlar üçün yer saxlayırıq */
  padding-top: 190px;
  margin-left: -2em;             /* Səhifənizə uyğunlaşdırırıq... */
  margin-right: -2em;            /* Səhifənizə uyğunlaşdırırıq... */
  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 */

Əlbətdə ki, stillər cədvəllərini dəyişib cürbəcür şriftlər, rənglər və mövqelərdən istifadə edə bilərsiniz və ya 10-dan çox elementlər üçün əlavə stəllər cədvəlləri qaydqlqrını yarada bilərsiniz. Əlavə olaraq DIV elementinin sağ və sol aralarına diqqət yetirin: onlar mənfi mövqe tutur, və siz görürsünüz ki, menyu onu əhatə edən mətndən genişdir, lakin sizin səhifədə aralar bu üçün kifayət qədər olmaya bilər və ola bilsin ki, bu qaydalardan etiraz etməli olacaqsınız.

Təəssüflər olsun ki, stillər cədvəlləri Netscape 4 olə çoxda yaxşı iələmir. Buna baxbayaraq, stillər cədvəlimap-ns.css əvvəlkisinə oxşardır və bu brauzerdə yaxşı işləyir. HTML sənədinizin başlığında olan sonrakı üsul Netscape 4 və daha müasir versiyalarına CSS ilə uyğun işləməyə imkan verəcək:

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

Korrekt CSS emalçısı iki stillər cədvəllərini oxuyacaq, lakin ikinci cədvəldəki qaydalar birincisindəkini yenidən təyin edəcək, və bir az boş işdən başqa heç nə baş verməyəcək. Netscape 4, yzgin ki, ikinci stillər cədvəlini yükləməyəcək, çünki “Media” atributu o üçün anlanılmazdır.

Həmçinin bilmək istərdiniz ki, nəyə görə elementlər margins (mənfi) təyini ilə mövqe tuturlar, baxmayaraq ki, bu absolyut movqe tutmaq üçün ilk namizəddir. Əslində siz həmin şeyi 'position' və 'left' & 'right' iləedə bilərsiniz. Stillər cədvəlləri aralardan istifadə etməsinin səbəbi odur ki, bü üsul yalnız CSS1 dəstəkləyən brauzerlərdə işləyir.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Sənəd yaradılıb 5 may 2001;
Son dəyişikliklər $Date: 2007/07/20 16:14:58 $ GMT