PORADNIK KODOWANIA: CSS Przygotowane przez Jakuba Skórzyńskiego
SPIS TREŚCI Wstęp... 3 Jak zacząć?. 4 Składnia 5 Klasy i unikaty.. 7 Rzeczy ważne 8 Najważniejsze komendy 9 Porady i Triki. 11 2
Wstęp Nazywam się Jakub Skórzyński, jestem uczniem klasy III gim. W ramach projektu na końcową ocenę celującą z informatyki przedstawiam Ci czytelniku poradnik kodowania w języku CSS. Moje pierwsze spotkanie z tym językiem było przypadkowe. Podczas uczenia się PHP natrafiłem na niego dzięki wielu wzmiankom na forach poświęconym programowaniu. Szybko zrozumiałem, że jest to język niezbędny, jeśli chcę tworzyć dobrze wyglądające strony internetowe. Na szczęście jest on bardzo łatwy i przystępny w nauce, a pisanie w nim to jedno z najprzyjemniejszych doświadczeń jakie miałem jako programista. Jeżeli interesujesz się tworzeniem stron internetowych, ten poradnik pomoże Ci nauczyć się podstaw i pokaże Ci drogę do dalszego rozwoju. 3
Jak zacząć? Cascading Style Sheets, (w skrócie CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW. To znaczy, że za jego pomocą ustalamy jak będzie wyglądać strona. CSS jest nieodłączny od HTML, bez kodu HTML nie możemy użyć CSS. Spróbuj zapamiętać to tak: HTML odpowiada za zawartość strony, CSS za jej wygląd. A więc, jak zacząć? Po pierwsze, potrzebujemy dobrego edytora. Mogę wymienić miliard powodów dlaczego notatnik nie jest dobrym edytorem, ale na razie po prostu mi zaufaj. Poszukaj w internecie darmowego edytora tekstu, ważne żeby miał możliwość zmiany koloru interfejsu na ciemny (od białego bolą oczy), kolorowanie tekstu (dla wygody) i autouzupełnianie (dla szybkości pisania). Osobiście mogę polecić Visual Studio: CODE, albo ATOM. Oba te programy są darmowe. Oto porównanie kodu w notatniku i VS: CODE 4
Składnia Pisanie w CSS polega na odnoszeniu się do div ów stworzonych w HTML i określanie ich wyglądu. Linie kodu zaczynamy odniesieniem się do div a (więcej o nich na następnej stronie). #Div W klamrach ustalamy właściwości tego diva. Załóżmy, ze chcemy zmienić kolor tła, do tego posłuży nam komenda background-color. Po każdej komendzie wypisujemy dwukropek, a linie kończymy średnikiem. {} Komentarze możemy stawiać za pomocą /* i */. #Div { background-color: red; /* To jest komentarz i będzie on pominięty przy renderowaniu strony, widoczny jest on tylko dla programisty jako pomoc. */ } 5
Przed Po 6
Klasy i unikaty Co to są div y? Są to pudełka, w których zawiera się elementy strony. Np. jeżeli wstawimy zdjęcie do sekcji body w html i powiemy w css, że zdjęcie ma wypełnić cały obszar, to cały ekran wypełni się tym zdjęciem. Jeżeli stworzymy w HTML div a, do niego wrzucimy zdjęcie, a w css powiemy, ze div ma mieć wielkość 200x200 pixeli, a zdjęcie ma wypełniać cały ekran, to zdjęcie wypełni tylko pudełko o wymiarach 200x200 pixeli. Tworzymy div y za pomocą HTML: <div id= to_jest_div > Zawartość strony </div> <div class= to_jest_klasa > Zawartość klasy </div> Czym się różni ID od class? Pierwsze, to klasa a drugie to unikat. Unikatów używamy kiedy element jest jeden albo potrzebuje unikatowego umiejscowienia. Klasy, kiedy mamy wiele elementów, które mają wyglądać tak samo, np. przyciski na stronie. W CSS odnosimy się do tych pudełek by nadać im wygląd. # adresuje unikat, a. adresuje klasę: #to_jest_div {}.to_jest_klasa {} 7
Rzeczy ważne Aby skrypt CSS działał, trzeba stworzyć nowy plik tekstowy w formacie.css w tym samym folderze co index.html. Potem w pliku index musimy dołączyć z kodem CSS. Załóżmy, że nasz plik nazywa się style.css <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> Teraz skrypt powinien działać i możemy spokojnie zacząć ustalać wygląd pudełek. Konieczne by pliki były w jednej lokacji na dysku, albo żeby była podana dokładna ścieżka do pliku z naszym skryptem CSS. 8
Najważniejsze komendy Background-color: x ; - Ustala nam kolor tła pudełka. Zamiast x możemy wstawić słownie (po angielsku) kolor podstawowy, albo użyć sześciocyfrowego kodu hex poprzedzonego # np. #536745 Height: x; i Width: x; - Ustala nam opdowiednio wysokość i szerokość pudełka. Zamiast x możemy wstawić dowolna wartość rozpoznawaną przez CSS np. px (pixele) lub % (procenty). Margin: x; - Ustala nam margines pudełka. Zamiast x możemy wstawić dowolną wartość rozpoznawaną przez CSS. 9
Float: x; - Ustala przyleganie pudełek. Automatycznie jest ustawione żeby przylegały pod sobą. Jeżeli chcesz wypełnić całą stronę pudełkami o różnych szerokościach, możliwe, że niezbędne będzie użycie tej komendy i zamiast x wstawienie: left, top, bottom, right, both albo center. Przed: Po: 10
Porady i triki Jeżeli chcesz by strona wyświetlała się zawsze tak samo, możliwe, że dobrym dla Ciebie rozwiązaniem będzie użycie jednostek vw (viewport width) i vh (viewport height) żeby ustalić szerokość i wysokość pudełka zamiast jednostek 100% i 100%. Jeżeli potrzebujesz stworzyć jakiś efekt, polecam Google. W internecie jest wszystko czego będziesz potrzebował, począwszy od prostych skalowań po zaawansowane animacje. Tak ja się nauczyłem tego języka. Ponieważ komend w CSS jest tysiąc, nie możliwe jest, żebym opisał je wszystkie w tym poradniku. Odsyłam do angielskiej strony www.w3schools.com/cssref/default.asp dla spisu wszystkich dostępnych komend i masy dobrych poradników (wszystkie po angielsku). I pamiętaj, CSS to ciągłe próbowanie. Nie da się wyliczyć wszystkiego i z matematyczną precyzją dopasować wszystkiego do siebie. CSS to zabawa. Często przyłapuje się na zmienianiu wartości ustawień niektórych pudełek o 0.1px by wszystko do siebie pasowało, ale uwierz mi, warto! Ucz się i szukaj materiałów na temat języków programowania w internecie. Filmiki, lub poradniki mają wszystko czego potrzebujesz, byś stał się profesjonalnym web developerem! 11