CSS क्या है

docs.scrimba.com

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

CSS से पहले और बाद का एक पृष्ठ

CSS का अर्थ है Cascading Style Sheets। जिस हिस्से को पकड़ना है वह है style: CSS यह है कि आप एक पृष्ठ के दिखावट को कैसे वर्णित करते हैं। आपका HTML कहता है "यह एक शीर्षक है, यह एक पैराग्राफ है, यह एक बटन है"। CSS फिर कहता है "शीर्षक को बड़ा और गहरा नीला बनाएं, बटन को कुछ पैडिंग और एक गोल कोने दें"।

HTML को एक कमरे की सामग्री के रूप में सोचें, फर्नीचर और वह कहां बैठता है, और CSS को पेंट, प्रकाश व्यवस्था और व्यवस्था के रूप में सोचें। एक ही कमरा, लेकिन एक नंगा है और दूसरा एक ऐसी जगह है जहां आप रहना चाहेंगे। आप CSS को अलग-अलग नियमों में लिखते हैं जो आपके HTML के कुछ हिस्सों की ओर इशारा करते हैं और बदलते हैं कि वे कैसे दिखते हैं।

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

वह अलगाव यही है। जब आपकी सामग्री HTML में रहती है और आपकी प्रस्तुति CSS में रहती है, तो आप अपने मार्कअप को छुए बिना एक साइट को फिर से डिज़ाइन कर सकते हैं, और आप हर पृष्ठ को संपादित करने के बजाय एक साझा स्टाइलशीट बदल सकते हैं। दोनों को अलग रखना एक ऐसी आदत है जो आपके पहले नियम से ही बनाने लायक है।

CSS presentation परत है, और ब्राउज़र इसे rendering के एक अलग चरण के रूप में लागू करता है: यह आपके HTML को DOM में पार्स करता है (Document Object Model, तत्वों का लाइव पेड़ जो ब्राउज़र आपके मार्कअप से बनाता है), अपने CSS को नियमों के एक सेट में पार्स करता है, फिर प्रत्येक तत्व के लिए अंतिम शैली की गणना करने के लिए नियमों को तत्वों से मेल खाता है। आपकी CSS कभी DOM पेड़ को नहीं बदलती; यह इसे सजाती है।

वह staged मॉडल यही है कि चिंताओं का अलगाव व्यवहार में कैसे काम करता है, केवल सिद्धांत में नहीं। एक पृष्ठ जिसका अर्थ पूरी तरह से इसके HTML में रहता है, gracefully degrade होता है: यदि CSS लोड करने में विफल रहता है, तो सामग्री अभी भी वहां है और अभी भी क्रम में है, क्योंकि संरचना और प्रस्तुति कभी entangled नहीं थे। यह भी यही है कि समान मार्कअप एक हल्की theme और एक गहरी theme ले सकता है, या एक print layout और एक screen layout, HTML में बिना किसी परिवर्तन के। Presentation एक परत है जो आप attach करते हैं, सामग्री में baked एक property नहीं।

h1 {
  color: navy;
  font-size: 2rem;
}

वह एक single CSS rule है। यह पृष्ठ पर हर <h1> शीर्षक को ढूंढता है और इसे navy और बड़ा बनाता है। HTML बिल्कुल वैसा ही रहता है; केवल इसकी दिखावट बदलती है।

JunoCSS से पहले और बाद का एक पृष्ठ HTML सामग्री है, CSS दिखावट है। आप ऐसे नियम लिखते हैं जो आपके पृष्ठ के कुछ हिस्सों की ओर इशारा करते हैं और बदलते हैं कि वे कैसे दिखते हैं, जैसे एक शीर्षक को बड़ा और नीला बनाना। इसके अंतर्गत पृष्ठ नहीं बदलता, केवल जिस तरह से इसे दिखाया जाता है वह बदलता है। वह split पूरा विचार है।

JunoCSS से पहले और बाद का एक पृष्ठ CSS presentation है, HTML संरचना है, और उन्हें जानबूझकर अलग रखा जाता है। CSS को फिर से style करें और समान मार्कअप बिल्कुल अलग दिखता है; एक स्टाइलशीट साझा करें और यह हर पृष्ठ को style करती है। सामग्री और दिखावट को अलग रखने की आदत अपने बहुत पहले नियम से ही बनाएं।

JunoCSS से पहले और बाद का एक पृष्ठ ब्राउज़र HTML को DOM में पार्स करता है, CSS को नियमों में पार्स करता है, फिर प्रत्येक तत्व के लिए एक शैली की गणना करता है: आपकी CSS पेड़ को सजाती है, यह कभी इसे फिर से नहीं लिखती। वह staged मॉडल यही है कि जब CSS लोड करने में विफल रहता है तो अपने अर्थ के साथ एक पृष्ठ अभी भी क्यों काम करता है। Presentation एक परत है जो आप attach करते हैं, सामग्री में baked कुछ नहीं।

CSS आपके HTML की ओर कैसे इशारा करता है

CSS तभी उपयोगी हो जाती है जब वह आपके पृष्ठ के सही हिस्सों को खोज सके। यह एक selector के साथ करता है: एक नियम की शुरुआत में वह हिस्सा जो नाम देता है कि क्या style करना है। ऊपर दिए गए नियम में, h1 selector है, और इसका अर्थ है "हर h1 शीर्षक"।

आप आमतौर पर अपने HTML में उन्हें एक class देकर तत्वों को लक्षित करेंगे और CSS से उस class की ओर इशारा करेंगे। एक class एक label है जो आप चुनते हैं:

<button class="buy-button">Buy now</button>

.buy-button {
  background-color: teal;
  color: white;
}

.buy-button selector उस class वाले element को ढूंढता है और इसे style करता है। आप बाद में कई प्रकार के selector से मिलेंगे; classes वह हैं जिन्हें आप सबसे अधिक use करेंगे।

एक CSS rule के दो हिस्से हैं: एक selector जो कहता है कि कौन से elements से मेल खाएं, और declarations का एक block जो कहता है कि उन्हें कैसे style करें। Selectors यह है कि CSS DOM में कैसे पहुंचता है और elements को चुनता है जिसमें styles लागू करना है। आप element type (h1), class (.buy-button), id, relationship, और बहुत कुछ से चुन सकते हैं।

<button class="buy-button">Buy now</button>

.buy-button {
  background-color: teal;
  color: white;
}

व्यावहारिक रूप से आप element types या ids की तुलना में classes से बहुत अधिक style करते हैं, क्योंकि एक class reusable है और कोई built-in specificity baggage नहीं रखता है। selectors अध्याय पूरी श्रृंखला को cover करता है और कब प्रत्येक एक सही tool है।

Selectors CSS की query language हैं: प्रत्येक एक pattern है जो ब्राउज़र हर element के against को test करता है यह decide करने के लिए कि कौन से नियम apply होते हैं। वह matching निःशुल्क नहीं है, और यह specificity के साथ interact करता है (वह weight जो ब्राउज़र एक selector को assign करता है जब कई rules एक ही element पर एक ही property को set करते हैं तो ties को तोड़ने के लिए)। एक class एक element type की तुलना में अधिक weighs करता है; एक id एक class की तुलना में अधिक weighs करता है; inline styles अभी भी अधिक weighs करते हैं।

.buy-button {
  background-color: teal;
  color: white;
}

व्यावहारिक परिणाम यह है कि कैसे आप select करते हैं यह एक design decision है, केवल एक targeting नहीं। सब कुछ को ids के साथ select करना और deeply nested selectors को बनाना specificity को बढ़ाता है जो बाद के नियमों को override करने के लिए struggle करता है, यही है कि कैसे stylesheets calcify हो जाती हैं। Flat, class-based selectors specificity को low और predictable रखते हैं, यही है कि क्यों लगभग हर scalable CSS approach classes पर built है। selectors अध्याय specificity को properly take apart करता है।

JunoCSS आपके HTML की ओर कैसे इशारा करता है एक selector rule का वह हिस्सा है जो कहता है कि क्या style करना है। शुरुआत करने के लिए सबसे अनुकूल एक class है: आप HTML में एक element पर class="name" लगाते हैं, फिर अपने CSS में .name को style करते हैं। अभी अन्य प्रकारों के बारे में चिंता न करें, classes आपको बहुत दूर तक ले जाएंगे।

JunoCSS आपके HTML की ओर कैसे इशारा करता है हर rule एक selector के साथ शुरू होता है जो DOM में elements से match करता है, और आप type, class, id, या relationship से match कर सकते हैं। Default के रूप में classes तक पहुंचें: वे reusable हैं और specificity को manageable रखते हैं। selectors अध्याय में पूरा toolkit है।

JunoCSS आपके HTML की ओर कैसे इशारा करता है Selectors एक query language हैं, और प्रत्येक एक specificity weight रखता है जो decide करता है कि कौन जीतता है जब rules collide करते हैं: id over class, class over type, inline over all। कैसे आप select करते हैं यह एक maintainability decision है, इसलिए इसे flat और class-based रखें ताकि specificity आपकी stylesheet को calcify न करे। Specificity को selectors अध्याय में पूर्ण treatment मिलता है।

"Cascading" का क्या अर्थ है

Cascading Style Sheets का पहला शब्द वह है जिसे लोग छोड़ देते हैं, लेकिन यह बहुत कुछ समझाता है। एक से अधिक नियम एक ही element पर लागू हो सकते हैं, और वे disagree कर सकते हैं। शायद एक नियम कहता है कि पैराग्राफ grey हैं और दूसरा कहता है कि यह विशेष पैराग्राफ black है। cascade नियमों का सेट है जो ब्राउज़र यह decide करने के लिए use करता है कि कौन सा जीतता है।

ज्यादातर समय यह एक चीज़ पर आता है: यदि दो नियम equally specific हैं, तो जो बाद में लिखा गया है वह जीतता है। आपको अभी पूरी picture की जरूरत नहीं है। जानिए कि जब कोई style expected तरीके से show नहीं होता है, तो यह आमतौर पर इसलिए होता है क्योंकि दूसरा नियम इसे beat करता है, न कि क्योंकि CSS broken है।

cascade वह algorithm है जो conflicts को resolve करता है जब multiple rules एक ही element को target करते हैं और एक ही property को set करते हैं। यह कुछ चीजों को order में weigh करता है: rule कहां से आया है, इसके selector कितना specific है, और, एक final tiebreak के रूप में, source order (बाद वाला जीतता है)। जब दो rules equally specific होते हैं, तो अंतिम जो declare किया गया है वह जीतता है।

यह mechanism ज्यादातर "why isn't my CSS working" moments के पीछे है। style apply होती है; यह एक rule द्वारा override हो रही है जो higher rank करता है। cascade को correctly read करना, केवल एक change को force करने के लिए अधिक rules को pile करने के बजाय, उन आदतों में से एक है जो CSS से fighting को directing में अलग करता है। how CSS works अध्याय पूर्ण resolution order को walk करता है।

cascade CSS की conflict-resolution algorithm है, और इसके order को जानना ज्यादातर styling bugs को mysteries से lookups में बदल देता है। यह competing declarations को resolve करता है, order में: origin and importance (author styles बनाम browser defaults बनाम !important), फिर specificity (selector की weight), फिर source order (बाद वाला rule final tie को जीतता है)।

इस बात की वजह यह महत्वपूर्ण है कि production scale पर हर override जो आप लिखते हैं वह उस ranking में एक move है। एक conflict को जीतने के लिए !important या एक id तक पहुंचना हर भविष्य के नियम के लिए bar को उठाता है जिसे एक ही element को touch करना चाहिए, और वे escalations एक ऐसी stylesheet में compound होते हैं जिसे कोई safely change नहीं कर सकता। durable fix लगभग हमेशा यहां specificity को raise करना नहीं बल्कि कहीं और को lower करना है। Modern CSS ऐसे tools जोड़ता है जो आपको specificity arms race के बिना cascade control देते हैं, जैसे cascade layers, जिसे organising and scaling CSS अध्याय cover करता है। पूर्ण resolution order के लिए, how CSS works देखें।

JunoCascading का क्या अर्थ है Cascading का अर्थ है एक से अधिक rule एक ही element को hit कर सकते हैं, और cascade यह decide करता है कि कौन सा जीतता है। रोजमर्रा का संस्करण: जब दो rules equally specific होते हैं, तो बाद वाला जीतता है। इसलिए यदि कोई style show नहीं हो रहा है, तो शायद दूसरा rule ने इसे beat किया है। मुझे यह mysterious खोजना बंद करने में समय लगा।

JunoCascading का क्या अर्थ है cascade origin से resolve करता है, फिर specificity, फिर source order, बाद वाले rule को एक equal tie जीतने के साथ। ज्यादातर "my CSS isn't working" moments एक override हैं, एक bug नहीं। यह सीखें कि एक rule क्यों हारा इसे force करने के लिए अधिक rules को stack करने के बजाय, और CSS एक fight की तरह महसूस करना बंद कर देता है।

JunoCascading का क्या अर्थ है Conflicts origin और importance से resolve होते हैं, फिर specificity, फिर source order। हर override जो आप लिखते हैं वह उस ranking में एक move है, इसलिए !important या एक id से जीतना हर rule के bar को raise करता है जो इसके बाद आता है। durable fix है specificity को यहां raise करना नहीं बल्कि कहीं else को lower करना। Cascade layers आपको arms race के बिना control देते हैं।

CSS यहां से कहां जाती है

CSS अपने core में एक छोटी language है, एक selector और कुछ property-value pairs, लेकिन यह बहुत दूर तक पहुंचती है। एक बार जब आप elements को target कर सकते हैं और properties set कर सकते हैं, तो इस handbook का बाकी हिस्सा उन properties के बारे में है जो जानने लायक हैं और उनके ऊपर built systems: box model जो spacing और size को नियंत्रित करता है, फिर colour और type, और फिर layout tools, flexbox और grid, जो एक पूरे page को arrange करते हैं।

अगला अध्याय, how CSS works, इस अध्याय द्वारा शुरू किए गए mechanics के बारे में concrete हो जाता है: CSS को एक page से जोड़ने के तीन तरीके, एक rule की exact anatomy, और कैसे cascade और inheritance यह decide करते हैं कि हर element अंत में कैसा दिखता है।