النمط أو الاستايل في لغة CSS:
الانماط في لغة CSS لها لغتها الخاصة والتي تتواصل بها مع لغة ال (X)HTML أو لغات التصميم الاخري. فعلي سبيل المثال حتي يتم تعيين لون الخط القياسي وكذلك حجمه لجميع الفقرات في أحد صفحات الويب فسوف نكتب النمط التالي
الانماط في لغة CSS لها لغتها الخاصة والتي تتواصل بها مع لغة ال (X)HTML أو لغات التصميم الاخري. فعلي سبيل المثال حتي يتم تعيين لون الخط القياسي وكذلك حجمه لجميع الفقرات في أحد صفحات الويب فسوف نكتب النمط التالي
P { color: red; font-size: 1.5em; }
وهذا النمط ببساطة شديدة يقوم بإبلاغ صفحة الويب بأن تجعل النص المكتوب في كل الفقرات ذو لون أحمر وكذلك حجم الخط بالقياس 1.5ems و ال (em) تعتبر وحدة من وحدات قياس والتي تعتمد علي حجم النص الأفتراضي في المتصفح وسوف نأتي لهذا الشرح فيما بعد إن شاء الله. والشكل القادم يوضح انه مثل هذا النمط البسيط يتكون من عدة عناصر.
ويتكون النمط او القاعده من:
المحدد Selector:
والمحدد هو الذي يخبر المتصفح أي عنصر أو وسم او وسوم بإن ينسقها او يضع قاعدة لها، مثل الهيدر او الفقرة او الصوره او الروابط وكما في الشكل السابق فإن القاعدة التي به تخبر المتصفح بأن يشير إلي الوسم <p> في صفحة الويب او الموقع بأن يقوم بتنسيق جميع الفقرات بنفس التنسيقات التي وردت في النمط او القاعدة. و بالمدي الكبير والذي تعرضه لغة CSS من المحددات فمع قليل من الاداء فسوف تسيطر علي تنسيق صفحاتك وسوف نتكلم عن المحددات في القريب العاجل إن شاء الله.
قالب الاعلانات Declaration Block:
وهي التي تتبع المحدد في النمط وتشتمل علي كل خيارات التنسيق والتي ترغب في تطبيقها علي المحدد. وتبدا قالب الاعلانات بقوس الافتتاح المعكوف ({) وتنتهي بقوس الغلق المعكوف (}).
الاعلان Declaration:
وهو يكون بين قوس الافتتاح وقوس الغلق في قالب الاعلانات وقد يضاف اعلان واحد أو أكثر في النمط او القاعدة. ويتكون كل اعلان من خاصية وقيمه مساوية لها وينتهي بعلامة ( ; ) Semicolon او الفاصلة المنقوطة.
الخاصية Property:
تقدم لغة ال CSS عدد كبير جدا من خيارات التنسيق تسمي الخواص، والخاصية هي كلمة او عدد من الكلمات القليلة والتي تشير إلي تنسيق معين ومعظم الخواص لها أسماء واضحة مثل حجم الخط font-size و الهامش العلوي margin-top و ومحاذاة النص text-align. وعلي سبيل المثال خاصية لون الخلفية background-color تحدد لون الخلفية. وعند كتابة الخاصية يجب ان تتبعها بعلامة ( : ) colon أو النقطتين . وسوف نتعرف علي الخصائص في هذه الدروس ان شاء الله.
القيمة Value:
واخيرا يمكنك ان تعبر عن قدراتك الابداعية بتعيين القيمة لكل خاصية في لغة ال CSS بأن تجعل مثلا لون الخلفية background-color يأخذ قيمة اللون الازرق او الاحمر او البنفسجي علي سبيل المثال. وكما سيتضح إن شاء الله في هذه الدروس ان خواص مختلفة في لغة ال CSS تحتاج إلي أنواع مختلفة من القيم مثل خاصية اللون يمكن ان تكتب فيها (أحمر او #FF0000) أما خاصية الطول فقد تأخذ القيمة (10px) أو (200%) أو قد تأخذ القيم كلمات محددة مسبقا مثل القمة top او الوسط center او القاع bottom.
ملحوظة:
عند كتابة النمط او القاعدة فقد تضع في السطر الواحد أكثر من اعلان أو ان تضع كل اعلان في سطر واحد بمفرده كما في المثال التالي :
ويلاحظ ان المتصفح يتجاهل المسافات لذلك فيمكنك ان تكتب كل اعلان في سطر واحد حتي تتمكن من قراءة النمط بسهولة وتجعل الانماط قابلة للقراءة. كذلك وضع او كتابة مسافة واحدة بعد كتابة علامة النقطتين (: ) وبين القيمة يعتبر أمر اختياري فعدم وجود المسافة لن يؤثر علي النمط او التنسيق ولكن إضافتها يجعل الاستايل او صفحة الانماط قابلة للقراءة بسهولة. كذلك يجب وضع الفاصلة المنقوطة بعد نهاية كل اعلان declaration حيث تعتبر فاصل بين كل اعلان والذي يليه إلا أنه يفضل أيضا وضعها حتي في أخر اعلان وقبل غلق قالب الاعلانات بالقوس المعكوف ( } ).
فهم صفحات الانماط Understanding CSS:
بالطبع نمط واحد بمفرده لن يحول مظهر صفحة الويب إلي عمل فني جميل ، فقد يجعل فقط لون النص في الفقره أحمر ولكن اذا أردت ان تظهر موقعك بتصميم جميل فأنت تحتاج إلي أنماط مختلفة ومتعددة وكثيره وبهذا نكون قد وصلنا إلي تعريف صفحات الانماط علي أنها مجموعة من الانماط تنضم مع بعضها البعض في صفحة واحدة. ويمكن ان تكون صفحات الانماط تحت نوع من النوعين إما داخلي Internal او خارجي External ، معتمدا في هذه التسمية علي ما إذا كان صفحة الاستايل او الانماط موجوده داخل صفحة الويب نفسها أم انها عبارة عن صفحة من الانماط منفصلة وقائمة بذاتها ولكنه تم ربطها بصفحة الويب.
صفحة أنماط خارجية أم داخلية – كيف تختار أي منهما؟
في معظم الاوقات صفحات الانماط الخارجية هي النوع من صفحات الانماط الذي سوف تختاره، لأنها تجعل بناء صفحات الويب أسهل وتعطي مرونة أكثر في تحديث المواقع بشكل أسرع.
لذلك فملف صفحات الانماط الخارجية هو ملف يجمع كل الانماط في ملف واحد والذي يمكنك أن تربطها بصفحة الويب فقط بسطر واحد من الكود. وبنفس الطريقة يمكنك ان تنشيء رابط بينها وبين كل صفحة من صفحات موقعك مزودا بذلك تصميم موحد للموقع ككل. كما انه من السهل ان يكون كل ما يتعلق بتنسيق مظهر وشكل الموقع في صفحة واحده هي صفحة الانماط الخارجية.
وفيما يتعلق بصفحة الويب التي ترتبط بصفحة أنماط خارجية هذا يجعلها أكثر قدرة علي ان يتم تحميلها من خلال المتصفح بشكل أسرع. فعند ربط صفحات موقعك بملف صفحات أنماط خارجية فصفحات موقعك تحتوي فقط علي الوسوم الاساسية المكونة للمحتوي والتي تم تكوينها مستخدما وسوم ال (X)HTML ولا يوجد بها أيضا الجداول والتي تعمل علي زيادة حجم ملف صفحة الويب او وسوم ال <FONT> مثلا ولا يوجد حتي بها صفحة أنماط داخلية. كل هذا يساعد علي تحميل صفحات الموقع علي متصفح المستخدم بشكل أسرع. كما يساعد كذلك ان يأخذ الموقع ترتيب جيد في محركات البحث.
والاكثر من ذلك عندما تستخدم صفحة انماط خارجية واحدة وعند قيام المتصفح Browser بتحميل موقعك يقوم بتحميل ملف الصفحات الخارجية ويخزنه علي جهاز كمبيوتر المستخدم (في مجلد غير مرئي في ذاكرة التخزين المؤقتة) وعندما يقوم زائر الموقع بفتح صفحات اخري من موقعك فسوف يقوم المتصفح باستيراد الانماط من نفس صفحة الانماط الخارجية ولن تكون هناك اي حاجه لتحميله مرة اخري مما يوفر الكثير من الوقت ويجعل موقعك يعمل بشكل أسرع من خلال المتصفح علي جهاز زائر الموقع.
صفحة الانماط الداخليةInternal Style Sheets :
صفحة الانماط الداخلية هي مجموعة من الانماط التي تعتبر جزء من الاكواد الخاصة بصفحة الويب. ودائما ما تكون داخل جزء الرأس من كود الصفحة <head></head> داخل وسم (X)HTML خاص بالنمط او الاستايل هو <style> وهذا مثال عليه.
ملحوظة: يمكن ان تضع وسم ال Style وما يحتويه من أنماط بعد وسم ال title في جزء الرأس من الصفحة ولكن معظم مصممين الويب عادة ما يقومون بوضعه قبل وسم غلق الرأس في الصفحة </head> واذا كنت تستخدم أيضا جافاسكربت فيجب ان تضعها بعد وسم ال Style مباشرة وقبل وسم غلق الرأس ولأن معظم برامج الجافاسكربت تعتمد في عملها علي ال CSS لذلك بإضافة وسم Style قبلها يمكن لك ان تتأكد ان برنامج الجافاسكربت قد حصل علي كل المعلومات التي يريدها من ال Style لكي يقوم بعمله.
ويتكون النمط او القاعده من:
المحدد Selector:
والمحدد هو الذي يخبر المتصفح أي عنصر أو وسم او وسوم بإن ينسقها او يضع قاعدة لها، مثل الهيدر او الفقرة او الصوره او الروابط وكما في الشكل السابق فإن القاعدة التي به تخبر المتصفح بأن يشير إلي الوسم <p> في صفحة الويب او الموقع بأن يقوم بتنسيق جميع الفقرات بنفس التنسيقات التي وردت في النمط او القاعدة. و بالمدي الكبير والذي تعرضه لغة CSS من المحددات فمع قليل من الاداء فسوف تسيطر علي تنسيق صفحاتك وسوف نتكلم عن المحددات في القريب العاجل إن شاء الله.
قالب الاعلانات Declaration Block:
وهي التي تتبع المحدد في النمط وتشتمل علي كل خيارات التنسيق والتي ترغب في تطبيقها علي المحدد. وتبدا قالب الاعلانات بقوس الافتتاح المعكوف ({) وتنتهي بقوس الغلق المعكوف (}).
الاعلان Declaration:
وهو يكون بين قوس الافتتاح وقوس الغلق في قالب الاعلانات وقد يضاف اعلان واحد أو أكثر في النمط او القاعدة. ويتكون كل اعلان من خاصية وقيمه مساوية لها وينتهي بعلامة ( ; ) Semicolon او الفاصلة المنقوطة.
الخاصية Property:
تقدم لغة ال CSS عدد كبير جدا من خيارات التنسيق تسمي الخواص، والخاصية هي كلمة او عدد من الكلمات القليلة والتي تشير إلي تنسيق معين ومعظم الخواص لها أسماء واضحة مثل حجم الخط font-size و الهامش العلوي margin-top و ومحاذاة النص text-align. وعلي سبيل المثال خاصية لون الخلفية background-color تحدد لون الخلفية. وعند كتابة الخاصية يجب ان تتبعها بعلامة ( : ) colon أو النقطتين . وسوف نتعرف علي الخصائص في هذه الدروس ان شاء الله.
القيمة Value:
واخيرا يمكنك ان تعبر عن قدراتك الابداعية بتعيين القيمة لكل خاصية في لغة ال CSS بأن تجعل مثلا لون الخلفية background-color يأخذ قيمة اللون الازرق او الاحمر او البنفسجي علي سبيل المثال. وكما سيتضح إن شاء الله في هذه الدروس ان خواص مختلفة في لغة ال CSS تحتاج إلي أنواع مختلفة من القيم مثل خاصية اللون يمكن ان تكتب فيها (أحمر او #FF0000) أما خاصية الطول فقد تأخذ القيمة (10px) أو (200%) أو قد تأخذ القيم كلمات محددة مسبقا مثل القمة top او الوسط center او القاع bottom.
ملحوظة:
عند كتابة النمط او القاعدة فقد تضع في السطر الواحد أكثر من اعلان أو ان تضع كل اعلان في سطر واحد بمفرده كما في المثال التالي :
P {
Color: red;
Font-size: 1.5em;
}
ويلاحظ ان المتصفح يتجاهل المسافات لذلك فيمكنك ان تكتب كل اعلان في سطر واحد حتي تتمكن من قراءة النمط بسهولة وتجعل الانماط قابلة للقراءة. كذلك وضع او كتابة مسافة واحدة بعد كتابة علامة النقطتين (: ) وبين القيمة يعتبر أمر اختياري فعدم وجود المسافة لن يؤثر علي النمط او التنسيق ولكن إضافتها يجعل الاستايل او صفحة الانماط قابلة للقراءة بسهولة. كذلك يجب وضع الفاصلة المنقوطة بعد نهاية كل اعلان declaration حيث تعتبر فاصل بين كل اعلان والذي يليه إلا أنه يفضل أيضا وضعها حتي في أخر اعلان وقبل غلق قالب الاعلانات بالقوس المعكوف ( } ).
فهم صفحات الانماط Understanding CSS:
بالطبع نمط واحد بمفرده لن يحول مظهر صفحة الويب إلي عمل فني جميل ، فقد يجعل فقط لون النص في الفقره أحمر ولكن اذا أردت ان تظهر موقعك بتصميم جميل فأنت تحتاج إلي أنماط مختلفة ومتعددة وكثيره وبهذا نكون قد وصلنا إلي تعريف صفحات الانماط علي أنها مجموعة من الانماط تنضم مع بعضها البعض في صفحة واحدة. ويمكن ان تكون صفحات الانماط تحت نوع من النوعين إما داخلي Internal او خارجي External ، معتمدا في هذه التسمية علي ما إذا كان صفحة الاستايل او الانماط موجوده داخل صفحة الويب نفسها أم انها عبارة عن صفحة من الانماط منفصلة وقائمة بذاتها ولكنه تم ربطها بصفحة الويب.
صفحة أنماط خارجية أم داخلية – كيف تختار أي منهما؟
في معظم الاوقات صفحات الانماط الخارجية هي النوع من صفحات الانماط الذي سوف تختاره، لأنها تجعل بناء صفحات الويب أسهل وتعطي مرونة أكثر في تحديث المواقع بشكل أسرع.
لذلك فملف صفحات الانماط الخارجية هو ملف يجمع كل الانماط في ملف واحد والذي يمكنك أن تربطها بصفحة الويب فقط بسطر واحد من الكود. وبنفس الطريقة يمكنك ان تنشيء رابط بينها وبين كل صفحة من صفحات موقعك مزودا بذلك تصميم موحد للموقع ككل. كما انه من السهل ان يكون كل ما يتعلق بتنسيق مظهر وشكل الموقع في صفحة واحده هي صفحة الانماط الخارجية.
وفيما يتعلق بصفحة الويب التي ترتبط بصفحة أنماط خارجية هذا يجعلها أكثر قدرة علي ان يتم تحميلها من خلال المتصفح بشكل أسرع. فعند ربط صفحات موقعك بملف صفحات أنماط خارجية فصفحات موقعك تحتوي فقط علي الوسوم الاساسية المكونة للمحتوي والتي تم تكوينها مستخدما وسوم ال (X)HTML ولا يوجد بها أيضا الجداول والتي تعمل علي زيادة حجم ملف صفحة الويب او وسوم ال <FONT> مثلا ولا يوجد حتي بها صفحة أنماط داخلية. كل هذا يساعد علي تحميل صفحات الموقع علي متصفح المستخدم بشكل أسرع. كما يساعد كذلك ان يأخذ الموقع ترتيب جيد في محركات البحث.
والاكثر من ذلك عندما تستخدم صفحة انماط خارجية واحدة وعند قيام المتصفح Browser بتحميل موقعك يقوم بتحميل ملف الصفحات الخارجية ويخزنه علي جهاز كمبيوتر المستخدم (في مجلد غير مرئي في ذاكرة التخزين المؤقتة) وعندما يقوم زائر الموقع بفتح صفحات اخري من موقعك فسوف يقوم المتصفح باستيراد الانماط من نفس صفحة الانماط الخارجية ولن تكون هناك اي حاجه لتحميله مرة اخري مما يوفر الكثير من الوقت ويجعل موقعك يعمل بشكل أسرع من خلال المتصفح علي جهاز زائر الموقع.
صفحة الانماط الداخليةInternal Style Sheets :
صفحة الانماط الداخلية هي مجموعة من الانماط التي تعتبر جزء من الاكواد الخاصة بصفحة الويب. ودائما ما تكون داخل جزء الرأس من كود الصفحة <head></head> داخل وسم (X)HTML خاص بالنمط او الاستايل هو <style> وهذا مثال عليه.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<!--لا تنسي وضع عنوان الصفحة
-->
<title> ملف استايل داخلي</title>
<style type="text/css">
h1 {
color: #FF7643;
font-family: Arial;
}
p {
color: red;
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>
فهم صفحات الانماط</h1>
<p>
بالطبع نمط واحد بمفرده لن يحول مظهر صفحة
الويب إلي عمل فني جميل ، فقد يجعل فقط لون النص في الفقره أحمر ولكن اذا أردت ان
تظهر موقعك بتصميم جميل فأنت تحتاج إلي أنماط مختلفة وبهذا نكون قد وصلنا إلي تعريف
صفحات الانماط علي أنها مجموعة من الانماط تنضم مع بعضها البعض في صفحة واحدة. ويمكن
ان تكون صفحات الانماط تحت نوع من النوعين إما خارجي او داخلي، معتمدا في هذه التسمية
علي ما إذا كان صفحة الاستايل او الانماط موجوده داخل صفحة الويب نفسها أم انها عبارة
عن صفحة من الانماط منفصلة وقائمة بذاتها ولكنه تم ربطها بصفحة الويب.
</p>
</body>
</html>
|
ملحوظة: يمكن ان تضع وسم ال Style وما يحتويه من أنماط بعد وسم ال title في جزء الرأس من الصفحة ولكن معظم مصممين الويب عادة ما يقومون بوضعه قبل وسم غلق الرأس في الصفحة </head> واذا كنت تستخدم أيضا جافاسكربت فيجب ان تضعها بعد وسم ال Style مباشرة وقبل وسم غلق الرأس ولأن معظم برامج الجافاسكربت تعتمد في عملها علي ال CSS لذلك بإضافة وسم Style قبلها يمكن لك ان تتأكد ان برنامج الجافاسكربت قد حصل علي كل المعلومات التي يريدها من ال Style لكي يقوم بعمله.
ويعتبر ملف الاستايل الداخلي هو طريقة سهلة لإضافة الانماط لصفحة ويب فهو يوفر رؤية فورية لمظهر صفحة الويب، لكنها لا تعتبر الطريقة الاكثر كفاءة لتصميم موقع بأكملة يتكون من العديد من صفحات الويب وذلك هو لشيء واحد انك سوف تكون بحاجه إلي نسخ الاستايل ولصقه في كل صفحة من صفحات موقعك مما يستلزم وقت أطول في تحميل الصفحة.
ولكن صفحات الانماط الداخلية سوف تكون من أكثر المتاعب عندما تريد أن تقوم بأي تعديل علي الاستايل او مظهر الموقع ككل فمثلا عليك وقتها ان تقوم بتغيير قالب الاعلانات الخاص بال H1 مثلا في كل صفحة من صفحات الموقع وبالطبع هنا ندرك الميزة الاخري لملفات الانماط الخارجية حيث انها توفر الوقت والمجهود في أن واحد.
صفحات الانماط الخارجية External Style sheets:
صفحة الانماط الخارجية ما هي إلا أنها ملف نصي يحتوي علي كل أنماط لغة ال CSS. ولا تحتوي أبدا علي وسوم خاصة بلغة ال HTML حتي انها لا تشتمل علي الوسم Style بداخلها. بالاضافة عند حفظها وتسميتها غالبا ما تأخذ الامتداد (filename.css) ويمكنك ان تقوم بتسمية الملف بأي اسم تريده ولكنه يجب أن يكون اسم وصفي ذو معني واضح من الهدف منه او الوظائف التي سوف يقوم بها فمثلا (print.css) هو اسم يليق بملف الانماط الخاص بالتكويد اللازم للطباعة، وكذلك مثلا (form.css) فهو ملف الاستايل الخاص بتنسيق الصيغ والذي يتم ربطة بصفحة ويب تحتوي علي صيغة لتنسيقها.
ملحوظة: إذا كان لديك صفحة ويب بها أنماط داخلية ولكنك تريد أن تحولها إلي صفحة أنماط خارجية فقط عليك بأن تقوم بقص جميع الانماط الموجوده في الصفحة والتي تقع بين وسمين الافتتاح والاغلاق للوسم Style وهما <style type="text/css"> ، ثم تنشيء ملف نصي جديد وتلصق به أنماط ال CSS ثم تحفظه بإمتداد (.css) علي سبيل المثال (global.css) ثم تقوم بربطه بصفحة الويب مستخدما احد الطرق في ربط ملفات الانماط الخارجية بصفحة الويب والتي سوف يتم شرحها.
بمجرد ان تنشيء ملف ال CSS الخارجي يجب عليك ان تربطه بصفحة الويب التي ترغب في تنسيقها. يمكن لك ان تربطها بالصفحة مستخدما الوسم <link> او مستخدما الخاصية الموجوده في ال CSS وهي (@import) والتي غالبا ما تقوم بنفس الشيء تماما مثل وسم ال <link> وكل المتصفحات الان تدعم هاتين الطريقتين في ربط صفحة الانماط الخارجية بصفحات الويب لذلك.
ربط صفحات الانماط بصفحات الويب مستخدما ال HTML:
اكثر الطرق شيوعا لربط ملف الانماط الخارجي بصفحة الويب ان تستخدم وسم <link> ويكتب الوسم بطريقة مختلفة قليلا تعتمد علي نسخة اصدار ال HTML الذي تبني به صفحة ال HTML فعلي سبيل المثال لو كانت النسخة بها اصدار HTML سوف يكون الوسم كالتالي:
اما لوكانت النسخه تم تكويدها باستخدام اصدار من XHTML فسوف يكون هذا الوسم كالتالي:
والاختلاف الوحيد في الطريقة التي يتم إغلاق الوسم بها وبما ان وسم ال <link> هو وسم فارغ لا يحتوي علي اي شيء ويتكون فقط من وسم بداية وليس له وسم نهاية لذلك فهو يعتبر وسم ذاتي الاغلاق كما ذكرنا في شرح دروس ال html. لذلك في اصدار XHTML تحتاج لان تضع مسافه ثم الشرطة المائلة قبل علامة أكبر من التي تغلق بها الوسم عكس اصدار ال HTML والذي لا تحتاج فيه لهذه المسافة ولا للشرطة المائلة لكي تغلق الوسم.
خواص هذا الوسم وهي :
(rel="stylesheet") : وهي خاصية تشتمل علي نوع الرابط وهي في هذه الحالة تخبرنا انه سوف يتم الربط مع ملف خاص بلغة ال CSS .
(type="text/css"): خاصية النوع تخبر المتصفح بأي نوع من البينات يمكن ان يتوقعها من هذا الملف وهي في هذه الحالة ملف نصي يحتوي علي لغة ال CSS.
(href="css/global.css"): وهذه الخاصية تقوم بتحديد المكان الموجود فيه الملف الخارجي والذي سوف يتم الربط به وقيمة هذه الخاصية هي عبارة عن رابط او وصلة والتي سوف تختلف من مكان لإخر معتمدا في هذه الحالة علي المكان الموجود فيه ملف ال CSS وهذه الخاصية تعمل بالضبط خاصية ال (src="url") في وسم ال <img> عندما تضيف صوره الي صفحة الويب او لنفس الخاصية وسم الرابط <a> والمستخدم لللإشارة غلي صفحة أخري.
(media="screen"): وتستخدم هذه الخاصية لتحديد ما اذا كان ملف الانماط الخارجية خاص بشاشة العرض علي الكمبيوتر. وذلك بالطبع لإن لهذه الخاصية قيم أخري فلو وضعها لها قيمة (print) فهي تعني أن هذا الملف خاص بطباعة صفحة الويب وما سوف يظهر علي أوراق الطباعة من تنسيق للصفحة. ولها قيم أخري سنتعرض لها فيما بعد
ملحوظه مهمة يمكنك ان تستخدم هذه الطريقة في ربط أكثر من ملف من لغة CSS بصفحة واحده من صفحات الويب بإضافة بتكرار الوسم أكثر من مرة حسب عدد ملفات ال CSS كل مرة نختار فيها ملف يختلف عن الذي قبله وتعتبر هذه الطريقة من الطريق الجيدة في تنظيم ملفات ال CSS كما سنشرح ذلك بالتفصيل فيما بعد ان شاء الله.
ربط صفحات الانماط مستخدما طريقة ال CSS:
تحتوي لغة ال CSS علي خاصية ضمنية تعتبر من مكونات اللغة اصلا تستخدم لإضافة ملف انماط خارجي الي الانماط الداخلية في ملف أخر وهي (@import) وتقوم بإضافتها مباشرة داخل وسم ال <style> في لغة HTML. كالتالي:
وعلي خلاف ال HTML في طريقتها باستخدام وسم <link> فإن ال CSS تستخدم خاصية (@import) وتستخدم في هذا الوقت (url) بدلا من (href) ويعتبر المسار هنا في هذا المثال هو (css/global.css) ووضعه داخل علامة الاقتباس Parentheses يعتبر اختياريا او بمعني اخر لايهم ان وضعته بين علامات الاقتباس او تركته بدون علامة اقتباس.
ايضا كما يمكن ان يتكرر وسم ال <link> اكثر من مرة في صفحة الويب لربط اكثر من ملف انماط خارجي بالصفحة يمكنك ان تفعل نفس الشيء باستخدام الخاصية ال (@import) في ال CSS للربط مع أكثر من ملف بلغة ال CSS كما في المثال التالي:
يمكن لك ان تضيف نمط جديد في صفحة الويب داخل وسم ال <style> تماما بعد ان السطر الذي يحتوي علي الرابط مع ملف CSS خارجي والذي في هذه الحالة يطبق علي صفحة واحده وهي نفس الصفحة التي تستخدم ايضا ملف الانماط الخارجي.
مثال:
من الناحية الفنية يجب ان يتم وضع جميع سطور الخاصية (@import) قبل أي خواص اخري في ملف الانماط الداخلي كما هو مبين بالمثال السابق ولكن لا بأس اذا كنت قد نسيت خاصية مثلا وبالرغم من انه من المفروض ان يتجاهل المتصفح أي أنماط تستوردها بعد هذه استايل معين. ولكن معظم المتصفحات الان تتجاهل هذه الخاصية.
ملحوظه مهمة : بعد عديد من النقاشات تعتبر افضل الطرق لإستخدامها في ربط ملفات الانماط الخارجية بصفحات الويب هي ان تستخدم طريقة ال HTML وهي استخدام وسم <link> في ربط ملف الانماط بصفحة الويب.
خاصية ال Style:
وهي خاصيه يمكن أن تلحق بوسوم لغة ال (X)HTML وظيفتها هي ان تخبر المتصفح بأن ما يحتويه هو كود خاص بال CSS وليس ال HTML وإنشاء ملف استايل او نمط داخلي هو بنفس السهولة كما لو كنت تكتب النمط داخل الوسوم نفسها.
:Inline Style
وهي طريقة تستخدم لإضافة معلومات الانماط داخل الوسم نفسه باستخدام الخاصية Style واعطاءها قيمة معينة تمثل احد أنماط لغة CSS وبدون الحاجه لإنشاء وسم الStyle في رأس الصفحة. ولكن نادرا ما ينصح باتباع هذه الطريقة ولا يلجأ إليه إلا من يجهل ببعض أساسيات اللغة كما سنأتي للشرح والتعرض لهذا فيما دروس ال CSS القادمة إن شاء الله.
خاصية ال Style و Inline Style
وهي تستخدم لإنشاء نوع ال Inline Style ويمكن إلحاقها في وسم البداية لمعظم وسوم المحتويات في لغة ال HTML مثل وسم الفقرة <P> و وسم العناوين <h1> ووسم القائمة <ol> أو <ul> كما في المثال التالي
Page Title
يلاحظ من الكود انه يلزم لكي نخبر المتصفح بأن يظهر وسم معين بطريقة معينة ونقوم بتنسيقة انه يلزم لنا ان نكتب نمط لغة ال CSS في كل وسم من وسوم ال HTML لذلك لا يعتبر استخدام هذه النوع من الانماط Inline Style إلا في حالات نادرة جدا سوف يأتي ذكرها إن شاء الله فيما بعد هذه الدروس.
ليست هناك تعليقات:
إرسال تعليق