[Powered by Google Translate] [सीएसएस] [यूसुफ ओंग - हार्वर्ड विश्वविद्यालय] [यह CS50 है. - CS50.TV] 

आज हम सीएसएस के बारे में बात कर या स्टाइल शीट्स हो जाएगा. 

तो सीएसएस वास्तव में क्या है? खैर, 2 भागों में नीचे अवधि सीएसएस तोड़ करते हैं: व्यापक और स्टाइल शीट्स. व्यापक थोड़ा और अधिक जटिल है, और यह है कि हम एक और वीडियो में कवर करेंगे कुछ है. लेकिन शुरुआत के लिए, स्टाइल शीट्स सीएसएस क्या करता है पर बहुत ज्यादा संकेत दिए. यह एक वेब पेज के HTML को शैलियों कहते हैं वेब पेज सौंदर्यबोध की दृष्टि से लग रहा है कि कैसे बदल रहा है. इस पृष्ठ पर पाठ का फ़ॉन्ट से सामग्री की स्थिति के लिए सब कुछ है गोल एक बॉक्स के कोनों बनाने या पाठ में छाया जोड़ने की तरह अन्य ठंडी चीजों के लिए. बातें स्क्रीन पर चेतन बनाने की तरह आप भी पागल बातें कर सकते हैं. 

इसलिए हम HTML के साथ सीएसएस इस्तेमाल कैसे करूं? मैं सिर्फ लिखा था इस गरीब दिखने साइट लो. रोब अभी इस साइट को देखने के लिए गए थे, वह शायद, कुछ ऐसा कहना चाहते हैं "वाह! मेरा परिचय भयानक लग रहा है. यूसुफ, आप एक भयानक डिजाइनर हैं." "डिफ़ॉल्ट टाइम्स फॉन्ट का प्रयोग? Helvetica इतना बेहतर है." 

तो क्या रोब चाहता स्टाइल लागू करने के लिए सबसे आसान तरीका हो सकता है? लोगों की सबसे स्पष्ट रास्ता बहुत शुरू में सीएसएस लिखा तत्व ही में हम शैली घोषणाओं सही क्या कहते रखा गया था HTML शैली विशेषता का उपयोग कर. एक शैली घोषणा बस HTML तत्व सीएसएस संपत्ति के होते हैं हम बदलना चाहते हैं अंत में संपत्ति और अर्धविराम के नए मूल्य के बाद पेट के द्वारा पीछा किया. उदाहरण के लिए, चलो रोब अपने परिचय के चारों ओर एक काले रंग की सीमा चाहता है. हम पहली बार यहाँ रोब div पर शैली गुण डाल तो दोहरे उद्धरण चिह्नों के अंदर एक सीएसएस घोषणा डाल: "सीमा: 1px ठोस काले;" 1 पिक्सेल सीमा की चौड़ाई को संदर्भित करता है, ठोस, सीमा की शैली को संदर्भित करता है और अंत में रंग सीमा के रंग है क्या निर्धारित करता है. 

हम एक तत्व पर कई शैलियों चाहते हैं, अनुक्रम में इन घोषणाओं लिखें. उदाहरण के लिए, रोब एक नीले रंग की पृष्ठभूमि के साथ Helvetica में अपने शीर्ष पाठ चाहता है और पाठ के आसपास और अधिक अंतरिक्ष, हम यह कर सकते हैं: शैली = "font-परिवार: Helvetica, पृष्ठभूमि रंग: नीला, padding: 5px;" पिछले अर्धविराम वास्तव में वैकल्पिक है, लेकिन लोगों को आमतौर पर स्थिरता की खातिर यह में रहते हैं. 

हम कूलर और अधिक जटिल सीएसएस गुणों में से कुछ समझा बचा लेंगे एक और वीडियो के लिए. आप के मन में कुछ है, बस सीएसएस द्वारा पीछा प्रभाव आप चाहते Googling शायद तुम बहुत अच्छे परिणाम देगा. अच्छी बात यह है, सीएसएस बहुत व्यापक है कि है आप क्या करना चाहते हैं कुछ भी नहीं है, यदि ऐसा है तो बाधाओं रहे हैं - कारण के भीतर - सीएसएस शायद यह कर सकते हैं. हम इनलाइन स्टाइल स्टाइल के इस तरह के कॉल. तत्व शैली शुरू टैग के साथ लाइन में, अच्छी तरह से, है. 

वास्तव में संगठित होने की तरह है जो लोगों के लिए, आप यह सब कैसे दिखता है गंदा पर नाराज एक छोटे से हो रही शुरू हो सकता है. आप पृष्ठ पर प्रत्येक तत्व के लिए ऐसा करने के लिए किया था, कल्पना कीजिए प्लस अब अपने एचटीएमएल और सीएसएस सभी intermixed और बरबाद कर रहे हैं. सकल, सही? इसे ठीक करने के लिए, लोगों को अंततः उनकी HTML मार्कअप को अलग करने के लिए पर पकड़ शुरू सीएसएस चयनकर्ताओं बुलाया कुछ का उपयोग करके अपने सीएसएस स्टाइल से. सीएसएस चयनकर्ताओं जो घोषणाओं को लागू कर रहे हैं के लिए तत्वों का चयन करने के लिए उपयोग किया जाता है. सीएसएस घोषणाओं की एक सूची के साथ संयुक्त एक चयनकर्ता अक्सर एक सीएसएस नियम के रूप में जाना जाता है. ये नियम खुला और करीब HTML शैली टैग के बीच रखा जाएगा अक्सर दस्तावेज़ के सिर में. 

यह एक उदाहरण के साथ देखने के लिए बहुत आसान है इसलिए एक सरल सीएसएस नियम बनाने के द्वारा शुरू करते हैं. पहले, चलो हमारे HTML के सिर अनुभाग में शैली टैग डाल दिया. अगला, चयनकर्ता. हम सरल चयनकर्ताओं में से एक, हैश प्रतीक है, का उपयोग करके बंद शुरू करेंगे जो अपने आईडी गुण द्वारा एक HTML तत्व का चयन करता है. इस मामले में हम लूटने की शुरुआत का प्रतिनिधित्व करता है कि div का चयन करेंगे div है आईडी, लूटने के द्वारा पीछा हैश प्रतीक टाइप करके. अब घोषणाओं. हम खुले और बंद ब्रेसिज़ जोड़ने और रोब div पर हमारे पहले इनलाइन घोषणाओं बदलाव इन ब्रेसिज़ के अंदर, ताज़ा, और, शांत, रोब की पहचान अभी भी इसे चारों ओर एक काले रंग की सीमा शून्य से गंदा इनलाइन कुरूपता है. 

अब, क्या हम लूटने की पहचान की एच 1 अंदर का चयन करना चाहते थे? आप "के लिए उस पर एक आईडी डाल दिया और फिर हमारे पहले शैलियों चलते हैं.", सोच सकते हैं यह काम करता है, लेकिन सीएसएस आप तत्वों का चयन दे के अन्य तरीके हैं हम combinators सरल चयनकर्ताओं मिश्रण करने के लिए क्या कॉल का उपयोग करके. उदाहरण के लिए, एक खाली स्थान चरित्र एक combinator के रूप में इस्तेमाल किया जा सकता है एक और चयनकर्ता के अंदर रहते हैं कि 1 चयनकर्ता के सभी उदाहरणों निर्दिष्ट करने के लिए. यही कारण है कि यह वास्तव में एक बहुत अधिक जटिल लगता है. यहाँ एक उदाहरण है. हम #, लूटने एक स्थान जोड़ने, और एक H1 के साथ पालन टाइप करेंगे एक और सरल चयनकर्ता तत्वों के प्रकार का चयन करता है कि एक टैग चयनकर्ता बुलाया divs या पैराग्राफ की तरह. अंतरिक्ष सभी सीएसएस घोषणाओं को लागू करने, हमारे 2 सरल चयनकर्ताओं को जोड़ती है और आईडी = "लूटने" के साथ तत्व के अंदर रहते हैं कि H1 टैग को घुंघराले ब्रेसिज़. बस यह काम करता है कि आप को समझाने के लिए, मैं सफेद, ताज़ा करने के लिए फ़ॉन्ट रंग बदल देंगे और, देखो, रोब हेडर अब सफेद है. 

इस काम के सभी नियमों के बजाय इनलाइन शैलियों का उपयोग करके दिखाने के लिए कि चला जाता है हम बहुत क्लीनर कोड प्राप्त कर सकते हैं. इस शैली ब्लॉक शुरू होता है वास्तव में, अगर, एक थोड़ा बड़ा हो रही है मैं भी पूरी तरह एक अलग फाइल में इन शैलियों को बाहर खींच सकते हैं. 

इस दस्तावेज़ में सीएसएस के रूप में इस नए फ़ाइल शामिल करने के लिए मैं बस HTML के लिंक टैग का उपयोग करेंगे. यहाँ मैं, मैं एक बाह्य शैली पत्रक में जोड़ने हूँ कि रिलायंस एनर्जी विशेषता यह कह रहा हूँ और मेरे href गुण के साथ फाइल करने के लिए पथ निर्दिष्ट. अब मेरी HTML मार्कअप और सीएसएस, पूरी तरह से अलग फ़ाइलों में अच्छी तरह से आयोजित कर रहे हैं जो लगभग हमेशा डिजाइनरों एचटीएमएल और सीएसएस के साथ काम करना पसंद करते हैं, जिस तरह से है. 

अगर आप सोच रहे हैं कि मामले में, सरल चयनकर्ताओं आईडी चयनकर्ताओं शामिल हम सिर्फ देखा लोगों की तरह और टैग चयनकर्ताओं साथ ही साथ कक्षा एक खास वर्ग के साथ तत्व का चयन करने के लिए चयनकर्ताओं, प्रकार जैसे अन्य विशेषताओं से तत्वों का चयन करने के लिए विशेषता चयनकर्ताओं = "रेडियो" रेडियो बटन आदानों, और जैसे pseudoselectors के लिए उड़ना और ध्यान केंद्रित बातचीत एक तत्व पाए जाते हैं पर mousing तरह जब स्टाइल को निर्दिष्ट करने के लिए. 

आम combinators सभी बच्चों के लिए खाली स्थान शामिल और अल्पविराम चयनकर्ताओं भेद करने के लिए. आप मुठभेड़ हो सकता है दूसरों को, केवल प्रत्यक्ष बच्चों के लिए तीर शामिल तत्व के बाद होने वाली सभी भाई बहन के लिए टिल्ड, और तत्व के तुरंत बाद आता है कि 1 भाई के लिए धन चिह्न. 

इन चयनकर्ताओं और combinators के संयोजन से, यदि आप किसी वेब पेज पर हासिल कर सकते हैं स्टाइल की सीमा को विस्तृत कर सकते हैं और अधिक कुशलता से सीएसएस लिखें. आप मुझे यहां टाइपिंग देख सीएसएस की लाइनों के एक जोड़े के साथ, मैं जल्दी से कुछ इस तरह की तरह यह लग रहा है जैसे कुछ कर सकते हैं. 

मैं यूसुफ हूँ, और इस CS50 है. 

[CS50.TV] 

उह, मैं कहाँ से शुरू करूँ? [हंसते हुए] ठीक है - मुझे बिना ऐसा करते हैं. एक जोड़ें - मुझे लगता है कि शब्दों को बदल दें. ऊह. माफ़ कीजिए.