154 CSS प्रॉपर्टी की संदर्भ सूची
हर प्रॉपर्टी क्या करती है, कौन-से मान असल में काम आते हैं और क्या वह विरासत में जाती है — एक-एक पंक्ति में।
लेआउट11
वे प्रॉपर्टी जो तय करती हैं कि तत्व किस तरह का बॉक्स है और उमड़ने पर क्या हो।
displayतय करता है कि तत्व किस तरह का बॉक्स बने — हर लेआउट का शुरुआती बिंदु।visibilityदिखाता या छिपाता है; hidden पर भी जगह घिरी रहती है।floatतत्व को एक ओर तैराता है ताकि पाठ बगल से बहे; अब flex और grid यह काम करते हैं।clearतत्व को पिछले फ़्लोट के नीचे धकेलता है।overflowतय करता है कि उमड़ती सामग्री कटे या स्क्रॉल हो।overflow-xसिर्फ़ क्षैतिज दिशा का ओवरफ़्लो संभालता है।overflow-yसिर्फ़ ऊर्ध्व दिशा का ओवरफ़्लो संभालता है।box-sizingतय करता है कि चौड़ाई में पैडिंग और बॉर्डर शामिल हों; border-box में हिसाब आसान रहता है।aspect-ratioचौड़ाई-ऊँचाई अनुपात तय करता है; एक पक्ष देने पर दूसरा अपने आप बनता है।container-typeशैलियों को स्क्रीन नहीं, मूल बॉक्स के आकार पर प्रतिक्रिया देने देता है।isolationनई परत बनाता है ताकि ब्लेंडिंग बाहर न फैले।
फ़्लेक्स और ग्रिड24
वे प्रॉपर्टी जो तत्वों को पंक्तिबद्ध करती और ग्रिड में बैठाती हैं — आज का अधिकांश लेआउट इन्हीं दो से बनता है।
flex-directionतय करता है कि flex आइटम पंक्ति में चलें या स्तंभ में।flex-wrapतय करता है कि जगह न बचने पर आइटम अगली पंक्ति में जाएँ।flexबची जगह का बँटवारा एक साथ तय करता है; flex: 1 बराबर बाँटता है।flex-growयह आइटम बची जगह का कितना हिस्सा ले।flex-shrinkजगह कम पड़ने पर आइटम कितना सिकुड़े; 0 पर नहीं सिकुड़ता।flex-basisबढ़ने या सिकुड़ने से पहले का आधार आकार।justify-contentमुख्य अक्ष पर आइटम कैसे बँटें, यह तय करता है।align-itemsक्रॉस अक्ष पर आइटम कैसे संरेखित हों; center ऊर्ध्व केंद्र देता है।align-selfसिर्फ़ एक आइटम का संरेखण बदलता है।align-contentकई पंक्तियाँ होने पर पंक्तियों के बीच की जगह बाँटता है।gapआइटम के बीच की जगह — मार्जिन के उलट बाहर कुछ नहीं जुड़ता।row-gapसिर्फ़ पंक्तियों के बीच की जगह तय करता है।column-gapसिर्फ़ स्तंभों के बीच की जगह तय करता है।orderHTML क्रम बदले बिना दिखने का क्रम बदलता है।grid-template-columnsग्रिड में कितने स्तंभ और कितने चौड़े हों, यह तय करता है।grid-template-rowsग्रिड में कितनी पंक्तियाँ और कितनी ऊँची हों, यह तय करता है।grid-template-areasग्रिड क्षेत्रों को नाम देता है ताकि लेआउट चित्र की तरह लिखा जा सके।grid-columnतय करता है कि आइटम कितने स्तंभों में फैले।grid-rowतय करता है कि आइटम कितनी पंक्तियों में फैले।grid-auto-flowबिना स्थान वाले आइटम किस दिशा में भरें, यह तय करता है।grid-auto-rowsस्वतः बनने वाली पंक्तियों की ऊँचाई तय करता है।place-itemsदोनों अक्षों का संरेखण एक साथ तय करता है; अकेला center सब केंद्र में लाता है।place-contentपूरी सामग्री-गुल्ली को दोनों अक्षों पर रखता है।justify-itemsहर कोशिका के भीतर आइटम को क्षैतिज रूप से रखता है।
बॉक्स और जगह16
आकार और जगह। बाहरी मार्जिन आपस में मिल जाते हैं; भीतरी पैडिंग पर पृष्ठभूमि का रंग चढ़ता है।
widthक्षैतिज आकार; 100% मूल तत्व और 100vw स्क्रीन के अनुसार।heightऊर्ध्व आकार; auto पर उतना ही जितना सामग्री माँगे।min-widthबॉक्स को इससे पतला नहीं होने देता; flex में 0 उसे सिकुड़ने देता है।max-widthचौड़ाई की ऊपरी सीमा; पंक्ति की लंबाई पठनीय रखने का सामान्य तरीक़ा।min-heightबॉक्स को इससे कम ऊँचा नहीं होने देता।max-heightऊँचाई की ऊपरी सीमा; बाक़ी overflow संभालता है।marginबाहरी जगह; ऊपर-नीचे के मार्जिन आपस में मिलकर एक हो जाते हैं।margin-topऊपर की बाहरी जगह।margin-rightदाईं ओर की बाहरी जगह; auto देने पर बॉक्स बाईं ओर खिसकता है।margin-bottomनीचे की बाहरी जगह।margin-leftबाईं ओर की बाहरी जगह; दोनों ओर auto देने पर बॉक्स केंद्र में आ जाता है।paddingभीतरी जगह; पृष्ठभूमि का रंग यहाँ तक फैलता है।padding-topऊपर की भीतरी जगह।padding-rightदाईं ओर की भीतरी जगह।padding-bottomनीचे की भीतरी जगह; प्रतिशत में देने पर ऊँचाई भी बनती है।padding-leftबाईं ओर की भीतरी जगह।
पाठ25
फ़ॉन्ट, पंक्ति अंतराल, संरेखण — पाठ कैसे पढ़ा जाए। इनमें से अधिकांश विरासत में जाती हैं।
font-sizeपाठ का आकार; rem मूल आकार का गुणक है और पाठक की ज़ूम सेटिंग का अनुसरण करता है।font-familyटाइपफ़ेस तय करता है; ब्राउज़र सूची में आगे बढ़ता है, इसलिए अंत में सामान्य परिवार दें।font-weightअक्षरों की मोटाई; 400 सामान्य और 700 बोल्ड।font-styleतिरछापन चालू या बंद करता है।fontफ़ॉन्ट के कई मान एक साथ; छोड़े गए मान डिफ़ॉल्ट पर लौट जाते हैं।line-heightपंक्ति अंतराल; 1.5 जैसा बिना इकाई मान विरासत में सुरक्षित रहता है।letter-spacingअक्षरों के बीच की जगह; बड़े शीर्षकों में थोड़ा कसने पर सुव्यवस्थित लगता है।word-spacingशब्दों के बीच की जगह।text-alignपाठ को क्षैतिज रूप से संरेखित करता है।text-decorationरेखांकन या काट जोड़ता है; लिंक का डिफ़ॉल्ट रेखांकन हटाने में भी काम आता है।text-decoration-lineसिर्फ़ यह चुनता है कि कौन-सी रेखा खिंचे।text-decoration-colorसिर्फ़ उस रेखा का रंग तय करता है।text-decoration-styleरेखा की शैली; wavy वर्तनी-जाँच जैसी लहरदार रेखा देता है।text-transformसिर्फ़ प्रदर्शन में अक्षर-रूप बदलता है; मूल पाठ वैसा ही रहता है।text-indentखंड की पहली पंक्ति को अंदर करता है।text-overflowउमड़ते पाठ को इलिप्सिस से काटता है; साथ में overflow और nowrap चाहिए।text-shadowपाठ के पीछे छाया डालता है — तस्वीर पर सफ़ेद अक्षरों के लिए उपयोगी।white-spaceस्पेस और लाइन ब्रेक का व्यवहार; nowrap सब एक पंक्ति में रखता है।word-breakलंबे शब्द कहाँ टूटें; keep-all कोरियाई शब्दों को बीच से टूटने से रोकता है।overflow-wrapबहुत लंबी अटूट शृंखलाओं को ज़बरन तोड़ता है — लंबे URL के लिए उपयोगी।writing-modeपाठ के बहाव की दिशा बदलता है — ऊर्ध्व लेखन इसी से होता है।vertical-alignपंक्ति के भीतर ऊर्ध्व संरेखण; तालिका कोशिकाओं में भी काम करता है।font-variant-numericअंकों की शैली चुनता है; tabular-nums सबकी चौड़ाई बराबर रखकर तालिकाएँ स्थिर करता है।hyphensपंक्ति के अंत में शब्द हाइफ़न से टूटें या नहीं; भाषा घोषित होनी चाहिए।text-wrapपंक्तियाँ कैसे टूटें; balance शीर्षक की पंक्तियों की लंबाई बराबर करता है।
रंग और पृष्ठभूमि13
पाठ का रंग, पृष्ठभूमि रंग, ग्रेडिएंट और पारदर्शिता।
colorपाठ का रंग; currentColor इसी मान को दोहराता है।background-colorपृष्ठभूमि का रंग; यह पैडिंग तक भरता है।background-imageपृष्ठभूमि में चित्र या ग्रेडिएंट रखता है; कई परतें भी लग सकती हैं।background-sizeपृष्ठभूमि चित्र का आकार; cover बिना अंतराल भरता है, contain पूरा दिखाता है।background-positionबॉक्स में पृष्ठभूमि चित्र की स्थिति तय करता है।background-repeatतय करता है कि पृष्ठभूमि चित्र दोहराया जाए या नहीं।background-attachmentतय करता है कि पृष्ठभूमि स्क्रॉल के साथ चले या टिकी रहे।backgroundपृष्ठभूमि के सभी मान एक साथ; छोड़े गए मान डिफ़ॉल्ट पर लौटते हैं।background-clipपृष्ठभूमि कहाँ तक रंगे; text इसे अक्षरों के आकार में काटता है।opacityसमग्र पारदर्शिता; बच्चे तत्व भी साथ में धुँधले होते हैं।mix-blend-modeनीचे की चीज़ों के साथ रंग कैसे मिलें, यह तय करता है।accent-colorचेकबॉक्स और रेडियो जैसे ब्राउज़र-निर्मित नियंत्रणों का रंग।color-schemeबताता है कि पन्ना हल्की या गहरी योजना में से किसे मानता है।
बॉर्डर13
बॉर्डर, कोने और छाया। आउटलाइन अपनी कोई जगह नहीं लेती।
borderबॉर्डर की मोटाई, शैली और रंग एक पंक्ति में।border-widthसिर्फ़ बॉर्डर की मोटाई तय करता है।border-styleसिर्फ़ शैली तय करता है; इसके बिना बॉर्डर दिखता ही नहीं।border-colorसिर्फ़ बॉर्डर का रंग तय करता है।border-topसिर्फ़ ऊपरी बॉर्डर तय करता है।border-bottomसिर्फ़ निचला बॉर्डर — सूची पंक्तियों का सामान्य विभाजक।border-radiusकोने गोल करता है; 50% वृत्त और बहुत बड़ा मान गोली जैसा आकार देता है।outlineबॉर्डर के बाहर खिंची रेखा; जगह नहीं लेती, इसलिए कीबोर्ड फ़ोकस में काम आती है।outline-widthसिर्फ़ आउटलाइन की मोटाई तय करता है।outline-styleसिर्फ़ आउटलाइन की शैली तय करता है।outline-colorसिर्फ़ आउटलाइन का रंग तय करता है।outline-offsetआउटलाइन को तत्व से कितनी दूर रखे, यह तय करता है।box-shadowबॉक्स के चारों ओर छाया; inset लगाने पर वह भीतर चली जाती है।
प्रभाव7
सब कुछ रंगने के बाद लगने वाले प्रभाव — धुँधलापन, कटाई, भराई।
filterधुँधलापन, श्वेत-श्याम, चमक जैसे प्रभाव; कई एक साथ जोड़े जा सकते हैं।backdrop-filterतत्व के पीछे की सामग्री पर प्रभाव डालता है — धुँधले काँच का रूप इसी से।clip-pathतत्व को दिए गए आकार में काटता है।mask-imageचित्र की चमक के अनुसार तत्व छिपाता है — किनारे धीरे-धीरे मिटाने में उपयोगी।object-fitचित्र या वीडियो बॉक्स को कैसे भरे; cover काटकर भरता है।object-positionकटाई में कौन-सा हिस्सा बचे; तस्वीर में चेहरा बचाने का तरीक़ा।image-renderingबड़ा करने पर चिकना या स्पष्ट — पिक्सेल आर्ट के लिए pixelated।
रूपांतरण और गति14
खिसकाना, घुमाना और सहज संक्रमण। लेआउट अछूता रहता है, इसलिए बाक़ी कुछ नहीं उछलता।
transformखिसकाता, घुमाता और बड़ा करता है; लेआउट बॉक्स वहीं रहता है, बाक़ी नहीं हिलता।transform-originघुमाव और स्केलिंग का आधार बिंदु।transitionमान बदलने पर सहज संक्रमण; एक पंक्ति में क्या, कितनी देर और कैसे।transition-propertyकौन-सी विशेषताएँ एनिमेट हों; all सुविधाजनक है पर भारी पड़ सकता है।transition-delayशुरू होने से पहले कितनी देर रुके।transition-durationबदलाव में लगने वाला समय; लगभग 0.2 सेकंड स्वाभाविक लगता है।transition-timing-functionगति का प्रवाह; ease शुरू और अंत में कोमल रहता है।animationतय कीफ़्रेम चलाता है; नाम, अवधि और दोहराव एक पंक्ति में।animation-nameचलाए जाने वाले कीफ़्रेम का नाम।animation-timing-functionगति का प्रवाह; steps देने पर यह चरणों में बढ़ता है।animation-durationएक चक्र में लगने वाला समय।animation-iteration-countकितनी बार दोहराए; infinite पर कभी नहीं रुकता।will-changeब्राउज़र को आने वाले बदलाव की सूचना; अति करने पर उल्टा असर होता है।perspective3D रूपांतरण की गहराई; छोटा मान प्रभाव को बढ़ा देता है।
स्थिति7
तत्व को प्रवाह से हटाकर रखना; z-index तय करता है कि आगे कौन रहे।
positionस्थिति निर्धारण की विधि; sticky स्क्रॉल पर तत्व को तय जगह चिपका देता है।topऊपरी किनारे से कितनी दूरी।rightदाएँ किनारे से कितनी दूरी।bottomनिचले किनारे से कितनी दूरी।leftबाएँ किनारे से कितनी दूरी।insetचारों दूरियाँ एक साथ; 0 पर तत्व मूल बॉक्स को पूरा भर देता है।z-indexऊपर कौन रहे, यह तय करता है; तुलना एक ही स्टैकिंग संदर्भ में होती है।
तालिकाएँ4
तालिका के बॉर्डर और स्तंभ चौड़ाई की प्रॉपर्टी।
सूचियाँ4
सूची मार्करों का आकार और स्थान।
परस्पर क्रिया9
तत्व माउस, उँगली और स्क्रॉल पर कैसे प्रतिक्रिया दे।
cursorमाउस पॉइंटर का आकार; pointer बताता है कि चीज़ क्लिक-योग्य है।pointer-eventsतय करता है कि तत्व पॉइंटर इनपुट ले या नहीं; none पर क्लिक पार निकल जाते हैं।user-selectतय करता है कि पाठ खींचकर चुना जा सके या नहीं।touch-actionब्राउज़र कौन-से टच जेस्चर संभाले; manipulation डबल-टैप ज़ूम हटा देता है।scroll-behaviorस्क्रॉल तुरंत हो या सहज, यह तय करता है।scroll-snap-typeस्क्रॉल को तय बिंदुओं पर टिकाता है — क्षैतिज सूचियों में आम।overscroll-behaviorअंत तक स्क्रॉल करने पर मूल तत्व चले या नहीं; contain भीतर ही रोकता है।resizeउपयोगकर्ता आकार बदल सके या नहीं; अक्सर textarea में।caret-colorइनपुट में टिमटिमाते कर्सर का रंग।
प्रिंट और अन्य7
बाक़ी सब — छपाई, उत्पन्न सामग्री और स्वतः संख्यांकन।
page-break-afterछपाई में इसके बाद पृष्ठ बदले या नहीं।break-insideतत्व पन्नों या स्तंभों के बीच न टूटे, यह रोकता है।content::before या ::after से बनने वाली सामग्री; अक्सर सिर्फ़ खाली उद्धरण।counter-resetगिनती शुरू करता या रीसेट करता है।counter-incrementगिनती एक बढ़ाता है; content के साथ मिलकर शीर्षकों की संख्या बनाता है।quotesq तत्व किन उद्धरण चिह्नों का प्रयोग करे, भाषा के अनुसार।allतत्व की सारी विशेषताएँ एक साथ रीसेट करता है — विरासती शैलियाँ मिटाने का सीधा तरीक़ा।
कैसे पढ़ें
- विरासत में जाने वाली प्रॉपर्टी मूल तत्व पर एक बार लिखें — सभी बच्चे उसे पा लेते हैं। पाठ की अधिकांश प्रॉपर्टी ऐसी ही हैं।
- शॉर्टहैंड छोड़े गए मान रीसेट कर देता है। सिर्फ़ background: red लिखने पर पहले लगाई पृष्ठभूमि छवि भी मिट जाती है।
- नियम टकराएँ तो अधिक विशिष्ट सिलेक्टर जीतता है; विशिष्टता बराबर हो तभी क्रम तय करता है।
- सहजता के लिए transform और opacity एनिमेट करें। width या top बदलने पर लेआउट दोबारा गणना करनी पड़ती है।
अक्सर पूछे जाने वाले सवाल
Q. CSS प्रॉपर्टी कुल कितनी हैं?
मानक में 500 से ऊपर हैं, पर रोज़ के काम में कुछ ही आती हैं। यहाँ वही 154 हैं जो बार-बार लिखनी पड़ती हैं, उद्देश्य के अनुसार।
Q. "विरासत में जाना" का क्या अर्थ है?
मान नीचे चला जाता है: मूल तत्व पर लिखिए और बच्चे बिना दोहराए उसे इस्तेमाल करते हैं। पाठ से जुड़ी अधिकांश प्रॉपर्टी विरासत में जाती हैं; जगह और बॉर्डर नहीं।
Q. शॉर्टहैंड इस्तेमाल करने पर क्या बदलता है?
एक पंक्ति में कई मान तय होते हैं, पर जो छोड़ा वह डिफ़ॉल्ट पर लौट जाता है। इसीलिए अकेला background: red पहले लगाई पृष्ठभूमि छवि भी मिटा देता है।
Q. एक ही प्रॉपर्टी दो बार लिखी हो तो कौन जीतती है?
पहले विशिष्टता देखी जाती है: id क्लास से और क्लास टैग से भारी है। विशिष्टता बराबर हो तभी बाद वाला नियम जीतता है। !important सब पलट देता है, इसीलिए उससे बचना बेहतर है।
Q. px लें या rem?
rem मूल फ़ॉन्ट आकार का गुणक है, इसलिए पाठक द्वारा ब्राउज़र में अक्षर बड़े करने पर यह भी बढ़ता है। अक्षर और जगह के लिए rem सुरक्षित है; जहाँ मान कभी न बदले, जैसे बारीक बॉर्डर, वहाँ px ठीक है।