Wednesday, 7 June 2017

CSS में code कैसे लिखें? Selectors क्या होते हैं?

आपने इससे  पहले CSS का Introduction पढा होगा, आप जान गये होंगे की CSS सीखना क्यों important है, इसके क्या फ़ायदे हैं, यह HTML से कैसे अलग है और इसे HTML page में कैसे link किया जाता है। अगर आपने पिछला पोस्ट नही पढा है तो आगे बढने से पहले जल्दी वहां से हो आईये।
CSS Selectors in Hindi -webinhindi.com
इस post में हम CSS में coding करना start करेंगे और जानेंगे की CSS code का Syntax कैसा होता है? और CSS selectors क्या हैं और कितने प्रकार के होते हैं?

CSS code का Syntax:

चलिये अब जानते हैं कि CSS में कोड लिखने का तरीका क्या होता है, इसका basic syntax यानि कोड का बेसिक structure कैसे होता है।
CSS में coding करना HTML से बिलकुल अलग होता है लेकिन यह उससे भी ज्यादा आसान होता है।
 
CSS rule हमेशा selector से start होता है जोकि बताता है कि हम किस html element में rule apply करेंगे। ऊपर image में उदाहरण दिया गया है जिसमें हम <body> element में कुछ rule apply कर रहें हैं। Selector के बाद curly braces में हम property set करते हैं जो कि <body> element के presentation को change कर देगी।

CSS syntax के 3 parts होते हैं:

selector { property: value}

1. Selector: यह HTML का element होता है जिस पर हमें style apply करना होता है। आप ऊपर चित्र में example देख सकते हैं, हमने html के body tag को selector की तरह लिया है क्योंकि हमें body की background color change करनी है।
2. Property: हम selector पर कौन सा rule apply करना चाहते हैं ये हम property से बताते हैं। हमको body की बैकग्राउंड कलर blue करनी है, तो हमनें उदाहरण में background-color को as a property use किया है।
3. Value: इसमें हम property की value क्या होगी ये बताते हैं, उदाहरण में हमनें background-color property की value blue ली है।

Selector के types:

इसके कई सारे प्रकार हैं तो चलिये जानते हैं कौन सा selector किस काम आता है:

1. Universal selector:

जब हमें page के सारे elements में एक जैसा rule apply करना होता है तब हम इस selector का use करते हैं, इससे HTML page के सारे tags एक साथ select हो जाते हैं। इसके लिये हम * symbol का उपयोग करते हैं। नीचे आप example देख सकते हैं:

2. Tag selector:

इसे element type selector भी कहते हैं, इससे हम पेज के किसी भी HTML tag को select करके उसमें style apply कर सकते हैं। इसमें हम selector की जगह उस tag का नाम लिख देते हैं जिसकी design हमको change करनी है।


3. Class selector:

यह सबसे ज्यादा use होने वाला selector है, मान के चलिये हमें कोई collection of properties बार-बार उपयोग करने की जरूरत पडती है तो हम एक class बना कर उन सारे rules को उसके अंदर define कर देते हैं, फ़िर जिस tag में हमें ये rules set करने होते हैं हम उस tag में इस class को call कर लेते हैं।

इसे define करने के लिये .(dot) symbol use करते हैं। एक class को हम जितने tags में चाहें call कर सकते हैं।

अभी भी confused हैं?
तो चलिये इसे एक उदाहरण के साथ समझते हैं: मान के चलिये हमारे पास एक पेज में 3 paragraphs हैं यानि की <p> tags, हम चाहते हैं कि इन तीनो paragraphs की color अलग-अलग हों पहले की red, दूसरे की blue, और तीसरे की green, तो इस स्थिति में हम तीन अलग-अलग class बनायेंगे जिसको हम नाम देंगे red_para, blue_para, और green_para, इन तीनो class में color वाली property define कर देते हैं, अब तीनो <p> tags में एक-एक class को call कर लेते हैं।


Example:

4. ID Selector:

यह class की तरह ही होता है इसमे बस इतना difference होता है कि हम इसे define करते समय # (hash) character का use करते हैं, call करते समय tag में id attribute use करते हैं और एक ID selector को हम सिर्फ़ एक element के लिये ही use कर सकते हैं। सारे ID unique tag पर ही apply होते हैं। इसका उपयोग ज्यादतर layout बनाते समय किया जाता है।

Example:

5. Descendant Selector:

इसका उपयोग हम तब करते हैं जब ऐसे element में style apply करना होता है जो किसी दूसरे element के अंदर हो। उदाहरण देखें:
Example:

6. Adjacent sibling selector:

जब किसी एक specific element के just बाद आने वाले दूसरे element में CSS rule डालना हो तो Adjacent sibling selector की आवश्यकता पडती है।

उदाहरण में देखें, हमने selector में p+p लिया है जिसका मतलब है p element के just बाद आने वाला <p> tag, यह code second और third वाले <p> पर काम करेगा first वाले में यह set नही होगा।


7. Child Selectors:

यह Descendant Selector की तरह ही है लेकिन यह किसी element के child को ही target करता है। इसमें हम greater than symbol (>) का उपयोग करते हैं, example देखें: यहां हमने div>b लिया है मतलब target element है <div> का child <b>, यहां ध्यान देने वाली बात यह है कि हमारे पास दो <b> हैं लेकिन style सिर्फ़ first वाले में ही सेट होगा क्योंकि दूसरा वाला <b> div का नही बल्कि p का child है।

8. Attribute Selector

अब तक हम किसी HTML tag को selector बनाते थे लेकिन Attribute Selector से हम कि tag के attribute को भी select कर सकते हैं। इसे square brackets से declare किया जाता है। आप example में देख सकते हैं हमने अलग अलग attribute में अलग-अलग style apply किया है|




अगर आपको css selectors से जुड़े कुछ सवाल पूछना है या इस पोस्ट के बारे में कुछ कहना चाहते हैं तो आप कमेंट बॉक्स के माध्यम से कह सकते हैं |

नमस्कार, मैं विवेक, WebInHindi का founder हूँ| यह एक मात्र blog है जहाँ से आप web design & development के tutorials हिंदी में प्राप्त कर सकते हैं| अगर आपको हमारा यह ब्लॉग पसंद आये तो आप हमें social media पर follow कर हमारा सहयोग कर सकते हैं|

इस Post से सम्बंधित किसी भी तरह का प्रश्न पूछने या सुझाव देने के लिए नीचे comment कीजिये.
EmoticonEmoticon