<!doctype html>
<head>
</head>
<body>
<div id="box" >
This is a box.
</div>
<div id="post" class="box" >
This is a box.
</div>
<p class="box">This is a paragraph </p>
</body>
</html>
<head>
</head>
<body>
<div id="box" >
This is a box.
</div>
<div id="post" class="box" >
This is a box.
</div>
<p class="box">This is a paragraph </p>
</body>
</html>
उपर्युक्त कोडिंग में हमने बॉडी सेक्शन में एक डीआईवी बनाया जिसको हमने ''बाक्स'' आईडी प्रदान की है । दूसरी डीआईवी जिसे हमने पोस्ट आईडी तथा बाक्स क्लास प्रदान किया है तथा तीसरा पैराग्राफ जिसे हमने क्लास बाक्स प्रदान किया है ।
इसके पहले कि इसमें स्टाइल प्रयोग किया जाये यह बताना आवश्यक होता है कि आईडी को चिन्हित करने के लिये आईडी नाम के आगे हैश (#) तथा क्लास को चिन्हित करने के लिये क्लास नाम के आगे डाट (.) लगाना आवाश्यक है अन्यथा आपका सीएसएसस्टाइल आपकी आईडी या क्लास को चिन्हित नहीं कर सकेगा ।
अब इसमें स्टाइल प्रयोग करके देखेंगे । स्टाइल का प्रयोग तीन तरीके से किया जाता है । इन तरीकों को विस्तार से आगे समझेंगे । यहाँ स्टाइल का प्रयोग हेडसेक्शन में किया जा रहा है ।
<!doctype
html>
<head>
</head>
<body>
<div id="box" >
This is a box.
</div>
<div id="post" class="box" >
This is a box.
</div>
<p class="box">This is a paragraph </p>
</body>
</html>
<head>
<style>
#box
{
width:200px;
height:50px;
border:1px solid green;
background:yellow;
}
#post
{
width:200px;
height:50px;
border:1px solid green;
background:red;
}
.box
{
width:200px;
height:50px;
border:1px solid green;
background:red;
}
</style>
#box
{
width:200px;
height:50px;
border:1px solid green;
background:yellow;
}
#post
{
width:200px;
height:50px;
border:1px solid green;
background:red;
}
.box
{
width:200px;
height:50px;
border:1px solid green;
background:red;
}
</style>
</head>
<body>
<div id="box" >
This is a box.
</div>
<div id="post" class="box" >
This is a box.
</div>
<p class="box">This is a paragraph </p>
</body>
</html>
इसका परिणाम कुछ इस तरह दिखाई देगा ।
This
is a box.
This
is a box.
This
is a paragraph
यहाँ हमने चौडाई 200पिक्सल, उचाई 50पिक्सल, बार्डर 1 पिक्सल तथा बैकग्राउंड कलर स्टाइल का प्रयोग किया है ।
अब स्टाइल से हम पोस्ट आईडी को हटा देते हैं ।
<!doctype
html>
<head>
<style>
</head>
<body>
<div id="box" >
This is a box.
</div>
<div id="post" class="box" >
This is a box.
</div>
<p class="box">This is a paragraph </p>
</body>
</html>
<head>
<style>
#box
{
width:200px;
height:50px;
border:1px solid green;
background:yellow;
}
.box
{
width:200px;
height:50px;
border:1px solid green;
background:red;
}
</style>
{
width:200px;
height:50px;
border:1px solid green;
background:yellow;
}
.box
{
width:200px;
height:50px;
border:1px solid green;
background:red;
}
</style>
</head>
<body>
<div id="box" >
This is a box.
</div>
<div id="post" class="box" >
This is a box.
</div>
<p class="box">This is a paragraph </p>
</body>
</html>
इसका परिणाम भी ठीक वही होगा ।
This
is a box.
This
is a box.
This
is a paragraph
पोस्ट आईडी के स्टाइल को हटा देने पर भी हमें कोई बदलाव दिखाई नहीं देगा । क्यँकि बाक्स क्लास अभी भी मौजूद है । अर्थात् क्लास सेलेक्टर का प्रयोग एक से अधिक सेक्शन को एक तरह की स्टाइल प्रदान करने के लिये किया जाता है ।
आईडी का प्रयोग प्राय: किसी एक ही सेक्शन को सेलेक्ट करने के लिये करते हैं तथा क्लास का प्रयोग तब किया जाता है जब आपको कई सारे सेक्शन में एक ही तरह का बदलाव चाहिये हो । हालाँकि आईडी का प्रयोग भी आपको यह सुविधा दे सकता है किन्तु कइ्र सेक्शन में एकसाथ बदलाव के लिये क्लास का प्रयोग एक बेहतर विकल्प है ।
आशा है यह लेख आपको समझ में आया होगा । यदि कोई शंका बची रह गई हो तो अवश्य लिखें ।
Comments
Post a Comment