1
00:00:00,000 --> 00:00:05,660
>> [MUSIC CHƠI]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Vì vậy, chúng ta hãy thêm một
video để nói về một ngôn ngữ hơn.

3
00:00:08,740 --> 00:00:10,800
Lần này chúng ta sẽ nói về CSS.

4
00:00:10,800 --> 00:00:13,460
Vì vậy, CSS, mà là viết tắt
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
là một ngôn ngữ khác, chúng tôi sử dụng
khi xây dựng trang web.

6
00:00:16,149 --> 00:00:17,190
Hãy suy nghĩ về nó như thế này.

7
00:00:17,190 --> 00:00:20,900
Nếu HTML là những gì chúng tôi sử dụng để tổ chức các
nội dung, chúng tôi muốn đặt trên trang của chúng tôi,

8
00:00:20,900 --> 00:00:25,390
CSS là công cụ mà chúng ta thường sử dụng
để tùy chỉnh cách trang web của chúng tôi nhìn,

9
00:00:25,390 --> 00:00:30,410
và làm thế nào những trải nghiệm người dùng thực sự
là, tương tác với trang web của chúng tôi.

10
00:00:30,410 --> 00:00:32,535
>> Tương tự như HTML, CSS là
không phải là một ngôn ngữ lập trình.

11
00:00:32,535 --> 00:00:33,451
Nó không có logic.

12
00:00:33,451 --> 00:00:34,595
Nó không có các biến.

13
00:00:34,595 --> 00:00:38,890
Nó không có bất kỳ loại đó
chảy những thứ liên quan mà C không.

14
00:00:38,890 --> 00:00:40,150
Nó là một ngôn ngữ tạo kiểu.

15
00:00:40,150 --> 00:00:42,810
Và cú pháp của nó là khá
đơn giản, và cũng chỉ mô tả

16
00:00:42,810 --> 00:00:46,240
làm thế nào các yếu tố của chúng tôi
Trang có HTML nào đó

17
00:00:46,240 --> 00:00:48,190
yếu tố cần được sửa đổi.

18
00:00:48,190 --> 00:00:51,170
Cuối cùng, nếu bạn chưa có
chưa xem video của chúng tôi trên HTML,

19
00:00:51,170 --> 00:00:53,290
hoặc không quen với
HTML thông thường, bạn

20
00:00:53,290 --> 00:00:57,430
có thể muốn có một cái nhìn lúc đó
đầu tiên, bởi vì cuộc thảo luận này của CSS

21
00:00:57,430 --> 00:01:00,700
sẽ phụ thuộc vào
một số kiến ​​thức về HTML.

22
00:01:00,700 --> 00:01:03,740
>> Vì vậy, đây là một thực sự
đơn giản CSS stylesheet.

23
00:01:03,740 --> 00:01:06,480
Ngay cả khi bạn chưa bao giờ
lập trình với CSS trước,

24
00:01:06,480 --> 00:01:10,624
Tôi chắc rằng bạn có thể tìm ra
chính xác những gì kiểu này không.

25
00:01:10,624 --> 00:01:11,290
Nó làm gì?

26
00:01:11,290 --> 00:01:15,470
Vâng, áp dụng đối với cơ thể của web của chúng tôi
trang, tất cả mọi thứ giữa các thẻ cơ thể

27
00:01:15,470 --> 00:01:19,631
vào HTML của chúng tôi, và nó đặt
màu nền của trang sang màu xanh.

28
00:01:19,631 --> 00:01:21,130
Vâng, đó là một kiểu rất đơn giản.

29
00:01:21,130 --> 00:01:23,269
Nó thực sự rất con người
ngôn ngữ thân thiện, CSS.

30
00:01:23,269 --> 00:01:26,560
Vì vậy, ngay cả khi bạn chưa bao giờ sử dụng nó trước,
bạn có thể có thể đoán những gì đã làm.

31
00:01:26,560 --> 00:01:30,140
Trong thực tế, nếu chúng ta nạp một trang, nơi
stylesheet này được nhúng bằng cách nào đó,

32
00:01:30,140 --> 00:01:36,240
màu nền của trang của chúng tôi sẽ
có màu xanh, và không phải là màu trắng tiêu chuẩn.

33
00:01:36,240 --> 00:01:37,670
>> Vì vậy, làm thế nào để chúng ta xây dựng stylesheets?

34
00:01:37,670 --> 00:01:39,700
Cũng lần đầu tiên, chúng ta phải
xác định một chọn.

35
00:01:39,700 --> 00:01:42,970
Trong ví dụ trước,
selector đó là cơ thể.

36
00:01:42,970 --> 00:01:45,050
Sau đó, chúng tôi có một mở
ngoặc móc, và chúng tôi

37
00:01:45,050 --> 00:01:48,410
sẽ bắt đầu xác định
stylesheet cho selector đó.

38
00:01:48,410 --> 00:01:51,800
Ở giữa dấu ngoặc nhọn, chúng tôi
chỉ có một danh sách các cặp giá trị quan trọng.

39
00:01:51,800 --> 00:01:56,205
Các cặp giá trị trước đó là
màu nền màu xanh chấm phẩy,

40
00:01:56,205 --> 00:01:57,830
nhưng chúng ta có thể làm được nhiều hơn và nhiều hơn nữa trong số này.

41
00:01:57,830 --> 00:02:02,330
Bạn có thể có nhiều điều áp
để mà tag, mà cơ thể selector.

42
00:02:02,330 --> 00:02:05,960
Mỗi người trong số họ bị ngăn cách bởi một
dấu chấm phẩy, và chúng tôi kêu gọi mỗi người trong số họ

43
00:02:05,960 --> 00:02:08,949
một tuyên bố, một tờ khai CSS.

44
00:02:08,949 --> 00:02:12,410
Khi chúng tôi đang thực hiện với tất cả các kiểu dáng chúng tôi
muốn áp dụng cho rằng tag đặc biệt,

45
00:02:12,410 --> 00:02:15,300
chúng ta chỉ có một xoăn đóng
cú đúp để kết thúc kiểu,

46
00:02:15,300 --> 00:02:19,640
và chúng tôi đang thực hiện việc xác định các kiểu
cho rằng chọn đặc biệt.

47
00:02:19,640 --> 00:02:21,341
>> Một số thuộc tính CSS chung là gì?

48
00:02:21,341 --> 00:02:23,590
Vâng, có lẽ bạn muốn đặt
một đường viền xung quanh một cái gì đó.

49
00:02:23,590 --> 00:02:26,850
Vì vậy, bạn có thể nói, biên giới,
đó sẽ là chìa khóa của bạn,

50
00:02:26,850 --> 00:02:29,460
và sau đó giá trị của bạn sẽ được,
những gì phong cách, màu sắc, và chiều rộng

51
00:02:29,460 --> 00:02:30,209
bạn muốn nó được.

52
00:02:30,209 --> 00:02:33,530
Vì vậy, các phong cách có thể là một chất rắn
đường, một đường chấm chấm, một nét đứt,

53
00:02:33,530 --> 00:02:36,020
một đường sống núi, đó sẽ là đường lượn sóng.

54
00:02:36,020 --> 00:02:38,790
Có lẽ bạn muốn có nó
có màu xanh hoặc màu đen hoặc màu xanh lá cây.

55
00:02:38,790 --> 00:02:41,490
Có lẽ bạn muốn nó được
1 hoặc 2 hoặc 10 pixels.

56
00:02:41,490 --> 00:02:43,254
Bạn có thể chỉ định tất cả những điều đó.

57
00:02:43,254 --> 00:02:46,420
Có lẽ bạn muốn thiết lập nền
màu sắc của trang của bạn trong một cách đặc biệt.

58
00:02:46,420 --> 00:02:49,215
Chúng ta đã thấy rằng, việc thiết lập
nền của cơ thể là màu xanh.

59
00:02:49,215 --> 00:02:52,080
>> Sau đó, bạn có thể sử dụng một từ khóa,
vì vậy CSS có màu sắc nhất định

60
00:02:52,080 --> 00:02:55,950
được xây dựng vào nó, xanh dương, xanh lá cây,
màu đen, một màu sắc rất đơn giản, chúng tôi biết.

61
00:02:55,950 --> 00:02:59,110
Nhưng bạn cũng có thể chỉ định bất kỳ
hex màu sắc mà bạn muốn.

62
00:02:59,110 --> 00:03:05,190
Nhớ lại rằng màu sắc có thể được xác định
bởi một bộ ba số hex

63
00:03:05,190 --> 00:03:08,500
0-255, rg và b,
màu đỏ, xanh lá cây, và màu xanh thành phần.

64
00:03:08,500 --> 00:03:10,590
Và vì vậy chúng tôi có thể xác định
bất kỳ màu theo ý muốn bằng cách,

65
00:03:10,590 --> 00:03:15,520
thay vì sử dụng màu xanh hoặc màu xanh lá cây hoặc màu đen,
sử dụng bảng Anh và sau đó sáu chữ số hex,

66
00:03:15,520 --> 00:03:18,310
và đó sẽ cung cấp cho chúng tôi
màu sáu chữ số.

67
00:03:18,310 --> 00:03:19,850
Vì vậy, đó là màu nền.

68
00:03:19,850 --> 00:03:21,975
>> Chúng tôi cũng có tiền cảnh
màu sắc, mà thường là

69
00:03:21,975 --> 00:03:24,140
sẽ được các văn bản của trang của bạn.

70
00:03:24,140 --> 00:03:28,850
Và tương tự như vậy bạn có thể làm điều đó
với từ khóa và hay sáu chữ số hex.

71
00:03:28,850 --> 00:03:32,140
Vì vậy, bạn có thể chỉ định bất kỳ màu nào bạn
muốn cho các văn bản của trang của bạn

72
00:03:32,140 --> 00:03:36,370
đối với một đặc biệt
màu nền, lên trên.

73
00:03:36,370 --> 00:03:39,100
Bạn cũng có thể thay đổi và đối phó
với font chữ, và cách thức văn bản

74
00:03:39,100 --> 00:03:40,400
được hiển thị trên trang.

75
00:03:40,400 --> 00:03:42,010
>> Vì vậy, bạn có thể thay đổi kích thước font chữ của bạn.

76
00:03:42,010 --> 00:03:46,320
Bạn có thể sử dụng các từ khóa, ví dụ như thêm,
thêm nhỏ, hoặc xx nhỏ, hoặc trung bình,

77
00:03:46,320 --> 00:03:47,660
lớn, và như vậy.

78
00:03:47,660 --> 00:03:50,750
Bạn có thể sử dụng các điểm cố định, 10
điểm, 12 điểm, và như vậy.

79
00:03:50,750 --> 00:03:55,850
Bạn có thể sử dụng tỷ lệ phần trăm, 80%, 20%,
trong đó 100% là các phông chữ mặc định

80
00:03:55,850 --> 00:03:59,220
kích thước, mà thường là sẽ
là một cái gì đó giống như 11 hoặc 12 điểm.

81
00:03:59,220 --> 00:04:01,659
Hoặc thậm chí bạn có thể căn cứ nó đi
kích thước phông chữ gần đây nhất.

82
00:04:01,659 --> 00:04:04,950
Nếu bạn chỉ viết một cái gì đó và bạn biết
những gì bạn muốn là cho nó nhỏ hơn,

83
00:04:04,950 --> 00:04:08,241
nhưng bạn không biết chính xác những gì kích thước bạn
muốn nó được, tốt, bạn có thể chỉ cần nói,

84
00:04:08,241 --> 00:04:09,330
kích thước phông chữ nhỏ hơn.

85
00:04:09,330 --> 00:04:14,344
Và nó sẽ căn cứ tắt của,
chỉ lên trên, đó là kích thước font.

86
00:04:14,344 --> 00:04:15,760
Và bạn có thể nhận được nhỏ hơn hoặc lớn hơn.

87
00:04:15,760 --> 00:04:18,390
Vì vậy, có rất nhiều khác nhau
cách để xác định kích thước font.

88
00:04:18,390 --> 00:04:20,690
>> Bạn cũng có thể xác định những gì
gia đình font bạn muốn.

89
00:04:20,690 --> 00:04:23,360
Nếu bạn có một đặc biệt
tên, có một cách trong CSS--

90
00:04:23,360 --> 00:04:27,270
chúng tôi sẽ không nói về nó
here-- để xác định một kiểu chữ rất cụ thể

91
00:04:27,270 --> 00:04:28,980
và nhúng nó vào trang của bạn.

92
00:04:28,980 --> 00:04:30,620
Bạn cũng có thể sử dụng tên chung.

93
00:04:30,620 --> 00:04:33,540
Có rất nhiều phông chữ web an toàn
được xác định trước trong CSS.

94
00:04:33,540 --> 00:04:36,352
Và nếu bạn là một người sử dụng của Microsoft
Văn phòng trong 20 năm qua,

95
00:04:36,352 --> 00:04:38,810
bạn có thể quen với
rất nhiều các phông chữ web an toàn

96
00:04:38,810 --> 00:04:44,640
đã, Times New Roman, Arial,
Chuyển phát nhanh mới, Georgia, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
và như vậy.

98
00:04:45,470 --> 00:04:47,170
Những người được coi là tất cả các phông chữ web an toàn.

99
00:04:47,170 --> 00:04:49,169
Và trên thực tế, một phần của
Lý do họ đã đến được

100
00:04:49,169 --> 00:04:54,140
đã được sử dụng để làm web-- mỗi trang
đã truy cập mặc định này đặt các phông chữ

101
00:04:54,140 --> 00:04:58,480
với serifs khác nhau, và tất cả điều này
thứ chữ, chúng tôi sẽ không nhận được vào,

102
00:04:58,480 --> 00:05:01,130
nhưng thường
truy cập trong CSS của bạn,

103
00:05:01,130 --> 00:05:04,029
thậm chí nếu bạn không
nếu không xác định phông chữ.

104
00:05:04,029 --> 00:05:07,070
Cuối cùng, bạn có thể sắp xếp văn bản của bạn,
thay vì nó là, theo mặc định, phù hợp

105
00:05:07,070 --> 00:05:09,310
sang bên trái, bạn có thể
sắp xếp nó sang bên phải,

106
00:05:09,310 --> 00:05:13,740
hoặc bạn có thể sắp xếp nó làm trung tâm, hoặc
hợp lý để nó đánh cả hai lề.

107
00:05:13,740 --> 00:05:16,800
Vì vậy, đó là tất cả các tùy chọn mà bạn có thể sử dụng
để thay đổi văn bản của bạn trông như thế nào,

108
00:05:16,800 --> 00:05:20,120
và làm thế nào nó được hiển thị trên trang của bạn.

109
00:05:20,120 --> 00:05:22,180
>> Selectors của bạn không
phải có thẻ chỉ.

110
00:05:22,180 --> 00:05:25,539
Trước đây chúng ta đã thấy một cơ thể tag
chọn, và chọn thẻ

111
00:05:25,539 --> 00:05:26,580
trông chỉ như thế.

112
00:05:26,580 --> 00:05:30,020
Bạn đặt tên cho một từ khóa, và sau đó bạn
xác định một stylesheet cho tag đó.

113
00:05:30,020 --> 00:05:32,660
Nhưng bạn cũng có thể làm điều gì đó
được gọi là một bộ chọn ID.

114
00:05:32,660 --> 00:05:34,390
Một bộ chọn ID trông khá tương tự.

115
00:05:34,390 --> 00:05:38,100
Nhưng cần chú ý, mà bây giờ tôi không sử dụng
một thẻ HTML, tôi đang sử dụng, trong trường hợp này,

116
00:05:38,100 --> 00:05:40,720
#unique, hoặc băm độc đáo.

117
00:05:40,720 --> 00:05:42,930
Nếu bạn nhớ lại từ chúng tôi
video trên HTML, chúng tôi nói chuyện

118
00:05:42,930 --> 00:05:45,620
khoảng cách các thẻ có thể có các thuộc tính.

119
00:05:45,620 --> 00:05:48,340
>> Và một trong những thuộc tính mà áp dụng
khá nhiều tất cả các thẻ HTML,

120
00:05:48,340 --> 00:05:51,440
nhưng chúng tôi không nói về nó,
là một cái gì đó gọi là thẻ ID.

121
00:05:51,440 --> 00:05:55,250
Vì vậy, CSS đặc biệt này sẽ
chỉ áp dụng cho thẻ HTML mà có

122
00:05:55,250 --> 00:05:58,530
một ID rất cụ thể, mà bạn đã đặt tên.

123
00:05:58,530 --> 00:06:01,000
Vì vậy, nếu bạn có một nơi nào đó
trong mã của bạn, một nơi nào đó

124
00:06:01,000 --> 00:06:06,090
trong tập tin HTML của bạn, một thẻ và bạn
xác định như là một thuộc tính thẻ đó,

125
00:06:06,090 --> 00:06:09,060
ID bằng độc đáo, đây
Đặc biệt stylesheet

126
00:06:09,060 --> 00:06:15,030
ở đây sẽ chỉ áp dụng ở giữa
mà tag với ID của độc đáo.

127
00:06:15,030 --> 00:06:17,180
>> Bạn cũng có thể làm điều gì đó
được gọi là một bộ chọn lớp.

128
00:06:17,180 --> 00:06:19,920
Vì vậy, ngoài việc có
ID thuộc tính, bạn cũng có thể

129
00:06:19,920 --> 00:06:23,130
thêm một thuộc tính lớp để các thẻ HTML.

130
00:06:23,130 --> 00:06:27,140
Và khi bạn sử dụng một thuộc tính lớp,
nó có thể được áp dụng cho nhiều thẻ.

131
00:06:27,140 --> 00:06:31,880
Vì vậy, nếu bạn có một vài điều mà
được tương tự, có lẽ bạn muốn nói,

132
00:06:31,880 --> 00:06:35,890
tag mở blah, blah, blah,
blah, lớp học bằng các học sinh.

133
00:06:35,890 --> 00:06:38,190
Và sau đó đặc biệt này
stylesheet sẽ áp dụng

134
00:06:38,190 --> 00:06:42,041
để mỗi thẻ có class là sinh viên.

135
00:06:42,041 --> 00:06:44,290
Trong trường hợp này, chúng tôi muốn đặt
màu nền sang màu vàng,

136
00:06:44,290 --> 00:06:46,706
và chúng tôi muốn thiết lập opacity, mà
là một từ khóa, chúng tôi đã không nói chuyện về,

137
00:06:46,706 --> 00:06:52,510
nhưng chỉ đề với cách minh bạch
một cái gì đó là, đến 70%, trong trường hợp này.

138
00:06:52,510 --> 00:06:54,430
>> Có hai lựa chọn cho
viết stylesheet.

139
00:06:54,430 --> 00:06:56,680
Bạn có thể viết chúng
trực tiếp vào HTML của bạn

140
00:06:56,680 --> 00:06:59,690
bằng cách đặt các stylesheets
ở giữa các thẻ style.

141
00:06:59,690 --> 00:07:03,850
Và những thẻ phong cách đi vào bên trong của
các thẻ đầu của trang web của bạn.

142
00:07:03,850 --> 00:07:08,240
Cách có lẽ nhiều người ưa thích để làm
nó là để viết một tập tin .css riêng biệt,

143
00:07:08,240 --> 00:07:12,360
và sau đó liên kết nó thành của bạn
tài liệu bằng cách sử dụng thẻ liên kết.

144
00:07:12,360 --> 00:07:14,690
Thẻ liên kết, một lần nữa, là
khác nhau từ các siêu liên kết,

145
00:07:14,690 --> 00:07:16,760
nếu bạn nhớ lại từ video của chúng tôi một HTML.

146
00:07:16,760 --> 00:07:19,030
Và thẻ liên kết là cách chúng tôi
kéo trong các tập tin riêng biệt.

147
00:07:19,030 --> 00:07:23,900
Nó gần giống như tương đương với
# include cho lập trình web.

148
00:07:23,900 --> 00:07:27,140
>> Vì vậy, chúng ta hãy nhìn vào table.HTML.

149
00:07:27,140 --> 00:07:29,380
Nếu bạn nhớ lại từ chúng tôi
Video HTML, tôi thấy

150
00:07:29,380 --> 00:07:32,000
một ví dụ về một rất
nhân đơn giản

151
00:07:32,000 --> 00:07:35,160
bảng trông khá
xấu xí, và có thể có

152
00:07:35,160 --> 00:07:38,650
một cách để làm cho nó tốt hơn với
CSS, để làm cho nó thực sự nhìn

153
00:07:38,650 --> 00:07:41,120
giống như một phép nhân
bảng, hoặc cái gì

154
00:07:41,120 --> 00:07:43,730
đó không phải là chỉ dính nhau
không có bộ phận thực tế

155
00:07:43,730 --> 00:07:45,532
giữa các hàng và các cột.

156
00:07:45,532 --> 00:07:47,490
Vì vậy, hãy đi qua để
CS50 IDE, và có một cái nhìn

157
00:07:47,490 --> 00:07:50,780
cách CSS có thể, loại, tinh chỉnh
những gì chúng ta bắt đầu với trước,

158
00:07:50,780 --> 00:07:53,290
và làm cho nó một cái gì đó tốt hơn rất nhiều.

159
00:07:53,290 --> 00:07:55,650
>> Vì vậy, chúng tôi đang ở trong CS50 IDE
bây giờ, và nếu không quen thuộc,

160
00:07:55,650 --> 00:07:58,710
chúng ta sẽ kéo lên trong này
bảng trang HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML cơ bản
chỉ xác định các nội dung

162
00:08:01,090 --> 00:08:05,044
của một multiple-- nó được cho là có
một bảng cửu chương bốn bốn.

163
00:08:05,044 --> 00:08:06,210
Nó khá dễ hiểu.

164
00:08:06,210 --> 00:08:09,410
Và chúng ta sẽ nghĩ rằng nó sẽ
nhìn tổ chức khá tốt.

165
00:08:09,410 --> 00:08:15,277
Nhưng trong thực tế, khi chúng ta xem trước trang này,
chúng ta thấy rằng nó là loại xấu xí, phải không?

166
00:08:15,277 --> 00:08:16,860
Rõ ràng chúng ta có hàng và cột ở đây.

167
00:08:16,860 --> 00:08:18,350
Có một số loại ly thân.

168
00:08:18,350 --> 00:08:20,040
Nhưng nó không phải là một sự tách biệt có ý nghĩa.

169
00:08:20,040 --> 00:08:23,105
Chúng tôi không thực sự nhận được
quá nhiều thông tin ở đây.

170
00:08:23,105 --> 00:08:25,730
Và không có sự tách biệt giữa
các hàng và cột về

171
00:08:25,730 --> 00:08:28,460
các quy tắc ngang hoặc dọc.

172
00:08:28,460 --> 00:08:31,530
Chúng tôi có thể có thể thực hiện điều này
nhìn một chút tốt hơn.

173
00:08:31,530 --> 00:08:32,934
Vì vậy, hãy cố gắng.

174
00:08:32,934 --> 00:08:34,559
Vì vậy, tôi sẽ đóng tab này lên đây.

175
00:08:34,559 --> 00:08:37,434
Và tôi sẽ đóng table.HTML của tôi,
và tôi có một phiên bản khác tại đây

176
00:08:37,434 --> 00:08:39,490
gọi table2.HTML.

177
00:08:39,490 --> 00:08:40,655
Chúng tôi sẽ mở mà lên.

178
00:08:40,655 --> 00:08:42,530
Cơ thể của trang là
khá giống nhau,

179
00:08:42,530 --> 00:08:44,238
nhưng tôi đã thay đổi
chút ở đầu trang.

180
00:08:44,238 --> 00:08:47,132
Và tôi sẽ di chuyển lên đây.

181
00:08:47,132 --> 00:08:49,340
Chú ý rằng thời gian này, tôi
sử dụng các thẻ phong cách nhúng.

182
00:08:49,340 --> 00:08:53,550
Tôi đã mở một thẻ phong cách, và tôi bây giờ
xác định một kiểu CSS chỉ bên trong

183
00:08:53,550 --> 00:08:54,310
của nó.

184
00:08:54,310 --> 00:08:56,310
Tôi có một kiểu mà nói, bảng.

185
00:08:56,310 --> 00:08:58,170
Đó là chọn từ khóa của tôi.

186
00:08:58,170 --> 00:09:01,340
Tôi không sử dụng dấu chấm hoặc băm,
mà tôi sẽ làm nếu tôi

187
00:09:01,340 --> 00:09:03,710
đã được sử dụng một ID hoặc chọn lớp.

188
00:09:03,710 --> 00:09:06,190
Tôi có một chọn thẻ bảng here--.

189
00:09:06,190 --> 00:09:10,090
Phong cách này sẽ
áp dụng đối với mỗi thẻ bảng.

190
00:09:10,090 --> 00:09:14,950
Rõ ràng tôi muốn đặt một một
điểm ảnh rộng, đường viền màu xanh rắn,

191
00:09:14,950 --> 00:09:15,779
bên bàn của tôi.

192
00:09:15,779 --> 00:09:18,320
Đó là âm thanh như nó sẽ có thể
giúp tình hình, phải không?

193
00:09:18,320 --> 00:09:20,320
Chúng ta sẽ có
những điều trông tốt hơn rất nhiều.

194
00:09:20,320 --> 00:09:21,190
Vì vậy, điều này là tốt.

195
00:09:21,190 --> 00:09:23,540
Phong cách, tôi đã chỉ
nhúng stylesheet của tôi ở đây.

196
00:09:23,540 --> 00:09:25,100
Nó chắc chắn là một
cách chấp nhận được để làm điều đó.

197
00:09:25,100 --> 00:09:26,391
Hãy xem những gì trông như thế nào.

198
00:09:26,391 --> 00:09:29,790
Vì vậy, tôi sẽ quay trở lại xuống đây, và
Tôi sẽ sẽ xem trước table2.HTML của tôi.

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

200
00:09:32,430 --> 00:09:36,470
Vâng, đó không hẳn là những gì tôi muốn,
nhưng nó là chính xác những gì chúng tôi yêu cầu.

201
00:09:36,470 --> 00:09:39,530
Chúng tôi cho rằng phong cách này là
sẽ áp dụng để bàn của chúng tôi.

202
00:09:39,530 --> 00:09:43,810
Bảng của chúng tôi bây giờ có một một điểm ảnh
rộng, rắn viền màu xanh xung quanh nó.

203
00:09:43,810 --> 00:09:46,237
Chúng tôi không thực sự nhận được
tại các ô của bảng.

204
00:09:46,237 --> 00:09:47,570
Chúng tôi chỉ nhận được tại bàn.

205
00:09:47,570 --> 00:09:49,310
Vì vậy, CSS làm việc.

206
00:09:49,310 --> 00:09:51,890
Nó đã áp dụng một
stylesheet để bàn của chúng tôi.

207
00:09:51,890 --> 00:09:53,981
Nhưng không hoàn toàn làm
những gì chúng tôi muốn nó làm.

208
00:09:53,981 --> 00:09:55,730
Làm thế nào để chúng ta có được để làm
những gì chúng ta muốn nó làm gì?

209
00:09:55,730 --> 00:09:59,287
>> Vâng, chúng ta hãy xem một trong nhiều
phiên bản này trong table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Vì vậy, tôi chỉ cần đi để đóng các tab.

211
00:10:00,870 --> 00:10:03,890
Tôi sẽ quay trở lại qua đây để tôi
nộp cây, và mở ra table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Một lần nữa, nó sẽ trông khá
tương tự ở đây lúc đầu.

214
00:10:10,350 --> 00:10:14,460
Nhưng thông báo, thời gian này, thay vì sử dụng
một kiểu nhúng ngay trong đó,

215
00:10:14,460 --> 00:10:18,870
Tôi sẽ liên kết trong một
stylesheet bằng cách sử dụng thẻ liên kết.

216
00:10:18,870 --> 00:10:22,480
Vì vậy, tôi dường như liên kết trong một
stylesheet gọi tables.CSS,

217
00:10:22,480 --> 00:10:25,090
và cũng bằng này
stylesheet chỉ means-- tốt,

218
00:10:25,090 --> 00:10:28,645
tập tin này liên quan đến những gì là những gì
Tôi doing-- là một kiểu mà tôi

219
00:10:28,645 --> 00:10:29,821
sử dụng cho trang web của tôi.

220
00:10:29,821 --> 00:10:32,320
Vì vậy, nếu tôi thực sự muốn nhìn thấy những gì
Tôi đang làm với CSS ở đây,

221
00:10:32,320 --> 00:10:35,010
Tôi cần phải đi mở
table.CSS nộp là tốt.

222
00:10:35,010 --> 00:10:37,490
Vì vậy, chúng tôi sẽ quay trở lại qua đây
một lần nữa để cây tập tin của chúng tôi.

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

224
00:10:38,660 --> 00:10:40,490
Chúng tôi sẽ bật nó mở.

225
00:10:40,490 --> 00:10:43,070
Bây giờ chúng ta đang thấy một chút của CSS.

226
00:10:43,070 --> 00:10:45,630
Rõ ràng, tôi có một cặp vợ chồng
điều đang xảy ra ở đây.

227
00:10:45,630 --> 00:10:48,950
Tôi dường như muốn đặt một năm
điểm ảnh rộng, đường viền màu đỏ rắn,

228
00:10:48,950 --> 00:10:50,287
xung quanh bàn của tôi.

229
00:10:50,287 --> 00:10:52,870
Chúng tôi đã biết rằng đó là đi
chỉ cần đi theo chu vi.

230
00:10:52,870 --> 00:10:56,180
Chúng tôi thấy rằng trong table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Với mỗi hàng, tôi
dường như muốn xác định

232
00:10:58,770 --> 00:11:01,950
rằng chiều cao hàng là 50 điểm ảnh cao.

233
00:11:01,950 --> 00:11:05,680
Vì vậy, cho mỗi hàng, nhớ
đó là những gì các tag tr nào,

234
00:11:05,680 --> 00:11:08,550
Tôi đang làm cho nó 50 điểm ảnh cao.

235
00:11:08,550 --> 00:11:09,804
>> Cuối cùng, tôi có nhận xét này.

236
00:11:09,804 --> 00:11:11,470
Và đây là cách chúng tôi thực hiện ý kiến ​​trong CSS.

237
00:11:11,470 --> 00:11:16,174
Nó rất giống để nắm bắt khối
comments sao slash cú pháp.

238
00:11:16,174 --> 00:11:17,090
Tất cả các văn bản mà bạn muốn.

239
00:11:17,090 --> 00:11:19,470
Không có dấu gạch chéo slash mặc dù trong CSS.

240
00:11:19,470 --> 00:11:23,400
Đối với ý kiến ​​ngắn nội tuyến, chúng tôi có
sử dụng định dạng này đặc biệt ở đây.

241
00:11:23,400 --> 00:11:26,830
Dường như tôi đang làm một
rất nhiều điều trong thẻ td của tôi.

242
00:11:26,830 --> 00:11:29,710
Ghi thẻ td, hoặc bàn
dữ liệu, mà thực sự chỉ là

243
00:11:29,710 --> 00:11:32,210
các cột bên trong
hàng của chúng tôi, và rõ ràng

244
00:11:32,210 --> 00:11:35,090
cho mỗi phần dữ liệu
trong bảng của tôi, tôi muốn

245
00:11:35,090 --> 00:11:38,850
để thiết lập màu nền cho
có màu đen, màu sắc để có màu trắng,

246
00:11:38,850 --> 00:11:40,320
màu sắc là màu nền trước.

247
00:11:40,320 --> 00:11:42,360
Vì vậy, đây sẽ là
các văn bản của trang web của tôi.

248
00:11:42,360 --> 00:11:45,140
Tôi muốn phông chữ lớn, 22
trỏ font, và tôi muốn

249
00:11:45,140 --> 00:11:47,001
nó là của gia đình font, Georgia.

250
00:11:47,001 --> 00:11:48,750
Vì vậy, tôi sẽ không để
có các font mặc định.

251
00:11:48,750 --> 00:11:51,820
Tôi sẽ chỉ định Georgia, mà
là một trong những phông chữ web an toàn

252
00:11:51,820 --> 00:11:53,830
mà chúng ta đã thấy trước đây.

253
00:11:53,830 --> 00:11:57,284
Tôi muốn văn bản của tôi phải được liên kết
trung tâm, ở giữa hộp,

254
00:11:57,284 --> 00:11:59,450
Tôi không muốn nó bị bỏ lại
phù hợp hoặc phải phù hợp.

255
00:11:59,450 --> 00:12:03,461
Và tôi muốn chiều rộng cột của tôi
là 50 pixels rộng là tốt.

256
00:12:03,461 --> 00:12:05,210
Chúng ta hãy nhìn vào
điều này có vẻ như,

257
00:12:05,210 --> 00:12:07,470
và xem nếu điều này có lẽ là một sự cải tiến.

258
00:12:07,470 --> 00:12:12,890
Vì vậy, tôi sẽ đi đến table3.HTML, mà
thu hồi, bao gồm table.CSS như một liên kết,

259
00:12:12,890 --> 00:12:14,830
và chúng tôi sẽ xem trước nó.

260
00:12:14,830 --> 00:12:16,800
Đó là tốt hơn rất nhiều, phải không?

261
00:12:16,800 --> 00:12:20,004
Điều này thực sự bắt đầu xem xét một
rất nhiều giống như một bảng cửu chương.

262
00:12:20,004 --> 00:12:21,920
Tôi đã có đường viền màu đỏ
xung quanh bàn của tôi nhưng bây giờ

263
00:12:21,920 --> 00:12:26,700
Tôi cũng đã xác định rằng
mỗi hàng là 50 pixels,

264
00:12:26,700 --> 00:12:30,220
hoặc đó là 50 pixels tall-- cớ
me-- mỗi cột là 50 pixels.

265
00:12:30,220 --> 00:12:34,251
Các dữ liệu trong mỗi cột, và chỉ
các dữ liệu, có một nền đen.

266
00:12:34,251 --> 00:12:36,000
Vì vậy, đó là lý do tại sao những người
đường trắng là có.

267
00:12:36,000 --> 00:12:38,836
Bởi vì trong không gian
giữa tất cả các tế bào,

268
00:12:38,836 --> 00:12:40,710
nó không phải là một biên giới
và của chính nó, nó chỉ

269
00:12:40,710 --> 00:12:43,170
Tôi chỉ điền vào
tế bào, mà thực sự

270
00:12:43,170 --> 00:12:46,310
làm cho các đường viền của bảng, mà
dường như đã tồn tại từ lâu, nó

271
00:12:46,310 --> 00:12:47,887
là đường trắng chỉ mỏng.

272
00:12:47,887 --> 00:12:48,720
Bây giờ họ đang nhìn thấy được.

273
00:12:48,720 --> 00:12:50,380
Bây giờ chúng vọt ra trên màn hình.

274
00:12:50,380 --> 00:12:52,920
Và do đó, đây là một rất đơn giản
stylesheet mà tôi đã áp dụng,

275
00:12:52,920 --> 00:12:56,850
và bây giờ bàn của tôi trông rất giống như
một bảng bốn bốn nhân,

276
00:12:56,850 --> 00:13:00,950
thay vì một mớ hỗn độn chỉ lộn xộn, nơi
mọi thứ rõ ràng là các hàng và cột,

277
00:13:00,950 --> 00:13:03,717
nhưng tổ chức không phải là siêu tốt.

278
00:13:03,717 --> 00:13:06,800
Chúng tôi đang thực sự chỉ trầy xước bề mặt
về những gì bạn có thể làm với CSS ở đây.

279
00:13:06,800 --> 00:13:10,330
May mắn là các tài liệu CSS
là khá đơn giản.

280
00:13:10,330 --> 00:13:14,000
Bạn sẽ sử dụng một số dạng của nó
thuộc tính, khá thường xuyên.

281
00:13:14,000 --> 00:13:16,087
Những người chúng tôi nói chuyện về
trước đó trong video này.

282
00:13:16,087 --> 00:13:18,170
Có một số bạn
có thể sẽ không sử dụng tất cả.

283
00:13:18,170 --> 00:13:19,469
Và đó là tốt, quá.

284
00:13:19,469 --> 00:13:22,010
Nhưng chỉ cần biết, rằng có một
rất nhiều tài liệu trên mạng.

285
00:13:22,010 --> 00:13:25,110
Vì vậy, ngay cả khi chúng tôi đã không bao gồm tất cả mọi thứ,
bạn chắc chắn không phải trái trên của riêng bạn.

286
00:13:25,110 --> 00:13:26,780
Nhưng CSS là thực sự vui vẻ
để thử nghiệm.

287
00:13:26,780 --> 00:13:29,040
Và tôi thật sự khuyến khích bạn
để chơi xung quanh với các trang web của bạn,

288
00:13:29,040 --> 00:13:32,180
và xem làm thế nào bạn có thể làm cho họ
xem và cảm nhận để cải thiện cho người sử dụng

289
00:13:32,180 --> 00:13:34,790
kinh nghiệm của quý khách đến thăm trang web của bạn.

290
00:13:34,790 --> 00:13:35,710
Tôi Doug Lloyd.

291
00:13:35,710 --> 00:13:37,980
Đây là CS50.

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