بسم الله الرحمن الرحيم
بعد أن قمنا بشرح تقنية CSS صفحات الانماط الانسيابية ، وبينا أهميتها وفوائدها من خلال هذا الموضوع:
http://www.walidov.com/web-development/client-side-coding/what-is-css.html
سنتعلم معا في هذا الدرس كيف تعمل تقنية صفحات الأنماط الانسيابية “CSS” أو Cascading Style Sheets ، وسنقوم معا بإنشاء أول صفحة انماط انسيابية ، حيث سأشرح لكم أساسيات هذه اللغة وكيف نربط بينها وبين صفحات HTML.
إن أغلب أكواد (CSS) شبيهة جدا بأكواد HTML ، لذلك إذا كانت لديك خلفية في لغة HTML ستكون أكواد CSS مألوفة جدا لديك ، لأنه كما ذكرنا بموضوعنا السابق ، فإن لغة CSS هي لغة موازية للغة HTML أي أنها طريقة ثانية أكثر تقدما لتطبيق أوامر HTML على الصفحات.
- البنية الأساسية للغة CSS :
على فرض أننا نود عمل صفحة لون خلفيتها أزرق ، سنقوم بعملها بلغة HTML ولغة CSS لتروا الفرق بينهما :
في حال استخدمنا لغة HTML سيكون الكود شكله كما يلي :
1
|
<body bgcolor="#0000FF"> |
ولكن في حال استخدمنا لغة CSS سيكون الكود شكله كما يلي :
1
|
body { background-color: #0000FF; } |
كما تلاحظون فإن الأكواد متشابهة إلى حد كبير ، والمثال السابق يظهر البنية الأساسية للغة CSS ، أي الطريقة التي يتم فيها كتابة أكواد CSS وسنشرحها في المخطط التالي :
1
|
selector { property: value; } |
- المحدد “selector” :
وهو الذي يحدد أي جزء من كود HTML سيتم التحكم به وتغييره بواسطة الملف CSS ، لأنه كما قلنا فإن أكواد CSS تكون عادة مكتوبة في ملف مستقل ، ثم نربطها بعدد لا نهائي من ملفات HTML ، حتى نقوم بتغيير خصائص جميع هذه الصفحات بواسطة تعديل ملف CSS.
في مثالنا السابق : المحدد هو الـ”body” أي جسم الصفحة ، يعني أننا قمنا بتحديد جسم الصفحة “body” لكي نقوم بتغيير خصائصه.
- الخاصية “property” :
هي خصائص الجزء المحدد بواسطة “المحدد” والتي سنقوم بتغيير قيمها حتى يظهر الجزء المحدد بالشكل المطلوب.
في مثالنا السابق : الخاصية كانت لون خلفية الصفحة “background-color” ، أي أننا سنقوم بتغيير لون الخلفية لجسم الصفحة “body”.
- القيمة “value” :
وهي قيمة الخاصية التي سنقوم بتعديلها ، في مثالنا السابق : قمنا بتحديد القيمة “#0000FF” وهو رمز اللون الأزرق.
ملخص ماسبق ، أننا نقوم بتحديد جزء لنقوم بالتحكم بخصائصه ، ثم نضع داخل أقواس معقوفة {} الخصائص وكل خاصية نحدد قيمتها ، دائما توضع نقطتين فوق بعض “:” بين الخاصية والقيمة تنتهي كل خاصية بفاصلة منقوطة “;” في حالة تعديل أكثر من خاصية كما في المثال التالي :
1
2
3
4
|
body {
font-size: 14px;
background-color: #0000FF;
} |
في هذا المثال قمنا بتعديل خاصيتين ، لون الخلفية وحجم الخط ، لاحظ أنه وضعنا كل خاصية في سطر مستقل ، هذا أفضل للقراءة في حال أردت التعديل لاحقا ، ولكنه ليس ضروري أي أنه يمكنك وضع جميع الخصائص في سطر واحد كما يلي :
1
|
body { font-size: 14px; background-color: #0000FF; } |
- كيف نربط ملف CSS بصفحات HTML؟
توجد هناك 3 طرق لربط ملفات CSS بصفحات HTML إلا أنه طريقة واحدة فقط منها هي الفعالة وهي الوحيدة التي تحقق لنا فوائد استخدام التقنية ، سنشرح لكم الطرق الثلاثة :
الطريقة الأولى : الطريقة المباشرة “In-Line” أو كما تسمى (the attribute style)
هذه الطريقة تعتمد على إضافة كودات CSS مباشرة على كودات HTML ، أشبه ما تكون مزج بين HTML و CSS باستخدام الخاصية “style” ، الأمور ستكون أوضح بعد مشاهدة المثال التالي :
كما تشاهدون أننا استخدمنا كود CSS داخل كود HTML ، وذلك باستخدام الخاصية style و يكون كود CSS هو القيمة لهذه الخاصية.
الطريقة الثانية : الداخلية أو ما يسمى (the tag style)
هذه هي الطريقة الثانية ، وهي أيضا تكتب داخل ملف HTML ولكن بشكل مستقل عن أكواد HTML وذلك بكتابتها في وسم مستقل ألا وهو : <style></style> يوضع في الهيدر <head></head> الخاص بالصفحة ، كما يلي :
فكما نرى ، اننا نكتب كود CSS كامل ومستقل ، ولكن نضعه ضمن هيدر الصفحة ، ومشكلة هذه الطريقة أننا لا نستطيع التحكم سوى بالصفحة المكتوب فيها الكود.
الطريقة الثالثة : الخارجية أو ما يسمى (link to a style sheet)
وهي الطريقة الصحيحة والمثلى لتطبيق تقنية CSS والاستفادة من جميع مميزاتها ، وهي تعتمد على كتابة كود CSS في ملف مستقل ينتهي بنسق .css على سبيل المثال : style.css ، هذا الملف سنكتب في الكود الذي سيتحكم في خصائص صفحات الـHTML ، ثم بعد ذلك نربط هذا الملف بجميع صفحات HTML بواسطة كود الربط التالي :
1
|
<link rel="stylesheet" type="text/css" href="style.css" /> |
هذا السطر يجب كتابته في أي صفحة HTML نود أن نربط بها ملف الـCSS بحيث يتم تطبيق جميع الخصائص المكتوبة في ملف الـCSS على صفحة HTML ، لاحظ ان اسم ملف الـCSS هو : style.css ، فلو غيرت اسم ملف الـCSS عليك تغيير الاسم أيضا في سطر الربط.
ويجب أن يتم وضع سطر الربط في صفحة HTML بين الوسمين <head></head> أي في هيدر الصفحة كما يلي :
بهذه الطريقة يمكن ربط عدد لانهائي من ملفات HTML بنفس ملف الستايل style.css ، ومن ثم نستطيع تعديل شكل جميع صفحات الـHTML بواسطة تعديل ملف واحد فقط ألا وهو ملف الـCSS ، كما هو موضح بالصورة :
إلى هنا انتهى درسنا ، دعونا نقم بعمل تطبيق سريع لهذا الدرس ..
أولا : أنشئ صفحة index.html
قم بعمل صفحة HTML وضع فيها الكود التالي ، وانتبه إلى سطر الربط ، والذي سيربط ملف الستايل CSS الذي سنقوم بعمله بهذه الصفحة :
1
2
3
4
5
6
7
8
9
|
<html>
<head>
<title>Walidov</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>هذه هي الصفحة الرئيسية</h1>
</body>
</html> |
ثانيا : أنشئ صفحة content.html
هذه صفحة أخرى ولكن فيها محتوى مختلف عن الصفحة الأولى ، ولكن الشيء المشترك الوحيد هو أننا سنربط نفس ملف الستايل CSS بهذه الصفحة أيضا :
1
2
3
4
5
6
7
8
9
|
<html>
<head>
<title>Walidov</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>هذه هي الصفحة الفرعية للمحتويات الثانوية</h1>
</body>
</html> |
أخيرا : أنشئ ملف style.css
والآن سنقوم بكتابة كود CSS وحفظه في ملف مستقل :
1
2
3
|
body {
background-color: #0000FF;
} |
تأكد أن تضع الملفات الثلاثة في نفس المجلد ، سيكون مخطط الصفحات كما يلي :
قم الآن بفتح الصفحات index.html و content.html وشاهد أول تطبيق عملي لتقنية CSS ، مبروك لقد نجحت !!
قم بتغيير اللون من صفحة style.css ، وشاهد أن اللون تغير في الصفحتين معا ، أليس ذلك مذهلا ؟!؟ نعم إنه سحر لغة CSS.
يمكنك تحميل ملفات المثال :
[download=1]
نشر بتاريخ August 1st, 2007 
بواسطة Walidov 
تحميل ... | 383 مشاهدة | 
