بفضل الله أنتهيت من عمل الدرس الثالث الخاص بدورة css وأعتذر للتأخر بتقديمه لظروف الأنترنت ولكن الحمد لله تم زيادة السرعة وبالتالي الإبلود تحسن كثيرا ، ايضا توقف الموقع يوم بسبب مشاكل وفيروسات ..لا أعلم سبب قدومها ولكن الحمد لله كل شئ الآن يعمل جيداً ..أتمني يكون الدرس مفيد لكم وقد جمعت بيه الكثير عن خصائص css والدرس يتحدث عن :

• خصائص css وهي : width, Height, Padding, Margin, Border-, Background
• هذا الدرس شامل لأغلب خصائص css الذي سنعمل عليها بالتصميم مستقبلا وهي الطول والأرتفاع ، الهوامش ، البطانة كما يسمونها ، ايضا الأطارات ، عمل خلفية ..
• أتمني يكون الدرس واضح وقد رفعته علي أربعه أجزاء وإن شاء الله بأنزل لكم الملخص النصي وأتمني يكون واضح ومفهوم وبإنتظار تطبيقكم ، وسأنزل الملخص النصي للدرس في التدوينة القادم إن شاء الله

الجزء الأول

الجزء الثاني

الجزء الثالث

الجزء الرابع

بالنهاية أتمني لكم استفادة حقيقة وبإنتظار أرائكم وتطبيقاتكم حول الدرس ..وهذ بالنهاية هو نتاج هذا الجهد هو=  تطبيقكم وإستفادتكم الحقيقة من هذه الدروس …

السلام عليكم

نعود بعض الشئ للمقالات التقنية وعالم التخصص وهو درس بسيط ومفيد عن الجمل الشرطية IF Statment في لغة css …ما فائدتها ..هناك فوائد مختلفة للجمل الشرطية وهي كالتالي :

أولا هي موجهة لمتصفحات IE بمعني مثلا هناك بعض الخصائص التي تريد تخصيصها لمتصفح IE عموماً بغض النظر عن أي متصفح أخر ( Firefox, Chrome , Safari ..etc ) وهناك احيانا تويد تخصيص بعض css لإصدارة معينة من IE مثلا وليكن الأصدار التعيس 6 مثلا أو 7 أو 8 ..أذن الحل هو مع الجمل الشرطية ..

يتم كتابتها داخل صفحة HTML ومن خلالها  تحدد نوعية المتصفح الذي تريد مخاطبته وهو تباعاً من عائلة إنترنت أكسبلورو والحديث عن فئة معينة  منه ..كيف هذا ؟؟!

بهذه الصورة نلاحظ أنه تم كتابة الجملة الشرطية بهذه الطريقة من خلال وسمي الشرط ومن خلال القوس تحدد نوعية المتصفح ..والمتصفح الوحيد الذي يفهم هذه التعبيرات هو IE وعلي أساسه سوف تحدد بعض الخصائص له مثلا للإصدار القديم 6 او 7 إذا تطلب الأمر هذا ..كما بالصورة التالية ( أضغط علي الصورة للتكبير )

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

وماذا أيضا نستطيع عمله بهذه الجمل الشرطية IF Statement :

هناك بعض الأضافات لهذا الجمل أن تحقق لك بعض المرونة مثلا تريد نسخة معينة او نسخة وما فوقها أو مثلا نسخة وما يسبقها ( النسخة هي الأصدارة مثلاً  Greater than IE 5.5 أو Greater Than IE 6.0 او مثلا الأسبق Less great Than IE 7.0 أي النسخ السابق IE 6 وما قبلها …وكيف نحقق هذا ..

هناك بعض التعبيرات الشائعة التي تخدم هذه المعاني ..وهي

مثال عملي : ( اضغط علي الصورة للتكبير )

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

ويمكن المزج بين هذه التعبيرات للخروج بنتائج ..جيدة خصوصاً لمصتفحات إنرتنت أكسبلور من خلال الأصدارة المختلفة : حيث

Lte : حيث يكون أقل من أو يساوي

Lt : أقل من

Gte : أكتر من أو يساوي

Gt : أكثر من

( IE 6) | (IE 7) :  حيث هذه جملة أختيارية أما إنترنت أكسبلورو 6 أو 7 ..

وهناك كلا الخيارين : ( IE6) & (IE 7) ومعناه أن كلا الأصدارن سويا معا (و) …

من خلال هذه الخصائص يمكنك عمل ما تريد لتطويع بعض خصائص CSS حول إصدارة معينة من IE ،

الدرس مترجم من مدونة : divitodesign.com وعنوان الدرس بالأنجليزية من هـنا.. :

السـلام عليـكم

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

توضيح : الرجاء الضغط علي اي صورة بالدرس لعرضها بالحجم الطبيعي ..

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

1- طرق كتابة Css

2- الفرق بين Inline, Embded, External

3- مكونات جملة css

4- الفرق بين ID, Class

النقطة الأولي :

لعل طرق كتابة الcss متنوعة وهناك 3 طرق حتي الآن وهي Inline, Embded, External أي أن css توفر لك مرونة الأختيار بين 3 طرق مختلفة وكل شخص حسب نكهته وحريته وأختيار الطريق المحببه إليه وإن كان المفضل دائما الكتابة بطريقة External لأسباب سيتم شرحها هنا تباعا ..

ما هي Inline :

Inline هي طريقة كتابة جملة css في وسم Tage Html في نفس التاج .. وكيف هذا ؟ ستكون الصورة معبرة أكثر

اضغط علي الصورة لعرضها بشكل أكبر ..ايضا ستجد أنه تم كتابة وسم P أي Paragraph فقرة ..وكتابة نص تقليدي بها والآن نريد تنسيقها مثلا أضافة خط وتكبير الخط وتغيير لونه ..الآن تأتي Css لتنسق وتقوم بهذه العملية من خلال وضع وسم Style  بجانب P وكتابة أوامر جملة css مثلا خاصية تغيير نوعية الخط Font-family وتأخد قيمة Tahoma اي خط تهوما ، أيضا حجم الخط Font-size ويكون 15 بكسـل ، ايضا لون الخط ويختصر إلي Color ويأخد قيمة بالسداسي عشر #Ff0000 وتكون لون أحمر ..

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

نتنقل إلي الطريقة الثاانية وهي Embded :

الطريقة هذه مختلفة بعض الشئ عن Inline حيث أنها توضع بين وسمي الرأس Head tags للصفحة مثلا سكربيتات الجافا سكربيت وغيرها ..من خلال فتح وسمي <Style> وتحت هذا الوسم يتم كتابة جمل لغة css المختلفة التي تتحكم بشكل وموضع الكائنات بالصفحة ..

ملاحظ هنا تم كتابة وفتح تاج <Style> وهذا بين وسمي الرأس Head ومن خلاله سيتم كتابة جمل css للتحكم بخصائص العـنصر P …ولا تنسي تغلق الوسم بعد الأنتهاء </style> ويجب أن يوضع بين وسمي الرأس  فهذا هام جداً ..

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

الطريقة الثالثة وهي المفضلة والشائعة دائما وهي External

ومعناها استدعاء ملف css بشكل خارجي اي تقول بعمل إستيراد لملف Css ومن خلاله يتم وضع كافة اوامر جمل css التي تتحكم بمحتوي صفحتك ..وقولت مسبقاً أن هذه الطريقةجيدة ومحببه لماذا ؟

- لأنها تقوم بأستدعاء ملف css بشكل خارجي وهذا الملف بيه معظم أوامر css  لموقعك وعند تحميله ينزل هذا الملف عند المستخدم كـ Cash وعندي أستدعاء أي صفحة أخري يتم عرض هذا الملف وتحميله أسرع لأنه موجود اصلا بالكاش ..

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

نلاحظ أن طريقة كتابة External  اي بين وسمي Head ايضا مثل Embded ويتم كتابة وسم Link ومن خلاله سيتم تحديد مسار ملف css وهو Site.css ونوع الملف css كما موضح بالأعلي ..

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

الآن نتنقل إلي النقطة الثانية وهي : مكونات جملة css

ملاحظ أن اي جملة css تتكون من الselector وهو العنصر المراد تطبيق الخصائص عليه مثلا P, Img, Table اي كائن ..، هناك الخصائص Poperties مثلا font-size – Color – Text-align اي خصائص الكائن نريد مثلا التحكم بلونه ، حجمه ، إرتفاعه ، عرضه ، لون الأطار ..إلخ ، وهناك قيم Values اي مثلا نوع الخط : تهامي ، لون الخط : أحمر …Font-size:tahoma; color:red;  وفور أنهاء اي خاصية وأعطائها قيمة يجب اضافة رمز ( حتي تعرف أنه بذلك أنتهت هذه الخاصية ويمكنك كتابة أكتر من خاصية بنفس الجملة ..

وبهذ تم معرفة كيفية كتابة جملة css بكل سهولة اي الأول تكتب العنصر المحدد مثلا P اي كائن الفقرة ثم تفتح قوس {} ومن خلال هذا القوس تكتب خصائص العنصر وقيمها المطلوبة وبينها (;) ..

النقطة الثالثة تحثنا عن الفرق بين Class, ID اي الفرق بين المعرف والفئة بالعربية ..

لعل أهم ما يميز لغة css أنه توفر سهولة ومرونة عالية للتحكم بالكائنات ومنا ضمنها Class, ID احيانا تريد عمل بعض التطبيقات بشكل عام علي كائنات معينة مثلا كائن صورة Img وتريد تستثني من هذه العمومية صورة معينة فكيف هذا ؟؟ !

يتم هذا من خلال Class, ID ..من خلال عمل تخصيص لكائن IMg بإسم معين ..مثلا

نلاحظ من هذه الصورة أن تم اضافة كائن HTML كصورة IMG  وتم تخصيصها من خلال معرف خاص بها ID وهو MYIMAGE وعند كتابة أوامر css لهذا المعرف يتم كتابة رمز # قبل اسم هذا الكائن ووضع الخصائص المختلفة له من أطار وطول وعرض ..إلخ

بهذه الصورة حالة عمل Clas اي الفئة ..ويتم كتابة أسم الفئة ClassNamr متبوعا بعلامة = ثم اسم الفئة بين “” ..Class=”Image2″ وعند استدعاء هذه الكلاس في ملف Css يتم وضع نقطة قبلها (.) ثم اسم الكلاس كما بالصورة فوق ..

سؤال جيد متي نستخدمهم ؟ هذا راجع لك يمكنك أستخدام ID في حالة كون هذا الأسم لن يتكرر بملف Unique Value اي قيمة فريدة ، أما بخصوص Class فالأسم سهل ويمكنك تكراره حسب الطلب ..أذن الأمر راجع لك بالنهاية ..

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

السلام عليكم

اليوم بفضل الله تمكنت من رفع الدرس الثاني الخاص بدورة الcss ..والسكرين كاست بها ..والدرس مقسم إلي  3  ملفات مرفوعة علي اليوتيوب ..مدة الدرس : 20 دقيقة تقريبا ..تكلمنا بها عن عدة نقاط جديدة تساعدة بتعلم css ..

منها : طرق كتابة الcss -- ايضا الفرق بين Inline, Embded, External -- مكونات جملة css -- الفرق بين Id, Class

1- الجزء الأول :

2- الجزء الثاني :

3- الجزء الثالث :

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