1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [सीएसएस]

2
00:00:02,000 --> 00:00:04,810
[यूसुफ Ong - हार्वर्ड विश्वविद्यालय]

3
00:00:04,810 --> 00:00:07,160
[यह CS50 है. - CS50.TV]

4
00:00:07,160 --> 00:00:11,430
>> आज हम सीएसएस के बारे में बात कर सकता हूँ या स्टाइल शीट्स.

5
00:00:11,430 --> 00:00:14,330
>> तो क्या वास्तव में सीएसएस है?

6
00:00:14,330 --> 00:00:17,120
खैर, चलो 2 भागों में नीचे अवधि सीएसएस तोड़:

7
00:00:17,120 --> 00:00:19,510
Cascading और स्टाइल शीट्स.

8
00:00:19,510 --> 00:00:23,900
व्यापक थोड़ा और अधिक जटिल है, और यह कुछ हम एक और वीडियो में कवर करेंगे.

9
00:00:23,900 --> 00:00:27,930
लेकिन शुरुआत के लिए, स्टाइल शीट्स सीएसएस क्या करता है पर बहुत अधिक संकेत.

10
00:00:27,930 --> 00:00:30,880
यह एक वेब पेज के HTML शैलियों को कहते हैं,

11
00:00:30,880 --> 00:00:33,720
बदल कैसे वेब पेज aesthetically लग रहा है.

12
00:00:33,720 --> 00:00:38,310
इस पेज पर पाठ का फ़ॉन्ट से सामग्री की स्थिति के लिए सब कुछ है

13
00:00:38,310 --> 00:00:43,800
एक गोल बॉक्स के कोनों बनाने या पाठ करने के लिए छाया जोड़ने जैसे अन्य ठंडी चीजें.

14
00:00:43,800 --> 00:00:48,230
तुम भी पागल बातें करते हैं की तरह बनाने के लिए चीजें स्क्रीन पर चेतन कर सकते हैं.

15
00:00:48,230 --> 00:00:51,700
>> तो हम कैसे HTML के साथ सीएसएस का उपयोग?

16
00:00:51,700 --> 00:00:53,620
इस साइट के गरीब दिखने मैं सिर्फ लिखा ले लो.

17
00:00:53,620 --> 00:00:57,290
यदि रोब इस साइट पर अभी देखो थे, वह शायद कुछ ऐसा कहना चाहते हैं,

18
00:00:57,290 --> 00:01:01,730
"वाह मेरा परिचय! भयानक लग रहा है. जोसेफ़, तुम एक भयानक डिजाइनर कर रहे हैं."

19
00:01:01,730 --> 00:01:05,110
"डिफ़ॉल्ट टाइम्स फ़ॉन्ट Helvetica इतना बेहतर है."

20
00:01:05,110 --> 00:01:09,600
>> तो क्या स्टाइल रोब चाहता है को लागू करने का सबसे सरल तरीका हो सकता है?

21
00:01:09,600 --> 00:01:13,530
सबसे स्पष्ट लोगों की तरह बहुत शुरू में लिखा है सीएसएस

22
00:01:13,530 --> 00:01:17,470
तत्व में ही डाल दिया है कि हम क्या शैली घोषणाओं सही फोन था

23
00:01:17,470 --> 00:01:20,560
HTML शैली विशेषता का उपयोग कर.

24
00:01:20,560 --> 00:01:26,420
एक शैली घोषणा बस HTML तत्व सीएसएस संपत्ति के होते हैं हम बदलना चाहते हैं

25
00:01:26,420 --> 00:01:32,140
और अंत में एक सेमीकोलन संपत्ति के नए मूल्य द्वारा पीछा बृहदान्त्र द्वारा पीछा किया.

26
00:01:32,140 --> 00:01:36,600
उदाहरण के लिए, हम कहते हैं कि रोब अपने परिचय के चारों ओर एक काले रंग की सीमा चाहता है.

27
00:01:36,600 --> 00:01:40,040
हम पहले रोब div पर शैली विशेषता यहाँ डाल

28
00:01:40,040 --> 00:01:43,830
तो दोहरे उद्धरण चिह्नों के अंदर एक सीएसएस घोषणा डाल:

29
00:01:43,830 --> 00:01:47,880
"सीमा: 1px ठोस काले;"

30
00:01:47,880 --> 00:01:52,480
1 पिक्सेल सीमा की चौड़ाई के लिए संदर्भित करता है, ठोस सीमा की शैली के लिए संदर्भित करता है,

31
00:01:52,480 --> 00:01:56,640
और अंत में रंग निर्धारित करता है बॉर्डर रंग क्या है.

32
00:01:56,640 --> 00:02:01,220
>> अगर हम एक तत्व पर कई शैलियों चाहते हैं, इस क्रम में इन घोषणाओं लिखने.

33
00:02:01,220 --> 00:02:05,650
उदाहरण के लिए, अगर रोब एक नीले रंग की पृष्ठभूमि के साथ Helvetica में अपने शीर्ष पाठ करना चाहता है

34
00:02:05,650 --> 00:02:09,270
और अधिक पाठ के चारों ओर अंतरिक्ष, हम कर सकते हैं:

35
00:02:09,270 --> 00:02:19,800
शैली = "font-परिवार: Helvetica, पृष्ठभूमि रंग: नीला, padding: 5px;"

36
00:02:22,150 --> 00:02:28,010
वास्तव में पिछले सेमीकोलन वैकल्पिक है, लेकिन लोगों को आम तौर पर यह है स्थिरता की खातिर में रखने के लिए.

37
00:02:28,010 --> 00:02:32,180
>> हम कूलर और अधिक जटिल सीएसएस संपत्तियों के कुछ समझा बचा लेंगे

38
00:02:32,180 --> 00:02:34,140
एक और वीडियो के लिए.

39
00:02:34,140 --> 00:02:38,780
यदि आप मन में कुछ है, बस प्रभाव आप चाहते हैं सीएसएस द्वारा पीछा Googling

40
00:02:38,780 --> 00:02:41,590
शायद आप बहुत अच्छा परिणाम दे देंगे.

41
00:02:41,590 --> 00:02:44,530
अच्छी बात यह है कि सीएसएस बहुत व्यापक है,

42
00:02:44,530 --> 00:02:48,470
कारण के भीतर - तो बाधाओं अगर आप कुछ करना चाहते हैं कर रहे हैं -

43
00:02:48,470 --> 00:02:51,350
सीएसएस शायद यह कर सकते हैं.

44
00:02:51,350 --> 00:02:54,750
हम इनलाइन स्टाइल स्टाइल के इस तरह के कॉल.

45
00:02:54,750 --> 00:02:59,030
तत्व शैली है, अच्छी तरह से शुरू टैग के साथ लाइन में.

46
00:02:59,030 --> 00:03:01,770
>> लोगों को, जो वास्तव में आयोजित किया जा पसंद के लिए,

47
00:03:01,770 --> 00:03:05,800
आप एक छोटे से कैसे गन्दा यह सब दिखता है पर नाराज हो रही शुरू हो सकता है.

48
00:03:05,800 --> 00:03:09,810
कल्पना कीजिए कि अगर आप पृष्ठ पर हर तत्व के लिए यह करना पड़ा,

49
00:03:09,810 --> 00:03:13,690
प्लस अब अपने HTML और सीएसएस और intermixed रहे हैं बरबाद.

50
00:03:13,690 --> 00:03:15,500
सकल, है ना?

51
00:03:15,500 --> 00:03:21,110
यह ठीक है, लोगों को अंततः उनके HTML मार्कअप को अलग करने के लिए पर पकड़ शुरू

52
00:03:21,110 --> 00:03:26,370
कुछ सीएसएस चयनकर्ताओं बुलाया का उपयोग करके अपने सीएसएस स्टाइल से.

53
00:03:26,370 --> 00:03:31,780
सीएसएस चयनकर्ताओं तत्वों को जो घोषणाओं को लागू कर रहे हैं का चयन करने के लिए किया जाता है.

54
00:03:31,780 --> 00:03:38,600
सीएसएस घोषणाओं की एक सूची के साथ संयुक्त चयनकर्ता अक्सर एक सीएसएस नियम के रूप में जाना जाता है.

55
00:03:38,600 --> 00:03:43,260
इन नियमों का खुला और करीब HTML शैली टैग के बीच में डाल दिया जाएगा,

56
00:03:43,260 --> 00:03:46,120
अक्सर दस्तावेज़ के सिर में.

57
00:03:46,120 --> 00:03:49,000
>> यह बहुत आसान है एक उदाहरण के साथ देखने के लिए,

58
00:03:49,000 --> 00:03:53,000
तो एक साधारण सीएसएस नियम बनाने के द्वारा चलो शुरू.

59
00:03:53,000 --> 00:03:58,180
पहले, चलो हमारे HTML के सिर अनुभाग में शैली टैग डाल.

60
00:03:58,180 --> 00:04:00,020
अगला, चयनकर्ता.

61
00:04:00,020 --> 00:04:03,490
हम एक सरल चयनकर्ताओं के हैश प्रतीक का उपयोग करके बंद शुरू करेंगे,

62
00:04:03,490 --> 00:04:08,080
जो अपनी आईडी गुण द्वारा एक HTML तत्व का चयन करता है.

63
00:04:08,080 --> 00:04:11,850
इस मामले में हम div कि रोब परिचय का प्रतिनिधित्व करता है का चयन करेंगे

64
00:04:11,850 --> 00:04:16,740
हैश div आईडी, लूटने के द्वारा बाद प्रतीक टाइप करके.

65
00:04:16,740 --> 00:04:18,579
अब घोषणाओं.

66
00:04:18,579 --> 00:04:24,090
हम खुले और बंद ब्रेसिज़ जोड़ने और रोब div पर हमारे पहले इनलाइन घोषणाओं बदलाव

67
00:04:24,090 --> 00:04:26,880
इन ब्रेसिज़ के अंदर, ताज़ा,

68
00:04:26,880 --> 00:04:34,160
और, शांत, रोब पहचान अभी भी यह ऋण गंदा इनलाइन कुरूपता के चारों ओर एक काले रंग की सीमा है.

69
00:04:34,160 --> 00:04:39,380
>> अब, क्या हुआ अगर हम रोब परिचय के अंदर h1 का चयन करना चाहते थे?

70
00:04:39,380 --> 00:04:44,400
आपको लगता है कि उस पर एक आईडी डाल दिया और फिर हमारे पहले शैली चाल चलो. "हो सकता है

71
00:04:44,400 --> 00:04:48,760
यही काम करता है, लेकिन सीएसएस दे आप तत्वों का चयन करने के अन्य तरीके

72
00:04:48,760 --> 00:04:53,490
का उपयोग कर हम क्या combinators सरल चयनकर्ताओं का मिश्रण करने के लिए कहते हैं.

73
00:04:53,490 --> 00:04:57,740
उदाहरण के लिए, एक रहितसफेद चरित्र एक combinator के रूप में इस्तेमाल किया जा सकता है

74
00:04:57,740 --> 00:05:03,510
1 चयनकर्ता कि एक और चयनकर्ता के अंदर जीने के सभी उदाहरणों निर्दिष्ट.

75
00:05:03,510 --> 00:05:06,630
यह एक बहुत अधिक जटिल से यह वास्तव में लगता है.

76
00:05:06,630 --> 00:05:08,830
यहाँ एक उदाहरण है.

77
00:05:08,830 --> 00:05:13,900
हम # लूटने, एक अंतरिक्ष जोड़ने के लिए, और यह एक h1 के साथ पालन टाइप करेंगे,

78
00:05:13,900 --> 00:05:18,840
एक और सरल चयनकर्ता एक टैग चयनकर्ता कि तत्वों के प्रकार का चयन बुलाया

79
00:05:18,840 --> 00:05:21,200
divs या पैराग्राफ तरह.

80
00:05:21,200 --> 00:05:26,140
अंतरिक्ष हमारे 2 सरल चयनकर्ताओं को जोड़ती है, सभी सीएसएस घोषणाओं को लागू करने

81
00:05:26,140 --> 00:05:32,560
और H1 टैग कि = "लूटने" आईडी के साथ तत्व के अंदर रहते घुंघराले ब्रेसिज़.

82
00:05:32,560 --> 00:05:38,290
बस आप को समझाने के लिए है कि यह काम करता है, मैं फ़ॉन्ट रंग सफेद, ताज़ा करने के लिए बदल देंगे,

83
00:05:38,290 --> 00:05:42,090
और देखो, रोब हैडर अब सफेद है.

84
00:05:42,090 --> 00:05:47,510
>> इस काम के सभी नियमों के बजाय इनलाइन शैलियों का उपयोग करके दिखाने के लिए चला जाता है

85
00:05:47,510 --> 00:05:50,510
हम बहुत क्लीनर कोड प्राप्त कर सकते हैं.

86
00:05:50,510 --> 00:05:53,900
वास्तव में, यदि इस शैली ब्लॉक शुरू होता है एक थोड़ा बड़ा हो रहा है,

87
00:05:53,900 --> 00:05:58,340
मैं भी इन शैलियों को बाहर खींच सकता है पूरी तरह एक अलग फाइल में.

88
00:05:58,340 --> 00:06:05,120
>> इस दस्तावेज़ में सीएसएस के रूप में इस नए फ़ाइल शामिल मैं सिर्फ HTML लिंक टैग का उपयोग करेंगे.

89
00:06:05,120 --> 00:06:10,320
यहाँ मैं यह कह रहा हूँ कि मैं एक बाह्य शैली पत्रक में जोड़ने हूँ, रिलायंस एनर्जी विशेषता,

90
00:06:10,320 --> 00:06:14,840
और मेरी href गुण के साथ फाइल करने के लिए पथ निर्दिष्ट.

91
00:06:14,840 --> 00:06:20,290
अब मेरी HTML मार्कअप और सीएसएस अच्छी तरह से पूरी तरह से अलग अलग फ़ाइलों में आयोजित कर रहे हैं,

92
00:06:20,290 --> 00:06:26,090
जो लगभग हमेशा तरह डिजाइनरों HTML और सीएसएस के साथ काम करना पसंद करते है.

93
00:06:26,090 --> 00:06:30,180
>> मामले में आप सोच रहे हैं, सरल चयनकर्ताओं आईडी चयनकर्ताओं

94
00:06:30,180 --> 00:06:33,100
और हम सिर्फ देखा लोगों की तरह टैग चयनकर्ताओं

95
00:06:33,100 --> 00:06:38,610
के रूप में के रूप में अच्छी तरह से एक खास वर्ग के साथ तत्वों का चयन करने के लिए वर्ग चयनकर्ताओं

96
00:06:38,610 --> 00:06:44,000
गुण प्रकार की तरह अन्य विशेषताओं के तत्वों का चयन करने के लिए चयनकर्ताओं = "रेडियो"

97
00:06:44,000 --> 00:06:49,180
रेडियो बटन, आदानों, और pseudoselectors तरह के लिए जाएँ और ध्यान केंद्रित

98
00:06:49,180 --> 00:06:55,260
जब बातचीत एक तत्व होते हैं पर mousing की तरह स्टाइल निर्दिष्ट करने के लिए.

99
00:06:55,260 --> 00:06:58,950
>> सभी बच्चों के लिए आम combinators रहितसफेद शामिल हैं

100
00:06:58,950 --> 00:07:02,080
अल्पविराम और चयनकर्ताओं भेद करने के लिए.

101
00:07:02,080 --> 00:07:06,370
दूसरों को आप का सामना कर सकते हैं प्रत्यक्ष केवल बच्चों के लिए तीर में शामिल हैं,

102
00:07:06,370 --> 00:07:10,440
सभी भाई बहन है कि तत्व के बाद होने के लिए टिल्ड,

103
00:07:10,440 --> 00:07:16,010
और 1 भाई कि तत्व के तुरंत बाद आता है के लिए प्लस पर हस्ताक्षर.

104
00:07:16,010 --> 00:07:18,540
>> इन चयनकर्ताओं और combinators के संयोजन से,

105
00:07:18,540 --> 00:07:22,910
आप स्टाइल आप एक दिए गए वेब पेज पर प्राप्त कर सकते हैं की सीमा व्यापक कर सकते हैं

106
00:07:22,910 --> 00:07:25,050
और सीएसएस और अधिक कुशलता से लिखने के लिए.

107
00:07:25,050 --> 00:07:28,370
सिर्फ सीएसएस के लाइनों तुम मुझे यहाँ टाइप के एक जोड़े के साथ,

108
00:07:28,370 --> 00:07:34,460
मैं जल्दी से इस तरह से कुछ इस तरह लग रहा है जैसे कुछ कर सकते हैं.

109
00:07:34,460 --> 00:07:37,080
>> मैं यूसुफ हूँ, और इस CS50 है.

110
00:07:37,080 --> 00:07:39,260
>> [CS50.TV]

111
00:07:39,260 --> 00:07:40,780
>> उह, मैं कहाँ शुरू करूँ?

112
00:07:40,780 --> 00:07:44,140
मुझे बिना ऐसा - [हंसते हुए] ठीक है.

113
00:07:44,140 --> 00:07:47,300
एक जोड़ें - मुझे कि शब्दों को बदलने के.

114
00:07:50,580 --> 00:07:52,470
ऊह. माफ़ कीजिए.