Umiemy już stworzyć
kompletną stronę internetową,
z tekstem i obrazami, ale czegoś brakuje: stylu.
Moja strona wygląda tak,
jak te, które tworzycie wy.
Czarny tekst, białe tło, taka sama czcionka,
układ od góry do dołu.
Ale przecież widzieliście, że strony
bardzo różnią się między sobą.
Na stronie Khan Academy
są różne kolory, czcionki o różnym kroju i rozmiarze.
Zróbmy teraz coś takiego.
Zatrzymajcie ten wykład i obejrzyjcie parę stron.
Czym się różnią?
Co w ich stylu wam się podoba, a co nie?
Zaczekam.
Musicie wiedzieć, jak różne mogą być strony,
bo niedługo sami wymyślicie,
jak odróżnić swoją stronę od innych,
tak, by wyrażała was samych
i podobała się użytkownikom.
Żeby uatrakcyjnić naszą stronę,
nauczymy się nowego języka, CSS.
CSS to skrót od „Cascading Style Sheets”
i określa style, których użyjemy
w różnych częściach naszej strony.
Umieszczamy CSS w HTML, mimo że jest on innym językiem.
Musimy się nauczyć języka CSS;
nie mylmy go z HTML.
Zobaczymy, jak za pomocą CSS zmieniać wygląd strony:
czcionki, rozmiary i układ.
Na początek coś wesołego. Kolor.
Może damy niektóre nagłówki
w kolorze trawiastozielonym?
Aby zacząć, wstawiamy znacznik „style”
u góry strony.
Znacznik „style” to sygnał dla przeglądarki,
że wszystko wewnątrz to CSS.
Dla jasności użyję parsera CSS
zamiast parsera HTML.
Tu dodamy regułę stylu CSS.
Ma ona selektor, mówiący przeglądarce,
której części strony dotyczy styl,
a deklaracje wskazują, jaki styl zastosować.
Chcąc zmienić wszystkie nagłówki „h2”,
wpisujemy „h2” w selektorze.
Później wstawiamy klamry.
Upewnijcie się, że wstawiliście klamry.
Inaczej nic z tego nie będzie.
W środku umieścimy deklaracje
z właściwościami i wartościami.
Do zmiany koloru tekstu używamy właściwości „color”.
Dalej dwukropek i trzeba wpisać wartość.
Informujemy przeglądarkę, który wyświetlić kolor.
Moglibyśmy wpisać „green” (zielony).
Przeglądarka zrozumie, bo to typowy kolor.
Ale ja nie chciałam zieleni,
tylko zieleń trawiastą.
Wpiszę „trawiastozielony”…
Przeglądarka się pogubiła. Wyświetli nagłówki
na czarno, bo nie zna trawiastej zieleni.
Żeby określić kolor,
korzystajmy z palety RGB.
Może słyszeliście o niej na plastyce.
Bez obaw, nie musicie być ekspertami:
przygotowaliśmy próbnik kolorów.
Wystarczy zamienić to na „rgb()”
Wyskoczy próbnik wyboru koloru,
w którym najeżdżacie na wybrany kolor myszką
i od razu widzicie, jak będzie wyglądać.
Gdy znajdziecie dla siebie kolor, kliknijcie.
Wiecie, co oznaczają trzy liczby
w nawiasie RGB?
Czerwień, zieleń i błękit.
Składniki wybranego koloru.
Dobre jest to, że selektor „h2” w CSS
zmieni kolor wszystkich nagłówków „h2” na stronie.
Możemy zmienić wiele nagłówków naraz,
wszystkie będą zielone,
jednakowe na całej stronie.
Poznając CSS, dowiecie się,
jak inaczej zmieniać wygląd części strony,
np. tylko jednego nagłówka „h2”.
Tego rodzaju selektory dają dużo możliwości.
Teraz - inna reguła stylu CSS.
Zrobimy tło w kolorze błękitu nieba.
Jak zmienić kolor tła strony?
Który znacznik obejmuje ją całą?
Nie „h1”.
Ani „p”, ani „image”.
To „body”. Pamiętacie?
To, co widoczne, zawsze jest w znaczniku „body”.
Chcąc zmienić styl całej strony,
używamy selektora, by wybrać ten znacznik.
Wpiszemy „body”.
Zamiast „color” wpiszemy „background-color” (kolor tła),
dalej dwukropek i „rgb()”.
Wyskakuje próbnik kolorów, wybieram błękit,
który kojarzy się z królikami i pierzastymi chmurami.
I już!
Spójrzcie na moją piękną stronę!
CSS może zmieniać setki właściwości
oprócz koloru czcionki i tła,
ale te były dobre na początek.
Kiedy skończę, pobawcie się kolorami,
pozmieniajcie tę stronę,
żeby nabrała waszego stylu.
Dobrze? Start!