Bert Boscreated 6 Feb 2003;
last updated $Date: 2004/01/06 21:54:41 $ GMT
TłUMACZENIA ANGIELSKI METODYKA TRANSLATORYKA JĘZYKOZNAWSTWO SŁOWNIK
Dokument ten jest tłumaczeniem, które może zawierać błędy.
Zostało ono wykonane przez Angielski ELTT. Oryginalna wersja dokumentu en
(This page uses CSS style sheets)
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}
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…
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.