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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[CS50.TV] 

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