वहाँ सीएसएस ट्यूटोरियल की बहुत कुछ कर रहे हैं इंटरनेट पर उपलब्ध हैं, लेकिन कुछ ट्यूटोरियल उपयोगी होते हैं. इस ट्यूटोरियल तुम 5 कदम अपने अगले वेबसाइट परियोजना के लिए बेहतर सीएसएस कोड लिख पाएंगे. मुझे आशा है कि आप इस ट्यूटोरियल मज़ा आएगा.

1. ResetCss

तुम हमेशा उपयोग यह एरिक मेयेर रीसेट, YUI रीसेट करें, या अपने स्वयं के कस्टम रीसेट, बस कुछ उपयोग हो सकता है कि फिर से कायम करना चाहिए.

एक रीसेट stylesheet के लक्ष्य को डिफ़ॉल्ट लाइन हाइट्स जैसी बातों में ब्राउज़र विसंगतियों को कम है, मुनाफा और शीर्षकों का फ़ॉन्ट आकार, और इतने पर - एरिक मेयेर

  , html शरीर, div, अवधि, ऐपलेट, वस्तु, H1, h2, h3, h4, h5, h6, iframe, 
  blockquote, पूर्व, abbr, परिचित करा, पता, बड़ा, उदाहरण देते हैं, कोड, डेल, dfn, उन्हें, 
  फ़ॉन्ट, आइएमजी, भारतीय नौसेना पोत, kbd, क्ष, एस, samp, छोटे, हड़ताल, मजबूत, उप, समर्थन, TT, var, 
  , डीडी, डेसीलीटर dt, fieldset, फार्म, लेबल, कथा, मेज, शीर्षक, tbody, tfoot, 
  thead, tr, वीं, td, इनपुट, चुनें, textarea 

  ; padding : 0 ; } (मार्जिन 0:; padding: 0;) 


  ; padding : 0 ; } * (मार्जिन 0:; padding: 0;) 

2. सीएसएस आशुलिपि

सबसे अच्छा और महत्वपूर्ण सीएसएस की सुविधा में से एक के लिए कम से कम एक तरह से कोड लिखने की क्षमता है.

गलत कोड

  ( 
  मार्जिन टॉप: 10px; 
  मार्जिन-right: 7px; 
  मार्जिन-bottom: 10px; 
  मार्जिन-छोड़ दिया 7px:; 

  padding-टॉप: 10px; 
  padding-right: 7px; 
  padding-bottom: 10px; 
  padding-छोड़ दिया 7px:; 

  font-size: 12px; 
  font-weight: bold; 
  ; font-परिवार: Arial, Verdana, Tahoma, बिना सेरिफ़; 
  ) 

सही कोड

 : 10px 7px 10px 7px ; padding : 10px 7px 10px 7px ; font :bold 12px Arial, Verdana, Tahoma, sans-serif ; } (मार्जिन: 10px 7px 7px 10px; padding: 10px 7px 7px 10px; font: 12px बोल्ड Arial, Verdana, Tahoma, बिना सेरिफ़-;) 

3. का उपयोग कर कई और वर्गों नहीं है आईडी

मैंने देखा है कि शुरुआती अधिकांश वर्गों को जोड़ने और आईडी पृष्ठ पर लगभग हर तत्व है, जो required.There है कि मैं क्या बात कर रहा हूँ के नीचे कुछ उदाहरण हैं नहीं है.

गलत कोड

 class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div वर्ग = "wrapper" id = "wrapper"> <p वर्ग = "heading"> <strong वर्ग = "subheading"> आपका स्वागत है </ strong> </ p> <p वर्ग = "linka"> <a href = "वर्ग" # = "कड़ी"> मुख पृष्ठ </ a> </ p> <p वर्ग = "linkb"> <a href = वर्ग = "link"> <बारे में / a> </ p> "#" <पी वर्ग = "linkc> <a वर्ग href = "#" = "link"> सेवा </ a> </ p> <p वर्ग = "linkd"> <a वर्ग href = "#" = "link"> संपर्क करें </ a> p </> </ div> 

यहाँ सही कोड है

सही कोड

 > <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div id = "wrapper"> <h1> में आपका स्वागत है </ H1> <ul> <li> <a href = "#"> मुख पृष्ठ </ a> ली </> <a <li> href = "#"> के बारे में </ a> <लि /> = <a <li> href "#"> सेवा </ a> <लि /> = <a <li> href "#"> संपर्क करें </ a> </ ली> < / उल> </ div> 

4. संगठन तुम Stylesheet

आप अपने stylesheet इतना संगठित होना चाहिए कि ये बातें और संबंधित आइटम मिल आसान है करीब एक साथ हैं. प्रभावी ढंग से इस्तेमाल की टिप्पणियां. उदाहरण के लिए, कोई उदाहरण बताओ तुम कैसे अपने stylesheet व्यवस्थित करने के लिए होगा

  / * रीसेट * / 
   elements निकालें और मार्जिन padding तत्वों 

  / * मूल तत्वों * / 
  मूल तत्वों के लिए परिभाषित शैली: शरीर, H1, h2, h3, h4, h6, राजभाषा, उल, डेसीलीटर, p आदि 

  / * सामान्य वर्ग * / 
  सामान्य वर्ग के लिए परिभाषित शैली: जैसे साधारण चीजें नीचे हटाने,  
  पक्ष अस्थायी आदि  
  / * मूल लेआउट * / 

  / * मूल लेआउट * / 
  मूल लेआउट के लिए शैली: हैडर परिभाषित करें.  पाद लेख, साइडबार आदि 

  / * शीर्षक * / 
  परिभाषित करने के लिए शीर्ष शैली 

  / * सामग्री * / 
  सामग्री को परिभाषित क्षेत्र के लिए शैली 

  / * सूचना * / 
  पाद लेख को परिभाषित करने के लिए शैली 

  / * आदि * / 
  जारी रखें 

5. इस्तेमाल की कंडीशनल Stylesheets

इंटरनेट एक्सप्लोरर सभी ब्राउज़रों की सबसे छोटी गाड़ी है. सौभाग्य से आप सशर्त टिप्पणियों का उपयोग करने के लिए सीएसएस कि IE सेवा की है प्रबंधित कर सकते हैं. अगर मैं इसकी जरूरत मैं एक stylesheet बुलाया ie6.css है कि लक्ष्य IE के पुराने संस्करणों के. यह मेरे पुराने ब्राउज़रों सीएसएस का प्रबंधन करने के लिए जल्दी और आसानी से की अनुमति देता है.

यहाँ उदाहरण है

  <!--[ अगर lte IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > <link रिलायंस एनर्जी = "stylesheet" href प्रकार = "ie6.css" = मीडिया "text/css" = "screen" /> 
 
  -- > ! <[] Endif -> 

निष्कर्ष

ये सुझाव है कि मुझे मदद करने के लिए बेहतर कोड लिखने के कुछ ही रहे हैं. मुझे आशा है कि ट्यूटोरियल भी आपकी मदद करेंगे बेहतर और स्वच्छ लिखने के लिए कोड. आपके वर्तमान और अगले इन परियोजनाओं के लिए युक्तियाँ लागू करें, और आप निश्चित रूप से प्रयास की सराहना करेंगे.

अगर आपको लगता है कि ट्यूटोरियल ज्यादा अच्छा होगा, कृपया हमारे साथ बाँट सकते हैं. हमें टिप्पणी

यदि आप हम से अधिक प्रेरणा प्राप्त करना चाहते हैं, तो कृपया आरएसएस या ईमेल के द्वारा हमारे फ़ीड की सदस्यता लेने पर विचार.

के तहत दायर: सीएसएस, व्यवस्थापक द्वारा Tutorials