باللغة العربية CSS دورة

دورة مطوري الويب

[email protected] أنيس حكمت أبوحميد

2


, الدم�د ل الواح�د األح�د, الدمد ل الذي بدم�ده ت�تم ال�نعم, الدمد ل صاحب الفضل...الدمد ل رب العالمين

ونع�وذ , ونسألك توبة نص�وح ل�ك, مغفرة من عندك, نسألك يا هللا يا رحمن يا رحيم....ونسألك رحمتك, بك من غضبك

ونع�وذ ب�ك م�ن أي عم�ل , اللهم إنا نسألك رزقا ح�الال طيب�ا مبارك�ا في�ه يقربن�ا الي�ك.يبعدنا عنك يا هللا يا كريم

وه��و المخ��تص بطريق��ة تس��نيق ص��فدة , اآلن لنب��دأ ب��الجزء الث��اني عل��ى برك��ة هللا... cssباستخدام ال , الويب


عليك أن تعلم صديقي أن جميع ما سيتم ذكره من أمثل�ة ومواض�يع ل�ن تغط�ي ع�الم وتأكد أن دور أي , ولن تغطي جميع الخصائص لكل عنصر, الويب بشكل كامل

واجعل م�ن , كتاب هو أن يضعك على الطريق وأنت عليك أن تكمل/دورة/شرحGoogle واجع��ل ص��ديقك الث��اني , وال تبتع��د عن��ه نهائي��ا..ه��و ص��ديقك األول

, إذا فعل�ت ذل�ك..وتتج�اوز , إياك أن تقول س�هل, التطبيق العملي لكل أمر تتعلمه... !!تأكد أنك لن تستطيع كتابة شيفرة برمجية صغيرة

يقسم العمل به الى , أي موقع الكتروني تراه أمامك*: _*معلومة على الطاير جزئين

Front End وBack end ..وهو الجزء الذي تراه ويعمل أمامك مثل التصاميم وتنسيق Front endال

...الصفدة والتفاعل معها فهو الجزء الذي يعمل بالخفاء مثل التعامل مع قواعد Back endأما ال

..البيانات [email protected] أنيس حكمت أبوحميد

...أيضا مالحظة مهمة قبل أن تبدأ

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

ه��ذه األس��ئلة عن��دما ت��أتي لتق��وم بحله��ا ... الوق��ت هن��اك أس��ئلة ال تق��م بأخ��ذ أي ج��زء م��ن الش��يفرة البرمجي��ة نس��خ وم��ن ث��م ...

ق�م بكتاب�ة الش�يفرة ..ان�ت ل�م ت�تعلم ش�يئا ..إن فعل�ت ه�ذا .. لصقوه��ذه م��ن أه��م ... وانظ��ر أي��ن تخط��ئ تص��بح ل��ك خب��رة برمجي��ة

...النقاط قبل البدء


أي عمل يخالف الشريعة االسالمية بأي وسيلة كانت فأنت **) وهذه الدورة مجانية لكل من لن , مسؤول عن ذلك أمام هللا تعالى

...يخالف الشريعة االسالمية في عمله

: متطلبات الدورة**) *HTML


بسم هللا الرحمن الرحيمالدات أن لهم جنات تجري ر الذين آمنوا وعملوا الص وبشمن تدتها األنهار كلما رزقوا منها من ثمرة رزقا قالوا

ذا الذي رزقنا من قبل وأتوا به متشابها ولهم فيها هأزواج مطهرة وهم فيها خالدون

صدق هللا العظيم


25اآلية , سورة البقرة

Cascading وهي كلمات لثالثة اختصار هي css ال Style Sheets, اللغة هذه ,الجداول ,الخلفيات ,األلوان حيق من ,الويب صفدة لتنسيق باستخدامها نقوم

يشد ,جميل بشكل الموقع لنا يظهر حتى ,األمور هذه من الخ..الدقول ,القوائم يظهر أن تريد التي الطريقة أنه على style ال تعريف ويمكنك...^_^ المستخدمين

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

بالصفدة التدكم على القدرة هو احداها ,الجميلة الميزات من العديد يقدم css ال إنhtml ال من والتقليل ,أكبر بشكل tag .. ال من العديد هناك ..كيف سألت وإن tags ال مثل اليها نتطرق لم التي font tag بسبب..الستخدامه داعي ال ألنه ..وخصائصها css ال وجود

تتعلم أن تستطيع ال أنك.. بذلك وأعني -_* واحد بوجه لغتان ... html وال css ال !! األخرى وتنسى لغة


: بثالث طرق وهي CSSيمكنك كتابة أي شيفرة برمجية بلغة ال 1 (Inline : ويكون التنسيق موجود بداخل عنصر الhtml مباشرة مثل:

يعني colorال ^_^, p tagداخل ال styleهنا تالحظ استخدامنا لخاصية وهنا (ثم اسم التنسيق “ ثم = ثم styleوكما تالحظ الصيغة , لون الخط

color ( ثم ^_^ ثم القيمة الخاصة بهذه الخاصية ثم فاصلة منقوطة : ثم“اغالق


:inlineمزايا ال

أي أنه أقل .. lower http requestهي inline styleأهم مزية لل وهذا مفيد جدا في تدسين أداء الموقع , serverاسلوب ممكن يتعامل مع ال

.... externalويجعله أسرع من ال

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

..!!فهذا يعني عشر تعديالت , فلو فرضنا أنه لديك عشر فقرات, التعديل


2 (Internal :ال ويكون تضمين التنسيق داخل صفدةHtml نفسها ولكنولكن كيف؟, ليس بداخل العنصر

<style>يسمى tagلقد ذكرنا وقتها وجود ... ؟ head tagهل تذكر ال يمكنك اعطاء التصميم للصفدة من خالل هذا ... اآلن هذا هو دوره ...^_^

... tagال

: لنشاهد مثاال

:internalمزايا ال يمكنك أن تقوم بوضع تنسيق واحد للعناصر الموجودة بنفس الصفدة مرة واحدة

.. وعند التعديل فقط ستدتاج الى تعديل هذه فقط, فقط

فهذا أيضا يقلل من ال , من السيرفر لملف خارجي downloadوال تدتاج لعمل http requests....

: سيئاتهال يمكنه التعامل مع العناصر الموجود بالملفات الخارجية


3 (External : ويكون هنا التنسيق موجود خارج الصفدة الhtml , ويضمنفي ال head tagالتي ذكرناها بموضوع ال <link>تضمين باستخدام ال

html , التنسيق يكون مدفوظا على شكل ملف بامتداد(.css)

, وذلك ألمر مهم جدا جدا, عادة فإننا نستخدم هذا األسلوب لتنسيق الصفداتإما باإلضافة أو , وهو مكان واحد يمكنني أن أعدل على جميع الصفدات

...بعكس األسلوبين السابقين , الدذف أو التعديل

كمثال سنستخدم ...كما تريد cssيمكنك أن تقوم بتضمين ملفات : مالحظة^_^ ملف واحد فقط >----: واآلن لنرى مثاال

:externalمزايا ال , يعطيك تدكم كامل بجميع صفدات الموقع الخاص بك وبما فيهن من عناصر

ويمكن أن نضع تنسيق لجميع , وكل التنسيق يكون متواجد بصفدة واحدةويقلل من حجم ملفات ال , من فئة معينة لكل الصفدات htmlعناصر ال

html ألن التنسيق أصبح بمكان واحد ,

: سيئاته.من األسلوبين السابقين, أبطأ بالتدميل


: واآلن لنشاهد مثاال نستخدم به الطرق الثالثة


: 1مالحظة مهمة

..وتطبيقها cssيجب عليك معرفة ترتيب األولويات بالتنفيذ لخصائص ال أو التصميم inlineأو internalأو externalمن ملف cssبديث أه اذا وجد ال

)والوانها aمثل ال ..(االفتراضي الي بكون من المتصفح

(1Inlineوهو أعلى أولوية بالتنفيذ.(2Internal ) اذا تم كتابة الstyle بعد استدعاء الexternal css ( واال فتقلب

..األولويات (3Externalالتنسيق االفتراضي من المتصفح4)

بالترتيب...األعلى أولوية 1الترتيب من النقطة


: 2مالحظة مهمة ... ينفذ األوامر بشكل متتابع سطر بسطر cssأن , يجب عليك أن تعلم صديقي

, وإن وجد تنسيقان لنفس الخاصية, فيقوم بتنفيذ األكواد بنائا على هذه األوليةوهذا يسمى ب , فإنه يقوم بأخذ الخصائص المتشابه وتعديل قيمها بالجديد

override ...واذا كان , أي أنك تقوم بالتعديل على قيمة الخاصية األصلية..يتم االبقاء عليها ..هناك خصائص غير موجودة من كال الجانبين

... P:شاهد المثال ليتضح الكالم

>,--الشريدة التالية


العمل الجماعي هو القدرة على العمل معا ندو رؤية القدرة على توجيه اإلنجازات الفردية باتجاه .مشتركة

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


أندرو كارنيجي

والصيغة الخاصة بها...وأهميتها commentعن ال htmlلقد تكلمنا في ال وهي commentطريقة برمجية لكتابة ال cssوبذات األسلوب فإن لل

...^_^لكن العمل هو واحد , تختلف فقط باسلوب الكتابة

*_* cssشاهد كيف يتم كتابتها بال


اآلن حان دور الدديث عن ..cssبعد أن تكلمنا عن الطرق الثالث لكتابة ال ^_^قواعد الكتابة بهذه اللغة


:شرح الصورة السابقة(1selector : هو أيhtml tag أو ما , يمكن استخدامه ويقبل التنسيق

الخ.. idأو ال classمثل tagيشير الى هذا ال (2Declaration : وهو الblock الذي يقع بداخله التنسيق الخاص بال

selector .. وينتهي ب {ب ويبدأ{.(3Property :مثل , وهي الخاصية التي نريد استخدامها لتظهر نسق معين

^_^ propertyهي ال colorف ) ..color(استخدامنا لخاصية اللون (4Value : مثل أحمر..وهي القيمة التي اريد اسنادها للخاصية المستخدمة ,

... colorفهنا أسندت اللون األحمر لخاصية ال

( : )هو value & propertyانتبه أن الذي يفصل بين ال : مالحظة


:شاهد مثال


لألمثلة القادمة ...مالحظة مهمة جدا

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

الخاصة htmlوصفدة ال style.cssبل انظر الى صفدة التنسيق وهي هنا ... بالمثال

يمكنك عرض الشيفرة البرمجية إما عن طريق المتصفح أو عن طريق الضغط ... editيزر الفأرة األيمن على الملف ومن ثم اختيار


وعرفناه بأنه أي selectorلقد ذكرنا ما هو ال ... هذا الموضوع مهم جداhtml tag أو ما يشير الى هذا ال , يمكن استخدامه ويقبل التنسيقtag مثل

class أو الid ..الخ

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

, يدب عليك أن تعلم أن هناك أنواع متعددة.. selectorأثناء تعاملك مع ال الذي تقوم باستخدامه لعنصر واحد أو أكثر Selectorويمكن أن يكون ال

...^^فعليك أن تهتم بهذا التفصيل إلنه مهم .... من عنصر


: الرئيسية Selectorsواآلن لنبدء بذكر ال : tagعن طريق اسم ال ) 1 pرح يكون selectorال يكتب هكذا tagال

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

فسيقوم على توزيع اللون ..وقمت باعطائه اللون األحمر h1فمثال لو قمنا بوضع ...h1األحمر على جميع ال

: شاهد هذا المثالمثال Selectorيمكن التتابع باستخدام ال : مالحظة*)

body div p{ color: red; } وبنستخدم هذا االسلوبأو نزيد األولوية divالي موجودة داخل ال pعشان نخصص الخاصية مثال لكل ال

لكن ذكرتها لوضع المثال الدالي ) سيتم شرح هذا الكالم بإذن هللا تعالى... (الي الها ^^

2 (id : لقد شاهدت بالعديد من األمثلة أنني قمت باستخدام الid , واآلن حان...^_^الوقت لشرح هذا المر بإذن هللا تعالى

ووظيفتها تدديد العنصر , html tagهي خاصية يمكن اضافتها لل idال ...نستطيع استخدامها فيما بعد لتخص هذا العنصر فقط , بقيمة مميزة

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

فهي تستدعى بهذا الشكل ”id=“wrapperمثال ..قبل االسم ) #( اشارة #wrapper ^_^

: شاهد المثال


3 (class : هذه الخاصية من أهم خصائص الSelector وأروعها وأفضلهاهذه الخاصية مفيدة جدا أيضا لتدديد العنصر أو العناصر التي ....^_^

يكنك ..باإلضافة الى ذلك...تشترك بنفس اسم الكالس بخصائص مشتركة أما عن طريقة استدعاء ال ^_^, لنفس العنصر classانشاء أكثر من

class مثل ..قبل اسم الكالس ( . ) فهي بوضعclass=“psize”; ^_^ psize.االستدعاء يكون

‘...!!!برقم idأو ال classال تبدأ اسم ال : مالحظة مهمة

^^ classشاهد اآلن هذا المثال على استخدام ال


من التدكم بجميع Selectorوذكرنا كيف يمكن لل Selectorsتكلمنا عن ال واآلن يمكنك أيضا أن تقوم بعمل مجموعات من ال ..htmlعناصر ال

Selectors ولكتابة أي ..ليأخذو نفس التصميمGroup Selector نقوم... على وضع اسم العنصر ومن ثم فاصلة وهكذا

p, h1, div, span { any css code }: مثل


هل الحظت كيف شكل النتائج ؟, في المثال السابق أريدك أن تنبه للنتائج جيدلماذا؟

text-align: center هذه وظيفتها أن تجعل مداذاة النص الى المنتصف ,؟ aولكن لماذا لم تعمل على ال

فإن كنت تذكر درسنا عن .. h1و pوطبيعة ال aالسبب يعود لطبية كل من ال هما h1وال pوأما ال inlineهي aفإن ال ... inlineوال Blockال

block ..يكتفي بمقدار inlineأما ال , يدجز مساحة وتعتبر حيزه لوحده blockال

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



!! واآلن كيف يمكننا حل هذه المشكلة ؟

^_^ displayسندعها اآلن لدين وصولنا الى

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


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

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

...فإننا ننتقل الى هنا , وبعد فهم هذه النقطة

يرجى العودة وقرائتها ..اذا لم تكن قد قرأت الشرائح األولى بتمعن : مالحظة^_^نريدك مبرمجا وليس ناسخا ... قبل البدء من هنا


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

: تعرف عنها ما يلي(1background-color(2Background-image(3Background-repeat(4Background-position(5background-attachment(6Background (for shortcut way)

css3لكن هذه ... background-sizeطبعا هناك خصائص أخرى مثل ...عندما نصل اليها , سنتكلم عنها بإذن هللا تعالى


1(background-color : نستخدم هذه الخاصية لتغيير لون الخلفية أليhtmlعنصر من عناصر ال

:الصيغة العامة هي

^_^كما تالحظ فإنه يمكنني كتابة اللون باإلسلوب الذي يناسبني

2 (background-Image : تستخدم هذه الخاصية لوضع صورة كخلفيةهذه الخاصية مهمة جا ومفيدة جدا في التعامل مع , htmlلعناصر ال

ألن ال ..^_^ ...دائما imgفال نستطيع استخدام ال , صفدات االنترنتimg أصال عنصرhtml ...


فهي background-imageأما بخصوص الصيغة العامة لل

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

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

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


يدتوي على خلفية ذات لون divوقم بانشاء Htmlقم بانشاء صفدة .. آخر يدتوي على خلفية صورة divو.. أخضر

(3Backround-repeat : من المشاكل التي يمكن أن تظهر عند.. هو عملية التكرار للصورة بشكل أفقي أو عامودي, استخدامك للصور

وبذات الوقت من .. no-repeatهذا التكرار يمكن ايقافه باستخدام وهي ميزة جد رائعة هي خاصية ال CSSاألشياء الرائعة جدا في ال

repeat ..!! أن هناك ..والسبب في ذلك ... طبعا ال !! هل هذا تناقضونقوم بعمل تكرار له ..مثال 1pxصور أو خلفيات نقوم بأخذ جزء منها

مهما ..وهذا أمر جد رائع ومرن ..أو اخذ جزء من صورة وتكراره ... ...ازداد الدجم

:شاهد الصيغة


ال يوجد تكراريوجد تكرار افقي

يوجد تكرار عامودي

آخر فيه نفس الصورة divو, وامنع هذه الخلفية من التكرار لكل االتجاهات) صورة(يدتوي على خلفية divقم بانشاء :widthقد تدتاج الى وضع خاصية : مالحظة.. yآخر امنع به التكرار للمدور divو, xوامنع التكرار للمدور

1000px والheight: 1000px ).. بس عشان تخلي حجم الdiv ويصير في ..كبيرrepeat ^_^

4 (background-position : ومفيدة ..خاصية جميلة ورائعة جداهذه الخاصية تمكنك من التالعب بموقع الخلفية اذا كان ... لإلستخدام

ولها استخدامات عديدة ) يعني انتى بتتالعب بموقع الخلفية...(صورة .. جدا

عندما أقم بوضع صيغة فال يقصد بها أن القيم (واآلن لنرى الصيغة العامة لها): وإنما القيم هي مثل لتتضح الصيغة , ثابته


5 (background-attachment : يمكننا أن نستخدم هذه الخاصية لجعلأو fixedالخاص بالصفدة أو ال يعني إما scrollالخلفية تسير مع ال

scroll عندما يكون الخيار ..وهو الدالة االفتراضيةfixed .. فإنه عندستبقى الخلفية متدركة معك أما اذا كانت scrollingقيامك بعملية ال

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

.. ولكن لنرى الصيغة العامة أوال ...تم ذكره من خصائص ان شاء هللا


-backgroundوقم باستخدام ال ..يدتوي على خلفية صورة divوقم بانشاء Htmlقم بانشاء صفدة position وباستخدام أحد القيم مثل , وبالبكسل, بالنسبة المئويةleft center ..وانظر النتائج

6(Background (for shortcut way) : اذا الحظت وقرأت األمثلةفستجد أنه في كل مثال قمت بكتابة جميع الخصائص بالشكل , السابقة:التالي

ذلك وجود ..الكن هذا الشكل متعب بالبرمجة ويدتاج وقتا أكثر للكتابة مع العلم أننا في المجمل أثناء البرمجة (هناك طريقة لتسهل علينا العمل

الكن اذا أحببت انجازا وسرعة ) _^*نستخدم األسلوبين حسب الرواق ..فاستخدم اسلوب االختصار هذا .. وسهولة في العمل

: مثل


:مثل

: هناك قواعد لترتيب الخصائص وهي background-color background-image background-repeat background-attachment background-position

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


أخاك أخاك إن من ال أخا له “ فر أخزاه هللا"خير من " قتل رحمه هللا"كساع إلى الهيجا بغير سالح


, وهذا األمر لم يهمل بتاتا في تنسيق صفدات الويب, تنسيق النصوص أمر بالغ األهمية^_^لذلك وجد جزء خاص لتنسيق النصوص داخل صفدات الويب

: من خصائص تنسيق النصوص1(Color2 (Alignment3(Decoration4(Transformation5(Indentation6 (letter-spacing7 (line-height8(vertical-align9(word-spacing

ولم أذكر ما يخص ال css2طبعا ما يخص النصوص وما تم ذكره اآلن هو خاص بال css3 مثل الtextshadow ^___________^


(1color : من أكثر الخصائص التي ذكرناها أثناء تنفيذنا لألمثلة المختلفةوظيفة هذه الخاصية هي ) ...P:السبب النها سهلة بالفهم وسريعة التنفيذ ..(

*_* ;color: redمثل ^_^ تغيير لون النص

ستجد أنه بمجرد اعطائك , أثناء تغييرك أللوان النصوص: مالحظةسيتم تدويل اللون .. htmlلخاصية اللون ألي عنصر من عناصر ال

فإن اللون في ... <a></a>باستثناء اذا احتوى ال , حسب القيمة الجديدة <a>ولتغييره نقوم باعطاء ال <a>جميع هذا العنصر سيتيغر الى ال

طبعا في حال اردنا ان يكون لون الرابط من لون (أيضا خاصية اللون..^_^) النص


, ثم قم بتغيير لون الخط الى األخضر, هذه الفقرة تدتوي على نص و رابط, قم بانشاء صفدة تدتوي على فقرة^_^وشاهد ماذا سيددث

(2Alignment :ويقصد بذلك إما , تستخدم هذه الخاصية للتدكم باتجاه النص أفقيا justifyأو في منتصف الشاشة أو , أو من اليسار لليمين, من اليمين الى اليسار

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

: الصيغة العامة هي

^_^ خاصية بسيطة لكنها مفيدة جدا يددد بنائا على اتتجاه عرض المدتوى , القيمة االفتراضية التجاه النص: مالحظة

فإن , أي االتجاه من اليمين direction: rtlفمثال لو كان ال ..في الصفدة فإن االتجاه لل ltfأما اذا كان ....هي اليمين text-alignالقيمة االفتراضية لل

text-aling سيكون لليسار.


واجعل لكل فقرة لون , كل فقرة يكون اتجاه النص بها مختلفا عن اآلخر, فقرات 4قم بانشاء صفدة تدتوي على *^_..خاص بها

(3Decoration : تقوم هذه الخاصية على تغيير شكل النص إما بوضع خطتجد أن الدالة , مثل الروابط, فوق النص أو في منتصفه أو أسفل منه

...االفتراضية للروابط هي وجود خط أسفل منه

: الصيغة العامة

none :بهذه القيمة نعني ال يوجد خط لهذا النص.Underline :هنا تعني هذه القيمة يوجد خط أسفل النص

overline :هنا تعني القيمة وجود خط فوق النص.Line-through :وهذه تعني وجود خط في منتصف النص .


, يعني رابط فوقه خط... (يدتوى على األشكال األربعة ألماكن الخطوط) <a>(روابط 4قم بانشاء صفدة تدتوي ورابط آخر ال يوجد لديه خط, ورابط آخر تدته خط, ورابط آخر في منتصفه خط

(4Transformation : هذه الخاصية الجميلة تتيح لنا التدكم بدالةأو capital letterأو small lettersهل هي ... األحرف

capitalize ... الدالة االفتراضية لهذه الخاصية هيnone ..

: الصيغة العامة هي

none : بدون تعديل..سيقوم بأخذ األحرف كما هيcapitalize : تقوم بتغيير الدرف األول من كلمة الىcapital letter.

Uppercase : يقوم على تدويل جميع األحرف الىcapital lowercase : يقوم على تدويل جميع األحرف الىsmall


lowercaseوالثاني uppercaseواجعل السطر األول , كلمات 3كل سطر فيه , قم بانشاء فقرة بها أربعة أسطروالرابع بشكله االفتراضي capitalizeوالثالث

:مالحظة

... ^_^الحظ هذا الشكل يا صديقي العزيز

لو فرضنا أنني سأقوم باعطاء خصائص معينة مثل اللون ألول فقرة كيف يمكن ذلك ؟؟؟) ..المظللة بالون الزهري (

, !!فإن الخاصية ستذهب للفقرة األولى والثالثة.. a1اذا حاولت استخدام ال !!.. فإن الخاصية ستذهب للفقرة األولى والثانية xوإذا حاولت استخدام ال

! إذن ما الدل برأيك ؟أن نقوم بوضع الخصائص cssبإمكاننا عندما نتعامل مع ال , الدل بسيط

بشكل متتابع بدون فراغات لنقول أن هذه الكالس موجودة في عنصر a1.x.: يعني الدل يجب أن يكون بالشكل التالي..معين


(5Indentation : تستخدم هذه الخاصية لتدديد مسافة أو فراغ قبل بداية... النص وألول سطر فقط

:الصيغة العامة

الخ .. px, %, emيمكنك وضع طول المسافة بأكثر من وحدة مثل ال


المسافة يجب أن تكون للسطر األول من الفقرة ..^_^ .... 50pxواجعل لهذه الفقرة مسافة بادئة بمقدار , قم بانشاء فقرةفقط

(6letter-spacing : تقوم هذه الخاصية على زيادة أو انقاص المسافة بين... األحرف نفسها الموجودة داخل نص معين


الموجبة تزيد من , هذه الخاصية يمكنها أن تستقبل قيما سالبة وموجبة.normalأما الخاصية االفتراضية فهي , المسافة والسالبة تنقص منها

:قم بطباعة الشكل التالي letter-spacingباستخدام خاصية ال


(7line-height : تستخدم هذه الخاصية لتدديد المسافة الطولية)االرتفاع (_^..*بين االسطر


.ويكن االرتفاع بها بالدجم الطبيعي, هي الدالة االفتراضية: normalال ويعتمد على .. pxفهو رقم يدون صيغة قياس مثل ال : numberأما ال

;line-height: 3مثل ..ليتضاعف وينتج مقدار االرتفاع , حج الخطوهنا تعتمد على ..وهي ما تهمنا هنا وما يكثر استخدامها : lengthأما ال

: مثال...الخ ..أو النسبة المئوية pxمقدار مرتبط بوحدة مثل line-height: 25px; ^_^


واجعل المسافة بين األسطر , مكونة من عدة أسطر, قم بانشاء فقرة.. 100pxأكبر من

(8vertical-align : تستخدم هذه الخاصية لتدديد موقع نص معين عاموديامن , cssوبهذا فإنه أصبح بإمكاني التدكم بموقع النص بنائا على ال ,

بس عن طريق .. subو superالخصائص التي يمكن أن نستخدمها هنا .... tagدون استخدام ال cssال


: هذه الخصائص تعنيويكون النص بمداذاة خط , وهو الدالة االفتراضية: baseline) أ

خط األساس هو الخط الي يكون نقطة انطالق أو ..( parentاألساس لل *)_*مثل دفاتر المدرسة (تمدور النص من خالله إن صح التعبيير


فإنك , عندما أذكر أن خاصية معينة وأذكر قيمة أنها الدالة االفتراضية: مالحظةفستكون مكتوبة بالشكل ..إن لم تكتب أو تستخدم هذه الخاصية لعنصر ما

..فيختلف األمر ..أما اذا اجرى تعديل...االفتراضي

وهي القيمة التي مقدار االزاحة عموديا إما بزيادة بشكل : length) ب ;50pxموجب أو نقصان بشكل سالب وتكتب القيمة مع الوحدة مثل

ولكن هذه اعن ..بنفس الفكرة .. فهي تشبه ال : sub) ج. cssطريق ال

... وهي تشبه أيضا ال : super) د

يددد االزاحة إما في أعلى مسافة لل : top, middle, bottom) هparent أو في المنتصف أو في النهاية

(9word-spacing : تستخدم هذه الخاصية لزيادة أو انقاص المساحة بينذكرنا سابقا كيف يمكننا زيادة أو انقاص المسافات على .. الكلمات نفسها

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


ويمكننا تغييرها عن طريق وضع ... normalالدالة االفتراضية هي ...الخ 80pxأرقام مثل

, بإذن هللا تعالى textالخاصة بال 9بهذا نكون انتهينا من الخصائص ال *^_.. الخ.. text-shadowمثل ال css3أما ما تبقى فندعه ل


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

..^_^وان كنت ال تستطيع فداول ...فقم ببناء واحدة ... اذا كنت تستطيع ذلك

بعد تطبيقك أو انتهائك من تنفيذ الخطوة السابقة (بعد ذلك انظر لهذا المثال ^_^التي تم ذكرها 9انظر لهذا المثال الذي يشمل الخصائص ال .. ^_^


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

هذا لكل العــــالمين رســـول هذا رسول هللا نبراس الهدى


, ! لكن هل هذا ينهي تعاملنا معها؟, تكلمنا في الموضوع السابق عن تنسيق النصوصوهذا , ألن هذه النصوص تتدكم بها أمور أخرى مثل الخطوط, الجواب طبعا ال

, كيف يمكننا تغييرها,عن الخطوط, سنتكلم بإذن هللا تعالى, هو موضوعنا اآلنباإلضافة الى التدكم , webfontالى ttfتدويل خط بصيغة , اضافة خط جديد

... الخ من هذه األمور..ومقدار سماكته , بتنسيق الخط

:fontمن خصائص ال (1font-family(2Font-size(3Font-style(4font-weight(5Font (shorthand syntax)


1 (font-family : هذه الخاصية تستخدم لتدديد نوع الخط ألي عنصر منلكن ان , يكون من مقطع واحد عادة fontاسم ال , ... htmlعناصر ال

جاء اسم الخط من أكثر من مقطع وبينه فراغات فإنه يجب أن يوضع داخل quote مثل“x font” ..يمكن أن يسرد أكثر من اسم لخط وراء , أيضا

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

:واآلن لنرى الصيغة العامة


.. هو نوع الخط المراد tahomaفإن ..كما تالحظ هنا في الصورة في السطر الثاني هو نوع خط آخر لكن ألن امسه مكون من مقاطع يفصل

أما السطر الثالث فهو في حال لم يجد .. “ “بينها فراغات تم وضعها داخل *^_.. Arialانتقل الى الثاني وهو ..الخط األول أو لم يستطع تنفيذه


.وقم بوضع الخطوط التي تراها بالصورة, فقرات3يوجد بداخلها , قم بانشاء صفدةfont-family: y 2وفقرة font-family: xلكل فقرة يعني فقرة واحد font-familyبكل تأكيد يوضع سطر واحد *)

....وهكذا

2 (font-size : هاي من أكثر الخصائص الي استخدمناها باألمثلة السابقة*^_ P:برضو إلنها سهلة التنفيذ واالستخدام وواضدة ..

..إما بالزيادة وإما بالنقصان , وظيفة هذه الخاصية هو تغيير حجم الخط


, الخ.. cm, em, ptبوحدات قياس مختلفة مثل , يمكنك وضع حجم الخطويكون هنا القياس %باإلضافة الى ذلك يمكنك وضع القياس بالنسبة ال

والنسبة تكون من نسبة حجم الخط .. parentمعتمد على حجم الخط لل طبعا , larg, small, mediumأيضا هناك .. parentالخاص بال

>>>>..هناك الكثير ... mediumالدالة االفتراضية هي


..ماذا أستخدم من الصيغ أو القيم التي ذكرت.. اآلن ستتسائل أنت

والطريقة التي , فيعود لطبيعة المبرمج وفكره..اآلن بالنسبة لهذا الكالم لكن هناك طريقتان غالبا ما يتم , ال يشترط أن تتقيد بها أنت, أعمل بها

..العمل عليهم من قبل المبرمجين

هذا األسلوب يعد من أفضل األساليب ) : px(وهي باستخدام ال : األولىوالذي يشترك على جميع المتصفدات , التي تددد بدقة متناهية حجم الخط

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

emوهي باستخدام ال : الثانية &(or) % : وهنا أهم ما يميزه أن حجموهذا يجنبنا أحد أهم مشكالت , مع بعضه للمدتوى relativeالخط يكون ... pxاستخدام ال


شخصيا أنا أستخدم ال ... سأقول لك استخدم ما تراه مناسبا لك !... اآلن ماذا؟ px انت اختر ما تريد ... واتعامل معها..

كان لكل اسلوب ..عند بدثي حول الموضوع وأيهما أفضل استخداما ..وللدقيقة وهناك من .. pxوهناك من ينصح بالتعامل فقط مع ال ... عيوبه ومزاته

emوهناك من ينصح بالتعامل بال emينصح بالتعامل فقط بال & px ....وكل لديه اساليبه وطرقه للتخلص من المشكالت

emومع اعتقادي بأن استخدام ال & px اال أنني أستخدم اآلن ..هو األفضلpx ...


:اذا أحببت االطالع أكثر حول الموضوع** (1/shoul11799236http://stackoverflow.com/questions/

css-my-in-rem-or-px-use-i-d

(2-rem-css-the-to-more-tricks.com/theres-http://csssizing/-font-than-unit

(3-size-http://snook.ca/archives/html_and_css/fontrem-with

وضعت اليك بعض ..(ال تشغل نفسك كثيرا حول هذا الموضوع اآلن )واآلن لنتابع..المواقع التي يمكن أن تستزيد منها أو تعود اليها بالمستقبل


http://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-in-my-css�

http://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-in-my-css�

http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/�

http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/�

http://snook.ca/archives/html_and_css/font-size-with-rem�

http://snook.ca/archives/html_and_css/font-size-with-rem�

وأيضا قيمة inheritوهي ال cssهناك قيمة يمكنك استخدامها في خصائص ال ... initialأخرى هي

نستخدمها لتصفير أو ارجاع عنصر ما الى قيمته initialوال inheritال الخاص parentيأخذ الخاصية من ال inheritلكن الفرق أن ال , االفتراضية

... وعادة ما تكون افتراضية لذلك كثيرا ما نستخدمها اذى احتجنا تصفير ما , بهدون , فهي تقوم على ارجاع القيمة االفتراضية للعنصر مباشرة initialأما ال

... ieداخل ال supportلكن مشكلتها أنا ليست paerntاعتماد على الألنك ان كنت تطور .. intialو inheritأحببت أن تعرف ما تعني كل من

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

هذا المقطع صغير ..(انظر هنا مقطع فيديو سريع كيف أقوم ببرمجة مواقع االنترنت عن طريق htmlوال cssوظيفته أن يريك كيف يمكن أن تتعامل مع ال

... Firefoxوال يختلف كثير عن ) ..chromeهذا الفيديو على ... (المتصفح


3(font-style : مثل ال , تقوم هذه الخاصية على تدديد التنسيق للخطItalic اآلن هنا وعن طريق , )؟ هل تذكر ... (^_^ أي أريد الخط مائال ..

.. font-styleيمكننا التدكم بها عن طريق ال cssال


4(font-weight : تستخدم هذه الخاصية لتغيير سماكة الخط ان صح.. الخ .. lightأو boldمثل جعل الخط , التعبيير

العدد من .. 900–100لهذه الخاصية عدة قيم مثل , وكثيرا ما نستخدم هذه الخاصية semi 600الى 500و normalيكون 400و lightهذا 300الى 100

bold 700و bold أكثر من ال 900- 800وbold ... طبعا ليتم تنفيذ هذهفهناك خطوط تجد أنها تدعم ال ..يجب أن يكون الخط داعم لها , األرقام

normal والbold وهناك من تدعم .. فقطlight وهناك من يدعم هذهالخ ... الخطوط جميعا

و light 300هذه األرقام قد تختلف حسب نوع الخط لكن دائما المداور الرئيسية هي 400 normal 700و Bold ... خذها قاعدة_^*

... bold, lighter, bolderويمكنك أيضا كتابة

:الصيغة العامة


Font (shorthand syntax): كما عودناكم , أيضا:P .. يمكننا اختصار ما: يتم على اسطر بسطر واحد فقط ويكون بدسب الترتيب التالي

font: style weight size/line-height family;

: أمثلة


Impactوالثاني vandaraكل فقرة لها خط مخلتف عن اآلخر الخط الخاص بالفقرة األولى هو ... فقرات 3قم بانشاء وغير حجم الخط boldوالثالثة فقط italicوالثانية فقط italecو boldوقم باعطاء الفقرة األولى Helveticaوالثالث هو

..بينما استخدم الصيغة التقليدية لباقي الفقرات.لكتابة الخصائص بالفقرة الثالثة shorthandاستخدم ال , لجميع الفقرات

!هل قمت بتطبيق السابق ؟

اذا انظر الى هذا المثال..اذا قمت بذلك يجب ..لتستطيع معرفة أن الخط الذي تستخدمه مختلف عن اآلخر : مالحظة

فيعني أن كل ..اذا اختلفت شكل الدروف .. عليك النظر الى الدروف الحظ الصورة..منهما نوع مختلف


:في غيبة غابها –رضي هللا عنهما –كتب عمر إلى ابنه عبدهللا :أما بعد

فإن من اتقى هللا وقاه ، ومن اتكل عليه كفاه ، ومن شكر له (( .زاده ، ومن أقرضه جزاه

.فاجعل التقوى عمارة قلبك ، وجالء بصرك .فإنه ال عمل لمن ال نية له .وال خير لمن ال خشية له . ))وال جديد لمن ال خلق له


الم , لكن اآلن, وكيف يمكننا تغيير نوع الخط... بعدما تكلمنا عن الخطوط ! يخطر ببالك سؤال؟

أو أنا , غير تلك التي ذكرناها باألمثلة, كيف يمكنني أن أقوم بإضافة خط جديد!كيف يمكنني استخدامه في مواقعي ؟.. قمت بتصميم خط خاص بي

... هناك طريقتان * ... ^_الجواب سهل

font-face@عن طريق استخدام ال : األولى.. Impotعن طريق استخدام ال : الثانية

^_^واآلن لنستكشف معا الطريقة األولى


, هي تضمين خط آخر واستخدامه font-face@فوظيفة هذه , اذا كما ذكرناعليك كتابة االسم الخاص بهذا font-face@ولكتابة أو استخدام ال

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

...االمتداد لمكان وجود الخط

: شاهد المثال التالي


وال styleمثل ال font-face@هناك عد خصائص يمكن استخدامها مع ال weight ... وهما بالدالة االفتراضيةnormal ...

بشكلين األول font-face@في بعض الخطوط المضافة نقوم بتعريف ال *) normal والثانيbold .. لكي يعمل الخط دون مشاكل...



^_^ styleينطبق على ال weightوما ينطبق على ال

من وجوده .. واآلن ما رأيك أن نرى كيف يمكننا تضمين خط جديد من الصفرttfك file وتدويله الىwebFont ؟

^_^ شاهد هذا الفيديو

.^_^ال تنسى أن تنتبه لدقوق الملكية الفكرية في استخدام الخطوط


! لكن ماذا عن الطريقة الثانية ؟... اآلن لقد ذكرنا الطريقة األولى

أن تقوم بتضمين خط من موقع .. Importالطريقة الثانية تتكلم عن ال ^_^ وأشهر موقع لذلك السيد المدترم والصديق العزيز .. خارجي

^_^جوووووووووووووووووووووووووووووووووووووجل

شاهد من هنا..^_^ Google Fontsوذلك عن طريق ..نعم

>>>-----..ولنتعلم معا كيف يمكننا تضمين الخطوط من جوجل


https://www.google.com/fonts�


انظر الى هذا الرابط ...واآلن لتنفيذ ما رأيناه بالصور بشكل واقعي

...ومن ثم انظر الى هذا المثال والشيفرة البرمجية الخاصة به

cssقم بوضعها أعلى صفدة ال cssالمستخدمة بال import@: مالحظة^_^..وقبل أي شيء

https://www.google.com/fonts�

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

^_^وقعت بها وأنا أتعلم حتى تعلمت واكتشفت مثل هذه األمور

^_^وفقكم هللا لكل خير


يآأبتي مآذآ أستر من جسدي ومآذآ أذر: سألت بنت أبآهآ إكشفي من جسدك قدر مآ تتحملين من لفح جہنم: فـأجآب


ورأينا كيف أمكننا التعديل على التنسيق الخاص .. تلكمنا عنها كثيرا ^_^, الروابط ...بالروابط مثل لون الخط

واآلن سنتلكم بإذن هللا تعالى عن التنسيق الذي يخص الروابط بالداالت المختلفة مثل أو الرابط الذي تم ) active(أو اثناء النقر ) hover(مرور مؤشر الفأرة

^_^) link(أو الروابط التي لم يتم زيارتها ) visited(زيارته

لتنسيق مثل هذا النوع والذي يعتمد على الوضع الدالي للرابط وتفاعله مع المستخدم ..غإنه يجب عليك االنتباه لترتيب التنسيق ..

(1Link ) وهو الدالة االفتراضية للa عند تدميل الرابط ألول مرة((2Visited(3Hover(4link


^_^واآلن لنشاهد مثاال على تنسيق الروابط


.^_^نعود مجددا الى القوائم

cssاآلن سنتكلم كيف يمكننا التدكم بهذه القوائم عن طريق ال .. ^_^..هل تذكرها ^_^

ألنه بامكانك , list-style-typeإن أهم الخصائص المستخدمة لتنسيق القوائم ال أيضا هناك الخاصية ...بالتدكم بالتنسيق الخاص بالقوائم

List-style-image .... وهذه تمكننا من القيام بوضع صورة بدال من نقاط التعدد...االفتراضية

^^خاصية مهمة النها تدذف تنسيق النقاط ;list-style-type: none:الخاصية

..^_^لنشاهد ماثال


ويقصد به االطار الذي يمكن , تعني اطار borderصديقي عليك أن تعلم أن ال ... htmlأن يديط أي عنصر من عناصر ال

: الصيغة العامة له

ويمكن وضع هذا االطار لكامل العنصر أو لجزء منه مثلمن التعامل مع كل جزء أو borderيمكنك ال : مالحظة

^_^وهذا أمر رائع ^_^ جهة على حدى ؟ borderواآلن ما هي أهم خصائص ال

هي borderعناصر ال / سمات /أهم خصائص 1 (border-left


2 (border-right 3 (border-top 4 (border-bottom5 (Border style(dotted, dashed, inset, outset..etc)6 (border-color(left, right, top, bottom)7(border-width(left, right, top, bottom)


.. بعد تعرفك على بعض األمثلة..واآلن

^_^وانظر النتائج border styleقم بالبدث باستخدام جوجل عن

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

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


...^_^الجداول ^_^

وقلت حينها أنني لن أذكر العديد من , عن الجداول htmlتكلمنا في ال لوجود بديل أفضل ومدعوم , الخصائص أو السمات التي تخص الجدول

... cssمن جميع المتصفدات وهو ال

وما هي فكرة انشاء .. cssواآلن ما هي أهم الخصائص لتنسيق جدول داخل ال الخ!! ...جداول بعدة الوان للصفوف واألعمدة

الخاص بالجدول borderفلنبدأ جولتنا مع ال , لإلجابة على األسئلة السابقة^_^


واآلن سنرى كيف يمكننا ...borderتكلمنا في الموضوع السابق عن ال ^_^التعامل معه بالجدول ؟

!!لكن شاهد النتائج ..لن تختلف borderالصيغة العامة لل


لقد ذكرت بالشريدة السابقة أن الدل سيكون باستخدام ال border-collapse: collapse; ... لماذا..

borderفإننا قمنا باضافة ..للجدول borderألننا عندما قمنا بوضع ال هي أن تجعل collapseووظيفة ال ... للصف والعامود والجداول

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

المسافات التي تظهر بين األعمدة : مالحظةوالصفوف كهامش يمنع التصاق النص بددود

تسمى .. cssاالطار هي عبارة عن خاصية Padding ...وسيتم شرحها بإن هللا تعالى بعد

... tableموضوع ال


.. width & heightسنذهب الى ال .. borderواآلن بعدما تكلمنا عن ال

يفضل وضعهما داخل heightوال widthأن خاصية ال htmlقلنا في دورة ال !!...واآلن كيف يمكننا ذلك ... cssال

بكل بساطة width: value(px, em, %, pt..etc) height: value(px, em, %, pt..etc)

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

فهذا يكفي لتفهم الفكرة وتطبقها على جميع العناصر , وإن طرحت بمثال معينأينما جائت widthوكمثال خاصية ال ...التي يمكن أن تستقبل مثل هذه الفكرة

...^_^ لن تتغير وظيفتها ...هي –فهي ..



ويمكنك أنت , ككل..لقد قمنا بتغير ارتفاع وعرض الجدول .. في المثال السابق...أيضا بكل تأكيد من تعديل الصفوف واألعمدة كما تريد

هذه الخصائص ... text-align and vertical-alignأيضا تكلمنا سابقا عن يمكننا ساتخدامها داخل الدول لتدديد مداذاة النص داخل الدقل من اليمين

... واليسار ومن فوق وتدت

كل .. يمكننا التعامل مع تنسيق الخطوط والخلفيات للجدول..باإلضافة الى ذلك ^_^لنرى مثاال على ذلك ... cssذلك عن طريق ال


..^^..ومهم للتعامل مع الجداول .. واآلن بقي أمر أخير

كيف ممكن تعمل تصميم جميل للجدول بديث تعرض صفوف هذا الجدول على الخ ..ومميز بالعناوين .. غامق–شكل لون فاتح

cssمثل ال client sideطبعا هذا األمر اآلن وبما اننا ما زلنا بجانب ال لكن عندما نتعلم .. فإننا نقوم بكتابة الصفوف صف صف.. htmlوال

فإنه سيتم serverأو أي لغة من لغات ال ASPأو PHPالمزيد ونتعلم ال طريقة انشاء جدول بسيط ..لكن اآلن لنتابع .. dynamicانشائها بشكل

^_^وجميل


نقوم بانشاء جدول بالطريقة التقليدية 1)أي صف للعناوين th, odd, evenالصفوف الموجودة بالجدول تقسم الى 2)

...وصفوف فردية وصفوف زوجية نقوم بتمييز الصفوف الفردية عن الزوجية عن العناوين باستخدام الكالس 3)

.. cssالموجودة بال وبهذا نكون ضمنا أن ..نقوم باعطاء جميع الصفوف الفردية نفس الكالس 4)

وهذا الكالم ينطبق على جميع الصفوف.. الصفوف الفردية لها نفس الخصائص شاهد الشيفرة البرمجية لمثل هذه الفكرة ... ^_^ استمتع بالنتائج ... ^_^ خامسا 5)

^_^

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

even والth ..أنت تقرر كم ستدتاج ..تذكر^_^


^_^ هذا مثال بسيط على تنسيق الجدول

... لكن تستطيع أن تقوم بالكثير اآلن


هل بامكانك انشاء جدول مثل هذا ؟... واآلن بعد الذي تكلمنا عنه

لو قرأت األمثلة السابقة ... ^_^ هذا الجدول البسيط أنا متأكد بأنه سهل عليك بعد كتابتك للشيفرة البرمجية ..فهذا ال شيء ..^__^ وقمت بتنفيذ ما فيها

^_^يمكنك االطالع على األمثلة من هنا ..

فربما ال , كن عزيزا واياك أن تندني مهما كان األمر ضروريا عمر المختار -. تأتيك الفرصة كي ترفع رأسك مرة أخرى



وتعطي المواضيع القادمة اهتمامك خصوصا مواضيع , أرجو أن تنتبه.. اآلن وال displyوال positionو ال marginوال paddingال

floating و الoverflow ^_^...وطريقة , فهذه مواضيع مهمة جداتدكمك بها هي التي تظهر التنسيق بشكل رائع وأقل عدد من األخطاء

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

بهذه ..واآلن لنبدأ معا بإذن هللا تعالى ) .. من شكل أو تنسيق لمواقع ^_^المواضيع المهمة والجميلة

^_^ paddingأوال لنبدأ بال


وأمعن النظر...اآلن انظر الى هذه الصورة

box Modelهذه الصورة تمثل ما يسمى بال : وترتبه من الداخل الى الخارج كالتالي

(1Auto x Auto هذه تخص الطول والعرض الخاص بالمدتوى بالدجم الدقيقي) paddingأي بدون حساب االضافات مثل ال (له

(2Padding(3Border(4Margin

هذا الشكل يوضح ترتيب أي عنصر أو تنسيق أي عنصر كيف سيكون شكله وما ^_^ ..هو ترتيب التنسيق الذي ستعامل مع أو كيف ستتعامل معه


والسؤال .. box Modelاذا قمت بفتح أي موقع الكتروني ستجد مثل هذا ال google(اآلن هو أين ؟ انظر الى هذه الصورة chrome :(


.. هذا box modelلماذا تكلمنا عن ال ..!! يراودك سؤال ..واآلن بكل تأكيد ..والسبب في ذلك

يجب أن تعرف كيف سيكون ترتيب مخرجات الشيفرة البرمجية الناتجة 1)من تنسيق معين

يوضح القيم الخاصة بكل جزء من خصائص ال box modelهذا ال 2)css وبكل اتجاه أيضا على حدى..

حتى تكتشف أنه يمكنك ان تتدكم بهذه , تم ذكرها وايضاحها على المتصفح3)فقط قم بالنقر على الجزء ..الذي تراه أمامك boxالخصائص من خالل ال

..أي وسيلة سهلة للعمل أثناء تطوير المواقع..(الذي تريد تغييره ^_^وأبقي الصورة في ذهنك ... paddingواآلن لنتددث عن ال


) box modelتذكر ال (هي وسيلة النشاء مسافة بين المدتوى paddingال .. والمسافة الناتجة تعد من نفس ماهية العنصر... borderوال

ماذا يعني هذا الكالم ؟

فأنت قمت باضافة مسافة فارغة ال paddingهذا يعني أنه عند اضافتك ل backgroundمثل ال cssلكن خصائص ال .. يمكن للمدتوى أن يتعداها

وإن كنت تذكر بالجداول قمت باستخدام ... تنطبق على هذه المسافة الجديدة borderوكيف باستخدامها زدت المسافة الواقعة بين ال .. paddingال

... الخاص بالدقل والمدتوى الخاص به



^_^ paddingأمثلة على الصيغة العامة لل

فإنه وبكل.. اآلن كما تالحظبساطة يتم تعريف ال

Padding واستخدامه..

لكن آهذا يكفي ؟إلننا نداج لوسيلة ..طبعا ال

سهلة تختصر علينا هذا الكالم وهواستخدام ال

Padding short hand


وسيلة تختصرعلينا الوقت والجهد أثناء العمل وكتابة padding shorthandال ..الشيفرة البرمجية

: وهي تقسم الى الشكل التالي padding: value(s)وطريقة استخدامها فقط بوضع (1padding: 25px; في هذا الشكل يكون الpadding بكسل بكل 25يساوي

...االتجاهات (2Padding: 25px 20px; في هذا الشكل يكون الpadding 25 بكسل من

من اليمين واليسار 20pxاألعلى وأسفل و (3Padding: 25px 20px 15px; في هذا الشكل يكون الpadding من

15ومن األسفل 20ومن اليمين واليسار 25األعلى (4Padding: 25px 20px 15px 10px; في هذا الشكل يكون الpadding

^_^10ومن اليسار 15ومن األسفل 20ومن اليمين 25من األعلى


: شاهد األمثلة


... واآلن

^_^ بجميع صيغها التي ذكرناها paddingيجب عليك القيام باستخدام ال divوكل .. paddingوطبق عليه ما تعلمنا بال divs 8لذلك قم بانشاء ..

^_^... borderأعطيه 8من ^_^انظر لهذا المثال ..وبعد تنفيذك وتطبيقك للسؤال السابق

^_^الموجودة داخل المثال divsشكل أحد ال سنعرف .. box modelمن خالل قرائتك لل

يساوي widthال ) 1: المعلومات التالية 23يساوي heightبكسل و ال 301وال ;padding: 20px 15pxال , بكسل

Border بكل االتجاهات 5يساوي^_^


في أغلب .. marginواآلن حول دور ال .. paddingلقد تكلمنا عن ال حتى في ..^^..كثيرا marginنجد أننا استخدمنا ال ..األمثلة التي درسناها

اذا الحظت وقرأت الشيفرة .. paddingآخر مثال وكان موضوعه عن ال *^_وما هو ؟ .. marginفما وظيفة ال ..البرمجية

خارج حدود اطار (هو وسيلة النشاء مسافة حول العنصر marginال ) .. العنصر

ستجد أن أعلى طبقة أو آخر طبقة هي التي !.. ؟ box modelهل تذكر ال ^_^... marginتخص ال

وبهذا يكون , ال تعتبر من ماهية العنصر نفسه marginالمسافة التي يأخذها ال .. بأمرين marginوال paddingاالختالف بي ال


خارج االطار marginبينما ال , يكون بين المدتوى واالطار paddingال وقلنا أن هذا يعني أن الخصائص (يعتبر من ماهية المدتوى paddingوال

فال يعتبر من ماهية النصر marginأما ال ) ستنطبق عليه colorمثل ال الخاصة بهذا العنصر backgroundلن يأخذ ال ) خارج االطار(فلذلك

paddingفمثال لو نظرنا الى مثال ال ..وحتى عرض المدتوى يختلف ..: سنجد التالي


فإن العرض الخاص بالعنصر حسب عن طريق , اذا الحظت الصورة السابقة padding 20وال .. 10يسارا ويساوي 5يمينا و 5وهو borderال

.. 351فالناتج .. 301والمدتوى بذاته 40يسارا والناتج 20يمينا و لكنه بكل .. blockالداخلي لل widthلم يدسب داخل ال marginبينما الم

... ككل blockالخاص بال widthتأكيد سيؤثر على ال

:واآلن لنرى الصيغة العامة

paddingبكل بساطة ما ينطبق على ال (من حيث صيغة marginينطبق على ال

) االستخدام


فهي margin shorthandأما بخصوص ال


... marginلل ..واستخدام مهم جدا جدا ...هناك أمر مهم جدا جدا جدا .. اآلن ماذا تتوقع أن يكون ؟

لصفدة الويب wrapperكوسلية رائعة وممتازة لعمل marginيستخدم ال وترى بذت الوقت , أو لعمل حدا ال يمكن للمدتوى أن يتجاوزه, الخاصة بك

... أن المدتوى موجود في منصف شاشة العرض الخاصة بك

فكيف يمكن ذلك ؟

..هذه القيمة تسدب من قبل المتصفح .. autoتسمى marginيوجد قيمة بال )انتبه لتفاصيلها بشكل جيد...(لترى ذلك بوضوح أوال شاهد الصورة


...اذا أمعنت النظر في الصورة الماضية فستجد الكثير...وتجد أن الموقع في منتصف الشاشة 1024أن العرض الخاص بالموقع هو : أواللو كان لو أخضر لكان يدل ..( marginاللون البرتقالي هذا يدل على وجود : ثانيا

).paddingعلى هذه الصيغة يمكن ( div#pageفإن هذا الكالم موجود داخل .. اذا الحظت : ثالثا

الذي يساوي idالذي يدتوي على ال divوهذه تعني ال cssاستخدامها بال page ^_^..( هذا الdiv#page هو الwrapper الخاص بمدتوى هذه... ^_^..الموقع

: فإنك ستجد التالي wrapperلهذا ال cssاذا أمعنت النظر في خصائص ال : رابعاMax-width: 1024 .. وبهذا أمنع أن يخرج الwrapper عن هذا الدد مهما بلغ

قلت له أني ال أريد مسافة من األعلى margin: 0 autoوال , حجم الشاشة>----...ولكن أريد حساب تلقائي للمسافة بين اليمين واليسار, واألسفل


تم التي 1024px ال بأخذ يقوم بساطة بكل.. ؟ المتصفح ذلك يسدب كيف واآلن ...الخاصية لهذه parent يعتبر الذي العنصر حجم يأخذ ثم ومن ... وضعها

... 2 على والقسمة بعض من بطرحهما ويقوم warpper: 1024 ال حجم ... parent: 1349px ال حجم :مثال هذا com/.//preissmurphy:http الى بالدخول قمت ؟؟ ذلك عرفت كيف

ال وحجمها wrapper ال هي page ال .. بالصورة الموجود هو الموقع1349 وحجمه body ال هو بها الخاص parent وال .. 1024

1349) اآلن – 1024) / واليسار اليمين من المسافة هي هذه162.5 = 2 الصورة الحظ

http://preissmurphy.com/�


margin ال يتعمل :مهمة مالحظة auto ..مددد العنصر حج يكون أن يجب ... تعمل لن واال.. max-width ال أو )width( العرض

الصورة هذه نفس تخرج برمجة شيفرة بكتابة تقوم أن أريدك اآلن

)auto ال استخدام يجب(.. الشاشة منتصف في div ال هذا أن كيف الحظ

: األمثلة هذه شاهد ذلك بعد

إننا ال نحرز النصر إال إذا رفعنا المصحف بيد والبندقية باليد من أقوال الشهيد عز الدين القسام" األخرى



htmlهو خط يرسم حول عنصر ال outlineال .. outlineما هو ال اال يشبه هذا ال !! ماذا !!!!!! ... وكأنه اطار يفصل الداخل عن الخارج

border ال ..الجواب ال ! ..؟outline .. يأتي خارج الborder )outside ... ( وله ميزتان تجعالنه يختلف اختالفا جوهريا عن ال

border...



ينطبق هنا من borderما ذكرناه من سمات أثناء حديثنا عن ال : مالحظةstyle وwidth وcolor وshorthand

انتبه فقد قمت بندديد عناصر ألن هناك خصائص لل, التشابه

Border لم أذكرها وموجودة بالCSS3 ^_^

:بنقطتين وهما outlineوال borderواآلن االختالف بين ال .Outlines do not take up spaceال 1).Outlines may be non-rectangularال 2)

... ماذا يعني هذا الكالم


..شاهد الصورة .. ال يعتبر من مساحة أو حجم العنصر outlineفال


فإن ترتيب ال .. outlineوال box modelبالنسبة ل : مالحظة outline يأتي بعد الborder وقبل الmargin ^_^.

أو انه , فإن ما يقصد بها ليس المعنى الدرفي.. أما بخصوص النقطة الثانية .. ال ليس هذا.. أن تظهره بشكل آخر outlineبامكانك باستخدام ال

^_^Pp:ولتوضيح ذلك شاهد الصورة والمثال خير من الكالم


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

وفعال بتكون رائع وبتشتغل وبطبق وبتفكر بشكل ممتاز ) اآلن

.. brوال divوال spanوال widthلدل السؤال يمكنك استخدام ال

outlineوال borderهذه صورة أخرى توضح الفرق بين ال


.. هل انتهيت من حل السؤال

جرب وأخطئ الكثير من .. إن لم تستطع ابدث واستخدم جوجل , ال تخجلأن أكثر لدظات البرمجة سعادة لما يظهرلك خطأ جديد ..صدقا , األخطاء

.. خبرة ومعرفة رائعة ستتكون لك .. وتجد حل لهذا الخطا

^_^اآلن انظر الى حل السؤال واألمثلة التي ذكرت


..^_^ األحجام

ولقد استخدمنا , عرض وارتفاع... بالنسبة لألحجام فهي تنقسم عندنا اآلن الى قسمان ..هذه الخاصيتان كثيرا أثناء تناولنا لموضوع األمثلة

^_^ واآلن لنتكلم عن ذلك بنوع من التفصيل أوال سنتكلم عن العناصر التي يمكن استخدامها للتعامل مع األحجام

(1Width :تدديد العرض للعنصر(2Height :تدديد االرتفاع للعنصر(3Max-width :تدديد أكبر قيمة للعرض(4Max-height :تدديد أكبر قيمة لإلرتفاع(5Min-width :تدديد أقل قيمة للعرض(6Min-height :تدديد أقل قيمة للعرض


وجميعها يستقبل .. يجب التعامل معها بدذر ... التي تم ذكرها 6العناصر ال لل فقط autoأو px, cm..etcأو (%) القيم على شكل نسب مئوية

width والheight

ال تداول .. الكن من أهم النصائح التي أقدمها لك .. قد ال يكون األمر صعبا للعناصر أو أقل حد أو أكثر حد لالرتفاع أو حتى heightأن تددد ال

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

طبيعة التصميم

: شاهد هذا المثال


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

وأن الثانية , ستالحظ أن األولى غير ثابتة االرتفاع..الخاصية األولى والثانية ..غير ثابتة العرض

ال يمكن أن يقل العرض الخاص بها عن 3ستالحظ أن ال 4و 3الخاصية والسبب width: 100ووضع cssحتى ولو قمت بالتعديل على ال 150

4واالرتفاع بنفس الفكرة للنقطة .. أن الدمد األدنى أكبر مما قمت بوضعه

... 4و 3فهي عكس .. 6و 5الخاصية


heightو widthفي الخاصية السابعة والتي تدتوي صورة فقد تم وضع max-height: 100%و max-width: 100%ولكن مع وجود نسبة

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

والسبب في ذلك يعود الى تدديد العرض .... بناء على حجم الشاشة فإنه max-heightوال max-widthاما اذا وضعنا ال , واالرتفاع

وبهذا سيتم تصغير .. %100ستكون القيم الخاصة بالعرض ضمن نطاق ال ... حجم الصورة بشكل تلقائي

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


انتبه كيف تغيير الشكل عند تغيير

ارأيتك ... الدجم كيف كان تأثير هذا

.. األسلوب

.. ..إذا كنا قد حرمنا من الجهاد في فلسطين بسبب الحدود

.. ..وسجن األسود باألصفاد واألغالل .. وفرض القيود

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

... ..يجري في عروقنا .. فإرجاع فلسطين جزء من ديننا

... .وال ذكرنا هللا إن لم نذكر فلسطين ... ويسري في كياننا

ღ رحمه هللا عبدهللا عزام.دღ



ويدل لنا الكثير من المشاكل وهو ال..اآلن سنبدأ بأمر رائع جداDisplay والvisibility ...

هي احدى عناصر visibilityال , visibilityسأبدأ حديثي هنا عن ال : أوال... htmlالتي تسمح بإخفاء أو اظهار العنصر ال cssال


لكن أريدك أن تنتبه بموضوع مهم جدا ... visibleبكل بساطة هذا هو ال فهي تدتفظ بموقعها , عندما تخفي عنصر من خاللها visibilityوهو أن ال

.. display: noneوهذا الفرق بينها وبين ال ... والمسافة تمثلها


:الحظ الصور التالية

مقدار المسافات التي (ال يظهر المدتوى على الشاشة ولكن بقي موقعه وحجمه ) ^_^ يستغلها موجودا

قم بكتابة كود يقوم بانشاء صفدة تدتوي على معلومات مثل --__--اآلن وأريد بها كلمة مخفية داخل األقواس مكتوب بها ^_^ الموجودة باألعلى

hidden , ^_^مع أنه لها دور , طبعا هذه الخاصية البسيطة الكثير يجهلهاوخصوصا عند تعاملك مع موقع ...رائع ومنقذ أحيانا من مشاكل برمجية

لكن ...(^_^وهو مخفي scriptعنصر معين سيتم تدديده عن طريق ال ^_^) visibilityاآلن يكفيك معرفة ال


هذه الخاصية تقوم على اظهار أو اخفاء عنصر , -_* Displayال : ثانيا!!أو تددد طريقة عرضه , معين

لكن تدديد طريقة العرض ..تمام ..اظهار أو اخفاء العنصر .. ستقول بكل تأكيد وال inlineهل تذكر ال ^_^, تدديد طريقة العرض , فأقول لك نعم!!

block يمكنك اآلن تدديدها عن طريق ال .. ؟css ...


هناك قيم أخرى لكني لم أذكرها وأهم القيم التي يمكن استخدامها : مالحظة... none, block, inline, inline-blockهي


:شرح القيم1 (display: none; : تقوم هذه الخاصية على اخفاء العنصر من الصفدة

فال يدتفظ بمسافات تمثل حيز وجوده مثل ال , وكأنه غير موجود أصالVisibility .._^ ...*الحظ الصورة

2 (display: inline; : هنا يصبح العنصرinline مثل الspan ... مثال^_^ .. spanهذه الخاصية سيصبح كأنه divلو أعطينا

3 (display: block; : تقوم هذه الخاصية على تدويل الinline الى الblock .. فمثال لو أعطينا هذه الخاصية الى سيصبح وكأنه

... divيتعامل مع

وهذا أمر ..هو امكانية عرض العنصر بشكل آخر 3و 2الفكرة هنا من النقطة ..رائع

4 (display: list-item; : تقوم هذه الخاصية على معاملة العنصر وكأنه<li> ....مثل


5(display: inline-block : وهي خاصية تجعل .. هذه الخاصية مهمة جدا جدابديث تكون معاملة .. blockوال inlineمزيج بين ال htmlمن عنصر ال

.. blockويعامل المدتوى على أنه inlineالعنصر نفسه على أنه

blockوال inline-blockاآلن سأوضح نقطة مهمة تخص التنسيق لكل من ال )من مالحظات تخص التنسيق htmlهذا ما قصدته في دورة ال ...( inlineوال

inlineال وال يأخذه من األعلى , من اليمين واليسار paddingوال marginيأخذ ال 1)

وأسفل inlineال يمكنك تدديد العرض واالرتفاع لل 2)يسمح للعناصر بأن تأتي على يمينه ويساره 3)


blockأما ال بكل االتجاهات paddingوال marginيدعم ال 1)heightوال widthيدعم ال 2)بترك سطر قبله وبعده3)

inline-blockأما ال ..يمكن أن يأتي عناصر بجانبه1)بجميع االتجاهات marginوال paddingيدعم ال 2)heightوال widthيدعم ال 3)


شاهد هذه الصورة لتالحظ الفروق..واآلن بعد فهمنا للموضوع السابق


.. displaysنكون انتهينا بدمد هللا تعالى من موضوع ال ..واآلن

مثل ال displayطبعا يوجد هناك قيم أخرى يمكن استخدامها داخل ال table, flex, table-cell .. يمكنك القرائة عنهم من خالل بدثك ..الخ

^_^ css displayعن

: واآلن لنشاهد المثال معا

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

ال اله اال انت سبحانك اني كنت من الظالمين

سبحان هللا والحمد ل وال اله اال هللا وهللا أكبر



أريدك , وقبل أن أتكلم عن هذه الخاصية, هذه الخاصية من الخصائص الرائعةما هي اال خداع , أن تتأكد أن األشكال والدركات التي تراها بأي موقع

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

أو أن تقوم بروضع عنصر بجانب عنصر آخر فقط , وفوق هذه الصورة زينةهو خاصية , والذي دفعني الى قول ذلك, الخ..لتعطي ظل للعنصور األول

position .. هذه الخاصية تمكنك من التدكم بموقع عنصر معين داخلالتدكم بالموقع له أكثر من اسلوب أو , باإلضافة الى ذلك, صفدة الويب

و staticوهي .. methodقيم رئيسية مع هذه 4طريقة ويمكن استخدام Fixed وRelative وAbsolute واآلن لنذهب معا بإذن هللا تعالى لهذا

^_^الموضوع الرائع


(1position: static : هذه الخاصية هي الدالة االفتراضية للposition وهو , حسب اتجاه الصفدة, بديث يكون موقع العنصر ثابت بالصفدة

. الشكل الطبيعي الذي نراه(2Fixed :بهذه القيمة نستطيع أن نبقى العنصر ثابت في جزء من الشاشة ,

..فإنه يسر معه ... scrollingوحتى ان تم عمل ,leftوهي , أخرى cssهذه الخاصية يمكن أن تستخدم خصائص من ال

right, top, bottom ...



,top, bottomالحظ كيف استخدمت ال left, right .. هذه الخصائص تعمل مع الfixed ..

و topأيضا الحظ أنه ال يمكن استخدام bottom معا والleft وright واذا ..معا

سيقوم ..معا rightوال leftقمت باستخدام ال ..بتنفيذ أخر قيمة منهم



(3Relative :فإنك , في هذه الخاصيةتقوم بتدديد نقطة ستعتبر مرجعية

بينما هو فعليا , لخصائص أخرىيبقى بنفس الموقع الى تسير به

وبذات الوقت يمكنك ..الصفدة التدكم بموقعه عن طريق

,left, right, topالخصائص bottom ...النقطة التي تم حفظها ,

تجعل من هذا العنصر ومدتواه كأنه wrapper ولهذا فهي تستخدم

absoluteعندما نريد استخدام ال

: واآلن لنشاهد المثال معا

لن يتم تنفيذها ألن الخاص divال

به ال يدتوي على الكالس

.relativeDiv


هذه القيمة تقوم على جعل موقع absoluteواآلن لنتددث عن ال 4)وأخص staticله ذو خاصية غير ال parentالعنصر بنائا على أول

وظيفتها تكمن في relativeفكما قلنا أن ال .. relativeبالذكر هنا ال فإنه ال containerأو wrapperوضع نقطة وتجعل من العنصر كأنه

absolute لل 0 0تبقى مرتبطة بهذا العنصر وتعتبر االحداثاتparent هي الtop الخاص بالabsolute .. واذا لم يكن هناكparent لهposition فيكون الhtml هو الblock الخاص به..

من األول واحد واحد فإن لم يجد يكون ال parentطبعا تسلسل ال html هو الrelative فال يقفز مباشرة ..الخاص بالعنصر_^*

^_^وليتضح هذا الكالم علينا أن نرى مثاال


Opacity وهي خاصية , تتدكم بمقدار شفاشية العنصر, هذه الخاصية الرائعةطبعا ذكرتها هنا ألني سأستخدمها في المثال .. ( css3من خصائص ال

)القادم بإذن هللا تعالى

والصيغة العامة الخاصية بها 1.0وتنتهي ب 0.0هذه الخاصية قيمها تبدأ من .. ;opacity: 0.5هي

1وعند ال ...صفر فهذا يعني أنها غير ظاهرة opacityعندما تساوي قيمة ال ^_^فهذا يعني أنا ظاهرة بدون شفافية

) 0.7هي opacityقيمة ال: (شاهد هذا المثال


فعليك أن تعلم أن هناك خصائص مهمة .. , positionبعد حديثنا عن ال ..يمكن أن تشكل فارقا أثناء عملك على المشروع

اذا الحظت أننا اذا قمنا باستخدام أكثر من ... z-indexومنها هي ال position للمشروع مثلabsolute أوfixed مثال وجاء ال العنصر

... فماذا سيددث؟ .. األول فوق الثاني قصدي تداخل بين الدروف مزعج أو سوف ... سيدددث هناك اشتباك مسلح

P:الخ ..تخفي العنصر اذا كان ذا أولوية أعلى العنصر الثاني

على z-indexيقوم ال .. z-indexيجب علينا أن نضع ..ولدل هذه المشكلة صنع أولوية أعلى للعرض من اآلخر والصيغة العامة له هي

[email protected] أنيس حكمت أبوحميد: الحظ هذا المثال

[email protected] أنيس حكمت أبوحميد..في المثال السابق

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

فال داعي لتكمل الدورة .. اذا استطعت أن تكتب شيفرة برمجية للصورة السابقةحاول وشوف مدى اقترابك من ...وانت قدها .. P:^_^ ألنك حووووووت

^_^الشكل أو ما هي األفكار لمثل الصورة السابقة

وتدتاج positionيمكن أن تدتاج الى استخدام أحد أنواع ال : مساعدة للدلdivs وتستخدم , بعدد األلوانbackground-color و الopacity

left, topباإلضافة الى ال


تستخدم هذه , cssهذه الخاصية من أهم الخصائص التي تستخدم بال .. floatال ويقوم .. layoutأو بالعناصر الموجودة داخل ال layoutالخاصية للتدكم بال

... ;float:leftأو يسارا ;float:rightمبدئها على دفع العنصر إما يمينا


: مالحظات قبل البدء.وإنما فقط لليمين أو اليسار, لألعلى واألسفل floatال يوجد 1)يذهب الى أقصى اليمين ) floatاي استخدم ال ( floatedالعنصر الذي يكون 2)

...أو الى أقصى اليسار


يتكون على شكل floatالعناصر الي بتكون حول العنصر الي استخدم ال 3)سيكون حوله من floatأقصد بذلك أن العنصر ال (توزيعه مديطة بهذا العنصر

)سيتضح الكالم مع المثال بإذن هللا–جميع االتجاهات العناصر األخرى للعنصر الي أنا floatما بتأثر بعملية ال floatال قبلالعنصر الي بكون 4)

...موجود فيه

:انظر الصورة التالية..واآلن لتوضيح ما قيل بشكل سريع

, أمر مهم جدا لتوافق صفداتك مع الشاشات المختلفة floatingاستخدام ال *) أو استخدام ال positionومريح جدا لك في التعامل واالستغناء عن ال

margin أوpadding لذلك أي مشكلة بالتنسيق يمكن حلها ... بأرقام كبيرة..استخدمه بذكاء ..فال تتردد باستخدامه .. floatباستخدام ال


, إن الفكرة البرمجية التي تراها في الصورة السايقة كثير جدا استخدامهاالتي تظهر أخبار أو أحداث أو نشرات وبجانبها blocksوخصوصا في ال

.. float: leftأو float: rightفعادة الصور تكون ذات قيمة .. صورهل الحظت أن النص الموجود قبل الصورة لم يددث .. باإلضافة الى ذلك

.تداخل بينه وبين الصورة

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

... فما وقعت به سابقا .. لكن لن نكتفي ندن بذلك , تسرد حول الموضوع:أريدك أن تشاهد الفيديو التالي.. أحب أن نتشارك به ..وتعلمته


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

يمكن أن نقوم باستخدام خصائص نظنها متشابه لكن أثرها .. أمر مركب ^_^العبها صح ... marginوال paddingمختلف مثل ال

هو ال floatingآخر أمر سأتكلم عنه بإذن هللا تعالى حول موضوع ال clear لقد الحظت بالفيديو السابق كيف كان دور ال ...ألنها مهمة حقيقةclear في منع التداخل أو أن يصير المدتوى الذي باألسف حول المدتوى

قيم رئيسية وهي 3هذه لها clearوال .. floatالذي يدتوي عنصر ال left, right, both .. والقيمة االفتراضية هيnone .. ويمكنك استخدامها

, وإن لم تستخدمها فستكون هي االفتراضية( floatingطبعا للسماح بال يعني اذا ..الستخدام سابق overrideونقوم بكتابتها عندما نريد عمل

:clearبعمل ..وبدي بمرحلة معينة الغي ;clear:bothاستخدمت ال none..


left: : بمنع العنصر انو يتعامل مع الfloat للعناصر التي على يسارهRight : بمنع العنصر انو يتعامل مع الfloat للعناصر التي على يمينهBoth : يمنع العنصر من التعامل مع الfloat من اليمين واليسار لهذا

العنصر


بعد هذا الكالم ... واآلن

صور منهم على 4صور كل 8يدتوي على blockأريدك أن تقوم بانشاء ^_^الحظ الصورة )... صور بجانب بعضهم البعض 4أي كل (سطر

:بعد االنتهاء من حل السؤال شاهد المثال من هنا


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

... paddingوال marginلل

: فقد استخدمت الصيغة التالية, اذا الحظت

paddingوال marginهنا قلت له اجعل ال والثانية قلت له اجعل العناصر... يساويان صفر

paddingوال marginجميعها تساوي صفر لل ^_^

^_^انظر النتائج ... لو قمت بتجربة حذف هذا التصفيرشفناها كثير .._^ ...*الفدص عن طريق ال المتصفح


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

..تصفير لكل العناصر ( * ) وعادة ما أستخدم ال الخيار الثاني .. نصفرها

تغيرو borderال ..line-heightمن األمور التي يمكن تصفيرها ال الخ.. border-collapseتستخدم ..

^_^لنعد ونكمل ما بدئناه ... واآلن


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

..تصفير لكل العناصر ( * ) وعادة ما أستخدم ال الخيار الثاني .. نصفرها

تغيرو borderال ..line-heightمن األمور التي يمكن تصفيرها ال الخ.. border-collapseتستخدم ..

^_^لنعد ونكمل ما بدئناه ... واآلن

^_^ CSS resetاعمل بدث باستخدام جوجل على **

قد ال يكون للمال معنى مفيد لدي بعد تجاوز نقطة معينة من مؤسس شركة مايكروسوفت (بيل غيتس -. النجاح

)وأغنى رجل في أمريكا



هذا الموضوع من أهم المواضيع للتعامل مع العناصر المختلفة والموجودة داخل أيضا وسيلة رائعة لتدديد خصائص معينة أو تصميمات معينة .. htmlصفدة ال

الخ..على الرابط hoverلعناصر مدددة أو لجزء مددد من أحد العناصر مثل ال

لكني .. ^_^بكل تأكيد Selectorsأنني لن أقوم بشرح كل ال ..أريدك أن تعلم هنا واآلن لنمضي على بركة هللا ... من وجهة نظري selectorsسأقوم بشرح أهم ال

.. selectorولنبدأ بتعلم ال ..

والذي ستقوم مستقبال بإذن هللا تعالى بمتابعة الموضوع .. selectorsأهم مرجع لل selector.html2.org/TR/CSS3http://www.w/من خالله هو

وهذا الرابط الذي يختص بأمور ال .. webهذا الموقع مهم ألي أمر تدتاجه بال selectors

http://www.w3.org/TR/CSS2/selector.html�


هذه تعني مجموعة من القواعد التي وضعت : Pattern matching: أوالهذه العناصر تمثل عادة شجرة .. بخصائص مميزة , للتدديد عناصر معينة

)...ويتبع له أبناء, أي لها أب(

: لهذا النوع selectorsمن ال تعني قم بمسك جميع * ال .. نعم .. resetهل تذكر عندما تكلمنا عن ال : *) 1

...العناصر


:اذا أردت مشاهدة النتائج ستظهر بالشكل التالي

لقد ظهرت النتائج بهذا الشكل ألننا قمنا بتدديد اللون وحجم الخط لكل next-star-tooأما الثانية فقلنا داخل الكالس .. 25العناصر داخل الصفة

لماذا ! واآلن أنت قدد تتسائل ؟.. فقلنا بداخلها فظهرت الخلفية السوداء والسبب أنهم !.. ؟ local style anees&الخلفية السوداء ظهرت فقط ل

..spanوليس داخل عنصر ما مثل ..مباشرة divجائوا داخل ال ال تنسى أن تستخدم المتصفح لرؤية النتائج وفدص الصفدة


2 (E : وهذا يرمز الى أي عنصر من عناصر الhtml .. مثل الp أوa وهذه الطريقة استخدمناها بكثرة أثناء ... الخ من العناصر التي استخدمانها ..

^_^عملنا

3 (E F : وهما رمزان يرمزان ألي عنصر من عناصر الhtml بشكلوهذه الصيغة ... الخ .. span p aأو div spanأو div aمثل , ممتالي

أنه .. div spanوقلنا أنها تعني مثال ل ^_^ أيضا قمنا باستخدامها بكثرة ^_^ divالتي تقم داخل ال spanأعطي هذا التنسيق لجميع ال

4 (E > F : قم بتدديد جميع العناصر األبناء)F ( والتي تأتي مباشرة داخل الE الحظ المثال في الشريدة التالية... لتعطيها خصائص معينة:

هل الحظت الفقرات التي تم تنفيذها .. هل الحظت النتائح ^_^ <هذه هي فكرة ال ... والتي لم يتم تنفيذها ؟


5 (E:first-child : هذه الselector يستخدم .. ^_^بريدك كثير ..مهم جدا..^_^ parentيأتي داخل ال Eلتدديد أول عنصر : شاهد المثال التالي


6 (E:last-child: هذه عكس الfirst-child وتستخدم آلخر عنصرE ^_^ parentيكون موجود داخل ال

جميع ما تم ذكره أو سيتم ذكره يمكن استخدامه معا إلخراج صيغة : مالحظة: مثال يمكنني استخدام التالي..معينة أو للوصول الى عنصر معين

Div * p:first-child ^_^ .. هذه تعني قم باعطاء التنسيق ألول فقرة... divموجودة بأي عنصر داخل

7(E.ClassName : تستخدم هذه الصيغة إلعطاء التنسيق أي عنصرhtml هذا يعني أعطي التنسيق .. div.aneesClassمثل ..يدتوي على الكالس

:شاهد المثال.. aneesClassالذي يسمى classيدتوي ال divألي


النتائج


8 (E#IdElemens : بنفس األسلوب الذي حصل للclass .. يمكن أن يكون.. ^_^ #ولكن بدال من النقطة نستخدم ال .. idلل

9 (E ~ F : وهذه تعني أعطي هذا التنسيق لجميع عناصر الF والتي ال تقع^_^ Eداخل ال


التي Selectorوحديثنا عن أهم ال ... Selectorبعد حديثنا عن موضوع ال Selectorفندن اآلن بصدد الدديث عن .. يمكن استخدامها للخصائص

*_*كما قرأت .. نعم ..خاصة بالسمات لهذه العنصر

^_^لنرى معا ..كيف ذلك

1(CSS [attribute] : وهنا نقوم بوضع العنصر والسمة التي يجب أن:شاهد المثال... a[href]مثل ^_^ يمتلكها حتى يأخذ تنسيق معين


2 (CSS [attribute=value] : وهنا نقوم بوضع الخاصية ثم السمة ولكن: شاهد هذا المثال... ”#“=hrefمع القيمة مثل


3 (CSS [attribute~=value] : هذا يعني جميع العناصر التي لديها سمة..^_^ ”title=“aneesمثال ..تدتوي كلمة معينة



4 (CSS [attribute|=value] : وهذه تعني جميع العناصر التي تدتويفأقوم ”class=“anees-xمثل .. valueأول كلمة من قيمة السمة قيمة ال

... valueمكان ال aneesبتدديد



5 (CSS [attribute ^ =value] : وهذه تعني جميع العناصر التي تدتويلكن ال , بنفس الفكرة السابقة, valueأول كلمة من قيمة السمة قيمة ال

لم يأخذها في المثال aneesclassمثال ..يشترط أن تكون الكلمة لوحدها ^_^فسيأخذها ..لكن ان استخدمت هذه الطريقة .. السابق

6(CSS [attribute$=value] : ولكن هنا يجب أن 5وهذه نفس النقطة رقم.. valueتنتهي آخر كلمة ب ال

7 (CSS [attribute*=value] : وهذه تعني وين ما أجت القيمة وفي أي^_^نفذ التنسيق .. valueجزء من ال


: ^_^ input form styleوأخيرا ال ) 8يكننا أن نتدكم ..بكل تأكيد .. htmlالذي تكلمنا عنه بال formهل تذكر ال

بكل بساطة باستخدام .. ولكن السؤال كيف..بالتنسيق الخاص به لكل الموقع : هذه الطريقة

input[type=“TypeName"] هذه الطريقة اذا استخدمتها فستعطيحسب الذي تددده .. htmlالموجودة بال input typeتنسيق لجميع ال

: شاهد هذا المثال.. أنت

اللهم علمنا ما ينفعنا وانفعنا بما علمتنا وزدنا علما يا ارحم الراحمين



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

ولكن , يمكنك تغيير هذا الشكل cssواآلن بال .. أو الددث الذي يددث وقتها وغالبا ما نستخدم ال , انتبه دائما أن يكون الشكل ذا عالقة بالموضوع

pointer cursor االصور الي بتكون كخلفية وفوقيها نص وبدنا اياها...اتكون قالبة للضغط

: لنشاهد مثاال على ذلك


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

...يكون ما تعلمناه وما ذكرناه فعال قيد االستخدام

لكن وكأسلوب لطرح األفكار , أريدك أن تعرف أن هذه األمثلة مفيدة جدا لكثم النظر الى ..وأنت عليك القيام بدلها , سأقوم أوال بطباعة الناتج النهائي.

_^*الهدف انك تستفيد ...الدل

في حديثنا عن أول مشروع بسيط سنقوم ببنائه ... واآلن لنبدء على بركة هللا Horizontalوهو menu & Vertical menu


:1الفكرة

المهم يصير نفس الفكرة .. ^_^اختار الي بعجبك ..طبعا األلوان مش مهمة activeأو hoverلون الخلفية والخط بختلف لما يصير ..الي انت شايفها

*) _*على فكرة أنا ما الي على اختيار األلوان ... (^_^

^_^خطوات الدل وانشاء مثل هذه القائمة ستجدها بالصفدة التالية

: 1الدل لكتابة شيفرة برمجية لدل مثل هذا النوع من القوائم فعليك أن تعلم أنه ال يوجد حل *)

فاذا قمت بدله باسلوب .. ^_^وإنما هناك أكثر من حل وأكثر من اسلوب .. وحيد لكن تدقق أنه يعمل على كل المتصفدات ..فال بأس .. آخر _^

: لدل هذ السؤال لنتدرج خطوة بخطوةوهنا بما .. olأو ulيلزمنا قائمة والقائمة تعلمنا أنه يمكننا انشائها عن طريق ال : أوال

.. ulأنها غير مرتبة فسنستخدم ال <a></a>بما أنها قائمة ستأخذني ألكر من صفدة فيلزمني لذلك : ثانيا ,float, colorمثل ال cssسنجتاج الى استخدام العديد من خصائص ال : ثالثا

background-color, a:hover, a:active ... باإلضافة الىpadding


: 1الدل


ولكن بدال من, بنفس الفكرة السابقة: 2الفكرة , أصبدت عامودية, أن تكون القائمة أفقية

اذا قمت بدل السؤال السابق أو تتبعه بشكلستجد بسهولة التعديالت الالزمة للقيام , صديح

بذلك

بكسل 200لكن العرض مددد ب autoهنا االرتفاع : خطوات للتفكير بالدل..floatاذا ال يوجد ..أيضا ال توجد العناصر بجانب بعضها البعض

سيكون aاذا عرض ال ..يأخذ من قيمة العرض paddingال .. أيضا ..العرض الكلي مطروح منه مسافة االزاحة من اليمين واليسار


: 2الدل


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

*^_أوال


كل صورة في هذا المعرض .. اآلن نريد انشاء معرض صور بسيط : 3الفكرة ..الحظ الصورة الموجودة باألسفل .. linkable..يجب أن تكون قابلة للنقر

أوال عليك أن تعلم أن هذه الصورة يمكن وضعها : خطوات التفكير بالدل padding or marginوالمسافة هي , floatجانب بعض باستخدام ال

background colorوهناك .. واللون األحمر اطار aوالرابط هو هذا يعني أن العرض الكلي .. ارتفاع 150عرض 200الصورة حجمها ..

مسافة اإلزاحة + 600هو لكل 10وهي في الصورة فيصبح 60اتجاه وهذا يعني

.. 660العرض الكلي هو


: 3الدل

HTML


: 3الدل

ليس من الحكمة أن يكون اإلنسان متأكد من حكمته، أنه أمر صحي أن يتم تذكيره بأن األقوى يمكن أن يضعف،

.واألكثر حكمة يمكن أن يخطئ



!؟..هل يمكننا ذلك ..لو حاولنا بناء صفدة ويب بسيطة وبتنسيق معين .. اآلن

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

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

: التصميم الذي اعتدمته(1header :وعادة ما تكون تدتوي على , وهي الترويسية الخاصة بالصفدة

logo, search, menus, slider .. في العادة وومكن تقسم الslider لوحده

وهنا يوجد أكثر من أسلوب أن استخدمت يكون المدتوى : mainال 2)... second-sidebarو first-sidebarمقسوم الى جزئين


3 (footer :أو روابط ال , ويدتوي عادة روابط مختصرة للموقعsocial media .. أوcopyright ..


header, main, footerأوال يجب علينا تقسيم الصفدة الى األجزاء : الدليدتوي على mainوال menuو imgو logoيدتوي على headerال

first-sidebar وsecond-sidebar أما الfooter فيدتوي علىcopyright ...

headerال : أوال

header


mainال : ثانيا


footerال : ثالثا

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


الدمد ل صاحب ... الدمد ل رب العالمين... الدمد ل الذي بدمده تتم النعم وعدد الدركات والسكون.. وعدد ما يكون ..الدمد ل عدد ما كان ... الفضل

الدمد ل رب العالمين

واآلن , انتهينا من الجزء الثاني من الدورة, هكذا إخواني نكون بإذن هللا تعالىسائال .. JavaScriptوهو ال , في طريقنا الى الجزء الثالث بإذن هللا تعالى

...أن يوفقنا وإياكم الى خير العمل, المولى عز وجل

فإن أصبنا فبفضل من هللا تعالى .. بمدصله عمل بشري..إخواني إن هذا العمل ... وإن أخطئنا فمن أنفسنا , وتوفيقه

اللهم اغفر لي ولوالدي وللمسلمين أحيائهم وأمواتهم إنك على كل شيء قدير

باللغة العربية CSS دورة

Education

Transcript of باللغة العربية CSS دورة