20 نصائح مفيدة المغلق للمبتدئين

في الأيام الخوالي ، نعتمد كثيرًا على المطورين والمبرمجين للمساعدة في تحديث الموقع ، حتى عندما يكون بسيطًا. بفضل CSS ومرونته ، يمكن استخراج الأنماط بشكل مستقل بعيدًا عن الرموز. الآن ، مع بعض الفهم الأساسي لـ CSS ، حتى المبتدئ يمكنه بسهولة تغيير نمط موقع الويب.

سواء كنت ترغب في اختيار CSS لإنشاء موقع الويب الخاص بك ، أو لمجرد تعديل شكل مدونتك وشعورك بالقليل - من الجيد دائمًا أن تبدأ مع الأساسيات للحصول على أساس أقوى. دعنا نلقي نظرة على بعض نصائح المغلق اعتقدنا قد تكون مفيدة ل مبتدئين. قائمة كاملة بعد القفز.

1. استعمال reset.css

   عندما يتعلق الأمر بتقديم أنماط CSS ، يكون للمتصفحات مثل Firefox و Internet Explorer طرق مختلفة للتعامل معها. reset.css إعادة تعيين جميع الأنماط الأساسية ، بحيث تبدأ مع أوراق أنماط جديدة فارغة حقيقية.

   هنا عدد قليل شائع الاستخدام reset.css إطار أعمال - Yahoo Reset CSS, إريك ماير إعادة تعيين CSS, طرابلس

2. استخدام الاختزال المغلق

   يوفر لك Shorthand CSS طريقة أقصر لكتابة رموز CSS الخاصة بك ، والأهم من ذلك كله - أنه يجعل الشفرة أكثر وضوحًا وأسهل للفهم.

   بدلاً من إنشاء CSS مثل هذا

   .header background-colour: #fff؛ صورة الخلفية: url (image.gif) ؛ تكرار الخلفية: عدم التكرار ؛ خلفية الموقف: أعلى اليسار. 

   يمكن أن يكون قصيرا في ما يلي:

   .header background: #fff url (image.gif) بلا تكرار أعلى اليسار

   أكثر من - مقدمة في CSS الاختزال, خصائص CSS اختزال مفيدة

3. فهم صف دراسي و هوية شخصية

   غالباً ما يربك هذان المحددان المبتدئين. في CSS, صف دراسي ويمثلها نقطة "." في حين هوية شخصية هو التجزئة "#". باختصار هوية شخصية يستخدم على نمط فريد ولا يعيد نفسه, صف دراسي على الجانب الآخر ، يمكن إعادة استخدامها.

   أكثر من - الطبقة مقابل المعرف | عند استخدام فئة ، معرف | تطبيق الطبقة ومعرف معا

4. قوة

5. قائمة روابط a.k.a ، مفيدة جدًا عند استخدامها بشكل صحيح مع
   أو
   , ولا سيما على غرار قائمة التنقل.

   • ننسى , محاولة

     واحدة من أعظم مزايا CSS هو استخدام

     لتحقيق المرونة الكاملة من حيث التصميم.

     على عكس

     , حيث يتم "تأمين" محتويات داخل

     خلية. من الآمن القول أكثر تخطيطات قابلة للتحقيق مع استخدام والتصميم السليم ، حسنا ربما باستثناء محتويات جدولية ضخمة. أكثر من - الجداول ميتة, الجداول مقابل CSS, المغلق مقابل الجداول أدوات تصحيح CSS من الجيد دائمًا الحصول على معاينة فورية للتخطيط أثناء التغيير في CSS ، فهو يساعد على فهم وتصحيح أنماط CSS بشكل أفضل. فيما يلي بعض أدوات تصحيح أخطاء CSS المجانية التي يمكنك تثبيتها على متصفحك: FireFox Web Developer و DOM Inspector وشريط أدوات Internet Explorer Developer و Firebug. تجنب محددات زائدة عن الحاجة في بعض الأحيان يمكن أن يكون إعلان CSS الخاص بك أكثر بساطة ، وهذا يعني أنك إذا وجدت نفسك يقوم بترميز ما يلي: ul li ... ol li ... الجدول tr يمكن اختصارها إلى مجرد لي ... td ... تفسير: سوف توجد فقط داخل أو و و سوف يكون فقط في الداخل لذلك ليس من الضروري حقًا إعادة إدخالها. معرفة !مهم أي نمط ملحوظ مع !مهم سيتم استخدامها بغض النظر إذا كانت هناك قاعدة للكتابة فوقها. .page background-color: blue! important؛ لون الخلفية: أحمر؛ في المثال أعلاه, لون الخلفية: أزرق سيتم تكييفه لأنه تم وضع علامة عليه !مهم, حتى عندما يكون هناك لون الخلفية: أحمر. تحتها. !مهم يستخدم في الموقف الذي تريد فيه فرض نمط ما دون الكتابة فوقه ، لكن قد لا يعمل في Internet Explorer. استبدال النص بالصورة هذا هو عادة ممارسة ليحل محل عنوان من عنوان النص القائم على صورة. إليك كيف تفعل ذلك. h1 text-indent: -9999px؛ الخلفية: عنوان url ("title.jpg") بلا تكرار ؛ العرض: 100px؛ الطول: 50px؛ تفسير: النص في الهامش: -9999px. يلقي عنوان النص الخاص بك قبالة الشاشة ، استبدال صورة أعلن عنها خلفية: … مع ثابت عرض و ارتفاع. فهم تحديد المواقع المغلق تمنحك المقالة التالية فهماً واضحًا في استخدام CSS لتحديد المواقع - موضع: … أكثر من - تعلم تحديد المواقع المغلق في عشر خطوات CSS @استيراد ضد هناك طريقتان للاتصال بملف CSS خارجي - باستخدام التوالي @استيراد و . إذا كنت غير متأكد من طريقة الاستخدام ، فإليك بعض المقالات التي تساعدك على اتخاذ القرار. أكثر من - الفرق بينimport والرابط تصميم النماذج في CSS يمكن تصميم نماذج الويب وتخصيصها بسهولة باستخدام CSS. توضح لك هذه المقالات التالية: أكثر من - الجدول أقل شكل, شكل حديقة, التصميم حتى المزيد من الضوابط النموذج اشعل حماسك إذا كنت تتجول حول موقع ويب مصمم بشكل رائع على CSS للحصول على الإلهام ، أو مجرد تصفح للعثور على واجهة مستخدم جيدة ، فإليك بعض مواقع عرض CSS التي نوصي بها: المغلق ريميكس CSS الجمال المغلق النخبة هوس المغلق تسرب المغلق الحفاظ على رموز CSS نظيفة إذا كانت أكواد CSS الخاصة بك فوضوية ، فسينتهي بك الأمر إلى الترميز في لبس وتواجه صعوبة في التحكم في الشفرة السابقة. بالنسبة للمبتدئين ، يمكنك إنشاء مسافة بادئة مناسبة ، والتعليق عليها بشكل صحيح. أكثر من - 12 مبادئ لحفظ كودك نظيف, تنسيق رموز CSS على الإنترنت قياس الطباعة: بكسل ضد م تواجه مشكلة في اختيار متى تستخدم وحدة القياس بكسل أو م? قد تمنحك هذه المقالات التالية فهمًا أفضل لوحدات الطباعة. جدول توافق المتصفحات CSS نعلم جميعًا أن كل مستعرض لديه طرق مختلفة لتقديم أنماط CSS. من الجيد أن يكون لديك مرجع أو مخطط أو قائمة تعرض توافق CSS بالكامل لكل مستعرض. جدول دعم CSS: # 1, # 2, # 3, # 4. تصميم الأعمدة المتعددة في CSS تواجه مشكلة في الحصول على العمود الأيسر الأوسط واليمين لمحاذاة بشكل صحيح؟ فيما يلي بعض المقالات التي قد تساعد: في البحث عن الكأس المقدسة أعمدة فو أهم أسباب إفساد أعمدة CSS صناديق ليت (أمثلة) متعدد الأعمدة تخطيطات الخروج من المربع الأعمدة المطلقة احصل على محرر CSS مجاني المحررين المخصصين دائمًا أفضل من المفكرة. فيما يلي بعض نوصي: أكثر من - CSS بسيط, المفكرة ++, محرر نمط CSS فهم أنواع الوسائط هناك بعض أنواع الوسائط عندما تعلن عن CSS . تعد الطباعة والإسقاط والشاشة من الأنواع الشائعة الاستخدام. فهم واستخدامها بطرق مناسبة تسمح بإمكانية وصول أفضل للمستخدم. تشرح المقالة التالية كيفية التعامل مع أنواع CSS Media. أكثر من - أنواع CSS والوسائط, أنواع الوسائط W3, أنواع وسائط CSS, أنواع الوسائط CSS2 20 تطبيقات iPhone مفيدة للمطورين والمصممين 20 أدوات SVG مفيدة لتحسين الرسومات 20 خطوط خفيفة للغاية وأنيقة لمصممي الويب المادة التالية 20 إضافات مفيدة من الشريط الجانبي في فايرفوكس المقال السابق 20 تطبيقات مفيدة للحصول على أقصى استفادة من Instagram