Class Notes ASP.NET-Unit-III-Internet & Web Designing-CSS
CSS :-
CSS का पूरा नाम cascading style sheet है।एक webpage को बनाने के तकनीक के पीछे HTML और CSS का बहुत बड़ा हाथ है। HTML के इस्तेमाल से webpage को एक आकार मिलता है और CSS के इस्तेमाल से webpage को एक नया और आकर्षक रूप मिलता है। HTML और CSS हमेसा साथ में ही इस्तेमाल किये जाते हैं।
CSS एक Simple design language है। जो web pages को प्रस्तुत करने की प्रक्रिया को सरल बनाने के लिए बनाई गई है। इस भाषा को स्वतंत्र रुप से लिखा जाता है। इसके अपने Code-Words यानि स्टाइल रूल्स है, जो एक वेबपेज की अलग-अलग प्रकार से फॉर्मेटिंग करते है।
CSS का उपयोग एक एचटीएमएल डॉक्युमेंट के ढ़ाँचे की दिखावट (Layout), उसकी पृष्ठभूमी (Background), टेक्स्ट का रंग एवं स्टाइल आदि को सजाने एवं नियंत्रित करने के लिए किया जाता है। css का उपयोग कर web pages के color, font का style, paragraph के बीच दूरी इत्यादि नियंत्रित कर सकते है। सीएसएस एक web page के design को आकषर्ण बना देती है।
CSS का अविष्कार 10 अक्टूबर 1994 को Håkon Wium Lie ने किया था। सीएसएस को maintain करने के लिए W3C के भीतर एक group बनाया गया जिसका नाम CSS working group रखा गया। इस group का काम specification document बनाना था यही वह group है, जो सीएसएस को update करता रहता है।
सीएसएस के काम करने के मुख्य तीन प्रकार है :–
1. Inline Style Sheet
इस Style Sheet की मदद से inline style को web pages में वही इस्तेमाल किया जाता है जहाँ इसकी जरूरत होती है। inline style sheet का उपयोग किसी particular html element को configure करने के लिए use कर सकते है। जब हम किसी एक element को परिवर्तित करते है, तो इससे बाकी दूसरे elements में कोई बदलाव नही होता है।
<h1 style=”color:blue;”>A Blue Heading</h1>
<p style=”color:red;”>A red paragraph.</p>
2. Embedded or Internal style sheet
इन style sheet का उपयोग pages के top (head section) में किया जाता है। Internal style sheet को <style> element के भीतर रखा जाता है। इस type की style sheet का rule पेज के सभी element पर लागू होता है। जब हम style element उपयोग करते है, तो साथ मे इसमे type attribute भी इस्तेमाल होता है । यहां type attribute specify करता है कि document में किस प्रकार की style शामिल की जाये।
Ex-<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. External Style Sheet
यह सीएसएस की सबसे Interesting Style Sheet है। इसमें हम एक separate file में CSS coding करके उसे “.css extension” के साथ save कर देते है।
अब जब भी हम <link> element की मदद से CSS file को html file से जोड़ते है तो पूरी html file पर इस css file का प्रभाव पड़ता है। ऐसा इसलिए किया जाता है जब आप किसी website के design को एक – एक करके परिवर्तित करने के बजाय एक बार मे ही बदलना चाहे।
Ex-
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Style.css file –
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS के फायदे – Benefits
- समय की बचत– css एक properties को set करने के लिए बहुत flexibility प्रदान करता है। आप एक बार सीएसएस लिखने बाद उस same code को html element के कई समूहों पर लागू कर सकते है। यही नही बल्कि बाद में दूसरे web pages में भी इस code का पुनः उपयोग किया जा सकता है। कहने का तात्पर्य यह है आप css के उपयोग से अपने समय की बहुत बचत कर सकते है।
- Page के load time को कम करता है– सीएसएस इस्तेमाल करने का यह एक बड़ा फायदा है। CSS से pages को Design करने में बहुत कम codes की जरूरत पड़ती है। एक web page में कम codes का मतलब है, कि वह fast load होगा।
- Maintain करने में आसान– css के द्वारा किसी document को maintain करना काफी आसान है। सीएसएस में सिर्फ एक बदलाव से आप उस document के कई pages को तुरंत update कर सकते है।
- Bandwidth की बचत– एक high traffic website के लिए bandwidth काफी मायने रखती है। अगर आप page के layout के लिए table की जगह css का उपयोग करेंगे तो इससे उस file आकार में 50% तक कमी आयेगी।
- सभी device के लिए अनुकुल– सीएसएस के उपयोग से एक ही web page को multiple device compatibility दी जा सकती है। जिससे वह web page सभी डिवाइस computer, phones, print में उसके हिसाब से ही देखा जा सके।
- Search engine ranking में सुधार– एक website के लिये traffic ही सब कुछ है। लेकिन traffic तभी आयेगा जब उस वेबसाइट के page किसी search engines में पहले rank करेंगे। CSS के इस्तेमाल से search engines का उस वेबसाइट को access करना आसान हो जाता है। जिससे वह उस पेज को जल्दी access करके rank कर देता है
<div> टैग HTML दस्तावेज़ में एक विभाजन या एक भाग को परिभाषित करता है।
<div> टैग का उपयोग HTML elements के लिए एक कंटेनर के रूप में किया जाता है – जिसे CSS के साथ स्टाइल किया जाता है, या जावास्क्रिप्ट के साथ manipulated, हेरफेर किया जाता है।
class or id attribute का उपयोग करके <div> टैग को आसानी से स्टाइल किया जा सकता है।
सलेक्टर की सहायता से एचटीएचमएल इलीमेंट की पहचान की जाती है।
डिक्लयरेशन ब्लाक में एक या अधिक डिक्लयरेशन हो सकते हैं। जिन्हें सेमीकोलोन से अलग रखते है।
प्रत्येक डिक्लयरेशन में CSS प्रापटी का नाम एवं उसकी वैल्यू होती हैं, जिसे कोलोन से अलग रखते है।
कई CSS डिक्लयरेशन को सेमीकोलोन से अलग रखते है और डिक्लयरेशन ब्लाक कर्ली ब्रेसेस के अंदर रहते है।
नीचे उदाहरण में <p> इलीमेंट सेंटर एलाइंन होगा एवं उसका टेक्सट कलर रेड होगा।
p {
color: red;
text-align: center;
}