أنواع الستايل وأماكنه .. تنسيق الصفحة بالستايل

عندما نريد إنشاء صفحة HTML فإننا نرسم أو نتخيل رسماً معمارياً layout لهذه الصفحة .. ثم نقوم بتنفيذ أفكارنا على الورق من خلال عمل تنسيق للصفحة .


نحن نملك ثلاث وسائل أساسية لتنسيق الصفحه :

1- الستايل بأنواعه الثلاثة .. وهو حديثنا الحالي .

2- الإيعازات attributes داخل التاجز .. وفائدتها إعطاء قيمة لكل عنصر .

3- الجافا سكريبت في بعض الأحيان .

الستايل styles :

لكي نفهم أهمية الستايل نتخيل صفحة بدون ستايل بتاتاً .. كيف سوف تبدو ؟.. سوف يتصرف برنامج تصفح الإنترنت على سجيته default التي برمجه عليها العبقري الذي أنشأه .

سوف يرص المتصفح - الفايرفوكس مثلاً - عناصر الصفحة واحداً وراء الآخر .. وسوف يبدأ من الركن الشمال العلوي للصفحة ويتجه يميناً ثم من أعلى لأسفل .. وسوف يكتب الحروف كلها بحجم صغير ولون وهيئة واحدة .. ويضع لك الجداول حيثما يحل عليها الدور .

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

أنواع الستايل :

1- Linked Style Sheets أو Cascading Style Sheets (CSS) ملفات الستايل الخارجية

2- Embedded (internal) Style Sheets الستايل الداخلي

3- in-line style sheets الستايل بداخل التاجز

1- Cascading Style Sheets (CSS): هذا النوع عبارة عن ملف مستقل بذاته .. وتتم كتابته على برنامج نوت باد .. ولكن عند التسييف نعطيه الإمتداد .CSS.

ونحتاج إليه في المواقع التي بها صفحات عديدة ذات نسق layout واحد .. ففي هذه الحالة نضع ملف (CSS) واحد في الموقع ثم نربط جميع الصفحات به .

ويتم الربط بأن نكتب تاج رابط في جزء الهيد الخاص بكل صفحة .. بهذا الشكل
2- Embedded Style Sheets : هذا الستايل يكون موجوداً داخل صفحة الـ HTML نفسها وغالباً في جزء الهيد .

ويتم وضعه داخل تاج حاوي container tag هكذا