#menu1 pasek - zmiana: podkreślenie

#menu2 pasek - zmiana: koloru tła i znaków

#menu3 przyciski - zmiana koloru tła i znaków

#menu4 przyciski z zakładką - zmiana koloru tła


#menu5 pasek z zakładką - zmiana koloru znaków

#menu6 przyciski z zakładką - zmiana koloru tła i znaków

Znaczniki kodu XHTML stosowane w nawigacji

składają się z par znaczników, otwierającego i zamykającego z wyjątkiem dwóch ostatnich 5 i 6. Między znacznikami umieszcza się tekst lub grafikę.

  1. <p> </p> otacza akapit tekstu
  2. <ul> </ul> tworzy listę nieuporządkowaną
  3. <li> </li> oznaczanie elementów listy
  4. <a href="nazwa.htm" alt="opis"> </a> proste hiperłącze, odsyłacz do pliku "nazwa.htm" z opisem pliku w alt.
  5. <br /> złamanie wiersza
  6. <hr /> linia pozioma

Selektory CSS stosowane w kodzie XHTML nawigacji

Selektory składające się z deklaracji definiuje się najpierw w arkuszu stylów a następnie ich nazwy obejmujące poszczególne znaczniki XHTML z zawartością tekstu i grafiki umieszcza się w kodzie XHTML wg. kolejności występowania na ekranie.

  1. selektor identyfikatora np   #menu1   odnosi się do jednego znacznika i może być użyty tylko raz.   W kodzie XHTML stosowany jest jako otwierający
    <div id="menu1">   tu znaczniki XHTML i tekst oraz znacznik zamknięcia selektora   </div>. Selektor indentyfikatora rozpoczyna się znakiem #.
  2. selektor klasy np   .znakpion i .przycisk   odnosi się do wielu znaczników na stronie.   W kodzie XHTML stosowany jest jako otwierający
    <div class="znakpion">   tu znaczniki XHTML i tekst oraz znacznik zamknięcia selektora   </div>. W hiperłączach nawigacji role   <div>   spełniają znaczniki   <a> i </a>. Selektor klasy rozpoczyna się kropką.
  3. selektor potomny np   #menu3 .przycisk  formatuje obramowanie wszystkich przycisków menu3 w znacznikach   <a> i </a>   objętych działaniem selektora klasy   .przycisk.   Selektor potomny np   #menu4 .zakladka   formatuje tylko jeden przycisk objęty selektorem identyfikatora   #zakladka. Selektor potomny ma zawsze przed poprzednim selektorem spacje tj. puste miejsce.

Deklaracje CSS stosowane w arkuszu stylów nawigacji

Kilka deklaracji umieszczonych w nawiasach klamrowych tworzy blok deklaracji. Blok ma z lewej strony selektor spełniający rolę nazwy bloku, która łączy go z kodem XHTML gdzie pojawia się ta sama nazwa. Całość tj. selektor i blok deklaracji tworzą regułę. Reguła określa pozycję tekstu i grafiki na ekranie oraz kolor tła, tekstu i parametry czcionek. Największą trudność sprawia pozycjonowanie elementów na ekranie i dla tego odpowiadające im deklaracje umieszczam na początku bloku a parametry tekstu i koloru na końcu. Deklaracja składa się z dwóch członów   właściwości:   zakończonej dwukropkiem i   wartości;   zakończonej średnikiem. Ostatnia wartość w bloku może być pozbawiona średnika. Są dwie szkoły zapisu nazw selektorów identyfikatora i klasy, jedna z div np.   div#menu1 i div.memu1  a druga z pominięciem członu div np.   #menu1 i .menu1  i ta bez div jest stosowana na tych stronach. Zapis z div był wymagany przez niektóre stare przeglądarki z wersji 4.0 zwłaszcza Netscape, stąd występuje w literaturze amerykańskiej.

  1. background-color: blue; - kolor tła: niebieski; np. całego paska menu1
  2. border:1px solid #000; - obramowanie całej powierzchni selektora, w tym wypadku przycisku, czarną linią o grubości 1px; tutaj w menu3
  3. border-right:2px solid #fff - obramowanie prawe: 2px białe; tutaj biała pinowa kreska w menu1
  4. border-bottom: 1px solid #000; - obramowanie dolne: 1px czarne; tutaj linia pozioma pod całym ul#menu6
  5. color: #fff; - kolor: biały; czcionki, tutaj stosowany do czcionek w menu1
  6. display:block; - wyświetla łącze jako element blokowy, cały obszar przycisku jest aktywny, w menu4
  7. display:inline; - zmienia położenie elementów listy z pionowego w poziome, tutaj stosowany w menu5
  8. float: left; - pozycja elementu dosuniętego do lewej krawędzi, zastępuje display:inline; w wypadku stosowania listy i przycisków, tutaj w ul#menu4
  9. font-color: blue; - kolor czcionki, określając inne parametry czcionki można pominąć font pisząc tylko color: blue;
  10. font:12px Arial, sans-serif; - wielkość czcionki 12px i rodzaj Arial bezszeryfowa, tutaj w ul#menu6 a
  11. font-size: 12px; - wielkość czcionki: 12 pikseli; tutaj w menu1
  12. font-weight: bold; - grubość czcionki: bold;=gruba; tutaj w menu1
  13. font-weight: normal; - grubość czcionki: normal;=cienka tutaj w ul#menu5 a
  14. height: 20px; wysokość: 20px; = 6.06mm na ekranie 17", 1px = 0.303mm, tutaj w ul#menu4 li
  15. list-style-type:none; - usuwa wcięty lewy margines elementów listy, tutaj w ul#menu4
  16. margin: 0 auto; - jest skrótem zapisu margin: 0 auto 0 auto; i oznacza że G=D=0 a P=L=auto co daje centryczne ustawienie względem krawędzi ekranu
  17. margin-left: 125px; - margines lewy: L=125px; tutaj odległość paska menu od lewej krawędzi w menu3
  18. margin-right: -1px; - margines prawy, P= -1px zmniejszenie odstępu między przyciskami , tutaj w menu3 a
  19. margin-top: -4px; - margines górny, G=-4px, dla wszystkich marginesów G P D L dopuszcza się stosowanie wartości ujemnych, tutaj podniesienie borderu do góry w ul#menu4 #zakladka4
  20. padding:10px; - zapis skrócony odstępów G=D=10px P=L=0 tutaj w menu3
  21. padding:5px 0px 5px 0px; - zapis zbiorczy odstępów G P D L wewnątrz bloku, tutaj w #menu1, możliwy jest zapis każdego odstępu osobno jak w wypadku marginesów, tylko wartości dodatnie
  22. padding:4px 25px; - zapis skrócony odstępów G=D=4px   P=L=25px równoznaczny z padding:4px 25px 4px 25px; tutaj w #menu3 a
  23. padding-right:20px; - odstęp prawy, tutaj w ul#menu5 a
  24. padding-top:4px; - odstęp górny, tutaj w ul#menu6 a
  25. position: relative; - zmiana pozycjonowania także absolute na nowe, względem lewej górnej krawędzi elementu wyznaczonego deklaracjami selektora, tutaj w ul#menu6 li
  26. text-align: center; - wyrównanie tekstu: centryczne; nazywane wyśrodkowaniem, tutaj w menu1
  27. text-decoration: none; - tekst z usuniętym podkreśleniem,tutaj w #menu1 a
  28. text-decoration: underline; - tekst podkreślony, tutaj w #menu1 a:hover
  29. width: 700px; szerokość: 700px; = 231mm na ekranie 17", 1px = 0.303mm
  30. border-radius: 4px;   zaokrąglanie rogów w CSS3, działa w Firefox, zastosowano praktycznie w #menu2

SŁOWNIK

Określeń i zwrotów stosowanych na stronach anglojęzycznych opisujących rodzaje i budowę menu.

Określenia menu
rollover - zmiana wyglądu elementu w odpowiedzi na najechanie na niego kursorem. W wypadku menu elementem jest przycisk zmieniający kolor, tła lub znaków względnie obu tj. tła i znaków jednocześnie.