इस वीडियो में हम CSSA चयनकर्ताओं समस्या स्थापित करने के लिए एक समाधान पर जाने के लिए जा रहे हैं।
और मैं सिर्फ ऊपर से नीचे हर समस्या पर जाने के लिए जा रहा हूँ।
तो तेजी से आगे बढ़ाने के लिए स्वतंत्र वहाँ सिर्फ एक या दो कि आप के साथ मुसीबत था कि अगर लग रहा है।
इसलिए हम प्रारंभिक वीडियो में पहली बार एक साथ किया था शरीर तत्व इस रंग की एक पृष्ठभूमि दे।
तो हम बस का कहना है कि शरीर पृष्ठभूमि इस रंग हमारे लिए बचा है।
आगे बढ़ते हैं और ब्राउज़र को ताज़ा में इसे लोड करते हैं और आप देख सकते हैं कि हम एक ग्रे पृष्ठभूमि मिलता है।
तो अगले एक एच एक तत्व इस रंग बनाने के लिए है।
सिवाय तो एक ही बात नहीं बल्कि पृष्ठभूमि की तुलना में हम सिर्फ रंग का कहा।
हम inheres या एच 1 बचाने के लिए यह बैंगनी बदल जाता है।
याद रखें अगर हम पेज पर एक से अधिक एच -1 था वे सब बैंगनी होगा।
तो यह अगले एक सब-एच 2 तत्वों नारंगी बनाना है।
जैसा कि ऊपर दो तो ठीक उसी चयनकर्ता।
और फिर यह नारंगी मैं सिर्फ नारंगी रंग में बनाया का उपयोग करने के लिए जा रहा हूँ बनाने के लिए है, लेकिन आप किसी भी दूसरे रंग प्रणाली का उपयोग कर सकता है और आप देख सकते हैं कि हम उनमें से उन चार के लिए हर उम्र के लिए मिलता है।
वे नारंगी बारी है।
तो अगली अप हम पर ओर करने के लिए सभी सहयोगी तत्वों नीले रंग बनाने के इस बदलाव के लिए जा रहे हैं।
अपने खुद के हेक्साडेसिमल नीले रंग उठाओ।
तो यह है कि हम सभी सहयोगी दलों का चयन करें और फिर हम उन्हें एक रंग देने के लिए और हम एक हेक्साडेसिमल नीले करने जा रहे हैं करने के लिए।
तो अगर आप कुछ भी यहाँ के रूप में लंबे समय के रूप में यह किसी भी चीज़ से अधिक नीले रंग की है डाल सकता है।
तो याद पहला चैनल लाल है तो अगले दो हरे हैं।
इसलिए हम हरे रंग का एक छोटा सा है और फिर नीले रंग का एक गुच्छा जाने क्या करेंगे।
भरोसा और सहयोगियों पर एक नज़र रखना और आप देख सकते हैं कि हम नीले रंग की रोशनी मिलती है।
तो अब हर पैरा पर पृष्ठभूमि बदलने के लिए पीले हो।
यह सिर्फ एक और जहां हम एक प्रकार के हर तत्व का चयन है।
इतना सब पैराग्राफ पृष्ठभूमि पीले बचाने के लिए और हम पीले पैराग्राफ का एक गुच्छा मिलता है।
अगले ऊपर सभी आदानों का चयन करें और उन्हें एक तीन पिक्सेल लाल बॉर्डर दे।
तो इनपुट सीमा और वहाँ यह है कि हम एक बार में यह सब कर सकते करने के कुछ तरीके है।
क्रम में तीन पिक्सेल ठोस लाल और आप हमारे दो आदानों एक उपसर्ग या ठोस लाल बॉर्डर देख सकते हैं या हम साथ इस अलग से सीमा रंग लाल बॉर्डर तीन पिक्सल है और अंत में सीमा शैली बहुत स्पष्ट कारणों के लिए ठोस है कर सकता है।
यह यह करने के लिए एक बहुत आसान है।
लेकिन कभी कभी आप यह करने के लिए जब आप जावास्क्रिप्ट को पाने के लिए चाहता हूँ।
हम सिर्फ एक हिस्सा अद्यतन करने के लिए चाहता हूँ।
तो एक उपयोगकर्ता कुछ पर घूमता है जब आप एक लाल बॉर्डर से एक हरे रंग की सीमा के लिए इसे बदलना चाहते हैं।
खैर, हम सिर्फ रंग बदलने के लिए चाहते हो सकता है और हम शैली कैसे वे कर रहे हैं के साथ छोड़ सकते हैं।
इसलिए मैं इस तरह से इसे छोड़ने के लिए जा रहा हूँ।
अगले हम अब कक्षा चयनकर्ता पर आगे बढ़ रहे हैं।
तो वर्ग नमस्कार के साथ सब कुछ दे।
एक सफेद पृष्ठभूमि।
और अगर हम ज टी एम एल देखो वहाँ वास्तव में सिर्फ एक ही बात है।
इस के अंदर यह पहला पैरा वर्ग के साथ div।
नमस्ते।
तो हम उस वर्ग डॉट का चयन करें।
हैलो पृष्ठभूमि सफेद।
और आप देख सकते हैं कि हम यहां इस पैरा मिलता है।
यह सफेद हो जाता है।
अगले ऊपर आईडी विशेष एक दो पिक्सेल ठोस नीले रंग की सीमा के साथ तत्व दे।
अपने खुद के R.G. चुनें नीले रंग की हो।
तो वही बात फिर से एक डॉट हम हैश साइन इन करें या थोर्प को चाप और फिर आईडी वह फिर से देख सकते हैं कि नाम का उपयोग करने के बजाय इस बार यहीं क्रमांक विशिष्ट है।
और फिर हम पिक्सेल के लिए ठोस और उसके बाद R.G. तो यह एक दो पिक्सेल ठोस सीमा देना चाहता हूँ नीले रंग की हो।
और हां 0 लाल 100 हरी 200 नीले होगा और अगर हम ताजा है कि आप देख सकते हैं कि हम इसे बहुत मामूली है, लेकिन आईडी के साथ इस पैरा के चारों ओर एक 2 पिक्सेल नीले रंग की सीमा से मिलता है।
अगले ऊपर सभी अनुच्छेदों कि divs 25 पिक्सेल फ़ॉन्ट के अंदर नेस्ट कर रहे हैं और संकेत इस संपत्ति फ़ॉन्ट Dasch आकार 25 पिक्सल का उपयोग कर रहा है।
तो क्या हम यहाँ क्या करने की जरूरत के बजाय सभी अनुच्छेदों हम केवल पैराग्राफ है कि एक div के अंदर कर रहे हैं चाहते का चयन करें ताकि आप इस एक है कि यहाँ एक div के अंदर नहीं है की तरह कुछ कर रहे हैं देख सकते हैं।
हम उन फ़ॉन्ट आकार में 25 पिक्सल होने के लिए नहीं करना चाहती।
इसलिए हम इस वंश चयनकर्ता जहां हम div और फिर उस div के अंदर इतना पैराग्राफ है कि किसी भी div में रहते हैं कोई फर्क नहीं पड़ता जो किसी भी divs में div बस किसी भी पैराग्राफ उन्हें चुनें और उन्हें फ़ॉन्ट आकार 25 पिक्सल है कि ताज़ा बचाने के लिए दे देंगे सभी अनुच्छेदों का कहना है कि का उपयोग और आप हैं कि इन सब से बड़ा हो, लेकिन ये हैं कि एक div के अंदर नहीं पैराग्राफ का कहना है कि बड़ा है क्योंकि वे को बनाने के प्रकार के पाठ के साथ ही आदानों एक ग्रे पृष्ठभूमि है एक div अगली के बजाय नहीं कर रहे हैं नहीं मिलता देख सकते हैं।
इसलिए इस चयनकर्ता का एक और प्रकार है और यह एक विशेषता के बंद आधारित है।
तो विशेषता तुम्हें क्या करना चाहते हैं, जहां प्रकार पाठ करने के बराबर है।
तो बुनियादी तौर पर सिर्फ इस इनपुट यहीं प्रकार पाठ के बराबर होती है।
और तो तरीका है कि हम है कि हम इनपुट टाइप करने के लिए और फिर वर्ग कोष्ठकों और हां वर्ग कोष्ठकों जा रहे हैं।
और फिर वहाँ की विशेषता है जो प्रकार है और अंदर हम जहां यह पाठ करने के बराबर है के लिए देख रहे हैं और फिर हम सिर्फ पृष्ठभूमि ग्रे कहने जा रहे हैं।
और फिर अगर हम यहाँ नीचे स्क्रॉल और ताज़ा अपनी आंख यहीं रखने के लिए आप हम एक ग्रे पृष्ठभूमि मिल देख सकते हैं।
तो फिर इस एक अगर तुम यह सब लिंक है कि गूगल के पास गया का चयन करना चाहते उपयोगी है।
हम H.F. के आधार पर बंद का चयन करेंगे या हम वहाँ से बाहर किसी भी अन्य विशेषता के बंद का चयन कर सकता है।
तो अगली अप तीसरे div के अंदर दोनों अनुच्छेदों एक गुलाबी रंग की पृष्ठभूमि दे।
तो यह एक थोड़ा पागल हो जाता है।
तो चलो एचएमओ पर एक नजर डालते हैं।
यहाँ हमारे तीसरे div है ..
पहले एक यहाँ है।
दूसरा एक यहाँ है और तीसरा एक यहाँ है और वहाँ दो पैराग्राफ और हम उन दोनों के चयन और उन्हें एक गुलाबी रंग की पृष्ठभूमि देना चाहता हूँ।
तो क्या हम पहले किया था चुनें सभी divs कि यहाँ काम नहीं करेगा के अंदर सभी अनुच्छेदों था।
क्या हम क्या हम क्या करना चाहते हैं पृष्ठ पर तीसरे div के अंदर सभी अनुच्छेदों का चयन करें।
और जिस तरह से है कि हम तीसरे div निर्दिष्ट कर सकते हैं प्रकार के अंत का उपयोग करने के लिए है।
इसलिए हम div और के प्रकार के 3 कहूँगा।
तो इस बात का है कि सभी अनुच्छेदों के बजाय हमें एक तिहाई div देने जा रहा है और फिर और फिर हम सिर्फ इतना कहना पृष्ठभूमि गुलाबी है और ताज़ा बचाने के लिए और चलो दोहरी जांच करने के लिए जा रहे हैं।
यहाँ हमारी पहली div है।
यहां दूसरे div है।
और यहाँ तीसरे div है।
पैरा करने के लिए शुरू कार्डिगन के साथ शुरू और मैं दूसरे पैराग्राफ हूँ।
वहाँ हम कार्डिगन जाना।
मैं दूसरे पैराग्राफ हूँ।
अगले ऊपर तीसरे div के अंदर इस दूसरे पैरा में एक पांच पिक्सेल सीमा सफेद सीमा दे।
तो यह एक बहुत समान है, सिवाय इसके कि हम केवल तीसरे div के अंदर दूसरे पैराग्राफ चाहते हैं।
तो बस इस एक।
तो हम एक ही बात है, जहां हम तीसरे div और के प्रकार के 3 और फिर बजाय सभी अनुच्छेदों हम तो पैरा और के प्रकार क्या करने जा रहे हैं का चयन कर सकते हैं।
और हम एक दूसरे के तो हम उन्हें गठबंधन कर सकते हैं चाहता हूँ।
यह तीसरा div की बजाय दूसरे पैराग्राफ का चयन करने के लिए जा रहा है और हम इसे एक 5 पिक्सेल सफेद सीमा सीमा 5 पिक्सेल ठोस सफेद देना चाहता हूँ।
हम वहाँ चलें।
यहाँ हमारे पांच पिक्सेल div में दूसरे पैराग्राफ पर ठोस सफेद सीमा है।
नहीं पहले एक।
अगले ऊपर तीसरे div तत्व सफेद और 20 पिक्सेल फ़ॉन्ट में ई एम बनाते हैं।
तो यह है कि इस ई एम यहीं cronut स्केटबोर्ड है।
आप Krown नहीं जानते कि यह बहुत स्वादिष्ट है।
हो सकता है कि अहंकारी।
निश्चित रूप से न्यूयॉर्क शहर के बाहर पेस्ट्री overpriced।
यह एक डोनट और एक क्रोइसैन है।
तो निश्चित रूप से करने के बजाय घर hipster ipsum शब्दावली यहाँ पर।
और हम लेने के लिए है कि ई-एम जा रहे हैं और हम यह सफेद और 20 पिक्सेल हंस बनाने के लिए जा रहे हैं।
तो जैसे इससे पहले कि हम अंदर तीसरे div 3 और फिर बस ई एम का चयन करने के लिए किया था।
और यह सब आईईएम का चयन करेंगे और यह सिर्फ होता है कि वहाँ केवल एक।
लेकिन अगर वहाँ एक से अधिक हम प्रकार या ई-एम के बजाय एक अनुच्छेद के पहले कहने के लिए ई एम चाहते हो सकता थे, लेकिन मैं सिर्फ यह इस रूप में अब के लिए छोड़ देंगे।
और हम यह रंग और 20 पिक्सेल फ़ॉन्ट रंग सफेद और फ़ॉन्ट आकार 20 पिक्सेल के लिए सफेद देना चाहता हूँ।
और सिर्फ याद दिलाने के लिए हम फोंट और फ़ॉन्ट आकार और भविष्य वीडियो में अन्य चीजों की एक गुच्छा के बारे में बात कर समय खर्च करने के लिए जा रहे हैं।
हम वहाँ चलें।
यह सफेद है और फ़ॉन्ट आकार बदल जाता है।
तो अब हम बोनस अभ्यास जो मेरे पसंदीदा में से कुछ हैं में से कुछ पर कर रहे हैं।
वहाँ चीज़ें चयन और उन्हें जोड़ तोड़ की अधिक अस्पष्ट और अधिक दिलचस्प तरीके से कुछ कर रहे हैं।
तो शुरू करते हैं।
के सभी की जाँच चेक बॉक्स 50 पिक्सल के एक बाईं मार्जिन है और मैं इसे आप के लिए दिया था बनाने पर नजर डालते हैं।
आप 50 पिक्सल के लिए मार्जिन बाएँ उपयोग करने की जरूरत है।
तो वहाँ तत्वों है कि जाँच कर रहे हैं का चयन करने के लिए एक चयनकर्ता है।
और यह सिर्फ इस तरह दिखता है।
यह सिर्फ प्रकार की nth की तरह एक छद्म चयनकर्ता है।
इसलिए हम के लिए कि जाँच कर रहा है कि हम क्या देख रहे हैं कहने के लिए की जरूरत है।
तो मैं बस सब जानकारी है कि क्योंकि याद चेक बॉक्स इनपुट प्रकार चेकबॉक्स के बराबर होती है कि अन्य तत्वों हालांकि मुख्य रूप से रेडियो बटन की जाँच की जा सकती है, देखते हैं कि जाँच की गई है कहने जा रहा हूँ।
तो यह भी किसी भी रेडियो बटन है कि जाँच की गई है का चयन करेंगे और कहा कि अब के लिए ठीक है।
तो ऐसा लगता है कि इस इनपुट पेट के जाँच की।
और क्या हम करना चाहते उपयोग मार्जिन पचास पिक्सल छोड़ दिया है।
तो यह है कि हम भविष्य के वीडियो में से कुछ हम इस जोड़ने जब में आ रहे हैं के एक छोटे पूर्वावलोकन है और यह चेकबॉक्स के बाईं ओर कुछ जगह जोड़ें ताकि आप लोगों पर ले जाया जाँच कर रहे हैं देख सकते हैं कि क्या हो रहा है।
अब अगर मैं इस एक जांच अब इस जाँच की है और यह सही 50 पिक्सल खत्म करने के लिए ले जाता है।
अगर मैं उन्हें अचयनित और लेफ्ट बैक खत्म करने के लिए कदम।
तो यह है कि जाँच की है।
अगला।
यह शायद मेरी पसंदीदा है।
एचएमओ को बदलने के बिना लेबल तत्वों सभी अपरकेस बनाओ।
तो मैंने उल्लेख आप निश्चित रूप से उस एक को देखना चाहता हूँ और कारण है कि हम निश्चित रूप से इस पर नहीं गए हैं।
तो चलो बस सब लेबल तत्वों का चयन करें और फिर हम कहते हैं कि मैं नहीं जानता कि कैसे उन्हें एचएमओ को बदलने के बिना अपरकेस बनाने के लिए चलो शुरू करने के लिए।
तो चलो गूगल को खींचने के लिए और एक खोज करते हैं और यह कुछ है कि मैं निश्चित रूप से पहले किया था।
तो चलो ऊपर जाना और एक खोज को देखने के ऊपरी मामले में आप पहली बात यह है कि पाठ बदलना है और पाठ को बदलने के लिए यह यह निर्दिष्ट तत्वों पाठ में भुनाने के लिए कैसे का कहना है कि ऊपर चबूतरे देख सकते हैं का आकलन करते हैं।
यह पाठ ऊपरी मामले या सभी लोअरकेस में या प्रत्येक शब्द को कैपिटल के साथ प्रदर्शित करने के लिए इस्तेमाल किया जा सकता है।
तो फिर हम नीचे स्क्रॉल और वाक्य रचना पर एक नज़र रखना और जैसे हम भुनाने है यह लग रहा है।
विल पूंजीवादी के पहले अक्षर ऊपरी मामले और कम मामले।
इसलिए हम अपरकेस चाहते हैं।
तो पाठ अपरकेस बदलना।
और सिर्फ आप कुछ दिखाने के लिए क्या मैं बस किया था वहाँ नहीं था कि यह वास्तव में कुछ है कि मैं हर समय जो बातें लिखकर गूगल के लिए जा रहा है देख रहा है क्या करना है सी एस एस ब्ला ब्ला ब्ला CSSA ऊपरी मामले सी एस एस पारदर्शी जो कुछ मैं करने के लिए देख रहा हूँ।
और मैं सिर्फ खोज परिणामों पर लग रही है क्योंकि वहाँ बहुत सारे गुण याद करने के लिए कर रहे हैं।
आप उन सभी को याद नहीं कर सकते।
तो यह और अधिक अस्पष्ट लोगों में से एक है।
निश्चित रूप से।
और अगर हम इस ताज़ा लेबल जो यहाँ नीचे कर रहे हैं के लिए है।
तो मुझे बस बस तुम हमारे समय दिखाने के लिए उस से छुटकारा मिलता है।
इन लेबलों हैं।
और फिर हम में इस जोड़ सकते हैं और ताज़ा उनके ऊपरी मामलों।
तो अगली अप हम आईडी विशेष हरी और 100 पिक्सेल फ़ॉन्ट आकार के साथ तत्व के पहले अक्षर बना दिया है।
तो पहले अक्षर एक और एक है कि हम SEUS हमें पहले अक्षर देख सकते हैं और देखते हैं कि हम क्या करना चाहते हो सकता है कि लक्ष्य के लिए।
तो ऐसा लगता है एक और छद्म चयनकर्ता वहाँ की तरह।
पहले अक्षर सी एस एस तत्व एक ब्लॉक की पहली पंक्ति के पहले अक्षर का चयन करता है।
तो अगर आप एक एक उदाहरण के पहले अक्षर को देखो ले।
आगे बढ़ते हैं और कि कोशिश करते हैं।
हम पहले आईडी विशेष और तब पहली बार है कि के पत्र का चयन करना चाहते हैं।
और हम इसे हरी बनाना चाहते हैं और फ़ॉन्ट आकार तो रंग हरे रंग और फ़ॉन्ट आकार में 100 पिक्सल 100 पिक्सल बचाने के लिए और उस तत्व यहीं है।
तो पहले अक्षर हम ताज़ा पर नजर रखने के लिए और हम इस विशाल हरे आंख मिलता है।
अगले एक पर hovered जब एच 1 तत्वों रंग नीले रंग के लिए बदल सकते हैं।
तो यह एक प्रभाव के कुछ प्रकार है वास्तव में बहुत आम है।
आप कुछ पर ले जाएं, जब आम तौर पर यह बहुत सूक्ष्म हो सकता है एक बटन है और आप इसे पर जाएँ और वहाँ एक छोटा सा छाया प्रतीत होता है कि आप की तरह 3-डी परिप्रेक्ष्य में किसी प्रकार का कुछ पता है तुम सिर्फ एक छोटे देने के लिए बहुत थोड़ा रंग परिवर्तन देखने के लिए कि बिना अन्तरक्रियाशीलता का सा ध्यान भंग विचलित हुए।
इसलिए हम एच-1 चयन करने के लिए जा रहे हैं और यह वास्तव में सब एक से एक है।
लेकिन इस मामले में यह केवल एक ही है और छद्म चयनकर्ता मंडराना है और जो कुछ भी हम यहाँ में डाल एक उपयोगकर्ता तत्व पर घूमता है जब केवल लागू किया जाता है।
इसलिए रंग नीला हम बचा।
यहाँ हमारे एच-1 है।
और अगर मैं उड़ना नीला पड़ जाता है जब मैं मँडरा यह जो कुछ भी यह पहले था वापस चला जाता है बंद करो।
तो आखिर तत्वों है कि ग्रे दौरा किया गया है बनाने के लिए और के रूप में वह दो तत्वों इन दो लिंक वास्तव में फेसबुक के लिए दोनों लिंक जो लिंक है कि मैं पहले का दौरा किया है देख सकते हैं।
यही वजह है कि वे डिफ़ॉल्ट रूप से बैंगनी क्रोम सभी का दौरा बैंगनी सोचता है कि कर देगा रहे हैं।
तो चलो से पहले करने के लिए एक कड़ी है कि मैं निश्चित रूप से नहीं किया गया है डाल दिया है और यह सिर्फ शुरू करने के लिए कुछ भी बना जा रहा है और मैं आप पृष्ठ ताज़ा दिखाता हूँ।
अब यह नीले रंग की है।
क्योंकि मैं वहाँ नहीं किया गया है।
तो चलो इसे अब मैं इसे क्लिक करने के लिए नहीं जा रहा हूँ के लिए उस तरह छोड़ दें।
और हम का दौरा किया लोगों के बजाय बैंगनी होना चाहते हैं।
मैं माफी चाहता हूँ हम चाहते हैं एक बार ग्रे बजाय बैंगनी होने का दौरा किया।
तो हम एक टैग छद्म चयनकर्ताओं का दौरा किया बुलाया चयन करें और फिर हम यह ग्रे बचाने के लिए जा रहे हैं।
और अगर हम ताज़ा करें।
इस एक यहाँ पर अपनी नजर रखें।
मैं फ़ॉन्ट एक छोटे से बड़ा बना देंगे।
यह वर्तमान में बैंगनी है, क्योंकि मैं वहाँ गया है इससे पहले कि मैं ताज़ा करें।
अब यह बहुत अच्छी बात है।
ठीक है तो उम्मीद है कि आप कि व्यायाम का आनंद लिया।
वहाँ वहाँ से खोल करने के लिए बहुत कुछ है।
विभिन्न चयनकर्ताओं का एक बहुत।
और एक बात मैं जोड़ देंगे कि मैं यह है कि हर समाधान या लगभग हर एक के लिए वहाँ सटीक एक ही परिणाम प्राप्त करने के लिए कम से कम एक या दो अधिक तरीकों से हो रहा है।
तो अगर आप कुछ है जो मुझे से मतभेद था, लेकिन यह अभी भी काम किया है कि बहुत अच्छा है।
टिप्पणी में जोड़ने के लिए स्वतंत्र महसूस हो रहा है।
अन्य लोगों के साथ साझा।
यह पूरी तरह से वैध है।
यह सिर्फ तरीका है कि मैं यह किया होता है।
एक दूसरी बात है।
जाहिर साइट विशेष रूप से आकर्षक नहीं है।
यह एक वास्तविक साइट नहीं है।
हम अगले व्यायाम वीडियो में बहुत जल्दी ही एक वास्तविक परियोजना पर काम किया जाएगा।
हम वास्तव में एक छोटे से ब्लॉग साइट है कि थोड़ा बेहतर डिजाइन बनाने के लिए जा रहे हैं।
यह इस से भी ज्यादा अच्छा लग रहा है।
यह महज एक अभ्यास व्यायाम है।