-
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!
