1
00:00:00,000 --> 00:00:05,660
>> [เล่นเพลง]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: ดังนั้นลองมาอีกหนึ่ง
วิดีโอที่จะพูดคุยเกี่ยวกับภาษาหนึ่งที่มากขึ้น

3
00:00:08,740 --> 00:00:10,800
ในครั้งนี้เราจะพูดคุยเกี่ยวกับ CSS

4
00:00:10,800 --> 00:00:13,460
ดังนั้น CSS ที่สั้นสำหรับ
แผ่น Cascading สไตล์

5
00:00:13,460 --> 00:00:16,149
ภาษาที่เราใช้อีก
เมื่อสร้างเว็บไซต์

6
00:00:16,149 --> 00:00:17,190
คิดเกี่ยวกับมันเช่นนี้

7
00:00:17,190 --> 00:00:20,900
หาก HTML คือสิ่งที่เราใช้ในการจัดระเบียบ
เนื้อหาที่เราต้องการที่จะใส่ในหน้าของเรา

8
00:00:20,900 --> 00:00:25,390
CSS เป็นเครื่องมือที่เรามักใช้
เพื่อกำหนดวิธีการที่เว็บไซต์ของเราดู

9
00:00:25,390 --> 00:00:30,410
และวิธีการประสบการณ์การใช้งานจริงๆ
คือการมีปฏิสัมพันธ์กับเว็บไซต์ของเรา

10
00:00:30,410 --> 00:00:32,535
>> คล้ายกับ HTML, CSS เป็น
ไม่ใช่ภาษาการเขียนโปรแกรม

11
00:00:32,535 --> 00:00:33,451
มันไม่ได้มีเหตุผล

12
00:00:33,451 --> 00:00:34,595
แต่ไม่ได้มีตัวแปร

13
00:00:34,595 --> 00:00:38,890
แต่ไม่ได้มีการจัดเรียงของที่ใด ๆ
การไหลของสิ่งที่เกี่ยวข้องไม่ว่า C

14
00:00:38,890 --> 00:00:40,150
มันเป็นภาษาที่จัดแต่งทรงผม

15
00:00:40,150 --> 00:00:42,810
และไวยากรณ์ที่สวย
ที่เรียบง่ายและเพียงแค่อธิบาย

16
00:00:42,810 --> 00:00:46,240
วิธีการที่องค์ประกอบของของเรา
มีหน้า HTML บางอย่าง

17
00:00:46,240 --> 00:00:48,190
องค์ประกอบที่ควรจะแก้ไข

18
00:00:48,190 --> 00:00:51,170
ไปสิ้นสุดที่ถ้าคุณไม่ได้
ยังดูวิดีโอของเราเกี่ยวกับ HTML,

19
00:00:51,170 --> 00:00:53,290
หรือไม่คุ้นเคยกับ
HTML โดยทั่วไปคุณ

20
00:00:53,290 --> 00:00:57,430
อาจต้องการที่จะดูที่ว่า
แรกเพราะการอภิปรายของ CSS นี้

21
00:00:57,430 --> 00:01:00,700
เป็นไปได้ขึ้นอยู่กับ
ความรู้เกี่ยวกับ HTML บาง

22
00:01:00,700 --> 00:01:03,740
>> ดังนั้นนี่คือจริงๆ
CSS สไตล์ที่เรียบง่าย

23
00:01:03,740 --> 00:01:06,480
แม้ว่าคุณจะไม่เคย
โปรแกรมที่มี CSS ก่อน

24
00:01:06,480 --> 00:01:10,624
ผมค่อนข้างมั่นใจว่าคุณสามารถคิดออก
ว่าสิ่งที่สไตล์นี้จะ

25
00:01:10,624 --> 00:01:11,290
มันทำอะไร?

26
00:01:11,290 --> 00:01:15,470
ดีนำไปใช้กับร่างกายของเว็บของเรา
หน้าทุกอย่างระหว่างแท็กร่างกาย

27
00:01:15,470 --> 00:01:19,631
ใน HTML ของเราและมันกำหนด
สีพื้นหลังของหน้าสีฟ้าที่

28
00:01:19,631 --> 00:01:21,130
ดีก็เป็นสไตล์ที่เรียบง่ายมาก

29
00:01:21,130 --> 00:01:23,269
เป็นจริงของมนุษย์มาก
ภาษาที่เป็นมิตร, CSS

30
00:01:23,269 --> 00:01:26,560
ดังนั้นแม้ว่าคุณจะไม่เคยใช้มาก่อน
คุณอาจจะคาดเดาสิ่งที่ไม่

31
00:01:26,560 --> 00:01:30,140
ในความเป็นจริงถ้าเราโหลดหน้าที่
สไตล์นี้ได้รับการฝังอย่างใด

32
00:01:30,140 --> 00:01:36,240
สีพื้นหลังของหน้าเว็บของเราจะ
เป็นสีฟ้าและสีขาวไม่ได้มาตรฐาน

33
00:01:36,240 --> 00:01:37,670
>> ดังนั้นวิธีที่เราสร้าง stylesheets?

34
00:01:37,670 --> 00:01:39,700
อย่างแรกเราจะต้อง
ระบุผู้เลือก

35
00:01:39,700 --> 00:01:42,970
ในตัวอย่างที่ผ่านมา
ตัวเลือกที่เป็นร่างกาย

36
00:01:42,970 --> 00:01:45,050
จากนั้นเราก็จะมีการเปิด
วงเล็บปีกกาและเรา

37
00:01:45,050 --> 00:01:48,410
จะเริ่มต้นการกำหนด
สไตล์สำหรับเลือกว่า

38
00:01:48,410 --> 00:01:51,800
ในระหว่างวงเล็บปีกกาเรา
เพียงแค่มีรายชื่อของคู่ค่าที่สำคัญ

39
00:01:51,800 --> 00:01:56,205
ทั้งคู่ก่อนหน้านี้ค่า
สีพื้นหลังอัฒภาคสีฟ้า

40
00:01:56,205 --> 00:01:57,830
แต่เราสามารถทำอะไรได้มากขึ้นของเหล่านี้

41
00:01:57,830 --> 00:02:02,330
คุณอาจมีหลายสิ่งที่จะใช้
แท็กที่ว่าร่างกายของตัวเลือก

42
00:02:02,330 --> 00:02:05,960
แต่ละคนจะถูกแยกออกโดย
อัฒภาคและเราเรียกกันหนึ่งของพวกเขา

43
00:02:05,960 --> 00:02:08,949
ประกาศที่มีการประกาศ CSS

44
00:02:08,949 --> 00:02:12,410
เมื่อเรากำลังทำกับทุกสไตล์พวกเรา
ต้องการที่จะนำไปใช้กับแท็กโดยเฉพาะอย่างยิ่งที่

45
00:02:12,410 --> 00:02:15,300
เราก็มีหยิกปิด
รั้งที่จะจบสไตล์ที่

46
00:02:15,300 --> 00:02:19,640
และเรากำลังทำการกำหนดสไตล์
สำหรับตัวเลือกเฉพาะที่

47
00:02:19,640 --> 00:02:21,341
>> สิ่งที่บางคุณสมบัติ CSS ที่พบบ่อยคืออะไร?

48
00:02:21,341 --> 00:02:23,590
ดีบางทีคุณอาจต้องการที่จะนำ
เส้นขอบรอบ ๆ บางสิ่งบางอย่าง

49
00:02:23,590 --> 00:02:26,850
เพื่อให้คุณสามารถพูดชายแดน
ที่จะเป็นกุญแจสำคัญของคุณ

50
00:02:26,850 --> 00:02:29,460
แล้วค่าของคุณจะเป็น
สิ่งที่รูปแบบสีและความกว้าง

51
00:02:29,460 --> 00:02:30,209
คุณต้องการให้เป็น

52
00:02:30,209 --> 00:02:33,530
ดังนั้นรูปแบบอาจจะเป็นของแข็ง
สายเส้นประเส้นประ

53
00:02:33,530 --> 00:02:36,020
เส้นสันเขาซึ่งจะเป็นเส้นหยัก

54
00:02:36,020 --> 00:02:38,790
บางทีคุณอาจต้องการที่จะมีมัน
เป็นสีฟ้าหรือสีดำหรือสีเขียว

55
00:02:38,790 --> 00:02:41,490
บางทีคุณอาจจะต้องการให้เป็น
1 หรือ 2 หรือ 10 พิกเซลกว้าง

56
00:02:41,490 --> 00:02:43,254
คุณสามารถระบุทั้งหมดของสิ่งเหล่านั้น

57
00:02:43,254 --> 00:02:46,420
บางทีคุณอาจต้องการที่จะตั้งพื้นหลัง
สีของหน้าเว็บของคุณในทางหนึ่ง

58
00:02:46,420 --> 00:02:49,215
เราเห็นว่าการตั้งค่า
พื้นหลังของร่างกายที่จะเป็นสีฟ้า

59
00:02:49,215 --> 00:02:52,080
>> แล้วคุณสามารถใช้คำสำคัญ
CSS เพื่อให้มีสีบาง

60
00:02:52,080 --> 00:02:55,950
ที่ถูกสร้างขึ้นเป็นมัน, สีฟ้า, สีเขียว,
สีดำ, สีที่ง่ายมากที่เรารู้ว่า

61
00:02:55,950 --> 00:02:59,110
แต่คุณยังสามารถระบุใด ๆ
ฐานสิบหกสีที่คุณต้องการ

62
00:02:59,110 --> 00:03:05,190
จำได้ว่าสีที่สามารถระบุได้
โดยชุดของสามตัวเลขฐานสิบหก

63
00:03:05,190 --> 00:03:08,500
0-255, RG และ B ที่
สีแดง, สีเขียว, สีฟ้าและส่วนประกอบ

64
00:03:08,500 --> 00:03:10,590
และเพื่อให้เราสามารถระบุ
สีใด ๆ ที่เราต้องการโดย

65
00:03:10,590 --> 00:03:15,520
แทนการใช้ฟ้าหรือสีเขียวหรือสีดำ
ใช้ปอนด์แล้วตัวเลขหกหลักของฐานสิบหก,

66
00:03:15,520 --> 00:03:18,310
และที่จะให้เรา
สีหลักหก

67
00:03:18,310 --> 00:03:19,850
เพื่อให้เป็นสีพื้นหลัง

68
00:03:19,850 --> 00:03:21,975
>> เรายังมีเบื้องหน้า
สีซึ่งเป็นเรื่องปกติ

69
00:03:21,975 --> 00:03:24,140
จะเป็นข้อความของหน้าเว็บของคุณ

70
00:03:24,140 --> 00:03:28,850
และคุณสามารถทำในทำนองเดียวกันว่า
ด้วยคำสำคัญและฐานสิบหกหรือหกหลัก

71
00:03:28,850 --> 00:03:32,140
เพื่อให้คุณสามารถระบุสีใด ๆ ที่คุณ
ต้องการสำหรับข้อความของเพจ

72
00:03:32,140 --> 00:03:36,370
โดยเฉพาะอย่างยิ่งกับ
สีพื้นหลังขึ้นไปข้างบน

73
00:03:36,370 --> 00:03:39,100
นอกจากนี้คุณยังสามารถเปลี่ยนและจัดการ
ที่มีตัวอักษรและข้อความทาง

74
00:03:39,100 --> 00:03:40,400
จะแสดงผลบนหน้าเว็บ

75
00:03:40,400 --> 00:03:42,010
>> เพื่อให้คุณสามารถเปลี่ยนขนาดตัวอักษรของคุณ

76
00:03:42,010 --> 00:03:46,320
คุณสามารถใช้คำสำคัญเช่นพิเศษ
พิเศษขนาดเล็กหรือ XX ขนาดเล็กหรือขนาดกลาง

77
00:03:46,320 --> 00:03:47,660
ที่มีขนาดใหญ่และอื่น ๆ

78
00:03:47,660 --> 00:03:50,750
คุณสามารถใช้จุดคงที่ 10
จุดที่ 12 จุดและอื่น ๆ

79
00:03:50,750 --> 00:03:55,850
คุณสามารถใช้ร้อยละ 80%, 20%
ที่ 100% เป็นแบบอักษรเริ่มต้น

80
00:03:55,850 --> 00:03:59,220
ขนาดซึ่งมักจะไป
เป็นสิ่งที่ชอบ 11 หรือ 12 คะแนน

81
00:03:59,220 --> 00:04:01,659
หรือคุณยังสามารถฐานออก
ขนาดตัวอักษรล่าสุด

82
00:04:01,659 --> 00:04:04,950
หากคุณเพียงแค่เขียนบางสิ่งบางอย่างและคุณรู้ว่า
สิ่งที่คุณต้องการคือมันจะมีขนาดเล็กลง

83
00:04:04,950 --> 00:04:08,241
แต่คุณไม่ได้รู้ว่าสิ่งที่ขนาดที่คุณ
ต้องการให้เป็นอย่างดีคุณก็สามารถพูดได้

84
00:04:08,241 --> 00:04:09,330
ขนาดตัวอักษรที่มีขนาดเล็ก

85
00:04:09,330 --> 00:04:14,344
และมันจะออกจากฐานที่
เพียงแค่ขึ้นไปข้างบนก็ขนาดตัวอักษร

86
00:04:14,344 --> 00:04:15,760
และคุณจะได้รับมีขนาดเล็กหรือขนาดใหญ่

87
00:04:15,760 --> 00:04:18,390
เพื่อให้มีจำนวนมากที่แตกต่างกัน
วิธีการที่จะระบุขนาดตัวอักษร

88
00:04:18,390 --> 00:04:20,690
>> นอกจากนี้คุณยังสามารถระบุสิ่งที่
ครอบครัวตัวอักษรที่คุณต้องการ

89
00:04:20,690 --> 00:04:23,360
หากคุณมีโดยเฉพาะอย่างยิ่ง
ชื่อมีวิธีใน CSS--

90
00:04:23,360 --> 00:04:27,270
เราจะไม่พูดคุยเกี่ยวกับมัน
here-- การกำหนดตัวอักษรที่เฉพาะเจาะจงมาก

91
00:04:27,270 --> 00:04:28,980
และฝังลงในหน้าเว็บของคุณ

92
00:04:28,980 --> 00:04:30,620
นอกจากนี้คุณยังสามารถใช้ชื่อทั่วไป

93
00:04:30,620 --> 00:04:33,540
มีจำนวนมากของตัวอักษรที่ปลอดภัยเว็บเป็น
ที่มีการกำหนดไว้ล่วงหน้าใน CSS

94
00:04:33,540 --> 00:04:36,352
และถ้าคุณเป็นผู้ใช้ของไมโครซอฟท์
สำนักงานในช่วง 20 ปีที่ผ่านมา

95
00:04:36,352 --> 00:04:38,810
คุณอาจคุ้นเคยกับ
จำนวนมากของตัวอักษรที่ปลอดภัยเว็บเหล่านี้

96
00:04:38,810 --> 00:04:44,640
แล้วโรมัน Times ใหม่, Arial,
Courier New, จอร์เจีย, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
เป็นต้น

98
00:04:45,470 --> 00:04:47,170
เหล่านี้เป็นเว็บการพิจารณาทุกตัวอักษรที่ปลอดภัย

99
00:04:47,170 --> 00:04:49,169
และที่จริงเป็นส่วนหนึ่งของ
เหตุผลที่พวกเขาจะมาถึง

100
00:04:49,169 --> 00:04:54,140
ได้ถูกนำมาใช้เพื่อให้ web-- ทุกหน้า
ได้เข้าถึงการตั้งค่าเริ่มต้นของตัวอักษร

101
00:04:54,140 --> 00:04:58,480
กับเซอริฟต่างๆและทั้งหมดนี้
สิ่งที่ตัวอักษรที่เราจะไม่ได้รับเข้า

102
00:04:58,480 --> 00:05:01,130
แต่เหล่านี้มักจะ
ที่สามารถเข้าถึงได้ใน CSS ของคุณ

103
00:05:01,130 --> 00:05:04,029
แม้ว่าคุณจะทำไม่ได้
กำหนดเป็นอย่างอื่นแบบอักษร

104
00:05:04,029 --> 00:05:07,070
สุดท้ายคุณสามารถจัดตำแหน่งข้อความของคุณ
แทนของมันถูกตามค่าเริ่มต้นชิด

105
00:05:07,070 --> 00:05:09,310
ไปทางซ้ายที่คุณสามารถทำได้
จัดไปทางขวา

106
00:05:09,310 --> 00:05:13,740
หรือคุณอาจจะจัดเป็นศูนย์กลางหรือ
ธรรมเพื่อที่จะตีทั้งอัตรากำไรขั้นต้น

107
00:05:13,740 --> 00:05:16,800
ดังนั้นผู้ที่มีตัวเลือกทั้งหมดที่คุณสามารถใช้
เปลี่ยนสิ่งที่ข้อความของคุณมีลักษณะเหมือน

108
00:05:16,800 --> 00:05:20,120
และวิธีการที่จะแสดงบนหน้าเว็บของคุณ

109
00:05:20,120 --> 00:05:22,180
>> ตัวเลือกของคุณทำไม่ได้
จะต้องมีการแท็กเท่านั้น

110
00:05:22,180 --> 00:05:25,539
ก่อนหน้านี้เราได้เห็นแท็กร่างกาย
เลือกและเลือกแท็ก

111
00:05:25,539 --> 00:05:26,580
จะมีลักษณะเช่นเดียวกับที่

112
00:05:26,580 --> 00:05:30,020
คุณชื่อแท็กและจากนั้นคุณ
กำหนดสไตล์สำหรับแท็กนั้น

113
00:05:30,020 --> 00:05:32,660
แต่คุณยังสามารถทำบางสิ่งบางอย่าง
เรียกว่าเลือก ID

114
00:05:32,660 --> 00:05:34,390
เลือก ID ที่มีลักษณะคล้ายสวย

115
00:05:34,390 --> 00:05:38,100
แต่สังเกตเห็นว่าตอนนี้ฉันไม่ได้ใช้
แท็กผมใช้ในกรณีนี้

116
00:05:38,100 --> 00:05:40,720
#unique หรือสับที่ไม่ซ้ำกัน

117
00:05:40,720 --> 00:05:42,930
ถ้าคุณจำจากเรา
วิดีโอใน HTML ที่เราได้พูดคุย

118
00:05:42,930 --> 00:05:45,620
เกี่ยวกับวิธีการแท็กสามารถมีคุณลักษณะ

119
00:05:45,620 --> 00:05:48,340
>> และเป็นหนึ่งในแอตทริบิวต์ที่ใช้
จะสวยมากทุกแท็ก

120
00:05:48,340 --> 00:05:51,440
แต่เราไม่ได้พูดคุยเกี่ยวกับเรื่องนี้
เป็นสิ่งที่เรียกว่าแท็ก ID

121
00:05:51,440 --> 00:05:55,250
ดังนั้น CSS นี้โดยเฉพาะจะ
ใช้เฉพาะกับแท็กที่มี

122
00:05:55,250 --> 00:05:58,530
รหัสที่เฉพาะเจาะจงมากที่คุณได้รับการตั้งชื่อ

123
00:05:58,530 --> 00:06:01,000
ดังนั้นถ้าคุณมีที่ใดที่หนึ่ง
ในรหัสของคุณอยู่ที่ไหนสักแห่ง

124
00:06:01,000 --> 00:06:06,090
ในไฟล์ HTML ของคุณแท็กและคุณ
ระบุเป็นแอตทริบิวต์แท็กที่มี

125
00:06:06,090 --> 00:06:09,060
ID เท่ากับที่ไม่ซ้ำกันนี้
สไตล์โดยเฉพาะอย่างยิ่ง

126
00:06:09,060 --> 00:06:15,030
ที่นี่จะนำไปใช้ในระหว่าง
แท็กที่มี ID ของที่ไม่ซ้ำกัน

127
00:06:15,030 --> 00:06:17,180
>> นอกจากนี้คุณยังสามารถทำบางสิ่งบางอย่าง
เรียกว่าเลือกเรียน

128
00:06:17,180 --> 00:06:19,920
ดังนั้นในนอกจากจะมี
ID คุณลักษณะนี้คุณยังสามารถ

129
00:06:19,920 --> 00:06:23,130
เพิ่มแอตทริบิวต์ชั้นเรียนเพื่อแท็ก

130
00:06:23,130 --> 00:06:27,140
และเมื่อคุณใช้คุณลักษณะชั้นเรียน
ก็สามารถที่จะนำไปใช้กับแท็กหลาย

131
00:06:27,140 --> 00:06:31,880
ดังนั้นถ้าคุณมีหลายสิ่งหลายอย่างที่
จะคล้ายกันบางทีคุณอาจต้องการที่จะพูดว่า

132
00:06:31,880 --> 00:06:35,890
แท็กเปิด blah, blah, blah,
blah ชั้นเท่ากับนักเรียน

133
00:06:35,890 --> 00:06:38,190
และแล้วเรื่องนี้โดยเฉพาะ
สไตล์จะนำมาใช้

134
00:06:38,190 --> 00:06:42,041
แท็กทุกระดับซึ่งเป็นนักเรียน

135
00:06:42,041 --> 00:06:44,290
ในกรณีนี้เราต้องการตั้งค่า
สีพื้นหลังเป็นสีเหลือง

136
00:06:44,290 --> 00:06:46,706
และเราต้องการตั้งค่าความทึบซึ่ง
เป็นแท็กเราไม่ได้พูดคุยเกี่ยวกับการ

137
00:06:46,706 --> 00:06:52,510
แต่เกี่ยวข้องกับวิธีการที่โปร่งใส
บางสิ่งบางอย่างที่เป็นถึง 70% ในกรณีนี้

138
00:06:52,510 --> 00:06:54,430
>> มีตัวเลือกที่สองคือ
เขียน stylesheets

139
00:06:54,430 --> 00:06:56,680
คุณสามารถเขียนพวกเขา
โดยตรงลงใน HTML ของคุณ

140
00:06:56,680 --> 00:06:59,690
โดยการวาง stylesheets
ในระหว่างแท็กสไตล์

141
00:06:59,690 --> 00:07:03,850
และแท็กรูปแบบเหล่านั้นไปภายในของ
แท็กส่วนหัวของหน้าเว็บของคุณ

142
00:07:03,850 --> 00:07:08,240
วิธีที่อาจจะเป็นที่ต้องการมากขึ้นในการทำ
ก็คือการเขียนไฟล์ .css แยกต่างหาก

143
00:07:08,240 --> 00:07:12,360
แล้วเชื่อมโยงไว้ในของคุณ
เอกสารที่ใช้แท็กที่ลิงค์

144
00:07:12,360 --> 00:07:14,690
แท็กการเชื่อมโยงอีกครั้งเป็น
แตกต่างจากการเชื่อมโยงหลายมิติ

145
00:07:14,690 --> 00:07:16,760
ถ้าคุณจำได้จากวิดีโอของเรา HTML

146
00:07:16,760 --> 00:07:19,030
และแท็กการเชื่อมโยงเป็นวิธีการที่เรา
ดึงในแฟ้มที่แยกต่างหาก

147
00:07:19,030 --> 00:07:23,900
มันประเภทเช่นเทียบเท่า
# รวมสำหรับการเขียนโปรแกรมเว็บ

148
00:07:23,900 --> 00:07:27,140
>> ดังนั้นลองมาดูที่ table.HTML

149
00:07:27,140 --> 00:07:29,380
ถ้าคุณจำจากเรา
วิดีโอ HTML, ฉันพบ

150
00:07:29,380 --> 00:07:32,000
ตัวอย่างของมาก
คูณง่าย

151
00:07:32,000 --> 00:07:35,160
ตารางที่ดูสวย
น่าเกลียดและอาจจะมี

152
00:07:35,160 --> 00:07:38,650
วิธีที่จะทำให้ดีขึ้นด้วย
CSS ที่จะทำให้มันเป็นจริงการมอง

153
00:07:38,650 --> 00:07:41,120
มากขึ้นเช่นการคูณ
ตารางหรือบางสิ่งบางอย่าง

154
00:07:41,120 --> 00:07:43,730
ที่ไม่ได้เป็นเพียงติดกัน
ไม่มีส่วนที่เกิดขึ้นจริง

155
00:07:43,730 --> 00:07:45,532
ระหว่างแถวและคอลัมน์

156
00:07:45,532 --> 00:07:47,490
ดังนั้นขอให้ตรงไปที่
CS50 IDE และจะดู

157
00:07:47,490 --> 00:07:50,780
ที่วิธี CSS สามารถเรียงลำดับของปรับแต่ง
สิ่งที่เราเริ่มต้นด้วยการมาก่อน

158
00:07:50,780 --> 00:07:53,290
และทำให้มันเป็นสิ่งที่ดีขึ้นมาก

159
00:07:53,290 --> 00:07:55,650
>> ดังนั้นเราจึงอยู่ใน CS50 IDE
ในขณะนี้และถ้าไม่คุ้นเคย

160
00:07:55,650 --> 00:07:58,710
เราจะดึงขึ้นในครั้งนี้
ตารางที่เพจ HTML

161
00:07:58,710 --> 00:08:01,090
Table.HTML พื้น
เพียงแค่กำหนดเนื้อหา

162
00:08:01,090 --> 00:08:05,044
ของ multiple-- มันควรจะเป็น
สี่สี่ตารางสูตรคูณ

163
00:08:05,044 --> 00:08:06,210
มันตรงไปตรงสวย

164
00:08:06,210 --> 00:08:09,410
และเราจะคิดว่ามันจะ
มีลักษณะการจัดสวยดี

165
00:08:09,410 --> 00:08:15,277
แต่ในความเป็นจริงเมื่อเราดูตัวอย่างหน้านี้
เราจะเห็นว่ามันเป็นชนิดของน่าเกลียดใช่มั้ย?

166
00:08:15,277 --> 00:08:16,860
เห็นได้ชัดว่าเรามีแถวและคอลัมน์ที่นี่

167
00:08:16,860 --> 00:08:18,350
มีการเรียงลำดับของการแยกบาง

168
00:08:18,350 --> 00:08:20,040
แต่มันไม่ได้มีความหมายแยก

169
00:08:20,040 --> 00:08:23,105
เราไม่ได้รับจริง
ข้อมูลที่มากเกินไปนี่

170
00:08:23,105 --> 00:08:25,730
และมีการแยกระหว่างไม่มี
แถวและคอลัมน์ในแง่

171
00:08:25,730 --> 00:08:28,460
ของกฎนอนหรือแนวตั้ง

172
00:08:28,460 --> 00:08:31,530
เราอาจจะทำให้เรื่องนี้
ดูดีขึ้นเล็กน้อย

173
00:08:31,530 --> 00:08:32,934
ดังนั้นลอง

174
00:08:32,934 --> 00:08:34,559
ดังนั้นฉันจะปิดแท็บนี้ได้ที่นี่

175
00:08:34,559 --> 00:08:37,434
และฉันจะปิด table.HTML ของฉัน
และฉันมีรุ่นอื่นที่นี่

176
00:08:37,434 --> 00:08:39,490
เรียกว่า table2.HTML

177
00:08:39,490 --> 00:08:40,655
เราจะเปิดขึ้นมา

178
00:08:40,655 --> 00:08:42,530
ร่างกายของหน้านี้คือ
สวยมากเหมือนกัน

179
00:08:42,530 --> 00:08:44,238
แต่ฉันได้เปลี่ยนไป
นิด ๆ หน่อย ๆ ที่ด้านบน

180
00:08:44,238 --> 00:08:47,132
และฉันจะเลื่อนขึ้นที่นี่

181
00:08:47,132 --> 00:08:49,340
ขอให้สังเกตว่าเวลานี้ฉัน
การใช้แท็กรูปแบบฝังตัว

182
00:08:49,340 --> 00:08:53,550
ผมเคยเปิดแท็กรูปแบบและฉันตอนนี้
การกำหนดสไตล์ CSS เพียงภายใน

183
00:08:53,550 --> 00:08:54,310
ของมัน

184
00:08:54,310 --> 00:08:56,310
ฉันมีสไตล์ที่บอกว่าโต๊​​ะ

185
00:08:56,310 --> 00:08:58,170
นั่นเป็นตัวเลือกแท็กของฉัน

186
00:08:58,170 --> 00:09:01,340
ฉันไม่ได้ใช้จุดหรือกัญชา
ซึ่งผมจะทำถ้าฉัน

187
00:09:01,340 --> 00:09:03,710
ได้รับใช้ประชาชนหรือเลือกเรียน

188
00:09:03,710 --> 00:09:06,190
ฉันมีแท็กเลือกตาราง here--

189
00:09:06,190 --> 00:09:10,090
รูปแบบนี้เป็นไปได้
นำไปใช้กับแท็กทุกตาราง

190
00:09:10,090 --> 00:09:14,950
เห็นได้ชัดว่าผมต้องการที่จะนำหนึ่ง
พิกเซลกว้างเส้นขอบสีฟ้าที่เป็นของแข็ง

191
00:09:14,950 --> 00:09:15,779
ภายในโต๊ะของ

192
00:09:15,779 --> 00:09:18,320
ที่เสียงเหมือนมันจะอาจจะ
ช่วยให้สถานการณ์ใช่มั้ย?

193
00:09:18,320 --> 00:09:20,320
เรากำลังจะมี
สิ่งที่ดูดีขึ้นมาก

194
00:09:20,320 --> 00:09:21,190
ดังนั้นนี่เป็นเรื่องปกติ

195
00:09:21,190 --> 00:09:23,540
stylistically เราได้เพียงแค่
ฝังสไตล์ของฉันที่นี่

196
00:09:23,540 --> 00:09:25,100
มันแน่นอน
วิธีที่ยอมรับที่จะทำมัน

197
00:09:25,100 --> 00:09:26,391
ลองดูสิ่งที่มีลักษณะเช่นนี้

198
00:09:26,391 --> 00:09:29,790
ดังนั้นฉันจะกลับไปลงที่นี่และ
ฉันจะจะดูตัวอย่าง table2.HTML ของฉัน

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

200
00:09:32,430 --> 00:09:36,470
ดีที่ไม่มากสิ่งที่ฉันต้องการ
แต่มันเป็นสิ่งที่เราถาม

201
00:09:36,470 --> 00:09:39,530
เรากล่าวว่ารูปแบบนี้คือ
จะนำไปใช้กับตารางของเรา

202
00:09:39,530 --> 00:09:43,810
ตารางของเราตอนนี้มีหนึ่งพิกเซล
กว้างเส้นขอบสีฟ้าที่เป็นของแข็งรอบ

203
00:09:43,810 --> 00:09:46,237
เราไม่ได้รับจริง
ที่เซลล์ตาราง

204
00:09:46,237 --> 00:09:47,570
เราเพียงแค่ได้รับที่โต๊ะ

205
00:09:47,570 --> 00:09:49,310
ดังนั้น CSS ทำงาน

206
00:09:49,310 --> 00:09:51,890
จะได้นำไปใช้
สไตล์การตารางของเรา

207
00:09:51,890 --> 00:09:53,981
แต่ไม่ได้ค่อนข้างทำ
สิ่งที่เราต้องการจะทำ

208
00:09:53,981 --> 00:09:55,730
เราไม่ได้รับวิธีการทำ
สิ่งที่เราต้องการจะทำอย่างไร?

209
00:09:55,730 --> 00:09:59,287
>> ดีลองมาดูที่หนึ่งมากขึ้น
รุ่นนี้ใน table3.HTML

210
00:09:59,287 --> 00:10:00,870
ดังนั้นฉันก็จะปิดแท็บเหล่านี้

211
00:10:00,870 --> 00:10:03,890
ฉันจะกลับไปมากกว่าที่นี่ของฉัน
ยื่นต้นไม้และเปิด table3.HTML

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

213
00:10:07,680 --> 00:10:10,350
อีกครั้งก็จะดูสวย
ที่คล้ายกันที่นี่ที่จุดเริ่มต้น

214
00:10:10,350 --> 00:10:14,460
แต่แจ้งให้ทราบในเวลานี้แทนการใช้
สไตล์ฝังสิทธิในการมี

215
00:10:14,460 --> 00:10:18,870
ฉันจะเชื่อมโยงใน
สไตล์การใช้แท็กที่ลิงค์

216
00:10:18,870 --> 00:10:22,480
ดังนั้นฉันเห็นได้ชัดในการเชื่อมโยง
สไตล์ที่เรียกว่า tables.CSS,

217
00:10:22,480 --> 00:10:25,090
และดีเท่ากับ
สไตล์เพียง means-- ดี

218
00:10:25,090 --> 00:10:28,645
สิ่งที่เป็นญาติไฟล์นี้กับสิ่งที่
ฉัน doing-- เป็นสไตล์ที่ฉัน

219
00:10:28,645 --> 00:10:29,821
ใช้สำหรับหน้าเว็บของฉัน

220
00:10:29,821 --> 00:10:32,320
ดังนั้นถ้าผมอยากจะเห็นสิ่งที่
ที่ฉันทำกับ CSS ที่นี่

221
00:10:32,320 --> 00:10:35,010
ผมต้องไปเปิดที่
table.CSS ยื่นเช่นกัน

222
00:10:35,010 --> 00:10:37,490
ดังนั้นเราจะกลับไปมากกว่าที่นี่
อีกครั้งกับต้นไม้ไฟล์ของเรา

223
00:10:37,490 --> 00:10:38,660
มี table.CSS เป็น

224
00:10:38,660 --> 00:10:40,490
เราจะปรากฏให้มันเปิด

225
00:10:40,490 --> 00:10:43,070
ตอนนี้เรากำลังเห็นเล็ก ๆ น้อย ๆ ของซีเอสเอ

226
00:10:43,070 --> 00:10:45,630
เห็นได้ชัดว่าผมมีคู่
ของสิ่งที่เกิดขึ้นที่นี่

227
00:10:45,630 --> 00:10:48,950
เห็นได้ชัดว่าผมต้องการที่จะนำห้า
พิกเซลกว้างขอบสีแดงที่เป็นของแข็ง

228
00:10:48,950 --> 00:10:50,287
รอบโต๊ะของฉัน

229
00:10:50,287 --> 00:10:52,870
เรารู้อยู่แล้วว่าจะ
เพียงแค่ไปในปริมณฑล

230
00:10:52,870 --> 00:10:56,180
เราเห็นว่าใน table2.HTML

231
00:10:56,180 --> 00:10:58,770
ด้วยแต่ละแถวฉัน
เห็นได้ชัดว่าต้องการที่จะระบุ

232
00:10:58,770 --> 00:11:01,950
ที่ความสูงของแถวเป็น 50 พิกเซลสูง

233
00:11:01,950 --> 00:11:05,680
ดังนั้นสำหรับทุกแถวจำ
นั่นคือสิ่งที่แท็กทีอาร์ไม่,

234
00:11:05,680 --> 00:11:08,550
ฉันทำมันสูง 50 พิกเซล

235
00:11:08,550 --> 00:11:09,804
>> สุดท้ายฉันมีความคิดเห็นนี้

236
00:11:09,804 --> 00:11:11,470
และนี่คือวิธีการที่เราให้ความเห็นใน CSS

237
00:11:11,470 --> 00:11:16,174
มันคล้ายกันมากที่จะยึดบล็อก
ความคิดเห็นเฉือนดาวไวยากรณ์

238
00:11:16,174 --> 00:11:17,090
ทุกข้อความที่คุณต้องการ

239
00:11:17,090 --> 00:11:19,470
มีเฉือนเฉือนไม่มีแม้ว่าใน CSS

240
00:11:19,470 --> 00:11:23,400
สำหรับความคิดเห็นแบบอินไลน์สั้นเรามี
การใช้รูปแบบนี้โดยเฉพาะที่นี่

241
00:11:23,400 --> 00:11:26,830
ดูเหมือนว่าฉันทำ
จำนวนมากของสิ่งที่อยู่ในแท็ก td ของฉัน

242
00:11:26,830 --> 00:11:29,710
โปรดจำไว้ว่าแท็ก td หรือตาราง
ข้อมูลซึ่งจริงๆเป็นเพียง

243
00:11:29,710 --> 00:11:32,210
คอลัมน์ภายในของ
แถวของเราและเห็นได้ชัดว่า

244
00:11:32,210 --> 00:11:35,090
สำหรับชิ้นส่วนของข้อมูลแต่ละ
ในตารางของฉันฉันต้องการ

245
00:11:35,090 --> 00:11:38,850
การตั้งค่าสีพื้นหลัง
เป็นสีดำสีจะเป็นสีขาว

246
00:11:38,850 --> 00:11:40,320
สีเป็นสีพื้น

247
00:11:40,320 --> 00:11:42,360
ดังนั้นนี่เป็นไปได้
ข้อความในหน้าของฉัน

248
00:11:42,360 --> 00:11:45,140
ฉันต้องการตัวอักษรขนาดใหญ่ 22
ชี้ตัวอักษรและฉันต้องการ

249
00:11:45,140 --> 00:11:47,001
ว่ามันจะเป็นของครอบครัวของตัวอักษรที่จอร์เจีย

250
00:11:47,001 --> 00:11:48,750
ดังนั้นฉันไม่ได้ไป
มีแบบอักษรเริ่มต้น

251
00:11:48,750 --> 00:11:51,820
ฉันจะระบุจอร์เจียซึ่ง
เป็นหนึ่งในแบบอักษรปลอดภัยเว็บ

252
00:11:51,820 --> 00:11:53,830
ที่เราเคยเห็นมาก่อน

253
00:11:53,830 --> 00:11:57,284
ฉันต้องการให้ข้อความของฉันเพื่อให้สอดคล้อง
ใจกลางเมืองในช่วงกลางของกล่อง

254
00:11:57,284 --> 00:11:59,450
ฉันไม่ต้องการที่จะถูกทิ้ง
สอดคล้องหรือขวาชิด

255
00:11:59,450 --> 00:12:03,461
และฉันต้องการความกว้างของคอลัมน์ของฉัน
จะเป็น 50 พิกเซลกว้างเช่นกัน

256
00:12:03,461 --> 00:12:05,210
ลองมาดูที่
สิ่งนี้ดูเหมือนว่า

257
00:12:05,210 --> 00:12:07,470
และดูว่านี้อาจจะปรับตัวดีขึ้น

258
00:12:07,470 --> 00:12:12,890
ดังนั้นฉันจะไป table3.HTML ซึ่ง
การเรียกคืนรวมถึง table.CSS เป็นลิงค์

259
00:12:12,890 --> 00:12:14,830
และเราจะดูตัวอย่างได้

260
00:12:14,830 --> 00:12:16,800
นั่นเป็นจำนวนมากที่ดีกว่าใช่มั้ย?

261
00:12:16,800 --> 00:12:20,004
นี้เป็นจริงเริ่มต้นที่จะดู
มากขึ้นเช่นตารางการคูณ

262
00:12:20,004 --> 00:12:21,920
ฉันมีที่ขอบสีแดง
รอบโต๊ะของฉัน แต่ตอนนี้

263
00:12:21,920 --> 00:12:26,700
ฉันยังได้ระบุว่า
แต่ละแถวคือ 50 พิกเซลกว้าง

264
00:12:26,700 --> 00:12:30,220
หรือเป็น 50 พิกเซล tall-- ข้ออ้าง
me-- แต่ละคอลัมน์คือ 50 พิกเซลกว้าง

265
00:12:30,220 --> 00:12:34,251
ข้อมูลในแต่ละคอลัมน์และมีเพียง
ข้อมูลที่มีพื้นหลังสีดำ

266
00:12:34,251 --> 00:12:36,000
เพื่อที่ว่าทำไมคนเหล่านั้น
เส้นสีขาวที่มี

267
00:12:36,000 --> 00:12:38,836
เพราะพื้นที่ใน
ระหว่างทั้งหมดของเซลล์เหล่านั้น

268
00:12:38,836 --> 00:12:40,710
มันไม่ได้อยู่ในชายแดน
และของตัวเองเป็นเพียง

269
00:12:40,710 --> 00:12:43,170
ฉันก็แค่กรอกข้อมูลใน
เซลล์ซึ่งอันที่จริง

270
00:12:43,170 --> 00:12:46,310
ทำให้เส้นขอบของตารางซึ่ง
เห็นได้ชัดว่ามีอยู่ตลอดมัน

271
00:12:46,310 --> 00:12:47,887
เป็นเพียงบางเส้นสีขาว

272
00:12:47,887 --> 00:12:48,720
ตอนนี้พวกเขากำลังมองเห็น

273
00:12:48,720 --> 00:12:50,380
ตอนนี้พวกเขาปรากฏออกมาบนหน้าจอ

274
00:12:50,380 --> 00:12:52,920
และเพื่อให้เป็นที่ง่ายมาก
สไตล์ที่ผมเคยนำมาใช้

275
00:12:52,920 --> 00:12:56,850
และตอนนี้โต๊ะของฉันดูเหมือนมากขึ้นเช่น
สี่สี่ตารางคูณ

276
00:12:56,850 --> 00:13:00,950
แทนที่จะเป็นเพียงระเบียบที่คลั่งไคล้ที่
ทุกอย่างเป็นแถวอย่างชัดเจนและคอลัมน์

277
00:13:00,950 --> 00:13:03,717
แต่ไม่สุดจัดดี

278
00:13:03,717 --> 00:13:06,800
ถูกจริงๆเพียงรอยขีดข่วนบนพื้นผิว
ของสิ่งที่คุณสามารถทำอะไรกับ CSS ที่นี่

279
00:13:06,800 --> 00:13:10,330
โชคดีที่เอกสารของ CSS
ตรงไปตรงสวย

280
00:13:10,330 --> 00:13:14,000
คุณจะได้ใช้หลายที่
คุณลักษณะค่อนข้างบ่อย

281
00:13:14,000 --> 00:13:16,087
คนที่เราพูดคุยเกี่ยวกับ
ก่อนหน้านี้ในวิดีโอนี้

282
00:13:16,087 --> 00:13:18,170
มีหลายอย่างที่คุณเป็น
อาจจะไม่ใช้ทั้งหมด

283
00:13:18,170 --> 00:13:19,469
และที่ว่าดีเกินไป

284
00:13:19,469 --> 00:13:22,010
เพียง แต่รู้ว่ามี
เอกสารจำนวนมากออกมี

285
00:13:22,010 --> 00:13:25,110
ดังนั้นแม้ว่าเราจะไม่ได้ครอบคลุมทุกอย่าง
คุณอย่างแน่นอนไม่ได้ใส่ด้วยตัวคุณเอง

286
00:13:25,110 --> 00:13:26,780
แต่ CSS เป็นที่สนุกจริงๆ
ในการทดสอบกับ

287
00:13:26,780 --> 00:13:29,040
และฉันจะขอแนะนำให้คุณ
เล่นรอบกับหน้าเว็บของคุณ

288
00:13:29,040 --> 00:13:32,180
และดูว่าคุณสามารถทำให้พวกเขา
มองและความรู้สึกในการปรับปรุงผู้ใช้

289
00:13:32,180 --> 00:13:34,790
ประสบการณ์จากการเยี่ยมชมหน้าเว็บของคุณ

290
00:13:34,790 --> 00:13:35,710
ฉันลอยด์ดั๊ก

291
00:13:35,710 --> 00:13:37,980
นี่คือ CS50

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