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

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Nó chỉ ra rằng HTML không phải là
ngôn ngữ duy nhất mà bạn có thể sử dụng bên trong

3
00:00:03,310 --> 00:00:03,895
của một trang web.

4
00:00:03,895 --> 00:00:08,100
Bạn có thể sử dụng một cái gì đó gọi là CSS, hoặc
Cascading Style Sheets, là tốt.

5
00:00:08,100 --> 00:00:12,120
CSS cho phép bạn chỉ định nhiều hơn nữa
chính xác tính thẩm mỹ của một trang web

6
00:00:12,120 --> 00:00:16,930
trang, bao gồm bố trí và kích cỡ và
màu sắc và phông chữ và nhiều hơn nữa.

7
00:00:16,930 --> 00:00:20,820
Ví dụ, chúng ta hãy tạo ra một trang web
đây gọi là CSS0 đại diện cho một

8
00:00:20,820 --> 00:00:22,740
trang chủ cho, nói, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Trên trang này, chúng tôi sẽ có John Harvard
tên, bên dưới sẽ được

10
00:00:25,480 --> 00:00:28,500
một thông điệp tốt đẹp cho du khách của mình, bên dưới
đó sẽ là một chân, với

11
00:00:28,500 --> 00:00:30,590
nói, một số thông tin bản quyền.

12
00:00:30,590 --> 00:00:34,650
Để làm điều này, hãy xác định ba đơn vị
cho trang sử dụng một thẻ

13
00:00:34,650 --> 00:00:35,670
gọi là div.

14
00:00:35,670 --> 00:00:43,880
Mở khung div, John Harvard, gần
khung div, một khung div mở,

15
00:00:43,880 --> 00:00:48,330
và bây giờ chúng tôi sẽ chỉ định một cái gì đó
như, chào mừng bạn đến trang chủ của tôi!

16
00:00:48,330 --> 00:00:50,420
Và chúng ta hãy đóng div này, là tốt.

17
00:00:50,420 --> 00:00:53,700
>> Và bây giờ là một thứ ba và cuối cùng
div, bản quyền.

18
00:00:53,700 --> 00:00:58,250
Chỉ được ưa thích, cho tôi sử dụng bây giờ là một HTML
thực thể, một biểu tượng đại diện cho

19
00:00:58,250 --> 00:01:01,140
một nhân vật mà bạn có thể không nếu không
gõ trên bàn phím của bạn.

20
00:01:01,140 --> 00:01:07,490
Trong đó, tôi sẽ làm
ký hiệu, bảng Anh, 169, dấu chấm phẩy.

21
00:01:07,490 --> 00:01:10,620
Hóa ra đó là mã số
cho các biểu tượng bản quyền.

22
00:01:10,620 --> 00:01:14,260
Sau đó, chúng ta hãy chỉ định John Harvard
đây ở phía dưới.

23
00:01:14,260 --> 00:01:17,180
Chúng ta hãy đóng div và lưu các tập tin.

24
00:01:17,180 --> 00:01:18,910
>> Bây giờ, thẻ div này là gì?

25
00:01:18,910 --> 00:01:21,970
Thẻ div chỉ đơn giản là định nghĩa một bộ phận
của trang, mà chủ yếu là một

26
00:01:21,970 --> 00:01:23,310
khu vực hình chữ nhật.

27
00:01:23,310 --> 00:01:26,850
Vì vậy, tại thời điểm này trong thời gian, tôi có ba
khu vực hình chữ nhật, một trong những ngày đầu

28
00:01:26,850 --> 00:01:27,620
của người khác.

29
00:01:27,620 --> 00:01:30,610
Vì vậy, hiện nay, hiệu quả là gần như là
mặc dù tôi đã có ba đoạn.

30
00:01:30,610 --> 00:01:33,490
Nhưng chúng ta sẽ không nhìn thấy khá nhiều
không gian màu trắng ở giữa chúng.

31
00:01:33,490 --> 00:01:36,170
>> Hãy lưu tập tin này, thay đổi của nó
quyền, và có một cái nhìn cho một

32
00:01:36,170 --> 00:01:37,990
thời điểm trong Chrome.

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

34
00:01:43,040 --> 00:01:52,440
Hãy bây giờ mở Chrome và truy cập
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Thật vậy, đây là một trang chủ
John Harvard.

36
00:01:54,630 --> 00:01:59,370
Bây giờ chúng ta phong cách hóa nó nhiều hơn một chút
chính xác sử dụng một số CSS.

37
00:01:59,370 --> 00:02:03,510
>> Trở lại trong gedit, chúng ta hãy đi vào này
thẻ div đầu tiên và thêm một phong cách

38
00:02:03,510 --> 00:02:11,060
thuộc tính xác định rằng tôi muốn một
cỡ chữ, nói rằng, 36 điểm ảnh, hoặc px.

39
00:02:11,060 --> 00:02:15,650
Và tôi muốn trọng lượng của phông chữ này
được in đậm thay vì mặc định,

40
00:02:15,650 --> 00:02:16,980
đó là bình thường.

41
00:02:16,980 --> 00:02:21,170
Cho div thứ hai, chúng ta hãy xác định
một thuộc tính phong cách mà có một

42
00:02:21,170 --> 00:02:25,550
cỡ chữ 24 pixel, vì vậy
một chút nhỏ hơn.

43
00:02:25,550 --> 00:02:28,410
Đóng dấu ngoặc kép sau dấu chấm phẩy.

44
00:02:28,410 --> 00:02:33,255
>> Cuối cùng, trong div thứ ba này, chúng ta hãy làm
phong cách bằng kích thước giá, phông chữ, và

45
00:02:33,255 --> 00:02:35,340
chúng ta hãy nói 12 pixels thời gian này.

46
00:02:35,340 --> 00:02:37,280
Gần quote sau dấu chấm phẩy.

47
00:02:37,280 --> 00:02:40,200
Chú ý rằng sau đó tôi dường như có
quy định một chút cách điệu cho

48
00:02:40,200 --> 00:02:43,770
mỗi ba divs sử dụng,
Hóa ra, CSS.

49
00:02:43,770 --> 00:02:47,820
Trong thực tế, cú pháp mà bạn nhìn thấy trong
giữa các dấu ngoặc kép là CSS,

50
00:02:47,820 --> 00:02:50,620
đặc biệt CSS tính
với các giá trị.

51
00:02:50,620 --> 00:02:53,910
Và cho rằng thẻ đầu tiên, nơi mà tôi đã
hai tài sản đó, cỡ chữ và

52
00:02:53,910 --> 00:02:57,290
trọng lượng font chữ, tôi chỉ đơn giản là tách ra
chúng với một dấu chấm phẩy.

53
00:02:57,290 --> 00:02:59,940
>> Bây giờ, chỉ vì phong cách, tôi
cũng bao gồm dấu chấm phẩy ở

54
00:02:59,940 --> 00:03:00,880
cuối mỗi dòng.

55
00:03:00,880 --> 00:03:04,270
Nhưng họ không thực sự cần thiết,
đặc biệt là khi bạn chỉ có một

56
00:03:04,270 --> 00:03:05,580
tài sản quy định.

57
00:03:05,580 --> 00:03:08,370
Bây giờ hãy lưu các tập tin và tải lại
trong Chrome, và xem những gì

58
00:03:08,370 --> 00:03:11,000
ảnh hưởng thực là.

59
00:03:11,000 --> 00:03:13,470
Trở lại trong Chrome đây,
hãy nhấn Reload.

60
00:03:13,470 --> 00:03:15,800
>> Bây giờ chúng tôi có một thú vị hơn một chút
trang chủ cho John

61
00:03:15,800 --> 00:03:19,000
Harvard, theo đó dòng đầu tiên với
tên của mình, đó là bên trong đó

62
00:03:19,000 --> 00:03:23,470
div đầu tiên, cao 36 pixel và cũng
đậm, trong đó dòng thứ hai,

63
00:03:23,470 --> 00:03:27,340
mà là ở chỗ div thứ hai, là 24
pixel cao, nhưng không đậm.

64
00:03:27,340 --> 00:03:31,500
Và theo đó dòng thứ ba trong thứ ba
div là cao 12 pixel và cũng

65
00:03:31,500 --> 00:03:32,610
không in đậm.

66
00:03:32,610 --> 00:03:35,380
Nhưng giả sử bây giờ tôi muốn chuyển
tất cả các văn bản này trên

67
00:03:35,380 --> 00:03:36,650
như vậy mà nó làm trung tâm.

68
00:03:36,650 --> 00:03:40,480
>> Tôi có thể sắp xếp mỗi cá nhân
divs như được làm trung tâm.

69
00:03:40,480 --> 00:03:45,330
Nhưng dễ dàng hơn, tôi có thể bọc những
ba divs bên trong của một div thứ tư, một

70
00:03:45,330 --> 00:03:49,360
div cha mẹ, vậy để nói chuyện, và chỉ định
rằng div và tất cả của nó

71
00:03:49,360 --> 00:03:52,610
con cháu nên
văn bản liên kết trung tâm?

72
00:03:52,610 --> 00:03:54,120
Chúng ta hãy có một cái nhìn.

73
00:03:54,120 --> 00:03:58,510
>> Bên trong gedit, chúng ta hãy quay trở lại của tôi
cơ thể và thêm một div mới lên hàng đầu với

74
00:03:58,510 --> 00:04:04,460
div, phong cách bằng quote unquote
trung tâm căn chỉnh văn bản, gần

75
00:04:04,460 --> 00:04:06,250
giá sau dấu chấm phẩy.

76
00:04:06,250 --> 00:04:10,280
Và bây giờ, chúng ta hãy đi trước và thụt tất cả
của các dòng chúng tôi gõ trước.

77
00:04:10,280 --> 00:04:15,040
Và dưới đây là div thứ ba, chúng ta hãy
đóng div mới này.

78
00:04:15,040 --> 00:04:18,829
>> Nói cách khác, bởi vì những ba
divs ban đầu bây giờ là trẻ em, do đó, để

79
00:04:18,829 --> 00:04:22,110
nói, trong một div cha mẹ mới và tôi đã
xác định rằng tôi muốn sắp xếp các

80
00:04:22,110 --> 00:04:26,140
văn bản đó div cha mẹ trong trung tâm
trang, bất động sản sẽ được

81
00:04:26,140 --> 00:04:28,290
kế thừa tất cả những trẻ em.

82
00:04:28,290 --> 00:04:32,370
Thật vậy, chúng ta hãy lưu các tập tin và
Hãy xem trong một trình duyệt.

83
00:04:32,370 --> 00:04:34,650
Hãy tải lại trong Chrome.

84
00:04:34,650 --> 00:04:37,540
Và chúng tôi đã có nó, một thậm chí đẹp hơn
trang chủ cho John Harvard.

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