CSS म्हणजे काय? कॅस्केडिंग स्टाईल शीट्स, रिस्पॉन्सिव्ह सीएसएस, सॅसी सीएसएस, कॉम्प्रेस, मिनीफाइ, अनमिनिफाय, अनकंप्रेस टूल

कॅस्केडिंग स्टाइल शीट्स (CSS) म्हणजे काय?

Douglas Karr गुरुवार, फेब्रुवारी एक्सएनयूएमएक्स, एक्सएनयूएमएक्स

1 104 4 मिनिटे वाचले

कॅस्केडिंग स्टाइलशीट कसे कार्य करतात याच्या संपूर्ण स्पष्टीकरणासाठी खाली वाचा. आम्ही आमचे अॅप्स पृष्ठाच्या शीर्षस्थानी प्रदर्शित करतो जेणेकरून ते शोधणे आणि वापरणे सोपे होईल. जर तुम्ही हा लेख ईमेल किंवा फीडद्वारे वाचत असाल तर त्यावर क्लिक करा तुमचा CSS कॉम्प्रेस करा.

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

CSS भाषा संरचना

अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना निवडकर्ता तुम्हाला स्टाईल करायचा असलेला HTML घटक आहे आणि मालमत्ता आणि मूल्य तुम्ही त्या घटकावर लागू करू इच्छित शैली परिभाषित करा:

selector {
  property: value;
}

उदाहरणार्थ, खालील CSS सर्व बनवेल <h1> पृष्ठावरील घटकांचा लाल रंग आणि फॉन्ट आकार 32px आहे:

CSS

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

उत्पादन

शीर्षक

तुम्ही एखाद्या घटकावरील युनिक आयडीसाठी CSS देखील निर्दिष्ट करू शकता:

CSS

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

उत्पादन

परिचय

किंवा एकाधिक घटकांवर वर्ग लागू करा:

CSS

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

उत्पादन

मला करायचे आहे हायलाइट स्पॅन टॅगमधील एक शब्द.

तुम्ही तुमच्या HTML दस्तऐवजात CSS तीन प्रकारे समाविष्ट करू शकता:

इनलाइन CSS, वापरून style HTML घटकावर विशेषता

अंतर्गत CSS, वापरून a <style> मध्ये घटक <head> तुमच्या HTML दस्तऐवजाचा
बाह्य CSS, वापरून आपल्या HTML दस्तऐवजाशी लिंक केलेली स्वतंत्र .css फाइल वापरून <link> मध्ये घटक <head> तुमच्या HTML दस्तऐवजाचा

प्रतिसाद देणारा CSS

CSS हे आश्चर्यकारकपणे लवचिक आहे आणि स्क्रीन रिझोल्यूशनवर आधारित घटकांचे प्रदर्शन समायोजित करण्यासाठी वापरले जाऊ शकते, त्यामुळे आपल्याकडे समान HTML असू शकते परंतु ते तयार करा प्रतिसाद डिव्हाइस रिझोल्यूशनसाठी:

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

CSS कॉम्प्रेशन

तुम्ही वरील उदाहरणात पाहू शकता की एक टिप्पणी, मीडिया क्वेरी आणि एकाधिक शैली आहेत ज्या CSS चे दृश्य व्यवस्थापित करण्यासाठी स्पेस आणि लाइन फीड्स वापरतात. फाइल आकार कमी करण्यासाठी तुमच्या साइटवर तुमचे CSS कमी करणे किंवा संकुचित करणे आणि त्यानंतर, तुमच्या स्टाइलची विनंती आणि रेंडर करण्यासाठी लागणारा वेळ कमी करणे हा एक उत्तम सराव आहे. ही काही छोटी रक्कम नाही… वरील काही उदाहरणांवर तुम्ही ५०% पेक्षा जास्त बचत पाहू शकता.

बर्‍याच सर्व्हर कॉन्फिगरेशन्स अशी साधने ऑफर करतात जी फ्लायवर स्वयंचलितपणे CSS संकुचित करतील आणि मिनिफाइड फाइल कॅशे करतील जेणेकरून तुम्हाला ते व्यक्तिचलितपणे करावे लागणार नाही.

SCSS म्हणजे काय?

सॅसी सीएसएस (एससीएसएस) हा CSS प्रीप्रोसेसर आहे जो CSS भाषेत अतिरिक्त कार्यक्षमता आणि वाक्यरचना जोडतो. हे व्हेरिएबल्स, मिक्सिन, फंक्शन्स आणि मानक CSS मध्ये उपलब्ध नसलेल्या इतर वैशिष्ट्यांचा वापर करण्यास परवानगी देऊन CSS ची क्षमता वाढवते.

SCSS फायदे

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

SCSS तोटे

शिकण्याची वक्र: 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 चे आणखी एक वैशिष्ट्य जे या उदाहरणात दाखवले आहे ते म्हणजे नेस्टेड शैली. SCSS कोडमध्ये, द h1 मध्ये शैली नेस्ट केल्या आहेत body शैली, जे मानक CSS मध्ये शक्य नाही. जेव्हा SCSS कोड संकलित केला जातो, तेव्हा नेस्टेड शैली CSS कोडमध्ये वेगळ्या शैलींमध्ये विस्तारित केल्या जातात.

एकंदरीत, SCSS मानक CSS पेक्षा बरेच फायदे प्रदान करते, परंतु ट्रेड-ऑफचा विचार करणे आणि आपल्या गरजा आणि मर्यादांवर आधारित आपल्या प्रकल्पासाठी योग्य साधन निवडणे महत्त्वाचे आहे.