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

2
00:00:00,290 --> 00:00:03,310
>> 演講嘉賓：原來，HTML是不
您可以使用裡面的唯一語言

3
00:00:03,310 --> 00:00:03,895
一個網頁。

4
00:00:03,895 --> 00:00:08,100
您可以使用一種叫做CSS或
層疊樣式表，以及。

5
00:00:08,100 --> 00:00:12,120
CSS允許你指定多
一個web正是美學

6
00:00:12,120 --> 00:00:16,930
頁面，包括佈局和大小，
顏色和字體等等。

7
00:00:16,930 --> 00:00:20,820
例如，讓我們創建一個網頁
這裡所說的CSS0一個代表

8
00:00:20,820 --> 00:00:22,740
主頁上，比如說，約翰·哈佛。

9
00:00:22,740 --> 00:00:25,480
>> 在這個頁面，我們將有約翰·哈佛的
命名，在其下會

10
00:00:25,480 --> 00:00:28,500
他的觀眾一個不錯的消息，下面
這將是一個頁腳，用

11
00:00:28,500 --> 00:00:30,590
說，一些版權信息。

12
00:00:30,590 --> 00:00:34,650
要做到這一點，讓我們定義三個部門
用於使用標籤的頁面

13
00:00:34,650 --> 00:00:35,670
叫格。

14
00:00:35,670 --> 00:00:43,880
打開支架的div，約翰哈佛，接近
架格，另一個打開支架的div，

15
00:00:43,880 --> 00:00:48,330
現在我們將指定的東西
喜歡，歡迎到我的主頁！

16
00:00:48,330 --> 00:00:50,420
並讓我們關閉這個分區，也是如此。

17
00:00:50,420 --> 00:00:53,700
>> 現在第三次也是最後
格，版權。

18
00:00:53,700 --> 00:00:58,250
剛剛被看中，讓我現在使用的HTML
實體，代表一個符號

19
00:00:58,250 --> 00:01:01,140
一個字，你不能以其他方式
輸入您的鍵盤上。

20
00:01:01,140 --> 00:01:07,490
特別是，我該怎麼辦
符號，英鎊，169，分號。

21
00:01:07,490 --> 00:01:10,620
原來，是數字代碼
對於版權符號。

22
00:01:10,620 --> 00:01:14,260
那麼讓我們來指定約翰·哈佛
這裡在底部。

23
00:01:14,260 --> 00:01:17,180
讓我們關閉div和保存文件。

24
00:01:17,180 --> 00:01:18,910
>> 現在，什麼是這個div標籤？

25
00:01:18,910 --> 00:01:21,970
div標籤簡單地定義了一個師
的頁面，它本質上是一

26
00:01:21,970 --> 00:01:23,310
矩形區域。

27
00:01:23,310 --> 00:01:26,850
所以在這個時刻，我有三個
矩形區域，一個在頂部

28
00:01:26,850 --> 00:01:27,620
其他的。

29
00:01:27,620 --> 00:01:30,610
所以現在，效果幾乎一樣
雖然我有三段。

30
00:01:30,610 --> 00:01:33,490
但我們不會看到相當多
空白在他們之間。

31
00:01:33,490 --> 00:01:36,170
>> 讓我們來保存這個文件，更改其
權限，看一看了

32
00:01:36,170 --> 00:01:37,990
此刻在Chrome。

33
00:01:37,990 --> 00:01:43,040
存取權限chmod a + R CSS0.html。

34
00:01:43,040 --> 00:01:52,440
現在，讓我們打開Chrome和訪問
http://localhost.CSS0.html。

35
00:01:52,440 --> 00:01:54,630
事實上，這裡有一個主頁
約翰·哈佛。

36
00:01:54,630 --> 00:01:59,370
現在，讓我們風格化這一點更
正是使用一些CSS。

37
00:01:59,370 --> 00:02:03,510
>> 早在gedit中，讓我們進入這個
第一個div標籤，並添加樣式

38
00:02:03,510 --> 00:02:11,060
指定的屬性，我想一個
的，例如字體大小，36個像素，或像素。

39
00:02:11,060 --> 00:02:15,650
我想這個字體的粗細
要大膽而不是默認的，

40
00:02:15,650 --> 00:02:16,980
這是正常的。

41
00:02:16,980 --> 00:02:21,170
對於第二個div，讓我們指定
具有另一種風格屬性

42
00:02:21,170 --> 00:02:25,550
的24像素的字體大小，因此
稍微小了一點。

43
00:02:25,550 --> 00:02:28,410
分號後關閉引號。

44
00:02:28,410 --> 00:02:33,255
>> 最後，在第三格，讓我們做
風格等於報價，字體大小和

45
00:02:33,255 --> 00:02:35,340
比方說，12個像素這段時間。

46
00:02:35,340 --> 00:02:37,280
分號後關閉的報價。

47
00:02:37,280 --> 00:02:40,200
請注意，那時，我似乎有
對於指定了位程式化的

48
00:02:40,200 --> 00:02:43,770
每一個使用這三個div的，
事實證明，CSS。

49
00:02:43,770 --> 00:02:47,820
事實上，你在看語法
這些雙引號之間是CSS，

50
00:02:47,820 --> 00:02:50,620
具體的CSS屬性
與值。

51
00:02:50,620 --> 00:02:53,910
而對於第一個標籤，在那裡我有
兩個這樣的屬性，字體大小和

52
00:02:53,910 --> 00:02:57,290
字體粗細，我只是分開
用分號。

53
00:02:57,290 --> 00:02:59,940
>> 現在，只是風格的緣故，我
在還包含分號

54
00:02:59,940 --> 00:03:00,880
每一行的末尾。

55
00:03:00,880 --> 00:03:04,270
但他們不是絕對必要的，
特別是當你只有一個

56
00:03:04,270 --> 00:03:05,580
屬性定義。

57
00:03:05,580 --> 00:03:08,370
現在讓我們保存文件並重新加載
在Chrome瀏覽器，看看有什麼

58
00:03:08,370 --> 00:03:11,000
淨效應是。

59
00:03:11,000 --> 00:03:13,470
早在Chrome瀏覽器在這裡，
讓我們點擊刷新。

60
00:03:13,470 --> 00:03:15,800
>> 現在我們有一個稍微更有趣
約翰主頁

61
00:03:15,800 --> 00:03:19,000
哈佛，由此與該第一線
他的名字，這是這裡面

62
00:03:19,000 --> 00:03:23,470
第一個div，是36像素高，還
粗體字，由此，第二行，

63
00:03:23,470 --> 00:03:27,340
這是在第二個div，是24
像素高，但不是黑體。

64
00:03:27,340 --> 00:03:31,500
並由此在該第三第三行
格為12像素高，還

65
00:03:31,500 --> 00:03:32,610
沒有黑體字。

66
00:03:32,610 --> 00:03:35,380
但是假設我現在想轉移
這一切的文字超過

67
00:03:35,380 --> 00:03:36,650
這樣，它的中心。

68
00:03:36,650 --> 00:03:40,480
>> 我可以使每一個個體的
的div作為為中心。

69
00:03:40,480 --> 00:03:45,330
但更容易，可能我的包裹
第四個div中3的div，一個

70
00:03:45,330 --> 00:03:49,360
父分區，可以這麼說，並指定
那該div及其所有

71
00:03:49,360 --> 00:03:52,610
後人應該是
文本對齊中心？

72
00:03:52,610 --> 00:03:54,120
讓我們一起來看看。

73
00:03:54,120 --> 00:03:58,510
>> 裡面的gedit，讓我們回到我
體，並添加一個新的div了頂配

74
00:03:58,510 --> 00:04:04,460
格，風格等於報價引文結束
文本對齊市中心，靠近

75
00:04:04,460 --> 00:04:06,250
分號後引述。

76
00:04:06,250 --> 00:04:10,280
現在，讓我們繼續前進，所有縮進
那些我們以前鍵入行。

77
00:04:10,280 --> 00:04:15,040
以下是第三格，讓我們
關閉這個新的div。

78
00:04:15,040 --> 00:04:18,829
>> 換句話說，因為這三個
原來的div現在的孩子，所以要

79
00:04:18,829 --> 00:04:22,110
講一個新的父div的，我已經
指定我想對齊

80
00:04:22,110 --> 00:04:26,140
在該中心的父div的文本
頁面，該屬性將

81
00:04:26,140 --> 00:04:28,290
繼承了所有這些孩子。

82
00:04:28,290 --> 00:04:32,370
事實上，讓我們保存文件並
走在瀏覽器中看看。

83
00:04:32,370 --> 00:04:34,650
讓我們重新在Chrome。

84
00:04:34,650 --> 00:04:37,540
我們在那裡有它，一個更漂亮
主頁約翰哈佛。

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