WEBVTT

00:00:00.705 --> 00:00:02.163
Umiemy już stworzyć

00:00:02.163 --> 00:00:04.119
kompletną stronę internetową,

00:00:04.119 --> 00:00:07.949
z tekstem i obrazami,
ale czegoś brakuje: stylu.

00:00:07.949 --> 00:00:09.400
Moja strona wygląda tak,

00:00:09.400 --> 00:00:10.982
jak te, które tworzycie wy.

00:00:10.982 --> 00:00:13.686
Czarny tekst, białe tło,
taka sama czcionka,

00:00:13.686 --> 00:00:15.851
układ od góry do dołu.

00:00:15.851 --> 00:00:18.019
Ale przecież widzieliście,
że strony

00:00:18.019 --> 00:00:20.229
bardzo różnią się między sobą.

00:00:20.229 --> 00:00:21.609
Na stronie Khan Academy

00:00:21.609 --> 00:00:24.652
są różne kolory, czcionki
o różnym kroju i rozmiarze.

00:00:24.652 --> 00:00:26.819
Zróbmy teraz coś takiego.

00:00:26.819 --> 00:00:29.895
Zatrzymajcie ten wykład
i obejrzyjcie parę stron.

00:00:29.895 --> 00:00:31.625
Czym się różnią?

00:00:31.625 --> 00:00:35.012
Co w ich stylu
wam się podoba, a co nie?

00:00:35.012 --> 00:00:37.204
Zaczekam.

00:00:38.051 --> 00:00:40.750
Musicie wiedzieć,
jak różne mogą być strony,

00:00:40.750 --> 00:00:43.229
bo niedługo sami wymyślicie,

00:00:43.229 --> 00:00:45.442
jak odróżnić swoją stronę
od innych,

00:00:45.442 --> 00:00:48.535
tak, by wyrażała was samych

00:00:48.535 --> 00:00:51.198
i podobała się użytkownikom.

00:00:51.198 --> 00:00:53.001
Żeby uatrakcyjnić naszą stronę,

00:00:53.001 --> 00:00:55.455
nauczymy się nowego języka, CSS.

00:00:55.455 --> 00:00:57.878
CSS to skrót od
„Cascading Style Sheets”

00:00:57.878 --> 00:00:59.759
i określa style,
których użyjemy

00:00:59.759 --> 00:01:01.735
w różnych częściach naszej strony.

00:01:01.735 --> 00:01:06.306
Umieszczamy CSS w HTML,
mimo że jest on innym językiem.

00:01:06.306 --> 00:01:08.025
Musimy się nauczyć języka CSS;

00:01:08.025 --> 00:01:11.165
nie mylmy go z HTML.

00:01:11.165 --> 00:01:13.957
Zobaczymy, jak za pomocą CSS
zmieniać wygląd strony:

00:01:13.957 --> 00:01:16.696
czcionki, rozmiary i układ.

00:01:16.696 --> 00:01:20.548
Na początek coś wesołego. Kolor.

00:01:20.548 --> 00:01:22.184
Może damy niektóre nagłówki

00:01:22.184 --> 00:01:25.531
w kolorze trawiastozielonym?

00:01:25.531 --> 00:01:28.404
Aby zacząć,
wstawiamy znacznik „style”

00:01:28.404 --> 00:01:30.523
u góry strony.

00:01:31.845 --> 00:01:34.461
Znacznik „style”
to sygnał dla przeglądarki,

00:01:34.461 --> 00:01:37.388
że wszystko wewnątrz to CSS.

00:01:37.388 --> 00:01:40.061
Dla jasności użyję parsera CSS

00:01:40.061 --> 00:01:43.105
zamiast parsera HTML.

00:01:43.459 --> 00:01:48.312
Tu dodamy regułę stylu CSS.

00:01:48.312 --> 00:01:50.886
Ma ona selektor,
mówiący przeglądarce,

00:01:50.886 --> 00:01:54.063
której części strony dotyczy styl,

00:01:54.063 --> 00:01:56.791
a deklaracje wskazują,
jaki styl zastosować.

00:01:56.791 --> 00:02:00.336
Chcąc zmienić wszystkie
nagłówki „h2”,

00:02:00.336 --> 00:02:03.995
wpisujemy „h2” w selektorze.

00:02:03.995 --> 00:02:06.010
Później wstawiamy klamry.

00:02:06.010 --> 00:02:08.475
Upewnijcie się,
że wstawiliście klamry.

00:02:08.475 --> 00:02:10.151
Inaczej nic z tego nie będzie.

00:02:10.151 --> 00:02:12.797
W środku umieścimy deklaracje

00:02:12.797 --> 00:02:14.402
z właściwościami i wartościami.

00:02:14.402 --> 00:02:19.240
Do zmiany koloru tekstu
używamy właściwości „color”.

00:02:19.240 --> 00:02:22.901
Dalej dwukropek
i trzeba wpisać wartość.

00:02:22.901 --> 00:02:25.777
Informujemy przeglądarkę,
który wyświetlić kolor.

00:02:25.777 --> 00:02:28.706
Moglibyśmy wpisać „green”
(zielony).

00:02:29.306 --> 00:02:32.197
Przeglądarka zrozumie,
bo to typowy kolor.

00:02:32.197 --> 00:02:33.833
Ale ja nie chciałam zieleni,

00:02:33.833 --> 00:02:35.930
tylko zieleń trawiastą.

00:02:35.930 --> 00:02:39.422
Wpiszę „trawiastozielony”…

00:02:39.422 --> 00:02:42.401
Przeglądarka się pogubiła.
Wyświetli nagłówki

00:02:42.401 --> 00:02:45.656
na czarno, bo nie zna
trawiastej zieleni.

00:02:45.656 --> 00:02:48.446
Żeby określić kolor,

00:02:48.446 --> 00:02:51.638
korzystajmy z palety RGB.

00:02:51.638 --> 00:02:54.150
Może słyszeliście o niej
na plastyce.

00:02:54.150 --> 00:02:55.996
Bez obaw,
nie musicie być ekspertami:

00:02:55.996 --> 00:02:58.806
przygotowaliśmy próbnik kolorów.

00:02:58.806 --> 00:03:03.806
Wystarczy zamienić to
na „rgb()”

00:03:04.083 --> 00:03:06.559
Wyskoczy próbnik wyboru koloru,

00:03:06.559 --> 00:03:09.330
w którym najeżdżacie
na wybrany kolor myszką

00:03:09.330 --> 00:03:12.405
i od razu widzicie,
jak będzie wyglądać.

00:03:12.405 --> 00:03:14.874
Gdy znajdziecie dla siebie
kolor, kliknijcie.

00:03:14.874 --> 00:03:17.024
Wiecie, co oznaczają trzy liczby

00:03:17.024 --> 00:03:20.407
w nawiasie RGB?

00:03:20.407 --> 00:03:22.933
Czerwień, zieleń i błękit.

00:03:22.933 --> 00:03:25.818
Składniki wybranego koloru.

00:03:26.464 --> 00:03:29.928
Dobre jest to,
że selektor „h2” w CSS

00:03:29.928 --> 00:03:33.940
zmieni kolor wszystkich
nagłówków „h2” na stronie.

00:03:33.940 --> 00:03:36.532
Możemy zmienić
wiele nagłówków naraz,

00:03:36.532 --> 00:03:40.360
wszystkie będą zielone,

00:03:40.360 --> 00:03:43.475
jednakowe na całej stronie.

00:03:43.475 --> 00:03:45.123
Poznając CSS, dowiecie się,

00:03:45.123 --> 00:03:47.482
jak inaczej zmieniać
wygląd części strony,

00:03:47.482 --> 00:03:50.020
np. tylko jednego nagłówka „h2”.

00:03:50.020 --> 00:03:54.408
Tego rodzaju selektory
dają dużo możliwości.

00:03:54.408 --> 00:03:56.318
Teraz - inna reguła stylu CSS.

00:03:56.318 --> 00:03:59.213
Zrobimy tło w kolorze
błękitu nieba.

00:03:59.213 --> 00:04:02.056
Jak zmienić kolor tła strony?

00:04:02.056 --> 00:04:05.811
Który znacznik obejmuje ją całą?

00:04:05.811 --> 00:04:07.204
Nie „h1”.

00:04:07.204 --> 00:04:10.571
Ani „p”, ani „image”.

00:04:10.571 --> 00:04:13.168
To „body”. Pamiętacie?

00:04:13.168 --> 00:04:16.201
To, co widoczne,
zawsze jest w znaczniku „body”.

00:04:16.201 --> 00:04:18.380
Chcąc zmienić styl całej strony,

00:04:18.380 --> 00:04:22.617
używamy selektora,
by wybrać ten znacznik.

00:04:22.617 --> 00:04:25.412
Wpiszemy „body”.

00:04:26.905 --> 00:04:31.278
Zamiast „color” wpiszemy
„background-color” (kolor tła),

00:04:31.709 --> 00:04:36.359
dalej dwukropek i „rgb()”.

00:04:36.359 --> 00:04:41.049
Wyskakuje próbnik kolorów,
wybieram błękit,

00:04:41.049 --> 00:04:45.646
który kojarzy się z królikami
i pierzastymi chmurami.

00:04:45.646 --> 00:04:46.661
I już!

00:04:46.661 --> 00:04:49.370
Spójrzcie na moją piękną stronę!

00:04:49.370 --> 00:04:51.494
CSS może zmieniać
setki właściwości

00:04:51.494 --> 00:04:54.116
oprócz koloru czcionki i tła,

00:04:54.116 --> 00:04:56.743
ale te były dobre na początek.

00:04:56.758 --> 00:04:59.157
Kiedy skończę,
pobawcie się kolorami,

00:04:59.157 --> 00:05:01.534
pozmieniajcie tę stronę,

00:05:01.534 --> 00:05:04.043
żeby nabrała waszego stylu.

00:05:04.043 --> 00:05:06.489
Dobrze? Start!