ملخص للمشاكل الشائعة ومهارات CSS العملية

1. الاستفادة من اختصار CSS يمكن أن يقلل من حجم ملف الصفحة ، وزيادة سرعة التنزيل ، وقراءة الرمز ببساطة.
يحب:

ديف {
أعلى الحدود: 1px الصلبة #CCCCCCC ؛
الحدود اليسرى: 1px الصلبة #CCCCCCC ؛
الحدود اليمين: 1px soli #ccccccc ؛
Border-Bottom: 1PX Solid #CCCCCCC ؛
}

يمكن كتابتها باسم

p {الحدود: 1px Solid #CCCCCCC}

مثال آخر:

ديف {
الهامش: 10 بكسل ؛
يمين الهامش: 20 بكسل ؛
هامش القاع: 30 بكسل ؛
الهامش: 40 بكسل ؛
}

يمكن إعادة كتابتها على النحو التالي:

/*انتبه إلى ترتيب الكتابة ، اليمين ، أسفل ، واليسر*///
Div {Margin: 10px 20px 30px 40px}
/*لاحظ أن القيمة والوحدة لا يمكن أن تحتوي على مساحة ، ويتم فصل المساحة بمساحة بين كل قيمة*/

(للحصول على تفاصيل ، يرجى الرجوع إلى: CSS2 مرجع دليل ، ملخص اختصار CSS شائع الاستخدام)

2. يمكنه تعيين قواعد متعددة لسمة الفئة لعنصر HTML في نفس الوقت (تعريف فئة متعددة).
عادة ما نكتب:

في الواقع ، يمكننا تحديد قواعد متعددة لعنصر P ، مثل:

CSS:
.A {...}
.b {...}
HTML:

يتضمن هذا العنصر أيضًا أنماطًا محددة في A و B.

ملاحظة: منفصل مع المسافات بين قواعد متعددة.

3. توضيح الوحدة ، ما لم تكن القيمة 0
نسيت تحديد الحجم مشكلة شائعة في المبتدئين CSS. يمكننا كتابة العرض = "100" في HTML ، ولكن يجب إعطاء وحدة دقيقة في CSS. مثل: عرض 100 بكسل ؛ حجم القيمة 0 متساوية.

ملاحظة: لا تضيف شبكة فارغة بين الوحدات العددية والوحدات.

4. يتم تمييز المخطوطات المتمايزة في XHTML.
مثل #AAA ، الذي يختلف عن #AAA.
إذا تم تعريف #AAA في CSS ، فإن استخدام AAA في عناصر HTML لتطبيقه لن يتمكن من الحصول على الأسلوب المحدد في #AAA.
رمز المثال:

CSS:
#AAA {الحدود: 1PX Solid #CCC}
HTML:

لا يمكن إظهار خط حافة بكسل 1

5. مبادئ الأولوية الأخيرة لـ CSS إذا حددت أنماطًا متعددة على عنصر ما ، فسيتم تحديد أحدث نمط المستوى الأول من خلال الأنماط الأخرى.
يحب:

CSS:
P {Color: Red}
.blue {color: Blue}
.yllow {color: Yellow}
HTML:

هذا يظهر الأحمر هنا

هذا يظهر الأزرق هنا

يظهر اللون الأخضر هنا

هنا أصفر

يلاحظ:
(1) انتبه إلى عدة تسلسلات ذات أولوية للأنماط (تنخفض الأولوية من أعلى إلى أسفل):
-إعدادات نمط نيل
-إعدادات المنطقة
-في ملفات CSS المرجعية الخارجية (2) لا يتم تعيين الأولوية بترتيب الوصول ، ولكن تم تعيين ترتيب الطلب في CSS.
كما هو موضح في المثال أعلاه ، يظهر الأصفر

يتم عرضه أيضًا على أنه أصفر لأن. yllow خلف .blue.

6. تعريفات استخدام المتلقيين الفرعيين لتقليل الهوية والفئة ، على سبيل المثال:

#يحتوي {..}
#contain_ul {...}
.contail_li {...}

يمكن تغييرها إلى:

#يحتوي {..}
#contain ul {...}
.Contain ul li {...}

7. لا تضيف مسار صورة الخلفية لتغيير الخلفية: url ("xxx.gif") إلى الخلفية: url (xxx.gif)
لأن إضافة اقتباسات لبعض المتصفحات يمكن أن تسبب أخطاء.

8. مسار صورة الخلفية نسبة إلى صفحة CSS الحالية.

على سبيل المثال:
هذا هو هيكل الدليل التالي
-xxx.gif
-CSS
-xx.css
--ddex.html
محتوى الكود
index.html يشير إلى ملف XX.CSS.
XX.CSS يريد اقتباس صور xxx.gif.

9. استخدام عناصر مختلفة لتطبيق نفس النمط مثل H1 ، H2 ، H3 ، Div {font-size: 16px ؛
ثم عناصر H1 ، H2 ، H3 ، Div كلها 16 بكسل ، خطوط سميكة

10. اكتب نمط الرابط الصحيح.
إذا لم تكتب بهذا الترتيب ، فقد لا تتمكن من تحقيق تأثير أملك. من أجل تذكر هذا الترتيب ، نستخرج الحروف الأولى من كل كلمة: LVHA ، يمكنك أن تتذكر الترتيب عن طريق حب الذاكرة ، البطل ، كلمتين.

11. تغيير المحتوى المحظور وتغييرات المحتوى الإلزامي في الجداول أو الطبقات ، قد نأمل ألا يتم تغيير المحتوى أو إجباره على تغيير الخط.
ممنوع من التغيير: الفضاء الأبيض: Nowrap
التغيير الإلزامي: Word-Wrap: Word-Word ؛

12. الفرق
المطلقة ، الكتابة في CSS: المطلق ؛ نقطة العطاءات -المستويات الوالدين كنقطة أصلية. إذا تم تعيين TRBL ولم يتم تعيين مستوى الأصل على سمة الموضع ، فسيتم وضع المطلق الحالي مع النقطة الأصلية في الركن الأيسر العلوي من المتصفح ، وسيتم تحديد الموضع بواسطة TRBL.

النسبية في CSS: الموقف: وهو يعني أن النقطة الأصلية للمستوى الأصلي. مثل الحشو في المستوى الأصل ، يقع المستوى الحالي للمستوى الحالي مع الإشارة إلى النقطة الأصلية لمنطقة المحتوى الأصل.

13. Div التفاضلي
Div عبارة عن عنصر مستويات يمكن أن يحتوي على فقرات وجداول ومحتوى آخر لوضع محتوى مختلف. بشكل عام ، نضع كل كتلة على صفحة الويب لوضع كل كتلة في صفحة الويب.
SPAN هو العنصر الداخلي المرتبط به ، دون أهمية عملية.

14. العرض التفاضلي والوضوح
العرض: لا شيء والرؤية: يمكن أن يخفي Hidden عنصرًا ولكن الرؤية: يخفي المخفي محتوى العنصر ، لكن مساحة الموقع المستخدمة لا تزال محتفظ بها.
العرض: لم تتم إزالة أي منها تمامًا من الصفحة ، وسيتم حذف موقع المهنة أيضًا.