6.1 वर्ग विशेषता और शैली टैग

लेकिन वह सब नहीं है। सैकड़ों "शैलियों" का आविष्कार होने के बाद, सवाल उठता है: उनका उपयोग कैसे करें? और फिर उन्हें "कक्षाओं" में समूहीकृत करने का विचार आया। बेशक, ये जावा के समान वर्ग नहीं हैं। बस विशेष शैली समूह।

और अगर "कक्षाओं" का उपयोग करने से पहले आपके पास एक तस्वीर थी:


       <img src="logo.png" style="width=100px;height=100px;opacity=0.5">
    

अब इसे इस प्रकार लिखा जा सकता है:



<img src="logo.png" class="picture">
 
<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

हमने एक विशेष बनाया «style» pictureऔर शैली मूल्यों को style. और फिर हमने टैग के साथ <img> और "शैली" तस्वीर को बांध दिया class

6.2 चयनकर्ता, चयनकर्ताओं के प्रकार

classesअलग-अलग प्रदान की गई इन शैलियों को या के रूप में जाना जाता है selectors। उनकी कई महत्वपूर्ण विशेषताएं हैं।

एक html-elementके पास कई चयनकर्ता हो सकते हैं। उनके नाम एक स्थान के साथ दर्शाए गए हैं। उदाहरण:


       <img src="logo.png" class="picture main">
    

चयनकर्ताओं को यहां छूने का एक कारण यह है कि उन्हें स्वचालित रूप से लागू किया जा सकता है। और यह उपयोगी संपत्ति भविष्य में बहुत बार उपयोग की जाएगी। जावा डेवलपर्स सहित।

यहाँ उनकी एक छोटी सूची है:

# चयनकर्ता उदाहरण विवरण
1 *
* {
  margin: 0;
  padding: 0;
}
HTML दस्तावेज़ के सभी तत्वों पर लागू होता है।
2 #पहचान
#img123 {
   width:100px;
   height 100px;
}
# के बाद तत्व की आईडी होती है जिसमें दी गई शैली लागू की जानी है।
3 उपनाम
table {
   color: black;
}
दस्तावेज़ में सभी तालिकाओं पर लागू होता है।
4 टैग चयनकर्ता
table.important {
   color: red;
}
निर्दिष्ट वर्ग विशेषता वाले सभी दस्तावेज़ तालिकाओं पर लागू होता है।
5 चयनकर्ता
.picture {
  opacity: 0.5
}
निर्दिष्ट वर्ग विशेषता वाले सभी तत्वों पर लागू होता है। कोई टैग।
6 अभिभावक बच्चा
main article {
  color: blue;
}
उन सभी तत्वों पर लागू होता है जहां मूल टैग में मुख्य वर्ग होता है और बाल टैग में आलेख वर्ग होता है।
7 टैग: लिंक
a:link {
color: blue;
}
:लिंक स्यूडो-क्लास का उपयोग उन लिंक्स को स्टाइल करने के लिए किया जाता है जिन पर उपयोगकर्ता ने अभी तक क्लिक नहीं किया है।
8 टैग: का दौरा किया
a:visited {
color: red;
}
:लिंक स्यूडो-क्लास का उपयोग उन लिंक्स को स्टाइल करने के लिए किया जाता है जिन पर उपयोगकर्ता पहले ही क्लिक कर चुका है।
9 टैग: चेक किया गया
input[type=radio]:checked {
 border: 1px solid black;
}
यह छद्म वर्ग केवल चेक किए गए यूआई तत्वों का चयन करेगा: रेडियो बटन या चेकबॉक्स।
10 टैग: होवर
div:hover {
  background: red;
}
यह छद्म वर्ग आपको माउस के साथ मँडराते समय किसी तत्व की शैली को बदलने की अनुमति देता है।
ग्यारह टैग: पहला बच्चा
ul li:first-child {
 border-top: none;
}
यह छद्म वर्ग केवल पहले बाल तत्व को चुनने की अनुमति देगा।

आपको यह सब याद रखने की जरूरत नहीं है। लेकिन यह अच्छा होगा यदि आप एक दो बार इस तालिका का अध्ययन करें और यह सब आपके सिर में जमा हो जाए। आधुनिक जीवन में वेब के बिना, कहीं नहीं, और वेब पर - चयनकर्ताओं के बिना कहीं नहीं।