आपल्या वेबसाइटवर माहिती प्रदर्शित करण्यासाठी याद्या आणि सारण्यांचे स्वरूपन करणे आवश्यक आहे. CSS तुमच्या आवडीनुसार सूची आणि सारण्या तयार करण्यासाठी आणि सानुकूलित करण्यासाठी गुणधर्म आणि वर्ग प्रदान करते. CSS मध्ये याद्या आणि सारण्या कशा स्वरूपित करायच्या याबद्दल येथे तपशीलवार मार्गदर्शक आहे.
स्वरूपन याद्या
अक्रमित यादी(ul)
मुख्य मालमत्ता: सूची-शैली-प्रकार.
मूल्ये: none, disc, circle, square.
उदाहरण:
ul {
list-style-type: disc;
}
ऑर्डर केलेली यादी(ol)
मुख्य मालमत्ता: सूची-शैली-प्रकार.
मूल्ये: काहीही नाही(डिफॉल्ट), दशांश, लोअर-अल्फा, अप्पर-अल्फा, लोअर-रोमन, अप्पर-रोमन.
उदाहरण:
ol {
list-style-type: decimal;
}
व्याख्या सूची(dl)
मुख्य गुणधर्म: व्याख्या सूची स्वरूपित करण्यासाठी कोणतीही विशिष्ट CSS मालमत्ता नाही. तथापि, आपण वर्ग किंवा इतर गुणधर्म जसे की सूचीमधील घटकांची शैली करू शकता font-size, font-weight, margin, padding, etc.
उदाहरण:
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A styling language for web pages</dd>
</dl>
dt {
font-weight: bold;
}
स्वरूपन सारण्या
टेबल स्ट्रक्चर फॉरमॅटिंग
मुख्य मालमत्ता: border-collapse.
मूल्ये: separate(default), collaps ई.
उदाहरण:
table {
border-collapse: collapse;
}
टेबल बॉर्डर फॉरमॅटिंग
मुख्य मालमत्ता: border.
मूल्ये: सीमा मूल्य, उदाहरणार्थ: 1px solid black.
उदाहरण:
table {
border: 1px solid black;
}
सेल बॉर्डर फॉरमॅटिंग
मुख्य मालमत्ता: border.
मूल्ये: सीमा मूल्य, उदाहरणार्थ: 1px solid black.
उदाहरण:
td, th {
border: 1px solid black;
}
टेबल सेलचे संरेखन आणि अंतर
मुख्य गुणधर्म: text-align, padding.
- मजकूर-संरेखित: संरेखन मूल्ये, उदाहरणार्थ:
left, right, center. - पॅडिंग: सेलमधील अंतर मूल्य, उदाहरणार्थ: 10px.
उदाहरण:
th {
text-align: center;
padding: 10px;
}
सारण्यांमध्ये पार्श्वभूमी आणि मजकूर रंग
मुख्य गुणधर्म: background-color, color
background-color: पार्श्वभूमी रंग मूल्य, उदाहरणार्थ:lightgray.color: मजकूर रंग मूल्य, उदाहरणार्थ:white.
उदाहरण:
table {
background-color: lightgray;
color: white;
}
टेबलमधील स्तंभ आणि पंक्तीचा आकार
मुख्य गुणधर्म: width, height.
width: रुंदी मूल्य, उदाहरणार्थ: "100px", "20%".height: उंची मूल्य, उदाहरणार्थ: "50px", "10%".
उदाहरण:
th {
width: 100px;
height: 50px;
}
CSS मध्ये याद्या आणि सारण्या कशा स्वरूपित करायच्या याबद्दल हे सर्वसमावेशक मार्गदर्शक आहे. तुम्ही तुमच्या वेबसाइटवर तुमच्या डिझाइनच्या गरजेनुसार सूची आणि टेबल शैली तयार करण्यासाठी मूल्ये आणि गुणधर्म सानुकूलित करू शकता.