1
00:00:00,000 --> 00:00:05,660
>> [MUZYKI]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Więc weźmy jeden więcej
wideo mówić o jeszcze jednym języku.

3
00:00:08,740 --> 00:00:10,800
Tym razem będziemy rozmawiać o CSS.

4
00:00:10,800 --> 00:00:13,460
Więc CSS, co jest skrótem od
Kaskadowe arkusze stylów,

5
00:00:13,460 --> 00:00:16,149
jest inny język używamy
przy konstruowaniu stron internetowych.

6
00:00:16,149 --> 00:00:17,190
Pomyśl o tym w ten sposób.

7
00:00:17,190 --> 00:00:20,900
Jeżeli HTML jest to, co możemy wykorzystać, aby zorganizować
Zawartość chcemy umieścić na naszej stronie,

8
00:00:20,900 --> 00:00:25,390
CSS jest narzędzie, które na ogół korzystania
dostosować, jak wyglądają nasze strony internetowe,

9
00:00:25,390 --> 00:00:30,410
i jak doświadczenie użytkownika naprawdę
jest, interakcji z naszej strony internetowej.

10
00:00:30,410 --> 00:00:32,535
>> Podobny do HTML, CSS
nie język programowania.

11
00:00:32,535 --> 00:00:33,451
Nie ma logiki.

12
00:00:33,451 --> 00:00:34,595
To nie ma zmiennych.

13
00:00:34,595 --> 00:00:38,890
To nie ma żadnego rodzaju, że
przepływu związanych z rzeczy, że C ma.

14
00:00:38,890 --> 00:00:40,150
Jest to język stylizacji.

15
00:00:40,150 --> 00:00:42,810
I jego składnia jest dość
proste, i po prostu opisuje

16
00:00:42,810 --> 00:00:46,240
w jaki sposób elementy naszego
Strona posiada pewną HTML

17
00:00:46,240 --> 00:00:48,190
elementy powinny być zmienione.

18
00:00:48,190 --> 00:00:51,170
W tym celu, jeśli nie ma
jeszcze obserwował nasz film w formacie HTML,

19
00:00:51,170 --> 00:00:53,290
lub nie znają
HTML ogólnie cię

20
00:00:53,290 --> 00:00:57,430
może chcesz przyjrzeć się, że
po pierwsze, dlatego ta dyskusja CSS

21
00:00:57,430 --> 00:01:00,700
będzie zależeć od
niektóre znajomości HTML.

22
00:01:00,700 --> 00:01:03,740
>> Więc tutaj jest naprawdę
Prosty Arkusz stylów CSS.

23
00:01:03,740 --> 00:01:06,480
Nawet jeśli nigdy wcześniej nie
zaprogramowany z CSS wcześniej,

24
00:01:06,480 --> 00:01:10,624
Jestem prawie pewien, że można dowiedzieć się,
dokładnie to, co robi arkusz stylów.

25
00:01:10,624 --> 00:01:11,290
Co to robi?

26
00:01:11,290 --> 00:01:15,470
Oraz zastosowany do ciała naszego sieci
Strona, wszystko między tagami ciała

27
00:01:15,470 --> 00:01:19,631
na naszej HTML i ustawia
Kolor tła tej strony na niebiesko.

28
00:01:19,631 --> 00:01:21,130
Cóż, jest to bardzo prosty arkusz stylów.

29
00:01:21,130 --> 00:01:23,269
To rzeczywiście bardzo ludzkie
język przyjazny, CSS.

30
00:01:23,269 --> 00:01:26,560
Więc nawet jeśli nigdy wcześniej nie używał go wcześniej,
prawdopodobnie mógł odgadnąć, co to było.

31
00:01:26,560 --> 00:01:30,140
W rzeczywistości, jeśli załadowany stronę, gdzie
arkusz stylów został osadzony w jakiś sposób,

32
00:01:30,140 --> 00:01:36,240
tło na naszej stronie będzie
być niebieskie, a nie średnia białe.

33
00:01:36,240 --> 00:01:37,670
>> Jak więc budować arkusze stylów?

34
00:01:37,670 --> 00:01:39,700
Cóż po pierwsze, musimy
określić selektor.

35
00:01:39,700 --> 00:01:42,970
W ostatnim przykładzie,
że selektor było ciało.

36
00:01:42,970 --> 00:01:45,050
Następnie mamy otwarte
nawias klamrowy, i jesteśmy

37
00:01:45,050 --> 00:01:48,410
zamierza rozpocząć definiowaniu
arkusz stylów dla tego wyboru.

38
00:01:48,410 --> 00:01:51,800
W między nawiasy, że
Wystarczy listę par wartości kluczowych.

39
00:01:51,800 --> 00:01:56,205
Para poprzednia wartość była
Kolor błękitny średnik,

40
00:01:56,205 --> 00:01:57,830
ale możemy zrobić więcej i więcej z nich.

41
00:01:57,830 --> 00:02:02,330
Można mieć wiele rzeczy stosowania
do tego tagu, organ wyboru.

42
00:02:02,330 --> 00:02:05,960
Każdy z nich jest oddzielony
średnik i nazywamy każdy z nich

43
00:02:05,960 --> 00:02:08,949
deklaracji, deklaracji CSS.

44
00:02:08,949 --> 00:02:12,410
Kiedy skończymy z całą my stylizacji
Aby zastosować się do danej zmiennej,

45
00:02:12,410 --> 00:02:15,300
po prostu mają zamknięcia kręcone
klamra do końca arkusza stylów,

46
00:02:15,300 --> 00:02:19,640
i gotowe definiowania stylów
dla danego przełącznika.

47
00:02:19,640 --> 00:02:21,341
>> Jakie są pewne wspólne właściwości CSS?

48
00:02:21,341 --> 00:02:23,590
No, może chcesz umieścić
obramowanie wokół czegoś.

49
00:02:23,590 --> 00:02:26,850
Więc można powiedzieć, granica,
że będzie kluczem,

50
00:02:26,850 --> 00:02:29,460
a następnie byłyby Twoje wartości,
jaki styl, kolor i szerokość

51
00:02:29,460 --> 00:02:30,209
chcesz go mieć.

52
00:02:30,209 --> 00:02:33,530
Więc styl może być stały
linia przerywana linia, linia przerywana,

53
00:02:33,530 --> 00:02:36,020
linia grzbietu, która byłaby linia falista.

54
00:02:36,020 --> 00:02:38,790
Może chcesz go mieć
być niebieski lub czarny lub zielony.

55
00:02:38,790 --> 00:02:41,490
Być może ma to być
1 lub 2 lub 10 pikseli szerokości.

56
00:02:41,490 --> 00:02:43,254
Możesz określić wszystkie z tych rzeczy.

57
00:02:43,254 --> 00:02:46,420
Może chcesz ustawić tło
Kolor strony w sposób szczególny.

58
00:02:46,420 --> 00:02:49,215
Widzieliśmy już, że ustawienie
tła ciała być niebieskie.

59
00:02:49,215 --> 00:02:52,080
>> Następnie można użyć słów kluczowych,
tak CSS ma pewne kolory

60
00:02:52,080 --> 00:02:55,950
które są wbudowane w niego, niebieski, zielony,
czarny, bardzo proste kolory, które znamy.

61
00:02:55,950 --> 00:02:59,110
Ale można też podać dowolny
szesnastkowy koloru, który chcesz.

62
00:02:59,110 --> 00:03:05,190
Przypomnijmy, że można zidentyfikować kolory
przez zestaw trzech liczb sześciokątnych

63
00:03:05,190 --> 00:03:08,500
od 0 do 255, RG i B,
czerwony, zielony i niebieski komponent.

64
00:03:08,500 --> 00:03:10,590
I tak możemy określić
dowolny kolor chcemy przez,

65
00:03:10,590 --> 00:03:15,520
zamiast używać niebieski lub zielony lub czarny,
przy użyciu funta, a następnie sześć cyfr hex,

66
00:03:15,520 --> 00:03:18,310
i że da nam
kolor sześciu cyfr.

67
00:03:18,310 --> 00:03:19,850
Więc to jest kolor tła.

68
00:03:19,850 --> 00:03:21,975
>> Mamy też nową wiedzę
Kolor, który jest zwykle

69
00:03:21,975 --> 00:03:24,140
będzie tekst swojej stronie.

70
00:03:24,140 --> 00:03:28,850
I można podobnie zrobić
ze słowem kluczowym i czy sześć cyfr hex.

71
00:03:28,850 --> 00:03:32,140
Tak można określić dowolny kolor
chcą w treści strony

72
00:03:32,140 --> 00:03:36,370
przeciwko konkretnemu
kolor tła, nawet powyżej.

73
00:03:36,370 --> 00:03:39,100
Można również zmienić i radzić sobie
czcionką, a sposób tekstu

74
00:03:39,100 --> 00:03:40,400
jest wyświetlana na stronie.

75
00:03:40,400 --> 00:03:42,010
>> Więc można zmienić rozmiar czcionki.

76
00:03:42,010 --> 00:03:46,320
Można użyć słów kluczowych, takich jak dodatkowe,
dodatkowa mała, lub xx małe lub średnie,

77
00:03:46,320 --> 00:03:47,660
duże, i tak dalej.

78
00:03:47,660 --> 00:03:50,750
Możesz użyć stałe punkty, 10
pkt, 12 pkt, i tak dalej.

79
00:03:50,750 --> 00:03:55,850
Możesz użyć procentów, 80%, 20%,
gdzie 100% jest domyślna czcionka

80
00:03:55,850 --> 00:03:59,220
Wielkość, co zazwyczaj będzie
coś jak 11 lub 12 punktów.

81
00:03:59,220 --> 00:04:01,659
Lub można nawet oprzeć się
najnowszego rozmiaru czcionki.

82
00:04:01,659 --> 00:04:04,950
Jeśli po prostu napisał coś i wiesz,
to, co chcesz, aby była ona mniejsza,

83
00:04:04,950 --> 00:04:08,241
ale nie wiem dokładnie jaki rozmiar
ma to być, no, może tylko powiedzieć,

84
00:04:08,241 --> 00:04:09,330
rozmiar czcionki mniejsze.

85
00:04:09,330 --> 00:04:14,344
I będzie opierać się z,
po prostu się wyżej, jest to wielkość czcionki.

86
00:04:14,344 --> 00:04:15,760
I można dostać mniejszy lub większy.

87
00:04:15,760 --> 00:04:18,390
Więc nie wiele różni się
sposoby, aby określić rozmiar czcionki.

88
00:04:18,390 --> 00:04:20,690
>> Można również określić, co
czcionki rodzina chcesz.

89
00:04:20,690 --> 00:04:23,360
Jeśli masz szczególności
nazwa, jest to sposób, w CSS--

90
00:04:23,360 --> 00:04:27,270
nie będziemy o tym mówić
here-- zdefiniować bardzo konkretnej czcionki

91
00:04:27,270 --> 00:04:28,980
i umieścić go na swojej stronie.

92
00:04:28,980 --> 00:04:30,620
Można również użyć nazwy rodzajowe.

93
00:04:30,620 --> 00:04:33,540
Istnieje wiele bezpiecznych czcionek internetowych
które są wstępnie zdefiniowane w CSS.

94
00:04:33,540 --> 00:04:36,352
A jeśli jesteś użytkownikiem od firmy Microsoft
Biuro w ciągu ostatnich 20 lat,

95
00:04:36,352 --> 00:04:38,810
jesteś prawdopodobnie zna
wiele z tych bezpiecznych czcionek internetowych

96
00:04:38,810 --> 00:04:44,640
już, Times New Roman, Arial,
Courier New, Gruzję, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
i tak dalej.

98
00:04:45,470 --> 00:04:47,170
Tych wszystkich, są uważane za bezpieczne internetowej czcionek.

99
00:04:47,170 --> 00:04:49,169
I rzeczywiście, część
Powodem znaleźli się

100
00:04:49,169 --> 00:04:54,140
miał być używany do web-- każdą stronę
miał dostęp do tej domyślnie ustawiony czcionek

101
00:04:54,140 --> 00:04:58,480
z różnymi szeryfów i to wszystko
czcionki rzeczy nie dostaniemy się,

102
00:04:58,480 --> 00:05:01,130
ale zwykle są one
dostępne w CSS,

103
00:05:01,130 --> 00:05:04,029
nawet jeśli tego nie zrobisz
inaczej zdefiniować czcionki.

104
00:05:04,029 --> 00:05:07,070
Wreszcie, można wyrównać tekst,
Zamiast tego jest domyślnie ustawione

105
00:05:07,070 --> 00:05:09,310
w lewo, można
dopasuj go w prawo,

106
00:05:09,310 --> 00:05:13,740
lub można dostosować go na środku, lub
uzasadnione, tak aby trafić zarówno marże.

107
00:05:13,740 --> 00:05:16,800
To są wszystkie opcje można wykorzystać
aby zmienić to, co tekst wygląda,

108
00:05:16,800 --> 00:05:20,120
i jak jest wyświetlana na stronie.

109
00:05:20,120 --> 00:05:22,180
>> Twoje selektorów nie
być tylko tagi.

110
00:05:22,180 --> 00:05:25,539
Wcześniej widział tag ciała
Przełącznik i selektor tag

111
00:05:25,539 --> 00:05:26,580
wygląda właśnie tak.

112
00:05:26,580 --> 00:05:30,020
To nazwę znacznika, a następnie
definiowania stylów dla tego tagu.

113
00:05:30,020 --> 00:05:32,660
Ale można też zrobić coś
nazywany selektor identyfikatora.

114
00:05:32,660 --> 00:05:34,390
Selektor ID wygląda dość podobnie.

115
00:05:34,390 --> 00:05:38,100
Ale zauważ, że teraz nie używam
znacznik HTML, używam, w tym przypadku,

116
00:05:38,100 --> 00:05:40,720
#unique lub hash wyjątkowy.

117
00:05:40,720 --> 00:05:42,930
Jeśli pamiętacie z naszym
wideo w formacie HTML, rozmawialiśmy

118
00:05:42,930 --> 00:05:45,620
o tym, jak znaczniki mogą mieć atrybuty.

119
00:05:45,620 --> 00:05:48,340
>> I jeden atrybut, który dotyczy
prawie wszystkie znaczników HTML,

120
00:05:48,340 --> 00:05:51,440
ale nie o tym mówić,
jest coś, co nazywa znacznik ID.

121
00:05:51,440 --> 00:05:55,250
Więc to zwłaszcza CSS będzie
stosuje się tylko do tagu HTML, który ma

122
00:05:55,250 --> 00:05:58,530
bardzo specyficzny ID, które zostały nazwane.

123
00:05:58,530 --> 00:06:01,000
Więc jeśli masz gdzieś
w kodzie, gdzieś

124
00:06:01,000 --> 00:06:06,090
w pliku HTML, tag i Ciebie
określić jako atrybut tego znacznika,

125
00:06:06,090 --> 00:06:09,060
ID równa wyjątkowy, to
szczególności arkusz stylów

126
00:06:09,060 --> 00:06:15,030
tutaj będą miały zastosowanie tylko w między
że tag identyfikator unikalny.

127
00:06:15,030 --> 00:06:17,180
>> Możesz też zrobić coś
nazywa selektor klasy.

128
00:06:17,180 --> 00:06:19,920
Tak więc oprócz posiadania
ID atrybutów, można również

129
00:06:19,920 --> 00:06:23,130
dodać atrybut klasy znaczników HTML.

130
00:06:23,130 --> 00:06:27,140
A kiedy użyć atrybutu class,
można stosować wiele znaczników.

131
00:06:27,140 --> 00:06:31,880
Więc jeśli masz kilka rzeczy, które
są podobne, może chcesz powiedzieć,

132
00:06:31,880 --> 00:06:35,890
otwarte tag bla, bla, bla,
bla, klasa równa studentów.

133
00:06:35,890 --> 00:06:38,190
A potem ten szczególny
arkusz stylów ma zastosowania

134
00:06:38,190 --> 00:06:42,041
do każdej zmiennej, której klasa jest studentów.

135
00:06:42,041 --> 00:06:44,290
W tym przypadku chcemy ustawić
kolor tła na żółty,

136
00:06:44,290 --> 00:06:46,706
i chcemy ustawić krycie, które
to znacznik nie mówić,

137
00:06:46,706 --> 00:06:52,510
ale po prostu zajmuje się, jak przezroczyste
coś jest do 70%, w tym przypadku.

138
00:06:52,510 --> 00:06:54,430
>> Są dwa warianty
pisanie arkusze stylów.

139
00:06:54,430 --> 00:06:56,680
Można je pisać
bezpośrednio w kodzie HTML

140
00:06:56,680 --> 00:06:59,690
poprzez umieszczenie arkuszy stylów
pomiędzy znacznikami stylu.

141
00:06:59,690 --> 00:07:03,850
A te tagi stylu przejść wewnątrz
tagi czele swojej stronie internetowej.

142
00:07:03,850 --> 00:07:08,240
Może bardziej preferowany sposób to zrobić
to napisać osobny plik .css,

143
00:07:08,240 --> 00:07:12,360
a następnie połączyć go do
udokumentować za pomocą znaczników łącza.

144
00:07:12,360 --> 00:07:14,690
Tagi linków, znowu, są
różni się od hiperłączy,

145
00:07:14,690 --> 00:07:16,760
Jeśli pamiętacie z naszego wideo HTML.

146
00:07:16,760 --> 00:07:19,030
Link i tagi są jak
ciągnąć w oddzielnych plikach.

147
00:07:19,030 --> 00:07:23,900
To coś w rodzaju odpowiednika
#include do programowania stron internetowych.

148
00:07:23,900 --> 00:07:27,140
>> Warto więc przyjrzeć się table.HTML.

149
00:07:27,140 --> 00:07:29,380
Jeśli pamiętacie z naszym
Wideo HTML, pokazałem

150
00:07:29,380 --> 00:07:32,000
Przykładem bardzo
proste mnożenie

151
00:07:32,000 --> 00:07:35,160
stół, który wyglądał dość
brzydkie, a może nie ma

152
00:07:35,160 --> 00:07:38,650
sposób, aby lepiej
CSS, aby rzeczywiście wyglądają

153
00:07:38,650 --> 00:07:41,120
bardziej jak mnożenie
Stół, czy coś

154
00:07:41,120 --> 00:07:43,730
że nie tylko sklejone
bez faktycznego podziału

155
00:07:43,730 --> 00:07:45,532
pomiędzy rzędami i kolumnami.

156
00:07:45,532 --> 00:07:47,490
Warto więc udać się do
CS50 IDE, i spojrzeć

157
00:07:47,490 --> 00:07:50,780
w jaki sposób CSS może, w pewnym sensie, dostosować
to, co zaczęło się wcześniej,

158
00:07:50,780 --> 00:07:53,290
i sprawiają, że coś o wiele lepiej.

159
00:07:53,290 --> 00:07:55,650
>> Więc jesteśmy w CS50 IDE
teraz, a jeśli nie znają,

160
00:07:55,650 --> 00:07:58,710
my otwieramy w tym
Stół, że strona HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML zasadzie
po prostu określa zawartość

162
00:08:01,090 --> 00:08:05,044
tematyce multiple-- miało to być
cztery przez cztery tabliczka mnożenia.

163
00:08:05,044 --> 00:08:06,210
To całkiem proste.

164
00:08:06,210 --> 00:08:09,410
I nie myślimy, że będzie
wyglądają bardzo dobrze zorganizowane.

165
00:08:09,410 --> 00:08:15,277
Ale w rzeczywistości, kiedy przeglądać tę stronę,
widzimy, że jest to rodzaj brzydki, prawda?

166
00:08:15,277 --> 00:08:16,860
Oczywiście mamy tu rzędy i kolumny.

167
00:08:16,860 --> 00:08:18,350
Istnieje jakiś separacji.

168
00:08:18,350 --> 00:08:20,040
Ale to nie jest sensowne oddzielenie.

169
00:08:20,040 --> 00:08:23,105
Nie jesteśmy rzeczywiście coraz
zbyt wiele informacji tutaj.

170
00:08:23,105 --> 00:08:25,730
I nie ma rozdziału między
wiersze i kolumny w kategoriach

171
00:08:25,730 --> 00:08:28,460
zasad poziomych lub pionowych.

172
00:08:28,460 --> 00:08:31,530
Możemy chyba zrobić to
wygląda trochę lepiej.

173
00:08:31,530 --> 00:08:32,934
Więc spróbujmy.

174
00:08:32,934 --> 00:08:34,559
Więc mam zamiar zamknąć tę kartę tutaj.

175
00:08:34,559 --> 00:08:37,434
I mam zamiar zamknąć mój table.HTML,
a ja mam inną wersję tutaj

176
00:08:37,434 --> 00:08:39,490
nazywa table2.HTML.

177
00:08:39,490 --> 00:08:40,655
Będziemy otwarcie, że się.

178
00:08:40,655 --> 00:08:42,530
Ciało stronie
Właściwie to samo,

179
00:08:42,530 --> 00:08:44,238
ale ja się zmienił
nieco w górę.

180
00:08:44,238 --> 00:08:47,132
A ja przewijać się tutaj.

181
00:08:47,132 --> 00:08:49,340
Zauważ, że tym razem, jestem
przy użyciu wbudowanych tagów stylu.

182
00:08:49,340 --> 00:08:53,550
Mam otwarte tag styl, a ja jestem teraz
definiowania stylów CSS tylko wewnątrz

183
00:08:53,550 --> 00:08:54,310
niego.

184
00:08:54,310 --> 00:08:56,310
Mam arkusz stylów, który mówi, stolik.

185
00:08:56,310 --> 00:08:58,170
To mój selektor znacznik.

186
00:08:58,170 --> 00:09:01,340
Nie używam kropki lub mieszania,
co chciałbym robić, gdybym

187
00:09:01,340 --> 00:09:03,710
był przy użyciu identyfikatora lub selektora klasy.

188
00:09:03,710 --> 00:09:06,190
Mam wyboru tag here-- tabeli.

189
00:09:06,190 --> 00:09:10,090
Ten styl będzie
stosuje się do każdego tagu tabeli.

190
00:09:10,090 --> 00:09:14,950
Najwyraźniej chcę umieścić jeden
piksel, stałe niebieskie obramowanie,

191
00:09:14,950 --> 00:09:15,779
w moim stole.

192
00:09:15,779 --> 00:09:18,320
Brzmi to prawdopodobnie
pomóc w sytuacji, prawda?

193
00:09:18,320 --> 00:09:20,320
My będziemy mieć
wszystko wygląda o wiele lepiej.

194
00:09:20,320 --> 00:09:21,190
Tak to jest w porządku.

195
00:09:21,190 --> 00:09:23,540
Stylistycznie, właśnie
osadzone mojego arkusza stylów tutaj.

196
00:09:23,540 --> 00:09:25,100
To z pewnością
dopuszczalny sposób to zrobić.

197
00:09:25,100 --> 00:09:26,391
Zobaczmy, jak to wygląda.

198
00:09:26,391 --> 00:09:29,790
Więc wrócę tu, i
Będę się podejrzeć mój table2.HTML.

199
00:09:29,790 --> 00:09:32,430

200
00:09:32,430 --> 00:09:36,470
Dobrze, że nie jest całkiem to, co chciałem,
ale to jest dokładnie to, o co prosiliśmy.

201
00:09:36,470 --> 00:09:39,530
Powiedzieliśmy, że ten styl jest
zamiar zastosować do naszego stolika.

202
00:09:39,530 --> 00:09:43,810
Nasz stół ma teraz jeden piksel
szeroki, solidny niebieskie obramowanie wokół niego.

203
00:09:43,810 --> 00:09:46,237
Nie jesteśmy rzeczywiście coraz
w komórkach tabeli.

204
00:09:46,237 --> 00:09:47,570
My tylko się przy stole.

205
00:09:47,570 --> 00:09:49,310
Więc CSS pracował.

206
00:09:49,310 --> 00:09:51,890
To zastosowała
arkusz stylów do naszego stolika.

207
00:09:51,890 --> 00:09:53,981
Ale nie dość zrobić
co chcieliśmy to zrobić.

208
00:09:53,981 --> 00:09:55,730
Jak mamy to zrobić
co chcemy to zrobić?

209
00:09:55,730 --> 00:09:59,287
>> Cóż, rzućmy okiem na jeden więcej
wersja to w table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Więc jestem po prostu się zamknąć te karty.

211
00:10:00,870 --> 00:10:03,890
Mam zamiar wrócić tu do mojego
złożyć drzewo i otworzyć table3.HTML.

212
00:10:03,890 --> 00:10:07,680

213
00:10:07,680 --> 00:10:10,350
Ponownie, to będzie ładnie wyglądać
Podobny tu na początku.

214
00:10:10,350 --> 00:10:14,460
Ale uwaga, tym razem, zamiast korzystania
arkusz stylów osadzone bezpośrednio w tam,

215
00:10:14,460 --> 00:10:18,870
Zamierzam link w
arkusz stylów za pomocą znacznika łącza.

216
00:10:18,870 --> 00:10:22,480
Więc jestem podobno łącząc w sposób
arkusz stylów nazywa tables.CSS,

217
00:10:22,480 --> 00:10:25,090
i to również jest równa
arkusz stylów tylko means-- dobrze,

218
00:10:25,090 --> 00:10:28,645
co to jest plik w stosunku do tego, co
Jestem doing-- jest arkusz stylów, że jestem

219
00:10:28,645 --> 00:10:29,821
stosując na mojej stronie.

220
00:10:29,821 --> 00:10:32,320
Więc jeśli naprawdę chcę zobaczyć, co
Robię z CSS tutaj,

221
00:10:32,320 --> 00:10:35,010
Muszę iść otwarta, że
table.CSS złożyć również.

222
00:10:35,010 --> 00:10:37,490
Więc wrócimy tutaj
ponownie do naszego drzewa plików.

223
00:10:37,490 --> 00:10:38,660
Jest table.CSS.

224
00:10:38,660 --> 00:10:40,490
Będziemy je otwierają.

225
00:10:40,490 --> 00:10:43,070
Teraz widzimy trochę CSS.

226
00:10:43,070 --> 00:10:45,630
Widocznie mam kilka
rzeczy się tu dzieje.

227
00:10:45,630 --> 00:10:48,950
I najwyraźniej chce postawić pięć
piksel, stałe czerwone obramowanie,

228
00:10:48,950 --> 00:10:50,287
wokół mojego stolika.

229
00:10:50,287 --> 00:10:52,870
Wiemy już, że to się dzieje
po prostu pójść na obwodzie.

230
00:10:52,870 --> 00:10:56,180
Widzieliśmy, że w table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Z każdym rzędzie, ja
najwyraźniej chce, aby określić

232
00:10:58,770 --> 00:11:01,950
że wysokość wiersza jest 50 pikseli wysokości.

233
00:11:01,950 --> 00:11:05,680
Tak więc dla każdego wiersza, należy pamiętać,
że to, co robi znacznika tr,

234
00:11:05,680 --> 00:11:08,550
Robię to 50 pikseli wysokości.

235
00:11:08,550 --> 00:11:09,804
>> Wreszcie, mam ten komentarz.

236
00:11:09,804 --> 00:11:11,470
I w ten sposób mamy uwag na CSS.

237
00:11:11,470 --> 00:11:16,174
Jest bardzo podobny do przejęcia bloku
komentarze składnia gwiazdowe ukośnik.

238
00:11:16,174 --> 00:11:17,090
Cały tekst chcesz.

239
00:11:17,090 --> 00:11:19,470
Nie ma ukośnik ukośnik choć w CSS.

240
00:11:19,470 --> 00:11:23,400
W przypadku krótkich inline komentarze, mamy
użyć tutaj tego konkretnego formatu.

241
00:11:23,400 --> 00:11:26,830
Wygląda na to robię
Wiele rzeczy w moim td tagów.

242
00:11:26,830 --> 00:11:29,710
Pamiętaj td tagów lub stole
Dane, które tak naprawdę są po prostu

243
00:11:29,710 --> 00:11:32,210
kolumny wewnątrz
nasze wiersze i najwyraźniej

244
00:11:32,210 --> 00:11:35,090
Dla każdego elementu danych
w moim stole, chcę

245
00:11:35,090 --> 00:11:38,850
aby ustawić kolor tła
być czarny kolor będzie biały,

246
00:11:38,850 --> 00:11:40,320
kolor to kolor pierwszego planu.

247
00:11:40,320 --> 00:11:42,360
Więc to będzie
tekst mojej stronie.

248
00:11:42,360 --> 00:11:45,140
Chcę duże czcionki, 22
wskazują czcionkę, i chcę,

249
00:11:45,140 --> 00:11:47,001
że jest z rodziny fontów, Georgia.

250
00:11:47,001 --> 00:11:48,750
Więc nie będę się
mają domyślną czcionkę.

251
00:11:48,750 --> 00:11:51,820
Zamierzam podać Gruzję, która
jest jednym z tych bezpiecznych czcionek internetowych

252
00:11:51,820 --> 00:11:53,830
które widzieliśmy wcześniej.

253
00:11:53,830 --> 00:11:57,284
Chcę, aby mój tekst ma być wyrównany
centralnie, w środku pudełka,

254
00:11:57,284 --> 00:11:59,450
Nie chcę go zostawić
wyrównane lub w prawo wyrównane.

255
00:11:59,450 --> 00:12:03,461
A ja chcę moje szerokość kolumny
być 50 pikseli szerokości, jak również.

256
00:12:03,461 --> 00:12:05,210
Rzućmy okiem na
jak to wygląda,

257
00:12:05,210 --> 00:12:07,470
i sprawdzić, czy jest to może poprawa.

258
00:12:07,470 --> 00:12:12,890
Więc mam zamiar iść do table3.HTML, które
Przypomnijmy, obejmuje table.CSS jako link,

259
00:12:12,890 --> 00:12:14,830
a my go obejrzeć.

260
00:12:14,830 --> 00:12:16,800
To dużo lepiej, prawda?

261
00:12:16,800 --> 00:12:20,004
To jest rzeczywiście zaczynają wyglądać
Dużo bardziej jak tabliczka mnożenia.

262
00:12:20,004 --> 00:12:21,920
Mam tę czerwoną ramkę
wokół mojej tabeli, ale teraz

263
00:12:21,920 --> 00:12:26,700
Ja też określić, że
każdy wiersz jest 50 pikseli szerokości,

264
00:12:26,700 --> 00:12:30,220
lub jest to 50 pikseli tall-- usprawiedliwienia
me-- każda kolumna ma 50 pikseli szerokości.

265
00:12:30,220 --> 00:12:34,251
Dane w każdej kolumnie, a dopiero
dane, ma czarne tło.

266
00:12:34,251 --> 00:12:36,000
To dlatego ci,
białe linie są tam.

267
00:12:36,000 --> 00:12:38,836
Ponieważ przestrzeń
pomiędzy wszystkimi tymi komórkami

268
00:12:38,836 --> 00:12:40,710
nie jest to granica w
sama w sobie, to tylko

269
00:12:40,710 --> 00:12:43,170
Jestem wypełnienie tylko w
komórki, które właściwie

270
00:12:43,170 --> 00:12:46,310
sprawia, że ​​granice tabeli, które
najwyraźniej nie istniał cały czas, to

271
00:12:46,310 --> 00:12:47,887
tylko cienkie białe linie.

272
00:12:47,887 --> 00:12:48,720
Teraz są widoczne.

273
00:12:48,720 --> 00:12:50,380
Teraz pojawiają się na ekranie.

274
00:12:50,380 --> 00:12:52,920
A więc jest to bardzo proste
arkusz stylów, że już stosowane,

275
00:12:52,920 --> 00:12:56,850
a teraz moja tabela wygląda dużo bardziej
stół cztery czterech mnożenie,

276
00:12:56,850 --> 00:13:00,950
zamiast po prostu pomieszane bałagan, gdzie
wszystko jest wyraźnie wiersze i kolumny,

277
00:13:00,950 --> 00:13:03,717
ale nie bardzo dobrze zorganizowane.

278
00:13:03,717 --> 00:13:06,800
Jesteśmy naprawdę tylko zarysowania powierzchni
z tego, co można zrobić z CSS tutaj.

279
00:13:06,800 --> 00:13:10,330
Na szczęście dokumentacja CSS
jest bardzo proste.

280
00:13:10,330 --> 00:13:14,000
Będziesz korzystać z kilku z jego
atrybuty, dość często.

281
00:13:14,000 --> 00:13:16,087
Te, z którymi rozmawialiśmy na temat
wcześniej w tym filmie.

282
00:13:16,087 --> 00:13:18,170
Istnieje kilka, które Ciebie
prawdopodobnie nie będzie korzystać ze wszystkich.

283
00:13:18,170 --> 00:13:19,469
I to jest w porządku, zbyt.

284
00:13:19,469 --> 00:13:22,010
Ale po prostu wiem, że istnieje
Wiele dokumentacji tam.

285
00:13:22,010 --> 00:13:25,110
Więc nawet jeśli nie obejmuje wszystko,
Z pewnością nie jesteś w lewo na własną rękę.

286
00:13:25,110 --> 00:13:26,780
Ale CSS jest naprawdę zabawne
eksperymentować z.

287
00:13:26,780 --> 00:13:29,040
I chciałbym gorąco zachęcamy
się bawić z stron internetowych,

288
00:13:29,040 --> 00:13:32,180
i zobacz, jak możesz je
wygląd i poprawić użytkownika

289
00:13:32,180 --> 00:13:34,790
doświadczenie odwiedzając stronę.

290
00:13:34,790 --> 00:13:35,710
Jestem Doug Lloyd.

291
00:13:35,710 --> 00:13:37,980
To CS50.

292
00:13:37,980 --> 00:13:40,151