1
00:00:00,705 --> 00:00:02,163
Umiemy już stworzyć

2
00:00:02,163 --> 00:00:04,119
kompletną stronę internetową,

3
00:00:04,119 --> 00:00:07,949
z tekstem i obrazami,
ale czegoś brakuje: stylu.

4
00:00:07,949 --> 00:00:09,400
Moja strona wygląda tak,

5
00:00:09,400 --> 00:00:10,982
jak te, które tworzycie wy.

6
00:00:10,982 --> 00:00:13,686
Czarny tekst, białe tło,
taka sama czcionka,

7
00:00:13,686 --> 00:00:15,851
układ od góry do dołu.

8
00:00:15,851 --> 00:00:18,019
Ale przecież widzieliście,
że strony

9
00:00:18,019 --> 00:00:20,229
bardzo różnią się między sobą.

10
00:00:20,229 --> 00:00:21,609
Na stronie Khan Academy

11
00:00:21,609 --> 00:00:24,652
są różne kolory, czcionki
o różnym kroju i rozmiarze.

12
00:00:24,652 --> 00:00:26,819
Zróbmy teraz coś takiego.

13
00:00:26,819 --> 00:00:29,895
Zatrzymajcie ten wykład
i obejrzyjcie parę stron.

14
00:00:29,895 --> 00:00:31,625
Czym się różnią?

15
00:00:31,625 --> 00:00:35,012
Co w ich stylu
wam się podoba, a co nie?

16
00:00:35,012 --> 00:00:37,204
Zaczekam.

17
00:00:38,051 --> 00:00:40,750
Musicie wiedzieć,
jak różne mogą być strony,

18
00:00:40,750 --> 00:00:43,229
bo niedługo sami wymyślicie,

19
00:00:43,229 --> 00:00:45,442
jak odróżnić swoją stronę
od innych,

20
00:00:45,442 --> 00:00:48,535
tak, by wyrażała was samych

21
00:00:48,535 --> 00:00:51,198
i podobała się użytkownikom.

22
00:00:51,198 --> 00:00:53,001
Żeby uatrakcyjnić naszą stronę,

23
00:00:53,001 --> 00:00:55,455
nauczymy się nowego języka, CSS.

24
00:00:55,455 --> 00:00:57,878
CSS to skrót od
„Cascading Style Sheets”

25
00:00:57,878 --> 00:00:59,759
i określa style,
których użyjemy

26
00:00:59,759 --> 00:01:01,735
w różnych częściach naszej strony.

27
00:01:01,735 --> 00:01:06,306
Umieszczamy CSS w HTML,
mimo że jest on innym językiem.

28
00:01:06,306 --> 00:01:08,025
Musimy się nauczyć języka CSS;

29
00:01:08,025 --> 00:01:11,165
nie mylmy go z HTML.

30
00:01:11,165 --> 00:01:13,957
Zobaczymy, jak za pomocą CSS
zmieniać wygląd strony:

31
00:01:13,957 --> 00:01:16,696
czcionki, rozmiary i układ.

32
00:01:16,696 --> 00:01:20,548
Na początek coś wesołego. Kolor.

33
00:01:20,548 --> 00:01:22,184
Może damy niektóre nagłówki

34
00:01:22,184 --> 00:01:25,531
w kolorze trawiastozielonym?

35
00:01:25,531 --> 00:01:28,404
Aby zacząć,
wstawiamy znacznik „style”

36
00:01:28,404 --> 00:01:30,523
u góry strony.

37
00:01:31,845 --> 00:01:34,461
Znacznik „style”
to sygnał dla przeglądarki,

38
00:01:34,461 --> 00:01:37,388
że wszystko wewnątrz to CSS.

39
00:01:37,388 --> 00:01:40,061
Dla jasności użyję parsera CSS

40
00:01:40,061 --> 00:01:43,105
zamiast parsera HTML.

41
00:01:43,459 --> 00:01:48,312
Tu dodamy regułę stylu CSS.

42
00:01:48,312 --> 00:01:50,886
Ma ona selektor,
mówiący przeglądarce,

43
00:01:50,886 --> 00:01:54,063
której części strony dotyczy styl,

44
00:01:54,063 --> 00:01:56,791
a deklaracje wskazują,
jaki styl zastosować.

45
00:01:56,791 --> 00:02:00,336
Chcąc zmienić wszystkie
nagłówki „h2”,

46
00:02:00,336 --> 00:02:03,995
wpisujemy „h2” w selektorze.

47
00:02:03,995 --> 00:02:06,010
Później wstawiamy klamry.

48
00:02:06,010 --> 00:02:08,475
Upewnijcie się,
że wstawiliście klamry.

49
00:02:08,475 --> 00:02:10,151
Inaczej nic z tego nie będzie.

50
00:02:10,151 --> 00:02:12,797
W środku umieścimy deklaracje

51
00:02:12,797 --> 00:02:14,402
z właściwościami i wartościami.

52
00:02:14,402 --> 00:02:19,240
Do zmiany koloru tekstu
używamy właściwości „color”.

53
00:02:19,240 --> 00:02:22,901
Dalej dwukropek
i trzeba wpisać wartość.

54
00:02:22,901 --> 00:02:25,777
Informujemy przeglądarkę,
który wyświetlić kolor.

55
00:02:25,777 --> 00:02:28,706
Moglibyśmy wpisać „green”
(zielony).

56
00:02:29,306 --> 00:02:32,197
Przeglądarka zrozumie,
bo to typowy kolor.

57
00:02:32,197 --> 00:02:33,833
Ale ja nie chciałam zieleni,

58
00:02:33,833 --> 00:02:35,930
tylko zieleń trawiastą.

59
00:02:35,930 --> 00:02:39,422
Wpiszę „trawiastozielony”…

60
00:02:39,422 --> 00:02:42,401
Przeglądarka się pogubiła.
Wyświetli nagłówki

61
00:02:42,401 --> 00:02:45,656
na czarno, bo nie zna
trawiastej zieleni.

62
00:02:45,656 --> 00:02:48,446
Żeby określić kolor,

63
00:02:48,446 --> 00:02:51,638
korzystajmy z palety RGB.

64
00:02:51,638 --> 00:02:54,150
Może słyszeliście o niej
na plastyce.

65
00:02:54,150 --> 00:02:55,996
Bez obaw,
nie musicie być ekspertami:

66
00:02:55,996 --> 00:02:58,806
przygotowaliśmy próbnik kolorów.

67
00:02:58,806 --> 00:03:03,806
Wystarczy zamienić to
na „rgb()”

68
00:03:04,083 --> 00:03:06,559
Wyskoczy próbnik wyboru koloru,

69
00:03:06,559 --> 00:03:09,330
w którym najeżdżacie
na wybrany kolor myszką

70
00:03:09,330 --> 00:03:12,405
i od razu widzicie,
jak będzie wyglądać.

71
00:03:12,405 --> 00:03:14,874
Gdy znajdziecie dla siebie
kolor, kliknijcie.

72
00:03:14,874 --> 00:03:17,024
Wiecie, co oznaczają trzy liczby

73
00:03:17,024 --> 00:03:20,407
w nawiasie RGB?

74
00:03:20,407 --> 00:03:22,933
Czerwień, zieleń i błękit.

75
00:03:22,933 --> 00:03:25,818
Składniki wybranego koloru.

76
00:03:26,464 --> 00:03:29,928
Dobre jest to,
że selektor „h2” w CSS

77
00:03:29,928 --> 00:03:33,940
zmieni kolor wszystkich
nagłówków „h2” na stronie.

78
00:03:33,940 --> 00:03:36,532
Możemy zmienić
wiele nagłówków naraz,

79
00:03:36,532 --> 00:03:40,360
wszystkie będą zielone,

80
00:03:40,360 --> 00:03:43,475
jednakowe na całej stronie.

81
00:03:43,475 --> 00:03:45,123
Poznając CSS, dowiecie się,

82
00:03:45,123 --> 00:03:47,482
jak inaczej zmieniać
wygląd części strony,

83
00:03:47,482 --> 00:03:50,020
np. tylko jednego nagłówka „h2”.

84
00:03:50,020 --> 00:03:54,408
Tego rodzaju selektory
dają dużo możliwości.

85
00:03:54,408 --> 00:03:56,318
Teraz - inna reguła stylu CSS.

86
00:03:56,318 --> 00:03:59,213
Zrobimy tło w kolorze
błękitu nieba.

87
00:03:59,213 --> 00:04:02,056
Jak zmienić kolor tła strony?

88
00:04:02,056 --> 00:04:05,811
Który znacznik obejmuje ją całą?

89
00:04:05,811 --> 00:04:07,204
Nie „h1”.

90
00:04:07,204 --> 00:04:10,571
Ani „p”, ani „image”.

91
00:04:10,571 --> 00:04:13,168
To „body”. Pamiętacie?

92
00:04:13,168 --> 00:04:16,201
To, co widoczne,
zawsze jest w znaczniku „body”.

93
00:04:16,201 --> 00:04:18,380
Chcąc zmienić styl całej strony,

94
00:04:18,380 --> 00:04:22,617
używamy selektora,
by wybrać ten znacznik.

95
00:04:22,617 --> 00:04:25,412
Wpiszemy „body”.

96
00:04:26,905 --> 00:04:31,278
Zamiast „color” wpiszemy
„background-color” (kolor tła),

97
00:04:31,709 --> 00:04:36,359
dalej dwukropek i „rgb()”.

98
00:04:36,359 --> 00:04:41,049
Wyskakuje próbnik kolorów,
wybieram błękit,

99
00:04:41,049 --> 00:04:45,646
który kojarzy się z królikami
i pierzastymi chmurami.

100
00:04:45,646 --> 00:04:46,661
I już!

101
00:04:46,661 --> 00:04:49,370
Spójrzcie na moją piękną stronę!

102
00:04:49,370 --> 00:04:51,494
CSS może zmieniać
setki właściwości

103
00:04:51,494 --> 00:04:54,116
oprócz koloru czcionki i tła,

104
00:04:54,116 --> 00:04:56,743
ale te były dobre na początek.

105
00:04:56,758 --> 00:04:59,157
Kiedy skończę,
pobawcie się kolorami,

106
00:04:59,157 --> 00:05:01,534
pozmieniajcie tę stronę,

107
00:05:01,534 --> 00:05:04,043
żeby nabrała waszego stylu.

108
00:05:04,043 --> 00:05:06,489
Dobrze? Start!