शुरुआती के लिए 20 उपयोगी सीएसएस टिप्स

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

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

1. उपयोग reset.css

   जब सीएसएस शैलियों को प्रस्तुत करने की बात आती है, तो फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर जैसे ब्राउज़रों के पास उन्हें संभालने के विभिन्न तरीके हैं. reset.css सभी मूलभूत शैलियों को रीसेट करता है, इसलिए आप एक वास्तविक रिक्त नई स्टाइलशीट के साथ शुरू करते हैं.

   यहाँ कुछ आमतौर पर उपयोग किया जाता है reset.css चौखटे - याहू रीसेट सीएसएस, एरिक मेयर का सीएसएस रीसेट, त्रिपोली

2. आशुलिपि सीएसएस का प्रयोग करें

   शॉर्टहैंड सीएसएस आपको अपने सीएसएस कोड लिखने का एक छोटा तरीका देता है, और सबसे महत्वपूर्ण - यह कोड को स्पष्ट और समझने में आसान बनाता है.

   इसके बजाय सीएसएस बनाने की तरह

   .शीर्षलेख पृष्ठभूमि-रंग: #fff; पृष्ठभूमि-छवि: url (image.gif); बैकग्राउंड-रिपीट: नो-रिपीट; पृष्ठभूमि-स्थिति: शीर्ष बाएं; 

   इसे निम्नलिखित में संक्षिप्त किया जा सकता है:

   .हेडर बैकग्राउंड: #fff url (image.gif) नो-रिपीट टॉप लेफ्ट

   अधिक - सीएसएस आशुलिपि का परिचय, उपयोगी सीएसएस आशुलिपि गुण

3. समझ कक्षा तथा आईडी

   ये दो चयनकर्ता अक्सर शुरुआती को भ्रमित करते हैं। सीएसएस में, कक्षा एक डॉट द्वारा दर्शाया गया है "।" जबकि आईडी एक हैश '#' है। संक्षेप में आईडी शैली पर प्रयोग किया जाता है जो अद्वितीय है और खुद को दोहरा नहीं है, कक्षा दूसरी तरफ, फिर से उपयोग किया जा सकता है.

   अधिक - कक्षा बनाम आईडी | कक्षा, आईडी का उपयोग कब करें | कक्षा और आईडी को एक साथ लागू करना

4. की शक्ति

5. a.k.a लिंक सूची, बहुत उपयोगी है जब वे सही ढंग से उपयोग कर रहे हैं
   या
   , एक नेविगेशन मेनू शैली के लिए particulary.

   • भूल जाओ , प्रयत्न

     CSS का सबसे बड़ा फायदा है

     स्टाइल के मामले में कुल लचीलापन प्राप्त करने के लिए.

     इसके विपरीत हैं

     , जहां सामग्री को 'लॉक' किया जाता है

     सेल है। सबसे कहना सुरक्षित है के उपयोग के साथ लेआउट प्राप्त करने योग्य हैं और उचित स्टाइल, अच्छी तरह से बड़े पैमाने पर सारणी सामग्री को छोड़कर हो सकता है. अधिक - टेबल्स मर चुके हैं, टेबल्स बनाम। सीएसएस, सीएसएस बनाम टेबल सीएसएस डीबगिंग उपकरण CSS को ट्वीक करते हुए लेआउट का तुरंत पूर्वावलोकन प्राप्त करना हमेशा अच्छा होता है, यह CSS शैलियों को बेहतर ढंग से समझने और डिबग करने में मदद करता है। यहां कुछ मुफ्त सीएसएस डिबगिंग टूल दिए गए हैं जिन्हें आप अपने ब्राउज़र पर इंस्टॉल कर सकते हैं: फ़ायरफ़ॉक्स वेब डेवलपर, डोम इंस्पेक्टर, इंटरनेट एक्सप्लोरर डेवलपर टूलबार, और फायरबग. सतही चयनकर्ताओं से बचें कभी-कभी आपकी सीएसएस घोषणा सरल हो सकती है, जिसका अर्थ है कि यदि आप स्वयं को निम्न कोडिंग करते हुए पाते हैं: उल ली … ol li … तालिका tr td … उन्हें छोटा किया जा सकता है ली … td … स्पष्टीकरण: केवल भीतर ही मौजूद रहेगा या तथा तथा केवल अंदर होगा इसलिए उन्हें पुनः सम्मिलित करने के लिए वास्तव में आवश्यक नहीं है. ज्ञान !जरूरी किसी भी शैली के साथ चिह्नित !जरूरी यदि इसके नीचे कोई ओवरराइटिंग नियम है, तो इसका उपयोग सावधानी से किया जाएगा. .पृष्ठ पृष्ठभूमि-रंग: नीला; महत्वपूर्ण पृष्ठभूमि का रंग: लाल; ऊपर के उदाहरण में, पृष्ठभूमि का रंग: नीला अनुकूलित किया जाएगा क्योंकि यह साथ चिह्नित है !जरूरी, यहां तक ​​कि जब वहाँ एक है पृष्ठभूमि का रंग: लाल; इसके नीचे. !जरूरी का उपयोग उस स्थिति में किया जाता है, जब आप किसी शैली को बिना कुछ लिखे उसे ओवरराइट करना चाहते हैं, हालांकि यह इंटरनेट एक्सप्लोरर में काम नहीं कर सकता. छवि के साथ पाठ बदलें यह आमतौर पर प्रतिस्थापित करने के लिए अभ्यास है शीर्षक एक छवि पर एक पाठ आधारित शीर्षक से। यहाँ आप इसे कैसे करते हैं. h1 text-indent: -9999px; पृष्ठभूमि: url ("title.jpg") नो-रिपीट; चौड़ाई: 100px; ऊँचाई: 50px; स्पष्टीकरण: पाठ इंडेंट: -9999px; स्क्रीन द्वारा आपके टेक्स्ट शीर्षक को फेंकता है, इसके द्वारा घोषित छवि द्वारा प्रतिस्थापित किया जाता है पृष्ठभूमि: … एक निश्चित के साथ चौड़ाई तथा ऊंचाई. सीएसएस पोजिशनिंग को समझें निम्नलिखित लेख आपको सीएसएस स्थिति का उपयोग करने में एक स्पष्ट समझ देता है - पद: … अधिक - दस चरणों में सीएसएस पोजिशनिंग जानें सीएसएस @आयात बनाम बाह्य सीएसएस फ़ाइल को कॉल करने के 2 तरीके हैं - क्रमशः उपयोग करते हुए @आयात तथा . यदि आप अनिश्चित हैं कि किस विधि का उपयोग करना है, तो यहां कुछ लेख आपको तय करने में मदद करेंगे. अधिक - @Import और लिंक के बीच अंतर CSS में Designing Form वेब फॉर्म को आसानी से सीएसएस के साथ डिजाइन और अनुकूलित किया जा सकता है। ये निम्नलिखित लेख आपको दिखाते हैं: अधिक - टेबल-कम फार्म, फॉर्म गार्डन, स्टाइलिंग और भी अधिक रूप को नियंत्रित करती है प्रेरित हुआ यदि आप प्रेरणा के लिए अच्छी तरह से डिजाइन किए सीएसएस-आधारित वेबसाइट की तलाश कर रहे हैं, या बस कुछ अच्छा यूआई खोजने के लिए ब्राउज़ कर रहे हैं, तो यहां कुछ सीएसएस शोकेस साइट हैं जो हम सुझाते हैं: सीएसएस रीमिक्स सीएसएस ब्यूटी सीएसएस अभिजात वर्ग सीएसएस उन्माद सीएसएस लीक CSS कोड्स को साफ रखें यदि आपके सीएसएस कोड गड़बड़ हैं, तो आप भ्रम में कोडिंग को समाप्त करने जा रहे हैं और पिछले कोड को फिर से भरने में एक कठिन समय ले रहे हैं। शुरुआत के लिए, आप उचित इंडेंटेशन बना सकते हैं, उन्हें ठीक से टिप्पणी कर सकते हैं. अधिक - अपने कोड को साफ रखने के लिए 12 सिद्धांत, सीएसएस कोड्स को ऑनलाइन फॉर्मेट करें टाइपोग्राफी मापन: पिक्सल बनाम एम माप इकाई का उपयोग करते समय समस्या का चयन करना पिक्सल या एम? ये निम्नलिखित लेख आपको टाइपोग्राफी इकाइयों पर बेहतर समझ दे सकते हैं. सीएसएस ब्राउज़र्स संगतता तालिका हम सभी जानते हैं कि प्रत्येक ब्राउज़र में सीएसएस शैलियों को प्रस्तुत करने के विभिन्न तरीके हैं। एक संदर्भ, एक चार्ट या एक सूची होना अच्छा है जो प्रत्येक ब्राउज़र के लिए संपूर्ण सीएसएस संगतता दिखाता है. सीएसएस समर्थन तालिका: # 1, # 2, # 3, # 4. CSS में Design Multicolumns ठीक से संरेखित करने के लिए बाएं, मध्य और दाएं स्तंभ प्राप्त करने में समस्या हो रही है? यहाँ कुछ लेख हैं जो मदद कर सकते हैं: पवित्र कंघी बनानेवाले की रेती की खोज में अशुद्ध कॉलम आपके सीएसएस कॉलम गड़बड़ कर दिए गए हैं लिट्टे बक्से (उदाहरण) मल्टी-कॉलम लेआउट आउट ऑफ द बॉक्स निरपेक्ष कॉलम एक नि: शुल्क सीएसएस संपादकों जाओ समर्पित संपादक हमेशा एक नोटपैड से बेहतर होते हैं। यहाँ कुछ हम अनुशंसा करते हैं: अधिक - सरल सीएसएस, नोटपैड ++, एक स्टाइल सीएसएस संपादक मीडिया के प्रकारों को समझना जब आप CSS की घोषणा करते हैं तो कुछ मीडिया प्रकार होते हैं . प्रिंट, प्रोजेक्शन और स्क्रीन आमतौर पर इस्तेमाल किए जाने वाले कुछ प्रकार हैं। उन्हें उचित तरीके से समझना और उनका उपयोग करना बेहतर उपयोगकर्ता पहुंच को अनुमति देता है। निम्न आलेख बताता है कि सीएसएस मीडिया प्रकारों से कैसे निपटना है. अधिक - सीएसएस और मीडिया प्रकार, W3 मीडिया प्रकार, सीएसएस मीडिया प्रकार, CSS2 मीडिया प्रकार डेवलपर्स और डिजाइनरों के लिए 20 उपयोगी iPhone ऐप बेहतर ग्राफिक्स के लिए 20 उपयोगी एसवीजी उपकरण वेब डिजाइनरों के लिए 20 अल्ट्रा लाइट और सुरुचिपूर्ण फ़ॉन्ट्स अगला लेख 20 उपयोगी फ़ायरफ़ॉक्स साइडबार ऐड-ऑन पिछला लेख इंस्टाग्राम से सबसे अधिक लाभ पाने के लिए 20 उपयोगी ऐप्स