1
00:00:00,000 --> 00:00:00,500

2
00:00:00,500 --> 00:00:04,500
>> [השמעת מוסיקה]

3
00:00:04,500 --> 00:00:10,099

4
00:00:10,099 --> 00:00:12,224
אליסון BUCHHOLTZ-AU: אז
אנחנו בעצם פשוט הולכים

5
00:00:12,224 --> 00:00:14,629
כדי לתת לך סקירה
של CSS, כי אנחנו יודעים ש

6
00:00:14,629 --> 00:00:16,420
שזה לא היה מכוסה
בכל הסעיפים.

7
00:00:16,420 --> 00:00:20,090
ואנחנו באמת רוצים לוודא שאתה
יש בחורים בכלי זה העומד לרשותך,

8
00:00:20,090 --> 00:00:24,790
כי יש לו את היכולת לעשות
אתרים שלך נראים הרבה יותר יפים.

9
00:00:24,790 --> 00:00:28,660
>> ואם אתם בונים אתר אינטרנט, ולאחר מכן
אתה כנראה רוצה לעשות את זה יפה.

10
00:00:28,660 --> 00:00:31,372
אני מתכוון, לא שיש לך,
אבל אני הייתי מציע את זה. [צוחק]

11
00:00:31,372 --> 00:00:35,430
אם אתה רוצה למשתמשים להשתמש בו, אתה עלול
רוצה לעשות את זה [לא ברור] קטן.

12
00:00:35,430 --> 00:00:39,130
אז אנחנו הולכים לנסות ולתת לך רק
כמה כלים בסיסיים והבנה,

13
00:00:39,130 --> 00:00:42,340
כך שכאשר אתה יוצא ואתה
מחקר דברים על CSS,

14
00:00:42,340 --> 00:00:45,902
זה לא להשלים ג'יבריש,
כמו CSS לפעמים להיות.

15
00:00:45,902 --> 00:00:47,240
>> תומס Reimers: כן.

16
00:00:47,240 --> 00:00:49,930
אליסון אמר את זה די טוב.

17
00:00:49,930 --> 00:00:53,250
אז אני מניח שהדבר הראשון שאנחנו
צריך להתחיל עם מה זה CSS?

18
00:00:53,250 --> 00:00:55,750
אז CSS הוא מדהים.

19
00:00:55,750 --> 00:00:56,250
CSS--

20
00:00:56,250 --> 00:00:58,320
>> אליסון BUCHHOLTZ-AU: זה
שמו של הסמינר שלנו.

21
00:00:58,320 --> 00:00:58,434
>> תומס Reimers: כן.

22
00:00:58,434 --> 00:01:00,130
זה באמת חשוב ש
אתה מבין שעד אז.

23
00:01:00,130 --> 00:01:03,090
אם אתה לוקח משם רק אחד
דבר, זה CSS שאם מדהים.

24
00:01:03,090 --> 00:01:06,180
שני הוא CSS עומד ל
גיליונות סגנון מדורג.

25
00:01:06,180 --> 00:01:10,380
אז בליבה שלה, CSS הוא
גיליון סגנון, כלומר

26
00:01:10,380 --> 00:01:13,200
זה מאפשר לך לעצב את דף אינטרנט.

27
00:01:13,200 --> 00:01:16,609
ואז מה זה אומר, זה
דרך להוסיף סגנון לאתרים שלך.

28
00:01:16,609 --> 00:01:18,900
אז על ידי סגנון, אנחנו מתכוונים לכל מה ש
זה לא structural--

29
00:01:18,900 --> 00:01:24,350
כך דברים כמו צבעים, רקע
תמונות, גבולות, כמו, ריפוד,

30
00:01:24,350 --> 00:01:25,040
שוליים.

31
00:01:25,040 --> 00:01:27,310
נדבר על מה ש
כל זה אומר בקצת.

32
00:01:27,310 --> 00:01:30,110
>> אז יש לנו רק הלכתי קדימה ו
פתח את שני אלה בgedit.

33
00:01:30,110 --> 00:01:32,680
אז זה index.html.

34
00:01:32,680 --> 00:01:34,800
וזה main.css.

35
00:01:34,800 --> 00:01:36,829
אז main.css אין שום קשר.

36
00:01:36,829 --> 00:01:38,412
אליסון BUCHHOLTZ-AU: לא סגנון עד כה.

37
00:01:38,412 --> 00:01:39,245
תומס Reimers: אין.

38
00:01:39,245 --> 00:01:42,577
וכפי שתראה, זה
אתר ממש מכוער.

39
00:01:42,577 --> 00:01:44,160
אליסון BUCHHOLTZ-AU: זה פשוט.

40
00:01:44,160 --> 00:01:45,820
תומס Reimers: כן.

41
00:01:45,820 --> 00:01:49,150
כן, זה לא מכוער,
זה רק מינימליסטי.

42
00:01:49,150 --> 00:01:53,430
ואז יש לנו כאן index.html.

43
00:01:53,430 --> 00:01:55,729
וכך במשך מהיר
סיכום של HTML, אליסון,

44
00:01:55,729 --> 00:01:57,270
אתה רוצה רק לדבר על הדף?

45
00:01:57,270 --> 00:01:58,395
>> אליסון BUCHHOLTZ-AU: כן.

46
00:01:58,395 --> 00:02:01,100
אז ברור, יש לנו HTML שלנו
תג, שרק קובץ HTML שמות.

47
00:02:01,100 --> 00:02:07,080
יש לנו הכותרת שלנו כאן, עם CSS
Awesomeness, which-- אם תחזור.

48
00:02:07,080 --> 00:02:07,720
איפה זה?

49
00:02:07,720 --> 00:02:09,136
>> תומס Reimers: אה.

50
00:02:09,136 --> 00:02:10,301
כן, אתה יכול לראות.

51
00:02:10,301 --> 00:02:12,092
אליסון BUCHHOLTZ-AU:
ושים לב לכותרת

52
00:02:12,092 --> 00:02:14,120
היא כותרת זו הכרטיסייה ממש עד כאן.

53
00:02:14,120 --> 00:02:17,130
ולאחר מכן "שלום, עולם!" הוא
הטקסט שיש לנו רק

54
00:02:17,130 --> 00:02:19,620
בו מוצגות באינטרנט
דף, שis-- לחזור.

55
00:02:19,620 --> 00:02:21,290
חזרה.

56
00:02:21,290 --> 00:02:24,287
וזה רק בגוף שלנו
here-- הטקסט רגיל.

57
00:02:24,287 --> 00:02:26,120
כמו כן, דבר אחד
שמתי לב, אם אתה מסתכל כאן,

58
00:02:26,120 --> 00:02:29,410
תומס החליף את אלה
שתיים מהשקופית שלנו.

59
00:02:29,410 --> 00:02:32,035
אז כל עוד יש לך את כל
שלושה מהם, אתה בסדר.

60
00:02:32,035 --> 00:02:34,044
הם יכולים להיות בכל סדר שהם רוצים.

61
00:02:34,044 --> 00:02:39,368
מה שחשוב ביותר הוא פשוט ש
יש לך כל אחד משלושת הדברים האלה.

62
00:02:39,368 --> 00:02:40,340
>> תומס Reimers: מגניב.

63
00:02:40,340 --> 00:02:41,111
להוסיף סוג doc?

64
00:02:41,111 --> 00:02:42,235
אליסון BUCHHOLTZ-AU: כן.

65
00:02:42,235 --> 00:02:43,068
תומס Reimers: כן.

66
00:02:43,068 --> 00:02:43,769
מגניב.

67
00:02:43,769 --> 00:02:46,102
אליסון BUCHHOLTZ-AU: ככל הנראה,
המיקרופונים שלי לא אוהבים אותי.

68
00:02:46,102 --> 00:02:49,650
תומס Reimers: הו, תן לנו רק שניות
בעוד אליסון עובר את המיקרופון שלה.

69
00:02:49,650 --> 00:02:50,500
אז כן.

70
00:02:50,500 --> 00:02:52,030
אז יש לנו הדף הראשי שלנו.

71
00:02:52,030 --> 00:02:53,890
זה סוג של unstyled.

72
00:02:53,890 --> 00:02:54,780
אין לנו הרבה.

73
00:02:54,780 --> 00:02:57,110
רק שיש לנו בעצם טקסט.

74
00:02:57,110 --> 00:02:59,470
יש לנו את הגיליון הסגנונות.

75
00:02:59,470 --> 00:03:00,220
יש לנו את התואר.

76
00:03:00,220 --> 00:03:04,020
כל כך פשוט-חשוף עצמות
רכיבים להפוך את אתר אינטרנט.

77
00:03:04,020 --> 00:03:08,880
>> אז משם, בואו
לדבר על מה שהוא CSS

78
00:03:08,880 --> 00:03:11,270
ואיך זה נראה וכל זה.

79
00:03:11,270 --> 00:03:12,047
אז לthat--

80
00:03:12,047 --> 00:03:13,755
אליסון BUCHHOLTZ-AU:
חזרה לשקופיות.

81
00:03:13,755 --> 00:03:15,200
תומס Reimers: חזרה על השקופיות.

82
00:03:15,200 --> 00:03:17,240
ואליסון יכול להשתלט.

83
00:03:17,240 --> 00:03:18,720
>> אליסון BUCHHOLTZ-AU: Woo.

84
00:03:18,720 --> 00:03:19,220
OK.

85
00:03:19,220 --> 00:03:22,360
אז בקובץ ה- CSS שלך,
אתה הולך לי

86
00:03:22,360 --> 00:03:25,010
הרבה מהדברים האלה נקראים בוררים.

87
00:03:25,010 --> 00:03:27,420
שרק יהיה
בסיס של קובץ CSS שלך.

88
00:03:27,420 --> 00:03:29,480
זה פשוט הולך להיות
המון המון אלה.

89
00:03:29,480 --> 00:03:30,780
אז בורר.

90
00:03:30,780 --> 00:03:32,649
זה רק את האנטומיה הכללית.

91
00:03:32,649 --> 00:03:35,190
אנחנו הולכים לעבור
דוגמאות, כי אם אתם לא

92
00:03:35,190 --> 00:03:38,400
צפה סעיפי, אני מרגיש
כמו דברים באופן המופשט

93
00:03:38,400 --> 00:03:39,400
לא ממש הגיוני.

94
00:03:39,400 --> 00:03:41,110
זה תמיד עוזר כדי לראות את דוגמאות.

95
00:03:41,110 --> 00:03:42,420
>> אז יש לנו כמה בורר.

96
00:03:42,420 --> 00:03:49,120
זה הולך להיות קצת מזהה ל
מה שאנחנו רוצים את הסגנון לפנות ל.

97
00:03:49,120 --> 00:03:52,220
ואז אנחנו יכולים להיות כל
סט של כללים וערכים.

98
00:03:52,220 --> 00:03:55,680
אז בוררים שאתה עשוי לראות
יכול להיות משהו כמו גוף,

99
00:03:55,680 --> 00:04:00,262
או פסק עם P,
או כותרת, או מה ש,

100
00:04:00,262 --> 00:04:02,000
מה שאתה רוצה תגי HTML שלך להיות.

101
00:04:02,000 --> 00:04:03,570
>> אז במקרה הזה, יש לנו גוף.

102
00:04:03,570 --> 00:04:06,985
ויש לנו כמה שלטון,
שזה מתאים

103
00:04:06,985 --> 00:04:09,610
למה הסגנון שלך מתייחס אליהם.

104
00:04:09,610 --> 00:04:12,720
אז במקרה הזה, יש לנו
צבע רקע ומשקל גופן.

105
00:04:12,720 --> 00:04:16,200
אז זה הולך להשתנות
הרקע של כל דבר

106
00:04:16,200 --> 00:04:19,640
בתוך כל תג גוף של קובץ HTML שלנו.

107
00:04:19,640 --> 00:04:22,810
וזה הולך לתת לי
זה ערך תכלת זה.

108
00:04:22,810 --> 00:04:24,820
>> אז זה הולך לעשות
אור כחול רקע.

109
00:04:24,820 --> 00:04:28,660
ואז שום דבר בתוך הגוף הוא
הולך להיות משקל גופן מודגש.

110
00:04:28,660 --> 00:04:31,142
אז זה רק הולך
נועז כל הטקסט שלנו.

111
00:04:31,142 --> 00:04:32,970
וזו רק אחת בורר.

112
00:04:32,970 --> 00:04:34,680
אבל אתה יכול להיות מאוד שרבים מאלה.

113
00:04:34,680 --> 00:04:38,730
וכמו שאנחנו הולכים להראות לי
מאוחר יותר, קצת יותר לאיך

114
00:04:38,730 --> 00:04:40,709
שעבודות ודוגמאות נוספות לשם.

115
00:04:40,709 --> 00:04:41,750
כל דבר שאתה רוצה להוסיף?

116
00:04:41,750 --> 00:04:42,499
>> תומס Reimers: מס '

117
00:04:42,499 --> 00:04:43,500
אליסון קיבל אותו.

118
00:04:43,500 --> 00:04:46,144
אנחנו רק הולכים לחתוך את
דוגמא כאן בדוגמא באתר שלנו.

119
00:04:46,144 --> 00:04:47,310
אז בואו באמת לקחת את זה.

120
00:04:47,310 --> 00:04:48,620
זה מושלם.

121
00:04:48,620 --> 00:04:54,460
אז אני פשוט הולך להעתיק ולהדביק
כי נכון לקובץ main.css שלנו.

122
00:04:54,460 --> 00:04:56,530
ואני הולך לשמור אותו.

123
00:04:56,530 --> 00:04:59,190
ואז תוכל להפעיל אותו.

124
00:04:59,190 --> 00:05:01,600
הערה אז צד, אחד מ
רוב הדברים מתסכלים

125
00:05:01,600 --> 00:05:04,490
הוא אם אתה לא לשמור קובץ, ו
אז אתה, כמו, טען מחדש את הדף,

126
00:05:04,490 --> 00:05:07,450
וכמו, למה לא
השינוי קורה?

127
00:05:07,450 --> 00:05:07,950
זה קורה.

128
00:05:07,950 --> 00:05:14,230
אז הנה אנחנו ראינו שאנחנו עשינו
אתר רקע תכלת

129
00:05:14,230 --> 00:05:16,560
וחלק מודגש טקסט.

130
00:05:16,560 --> 00:05:20,730
>> אני צריך גם להזכיר, אם אתה
יש בחורים שאלות על כל דבר

131
00:05:20,730 --> 00:05:23,622
אנחנו עושים, אל תהססו
חופשי לעצור אותנו ומבקשים מאתנו.

132
00:05:23,622 --> 00:05:25,330
אנחנו מוכנים לגמרי
לשדה שאלות.

133
00:05:25,330 --> 00:05:27,951

134
00:05:27,951 --> 00:05:31,930
>> אליסון BUCHHOLTZ-AU: ברור, עם
CSS, כל מה שבונה על עצמו.

135
00:05:31,930 --> 00:05:34,107
אז אם דבר אחד לא
הגיוני עכשיו, אנחנו

136
00:05:34,107 --> 00:05:35,690
לא רוצה שזה לשקוע אותך מאוחר יותר.

137
00:05:35,690 --> 00:05:38,390

138
00:05:38,390 --> 00:05:41,930
>> תומס Reimers: אז בוא
סוג של לנתח את זה.

139
00:05:41,930 --> 00:05:44,210
אז אתה רוצה להתחיל
עם הבורר כאן?

140
00:05:44,210 --> 00:05:45,979
>> אליסון BUCHHOLTZ-AU: כן.

141
00:05:45,979 --> 00:05:48,270
כמו שאמרתי לפני, גוף
רק הבורר שלנו כאן.

142
00:05:48,270 --> 00:05:50,950
אז אם נחזור אל אה index--.

143
00:05:50,950 --> 00:05:53,245
>> תומס Reimers: איזה אני פשוט נסגר.

144
00:05:53,245 --> 00:05:54,530
תן לי שני.

145
00:05:54,530 --> 00:05:58,286
אז קובץ, להרחיב, index.html.

146
00:05:58,286 --> 00:05:59,410
אליסון BUCHHOLTZ-AU: מגניב.

147
00:05:59,410 --> 00:06:02,710
אז אם אתה שם לב לכאן, אנחנו
יש לי תגי גוף אלה, נכון?

148
00:06:02,710 --> 00:06:06,270
אז הבורר רק מתאים ל
התגים על זה אנחנו מדברים.

149
00:06:06,270 --> 00:06:07,670
אז גוף ממש כאן.

150
00:06:07,670 --> 00:06:10,315
אז מה שאנחנו אומרים הוא
everything-- אנחנו יכולים לחזור?

151
00:06:10,315 --> 00:06:12,065
הלוואי שהייתי יכול פשוט
כמו לגעת במסך.

152
00:06:12,065 --> 00:06:14,410
זה יהיה כל כך הרבה יותר מגניב.

153
00:06:14,410 --> 00:06:17,150
>> אז כל דבר בתוך אלה
תגי גוף, שראינו

154
00:06:17,150 --> 00:06:19,637
היה פשוט, כמו, הטקסט,
והגוף באופן כללי

155
00:06:19,637 --> 00:06:20,970
מתייחס ל, כמו, הרקע.

156
00:06:20,970 --> 00:06:22,720
אם אי פעם אתה רוצה
לשנות את הרקע,

157
00:06:22,720 --> 00:06:25,090
זה הולך להיות בתג גוף.

158
00:06:25,090 --> 00:06:27,120
פשוט יש כללים אלה יחולו עליהם.

159
00:06:27,120 --> 00:06:32,040
>> אז אם היינו הולכים ל
index.html and-- למעשה,

160
00:06:32,040 --> 00:06:33,840
יכול יש לנו משהו
מחוץ לגוף?

161
00:06:33,840 --> 00:06:37,340
אם היו לנו, כמו, כותרת תחתונה או ב
משהו, זה לא יחול על זה.

162
00:06:37,340 --> 00:06:40,900
אבל שום דבר בתוך
תגי גוף אלה הולכים

163
00:06:40,900 --> 00:06:44,960
להיות מושפע מהגוף הזה
בורר שבצענו.

164
00:06:44,960 --> 00:06:47,405
אז אם היו לך להקליד
משהו אחר there--

165
00:06:47,405 --> 00:06:49,400
>> תומס Reimers: בואו ניסע הביתה ש.

166
00:06:49,400 --> 00:06:55,330
אז אם היו לנו div-- אז זה
רק תג אחר שאתה יכול לקבל.

167
00:06:55,330 --> 00:06:56,350
אני הולך לסגור אותו.

168
00:06:56,350 --> 00:06:58,280
או בואו נעשה את זה בפסקה.

169
00:06:58,280 --> 00:07:01,430
אז p מייצג סעיף.

170
00:07:01,430 --> 00:07:02,560
ובתוך סעיף זה.

171
00:07:02,560 --> 00:07:05,650
ואז אני אומר, "זה טקסט".

172
00:07:05,650 --> 00:07:06,369
מגניב.

173
00:07:06,369 --> 00:07:09,160
ואז עשיתי את הכלל הזה חל על
סעיף במקום הגוף.

174
00:07:09,160 --> 00:07:12,390

175
00:07:12,390 --> 00:07:17,320
אתה תראה איך זה חל רק על
הסעיף החדש שנוצר, נכון,

176
00:07:17,320 --> 00:07:18,892
לא כל הדבר.

177
00:07:18,892 --> 00:07:20,090
האם זה הגיוני?

178
00:07:20,090 --> 00:07:21,840
>> אליסון BUCHHOLTZ-AU:
אז זה כל הגוף,

179
00:07:21,840 --> 00:07:24,450
אבל עכשיו בוררנו רק
תואם את הסעיף.

180
00:07:24,450 --> 00:07:27,050
אז רק שיש לנו נועז וכחול
לסעיף הספציפי הזה,

181
00:07:27,050 --> 00:07:30,760
כי זה הדבר היחיד ש
כי הוא סגור בתוך תג p.

182
00:07:30,760 --> 00:07:35,349
>> תומס Reimers: האם זה הגיוני סוג
איך דברים לתמצת דברים אחרים?

183
00:07:35,349 --> 00:07:38,140
אליסון BUCHHOLTZ-AU: כמו כן, רק
לומר, כמו, אחת הדרכים הטובות ביותר

184
00:07:38,140 --> 00:07:40,889
באמת להרגיש בנוח עם CSS
הוא רק כדי לעשות דברים כאלה,

185
00:07:40,889 --> 00:07:42,050
רק לנסות את זה.

186
00:07:42,050 --> 00:07:46,700
זה פשוט מאוד להקליד משהו
החוצה, פגע רענן, ולראות מה קורה.

187
00:07:46,700 --> 00:07:48,940
וכמו עם רוב CS,
לעתים קרובות ניסויים יכולים

188
00:07:48,940 --> 00:07:51,790
להוביל להרבה יותר טוב
הבנה אינטואיטיבית.

189
00:07:51,790 --> 00:07:54,432
אפילו יותר מאשר לנו רק,
כמו, מדבר איתך.

190
00:07:54,432 --> 00:07:58,350
>> תומס Reimers: בהחלט
100% מסכימים על נקודה זו.

191
00:07:58,350 --> 00:08:02,430
אז אם נחזור לזה, בואו נתחיל
לנתח בדיוק מה שני אלה עושים.

192
00:08:02,430 --> 00:08:04,550
אז יש לנו שני כללים בזה.

193
00:08:04,550 --> 00:08:07,420
אז הראשון הוא צבע רקע.

194
00:08:07,420 --> 00:08:10,590
ואתה רואה שאנחנו קבענו אותו
שווה ערך, בצבע תכלת.

195
00:08:10,590 --> 00:08:15,009
>> אז בCSS, CSS הוא סוג
של רופף מאוד על אופן שבי

196
00:08:15,009 --> 00:08:16,300
מותר לך להגדיר צבע.

197
00:08:16,300 --> 00:08:17,800
אז אתה יכול להגדיר אותם בשמם.

198
00:08:17,800 --> 00:08:20,650
גם אתה יכול לעשות משהו כמו "אדום".

199
00:08:20,650 --> 00:08:25,270
ואז אם נחזור לזה,
תראה שהרקע הוא אדום.

200
00:08:25,270 --> 00:08:29,040
גם אתה יכול לקבל אמת-- אני חושב שאתה
יכול לקבל די יצירתי עם זה,

201
00:08:29,040 --> 00:08:29,540
אתה לא יכול?

202
00:08:29,540 --> 00:08:31,170
>> אליסון BUCHHOLTZ-AU: אני
חושב שאתה יכול להשתמש hex.

203
00:08:31,170 --> 00:08:31,250
אתה לא יכול?

204
00:08:31,250 --> 00:08:32,083
>> תומס Reimers: כן.

205
00:08:32,083 --> 00:08:32,969
אז אתה יכול להשתמש hex.

206
00:08:32,969 --> 00:08:34,490
אבל אני חושב שם-חכם.

207
00:08:34,490 --> 00:08:35,385
הם לא שם?

208
00:08:35,385 --> 00:08:37,260
אליסון BUCHHOLTZ-AU:
אתה יכול לעשות לא מעט.

209
00:08:37,260 --> 00:08:43,350
פחות או יותר כמו רוב הצבעים שאתה
יכול name-- כמו, אני חושב שסלמון הוא אחד.

210
00:08:43,350 --> 00:08:45,322
>> תומס Reimers: אנחנו סלמון הולך לנסות.

211
00:08:45,322 --> 00:08:47,530
אליסון BUCHHOLTZ-AU: אני
חושב ירוק-צהוב הוא שם.

212
00:08:47,530 --> 00:08:48,050
תומס Reimers: כן.

213
00:08:48,050 --> 00:08:48,550
רואה?

214
00:08:48,550 --> 00:08:50,080
אז אתה יכול לקבל די יצירתי.

215
00:08:50,080 --> 00:08:52,246
>> אליסון BUCHHOLTZ-AU: אתה
אפשר להיות מאוד יצירתיים.

216
00:08:52,246 --> 00:08:55,750
בדומה, אם אתה יכול לחשוב על
שם של צבע, זה כנראה שם.

217
00:08:55,750 --> 00:08:57,840
אם אתה באמת רוצה קנס
פירוט, אתה יכול ללכת hex.

218
00:08:57,840 --> 00:08:58,673
>> תומס Reimers: כן.

219
00:08:58,673 --> 00:08:59,390
אז הקסדצימלי.

220
00:08:59,390 --> 00:09:05,280
אם אתם זוכרים את זה בחזרה
מPSET הישן שלך, תמונת שחזור,

221
00:09:05,280 --> 00:09:08,300
אתם נאלצו להתמודד
עם ערכי hex אלה.

222
00:09:08,300 --> 00:09:15,280
וסוג של כדי לסכם מה זה,
יש hex שלושה ערכים מאוחסנים בו.

223
00:09:15,280 --> 00:09:17,250
אז זה בקבוצות של שניים במרווחים.

224
00:09:17,250 --> 00:09:19,300
שני הראשונים מייצגים את הערך האדום.

225
00:09:19,300 --> 00:09:22,420
השנייה אחת מייצג
הערך הירוק.

226
00:09:22,420 --> 00:09:25,020
והאחרון הוא כחול?

227
00:09:25,020 --> 00:09:30,050
>> אז FF קורה לייצג
הקסדצימלי 255.

228
00:09:30,050 --> 00:09:35,480
אז יש לך 255 אדומים, 255
ירוק, ו0 לכחולים.

229
00:09:35,480 --> 00:09:37,670
וערכים נעים בין 0 ל- 255.

230
00:09:37,670 --> 00:09:38,350
>> קהל: ימין.

231
00:09:38,350 --> 00:09:41,472
אז למעשה, אנחנו יכולים לחפש
האינטרנט לכל צבע שאנחנו רוצים,

232
00:09:41,472 --> 00:09:43,912
ולזהות את-ידוע למעשה
משולב ספקטרום צבעים,

233
00:09:43,912 --> 00:09:45,130
ואז נוכל לשים אותו ב?

234
00:09:45,130 --> 00:09:46,380
אליסון BUCHHOLTZ-AU: בדיוק.

235
00:09:46,380 --> 00:09:52,900
אז יש לך די הרבה שליטה מלאה
על הצבעים שאתה רוצה בתוך CSS.

236
00:09:52,900 --> 00:09:55,069
אנחנו הולכים לדבר על
תמונות רקע מאוחר יותר?

237
00:09:55,069 --> 00:09:56,110
או שאנחנו רוצים לעשות את זה?

238
00:09:56,110 --> 00:09:56,240
>> תומס Reimers: כן.

239
00:09:56,240 --> 00:09:57,010
בהחלט.

240
00:09:57,010 --> 00:10:00,830
אז קודם כל, רק כדי להראות ש
אדום וירוק הוא צהוב.

241
00:10:00,830 --> 00:10:03,120
ואם אתה צריך קצת
עזרה במציאה זו, אתה

242
00:10:03,120 --> 00:10:05,575
יכול Google משהו
כמו "בורר צבע."

243
00:10:05,575 --> 00:10:07,200
אליסון BUCHHOLTZ-AU: הו, זה כל כך טוב.

244
00:10:07,200 --> 00:10:09,090
אני אוהב את דוגם צבע.

245
00:10:09,090 --> 00:10:11,360
>> תומס Reimers: colorpicker.com
הוא דוגמא טובה.

246
00:10:11,360 --> 00:10:14,580
והנה, תראה שיש לך
בורר צבעים כמו-Photoshop מלא.

247
00:10:14,580 --> 00:10:14,920
>> אליסון BUCHHOLTZ-AU: ממ-הממ.

248
00:10:14,920 --> 00:10:16,980
כמו כן, הדברים מגניבים אתה
יכול ליצור ערכות צבעים

249
00:10:16,980 --> 00:10:18,896
כך שאין לך,
כמו, מתנגש צבעים.

250
00:10:18,896 --> 00:10:22,780
תומס Reimers: ואז
הנה הערך עד hex כאן.

251
00:10:22,780 --> 00:10:27,800
אז אתה תמיד יכול למצוא באינטרנט בעצם
מקומות כדי לקבל את ערך hex מ.

252
00:10:27,800 --> 00:10:31,667
זה לא למיין של שרק, כמו, אנחנו
לראות את הצבעים של העולם במספרים.

253
00:10:31,667 --> 00:10:34,000
זה יותר שאנחנו גולשים באינטרנט
ולמצוא את מה שאנחנו רוצים צבע,

254
00:10:34,000 --> 00:10:36,850
ואז לקחת את המספר למטה.

255
00:10:36,850 --> 00:10:39,590
כי זה פשוט ממש קל
דרך להתייחסות דברים בCS.

256
00:10:39,590 --> 00:10:40,350
>> אליסון BUCHHOLTZ-AU:
ואז יש also--

257
00:10:40,350 --> 00:10:41,630
אני שוכח את שמו של האתר המדויק.

258
00:10:41,630 --> 00:10:43,838
אבל יש בהחלט, אני
חושב, משהו מבית Adobe

259
00:10:43,838 --> 00:10:48,350
שיוצר צבעים בשבילך,
שזה ממש מגניב, כי אתה

260
00:10:48,350 --> 00:10:50,580
definitely-- זה לפעמים
קשה להבין,

261
00:10:50,580 --> 00:10:53,729
או, אם אני רוצה להשתמש בצבע זה,
מה יכול להיות אחר שימושי אחד

262
00:10:53,729 --> 00:10:56,395
להשתמש במקום אחר באתר שלי ל,
כמו, לעשות את זה נחמד ומלוכד.

263
00:10:56,395 --> 00:11:00,430

264
00:11:00,430 --> 00:11:04,260
>> תומס Reimers: Allison של מדברים על
אחד על ידי Adobe בשם Kuler, אני חושב.

265
00:11:04,260 --> 00:11:04,885
זה K-U-L-E-R.

266
00:11:04,885 --> 00:11:06,259
אליסון BUCHHOLTZ-AU: אני חושב שכן.

267
00:11:06,259 --> 00:11:07,610
אני די בטוח שזה אחד.

268
00:11:07,610 --> 00:11:11,050
>> תומס Reimers: האהוב עליי יש
תמיד היה מעצב ערכת צבעים.

269
00:11:11,050 --> 00:11:13,998
>> אליסון BUCHHOLTZ-AU: או.

270
00:11:13,998 --> 00:11:16,010
>> תומס Reimers: איזו הוא now--

271
00:11:16,010 --> 00:11:16,860
>> אליסון BUCHHOLTZ-AU:
אה, זה יפה.

272
00:11:16,860 --> 00:11:18,818
>> תומס Reimers: ואתה
בעצם אפשר לומר, כמו,

273
00:11:18,818 --> 00:11:21,700
אני רוצה שלושה צבעים לצד זה.

274
00:11:21,700 --> 00:11:25,030
ואז בואו נעשה משהו נחמד.

275
00:11:25,030 --> 00:11:29,210
ואז אתה יכול לקבל דוגמא
של מה שעשוי להיראות.

276
00:11:29,210 --> 00:11:32,470
ולאחר מכן, אם תרחף מעל כל
שלהם, זה נותן לך את ערך hex.

277
00:11:32,470 --> 00:11:35,010
>> אז בדיוק כפי שדרך טובה להתחיל
חושב על צבעים

278
00:11:35,010 --> 00:11:39,570
או מה צבעים באתר
אולי הולכים טוב ביחד.

279
00:11:39,570 --> 00:11:45,655
משום שיכול להיות מפתיע
לא קל כמו לבחור כמו שאתה חושב.

280
00:11:45,655 --> 00:11:48,280
ואז דבר מגניב האחר
תמיד מצאתי על האתר הזה

281
00:11:48,280 --> 00:11:51,480
הוא אם אתה מכה דוגמאות, זה יהיה
להראות מה אתר דוגמא

282
00:11:51,480 --> 00:11:54,800
עשוי להיראות כמו שימוש שערכת צבעים.

283
00:11:54,800 --> 00:11:56,270
בכל אופן.

284
00:11:56,270 --> 00:11:57,863
>> חזרה לCSS בפועל.

285
00:11:57,863 --> 00:12:01,112
אליסון BUCHHOLTZ-AU: אבל כמובן, אנחנו
יודע אזכור אלה עשויים להיות שימושי.

286
00:12:01,112 --> 00:12:03,195
תומס Reimers: לא, הם
בהחלט יכול להיות מועיל.

287
00:12:03,195 --> 00:12:04,720
אז הכלל השני, אליסון?

288
00:12:04,720 --> 00:12:05,844
>> אליסון BUCHHOLTZ-AU: כן.

289
00:12:05,844 --> 00:12:08,280
הכלל השני הוא פשוט
מתאים לגופן שלנו.

290
00:12:08,280 --> 00:12:11,520
אז משקל גופן הוא פשוט סוג
ל-- אז המשקל היה

291
00:12:11,520 --> 00:12:15,220
להיות אם אתה רוצה רק, כמו,
נורמלי או, כמו, גופנים דקים יותר,

292
00:12:15,220 --> 00:12:17,251
או במקרה הזה, כמו, נועז.

293
00:12:17,251 --> 00:12:17,750
אני שוכח.

294
00:12:17,750 --> 00:12:21,557
מה אם אתה רוצה it-- יש
אחד דק יותר מאשר רק, כמו, נורמלי?

295
00:12:21,557 --> 00:12:24,140
תומס Reimers: אני לא ממש
יודע אם יש אחד דק יותר.

296
00:12:24,140 --> 00:12:24,680
אליסון BUCHHOLTZ-AU: אני שוכח.

297
00:12:24,680 --> 00:12:26,300
משקל כל כך גופן אנחנו בדרך כלל
פשוט להשתמש לנועז.

298
00:12:26,300 --> 00:12:29,010
אם אתה רוצה לקבל באמת ל
זה, אנחנו הולכים להראות לכם.

299
00:12:29,010 --> 00:12:34,317
יש W3Schools כל שונה
דברים שאתה יכול לעשות עבור גופנים.

300
00:12:34,317 --> 00:12:36,900
אבל בעיקרון, אם אתה רוצה אי פעם
לשנות שום דבר על גופן,

301
00:12:36,900 --> 00:12:39,330
זה תמיד הולך להיות,
כמו, גופן ומשהו.

302
00:12:39,330 --> 00:12:43,450
אז זה יהיה כמו, font-family אם אתה
מנסה לשנות את הסוג בפועל.

303
00:12:43,450 --> 00:12:47,390
זה יהיה font-סגנון אם אתה
רוצה לעשות את זה כמו רהוט,

304
00:12:47,390 --> 00:12:49,710
או נטוי, או מה שלא.

305
00:12:49,710 --> 00:12:53,570
או אפילו font-צבע, אם
אנחנו רוצים לשנות את זה.

306
00:12:53,570 --> 00:12:55,621
>> תומס Reimers: כן.

307
00:12:55,621 --> 00:12:56,925
אז אתה יכול לשנות את זה.

308
00:12:56,925 --> 00:12:59,360
וסוג של רק ל
סיכום עכשיו, כך שאתה יכול

309
00:12:59,360 --> 00:13:01,400
רואה שיש לנו את הבורר עד כאן.

310
00:13:01,400 --> 00:13:03,000
יש לנו סוגריים מסולסלים אלה.

311
00:13:03,000 --> 00:13:06,735
ולאחר מכן יש לנו כללים
תחום בנקודה-פסיק.

312
00:13:06,735 --> 00:13:08,100
האם זה הגיוני?

313
00:13:08,100 --> 00:13:09,130
כן?

314
00:13:09,130 --> 00:13:10,500
מגניב.

315
00:13:10,500 --> 00:13:13,200
אז אם זה good--

316
00:13:13,200 --> 00:13:14,424
>> אליסון BUCHHOLTZ-AU: חזרה.

317
00:13:14,424 --> 00:13:17,590
תומס Reimers: בואו נדבר באופן ספציפי
על איזה סוג של בוררים שיש לנו.

318
00:13:17,590 --> 00:13:19,790
"לגרום לעכשיו יש לנו
סוג של רק לראות תגים.

319
00:13:19,790 --> 00:13:21,696
אבל אתם יכולים לראות את זה מתקבל על הדעת.

320
00:13:21,696 --> 00:13:23,570
תגיד יש לך שתי פסקאות
בדף ואתה

321
00:13:23,570 --> 00:13:26,087
רוצה להיות מסוגל לסגנון
אחת, אך לא אחר,

322
00:13:26,087 --> 00:13:29,170
אתה פשוט לא רוצה להגביל את עצמך
יש להשתמש ב- HTML בפועל שונה

323
00:13:29,170 --> 00:13:33,410
תגים לתת להם סגנונות שונים.

324
00:13:33,410 --> 00:13:35,995
>> אז יש לנו שלוש בסיסיים
סוגים של בוררים.

325
00:13:35,995 --> 00:13:37,120
אליסון BUCHHOLTZ-AU: כן.

326
00:13:37,120 --> 00:13:39,828
אז יש לנו תג, וזה מה ש
אנחנו כבר מדברים על עכשיו.

327
00:13:39,828 --> 00:13:42,430
אז זה כמו סוג של הגוף או p שלך.

328
00:13:42,430 --> 00:13:46,280
ולאחר מכן יש לנו בכיתה, שהוא
כאשר אנחנו מגדירים אותו בקובץ CSS שלנו,

329
00:13:46,280 --> 00:13:49,907
זה תמיד הולך להיות נקודה, מה ש
אתה רוצה את השם של הכיתה שלך להיות.

330
00:13:49,907 --> 00:13:51,490
וזה יכול לחול על דברים רבים.

331
00:13:51,490 --> 00:13:54,610

332
00:13:54,610 --> 00:13:57,610
>> אומר שיש לך חמש פסקאות
ושתיים מהשלושה מהם

333
00:13:57,610 --> 00:14:00,580
צריך להיות מנוסח באותה,
היית להחיל מעמד אליו.

334
00:14:00,580 --> 00:14:03,040
וזו רק הדרך שאנחנו עושים את זה.

335
00:14:03,040 --> 00:14:05,600
אנחנו ניתן לכם דוגמא ל
איפה זה בעצם מופיע.

336
00:14:05,600 --> 00:14:11,030
אבל אם היה לך אולי קצת תג
p, לאחר ש, היית לכתוב,

337
00:14:11,030 --> 00:14:14,170
מעמד שווה כל כיתות
אתה רוצה להחיל עליו.

338
00:14:14,170 --> 00:14:19,280
אז בוררי מעמד כל מה שאנחנו רוצים
לפנות לסעיף הספציפי הזה,

339
00:14:19,280 --> 00:14:21,300
אנחנו רק יכולים לכתוב ככה.

340
00:14:21,300 --> 00:14:24,080
כמובן, אני חושב שדוגמה
יעשה את זה הרבה יותר מוחשי.

341
00:14:24,080 --> 00:14:27,270
>> האחר שיש לנו
הוא id, שנסמן

342
00:14:27,270 --> 00:14:29,707
עם חשיש, או קילו, או hashtag.

343
00:14:29,707 --> 00:14:30,790
תומס Reimers: Octothorpe.

344
00:14:30,790 --> 00:14:32,430
אליסון BUCHHOLTZ-AU: Octothorpe.

345
00:14:32,430 --> 00:14:34,550
שעובד, גם.

346
00:14:34,550 --> 00:14:36,640
וזה אחד באמת צריך להיות ייחודי.

347
00:14:36,640 --> 00:14:39,880
הם צריכים לחול רק על
דבר אחד בדף שלך.

348
00:14:39,880 --> 00:14:43,820
אז אם זה סעיף ספציפי,
או פריט ברשימה, או כל דבר אחר,

349
00:14:43,820 --> 00:14:45,090
זה צריך להיות ייחודי.

350
00:14:45,090 --> 00:14:48,730
ובאותה הדרך שאנחנו פשוט
אומר, כמו, class = "Class2 Class 1,"

351
00:14:48,730 --> 00:14:51,577
זה רק יכול להיות id של כל מה שיש לנו.

352
00:14:51,577 --> 00:14:52,410
תומס Reimers: כן.

353
00:14:52,410 --> 00:14:54,330
אז בואו בהחלט לדבר
על דוגמאות כאן.

354
00:14:54,330 --> 00:14:58,170
ואני רק הולך לצלול
ישר בחזרה לקוד.

355
00:14:58,170 --> 00:15:02,090
אז בואו נסתכל על HTML שלנו.

356
00:15:02,090 --> 00:15:03,960
וכך עכשיו יש לנו פסקה אחת.

357
00:15:03,960 --> 00:15:05,510
זה טקסט.

358
00:15:05,510 --> 00:15:09,151
אני רק הולך לשנות
זה. "זה טקסט .1"

359
00:15:09,151 --> 00:15:11,150
ואז אנחנו הולכים ל
יש לי "הנה טקסט 2."

360
00:15:11,150 --> 00:15:12,525
>> אליסון BUCHHOLTZ-AU: שנייה אחת.

361
00:15:12,525 --> 00:15:13,540
תומס Reimers: כן.

362
00:15:13,540 --> 00:15:16,810
אז עכשיו יש לנו "זה טקסט 2", נכון?

363
00:15:16,810 --> 00:15:21,560
ואנחנו הולכים לראות את זה אם אנחנו טען מחדש
הדף, מה אנחנו הולכים למצוא

364
00:15:21,560 --> 00:15:23,067
הוא שאנחנו הולכים find--

365
00:15:23,067 --> 00:15:24,150
אליסון BUCHHOLTZ-AU: או.

366
00:15:24,150 --> 00:15:24,983
תומס Reimers: כן.

367
00:15:24,983 --> 00:15:27,570
אנחנו הולכים למצוא "זה
על מודעה 1 "ו-" הנה טקסט 2. "

368
00:15:27,570 --> 00:15:28,650
>> אליסון BUCHHOLTZ-AU: ו
צבע צהוב יצאתי יפה.

369
00:15:28,650 --> 00:15:31,066
>> תומס Reimers: ואתה תראה
שהבורר שלנו עכשיו,

370
00:15:31,066 --> 00:15:34,940
אשר חל על p של, או
סעיפים, משפיע שניהם,

371
00:15:34,940 --> 00:15:38,700
כי שניהם עומדים ב
מצב ששניהם תג p.

372
00:15:38,700 --> 00:15:40,360
זה הגיוני כולל.

373
00:15:40,360 --> 00:15:43,340
אז השאלה היא, ובכן, מה
אם אנחנו רוצים רק להשיג אחד?

374
00:15:43,340 --> 00:15:46,350
אז בדיוק כמו אליסון אמר,
יש לנו שתי דרכים אחרות לעשות את זה.

375
00:15:46,350 --> 00:15:47,320
אני הולך להתחיל עם id.

376
00:15:47,320 --> 00:15:48,405
>> אליסון BUCHHOLTZ-AU:
בואו נתחיל עם id.

377
00:15:48,405 --> 00:15:50,405
>> תומס Reimers: ושני
אלה הן תכונות.

378
00:15:50,405 --> 00:15:53,200
אז תכונות קיימות ב- HTML.

379
00:15:53,200 --> 00:15:55,600
ומה שהם הוא
משהו שאתה מוסיף

380
00:15:55,600 --> 00:15:58,840
בתוך התג שהוא
נפרד משם התג.

381
00:15:58,840 --> 00:16:01,301
אז אתה יכול לקבל תכונות מרובות.

382
00:16:01,301 --> 00:16:01,800
כן?

383
00:16:01,800 --> 00:16:03,950
>> אליסון BUCHHOLTZ-AU: אני רק הולך
לומר, מהדוגמא שלך מPSET 7,

384
00:16:03,950 --> 00:16:06,650
אם מישהו מכם לנסות ליישר
דברים למרכז,

385
00:16:06,650 --> 00:16:08,550
ייתכן שהשתמשת ב
"טקסט align = מרכז."

386
00:16:08,550 --> 00:16:10,550
ושמת לב שזה כנראה
נסובים

387
00:16:10,550 --> 00:16:12,650
הטקסט שלך או סרגל הניווט שלך.

388
00:16:12,650 --> 00:16:15,499
אז זה פשוט גם תכונה
שאולי אתה מכיר.

389
00:16:15,499 --> 00:16:18,040
תומס Reimers: יש חבורה
של תכונות שתראו.

390
00:16:18,040 --> 00:16:18,539
כן.

391
00:16:18,539 --> 00:16:21,250
כמו התייחסות טובה לPSET 7.

392
00:16:21,250 --> 00:16:23,150
יש לנו id.

393
00:16:23,150 --> 00:16:25,080
גם אתה יכול לקבל
כיתה, דברים כאלה.

394
00:16:25,080 --> 00:16:27,250
תג יחיד יכול להיות תכונות רבות.

395
00:16:27,250 --> 00:16:33,140
אז החל בid, בואו נעמיד פנים ש
רוצה שיהיה לי id ל-- אני לא יודע.

396
00:16:33,140 --> 00:16:35,140
אנחנו קוראים לזה מיוחד,
כי זה אחד, אנחנו

397
00:16:35,140 --> 00:16:37,867
הולך לעשות נועז, ו
קו תחתון, וכל מה ש.

398
00:16:37,867 --> 00:16:39,950
אליסון BUCHHOLTZ-AU: זה
הולכים להיות סופר מיוחד.

399
00:16:39,950 --> 00:16:42,360
תומס Reimers: אז זה
אחד, יש לנו מיוחד id.

400
00:16:42,360 --> 00:16:48,140
אז הדרך כדי לבחור את זה, אז, הוא
בmain.css, ולא שיש לי תג p,

401
00:16:48,140 --> 00:16:51,500
אתה עושה #special, בסדר?

402
00:16:51,500 --> 00:16:55,538
ושבוחר
דבר עם id מיוחד.

403
00:16:55,538 --> 00:16:57,295
האם זה הגיוני לכולם?

404
00:16:57,295 --> 00:16:57,920
קהל: כן.

405
00:16:57,920 --> 00:16:59,110
תומס Reimers: מגניב.

406
00:16:59,110 --> 00:17:04,440
אז עכשיו אם נחזור,
אנחנו see-- אופס.

407
00:17:04,440 --> 00:17:06,240
כן.

408
00:17:06,240 --> 00:17:09,460
אנחנו תראו שזה רק בוחר
אחד עם id מיוחד.

409
00:17:09,460 --> 00:17:10,622
כן?

410
00:17:10,622 --> 00:17:11,900
נשמע מגניב.

411
00:17:11,900 --> 00:17:12,570
כן.

412
00:17:12,570 --> 00:17:15,456
>> קהל: האם משהו שיש לי
לייחס של שתי הכיתה וid?

413
00:17:15,456 --> 00:17:16,359
>> תומס Reimers: כן.

414
00:17:16,359 --> 00:17:16,900
קהל: OK.

415
00:17:16,900 --> 00:17:20,887
ואז מה קורה אם לאחר מכן לתת לי
זה כמה כללים בCSS סכסוך זה?

416
00:17:20,887 --> 00:17:21,970
תומס Reimers: בהחלט.

417
00:17:21,970 --> 00:17:23,940
אנחנו בהחלט הולכים
לדבר על זה.

418
00:17:23,940 --> 00:17:31,890
אז בדיוק מה שאתה מקבל
ב, אתה יכול להיות גם שיעורים.

419
00:17:31,890 --> 00:17:36,380
אז בואו נעמיד פנים שלא היה לי
שלושה סעיפים ואני

420
00:17:36,380 --> 00:17:38,730
רציתי לעצב הראשון
שתיים, אבל לא שלישי.

421
00:17:38,730 --> 00:17:42,850
ובכן, הרעיון הראשון שלך עשוי להיות, ובכן, אני
רק יכול לתת את השני id.

422
00:17:42,850 --> 00:17:45,590
אבל אתה לא יכול, כי id,
בדיוק כמו אליסון אמר,

423
00:17:45,590 --> 00:17:47,330
צריך להיות ייחודי.

424
00:17:47,330 --> 00:17:50,860
>> אז במקום id, מה שאתה
ניתן להשתמש הוא שאתה יכול להשתמש בכיתה.

425
00:17:50,860 --> 00:17:57,880
וclass-- מה שהוא מאפשר
לך לעשות הוא בעצם אומרים,

426
00:17:57,880 --> 00:17:59,610
זה שייך כחלק מקבוצה.

427
00:17:59,610 --> 00:18:02,410
במקרה זה, הקבוצה שלנו
נקרא מיוחד.

428
00:18:02,410 --> 00:18:06,500
ומה אנחנו הולכים לעשות לאחר מכן הוא
אנחנו הולכים say-- במקום קילו,

429
00:18:06,500 --> 00:18:08,070
אנחנו הולכים להשתמש בנקודה.

430
00:18:08,070 --> 00:18:08,740
בסדר?

431
00:18:08,740 --> 00:18:11,950
ושים לב שהק"ג ונקודה
קיימים רק בתוך קובץ CSS,

432
00:18:11,950 --> 00:18:12,797
לא בתוך ה- HTML.

433
00:18:12,797 --> 00:18:13,880
אליסון BUCHHOLTZ-AU: כן.

434
00:18:13,880 --> 00:18:15,185
הבחנה חשובה.

435
00:18:15,185 --> 00:18:17,510
>> תומס Reimers: יש לי
היה כל כך הרבה מאבק,

436
00:18:17,510 --> 00:18:23,990
כי שמתי את החשיש בHTML ו
רק אז הרגיש מטופש במשך זמן רב.

437
00:18:23,990 --> 00:18:27,470
ראה כיצד הוא בוחר את שניהם
אלה עם כיתה זה?

438
00:18:27,470 --> 00:18:28,210
מגניב.

439
00:18:28,210 --> 00:18:29,950
>> עכשיו, דברים יכולים להיות כיתות מרובות.

440
00:18:29,950 --> 00:18:32,790
בואו נגיד שאני רציתי לעשות ראשון
שני יש להם רקע של צהוב

441
00:18:32,790 --> 00:18:36,770
ושתיים יש לי
צבע גופן של כחול.

442
00:18:36,770 --> 00:18:37,270
OK.

443
00:18:37,270 --> 00:18:39,735
אני לא ממש יודע למה אני הייתי
רוצה לעשות את זה, אבל אני יכול.

444
00:18:39,735 --> 00:18:42,401
>> אליסון BUCHHOLTZ-AU: אולי לא
המלצתי עליו לאתר האינטרנט שלך.

445
00:18:42,401 --> 00:18:43,880
אבל למטרות שלנו, זה יעשה.

446
00:18:43,880 --> 00:18:46,294
>> תומס Reimers: זה לא
ערכת צבעים טובה.

447
00:18:46,294 --> 00:18:49,210
אליסון BUCHHOLTZ-AU: ובכן, צהוב
וכחול הם צבעי התיכון שלי.

448
00:18:49,210 --> 00:18:50,947
אני לא יודע, אם כי.

449
00:18:50,947 --> 00:18:53,530
תומס Reimers: אליסון גבוה של
היה בבית הספר ערכת צבעים נהדר.

450
00:18:53,530 --> 00:18:54,520
[שחוק]

451
00:18:54,520 --> 00:18:59,120
אז מה שאנחנו יכולים לקרוא לזה הוא
בואו לקרוא זה-- אז יש לנו מיוחד

452
00:18:59,120 --> 00:19:00,030
ויש לנו די.

453
00:19:00,030 --> 00:19:02,405
אני מציע, לזה, אתה משתמש ב
שמות הרבה יותר תיאורים.

454
00:19:02,405 --> 00:19:05,820
אליסון BUCHHOLTZ-AU: כן, הייתי
קורא לזה, כמו, צהוב או כחול.

455
00:19:05,820 --> 00:19:08,314
>> תומס Reimers: אנחנו לא
באמת עושה אתר אמיתי,

456
00:19:08,314 --> 00:19:09,730
וזו הסיבה שאנחנו לא עושים את זה.

457
00:19:09,730 --> 00:19:11,521
אבל אם אתה באמת
היה באתר אמיתי, אתה

458
00:19:11,521 --> 00:19:16,220
אולי יש לי, כמו, כותרת מאמר,
תוכן מאמר, מילה ראשונה,

459
00:19:16,220 --> 00:19:21,920
דברים כאלה, המאפשרים
לך יהיה הרבה יותר תיאורים.

460
00:19:21,920 --> 00:19:23,550
אלה הם באמת בדיוק כמו משתנים.

461
00:19:23,550 --> 00:19:28,390
הם צריכים להיות שם באופן שבו
אתה יכול, like-- כן, ככזה.

462
00:19:28,390 --> 00:19:29,470
מושלם.

463
00:19:29,470 --> 00:19:30,480
>> אז צבע רקע.

464
00:19:30,480 --> 00:19:35,920
ואז אנחנו הולכים לsay-- כך
דרך לשנות את הצבע היא רק "צבע".

465
00:19:35,920 --> 00:19:38,412
ואנחנו הולכים לעשות את זה כחול.

466
00:19:38,412 --> 00:19:40,150
זה מגניב.

467
00:19:40,150 --> 00:19:42,640
אז עכשיו יש לנו את
שני ראשונים יש לי מיוחדים.

468
00:19:42,640 --> 00:19:45,972
הבא הולך
יש לי "class = למדי."

469
00:19:45,972 --> 00:19:49,180
ואז מה יעשה: אליסון BUCHHOLTZ-AU
רוצה להוסיף "די" לאמצע אחד.

470
00:19:49,180 --> 00:19:49,971
תומס Reimers: כן.

471
00:19:49,971 --> 00:19:52,970
ולאחר מכן לאמצע אחד,
להוסיף "די," מה שקורה

472
00:19:52,970 --> 00:19:56,880
רק יש לך חלל.

473
00:19:56,880 --> 00:19:59,800
אז תכונת המעמד
רשימה המופרדת בחלל

474
00:19:59,800 --> 00:20:02,450
של כל הכיתות
החלים על תג ש.

475
00:20:02,450 --> 00:20:02,959
בסדר?

476
00:20:02,959 --> 00:20:05,750
זה לא כמו זה שייך ל
איזה מעמד מיוחד הנקרא

477
00:20:05,750 --> 00:20:07,180
"מיוחד, חלל, די."

478
00:20:07,180 --> 00:20:10,870
היא שייכת לשתי classes--
מיוחד ויפה.

479
00:20:10,870 --> 00:20:12,492
כן?

480
00:20:12,492 --> 00:20:14,360
מגניב.

481
00:20:14,360 --> 00:20:17,010
>> ואז אם אנחנו מסתכלים
על מה שקורה, אנחנו

482
00:20:17,010 --> 00:20:21,850
הולך לראות כי ראשון יש
רקע צהוב, טקסט שחור.

483
00:20:21,850 --> 00:20:22,450
one-- השני

484
00:20:22,450 --> 00:20:26,160
>> אליסון BUCHHOLTZ-AU: --has נועז
רקע צהוב עם טקסט כחול.

485
00:20:26,160 --> 00:20:29,330
והאחרון שלנו פשוט יש
טקסט כחול שהוקצינו לה.

486
00:20:29,330 --> 00:20:30,870
>> תומס Reimers: מגניב?

487
00:20:30,870 --> 00:20:32,491
איך בוררים עובדים?

488
00:20:32,491 --> 00:20:32,990
מדהים.

489
00:20:32,990 --> 00:20:34,720
>> אליסון BUCHHOLTZ-AU: האם אנחנו רוצים
לדבר על הקונפליקט עכשיו אז?

490
00:20:34,720 --> 00:20:35,780
>> תומס Reimers: אז כן.

491
00:20:35,780 --> 00:20:36,310
בהחלט.

492
00:20:36,310 --> 00:20:38,380
אז מה קורה אם אתה
יש סכסוך, נכון?

493
00:20:38,380 --> 00:20:44,740
בואו נעמיד פנים ראשון
מגדיר משהו like--

494
00:20:44,740 --> 00:20:47,240
אליסון BUCHHOLTZ-AU: אולי
זה אחד משנה את הרקע?

495
00:20:47,240 --> 00:20:48,090
תומס Reimers: כן.

496
00:20:48,090 --> 00:20:51,699
אז אנחנו הולכים לעשות "די"
לשנות את הרקע לסלמון.

497
00:20:51,699 --> 00:20:54,740
אליסון BUCHHOLTZ-AU: אתה רק עם
כל הצבעים נהדרים היום, תומס.

498
00:20:54,740 --> 00:20:55,573
תומס Reimers: כן.

499
00:20:55,573 --> 00:20:58,200
בגלל גיליתי שאני יכול
להשתמש סלמון כצבע אמיתי.

500
00:20:58,200 --> 00:21:00,270
אז אנחנו הולכים רק כדי לעשות את זה.

501
00:21:00,270 --> 00:21:01,770
אני גם חושב ששקיעה היא צבע אמיתי.

502
00:21:01,770 --> 00:21:03,103
קהל: שקיעה זה צבע אמיתי?

503
00:21:03,103 --> 00:21:04,572
אליסון BUCHHOLTZ-AU: בוא ננסה את זה.

504
00:21:04,572 --> 00:21:07,735
תומס Reimers: לאחר הדגמה זו
רק משום שבמקרה זה יקלקל את,

505
00:21:07,735 --> 00:21:08,943
אני לא רוצה להיות באגים.

506
00:21:08,943 --> 00:21:11,580
אז אנחנו יודעים סלמון זה צבע אמיתי.

507
00:21:11,580 --> 00:21:15,626
אז כל ניחושים ב
מה הולך לקרות?

508
00:21:15,626 --> 00:21:17,522
>> אליסון BUCHHOLTZ-AU: יש לך מושג?

509
00:21:17,522 --> 00:21:20,002
>> קהל: [לא ברור].

510
00:21:20,002 --> 00:21:20,920
>> תומס Reimers: כן.

511
00:21:20,920 --> 00:21:22,150
אז יש לך את זה בדיוק נכון.

512
00:21:22,150 --> 00:21:24,930
בעיקרון, זה לוקח
הכלל האחרון שהיא ניתנה.

513
00:21:24,930 --> 00:21:27,860
>> אליסון BUCHHOLTZ-AU: אז זה
שבו מדורג לתוקף.

514
00:21:27,860 --> 00:21:31,080
>> תומס Reimers: אז זוכר איך
היה שגיליונות סגנון מדורגים?

515
00:21:31,080 --> 00:21:33,660
אז על ידי זה, אנחנו מתכוונים לסוג של
שיש לנו חבורה של כללים

516
00:21:33,660 --> 00:21:37,115
אשר חלים על גב אחד את השני, ו
הם יכולים גם לעקוף אחד את השני.

517
00:21:37,115 --> 00:21:39,380
>> אליסון BUCHHOLTZ-AU: אז
מה של בתחתית

518
00:21:39,380 --> 00:21:41,540
יעקוף מה זה בחלק העליון.

519
00:21:41,540 --> 00:21:45,842
אתה יכול להיות כללים שלחלוטין
לשלול משהו לפני כן.

520
00:21:45,842 --> 00:21:48,300
זו גם הסיבה שאתה רוצה להיות
היזהר כאשר אתה סטיילינג,

521
00:21:48,300 --> 00:21:51,465
כך שאתה לא יוצר כללים ש
אתה רק דריסה לחלוטין.

522
00:21:51,465 --> 00:21:53,340
>> תומס Reimers: או אולי אתה
רוצה לדרוס כללים.

523
00:21:53,340 --> 00:21:53,920
>> אליסון BUCHHOLTZ-AU: או אולי אתה עושה.

524
00:21:53,920 --> 00:21:54,300
כן.

525
00:21:54,300 --> 00:21:57,175
>> תומס Reimers: העמד פנים שיש לך
כיתה שחלה על רוב הדברים,

526
00:21:57,175 --> 00:22:01,220
אבל נניח שאתה רוצה לשנות את
צבע רקע לאדום והגופן

527
00:22:01,220 --> 00:22:03,140
משקל לנועז לביותר
דברים, אבל לאחד,

528
00:22:03,140 --> 00:22:06,098
אתה רק רוצה את צבע הרקע
להיות אדום, אבל אתה רוצה שכל אחר

529
00:22:06,098 --> 00:22:09,990
תכונות, אתה יכול לעשות משהו
כמו "font-משקל = נורמלי,"

530
00:22:09,990 --> 00:22:12,760
אשר לאחר מכן היה לבטל כי שינוי נועז.

531
00:22:12,760 --> 00:22:14,480
כן?

532
00:22:14,480 --> 00:22:17,250
שוב, הדרך הטובה ביותר, אני חושב ש
אליסון אמר את זה, הוא פשוט לתרגל.

533
00:22:17,250 --> 00:22:18,080
>> אליסון BUCHHOLTZ-AU: ניסויים.

534
00:22:18,080 --> 00:22:20,090
>> תומס Reimers: עיסוק, בפועל,
בפועל, וניסוי.

535
00:22:20,090 --> 00:22:22,950
אני מכיר הרבה אנשים שחושבים
CSS הוא רק הרבה ניחוש-ו- סימון

536
00:22:22,950 --> 00:22:25,580
בסופו של היום, שבו אם
אתה רוצה לעשות something-- כמו,

537
00:22:25,580 --> 00:22:27,663
יש לך מושג כללי, אבל
אתה עדיין כנראה צריך

538
00:22:27,663 --> 00:22:31,390
לנסות אותו כדי לוודא ש
אתה יודע איך זה נראה.

539
00:22:31,390 --> 00:22:34,482
>> קהל: כאשר אתה החלים
כיתות, יותר מפעם אחת

540
00:22:34,482 --> 00:22:37,339
לאותו סעיף
או סעיף, עושה את זה

541
00:22:37,339 --> 00:22:39,505
משנה מה מטרה שאתה יכול
הקלד אותם בציטוטים?

542
00:22:39,505 --> 00:22:40,992
>> תומס Reimers: לא, בכלל לא.

543
00:22:40,992 --> 00:22:45,764
>> אליסון BUCHHOLTZ-AU: מה שחשוב הוא
הסדר בתוך גיליון סגנון CSS שלך.

544
00:22:45,764 --> 00:22:47,430
קהל: האם אתה יכול לחזור על השאלה?

545
00:22:47,430 --> 00:22:50,680
תומס Reimers: אה.

546
00:22:50,680 --> 00:22:53,990
אליסון BUCHHOLTZ-AU: בתוך
כיתה, כיתות, כאשר אתה נותן

547
00:22:53,990 --> 00:22:56,964
למשהו בHTML, עושה
זה משנה איזה סדר הם ב?

548
00:22:56,964 --> 00:22:58,130
זה לא משנה את הסדר.

549
00:22:58,130 --> 00:23:02,915
מה שחשוב הוא סדר
בוררי מעמד בתוך CSS שלך,

550
00:23:02,915 --> 00:23:04,306
בתוך גיליון הסגנון שלך.

551
00:23:04,306 --> 00:23:06,982
>> תומס Reimers: נשמע טוב?

552
00:23:06,982 --> 00:23:08,532
>> אליסון BUCHHOLTZ-AU: יפה.

553
00:23:08,532 --> 00:23:11,539
>> תומס Reimers: ואז
אנחנו הולכים להמשיך to--

554
00:23:11,539 --> 00:23:13,330
אליסון BUCHHOLTZ-AU:
מה יש לנו הבא?

555
00:23:13,330 --> 00:23:14,245
אני שוכח.

556
00:23:14,245 --> 00:23:16,087
אה, רק שיש לנו דוגמאות.

557
00:23:16,087 --> 00:23:17,295
אבל אנחנו כבר סוג של עשו אלה.

558
00:23:17,295 --> 00:23:18,990
אנחנו עשינו דוגמאות על לטוס.

559
00:23:18,990 --> 00:23:20,540
>> תומס Reimers: אנחנו מקבלים ל
לשלב הבוררים בקרוב.

560
00:23:20,540 --> 00:23:22,790
>> אליסון BUCHHOLTZ-AU: אה,
אנחנו מקבלים לשלב בוררים.

561
00:23:22,790 --> 00:23:25,260
תומס Reimers: אז כמה
דוגמאות היא שיש לנו

562
00:23:25,260 --> 00:23:29,630
# קילו dog--, או hashtag,
או octothorpe, או מה ש

563
00:23:29,630 --> 00:23:32,050
אתה רוצה לקרוא לthat-- חד.

564
00:23:32,050 --> 00:23:34,875
>> אליסון BUCHHOLTZ-AU: כלב שארפ.

565
00:23:34,875 --> 00:23:36,470
>> תומס Reimers: אז יש לך .pets.

566
00:23:36,470 --> 00:23:39,059

567
00:23:39,059 --> 00:23:41,600
יש משהו id של כלב,
יש רק אחד כלב בדף.

568
00:23:41,600 --> 00:23:43,870
יש משהו id של
חתול, יש רק חתול אחד.

569
00:23:43,870 --> 00:23:45,665
ייתכן שיש חיות מחמד רבות בדף.

570
00:23:45,665 --> 00:23:47,570
זו הסיבה שאנו נתנו שכיתות.

571
00:23:47,570 --> 00:23:48,740
יש לך דוגמא של p.

572
00:23:48,740 --> 00:23:50,490
ואז כל כך אחד מ
הדוגמא האחרונה, ש

573
00:23:50,490 --> 00:23:53,790
הוא משהו שלא דיבר עליו,
זה מה שקורה כשאתה לשלב אותם.

574
00:23:53,790 --> 00:23:54,580
אז p.pets.

575
00:23:54,580 --> 00:23:57,510

576
00:23:57,510 --> 00:24:02,950
>> אז בשביל זה, בואו נחזור ל
קוד ולהציג את another-- כן.

577
00:24:02,950 --> 00:24:04,290
אז אחזור לכאן.

578
00:24:04,290 --> 00:24:04,850
>> אליסון BUCHHOLTZ-AU: אני
מרגיש שזה אמת--

579
00:24:04,850 --> 00:24:08,105
סתם מחפש דרך דוגמאות
הוא באמת הדרך ללמוד את זה.

580
00:24:08,105 --> 00:24:09,360
אז זה מה שאנחנו עושים.

581
00:24:09,360 --> 00:24:14,030
>> תומס Reimers: אז בוא נעמיד פנים ש
רק רוצה לבחור טקסט 2, נכון?

582
00:24:14,030 --> 00:24:16,530
אז אנחנו בהחלט לא יכולים
לעשות את זה עם id.

583
00:24:16,530 --> 00:24:19,620
ובכן, אנחנו יכולים לעשות את זה עם
id, אבל זה לא חייב id.

584
00:24:19,620 --> 00:24:22,490
אני יכול להוסיף אחד, אבל בוא נעמיד פנים
כי אני לא רוצה להוסיף אחד

585
00:24:22,490 --> 00:24:24,910
או שכבר יש לו משהו אחר.

586
00:24:24,910 --> 00:24:26,516
אני לא יכול לעשות את זה עם זה.

587
00:24:26,516 --> 00:24:28,870
התג הוא בהחלט לא ייחודי, נכון?

588
00:24:28,870 --> 00:24:30,670
וגם היא בכיתה.

589
00:24:30,670 --> 00:24:32,314
אבל אתה יכול לשלב את הדברים האלה.

590
00:24:32,314 --> 00:24:35,230
נניח שאנחנו רוצים לעשות משהו
אשר חל רק על דברים ש

591
00:24:35,230 --> 00:24:39,420
יש לי מיוחד בכיתה ו
שיש לי המעמד יפה.

592
00:24:39,420 --> 00:24:48,150
>> אז מה שאתה יכול לעשות הוא בmain.css,
אתה יכול להגיד, בוא למחוק ראשון זה.

593
00:24:48,150 --> 00:24:50,240
ניתן לשלב הבאים.

594
00:24:50,240 --> 00:24:51,430
אז אתה יכול לעשות .special.

595
00:24:51,430 --> 00:24:52,110
אין מקום.

596
00:24:52,110 --> 00:24:54,770
רק .special.pretty.

597
00:24:54,770 --> 00:25:00,550
מה זה אומר משהו
שהוא גם מיוחד ויפה.

598
00:25:00,550 --> 00:25:01,900
האם זה הגיוני?

599
00:25:01,900 --> 00:25:04,190
ואם אנחנו הולכים כאן, מה
אתה הולך לראות

600
00:25:04,190 --> 00:25:09,734
הוא כלל זה חל רק על
שנייה אחת, שבה יש את שני דברים האלה.

601
00:25:09,734 --> 00:25:11,400
ואתה יכול לעשות את זה להרבה דברים.

602
00:25:11,400 --> 00:25:13,270
אתה יכול say-- בואו
להעמיד פנים שאני רוצה רק

603
00:25:13,270 --> 00:25:18,300
לעשות דברים שיש להם המעמד יפה
ושהם גם תג סעיף.

604
00:25:18,300 --> 00:25:19,920
אז p.pretty.

605
00:25:19,920 --> 00:25:23,585
בואו נעמיד פנים שיש לי
משהו יפה על גוף התג.

606
00:25:23,585 --> 00:25:25,850
בסדר?

607
00:25:25,850 --> 00:25:28,490
אני יכול להפעיל את זה ואני
יכול לראות שזה רק

608
00:25:28,490 --> 00:25:32,720
הולך תחול על דברים שהם
סעיפים עם המעמד יפה.

609
00:25:32,720 --> 00:25:35,650
ואתה יכול לשלב את אלה,
בעצם, רב ככל שאתה רוצה.

610
00:25:35,650 --> 00:25:38,580
אז אתה יכול פשוט לשים אותם יחד.

611
00:25:38,580 --> 00:25:39,604
האם זה הגיוני?

612
00:25:39,604 --> 00:25:41,770
אליסון BUCHHOLTZ-AU: אז
זה סוג של יותר שימושי

613
00:25:41,770 --> 00:25:45,490
כאשר, תומס אמר קודם לכן, אולי
יש לך אתר מאוד מסובך,

614
00:25:45,490 --> 00:25:48,050
וכבר יש לך הרבה
של כללים אלה בכתב,

615
00:25:48,050 --> 00:25:51,170
ואתה רק צריך
לשלב בין שני מקודם.

616
00:25:51,170 --> 00:25:55,350
כמו במקום לכתוב כל
בורר חדש ולשנות אותה לשם,

617
00:25:55,350 --> 00:25:58,592
רק אתה יכול לשלב
שלהם איפה שהוא חופף.

618
00:25:58,592 --> 00:26:00,670
>> תומס Reimers: או שאתה
עלול למצוא out-- לפעמים

619
00:26:00,670 --> 00:26:04,290
יש אחד בכיתה ש
עושה צבע של הגופן כמו כחול,

620
00:26:04,290 --> 00:26:06,740
ויש סוג אחר ש
הופך את הרקע הכחול.

621
00:26:06,740 --> 00:26:07,840
וזה פשוט לא יעבוד.

622
00:26:07,840 --> 00:26:10,924
אז אתה כותב מקרה מיוחד, שבו,
like-- אבל אם יש לו את שניהם, את מה שאתה

623
00:26:10,924 --> 00:26:13,548
הולך לעשות הוא שאתה הולך
לעשות את זה הצל הזה של כחול

624
00:26:13,548 --> 00:26:15,310
וזה אחד גוון של כחול אחר זה.

625
00:26:15,310 --> 00:26:15,580
נכון?

626
00:26:15,580 --> 00:26:17,955
>> אליסון BUCHHOLTZ-AU: טוב
עבור אלה סוגים של חריגים.

627
00:26:17,955 --> 00:26:21,220
תומס Reimers: אז ל
לחשוב על בעיות

628
00:26:21,220 --> 00:26:25,000
שעלול להתעורר כאשר אתה לשלב אותם.

629
00:26:25,000 --> 00:26:27,020
מגניב.

630
00:26:27,020 --> 00:26:29,692
אז בחזרה למצגת שלנו.

631
00:26:29,692 --> 00:26:31,400
אליסון BUCHHOLTZ-AU:
אנחנו כמעט שם.

632
00:26:31,400 --> 00:26:34,022
תומס Reimers: וזה
הפסיק חיבור.

633
00:26:34,022 --> 00:26:36,494
אליסון BUCHHOLTZ-AU: הו, לא.

634
00:26:36,494 --> 00:26:39,125
אליסון BUCHHOLTZ-AU: CS ב
המשרד, אינטרנט הולך ויורד.

635
00:26:39,125 --> 00:26:40,360
הו, האירוניה.

636
00:26:40,360 --> 00:26:45,620
>> תומס Reimers: אז למרבה המזל, אנחנו יכולים
להציג בלי האינטרנט, אני מניח,

637
00:26:45,620 --> 00:26:47,380
כי יש לנו את כל השקופיות כאן.

638
00:26:47,380 --> 00:26:49,304
אז בואו נדבר על
מערכת יחסים של תגים.

639
00:26:49,304 --> 00:26:50,470
אליסון BUCHHOLTZ-AU: נכון.

640
00:26:50,470 --> 00:26:52,660
אז פשוט סוג של הולך
את מה שאמר תומס,

641
00:26:52,660 --> 00:26:54,180
זה רק עוד דרך לעשות את זה.

642
00:26:54,180 --> 00:26:57,840
אז יש לנו כמה הורים
בורר עם בורר ילד.

643
00:26:57,840 --> 00:27:02,815
אז בדוגמא זו כאן, יש לנו כמה
גוף עם סרגל ניווט כיתה, כפתור כיתה.

644
00:27:02,815 --> 00:27:03,315
אה.

645
00:27:03,315 --> 00:27:03,990
>> תומס Reimers: אה, סליחה.

646
00:27:03,990 --> 00:27:06,180
>> אליסון BUCHHOLTZ-AU: ו
בעצם, מה זה אומר

647
00:27:06,180 --> 00:27:11,070
הוא לבחור את כל הילדים, כמו
כל מיני בוררים אלה,

648
00:27:11,070 --> 00:27:13,040
בתוך בורר הורה זה.

649
00:27:13,040 --> 00:27:16,004
ואלה הם היחידים
זה אי פעם הולך לפנות ל.

650
00:27:16,004 --> 00:27:17,755
אני לא יודע אם אתה
יש דרך טובה יותר ל--

651
00:27:17,755 --> 00:27:19,504
תומס Reimers: אז אני
מניח בדרך לחושב

652
00:27:19,504 --> 00:27:22,440
על זה הוא זוכר איך לפני
אנחנו קצת כמו לשים אותם יחד.

653
00:27:22,440 --> 00:27:26,340
ואז זה אומר שאלמנט אחד
התואם את כל אלה.

654
00:27:26,340 --> 00:27:29,530
מה שזה אומר זה, אני
רוצה שתתאים לכל דבר

655
00:27:29,530 --> 00:27:33,220
בתוך some-- אני רוצה
לך למצוא בורר.

656
00:27:33,220 --> 00:27:35,670
ואז בתוך זה, אני רוצה
לך להתאים דברים חדשים.

657
00:27:35,670 --> 00:27:36,170
נכון?

658
00:27:36,170 --> 00:27:40,900
אז בCSS, זה הכול עניין של סוג של
להיות מסוגל להתאים את הפריטים הללו.

659
00:27:40,900 --> 00:27:43,050
ואתה יכול לנסות להתאים
פריטים בתוך פריטים אחרים.

660
00:27:43,050 --> 00:27:46,510
>> אז בואו באמת עושים דוגמא,
ואנחנו חושבים שיהיה להבהיר.

661
00:27:46,510 --> 00:27:53,090
אז בואו נעמיד פנים שיש לנו מיוחד,
מיוחד למדי, לא משנה מה.

662
00:27:53,090 --> 00:27:55,690
ולאחר מכן יש לנו קישור, בסדר?

663
00:27:55,690 --> 00:27:59,780

664
00:27:59,780 --> 00:28:02,370
אז לזכור, הוא קישור.

665
00:28:02,370 --> 00:28:03,900
זה לא הולך לשום מקום.

666
00:28:03,900 --> 00:28:11,500
ואנחנו הולכים לתת לו
קישור הכיתה, אני מניח.

667
00:28:11,500 --> 00:28:13,335
בואו לתת את זה
class-- לתת לי רעיון.

668
00:28:13,335 --> 00:28:14,460
אליסון BUCHHOLTZ-AU: מגניב.

669
00:28:14,460 --> 00:28:16,420
תומס Reimers: Coo-- בואו
לעבור את זה בכיתה די.

670
00:28:16,420 --> 00:28:16,930
למה לא?

671
00:28:16,930 --> 00:28:17,971
>> אליסון BUCHHOLTZ-AU: OK.

672
00:28:17,971 --> 00:28:23,040
תומס Reimers: אז
דברים הנכונים עכשיו די

673
00:28:23,040 --> 00:28:26,000
הולכים לעשות רקע
צבע כחול, רקע של סלמון.

674
00:28:26,000 --> 00:28:27,969
זה הגיוני.

675
00:28:27,969 --> 00:28:28,760
ואם אנחנו עושים זה--

676
00:28:28,760 --> 00:28:29,620
>> אליסון BUCHHOLTZ-AU:
האם אתה רוצה להוסיף טקסט

677
00:28:29,620 --> 00:28:31,078
כך למעשה קישור מופיע?

678
00:28:31,078 --> 00:28:35,088
תומס Reimers: זה
יהיה שיחה טובה.

679
00:28:35,088 --> 00:28:37,921
אליסון BUCHHOLTZ-AU: "נכון סיבה
עכשיו אנחנו רק הולכים לקבל שום דבר.

680
00:28:37,921 --> 00:28:39,690
תומס Reimers: אז זה קישור.

681
00:28:39,690 --> 00:28:42,202
"זה קישור."

682
00:28:42,202 --> 00:28:45,820
אה, וזה הולך
להיות חוליה נוספת.

683
00:28:45,820 --> 00:28:47,280
בואו לתת לו את המעמד "מגניב".

684
00:28:47,280 --> 00:28:50,295
אתה צודק.

685
00:28:50,295 --> 00:28:50,795
מגניב.

686
00:28:50,795 --> 00:28:53,590

687
00:28:53,590 --> 00:28:56,010
אז עכשיו אנחנו הולכים לתפוס את זה.

688
00:28:56,010 --> 00:28:57,269
אנחנו הולכים לזרוק אחד.

689
00:28:57,269 --> 00:28:59,060
יש לנו אחד ב
תג מיוחד, ואנחנו גם

690
00:28:59,060 --> 00:29:01,150
הולכים להיות אחד בתג די.

691
00:29:01,150 --> 00:29:05,449
ועכשיו מה שאנחנו הולכים ל
לעשות הוא שאנחנו הולכים לעשות cool--

692
00:29:05,449 --> 00:29:06,490
מה אנחנו רוצים לעשות את זה?

693
00:29:06,490 --> 00:29:10,347

694
00:29:10,347 --> 00:29:12,180
אליסון BUCHHOLTZ-AU:
האם אנחנו יכולים לעשות את זה גדול יותר?

695
00:29:12,180 --> 00:29:13,800
תומס Reimers: בוא נותנים לו גבול.

696
00:29:13,800 --> 00:29:14,840
אליסון BUCHHOLTZ-AU: אנחנו יכולים גבול.

697
00:29:14,840 --> 00:29:15,673
תומס Reimers: כן.

698
00:29:15,673 --> 00:29:18,560
אז אנחנו הולכים לעשות משהו
כמו, is-- גבול ואנחנו

699
00:29:18,560 --> 00:29:20,971
הולך להסביר את כל זה בשנייה.

700
00:29:20,971 --> 00:29:21,470
לnow--

701
00:29:21,470 --> 00:29:24,592
>> אליסון BUCHHOLTZ-AU: למודל התיבה.

702
00:29:24,592 --> 00:29:27,300
תומס Reimers: אבל לעת עתה, אנחנו
רק הולך לתת לו גבול.

703
00:29:27,300 --> 00:29:29,580
אז מה שזה אומר הוא שאתה
הולך לראות את הקישורים הללו.

704
00:29:29,580 --> 00:29:32,788
ואתה הולך לראות שיש להם
, כמו, הגבולות השחורים המכוערים הללו, ש

705
00:29:32,788 --> 00:29:33,820
זה מגניב.

706
00:29:33,820 --> 00:29:34,500
>> אליסון BUCHHOLTZ-AU:
אתר האינטרנט שלנו כל כך יפה.

707
00:29:34,500 --> 00:29:35,333
>> תומס Reimers: כן.

708
00:29:35,333 --> 00:29:38,930
האתר שלנו הוא מדהים.

709
00:29:38,930 --> 00:29:41,585
אז שני אלה הם קישורים, והם מופיעים.

710
00:29:41,585 --> 00:29:44,160
עכשיו בואו נעמיד פנים שאני
רק רציתי לעשות את זה

711
00:29:44,160 --> 00:29:50,072
אם זה לא היה בתוך משהו
שהיה רקע של סלמון.

712
00:29:50,072 --> 00:29:52,280
אז לזכור שזה אחד
יש רקע של סלמון,

713
00:29:52,280 --> 00:29:54,000
כי זה של מעמד יפה.

714
00:29:54,000 --> 00:29:59,777
>> אבל אנחנו רוצים לומר שמתקררים רק
שנמצאים במעמד מיוחד, לא בכיתה

715
00:29:59,777 --> 00:30:02,890
די, צריך גבול ש.

716
00:30:02,890 --> 00:30:12,549
ובכן, מה שאתה יכול לעשות הוא
ניתן לומר, .special, חלל, .cool.

717
00:30:12,549 --> 00:30:15,590
ומה שעושה, כשאתה חושב
על זה, הוא שזה בעצם אומר,

718
00:30:15,590 --> 00:30:19,530
OK, למצוא לי הכל
התואם מיוחד.

719
00:30:19,530 --> 00:30:24,104
ואז בתוך תגים אלה, מוצאים
הכל שזה מגניב.

720
00:30:24,104 --> 00:30:27,270
אליסון BUCHHOLTZ-AU: אז עוד דרך
שעשוי להיות טוב לחשוב על זה,

721
00:30:27,270 --> 00:30:29,810
מחזיר אותו ל- C, הוא
בדיוק כמו הרעיון של היקף.

722
00:30:29,810 --> 00:30:34,020
לכן, כאשר יש לך כמה
בורר, כמו אלה ש

723
00:30:34,020 --> 00:30:38,460
כי אנחנו כבר עובדים על זה לפני,
הדף שלך כל האינטרנט, כל HTML שלך

724
00:30:38,460 --> 00:30:40,180
הוא בתוך הטווח שלך, נכון?

725
00:30:40,180 --> 00:30:43,090
אבל כאשר יש לנו אלה
יחסי הורים וילדים,

726
00:30:43,090 --> 00:30:47,130
זה כאילו שאתה צמצום למטה בי
אתם מחפשים מקום ספציפי,

727
00:30:47,130 --> 00:30:50,540
כאילו, כמו, אנחנו מחפשים בתוך
תפקיד ספציפי במקום

728
00:30:50,540 --> 00:30:52,007
של כל הקובץ שלנו.

729
00:30:52,007 --> 00:30:55,090
קהל: אז עם זה בחשבון, היית
זה היה משנה אם היו לנו changed--

730
00:30:55,090 --> 00:30:56,423
אליסון BUCHHOLTZ-AU: הסדר?

731
00:30:56,423 --> 00:30:59,320
קהל: --the כיתה בCSS
ל.cool, חלל, .special?

732
00:30:59,320 --> 00:31:01,153
אליסון BUCHHOLTZ-AU:
כן, כי אז ש

733
00:31:01,153 --> 00:31:04,420
הייתי אומר, היקף אליו
כל מה שיש מגניב,

734
00:31:04,420 --> 00:31:07,235
ולאחר מכן להסתכל על מה has--
אני מתכוון, כמו, במקרה זה,

735
00:31:07,235 --> 00:31:08,860
אני לא חושב שזה היה משנה את זה.

736
00:31:08,860 --> 00:31:10,318
>> תומס Reimers: אם היינו אומר מה?

737
00:31:10,318 --> 00:31:10,906
מצטער.

738
00:31:10,906 --> 00:31:12,660
>> אליסון BUCHHOLTZ-AU: אם אנחנו
היקפו להתקרר ולאחר מכן

739
00:31:12,660 --> 00:31:14,550
לחפש דברים מתוך מיוחד,
זה יהיה אותו הדבר, בעצם.

740
00:31:14,550 --> 00:31:16,260
>> תומס Reimers: אז זה לא יהיה.

741
00:31:16,260 --> 00:31:16,590
>> אליסון BUCHHOLTZ-AU: זה לא היית?

742
00:31:16,590 --> 00:31:17,590
אה, נו, טוב.

743
00:31:17,590 --> 00:31:18,090
אני טועה.

744
00:31:18,090 --> 00:31:21,480
>> תומס Reimers: כך הסיבה
זה different-- mistake-- הנפוץ

745
00:31:21,480 --> 00:31:27,140
הוא שעכשיו רק
הקישור יש מגניב, נכון?

746
00:31:27,140 --> 00:31:32,176
אני מניח שהשאלה שלי אליכם היא,
מה בדף זה מותאם על ידי .cool?

747
00:31:32,176 --> 00:31:35,984

748
00:31:35,984 --> 00:31:38,340
ישנם שני תגים כאן, נכון?

749
00:31:38,340 --> 00:31:39,770
וזה את זה ואת זה.

750
00:31:39,770 --> 00:31:40,590
שתיהן להתאים מגניבים.

751
00:31:40,590 --> 00:31:42,200
שום דבר אחר לא עושה.

752
00:31:42,200 --> 00:31:46,460
אז אם אתה אמר, .cool, חלל,
.special, מה שאתה הולך להגיד הוא,

753
00:31:46,460 --> 00:31:48,824
בתוך תגים אלה, מה הוא מיוחד?

754
00:31:48,824 --> 00:31:49,865
אליסון BUCHHOLTZ-AU: Hm.

755
00:31:49,865 --> 00:31:51,800
זה מה שit-- תקין.

756
00:31:51,800 --> 00:31:52,310
כי זה סתם משהו כאן.

757
00:31:52,310 --> 00:31:53,310
>> תומס Reimers: אז הוא בוחר שום דבר.

758
00:31:53,310 --> 00:31:56,530
>> אליסון BUCHHOLTZ-AU: בעוד ב
מיוחד, אנחנו בתוך התגים אלה כאן.

759
00:31:56,530 --> 00:31:57,971
>> תומס Reimers: אלה ואלה.

760
00:31:57,971 --> 00:31:58,512
קהל: OK.

761
00:31:58,512 --> 00:31:58,920
אז אלה תגים מהקו נטויים?

762
00:31:58,920 --> 00:31:59,740
>> תומס Reimers: כן.

763
00:31:59,740 --> 00:32:01,150
האם זה הגיוני?

764
00:32:01,150 --> 00:32:03,685
איך זה בעצם
מנסה לצמצם היקף.

765
00:32:03,685 --> 00:32:04,810
אליסון BUCHHOLTZ-AU: כן.

766
00:32:04,810 --> 00:32:06,870
אני חושב שזה כנראה
הדרך הקלה ביותר לחשוב על זה.

767
00:32:06,870 --> 00:32:09,270
>> תומס Reimers: אז מצאנו את זה, ו
מצאנו זה תאם מיוחד שניהם.

768
00:32:09,270 --> 00:32:11,400
ואז אנחנו מבקשים, בתוך
החבר'ה האלה, מה זה מגניב?

769
00:32:11,400 --> 00:32:12,941
ובתוך זה, מגניב של זה.

770
00:32:12,941 --> 00:32:14,500
בתוך זה, שום דבר מגניב.

771
00:32:14,500 --> 00:32:16,250
אז זה התג היחיד שנותר.

772
00:32:16,250 --> 00:32:20,112
>> אליסון BUCHHOLTZ-AU: בעוד מגניב
רק בתוך תגים אלה יש.

773
00:32:20,112 --> 00:32:21,070
תומס Reimers: בדיוק.

774
00:32:21,070 --> 00:32:22,403
ומה מיוחד באלה?

775
00:32:22,403 --> 00:32:22,930
שום דבר.

776
00:32:22,930 --> 00:32:25,270
עכשיו, מה שאני אומר הוא
אם לא היה מרחב,

777
00:32:25,270 --> 00:32:29,880
אתה שואל מה זה מגניב וspecial--
או מה יפה ומיוחד, נכון?

778
00:32:29,880 --> 00:32:35,370
אם אתה אומר .special.pretty, זה
אותו הדבר כמו .pretty.special.

779
00:32:35,370 --> 00:32:39,220
>> כי מה היא הסרת החלל
שואל הוא, כשאתה אומר .special,

780
00:32:39,220 --> 00:32:40,970
אתה שואל, אישור,
אילו הם מיוחדים?

781
00:32:40,970 --> 00:32:43,780
ולאחר מכן של אלה, ש
אלה הם גם די,

782
00:32:43,780 --> 00:32:47,010
המהווה את אותו הדבר, מבחינה דקדוקית,
כמבוקש, מה שדי,

783
00:32:47,010 --> 00:32:49,500
ולאחר מכן של אלה, מה גם מיוחדים?

784
00:32:49,500 --> 00:32:50,000
נכון?

785
00:32:50,000 --> 00:32:53,099
זה ההבדל של
מה בתוך מה הוא.

786
00:32:53,099 --> 00:32:53,640
קהל: OK.

787
00:32:53,640 --> 00:32:54,473
תומס Reimers: כן.

788
00:32:54,473 --> 00:32:56,670

789
00:32:56,670 --> 00:32:58,030
מדהים.

790
00:32:58,030 --> 00:33:00,426
אז עם זה בחשבון then--

791
00:33:00,426 --> 00:33:01,800
>> אליסון BUCHHOLTZ-AU: אני חושב שאחרון שלנו
עניין הוא (בדמיון BRITISH ACCENT)

792
00:33:01,800 --> 00:33:02,510
מודל התיבה.

793
00:33:02,510 --> 00:33:05,992
>> תומס Reimers: [מגחך] box--
אני אוהב את הדרך אליסון אומר ש.

794
00:33:05,992 --> 00:33:06,950
אז דבר מודל התיבה.

795
00:33:06,950 --> 00:33:09,644
>> אליסון BUCHHOLTZ-AU: רק יש לי
תיבה, אני אהיה מודל התיבה שלך.

796
00:33:09,644 --> 00:33:11,310
תומס Reimers: אז בואו נדבר על זה.

797
00:33:11,310 --> 00:33:14,070
אז עכשיו אנחנו כבר בילינו הרבה
זמן מדבר על בוררים.

798
00:33:14,070 --> 00:33:16,944
עד עכשיו, אתם כנראה, כמו,
מאסטרים של selectors-- אתה יודע,

799
00:33:16,944 --> 00:33:21,510
כיצד לבחור את התוכן בדיוק את זה
אתה רוצה לתפעל על המסך.

800
00:33:21,510 --> 00:33:24,740
>> אז עכשיו השאלה היא, איך
בדיוק אתה יכול לתפעל אותו?

801
00:33:24,740 --> 00:33:27,010
אז אני מניח הבסיסי ביותר
דרך לחשוב על זה

802
00:33:27,010 --> 00:33:30,294
הוא, ובכן, מה בדיוק
הוא אלמנט בCSS?

803
00:33:30,294 --> 00:33:32,585
בילינו הרבה זמן
מדבר, מה הוא תג,

804
00:33:32,585 --> 00:33:36,140
או מה הוא הבסיסי ביותר
ייצוג של תג?

805
00:33:36,140 --> 00:33:39,870

806
00:33:39,870 --> 00:33:45,170
>> דרך טובה לחשוב על
כלומר, מה הוא צורת סלמון?

807
00:33:45,170 --> 00:33:47,295
איזו צורה הוא, כמו,
סלמון בצבע רקע?

808
00:33:47,295 --> 00:33:47,880
>> קהל: זה מלבן.

809
00:33:47,880 --> 00:33:49,040
>> תומס Reimers: זה מלבן, נכון?

810
00:33:49,040 --> 00:33:50,956
>> אליסון BUCHHOLTZ-AU:
לא היה שאלה מכשילה.

811
00:33:50,956 --> 00:33:51,870
[שחוק]

812
00:33:51,870 --> 00:33:54,670
>> תומס Reimers: לא מנסה
ולגרום לך חבר 'זה מאוחר.

813
00:33:54,670 --> 00:33:57,510
אז יש לנו מלבן זה.

814
00:33:57,510 --> 00:33:59,140
והתג הוא p, נכון?

815
00:33:59,140 --> 00:34:02,280
אז זה נותן לנו טוב
אמונה שהסעיף

816
00:34:02,280 --> 00:34:07,440
מיוצג כמלבן, ב
לפחות במוחו של הדפדפן, ש

817
00:34:07,440 --> 00:34:08,715
זה.

818
00:34:08,715 --> 00:34:11,423
>> אליסון BUCHHOLTZ-AU: אני מתכוון,
דפדפנים הם בדרך כלל מלבניים,

819
00:34:11,423 --> 00:34:13,440
כך שזה הגיוני.

820
00:34:13,440 --> 00:34:18,750
>> תומס Reimers: הרעיון כאן הוא
שכל התגים בתוך CSS

821
00:34:18,750 --> 00:34:21,790
מיוצגים כמלבן.

822
00:34:21,790 --> 00:34:25,699
ויש לו כל מלבן ארבעה
חלקים לפי CSS, בסדר?

823
00:34:25,699 --> 00:34:27,830
יש לך את התוכן הממשי.

824
00:34:27,830 --> 00:34:29,644
זה שבו הטקסט נמצא.

825
00:34:29,644 --> 00:34:30,470
>> אליסון BUCHHOLTZ-AU:
אולי התמונה שלך.

826
00:34:30,470 --> 00:34:31,303
>> תומס Reimers: כן.

827
00:34:31,303 --> 00:34:33,860
יש לך ריפוד, שהוא
רק סוג מסוים של שטח לבן.

828
00:34:33,860 --> 00:34:35,085
אז יש לך גבול.

829
00:34:35,085 --> 00:34:37,710
ואז יש לך מרווח, ש
הוא החלל לבן מחוץ לזה.

830
00:34:37,710 --> 00:34:39,460
אז זה לא הגיוני
לאף אחד, אז אנחנו

831
00:34:39,460 --> 00:34:42,500
הולך לדבר על זה לרגע.

832
00:34:42,500 --> 00:34:47,570
אז כאן, מה אנחנו הולכים לעשות
הוא שאנחנו הולכים ליצור כמה divs, בסדר?

833
00:34:47,570 --> 00:34:48,420
תסלח לי בזמן שאני-

834
00:34:48,420 --> 00:34:51,506
>> אליסון BUCHHOLTZ-AU: אני מרגיש כמו
אנחנו צריכים לשים תמונה חמודה ב.

835
00:34:51,506 --> 00:34:52,520
>> תומס Reimers: אנחנו בהחלט צריכים.

836
00:34:52,520 --> 00:34:53,389
>> אליסון BUCHHOLTZ-AU:
אני מרגיש כמו כולם

837
00:34:53,389 --> 00:34:54,870
יכול להפיק תועלת מ
תמונה חמודה, היא כל.

838
00:34:54,870 --> 00:34:56,774
>> תומס Reimers: האם אנחנו יכולים
כל התועלת מa--

839
00:34:56,774 --> 00:34:57,648
>> קהל: כן, בטח.

840
00:34:57,648 --> 00:34:58,790
תומס Reimers: OK, מגניב.

841
00:34:58,790 --> 00:35:02,254
אז אנחנו צריכים לשים חמודים
תמונה במקום כלשהו.

842
00:35:02,254 --> 00:35:05,295
אליסון BUCHHOLTZ-AU: אני מרגיש כמו
ארנב חמוד עשוי להיות שימושי עכשיו.

843
00:35:05,295 --> 00:35:06,190
תומס Reimers: בטח.

844
00:35:06,190 --> 00:35:06,950
אליסון BUCHHOLTZ-AU: סוף השבוע.

845
00:35:06,950 --> 00:35:07,390
יש משהו adorab--

846
00:35:07,390 --> 00:35:08,520
>> תומס Reimers: איך התקף חתלתול?

847
00:35:08,520 --> 00:35:09,220
>> אליסון BUCHHOLTZ-AU:
חתלתול עובד, מדי.

848
00:35:09,220 --> 00:35:11,300
>> תומס Reimers: מגניב, כי
יש אתר בשביל זה.

849
00:35:11,300 --> 00:35:12,300
זה נקרא PlaceKitten.

850
00:35:12,300 --> 00:35:14,719
אליסון BUCHHOLTZ-AU: זה נהדר.

851
00:35:14,719 --> 00:35:15,510
תומס Reimers: כן.

852
00:35:15,510 --> 00:35:18,040
אליסון BUCHHOLTZ-AU: רק ל, כמו,
תמונות מציין מיקום באתר האינטרנט שלך.

853
00:35:18,040 --> 00:35:18,914
תומס Reimers: ממ-הממ.

854
00:35:18,914 --> 00:35:21,520
יש גם PlacePuppy.

855
00:35:21,520 --> 00:35:22,832
ויש PlaceBacon.

856
00:35:22,832 --> 00:35:24,340
>> אליסון BUCHHOLTZ-AU: PlaceBacon?

857
00:35:24,340 --> 00:35:25,350
באמת?

858
00:35:25,350 --> 00:35:28,190
>> תומס Reimers: אה, אנחנו לא
יש גישה לאינטרנט כאן.

859
00:35:28,190 --> 00:35:29,875
>> אליסון BUCHHOLTZ-AU: [גניחות]

860
00:35:29,875 --> 00:35:30,375
טרגי.

861
00:35:30,375 --> 00:35:32,333
תומס Reimers: אחרת,
הייתי מראה לכם

862
00:35:32,333 --> 00:35:33,870
איך לשים את התמונות באתר האינטרנט שלך.

863
00:35:33,870 --> 00:35:36,370
אנחנו הולכים לנסות לקבל את זה
עובד לפני שאנחנו צריכים ללכת.

864
00:35:36,370 --> 00:35:38,660
אבל לעת עתה, אנחנו רק
הולך לדבר בצבעים אז.

865
00:35:38,660 --> 00:35:39,820
אנחנו רוצים לשים תמונות של kittens--

866
00:35:39,820 --> 00:35:40,210
>> אליסון BUCHHOLTZ-AU: עשינו.

867
00:35:40,210 --> 00:35:43,110
>> תומס Reimers: --the של אינטרנט
למטה לרגע להיות.

868
00:35:43,110 --> 00:35:47,820
אז יש לנו שני divs, ואנחנו
הולך לתת להם שני מזהי.

869
00:35:47,820 --> 00:35:51,380

870
00:35:51,380 --> 00:35:56,760
אנחנו הולכים לקרוא לזה
"ראשון" ו- "שני."

871
00:35:56,760 --> 00:36:01,184
אז id = "ראשון".

872
00:36:01,184 --> 00:36:02,850
ואנחנו הולכים לתת להם שני צבעים.

873
00:36:02,850 --> 00:36:08,424
אז איך אנחנו בוחרים משהו
עם id של "ראשון"?

874
00:36:08,424 --> 00:36:09,840
אליסון BUCHHOLTZ-AU: Dot או חשיש?

875
00:36:09,840 --> 00:36:10,730
קהל: שארפ.

876
00:36:10,730 --> 00:36:12,940
תומס Reimers: שארפ, מושלם.

877
00:36:12,940 --> 00:36:14,950
חשיש, מה we-- החד,

878
00:36:14,950 --> 00:36:15,680
>> אליסון BUCHHOLTZ-AU:
הרבה דברים לקרוא לזה.

879
00:36:15,680 --> 00:36:16,430
>> תומס Reimers: OK.

880
00:36:16,430 --> 00:36:19,800
אנחנו הולכים להתיישב על hashtag, ו
זה מה שאנחנו הולכים ללכת עם.

881
00:36:19,800 --> 00:36:20,300
בסדר?

882
00:36:20,300 --> 00:36:20,735
>> אליסון BUCHHOLTZ-AU: סולמית.

883
00:36:20,735 --> 00:36:22,340
>> תומס Reimers: אז hashtag של ראשון.

884
00:36:22,340 --> 00:36:24,506
>> אליסון BUCHHOLTZ-AU: אז
אתה יכול ציוץ seminar--

885
00:36:24,506 --> 00:36:27,582
CSS hashtag, hashtag מגניב.

886
00:36:27,582 --> 00:36:29,040
תומס Reimers: הסולמית Awesomeness.

887
00:36:29,040 --> 00:36:30,730
אליסון BUCHHOLTZ-AU:
Hashtag Awesomeness, כן.

888
00:36:30,730 --> 00:36:31,480
תומס Reimers: OK.

889
00:36:31,480 --> 00:36:33,660
אז יש לנו "ראשון" ו- "שני."

890
00:36:33,660 --> 00:36:37,697
אז קודם כל, אנחנו הולכים לי
צבע רקע של אדום.

891
00:36:37,697 --> 00:36:39,030
אליסון BUCHHOLTZ-AU: אה, מעי גס.

892
00:36:39,030 --> 00:36:40,281
תומס Reimers: כן.

893
00:36:40,281 --> 00:36:42,281
אליסון BUCHHOLTZ-AU:
אני אהיה המקום בודק.

894
00:36:42,281 --> 00:36:43,960
תומס Reimers: Allison של לי.

895
00:36:43,960 --> 00:36:45,830
צבע רקע של blue--

896
00:36:45,830 --> 00:36:46,810
>> תומס Reimers: סגול!

897
00:36:46,810 --> 00:36:47,726
>> תומס Reimers: סגול.

898
00:36:47,726 --> 00:36:48,830
אליסון BUCHHOLTZ-AU: כן.

899
00:36:48,830 --> 00:36:50,630
הצבע האהוב עליי של סגול,
ואנחנו לא השתמשנו בו עדיין.

900
00:36:50,630 --> 00:36:51,546
>> תומס Reimers: ויולט.

901
00:36:51,546 --> 00:36:53,361
אליסון BUCHHOLTZ-AU: ויולט.

902
00:36:53,361 --> 00:36:53,860
זה עובד.

903
00:36:53,860 --> 00:36:56,482

904
00:36:56,482 --> 00:36:59,880
>> תומס Reimers: אז אנחנו
אצטרך שני divs.

905
00:36:59,880 --> 00:37:01,654
הם הולכים להיות ריקים לחלוטין.

906
00:37:01,654 --> 00:37:03,070
כנראה צריכה להיות לנו חלק מטקסט.

907
00:37:03,070 --> 00:37:05,580

908
00:37:05,580 --> 00:37:09,815
אז "ראשון" הולך להיות "HELLO".

909
00:37:09,815 --> 00:37:10,940
ו" שני "יהיה say--

910
00:37:10,940 --> 00:37:11,110
>> אליסון BUCHHOLTZ-AU: להתראות.

911
00:37:11,110 --> 00:37:12,514
>> קהל: - "עולם".

912
00:37:12,514 --> 00:37:14,122
שלום, שלום.

913
00:37:14,122 --> 00:37:16,580
אליסון BUCHHOLTZ-AU: ראיתי
שלהם בקונצרט השבוע האחר.

914
00:37:16,580 --> 00:37:17,705
תומס Reimers: הביטלס?

915
00:37:17,705 --> 00:37:20,242
אליסון BUCHHOLTZ-AU: לריאל.

916
00:37:20,242 --> 00:37:21,200
הם לא כל כך גדולים.

917
00:37:21,200 --> 00:37:24,084

918
00:37:24,084 --> 00:37:24,750
אני לא אוהב את זה.

919
00:37:24,750 --> 00:37:26,060
>> תומס Reimers: יש לנו
"HELLO" ו- "שלום."

920
00:37:26,060 --> 00:37:29,102
ושוב, CSS הוא פשוט מדהים,
משום שהוא מכיר בצבעים שלנו.

921
00:37:29,102 --> 00:37:30,810
לא צריך אפילו
תדאג שהם קיימים.

922
00:37:30,810 --> 00:37:33,194
הם עושים.

923
00:37:33,194 --> 00:37:35,130
>> אליסון BUCHHOLTZ-AU: הם קיימים.

924
00:37:35,130 --> 00:37:39,560
>> תומס Reimers: אז CSS אני חושב שיש לי
255 מילות לדבר על צבע.

925
00:37:39,560 --> 00:37:42,986
אם אתה יכול לחשוב על צבע מחוץ
255 אלה, כמו, אני אתרשם.

926
00:37:42,986 --> 00:37:44,110
אליסון BUCHHOLTZ-AU: כן.

927
00:37:44,110 --> 00:37:45,560
אני חושב שיש לך חבר '
פשוט לבוא מייד אחרי.

928
00:37:45,560 --> 00:37:47,727
>> תומס Reimers: אז הנה,
תראה יש לנו שתי קופסות

929
00:37:47,727 --> 00:37:49,143
ממש על גבי זה, נכון?

930
00:37:49,143 --> 00:37:50,200
שלום ולהתראות.

931
00:37:50,200 --> 00:37:51,460
>> אליסון BUCHHOLTZ-AU:
אין חלל שביניהם.

932
00:37:51,460 --> 00:37:53,390
הם פשוט ששודכו
ממש על גב אחד את השני.

933
00:37:53,390 --> 00:37:55,973
>> תומס Reimers: אז הדבר הראשון ש
אני מניח שאנחנו צריכים לדבר על

934
00:37:55,973 --> 00:38:02,960
הוא בואו גם say-- כן.

935
00:38:02,960 --> 00:38:08,020
אז CSS מייצג אותם כסוג של תיבות.

936
00:38:08,020 --> 00:38:10,100
וכמו קופסות, יש להם תוכן.

937
00:38:10,100 --> 00:38:14,540
והתוכן כרגע הוא סוג של
השלום או השלום וזהו.

938
00:38:14,540 --> 00:38:15,040
בסדר?

939
00:38:15,040 --> 00:38:19,790
>> אז אחד הדברים הראשונים שאתה
יכול לעשות הוא שאתה יכול להוסיף ריפוד.

940
00:38:19,790 --> 00:38:25,610
ריפוד אומר כמה מקום
זה צריך להשאיר בכל צד.

941
00:38:25,610 --> 00:38:29,200
אז בואו נגיד שאני רוצה לומר
10 פיקסלים בכל צד.

942
00:38:29,200 --> 00:38:31,234
ואני לנתח כי בשני.

943
00:38:31,234 --> 00:38:33,150
אליסון BUCHHOLTZ-AU:
את כל הדברים האלה כאן

944
00:38:33,150 --> 00:38:36,980
הולכים להיות בעיקר בפיקסלים
לשאר הסמינר.

945
00:38:36,980 --> 00:38:40,980
אתה הולך לראות שיש לו
קצת מרחב סביבו, נכון?

946
00:38:40,980 --> 00:38:46,360
אז מה שאתה לא רואה כאן הוא שיש
סוג זה של ריפוד בלתי נראה

947
00:38:46,360 --> 00:38:49,600
בכל צד, שאומר, כמו,
OK, יש לך התיבה של content-- שלך

948
00:38:49,600 --> 00:38:51,680
>> אליסון BUCHHOLTZ-AU: האם אתה רוצה
רק כדי למשוך את האלמנט לבדוק?

949
00:38:51,680 --> 00:38:53,659
>> תומס Reimers: כן, זה רעיון טוב.

950
00:38:53,659 --> 00:38:56,700
אליסון BUCHHOLTZ-AU: כמו כן, אני מוצא
שהאלמנט לבדוק היא דרך טובה

951
00:38:56,700 --> 00:39:01,280
להבין אם משהו לא הולך
לא נכון, משהו בלתי צפוי קורה,

952
00:39:01,280 --> 00:39:04,570
בדיקת התגים ולראות מה
זה כמו מוחלפים הוא מועיל.

953
00:39:04,570 --> 00:39:05,940
>> תומס Reimers: אז אני לא בטוח
אם אתם יכולים לראות את הצבע הזה.

954
00:39:05,940 --> 00:39:06,470
אתה יכול?

955
00:39:06,470 --> 00:39:10,120
תראה ריפוד זה
בסוג של קצה.

956
00:39:10,120 --> 00:39:13,410
ואז אתה רואה בפועל
תוכן בכחול, נכון?

957
00:39:13,410 --> 00:39:16,820
אז זה מאוד
יסודות של מודל התיבה.

958
00:39:16,820 --> 00:39:17,674
יש לך תוכן.

959
00:39:17,674 --> 00:39:18,590
אז יש לך ריפוד.

960
00:39:18,590 --> 00:39:20,440
>> קהל: למה אתה לא פשוט
השתמש בתיבה בתוך the--

961
00:39:20,440 --> 00:39:21,606
>> אליסון BUCHHOLTZ-AU: נכון.

962
00:39:21,606 --> 00:39:24,745
כי זה פשוט בחירה
האלמנט עכשיו.

963
00:39:24,745 --> 00:39:26,050
>> תומס Reimers: כן.

964
00:39:26,050 --> 00:39:27,060
דברים אחרים.

965
00:39:27,060 --> 00:39:29,780
אז בואו נדבר על זה
פקודת הריפוד לשנייה.

966
00:39:29,780 --> 00:39:36,380
אז בCSS, מדידות
צריך יחידה.

967
00:39:36,380 --> 00:39:39,740
אז קודם כל יש לך את הסכום.

968
00:39:39,740 --> 00:39:41,460
אז במקרה הזה, שאמרנו 10.

969
00:39:41,460 --> 00:39:44,780
ולאחר מכן הבא
שאמרנו הוא פיקסלים, px.

970
00:39:44,780 --> 00:39:49,160
אחרים אלה שיש לך הם
דברים כמו סנטימטרים, אינץ '.

971
00:39:49,160 --> 00:39:51,367
אתה יכול לעשות דברים כמו,
מה הוא 10 אינץ '?

972
00:39:51,367 --> 00:39:52,700
וזה הולך להיות מגוחך.

973
00:39:52,700 --> 00:39:52,990
>> אליסון BUCHHOLTZ-AU: הו, ילד.

974
00:39:52,990 --> 00:39:53,460
>> קהל: וואו.

975
00:39:53,460 --> 00:39:54,460
>> תומס ואליסון: כן.

976
00:39:54,460 --> 00:39:57,840
תומס Reimers: אז זה כל הריפוד.

977
00:39:57,840 --> 00:39:59,255
אני הולך לחזור לפיקסלים.

978
00:39:59,255 --> 00:40:01,754
>> אליסון BUCHHOLTZ-AU: פיקסלים
נוטה להיות, כמו, הסטנדרטי.

979
00:40:01,754 --> 00:40:04,589
כשאתה מסתכל על הרבה אתרים,
הם בעיקר עובדים בפיקסלים.

980
00:40:04,589 --> 00:40:07,755
תומס Reimers: אז אתה הולך לראות
גם pixels-- האחרים אלה שאתה רואה

981
00:40:07,755 --> 00:40:13,952
הוא אותם, שהוא אחד הוא
שווה לגובה הגופן

982
00:40:13,952 --> 00:40:15,160
שאתה משתמש כעת.

983
00:40:15,160 --> 00:40:16,201
>> אליסון BUCHHOLTZ-AU: מ"מ.

984
00:40:16,201 --> 00:40:17,574

985
00:40:17,574 --> 00:40:20,740
תומס Reimers: זוהי דרך טובה להגיד,
כמו, אני רוצה כמה שיותר מרחב כגופן שלי

986
00:40:20,740 --> 00:40:21,514
הוא לוקח.

987
00:40:21,514 --> 00:40:23,180
אליסון BUCHHOLTZ-AU: לא יודע את זה.

988
00:40:23,180 --> 00:40:25,747
אתה לומד משהו חדש כל יום.

989
00:40:25,747 --> 00:40:27,955
תומס Reimers: יש
הרבה מדידות בCS.

990
00:40:27,955 --> 00:40:29,260
אני מציע לך לחפש אותם.

991
00:40:29,260 --> 00:40:32,122
בכל המקרים שלך, אני חושב ש
פיקסלים צריכים להיות מספיק.

992
00:40:32,122 --> 00:40:33,830
והם גם מה ש
אתה הולך לראות

993
00:40:33,830 --> 00:40:36,520
ברוב המכריע של דוגמאות נעשים באינטרנט.

994
00:40:36,520 --> 00:40:38,320
כך תהיה לנו להשאיר אותו בפיקסלים.

995
00:40:38,320 --> 00:40:42,420
>> אתה יכול גם, אני צריך say-- כך
סטי ריפוד כל האטמים.

996
00:40:42,420 --> 00:40:49,789
גם אתה יכול לעשות משהו כזה
"Padding-top" רק set--

997
00:40:49,789 --> 00:40:52,080
אליסון BUCHHOLTZ-AU: אולי
אנחנו נגיע "HELLO" הגב שלנו.

998
00:40:52,080 --> 00:40:55,480
תומס Reimers: --to פשוט להגדיר את
ריפוד בחלק העליון ולא שום דבר אחר.

999
00:40:55,480 --> 00:40:59,560
אז ארבע פקודות הן ריפוד העליון,
padding-למטה, משמאל-ריפוד,

1000
00:40:59,560 --> 00:41:00,310
וpadding-תקין.

1001
00:41:00,310 --> 00:41:02,470
>> אליסון BUCHHOLTZ-AU: בדיוק כמו
היית מצפה לתיבה.

1002
00:41:02,470 --> 00:41:03,530
>> תומס Reimers: כן.

1003
00:41:03,530 --> 00:41:05,240
שום דבר לא מטורף מדי שם.

1004
00:41:05,240 --> 00:41:08,230
האם זה הגיוני?

1005
00:41:08,230 --> 00:41:11,990
אז זה ריפוד.

1006
00:41:11,990 --> 00:41:14,110
אני הולך להגדיר את כל
האטמים בחזרה ל -10.

1007
00:41:14,110 --> 00:41:17,010
ואז אני הולך לעבור לגבול.

1008
00:41:17,010 --> 00:41:21,130
>> אז מה גבול הוא הוא
גבול זה הפקודה מוזרה.

1009
00:41:21,130 --> 00:41:24,450
זה לוקח סוג של שלושה דברים בבת אחת.

1010
00:41:24,450 --> 00:41:28,930
אז הראשון הוא עד כמה גדול אתה
רוצה שזה יהיה כמו מדידה.

1011
00:41:28,930 --> 00:41:30,662
שוב, אני רק משתמש בפיקסלים.

1012
00:41:30,662 --> 00:41:32,620
והדבר האחרון שאני
יש להוסיף למדידות

1013
00:41:32,620 --> 00:41:35,270
זה הדבר אחד ש
לא צריך יחידה הוא 0.

1014
00:41:35,270 --> 00:41:37,390
זה לא נכון למעשה
לתת 0 יחידה,

1015
00:41:37,390 --> 00:41:41,940
כי 0 הוא 0 פני אינץ ',
פיקסלים, סנטימטרים, מה ש.

1016
00:41:41,940 --> 00:41:43,960
כל זה רק אומר 0, נכון?

1017
00:41:43,960 --> 00:41:46,710
אז קודם כל אתה נותן לו את המדידה.

1018
00:41:46,710 --> 00:41:48,650
>> אז אתה נותן לו את הסגנון.

1019
00:41:48,650 --> 00:41:49,869
אז אני הולך להגיד "מוצק".

1020
00:41:49,869 --> 00:41:51,410
ונדבר על מה שזה אומר.

1021
00:41:51,410 --> 00:41:54,290
ואז לבסוף, אתה נותן לו צבע.

1022
00:41:54,290 --> 00:41:56,850
אז אני הולך לומר "שחור".

1023
00:41:56,850 --> 00:41:59,637
וכל אלה הם הדברים שיש לנו
עכשיו ראה בעבר, פרט לסגנון,

1024
00:41:59,637 --> 00:42:00,720
אבל נדבר על זה.

1025
00:42:00,720 --> 00:42:04,120
אז אתם ראיתם מדידות,
ואתה ראית צבעים.

1026
00:42:04,120 --> 00:42:10,410
ומה שקורה הוא שאנחנו מקבלים זה
גבול שחור נחמד סביבו, נכון?

1027
00:42:10,410 --> 00:42:11,620
אתם רואים איך עשו את זה?

1028
00:42:11,620 --> 00:42:12,760
>> קהל: כן.

1029
00:42:12,760 --> 00:42:14,850
>> תומס Reimers: מגניב.

1030
00:42:14,850 --> 00:42:17,370
אז מה זה?

1031
00:42:17,370 --> 00:42:19,160
אז קודם כל, זה פיקסל אחד.

1032
00:42:19,160 --> 00:42:20,880
זה מובן מאליו מספיק, נכון?

1033
00:42:20,880 --> 00:42:23,254
כמו, זה פיקסל אחד עבה.

1034
00:42:23,254 --> 00:42:26,170
או שזה יהיה פיקסל אחד, אבל אני
גדלה, כך שזה קצת יותר

1035
00:42:26,170 --> 00:42:26,490
יותר מזה.

1036
00:42:26,490 --> 00:42:27,967
>> אליסון BUCHHOLTZ-AU: ויש לנו
הטלוויזיה ברזולוציה המגוחכת הזה.

1037
00:42:27,967 --> 00:42:29,460
>> תומס Reimers: כן.

1038
00:42:29,460 --> 00:42:33,640
אתה יכול לעשות את זה גדול יותר,
קטן יותר, מה ש.

1039
00:42:33,640 --> 00:42:35,630
אז הנה גבול שני-פיקסל.

1040
00:42:35,630 --> 00:42:38,810
אתה רואה שזה בעובי כפול.

1041
00:42:38,810 --> 00:42:40,172
הדבר הבא שיש לך הוא צבע.

1042
00:42:40,172 --> 00:42:41,130
זה לא מעניין.

1043
00:42:41,130 --> 00:42:42,710
אני לא הולך לדבר
על זה, באמת.

1044
00:42:42,710 --> 00:42:45,110
>> אליסון BUCHHOLTZ-AU: אבל הסגנון
יכול להיות רק קצת מעניין.

1045
00:42:45,110 --> 00:42:45,980
>> תומס Reimers: כן.

1046
00:42:45,980 --> 00:42:48,560
אז סגנון, יש מעט אלה
שאני רואה בשימוש נפוץ.

1047
00:42:48,560 --> 00:42:55,690
, הבא של של הראשון המוצק
מנוקד, ומקווקו האחרון של אחד.

1048
00:42:55,690 --> 00:42:59,290
וכאן מנוקד.

1049
00:42:59,290 --> 00:43:02,980
אתה רואה שהם
חבורה של נקודות, נכון?

1050
00:43:02,980 --> 00:43:09,030
דרך טובה לקבל גבול נחמד סוג של
הולכים, מקפים הם גם די פופולריים.

1051
00:43:09,030 --> 00:43:11,580

1052
00:43:11,580 --> 00:43:13,600
>> אליסון BUCHHOLTZ-AU:
ואז כמובן, אני

1053
00:43:13,600 --> 00:43:16,660
בטוח שיש הרבה אחרים
סגנונות שאתה יכול לקבל.

1054
00:43:16,660 --> 00:43:20,000
ויש לנו קבוצה של גדולה
קישורים בסוף בשבילכם

1055
00:43:20,000 --> 00:43:23,470
לעיין סוג של ו
מסתכל CSS מגניב יותר.

1056
00:43:23,470 --> 00:43:25,954
>> תומס Reimers: ואז
הדבר האחרון, אנחנו

1057
00:43:25,954 --> 00:43:27,870
הולך לדבר על
דגמי תיבה ממש מהר.

1058
00:43:27,870 --> 00:43:30,070
אה, ולאחר מכן גבול,
בדיוק כמו ריפוד,

1059
00:43:30,070 --> 00:43:33,270
יש לך גם דברים כמו
שמאל גבול, גבול ימני, גבול העליון,

1060
00:43:33,270 --> 00:43:37,590
גבול התחתון, אשר מאפשר לך
כדי להגיע אל גבול מסוים.

1061
00:43:37,590 --> 00:43:40,650
אז הנה רק הגבול עזב מוגדר.

1062
00:43:40,650 --> 00:43:43,060
האם זה הגיוני?

1063
00:43:43,060 --> 00:43:46,170
>> אליסון BUCHHOLTZ-AU: זה מגניב
דרך להדגיש דברים או להוסיף

1064
00:43:46,170 --> 00:43:47,545
קווים בין אלמנטים שונים.

1065
00:43:47,545 --> 00:43:48,670
תומס Reimers: בהחלט.

1066
00:43:48,670 --> 00:43:50,940
אז זה הגבול שלנו.

1067
00:43:50,940 --> 00:43:52,790
ורווחיותו האחרונה של אחד.

1068
00:43:52,790 --> 00:43:55,892
הריפוד כמו של השוליים
מלבד זה לא within--

1069
00:43:55,892 --> 00:43:57,975
אליסון BUCHHOLTZ-AU: זה
לא בסביבת האלמנט שלך

1070
00:43:57,975 --> 00:44:00,840
אבל בעצם מסביב לכל
תיבה שאנחנו כבר רואים.

1071
00:44:00,840 --> 00:44:02,770
>> תומס Reimers: כן.

1072
00:44:02,770 --> 00:44:04,090
אליסון אמר זה בצורה מושלמת.

1073
00:44:04,090 --> 00:44:07,550
זה לא, כמו, בתוכך
אלמנט, זה סביב כל התיבה.

1074
00:44:07,550 --> 00:44:10,900
זה אומר דברים כמו
רקע אינו חלים עליו.

1075
00:44:10,900 --> 00:44:13,550
וזה בעצם אומר,
כמו, אני לא רוצה שום דבר

1076
00:44:13,550 --> 00:44:15,230
בהרבה מקום הזה בשבילי.

1077
00:44:15,230 --> 00:44:17,470
אז כמו שיש לנו כאן
מרווח של 10 פיקסלים.

1078
00:44:17,470 --> 00:44:23,100
כך ששום דבר בתוך 10 פיקסלים
צריך להיות לידי.

1079
00:44:23,100 --> 00:44:26,210
זה סוג שלה
חלל אבל סוג של לא.

1080
00:44:26,210 --> 00:44:29,215
אז זה מאוד
יסודות של מודל התיבה.

1081
00:44:29,215 --> 00:44:30,090
האם זה הגיוני?

1082
00:44:30,090 --> 00:44:33,830

1083
00:44:33,830 --> 00:44:34,550
מגניב, מגניב.

1084
00:44:34,550 --> 00:44:35,800
אליסון BUCHHOLTZ-AU: מדהים.

1085
00:44:35,800 --> 00:44:37,890
אז עכשיו אני חושב שאנחנו פשוט
יש לנו משאבים מגניבים

1086
00:44:37,890 --> 00:44:41,220
שניקח אתכם
באמצעות מהר מאוד.

1087
00:44:41,220 --> 00:44:44,815
ואנחנו גם actually--,
יש לנו אינטרנט עדיין?

1088
00:44:44,815 --> 00:44:47,860
>> תומס Reimers: בוא
לראות אם אני יכול לפתוח up--

1089
00:44:47,860 --> 00:44:50,040
תנו לי רק לראות אם אני
יכול לקבל אינטרנט במהירות

1090
00:44:50,040 --> 00:44:53,317
בעוד אליסון מדבר על שום דבר
אליסון רוצה לדבר עליו.

1091
00:44:53,317 --> 00:44:55,150
אליסון BUCHHOLTZ-AU:
אז basically-- אני לא

1092
00:44:55,150 --> 00:44:57,930
יודע מה עוד אני יכול לומר בשלב זה.

1093
00:44:57,930 --> 00:45:01,340
אבל אלה הם חלק
משאבים ממש טובים.

1094
00:45:01,340 --> 00:45:04,629
אלה הם אלה ש
תומס ואני השתמשתי

1095
00:45:04,629 --> 00:45:06,420
ושאנחנו באמת
משמש להכנה לזה.

1096
00:45:06,420 --> 00:45:09,940
W3Schools הוא אחד שאתה
בחורים הייתם צריכים לראות לפני.

1097
00:45:09,940 --> 00:45:12,440
אנו ממליצים עליו ל
הרבה דברים עם CSS.

1098
00:45:12,440 --> 00:45:15,060
אני יודע שאני ממליץ עליו ל
הסעיף שלי כל הזמן.

1099
00:45:15,060 --> 00:45:21,050
>> אחד הדברים הגדולים הוא שזה
מאפשר לך סוג של בלגן עם CSS

1100
00:45:21,050 --> 00:45:23,830
ולראות את השינויים
באופן מיידי בזה,

1101
00:45:23,830 --> 00:45:25,920
כמו, כפול-חלון להציג שיש לו.

1102
00:45:25,920 --> 00:45:29,980
אז אתה לא צריך לדאוג
הקמת דף האינטרנט שלך,

1103
00:45:29,980 --> 00:45:33,090
או הקמת vhost בך
מכשיר מקומי ומארח מקומי,

1104
00:45:33,090 --> 00:45:34,980
ומקבל את כל שעבודת הדברים.

1105
00:45:34,980 --> 00:45:36,830
זה מוטבע תקין בתוך הדף.

1106
00:45:36,830 --> 00:45:39,042
>> ויש לו קטן האלה
שיעורים שאתה יכול

1107
00:45:39,042 --> 00:45:40,750
לעבור ללמוד
נוסף על בוררים,

1108
00:45:40,750 --> 00:45:44,610
או ללמוד על המניפולציה שלך
גופן, או רקע, או תמונה.

1109
00:45:44,610 --> 00:45:46,990
ויש לך אלה
תוצאות המיידיות שאתה

1110
00:45:46,990 --> 00:45:49,310
לא צריך לעשות שום
עבודת הכנה אחרת ל.

1111
00:45:49,310 --> 00:45:51,060
אז אני אוהב את W3Schools.

1112
00:45:51,060 --> 00:45:51,960
זה נהדר.

1113
00:45:51,960 --> 00:45:52,670
האם זה עובד?

1114
00:45:52,670 --> 00:45:52,950
>> תומס Reimers: כן.

1115
00:45:52,950 --> 00:45:53,720
לא, זה לא.

1116
00:45:53,720 --> 00:45:55,636
האם אתה רוצה שאני אנסה
והפעל מחדש את המחשב שלי?

1117
00:45:55,636 --> 00:45:56,410
או שאנו רוצים to--

1118
00:45:56,410 --> 00:46:01,490
>> אליסון BUCHHOLTZ-AU: אני מתכוון,
טוב, זה יהיה גם באינטרנט.

1119
00:46:01,490 --> 00:46:02,740
כל השקופיות תהיה מקוונות.

1120
00:46:02,740 --> 00:46:05,470
אז אני פשוט מאוד ממליץ לעשות אלה.

1121
00:46:05,470 --> 00:46:07,880
>> זה נהדר כפשוט
כמו גיליון לרמות.

1122
00:46:07,880 --> 00:46:10,690
זה פשוט כל היסוד
פקודות שיש לך.

1123
00:46:10,690 --> 00:46:13,070
זה נהדר כשאתה ראשון
בתחילת דרך אתר האינטרנט שלך.

1124
00:46:13,070 --> 00:46:15,080
כי אולי אתה לא
רוצה להיכנס לכל

1125
00:46:15,080 --> 00:46:17,355
עפרורי האמיתי גרגירי
עיצוב-כבד דברים.

1126
00:46:17,355 --> 00:46:20,230
אתה רק צריך לעצב אותו בצורה
כי סוג של הגיוני ורצון

1127
00:46:20,230 --> 00:46:21,490
לעשות לעת עתה.

1128
00:46:21,490 --> 00:46:23,580
ואם אתה באמת רוצה
להיכנס לזה, אני יודע

1129
00:46:23,580 --> 00:46:27,240
זה, כמו, אחד מ
אזכור האהוב של תומס.

1130
00:46:27,240 --> 00:46:30,130
אנחנו משתמשים בו כדי
הכנה, וזה נהדר.

1131
00:46:30,130 --> 00:46:33,030
זה מפתח מ- Mozilla.

1132
00:46:33,030 --> 00:46:36,490
>> תומס Reimers: אז Mozilla הם
האנשים שעושים Firefox.

1133
00:46:36,490 --> 00:46:40,290
וזה רק מפתח משלהם
התייחסות, שאני חושב שהוא מדהים.

1134
00:46:40,290 --> 00:46:44,870
ויש לה נפלא
רשימה של משאבים.

1135
00:46:44,870 --> 00:46:45,530
אז אנחנו have--

1136
00:46:45,530 --> 00:46:48,060
>> אליסון BUCHHOLTZ-AU:
ולאחר מכן הפתק האחרון הוא

1137
00:46:48,060 --> 00:46:50,120
כאשר אתה מנסה
עיצוב אתר האינטרנט שלך,

1138
00:46:50,120 --> 00:46:53,550
לשאוב השראה מדברים
כי אתה חושב שהם די.

1139
00:46:53,550 --> 00:46:56,340
בדיקת האלמנט,
בדיקת קוד המקור

1140
00:46:56,340 --> 00:46:59,370
יכול להיות סופר מועיל
למנסה להבין

1141
00:46:59,370 --> 00:47:02,080
כיצד לעצב את אתר האינטרנט שלך.

1142
00:47:02,080 --> 00:47:04,540
>> לעתים קרובות, אני מרגיש כאילו הטוב ביותר
אגב, מלבד ניסויים,

1143
00:47:04,540 --> 00:47:06,290
רק להסתכל על
דברים שהם יפים.

1144
00:47:06,290 --> 00:47:09,810
אני מוצא את זה ממש קשה רק
סוג של עיצוב דברים בעצמך,

1145
00:47:09,810 --> 00:47:11,090
במיוחד בהתחלה.

1146
00:47:11,090 --> 00:47:14,740
אז בבקשה להסתכל על אתרים
שאתה נהנה מסתכל.

1147
00:47:14,740 --> 00:47:16,880
להבין מה עושה
שלהם פונים אליכם.

1148
00:47:16,880 --> 00:47:19,170
ואז תרגיש חופשי
לנסות ולשכפל את זה.

1149
00:47:19,170 --> 00:47:20,410
>> תומס Reimers: נכון.

1150
00:47:20,410 --> 00:47:23,120
אפילו כמו אתרים
ככה, אתה יכול לראות

1151
00:47:23,120 --> 00:47:25,460
בהחלט יש div בחלק העליון.

1152
00:47:25,460 --> 00:47:29,920
ואז יש לך div אחר בתוך
כאן, שהוא Awesomeness CSS.

1153
00:47:29,920 --> 00:47:32,480
ואז יש לך חבורה של קישורים כאן.

1154
00:47:32,480 --> 00:47:34,770
אם אתה באמת רק לבדוק
אלמנטים, אתה יכול למיין של

1155
00:47:34,770 --> 00:47:38,520
תתחיל לראות מה לעשות אתרים
נראה כמו, ואיך אני יכול

1156
00:47:38,520 --> 00:47:40,493
לשחזר שאם אני רוצה.

1157
00:47:40,493 --> 00:47:41,890
האם זה הגיוני?

1158
00:47:41,890 --> 00:47:43,670
אז יש לנו רק שלוש דקות לסיום.

1159
00:47:43,670 --> 00:47:46,380
אז שאלות?

1160
00:47:46,380 --> 00:47:47,650
כל אחד מהם?

1161
00:47:47,650 --> 00:47:48,350
כן.

1162
00:47:48,350 --> 00:47:50,780
>> קהל: לצבע
מלבן, איך היית

1163
00:47:50,780 --> 00:47:53,499
have-- אם לא רוצה את זה
הולך על פני העמוד השלם, יכול

1164
00:47:53,499 --> 00:47:56,400
אתה עשית את זה לחצות רק
מחצית הדף או רק את הטקסט?

1165
00:47:56,400 --> 00:47:59,660
>> תומס Reimers: כן, בהחלט.

1166
00:47:59,660 --> 00:48:02,780
אז תן לי ממש לראות.

1167
00:48:02,780 --> 00:48:04,670
יש לי שני רעיונות.

1168
00:48:04,670 --> 00:48:07,265
אז קודם כל, אתה
ניתן גם להשתמש באחוזים.

1169
00:48:07,265 --> 00:48:08,140
>> קהל: באמת?

1170
00:48:08,140 --> 00:48:11,260
>> אליסון BUCHHOLTZ-AU: אז משהו
להסתכל למעלה הוא מיקום יחסי.

1171
00:48:11,260 --> 00:48:13,385
זה משהו שאנחנו
אין לי זמן להיכנס ל,

1172
00:48:13,385 --> 00:48:16,392
אבל זה משהו שאני בהחלט
ממליץ לכם לבדוק.

1173
00:48:16,392 --> 00:48:17,580
>> תומס Reimers: אחוזים אז.

1174
00:48:17,580 --> 00:48:21,524
ולראות איך עשינו את זה
רק 50% מהרוחב?

1175
00:48:21,524 --> 00:48:24,190
אליסון BUCHHOLTZ-AU: אם
באמת יודע את מספר הפיקסלים,

1176
00:48:24,190 --> 00:48:25,780
אתה יכול להיות מדויק יותר ככה.

1177
00:48:25,780 --> 00:48:27,200
אתה יכול להתעסק עם זה.

1178
00:48:27,200 --> 00:48:27,700
אבל 50%.

1179
00:48:27,700 --> 00:48:31,970
אם היינו לשנות את גודל הדפדפן שלנו,
זה יקטין אותה.

1180
00:48:31,970 --> 00:48:35,250
>> תומס Reimers: ובכן, זה
50% בעצם עכשיו, אני חושב.

1181
00:48:35,250 --> 00:48:38,820
זה 50%, ולאחר מכן את השוליים
כבר הוסיף לזה.

1182
00:48:38,820 --> 00:48:40,100
יש CSS הרבה מוזרויות.

1183
00:48:40,100 --> 00:48:43,195
אז עכשיו זה
50% מרוחב העמוד.

1184
00:48:43,195 --> 00:48:46,860
אבל זכור שיש לך 10
פיקסלים המריאו מכל צד.

1185
00:48:46,860 --> 00:48:49,700
אז אם היו לך להזיז את זה נגד
הקצה השמאלי של הדפדפן,

1186
00:48:49,700 --> 00:48:51,550
אז זה היה נראה כמו 50%.

1187
00:48:51,550 --> 00:48:53,884
שוב, כמו שאמרתי, יכול CSS
להיות הרבה ניחוש-ו- סימון.

1188
00:48:53,884 --> 00:48:56,049
כאילו, אתה חושב שמשהו לא
הולך להתנהג בדרך זו,

1189
00:48:56,049 --> 00:48:57,805
אבל הוא מתנהג בדרך שונה לחלוטין.

1190
00:48:57,805 --> 00:48:59,420
>> אליסון BUCHHOLTZ-AU:
ואתה פשוט מקבל יותר חכם,

1191
00:48:59,420 --> 00:49:02,020
ואתה פשוט מקבל יותר טוב
אינטואיציה לזה כמו שאתה להתקדם.

1192
00:49:02,020 --> 00:49:02,730
>> תומס Reimers: וזה
מקבל יותר ויותר גרוע.

1193
00:49:02,730 --> 00:49:03,496
אז זה באמת רק מירוץ.

1194
00:49:03,496 --> 00:49:05,454
>> אליסון BUCHHOLTZ-AU:
זה סופר מעודד.

1195
00:49:05,454 --> 00:49:07,070
אנחנו רוצים שהם אוהבים CSS.

1196
00:49:07,070 --> 00:49:08,810
>> תומס Reimers: CSS הוא מדהים.

1197
00:49:08,810 --> 00:49:10,354
זוכר את זה.

1198
00:49:10,354 --> 00:49:11,020
שאלות אחרות?

1199
00:49:11,020 --> 00:49:14,297
>> אליסון BUCHHOLTZ-AU: דבר אחד.

1200
00:49:14,297 --> 00:49:14,880
כל דבר אחר?

1201
00:49:14,880 --> 00:49:15,140
מגניב.

1202
00:49:15,140 --> 00:49:15,690
>> תומס Reimers: מדהים.

1203
00:49:15,690 --> 00:49:18,523
>> אליסון BUCHHOLTZ-AU: ובכן, אם אתה
יש בחורים כל שאלות בשלב מאוחר יותר,

1204
00:49:18,523 --> 00:49:20,919
אנחנו תמיד זמינים כרגיל.

1205
00:49:20,919 --> 00:49:22,960
אתה בטח רואה כמה
שלנו לפרויקטי גמר

1206
00:49:22,960 --> 00:49:24,280
ובהחלט בהאקאתון.

1207
00:49:24,280 --> 00:49:25,200
>> תומס Reimers: בהחלט.

1208
00:49:25,200 --> 00:49:25,720
וביריד.

1209
00:49:25,720 --> 00:49:26,560
>> אליסון BUCHHOLTZ-AU: וביריד.

1210
00:49:26,560 --> 00:49:26,840
אה.

1211
00:49:26,840 --> 00:49:28,130
>> תומס Reimers: מצפה ל
לראות את כל awesome-- שלך

1212
00:49:28,130 --> 00:49:29,420
>> אליסון BUCHHOLTZ-AU: נצטרך לראות
כל אתרים מדהים שלך

1213
00:49:29,420 --> 00:49:30,572
שיהיה יפה.

1214
00:49:30,572 --> 00:49:32,780
תומס Reimers: אתה תמיד יכול
לראות, כמו, אתרים

1215
00:49:32,780 --> 00:49:36,234
שהיה להם, כמו, CSS טוב ולאחר מכן
כמו מי שלא מנסה לעשות CSS.

1216
00:49:36,234 --> 00:49:39,150
אליסון BUCHHOLTZ-AU: כמו כן, אחר
דבר, דבר אחד יותר להסתכל לתוך

1217
00:49:39,150 --> 00:49:40,445
היא bioinformatics ב.

1218
00:49:40,445 --> 00:49:41,805
אז Bootstrap הוא גדול.

1219
00:49:41,805 --> 00:49:42,240
>> תומס Reimers: Google שאם you--

1220
00:49:42,240 --> 00:49:43,573
>> אליסון BUCHHOLTZ-AU: Google זה.

1221
00:49:43,573 --> 00:49:44,340
זה נהדר.

1222
00:49:44,340 --> 00:49:45,620
אתה תאהב את זה.

1223
00:49:45,620 --> 00:49:48,000
ועכשיו שיש לך
הבנה בסיסית של CSS,

1224
00:49:48,000 --> 00:49:50,340
זה יעשה הרבה יותר הגיוני.

1225
00:49:50,340 --> 00:49:50,890
מדהים.

1226
00:49:50,890 --> 00:49:51,480
תודה, חבר 'ה.

1227
00:49:51,480 --> 00:49:53,330
>> תומס Reimers: תודה רבה לך.

1228
00:49:53,330 --> 00:49:54,219