هناك العديد من النصائح حول تطوير تخطيطات الويب CSS، وغالبًا ما لا يكون الأصدقاء المبتدئون على دراية بها. قد يستغرق الأمر وقتًا طويلاً لحل مشكلة أو مشكلتين صغيرتين، على الرغم من ذكر هذا الجانب عدة مرات في مستندات موقع 52CSS.com، إلا أن العديد من الأصدقاء ما زالوا يرتكبون أخطاء بشأن هذه المشكلات. دعونا نلقي نظرة على تقنيات CSS هذه اليوم، اقرأها بعناية، ربما لا تفهمها تمامًا، يمكنك البحث في 52CSS.com لتوسيع المعرفة التي تريدها.
1. تحتوي علامة ul على قيمة الحشو بشكل افتراضي في Mozilla، ولكن في IE فقط الهامش له قيمة.
2. يمكن أن يظهر محدد الفئة نفسه بشكل متكرر في المستند، ولكن يمكن أن يظهر محدد المعرف مرة واحدة فقط. استخدم كلاً من الفئة والمعرف لتحديد تسمية في CSS. إذا تكررت التعريفات، فسيكون التعريف الذي تم إجراؤه بواسطة محدد المعرف صالحًا لأن وزن المعرف أكبر من وزن الفئة.
3. طريقة غبية لضبط التوافق (IE وMozilla):
قد يواجه المبتدئون مثل هذا الموقف: يتم عرض السمة التي تحمل نفس التصنيف بشكل طبيعي عند ضبطها على A في IE، ولكن يجب ضبطها على B في Mozilla لعرضها بشكل طبيعي، أو يتم عكس الاثنين.
الحل المؤقت: قد لا يعمل المحدد {اسم الخاصية: B !important; يمكنك البحث عن المزيد من حلول الأخطاء على 52CSS.com.
4. إذا كانت هناك حاجة إلى بعض التباعد بين مجموعة من العلامات المتداخلة، فاترك الأمر لسمة الهامش للعلامة الموجودة بالداخل بدلاً من تحديد حشوة العلامة الموجودة بالخارج.
5. يوصى باستخدام صورة الخلفية بدلاً من صورة نمط القائمة للأيقونة الموجودة أمام علامة li.
6. لا يستطيع IE التمييز بين علاقة الميراث وعلاقة الأب والابن، فكلها علاقات ميراث.
7. عند إضافة المحددات بشكل جنوني إلى علاماتك، لا تنس إضافة تعليقات إلى المحددات في CSS. ستعرف سبب قيامك بذلك عندما تقوم بتعديل CSS الخاص بك لاحقًا. أيضًا كلمة تحذير، لا تبالغ في الجنون.
8. إذا قمت بتعيين صورة خلفية داكنة وتأثير نص ساطع للتسمية. يوصى بتعيين لون خلفية أغمق لعلامتك التجارية في هذا الوقت. ونظرًا لفقد الصور، يظل النص قابلاً للقراءة.
9. عند تحديد الحالات الأربع للارتباط، انتبه إلى الترتيب: الرابط الذي تمت زيارته، تحويم نشطًا
10. يرجى استخدام الخلفية للصور التي ليس لها علاقة بالمحتوى. تذكر دائمًا فصل العرض التقديمي عن المحتوى.
11. يمكن اختصار اللون المحدد بـ #8899FF=#89F
12. لا تزال الجداول مفيدة في بعض الجوانب عندما تواجه جدول بيانات، فلا تكرهه.
13. <script> لا يحتوي على خاصية اللغة ويجب كتابته على النحو التالي: <script type="text/javascript">
14. جدول تفصيلي مثالي أحادي البكسل (يمكن اجتياز الاختبار في IE5 وIE6 وIE7 وFF1.0.4 أو أعلى)
الجدول { طي الحدود: طي } td{ الحدود: #000 صلب 1 بكسل } |
15. يمكن أن تلعب قيم الهامش السالبة دورًا في الموضع النسبي عندما تستخدم التسمية الموضع المطلق. عندما يتم عرض الصفحة في المنتصف، فإن سمة left:XXpx ليست مناسبة للطبقات التي تستخدم الموضع المطلق. إنها فكرة جيدة أن تضع هذه الطبقة بجوار الملصق الذي يجب وضعه بشكل نسبي، ثم تستخدم القيم السالبة للهامش.
16. عند استخدام الموضع المطلق، يمكن استخدام قيمة الهامش للموضع بالنسبة لموضعه الخاص، والذي يختلف عن موضع السمات مثل الأعلى واليسار بالنسبة لحافة النافذة. ميزة التموضع المطلق هي أنه يسمح للعناصر الأخرى بتجاهل وجودها.
17. إذا كان النص طويلًا جدًا، قم بتغيير الجزء الطويل إلى علامة حذف واعرضه: غير صالح في IE5 وFF، ولكن يمكن إخفاؤه، وصالح في IE6
| <DIV STYLE=”العرض:120px;الارتفاع:50px;الحدود:1px أزرق مصمت;التجاوز:مخفي;تجاوز النص:قطع الحذف”> <NOBR>على سبيل المثال، يوجد سطر من النص طويل جدًا بحيث لا يمكن عرضه في سطر واحد في الجدول.</NOBR> |
18. عندما تكون هناك مشاكل في تكرار النص بسبب التعليقات في IE، يمكنك تغيير التعليقات إلى:
<!–[if !IE]>ضع تعليقك هنا...<![endif]–> |
19. كيفية استدعاء الخطوط الخارجية باستخدام CSS
القواعد:
| @font-face{font-family:name;src:url(url);sRules} |
قيمة:
الاسم: اسم الخط. أي قيمة محتملة لسمة عائلة الخطوط url(url): حدد ملف خط OpenType باستخدام عنوان url المطلق أو النسبي sRules: تعريف ورقة الأنماط |
20. كيفية توسيط النص عموديًا في مربع النص في النموذج؟
إذا لم يكن لاستخدام ارتفاع الصف ومجموعات الارتفاع أي تأثير في FF، فإن الطريقة هي تحديد الحشو العلوي والسفلي لتحقيق التأثير المطلوب.
21. المشكلات الصغيرة التي يجب الانتباه إليها عند تحديد العلامة A:
عندما نحدد {color:red;}، فهو يمثل أنماط الحالات الأربع لـ A. إذا أردنا تحديد الحالة التي يتم وضع الماوس فيها، فما عليك سوى تحديد a:hover، أما الحالات الثلاث الأخرى فهي في A نمط محدد. عندما يتم تعريف رابط a: واحد فقط، تأكد من تذكر تعريف الحالات الثلاث الأخرى!
22. ليست كل الأنماط بحاجة إلى الاختصار:
عندما يتم تعريف p{padding:1px 2px 3px 4px} قبل ورقة الأنماط، تتم إضافة نمط آخر في المشروع اللاحق مع حشوة علوية تبلغ 5 بكسل وحشوة سفلية تبلغ 6 بكسل. ليس من الضروري أن نكتب p.style1{padding:5px 6px 3px 4px}. يمكن كتابتها بالشكل p.style1{padding-top:5px;padding-right:6px;}. قد تشعر أن كتابتها بهذه الطريقة ليست بجودة الكتابة الأصلية، لكن هل فكرت يومًا في كتابتك؟ تحدد الطريقة النمط بشكل متكرر، بالإضافة إلى ذلك، لا يتعين عليك معرفة قيم الحشو السفلية واليسرى الأصلية! إذا تغير النمط السابق P في المستقبل، فسيتغير أيضًا نمط p.style1 الذي حددته.
23. كلما زاد حجم موقع الويب، زاد عدد أنماط CSS. قبل البدء، يرجى إجراء الاستعدادات والخطط الكاملة، بما في ذلك قواعد التسمية. تقسيم كتلة الصفحة، وتصنيف النمط الداخلي، وما إلى ذلك.
24. اقتطاع الأحرف الصينية ذات العرض الثابت: تجاوز السعة: مخفي؛ تجاوز النص: مسافة بيضاء: nowrap (ومع ذلك، يمكنه التعامل مع اقتطاع النص في سطر واحد فقط، وليس أسطر متعددة.) (IE5 وما فوق) FF لا يمكن، بل يختبئ فقط.
إذا كان هناك الكثير من الأشياء التي لا تفهمها، فلا يهم. قم بتسجيل هذه المهارات وقم بزيارة موقع 52CSS.com للتحقق منها، وسوف تكتسب شيئًا بالتأكيد. يمكنك أيضًا إدخال المحتوى الذي يهمك في مربع البحث الموجود على اليسار للبحث. انكم مدعوون لترك التعليقات وإضافة نصائح CSS.