1
00:00:00,000 --> 00:00:05,660
>> [Mūzikas atskaņošanai]

2
00:00:05,660 --> 00:00:08,740
>> Doug LLOYD: Tātad pieņemsim vēl viens
video runāt par vēl vienu valodu.

3
00:00:08,740 --> 00:00:10,800
Šoreiz mēs runājam par CSS.

4
00:00:10,800 --> 00:00:13,460
Tātad CSS, kas ir īss
Kaskādes Style Sheets,

5
00:00:13,460 --> 00:00:16,149
cita valoda mēs izmantojam
kad būvējot mājas lapas.

6
00:00:16,149 --> 00:00:17,190
Padomā par to, kā šis.

7
00:00:17,190 --> 00:00:20,900
Ja HTML ir tas, ko mēs izmantojam, lai organizētu
saturu mēs vēlamies likt mūsu lapā,

8
00:00:20,900 --> 00:00:25,390
CSS ir instruments, kas mums parasti izmanto
pielāgot to, kā mūsu mājas lapas izskatās,

9
00:00:25,390 --> 00:00:30,410
un cik lietotāja pieredzi patiešām
ir, mijiedarbojas ar mūsu mājas lapā.

10
00:00:30,410 --> 00:00:32,535
>> Līdzīgi kā HTML, CSS ir
nav programmēšanas valoda.

11
00:00:32,535 --> 00:00:33,451
Tas nav loģiski.

12
00:00:33,451 --> 00:00:34,595
Tas nav mainīgie.

13
00:00:34,595 --> 00:00:38,890
Tai nav nekāda veida, kas
plūsmas, kas saistītas lietas, C dara.

14
00:00:38,890 --> 00:00:40,150
Tas ir stils valoda.

15
00:00:40,150 --> 00:00:42,810
Un tās sintakse ir diezgan
vienkāršs, un tikai apraksta

16
00:00:42,810 --> 00:00:46,240
kā pret mūsu
lapa ir zināma HTML

17
00:00:46,240 --> 00:00:48,190
elementi būtu jāgroza.

18
00:00:48,190 --> 00:00:51,170
Tālab, ja jums nav
Pagaidām noskatījos mūsu video par HTML,

19
00:00:51,170 --> 00:00:53,290
vai ir svešs ar
HTML vispār, jums

20
00:00:53,290 --> 00:00:57,430
varat apskatīt, kas
pirmkārt, tāpēc, ka šī diskusija CSS

21
00:00:57,430 --> 00:01:00,700
gatavojas atkarīgs no
dažas zināšanas par HTML.

22
00:01:00,700 --> 00:01:03,740
>> Tātad, šeit ir patiešām
vienkāršs CSS stilu.

23
00:01:03,740 --> 00:01:06,480
Pat ja jūs nekad neesmu
programmēt ar CSS pirms,

24
00:01:06,480 --> 00:01:10,624
Es esmu diezgan pārliecināts, ka jūs varat izrēķināt
tieši tas, ko šis stilu dara.

25
00:01:10,624 --> 00:01:11,290
Ko tas dara?

26
00:01:11,290 --> 00:01:15,470
Nu, ko uz šo ķermeni mūsu mājas
lapa, viss starp ķermeņa tagiem

27
00:01:15,470 --> 00:01:19,631
mūsu HTML, un tā nosaka
fona krāsa šīs lapas uz zilu.

28
00:01:19,631 --> 00:01:21,130
Nu, tas ir ļoti vienkāršs stilu.

29
00:01:21,130 --> 00:01:23,269
Tas ir tiešām ļoti cilvēks
draudzīgi valoda, CSS.

30
00:01:23,269 --> 00:01:26,560
Tātad, pat ja jūs nekad neesmu lietojis to pirms,
jūs, iespējams, varētu uzminēt, kas tas bija.

31
00:01:26,560 --> 00:01:30,140
Patiesībā, ja mēs ielādes lapu, kur
šis stilu tika iestrādāta kaut kā,

32
00:01:30,140 --> 00:01:36,240
fona krāsa mūsu lapā būtu
būt zila, un nav standarta balta.

33
00:01:36,240 --> 00:01:37,670
>> Tātad, kā mēs veidot stilu?

34
00:01:37,670 --> 00:01:39,700
Nu, pirmkārt, mums ir
identificēt selektoru.

35
00:01:39,700 --> 00:01:42,970
Pēdējā piemēram,
ka selektors bija ķermenis.

36
00:01:42,970 --> 00:01:45,050
Tad mums ir atvērts
cirtaini lencēm, un mēs esam

37
00:01:45,050 --> 00:01:48,410
gatavojas sākt definējot
stylesheet šim selektoru.

38
00:01:48,410 --> 00:01:51,800
Starp cirtaini lencēm, mēs
vienkārši ir saraksts ar galveno vērtību pārus.

39
00:01:51,800 --> 00:01:56,205
Iepriekšējā vērtība pāris bija
fona krāsa zila semikols,

40
00:01:56,205 --> 00:01:57,830
bet mēs varētu darīt vairāk un vairāk no tiem.

41
00:01:57,830 --> 00:02:02,330
Jūs varētu būt vairāki lietas, piemērojot
uz šo atzīmi, šajā selektora organismā.

42
00:02:02,330 --> 00:02:05,960
Katrs no tiem ir atdalītas ar
semikols, un mēs aicinām katru no tām

43
00:02:05,960 --> 00:02:08,949
deklarācija, CSS deklarācija.

44
00:02:08,949 --> 00:02:12,410
Kad mēs esam darījuši visu ieveidošanas mēs
vēlas pieteikties uz šo konkrēto tag,

45
00:02:12,410 --> 00:02:15,300
mums vienkārši ir noslēguma cirtaini
lencēm, lai izbeigtu stilu,

46
00:02:15,300 --> 00:02:19,640
un mēs esam darījuši definēt stilu
par konkrēto selektoru.

47
00:02:19,640 --> 00:02:21,341
>> Kas ir dažas kopējas CSS īpašības?

48
00:02:21,341 --> 00:02:23,590
Nu, varbūt jūs vēlaties, lai
robežu ap kaut ko.

49
00:02:23,590 --> 00:02:26,850
Tātad jūs varat teikt, robeža,
tas būtu jūsu atslēga,

50
00:02:26,850 --> 00:02:29,460
un tad jūsu vērtības būtu,
kāda stila, krāsu, un platums

51
00:02:29,460 --> 00:02:30,209
jūs vēlaties, lai to.

52
00:02:30,209 --> 00:02:33,530
Tātad stils varētu būt ciets
line, punktota līnija, pārtrauktu līniju,

53
00:02:33,530 --> 00:02:36,020
vagas līnija, kas būtu viļņota līnija.

54
00:02:36,020 --> 00:02:38,790
Varbūt jūs vēlaties, lai to
būt zilā vai melnā vai zaļā krāsā.

55
00:02:38,790 --> 00:02:41,490
Varbūt jūs vēlaties, lai to
1 vai 2 vai 10 pikseļi plats.

56
00:02:41,490 --> 00:02:43,254
Jūs varat norādīt visas šīs lietas.

57
00:02:43,254 --> 00:02:46,420
Varbūt jūs vēlaties, lai uzstādītu fona
krāsu jūsu lapu kādā konkrētā veidā.

58
00:02:46,420 --> 00:02:49,215
Mēs jau redzējām, ka, iestatot
fona struktūru, kas būs zilā krāsā.

59
00:02:49,215 --> 00:02:52,080
>> Tad jūs varat izmantot atslēgas vārdu,
tik CSS ir noteiktas krāsas

60
00:02:52,080 --> 00:02:55,950
kas ir iebūvēti tā, zils, zaļš,
melns, ļoti vienkāršs krāsas mēs zinām.

61
00:02:55,950 --> 00:02:59,110
Bet jūs varat arī norādīt jebkuru
hex krāsu, ka jūs vēlaties.

62
00:02:59,110 --> 00:03:05,190
Atgādināt, ka krāsas var identificēt
ar virkni trīs heksadecimālskaitļus

63
00:03:05,190 --> 00:03:08,500
no 0 līdz 255, RG un B,
sarkans, zaļš, zils un sastāvdaļa.

64
00:03:08,500 --> 00:03:10,590
Un tā mēs varam norādīt
jebkura krāsa mēs gribam, ko,

65
00:03:10,590 --> 00:03:15,520
nevis izmantojot zila vai zaļa vai melna,
izmantojot mārciņu un pēc tam sešus cipari hex,

66
00:03:15,520 --> 00:03:18,310
un kas varētu dot mums
sešu ciparu krāsa.

67
00:03:18,310 --> 00:03:19,850
Tātad tas ir fona krāsu.

68
00:03:19,850 --> 00:03:21,975
>> Mums ir arī jaunās zināšanas
krāsa, kas ir parasti

69
00:03:21,975 --> 00:03:24,140
būs tekstu jūsu lapā.

70
00:03:24,140 --> 00:03:28,850
Un jūs varētu līdzīgi darīt
ar atslēgas vārdu un vai sešciparu hex.

71
00:03:28,850 --> 00:03:32,140
Tātad jūs varat norādīt jebkuru krāsu jūs
vēlaties, lai tekstu jūsu lapā

72
00:03:32,140 --> 00:03:36,370
pret konkrētu
fona krāsa, augšā.

73
00:03:36,370 --> 00:03:39,100
Jūs varat arī mainīt un risināt
ar fontu, un to, kā teksts

74
00:03:39,100 --> 00:03:40,400
tiek padarīti lapā.

75
00:03:40,400 --> 00:03:42,010
>> Tātad jūs varat mainīt savu fonta lielumu.

76
00:03:42,010 --> 00:03:46,320
Jūs varat izmantot atslēgas vārdus, piemēram, papildus,
extra mazs, vai xx maza, vai vidēja,

77
00:03:46,320 --> 00:03:47,660
liels, un tā tālāk.

78
00:03:47,660 --> 00:03:50,750
Jūs varat izmantot fiksētus punktus, 10
punkts, 12. punkts, un tā tālāk.

79
00:03:50,750 --> 00:03:55,850
Jūs varat izmantot procentus, 80%, 20%,
kur 100% ir noklusējuma fonts

80
00:03:55,850 --> 00:03:59,220
lielums, kas parasti notiek, lai
kaut kas līdzīgs 11 vai 12 punktiem.

81
00:03:59,220 --> 00:04:01,659
Vai jūs pat varat pamatot to off
no pēdējās fonta lielumu.

82
00:04:01,659 --> 00:04:04,950
Ja jūs tikko rakstīja kaut ko, un jūs zināt
ko jūs vēlaties, ir, lai tas būtu mazāks,

83
00:04:04,950 --> 00:04:08,241
bet jūs nezināt, ko tieši izmērs Tev
vēlaties, lai to, labi, jūs varat vienkārši pateikt,

84
00:04:08,241 --> 00:04:09,330
fonta izmērs mazāks.

85
00:04:09,330 --> 00:04:14,344
Un tas būs jāpamato nost no,
tikai augšas, tas ir fonta izmērs.

86
00:04:14,344 --> 00:04:15,760
Un jūs varat saņemt mazāku vai lielāku.

87
00:04:15,760 --> 00:04:18,390
Tātad tur ir daudz dažādi
veidi, lai norādītu burtu lielumu.

88
00:04:18,390 --> 00:04:20,690
>> Varat arī norādīt, ko
fontu ģimene jūs vēlaties.

89
00:04:20,690 --> 00:04:23,360
Ja jums ir īpaši
vārds, tur ir veids, CSS--

90
00:04:23,360 --> 00:04:27,270
mēs nebrauksim, lai runātu par to
here-- definēt ļoti īpašu fontu

91
00:04:27,270 --> 00:04:28,980
un iegult to savā lapā.

92
00:04:28,980 --> 00:04:30,620
Jūs varat arī izmantot sugas nosaukumiem.

93
00:04:30,620 --> 00:04:33,540
Tur ir daudz tīmekļa drošas fontus
kas ir iepriekš noteikti CSS.

94
00:04:33,540 --> 00:04:36,352
Un, ja esat lietotājs Microsoft
Office pēdējo 20 gadu laikā,

95
00:04:36,352 --> 00:04:38,810
Jūs, iespējams, iepazinies ar
daudz no šīm tīmekļa drošas fontiem

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

97
00:04:44,640 --> 00:04:45,470
un tā tālāk.

98
00:04:45,470 --> 00:04:47,170
Tie tiek uzskatīti web drošas fontus.

99
00:04:47,170 --> 00:04:49,169
Un tiešām, daļa no
iemesls, viņi kļuva

100
00:04:49,169 --> 00:04:54,140
tika, ko izmanto, lai padarītu web-- katru lapu
bija piekļuve šai noklusējuma noteikt fontu

101
00:04:54,140 --> 00:04:58,480
ar dažādiem serifs, un tas viss
fonts sīkumi mums nebūs iekļuvuši,

102
00:04:58,480 --> 00:05:01,130
bet tie parasti
pieejamu savā CSS,

103
00:05:01,130 --> 00:05:04,029
pat tad, ja jums nav
pretējā gadījumā noteikt fontus.

104
00:05:04,029 --> 00:05:07,070
Visbeidzot, jūs varat pielāgot savu tekstu,
tā vietā, lai tas ir, pēc noklusējuma, jāsaskaņo

105
00:05:07,070 --> 00:05:09,310
pa kreisi, jūs varētu
saskaņot to pa labi,

106
00:05:09,310 --> 00:05:13,740
vai jūs varētu saskaņot to centrēts, vai
pamatots, lai tas skāra gan peļņu.

107
00:05:13,740 --> 00:05:16,800
Tātad tie ir visas iespējas, jūs varat izmantot
mainīt to, ko jūsu teksta izskatās,

108
00:05:16,800 --> 00:05:20,120
un kā tas ir redzams uz jūsu lapu.

109
00:05:20,120 --> 00:05:22,180
>> Jūsu selektori nav
jābūt tikai tagus.

110
00:05:22,180 --> 00:05:25,539
Mēs jau iepriekš redzējām ķermeņa tag
selektors, un tag selektors

111
00:05:25,539 --> 00:05:26,580
izskatās tieši tāpat.

112
00:05:26,580 --> 00:05:30,020
Jūs nosaukums tag, un tad jūs
definēt stilu šim tag.

113
00:05:30,020 --> 00:05:32,660
Bet jūs varat arī darīt kaut ko
sauc par ID selektoru.

114
00:05:32,660 --> 00:05:34,390
ID selektors izskatās diezgan līdzīgi.

115
00:05:34,390 --> 00:05:38,100
Bet paziņo, ka tagad es neesmu, izmantojot
HTML tag, es esmu, izmantojot, šajā gadījumā,

116
00:05:38,100 --> 00:05:40,720
#unique vai hash unikāls.

117
00:05:40,720 --> 00:05:42,930
Ja jūs atceraties no mūsu
video uz HTML, mēs runājām

118
00:05:42,930 --> 00:05:45,620
par to, kā tagus var būt atribūti.

119
00:05:45,620 --> 00:05:48,340
>> Un viens atribūts, kas attiecas
diezgan daudz visiem HTML tagiem,

120
00:05:48,340 --> 00:05:51,440
bet mēs neesam par to runāt,
ir kaut kas ko sauc par ID tag.

121
00:05:51,440 --> 00:05:55,250
Tātad šis īpaši CSS būtu
attiecas tikai uz HTML tagu, kas ir

122
00:05:55,250 --> 00:05:58,530
ļoti specifisks ID, ka esat nosaukts.

123
00:05:58,530 --> 00:06:01,000
Tātad, ja jums ir kaut kur
Jūsu kodu, kaut kur

124
00:06:01,000 --> 00:06:06,090
Jūsu HTML failu, birku un jums
norādīt kā atribūts uz šo frāzi,

125
00:06:06,090 --> 00:06:09,060
ID vienāds unikāls, tas
īpaši stilu

126
00:06:09,060 --> 00:06:15,030
šeit attieksies tikai starp
ka tag ar ID unikāls.

127
00:06:15,030 --> 00:06:17,180
>> Jūs varat arī darīt kaut ko
sauc klases selektoru.

128
00:06:17,180 --> 00:06:19,920
Tā papildus tam
ID atribūti, varat arī

129
00:06:19,920 --> 00:06:23,130
pievienot klases atribūtu HTML tagus.

130
00:06:23,130 --> 00:06:27,140
Un, kad jūs izmantojat klases atribūtu,
to var piemērot vairākiem tagiem.

131
00:06:27,140 --> 00:06:31,880
Tātad, ja jums ir vairākas lietas, kas
ir līdzīgi, varbūt jūs vēlaties teikt,

132
00:06:31,880 --> 00:06:35,890
open tag blah, blah, blah,
blah, klase vienāds studentus.

133
00:06:35,890 --> 00:06:38,190
Un tad tas īpaši
stilu attiektos

134
00:06:38,190 --> 00:06:42,041
katram tag kura klase ir studenti.

135
00:06:42,041 --> 00:06:44,290
Šajā gadījumā, mēs gribētu iestatīt
fona krāsa dzeltena,

136
00:06:44,290 --> 00:06:46,706
un mēs gribētu noteikt necaurredzamību, kas
ir tag mēs nerunājām par,

137
00:06:46,706 --> 00:06:52,510
bet tikai nodarbojas ar to, kā caurspīdīgs
kaut kas ir, līdz 70%, kas šajā gadījumā.

138
00:06:52,510 --> 00:06:54,430
>> Ir divas iespējas
rakstīšanas stilu.

139
00:06:54,430 --> 00:06:56,680
Jūs varat rakstīt tos
tieši jūsu HTML

140
00:06:56,680 --> 00:06:59,690
ievietojot stilu
starp stila tagiem.

141
00:06:59,690 --> 00:07:03,850
Un tie stila tags iet iekšā
galvu tagus jūsu mājas lapā.

142
00:07:03,850 --> 00:07:08,240
Varbūt vairāk vēlamais veids, kā to izdarīt
tas ir rakstīt atsevišķu .CSS failu,

143
00:07:08,240 --> 00:07:12,360
un pēc tam saistīt to savā
dokumentu, izmantojot saiti tagus.

144
00:07:12,360 --> 00:07:14,690
Link tags, atkal, ir
atšķiras no hipersaites,

145
00:07:14,690 --> 00:07:16,760
Ja jūs atceraties no mūsu video HTML.

146
00:07:16,760 --> 00:07:19,030
Un saite tagi ir, kā mēs
ieraut atsevišķos failos.

147
00:07:19,030 --> 00:07:23,900
Tas kārtot līdzīgu ekvivalentu
Šis #include web programmēšanu.

148
00:07:23,900 --> 00:07:27,140
>> Tātad, pieņemsim to apskatīt table.HTML.

149
00:07:27,140 --> 00:07:29,380
Ja jūs atceraties no mūsu
HTML video, es parādīja

150
00:07:29,380 --> 00:07:32,000
piemērs ļoti
vienkāršs pavairošana

151
00:07:32,000 --> 00:07:35,160
Tabulā, kas izskatījās diezgan
neglīts, un varbūt tur ir

152
00:07:35,160 --> 00:07:38,650
veids, kā padarīt to labāk ar
CSS, lai tā tiešām izskatās

153
00:07:38,650 --> 00:07:41,120
vairāk kā reizināšanas
galda, vai kaut kas

154
00:07:41,120 --> 00:07:43,730
kas ir ne tikai iestrēdzis kopā
bez faktisko sadalījumu

155
00:07:43,730 --> 00:07:45,532
starp rindām un kolonnām.

156
00:07:45,532 --> 00:07:47,490
Tātad pieņemsim dodies uz
CS50 IDE, un to apskatīt

157
00:07:47,490 --> 00:07:50,780
pie kā CSS var kārtot, kniebiens
ko mēs sākām ar pirms,

158
00:07:50,780 --> 00:07:53,290
un dara to kaut kas daudz labāks.

159
00:07:53,290 --> 00:07:55,650
>> Tātad mēs esam CS50 IDE
tagad, un, ja svešs,

160
00:07:55,650 --> 00:07:58,710
mēs uzvilkt šajā
Tabulā, kas HTML lapas.

161
00:07:58,710 --> 00:08:01,090
Table.HTML būtībā
tikai definē saturu

162
00:08:01,090 --> 00:08:05,044
kādas multiple-- tā bija jābūt
četru līdz četru reizināšanas tabulu.

163
00:08:05,044 --> 00:08:06,210
Tas ir diezgan vienkārši.

164
00:08:06,210 --> 00:08:09,410
Un mēs varētu domāt, ka tas
izskatās diezgan labi organizēta.

165
00:08:09,410 --> 00:08:15,277
Bet patiesībā, ja mēs priekšskatīt šo lapu,
mēs redzam, ka tas ir sava veida neglīts, vai ne?

166
00:08:15,277 --> 00:08:16,860
Protams, mēs ir rindas un kolonnas šeit.

167
00:08:16,860 --> 00:08:18,350
Ir daži no atdalīšanas veida.

168
00:08:18,350 --> 00:08:20,040
Bet tas nav nozīmīgs atdalīšana.

169
00:08:20,040 --> 00:08:23,105
Mēs esam ne faktiski kļūst
pārāk daudz informācijas šeit.

170
00:08:23,105 --> 00:08:25,730
Un tur nav nodalīšana
rindas un kolonnas ziņā

171
00:08:25,730 --> 00:08:28,460
Horizontālo vai vertikālo noteikumiem.

172
00:08:28,460 --> 00:08:31,530
Mēs varētu droši veikt šo
izskatās mazliet labāk.

173
00:08:31,530 --> 00:08:32,934
Tātad pamēģināsim.

174
00:08:32,934 --> 00:08:34,559
Tāpēc es esmu gatavojas slēgt šo cilni šeit.

175
00:08:34,559 --> 00:08:37,434
Un es esmu gatavojas slēgt savu table.HTML,
un man ir cits versija šeit

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

177
00:08:39,490 --> 00:08:40,655
Mēs atvērt, ka līdz.

178
00:08:40,655 --> 00:08:42,530
Ķermenis lapas ir
diezgan daudz to pašu,

179
00:08:42,530 --> 00:08:44,238
bet es esmu mainījušies
mazliet augšpusē.

180
00:08:44,238 --> 00:08:47,132
Un es ņemšu ritinātu šeit.

181
00:08:47,132 --> 00:08:49,340
Ievērojiet, ka šoreiz, es esmu
Izmantojot iegulto stila tagus.

182
00:08:49,340 --> 00:08:53,550
Esmu atvērts stila tagu, un es esmu tagad
definēt CSS stilu tikai iekšpusē

183
00:08:53,550 --> 00:08:54,310
no tā.

184
00:08:54,310 --> 00:08:56,310
Man ir stilu, kas saka, galdu.

185
00:08:56,310 --> 00:08:58,170
Tas ir mans tag selektors.

186
00:08:58,170 --> 00:09:01,340
Es neesmu, izmantojot dot vai hašišu,
ko es varētu darīt, ja es

187
00:09:01,340 --> 00:09:03,710
bija, izmantojot ID vai klases selektoru.

188
00:09:03,710 --> 00:09:06,190
Man ir tag selektora here-- tabulu.

189
00:09:06,190 --> 00:09:10,090
Šis stils ir gatavojas
attiecas uz katru galda tag.

190
00:09:10,090 --> 00:09:14,950
Acīmredzot es gribu likt vienu
pixel plata, cieta zils robežu,

191
00:09:14,950 --> 00:09:15,779
iekšā mana galda.

192
00:09:15,779 --> 00:09:18,320
Tas izklausās tā, iespējams,
palīdzēt šo situāciju, vai ne?

193
00:09:18,320 --> 00:09:20,320
Mēs ejam, lai būtu
lietas izskatās daudz labāk.

194
00:09:20,320 --> 00:09:21,190
Tātad tas ir labi.

195
00:09:21,190 --> 00:09:23,540
Stilistiski, es esmu tikai
iestrādāta manu stilu šeit.

196
00:09:23,540 --> 00:09:25,100
Tas noteikti ir
pieņemams veids, kā to darīt.

197
00:09:25,100 --> 00:09:26,391
Let 's redzēt, kā tas izskatās.

198
00:09:26,391 --> 00:09:29,790
Tāpēc es iešu atpakaļ uz leju šeit, un
Es būs preview manu table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Nu, tas nav gluži tas, ko es gribēju,
bet tas ir tieši tas, ko mēs lūdzām.

201
00:09:36,470 --> 00:09:39,530
Mēs teicām, ka šis stils ir
gatavojas pieteikties uz mūsu galda.

202
00:09:39,530 --> 00:09:43,810
Mūsu tabula šobrīd ir viena pikseli
plata, cieta zila apmale ap to.

203
00:09:43,810 --> 00:09:46,237
Mēs esam ne faktiski kļūst
pie galda šūnām.

204
00:09:46,237 --> 00:09:47,570
Mēs esam tikai iegūt pie galda.

205
00:09:47,570 --> 00:09:49,310
Tātad CSS strādāja.

206
00:09:49,310 --> 00:09:51,890
Tā ir piemērota
stilu uz mūsu galda.

207
00:09:51,890 --> 00:09:53,981
Bet nav gluži darīt
tas, ko mēs vēlējāmies to darīt.

208
00:09:53,981 --> 00:09:55,730
Kā mēs nokļūt darīt
ko mēs gribam to darīt?

209
00:09:55,730 --> 00:09:59,287
>> Nu, pieņemsim to apskatīt vairāk vienā
versija to table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Tāpēc es esmu tikai gatavojas slēgt šīs cilnes.

211
00:10:00,870 --> 00:10:03,890
Es iešu atpakaļ pār šeit, lai mana
failu koku, un atvērt table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Atkal, tas notiek, lai izskatās diezgan
Līdzīga šeit sākumā.

214
00:10:10,350 --> 00:10:14,460
Bet paziņojums, šoreiz, nevis izmantojot
stilu iestrādāta tiesības tur,

215
00:10:14,460 --> 00:10:18,870
Es esmu gatavojas saiti
stilu, izmantojot saiti tagu.

216
00:10:18,870 --> 00:10:22,480
Tāpēc es esmu acīmredzot saistot ar
stilu sauc tables.CSS,

217
00:10:22,480 --> 00:10:25,090
un tas arī ir vienāds
stilu tikko means-- labi,

218
00:10:25,090 --> 00:10:28,645
kāda ir šo failu, salīdzinot ar to, ko
Es esmu doing-- ir stilu, kas es esmu

219
00:10:28,645 --> 00:10:29,821
izmantojot manu lapu.

220
00:10:29,821 --> 00:10:32,320
Tātad, ja es tiešām gribu redzēt, ko
Es esmu dara ar CSS šeit,

221
00:10:32,320 --> 00:10:35,010
Man vajag, lai iet open ka
table.CSS failu, kā arī.

222
00:10:35,010 --> 00:10:37,490
Tātad mēs iet atpakaļ vairāk nekā šeit
atkal mūsu failu koku.

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

224
00:10:38,660 --> 00:10:40,490
Mēs pop to atvērtu.

225
00:10:40,490 --> 00:10:43,070
Tagad mēs redzam mazliet par CSS.

226
00:10:43,070 --> 00:10:45,630
Acīmredzot, man ir pāris
lietas notiek šeit.

227
00:10:45,630 --> 00:10:48,950
Es acīmredzot gribu likt piecas
pixel plata, cieta sarkanā robeža,

228
00:10:48,950 --> 00:10:50,287
ap mana galda.

229
00:10:50,287 --> 00:10:52,870
Mēs jau zinām, ka tas notiek
tikai iet uz perimetru.

230
00:10:52,870 --> 00:10:56,180
Mēs redzējām, ka table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Ar katru rindu, es
acīmredzot vēlas norādīt

232
00:10:58,770 --> 00:11:01,950
ka rindas augstums ir 50 pikseļus augsts.

233
00:11:01,950 --> 00:11:05,680
Tātad par katru kārtas, atcerieties
tas ko tr tag dara,

234
00:11:05,680 --> 00:11:08,550
Es esmu padarot to 50 pikseļus augsts.

235
00:11:08,550 --> 00:11:09,804
>> Visbeidzot, man ir šo komentāru.

236
00:11:09,804 --> 00:11:11,470
Un tas ir tas, kā mēs komentārus CSS.

237
00:11:11,470 --> 00:11:16,174
Tas ir ļoti līdzīgs sagrābt bloku
komentāri sintakse slash zvaigžņu.

238
00:11:16,174 --> 00:11:17,090
Visu tekstu vēlaties.

239
00:11:17,090 --> 00:11:19,470
Nav slash slash lai gan CSS.

240
00:11:19,470 --> 00:11:23,400
Attiecībā uz īstermiņa inline komentārus, mums ir
izmantot šo konkrēto formātu šeit.

241
00:11:23,400 --> 00:11:26,830
Izskatās, ka es esmu dara
lietas manā td tagus daudz.

242
00:11:26,830 --> 00:11:29,710
Atcerēties td tagus, vai galda
dati, kas patiešām ir tikai

243
00:11:29,710 --> 00:11:32,210
kolonnas iekšpusē
Mūsu rindas, un acīmredzot

244
00:11:32,210 --> 00:11:35,090
par katru gabalu datu
jo mana galda, es gribu

245
00:11:35,090 --> 00:11:38,850
lai uzstādītu fona krāsu
melns, kamēr krāsa ir balta,

246
00:11:38,850 --> 00:11:40,320
krāsa ir priekšplāna krāsu.

247
00:11:40,320 --> 00:11:42,360
Tātad tas būs
teksts manu lapu.

248
00:11:42,360 --> 00:11:45,140
Es gribu liels fontu, 22
punkts fontu, un es gribu

249
00:11:45,140 --> 00:11:47,001
ka tas ir no fontu saimes, Gruzija.

250
00:11:47,001 --> 00:11:48,750
Tāpēc es neesmu gatavojas
ir noklusējuma fontu.

251
00:11:48,750 --> 00:11:51,820
Es esmu gatavojas, lai norādītu Gruzijai, kas
ir viena no tām tīmekļa drošas fontus

252
00:11:51,820 --> 00:11:53,830
ka mēs esam redzējuši iepriekš.

253
00:11:53,830 --> 00:11:57,284
Es vēlos, lai mana teksts ir jāsaskaņo
centralizēti, vidū kastes,

254
00:11:57,284 --> 00:11:59,450
Es nevēlos, lai to pa kreisi
jāsaskaņo vai pa labi jāsaskaņo.

255
00:11:59,450 --> 00:12:03,461
Un es gribu savu kolonnu platumu
jābūt 50 pikseļus plats, kā arī.

256
00:12:03,461 --> 00:12:05,210
Pieņemsim to apskatīt
ko tas izskatās,

257
00:12:05,210 --> 00:12:07,470
un redzēt, ja tas ir iespējams, ir uzlabojums.

258
00:12:07,470 --> 00:12:12,890
Tāpēc es iešu uz table3.HTML, kas
Atsaukt, ietver table.CSS kā saite,

259
00:12:12,890 --> 00:12:14,830
un mēs apskatīt to.

260
00:12:14,830 --> 00:12:16,800
Tas ir daudz labāk, vai ne?

261
00:12:16,800 --> 00:12:20,004
Tas tiešām sāk izskatīties
vairāk kā reizināšanas tabulu daudz.

262
00:12:20,004 --> 00:12:21,920
Man ir šī sarkanā robeža
ap mana galda, bet tagad

263
00:12:21,920 --> 00:12:26,700
Man arī ir norādīts, ka
Katrā rindā ir 50 pikseļi plats,

264
00:12:26,700 --> 00:12:30,220
vai tas ir 50 pikseļi tall-- attaisnojums
me-- katra kolonna ir 50 pikseļus plats.

265
00:12:30,220 --> 00:12:34,251
Katras kolonnas datus, un tikai
dati, ir melna fona.

266
00:12:34,251 --> 00:12:36,000
Tātad, tāpēc tie
baltas līnijas ir tur.

267
00:12:36,000 --> 00:12:38,836
Tā kā telpa
starp visām šīm šūnām,

268
00:12:38,836 --> 00:12:40,710
tas nav robeža
un pati par sevi, tā ir tikai

269
00:12:40,710 --> 00:12:43,170
Es esmu tikai aizpildot
šūnas, kas faktiski

270
00:12:43,170 --> 00:12:46,310
padara robežas tabulas, kas
acīmredzot pastāv visi kopā, to

271
00:12:46,310 --> 00:12:47,887
bija tikai plānas baltas līnijas.

272
00:12:47,887 --> 00:12:48,720
Tagad viņi ir redzami.

273
00:12:48,720 --> 00:12:50,380
Tagad tie pop off uz ekrāna.

274
00:12:50,380 --> 00:12:52,920
Un tā tas ir ļoti vienkāršs
stilu, ka es esmu piemērots,

275
00:12:52,920 --> 00:12:56,850
un tagad mana galda izskatās daudz vairāk, piemēram,
četru līdz četru reizināšanas tabulu,

276
00:12:56,850 --> 00:13:00,950
tā vietā, lai vienkārši jumbled putru, kur
viss ir skaidri rindas un kolonnas,

277
00:13:00,950 --> 00:13:03,717
bet ne super labi organizēta.

278
00:13:03,717 --> 00:13:06,800
Mēs esam tiešām tikai nesaskrāpē virsmas
par to, ko jūs varat darīt ar CSS šeit.

279
00:13:06,800 --> 00:13:10,330
Par laimi CSS dokumentācija
ir diezgan vienkārši.

280
00:13:10,330 --> 00:13:14,000
Jūs izmantojat vairākas tās
atribūti, diezgan bieži.

281
00:13:14,000 --> 00:13:16,087
Tiem, mēs runājām par
iepriekš šajā video.

282
00:13:16,087 --> 00:13:18,170
Ir vairāki, kas jums
droši vien neizmantos visu.

283
00:13:18,170 --> 00:13:19,469
Un tas ir labi, too.

284
00:13:19,469 --> 00:13:22,010
Bet tikai zinu, ka tur ir
Dokumentācijas daudz kas tur.

285
00:13:22,010 --> 00:13:25,110
Tātad, pat ja mēs nesedza visu,
jūs, protams, ne pa kreisi, par savu.

286
00:13:25,110 --> 00:13:26,780
Bet CSS ir patiešām jautri
eksperimentēt ar.

287
00:13:26,780 --> 00:13:29,040
Un es būtu ļoti iesakām
spēlēt aptuveni ar jūsu mājas lapu,

288
00:13:29,040 --> 00:13:32,180
un redzēt, kā jūs varat padarīt tos
izskatīties un justies, lai uzlabotu lietotāju

289
00:13:32,180 --> 00:13:34,790
pieredze apmeklē jūsu lapu.

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

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

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