كيف تعمل تقنية صفحات الأنماط الانسيابية CSS-Cascading Style Sheets؟
بسم الله الرحمن الرحيم
بعد أن قمنا بشرح تقنية 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]
Loading ...
أحسنت وبارك الله فيك أخي وليد….
تابع.. جزاك الله خيراً
شكرا لك
درس واضح جدا وطريقة شرح سهلة جدا جدا لذلك أرجوا الإستمرار بالدروس وعدم التوقف كما يفعل البعض ينشر درسين أو ثلاثة ويتوقف !
الأخ الكريم عبدالله خالد : يسرني جدا متابعتك للمدونة ..
———————————
الأخ بدر العازمي : بإذن الله تعالى سأستمر في كتابة الدروس حتى أنتهي تماما من هذه اللغة وبعدها سنبدأ بلغات أخرى إن شاء الله .. أشكرك على تشجيعك وحرصك ..
ماشاء الله أستاذ في الشرح أخوي وليد
شرح بسيط وواضح لجميع النقاط
* همسة:
أتمنى تغيير الخط الخاص بمربع إضافة التعليقات إلى Tahoma أفضل
وفقك الله اخي وليد
اسلوبك جميل وشرحك مبسط
استمر فنحن في انتظارك
كل الشكر لك
بارك الله فيك أخي وليد
و أتمنى أن أتعلم البرمجة على ايديك و تقبلني تلميذ لك .
تسليم اديك و الله يبارك فيك مرة ثانية
الله يوفقك ماشالله عليك
كنت ابحث عن هاللغه وابي اتعلمها لكن ماكان في شرح واضح وابتعدت عنها
لكن معك اخوي وليد الحمدلله فهمت اللغه وطبقتها واتمنى منك الاستمرار
بالشرح ووضع الاكواد اكثر واكثر
بصراحة هدا العمل في مستوى وفقك الله
السلام عليكم ورحمة الله وبركاته
لم أقرأ المقال كاملا بعد
لكن يبدو انه مفيد للغايه
لي عوده ان شاء الله لاستكماله
وعلى العموم: مدونتك محتواها سلس وجميل
وفقك الله
الكود كده مش صح يا فالح
“الكود كده مش صح يا فالح” !!
وما هو الكود الصحيح يا أبو العريف ؟؟
مشاركة رائعة
http://www.css-edge.blogspot.com
مشكوووووور اخوي مره .. ومـاقصرت .. الله يجعله في ميزان حسـناتك@
بارك الله فيك شرح رائع وبسيط
بسم الله الرحمن الرحيم
شكرا لك استاذ على الشرح و نتمنى منك المزيد ان شاء الله
جزاك الله خيرا
اللينك ده غلط
والصح
معلش لو الاقواس مش متظبطة بس انتوا ممكن تفهموها لوحدكم
تسلم الايادى يامان شرح جامد
مرررررررررررة نايس مشكووووووووووور ساعدتني في اختبار بكرة!