CSS

CSS czyli Kaskadowe arkusze styli jest to język stworzony przez organizacje W3C służący do opisu formy prezentacji strony.

Powstał on w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu. Ponadto za pomocą zewnętrznych styli możemy dla danego dokumentu wprowadzić kilka alternatywnych wyglądów (np dla słabo widzących, lub wersje do druku),w przypadku takim zmiana wyglądu dokumentu wiąże się jedynie z załadowaniem innego arkuszu styli. Należy pamiętać że ten sam styl może posiadać kilka dokumentów, więc przebudowa ich wyglądu wiąże się z modyfikacją zaledwie jednego arkuszu styli.

Czym jest CSS ?

Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML.

Za pomocą CSS tworzymy stronę internetową dzieląc ją na bloki za pomocą div - ów takie jak np. nagłówek, poziome menu, zawartość, stopka.Następnie stylami nadajemy ich położenie, zajmowany obszar i inne cecchy za pomocą styli. Jest to całkowicie inne, bardziej nowoczesne podejście do projektowania niż staroświeckie projektowanie za pomocą tabel.

Za pomocą CSS możemy ustalać takie właściwości jak np:

• Czionki - wielkość, grubość, styl, rodzina...
• Tekstu - położenie, kolor, justowanie ...
• Tło - jednokolorowe, obrazek ....
• Marginesy
• Obramowanie
• Style list - wypunktowanie, obrazek...
• Rozmiary
• Tabele
• Pozycjonowanie
• Kursory
• Drukowanie
• Suwaki

Przykład zastososowania

Po kliknięciu w nadaj styl, sekcja div znajdująca się tuż pod nim zyskuje styl , ponowne kliknięcie zdejmuje styl.

nadaj styl