2010-07-10 18 views
10

मैं पिछले दो सालों से वेबसाइट विकसित करता हूं और मुझे सीएसएस सीखने में कठिनाई होती है (बस पूरे दिन एक ट्विटर जैसे लॉगिन बॉक्स बनाते हैं ...)। और जल्दी या बाद में मैं टेबल लेआउट पर वापस आ जाता हूं, और चीजों को पूरा करता हूं (लगभग हर चीज के लिए मैं दूसरे के स्रोत कोड में गहरी खुदाई करता हूं और Google नरक की तरह Google ... लेकिन मेरी इच्छा है कि मुझे यह पता चल जाए कि जिस तरह से मैं सामान्य रूप से अपना पता लगाता हूं पूरे दिन Google की बजाय प्रोग्रामिंग समस्या ...)।सीएसएस सीखना अधिक से अधिक पेशेवर

और यहां तक ​​कि कुछ समय बाद अगर मैं एक आदर्श लेआउट बनाने के लिए, और परीक्षण के लिए वापस आईई पर जाने के लिए लक्ष्य को प्राप्त करने, सब कुछ गड़बड़ है।

मैं इसे विकसित करने वाला एकमात्र लड़का हूं, इसलिए आम तौर पर 70% मेरा समय डिजाइन पर खर्च करता है और प्रोग्रामिंग पर 30% खर्च करता है।

मैं मैं कुछ अधिक जानने के लिए इतना है कि मैं कम समय खर्च मेरी लेआउट और अधिक समय कार्यक्रम यह एडजस्ट करने की जरूरत है।

आप सभी प्रोग्रामर + डिजाइनर कैसे काम करते हैं? और, सीएसएस मास्टर कैसे करें?

+1

मास्टरिंग सीएसएस IE6 से आप को बचाने के लिए पर्याप्त नहीं होगा:

इसके बाद आप एक सीएसएस रीसेट और आधार की आवश्यकता होगी। – TNi

+0

सीएसएस सीखना पूरी तरह से, और कुछ आईई quirks, वास्तव में आईई 6 के साथ मेरी मदद की। इन दिनों बहुत कुछ मैं बहुत कम संशोधन के साथ Ie6/7 में ठीक से समाप्त होता है। – JAL

+1

यहां एक लिंक है जो शायद आपकी मदद करेगा: http://www.quirksmode.org/ – Alerty

उत्तर

13

कैसे आप सभी प्रोग्रामर + डिजाइनर काम करता है?

सीएसएस के साथ काम करते समय, मुझे लगता है कि मानक मानकों के लिए साइट को पहले डिजाइन करना और बनाना सर्वोत्तम है (मेरी वरीयता फ़ायरफ़ॉक्स है)।फिर, जब आप इसे सही दिख रहे हों, तो इसे इंटरनेट एक्सप्लोरर और अन्य ब्राउज़रों के लिए जांचें।

किसी भी जटिलता के डिजाइन के लिए, दुर्भाग्यवश, कई ब्राउज़रों के साथ एक समय तय करने के लिए समय लगेगा जब तक यह लगातार न हो।

और, सीएसएस कैसे मास्टर करें?

वहाँ कई improtant चीजों अपने सिर रैप करने के लिए है कि चारों ओर अपने सीएसएस जीवन को आसान बना देंगी: पहले मैं सीखना होगा Box model है। यही कारण है कि जो यह थोड़ा सरल करता है, साथ ही विषय है, जो काफी लंबा है पर सरकारी W3C लेख है, तो मैं नीचे कोई चित्र शामिल करेंगे:

alt text

यह नोट करना ब्राउज़रों अलग ढंग से इस गणना कि महत्वपूर्ण है।

एक बार जब आप जानते हैं कि चीजों को आकार देने के कारण क्या हो रहा है, तो लेआउट को टेबल के समान शैली में हासिल करना आसान होना चाहिए।

दूसरा जिसने मुझे अपने सिर को लपेटने में मदद की थी विशिष्टताThis article ने मुझे यह काम करने में बहुत मदद की। आवश्यक सारांश यह है कि प्रत्येक प्रकार के चयनकर्ता (तत्व, कक्षा, आईडी) के वजन को जिम्मेदार ठहराया जाता है और यदि किसी तत्व के वजन के साथ एक सीएसएस मान होता है, तो इसे ओवरराइट नहीं किया जाएगा।

#ID 0,1,0,0

.class 0,0,1,0

पी 0,0,0,1

1,0,0,0

तो इससे कोई फर्क नहीं पड़ता कि आपकी सीएसएस फाइलें क्या कहती हैं, इनलाइन शैली को प्राथमिकता मिलती है। उदाहरण:

a {color: red;}            (0,0,0,1) 
.class1 a {color: blue;}   Overwrites red    (0,0,1,1) 
#id1 a {color: green;}   Overwrites blue    (0,1,0,1) 
#id1 .class1 a {color: yellow;} Overwrites green    (0,1,1,1) 
#id2 a {color: red;}    Overwrites green, NOT yellow (0,1,0,1) 
#id1 #id2 a {color: black;}  Overwrites yellow and red (0,2,0,1) 

मैं अभी भी लेख पढ़ता हूं। दो बार।

सीखने की तीसरी बात यह है कि पिछले ब्राउज़र (आईई 6 जैसे) और उन बगों का समर्थन कैसे करें जिनके साथ वे आपको पीड़ित करेंगे। मैं इस साइट का प्रशंसक हूं: http://www.positioniseverything.net/ वे स्पष्टता और समाधान के साथ कवर करते हैं, सीएसएस के साथ क्रॉस-ब्राउज़र समर्थन लागू करते समय आपको कई ब्राउज़र बग मिलेंगे।

कीड़े आप IE6 के साथ मुठभेड़ की संभावना होगी से कुछ हैं:

+0

आईई 6 मानक मोड में एमएस के बॉक्स मॉडल का उपयोग नहीं करता है, है ना? – JAL

+0

कोई भी http://www.molly.com/2005/10/06/css2-and-css21- विशिष्टता-clarified/ के लिए नवीनतम लिंक जानता है? – Antony

+0

@ एंटनी मैंने इसे "द वेबैक मशीन" लिंक से अपडेट किया है। मैं मूल लेखक से संपर्क करने की कोशिश करूंगा और देख सकता हूं कि मैं इसे भविष्य में दर्पण कर सकता हूं, क्योंकि ऐसा लगता है कि ब्लॉग को हटा दिया गया है, लेकिन यह अभी के लिए करेगा। – staticbeast

3

मुझे 2 साल पहले इसी तरह की समस्या थी। मैंने सीएसएस 2.1 spec (डब्ल्यू 3 सी से मुफ्त डाउनलोड) पढ़ा - यह कठिन पढ़ा गया था - और परीक्षण के लिए एफएफ के साथ आगे और पीछे लोड था, लेकिन यह वास्तव में मेरी सीएसएस समझ को मजबूत करता था (जो जल्द ही सीएसएस से जुड़े परियोजनाओं के साथ मिलकर)। विपणन सीएसएस पुस्तकों के अधिकांश भी एक गहरी समझ (कि आप अपने स्वयं अवधारणाओं के लिए स्वतंत्र रूप से लागू कर सकते हैं)

7

मैं 12+ वर्षों के लिए वेब काम कर रहा हूँ: एक बात मेरा सुझाव है wireframing है। मैं टेबल लेआउट, फ्रेम, डीएचटीएम, एक्सएचटीएमएल, सीएसएस, अजाक्स, के माध्यम से रहता था ... मुझे पहली बार याद आया जब मैंने सीएसएस देखा, मैंने सोचा "WTH यह गड़बड़ है? मुझे इसकी कभी आवश्यकता नहीं होगी।" एक साल बाद मैंने खुद को सीख लिया, और वास्तव में आप इसके साथ कुछ वाकई शक्तिशाली चीजें कर सकते हैं। लेकिन सीखने और इसे अच्छी तरह से सीखने में, इसमें समय और समर्पण लगेगा।

कुछ संकेत, एरिक मेयर की तरह एक सीएसएस रीसेट का उपयोग करें। http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/। इससे बहुत से ब्राउज़र-विशिष्ट प्रारूपण को बेअसर कर दिया जाएगा ताकि आप एक साफ स्लेट के साथ शुरू कर रहे हों लेकिन अन्य रीसेट के रूप में ज्यादा ओवरहेड न हो।

सुनिश्चित करें कि आप शीर्ष पर वांछित DOCTYPE के साथ एक अच्छी तरह से निर्मित HTML/XHTML दस्तावेज़ है, बनाओ। अलग-अलग ब्राउज़र अलग-अलग DOCTYPE के अनुसार पृष्ठों को अलग-अलग प्रस्तुत करेंगे।

सीएसएस भी सोचने का एक अलग तरीका है। जबकि इससे पहले कि आप इस ब्लॉक में एक ग्राफिक स्थित हो, अचानक आप परतों और पृष्ठभूमि के संदर्भ में सोच रहे हैं। शायद ग्राफिक एक ब्लॉक में नहीं है लेकिन पैडिंग और पृष्ठभूमि छवि स्वयं है। चीजों को अलग-अलग देखने में समय लगता है।

और अंत में, मैं इन सभी वर्षों मैं अभी भी टेबल पर वापस लौटने जाएगा मेरी रूपों में से सबसे लेआउट के बाद स्वीकार करेंगे। सीएसएस महान है, लेकिन यह पवित्र अंगूर नहीं है। व्यावहारिक बनें आप http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4 के पहले भाग को देखना चाह सकते हैं जहां क्रॉकफोर्ड इन वेब मानकों जैसे एचटीएमएल और सीएसएस और उनके साथ मुद्दों के साथ क्या देखता है, के लिए थोड़ा सा इतिहास रेखांकित करता है।

+0

मुझे वह डक्टटाइप सबसे अच्छा सलाह देता है, इसकी छोटी गाड़ी कितनी डिक्टिप लेआउट बदल सकती है। धन्यवाद। – iamgopal

1

आपको Opera Web Standards Curriculum देखें। सीएसएस पर कुछ उत्कृष्ट लेख हैं। कम से कम क्रिस हेइलमैन के परिचय को पढ़ें।

1

मैं इस वर्ग ऑनलाइन ले गया - http://www.sitepoint.com/courses/css-live

और यह अद्भुत था। यह बहुत सस्ता है और सीएसएस

+0

साइटपॉइंट का 'द अल्टीमेट सीएसएस रेफरेंस' एक बहुत अच्छी किताब है - मुझे बहुत मदद मिली। – JAL

7

की एक बहुत अच्छी समझ देता है, यहां दूसरी महान सलाह के अलावा, मैंने सही टूल के साथ एक बड़ी मदद के साथ विकास भी पाया है।

प्रारंभ करने के लिए, मुझे Notepad++ जैसे संपादक में सीएसएस लिखने में मदद मिल सकती है, क्योंकि सिंटैक्स हाइलाइटिंग आपके द्वारा जाने वाली छोटी त्रुटियों को निराशाजनक चुन सकती है।

मैं फ़ायरफ़ॉक्स का प्रारंभिक परीक्षण के लिए भी उपयोग करता हूं, और सुनिश्चित करता हूं कि ऊपर दिए गए अनुसार DOCTYPE सेट है।

मैं Firebug नामक एक उत्कृष्ट फ़ायरफ़ॉक्स प्लगइन का भी उपयोग करता हूं, जो आपको पृष्ठ के डीओएम तत्वों का निरीक्षण करने और कई अन्य विशेषताओं के बीच सीएसएस के बारे में तत्काल विचार के लिए अपने सीएसएस को बदलने के लिए अनुमति देता है।

तब मैं सुनिश्चित करता हूं कि HTML और CSS दोनों W3C मानकों के अनुसार मान्य हैं। यह http://validator.w3.org/ और http://jigsaw.w3.org/css-validator/ पर या Html Validator नामक एक और फ़ायरफ़ॉक्स प्लगइन के माध्यम से ऑनलाइन किया जा सकता है।

साथ ही, मैं पाया है कि जब मैं जावास्क्रिप्ट में एक पृष्ठ में हेरफेर करना चाहते हैं, मैं, Javascript फ़्रेमवर्क jQuery का उपयोग कर बेहद उपयोगी होने के लिए HTML/डोम/सीएसएस बारीकियों से दूर सार संक्षेप और अच्छी तरह से परीक्षण किया इजाजत दी पाया है कि क्रॉस ब्राउज़र संगतता।

शायद एक सीएसएस ढांचे पर भी एक नज़र डालें। इन्हें कई सामान्य लेआउट स्थितियों के लिए सीएसएस शैलियों की कोशिश की गई है और परीक्षण किया गया है। मैंने सुना है Frame की सिफारिश की है, और मुझे अच्छा लग रहा है।

मुझे एक बड़ी सीएसएस फ़ाइल को प्रबंधित करने और पढ़ने में मुश्किल होती है। लेकिन मुझे चिंतित था कि फ़ाइल को छोटे हिस्सों में विभाजित करना (उदाहरण के लिए प्रति पृष्ठ एक सीएसएस फ़ाइल) पृष्ठ लोडिंग धीमा कर देगा। समाधान Minify का उपयोग करना था। यह सीएसएस फ़ाइलों को एक फ़ाइल के रूप में कार्य करने की अनुमति देता है, साथ ही रिडंडेंट स्पेसिंग इत्यादि को हटाने के परिणाम को 'संपीड़ित' करने की इजाजत देता है। ब्राउज़र का उपयोग करने के लिए यह बहुत आसान है और ब्राउज़र को साइट की पुरानी सीएसएस फाइलों को कैश करते समय समस्याएं भी हटाती हैं।

0

यदि आप सीएसएस के लंगेज को पूरी तरह से समझ नहीं पाते हैं, तो आप अनिवार्य रूप से एक टन बर्बाद कर देंगे। प्रोग्रामिंग समय के रूप में पर्याप्त उपभोग करने वाला है !!

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

संबंधित मुद्दे