1. قواعد اختصار الخطوط cs s <br />عند استخدام css لتعريف الخطوط يمكنك القيام بذلك:
| حجم الخط: 1em؛ ارتفاع الخط: 1.5 م؛ وزن الخط: غامق؛ نمط الخط: مائل؛ متغير الخط: أحرف صغيرة؛ عائلة الخط: verdana،serif؛ |
في الواقع يمكنك اختصار هذه الخصائص:
| الخط: 1em/1.5em غامق ومائل وأحرف صغيرة verdana، serif؛ |
أصبح الأمر أفضل بكثير الآن، ولكن هناك شيء واحد يجب ملاحظته: لاستخدام هذه الطريقة المختصرة، يجب عليك تحديد حجم الخط وخصائص مجموعة الخطوط على الأقل إذا كانت الخصائص الأخرى (مثل وزن الخط، ونمط الخط، ونمط الخط. varient) لم يتم تحديدها، فسيتم استخدام القيمة الافتراضية تلقائيًا.
2. استخدم فئتين في نفس الوقت
عادة نحدد فئة واحدة فقط للسمة، ولكن هذا لا يعني أنه يمكنك تحديد فئة واحدة فقط. في الواقع، يمكنك تحديد العدد الذي تريده، على سبيل المثال:
| <div class="الأخبار الساخنة"> محتوى </div> |
باستخدام فئتين في نفس الوقت (الفصل بينهما بمسافات بدلا من الفواصل)، ستطبق هذه الفقرة القواعد المحددة في كلا الفئتين. إذا تداخلت أي من القواعد، فستكون الأولوية للأخيرة.
3. القيمة الافتراضية للحدود في CSS
عند كتابة قاعدة حدود، عادةً ما تحدد اللون والعرض والنمط (بأي ترتيب). على سبيل المثال: border: 3px Solid #000 (حدود سوداء صلبة بعرض 3 بكسل في الواقع، القيمة الوحيدة التي يجب تحديدها في هذا المثال هي النمط). إذا قمت بتحديد النمط كصلب، فسيتم استخدام القيم الافتراضية لبقية القيم: العرض الافتراضي هو متوسط (أي ما يعادل 3 إلى 4 بكسل)؛ اللون الافتراضي هو لون النص الموجود في الحدود . إذا كان هذا هو ما تريده بالضبط، فلا يتعين عليك تحديده في CSS.
4. سيتم تجاهل المهم بواسطة IE
في CSS، عادةً ما تكون للقاعدة الأخيرة المحددة الأسبقية. ومع ذلك، بالنسبة للمتصفحات الأخرى غير IE، فإن أي عبارة تحمل علامة !important سوف تحظى بالأولوية المطلقة، على سبيل المثال:
| الهامش العلوي: 3.5em! هام؛ الهامش العلوي: 2em |
الهامش العلوي هو 3.5em في جميع المتصفحات باستثناء IE، و2em في IE يكون هذا مفيدًا في بعض الأحيان، خاصة عند استخدام قيم الهامش النسبية (مثل هذا المثال)، لإظهار الفرق بين IE والمتصفحات الأخرى.
(يشير IE هنا إلى: IE6 وما دونه، باستثناء IE7. في الواقع، يدعم IE7 السمة المهمة، وينطبق الشيء نفسه على محددات CSS الفرعية)
5. مهارات استبدال الصور
غالبًا ما يكون من الحكمة استخدام لغة HTML القياسية بدلاً من الصور لعرض النص، بالإضافة إلى تسريع التنزيلات مما يؤدي إلى سهولة الاستخدام بشكل أفضل. ولكن إذا كنت مصممًا على استخدام خط قد لا يكون متاحًا على جهاز الزائر، فيمكنك فقط اختيار الصور.
على سبيل المثال، تريد استخدام العنوان "شراء عناصر واجهة المستخدم" في أعلى كل صفحة، ولكنك تريد أيضًا أن تكتشفه محركات البحث. إذا كنت تستخدم خطًا نادرًا للجماليات، فسيتعين عليك استخدام صورة لعرضها حصلت عليه:
هذا صحيح بالتأكيد، ولكن هناك أدلة على أن محركات البحث تقدر النص الحقيقي أكثر بكثير من النص البديل (لأن الكثير من مواقع الويب تستخدم النص البديل بالفعل ككلمات رئيسية)، لذلك يتعين علينا استخدام طريقة أخرى:
قم بشراء الأدوات، ولكن ماذا عن خطوطك الجميلة؟ يمكن أن يساعدك ملف CSS التالي:
| h1 { الخلفية: url(widget-image.gif) بدون تكرار؛ } فترة h1 { الموقف: مطلق؛ اليسار:-2000بكسل؛ } |
الآن لديك صورة جميلة وإخفاء جيد للنص الحقيقي - بمساعدة CSS، يتم وضع النص على بعد 2000 بكسل من الجانب الأيسر من الشاشة.
6. خيار آخر لاختراق نموذج css box، يُستخدم اختراق نموذج css box لحل مشكلات عرض المتصفح قبل IE6 . ستتضمن الإصدارات التي تسبق IE6.0 قيمة الحدود وقيمة الحشو لعنصر داخل العرض (بدلاً من إضافتها إلى). قيمة العرض). على سبيل المثال، يمكنك استخدام ملف css التالي لتحديد أبعاد الحاوية:
| #صندوق { العرض: 100 بكسل؛ الحدود: 5 بكسل؛ الحشو: 20 بكسل؛ } |
ثم قم بالتقديم بصيغة html:
يبلغ إجمالي عرض المربع 150 بكسل في جميع المتصفحات تقريبًا (عرض 100 بكسل + حدين 5 بكسل + حشوتين 20 بكسل)، باستثناء المتصفحات قبل IE6 لا يزال 100 بكسل (يتم تضمين قيمة الحد وقيمة الحشو في قيمة العرض)، تم تصميم اختراق نموذج الصندوق لحل هذه المشكلة، ولكنه سيسبب مشاكل أيضًا. الطريقة الأسهل هي كما يلي:
| المغلق: #صندوق { العرض: 150 بكسل؛ } #مربع شعبة { الحدود: 5 بكسل؛ الحشو: 20 بكسل؛ } أتش تي أم أل: ... |
سيؤدي هذا إلى أن يصل إجمالي عرض المربع إلى 150 بكسل في أي متصفح.
7. عناصر الكتلة المركزية
بافتراض أن موقع الويب الخاص بك يستخدم تخطيطًا ذو عرض ثابت ويتم وضع كل المحتوى في وسط الشاشة، يمكنك استخدام ملف css التالي:
| #محتوى { العرض: 700 بكسل؛ الهامش: 0 تلقائي؛ } |
يمكنك وضع أي عنصر داخل نص HTML، وسيحصل العنصر تلقائيًا على قيم متساوية للحدود اليسرى واليمنى لضمان العرض المركزي. لكن هذه لا تزال مشكلة في المتصفحات قبل IE6 ولن يتم توسيطها، لذا يجب تعديلها كما يلي:
| جسم { محاذاة النص: مركز؛ } #محتوى { محاذاة النص: يسار؛ العرض: 700 بكسل؛ الهامش: 0 تلقائي؛ } |
سيؤدي تعيين النص إلى توسيط المحتوى الرئيسي، ولكن حتى النص بأكمله سيتم توسيطه، وربما لا يكون هذا هو التأثير الذي تريده، ولهذا السبب، يجب أن يحدد div الخاص بالمحتوى أيضًا قيمة: text-align: left
8. استخدم CSS لتحقيق التوسيط العمودي
يعد التوسيط عموديًا أمرًا سهلاً بالنسبة للجداول، ما عليك سوى تحديد الخلية كمحاذاة رأسية: الوسط، ولكن هذا لا يعمل في تخطيط CSS. لنفترض أنك قمت بتعيين ارتفاع قائمة التنقل على 2em، ثم حددت قواعد المحاذاة الرأسية في CSS، فسيظل النص مرتبًا في أعلى المربع، ولا يوجد فرق على الإطلاق.
لحل هذه المشكلة، فقط قم بتعيين ارتفاع خط المربع ليكون نفس ارتفاع المربع في هذا المثال، ارتفاع المربع هو 2em، ثم تحتاج فقط إلى إضافة ارتفاع سطر آخر: 2em إلى ملف CSS. تم تحقيق التمركز العمودي!
9. تحديد المواقع CSS داخل الحاوية
إحدى أكبر مزايا CSS هي أنه يمكن وضع الكائنات في أي مكان في المستند، ويمكن أيضًا وضع الكائنات داخل الحاوية. ما عليك سوى إضافة قاعدة CSS إلى الحاوية:
| #حاوية { الموقف: نسبي؛ } |
ثم يتم وضع أي عنصر داخل الحاوية بالنسبة للحاوية. افترض أنك تستخدم بنية html التالية:
...
إذا كنت تريد وضع التنقل داخل الحاوية على بعد 30 بكسل من الحافة اليسرى و5 بكسل من الأعلى، فيمكنك استخدام عبارة CSS التالية:
| #ملاحة { الموقف: مطلق؛ اليسار: 30 بكسل؛ أعلى: 5 بكسل؛ } |
10. لون الخلفية يمتد إلى أسفل الشاشة
أحد عيوب CSS هو الافتقار إلى التحكم الرأسي، مما يسبب مشاكل لا يواجهها تخطيط الجدول. لنفترض أنك قمت بإعداد عمود على الجانب الأيسر من الصفحة لوضع التنقل في موقع الويب الخاص بك. تحتوي الصفحة على خلفية بيضاء، لكنك تريد أن يكون لعمود التنقل خلفية زرقاء فقط استخدم ملف CSS التالي:
| #ملاحة { الخلفية: أزرق؛ العرض: 150 بكسل؛ } |
المشكلة هي أن عنصر التنقل لا يمتد إلى أسفل الصفحة، ومن الطبيعي أن لون الخلفية لا يمتد إلى أسفل الصفحة أيضًا. لذا، يتم قطع الخلفية الزرقاء للعمود الأيسر في منتصف الصفحة، مما يؤدي إلى إضاعة تصميمك. ماذا علينا أن نفعل؟ لسوء الحظ، يمكننا فقط استخدام الخداع، أي تحديد خلفية الجسم كصورة بنفس لون وعرض العمود الأيسر كما يلي:
| جسم { الخلفية: url(blue-image.gif) 0 0 تكرار-y؛ } |
يجب أن تكون صورة الخلفية صورة زرقاء بعرض 150 بكسل. عيب هذه الطريقة هو أنه لا يمكن استخدام em لتحديد عرض العمود الأيسر. عندما يقوم المستخدم بتغيير حجم النص وتوسيع عرض المحتوى، لن يتغير عرض لون الخلفية وفقًا لذلك.
حتى كتابة هذه السطور، يعد هذا هو الحل الوحيد لهذا النوع من المشكلات، لذا يمكنك فقط استخدام قيم البكسل للعمود الأيسر للحصول على لون خلفية مختلف يمتد تلقائيًا.