Języki

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

Arkusze Kaskadowe Stylów CSS tips & tricks

Zobacz także indeks wszystkich porad.

Confetti menu

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">

Objaśnienie arkusza

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ł CSS
Prawa autorskie © 1994–2017 W3C®

Utworzono 5 Maja 2001;
Ostatnia aktualizacja czw, 9 lis 2017, 04:40:59

Języki

O tłumaczeniach