سنتعلم معا في هذا الدرس كيف تعمل تقنية
صفحات الأنماط الانسيابية “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.
