مقدمة وتعريف اللغة
لغة CSS هي اختصار للإسم Cascading Style Sheets وعلي عكس المعني الدارج في معظم المواقع العربية وهو لغة صفحات الانماط الانسيابية فإنني اعتبر التسمية الصحيحة لها هي لغة الانماط المتتالية واعتقد انه لمجرد ذكر هذا الاسم ولماذا هو صحيح سيأتي الكلام عنه فيما بعد إن شاء الله في هذه الدورة الموسعة والتي يمكن ان أقول عنها أنها ستكون الاولي من نوعها علي مستوي الويب العربي، واتمني أن يستفيد منها كل عربي إن شاء الله.
باختصار لغة صفحات الانماط المتتالية تعطي للمصمم قدرة إبداعية أكبر علي التحكم في تصميم وتنسيق واجهة الموقع وتصميمها علي احسن شكل يكون. كل مصمم علي حسب فهمه وقدرته علي الابداع. فهي تستخدم في تنسيق النصوص في صفحات الموقع مثلا بتصميم العناوين بطريقة تجذب النظر وتلفت النظر له وكذلك بحواف الاقسام ويمكنها ايضا ان تقوم بترتيب ظهور الصور او إنشاء عمود جانبي في الصفحة او بانر دعائي في أعلي او أسف الصفحة او او تغيير الوان الروابط في الصفحة بطريقة ديناميكة عند مرورك عليها بالماوس مثلا. وكل ما يمكنة القيام بذلك يجب ان يكون معقد هل هذا صحيح؟ علي العكس تماما فالغرض من ال CSS هي تبسيط أو تسهيل لعملية تنسيق صفحات الويب.
كبف تعمل لغة CSS؟
لو كنت قد استخدمت بعض برامج الكتابة مثل برنامج Microsoft Word فسوف تعتبر انك قد تعودت فعلا علي لغة ال CSS فال النمط الواحد او Style هو ببساطة قاعدة تصف الطريقة أو الكيفية التي يتم بها تنسيق جزء معين في صفحة الويب الخاص بك. و Style Sheet أو صفحة الانماط هي صفحة بها عدد من هذه القواعد او الانماط.
لغة ال CSS لغة تعمل جنبا إلي جنب مع لغة HTML ولكنها تختلف عنها تماما . ففي حين تقوم لغة HTML بتزويد صفحات الويب بالبنية الاساسية للمعلومات من خلال الفقرات و العناوين والقوائم إلخ، CSS تعمل معها يدا بيد كذلك مع المتصفح حتي تجعل المظهر العام للصفحة يبدوا جيدا.
علي سبيل المثال: قد تستخدم ال HTML لكي تحول مثلا عبارة الي اكبر مستوي من العناوين مشيرا بذلك إلي ان هذا العنوان يقدم محتوي باقي الصفحة. ومع ذلك فإنك سوف تستخدم لغة CSS لكي تنسق هذا العنوان الرئيسي علي سبيل المثال سوف تجعل الخط مثلا عريض واكبر في الحجم وكذلك نوع معين من الخطوط وكذلك تعطي له مكانا يبعد مثلا 50 بكسل من الجانب الايسر من يسار نافذة المتصفح. لذلك فلغة CSS تعتبر هي كل ما يتعلق بتغيير وتحسين مظهر صفحة ال HTML.
ويمكنك أيضا عمل ملف ستايل CSS خاص فقط بطريقة ظهور الصور علي صفحات موقعك. مثلا يختص هذا الملف بتحديد محاذاة الصور سواء علي الجانب الايمن من الصفحة او ان تحاط كل الصور بحدود ملونة وان تضع مثلا مسافة 50 بكسل كهامش او مسافة بين كل صورة واخري او كل صورة والنص المحيط بها.
بمجرد ان تنشي الاستايل بإستطاعتك ان تقوم بتطبيقه علي كل النصوص والصور والعناوين او علي كل العناصر الاخري في الصفحة. علي سبيل المثال يمكن ان تختار فقرة معينة وتنسقها بتطبيق تنسيق معين بتغيير حجم الخط ونوعه وكلك لونه. ويمكنك ايضا من ان تنشيء استايلات من اجل وسوم معينة بذاتها في ال HTML علي سبيل المثال وسم العنوان <h1> في موقعك سوف يظهر بنفس التنسيق في اي مكان يظهر علي صفحات موقعك او صفحتك.
فوائد لغة ال CSS:
قبل ظهور لغة CSS مصممين مواقع الانترنت كانوا محدودين القدرة في تصميم واجهة الصفحات وخيارات التنسيق في لغة ال HTML فإذا كنت ممكن عاصروا الانترنت خصوصا في عام 1995 كنت ستدرك تماما كيف ان مصممين الانترنت كانوا محدودين القدرات والامكانيات. بالتأكيد لغة HTML تقدم خيارات التنسيق الاساسية للنصوص والصور والجداول وغيرها من عناصر صفحات الويب وايضا مع الصبر والتدقيق يستطيع اصحاب المواقع جعل صفحات الموقع تبدو جيدة باستخدام HTML فقط ولكن النتيجة غالبا ما سوف تكون صفحات ويب بطيئة في تحميلها من خلال المتصفح علي كمبيوتر زائر الموقع. لكن لغة CSS علي العكس تماما تتميز بما يلي:
• فصفحات الانماط تقدم خيارت تنسيق اكثر بكثير من لغة ال HTML مع CSS باستطاعتك تنسيق الفقرات كما تراها مثلا في إحدي المجلات او الصحف (فمثلا إنشاء بادئة السطر الاول Line Indented وان توجد مسافات تتحكم في مقدارها بين كل فقرة واخري) وان تتحكم ايضا في المسافات بين الاسطر في الفقرة الواحدة.
• عند استخدام لغة ال CSS يمكنك إضافة صورة كخلفية للصفحة مثلا وكما يمكنك ان تأخذ صورة صغيرة جدا في القياس قد يكون حجمها مثلا 10× 10 بكسل ولكن يمكن باستخدام خاصية التكرار ان تجعلها تبدو كصورة كبيرة في خلفية الصفحة التي تقوم بتصميمها علي العكس تماما من HTML والتي لا تستطيع حتي في البدء في أداء مثل هذا التنسيق.
• وافضل من ذلك ان أنماط ال CSS تأخذ مساحة أقل بكثير من خيارات التنسيق في ال HTML. مثال ذلك تكرار وسم <FONT> للتحكم بتنسيق الخط كل مرة تكتب فيها نص او عنوان او اي نص في صفحتك. فيمكنك ان تقلل من حجم الصفحات الثقيلة عند استخدامك ل CSS نتيجة لذلك مهما كانت صفحاتك كبيرة سيكون تحميلها أسرع وسوف تظهر ايضا بمظهر جيد.
• والأكثر من ذلك عملية تحديث الاستايل الخاص بأي صفحة او موقع اسهل بكثير من التنسيق باستخدام ال HTML فيمكنك ان تجمع كل الانماط في صفحة واحدة خارجية ثم تنشيء إرتباط بها علي كل صفحة من صفحات موقعك ثم عندما تقوم بأي تحديث او تعديل في نمط واحد في هذه الصفحة ستتغير علي الفور في جميع صفحات موقعك مهما كان موقعك كبير.
• استخدم دائما وسم العنوان <h1> مرة واحدة في كل صفحة واستخدمه لوصف المحتوي الرئيسي او العنوان الرئيسي لموضوع محتوي الصفحة. تماما كعنوان أحد الفصول في أي كتاب تقرأه فأنت دائما ما تجد عنوان واحد لكل فصل من فصول الكتاب والاستخدام الصحيح لوسم العنوان <h1> يضيف لك فائدة تحقيق المراكز الاولي في محركات البحث بصفة خاصة عندما تستخدم في العنوان كلمة او كلمتين من الكلمات الرئيسية التي تعتبر مفاتيح للبحث يمكن وضعها في محركات البحث.
• استخدم العناوين الاخري حتي توضح الاقسام المهمة والتابعة للعنوان الرئيسي. وفكر في استخدام اكواد العناوين بحيث تضع لكل وسم الكود الذي يلائمة من ناحية الاهمية بالنسبة لموضوع الصفحة واذا كان كان هناك عنوان اقل في الاهمية من عنوان اخر استخدم وسم العنوان التالي له فمثلا <h1> للعنوان الرئيسي لكل صفحة و <h2> للعنوان الفرعي داخل الصفحة واذا كان الموضوع يحتمل عنوان لقسم ثالث او رابع داخل الموضوع استخدم <h3> واذا كان القسم الثالث او الرابع بداخلهم عناوين استخدم الوسم <h4> وهكذا لإن لديك عدد ستة اوسمة لوسم العنوان يختلفون حسب اهمية العنوان ومكانه من موضوع محتوي الصفحة بداية ب <h1> وصولا الي <h6>.
• استخدم وسم <p> فقط عند انشاءك لفقرة في محتويات الصفحة.
• استخدم القوائم غير المرقمة او المرتبه عند استخدام عند تكوين قائمة من بعض الاشياء المرتبطة ببعضها مثال ذلك شريط تصفح الموقع Navigation links والعنواين الرئيسية في الصفحة او قائمة من الملحوظات مثل هذه التي تقوم بقراءتها الان.
• استخدم القوائم المرقمة لكي تشير إلي قائمة من الخطوات المرتبة في احد العمليات حيث انك لابد ان تتبع سلسلة مرتبة من خطوات معينة لتنفيذ شيء نهائي وبنفس الترتيب.
• لكي تكون معجم او مجموعة من المصطلحات والتعاريف او الاوصاف استخدم وسم <dl> (definition list) قائمة التعريفات بالترابط او التلازم مع <dt> (definition term) او تعريف المصطلح و <dd> (definition description) أو وصف التعريف. مثال
• اذا كنت تريد مثلا تضمين اقتباس لجزء معين من نص من موقع آخر، او حكمة او بعض الاقوال المأثورة مثلا استخدم الوسم <blockquote> للحكم او النصوص الطويلة واستخدم وسم <q> للنص او الحكمة التي لا تتعدي سطر واحد.
• استفيد من الوسوم الغامضة كوسم <cite> كمرجعية في مقال من صحيفة او موقع و الوسم <address> لكي تعرف او تزود بمعلومات الاتصال مثلا بمؤلف الصفحة وكذلك لملحوظات حقوق التأليف ايضا.
• وعندما لا تجد اي وسم في ال HTML الذي يلائم بعض احتياجاتك في إنشاء الصفحة ولكنك تريد ان تصف او تعرف عنصر او عدد من العناصر علي صفحتك يمكنك وقتها استخدام حتي تستطيع ان تقوم بتنسيق نمط معين عليه داخل الصفحة استخدم وقتها وسم <div> او <span>، وان شاء الله سوف نتعرض لهذا الموضع بتفصيل أكثر فيما بعد.
• لا تفرط في استخدامك لوسم ال <div> في صفحتك كما يفعل بعض المصممين الذين يظنوان ان كل ما يحتاجونه هوه وسم ال <div> متجاهلين بعض الوسوم والتي قد تكون أكثر ملائمة مثال ذلك لإنشاء شريط تصفح الموقع يمكنك ان تستخدم وسم <div> وتملاء بمجموعة من الروابط لأقسام صفحات موقعك. ولكن الطريقة الامثل والافضل هي استخدامك للقوائم الغير مرقمة unordered list وتضع فيه كل عنصر في هذه القائمة رابط لأحد صفحات موقعك.
• تذكر ان تقوم بغلق الوسوم ولا تنسي وسم النهاية في الوسوم فمثلا وسم <p> وسم النهاية له هو </p> فيما عدا بعض الوسوم ذاتية الاغلاق مثل <br> , <img> في ال HTML و كذلك <br/> و <img /> في ال XHTML.
• تحقق من كود ال html بإحدي الطرق المذكورة في هذا المقال.
دعم المتصفحات لبعض الوسوم في ال HTML وكذلك بعض الخواص كذلك دعمها للغة CSS.
كانت هناك مشكلة كبيرة للمصممين وهي عدم دعم بعض المتصفحات لأكواد كثيرة في ال CSS وكذلك فعندما تقوم بتصميم لصفحة ويب تجد التصميم يظهر بصورة جيدة علي المتصفح فايرفوكس وجوجل كروم مثلا ولا يظهر بصورة جيدة علي متصفح اخر مثل انترنت اكسبلورر مما كان يدعو بعض المصممين لكتابة بعض الاكواد الخاصة بمتصفح معين حتي يظهر تصميم الصفحة فيه كباقي المتصفحات بالرغم من حتمية وجود اختلافات ولكنها بسيطة جدا لن تؤثر بشكل كبير علي التصميم.
سوف نشرح في هذه الدروس ما يتعلق بالاصدار 2.1 من لغة CSS أي CSS 2.1 وقد صدرت الان العديد من التحديثات وكذلك ظهرت نسخة جديدة من ال CSS وهي CSS3 فغالبا لن تواجهنا أي مشاكل أثناء دراستنا وتطبيقاتنا في هذه الدروس وان شاء الله سوف أقوم بشرح دروس أيضا عن CSS3 ولكن في قسم أخر من هذه المدونة ربما الأن او فيما بعد إن شاء الله. والتي سنلاحظ فيها أيضا وبكثرة عدم الدعم لكل خصائص في اصدار CSS3 خصوصا لإنها تعتبر ما زالت تحت الانشاء ونفس الشيء مع اصدار HTML 5 والذي يحتوي علي عدد من الوسوم الجديدة والتطورات الرائعة سواء في ال HTML 5 او CSS3.
ماذا تحتاج لكي تبدء هذه الدورة:
في هذه الدوره سوف أعتبر انه عندك خلفية عن ال HTML و XHTML ولو بسيطة وكذلك خلفية بسيطة عن ال CSS. وبعض البرامج التي تستخدم لإنشاء صفحات ال HTML كمحررات النصوص مثل Notepad . ولكن بعد ان تكتب عدد من المئات من السطور في ال HTML و CSS ربما قد تحتاج وقتها إلي بعض البرامج التي تلائم عملك علي حسب حجم العمل الذي تقوم به مثل الدريم ويفر علي سبيل المثال.
قراءة مقال الهيكل الاساسي في X)HTML) قبل البدء في لغة ال CSS
محتويات هذه الدورة:
إن شاء الله سوف ندرس في هذه الدروس كل شيء عن ال CSS مرورا بالاساسيات مثل اساسيات ال CSS وكذلك إنشاء الانماط وصفحات الانماط المحددات Selectors، معرفة ما يتعلق بالوراثة في CSS إدارة الانماط المتعددة عندها سوف أشرح لماذا اقول ان التسمية او الترجمة الصحيحة لمسمي هذه اللغة هو لغة الانماط المتتالية، تنسيق النصوص الحواف والهوامش والحشو وموديل الصندوق، اضافة صور لصفحات الموقع، تنسيق قوائم تصفح الموقع وتنسيق الروابط، تنسيق الجداول. ثم سوف نشرح ما يتعلق ب تنسيق واجهة صفحات الويب. ثم إنشاء صفحات الانماط الخاصة بطباعة صفحات الويب، تحسين عاداتك عند العمل مع CSS كتنظيم الانماط او تجميع انماط معينة في مجموعة واحدة او صفحة انماط واحدة.
لغة CSS هي اختصار للإسم Cascading Style Sheets وعلي عكس المعني الدارج في معظم المواقع العربية وهو لغة صفحات الانماط الانسيابية فإنني اعتبر التسمية الصحيحة لها هي لغة الانماط المتتالية واعتقد انه لمجرد ذكر هذا الاسم ولماذا هو صحيح سيأتي الكلام عنه فيما بعد إن شاء الله في هذه الدورة الموسعة والتي يمكن ان أقول عنها أنها ستكون الاولي من نوعها علي مستوي الويب العربي، واتمني أن يستفيد منها كل عربي إن شاء الله.
باختصار لغة صفحات الانماط المتتالية تعطي للمصمم قدرة إبداعية أكبر علي التحكم في تصميم وتنسيق واجهة الموقع وتصميمها علي احسن شكل يكون. كل مصمم علي حسب فهمه وقدرته علي الابداع. فهي تستخدم في تنسيق النصوص في صفحات الموقع مثلا بتصميم العناوين بطريقة تجذب النظر وتلفت النظر له وكذلك بحواف الاقسام ويمكنها ايضا ان تقوم بترتيب ظهور الصور او إنشاء عمود جانبي في الصفحة او بانر دعائي في أعلي او أسف الصفحة او او تغيير الوان الروابط في الصفحة بطريقة ديناميكة عند مرورك عليها بالماوس مثلا. وكل ما يمكنة القيام بذلك يجب ان يكون معقد هل هذا صحيح؟ علي العكس تماما فالغرض من ال CSS هي تبسيط أو تسهيل لعملية تنسيق صفحات الويب.
كبف تعمل لغة CSS؟
لو كنت قد استخدمت بعض برامج الكتابة مثل برنامج Microsoft Word فسوف تعتبر انك قد تعودت فعلا علي لغة ال CSS فال النمط الواحد او Style هو ببساطة قاعدة تصف الطريقة أو الكيفية التي يتم بها تنسيق جزء معين في صفحة الويب الخاص بك. و Style Sheet أو صفحة الانماط هي صفحة بها عدد من هذه القواعد او الانماط.
لغة ال CSS لغة تعمل جنبا إلي جنب مع لغة HTML ولكنها تختلف عنها تماما . ففي حين تقوم لغة HTML بتزويد صفحات الويب بالبنية الاساسية للمعلومات من خلال الفقرات و العناوين والقوائم إلخ، CSS تعمل معها يدا بيد كذلك مع المتصفح حتي تجعل المظهر العام للصفحة يبدوا جيدا.
علي سبيل المثال: قد تستخدم ال HTML لكي تحول مثلا عبارة الي اكبر مستوي من العناوين مشيرا بذلك إلي ان هذا العنوان يقدم محتوي باقي الصفحة. ومع ذلك فإنك سوف تستخدم لغة CSS لكي تنسق هذا العنوان الرئيسي علي سبيل المثال سوف تجعل الخط مثلا عريض واكبر في الحجم وكذلك نوع معين من الخطوط وكذلك تعطي له مكانا يبعد مثلا 50 بكسل من الجانب الايسر من يسار نافذة المتصفح. لذلك فلغة CSS تعتبر هي كل ما يتعلق بتغيير وتحسين مظهر صفحة ال HTML.
ويمكنك أيضا عمل ملف ستايل CSS خاص فقط بطريقة ظهور الصور علي صفحات موقعك. مثلا يختص هذا الملف بتحديد محاذاة الصور سواء علي الجانب الايمن من الصفحة او ان تحاط كل الصور بحدود ملونة وان تضع مثلا مسافة 50 بكسل كهامش او مسافة بين كل صورة واخري او كل صورة والنص المحيط بها.
بمجرد ان تنشي الاستايل بإستطاعتك ان تقوم بتطبيقه علي كل النصوص والصور والعناوين او علي كل العناصر الاخري في الصفحة. علي سبيل المثال يمكن ان تختار فقرة معينة وتنسقها بتطبيق تنسيق معين بتغيير حجم الخط ونوعه وكلك لونه. ويمكنك ايضا من ان تنشيء استايلات من اجل وسوم معينة بذاتها في ال HTML علي سبيل المثال وسم العنوان <h1> في موقعك سوف يظهر بنفس التنسيق في اي مكان يظهر علي صفحات موقعك او صفحتك.
فوائد لغة ال CSS:
قبل ظهور لغة CSS مصممين مواقع الانترنت كانوا محدودين القدرة في تصميم واجهة الصفحات وخيارات التنسيق في لغة ال HTML فإذا كنت ممكن عاصروا الانترنت خصوصا في عام 1995 كنت ستدرك تماما كيف ان مصممين الانترنت كانوا محدودين القدرات والامكانيات. بالتأكيد لغة HTML تقدم خيارات التنسيق الاساسية للنصوص والصور والجداول وغيرها من عناصر صفحات الويب وايضا مع الصبر والتدقيق يستطيع اصحاب المواقع جعل صفحات الموقع تبدو جيدة باستخدام HTML فقط ولكن النتيجة غالبا ما سوف تكون صفحات ويب بطيئة في تحميلها من خلال المتصفح علي كمبيوتر زائر الموقع. لكن لغة CSS علي العكس تماما تتميز بما يلي:
• فصفحات الانماط تقدم خيارت تنسيق اكثر بكثير من لغة ال HTML مع CSS باستطاعتك تنسيق الفقرات كما تراها مثلا في إحدي المجلات او الصحف (فمثلا إنشاء بادئة السطر الاول Line Indented وان توجد مسافات تتحكم في مقدارها بين كل فقرة واخري) وان تتحكم ايضا في المسافات بين الاسطر في الفقرة الواحدة.
• عند استخدام لغة ال CSS يمكنك إضافة صورة كخلفية للصفحة مثلا وكما يمكنك ان تأخذ صورة صغيرة جدا في القياس قد يكون حجمها مثلا 10× 10 بكسل ولكن يمكن باستخدام خاصية التكرار ان تجعلها تبدو كصورة كبيرة في خلفية الصفحة التي تقوم بتصميمها علي العكس تماما من HTML والتي لا تستطيع حتي في البدء في أداء مثل هذا التنسيق.
• وافضل من ذلك ان أنماط ال CSS تأخذ مساحة أقل بكثير من خيارات التنسيق في ال HTML. مثال ذلك تكرار وسم <FONT> للتحكم بتنسيق الخط كل مرة تكتب فيها نص او عنوان او اي نص في صفحتك. فيمكنك ان تقلل من حجم الصفحات الثقيلة عند استخدامك ل CSS نتيجة لذلك مهما كانت صفحاتك كبيرة سيكون تحميلها أسرع وسوف تظهر ايضا بمظهر جيد.
• والأكثر من ذلك عملية تحديث الاستايل الخاص بأي صفحة او موقع اسهل بكثير من التنسيق باستخدام ال HTML فيمكنك ان تجمع كل الانماط في صفحة واحدة خارجية ثم تنشيء إرتباط بها علي كل صفحة من صفحات موقعك ثم عندما تقوم بأي تحديث او تعديل في نمط واحد في هذه الصفحة ستتغير علي الفور في جميع صفحات موقعك مهما كان موقعك كبير.
اعادة التفكير في ال HTML من اجل استخدام ال CSS ودمجهما معا:
لكي تحصل علي اكثر ما يمكنك من استخدام لغة ال CSS مع ال HTML بالكود الذي سوف تكتبه في ال HTML يجب ان يكون مبني علي أسس جيده. سوف نعرض الان بعض الطرق للكيفية التي نكتب بها كود جيد بال HTML حتي يكون أكثر صداقة او موافقة مع ال CSS. الاخبار السارة هي انه عند استخدام لغة ال CSS عند تصميمك لصفحات موقعك لغة ال HTML تصبح حقيقة اسهل في كتابتها. فلن تكون قلق علي كتابة بعض الوسوم او الخواص التي تقوم بتنسيق ال HTML والتي اصلا لم تخلق هذه اللغة من أجلها وبالتالي سوف تصبح كتابة ال HTML تستلزم عدد أقل من الوسوم وكذلك القليل من الكتابة وكذلك أيضا القليل من الوقت . وستعرض لنا لغة CSS تقدم الكثير من اللمسات الفنية الجمالية التي تستخدم في تنسيق صفحات الويب.
الفرق بين الماضي والحاضر بالنسبة ل HTML و CSS:
ونعني بالماضي الفترة قبل استخدام ال CSS والحاضر باستخدام CSS ودمجها مع ال HTML فعندما تضيف لغة ال CSS مع ال HTML سوف نقول وداعا لبعض الوسوم والتي قد تستخدمها في ال HTML لعمل بعض التنسيقات مثلا وسم <font> وكذلك وسم <b> و <i> و <strong> و <table> و خصوصا عندما تقوم بتصميم واجهة الصفحة وتقسيم الهيدر والفوتر والمحتوي الرئيسي او شريط تصفح الموقع Navigation bar وبالمثل سوف تستغني أيضا عن بعض الخواص وتنساها تماما مثل background, bgcolor, text, link, alink, vlink, leftmargin, topmargin, marginwidth, marginheight.
ولكن بالمقابل سوف تتعلم استخدام وسمين جدد هما <div> و <span> ويستخدمان لتسهيل تعريف او تحديد المحتويات وكذلك وضعها في أقسام كالهيدر او الفوتر مثلا. والوسم <div> و <span> كالاوعية الفارغة التي تملأ بمحتوي الصفحة ويعتبر وسم <div> كتلة او Block-level مما يعني انه يبدو وكأنه يسبقه ويليه كود <br> أي أنه عند إنشاءه يبدء سطر جديد ولكن وسم <span> يعتبر جزء من السطر الواحد او Inline . وبخلاف ذلك أيضا وسم <div> لا يملك شكل معين او ثابت لذلك يمكن ان تشكلة كما تريد فمرة مثلا تجعل منه شكل مربع في صفحة الويب او مستطيل او عمود او صف اي انك تشكلة حسب ما تقتضي الحاجه عند تصميمك لصفحات موقعك وعلي حسب المحتوي الذي تضعه داخله. وباستخدم لغة ال CSS يمكنك التحكم في المكان الذي تضع فيه كل <DIV> او قسم داخل صفحة الويب التي تصممها وكذلك في أبعاد اي شكل من طول او عرض.
اما بالنسبة لوسم ال <span> فكما كنا نستخدم وسوم ال <b> و <i> عند تنسيق اي كلمة او عبارة داخل فقرة او عنوان رئيسي مثلا نستخدمه بدلا من كل هذه الوسوم ونقوم ايضا عن طريق لغة ال CSS بإنشاء النمط للتنسيق علي حسب ما يتناسب واستايل الصفحة او الموقع ككل.
وهذه المقدمة البسيطة لهذين الوسمين ليست هي النهاية ولكن مع تقدمنا في دراسة لغة ال CSS سوف نتعرف كيف نستخدمهما بطرق مختلفة ومتطورة حتي نعرف طرق ابداعية جديدة في تنسيق صفحات الويب.
المثال التالي يوضح الفرق بين كتابة ال HTML بمفردها وكتابة HTML و CSS مندمجين معا
<p>
<strong>
<font color="#0066FF" size="5"
face="Verdana,
Arial, Helvetica, sans-serif">
انا عنوان رئيسي خطي كبير ولوني ازرق
</font></strong>
<br />
<font color="#FF3300" size="4"
face="Georgia,
Times New Roman, Times, serif">
<em>
<strong>
انا عنوان صغير شويه خطي احمر
<br />
</strong></em></font>
لوريم إيبسوم(<a href="http://ar.lipsum.com/">Lorem
Ipsum</a>) هو ببساطة نص
شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر.
كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة
مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل
أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى
صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في
ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور
برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.
</p>
|
انا عنوان رئيسي خطي كبير ولوني ازرق
انا عنوان صغير شويه خطي احمر
<p>لوريم إيبسوم(Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم. </p>
ملحوظات يجب أخذها في الاعتبار عند إنشاء صفحة ويب تعتمد علي دمج ال HTML و ال CSS:
من الجيد ان تملك دائما خطة للعمل اذا كنت مازلت لا تعلم ما هي الطريقة لإنشاء صفحة ويب بطريقة صحيحة إذا يوجد هنا بعض الملحوظات لتساعدك في علي البداية:• استخدم دائما وسم العنوان <h1> مرة واحدة في كل صفحة واستخدمه لوصف المحتوي الرئيسي او العنوان الرئيسي لموضوع محتوي الصفحة. تماما كعنوان أحد الفصول في أي كتاب تقرأه فأنت دائما ما تجد عنوان واحد لكل فصل من فصول الكتاب والاستخدام الصحيح لوسم العنوان <h1> يضيف لك فائدة تحقيق المراكز الاولي في محركات البحث بصفة خاصة عندما تستخدم في العنوان كلمة او كلمتين من الكلمات الرئيسية التي تعتبر مفاتيح للبحث يمكن وضعها في محركات البحث.
• استخدم العناوين الاخري حتي توضح الاقسام المهمة والتابعة للعنوان الرئيسي. وفكر في استخدام اكواد العناوين بحيث تضع لكل وسم الكود الذي يلائمة من ناحية الاهمية بالنسبة لموضوع الصفحة واذا كان كان هناك عنوان اقل في الاهمية من عنوان اخر استخدم وسم العنوان التالي له فمثلا <h1> للعنوان الرئيسي لكل صفحة و <h2> للعنوان الفرعي داخل الصفحة واذا كان الموضوع يحتمل عنوان لقسم ثالث او رابع داخل الموضوع استخدم <h3> واذا كان القسم الثالث او الرابع بداخلهم عناوين استخدم الوسم <h4> وهكذا لإن لديك عدد ستة اوسمة لوسم العنوان يختلفون حسب اهمية العنوان ومكانه من موضوع محتوي الصفحة بداية ب <h1> وصولا الي <h6>.
• استخدم وسم <p> فقط عند انشاءك لفقرة في محتويات الصفحة.
• استخدم القوائم غير المرقمة او المرتبه عند استخدام عند تكوين قائمة من بعض الاشياء المرتبطة ببعضها مثال ذلك شريط تصفح الموقع Navigation links والعنواين الرئيسية في الصفحة او قائمة من الملحوظات مثل هذه التي تقوم بقراءتها الان.
• استخدم القوائم المرقمة لكي تشير إلي قائمة من الخطوات المرتبة في احد العمليات حيث انك لابد ان تتبع سلسلة مرتبة من خطوات معينة لتنفيذ شيء نهائي وبنفس الترتيب.
• لكي تكون معجم او مجموعة من المصطلحات والتعاريف او الاوصاف استخدم وسم <dl> (definition list) قائمة التعريفات بالترابط او التلازم مع <dt> (definition term) او تعريف المصطلح و <dd> (definition description) أو وصف التعريف. مثال
HTML CODE
|
<html>
<body>
<h4>Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
|
شكل القائمة عند ظهورها في المتصفح
|
Definition List:
Coffee
-
black hot drink
Milk
-
white cold drink
|
• اذا كنت تريد مثلا تضمين اقتباس لجزء معين من نص من موقع آخر، او حكمة او بعض الاقوال المأثورة مثلا استخدم الوسم <blockquote> للحكم او النصوص الطويلة واستخدم وسم <q> للنص او الحكمة التي لا تتعدي سطر واحد.
• استفيد من الوسوم الغامضة كوسم <cite> كمرجعية في مقال من صحيفة او موقع و الوسم <address> لكي تعرف او تزود بمعلومات الاتصال مثلا بمؤلف الصفحة وكذلك لملحوظات حقوق التأليف ايضا.
• وعندما لا تجد اي وسم في ال HTML الذي يلائم بعض احتياجاتك في إنشاء الصفحة ولكنك تريد ان تصف او تعرف عنصر او عدد من العناصر علي صفحتك يمكنك وقتها استخدام حتي تستطيع ان تقوم بتنسيق نمط معين عليه داخل الصفحة استخدم وقتها وسم <div> او <span>، وان شاء الله سوف نتعرض لهذا الموضع بتفصيل أكثر فيما بعد.
• لا تفرط في استخدامك لوسم ال <div> في صفحتك كما يفعل بعض المصممين الذين يظنوان ان كل ما يحتاجونه هوه وسم ال <div> متجاهلين بعض الوسوم والتي قد تكون أكثر ملائمة مثال ذلك لإنشاء شريط تصفح الموقع يمكنك ان تستخدم وسم <div> وتملاء بمجموعة من الروابط لأقسام صفحات موقعك. ولكن الطريقة الامثل والافضل هي استخدامك للقوائم الغير مرقمة unordered list وتضع فيه كل عنصر في هذه القائمة رابط لأحد صفحات موقعك.
• تذكر ان تقوم بغلق الوسوم ولا تنسي وسم النهاية في الوسوم فمثلا وسم <p> وسم النهاية له هو </p> فيما عدا بعض الوسوم ذاتية الاغلاق مثل <br> , <img> في ال HTML و كذلك <br/> و <img /> في ال XHTML.
• تحقق من كود ال html بإحدي الطرق المذكورة في هذا المقال.
دعم المتصفحات لبعض الوسوم في ال HTML وكذلك بعض الخواص كذلك دعمها للغة CSS.
كانت هناك مشكلة كبيرة للمصممين وهي عدم دعم بعض المتصفحات لأكواد كثيرة في ال CSS وكذلك فعندما تقوم بتصميم لصفحة ويب تجد التصميم يظهر بصورة جيدة علي المتصفح فايرفوكس وجوجل كروم مثلا ولا يظهر بصورة جيدة علي متصفح اخر مثل انترنت اكسبلورر مما كان يدعو بعض المصممين لكتابة بعض الاكواد الخاصة بمتصفح معين حتي يظهر تصميم الصفحة فيه كباقي المتصفحات بالرغم من حتمية وجود اختلافات ولكنها بسيطة جدا لن تؤثر بشكل كبير علي التصميم.
سوف نشرح في هذه الدروس ما يتعلق بالاصدار 2.1 من لغة CSS أي CSS 2.1 وقد صدرت الان العديد من التحديثات وكذلك ظهرت نسخة جديدة من ال CSS وهي CSS3 فغالبا لن تواجهنا أي مشاكل أثناء دراستنا وتطبيقاتنا في هذه الدروس وان شاء الله سوف أقوم بشرح دروس أيضا عن CSS3 ولكن في قسم أخر من هذه المدونة ربما الأن او فيما بعد إن شاء الله. والتي سنلاحظ فيها أيضا وبكثرة عدم الدعم لكل خصائص في اصدار CSS3 خصوصا لإنها تعتبر ما زالت تحت الانشاء ونفس الشيء مع اصدار HTML 5 والذي يحتوي علي عدد من الوسوم الجديدة والتطورات الرائعة سواء في ال HTML 5 او CSS3.
من الصعب عليك اختبار صفحتك في وقت واحد من نفس الجهاز علي نسختين من متصفح انترنت اكسبلورر. ولكن مع برنامج صغير اسمه IETester تقوم بتثبيته علي جهازك الان يمكنك اختبار صفحتك علي أكثر من إصدار من متصح انترنت اكسبلورر في وقت واحد دون الحاجه لاختبار الصفحة علي أكثر من جهاز كل منهم مثبت عليه إصدار معين، يمكنك تحميل نسخة من هذا البرنامج من هذه الصفحة IETester يجب عليك تثبيت معظم المتصفحات مثل Firefox, Safari, Opera, and Chrome.
ماذا تحتاج لكي تبدء هذه الدورة:
في هذه الدوره سوف أعتبر انه عندك خلفية عن ال HTML و XHTML ولو بسيطة وكذلك خلفية بسيطة عن ال CSS. وبعض البرامج التي تستخدم لإنشاء صفحات ال HTML كمحررات النصوص مثل Notepad . ولكن بعد ان تكتب عدد من المئات من السطور في ال HTML و CSS ربما قد تحتاج وقتها إلي بعض البرامج التي تلائم عملك علي حسب حجم العمل الذي تقوم به مثل الدريم ويفر علي سبيل المثال.
قراءة مقال الهيكل الاساسي في X)HTML) قبل البدء في لغة ال CSS
محتويات هذه الدورة:
إن شاء الله سوف ندرس في هذه الدروس كل شيء عن ال CSS مرورا بالاساسيات مثل اساسيات ال CSS وكذلك إنشاء الانماط وصفحات الانماط المحددات Selectors، معرفة ما يتعلق بالوراثة في CSS إدارة الانماط المتعددة عندها سوف أشرح لماذا اقول ان التسمية او الترجمة الصحيحة لمسمي هذه اللغة هو لغة الانماط المتتالية، تنسيق النصوص الحواف والهوامش والحشو وموديل الصندوق، اضافة صور لصفحات الموقع، تنسيق قوائم تصفح الموقع وتنسيق الروابط، تنسيق الجداول. ثم سوف نشرح ما يتعلق ب تنسيق واجهة صفحات الويب. ثم إنشاء صفحات الانماط الخاصة بطباعة صفحات الويب، تحسين عاداتك عند العمل مع CSS كتنظيم الانماط او تجميع انماط معينة في مجموعة واحدة او صفحة انماط واحدة.
ليست هناك تعليقات:
إرسال تعليق