صفحات الأنماط المتعاقبة

 

الدرس الخامس

 

 

من ضمن الأشياء التي تمكنك صفحات الأنماط المتعاقبة من فعلها بينما لا تستطيع ذلك الهتمل ، التحكم في المسافات بين الكلمات و المسافات بين الحروف المتفرقة .

الخاصية word-spacing :

تمكنك هذه الخاصية من إضافة مسافات إضافية بين الكلمات :

H3 { words-pacing: 10px }

المسافة التي سوف تحددها سوف تضاف إلى المسافة الافتراضية التي يفصل بها المتصفح بين الكلمات أثناء عرضها . و يمكنك أن تستخدم الوحدات التالية لتحديد المسافة :

للأسف فإن هذه الخاصية لا يدعمها سوى المتصفح IE 4 للماكنتوش !! ، و لكن من حسن الحظ أن هناك خاصية اخرى يدعمها المتصفحان IE 4 , 5 للويندوز :

الخاصية letter-spacing :

هذه الخاصية تتحكم في المسافات بين الحروف المتفرقة :

H3 { letter-spacing: 10px }

المسافات التي تضيفها هذه الخاصية تضاف على المسافات الأصلية التي يضعها المتصفح بين الحروف المتفرقة تلقائياً و يمكنك في تحديدها استخدام الوحدات السابقة بأعلى و النتيجة :

This is a letter-spacing example

و لكلا الخاصيتين السابقتين يمكنك استخدام القيمة normal التي تتأكد من أن المسافات المستخدمة بين الكلمات أو الحروف المتفرقة هي المسافات الافتراضية التي يستخدمها المتصفح ، و أن النص لم يرث مسافات إضافية من عنصر أب .

 

الخاصية line-height :

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

B { line-height: 16pt }

هناك ثلاث طرق مختلفة لتحديد قيمة هذه الخاصية :

1- بالأرقام :

B { font-size: 12pt; line-height: 2 }

عندما تحدد قيمة هذه الخاصية بالأرقام فإن المتصفح يضاعف حجم الخط font-size بالرقم الذي ذكرته كقيمة للخاصية line-height أي أن في مثالنا ستكون المسافة بين السطور 24 نقطة pt لأن حجم الخط 12 نقطة ، و النتيجة :

Four score and seven years ago, the web wasn't yet a glimmer in anyone's eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?

يمكنك أيضاً استخدام أعداد كسرية مثل 2.3 كقيمة لهذه الخاصية . و يجب أن تعرف أن المتصفح IE3 لا يدعم تحديد القيمة بالأرقام و قد تتسبب في تداخل النص إذا استخدمتها معه .

2- بوحدات القياس :

B { font-size: 12pt; line-height: 11pt }

الطريقة الثانية لتحديد قيمة الخاصية line-height هي باستخدام وحدات القياس التي شرحناها من قبل و النتيجة :

Four score and seven years ago, the web wasn't yet a glimmer in anyone's eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?

3- بالنسبة المئوية :

B { font-size: 10pt; line-height: 140% }

الطريقة الأخيرة لتحديد قيمة هذه الخاصية هي بالنسبة المئوية قياساً إلى حجم الخط font-size ، فإذا كان حجم الخط في المثال 10 نقطة فإن نسبة 140 % منه تساوي 14 نقطة تكون هي قيمة المسافة بين سطور النص .

النص المتداخل :

B { font-size: 28pt; line-height: 2pt }

قد تكون تسائلت عم سيحدث إذا كانت المسافة التي حددتها بين السطور صغيرة للغاية ، ما سيحدث هو أن النص سيتداخل مع بعضه البعض مثل هذا النص البسيط This is an overlapping text :

This is an ovrlapping text

 

 

الخاصية text-align :

بهذه الخاصية تستطيع التحكم في المحاذاة الأفقية لأي فقرة :

H4 { text-align: center }

و هذه الخاصية تعمل فقط مع الفقرات التي تنشيء فقرة جديدة بنفسها مثل :

<P>, <H1> - <H6>, <BLOCKQUOTE>, <UL>

و إليك الاختيارات المتاحة أمامك :

- القيمة left تجعل الفقرة تحاذي اليسار .

- القيمة right تجعل الفقرة تحاذي اليمين .

- القيمة center تجعل الفقرة متوسطة .

- القيمة justify تجعل الفقرة في سطر واحد و لا ينقسم السطر حتى لو بلغ الهامش و تعداه .

لاحظ أن القيمة justify لا يدعمها المتصفحان IE 3 و IE 4 على الماكنتوش ، و أما على الويندوز فكلاً من نتسكيب كوميونيكيتور و إنترنت إكسبلورر 4 و 5 يدعمانها .

حتى الآن كنا نتكلم عن تطبيق الأنماط على النصوص ، لكن العديد من الخصائص يمكن تطبيقها على العناصر المستبدلة (العناصر المستبدلة هي كائنات يتم استبدالها بمحتويات أخرى ، و أكثرها شيوعاً هي الصور ، و لكن يدخل ضمنها أيضاً بريمجات الجافا و أفلام الكويك تايم .) و لذلك يمكننا أيضاً أن نحاذي صورة ما إلى اليسار كهذه الصورة :

أحياناً لا يرحب المتصفح كوميونيكيتور بتطبيق خصائص صفحات الأنماط مباشرة على الواصفة <IMG> ، و للتحايل على هذا يمكنك أن تحيط الواصفة <IMG> بإحدى الواصفتين <SPAN> أو <DIV> ثم تطبق خاصية صفحة الأنماط على إحداهما بدلاً من تطبيقها على الواصفة <IMG> ، و من الأفضل أن تستعمل الواصفة <DIV> لأن المتصفح IE للويندوز في بعض الأحيان يعاني من مشاكل في تطبيق الأنماط مع الواصفة <SPAN> .

 

 

الخاصية vertical-align :

في البداية أحب أن أوضح أن دعم المتصفحات لهذه الخاصية يساوي صفر تقريباً ، و لكني سأبين مبادئها على أمل أن تدعمها المتصفحات فيما بعد .

H4 { vertical-align: top }

هذه الخاصية تمكنك من التحكم في الوضع العمودي لنص ما أو عنصر مستبدل (مثل الصور) قياساً على عنصر أب . على سبيل المثال إذا جعلت الوضع العمودي لصورة ما يساوي top كالقاعدة السابقة ، و كان عنصر الأب لها هو نص الواصفة <H1> فإن الصورة سوف يتم عرضها أعلى هذا النص . و إليك كل القيم المحتملة لهذه الخاصية :

الدعم الحالي الوحيد لهذه الخاصية يأتي من المتصفحان IE 4 و IE 5 اللذان يدعمان القيمتان الأخيرتان فقط .

 

 

الخاصية text-indent :

هل تريد أن تترك مسافة فارغة في أول الفقرة ؟ استخدم هذه الخاصية . (قد تكون نسيت معنى ترك مسافة فارغة في أول الفقرة بعد أن عشت على الإنترنت لفترة كبيرة ) .

P { text-indent: 50pt }

يمكنك هنا أن تشاهد القاعدة السابقة مطبقة . هذه الخاصية تعمل فقط مع العناصر التي تنشيء فقرة جديدة بنفسها - كما وضحنا من قبل - و يمكنك تحديد قيمة هذه الخاصية باستخدام أي من وحدات القياس التي بيناها من قبل .

كذلك تستطيع أن تحدد القيمة باستخدام النسبة المئوية . على سبيل المثال هذه الفقرة المسافة الفارغة في بدايتها تساوي 40 % ، و هذا يعني أن السطر الأول بدأ من مسافة 40 % من المكان الذي كان من المفترض أن يبدأ منه . (المتصفح IE 4 للويندوز يفترض أن النسبة تشير إلى شاشة المتصفح بالكامل و ليس إلى عرض الفقرة فقط) .

و أخيراً ، إذا حددت المساحة الفارغة بقيمة سلبية أي بالسالب فسوف تحصل على ما يسمى بالمسافة المعلقة ، و فيها يبدأ السطر الأول قبل المكان الذي كان من المفترض أن يبدأ منه . هذه الفقرة أخذت القيمة 10- بكسل . و لكن احذر ، فالمتصفحان IE 4 و IE 5 مزعجين بعض الشيء بالنسبة للقيمة السلبية و قد لا يعرضان الحروف القليلة الأولى .

 

 

 

الدرس التالي