बेसिक सीएसएस-संचालित वेब साइट्स कैसे बनाएं

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

त्वरित अवलोकन

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

गलत रास्ता

आपको यह जानने के लिए कि सीएसएस को ठीक करने के लिए क्या मतलब है, इस HTML कोड पर नज़र डालें:

 मेरा आमुख पृष्ठ 
वर्तमान में सबसे बड़ी वेबसाइट वर्तमान में विकास में है।


एलियंस ने भी हमला किया है।

जो आपके ब्राउज़र में इस तरह कुछ दिखाता है:

यहां कई संभावित समस्याएं हैं। स्टार्टर्स के लिए, जब भी कोई नया हेडर या पैराग्राफ खींचा जाता है तो यह फ़ॉन्ट और रंग की जानकारी रखता है। साइट पर प्रत्येक नई वस्तु को समान फ़ॉन्ट और रंग परिभाषाओं की आवश्यकता होगी, भले ही वे प्रत्येक शीर्षक और अनुच्छेद के लिए समान हों। यदि आपके पास बहुत सारी प्रविष्टियां हैं तो यह बर्बाद बैंडविड्थ के भार की मात्रा है।

अगला स्केलेबिलिटी की समस्या है। अगर आपको इस समाचार पृष्ठ पर 100 प्रविष्टियां मिली हैं, और आप तय करते हैं कि हेडलाइंस लाल होनी चाहिए, तो आपको नया रंग दिखाने के लिए प्रत्येक शीर्षक टैग को बदलने के लिए आपके पास बहुत काम है।

तीसरा, और यह "उचित प्रक्रिया" का विषय है, इस पृष्ठ में कई तत्व हैं जो "प्रस्तुति" हैं, न कि "संरचनात्मक"। फ़ॉन्ट, रंग, और लाइनब्रेक टैग सभी संबंधित हैं कि पृष्ठ कैसे प्रस्तुत किया जाता है और पृष्ठ की संरचना से कोई लेना देना नहीं है। एचटीएमएल प्रस्तुति के लिए खराब रूप से अनुकूल है, यह काम सीएसएस के लिए सबसे अच्छा है, जैसा कि हम नीचे दिखाएंगे।

सीएसएस के साथ डिजाइनिंग

तो हम उन सभी अतिरिक्त टैग को कैसे हटा सकते हैं? हमारे रंग और लेआउट को रखते हुए हम पेज आकार को कैसे कम कर सकते हैं? खैर, छवि आप एक ही स्थान पर परिभाषित कर सकते हैं जो आपके सभी शीर्षकों को दिखाना चाहिए (कहें, बड़ा हरा पाठ)। फिर आपको प्रत्येक अद्वितीय शीर्षक के लिए रंग परिभाषित करने की आवश्यकता नहीं है। यह पैराग्राफ पर भी लागू होता है। यदि आप सभी पैराग्राफ टेक्स्ट को नीला होना चाहते हैं, तो आप इसे "पी" टैग के लिए बस एक सीएसएस नियम के रूप में सेट करें। सभी आगे के पैराग्राफ में नीले पाठ होंगे, बिना आपको हर बार इसे निर्दिष्ट करना होगा।

सीएसएस सबसे अच्छा उदाहरण के द्वारा सिखाया जाता है। चलिए ऊपर वर्णित नियमों को परिभाषित करके शुरू करते हैं - सभी शीर्षकों को हरा होना चाहिए और सभी पैराग्राफ नीले रंग के होने चाहिए। अपनी पसंद के टेक्स्ट एडिटर का उपयोग करके, style.css नाम की एक नई फ़ाइल शुरू करें और निम्न टेक्स्ट जोड़ें:

 एच 1 {रंग: हरा;} पी {रंग: नीला;} 

यह सभी एच 1 टैग को हरे रंग के पाठ के रूप में परिभाषित करता है, और सभी पी टैग नीले पाठ के रूप में परिभाषित करता है।

हमें बस इतना करना है कि इसे लिंक टैग के साथ HTML से कनेक्ट करें, और उसके बाद HTML से सभी बेकार फ़ॉन्ट टैग हटा दें। समाप्त होने पर, इसे इस तरह कुछ दिखना चाहिए:

 मेरा आमुख पृष्ठ 
वर्तमान में सबसे बड़ी वेबसाइट वर्तमान में विकास में है।
एलियंस ने भी हमला किया है।

थोड़ा सा क्लीनर, हुह? हमने पहले से ही हमारी साइट के समग्र आकार को कम कर दिया है, और यह हमारे "ब्लॉग" में केवल 2 प्रविष्टियों के साथ था।

लेआउट के लिए सीएसएस

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

इस तरह कुछ बनाना सीएसएस में आश्चर्यजनक रूप से सरल है। अपनी style.css फ़ाइल पर वापस जाएं और निम्न अनुभाग जोड़ें:

 # साइडबार {चौड़ाई: 100 पीएक्स; ऊँचाई: 200px; सीमा शैली: ठोस; बाईंओर तैरना; मार्जिन-सही: 15px; } 

नाम साइडबार की शुरुआत में # पर ध्यान दें। संक्षेप में - यह सीएसएस को बताता है कि हम एक नए अद्वितीय आइटम नाम के साथ काम कर रहे हैं जिसे हमने बनाया है, जैसा एच 1 या पी जैसे अंतर्निर्मित टैग के विपरीत है। लंबी व्याख्या में एक आईडी और एक वर्ग के बीच का अंतर शामिल है, और यहां विस्तार से समझाया गया है।

आपको यहां कई महत्वपूर्ण बिट्स देखने में सक्षम होना चाहिए। सबसे पहले हमने साइडबार नामक एक नई आईडी बनाई, इसे एक विशिष्ट ऊंचाई और चौड़ाई, एक ठोस सीमा दी, और निर्दिष्ट किया कि यह दाईं ओर 15px मार्जिन होना चाहिए। हमने इसे स्क्रीन के बाईं ओर तैरने के लिए कहा है, अन्य पेज तत्वों (जैसे आपके टेक्स्ट) के आसपास बहती है। आप इस एचटीएमएल के बॉडी में एक साइडबार टैग जोड़कर इस तत्व को सक्रिय कर सकते हैं, ऐसा कुछ।

वस्तु 1
आइटम 2
आइटम 3

और अब जब आप अपना पेज खोलते हैं, तो आपकी नई साइडबार होती है!

निष्कर्ष

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

छवि क्रेडिट: geirarne