Bert
Bos, Prowadzący dział CSSPrawa autorskie © 1994–2021 W3C® Privacy policy
Utworzono 5 Maja 2001;
Ostatnia aktualizacja śro, 6 sty 2021,
05:40:49
Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga
Zobacz także indeks wszystkich porad.
Kolorowe menu, które widzisz poniżej jest prostym DIV-em z kilkoma elementami P wewnątrz. Efekt wizualny został osiągnięty dzięki temu, że każdy akapit (element P) został wypozycjonowany indywidualnie i posiada swój własny kolor oraz czcionkę. Taki zabieg działa najlepiej z krótkimi tekstami, ponieważ bazuje na nakładaniu elementów na siebie. Jeśli tekst jest za długi, to składowe mogą nakładać się na siebie za bardzo przez co całość stanie się nieczytelna.
Zastosowane style pozwalają utworzyć menu do 10 elementów, my wykorzystaliśmy ich 8. Poniżej znajduje się fragment kodu źródłowego HTML użytego w tym przykładzie:
<div class="map"> <p id="p1"><a href="../../CSS/#news">Co nowego?</a> <p id="p2"><a href="../../CSS/#learn">Nauka CSS</a> <p id="p3"><a href="../../CSS/#browsers">Przeglądarki CSS</a> <p id="p4"><a href="../../CSS/#editors">Autoryzowane narzędzia</a> <p id="p10"><a href="../../CSS/#specs">Specyfikacja</a> <p id="p6"><a href="../../CSS/Test">CSS Test Suite</a> <p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a> <p id="p8"><a href="http://jigsaw.w3.org/css-validator/">Walidator CSS</a> </div>
Zwróć uwagę na klasę "map" (pl. mapa) w DIV-ie, która
nazywa kontener dla naszego menu oraz na ID elementów P. Każdy z
paragrafów musi mieć swoje własne ID, nazwane p1,
p2, ... lub p10. Nie trzeba ich
podawać kolejno po sobie (co pokazano w przykładzie). Możesz użyć
tych stylów w swoim własnym arkuszu zwyczajnie je kopiując,
stosując @import bądź linkując plik map.css bezpośrednio z witryn W3C:
@import "http://www.w3.org/Style/map.css";
lub
<link rel="stylesheet" href="http://www.w3.org/Style/map.css">
Oto jak działa ten arkusz stylów. Zaczyna się od zdefiniowania
elementu DIV, który jest klasy "map". Tworzona jest przestrzeń o
wysokości 190 pikseli, w której będą umieszczane elementy P. Każdy
z nich, oznaczony ID od p1 do p10,
otrzymuje swój własny kolor i czcionkę, a także każdy z nich jest
pozycjonowany wewnątrz DIV-a poprzez użycie odpowiedniego marginesu
(margin). Ujemny margines górny przesuwa element
wewnątrz DIV-a, a dodatni margines górny dba o to, by następny
element zaczynał dokładnie na samym dole DIV-a.
(Minusem tych stylów jest fakt, że wszystkie wartości zapisane
są w pikselach (px). Możesz chcieć zmienić je na
użycie procentów.)
DIV.map { /* Rezerwujemy trochę przestrzeni na linki */
padding-top: 190px;
margin-left: -2em; /* Dostosuj to wedle własnego uznania... */
margin-right: -2em; /* Dostosuj to wedle własnego uznania... */
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} /* prawo góra */
#p2 {text-align: left; margin: -190px 0 150px 5%} /* lewo góra */
#p3 {text-align: right; margin: -87px 35% 47px 0} /* środek */
#p4 {text-align: right; margin: -98px 0 58px 0} /* prawo środek */
#p5 {text-align: left; margin: -130px 0 30px 0} /* lewo środek */
#p6 {text-align: left; margin: -40px 0 15px 35%} /* środek dół */
#p7 {text-align: right; margin: -80px 0 0px 0} /* prawo dół */
#p8 {text-align: left; margin: -40px 0 20px 3%} /* lewo dół */
#p9 {text-align: right; margin: -25px 0 5px 0} /* prawo dół */
#p10 {text-align: left; margin: -130px 0 70px 0} /* lewo środek */
Oczywiście możesz dowolnie zmieniać wszystkie czcionki, kolory czy pozycje. Możesz też stworzyć dodatkowe reguły, które pozwalają na umieszczenie kolejnych elementów. Zwróć także uwagę na lewe i prawe marginesy w DIV-ie. Są wartościami negatywnymi, przez co menu jest szersze niż otaczający je tekst.
Kiedy przeanalizujesz używane style możesz się zastanawiać
dlaczego do pozycjonowania wykorzystywany jest ujemny margines,
kiedy wydaje się, że świetnym środkiem byłoby użycie tutaj
pozycjonowania bezwzględnego (ang. absolute positioning). I tak jest w rzeczywistości. Ten sam efekt możesz osiągnąć
wykorzystując position oraz left i
right. Powodem zastosowania ujemnych marginesów jest
to, że w ten sposób style działają nawet na prehistorycznych
przeglądarkach wspierających wyłącznie CSS1.
Bert
Bos, Prowadzący dział CSSUtworzono 5 Maja 2001;
Ostatnia aktualizacja śro, 6 sty 2021,
05:40:49