إستمارات أنيقة!

الوان وتضاريس

خبر سار للمبتدئين في اوراق الانماط: من الممكن تغيير الوان حقول الاستمارات وازرارها [2].

على سبيل المثال، لتظهر الازرار مع خلفية زرقاء فاتحة، نضيف هذه القاعدة الى ورقة الانماط (نذكّر ان اسمها my_styles.css):

.spip_button {
    background-color: #b0d0FF;
    color: black;
}

تظهر الآن الازرار بالازرق الفاتح (من خلال خاصية background-color) ونص اسود. لاحظ ان .spip_button هو النمط الذي تستخدمه الازرار والحقول في استمارات SPIP.

لنقم الآن بتغيير مظهر اطراف الازرار لأن شكل اطراف ازرار HTML صار قديماً. يمكن ان نقرر تسطيح الاطراف وتسميكها لتبرز اكثر، هكذا:

.spip_button {
    background-color: #b0d0FF;
    color: black;
    border: 2px solid #000060;
}

ترسم خاصية border الظاهرة هنا، طرف عرضه نقطتين وبشكل مسطح (اي «solid» بلغة اوراق الانماط) وبلون ازرق داكن حول الازرار. يمكن ايضاً تغيير بنط الخط في الزر (باستخدام خاصيتي font-size وfont-family كما رأينا في المراحل السابقة من هذا الدرس).

قليل من المساحة

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

.forms {
    background-color: #e8f4ff;
    font-family: "Arabic transparent", Geezah;
    font-size: 90%;
    font-weight: normal;
    border: 1px solid black;
    padding: 10px;}

نغير هنا عرض النمط .forms الاساسي الذي سينطبق على كل الاستمارات الناتجة عن SPIP. اما ميزة تغيير هذا النمط، فتكمن في امكان التحكم بعرض كل الاستمارات. نطبق هنا لون خلفية فاتح ونوع خط. ولكن المهم اننا نغيّر المسافات الداخلية في كل استمارة على حدى. ويحصل ذلك من خلال خاصية padding التي تُدخل عنصر «التهوئة» هذا. لاحظ ان هذه «التهوئة» تحصل بالتحديد داخل الاطار المحدد بخاصية border: فتعتبر الاستمارة هنا كتلة مستطيلة مستقلة.

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