1
00:00:00,000 --> 00:00:05,660
>> [השמעת מוסיקה]

2
00:00:05,660 --> 00:00:08,740
>> דאג LLOYD: אז בוא לקחת אחד יותר
וידאו לדבר על שפה אחת יותר.

3
00:00:08,740 --> 00:00:10,800
הפעם נדבר על CSS.

4
00:00:10,800 --> 00:00:13,460
אז CSS, שהוא קיצור של
גיליונות סגנון מדורג,

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
>> אז איך אנחנו בונים גיליונות סגנון?

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
אבל אתה יכול גם לציין כל
צבע שאתה רוצה hex.

62
00:02:59,110 --> 00:03:05,190
נזכיר כי ניתן לזהות צבעים
על ידי קבוצה של שלושה מספרי hex

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
אנחנו לא הולכים לדבר על זה
כאן-- להגדיר גופן ספציפי מאוד

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
ואם אתה משתמש ב- Microsoft
משרד ב -20 השנים האחרונות,

95
00:04:36,352 --> 00:04:38,810
אתה בטח מכיר
הרבה גופנים בטוחים אלה האינטרנט

96
00:04:38,810 --> 00:04:44,640
כבר, Times New Roman, Arial,
שליח החדש, גאורגיה, 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
עם serifs שונים, וכל זה
דברים גופן אנחנו לא תקבלו ל,

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
אבל אתה יכול גם לעשות משהו
נקרא בורר מזהה.

114
00:05:32,660 --> 00:05:34,390
בורר מזהה נראה די דומה.

115
00:05:34,390 --> 00:05:38,100
אבל שם לב, שעכשיו אני לא משתמש
תג HTML, אני משתמש, במקרה זה,

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
>> ותכונה אחת שחלה
לדי הרבה כל תגי HTML,

120
00:05:48,340 --> 00:05:51,440
אבל אנחנו לא מדברים על זה,
הוא משהו שנקרא תג זיהוי.

121
00:05:51,440 --> 00:05:55,250
אז CSS מסוים זה היית
תחול רק על תג HTML שיש

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
מספר שווה ייחודיים, זה
סגנונות מסוימים

126
00:06:09,060 --> 00:06:15,030
כאן יחול רק בין
תג שעם תעודת הזהות של ייחודי.

127
00:06:15,030 --> 00:06:17,180
>> גם אתה יכול לעשות משהו
נקרא בורר מעמד.

128
00:06:17,180 --> 00:06:19,920
אז בנוסף לכך ש
מספר תכונות, גם אתה יכול

129
00:06:19,920 --> 00:06:23,130
להוסיף תכונת מעמד לתגי HTML.

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
בלה תג פתוח, בלה, בלה,
בלה, מעמד שווה סטודנטים.

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
>> יש שתי אפשרויות ל
גיליונות סגנון כתיבה.

139
00:06:54,430 --> 00:06:56,680
אתה יכול לכתוב אותם
ישירות לתוך ה- HTML שלך

140
00:06:56,680 --> 00:06:59,690
על ידי הצבת גיליונות הסגנון
בין תגי סגנון.

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
זה כמו סוג של המקבילה של
#include לתכנות אינטרנט.

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
יש לי שולחן כאן-- בורר תגים.

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
מבחינה סגנונית, יש לי רק
מוטבע הסגנונות שלי כאן.

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
מה זה קובץ ביחס למה ש
אני עשות-- הוא סגנון שאני

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
עכשיו אנחנו רואים קצת של CSS.

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
אז לכל שורה, זוכר
זה מה שעושה תג TR,

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