 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आपका स्वागत है। आज हम लेसन ४२ सीखनेवाले हैं।
पिछले लेसन में हम ने टेबल को स्टाइल करने के लिए CSS properties देखी है।
आज हम CSS प्रॉपर्टीज का उपयोग करके अलग अलग तरह के cursors डिस्प्ले करना सीखेंगे।
CSS for generating cursors
हम को मालूम है की Windows में cursors अलग अलग डिस्प्ले होते हैं। हम एक window को resize करते समय, windows को move करते समय, wait या working status में अलग अलग तरह के cursors देखते हैं। आज हम यह देखेंगे की वेब पेज में cursors की स्टाइल कैसे बदलते हैं।हम इसके लिए एक स्क्रिप्ट लिखेंगे। एक नयी Notepad फाइल ओपन कीजिये। इसमें हम एक टेबल बनाते हैं जिसमे हम cursors के प्रकार दिखाएंगे।
हमारे Notepad फाइल में lesson-40-2 का सारा कोड कॉपी कीजिये। इस में style में लिखा हुआ सारा कोड डिलीट कीजिये। वैसे ही body में लिखे हुए दोनों paragraphs डिलीट कीजिये। हम नया स्क्रिप्ट लिखनेवाले हैं।
अब style के निचे lesson-41 में लिखा हुआ टेबल के स्टाइल का कोड कॉपी कीजिये। यह कोड निचे भी दिया है।
table {
caption-side: bottom;
border-collapse: collapse;
border: 1vw dashed green;
}
th, td {
background-color: blue;
color: yellow;
font-size: 1.5vw;
border: 0.5vw solid red;
padding: 1vw;
}
CSS cursor property
अब cursor के लिए स्टाइल लिखिए।.default {
cursor: default;
}
इस स्टाइल का उपयोग करके हम default cursor डिस्प्ले कर सकते हैं।
और एक उदाहरण लेंगे।
.row-resize {
cursor: row-resize;
}
या
.col-resize {
cursor: col-resize;
}
ऐसे ही हम सारे तरह के cursors के लिखेंगे। इस लेसन के कोड की PDF फाइल देखिये।
Body में एक टेबल बनाइये। इसका कोड ऐसा होगा।
<table>
<tr>
<th>Serial Number</th>
<th>Cursor Name</th>
<th>Use of Cursor</th>
<th>Cursor</th>
</tr>
<tr>
<td>01</td>
<td>Default</td>
<td>This is the default cursor displayed</td>
<td class="default">Default</td>
</tr>
ऐसे ही बाकी दुसरे cursors के लिए लिखिए।
हमारे फाइल को "Lesson-42" और "Lesson-42.html" के नाम से save कीजिये।
 |
| आकृति ४२-१. CSS cursor styles - CSS |
 |
| आकृति ४२-२. CSS cursor styles - HTML |
HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये। यह आउटपुट नए वेब पेज में देखने के लिए निचे डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
 |
| आकृति ४२-३. CSS cursor property |
इस में सीरियल नंबर, cursor का नाम, और cursor का use ऐसे तीन कॉलम हैं। चौथे कॉलम में cursor का नाम डिस्प्ले हुआ है। इस कॉलम में आप किसी भी नाम पर माउस लेकर जाइये आपको वह cursor की स्टाइल दिखेगी।
Important Points:
१. CSS cursor property का उपयोग करके हम अलग अलग तरह के cursors generate कर सकते हैं।२. इससे हम अलग अलग फंक्शन के लिए अलग अलग cursors वेब पेज में डिस्प्ले कर सकते हैं।
लेसन ४१ लेसन ४३
