Zależność od arkuszy stylów

Apr 02
2009

Można bardzo łatwo nadużywać arkuszy stylów. Kiedy stosuje się je właściwie, są one bardzo pomocnym narzędziem w prezentacji strony. Jeśli natomiast czytelność dokumentu jest uzależniona od arkusza, dokument taki staje się problemem.

Arkusze zostały stowrzone do łatwego wpływu na prezentację strony ale nie uzależnienia jej od arkusza. Z tego powodu, projektanci, którzy opieraja całą prezentacje na arkuszach uczynić mogą swoje strony nieczytelnymi lub niedostepnymi dla sporej grupy użytkowników.

Bardzo często używa się cieniowania. Polega ono na tworzeniu negatywnych marginesów, co wiaże się z dużą zależnością dokumentu od arkusza stylów. Przykład:

strona z css

Kiedy odlączy się arkusz, strona ta wygląda nastepująco (w tej samej przeglądarce):

bez css

Jak widać, strona jest kompletnie nieczytelna bez arkusza stylów.

Projektanci witryn powinni być bardzo rozważni i robić wszystko aby czytelność i dostepność witryny nie były uzależnione od arkusza stylów.

Szybkie menu

Padding i margines

Mar 31
2009

Margines

Margines określa przestrzeń wokół elementów. Możliwe jest stosowanie wartości negatywnych. Standardy CSS pozwalają na ustawienie marginesu:

  • lewego "margin-left"
  • prawego "margin-right"
  • góry "margin-top"
  • dołu "margin-bottom"

W pliku CSS można zdefiniować margines w następujący sposób:

#kod {
margin: 10px 10px 10px 10px;
}

Powyższy kod określa margines, który wynosi 10 pikseli z każdej strony {margin:’margin-top’ ‘margin-right’ ‘margin-bottom’ ‘margin-left’} .

Jeśli chcemy aby margines był taki sam dla każdgo boku możemy użyć następującego kodu:

#kod {
margin: 10px;
}

Padding

Padding również określa przestrzeń wokół elementów. Standardy CSS pozwalają na następujące ustawienia:

  • lewy "padding-left"
  • prawy "padding-right"
  • góra "padding-top"
  • dół "padding-bottom"

#kod {
padding:’padding-top’ ‘padding-right’ ‘padding-bottom’ ‘padding-left’;
}

Różnica pomiędzy paddingiem i marginesem

Padding określa przestrzeń wokół danego elementu, np: <p> lub >div>, natomiast margines przestrzeń pomiędzy elementami.

obraz

Jak widać na rysunku, padding oznaczony jest kolorem niebieskim. Okresla on wielkość przestrzeni wokół elementu <p>. Element ten posiada również margines zaznaczony kolorem pomarańczowym. Jest to odleglość od brzegu elemenu <body>.

 

Menu poziome bez dekoracji

Mar 31
2009

Aby usunąć dekoracje tekstu w odnośniku należy zastosować “text-decoration

Oto przykładowe menu listy “UL” przeksztalcone na listę poziomą

Usuwamy dekorację tekstu używając następującego kodu:

Kod CSS

#navicontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navicontainer ul li { display: inline; padding-left:2;}

#navicontainer ul li a { text-decoration: none; }

Kod HTML

<div id=”navicontainer”>

<ul>

<li><a href=”#”>Link 1</a></li>

<li><a href=”#”>Link 2</a></li>

<li><a href=”#”>Link 3</a></li>

<li><a href=”#”>Link 4</a></li>

<li><a href=”#”>Link 5</a></li>

</ul>

</div>

Powyższy kod daje w rezultacie taki wynik:

Archives

All entries, chronologically...

Pages List

General info about this blog...