مقدمة:
لنقتبس مقطعًا من كتاب: "عندما بدأت تعلم اللغة الصينية لأول مرة، أعطاني معلمي لاو وانغ قاموسًا صينيًا-إنجليزيًا وكتابًا لقواعد اللغة الصينية وبرنامجًا تعليميًا للمبتدئين. ومع ذلك، فقد تم وضع الكتب في سلة الكتب و لن يتم استخدامها حتى الأسبوع التالي، خلال الأسبوع الأول، علمني فقط الاستماع وحفظ بعض العبارات، ثم أراد مني أن أتعلم كيفية تكرار بعض منها المطعم؟ "" "أحضر لي بعض الأرز من فضلك." "كم تكلفة هذا الفستان؟ "خلال ذلك الأسبوع، كان علي قبول المعرفة وبنية الجملة والنطق والقواعد دون قيد أو شرط، ومع ذلك، في يوم الجمعة، كان بإمكاني الذهاب إلى مطعم صيني وطلب وعاء من الأرز ودفع الفاتورة. لا نظرية ولا تفسير كل العبارات البسيطة أعطتني ما يكفي من القواعد والمفردات للقيام بذلك.
لا أعرف منذ متى بدأ الصينيون يأخذون CSS على محمل الجد. بدأ العديد من الأشخاص في تعلم CSS، لكنهم لا يعرفون من أين يبدأون، لذلك تمت كتابة هذه المقالة لهؤلاء المبتدئين ليأخذوهم في قطار CSS.
1. يركز تعلم CSS على الأساليب!
إنه نفس الشيء عند تعلم أي شيء من المدرسة الابتدائية إلى المدرسة المتوسطة إلى الجامعة، بالإضافة إلى تعلم المعرفة، تحتاج أيضًا إلى تعلم الأساليب!
إذا كنت تريد إتقان CSS، فيجب عليك أولاً أن تتعلم HTML. لقد بدأت التعلم من الصفر وقضيت شهرًا في تعلم HTML. لم يكن لدي معلم، لذلك كانت الكتب هي معلمتي الوحيدة، ولم يكن لدي إمكانية الوصول إلى الإنترنت! وبعد شهر، بدأت في تعلم CSS، وكان أول كتاب قرأته عن CSS هو "CSS Web Style Design". وبعد قراءته لبضعة أيام، وجدت أنني لا أستطيع فهمه على الإطلاق! ، ثم تم تغييره إلى "موسوعة HTML المرجعية". هذا الكتاب عبارة عن كتاب مكتبي عادي لمصممي صفحات الويب! سبب تغيير هذا الكتاب لتعلم CSS هو أن جزءًا منه هو CSS، وأصبح كتابي التنويري لـ CSS. بعد قراءة بضع فقرات، أشعر أن البرامج التعليمية التي يكتبها الأجانب منظمة للغاية، بدءًا من السطحي إلى الأعمق، وتقودك إلى الأمام خطوة بخطوة، حتى تفهم ما يتحدثون عنه، على عكس الكتب المحلية التي لديها أعماق مختلفة ونقص في التنظيم، وكأنه يخشى ألا تعلم أنه واسع المعرفة! تمامًا مثل كتاب "CSS Web Style Design" المذكور سابقًا، قرأته في ذلك الوقت كمبتدئ في CSS، ولم يكن لدي أي فكرة عما يتحدث عنه!
لنتحدث عن تفاصيل عملية التعلم، لأنه لا يمكن فصل النمط عن صفحة HTML إذا لم يتم دمج HTML مع النمط، فسوف تفقد CSS معنى الوجود. لذلك، عادةً ما يقدم الكتاب مثالاً ثم يتيح لك اختبار التأثير على الكمبيوتر، وذلك لأن المؤلف يريد منك أن يكون لديك انطباع أولي عن ورقة الأنماط CSS ويخبرك بما يمكن أن تفعله CSS. مثال صغير: "على الرغم من أن العصفور صغير، إلا أنه يحتوي على الأعضاء الخمسة الداخلية." قد لا تفهم المعنى الحقيقي لكل عبارة. لكن يمكنك تذكر نمط المثال واستخدامه بشكل مستمر عمليًا في المستقبل، فعملية الاستخدام المستمر هي عملية الحفظ المستمر، لذلك لا يمكنك الاسترخاء وتعتقد دائمًا أن ذاكرتك ليست جيدة، ولكنها لا تفعل ذلك. لا يهم سواء كنت تركب ثورًا أو حصانًا لمسافة ألف ميل، مهما كان الأمر، طالما لديك المثابرة، فسوف تصل بالتأكيد إلى النهاية.
عند قراءة كتاب، بشكل عام، يجب عليك قراءة الكتاب بأكمله للمرة الأولى. إذا لم تفهمه، يجب عليك مواصلة القراءة أثناء عملية القراءة. بعد قراءتها، سيكون لديك انطباع عام، ولكن لا بد أن هناك أشياء كثيرة لا تفهمها، فقط استمر في القراءة.
للمرة الثانية، عليك تدوين ملاحظات الدراسة أثناء القراءة، واكتب الأجزاء التي تعتقد أنها النقاط الأساسية، واكتب أيضًا الأجزاء التي تعتقد أن لديك أسئلة عنها، واستمر في القراءة مع الأسئلة ، يمكنك نشر منشور على BBS لا يزال هناك العديد من الأشخاص ذوي النوايا الحسنة، إليك تذكير: "يجب أن تتعلم كيفية طرح الأسئلة!" عليك أن تستخدم الكمبيوتر لتتدرب على الأمثلة الموجودة في الكتاب. أكثر ما يربكك هو: "أولاً، لا يمكنك تذكر ذلك، وثانيًا، لديك فهم خاطئ للمفهوم. (قد يكون هذا بسبب الكتاب لم يُترجم بشكل جيد، والآخر أن فهمك خاطئ." )"، بالنسبة للأول عليك بناء الثقة والإصرار والمثابرة. عندما تصل إلى النهاية، ستجد أن كل شيء هو أمر طبيعي. لأنه إذا عملت بجد، فسوف تتم مكافأتك وستحصل على نتائج.
لقد شاهده العديد من الأشخاص أيضًا، لكن لم يحرزوا أي تقدم، أقوم بتحليل الأسباب الرئيسية على النحو التالي:
السبب 1: لا يوجد ما يكفي من الضغط، لأن العديد من الأشخاص، مثل الفنانين، يتعلمون CSS لأنهم يشاهدون الآخرين يتعلمونها، لذلك إذا لم يتعلموها، فلن يكون لديهم أي ميزة! هذا النوع من الضغط صغير جدًا، إذا لم تتعلم جيدًا، فسيظل لديك وظيفة كفنان.
السبب الثاني: إنها مجرد دراسة بدوام جزئي، وهي للمتعة فقط، لأنه ليس عليك بالضرورة أن تكسب عيشك باستخدام هذه التكنولوجيا.
السبب الثالث: الطريقة خاطئة. بعض الأشخاص يشاهدون البرامج التعليمية فقط، لكنهم لا يفعلون ذلك. اعتدت أن أشاهد الكثير وأقوم بالقليل جدًا، لذلك فقط من خلال الممارسة يمكنك دمج الأشياء النظرية.
2. إتقان المراحل التعليمية الأربع لـ CSS
ذات مرة سألت أحد مستخدمي الإنترنت، هل من الصعب تعلم CSS؟
قالت: "الأمر ليس صعبًا." فسألتها: "منذ متى وأنت تدرس؟" قالت: "لقد علمت للتو". وفي الحقيقة ما قالته هو الصحيح! إذا سألني أحدهم هل من الصعب تعلم CSS؟ أود أن أقول: "إنه أمر صعب!" لماذا أقول إنه صعب؟
يمكن تقسيم تعلم CSS إلى المراحل التالية:
المرحلة 1: يمكن إنشاء الصفحة دون التفكير في مشكلات توافق المتصفح، ولكن تتم كتابة الصفحة باستخدام وضع TABLE DIV في كل مكان.
المرحلة 2: يتم التفكير في مشكلات التوافق، ولكن لا توجد طريقة لمنعها مسبقًا، يمكنهم فقط حل المشكلات واستخدام تقنية HACK على نطاق واسع (أنا أعرف فقط عن تقنية HACK، لكن نادرًا ما أستخدمها).
المرحلة 3: يمكن منع الأخطاء مسبقًا، ولكن يتم استخدام ID وCLASS على نطاق واسع في ورقة الأنماط، ويتم ترجمة CSS كأوراق أنماط متداخلة، مثل "DIV P SPAN". يشير هذا الرمز إلى العنصر الفرعي SPAN لـ P في العنصر الفرعي لـ DIV. من خلال الكتابة بهذه الطريقة، يمكنك تحديد نمط SPAN دون إضافة CLASS إلى SPAN. هذه هي ميزة CSS، لماذا لا تستغلها بشكل جيد وتأكد من تحديد فئة!
المرحلة 4: هذه المرحلة هي أصعب وأحسن بنية دلالية HTML وCSS معقولة وأنماط قابلة لإعادة الاستخدام. هناك مقالات في هذا المجال حول الدلالات الجيدة و CSS المعقولة وسأكتب بالتأكيد موضوعًا خاصًا لدراسة هذين الجانبين في المستقبل.
3. الأسئلة المتداولة للمبتدئين في CSS
دعونا نأخذ الأمر خطوة بخطوة. الشرط الأول هو أنه يجب أن يكون هناك عنوان أسفل الصورة المصغرة مباشرة. الأمر بسيط جدًا: ضع صورة في HTML، متبوعة بفاصل أسطر (BR)، ثم ضع العنوان داخل فقرة (P) وقم بتوسيطها (باستخدام CSS).
بعد ذلك نحتاج إلى ترتيب هذه الصور المصغرة والعناوين في أزواج في نافذة المتصفح. عند استخدام تخطيط الجدول، سيتم وضع أزواج الصور المصغرة والعناوين في TD على التوالي. عند استخدام تخطيط CSS، نحتاج إلى وضعها في DIV على التوالي. من أجل ترتيبها أفقيًا على النافذة، نستخدم CSS لتعويم عناصر DIV هذه إلى اليسار (FLOAT).
السؤال 1: ما نوع الكتاب الذي يجب أن أختار قراءته لتعلم CSS؟
اسمحوا لي أن أوصي ببعض الكتب أولاً:
"الدليل النهائي لCSS"
"إعادة بناء الموقع"
"سجل تخطيط موقع الويب"
"مرجع HTML"
إذا كنت لا تعرف الكثير عن HTML، يمكنك أولاً قراءة كتاب "مرجع HTML". هذا الكتاب ليس كتابًا تعليميًا فحسب، بل هو أيضًا كتاب أدوات جيد للاستعلام عن HTML. إن كتابي "إتقان CSS" و"تصميم الويب الذي لا تشوبه شائبة" المنشوران مؤخرًا هما كتابان جيدان جدًا، لكنهما غير مناسبين للأشخاص الذين ليس لديهم أساس في CSS. إذا كنت تريد أن تصبح منشئ CSS ممتازًا، فيجب أن يكون لديك أيضًا خبرة قوية Foundation باللغة الإنجليزية، يمكنك قراءة دروس CSS الأجنبية والمشاركة في المنتديات ذات الصلة. يقول بعض الأشخاص أنه إذا كنت لا تفهم اللغة الإنجليزية، فيمكنك فقط قراءة الكود، ولكن في الواقع، لا تناقش كتبهم الكود فحسب، بل الأهم من ذلك. سيخبروننا أن فكرة البرمجة وطريقة البرمجة تستحق التعلم والفهم. بالإضافة إلى ذلك، فإن البرامج التعليمية الصينية التي أوصي بها هي: "HTML and CSS Standard"، و"CSS2 Chinese Manual" لـ Su Chen Xiaoyu، والنسخة الإلكترونية من "Web Designer"؛ وهناك العديد من الكتب الإلكترونية الأجنبية والإنجليزية، لذلك لن أفعل ذلك. لا تعطي أمثلة واحدا تلو الآخر. قراءة الكتب الإلكترونية مهمة شاقة للغاية، فأنا لست معتادًا على قراءة الكتب الإلكترونية، لذلك غالبًا ما أشتري كتبًا لقراءتها.
السؤال 2: ما هو البرنامج المستخدم لتحرير كود CSS؟
يبدو أن هذا السؤال يتم طرحه في أغلب الأحيان! اسمحوا لي أن أتحدث عن نفسي أولاً. لقد استخدمت DreamWeaver لأول مرة لكتابة التعليمات البرمجية نظرًا لأن برنامج DreamWeaver نفسه عبارة عن برنامج يستهلك الكثير من وحدة المعالجة المركزية والذاكرة، يمكنك تخيل سرعة التحرير أثناء وقت التشغيل. بعد المشي لفترة طويلة، انتقلت إلى حالة "شبه الكتابة اليدوية". تمت المطالبة به لاحقًا، وهو مناسب لك للاختيار. إذا كتبت بضعة أحرف أخرى، فسيتم العثور على النمط الذي تريده بسرعة، وقد يؤدي ذلك إلى تسريع أسلوبك في الكتابة، ولكن أحد العيوب هو أنه إذا تركت برنامج التحرير الذي يطالبك، فلن تتمكن من كتابة الأنماط. على سبيل المثال، عندما تقوم بتعديل نمط الضبط الدقيق من أحد المبرمجين، فقد لا يستخدم نفس البرنامج الذي تستخدمه، وقد لا يكون لديه وظيفة مطالبة التعليمات البرمجية، لذلك يمكنك فقط العودة إلى جهازك الخاص لتحريره ثم أرسله إلى المبرمج! من الواضح أن هذا غير مهني! لذا، إذا كنت تريد أن تكون شخصًا ممتازًا، عليك أن تكون محترفًا!
وبعد قولي هذا، يبدو أن الموضوع لم يُذكر بعد:
طالما يمكنك الكتابة يدويًا، يمكنك استخدام أي برنامج. يوصى باستخدام البرنامج الإضافي DreamWeaver TopStyle (أحدث إصدار هو Pro V3.12).
السؤال 3: هل يجب أن أكتب HTML أم CSS أولاً؟
هناك العديد من الإجابات على الإنترنت: اكتب HTML أولاً ثم اكتب CSS؛ اكتب CSS أولاً ثم اكتب HTML؛ أميل إلى الكتابة معًا، فكتابة CSS أولاً أو كتابة HTML أولاً ليست طرقًا مناسبة للمبتدئين. إذا طلبت من شخص أن يكتب كودًا، وقلت له أن يكتب HTML أولاً، فلا يمكن تعديل HTML بعد الكتابة، ثم تكتب CSS، إذا كان يمكنه كتابته، فيجب أن يكون هذا الشخص منشئًا عالي المستوى! لذلك بالنسبة للمبتدئين، أوصي في معظم الحالات بالكتابة في نفس الوقت وسأشرح الخطوات المحددة:
أولاً، نحتاج إلى إنشاء الموقع والدليل. على سبيل المثال، نقوم بإنشاء المجلدين CSS وIMAGES، وهما المجلدان الأساسيان، ثم نقوم بإنشاء ملف HTML جديد، وstyle.css، وورقة أنماط فارغة، ونقوم بالاتصال صفحات HTML إلى ورقة الأنماط الخارجية هذه.
ثم نكتب أولاً جزء التخطيط الأساسي في HTML باستخدام DIV، ثم نضيف المعرف أو الفئة مباشرةً إلى DIV، وتشمل أجزاء التخطيط هذه الجزء الخارجي، وجزء الرأس، والجزء الأوسط، واليسار، والوسط، واليمين ، جزء حقوق الطبع والنشر، وما إلى ذلك.
بعد كتابة هذه العناصر، يمكنك بعد ذلك الانتقال إلى ورقة الأنماط لكتابة النمط، أو يمكنك الاستمرار في كتابة الأجزاء في التخطيط لنأخذ الرأس كمثال، ونكتب جزء الشعار في الرأس، ونضيف أيضًا المعرف أو CLASS إلى جزء NAV. وينطبق الشيء نفسه على الآخرين.
لماذا نقول أنه من المستحيل كتابة جزء HTML دفعة واحدة لأنه من المحتمل أن يرتكب الأشخاص أخطاء في عملية كتابة أفكارك، أو مشكلات في توافق المتصفح، بعضها بسببك لا يتم توقع أوجه القصور مسبقًا، لذلك عندما تجد مشكلات عند كتابة الأنماط، قد تضطر إلى تغيير كود HTML الخاص بك. هذه هي الطريقة التي تكتب بها، يمكنك أيضًا استخدام HTML/CSS في نفس الوقت، كل هذا يعتمد على عاداتك. عندما نكتب الكود، فإننا غالبًا ما نختبره أثناء كتابته، وهذا لا يعني كتابة جملة واحدة لاختبار جملة واحدة، بل نكتب جزءًا من الكود ثم نختبره باستخدام IE6 وFF في نفس الوقت . في معظم الأحيان، سيختبر المطور الجيد الكود الخاص به بعد كتابته لفترة طويلة، وذلك لأنه إذا كان لدى الشخص خبرة أكبر، فسوف يعرف ويمنع حدوث أخطاء في المتصفح مسبقًا! حتى يتمكنوا من كتابة التعليمات البرمجية بشكل أسرع من الأشخاص عديمي الخبرة. لقد مروا بالفعل بالأخطاء التي تمر بها. في المرة الأولى التي تواجه فيها مشكلة عرض خاطئة في المتصفح، يتعين عليك قضاء بعض الوقت في إصلاحها، ولكن يمكنهم منعها مسبقًا أو حل المشكلة على الفور! وهذا أحد الفروق بينك وبينهم.
هناك اختلاف آخر بين المبتدئين والخبراء وهو أن الخبراء يستخدمون الكثير من مفاتيح الاختصار، لذا تأكد من تذكر مفاتيح الاختصار شائعة الاستخدام، حيث ستتحسن كل التفاصيل الصغيرة قليلاً، وستحقق معًا تحسنًا كبيرًا.
بالإضافة إلى ذلك، فإن أفضل طريقة لتحسين مستواك هي التدرب أكثر والعثور على بعض قوالب HTML+CSS الأفضل لممارسة البرمجة. اختر قالبًا أبسط في البداية، والتقط لقطة شاشة للصفحة، ثم استخدم أفكارك الخاصة في هذا الشأن استعادة إلى صفحة HTML...