دوره الcss( مقدمه+تعريف لها +دروس )
بسم الله الرحمن الرحيم
جلبت هذه الدورة كهدية مني للأخ العزيز والمشرف القدير ( نبع الوفاء )
المقدمه
انشاء الله انا هبدأ فى دوره تعليم ال css وعلى من يريد التسجيل يكتب هنا فى هذا الموضوع
وانشاء الله كل يوم درس او اتنين وهى سهله جدا جدا ممكن تكون اسهل لغه ممكن تتعلمها
فى حياتك وطبعا مفيش دلوأتى موقع يخلوا منها ودى مهمه جدا للمبتدأين والمتوسطين والمحترفين
ايضا وهى من شروط الويب 2 كما تجعل شكل صفحتك جميله ومتناسقه وربنا يعنى عليها.
المتطلبات: لا يوجد سوى Notepad الذى لا تخلو من اى جهاز.ومعرفه بسيطه ب html
التعريف
ماهي CSS:
اختصار لـ Cascading Style Sheets
عملها:
تتحكم صفحات الستايلات بشكل الموقع. وتستخدم لإعطاء الموقع صيغة منتاسقة حيث يمكنها تحديد:
ذات الخلفية لكل صفحات الموقع من حيث اللون أو الصورة
اشكال الجداول لتكون متناسقة ومتشابهة في الموقع بأكمله
بألوان وأشكال وأحجام الخطوط بحيث يتم تحديد ستايل لكل حجم من الخطوط
تحديد اشكال الديكور الخاصة بالروابط التشعبية Hyperlinks
تحديد الفعل الذي يحصل عند تحريك الفأرة فوق احد الروابط التشعبية
اين نكتب اكواد الcss:
هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.
الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب.
مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم
http://www.ti4it.com/vb/imgcache/2/12386-ti4it.com.png
المهم هنا هو إنشاء رابط بين ملف 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.
http://www.ti4it.com/vb/imgcache/2/12387-ti4it.com.png
هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 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في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، مبروك! لقد قمت بإنشاء ملف التصميم الأول!
منقول للفائدة
رد: دوره ال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 جزئين مكونين لشئ واحد.
ومن المحتمل ان اقوم بجعل الدورتين عبارة عن دورة واحدة اذا تطلب الأمر.
رد: دوره ال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
واظن معانيهم واضحة ولا تحتاج لشرح.
اتمنى يكون الدرس شيق وبه شئ من الأفادة ويكون واضح وبسيط بالنسبة لك..
كل التمنيات بالتوفيق بإذن الله.
رد: دوره ال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 من خلال هذا الدرس
واراكم بالدرس المقبل بإذن الله.
رد: دوره ال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 هو التحكم فى المسافة التى تفرق بين محتوى احد العناصر وبين حدود هذا العنصر.
انظر الصورة التالية فهى توضح المعنى المقصود من محتوى العنصر وحدود العنصر
http://dev.dd4bb.com/uploads/css_padding.gif
خاصية الـ padding يتفرع منها 5 خصائص وهما كالتالى
padding-top و padding-left و padding-right و padding-bottom
وكل منهم يتم تحديد قيمته بالبيكسل او الـ em
او حتى cm (سم)
على سبيل المثال اذا كنا نريد العنصر صاحب الكلاس message
ان يكون هناك مسافة 2 بيكسل بين حدود الجهة اليمنى والمحتوى
يتم الأمر بالشكل التالى
كود:
.message{
padding-right: 2px;
}
وهكذا لبقية خصائص الـ padding
لكن ماذا عن الإختصارات؟ هل يجب عليك ان تكتب الأربع خصائص اذا كنت تريد ان يكون هناك مسافة معينة بين كل حد من حدود العنصر ومحتواه؟
بالطبع لا* يمكنك استخدام خاصية padding فقط.
مثلا نريد ان نجعل المسافة 5 بيكسل تفصل بين كل الحدود (الأيمن* والأيسر* والأسفل و الأعلى) وبين المحتوى
يتم الأمر بمنتهى البساطة بالشكل التالى
وايضا يمكنك استخدام 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 بيكسل
اتمنى يكون كل شئ بهذا الدرس الطويل والكبير اصبح واضح بإذن الله.
رد: دوره ال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 ايضا* وارجح ان تستكشفها بنفسك.
اعلم ان درس اليوم كان كبير جدا. واتمنى ان اكون وفقت فى الشرح.
وان شاء الله تكون استفدت منه.
اراكم بالدرس القادم على خير.
رد: دوره ال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
للحصول على مساعدة فى حلها.
كل ما اطلبه منك بالنسبة لقسم المساعدة فى الدعم العربى.
هو وضع عنوان مناسب للموضوع* وتحاول وصف طلبك بأكبر قدر ممكن حتى ترى سرعة فى الإستجابة مع تقديم الحل بشكل افضل.
شئ اخير عنى انا شخصيا.
عندما فكرت انا بالتعلم* لم اجد من يقدم لى المعلومة بسهولة*
ولغتى الإنجليزية وقتها لم تكن تؤهلنى بشكل جيد للبحث بالمواقع الأنجليزية والتعلم منها.
وسلكت الطريق الصعب والممل فى التعلم* وهو عن طريق تجربة كل شئ واعنى كل شئ. يعنى كلما اضفت حرف اقم بمعاينه حتى ارى تأثيره.
ومع الوقت والتوفيق من عند الله* استطعت التعلم الى حد ما.
لكن الطريقة التى تعلمت بها* تجعل الأمر ليس سهل بالنسبة لى لأوصل المعلومة لأى شخص اخر* وربما انت تعلم ان من لديه المعلومة ليس كمن يوصل المعلومة*
فـ توصيل المعلومة هذه هبة من عند الله يهبها لمن يشاء.
ولست متأكد انى موهوب بها.
لذلك اتمنى منك ان تلتمس بى هذا الأمر وتحاول التركيز مع الدروس بقدر المستطاع لإستخلاص المعلومة.
واتمنى من الله ان اكون وفقت بإعداد الدورات بشكل مقبول.
واظن انى ارشدتك مرتين حتى الأن للمكان الذى يمكننا مناقشة الأمور الواسعة به (القسم الموجود بالمنتدى)
اما خاصية التعليقات الموجودة هنا. فهى فقط لمناقشة اى شئ بالدرس نفسه*
يعنى التعليق على اى درس يكون لنقاش شئ معين بالدرس نفسه* وليس لمناقشة الأمور بشكل عام.
واتمنى من الله التوفيق الدائم والمبهر لكم جميعا.
