سنتعلم معا في هذا الدرس كيف تعمل تقنية
صفحات الأنماط الانسيابية “CSS” أو Cascading Style Sheets ،
وسنقوم معا بإنشاء أول صفحة انماط انسيابية
حيث سأشرح لكم أساسيات هذه اللغة وكيف نربط بينها وبين
صفحات HTML.
إن أغلب أكواد (CSS) شبيهة جدا بأكواد HTML ، لذلك إذا كانت لديك خلفية في لغة HTML ستكون أكواد CSS مألوفة جدا لديك ، لأنه كما ذكرنا بموضوعنا السابق ، فإن لغة CSS هي لغة موازية للغة HTML أي أنها طريقة ثانية أكثر تقدما لتطبيق أوامر HTML على الصفحات.
- البنية الأساسية للغة CSS :
على فرض أننا نود عمل صفحة لون خلفيتها أزرق ، سنقوم بعملها بلغة HTML ولغة CSS لتروا الفرق بينهما :
في حال استخدمنا لغة HTML سيكون الكود شكله كما يلي :
?[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] XML
1
| <body bgcolor="#0000FF"> |
ولكن في حال استخدمنا لغة CSS سيكون الكود شكله كما يلي :
?[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] CSS
1
| body { background-color: #0000FF; } |
كما تلاحظون فإن الأكواد متشابهة إلى حد كبير ، والمثال السابق يظهر البنية الأساسية للغة CSS ، أي الطريقة التي يتم فيها كتابة أكواد CSS وسنشرحها في المخطط التالي :
?[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] CSS
1
| selector { property: value; } |
- المحدد “selector” :
وهو الذي يحدد أي جزء من كود HTML سيتم التحكم به وتغييره بواسطة الملف CSS ، لأنه كما قلنا فإن أكواد CSS تكون عادة مكتوبة في ملف مستقل ، ثم نربطها بعدد لا نهائي من ملفات HTML ، حتى نقوم بتغيير خصائص جميع هذه الصفحات بواسطة تعديل ملف CSS.
في مثالنا السابق : المحدد هو الـ”body” أي جسم الصفحة ، يعني أننا قمنا بتحديد جسم الصفحة “body” لكي نقوم بتغيير خصائصه.
- الخاصية “property” :
هي خصائص الجزء المحدد بواسطة “المحدد” والتي سنقوم بتغيير قيمها حتى يظهر الجزء المحدد بالشكل المطلوب.
في مثالنا السابق : الخاصية كانت لون خلفية الصفحة “background-color” ، أي أننا سنقوم بتغيير لون الخلفية لجسم الصفحة “body”.
- القيمة “value” :
وهي قيمة الخاصية التي سنقوم بتعديلها ، في مثالنا السابق : قمنا بتحديد القيمة “#0000FF” وهو رمز اللون الأزرق.
ملخص ماسبق ، أننا نقوم بتحديد جزء لنقوم بالتحكم بخصائصه ، ثم نضع داخل أقواس معقوفة {} الخصائص وكل خاصية نحدد قيمتها ، دائما توضع نقطتين فوق بعض “:” بين الخاصية والقيمة تنتهي كل خاصية بفاصلة منقوطة “;” في حالة تعديل أكثر من خاصية كما في المثال التالي :
?[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] CSS
1
2
3
4
| body {
font-size: [color:4a97=#933]14px;
background-color: #0000FF;
} |
في هذا المثال قمنا بتعديل خاصيتين ، لون الخلفية وحجم الخط ، لاحظ أنه وضعنا كل خاصية في سطر مستقل ، هذا أفضل للقراءة في حال أردت التعديل لاحقا ، ولكنه ليس ضروري أي أنه يمكنك وضع جميع الخصائص في سطر واحد كما يلي :
?[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] CSS
1
| body { font-size: [color:4a97=#933]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 بواسطة كود الربط التالي :
?[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] XML
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 الذي سنقوم بعمله بهذه الصفحة :
?[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] XML
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 بهذه الصفحة أيضا :
?[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] XML
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 وحفظه في ملف مستقل :
?[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] CSS
1
2
3
| body {
background-color: #0000FF;
} |
تأكد أن تضع الملفات الثلاثة في نفس المجلد ، سيكون مخطط الصفحات كما يلي :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]قم الآن بفتح الصفحات
index.html و
content.html وشاهد أول تطبيق عملي لتقنية CSS ، مبروك لقد نجحت !!
قم بتغيير اللون من صفحة
style.css ، وشاهد أن اللون تغير في الصفحتين معا ، أليس ذلك مذهلا ؟!؟ نعم إنه سحر لغة CSS.
منتديات المناهج والدراسات التعليمية
منتدى المواد العلمية والتعليمية واللغات الأجنبية
1
2010-10-31, 01:21
13
9
4
11
12
