DHTML CSS IN HINDI

स्टाइल शीट एक टेम्प्लेट है जो आपके वेब पेजों पर HTML टैग्स के फ़ॉर्मेटिंग को नियंत्रित करता है। यदि आप माइक्रोसॉफ्ट वर्ड का उपयोग करते हैं, तो आपको स्टाइल शीट की अवधारणा शब्द टेम्पलेट्स के समान ही मिलेगी। आप अपने दस्तावेज़ में शैलियों को असाइन किए गए स्वरूपण को बदलकर किसी शब्द दस्तावेज़ का स्वरूप बदल सकते हैं। इसी तरह, आप स्टाइल शीट के माध्यम से HTML टैग्स को असाइन किए गए स्वरूपण को बदलकर वेब पेज की उपस्थिति को बदल सकते हैं, और इस प्रकार उन टैग के लिए ब्राउज़र के डिफ़ॉल्ट विनिर्देश को ओवरराइड कर सकते हैं।

DHTML CSS IN HINDI

इंटरनेट एक्सप्लोरर 4.0 की अंतिम रिलीज के साथ, माइक्रोसॉफ्ट कैस्केडिंग स्टाइल शीट्स (CSS) को पूरी तरह से समर्थन देने की अपनी प्रतिबद्धता पर अच्छा कर रहा है, जिसे इंटरनेट एक्सप्लोरर 3.0 में पेश किया गया था। ब्राउज़र की इस नवीनतम रिलीज़ में वेब पेज प्रस्तुति और लेआउट देने वाला विस्तारित नियंत्रण निश्चित रूप से थके हुए HTML डिज़ाइनर को भी मंत्रमुग्ध कर देगा।

CSS, गैर-आरंभिक के लिए, वेब पेजों को प्रारूपित करने के लिए एक मानक है जो HTML की सीमाओं से परे है। वर्ल्ड वाइड वेब कंसोर्टियम (W3C), इंटरनेट के मानक निकाय द्वारा प्रख्यापित, CSS 70 से अधिक स्टाइल गुणों के साथ HTML का विस्तार करता है जिसे HTML टैग पर लागू किया जा सकता है। CSS के साथ, वेब डेवलपर्स के पास रंग, रिक्ति, स्थिति, बॉर्डर, मार्जिन, कर्सर, और बहुत कुछ के लिए अतिरिक्त स्वरूपण विकल्पों का खजाना है।

Dynamic Styles

गतिशील शैलियाँ बनाना बहुत आसान है! एक बार जब आप CSS की मूल बातें समझ लेते हैं, तो आपको केवल स्क्रिप्ट की कुछ पंक्तियों को जानने की आवश्यकता होती है और आप इसमें CSS विशेषताओं को लागू करके HTML टैग को गतिशील रूप से बदल सकते हैं।
उदाहरण,

<H4 onmouseover="javascript:this.style.color="#6633FF"
onmouseout="javascript:this.style.color="#000000">
यह Headline बैंगनी में बदल जाएगा
जब mouse उसे छूता है,
और बैक टू बैक जब माउस इससे हट जाता है
</H4>

Basic Syntax

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

H1 {font-size: 15pt;

font-weight : bold}

इस प्रकार आप किसी भी संख्या में HTML टैग्स के लिए शैली परिभाषाएँ बना सकते हैं और या तो उन्हें एक अलग फ़ाइल में रख सकते हैं या उन्हें सीधे अपने वेब पेजों में एम्बेड कर सकते हैं।

absolutely  positioned element with absolutely positioned parent.

<SPAN STYLE="position:absolute;

backgound-color:#90EE90"> absolute green parent

absolute green parent absolute green parent <SPAN STYLE-"position:absolute;top60px;left:60px;bac

kground-color:#ADD8E6"> absolute blue child absolute blue child absolute blue child absolute blue child </SPAN>

</SPAN>

position:absolute

स्थिति: पूर्ण संपत्ति window के margins से एक तत्व की स्थिति।

उदाहरण -

div

{

position:absolute;

left:10;

}

Visibility

The visibility property determines if an element is visible or not.

visibility:visible

The visibility: visible property makes the element visible.

h1

{

visibility:visible;

}

visibility:hidden

The visibility:hidden property makes the element invisible.

h1

{

visibility:hidden;

}

Z-index

The z-index property is used to place an element "behind" another element. Default z-index is 0. the higher number the higher priority. z-index: - 1 has lower priority.

h1

{

z-index:1;

}

h2

{

z-index:2;

}

Tips & Tricks 

Designing for Multiple Browsers

यदि आप एम्बेडेड शैलियों का उपयोग कर रहे हैं, तो आपको यह सुनिश्चित करने की आवश्यकता है कि आपकी शैली की परिभाषाएँ शैली पत्रक का समर्थन नहीं करने वाले बोवर्स में नियमित पाठ के रूप में प्रदर्शित न हों। नेटस्केप <STYLE> और </STYLE> टैग को अनदेखा कर देगा, लेकिन इनके बीच की शैली परिभाषाओं को नियमित टेक्स्ट के रूप में व्याख्यायित करेगा, क्योंकि वे कोण कोष्ठक में संलग्न नहीं हैं। इसे ठीक करने के लिए, अपने स्टाइल ब्लॉक को एक टिप्पणी में एम्बेड करें, जो इस प्रकार है:

<STYLE> 

<!--

BODY {font :10pt "Arial" }

H1 {font:15pt/17pt "Arial";

font-weight:blod;

color:maroon}

H2 {font:13pt/16pt "Arial";

font-weight:bold;

color:red}

P { font:10pt/12pt "Arial";

color:black}

-->

</STYLE>

Taking Advantage of Inheritance

आपके पृष्ठ पर HTML टैग वंशानुक्रम की एक श्रृंखला का अनुसरण करते हैं। शीर्ष-स्तरीय टैग <HTML> और उसके बाद <BODY> है। यदि आप <BODY> टैग की शैलियाँ निर्दिष्ट करते हैं, तो आपकी तालिकाएँ, सूचियाँ, अनुच्छेद, और अन्य सभी निचले स्तर के HTML तत्व इससे इनहेरिट होंगे। इस प्रकार, अपने संपूर्ण पृष्ठ के लिए वैश्विक लेआउट और स्वरूपण सेट करने के लिए, आप बस <BODY> टैग को उपयुक्त गुण निर्दिष्ट कर सकते हैं। उदाहरण

BODY {font: 10pt/11pt Arial, Helvetica, sans-serif;
background:url(image.gif);
margin-left: 0.7in ;
margin-right: 0.7 in}

आपके पूरे पेज के लिए डिफ़ॉल्ट फॉन्ट, लीडिंग, बैकग्राउंड इमेज और मार्जिन सेट करता है। जिन टैग्स को आपने अपनी स्टाइल शीट में सेट नहीं किया है, वे उनके पैरेंट टैग्स या <BODY> से इनहेरिट होंगे।

Final Word - 

Friends, इस पोस्ट में हमने आपको जो DHTML CSS IN HINDI जानकारी दी अच्छी लगे तो Share जरूर करे. इसी प्रकार की जानकारी के लिए Visit करते रहे. धन्यवाद