TłUMACZENIA ANGIELSKI METODYKA JĘZYKOZNAWSTWO SŁOWNIK KONTAKT

 

Dokument ten jest tłumaczeniem, które może zawierać błędy.

Zostało ono wykonane przez Angielski ELTT. Oryginalna wersja dokumentu en

Zobacz inne strony

Arkusze CSS - rady i triki

(This page uses CSS style sheets)

:target selector

Tabbed element

Acknowledgment

pseudo-class ':target'

URL zazwyczaj wskazuje na stronę, ale kiedy kończy się "#cośtam" wskazuje on konkretny element na tej stronie. Przeglądarki zazwyczaj starają się aby wybrany element był widzialny i jeśli to możliwe, żeby był na górze ekranu.

Z selektorem ':target' selector można dodac konkretny styl doclowego elementu, by zwrócił on większą uwagę.

Ale można zrobić też coś więcej. Możmna chować i wyświetlać elementy w zależności czy są one wybierane czy nie. Poniżej znajduje się przykład. Pokazuje on małe menu z czterema pozycjami z których każda zawiera link do tekstu. Ale na początku nie widać żadnego tekstu. Każda pozycja jest linkiem do elementu w identifikatorem docelowym (#item1, #item2...) i elementy te są widoczne tylko wtedy gdy są wybrane.

Kliknij na menu i patrz na pasek adresu przeglądarki aby zobaczyć dany URL.

Ten element odpowiada item 1. Nie powinien być widzialny chyba, że nacisnąłeś na link prowadzący do "#item1".

Jeśli kliknąłeś na item 2, widziesz ten element.

Ten element jest widoczny jeśli nacisnałeś trzecie menu. Element ten ma URL, które można zobaczyć również gdzieś inndziej. Można wstawić go na innej stronie i przejść bezpośrednio do tej pozycji.

Oto jak to działa. Istnieją tu dwie ważne części: kod HTML i właściwość 'display'. Najpierw dokument HTML. Posiada on linki i elementy z odpowiednimi identyfikatorami:

<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"><!-- domyślnie nie pokazuje tekstu -->
</div>

Reguła stylu wpierw chowa wszystkie paragrafy wewnątrz DIV, ale później zmienia się w stosunku do paragrafu, który został wyselekcjonowany:

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

To wszystko. Powyższy przykład dodaje również kolory i marginesy, border, etc. dlatego wygląda bardziej jak menu. Można popatrzeć na źródło tej strony, żeby zobaczyć jak to zostało zrobione.

Właściwie dodaliśmy ':not(:target)', aby mieć pewność, że tylko przeglądarki CSS3 będą chowały element. Lepszym regułami są:

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

tabbed interfejs

Jak opanowałeś powyższy zagadnienie, nie jest trudno zacząć się bawić i tworzyć prawdziwie ztabulazryzowany interfejs: zestaw reguł stylu, który nie tylko pokazuje różne treści w zależności od tego, który przycisk został naciśnięty ale również zmienia wygląd samego przycisku. .

Oto przykład. Nie używa on 'display: none' ale 'z-index'. Jeśli chcesz wiedzieć jak to działa, zobacz źródło strony…

Tab 1
One might well argue, that...
Tab 2
... 30 lines of CSS is rather a lot, and...
Tab 3
... that 2 should have been enough, but...
Default
... it works!

Acknowledgment

Strona ta jest oparta o orginalny pomysł Danieal Glazmana. Zobacz wyjaśnienie na jego blogu ze stycznia 2003 jak również jego demo z 13 stycznia.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Feb 2003;
last updated $Date: 2004/01/06 21:54:41 $ GMT

firefox download Mapa