"Style - co, gdzie i jak?"

Co to jest styl ?

Mówiąc najkrócej jest to zestaw kodów formatujących dany element strony www. Na przykład, akapit przedstawiamy za pomocą 10 punktowej czcionki Arial o kolorze niebieskim. Tytuł stopnia pierwszego morze być przedstawiony za pomocą czcionki Comic Sans w kolorze żółtym, umieszczony w prawej części strony. Aby uzyskać coś takiego w danym dokumencie należy stworzyć styl zawierający te wszystkie cechy.

To już było.

Każdy nawet początkujący webmaster mający pojęcie o HTML-u wie, że można uzyskać podobny efekt stosując proste polecenia typu <font size:zz> czy <font color:xx>. Możesz sobie zadać pytanie skąd wiadomo co jest tytułem, a co akapitem, jeżeli nie były stosowane style? Odpowiedź jest bardzo prosta i może zaskakująca dla mniej doświadczonego webmastera - przeglądarki same nadawały style określonym elementom, prezentując różne części strony określoną czcionką czy kolorem. Przeglądarki posiadały wbudowany własny zestaw stylów. Przeglądarki nie dawały możliwości edytowania wbudowanych stylów.

Struktura i prezentacja.

Poszczególne fragmęty dokumentu, powinny być jakoś wyróżnione, gdyż dopiero osoba czytająca tekst jest w stanie zrozumieć jego konstrukcję. Bardzo istotne jest oddzielenie części głównej, od pobocznej. Więc pierwszą istotna sprawą jest potrzeba wyróżnienia śródtytółu za pomocą metody. Czyli wszystko rozchodzi się o to, że zwykły HTML wyświetla wbudowany zestaw stylów, a CSS pozwala różnicować wygląd tych samych elementów i to w sposób nieosiągalny dla zwykłych znaczników HTML.

Budowa stylu.

Typowy schemat stylu wygląda następująco:

element{atrybut:wartość}.

Aby tytuł stopnia pierwszego posiadał określony zestaw cech, można go zdefiniować dodając do definicji zestawy par atrybut:wartość, rozdzielanych średnikiem.


     H1{font-family: Verdana; font-style:
     italic; font-size: 30pt; font-variant:
     small-caps; text-align: center; color:
     green; background-color: blue; margin-left:
     100px; margin-right:100px;}

Korzyści.

Pierwszą i podstawową zaletą stosowania stylów jest oszczędność czasu oraz miejsca. Można na przykład stworzyć plik o nazwie index.css, ustawić w nim wszystkie właściwości naszego dokumentu i stosować go do wszystkich stron na naszej witrynie. Arkusz uaktywniamy poleceniem: