1
00:00:00,000 --> 00:00:05,660
>> [संगीत बजाना]

2
00:00:05,660 --> 00:00:08,740
>> डौग लॉयड: तो चलो एक और ले चलो
वीडियो में एक और भाषा के बारे में बात करने के लिए।

3
00:00:08,740 --> 00:00:10,800
हम सीएसएस के बारे में बात करेंगे इस बार।

4
00:00:10,800 --> 00:00:13,460
के लिए कम है, जो इतने सीएसएस,
व्यापक शैली पत्रक,

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
एचटीएमएल हम संगठित करने के लिए क्या उपयोग है
हम अपने पेज पर डाल करना चाहते हैं सामग्री,

8
00:00:20,900 --> 00:00:25,390
सीएसएस हम आम तौर पर उपयोग करने वाले उपकरण है
हमारी वेबसाइट देखो कैसे अनुकूलित करने के लिए,

9
00:00:25,390 --> 00:00:30,410
और कैसे उपयोगकर्ता अनुभव वास्तव में
हमारी वेबसाइट के साथ बातचीत की है।

10
00:00:30,410 --> 00:00:32,535
>> एचटीएमएल के लिए इसी प्रकार, सीएसएस है
नहीं एक प्रोग्रामिंग भाषा।

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
ऐसा लगता है कि किसी भी तरह की जरूरत नहीं है
सी करता है कि संबंधित बातें प्रवाह।

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
कि अंत करने के लिए, अगर तुम नहीं है
अभी तक, एचटीएमएल पर हमारे वीडियो देखा

19
00:00:51,170 --> 00:00:53,290
या साथ अपरिचित हैं
एचटीएमएल आम तौर पर, आप

20
00:00:53,290 --> 00:00:57,430
उस पर एक नज़र रखना चाहते हो सकता
सीएसएस के पहले, इस वजह से चर्चा

21
00:00:57,430 --> 00:01:00,700
पर निर्भर रहा है
एचटीएमएल के कुछ ज्ञान।

22
00:01:00,700 --> 00:01:03,740
>> यहाँ तो एक सच है
सरल सीएसएस शैली पत्रक।

23
00:01:03,740 --> 00:01:06,480
आप कभी नहीं किया है
इससे पहले कि सीएसएस के साथ प्रोग्राम,

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
हमारे एचटीएमएल पर, और यह सेट
नीले रंग के लिए उस पृष्ठ की पृष्ठभूमि का रंग।

28
00:01:19,631 --> 00:01:21,130
खैर, यह एक बहुत ही सरल शैली पत्रक है।

29
00:01:21,130 --> 00:01:23,269
यह वास्तव में बहुत मानव है
अनुकूल भाषा, सीएसएस।

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
एक घोषणा, एक सीएसएस घोषणा।

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
>> कुछ आम सीएसएस गुण क्या हैं?

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
>> तो फिर तुम एक महत्वपूर्ण शब्द का उपयोग कर सकते हैं,
इसलिए सीएसएस कुछ रंग है

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, आरजी और बी, के लिए
लाल, हरे और नीले रंग के घटक।

64
00:03:08,500 --> 00:03:10,590
और इसलिए हम निर्दिष्ट कर सकते हैं
हम से चाहते हैं किसी भी रंग,

65
00:03:10,590 --> 00:03:15,520
बजाय नीले या हरे या काले का उपयोग कर के,
पौंड का उपयोग करने और हेक्स के तत्कालीन छह अंक,

66
00:03:15,520 --> 00:03:18,310
और कहा कि हमें देना होगा
छह अंकों रंग।

67
00:03:18,310 --> 00:03:19,850
तो यह है कि पृष्ठभूमि रंग है।

68
00:03:19,850 --> 00:03:21,975
>> हम यह भी अग्रभूमि है
आमतौर पर है, जो रंग,

69
00:03:21,975 --> 00:03:24,140
अपने पृष्ठ के पाठ किया जा रहा है।

70
00:03:24,140 --> 00:03:28,850
और अगर आप इसी तरह से कर सकता है कि
कुंजी शब्द और या छह अंकों हेक्स के साथ।

71
00:03:28,850 --> 00:03:32,140
तो अगर आप किसी भी रंग निर्दिष्ट कर सकते हैं आप
अपने पृष्ठ के पाठ के लिए चाहते हैं

72
00:03:32,140 --> 00:03:36,370
एक विशेष के खिलाफ
पृष्ठभूमि रंग, ऊपर।

73
00:03:36,370 --> 00:03:39,100
तुम भी बदल सकते हैं और सौदा कर सकते हैं
फ़ॉन्ट, और जिस तरह से पाठ के साथ

74
00:03:39,100 --> 00:03:40,400
पृष्ठ पर प्रदान की गई है।

75
00:03:40,400 --> 00:03:42,010
>> तो अगर आप अपने फ़ॉन्ट आकार बदल सकते हैं।

76
00:03:42,010 --> 00:03:46,320
आप इस तरह के अतिरिक्त के रूप में कुंजी शब्दों का उपयोग कर सकते
अतिरिक्त छोटे, छोटे या XX, या मध्यम,

77
00:03:46,320 --> 00:03:47,660
बड़े, और इतने पर।

78
00:03:47,660 --> 00:03:50,750
आप तय अंक का उपयोग कर सकते हैं, 10
बिंदु, 12 अंक, और इतने पर।

79
00:03:50,750 --> 00:03:55,850
आप, प्रतिशत, 80%, 20% का उपयोग कर सकते हैं
जहां 100% डिफ़ॉल्ट फ़ॉन्ट है

80
00:03:55,850 --> 00:03:59,220
आम तौर पर करने के लिए जा रहा है जो आकार,
11 या 12 अंक ऐसा कुछ हो।

81
00:03:59,220 --> 00:04:01,659
या फिर आप भी यह आधार बंद कर सकते हैं
सबसे हाल ही में फ़ॉन्ट आकार की।

82
00:04:01,659 --> 00:04:04,950
तुम सिर्फ कुछ लिखा था और यदि आप जानते हैं
यह छोटा होना करने के लिए क्या आप चाहते हैं, है

83
00:04:04,950 --> 00:04:08,241
लेकिन आप नहीं जानते कि क्या वास्तव में आकार आप
यह हो सकता है, ठीक है, तुम सिर्फ कह सकते हैं करना चाहते हैं,

84
00:04:08,241 --> 00:04:09,330
फ़ॉन्ट का आकार छोटा होता है।

85
00:04:09,330 --> 00:04:14,344
और यह के बंद का आधार होगा
अभी तक ऊपर, यह फ़ॉन्ट आकार है।

86
00:04:14,344 --> 00:04:15,760
और अगर आप छोटा या बड़ा हो सकता है।

87
00:04:15,760 --> 00:04:18,390
इसलिए अलग से एक बहुत कुछ है
तरीके फ़ॉन्ट आकार निर्दिष्ट करने के लिए।

88
00:04:18,390 --> 00:04:20,690
>> आप यह भी निर्दिष्ट कर सकते हैं
आप चाहते फ़ॉन्ट परिवार।

89
00:04:20,690 --> 00:04:23,360
आप एक विशेष है, तो
नाम से कोई रास्ता नहीं है CSS--

90
00:04:23,360 --> 00:04:27,270
हम इस बारे में बात करने के लिए नहीं जा रहे हैं
here-- एक बहुत ही विशिष्ट फ़ॉन्ट परिभाषित करने के लिए

91
00:04:27,270 --> 00:04:28,980
और अपने पेज में एम्बेड।

92
00:04:28,980 --> 00:04:30,620
तुम भी जेनेरिक नाम का उपयोग कर सकते हैं।

93
00:04:30,620 --> 00:04:33,540
वेब सुरक्षित फोंट की एक बहुत कुछ है
कि सीएसएस में पूर्व परिभाषित कर रहे हैं।

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
पहले से ही, टाइम्स न्यू रोमन, एरियल,
, नई, जॉर्जिया, टाहोमा, Verdana कूरियर

97
00:04:44,640 --> 00:04:45,470
और इसी तरह।

98
00:04:45,470 --> 00:04:47,170
उन सभी वेब सुरक्षित फोंट माना जाता है।

99
00:04:47,170 --> 00:04:49,169
और वास्तव में, भाग
कारण है कि वे होने के लिए आया था

100
00:04:49,169 --> 00:04:54,140
हर पेज web-- बनाने के लिए इस्तेमाल किया जा रहा था
इस डिफ़ॉल्ट के लिए उपयोग फोंट का गठन किया था

101
00:04:54,140 --> 00:04:58,480
विभिन्न serifs, और इस सब के साथ
हम में नहीं मिलेगा फॉन्ट सामान,

102
00:04:58,480 --> 00:05:01,130
लेकिन ये आम तौर पर कर रहे हैं
अपने सीएसएस में सुलभ,

103
00:05:01,130 --> 00:05:04,029
यदि आप नहीं करते हैं, भले ही
अन्यथा फोंट परिभाषित करते हैं।

104
00:05:04,029 --> 00:05:07,070
अंत में, आप अपने पाठ संरेखित कर सकते हैं,
यह किया जा रहा है, के बजाय डिफ़ॉल्ट रूप से गठबंधन

105
00:05:07,070 --> 00:05:09,310
बाईं करने के लिए, तुम सकता है
सही करने के लिए यह पंक्ति में,

106
00:05:09,310 --> 00:05:13,740
या आप इसे केंद्रित संरेखित सकता है, या
यह दोनों मार्जिन मारा है, ताकि उचित।

107
00:05:13,740 --> 00:05:16,800
उन तो आप उपयोग कर सकते हैं सभी विकल्प इस प्रकार हैं
अपने पाठ की तरह लग रहा है बदलने के लिए,

108
00:05:16,800 --> 00:05:20,120
और इसे अपने पेज पर कैसे प्रदर्शित कर रहा है।

109
00:05:20,120 --> 00:05:22,180
>> आपका चयनकर्ताओं नहीं करते
टैग केवल होना है।

110
00:05:22,180 --> 00:05:25,539
हम पहले एक शरीर टैग देखा
चयनकर्ता, और टैग चयनकर्ता

111
00:05:25,539 --> 00:05:26,580
बस ऐसे ही दिखता है।

112
00:05:26,580 --> 00:05:30,020
तुम तो एक टैग का नाम है, और
कि टैग के लिए एक स्टाइलशीट परिभाषित करते हैं।

113
00:05:30,020 --> 00:05:32,660
लेकिन तुम भी कुछ कर सकते हैं
एक आईडी चयनकर्ता बुलाया।

114
00:05:32,660 --> 00:05:34,390
एक आईडी चयनकर्ता बहुत समान दिखता है।

115
00:05:34,390 --> 00:05:38,100
लेकिन अब मैं का उपयोग नहीं कर रहा हूँ, कि नोटिस
एक एचटीएमएल टैग, मैं इस मामले में उपयोग कर रहा हूँ

116
00:05:38,100 --> 00:05:40,720
#unique, या अद्वितीय हैश।

117
00:05:40,720 --> 00:05:42,930
आप से याद करते हैं, तो हमारे
एचटीएमएल पर वीडियो, हम बात की

118
00:05:42,930 --> 00:05:45,620
टैग गुण कैसे हो सकता है के बारे में।

119
00:05:45,620 --> 00:05:48,340
>> और एक विशेषता है कि लागू होता है
बहुत ज्यादा सभी एचटीएमएल टैग करने के लिए,

120
00:05:48,340 --> 00:05:51,440
लेकिन हम इस बारे में बात नहीं की,
एक आईडी टैग कहा जाता है।

121
00:05:51,440 --> 00:05:55,250
इसलिए इस विशेष सीएसएस होगा
केवल यह है कि एचटीएमएल टैग करने के लिए आवेदन

122
00:05:55,250 --> 00:05:58,530
एक बहुत ही विशिष्ट आईडी, आप नामित किया है।

123
00:05:58,530 --> 00:06:01,000
आप कहीं है तो
अपने कोड में कहीं,

124
00:06:01,000 --> 00:06:06,090
अपने HTML फ़ाइल, एक टैग है और आप में
कि टैग करने के लिए एक विशेषता के रूप में निर्दिष्ट,

125
00:06:06,090 --> 00:06:09,060
आईडी, इस अनूठी के बराबर होती है
विशेष शैली पत्रक

126
00:06:09,060 --> 00:06:15,030
यहां केवल बीच में लागू होगी
अनूठा की आईडी के साथ कि टैग।

127
00:06:15,030 --> 00:06:17,180
>> तुम भी कुछ कर सकते हैं
एक वर्ग चयनकर्ता बुलाया।

128
00:06:17,180 --> 00:06:19,920
होने के अलावा में तो
आईडी आप भी कर सकते हैं, गुण

129
00:06:19,920 --> 00:06:23,130
एचटीएमएल टैग करने के लिए एक वर्ग विशेषता जोड़ें।

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
आप उन्हें लिख सकते हैं
सीधे अपने एचटीएमएल में

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
आप से याद करते हैं, तो हमारे
एचटीएमएल वीडियो, मुझे पता चला

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
एक तरह से इसे बेहतर बनाने के लिए
सीएसएस, यह वास्तव में देखो बनाने के लिए

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 आईडीई, और एक नज़र रखना

157
00:07:47,490 --> 00:07:50,780
सीएसएस, की तरह, tweak कर सकते हैं कि कैसे में
क्या हम पहले से शुरू कर दिया,

158
00:07:50,780 --> 00:07:53,290
और यह एक बहुत बेहतर कुछ करते हैं।

159
00:07:53,290 --> 00:07:55,650
>> इसलिए हम CS50 आईडीई में हैं
अब, और अपरिचित हैं,

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
मैं एक शैली टैग खोल दिया है, और अब मैं कर रहा हूँ
बस के अंदर एक सीएसएस शैली पत्रक को परिभाषित

183
00:08:53,550 --> 00:08:54,310
इसके बारे में।

184
00:08:54,310 --> 00:08:56,310
मैं मेज कहते हैं कि एक शैली पत्रक है।

185
00:08:56,310 --> 00:08:58,170
यही कारण है कि मेरी टैग चयनकर्ता है।

186
00:08:58,170 --> 00:09:01,340
मैं डॉट या हैश का उपयोग नहीं कर रहा हूँ,
जो मैं मैं यदि कर रहा होगा

187
00:09:01,340 --> 00:09:03,710
एक आईडी या एक वर्ग चयनकर्ता का उपयोग कर रहा था।

188
00:09:03,710 --> 00:09:06,190
मैं एक टैग चयनकर्ता here-- टेबल है।

189
00:09:06,190 --> 00:09:10,090
इस शैली के लिए जा रहा है
हर टेबल टैग करने के लिए लागू होते हैं।

190
00:09:10,090 --> 00:09:14,950
जाहिर है मैं एक एक डाल करना चाहते हैं
विस्तृत पिक्सेल, ठोस नीले रंग की सीमा,

191
00:09:14,950 --> 00:09:15,779
मेरी मेज के अंदर।

192
00:09:15,779 --> 00:09:18,320
लगता है कि जैसे यह शायद होगा लगता है
ठीक है, स्थिति में मदद?

193
00:09:18,320 --> 00:09:20,320
हम करने के लिए जा रहे हैं
चीजें एक बहुत बेहतर लग रही है।

194
00:09:20,320 --> 00:09:21,190
तो यह ठीक है।

195
00:09:21,190 --> 00:09:23,540
Stylistically, मैं तो बस है
यहाँ में मेरी शैली पत्रक एम्बेडेड।

196
00:09:23,540 --> 00:09:25,100
यह निश्चित रूप से एक है
यह करने के लिए स्वीकार्य तरीका है।

197
00:09:25,100 --> 00:09:26,391
चलो इस तरह दिखता है क्या देखते हैं।

198
00:09:26,391 --> 00:09:29,790
इसलिए मैं यहाँ नीचे वापस जाओ, और हूँ
मैं अपने table2.HTML जाएगा पूर्वावलोकन करेंगे।

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

200
00:09:32,430 --> 00:09:36,470
खैर, कि मैं क्या चाहता काफी नहीं है
लेकिन यह हम के लिए कहा कि क्या वास्तव में है।

201
00:09:36,470 --> 00:09:39,530
हम इस शैली ने कहा है कि
हमारे टेबल के लिए लागू करने के लिए जा रहा है।

202
00:09:39,530 --> 00:09:43,810
हमारे टेबल अब एक एक पिक्सेल है
इसके चारों ओर व्यापक, ठोस नीले रंग की सीमा।

203
00:09:43,810 --> 00:09:46,237
हम वास्तव में नहीं मिल रहे हैं
तालिका कक्षों में।

204
00:09:46,237 --> 00:09:47,570
हम सिर्फ मेज पर हो रही है।

205
00:09:47,570 --> 00:09:49,310
तो सीएसएस काम किया।

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
मैं वास्तव में क्या देखना चाहते हैं तो
मैं यहाँ सीएसएस के साथ क्या कर रहा हूँ

221
00:10:32,320 --> 00:10:35,010
मुझे लगता है कि खुले जाने की जरूरत है
table.CSS के रूप में अच्छी तरह से फ़ाइल।

222
00:10:35,010 --> 00:10:37,490
इसलिए हम यहाँ पर वापस जाना होगा
फिर हमारे फाइल पेड़ के लिए।

223
00:10:37,490 --> 00:10:38,660
Table.CSS है।

224
00:10:38,660 --> 00:10:40,490
हम यह खुला पॉप हूँ।

225
00:10:40,490 --> 00:10:43,070
अब हम सीएसएस के एक छोटे से देख रहे हैं।

226
00:10:43,070 --> 00:10:45,630
जाहिर है, मैं एक जोड़ी है
चीजों के यहां चल रहा है।

227
00:10:45,630 --> 00:10:48,950
मैं जाहिरा तौर पर एक पांच डाल करना चाहते हैं
विस्तृत पिक्सेल, ठोस लाल बॉर्डर,

228
00:10:48,950 --> 00:10:50,287
मेरी मेज के चारों ओर।

229
00:10:50,287 --> 00:10:52,870
हम पहले से ही कि जा रहा है कि पता है
सिर्फ परिधि पर जाने के लिए।

230
00:10:52,870 --> 00:10:56,180
हम table2.HTML में देखा।

231
00:10:56,180 --> 00:10:58,770
प्रत्येक पंक्ति के साथ, मैं
जाहिरा तौर पर निर्दिष्ट करना चाहते हैं

232
00:10:58,770 --> 00:11:01,950
उस पंक्ति ऊंचाई 50 पिक्सल उच्च है।

233
00:11:01,950 --> 00:11:05,680
इसलिए हर पंक्ति के लिए याद है,
कि, टीआर टैग क्या करता है

234
00:11:05,680 --> 00:11:08,550
मैं इसे 50 पिक्सल उच्च बना रहा हूँ।

235
00:11:08,550 --> 00:11:09,804
>> अन्त में, मैं यह टिप्पणी की है।

236
00:11:09,804 --> 00:11:11,470
और यह हम सीएसएस में टिप्पणी करने के लिए है।

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
कोई स्लैश स्लैश सीएसएस में हालांकि है।

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
टीडी टैग, या मेज याद रखें
वास्तव में बस रहे हैं, जो डेटा,

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
या यह tall-- बहाना 50 पिक्सल है
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
हम वास्तव में सिर्फ सतह scratching रहे हैं
आप यहाँ सीएसएस के साथ क्या कर सकते हैं।

279
00:13:06,800 --> 00:13:10,330
सौभाग्य से सीएसएस प्रलेखन
बहुत सीधा है।

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
लेकिन सीएसएस सच में मज़ा है
साथ प्रयोग करने के लिए।

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