CSS पाठ्यपुस्तक - पाठ 2 - CSS का उपयोग शुरू करें। CSS गुण: background, color।
नमस्ते सबको। तो, पिछले पाठ में मैंने दो फाइलें बनाई थीं — HTML और CSS। उनका कोड नीचे दिया गया है:
index.html:
<html>
<head>
<title>CSS पाठ्यपुस्तक</title>
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
</head>
<body>
<p>drupalbook.org के साथ CSS सीखें</p>
<p>दूसरी पंक्ति drupalbook.org के साथ CSS सीखें</p>
</body>
</html>style.css:
body{
background: #eeeeee; /* पृष्ठभूमि का रंग */
font-size: 14px; /* फ़ॉन्ट का आकार */
}
p{
color: #ff0000; /* टेक्स्ट का रंग */
}
इस पाठ में हम CSS का अध्ययन जारी रखेंगे और अपने टेम्पलेट को रंग और शैली देंगे। चलिए उस गुण से शुरू करते हैं जो हमने पहले ही body टैग में उपयोग किया था — background:
body{
background: #eeeeee; /* पृष्ठभूमि का रंग */
font-size: 14px; /* फ़ॉन्ट का आकार */
}जैसा कि आप देख सकते हैं, अब पेज की पृष्ठभूमि ग्रे रंग में है:
आइए पहले CSS के सिंटैक्स को समझें। सभी CSS गुण एक "सेलेक्टर" से शुरू होते हैं — यह बताता है कि हम किन तत्वों पर गुण लागू करेंगे। उदाहरण के लिए: body, p, .class, #id। आप देखेंगे कि सेलेक्टर से पहले कभी-कभी बिंदु (.) या हैश (#) का चिन्ह होता है। बिंदु का उपयोग क्लास वाले तत्वों के लिए किया जाता है, और हैश का उपयोग उस तत्व के लिए किया जाता है जिसके पास विशिष्ट id है। उदाहरण देखें:
<html>
<head>
<title>CSS पाठ्यपुस्तक</title>
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
</head>
<body>
<div class="green">
<p>drupalbook.org के साथ CSS सीखें</p>
</div>
<div id="blue">
<p>दूसरी पंक्ति drupalbook.org के साथ CSS सीखें</p>
</div>
</body>
</html>मैंने दो ब्लॉक जोड़े — एक का class="green" और दूसरे का id="blue"। अब हम उनके लिए CSS लिखेंगे:
body{
background: #eeeeee; /* पृष्ठभूमि का रंग */
font-size: 14px; /* फ़ॉन्ट का आकार */
}
.green{
color: #00ff00; /* टेक्स्ट का रंग */
}
#blue{
color: #0000ff; /* टेक्स्ट का रंग */
}
जैसा कि आप देख सकते हैं, मैंने body टैग के लिए बिना किसी बिंदु या हैश के CSS लिखा। इसी तरह, हम अन्य HTML टैग जैसे p, span, ul, li आदि के लिए CSS बिना बिंदु या हैश के लिखते हैं। बिंदु का उपयोग क्लास के लिए और हैश का उपयोग id के लिए होता है। इसे याद रखें ताकि भविष्य में भ्रम न हो:
बिंदु (.) — क्लास के लिए
हैश (#) — id के लिए
बिना बिंदु और हैश के — सामान्य टैग के लिए
टैग, क्लास या id लिखने के बाद हम CSS को कर्ली ब्रैकेट {} के अंदर लिखते हैं:
body{ /* टैग */
}
.green{ /* क्लास */
}
#blue{ /* id */
}जैसा कि आप मेरे HTML कोर्स से याद करते हैं, class और id HTML के सार्वभौमिक गुण हैं — इन्हें किसी भी टैग में इस्तेमाल किया जा सकता है। इस प्रकार, हम अलग-अलग टैग्स (जैसे p, span, li आदि) के लिए विभिन्न CSS नियम बना सकते हैं।
अब इन कर्ली ब्रैकेट्स के अंदर हम CSS गुण लिख सकते हैं। शुरू करते हैं सबसे सरल गुण color से। यह टेक्स्ट का रंग निर्धारित करता है। पहले गुण का नाम लिखा जाता है, फिर कोलन (:) और उसके बाद मान। color का मान हम संख्यात्मक या शब्द रूप में लिख सकते हैं:
.green{
color: #00ff00; /* टेक्स्ट का रंग */
}
#blue{
color: #0000ff; /* टेक्स्ट का रंग */
}
/* समानार्थक रूप से */
.green{
color: green; /* टेक्स्ट का रंग */
}
#blue{
color: blue; /* टेक्स्ट का रंग */
}जब हम इसे संख्यात्मक रूप में लिखते हैं (छह हेक्साडेसिमल अंकों के रूप में), तो संख्या से पहले हैश (#) लगाते हैं। पहले दो अंक लाल (Red) का मान दर्शाते हैं, तीसरे और चौथे हरा (Green) का, और पाँचवें और छठे नीला (Blue) का। यानी यह RGB (Red, Green, Blue) प्रणाली पर आधारित है। हेक्साडेसिमल अंक 0 से F तक होते हैं, जहाँ 9 के बाद 10 नहीं बल्कि अक्षर A आता है।
सही रंग चुनने के लिए आप Photoshop जैसे टूल में Color Picker का उपयोग कर सकते हैं। उदाहरण के लिए:
अब जब आपको यह पता है कि color के लिए रंग कैसे चुनें, तो आप वही प्रक्रिया background गुण के लिए भी उपयोग कर सकते हैं। चलिए हमारे पृष्ठ की पृष्ठभूमि को हल्का करते हैं और टेक्स्ट को अधिक पठनीय बनाते हैं:
body{
background: #fafafa; /* पृष्ठभूमि का रंग */
color: #333; /* पेज के सभी टेक्स्ट का रंग */
}
.green{
/* टेक्स्ट का रंग */
}
#blue{
/* टेक्स्ट का रंग */
}जब आप एक से अधिक CSS गुण लिखते हैं, तो प्रत्येक गुण के बाद सेमीकोलन (;) लगाना न भूलें — यह गुण के अंत को दर्शाता है। अब हमारा पृष्ठ अधिक पठनीय दिखता है:
अब चलिए कुछ जगहों पर हरा और नीला रंग जोड़ते हैं:
index.html:
<html>
<head>
<title>CSS पाठ्यपुस्तक</title>
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
</head>
<body>
<p><span id="blue">CSS सीखें</span> साथ में <span class="green">drupalbook.org</span></p>
<p>दूसरी पंक्ति CSS सीखें साथ में <span class="green">drupalbook.org</span></p>
</body>
</html>और style.css:
body{
background: #fafafa; /* पृष्ठभूमि का रंग */
color: #333;
}
.green{
color: #26e921; /* टेक्स्ट का रंग */
}
#blue{
color: #0f15f3; /* टेक्स्ट का रंग */
}