CSS (कैस्केडिंग स्टाइल शीट्स), या कैस्केडिंग स्टाइल शीट्सएक मार्कअप भाषा में लिखे गए वेब दस्तावेज़ की उपस्थिति का वर्णन करने के लिए उपयोग किया जाता है। CSS स्टाइल नियम सेट करता है जो बदलते हैं दिखावटवेब पेजों पर रखे गए तत्व अपने विवरण, जैसे रंग, फ़ॉन्ट, आकार, बॉर्डर, पृष्ठभूमि और दस्तावेज़ में स्थान को ठीक करते हैं।

आप CSS को एक विशेषता मान के रूप में सीधे मार्कअप तत्व में इनलाइन कर सकते हैं अंदाज... यह विशेषता सभी HTML तत्वों के लिए उपलब्ध है। साथ सीएसएस का उपयोग करनाआप किसी दिए गए HTML तत्व के लिए कई शैली गुण निर्दिष्ट कर सकते हैं। प्रत्येक संपत्ति का एक नाम और मूल्य होता है, जिसे एक कोलन (:) द्वारा अलग किया जाता है। प्रत्येक घोषित संपत्ति को अर्धविराम (;) द्वारा अलग किया जाता है।

यह एक तत्व की तलाश में कैसा दिखता है

सीएसएस शैलियों को जोड़ने के तरीके

CSS मानक वेब पेज पर स्टाइल शीट लागू करने के लिए तीन विकल्प प्रदान करता है:

• बाहरी स्टाइल शीट - एक अलग .css फ़ाइल में स्टाइल शीट नियमों को परिभाषित करना, और फिर इस फ़ाइल को एक टैग का उपयोग करके एक HTML दस्तावेज़ में शामिल करना
• आंतरिक स्टाइल शीट - टैग का उपयोग करके स्टाइल शीट नियमों को परिभाषित करें

  उदाहरण: आंतरिक स्टाइल शीट

  • खुद कोशिश करना "

  शीर्षक

  पहला पाठ

  दूसरा पाठ

  तीसरा पाठ

  शीर्षक

  पहला पाठ

  दूसरा पाठ

  तीसरा पाठ

  
  
  

  वी यह उदाहरणहम CSS का उपयोग करके तत्व की पृष्ठभूमि का रंग निर्धारित करते हैं : पृष्ठभूमि-रंग: पीला हरा, शीर्षकों के लिए रंग और फ़ॉन्ट प्रकार

  : रंग नीला; फ़ॉन्ट-परिवार: Verdanaसाथ ही पैराग्राफ के लिए फ़ॉन्ट आकार, रंग और केंद्र संरेखण

  : फ़ॉन्ट-आकार: 20px; लाल रंग; पाठ-संरेखण: केंद्र.

  इनलाइन शैली

  जब किसी HTML पृष्ठ के एकल तत्व को प्रारूपित करना आवश्यक हो, तो शैली विवरण को पहले से ही विशिष्ट शैली विशेषता का उपयोग करके सीधे शुरुआती टैग के अंदर रखा जा सकता है। उदाहरण के लिए:

  अनुच्छेद

  ऐसी शैलियों को इनलाइन या इनलाइन शैली कहा जाता है। तत्व के उद्घाटन टैग के अंदर सीधे परिभाषित नियम बाहरी सीएसएस फ़ाइल में परिभाषित नियमों के साथ-साथ तत्व में परिभाषित नियमों को ओवरराइड करते हैं

  शीर्षक

  पहला पाठ

  दूसरा पाठ

  तीसरा पाठ

  
  
  

  कार्य

  • मध्य संरेखित पाठ

    इनलाइन पैराग्राफ़ शैली का उपयोग करके टेक्स्ट को केंद्र में रखें।

  CSS कैस्केडिंग स्टाइल शीट्स के लिए है, जिसका अर्थ है कैस्केडिंग स्टाइल शीट्स। वेब पेजों को सजाने के लिए उपयोग किया जाता है। यदि HTML में सामग्री है (ब्राउज़र क्या दिखाएगा), तो सीएसएस इसकी उपस्थिति निर्धारित करता है (ब्राउज़र इसे कैसे दिखाएगा)। CSS की खूबी यह है कि एक स्टाइल की मदद से आप एक ही पेज या पूरी साइट के सभी एक जैसे एलिमेंट (सभी लिंक, पैराग्राफ, लिस्ट एक ही बार में) डिजाइन कर सकते हैं। एक सीएसएस शैली के साथ, आप एक बार परिभाषित करते हैं कि एक विशेष तत्व कैसा दिखना चाहिए, उदाहरण के लिए, चित्र, और वे एक ही बार में सभी दस्तावेज़ों में अपना स्वरूप बदलते हैं। अपनी पूरी साइट पर टेक्स्ट की फ़ॉर्मेटिंग बदलने के लिए, आपको केवल एक बार CSS कोड बदलना होगा।

  मूल सीएसएस तत्व

  जैसे HTML टैग्स, एट्रीब्यूट्स और वैल्यूज से बना होता है, वैसे ही CSS अपने एलिमेंट्स से बना होता है। CSS निर्माणों के सार को इस प्रकार समझाया जा सकता है: "यह इंगित करें कि किस पृष्ठ तत्व को स्टाइल करना है, और यह बताएं कि इसे कैसे स्टाइल किया जाए।" यहाँ घटक CSS निर्माण हैं।

  • चयनकर्ता... एक पहचानकर्ता जो ब्राउज़र को यह बताता है कि पृष्ठ पर किस तत्व को डिज़ाइन लागू करना है। इसके लिए धन्यवाद, ब्राउज़र "समझता है" कि शैली का इरादा है, उदाहरण के लिए, सूचियों या तालिकाओं को सजाने के लिए।
  • शैली घोषणा ब्लॉक... यह चयनकर्ता के बाद लिखा जाता है और घुंघराले ब्रेसिज़ में संलग्न होता है। यह तत्व की शैली (इसकी डिजाइन) निर्धारित करता है। स्टाइल डिक्लेरेशन ब्लॉक में दो भाग होते हैं।
  • संपत्ति... HTML में एक विशेषता का एनालॉग। निर्धारित करता है कि कौन सी विशेष स्टाइलिंग संपत्ति बदली जाएगी।
  • अर्थ... यह संपत्ति पर सेट है, एक कोलन द्वारा अलग किया गया है, और यह निर्धारित करता है कि संपत्ति को वास्तव में कैसे बदला जाएगा।

  स्टाइल डिक्लेरेशन ब्लॉक में कई गुण और मूल्य हो सकते हैं, इस स्थिति में उन्हें अर्धविराम से अलग करके सूचीबद्ध किया जाता है।

  चयनकर्ता प्रकार

  विभिन्न प्रकार के चयनकर्ता होते हैं जो उनके द्वारा परिभाषित पृष्ठ तत्वों के गुणों के आधार पर होते हैं।

  • सार्वभौमिक... उन सभी पृष्ठ तत्वों के लिए नियम सेट करता है जिनके लिए कोई अन्य नियम निर्धारित नहीं हैं।
    कोड * (फ़ॉन्ट-आकार: 14px;)दस्तावेज़ में सभी तत्वों के लिए फ़ॉन्ट आकार को 14 पिक्सेल पर सेट करता है, जिसके लिए अन्य चयनकर्ताओं का उपयोग करके कोई अन्य नियम निर्दिष्ट नहीं किया गया है।
  • तेगा। इस प्रकार का चयनकर्ता किसी विशिष्ट HTML टैग की सामग्री के लिए स्वरूपण नियम निर्दिष्ट करता है। चयनकर्ता का नाम डिस्क्रिप्टर के नाम के समान है, केवल यह बिना कोण कोष्ठक के लिखा जाता है: पी, एच 1, यूएल.
    उदाहरण के लिए कोड एच 2 (लाल रंग;)दूसरे स्तर के सभी शीर्षकों के लिए टेक्स्ट का रंग हरे रंग में सेट करता है, यानी टैग की सामग्री
    .
  • गुण... चयनकर्ताओं के इस समूह की सहायता से, आप उन सभी टैगों की सामग्री की शैली को परिभाषित कर सकते हैं जिन्हें एक निश्चित विशेषता सौंपी गई है। चयनकर्ताओं को न केवल विशेषता का नाम, बल्कि इसे निर्दिष्ट मान, साथ ही साथ टैग के नाम को निर्दिष्ट करके अधिक सटीक रूप से निर्दिष्ट किया जा सकता है। इसका उपयोग डिजाइन को निजीकृत करने के लिए किया जा सकता है।
  • कक्षा... एक प्रकार का चयनकर्ता यदि आपको एक ही प्रकार के टैग की सामग्री को अलग-अलग तरीकों से स्टाइल करने की आवश्यकता होती है। उदाहरण के लिए, आप साइट के निचले भाग में लिंक को लाल रंग में बनाना चाहते हैं, जबकि अन्य सभी को नीला ही रहना चाहिए, जैसे वे थे। साइट तत्व पर वर्ग नियम लागू करने के लिए, आपको विशेषता में वर्ग का नाम निर्दिष्ट करना होगा कक्षासंबंधित टैग।

  मान लीजिए कक्षा का उपयोग कर कदमअलग-अलग तत्वों को 15 पिक्सेल के बाएँ हाशिया को सेट करने की आवश्यकता है।

  सीएसएस कोड इस तरह होगा:

  चरण (मार्जिन-बाएं: 15px;)

  HTML कोड जो तत्व को नियम से बाँध देगा, वह इस प्रकार होगा:

  इंडेंटेड टेक्स्ट

  • पहचान... विशेषता के संयोजन के साथ प्रयोग किया जाता है पहचान HTML टैग और इसका उपयोग तब किया जाता है जब गुणों को एक तत्व पर सेट करने की आवश्यकता होती है। एक वर्ग चयनकर्ता के विपरीत, जो एक अवधि से पहले होता है, इसे हैश के माध्यम से लिखा जाता है:

  #अनन्य (रंग: नारंगी;)

  • प्रासंगिक... एचटीएमएल में, कुछ टैग अक्सर दूसरों के भीतर पाए जाते हैं, और प्रासंगिक चयनकर्ता ऐसे मामले के लिए नियमों को परिभाषित करने में मदद करते हैं। उनका उपयोग करके, उदाहरण के लिए, आप क्रमांकित सूचियों के अंदर आइटम या पैराग्राफ के अंदर इटैलिक टेक्स्ट को प्रारूपित कर सकते हैं:

  पी आई (फिनिट-फ़ैमिली: सेंचुरी;)

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

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

  ए.स्टेप (मार्जिन-बाएं: 15px;)

  मैं CSS को HTML पृष्ठ से कैसे जोड़ूँ?

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

  इनलाइन शैलियाँ

  वे विशेषता का उपयोग करके सीधे HTML टैग के अंदर दस्तावेज़ में सेट होते हैं अंदाज... सर्वोच्च प्राथमिकता हो। इसका मतलब यह है कि यदि एक ही तत्व के लिए एक अलग डिज़ाइन निर्दिष्ट किया गया है, तो टैग के अंदर लिखे गए नियम को वरीयता दी जाएगी। इनलाइन शैली के लिए एक चयनकर्ता की आवश्यकता नहीं है, क्योंकि शैली और टैग के बीच संबंध स्पष्ट है - इसमें टैग का डिज़ाइन सेट किया गया है।

  निम्न कोड टैग के अंदर टेक्स्ट के लिए फ़ॉन्ट आकार और रंग सेट करता है।

  आंतरिक शैली का पाठ।

  वैश्विक शैलियाँ

  टैग द्वारा परिभाषित …

  संबंधित शैलियाँ

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

  यह दृष्टिकोण इस मायने में भी सुविधाजनक है कि यह पृष्ठ लेआउट नियमों को उनकी सामग्री से अलग करता है, सीएसएस कोड को HTML फ़ाइलों में हस्तक्षेप किए बिना आसानी से बदला जा सकता है, और कोड पृथक्करण का सिद्धांत बहुत महत्वपूर्ण है, खासकर बड़ी परियोजनाओं में।

  किसी CSS फ़ाइल के नियमों को HTML पृष्ठ से जोड़ने के लिए, टैग का उपयोग करें कंटेनर में जोड़ा गया , और उसके गुण।

  यहाँ फ़ाइल से नियमों को जोड़ने वाली रेखा है mystyle.cssएचटीएमएल पेज के साथ:

  rel = "स्टाइलशीट"निर्दिष्ट करता है कि टैग एक स्टाइलशीट फ़ाइल को संदर्भित करता है, href = "mysyle.css"अपना पता सेट करता है। एड्रेसिंग नियम नियमित लिंक के समान हैं - पथ पूर्ण, सापेक्ष आदि हो सकता है।

  आयातित शैलियाँ

  कमांड का उपयोग करना @आयातआप CSS फ़ाइल से वर्तमान तालिका में शैलियाँ जोड़ सकते हैं। यह आवश्यक हो सकता है, उदाहरण के लिए, यदि आप एक अलग फ़ाइल से सार्वभौमिक नियमों के साथ, वैश्विक शैलियों का उपयोग करके निर्दिष्ट व्यक्तिगत दस्तावेज़ लेआउट को पूरक करना चाहते हैं। विधि का उपयोग इनलाइन शैलियों के साथ नहीं किया जा सकता है।

  नीचे दिया गया कोड फ़ाइल तालिका को दस्तावेज़ में आयात करेगा कोई भी.सीएसएस, जो उस फ़ोल्डर में स्थित है जिसमें HTML दस्तावेज़ संपादित किया जा रहा है:

  @import url (any.css);

  ओपनिंग टैग के नीचे लाइन पर कमांड लिखा होता है

  सीएसएस (कैस्केडिंग स्टाइल शीट्स)- एक स्टाइल शीट भाषा जो स्टाइल (जैसे फोंट और रंग) को संरचित दस्तावेज़ों (जैसे HTML दस्तावेज़ और XML एप्लिकेशन) से जोड़ने की अनुमति देती है। आमतौर पर CSS शैलियों का उपयोग वेब पेज तत्वों की शैली बनाने और संशोधित करने के लिए किया जाता है और उपयोगकर्ता इंटरफेसएचटीएमएल और एक्सएचटीएमएल में लिखा गया है, लेकिन एक्सएमएल, एसवीजी, और एक्सयूएल सहित किसी भी प्रकार के एक्सएमएल दस्तावेज़ पर भी लागू किया जा सकता है। दस्तावेज़ों की प्रस्तुति शैली को दस्तावेज़ों की सामग्री से अलग करके, CSS वेब पेज बनाना और साइटों को बनाए रखना आसान बनाता है।

  CSS मीडिया-विशिष्ट स्टाइल शीट का रखरखाव करता है, इसलिए लेखक अपने दस्तावेज़ों की प्रस्तुति को अनुकूलित कर सकते हैं दृश्य ब्राउज़र, हियरिंग एड, प्रिंटर, ब्रेल डिवाइस, हैंडहेल्ड डिवाइस आदि।

  कैस्केडिंग स्टाइल शीट गुणों का उपयोग करने वाले तत्वों और उन गुणों के लिए अनुमत मानों के प्रारूपण के नियमों का वर्णन करती है। प्रत्येक तत्व के लिए गुणों के सीमित सेट का उपयोग किया जा सकता है, शेष गुणों का उस पर कोई प्रभाव नहीं पड़ेगा।

  एक शैली घोषणा में दो भाग होते हैं: चयनकर्तातथा विज्ञापन... HTML में, तत्व नाम केस असंवेदनशील होते हैं, इसलिए "h1" "H1" के समान कार्य करता है। घोषणा में दो भाग होते हैं: संपत्ति का नाम (उदाहरण के लिए, रंग) और संपत्ति का मूल्य (ग्रे)। चयनकर्ता ब्राउज़र को बताता है कि किस तत्व को प्रारूपित करना है, और घोषणा ब्लॉक (घुंघराले ब्रेसिज़ में कोड) स्वरूपण आदेशों - गुणों और उनके मूल्यों को सूचीबद्ध करता है।

  चावल। 1. विज्ञापन की संरचना

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

  कैस्केडिंग स्टाइल शीट के प्रकार और उनकी बारीकियां

  1. स्टाइल शीट के प्रकार

  १.१. बाहरी स्टाइल शीट

  बाहरी स्टाइल शीटप्रतिनिधित्व करता है पाठ फ़ाइल css एक्सटेंशन है, जिसमें CSS-शैली के तत्वों का एक सेट है। फ़ाइल एक HTML पृष्ठ की तरह, एक कोड संपादक में बनाई गई है। फ़ाइल में केवल शैलियाँ हो सकती हैं, कोई HTML मार्कअप नहीं। टैग का उपयोग करके एक बाहरी स्टाइल शीट एक वेब पेज से जुड़ी होती है अनुभाग के अंदर स्थित ... ये शैलियाँ साइट के सभी पृष्ठों के लिए कार्य करती हैं।

  क्रम में एकाधिक टैग जोड़कर प्रत्येक वेब पेज से एकाधिक स्टाइल शीट संलग्न की जा सकती हैं मीडिया टैग विशेषता में इस स्टाइल शीट का उद्देश्य निर्दिष्ट करके। rel = "स्टाइलशीट" लिंक के प्रकार (स्टाइल शीट लिंक) को इंगित करता है।

  HTML5 मानक में type = "text / css" विशेषता वैकल्पिक है, इसलिए आप इसे खाली छोड़ सकते हैं। यदि विशेषता गुम है, तो डिफ़ॉल्ट प्रकार = "पाठ / सीएसएस" है।

  १.२. आंतरिक शैलियाँ

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

  ...
  
  

  १.३. इनलाइन शैलियाँ

  जब हम लिखते हैं इनलाइन शैलियाँ, हम शैली विशेषता का उपयोग करके सीधे तत्व टैग के अंदर एक HTML फ़ाइल में CSS कोड लिखते हैं:

  इस पाठ पर ध्यान दें।

  ये शैलियाँ केवल उस तत्व को प्रभावित करती हैं जिसके लिए उन्हें निर्दिष्ट किया गया है।

  १.४. @आयात नियम

  @आयात नियमबाहरी स्टाइल शीट लोड करने की अनुमति देता है। काम करने के लिए @import निर्देश के लिए, यह अन्य सभी नियमों से पहले स्टाइलशीट (बाहरी या आंतरिक) में दिखाई देना चाहिए:

  वेब फोंट को शामिल करने के लिए @import नियम का भी उपयोग किया जाता है:

  @import url (https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

  2. चयनकर्ताओं के प्रकार

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

  २.१. यूनिवर्सल चयनकर्ता

  किसी भी HTML तत्व से मेल खाता है। उदाहरण के लिए, * (मार्जिन: 0;) सभी साइट तत्वों के लिए मार्जिन को शून्य कर देगा। चयनकर्ता का उपयोग छद्म वर्ग या छद्म तत्व के संयोजन में भी किया जा सकता है: *: के बाद (सीएसएस शैलियों), *: चेक (सीएसएस शैलियों)।

  २.२. तत्व चयनकर्ता

  तत्व चयनकर्ता आपको सभी तत्वों को प्रारूपित करने की अनुमति देते हैं इस प्रकार केसाइट के सभी पृष्ठों पर। उदाहरण के लिए, h1 (फ़ॉन्ट-फ़ैमिली: लॉबस्टर, कर्सिव;) सभी h1 शीर्षकों के लिए सामान्य स्वरूपण शैली सेट करेगा।

  २.३. कक्षा चयनकर्ता

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

  और निर्दिष्ट वर्ग के लिए शैली सेट करें। वर्ग के साथ बनाई गई शैलियाँ अन्य तत्वों पर लागू की जा सकती हैं, जरूरी नहीं कि इस प्रकार की हों।

  .headline (पाठ-रूपांतरण: अपरकेस; रंग: हल्का नीला;)

  यदि किसी तत्व में कई वर्ग विशेषताएँ हैं, तो उनके मान रिक्त स्थान के साथ जुड़े हुए हैं।

  पर्सनल कंप्यूटर का उपयोग करने के निर्देश

  २.४. पहचानकर्ता चयनकर्ता

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

  आईडी किस रूप में ले सकती है, इस पर कोई अन्य प्रतिबंध नहीं है, विशेष रूप से, पहचानकर्ता केवल संख्याएं हो सकते हैं, एक संख्या से शुरू हो सकते हैं, अंडरस्कोर से शुरू हो सकते हैं, केवल विराम चिह्न हो सकते हैं, आदि।

  एक तत्व की विशिष्ट आईडी का उपयोग विभिन्न उद्देश्यों के लिए किया जा सकता है, जैसे कि खंड आईडी का उपयोग करके दस्तावेज़ के विशिष्ट भागों को संदर्भित करने का एक तरीका, स्क्रिप्टिंग में किसी तत्व को लक्षित करने के तरीके के रूप में, और सीएसएस से एक विशिष्ट तत्व को स्टाइल करने के तरीके के रूप में। .

  # साइडबार (चौड़ाई: 300px; फ्लोट: बाएं;)

  २.५. वंशज चयनकर्ता

  वंशज चयनकर्ता एक कंटेनर तत्व के तत्वों के लिए शैलियों को लागू करते हैं। उदाहरण के लिए, उल ली (पाठ-रूपांतरण: अपरकेस;) उन सभी ली तत्वों का चयन करेगा जो सभी उल तत्वों के वंशज हैं।

  यदि आप किसी विशिष्ट तत्व के वंशजों को प्रारूपित करना चाहते हैं, तो आपको उस तत्व के लिए शैली वर्ग सेट करना होगा:

  p.first a (रंग: हरा;) - यह शैली सभी लिंक, प्रथम श्रेणी वाले अनुच्छेद के वंशजों पर लागू होगी;

  p .first a (रंग: हरा;) - यदि आप एक स्थान जोड़ते हैं, तो किसी भी वर्ग टैग के अंदर स्थित लिंक .first, जो कि तत्व का एक बच्चा है, को स्टाइल किया जाएगा

  पहला a (रंग: हरा;) - यह शैली .first class द्वारा निर्दिष्ट किसी अन्य तत्व के अंदर स्थित किसी भी लिंक पर लागू होगी।

  २.६. बाल चयनकर्ता

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

  २.७. बहन चयनकर्ता

  एक सामान्य माता-पिता के साथ तत्वों के बीच एक बहन का रिश्ता पैदा होता है। सहोदर चयनकर्ता आपको भाई-बहनों के समूह से आइटम चुनने देते हैं।

  h1 + p - किसी भी टैग के तुरंत बाद सभी पहले पैराग्राफ का चयन करेगा

  शेष अनुच्छेदों को प्रभावित किए बिना;

  h1 ~ p - उन सभी अनुच्छेदों का चयन करेगा जो किसी भी h1 शीर्षक के सहोदर हैं और उसके तुरंत बाद।

  २.८. विशेषता चयनकर्ता

  विशेषता चयनकर्ता विशेषता नाम या विशेषता मान के आधार पर तत्वों का चयन करते हैं:

  [विशेषता] - निर्दिष्ट विशेषता वाले सभी तत्व - वे सभी तत्व जिनके लिए alt विशेषता सेट की गई है;

  चयनकर्ता [विशेषता] - निर्दिष्ट विशेषता वाले इस प्रकार के तत्व, img - केवल वे छवियां जिनके लिए alt विशेषता सेट की गई है;

  चयनकर्ता [विशेषता = "मान"] - इस प्रकार के तत्व जिसमें एक विशिष्ट मान के साथ निर्दिष्ट विशेषता होती है, img - वे सभी चित्र जिनके नाम में फूल शब्द होता है;

  चयनकर्ता [विशेषता ~ = "मान"] - आंशिक रूप से इस मान वाले तत्व, उदाहरण के लिए, यदि एक स्थान द्वारा अलग किए गए तत्व के लिए कई वर्ग निर्दिष्ट हैं, तो पी - पैराग्राफ जिनके वर्ग नाम में विशेषता है;

  चयनकर्ता [विशेषता | = "मान"] - ऐसे तत्व जिनकी विशेषता मान सूची निर्दिष्ट शब्द से शुरू होती है, पी - पैराग्राफ जिनके वर्ग का नाम फीचर है या फीचर से शुरू होता है;

  चयनकर्ता [विशेषता ^ = "मान"] - ऐसे तत्व जिनकी विशेषता मान निर्दिष्ट मान से शुरू होता है, ए - http: // से शुरू होने वाले सभी लिंक;

  चयनकर्ता [विशेषता $ = "मान"] - ऐसे तत्व जिनका विशेषता मान निर्दिष्ट मान के साथ समाप्त होता है, img - png प्रारूप में सभी चित्र;

  चयनकर्ता [विशेषता * = "मान"] - ऐसे तत्व जिनके विशेषता मान में कहीं भी निर्दिष्ट शब्द होता है, ए - सभी लिंक जिनके नाम में पुस्तक होती है।

  2.9. छद्म वर्ग चयनकर्ता

  छद्म वर्ग वे वर्ग हैं जो वास्तव में HTML टैग से जुड़े नहीं हैं। जब कोई ईवेंट ट्रिगर होता है या किसी विशिष्ट नियम का पालन करता है, तो वे आपको तत्वों पर CSS नियम लागू करने की अनुमति देते हैं। छद्म वर्ग निम्नलिखित गुणों वाले तत्वों की विशेषता रखते हैं:

  : होवर - कोई भी तत्व जिस पर माउस कर्सर मँडरा रहा है;

  : फोकस - एक इंटरैक्टिव तत्व जिसे कीबोर्ड का उपयोग करने के लिए नेविगेट किया गया था या माउस का उपयोग करके सक्रिय किया गया था;

  : सक्रिय - एक तत्व जो उपयोगकर्ता द्वारा सक्रिय किया गया था;

  : मान्य - प्रपत्र फ़ील्ड जिनकी सामग्री निर्दिष्ट डेटा प्रकार के अनुपालन के लिए ब्राउज़र में जाँच की गई है;

  : अमान्य - प्रपत्र फ़ील्ड जिनकी सामग्री निर्दिष्ट डेटा प्रकार से मेल नहीं खाती;

  : सक्षम - सभी सक्रिय प्रपत्र फ़ील्ड;

  : अक्षम - अक्षम प्रपत्र फ़ील्ड, अर्थात, एक निष्क्रिय अवस्था में;

  : इन-रेंज - फॉर्म फ़ील्ड जिनके मान निर्दिष्ट सीमा में हैं;

  : आउट-ऑफ-रेंज - फॉर्म फ़ील्ड जिनके मान निर्दिष्ट सीमा में शामिल नहीं हैं;

  : लैंग () - निर्दिष्ट भाषा में पाठ वाले तत्व;

  : नहीं (चयनकर्ता) - ऐसे तत्व जिनमें निर्दिष्ट चयनकर्ता शामिल नहीं है - वर्ग, पहचानकर्ता, नाम या प्रपत्र फ़ील्ड का प्रकार -: नहीं ();

  : लक्ष्य - दस्तावेज़ में संदर्भित # प्रतीक वाला तत्व;

  : चेक किया गया - चयनित (उपयोगकर्ता द्वारा चयनित) फॉर्म तत्व।

  2.10. संरचनात्मक छद्म वर्ग चयनकर्ता

  कोष्ठक में निर्दिष्ट पैरामीटर के अनुसार संरचनात्मक छद्म वर्ग बच्चों का चयन करते हैं:

  : nth-child (विषम) - विषम बच्चे;

  : nth-child (सम) - यहां तक ​​कि बच्चे भी;

  : nth-child (3n) - बच्चों में हर तीसरा तत्व;

  : nth-child (3n + 2) - दूसरे बच्चे (+2) से शुरू होने वाले हर तीसरे तत्व का चयन करता है;

  : nth-child (n + 2) - दूसरे से शुरू होने वाले सभी तत्वों का चयन करता है;

  : nth-child (3) - तीसरे बच्चे का चयन करता है;

  : nth-last-child () - बच्चों की सूची में, निर्दिष्ट स्थान के साथ तत्व का चयन करता है, जैसे: nth-child (), लेकिन अंतिम से शुरू होकर, विपरीत दिशा में;

  : पहला बच्चा - आपको टैग के केवल पहले बच्चे को स्टाइल करने की अनुमति देता है;

  : अंतिम-चाइल्ड - आपको टैग के अंतिम बच्चे को प्रारूपित करने की अनुमति देता है;

  : केवल-बच्चा - उस तत्व का चयन करता है जो एकमात्र बच्चा है;

  : खाली - उन तत्वों का चयन करता है जिनके कोई संतान नहीं है;

  : रूट - उस तत्व का चयन करता है जो दस्तावेज़ की जड़ है - एचटीएमएल तत्व।

  2.11. संरचनात्मक प्रकार छद्म वर्गों का चयनकर्ता

  एक विशिष्ट प्रकार का चाइल्ड टैग इंगित करता है:

  : nth-of-type () - सादृश्य द्वारा तत्वों का चयन करता है: nth-child (), केवल तत्व प्रकार को ध्यान में रखते हुए;

  : प्रथम-प्रकार - दिए गए प्रकार के पहले बच्चे का चयन करता है;

  : अंतिम प्रकार - दिए गए प्रकार के अंतिम तत्व का चयन करता है;

  : nth-last-of-type () - निर्दिष्ट स्थान के अनुसार तत्वों की सूची में दिए गए प्रकार के तत्व का चयन करता है, अंत से शुरू होता है;

  : केवल-का-प्रकार - मूल तत्व के बच्चों के बीच निर्दिष्ट प्रकार के एकमात्र तत्व का चयन करता है।

  2.12. छद्म तत्व चयनकर्ता

  छद्म तत्वों का उपयोग सामग्री संपत्ति का उपयोग करके उत्पन्न सामग्री को जोड़ने के लिए किया जाता है:

  : पहला अक्षर - प्रत्येक पैराग्राफ के पहले अक्षर का चयन करता है, केवल ब्लॉक तत्वों पर लागू होता है;

  : प्रथम-पंक्ति - किसी तत्व के पाठ की पहली पंक्ति का चयन करता है, केवल ब्लॉक तत्वों पर लागू होता है;

  : पहले - तत्व से पहले उत्पन्न सामग्री सम्मिलित करता है;

  : के बाद - तत्व के बाद उत्पन्न सामग्री जोड़ता है।

  3. चयनकर्ताओं का संयोजन

  स्वरूपण के लिए तत्वों के अधिक सटीक चयन के लिए, आप चयनकर्ताओं के संयोजन का उपयोग कर सकते हैं:

  img: nth-of-type (even) - सभी सम चित्रों का चयन करेगा, जिसके वैकल्पिक पाठ में css शब्द शामिल है।

  4. चयनकर्ताओं का समूहन

  एक ही शैली को एक ही समय में कई तत्वों पर लागू किया जा सकता है। ऐसा करने के लिए, घोषणा के बाईं ओर, अल्पविराम द्वारा अलग किए गए आवश्यक चयनकर्ताओं को सूचीबद्ध करें:

  एच1, एच2, पी, स्पैन (रंग: टमाटर; पृष्ठभूमि: सफेद;)

  5. वंशानुक्रम और झरना

  सीएसएस में वंशानुक्रम और कैस्केड दो मूलभूत अवधारणाएं हैं जो निकट से संबंधित हैं। वंशानुक्रम का अर्थ है कि तत्व अपने माता-पिता से गुण प्राप्त करते हैं (वह तत्व जिसमें वे शामिल हैं)। कैस्केड स्वयं को प्रकट करता है कि किसी दस्तावेज़ पर विभिन्न प्रकार की स्टाइल शीट कैसे लागू होती हैं, और कैसे परस्पर विरोधी नियम एक-दूसरे को ओवरराइड करते हैं।

  5.1. विरासत

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

  ब्लॉक स्वरूपण गुण विरासत में नहीं मिले हैं। ये हैं बैकग्राउंड, बॉर्डर, डिस्प्ले, फ्लोट एंड क्लियर, हाइट और चौड़ाई, मार्जिन, मिन-मैक्स-हाइट और -विड्थ, आउटलाइन, ओवरफ्लो, पैडिंग, पोजिशन, टेक्स्ट-डेकोरेशन, वर्टिकल-एलाइन और जेड-इंडेक्स।

  जबरन विरासत

  इनहेरिट कीवर्ड का उपयोग करके, आप किसी तत्व को उसके मूल तत्व से किसी भी संपत्ति मान को इनहेरिट करने के लिए बाध्य कर सकते हैं। यह उन संपत्तियों के लिए भी काम करता है जो डिफ़ॉल्ट रूप से विरासत में नहीं मिली हैं।

  CSS शैलियाँ कैसे सेट और कार्य करती हैं

  1) शैलियों को मूल तत्व (विरासत में मिली संपत्तियों या विरासत मूल्य का उपयोग करके) से विरासत में प्राप्त किया जा सकता है;

  2) नीचे स्टाइल शीट में स्थित शैलियाँ ऊपर दी गई तालिका में स्थित शैलियों को ओवरराइड करती हैं;

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

  
  चावल। 2. डेवलपर मोड in गूगल ब्राउज़रक्रोम

  4) शैली को परिभाषित करते समय, आप चयनकर्ताओं के किसी भी संयोजन का उपयोग कर सकते हैं - तत्व चयनकर्ता, तत्व छद्म वर्ग, वर्ग या तत्व पहचानकर्ता।

  डिव (बॉर्डर: 1px सॉलिड #eee;) #wrap (चौड़ाई: 500px;) .बॉक्स (फ्लोट: लेफ्ट;) .clear (स्पष्ट: दोनों;)

  ५.२. झरना

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

  महत्वपूर्ण नियम

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

  विशेषता

  प्रत्येक नियम के लिए, ब्राउज़र गणना करता है चयनकर्ता विशिष्टताऔर यदि तत्व में परस्पर विरोधी संपत्ति घोषणाएं हैं, तो सबसे अधिक विशिष्टता वाले नियम को ध्यान में रखा जाता है। विशिष्टता मान के चार भाग होते हैं: 0, 0, 0, 0। चयनकर्ता की विशिष्टता निम्नानुसार निर्धारित की जाती है:

  आईडी के लिए, 0, 1, 0, 0 जोड़ा जाता है;
  कक्षा के लिए 0, 0, 1, 0 जोड़ा जाता है;
  प्रत्येक तत्व और छद्म तत्व के लिए 0, 0, 0, 1 जोड़ा जाता है;
  इनलाइन शैली के लिए सीधे एक तत्व में जोड़ा गया - 1, 0, 0, 0;
  सार्वभौमिक चयनकर्ता की कोई विशिष्टता नहीं है।

  H1 (रंग: हल्का नीला;) / * विशिष्टता 0, 0, 0, 1 * / em (रंग: चांदी;) / * विशिष्टता 0, 0, 0, 1 * / h1 em (रंग: सोना;) / * विशिष्टता: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2 * / div # मुख्य p.about (रंग: नीला;) / * विशिष्टता: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2 * / साइडबार (रंग: ग्रे;) / * विशिष्टता 0, 0, 1, 0 * / # साइडबार (रंग: नारंगी;) / * विशिष्टता 0, 1, 0, 0 * / ली # साइडबार (रंग: एक्वा;) / * विशिष्टता: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1 * /

  नतीजतन, उन नियमों को तत्व पर लागू किया जाएगा, जिनकी विशिष्टता अधिक है। उदाहरण के लिए, यदि कोई तत्व 0, 0, 0, 2 और 0, 1, 0, 1 मान वाली दो विशिष्टताओं से प्रभावित होता है, तो दूसरा नियम जीत जाता है।

  संलग्न तालिकाओं का क्रम

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

  सीएसएस = शैलियाँ और रंग

  टेक्स्ट में हेरफेर करें

  रंग, बक्से

  CSS के साथ HTML को स्टाइल करना

  सीएसएसकैस्केडिंग स्टाइल शीट के लिए खड़ा है।

  सीएसएस वर्णन करता है, स्क्रीन, पेपर या अन्य मीडिया पर HTML तत्वों को कैसे प्रदर्शित किया जाना चाहिएएन.एस.

  सीएसएस बहुत काम बचाता है... यह एक साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है।

  HTML तत्वों में CSS को तीन तरीकों से जोड़ा जा सकता है:

  • में निर्मित- HTML तत्वों पर शैली विशेषता का उपयोग करना
  • अंदर का-का उपयोग करके
    
    

    यह एक शीर्षक है

    
    

    यह एक पैराग्राफ है।

    
    
    
    

    बाहरी सीएसएस

    कई HTML पृष्ठों के लिए शैली को परिभाषित करने के लिए एक बाहरी स्टाइल शीट का उपयोग किया जाता है।

    बाहरी स्टाइल शीट के साथ, आप एक फ़ाइल को संशोधित करके अपनी पूरी वेबसाइट का रूप बदल सकते हैं!

    बाहरी स्टाइल शीट का उपयोग करने के लिए, अनुभाग में इसमें एक लिंक जोड़ें एचटीएमएल पेज:

    उदाहरण

    
    
    
    
    
    

    यह एक शीर्षक है

    
    

    यह एक पैराग्राफ है।

    
    
    
    

    बाहरी स्टाइल शीट को किसी भी टेक्स्ट एडिटर में लिखा जा सकता है। फ़ाइल में HTML कोड नहीं होना चाहिए और इसे एक्सटेंशन के साथ सहेजा जाना चाहिए। सीएसएस.

    यह "styles.css" जैसा दिखता है:

    तन (
    पृष्ठभूमि-रंग: पाउडरब्लू;
    }
    एच1 (
    रंग नीला;
    }
    पी (
    लाल रंग;
    }

    सीएसएस फोंट

    CSS रंग गुण उपयोग किए जाने वाले टेक्स्ट का रंग निर्धारित करता है।

    फ़ॉन्ट-फ़ैमिली CSS गुण उपयोग किए जाने वाले फ़ॉन्ट को निर्दिष्ट करता है।

    CSS फॉन्ट-साइज प्रॉपर्टी उपयोग किए जाने वाले टेक्स्ट के आकार को निर्धारित करती है।

    उदाहरण

    
    
    
    
    
    

    यह एक शीर्षक है

    
    

    यह एक पैराग्राफ है।

    
    
    
    

    सीएसएस सीमा

    CSS सीमा गुण HTML तत्व के चारों ओर एक सीमा को परिभाषित करता है:

    उदाहरण

    पी (
    }
    

    सीएसएस पैडिंग

    CSS पैडिंग प्रॉपर्टी टेक्स्ट और बॉर्डर के बीच पैडिंग (स्पेस) को परिभाषित करती है:

    उदाहरण

    पी (
    सीमा: 1px ठोस पाउडरनीला;
    पैडिंग: 30 पीएक्स;
    }

    सेट करने के चार तरीके हैं सीएसएसटैग के लिए शैली एचटीएमएल.

    1) इनलाइन शैली.

    2) शुरू कीअंदाज

    3) आयातितअंदाज।

    4) फ़ाइल से शैली.

    और इस लेख में, हम चारों तरीकों के बारे में जानेंगे।

    शुरू करने के लिए, पहला तरीका है इनलाइन शैली... यह शैली सीधे टैग में ही निर्दिष्ट होती है। उदाहरण के लिए:

    मूलपाठ

    इस मामले में, हमने निर्दिष्ट किया है कि " मूलपाठ"आकार में होगा 150% और गठबंधन किया केंद्र... यह एक उदाहरण है इनलाइन-शैली.

    दूसरा तरीका एम्बेडेड है सीएसएस शैली, यानी वह शैली जो दस्तावेज़ के शीर्ष में, टैग में सेट की गई है ... उदाहरण के लिए, इस तरह:

    
    
    

    यहां निम्नलिखित होगा: टैग के अंदर सभी तत्वों के लिए

    निम्नलिखित किया जाएगा: उनका रंग लाल होगा और शीर्ष मार्जिन 100 पिक्सेल होगा।

    असाइनमेंट का तीसरा तरीका सीएसएस स्टाइलिंग- यह है आयातित शैलियाँ... वे भी ऐसे हैं अंतर्निहितदस्तावेज़ के शीर्ष में सेट हैं, लेकिन पहले से ही फ़ाइल से। यहाँ एक उदाहरण है:

    
    
    

    यहाँ फ़ाइल की शैलियाँ पूरे पृष्ठ पर लागू होंगी" my.css".

    और आखिरी नज़र सीएसएस शैलियोंफ़ाइल से शैलियाँ हैं। यह विधिसबसे आम है, और इसमें टैग के माध्यम से स्टाइल फ़ाइल को जोड़ने में शामिल है दस्तावेज़ के सिर में। उदाहरण के लिए, इस तरह:

    
    
    

    यह तरीका पिछले तरीके से काफी मिलता-जुलता है, लेकिन यहां टैग का इस्तेमाल नहीं किया गया है।