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ə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/target.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/target.html

Selektor :target

Əlfacın elementi

Təsdiqi

Psevdo sinf':target'

URL adətən səhifəyə yol göstərir. Lakin URL "#nə isə" ilə tamamlanan halda həmin səhifənin xüsusi elementinı keçir. BBBrauzerlər adətən əmin olmaq istəyirlər ki, məqsəd elementi görünən elementdir və ekranın yuxarı hissəsində yerləşir.

':target' xüsusiyyətinin köməyilə məqsəd elementinə xüsusi stil əlavə edə bilərsiniz, beləliklə, ona daha çox diqqət yetiriləcək.

Lakin siz daha çox edə bilərsiniz. Elementlər məqsədli olub olmamasından asılı olaraq onları gizlədə və ya göstərə bilərsiniz. Aşağıda misal göstərilib. Orada dörd bəndli menyu göstərilib və hər bənddə hansısa mətnə istinad var. Lakin əvvəldən mətn göstərilmir. Hər bənd məqsədli ID (#item1, #item2...) olan elementə istinaddır və bu elementlər yalnız carı URL-in məqsədi olanda göstərilir.

Menyunun bəndlərinə basın və brauzerin ünvan sətirinə baxaraq carı URL-i görüb qeyd edin.

Bu  1 bəndinə uyğun gələn elementdir. "#item1" istinadına getməsəniz o, görünməməlidir.

 2 bəndinə keçsəniz bu element görünməlidir.

Menyunun üçüncü bəndinə basandan sonra by element görünür. Elementin URL-i var və siz onu istənilən yerdə istifadə edə bilərsiniz. Siz onu istədiyiniz digər səhifəyə qoyub birbaşa həmin bəndə keçə bilərsiniz.

Bu belə işləyir. İki vacib hissə var: HTML mənbəsi və 'display' xüsusiyyəti. Əvvəlcə HTML sənədi. Onda müvafiq ID ilə bir neçə istinad və elementləri var:

<p>
  <a href="#item1">item 1</a>
  <a href="#item2">item 2</a>
  <a href="#item3">item 3</a>
  <a href="#default">clear</a>

<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- by default, show no text -->
</div>

Stillərin qaydaları əvvəlcə DIV içərisində bütün P-ləri gizlədir, sonra isə carı məqsəd olan P-in təsirinə xitam verirlər:

div.items p {display: none}
div.items p:target {display: block}

Vəssalam. Sonra rəng, qıraq, sərhədlər və s. əlavə edilir və beləliklə misal menyuya daha çox oxşayır. Bu səhifədəki mənbədə bunu necə yetirməıyi oyrənə bilərsiniz.

Faktiki olaraq, biz ':not(:target)' ona görə əlavə etmişik ki, CSS3 brauzerləri elementlərin gəzlətməsində əmin olaq. Demək, bu qaydalar daha iyğun gəlir:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

Əlfacınlarla interfeys

Yuxarıda təsvir edilənləri başa düşdünüzsə, məlumatı işlətmək və əlfacınlarla əsl interfeysi yaratmaq siz üçün problem olmayacaq: stil qaydaları yığımı, hansı düyməyə basmaqla yalnız cürbəcür mündəricatı göstərir, həmçinin düymələrin zahiri görünüşünün dəyişmılırini göstərir.

Misal üçün. O, 'display: none' yox, 'z-index' istifadə edir. Bu necə işlədiyini yoxlamaq istəyirsinizsə sadəcə "view source"… yetirin.

Tab 1
Kimsə mübahisı edəcək ki,...
Tab 2
... 30 xətt CSS-də - artıq çoxdur, və...
Tab 3
... 2 kifayət olardı, lakin...
Default
... bu işləyir!

Təsdiqi

Bu səhifə Daniel Qlazmanın ideyasına əsaslanır. Baxın izahata onun 9 yanvar 2003 tarixlo bloqunda və onun nümayişini 13 yanvardan.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Yaradılıb 6 fevral 2003;
Son dəyişiklik $Date: 2007/07/20 16:16:25 $ GMT