Style Sheets Web
CSS tips & tricks

Ky dokument është një përkthim i "CSS Tips & Tricks." Përkthimi nuk është një përkthim i normative dhe mund të përmbajë gabime e përkthimit. Rishikimi i statusit të vetëm në anglisht në dokument http://www.w3.org/Style/Examples/007/target.html W3C është e mbrojtur nga copyright.

': Pseudo target' në klasë

URL normalisht Një pikë në një faqe. Por kur mbaron URL-në "diçka #" se synon një element të veçantë në këtë faqe. Browsers tipike të përpiqet për të siguruar që elementi i synuar është e dukshme dhe nëse është e mundur në krye të ekranit.

Me ': përzgjedhës objektiv', ju mund të shtoni një stil të veçantë për të element objektiv, në mënyrë që të merr më shumë vëmendje.

Por ju mund të bëjë më shumë. Ju mund të fshehin apo shfaqin elementet bazë në se ato janë objektiv apo jo. Më poshtë është një shembull. Kjo tregon nje menu pak me katër objekte dhe çdo send është i lidhur me një tekst. Por në fillim nuk ka tekst eshte treguar. Çdo artikull është një lidhje për një element me një ID objektiv (# item1, # item2 ...) dhe ato elemente janë të dukshme vetëm kur ata janë objekt URL aktual.

Mundohuni të klikoni mbi menu items dhe shikoni në shtylla e vendndodhjeve të shfletuesit të parë URL aktual.

Këtu është se si funksionon. Ka dy pjesë të rëndësishme, HTML dhe pronë 'display'. Së pari dokument HTML. Ajo ka disa lidhje dhe elemente me ID korrespondues:

<p>
  <a href="#item1"> pika 1 </ a>
  <a href="#item2"> pika 2 </ a>
  <a href="#item3"> pika 3 </ a>
  <a href="#default"> qartë </ a>

<div class="items">
  <p id="item1"> ... pika 1 ...
  <p id="item2"> ... pika 2 ...
  <p id="item3"> ...
  <p id="default"> <! - by default, tregojnë se nuk ka tekst ->
</ div>

Rregullat e stilit të parë fshehin të gjitha Psa brenda DIV, por pastaj nuk pranoj se për P se është objektivi i tanishëm:

p div.items (display: none)
p div.items: target (display: block)

Kjo është e gjitha. Shembullin e mësipërm vazhdon të shtoni disa ngjyra, kufijtë, kufijtë, etj, në mënyrë që të duket më shumë si një menu. Ju mund të shikoni në burim të kësaj faqe për të parë se si është bërë.

Aktualisht, kemi shtuar 'jo: (: target)', të siguroj që vetëm shfletues CSS3 do të fshehin element. Pra, rregullat më të mirë janë këto:

p div.items: jo (: target) (display: none)
p div.items: target (display: block)

Një ndërfaqe skeda

Pasi ju e kuptoni më lart, ajo nuk është aq e vështirë të luajnë përreth dhe krijoni një të vërtetë "skeda" Interface: një sërë rregullash stil se jo vetëm tregon përmbajtje të ndryshme të bazuara në të cilën ishte ngritur buton, por edhe paraqitja e ndryshimeve butonin vetë .

Këtu është një shembull. Ajo nuk përdor "display: none ', por' z-index. Nëse doni të dini se si punon, vetëm të bëjë një burim "pamje" ...

Mirënjohje

Kjo faqe është e bazuar në një ide origjinale nga Daniel Glazman. Shih shpjegimin e tij "blog" të 9 janar 2003 dhe demo e tij e 13 janar.