सीएसएस आशुलिपि गुण

जानें कि CSS शॉर्टहैंड प्रॉपर्टी का उपयोग कैसे करें अपनी स्टाइलशीट को कम जगह घेरने के लिए।

CSS शॉर्टहैंड गुण आपको कम लिखने और अधिक करने की अनुमति देते हैं।

मान लें कि आप अपने h1 . को स्टाइल करना चाहते हैं जॉर्जिया . के साथ तत्व फ़ॉन्ट-फ़ैमिली, 42 पिक्सेल का फ़ॉन्ट-आकार और 1.25 की लाइन-ऊंचाई।

सबसे पहले, आइए नीचे दी गई सामान्य CSS विधि को देखें:

h1 {
    font-family: "Georgia", "serif";
    font-size: 42px;
    line-height: 1.25;
}

अब इसकी तुलना CSS फ़ॉन्ट . के उपयोग से करें नीचे आशुलिपि विधि:

h1 {
    font: 42px/1.25 "Georgia", "serif";
}

तीन पंक्तियों को एक में संघनित किया गया!

आशुलिपि गुण कई शैली घोषणाओं को एक पंक्ति में जोड़कर काम करते हैं और आपके कोड को कम जगह लेने की अनुमति देते हैं।

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

आइए प्वाइंट होम चलाने के लिए एक और शॉर्टहैंड सीएसएस संपत्ति उदाहरण देखें।

यहाँ एक बटन है जिसमें ऊपर और नीचे की पैडिंग 12px है, और बाएँ और दाएँ पैडिंग 20px है:

यह निम्नलिखित पैडिंग गुणों का उपयोग करता है:

button {
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
}

आइए अब शॉर्टहैंड padding का उपयोग करें संपत्ति और सीएसएस को कम फूला हुआ बनाएं:

button {
    padding: 12px 20px; /* top-bottom, left-right */
}

चार पंक्तियों को एक में संघनित किया गया!

padding उपरोक्त शॉर्टहैंड को दो-मान शॉर्टहैंड कहा जाता है, क्योंकि ठीक है, यह दो मानों का उपयोग करता है।

• पहला मान 12px padding-top से मेल खाती है और padding-bottom संपत्ति।
• द 20px मान padding-left से मेल खाता है और padding-right ।

यहां CSS में शॉर्टहैंड प्रॉपर्टी की पूरी सूची दी गई है:

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

Mozilla के संपूर्ण CSS शॉर्टहैंड डॉक्स देखें।

सभी आशुलिपि गुण याद रखने योग्य नहीं हैं क्योंकि संभावना है कि आप शायद ही कभी उनका उपयोग करें। हालांकि, इस ट्यूटोरियल से शॉर्टहैंड दो उदाहरण font और padding , सबसे अधिक इस्तेमाल किए जाने वाले शॉर्टहैंड में से कुछ हैं।

निम्नलिखित आशुलिपि गुण भी देखने लायक हैं (क्योंकि आप उनका बहुत उपयोग करेंगे) margin , background , border , animation , transition , border-radius ।