सामग्री का विपणन

कैस्केडिंग स्टाइल शीट्स (सीएसएस) क्या हैं?

कैस्केडिंग स्टाइलशीट कैसे काम करती है, इसकी पूरी व्याख्या के लिए नीचे पढ़ें। हम अपने ऐप्स को पृष्ठ के शीर्ष पर प्रदर्शित करते हैं ताकि इसे ढूंढना और उपयोग करना आसान हो। यदि आप इस लेख को ईमेल या फ़ीड के माध्यम से पढ़ रहे हैं, तो क्लिक करें अपने CSS को कंप्रेस करें.

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

सीएसएस भाषा संरचना

RSI चयनकर्ता वह HTML तत्व है जिसे आप शैलीबद्ध करना चाहते हैं, और संपत्ति और मूल्य उन शैलियों को परिभाषित करें जिन्हें आप उस तत्व पर लागू करना चाहते हैं:

selector {
  property: value;
}

उदाहरण के लिए, निम्नलिखित सीएसएस सभी बना देगा <h1> पृष्ठ पर तत्वों का रंग लाल और फ़ॉन्ट आकार 32px है:

सीएसएस

h1 {
  color: red;
  font-size: 32px;
}

उत्पादन

शीर्षक

आप किसी तत्व पर अद्वितीय आईडी के लिए सीएसएस भी निर्दिष्ट कर सकते हैं:

सीएसएस

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

उत्पादन

पहचान

या कई तत्वों में एक वर्ग लागू करें:

सीएसएस

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

उत्पादन

मैं चाहता हूँ पर प्रकाश डाला स्पैन टैग में एक शब्द।

आप अपने HTML दस्तावेज़ में CSS को तीन तरीकों से शामिल कर सकते हैं:

  1. इनलाइन सीएसएस, का उपयोग कर style एक HTML तत्व पर विशेषता
  2. आंतरिक सीएसएस, एक का उपयोग कर <style> में तत्व <head> आपके HTML दस्तावेज़ का
  3. बाहरी CSS, आपके HTML दस्तावेज़ से जुड़ी एक अलग .css फ़ाइल का उपयोग करके <link> में तत्व <head> आपके HTML दस्तावेज़ का

उत्तरदायी सीएसएस

CSS अविश्वसनीय रूप से लचीला है और इसका उपयोग स्क्रीन रिज़ॉल्यूशन के आधार पर तत्वों के प्रदर्शन को समायोजित करने के लिए किया जा सकता है, इसलिए आपके पास वही HTML हो सकता है लेकिन इसे बनाएं उत्तरदायी डिवाइस संकल्प के लिए:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

सीएसएस संपीड़न

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

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

एससीएसएस क्या है?

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

एससीएसएस लाभ

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

एससीएसएस के नुकसान

  • लर्निंग कर्व: SCSS का मानक CSS से अलग सिंटैक्स है, और इससे पहले कि आप इसे प्रभावी ढंग से उपयोग कर सकें, आपको इस नए सिंटैक्स को सीखना होगा।
  • अतिरिक्त जटिलता: हालांकि SCSS आपकी स्टाइलशीट को अधिक व्यवस्थित और बनाए रखने में आसान बना सकता है, यह आपके कोडबेस में अतिरिक्त जटिलता भी ला सकता है, खासकर यदि आप नई सुविधाओं और सिंटैक्स से परिचित नहीं हैं।
  • टूलिंग: SCSS का उपयोग करने के लिए, आपको अपने SCSS कोड को CSS में अनुवादित करने के लिए एक कंपाइलर की आवश्यकता होगी। इसके लिए अतिरिक्त सेटअप और टूलिंग की आवश्यकता होती है, जो कुछ डेवलपर्स के लिए प्रवेश में बाधा बन सकता है।

नीचे दिए गए इस उदाहरण में, SCSS कोड मानों को संग्रहीत करने के लिए वेरिएबल्स का उपयोग करता है ($primary-color और $font-size) जिसे पूरी स्टाइलशीट में पुन: उपयोग किया जा सकता है। इस SCSS कोड से उत्पन्न होने वाला CSS कोड समतुल्य है, लेकिन इसमें चर शामिल नहीं हैं। इसके बजाय, चर के मान सीधे CSS में उपयोग किए जाते हैं।

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

इस उदाहरण में प्रदर्शित की गई SCSS की एक अन्य विशेषता नेस्टेड शैलियाँ हैं। एससीएसएस कोड में, h1 शैलियों के भीतर नेस्टेड हैं body Styles, जो कि Standard CSS में संभव नहीं है। जब SCSS कोड संकलित किया जाता है, तो नेस्टेड शैलियों को CSS कोड में अलग-अलग शैलियों में विस्तारित किया जाता है।

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

Douglas Karr

Douglas Karr के सीएमओ हैं खुली अंतर्दृष्टि और के संस्थापक Martech Zone. डगलस ने दर्जनों सफल मार्टेक स्टार्टअप्स की मदद की है, मार्टेक अधिग्रहणों और निवेशों में $5 बिलियन से अधिक की उचित परिश्रम में सहायता की है, और कंपनियों को उनकी बिक्री और विपणन रणनीतियों को लागू करने और स्वचालित करने में सहायता करना जारी रखा है। डगलस एक अंतरराष्ट्रीय स्तर पर मान्यता प्राप्त डिजिटल परिवर्तन और मार्टेक विशेषज्ञ और वक्ता हैं। डगलस डमी गाइड और बिजनेस लीडरशिप पुस्तक के प्रकाशित लेखक भी हैं।

संबंधित आलेख

शीर्ष पर वापस करने के लिए बटन
समापन

पता लगाया गया

Martech Zone आपको यह सामग्री बिना किसी लागत के प्रदान करने में सक्षम है क्योंकि हम विज्ञापन राजस्व, संबद्ध लिंक और प्रायोजन के माध्यम से अपनी साइट से कमाई करते हैं। यदि आप हमारी साइट देखते समय अपना विज्ञापन अवरोधक हटा देंगे तो हम आभारी होंगे।