1
00:00:00,000 --> 00:00:05,660
>> [MUSIC JOC]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Așa că haideți să o mai
video pentru a vorbi despre o singură limbă mai mult.

3
00:00:08,740 --> 00:00:10,800
De data aceasta vom vorbi despre CSS.

4
00:00:10,800 --> 00:00:13,460
Deci CSS, care este prescurtarea de la
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
este o altă limbă folosim
atunci când se construiește site-uri web.

6
00:00:16,149 --> 00:00:17,190
Gandeste-te ca aceasta.

7
00:00:17,190 --> 00:00:20,900
Daca HTML este ceea ce vom folosi pentru a organiza
conținut dorim pentru a pune pe pagina noastră,

8
00:00:20,900 --> 00:00:25,390
CSS este un instrument pe care le folosim, în general,
pentru a personaliza modul în care arata site-urile noastre,

9
00:00:25,390 --> 00:00:30,410
și modul în care experiența utilizatorului într-adevăr
este, interacționează cu site-ul nostru.

10
00:00:30,410 --> 00:00:32,535
>> Similar cu HTML, CSS este
nu un limbaj de programare.

11
00:00:32,535 --> 00:00:33,451
Ea nu are logică.

12
00:00:33,451 --> 00:00:34,595
Ea nu are variabile.

13
00:00:34,595 --> 00:00:38,890
Ea nu are nici un fel de care
flux lucruri legate de faptul ca C nu.

14
00:00:38,890 --> 00:00:40,150
Este o limbă styling.

15
00:00:40,150 --> 00:00:42,810
Și sintaxa sa este destul de
simplu, și doar descrie

16
00:00:42,810 --> 00:00:46,240
cum elementele noastre
Pagina au anumite HTML

17
00:00:46,240 --> 00:00:48,190
Elementele trebuie modificată.

18
00:00:48,190 --> 00:00:51,170
În acest scop, în cazul în care nu ați făcut
vizionat încă videoclipul nostru pe HTML,

19
00:00:51,170 --> 00:00:53,290
sau nu sunt familiarizati cu
HTML În general,

20
00:00:53,290 --> 00:00:57,430
ar putea dori să aruncăm o privire la care
în primul rând, pentru că această discuție de CSS

21
00:00:57,430 --> 00:01:00,700
va depinde de
unele cunoștințe de HTML.

22
00:01:00,700 --> 00:01:03,740
>> Deci, aici e un adevărat
simplu stylesheet CSS.

23
00:01:03,740 --> 00:01:06,480
Chiar dacă nu ați mai
programate cu CSS înainte,

24
00:01:06,480 --> 00:01:10,624
Sunt destul de sigur vă puteți da seama
exact ceea ce face această foaie de stil.

25
00:01:10,624 --> 00:01:11,290
Ce face?

26
00:01:11,290 --> 00:01:15,470
Ei bine, aplicat pe corpul nostru web
pagină, totul între tag-uri de corp

27
00:01:15,470 --> 00:01:19,631
pe HTML nostru, și-l stabilește
culoare de fundal a paginii de albastru.

28
00:01:19,631 --> 00:01:21,130
Ei bine, e un stylesheet foarte simplu.

29
00:01:21,130 --> 00:01:23,269
Este de fapt foarte uman
limbă prietenos, CSS.

30
00:01:23,269 --> 00:01:26,560
Deci, chiar dacă nu ați mai folosit înainte,
probabil ar putea ghici ce a făcut asta.

31
00:01:26,560 --> 00:01:30,140
De fapt, dacă ne-am încărcat o pagină, în cazul în care
acest foaie de stil a fost încorporat într-un fel,

32
00:01:30,140 --> 00:01:36,240
culoarea de fundal a paginii noastre ar
fie albastru, și nu standard alb.

33
00:01:36,240 --> 00:01:37,670
>> Deci, cum putem construi de stil?

34
00:01:37,670 --> 00:01:39,700
Ei bine în primul rând, trebuie să ne
identifica un selector.

35
00:01:39,700 --> 00:01:42,970
În ultimul exemplu,
care a fost selector corp.

36
00:01:42,970 --> 00:01:45,050
Apoi, avem un dialog deschis
bretele buclat, iar noi suntem

37
00:01:45,050 --> 00:01:48,410
O să înceapă definirea
stylesheet pentru selector.

38
00:01:48,410 --> 00:01:51,800
În între acolade, am
doar o listă de perechi de valori-cheie.

39
00:01:51,800 --> 00:01:56,205
Perechea valoare precedent a fost
fundal de culoare albastru și virgulă,

40
00:01:56,205 --> 00:01:57,830
dar am putea face mai mult și mai mult de acestea.

41
00:01:57,830 --> 00:02:02,330
Ai putea avea mai multe lucruri aplicarea
pentru că tag-ul, acest organism selector.

42
00:02:02,330 --> 00:02:05,960
Fiecare dintre ele este separată printr-o
punct și virgulă, iar noi numim fiecare dintre ele

43
00:02:05,960 --> 00:02:08,949
o declarație, o declarație CSS.

44
00:02:08,949 --> 00:02:12,410
Când am terminat cu toate WE styling
doresc să se aplice ca tag-ul special,

45
00:02:12,410 --> 00:02:15,300
avem doar o buclat de închidere
bretele pentru a termina foaia de stil,

46
00:02:15,300 --> 00:02:19,640
si am terminat definirea de stil
pentru că selector special.

47
00:02:19,640 --> 00:02:21,341
>> Care sunt unele proprietăți comune CSS?

48
00:02:21,341 --> 00:02:23,590
Ei bine, poate că doriți să puneți
un chenar în jurul ceva.

49
00:02:23,590 --> 00:02:26,850
Astfel încât să puteți spune, de frontieră,
care ar fi cheia dvs.,

50
00:02:26,850 --> 00:02:29,460
și apoi valorile ar fi,
ce stil, culoare, și lățimea

51
00:02:29,460 --> 00:02:30,209
vrei sa fie.

52
00:02:30,209 --> 00:02:33,530
Deci, stilul ar putea fi un solid
linie, o linie punctată, o linie punctată,

53
00:02:33,530 --> 00:02:36,020
o linie creasta, ceea ce ar fi linie ondulată.

54
00:02:36,020 --> 00:02:38,790
Poate vrei să-l aibă
fi albastru sau negru sau verde.

55
00:02:38,790 --> 00:02:41,490
Poate vrei sa fie
1 sau 2 sau 10 de pixeli lățime.

56
00:02:41,490 --> 00:02:43,254
Puteți specifica toate aceste lucruri.

57
00:02:43,254 --> 00:02:46,420
Poate doriți să setați fundalul
culoarea paginii într-un mod special.

58
00:02:46,420 --> 00:02:49,215
Am văzut deja că, stabilirea
de fond a organismului de a fi albastru.

59
00:02:49,215 --> 00:02:52,080
>> Apoi, puteți utiliza un cuvânt cheie,
astfel CSS are anumite culori

60
00:02:52,080 --> 00:02:55,950
care sunt construite în ea, albastru, verde,
negru, un foarte simplu de culori pe care le cunoaștem.

61
00:02:55,950 --> 00:02:59,110
Dar puteți specifica, de asemenea, orice
hex de culoare pe care doriți.

62
00:02:59,110 --> 00:03:05,190
Reamintim că culorile pot fi identificate
printr-un set de trei cifre hex

63
00:03:05,190 --> 00:03:08,500
la 0 la 255, rg și B, au
componentă roșu, verde și albastru.

64
00:03:08,500 --> 00:03:10,590
Și astfel încât să putem specifica
orice culoare ne-o dorim de,

65
00:03:10,590 --> 00:03:15,520
loc de a folosi albastru sau verde sau negru,
folosind lire și apoi șase cifre de hex,

66
00:03:15,520 --> 00:03:18,310
și care ne-ar da
culoarea șase cifre.

67
00:03:18,310 --> 00:03:19,850
Deci, asta e culoarea de fundal.

68
00:03:19,850 --> 00:03:21,975
>> Avem, de asemenea prim-plan
culoare, care este de obicei

69
00:03:21,975 --> 00:03:24,140
va fi textul paginii.

70
00:03:24,140 --> 00:03:28,850
Și ați putea face în mod similar ca
cu cuvânt cheie și sau șase cifre hex.

71
00:03:28,850 --> 00:03:32,140
Astfel încât să puteți specifica orice culoare
doresc pentru textul paginii

72
00:03:32,140 --> 00:03:36,370
împotriva unui anumit
culoare de fundal, deasupra.

73
00:03:36,370 --> 00:03:39,100
Asemenea, puteți schimba și să se ocupe
cu font, și modul în care textul

74
00:03:39,100 --> 00:03:40,400
este redat pe pagina.

75
00:03:40,400 --> 00:03:42,010
>> Astfel încât să puteți schimba dimensiunea fontului.

76
00:03:42,010 --> 00:03:46,320
Puteți folosi cuvinte-cheie, cum ar fi în plus,
foarte mic, sau xx mici, sau mijlocii,

77
00:03:46,320 --> 00:03:47,660
mare, și așa mai departe.

78
00:03:47,660 --> 00:03:50,750
Puteți folosi puncte fixe, 10
punct, punctul 12, și așa mai departe.

79
00:03:50,750 --> 00:03:55,850
Puteți folosi procente, 80%, 20%,
în cazul în care 100% este fontul implicit

80
00:03:55,850 --> 00:03:59,220
Dimensiunea, care este de obicei va
fi ceva de genul 11 ​​sau 12 puncte.

81
00:03:59,220 --> 00:04:01,659
Sau puteți chiar baza pe
din cel mai recent dimensiunea fontului.

82
00:04:01,659 --> 00:04:04,950
Dacă ai scris ceva și știi
ceea ce vrei este pentru ca acesta să fie mai mici,

83
00:04:04,950 --> 00:04:08,241
dar nu știu exact ce dimensiune
vrea sa fie, bine, vă pot spune doar,

84
00:04:08,241 --> 00:04:09,330
dimensiunea font mai mic.

85
00:04:09,330 --> 00:04:14,344
Și se va baza off de la,
doar deasupra, e dimensiunea fontului.

86
00:04:14,344 --> 00:04:15,760
Și puteți obține mai mici sau mai mari.

87
00:04:15,760 --> 00:04:18,390
Deci, există o mulțime de diferite
moduri de a specifica dimensiunea fontului.

88
00:04:18,390 --> 00:04:20,690
>> Puteți specifica, de asemenea, ceea ce
Familia de fonturi vrei.

89
00:04:20,690 --> 00:04:23,360
Dacă aveți un anumit
nume, există o modalitate în CSS--

90
00:04:23,360 --> 00:04:27,270
nu vom să vorbească despre asta
here-- pentru a defini un foarte specific font

91
00:04:27,270 --> 00:04:28,980
și încorpora în pagina ta.

92
00:04:28,980 --> 00:04:30,620
Puteți utiliza, de asemenea denumiri generice.

93
00:04:30,620 --> 00:04:33,540
Există o mulțime de fonturi web sigure
care sunt pre-definite în CSS.

94
00:04:33,540 --> 00:04:36,352
Și dacă sunteți un utilizator de Microsoft
Birou în ultimii 20 de ani,

95
00:04:36,352 --> 00:04:38,810
esti, probabil, familiarizat cu
o mulțime de aceste fonturi web sigure

96
00:04:38,810 --> 00:04:44,640
deja, Times New Roman, Arial,
Courier New, Georgia, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
si asa mai departe.

98
00:04:45,470 --> 00:04:47,170
Acestea sunt considerate toate fonturile web sigure.

99
00:04:47,170 --> 00:04:49,169
Și, de fapt, o parte din
motiv pentru care a ajuns să fie

100
00:04:49,169 --> 00:04:54,140
a fost să fie folosit pentru a face web-- fiecare pagină
au avut acces la acest set de fonturi implicit

101
00:04:54,140 --> 00:04:58,480
cu diverse serif-uri, si toate acestea
chestii font nu vom intra în,

102
00:04:58,480 --> 00:05:01,130
dar acestea sunt de obicei
accesibile în CSS-ul,

103
00:05:01,130 --> 00:05:04,029
chiar dacă nu
în caz contrar defini fonturile.

104
00:05:04,029 --> 00:05:07,070
În cele din urmă, puteți alinia textul,
în loc de a fi, în mod implicit, aliniat

105
00:05:07,070 --> 00:05:09,310
la stânga, ai putea
aliniați-l la dreapta,

106
00:05:09,310 --> 00:05:13,740
sau ai putea alinia centrat, sau
justificat astfel încât să lovit ambele margini.

107
00:05:13,740 --> 00:05:16,800
Deci, acestea sunt toate optiunile care le puteți utiliza
pentru a schimba ceea ce textul arata ca,

108
00:05:16,800 --> 00:05:20,120
și modul în care este afișat pe pagina ta.

109
00:05:20,120 --> 00:05:22,180
>> Selectoare tale nu
trebuie să fie Tags.

110
00:05:22,180 --> 00:05:25,539
Am văzut anterior o etichetă organism
selector, și selectorul tag

111
00:05:25,539 --> 00:05:26,580
arata exact ca asta.

112
00:05:26,580 --> 00:05:30,020
Tu numi tag-ul, și apoi
defini un stylesheet pentru acea etichetă.

113
00:05:30,020 --> 00:05:32,660
Dar puteți face, de asemenea, ceva
numit un selector ID.

114
00:05:32,660 --> 00:05:34,390
Un selector ID arata destul de similare.

115
00:05:34,390 --> 00:05:38,100
Dar observați, că acum nu mă folosind
un tag HTML, eu sunt, folosind, în acest caz,

116
00:05:38,100 --> 00:05:40,720
#unique, sau hash unic.

117
00:05:40,720 --> 00:05:42,930
Dacă vă amintiți de la noastre
video pe HTML, am vorbit

118
00:05:42,930 --> 00:05:45,620
despre modul în care tag-uri pot avea atribute.

119
00:05:45,620 --> 00:05:48,340
>> Și un atribut care se aplică
pentru destul de mult toate etichetele HTML,

120
00:05:48,340 --> 00:05:51,440
dar nu am vorbi despre asta,
este ceva numit un tag ID.

121
00:05:51,440 --> 00:05:55,250
Deci, acest special CSS ar
se aplică numai tag HTML care are

122
00:05:55,250 --> 00:05:58,530
un foarte specific de identitate, pe care le-ați numit.

123
00:05:58,530 --> 00:06:01,000
Deci, dacă aveți pe undeva
în codul dvs., undeva

124
00:06:01,000 --> 00:06:06,090
în fișierul dvs. HTML, o etichetă și
specifica ca un atribut pentru că tag-ul,

125
00:06:06,090 --> 00:06:09,060
ID este egal unic, acest
special stylesheet

126
00:06:09,060 --> 00:06:15,030
aici se vor aplica numai în între
că tag-ul cu ID-ul de unic.

127
00:06:15,030 --> 00:06:17,180
>> Puteți face, de asemenea, ceva
numit un selector de clasă.

128
00:06:17,180 --> 00:06:19,920
Deci, în afară de a avea
ID atribute, puteți, de asemenea

129
00:06:19,920 --> 00:06:23,130
adăuga un atribut de clasa a tag-uri HTML.

130
00:06:23,130 --> 00:06:27,140
Și atunci când utilizați un atribut de clasă,
acesta poate fi aplicat la mai multe etichete.

131
00:06:27,140 --> 00:06:31,880
Deci, dacă aveți mai multe lucruri pe care
sunt similare, poate vrei să spui,

132
00:06:31,880 --> 00:06:35,890
tag deschis bla, bla, bla,
bla, clasa egal de studenți.

133
00:06:35,890 --> 00:06:38,190
Și apoi acest special
stylesheet-ar aplica

134
00:06:38,190 --> 00:06:42,041
pentru fiecare tag a căror clasă este de studenți.

135
00:06:42,041 --> 00:06:44,290
În acest caz, vom seta
culoarea de fundal la galben,

136
00:06:44,290 --> 00:06:46,706
si am stabilit opacitate, care
este o etichetă nu am vorbi despre,

137
00:06:46,706 --> 00:06:52,510
ci doar se ocupă cu modul transparent
ceva este, la 70%, în acest caz.

138
00:06:52,510 --> 00:06:54,430
>> Există două opțiuni pentru
scris de stil.

139
00:06:54,430 --> 00:06:56,680
Aveți posibilitatea să le scrie
direct în HTML

140
00:06:56,680 --> 00:06:59,690
prin plasarea de foi de stil
între tag-uri de stil.

141
00:06:59,690 --> 00:07:03,850
Și aceste etichete de stil merge în interiorul
etichetele capul paginii web.

142
00:07:03,850 --> 00:07:08,240
Poate mai preferat mod de a face
este de a scrie un fișier .css separat,

143
00:07:08,240 --> 00:07:12,360
și apoi link-ul în ta
document folosind tag-uri link-ul.

144
00:07:12,360 --> 00:07:14,690
Tag-uri Link, din nou, sunt
diferit de hyperlink-uri,

145
00:07:14,690 --> 00:07:16,760
dacă vă amintiți de la video noastră de HTML.

146
00:07:16,760 --> 00:07:19,030
Și tag-uri link-ul sunt modul în care
trage în fișiere separate.

147
00:07:19,030 --> 00:07:23,900
Se fel de echivalentul a
#include pentru programare web.

148
00:07:23,900 --> 00:07:27,140
>> Deci, haideți să aruncăm o privire la table.HTML.

149
00:07:27,140 --> 00:07:29,380
Dacă vă amintiți de la noastre
Film HTML, am arătat

150
00:07:29,380 --> 00:07:32,000
un exemplu de o foarte
multiplicare simplu

151
00:07:32,000 --> 00:07:35,160
tabel care arata destul de
urât, și poate nu e

152
00:07:35,160 --> 00:07:38,650
un mod de a face mai bine cu
CSS, pentru a face să arate de fapt

153
00:07:38,650 --> 00:07:41,120
mai mult ca o multiplicare
masă, sau ceva

154
00:07:41,120 --> 00:07:43,730
care nu este doar lipite
cu nici o diviziune reală

155
00:07:43,730 --> 00:07:45,532
între rândurile și coloanele.

156
00:07:45,532 --> 00:07:47,490
Deci, haideți să peste cap de la
CS50 IDE, și să ia o privire

157
00:07:47,490 --> 00:07:50,780
la modul în care pot CSS, un fel de, tweak
ceea ce am început cu înainte,

158
00:07:50,780 --> 00:07:53,290
și de a face ceva mult mai bine.

159
00:07:53,290 --> 00:07:55,650
>> Deci suntem în CS50 IDE
acum, și în cazul în care nefamiliare,

160
00:07:55,650 --> 00:07:58,710
vom trage în această
tabel care pagina HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML practic
doar definește conținutul

162
00:08:01,090 --> 00:08:05,044
de un multiple-- trebuia sa fie
un tabel de multiplicare patru de patru.

163
00:08:05,044 --> 00:08:06,210
E destul de simplu.

164
00:08:06,210 --> 00:08:09,410
Și noi ar putea crede că aceasta ar
arata destul de bine organizat.

165
00:08:09,410 --> 00:08:15,277
Dar, de fapt, atunci când am examina această pagină,
vom vedea că e un fel de urât, nu?

166
00:08:15,277 --> 00:08:16,860
În mod clar, avem rânduri și coloane de aici.

167
00:08:16,860 --> 00:08:18,350
Există un fel de separare.

168
00:08:18,350 --> 00:08:20,040
Dar nu este o separare semnificativ.

169
00:08:20,040 --> 00:08:23,105
Nu ne obtinerea de fapt
prea multe informații aici.

170
00:08:23,105 --> 00:08:25,730
Și nu există nici o separare între
rânduri și coloane în ceea ce privește

171
00:08:25,730 --> 00:08:28,460
a normelor orizontale sau verticale.

172
00:08:28,460 --> 00:08:31,530
Probabil am putea face acest lucru
uite un pic mai bine.

173
00:08:31,530 --> 00:08:32,934
Deci, hai să încercăm.

174
00:08:32,934 --> 00:08:34,559
Deci, am de gând să închidă această filă aici.

175
00:08:34,559 --> 00:08:37,434
Și am de gând să închidă table.HTML mea,
și am o alta versiune aici

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

177
00:08:39,490 --> 00:08:40,655
Vom deschide în sus.

178
00:08:40,655 --> 00:08:42,530
Corpul paginii este
destul de mult la fel,

179
00:08:42,530 --> 00:08:44,238
dar m-am schimbat o
pic la partea de sus.

180
00:08:44,238 --> 00:08:47,132
Și voi derula în sus aici.

181
00:08:47,132 --> 00:08:49,340
Observați că de data asta, eu sunt
folosind tag-uri de stil integrate.

182
00:08:49,340 --> 00:08:53,550
Am deschis o etichetă stil, și eu sunt acum
definind o foaie de stil CSS doar în interiorul

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

184
00:08:54,310 --> 00:08:56,310
Am o foaie de stil care spune, de masă.

185
00:08:56,310 --> 00:08:58,170
Asta e selector meu tag.

186
00:08:58,170 --> 00:09:01,340
Eu nu sunt, folosind punct sau hash,
pe care aș face dacă aș

187
00:09:01,340 --> 00:09:03,710
a fost folosind un ID sau un selector de clasă.

188
00:09:03,710 --> 00:09:06,190
Am un tabel here-- selector tag.

189
00:09:06,190 --> 00:09:10,090
Acest stil este de gând să
se aplică fiecare tag masă.

190
00:09:10,090 --> 00:09:14,950
Se pare că vreau să pun un
pixel larg, de frontieră albastru,

191
00:09:14,950 --> 00:09:15,779
interior masa mea.

192
00:09:15,779 --> 00:09:18,320
Asta sună ca ar probabil
ajuta situația, nu?

193
00:09:18,320 --> 00:09:20,320
Vom avea
lucrurile arata mult mai bine.

194
00:09:20,320 --> 00:09:21,190
Deci acest lucru este bine.

195
00:09:21,190 --> 00:09:23,540
Stilistic, am doar
încorporat stylesheet meu aici.

196
00:09:23,540 --> 00:09:25,100
Este cu siguranță un
mod acceptabil de a face acest lucru.

197
00:09:25,100 --> 00:09:26,391
Să vedem ce arata asta ca.

198
00:09:26,391 --> 00:09:29,790
Așa că o să mă întorc aici, și
Voi va examina table2.HTML meu.

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

200
00:09:32,430 --> 00:09:36,470
Ei bine, asta nu e chiar ceea ce am vrut,
dar este exact ceea ce am cerut.

201
00:09:36,470 --> 00:09:39,530
Am spus că acest stil este
O să se aplice la masa noastră.

202
00:09:39,530 --> 00:09:43,810
Masa noastră are acum un pixel unul
largă de frontieră, solid albastru în jurul ei.

203
00:09:43,810 --> 00:09:46,237
Nu ne obtinerea de fapt
la celulele de masă.

204
00:09:46,237 --> 00:09:47,570
Noi doar obtinerea la masa.

205
00:09:47,570 --> 00:09:49,310
Deci, CSS lucrat.

206
00:09:49,310 --> 00:09:51,890
Ea a aplicat o
stylesheet la masa noastră.

207
00:09:51,890 --> 00:09:53,981
Dar nu prea face
ceea ce ne-am dorit să facem.

208
00:09:53,981 --> 00:09:55,730
Cum ajungem să facem
ceea ce vrem să facem?

209
00:09:55,730 --> 00:09:59,287
>> Ei bine, haideți să aruncăm o privire la o mai
versiune de acest lucru în table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Așa că am de gând să închidă doar aceste file.

211
00:10:00,870 --> 00:10:03,890
Mă duc să mă întorc aici pentru a-mi
copac dosar, și să deschidă table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Din nou, o să se uite destul de
similară aici la început.

214
00:10:10,350 --> 00:10:14,460
Dar notificare, de data aceasta, în loc să utilizați
o foaie de stiluri încorporate chiar acolo,

215
00:10:14,460 --> 00:10:18,870
Am de gând să link în
stylesheet folosind tag-ul link-ul.

216
00:10:18,870 --> 00:10:22,480
Deci, eu sunt aparent leagă într-un
stylesheet numit tables.CSS,

217
00:10:22,480 --> 00:10:25,090
și acest bine este egal
stylesheet doar înseamnă: de bine,

218
00:10:25,090 --> 00:10:28,645
ceea ce este acest fisier relativ la ceea ce
Sunt doing-- este un stylesheet că eu sunt

219
00:10:28,645 --> 00:10:29,821
folosind pentru pagina mea.

220
00:10:29,821 --> 00:10:32,320
Deci, dacă eu chiar vreau să văd ce
Fac cu CSS aici,

221
00:10:32,320 --> 00:10:35,010
Am nevoie pentru a merge deschis care
fișier table.CSS, de asemenea.

222
00:10:35,010 --> 00:10:37,490
Deci ne întoarcem aici
din nou în copac noastre fișier.

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

224
00:10:38,660 --> 00:10:40,490
Vom pop deschise.

225
00:10:40,490 --> 00:10:43,070
Acum vedem un pic de CSS.

226
00:10:43,070 --> 00:10:45,630
Aparent, am un cuplu
de lucruri se întâmplă aici.

227
00:10:45,630 --> 00:10:48,950
Se pare că vreau să pun o perioada de cinci
pixel larg, chenar roșu solid,

228
00:10:48,950 --> 00:10:50,287
în jurul valorii de masa mea.

229
00:10:50,287 --> 00:10:52,870
Știm deja că se întâmplă
pentru a merge doar pe perimetrul.

230
00:10:52,870 --> 00:10:56,180
Am văzut că în table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Cu fiecare rând, am
aparent doriți să specificați

232
00:10:58,770 --> 00:11:01,950
că înălțimea rând este de 50 de pixeli mare.

233
00:11:01,950 --> 00:11:05,680
Deci, pentru fiecare rând, amintiți-vă
asta e ceea ce face tag-ul tr,

234
00:11:05,680 --> 00:11:08,550
Fac o 50 de pixeli mare.

235
00:11:08,550 --> 00:11:09,804
>> În cele din urmă, am acest comentariu.

236
00:11:09,804 --> 00:11:11,470
Și acest lucru este modul în care vom face comentarii în CSS.

237
00:11:11,470 --> 00:11:16,174
Este foarte similar cu profite bloc
Comentariile sintaxă stele slash.

238
00:11:16,174 --> 00:11:17,090
Tot textul pe care doriți.

239
00:11:17,090 --> 00:11:19,470
Nu e nici o bară oblică slash, deși în CSS.

240
00:11:19,470 --> 00:11:23,400
Pentru scurte comentarii inline, avem
pentru a utiliza acest format special aici.

241
00:11:23,400 --> 00:11:26,830
Se pare că fac o
mulțime de lucruri în Tag-urile mele TD.

242
00:11:26,830 --> 00:11:29,710
Amintiți-vă etichete TD, sau de masă
date, care de fapt sunt doar

243
00:11:29,710 --> 00:11:32,210
coloanele din interiorul
rânduri noastre, și aparent

244
00:11:32,210 --> 00:11:35,090
pentru fiecare bucată de date
în masa mea, vreau

245
00:11:35,090 --> 00:11:38,850
pentru a seta culoarea de fundal a
fie negru, culoarea sa fie de culoare albă,

246
00:11:38,850 --> 00:11:40,320
Culoarea este culoarea prim-plan.

247
00:11:40,320 --> 00:11:42,360
Deci, aceasta va fi
textul pagina mea.

248
00:11:42,360 --> 00:11:45,140
Vreau font mare, 22
punctul font, și vreau

249
00:11:45,140 --> 00:11:47,001
să fie din familia de fonturi, Georgia.

250
00:11:47,001 --> 00:11:48,750
Deci, eu nu am de gând să
au fontul implicit.

251
00:11:48,750 --> 00:11:51,820
Am de gând să se precizeze Georgia, care
este una dintre acele fonturi web sigure

252
00:11:51,820 --> 00:11:53,830
pe care le-am văzut înainte.

253
00:11:53,830 --> 00:11:57,284
Vreau textul meu să fie aliniate
central, in mijlocul careului,

254
00:11:57,284 --> 00:11:59,450
Nu vreau să fie lăsat
aliniat sau aliniat dreapta.

255
00:11:59,450 --> 00:12:03,461
Și vreau lățime meu coloană
să fie de 50 de pixeli lățime, de asemenea.

256
00:12:03,461 --> 00:12:05,210
Să aruncăm o privire la
ceea ce arata ca acest,

257
00:12:05,210 --> 00:12:07,470
și a vedea dacă acest lucru este, poate, o îmbunătățire.

258
00:12:07,470 --> 00:12:12,890
Deci, am de gând să merg la table3.HTML, care
Reamintim, include table.CSS ca o legătură,

259
00:12:12,890 --> 00:12:14,830
și vom examina.

260
00:12:14,830 --> 00:12:16,800
Asta e mult mai bine, nu?

261
00:12:16,800 --> 00:12:20,004
Aceasta este de fapt începe să arate o
mai mult ca un tabel de multiplicare.

262
00:12:20,004 --> 00:12:21,920
Am că chenar roșu
în jurul valorii de masa mea, dar acum

263
00:12:21,920 --> 00:12:26,700
Am de asemenea, au specificat că
fiecare rând este de 50 de pixeli lățime,

264
00:12:26,700 --> 00:12:30,220
sau este de 50 de pixeli tall-- scuză
mine-- fiecare coloană este de 50 pixeli lățime.

265
00:12:30,220 --> 00:12:34,251
Datele din fiecare coloană, și numai
datele, are un fundal negru.

266
00:12:34,251 --> 00:12:36,000
Deci, de aceea cei
linii albe sunt acolo.

267
00:12:36,000 --> 00:12:38,836
Deoarece spațiul în
între toate aceste celule,

268
00:12:38,836 --> 00:12:40,710
nu este o frontieră în
și de sine, e doar

269
00:12:40,710 --> 00:12:43,170
Sunt de umplere numai în
Celulele, care de fapt

270
00:12:43,170 --> 00:12:46,310
face granițele tabel, care
aparent exista tot timpul, ea

271
00:12:46,310 --> 00:12:47,887
a fost linii albe doar subțiri.

272
00:12:47,887 --> 00:12:48,720
Acum sunt vizibile.

273
00:12:48,720 --> 00:12:50,380
Acum, ei pop de pe pe ecran.

274
00:12:50,380 --> 00:12:52,920
Și astfel încât acesta este un foarte simplu
stylesheet care le-am aplicat,

275
00:12:52,920 --> 00:12:56,850
și acum masa mea arata mult mai mult ca
un tabel patru de către patru multiplicare,

276
00:12:56,850 --> 00:13:00,950
în loc de o mizerie doar amestecate, în cazul în care
totul este în mod clar rânduri și coloane,

277
00:13:00,950 --> 00:13:03,717
dar nu super-bine organizat.

278
00:13:03,717 --> 00:13:06,800
Suntem într-adevăr zgarieturi doar suprafata
de ceea ce se poate face cu CSS aici.

279
00:13:06,800 --> 00:13:10,330
Din fericire documentația CSS
este destul de simplă.

280
00:13:10,330 --> 00:13:14,000
Vei folosi mai multe dintre sale
atribute, destul de frecvent.

281
00:13:14,000 --> 00:13:16,087
Cei despre care am vorbit
mai devreme în acest videoclip.

282
00:13:16,087 --> 00:13:18,170
Există mai multe pe care le
probabil, nu va folosi toate.

283
00:13:18,170 --> 00:13:19,469
Și asta e bine, de asemenea.

284
00:13:19,469 --> 00:13:22,010
Dar doar știu, că există o
mulțime de documentare acolo.

285
00:13:22,010 --> 00:13:25,110
Deci, chiar dacă nu am acoperi totul,
cu siguranță nu ești lăsat pe cont propriu.

286
00:13:25,110 --> 00:13:26,780
Dar CSS este foarte distractiv
de a experimenta cu.

287
00:13:26,780 --> 00:13:29,040
Și v-aș încuraja puternic
sa te joci cu paginile dvs. de web,

288
00:13:29,040 --> 00:13:32,180
și a vedea cum le puteți face
arata si se simt de a îmbunătăți utilizator

289
00:13:32,180 --> 00:13:34,790
Experiența pe pagina ta.

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

291
00:13:35,710 --> 00:13:37,980
Acest lucru este CS50.

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