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)

confetti menu

Kolorowe menu widoczne poniżej jest zwyczajnym elementem DIV z kilkoma paragrafami w środku. Efect wizualny jest osiągnięty poprzez odzielne ulokowanie każdego paragrafu, który ma własną czcionkę i kolor. Działa to najlepiej z krótkimi tekstami, ponieważ efekt jest osiągnięty poprzez nakładanie paragrafów na siebie, ale jeśli teksty są zbyt długie moga one stac się nieczytelne.

Arkusz pozwala na menu składające się z 10 elementów (max.), w powyższym przykładzie wykorzystano 8. Oto kod HTML powyższego przykładu:

<div class="map">
<p id="p1"><a href="../../CSS/#news">What's new?</a>
<p id="p2"><a href="../../CSS/#learn">Learning CSS</a>
<p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="../../CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="../../CSS/#specs">Specs</a>
<p id="p6"><a href="../../CSS/Test">CSS1 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/">CSS Validator</a>
</div>

Zauważ klasę "map" elementu DIV, która działa jako kontener całego menu, oraz atrybuty ID dla paragrafów. Każdy element P musi mieć (inny) ID nazwany p1, p2,... lub p10. Nie koniecznym jest używanie identyfikatorów w kolejności (tak jak w przykładzie). Można skopiować ten arkusz i wkleić go do własnego arkusza lub zastosować @import lub element LINK do importu map.css bezpośrednio z witryny 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 arkusz. Zaczyna sie od zdefiniowania elementu DIV w klasie "map". Tworzy to obszar, który ma wysokość 190px, w którym umieszona jest treść paragrafów. Każdy element ma identyfikator p1 do p10. Zawiera deklaracje koloru i czcionki oraz każdy element jest umieszczony w obszarze DIV za pomocą właściwości marginesów: negatywny margines górny lokuje element na górze obszaru DIV a pozytywny dolny zapewnia to, że następny element zaczyna się na dole DIV.

(Słabością arkusza jest to, że wszystko robi w px. Można zmienić to na procenty jeśki posiada się przeglądarkę, która dobrze implementuje CSS.)

DIV.map {                        /* Zarezerwuj trochę miejsca na linki */
  padding-top: 190px;
  margin-left: -2em;             /* Adapt this to your own page... */
  margin-right: -2em;            /* Adapt this to your own page... */
  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}    /* top prawa */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top lewa */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* środek */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* środek prawa */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* środek lewa */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* Dół środek */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* Dół prawa */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* Dół lewa */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* Dół prawa */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* środek lewa */

Oczywiście możesz zmienić czcionkę, kolory i pozycje lub stworzyć dodatkowe reguły dla więcej niż 10 elementów. Popatrz również na lewy i prawy margines DIV: są one ujemne po to by menu było szersze niż tekst ale na twojej stronie margines może nie być wystarczająco szeroki by to zastosować, dlatego może będziesz chciał usunąć tą regułę.

Jeśli wypróbujesz ten arkusz, zauważysz, że nie działa on zbyt dobrze w Netscape 4. Jest to błędem Netscape 4. Niemniej jednak map-ns.css jest arkuszem, który działa w tej przeglądarce. Następujący trik w HEAD dokumentu HTML pozwala wersji Netscape 4 na lepszą implementację CSS:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Poprawna implementacja CSS pozwala na odczytanie tych dwóch arkuszy ale reguły w drugim unieważnią reguły pierwszego arkusza, także poza dodatkową pracą może nie być żadnej zmiany. Jednak Netscape 4, nie załaduje drugiego arkusza z powodu atrybutu "media", którego nie rozumie.

Może się również dziwić dlaczego elementy są umiejscowione za pomocą ujemnych marginesów, podczas gdy jest to główny kandydat do określania właściwości pozycji absolutnej. Oczywiście można to samo zrobić używając 'position' oraz 'left' & 'right'. Powodem dla którego arkusz używa marginesów jest to, że działa on w przeglądarkach, które obsługują jedynie CSS1.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 5 May 2001;
last updated $Date: 2004/01/06 21:54:41 $ GMT

firefox download Mapa