التميز خلال 24 ساعة

 العضو الأكثر نشاطاً هذا اليوم   الموضوع النشط هذا اليوم   المشرف المميز لهذا اليوم 
قريبا شركة عزل اسطح بالفوم بمكة
بقلم : غير مسجل
قريبا


النتائج 1 إلى 7 من 7

الموضوع: دوره الcss( مقدمه+تعريف لها +دروس )

  1. #1

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    35
    المشاركات
    19,272
    معدل تقييم المستوى
    1920

    دوره الcss( مقدمه+تعريف لها +دروس )

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

    جلبت هذه الدورة كهدية مني للأخ العزيز والمشرف القدير ( نبع الوفاء )


    المقدمه
    انشاء الله انا هبدأ فى دوره تعليم ال css وعلى من يريد التسجيل يكتب هنا فى هذا الموضوع
    وانشاء الله كل يوم درس او اتنين وهى سهله جدا جدا ممكن تكون اسهل لغه ممكن تتعلمها
    فى حياتك وطبعا مفيش دلوأتى موقع يخلوا منها ودى مهمه جدا للمبتدأين والمتوسطين والمحترفين
    ايضا وهى من شروط الويب 2 كما تجعل شكل صفحتك جميله ومتناسقه وربنا يعنى عليها.
    المتطلبات: لا يوجد سوى Notepad الذى لا تخلو من اى جهاز.ومعرفه بسيطه ب html


    التعريف
    ماهي CSS:
    اختصار لـ Cascading Style Sheets


    عملها:
    تتحكم صفحات الستايلات بشكل الموقع. وتستخدم لإعطاء الموقع صيغة منتاسقة حيث يمكنها تحديد:
    ذات الخلفية لكل صفحات الموقع من حيث اللون أو الصورة
    اشكال الجداول لتكون متناسقة ومتشابهة في الموقع بأكمله
    بألوان وأشكال وأحجام الخطوط بحيث يتم تحديد ستايل لكل حجم من الخطوط
    تحديد اشكال الديكور الخاصة بالروابط التشعبية Hyperlinks
    تحديد الفعل الذي يحصل عند تحريك الفأرة فوق احد الروابط التشعبية


    اين نكتب اكواد الcss:
    هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.
    الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب.
    مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:
    <link rel="stylesheet" type="text/css" href="style/style.css" />
    لاحظ كيف أن مسار الملف حددناه باستخدام خاصية href.
    هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي <head> و</head> كما في المثال الآتي:
    <html> <head> <title>My ********</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...
    هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
    الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML.
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم.
    لنتدرب على ما تعلمناه حتى الآن.
    جرب بنفسك

    قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات:
    default.htm

    <html> <head> <title>My ********</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>My first stylesheet</h1> </body></html>
    style.css

    body { background-color: #FF0000;}
    الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف.
    قم بفتح ملف default.htmفي متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، مبروك! لقد قمت بإنشاء ملف التصميم الأول!


    منقول للفائدة
    التعديل الأخير تم بواسطة الصـامد ; 16-02-2010 الساعة 11:28 PM
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  2. #2

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    35
    المشاركات
    19,272
    معدل تقييم المستوى
    1920

    رد: دوره الcss( مقدمه+تعريف لها +درس مبسط )

    الـ CSS هو عبارة عن طريقة اضافية تنظم بها تنسيق الصفحات
    بطريقة سهلة ومرنة وتمكنك من عمل الكثير من الأشياء دون التغيير فى اكواد الـ HTML - فى هذا الدرس سنتعلم التالى

    • طريقة صياغة اكواد CSS
    • تحديد العنصر الذى سيطبق عليه التنسيق SELECTOR
    • الخصائص Properties
    • كيفية تطبيق اكواد الـ CSS فى الـ XHTML

    (لكن يجب ان تكون درست دورة الـ HTML قبل البدأ فى هذه الدورة)
    على بركة الله نبدأ

    1. طريقة صياغة اكواد CSS

    اكواد الـ CSS تصاغ بالشكل التالى



    كود:
     
    div{
    font-size: 20px;
    }

    حيث div هو العنصر الذى سيتم تطبيق كود الـ CSS عليه (Selector)
    والـ font-size
    هى الخاصية (Property)* اى الجزء الذى نريد التعامل معه او إعداداه داخل العنصر
    20px هى قيمة الخاصية (Value)

    2. تحديد العنصر الذى سيطبق عليه التنسيق SELECTOR

    الـ Selector هو عبارة عن تحديد الجزء الذى سيتم تطبيق الإعدادات عليه
    كما سبق وقلنا.

    هناك ثلاث انواع للـ Selector

    الـ html selector والذى نحدد به اوسمة من اوسمة الـ html الأساسية
    كالـ div و span و p الخ.
    كامثال



    كود:
     
    p{
    border: #000000 solid 1px;
    }


    والنوعان الأخران هما الـ id's والـ classes

    الـ id يتم وضعها فى عناصر الـ html بالشكل التالى



    كود:
    <span id="span_id">some text here</span>

    (حيث span_id هى الـ id لهذا العنصر* ولا يشترط اسم محدد* المهم ان يكون هذا الأسم متوافق مع معايير قيم الخصائص التى تعلمتها فى الـ html)
    ويتم الوصول لهذا العنصر فى الـ css بالشكل التالى



    كود:
     
    #span_id{
    /*
    css codes goes here
    */
    }


    والـ classes يتم وضعها فى الـ html بالشكل التالى



    كود:
    <span class="span_class">some text</span>


    ونتعامل معها فى الـ css بالشكل التالى



    كود:
     
    .span_class{
    /*
    any css codes goes here
    */
    }


    اذا ماذا اذا كان لدينا الثلاث عناصر التاليين



    كود:
     
    <div class="my_body">main body text</div>
    <span id="simple_line">one line text here</span>
    <p class="paragraph_line">here is an paragraph</p>

    ونريد تعيين لون الخط (مثلا) للون الأحمر للثلاث عناصر
    هل نكتبهم بالشكل التالى



    كود:
     
    .my_body{
    color: red;
    }
    #simple_line{
    color: red;
    }
    .paragraph_line{
    color: red;
    }

    الكود السابق ليس خطأ. لكن بما اننا نسعى للأفضل دائما* فالأفضل يكون كالتالى



    كود:
     
    .my_body* #simple_line* .paragraph_line{
    color: red;
    }



    كما تلاحظ كل ماتحتاجه هو الفصل بين كل معرف للعنصر (سواء كان class او id)
    بعلامة الفاصلة.

    وايضا من ضمن طرق اختيار العناصر* هو الدوران داخل العناصر.

    بمعنى مثلا لدينا التالى



    كود:
     
    <div>any text
    <p>another text inside the div</p>
    </div>
    <p>paragraph outside of the div</p>


    لاحظ اننا لدينا عنصرين p
    احداهما داخل الـ div والأخر خارجه
    العنصر الذى خارج الـ div
    الوصول له هو بالطريقة الأولى التى تم شرحها. لكن ماذا عن الذى داخل الـ div ؟

    هذا هو مايسمى الدوران داخل العناصر ونصل اليه فى الـ css بالشكل التالى



    كود:
     
    div p{
    font-weight: bold;
    }

    بالأول حددنا العنصر الـ parent وهو الـ div
    وبعده الـ child وهو الـ p الذى داخل الـ div

    مع مراعاة ان هذه الطريقة نفصل فيها بين العناصر بالمسافة الفارغة ليس الا.


    3. الخصائص Properties

    الخصائص كما لاحظنا فى الأمثلة التى طرحناها* هى الجزء الذى نريد إعداده للعنصر.

    ورأينا فى الأمثلة السابقة الـ font-size والذى يتم تحديد حجم الخط عن طريقه* والـ font-weight والذى يتم تحديد سمك (عرض) الخط عن طريقه.

    وهناك العديد من الخصائص سندرس كل منهم بالتفصيل فى موضوعات اخرى.


    4. تطبيق الـ CSS فى الـ XHTML

    هناك ثلاث طرق لوضع اكواد الـ CSS بصفحات الـ XHTML

    الطريقة الأولى* وهى Inline CSS

    وهى عن طريق اضافة خاصية Style للعنصر.

    وتكون بالشكل التالى كامثال



    كود:
    <p style="font-size: 20px; color: red;">any text</p>


    حيث قيمة الخاصية style تكون اكواد css صحيحة.

    والطريقة الثانية Embedded Css
    ويتم وضع اكواد الـ css داخل عنصر جديد له الإسم style بمنطقة الـ head بالصفحة
    بالشكل التالى



    كود:
     
    <html>
    <head>
    <title> any title</title>
    <style type="text/css">
    .any_class{
    font-size: 16px;
    text-align: center;
    /*
    etc etc
    */
    }
    </style>




    الطريقة الثالثة والأخيرة.
    هى عن طريق وضع اكواد الـ css بملف له الإمتداد .css
    ونضع اشارة لهذا الملف داخل صفحة الـ html بمنطقة الـ head ايضا
    (كما اتمنى انك تكون لاحظت التعليقات وكيف يتم وضعها فى الـ css)
    ويتم الأمر بالشكل التالى

    كود:

    <link rel=”stylesheet” type=”text/css” href=”somefile.css” />





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

    واعلم انه لم يكن مقدمة حقيقية. لكن هذا لأن الـ css والـ xhtml جزئين مكونين لشئ واحد.
    ومن المحتمل ان اقوم بجعل الدورتين عبارة عن دورة واحدة اذا تطلب الأمر.
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  3. #3

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    35
    المشاركات
    19,272
    معدل تقييم المستوى
    1920

    رد: دوره الcss( مقدمه+تعريف لها +درس مبسط )

    استايل النصوص text styling


    اذا كنت تعرف كيف تبنى النصوص وعناصر النصوص فى الـ XHTML

    فأنت الأن فى الخطوة الصحيحة لبدأ تعلم كيفية تنسيق واستايل النصوص

    بإستخدام الـ CSS

    حقيقة* هناك الكثير من الخصائص الخاصة بالنصوص.

    كانوع الخط* حجم الخط* لون الخط* شكل الخط (عريض* مائل)
    ارتفاع الخط* خط اسفله خط* محاذاة النص افقيا* الخ والكثير من الأمور المشابهة.


    سوف احاول معكم جاهدا ان انهى هذا الدرس بدرس واحد

    واتمنى ان تبذلوا بعض المجهود معى لفهم كل جوانب الدرس.

    وان شاء الله لن يكون شئ صعب.

    نبدأ على بركة الله بأول خاصية من خصائص التعامل مع النصوص

    وهى خاصية الـ font-family

    خاصية الـ font-family تمكنك من تحديد نوع الخط المستخدم (كا انواع الخطوط التى تستخدم فى الويندوز* او برامج التصميم مثل الفوتوشوب* الخ)

    كامثال على استخدام الخاصية



    كود:
     
    h1{
    font-family: tahome;
    }

    الكود اعلاه سوف يجعل اى عنصر h1 يستخدم الخط tahoma

    اذا كان اسم الخط يحتوى على مسافات كالخط (مثلا) Times New Roman

    يجب ان يوضع بين علامتى التنصيص
    كالتالى



    كود:
    font-family: "Times New Roman";


    لكن هناك مشكلة بسيطة فى استخدام خاصية الـ font-family
    وهى ان الخطوط فى الأصل تعتمد على الخطوط المثبتة على جهاز الشخص الذى يتصفح الصفحة.

    بمعنى انه اذا كان هناك صفحة مصممة بإستخدام الخط arial مثلا وهذا النوع من الخط ليس مثبت على جهازى* سوف يتم استبداله بنوع الخط الإفتراضى للمتصفح.

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

    ويتم وضع قائمة الخطوط التى نوفرها واحد تلو الأخر مع الفصل بينهم بعلامة الفاصلة* واذا لم يتمكن المتصفح من العثور على الخط الأول فى جهاز المستخدم* سينتقل للثانى* وان لم يجده سينتقل للثالث. الخ.

    ويتم الأمر بالشكل التالى كامثال


    كود:
     
     
    font-family: tahome* arial* "Times New Roman"* helvetica* sans-serif;
    ويمكنك وضع اى عدد من الخطوط التى ترى انها تناسب تصميمك.

    تلوين النص بإستخدام الخاصية Color
    الخاصية Color عملها هو تحديد لون معين للنص.

    وهى بسيطة جدا وتكتب بالشكل التالى



    كود:
     
    .any_element_class{
    color: #000000;
    }

    حيث الرقم #000000
    هو رقم الـ hex للون الأسود.
    واكواد الألوان يمكنك ان تجدها بكثير من الأدوات* كابرنامج الـ photoshop
    مثلا* او اى برنامج اخر يوفر لك هذه الميزة والبرامج لهذا الأمر لا يوجد اكثر منها.

    يمكنك استخدام نتائج بحث جوجل التالية لترى كم البرامج المتوفرة
    www.google.com/search?hl=en&q=hex+color+picker&btnG=Google+Search &aq=2&oq=hex+col


    حجم الخط فى الـ CSS

    ويتم تحديد حجم الخط عن طريق الخاصية font-size

    معايير حجم الخط تكون اما px او em او %

    كامثال



    كود:
     
    body{
    font-size:4em;
    }
    h1{
    font-size: 16px;
    }
    div span{
    font-size: 80%;
    }



    ارتفاع الخط او مايسمى line-height

    هذه الخاصية تستخدم لتحديد ارتفاع خط النص دون العبث مع حجمه او نوع الخط المستخدم به

    وكامثال على استخدامها



    كود:
     
    h1{
    line-height: 1.5em;
    }


    ماذا عن الخط العريض؟ او الـ bold ؟

    نستطيع جعل خط احد العناصر عريض بإستخدام الخاصية font-weight
    ونضع لها القيمة bold



    كود:
     
    p{
    font-weight: bold;
    }


    اما النص المائل نستخدم له الخاصية font-style



    كود:
     
    p{
    font-style: italic;
    }


    اذن ماذا عن الإختصارات؟
    الإختصارات امر جيد* تسهل علينا مسألة كتابة الأكواد وتعديلها فيما بعد.

    كامثال على ذلك اعداد خط ما مثلا.



    كود:
     
    p{
    font: italic 16px arial* tahoma;
    }

    فى الكود اعلاه* حددنا ستايل الخط هو مائل (italic) وحجمه 16px ونوعه هو arial* tahome

    ماذا عن وضع خط تحت النص؟

    يتم الأمر عن طريق خاصية text-decoration
    وهى تستخدم لوضع/حذف خط تحت النص



    كود:
     
    p{
    text-decoration: underline;
    }

    هذا سيضع خط تحت نص العنصر p

    اما التالى


    كود:
     
    a{
    text-decoration: none;
    }

    سوف يمنع ظهور خط تحت الروابط

    او يمكننا ان نضع خط فى منتصف النص كالتالى



    كود:
     
    p{
    text-decoration:line-through;
    }


    الأبعاد بين الحروف والكلمات.
    احد الخصائص الجيدة (والسيئة فى حالة الإستخدام الخاطئ)

    للتحكم بكافة خصائص النصوص* وهما الخاصيتين letter-spacing و word-spacing
    الأولى* لتحديد الأبعاد بين حروف الكلمات (فى اللغة الإنجليزية* او الحروف التى لا يمكن شبكها بما يليها كاحرف الـ د مثلا فى العربية)
    والثانية* للمسافة بين الكلمات وتحدد قيمتهم بالـ px او em او %


    المحاذاة الأفقية للنص* يمين يسار* وسط.

    يتم الأمر عن طريق الخاصية text-align
    وتكون قيمتها واحدة من الثلاث left* center* right

    واظن معانيهم واضحة ولا تحتاج لشرح.

    اتمنى يكون الدرس شيق وبه شئ من الأفادة ويكون واضح وبسيط بالنسبة لك..

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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  4. #4

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    35
    المشاركات
    19,272
    معدل تقييم المستوى
    1920

    رد: دوره الcss( مقدمه+تعريف لها +درس مبسط )

    التحكم فى الروابط و الخلفيات Backgrounds In CSS


    هناك عدة اشياء بالنسبة للروابط والصور يمكننا إعدادها والتحكم بها
    وسنبدأ بالروابط
    لكن قبل البدأ هناك عدة حالات للروابط وهى


    1. ظهور الروابط للمرة الأولى للزائر (link)
    2. رابط تم زيارته من قبل (visited)
    3. الرابط عند مرور الفأرة عليه (hover)
    4. الرابط عند التركيز عليه (اى تم اختياره* عن طريق الضغط على زر tab مثلا)
    5. الحالة الأخيرة وهى active وهى تحدث عندما يبدأ المستخدم بالضغط على الرابط


    كل هذه الحالات يمكننا التحكم بشكل الروابط عند حدوث اى حالة منهم للرابط.

    ويتم التحكم بهم عن طريق تحديد عنصر الرابط اولا a ثم علامة : ثم اسم الحالة

    واليك الحالات التى تم وصفها اعلاه بنفس الترتيب



    كود:
     
    a:link { color: blue; }
    a:visited { color: purple; }
    a:hover { text-decoration: none; }
    a:focus { color: yellow; }
    a:active { color: red; }


    هكذا استطعنا الوصول لكل حالة* ويمكنك التحكم بها وإعداد نص الروابط كما تم شرح التعامل مع النصوص فى الدرس السابق.


    نذهب للجزء الثانى من الدرس وهو الخلفيات المصورة Backgrounds

    او جعل الصور خلفية للصفحة (او لجزء من الصفحة)

    وهناك عدة خصائص لكل خاصية منهم لها عدة قيم معينة نحن مقيدين بها.

    لكن قبل التطرق لهذه الخاصيات الخاصة بصور الـ backgrounds لنتعرف اولا على الخاصية background لتعيين لون خلفية عادى للصفحة (او لأى جزء منها)



    كود:
     
    p{
    background: #ffffff;
    }

    هكذا تم إعداد لون الخلفية الى اللون الأبيض.

    اذا اردنا وضع صورة يتم الأمر بالشكل التالى



    كود:
     
    p{
    background-image: url(images/background.gif);
    }
    حيث images/background.gif هو مكان الصورة التى ستوضع كاخلفية

    لكن بهذا الشكل الصورة سيتم عرضها بكامل الصفحة (وتكرارها اذا كانت صغيرة)

    لكن مسألة التكرار يمكننا التحكم بها ايضا عن طريق الخاصية background-repeat

    ونضع لها احد القيم التالية

    • repeat-y للتكرار العمودى فقط* يعنى يتم تكرار الصورة بالطول فقط
    • repeat-x للتكرار الأفقى فقط. يتم تكرار الخلفية بالعرض فقط
    • no-repeat يعنى بدون تكرار

    اذا استخدمنا الإختيار الثالث no-repeat هذا يجعلنا ننظر لأمور اخرى.
    بمعنى اذا كانت الصفحة كبيرة جدا (من حيث الطول مثلا)
    اذن عندما يتم الذهاب بإستخدام الـ scroll bar الى الأسفل ستختفى الخلفية.

    ماذا اذا كنا نريدها ان تظل ثابتة؟ يتم الأمر عن طريق الخاصية
    background-attachment واعطائها القيمة fixed

    فيكون كامل كود الخلفية بالشكل التالى


    كود:
     
    background-image: url(images/background.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;



    هكذا ستظل صورة الخلفية ثابتة بمكان واحد حتى اذا ذهبت بالأسكرول بار للأسفل ستتحرك معك الصورة لكنها ستبقة بمكان ما ثابت بالشاشة لا يتغير
    وهو اقصى اليسار العلوى من الشاشة

    لكن هذا المكان للخلفية ربما لا يبدوا جيدا

    ونريد تغييره. يتم الأمر عن طريق الخاصية background-position

    هذه الخاصية فى الحقيقة لها عدة انواع من القيم يمكن ان نضعها لها.
    اول هذه القيم هى
    left و right و top و bottom و center
    واظن كل قيمة معناها واضح.
    لكن يمكننا ايضا ان نضع لها مثلا
    top right يعنى اعلى اليمين او top left اعلى اليسار*
    او bottom left اسفل اليسار او bottom right اسفل اليمين
    او top center او bottom center

    او مثلا center right او center left

    هذا بالنسبة للنوع الأول للقيم التى يمكن ان نضعهم لهذه الخاصية.

    هناك نوع اخر للقيم بإستخدام %

    وبهذا النوع من القيم* يعنى x% من حجم الشاشة
    ويتم الأمر بالشكل التالى كامثال



    كود:
    background-position: x% y%;

    حيث x هو الأبعاد الأفقية بدأ من الجهة اليسرى
    و y هو الأبعاد العمود بدأ من الأعلى

    ويمكنك ايضا اعداد الشئ نفسه بالبيكسل
    مثلا



    كود:
    background-position: 0px 0px;


    هذا سوف يضع الخلفية اعلى اليسار
    وكلما زادت نسبة x كلما ابتعدت الخلفية عن اليسار
    وهكذا بالنسبة لـ y

    كما يمكننا اختصار كل ماسبق بالشكل التالى



    كود:
    background: #ffffff url(images/background.gif) 0px 0px no-repeat;


    حيث القيمة الأولى هى الرقم
    وبعدها مكان خلفية الصورة كما تلاحظ
    بعدها موقع الخلفية بالنسبة للصفحة
    بعدها التحكم فى مسألة التكرار.

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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  5. #5

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    35
    المشاركات
    19,272
    معدل تقييم المستوى
    1920

    رد: دوره الcss( مقدمه+تعريف لها +درس مبسط )

    التحكم فى العناصر المربعة box models in CSS



    تنسيق الصفحة او مايعرف بالـ layout

    قبل دعم الـ CSS كان امر ممل ولا يتم الا بواسطة الـ Tables (او الجداول وسنتعرف عليها فيما بعد)

    لكن بعد دعم الـ CSS المسألة اصبحت اكثر مرونة وسهولة* وسرعة وجمال فى تنسيق الصفحة ايضا.


    كيف يمكن التحكم فى تنسيق الصفحة من خلال الـ CSS ؟

    اجابة هذا السؤال كبيرة نوعا ما* ودرس اليوم هو جزء من الإجابة.

    وسنبدأه بالتحكم بالعناصر التى لها اربعة حدود او مايعرف بالـ box model
    (مثل الـ div مثلا)

    اولا.

    كل عنصر من عناصر الـ HTML يمكننا ان نحدد ابعادها (الإرتفاع والعرض) من خلال الـ CSS
    من خلال الخاصيتين width و height

    كامثال (اظن رأينا اشياء مشابهة مسبقا)



    كود:
     
    p{
    width: 100px;
    height: 75px;
    }


    لكن ماذا اذا كان محتوى العنصر اكبر من الأبعاد التى حددناها له* ومازلنا نرغب ان لا يتم استخدام مساحة اكثر لمحتوى هذا العنصر؟

    (السؤال بصيغة اخرى)
    ماذا اذا كان محتوى العنصر يحتاج الى 200px كاعرض* و 150px ارتفاع* ومازال لدينا رغبة فى ان لا يزيد حجم هذا العنصر عن 100px عرض و 75px ارتفاع لكى يكتمل جمال الصفحة* ونتلاشى ايضا تشويه شكل الصفحة بسبب حجم هذا العنصر؟

    اذا كان العنصر* عبارة عن صورة فـ بالتأكيد ان تعلم كيف تقوم بإعداد ابعاد الصورة* لكن المشكلة اذا كان العنصر نصى.
    لكن الحل ان شاء الله موجود.
    وهو بإستخدام الخاصية overflow
    خاصية الـ overflow لها عدة قيم يمكننا ان نستخدم احداهم.
    وهما كالتالى

    • visible وهذه هى القيمة الإفتراضية* وتعنى ان المحتوى الذى يتطلب مساحة اكبر سيتم عرضه كما هو.
    • hidden وتعنى ان اى محتوى داخل العنصر يحتاج لمزيد من المساحة* سيتم حجبه وعدم عرضه
    • scroll وتعنى ظهور سكرول بار* واذا كان هناك محتوى يتطلب مزيد من المساحة* سيمكن للمستخدم ان يستخدم الأسكرول بار للتجول داخل العنصر ورؤية المتبقى منه.
    • auto وهذه افضل قيمة يمكنك ان تستخدمها* وهى تعنى عدم عرض الـ scroll bar الا عند الحاجة له* اى عندما يكون هناك محتوى يتطلب مساحة اكثر من المساحة التى حددناها للعنصر (سواء كانت المساحة المطلوبة فى العرض او الإرتفاع)
    هذا كان بالنسبة لحجم العنصر.

    ولنلقى الأن نظرة على عدة خصائص للتحكم بمظهر العناصر.


    خاصية Padding


    ترجمة كلمة padding تعنى البطانة.

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

    انظر الصورة التالية فهى توضح المعنى المقصود من محتوى العنصر وحدود العنصر
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    خاصية الـ padding يتفرع منها 5 خصائص وهما كالتالى
    padding-top و padding-left و padding-right و padding-bottom
    وكل منهم يتم تحديد قيمته بالبيكسل او الـ em
    او حتى cm (سم)
    على سبيل المثال اذا كنا نريد العنصر صاحب الكلاس message
    ان يكون هناك مسافة 2 بيكسل بين حدود الجهة اليمنى والمحتوى
    يتم الأمر بالشكل التالى



    كود:
     
    .message{
    padding-right: 2px;
    }

    وهكذا لبقية خصائص الـ padding

    لكن ماذا عن الإختصارات؟ هل يجب عليك ان تكتب الأربع خصائص اذا كنت تريد ان يكون هناك مسافة معينة بين كل حد من حدود العنصر ومحتواه؟
    بالطبع لا* يمكنك استخدام خاصية padding فقط.
    مثلا نريد ان نجعل المسافة 5 بيكسل تفصل بين كل الحدود (الأيمن* والأيسر* والأسفل و الأعلى) وبين المحتوى
    يتم الأمر بمنتهى البساطة بالشكل التالى



    كود:
    padding: 5px;


    وايضا يمكنك استخدام padding فقط لتحديد المسافة بالأربعة حدود (حتى ولو لم تكن المسافات متساوية كما فى المثال الأخير)

    انظر للقائمة التالية لفهم كيفية استخدام padding بمفردها

    • padding: 5px;
      سوف يتم تحديد فارق 5 بيكسل بين كل الحدود والمحتوى
    • padding: 5px 6px;
      سوف يتم وضع مسافة 5 بيكسل* بين الحد الأعلى* والحد الأسفل* ومسافة 6 بيكسل لليمين واليسار
    • padding: 5px 3px 4px;
      سوف يتم وضع مسافة 5 بيكسل تفرق بين الحد الأعلى والمحتوى
      ومسافة 3 بيكسل للحد الأيمن والحد الأيسر
      ومسافة 4 بيكسل للحد السفلى
    • padding: 5px 3px 4px 6px;
      5 بيكسل للحد الأعلى
      3 بيكسل للحد الأيمن
      4 بيكسل للحد السفلى
      6 بيكسل للحد الأيسر

    اتمنى تكون فهمت كل ماهو مطلوب عن خاصية الـ padding


    خاصية border


    خاصية الـ border هى التى تمكنا من التحكم فى ظهور حدود احد العناصر

    اولا نحن نعرف ان حدود اى عنصر هم اربعة (يمين* يسار* اعلى و اسفل)

    وكذلك خاصية الـ border
    وهم
    border-left * border-right* border-top* border-bottom

    وكل خاصية من هذه الخواص* لها اضافتان وهما الـ width (اى سُمك الحد)
    و style اى شكل الحد وايضا color الخاصة بلون الحد.

    لنعد الحد الأسفل لحد العناصر (لنفهم معنى ماسبق بمثال)
    لنفترض ان العنصر الذى سنتعامل معه له الكلاس message



    كود:
     
    .message{
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: red;
    }

    هكذا جعلنا سُمك الحد السفلى 1px وشكله solid (اى خطى فقط)

    بنفس الطريقة الموجودة بالكود الأخير يمكننا اعداد بقية الحدود.
    مايجب توضيحه فقط هو قيمة الخاصية style الخاصة بالحدود

    والقائمة التالية توضح اهم القيم التى يمكن استخدامها

    • none تلغى الحد* اى لا يظهر.
    • solid تجعل الحد عبارة عن خط كاهذا مثلا
      _______________________
    • dotted تجعل الحد عبارة عن خط من النقاط كالتالى مثلا
      ......................
    • dashed تجعل الحد عبارة عن خط مكون من الداش كالتالى مثلا
      --------------
    • double تجعل الحد مكرر* يعنى لو تم وضعها مع القيمة solid مثلا
      تجعل هناك خطين بدلا من خط واحد.
    هذه هى القيم الأكثر استخداما هناك ايضا القيم التالية
    groove و ridge و inset و outset

    وكما فعلنا مع خاصية padding فأنت لست دائما بحاجة لكتابة كل حد بمفرده* او حتى كتابة كل خاصية لكل حد (كالـ width والـ style) لكل حد بمفرده.
    يمكنك تعين الأربع حدود بالشكل التالى كامثال


    كود:
    border: 1px solid #000000;


    هذا سيجعل الأربعة حدود للعنصر لهم اللون الأسود
    ومن النوع solid وسُمكهم هو 1px

    او يمكنك فعل نفس الشئ للحد الأسفل مثلا



    كود:
    border-bottom: #000000 1px dashed;



    اتمنى يكون كل شئ بالنسبة للـ border كان واضحا بإذن الله.


    خاصية Margin


    خاصية الـ margin مثلها تماما مثل الـ padding

    الا فرق واحد جزرى

    الـ padding كما عرفنا
    هى مانحدد بها المسافة بين حدود احد العناصر* ومحتوى هذا العنصر.

    لكن الـ margin
    نحدد بها المسافة بين حدود احد العناصر* وماخارج هذا العنصر (وليس داخله)

    كامثال انظر كود الـ html التالى



    كود:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dev.dd4bb.com CSS testing</title>
     
    </head>
     
    <body>
    <div style="border: red 1px solid;">
    <p style="border: red 1px solid;">
    some text here
    </p>
    </div>
    </body>
    </html>


    لاحظ الجملة
    some text here
    والتى هى داخل العنصر p

    والعنصر p نفسه داخل العنصر div

    لاحظ ان العنصر p يظهر بأقصى يسار العنصر div صحيح؟
    وايضا فى المنتصف (بالنسبة للإرتفاع).

    اذن نجرب التالى




    كود:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dev.dd4bb.com CSS testing</title>
     
    </head>
     
    <body>
    <div style="border: red 1px solid;">
    <p style="border: red 1px solid; margin-top: 0px;">
    some text here
    </p>
    </div>
    </body>
    </html>


    فى الكود الثانى اضفنا للعنصر p الكود التالى
    margin-top: 0px;

    مما يعنى* ان نجعل المسافة بين الحد العلوى للعنصر p وبين ماهو خارج العنصر p (والخارجى فى مثالنا هو العنصر div) هى 0 بيكسل


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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  6. #6

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    35
    المشاركات
    19,272
    معدل تقييم المستوى
    1920

    رد: دوره الcss( مقدمه+تعريف لها +دروس )

    التحكم فى العناصر المربعة box model display & position




    درسنا الكثير فى الدرس السابق عن طرق التحكم بمظهر
    العناصر المربعة box models والتحكم بأبعاده

    وانهينا الدرس بتعريف خاصية الـ margin

    قبل ان نكمل فى استعراض خصائص التحكم بتنسيق هذه العناصر (من حيث مكانها بالصفحة)

    سوف نلقى نظرة على خاصية الـ display وإعدادتها.


    كما تعرف عن عناصر الـ XHTML

    انها تنقسم الى نوعين block و inline
    النوع الأول (من امثاله الـ p و div)

    يتم اضافة سطر فارغ قبله وسطر فارغ بعده.

    والنوع الثانى inline (من امثاله الـ em و الـ span)

    يتم وضعه بنفس السطر.

    لكن فى بعض الأحيان نحن نريد استخدام مثلا احد عناصر الـ block
    ووضعه بدون ان يحتاج سطر فارغ قبله وبعده.
    ونفس الشئ لعناصر الـ display مثلا* نريد اضافة سطر قبلهم وسطر بعدهم.

    كل هذا يتم عن طريق الخاصية display

    انظر الكود التالى لتفهم المقصد.



    كود:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dev.dd4bb.com Test Page</title>
    <style type="text/css">
    .block span{
    width: 50%;
    display:block;
    border:#999999 1px solid;
    }
    .inline span{
    display:inline;
    border:#999999 1px solid;
    }
    </style>
    </head>
    <body>
    <p class="block"><span>My</span> <span>Name</span> <span>Is Pepo</span></p>
    <p class="inline"><span>My</span> <span>Name</span> <span>Is Pepo</span></p>
    </body>
    </html>


    اتمنى يكون كل شئ اصبح واضح الأن.
    مع العلم ان خاصية الـ display
    لها قيم اخرى غير الـ block والـ inline
    لكنى افضل ان اتركك انت تكتشفها بنفسك.

    ننتقل للجزء الثانى من هذا الدرس

    تحديد الأماكن او الـ positions


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

    نستخدم خاصية الـ position لتحديد مكان العنصر بالنسبة لبقية الصفحة

    خاصية الـ position لها عدة قيم سوف نلقى نظرة عليهم.

    القيمة static

    وهى القيمة الإفتراضية لمكان اى عنصر.
    وهى تعنى ان مكانه ثابت* مثلما تم وضعه بين بقية عناصر الصفحة.

    القيمة relative
    هذه القيمة تعنى ان العنصر* يمكن ان يتم تحريكه من مكانه* مع مراعاة ترك مكانه الأساسى فارغ.
    بمجرد ان يتم إعداد position: relative الى احد العناصر
    يمكنك ان تستخدم الخصائص left* right* top* bottom
    لتحديد مكانه الجديد.
    مثلا عندما تجعل قيمة الخاصية left هى 10 بيكسل
    هذا يعنى* ان نضع مسافة 10 بيكسل بين العنصر وبين الجانب الأيسر الخارجى له.

    اظن تعرف هذا الأمر شئ ليس سهل بالكلام* لذلك اليك المثال التالى وان شاء الله يوضح كل شئ.
    (ملحوظة: جرب الكود مع الفايرفوكس* لأن الإنترنت اكسبلورار 6 به مشكلة مع الإعداد relative للخاصية position )



    كود:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dev.dd4bb.com Test Page</title>
    <style type="text/css">
     
    p{
    padding-right: 10px;
    }
    .a * .b * .c{
    color:#FFFFFF;
    border:1px #333300 solid;
    background:#000000;
    padding: 2px;
    }
    .a_r* .b_r* .c_r{
    color:#FFFFFF;
    border:1px #333300 solid;
    background:#000000;
    padding: 2px;
    }
    .b_r{
    position: relative;
    top: 25px;
    right: 20px;
    }
    </style>
    </head>
    <body>
    <h1>العنصر بشكله الأساسى</h1>
    <p><span class="a">نص</span> <span class="b">مزيد من النص</span> <span class="c">مزيد اضافى</span></p>
    <h1>العنصر بعد التلاعب به</h1>
    <p><span class="a_r">نص</span> <span class="b_r">مزيد من النص</span> <span class="c_r">مزيد اضافى</span></p>
    </body>
    </html>


    القيمة absolute

    كما ذكرنا عن الـ relative فهى تترك مكان العنصر الأصلى فارغ.

    لكن القيمة absolute لا تفعل ذلك.
    فهى تضع العنصر بأقرب مكان كان يمكن ان يوضع به (وهذا يختلف على حسب محتوى الصفحة)

    لكن مرة اخرى* يمكننا ان نستخدم الـ top و left و right و bottom
    لتحديد مكانه الجديد.

    انظر الكود التالى لتوضيح الصورة اكثر.


    كود:
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dev.dd4bb.com Test Page</title>
    <style type="text/css">
     
    p{
    padding-right: 10px;
    }
    .a * .b * .c{
    color:#FFFFFF;
    border:1px #333300 solid;
    background:#000000;
    padding: 2px;
    }
    .a_r* .b_r* .c_r{
    color:#FFFFFF;
    border:1px #333300 solid;
    background:#000000;
    padding: 2px;
    }
    .b_r{
    position: absolute;
    bottom: 30%;
    }
    </style>
    </head>
    <body>
    <h1>العنصر بشكله الأساسى</h1>
    <p><span class="a">نص</span> <span class="b">مزيد من النص</span> <span class="c">مزيد اضافى</span></p>
    <h1>العنصر بعد التلاعب به</h1>
    <p><span class="a_r">نص</span> <span class="b_r">مزيد من النص</span> <span class="c_r">مزيد اضافى</span></p>
    </body>
    </html>


    القيمة fixed

    مثلها مثل الـ absolute الا انها لا تتحرك مع الإسكرول بار.
    لكنها غير مدعومة فى الأنترنت اكسبلورار 6
    يمكنك معاينة المثال التالى فى الفايرفوكس او الإنترنت اكسبلورار 7


    كود:
     
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dev.dd4bb.com Test Page</title>
    <style type="text/css">
     
    p{
    padding-right: 10px;
    }
    .a * .b * .c{
    color:#FFFFFF;
    border:1px #333300 solid;
    background:#000000;
    padding: 2px;
    }
    .a_r* .b_r* .c_r{
    color:#FFFFFF;
    border:1px #333300 solid;
    background:#000000;
    padding: 2px;
    }
    .b_r{
    position: fixed;
    bottom: 30%;
    }
    </style>
    </head>
    <body>
    <h1>العنصر بشكله الأساسى</h1>
    <p><span class="a">نص</span> <span class="b">مزيد من النص</span> <span class="c">مزيد اضافى</span></p>
    <h1>العنصر بعد التلاعب به</h1>
    <p><span class="a_r">نص</span> <span class="b_r">مزيد من النص</span> <span class="c_r">مزيد اضافى</span></p>
    </body>
    </html>
    هناك خاصية اخرى اظن هذا افضل توقيت لإلقاء نظرة عليها.
    وهى خاصية z-index

    هذه الخاصية يمكن ان نطلق عليها "اهمية الظهور" لكل عنصر.
    مامعنى اهمية الظهور؟

    مثلا اذا كان لدينا عنصرين* قمنا بالتلاعب بأماكنهم بحيث يظهروا الأثنين بمكان واحد مثلا.

    (او جزء من العنصر p يغطى جزء من العنصر div مثلا)

    فكيف نختار اى العنصرين سيظهر فوق الأخر؟ هذا يتم عن طريق الخاصية z-index

    وكاتوضيح لكيفية استخدام الخاصية.
    مثلا العنصر صاحب القيمة 5 لخاصية الـ z-index سوف يظهر فوق العنصر صاحب القيمة 3 لخاصية الـ z-index
    والعنصر صاحب القيمة 1 سوف يظهر تحت العنصر صاحب القيمة 3
    وهكذا* يعنى العنصر الذى وضعنا قيمة الـ z-index له اعلى* سوف يظهر اولا* والأصغر يظهر تحته.

    خاصية الـ float

    طريقة اخرى لتحريك العنصر.
    الخاصية float يمكن ان تأخذ احد القيمتين* left و right
    العنصر الذى نضع له الخاصية float:left

    يتم وضعه اقصى اليسار (واذا كان العنصر داخل عنصر اخر* يتم وضعه اقصى يسار هذا العنصر)

    ونفس الشئ بالنسبة لـ float:right

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

    كالمثال التالى مثلا.


    كود:
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dev.dd4bb.com Test Page</title>
    </head>
     
    <body>
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext
    <p style="float:left; top:0px; right:0px; border:1px #000000 solid; width:100px; height:105px;">left text box here</p>
    <p style="float:right; top:0px; right:0px; border:1px #000000 solid; width:200px; height:105px;">right text box here</p>
    <br />teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    teeeeeeeeeeeeeeeeeext<br />
    </body>
    </html>


    ماذا اذا اردنا ان نضع عنصر داخل صفحة بها عنصر اخر له الإعداد float:left لكننا لا نريد العنصر ان يلتف حول العنصر الذى طبق عليه الـ float ؟

    نستخدم لهذا الأمر الخاصية clear
    إذا استخدمنا clear:left هذا سيلغى الإلتفاف حول العنصر الذى تم عمل float:left له* ونفس الشئ لـ right
    لكننا يمكننا استخدام clear:both ايضا* وارجح ان تستكشفها بنفسك.


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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  7. #7

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    35
    المشاركات
    19,272
    معدل تقييم المستوى
    1920

    رد: دوره الcss( مقدمه+تعريف لها +دروس )

    ربما يتسائل البعض
    ويقول هل هكذا انا تعلمت الـ CSS والـ XHTML ؟

    الإجابة المختصرة هى "نعم انت كذلك"


    الإجابة الحقيقية.

    كما نعرف جميعا* ان اى اشياء دقيقة فى التعامل معها* لا يمكن تعلمها بشكل حقيقى* الا بالممارسة

    يعنى* يمكن ان اقوم انا او غيرى بوضع كل شئ عن الـ XHTML والـ CSS

    بالتفصيل ولا اترك حرف الا واشرحه.

    لكن هل تظن حقا ان هذا سيفى بالغرض وانك ستتعلم بهذه الطريقة؟

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

    لأنك كما ذكرت سترى اشياء لا تشعر بقيمتها وفائدتها.

    تخيل معى انك تقرأ 10 دروس لا تشعر بقيمتها* هل ستستطيع المواصلة وقرائتهم؟

    اظنك اجبت حالا وقلت لماذا اضيع وقتى فى اشياء لا ارى لها اى قيمة.

    اتمنى ان اكون وفقت فى نقل وجهة نظرى فى هذا الأمر.

    اذن السؤال الأن كيف ستتعلم؟

    الإجابة المختصرة* هى انك ستتعلم عند الحاجة للتعلم.

    الأجابة الحقيقية. مامعنى سأتعلم عند الحاجة للتعلم؟ (بالمناسبة هذه هى الطريقة التى تعلمت بها والكثير غيرى)

    ربما يكن لديك علم ان كل من الـ XHTML والـ CSS
    هما من الفئة التى تسمى Client Side او بمعنى اخر* يجب ان يتم معالجة هذه الأكواد من خلال المتصفح لديك لكى يتم عرضها.

    وما الفائدة من هذا؟

    الفائدة من هذا انك تستطيع رؤية تصميم اى صفحة تزورها.
    ومن هنا نتعلم جميعا. مثلا* انت دخلت صفحة منتدى او موقع ما.

    ورأيت جزء من تصميم هذه الصفحة اعجبك* او رأيت به شئ جديد عليك لا تعرف كيف تم تنفيذه.
    كل ماعليك (انصحك بإستخدام متصفح الفايرفوكس فى هذا الأمر)
    هو ان تقوم بإستعراض مصدر الصفحة* ونسخه ولصقه بمحرر الـ HTML لديك
    (وانصحك بإستخدام الدريم ويفر لهذا الأمر)

    وتبدأ بقراءة الكود* وتعرف كيف تم تركيب الصفحة.
    ومن هنا يوم بعد يوم* سوف يتزايد رصيد المعلومات لديك بشكل حقيقى.

    يعنى ببساطة واختصار لما سبق.

    بعد الـ 12 درس الذى تم وضعهم لكل من دورتين الـ XHTML والـ CSS

    انت بالفعل اصبح لديك الأساسيات التى تحتاجها لفهم اغلب اكواد الـ XHTML والـ CSS المعقدة.

    كل ماعليك البدأ به* هو محاولة تنفيذ بعض الأفكار التى تحب ان تنفذها.

    وعندما تقف امامك اى نقطة توجه على الفور لقسم الـ XHTML والـ CSS
    بمنتديات الدعم العربى* وسوف اكون انا وبقية الأعضاء معك نستجيب لتسائلك بإذن الله.

    كما يمكنك (اذا احببت تزويد رصيد معلوماتك)

    البحث عن كتب الـ HTML والـ CSS.
    او تصفح الأقسام المطلوبة بهذا الموقع
    www.w3schools.com


    كيف اكتشف معيار جودة الصفحات التى اصممها واتأكد من عدم وجود اخطاء بها؟

    يمكنك ان تذهب للرابط التالى
    validator.w3.org/
    ووضع محتوى الصفحة التى تحتاج لتصحيحها به* او وضع رابط الصفحة.


    وفى حالة وجود اخطاء تعجز عن حلها يمكنك استخدام قسم XHTML والـ CSS
    للحصول على مساعدة فى حلها.

    كل ما اطلبه منك بالنسبة لقسم المساعدة فى الدعم العربى.
    هو وضع عنوان مناسب للموضوع* وتحاول وصف طلبك بأكبر قدر ممكن حتى ترى سرعة فى الإستجابة مع تقديم الحل بشكل افضل.



    شئ اخير عنى انا شخصيا.

    عندما فكرت انا بالتعلم* لم اجد من يقدم لى المعلومة بسهولة*
    ولغتى الإنجليزية وقتها لم تكن تؤهلنى بشكل جيد للبحث بالمواقع الأنجليزية والتعلم منها.
    وسلكت الطريق الصعب والممل فى التعلم* وهو عن طريق تجربة كل شئ واعنى كل شئ. يعنى كلما اضفت حرف اقم بمعاينه حتى ارى تأثيره.
    ومع الوقت والتوفيق من عند الله* استطعت التعلم الى حد ما.

    لكن الطريقة التى تعلمت بها* تجعل الأمر ليس سهل بالنسبة لى لأوصل المعلومة لأى شخص اخر* وربما انت تعلم ان من لديه المعلومة ليس كمن يوصل المعلومة*
    فـ توصيل المعلومة هذه هبة من عند الله يهبها لمن يشاء.

    ولست متأكد انى موهوب بها.

    لذلك اتمنى منك ان تلتمس بى هذا الأمر وتحاول التركيز مع الدروس بقدر المستطاع لإستخلاص المعلومة.

    واتمنى من الله ان اكون وفقت بإعداد الدورات بشكل مقبول.

    واظن انى ارشدتك مرتين حتى الأن للمكان الذى يمكننا مناقشة الأمور الواسعة به (القسم الموجود بالمنتدى)

    اما خاصية التعليقات الموجودة هنا. فهى فقط لمناقشة اى شئ بالدرس نفسه*

    يعنى التعليق على اى درس يكون لنقاش شئ معين بالدرس نفسه* وليس لمناقشة الأمور بشكل عام.

    واتمنى من الله التوفيق الدائم والمبهر لكم جميعا.
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

معلومات الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

الذين يشاهدون الموضوع الآن: 1 (0 من الأعضاء و 1 زائر)

المواضيع المتشابهه

  1. مقدمه عن السكري .....؟
    بواسطة ملاااك في المنتدى ملتقى الطـب
    مشاركات: 1
    آخر مشاركة: 18-05-2009, 02:45 PM
  2. مقدمه على سرطان الدم
    بواسطة نادين في المنتدى ملتقى الطـب
    مشاركات: 1
    آخر مشاركة: 13-03-2009, 09:42 AM
  3. دوره في الشعر الحميني
    بواسطة ابونواف الوصابي في المنتدى ملتقى الشـعــر
    مشاركات: 26
    آخر مشاركة: 24-02-2009, 11:12 PM
  4. مقدمه عن مرض الضغط
    بواسطة أبن الامارات في المنتدى ملتقى الطـب
    مشاركات: 2
    آخر مشاركة: 04-01-2009, 05:11 PM

المفضلات

المفضلات

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

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