‫الويب‬ ‫تصميم‬ ‫كورس‬
–
CSS Course
Learn CSS| Full Course
‫الدرس‬
1
–
‫الكود‬ ‫كتابة‬ ‫وطرق‬ ‫مقدمة‬
‫وإعداد‬ ‫شرح‬
/
‫السالم‬ ‫عبد‬ ‫ماهر‬ ‫محمد‬
‫الدرس‬ ‫موضوعات‬
‫الترتيب‬
‫الموضوع‬
1
‫باللغة‬ ‫وتعريف‬ ‫مختصرة‬ ‫مقدمة‬
2
‫لغة‬ ‫مع‬ ‫المظهر‬ ‫في‬ ‫الفرق‬
CSS
‫وبدونها‬
3
‫لغة‬ ‫ألكواد‬ ‫العام‬ ‫الشكل‬
CSS
4
‫بلغة‬ ‫الخاصة‬ ‫األكواد‬ ‫إضافة‬ ‫طريقة‬
CSS
5
‫ال‬ ‫ملف‬ ‫تضمين‬
CSS
‫ال‬ ‫ملف‬ ‫بداخل‬
Html
6
‫ب‬ ‫الخاصة‬ ‫التنسيقات‬ ‫إلضافة‬ ‫الثانية‬ ‫الطريقة‬
CSS
7
‫ب‬ ‫الخاصة‬ ‫التنسيقات‬ ‫إلضافة‬ ‫الثالثة‬ ‫الطريقة‬
CSS
‫باللغة‬ ‫وتعريف‬ ‫مختصرة‬ ‫مقدمة‬
‫الرحيم‬ ‫الرحمن‬ ‫هللا‬ ‫بسم‬
•
‫المتعلقإة‬ ‫األوامإر‬ ‫كإل‬ ‫شإرح‬ ‫فإي‬ ‫سإنبدف‬ ‫هللا‬ ‫بإذذن‬ ‫الدورة‬ ‫هذه‬ ‫في‬
‫بلغإة‬
‫التصميم‬
CSS
‫الو‬ ‫تصميم‬ ‫تعلم‬ ‫في‬ ‫الثانية‬ ‫الخطوة‬ ‫هي‬ ‫والتي‬
‫بعإد‬ ‫يب‬
‫إة‬‫إ‬‫لغ‬
Html
‫إ‬‫إ‬‫عليه‬ ‫إدربنا‬‫إ‬‫وت‬ ‫إيل‬‫إ‬‫بالتفص‬ ‫إرحناها‬‫إ‬‫وش‬ ‫إبر‬‫إ‬‫س‬ ‫إي‬‫إ‬‫الت‬
‫ا‬‫إد‬‫إ‬‫جي‬ ‫ا‬
‫اسإإتمعت‬ ‫إإد‬ ‫فنإإ‬ ‫فسإإاس‬ ‫علإإد‬ ‫معإإ‬ ‫سإإعتعامل‬ ‫الكإإورس‬ ‫هإإذا‬ ‫وفإإي‬
‫ال‬ ‫لكورس‬
Html
‫ن‬ ‫مإا‬ ‫كإل‬ ‫هللا‬ ‫بذذن‬ ‫وسنتقن‬ ‫فيه‬ ‫ما‬ ‫كل‬ ‫وفتقنت‬
‫قإدر‬
‫لغة‬ ‫الجميلة‬ ‫اللغة‬ ‫من‬ ‫عليه‬
CSS
‫ا‬‫جيد‬ ‫التركيز‬ ‫علد‬ ‫فاحرص‬
•
‫لغة‬
CSS
‫صإ‬ ‫وتنسإير‬ ‫لتصإميم‬ ‫المخصصإة‬ ‫التصإميم‬ ‫لغإة‬ ‫هي‬
‫فحات‬
‫ف‬ ‫لهإإا‬ ‫ويضإإيف‬ ‫للصإإفحة‬ ‫إإا‬‫جمالي‬ ‫ا‬‫مظهإإر‬ ‫يعطإإي‬ ‫بشإإكل‬ ‫الويإإب‬
‫إإا‬‫لوان‬
‫الصإ‬ ‫تظهإر‬ ‫بحيإر‬ ‫مناسإب‬ ‫مكإان‬ ‫فإي‬ ‫عنصإر‬ ‫كل‬ ‫ويضع‬ ‫مناسبة‬
‫فحة‬
‫الم‬ ‫إفحات‬‫إ‬‫ص‬ ‫إي‬‫إ‬‫ف‬ ‫إر‬‫إ‬‫ت‬ ‫إا‬‫إ‬‫كم‬ ‫إر‬‫إ‬‫ومتناس‬ ‫إل‬‫إ‬‫جمي‬ ‫إكل‬‫إ‬‫بش‬ ‫إة‬‫إ‬‫النهاي‬ ‫إي‬‫إ‬‫ف‬
‫إع‬‫إ‬ ‫وا‬
‫سإنت‬ ‫مإا‬ ‫وهإذا‬ ‫وغيرهم‬ ‫ويوتيوب‬ ‫وفمازون‬ ‫فيسبو‬ ‫مثل‬ ‫الشهيرة‬
‫علمه‬
‫هللا‬ ‫بذذن‬ ‫الدورة‬ ‫هذه‬ ‫في‬
.
•
‫و‬ ‫الويب‬ ‫صفحات‬ ‫فساس‬ ‫نبني‬ ‫فننا‬ ‫تفهم‬ ‫فن‬ ‫علي‬ ‫يجب‬ ‫لذل‬
‫العناصإر‬
‫إإإة‬‫إ‬‫لغ‬ ‫إإإتخدام‬‫إ‬‫باس‬ ‫إإإا‬‫إ‬‫به‬ ‫إإإية‬‫إ‬‫األساس‬
Html
‫األزرار‬ ‫إإإل‬‫إ‬‫مث‬
‫إإإوص‬‫إ‬‫والنص‬
‫م‬ ‫ونعطيهإا‬ ‫العناصإر‬ ‫تلإ‬ ‫كإل‬ ‫ننسإر‬ ‫ثإم‬ ‫ذلإ‬ ‫وغيإر‬ ‫والعناوين‬
‫ا‬‫ظهإر‬
‫لغة‬ ‫باستخدام‬ ‫ا‬‫الئق‬
CSS
‫لغة‬ ‫بعن‬ ‫القول‬ ‫يمكن‬ ‫لذل‬
Html
‫لغإة‬ ‫هإي‬
‫ولغة‬ ‫البناء‬
CSS
‫لغة‬ ‫هي‬
‫والجماليات‬ ‫المظهر‬
‫لغة‬ ‫مع‬ ‫المظهر‬ ‫في‬ ‫الفرق‬
CSS
‫وبدونها‬
‫فهمية‬ ‫لمعرفة‬ ‫مهمة‬ ‫توضيحية‬ ‫صور‬
CSS
•
‫لغإإة‬ ‫باسإإتخدام‬ ‫الويإإب‬ ‫صإإفحة‬ ‫شإإكل‬ ‫يبإإدو‬ ‫هكإإذا‬
CSS
‫وبإإدون‬
‫ال‬ ‫لغة‬ ‫استخدام‬
CSS
•
‫لغإإة‬ ‫باسإإتخدام‬ ‫الويإإب‬ ‫صإإفحة‬ ‫شإإكل‬ ‫يبإإدو‬ ‫هكإإذا‬
CSS
‫وبإإدون‬
‫ال‬ ‫لغة‬ ‫استخدام‬
CSS
•
‫لغإإة‬ ‫باسإإتخدام‬ ‫الويإإب‬ ‫صإإفحة‬ ‫شإإكل‬ ‫يبإإدو‬ ‫هكإإذا‬
CSS
‫وبإإدون‬
‫ال‬ ‫لغة‬ ‫استخدام‬
CSS
‫لغة‬ ‫ألكواد‬ ‫العام‬ ‫الشكل‬
CSS
•
‫فلغة‬ ‫ببساطة‬
CSS
‫تتع‬ ‫التي‬ ‫الخصائص‬ ‫بعض‬ ‫عن‬ ‫عبارة‬ ‫هي‬
‫لإر‬
‫ف‬ ‫نطبإإر‬ ‫ولكإإي‬ ‫الصإإفحة‬ ‫لعناصإإر‬ ‫البصإإرية‬ ‫بالتنسإإيقات‬
‫تلإإ‬ ‫حإإد‬
‫ب‬ ‫ونضإع‬ ‫تنسإيقه‬ ‫المإراد‬ ‫العنصر‬ ‫اسم‬ ‫نكتب‬ ‫التنسيقات‬
‫وسإين‬ ‫عإده‬
{ }
‫ونضإع‬ ‫الخاصإية‬ ‫اسإم‬ ‫نكتإب‬ ‫وبداخلهما‬
(
:
)
‫نكتإب‬ ‫ثإم‬
‫يمإة‬
‫ثإ‬ ‫ذلإ‬ ‫غيإر‬ ‫فو‬ ‫ا‬‫حجم‬ ‫فو‬ ‫ا‬‫لون‬ ‫ذل‬ ‫كان‬ ‫سواء‬ ‫الخاصية‬ ‫تل‬
‫نخإتم‬ ‫م‬
‫بعالمة‬ ‫السطر‬
(
;
)
‫التنسإيقات‬ ‫مإن‬ ‫عإدد‬ ‫فع‬ ‫وضإع‬ ‫يمكننإا‬ ‫وهكذا‬
‫التال‬ ‫الصفحة‬ ‫في‬ ‫تر‬ ‫كما‬ ‫الطريقة‬ ‫بنفس‬ ‫نريدها‬ ‫التي‬
‫ية‬
.
•
‫بتغي‬ ‫الخاصة‬ ‫التنسيقات‬ ‫بعض‬
‫لإون‬ ‫يإر‬
‫العنصر‬ ‫خط‬ ‫وحجم‬ ‫ومحاذاة‬
h1
•
‫إال‬‫إ‬‫ب‬ ‫إيقه‬‫إ‬‫تنس‬ ‫إراد‬‫إ‬‫الم‬ ‫إر‬‫إ‬‫العنص‬ ‫إمي‬‫إ‬‫نس‬
Selector
‫إي‬‫إ‬‫الت‬ ‫إية‬‫إ‬‫الخاص‬ ‫إمي‬‫إ‬‫ونس‬
‫بإإإال‬ ‫تعيينهإإإا‬ ‫فو‬ ‫تغييرهإإإا‬ ‫نريإإإد‬
Property
‫فو‬ ‫يمإإإة‬ ‫نعطيهإإإا‬ ‫والتإإإي‬
value
‫ن‬ ‫كإود‬ ‫طعإة‬ ‫القيمإة‬ ‫مإع‬ ‫للخاصإية‬ ‫النهائي‬ ‫الشكل‬ ‫ليصبح‬
‫سإميها‬
Declaration
‫بلغة‬ ‫الخاصة‬ ‫األكواد‬ ‫إضافة‬ ‫طريقة‬
CSS
•
‫إة‬‫إ‬‫كلم‬
CSS
‫إار‬‫إ‬‫اختص‬ ‫إي‬‫إ‬‫ه‬
Cascading Style
Sheet
‫التنسإ‬ ‫عإن‬ ‫تعبإر‬ ‫لنإا‬ ‫كمإا‬ ‫ببسإاطة‬ ‫وهي‬
‫يقات‬
‫بالف‬ ‫إنشإابها‬ ‫تإم‬ ‫التإي‬ ‫للعناصإر‬ ‫نعطيها‬ ‫التي‬
‫بلغإة‬ ‫عإل‬
Html
‫إ‬‫إ‬‫تل‬ ‫إافة‬‫إ‬‫إلض‬ ‫إة‬‫إ‬‫طريق‬ ‫إن‬‫إ‬‫م‬ ‫إر‬‫إ‬‫فكث‬ ‫إد‬‫إ‬‫توج‬ ‫إذل‬‫إ‬‫ول‬
‫ال‬ ‫عناصإر‬ ‫إلإد‬ ‫التنسيقات‬
Html
‫إنشإابها‬ ‫تإم‬ ‫التإي‬
‫بالت‬ ‫علإيهم‬ ‫سإنتعرف‬ ‫رئيسإية‬ ‫طإرق‬ ‫ثالثة‬ ‫وهم‬
‫فصإيل‬
‫التالية‬ ‫الصفحات‬ ‫في‬
‫تنسيقات‬ ‫إضافة‬ ‫في‬ ‫واألفضل‬ ‫األولد‬ ‫الطريقة‬
CSS
•
‫تن‬ ‫إضإافة‬ ‫فإي‬ ‫ا‬‫شيوع‬ ‫واألكثر‬ ‫واألفضل‬ ‫األشهر‬ ‫الطريقة‬
‫ال‬ ‫سإيقات‬
CSS
‫بلغة‬ ‫المعمولة‬ ‫األوامر‬ ‫إلد‬
Html
‫إا‬‫خاص‬ ‫إا‬‫ملف‬ ‫تنشع‬ ‫فن‬ ‫هي‬
‫لغة‬ ‫فوامر‬ ‫فيه‬ ‫تضع‬
Html
‫فوامإ‬ ‫كإل‬ ‫فيإه‬ ‫تضإع‬ ‫آخإر‬ ‫ا‬‫ملف‬ ‫وتنشع‬
‫ر‬
‫لغة‬ ‫وتنسيقات‬
CSS
‫ملإف‬ ‫استدعاء‬ ‫فو‬ ‫بتضمين‬ ‫ذل‬ ‫بعد‬ ‫وتقوم‬
‫ال‬
CSS
‫ال‬ ‫ملف‬ ‫بداخل‬
Html
‫عليه‬ ‫تطبيقه‬ ‫ليتم‬
•
‫إإة‬‫إ‬‫بلغ‬ ‫إإاص‬‫إ‬‫الخ‬ ‫إإف‬‫إ‬‫المل‬
html
‫إإميه‬‫إ‬‫نس‬ ‫إإب‬‫إ‬‫الغال‬ ‫إإي‬‫إ‬‫ف‬
index.html
‫بلغإة‬ ‫الخإاص‬ ‫والملف‬
CSS
‫نسإميه‬
style.css
‫الحريإة‬ ‫لإ‬ ‫ولكإن‬
‫ذل‬ ‫بغير‬ ‫التسمية‬ ‫في‬
‫ال‬ ‫ملف‬ ‫تضمين‬
CSS
‫ال‬ ‫ملف‬ ‫بداخل‬
Html
•
‫ال‬ ‫إف‬‫إ‬‫مل‬ ‫إمين‬‫إ‬‫لتض‬
CSS
‫ال‬ ‫إف‬‫إ‬‫مل‬ ‫إداخل‬‫إ‬‫ب‬ ‫إارجي‬‫إ‬‫الخ‬
Html
‫إوم‬‫إ‬‫نق‬
‫األمر‬ ‫طرق‬ ‫عن‬ ‫باستدعائه‬
Link
‫الوسإم‬ ‫في‬ ‫يوضع‬ ‫الذع‬
Head
‫لغة‬ ‫في‬ ‫وتعلمنا‬ ‫سبر‬ ‫كما‬
Html
‫التالي‬ ‫السطر‬ ‫فنكتب‬
:
<Link rel=“stylesheet” href=“style.css”>
•
‫فإ‬ ‫مسإتقل‬ ‫بشإكل‬ ‫التنسيقات‬ ‫تمل‬ ‫فن‬ ‫الطريقة‬ ‫هذه‬ ‫ميزة‬
‫ال‬ ‫ملإف‬ ‫ي‬
CSS
‫ب‬ ‫مع‬ ‫تريد‬ ‫ويب‬ ‫صفحة‬ ‫فع‬ ‫علد‬ ‫تطبقه‬ ‫فن‬ ‫يمكن‬ ‫الذع‬
‫عإض‬
‫التطبيقات‬ ‫في‬ ‫ا‬‫الحق‬ ‫سنراه‬ ‫ما‬ ‫وهذا‬ ‫البسيطة‬ ‫التعديالت‬
‫العملية‬
‫ملف‬ ‫بذنشاء‬ ‫منا‬ ‫هنا‬
CSS
‫ال‬ ‫ملف‬ ‫داخل‬ ‫واستدعائه‬
Html
‫ب‬ ‫الخاصة‬ ‫التنسيقات‬ ‫إلضافة‬ ‫الثانية‬ ‫الطريقة‬
CSS
•
‫ت‬ ‫إإي‬‫إ‬‫الت‬ ‫إإيقات‬‫إ‬‫التنس‬ ‫إإل‬‫إ‬‫ك‬ ‫إإافة‬‫إ‬‫إض‬ ‫إإاطة‬‫إ‬‫ببس‬ ‫إإ‬‫إ‬‫يمكن‬
‫إإدها‬‫إ‬‫ري‬
‫ال‬ ‫كود‬ ‫صفحة‬ ‫نفس‬ ‫بداخل‬
Html
‫األمإر‬ ‫بداخل‬ ‫ولكن‬
style
‫هكذا‬ ‫يكتب‬ ‫الذع‬
<style> </style>
‫وهإذه‬
‫ع‬ ‫سنتعرف‬ ‫المواضع‬ ‫بعض‬ ‫في‬ ‫تفيد‬ ‫الطريقة‬
‫ا‬‫الحق‬ ‫ليها‬
‫التن‬ ‫إضافة‬ ‫إلد‬ ‫تبدع‬ ‫الطرق‬ ‫كل‬ ‫النهاية‬ ‫في‬ ‫لكن‬
‫سيقات‬
‫حال‬ ‫فع‬ ‫علد‬ ‫تقلر‬ ‫فال‬ ‫النهائي‬ ‫الشكل‬ ‫بنفس‬
•
‫إإإافة‬‫إ‬‫بذض‬ ‫إإإا‬‫إ‬‫من‬ ‫إإإا‬‫إ‬‫هن‬
‫التنسإإإإإيقات‬ ‫بعإإإإإض‬
‫للوسإإإإم‬
h1
‫بإإإإداخل‬
‫إإر‬‫إ‬‫األم‬
style
‫إإد‬‫إ‬‫فنج‬
‫ت‬ ‫إإيقات‬‫إ‬‫التنس‬ ‫إإه‬‫إ‬‫فن‬
‫إإذ‬‫إ‬‫نف‬
‫إب‬‫إ‬‫الوي‬ ‫إفحة‬‫إ‬‫ص‬ ‫إد‬‫إ‬‫عل‬
‫إفح‬‫إ‬‫بالص‬ ‫إا‬‫إ‬‫كم‬ ‫إة‬‫إ‬ ‫بد‬
‫ة‬
‫التالية‬
•
‫بالتفص‬ ‫القادمة‬ ‫بالدروس‬ ‫األوامر‬ ‫تل‬ ‫كل‬ ‫فسندرس‬ ‫تقلر‬ ‫ال‬
‫الممل‬ ‫يل‬
‫ب‬ ‫الخاصة‬ ‫التنسيقات‬ ‫إلضافة‬ ‫الثالثة‬ ‫الطريقة‬
CSS
•
‫تريإ‬ ‫التإي‬ ‫التنسإيقات‬ ‫كإل‬ ‫إضإافة‬ ‫ببساطة‬ ‫يمكن‬
‫بإداخل‬ ‫دها‬
‫إإإية‬‫إ‬‫الخاص‬ ‫إإإه‬‫إ‬‫إعطائ‬ ‫إإإر‬‫إ‬‫طري‬ ‫إإإن‬‫إ‬‫ع‬ ‫إإإده‬‫إ‬‫تري‬ ‫إإإر‬‫إ‬‫فم‬ ‫فع‬
style
‫تريإدها‬ ‫التإي‬ ‫التنسيقات‬ ‫عن‬ ‫عبارة‬ ‫لها‬ ‫يمة‬ ‫وإعطاء‬
‫بإنفس‬
‫بالت‬ ‫سإندرس‬ ‫وكمإا‬ ‫بالمثإال‬ ‫تإر‬ ‫كمإا‬ ‫الكتابة‬ ‫طريقة‬
‫فصإيل‬
‫إإ‬‫إ‬‫تنس‬ ‫فن‬ ‫فردت‬ ‫إإال‬‫إ‬‫ح‬ ‫إإي‬‫إ‬‫ف‬ ‫إإد‬‫إ‬‫تفي‬ ‫إإة‬‫إ‬‫الطريق‬ ‫إإ‬‫إ‬‫وتل‬ ‫إإا‬‫إ‬‫الحق‬
‫ر‬
‫ي‬ ‫بإا‬ ‫علإد‬ ‫التإعثير‬ ‫وبإدون‬ ‫بسرعة‬ ‫ا‬‫معين‬ ‫ا‬‫عنصر‬
‫العناصإر‬
‫به‬ ‫الخاص‬ ‫الوسم‬ ‫داخل‬ ‫من‬ ‫وحده‬ ‫هو‬ ‫تنسقه‬ ‫فعندها‬
•
‫للوسم‬ ‫التنسيقات‬ ‫بعض‬ ‫بذضافة‬ ‫منا‬ ‫هنا‬
h1
‫الخاصإية‬ ‫بإداخل‬
style
‫الموجإودة‬
‫إ‬‫إ‬‫تمام‬ ‫إادع‬‫إ‬‫ع‬ ‫إكل‬‫إ‬‫بش‬ ‫إا‬‫إ‬‫تطبيقه‬ ‫إم‬‫إ‬‫ت‬ ‫إد‬‫إ‬ ‫إا‬‫إ‬‫فنه‬ ‫إ‬‫إ‬‫ذل‬ ‫إد‬‫إ‬‫عن‬ ‫إد‬‫إ‬‫ونج‬ ‫إه‬‫إ‬‫نفس‬ ‫إو‬‫إ‬‫ه‬ ‫إه‬‫إ‬‫بداخل‬
‫إا‬‫إ‬‫كم‬ ‫ا‬
‫التالية‬ ‫بالصفحة‬
•
‫بالتفص‬ ‫القادمة‬ ‫بالدروس‬ ‫األوامر‬ ‫تل‬ ‫كل‬ ‫فسندرس‬ ‫تقلر‬ ‫ال‬
‫الممل‬ ‫يل‬
‫تباس‬ ‫ا‬
‫الرجاء‬ ‫علد‬ َ‫الخوف‬ ِ‫ب‬‫َل‬‫غ‬‫و‬
ِ‫تناء‬ ‫بال‬ َ ‫لموال‬ ْ‫ر‬ِ‫س‬‫و‬
ِ
‫لألوزار‬ َ‫ة‬‫وب‬َّ‫ت‬‫ال‬ ِ‫د‬ِ‫د‬َ‫ج‬‫و‬
‫ال‬
ْ‫ن‬َ‫س‬َ‫ا‬ْ‫ي‬‫ت‬
ِ
‫الغفار‬ ‫رحمة‬ ‫من‬
‫شكورا‬ ِ‫ه‬ِ‫ئ‬‫آال‬ ‫علد‬ ‫وكن‬
‫صبورا‬ ‫بالئه‬ ‫علد‬ ‫وكن‬
ْ‫والقدر‬ ‫بالقضاء‬ ٍ
‫فمر‬ ‫وكل‬
‫ر‬َ‫ف‬‫م‬ ‫عنه‬ ‫فما‬ ٍ
‫مقدور‬ ‫وكل‬
َ‫ت‬ ‫ي‬َ‫ك‬ ‫ما‬ِ‫ل‬َ‫س‬ُ‫م‬ ‫له‬ ْ‫ن‬ُ‫ك‬‫ف‬
‫ما‬َ‫ل‬ْ‫س‬
‫الناسكين‬ ‫سبيل‬ ‫واتبع‬
َ‫ل‬ُ‫ع‬‫ال‬
‫ما‬
ِ
‫األغيار‬ ‫من‬ َ‫القلب‬ ِ
‫ص‬ِ‫َل‬‫خ‬‫و‬
ِ
‫األسحار‬ ‫في‬ ِ‫والقيام‬ ‫بالجد‬
ِ‫الدوام‬ ‫علد‬ ِ
‫والذكر‬ ‫والفكر‬
‫مجتنبا‬
ِ‫اآلثام‬ ِ
‫لسائر‬
ِ‫ل‬‫األحوا‬ ‫في‬ ‫هلل‬ ‫با‬ ‫مرا‬
ِ‫ل‬‫الكما‬ َ‫عالم‬َ‫م‬ ‫لترتقي‬
‫تقطعني‬ ‫ال‬ ِ‫رب‬ ٍ‫ل‬ُ‫ذ‬ِ‫ب‬ ‫ل‬ ‫و‬
‫تحرمني‬ ‫وال‬ ٍ‫بقاطع‬ ‫عن‬
‫ل‬ ِ‫ل‬‫زي‬ُ‫م‬‫ال‬ ‫األبهد‬ َ ِ
‫ر‬ِ‫س‬ ‫ن‬ِ‫م‬
‫د‬َ‫م‬َ‫ع‬‫ل‬
َ‫رحيم‬ ‫يا‬ ٍ
‫بخير‬ ْ‫م‬ِ‫ت‬ْ‫واخ‬
‫الر‬
‫ما‬َ‫ح‬
‫فحمد‬ ‫العالمة‬ ‫لإلمام‬
‫الدردير‬
‫عنه‬ ‫هللا‬ ‫رضي‬ ‫األزهرع‬ ‫المالكي‬

CSS - LESSON1

  • 1.
    ‫الويب‬ ‫تصميم‬ ‫كورس‬ – CSSCourse Learn CSS| Full Course ‫الدرس‬ 1 – ‫الكود‬ ‫كتابة‬ ‫وطرق‬ ‫مقدمة‬ ‫وإعداد‬ ‫شرح‬ / ‫السالم‬ ‫عبد‬ ‫ماهر‬ ‫محمد‬
  • 2.
    ‫الدرس‬ ‫موضوعات‬ ‫الترتيب‬ ‫الموضوع‬ 1 ‫باللغة‬ ‫وتعريف‬‫مختصرة‬ ‫مقدمة‬ 2 ‫لغة‬ ‫مع‬ ‫المظهر‬ ‫في‬ ‫الفرق‬ CSS ‫وبدونها‬ 3 ‫لغة‬ ‫ألكواد‬ ‫العام‬ ‫الشكل‬ CSS 4 ‫بلغة‬ ‫الخاصة‬ ‫األكواد‬ ‫إضافة‬ ‫طريقة‬ CSS 5 ‫ال‬ ‫ملف‬ ‫تضمين‬ CSS ‫ال‬ ‫ملف‬ ‫بداخل‬ Html 6 ‫ب‬ ‫الخاصة‬ ‫التنسيقات‬ ‫إلضافة‬ ‫الثانية‬ ‫الطريقة‬ CSS 7 ‫ب‬ ‫الخاصة‬ ‫التنسيقات‬ ‫إلضافة‬ ‫الثالثة‬ ‫الطريقة‬ CSS
  • 3.
    ‫باللغة‬ ‫وتعريف‬ ‫مختصرة‬‫مقدمة‬ ‫الرحيم‬ ‫الرحمن‬ ‫هللا‬ ‫بسم‬ • ‫المتعلقإة‬ ‫األوامإر‬ ‫كإل‬ ‫شإرح‬ ‫فإي‬ ‫سإنبدف‬ ‫هللا‬ ‫بإذذن‬ ‫الدورة‬ ‫هذه‬ ‫في‬ ‫بلغإة‬ ‫التصميم‬ CSS ‫الو‬ ‫تصميم‬ ‫تعلم‬ ‫في‬ ‫الثانية‬ ‫الخطوة‬ ‫هي‬ ‫والتي‬ ‫بعإد‬ ‫يب‬ ‫إة‬‫إ‬‫لغ‬ Html ‫إ‬‫إ‬‫عليه‬ ‫إدربنا‬‫إ‬‫وت‬ ‫إيل‬‫إ‬‫بالتفص‬ ‫إرحناها‬‫إ‬‫وش‬ ‫إبر‬‫إ‬‫س‬ ‫إي‬‫إ‬‫الت‬ ‫ا‬‫إد‬‫إ‬‫جي‬ ‫ا‬ ‫اسإإتمعت‬ ‫إإد‬ ‫فنإإ‬ ‫فسإإاس‬ ‫علإإد‬ ‫معإإ‬ ‫سإإعتعامل‬ ‫الكإإورس‬ ‫هإإذا‬ ‫وفإإي‬ ‫ال‬ ‫لكورس‬ Html ‫ن‬ ‫مإا‬ ‫كإل‬ ‫هللا‬ ‫بذذن‬ ‫وسنتقن‬ ‫فيه‬ ‫ما‬ ‫كل‬ ‫وفتقنت‬ ‫قإدر‬ ‫لغة‬ ‫الجميلة‬ ‫اللغة‬ ‫من‬ ‫عليه‬ CSS ‫ا‬‫جيد‬ ‫التركيز‬ ‫علد‬ ‫فاحرص‬
  • 4.
    • ‫لغة‬ CSS ‫صإ‬ ‫وتنسإير‬ ‫لتصإميم‬‫المخصصإة‬ ‫التصإميم‬ ‫لغإة‬ ‫هي‬ ‫فحات‬ ‫ف‬ ‫لهإإا‬ ‫ويضإإيف‬ ‫للصإإفحة‬ ‫إإا‬‫جمالي‬ ‫ا‬‫مظهإإر‬ ‫يعطإإي‬ ‫بشإإكل‬ ‫الويإإب‬ ‫إإا‬‫لوان‬ ‫الصإ‬ ‫تظهإر‬ ‫بحيإر‬ ‫مناسإب‬ ‫مكإان‬ ‫فإي‬ ‫عنصإر‬ ‫كل‬ ‫ويضع‬ ‫مناسبة‬ ‫فحة‬ ‫الم‬ ‫إفحات‬‫إ‬‫ص‬ ‫إي‬‫إ‬‫ف‬ ‫إر‬‫إ‬‫ت‬ ‫إا‬‫إ‬‫كم‬ ‫إر‬‫إ‬‫ومتناس‬ ‫إل‬‫إ‬‫جمي‬ ‫إكل‬‫إ‬‫بش‬ ‫إة‬‫إ‬‫النهاي‬ ‫إي‬‫إ‬‫ف‬ ‫إع‬‫إ‬ ‫وا‬ ‫سإنت‬ ‫مإا‬ ‫وهإذا‬ ‫وغيرهم‬ ‫ويوتيوب‬ ‫وفمازون‬ ‫فيسبو‬ ‫مثل‬ ‫الشهيرة‬ ‫علمه‬ ‫هللا‬ ‫بذذن‬ ‫الدورة‬ ‫هذه‬ ‫في‬ . • ‫و‬ ‫الويب‬ ‫صفحات‬ ‫فساس‬ ‫نبني‬ ‫فننا‬ ‫تفهم‬ ‫فن‬ ‫علي‬ ‫يجب‬ ‫لذل‬ ‫العناصإر‬ ‫إإإة‬‫إ‬‫لغ‬ ‫إإإتخدام‬‫إ‬‫باس‬ ‫إإإا‬‫إ‬‫به‬ ‫إإإية‬‫إ‬‫األساس‬ Html ‫األزرار‬ ‫إإإل‬‫إ‬‫مث‬ ‫إإإوص‬‫إ‬‫والنص‬ ‫م‬ ‫ونعطيهإا‬ ‫العناصإر‬ ‫تلإ‬ ‫كإل‬ ‫ننسإر‬ ‫ثإم‬ ‫ذلإ‬ ‫وغيإر‬ ‫والعناوين‬ ‫ا‬‫ظهإر‬ ‫لغة‬ ‫باستخدام‬ ‫ا‬‫الئق‬ CSS ‫لغة‬ ‫بعن‬ ‫القول‬ ‫يمكن‬ ‫لذل‬ Html ‫لغإة‬ ‫هإي‬ ‫ولغة‬ ‫البناء‬ CSS ‫لغة‬ ‫هي‬ ‫والجماليات‬ ‫المظهر‬
  • 5.
    ‫لغة‬ ‫مع‬ ‫المظهر‬‫في‬ ‫الفرق‬ CSS ‫وبدونها‬
  • 6.
    ‫فهمية‬ ‫لمعرفة‬ ‫مهمة‬‫توضيحية‬ ‫صور‬ CSS
  • 8.
    • ‫لغإإة‬ ‫باسإإتخدام‬ ‫الويإإب‬‫صإإفحة‬ ‫شإإكل‬ ‫يبإإدو‬ ‫هكإإذا‬ CSS ‫وبإإدون‬ ‫ال‬ ‫لغة‬ ‫استخدام‬ CSS
  • 9.
    • ‫لغإإة‬ ‫باسإإتخدام‬ ‫الويإإب‬‫صإإفحة‬ ‫شإإكل‬ ‫يبإإدو‬ ‫هكإإذا‬ CSS ‫وبإإدون‬ ‫ال‬ ‫لغة‬ ‫استخدام‬ CSS
  • 10.
    • ‫لغإإة‬ ‫باسإإتخدام‬ ‫الويإإب‬‫صإإفحة‬ ‫شإإكل‬ ‫يبإإدو‬ ‫هكإإذا‬ CSS ‫وبإإدون‬ ‫ال‬ ‫لغة‬ ‫استخدام‬ CSS
  • 11.
    ‫لغة‬ ‫ألكواد‬ ‫العام‬‫الشكل‬ CSS • ‫فلغة‬ ‫ببساطة‬ CSS ‫تتع‬ ‫التي‬ ‫الخصائص‬ ‫بعض‬ ‫عن‬ ‫عبارة‬ ‫هي‬ ‫لإر‬ ‫ف‬ ‫نطبإإر‬ ‫ولكإإي‬ ‫الصإإفحة‬ ‫لعناصإإر‬ ‫البصإإرية‬ ‫بالتنسإإيقات‬ ‫تلإإ‬ ‫حإإد‬ ‫ب‬ ‫ونضإع‬ ‫تنسإيقه‬ ‫المإراد‬ ‫العنصر‬ ‫اسم‬ ‫نكتب‬ ‫التنسيقات‬ ‫وسإين‬ ‫عإده‬ { } ‫ونضإع‬ ‫الخاصإية‬ ‫اسإم‬ ‫نكتإب‬ ‫وبداخلهما‬ ( : ) ‫نكتإب‬ ‫ثإم‬ ‫يمإة‬ ‫ثإ‬ ‫ذلإ‬ ‫غيإر‬ ‫فو‬ ‫ا‬‫حجم‬ ‫فو‬ ‫ا‬‫لون‬ ‫ذل‬ ‫كان‬ ‫سواء‬ ‫الخاصية‬ ‫تل‬ ‫نخإتم‬ ‫م‬ ‫بعالمة‬ ‫السطر‬ ( ; ) ‫التنسإيقات‬ ‫مإن‬ ‫عإدد‬ ‫فع‬ ‫وضإع‬ ‫يمكننإا‬ ‫وهكذا‬ ‫التال‬ ‫الصفحة‬ ‫في‬ ‫تر‬ ‫كما‬ ‫الطريقة‬ ‫بنفس‬ ‫نريدها‬ ‫التي‬ ‫ية‬ .
  • 12.
    • ‫بتغي‬ ‫الخاصة‬ ‫التنسيقات‬‫بعض‬ ‫لإون‬ ‫يإر‬ ‫العنصر‬ ‫خط‬ ‫وحجم‬ ‫ومحاذاة‬ h1
  • 13.
    • ‫إال‬‫إ‬‫ب‬ ‫إيقه‬‫إ‬‫تنس‬ ‫إراد‬‫إ‬‫الم‬‫إر‬‫إ‬‫العنص‬ ‫إمي‬‫إ‬‫نس‬ Selector ‫إي‬‫إ‬‫الت‬ ‫إية‬‫إ‬‫الخاص‬ ‫إمي‬‫إ‬‫ونس‬ ‫بإإإال‬ ‫تعيينهإإإا‬ ‫فو‬ ‫تغييرهإإإا‬ ‫نريإإإد‬ Property ‫فو‬ ‫يمإإإة‬ ‫نعطيهإإإا‬ ‫والتإإإي‬ value ‫ن‬ ‫كإود‬ ‫طعإة‬ ‫القيمإة‬ ‫مإع‬ ‫للخاصإية‬ ‫النهائي‬ ‫الشكل‬ ‫ليصبح‬ ‫سإميها‬ Declaration
  • 15.
    ‫بلغة‬ ‫الخاصة‬ ‫األكواد‬‫إضافة‬ ‫طريقة‬ CSS • ‫إة‬‫إ‬‫كلم‬ CSS ‫إار‬‫إ‬‫اختص‬ ‫إي‬‫إ‬‫ه‬ Cascading Style Sheet ‫التنسإ‬ ‫عإن‬ ‫تعبإر‬ ‫لنإا‬ ‫كمإا‬ ‫ببسإاطة‬ ‫وهي‬ ‫يقات‬ ‫بالف‬ ‫إنشإابها‬ ‫تإم‬ ‫التإي‬ ‫للعناصإر‬ ‫نعطيها‬ ‫التي‬ ‫بلغإة‬ ‫عإل‬ Html ‫إ‬‫إ‬‫تل‬ ‫إافة‬‫إ‬‫إلض‬ ‫إة‬‫إ‬‫طريق‬ ‫إن‬‫إ‬‫م‬ ‫إر‬‫إ‬‫فكث‬ ‫إد‬‫إ‬‫توج‬ ‫إذل‬‫إ‬‫ول‬ ‫ال‬ ‫عناصإر‬ ‫إلإد‬ ‫التنسيقات‬ Html ‫إنشإابها‬ ‫تإم‬ ‫التإي‬ ‫بالت‬ ‫علإيهم‬ ‫سإنتعرف‬ ‫رئيسإية‬ ‫طإرق‬ ‫ثالثة‬ ‫وهم‬ ‫فصإيل‬ ‫التالية‬ ‫الصفحات‬ ‫في‬
  • 16.
    ‫تنسيقات‬ ‫إضافة‬ ‫في‬‫واألفضل‬ ‫األولد‬ ‫الطريقة‬ CSS • ‫تن‬ ‫إضإافة‬ ‫فإي‬ ‫ا‬‫شيوع‬ ‫واألكثر‬ ‫واألفضل‬ ‫األشهر‬ ‫الطريقة‬ ‫ال‬ ‫سإيقات‬ CSS ‫بلغة‬ ‫المعمولة‬ ‫األوامر‬ ‫إلد‬ Html ‫إا‬‫خاص‬ ‫إا‬‫ملف‬ ‫تنشع‬ ‫فن‬ ‫هي‬ ‫لغة‬ ‫فوامر‬ ‫فيه‬ ‫تضع‬ Html ‫فوامإ‬ ‫كإل‬ ‫فيإه‬ ‫تضإع‬ ‫آخإر‬ ‫ا‬‫ملف‬ ‫وتنشع‬ ‫ر‬ ‫لغة‬ ‫وتنسيقات‬ CSS ‫ملإف‬ ‫استدعاء‬ ‫فو‬ ‫بتضمين‬ ‫ذل‬ ‫بعد‬ ‫وتقوم‬ ‫ال‬ CSS ‫ال‬ ‫ملف‬ ‫بداخل‬ Html ‫عليه‬ ‫تطبيقه‬ ‫ليتم‬ • ‫إإة‬‫إ‬‫بلغ‬ ‫إإاص‬‫إ‬‫الخ‬ ‫إإف‬‫إ‬‫المل‬ html ‫إإميه‬‫إ‬‫نس‬ ‫إإب‬‫إ‬‫الغال‬ ‫إإي‬‫إ‬‫ف‬ index.html ‫بلغإة‬ ‫الخإاص‬ ‫والملف‬ CSS ‫نسإميه‬ style.css ‫الحريإة‬ ‫لإ‬ ‫ولكإن‬ ‫ذل‬ ‫بغير‬ ‫التسمية‬ ‫في‬
  • 17.
    ‫ال‬ ‫ملف‬ ‫تضمين‬ CSS ‫ال‬‫ملف‬ ‫بداخل‬ Html • ‫ال‬ ‫إف‬‫إ‬‫مل‬ ‫إمين‬‫إ‬‫لتض‬ CSS ‫ال‬ ‫إف‬‫إ‬‫مل‬ ‫إداخل‬‫إ‬‫ب‬ ‫إارجي‬‫إ‬‫الخ‬ Html ‫إوم‬‫إ‬‫نق‬ ‫األمر‬ ‫طرق‬ ‫عن‬ ‫باستدعائه‬ Link ‫الوسإم‬ ‫في‬ ‫يوضع‬ ‫الذع‬ Head ‫لغة‬ ‫في‬ ‫وتعلمنا‬ ‫سبر‬ ‫كما‬ Html ‫التالي‬ ‫السطر‬ ‫فنكتب‬ : <Link rel=“stylesheet” href=“style.css”> • ‫فإ‬ ‫مسإتقل‬ ‫بشإكل‬ ‫التنسيقات‬ ‫تمل‬ ‫فن‬ ‫الطريقة‬ ‫هذه‬ ‫ميزة‬ ‫ال‬ ‫ملإف‬ ‫ي‬ CSS ‫ب‬ ‫مع‬ ‫تريد‬ ‫ويب‬ ‫صفحة‬ ‫فع‬ ‫علد‬ ‫تطبقه‬ ‫فن‬ ‫يمكن‬ ‫الذع‬ ‫عإض‬ ‫التطبيقات‬ ‫في‬ ‫ا‬‫الحق‬ ‫سنراه‬ ‫ما‬ ‫وهذا‬ ‫البسيطة‬ ‫التعديالت‬ ‫العملية‬
  • 18.
    ‫ملف‬ ‫بذنشاء‬ ‫منا‬‫هنا‬ CSS ‫ال‬ ‫ملف‬ ‫داخل‬ ‫واستدعائه‬ Html
  • 19.
    ‫ب‬ ‫الخاصة‬ ‫التنسيقات‬‫إلضافة‬ ‫الثانية‬ ‫الطريقة‬ CSS • ‫ت‬ ‫إإي‬‫إ‬‫الت‬ ‫إإيقات‬‫إ‬‫التنس‬ ‫إإل‬‫إ‬‫ك‬ ‫إإافة‬‫إ‬‫إض‬ ‫إإاطة‬‫إ‬‫ببس‬ ‫إإ‬‫إ‬‫يمكن‬ ‫إإدها‬‫إ‬‫ري‬ ‫ال‬ ‫كود‬ ‫صفحة‬ ‫نفس‬ ‫بداخل‬ Html ‫األمإر‬ ‫بداخل‬ ‫ولكن‬ style ‫هكذا‬ ‫يكتب‬ ‫الذع‬ <style> </style> ‫وهإذه‬ ‫ع‬ ‫سنتعرف‬ ‫المواضع‬ ‫بعض‬ ‫في‬ ‫تفيد‬ ‫الطريقة‬ ‫ا‬‫الحق‬ ‫ليها‬ ‫التن‬ ‫إضافة‬ ‫إلد‬ ‫تبدع‬ ‫الطرق‬ ‫كل‬ ‫النهاية‬ ‫في‬ ‫لكن‬ ‫سيقات‬ ‫حال‬ ‫فع‬ ‫علد‬ ‫تقلر‬ ‫فال‬ ‫النهائي‬ ‫الشكل‬ ‫بنفس‬
  • 20.
    • ‫إإإافة‬‫إ‬‫بذض‬ ‫إإإا‬‫إ‬‫من‬ ‫إإإا‬‫إ‬‫هن‬ ‫التنسإإإإإيقات‬‫بعإإإإإض‬ ‫للوسإإإإم‬ h1 ‫بإإإإداخل‬ ‫إإر‬‫إ‬‫األم‬ style ‫إإد‬‫إ‬‫فنج‬ ‫ت‬ ‫إإيقات‬‫إ‬‫التنس‬ ‫إإه‬‫إ‬‫فن‬ ‫إإذ‬‫إ‬‫نف‬ ‫إب‬‫إ‬‫الوي‬ ‫إفحة‬‫إ‬‫ص‬ ‫إد‬‫إ‬‫عل‬ ‫إفح‬‫إ‬‫بالص‬ ‫إا‬‫إ‬‫كم‬ ‫إة‬‫إ‬ ‫بد‬ ‫ة‬ ‫التالية‬
  • 21.
    • ‫بالتفص‬ ‫القادمة‬ ‫بالدروس‬‫األوامر‬ ‫تل‬ ‫كل‬ ‫فسندرس‬ ‫تقلر‬ ‫ال‬ ‫الممل‬ ‫يل‬
  • 22.
    ‫ب‬ ‫الخاصة‬ ‫التنسيقات‬‫إلضافة‬ ‫الثالثة‬ ‫الطريقة‬ CSS • ‫تريإ‬ ‫التإي‬ ‫التنسإيقات‬ ‫كإل‬ ‫إضإافة‬ ‫ببساطة‬ ‫يمكن‬ ‫بإداخل‬ ‫دها‬ ‫إإإية‬‫إ‬‫الخاص‬ ‫إإإه‬‫إ‬‫إعطائ‬ ‫إإإر‬‫إ‬‫طري‬ ‫إإإن‬‫إ‬‫ع‬ ‫إإإده‬‫إ‬‫تري‬ ‫إإإر‬‫إ‬‫فم‬ ‫فع‬ style ‫تريإدها‬ ‫التإي‬ ‫التنسيقات‬ ‫عن‬ ‫عبارة‬ ‫لها‬ ‫يمة‬ ‫وإعطاء‬ ‫بإنفس‬ ‫بالت‬ ‫سإندرس‬ ‫وكمإا‬ ‫بالمثإال‬ ‫تإر‬ ‫كمإا‬ ‫الكتابة‬ ‫طريقة‬ ‫فصإيل‬ ‫إإ‬‫إ‬‫تنس‬ ‫فن‬ ‫فردت‬ ‫إإال‬‫إ‬‫ح‬ ‫إإي‬‫إ‬‫ف‬ ‫إإد‬‫إ‬‫تفي‬ ‫إإة‬‫إ‬‫الطريق‬ ‫إإ‬‫إ‬‫وتل‬ ‫إإا‬‫إ‬‫الحق‬ ‫ر‬ ‫ي‬ ‫بإا‬ ‫علإد‬ ‫التإعثير‬ ‫وبإدون‬ ‫بسرعة‬ ‫ا‬‫معين‬ ‫ا‬‫عنصر‬ ‫العناصإر‬ ‫به‬ ‫الخاص‬ ‫الوسم‬ ‫داخل‬ ‫من‬ ‫وحده‬ ‫هو‬ ‫تنسقه‬ ‫فعندها‬
  • 23.
    • ‫للوسم‬ ‫التنسيقات‬ ‫بعض‬‫بذضافة‬ ‫منا‬ ‫هنا‬ h1 ‫الخاصإية‬ ‫بإداخل‬ style ‫الموجإودة‬ ‫إ‬‫إ‬‫تمام‬ ‫إادع‬‫إ‬‫ع‬ ‫إكل‬‫إ‬‫بش‬ ‫إا‬‫إ‬‫تطبيقه‬ ‫إم‬‫إ‬‫ت‬ ‫إد‬‫إ‬ ‫إا‬‫إ‬‫فنه‬ ‫إ‬‫إ‬‫ذل‬ ‫إد‬‫إ‬‫عن‬ ‫إد‬‫إ‬‫ونج‬ ‫إه‬‫إ‬‫نفس‬ ‫إو‬‫إ‬‫ه‬ ‫إه‬‫إ‬‫بداخل‬ ‫إا‬‫إ‬‫كم‬ ‫ا‬ ‫التالية‬ ‫بالصفحة‬
  • 24.
    • ‫بالتفص‬ ‫القادمة‬ ‫بالدروس‬‫األوامر‬ ‫تل‬ ‫كل‬ ‫فسندرس‬ ‫تقلر‬ ‫ال‬ ‫الممل‬ ‫يل‬
  • 25.
    ‫تباس‬ ‫ا‬ ‫الرجاء‬ ‫علد‬َ‫الخوف‬ ِ‫ب‬‫َل‬‫غ‬‫و‬ ِ‫تناء‬ ‫بال‬ َ ‫لموال‬ ْ‫ر‬ِ‫س‬‫و‬ ِ ‫لألوزار‬ َ‫ة‬‫وب‬َّ‫ت‬‫ال‬ ِ‫د‬ِ‫د‬َ‫ج‬‫و‬ ‫ال‬ ْ‫ن‬َ‫س‬َ‫ا‬ْ‫ي‬‫ت‬ ِ ‫الغفار‬ ‫رحمة‬ ‫من‬ ‫شكورا‬ ِ‫ه‬ِ‫ئ‬‫آال‬ ‫علد‬ ‫وكن‬ ‫صبورا‬ ‫بالئه‬ ‫علد‬ ‫وكن‬ ْ‫والقدر‬ ‫بالقضاء‬ ٍ ‫فمر‬ ‫وكل‬ ‫ر‬َ‫ف‬‫م‬ ‫عنه‬ ‫فما‬ ٍ ‫مقدور‬ ‫وكل‬ َ‫ت‬ ‫ي‬َ‫ك‬ ‫ما‬ِ‫ل‬َ‫س‬ُ‫م‬ ‫له‬ ْ‫ن‬ُ‫ك‬‫ف‬ ‫ما‬َ‫ل‬ْ‫س‬ ‫الناسكين‬ ‫سبيل‬ ‫واتبع‬ َ‫ل‬ُ‫ع‬‫ال‬ ‫ما‬
  • 26.
    ِ ‫األغيار‬ ‫من‬ َ‫القلب‬ِ ‫ص‬ِ‫َل‬‫خ‬‫و‬ ِ ‫األسحار‬ ‫في‬ ِ‫والقيام‬ ‫بالجد‬ ِ‫الدوام‬ ‫علد‬ ِ ‫والذكر‬ ‫والفكر‬ ‫مجتنبا‬ ِ‫اآلثام‬ ِ ‫لسائر‬ ِ‫ل‬‫األحوا‬ ‫في‬ ‫هلل‬ ‫با‬ ‫مرا‬ ِ‫ل‬‫الكما‬ َ‫عالم‬َ‫م‬ ‫لترتقي‬ ‫تقطعني‬ ‫ال‬ ِ‫رب‬ ٍ‫ل‬ُ‫ذ‬ِ‫ب‬ ‫ل‬ ‫و‬ ‫تحرمني‬ ‫وال‬ ٍ‫بقاطع‬ ‫عن‬ ‫ل‬ ِ‫ل‬‫زي‬ُ‫م‬‫ال‬ ‫األبهد‬ َ ِ ‫ر‬ِ‫س‬ ‫ن‬ِ‫م‬ ‫د‬َ‫م‬َ‫ع‬‫ل‬ َ‫رحيم‬ ‫يا‬ ٍ ‫بخير‬ ْ‫م‬ِ‫ت‬ْ‫واخ‬ ‫الر‬ ‫ما‬َ‫ح‬ ‫فحمد‬ ‫العالمة‬ ‫لإلمام‬ ‫الدردير‬ ‫عنه‬ ‫هللا‬ ‫رضي‬ ‫األزهرع‬ ‫المالكي‬