सीएसएस चयनकर्ता। चयनकर्ताओं के प्रकार

, जिनमें से प्रत्येक आप एक विशिष्ट रंग सेट करना चाहते हैं। यह कैसे करना है? स्टैंडर्ड CSS चयनकर्ताओं, टैग के लिए उपयुक्त नहीं हैं वे एक ही बार में सभी ब्लॉकों के लिए मानकों का संकेत मिलता है। समाधान सरल है। वर्ग के सदस्यों असाइन करें। वर्ग = 'ब्लू', तीसरे - - वर्ग = 'हरित' उदाहरण के लिए, पहले 'लाल', दूसरी div class प्राप्त =। अब वे सीएसएस तालिकाओं का उपयोग चुना जा सकता है।

वाक्य रचना इस प्रकार है: एक बिंदु ( "।"), क्लास का नाम लिख कर बाद इंगित करता है। पहली इकाई का प्रबंधन करने के लिए, निर्माण .red का उपयोग करें। दूसरा - .blue और इतने पर।

महत्वपूर्ण! यह वर्ग विशेषता के सार्थक मूल्यों का उपयोग करने के लिए सिफारिश की है। यह लिप्यंतरण (जैसे, krasiviy-ब्लोक) या पत्र / संख्या के यादृच्छिक संयोजन (ojfh834871) का उपयोग करने बुरा रूप माना जाता है। इस कोड में, आप उलझन में प्राप्त करने के लिए, कठिनाइयों है कि जो लोग आप के बाद परियोजना में लगे हुए किया जाएगा का सामना करना पड़ेगा उल्लेख करने के लिए नहीं बंधे हैं। सबसे अच्छा विकल्प - जैसे कार्यलय रूप में किसी भी पद्धति का उपयोग करने के लिए,।

लाभ - अपेक्षाकृत अधिक लचीलापन।

नुकसान - एक से अधिक तत्वों एक और एक ही वर्ग है, जिसका अर्थ है कि वे एक साथ संपादित किया जाएगा हो सकता है। समस्या कार्यप्रणाली के साथ-साथ preprocessors की विरासत का उपयोग कर हल किया जाता है। अपने हाथों को कम, सास या कुछ अन्य पूर्वप्रक्रमक पाने के लिए सुनिश्चित करें, वे बहुत काम को आसान बनाने में।

आईडी चयनकर्ता

इस संस्करण के बारे में राय कोडर तथा प्रोग्रामर अस्पष्ट हैं। CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. क्योंकि गलत आवेदन में वे विरासत के साथ समस्या पैदा कर सकते कुछ सीएसएस ट्यूटोरियल, आईडी के उपयोग की सलाह नहीं है। हालांकि, कई विशेषज्ञों को सक्रिय रूप से कर रहे हैं लेआउट भर उन्हें व्यवस्था। आप तय करें। # »), затем имя блока. पाउंड चिह्न ( "#"), तो ब्लॉक का नाम: वाक्य रचना इस प्रकार है। #red. उदाहरण के लिए, #red।

отличается от класса по нескольким параметрам. आईडी कई मायनों में वर्ग से अलग है। ID. सबसे पहले, पेज दो समान आईडी नहीं हो सकता। वे एक अद्वितीय नाम आवंटित कर रहे हैं। दूसरे, इस तरह के एक चयनकर्ता एक उच्च प्राथमिकता है। red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. इसका मतलब यह है कि यदि आप एक इकाई वर्ग लाल निर्दिष्ट और सीएसएस तालिकाओं में लाल निर्दिष्ट पृष्ठभूमि रंग, और फिर इसे करने के लिए एक ही आईडी नीले आवंटित और रंग नीला निर्दिष्ट करते हैं, यूनिट नीला हो जाएगा।

लाभ - आप विशिष्ट तत्व नियंत्रित कर सकते हैं, टैग और वर्गों की शैलियों अनदेखी।

ID и class. नुकसान - आसान आईडी और वर्ग की एक बड़ी संख्या में खो जाना।

महत्वपूर्ण! ID вам, в общем-то, не нужны. आप आप के लिए कार्यलय कार्यप्रणाली (या उसके अनुरूप), आईडी का उपयोग कर रहे हैं, तो सामान्य रूप में, आवश्यक नहीं हैं। इस तकनीक को लेआउट अद्वितीय वर्गों है कि अधिक सुविधाजनक का उपयोग शामिल है।

सार्वभौमिक चयनकर्ता

{}. सिंटेक्स: तारिकाओं चिह्न ( "*") और ब्रेसिज़, यानी, {*} ...

कुछ विशेषताओं को एक बार पेज के सभी तत्वों को आवंटित करने के लिए प्रयोग किया जाता है। जब यह उपयोगी हो सकता है? box-sizing: border-box. उदाहरण के लिए, आप पेज संपत्ति बॉक्स आकार सेट करना चाहते हैं: सीमा-बॉक्स। div *{}. केवल दस्तावेज़ के सभी घटकों, प्रबंधन करने के लिए भी निर्दिष्ट ब्लॉक के सभी बच्चों, उदाहरण के लिए नियंत्रित करने के लिए इस्तेमाल नहीं किया जा सकता है, लेकिन, div * {}।

लाभ - आप एक बार में एक आइटम की एक बड़ी संख्या को नियंत्रित कर सकते हैं।

विपक्ष - पर्याप्त नहीं लचीला विकल्प। इसके अलावा, इस चयनकर्ता के उपयोग, कुछ मामलों में नीचे पेज काम धीमी गति से।

विशेषताओं के आधार पर

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

इनपुट [प्रकार = 'पाठ'] {}

इस चयनकर्ता इनपुट पाठ के प्रकार के साथ सभी विशेषताओं का चयन करेंगे।

उपकरण काफी लचीला है और टैग, जिसमें गुण हो सकता है की किसी के साथ इस्तेमाल किया जा सकता। लेकिन यही सब कुछ नहीं है! सीएसएस विनिर्देश और भी अधिक सुविधा के साथ तत्वों को नियंत्रित करने की क्षमता है!

कल्पना कीजिए कि आपके पेज विशेषता प्लेस होल्डर से इनपुट है कि = "एक नाम दर्ज करें" और इनपुट प्लेसहोल्डर = "पासवर्ड दर्ज करें"। उन्होंने यह भी चयनकर्ता का उपयोग करके चुना जा सकता है! ऐसा करने के लिए, निम्नलिखित संरचना का उपयोग करें:

इनपुट [प्लेसहोल्डर = "नाम दर्ज करें"] {} या इनपुट [प्लेसहोल्डर = "पासवर्ड दर्ज करें"]

शायद विशेषताओं के साथ और अधिक लचीला काम करते हैं। मान लीजिए कि आप समान गुण शीर्षक (उदाहरण के लिए, "कैस्पियन" और "कैस्पियन") के साथ टैग की एक संख्या है करते हैं। दोनों का चयन करने के लिए, निम्न चयन का उपयोग करें:

[शीर्षक * = "Kaspiysk में"]

सीएसएस शीर्षक में सभी आइटम जिनमें से "कैस्पियन", यानी ई।, और "कैस्पियन" और "कैस्पियन" का प्रतीक हैं का चयन करेंगे।

तुम भी टैग कि एक निश्चित चरित्र के साथ जिम्मेदार बताते हैं शुरू कर सकते हैं:

[शीर्षक ^ = "चरित्र आप चाहते हैं"] {}

या उन्हें समाप्त:

[शीर्षक $ = "सही चरित्र"] {}।

लाभ - अधिकतम लचीलापन। आप वर्गों के साथ खिलवाड़ के बिना किसी भी मौजूदा पृष्ठ तत्वों का चयन कर सकते हैं।

नुकसान - केवल विशिष्ट मामलों में अपेक्षाकृत शायद ही कभी इस्तेमाल,। कई वेब डिजाइनर, कार्यप्रणाली करना पसंद करते हैं क्योंकि बिंदु वर्ग आसान कई व्यवस्था करने के लिए की तुलना में है वर्ग कोष्ठक और संकेत "बराबर"। इसके अलावा, इन चयनकर्ताओं इंटरनेट एक्सप्लोरर संस्करण 7 और नीचे में काम नहीं करते। हालांकि, जो अब पुराने इंटरनेट एक्सप्लोरर की जरूरत है कर रहे हैं?

छद्म वर्ग चयनकर्ताओं

एक छद्म स्थिति तत्व को दर्शाता है। उदाहरण ,: मंडराना के लिए - क्या पृष्ठ के भाग के लिए होता है जब आप मंडराना ,: का दौरा किया - का दौरा किया लिंक। पहले बच्चे और: पिछले वाले बच्चे यह भी इस तरह के रूप तत्व शामिल हैं।

चयनकर्ता इस प्रकार का सक्रिय रूप से, क्योंकि यह करने के लिए धन्यवाद आप जावास्क्रिप्ट के उपयोग के बिना एक पेज "लाइव" कर सकते हैं, आधुनिक लेआउट में प्रयोग किया जाता है। उदाहरण के लिए, आप है कि जब आप की btn उसका रंग बदल वर्ग के साथ बटन पर होवर सुनिश्चित करना चाहते हैं। ऐसा करने के लिए, हम निम्नलिखित संरचना का उपयोग करें:

.btn: मंडराना {

पृष्ठभूमि का रंग: लाल;

}

ब्यूटी बटन, संक्रमण संपत्ति के मूल गुण में निर्दिष्ट किया जा सकता है, उदाहरण के लिए, 0.5s - इस मामले में, बटन तुरंत लज्जित नहीं होगा, और आधे सेकंड के भीतर।

गुण - व्यापक रूप से पृष्ठों की "पुनरुद्धार" के लिए इस्तेमाल कर रहे हैं। उपयोग में आसान।

नुकसान - वे नहीं हैं। यह एक बहुत आसान उपकरण है। हालांकि, अनुभवहीन वेब डिजाइनर छद्म वर्गों में से बहुतायत में खो सकता है। समस्या अध्ययन और अभ्यास हल किया जाता है।

छद्म चयनकर्ताओं

"छद्म" - इन पेज है कि HTML में नहीं हैं के हिस्से हैं, लेकिन वे अभी भी नियंत्रित किया जा सकता। आप समझ में नहीं आया? यह बहुत आसान है की तुलना में यह लगता है है। उदाहरण के लिए, आप स्ट्रिंग के पहले अक्षर को बड़ा और लाल बनाने के लिए, अन्य छोटे और काले पाठ छोड़ने चाहते हैं। बेशक, यह एक निश्चित वर्ग के साथ अंतराल में है कि पत्र निष्कर्ष निकाला जा सकता है, लेकिन यह लंबा और उबाऊ है। यह पूरा पैरा का चयन करें और छद्म :: पहले अक्षर का उपयोग करने के बहुत आसान है। यह पहले अक्षर की उपस्थिति को नियंत्रित करने के अवसर देता है।

काफी छद्म तत्वों की एक बड़ी संख्या में हैं। उन्हें एक ही लेख में सूची सफल होने की संभावना नहीं है। आप अपने पसंदीदा खोज इंजन में प्रासंगिक जानकारी प्राप्त कर सकते हैं।

लाभ - पृष्ठ का रूप अनुकूलित करने के लिए लचीलापन प्रदान करते हैं।

नुकसान - उन्हें नई अक्सर उलझन में है। यह केवल कुछ ब्राउज़रों में काम के इस प्रकार से कई चयन।

संक्षेप में

चयनकर्ता - दस्तावेज़ प्रवाह नियंत्रण के लिए एक शक्तिशाली उपकरण। उसे करने के लिए धन्यवाद, आप पेज की हर एक घटक चयन कर सकते हैं (वहाँ भी केवल आंशिक रूप से कर रहे हैं)। उपलब्ध सभी विकल्पों को जानने के लिए, या भी उन्हें लिख सुनिश्चित करें। यह विशेष रूप से महत्वपूर्ण यदि आप एक आधुनिक डिजाइन के साथ जटिल पृष्ठों और इंटरैक्टिव तत्वों के बहुत सारे पैदा करते हैं।