1
00:00:00,000 --> 00:00:00,290

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Ternyata HTML tidak
satu-satunya bahasa yang anda boleh menggunakan di dalam

3
00:00:03,310 --> 00:00:03,895
bagi sebuah laman web.

4
00:00:03,895 --> 00:00:08,100
Anda boleh menggunakan sesuatu yang dinamakan CSS, atau
Cascading Style Sheets, juga.

5
00:00:08,100 --> 00:00:12,120
CSS membolehkan anda untuk menentukan lebih
tepat estetika web

6
00:00:12,120 --> 00:00:16,930
halaman, termasuk susun atur dan saiz dan
warna dan fon dan banyak lagi.

7
00:00:16,930 --> 00:00:20,820
Sebagai contoh, mari kita membuat laman web
di sini dipanggil CSS0 yang mewakili

8
00:00:20,820 --> 00:00:22,740
laman utama untuk, katakan, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Pada halaman ini, kami akan mempunyai John Harvard
menamakan, di bawah yang akan

10
00:00:25,480 --> 00:00:28,500
mesej bagus untuk pelawat beliau, di bawah
yang akan menjadi nota kaki, dengan

11
00:00:28,500 --> 00:00:30,590
berkata, beberapa maklumat hak cipta.

12
00:00:30,590 --> 00:00:34,650
Untuk melakukan ini, mari kita menentukan tiga bahagian
bagi laman ini menggunakan tag

13
00:00:34,650 --> 00:00:35,670
dipanggil div.

14
00:00:35,670 --> 00:00:43,880
Terbuka div kurungan, John Harvard, berhampiran
div kurungan, satu lagi kurungan div terbuka,

15
00:00:43,880 --> 00:00:48,330
dan sekarang kita akan menentukan sesuatu
seperti, selamat datang ke laman rumah saya!

16
00:00:48,330 --> 00:00:50,420
Dan mari kita menutup div ini, juga.

17
00:00:50,420 --> 00:00:53,700
>> Dan kini ketiga dan terakhir
div, hak cipta.

18
00:00:53,700 --> 00:00:58,250
Hanya untuk menjadi mewah, mari kini saya menggunakan HTML
entiti, simbol yang mewakili

19
00:00:58,250 --> 00:01:01,140
watak yang anda tidak boleh jika tidak
menaip pada papan kekunci anda.

20
00:01:01,140 --> 00:01:07,490
Khususnya, saya akan melakukan
Ampersand, paun, 169, koma bertitik.

21
00:01:07,490 --> 00:01:10,620
Ternyata bahawa adalah kod angka
untuk simbol hak cipta.

22
00:01:10,620 --> 00:01:14,260
Kemudian mari kita menentukan John Harvard
di sini di bahagian bawah.

23
00:01:14,260 --> 00:01:17,180
Mari kita menutup div dan menyimpan fail.

24
00:01:17,180 --> 00:01:18,910
>> Sekarang, apa yang tag div ini?

25
00:01:18,910 --> 00:01:21,970
Tag div hanya mentakrifkan pembahagian
halaman, yang pada asasnya adalah

26
00:01:21,970 --> 00:01:23,310
rantau segi empat tepat.

27
00:01:23,310 --> 00:01:26,850
Jadi pada masa ini dalam masa, saya mempunyai tiga
kawasan segi empat tepat, satu di atas

28
00:01:26,850 --> 00:01:27,620
yang lain.

29
00:01:27,620 --> 00:01:30,610
Jadi buat masa ini, kesannya adalah hampir
walaupun saya mempunyai tiga perenggan.

30
00:01:30,610 --> 00:01:33,490
Tetapi kita tidak akan melihat agak sebanyak
ruang putih di antara mereka.

31
00:01:33,490 --> 00:01:36,170
>> Mari kita menyimpan fail ini, perubahan yang
kebenaran, dan lihat untuk

32
00:01:36,170 --> 00:01:37,990
masa dalam Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod a + r CSS0.html.

34
00:01:43,040 --> 00:01:52,440
Mari kita kini membuka Chrome dan lawatan
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Malah, di sini adalah laman utama
untuk John Harvard.

36
00:01:54,630 --> 00:01:59,370
Sekarang mari kita menyesuaikan dgn mode ia sedikit lebih
tepat menggunakan beberapa CSS.

37
00:01:59,370 --> 00:02:03,510
>> Kembali pada gedit, mari kita pergi ke dalam ini
tag div pertama dan menambah gaya yang

38
00:02:03,510 --> 00:02:11,060
menyifatkan menyatakan bahawa saya mau
saiz fon, katakan, 36 piksel, atau px.

39
00:02:11,060 --> 00:02:15,650
Dan saya ingin berat font ini
untuk menjadi berani dan bukan lalai,

40
00:02:15,650 --> 00:02:16,980
yang biasa.

41
00:02:16,980 --> 00:02:21,170
Untuk div kedua, mari kita menentukan
lain sifat gaya yang mempunyai

42
00:02:21,170 --> 00:02:25,550
saiz fon 24 piksel, jadi
sedikit lebih kecil.

43
00:02:25,550 --> 00:02:28,410
Tutup sebut harga selepas koma bernoktah.

44
00:02:28,410 --> 00:02:33,255
>> Akhir sekali, dalam div ketiga ini, mari kita buat
gaya sama saiz quote, fon, dan

45
00:02:33,255 --> 00:02:35,340
katakan 12 piksel masa ini.

46
00:02:35,340 --> 00:02:37,280
Tutup quote selepas koma bernoktah.

47
00:02:37,280 --> 00:02:40,200
Notis itu, saya seolah-olah mempunyai
dinyatakan sedikit penyesuaian dgn mode untuk

48
00:02:40,200 --> 00:02:43,770
ketiga-tiga divs menggunakan,
Ternyata, CSS.

49
00:02:43,770 --> 00:02:47,820
Malah, sintaks yang anda lihat dalam
antara mereka petik adalah CSS,

50
00:02:47,820 --> 00:02:50,620
khusus CSS hartanah
dengan nilai-nilai.

51
00:02:50,620 --> 00:02:53,910
Dan untuk itu tag pertama, di mana saya mempunyai
dua harta tersebut, saiz fon dan

52
00:02:53,910 --> 00:02:57,290
berat fon, saya hanya dipisahkan
mereka dengan koma bernoktah.

53
00:02:57,290 --> 00:02:59,940
>> Kini, hanya demi gaya, saya
koma bertitik juga termasuk di

54
00:02:59,940 --> 00:03:00,880
akhir setiap baris.

55
00:03:00,880 --> 00:03:04,270
Tetapi mereka tidak tegas perlu,
terutamanya apabila anda hanya mempunyai satu

56
00:03:04,270 --> 00:03:05,580
harta ditakrifkan.

57
00:03:05,580 --> 00:03:08,370
Sekarang mari kita simpan fail dan tambah nilai
dalam Chrome, dan lihat apa yang

58
00:03:08,370 --> 00:03:11,000
kesan bersih adalah.

59
00:03:11,000 --> 00:03:13,470
Kembali pada Chrome di sini,
mari kita klik Reload.

60
00:03:13,470 --> 00:03:15,800
>> Sekarang kita mempunyai sedikit lebih menarik
laman utama untuk John

61
00:03:15,800 --> 00:03:19,000
Harvard, di mana baris pertama dengan
namanya, yang dalam yang

62
00:03:19,000 --> 00:03:23,470
div pertama, adalah 36 piksel tinggi dan juga
huruf tebal, di mana baris kedua,

63
00:03:23,470 --> 00:03:27,340
yang dalam yang div kedua, ialah 24
piksel tinggi, tetapi tidak huruf tebal.

64
00:03:27,340 --> 00:03:31,500
Dan mana baris ketiga di ketiga yang
div ialah 12 piksel tinggi dan juga

65
00:03:31,500 --> 00:03:32,610
tidak huruf tebal.

66
00:03:32,610 --> 00:03:35,380
Tetapi andaikan sekarang saya ingin beralih
semua teks ini lebih

67
00:03:35,380 --> 00:03:36,650
seperti bahawa ia berpusat.

68
00:03:36,650 --> 00:03:40,480
>> Saya boleh menyelaraskan setiap individu
divs seperti yang berpusat.

69
00:03:40,480 --> 00:03:45,330
Tetapi yang lebih mudah, boleh saya balut mereka
tiga divs bahagian dalam div keempat, yang

70
00:03:45,330 --> 00:03:49,360
div ibu bapa, jadi untuk bercakap, dan menentukan
bahawa div dan semua yang

71
00:03:49,360 --> 00:03:52,610
keturunan harus
teks sejajar pusat?

72
00:03:52,610 --> 00:03:54,120
Mari kita melihat.

73
00:03:54,120 --> 00:03:58,510
>> Di dalam gedit, mari kita kembali kepada saya
badan dan menambah div top up baru dengan

74
00:03:58,510 --> 00:04:04,460
div, gaya sama quote unquote
pusat align teks, berhampiran

75
00:04:04,460 --> 00:04:06,250
memetik selepas koma bernoktah.

76
00:04:06,250 --> 00:04:10,280
Dan sekarang, mari kita teruskan dan inden semua
dari orang-orang garisan yang kita ditaip sebelum ini.

77
00:04:10,280 --> 00:04:15,040
Dan di bawah yang div ketiga, mari kita
menutup div baru ini.

78
00:04:15,040 --> 00:04:18,829
>> Dalam erti kata lain, kerana ketiga-tiga
divs asal kini kanak-kanak, jadi untuk

79
00:04:18,829 --> 00:04:22,110
bercakap, seorang div ibu bapa yang baru dan saya
dinyatakan bahawa saya ingin untuk menyelaraskan

80
00:04:22,110 --> 00:04:26,140
teks yang div ibu bapa di tengah-tengah
halaman, harta yang akan menjadi

81
00:04:26,140 --> 00:04:28,290
diwarisi oleh semua orang-orang kanak-kanak.

82
00:04:28,290 --> 00:04:32,370
Malah, mari kita simpan fail tersebut dan
lihat dalam pelayar.

83
00:04:32,370 --> 00:04:34,650
Mari kita menambah nilai dalam Chrome.

84
00:04:34,650 --> 00:04:37,540
Dan kita ada, yang lebih bagus
laman utama untuk John Harvard.

85
00:04:37,540 --> 00:04:39,872