Samouczek CSS  

Autor: Tomasz Wiśniewski

Opublikowano: 2011-06-03

Pierwszą rzeczą, na którą zwraca uwagę użytkownik po uruchomieniu aplikacji lub wejściu na stroną internetową, jest jej wygląd. Od wyglądu zatem bardzo często zależy, czy internauta zostanie na naszej witrynie i będzie na nią wracał. Stąd też istnieje olbrzymia potrzeba tworzenia funkcjonalnych i miłych dla oka interfejsów czy szat graficznych.

Na stronach internetowych od prawie samych początków istnienia HTML można było zmieniać wygląd poszczególnych elementów. Pojawił się jednak problem wynikający stąd, że dla każdego elementu tego samego typu trzeba było wpisać te same wartości – jeśli np. webmaster chciał, aby dwa przyciski wyglądały tak samo. Taki sposób zmiany wyglądu strony bardzo szybko przestaje być efektywny z powodu nadmiaru potrzebnego kodu, jego redundancji oraz przede wszystkim trudności w utrzymaniu.

Rozwiązaniem tego problemu stały się kaskadowe arkusze stylów (w skrócie CSS – Cascading Style Sheets). Jest to specjalny język opisu stylu i wyglądu stron www – zarówno całości strony, jak i poszczególnych elementów (np. przycisk czy pole do wpisywania tekstów). CSS jest obecnie uznanym branżowo standardem, za pomocą którego twórcy stron mogą w bardzo dokładny sposób zdefiniować wygląd swojego produktu.

Po zakończeniu tego samouczka będziesz potrafił:

• rozróżniać poszczególne elementy składniowe języka,
• wykorzystywać różnego rodzaju style,
• zmieniać wygląd poszczególnych elementów strony za pomocą stylów.

Samouczek składa się z następujących tematów:

• Podstawy CSS – w pierwszej części samouczka nauczysz się, jakie są podstawowe elementy CSS oraz w jaki sposób są między sobą zależne, co powoduje, że zmiana wyglądu strony staje się prostsza, a utrzymanie kodu nie nastręcza problemów.
• Aplikowanie stylów – kaskadowe arkusze stylów mogą być dołączane na stronę w różny sposób. W tej części samouczka dowiesz się, jakie są rodzaje stylów oraz jak je poprawnie zaaplikować.
• Obramowania – jednym z podstawowych elementów interfejsu graficznego są różnego rodzaju obramowania. Służą one do grupowania elementów w logiczną część lub oddzielenia dwóch niezależnych obiektów. Z trzeciej części samouczka CSS dowiesz się, jakie style obramowania są dostępne oraz jak możesz zmieniać ich właściwości.
• Edycja kroju pisma i właściwości tekstu – podstawowym elementem każdej strony internetowej jest tekst. Należy zadbać o to, aby format tekstu wpływał pozytywnie na przekazywaną treść, a przede wszystkim nie męczył oczu czytelnika. Z tej części dowiesz się jak zmieniać krój pisma, jego właściwości (takie jak np. rozmiar) oraz jak uatrakcyjnić jego wygląd, aby był interesujący dla odbiorcy.
• Wyświetlanie i pozycjonowanie – tekst na stronie najczęściej znajduje się w jakimś większym elemencie. Istotną umiejętnością jest także spozycjonowanie i poprawne wyświetlenie takiego elementu na stronie. Piąta część samouczka CSS wyjaśnia, jak różnego rodzaju elementy blokowe i liniowe zachowują się w kontekście całej strony i jak poprawnie ustawić dla nich style, aby wyświetlały się pożądanym miejscu.
• Marginesy i dopełnienia – szósta część samouczka CSS traktuje o połączeniu elementów blokowych i zawartych w nich tekstach poprzez poprawne ustawienie marginesów i dopełnień. Dzięki czemu treść prezentowana na stronie jest czytelna i nie zlewa się, co powodowałoby niekorzystny efekt wizualny.

---