CodeGym /Java Course /मॉड्यूल 3 /वर्ग विशेषता

वर्ग विशेषता

मॉड्यूल 3
पातळी 6 , धडा 5
उपलब्ध

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">
    

आम्ही येथे निवडकर्त्यांना स्पर्श केल्याचे एक कारण म्हणजे ते स्वयंचलितपणे लागू केले जाऊ शकतात. आणि ही उपयुक्त मालमत्ता भविष्यात खूप वेळा वापरली जाईल. Java विकासकांसह.

त्यांची एक छोटी यादी येथे आहे:

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

तुम्हाला हे सर्व लक्षात ठेवण्याची गरज नाही. परंतु आपण या तक्त्याचा एक दोन वेळा अभ्यास केला आणि हे सर्व आपल्या डोक्यात जमा केले तर चांगले होईल. आधुनिक जीवनात वेबशिवाय, कोठेही नाही आणि वेबवर - निवडकर्त्यांशिवाय कोठेही नाही.

टिप्पण्या
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION