कम्प्युटरकार्यक्रम

CSS चयनकर्ताहरूमा। चयनकर्ताहरूमा को प्रकार

सीएसएस कागजातको उपस्थिति वर्णन लागि भाषा निरन्तर विकसित छ। समय, मात्र होइन शक्ति र कार्यक्षमता वृद्धि पनि प्रयोग को लचीलापन र सजिलो बढ्छ।

CSS चयनकर्ताहरूमा

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

  • ट्याग गर्न;
  • कक्षाहरू लागि;
  • ID को लागि;
  • विश्वव्यापी;
  • विशेषताहरू;
  • छद्म-कक्षाहरू संग प्रतिक्रिया गर्न;
  • को छद्म नियन्त्रण गर्न।

विन्यास सरल छ। कसरी प्रयोग गर्ने सिक्न , CSS चयनकर्ताहरूमा तिनीहरूलाई बारेमा पर्याप्त पढ्नुहोस्। कुन विकल्प तपाईंको मामला मा सामग्रीको नियन्त्रण लागि सबै भन्दा राम्रो छ? बुझ्न प्रयास गर्नुहोस्।

चयनकर्ताहरूमा ट्याग

यो लेख्न विशेष ज्ञान आवश्यक गर्दैन सबैभन्दा सरल संस्करण छ। ट्याग प्रबन्ध गर्न, तपाईं आफ्नो नाम प्रयोग गर्न आवश्यक छ। को "टोपी" आफ्नो साइट ट्याग <हेडर> मा र्याप छ मानौं। यो CSS मा नियन्त्रण गर्न तपाईं हेडर {} चयन प्रयोग गर्न आवश्यक छ।

लाभ - प्रयोग मा सजिलो, बहुमुखी प्रतिभा।

बेफाइदा - लचीलापन पूर्ण अभाव। उदाहरण मा माथि एक पटक सबै ट्याग हेडर चयन गरिनेछ। तर तपाईं के एउटा मात्र व्यवस्थापन गर्न आवश्यक छ भने?

वर्ग चयनकर्ताहरूमा

सबै भन्दा साधारण भेद। विशेषता वर्ग संग ट्यागहरू व्यवस्थापन गर्न डिजाइन। मानौं, तपाईंको कोड, त्यहाँ तीन ब्लक छन्

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

निम्नानुसार विन्यास छ: कक्षा को नाम लेखेर पछि एक बिन्दु ( "।"), इङ्गित गर्दछ। पहिलो एकाइ प्रबन्ध गर्न, .रातो निर्माण प्रयोग गर्नुहोस्। दोस्रो - .blue र यति मा।

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

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

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

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

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

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

लाभ - तपाईं ट्याग र वर्गहरू को शैलीहरू बेवास्ता, विशिष्ट तत्व नियन्त्रण गर्न सक्नुहुन्छ।

ID и class. बेफाइदा - सजिलो आईडी वर्ग को एक ठूलो संख्या हराएको गर्न।

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

विश्वव्यापी चयन

{}. विन्यास: starlets साइन ( "*") र ब्रेसहरू, अर्थात्, {*} ...

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

लाभ - तपाईं एक समय मा आइटम को एक ठूलो संख्या नियन्त्रण गर्न सक्नुहुन्छ।

विपक्ष - पर्याप्त छैन लचिलो विकल्प। साथै, यो चयनकर्ता को प्रयोग, केही अवस्थामा सुस्त पृष्ठ काम।

विशेषताहरु द्वारा

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

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

यो चयन इनपुट पाठ को प्रकार सबै विशेषताहरु चयन गर्नेछ।

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

"एउटा नाम प्रविष्ट गर्नुहोस्" र इनपुट प्लेसहोल्डर = "पासवर्ड प्रविष्ट गर्नुहोस्" आफ्नो पृष्ठ विशेषता प्लेसहोल्डर संग इनपुट छ कल्पना =। तिनीहरूले पनि चयन प्रयोग चयन गर्न सक्नुहुन्छ! यो गर्न, निम्न संरचना प्रयोग:

इनपुट [प्लेसहोल्डर = "नाम प्रविष्ट गर्नुहोस्"] {} वा इनपुट [प्लेसहोल्डर = "पासवर्ड प्रविष्ट गर्नुहोस्"]

विशेषताहरु संग अझ लचिलो काम। तपाईँलाई पनि त्यस्तै विशेषताहरु शीर्षक (उदाहरणका लागि, "कैस्पियन" र "कैस्पियन") संग ट्याग नम्बर भन्न गरौं। दुवै चयन गर्न, निम्न चयनहरू प्रयोग:

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

CSS जो त्यहाँ "कैस्पियन", अर्थात्। ई, अनि "कैस्पियन" र "कैस्पियन" को प्रतीक हो शीर्षक सबै वस्तुहरू चयन गर्नेछ।

तपाईं पनि एक निश्चित वर्ण विशेषताहरू सुरु कि ट्याग चयन गर्न सक्नुहुन्छ:

[शीर्षक ^ = "वर्ण तपाईं चाहनुहुन्छ"] {}

वा तिनीहरूलाई समाप्त:

[शीर्षक $ = "सही वर्ण"] {}।

लाभ - अधिकतम लचीलापन। तपाईं कक्षाहरू संग खिलवाड बिना कुनै पनि अवस्थित पृष्ठ तत्व चयन गर्न सक्नुहुन्छ।

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

छद्म-वर्ग चयनकर्ताहरूमा

एक छद्म-स्थिति तत्व सङ्केत गर्छ। उदाहरणका ,: माथी को लागि - भ्रमण लिंक - पृष्ठ को भाग जे जब तपाईं hover ,: भ्रमण गर्नुभएको थियो। पहिलो-बच्चा र: अन्तिम बच्चा पनि जस्तै तत्व सामेल छन्।

चयनकर्ता यस प्रकारको सक्रिय किनभने यो धन्यवाद तपाईं JavaScript को प्रयोग बिना "प्रत्यक्ष" पृष्ठ बनाउन सक्छ, आधुनिक लेआउट मा प्रयोग गरिन्छ। उदाहरणका लागि, तपाईंले आफ्नो रंग परिवर्तन बटन को वर्ग संग बटन होभर जब कि निश्चित गर्न चाहन्छु। यो गर्न, हामीले निम्न संरचना प्रयोग:

.btn: माथी {

पृष्ठभूमि रंग: रातो;

}

यस मामला मा, बटन तत्काल शरमाना छैन, र आधा दोस्रो भित्र - सौन्दर्य उदाहरणका लागि, 0.5s, बटन, संक्रमण सम्पत्ति को आधारभूत गुणहरू निर्दिष्ट गर्न सक्नुहुन्छ।

सद्गुण - व्यापक पृष्ठ को "पुनरुद्धार" को लागि प्रयोग गरिन्छ। प्रयोग गर्न सजिलो।

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

छद्म-चयनकर्ताहरूमा

"छद्म" - यी HTML मा छन् कि पृष्ठ को भागहरु छन्, तर तिनीहरू अझै पनि व्यवस्थित गर्न सकिन्छ। तपाईं बुझेनन्? यो भन्दा यो देखिन्छ धेरै सजिलो छ। उदाहरणका लागि, तपाईं अन्य साना र कालो पाठ छोडेर स्ट्रिङ मा पहिलो अक्षर ठूलो र रातो बनाउन चाहन्छु। निस्सन्देह, यो एक निश्चित वर्ग संग एक span कि पत्रको अन्तमा गर्न सकिन्छ, तर यो लामो र बोरिंग छ। यो सम्पूर्ण अनुच्छेद चयन गर्नुहोस् र छद्म :: पहिलो-पत्र प्रयोग गर्न धेरै सजिलो छ। यो पहिलो पत्र को उपस्थिति नियन्त्रण गर्न मौका दिनुहुन्छ।

त्यहाँ छद्म-तत्व को एकदम ठूलो संख्या हो। एकल लेखमा तिनीहरूलाई सूची सफल असम्भाव्य छ। तपाईं आफ्नो मनपर्ने खोज इन्जिन मा सान्दर्भिक जानकारी पाउन सक्नुहुन्छ।

लाभ - पृष्ठ को अनुकूलित गर्न लचीलापन प्रदान गर्नुहोस्।

बेफाइदा - तिनीहरूलाई नयाँ अक्सर भ्रमित छन्। मात्र केही ब्राउजर मा काम को यस प्रकार को धेरै चयनहरू।

सारांशमा गर्न

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

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 ne.delachieve.com. Theme powered by WordPress.