हिन्दी

English
Español
Português
中文
日本語
한국어

हिन्दी

English
Español
Português
中文
日本語
한국어

Appearance

Interactive coursesLearn by building 🚀 Hundreds of hours of interactive lessons, coding challenges, and projects across web, Python, and AI. Pause, tweak the code, and build along in the browser. See all courses
This page has been auto-translated and may contain errors.View in English

CSS कैसे काम करता है ​

docs.scrimba.com

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

किसी पृष्ठ पर CSS संलग्न करना ​

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

पहला एक inline style है, जो style विशेषता के साथ सीधे तत्व पर लिखा जाता है:

html
<p style="color: teal;">एक ही फ़िरोज़ी अनुच्छेद।</p>

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

CSS तीन तरीकों से पृष्ठ पर पहुंचता है, और वे समान नहीं हैं। एक inline style style विशेषता में स्वयं तत्व पर रहता है और केवल उसी एक तत्व को प्रभावित करता है। एक internal stylesheet एक <style> ब्लॉक है जो <head> में है जो पूरे पृष्ठ में तत्वों को target कर सकता है। एक external stylesheet एक .css फ़ाइल है जो <head> से जुड़ी है:

html
<link rel="stylesheet" href="styles.css">

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

तीन तंत्र CSS को जोड़ते हैं, और प्रत्येक cascade में एक जगह से मैप होता है जो आप इसी अध्याय में बाद में मिलेंगे। एक inline style (तत्व पर एक style विशेषता) केवल उस तत्व पर लागू होता है और संघर्षों में बहुत अधिक वजन रखता है, जो बिल्कुल वही कारण है कि इस पर झुकना आपको चोट पहुंचाता है: इसे स्टाइलशीट से साफ़-साफ़ ओवरराइड करना कठिन है। एक आंतरिक <style> ब्लॉक एक दस्तावेज़ के लिए scopes है। एक external stylesheet, <link rel="stylesheet"> के साथ जुड़ा हुआ, सफाई से परे कारणों से production default है।

External files आपको एक ही समय में तीन चीजें देती हैं: concerns का अलगाव, इसलिए मार्कअप और शैलियां स्वतंत्र रूप से बदलती हैं; HTTP caching, इसलिए एक returning visitor हर पृष्ठ में प्रत्येक HTML प्रतिक्रिया में embedded शैलियों को पुनः प्राप्त करने के बजाय पहले से डाउनलोड की गई फ़ाइल को दोबारा उपयोग करता है; और reuse, इसलिए एक authored नियम एक पूरी साइट की सेवा करता है। व्यापार एक अलग अनुरोध है, यही कारण है कि बहुत छोटी महत्वपूर्ण शैलियां कभी-कभी पहली पेंट के लिए inlined होती हैं, लेकिन सामान्य नियम रहता है: एक external stylesheet में लेखक करें और inline styles को एक targeted exception के रूप में व्यवहार करें, एक आदत नहीं।

यहाँ external approach पूरे तरीके से है: एक HTML फ़ाइल जो एक stylesheet को जोड़ता है, और stylesheet स्वयं।

html
<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="intro">साइट में आपका स्वागत है।</p>
</body>
css
/* styles.css */
.intro {
  color: teal;
  font-size: 1.25rem;
}
Junoकिसी पृष्ठ पर CSS संलग्न करना CSS जोड़ने के तीन तरीके हैं: तत्व पर style के साथ, एक <style> ब्लॉक में, या एक अलग फ़ाइल में जिसे आप <link> के साथ जोड़ते हैं। अलग फ़ाइल का उपयोग करें। आप अपनी शैलियां एक बार लिखते हैं और हर पृष्ठ जो इससे जुड़ता है समान दिखता है।
Junoकिसी पृष्ठ पर CSS संलग्न करना Inline styles एक तत्व को hit करते हैं, एक <style> ब्लॉक एक पृष्ठ को cover करता है, और एक external .css फ़ाइल आपकी पूरी साइट को cover करती है। external file को default करें: यह प्रस्तुति को आपके मार्कअप से बाहर रखता है, ब्राउज़र इसे कैश करता है, और एक नियम हर matching तत्व की सेवा करता है। Inline styles अपवाद हैं, दिनचर्या नहीं।
Junoकिसी पृष्ठ पर CSS संलग्न करना एक external stylesheet में लेखक करें: एक ही कदम में अलगाव, caching, और reuse। Inline styles cascade में heavy वजन ले जाते हैं, इसलिए उन्हें बाद में override करना दर्दनाक है; उन्हें एक deliberate अपवाद के रूप में रखें। Inline करने का एक समय एक छोटा ब्लॉक critical शैलियों पहली पेंट के लिए है, और फिर भी आपकी CSS का बड़ा हिस्सा linked फ़ाइल में रहता है।

एक नियम की शारीरिक संरचना ​

CSS का एक टुकड़ा एक rule के रूप में लिखा जाता है, और हर नियम का आकार समान होता है। यहाँ एक है जो एक कार्ड को स्टाइल करता है:

css
.card {
  color: navy;
  padding: 16px;
}

सामने का .card selector है: यह चुनता है कि नियम किन तत्वों पर लागू होता है, इस मामले में कुछ भी जिसके पास card class है। curly braces के अंदर सब कुछ declaration block है। अंदर प्रत्येक पंक्ति, जैसे color: navy;, एक declaration है: एक property (color) और मान आप इसे चाहते हैं (navy), एक colon से अलग किया गया है और एक semicolon के साथ समाप्त किया गया है। पूरे नियम को एक sentence के रूप में पढ़ें: "हर कार्ड के लिए, रंग को navy बनाएं और padding को 16 pixels बनाएं।"

हर नियम समान भागों से बनाया गया है, और उन्हें नाम देना बाकी CSS को बात करना आसान बनाता है।

css
.card {
  color: navy;
  padding: 16px;
}

Selector (.card) तत्वों को चुनता है जो नियम लक्ष्य करता है। curly braces declaration block को रखते हैं। इसके अंदर, प्रत्येक property: value; जोड़ी एक declaration है: color property है, navy value है, colon उन्हें जोड़ता है और semicolon उन्हें terminate करता है। Semicolon declarations के बीच एक separator है, इसलिए आखिरी को technically इसकी आवश्यकता नहीं है, लेकिन किसी भी तरह इसे रखें: बाद में next declaration जोड़ना एक-पंक्ति परिवर्तन बन जाता है बजाय दो की। कौन से तत्व selector match करता है, और यह कितना विशिष्ट है, selectors chapter का विषय है।

Grammar छोटा है और precisely कहना लायक है, क्योंकि हर बाद की concept इन शर्तों में परिभाषित है। एक rule एक selector है (pattern जो तय करता है कि नियम किन तत्वों पर लागू होता है) declaration block के बाद (curly braces)। ब्लॉक के अंदर declarations की एक list बैठती है, प्रत्येक एक colon द्वारा value के साथ जोड़ी गई property और एक semicolon द्वारा terminate की गई।

css
.card {
  color: navy;
  padding: 16px;
}

Debugging में यहाँ precision काम करता है। एक malformed declaration, say एक misspelled property या एक invalid value, parser द्वारा अपने आप discard किया जाता है, और block का बाकी हिस्सा अभी भी लागू होता है; CSS per-declaration fail होता है, per-rule नहीं, यही कारण है कि एक single typo quietly एक पंक्ति को drop करता है पूरे कार्ड को break करने की बजाय। Semicolon एक separator है, terminator नहीं, इसलिए यह final declaration के बाद optional है, लेकिन इसे रखने से एक broken rule को रोकता है जिस दिन आप another line को append करते हैं और ऊपर add करना भूल जाते हैं। जब आप cascade को बाद में meet करते हैं, याद रखें कि "कौन सा declaration जीतता है" हमेशा इस declaration level पर operates करता है, property by property।

Junoएक नियम की शारीरिक संरचना एक rule एक selector plus curly braces में declarations का एक set है। Selector जैसे .card तत्वों को चुनता है, और प्रत्येक declaration जैसे color: navy; एक property और मान है जिसके बीच में colon है और अंत में semicolon है। एक बार जब आप उन भागों को नाम दे सकते हैं, हर rule जो आप पढ़ते हैं समान दिखता है।
Junoएक नियम की शारीरिक संरचना Selector, declaration block, और इसके अंदर property: value; declarations: वह हर rule है। Semicolon declarations को separate करता है, इसलिए आखिरी पर भी इसे रखें और next line को जोड़ना एक-पंक्ति edit रहता है। Selectors कैसे match करते हैं और वे कितने specific हैं selectors chapter में आते हैं।
Junoएक नियम की शारीरिक संरचना एक rule एक selector और property: value; declarations का एक block है, और CSS per declaration fail होता है: एक invalid line को drop किया जाता है, block का बाकी हिस्सा survive करता है। यही कारण है कि एक stray typo silently एक single style को remove करता है कार्ड को break करने की बजाय। Trailing semicolon को रखें और declaration को append करना कभी आपको bite नहीं करेगा।

Cascade ​

कभी-कभी दो नियम समान तत्व को style करने की कोशिश करते हैं, और CSS को यह तय करने का तरीका चाहिए कि कौन जीतता है। वह निर्णय cascade है, और यही कारण है कि CSS में C कहां से आता है।

css
.card {
  color: navy;
}

.card {
  color: teal;
}

दोनों नियम कार्ड को target करते हैं और दोनों रंग को सेट करते हैं। कार्ड फ़िरोज़ी का हो जाता है, क्योंकि जब दो नियम की same strength हो, तो बाद में लिखा हुआ rule जीतता है। Order मायने रखता है, और यह फ़ाइल को नीचे की तरह पानी की तरह flows करता है, जो कि cascade का नाम आता है। एक दूसरा tie-breaker भी है: एक अधिक specific selector एक अधिक general को beat करता है, इसलिए एक rule जो आपके कार्ड पर precisely aimed है एक broader rule को override कर सकता है भले ही broader एक बाद में आता है। आप selectors chapter में उस specificity को विस्तार से meet करेंगे।

जब कई नियम समान property को समान तत्व पर सेट करते हैं, तो cascade एक winner को pick करने की प्रक्रिया है। दो factors यहाँ इसका निर्णय लेते हैं: specificity और source order।

css
.card {
  color: navy;
}

.card {
  color: teal;
}

इन दोनों नियमों की identical specificity है, इसलिए source order tie को break करता है और बाद का rule जीतता है: कार्ड फ़िरोज़ी है। जब specificity अलग होती है, हालांकि, यह order को priority देता है: एक अधिक specific selector एक अधिक general को beat करता है यहाँ तक कि जब general rule फ़ाइल में बाद में आता है। अधिक specific जीतता है; एक specificity tie पर, बाद वाला जीतता है। यही कारण है कि फ़ाइल के अंत में overrides को stacking करना एक fragile आदत है, और यही कारण है कि selectors chapter से specificity को समझना cascade को predictable बनाता है guessing game की बजाय।

Cascade एक algorithm है जो एक element पर एक property के लिए competing declarations को resolve करता है, और यह ordered criteria के एक set के माध्यम से चलता है जब तक एक declaration standing नहीं रह जाती।

css
.card {
  color: navy;
}

.card {
  color: teal;
}

दो सबसे common criteria specificity हैं (एक weight जो browser selector से compute करता है) और source order (एक tie पर बाद जीतता है), और ऊपर का example दूसरे पर turns करता है: equal specificity, इसलिए बाद का teal जीतता है। लेकिन वह दोनों एक बड़े ordering के अंदर बैठते हैं। Cascade पहले origin और importance द्वारा sort करता है: browser default styles, फिर आपके author styles, फिर कोई भी user styles, एक normal-versus-important layer के साथ top पर। एक declaration जिसे !important से mark किया गया है एक higher band पर jumps करता है, जो precisely यही है कि यह क्यों exist करता है और precisely यही कारण है कि इससे बचना है। !important normal ordering से छोड़ने से जीतता है correct होने से नहीं, इसलिए यह एक override नहीं लेकिन एक escape hatch है, और एक बार एक !important appears करता है, अगली fix अक्सर एक और है। इसे केवल तभी reach करें जब आप styles को defeat करना चाहते हैं जिसे आप control नहीं करते, जैसे एक inline style या एक third-party widget, और otherwise specificity और order को काम करने दें। जब आप box model को meet करते हैं और कई नियमों को layering शुरू करते हैं, तो यह ordering है जो परिणाम को predictable रखता है।

JunoCascade Cascade यह है कि CSS कैसे एक लड़ाई को settle करता है जब दो नियम एक ही चीज़ को style करते हैं। अगर नियम समान रूप से strong हैं, तो बाद में लिखा हुआ rule जीतता है, इसलिए order counts करता है। एक अधिक specific selector एक अधिक general को beat कर सकता है, और वह भाग selectors chapter में आ रहा है।
JunoCascade जब नियम collide करते हैं, specificity पहले फैसला करता है और source order tie को break करता है: अधिक specific जीतता है, और एक even match पर बाद का rule जीतता है। फ़ाइल के निचले हिस्से में overrides को stacking करना तब तक काम करता है जब तक वह नहीं करता, यही कारण है कि cascade से पहले [selectors chapter](/css/selectors) specificity पर पढ़ने के लायक है।
JunoCascade Cascade origin और importance द्वारा पहले sort करता है, फिर specificity, फिर source order, और यह per property को settle करता है। !important bands को jumping से जीतता है, सही होने से नहीं, इसलिए इसे styles के लिए एक escape hatch के रूप में treat करें जिसे आप control नहीं करते, कभी भी एक routine override नहीं। एक !important अगले को breed करने की trends है।

Inheritance ​

एक रंग को एक बॉक्स पर सेट करें और अंदर का text अक्सर वह रंग भी बन जाता है, भले ही आपने कभी उस text को directly style नहीं किया। वह passing-down inheritance कहलाता है।

css
.site-header {
  color: white;
  font-family: Georgia, serif;
}

Header के अंदर का हर piece of text, एक heading, एक link, एक tagline, अपने rule के बिना वह white color और वह font pick करता है, क्योंकि color और font-family inherited properties हैं। लेकिन सब कुछ pass नहीं होता। Spacing properties जैसे padding inherit नहीं करते: header पर जो padding आप रखते हैं वह header पर रहता है और अंदर के तत्वों पर appear नहीं होता। एक rough guide के रूप में, text-related styles बच्चों को flow करते हैं, और box-related styles जैसे spacing और borders जहाँ रखे हों वहीं रहते हैं।

कुछ properties अपनी value को descendant elements के लिए automatically pass करते हैं, और कुछ नहीं करते। वह behaviour inheritance है, और knowing कौन सी properties inherit करते हैं आपको repeated rules की बहुत सारी save करता है।

css
.site-header {
  color: white;
  font-family: Georgia, serif;
}

Text-related properties inherit करते हैं: color, font-family, font-size, line-height, और similar सभी descendants को flow करते हैं, इसलिए उन्हें एक container पर एक बार set करना अंदर की हर चीज़ को style करता है। Box-related properties नहीं करते: padding, margin, border, और background केवल तत्व पर apply होते हैं जिसे आप उन्हें set करते हैं। जब आप चाहते हैं कि एक value inherit हो जो normally नहीं होगा, inherit keyword इसे force करता है, parent से property की computed value ले रहा है। Inheritance और cascade अलग systems हैं जो together काम करते हैं: cascade एक element के लिए winning declaration का निर्णय करता है, और inheritance यह है कि एक child क्या fall back करता है जब कोई rule उस property को उस पर set नहीं करता। Typography heavily इस पर leans करता है, जो typography chapter इसे build करता है।

Inheritance वह mechanism है जिससे एक element पर कोई cascaded value न होने वाली property अपनी value उस element के parent से लेती है। प्रत्येक CSS property को inherited या नहीं के रूप में परिभाषित किया गया है: अधिकतर text properties (color, font-family, font-size, line-height, text-align) inherit करते हैं; अधिकतर box properties (padding, margin, border, background) नहीं करते, क्योंकि हर descendant पर spacing inherit करना unusable होगा।

css
.site-header {
  color: white;
  font-family: Georgia, serif;
}

चार explicit keywords इसे per declaration को control करते हैं जब defaults नहीं है जो आप चाहते हैं: inherit parent की computed value लेता है यहाँ तक कि एक non-inherited property पर, initial property की specification default पर reset करता है, unset inherited properties के लिए inherit के रूप में act करता है और बाकी के लिए initial, और revert browser की default styling पर roll back करता है। बड़ी तस्वीर यह है कि inheritance और cascade together एक element की computed value produce करते हैं: cascade एक winning declaration select करता है जहाँ एक exist करता है, और जहाँ कोई नहीं करता, एक inherited property अपने parent से draw करता है जबकि एक non-inherited अपनी initial value पर falls करता है। वह single computed value per property, per element यही है जो layout और painting actually consume करते हैं, और custom properties chapter directly inheritance पर leans करता है design tokens को एक component tree के माध्यम से flow करने के लिए।

JunoInheritance Inheritance text styles का एक बॉक्स के अंदर के तत्वों में flowing है: एक header पर color या font-family set करें और अंदर का text free के लिए इसे pick करता है। Spacing जैसे padding pass नहीं होता, यह जहाँ आप रखते हैं वहीं रहता है। Rough rule: text styles children में travel करते हैं, box styles रहते हैं।
JunoInheritance Text properties जैसे color और font-family descendants को inherit करते हैं; box properties जैसे padding और border नहीं करते। एक container को एक बार style करें और अंदर की हर चीज़ text-related इसे follow करती है। जब आप एक value चाहते हैं जो normally inherit नहीं होगा, inherit keyword parent से इसे pull करता है।
JunoInheritance प्रत्येक property definition से inherited या नहीं है: text properties inherit करते हैं, box properties नहीं करते। Keywords inherit, initial, unset, और revert आपको per declaration को override करने देते हैं। Inheritance और cascade together एक computed value per property per element पर settle करते हैं, और वह value यही है जो layout और painting actually use करते हैं।