صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 15 من 16

الموضوع: مقدمة في لغة صفحات الانماط الانسيابية CSS-Cascading Style Sheets

  1. #1
    عضو نشيط جدا
    تاريخ التسجيل
    Oct 2005
    المشاركات
    482

    مقدمة في لغة صفحات الانماط الانسيابية CSS-Cascading Style Sheets



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

    إن عصر تصميم المواقع بلغة HTML قد ولى ، والآن من يصمم المواقع بدون استخدام صفحات الانماط الانسيابية CSS هو باعتقادي “أمّي” في علم تصميم المواقع ، لذلك على جميع مصممي المواقع بالطريقة التقليدية تعلم هذه التقنية لمواكبة التطور السريع في علم تصميم المواقع.

    ماهي لغة CSS؟

    إن كلمة CSS قادمة من الحروف الأولى للجملة : Cascading Style Sheets ، والتي تعني باللغة العربية : صفحات الانماط الانسيابية ، تم اختراع لغة CSS عام 1995 لكن كان أول ظهور رسمي للغة CSS عام 1996 عبر منظمة W3C وهي الإصدارة CSS1 ، ثم في عام 1998 أصدرت الإصدارة CSS2 ، ثم صدرت آخر إصدارة عام 2003 وهي CSS2.1 وهي اللغة المتداولة الآن ..

    توجد هناك إصدارة جديدة تحت الإنشاء ولا يعرف موعد إطلاقها وهي CSS3.

    إن لغة CSS هي لغة موازية للغة HTML مبدأ عملها بسيط جدا ومعروف ، وهو تحديد شكل افتراضي وحفظه في صفحة مستقلة ، ويتم تطبيق هذا الشكل على عدد لا نهائي من صفحات HTML والهدف الرئيسي منه هو تعديل شكل عدد كبير من صفحات HTML من خلال تعديل ملف واحد فقط.

    باختصار ، لغة CSS هي مجموعة من الأوامر المكتوبة في ملف مستقل-عادة-تتحكم بخصائص HTML والتي تحدد مظهر الصفحة المصممة ، كلون الخط ونوعه وخلفية الصفحة وشكل الجداول والإطارات، إلخ..

    ماذا تعني صفحات الانماط الانسيابية؟

    انظر إلى الصورة التالية :



    يمكن بسهولة أن تفهم الجملة “صفحات الانماط الانسيابية” أو “Cascading Style Sheets” إذا عرفت الأنواع الثلاثة للـ CSS ألا وهي :

    1. صفحة نمط المتصفح :
    وهي الشكل الإفتراضي لظهور صفحات HTML في المتصفحات ، على سبيل المثال : لون الخلفية أبيض ، لون الخط أسود ، لون الروابط أزرق ، لون الروابط المزارة بنفسجي ، إلخ ..
    2. صفحة نمط المستخدم :
    وهي الشكل الافتراضي للمستخدم ، يعني مثلا لو قمت بتحميل ثيم معين للويندوز ، سوف تعرض صفحات المواقع بشكل مختلف
    3. صفحة نمط المحرر :
    ؤهي الشكل الذي يقوم مصمم الموقع بتحديده وحفظه على شكل صفحة .css ويتحكم بشكل الموقع من خلاله.

    والآن نأتي للمصطلح (صفحات الانماط الانسيابية) لنقم بشرحه .. إن الأنواع الثلاثة السابقة لها أولوية للظهور ، فالنوع الثالث (صفحة نمط المحرر) له الأولوية الأولى للظهور ، فمهما كان نمط المستخدم والمتصفح ، سيظهر الشكل المحدد في (صفحة نمط المحرر) ، ولكن ماذا لو كانت هناك خيارات لم يقم مصمم الموقع بتحديدها في (صفحة نمط المحرر) ، سيقوم المتصفح بالقفز إلى (صفحة نمط المستخدم) وعرض الشكل المحدد فيها بغض النظر عن نمط المتصفح ، لأن للمستخدم الأولوية الثانية بعد المحرر ، ويأتي أخيرا (صفحة نمط المتصفح) فلو كانت هناك خيارات غير محددة في أنماط المحرر والمستخدم ، ستعرض خيارات نمط المتصفح.

    ولذلك سميت (صفحات الانماط الانسيابية) ، لأن الشكل الصفحة المعروضة تأخذ الشكل المحدد في الصفحات الثلاث المذكورة بشكل متعاقب ، تأخذ خيارات (صفحة نمط المحرر) فإن لم تكن محددة تأخذ (صفحة نمط المستخدم) فإن لم تكن محددة تأخذ (صفحة نمط المتصفح).

    ماهي فوائد لغة CSS؟

    هناك خمسة أسباب رئيسية تجبرك على التصميم بتقنية CSS:

    1. سهولة التعديل والصيانة :
    إن أهم ميزة لـcss هي أنك تستطيع تعديل أو صيانة عدد كبير جدا من ملفات HTML من خلال تعديل ملف واحد فقط هو ملف css.
    2. سهولة الوصول :
    إن استخدام css يسهل عملية الوصول للمعلومة أو النقطة المرغوبة في صفحة HTML على الطرفين ، المستخدم والمتصفح ، فصفحات html ستكون تقريبا شبه خالية من الوسوم لأنها ستكون مخزنه في ملف css ممايجعل الصفحة تحتوي على المحتوى والمعلومات فقط ، فيصبح أسهل على الكمبيوتر أو المتصفح الوصول وعرض الملعومات.
    3. تغيير بيئة العرض :
    أعني بذلك أن بيئة المتصفح تختلف عن بيئة الطباعة وتختلف عن بيئة الكمبيوتر الكفي ، فأنت تحتاج لعرض نفس الصفحة والمحتويات ولكن في عدة بيئات مختلفة ، فبدلا من تغيير محتويات html يمكنك تغيير فقط طريقة العرض لتوائم البيئة المستهدفة.
    4. تقليل حجم الملفات :
    إن استخدام ملف css يغنيك عن استخدام اكواد كثيرة جدا في ملفات html كشكل الخط ولونه ولون الخلفية وصورة الخلفية والجداول وصورة الإزاحة والكثير الكثير من أكواد html كلها تكون محفوظة في ملف واحد ألا وهو css ، مما يتسبب في هبوط حاد في حجم ملفات html مما يقلل الضغط على السيرفر ويسرع العرض بشكل كبير.
    5. سيطرة أكثر على الكتابة :
    يمكنك التحكم بالكتابة والنصوص في صفحات html بشكل أوسع من خلال css ، فيمكنك التحكم بالفراغات بين السطور والكلمات والحروف ، وتغيير أنماط الحروف من كبيرة إلى صغيرة والعكس.

    في المقال القادم ، سنشرح إن شاء الله كيفية استخدام هذه التقنية بشكل مبسط.

    ودمتم بود ،،

    المصدر:
    http://www.walidov.com/web-developme...at-is-css.html

    لا تبخلوا علي بزيارة المدونة ..





    __________________
    شبكة عرب كرنش نت
    أول وأكبر مجتمع تقني يدعم ويجمع المبادرين والتقنيين والممولين والعلماء والشركات التقنية في العالم العربي ..


  2. #2
    خبير JavaScript
    تاريخ التسجيل
    Jul 2002
    المشاركات
    2,920


    موضوع مميز
    جزاك الله خيرا على الدرس، ننتظر درسك المقبل






  3. #3
    عضو نشيط جدا
    تاريخ التسجيل
    Oct 2005
    المشاركات
    482


    أشكرك مشرفنا العزيز على مرورك وتثبيت الموضوع ..

    إن شاء الله الدرس القادم قريبا جدا ..





    __________________
    شبكة عرب كرنش نت
    أول وأكبر مجتمع تقني يدعم ويجمع المبادرين والتقنيين والممولين والعلماء والشركات التقنية في العالم العربي ..

  4. #4


    هلا walidov
    موضوع مميز من شخص مميز
    يعطيك العافية وموضوع جميل جداً عن لغتي المفضلة
    ننتظر المقال القادم بإذن الله

    تحيـاتي ...





    __________________
    كذب من قال الدنيا هي نفسها الدنيا بعيني من بعدك ياأبو محمد
    ﴿ كُلُّ نَفْسٍ ذَآئِقَةُ الْمَوْتِ ... ﴾ رحمة الله عليك
    *عدم ردي على بعض الرسائل لايعني تجاهلي لها

  5. #5
    عضو نشيط جدا
    تاريخ التسجيل
    Oct 2005
    المشاركات
    482


    أخي الحبيب محمد 902 ..

    أنت المميز أخي !! يشرفني جدا مرورك على موضوعي المتواضع ..

    وطبعا هذه اللغة يجب أن تكون مفضلة لنا جميعا





    __________________
    شبكة عرب كرنش نت
    أول وأكبر مجتمع تقني يدعم ويجمع المبادرين والتقنيين والممولين والعلماء والشركات التقنية في العالم العربي ..

  6. #6
    عضو فعال
    تاريخ التسجيل
    May 2006
    المشاركات
    1,477


    وليدوف

    بارك الله فيك .. بصراحه محتاجين دروس عربية في هذه اللغة .. لا الدروس العربية قليله وماهي كافيه





    __________________
    استمع واشكرني

  7. #7
    عضو نشيط جدا
    تاريخ التسجيل
    Oct 2005
    المشاركات
    482


    الأخ هاجس ليل ..

    أشكرك على ردك الجميل .. وإن شاء الله سأكتب في هذه اللغة حتى أغطيها كلها بحول الله ..





    __________________
    شبكة عرب كرنش نت
    أول وأكبر مجتمع تقني يدعم ويجمع المبادرين والتقنيين والممولين والعلماء والشركات التقنية في العالم العربي ..



  8. موضوع حلو جدا

    ومفيد وممتع

    ننتظر الدرس الثاني ..

    شكرا لك ..





    __________________
    ownersınnı
    ALdiraZi BLoOoG | Contact Me | lt.tl - shorten your URL



  9. جزاك الله خيراً أخ walidov مقدمة مهمه مفيدة

    ولكن أراك تستخدم كثيراً كلمة "لغة css" فهل تعتبر css لغه بحد ذاتها لها نفس قواعد لغات البرمجة المختلفة

    أنت قلت css هي مجموعة من الأوامر المكتوبة في ملف مستقل-عادة-تتحكم بخصائص HTML والتي تحدد مظهر الصفحة المصممة ، كلون الخط ونوعه وخلفية الصفحة وشكل الجداول والإطارات، إلخ..


    إذن فالأصح أن نطلق عليها تقنيه مساعدة تتهتم بتحديد شكل وتصميم المواقع ( تصميم وتنسيق ) وليست لغه ـ فلغة كلمة كبيرة عليها وقد يخشي تعلمها المبتدئ لانه سيتوقع أن عليه حفظ مئات الأسطر والأوامر وكثيراَ من التعقيد الموجود بلغات البرمجة الأخرى وهى عكس ذلك تماماً وتعلمها سهل


    ولك كل التحيه وفي إنتظار الدرس القادم ...





    __________________
    كتوم في المصنع {...}

  10. #10
    عضو فعال
    تاريخ التسجيل
    May 2006
    المشاركات
    1,477


    ca2oom
    بارك الله فيك اضافه اعتقد في محلها ..

    عندي سؤال ؟ محيرني ..

    تعودة في التصاميم القديمه اني اعمل شكلة الصفحه او الهيدر في الفوتوشوب وارجع لفرنت بيج .. واعدلها هناكـ

    لكن التخطيط لتصميم يكون من خلال الفوتوشوب .. الآن في مجال css كيف رايح يكون التصميم يعني

    من وين البداية ..





    __________________
    استمع واشكرني

  11. #11
    عضو سوبر نشيط
    تاريخ التسجيل
    Apr 2007
    المشاركات
    988


    walidov

    الله يعافيك ..
    مقال مفيد جدا ً .. تسلم .






  12. #12
    عضو نشيط جدا
    تاريخ التسجيل
    Oct 2005
    المشاركات
    482

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



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

    بعد أن قمنا بشرح تقنية CSS صفحات الانماط الانسيابية ، وبينا أهميتها وفوائدها من خلال هذا الموضوع ، سنتعلم معا في هذا الدرس كيف تعمل تقنية صفحات الأنماط الانسيابية “CSS” أو Cascading Style Sheets ، وسنقوم معا بإنشاء أول صفحة انماط انسيابية ، حيث سأشرح لكم أساسيات هذه اللغة وكيف نربط بينها وبين صفحات HTML.

    إن أغلب أكواد (CSS) شبيهة جدا بأكواد HTML ، لذلك إذا كانت لديك خلفية في لغة HTML ستكون أكواد CSS مألوفة جدا لديك ، لأنه كما ذكرنا بموضوعنا السابق ، فإن لغة CSS هي لغة موازية للغة HTML أي أنها طريقة ثانية أكثر تقدما لتطبيق أوامر HTML على الصفحات.

    * البنية الأساسية للغة CSS :

    على فرض أننا نود عمل صفحة لون خلفيتها أزرق ، سنقوم بعملها بلغة HTML ولغة CSS لتروا الفرق بينهما :

    في حال استخدمنا لغة HTML سيكون الكود شكله كما يلي :

    كود HTML:
    <body bgcolor="#0000FF">
    ولكن في حال استخدمنا لغة CSS سيكون الكود شكله كما يلي :
    كود:
    body { background-color: #0000FF; }
    كما تلاحظون فإن الأكواد متشابهة إلى حد كبير ، والمثال السابق يظهر البنية الأساسية للغة CSS ، أي الطريقة التي يتم فيها كتابة أكواد CSS وسنشرحها في المخطط التالي :

    كود:
    selector { property: value; }

    1. المحدد “selector” :

    وهو الذي يحدد أي جزء من كود HTML سيتم التحكم به وتغييره بواسطة الملف CSS ، لأنه كما قلنا فإن أكواد CSS تكون عادة مكتوبة في ملف مستقل ، ثم نربطها بعدد لا نهائي من ملفات HTML ، حتى نقوم بتغيير خصائص جميع هذه الصفحات بواسطة تعديل ملف CSS.
    في مثالنا السابق : المحدد هو الـ”body” أي جسم الصفحة ، يعني أننا قمنا بتحديد جسم الصفحة “body” لكي نقوم بتغيير خصائصه.
    2. الخاصية “property” :
    هي خصائص الجزء المحدد بواسطة “المحدد” والتي سنقوم بتغيير قيمها حتى يظهر الجزء المحدد بالشكل المطلوب.
    في مثالنا السابق : الخاصية كانت لون خلفية الصفحة “background-color” ، أي أننا سنقوم بتغيير لون الخلفية لجسم الصفحة “body”.
    3. القيمة “value” :
    وهي قيمة الخاصية التي سنقوم بتعديلها ، في مثالنا السابق : قمنا بتحديد القيمة “#0000FF” وهو رمز اللون الأزرق.

    ملخص ماسبق ، أننا نقوم بتحديد جزء لنقوم بالتحكم بخصائصه ، ثم نضع داخل أقواس معقوفة {} الخصائص وكل خاصية نحدد قيمتها ، دائما توضع نقطتين فوق بعض “:” بين الخاصية والقيمة تنتهي كل خاصية بفاصلة منقوطة “;” في حالة تعديل أكثر من خاصية كما في المثال التالي :
    كود HTML:
    body {   
       font-size: 14px;
       background-color: #0000FF;
    }
    في هذا المثال قمنا بتعديل خاصيتين ، لون الخلفية وحجم الخط ، لاحظ أنه وضعنا كل خاصية في سطر مستقل ، هذا أفضل للقراءة في حال أردت التعديل لاحقا ، ولكنه ليس ضروري أي أنه يمكنك وضع جميع الخصائص في سطر واحد كما يلي :

    كود:
    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 بواسطة كود الربط التالي :

    كود HTML:
    <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:
    <html>
      <head>
        <title>Walidov</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
      </head>
      <body>
        <h1>هذه هي الصفحة الرئيسية</h1>
      </body>
    </html>
    ثانيا : أنشئ صفحة content.html
    هذه صفحة أخرى ولكن فيها محتوى مختلف عن الصفحة الأولى ، ولكن الشيء المشترك الوحيد هو أننا سنربط نفس ملف الستايل CSS بهذه الصفحة أيضا :

    كود HTML:
    <html>
      <head>
        <title>Walidov</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
      </head>
      <body>
        <h1>هذه هي الصفحة الفرعية للمحتويات الثانوية</h1>
      </body>
    </html>
    أخيرا : أنشئ ملف style.css
    والآن سنقوم بكتابة كود CSS وحفظه في ملف مستقل :

    كود:
    body {
       background-color: #0000FF;
    }
    تأكد أن تضع الملفات الثلاثة في نفس المجلد ، سيكون مخطط الصفحات كما يلي :



    قم الآن بفتح الصفحات index.html و content.html وشاهد أول تطبيق عملي لتقنية CSS ، مبروك لقد نجحت !!

    قم بتغيير اللون من صفحة style.css ، وشاهد أن اللون تغير في الصفحتين معا ، أليس ذلك مذهلا ؟!؟ نعم إنه سحر لغة CSS.

    المصدر : http://www.walidov.com/web-developme...le-sheets.html





    __________________
    شبكة عرب كرنش نت
    أول وأكبر مجتمع تقني يدعم ويجمع المبادرين والتقنيين والممولين والعلماء والشركات التقنية في العالم العربي ..

  13. #13
    عضو نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    183


    جزاك الله خير





    __________________
    سبحان الله وبحمده سبحان الله العظيم

  14. #14
    عضو جديد
    تاريخ التسجيل
    Aug 2007
    المشاركات
    1


    الصراحة جدا استفدت من الدروس..

    انا كنت اتسأل عن الـ css

    ومع الشرح الرائع اكتشفت انه سبق لي التعامل مع هذه اللغة ..

    عن طريق موقع myspace من خلال صنع ثيمات للصفحات الشخصية ..

    يعطيك العافية ع الشرح السهل والمفيد اخوي وليدوف..






  15. #15
    عضو نشيط
    تاريخ التسجيل
    May 2004
    المشاركات
    210


    مشكور ..

    شرح رائع وسلس وعملي

    في انتظار البقية










ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا|شقق للايجار في الكويت | بيوت للبيع في الكويت | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض