0:00:00.705,0:00:02.163
Umiemy już stworzyć

0:00:02.163,0:00:04.119
kompletną stronę internetową,

0:00:04.119,0:00:07.949
z tekstem i obrazami,[br]ale czegoś brakuje: stylu.

0:00:07.949,0:00:09.400
Moja strona wygląda tak,

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

0:00:10.982,0:00:13.686
Czarny tekst, białe tło,[br]taka sama czcionka,

0:00:13.686,0:00:15.851
układ od góry do dołu.

0:00:15.851,0:00:18.019
Ale przecież widzieliście,[br]że strony

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

0:00:20.229,0:00:21.609
Na stronie Khan Academy

0:00:21.609,0:00:24.652
są różne kolory, czcionki[br]o różnym kroju i rozmiarze.

0:00:24.652,0:00:26.819
Zróbmy teraz coś takiego.

0:00:26.819,0:00:29.895
Zatrzymajcie ten wykład[br]i obejrzyjcie parę stron.

0:00:29.895,0:00:31.625
Czym się różnią?

0:00:31.625,0:00:35.012
Co w ich stylu[br]wam się podoba, a co nie?

0:00:35.012,0:00:37.204
Zaczekam.

0:00:38.051,0:00:40.750
Musicie wiedzieć,[br]jak różne mogą być strony,

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

0:00:43.229,0:00:45.442
jak odróżnić swoją stronę[br]od innych,

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

0:00:48.535,0:00:51.198
i podobała się użytkownikom.

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

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

0:00:55.455,0:00:57.878
CSS to skrót od[br]„Cascading Style Sheets”

0:00:57.878,0:00:59.759
i określa style,[br]których użyjemy

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

0:01:01.735,0:01:06.306
Umieszczamy CSS w HTML,[br]mimo że jest on innym językiem.

0:01:06.306,0:01:08.025
Musimy się nauczyć języka CSS;

0:01:08.025,0:01:11.165
nie mylmy go z HTML.

0:01:11.165,0:01:13.957
Zobaczymy, jak za pomocą CSS[br]zmieniać wygląd strony:

0:01:13.957,0:01:16.696
czcionki, rozmiary i układ.

0:01:16.696,0:01:20.548
Na początek coś wesołego. Kolor.

0:01:20.548,0:01:22.184
Może damy niektóre nagłówki

0:01:22.184,0:01:25.531
w kolorze trawiastozielonym?

0:01:25.531,0:01:28.404
Aby zacząć,[br]wstawiamy znacznik „style”

0:01:28.404,0:01:30.523
u góry strony.

0:01:31.845,0:01:34.461
Znacznik „style”[br]to sygnał dla przeglądarki,

0:01:34.461,0:01:37.388
że wszystko wewnątrz to CSS.

0:01:37.388,0:01:40.061
Dla jasności użyję parsera CSS

0:01:40.061,0:01:43.105
zamiast parsera HTML.

0:01:43.459,0:01:48.312
Tu dodamy regułę stylu CSS.

0:01:48.312,0:01:50.886
Ma ona selektor,[br]mówiący przeglądarce,

0:01:50.886,0:01:54.063
której części strony dotyczy styl,

0:01:54.063,0:01:56.791
a deklaracje wskazują,[br]jaki styl zastosować.

0:01:56.791,0:02:00.336
Chcąc zmienić wszystkie[br]nagłówki „h2”,

0:02:00.336,0:02:03.995
wpisujemy „h2” w selektorze.

0:02:03.995,0:02:06.010
Później wstawiamy klamry.

0:02:06.010,0:02:08.475
Upewnijcie się,[br]że wstawiliście klamry.

0:02:08.475,0:02:10.151
Inaczej nic z tego nie będzie.

0:02:10.151,0:02:12.797
W środku umieścimy deklaracje

0:02:12.797,0:02:14.402
z właściwościami i wartościami.

0:02:14.402,0:02:19.240
Do zmiany koloru tekstu[br]używamy właściwości „color”.

0:02:19.240,0:02:22.901
Dalej dwukropek[br]i trzeba wpisać wartość.

0:02:22.901,0:02:25.777
Informujemy przeglądarkę,[br]który wyświetlić kolor.

0:02:25.777,0:02:28.706
Moglibyśmy wpisać „green”[br](zielony).

0:02:29.306,0:02:32.197
Przeglądarka zrozumie,[br]bo to typowy kolor.

0:02:32.197,0:02:33.833
Ale ja nie chciałam zieleni,

0:02:33.833,0:02:35.930
tylko zieleń trawiastą.

0:02:35.930,0:02:39.422
Wpiszę „trawiastozielony”…

0:02:39.422,0:02:42.401
Przeglądarka się pogubiła.[br]Wyświetli nagłówki

0:02:42.401,0:02:45.656
na czarno, bo nie zna[br]trawiastej zieleni.

0:02:45.656,0:02:48.446
Żeby określić kolor,

0:02:48.446,0:02:51.638
korzystajmy z palety RGB.

0:02:51.638,0:02:54.150
Może słyszeliście o niej[br]na plastyce.

0:02:54.150,0:02:55.996
Bez obaw,[br]nie musicie być ekspertami:

0:02:55.996,0:02:58.806
przygotowaliśmy próbnik kolorów.

0:02:58.806,0:03:03.806
Wystarczy zamienić to[br]na „rgb()”

0:03:04.083,0:03:06.559
Wyskoczy próbnik wyboru koloru,

0:03:06.559,0:03:09.330
w którym najeżdżacie[br]na wybrany kolor myszką

0:03:09.330,0:03:12.405
i od razu widzicie,[br]jak będzie wyglądać.

0:03:12.405,0:03:14.874
Gdy znajdziecie dla siebie[br]kolor, kliknijcie.

0:03:14.874,0:03:17.024
Wiecie, co oznaczają trzy liczby

0:03:17.024,0:03:20.407
w nawiasie RGB?

0:03:20.407,0:03:22.933
Czerwień, zieleń i błękit.

0:03:22.933,0:03:25.818
Składniki wybranego koloru.

0:03:26.464,0:03:29.928
Dobre jest to,[br]że selektor „h2” w CSS

0:03:29.928,0:03:33.940
zmieni kolor wszystkich[br]nagłówków „h2” na stronie.

0:03:33.940,0:03:36.532
Możemy zmienić[br]wiele nagłówków naraz,

0:03:36.532,0:03:40.360
wszystkie będą zielone,

0:03:40.360,0:03:43.475
jednakowe na całej stronie.

0:03:43.475,0:03:45.123
Poznając CSS, dowiecie się,

0:03:45.123,0:03:47.482
jak inaczej zmieniać[br]wygląd części strony,

0:03:47.482,0:03:50.020
np. tylko jednego nagłówka „h2”.

0:03:50.020,0:03:54.408
Tego rodzaju selektory[br]dają dużo możliwości.

0:03:54.408,0:03:56.318
Teraz - inna reguła stylu CSS.

0:03:56.318,0:03:59.213
Zrobimy tło w kolorze[br]błękitu nieba.

0:03:59.213,0:04:02.056
Jak zmienić kolor tła strony?

0:04:02.056,0:04:05.811
Który znacznik obejmuje ją całą?

0:04:05.811,0:04:07.204
Nie „h1”.

0:04:07.204,0:04:10.571
Ani „p”, ani „image”.

0:04:10.571,0:04:13.168
To „body”. Pamiętacie?

0:04:13.168,0:04:16.201
To, co widoczne,[br]zawsze jest w znaczniku „body”.

0:04:16.201,0:04:18.380
Chcąc zmienić styl całej strony,

0:04:18.380,0:04:22.617
używamy selektora,[br]by wybrać ten znacznik.

0:04:22.617,0:04:25.412
Wpiszemy „body”.

0:04:26.905,0:04:31.278
Zamiast „color” wpiszemy[br]„background-color” (kolor tła),

0:04:31.709,0:04:36.359
dalej dwukropek i „rgb()”.

0:04:36.359,0:04:41.049
Wyskakuje próbnik kolorów,[br]wybieram błękit,

0:04:41.049,0:04:45.646
który kojarzy się z królikami[br]i pierzastymi chmurami.

0:04:45.646,0:04:46.661
I już!

0:04:46.661,0:04:49.370
Spójrzcie na moją piękną stronę!

0:04:49.370,0:04:51.494
CSS może zmieniać[br]setki właściwości

0:04:51.494,0:04:54.116
oprócz koloru czcionki i tła,

0:04:54.116,0:04:56.743
ale te były dobre na początek.

0:04:56.758,0:04:59.157
Kiedy skończę,[br]pobawcie się kolorami,

0:04:59.157,0:05:01.534
pozmieniajcie tę stronę,

0:05:01.534,0:05:04.043
żeby nabrała waszego stylu.

0:05:04.043,0:05:06.489
Dobrze? Start!