1. قواعد اختصار سمة الخط CSS
بشكل عام، يتم استخدام CSS لتعيين سمات الخط:
وزن الخط: غامق؛
نمط الخط: مائل؛
متغير الخط: أحرف صغيرة؛
حجم الخط: 1em؛
ارتفاع الخط: 1.5 م؛
عائلة الخط: verdana، sans-serif؛
يمكنك كتابتها كلها في سطر واحد:
الخط: أحرف استهلالية صغيرة مائلة غامقة 1em/1.5em verdana,sans-serif;
ألا يبدو هذا أبسط بكثير؟ هناك شيء واحد فقط يجب ملاحظته: تعمل طريقة الاختصار هذه فقط عند تحديد خصائص حجم الخط ومجموعة الخطوط في نفس الوقت. وأيضًا، إذا لم تقم بتعيين وزن الخط ونمط الخط ومتغير الخط، فسوف يستخدمون القيم الافتراضية، لذا ضع ذلك في الاعتبار.
2. القيمة الافتراضية لحدود CSS
يمكنك عادةً ضبط لون الحدود وعرضها ونمطها، مثل:
الحدود: 3px الصلبة #000؛
وهذا يجعل الحدود تظهر بعرض 3 بكسل، وأسود، وصلب. ولكن في الواقع، ما عليك سوى تحديد النمط هنا.
إذا تم تحديد النمط فقط، فسيتم استخدام القيم الافتراضية للخصائص الأخرى. بشكل عام، يكون العرض الافتراضي للحدود متوسطًا، ويساوي بشكل عام 3 إلى 4 بكسل؛ واللون الافتراضي هو لون النص. إذا كانت هذه القيمة صحيحة تمامًا، فليست هناك حاجة لتعيين العديد من الإعدادات.
3. استخدم فئتين للعناصر في نفس الوقت
بشكل عام، يتم تعيين عنصر واحد لفئة واحدة (الفئة)، ولكن هذا لا يعني أنه لا يمكن استخدام عنصرين. في الواقع، يمكنك القيام بذلك:
<p class="text Side">…</p>
قم بإعطاء العنصر P فئتين في نفس الوقت، مفصولتين بمسافات، بحيث تتم إضافة جميع سمات النص والفئات الجانبية إلى العنصر P. إذا كان هناك تعارض بين السمات في الفئتين، فسيتم تفعيل المجموعة التي تم تعيينها لاحقًا، أي أن سمات الفئة الموضوعة لاحقًا في ملف CSS ستسري مفعولها.
ملحق: بالنسبة للمعرف، لا يمكنك كتابة <p id="text Side">…</p> ولا يمكنك كتابته بهذه الطريقة
4. CSS لطباعة المستندات
تحتوي العديد من مواقع الويب على إصدار خاص بالطباعة، ولكن هذا ليس ضروريًا حقًا لأنه يمكن تصميم الطباعة باستخدام CSS.
بمعنى آخر، يمكنك تحديد ملفين CSS للصفحة، أحدهما لعرض الشاشة والآخر للطباعة:
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
السطر 1 مخصص للعرض، والسطر 2 مخصص للطباعة، وانتبه إلى سمة الوسائط.
ولكن ما الذي يجب كتابته في طباعة CSS؟ يمكنك إعداده بنفس الطريقة التي تصمم بها CSS العادي. أثناء التصميم، يمكنك ضبط CSS هذا لعرض CSS للتحقق من تأثيره. ربما ستستخدم أمر العرض: none لإيقاف تشغيل بعض الصور المزخرفة، أو إيقاف تشغيل بعض أزرار التنقل، وما إلى ذلك.
5. مهارات استبدال صور CSS
يوصى عمومًا باستخدام HTML القياسي لعرض النص بدلاً من الصور، وهو ليس أسرع فحسب، بل أكثر قابلية للقراءة أيضًا. ولكن إذا كنت تريد استخدام بعض الخطوط الخاصة، فيمكنك استخدام الصور فقط.
على سبيل المثال، إذا كنت تريد إنشاء أيقونة لبيع الأشياء، يمكنك استخدام هذه الصورة:
<h1><img src=”widget-image.gif” alt=”شراء الأدوات” /></h1>
بالطبع هذا ممكن، ولكن بالنسبة لمحركات البحث، مقارنة بالنص العادي، فإنهم لا يهتمون كثيرًا بالنص البديل في النص البديل، وذلك لأن العديد من المصممين يضعون العديد من الكلمات الرئيسية هنا لخداع محركات البحث. لذلك يجب أن تكون الطريقة هكذا:
<h1>شراء الأدوات</h1>
ولكن بعد ذلك لا توجد خطوط خاصة. لتحقيق نفس التأثير، يمكنك تصميم CSS مثل هذا:
h1 { الخلفية: url(widget-image.gif) ارتفاع بدون تكرار: ارتفاع الصورة مسافة بادئة للنص: -2000 بكسل }
انتبه إلى استبدال ارتفاع الصورة بارتفاع الصورة الحقيقية. هنا، سيتم عرض الصورة كخلفية، ولأن المسافة البادئة -2000 بكسل مضبوطة، فإن النص الحقيقي سيظهر 2000 نقطة على الجانب الأيسر من الشاشة وسيكون غير مرئي. لكن بالنسبة للأشخاص الذين يقومون بإيقاف تشغيل الصورة، فقد لا يتمكنون من رؤيتها على الإطلاق، لذا كن حذرًا.
6. تقنية أخرى لنموذج مربع CSS
تعديل نموذج Box هذا مخصص بشكل أساسي لمتصفحات IE قبل IE6، والتي تحسب عرض الحدود والمسافات البيضاء في عرض العنصر. على سبيل المثال:
#box { العرض: 100 بكسل الحد: 5 بكسل؛
نسميها مثل هذا:
<div id="box">…</div>
يجب أن يكون العرض الكامل للمربع الآن 150 نقطة، وهو صحيح على كافة المتصفحات باستثناء IE قبل IE6. ولكن في متصفحات مثل IE5، لا يزال عرضه الكامل 100 نقطة. يمكن معالجة هذا الاختلاف باستخدام طريقة ضبط الصندوق التي اخترعها الأشخاص السابقون.
ولكن يمكن تحقيق نفس الغرض باستخدام CSS لجعلها معروضة بشكل متسق.
#مربع { العرض: 150 بكسل }
#box div {الحدود: 5 بكسل الحشو: 20 بكسل}
دعا مثل هذا:
<div id="box"><div>…</div></div>
بهذه الطريقة، بغض النظر عن المتصفح، يكون العرض 150 نقطة.
7. يقوم CSS بتعيين عناصر الكتلة ليتم محاذاتها أفقيًا في المركز
إذا كنت تريد إنشاء صفحة ويب ذات عرض ثابت وتريد أن يتم توسيط صفحة الويب أفقيًا، فعادةً ما تبدو كما يلي:
#المحتوى { العرض: 700 بكسل الهامش: 0 تلقائي }
يمكنك استخدام <div id="content"> لإحاطة جميع العناصر. يعد هذا أمرًا بسيطًا، ولكنه ليس جيدًا بدرجة كافية، ولن تعرض الإصدارات السابقة لـ IE6 هذا التأثير. قم بتغيير CSS كما يلي:
الجسم { محاذاة النص: المركز } #content { محاذاة النص: العرض الأيسر: 700 بكسل الهامش: 0 تلقائي }
سيؤدي هذا إلى توسيط محتوى صفحة الويب، لذلك تتم إضافة text-align: left إلى المحتوى.
8. استخدم CSS للتعامل مع المحاذاة الرأسية
يمكن تحقيق المحاذاة الرأسية بسهولة باستخدام الجداول، ما عليك سوى ضبط وحدة الطاولة على المحاذاة الرأسية: المنتصف. ولكن هذا لا طائل منه مع CSS. إذا كنت تريد تعيين ارتفاع شريط التنقل بمقدار 2 مترًا وتريد أن يتم توسيط نص التنقل عموديًا، فإن تعيين هذه السمة غير مجدي.
ما هي طريقة CSS؟ بالمناسبة، اضبط ارتفاع سطر هذه الكلمات على 2em: line-height: 2em، وهذا كل شيء.
9. تحديد موضع CSS داخل الحاوية
إحدى فوائد CSS هي أنه يمكنك وضع عنصر بشكل تعسفي، حتى داخل الحاوية. على سبيل المثال، لهذه الحاوية:
#container {الموضع: نسبي}
بهذه الطريقة، سيتم وضع جميع العناصر الموجودة في الحاوية نسبيًا، ويمكن استخدامها على النحو التالي:
<div id="container"><div id="navigation">…</div></div>
إذا كنت تريد تحديد موقع 30 نقطة من اليسار و5 نقاط من الأعلى، فيمكنك القيام بذلك:
# التنقل { الموضع: اليسار المطلق: 30 بكسل؛ الأعلى: 5 بكسل }
بالطبع، يمكنك أيضًا القيام بذلك:
الهامش: 5 بكسل 0 0 30 بكسل
لاحظ أن ترتيب الأرقام الأربعة هو: أعلى، يمين، أسفل، يسار. بالطبع، في بعض الأحيان يكون تحديد المواقع بدلاً من الهوامش أفضل.
لمزيد من تخطيطات وتقنيات CSS، يرجى الرجوع إلى العدد الكبير من البرامج التعليمية على موقع 52CSS.com.
10. لون الخلفية مباشرة إلى أسفل الشاشة
التحكم في الاتجاه العمودي يتجاوز قدرات CSS. إذا كنت تريد أن ينتقل شريط التنقل مباشرة إلى أسفل الصفحة مثل شريط المحتوى، فإن استخدام الجدول يعد أمرًا مريحًا للغاية، ولكن إذا كنت تستخدم CSS فقط على النحو التالي:
#الملاحة { الخلفية: العرض الأزرق: 150 بكسل }
لا يصل شريط التنقل الأقصر إلى الأسفل، بل ينتهي في منتصف المحتوى. ما يجب القيام به؟
لسوء الحظ، الطريقة الوحيدة للغش هي إضافة صورة خلفية إلى العمود الأقصر، بنفس عرض عرض العمود، وجعلها بنفس لون لون الخلفية المحدد.
الجسم { الخلفية: url(blue-image.gif) 0 0 تكرار-y }
لا يمكنك استخدام em كوحدة في هذا الوقت، لأنه سيتم الكشف عن الخدعة بمجرد قيام القارئ بتغيير حجم الخط، ويمكنك فقط استخدام px.