CSS बुनियादी व्याकरण

CSS 语法

CSS नियम दो प्रमुख भागों से बनी है: चयनकर्ता (selector) और एक या अधिक घोषणा (declarations)।

selector {घोषणा1; घोषणा2; ... घोषणाN }

चयनकर्ता (selector) आमतौर पर आपको शैली बदलने होने वाले HTML तत्व है।

प्रत्येक घोषणा एक गुण और एक मान से बनी होती है।

गुण (property) आप जो भी शैली गुण (style attribute) सेट करना चाहते हैं।प्रत्येक गुण का एक मान है।गुण और मान को दोषण (colon) से अलग किया जाता है।

selector {property: value}

नीचे का इस इस कोड का काम यह है कि h1 तत्व के भीतर का लेख रंग लाल बनाता है और फ़ॉन्ट आकार को 14 पिक्सल करता है।

इस उदाहरण में, h1 चयनकर्ता है, color और font-size गुण है, red और 14px मान है।

h1 {color:red; font-size:14px;}

नीचे का चित्र उपरोक्त कोड की संरचना को दिखाता है:

CSS 语法

सूचना:घोषणाओं को बारहवाले अनुच्छेदों से घिरा दें।

मान के विभिन्न लिखावज और इकाई

अंग्रेजी शब्द red के अलावा, हम #ff0000 रंग की दोस्तीयां का उपयोग कर सकते हैं:

p { color: #ff0000; }

बाइट की बचत के लिए, हम CSS के संक्षिप्त रूप का उपयोग कर सकते हैं:

p { color: #f00; }

हम रेग्बी मान का उपयोग करने के दो तरीके से कर सकते हैं:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

ध्यान दें कि जब RGB प्रतिशत का उपयोग करते हैं, तो 0 के मान के लिए भी प्रतिशत संकेत लिखना होगा।अन्य स्थितियों में यह आवश्यक नहीं है।उदाहरण के लिए, जब आकार 0 पिक्सल है, तो 0 के बाद px इकाई का उपयोग नहीं करना होगा क्योंकि 0 जो भी इकाई हो, 0 है।

अनुच्छेदों को याद रखें

सूचना:यदि मान कई शब्द है, तो मान को अनुच्छेदों से घिरा दें:

p {font-family: "sans serif";}

बहु घोषणा:

सूचना:यदि एक से अधिक घोषणा देना है, तो प्रत्येक घोषणा को सemicolon से अलग करना होगा।नीचे का उदाहरण एक लाल लेख के केंद्रीय पैराग्राफ को कैसे परिभाषित किया जाता है, दिखाता है।अंतिम नियम यह है कि सemicolon जोड़ना आवश्यक नहीं है, क्योंकि सemicolon अंग्रेजी में एक विभाजक संकेत है, नहीं कि अंतिम संकेत।हालांकि, अनुभवी डिजाइनरों अक्सर प्रत्येक घोषणा के अंत में सemicolon जोड़ते हैं, इसका लाभ यह है कि आप प्रत्यक्ष नियमों से घोषणाओं को जोड़े या छोड़े जाते हैं तो गलती की संभावना कम होती है।ऐसा ही है:

p {text-align:center}; color:red;}

आपको प्रत्येक पंक्ति में केवल एक गुण का वर्णन करना चाहिए, इससे शैली परिभाषा की पठनीयता बढ़ जाती है, इस तरह:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

खाली जगह और बड़े छोटे

अधिकांश शैली पट्टियाँ एक से अधिक नियमों को शामिल करती हैं और अधिकांश नियम एक से अधिक घोषणाओं को शामिल करते हैं।बहुपदांत्र और खाली जगह के उपयोग से शैली पट्टी आसानी से संपादित की जा सकती है:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

खाली जगह शामिल होने से CSS ब्राउज़र में काम करने के लिए नकारात्मक प्रभाव पड़ेगा, इससे भिन्न, XHTML के साथ विभिन्न, CSS बड़े छोटे में असंवेदनशील है।अधिकतर स्थिति में, बहुपदांत्र और खाली जगह के उपयोग से शैली पट्टी आसानी से संपादित की जा सकती है: खाली जगह और बड़े छोटे