1
00:00:00,000 --> 00:00:05,660
>> [عزف الموسيقى]

2
00:00:05,660 --> 00:00:08,740
>> DOUG لويد: لذلك دعونا نلقي أكثر واحد
فيديو للحديث عن واحد أكثر لغة.

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
ولكن يمكنك أيضا تحديد أي
لون عرافة التي ترغب.

62
00:02:59,110 --> 00:03:05,190
أذكر أن الألوان يمكن تحديد
من قبل مجموعة من ثلاثة أرقام عرافة

63
00:03:05,190 --> 00:03:08,500
0-255، RG وب، و
الأحمر والأخضر والأزرق والمكون.

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
يمكنك استخدام الكلمات الرئيسية، مثل اضافية،
اضافية صغيرة، أو س س صغيرة، أو متوسطة،

77
00:03:46,320 --> 00:03:47,660
بوجه عام، وهلم جرا.

78
00:03:47,660 --> 00:03:50,750
يمكنك استخدام نقاط ثابتة، 10
نقطة، 12 نقطة، وهلم جرا.

79
00:03:50,750 --> 00:03:55,850
يمكنك استخدام النسب المئوية، 80٪، 20٪،
حيث 100٪ هو الخط الافتراضي

80
00:03:55,850 --> 00:03:59,220
الحجم، والتي عادة ما يذهب ل
يكون شيئا مثل 11 أو 12 نقطة.

81
00:03:59,220 --> 00:04:01,659
أو يمكنك حتى نبني تشغيله
حجم الخط الأخير.

82
00:04:01,659 --> 00:04:04,950
إذا كنت كتبت للتو شيئا وأنت تعرف
ما تريده هو ليكون أصغر،

83
00:04:04,950 --> 00:04:08,241
ولكن كنت لا تعرف ما هو حجم لكم بالضبط
تريد أن تكون، أيضا، يمكنك أن تقول فقط،

84
00:04:08,241 --> 00:04:09,330
حجم الخط أصغر.

85
00:04:09,330 --> 00:04:14,344
وسوف تستند الخروج من،
للتو أعلاه، فإنه من حجم الخط.

86
00:04:14,344 --> 00:04:15,760
ويمكنك الحصول على أصغر أو أكبر.

87
00:04:15,760 --> 00:04:18,390
لذلك هناك الكثير من مختلف
طرق لتحديد حجم الخط.

88
00:04:18,390 --> 00:04:20,690
>> يمكنك أيضا تحديد ما
عائلة الخط الذي تريده.

89
00:04:20,690 --> 00:04:23,360
إذا كان لديك خاصة
اسم، هناك طريقة في CSS--

90
00:04:23,360 --> 00:04:27,270
نحن لسنا بصدد الحديث عن ذلك
here-- لتحديد خط معين جدا

91
00:04:27,270 --> 00:04:28,980
وتضمين ذلك في صفحتك.

92
00:04:28,980 --> 00:04:30,620
يمكنك أيضا استخدام أسماء عامة.

93
00:04:30,620 --> 00:04:33,540
هناك الكثير من الخطوط الآمنة على شبكة الإنترنت
التي يتم المحددة مسبقا في CSS.

94
00:04:33,540 --> 00:04:36,352
وإذا كنت من مستخدمي مايكروسوفت
مكتب في السنوات ال 20 الماضية،

95
00:04:36,352 --> 00:04:38,810
وربما كنت على دراية
الكثير من هذه الخطوط الآمنة على شبكة الإنترنت

96
00:04:38,810 --> 00:04:44,640
بالفعل، تايمز الرومانية الجديدة، اريال،
ساعي الجديدة، جورجيا، تاهوما، فيردانا،

97
00:04:44,640 --> 00:04:45,470
وهلم جرا.

98
00:04:45,470 --> 00:04:47,170
تعتبر كل تلك الخطوط على شبكة الإنترنت آمنة.

99
00:04:47,170 --> 00:04:49,169
وفعلا، وهي جزء من
السبب أنها جاءت لتكون

100
00:04:49,169 --> 00:04:54,140
كان من المقرر أن تستخدم لجعل web-- كل صفحة
كان الوصول إلى هذا التقصير مجموعة من الخطوط

101
00:04:54,140 --> 00:04:58,480
مع مختلف الخطوط الرقيقة، وهذا كله
الاشياء الخط أننا لن ندخل،

102
00:04:58,480 --> 00:05:01,130
ولكن هذه عادة ما تكون
يمكن الوصول إليها في CSS الخاص بك،

103
00:05:01,130 --> 00:05:04,029
حتى لو كنت لا
تعريف وإلا فإن الخطوط.

104
00:05:04,029 --> 00:05:07,070
وأخيرا، يمكنك محاذاة النص الخاص بك،
بدلا من كونها، افتراضيا، الانحياز

105
00:05:07,070 --> 00:05:09,310
إلى اليسار، هل يمكن
محاذاة إلى اليمين،

106
00:05:09,310 --> 00:05:13,740
أو هل يمكن مواءمتها محورها، أو
برر ذلك بأنه ضرب كل من الهوامش.

107
00:05:13,740 --> 00:05:16,800
حتى تلك هي كل الخيارات التي يمكنك استخدامها
لتغيير ما يبدو النص مثل،

108
00:05:16,800 --> 00:05:20,120
وكيف يتم عرضه على الصفحة الخاصة بك.

109
00:05:20,120 --> 00:05:22,180
>> محددات الخاص بك لا
يجب أن تكون العلامات فقط.

110
00:05:22,180 --> 00:05:25,539
رأينا سابقا علامة الجسم
محدد، وعلامة محدد

111
00:05:25,539 --> 00:05:26,580
لا تبدو تماما مثل ذلك.

112
00:05:26,580 --> 00:05:30,020
سمها علامة، ثم
تحديد الأنماط لهذه العلامة.

113
00:05:30,020 --> 00:05:32,660
ولكن يمكنك أيضا القيام بشيء ما
يسمى محدد الهوية.

114
00:05:32,660 --> 00:05:34,390
ومحدد ID تبدو مشابهة جدا.

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
لكننا لم نتحدث عن ذلك،
هو ما يسمى علامة ID.

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
ID يساوي فريدة من نوعها، وهذا
الأنماط معين

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
وذلك بالإضافة إلى وجود
ID الصفات، يمكنك أيضا

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
الطريقة ربما أكثر شعبية من القيام
فمن لكتابة ملف منفصل المغلق،

143
00:07:08,240 --> 00:07:12,360
ومن ثم ربطه إلى حسابك
توثيق استخدام علامات الارتباط.

144
00:07:12,360 --> 00:07:14,690
به صلة، مرة أخرى، هي
مختلفة من الارتباطات التشعبية،

145
00:07:14,690 --> 00:07:16,760
إذا كنت تذكر من لدينا شريط فيديو وHTML.

146
00:07:16,760 --> 00:07:19,030
والعلامات صلة هي كيف يمكننا
سحب في ملفات منفصلة.

147
00:07:19,030 --> 00:07:23,900
انها نوع من مثل ما يعادل
وتتضمن # لبرمجة الويب.

148
00:07:23,900 --> 00:07:27,140
>> لذلك دعونا نلقي نظرة على table.HTML.

149
00:07:27,140 --> 00:07:29,380
إذا كنت تذكر من وجهة نظرنا
فيديو HTML، وأظهر لي

150
00:07:29,380 --> 00:07:32,000
مثال جدا
الضرب البسيط

151
00:07:32,000 --> 00:07:35,160
الجدول التي بدت جميلة
القبيح، وربما هناك

152
00:07:35,160 --> 00:07:38,650
طريقة لجعله أفضل مع
CSS، لجعلها تبدو في الواقع

153
00:07:38,650 --> 00:07:41,120
أشبه الضرب
الجدول، أو شيء

154
00:07:41,120 --> 00:07:43,730
التي ليست مجرد تمسك معا
مع عدم وجود تقسيم الفعلي

155
00:07:43,730 --> 00:07:45,532
بين الصفوف والأعمدة.

156
00:07:45,532 --> 00:07:47,490
لذلك دعونا رئيس لأكثر من
CS50 IDE، ونلقي نظرة

157
00:07:47,490 --> 00:07:50,780
في كيف يمكن CSS، نوعا ما، قرص
ما بدأنا معه من قبل،

158
00:07:50,780 --> 00:07:53,290
وجعله شيئا أفضل كثيرا.

159
00:07:53,290 --> 00:07:55,650
>> لذلك نحن في CS50 IDE
الآن، وإذا لم يعتادوا،

160
00:07:55,650 --> 00:07:58,710
سنقوم سحب ما يصل في هذه
جدول صفحة HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML الأساس
تعرف فقط محتويات

162
00:08:01,090 --> 00:08:05,044
من multiple-- كان من المفترض أن يكون
جدول الضرب من قبل أربعة أربعة.

163
00:08:05,044 --> 00:08:06,210
انها واضحة جدا.

164
00:08:06,210 --> 00:08:09,410
وكنا نعتقد أنه سيكون
تبدو منظمة تنظيما جيدا جدا.

165
00:08:09,410 --> 00:08:15,277
ولكن في الواقع، عندما كنا معاينة هذه الصفحة،
ونحن نرى أنه نوع من القبيح، أليس كذلك؟

166
00:08:15,277 --> 00:08:16,860
ومن الواضح لدينا الصفوف والأعمدة هنا.

167
00:08:16,860 --> 00:08:18,350
هناك نوعا من الانفصال.

168
00:08:18,350 --> 00:08:20,040
ولكنها ليست فصل حقيقي.

169
00:08:20,040 --> 00:08:23,105
نحن لا تحصل في الواقع
الكثير من المعلومات هنا.

170
00:08:23,105 --> 00:08:25,730
وليس هناك فصل بين
الصفوف والأعمدة من حيث

171
00:08:25,730 --> 00:08:28,460
قواعد أفقية أو عمودية.

172
00:08:28,460 --> 00:08:31,530
أننا ربما قد يجعل هذا
تبدو أفضل قليلا.

173
00:08:31,530 --> 00:08:32,934
لذلك دعونا نحاول.

174
00:08:32,934 --> 00:08:34,559
لذلك أنا ذاهب لإغلاق هذا التبويب هنا.

175
00:08:34,559 --> 00:08:37,434
وانا ذاهب لإغلاق بلدي table.HTML،
ولدي نسخة أخرى هنا

176
00:08:37,434 --> 00:08:39,490
دعا table2.HTML.

177
00:08:39,490 --> 00:08:40,655
سنقوم فتح أن ما يصل.

178
00:08:40,655 --> 00:08:42,530
الجسم من الصفحة هو
نفس الشيء تقريبا،

179
00:08:42,530 --> 00:08:44,238
ولكني تغيرت
قليلا في الأعلى.

180
00:08:44,238 --> 00:08:47,132
وسوف انتقل لأعلى هنا.

181
00:08:47,132 --> 00:08:49,340
لاحظ أن هذا الوقت، وأنا
باستخدام علامات أسلوب المضمنة.

182
00:08:49,340 --> 00:08:53,550
لقد فتحت علامة النمط، وأنا الآن
تعريف الأنماط CSS داخل فقط

183
00:08:53,550 --> 00:08:54,310
من ذلك.

184
00:08:54,310 --> 00:08:56,310
لدي الأنماط التي تقول الجدول.

185
00:08:56,310 --> 00:08:58,170
هذا هو بلدي العلامة محدد.

186
00:08:58,170 --> 00:09:01,340
أنا لا تستخدم نقطة أو التجزئة،
الذي سوف افعله لو

187
00:09:01,340 --> 00:09:03,710
كان استخدام ID أو محدد الصف.

188
00:09:03,710 --> 00:09:06,190
لدي جدول here-- العلامة محدد.

189
00:09:06,190 --> 00:09:10,090
هذا النمط هو الذهاب الى
تنطبق على كل علامة الجدول.

190
00:09:10,090 --> 00:09:14,950
يبدو أريد أن أضع واحدة
بكسل واسعة، الحدود الزرقاء الصلبة،

191
00:09:14,950 --> 00:09:15,779
داخل مائدتي.

192
00:09:15,779 --> 00:09:18,320
الذي يبدو وكأنه هو على الأرجح
يساعد في هذه الحالة، أليس كذلك؟

193
00:09:18,320 --> 00:09:20,320
ونحن في طريقنا ل
تبدو الأمور أفضل بكثير.

194
00:09:20,320 --> 00:09:21,190
لذلك هذا هو على ما يرام.

195
00:09:21,190 --> 00:09:23,540
أسلوبيا، لقد قمت فقط
جزءا لا يتجزأ من بلدي الأنماط هنا.

196
00:09:23,540 --> 00:09:25,100
انها بالتأكيد
طريقة مقبولة للقيام بذلك.

197
00:09:25,100 --> 00:09:26,391
دعونا نرى ما يبدو هذا مثل.

198
00:09:26,391 --> 00:09:29,790
ولذا فإنني سوف أعود إلى هنا، و
أنا سوف معاينة بلدي table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
حسنا، هذا ليس تماما ما أردت،
ولكنه هو بالضبط ما طلبنا.

201
00:09:36,470 --> 00:09:39,530
قلنا ان هذا الاسلوب هو
سنطبق على جدول أعمالنا.

202
00:09:39,530 --> 00:09:43,810
مائدتنا لديها الآن بكسل واحد
واسعة، والحدود الزرقاء الصلبة من حوله.

203
00:09:43,810 --> 00:09:46,237
نحن لا تحصل في الواقع
في خلايا الجدول.

204
00:09:46,237 --> 00:09:47,570
نحن فقط الحصول على الطاولة.

205
00:09:47,570 --> 00:09:49,310
لذلك عملت CSS.

206
00:09:49,310 --> 00:09:51,890
وقد طبقت عليه
الأنماط على جدول أعمالنا.

207
00:09:51,890 --> 00:09:53,981
ولكنها لم تفعل تماما
ما أردنا أن تفعله.

208
00:09:53,981 --> 00:09:55,730
كيف يمكننا الحصول على القيام
ما نريد أن نفعل؟

209
00:09:55,730 --> 00:09:59,287
>> حسنا، دعونا نلقي نظرة على واحد أكثر
نسخة من هذا في table3.HTML.

210
00:09:59,287 --> 00:10:00,870
لذلك أنا ذاهب لمجرد إغلاق علامات التبويب هذه.

211
00:10:00,870 --> 00:10:03,890
انا ذاهب الى العودة هنا إلى بلدي
ملف شجرة، وفتح table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
مرة أخرى، أريد لها أن تبدو جميلة
مماثلة هنا في البداية.

214
00:10:10,350 --> 00:10:14,460
لكن إشعار، وهذه المرة، بدلا من استخدام
ورقة أنماط جزءا لا يتجزأ من الحق في ذلك،

215
00:10:14,460 --> 00:10:18,870
انا ذاهب الى ربط في
الأنماط باستخدام علامة الارتباط.

216
00:10:18,870 --> 00:10:22,480
لذلك أنا على ما يبدو ربط في
الأنماط دعا tables.CSS،

217
00:10:22,480 --> 00:10:25,090
ويساوي هذا جيدا
الأنماط فقط means-- جيدا،

218
00:10:25,090 --> 00:10:28,645
ما هو هذا الملف بالنسبة إلى ما
أنا doing-- هو الأنماط التي أنا

219
00:10:28,645 --> 00:10:29,821
تستخدم لصفحتي.

220
00:10:29,821 --> 00:10:32,320
حتى لو كنت حقا تريد أن ترى ما
أفعله مع CSS هنا،

221
00:10:32,320 --> 00:10:35,010
لست بحاجة للذهاب مفتوحة ذلك
ملف table.CSS كذلك.

222
00:10:35,010 --> 00:10:37,490
ومن ثم سنذهب إلى أكثر من هنا
مرة أخرى لشجرة ملفنا.

223
00:10:37,490 --> 00:10:38,660
هناك table.CSS.

224
00:10:38,660 --> 00:10:40,490
سنقوم البوب ​​مفتوحة.

225
00:10:40,490 --> 00:10:43,070
ونحن الآن نشهد قليلا من 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
لذلك لكل صف، تذكر
هذا ما تفعله العلامة طن تبريد،

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
يبدو أن أفعله ل
الكثير من الأشياء في بلدي علامات الدفتيريا.

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