1
00:00:00,000 --> 00:00:05,660
>> [Bermain muzik]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Jadi mari kita mengambil satu lagi
video untuk bercakap tentang satu bahasa lagi.

3
00:00:08,740 --> 00:00:10,800
Kali ini kita akan bercakap tentang CSS.

4
00:00:10,800 --> 00:00:13,460
Jadi CSS, yang merupakan singkatan bagi
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
adalah satu lagi bahasa yang kita gunakan
apabila membina laman web.

6
00:00:16,149 --> 00:00:17,190
Fikirkanlah seperti ini.

7
00:00:17,190 --> 00:00:20,900
Jika HTML adalah apa yang kita gunakan untuk menganjurkan
kandungan kita mahu meletakkan di laman kami,

8
00:00:20,900 --> 00:00:25,390
CSS adalah alat yang kita biasanya menggunakan
untuk menyesuaikan bagaimana laman web kami melihat,

9
00:00:25,390 --> 00:00:30,410
dan bagaimana pengalaman pengguna yang benar-benar
adalah, berinteraksi dengan laman web kami.

10
00:00:30,410 --> 00:00:32,535
>> Sama seperti HTML, CSS adalah
bukan bahasa pengaturcaraan.

11
00:00:32,535 --> 00:00:33,451
Ia tidak mempunyai logik.

12
00:00:33,451 --> 00:00:34,595
Ia tidak mempunyai pembolehubah.

13
00:00:34,595 --> 00:00:38,890
Ia tidak mempunyai apa-apa jenis yang
mengalir perkara yang berkaitan yang C tidak.

14
00:00:38,890 --> 00:00:40,150
Ia adalah satu bahasa gaya.

15
00:00:40,150 --> 00:00:42,810
Dan sintaks yang agak
mudah, dan hanya menggambarkan

16
00:00:42,810 --> 00:00:46,240
bagaimana unsur-unsur kami
halaman mempunyai HTML tertentu

17
00:00:46,240 --> 00:00:48,190
unsur-unsur yang perlu diubah suai.

18
00:00:48,190 --> 00:00:51,170
Untuk itu, jika anda tidak mempunyai
belum menonton video kami pada HTML,

19
00:00:51,170 --> 00:00:53,290
atau tidak biasa dengan
HTML umumnya, anda

20
00:00:53,290 --> 00:00:57,430
mungkin mahu mengambil lihat yang
pertama, kerana perbincangan ini CSS

21
00:00:57,430 --> 00:01:00,700
akan bergantung kepada
pengetahuan HTML.

22
00:01:00,700 --> 00:01:03,740
>> Jadi di sini adalah benar-benar
lembaran gaya CSS mudah.

23
00:01:03,740 --> 00:01:06,480
Walaupun anda tidak pernah
diprogramkan dengan CSS sebelum ini,

24
00:01:06,480 --> 00:01:10,624
Saya agak pasti anda boleh memikirkan
apa lembaran gaya ini tidak.

25
00:01:10,624 --> 00:01:11,290
Apa yang ia buat?

26
00:01:11,290 --> 00:01:15,470
Nah, digunakan untuk badan kita
halaman, semua yang di antara tag badan

27
00:01:15,470 --> 00:01:19,631
pada HTML kami, dan ia menetapkan
Warna latar belakang halaman itu untuk biru.

28
00:01:19,631 --> 00:01:21,130
Well, ia adalah satu lembaran gaya sangat mudah.

29
00:01:21,130 --> 00:01:23,269
Ia sebenarnya sangat manusia
bahasa mesra, CSS.

30
00:01:23,269 --> 00:01:26,560
Jadi, walaupun anda tidak pernah digunakan sebelum ini,
anda mungkin boleh meneka apa yang lakukan.

31
00:01:26,560 --> 00:01:30,140
Malah, jika kita dimuatkan halaman, di mana
lembaran gaya ini telah tertanam entah bagaimana,

32
00:01:30,140 --> 00:01:36,240
warna latar belakang halaman kami akan
menjadi biru, dan bukan putih standard.

33
00:01:36,240 --> 00:01:37,670
>> Jadi bagaimana kita membina lembaran gaya?

34
00:01:37,670 --> 00:01:39,700
Well pertama, kita perlu
mengenalpasti pemilih.

35
00:01:39,700 --> 00:01:42,970
Dalam contoh yang lepas,
pemilih itu adalah badan.

36
00:01:42,970 --> 00:01:45,050
Maka kita perlu terbuka
kerinting, dan kami

37
00:01:45,050 --> 00:01:48,410
akan mula menentukan
lembaran gaya untuk pemilih itu.

38
00:01:48,410 --> 00:01:51,800
Di antara pendakap kerinting, kita
hanya mempunyai senarai pasangan nilai utama.

39
00:01:51,800 --> 00:01:56,205
Pasangan nilai sebelumnya adalah
warna latar belakang koma bertitik biru,

40
00:01:56,205 --> 00:01:57,830
tetapi kita boleh melakukan lebih banyak dan lebih daripada ini.

41
00:01:57,830 --> 00:02:02,330
Anda boleh mempunyai pelbagai perkara yang memohon
itu tag, bahawa badan pemilih.

42
00:02:02,330 --> 00:02:05,960
Setiap seorang dari mereka dipisahkan oleh
koma bertitik, dan kita panggil mereka masing-masing

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

44
00:02:08,949 --> 00:02:12,410
Apabila kita selesai dengan semua kita penggayaan
ingin memohon kepada tag yang tertentu,

45
00:02:12,410 --> 00:02:15,300
kita hanya mempunyai kerinting menutup
memberanikan untuk menamatkan stylesheet,

46
00:02:15,300 --> 00:02:19,640
dan kami sudah selesai menentukan stylesheet
bagi pemilih tersebut.

47
00:02:19,640 --> 00:02:21,341
>> Apakah ciri-ciri CSS biasa?

48
00:02:21,341 --> 00:02:23,590
Yah, mungkin anda ingin meletakkan
sempadan di sekeliling sesuatu.

49
00:02:23,590 --> 00:02:26,850
Jadi, anda boleh berkata, sempadan,
yang akan menjadi kunci anda,

50
00:02:26,850 --> 00:02:29,460
dan kemudian nilai-nilai anda akan menjadi,
apa gaya, warna, dan lebar

51
00:02:29,460 --> 00:02:30,209
anda mahu ia menjadi.

52
00:02:30,209 --> 00:02:33,530
Jadi gaya boleh menjadi pepejal
garis, garis putus-putus, garis putus-putus,

53
00:02:33,530 --> 00:02:36,020
garis rabung, yang akan menjadi garis berombak.

54
00:02:36,020 --> 00:02:38,790
Mungkin anda mahu untuk memilikinya
menjadi biru atau hitam atau hijau.

55
00:02:38,790 --> 00:02:41,490
Mungkin anda mahu ia menjadi
1 atau 2 atau 10 piksel lebar.

56
00:02:41,490 --> 00:02:43,254
Anda boleh menentukan semua perkara-perkara.

57
00:02:43,254 --> 00:02:46,420
Mungkin anda mahu untuk menetapkan latar belakang
warna halaman anda dengan cara yang tertentu.

58
00:02:46,420 --> 00:02:49,215
Kita sudah melihat bahawa, menetapkan
latar belakang badan menjadi biru.

59
00:02:49,215 --> 00:02:52,080
>> Kemudian anda boleh menggunakan kata kunci,
supaya CSS mempunyai warna-warna tertentu

60
00:02:52,080 --> 00:02:55,950
yang dibina ke dalamnya, biru, hijau,
hitam, warna yang sangat mudah kita ketahui.

61
00:02:55,950 --> 00:02:59,110
Tetapi anda juga boleh menyatakan apa-apa
warna hex yang anda suka.

62
00:02:59,110 --> 00:03:05,190
Ingat bahawa warna boleh dikenal pasti
oleh satu set tiga nombor hex

63
00:03:05,190 --> 00:03:08,500
0-255, rg dan b,
merah, hijau, dan biru komponen.

64
00:03:08,500 --> 00:03:10,590
Dan supaya kita boleh menentukan
mana-mana warna kita mahu dengan,

65
00:03:10,590 --> 00:03:15,520
bukannya menggunakan biru atau hijau atau hitam,
menggunakan pound dan kemudian enam digit hex,

66
00:03:15,520 --> 00:03:18,310
dan yang akan memberi kita
warna enam digit.

67
00:03:18,310 --> 00:03:19,850
Jadi itulah warna latar belakang.

68
00:03:19,850 --> 00:03:21,975
>> Kami juga mempunyai latar depan
warna, yang biasanya

69
00:03:21,975 --> 00:03:24,140
akan menjadi teks halaman anda.

70
00:03:24,140 --> 00:03:28,850
Dan anda begitu juga boleh berbuat demikian
dengan kata kunci dan atau enam digit hex.

71
00:03:28,850 --> 00:03:32,140
Jadi, anda boleh menentukan apa-apa warna yang anda
mahu teks halaman anda

72
00:03:32,140 --> 00:03:36,370
terhadap yang tertentu
warna latar belakang, sehingga di atas.

73
00:03:36,370 --> 00:03:39,100
Anda juga boleh berubah dan menangani
dengan fon, dan cara teks

74
00:03:39,100 --> 00:03:40,400
dituliskan pada halaman.

75
00:03:40,400 --> 00:03:42,010
>> Jadi anda boleh menukar saiz fon anda.

76
00:03:42,010 --> 00:03:46,320
Anda boleh menggunakan kata kunci, seperti tambahan,
tambahan kecil, atau xx kecil, atau sederhana,

77
00:03:46,320 --> 00:03:47,660
besar, dan sebagainya.

78
00:03:47,660 --> 00:03:50,750
Anda boleh menggunakan titik tetap, 10
mata, 12 mata, dan sebagainya.

79
00:03:50,750 --> 00:03:55,850
Anda boleh menggunakan peratusan, 80%, 20%,
di mana 100% adalah fon piawai

80
00:03:55,850 --> 00:03:59,220
saiz, yang biasanya akan
menjadi sesuatu seperti 11 atau 12 mata.

81
00:03:59,220 --> 00:04:01,659
Atau anda juga boleh mendasarkannya off
saiz fon yang terkini.

82
00:04:01,659 --> 00:04:04,950
Jika anda hanya menulis sesuatu dan anda tahu
apa yang anda perlu adalah untuk ia menjadi lebih kecil,

83
00:04:04,950 --> 00:04:08,241
tetapi anda tidak tahu apa saiz yang anda
mahu ia menjadi, baik, anda boleh hanya berkata,

84
00:04:08,241 --> 00:04:09,330
saiz fon yang lebih kecil.

85
00:04:09,330 --> 00:04:14,344
Dan ia akan mendasarkan off dari,
hanya sehingga atas, ia saiz font.

86
00:04:14,344 --> 00:04:15,760
Dan anda boleh mendapatkan lebih kecil atau lebih besar.

87
00:04:15,760 --> 00:04:18,390
Jadi ada banyak yang berbeza
cara-cara untuk menentukan saiz font.

88
00:04:18,390 --> 00:04:20,690
>> Anda juga boleh menentukan apa
font yang anda mahu.

89
00:04:20,690 --> 00:04:23,360
Jika anda mempunyai tertentu
nama, ada cara di CSS--

90
00:04:23,360 --> 00:04:27,270
kita tidak akan bercakap mengenainya
sini-- untuk menentukan font yang sangat khusus

91
00:04:27,270 --> 00:04:28,980
dan membenamkan ke dalam halaman anda.

92
00:04:28,980 --> 00:04:30,620
Anda juga boleh menggunakan nama-nama generik.

93
00:04:30,620 --> 00:04:33,540
Ada banyak web fon selamat
yang pra-ditakrifkan dalam CSS.

94
00:04:33,540 --> 00:04:36,352
Dan jika anda adalah pengguna Microsoft
Pejabat dalam tempoh 20 tahun yang lalu,

95
00:04:36,352 --> 00:04:38,810
anda mungkin biasa dengan
banyak ini web fon selamat

96
00:04:38,810 --> 00:04:44,640
sudah, Times New Roman, Arial,
Kurier baru, Georgia, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
dan sebagainya.

98
00:04:45,470 --> 00:04:47,170
Semua orang-orang yang dianggap web fon selamat.

99
00:04:47,170 --> 00:04:49,169
Dan sebenarnya, sebahagian daripada
Sebab-sebab mereka telah menjadi

100
00:04:49,169 --> 00:04:54,140
telah digunakan untuk membuat web-- setiap halaman
akses kepada lalai ini telah menetapkan fon

101
00:04:54,140 --> 00:04:58,480
dengan pelbagai serifs, dan semua ini
barangan font kami tidak akan masuk ke dalam,

102
00:04:58,480 --> 00:05:01,130
tetapi ini biasanya
diakses dalam CSS anda,

103
00:05:01,130 --> 00:05:04,029
walaupun anda tidak melakukan
jika tidak menentukan fon.

104
00:05:04,029 --> 00:05:07,070
Akhir sekali, anda boleh menjajarkan teks anda,
bukan ia yang, secara lalai, sejajar

105
00:05:07,070 --> 00:05:09,310
ke kiri, anda boleh
menyelaraskan ke kanan,

106
00:05:09,310 --> 00:05:13,740
atau anda boleh menyelaraskan berpusat, atau
wajar supaya ia memukul kedua-dua margin.

107
00:05:13,740 --> 00:05:16,800
Jadi mereka adalah semua pilihan yang anda boleh menggunakan
untuk mengubah apa yang teks anda kelihatan seperti,

108
00:05:16,800 --> 00:05:20,120
dan bagaimana ia dipaparkan pada halaman anda.

109
00:05:20,120 --> 00:05:22,180
>> Pemilih-Mu tidak
perlu klik sahaja.

110
00:05:22,180 --> 00:05:25,539
Kami sebelum ini melihat tag badan
pemilih, dan pemilih tag

111
00:05:25,539 --> 00:05:26,580
tidak kelihatan begitu sahaja.

112
00:05:26,580 --> 00:05:30,020
Anda nama tag, dan kemudian anda
menentukan lembaran gaya untuk tag itu.

113
00:05:30,020 --> 00:05:32,660
Tetapi anda juga boleh melakukan sesuatu
dipanggil pemilih ID.

114
00:05:32,660 --> 00:05:34,390
Pemilih ID kelihatan agak sama.

115
00:05:34,390 --> 00:05:38,100
Tetapi notis, yang sekarang saya tidak menggunakan
tag HTML, saya menggunakan, dalam kes ini,

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

117
00:05:40,720 --> 00:05:42,930
Jika anda ingat dari kami
video mengenai HTML, kita bercakap

118
00:05:42,930 --> 00:05:45,620
tentang bagaimana tag boleh mempunyai sifat-sifat.

119
00:05:45,620 --> 00:05:48,340
>> Dan satu sifat yang boleh digunakan
untuk cukup banyak semua tag HTML,

120
00:05:48,340 --> 00:05:51,440
tetapi kita tidak bercakap mengenainya,
adalah sesuatu yang dinamakan tag ID.

121
00:05:51,440 --> 00:05:55,250
Jadi CSS khusus ini akan
terpakai hanya bagi tag HTML yang mempunyai

122
00:05:55,250 --> 00:05:58,530
ID yang sangat khusus, yang anda telah dinamakan.

123
00:05:58,530 --> 00:06:01,000
Jadi, jika anda mempunyai tempat
dalam kod anda, di suatu tempat

124
00:06:01,000 --> 00:06:06,090
dalam fail HTML anda, tag dan anda
nyatakan sebagai sifat tag itu,

125
00:06:06,090 --> 00:06:09,060
ID sama unik, ini
lembaran gaya tertentu

126
00:06:09,060 --> 00:06:15,030
di sini hanya akan digunakan di antara
bahawa tag dengan ID yang unik.

127
00:06:15,030 --> 00:06:17,180
>> Anda juga boleh melakukan sesuatu
dipanggil pemilih kelas.

128
00:06:17,180 --> 00:06:19,920
Jadi di samping mempunyai
ID sifat-sifat, anda juga boleh

129
00:06:19,920 --> 00:06:23,130
menambah atribut kelas untuk tag HTML.

130
00:06:23,130 --> 00:06:27,140
Dan apabila anda menggunakan atribut kelas,
ia boleh digunakan untuk pelbagai tag.

131
00:06:27,140 --> 00:06:31,880
Jadi jika anda mempunyai beberapa perkara yang
adalah sama, mungkin anda mahu katakan,

132
00:06:31,880 --> 00:06:35,890
tag terbuka blah, blah, blah,
blah, kelas sama pelajar.

133
00:06:35,890 --> 00:06:38,190
Dan kemudian tertentu
lembaran gaya akan memohon

134
00:06:38,190 --> 00:06:42,041
kepada setiap tag yang kelas adalah pelajar.

135
00:06:42,041 --> 00:06:44,290
Dalam kes ini, kita akan menetapkan
warna latar belakang kepada kuning,

136
00:06:44,290 --> 00:06:46,706
dan kita akan menetapkan opacity, yang
adalah tag kami tidak bercakap tentang,

137
00:06:46,706 --> 00:06:52,510
tetapi hanya berkaitan dengan bagaimana telus
sesuatu itu, kepada 70%, dalam kes ini.

138
00:06:52,510 --> 00:06:54,430
>> Ada dua pilihan untuk
menulis lembaran gaya.

139
00:06:54,430 --> 00:06:56,680
Anda boleh menulis mereka
terus ke dalam HTML anda

140
00:06:56,680 --> 00:06:59,690
dengan meletakkan lembaran gaya
di antara tag gaya.

141
00:06:59,690 --> 00:07:03,850
Dan orang-orang tag gaya pergi di dalam
tag kepala laman web anda.

142
00:07:03,850 --> 00:07:08,240
Cara yang mungkin lebih pilihan untuk melakukan
ia adalah untuk menulis fail Css yang berasingan,

143
00:07:08,240 --> 00:07:12,360
dan kemudian menghubungkannya ke dalam anda
dokumen menggunakan tag link.

144
00:07:12,360 --> 00:07:14,690
Tag Link, sekali lagi, adalah
berbeza daripada hyperlink,

145
00:07:14,690 --> 00:07:16,760
jika anda ingat dari video kami HTML.

146
00:07:16,760 --> 00:07:19,030
Dan tag link adalah bagaimana kita
tarik dalam fail berasingan.

147
00:07:19,030 --> 00:07:23,900
Ia jenis seperti bersamaan
yang #include untuk pengaturcaraan web.

148
00:07:23,900 --> 00:07:27,140
>> Oleh itu, mari kita lihat pada table.HTML.

149
00:07:27,140 --> 00:07:29,380
Jika anda ingat dari kami
Video HTML, saya menunjukkan

150
00:07:29,380 --> 00:07:32,000
satu contoh yang sangat
pendaraban mudah

151
00:07:32,000 --> 00:07:35,160
jadual yang kelihatan cukup
hodoh, dan mungkin ada

152
00:07:35,160 --> 00:07:38,650
cara untuk menjadikannya lebih baik dengan
CSS, untuk membuat ia benar-benar melihat

153
00:07:38,650 --> 00:07:41,120
lebih seperti pendaraban
meja, atau sesuatu

154
00:07:41,120 --> 00:07:43,730
yang tidak hanya melekat
tanpa bahagian yang sebenar

155
00:07:43,730 --> 00:07:45,532
antara baris dan lajur.

156
00:07:45,532 --> 00:07:47,490
Jadi mari kita menuju ke
CS50 IDE, dan melihat

157
00:07:47,490 --> 00:07:50,780
bagaimana CSS boleh, jenis, tweak
apa yang kita bermula dengan sebelum ini,

158
00:07:50,780 --> 00:07:53,290
dan menjadikannya sesuatu yang lebih baik.

159
00:07:53,290 --> 00:07:55,650
>> Oleh itu, kita berada dalam CS50 IDE
sekarang, dan jika yang tidak dikenali,

160
00:07:55,650 --> 00:07:58,710
kita akan tarik dalam ini
jadual yang laman HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML pada dasarnya
hanya mentakrifkan kandungan

162
00:08:01,090 --> 00:08:05,044
daripada multiple-- ia sepatutnya menjadi
meja empat oleh empat pendaraban.

163
00:08:05,044 --> 00:08:06,210
Ia agak mudah.

164
00:08:06,210 --> 00:08:09,410
Dan kita akan berfikir bahawa ia akan
kelihatan cantik teratur.

165
00:08:09,410 --> 00:08:15,277
Tetapi yang sebenarnya, apabila kita pratonton halaman ini,
kita melihat bahawa ia adalah jenis hodoh, bukan?

166
00:08:15,277 --> 00:08:16,860
Jelas sekali kita ada baris dan lajur di sini.

167
00:08:16,860 --> 00:08:18,350
Terdapat beberapa jenis pemisahan.

168
00:08:18,350 --> 00:08:20,040
Tetapi ia bukan satu pemisahan bermakna.

169
00:08:20,040 --> 00:08:23,105
Kita sebenarnya tidak mendapat
terlalu banyak maklumat di sini.

170
00:08:23,105 --> 00:08:25,730
Dan tidak ada pemisahan antara
baris dan lajur dari segi

171
00:08:25,730 --> 00:08:28,460
peraturan mendatar atau menegak.

172
00:08:28,460 --> 00:08:31,530
Kita mungkin boleh membuat ini
kelihatan sedikit lebih baik.

173
00:08:31,530 --> 00:08:32,934
Jadi mari kita cuba.

174
00:08:32,934 --> 00:08:34,559
Jadi, saya akan menutup tab ini di sini.

175
00:08:34,559 --> 00:08:37,434
Dan saya akan menutup table.HTML saya,
dan saya mempunyai satu lagi versi sini

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

177
00:08:39,490 --> 00:08:40,655
Kami akan membuka bahawa sehingga.

178
00:08:40,655 --> 00:08:42,530
Mayat halaman adalah
cukup banyak yang sama,

179
00:08:42,530 --> 00:08:44,238
tetapi saya telah berubah yang
sedikit di bahagian atas.

180
00:08:44,238 --> 00:08:47,132
Dan saya akan tatal ke atas di sini.

181
00:08:47,132 --> 00:08:49,340
Perhatikan bahawa kali ini, saya
menggunakan tag gaya terbenam.

182
00:08:49,340 --> 00:08:53,550
Saya telah membuka tag gaya, dan saya sekarang
menentukan helaian gaya CSS hanya di dalam

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

184
00:08:54,310 --> 00:08:56,310
Saya mempunyai lembaran gaya yang mengatakan, meja.

185
00:08:56,310 --> 00:08:58,170
Itulah pemilih tag saya.

186
00:08:58,170 --> 00:09:01,340
Saya tidak menggunakan titik atau hash,
yang saya akan lakukan jika saya

187
00:09:01,340 --> 00:09:03,710
adalah menggunakan ID atau pemilih kelas.

188
00:09:03,710 --> 00:09:06,190
Saya mempunyai jadual sini-- pemilih tag.

189
00:09:06,190 --> 00:09:10,090
Gaya ini akan
terpakai bagi tiap-tiap tag jadual.

190
00:09:10,090 --> 00:09:14,950
Rupa-rupanya saya mahu meletakkan satu
pixel luas, sempadan biru pepejal,

191
00:09:14,950 --> 00:09:15,779
dalam jadual saya.

192
00:09:15,779 --> 00:09:18,320
Yang berbunyi seperti ia akan mungkin
membantu keadaan, bukan?

193
00:09:18,320 --> 00:09:20,320
Kita akan mempunyai
perkara yang kelihatan lebih baik.

194
00:09:20,320 --> 00:09:21,190
Jadi ini adalah baik.

195
00:09:21,190 --> 00:09:23,540
Segi gaya, saya baru sahaja
tertanam lembaran gaya saya di sini.

196
00:09:23,540 --> 00:09:25,100
Ia sudah tentu yang
cara yang boleh diterima untuk melakukannya.

197
00:09:25,100 --> 00:09:26,391
Mari kita lihat apa ini kelihatan seperti.

198
00:09:26,391 --> 00:09:29,790
Jadi saya akan kembali ke bawah di sini, dan
Saya akan akan pratonton table2.HTML saya.

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

200
00:09:32,430 --> 00:09:36,470
Nah, itu tidak cukup apa yang saya mahu,
tetapi ia adalah apa yang kita minta.

201
00:09:36,470 --> 00:09:39,530
Kami berkata bahawa gaya ini adalah
akan memohon ke meja kami.

202
00:09:39,530 --> 00:09:43,810
Meja kami kini mempunyai satu piksel
luas, sempadan biru pepejal di sekitarnya.

203
00:09:43,810 --> 00:09:46,237
Kita sebenarnya tidak mendapat
pada sel jadual.

204
00:09:46,237 --> 00:09:47,570
Kami hanya mendapat di meja.

205
00:09:47,570 --> 00:09:49,310
Jadi CSS bekerja.

206
00:09:49,310 --> 00:09:51,890
Ia telah menggunakan
lembaran gaya ke meja kami.

207
00:09:51,890 --> 00:09:53,981
Tetapi tidak cukup melakukan
apa yang kita mahu ia lakukan.

208
00:09:53,981 --> 00:09:55,730
Bagaimana kita dapat lakukan
apa yang kita mahu ia lakukan?

209
00:09:55,730 --> 00:09:59,287
>> Nah, mari kita lihat pada satu lagi
versi ini dalam table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Jadi saya hanya akan menutup tab ini.

211
00:10:00,870 --> 00:10:03,890
Saya akan kembali ke sini untuk saya
memfailkan pokok, dan membuka table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Sekali lagi, ia akan kelihatan cantik
sama di sini pada permulaan.

214
00:10:10,350 --> 00:10:14,460
Tetapi notis, kali ini, dan bukannya menggunakan
helaian gaya tertanam betul-betul di sana,

215
00:10:14,460 --> 00:10:18,870
Saya akan menghubungkan dalam
lembaran gaya menggunakan tag pautan.

216
00:10:18,870 --> 00:10:22,480
Jadi saya nampaknya menghubungkan dalam
lembaran gaya dipanggil tables.CSS,

217
00:10:22,480 --> 00:10:25,090
dan baik ini sama
lembaran gaya hanya ertinya- baik,

218
00:10:25,090 --> 00:10:28,645
apa yang fail ini berbanding dengan apa yang
Saya doing-- adalah lembaran gaya yang saya

219
00:10:28,645 --> 00:10:29,821
menggunakan untuk halaman saya.

220
00:10:29,821 --> 00:10:32,320
Jadi, jika saya benar-benar mahu melihat apa yang
Yang saya lakukan dengan CSS di sini,

221
00:10:32,320 --> 00:10:35,010
Saya perlu pergi terbuka yang
memfailkan table.CSS juga.

222
00:10:35,010 --> 00:10:37,490
Oleh itu, kita akan kembali ke sini
sekali lagi untuk pokok fail kami.

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

224
00:10:38,660 --> 00:10:40,490
Kami akan pop terbuka.

225
00:10:40,490 --> 00:10:43,070
Sekarang kita lihat sedikit CSS.

226
00:10:43,070 --> 00:10:45,630
Rupa-rupanya, saya mempunyai pasangan
perkara yang berlaku di sini.

227
00:10:45,630 --> 00:10:48,950
Saya nampaknya mahu meletakkan lima
pixel luas, pepejal sempadan merah,

228
00:10:48,950 --> 00:10:50,287
di meja saya.

229
00:10:50,287 --> 00:10:52,870
Kita sudah tahu bahawa perkara yang berlaku
untuk hanya pergi pada perimeter.

230
00:10:52,870 --> 00:10:56,180
Kita melihat bahawa dalam table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Dengan setiap berturut-turut, saya
nampaknya ingin menentukan

232
00:10:58,770 --> 00:11:01,950
bahawa ketinggian baris itu adalah 50 piksel tinggi.

233
00:11:01,950 --> 00:11:05,680
Jadi bagi setiap baris, ingat
itulah yang tr tag tidak,

234
00:11:05,680 --> 00:11:08,550
Saya menjadikannya 50 piksel tinggi.

235
00:11:08,550 --> 00:11:09,804
>> Akhir sekali, saya mempunyai komen ini.

236
00:11:09,804 --> 00:11:11,470
Dan ini adalah bagaimana kita membuat komen dalam CSS.

237
00:11:11,470 --> 00:11:16,174
Ia hampir sama dengan merampas blok
Komen sintaks slash bintang.

238
00:11:16,174 --> 00:11:17,090
Semua teks yang anda mahu.

239
00:11:17,090 --> 00:11:19,470
Tidak ada slash slash walaupun dalam CSS.

240
00:11:19,470 --> 00:11:23,400
Untuk komen sebaris pendek, kami mempunyai
menggunakan format ini tertentu di sini.

241
00:11:23,400 --> 00:11:26,830
Ia kelihatan seperti saya melakukan
banyak perkara dalam tag td saya.

242
00:11:26,830 --> 00:11:29,710
Ingat tag td, atau meja
data, yang benar-benar hanya

243
00:11:29,710 --> 00:11:32,210
ruangan bahagian dalam
baris kami, dan nampaknya

244
00:11:32,210 --> 00:11:35,090
untuk setiap bahagian data
dalam jadual saya, saya ingin

245
00:11:35,090 --> 00:11:38,850
untuk menetapkan warna latar belakang untuk
menjadi hitam, warna menjadi putih,

246
00:11:38,850 --> 00:11:40,320
warna adalah warna latar depan.

247
00:11:40,320 --> 00:11:42,360
Jadi ini akan menjadi
teks halaman saya.

248
00:11:42,360 --> 00:11:45,140
Saya hendak font besar, 22
menunjukkan fon, dan saya mahu

249
00:11:45,140 --> 00:11:47,001
ia menjadi keluarga fon, Georgia.

250
00:11:47,001 --> 00:11:48,750
Jadi, saya tidak akan
mempunyai fon lalai.

251
00:11:48,750 --> 00:11:51,820
Saya akan nyatakan Georgia, yang
adalah salah satu web fon selamat

252
00:11:51,820 --> 00:11:53,830
yang kita lihat sebelum ini.

253
00:11:53,830 --> 00:11:57,284
Saya mahu teks saya untuk diselaraskan
tengah-tengah, di pertengahan kotak,

254
00:11:57,284 --> 00:11:59,450
Saya tidak mahu ia dibiarkan
selaras atau kanan sejajar.

255
00:11:59,450 --> 00:12:03,461
Dan saya mahu lebar lajur saya
menjadi 50 piksel lebar juga.

256
00:12:03,461 --> 00:12:05,210
Mari kita lihat pada
apa ini kelihatan seperti,

257
00:12:05,210 --> 00:12:07,470
dan lihat jika ini adalah mungkin peningkatan.

258
00:12:07,470 --> 00:12:12,890
Jadi, saya akan pergi ke table3.HTML, yang
ingat, termasuk table.CSS sebagai pautan,

259
00:12:12,890 --> 00:12:14,830
dan kami akan periksa.

260
00:12:14,830 --> 00:12:16,800
Itu lebih baik, bukan?

261
00:12:16,800 --> 00:12:20,004
Ini sebenarnya mula kelihatan
banyak lebih seperti jadual pendaraban.

262
00:12:20,004 --> 00:12:21,920
Saya mempunyai sempadan merah
di meja saya tetapi sekarang

263
00:12:21,920 --> 00:12:26,700
Saya juga telah dinyatakan bahawa
setiap baris adalah 50 piksel lebar,

264
00:12:26,700 --> 00:12:30,220
atau ia 50 piksel tall-- alasan
me-- setiap lajur ialah 50 piksel lebar.

265
00:12:30,220 --> 00:12:34,251
Data dalam setiap lajur, dan hanya
data, mempunyai latar belakang hitam.

266
00:12:34,251 --> 00:12:36,000
Jadi itulah sebabnya mereka
garis putih berada di sana.

267
00:12:36,000 --> 00:12:38,836
Oleh kerana ruang dalam
antara semua sel-sel,

268
00:12:38,836 --> 00:12:40,710
ia bukan satu sempadan di
dan dengan sendirinya, ia hanya

269
00:12:40,710 --> 00:12:43,170
Saya hanya mengisi
sel-sel, yang sebenarnya

270
00:12:43,170 --> 00:12:46,310
menjadikan sempadan meja, yang
nampaknya wujud selama ini, ia

271
00:12:46,310 --> 00:12:47,887
adalah garis putih hanya nipis.

272
00:12:47,887 --> 00:12:48,720
Kini mereka kelihatan.

273
00:12:48,720 --> 00:12:50,380
Kini mereka meninggal pada skrin.

274
00:12:50,380 --> 00:12:52,920
Dan jadi ini adalah sangat mudah
lembaran gaya yang saya telah digunakan,

275
00:12:52,920 --> 00:12:56,850
dan kini meja saya kelihatan lebih banyak seperti
meja empat oleh empat pendaraban,

276
00:12:56,850 --> 00:13:00,950
bukannya keadaan kucar-kacir hanya campur aduk, di mana
semuanya jelas baris dan lajur,

277
00:13:00,950 --> 00:13:03,717
tetapi tidak super diatur dengan baik.

278
00:13:03,717 --> 00:13:06,800
Kami benar-benar hanya menggaru permukaan
daripada apa yang anda boleh lakukan dengan CSS di sini.

279
00:13:06,800 --> 00:13:10,330
Mujurlah dokumentasi CSS
adalah agak mudah.

280
00:13:10,330 --> 00:13:14,000
Anda akan menggunakan beberapa yang
sifat-sifat, agak kerap.

281
00:13:14,000 --> 00:13:16,087
Orang-orang yang kita bercakap tentang
awal dalam video ini.

282
00:13:16,087 --> 00:13:18,170
Terdapat beberapa bahawa anda
mungkin tidak akan menggunakan semua.

283
00:13:18,170 --> 00:13:19,469
Dan itulah denda juga.

284
00:13:19,469 --> 00:13:22,010
Tetapi hanya tahu, bahawa ada
banyak dokumentasi di luar sana.

285
00:13:22,010 --> 00:13:25,110
Jadi, walaupun kita tidak meliputi segala-galanya,
anda pasti tidak ketinggalan pada anda sendiri.

286
00:13:25,110 --> 00:13:26,780
Tetapi CSS adalah benar-benar menyeronokkan
untuk bereksperimen dengan.

287
00:13:26,780 --> 00:13:29,040
Dan saya amat menggalakkan anda
untuk bermain-main dengan laman web anda,

288
00:13:29,040 --> 00:13:32,180
dan lihat bagaimana anda boleh membuat mereka
melihat dan merasa untuk meningkatkan pengguna

289
00:13:32,180 --> 00:13:34,790
pengalaman melawat halaman anda.

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

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

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