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

2
00:00:05,660 --> 00:00:08,740
>> Doug LLOYD: Jadi mari kita satu lagi
Video untuk berbicara tentang satu bahasa lebih.

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

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

5
00:00:13,460 --> 00:00:16,149
adalah bahasa lain yang kita gunakan
ketika membangun website.

6
00:00:16,149 --> 00:00:17,190
Pikirkan tentang hal seperti ini.

7
00:00:17,190 --> 00:00:20,900
Jika HTML adalah apa yang kita gunakan untuk mengatur
konten kami ingin menempatkan pada halaman kami,

8
00:00:20,900 --> 00:00:25,390
CSS adalah alat yang umumnya kita gunakan
untuk menyesuaikan bagaimana website kita terlihat,

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

10
00:00:30,410 --> 00:00:32,535
>> Mirip dengan HTML, CSS
bukan bahasa pemrograman.

11
00:00:32,535 --> 00:00:33,451
Ia tidak memiliki logika.

12
00:00:33,451 --> 00:00:34,595
Ia tidak memiliki variabel.

13
00:00:34,595 --> 00:00:38,890
Ia tidak memiliki apapun yang
mengalir hal terkait yang C tidak.

14
00:00:38,890 --> 00:00:40,150
Ini adalah bahasa styling.

15
00:00:40,150 --> 00:00:42,810
Dan sintaks cukup
sederhana, dan hanya menggambarkan

16
00:00:42,810 --> 00:00:46,240
bagaimana unsur-unsur kami
Halaman memiliki HTML tertentu

17
00:00:46,240 --> 00:00:48,190
elemen harus diubah.

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

19
00:00:51,170 --> 00:00:53,290
atau tidak terbiasa dengan
HTML umumnya, Anda

20
00:00:53,290 --> 00:00:57,430
mungkin ingin melihat pada yang
pertama, karena ini pembahasan CSS

21
00:00:57,430 --> 00:01:00,700
akan tergantung pada
beberapa pengetahuan tentang HTML.

22
00:01:00,700 --> 00:01:03,740
>> Jadi di sini adalah benar-benar
sederhana CSS stylesheet.

23
00:01:03,740 --> 00:01:06,480
Bahkan jika Anda sudah pernah
diprogram dengan CSS sebelumnya,

24
00:01:06,480 --> 00:01:10,624
Aku cukup yakin Anda dapat mengetahui
apa stylesheet ini tidak.

25
00:01:10,624 --> 00:01:11,290
Apa fungsinya?

26
00:01:11,290 --> 00:01:15,470
Nah, diterapkan pada tubuh web kami
Halaman, segala sesuatu di antara tag tubuh

27
00:01:15,470 --> 00:01:19,631
pada HTML kita, dan itu menetapkan
warna latar belakang halaman menjadi biru.

28
00:01:19,631 --> 00:01:21,130
Nah, itu adalah stylesheet yang sangat sederhana.

29
00:01:21,130 --> 00:01:23,269
Ini sebenarnya sangat manusiawi
bahasa yang ramah, CSS.

30
00:01:23,269 --> 00:01:26,560
Jadi bahkan jika Anda belum pernah menggunakannya sebelumnya,
Anda mungkin bisa menebak apa yang lakukan.

31
00:01:26,560 --> 00:01:30,140
Bahkan, jika kita dimuat halaman, di mana
stylesheet ini tertanam entah bagaimana,

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

33
00:01:36,240 --> 00:01:37,670
>> Jadi bagaimana kita membangun stylesheet?

34
00:01:37,670 --> 00:01:39,700
Yah pertama, kita harus
mengidentifikasi pemilih.

35
00:01:39,700 --> 00:01:42,970
Dalam contoh terakhir,
pemilih yang tubuh.

36
00:01:42,970 --> 00:01:45,050
Kemudian kami memiliki terbuka
penjepit keriting, dan kami

37
00:01:45,050 --> 00:01:48,410
akan mulai mendefinisikan
stylesheet untuk pemilih itu.

38
00:01:48,410 --> 00:01:51,800
Di antara kurung kurawal, kami
hanya memiliki daftar pasangan nilai kunci.

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

40
00:01:56,205 --> 00:01:57,830
tapi kita bisa berbuat lebih banyak dan lebih dari ini.

41
00:01:57,830 --> 00:02:02,330
Anda bisa memiliki beberapa hal menerapkan
itu tag, bahwa tubuh pemilih.

42
00:02:02,330 --> 00:02:05,960
Masing-masing dari mereka dipisahkan oleh
koma, dan kita sebut mereka masing-masing

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

44
00:02:08,949 --> 00:02:12,410
Ketika kita sudah selesai dengan semua styling kami
ingin berlaku untuk tag tertentu,

45
00:02:12,410 --> 00:02:15,300
kita hanya memiliki keriting menutup
penjepit untuk mengakhiri stylesheet,

46
00:02:15,300 --> 00:02:19,640
dan kita sudah selesai mendefinisikan stylesheet
untuk itu pemilih tertentu.

47
00:02:19,640 --> 00:02:21,341
>> Apa adalah beberapa properti CSS umum?

48
00:02:21,341 --> 00:02:23,590
Yah, mungkin Anda ingin menempatkan
perbatasan sekitar sesuatu.

49
00:02:23,590 --> 00:02:26,850
Jadi Anda bisa mengatakan, perbatasan,
yang akan menjadi kunci Anda,

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

51
00:02:29,460 --> 00:02:30,209
Anda ingin menjadi.

52
00:02:30,209 --> 00:02:33,530
Jadi gaya bisa menjadi padat
line, garis putus-putus, garis putus-putus,

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

54
00:02:36,020 --> 00:02:38,790
Mungkin Anda ingin memilikinya
biru atau hitam atau hijau.

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

56
00:02:41,490 --> 00:02:43,254
Anda dapat menentukan semua hal-hal.

57
00:02:43,254 --> 00:02:46,420
Mungkin Anda ingin mengatur latar belakang
warna halaman Anda dengan cara tertentu.

58
00:02:46,420 --> 00:02:49,215
Kita sudah melihat bahwa, pengaturan
latar belakang tubuh menjadi biru.

59
00:02:49,215 --> 00:02:52,080
>> Kemudian Anda dapat menggunakan kata kunci,
sehingga CSS memiliki warna tertentu

60
00:02:52,080 --> 00:02:55,950
yang dibangun ke dalamnya, biru, hijau,
hitam, warna yang sangat sederhana kita tahu.

61
00:02:55,950 --> 00:02:59,110
Tapi Anda juga dapat menentukan
hex warna yang Anda inginkan.

62
00:02:59,110 --> 00:03:05,190
Ingat bahwa warna dapat diidentifikasi
oleh satu set tiga angka hex

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

64
00:03:08,500 --> 00:03:10,590
Dan sehingga kita dapat menentukan
setiap warna yang kita inginkan dengan,

65
00:03:10,590 --> 00:03:15,520
daripada 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 memiliki 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 bisa melakukan itu sama
dengan kata kunci dan atau enam digit hex.

71
00:03:28,850 --> 00:03:32,140
Jadi Anda dapat menentukan warna yang Anda
inginkan untuk teks halaman Anda

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

73
00:03:36,370 --> 00:03:39,100
Anda juga dapat mengubah dan menangani
dengan font, dan cara teks

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

75
00:03:40,400 --> 00:03:42,010
>> Sehingga Anda dapat mengubah ukuran font Anda.

76
00:03:42,010 --> 00:03:46,320
Anda dapat menggunakan kata-kata kunci, seperti ekstra,
ekstra kecil, atau xx kecil, atau menengah,

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

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

79
00:03:50,750 --> 00:03:55,850
Anda dapat menggunakan persentase, 80%, 20%,
di mana 100% adalah font default

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

81
00:03:59,220 --> 00:04:01,659
Atau Anda bahkan dapat mendasarkan off
dari ukuran font terbaru.

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

83
00:04:04,950 --> 00:04:08,241
tetapi Anda tidak tahu persis apa ukuran Anda
ingin menjadi, baik, Anda bisa mengatakan,

84
00:04:08,241 --> 00:04:09,330
ukuran font yang lebih kecil.

85
00:04:09,330 --> 00:04:14,344
Dan itu akan mendasarkan off dari,
hanya sampai di atas, itu ukuran font.

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

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

88
00:04:18,390 --> 00:04:20,690
>> Anda juga dapat menentukan apa
keluarga font yang Anda inginkan.

89
00:04:20,690 --> 00:04:23,360
Jika Anda memiliki tertentu
Nama, ada cara di CSS--

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

91
00:04:27,270 --> 00:04:28,980
dan menanamkan ke halaman Anda.

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

93
00:04:30,620 --> 00:04:33,540
Ada banyak web font aman
yang telah ditentukan dalam CSS.

94
00:04:33,540 --> 00:04:36,352
Dan jika Anda adalah pengguna Microsoft
Kantor di 20 tahun terakhir,

95
00:04:36,352 --> 00:04:38,810
Anda mungkin akrab dengan
banyak font yang aman web ini

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

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

98
00:04:45,470 --> 00:04:47,170
Mereka semua dianggap web font aman.

99
00:04:47,170 --> 00:04:49,169
Dan sebenarnya, bagian dari
alasan mereka datang untuk menjadi

100
00:04:49,169 --> 00:04:54,140
itu akan digunakan untuk membuat web-- setiap halaman
telah akses ke default ini mengatur font

101
00:04:54,140 --> 00:04:58,480
dengan berbagai serif, dan semua ini
hal font yang kita tidak akan masuk ke dalam,

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

103
00:05:01,130 --> 00:05:04,029
bahkan jika Anda tidak
jika menentukan font.

104
00:05:04,029 --> 00:05:07,070
Terakhir, Anda dapat menyelaraskan teks Anda,
bukannya itu menjadi, secara default, selaras

105
00:05:07,070 --> 00:05:09,310
ke kiri, Anda bisa
menyelaraskan ke kanan,

106
00:05:09,310 --> 00:05:13,740
atau Anda bisa menyelaraskan berpusat, atau
dibenarkan sehingga memukul kedua margin.

107
00:05:13,740 --> 00:05:16,800
Jadi mereka adalah semua pilihan Anda dapat menggunakan
untuk mengubah apa yang teks Anda terlihat seperti,

108
00:05:16,800 --> 00:05:20,120
dan bagaimana itu ditampilkan pada halaman Anda.

109
00:05:20,120 --> 00:05:22,180
>> Selektor Anda tidak
harus tag saja.

110
00:05:22,180 --> 00:05:25,539
Sebelumnya kita melihat tag tubuh
pemilih, dan pemilih tag

111
00:05:25,539 --> 00:05:26,580
memang terlihat seperti itu.

112
00:05:26,580 --> 00:05:30,020
Anda nama tag, dan kemudian Anda
mendefinisikan stylesheet untuk tag itu.

113
00:05:30,020 --> 00:05:32,660
Tapi Anda juga bisa melakukan sesuatu
disebut ID pemilih.

114
00:05:32,660 --> 00:05:34,390
ID pemilih terlihat sangat mirip.

115
00:05:34,390 --> 00:05:38,100
Tapi perhatikan, bahwa sekarang saya tidak menggunakan
tag HTML, saya menggunakan, dalam hal ini,

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

117
00:05:40,720 --> 00:05:42,930
Jika Anda ingat dari kami
video pada HTML, kita berbicara

118
00:05:42,930 --> 00:05:45,620
tentang bagaimana tag dapat memiliki atribut.

119
00:05:45,620 --> 00:05:48,340
>> Dan salah satu atribut yang berlaku
untuk hampir semua tag HTML,

120
00:05:48,340 --> 00:05:51,440
tapi kami tidak berbicara tentang hal itu,
adalah sesuatu yang disebut tag ID.

121
00:05:51,440 --> 00:05:55,250
Jadi CSS khusus ini akan
hanya berlaku untuk HTML tag yang memiliki

122
00:05:55,250 --> 00:05:58,530
ID yang sangat spesifik, bahwa Anda telah bernama.

123
00:05:58,530 --> 00:06:01,000
Jadi jika Anda memiliki suatu tempat
dalam kode Anda, di suatu tempat

124
00:06:01,000 --> 00:06:06,090
dalam file HTML Anda, tag dan Anda
tentukan sebagai atribut untuk tag itu,

125
00:06:06,090 --> 00:06:09,060
ID sama yang unik, ini
stylesheet tertentu

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

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

128
00:06:17,180 --> 00:06:19,920
Jadi selain memiliki
ID atribut, Anda juga dapat

129
00:06:19,920 --> 00:06:23,130
menambahkan atribut class dengan tag HTML.

130
00:06:23,130 --> 00:06:27,140
Dan ketika Anda menggunakan atribut class,
dapat diterapkan untuk beberapa tag.

131
00:06:27,140 --> 00:06:31,880
Jadi jika Anda memiliki beberapa hal yang
yang serupa, mungkin Anda ingin mengatakan,

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

133
00:06:35,890 --> 00:06:38,190
Dan kemudian tertentu
stylesheet akan berlaku

134
00:06:38,190 --> 00:06:42,041
untuk setiap tag yang kelas siswa.

135
00:06:42,041 --> 00:06:44,290
Dalam hal ini, kami akan mengatur
background warna kuning,

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

137
00:06:46,706 --> 00:06:52,510
tetapi hanya berkaitan dengan bagaimana transparan
sesuatu adalah, 70%, dalam hal ini.

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

139
00:06:54,430 --> 00:06:56,680
Anda dapat menulis mereka
langsung ke dalam HTML

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

141
00:06:59,690 --> 00:07:03,850
Dan tag gaya masuk ke dalam dari
tag kepala halaman web Anda.

142
00:07:03,850 --> 00:07:08,240
Cara mungkin lebih disukai untuk melakukan
itu adalah untuk menulis file css terpisah,

143
00:07:08,240 --> 00:07:12,360
dan kemudian link ke Anda
mendokumentasikan menggunakan link tag.

144
00:07:12,360 --> 00:07:14,690
Link tag, sekali lagi, adalah
berbeda dari 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 link tag adalah bagaimana kita
menarik berkas terpisah.

147
00:07:19,030 --> 00:07:23,900
Ini semacam seperti setara dengan
# include untuk pemrograman web.

148
00:07:23,900 --> 00:07:27,140
>> Jadi mari kita lihat 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
contoh yang sangat
perkalian sederhana

151
00:07:32,000 --> 00:07:35,160
tabel yang tampak cukup
jelek, dan mungkin ada

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

153
00:07:38,650 --> 00:07:41,120
lebih seperti perkalian
tabel, atau sesuatu

154
00:07:41,120 --> 00:07:43,730
yang tidak hanya terjebak bersama-sama
dengan ada pembagian yang sebenarnya

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

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

157
00:07:47,490 --> 00:07:50,780
bagaimana CSS dapat, semacam, tweak
apa yang kita mulai dengan sebelumnya,

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

159
00:07:53,290 --> 00:07:55,650
>> Jadi kita di CS50 IDE
sekarang, dan jika asing,

160
00:07:55,650 --> 00:07:58,710
kami akan berhenti di ini
tabel halaman HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML dasarnya
hanya mendefinisikan isi

162
00:08:01,090 --> 00:08:05,044
dari multiple-- itu seharusnya menjadi
meja perkalian empat oleh empat.

163
00:08:05,044 --> 00:08:06,210
Ini cukup sederhana.

164
00:08:06,210 --> 00:08:09,410
Dan kita akan berpikir bahwa itu akan
terlihat terorganisir cukup baik.

165
00:08:09,410 --> 00:08:15,277
Namun pada kenyataannya, ketika kita melihat halaman ini,
kita melihat bahwa itu semacam jelek, kan?

166
00:08:15,277 --> 00:08:16,860
Jelas kita memiliki baris dan kolom sini.

167
00:08:16,860 --> 00:08:18,350
Ada semacam pemisahan.

168
00:08:18,350 --> 00:08:20,040
Tapi itu bukan berarti pemisahan.

169
00:08:20,040 --> 00:08:23,105
Kami tidak benar-benar mendapatkan
terlalu banyak informasi di sini.

170
00:08:23,105 --> 00:08:25,730
Dan tidak ada pemisahan antara
baris dan kolom dalam hal

171
00:08:25,730 --> 00:08:28,460
aturan horizontal atau vertikal.

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

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

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

175
00:08:34,559 --> 00:08:37,434
Dan aku akan menutup table.HTML saya,
dan saya memiliki versi lain disini

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

177
00:08:39,490 --> 00:08:40,655
Kami akan membuka bahwa sampai.

178
00:08:40,655 --> 00:08:42,530
Badan halaman ini
lebih kurang sama,

179
00:08:42,530 --> 00:08:44,238
tapi aku sudah berubah
sedikit di atas.

180
00:08:44,238 --> 00:08:47,132
Dan aku akan gulir ke atas sini.

181
00:08:47,132 --> 00:08:49,340
Perhatikan bahwa saat ini, aku
menggunakan tag gaya tertanam.

182
00:08:49,340 --> 00:08:53,550
Aku telah membuka tag gaya, dan aku sekarang
mendefinisikan stylesheet CSS hanya di dalam

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

184
00:08:54,310 --> 00:08:56,310
Saya memiliki stylesheet yang mengatakan, tabel.

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

186
00:08:58,170 --> 00:09:01,340
Saya tidak menggunakan dot atau hash,
yang akan saya 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
Aku punya tabel di sini-tag selector.

189
00:09:06,190 --> 00:09:10,090
Gaya ini akan
berlaku untuk setiap tag tabel.

190
00:09:10,090 --> 00:09:14,950
Rupanya aku ingin menempatkan satu satu
pixel lebar, perbatasan biru solid,

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

192
00:09:15,779 --> 00:09:18,320
Kedengarannya seperti itu akan mungkin
membantu situasi, kan?

193
00:09:18,320 --> 00:09:20,320
Kita akan memiliki
hal terlihat jauh lebih baik.

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

195
00:09:21,190 --> 00:09:23,540
Gaya, saya baru saja
tertanam stylesheet saya di sini.

196
00:09:23,540 --> 00:09:25,100
Ini tentu sebuah
cara diterima untuk melakukannya.

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

198
00:09:26,391 --> 00:09:29,790
Jadi aku akan kembali ke sini, dan
Saya akan akan preview 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 inginkan,
tapi itu adalah persis apa yang kita minta.

201
00:09:36,470 --> 00:09:39,530
Kami mengatakan bahwa gaya ini adalah
akan berlaku untuk meja kami.

202
00:09:39,530 --> 00:09:43,810
Meja kami sekarang memiliki satu pixel
lebar, perbatasan biru solid di sekitarnya.

203
00:09:43,810 --> 00:09:46,237
Kami tidak benar-benar mendapatkan
di sel tabel.

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

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

206
00:09:49,310 --> 00:09:51,890
Ini telah menerapkan
stylesheet ke meja kami.

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

208
00:09:53,981 --> 00:09:55,730
Bagaimana kita bisa melakukan
apa yang ingin kita untuk melakukan?

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

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

211
00:10:00,870 --> 00:10:03,890
Aku akan kembali ke sini untuk saya
mengajukan pohon, dan membuka table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Sekali lagi, itu akan terlihat cantik
serupa di sini di awal.

214
00:10:10,350 --> 00:10:14,460
Tapi perhatikan, saat ini, daripada menggunakan
stylesheet tertanam tepat di sana,

215
00:10:14,460 --> 00:10:18,870
Aku akan menghubungkan dalam
stylesheet menggunakan link tag.

216
00:10:18,870 --> 00:10:22,480
Jadi aku rupanya menghubungkan dalam
stylesheet disebut tables.CSS,

217
00:10:22,480 --> 00:10:25,090
dan baik ini sama dengan
stylesheet hanya means-- baik,

218
00:10:25,090 --> 00:10:28,645
apa file ini relatif terhadap apa yang
Aku doing-- adalah stylesheet bahwa aku

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 ingin melihat apa yang
Saya lakukan dengan CSS di sini,

221
00:10:32,320 --> 00:10:35,010
Aku harus pergi terbuka yang
table.CSS mengajukan juga.

222
00:10:35,010 --> 00:10:37,490
Jadi kita akan kembali ke sini
lagi ke pohon file kita.

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 melihat sedikit dari CSS.

226
00:10:43,070 --> 00:10:45,630
Rupanya, saya memiliki beberapa
hal terjadi di sini.

227
00:10:45,630 --> 00:10:48,950
Saya tampaknya ingin menempatkan lima
pixel lebar, perbatasan merah solid,

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

229
00:10:50,287 --> 00:10:52,870
Kita sudah tahu bahwa itu akan
untuk hanya pergi di perimeter.

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

231
00:10:56,180 --> 00:10:58,770
Dengan setiap baris, saya
rupanya ingin menentukan

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

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

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

235
00:11:08,550 --> 00:11:09,804
>> Terakhir, saya memiliki komentar ini.

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

237
00:11:11,470 --> 00:11:16,174
Ini sangat mirip dengan merebut blok
komentar sintaks bintang slash.

238
00:11:16,174 --> 00:11:17,090
Semua teks yang Anda inginkan.

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

240
00:11:19,470 --> 00:11:23,400
Untuk komentar inline pendek, kita memiliki
menggunakan format tertentu ini di sini.

241
00:11:23,400 --> 00:11:26,830
Sepertinya aku melakukan
banyak hal 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
kolom dalam
baris kami, dan tampaknya

244
00:11:32,210 --> 00:11:35,090
untuk setiap bagian dari data
di meja saya, saya ingin

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

246
00:11:38,850 --> 00:11:40,320
warna warna foreground.

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 ingin font besar, 22
titik font, dan saya ingin

249
00:11:45,140 --> 00:11:47,001
untuk menjadi keluarga font, Georgia.

250
00:11:47,001 --> 00:11:48,750
Jadi aku tidak akan
memiliki font default.

251
00:11:48,750 --> 00:11:51,820
Aku akan menentukan Georgia, yang
adalah salah satu web font aman

252
00:11:51,820 --> 00:11:53,830
yang telah kita lihat sebelumnya.

253
00:11:53,830 --> 00:11:57,284
Saya ingin teks saya disejajarkan
terpusat, di tengah-tengah kotak,

254
00:11:57,284 --> 00:11:59,450
Saya tidak ingin ditinggal
selaras atau kanan sejajar.

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

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

257
00:12:05,210 --> 00:12:07,470
dan melihat apakah ini mungkin perbaikan.

258
00:12:07,470 --> 00:12:12,890
Jadi aku akan pergi ke table3.HTML, yang
recall, termasuk table.CSS sebagai link,

259
00:12:12,890 --> 00:12:14,830
dan kami akan melihat dulu itu.

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

261
00:12:16,800 --> 00:12:20,004
Ini sebenarnya mulai terlihat
banyak lebih seperti tabel perkalian.

262
00:12:20,004 --> 00:12:21,920
Saya memiliki perbatasan merah
sekitar meja saya tapi sekarang

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

264
00:12:26,700 --> 00:12:30,220
atau itu 50 piksel tall-- alasan
me-- setiap kolom adalah 50 piksel lebar.

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

266
00:12:34,251 --> 00:12:36,000
Jadi itu sebabnya mereka
garis putih yang ada.

267
00:12:36,000 --> 00:12:38,836
Karena ruang di
antara semua sel-sel,

268
00:12:38,836 --> 00:12:40,710
itu bukan perbatasan di
dan dari dirinya sendiri, itu hanya

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

270
00:12:43,170 --> 00:12:46,310
membuat perbatasan meja, yang
rupanya ada selama ini, itu

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

272
00:12:47,887 --> 00:12:48,720
Sekarang mereka terlihat.

273
00:12:48,720 --> 00:12:50,380
Sekarang mereka pop off pada layar.

274
00:12:50,380 --> 00:12:52,920
Dan jadi ini adalah sangat sederhana
stylesheet yang saya diterapkan,

275
00:12:52,920 --> 00:12:56,850
dan sekarang meja saya banyak terlihat lebih seperti
meja empat oleh empat perkalian,

276
00:12:56,850 --> 00:13:00,950
bukannya berantakan hanya campur aduk, di mana
semuanya jelas baris dan kolom,

277
00:13:00,950 --> 00:13:03,717
tapi tidak super terorganisir.

278
00:13:03,717 --> 00:13:06,800
Kami benar-benar hanya menggaruk permukaan
dari apa yang dapat Anda lakukan dengan CSS sini.

279
00:13:06,800 --> 00:13:10,330
Untungnya dokumentasi CSS
adalah cukup sederhana.

280
00:13:10,330 --> 00:13:14,000
Anda akan menggunakan beberapa nya
atribut, cukup sering.

281
00:13:14,000 --> 00:13:16,087
Yang kita bicarakan
sebelumnya dalam video ini.

282
00:13:16,087 --> 00:13:18,170
Ada beberapa yang Anda
mungkin tidak akan menggunakan semua.

283
00:13:18,170 --> 00:13:19,469
Dan itu baik-baik saja, juga.

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

285
00:13:22,010 --> 00:13:25,110
Jadi bahkan jika kita tidak menutupi segala sesuatu,
Anda tentu tidak meninggalkan Anda sendiri.

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

287
00:13:26,780 --> 00:13:29,040
Dan saya akan sangat mendorong Anda
untuk bermain-main dengan halaman web Anda,

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

289
00:13:32,180 --> 00:13:34,790
pengalaman mengunjungi halaman Anda.

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

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

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