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

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

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
व्यापक और स्टाइल शीट्स.

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
वेब पेज सौंदर्यबोध की दृष्टि से लग रहा है कि कैसे बदल रहा है.

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
प्लस अब अपने एचटीएमएल और सीएसएस सभी 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
>> अब, क्या हम लूटने की पहचान की एच 1 अंदर का चयन करना चाहते थे?

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
जो लगभग हमेशा डिजाइनरों एचटीएमएल और सीएसएस के साथ काम करना पसंद करते हैं, जिस तरह से है.

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
ऊह. माफ़ कीजिए.