सीएसएस प्रयोग विधि
सीएसएस का प्रयोग निम्नलिखित तीन विधियों से किया जा सकता है ।- सीएसएस को एक अलग सीएसएस फाइल में लिखकर उसे एचटीएमएल पेज से लिंक करना ।
- सीएसएस को एचटीएमएल पेज के हेड सेक्सन के अन्तर्गत स्टाइल टैग के अन्दर लिखना ।
- सीएसएस को किसी भी टैग या एलीमेण्ट के अन्दर सीधे लिखना ।
सीएसएस का बाह्य प्रयोग -
सीएसएस को बाहर से लिंक करना सबसे बेहतरीन तरीका है । इस तरीके से आपकी कोडिंग फाइल बहुत बोझिल और बडी होने से बच जाती है । यदि हमें एक बहुत सारे ब्लाक्स का पेज बनाना है और हम हर ब्लाक को अलग अलग रंगों व तरीकों से सजाते हैं तो निश्चित ही हमारे पेज की कोडिंग फाइल बहुत बडी हो जायेगी जिसे सुधार करने में बडी मशक्कत करनी पड सकती है । इसका सबसे बेहतरीन तरीका है कि अपनी सारी स्टाइल कोडिंग को एक अलग सीएसएस फाइल में सेव की जाये और उसे अपने एचटीएमएल फाइल से लिंक कर दिया जाये । इससे आपका परिणाम भी सही प्राप्त होता है और आपकी फाइल भी बोझिल होने से बच जाती है ।एचटीएमएल में सीएसएस फाइल बाहर से लिंक करने के लिये आपको अपना एचटीएमएल कोड अलग फाइल में तथा सीएसएस कोड अलग फाइल में रखना होगा ।
उदाहरण -
पहले हम अपना एचटीएमएल पेज कोड करते हैं जिसे हम होम.एचटीएमएल (home.html) नाम से सेव कर लेते हैं । इसे कैसे करते हैं यह जानने के लिये हमारा एचटीएमएल ट्यूटोरियल देखें ।
होम.एचटीएमएल फाइल के अन्दर निम्न कोड लिखते हैं ।
<!doctype html>
<head>
<title>Learn CSS </title><link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<h1>Example of CSS</h1>
<p>This is an Example of CSS linked from outside</p>
</div>
</body>
</html>
अब दूसरी फाइल बनाते है जिसको
स्टाइल.सीएसएस (style.css) नाम से सेव करते हैं । इसके
अन्तर्गत निम्नलिखत कोड लिखेंगे । body
{background:green;}
#container
{
margin:auto;
background:white;
border:2px solid yellow;
width:900px;
padding:50px;
height:400px;
}
h1{color:red;}
p{color:green; font-family:Times New Roman; font-size:20px;}
इन दोनों फाइल्स को एक ही फोल्डर में अथवा एक ही स्थान पर सेव करेंगे । अब उस फोल्डर में जाकर अपने होम.एचटीएमएल पेज को डबल क्लिक करें । इससे आपका पेज आपके ब्राउजर में खुल जायेगा और आपका रिजल्ट आपको दिखाई पडेगा ।
अब इसे समझते हैं ।
आपका एचटीएमएल डाक्यूमेण्ट जिसका नाम होम.एचटीएमएल है अपने अन्दर कुछ टैग लिये हुए है जिसको स्टाइल.सीएसएस डाक्यूमेण्ट में स्टाइल किया गया है । स्टाइल.सीएसएस डाक्यूमेण्ट को आपके एचटीएमएल डाक्यूमेण्ट के हेड सेक्शन में <link rel="stylesheet" href="style.css" /> कोड के द्वारा लिंक कर दिया गया है ।
अब आपका स्टाइल.सीएसएस स्टाइल आपके एचटीएमएल कोड को प्रभावित करता है व आपको आपका वांछित परिणाम प्रदान करता है । इस परिणाम में परिवर्तन करने के लिये हमें मात्र स्टाइल.सीएसएस डाक्यूमेण्ट की कोडिंग में ही परिवर्तन करना है और हमारे पेज में परिवर्तन दिखने लगेगा ।
इसे आगे हम और विस्तार से समझेंगे ।
Maine wapka se website bna li he hum jab google me site dalte he to wah aa jaati he but dusra open karta he to did not matching aata he kya karu
ReplyDeleteवेब कोड सीखने के लिए html कोड स्निपेट
ReplyDeleteली टैग सूची-शैली-प्रकार कोई भी प्रदर्शन इनलाइन नमूना कोड नहीं है
Thank you for such a well written article.
ReplyDeleteVisit Best Astrologer in Pune