للفائدة

Mon, 03 Sep 2007 14:56:00 GMT

كيف تعمل تقنية صفحات الأنماط الانسيابية CSS-Cascading Style Sheets؟

نشر بتاريخ August 1st, 2007 بواسطة Walidov

بسم الله الرحمن الرحيم

بعد أن قمنا بشرح تقنية 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” وهو رمز اللون الأزرق.

ملخص ماسبق ، أننا نقوم بتحديد جزء لنقوم بالتحكم بخصائصه ، ثم نضع داخل أقواس معقوفة {} الخصائص وكل خاصية نحدد قيمتها ، دائما توضع نقطتين فوق بعض “:” بين الخاصية والقيمة تنتهي كل خاصية بفاصلة منقوطة “;” في حالة تعديل أكثر من خاصية كما في المثال التالي :

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 الذي سنقوم بعمله بهذه الصفحة :

<html>
  <head>
    <title>Walidov</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>هذه هي الصفحة الرئيسية</h1>
  </body>
</html>

ثانيا : أنشئ صفحة content.html
هذه صفحة أخرى ولكن فيها محتوى مختلف عن الصفحة الأولى ، ولكن الشيء المشترك الوحيد هو أننا سنربط نفس ملف الستايل CSS بهذه الصفحة أيضا :

<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]

ضمن القسم : دروس CSS | (لم يقيم بعد) تحميل ... | 383 مشاهدة |

من بين

عشقتكِ ..

الملايين

وأختاركِ قلبي دون الآخرين

وأدخلتكِ دنياي..منذ سنينْ

وأنت تعرفين ْ..!

وأضحى الكون بوجودكِ .. نوراً وتزيينْ

وعشقت فيكِ عيناكِ الكحيلتين

فارحمي قلبي العاشق المسكين

أنتِ يا جميلتي التي عشقها فكري وأختارها

من بين الملايين ..

فلذكراك دوما أشدو قصائدي ..

حباً وعشقاً فيك .. يا نبع الحنين

وأدعو الله دوما أن نبقى للأبد ..حبيبينْ

فحبك أجعله درعا منيعاً من الحاسدينْ

وأحبكِ حباً صدقيني ..

لو دخلتي قلبي لسمعته يناديكِ .. منذ سنينْ

فسبحان من خلقك في الكون ..

فهو أعظم الخالقين ْ..

سحر الكلمات: تعلم شى ينفعك

للفائدة

كيف تعمل تقنية صفحات الأنماط الانسيابية CSS-Cascading Style Sheets؟