Basic Rock Css PDF

‫‪CSS‬‬
‫نبذه مختصرة‬
‫هذا الكتاب يعد للقارئ‬
‫بمثابة صخرة قوية ثابته‬
‫بفضل اهلل من األساس في‬
‫عالم الويب‪ ،‬مع لغة تنسيق‬
‫الويب الساحرة ‪CSS‬‬
‫مع أهم تفاصيلها من‬
‫البداية الى االحتراف بفضل‬
‫اهلل‪ ،‬حيث تبدأ من الصفر‬
‫وتتعلم‪ ،‬ثم تتأسس‪ ،‬ثم‬
‫تطبق‪ ،‬ثم تتعلم أكثر‪ ،‬ثم‬
‫تطبق أكثر‪ ،‬ثم تتأسس‬
‫وتتعلم أكثر وأكثر‪ ،‬ثم‬
‫"صخرة األساس"‬ ‫تمارس أكثر وتستمر في‬
‫التطبيق‪ ،‬ثم تصل الى‬
‫االحتراف بفضل اهلل‬
‫‪BASIC ROCK‬‬ ‫احمد حسونة‬
‫صخرة األساس ‪CSS‬‬
‫شرح لغة ‪ CSS‬من البداية إلى االحتراف‬
‫تأليف‪ :‬احمد حسونة عام ‪2019‬‬
‫لغة ‪ CSS‬من البداية إلى االحتراف – من اكاديمية حسونة 🎓 بفضل هللا‬
‫صخرة األساس ‪ -‬ادخل واشترك وشاهد وشارك ‪ 🔔+‬ليصلك كل جديد‬ ‫أكاديمية حسونة‬
‫‪www.hassouna-academy.com www.youtube.com/user/HassounaAcademy‬‬
‫فهرس الموضوعات ‪Subject Index‬‬
‫فهرس الموضوعات ‪1....................................... ................................ Subject Index‬‬

‫مقدمة أساسية – هامة جداً ‪14 .................... ................................ ................................‬‬
‫هام جداً ‪ Very Important‬قبل الكتاب ‪18 ................................ ................................‬‬
‫رؤية الكتاب ‪19 ............ ................................ ................................ Vision of Book‬‬
‫قبل البداية في عالم ‪20 ..................... ................................ ................................ CSS‬‬
‫محرر الكود المفضل ‪21 ......................... ................................ Favorite Code Editor‬‬
‫ما هي لغة التصميم ‪23 ...................... ................................ ................................ CSS‬‬
‫تأثير ‪ CSS‬على الصفحات ‪24 ...................... ................................ ................................‬‬
‫مخترع لغة ‪30 ............................... ................................ ................................ CSS‬‬
‫وحدات القياس ‪31 ................................ ................................ Measurement units‬‬
‫مكونات لغة ‪33 ............................... ................................ ................................ CSS‬‬
‫بادئة المتصفحات ‪34 ....................................... ................................ Vendor Prefix‬‬
‫أماكن كتابة لغة ‪35 ......................... ................................ ................................ CSS‬‬
‫أوالً‪ :‬استخدام الطريقة ‪ inline style‬للعنصر‪36 ......................... ................................ .‬‬
‫ثانياً‪ :‬استخدام الطريقة ‪ internal style‬للصفحة‪37 .................... ................................ .‬‬
‫ثالثاً‪ :‬استخدام الطريقة ‪ external style‬للملف‪38 ..................... ................................ .‬‬
‫الهدف ‪40 ............................ ................................ ................................ Selector‬‬
‫الهدف الطبيعي ‪41 .................................. ................................ Normal Selector‬‬
‫الهدف المعرف ‪43 ............ ................................ ................................ Id Selector‬‬
‫الهدف المصنف ‪45 ..................................... ................................ Class Selector‬‬
‫الهدف الكلي ‪47 ................................. ................................ Universal Selector‬‬
‫الهدف بالخاصية ‪49 ............................. ................................ Attribute Selector‬‬
‫األهداف المتداخلة‪59 ........................................ ................................ Combinators‬‬
‫صفحة رقم ‪1‬‬

‫ادخل وسجل حساب على الموقع اآلن ‪www.hassouna-academy.com‬‬
CSS Zero to Hero – From Hassouna Academy 🎓
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
60 ................ ................................ ................................ ‫عنصر داخل عنصر بأي طريقة‬
68 ............... ................................ ................................ ‫عنصر داخل عنصر بشكل مباشر‬
70 .................................. ................................ ................................ ‫العنصر التالي‬
72 ................................ ................................ ‫كل العناصر التالية أو أشقاء العنصر من بعده‬
74 ............. ................................ ................................ Active Code‫الكود الذي يغلب‬
78 .............................. ................................ Size or Dimensions ‫الحجم أو األبعاد‬
86 ......................... ................................ ................................ Margins ‫الهوامش‬
93 ............................. ................................ ................................ Padding ‫الحشو‬
96 .......................... ................................ ................................ Direction ‫االتجاه‬
96 ............... ................................ ................................ direction ‫اتجاه العناصر‬
98 .......................................... ................................ unicode-bidi ‫ضبط اليونيكود‬
102 ........................ ................................ ................................ Borders ‫اإلطارات‬
117 ......................... ................................ Color and Background ‫اللون والخلفية‬
117 ................................. ................................ background-color ‫لون الخلفية‬
119 .................... ................................ background-image ‫صورة الخلفية والتدرج‬
131 ............................. ................................ background-repeat ‫تكرار الخلفية‬
133 ................................. ................................ background-size ‫حجم الخلفية‬
136 .......................................... background-attachment ‫ارتباط أو تعلق الخلفية‬
140 ........................ ................................ background-position ‫موضع الخلفية‬
150 ............................... ................................ background-clip ‫قصاصة الخلفية‬
153 .................. ................................ background-blend-mode ‫مزج الخلفيات‬
170 ....................................... ................................ background ‫خاصية الخلفية‬
172 ................................ ................................ border-image ‫تكوين إطار بالصورة‬
177 ................ ................................ ................................ Colors ‫استخدام األلوان‬
182 .................................. ................................ mix-blend-mode ‫خليط المزيج‬
195 ....................... ................................ ................................ isolation ‫العزل‬
PAGE 2
Create Account Now www.hassouna-academy.com
‫المحتوي الزائد ‪197 ................. ................................ ................................ Overflow‬‬
‫خاصية المحتوي الزائد ‪200 ..................................... ................................ overflow‬‬
‫المحتوي األفقي الزائد ‪204 .................................... ................................ overflow-x‬‬
‫المحتوي الرأسي الزائد ‪206 ................................... ................................ overflow-y‬‬
‫النصوص ‪208 ............................. ................................ ................................ Texts‬‬
‫حجم الخط ‪208 ................. ................................ ................................ font-size‬‬
‫نوع الخط ‪210 .............. ................................ ................................ font-family‬‬
‫تقنين الخط ‪213 ......................................... ................................ font- kerning‬‬
‫نمط الخط ‪215 ................ ................................ ................................ font- style‬‬
‫ثقل الخط ‪216 ............. ................................ ................................ font- weight‬‬
‫تنوع الخط ‪217 ........... ................................ ................................ font- variant‬‬
‫صناعة الخط بالمحدد ‪218 .................................. ................................ @font-face‬‬
‫استيراد الخط بالمحدد ‪220 ...................................... ................................ @import‬‬
‫ضبط حجم الخط ‪221 ............................... ................................ font-size-adjust‬‬
‫تمدد الخط ‪224 ........... ................................ ................................ font- stretch‬‬
‫طول السطر ‪227 ............ ................................ ................................ line- height‬‬
‫خاصية الخط ‪229 ....................... ................................ ................................ font‬‬
‫محاذاة النص ‪230 ............. ................................ ................................ text-align‬‬
‫محاذاة آخر النص ‪232 ................................ ................................ text-align-last‬‬
‫المسافة البادئة للنص ‪234 .................................. ................................ text-indent‬‬
‫التفاف النص ‪235 ............ ................................ ................................ word wrap‬‬
‫مسافات بين الكلمات ‪242 ............................... ................................ word-spacing‬‬
‫مسافات بين الحروف ‪243 .............................. ................................ letter-spacing‬‬
‫خاصية النص الزائد ‪244 ................................ ................................ text-overflow‬‬
‫خط ديكور النص ‪246 ......................... ................................ text-decoration-line‬‬
‫لون ديكور النص ‪250 ....................... ................................ text-decoration-color‬‬

251 ....................... ................................ text-decoration-style ‫شكل ديكور النص‬
253 ............................. ................................ text-decoration ‫خاصية ديكور النص‬
254 ..................................... ................................ text-transform ‫تحوالت النص‬
256 ............. ................................ ................................ text-shadow ‫ظل النص‬
262 ................... ................................ ................................ hyphens ‫الواصالت‬
263 ....................... ................................ ................................ quotes ‫االقتباس‬
264 .................................... ................................ tab-size ‫ في النص‬tab ‫حجم رمز‬
266 ............ ................................ ................................ user-select ‫تحكم التحديد‬
268 ....................................... ................................ writing-mode ‫طريقة الكتابة‬
270 ......................... ................................ hanging-punctuation ‫تعليق الترقيم‬
271 ........................... ................................ ................................ Display ‫العرض‬
272 .............. ................................ ................................ visibility ‫ظهور العناصر‬
273 ................ ................................ ................................ inline ‫عنصر على السطر‬
276 ..................... ................................ ................................ block ‫عناصر الكتلة‬
278 ....................................... ................................ inline-block ‫عناصر مختلطة‬
279 ............................ ................................ change display ‫تغيير طبيعة العناصر‬
283 ............................. ................................ ................................ Images ‫الصور‬
283 .................................. ................................ Photo Exercises ‫تمارين الصور‬
291 ............................ ................................ Text with Images ‫النص مع الصور‬
297 .......................... ................................ ................................ filter ‫التأثيرات‬
322 ............... ................................ ................................ object-fit ‫قص متناسب‬
323 ............................. ................................ object-position ‫موضع مع التحجيم‬
324 ....................................... ................................ pseudo ‫الفئات والعناصر المستعارة‬
325 ............................ ................................ ................................ hover ‫اللمس‬
327 ............................ ................................ ................................ focus ‫التركيز‬
329 ..................... ................................ ................................ checked ‫االختيار‬
PAGE 4
‫محتوي فارغ ‪331 .................... ................................ ................................ empty‬‬
‫أول عنصر فرعى ‪333 ......................................... ................................ first-child‬‬
‫آخر عنصر فرعى ‪336 .......................................... ................................ last-child‬‬
‫النوع األول ‪339 ........... ................................ ................................ first-of-type‬‬
‫النوع األخير ‪343 ........... ................................ ................................ last-of-type‬‬
‫رقم محدد لكل فرع ‪347 ......................................... ................................ nth-child‬‬
‫رقم محدد لكل فرع من األسفل ‪351 ...................... ................................ nth-last-child‬‬
‫رقم محدد لكل نوع ‪353 ...................................... ................................ nth-of-type‬‬
‫رقم محدد لكل نوع من األسفل ‪355 .................. ................................ nth-last-of-type‬‬
‫الفروع فقط ‪357 .............. ................................ ................................ only-child‬‬
‫النوع فقط ‪359 ............ ................................ ................................ only-of-type‬‬
‫الكل ما عدا ‪361 .......................... ................................ ................................ not‬‬
‫التعطيل ‪364 ...................... ................................ ................................ disabled‬‬
‫التفعيل ‪365 ....................... ................................ ................................ enabled‬‬
‫القراءة فقط ‪366 ............... ................................ ................................ read-only‬‬
‫غير مضبوط على القراءة فقط ‪367 .......................... ................................ read-write‬‬
‫المطلوب ‪368 .................... ................................ ................................ required‬‬
‫الغير المطلوب أو االختياري ‪369 ................................. ................................ optional‬‬
‫داخل المدي ‪370 ................. ................................ ................................ in-range‬‬
‫خارج المدي ‪371 ......................................... ................................ out-of-range‬‬
‫تم التحقق منه ‪372 ..................... ................................ ................................ valid‬‬
‫لم يتم التحقق منه ‪373 ............. ................................ ................................ invalid‬‬
‫اللغة ‪374 ............................... ................................ ................................ lang‬‬
‫األصل ‪375 .............................. ................................ ................................ root‬‬
‫هدف تم استهدافه ‪376 .............. ................................ ................................ target‬‬
‫الرابط ‪379 ............................... ................................ ................................ link‬‬

‫🎓 ‪CSS Zero to Hero – From Hassouna Academy‬‬
‫‪Hassouna Academy‬‬ ‫🔔‪Basic Rock - Like - Subscribe - Share – Views +‬‬
‫رابط تمت زيارته ‪380 ................ ................................ ................................ visited‬‬
‫الفاعلية ‪381 ......................... ................................ ................................ active‬‬
‫ما بعد ‪383 ............................. ................................ ................................ after‬‬
‫ما قبل ‪385 .......................... ................................ ................................ before‬‬
‫شيء تم تحديده ‪387 ............. ................................ ................................ selection‬‬
‫الحرف األول ‪390 ............. ................................ ................................ first-letter‬‬
‫السطر األول ‪392 ................ ................................ ................................ first-line‬‬
‫القوائم ‪394 ................................ ................................ ................................ Lists‬‬
‫نوع القوائم ‪394 ........................................ ................................ list-style-type‬‬
‫صورة القائمة ‪423 ................................... ................................ list-style-image‬‬
‫موضع القائمة ‪425 ............................... ................................ list-style-position‬‬
‫خاصية القائمة ‪427 ............. ................................ ................................ list-style‬‬
‫الجداول ‪429 ............................ ................................ ................................ Tables‬‬
‫أوالً‪ :‬أساس الجدول وبياناته وخلفية الصفحة ‪430 .............................. ................................‬‬
‫ثانياً‪ :‬طمس إطار الجدول وعمل العرض بالكامل ‪431 ........................... ................................‬‬
‫ثالثاً‪ :‬ضبط عناوين الجدول ‪432 ................. ................................ ................................‬‬
‫رابعاً‪ :‬ضبط الحشو للخاليا وعمل اإلطار من األسفل ‪433 ........................ ................................‬‬
‫خامساً‪ :‬ضبط لون خلفية الصفوف الزوجية والفردية ‪435 ....................... ................................‬‬
‫أكواد تطور بناء الجدول ‪437 ..................... ................................ ................................‬‬
‫تصميم تطور بناء الجدول ‪438 .................... ................................ ................................‬‬
‫جداول أخري ‪440 ................................ ................................ ................................‬‬
‫مكان عنوان الجدول ‪475 .................................. ................................ caption-side‬‬
‫الخاليا الفارغة ‪477 ........................................ ................................ empty-cells‬‬
‫تنسيق الجدول ‪478 ......................................... ................................ table-layout‬‬
‫الموضع ‪481 ......................... ................................ ................................ Position‬‬
‫مفهوم الموضع ‪481 ............................ ................................ ................................‬‬
‫‪PAGE 6‬‬
‫‪Create Account Now www.hassouna-academy.com‬‬
‫الموضع الطبيعي والتغيير ‪483 .................... ................................ ................................‬‬
‫أبعاد الحواف ‪485 ................................ ................................ ................................‬‬
‫أنواع األوضاع ‪490 .............................. ................................ ................................‬‬
‫ظهور عنصر على آخر ‪491 ...................... ................................ ................................‬‬
‫ملخص مفهوم الموضع ‪493 ..................... ................................ ................................‬‬
‫الوضع ‪494 ........................... ................................ ................................ static‬‬
‫الوضع ‪495 ...................... ................................ ................................ absolute‬‬
‫الوضع ‪497 ....................... ................................ ................................ relative‬‬
‫الوضع ‪499 ............................ ................................ ................................ fixed‬‬
‫الوضع ‪507 ........................... ................................ ................................ sticky‬‬
‫التنظيم ‪510 ............................... ................................ ................................ Float‬‬
‫معني ‪510 ............................... ................................ ................................ float‬‬
‫اتجاه العناصر نحو اليسار ‪511 .................................. ................................ float left‬‬
‫اتجاه العناصر نحو اليمين ‪514 ................................ ................................ float right‬‬
‫الـ ‪ float‬مع العناصر األخرى ‪517 ........... ................................ ................................‬‬
‫عزل الـ ‪ float‬بـ ‪522 ............... ................................ ................................ clear‬‬
‫الصندوق ‪526 ................................. ................................ ................................ box‬‬
‫ظل الصندوق ‪526 .......................................... ................................ box-shadow‬‬
‫تحجيم الصندوق ‪538 .......................................... ................................ box-sizing‬‬
‫ديكور السطر للصندوق ‪542 ................. ................................ box-decoration-break‬‬
‫الصندوق المنظم ‪547 ............ ................................ ................................ Box Model‬‬
‫أوالً‪ :‬وضع المحتوي داخل ‪ div‬بدون أي تنسيق ‪548 .......................... ................................‬‬
‫ثانياً‪ :‬لون النص والخلفية وحجم الخط ‪549 .................................... ................................‬‬
‫ثالثاً‪ :‬الهامش والحشو ومحاذاة النص ‪550 ..................................... ................................‬‬
‫رابعاً‪ :‬الطول والعرض ‪551 ...................... ................................ ................................‬‬
‫خامساً‪ :‬اإلطار ‪552 ............................. ................................ ................................‬‬

553 .................... ................................ ................................ ‫ اإلطار الخارجي‬:ً‫سادسا‬
554 .............. ................................ ................................ ‫ تظليل الصندوق والنص‬:ً‫سابعا‬
556 ....................... ................................ ................................ ‫مراحل تطور الصندوق‬
557 ................................... ................................ )Flex Box( Flexibility ‫المرونة‬
557 .......................................... ................................ display flex ‫الظهور المرن‬
561 ........................................ ................................ align-items ‫محاذاة العناصر‬
567 ........... ................................ ................................ flex-wrap ‫التفاف المحتوي‬
572 ...................................... ................................ flex-direction ‫اتجاه المرونة‬
576 ................ ................................ ................................ flex-flow ‫تدفق المرونة‬
579 .................................... ................................ align-content ‫محاذاة المحتوي‬
591 .................................... ................................ justify-content ‫ضبط المحتوي‬
597 ...................................... ................................ align-self ‫محاذاة العنصر نفسه‬
600 ............ ................................ ................................ flex-basis ‫أساس للمرونة‬
603 ............ ................................ ................................ flex-grow ‫ازدياد العناصر‬
608 ........................................ ................................ flex-shrink ‫انكماش العناصر‬
612 ............................. ................................ ................................ flex ‫الخاصية‬
613 .................... ................................ ................................ order ‫ترتيب العناصر‬
614 ........................... ................................ Centralize Element ‫توسيط العنصر‬
615 ........................ ................................ Centralize Elements ‫توسيط العناصر‬
616 ........... ................................ ................................ ‫عرض صور منظمة حسب الرغبة‬
620 ................................ ................................ Cursor and Caret ‫المؤشر والعالمة‬
620 ................... ................................ caret-color ‫عالمة اإلدخال (االقحام) في الكتابة‬
624 ......................... ................................ ................................ cursor ‫المؤشر‬
627 ..................................... ................................ pointer-events ‫حدث المؤشر‬
628 ......................... ................................ ................................ clipping ‫التقطيع‬
628 ............................ ................................ ................................ clip ‫القصاصة‬
PAGE 8
‫مسار القص ‪630 ................ ................................ ................................ clip-path‬‬
‫األعمدة المتعددة ‪631 .................................... ................................ Multi Columns‬‬
‫عدد األعمدة ‪631 ....................................... ................................ column-count‬‬
‫الفارق بين األعمدة ‪633 .................................... ................................ column-gap‬‬
‫فواصل األعمدة ‪634 ....................................... ................................ column-rule‬‬
‫عرض العمود ‪637 ...................................... ................................ column-width‬‬
‫عنوان متمدد لألعمدة ‪639 ................................ ................................ column-span‬‬
‫تعبئة األعمدة ‪642 ........... ................................ ................................ column-fill‬‬
‫خاصية األعمدة ‪645 ............. ................................ ................................ columns‬‬
‫النظام الشبكي ‪646 ............ ................................ ................................ Grid Layout‬‬
‫قالب األعمدة ‪647 ...................... ................................ grid-template-columns‬‬
‫قالب الصفوف ‪651 ............................ ................................ grid-template-rows‬‬
‫قالب مناطق الخاليا ‪653 ..................... ................................ grid-template-areas‬‬
‫القالب ‪664 ............. ................................ ................................ grid-template‬‬
‫مناطق الخاليا ‪668 ............. ................................ ................................ grid-area‬‬
‫فجوات بين الخاليا ‪670 .......................................... ................................ grid-gap‬‬
‫صف البداية ‪676 ....................................... ................................ grid-row-start‬‬
‫صف النهاية ‪678 ........................................ ................................ grid-row-end‬‬
‫الصف ‪682 ....................... ................................ ................................ grid-row‬‬
‫عمود البداية ‪684 ................................ ................................ grid-column-start‬‬
‫عمود النهاية ‪686 ................................. ................................ grid-column-end‬‬
‫العمود ‪690 ................ ................................ ................................ grid-column‬‬
‫تلقائية العمود ‪692 ............................. ................................ grid-auto-columns‬‬
‫تلقائية الصف ‪694 .................................... ................................ grid-auto-rows‬‬
‫تلقائية التدفق ‪696 ..................................... ................................ grid-auto-flow‬‬
‫فتح تحجيم العناصر ‪700 ................ ................................ ................................ resize‬‬

703 ...................................... ................................ scroll-behavior ‫أسلوب التمرير‬
705 ..................... ................................ Transform, Perspective ‫التحول والمنظور‬
706 ................... ................................ ................................ 2D ‫التحول ثنائي األبعاد‬
706 .................. ................................ ................................ rotate ‫تحول االستدارة‬
708 ................. ................................ ................................ rotateX ‫استدارة أفقية‬
710 ................ ................................ ................................ rotateY ‫استدارة رأسية‬
712 ................. ................................ ................................ skewX ‫االنحراف األفقي‬
714 ................ ................................ ................................ skewY ‫االنحراف الرأسي‬
716 ..................... ................................ ................................ skew ‫االنحراف الكلي‬
718 ................. ................................ ................................ scaleX ‫المقياس األفقي‬
720 ................ ................................ ................................ scaleY ‫المقياس الرأسي‬
722 ..................... ................................ ................................ scale ‫المقياس الكلي‬
724 .............. ................................ ................................ translateX ‫تحريك أفقي‬
726 .............. ................................ ................................ translateY ‫تحريك أفقي‬
728 .................. ................................ ................................ translate ‫تحريك كلي‬
730 ..................................... ................................ matrix ‫مفهوم توزيعة التحول الكلي‬
732 .................................. ................................ matrix ‫ بواسطة‬scaleX ‫عمل الـ‬
734 .................................. ................................ matrix ‫ بواسطة‬scaleY ‫عمل الـ‬
736 ........................... ................................ matrix ‫ بواسطة‬translateX ‫عمل الـ‬
738 ............................ ................................ matrix ‫ بواسطة‬translateY ‫عمل الـ‬
740 .................................. ................................ matrix ‫ بواسطة‬skewX ‫عمل الـ‬
742 .................................. ................................ matrix ‫ بواسطة‬skewY ‫عمل الـ‬
744 ................................... ................................ matrix ‫ بواسطة‬rotate ‫عمل الـ‬
748 .................................. ................................ matrix ‫عمل جميع التحوالت بواسطة‬
750 ................................ ................................ Many Transform ‫أكثر من تحول‬
752 .............. ................................ 3D ‫ واالستخدام الثالثي األبعاد‬perspective ‫المنظور‬
PAGE 10
‫عمل منظور بالدالة ‪758 .................................... ................................ perspective‬‬
‫تحول االستدارة باستخدام ‪759 ..................................... ................................ rotateZ‬‬
‫التمدد المجسم ‪760 .................. ................................ ................................ scaleZ‬‬
‫تحريك مجسم ‪762 ............ ................................ ................................ translateZ‬‬
‫تكوين شكل مكعب ثالثي األبعاد ‪764 ...................................... ................................ Cube‬‬
‫بداية تكوين المكعب ‪764 .......................... ................................ ................................‬‬
‫ضبط الوضع الحر ‪766 ........... ................................ ................................ absolute‬‬
‫ضبط الزوايا المناسبة ‪767 ....................... ................................ ................................‬‬
‫زيادة المشهد وضبط المنظور و‪ transform-style‬على ‪768 ....................................... 3D‬‬
‫ضبط اإلطار لمكونات المكعب الداخلية ‪770 ....................................... ................................‬‬
‫عمل تحريك مجسم للكل بنصف قيمة كل مربع ‪772 ............................... ................................‬‬
‫عمل استدارة ثالثية األبعاد ‪774 .................................. ................................ rotate3d‬‬
‫تحريك مجسم باستخدام ‪778 ............................... ................................ translate3d‬‬
‫تمدد مجسم باستخدام ‪780 ........................................ ................................ scale3d‬‬
‫تحوالت الـ ‪ 3D‬بواسطة ‪782 .................................. ................................ matrix3d‬‬
‫االنتقال ‪783 ...................... ................................ ................................ Transition‬‬
‫الخاصية والمدة والتأخير مع الـ ‪784 ........................ ................................ transition‬‬
‫توظيف الوقت ‪792 ................. ................................ transition-timing-function‬‬
‫استخدام ‪798 ............. ................................ ................................ cubic-bezier‬‬
‫الخاصية ‪804 .................. ................................ ................................ transition‬‬
‫الحركة ‪806 ...................... ................................ ................................ Animation‬‬
‫صناعة مؤثر الحركة بالمحدد ‪807 ........................ ................................ @keyframes‬‬
‫تشغيل الحركة ‪809 ............................... ................................ ................................‬‬
‫توظيف وقت الحركة ‪811 ......................................... animation-timing-function‬‬
‫تأخير الحركة ‪812 .................................. ................................ animation-delay‬‬
‫عدد التكرارات ‪813 ................ ................................ animation-iteration-count‬‬

814 ........................... ................................ animation-direction ‫توجيه الحركة‬
818 ........................ ................................ animation-fill-mode ‫نمط تتبع الحركة‬
820 ................. ................................ animation-play-state ‫تشغيل وإيقاف الحركة‬
821 .......................................... ................................ animation ‫خاصية التحريك‬
822 .......................... ................................ Infinite animation ‫الحركة الالنهائية‬
824 ............ ................................ ................................ Animation ‫أمثلة على الـ‬
862 .............................. ................................ ................................ Tools ‫األدوات‬
863 ................ ................................ ................................ Text Box ‫مربع النص‬
865 ................... ................................ ................................ Label ‫عنوان الشاشة‬
867 ........................ ................................ ................................ Buttons ‫األزرار‬
870 ........................... ................................ ................................ Panel ‫اللوحة‬
871 ......................................... ................................ Check Box ‫صندوق االختيار‬
874 ................... ................................ ................................ Radio ‫صندوق الراديو‬
877 ................... ................................ ................................ Slider ‫شريط االختيار‬
879 ........................................ ................................ Combo Box ‫صندوق االختيار‬
882 ................ ................................ ................................ Toggle ‫صندوق المفتاح‬
885 ......................... ................................ Custom Counter ‫أداة العداد المخصص‬
888 ............... ................................ ................................ styles.css ‫أكواد الملف‬
895 .............................. ................................ ................................ ‫شاشة األدوات‬
897 ......................................... ................................ Scroll Bar ‫شريط تمرير الصفحة‬
903 ...................................... ................................ Media Query ‫استعالمات الميديا‬
904 ...................................... ................................ Media Query ‫البداية مع الـ‬
908 .......................... ................................ Media Query ‫تنوع االستخدامات مع الـ‬
912 ................ ................................ ................................ ‫استخدام مع طبيعة الصفحة‬
914 ...................... ................................ Min and Max ‫تنسيق بين أقصي وأقل للعرض‬
918 ............................ ................................ ................................ Inherit ‫الوراثة‬
PAGE 12
‫تعريف المتغيرات ‪921 .............. ................................ ................................ Variables‬‬
‫تمارين عملية ‪924 ................................ ................................ practical examples‬‬
‫تمرين نص محفور ‪924 ............................ ................................ ................................‬‬
‫تغيير شكل الروابط ‪925 ........................... ................................ ................................‬‬
‫عمل جدول ‪926 .................................. ................................ ................................‬‬
‫قائمة رأسية عادية ‪928 ......................... ................................ ................................‬‬
‫قائمة جانبية والمحتوي على اليمين ‪930 ......................................... ................................‬‬
‫قائمة في األسفل ‪933 ............................ ................................ ................................‬‬
‫قائمة علوية منبثقة ‪936 ......................... ................................ ................................‬‬
‫مربع نص بأيقونة من صورة ‪939 ................ ................................ ................................‬‬
‫تنسيق أكواد برمجية بـ ‪940 ............... ................................ ................................ css‬‬
‫الروابط المخفية ‪942 ............................ ................................ ................................‬‬
‫جدول بشريط تمرير وتلميحات ‪944 ................ ................................ ................................‬‬
‫مربع يتحرك ويتلون ‪948 ......................... ................................ ................................‬‬
‫صفحة المنتجات مع استخدام صور ‪950 ......................................... ................................‬‬
‫مربع يتقلب ويرتعش ‪957 ......................... ................................ ................................‬‬
‫تنويع روابط وازرار ومربعات نص ‪959 ........... ................................ ................................‬‬
‫كنوز وهدايا 💖 ‪964 ............................... ................................ ................................‬‬

‫شكر خاص ‪975 ...................................... ................................ ................................‬‬
‫نشكرك على قراءتك ‪976 ............................. ................................ ................................‬‬
‫المراجع ‪977 ................... ................................ ................................ References‬‬
‫الختام ‪978 .......................... ................................ ................................ The End‬‬

‫مقدمة أساسية – هامة جداً‬

‫بسم اهلل الرحمن الرحيم والصالة والسالم على أشرف المرسلين سيدنا‬
‫محمد الذي أرسله اهلل رحمة للعالمين‪ ،‬وأشهد أن ال إله إال اهلل وحده ال‬
‫شريك له‪ ،‬الذي لم يتخذ ولدا ولم يكن له شريك في الملك وخلق كل شيء‬
‫فقدره تقديرا ‪ ،،،‬ثم أما بعد‪...‬‬
‫الشيء الوحيد الذي أخبر اهلل رسوله محمد ﷺ أن يطلب فيه الزيادة هو‬
‫دنِي ِعْل ًما)‬ ‫ب زِ ْ‬ ‫ِ‬
‫العلم عندما قال اهلل سبحانه وتعالي في سورة طه ( َوقُلْ َر ِّ‬
‫ك الَّ ِذي خَلَ َق (‪ )1‬خَلَ َق‬ ‫اس ِم َربِِّ َ‬
‫‪ ،‬وأول ما نزل من القرآن الكريم (اقَْرأْ بِ ْ‬
‫ِ‬ ‫ِ‬ ‫ان ِم ْن عَلَ ٍق (‪ )2‬اقَْرأْ َو َربُّ َ‬
‫ك َرُم (‪ )3‬الَّذي عَلَّمَ بِا ْلقَلَم (‪ )4‬عَلَّمَ‬ ‫ك ْاْلَ ْ‬ ‫ْاْلِْن َس َ‬
‫ان َما لَ ْم يَ ْعلَ ْم) ‪ ،‬ورفع اهلل من قدر وشأن العلماء حينما قال (يَ ْرفَِع‬ ‫ْاْلِْن َس َ‬
‫كم والَّ ِذين أُوتُوا ا ْل ِعلْم درج ٍ‬ ‫ِ‬ ‫َّ ِ‬
‫ات) ‪ ،‬وبين اهلل عز وجل‬ ‫َ َََ‬ ‫آمنُوا من ُ ْ َ َ‬ ‫اَّللُ الَّذ َ‬
‫ين َ‬
‫أن العلماء ال يتساوون في القدر مع من ال يعلم فقال جل في عاله (قُلْ‬
‫ون إِنََّما يَتَذَكَّ ُر أُولُو ْاْلَْلبَ ِ‬ ‫ِ‬ ‫ِ‬
‫اب) ‪،‬‬ ‫ون َوالَّذ َ‬
‫ين ََل يَ ْعلَ ُم َ‬ ‫َهلْ يَ ْستَوِي الَّذ َ‬
‫ين يَ ْعلَ ُم َ‬
‫وأيضاً أخبرنا رب العزة سبحانه أن من يخشونه هم العلماء حين قال في‬
‫اد ِه ا ْل ُعلََم ُاء) ‪ ،‬وهو الذي علمنا عدد‬ ‫اَّلل ِمن ِعب ِ‬
‫كتابه العزيز (إِنََّما يَ ْخشَى ََّ ْ َ‬
‫السنين والحساب حين قال (هو الَّ ِذي جعل الشَّم ِ‬
‫ورا َوقَدََّرهُ‬
‫اء َوا ْلقََم َر نُ ً‬
‫س ضيَ ً‬ ‫ََ َ ْ َ‬ ‫َُ‬
‫ك إَِل بِا ْلح ِِّق يفَ ِصل اآلي ِ‬
‫ات‬ ‫اَّللُ ذَلِ َ‬
‫اب َما خَلَ َق َّ‬ ‫ِ‬ ‫َمنَازِل لِتَعلَ ُموا عَدَدَ ِ ِ‬
‫َ ُ ِّ ُ َ‬ ‫ين َوا ْلح َس َ‬
‫السن َ‬
‫ِّ‬ ‫َ ْ‬
‫ون) ‪ ،‬وكما نري أن العلم قدرة عالي وال يطلبه إال غالي أدرك‬ ‫ِ ٍ‬
‫لقَ ْوم يَ ْعلَ ُم َ‬
‫عاله‪.‬‬
‫‪PAGE 14‬‬
‫ولقد عزمت بإذن اهلل تعالي أن أقدم أفضل ما لدي من علوم في مجاالت‬
‫الحاسب اآللي (الكومبيوتر)‪ ،‬ألنه يفيد في جميع مناحي الحياة‪ ،‬فإذا تحدثنا‬
‫عن شركة تجارية فهي تستخدم الكمبيوتر لتدوين وحساب جميع اعمالها‬
‫من انتاج وتسويق ورواتب وغيرها‪ ،‬وإذا تحدثنا عن مدرسة أو كلية أو‬
‫معهد‪ ،‬فجميعها تستخدم الكمبيوتر في أعمالها وتظهر نتائج االمتحانات‬
‫والجداول‪ ،‬بل وبعض المؤسسات التعليمية الحديثة تمتحن الطالب ببرامج‬
‫ذكية متطورة‪ ،‬وفي الهيئات الحكومية يتم استخدام الكمبيوتر أيضاً‪ ،‬وأصبح‬
‫الحاسب يفعل كل شيء في حياتنا فلقد صعد اإلنسان في اآلفاق والفضاء‬
‫بالحاسب‪ ،‬ونشاهد به الفيديو ونشغل به الصوت ونطبع به الوثائق‬
‫والمستندات ونصور به الصور واألوراق وندير به كافة المجاالت‪ ،‬وال نقتصر‬
‫على هذا فحسب‪ ،‬بل ولو قلت لك أن الحاسب قد يغير في حياة أسرة‬
‫بأكملها وينجيها بفضل اهلل ‪ ،‬سوف تتعجب وتقول كيف ؟! – والجواب هو‬
‫كم من رجل كان على حافة االنهيار المادي والمعنوي بسبب فقده لوظيفته‪،‬‬
‫ففتح اهلل علية بتعلم الحاسب ورزقه اهلل بعمل جيد ورزق وفير‪ ،‬وكم من‬
‫شاب كان على حافة االنحراف األخالقي بسبب األخالق السيئة المتداولة بين‬
‫الشباب إال من رحم ربي‪ ،‬فمن اهلل علية بأن بدء في تعلم مجاالت الحاسب‬
‫فأحبها وبدء يبني مستقبلة الحقيقي‪.‬‬
‫المحتوي الذي سوف نتعلمه يتكون من مواضيع تتبع بعضها بعض‪ ،‬ومنظمة‬
‫بطريقة تسلسلية بحيث تأخذ بيدك خطوة بخطوة من البداية إلى االحتراف‬
‫بفضل اهلل‪ ،‬وسوف أتبع نظام في شرح هذا المحتوي مثل صعود الطائرة‪،‬‬
‫ففي البداية يتم التنبيه على الركاب ببعض اإلرشادات بالتفصيل الدقيق‪ ،‬ثم‬

‫في بداية اإلقالع يكون األمر صعباً ثم نطير إلى أعلي ونحلق في الفضاء‪،‬‬
‫وسوف نبدأ بإذن اهلل بالتفصيل ثم نعلوا‪ ..‬ونعلوا ‪ ،‬ثم نحلق ونحترف بإذن‬
‫اهلل‪ ،‬فإنني أنصح القارئ أن يهتم بجميع الموضوعات مرتبة‪ ،‬فعسي كلمة‬
‫أن تغير بفضل اهلل‪ ،‬والمحتوي تم تأليفه بكامل الحب واإلخالص لجميع‬
‫القراء‪ ،‬ولن يأخذ نسخ ولصق‪ ،‬بل وحتي المحتويات التاريخية الموجودة‬
‫داخل المحتوي تم صياغتها بأساليب مختلفة من أكثر من مكان معلوماتي‪،‬‬
‫والمؤلف وضع كل خبرته بكل الحب لجميع أحبائه القارئين لهذا المحتوي‪،‬‬
‫والكمال هلل وحدة‪ ،‬ونحن ال نعلم إال قليالً كما قال اهلل في القرآن‬
‫ن ا ْل ِعْل ِم إََِّل‬ ‫ِ ِ‬
‫أَمرِ َربِِّي َو َما أُوتيتُم مِّ َ‬
‫الر ِ‬
‫الروِح ۖ قُ ِل ُّ ُ‬
‫وح م ْن ْ‬ ‫ك عَ ِن ُّ‬
‫( َويَ ْسأَلُونَ َ‬
‫قَلِ ًيل )‪.‬‬
‫وفي الختام أسأل اهلل تبارك وتعالي بأسمائه الحسني وصفاته العال أن يفيد‬
‫جميع القراء بهذا المحتوي‪ ،‬ويغير في حياتهم إلى األفضل إن شاء اهلل‪.‬‬
‫كما أحب أن اشجع الجميع على العطاء في العلم‪ ،‬فإذا كنت تعلم أي‬
‫معلومة ال تبخل على غيرك بها أبداً‪ ،‬وتأكد أن اهلل سوف يكرمك بذلك‬
‫ويمن عليك بمعلومات أفضل بكثير من الذي لديك‪ ،‬ولقد أمرنا رسول اهلل‬
‫كامل األخالق أن نحب الخير إلخواننا كما نحبه ألنفسنا حين قال (حب‬
‫ألخيك ما تحب لنفسك)‪ ،‬وهذا الموضوع هام للغاية ألنه ينهض بالمجتمع‬
‫ككل‪ ،‬فإذا تعلمت شيء وعلمته ألخيك أو زميلك فسوف يأخذ فكرتك ثم يبتكر‬
‫عليها ابتكارا مختلفاً من ابتكارك‪ ،‬ألن اهلل خلق البشر بعقول ومميزات‬
‫مختلفة‪ ،‬ثم يعلم زميلك معلومتك ومعلومته لزميل آخر‪ ،‬فيبتكر ابتكاراً‬
‫ثالثاً مختلفاً عن األول والثاني‪ ،‬وهكذا‪ ،‬ولو حدث هذا على مستوي المجتمع‬
‫‪PAGE 16‬‬
‫نهض المجتمع وكثرت ابتكاراته واختراعاته‪ ،‬وال أقصد مجال الحاسب اآللي‬
‫فحسب‪ ،‬ال‪ ،‬بل أقصد جميع المجاالت في جميع مناحي الحياة‪ ،‬وإذا قابلت‬
‫شخص طلبت منه معلومة وبخل عليك‪ ،‬ثم بعد ذلك طلب منك معلومة ال‬
‫تفعل مثلة‪ ،‬بل اعطية المعلومة على الفور ولمح له أن هذا هو الصحيح‪،‬‬
‫وسوف يؤثر هذا علية ويغير حالة إلى العطاء‪ ،‬وهذا حدث معي شخصياً‬
‫أكثر من مرة‪ ،‬وأثبتت لي التجربة أن هذا هو الصحيح‪.‬‬
‫كما أحب أن انوه أنه غير مسموح ألي فرد أو شركة أو هيئة أو منظمة‬
‫أو مؤسسة أو قطاع من أي نوع أن يتربح أو يتاجر بهذا المحتوي بأي‬
‫نوع أي كان‪ ،‬أو يعيد كتابته‪ ،‬أو ينسخه بغير حق ليغير االسم‪ ،‬أو أي‬
‫عملية تحويل كتاب ‪ pdf‬الى أي نوع أو التعديل عليه‪ ،‬ولن اسامح أي‬
‫شخص تسبب في ذلك‪ ،‬ولن أتركه يوم القيامة‪ ،‬وعند اهلل تجتمع الخصوم‪.‬‬
‫وسوف تجد شرح فيديو لهذا المحتوي بالتفصيل مجاناً للمشاهدة فقط على‬
‫أكاديمية حسونة في الموقع أو اليوتيوب على الرابطين التاليين‪:‬‬
‫‪www.hassouna-academy.com‬‬
‫‪www.youtube.com/user/hassounaacademy‬‬
‫والسالم عليكم ورحمة اهلل وبركاته‪.‬‬
‫المؤلف‪ :‬احمد حسونة‬

‫هام جداً ‪ Very Important‬قبل الكتاب‬

‫أمانة ‪ -‬ثمن الكتاب‪ ،‬قراءة هذه الصفحة جيداً وصفحة نشكرك على قراءتك‬
‫وصفحة مقدمة أساسية وتلبيه ما فيهم ☺ فضالً منكم وليس أمراً‪.‬‬
‫موقع حسونة أكاديمي ←‬

‫‪https://www.hassouna-academy.com‬‬
‫قـناة حسونة أكاديمي ← ‪https://www.youtube.com/user/HassounaAcademy‬‬
‫بفضل اهلل‪ ،‬القناة عليها شرح كمبيوتر‪ ،‬وويندوز‪ ،‬ولينكس‪ ،‬وماك‪ ،‬وورد‪،‬‬
‫واكسل‪ ،‬وأكسس‪ ،‬وباور بوينت‪ ،‬ولغات برمجة كثيرة‪ ،‬وويب بتقنيات كثيرة‪،‬‬
‫وأمثلة كثيرة‪ ،‬وتطبيقات كثيرة‪ ،‬وموبايل‪ ،‬وأندرويد‪ ،‬وقواعد بيانات‪ ،‬ونظم‪،‬‬
‫وتصميم‪ ،‬وتحليل بيانات‪ ،‬وتحليل نظم‪ ،‬ومناهج دراسية‪ ،‬ووسائط متعددة‪،‬‬
‫ودردشة برمجة‪ ،‬وبرنامج مبيعات‪ ،‬وبرنامج مطاعم‪ ،‬ومعلومات متعددة‪،‬‬
‫وقصص نجاح‪ ،‬وبرامج جاهزة‪ ،‬وفوتوشوب‪ ،‬وشروحات كثيرة بفضل اهلل‪.‬‬
‫رجاء! ال تنسي أن تشترك بالقناة ↗ وفعل زر الجرس في القناة 🔔‬
‫وسجل حساب على موقع حسونة أكاديمي 👤 اآلن‪.‬‬
‫‪https://www.hassouna-academy.com/‬‬
‫‪PAGE 18‬‬
‫رؤية الكتاب ‪Vision of Book‬‬
‫• التعامل مع إصدارات ‪ css‬وكأنهم اصدار واحد‬

‫• التوجيه قبل البداية‬
‫تأسيس قوي في ‪( css‬تأثير‪ ،‬وحدات‪ ،‬مكونات‪ ،‬كتابة‪ ،‬استخدام‪ ،‬هدف)‬ ‫•‬
‫النصوص والحجم والصور والحشو والهوامش واالطارات‬ ‫•‬
‫األلوان والخلفيات والمحتوي الزائد والنصوص والعرض‬ ‫•‬
‫الصور ثم الفئات المستعارة‬ ‫•‬
‫القوائم والجداول‬ ‫•‬
‫الموضع والتنظيم والمرونة‬ ‫•‬
‫• االعمدة والنظام الشبكي‬
‫• التحول والمنظور‬
‫• تحكم االنتقال والحركة‬
‫• أدوات إضافية‬
‫• استعالمات الميديا‬
‫• مواضيع إضافية وتمارين عملية‬

‫قبل البداية في عالم ‪CSS‬‬

‫قبل البدء في دراسة هذا الكتاب‪ ،‬يجب أن تكون على دراية كافية بعالم نظام‬
‫التشغيل مثل‪ Windows ،‬أو ‪ Linux‬أو ‪ ،Mac‬ثم هام جداً‬
‫أن تتعلم كتاب "صخرة األساس" في اللغة ‪ HTML‬قبل البدء في هذا‬
‫الكتاب‪ ،‬ويمكنك العثور عليه من الرابط التالي‪:‬‬
‫‪https://www.hassouna-academy.com/books‬‬
‫ثم بعد أن تذاكر كتاب "صخرة األساس" في اللغة ‪ ،HTML‬تستطيع‬
‫الدخول وبقوة في اللغة الرائعة ‪ ،CSS‬بفضل اهلل‪.‬‬
‫كتاب "صخرة األساس" في اللغة ‪ ،HTML‬يحتوي على موضوعات اللغة‬
‫األم للويب ‪ HTML‬بالتفصيل‪ ،‬ويشرح الوسوم والخصائص‪ ،‬بالتفصيل‪،‬‬
‫ويبين المفاهيم بوضوح‪ ،‬ويجعلك تدخل في عالم الويب من باب واسع‪،‬‬
‫وسهل‪ ،‬ويبحر معك في األمثلة العملية‪ ،‬حتى تفهم الغرض من كل وسم‪،‬‬
‫وخاصية‪ ،‬ومثال‪ ،‬فلذلك ننصح بكتاب "صخرة األساس" في ‪.HTML‬‬
‫انتبه! اآلن يجب أن تعلم أنه أثناء دراسة هذا الكتاب‪ ،‬يجب معرفة كل ما‬
‫يتعلق باللغة األم للويب وهي اللغة ‪.HTML‬‬
‫سوف نعمل على نفس الملف الذي تم استخدامه في كتاب "صخرة األساس"‬
‫للغة ‪ ،html‬وهو الملف ‪.test.html‬‬
‫‪PAGE 20‬‬
‫محرر الكود المفضل ‪Favorite Code Editor‬‬

‫قد سبق وتحدثنا في كتاب ‪" HTML‬صخرة األساس" عن محرر النصوص‬
‫العادي ‪ ،Notepad‬الموجود في ويندوز‪ ،‬أو ما يعادله في أنظمة‬
‫التشغيل األخرى مثل لينكس وماك‪ ،‬وتمت البداية على هذه المحررات‬
‫التقليدية‪ ،‬لجعلك أكثر احترافية واعتمادية‪ ،‬ألنك تكتب األكواد بنفسك‪،‬‬
‫وبدون أي مساعدة‪ ،‬وبداية من اآلن سوف نقوم بذكر محررات أكواد مختلفة‪،‬‬
‫ومتخصصة‪ ،‬وذكية‪ ،‬ومساعده‪ ،‬ومريحة للعين‪ ،‬وأكثر كفاءة‪ ،‬والعمل عليها‬
‫بسرعة وسهولة‪ ،‬ألنها تكمل األكواد بشكل تلقائي‪.‬‬
‫يوجد محررات أكواد كثيرة جداً يمكنك استخدامها بسهولة‪ ،‬مع العلم أن‬
‫كل محرر كود مختلف عن اآلخر‪ ،‬مثالً برنامج ‪ ،Notepad++‬أو‬
‫برنامج ‪ ،Atom‬أو برنامج ‪ ،Komodo‬أو برنامج ‪ ،Brackets‬أو‬
‫برنامج ‪ ،Sublime Text‬أو برنامج ‪ ،Text Mate‬أو برنامج‬
‫‪ ،Vim‬أو برنامج ‪ Visual Studio Code‬إلى آخر هذه‬
‫البرامج الكثيرة‪ ،‬والتي اغلبها مجانية‪ ،‬ومفتوحة المصدر‪ ،‬وأيضاً مدعومة‬
‫على أنظمة ‪ Windows‬و‪ Linux‬و‪.Mac‬‬
‫انتبه! ننصح عند بداية تعليمك ودراستك‪ ،‬أال تعتمد كثيراً على تكملة هذه‬
‫المحررات‪ ،‬وتحاول كتابة األكواد كاملة بنفسك مرات متعددة‪ ،‬حتى تتعود‬
‫وتحترف‪ ،‬ثم بعد ذلك‪ ،‬ال بأس أن تستخدم مساعدات المحررات المختلفة‪.‬‬

‫تحميل المحررات من االنترنت وتنزيلها للنظام‪ ،‬بفضل اهلل سهل جداً‪،‬‬
‫فيمكنك التأكد من أن جهازك موصول باإلنترنت‪ ،‬ثم تابع الخطوات التالية‪:‬‬
‫• ادخل على موقع جوجل ‪.www.google.com‬‬

‫• اكتب في خانة البحث كلمة "‪ ،"download‬ثم مسافة‪ ،‬ثم اسم‬
‫البرنامج الذي تريد تحميله‪ ،‬مثالً ‪.download brackets‬‬
‫• ابحث عن رابط الموقع األصلي للبرنامج‪ ،‬وغالباً يكون أول نتائج‬
‫البحث‪ ،‬ثم ادخل عليه‪.‬‬
‫• ابحث داخل موقع البرنامج عن التحميل لنظام التشغيل الذي تستخدمه‪،‬‬
‫ثم اضغط على زر "التحميل" أو "‪ ،"download‬لبداية التحميل‪.‬‬
‫• بعد انتهاء التحميل‪ ،‬قم بتشغيل الملف المسؤول عن تنزيل البرنامج‪،‬‬
‫بطريقة نظام التشغيل الذي تعمل عليه‪ ،‬والتي من المفترض أنك تفهمها‬
‫جيداً‪ ،‬ثم اتبع خطوات التنزيل مثل ازرار "‪ "next‬او "‪."install‬‬
‫• افتح البرنامج‪ ،‬ثم أقرأ المساعدات واالستخدام والتلميحات‪ ،‬ثم‬
‫استخدمه كثيراً لتتعود علية‪.‬‬
‫وعن طريق الخطوات السابقة تستطيع العمل على أي محرر تريده‪ ،‬مع‬
‫العلم أن كل محرر له البيئة الخاصة به‪ ،‬ويوجد محررات تقبل منك إضافة‬
‫حزم اضافيه بها لدعم لغات وكلمات أكثر‪.‬‬
‫‪PAGE 22‬‬
‫ما هي لغة التصميم ‪CSS‬‬

‫تم انشاء اللغة ‪ ،CSS‬وتطويرها بعد ذلك‪ ،‬لتحسين تصميم صفحات الويب‬
‫والتأثير األفضل عليها من حيث‪ ،‬النصوص‪ ،‬والمحاذاة‪ ،‬والخطوط‪،‬‬
‫واأللوان‪ ،‬والخلفية‪ ،‬واالطارات‪ ،‬والصور‪ ،‬والشفافية‪ ،‬والهوامش‪ ،‬والحشو‪،‬‬
‫والروابط‪ ،‬وأشرطة التنقل‪ ،‬والقوائم‪ ،‬والجداول‪ ،‬واألدوات‪ ،‬والمواضع‪،‬‬
‫والتنظيم‪ ،‬والعرض‪ ،‬والدقة‪ ،‬والحجم‪ ،‬والتغيير‪ ،‬والتحريك‪ ،‬وسرعة الحركة‪،‬‬
‫واختالف الشاشات‪ ،‬وتقسيم الصفحات‪ ،‬وأشياء أخري كثيرة‪.‬‬
‫الحروف ‪ CSS‬اختصار للكلمات ‪Cascading Style Sheets‬‬

‫ومعناها أوراق النمط المتتالي‪ ،‬ولكن يمكن أن نبتعد قليالً عن الترجمة‬
‫الحرفية‪ ،‬ثم نقول إن معناها "صفحات األنماط االنسيابية"‪ ،‬حيث أن لغة‬
‫التصميم ‪ css‬تؤثر على صفحات الويب لتكون أكثر جمال وانسيابية‪.‬‬
‫اللغة ‪ css‬هي لغة تصميم‪ ،‬وليست لغة برمجة‪ ،‬حيث إن لغات البرمجة‬
‫لها طقوس عمل واضحة‪ ،‬مثل تعريف المتغيرات وجمل االختيار وحلقات‬
‫التكرار والمصفوفات‪ ،‬الى اخر هذه المفاهيم‪ ،‬والتي ال توجد في لغات‬
‫التصميم‪.‬‬
‫عند كتابة ملف به أكواد لغة التصميم ‪ ،css‬يأخذ االمتداد ‪ .css‬ثم‬

‫يتم النداء عليه‪ ،‬كما سوف نتعلم فيما بعد إن شاء اهلل‪.‬‬

‫تأثير ‪ CSS‬على الصفحات‬

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

‫وغيرها ليتم تأسيس السيارة‪ ،‬ولكن سيكون شكل السيارة غير مألوف‬
‫لك‪ ،‬فيقوم المصنع بإحضار دهانات السيارة وطالءها وتركيب الديكور‬
‫لها‪ ،‬فيصبح شكل السيارة أكثر من رائع‪.‬‬
‫• أو تخيل مصنع الهاتف عند تصنيع الهاتف‪ ،‬يحضر اللوحات اإللكترونية‬

‫واألسالك وغيرها لتصنيع أساس الهاتف‪ ،‬فيكون شكل الهاتف ال يعجبك‪،‬‬
‫فيأتي المصنع بالغطاء والديكورات‪ ،‬فيتم تغطية الهاتف‪ ،‬فيصبح شكل‬
‫الهاتف مألوف وجميل ورائع‪.‬‬
‫‪PAGE 24‬‬
‫تخيل وركز جيداً فيما يلي‪:‬‬
‫بناء يتم تأسيسه‪ ،‬ثم تجهيزه‪:‬‬ ‫‪-1‬‬
‫صورة بداية تأسيس البناء‪ ،‬وكأننا نعمل على ‪ HTML‬لألساس‬
‫صورة البناء بعد الديكورات‪ ،‬وكأننا نعمل على ‪ CSS‬للتحسين‬

:‫صناعة وتجهيز السيارة‬ -2
‫ لألساس‬HTML ‫ وكأننا نعمل على‬،‫صورة بداية تأسيس السيارة‬
‫ للتحسين‬CSS ‫ وكأننا نعمل على‬،‫صورة السيارة بعد الديكورات‬
PAGE 26
‫صناعة وتجهيز الهاتف‬ ‫‪-3‬‬
‫صورة بداية تأسيس الهاتف‪ ،‬وكأننا نعمل على ‪ HTML‬لألساس‬
‫صورة الهاتف بعد الديكورات‪ ،‬وكأننا نعمل على ‪ CSS‬للتحسين‬

‫بعد أن تم تخيل الفكرة من الواقع‪ ،‬اآلن تخيل في عالم الويب‪ ،‬عن طريق‬
‫عرض صفحة بدون ‪ ،css‬ثم عرضها بلغة ‪ css‬كما يلي‪:‬‬
‫الشكل التالي يعرض صفحة ويب بدون تنسيقات ‪ css‬كما يلي‪:‬‬
‫الحظ أنها صفحة تم تأسيسها باللغة ‪ HTML‬فقط‪ ،‬والحظ وجود‬

‫العناصر بدون أي ألوان أو تأثيرات أو تنسيقات‪.‬‬
‫‪PAGE 28‬‬
‫الشكل التالي يعرض نفس صفحة الويب السابقة‪ ،‬بعد أن تم تحسين العرض‬
‫وتنسيقها باللغة ‪ ،css‬وبدون أي تغيير في ‪ html‬كما يلي‪:‬‬

‫مخترع لغة ‪CSS‬‬

‫تم تطوير لغة التصميم ‪ CSS‬من منظمة ‪World Wide Web‬‬
‫وهي منظمة شبكة الويب العالمية المشهورة‪ ،‬على يد اثنين من علماء‬
‫الكمبيوتر‪ ،‬األول هو " هاكون فيوم الي" الرئيس التقني في برمجيات أوبرا‪،‬‬
‫والثاني هو "بيرت بوس" عالم الكمبيوتر ومؤسس المتصفح ‪ ،Argo‬كما‬
‫يمكن أن نذكر أن مطور هذه اللغة هو فريق ‪ ،css‬وأول ظهور لهذه اللغة‬
‫يوم ‪ 17‬ديسمبر عام ‪1996‬م‪.‬‬
‫الفريق الذي يشترك في تطوير لغة التصميم ‪ css‬هم مجموعة كبيرة من‬
‫المطورين‪ ،‬من الشركات المختلفة‪ ،‬ويمكن االطالع على أسمائهم والشركات‬
‫التابعين لها‪ ،‬من خالل الرابط التالي‪:‬‬
‫‪https://www.w3.org/Style/CSS/members‬‬
‫ودائماً يتم تطوير هذه اللغة الرائعة لتشمل تفاصيل أكثر‪ ،‬وتجعل صفحة‬
‫الويب أكثر روعة‪.‬‬
‫‪PAGE 30‬‬
‫وحدات القياس ‪Measurement units‬‬

‫عند التعامل مع اللغة ‪ css‬نحتاج الى بعض وحدات القياس‪ ،‬للتعبير عن‬
‫الذي نريده‪ ،‬مثالً اريد ان أقول لك "طول عمر"‪! ،‬أنت اآلن تنتظر اإلجابة‪،‬‬
‫وهي مثالً "‪ 60‬سنتيمتر"‪ ،‬أو "‪ 70‬سنتيمتر"‪ ،‬ومثال آخر‪ ،‬وهو لو قلت‬
‫لك‪" ،‬وزن التفاح"‪! ،‬نعم أنت أيضاً اآلن تنتظر اإلجابة‪ ،‬وهي مثالً أن‬
‫أقول "‪ 5‬كيلو جرام"‪ ،‬أو "‪ 7‬كيلو جرام"‪ ،‬إلى آخر هذه األمثلة‬
‫المعروفة لدينا جميعاً‪ ،‬ولكن اسأل نفسك سؤال‪ ،‬وفكر فيه‪ • ،‬هل لو قال‬
‫لك شخص أنه يوجد شيء اسمه كيلو جرام‪ ،‬وشرحه لك بالتفصيل‪ ،‬سوف‬
‫تفهم أكثر‪ ،‬أم تفهم أكثر لو تعاملت بهذا الكيلو جرام في البيع‬
‫والشراء!؟ •‪ ،‬بالتأكيد اإلجابة هي الفهم مع التعامل‪ ،‬وكذلك وحدات‬
‫‪ css‬بعد األمثلة والممارسة الكثيرة تفهم الوحدات أكثر بفضل اهلل‪.‬‬
‫واآلن سوف نتعرف على وحدات القياس التي نستخدمها في لغة التصميم‬
‫التفصيلية ‪ css‬ومعني كل وحدة قياس‪.‬‬
‫وقد يتساءل البعض‪ ،‬لماذا سيتم معرفة وحدات القياس اآلن!؟‪ ،‬واإلجابة‬
‫بفضل اهلل بسيطة جداً‪ ،‬وهي‪ ،‬تم ذلك لتكون معروفة لدي القارئ من‬
‫البداية‪ ،‬بحيث إذا تم استخدامها أمامك ال تكون غريبة عليك‪ ،‬فيتم فهم‬
‫الكود بسهولة‪ ،‬وال تشعر بالتعقيد‪.‬‬

‫الجدول التالي يوضح وحدات القياس ومعناها‪:‬‬
‫الوحدة المعني‬
‫الوحدات العادية (ثابتة)‬
‫‪ px‬البيكسل ‪ pixel‬وهي نقطة على شاشة الكمبيوتر‬
‫‪ cm‬السنتيمتر ‪ centimeter‬وهو مكون من ‪ 10‬ملليمتر‬
‫‪ mm‬الملليمتر ‪ millimeters‬وهو ‪ 1‬من ‪ 10‬من السنتيمتر‬
‫‪ in‬اإلنش ‪ inch‬أو البوصة وهو يساوي ‪ 2.54‬سنتيمتر‬
‫‪ pt‬نقطة ‪ ،point‬وتساوي ‪ 1/72‬بوصة‪ ،‬و‪ 1.33‬بيكسل‬
‫‪ pc‬بيكا ‪ ،pica‬وتساوي ‪ 1/6‬بوصة‪ ،‬و‪ 15.96‬بيكسل‪ ،‬و‪ 12‬نقطة‬
‫الوحدات النسبية (تتغير نسبياً)‬
‫‪ em‬نفس الحجم الحالي‪ ،‬أي ‪ 2‬الضعفين‪ ،‬و‪ 3‬ثالث اضعاف‪ ،‬وهكذا‬
‫‪ rem‬مثل ‪ em‬ولكنها تأخذ من الـ ‪ root‬أي من الحجم األصلي‬
‫‪ ex‬هو ‪ ،x-height‬أي حجم الطول‬
‫‪ ch‬يقيس على أساس عرض نقشة الحرف صفر "‪ "0‬للخط الحالي‬
‫‪ vh‬تساوي ‪ 1/100‬بيكسل من قيمة إطار عرض الطول ‪viewport‬‬
‫‪ vw‬تساوي ‪ 1/100‬بيكسل من قيمة إطار عرض العرض ‪viewport‬‬
‫‪ vmin‬هي ‪ 1/100‬بيكسل من قيمة األقل قيمة مقارنة بين الطول والعرض‬
‫‪ vmax‬هي ‪ 1/100‬بيكسل من قيمة األكبر قيمة مقارنة بين الطول والعرض‬
‫نسبة مئوية من الحجم الحالي‪ ،‬أي ‪ %200‬الضعفين‪ ،‬وهكذا‬ ‫‪%‬‬
‫وحدات أخري (ربما نحتاجها)‬
‫‪ dpi‬هي ‪ dots per inch‬أي عدد النقاط لكل بوصة ‪ 72‬او ‪96‬‬
‫‪ dpcm‬هي ‪ dots per centimeter‬أي عدد النقاط لكل سنتيمتر‬
‫‪ dppx‬هي ‪ dots per px‬أي عدد النقاط لكل وحدة بيكسل‬
‫‪ deg‬هي الدرجة ‪ ،degree‬مثل درجة الزاوية‬
‫‪PAGE 32‬‬
‫مكونات لغة ‪CSS‬‬

‫لغة التصميم ‪ css‬تتكون من شيئين‪ ،‬الخاصية ‪ ،Attribute‬والقيمة‬
‫‪ ،Value‬التي تأخذها هذه الخاصية‪ ،‬مع العلم أن تخصيص القيمة‬
‫للخاصية ال يتم باستخدام الرمز = كما هو معتاد‪ ،‬ولكن يتم باستخدام‬
‫الرمز ‪ : colon‬للتخصيص‪ ،‬مثل الكود التالي‪:‬‬
‫‪color: red‬‬
‫وكما نالحظ أنه تم تخصيص اللون األحمر ‪ red‬لخاصية اللون ‪color‬‬
‫عن طريق الرمز ‪ :‬أي وكأننا نقول ‪ ،Color=Red‬ولكن مع لغة‬
‫‪ css‬تأتي السهولة‪ ،‬لتكون ‪ color: red‬بكل بساطة‪ ،‬أما لو أردنا أن‬
‫نكتب خصائص كثيرة باللغة ‪ css‬نفصل بين كل خاصية وقيمتها بالرمز‬
‫‪ ; semicolon‬لكتابة خصائص متعددة‪ ،‬مثل الكود التالي‪:‬‬
‫;‪color:red;width:5px;height:9px‬‬
‫وكما نالحظ أنه تم تخصيص اللون األحمر ‪ red‬لخاصية اللون ‪،color‬‬
‫ثم فاصل ; ثم تخصيص القيمة ‪ 5‬بيكسل لخاصية العرض ‪ ،width‬ثم‬
‫فاصل ; ثم تخصيص القيمة ‪ 9‬بيكسل لخاصية الطول ‪ ،height‬ثم‬
‫فاصل أخير ; اختياري‪.‬‬
‫كما يمكن أن تأخذ الخاصية أكثر من قيمة‪ ،‬مثل الكود التالي‪:‬‬
‫;‪border:1px dotted red‬‬
‫وكما نالحظ خاصية اإلطار تأخذ ‪ 1‬بيكسل‪ ،‬ونمط خط منقط‪ ،‬واللون‬
‫األحمر‪ ،‬وكل هذا تم تخصيصه مرة واحدة عن طريق رمز كولون ‪ :‬واحد‪.‬‬

‫بادئة المتصفحات ‪Vendor Prefix‬‬

‫تعلمنا بفضل اهلل أن تكوين اللغة ‪ ،css‬األساسي عبارة عن خاصية‬
‫‪ ،attribute‬وقيمة لها ‪ ،value‬واآلن انتبه! ألنه يوجد أصل هام‬
‫نريد أن ننوه عليه قبل الشروع بالتفصيل في اللغة ‪ ،css‬وهو بادئة‬
‫المتصفح‪ ،‬أي أن كل متصفح له بادئه خاصة به‪ ،‬وعلى سبيل المثال‪،‬‬
‫البادئة ‪ -webkit-‬لكل من ‪Chrome, Safari, newer versions of‬‬
‫)‪،Opera, almost all iOS browsers (including Firefox for iOS‬‬

‫ومعني ذلك متصفحات جوجل كروم‪ ،‬وسفاري‪ ،‬والحديث من اوبرا‪ ،‬و‪،iOS‬‬
‫والبادئة ‪ -moz-‬للمتصفح ‪ ،Firefox‬والبادئة ‪ -o-‬ألوبرا القديم‪،‬‬
‫والبادئة ‪ -ms-‬للمتصفحات (‪.)Internet Explorer, Microsoft Edge‬‬
‫البادئة يتم وضعها قبل اسم الخاصية‪ ،‬في بعض األحيان‪ ،‬وأحياناً قبل‬
‫القيمة‪ ،‬ولكن انتبه! جيداً فال يتم استخدامها في كل الخصائص والقيم‪،‬‬
‫بل هي بعض االستخدامات فقط‪ ،‬وركز جيداً في هذا حتى ال تختلط عليك‬
‫األمور‪ ،‬بل وحتى يوجد بعض الخصائص لها بادئة‪ ،‬وتعمل بدون كتابتها‪،‬‬
‫وهناك بعض الخصائص والقيم‪ ،‬التي ال تعمل إال بالبادئة‪ ،‬وهنا في هذا‬
‫الكتاب‪ ،‬سوف يكون أكثر العمل على ‪ ،chrome‬ولن نستخدم البادئة إال‬
‫للضرورة فقط‪ ،‬فمن اآلن انتبه! أنك لو رأيت ‪ -webkit-‬أو ‪-moz-‬‬
‫أو ‪ -ms-‬أو ‪ ،-o-‬قبل أي خاصية‪ ،‬أو أي قيمة‪ ،‬فاعلم أنها بادئة‬
‫وليست من أصل االسم او القيمة‪.‬‬
‫‪PAGE 34‬‬
‫أماكن كتابة لغة ‪CSS‬‬

‫يتم كتابة أكواد لغة التصميم ‪ css‬بداخل أكواد ‪ html‬ليتم التأثير‬
‫على عناصرها بشكل مباشر‪ ،‬ويمكن كتابة لغة ‪ css‬في ثالث أماكن مختلفة‬
‫كما يلي‪:‬‬
‫بالعنصر نفسه‪ ،‬للتأثير عليه فقط ‪Inline Style‬‬ ‫‪-1‬‬

‫يتم استخدام خاصية ‪ html‬التي تسمي ‪ style‬ألي عنصر‪،‬‬
‫لتوجيه تنسيق له‪ ،‬عن طريق كتابة أكواد ‪ css‬بهذه الخاصية‪.‬‬
‫بالصفحة نفسها‪ ،‬للتأثير على عناصرها ‪Internal Style‬‬ ‫‪-2‬‬
‫يتم استخدام وسم ‪ html‬الذي يسمي ‪ ، style‬لتوجيه تنسيق‬
‫لجميع عناصر الصفحة‪ ،‬عن طريق كتابة اسم العنصر ثم أقواس‬
‫مجموعة } { ثم كتابة أكواد ‪ css‬بداخل هذه األقواس‪.‬‬
‫بملف خارجي‪ ،‬والنداء عليه في الصفحات ‪External Style‬‬ ‫‪-3‬‬
‫يتم كتابة أكواد اللغة ‪ css‬في ملف نصي خارجي بنفس طريقة‬
‫‪ ،internal style‬وبدون أي وسوم أو خصائص ‪،html‬‬
‫وهذا الملف يأخذ االمتداد ‪ ،css‬ثم يتم النداء عليه بعد ذلك داخل‬
‫أي صفحة من صفحات الموقع‪ ،‬عن طريق استخدام وسم‬
‫‪ HTML‬الذي يسمي ‪.link‬‬
‫تم ذكر وسم ‪ style‬و‪ link‬في كتاب "صخرة األساس" ‪.HTML‬‬

.‫ للعنصر‬inline style ‫ استخدام الطريقة‬:ً‫أوال‬
:‫ ثم احفظه‬body ‫كود! قم بكتابة الكود التالي داخل العنصر‬
<h1>
↓
<span style="color:#f00">C</span>
<span style="color:#090">S</span>
<span style="color:#00f">S</span>
↓
</h1>
<h1>
<span style="color:#f00">Cascading</span>
<span style="color:#090">Style</span>
<span style="color:#00f">Sheets</span>
</h1>
:‫وبعد تشغيل الصفحة تظهر كما بالشكل التالي‬
PAGE 36
‫ثانياً‪ :‬استخدام الطريقة ‪ internal style‬للصفحة‪.‬‬
‫كود! قم بكتابة الكود التالي ثم احفظه‪:‬‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Page</title‬‬
‫>‪<style‬‬
‫{‪h2‬‬
‫;‪color:blue‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h2>Welcome to CSS</h2‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫وبعد تشغيل الصفحة تظهر كما بالشكل التالي‪:‬‬

.‫ للملف‬external style ‫ استخدام الطريقة‬:ً‫ثالثا‬
‫ بنفس مكان‬،‫ جديد‬css ‫ ثم أنشئ عليه ملف‬،‫قم بفتح أي محرر أكواد‬
:‫ ثم اكتب به الكود! التالي واحفظ‬،mystyle.css ‫ملف التجربة باسم‬
h1{
color:orange;
}
h2{
color:blue;
}
h3{
color:red;
}
:‫كود! ثم قم بكتابة الكود التالي في ملف التجربة واحفظه‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Welcome to CSS</h1>
</body>
</html>
PAGE 38
‫انتبه! لو أنشأت صفحة ‪ html‬جديدة في نفس المكان‪ ،‬ثم وضعت الوسم‬

‫‪ link‬بداخل الوسم ‪ head‬بها‪ ،‬سوف تتأثر نفس هذا التأثير‪ ،‬وتلوين‬
‫الوسوم ‪ h1‬و‪ h2‬و‪ ،h3‬مع العلم أن خاصية االرتباط ‪ rel‬للوسم‬
‫‪ link‬يتم ضبطها على القيمة ‪ ،stylesheet‬وخاصية ‪href‬‬
‫للوسم ‪ link‬يتم ضبطها على مسار ملف التنسيق ‪.css‬‬

‫الهدف ‪Selector‬‬
‫المقصود بالكلمة ‪ selector‬هنا‪ ،‬هو العنصر المستهدف للتنسيق عليه‪.‬‬
‫انتبه! فإن هذا المفهوم هام جداً أكثر مما تتخيل‪ ،‬لفهم استخدامات‬
‫لغة ‪ ،css‬كما أنه سيساعدك الستخدامات كثيرة فيما بعد بفضل اهلل‪.‬‬
‫تخيل معي أنك دخلت متجر كبير للحلوى‪ ،‬ثم أحببت أن تشتري صنف معين‪،‬‬
‫ماذا تفعل؟‪ ،‬طبيعي أن تفعل التالي‪:‬‬
‫• تسأل أحد عمال المتجر عن الصنف‬
‫• الذهاب الى مكان الصنف‬
‫• تسأل بائع الصنف عن النوع‬
‫• تشتري النوع من الصنف المقصود‬
‫كذلك الـ ‪ selector‬داخل اللغة ‪ ،css‬ويمكن افتراض ما يلي‪:‬‬

‫• تحديد مكان الكتابة‬
‫• تحديد العنصر أو العناصر‬
‫• معرفة كيفية التعامل معه‬
‫• تكتب األكواد للتأثير عليه‬
‫‪PAGE 40‬‬
‫ من البداية إلى االحتراف – من اكاديمية حسونة 🎓 بفضل هللا‬CSS ‫لغة‬
‫🔔 ليصلك كل جديد‬+ ‫ ادخل واشترك وشاهد وشارك‬- ‫صخرة األساس‬ ‫أكاديمية حسونة‬
Normal Selector ‫الهدف الطبيعي‬
‫ وهو أن تكتب‬،Type Selector ‫ أو‬Normal Selector
‫ كما تم استخدامه في طريقة‬،‫ بشكل صريح‬tag ‫اسم الوسم‬
.‫ ثم التأثير عليه‬،external style ‫ وطريقة‬internal style
:‫كود! قم بكتابة الكود التالي ثم احفظه‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
h2{
color:green;
}
input{
color:red;
}
textarea{
color:blue;
}
</style>
</head>
<body>
<input value="Hello CSS 😊"><hr>
<textarea>I love CSS &hearts;</textarea>
</body>
</html>
41 ‫صفحة رقم‬
www.hassouna-academy.com ‫ادخل وسجل حساب على الموقع اآلن‬
‫ بدون أي تغيير‬،‫الحظ أنه تم النداء على عناصر محدده باالسم الطبيعي لها‬
،textarea‫ و‬input‫ و‬h2 ‫ وهذه الوسوم هي‬،‫ألسماء الوسوم‬
.Normal Selector ‫وهذا بكل بساطة هو الـ‬
PAGE 42
‫الهدف المعرف ‪Id Selector‬‬
‫هو ان يتم إنشاء عنصر ‪ html‬ثم إعطاؤه ‪ id‬مخصص له كما تريد‪،‬‬
‫ثم بعد ذلك يتم توجيه تأثير معين على هذا الـ ‪ id‬بشكل مباشر‪ ،‬كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪#my1‬‬
‫;‪color:green‬‬
‫}‬
‫{‪#txt1‬‬
‫;‪color:red‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h2 id="my1">Welcome to CSS 1</h2‬‬
‫>‪<h2 id="my2">Welcome to CSS 2</h2‬‬
‫>"‪<input id="txt1" value="Hello CSS 😊 1‬‬
‫>‪<hr‬‬
‫>"‪<input id="txt2" value="Hello CSS 😊 2‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ للتأثير على‬،id ‫ ثم وضع اسم الـ‬# ‫الحظ أنه تم استخدام الرمز‬

.id ‫العنصر الذي يحمل نفس اسم الـ‬
‫ المقصود‬id ‫الحظ أنه لم يتأثر إال العناصر التي تحمل نفس اسم الـ‬
.txt1 ‫ وآخر باسم‬my1 ‫ باسم‬id ‫ وهنا تم التأثير على‬،‫فقط‬
PAGE 44
Class Selector ‫الهدف المصنف‬
‫ ثم بعد‬،‫ داخل اسم كالس معين تسميه كما تريد‬css ‫وهو أن تكتب أكواد‬
‫ ألي‬class ‫ التي تسمي‬html ‫ذلك تخصص اسم الكالس إلى خاصية‬
.‫ فيتم التأثير عليه‬،‫عنصر‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
.class1{
color:red;
}
.class2{
color:blue;
}
</style>
</head>
<body>
<h2 class="class2">Welcome to CSS</h2>
<h2 class="class1">I love CSS 💖</h2>
<input class="class1" value="Hello CSS"><hr>
<input class="class2" value="Hi CSS">
</body>
</html>
‫الحظ أن صنع الكالس لكتابة أكواد به‪ ،‬البد أن يبدأ برمز الدوت ‪ .‬قبل‬
‫كتابة االسم‪ ،‬ثم يتم تخصيص اسمه بدون الدوت ‪ .‬لخاصية ‪class‬‬
‫لعناصر متعددة لتطبيق تنسيق واحد عليها‪.‬‬
‫انتبه! لو أن هناك عنصر وتريد أن يأخذ تنسيق أكثر من كالس‪ ،‬فيتم ذلك‬
‫عن طريق كتابة اسم الكالس ثم مسافة‪ ،‬ثم اسم كالس آخر‪ ،‬ثم مسافة‪،‬‬
‫وهكذا ألي عدد‪ ،‬ومثال على ذلك الكود التالي‪:‬‬
‫>"‪<input class="class1 class2 class3‬‬
‫‪PAGE 46‬‬
Universal Selector ‫الهدف الكلي‬
‫ * ثم كتابة‬Asterisk ‫وهو أن تحدد كل شيء عن طريق رمز النجمة‬
.‫الكود‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
*{
color:red;
}
</style>
</head>
<body>
<h2>I love CSS 💖</h2>
<p>Cascading Style Sheets</p>
<input value="Hello CSS"><hr>
<input value="Hi CSS">
</body>
</html>
‫ وبعدها تأثر كل شيء باألكواد الموجودة‬،‫الحظ كتابة الرمز * ثم الكود‬

."‫ وهذا معناه أن الرمز * هنا بمعني "الكل‬،‫بعد الرمز * بشكل مباشر‬
PAGE 48
‫الهدف بالخاصية ‪Attribute Selector‬‬
‫ومعني هذا أن يتم البحث عن خاصية وكتابة أكواد لها‪ ،‬ثم يتأثر أي‬
‫عنصر يحمل تلك الخاصية بأي قيمة‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{]‪[dir‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫لاًبلغة>"‪<h2 dir="rtl‬‬
‫>‪ CSS</h2‬أه ً‬
‫>‪<h2 dir="ltr">I love CSS 💖</h2‬‬
‫>‪"><hr‬الكودًجميل"=‪<input dir="rtl" value‬‬
‫>"‪<input value="Hi CSS‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أنه تم كتابة اسم الخاصية داخل أقواس مربعة ] [ ثم كتابة‬

‫أكواد بعدها‪.‬‬
‫الحظ أنه تم استخدام الخاصية ‪ dir‬للتجربة‪.‬‬
‫الحظ أن جميع العناصر التي تحمل الخاصية ‪ dir‬بأي قيمة تم التأثير‬

‫عليها‪ ،‬والتي ال تحمل الخاصية ‪ dir‬لم يتم التأثير عليها‪.‬‬
‫‪PAGE 50‬‬
‫انتبه! فإنه يمكن تحديد خاصية ذات قيمة محدده كما تريد‪ ،‬وذلك ما سوف‬
‫نتدرب عليه فيما يلي‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{]‪[dir=rtl‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫ً‬
‫>‪ CSS</h2‬أهال بلغة>"‪<h2 dir="rtl‬‬
‫>‪<h2 dir="ltr">I love CSS 💖</h2‬‬
‫>‪</h3‬الويب من أقوي المجاالت>"‪<h3 dir="rtl‬‬
‫>‪"><hr‬الكود جميل"=‪<input dir="rtl" value‬‬
‫>"‪<input value="Hi CSS‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أن ما تأثر فقط هي العناصر التي تم ضبط خاصية ‪ dir‬لها على‬

‫القيمة ‪.rtl‬‬
‫الحظ أنك تستطيع استهداف أنواع محدده للعناصر مثل الوسم ‪input‬‬
‫الذي يحمل النوع ‪ text‬او النوع ‪ ،button‬وهكذا لباقي الوسوم‪.‬‬
‫انتبه! فإنه يوجد اختيارات أخري في ‪attribute selector‬‬

‫وسوف نوضحها في المثال التالي‪:‬‬
‫‪PAGE 52‬‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
a[href="http://www.google.com"]{
color:red;
}
a[href*="youtube"]{
color:green;
}
a[href$=".org"]{
color:orange;
}
a[href^="mailto"]{
color:pink;
}
</style>
</head>
<body>
<h2>
<a href="http://www.google.com">Google</a><hr>
<a href="http://www.youtube.com">Youtube</a><hr>
<a href="http://developer.mozilla.org">Dev. Moz</a><hr>
<a href="mailto:testmail@domain.com">Send Mail</a>
</h2>
</body>
</html>
‫الحظ التأثيرات في أكواد ‪ css‬في حالة الرمز = فقط المقصود التأثير‬

‫على رابط جوجل بالكامل‪ ،‬أما عند وضع * قبل الرمز = فهذا يعني أنه‬
‫لو كانت الخاصية بها الكلمة ‪ youtube‬في اس مكان يؤثر عليها‪ ،‬أما‬
‫عند وضع ‪ $‬قبل الرمز = فهذا يعني أن يكون آخر الخاصية ‪ .org‬في‬
‫النهاية‪ ،‬أما عند وضع ^ قبل الرمز = فهذا يعني أن تبدأ الخاصية بالكلمة‬
‫‪ mailto‬في أولها‪ ،‬كما يوجد أيضاً =~ ومعناها أن يقارن القيمة‬
‫بكلمات الخاصية ألن بين كل كلمة وأخري مسافة‪ ،‬كما يوجد أيضاً =|‬
‫ومعناها أن يقارن بالقيم التي بينها رمز ‪ -‬وغالباً تستخدم في اللغات‪.‬‬
‫‪PAGE 54‬‬
‫انتبه! فإنه يمكن اشتراك عناصر متعددة في نفس تنسيق اللغة ‪،css‬‬
‫وكأني أقول عنصر "و" عنصر "و" عنصر "و" عنصر‪ ،‬أو كأني أقول‬
‫عنصر "و" كالس "و" عنصر "و" معرف ‪" id‬و" كالس‪ ...‬وهكذا‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{]‪input , .my1 , .my2 , #myh , p[dir=rtl‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h2 class="my1">I Love CSS</h2‬‬

‫>‪<h2 class="my2">CSS is Beautiful</h2‬‬
‫>"‪<input value="Text Box 1‬‬
‫>‪<h2 id="myh">I love CSS World &hearts;</h2‬‬
‫>‪</p‬أهالً بكم في عالم الويب الجميل>"‪<p dir="rtl‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أنه تم عمل تنسيق واحد‪ ،‬واشترك فيه عناصر متعددة‪ ،‬ومختلفة‪.‬‬
‫الحظ اشتراك النوع ‪ normal‬والنوع ‪ class‬والنوع ‪ id‬والنوع‬

‫‪ ،attribute‬في تنسيق واحد‪.‬‬
‫الحظ أن هذه الطريقة توفر الوقت بشكل رائع‪ ،‬ألنها تضم تنسيق يتم كتابته‬
‫مرة واحدة‪ ،‬ثم يتم تنفيذه على اختيارات مختلفة‪.‬‬
‫‪PAGE 56‬‬
‫انتبه! المسافات الزائدة بين كل كوما وأخري تنسيق فقط‪ ،‬ويمكنك ازالتها‬
‫ويمكن أيضاً أن نقصد وسم بشرط أن يحمل بداخلة كالس معين‪ ،‬كما يلي‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪input.my1 , h2.my1‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h2 class="my1">I Love CSS</h2‬‬

‫>‪<h2 class="my2">CSS is Beautiful</h2‬‬
‫>‪<h2>I love CSS World &hearts;</h2‬‬
‫>"‪<input class="my1" value="Text Box 1‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ في أكواد ‪ css‬أنه تم كتابة ‪ input‬ثم دوت ‪ .‬ثم الكالس‬

‫‪ ،my1‬وهذا يعني أن العنصر المقصود هو أي ‪ input‬يحمل الكالس‬
‫‪ ،my1‬ثم بعد ذلك كوما أي "و" ثم تم كتابة ‪ h2‬ثم دوت ‪ .‬ثم الكالس‬
‫‪ ،my1‬وهذا يعني أن العنصر المقصود هو أي ‪ h2‬يحمل الكالس ‪.my1‬‬
‫الحظ أنه لم يتأثر إال الوسوم ‪ h2‬والوسوم ‪ input‬فقط التي تحمل‬

‫الكالس ‪.my1‬‬
‫‪PAGE 58‬‬
‫األهداف المتداخلة ‪Combinators‬‬
‫وهي أن تقصد العناصر المتداخلة مع بعضها البعض‪ ،‬مثل ما يلي‪:‬‬
‫عنصر بداخل عنصر‪ ،‬بداخل عنصر‪ ...‬وهكذا‬ ‫•‬

‫عنصر داخل عنصر بشكل غير مباشر‬ ‫•‬
‫عنصر بداخل عنصر بشكل مباشر‬ ‫•‬
‫عنصر بعد عنصر معين بشكل مباشر‬ ‫•‬
‫كل العناصر بعد عنصر معين بشكل مباشر‬ ‫•‬
‫عند فعل شيء معين على عنصر‬ ‫•‬
‫الى آخر هذه االختيارات التي نحتاجها‬
‫انتبه! فإنه ال مانع من أن تتنوع الـ ‪ Selectors‬مع بعضها‪ ،‬بمعني‬

‫أن تستخدم الـ ‪ id‬بداخل ‪ class‬او ‪ ،normal‬وهكذا‪.‬‬

‫عنصر داخل عنصر بأي طريقة‬
‫ ويتم هذا‬،Descendant combinator ‫أو ما يسمي بـ‬
:‫باستخدام مسافة كما يلي‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
div input{
color:red;
}
</style>
</head>
<body>
<div>
<input value="Text Box 1">
</div>
<div>
</div>
</body>
</html>
PAGE 60
‫الحظ أنه يوجد في الصفحة ‪ 5‬وسوم ‪ input‬األول والثاني داخل الوسم‬

‫‪ ،div‬والثالث والرابع على الصفحة‪ ،‬والخامس في وسم ‪ div‬آخر‪.‬‬
‫الحظ في أكواد ‪ css‬أنه تم اختيار الوسم ‪ div‬ثم مسافة ‪space‬‬

‫ثم الوسم ‪ ،input‬ومعني ذلك أن المقصود كل ‪ input‬موجود في‬
‫‪.div‬‬
‫الحظ جيداً أن التأثير على الوسوم ‪ input‬الموجودة بداخل أي وسم‬

‫‪ div‬فقط‪.‬‬

<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
div div input{
color:red;
}
</style>
</head>
<body>
<div>
<div>
</div>
</div>
</body>
</html>
PAGE 62
‫الحظ في أكواد ‪ css‬أنه تم كتابة ‪ ،div‬ثم مسافة‪ ،‬ثم ‪ ،div‬ثم‬

‫‪ ،input‬وهذا يعني أن العنصر المقصود التأثير عليه هو أي وسم‬
‫‪ input‬ولكن بشرطين‪ ،‬الشرط األول‪ ،‬أن يكون بداخل وسم ‪،div‬‬
‫والشرط الثاني‪ ،‬أن يكون الوسم ‪ div‬الذي يحتويه بداخل وسم ‪ div‬آخر‪.‬‬
‫الحظ أن الوسم ‪ input‬الذي تم تخصيص خاصية ‪ value‬له على‬

‫القيمة ‪ Text Box 1‬هو الذي تأثر فقط‪ ،‬ألنه هو فقط الذي تم‬
‫وضعه في ‪ div‬ثم تم وضع هذه الـ ‪ div‬في ‪ div‬أخري‪.‬‬
‫انتبه! فإنه بنفس الطريقة تستطيع أن تصل إلى عناصر مختلفة‪ ،‬داخل‬
‫عناصر أخري بسهوله‪.‬‬

<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
div .my1{
color:red;
}
</style>
</head>
<body>
<div>
<h1 class="my1">CSS is Beautiful</h1>
<h2 class="my1">Welcome to CSS</h2>
</div>
<h2 class="my1">I Love CSS</h2>

<h2 class="my1">CSS is Beautiful</h2>
</body>
</html>
PAGE 64
‫الحظ في أكواد ‪ css‬أنه تم كتابة ‪ ،div‬ثم مسافة‪ ،‬ثم ‪ .my1‬ومعني‬

‫هذا أن العنصر المقصود التأثير عليه‪ ،‬هو أي عنصر يحمل الكالس ‪my1‬‬
‫بشرط أن يكون بداخل ‪.div‬‬
‫الحظ أنه يوجد وسمين ‪ h2‬يحمالن الكالس ‪ my1‬ولم يتأثروا ألنهم‬

‫غير موجودين بوسم ‪.div‬‬
‫انتبه! أنه تم الخلط بين النوع ‪ normal selector‬والنوع‬

‫‪ class selector‬في نفس العمل‪ ،‬مع العلم أنه بنفس هذا الفهم‬
‫تستطيع الخلط بين باقي الـ ‪ selectors‬المختلفة‪.‬‬

‫ المختلفة ال يفرق‬selectors ‫انتبه! فإن استخدام المسافة مع الـ‬
،‫ أو غير مباشر‬،‫ داخل عنصر بشكل مباشر‬،‫ما إذا كان العنصر المقصود‬
.‫وسوف يتضح ذلك من خالل المثال التالي‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
div label{
color:red;
}
</style>
</head>
<body>
<div>
<label>Label 1</label>
<span><label>Label 2</label></span>
</div>
</body>
</html>
PAGE 66
‫الحظ أنه تم انشاء ‪ div‬وبداخلها ‪ label‬و‪ span‬يحمل ‪label‬‬

‫و‪ label‬آخر‪.‬‬
‫الحظ أن ‪ label 1‬و‪ label 3‬داخل الـ ‪ div‬بشكل مباشر‪ ،‬أما الـ‬
‫‪ label 2‬بداخل ‪ span‬أي ليس مباشر‪ ،‬ومع ذلك تم التأثير على‬
‫الجميع دون أي اختالف‪.‬‬

‫عنصر داخل عنصر بشكل مباشر‬
‫ ويتم هذا باستخدام رمز‬Child combinator ‫أو ما يعرف بـ‬
:‫القوس > كما يلي‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
div > label{
color:red;
}
</style>
</head>
<body>
<div>
<span><label>Label 2</label></span>
</div>
</body>
</html>
PAGE 68
‫الحظ أنه تم انشاء ‪ div‬وبداخلها ‪ label‬وبعده ‪ span‬يحمل‬

‫‪ label‬وبعد الـ ‪ span‬يوجد ‪ label‬آخر‪.‬‬
‫الحظ أن ‪ label 1‬و‪ label 3‬داخل الـ ‪ div‬بشكل مباشر‪ ،‬أما الـ‬
‫‪ label 2‬بداخل ‪ span‬أي ليس مباشر‪.‬‬
‫الحظ أنه تم التأثير على وسوم ‪ label‬الموجودة داخل الـ ‪ div‬بشكل‬

‫مباشر فقط‪.‬‬

‫العنصر التالي‬
‫ ويتم‬Adjacent sibling combinator ‫أو ما يعرف بـ‬
:‫ كما يلي‬+ ‫هذا باستخدام الرمز‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
div + input{
color:red;
}
</style>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
</body>
</html>
PAGE 70
‫الحظ في أكواد ‪ css‬أنه تم كتابة ‪ div‬ثم ‪ +‬ثم ‪ ،input‬ومعني‬

‫ذلك أن العنصر المقصود هو أي وسم ‪ input‬يلي الوسم ‪ ،div‬مع‬
‫العلم أنه لو كان هناك أكثر من ‪ input‬يلي الـ ‪ div‬فسوف يتأثر‬
‫واحد فقط‪.‬‬
‫الحظ أن العناصر التي تأثرت هنا هم عنصرين‪ ،‬األول ‪Text Box 2‬‬
‫ألنه يلي ‪ ،Div 1‬والثاني ‪ Text Box 5‬ألنه يلي ‪.Div 2‬‬

‫كل العناصر التالية أو أشقاء العنصر من بعده‬
‫ ويتم هذا‬General sibling combinator ‫أو ما يعرف بـ‬
:‫باستخدام الرمز ~ كما يلي‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
div ~ input{
color:red;
}
</style>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
</body>
</html>
PAGE 72
‫الحظ في أكواد ‪ css‬أنه تم كتابة ‪ div‬ثم ~ ثم ‪ ،input‬ومعني ذلك‬

‫أن العنصر المقصود هو جميع وسوم ‪ input‬التي تلي الوسم ‪.div‬‬
‫الحظ أن العناصر التي تأثرت هنا هم خمسة عناصر‪ ،‬وهم العناصر‬

‫‪ Text Box 2‬و‪ Text Box 3‬و‪ Text Box 4‬ألنهم بعد‬
‫‪ ،Div 1‬والعناصر ‪ Text Box 5‬و‪ Text Box 6‬ألنهم بعد‬
‫‪.Div 2‬‬
‫ويوجد أيضاً ‪ column combinator‬باستخدام || الختيار خلية‬

‫في جدول تنتمي إلى عمود‪ ،‬ولكن انتبه! فهو نادر االستخدام‪ ،‬وقل من يتحدث‬
‫عنه‪.‬‬

Active Code ‫الكود الذي يغلب‬

.‫ من منهم يغلب؟ وهذا هو الموضوع‬،‫عند كتابة أكواد تقصد نفس العنصر‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
h1{
color:red;
}
h1{
color:blue;
}
</style>
</head>
<body>
</body>
</html>
PAGE 74
‫الحظ أنه تم تنسيق للوسم ‪ h1‬مرتين‪ ،‬أوالً مرة باللون األحمر‪ ،‬وثانياً‬
‫مرة باللون األزرق‪ ،‬والكود الذي غلب هنا هو الكود األخير‪.‬‬
‫واآلن‪ ،‬مقارنة أخري بين ‪ internal‬و‪:inline‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪h1{ color:red‬‬
‫} ;‪h1{ color:blue‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1 style="color:orange">Welcome to CSS</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ له بشكل‬style ‫ وتم توجيه‬،h1 ‫الحظ أنه تم كتابة تنسيقين للوسم‬

‫ ولكن هناك‬،‫ وهي التي تغلب على الكل‬inline style ‫ بطريقة‬،‫مباشر‬
‫ كما سنجرب‬،!important ‫ تغلب أكثر وهي‬،‫كلمة وكأن بها سحر‬
:‫اآلن بفضل اهلل‬
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
h1{ color:red !important; }
h1{ color:blue; }
</style>
</head>
<body>
<h1 style="color:orange">Welcome to CSS</h1>
</body>
</html>
PAGE 76
‫الحظ أنه عند كتابة ‪ !important‬بعد قيمة الخاصية غلبت على‬

‫الكل‪ ،‬حتى ولو كان آخر تنسيق‪ ،‬بل وحتى لو كان ‪ inline style‬أيضاً‬
‫تغلب عليه‪ ،‬كما هو واضح في الصورة‪.‬‬
‫انتبه! ألن هذا المفهوم يجب أن تركز معه جيداً عند كتابة األكواد في‬
‫الصفحة ‪ internal style‬أو استدعاء ملفات ‪ css‬خارجية‬
‫‪ ،external style‬وذلك حتى ال يأتي وقت وأنت تعمل تختلط عليك‬
‫األكواد وتتساءل! لماذا ال يعمل؟ أو ما الذي حدث؟ أو هل الكود خطأ؟‪،‬‬
‫إلى آخر هذه األسئلة التي تحير المصممين‪ ،‬إذاً خذها قاعدة‪ ،‬الكود األخير‬
‫يغلب‪ ،‬وكود الـ ‪ inline‬يغلب عليه‪ ،‬وكتابة ‪ !important‬تغلب‬
‫على الكل‪.‬‬

Size or Dimensions ‫الحجم أو األبعاد‬

‫ أثناء العمل على صفحة‬،ً‫ضبط الطول والعرض للعنصر شيء مهم جدا‬
‫ كما‬،‫ للعناصر‬width ‫ ويمكن تحديد العرض عن طريق الخاصية‬،‫الويب‬
.‫ للعناصر‬height ‫يمكن أيضاً تحديد الطول عن طريق الخاصية‬

<!DOCTYPE html>
<html>
<head>
<style>
input{
width:300px;
height:100px;
}
</style>
</head>
<body>
<input type="text" value="Text Box">
<input type="submit">
</body>
</html>
PAGE 78
‫الحظ وجود العناصر على صفحة الويب‪ ،‬مع التحكم في الطول والعرض‬
‫لها‪ ،‬حيث أصبح العرض ‪ 300px‬والطول ‪ 100px‬لهم‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪body{ height:200px‬‬
‫{‪input , button‬‬
‫;‪width:90%‬‬
‫;‪height:10%‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<input type="text" value="Text Box"><hr‬‬
‫>‪<input type="submit"><hr‬‬
‫>‪<button>Button</button‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ ضبط طول عنصر الصفحة األساسي ‪ body‬على ‪.200px‬‬
‫الحظ ضبط الوسمين ‪ input‬و‪ button‬على عرض ‪ %90‬من‬

‫عرض المكان المتواجدان فيه‪ ،‬وضبط الطول على ‪ %10‬من طول المكان‬
‫المتواجدان فيه‪.‬‬
‫الحظ أن طول العناصر ‪ %10‬وبما أن طول الوسم ‪ body‬تم ضبطه‬

‫على القيمة ‪ 200px‬إذاً فإن طول العناصر هو ‪ 20px‬ألنها هي‬
‫ناتج الـ ‪ %10‬من الـ ‪ 200px‬للوسم ‪ ،body‬ولو غيرت القيمة‬
‫الى ‪ 20px‬بدالً من ‪ %10‬ثم حدثت الصفحة‪ ،‬ستالحظ أنه ال فرق‪.‬‬
‫‪PAGE 80‬‬
‫اآلن سوف نقوم بتصغير عرض نافذة المتصفح ليكون مثل الشكل التالي‪:‬‬
‫اآلن سوف نقوم بتكبير عرض نافذة المتصفح ليكون مثل الشكل التالي‪:‬‬
‫اآلن سوف نقوم بتغيير عرض نافذة المتصفح ليكون مثل الشكل التالي‪:‬‬
‫الحظ أثر ثبات النسبة التي أعطيناها الى خاصية ‪ width‬للعناصر‪،‬‬

‫سواء تم التصغير أو التكبير لنافذة المتصفح‪ ،‬حيث تكبر معها‪ ،‬وتصغر‬
‫معها أيضاً‪.‬‬

!‫ ولكن انتبه‬،‫ويمكن التحكم أيضاً في أقصي طول وعرض وأقل طول وعرض‬
.‫ ألن أثرها يظهر أكثر أثناء العرض‬،‫جيداً لتفهمها‬

<!DOCTYPE html>
<html>
<head>
<style>
body{ height:200px; }
input , button{
width:90%;
height:20px;
max-width:350px;
min-width:200px;
}
</style>
</head>
<body>
<input type="text" value="Text Box"><hr>
<input type="submit"><hr>
<button>Button</button>
</body>
</html>
PAGE 82
‫سوف نكبر عرض نافذة المتصفح أكثر من ‪ 350px‬وأنظر التالي‪:‬‬
‫الحظ أن النسبة تعطلت أن تكبر العناصر بعد ‪ 350px‬ألنه تم ضبط‬

‫خاصية ‪ max-width‬على ‪ ،350px‬أي أقصي قيمة‪.‬‬
‫واآلن سوف نصغر عرض نافذة المتصفح أقل من ‪ 200px‬وأنظر التالي‪:‬‬
‫العناصر لم تستجيب للتصغير أقل من ‪ 200px‬بسبب ‪.min-width‬‬

‫وبنفس الطريقة التي تم استخدامها وتجربتها بالنسب المئوية والتكبير‬
‫ أيضاً يتم‬،min-width‫ و‬max-width ‫والتصغير مع الخواص‬
‫ ولكن‬،min-height‫ و‬max-height ‫استخدامها مع الخواص‬
:‫ وسنجرب بكود! فقم بكتابة الكود التالي ثم احفظه‬،‫للتجارب على الطول‬
<!DOCTYPE html>
<html>
<head>
<style>
textarea{
width:250px;
min-height:50px;
max-height:100px;
}
</style>
</head>
<body>
<textarea>
Text Text Text
Text Text Text
Text Text Text
</textarea>
</body>
</html>
PAGE 84
‫الحظ استخدام الرمز ;‪ &#13‬للنزول سطر داخل ‪.textarea‬‬

‫والحظ بدأ الطول من ‪ 50px‬بسبب الخاصية ‪.min-height‬‬
‫واآلن انتبه! حاول تكبير الـ ‪ textarea‬من صفحة الويب نفسها أثناء‬
‫العرض‪ ،‬وسيقف عند طول معين بسبب الخاصية ‪ max-height‬كما‬
‫يوضح الشكل التالي‪:‬‬
‫ولو تم زيادة قيمة الخاصية ‪ max-height‬للعنصر ‪textarea‬‬

‫سوف تستطيع تكبيرة أكثر‪ ،‬معتمداً على قيمة ‪.max-height‬‬

‫الهوامش ‪Margins‬‬
‫ضبط الهوامش في الويب‪ ،‬من المواضيع الهامة جداً‪ ،‬والهوامش هي‬
‫الفراغات الخارجية لكل عنصر‪ ،‬أي الفراغات التي بين العناصر‪ ،‬حيث يوجد‬
‫لكل عنصر‪ ،‬هامش علوي‪ ،‬ويميني‪ ،‬وسفلي‪ ،‬ويساري‪ ،‬والخواص الخاصة‬
‫بهم هي‪ margin-top ،‬و‪ margin-right‬و‪margin-bottom‬‬
‫و‪ ،margin-left‬ويمكن استخدام خاصية ‪ margin‬وحدها لتشمل‬
‫االتجاهات األربعة بالكامل‪ ،‬ويمكن اعطائهم قيمة بيكسل أو نسبة مئوية‪.‬‬

‫>‪<html‬‬
‫>‪<head></head‬‬
‫>‪<body‬‬
‫>";‪<button style="margin-left:150px‬‬
‫‪Button‬‬
‫>‪</button‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪PAGE 86‬‬
‫الحظ ترك هامش للوسم ‪ button‬من اليسار ‪ 150px‬بسبب‬
‫الخاصية ‪.margin-left‬‬

‫>‪<html‬‬
‫>‪<body‬‬
‫>";‪<button style="margin-top:150px‬‬
‫‪Button‬‬
‫>‪</button‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ بسبب‬150px ‫ من األعلى‬button ‫الحظ ترك هامش للوسم‬
.margin-top ‫الخاصية‬

<!DOCTYPE html>
<html>
<head></head>
<body>
<button style="margin-left:-25px;">
Button
</button>
</body>
</html>
،‫ يخرج العنصر من مسارة الطبيعي‬،‫الحظ مع إعطاء قيمة بيكسل بالسالب‬

.‫الى خارج الصفحة‬
margin-bottom‫ و‬margin-right ‫انتبه! لو قمت بتجربة‬

.‫ ألنه يترك فراغ من الناحية العكسية للصفحة‬،‫لن تالحظ التأثير‬
:‫ كما يلي‬،‫واآلن سوف نجرب كود بدون الهوامش‬
PAGE 88
<!DOCTYPE html>
<html>
<head></head>
<body>
<button>Button 1</button>
<button>Button 3</button><br>
</body>
</html>
:‫ كما يلي‬،‫انتبه! فاآلن سوف نجرب هوامش كلية لكل عنصر‬
<!DOCTYPE html>
<html>
<head>
<style>
button{ margin:10px; }
</style>
</head>
<body>
<button>Button 3</button><br>
</body>
</html>
‫ من األربع اتجاهات لجميع وسوم‬10px ‫الحظ أثر وجود هوامش‬

.button
PAGE 90
‫انتبه! فإنه عن طريق الخاصية ‪ margin‬يمكن جعل العناصر التي تنزل‬
‫سطر في المنتصف‪ ،‬مثل الوسم ‪ div‬والوسم ‪ ،h1‬وذلك عن طريق إعطاء‬
‫العنصر عرض ‪ width‬ثم ضبط خاصية ‪ margin‬على القيمة‬
‫‪ ،auto‬فيتم توزيع الهامش المتبقي بالتساوي على اليمين واليسار‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div, h1‬‬
‫;‪background-color:yellow‬‬
‫;‪width:300px‬‬
‫;‪margin:auto‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>This is Heading 1</h1‬‬
‫>‪<hr‬‬
‫>‪<div>This is div</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫انتبه! فإذا كان العرض كامل‪ ،‬فلن تالحظ هذا الفارق‪.‬‬
‫انتبه! فسوف نفترض‪ ،‬واآلن تخيل معي‪ ،‬ان عرض الصفحة هو ‪650px‬‬
‫وعرض الوسم ‪ h1‬هو ‪ 300px‬كما تم ضبطه‪ ،‬فإن المتبقي من الـ‬
‫‪ 650‬في الصفحة هو ‪ ،350px‬واآلن سوف نقسم المتبقي على ‪ 2‬ليكون‬
‫‪ ،175=2÷350‬فيتم وضع هامش ‪ 175px‬على اليمين‪ ،‬ويتم‬
‫وضع هامش ‪ 175px‬على اليسار‪ ،‬وهكذا‪.‬‬
‫‪PAGE 92‬‬
‫الحشو ‪Padding‬‬
‫ضبط الحشو في الويب‪ ،‬من المواضيع الهامة جداً‪ ،‬والحشو هو حشو‬
‫داخلي لكل عنصر‪ ،‬أي فراغات من داخل العناصر‪ ،‬حيث يوجد لكل عنصر‪،‬‬
‫حشو علوي‪ ،‬ويميني‪ ،‬وسفلي‪ ،‬ويساري‪ ،‬والخواص الخاصة بهم هي‪،‬‬
‫‪ padding-top‬و‪ padding-right‬و‪padding-bottom‬‬
‫و‪ ،padding-left‬ويمكن استخدام خاصية ‪ padding‬وحدها لتشمل‬
‫اتجاهات الحشو األربعة بالكامل‪ ،‬ويمكن اعطائهم قيمة بيكسل أو نسبة‬
‫مئوية‪ ،‬حسب الرغبة‪.‬‬

‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<button>Button 1</button‬‬
‫>‪<button style="padding:20px;">Button 2</button‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫وبعد تشغيل الصفحة يظهر أثر الحشو كما بالشكل التالي‪:‬‬

‫ حيث‬،ً‫ البد أن تركز في المثال التالي جيدا‬،‫ولتجربة جميع اتجاهات الحشو‬
‫ وكتابة‬،‫ ثم انشاء ازرار بعده تختلف في الحشو‬،‫يتم فيه انشاء زر بدون حسو‬
:‫ كما يلي‬،‫الحشو المستخدم بجوار األزرار للتوضيح‬

<!DOCTYPE html>
<html>
<head></head>
<body>
<button>Button 1</button> Normal <hr>
<button style="padding-top:30px;">
Button 2
</button> Top <hr>
<button style="padding-right:30px;">
Button 3
</button> Right <hr>
<button style="padding-bottom:30px;">
Button 4
</button> Bottom <hr>
<button style="padding-left:30px;">
Button 5
</button> Left <hr>
</body>
</html>
PAGE 94
‫الحظ أن ‪ Button 1‬طبيعي وال يوجد عليه أي أثر للحشو‪ ،‬ثم بعد ذلك‬
‫الحظ تأثير الحشو العلوي على ‪ ،Button 2‬وتأثير الحشو من اليمين‬
‫على ‪ ،Button 3‬وتأثير الحشو السفلى على ‪ ،Button 4‬وتأثير‬
‫الحشو اليساري على ‪.Button 5‬‬

Direction ‫االتجاه‬
direction ‫اتجاه العناصر‬
‫ أو‬،‫ فإما أن تكون من اليسار الى اليمين‬،‫يمكنك تحديد اتجاهات العناصر‬
:‫ وسوف نوضح بفضل اهلل فيما يلي‬،‫من اليمين الى اليسار‬
<!DOCTYPE html>
<html>
<head>
<title>
My Page
</title>
</head>
<body>
<h1 style="direction:ltr">
Welcome to CSS
</h1>
<h1 style="direction:rtl">
‫ اهال بكم ف‬CSS
</h1>
</body>
</html>
PAGE 96
‫الحظ أن الوسم ‪ h1‬األول تم ضبط االتجاه له على القيمة ‪ ltr‬أي من‬

‫اليسار الى اليمين‪ ،‬وهي القيمة االفتراضية‪.‬‬
‫الحظ أن الوسم ‪ h1‬الثاني تم ضبط االتجاه له على القيمة ‪ rtl‬أي من‬

‫اليمين الى اليسار‪ ،‬فأصبح االتجاه مالئم الى اللغة العربية‪.‬‬

‫ضبط اليونيكود ‪unicode-bidi‬‬
‫تعمل الخاصية ‪ ،unicode-bidi‬جنباً إلى جنب مع خاصية‬
‫‪ ، direction‬لتحديد كيفية التعامل مع النص ذا اتجاهين في المستند‪،‬‬
‫فعلى سبيل المثال‪ ،‬إذا كانت هناك فقرة من المحتوى تحتوي على نص من‬
‫اليسار إلى اليمين‪ ،‬وأيضاً وفي نفس الوقت بها نص من اليمين إلى اليسار‪،‬‬
‫فإنه يجب استخدام خوارزمية في الـ ‪ unicode‬معقدة لتحديد كيفية‬
‫عرض النص‪ ،‬ولكن تتجاوز الخاصية ‪ unicode-bidi‬هذه الخوارزمية‬
‫وتسمح للمطور بالتحكم أكثر في تضمين النص‪ ،‬واالفتراضي لهذه الخاصية‬
‫هي القيمة ‪ ،normal‬ويمكن استخدام القيمة ‪ ،embed‬إذا كان‬
‫العنصر من نوع ‪ ،inline‬وتفتح هذه القيمة مستوى إضافي للتضمين‬
‫فيما يتعلق بالخوارزمية ثنائية االتجاه‪ ،‬ويتم إعطاء اتجاه مستوى التضمين‬
‫هذا بواسطة خاصية االتجاه ‪ ،direction‬ويمكن أيضاً استخدام‬
‫القيمة ‪ ،bidi-override‬للعناصر الـ ‪ ،inline‬ويؤدي هذا إلى‬
‫تخطي لما هو موجود‪ ،‬بالنسبة لعناصر حاوية الحفظ‪ ،‬ويؤدي أيضاً إلى‬
‫التأثير على عناصر بداخل عناصر لمستوى الـ ‪ inline‬وليس الـ‬
‫‪ ،block‬وهذا يعني أنه داخل العنصر‪ ،‬وتكون إعادة الترتيب متسلسلة‬
‫بدقة وفقاً لخاصية االتجاه‪ ،‬ويتم تجاهل الجزء الضمني من الخوارزمية‬
‫ثنائية االتجاه‪ ،‬ويمكن استخدام القيمة ‪ ،isolate‬وتشير هذه القيمة إلى‬
‫أنه يجب حساب اتجاهية عنصر العنصر دون مراعاة محتوى هذا العنصر‪،‬‬
‫وبالتالي يتم عزل العنصر عن أشقائه الذين معه في نفس المستوي‪ ،‬وعند‬
‫تطبيق خوارزمية الدقة ثنائية االتجاه‪ ،‬فإن عنصر الحاوية الخاص به‬
‫‪PAGE 98‬‬
‫يعاملها كحرف واحد أو عدة أحرف استبدال كائن الـ‪ ،U+FFFC‬مثل‬
‫صورة‪ ،‬كما أنه يمكن استخدام القيمة ‪ ،isolate-override‬وتطبق‬
‫هذه القيمة سلوك العزل للكلمة الرئيسية المعزولة عن المحتوى المحيط‬
‫بها‪ ،‬وسلوك تجاوز الكلمة الرئيسية التي تتخطى الـ ‪ bidi‬إلى المحتوى‬
‫الداخلي‪ ،‬ويمكن استخدام القيمة ‪ ،plaintext‬التي تجعل عناصر‬
‫االتجاهية محسوبة دون اعتبار حالتها األصلية ثنائية االتجاه أو قيمة‬
‫خاصية االتجاه ‪ ،direction‬ويتم حساب االتجاهية باستخدام قواعد‬
‫‪ P2‬و‪ P3‬لخوارزمية الـ ‪ unicode‬ثنائية االتجاه‪ ،‬وتسمح هذه‬
‫القيمة بعرض البيانات المنسقة بالفعل باستخدام أداة تتبع خوارزمية‬
‫الـ‪ unicode‬ثنائية االتجاه‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪p‬‬
‫;‪direction:rtl; unicode-bidi: bidi-override‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫ا‬
‫>‪ for you</p‬اهل ‪ and‬مرص ‪ in‬بكم ‪<p>Hello‬‬
‫>‪</body‬‬
‫>‪</html‬‬

،‫واآلن حاول أن تقرأ الحروف اإلنجليزية من اليمين مثل الحروف العربية‬

‫مع العلم أنه إذا تم تغيير االتجاه سوف يثبت الحروف اإلنجليزية ويقلب‬
:‫ وسنجرب بالكود! التالي‬،‫العربية‬
<!DOCTYPE html>
<html>
<head>
<style>
p{
direction:ltr; unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>Welcome ‫ باك‬again</p>
</body>
</html>
PAGE 100
‫واآلن جرب قراءة الحروف العربية من اليسار مثل اإلنجليزي‪.‬‬

Borders ‫اإلطارات‬
‫ أو ما يعرف بالبرواز لتزيين حواف‬،‫اإلطار هو الخط الذي يحلق بعنصر معين‬
‫ وحافة‬،‫ وحافة اليمين‬،‫ حافة عليا‬،‫ واإلطار له أربع حواف‬،‫العناصر‬
.‫ وحافة اليسار‬،‫سفلي‬

<!DOCTYPE html>
<html>
<head>
<style>
h2{
margin:10px;
padding:10px;
border-width:3px;
border-style:solid;
border-color:blue;
}
</style>
</head>
<body>
<h2>Welcome to Borders</h2>
</body>
</html>
PAGE 102
‫لعمل إطار تم ضبط ما يلي‪:‬‬

‫تم ضبط سمك اإلطار ‪ border-width‬على ‪.3px‬‬
‫تم ضبط نوع إطار ‪ border-style‬على ‪ solid‬أي صلب‪.‬‬
‫تم ضبط لون اإلطار ‪ border-color‬على ‪.blue‬‬
‫الحظ أن اإلطار تم من الحواف األربعة بالكامل‪ ،‬بسمك ‪ 3px‬وخط صلب‬

‫ولون أزرق‪.‬‬
‫انتبه! فإنه يمكن إعطاء القيم الثالثة للخاصية ‪ border‬مرة واحدة‬

‫بدالً من تحديد الثالث خصائص السابقة‪ ،‬توفيراً للوقن‪ ،‬مثل الكود التالي‪:‬‬
‫;‪border:3px solid blue‬‬
‫وبعد التشغيل سيتم إنشاء إطار بنفس الطريقة‬
‫كما يمكن التحكم أيضاً في كل حافة بشكل مستقل‪ ،‬ليكون اإلطار أكثر دقة‬
‫وتفصيل‪ ،‬وتدقيق بفضل اهلل‪ ،‬وذلك كما يلي إن شاء اهلل‪:‬‬

<!DOCTYPE html>
<html>
<head></head>
<body style="padding:15px;">
<h2 style="border-top:7px solid darkgreen;">
Welcome to Border-Top
</h2><hr>
<h2 style="border-right:11px solid navy;">
Welcome to Border-Right
</h2><hr>
<h2 style="border-bottom:5px solid blue;">
Welcome to Border-Bottom
</h2><hr>
<h2 style="border-left:15px solid red;">
Welcome to Border-Left
</h2>
</body>
</html>
PAGE 104
،‫ وخط منقط‬،‫ مثل خط متقطع‬،‫كما أنه يوجد أنواع أخري من اإلطارات‬
:‫ كما يلي‬،‫ وأخري‬،‫وخط مزدوج‬

<!DOCTYPE html>
<html>
<head></head>
<h2 style="border:5px dashed blue;">
Welcome to Dashed Border
</h2><hr>
<h2 style="border:5px dotted red;">
Welcome to Dotted Border
</h2><hr>
<h2 style="border:5px double navy;">
Welcome to Double Border
</h2><hr>
<h2 style="border:5px inset gray;">
Welcome to Inset Border
</h2><hr>
<h2 style="border:5px outset gray;">
Welcome to Outset Border
</h2><hr>
<h2 style="border:5px groove gold;">
Welcome to Groove Border
</h2><hr>
<h2 style="border:5px ridge gold;">
Welcome to Ridge Border
</h2><hr>
</body>
</html>

‫ومن كل أمثلة اإلطارات السابقة‪ ،‬الحظ التنوع في اإلطارات‪ ،‬من حيث‬

‫النوع‪ ،‬أو الحجم‪ ،‬أو اللون‪.‬‬
‫انتبه! فإنه يمكنك أيضاً أن تنوع في حواف اإلطارات المختلفة للعنصر‬

‫الواحد بفضل اهلل‪ ،‬كما يلي‪:‬‬
‫‪PAGE 106‬‬
<!DOCTYPE html>
<html>
<head>
<style>
h2{
padding:15px;
border-top:3px solid red;
border-right:5px dotted blue;
border-bottom:7px dashed gold;
border-left:9px groove lightgreen;
}
</style>
</head>
<h2>
Welcome to CSS
<br>
Hello
<br>
Hi
</h2>
</body>
</html>

‫الحظ وجود تنوع مختلف في كل حافة من حواف اإلطار‪ ،‬في نوع اإلطار‬
‫ولونه وحجمه‪.‬‬
‫الحظ أن الحشو ‪ padding‬للوسم ‪ h2‬يظهر بين اإلطار ‪border‬‬

‫له وبين محتواه‪.‬‬
‫انتبه! فإنه يوجد خط خارجي للعناصر‪ ،‬مختلف عن اإلطار الطبيعي واسمه‬

‫‪ ،outline‬ويمكن زيادته أيضاً للعنصر‪.‬‬
‫‪PAGE 108‬‬
<!DOCTYPE html>
<html>
<head>
<style>
h2{
height:70px;
padding:15px;
border:9px groove yellow;
outline:7px solid darkgreen;
}
</style>
</head>
</body>
</html>

‫ ونوع خط صلب‬7px ‫ بسمك‬outline ‫الحظ وجود خط خارجي‬
.darkgreen ‫ ولون أخضر غامق‬solid
.‫ أما الخط الخارجي فال‬،‫انتبه! فإن اإلطار تستطيع تفصيل حوافه مختلفة‬
‫ أما الخط الخارجي‬،‫انتبه! فإن اإلطار إذا كبر ال يخرج عن الصفحة‬
.‫فيخرج ويطغي أيضاً على كل المحتويات بدون أي رعاية منه لذلك‬
<!DOCTYPE html>
<html>
<head></head>
<h2 style="outline:70px solid red">Welcome</h2>
<h2 style="border:70px solid blue">Welcome</h2>
</body>
</html>
PAGE 110
‫الحظ في المثال السابق‪ ،‬أنه تم زيادة السمك إلى ‪ 70px‬الختبار اإلطار‬
‫والخط الخارجي‪ ،‬واستجاب اإلطار لعملية التكبير‪ ،‬أما الخط الخارجي‪ ،‬خرج‬
‫عن الصفحة‪ ،‬وبل وطغي على اإلطار‪ ،‬فبسببه تم تغطية جزء من اإلطار‪.‬‬
‫واآلن سوف نبدأ مع تدوير اإلطار ‪ radius‬أي نصف القطر من الجوانب‬

‫األربعة‪ ،‬وهم أعلي اليسار‪ ،‬وأعلي اليمين‪ ،‬وأسفل اليسار وأسفل اليمين‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h2‬‬
‫;‪padding:10px‬‬
‫;‪height:50px‬‬
‫;‪border:9px groove gold‬‬
‫}‬
‫>‪</head‬‬
‫>";‪<body style="padding:15px‬‬
‫>‪<h2>Hi</h2‬‬
‫>‪<h2 style="border-radius:10px;">Hi</h2‬‬
‫>‪</body‬‬
‫>‪</html‬‬

PAGE 112
‫الحظ أن أول وسم ‪ h2‬لم يتم تدويره‪ ،‬ثم الذي يليه استدرا‬
‫‪ rounded‬من الحواف األربعة بمقدار ‪ ،10px‬ثم الذي يليه استدرا‬
‫‪ rounded‬من الحواف األربعة بمقدار ‪ ،20px‬ثم الذي يليه استدرا‬
‫‪ rounded‬من الحواف األربعة بمقدار ‪ 45px‬حتى وصل الى شكل‬
‫دائري‪ ،‬وذلك ألن الطول موافق للعرض‪ ،‬أما لو كان غير ذلك فسيكون شكل‬
‫بيضاوي طولي أو عرضي‪ ،‬وكل هذا بخاصية ‪.border-radius‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪h2{ width:100px; height:50px‬‬
‫} ;‪h3{ width:50px; height:100px‬‬
‫{‪h2,h3‬‬
‫;‪border:9px groove gold‬‬
‫}‬
‫>‪</head‬‬
‫>";‪<body style="padding:15px‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أن الوسم ‪ h2‬عرضه أكبر من طوله فأحدث شكل بيضاوي أفقي‬

‫بعد تخصيص خاصية ‪ border-radius‬له‪.‬‬
‫الحظ أن الوسم ‪ h3‬طوله أكبر من عرضه فأحدث شكل بيضاوي رأسي‬

‫بعد تخصيص خاصية ‪ border-radius‬له‪.‬‬
‫الحظ أنه عند ضبط الخاصية ‪ border-radius‬تتأثر كل الزوايا‬

‫من كل الجهات باالستدارة مرة واحدة بمقدار واحد‪ ،‬وهو المقدار الذي تم‬
‫تخصيصه للخاصية‪.‬‬
‫كما يمكن أيضاً التحكم في استدارة كل زاوية وحدها بفضل اهلل‪ ،‬كما يلي‪:‬‬
‫‪PAGE 114‬‬
<!DOCTYPE html>
<html>
<head>
<style>
h2,h3{
height:50px; border:9px ridge red;
}
h2{
border-top-left-radius:25px;
border-top-right-radius:25px;
margin-bottom:0;
}
h3{
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
margin-top:0;
}
</style>
</head>
<h2></h2>
<h3></h3>
</body>
</html>

‫الحظ أنه تم التحكم بفضل اهلل‪ ،‬في كل زاوية وحدها‪ ،‬بالخصائص المحددة‪،‬‬
‫فالخاصية أعلي يساراً ‪border-top-left-radius‬‬
‫والخاصية أعلي يميناً ‪border-top-right-radius‬‬
‫والخاصية أسفل يساراً ‪border-bottom-left-radius‬‬
‫والخاصية أسفل يميناً ‪border-bottom-right-radius‬‬
‫ليكون التحكم في العرض أكثر قوة وتفصيل بفضل اهلل‪.‬‬
‫وبعد كل هذا التفصيل بفضل اهلل رجاء انتبه! ألنه يمكنك تفصيل اإلطار كل‬
‫جزء كما تحب‪ ،‬ويمكنك أيضاً ضبطه مرة واحدة‪ ،‬حسب الرغبة واالحتياج‪.‬‬
‫‪PAGE 116‬‬
‫اللون والخلفية ‪Color and Background‬‬

‫لون الخلفية ‪background-color‬‬
‫تغيير لون خلفية العناصر وخاصية ‪:background-color‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪h1{ background-color:lightblue‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أنه تم تغيير لون الخلفية للوسم ‪ h1‬عن طريق تخصيص قيمة اللون‬
‫‪ lightblue‬للخاصية ‪.background-color‬‬

<!DOCTYPE html>
<html>
<head>
<style>
h1{
background-color:navy;
color:lightblue;
}
</style>
</head>
<body>
</body>
</html>
‫ وتم ضبط‬navy ‫ على اللون‬h1 ‫الحظ أنه تم ضبط لون الخلفية للوسم‬
.lightblue ‫لون النص لنفس الوسم على اللون‬
PAGE 118
‫صورة الخلفية والتدرج ‪background-image‬‬
‫تغيير صورة الخلفية وخاصية ‪:background-image‬‬
‫وباستخدام الصورة ‪ tree.jpg‬قم بكتابة الكود! التالي ثم احفظه‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;)"‪background-image:url("tree.jpg‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أن العنصر المقصود بالتنسيق هنا هو العنصر ‪ body‬أي الصفحة‬
‫نفسها‪ ،‬أي أننا نريد تغيير أو تعيين صورة الخلفية لتظهر في الصفحة للوسم‬
‫‪.body‬‬
‫الحظ أنه للتحكم في صورة الخلفية للعناصر يتم استخدام الخاصية‬

‫‪.background-image‬‬
‫الحظ أن الخاصية ‪ background-image‬تأخذ قيمة لمسار‬

‫صورة‪ ،‬عن طريق الدالة ‪ ،url‬ثم بعدها قوسين ) ( وبداخل القوسين‬
‫رمزين اقتباس "" وبداخل رمزين االقتباس اسم أو مسار الصورة‪ ،‬ليكون‬
‫ناتج ذلك هو التالي‪:‬‬
‫)"‪background-image:url("tree.jpg‬‬
‫لتعيين صورة خلفية للوسم ‪ body‬فتكون خلفية للصفحة‪.‬‬
‫انتبه! فإنه يمكنك وضع اسم الصورة بدون رمزين االقتباس "" ولكن لن‬
‫تعمل عند وجود مسافات في االسم مثل "‪ ،"my tree.jpg‬فلذلك‬
‫تأكد أنه من األفضل استخدام رمزين االقتباس "" دائماً في هذه الحالة‪.‬‬
‫انتبه! فإن الصورة المعروضة أمامك تتكرر إذا زاد المتصفح عن حجمها‬
‫األصلي طوالً أو عرضاً‪ ،‬ولمالحظة ذلك‪ ،‬أنظر إلى الشكل التالي بعد تكبير‬
‫نافذه المتصفح‪:‬‬
‫‪PAGE 120‬‬
‫يمكن تخصيص تدرج لوني خطي الى لون الخلفية‪ ،‬مع تخصيص خاصية الطول‬
‫للوسم ‪ body‬لتحديد إلى أين ينتهي التدرج‪ ،‬ثم يتكرر كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;)‪background-image:linear-gradient(navy,lightblue,blue‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ إلنشاء تدرج لوني‬linear-gradient ‫الحظ أنه تم استخدام الدالة‬

‫ مع العلم أنك تستطيع زيادة‬،‫ وتم كتابة ثالث ألوان بداخل األقواس‬،‫خطي‬
ً‫ مثال‬،‫ ولو تم استخدام ألوان مختلفة فسيتغير الشكل‬،‫هذه األلوان كما تريد‬
:‫لو تم استخدم القيم التالية‬
)navy,lightblue,blue,yellow,blue,lightblue,navy(
:‫فسيكون الشكل كما يلي‬
PAGE 122
‫عند استخدام التدرج الخطي‪ ،‬يمكن تحديد االتجاه‪ ،‬كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;)‪background-image:linear-gradient(to right,red,blue‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

:‫ كما يلي‬،‫ يمكن تحديد درجة الزاوية‬،‫عند استخدام التدرج الخطي‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
height:250px;
background-image:linear-gradient(290deg,red,blue);
}
</style>
</head>
<body>
</body>
</html>
PAGE 124
‫يمكن تخصيص تدرج لوني شعاعي الى لون الخلفية‪ ،‬مع تخصيص خاصية‬
‫الطول للوسم ‪ body‬لتحديد إلى أين ينتهي التدرج‪ ،‬ثم يتكرر كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;)‪background-image:radial-gradient(navy,lightblue,blue‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أنه تم استخدام الدالة ‪ radial-gradient‬إلنشاء تدرج لوني‬

‫شعاعي بثالث ألوان‪ ،‬ويمكن زيادة األلوان‪.‬‬

،ً‫وعند استخدام التدرج الخطي والشعاعي نستطيع تحديد النسب تصاعديا‬
:‫كما يلي‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
height:250px;
background-image:linear-gradient(red 30%,navy 60%,yellow 100%);
}
</style>
</head>
<body>
</body>
</html>
PAGE 126
‫عند استخدام التدرج الشعاعي‪ ،‬يمكن تحديده كدائرة‪ ،‬كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;)‪background-image:radial-gradient(circle, red, yellow, red‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

:‫ كما يلي‬،‫ يمكن تحديد نسبة الجانب‬،‫انتبه! عند استخدام التدرج الشعاعي‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
height:250px;
background-image:radial-gradient(closest-side at 70%,red,blue);
}
</style>
</head>
<body>
</body>
</html>
‫سنقصد‬ closest-side at 70% 70% ‫ وباستخدام‬،‫هذا الجانب األفقي‬

.ً‫الجانب األفقي والرأسي معا‬
PAGE 128
‫‪repeating-linear-gradient‬‬ ‫يمكن انشاء تدرج لوني خطي متكرر‪ ،‬بالدالة‬
‫‪ ،‬كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;)‪background-image:repeating-linear-gradient(red 50px,blue 100px‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

، repeating-radial-gradient ‫ بالدالة‬،‫يمكن انشاء تدرج شعاعي متكرر‬
:‫كما يلي‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
height:250px;
background-image:repeating-radial-gradient(red 50px,blue 100px);
}
</style>
</head>
<body>
</body>
</html>
PAGE 130
‫تكرار الخلفية ‪background-repeat‬‬
‫تكرار صورة الخلفية وخاصية ‪:background-repeat‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-repeat:no-repeat‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أنه يمكن التحكم في تكرار صورة الخلفية عن طريق الخاصية‬
‫‪ background-repeat‬بسهولة‪.‬‬
‫الحظ أنه مع القيمة ‪ no-repeat‬لم يحدث تكرار‪ ،‬أفقي أو رأسي‪.‬‬
‫انتبه! فإن القيمة االفتراضية‪ ،‬هي ‪ ،repeat‬أي تكرار كلي‪.‬‬

‫انتبه! لو تم استخدام القيمة ‪ repeat-x‬فسوف يحدث تكرار أفقي‪.‬‬
‫انتبه! لو تم استخدام القيمة ‪ repeat-y‬فسوف يحدث تكرار رأسي‪.‬‬
‫انتبه! لو تم استخدام القيمة ‪ space‬فسوف يحدث تكرار مع مسافات‪.‬‬
‫انتبه! لو تم استخدام القيمة ‪ round‬فسوف يحدث تكرار بدون مسافات‪.‬‬
‫‪PAGE 132‬‬
‫حجم الخلفية ‪background-size‬‬
‫حجم صورة الخلفية وخاصية ‪:background-size‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-size:200px 100px‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أن الخاصية ‪ background-size‬للوسم ‪ body‬أخذت‬

‫القيمة ‪ ،200px 100px‬ومعناها ‪ 200‬للعرض و‪ 100‬للطول‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image:url("tree.jpg");
background-size:cover;
}
</style>
</head>
<body></body>
</html>
PAGE 134
‫ولو تم تكبيرها‪ ،‬تكون مثل الشكل التالي‪:‬‬
‫ومن هنا نالحظ تأثير القيمة ‪ cover‬على الخلفية‪ ،‬حيث جعلتها تغطي‬
‫الشاشة دائماً‪ ،‬ويمكن استخدام القيمة ‪ contain‬للتأكد من أن الصورة‬
‫مرئية بالكامل‪.‬‬

background-attachment ‫ارتباط أو تعلق الخلفية‬
:background-attachment ‫تعلق صورة الخلفية وخاصية‬
‫ البد من وضع محتوي في‬،‫انتبه! فإنه من أجل رؤية تأثير هذه الخاصية‬
‫ لنري‬،‫ حيث ننزل ونصعد‬scroll ‫ بحيث يظهر شريط التمرير‬،‫صفحة الويب‬
‫ ونلونه باللون األحمر ليظهر‬h1 ‫ ولذلك سوف نختار الوسم‬،‫ما سوف يحدث‬
background-attachment ‫ مع العلم أننا لن نستخدم‬،‫على صورة الشجرة‬
.‫ انتبه! رجاء التركيز‬،‫ ليظهر التأثير‬،‫اآلن‬

<!DOCTYPE html>
<html>
<head>
<style>
h1{ color:red; }
body{
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
</body>
</html>
PAGE 136
‫واآلن ننزل بشريط التمرير ‪ scroll‬ليكون الشكل كما يلي‪:‬‬
‫بعد النزول الحظ أنك تترك الصورة باألعلى‪ ،‬وتذهب لألسفل‪ ،‬مثل التالي‪:‬‬

‫ ولكن‬background-attachment ‫واآلن سوف نري تأثير الخاصية‬
.scroll ‫انتبه! جيداً وركز مع شريط التمرير‬
<!DOCTYPE html>
<html>
<head>
<style>
h1{ color:red; }
body{
background-attachment:fixed;
}
</style>
</head>
<body>
</body>
</html>
PAGE 138
‫واآلن ننزل بشريط التمرير ‪ scroll‬ليكون الشكل كما يلي‪:‬‬
‫واآلن ننزل مرة أخري بشريط التمرير ‪ scroll‬ليكون الشكل كما يلي‪:‬‬
‫الحظ ثبات الصورة‪ ،‬بسبب استخدام القيمة ‪ fixed‬للخاصية‬

‫‪ ،background-attachment‬مع العلم أن القيمة‬
‫‪ scroll‬هي االفتراضية‪ ،‬والقيمة ‪ local‬تشبه ‪.scroll‬‬

background-position ‫موضع الخلفية‬
:background-position ‫موضع صورة الخلفية وخاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-size:200px 100px;
background-position:center;
}
</style>
</head>
<body></body>
</html>
‫الحظ أن الخلفية‬
‫أصبحت في المنتصف‬
.center ‫بالقيمة‬
PAGE 140
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-position:left top;
}
</style>
</head>
<body></body>
</html>
.top‫ و‬left ‫ بسبب القيمتين‬،ً‫الحظ أن الخلفية أصبحت في األعلى يسارا‬

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-position:right top;
}
</style>
</head>
<body></body>
</html>
.top‫ و‬right ‫ بسبب القيمتين‬،ً‫الحظ أن الخلفية في األعلى يمينا‬
PAGE 142
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-position:left bottom;
}
</style>
</head>
<body></body>
</html>
.bottom‫ و‬left ‫ بسبب القيمتين‬،ً‫الحظ أن الخلفية في األسفل يسارا‬

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-position:right bottom;
}
</style>
</head>
<body></body>
</html>
.bottom‫ و‬right ‫ بسبب القيمتين‬،ً‫الحظ الخلفية في األسفل يمينا‬
PAGE 144
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-position:left center;
}
</style>
</head>
<body></body>
</html>
.center‫ و‬left ‫ بسبب القيمتين‬،ً‫الحظ الخلفية في الوسط يسارا‬

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-position:right center;
}
</style>
</head>
<body></body>
</html>
.center‫ و‬right ‫ بسبب القيمتين‬،ً‫الحظ الخلفية في الوسط يمينا‬
PAGE 146
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-position:bottom center;
}
</style>
</head>
<body></body>
</html>
.center‫ و‬bottom ‫ بسبب القيمتين‬،‫الحظ الخلفية بالوسط واألسفل‬

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-position:top center;
}
</style>
</head>
<body></body>
</html>
.center‫ و‬top ‫ بسبب القيمتين‬،‫الحظ الخلفية بالوسط واألعلى‬
PAGE 148
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-repeat:no-repeat‬‬
‫;‪background-size:200px 100px‬‬
‫;‪background-attachment:fixed‬‬
‫;‪background-position:30% 40%‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body></body‬‬
‫>‪</html‬‬
‫الحظ أنه تم ترك ‪ %30‬من العرض من ناحية اليسار‪ ،‬والحظ أنه تم‬
‫ترك ‪ %40‬من الطول من الناحية العلوية‪ ،‬مع العلم أنه يمكن التحديد‬
‫بقيمة البيكسل أيضاً‪.‬‬

background-clip ‫قصاصة الخلفية‬
:background-clip ‫نوع قصاصة صورة الخلفية وخاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:200px; height:100px; padding:10px;
background-color:yellow;
border:9px dotted blue;
}
#d1{
background-clip:border-box;
}
#d2{
background-clip:padding-box;
}
#d3{
background-clip:content-box;
}
</style>
</head>
<body>
<div id="d1"></div><hr>
<div id="d2"></div><hr>
<div id="d3"></div>
</body>
</html>
PAGE 150

‫الحظ أنه تم تحديد عرض ‪ width‬وطول ‪ height‬وحشو‬
‫‪ padding‬ولون خلفية ‪ background-color‬وإطار منقط‬
‫‪ dotted‬كبير ليظهر ما خلفه‪ ،‬وكل ذلك لعمل إظهار لتأثير القصاصة‬
‫بالكامل‪.‬‬
‫الحظ أنه مع القيمة ‪ border-box‬الشكل كما هو‪ ،‬وذلك ألن القيمة‬

‫‪ border-box‬هي االفتراضية‪.‬‬
‫الحظ أنه مع القيمة ‪ padding-box‬يظهر اإلطار خارج الخلفية‪.‬‬
‫الحظ أنه مع القيمة ‪ content-box‬يظهر اإلطار خارج الخلفية‪،‬‬

‫وخارج الحشو أيضاً‪.‬‬
‫انتبه! فإن هناك خاصية أخري تفعل نفس الشيء‪ ،‬وتأخذ نفس القيم‪،‬‬
‫ولكنها تأخذ من أصل الصورة‪ ،‬وهي ‪،background-origin‬‬
‫وتفيد عندما تكون أصل الخلفية صورة‪.‬‬
‫‪PAGE 152‬‬
‫مزج الخلفيات ‪background-blend-mode‬‬
‫مزج الخلفيات وخاصية ‪ ،background-blend-mode‬وهي‬
‫ممتعة جداً‪ ،‬وستشعر كأنك تصنع مؤثرات ببرنامج الفوتوشوب بسهولة‪:‬‬
‫تعودنا من قبل عند كتابة الكود التالي‪:‬‬

‫;)'‪background-image:url('tree.jpg‬‬
‫يظهر الشكل التالي‪:‬‬
‫وعند كتابة الكود التالي‪:‬‬

‫;)‪background-image:linear-gradient(to left,yellow,green‬‬
‫يظهر الشكل التالي‪:‬‬

‫ أي بين‬،‫ هل يمكن أن نقوم بعمل مزيج أو خليط بين الخلفيتين‬،‫ولكن اآلن‬
،‫ نعم بفضل اهلل‬،‫ اإلجابة هي‬،‫ وخلفية الصورة!؟‬،‫خلفية التدرج اللوني‬
.background-blend-mode ‫وذلك عن طريق خاصية‬
:‫ لو تم كتابة الكود التالي‬،‫واآلن‬

background-image:url('tree.jpg'),linear-gradient(to left,red,blue);
:‫ كما يلي‬،ً‫ ألنها أوال‬،‫ستظهر خلفية الصورة‬
:‫ولو تم كتابة الكود التالي‬

background-image:linear-gradient(to left,red,blue),url('tree.jpg');
:‫ كما يلي‬،ً‫ ألنها أوال‬،‫ستظهر خلفية التدرج اللوني‬
PAGE 154
‫الوضع السابق هو ‪ ،normal‬وهو األولي فاألولي‪ ،‬وهو االفتراضي‪.‬‬
‫ولكن مع الوضع ‪ ،multiply‬وضرب األلوان يختلف األمر كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-size:cover‬‬
‫‪background-image:linear-gradient(to left,red,blue),‬‬
‫;)'‪url('tree.jpg‬‬
‫;‪background-blend-mode:multiply‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body> </body‬‬
‫>‪</html‬‬
‫الحظ أنه تم المزج بين التدرج اللوني‪ ،‬وصورة الخلفية‪ ،‬حيث الناتج األخير‬
‫هو نتيجة ضرب األلوان العلوية والسفلية‪ ،‬أي طبقة سوداء تؤدي إلى مثلها‬
‫‪ ،‬وطبقة بيضاء تؤدي إلى أي تغيير‪ ،‬فيؤثر كصورتين بفيلم شفاف متداخل‪.‬‬
:‫ والتغطية يختلف األمر كما يلي‬،overlay ‫ومع الوضع‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image:linear-gradient(to left,red,blue),
url('tree.jpg');
background-blend-mode:overlay;
}
</style>
</head>
<body> </body>
</html>
‫ حيث الناتج األخير هو نتيجة الضرب‬،‫ والصورة‬،‫الحظ المزج بين التدرج‬

،‫ أو الشاشة إذا كان اللون السفلي ساطع‬،‫إذا كان اللون السفلي داكن‬
.‫مع الضوء الثابت وتبديل الطبقات‬
:‫ والشاشة يختلف األمر كما يلي‬،screen ‫ومع الوضع‬
PAGE 156
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-blend-mode:screen‬‬
‫}‬
‫>‪</head‬‬
‫>‪</html‬‬
‫الحظ المزج بين التدرج‪ ،‬والصورة‪ ،‬حيث الناتج األخير هو نتيجة قلب‬
‫األلوان وضربها وعكس تلك القيمة‪ ،‬وال تؤدي الطبقة السوداء إلى أي تغيير‪،‬‬
‫وتؤدي الطبقة البيضاء إلى طبقة نهائية بيضاء‪ ،‬فيكون التأثير هو مثل‬
‫صورتين مشرقتين على شاشة العرض‪.‬‬
‫ومع الوضع ‪ ،darken‬واألدكن يختلف األمر كما يلي‪:‬‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
url('tree.jpg');
background-blend-mode:darken;
}
</style>
</head>
<body> </body>
</html>
‫ حيث الناتج األخير هو توحيد األلوان‬،‫ والصورة‬،‫الحظ المزج بين التدرج‬

.‫الداكنة‬
PAGE 158
‫ومع الوضع ‪ ،lighten‬واألسطع يختلف األمر كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-blend-mode:lighten‬‬
‫}‬
‫>‪</head‬‬
‫>‪</html‬‬
‫الحظ المزج بين التدرج‪ ،‬والصورة‪ ،‬حيث الناتج األخير هو توحيد األلوان‬
‫الساطعة‪.‬‬

:‫ وإنقاص الكثافة يختلف األمر كما يلي‬،color-dodge ‫ومع الوضع‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
url('tree.jpg');
background-blend-mode:color-dodge;
}
</style>
</head>
<body> </body>
</html>
‫ حيث الناتج األخير هو نتيجة قسمة‬،‫ والصورة‬،‫الحظ المزج بين التدرج‬

‫ فالطبقة السوداء ال تؤدي إلى أي‬،‫اللون السفلي على عكس اللون العلوي‬
.‫ وتكون المقدمة ذات اللون العكسي للخلفية إلى لون مضيء بالكامل‬،‫تغيير‬
PAGE 160
‫ومع الوضع ‪ ،color- burn‬وحرق األلوان يختلف األمر كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-blend-mode:color-burn‬‬
‫}‬
‫>‪</head‬‬
‫>‪</html‬‬
‫الحظ المزج بين التدرج‪ ،‬والصورة‪ ،‬حيث الناتج األخير هو نتيجة عكس‬
‫اللون السفلي‪ ،‬وقسمة القيمة على اللون األعلى‪ ،‬وعكس تلك القيمة‪ ،‬حيث‬
‫الطبقة البيضاء ال تؤدي إلى أي تغيير‪ ،‬وتؤدي الطبقة ذات اللون العكسي‬
‫للخلفية إلى صورة نهائية سوداء‪ ،‬فيظهر وكأنه محروق‪.‬‬

:‫ والضوء الخشن يختلف األمر كما يلي‬،hard-light ‫ومع الوضع‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
url('tree.jpg');
background-blend-mode:hard-light;
}
</style>
</head>
<body> </body>
</html>
‫ حيث الناتج األخير هو نتيجة الضرب‬،‫ والصورة‬،‫الحظ المزج بين التدرج‬

.‫إذا كان اللون األعلى أغمق أو الشاشة إذا كان اللون األعلى أخف‬
PAGE 162
‫ومع الوضع ‪ ،soft-light‬والضوء الناعم يختلف األمر كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-blend-mode:soft-light‬‬
‫}‬
‫>‪</head‬‬
‫>‪</html‬‬
‫الحظ المزج بين التدرج‪ ،‬والصورة‪ ،‬حيث الناتج األخير يشبه الضوء الصلب‪،‬‬
‫ولكنه أكثر نعومة‪ ،‬ويعمل وضع المزج هذا بشكل مشابه للضوء المتسلط‪،‬‬
‫ويتشابه هذا التأثير وكأنه تم تسليط ضوء كشاف على الخلفية‪.‬‬

:‫ والفروقات يختلف األمر كما يلي‬،difference ‫ومع الوضع‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
url('tree.jpg');
background-blend-mode:difference;
}
</style>
</head>
<body> </body>
</html>
‫ حيث الناتج األخير هو نتيجة لطرح‬،‫ والصورة‬،‫الحظ المزج بين التدرج‬

،‫ فال يكون للطبقة السوداء أي تأثير‬،‫اللونين الداكنين من اللون األسطع‬
.‫بينما تقوم الطبقة البيضاء بتغيير لون الطبقة األخرى‬
PAGE 164
‫ومع الوضع ‪ ،exclusion‬واالستبعاد يختلف األمر كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-blend-mode:exclusion‬‬
‫}‬
‫>‪</head‬‬
‫>‪</html‬‬
‫الحظ المزج بين التدرج‪ ،‬والصورة‪ ،‬حيث الناتج األخير مشابه للفرق‪ ،‬ولكن‬
‫بأقل تباين‪ ،‬كما هو الحال مع االختالف‪ ،‬فال يكون للطبقة السوداء أي‬
‫تأثير‪ ،‬بينما تقوم الطبقة البيضاء بتغيير لون الطبقة األخرى‪.‬‬

:‫ ودرجة اللون يختلف األمر كما يلي‬،hue ‫ومع الوضع‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
url('tree.jpg');
background-blend-mode:hue;
}
</style>
</head>
<body> </body>
</html>
‫ بينما‬،‫ حيث الناتج األخير له لون أعلى‬،‫ والصورة‬،‫الحظ المزج بين التدرج‬
.‫يستخدم تشبع وإضاءة اللون السفلي‬
PAGE 166
‫ومع الوضع ‪ ،saturation‬والتشبع يختلف األمر كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-blend-mode:saturation‬‬
‫}‬
‫>‪</head‬‬
‫>‪</html‬‬
‫الحظ المزج بين التدرج‪ ،‬والصورة‪ ،‬حيث الناتج األخير له تشبع من أعلى‬
‫األلوان‪ ،‬في حين يستخدم الـ ‪ hue‬وسطوع اللون السفلي‪.‬‬

:‫ واللون يختلف األمر كما يلي‬،color ‫ومع الوضع‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
url('tree.jpg');
background-blend-mode:color;
}
</style>
</head>
<body> </body>
</html>
‫ حيث الناتج األخير له لون وتشبع من‬،‫ والصورة‬،‫الحظ المزج بين التدرج‬
‫ فيحافظ التأثير على مستويات‬،‫ بينما يستخدم لمعان اللون السفلي‬،‫أعلى لون‬
.‫اللون الرمادي ويمكن استخدامه لتلوين المقدمة‬
PAGE 168
‫ومع الوضع ‪ ،color‬واللمعان يختلف األمر كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;‪background-blend-mode:luminosity‬‬
‫}‬
‫>‪</head‬‬
‫>‪</html‬‬
‫الحظ المزج بين التدرج‪ ،‬والصورة‪ ،‬حيث يحتوي الناتج األخير على لمعان‬
‫اللون العلوي ‪ ،‬في حين يستخدم لون وتشبع اللون السفلي‪.‬‬

background ‫خاصية الخلفية‬
‫ حيث يتم‬،‫ تجمع القيم المتعلقة بها‬،background ‫خاصية الخلفية‬
،‫ واالرتباط‬،‫ والتكرار‬،‫ والموضع مع الحجم‬،‫ والصورة‬،‫ اللون‬،‫ضبط‬
‫ حيث تقصل بين كل قيمة‬،‫ وقصاصة صورة الخلفية‬،‫وقصاصة لون الخلفية‬
.‫وأخري فقط بمسافة‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
height:300px;
padding:20px;
border:3px dashed blue;
background:yellow url('tree.jpg')
center right/50% no-repeat
fixed content-box content-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
PAGE 170
‫ولذلك انتبه! فلو تم كتابة الكود التالي‪ ،‬لضبط لون الخلفية سوف يعمل‪:‬‬
‫;‪background:red‬‬
‫ولو تم كتابة الكود التالي‪ ،‬لضبط صورة الخلفية سوف يعمل‪:‬‬
‫;)'‪background:url('tree.jpg‬‬
‫ولو تم كتابة الكود التالي‪ ،‬لضبط لون وصورة الخلفية سوف يعمل‪:‬‬
‫;)'‪background:red url('tree.jpg‬‬
‫وهكذاً‪ ،‬فرجاء الفهم جيداً عند العمل‪.‬‬

‫تكوين إطار بالصورة ‪border-image‬‬
‫عند استخدام صورة لتكوين إطار منها‪ ،‬في البداية تخيل وكأن هناك صورة‪،‬‬
‫ثم يتم قطع حوافها الستخدامها كإطار‪ ،‬والخاصية العامة لتكوين اإلطار‬
‫من الصورة هي ‪ ،border-image‬ولكن يتفرع منها بعض‬
‫الخصائص‪ ،‬ولفهم تلك الخصائص‪ ،‬تابع الجدول التالي‪:‬‬
‫التفصيل‬ ‫الخاصية‬
‫البد من تحديد إطار عادي أوالً‪ ،‬قبل االستخدام‪،‬‬ ‫‪border‬‬
‫وعلى األقل سمك اإلطار ونوع اإلطار‬

‫مصدر الصورة‪ ،‬وتأخذ ‪ url‬لرابط الصورة‬ ‫‪border-image-source‬‬
‫حجم اإلطار‪ ،‬ويمكن تجاهلها باستخدام حجم‬ ‫‪border-image-width‬‬
‫اإلطار العادي ‪border‬‬

‫رقم نسبة يتم قصها من الصورة الستخدامها في‬ ‫‪border-image-slice‬‬
‫اإلطار‬
‫تكرار صورة اإلطار‪ ،‬والقيمة االفتراضية لها هي‬ ‫‪border-image-repeat‬‬
‫‪ stretch‬وهي لتمديد الصورة المستخدمة لحدود‬

‫اإلطار‪ ،‬والقيمة ‪ repeat‬و‪ round‬لتكرار‬
‫صورة اإلطار‪ ،‬والقيمة ‪ space‬لوضع مسافات‬
‫بين صورة اإلطار‬
‫حجم مقدار خروج صورة اإلطار عن موضعها‬ ‫‪border-image-outset‬‬
‫هي لتجمع قيم ‪ border-image‬دفعة‬ ‫‪border-image‬‬
‫واحدة‬
‫‪PAGE 172‬‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
height:150px;
border:10px solid;
border-image-source: url('tree.jpg');
border-image-width: 10px;
border-image-slice: 10;
border-image-repeat: round;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
.‫ الستخدامها كإطار‬،‫الحظ أنه تم قطع حواف الصورة‬

‫واآلن سوف نقوم بتحميل صورة لإلطار موجودة على موقع‬
:‫ من الرابط التالي‬mdn.mozillademos.org
https://mdn.mozillademos.org/files/4127/border.png
:‫ وهي التالية‬border.png ‫وهذه الصورة اسمها‬
:‫ كما يلي‬،‫واآلن سوف نقوم بعمل مثال على هذه الصورة بفضل اهلل‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
height:150px;
border:20px solid;
border-image:url('border.png') 100;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
PAGE 174
‫الحظ أنه تم استخدام الخاصية العامة ‪ border-image‬بسهولة‪،‬‬

‫وتم كتابة المسار بالـ ‪ url‬ثم ‪ 100‬ألخذ الصورة بالكامل‪ ،‬فأصبحت‬
‫كاملة على الحواف األربعة‪.‬‬
‫ولو استبدلنا القيمة ‪ 100‬بالقيمة ‪ 50‬سوف يكون الناتج كما يلي‪:‬‬

:‫ كما سنفعل في المثال التالي‬،‫ سيختلف األمر‬،‫ولو تم تكرارها‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
height:150px;
border:20px solid;
border-image:url('border.png') 30 round;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
PAGE 176
‫استخدام األلوان ‪Colors‬‬
‫في اللغة ‪ css‬يوجد أساليب أخري الستخدام األلوان‪.‬‬
‫عند استخدام األلوان في لغة ‪ css‬يمكن كتابة اسم اللون صريح مثل‬
‫األلوان ‪ red‬و‪ green‬و‪ blue‬و‪ orange‬الى آخر هذه األلوان‪،‬‬
‫ويمكن أيضاً استخدام طريقة ‪ RGB‬مثل ‪ #FF0000‬او ‪ #F00‬أو‬
‫‪ #0F0‬وهكذا‪ ،‬وهذين الطريقتين تم شرحهم باستفاضة من قبل في كتاب‬
‫الويب "صخرة األساس" عن اللغة ‪.HTML‬‬
‫دالة ‪ rgb‬إلنتاج اللون‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h1‬‬
‫;)‪color:rgb(255,0,0‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أنه تم تحديد اللون األحمر بدون كتابة االسم ‪ red‬أو ‪#F00‬‬
‫أو ‪.#FF0000‬‬
‫الحظ أنه لتحديد اللون‪ ،‬تم كتابة ‪ rgb‬ثم قوسين ) ( ثم بداخل‬

‫القوسين كتبنا ‪ 255‬ثم فاصلة "‪ ",‬ثم صفر ثم فاصلة "‪ ",‬ثم صفر‪،‬‬
‫ومعني هذا أنه تم إعطاء األحمر ‪ 255‬درجة‪ ،‬ثم األخضر صفر‪ ،‬ثم‬
‫األزرق صفر‪ ،‬وبهذه الطريقة نستطيع تكوين أي لون نريده من خليط األلوان‪،‬‬
‫بمعرفة الدرجات المطلوبة لكل لون‪.‬‬

‫>‪<html‬‬
‫>‪<body‬‬
‫>";)‪<h2 style="background-color:rgb(5,200,170‬‬
‫‪Welcome to CSS‬‬
‫>‪</h2‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪PAGE 178‬‬
‫الحظ انتاج لون آخر مختلف بطريقة درجات ‪.rgb‬‬
‫دالة ‪ rgba‬للشفافية مع اللون‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;)'‪body{ background:url('tree.jpg‬‬
‫{‪h1‬‬
‫;)‪background-color:rgba(0,255,0,0.3‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1‬‬
‫>‪Welcome to CSS<br‬‬
‫‪Hello‬‬
‫>‪</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أنه تم تكوين اللون األخضر باستخدام الدالة ‪ rgba‬ثم تم‬

‫استخدام القيمة ‪ 0.3‬وذلك ليكون اللون ظاهر بنسبة ‪ %30‬أي تكون‬
‫نسبة الشفافية ‪ ،%70‬وبفضل اهلل تم استخدام صورة في خلفية الوسم‬
‫‪ body‬لوضوح الشفافية ولتسهيل المفهوم لك سريعاً‪.‬‬
‫دالة ‪ hsl‬إلنتاج اللون ( درجة اللون‪ ،‬نسبة اإلشباع‪ ،‬نسبة السطوع )‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;)‪background:hsl(270,30%,40%‬‬
‫}‬
‫>‪</head‬‬
‫>‪</html‬‬
‫‪PAGE 180‬‬
‫دالة ‪ hsla‬إلنتاج اللون مع الشفافية‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬
‫;)‪background:hsla(180,90%,45%,0.5‬‬
‫}‬
‫>‪</head‬‬
‫>‪</html‬‬

mix-blend-mode ‫خليط المزيج‬
:‫ مثال بالكود! التالي‬darken ‫سوف نجرب مزج‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: red;
}
#i1{ mix-blend-mode: darken; }
</style>
</head>
<body>
<div>
<img id="i1" src="tree.jpg" width="150" height="100">
</div>
</body>
</html>
‫ عن الصورة التي‬،‫الحظ اختالف الصورة التي تم ضبط خليط المزج لها‬

‫ مع العلم ان القيمة االفتراضية لهذه الخاصية هي القيمة‬،‫لم يتم تنسيقها‬
.normal
PAGE 182
‫سوف نجرب مزج ‪ lighten‬مثال بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫;‪background-color: red‬‬
‫}‬
‫} ;‪#i1{ mix-blend-mode: lighten‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div‬‬
‫>"‪<img id="i1" src="tree.jpg" width="150" height="100‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ اختالف الصورة التي تم ضبط خليط المزج لها‪ ،‬عن الصورة التي‬
‫لم يتم تنسيقها‪.‬‬

:‫ مثال بالكود! التالي‬overlay ‫سوف نجرب مزج‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: rgba(255,0,0,0.5);
}
#i1{ mix-blend-mode: overlay; }
</style>
</head>
<body>
<div>
</div>
</body>
</html>

.‫ ورجاء انتبه! لوجود الشفافية‬،‫لم يتم تنسيقها‬
PAGE 184
‫سوف نجرب مزج ‪ screen‬مثال بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫}‬
‫} ;‪#i1{ mix-blend-mode: screen‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

:‫ مثال بالكود! التالي‬multiply ‫سوف نجرب مزج‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#i1{ mix-blend-mode: multiply; }
</style>
</head>
<body>
<div>
</div>
</body>
</html>

.‫لم يتم تنسيقها‬
PAGE 186
‫سوف نجرب مزج ‪ color-dodge‬مثال بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫;)‪background-color: rgba(255,0,0,0.5‬‬
‫}‬
‫} ;‪#i1{ mix-blend-mode: color-dodge‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫لم يتم تنسيقها‪ ،‬ورجاء انتبه! لوجود الشفافية‪.‬‬

:‫ مثال بالكود! التالي‬color-burn ‫سوف نجرب مزج‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: rgba(255,0,0,0.5);
}
#i1{ mix-blend-mode: color-burn; }
</style>
</head>
<body>
<div>
</div>
</body>
</html>

.‫ ورجاء انتبه! لوجود الشفافية‬،‫لم يتم تنسيقها‬
PAGE 188
‫سوف نجرب مزج ‪ difference‬مثال بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫}‬
‫} ;‪#i1{ mix-blend-mode: difference‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

:‫ مثال بالكود! التالي‬exclusion ‫سوف نجرب مزج‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#i1{ mix-blend-mode: exclusion; }
</style>
</head>
<body>
<div>
</div>
</body>
</html>

PAGE 190
‫سوف نجرب مزج ‪ hue‬مثال بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫}‬
‫} ;‪#i1{ mix-blend-mode: hue‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

:‫ مثال بالكود! التالي‬saturation ‫سوف نجرب مزج‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#i1{ mix-blend-mode: saturation; }
</style>
</head>
<body>
<div>
</div>
</body>
</html>

PAGE 192
‫سوف نجرب مزج ‪ color‬مثال بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫}‬
‫} ;‪#i1{ mix-blend-mode: color‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

:‫ مثال بالكود! التالي‬luminosity ‫سوف نجرب مزج‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#i1{ mix-blend-mode: luminosity; }
</style>
</head>
<body>
<div>
</div>
</body>
</html>

PAGE 194
isolation ‫العزل‬
:‫سوف نجرب مثال بالكود! التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
.a { background-color: rgb(0,255,0); }
#b { width: 200px; height: 210px; }
.c {
width: 100px; height: 100px;
border: 1px solid black; padding: 2px;
mix-blend-mode: difference;
}
#d { isolation: auto; }
#e { isolation: isolate; }
</style>
</head>
<body>
<div id="b" class="a">
<div id="d">
<div class="a c">auto</div>
</div>
<div id="e">
<div class="a c">isolate</div>
</div>
</div>
</body>
</html>

PAGE 196
‫المحتوي الزائد ‪Overflow‬‬

‫عند ضبط عرض وطول لوسم معين مثل ‪ p‬أو ‪ div‬أو أي وسم به‬
‫محتوي‪ ،‬ثم تم وضع نصوص أو عناصر حتى زادت عن الطول او العرض‬
‫المحددين لهذا الوسم‪ ،‬فحين إذاً يجب أن تتعرف على موضوع‬
‫‪ overflow‬لتستطيع التعامل بفهم مع هذه الحاالت‪.‬‬
‫رجاء انتبه!‪ ،‬وركز جيداً مع المثال التالي‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪div{ background:pink;padding:7px‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div‬‬
‫>‪<h2>Welcome to Overflow</h2‬‬
‫>‪<input><br><br‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

.‫ زاد بشكل تلقائي حسب ما بداخلها‬div ‫الحظ أن طول الـ‬

:‫ وركز جيداً مع المثال التالي‬،!‫ رجاء انتبه‬،‫واآلن‬
<!DOCTYPE html>
<html>
<head>
<style>
div{ height:115px;background:pink;padding:7px; }
</style>
</head>
<body>
<div>
<h2>Welcome to Overflow</h2>
<input><br><br>
<input><br><br>
<input><br><br>
</div>
</body>
</html>
PAGE 198
‫انتبه! ماذا حدث!؟‪ ،‬لقد حدث شيء غير مقبول‪ ،‬لقد خرجت العناصر من‬
‫الوسم ‪ div‬وكأنها ليست فيه‪ ،‬كما يوضح لنا لون خلفية الـ ‪ ،div‬ومن‬
‫هنا أحبابي تأتي أهمية موضوع الـ ‪.Overflow‬‬

overflow ‫خاصية المحتوي الزائد‬
‫ أي مرئي كما هو‬،visible ‫ هي‬،‫هذه الخاصية قيمتها االفتراضية‬
‫ والقيمة‬،‫ أي لو زاد المحتوي قم بإظهاره‬،‫واضح في المثال السابق‬
‫ تظهر شريط تمرير‬scroll ‫ والقيمة‬،‫ تخفي المحتوي الزائد‬hidden
‫ تجعل‬auto ‫ والقيمة‬،‫للتحكم في المحتوي الزائد أثناء عرض صفحة الويب‬
‫ واال فال‬،‫ أي لو هناك محتوي يظهر شريط التمرير‬،ً‫الموضوع اوتوماتيكيا‬
.‫ وكل هذا حسب اختيارك وتصميمك لصفحة الويب الخاصة بك‬،‫يظهر‬

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="overflow:hidden">
<input><br><br>
<input><br><br>
<input><br><br>
</div>
</body>
</html>
PAGE 200
‫الحظ أنه تم اختفاء المحتوي الزائد عن الطول‪ ،‬ولكن انتبه! فإذا ضغط‬
‫بالماوس لتجعل المؤشر داخل مربع النص‪ ،‬ثم ضغطت على زر ‪ tab‬من‬
‫الكيبورد أكثر من مرة‪ ،‬سيكون الشكل كما يلي‪:‬‬
‫ومن هنا تعرف أن المحتوي مخفي‪ ،‬لكنه مفعل بشكل طبيعي‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="overflow:scroll">
<input><br><br>
<input><br><br>
<input><br><br>
</div>
</body>
</html>
:‫الحظ شريط التمرير بعد تشغيل الصفحة كما بالشكل التالي‬
PAGE 202
‫حيث لو نزلت بشريط التمرير‪ ،‬تكون مثل الشكل التالي‪:‬‬
‫وهكذا‪ ،‬حتى تصل لما تريد‪.‬‬
‫ولو استخدمت القيمة ‪ auto‬تظهر شريط التمرير فقط لو هناك محتوي‬

‫زائد‪ ،‬ولو استخدمت القيمة ‪ visible‬لن تشعر باختالف‪ ،‬ألنها هي‬
‫االفتراضية‪ ،‬كما تم ذكر ذلك من قبل‪.‬‬

overflow-x ‫المحتوي األفقي الزائد‬
‫ نالحظ أنها ركزت على شريط‬overflow ‫عند التعامل مع خاصية‬
‫ ومع الخاصية‬،‫ ولكن اآلن‬،ً‫التمرير الرأسي وشريط التمرير األفقي معا‬
‫ وهي‬،‫ نستطيع التحكم في شريط التمرير األفقي فقط‬overflow-x
‫ أو‬scroll ‫ أو‬hidden ‫ أو‬auto ‫ سواء‬،‫تأخذ نفس القيم‬
.‫ االفتراضية‬visible

<!DOCTYPE html>
<html>
<head>
<style>
div{ width:200px;height:50px;background:pink; }
</style>
</head>
<body>
<div style="overflow-x:hidden">
Welcome_to_Overflow_X_With_Long_Word
</div>
<hr>
<div style="overflow-x:scroll">
Welcome_to_Overflow_X_With_Long_Word
</div>
</body>
</html>
PAGE 204
‫الحظ اختفاء المحتوي الزائد أفقياً‪ ،‬في الـ ‪ div‬األولي‪ ،‬وكأنه غير‬
‫موجود على الصفحة‪.‬‬
‫الحظ ظهور شريط التمرير األفقي فقط‪ ،‬وعدم ظهور شريط التمرير الرأسي‬
‫في الـ ‪ div‬الثانية‪.‬‬

overflow-y ‫المحتوي الرأسي الزائد‬
‫ تركز على شريطين تمرير رأسي‬overflow ‫عند التعامل مع خاصية‬
‫ ولكن‬،‫ تركز على شريط تمرير أفقي فقط‬overflow-x ‫ وخاصية‬،‫وأفقي‬
‫ نستطيع التحكم في شريط التمرير‬overflow-y ‫ ومع الخاصية‬،‫اآلن‬
‫ سواء‬،‫ تأخذ نفس القيم‬overflow-y ‫ والخاصية‬،‫الرأسي فقط‬
.‫ االفتراضية‬visible ‫ أو‬auto ‫ أو‬scroll ‫ أو‬hidden

<!DOCTYPE html>
<html>
<head>
<style>
div{ width:200px;height:60px;background:pink; }
</style>
</head>
<body>
<div style="overflow-y:hidden">
Welcome_to_Overflow_Y<br>
<input><br><input><br><input>
</div> <hr>
<div style="overflow-y:scroll">
Welcome_to_Overflow_Y<br>
<input><br><input><br><input>
</div>
</body>
</html>
PAGE 206
‫الحظ اختفاء المحتوي الزائد رأسياً‪ ،‬في الـ ‪ div‬األولي‪ ،‬وكأنه غير‬
‫موجود على الصفحة‪.‬‬
‫الحظ ظهور شريط التمرير الرأسي فقط‪ ،‬وعدم ظهور شريط التمرير األفقي‬
‫في الـ ‪ div‬الثانية‪.‬‬

Texts ‫النصوص‬
font-size ‫حجم الخط‬
‫ وللتجارب على‬،‫ للتحكم في حجم الخط كما تريد‬font-size ‫خاصية‬
:‫أحجام الخط تابع ما يلي بتركيز تام‬
<!DOCTYPE html>
<html>
<head></head>
<body>
<p style="font-size:xx-small">xx-small Font</p>
<p style="font-size:x-small">x-small Font</p>
<p style="font-size:small">Small Font</p>
<p>Font Size 16px or Medium ( Default )</p>
<p style="font-size:medium">Medium Font</p>
<p style="font-size:16px">Font Size 16px</p>
<p style="font-size:large">Large Font</p>
<p style="font-size:x-large">x-large Font</p>
<p style="font-size:xx-large">xx-large Font</p>
<p style="font-size:32px">Font Size 32px</p>
<p style="font-size:30pt">Font Size 30pt</p>
</body>
</html>
PAGE 208
‫الحظ أن الحجم االفتراضي هو ‪ 16px‬أو ‪ ،Medium‬والحظ أنه‬

‫يمكن كتابة اسم حجم الخط‪ ،‬مثل ‪ large‬و‪ small‬وغيرها‪ ،‬ويمكن‬
‫كتابة بقيمة ‪ px‬او ‪ pt‬أو حتى النسب ‪ %‬وغيرها‪.‬‬

‫نوع الخط ‪font-family‬‬
‫خاصية ‪ font-family‬للتحكم في نوع الخط‪ ،‬مثل نوع الخط ‪Arial‬‬
‫أو مثل نوع الخط ‪ Tahoma‬أو مثل نوع الخط ‪ Verdana‬أو‬
‫مثل نوع الخط ‪ Andalus‬أو مثل نوع الخط ‪ Consolas‬أو مثل نوعً‬
‫الخطً‪ Times New Roman‬أو مثل نوع الخط ‪ Impact‬وغيرها‬
‫الكثير والكثير من أنواع الخطوط المختلفة‪.‬‬
‫انتبه! فإن نوع الخط متوقف ومعتمد على الخطوط التي تم تنزيلها على‬
‫جهاز كمبيوتر الشخص الذي يقوم بتشغيل الصفحة‪ ،‬وأيضاً معتمد على‬
‫المتصفح الذي تم تشغيل الصفحة عليه لدعم نوع الخط‪ ،‬فمثالً لو طلبت‬
‫نوع الخط ‪ impact‬لصفحتك‪ ،‬ثم تم فتح الصفحة على جهاز ال يوجد‬
‫فيه النوع ‪ impact‬لن يتم العرض لصفحة الويب كما اختبرته‪.‬‬
‫انتبه! فإنه عند تخصيص نوع الخط لفقرة أو أي عنصر به كالم‪ ،‬يتم‬
‫استخدام الخاصية ‪ ،font-family‬ويتم اسناد اسم الخط لها‪ ،‬مثالً‬
‫‪ font-family:arial‬أو ‪،font-family:andalus‬‬
‫وأيضاً يمكن وضع " مثل "‪ ،font-family:"tahoma‬وأيضاً‬
‫يمكن استخدام ' مثل '‪ ،font-family:'consolas‬وهكذا‪ ،‬ولكن‬
‫انتبه! فلو اسم الخط به مسافات مثل ‪Times New Roman‬‬
‫فيجب استخدام " أو ' لكتابه اسم الخط‪.‬‬
‫‪PAGE 210‬‬
<!DOCTYPE html>
<html>
<head>
<style>
p{ font-size:30px; }
#p1{ font-family:andalus; }
#p2{ font-family:consolas; }
#p3{ font-family:"arial"; }
#p4{ font-family:'tahoma'; }
#p5{ font-family:"times new roman"; }
#p6{ font-family:impact, verdana, arial; }
</style>
</head>
<body>
<p id="p1">This is My Text</p>
</body>
</html>
‫ والذي‬#p6 ‫انتبه! فقبل عرض الكود الحظ وجود الكود الذي يعمل على‬
‫ فقد‬،‫ وبين كل نوع وآخر كوما‬،‫خصصنا له أكثر من قيمة نوع خط‬
‫ أي تم استخدام النوع‬،‫ هو البديل‬،‫ واإلجابة بفضل اهلل‬،‫ ما هذا!؟‬،‫تتساءل‬
‫ ولو لم يجده سيستخدم‬verdana ‫ ولو لم يجده سيستخدم‬impact
.‫ لباقي البدائل‬،‫ وهكذا‬arial
‫الحظ أنه تم تثبيت حجم الخط لجميع الفقرات ليكون ‪ 30px‬ومع ذلك‬
‫تالحظ اختالف نقش كل خط عن اآلخر‪ ،‬ومن أجل ذلك رجاء انتبه! فإنها‬
‫معلومة هامة جداً‪ ،‬ألنها تؤثر على تصميم الموقع بالكلية‪ ،‬ألن كل نوع‬
‫خط له نقش مختلف‪ ،‬فهناك نقش كبير‪ ،‬ونقش صغير‪ ،‬ونقش ثقيل‪ ،‬وهكذا‪،‬‬
‫فيختلف العرض حسب النقش‪.‬‬
‫‪PAGE 212‬‬
font- kerning ‫تقنين الخط‬
،‫ للتحكم في المسافات بين الحروف لكل خط‬font-kerning ‫خاصية‬
kerning ‫ولكن رجاء انتبه! فالبد أن يدعم نوع الخط المستخدم بيانات‬
.‫ فلن يكون هناك أي تأثير‬،‫ وإذا كانت غير مدعومة‬،‫حتى تري التأثير‬

<!DOCTYPE html>
<html>
<head>
<style>
p{ font-size:30px; font-family:serif; }
</style>
</head>
<body>
<p style="font-kerning:auto;">
AV & Wa for Test Auto Kerning
</p>
<p style="font-kerning:normal;">
AV & Wa for Test Normal Kerning
</p>
<p style="font-kerning:none;">
AV & Wa for Test None Kerning
</p>
</body>
</html>

‫انتبه! فإن القيمة ‪ auto‬هي القيمة االفتراضية‪ ،‬والحظ أن االختالف‬

‫ضئيل جداً‪ ،‬وذلك ألن المسافات بين الحروف تعتبر شيء قليل‪ ،‬ولذلك تم‬
‫استخدام الحروف ‪ AV‬والحروف ‪ Wa‬ليظهر التأثير في بداية كل فقرة‪،‬‬
‫ولو تم استخدام النوع ‪ arial‬بدالً من النوع ‪ serif‬سيكون العرض‬
‫كما بالشكل التالي‪:‬‬
‫ومن هنا نالحظ اختالف الـ ‪ Kerning‬بين النوع ‪ serif‬والنوع‬

‫‪ arial‬كما هو واضح‪ ،‬بفضل اهلل‪.‬‬
‫‪PAGE 214‬‬
‫نمط الخط ‪font- style‬‬
‫خاصية ‪ font-style‬للتحكم في نمط الخط‪ ،‬فهل هو مائل ‪،italic‬‬
‫أم عادي ‪ ،normal‬أم منحرف ‪ ،Oblique‬وسوف نجرب فيما يلي‪:‬‬

‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<h1 style="font-style:normal">Normal Text</h1‬‬
‫>‪<h1 style="font-style:italic">Italic Text</h1‬‬
‫>‪<h1 style="font-style:oblique">Oblique Text</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫انتبه! فإن القيمة ‪ normal‬هي االفتراضية‪ ،‬ولو اردت جعل الخط مائل‬
‫يمكنك استخدام ‪ italic‬أو ‪.Oblique‬‬

font- weight ‫ثقل الخط‬
‫ فهل هو عادي بالقيمة‬،‫ للتحكم في ثقل الخط‬font-weight ‫خاصية‬
100 ‫ أو رقم‬bolder ‫ أو أثقل من‬،bold ‫ أو ثقيل‬،normal
‫ ولكن االختالف سيكون غير‬،‫ وغير ذلك‬،900 ‫ وحتى‬300 ‫ او‬200 ‫او‬
:‫ وسوف نجرب فيما يلي‬،‫ وحسب نوع الخط‬،‫واضح إال مع العادي والثقيل‬
<!DOCTYPE html>
<html>
<head>
<style>p{font-size:20px;}</style>
</head>
<body>
<p style="font-weight:normal">Normal Text</p>
<p style="font-weight:700">Bold Text</p>
<p style="font-weight:bold">Bold Text</p>
<p style="font-weight:bolder">Bolder Text</p>
<p style="font-weight:lighter">Lighter Text</p>
</body>
</html>
PAGE 216
‫تنوع الخط ‪font- variant‬‬
‫خاصية ‪ font-variant‬للتحكم في تنوع حالة األحرف للخط‪ ،‬وسوف‬
‫يتضح لك إن شاء اهلل‪ ،‬بعد كتابة الكود ورؤية الصفحة‪ ،‬كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>"‪<h1 style="font-variant:normal‬‬
‫‪Welcome to Egypt - Normal‬‬
‫>‪</h1‬‬
‫>"‪<h1 style="font-variant:small-caps‬‬
‫‪Welcome to Egypt - Small-Caps‬‬
‫>‪</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫صناعة الخط بالمحدد ‪@font-face‬‬
‫سوف نتعرف بفضل اهلل على المحدد ‪ @font-face‬لصناعة الخطوط‪،‬‬
‫وله قوسين مجموعة } { ليكتب بينهم أكواد صناعة الخطوط‪.‬‬
‫وفي البداية البد أن نعلم أن الخطوط عبارة عن مجموعة ملفات‪ ،‬وهذه‬

‫الملفات‪ ،‬مثل أي ملفات طبيعية‪ ،‬حيث لها امتداد‪ ،‬وعند العمل على الويب‪،‬‬
‫نستخدم بعض االمتدادات‪ ،‬وأشهر هذه االمتدادات هو االمتداد ‪،TTF‬‬
‫ويوجد أيضاً االمتداد ‪ ،WOFF‬واالمتداد ‪ ،WOFF 2.0‬واالمتداد‬
‫‪ ،OTF‬واالمتداد ‪ ،SVG‬واالمتداد ‪.EOT‬‬
‫أيضاً كل متصفح يقبل أنواع خطوط معينة‪ ،‬فلذلك يرجى مراعاة دعم‬
‫المتصفحات ألنواع الخطوط‪.‬‬
‫ولصناعة خط جديد‪ ،‬يتم انشاء محدد ‪ @font-face‬ثم بداخله يتم‬

‫ضبط الخاصية ‪ font-family‬على اسم جديد تماماً‪ ،‬والذي سوف‬
‫تستخدمه فيما بعد‪ ،‬إذا اردت استخدام هذا الخط‪ ،‬ويتم أيضاً ضبط‬
‫الخاصية ‪ src‬على مسار ملف الخط الذي تريده‪.‬‬
‫واآلن للتجربة‪ ،‬سوف نقوم بتحميل خط ‪ Font‬صالح لصفحات الويب من‬

‫االنترنت باسم ‪ ،Arbutus‬والملف هذا الخط اسمه باالمتداد هو‬
‫‪ ،Arbutus-Regular.ttf‬والتجربة بفضل اهلل كما يلي‪:‬‬
‫‪PAGE 218‬‬
<!DOCTYPE html>
<html>
<head>
<style>
@font-face{
font-family:MyNewFont;
src:url('Arbutus-Regular.ttf');
}
</style>
</head>
<body>
<h1 style="font-family:MyNewFont;">
Welcome to My New Font
</h1>
</body>
</html>
:‫ مثل الكود التالي‬،‫ولو أردنا اسناد ملفات أخري نستخدم كوما كفاصلة‬
src:url('Arbutus-Regular.ttf'),
url('Arbutus-Regular.woff'),
url('Arbutus-Regular.woff2');

@import ‫استيراد الخط بالمحدد‬
‫@ هو في األساس الستيراد بعض الروابط أو بعض‬import ‫المحدد‬
‫ وبداخلها الرابط‬url ‫@ ثم‬import ‫ حيث يتم كتابة المحدد‬،‫الملفات‬
‫ من خطوط جوجل‬font ‫ واآلن سوف نستورد خط‬،‫الذي نريد استيراده‬
:‫ حيث يوجد خطوط متعددة في الرابط التالي‬،‫ونستخدمه‬
https://fonts.google.com/
:‫ من الرابط التالي‬Charmonman ‫واآلن سوف اختار خط اسمه‬
https://fonts.google.com/specimen/Charmonman
‫ ثم الضغط على‬،Select This Font ‫واآلن سوف أضغط على‬
‫ فيظهر رابط‬،@IMPORT ‫ ثم اختيار‬،Family Selected
:‫ وهو كما يلي‬،‫االستيراد جاهز‬
<style>
@import url('https://fonts.googleapis.com/css?family=Charmonman');
</style>
:‫ وهو كما يلي‬،‫ويوجد كود االستخدام‬

font-family: 'Charmonman', cursive;
:‫وبعد االستخدام تكون التجربة مثل الشكل التالي‬
@import‫@ و‬font-face ‫ولكن انتبه! فإذا استخدمت المحددين‬

.‫@ هو الذي باألعلى ليعمل‬import ‫ أجعل المحدد‬،ً‫معا‬
PAGE 220
‫ضبط حجم الخط ‪font-size-adjust‬‬
‫خاصية ‪ font-size-adjust‬للتحكم في ضبط الخط عند عدم تواجد‬
‫النوع المحدد‪ ،‬وهذه الخاصية مفيدة ألنه يتم تحديد وضوح الخطوط ‪،‬‬
‫خصوصاً في حالة الحروف الصغيرة‪ ،‬أكثر من األحرف الكبيرة‪ ،‬ويمكن أن‬
‫تصبح القراءة بها مشكلة عندما يكون نوع الخط األول غير متاح‪ ،‬ويكون‬
‫بديلها نسبة أبعاده مختلفة بشكل كبير‪ ،‬أي نسبة حجم األحرف الصغيرة إلى‬
‫حجم الخط‪.‬‬
‫والستخدام هذه الخاصية بطريقة متوافقة مع المتصفحات التي ال تدعم‬

‫ضبط حجم الخط ‪ ،font-size-adjust‬يتم تحديدها كرقم يتم ضرب‬
‫خاصية حجم الخط ‪ font-size‬به‪ ،‬وهذا يعني أن القيمة المحددة‬
‫للموقع يجب أن تكون نسبة العرض إلى االرتفاع لنوع الخط األول‪ ،‬واآلن‬
‫دعونا نجرب لنتفهم األمر بفضل اهلل‪.‬‬
‫وحتى نجرب بمثال معتمد‪ ،‬احضرت لكم مثال من موقع ‪mozilla.org‬‬

‫الختبار خاصية ‪ ،font-size-adjust‬وهذا المثال به فقرات‪،‬‬
‫ومكتوب بداخل كل فقرة نص يعبر عن التجربة‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
.times {
font-family: Times, serif;
font-size: 10px;
}
.verdana {
font-family: Verdana, sans-serif;
font-size: 10px;
}
.adjtimes {
font-family: Times, sans-serif;
font-size-adjust: 0.58;
font-size: 10px;
}
</style>
</head>
<body>
<p class="times">
This text uses the Times font (10px), which is hard to
read in small sizes.</p>
<p class="verdana">
This text uses the Verdana font (10px), which has
relatively large lowercase letters.</p>
<p class="adjtimes">
This is the 10px Times, but now adjusted to the same
aspect ratio as the Verdana.</p>
</body>
</html>
PAGE 222
‫ولو تم إزالة تنسيق ‪ css‬بالكامل‪ ،‬سوف يكون ناتج صفحة الويب كما‬
‫بالشكل التالي‪:‬‬
‫إذاً رجاء انتبه! فإن الخاصية ‪ font-size-adjust‬في ‪CSS‬‬

‫لضبط حجم الخط أثناء العرض‪ ،‬حيث يجب أن يكون تم اختياره على أساس‬
‫طول األحرف الصغيرة ‪ lowercase‬بديالً عن طول األحرف الكبيرة‬
‫‪ uppercase‬وهذا يفيد لوضوح الخطوط وسهولة قراءتها حتى ولو‬
‫كانت كلها حروف صغيرة‪.‬‬

‫تمدد الخط ‪font- stretch‬‬
‫خاصية ‪ font- stretch‬لتمدد الخط‪ ،‬وهي تعرض لبعض أنواع‬
‫الخطوط أوجه إضافية‪ ،‬بحيث تكون فيها األحرف أضيق من الوجه العادي‪،‬‬
‫أي وجوه مكثفة‪ ،‬أو تكون أوسع من الوجه العادي أي وجوه موسعة‪،‬‬
‫ويمكنك استخدام امتداد الخط ‪ font- stretch‬لتحديد وجه مكثف أو‬
‫موسع من هذه الخطوط‪ ،‬ولكن انتبه! فإذا كان نوع الخط الذي تستخدمه‬
‫ال يعرض الوجوه المكثفة أو الموسعة‪ ،‬فلن يكون لهذه الخاصية أي تأثير‪.‬‬
‫حيث تأخذ الخاصية ‪ ،font- stretch‬مجموعة من القيم‪ ،‬فالقيمة‬

‫‪ normal‬لعدم التمدد وهي االفتراضية للخاصية‪ ،‬والقيمة ‪expanded‬‬
‫للتوسع‪ ،‬والقيمة ‪ extra-expanded‬للتوسع الكبير‪ ،‬والقيمة‬
‫‪ ultra-expanded‬لتوسع كبير جداً‪ ،‬والقيمة ‪condensed‬‬
‫للكثافة‪ ،‬والقيمة ‪ extra-condensed‬لكثافة عالية‪ ،‬والقيمة‬
‫‪ ultra-condensed‬لكثافة عالية جداً‪ ،‬وهناك أيضاً القيمة‬
‫‪ semi-expanded‬لعمل شبه توسع‪ ،‬والقيمة ‪semi-condensed‬‬
‫لعمل شبه تكثيف‪.‬‬
‫وحتى نجرب بمثال معتمد‪ ،‬احضرت لكم مثال من موقع ‪mozilla.org‬‬

‫الختبار خاصية ‪ ، font-stretch‬وهذا المثال به فقرات‪ ،‬ومكتوب‬
‫بداخل كل فقرة نص يعبر عن التجربة‪.‬‬
‫‪PAGE 224‬‬
:‫ كما يلي‬HTML ‫كود! حيث أكواد‬
<div>
<p class="condensed">an elephantine lizard</p>
<p class="normal">an elephantine lizard</p>
<p class="expanded">an elephantine lizard</p>
</div>
:‫ كما يلي‬CSS ‫وأكواد‬
@font-face {
src:url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
font-family:'LeagueMonoVariable';
font-style: normal;
}
.container {
border: 10px solid #f5f9fa;
padding: 0 1rem;
font: 1.5rem 'LeagueMonoVariable', sans-serif;
}
.condensed {
font-stretch: 50%;
}
.normal {
font-stretch: 100%;
}
.expanded {
font-stretch: 200%;
}

:‫ويكون الناتج من الموقع مثل الشكل التالي‬
‫ لتمدد‬font-stretch ‫وإذا اردت قراءة تفاصيل أكثر عن الخاصية‬

:‫ يمكنك الدخول على الرابط التالي‬،‫الخط‬
https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch
‫ يشرح هذه‬developer.mozilla.org ‫وهو رابط من موقع‬
.‫الخاصية بالتفصيل‬
PAGE 226
line- height ‫طول السطر‬
:‫ والتجربة كما يلي‬،‫ للتحكم في طول كل سطر‬line- height ‫خاصية‬

<!DOCTYPE html>
<html>
<head>
<style>
p{
line-height:50px;
}
</style>
</head>
<body>
<p>
The web is one of the best
areas in which we can develop,
because it benefits in life in general.
</p>
</body>
</html>

‫وبعد تشغيل الصفحة بعرض قليل تظهر كما بالشكل التالي‪:‬‬
‫الحظ أنه تم تقليل عرض نافذة المتصفح‪ ،‬لتظهر الفقرة على أكثر من‬
‫سطر بشكل متعمد‪.‬‬
‫الحظ أن كل سطر أصبح طوله ‪ 50px‬ألنه تم ضبط خاصية طول‬

‫السطر ‪ line-height‬على القيمة ‪.50px‬‬
‫الحظ أن الـ ‪ 50px‬للسطر كله‪ ،‬أي ما فوقه وما تحته والكالم‪.‬‬
‫‪PAGE 228‬‬
‫خاصية الخط ‪font‬‬
‫خاصية الخط ‪ ،font‬تجمع القيم المتعلقة بها‪ ،‬حيث يتم للخط ضبط‪،‬‬
‫نمط ‪ ،font-style‬واختالف ‪ ،font-variant‬وثقل ‪،font-weight‬‬
‫وحجم مع طول سطر ‪ ،font-size/line-height‬ونوع الخط‬
‫‪ ،font-family‬كلهم في خاصية واحدة‪ ،‬وهي خاصية ‪ ،font‬وللتجربة‬
‫تابع المثال التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪p‬‬
‫;‪font:italic small-caps bold 40px/50px impact‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<p>Welcome to Font Attribute</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

text-align ‫محاذاة النص‬
‫ تجعلك تتحكم في مكان الخط‬،text-align ‫خاصية محاذاة الخط‬
‫ الى آخر‬،‫ أم في المنتصف‬،‫ أم على اليسار‬،‫ فهل هو على اليمين‬،‫كتنسيق‬
.left ‫ والقمة االفتراضية لها هي‬،‫هذه األنواع المشهورة من المحاذاة‬
<!DOCTYPE html>
<html>
<head></head>
<body>
<p style="text-align:left">
Welcome to Text-Align Attribute
</p>
<p style="text-align:right">
</p>
<p style="text-align:center">
</p>
<p style="text-align:justify">
</p>
</body>
</html>
PAGE 230
‫الحظ في الفقرة األولي ‪ left‬وهو االفتراضي‪ ،‬والفقرة الثانية ‪right‬‬

‫حيث المحاذاة على اليمين‪ ،‬والفقرة الثالثة ‪ center‬حيث النص في‬
‫المنتصف‪ ،‬والفقرة الرابعة ‪ justify‬حيث تم محاذاة النص فأصبح كل‬
‫سطر موازي لباقي األسطر‪.‬‬
‫انتبه! فإنه يوجد خاصية ‪ text-justify‬لتحديد نوع المحاذاة‪ ،‬وتأخذ‬
‫القيمة ‪ inter-word‬عن المحاذاة بين الكلمات‪ ،‬وتأخذ القيمة‬
‫‪ inter-character‬عن المحاذاة بين الحروف‪.‬‬

text-align-last ‫محاذاة آخر النص‬
‫ حيث تقوم بعمل‬،text-align-last ‫خاصية محاذاة آخر الخط‬
‫ ولكن آخر سطر في الفقرة تختلف‬،‫محاذاة عادية للنص كما تعلمنا من قبل‬
:‫ والتجربة بفضل اهلل كما يلي‬،‫محاذاته عما قبلة‬
<!DOCTYPE html>
<html>
<head></head>
<body>
<p style="text-align:justify;text-align-last:center">
Welcome to Text-Align-Last Attribute for Last Lines
</p>
</body>
</html>
.‫ فيما عدا آخر سطر في المنتصف‬،‫الحظ محاذاة الفقرة‬
PAGE 232
<!DOCTYPE html>
<html>
<head></head>
<body>
<p style="text-align:justify;text-align-last:right">
</p>
</body>
</html>
‫ ويمكنك جعله في‬،‫ فيما عدا آخر سطر في اليمين‬،‫الحظ محاذاة الفقرة‬
.‫ أو غير ذلك‬،‫اليسار‬

text-indent ‫المسافة البادئة للنص‬
،text-indent ‫يمكن ضبط قيمة للمسافة البادئة للفقرات بالخاصية‬
:‫ للثانية كما يلي‬150px‫ لألولي و‬30px ‫والحظ مسافة فقرات بادئة‬
<!DOCTYPE html>
<html>
<head></head>
<body>
<p style="text-indent:30px;">
Welcome to Text-Indent Attribute
</p>
<p style="text-indent:150px;">
</p>
</body>
</html>
PAGE 234
‫التفاف النص ‪word wrap‬‬
‫خاصية ‪ ،white-space‬فعند كتابة فقرة كبيرة يتم عمل التفاف‬
‫للنص ‪ word wrap‬بشكل تلقائي واضح‪ ،‬عند تصغير عرض نافذة‬
‫المتصفح‪ ،‬ودور الخاصية ‪ white-space‬هي التحكم في هذا النص‬
‫الزائد‪ ،‬والقيمة االفتراضية لها هي ‪.normal‬‬
‫ويمكنك منع التفاف النص بالقيمة ‪ ،nowrap‬فيظهر شريط التمرير‬
‫‪ scroll‬األفقي بأسفل الصفحة‪ ،‬لتتحكم منه في قراءة النص‪ ،‬كما بالمثال‬
‫التالي‪:‬‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>";‪<p style="white-space:nowrap‬‬
‫‪Welcome to White-Space Attribute‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ فتظهر‬،pre ‫ لتكون مثل الوسم‬pre ‫ويمكنك أيضاً ضبطها على القيمة‬
:‫ كما يلي‬،‫بما قمت أنت بكتابته‬
<!DOCTYPE html>
<html>
<head></head>
<body>
<p style="white-space:pre;">
Welcome to White-Space Attribute
</p>
</body>
</html>
PAGE 236
‫ويمكنك استخدام ‪ pre-wrap‬ليتم االحتفاظ بتسلسل مساحة بيضاء‪،‬‬
‫ويتم تقسيم السطور عند السطر الجديد بالوسم ‪ ،br‬وعند الضرورة لملء‬
‫مربعات السطور‪ ،‬وباختصار‪ ،‬الحفاظ على الـ ‪ pre‬مع المسافات والتفاف‬
‫النص‪ ،‬كما بالمثال التالي‪:‬‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>";‪<p style="white-space:pre-wrap‬‬
‫‪Welcome<br>to White-Space Attribute‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ ليتم إنهاء تسلسل الفراغات‬،pre-line ‫ويمكنك استخدام القيمة‬
‫ وعند‬،br ‫ ويتم تقسيم السطور عند الوسم‬،‫البيضاء في بداية السطور‬
‫ مع‬pre ‫ الحفاظ على الـ‬،‫ وباختصار‬،‫الضرورة لملء مربعات الخطوط‬
:‫ كما بالمثال التالي‬،‫حذف المسافات الموجودة به‬
<!DOCTYPE html>
<html>
<head></head>
<body>
<p style="white-space:pre-line;">
Welcome<br>to White-Space Attribute
</p>
</body>
</html>
PAGE 238
‫انتبه! فإنه إذا تم استخدام القيمة ‪ ،nowrap‬وتخصيص عرض قليل‬
‫وال يكفي للنص‪ ،‬سوف يخرج النص خارج الفقرة‪ ،‬او الوسم‪ ،‬وللتوضيح‬
‫سوف نخصص خلفية للفقرة ليظهر خروج النص‪ ،‬كما بالمثال التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪p‬‬
‫;‪background:pink‬‬
‫;‪white-space:nowrap‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<p‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

:‫ كما يلي‬،‫ تفيد عند استخدام كلمة كبيرة‬word-wrap ‫خاصية‬
<!DOCTYPE html>
<html>
<head>
<style>p{ width:150px;background:pink; }</style>
</head>
<body>
<p>
Welcome to Word-Wrap Attribute
Welcome_to_Word_Wrap_Attribute_With_Long_Word
</p>
<hr>
<p style="word-wrap:break-word;">
</p>
</body>
</html>
PAGE 240
:‫ كما يلي‬،‫ تفيد عند استخدام كلمة كبيرة‬word-break ‫خاصية‬
<!DOCTYPE html>
<html>
<head>
<style>p{ width:150px;background:pink; }</style>
</head>
<body>
<p style="word-break:keep-all;">
Welcome to Word-Break Attribute
</p>
<p style="word-break:break-all;">
Welcome to Word-Break Attribute
</p>
</body>
</html>

word-spacing ‫مسافات بين الكلمات‬
،‫ تثبت مسافات بين كل كلمة وأخري‬word-spacing ‫الخاصية‬
:‫ سوف يتم استخدام المثال التالي بفضل اهلل‬،‫وللتجربة‬
<!DOCTYPE html>
<html>
<head></head>
<body>
<p style="word-spacing:25px;">
Welcome to Word-Spacing Attribute
</p>
</body>
</html>
.‫ بين كل كلمة وأخري‬25px ‫الحظ أنه تم تثبيت‬
PAGE 242
‫مسافات بين الحروف ‪letter-spacing‬‬
‫الخاصية ‪ letter-spacing‬تثبت مسافات بين كل حرف وأخر‪،‬‬
‫وللتجربة‪ ،‬سوف يتم استخدام المثال التالي بفضل اهلل‪:‬‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>";‪<p style="letter-spacing:7px‬‬
‫‪Welcome to Letter-Spacing Attribute‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أنه تم تثبيت ‪ 7px‬بين كل حرف وأخر‪.‬‬

text-overflow ‫خاصية النص الزائد‬
،overflow ‫ ثم اخفاؤه بخاصية‬،‫وهي تستخدم عند زيادة النص‬
‫ ويمكن‬،‫ حيث تقص او تخفي النص‬،‫ هي االفتراضية لها‬clip ‫والقيمة‬
‫ ويمكن‬،‫" في آخر النص‬..." ‫ إلظهار نقاط‬ellipsis ‫اعطاؤها القيمة‬
، )‫ فقط‬Firefox ‫كتابة نص ليظهر بدالً من النقاط (النص لمتصفح‬
:‫ كما يلي‬،‫والتجربة بالمثال التالي سوف تبين لنا هذا بفضل اهلل‬

<!DOCTYPE html>
<html>
<head>
<style>
p{
background:yellow;
width:50px;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<p style="text-overflow:ellipsis">
Welcome to Text Overflow
</p>
</body>
</html>
PAGE 244
‫الحظ ظهور نقاط "‪ "...‬بدالً من النص المختفي‪.‬‬
‫الحظ أننا لم نجرب القيمة ‪ clip‬ألنها هي االفتراضية‪.‬‬
‫‪.Firefox‬‬ ‫الحظ لم نجرب قيمة نص بديل ألنها حتى اآلن تعمل فقط على‬

text-decoration-line ‫خط ديكور النص‬
:‫ كما يلي‬،‫ ونضع به خط‬،‫يمكن من خالل هذه الخاصية عمل زخرفة للنص‬

<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-decoration-line:underline;
}
</style>
</head>
<body>
<h1>My Text with Decoration</h1>
</body>
</html>
.underline ‫ بالقيمة‬،‫الحظ أن يوجد خط تحت النص‬
PAGE 246
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h1‬‬
‫;‪text-decoration-line:line-through‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>My Text with Decoration</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أنه يوجد خط في منتصف النص‪ ،‬بسبب القيمة ‪line-‬‬

‫‪.through‬‬

<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-decoration-line:overline;
}
</style>
</head>
<body>
</body>
</html>
.overline ‫ بالقيمة‬،‫الحظ أن يوجد خط فوق النص‬
PAGE 248
‫واآلن انتبه! فإنه مع التركيز مع األمثلة السابقة‪ ،‬يوجد سؤال البد أن‬
‫تسأله لنفسك‪ ،‬وهو‪ ،‬كيف أجمع بينهم!؟‪ ،‬والجواب بفضل اهلل كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h1‬‬
‫;‪text-decoration-line:overline line-through underline‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>My Text with Decoration</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أنه تم اجمع بينهم واستخدامهم الثالثة لنفس النص‪ ،‬عن طريق‬
‫مسافة فقط بين كل قيمة وأخري‪ ،‬بفضل اهلل بسهولة‪.‬‬

text-decoration-color ‫لون ديكور النص‬
:‫ كما يلي‬،‫يمكن تغيير لون زخرفة للنص عن طريق هذه الخاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-decoration-line:overline underline;
text-decoration-color:red;
}
</style>
</head>
<body>
</body>
</html>
.text-decoration-color ‫ بالخاصية‬،‫الحظ تغير لون الديكور‬
PAGE 250
text-decoration-style ‫شكل ديكور النص‬
:‫ كما يلي‬،‫يمكن تغيير شكل زخرفة النص عن طريق هذه الخاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
h2{
text-decoration-line:underline;
text-decoration-color:blue;
}
</style>
</head>
<body>
<h2 style="text-decoration-style:solid">
MY Text with Decoration</h2>
<h2 style="text-decoration-style:double">
<h2 style="text-decoration-style:dashed">
<h2 style="text-decoration-style:dotted">
<h2 style="text-decoration-style:wavy">
</body>
</html>

‫ حيث استخدمنا‬،‫ بفضل اهلل‬style ‫الحظ أنه تم استخدام أكثر من نمط‬

،double ‫ والخط المزدوج‬،‫ وهو االفتراضي‬solid ‫الخط العادي‬
‫ وخط مموج‬،dotted ‫ وخط به نقط‬،dashed ‫وخط به تقطيع‬
.wavy
PAGE 252
‫خاصية ديكور النص ‪text-decoration‬‬
‫خاصية ديكور النص ‪ ،text-decoration‬تجمع القيم المتعلقة بها‪،‬‬
‫حيث يتم ضبط‪ ،‬خط ديكور النص ‪ ،text-decoration-line‬ويتم‬
‫ضبط اللون لديكور النص ‪ ،text-decoration-color‬ويتم ضبط‬
‫النمط لديكور النص ‪ ،text-decoration-style‬كلهم في خاصية‬
‫واحدة‪ ،‬وسوف نجرب هذا بفضل اهلل فيما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h2‬‬
‫;‪text-decoration:underline overline red dashed‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h2>MY Text with Decoration</h2‬‬
‫>‪</body‬‬
‫>‪</html‬‬

text-transform ‫تحوالت النص‬
‫ مثالً حالة‬،‫هي خاصية تمنحك التحكم في تقلبات أو تحوالت النصوص‬
‫ أو االثنين‬lowercase ‫ والصغيرة‬uppercase ‫الحروف الكبيرة‬
‫ وبفضل اهلل المثال التالي يبين ذلك‬،camelCase ‫معاً بضابط طريقة‬
:‫ كما يلي‬،‫ ولكن انتبه! رجاء التركيز في المثال‬،‫بوضوح‬
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2 style="text-transform:uppercase">
hassouna academy
</h2>
<h2 style="text-transform:lowercase">
HASSOUNA ACADEMY
</h2>
<h2 style="text-transform:capitalize">
hassouna academy
</h2>
<h2 style="text-transform:capitalize">
hAssoUNa acADemy
</h2>
</body>
</html>
PAGE 254
‫الحظ أن النص األول كانت حروف صغيرة وتم تحويلها الى حروف كبيرة‪،‬‬
‫عن طريق القيمة ‪.uppercase‬‬
‫الحظ أن النص الثاني كانت حروف كبيرة وتم تحويلها الى حروف صغيرة‪،‬‬
‫عن طريق القيمة ‪.lowercase‬‬
‫الحظ أن النص الثالث به حروف صغيرة وتم تحويلها ‪،camelCase‬‬

‫عن طريق القيمة ‪.capitalize‬‬
‫الحظ أن القيمة ‪ capitalize‬ال تمس الحروف الموجودة بالمنتصف‪،‬‬

‫وتعدل أول حرف من كل كلمة فقط‪.‬‬

‫ظل النص ‪text-shadow‬‬
‫يستخدم ظل النص او ‪ text-shadow‬في تحسين شكل النص‪ ،‬ولفت‬
‫االنتباه له‪ ،‬ولكن هيا بنا نتفهم على بعض األمور في البداية‪:‬‬
‫• الظل هو نسخة ثانية من النص‪ ،‬وتكون خلف النسخة األصلية‬
‫• يتم تحديد قيمة أفقية ‪ x‬لتحديد موضع الظل أفقياً‬
‫• يتم تحديد قيمة رأسية ‪ y‬لتحديد موضع الظل رأسياً‬
‫• يتم تحديد قيمة ‪ ،radius‬بحيث لو زادت يكون ظل مطموس وغير واضح‬
‫• يتم تحديد اللون‪ ،‬الذي سوف يظهر الظل به‬
‫واآلن هيا نجرب‪ ،‬كما بالمثال التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h1‬‬
‫;‪text-shadow:2px 2px red‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1‬‬
‫‪Hassouna Academy‬‬
‫>‪</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪PAGE 256‬‬
‫الحظ انشاء ظل أحمر‪ ،‬وتحريكه أفقياً ‪ 2px‬ورأسياً ‪.2px‬‬
‫واآلن بالمثال التالي سوف يتضح إن شاء اهلل أن الظل نسخة من النص‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h1‬‬
‫;‪text-shadow:35px 25px red‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1‬‬
‫‪Hassouna Academy‬‬
‫>‪</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ فظهر‬،25px ً‫ ورأسيا‬35px ً‫ وإبعاده أفقيا‬،‫الحظ انشاء ظل أحمر‬

.‫وكأنه نص آخر‬
:‫ كما يلي‬،‫ ليظهر في االتجاه العكسي‬،‫ويمكن تحريكه بقيمة سالبة‬

<!DOCTYPE html>
<html>
<head>
<style>
h1{
padding:20px;
text-shadow:-15px -10px red;
}
</style>
</head>
<body>
<h1>Hassouna Academy</h1>
</body>
</html>
PAGE 258
‫ويمكن زيادة قيمة ‪ radius‬للتشويش‪ ،‬كما يلي‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h1‬‬
‫;‪text-shadow:9px 10px 11px blue‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>Hassouna Academy</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أن ظل النص تحرك أفقياً بقيمة ‪.9px‬‬
‫الحظ أن ظل النص تحرك رأسياً بقيمة ‪.10px‬‬
‫الحظ أن ظل النص تم التشويش علية بقيمة ‪.11px‬‬
‫انتبه! فإنه يمكنك إنشاء ظل جميل للنص‪ ،‬عن طريق إنشاء أكثر من ظل‬
‫بفضل اهلل وحده‪ ،‬فكر قليالً في القدرة التي أعطاها لك اهلل رب العالمين‬
‫في التفكير والتمييز بفضل اهلل‪ ،‬سوف تجد أنه يمكنك أن تصنع أكثر من ظل‪،‬‬
‫عن طريق انشاء ظل أول‪ ،‬ثم ظل ثاني‪ ،‬ثم ظل ثالث‪ ،‬وهكذا‪ ،...‬ولكن‬
‫السؤال الذي يطرح نفسه هنا‪ ،‬هو‪ ،‬كيف أفصل بينهم!؟‪ ،‬واإلجابة هي بكل‬
‫سهولة بفضل اهلل عن طريق كوما "‪ ",‬بين كل ظل وآخر‪ ،‬وكما قلت لك‬
‫انتبه! فال تنسي فضل اهلل عليك في أن تفهم‪ ،‬وتفكر‪ ،‬والمثال كما يلي‪:‬‬
‫‪PAGE 260‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h1‬‬
‫‪text-shadow:9px 10px 7px gray,‬‬
‫‪15px 15px 7px yellow,‬‬
‫;‪20px 20px 7px #71b2c7‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>Hassouna Academy</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ انشاء ظل رمادي‪ ،‬ثم ظل أصفر أبعد منه‪ ،‬ثم ظل من مشتقات األزرق‬
‫ابعد من األصفر‪ ،‬فظهر الشكل كما هو واضح بالصورة بفضل اهلل‪.‬‬

hyphens ‫الواصالت‬
‫ كيفية ربط الكلمات عند التفاف النص عبر‬hyphens ‫تحدد الخاصية‬
‫ أو استخدام‬،none ‫ ويمكنك منع الواصلة بالقيمة‬،‫أسطر متعددة‬
‫ أو‬،manual ‫الواصلة في نقاط محددة يدوياً داخل النص بالقيمة‬
،auto ‫السماح للمتصفح بإدخال الواصالت تلقائياً عند الضرورة بالقيمة‬
:‫وسوف نجرب بالكود! التالي إن شاء اهلل‬
<!DOCTYPE html>
<html>
<head>
<style>
p{ width:150px; border:1px solid red; }
#p1{ hyphens: manual; }
#p2{ hyphens: none; }
#p3{ hyphens: auto; }
</style>
</head>
<body>
<p id="p1">This_my_long_wordin_this_page for test</p>
</body>
</html>
PAGE 262
‫االقتباس ‪quotes‬‬
‫يمكن التحكم في االقتباس‪ ،‬بدون وضع أي زيادات في النص‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;"'" "'" ‪#p2{ quotes:‬‬
‫} ;"»" "“" ‪#p3{ quotes:‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<p><q id="p1">This is my text 1</q></p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

tab-size ‫ في النص‬tab ‫حجم رمز‬
‫ تأخذ قيمة رقمية لتقوم بتحديد عدد المسافات في‬tab-size ‫الخاصية‬
‫ وعند كتابة النصوص يمكن‬،8 ‫ واالفتراضي لها هو‬،‫ الواحدة‬tab ‫الـ‬
‫ فلن‬tab ‫ ولكن لو تم وضع‬،space ‫ بدالً من‬،tab ‫احتياج وضع‬
‫ ليثبت‬pre ‫ فلذلك سوف نستخدم الوسم‬،‫تتمكن من رؤيته على الصفحة‬
:‫ كما يلي‬،tab-size ‫ ثم نجرب‬،‫النص كما هو‬
<!DOCTYPE html>
<html>
<head>
<style>
#p1{ tab-size:20; }
#p2{ tab-size:15; }
#p3{ tab-size:10; }
#p4{ tab-size:8; }
</style>
</head>
<body>
<pre id="p1">This is my paragraph 1</pre>
</body>
</html>
PAGE 264
‫الحظ أنه تم استخدام الوسم ‪ pre‬لتشعر صفحة الويب بالـ ‪،tab‬‬

‫والحظ أن آخر وسم ‪ p‬لم يتم تنسيقة‪ ،‬مع العلم أن الذي قبلة تم ضبط‬
‫خاصية ‪ tab-size‬له على ‪ ،8‬والوسمين ظاهرين على الصفحة وكأن‬
‫مسافاتهم واحدة كما هو واضح بالشكل السابق‪ ،‬ألنه كما ذكرنا من قبل‬
‫أن االفتراضي لخاصية ‪ tab-size‬هو ‪.8‬‬

user-select ‫تحكم التحديد‬
‫ ويمكن‬،‫ كقيمة افتراضية‬auto ‫ تأخذ القيمة‬user-select ‫الخاصية‬
.‫ لمنع التحديد‬none ‫ضبطها على القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
#p1{ user-select: none; }
#p2{ user-select: text; }
</style>
</head>
<body>
<p id="p1">Welcome 1</p>
<p id="p2">Welcome 2</p>
</body>
</html>
‫ فلن‬،Welcome 1 ‫ المكتوب بداخلة‬p ‫واآلن قم بتجربة تحديد الوسم‬

.user-select ‫ لخاصية‬none ‫ ألنه أخذ القيمة‬،‫تستطيع تحديده‬
PAGE 266
‫واآلن اضغط على ‪ Ctrl+A‬على صفحة الويب لتري مثل الشكل التالي‪:‬‬
‫وكما تالحظ تم التحديد على الكل فيما عدا الوسم ‪ p‬األول‪ ،‬ولكن الوسم‬
‫الثاني أخذ القيمة ‪ text‬لتحديد النص‪ ،‬فتم تحديده ألنه قابل للتحديد‪.‬‬

writing-mode ‫طريقة الكتابة‬
‫ حيث يمكن‬،‫ فيتم قلب النص بشكل كلي‬،‫هذه الخاصية تتحكم في الكتابة‬
vertical-rl ‫ والقيمة‬،‫ لألفقي‬horizontal-tb ‫استخدام القيمة‬
‫ للرأسي وأفقياً يحاذا‬vertical-lr ‫ والقيمة‬،ً‫للرأسي أفقياً يحاذا يمينا‬
:‫ وسوف يتم التجربة بفضل اهلل في المثال التالي‬،ً‫يسارا‬
<!DOCTYPE html>
<html>
<head>
<style>
#b1{ writing-mode: vertical-rl; }
#b2{ writing-mode: vertical-lr; }
#b3{ writing-mode: horizontal-tb; }
#ar{ direction:rtl; }
</style>
</head>
<body>
<p>Welcome to <b id="b1">Egypt</b> country</p>
‫ا‬
<p id="ar">‫< أهل بكم ف‬b id="b2">‫<مرص‬/b> ‫<دائما‬/p>
<p>Welcome to <b id="b3">Egypt</b> country</p>
</body>
</html>
PAGE 268

‫تعليق الترقيم ‪hanging-punctuation‬‬
‫تحدد الخاصية ‪ hanging-punctuation‬عالمات الترقيم‬
‫المعلقة‪ ،‬ما إذا كان يجب أن يتم تعليق عالمة الترقيم في بداية سطر النص‬
‫أو نهايته‪ ،‬وقد يتم وضع عالمات الترقيم المعلقة خارج مربع الخط‪،‬‬
‫ولكن انتبه!‪ ،‬فإن هذه الخاصية تعمل فقط على متصفح ‪ safari‬اصدار‬
‫‪ 10‬فيما اعلى‪ ،‬وحتى اآلن ال تعمل على أي متصفح آخر‪ ،‬ولذلك فلم يتم‬
‫شرحها أو تجربتها في هذا الكتاب‪.‬‬
‫‪PAGE 270‬‬
‫العرض ‪Display‬‬
‫المقصود هنا هو طريقة عرض العناصر على صفحة الويب‪ ،‬أو كما ذكرنا‬
‫من قبل في كتاب "صخرة األساس" حسونة أكاديمي في اللغة ‪ html‬أن‬
‫هناك عناصر تنزل سطر مثل الوسم ‪ h1‬والوسم ‪ div‬وعناصر أخري‬
‫ال تنزل سطر مثل الوسم ‪ img‬والوسم ‪ ،span‬ولكن اآلن مع موضوع‬
‫العرض ‪ display‬سوف يكون األمر أكثر تفصيالً من ذلك إن شاء اهلل‪.‬‬
‫كود! قم بكتابة الكود التالي داخل العنصر ‪ body‬ثم احفظه‪:‬‬

‫>"‪<input style="display:none‬‬
‫>‪<h1 style="display:none">Welcome 1</h1‬‬
‫>‪<h1>Welcome 2</h1‬‬
‫الحظ أنه عند ضبط الخاصية ‪ display‬على القيمة ‪ none‬يتم حذف‬

‫العنصر تماماً وكأنه غير موجود على الصفحة‪.‬‬

visibility ‫ظهور العناصر‬
.‫يمكن إخفاء العناصر وإظهارها مع االحتفاظ بمكانها محجوز كما هو‬

<h1 style="visibility:visible">Welcome 1</h1>
<h1 style="visibility:hidden">Welcome 2</h1>
<h1 style="visibility:visible">Welcome 3</h1>
‫ وذلك‬Welcome 3‫ و‬Welcome 1 ‫الحظ الفارق الموجود بين‬

‫ ولكنه مختفي وغير‬،‫ محفوظ على الصفحة‬Welcome 2 ‫ألن مكان‬
.ً‫ التي تحذف العنصر تماما‬display:none ‫ بعكس‬،‫ظاهر‬
PAGE 272
‫عنصر على السطر ‪inline‬‬
‫هو العنصر الذي يكون مع النسق‪ ،‬وكأنه حرف يتم كتابته أو كلمة في‬
‫سياق النص‪ ،‬مثل الوسم ‪ span‬والوسم ‪ b‬والوسم ‪ i‬والوسم ‪u‬‬
‫والوسم ‪ ،a‬الى آخر هذه الوسوم‪.‬‬
‫كود! قم بكتابة الكود التالي داخل العنصر ‪ body‬ثم احفظه‪:‬‬

‫‪hello‬‬
‫>‪<span>Ahmed</span‬‬
‫>‪<hr‬‬
‫‪hello‬‬
‫>‪<h5>Ahmed</h5‬‬
‫الحظ أنه عند استخدام الوسم ‪ span‬في سياق النص‪ ،‬أصبح طبيعياً‬
‫وكأنه مكتوب مع النص‪ ،‬باختالف الوسم ‪ h5‬الذي لم يسير مع النص‪.‬‬

‫ كما‬،‫ ال تقبل زيادة في الطول أو العرض‬inline ‫انتبه! فإن العناصر الـ‬
:‫سيوضح المثال التالي‬

<!DOCTYPE html>
<html>
<head>
<style>
span, label, b, u, i, a{
width:300px;
height:300px;
}
</style>
</head>
<body>
<span>Span</span>
<label>Label</label>
<b>bold</b>
<u>underline</u>
<i>italic</i>
<a href="#">Link</a>
</body>
</html>
PAGE 274
‫الحظ أنه تم التأثير بخاصية ‪ width‬وخاصية ‪ height‬على الوسم‬

‫‪ span‬والوسم ‪ label‬والوسم ‪ b‬والوسم ‪ u‬والوسم ‪ i‬والوسم ‪a‬‬
‫ومع ذلك لن يتأثر أحدهم أبداً عند التغيير في العرض أو الطول‪ ،‬فهو‬
‫يزيد تلقائي حسب محتواه فقط‪ ،‬فإذا تم زيادة حجم الخط للعناصر التي من‬
‫نوع ‪ inline‬عن طريق الخاصية ‪ ،font-size‬فسوف يتأثر ويزيد‬
‫الطول والعرض حسب المحتوي وحجمه على الصفحة‪.‬‬

block ‫عناصر الكتلة‬
‫ ويأخذ عرض الصفحة بالكامل‬،‫هو العنصر الذي يحجز لنفسه مكان كامل‬
h1 ‫ والوسم‬div ‫ مثل الوسم‬،‫ وينزل سطر في آخره‬،‫بشكل افتراضي‬
‫ والوسم‬table ‫ والوسم‬pre ‫ والوسم‬form ‫ والوسم‬hr ‫والوسم‬
.‫ الى آخر هذه الوسوم‬،nav ‫ والوسم‬ol

<!DOCTYPE html>
<html>
<head>
<style>
div,h1,h2{
margin-bottom:10px;
background-color:lightblue;
}
</style>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
<h1>Heading 1</h1>
<h1>Heading 2</h1>
</body>
</html>
PAGE 276
‫الحظ أنه عند استخدام الوسم ‪ div‬والوسم ‪ h1‬والوسم ‪ ،h2‬تم أخذ‬

‫عرض الصفحة بالكامل مع سطر إضافي لكل عنصر‪ ،‬وهذه العناصر يمكن‬
‫التحكم في طولها وعرضها‪ ،‬فإذا تم زيادة الكود التالي‪:‬‬
‫;‪width:190px; height:55px‬‬
‫سيكون عرض الصفحة كما يلي‪:‬‬

inline-block ‫عناصر مختلطة‬
،ً‫ معا‬block ‫ والنوع‬inline ‫وهي العناصر التي تجمع بين النوع‬
،inline ‫حيث تتميز بأنها يمكن وضعها على سطر وسط الكتابة مثل الـ‬
‫ مثل‬،block ‫وأيضاً يمكن زيادة طولها وعرضها بشكل طبيعي مثل الـ‬
.‫ ووسوم أخري مثلهم‬button ‫ والوسم‬input ‫الوسم‬

Please enter your name in
<input style="height:33px;"> And
<button style="width:120px;">
Click Here
</button>
For Test Now
‫ وفي‬،‫ بين النص‬،input‫ و‬button ‫الحظ أنه تم استخدام الوسمين‬

.‫نفس الوقت يمكن التحكم في الطول والعرض بشكل طبيعي‬
PAGE 278
change display ‫تغيير طبيعة العناصر‬
‫ فمثالً نجعل‬،‫يمكن استخدام أي عنصر مع قلب أو تغيير طبيعته االفتراضية‬
‫ أو‬،block ‫ الى‬span ‫ أو تغير الوسم‬inline ‫ بطبيعة‬div ‫الوسم‬
:‫ وذلك كما يلي‬،‫ وهكذا‬،block ‫ الى‬button ‫تحويل الوسم‬
<!DOCTYPE html>
<html>
<head>
<style>
*{ font-size:25px; }
span{ background-color:yellow }
div{ background-color:lightblue }
</style>
</head>
<body>
<span style="display:block">
Span Changed to Block
</span>
This is
<div style="display:inline">
Div Changed to inline
</div>
</body>
</html>

‫تغيير طبيعة العناصر عن طريق الخاصية ‪ display‬ألي عنصر‪.‬‬ ‫الحظ‬

‫أنه تم تحويل الوسم ‪ span‬الى طبيعة الـ ‪.block‬‬ ‫الحظ‬
‫أنه تم تحويل الوسم ‪ div‬الى طبيعة الـ ‪.inline‬‬ ‫الحظ‬
‫أنه يمكن استخدام أي عنصر بأي طبيعة تريدها‪ ،‬بفضل اهلل‪.‬‬ ‫الحظ‬
‫انتبه! فإن الخاصية ‪ display‬تأخذ قيم أخري كثيرة‪ ،‬وكل قيمة تؤثر‬
‫على هيئة العنصر وسوف يتم إظهار الفارق بين كل قيمة وأخري كما يلي‪:‬‬
‫انتبه! سوف نقوم بضبط الخاصية ‪ ،width‬والخاصية ‪،height‬‬

‫والخاصية ‪ ،background-color‬والخاصية ‪،color‬‬
‫والخاصية ‪ ،border‬والخاصية ‪ ،outline‬والخاصية‬
‫‪ ،padding‬والخاصية ‪ ،margin‬للوسم ‪ ،div‬وسوف يتم وضع‬
‫حرف قبل كل ‪ div‬وحرف بعدها ليظهر التأثير جوار النص‪ ،‬وسوف يتم‬
‫وضع فاصل ‪ hr‬بعد كل ‪ div‬ليظهر كل عنصر واضح‪ ،‬ثم بعد ذلك سوف‬
‫نري تأثير كل قيمة منهم على العنصر بعد تحديد قيم لكل هذه الخواص‪.‬‬
‫‪PAGE 280‬‬
<!DOCTYPE html>
<html>
<head>
<style>
body{ background:#bbb; padding:10px; }
div{
width:300px; height:20px;
background-color:yellow; color:red;
border:3px solid brown; outline:2px solid gold;
padding:3px; margin:2px;
}
</style>
</head>
<body>
<form style="display:inline-block; margin-right:50px;">

A<div style="display:inline">inline Div</div>A<hr>
A<div style="display:block">block Div</div>A<hr>
A<div style="display:inline-block">inline-block Div</div>A<hr>
A<div style="display:contents">contents Div</div>A<hr>
A<div style="display:flex">flex Div</div>A<hr>
A<div style="display:inline-flex">inline-flex Div</div>A<hr>
A<div style="display:grid">grid Div</div>A<hr>
A<div style="display:inline-grid">inline-grid Div</div>A<hr>
A<div style="display:list-item">list-item Div</div>A<hr>
A<div style="display:run-in">run-in Div</div>A<hr>
</form>
<form style="display:inline-block;">
A<div style="display:table">table Div</div>A<hr>
A<div style="display:inline-table">inline-table Div</div>A<hr>
A<div style="display:table-caption">table-caption Div</div>A<hr>
A<div style="display:table-column">table-column Div</div>A<hr>
A<div style="display:table-row">table-row Div</div>A<hr>
A<div style="display:table-cell">table-cell Div</div>A<hr>
A<div style="display:table-column-group">table-column-group Div</div>A<hr>
A<div style="display:table-row-group">table-row-group Div</div>A<hr>
A<div style="display:table-header-group">table-header-group Div</div>A<hr>
A<div style="display:table-footer-group">table-footer-group Div</div>A<hr>
</form>
</body>
</html>

‫الحظ أن من القيم ما يقبل النص في اوله وآخرة‪ ،‬ومنهم من ال يقبل‬

‫النص‪ ،‬ومنهم من يقبل النص في أوله وال يقبله في آخرة‪ ،‬ومنهم من‬
‫وضع نقطة مثل الوسم ‪ ،ul‬ومنهم من اختفي تماماً‪ ،‬ومنهم من قبل‬
‫اإلطار‪ ،‬ومنهم من ال يقبل اإلطار‪ ،‬ومنهم من قبل لون الخلفية‪ ،‬ومنهم‬
‫من ال يقبل لون الخلفية‪ ،‬ومنهم من قبل الطول والعرض‪ ،‬ومنهم من ال‬
‫يقبل الطول والعرض‪ ،‬وهكذا‪ ،‬وسوف تحتاج إليهم حسب تنسيقك‪.‬‬
‫‪PAGE 282‬‬
‫الصور ‪Images‬‬
‫تمارين الصور ‪Photo Exercises‬‬
‫سوف نتعامل مع الصور‪ ،‬حيث نغير فيها كما نريد‪ ،‬بالخبرات السابقة التي‬
‫تعلمناها حتى اآلن بفضل اهلل‪ ،‬وذلك عن طريق مجموعة من األمثلة‬
‫المختلفة‪ ،‬كما يلي‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪body{ padding:10px‬‬
‫{‪img‬‬
‫;‪background:yellow‬‬
‫;‪border:6px groove red‬‬
‫;‪outline:7px ridge orange‬‬
‫;‪padding:6px; margin:2px‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫> "‪<img src="egypt.jpg‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ وتم استخدام الـ‬،‫الحظ أنه تم تكوين إطار بارز وإطار محفور‬

،‫ وذلك ألن لون خلفية الصورة أصفر‬،‫ كحلية باللون األصفر‬padding
.‫والحشو حاجز بين الصورة وخلفيتها‬
PAGE 284
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪img‬‬
‫;‪border:6px ridge gold‬‬
‫;‪border-radius:20px‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ تأثير الـ ‪ border-radius‬على برواز الصورة‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
body{ padding:10px; }
img{
border:6px ridge gold;
border-radius:100px;
}
</style>
</head>
<body>
<img src="egypt.jpg" >
</body>
</html>
.border-radius ‫الحظ تحويل الصورة لدائرة باستخدام الـ‬
PAGE 286
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪img‬‬
‫;‪border:0.5px solid lightgray‬‬
‫;‪border-radius:30%‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ استخدام إطار خفيف حول الصورة‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
img{
display:block;
margin:auto;
}
</style>
</head>
<body>
</body>
</html>
‫ وذلك عن طريق الـ‬،‫الحظ أننا جعلنا الصورة في المنتصف‬

.margin:auto ‫ والـ‬display:block
PAGE 288
<!DOCTYPE html>
<html>
<head>
<style>
.image-card{
width:50%;
border:1px solid #eee;
box-shadow:4px 5px 3px rgba(10,10,10,0.3);
}
.image-card img{
width:100%;
}
.image-card p{
font-family:verdana;
font-size:20px;
text-align:center;
padding-bottom:15px;
}
</style>
</head>
<body>
<div class="image-card">
<img src="ahmed.jpg" >
<p>Ahmed Hassouna</p>
</div>
</body>
</html>

‫ وإطار‬،‫ باستخدام لون شفاف لظل الصندوق‬،‫الحظ أنه تم عمل كارت صور‬
.‫ الصورة‬title ‫ لكتابة‬p ‫ والوسم‬،‫خفيف‬
PAGE 290
Text with Images ‫النص مع الصور‬
‫ ولكنها‬،html ‫ في لغة‬img ‫ للوسم‬align ‫كنا قديما نستخدم الخاصية‬
‫ وسوف نتعلم تنظيم وضع النصوص‬،deprecated ‫اآلن أصبحت قديمة‬
،vertical-align ‫ عن طريق الخاصية‬،css ‫بجوار الصور في لغة‬
:‫والمثال التالي يوضح الوضع الطبيعي إذا تم إضافة نص بجوار الصورة‬

<!DOCTYPE html>
<html>
<head>
<style>
img{
}
</style>
</head>
<body>
<span>
Egypt has one of the longest histories of any country,
tracing its heritage back to the 6th–4th millennia BCE.
Considered a cradle of civilisation,
Ancient Egypt saw some of the earliest developments of writing,
agriculture, urbanisation, organised religion and central government.
Iconic monuments such as the Giza Necropolis and its Great Sphinx,
as well the ruins of Memphis, Thebes, Karnak, and the Valley of the Kings,
reflect this legacy and remain a significant focus of scientific and popular interest.
Egypt's long and rich cultural heritage is an integral part of its national identity,
which has endured, and often assimilated, various foreign influences,
including Greek, Persian, Roman, Arab, Ottoman Turkish, and Nubian.
Egypt was an early and important centre of Christianity,
but was largely Islamised in the seventh century and remains a predominantly Muslim country,
albeit with a significant Christian minority.
</span>
</body>
</html>

‫وهنا تم اختيار الوسم ‪ span‬لكتابة النص بداخلة‪ ،‬ليتبين لنا وكأنه نص‬
‫عادي‪ ،‬ونالحظ أن النص بدأ من أسفل الصورة‪ ،‬ثم تمت التكملة بعدها‪.‬‬
‫الخاصية ‪ vertical-align‬قيمتها االفتراضية هي ‪،baseline‬‬

‫وتأخذ القيمة ‪ top‬أو ‪ text-top‬ليبدأ النص من أعلي الصورة‪ ،‬وتأخذ‬
‫القيمة ‪ middle‬ليبدأ النص من الوسط‪ ،‬وتأخذ القيمة ‪ bottom‬أو‬
‫‪ text-bottom‬ليبدأ النص من األسفل‪ ،‬وتأخذ القيمة‪ ،‬كما يوجد قيم‬
‫أخري لهذه الخاصية‪ ،‬حسب االحتياج‪.‬‬
‫‪PAGE 292‬‬
<!DOCTYPE html>
<html>
<head>
<style>
img{
vertical-align:top;
}
</style>
</head>
<body>
<span>
</span>
</body>
</html>
.‫ ثم تمت التكملة بعدها‬،‫الحظ أن النص بدأ من أعلي الصورة‬

<!DOCTYPE html>
<html>
<head>
<style>
img{
vertical-align:middle;
}
</style>
</head>
<body>
<span>
</span>
</body>
</html>
.‫ ثم تمت التكملة بعدها‬،‫الحظ أن النص بدأ من أوسط الصورة‬
PAGE 294
‫ ولكن‬،‫ ليست فقط مع الصور‬vertical-align ‫انتبه! فإن الخاصية‬
:‫ كما يلي‬،‫ وسوف نعرض مثال يبين لنا تأثيرها‬،‫مع باقي العناصر‬
<!DOCTYPE html>
<html>
<head>
<style>
span{ background:yellow; } input{ height:30px; }
input.v1{ vertical-align:top; }
input.v2{ vertical-align:text-top; }
input.v3{ vertical-align:middle; }
input.v4{ vertical-align:bottom; }
input.v5{ vertical-align:text-bottom; }
input.v6{ vertical-align:sup; }
input.v7{ vertical-align:sub; }
input.v8{ vertical-align:super; }
input.v9{ vertical-align:6px; }
input.v10{ vertical-align:50%; }
</style>
</head>
<body>
<input class="v1"><span>top</span><hr>
<input class="v2"><span>text-top</span><hr>
<input class="v3"><span>middle</span><hr>
<input class="v4"><span>bottom</span><hr>
<input class="v5"><span>text-bottom</span><hr>
<input class="v6"><span>sup</span><hr>
<input class="v7"><span>sub</span><hr>
<input class="v8"><span>super</span><hr>
<input class="v9"><span>6px</span><hr>
<input class="v10"><span>50%</span><hr>
</body>
</html>

‫ والحظ أن كل‬،‫ وبجواره نص‬،input ‫الحظ أننا قمنا باستخدام الوسم‬

% ‫ او‬px ‫ والحظ أنه يمكن استخدام قيمة مثل‬،‫قيمة يظهر تأثيرها‬
.vertical-align ‫للتأثير على خاصية‬
PAGE 296
filter ‫التأثيرات‬
‫ أو تغييرات‬،‫ أو تفتيح‬،‫ حيث يتم عمل تشويش‬،‫يمكن التأثير على الصور‬
‫ ثم نعطي لها دوال‬،filter ‫ ولهذا نستخدم الخاصية‬،‫أخري على الصور‬
.‫ لتنفذ لنا ما نريد بفضل اهلل‬css ‫جاهزة في‬
blur ‫ التشويش‬:ً‫اوال‬
<!DOCTYPE html>
<html>
<head>
<style>
img{ width:300px; height:200px; }
img.i1{ filter:blur(1.5px); }
img.i2{ filter:blur(3px); }
</style>
</head>
<body>
<img src="egypt.jpg">
<img class="i1" src="egypt.jpg">
</body>
</html>

‫الحظ أنه تم استخدام الدالة ‪ blur‬للتشويش‪ ،‬والحظ أنه تم وضع‬

‫الصورة األولي بدون تأثير‪ ،‬ثم صورة أخري تشوشت بمقدار ‪ ،1.5px‬ثم‬
‫أخري تشوشت بمقدار ‪ ،3px‬ثم أخري تشوشت بمقدار ‪ ،5px‬ثم أخري‬
‫تشوشت بمقدار ‪ ،10px‬ثم أخري تشوشت بمقدار ‪ ،30px‬وكلما زاد‬
‫التشويش قلت القدرة على الرؤية‪.‬‬
‫‪PAGE 298‬‬
brightness ‫ السطوع‬:ً‫ثانيا‬
<!DOCTYPE html>
<html>
<head>
<style>
img.i1{ filter:brightness(120%); }
</style>
</head>
<body>
</body>
</html>

‫الحظ أنه تم استخدام الدالة ‪ brightness‬للسطوع‪ ،‬والحظ أنه تم‬

‫وضع الصورة األولي بدون تأثير‪ ،‬ثم صورة أخري سطعت بمقدار ‪،%120‬‬
‫ثم أخري سطعت بمقدار ‪ ،%150‬ثم أخري سطعت بمقدار ‪،%200‬‬
‫ثم أخري سطعت بمقدار ‪ ،%250‬ثم أخري سطعت بمقدار ‪،%300‬‬
‫وكلما زاد السطوع زادت إضاءة الصورة‪.‬‬
‫‪PAGE 300‬‬
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>

‫ حتى تصبح‬،‫الحظ أنه عندما قلت نسبة السطوع قلت اإلضاءة على الصورة‬
.‫سوداء تماماً وغير مرئية‬
PAGE 302
opacity ‫ الشفافية‬:ً‫ثالثا‬
<!DOCTYPE html>
<html>
<head>
<style>
img.i1{ filter:opacity(90%); }
</style>
</head>
<body>
</body>
</html>

‫الحظ أنه تم استخدام الدالة ‪ opacity‬للشفافية‪ ،‬والحظ أنه تم وضع‬

‫الصورة األولي بدون تأثير‪ ،‬ثم صورة أخري ظهرت بمقدار ‪ ،%90‬ثم‬
‫أخري ظهرت بمقدار ‪ ،%80‬ثم أخري ظهرت بمقدار ‪ ،%50‬ثم أخري‬
‫ظهرت بمقدار ‪ ،%30‬ثم أخري ظهرت بمقدار ‪ ،%20‬وكلما قلت نسبة‬
‫الشفافية زاد اختفاء الصورة‪.‬‬
‫‪PAGE 304‬‬
saturate ‫ التشبع‬:ً‫رابعا‬
<!DOCTYPE html>
<html>
<head>
<style>
img.i1{ filter:saturate(90%); }
</style>
</head>
<body>
</body>
</html>

‫الحظ أنه تم استخدام الدالة ‪ saturate‬لتشبع األلوان‪ ،‬والحظ أنه‬

‫تم وضع الصورة األولي بدون تأثير‪ ،‬ثم صورة أخري كان التشبع بمقدار‬
‫‪ ،%90‬ثم أخري كان التشبع بمقدار ‪ ،%80‬ثم أخري كان التشبع‬
‫بمقدار ‪ ،%50‬ثم أخري كان التشبع بمقدار ‪ ،%30‬ثم أخري كان‬
‫التشبع بمقدار ‪ ،%0‬وكلما قلت نسبة التشبع زاد اختفاء األلوان من‬
‫الصورة‪.‬‬
‫‪PAGE 306‬‬
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>

‫ كان تشبع األلوان‬100% ‫الحظ أنه عن زيادة نسبة التشبع أكثر من‬
.‫ بخالف الصورة الطبيعية‬،ً‫شديد جدا‬
PAGE 308
invert ‫ االعكاس‬:ً‫خامسا‬
<!DOCTYPE html>
<html>
<head>
<style>
img.i1{ filter:invert(20%); }
</style>
</head>
<body>
</body>
</html>

‫الحظ أنه تم استخدام الدالة ‪ invert‬العكاس األلوان‪ ،‬والحظ أنه تم‬

‫وضع الصورة األولي بدون تأثير‪ ،‬ثم صورة أخري كانت نسبة االعكاس‬
‫بمقدار ‪ ،%20‬ثم أخري كانت نسبة االعكاس بمقدار ‪ ،%30‬ثم أخري‬
‫كانت نسبة االعكاس بمقدار ‪ ،%50‬ثم أخري كانت نسبة االعكاس بمقدار‬
‫‪ ،%80‬ثم أخري كانت نسبة االعكاس بمقدار ‪.%100‬‬
‫الحظ أن القيمة ‪ 50%‬هي حلقة الوصل بين العكسين‪.‬‬
‫‪PAGE 310‬‬
hue-rotate ‫ تغيرات األلوان‬:ً‫سادسا‬
<!DOCTYPE html>
<html>
<head>
<style>
img.i1{ filter:hue-rotate(20deg); }
</style>
</head>
<body>
</body>
</html>

‫الحظ أنه تم استخدام الدالة ‪ hue-rotate‬الستدارة األلوان‪ ،‬والحظ‬

‫أنه تم وضع الصورة األولي بدون تأثير‪ ،‬ثم صورة أخري كانت استدارة‬
‫اللون بمقدار ‪ 20‬درجة‪ ،‬ثم أخري كانت استدارة اللون بمقدار ‪ 30‬درجة‪،‬‬
‫ثم أخري كانت استدارة اللون بمقدار ‪ 50‬درجة‪ ،‬ثم أخري كانت استدارة‬
‫اللون بمقدار ‪ 80‬درجة‪ ،‬ثم أخري كانت استدارة اللون بمقدار ‪270‬‬
‫درجة‪ ،‬وكلما تغيرت درجة االستدارة تغيرت األلوان في الصورة‪.‬‬
‫‪PAGE 312‬‬
sepia ‫ تأثير السبيدج‬:ً‫سابعا‬
<!DOCTYPE html>
<html>
<head>
<style>
img.i1{ filter:sepia(30%); }
</style>
</head>
<body>
</body>
</html>

‫الحظ أنه تم استخدام الدالة ‪ sepia‬لتأثير السبيدج على األلوان‪ ،‬والحظ‬

‫أنه تم وضع الصورة األولي بدون تأثير‪ ،‬ثم صورة أخري كانت نسبة‬
‫السبيدج بمقدار ‪ ،%30‬ثم أخري كانت نسبة السبيدج بمقدار ‪،%50‬‬
‫ثم أخري كانت نسبة السبيدج بمقدار ‪ ،%70‬ثم أخري كانت نسبة‬
‫السبيدج بمقدار ‪ ،%90‬ثم أخري كانت نسبة السبيدج بمقدار ‪.%100‬‬
‫‪PAGE 314‬‬
grayscale ‫ المقياس الرمادي لأللوان‬:ً‫ثامنا‬
<!DOCTYPE html>
<html>
<head>
<style>
img.i1{ filter:grayscale(30%); }
</style>
</head>
<body>
</body>
</html>

‫الحظ أنه تم استخدام الدالة ‪ grayscale‬لتأثير المقياس الرمادي‬

‫على األلوان‪ ،‬والحظ أنه تم وضع الصورة األولي بدون تأثير‪ ،‬ثم صورة‬
‫أخري كانت نسبة المقياس الرمادي بمقدار ‪ ،%30‬ثم أخري كانت نسبة‬
‫المقياس الرمادي بمقدار ‪ ،%50‬ثم أخري كانت نسبة المقياس الرمادي‬
‫بمقدار ‪ ،%70‬ثم أخري كانت نسبة المقياس الرمادي بمقدار ‪،%90‬‬
‫ثم أخري كانت نسبة المقياس الرمادي بمقدار ‪ ،%100‬حتى وصلت‬
‫كصورة قديمة أبيض وأسود‪.‬‬
‫‪PAGE 316‬‬
contrast ‫ التباين‬:ً‫تاسعا‬
<!DOCTYPE html>
<html>
<head>
<style>
img.i1{ filter:contrast(30%); }
</style>
</head>
<body>
</body>
</html>

‫الحظ أنه تم استخدام الدالة ‪ contrast‬لتأثير التباين على األلوان‪،‬‬

‫والحظ أنه تم وضع الصورة األولي بدون تأثير‪ ،‬ثم صورة أخري كانت‬
‫نسبة التباين بمقدار ‪ ،%30‬ثم أخري كانت نسبة التباين بمقدار ‪،%50‬‬
‫ثم أخري كانت نسبة التباين بمقدار ‪ ،%70‬ثم أخري كانت نسبة التباين‬
‫بمقدار ‪ ،%90‬ثم أخري كانت نسبة التباين بمقدار ‪ ،%120‬ثم أخري‬
‫كانت نسبة التباين بمقدار ‪ ،%220‬ثم أخري كانت نسبة التباين بمقدار‬
‫‪.%320‬‬
‫‪PAGE 318‬‬
drop-shadow ‫ تأثير اسقاط الظل بالدالة‬:ً‫وأخيرا‬
<!DOCTYPE html>
<html>
<head>
<style>
img{ width:200px; height:100px; margin:30px; }
img.i1{ filter:drop-shadow(10px 10px 5px gold); }
img.i2{ filter:drop-shadow(20px 20px 5px red); }
img.i3{ filter:drop-shadow(30px 30px 5px blue); }
img.i4{ filter:drop-shadow(40px 40px 5px gray); }
img.i5{ filter:drop-shadow(50px 50px 5px black); }
</style>
</head>
<body>
</body>
</html>

‫انتبه! فلقد تم شرح الظل من قبل بالتفصيل بفضل اهلل‪ ،‬واآلن الحظ وجود‬
‫ظالل مختلفة على الصور‪ ،‬فهناك الذهبي ‪ ،gold‬واألحمر ‪ ،red‬واألزرق‬
‫‪ ،blue‬والرمادي ‪ ،gray‬واألسود ‪ ،black‬بمسافات مختلفة‪.‬‬
‫يوجد أيضاً دالة ‪ ،url‬وهي تأخذ منك ملف ‪ xml‬به محتوي ‪ svg‬ليؤثر‬
‫على الخاصية ‪ ،filter‬ولكن انتبه! فإن موضوع ‪ ،svg‬له دراسة‬
‫خاصة‪ ،‬وإن شاء اهلل تستطيع ان تبحث عن كتاب "صخرة األساس" في‬
‫موضوع الـ ‪.SVG‬‬
‫انتبه! جيداً‪ ،‬فإن الخاصية ‪ filter‬ال تخص الصور فقط‪ ،‬بل يمكن تطبيقها‬
‫على عناصر متعددة‪ ،‬وسنجرب فيما يلي إن شاء اهلل‪.‬‬
‫‪PAGE 320‬‬
<!DOCTYPE html>
<html>
<head>
<style>
#i1{ filter:drop-shadow(3px 3px 5px gold); }
#i2{ filter:blur(1px); }
#i3{ filter:opacity(50%); }
</style>
</head>
<body>
<input id="i1" value="drop-shadow">
<input id="i2" value="blur">
<input id="i3" value="opacity">
</body>
</html>
.input ‫ على الوسم‬filter ‫الحظ أنه تم التأثير بالخاصية‬

object-fit ‫قص متناسب‬
:‫ وسنجرب بالكود! التالي‬،‫يمكن التحكم بالتحجيم مع مالحظة الفرق‬
<!DOCTYPE html>
<html>
<head>
<style>
img{ border:3px solid blue; }
#i1{ object-fit: fill; }
#i2{ object-fit: cover; }
#i3{ object-fit: contain; }
#i4{ object-fit: scale-down; }
#i5{ object-fit: none; }
</style>
</head>
<body>
<img id="i1" src="tree.jpg" width="350" height="100" >
</body>
</html>
PAGE 322
object-position ‫موضع مع التحجيم‬
:‫ وسنجرب بالكود! التالي‬،‫يمكن ضبط الموضع بالتحجيم مع مالحظة الفرق‬
<!DOCTYPE html>
<html>
<head>
<style>
img{ border:3px solid blue; }
#i1{ object-fit: fill; object-position: 19px 19px; }
#i2{ object-fit: cover; object-position: 9px 9px; }
</style>
</head>
<body>
</body>
</html>
.‫الحظ أنه تم وضع فارق من اليسار ومن اعلى‬

‫الفئات والعناصر المستعارة ‪pseudo‬‬

‫الفئات المستعارة هي ‪ ،pseudo-class‬والعناصر المستعارة هي‬
‫‪ ،pseudo-element‬ويتم استخدام مثل هذه األشياء لتحديد حاالت‬
‫خاصة لعنصر محدد‪ ،‬مثل لمس العنصر‪ ،‬أو العنصر األول في سلسلة محددة‪،‬‬
‫أو تحديد العنصر‪ ،‬أو تحديد النص‪ ،‬وأشياء أخري كثيرة‪ ،‬وعند التعامل مع‬
‫الفئات المستعارة نضع كولون "‪ ،":‬والعناصر المستعارة نضع "‪،"::‬‬
‫بعد اسم الوسم أثناء تنسيقة‪ ،‬في أكواد ‪ ،css‬ثم اسم الفئة المستعارة‬
‫أو العنصر المستعار‪ ،‬ولفهم هذه الفئات والعناصر المستعارة‪ ،‬سوف نصنع‬
‫أمثلة ونالحظ التأثيرات إن شاء اهلل‪.‬‬
‫وللتسهيل تخيل وكأننا نريد عمل تنسيق معين أثناء لمس الزر بالماوس‪ ،‬أي‬
‫عند مرور المؤشر على الزر‪ ،‬فيكون الكود مثل التالي‪:‬‬
‫‪button:hover‬‬
‫ثم بعد ذلك أقواس المجموعة }{ ثم أكواد اللغة ‪ ،css‬فيتم تطبيق‬
‫التنسيق الموجود داخل األقواس بعد الـ ‪ hover‬فقط عند مرور المؤشر‪،‬‬
‫ولو تم إبعاد المؤشر مرة أخري‪ ،‬يعود التنسيق األصلي كما كان‪ ،‬وهكذا‪،‬‬
‫يتم لمس الزر يظهر تنسيق ‪ ،hover‬وعدم اللمس يزول تنسيق ‪.hover‬‬
‫أو تخيل لو نريد تنسيق عند تحديد نص الـ ‪ input‬والكود التالي‪:‬‬
‫‪input::selection‬‬
‫ليتأثر النص‪ ،‬أثناء تحديده فقط‪ ،‬وهكذا‪ ...‬وسوف نفصل إن شاء اهلل‪.‬‬
‫‪PAGE 324‬‬
hover ‫اللمس‬
.‫ لعمل تنسيق معين عليها أثناء اللمس فقط‬،‫هو يخص لمس العناصر‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
background:navy; color:lightblue;
}
div:hover{
background:lightblue; color:navy;
}
</style>
</head>
<body>
<div>My Div</div>
</body>
</html>

‫وعند اللمس يكون الشكل كما يلي‪:‬‬
‫الحظ أن الوسم ‪ div‬تم تنسيقة على عرض ‪ 250‬وطول ‪ 100‬ولون‬

‫خلفية ازرق غامق ولون نص ازرق فاتح‪.‬‬
‫الحظ عند لمس الوسم ‪ div‬يتحول تنسيقة الى عرض ‪ 270‬وطول‬

‫‪ 120‬ولون خلفية ازرق فاتح ولون نص ازرق غامق‪.‬‬
‫‪PAGE 326‬‬
focus ‫التركيز‬
.input ‫يتم التنسيق عند دخول المؤشر وثباتة في عنصر مثل الوسم‬

<!DOCTYPE html>
<html>
<head>
<style>
input, textarea, button{
font-size:25px;
}
input:focus, textarea:focus, button:focus{
font-size:30px;
}
</style>
</head>
<body>
<input value="Text"><hr>
<textarea>Text</textarea><hr>
<button>Button</button>
</body>
</html>

:‫ لتري مثل الشكل التالي‬tab ‫واآلن انتبه! واضغط الزر‬
:‫ لتري مثل الشكل التالي‬tab ‫واآلن انتبه! واضغط الزر‬
.ً‫ أخري ستري التأثير على الزر أيضا‬tab ‫ولو ضغطت‬
PAGE 328
checked ‫االختيار‬
.radio ‫ مثل الـ‬،‫يوجد وسوم بها أنواع يتم تحديدها أو اختيارها‬

<!DOCTYPE html>
<html>
<head>
<style>
input[type=radio]:checked{
font-size:25px;
}
</style>
</head>
<body>
<input type="radio" name="g" id="m">
<label for="m">Male</label>
<input type="radio" name="g" id="f">
<label for="f">Female</label>
</body>
</html>

:‫ لتري مثل الشكل التالي‬male ‫واآلن انتبه! وحدد‬
:‫ لتري مثل الشكل التالي‬female ‫واآلن انتبه! وحدد‬
‫ولو قمت بعمل نفس التأثيرات على أشياء بها اختيار أخري مثل النوع‬
.ً‫ سوف يتأثر أيضا‬checkbox
PAGE 330
‫محتوي فارغ ‪empty‬‬
‫عمل تنسيق معين عندما يكون محتوي العنصر فارغ‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪p‬‬
‫;‪font-size:25px‬‬
‫}‬
‫{‪p:empty‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<p>My Paragraph</p‬‬
‫>‪<p></p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ فإذا كان هناك‬،‫ للفقرات الفارغة‬pink ‫الحظ أننا قمنا بتمييز اللون الـ‬
‫ فسوف تتحول إلى‬،‫ فارغة وال يوجد بها محتوي‬p ‫أي فقرات بالوسم‬
.pink ‫ والذي هنا هو لون خلفية‬،‫التنسيق‬
PAGE 332
‫أول عنصر فرعى ‪first-child‬‬
‫عند وجود وسوم بها وسوم أخري متفرعة منها‪ ،‬يتم تطبيق التنسيق على‬
‫أول عنصر من كل مجموعة‪ ،‬وسنوضح فيما يلي ان شاء اهلل‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪li:first-child‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪<li>Windows</li‬‬
‫>‪<li>Linux</li‬‬
‫>‪<li>Mac</li‬‬
‫>‪</ul‬‬
‫>‪<ul‬‬
‫>‪<li>HTML</li‬‬
‫>‪<li>CSS</li‬‬
‫>‪</ul‬‬
‫>‪<ul‬‬
‫>‪<li>JavaScript</li‬‬
‫>‪<li>PHP</li‬‬
‫>‪<li>C#</li‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

،‫ وكل منها يحمل بعض العناصر‬،ul ‫الحظ أنه تم عمل ثالثة وسوم‬
‫وانتبه! والحظ أن التنسيق تم تطبيقه على أول عنصر من كل مجموعة‬
.ul ‫من الوسم‬

<!DOCTYPE html>
<html>
<head>
<style>
input:first-child{ background:red; }
</style>
</head>
<body>
<div><input><input><input></div><hr>
<div><input><input><input></div><hr>
</body>
</html>
PAGE 334
‫الحظ أنه تم عمل وسمين ‪ ،div‬وبداخل كل وسم منهم ثالثة وسوم‬

‫‪ ،input‬وتم تحديد لون خلفية أحمر ‪ ،red‬ألول كل وسم ‪،input‬‬
‫فتم تطبيق التنسيق على أول ‪ input‬في كل مجموعة‪ ،‬ويمكن تطبيق نفس‬
‫الفكرة‪ ،‬بتنسيق آخر على الوسم ‪ ،span‬كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪span:first-child{ background:gold; margin-right:10px‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div><span>S1</span><span>S2</span><span>S3</span></div><hr‬‬
‫>‪<div><span>S1</span><span>S2</span><span>S3</span></div><hr‬‬
‫>‪</body‬‬
‫>‪</html‬‬

last-child ‫آخر عنصر فرعى‬
‫ يتم تطبيق التنسيق على‬،‫عند وجود وسوم بها وسوم أخري متفرعة منها‬
.‫ وسنوضح فيما يلي ان شاء اهلل‬،‫آخر عنصر من كل مجموعة‬

<!DOCTYPE html>
<html>
<head>
<style>
li:last-child{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Windows</li>
<li>Linux</li>
<li>Mac</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<ul>
<li>JavaScript</li>
<li>PHP</li>
<li>C#</li>
</ul>
</body>
</html>
PAGE 336
‫الحظ أنه تم عمل ثالثة وسوم ‪ ،ul‬وكل منها يحمل بعض العناصر‪،‬‬
‫وانتبه! والحظ أن التنسيق تم تطبيقه على آخر عنصر من كل مجموعة‬
‫من الوسم ‪ ،ul‬وفيما يلي‪ ،‬تطبيق آخر‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪input:last-child{ background:red‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div><input><input><input></div><hr‬‬
‫>‪<div><input><input><input></div><hr‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ وبداخل كل وسم منهم ثالثة وسوم‬،div ‫الحظ أنه تم عمل وسمين‬

،input ‫ آلخر كل وسم‬،red ‫ وتم تحديد لون خلفية أحمر‬،input
‫ ويمكن تطبيق نفس‬،‫ في كل مجموعة‬input ‫فتم تطبيق التنسيق على آخر‬
:‫ كما يلي‬،span ‫ بتنسيق آخر على الوسم‬،‫الفكرة‬
<!DOCTYPE html>
<html>
<head>
<style>
span:last-child{ background:gold; margin-left:10px; }
</style>
</head>
<body>
<div><span>S1</span><span>S2</span><span>S3</span></div><hr>
<div><span>S1</span><span>S2</span><span>S3</span></div><hr>
</body>
</html>
PAGE 338
first-of-type ‫النوع األول‬
.‫ ولكنه يركز على النوع‬،first-child ‫هو يشبه كثيراً الـ‬

<!DOCTYPE html>
<html>
<head>
<style>
div{ margin:10px; }
.parent:first-child{
background:gold;
}
</style>
</head>
<body>
<div class="parent">Parent
<div>Child</div>
<div>Child</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
</body>
</html>

‫هذا المثال طبيعي‪ ،‬كما تعلمنا من قبل‪ ،‬ولكن ماذا لو أردنا ثبات هذا‬
‫التمييز‪ ،‬مع تمييز آخر للفروع!‪ ،‬وهنا نستطيع أن نقوم بحل هذه المشكلة‪،‬‬
‫من خالل الفئة المستعارة ‪ ،first-of-type‬كما سيوضح لنا إن شاء‬
‫اهلل المثال التالي‪.‬‬
‫‪PAGE 340‬‬
<!DOCTYPE html>
<html>
<head>
<style>
div{ margin:10px; }
div:first-of-type{
background:red;
}
.parent:first-child{
background:gold;
}
</style>
</head>
<body>
<div>Child</div>
<div>Child</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
</body>
</html>

‫ بسهولة‬child ‫ والفرع‬parent ‫ونالحظ هنا أننا فرقنا بين األصل‬

.first-child‫ و‬first-of-type ‫التعامل مع الفئات المستعارة‬
PAGE 342
last-of-type ‫النوع األخير‬
.‫ ولكنه يركز على النوع‬،last-child ‫هو يشبه كثيراً الـ‬

<!DOCTYPE html>
<html>
<head>
<style>
div{ margin:10px; }
.parent:last-child{
background:gold;
}
</style>
</head>
<body>
<div>Child</div>
<div>Child</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
</body>
</html>

‫هذا المثال طبيعي‪ ،‬كما تعلمنا من قبل‪ ،‬ولكن ماذا لو أردنا ثبات هذا‬
‫التمييز‪ ،‬مع تمييز آخر للفروع!‪ ،‬وهنا نستطيع أن نقوم بحل هذه المشكلة‪،‬‬
‫من خالل الفئة المستعارة ‪ ،last-of-type‬كما سيوضح لنا إن شاء‬
‫اهلل المثال التالي‪.‬‬
‫‪PAGE 344‬‬
<!DOCTYPE html>
<html>
<head>
<style>
div{ margin:10px; }
div:last-of-type{
background:red;
}
.parent:last-child{
background:gold;
}
</style>
</head>
<body>
<div>Child</div>
<div>Child</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
</body>
</html>

‫ بسهولة‬child ‫ والفرع‬parent ‫ونالحظ هنا أننا فرقنا بين األصل‬

.last-child‫ و‬last-of-type ‫التعامل مع الفئات المستعارة‬
PAGE 346
‫رقم محدد لكل فرع ‪nth-child‬‬
‫هنا ال نتحدث عن أول أو آخر فرع‪ ،‬بل نتحدث عن رقم يتم اختياره‪ ،‬أو‬
‫تحديده بسهولة تامة‪ ،‬بفضل اهلل‪ ،‬والحروف ‪ nth‬تعني ترتيب رقمي مثل‬
‫‪ 1st‬و‪ 2nd‬و‪ 3rd‬و‪ ،4th‬وهكذا‪ ،‬وبالطبع كلمة ‪ child‬تعني‬
‫فروع‪ ،‬وباستخدام ‪ nth-child‬ننسق بترتيب محدد‪ ،‬مثالً ثاني فرع‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪li:nth-child(2){ background:yellow‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪<ul‬‬
‫>‪<li>XML</li‬‬
‫>‪</ul‬‬
‫>‪<ul‬‬
‫>‪<li>C#</li‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أنه تم وضع أقواس عادية )( بعد الفئة ‪ ،nth-child‬وتم‬

‫وضع الرقم ‪ 2‬بداخلها‪ ،‬أي أننا نقصد ثاني فرع ‪ li‬من كل مجموعة‪،‬‬
‫وبالفعل تم وضع خلفية صفراء لثاني كل فرع‪.‬‬
‫انتبه! فإنه يمكن كتابة أي رقم آخر بدالً من الرقم ‪ 2‬لتطبيق التنسيق‬
‫على عناصر بترتيب آخر‪ ،‬كما أنه يمكن أيضاً كتابة كلمات لتحكم معين‪،‬‬
‫فمثالً الكلمة ‪ odd‬للتطبيق على الفروع الفردية‪ ،‬والكلمة ‪ even‬للتطبيق‬
‫على الفروع الزوجية‪.‬‬
‫‪PAGE 348‬‬
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-child(odd){
background:lightblue;
}
li:nth-child(even){
background:#8d95d6;
}
</style>
</head>
<body>
<ul>
<li>Windows</li>
<li>Linux</li>
<li>Mac</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
</ul>
<ul>
<li>JavaScript</li>
<li>PHP</li>
<li>C#</li>
</ul>
</body>
</html>

‫ وتم تلوين الترتيب‬،‫الحظ أنه تم تلوين الترتيب الفردي باللون األزرق الفاتح‬
.ً‫ فأصبح الشكل جماليا‬،‫الزوجي بلون آخر‬
PAGE 350
‫رقم محدد لكل فرع من األسفل ‪nth-last-child‬‬
‫هنا نتحدث عن رقم يتم اختياره من اآلخر‪ ،‬أو تحديده بسهولة تامة من‬
‫األسفل‪ ،‬بفضل اهلل‪ ،‬وباستخدام ‪ nth-last-child‬ننسق بترتيب محدد‪،‬‬
‫مثالً ثاني فرع من األسفل‪ ،‬أو ثالث فرع من األسفل‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪li:nth-last-child(3){ background:red‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪<ul‬‬
‫>‪<li>XML</li‬‬
‫>‪</ul‬‬
‫>‪<ul‬‬
‫>‪<li>C#</li‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ ومعناها أن يبدأ العد من‬،‫الحظ أن المقصود هو ثالث فرع من األسفل‬

.‫آخر عنصر‬
PAGE 352
nth-of-type ‫رقم محدد لكل نوع‬
.‫ ويبدأ العد من أول عنصر‬،‫وهنا نضع رقم محدد للنوع‬
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-of-type(3){ background:gold; }
</style>
</head>
<body>
<ul>
<li>Windows</li>
<li>Linux</li>
<li>Mac</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
</ul>
<ul>
<li>JavaScript</li>
<li>PHP</li>
<li>C#</li>
</ul>
</body>
</html>

‫ وبالفعل تم وضع خلفية ذهبية‬،li ‫الحظ أننا نقصد ثالث فرع من كل نوع‬
.‫لثالث كل نوع‬
PAGE 354
nth-last-of-type ‫رقم محدد لكل نوع من األسفل‬
.‫ ويبدأ العد من آخر عنصر‬،‫وهنا نضع رقم محدد للنوع‬
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-last-of-type(3){ background:gold; }
</style>
</head>
<body>
<ul>
<li>Windows</li>
<li>Linux</li>
<li>Mac</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
</ul>
<ul>
<li>JavaScript</li>
<li>PHP</li>
<li>C#</li>
</ul>
</body>
</html>

‫ وبالفعل تم وضع‬،‫ من األسفل‬li ‫الحظ أننا نقصد ثالث فرع من كل نوع‬

.‫خلفية ذهبية لثالث كل نوع من األسفل‬
PAGE 356
only-child ‫الفروع فقط‬
parent ‫المقصود هنا هو التأثير على العنصر فقط لو كان له أصل‬
‫ سواء نظراء من نفس نوعه أو أي وسم‬،siblings ‫وليس له نظراء‬
:‫ وسوف نفهم إن شاء اهلل من المثال التالي‬،‫من نوع آخر‬
<!DOCTYPE html>
<html>
<head>
<style>
*{ margin:5px; padding:5px; }
div{ background:gray; }
input:only-child{ background:gold; }
</style>
</head>
<body>
<input><input><input>
<div>Div1<input></div>
<div>Div2<input><input></div>
<div>Div3<input><span>Span</span></div>
</body>
</html>

‫الحظ وجود ثالثة وسوم ‪ ،input‬ثم وسم ‪ div‬بداخله وسم ‪input‬‬

‫واحد‪ ،‬ثم وسم ‪ div‬بداخله وسمين ‪ ،input‬ثم وسم ‪ div‬بداخله‬
‫وسم ‪ input‬واحد‪ ،‬ثم وسم ‪ div‬بداخله وسم ‪ input‬واحد ووسم‬
‫‪ span‬واحد‪ ،‬ثالثة وسوم ‪.input‬‬
‫الحظ أن الذي تأثر فقط هو وسم ‪ input‬الموجود في حاوية ‪div‬‬

‫بمفرده‪ ،‬وبدون أي نظائر‪.‬‬
‫انتبه! والحظ أنه في حالة وجود نظير من نفس النوع‪ ،‬او من نوع آخر‬
‫فلم يتم تنسيق أي واحد منهم‪.‬‬
‫‪PAGE 358‬‬
only-of-type ‫النوع فقط‬
parent ‫المقصود هنا هو التأثير على نوع العنصر فقط لو كان له أصل‬
‫ وسوف نفهم إن شاء اهلل‬،‫ من نفس نوعه‬،siblings ‫وليس له نظراء‬
:‫من المثال التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
*{ margin:5px; padding:5px; }
div{ background:gray; }
input: only-of-type{ background:gold; }
</style>
</head>
<body>
<div>Div2<input><input></div>
<div>Div3<input><span>Span</span></div>
</body>
</html>

‫الحظ وجود ثالثة وسوم ‪ ،input‬ثم وسم ‪ div‬بداخله وسم ‪input‬‬

‫واحد‪ ،‬ثم وسم ‪ div‬بداخله وسمين ‪ ،input‬ثم وسم ‪ div‬بداخله‬
‫وسم ‪ input‬واحد‪ ،‬ثم وسم ‪ div‬بداخله وسم ‪ input‬واحد ووسم‬
‫‪ span‬واحد‪ ،‬ثالثة وسوم ‪.input‬‬
‫الحظ أن الذي تأثر هو وسم ‪ input‬الموجود في حاوية ‪ div‬بمفرده‪،‬‬

‫وبدون أي نظائر من نفس نوعه‪ ،‬ومع نظيره ‪ span‬تأثر أيضاً‪.‬‬
‫انتبه! والحظ أنه في حالة وجود نظير من نفس النوع‪ ،‬فلم يتم تنسيق‬
‫أي واحد منهم‪.‬‬
‫‪PAGE 360‬‬
not ‫الكل ما عدا‬
‫المقصود هنا أن يتم تطبيق التنسيق على جميع الوسوم بالكامل فيما عدا‬
.() ‫وسم يتم كتابته بين قوسين عاديين‬
<!DOCTYPE html>
<html>
<head>
<style>
div{ margin:5px; padding:5px; }
:not(input){ color:red; }
</style>
</head>
<body>
<input value="Text"><input value="Text">
<div>Div1<input value="Text"></div>
<span>Span</span><h1>Hello</h1>
<input value="Text"><input value="Text">
</body>
</html>

‫ في أي‬input ‫الحظ أن التنسيق تم على كل الوسوم فيما عدا الوسم‬

.div ‫ حتى ولو كان في وسم يحمل تنسيق مثل‬،‫مكان‬

<!DOCTYPE html>
<html>
<head>
<style>
h1,h3{ color:blue; }
:not(h1){ color:red; }
</style>
</head>
<body>
<input value="Text"><div>Div</div>
<span>Span</span>
<h1>Hello h1</h1>
<h2>Hello h2</h2>
<h3>Hello h3</h3>
</body>
</html>
PAGE 362
‫الحظ أنه تم تنسيق الوسم ‪ h1‬والوسم ‪ ،h3‬ولكن بعد كود االستثناء‪،‬‬

‫والذي هو "} ;‪ ":not(h1){ color:red‬تم تنسيق الكل بما في‬
‫ذلك الوسم ‪ ،h3‬والذي بقي باللون األزرق هو الوسم ‪ ،h1‬ألنه هو‬
‫المستثنى‪.‬‬
‫انتبه! فإنه يمكن استخدام ‪ :is‬و‪ :where‬و‪ :has‬للتطابق‪ ،‬ويمكن‬

‫االطالع على اختيارات أكثر تقدما من الرابط التالي‪:‬‬
‫‪https://www.w3.org/TR/selectors-4/‬‬

disabled ‫التعطيل‬
‫ وسيتم‬،disabled ‫هنا يتم التنسيق على عناصر معطلة بالفئة‬
:‫التوضيح فيما يلي‬

<!DOCTYPE html>
<html>
<head>
<style>
input:disabled{
border:3px solid yellow;
background:orange;
color:yellow;
}
</style>
</head>
<body>
<input value="Text" disabled>
<input value="Text">
</body>
</html>
‫الحظ أن العناصر التي تأثرت بالتنسيق هي العناصر الغير مفعلة‬

.‫ فقط‬disabled
PAGE 364
‫التفعيل ‪enabled‬‬
‫هنا يتم التنسيق على عناصر مفعلة بالفئة ‪ ،enabled‬وسيتم التوضيح‬
‫فيما يلي‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪input:enabled‬‬
‫;‪border:3px solid yellow‬‬
‫;‪background:orange‬‬
‫;‪color:yellow‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<input value="Text" disabled‬‬
‫>"‪<input value="Text‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أن العناصر التي تأثرت بالتنسيق هي العناصر المفعلة ‪enabled‬‬

‫فقط‪.‬‬

read-only ‫القراءة فقط‬
‫هنا يتم التنسيق على عناصر تم ضبطها من قبل على القراءة فقط بالفئة‬
:‫ وسيتم التوضيح فيما يلي‬،read-only

<!DOCTYPE html>
<html>
<head>
<style>
input:read-only{
background:orange;
color:yellow;
}
</style>
</head>
<body>
<input value="Text" readonly>
<input value="Text">
</body>
</html>
.‫الحظ أن العنصر الذي تم ضبطه على القراءة فقط قد تأثر‬
PAGE 366
‫غير مضبوط على القراءة فقط ‪read-write‬‬
‫هنا المقصود هو العنصر الذي لم يتم ضبطه بـ ‪ HTML‬كـ ‪،readonly‬‬
‫حتى ولو كان غير مفعل ‪ disabled‬سيتأثر‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪input:read-write‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<input value="Text" readonly‬‬
‫>"‪<input value="Text‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أن أي عنصر لم يتم ضبطه كـ ‪ readonly‬قد تأثر بالتنسيق‪.‬‬

required ‫المطلوب‬
‫ وهو‬html ‫ هو الذي تم تحديده كمطلوب من‬،‫هنا العنصر المقصود‬
.required

<!DOCTYPE html>
<html>
<head>
<style>
input:required{
background:orange;
color:yellow;
}
</style>
</head>
<body>
<input value="Text" readonly>
<input value="Text" required>
</body>
</html>
.‫ فقط‬html ‫ من اللغة‬required ‫وهنا تأثر الذي تم ضبطه على‬
PAGE 368
‫الغير المطلوب أو االختياري ‪optional‬‬
‫هنا العنصر المقصود‪ ،‬هو الذي تم تحديده كمدخل عادي من ‪ html‬وهو‬
‫‪ optional‬أي اختياري‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪input:optional‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<input value="Text" readonly‬‬
‫>‪<input value="Text" required‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫وهنا تأثر الذي لم يتم ضبطه على ‪ required‬من اللغة ‪html‬‬

‫فقط‪ ،‬وما لم يحدد كـ ‪ required‬فهو اختياري‪.‬‬

in-range ‫داخل المدي‬
:‫نستطيع أن نقوم بعمل تنسيق على العناصر المنضبطة داخل المدي كالتالي‬

<!DOCTYPE html>
<html>
<head>
<style>
input:in-range{
border:3px solid lightgreen;
background:darkgreen;
color:lightgreen;
}
</style>
</head>
<body>
<input type="number" min="3" max="9" value="5">
</body>
</html>
‫ والحظ الذي تأثر فقط هي العناصر التي‬،number ‫الحظ أن النوع‬

.‫داخل المدي المحدد‬
PAGE 370
‫خارج المدي ‪out-of-range‬‬
‫نستطيع أن نقوم بعمل تنسيق على العناصر الخارجة عن المدي كالتالي‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪input:out-of-range‬‬
‫;‪border:3px solid darkred‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<input type="number" min="3" max="9" value="5‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أن النوع ‪ ،number‬والحظ الذي تأثر فقط هي العناصر التي‬

‫خرجت عن المدي المحدد‪.‬‬

valid ‫تم التحقق منه‬
‫وهنا يمكننا تركيز التنسيق على العناصر التي تم التحقق منها سواء مطلوبة‬
.‫ أو غير ذلك‬email ‫ أو بريد‬number ‫ أو رقم‬required

<!DOCTYPE html>
<html>
<head>
<style>
input:valid{
border:3px solid lightgreen;
background:darkgreen;
color:lightgreen;
}
</style>
</head>
<body>
<input type="email" value="email@domain.co" >
<input type="email" value="Text" >
<input value="Text" required>
</body>
</html>
.‫الحظ أنه تم تفعيل التنسيق فقط على العناصر التي تم التحقق منها‬
PAGE 372
‫لم يتم التحقق منه ‪invalid‬‬
‫وهنا يمكننا تركيز التنسيق على العناصر التي لم يتم التحقق منها سواء‬
‫مطلوبة ‪ required‬أو رقم ‪ number‬أو بريد ‪ email‬أو غير‬
‫ذلك‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪input:invalid‬‬
‫;‪border:3px solid darkred‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫> "‪<input type="email" value="email@domain.co‬‬
‫> "‪<input type="email" value="Text‬‬
‫>‪<input value="Text" required‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أنه تم تفعيل التنسيق فقط على العناصر التي لم يتم التحقق منها‪.‬‬

lang ‫اللغة‬
.‫ كما سنوضح إن شاء اهلل‬،‫يمكن التنسيق على لغة محددة من اللغات‬

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(ar){
color:navy;
}
</style>
</head>
<body>
<p lang="ar">‫<فقرة باللغة العربية‬/p>
<p lang="en">English Paragraph</p>
</body>
</html>
‫ ولذلك هي‬،ar ‫ بعده قوسين وبهم اللغة العربية‬lang ‫الحظ أن المحدد‬

.‫التي تم التأثير عليها بالتنسيق‬
PAGE 374
‫األصل ‪root‬‬
‫المقصود هنا هو جذور أو أصل المستند‪ ،‬مع العلم أن مستند ‪html‬‬
‫األصل الخاص به هو دائماً يكون الوسم ‪.html‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪:root‬‬
‫;‪background:lightblue‬‬
‫}‬
‫} ;‪body{ background:#fff‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div>Div1<div><div>Div2<div><div>Div3<div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أن التأثير على الوسم ‪ ،html‬والمحتوي األبيض تم تخصيصه‬

‫للوسم ‪.body‬‬

target ‫هدف تم استهدافه‬
:‫ كالتالي‬،‫هنا نستطيع التنسيق على المحتوي الذي تم استهدافه برابط‬

<!DOCTYPE html>
<html>
<head>
<style>
:target{
}
</style>
</head>
<body>
<a href="#wd">Web Design</a> ::
<a href="#pl">Programming Language</a>
<p id="wd">Web Design</p>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<p id="pl">Programming Language</p>
<ul>
<li>JAVA</li>
<li>C#</li>
</ul>
</body>
</html>
PAGE 376
‫الحظ أنه تم عمل روابط داخلية‪ ،‬ومحتوي يتم استهدافه لها‪ ،‬إذا تم‬
‫الضغط عليها‪ ،‬والحظ أن الصفحة تظهر بشكل عادي ولم يتأثر شيء عليها‬
‫حتى اآلن‪ ،‬ولكن رجاء انتبه!‪ ،‬فإذا تم الضغط على الرابط سوف يحدث شيء‬
‫آخر‪ ،‬فاآلن سوف نضغط على الرابط األول‪ ،‬ليكون مثل التالي‪:‬‬

:‫ ليكون مثل التالي‬،‫واآلن سوف نضغط على الرابط الثاني‬
.‫ هام جداً لتحديد الهدف الذي تم استهدافه‬،‫وكما نالحظ فإن التنسيق‬
PAGE 378
‫الرابط ‪link‬‬
‫هنا يتم التنسيق على الرابط الذي لم تتم زيارته‪.‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪a:link‬‬
‫‪background:lightblue; color:red‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫‪<a href="http://www.youtube.com">Youtube</a> ::‬‬
‫‪<a href="http://www.google.com">Google</a> ::‬‬
‫>‪<a href="http://www.gmail.com">G-mail</a‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أنه تم عمل تنسيق على الروابط التي لم تتم زيارتها‪ ،‬مع العلم أن‬
‫الموقع ‪ gmail.com‬تمت زيارته‪ ،‬ولكنه تأثر بخلفية المحدد ‪link‬‬
‫ألنه لم يخصص له خلفية‪.‬‬

visited ‫رابط تمت زيارته‬
.‫هنا يتم التنسيق على الرابط الذي تمت زيارته بالفعل‬

<!DOCTYPE html>
<html>
<head>
<style>
a:link{ background:lightblue; color:red }
a:visited{ background:#aaa; color:black }
</style>
</head>
<body>
<a href="http://www.youtube.com">Youtube</a> ::
<a href="http://www.google.com">Google</a> ::
<a href="http://www.gmail.com">G-mail</a>
</body>
</html>
‫ مع العلم أن‬،‫الحظ أنه تم عمل تنسيق على الروابط التي لم تتم زيارتها‬
‫ وتم عمل تخصيص له حتى ال يتأثر‬،‫ تمت زيارته‬gmail.com ‫الموقع‬
.‫ بالكامل‬visited ‫ حيث أخذ تنسيق المحدد‬،link ‫بـ‬
PAGE 380
active ‫الفاعلية‬
‫ حيث المقصود بالمحدد‬،‫ وركز حتى تستطيع رؤية التأثير‬،!‫هنا رجاء انتبه‬
:‫ وسوف نحاول التوضيح كالتالي‬،‫ فاعلية العنصر‬active
<!DOCTYPE html>
<html>
<head>
<style>
a:active, input:active, p:active{
background:lightgreen;
color:darkgreen
}
</style>
</head>
<body>
<a
href="http://www.youtube.com">Youtube</a>
::
<a
href="http://www.google.com">Google</a> ::
<input> <p>Paragraph</p>
</body>
</html>

‫الحظ أن الوضع طبيعي جداً‪ ،‬ولم يتأثر أي شيء‪ ،‬ولكن انتبه! واضغط‬
‫واستمر بالضغط على رابط يوتيوب ليكون مثل الشكل التالي‪:‬‬
‫وهذا هو المحدد ‪ ،active‬ورجاء انتبه! والحظ قبل رفع الماوس من‬

‫على الرابط‪ ،‬واآلن لو ضغطت بالماوس على ‪ input‬يكون كالتالي‪:‬‬
‫وهكذا‪ ،‬ولكن انتبه! فلن تري التأثير إال أثناء االستمرار بالضغط على‬
‫الماوس فقط‪.‬‬
‫‪PAGE 382‬‬
after ‫ما بعد‬
‫ وهو ما بعد‬،Pseudo Elements ‫ من الـ‬after ‫المحدد‬
‫ وتخصيص‬css ‫ في لغة‬content ‫ ويمكن استخدام خاصية‬،‫العنصر‬
.‫نص لها لرؤيته بعد العنصر المقصود‬

<!DOCTYPE html>
<html>
<head>
<style>
p{
margin:10px; padding:10px;
border:2px solid blue;
}
p::after{
content:'After Paragraph';
background:pink;
color:red;
padding-left:5px;
}
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>

‫ باستخدام الخاصية‬،‫الحظ أننا نتحكم في وضع أشياء بعد العناصر‬

.‫ ونتحكم في تنسيق لهذه األشياء‬content
border ‫ واإلطار‬margin ‫ والهامش‬padding ‫الحظ الحشو‬

.‫للفقرات‬
‫ وهو من‬،"::" ‫ يتم استخدامه بواسطة‬after ‫الحظ أن المحدد‬

.css ‫العناصر المستعارة في لغة‬
PAGE 384
before ‫ما قبل‬
‫ وهو ما قبل‬،Pseudo Elements ‫ من الـ‬before ‫المحدد‬
‫ وتخصيص‬css ‫ في لغة‬content ‫ ويمكن استخدام خاصية‬،‫العنصر‬
.‫نص لها لرؤيته بعد العنصر المقصود‬

<!DOCTYPE html>
<html>
<head>
<style>
button::before{
content:'Click on';
color:red;
padding-right:5px;
}
</style>
</head>
<body>
</body>
</html>

‫الحظ أننا نتحكم في وضع أشياء قبل العناصر‪ ،‬باستخدام الخاصية‬

‫‪ content‬ونتحكم في تنسيق لهذه األشياء‪.‬‬
‫الحظ أن المحدد ‪ before‬يتم استخدامه بواسطة "‪ ،"::‬وهو من‬

‫العناصر المستعارة في لغة ‪.css‬‬
‫الحظ أننا تدخلنا تدخل مباشر في هيكلية الزر ‪.button‬‬
‫‪PAGE 386‬‬
‫شيء تم تحديده ‪selection‬‬
‫المحدد ‪ selection‬من الـ ‪ ،Pseudo Elements‬وهو ما‬
‫يتم تحديده‪ ،‬فمن الطبيعي أنه إذا تم تحديد شيء يكون مثل التالي‪:‬‬
‫جزء محدد من النص‬
‫وهنا يأتي المحدد ‪ selection‬ويلعب دوراً هاماً‪ ،‬حيث يغير تنسيقات‬

‫الشيء المحدد‪ ،‬مثل الموجود أمامك في الشكل السابق‪.‬‬
‫اآلن بفضل اهلل سوف نشرح مثال‪ ،‬لنتفهم منه هذا الموضوع إن شاء اهلل‬
‫ببساطة‪ ،‬ولكن انتبه! فيجب عليك التركيز والتجربة‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
div::selection{
background:yellow;
color:red;
}
p::selection{
background:#222;
color:#eee;
}
</style>
</head>
<body>
This is text in page<hr>
<div>This is text in div</div>
<p>This is text in paragraph</p>
</body>
</html>
PAGE 388
‫واآلن قم بتحديدهم جميعاً‪ ،‬أو اضغط ‪ Ctrl+A‬وأنت على الصفحة‬

‫لتحديد الكل‪ ،‬وسوف تري مثل الشكل التالي‪:‬‬
‫الحظ أن الطبيعي هو النص المكتوب على الصفحة‪ ،‬وتم التأثير بشكل مختلف‬
‫لكل من الذي يتم تحديده للوسم ‪ div‬والوسم ‪.p‬‬

first-letter ‫الحرف األول‬
‫ وهو‬،Pseudo Elements ‫ من الـ‬first-letter ‫المحدد‬
.‫ وسوف نبين فيما يلي إن شاء اهلل‬،‫الحرف األول من العنصر‬

<!DOCTYPE html>
<html>
<head>
<style>
div::first-letter, p::first-letter{
padding-left:3px;
padding-right:3px;
font-size:20px;
background:#222;
color:#eee;
}
</style>
</head>
<body>
</body>
</html>
PAGE 390
‫الحظ أنه تم التحكم في تنسيقات أول حرف من كل وسم ‪ ،div‬وأول‬

‫حرف من كل وسم ‪.p‬‬

first-line ‫السطر األول‬
‫ وهو السطر‬،Pseudo Elements ‫ من الـ‬first-line ‫المحدد‬
.‫ وسوف نبين فيما يلي إن شاء اهلل‬،‫األول من العنصر‬

<!DOCTYPE html>
<html>
<head>
<style>
div::first-line, p::first-line{
padding-left:3px;
padding-right:3px;
font-size:20px;
background:yellow;
color:red;
}
</style>
</head>
<body>
<div>
This is text in div, this is text in div
This is text in div, this is text in div
</div>
<p>
This is text in paragraph, this is text in paragraph
This is text in paragraph, this is text in paragraph
</p>
</body>
</html>
PAGE 392
‫الحظ أنه تم التحكم في تنسيقات أول سطر من كل وسم ‪ ،div‬وأول سطر‬

‫من كل وسم ‪.p‬‬

Lists ‫القوائم‬
‫ ألنك تتحكم فيه بكل‬،‫ شيء ممتع وجميل‬css ‫العمل مع القوائم في لغة‬
.ul ‫ أو‬ol ‫ بصرف النظر عن كونه‬،‫ وتستطيع التغيير كما تريد‬،‫تفاصيله‬
list-style-type ‫نوع القوائم‬

:‫يمكن التحكم في نوع القائمة كما يلي‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 394
‫وهنا استخدامنا الخاصية ‪ list-style-type‬لتغيير نوع النقاط‪ ،‬وتم‬

‫تخصيص القيمة ‪ square‬لها حتى يتحول شكل النقاط الى شكل المربع‪،‬‬
‫كما هو واضح في الشكل‪.‬‬
‫الحظ أنه تم التغيير باللغة ‪ css‬في نوع الوسم ‪ ul‬بدون أي تدخل في‬
‫اللغة ‪ html‬بأي شكل‪.‬‬
‫انتبه! فإن القيمة االفتراضية للخاصية ‪ list-style-type‬هي‬

‫‪ ،disc‬وهي النقطة العادية‪.‬‬

.circle ‫يمكن التحويل الى دائرة مفرغة باستخدام القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:circle;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 396
‫يمكن التحويل إلى ال شيء عن طريق القيمة ‪.none‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪ul‬‬
‫;‪list-style-type:none‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪<li>JS</li‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

.armenian ‫يمكن التحويل الى األرميني عن طريق القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:armenian;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 398
‫يمكن التحويل الى كاتاكانا اليابانية عن طريق القيمة ‪.katakana‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪ul‬‬
‫;‪list-style-type:katakana‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

.katakana-iroha ‫ بالقيمة‬katakana-iroha ‫تحويل الى‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:katakana-iroha;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 400
‫التحويل لـ ‪ cjk‬صينية يابانية كورية بالقيمة ‪.cjk-ideographic‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪ul‬‬
‫;‪list-style-type:cjk-ideographic‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

.georgian ‫التحويل الى الجورجية بالقيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:georgian;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 402
‫تحويل الى هيراغانا اليابانية بالقيمة ‪.hiragana‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪ul‬‬
‫;‪list-style-type:hiragana‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

.hiragana-iroha ‫ بالقيمة‬hiragana-iroha ‫تحويل الى‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:hiragana-iroha;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 404
‫التحويل الى اللغة العبرية بالقيمة ‪.hebrew‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪ul‬‬
‫;‪list-style-type:hebrew‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

.decimal ‫التحويل الى ارقام بالقيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:decimal;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 406
‫تحويل ألرقام مسبقة بصفر بالقيمة ‪.decimal-leading-zero‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪ul‬‬
‫;‪list-style-type:decimal-leading-zero‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

.lower-alpha ‫تحويل الى ابجدية انجليزية صغيرة بالقيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 408
‫التحويل الى ابجدية انجليزية كبيرة بالقيمة ‪.upper-alpha‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪ul‬‬
‫;‪list-style-type:upper-alpha‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

.lower-greek ‫ترقيم اغريقي او يوناني صغير بالقيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:lower-greek;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 410
‫ترقيم اغريقي او يوناني كبير بالقيمة ‪.upper-greek‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪ul‬‬
‫;‪list-style-type:upper-greek‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

.lower-latin ‫تحويل الى التيني صغير بالقيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:lower-latin;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 412
‫تحويل الى التيني كبير بالقيمة ‪.upper-latin‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪ul‬‬
‫;‪list-style-type:upper-latin‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

.lower-roman ‫تحويل الى روماني صغير بالقيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{
font-size:25px;
list-style-type:lower-roman;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 414
‫تحويل الى روماني كبير بالقيمة ‪.upper-roman‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪ul‬‬
‫;‪list-style-type:upper-roman‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫انتبه! جيداً والحظ أن التمارين السابقة كانت على الوسم ‪ ul‬بشكل‬
‫متعمد‪ ،‬وذلك ليتم االثبات لك أن لغة ‪ css‬قوية عن لغة ‪ ،html‬حيث‬
‫تغير أصلها‪ ،‬ولو استخدمت الوسم ‪ ol‬وغيرته الى ‪ disc‬سيتغير معك‬
‫بشكل طبيعي‪ ،‬وكأنه ‪ ،ul‬ولكن ما سبق للتدريب‪ ،‬أما بالنسبة لك‪ ،‬فننصحك‬
‫أن تستخدم كل شيء في موضوعه‪ ،‬فإذا استخدمت نقاط عليك بالوسم ‪ul‬‬
‫وإذا استخدمت عناصر ترتيب عليك بالوسم ‪ ،ol‬كما تعلمت في كتاب‬
‫‪" html‬صخرة األساس" من قبل‪.‬‬
‫يمكن أيضاً انشاء قائمة برمز مخصص‪ ،‬وسبق وأن تحدثنا عن الرموز‬
‫باستفاضة في كتاب "صخرة األساس" للغة ‪ ،html‬كما يوجد رقم ‪hex‬‬
‫لكل رمز حرفي مثل ♥‪ ،‬أو ☺‪ ،‬أو ♣‪ ،‬وهكذا‪ ،‬فإنه وبفضل اهلل‬
‫يمكن انشاء ترقيم باستخدام رمز من هذه الرموز كما نريد‪ ،‬وهنا سوف‬
‫المنبه ⏰‪ ،‬وهو بكود ‪ hexadecimal‬بالرقم‬ ‫نستخدم رمز‬
‫والستخدام هذا الرقم السادس عشر في الخاصية‬ ‫"‪،"23F0‬‬
‫في لغة الـ ‪ css‬يتم وضع باك سالش قبل الرقم السادس‬ ‫‪content‬‬
‫"‪ "\23F0‬داخل القيمة التي سوف نعطيها للخاصية‬ ‫عشر‪ ،‬فيكون‬
‫أثناء االستخدام‪ ،‬وسوف يكون المثال بفضل اهلل كما يلي‪:‬‬ ‫‪content‬‬
‫‪PAGE 416‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪ul{ list-style-type:none; font-size:25px‬‬
‫} '‪ul li::before{ content:'\23F0‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ استخدام المحدد ‪ before‬للوسوم ‪ li‬فقط بداخل الوسم ‪.ul‬‬

:‫ كما يلي‬،‫ يمكن استخدام رمز الساعة الرملية‬،‫وبنفس الطريقة‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{ list-style-type:none; font-size:25px; }
ul li::before{ content:'\23F3' }
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
PAGE 418
:‫ويمكن إنشاء ترقيم باللغة العربية لخمسة عناصر كما يلي‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{ list-style-type:none; font-size:25px; }
ul li:nth-child(1)::before{ content:'\0623.'; }
ul li:nth-child(3)::before{ content:'\062C.'; }
ul li:nth-child(4)::before{ content:'\062F.'; }
</style>
</head>
<body>
<ul>
<li>‫<العنرص األول‬/li>
<li>‫<العنرص الثان‬/li>
<li>‫<العنرص الثالث‬/li>
<li>‫<العنرص الرابع‬/li>
<li>‫<العنرص الخامس‬/li>
</ul>
</body>
</html>

‫الحظ أنه تم تجميع هذا الكود بناء على خبراتك السابقة من هذا الكتاب‬
‫من أوله بفضل اهلل‪ ،‬فأوالً الرقم ‪ 0623‬للحرف "أ" والرقم ‪0628‬‬
‫للحرف "ب " والرقم ‪ 062C‬للحرف "ج" والرقم ‪ 062F‬للحرف "د"‬
‫والرقم ‪ 0647‬للحرف "ه"‪ ،‬وثانياً نقصد رقم العنصر ‪ li‬بشرط يكون‬
‫بداخل العنصر ‪ ،ul‬ثم نستخدم المحدد ‪ before‬لوضع الحرف قبله‪ ،‬ثم‬
‫بعد الحرف نقطة "‪ ،".‬وثالثاً يمكن أن تزيد عن خمسة عناصر بنفس‬
‫الطريقة ان شئت‪.‬‬
‫انتبه! فإنه يوجد طريقة أخري أكثر احترافية‪ ،‬وإلمكانية تجربتها رجاء‬
‫تشغيل الصفحة على المتصفح ‪ ،Firefox‬وهي كما يلي‪:‬‬
‫‪PAGE 420‬‬
<!DOCTYPE html>
<html>
<head>
<style>
@counter-style arabic{
system:cyclic;
symbols: '\0623' '\0628' '\062C' '\062F';
suffix: ".";
}
ul {
list-style-type: arabic;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>MySQL</li>
<li>PHP</li>
<li>OOP</li>
</ul>
</body>
</html>

‫وبعد تشغيل الصفحة على ‪ Firefox‬تظهر كما بالشكل التالي‪:‬‬
‫الحظ أن المحدد ‪ @counter-style‬لصناعة الترقيم‪ ،‬والحظ أنه‬

‫تم انشاء ترقيم باسم ‪ arabic‬والذي تم النداء عليه للوسم ‪ ul‬بعد‬
‫ذلك‪ ،‬والحظ أنه في الخاصية ‪ symbols‬تم وضع نفس الرموز التي‬
‫تم استخدامها للحروف العربية بدالً من الحروف نفسها‪ ،‬وبضبط‬
‫‪ system:cyclic‬فهو يعيد الترقيم من جديد إذا وصل الى نهاية‬
‫الرموز الموضوعة وتم وضع عناصر زائده لظهور مثل هذا‪ ،‬والخاصية‬
‫‪ suffix‬هي الفاصل بين الترقيم والمحتوي ‪.li‬‬
‫‪PAGE 422‬‬
‫صورة القائمة ‪list-style-image‬‬
‫هو موضوع شيق في القوائم‪ ،‬حيث إنك تستخدم صورة للقائمة بدالً من‬
‫الحروف المعروفة‪ ،‬وحتى الغير معروفة‪ ،‬ولكن سنحتاج صورة لنجرب بها‬
‫هذا الموضوع‪ ،‬واآلن سوف نقوم بتحميل صورة لإلطار موجودة على موقع‬
‫‪ mdn.mozillademos.org‬من الرابط التالي لنستخدمها‪:‬‬
‫‪https://mdn.mozillademos.org/files/11981/starsolid.gif‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{ ‪ul‬‬
‫;)'‪list-style-image:url('starsolid.gif‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ عن طريق ضبط‬،‫ تحولت الى شكل الصورة‬ul ‫الحظ أن نقاط القائمة‬

.url ‫ على مكان ملف الصورة بـ‬list-style-image ‫الخاصية‬
PAGE 424
list-style-position ‫موضع القائمة‬
:‫ ويمكن توضيحه بالمثال التالي‬،‫هو موضع عناصر القائمة‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{ font-size:30px; }
ul li.parent{ list-style-position:outside; }
ul li.child{ list-style-position:inside; }
</style>
</head>
<body>
<ul>
<li class="parent">Web</li>
<li class="child">HTML</li>
<li class="child">CSS</li>
<li class="child">JS</li>
<li class="parent">Design</li>
<li class="child">Photoshop</li>
<li class="child">AutoCAD</li>
</ul>
</body>
</html>

،ul ‫ الموجودة داخل‬li ‫ للوسوم‬parent ‫الحظ عمل كالس باسم‬

outside ‫ له على القيمة‬list-style-position ‫وضبط خاصية‬
،ul ‫ بداخل‬li ‫ للوسوم‬child ‫ وتم عمل كالس باسم‬،‫وهي االفتراضية‬
inside ‫ له على القيمة‬list-style-position ‫وضبط خاصية‬
‫ كما هو واضح في‬،‫وهي تجعل العناصر تكون بالداخل قليالً عن الطبيعي‬
.‫الصورة السابقة‬
PAGE 426
list-style ‫خاصية القائمة‬
‫ وهي خاصية عامة تشمل‬،CSS ‫كما تعودنا من قبل من خصائص الـ‬
:‫ وسوف نبين إن شاء اهلل فيما يلي‬،‫القوائم‬
<!DOCTYPE html>
<html>
<head>
<style>
ul{ list-style:url('starsolid.gif'); }
ol{ list-style:upper-alpha inside; }
ul.lang{ list-style:none; }
</style>
</head>
<body>
<ul>
<li>HTML</li><li>CSS</li>
</ul>
<ol>
<li>Photoshop</li><li>AutoCAD</li>
</ol>
<ul class="lang">
<li>Java</li><li>C#</li>
</ul>
</body>
</html>

‫ أو‬،none ‫ يمكن اعطاؤها قيمة‬list-style ‫الحظ أن الخاصية‬

،‫ أو قيمة رابط صورة‬،upper-alpha ‫ أو قيمة‬،inside ‫قيمة‬
.‫وذلك ببساطة ألنها خاصية عامة للقوائم‬
PAGE 428
‫الجداول ‪Tables‬‬
‫واآلن نريد أن نغير من شكل الجداول التقليدي‪ ،‬والذي كما بالشكل التالي‪:‬‬
‫ونصل الى ان نجعل الجدول مثل الشكل التالي‪ ،‬أو ما يشابهه‪:‬‬
‫الحظ أن لغة الـ ‪ css‬وضعت تنسيق جذاب وجميل للجدول‪ ،‬بفضل اهلل‪،‬‬
‫ونحن اآلن سوف نستخدم خبراتنا السابقة التي تعلمناها من هذا الكتاب‪،‬‬
‫من أوله‪ ،‬وسوف نحاول أن نتدرج في صناعة هذا الجدول لنتفهمه جيداً‪.‬‬

‫ أساس الجدول وبياناته وخلفية الصفحة‬:ً‫أوال‬
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body{ background:#eee; }
</style>
</head>
<body>
<table>
<tr><th>Number</th><th>Name</th><th>Salary</th></tr>
<tr><td>111</td><td>Ahmed</td><td>6000</td></tr>
<tr><td>222</td><td>Amr</td><td>6100</td></tr>
<tr><td>333</td><td>Ehab</td><td>6300</td></tr>
<tr><td>444</td><td>Adel</td><td>7500</td></tr>
<tr><td>555</td><td>Mahmoud</td><td>8000</td></tr>
</table>
</body>
</html>
PAGE 430
‫ طمس إطار الجدول وعمل العرض بالكامل‬:ً‫ثانيا‬
<!DOCTYPE html>
<html>
<head>
<style>
table{ border-collapse: collapse; width:100%; }
</style>
</head>
<body>
<table>
</table>
</body>
</html>
.‫ ولرؤيتها اضبط إطار الجدول إن شئت‬،collapse ‫طمس اإلطارات بـ‬

‫ ضبط عناوين الجدول‬:ً‫ثالثا‬
<!DOCTYPE html>
<html>
<head>
<style>
th{
height:25px; text-align:left; vertical-align: top;
background-color: #800080; color: #edd8ed;
}
</style>
</head>
<body>
<table border="1">
</table>
</body>
</html>
PAGE 432
‫ ضبط الحشو للخاليا وعمل اإلطار من األسفل‬:ً‫رابعا‬
<!DOCTYPE html>
<html>
<head>
<style>
th{
}
th, td{ padding:10px; border-bottom:1px solid #ddd; }
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 434
‫ ضبط لون خلفية الصفوف الزوجية والفردية‬:ً‫خامسا‬
<!DOCTYPE html>
<html>
<head>
<style>
th{
}
tr:nth-child(even){ background-color: #edc3ed; }
tr:nth-child(odd){ background-color: #e3a3e3; }
</style>
</head>
<body>
<table>
</table>
</body>
</html>

‫ وإذا جعلنا اإلطار السفلي‬،‫واآلن بفضل اهلل وصلنا الى جدول بشكل جميل‬
:‫ سيكون كما بالشكل التالي‬،‫باللون األبيض‬
PAGE 436
‫أكواد تطور بناء الجدول‬
‫ والتي من خاللها تم الوصول الى‬،‫ فقط‬css ‫اآلن سوف نسرد أكواد‬
.‫الجدول السابق بكل تنسيقاته‬
:ً‫أوال‬
:‫ثم‬
th{
}
:‫ثم‬
th, td{ padding:10px; border-bottom:1px solid #fff; }
:‫ثم‬
.‫انتبه! والحظ أن األكواد مع فهمها وترتيبها سهل بفضل اهلل‬

‫تصميم تطور بناء الجدول‬
‫ والتي من خاللها تم الوصول الى الجدول‬،‫اآلن سوف نسرد صور فقط‬
.‫السابق بكل تنسيقاته‬
:ً‫أوال‬
:‫ثم‬
:‫ثم‬
PAGE 438
‫ثم‪:‬‬
‫ثم‪:‬‬

‫جداول أخري‬
‫بفضل اهلل سوف نبدأ تأليف تصاميم مجموعة مختلفة من الجداول‪ ،‬من‬
‫حيث األلوان‪ ،‬والنقوش‪ ،‬وأشياء أخري كثيرة‪ ،‬لتتناسب مع جميع‬
‫األغراض‪ ،‬وبدون شرح‪ ،‬ألن كل ما سنستخدمه إن شاء اهلل‪ ،‬تم شرحه‬
‫فيما سبق‪ ،‬وبفضل اهلل سوف نفعل مثل التالي إن شاء اهلل‪:‬‬
‫هذه الصور صغيرة‪ ،‬وبالتنفيذ ستتضح التفاصيل‪ ،‬وأول جدول تم عملة‪.‬‬
‫‪PAGE 440‬‬
‫ ألننا سوف نستخدم أشياء متداخلة لنقوم بتكوين شيء‬،ً‫انتبه! وركز جيدا‬
‫ فيجب عليك أن تركز مع كل خاصية يتم كتابتها إذا كنت تريد‬،‫معين‬
.‫ وأيضاً ال تنسي أنه لم يتم الشرح كما ذكرنا من قبل‬،‫الفهم‬
:‫ " قم بكتابة الكود التالي ثم احفظه‬1 ‫كود! " جدول‬
<!DOCTYPE html>
<html>
<head>
<style>
th{
background-color: #00801e; color: #dbf2e1;
}
tr:nth-child(even){ background-color: #96e0a7; }
tr:nth-child(odd){ background-color: #b7ebc4; }
</style>
</head>
<body>
<table>
<tr><td>666</td><td>Eslam</td><td>9000</td></tr>
<tr><td>777</td><td>Khaled</td><td>8400</td></tr>
</table>
</body>
</html>

PAGE 442
<!DOCTYPE html>
<html>
<head>
<style>
th{
background-color: #800045; color: #f0d6e4;
}
th, td{ padding:10px; border-right:1px solid #fff; }
tr:nth-child(even){ background-color: #dd9abe; }
tr:nth-child(odd){ background-color: #efccdf; }
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 444
<!DOCTYPE html>
<html>
<head>
<style>
th{
background-color: #007b80; color: #c7edef;
}
th, td{ padding:10px; }
tr:nth-child(even){ background-color: #6bcace; }
tr:nth-child(odd){ background-color: #b0e7ea; }
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 446
<!DOCTYPE html>
<html>
<head>
<style>
th{
background-color: #7b8000; color: #e8eabf;
}
th, td{ padding:10px; border:1px solid #fff; }
tr:nth-child(even){ background-color: #d6d979; }
tr:nth-child(odd){ background-color: #f0f2b4; }
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 448
<!DOCTYPE html>
<html>
<head>
<style>
th{
background-color: #620080; color: #e8cbf0;
}
th, td{ padding:10px; border-bottom:2px groove #fff; }
tr:nth-child(even){ background-color: #d09de0; }
tr:nth-child(odd){ background-color: #e1c6ea; }
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 450
<!DOCTYPE html>
<html>
<head>
<style>
th{
background:linear-gradient(navy, blue); color: #fff;
}
th, td{ padding:10px; border-top:3px ridge #fff; }
tr:nth-child(even){ background:linear-gradient(#7d7dd6,
#b6b6e8); }
tr:nth-child(odd){ background:linear-gradient(#b6b6e8,
#7d7dd6); }
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 452
<!DOCTYPE html>
<html>
<head>
<style>
th{
background:linear-gradient(to right, navy, blue); color: #fff;
}
th, td{
padding:10px; border-right:3px ridge #fff;
}
tr:nth-child(even){
background:linear-gradient(to right, #7d7dd6, #b6b6e8);
}
tr:nth-child(odd){
background:linear-gradient(to right, #b6b6e8, #7d7dd6);
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 454
<!DOCTYPE html>
<html>
<head>
<style>
th{
background:linear-gradient(darkred, red, darkred);
color: #fff;
}
th, td{
padding:10px; border-right:3px ridge #fff;
}
td:nth-child(even){
background:linear-gradient(to right, red, gold);
}
td:nth-child(odd){
background:linear-gradient(to left, red, gold);
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 456
<!DOCTYPE html>
<html>
<head>
<style>
th{
background:linear-gradient(navy, blue, navy); color: #fff;
}
th:not(:last-child), td:not(:last-child){
border-right:3px ridge #fff;
}
td:nth-child(even){
background:linear-gradient(to right, #7d7dd6, #b6b6e8);
}
td:nth-child(odd){
background:linear-gradient(to left, #7d7dd6, #b6b6e8);
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 458
<!DOCTYPE html>
<html>
<head>
<style>
th{
background:radial-gradient(blue, navy); color: #fff;
}
th:not(:last-child), td:not(:last-child){
border-right:3px ridge #fff;
}
td:nth-child(even){
background:radial-gradient(#7d7dd6, #b6b6e8);
}
td:nth-child(odd){
background:radial-gradient(#7d7dd6, #b6b6e8);
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 460
<!DOCTYPE html>
<html>
<head>
<style>
th{
background:radial-gradient(blue, navy) left/5px;
color: #fff;
}
th, td{
padding:10px; border-bottom:3px ridge #fff;
}
td:nth-child(even){
background:radial-gradient(#7d7dd6, #b6b6e8) left/5px;
}
td:nth-child(odd){
background:radial-gradient(#7d7dd6, #b6b6e8) left/5px;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 462
<!DOCTYPE html>
<html>
<head>
<style>
th{
background:linear-gradient(to right,#800080, #a83ca8) left/1px;
color: #f4caf4;
}
th, td{
}
tr:nth-child(even){
background:linear-gradient(to right, #e8a8e8, #edd2ed) left/5px;
}
tr:nth-child(odd){
background:linear-gradient(to left, #de93de, #edd2ed) left/5px;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 464
<!DOCTYPE html>
<html>
<head>
<style>
th{
background-color: #800045; color: #f0d6e4;
}
tr:nth-child(even){ background-color: #dd9abe; }
tr:nth-child(odd){ background-color: #efccdf; }
td, th{ box-shadow:0 5px rgba(255,242,0,0.2); }
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 466
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse; width:100%;
border:4px groove #d6d979;
}
th{
background-color: #7b8000; color: #e8eabf;
}
tr:nth-child(even){ background-color: #d6d979; }
tr:nth-child(odd){ background-color: #f0f2b4; }
td, th{ box-shadow:3px 3px 3px rgba(0,0,0,0.2); }
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 468
<!DOCTYPE html>
<html>
<head>
<style>
table{ border-collapse:collapse; width:100%; }
th{
background-color: #414040; color: #edecec;
}
tr:nth-child(even){ background-color: #b7b4b4; }
tr:nth-child(odd){ background-color: #e2dada; }
td, th{
box-shadow:0 3px rgba(0,0,0,0.2);
text-shadow:3px 3px 3px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 470
:‫ "قم بكتابة الكود التالي ثم احفظه‬16 ‫كود! " جدول‬
<!DOCTYPE html>
<html>
<head>
<style>
th{
background:radial-gradient(#800080, #a83ca8) left/5px 5px;
color: #f4caf4;
}
th, td{
}
tr:nth-child(even){
background:radial-gradient(#e8a8e8, #edd2ed) left/5px 5px;
}
tr:nth-child(odd){
background:radial-gradient(#de93de, #edd2ed) left/5px 5px;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 472
:‫ "قم بكتابة الكود التالي ثم احفظه‬17 ‫كود! " جدول‬
<!DOCTYPE html>
<html>
<head>
<style>
th{
background:radial-gradient(#007b80, #c7edef) left/9px 2px;
}
tr:nth-child(even){
background:radial-gradient(#6bcace, #b0e7ea) left/2px 9px;
}
tr:nth-child(odd){
background:radial-gradient(#6bcace, #b0e7ea) left/9px 2px;
}
td, th{
box-shadow:inset 0 0 30px white;
border:1px solid #007b80;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>

PAGE 474
caption-side ‫مكان عنوان الجدول‬
‫ أي‬،top ‫ وهي‬،‫ تأخذ قيمة افتراضية‬caption-side ‫الخاصية‬
،bottom ‫ ولو أخذت القيمة‬،‫وضع العنوان الرئيسي للجدول باألعلى‬
:‫ وسنجرب بالكود! التالي‬،‫سيكون عنوان الجدول باألسفل‬
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse: collapse; width:100%;
caption-side:bottom;
}
th, caption{
height:25px; vertical-align: top;
}
</style>
</head>
<body>
<table>
<caption><b>Employees Data</b></caption>
</table>
</body>
</html>

‫الحظ أن عنوان الجدول أصبح‬

bottom ‫باألسفل بالقيمة‬
PAGE 476
‫الخاليا الفارغة ‪empty-cells‬‬
‫الخاصية ‪ empty-cells‬تأخذ القيمة ‪ show‬بشكل افتراضي‪ ،‬ولو‬
‫أخذت القيمة ‪ ،hide‬ستخفي أي خلية فارغة‪ ،‬وجرب بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>My Page</title‬‬
‫>‪<style‬‬
‫{‪table‬‬
‫;‪width:100%‬‬ ‫;‪empty-cells:hide‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<table border="1‬‬
‫>‪<tr><th>Number</th><th>Name</th><th>Salary</th></tr‬‬
‫>‪<tr><td>111</td><td>Ahmed</td><td>6000</td></tr‬‬
‫>‪<tr><td>222</td><td>Amr</td><td></td></tr‬‬
‫>‪<tr><td></td><td>Ehab</td><td>6300</td></tr‬‬
‫>‪</table‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أن الخاليا الفارغة‪ ،‬غير موجودة‪ ،‬وتم اظهار الـ ‪border‬‬

‫للجدول ليكون هذا واضحاً‪.‬‬
table-layout ‫تنسيق الجدول‬
‫ وتأخذ القيمة‬،‫ لتنسيق الجدول بطريقة معينة‬،table-layout ‫خاصية‬
.‫ ليكون ثابت على األعمدة‬،fixed ‫ او‬،ً‫ لينسق تلقائيا‬auto
<!DOCTYPE html>
<html>
<head>
<style>
#tbl1{ width:100%; table-layout:auto; }
#tbl2{ width:100%; table-layout:fixed; }
</style>
</head>
<body>
<table id="tbl1" border="1">
<tr><th>Number</th><th>Name</th></tr>
<tr><td>111</td><td>Ahmed</td></tr>
<tr><td>222</td><td>Amr</td></tr>
<tr><td>333</td><td>Ehab</td></tr>
</table>
<hr>
<tr><th>Number</th><th>Name</th></tr>
<tr><td>444</td><td>Omar</td></tr>
<tr><td>555</td><td>Zakariya</td></tr>
<tr><td>666</td><td>Yahya</td></tr>
</table>
</body>
</html>
PAGE 478
‫ ويمكن توضيح‬،‫ ليتضح لنا الفرق‬100% ‫الحظ أنه تم عمل العرض‬

:‫ بالكود! التالي‬،‫ بطريقة أخري‬fixed ‫القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
#tbl1{ width:90px; table-layout:fixed; }
</style>
</head>
<body>
<tr><th style="color:red">Number</th><th>Name</th></tr>
<tr><td>111</td><td>Ahmed</td></tr>
<tr><td>222</td><td>Amr</td></tr>
<tr><td>333</td><td>Ehab</td></tr>
</table>
</body>
</html>

‫ خرج الكالم عن‬،‫ وتصغير عرض الجدول‬،fixed ‫الحظ أنه مع القيمة‬

.‫ لما حدث ذلك‬auto ‫ ولو تم التبديل بالقيمة‬،‫الخاليا‬
PAGE 480
‫الموضع ‪Position‬‬
‫مفهوم الموضع‬
‫انتبه! وركز جيداً ألن هذا الموضوع هام جداً أكثر مما تتخيل‪.‬‬
‫إذا تم كتابة كود! مثل الكود التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<img src="egypt.jpg" width="90" height="50"><input‬‬
‫>‪<input><button>Button</button><p>This is p tag</p‬‬
‫>‪<div>This is div tag</div><h1>Welcome</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫سوف يتم انشاء العناصر كما نعرف مثل التالي‪:‬‬
‫ولو اردت التحكم في التغيير‪ ،‬فسوف تغير مثالً من ‪ inline‬الى ‪block‬‬

‫أو من ‪ block‬الى ‪ ،inline‬ويمكن وضع رمز المسافة‪ ،‬أو التحكم في‬
‫التنسيق بالجداول‪ ،‬أو تغيير الحشو والهامش‪ ،‬ولكن الموضوع هنا مختلف‬
‫تماماً‪ ،‬فرجاء انتبه! وركز جيداً فيما يلي‪.‬‬
‫هل سألت نفسك ذات مرة‪ ،‬ما إذا كنت تريد انشاء العناصر كما يلي‪:‬‬
‫انتبه! والحظ أن كل شيء تغير‪ ،‬وكل العناصر خرجت عن طبيعتها‬

‫المعروفة‪ ،‬فأصبح هناك وسوم على بعضها‪ ،‬ووسوم تنقلت من أماكنها‪،‬‬
‫وكأنك أمسكتها بيدك وحركتها كما تريد‪ ،‬وأيضاً انتبه! للعناصر‪ ،‬حيث‬
‫يوجد عنصر في مكان مع عنصر آخر في نفس المكان‪ ،‬فإيهما يظهر فوق‬
‫اآلخر ليغطي علية‪ ،‬والسؤال اآلن هو كيف نفعل مثل هذه األشياء بفهم؟‬
‫وبفضل اهلل الجواب هو أنك ستفعلها بسهولة إن شاء اهلل‪ ،‬ولكن انتبه!‬
‫وركز جيداً لتتأسس أوالً بفهم‪ ،‬ثم تطبق‪.‬‬
‫‪PAGE 482‬‬
‫الموضع الطبيعي والتغيير‬
‫يتم وضع العناصر ان كانت على ‪ ،inline‬مثل الشكل التالي‪:‬‬
‫ويتم وضع العناصر ان كانت على ‪ ،block‬مثل الشكل التالي‪:‬‬
‫واآلن!‪ ،‬ماذا لو أردنا وضعهم كل عنصر في مكان مختلف‪ ،‬مثل التالي‪:‬‬

‫وماذا لو أردنا وضعهم في شكل متداخل مع تحديد ايهم يظهر فوق اآلخر‪،‬‬
‫مثل الشكل التالي‪:‬‬
‫وماذا لو أردنا وضع حاوية داخل حاوية أخري مع ضبط مكانها بناء‬
‫على الحاوية األم‪ ،‬مثل الشكل التالي‪:‬‬
‫بإذن اهلل فيما يلي سوف نتفهم هذا وأكثر بفضل اهلل‪.‬‬
‫‪PAGE 484‬‬
‫أبعاد الحواف‬
‫البد أن تعرف األبعاد عن الحواف جيداً‪ ،‬قبل الشروع في الموضع‪.‬‬
‫البعد عن الحافة العليا هو ‪ ،top‬وسوف نعبر عنه ونميزه باللون األحمر‪،‬‬

‫والشكل التالي يوضحه ويعبر عنه‪:‬‬

،‫ وسوف نعبر عنه باللون األزرق‬،left ‫البعد عن الحافة اليسرى هو‬
:‫والشكل التالي يوضحه ويعبر عنه‬
PAGE 486
‫البعد عن الحافة اليمنى هو ‪ ،right‬وسوف نعبر عنه باللون األخضر‪،‬‬
‫والشكل التالي يوضحه ويعبر عنه‪:‬‬

،‫ وسوف نميزه باللون الرمادي‬،bottom ‫البعد عن الحافة السفلى هو‬
:‫والشكل التالي يوضحه ويعبر عنه‬
PAGE 488
‫‪،) top,‬‬ ‫( ‪left, right, bottom‬‬ ‫إذاً‪ ،‬األربع ابعاد الرئيسية هي‬
‫والصورة التالية تعبر عنهم‪:‬‬
‫وكل هذه خواص في لغة ‪ ،css‬وكل خاصية منهم تأخذ قيمة تعبر فيها‬
‫عن المسافة بين الحافة والعنصر‪.‬‬

‫أنواع األوضاع‬
‫العناصر تأخذ قيمة الوضع لتحتل مكان على صفحة الويب‪ ،‬واألوضاع على‬
‫صفحة الويب باختصار‪ ،‬كما يلي‪:‬‬
‫الوضع ‪( static‬الطبيعي)‬
‫هو الوضع الساكن االفتراضي ألي عنصر وال يتأثر بـ ‪top, left,‬‬
‫‪right, bottom‬‬
‫الوضع ‪( relative‬مرن مع العناصر)‬

‫هو وضع نسبي ‪ ،‬حيث يتم تحديد أبعاده من بعد أقرب عنصر له‬
‫الوضع ‪( absolute‬حر في أي مكان)‬

‫هو الوضع الحر ‪ ،‬أي يتم وضعة في أي مكان بشكل مستقل‬
‫الوضع ‪( fixed‬حر والصق بثبات)‬

‫هو وضع الصق ‪ ،‬وهو مثل ‪ absolute‬ولكن أضف على ذلك انه ال‬
‫يختفي أبداً حتى لو تم تحريك شريط التمرير للصفحة‬
‫الوضع ‪( sticky‬مرن والصق متغير)‬

‫هو وضع مرن ‪ relative‬إذا لم تمر عليه‪ ،‬ويلصق بثبات مثل ‪fixed‬‬
‫إذا مررت عليه‪ ،‬ثم يظل ثابتاً طالما أنت تحته‪.‬‬
‫‪PAGE 490‬‬
‫ظهور عنصر على آخر‬
‫عندما تقوم بإنشاء عنصران على صفحة الويب الخاصة بك‪ ،‬ويكونان‬
‫مشتركان في نفس الموضع‪ ،‬وفي مكان واحد‪ ،‬فالبد أن يظهر أحدهما على‬
‫اآلخر‪ ،‬مثل أن تقف أنت وصاحبك في صف طابور‪ ،‬فإذا كنت أنت في األمام‪،‬‬
‫فسوف تظهر ويختفي صاحبك‪ ،‬وإذا كان صاحبك هو الذي في األمام‪،‬‬
‫ستختفي ويظهر صاحبك‪ ،‬ولنتفهم أكثر بشكل عملي‪ ،‬تابع ما يلي‪:‬‬
‫انظر الى الشكل التالي‪:‬‬
‫والحظ أن الزر ظاهر على مربع النص‪.‬‬
‫ثم انظر الى الشكل التالي‪:‬‬
‫والحظ أن مربع النص هو الذي ظهر على الزر‪.‬‬

‫واآلن هيا بنا لنتعرف كيفية ظهور العناصر على بعضها‪ ،‬وهو أمر سهل‬
‫عن طريق خاصية باسم ‪ ،z-index‬وهي التي تتحكم في ظهور عنصر‬
‫على اآلخر حسب القيمة التي تأخذها تلك الخاصية‪ ،‬فالعنصر الذي يأخذها‬
‫بقيمة أكبر من قيم ‪ z-index‬للعناصر األخرى يفوز بالظهور‪ ،‬ولنتفهم‬
‫أكثر‪ ،‬الحظ وانظر الى الشكل التالي‪:‬‬
‫وانظر أيضاً الى الشكل التالي‪:‬‬
‫ثم الحظ أنه عند وجود قيمة أكبر للخاصية ‪ z-index‬يتم اظهار‬
‫العنصر على عنصر ذا قيمة أقل منه‪.‬‬
‫‪PAGE 492‬‬
‫ملخص مفهوم الموضع‬
‫بفضل اهلل وعونه تحدثنا حتى اآلن عن‪ ،‬مفهوم الموضع‪ ،‬وطبيعة الموضع‪،‬‬
‫وأبعاد الحواف‪ ،‬وأنواع المواضع‪ ،‬وظهور العناصر على بعض‪ ،‬ولتلخيص‬
‫كل هذا بفضل اهلل ركز على الشكل التالي‪:‬‬
‫وبفضل اهلل عند التركيز جيداً في الشكل السابق‪ ،‬سوف يثبت في ذهنك دائماً‬
‫بفضل اهلل مفاهيم األوضاع التي تجعلك متمكن بفضل اهلل في موضوع الـ‬
‫‪ ،position‬ألنه كما ذكرنا من قبل هام جداً‪.‬‬
‫انتبه! فإن هذه الصفحة ملخص لموضوع الـ ‪ ،position‬نعم هي كذلك‬

‫بفضل اهلل‪ ،‬ولكنها ال تغنيك عن ترك ما تم شرحه بفضل اهلل‪ ،‬أو ترك ما‬
‫سوف يتم شرحه إن شاء اهلل‪.‬‬

static ‫الوضع‬
‫ وكما ذكرنا من قبل أنه ال يتأثر بأبعاد‬،‫هذا هو الطبيعي أو االفتراضي‬
:‫ تابع المثال التالي‬،‫ ولمالحظة ذلك‬،‫الحواف‬
<!DOCTYPE html>
<html>
<head>
<style>
h1{
position:static;
top:150px; left:150px;
}
</style>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
‫ ولو أنك أزلت تنسيقات لغة‬،‫ لم يتزحزح من مكانه‬h1 ‫الحظ أن العنصر‬

.‫ هو االفتراضي‬static ‫ ألن‬،‫ لن تجد هناك أي فرق‬،css ‫الـ‬
PAGE 494
‫الوضع ‪absolute‬‬
‫هذا الوضع يمكن تشبيهه كما يقال بالمصري بـ "الفتوة"‪ ،‬أو "الكومندو"‪،‬‬
‫أو "الكبير"‪ ،‬ألنه يستطيع أن يدخل أو يذهب أي مكان بدون إذن‪ ،‬وال يهتم‬
‫بأي عنصر أبداً‪ ،‬وسنعبر عنه بما يلي إن شاء اهلل‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h1‬‬
‫;‪position:absolute‬‬
‫;‪top:50px; left:150px‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>Welcome</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ من‬50px ‫ بمقدار‬h1 ‫ تم تحريك الوسم‬،‫الحظ أنه في المثال السابق‬
.‫ من الحافة اليسرى‬150px ‫ وتحرك بمقدار‬،‫الحافة العليا‬
<!DOCTYPE html>
<html>
<head>
<style>
h1{
position:absolute;
top:35px; left:90px; color:red;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<h2>Welcome 2</h2><h2>Welcome 2</h2><h2>Welcome 2</h2>
</body>
</html>
‫ وتم وضعها في‬،‫ ال تراعي أي عنصر آخر‬،h1 ‫الحظ أن حركة الوسم‬

.‫المكان المحدد‬
PAGE 496
‫الوضع ‪relative‬‬
‫هو يستجيب لك‪ ،‬حيث يتم وضعه في مكان كما تريد‪ ،‬ولكن يراعي العناصر‬
‫القريبة منه‪ ،‬وسوف نكتب نفس المثال التالي‪ ،‬مع التغيير الى ‪.relative‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h1‬‬
‫;‪position:relative‬‬
‫;‪top:35px; left:90px; color:red‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h2>Welcome 2</h2><h2>Welcome 2</h2><h2>Welcome 2</h2‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أنه يراعي ما بعده من عناصر‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
h1{
position:relative;
top:35px; left:90px; color:red;
}
</style>
</head>
<body>
<h2>Welcome 2</h2><h2>Welcome 2</h2><h2>Welcome 2</h2>
<h1>Welcome</h1>
</body>
</html>
.‫الحظ أنه يراعي ما قبله من عناصر‬
PAGE 498
‫الوضع ‪fixed‬‬
‫كل األوضاع السابقة‪ ،‬تكون موجودة في مكان ما في صفحة الويب‪ ،‬ولكن‬
‫إذا كان هناك عناصر أخري‪ ،‬وتم تحريك الـ ‪ scroll‬عن هذه‬
‫األوضاع‪ ،‬فسوف تختفي‪ ،‬أما الوضع ‪ ،fixed‬فهو وضع الصق‪ ،‬حتى ولو‬
‫كان هناك عناصر‪ ،‬وللتعرف عليه‪ ،‬ركز فيما يلي‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪body{ padding-top:25px; margin:0‬‬
‫{‪h1‬‬
‫;‪margin:0; width:100%‬‬
‫;‪position:fixed‬‬
‫;‪top:0px; left:0px‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h2>Hello 1</h2><h2>Hello 2</h2><h2>Hello 3</h2‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫واآلن انتبه! وحرك شريط التمرير‪ ،‬لتري مثل الشكل التالي‪:‬‬
‫نعم‪ ،‬انه ثابت تماماً‪ ،‬وكأنه معلق‪ ،‬ولكن رجاء انتبه! والحظ أنه ثابت‬
‫من األعلى‪ ،‬مع هامش صفر‪ ،‬والحظ في الكود أنه أخذ العرض بالكامل‪،‬‬
‫والحظ في الكود أن الوسم ‪ body‬يأخذ حشو من األعلى بمقدار ‪،25px‬‬
‫وذلك حتى ال يختفي أول عنصر وراء الـ ‪ h1‬الثابت‪ ،‬والحظ في الكود أن‬
‫الوسم ‪ h1‬الثابت يأخذ القيمة صفر من اليسار ومن األعلى‪.‬‬
‫‪PAGE 500‬‬
:‫ كما يلي‬،‫واآلن انتبه! ألننا سوف نجعله الصق من األسفل‬
<!DOCTYPE html>
<html>
<head>
<style>
body{ padding-bottom:25px; margin:0; }
h1{
margin:0; width:100%;
position:fixed;
bottom:0px; left:0px;
background:yellow;
color:red;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<h2>Hello 1</h2><h2>Hello 2</h2><h2>Hello 3</h2>
</body>
</html>

‫نعم‪ ،‬انه ثابت تماماً من األسفل‪ ،‬مع هامش صفر‪ ،‬والحظ في الكود أنه‬
‫أخذ العرض بالكامل‪ ،‬والحظ في الكود أن الوسم ‪ body‬يأخذ حشو من‬
‫األسفل بمقدار ‪ ،25px‬وذلك حتى ال يختفي آخر عنصر في الصفحة وراء‬
‫وسم الـ ‪ h1‬الثابت‪ ،‬والحظ في الكود أن الوسم ‪ h1‬الثابت يأخذ القيمة‬
‫صفر من اليسار ومن األسفل‪.‬‬
‫‪PAGE 502‬‬
:‫ كما يلي‬،‫واآلن انتبه! ألننا سوف نجعله الصق من اليسار‬
<!DOCTYPE html>
<html>
<head>
<style>
body{ padding-left:135px; margin:0; }
h1{
margin:0; width:130px; height:100%;
position:fixed;
bottom:0px; left:0px;
background:yellow;
color:red;
}
</style>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>

‫نعم‪ ،‬انه ثابت تماماً من اليسار‪ ،‬مع هامش صفر‪ ،‬والحظ في الكود أنه‬
‫أخذ العرض بمقدار يظهر الكلمة ‪ Welcome‬المكتوبة في الوسم ‪،h1‬‬
‫والحظ في الكود أن الوسم ‪ body‬يأخذ حشو من اليسار بمقدار عرض‬
‫الوسم ‪ 5px + h1‬ليصبح ‪ ،135px‬وذلك حتى ال تختفي جميع‬
‫العناصر وراء عرض الوسم ‪ h1‬الثابت‪ ،‬والحظ في الكود أن الوسم ‪h1‬‬
‫الثابت يأخذ القيمة صفر من اليسار ومن األسفل‪ ،‬وأيضاً أخذ الطول‬
‫بالكامل‪.‬‬
‫‪PAGE 504‬‬
‫واآلن انتبه! ألننا سوف نجعله الصق من اليمين‪ ،‬كما يلي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪body‬‬ ‫;‪padding-right:135px‬‬ ‫;‪margin:0‬‬
‫} ;‪direction:rtl‬‬
‫{‪h1‬‬
‫;‪margin:0; width:130px; height:100%‬‬
‫;‪position:fixed‬‬
‫;‪bottom:0px; right:0px‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫ا‬ ‫ا‬
‫>‪</h1‬أهل وسهل>‪<h1‬‬
‫>‪</h2‬مرحبا بكم ‪</h2><h2>2‬مرحبا بكم ‪<h2>1‬‬
‫>‪</h2‬مرحبا بكم ‪<h2>9‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫نعم‪ ،‬انه ثابت تماماً من اليمين‪ ،‬مع هامش صفر‪ ،‬والحظ في الكود أنه‬
‫أخذ العرض بمقدار يظهر الكلمة أهالً وسهالً المكتوبة في الوسم ‪،h1‬‬
‫والحظ في الكود أن الوسم ‪ body‬يأخذ حشو من اليمين بمقدار عرض‬
‫الوسم ‪ 5px + h1‬ليصبح ‪ ،135px‬وذلك حتى ال تختفي جميع‬
‫العناصر وراء عرض الوسم ‪ h1‬الثابت‪ ،‬والحظ أن الوسم ‪ h1‬الثابت‬
‫يأخذ القيمة صفر من اليسار ومن األسفل‪ ،‬وأيضاً أخذ الطول بالكامل‪،‬‬
‫والحظ أن اتجاه الوسم ‪ body‬يأخذ ‪ rtl‬ليناسب اللغة العربية‪.‬‬
‫‪PAGE 506‬‬
sticky ‫الوضع‬
fixed ‫ ويلصق بثبات مثل‬،‫ إذا لم تمر عليه‬relative ‫هو وضع مرن‬
.‫ ثم يظل ثابتاً طالما أنت تحته‬،‫إذا مررت عليه‬
<!DOCTYPE html>
<html>
<head>
<style>
h1{
position:sticky; top:5px;
margin-bottom:20px;
background:yellow; color:red;
}
</style>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>

:‫ لتري مثل الشكل التالي‬،ً‫واآلن حرك شريط التمرير قليال‬
:‫ لتري مثل الشكل التالي‬،ً‫واآلن حركه مرة أخري قليال‬
:‫ مثل الشكل التالي‬،‫ إذا نزل مرة أخري‬،‫واآلن سوف يثبت‬
PAGE 508
‫ومن المثال السابق‪ ،‬الحظ أن الوسم ‪ h1‬المقصود بالقيمة ‪،sticky‬‬
‫يوجد عناصر قبل منه‪ ،‬ويوجد عناصر بعد منه‪ ،‬وهو يراعيها وكأنه‬
‫‪ ،relative‬وبعد مرور شريط التمرير على الوسم ‪ ،h1‬ثم النزول أسفل‬
‫منه‪ ،‬أصبح ثابتاً وكأنه ‪ ،fixed‬وهذا هو الوضع ‪ sticky‬عملياً‬
‫على صفحة الويب‪.‬‬

‫التنظيم ‪Float‬‬
‫معني ‪float‬‬
‫الكلمة ‪ float‬تعني عائم‪ ،‬وتخيل معي مدرب السباحة‪ ،‬وهو يقول لمتدربين‬
‫السباحة أن يعوموا ناحية اليمين‪ ،‬فيكون اتجاههم بالكامل نحو اليمين‪ ،‬أو‬
‫يقول لهم عوموا ناحية اليسار‪ ،‬فيكون اتجاههم بالكامل نحو اليسار‪،‬‬
‫وباختصار فإن هذا المعني يمثل الـ ‪ ،float‬حيث يتم وضع العناصر نحو‬
‫اليمين‪ ،‬أو نحو اليسار‪ ،‬وللتجارب تابع ما يلي‪.‬‬
‫عندما تتجه العناصر نحو اليسار أو نحو اليمين‪ ،‬وكأنك وضعت وسم‬
‫‪ span‬وبجواره وسم ‪ span‬آخر‪ ،‬وهكذا‪ ،‬أو كأنك وضعت وسم‬
‫‪ input‬وبجواره وسم ‪ input‬آخر‪ ،‬وهكذا‪ ،‬ولكن انتبه! فهنا ال نقصد‬
‫الـ ‪ ،display‬ولكن فقط نحاول التشبيه لك لتتفهم األمر‪.‬‬
‫يتم التحكم في الـ ‪ float‬عن طريق الخاصية ‪ ،float‬والقيمة‬

‫االفتراضية لها هي ‪ ،none‬أي ال يوجد ‪ float‬في األساس‪.‬‬
‫‪PAGE 510‬‬
float left ‫اتجاه العناصر نحو اليسار‬
:‫ كما يلي‬،‫واآلن سوف نبدأ بداية عادية‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
background:navy; color:lightblue; font-size:35px;
margin:5px; padding:5px; text-align:center;
}
</style>
</head>
<body>
<div>Div 1</div><div>Div 2</div><div>Div 3</div>
</body>
</html>
.‫ ومعروفة‬،‫ مع تنسيقات عادية‬،div ‫ وسوم‬9 ‫وكما نالحظ وجود‬

.ً‫ مع زيادة بسيطة جدا‬،‫ ألننا سوف نعيد نفس المثال‬،ً‫واآلن انتبه! جيدا‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
float:left;
}
</style>
</head>
<body>
</body>
</html>
‫ غير تغيير واضح وكلي على جميع الوسوم‬float:left ‫الحظ أن وضع‬

‫ مع العلم أننا لم نغير الخاصية‬،‫ كما هو في الشكل السابق‬،div
‫ إال‬،‫ ولم نغير أي شيء‬،width ‫ ولم نغير الخاصية‬،display
.left ‫ حيث أخذت القيمة‬،float ‫الخاصية‬
PAGE 512
‫واآلن قم بتصغير نافذة المتصفح‪ ،‬لتري مثل الشكل التالي‪:‬‬
‫واآلن مرة أخري قم بتصغير نافذة المتصفح‪ ،‬لتري مثل الشكل التالي‪:‬‬
‫وهذا لتالحظ المرونة‪ ،‬مع تغيرات الحجم‪.‬‬

float right ‫اتجاه العناصر نحو اليمين‬
:‫ كما يلي‬،‫واآلن سوف نبدأ بداية عادية‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
</style>
</head>
<body>
</body>
</html>
.‫ ومعروفة‬،‫ مع تنسيقات عادية‬،div ‫ وسوم‬9 ‫وكما نالحظ وجود‬
PAGE 514
‫واآلن انتبه! جيداً‪ ،‬ألننا سوف نعيد نفس المثال‪ ،‬مع زيادة بسيطة جداً‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫;‪background:navy; color:lightblue; font-size:35px‬‬
‫;‪margin:5px; padding:5px; text-align:center‬‬
‫;‪float:right‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div>Div 1</div><div>Div 2</div><div>Div 3</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أن وضع ‪ float:right‬غير تغيير واضح وكلي على جميع‬

‫الوسوم ‪ ،div‬كما هو في الشكل السابق‪ ،‬مع العلم أننا لم نغير الخاصية‬
‫‪ ،display‬ولم نغير الخاصية ‪ ،width‬ولم نغير الخاصية‬
‫‪ ،direction‬فقط الخاصية ‪ ،float‬حيث أخذت القيمة ‪.right‬‬

:‫ لتري مثل الشكل التالي‬،‫واآلن قم بتصغير نافذة المتصفح‬
:‫ لتري مثل الشكل التالي‬،‫واآلن مرة أخري قم بتصغير نافذة المتصفح‬
‫ وتالحظ أنها تتناسب مع اللغة‬،‫ مع تغيرات الحجم‬،‫وهذا لتالحظ المرونة‬

.‫ ألنها بدأت من اليمين‬،‫العربية‬
PAGE 516
‫ مع العناصر األخرى‬float ‫الـ‬
‫ وسوف‬،ً‫ يوجد شيء ينبغي االنتباه اليه جيدا‬،float ‫مع موضوع الـ‬
:‫نوضح هذا الشيء فيما يلي‬
<!DOCTYPE html>
<html>
<head>
<style>
p{ background:yellow; }
div{
font-size:25px;
float:left;
}
</style>
</head>
<body>
<input><input type="submit">
<p>This is p tag</p>
</body>
</html>

‫ ولكن‬،p ‫ ثم وسم‬،input ‫ ثم وسمين‬،ً‫ أوال‬div ‫الحظ وجود وسوم‬

:‫ سوف يحل؟‬br ‫ فهل وسم‬،‫الوضع على الصفحة غير مرغوب فيه‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
float:left;
}
</style>
</head>
<body>
<div>Div 7</div><div>Div 8</div><div>Div 9</div> <br>
<input><input type="submit"><p>This is p tag</p>
</body>
</html>
PAGE 518
:‫ سوف يحل؟‬hr ‫ فهل وسم‬،‫ النتيجة كما هي‬،‫ولألسف‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
float:left;
}
</style>
</head>
<body>
<div>Div 7</div><div>Div 8</div><div>Div 9</div> <hr>
</body>
</html>

:‫؟‬div ‫ ماذا لو وضعناهم قبل وسوم الـ‬،‫ لم يحل‬hr ‫لألسف الوسم‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
float:left;
}
</style>
</head>
<body>
</body>
</html>
PAGE 520
‫واآلن يتبين لنا‪ ،‬أنه ما قبل الـ ‪ ،float‬ال يكون فيه مشكلة‪ ،‬ولكن مشكلة‬
‫ما بعد الـ ‪ ،float‬الزالت قائمة‪ ،‬والحل إن شاء اهلل سيكون في درس عزل‬
‫الـ ‪ float‬بـ ‪ clear‬القادم‪ ،‬فرجاء متابعة الدروس‪.‬‬

clear ‫ بـ‬float ‫عزل الـ‬
:‫ من اليسار كما يلي‬float ‫يمكن عزل الـ‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
float:left;
}
</style>
</head>
<body>
<p style="clear:left;"></p>
</body>
</html>
PAGE 522
clear ‫ به خاصية‬،‫ فارغ‬p ‫ أنه تم وضع وسم‬،‫الحظ من الشكل السابق‬
‫ ولكن هذا العزل‬،float:left ‫ ليعزل الـ‬،left ‫تم ضبطها على القيمة‬
:‫ بالكود! التالي‬،‫ فيمكن العزل من اليمين‬،‫ال يصلح مع اليمين‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
float:right;
}
</style>
</head>
<body>
<p style="clear:right;"></p>
</body>
</html>

clear ‫ به خاصية‬،‫ فارغ‬p ‫ أنه تم وضع وسم‬،‫الحظ من الشكل السابق‬
‫ ولكن في‬،float:right ‫ ليعزل الـ‬،right ‫تم ضبطها على القيمة‬
:‫بعض األحيان تريد عمل صفحة مثل الكود! التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
.d1, .d2{ float:left; }
.d3, .d4{ float:right; }
</style>
</head>
<body>
<div class="d1">Div 1</div><div class="d2">Div 2</div>
</body>
</html>
.‫ ونحو اليسار‬،‫ نحو اليمين‬float ‫الحظ أنه يوجد‬
PAGE 524
.‫ كما يلي‬،‫ أي كان يمين أو يسار‬float ‫انتبه! فيمكن أن تقوم بعمل أي‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
.d1, .d2{ float:left; }
.d3, .d4{ float:right; }
</style>
</head>
<body>
<p style="clear:both;"></p>
</body>
</html>
.‫ لعزل الكل‬clear:both ‫الحظ أنه تم استخدام‬

box ‫الصندوق‬
box-shadow ‫ظل الصندوق‬
‫ وسوف‬،‫ واآلن نريد انشاء ظل للعناصر نفسها‬،‫من قبل قمنا بعمل ظل للنص‬
‫ في‬،‫ أثناء تجربة ظل النص‬،‫ التي تعاملنا معها من قبل‬،‫تكون بنفس الطريقة‬
.‫بعده وتغييره‬

<!DOCTYPE html>
<html>
<head>
<style>
div, h1{
width:300px;
box-shadow:5px 5px orange;
}
</style>
</head>
<body>
<h1>This is Heading 1</h1>
</body>
</html>
PAGE 526
‫الحظ وجود ظل باللون البرتقالي‪ ،‬والتحريك أفقياً بمقدار ‪ ،5px‬ثم‬

‫التحريك رأسياً بمقدار ‪.5px‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div, h1‬‬
‫;‪background-color:yellow; width:300px‬‬
‫;‪box-shadow:7px 0px orange‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ وجود ظل برتقالي‪ ،‬ويتحرك أفقياً بمقدار ‪ 7px‬وال يتحرك رأسياً‪،‬‬

‫فيظهر بهذا الشكل الجميل‪.‬‬
‫انتبه! فإنه يمكن ضبط التشويش‪ ،‬كما فعلنا مع ظل النص من قبل‪ ،‬وأيضاً‬
‫يمكن وضع أكثر من ظل بشكل مستقل لكل واحد‪.‬‬
‫واآلن سوف نقوم بعمل مثال به ظالن‪ ،‬األول برتقالي‪ ،‬والثاني أسود‪ ،‬مع‬
‫االختالف بين كل منهم‪ ،‬في الحركة والتشويش واللون‪ ،‬وذلك كما يلي‪:‬‬
‫‪PAGE 528‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div, h1‬‬
‫;‪background-color:yellow‬‬
‫‪box-shadow:9px 9px 15px orange,‬‬
‫;‪19px 19px 20px black‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أن الظل البرتقالي تحرك أفقياً ورأسياً بمقدار ‪ ،9px‬وتشوش بمقدار‬

‫‪ ،15px‬أما الظل األسود تحرك أفقياً ورأسياً بمقدار ‪ 19px‬وتم‬
‫التشويش عليه بمقدار ‪ ،20px‬كما هو واضح في الصورة‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:#fff;
width:300px; padding:9px;
text-shadow:1.5px 1.5px 5px black;
box-shadow:5px 5px 15px black;
}
</style>
</head>
<body>
<h1>This is Heading 1</h1>
</body>
</html>
‫ والخاصية‬text-shadow ‫انتبه! والحظ أنه لو تم حذف الخاصية‬

‫ ألن الوسم‬،‫ لن يكون أي شيء ظاهر على الصفحة‬box-shadow
‫ ولكن مع‬،‫ وكذلك الصفحة األساسية‬،‫ والنص لونه أبيض‬،‫ لونه أبيض‬div
.‫ أصبح شكله جذاب وجميل‬،‫الظالل‬
PAGE 530
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪h1‬‬
‫;‪color:#00f; margin:19px‬‬
‫;‪width:300px; padding:9px‬‬
‫;‪text-shadow:0 0 15px yellow‬‬
‫;‪box-shadow:0 0 15px yellow‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أنه مع عدم التحريك‪ ،‬وزيادة التشويش‪ ،‬تم عمل استنارة حول‬
‫العنصر‪ ،‬وحول النص المكتوب‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
width:150px; height:150px; margin:40px; padding:20px;
background:linear-gradient(to right,orange,yellow);
box-shadow:0 0 55px gold,
0 0 100px gold,
0 0 200px yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
،‫ والتدرج اللوني‬،‫ اإلطار‬radius ‫ عن طريق‬،‫الحظ أنه تم رسم شمس‬

.‫ مع التشويش الزائد عليه‬،‫والظل المتعدد‬
PAGE 532
<!DOCTYPE html>
<html>
<head>
<style>
h1{
width:300px; color:#fff;
margin:20px; padding:20px;
box-shadow:0 1px blue, 1px 0 blue,
-1px 0 blue, 0 -1px blue;
text-shadow:0 1px blue, 1px 0 blue,
-1px 0 blue, 0 -1px blue;
}
</style>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>

‫انتبه! فإن هذا ليس إطار‪ ،‬بل إنه ظل‪ ،‬وتم إنشاؤه بواسطة ثمانية من‬
‫الظالل‪ ،‬أربعة للوسم ‪ h1‬بالخاصية ‪ ،box-shadow‬وأربعة للنص‬
‫بالخاصية ‪.text-shadow‬‬
‫انتبه! فإنه يتم بأربعة خطوات متتالية‪ ،‬للوصول إلى اإلحاطة بالعنصر أو‬
‫النص من االتجاهات األربعة (اليمين‪ ،‬اليسار‪ ،‬األسفل‪ ،‬األعلى)‪ ،‬أوالً‪ :‬يتم‬
‫التحريك الرأسي إلى األسفل بالموجب بـ ‪ ،1px‬ثانياً‪ :‬يتم التحريك األفقي‬
‫إلى اليمين بالموجب بـ ‪ ،1px‬ثالثاً‪ :‬يتم التحريك الرأسي إلى األعلى‬
‫بالسالب بالقيمة ‪ ،-1px‬رابعاً‪ :‬يتم التحريك األفقي إلى اليسار بالسالب‬
‫بالقيمة ‪ ،-1px‬وبذلك يتم اإلحاطة باالتجاهات األربعة‪.‬‬
‫‪PAGE 534‬‬
<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color:#000; }
div{
width:150px; height:150px; margin:40px; padding:20px;
background:linear-gradient(to right,#eee,white);
border:0.20px ridge #eee;
box-shadow:0 0 55px white,
0 0 100px white,
0 0 200px #eee;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
،‫ والتدرج اللوني‬،‫ اإلطار‬radius ‫ عن طريق‬،‫الحظ أنه تم رسم قمر‬

.‫ وإطار خفيف‬،‫ مع التشويش الزائد عليه‬،‫والظل المتعدد‬

‫انتبه! فإنه يمكن قلب الظل الى الداخل بدالً من الخارج عن طريق القيمة‬
:‫ كما يلي‬inset
<!DOCTYPE html>
<html>
<head>
<style>
div{
background:#034a4d; color:#6bcace;
padding:30px; letter-spacing:3px;
font-family:impact; font-size:75px;
box-shadow:inset 0 0 30px white;
text-shadow:1px 1px 2px yellow;
border:1px solid #007b80;
}
</style>
</head>
<body>
<div>WELCOME</div>
</body>
</html>
PAGE 536
‫الحظ أنه تم عمل ظل داخلي باللون األبيض عن طريق القيمة ‪.inset‬‬

box-sizing ‫تحجيم الصندوق‬
‫ ثم تم ضبط‬،div ‫ وليكن مثالً الوسم‬،‫عند انشاء عنصر على صفحة الويب‬
‫ واإلطار‬،padding ‫ والحشو‬،height ‫ والطول‬،width ‫العرض‬
ً‫ وللتجربة أوال‬،ً‫ فإن العرض سوف يكبر تلقائيا‬،‫ لذلك الوسم‬،border
:‫ لهم نفس الخصائص بالكود! التالي‬div ‫ننشئ وسمين‬
<!DOCTYPE html>
<html>
<head>
<style>
div{ background:lightblue; color:navy; width:100px; height:50px; }
</style>
</head>
<body>
<div id="d1">HELLO</div><hr>
<div id="d2">WELCOME</div>
</body>
</html>
‫ اإلطار‬d1 ‫ واآلن انتبه! فسوف نغير للعنصر‬،‫الحظ أنهم مثل بعضهم‬

:‫ بالمثال التالي‬،d2 ‫ دون المساس بالعنصر‬،‫والحشو فقط‬
PAGE 538
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪div{ background:lightblue; color:navy; width:100px; height:50px‬‬
‫} ;‪#d1{ padding:20px; border:15px solid navy‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div id="d1">HELLO</div><hr‬‬
‫>‪<div id="d2">WELCOME</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ في الكود أن العرض والطول لكل منهما لم يتغير‪ ،‬فقط للوسم ‪،d1‬‬
‫تم تحديد اإلطار والحشو‪ ،‬فزاد حجم العنصر‪.‬‬

‫ والتي تأخذ قيمة افتراضية‬،box-sizing ‫واآلن يأتي دور الخاصية‬
‫ والقيمة األخرى لها هي‬،‫ أي يزيد الحشو واإلطار‬،content-box
،‫ أي يحتسب قيم الحشو واإلطار من الحجم األصلي‬،border-box
:‫وسنبينهم إن شاء اهلل بالكود! التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
border:10px solid navy;
padding:10px;
}
#d1{ box-sizing:content-box; }
#d2{ box-sizing:border-box; }
</style>
</head>
<body>
<div id="d1">D1</div><hr>
<div id="d2">D2</div>
</body>
</html>
PAGE 540
‫الحظ أن هناك وسمين ‪ ،div‬لهم نفس الخلفية‪ ،‬ونفس اللون‪ ،‬ونفس‬

‫اإلطار‪ ،‬ونفس العرض‪ ،‬ونفس الطول‪ ،‬ونفس الحشو‪ ،‬ولكن مع القيمة‬
‫‪ ،border-box‬تغير الوسم ‪.d2‬‬

box-decoration-break ‫ديكور السطر للصندوق‬
:‫للتوضيح قم بكتابة الكود! التالي ثم احفظه‬
<!DOCTYPE html>
<html>
<head>
<style>
span{
border-radius:10px;
padding:5px;
}
</style>
</head>
<body>
<span id="s1">Text 1 Text 2</span>
</body>
</html>
PAGE 542
:‫ بالكود! التالي‬،span ‫ داخل الوسم‬br ‫واآلن نجرب وضع الوسم‬
<!DOCTYPE html>
<html>
<head>
<style>
span{
border-radius:10px;
padding:5px;
}
</style>
</head>
<body>
<span id="s1">Text 1 <br> Text 2</span>
</body>
</html>
.break ‫الحظ أنه تم تقطيع النصوص من الـ‬

:‫ إلظهار كل سطر واضح‬،line-height ‫واآلن سوف نقوم بزيادة الـ‬
<!DOCTYPE html>
<html>
<head>
<style>
span{
border-radius:10px;
padding:5px; line-height:2.5;
}
</style>
</head>
<body>
</body>
</html>
PAGE 544
‫ ألن القيمة‬break ‫ فإنه هنا تم التقطيع بين الـ‬،!‫رجاء انتبه‬
،slice ‫ هي‬box-decoration-break ‫االفتراضية للخاصية‬
:‫ إللغاء التقطيع كما يلي‬clone ‫ ولكن يوجد قيمة‬،‫أي قطع‬
<!DOCTYPE html>
<html>
<head>
<style>
span{
border-radius:10px;
padding:5px; line-height:2.5;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
</style>
</head>
<body>
</body>
</html>

.‫ في الكود‬-webkit- ‫الحظ أنه تم استخدام بادئة المتصفح‬
.break ‫ قامت بإلغاء التقطيع بين كل‬،clone ‫الحظ أن القيمة‬
PAGE 546
‫الصندوق المنظم ‪Box Model‬‬

‫فكرة الصندوق المنظم‪ ،‬أو نموذج المحتوي‪ ،‬وهو الـ ‪،box model‬‬
‫هي فكرة بسيطة وجميلة في نفس الوقت‪ ،‬حيث تستخدم بعض ما تعلمناه‬
‫بفضل اهلل‪ ،‬لتصنع مربع تضع فيه محتوي بشكل أجمل من الشكل العادي‪،‬‬
‫حيث نستخدم‪ ،‬الهامش ‪ ،margin‬واإلطار ‪ ،border‬والحشو‬
‫‪ ،padding‬واإلطار الخارجي ‪ ،outline‬والظل ‪ ،shadow‬في‬
‫إنشاء هذا الصندوق الجميل‪ ،‬والشكل التالي يعبر عن الـ ‪:box model‬‬
‫كما تالحظ في الشكل السابق‪ ،‬حدود الـ ‪ margin‬والـ ‪border‬‬

‫والـ ‪ padding‬والـ ‪ ،content‬وأثناء التطبيق إن شاء اهلل سوف‬
‫نضيف إضافات أخري‪ ،‬على مجموعة من المراحل كما يلي‪.‬‬

‫ بدون أي تنسيق‬div ‫ وضع المحتوي داخل‬:ً‫أوال‬
:‫ فرجاء اكتبه ثم احفظه‬،‫سوف نبدأ بالكود! التالي‬
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
This is box model using CSS, is a fantastic language,
step by step. Now with hassouna academy.
</div>
</body>
</html>
PAGE 548
‫ لون النص والخلفية وحجم الخط‬:ً‫ثانيا‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

‫ الهامش والحشو ومحاذاة النص‬:ً‫ثالثا‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin:30px; padding:50px; text-align:justify;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
PAGE 550
‫ الطول والعرض‬:ً‫رابعا‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

‫ اإلطار‬:ً‫خامسا‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
border:30px solid #39b7e0;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
PAGE 552
‫ اإلطار الخارجي‬:ً‫سادسا‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
outline:1px solid navy;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

‫ تظليل الصندوق والنص‬:ً‫سابعا‬
<!DOCTYPE html>
<html>
<head>
<title>
My Box Model
</title>
<style>
div{
outline:1px solid navy;
box-shadow:3px 3px 1px gray;
text-shadow:0 0 120px #fff,
1px 1px 0.5px rgba(57,183,224,0.7);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
PAGE 554
‫وكما هو واضح أمامنا بفضل اهلل شكل جميل‪ ،‬بدالً من العمل العشوائي‪،‬‬
‫وتم ترتيب التنسيق لون وخلفية وحجم بالكود! التالي‪:‬‬
‫;‪background:navy; color:lightblue; font-size:30px‬‬
‫ثم هامش وحشو ومحاذاة بالكود! التالي‪:‬‬
‫;‪margin:30px; padding:50px; text-align:justify‬‬
‫ثم طول وعرض بالكود! التالي‪:‬‬
‫ثم إطار بالكود! التالي‪:‬‬
‫;‪border:30px solid #39b7e0‬‬
‫ثم إطار خارجي بالكود! التالي‪:‬‬
‫;‪outline:1px solid navy‬‬
‫ثم الظالل بالكود! التالي‪:‬‬
‫;‪box-shadow:3px 3px 1px gray‬‬
‫‪text-shadow:0 0 120px #fff,‬‬
‫;)‪1px 1px 0.5px rgba(57,183,224,0.7‬‬

‫مراحل تطور الصندوق‬
:box model ‫الشكل التالي يعبر عن مراحل تطور الـ‬
‫ وستعرف أن‬،‫ ثم انظر الى مرحلة بعد مرحلة‬،7 ‫ ثم رقم‬1 ‫انظر الى رقم‬
.‫ لها دور كبير في تجميل تصميمات الويب بفضل اهلل‬css ‫اللغة‬
PAGE 556
‫المرونة ‪)Flex Box( Flexibility‬‬

‫موضوع المرونة في لغة ‪ ،css‬شيق جداً وفي غاية الروعة‪ ،‬حيث يجعل‬
‫مصمم الويب‪ ،‬يصنع حاوية‪ ،‬ثم يضع بها بعض العناصر‪ ،‬ثم ينسق الحاوية‬
‫وعناصرها كيفما شاء بفضل اهلل‪ ،‬وسيكون التفصيل إن شاء اهلل كما يلي‪.‬‬
‫انتبه! ألن في هذا الموضوع الخصائص تكمل بعضها‪ ،‬ولكل واحدة تأثير‪.‬‬
‫الظهور المرن ‪display flex‬‬

‫سوف نقوم بعمل حاوية عادية‪ ،‬بها بعض العناصر‪ ،‬بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div.parent‬‬
‫;‪background:#ff0; width:90%; height:200px‬‬
‫}‬
‫} ;‪div.child1{ background:#0e0‬‬
‫} ;‪div.child2{ background:#e00‬‬
‫} ;‪div.child3{ background:#00e‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<div class="parent‬‬
‫>‪<div class="child1">Div 1</div‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ أن الشكل بسيط جداً‪ ،‬فهو مجرد وسم ‪ div‬حاوية باللون األصفر‬
‫وتأخذ كالس باسم ‪ ،parent‬وثالث وسوم ‪ div‬فرعيين بداخل األصل‪،‬‬
‫فاألول أخضر بكالس ‪ ،child1‬والثاني أحمر بكالس ‪ ،child2‬والثالث‬
‫أزرق بكالس ‪ ،child3‬مع العلم أن الوسم ‪ div‬األصل يأخذ عرض‬
‫بالنسبة ‪ 90%‬وطول بمقدار ‪.200px‬‬
‫واآلن سوف نستخدم الخاصية ‪ display‬واعطاؤها القيمة ‪،flex‬‬

‫لجعل الحاوية ‪ ،parent‬مرنة‪ ،‬وسوف تالحظ الفرق ما بين الشكل‬
‫السابق‪ ،‬والتمرين التالي‪ ،‬ولكن انتبه! أن الوسم ‪ div‬األصلي يأخذ عرض‬
‫‪ ،90%‬ويأخذ طول ‪ ،200px‬ألن هذا سيؤثر على التمرين التالي كما‬
‫سنوضح إن شاء اهلل‪.‬‬
‫‪PAGE 558‬‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
background:#ff0; width:90%; height:200px;
display:flex;
}
div.child1{ background:#0e0; }
div.child2{ background:#e00; }
div.child3{ background:#00e; }
</style>
</head>
<body>
<div class="parent">
<div class="child1">Div 1</div>
</div>
</body>
</html>
‫ أخذ عرض بقدر‬،parent ‫ موجود بالحاوية‬،‫ فرعي‬div ‫الحظ أن كل‬

.parent ‫ وأخذ طول بكامل طول الـ‬،‫ما يحتويه‬
:‫ بالكود! التالي‬،height ‫ بدون الخاصية‬،‫واآلن سنجرب‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
background:#ff0; width:90%;
display:flex;
}
</style>
</head>
<body>
</div>
</body>
</html>
‫ طول‬child ‫ أخذت كل الـ‬،parent ‫واآلن بدون الطول لعنصر الـ‬

.‫ ومع التمارين القادمة سنتفهم أكثر إن شاء اهلل‬،‫بقدر ما فيها فقط‬
PAGE 560
‫محاذاة العناصر ‪align-items‬‬
‫هذه الخاصية‪ ،‬سوف تحل لك اللغز‪ ،‬في جعل الوسوم ‪ div‬تأخذ الطول‬
‫بالكامل‪ ،‬الذي تم عمله من قبل‪ ،‬مثل الشكل التالي‪:‬‬
‫وكما هو واضح مع الصورة‪ ،‬أن الوسوم ‪ ،div‬أخذت طول‪ ،‬بدون أن‬

‫نخصصه لها‪ ،‬وذلك ألن الخاصية ‪ align-items‬تأخذ قيمة افتراضية‬
‫وهي ‪ ،stretch‬فتمدد كل الـ ‪ child‬داخل الـ ‪.parent‬‬
‫رجاء انتبه! ألن الخاصية ‪ align-items‬تتيح لنا التالعب مع‬

‫العناصر من الناحية الرأسية‪ ،‬ومعني هذا أنه لو ذكرت لك أننا سوف نبدأ‬
‫من األول‪ ،‬فإن هذا يعني من أعلي‪ ،‬ولو ذكرت لك أننا سوف نبدأ من اآلخر‪،‬‬
‫فإن هذا يعني من األسفل‪ ،‬ولو ذكرت لك أننا سوف نضع العناصر في‬
‫الوسط‪ ،‬فإن هذا يعني ما بين األعلى واألسفل‪ ،‬فكل هذا معني رأسياً‪ ،‬حتى‬
‫ال تختلط عليك األمور فرجاء انتبه! جيداً‪.‬‬

:‫ بالكود! التالي‬،ً‫يمكن جعل العناصر في الوسط رأسيا‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; align-items:center;
}
</style>
</head>
<body>
</div>
</body>
</html>
‫ جعلت العناصر‬،align-items ‫ للخاصية‬center ‫الحظ أن القيمة‬

.ً‫في المنتصف رأسيا‬
PAGE 562
،align-items ‫ فإن الخاصية‬،‫انتبه! وال تتعجل في الحكم على األمور‬
.stretch ‫ ما لم تستخدم القيمة‬،‫تعطي طول على قدر ما بداخل العناصر‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; align-items:center;
}
</style>
</head>
<body>
<div class="child1">Div 1<br>L2<br>L3</div>
<div class="child2">Div 2<br>L2</div>
</div>
</body>
</html>

:‫ بالكود! التالي‬،ً‫يمكن جعل العناصر في األول رأسيا‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; align-items:flex-start;
}
</style>
</head>
<body>
</div>
</body>
</html>
‫ جعلت‬،align-items ‫ للخاصية‬flex-start ‫الحظ أن القيمة‬

.ً‫العناصر في األول رأسيا‬
PAGE 564
:‫ بالكود! التالي‬،ً‫يمكن جعل العناصر في اآلخر رأسيا‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; align-items:flex-end;
}
</style>
</head>
<body>
</div>
</body>
</html>
‫ جعلت‬،align-items ‫ للخاصية‬flex-end ‫الحظ أن القيمة‬

.ً‫العناصر في اآلخر رأسيا‬
:‫ بالكود! التالي‬،‫ حتى لو اختلفت‬،‫يمكن جعل العناصر على خط واحد‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; align-items:baseline;
}
</style>
</head>
<body>
<div class="child1"><h1>Heading 1</h1></div>
</div>
</body>
</html>
‫ جعلت‬،align-items ‫ للخاصية‬baseline ‫الحظ أن القيمة‬

.‫ حتى مع اختالف أحجامها‬،‫العناصر على سطر واحد‬
PAGE 566
flex-wrap ‫التفاف المحتوي‬
‫ وهو أن النص يلتف ويكمل في السطر‬،‫بالتأكيد كلنا يعرف التفاف النص‬
‫ وكذلك األمر في‬،‫ في حال أن عرض السطر الحالي تم ملئه بالكامل‬،‫التالي‬
:‫ هيا نجرب كود! يبين لنا كما يلي‬،ً‫ مثال‬،‫المحتوي‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
background:#ff0; width:50px; height:200px;
display:flex;
}
div#d1{ background:#0e0; width:50px; height:25px; }
div#d2{ background:#e00; width:50px; height:25px; }
div#d3{ background:#00e; width:50px; height:25px; }
div#d4{ background:#e0e; width:50px; height:25px; }
div#d5{ background:#0ee; width:50px; height:25px; }
div#d6{ background:#abc; width:50px; height:25px; }
</style>
</head>
<body>
<div id="d1">D1</div> <div id="d2">D2</div>
</div>
</body>
</html>

‫الحظ أن الـ ‪ child‬خرجت عن الـ ‪ ،parent‬ولم يتم األخذ بعرض‬

‫كل من الـ ‪ ،child‬وهو ‪ ،50px‬حيث ان عرض الـ ‪parent‬‬
‫أيضاً ‪ ،50px‬ويحوي وسمين ونصف تقريباً من الـ ‪ div‬الـ ‪،child‬‬
‫ولم يلتفوا‪ ،‬ألن الخاصية ‪ flex-wrap‬تأخذ ‪ nowrap‬قيمة‬
‫افتراضية لها‪ ،‬فيتم توزيع العرض على العناصر الموجودة‪ ،‬ما دامت هناك‬
‫سعة لذلك‪ ،‬وهنا خرج الـ ‪ child‬عن الـ ‪ ،parent‬ألن به نصوص‬
‫أجبرته على ذلك‪ ،‬ولو تم حذف النصوص الختلف األمر‪ ،‬مثل الشكل التالي‪:‬‬
‫ولكن هناك قيم أخري للتنسيق‪ ،‬كما سنتعلم إن شاء اهلل‪.‬‬
‫‪PAGE 568‬‬
:‫ بالكود! التالي‬،wrap ‫ لنجرب قيمة‬،‫واآلن سوف نعيد النص كما كان‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; flex-wrap:wrap;
}
</style>
</head>
<body>
</div>
</body>
</html>
.‫ أخذت سطر‬،div ‫الحظ أن كل‬

:‫واآلن نكبر العرض بالكود! التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
}
</style>
</head>
<body>
</div>
</body>
</html>
.‫ تأخذ سطر‬،div ‫الحظ أن كل ثالثة‬
PAGE 570
:‫واآلن نجرب التفاف عكسي بالكود! التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; flex-wrap:wrap-reverse;
}
</style>
</head>
<body>
</div>
</body>
</html>
.‫ وكأن البداية من األسفل‬،‫الحظ عمل التفاف عكسي‬

flex-direction ‫اتجاه المرونة‬
‫ والقيمة‬،row ‫الحظ فيما سبق أن العناصر يتم تنظيمها في شكل صف‬
.flex-direction ‫ هي القيمة االفتراضية لخاصية‬row
‫ فيعكس‬،row-reverse ‫واآلن نجرب التنظيم بالصف العكسي بالقيمة‬
.‫ويبدأ من آخر عنصر الى أول عنصر‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; flex-direction:row-reverse;
}
</style>
</head>
<body>
</div>
</body>
</html>
PAGE 572
‫فيما سبق من تمارين كان األمر الطبيعي‪ ،‬ومع القيمة ‪ row‬االفتراضية‬

‫يبدأ من ‪ ،D1‬ثم ‪ ،D2‬ثم ‪ ،D3‬ثم ‪ ،D4‬ثم ‪ ،D5‬ثم ‪ ،D6‬ولكن‬
‫انتبه! فالبداية ‪ ،D6‬ثم ‪ ،D5‬ثم ‪ ،D4‬ثم ‪ ،D3‬ثم ‪ ،D2‬ثم ‪،D1‬‬
‫وهذا هو تأثير القيمة ‪ ،row-reverse‬حيث تم التنظيم كصف‬
‫معكوس‪.‬‬
‫انتبه! فإننا هنا ال نتحدث عن "‪ dir="rtl‬في ‪ ،html‬وال نتحدث عن‬

‫‪ direction:rtl‬في ‪ ،css‬ولكن األمر مختلف‪ ،‬فإذا حددت ‪rtl‬‬
‫للصفحة‪ ،‬سيكون طبيعة الصفحة من اليمين‪ ،‬فيعكس هو إلى اليسار‪ ،‬فرجاء‬
‫انتبه! حتى ال تختلط عليك األمور‪.‬‬

:‫ بالكود! التالي‬،column ‫واآلن تنظيم عمودي بالقيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; flex-direction:column;
}
</style>
</head>
<body>
</div>
</body>
</html>
PAGE 574
:‫ بالكود! التالي‬،column-reverse ‫والعمودي العكسي من أسفل بـ‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; flex-direction:column-reverse;
}
</style>
</head>
<body>
</div>
</body>
</html>

flex-flow ‫تدفق المرونة‬
‫ والخاصيتين التي تجمع بينهم‬،‫هي خاصية تجمع بين خاصيتين للتسهيل‬
.flex-wrap‫ و‬،flex-direction ‫هم‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; flex-flow:row-reverse wrap;
}
</style>
</head>
<body>
</div>
</body>
</html>
PAGE 576
‫وكما تالحظ أنه عن طريق الخاصية ‪ ،flex-flow‬يمكن ضبط اتجاه‬

‫المرونة ‪ ،flex-direction‬وااللتفاف ‪ ،flex-wrap‬في مكان‬
‫واحد للتسهيل واالختصار‪.‬‬
‫وإذا تم تجربة القيمة ‪ column‬مع القيمة ‪ ،wrap‬سيكون الوضع‬

‫مختلف‪ ،‬ولكن لتري التأثير البد من تقليل الطول لتكرار األعمدة‪ ،‬وزيادة‬
‫العرض لتوسيع المسافة‪ ،‬كما سنجرب إن شاء اهلل في المثال التالي‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; flex-flow:column wrap;
}
</style>
</head>
<body>
</div>
</body>
</html>
PAGE 578
align-content ‫محاذاة المحتوي‬
‫ ولتري التأثير قم بتقليل‬،‫المحاذاة هنا تعطي مرونة من ناحية أخري‬
‫ ليحدث‬،wrap ‫ على القيمة‬flex-wrap ‫ وضبط خاصية‬،‫العرض‬
.‫ وتري التأثيرات‬،‫التفاف‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
align-content:center;
}
</style>
</head>
<body>
</div>
</body>
</html>

،‫ األول به أربع عناصر‬،‫ صفان‬،200px ‫الحظ أنه نتج عن العرض‬

‫ وذلك‬،ً‫ فأصبحوا قريبين مع انهم في المنتصف رأسيا‬،‫والثاني به عنصران‬
.align-content ‫ للخاصية‬center ‫حدث بإعطاء القيمة‬
‫ كما‬center ‫ مع بقاء القيمة‬،wrap ‫انتبه! أنه لو تم الغاء الـ‬

:‫ سيكون مثل الشكل التالي‬،‫هي‬
PAGE 580
align- ‫ للخاصية‬flex-end ‫يمكننا البداية من اآلخر بالقيمة‬
:‫ كما يلي‬،content
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
align-content:flex-end;
}
</style>
</head>
<body>
</div>
</body>
</html>

‫ وكأننا أخذنا العناصر من األعلى كما‬،‫الحظ أن البداية هنا من األسفل‬

.‫ ثم وضعناهم في األسفل‬،‫هي‬
PAGE 582
align- ‫ للخاصية‬flex-start ‫يمكننا البداية من األول بالقيمة‬
:‫ كما يلي‬،content
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
align-content:flex-start;
}
</style>
</head>
<body>
</div>
</body>
</html>

.‫الحظ أن البداية هنا من األول‬
PAGE 584
‫ وهي‬،stretch ‫ بالقيمة‬،‫يمكن توزيع العناصر بمسافات حسب الطول‬
.align-content ‫القيمة االفتراضية للخاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
align-content:stretch;
}
</style>
</head>
<body>
</div>
</body>
</html>

‫ وإذا تم تقليل العرض للحاوية‬،‫الحظ أنه تم توزيع العناصر على الطول‬

:‫ ستري مثل الشكل التالي‬،100px ‫ الى‬parent ‫الـ‬
PAGE 586
‫يمكن عمل مسافات متساوية بين العناصر عن طريق ضبط الخاصية‬
‫ وسوف‬،space-between ‫ على القيمة‬align-content
:‫نجرب بالكود! التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
align-content:space-between;
}
</style>
</head>
<body>
</div>
</body>
</html>

‫الحظ أنه تم توزيع مسافات منسقة ومنظمة ومتساوية بين كل صف‬

.‫والصف اآلخر‬
.‫الحظ أنه ال يوجد مسافة قبل أول صف‬
.‫الحظ أنه ال يوجد مسافة بعد آخر صف‬
PAGE 588
‫ بحيث يكون هناك مسافة‬،‫يمكن توزيع مسافات متساوي من حول العناصر‬
‫ ثم‬،‫ ثم مسافة قبل العنصر الذي يليه‬،‫ ونفس المسافة بعده‬،‫قبل العنصر‬
‫ ثم‬،‫ ثم عنصر‬،‫ مسافة‬،‫ ومعني ذلك أنك ستري‬،‫ وهكذا‬،‫مسافة بعده‬
‫ ثم‬،‫ وهكذا حتى آخر عنصر‬،‫ ثم عنصر‬،‫ ثم مسافتين‬،‫ ثم عنصر‬،‫مسافتين‬
:‫ وسنجرب بالكود! التالي‬،‫مسافة واحدة بعده‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
align-content:space-around;
}
</style>
</head>
<body>
</div>
</body>
</html>

‫ وباقي‬،‫ ومسافة بعد آخر عنصر‬،‫الحظ أن هناك مسافة قبل أول عنصر‬
.‫العناصر بينهم مسافتين‬
PAGE 590
justify-content ‫ضبط المحتوي‬
‫ هامة جداً لضبط المحتوي وهي تفعل‬justify-content ‫خاصية‬
‫ والقيمة‬،ً‫ ولكن أفقيا‬align-content ‫نفس تنسيقات الخاصية‬
:‫ وسنجربها بالكود! التالي‬،flex-start ‫االفتراضية لها هي‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex;
justify-content:flex-start;
}
</style>
</head>
<body>
</div>
</body>
</html>

‫ أي‬،ً‫ هنا المعني بها أفقياً وليس رأسيا‬flex-start ‫انتبه! ألن القيمة‬
‫ ولو اردنا ان يكون في‬،‫أنه بدأ من اليسار ألن الصفحة هنا تبدأ من اليسار‬
.‫النهاية فيعني هذا اليمين‬
PAGE 592
:‫ بالكود! التالي‬،flex-end ‫سنجرب القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; justify-content:flex-end;
}
</style>
</head>
<body>
</div>
</body>
</html>

:‫ بالكود! التالي‬، center ‫سنجرب القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; justify-content:center;
}
</style>
</head>
<body>
</div>
</body>
</html>
PAGE 594
:‫ بالكود! التالي‬،space-between ‫سنجرب القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; justify-content:space-between;
}
</style>
</head>
<body>
</div>
</body>
</html>

:‫ بالكود! التالي‬،space-around ‫سنجرب القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; justify-content:space-around;
}
</style>
</head>
<body>
</div>
</body>
</html>
PAGE 596
‫محاذاة العنصر نفسه ‪align-self‬‬
‫هذه الخاصية تمنحك مرونة قوية للعناصر الـ ‪ ،child‬لكل عنصر على‬
‫حدي‪ ،‬والقيمة االفتراضية لها هي ‪ ،auto‬أي تلقائي‪ ،‬وتأخذ القيم‬
‫‪ ،flex-start‬و‪ ،flex-end‬و‪ ،stretch‬و‪،center‬‬
‫و‪ ،baseline‬ومن المفترض أنك فهمت كل تلك القيم‪ ،‬مما سبق‪،‬‬
‫والموضوع مع الخاصية ‪ ،align-self‬مرن للعنصر أكثر مما تتخيل‪،‬‬
‫"فمثالً إذا كنت تعمل على االتجاه ‪ ،row‬فإن عملك يحتسب رأسياً"‪،‬‬
‫"وإذا كنت تعمل على االتجاه ‪ ،column‬فإن عملك يحتسب أفقياً"‪،‬‬
‫وبالطبع المقصود باالتجاه هنا هو الـ ‪.parent‬‬
‫إذا تم ضبط خاصية ‪ flex-direction‬على القيمة ‪ row‬للـ‬

‫‪ ،parent‬ثم تم ضبط خاصية ‪ align-self‬على القيمة ‪center‬‬
‫للـ ‪ ،child‬سيكون في المنتصف رأسياً‪.‬‬
‫إذا تم ضبط خاصية ‪ flex-direction‬على القيمة ‪ column‬للـ‬

‫‪ ،parent‬ثم تم ضبط خاصية ‪ align-self‬على القيمة ‪center‬‬
‫للـ ‪ ،child‬سيكون في المنتصف أفقياً‪.‬‬
‫وهكذا‪ ،‬للبداية‪ ،‬والنهاية‪ ،‬وباقي القيم التي تم ذكرها أنفاً‪ ،‬وفيما يلي‬
‫مثالين للتوضيح في الحالتين‪ ،‬والحظ أنت بنفسك‪ ،‬بشرط أن تكون قمت‬
‫بمذاكرة ما سبق جيداً‪.‬‬

:‫ كود! قم بكتابة الكود التالي ثم احفظه‬،row ‫المثال األول بقيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; align-items:flex-start; flex-direction:row;
}
div#d1{ background:#0e0; align-self:flex-start; }
div#d2{ background:#e00; align-self:flex-end; }
div#d3{ background:#00e; align-self:center; }
div#d4{ background:#e0e; align-self:flex-start; }
div#d5{ background:#0ee; align-self:flex-end; }
div#d6{ background:#abc; align-self:center; }
</style>
</head>
<body>
</div>
</body>
</html>
PAGE 598
:‫ كود! قم بكتابة الكود التالي ثم احفظه‬،column ‫المثال الثاني بقيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; align-items:flex-start; flex-direction:column;
}
div#d1{ background:#0e0; align-self:flex-start; }
div#d2{ background:#e00; align-self:flex-end; }
div#d3{ background:#00e; align-self:center; }
div#d4{ background:#e0e; align-self:flex-start; }
div#d5{ background:#0ee; align-self:flex-end; }
div#d6{ background:#abc; align-self:center; }
</style>
</head>
<body>
</div>
</body>
</html>

flex-basis ‫أساس للمرونة‬
‫ بمقدار‬،child ‫ يمكن وضع أساس لعنصر‬،flex-basis ‫مع الخاصية‬
:‫ ثم أحفظه‬،‫ وللتوضيح اكتب الكود! التالي‬،‫معين‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
}
div#d1{ background:#0e0; width:100px; }
div#d2{ background:#e00; width:100px; }
div#d3{ background:#00e; width:100px; }
</style>
</head>
<body>
<div id="d1">D1</div><div id="d2">D2</div>
</div>
</body>
</html>
PAGE 600
‫الحظ أنه في التمرين السابق‪ ،‬تم ضبط عرض الـ ‪ parent‬على‬
‫‪ ،350px‬وتم إعطاء عرض لكل ‪ child‬بمقدار ‪ ،100px‬وهم‬
‫ثالثة وسوم ‪ ،div‬أي ‪ ،300=100+100+100‬ويتبقى‬
‫‪ 50px‬في الـ ‪ ،parent‬كما نالحظ في الشكل السابق‪ ،‬ويمكن أن نميز‬
‫واحدة منهم بزيادة معينة عن طريق الخاصية ‪ ،flex-basis‬وسوف‬
‫نميز العنصر الثاني ‪ ،d2‬بحيث يأخذ عرض بمقدار ‪ ،150px‬فيحوز على‬
‫الـ ‪ 50px‬المتبقية‪ ،‬ويكونوا من نصيبه‪ ،‬بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫;‪background:#ff0; width:350px; height:120px‬‬
‫;‪display:flex; align-items:flex-start‬‬
‫}‬
‫} ;‪div#d1{background:#0e0; width:100px‬‬
‫} ;‪div#d2{background:red; width:100px; flex-basis:150px‬‬
‫} ;‪div#d3{background:#00e; width:100px‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div id="d1">D1</div><div id="d2">D2</div‬‬
‫>‪<div id="d3">D3</div‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

:‫ ليكون كما يلي‬،‫ فقط‬d3 ‫ والعنصر‬d2 ‫ولو غيرنا كود العنصر‬

div#d2{background:red; width:100px; flex-basis:120px; }
div#d3{background:#00e; width:100px; flex-basis:130px; }
:‫سيكون الناتج مثل الشكل التالي‬
‫ ومرونة أكثر‬،‫ في تخصيص أكثر‬،flex-basis ‫ تساعدك خاصية‬،‫وهكذا‬

.‫بفضل اهلل‬
PAGE 602
‫ازدياد العناصر ‪flex-grow‬‬
‫نمو بعض العناصر‪ ،‬من بين العناصر األخرى‪ ،‬يتم التحكم فيه عن طريق‬
‫الخاصية ‪ ،flex-grow‬والقيمة االفتراضية لها هي صفر‪ ،‬أي ال نمو‬
‫لها‪ ،‬وتأخذ قيمة رقمية‪ ،‬مثالً ‪ 1‬او ‪ 2‬او ‪ ،3‬وهكذا‪ ،‬والعنصر صاحب‬
‫القيمة األعلى يكون له الحق األكبر في النمو واالزدياد‪ ،‬واآلن سوف نجرب‬
‫إن شاء اهلل‪ ،‬بعض األمثلة في هذا الموضوع‪ ،‬وبعد التدريب عليها بفضل‬
‫اهلل سوف تفهم خاصية االزدياد ‪ flex-grow‬جيداً‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫;‪background:#ff0; width:450px; height:70px‬‬
‫;‪display:flex; align-items:flex-start‬‬
‫}‬
‫} ;‪div#d1{background:#0e0; width:100px; flex-grow:0‬‬
‫} ;‪div#d2{background:red; width:100px; flex-grow:0‬‬
‫} ;‪div#d3{background:#00e; width:100px; flex-grow:0‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div id="d1">D1</div><div id="d2">D2</div‬‬
‫>‪<div id="d3">D3</div‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫الحظ في الكود السابق أعطينا كل العناصر الـ ‪ ،child‬القيمة صفر‬

‫للخاصية ‪ ،flex-grow‬والصفر هي القيمة االفتراضية‪ ،‬كما ذكرنا‪،‬‬
‫ولذلك يتضح أن كل شيء كما هو‪ ،‬بدون أي اختالف‪.‬‬
‫الحظ أن الوسم ‪ div‬الذي يحمل ‪ id‬بالقيمة ‪ ،d1‬تم ضبط العرض‬

‫‪ width‬له على القيمة ‪ ،100px‬وثبت عليها ولم يتغير في الصفحة‪.‬‬


‫واآلن‪ ،‬انتبه! ألننا سوف نبدأ‪ ،‬في التجارب على الخاصية ‪،flex-grow‬‬
‫بالزيادة‪ ،‬كما يلي ان شاء اهلل‪.‬‬
‫‪PAGE 604‬‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
}
div#d1{background:#0e0; width:100px; flex-grow:1; }
div#d2{background:red; width:100px; flex-grow:0; }
div#d3{background:#00e; width:100px; flex-grow:0; }
</style>
</head>
<body>
</div>
</body>
</html>
‫ ألنه تم إعطاء القيمة‬،‫ أصبح أكثر نمواً من غيره‬d1 ‫الحظ أن العنصر‬

.‫ له‬flex-grow ‫ لخاصية‬1

<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
}
</style>
</head>
<body>
</div>
</body>
</html>
d2 ‫ ثم العنصر‬،‫ فهو أكثر نمو‬،2 ‫ أخذ نمو بقيمة‬d2 ‫الحظ أن العنصر‬

.d2 ‫ فنموه أقل من نمو‬،1 ‫ألن قيمة نموه‬
PAGE 606
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
}
</style>
</head>
<body>
</div>
</body>
</html>
d2 ‫ ثم العنصر‬،‫ فهو أكثر نمو‬،3 ‫ أخذ نمو بقيمة‬d3 ‫الحظ أن العنصر‬

‫ فنموه أقل من نمو‬،1 ‫ ألن قيمة نموه‬d1 ‫ ثم العنصر‬،2 ‫ألن قيمة نموه‬
.d2‫ و‬d3

flex-shrink ‫انكماش العناصر‬
‫ ألنها‬،flex-grow ‫ عكس الخاصية‬،flex-shrink ‫الخاصية‬
‫ أي أنها‬،1 ‫ والقيمة االفتراضية لها هي‬،‫تقلص العناصر وتجعلها تنكمش‬
‫ مثالً بمقدار‬parent ‫ ألنك لو حددت عرض الـ‬،‫ لماذا؟‬،ً‫تنكمش افتراضيا‬
‫ وكل واحد منهم أخذ عرض‬،child ‫ ثم وضعت بداخلة ثالثة‬،200px
‫ واجمالي‬،300px ‫ أي أن اجماليهم الثالثة هو‬،100px ‫مثالً بمقدار‬
‫ ولكن‬،‫ كاملة‬100px ‫ أي أن هناك عجز‬،200px ‫الحاوية هو‬
،flex ‫ ألنك تعمل بالـ‬،‫تالحظ أنها تنكمش تلقائياً لتناسب العرض المتاح‬
:‫ والكود! التالي يوضح ذلك‬،‫أي المرونة‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
}
div#d1{background:#0e0; width:100px; }
div#d2{background:red; width:100px; }
div#d3{background:#00e; width:100px; }
</style>
</head>
<body>
</div>
</body>
</html>
PAGE 608
،parent ‫ خضعت لتتأقلم مع عرض الـ‬،child ‫الحظ أن العناصر‬

.‫ أي قم باالنكماش‬،1 ‫وذلك يدل على أن القيمة االفتراضية هي‬

<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
}
div#d1{background:#0e0; width:100px; flex-shrink:0; }
div#d2{background:red; width:100px; }
div#d3{background:#00e; width:100px; }
</style>
</head>
<body>
</div>
</body>
</html>

،0 ‫ على القيمة‬d1 ‫ للعنصر‬flex-shrink ‫وهنا تم ضبط الخاصية‬

‫ وهنا أخذ العرض‬،ً‫ أي ال تصغر أبدا‬،‫ومعناها وكأني أقول له ال تنكمش‬
‫ وسنجرب‬،‫ فتم تصغيرهم أكثر‬،d3‫ و‬d2 ‫على حساب العنصرين اآلخرين‬
:‫تجربة أخري بعد أن تكتب الكود! التالي ثم تحفظه‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
}
div#d1{background:#0e0; width:100px; flex-shrink:0; }
div#d2{background:red; width:100px; flex-shrink:0; }
div#d3{background:#00e; width:100px; flex-shrink:0; }
</style>
</head>
<body>
</div>
</body>
</html>
PAGE 610
‫وهنا تم ضبط الخاصية ‪ flex-shrink‬لجميع العناصر ‪child‬‬

‫بالقيمة ‪ ،0‬أي عدم االنكماش‪ ،‬فأصبحوا خارج الحاوية ‪parent‬‬
‫األساسية‪.‬‬

flex ‫الخاصية‬
flex-basis‫ و‬،flex-shrink‫ و‬،flex-grow ‫يمكن جمع قيم‬
:‫ مثل الكود! التالي‬،flex ‫في خاصية واحدة بالترتيب وهي خاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
}
div#d1{background:#0e0; width:100px; flex:1 0 auto; }
div#d2{background:red; width:100px; flex:0 1 auto; }
div#d3{background:#00e; width:100px; flex:0 1 50px; }
</style>
</head>
<body>
</div>
</body>
</html>
.flex ‫ لفهم الخاصية‬،ً‫ فالبد من فهم الخواص المذكورة أوال‬،!‫انتبه‬
PAGE 612
order ‫ترتيب العناصر‬
:‫ بالكود! التالي‬،‫ يمكن تغيير أماكن العناصر بسهولة‬،order ‫بالخاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
}
div#d1{background:#0e0; width:100px; order:2; }
div#d2{background:red; width:100px; order:3; }
div#d3{background:#00e; width:100px; order:1; }
</style>
</head>
<body>
</div>
</body>
</html>
order ‫ ولكن انتبه! أنه بالخاصية‬،d3 ‫ ثم‬،d2 ‫ ثم‬،d1 ‫تم وضع‬

.‫ واألولوية للرقم األقل‬،‫ بقيم رقمية‬،‫تم تبديل األماكن بكل مرونة‬

Centralize Element ‫توسيط العنصر‬
‫ عن طريق‬،‫اآلن بفضل اهلل يمكن توسيط العنصر في المركز تماماً بسهولة‬
.justify-content ‫ والخاصية‬،align-items ‫الخاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex;
align-items:center; justify-content:center;
}
div#d1{ background:#e0e; font-size:30px; }
</style>
</head>
<body>
<div id="d1">Div 1</div>
</div>
</body>
</html>
PAGE 614
Centralize Elements ‫توسيط العناصر‬
.‫يمكن توسيط عناصر بنفس الطريقة السابقة‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex;
}
</style>
</head>
<body>
<input><input type="submit">
</div>
</body>
</html>

‫عرض صور منظمة حسب الرغبة‬
<!DOCTYPE html>
<html>
<head>
<style>
div.parent{
display:flex; flex-flow:row wrap;
align-items:flex-start;
justify-content:space-around;
align-content:space-around;
}
</style>
</head>
<body>
<img src="egypt.jpg"> <img src="egypt.jpg">
</div>
</body>
</html>
.‫ صور بصف واحد‬6 ‫ فكان‬،‫الحظ أنه تم تكبير عرض نافذة المتصفح‬
PAGE 616
‫واآلن قلل عرض نافذة المتصفح قليالً‪ ،‬لتري مثل الشكل التالي‪:‬‬
‫الحظ أن هناك ‪ 5‬صور‪ ،‬ثم صورة باألسفل‪.‬‬
‫الحظ أن المسافات يتم توزيعها‪ ،‬بناء على عرض وطول الحاوية األصلية‪.‬‬
‫ال تنسي أنه من الممكن تغيير التصميم‪ ،‬بما تعلمناه من قبل بفضل اهلل‪.‬‬

:‫ لتري مثل الشكل التالي‬،ً‫واآلن قلل عرض نافذة المتصفح قليال‬
.‫ أخري‬3 ‫ ثم‬3 ‫ فكان‬،‫الحظ أنه تم توزيع الصور على المساحة المتاحة‬
PAGE 618
‫واآلن قلل عرض نافذة المتصفح قليالً‪ ،‬لتري مثل الشكل التالي‪:‬‬
‫وهكذا‪ ،‬وبذلك أصبح معك صندوق مرن تغيره كما تريد بفضل اهلل‪.‬‬

‫المؤشر والعالمة ‪Cursor and Caret‬‬

‫عالمة اإلدخال (االقحام) في الكتابة ‪caret-color‬‬
‫عند الكتابة في صندوق االدخال يكون مثل الشكل التالي تارة‪:‬‬
‫وبالشكل التالي تارة أخري‪:‬‬
‫ولو تحركت باألسهم‪ ،‬ستظهر العالمة بمكان مختلف مثل الشكل التالي‪:‬‬
‫وهذه هي عالمة اإلدخال أو اإلقحام في الكتابة‬
‫ويمكن تغيير هذه العالمة عن طريق الخاصية ‪ ،caret-color‬والتي‬

‫تأخذ قيمة افتراضية لها وهي ‪ ،auto‬ويمكن وضع لون ليتغير لون العالمة‬
‫باللون المحدد‪.‬‬
‫‪PAGE 620‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪input‬‬
‫;‪font-size:30px; outline:none‬‬
‫;‪caret-color:red‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<input value="Hassouna Academy‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أن العالمة أصبحت باللون األحمر‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
input{
font-size:30px;
caret-color:transparent;
}
</style>
</head>
<body>
<input value="Hassouna Academy">
</body>
</html>
‫ فلم تعد ظاهرة‬،‫الحظ أن العالمة تم إخفائها ألنها أخذت لون شفاف‬

.‫أثناء التعامل مع مربع النص‬
PAGE 622
‫إذا كنت تريد أن تري عالمة اإلدخال في عنصر مغلق‪ ،‬مثل الوسم ‪ ،p‬أو‬
‫الوسم ‪ ،div‬استخدم ‪ ،contenteditable‬بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫;‪font-size:30px; caret-color:blue‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div contenteditable>Div Hassouna Academy</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫انتبه!‪ ،‬فهو يبدوا طبيعياً‪ ،‬ولكن لو ضغطت علية بالماوس سيكون كالتالي‪:‬‬
‫ولو عدلت عليه سيقبل التعديل‪ ،‬مثل الشكل التالي‪:‬‬

cursor ‫المؤشر‬
‫ويمكن تغيير هذا‬، ‫معروف أن المؤشر هو شكل الماوس واالفتراضي له هو‬
‫ وكل قيمة يتم تخصيصها للخاصية‬،cursor ‫الشكل عن طريق الخاصية‬
:‫ والجدول التالي يوضح قيم المؤشر‬،‫ لها شكل معين‬cursor
Category CSS value Show Description
General auto The UA will determine the cursor to
display based on the current context.
E.g., equivalent to text when
hovering text.
default The platform-dependent default
cursor. Typically, an arrow.
none No cursor is rendered.
Links & context-menu A context menu is available.
status help Help information is available.
pointer The cursor is a pointer that indicates
a link. Typically, an image of a
pointing hand.
progress The program is busy in the
background, but the user can still
interact with the interface (in contrast
to wait).
wait The program is busy, and the user
can't interact with the interface (in
contrast to progress). Sometimes an
image of an hourglass or a watch.
Selection cell The table cell or set of cells can be
selected.
crosshair Cross cursor, often used to indicate
selection in a bitmap.
text The text can be selected. Typically,
the shape of an I-beam.
vertical-text The vertical text can be selected.
Typically, the shape of a sideways I-
beam.
PAGE 624
Drag & alias An alias or shortcut is to be created.
drop copy Something is to be copied.
move Something is to be moved.
no-drop An item may not be dropped at the
current location.
{{bug("275173")}}: On Windows
and Mac OS X, no-drop is the same
as not-allowed.
not-allowed The requested action will not be
carried out.
grab Something can be grabbed (dragged
to be moved).
grabbing Something is being grabbed (dragged
to be moved).
Resizing all-scroll Something can be scrolled in any
& direction (panned).
{{bug("275174")}}: On
scrolling
Windows, all-scroll is the same
as move.
col-resize The item/column can be resized
horizontally. Often rendered as
arrows pointing left and right with a
vertical bar separating them.
row-resize The item/row can be resized
vertically. Often rendered as arrows
pointing up and down with a
horizontal bar separating them.
n-resize Some edge is to be moved. For
e-resize example, the se-resize cursor is
used when the movement starts from
s-resize the south-east corner of the box.
w-resize In some environments, an equivalent
bidirectional resize cursor is shown.
ne-resize For example, n-resize and s-
nw-resize resize are the same as ns-resize.
se-resize

sw-resize
ew-resize Bidirectional resize cursor.

ns-resize
nesw-resize
nwse-resize
Zooming zoom-in Something can be zoomed

zoom-out (magnified) in or out.
‫الحظ أن كل قيمة في الجدول السابق أمامها شكل المؤشر التي تؤدي اليه‬
:‫ ويمكن التجربة بالكود! التالي‬،‫على الصفحة أو العنصر‬
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="submit" style="cursor:pointer">
</body>
</html>
:‫وبعد تشغيل الصفحة قم بلمس الزر بالماوس لتري مثل الشكل التالي‬
‫ جعلت شكل الماوس على الزر مثل اليد وكأنه‬pointer ‫الحظ أن القيمة‬
.‫ وبنفس الطريقة تستطيع التغيير للشكل حسب االحتياج‬،‫رابط‬
PAGE 626
‫حدث المؤشر ‪pointer-events‬‬
‫يمكن الغاء حدث المؤشر‪ ،‬حيث ال يظهر يد ‪ ،hand‬وال يذهب إلى أي‬
‫مكان‪ ،‬حتى ولو تم الضغط عليه‪ ،‬ال يؤثر‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫} ;‪a{ pointer-events: none‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<a href="https://www.youtube.com">YouTube</a‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫واآلن إذا تم الضغط على هذا الرابط لن يعمل‪.‬‬

clipping ‫التقطيع‬
clip ‫القصاصة‬
‫ باستخدام الخاصية‬،‫ أو العنصر‬،‫يمكن قص قطعة محددة من الصورة‬
‫ ويمكن اعطاؤها الدالة‬،auto ‫ والتي تأخذ قيمة افتراضية‬،clip
‫ ليتم‬،left ‫ ثم‬،bottom ‫ ثم‬،right ‫ ثم‬،top ‫ فتأخذ‬،rect
:‫ وسنجرب صورة بالكود! التالي‬،‫استخالص القطعة المراد بقاؤها‬
<!DOCTYPE html>
<html>
<head>
<style>
#i1{
position:absolute;
clip:rect(20px,200px,100px,20px);
}
</style>
</head>
<body>
<img id="i1" src="egypt.jpg" width="250" height="120">
</body>
</html>
PAGE 628
‫الحظ أنه تم ضبط الخاصية ‪ position‬على القيمة ‪،absolute‬‬
‫وتم قطع ‪ 20px‬من األعلى‪ ،‬ثم اظهار حتى ‪ 200px‬من اليمين‪ ،‬ثم‬
‫اظهار حتى ‪ 100px‬من األسفل‪ ،‬ثم قطع ‪ 20px‬من اليسار‪ ،‬ويمكن‬
‫أيضاً التعامل مع العناصر‪ ،‬وسنجرب صورة بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪#d1‬‬
‫;‪background:yellow; position:absolute‬‬
‫;)‪clip:rect(20px,200px,100px,20px‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<div id="d1‬‬
‫>‪Hello 1, Hello 2, Hello 3 <br‬‬
‫‪Hello 4, Hello 5, Hello 6‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحظ أن الـ ‪ div‬ال يظهر بالكامل‪.‬‬

clip-path ‫مسار القص‬
.‫ تمكن من القص بطريقة مسار يتم اعطاؤه لها‬clip-path ‫خاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
#i1{ clip-path:ellipse(130px 140px at 5% 5%); }
#i2{ clip-path:circle(50%); }
#i3{ clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
</style>
</head>
<body>
</body>
</html>
‫ ولكن انتبه! فلن يتم‬،‫ ومضلع‬،‫ ودائرة‬،‫الحظ أنه تم قطع شكل بيضاوي‬
‫ حيث إن التفصيل في‬،‫ في هذا الكتاب‬،‫الشرح أو التفصيل لهذا الموضوع‬
‫ وإن شاء اهلل يمكنك البحث عن كتاب‬،SVG ‫مواضيع الرسم يخص الـ‬
.‫ لتفصيالت أكثر مع الرسم بصفحة الويب‬،SVG ‫صخرة األساس في‬
PAGE 630
Multi Columns ‫األعمدة المتعددة‬

column-count ‫عدد األعمدة‬
‫ أو‬،auto ‫ قيمتها االفتراضية هي‬column-count ‫الخاصية‬
‫ مثل‬،‫ ليتم تقسيم النص الخاص بك الى مجموعة من األعمدة‬،‫تأخذ عدد‬
‫ يحتوي على نص كبير‬div ‫ وسوف نكتب وسم‬،‫تنظيم الجرائد والمجالت‬
:‫ وسنوضح بالكود! التالي‬،‫للتجربة‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
column-count:3;
}
</style>
</head>
<body>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>

:‫ سيكون كالتالي‬،4 ‫ ومع القيمة‬،‫الحظ أن النص تحول الى ثالث أعمدة‬
.‫ وحسب االحتياج لتقسيم النص الخاص بك بفضل اهلل بكل سهولة‬،‫وهكذا‬
PAGE 632
column-gap ‫الفارق بين األعمدة‬
‫ عن طريق الخاصية‬،‫يمكن وضع مسافي فارقة بين كل عمود وآخر‬
:‫ وسنجرب بالكود! التالي‬،column-gap
<!DOCTYPE html>
<html>
<head>
<style>
div{
column-count:4; column-gap:70px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
.70px ‫الحظ أنه تم وضع فارق بين كل عمود وآخر بمقدار‬

column-rule ‫فواصل األعمدة‬
،‫ والعمود اآلخر‬،‫ بين كل عمود‬،border ‫يمكن وضع فواصل مثل اإلطار‬
،‫ لنمط الفاصل‬column-rule-style ‫عن طريق الخاصية‬
‫ والخاصية‬،‫ لسمك الفاصل‬column-rule-width ‫والخاصية‬
:‫ وسنجرب بالكود! التالي‬،‫ للون الفاصل‬column-rule-color
<!DOCTYPE html>
<html>
<head>
<style>
div{
column-rule-style:dashed;
column-rule-width:5px;
column-rule-color:blue;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
PAGE 634
.column-rule ‫ وهي‬،‫ويمكن اختصارهم في خاصية واحدة‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
column-rule:5px dotted red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

ً‫ سيساعدك هنا كثيرا‬،border ‫انتبه! فكل ما تعلمته في دروس اإلطار‬

.‫بفضل اهلل‬
PAGE 636
column-width ‫عرض العمود‬
،column-count ‫ يمكن تجاهل‬column-width ‫بالخاصية‬
:‫ وسنجرب بالكود! التالي‬،‫وتحديد عرض العمود‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
column-gap:70px;
column-rule:2px dashed;
column-width:100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
:‫وبعد تشغيل الصفحة بعرض نافذة كبير تظهر كما بالشكل التالي‬
‫ كما‬،100px ‫ لكل عمود‬،‫الحظ أنه تم التقسيم حسب العرض الموجود‬

.column-width ‫تم ضبط الخاصية‬
:‫ لتري مثل الشكل التالي‬،‫واآلن قم بتصغير نافذة المتصفح‬
:‫ لتري مثل الشكل التالي‬،‫واآلن قم بتصغير نافذة المتصفح مرة أخري‬
.‫ لن يتم أي تقسيم‬،100px ‫ولو قلت نافذة المتصفح عن الـ‬
PAGE 638
column-span ‫عنوان متمدد لألعمدة‬
:‫ وسنجرب ذلك بالكود! التالي‬،‫يمكن وضع عنوان بشكل عادي‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{ column-count:3; column-gap:70px; column-rule:2px dashed; }
</style>
</head>
<body>
<div id="d1">
<h2>This is heading</h2>
</div>
</body>
</html>
.‫الحظ أن العنوان يظهر ممتد لعمود واحد فقط‬

‫ نخصص قيمة للخاصية‬،‫ولجعل العنوان يمتد لجميع األعمدة الموجودة‬
‫ أي ال‬،none ‫ والتي تأخذ قيمة افتراضية وهي‬،column-span
.‫ لتمتد على جميع األعمدة الموجودة‬،all ‫ ويمكن ضبطها على قيمة‬،‫شيء‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
column-rule:2px dashed;
}
#d1 h2{
column-span:all;
}
</style>
</head>
<body>
<div id="d1">
<h2>This is heading</h2>
</div>
</body>
</html>
PAGE 640
‫الحظ أن التنسيق المقصود يخص الوسوم ‪ h2‬الموجودة في العنصر ‪،d1‬‬

‫ولو كنت تريد تنسيق عنوان واحد فقط‪ ،‬يمكن اعطاؤه ‪ ،id‬أو ‪،class‬‬
‫ثم التنسيق عليه‪.‬‬
‫الحظ أن العنوان تمدد فوق جميع األعمدة‪ ،‬بعد تخصيص القيمة ‪all‬‬
‫للخاصية ‪ ،column-span‬للعنوان‪.‬‬

‫تعبئة األعمدة ‪column-fill‬‬
‫الخاصية ‪ ،column-fill‬القيمة االفتراضية لها هي ‪،balance‬‬
‫حيث يمأل كل عمود بنفس المقدار من المحتوى النصي‪ ،‬ولكن لن يسمح‬
‫لألعمدة أن تكون أطول من الطول ‪ ،height‬لذلك قد تكون األعمدة أقصر‬
‫من الطول ‪ height‬حيث يقوم المتصفح بتوزيع المحتوى بشكل أفقي‬
‫بالتساوي‪ ،‬وهذه الخاصية تأخذ قيمة أخري وهي القيمة ‪ ،auto‬حيث‬
‫يمأل كل عمود حتى يصل إلى الطول ‪ ،height‬ويفعل ذلك حتى ينتهي من‬
‫المحتوى النصي الموجود‪ ،‬لذلك ليس بالضرورة أن تمأل هذه القيمة جميع‬
‫األعمدة وال تمألها بالتساوي‪ ،‬وللتجربة البد من تحديد الطول ‪،height‬‬
‫وعمل وسمين ‪ div‬مختلفين في هذه الخاصية لتالحظ التأثير‪ ،‬وتالحظ‬
‫الفرق بين أعمدة القيمة ‪ ،balance‬وأعمدة القيمة ‪ ،auto‬على طول‬
‫‪ ،height‬وليكن مثالً بمقدار ‪ ،100px‬للتجربة‪ ،‬وأيضاً سيتم عمل‬
‫فوارق ‪ ،gap‬وفواصل ‪ rule‬بين األعمدة‪ ،‬لتكون واضحة بشكل كبير‪،‬‬
‫وسوف يتم تجربة كل ما تم ذكره بفضل اهلل‪ ،‬في المثال التالي‪.‬‬
‫انتبه! ألنه سوف يتم وضع نفس المحتوي النصي في كل من الوسمين ‪،div‬‬
‫الذين سوف يتم عملهم‪.‬‬
‫‪PAGE 642‬‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
column-rule:2px dashed; height:100px;
}
#d1{ column-fill:balance; }
#d2{ column-fill:auto; }
</style>
</head>
<body>
<div id="d1">
when an unknown printer took a galley of type and scrambled it
to make a type specimen book.
</div>
<hr>
<div id="d2">
</div>
</body>
</html>

‫ كل عمود‬balance ‫ الذي تم ضبطه على القيمة‬div ‫الحظ أن الوسم‬

‫ كل‬auto ‫ بينما الذي تم ضبطه على القيمية‬،‫فيه يحتوي على أربع أسطر‬
‫ مع العلم أن الوسمين تم ضبطهم‬،‫عمود فيه يحتوي على خمسة أسطر‬
.‫ لتتم مقارنتهم‬،100px ‫ واحد بمقدار‬height ‫على طول‬
PAGE 644
columns ‫خاصية األعمدة‬
‫ ثم خاصية‬،column-width ‫هي خاصية مختصرة لخاصية العرض‬
:‫ وسنجرب بالكود! التالي‬،column-count ‫العدد‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
column-rule:2px dashed; column-gap:70px;
columns:100px 2;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
.‫ فقط‬columns ‫الحظ أنه تم تحديد العرض والعدد بالخاصية‬

Grid Layout ‫النظام الشبكي‬

،‫ حيث به أعمدة‬،‫ هو الجدول‬،‫أكثر شيء يمكن تشبيه النظام الشبكي به‬
،‫ ويمكن إعطاء نسب مئوية‬،‫ ويمكن الدمج وتوزيع العناصر‬،‫ وخاليا‬،‫وصفوف‬
grid ‫ وهنا مع نظام الـ‬،‫لجعل العناصر قابلة للتحجيم عند تغيير العرض‬
:‫ كما يلي‬،‫ قم بالبداية العادية‬،‫يكون الوضع في غاية الروعة‬
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<div>1</div><div>2</div>
</div>
</body>
</html>
PAGE 646
grid-template-columns ‫قالب األعمدة‬
‫ ثم تحديد القالب‬،display ‫ للخاصية‬grid ‫ البد من تحديد القيمة‬،ً‫أوال‬
.‫ وسنتفهم أكثر إن شاء اهلل مع التجربة‬،‫الذي سوف يحدد األعمدة‬
:‫ بالكود! التالي‬،‫واآلن سنبدأ في التغيير‬
<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
display:grid;
grid-template-columns:50px 50px;
}
div.grid>.item{
padding:7px; font-size:25px; text-align:center;
}
</style>
</head>
<body>
<div class="grid">
<div class="item">1</div><div class="item">2</div>
</div>
</body>
</html>

‫واآلن انتبه! معي جيداً‪ ،‬فال اريدك أن تركز على تنسيقات العناصر الداخلية‬
‫‪ ،item‬في الوقت الحالي‪ ،‬فكلها معروفة‪ ،‬وتم شرحها من قبل‪ ،‬بل أريدك‬
‫فقط أن تركز على ;‪grid-template-columns:50px 50px‬‬
‫ألنه بهذا الكود تم تكوين عمودين‪ ،‬وكل منهما بعرض ‪ 50px‬كما هو‬
‫واضح بالشكل‪ ،‬ولو كتبت القيم مثل ‪ ،100px 100px 100px‬سيكون‬
‫مثل الشكل التالي‪:‬‬
‫حيث تم تكوين ثالث أعمدة‪ ،‬وعرض كل منهم ‪ ،100px‬وهكذا‪ ،‬حيث‬

‫يمكنك وضع ما تريد في القالب‪.‬‬
‫‪PAGE 648‬‬
<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
display:grid;
grid-template-columns:100px 100px 100px;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
<div class="item">Ahmed Hassouna</div>
<div class="item">Adel Sabour</div>
<div class="item">Osama Elzero</div>
<div class="item">Amr ELSayed</div>
<div class="item">Mahmoud Elawa</div>
<div class="item">Eslam Elnoby</div>
<div class="item">Ahmed Baryyan</div>
<div class="item">Ehab Mohamed</div>
</div>
</body>
</html>

‫الحظ أن المحتوي غير ظاهر بالكامل‪ ،‬ألن خاصية قالب األعمدة أخذت‬
‫القيم ‪ ،100px 100px 100px‬فكان المحتوي في بعض الخاليا يحتاج الى‬
‫عرض أكثر من الـ ‪ ،100px‬وإذا تغيرت الى ‪،auto auto auto‬‬
‫سيختلف األمر مثل الشكل التالي‪:‬‬
‫الحظ أن دور القيمة ‪ auto‬هام جداً في تنسيق خاليا الـ ‪.grid‬‬
‫‪PAGE 650‬‬
grid-template-rows ‫قالب الصفوف‬
‫ ثم تحديد القالب‬،display ‫ للخاصية‬grid ‫ البد من تحديد القيمة‬،ً‫أوال‬
.‫ وسنتفهم أكثر إن شاء اهلل مع التجربة‬،‫الذي سوف يحدد الصفوف‬
:‫واآلن سنجرب بالكود! التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
display:grid;
grid-template-rows:100px 100px 100px;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>

،‫ بدون أعمدة‬،‫ لطول كل صف‬100px ‫ تكوين ثالثة صفوف بمقدار‬،‫الحظ‬

:‫ ولو تم زيادة الكود التالي‬،‫وهذا ال يمنع استخدام الصفوف واألعمدة‬
grid-template-columns:auto auto;
:‫سيكون مثل الشكل التالي‬
PAGE 652
‫قالب مناطق الخاليا ‪grid-template-areas‬‬
‫إذا أحببت أن أقرب لك المعني‪ ،‬فسوف أقول لك‪ ،‬اعتبر هذا الموضوع مثل‬
‫فكرة دمج الخاليا‪ ،‬حيث خاصية ‪ ،grid-template-areas‬تحدد‬
‫مناطق بعض الخاليا‪ ،‬ولكن أوالً البد أن يتم إعطاء قيمة باسم معين‬
‫لخاصية ‪ grid-area‬للعنصر الـ ‪ item‬المراد تحديد منطقته‪ ،‬ثم بعد‬
‫ذلك يتم ضبط خاصية ‪ grid-template-areas‬للـ ‪.grid‬‬
‫قبل البدء في كتابة األكواد في موضوع مناطق الخاليا‪ ،‬نريد أن نتعرف‬

‫بالتفصيل على كيفية كتابة أكوادها أوالً‪ ،‬وسوف يتم سرد بعض النقاط‬
‫بترتيب متعمد للفهم‪ ،‬وهي كما يلي‪:‬‬
‫• انشاء اسم جديد للعنصر المراد فقط بالخاصية ‪،grid-area‬‬
‫والموجود بداخل الـ ‪grid‬‬
‫• في عنصر الـ ‪ grid‬نفسه‪ ،‬يتم كتابة هذا االسم مرتين ليأخذ مكان‬
‫خليتين‪ ،‬أو ثالثة ليأخذ مكان ثالث خاليا‪ ،‬أو أربعة ليأخذ مكان أربع‬
‫خاليا‪ ،‬أو خمسة ليأخذ مكان خمس خاليا‪ ،‬أو ستة ليأخذ مكان ستة‬
‫خاليا‪ ،‬وهكذا‪ ،‬وبين كل مرة ومرة مسافة‪ ،‬وتتم كل هذه الكتابة في‬
‫الخاصية ‪ grid-template-areas‬ما بين رمزين سنجل كوت‬
‫• لوجود خاليا بجوار الخلية المقصود دمجها‪ ،‬يتم أخذ مسافة بعد تكرارات‬
‫االسم ثم الرمز دوت‪ ،‬ولوجود خلية أخري مسافة ثم دوت‪ ،‬وهكذا‬

<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-area:item1; }
div.grid{
display:grid;
grid-template-columns:auto auto auto;
grid-template-areas: 'item1 item1 item1';
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
<div class="item" id="i1">Ahmed Hassouna</div>
<div class="item">Mahmoud Fayed</div>
<div class="item">Ahmed Samy</div>
</div>
</body>
</html>
PAGE 654
‫الحظ أنه تم تسمية العنصر المراد‪ ،‬بسطر الكود التالي‪:‬‬

‫} ;‪#i1{ grid-area:item1‬‬
‫الحظ أنه تم تكرار االسم ‪ 3‬مرات ليدمج تحته ثالث خاليا بالسطر التالي‪:‬‬
‫;'‪grid-template-areas: 'item1 item1 item1‬‬

<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
display:grid; grid-template-rows:120px 120px 120px;
grid-template-columns:auto auto auto auto;
grid-template-areas: 'item1 item1 item1 .';
}
div.grid>.item{
border:1px solid navy; display:flex;
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 656
‫الحظ أنه تم كتابة اسم العنصر المراد دمجه ثالث مرات ليدمج ثالث‬
‫خاليا‪ ،‬ثم بعد التكرارات الثالثة هذه‪ ،‬تم كتابة مسافة ثم بعدها الرمز دوت‬
‫بشكل مباشر‪ ،‬وهذا ليكون هناك خلية موجودة بين الخلية التي دمجت ثالث‬
‫خاليا‪.‬‬
‫الحظ أنه تم تحديد طول كل صف بمقدار ‪ ،120px‬والحظ أنه تم‬

‫استخدام الـ ‪ flex‬لجعل المحتوي في المنتصف‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
grid-template-areas: 'item1 item1 item2 item2';
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
<div class="item" id="i2">Adel Sabour</div>
</div>
</body>
</html>
PAGE 658
‫الحظ هنا أنه تم تسمية عنصرين وهم ‪ item1‬و‪ ،item2‬ثم تم‬

‫وضع القيم '‪ 'item1 item1 item2 item2‬داخل الخاصية‬
‫‪ ،grid-template-areas‬فتم دمج خليتين لـ ‪ ،item1‬وتم‬
‫دمج خليتين لـ ‪.item2‬‬
‫انتبه! جيداً ألن المثال التالي إن شاء اهلل‪ ،‬سيجعلك تبدأ في الفهم أكثر‬
‫بفضل اهلل‪ ،‬حيث سوف يتم تسمية جميع العناصر ‪ ،items‬ثم يتم وضع‬
‫ترتيب ظهورهم في الـ ‪.grid‬‬

<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-area:item1; } #i2{ grid-area:item2; }
div.grid{
grid-template-areas: 'item1 item2 item5 item6'
'item3 item3 item4 item4';
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
<div class="item" id="i3">Osama Elzero</div>
<div class="item" id="i4">Mahmoud Fayed</div>
<div class="item" id="i5">Amr ELSayed</div>
<div class="item" id="i6">Mahmoud Elawa</div>
<div class="item" id="i7">Eslam Elnoby</div>
<div class="item" id="i8">Ahmed Baryyan</div>
<div class="item" id="i9">Ehab Mohamed</div>
<div class="item" id="i10">Ahmed Samy</div>
</div>
</body>
</html>
PAGE 660
‫وهنا يظهر لك أنه من المتاح أن تقسم الـ ‪ grid‬كما تحب‪ ،‬حيث تكتب‬
‫مجموعة عناصر بين رمزين سنجل كوت‪ ،‬ثم مسافة‪ ،‬ثم مجموعة عناصر‬
‫أخري بين سنجل كوت‪ ،‬وهكذا حتى تبني الـ ‪ grid‬الخاص بك‪.‬‬
‫الحظ أنه تم وضع أربع عناصر بالترتيب الذي نريده ليملئوا أول صف‪،‬‬
‫وهم ‪ item1‬و‪ item2‬و‪ item5‬و‪ ،item6‬ثم جعلنا العنصر‬
‫‪ item3‬يأخذ خليتين‪ ،‬ثم جعلنا العنصر ‪ item4‬يأخذ خليتين‪ ،‬ثم‬
‫الذي لم نكتبه ولم نسميه بـ ‪ ،grid-area‬سيتم ترتيبهم تلقائياً‪ ،‬ولكن‬
‫انتبه! جيداً‪ ،‬فإذا قمت بتسمية عنصر قم بكتابته داخل الترتيب‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
grid-template-areas: 'item1 item2 item3 item4'
'item1 item5 item6 item7';
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
<div class="item" id="i7">Eslam Elnoby</div>
</div>
</body>
</html>
PAGE 662
‫الحظ أنه تم كتابة العنصر ‪ item1‬في السلسلة األولي في البداية‪ ،‬ثم‬

‫تم كتابته في السلسلة الثانية في البداية‪ ،‬فتم دمجه طولياً‪.‬‬

grid-template ‫القالب‬
،grid-template-rows ‫ فللخاصية‬،‫هو مختصر لخواص القالب‬
‫ أو‬،grid-template-columns ‫ ثم الخاصية‬،/ ‫ثم الرمز‬
.‫ فيتم عمل القالب‬،grid-template-areas ‫كتابة الخاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
display:grid;
grid-template:120px 120px 120px / auto auto auto;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 664
‫الحظ أنه تم كتابة قالب الصفوف‪ ،‬ثم قالب األعمدة في خاصية واحدة‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
display:grid;
grid-template:'item1 item2 item3'
'item4 item2 item5';
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 666
‫الحظ أنه تم كتابة القيم الخاصة بقالب مناطق الخاليا في الخاصية‬

‫‪ ،grid-template‬بدالً من ‪.grid-template-areas‬‬

grid-area ‫مناطق الخاليا‬
،template ‫ بدالً من العمل بالـ‬،‫يمكن تحديد أماكن الخاليا باألرقام‬
:‫وسنجرب بالكود! التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-area: 1/1 } #i2{ grid-area: 1/2 }
div.grid{
display:grid;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
<div class="item" id="i3">Atef Ruslan</div>
<div class="item" id="i4">Kareem Samy</div>
</div>
</body>
</html>
PAGE 668
‫الحظ أننا لم نحدد للعنصر الرئيسي إال ‪ display:grid‬فقط‪.‬‬
‫األول والعمود األول‪.‬‬ ‫الصف‬ ‫في‬ ‫ليكون‬ ‫‪i1‬‬ ‫العنصر‬ ‫تحديد‬ ‫تم‬ ‫أنه‬ ‫الحظ‬
‫األول والعمود الثاني‪.‬‬ ‫الصف‬ ‫في‬ ‫ليكون‬ ‫‪i2‬‬ ‫العنصر‬ ‫تحديد‬ ‫تم‬ ‫أنه‬ ‫الحظ‬
‫الثاني والعمود األول‪.‬‬ ‫الصف‬ ‫في‬ ‫ليكون‬ ‫‪i3‬‬ ‫العنصر‬ ‫تحديد‬ ‫تم‬ ‫أنه‬ ‫الحظ‬
‫الثاني والعمود الثاني‪.‬‬ ‫الصف‬ ‫في‬ ‫ليكون‬ ‫‪i4‬‬ ‫العنصر‬ ‫تحديد‬ ‫تم‬ ‫أنه‬ ‫الحظ‬
‫الثالث والعمود األول‪.‬‬ ‫الصف‬ ‫في‬ ‫ليكون‬ ‫‪i5‬‬ ‫العنصر‬ ‫تحديد‬ ‫تم‬ ‫أنه‬ ‫الحظ‬
‫الثالث والعمود الثاني‪.‬‬ ‫الصف‬ ‫في‬ ‫ليكون‬ ‫‪i6‬‬ ‫العنصر‬ ‫تحديد‬ ‫تم‬ ‫أنه‬ ‫الحظ‬

grid-gap ‫فجوات بين الخاليا‬
،grid-column-gap ‫ بالخاصية‬،‫يمكن عمل فجوات عمودية‬
:‫وسنجرب بالكود! التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
display:grid; background:#b11eb1; padding:10px;
grid-column-gap:10px;
}
div.grid>.item{
background:rgba(255,255,255,0.7);
padding:20px 0; font-size:25px; text-align:center;
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 670
‫الحظ أن حشو الـ ‪ grid‬بمقدار ‪ ،10px‬وكذلك مقدار الفجوات‪،‬‬

‫لتتناسب‪ ،‬وتتجانس‪ ،‬وتتناسق‪.‬‬
‫الحظ أن لون خلفية الـ ‪ ،items‬أبيض بمقدار شفافية ‪ ،0.7‬وذلك‬

‫ليكون نفس لون خلفية الـ ‪ ،grid‬ولكن أفتح منه بقليل‪.‬‬
‫الحظ أن حشو الـ ‪ ،items‬تم ضبطه من أعلي وأسفل فقط‪ ،‬حتى ال‬
‫يضايق عرض النص بالخلية‪.‬‬

‫ وسنجرب‬،grid-row-gap ‫ بالخاصية‬،‫يمكن عمل فجوات أفقية‬
:‫بالكود! التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
grid-row-gap:10px;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 672
‫الحظ أنه تم استبدال الخاصية ‪ grid-column-gap‬بالخاصية‬

‫‪ ،grid-row-gap‬فأصبحت الفجوات أو الفراغات أفقية بين‬
‫الصفوف‪.‬‬

‫ وسنجرب‬،grid-gap ‫ بالخاصية‬،‫يمكن عمل فجوات أفقية ورأسية‬
<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
grid-gap:10px;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 674
‫الحظ أن الخاصية ‪ ،grid-gap‬تعتبر اختصار ‪،shorthand‬‬

‫للخاصيتين ‪ grid-column-gap‬و‪ ،grid-row-gap‬في‬
‫وقت واحد‪ ،‬لعمل فجوات بين األعمدة‪ ،‬وكذلك فجوات بين الصفوف‪.‬‬

grid-row-start ‫صف البداية‬
‫ وذلك‬،‫يمكن أن نحدد لعنصر معين أن يبدأ من صف معين على حسب الرغبة‬
.‫ بإعطائها رقم الصف‬grid-row-start ‫بالخاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-row-start:2; }
div.grid{
display:grid;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 676
‫الحظ أن العنصر ‪ i1‬تم وضعه في األول بطبيعته‪ ،‬ولكن بعد إعطاء القيمة‬
‫‪ 2‬للخاصية ‪ ،grid-row-start‬أصبح في أول الصف الثاني‪ ،‬حيث‬
‫أخذت رقم الصف الذي سوف تبدأ فيه‪ ،‬وإذا لم تخصص قيمة لهذه‬
‫الخاصية‪ ،‬فتأخذ قيمة افتراضية بـ ‪.auto‬‬

grid-row-end ‫صف النهاية‬
،‫يمكن أن نحدد لعنصر معين أن ينتهي قبل صف معين على حسب الرغبة‬
‫ بإعطائها رقم الصف الذي ينتهي‬grid-row-end ‫وذلك بالخاصية‬
:‫ وسنجرب بالكود! التالي‬،‫قبله‬
<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-row-end: 4; }
div.grid{
display:grid;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 678
‫وهنا تم إعطاء القيمة ‪ 4‬للخاصية ‪ ،grid-row-end‬لينتهي‬

‫العنصر المقصود الى الصف الرابع‪ ،‬أي ما قبل الصف الرابع‪ ،‬وإذا لم‬
‫تخصص قيمة لهذه الخاصية‪ ،‬فتأخذ قيمة افتراضية بـ ‪.auto‬‬
‫انتبه! أنه إذا أعطيت الخاصية القيمة مثالً ‪ 2‬سوف يكون محلها في‬
‫الصف األول‪ ،‬وإذا اعطيتها القيمة ‪ 3‬سوف يكون محلها في الصف الثاني‪،‬‬
‫وفي المثال السابق لما أعطيناها القيمة ‪ 4‬كان محلها في الصف الثالث‪،‬‬
‫وهكذا حتى تفعل ما ترغب به بفضل اهلل‪.‬‬
‫انتبه! فإنه يمكنك عمل تمدد ‪ span‬للخاليا بهذه الخاصية الرائعة‪ ،‬وذلك‬
‫عن طريق اعطاؤها قيمة ‪ ،span‬ثم مسافة‪ ،‬ثم رقم للتمدد‪ ،‬مثالً ‪2‬‬
‫لتتمدد في خليتين‪ ،‬او ‪ 3‬لتتمدد في ثالث خاليا‪ ،‬وهكذا‪ ،‬وسنجرب في المثال‬
‫التالي إن شاء اهلل‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-row-end:span 3; }
div.grid{
display:grid;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 680
‫الحظ أن العنصر ‪ i1‬تمدد في ثالث خاليا‪ ،‬ألنه أخذ القيمة ‪،span 3‬‬
‫فحل محل ثالث خاليا رأسية كاملة‪ ،‬أو يمكننا القول إنه دمج ثالث صفوف‪.‬‬

grid-row ‫الصف‬
grid-row-start ‫ مختصر للخاصيتين‬،grid-row ‫الخاصية‬
:‫ وسنجرب بالكود! التالي‬،grid-row-end‫و‬
<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-row:2 / span 3; }
div.grid{
display:grid;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 682
‫الحظ أن الخاصية ‪ ،grid-row‬أخذت قيمتين وبينهم فاصل ‪ ،/‬حيث‬

‫كانت القيمة النهائية هي ‪ ،2 / span 3‬ومعني ذلك‪ ،‬وكأننا نقول لهذا‬
‫العنصر‪ ،‬ابدأ من الصف الثاني‪ ،‬وقم بدمج ثالث خاليا‪.‬‬

grid-column-start ‫عمود البداية‬
.‫يمكن تحديد رقم العمود الذي ستبدأ الخلية منه‬
<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-column-start:2; }
div.grid{
display:grid;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 684
‫الحظ أن العنصر المقصود بدأ من العمود الثاني‪.‬‬

grid-column-end ‫عمود النهاية‬
.‫يمكن تحديد رقم العمود الذي يكون مكان العنصر قبله‬
<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-column-end:4; }
div.grid{
display:grid;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 686
‫الحظ أن نهاية العنصر الى العمود ‪ ،4‬أي مكان هذا العنصر ما قبل العمود‬
‫‪ ،4‬فأصبح محلة أو مكانة في العمود الثالث‪.‬‬
‫انتبه! أنه إذا أعطيت الخاصية القيمة مثالً ‪ 2‬سوف يكون محلها في‬
‫العمود األول‪ ،‬وإذا اعطيتها القيمة ‪ 3‬سوف يكون محلها في العمود الثاني‪،‬‬
‫وفي المثال السابق لما أعطيناها القيمة ‪ 4‬كان محلها في العمود الثالث‪،‬‬
‫وهكذا حتى تفعل ما ترغب به بفضل اهلل‪.‬‬
‫انتبه! فإنه يمكنك عمل تمدد ‪ span‬للخاليا بهذه الخاصية الرائعة‪ ،‬وذلك‬
‫عن طريق اعطاؤها قيمة ‪ ،span‬ثم مسافة‪ ،‬ثم رقم للتمدد‪ ،‬مثالً ‪2‬‬
‫لتتمدد في خليتين‪ ،‬او ‪ 3‬لتتمدد في ثالث خاليا‪ ،‬وهكذا‪ ،‬وسنجرب في المثال‬
‫التالي إن شاء اهلل‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-column-end:span 3; }
div.grid{
display:grid;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 688
‫الحظ أن العنصر ‪ i1‬تمدد في ثالث خاليا‪ ،‬ألنه أخذ القيمة ‪،span 3‬‬
‫فحل محل ثالث خاليا أفقية كاملة‪ ،‬أو يمكننا القول إنه دمج ثالث أعمدة‪.‬‬

grid-column ‫العمود‬
‫ تعتبر مختصر سريع للخاصيتين‬،grid-column ‫خاصية العمود‬
‫ وسنجرب‬،grid-column-end‫ و‬grid-column-start
<!DOCTYPE html>
<html>
<head>
<style>
#i1{ grid-column:2 / span 2; }
div.grid{
display:grid;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
PAGE 690
‫الحظ أن الخاصية ‪ ،grid-column‬أخذت قيمتين وبينهم فاصل ‪،/‬‬

‫حيث كانت القيمة النهائية هي ‪ ،2 / span 2‬ومعني ذلك‪ ،‬وكأننا نقول‬
‫لهذا العنصر‪ ،‬ابدأ من العمود الثاني‪ ،‬وقم بدمج خليتين‪.‬‬

grid-auto-columns ‫تلقائية العمود‬
‫ ثم إعطاء‬،grid-area ‫يمكن تقسيم المناطق عن طريق الخاصية‬
‫ لتكون هذه القيمة لعرض‬grid-auto-columns ‫قيمة للخاصية‬
:‫ وسنجرب إن شاء اهلل بالكود! التالي‬،‫كل خلية‬
<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
display:grid;
grid-auto-columns:120px;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
<div class="item" id="i3">Ahmed ELKersh</div>
</div>
</body>
</html>
PAGE 692
‫الحظ أن عرض كل خلية أصبح ‪ ،120px‬ولكن ال تنسي أنه تم تقسيم‬

‫المناطق عن طريق الخاصية ‪ ،grid-area‬ثم إعطاء قيمة ‪120px‬‬
‫للخاصية ‪.grid-auto-columns‬‬

grid-auto-rows ‫تلقائية الصف‬
.grid-auto-rows ‫يمكن ضبط تلقائية الصف عن طريق الخاصية‬
<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
display:grid;
grid-auto-rows:120px;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
<div class="item" id="i4">Ahmed Hanafi</div>
</div>
</body>
</html>
PAGE 694
‫الحظ أن الخاصية ‪ grid-auto-rows‬تم تخصيص القيمة‬

‫‪ 120px‬لها‪ ،‬فأصبح طول كل صف بمقدار ‪.120px‬‬

grid-auto-flow ‫تلقائية التدفق‬
:‫ وسنجرب بالكود! التالي‬،‫يمكن التحكم في تدفق العناصر‬
<!DOCTYPE html>
<html>
<head>
<style>
div.grid{
display:grid;
grid-auto-flow:column;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
<div class="item" id="i5">Abdalhady Hassouna</div>
</div>
</body>
</html>
PAGE 696
‫الخاصية ‪ grid-auto-flow‬تأخذ قيمة افتراضية بـ ‪ ،row‬أي ان‬

‫التدفق في األساس يكون بترتيب صفوف‪ ،‬ولكن عندما أعطيناها القيمة‬
‫‪ ،column‬تم الترتيب كأعمدة‪ ،‬كما هو ظاهر في الشكل السابق‪.‬‬

‫ ولفهم ذلك سوف‬،dense ‫يمكن وضع قيمة لعمل تدفق بكثافة بالقيمة‬
:‫نقوم بعمل المثال التالي أوالً بدون كثافة‬
<!DOCTYPE html>
<html>
<head>
<style>
#i3{ grid-column:auto / span 2; }
div.grid{
display:grid;
}
div.grid>.item{
}
</style>
</head>
<body>
<div class="grid">
<div class="item" id="i2">Mohamed Abdel Kareem</div>
</div>
</body>
</html>
PAGE 698
‫الحظ أن الخلية المكتوب فيها "‪ "Ahmed Hanafi‬تمت محاذاتها‬

‫باألسفل تلقائياً مع الخلية التي تم دمجها‪ ،‬واآلن اكتب الكود التالي‪:‬‬
‫;‪grid-auto-flow:dense‬‬
‫كزيادة لتنسيق الـ ‪ ،div.grid‬وسوف يظهر كالشكل التالي‪:‬‬

‫فتح تحجيم العناصر ‪resize‬‬

‫هل تتذكر عندما قمت بإنشاء الوسم ‪ textarea‬على صفحتك؟‪ ،‬إذا لم‬
‫تتذكر راجع كتاب صخرة األساس في ‪ ،HTML‬وإن تذكرت‪ ،‬فتذكر أن‬
‫هناك جزء يتم التحجيم منه‪ ،‬كما يوضح الشكل التالي‪:‬‬
‫هذا هو المقبض المقصود‪ ،‬الذي يتم التحجيم منه‬
‫وعن طريق الخاصية ‪ resize‬نستطيع فعل هذا الشيء مع باقي العناصر‬

‫األخرى مثل الوسم ‪ div‬والوسم ‪ ،p‬وإن شاء اهلل سوف نجرب في المثال‬
‫التالي بفضل اهلل‪.‬‬
‫‪PAGE 700‬‬
<!DOCTYPE html>
<html>
<head>
<style>
div , p{
border:1px solid black;
overflow:auto;
resize: both;
}
</style>
</head>
<body>
<div>This is Div</div>
<p>This is paragraph</p>
</body>
</html>

‫الحظ في الشكل السابق‪ ،‬وجود نفس مقبض التحكم الذي كان موجوداً في‬
‫الوسم ‪ ،textarea‬واآلن انتبه! ألننا سوف نذهب بالماوس الى هذا‬
‫المقبض ثم نغير حجم الوسم ‪ p‬بشكل عشوائي‪ ،‬ليكون كالشكل التالي‪:‬‬
‫وهكذا مع الوسم ‪ ،div‬والحظ أيضاً ضبط الخاصية ‪overflow‬‬

‫على القيمة ‪ ،auto‬لتتناسب مع التحجيم‪ ،‬والحظ أيضاً أن الخاصية‬
‫‪ resize‬تم ضبطها على القيمة ‪ ،both‬أي يتغير رأسياً وأفقياً‪ ،‬كما‬
‫يمكن إعطاؤها القيمة ‪ horizontal‬لتكون أفقية فقط‪ ،‬ويمكن‬
‫إعطاؤها القيمة ‪ vertical‬لتكون رأسية فقط‪ ،‬أو القيمة ‪ none‬ليتم‬
‫إلغاؤها‪ ،‬و‪ none‬هي االفتراضية‪ ،‬وهنا انتبه! جيداً‪ ،‬ألن هناك استفادة‬
‫كبيرة‪ ،‬وهي أنه من الممكن إلغاء تحجيم الوسم ‪ ،textarea‬وإخراجه‬
‫عن طبيعته‪ ،‬وذلك بضبط القيمة ‪ none‬لخاصية ‪ resize‬له‪.‬‬
‫‪PAGE 702‬‬
scroll-behavior ‫أسلوب التمرير‬

‫ سوف نكتب مثال تم استخدامه في كتاب‬،‫واآلن لفهم عمل هذه الخاصية‬
:‫ كما يلي‬،118 ‫ من قبل في صفحة رقم‬،HTML ‫صخرة األساس‬
<!DOCTYPE html>
<html>
<head>
<style>
p{
border:1px solid black; height:200px;
background:lightyellow;
}
</style>
</head>
<body>
<h3 id="top">This is top</h3>
<a href="#p1">Go to paragraph 1</a> :
<a href="#p2">Go to paragraph 2</a> :
<a href="#p3">Go to paragraph 3</a>
<p id="p1"><b>Title 1</b><br>
This is subject 1, This is subject 1</p>
<a href="#top">Go to top</a><hr>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>

‫ أنه ينزل فجأة على المكان‬،‫واآلن من الطبيعي عند الضغط على أي رابط‬
:style ‫ واآلن قم بزيادة الكود التالي في الوسم‬،‫المقصود في الصفحة‬
html{ scroll-behavior: smooth; }
"Go to paragraph 3" ‫واآلن احفظ واضغط مثالً على الرابط‬
.‫وسوف تري التغيير في أسلوب التحريك وهو بالبطيء وكأنك تمرره بنفسك‬
PAGE 704
‫التحول والمنظور ‪Transform, Perspective‬‬

‫داخل اللغة ‪ css‬الجميلة يوجد خاصية باسم ‪ ،transform‬تمكن‬
‫مصمم ومطور الويب من اجراء التحوالت والتغيرات الكثيرة بكل سهولة‪،‬‬
‫للوصول الى تصميم أكثر جاذبية‪ ،‬أو تصميم به تغيرات كثيرة لو أحببت أن‬
‫تفعلها بدون اللغة ‪ css‬سوف تستغرق وقت كثير وجهد كبير وتكلفة وحجم‬
‫صور مهدر لإلنترنت‪ ،‬مثل أن تقلب عنصر من أعلي إلى أسفل‪ ،‬أو مثل أن‬
‫تتم عملية شد للعنصر وكأنه مطاطي‪ ،‬أو مثل أن تتم عملية استدارة‪ ،‬وغير‬
‫ذلك من التحوالت المتميزة للعناصر‪.‬‬
‫ينقسم التحول ‪ transform‬الى قسمين‪ ،‬وهما كما يلي‪:‬‬

‫• ثنائي األبعاد ‪2D‬‬
‫يتم التغيير فيها بأبعاد ثنائية عادية على صفحة الويب‪ ،‬سواء كان‬
‫تحريك او استدارة او غير ذلك‪.‬‬
‫• ثالثي األبعاد ‪3D‬‬
‫هي نفس عمليات الـ ‪ ،2D‬ولكن يتم التغيير فيها بأبعاد ثالثية وتحكم‬
‫أكثر‪ ،‬ويتطلب فهم المنظور أوالً الستخدامه وتفعيله‪.‬‬

2D ‫التحول ثنائي األبعاد‬
.‫ مثل الدوران والتحريك وغير ذلك‬،‫في هذا القسم يتم التغيير بشكل طبيعي‬
rotate ‫تحول االستدارة‬

‫ وهذه القيمة‬،rotate ‫ تأخذ قيمة في الدالة‬transform ‫الخاصية‬
ً‫ مثال‬،‫هي عبارة عن الدرجة التي يتم تدوير العنصر على أساسها‬
:‫ وسنجرب بالكود! التالي‬،90deg ‫ أو‬،120deg
<!DOCTYPE html>
<html>
<head>
<style>
div{
background:lightblue; width:120px; height:70px;
margin:70px; font-size:30px; font-weight:bold;
}
#d1{ transform: rotate(10deg) }
</style>
</head>
<body>
</body>
</html>
PAGE 706
‫الحظ أنك تشكل زاوية االستدارة كما تريد بفضل اهلل‪.‬‬

rotateX ‫استدارة أفقية‬
،ً‫ حتى ينقلب أفقيا‬،ً‫تخيل معي وأن العنصر ينكمش من أعلي وأسفل معا‬
:‫ وسوف نبين ذلك بالكود! التالي‬،rotateX ‫وسنفعل هذا بالدالة‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: rotateX(50deg) }
</style>
</head>
<body>
</body>
</html>
PAGE 708
‫الحظ أنه تم تقليصه‪ ،‬حتى تم عكسه أفقياً‪.‬‬

rotateY ‫استدارة رأسية‬
،ً‫ حتى ينقلب رأسيا‬،ً‫تخيل معي وأن العنصر ينكمش يميناً ويساراً معا‬
:‫ وسوف نبين ذلك بالكود! التالي‬،rotateY ‫وسنفعل هذا بالدالة‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: rotateY(50deg) }
</style>
</head>
<body>
</body>
</html>
PAGE 710
‫الحظ أنه تم تقليصه‪ ،‬حتى تم عكسه رأسياً‪.‬‬

skewX ‫االنحراف األفقي‬
‫تخيل معي لو أن الشكل المستطيل انحرف فأصبح الضلعين الطوليين مائلين‬
!‫ وسوف نبين ذلك بالكود‬،skewX ‫ وسنفعل هذا بالدالة‬،ً‫يميناً أو يسارا‬
:‫التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: skewX(20deg) }
</style>
</head>
<body>
</body>
</html>
PAGE 712
‫الحظ أن الشكل ينحرف يميناً أو يساراً حسب الزاوية‪.‬‬

skewY ‫االنحراف الرأسي‬
‫تخيل معي لو أن الشكل المستطيل انحرف فأصبح الضلعين العرضيين مائلين‬
!‫ وسوف نبين ذلك بالكود‬،skewY ‫ وسنفعل هذا بالدالة‬،‫أعلى أو أسفل‬
:‫التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: skewY(20deg) }
</style>
</head>
<body>
</body>
</html>
PAGE 714
‫الحظ أن الشكل ينحرف أعلى أو أسفل حسب الزاوية‪.‬‬

skew ‫االنحراف الكلي‬
‫تخيل معي لو أن الشكل المستطيل انحرف فأصبح الضلعين الطوليين‬
‫ وسنفعل هذا‬،ً‫والضلعين العرضيين مائلين أعلى أو أسفل يميناً ويسارا‬
‫ وسوف نبين ذلك‬،y ‫ ثم زاوية للـ‬x ‫ التي تأخذ زاوية للـ‬skew ‫بالدالة‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: skew(30deg, 20deg) }
</style>
</head>
<body>
</body>
</html>
PAGE 716
‫الحظ أن هناك انحرافات من جميع االتجاهات بناء على قيم الزوايا‪.‬‬

scaleX ‫المقياس األفقي‬
‫ ثم قمت بشده بمقدار‬،‫سم‬10 ‫تخيل معي لو أنك أمسكت جسم مطاطي طوله‬
،scaleX ‫ فهكذا تفعل الدالة‬،‫سم أخري فأصبح ضعفين حجمه‬20
،ً‫ وتقل لتصغر أفقيا‬،‫ هي الحجم الطبيعي‬1 ‫ فالقيمة‬،‫ أو يصغر‬،‫سواء يكبر‬
:‫ وسوف نبين ذلك بالكود! التالي‬،ً‫وتزيد لتكبر أفقيا‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: scaleX(0.5) }
#d5{ transform: scaleX(2) }
</style>
</head>
<body>
</body>
</html>
PAGE 718
‫الحظ أن الـ ‪ scale‬تغير أفقياً‪ ،‬فتم التأثير على شكل العنصر العام‪،‬‬
‫فمثالً أنظر الى ‪ Div 5‬وقارن بين اإلطارين اعلي وأسفل‪ ،‬واإلطارين‬
‫يميناً وشماالً‪ ،‬وسوف تالحظ أن األحجام مختلفة ألن الـ ‪ scale‬تغير‬
‫أفقياً بالدالة ‪.scaleX‬‬

scaleY ‫المقياس الرأسي‬
‫ ثم قمت بشده بمقدار‬،‫سم‬10 ‫تخيل معي لو أنك أمسكت جسم مطاطي طوله‬
،scaleY ‫ فهكذا تفعل الدالة‬،‫سم أخري فأصبح ضعفين حجمه‬20
،ً‫ وتقل لتصغر رأسيا‬،‫ هي الحجم الطبيعي‬1 ‫ فالقيمة‬،‫ أو يصغر‬،‫سواء يكبر‬
:‫ وسوف نبين ذلك بالكود! التالي‬،ً‫وتزيد لتكبر رأسيا‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: scaleY(0.5) }
#d5{ transform: scaleY(2) }
</style>
</head>
<body>
</body>
</html>
PAGE 720
‫الحظ أن الـ ‪ scale‬تغير رأسياً‪ ،‬فتم التأثير على شكل العنصر العام‪،‬‬
‫فمثالً أنظر الى ‪ Div 5‬وقارن بين اإلطارين اعلي وأسفل‪ ،‬واإلطارين‬
‫يميناً وشماالً‪ ،‬وسوف تالحظ أن األحجام مختلفة ألن الـ ‪ scale‬تغير‬
‫رأسياً بالدالة ‪.scaleY‬‬

scale ‫المقياس الكلي‬
‫ في‬،scaleY‫ و‬scaleX ‫ تجمع بين الخاصيتين‬scale ‫الخاصية‬
.‫ فيتم تعديل المقياس‬،y ‫ ثم قيمة الـ‬،x ‫ حيث تأخذ قيمة الـ‬،‫نفس الوقت‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: scale(1.5, 1.5) }
#d5{ transform: scale(0.5, 2) }
</style>
</head>
<body>
</body>
</html>
PAGE 722
‫الحظ أن الـ ‪ scale‬تغير أفقياً ورأسياً في نفس الوقت‪.‬‬
‫انتبه!‪ ،‬لو تم تخصيص القيمة ‪ -1‬فسوف يتم اعكاس الصورة‪.‬‬

translateX ‫تحريك أفقي‬
‫ أو نحو اليسار‬،‫ نحو اليمين كلما زادت القيمة‬،ً‫يمكن تحريك العنصر أفقيا‬
:‫ وسوف نبين ذلك بالكود! التالي‬،‫كلما قلت القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: translateX(50px); }
#d4{ transform: translateX(-50px); }
</style>
</head>
<body>
</body>
</html>
PAGE 724
‫الحظ أنه كلما زادت القيمة الموجودة في الدالة ‪ translateX‬تزحزح‬

‫العنصر الى اليمين‪ ،‬وكلما قلت تزحزح الى اليسار‪ ،‬مع العلم أن اتجاه‬
‫الصفحة هو ‪ Left to Right‬بشكل افتراضي‪ ،‬والحظ أن الذي أخذ‬
‫قيمة سالبة خرج عن الصفحة‪.‬‬

translateY ‫تحريك أفقي‬
‫ أو الى األسفل‬،‫ الى األعلى كلما زادت القيمة‬،ً‫يمكن تحريك العنصر رأسيا‬
:‫ وسوف نبين ذلك بالكود! التالي‬،‫كلما قلت القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: translateY(-30px); }
#d2{ transform: translateY(1px); }
</style>
</head>
<body>
</body>
</html>
PAGE 726
‫الحظ أنه كلما زادت القيمة الموجودة في الدالة ‪ translateY‬تزحزح‬

‫العنصر الى األعلى‪ ،‬وكلما قلت تزحزح الى األسفل‪ ،‬والحظ أن الذي أخذ‬
‫قيمة سالبة خرج عن الصفحة‪ ،‬والحظ أيضاً أن العنصر يأخذ قيمته من‬
‫موضوعه‪ ،‬أي ال يأخذ القيمة مثل ‪ top‬و‪ bottom‬و‪ right‬و‪،left‬‬
‫ولكن يتحرك بشكل طبيعي سواء بـ ‪ translateX‬او ‪translateY‬‬
‫من موضعه‪.‬‬

translate ‫تحريك كلي‬
‫ في‬،‫ وأعلى وأسفل‬،ً‫ يميناً ويسارا‬،‫ أي‬،ً‫يمكن تحريك العنصر أفقياً ورأسيا‬
:‫ وسوف نبين ذلك بالكود! التالي‬،‫نفس الوقت‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: translate(150px, 150px); }
#d2{ transform: translate(70px, -50px); }
</style>
</head>
<body>
</body>
</html>
PAGE 728
‫الحظ أنه تم تغيير كلي ألماكن العناصر‪ ،‬والحظ أن الدالة ‪translate‬‬

‫تأخذ الـ ‪ x‬ثم الـ‪. y‬‬

‫مفهوم توزيعة التحول الكلي ‪matrix‬‬
‫بالدالة ‪ matrix‬يمكن عمل الـ ‪ ،skew‬وعمل الـ ‪ ،scale‬كما‬
‫يمكن عمل الـ ‪ ،translate‬بل وحتى الـ ‪ ،rotate‬أي أنك تستطيع‬
‫عمل تحويالت كاملة األركان بهذه الدالة المتميزة‪.‬‬
‫الدالة ‪ matrix‬تتطلب ‪ 6‬من القيم للعمل‪ ،‬وذلك بالترتيب التالي‪:‬‬

‫التمدد األفقي ‪scaleX‬‬ ‫•‬
‫االنحراف الرأسي ‪skewY‬‬ ‫•‬
‫االنحراف األفقي ‪skewX‬‬ ‫•‬
‫التمدد الرأسي ‪scaleY‬‬ ‫•‬
‫تزحزح أفقي ‪translateX‬‬ ‫•‬
‫• تزحزح رأسي ‪translateY‬‬
‫البد من فهم شيء هام جداً قبل البدء في ‪ ،matrix‬وهو مثالً عند‬
‫العمل بالدالة ‪ scale‬واعطاؤها القيم ‪ 1‬ثم ‪ 1‬لن يتغير العنصر‪ ،‬أو‬
‫مثالً عند العمل بالدالة ‪ translate‬واعطاؤها ‪ 0‬ثم ‪ 0‬لن يتغير‬
‫العنصر‪ ،‬وهكذا‪ ،‬وكذلك عند العمل بالدالة ‪ matrix‬مع احتياج عدم‬
‫التغيير في العنصر تأخذ القيم ‪ 1‬ثم ‪ 0‬ثم ‪ 0‬ثم ‪ 1‬ثم ‪ 0‬ثم ‪ ،0‬فيكون‬
‫الكود مثل التالي‪:‬‬
‫;)‪transform: matrix(1, 0, 0, 1, 0, 0‬‬
‫‪PAGE 730‬‬
‫رجاء انتبه! ثم انتبه! ثم انتبه! جيداً لما يلي‪:‬‬
‫• البد من حفظ الترتيب جيداً لما تأخذه الدالة ‪ matrix‬بشكل ممتاز‬
‫‪scaleX, skewY, skewX, scaleY, translateX, translateY‬‬
‫• الدالة ‪ matrix‬ال يكتب فيها مقاييس مثل ‪ px‬و‪ deg‬وغيرها‬
‫• مثالً عند ضبط الـ ‪ skew‬على ‪ ،10deg‬ونريد ما يعادلها في‬
‫الدالة ‪ ،matrix‬فإن القيمة ‪ 0.1758‬تقريباً مثلها‬
‫• يجب التركيز جيداً‪ ،‬ألنه سوف يتم عمل كل تحول بشكل منفصل‪ ،‬ثم يتم‬
‫استخدامهم جميعاً‬
‫• يجب التركيز جيداً‪ ،‬ألنه عند عمل أمثلة‪ ،‬سيتم العمل بـ ‪matrix‬‬
‫وما يقابلها بما تعلمناه من قبل حتى اآلن‬
‫• يجب مالحظة الفوارق التي يتم كتابتها في الكود إلظهار التأثيرات‪ ،‬مثل‬
‫عمل ‪ padding‬للوسم ‪ ،body‬أو تزويد الـ ‪margin‬‬
‫للعناصر‪ ،‬أو غير ذلك‬
‫• يجب مراعاة دراسة التحوالت السابقة جيداً للتعامل فيما يلي بسهولة‬

matrix ‫ بواسطة‬scaleX ‫عمل الـ‬
skewY‫ و‬scaleX ‫قبل البدء في هذا الموضوع يجب تعلم الـ‬
،ً‫ جيدا‬translateY‫ و‬translateX‫ و‬scaleY‫ و‬skewX‫و‬
."matrix ‫ويجب مراعاة ما في موضوع "مفهوم توزيعة التحول الكلي‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: matrix(1.7, 0, 0, 1, 0, 0); }
#d2{ transform: scaleX(1.7); }
</style>
</head>
<body>
<div id="d1">scaleX using matrix</div>
<div id="d2">normal scaleX</div>
</body>
</html>
PAGE 732
‫الحظ أن ما تم عملة باستخدام الدالة ‪ scaleX‬هو‪ ،‬هو ما تم عملة‬

‫بالدالة ‪.matrix‬‬

matrix ‫ بواسطة‬scaleY ‫عمل الـ‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: matrix(1, 0, 0, 2.5, 0, 0); }
#d2{ transform: scaleY(2.5); }
</style>
</head>
<body>
<div id="d1">scaleY using matrix</div>
<div id="d2">normal scaleY</div>
</body>
</html>
PAGE 734
‫الحظ أن ما تم عملة باستخدام الدالة ‪ scaleY‬هو‪ ،‬هو ما تم عملة‬


matrix ‫ بواسطة‬translateX ‫عمل الـ‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: matrix(1, 0, 0, 1, 50, 0); }
</style>
</head>
<body>
<div id="d1">translateX using matrix</div>
<div id="d2">normal translateX</div>
</body>
</html>
PAGE 736
‫الحظ أن ما تم عملة باستخدام الدالة ‪ translateX‬هو‪ ،‬هو ما تم‬

‫عملة بالدالة ‪ ،matrix‬مع العلم أن العنصر يتحرك من موضعه‬
‫األصلي‪.‬‬

matrix ‫ بواسطة‬translateY ‫عمل الـ‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: matrix(1, 0, 0, 1, 0, 50); }
</style>
</head>
<body>
<div id="d1">translateY using matrix</div>
<div id="d2">normal translateY</div>
</body>
</html>
PAGE 738
‫الحظ أن ما تم عملة باستخدام الدالة ‪ translateY‬هو‪ ،‬هو ما تم‬

‫عملة بالدالة ‪ ،matrix‬مع العلم أن العنصر يتحرك من موضعه‬
‫األصلي‪.‬‬

matrix ‫ بواسطة‬skewX ‫عمل الـ‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: matrix(1, 0, 0.7032, 1, 0, 0); }
#d2{ transform: skewX(40deg); }
</style>
</head>
<body>
<div id="d1">skewX using matrix</div>
<div id="d2">normal skewX</div>
</body>
</html>
PAGE 740
‫الحظ أن ما تم عملة باستخدام الدالة ‪ skewX‬هو‪ ،‬هو ما تم عملة‬


matrix ‫ بواسطة‬skewY ‫عمل الـ‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: matrix(1, 0.3516, 0, 1, 0, 0); }
#d2{ transform: skewY(20deg); }
</style>
</head>
<body>
<div id="d1">skewY using matrix</div>
<div id="d2">normal skewY</div>
</body>
</html>
PAGE 742
‫الحظ أن ما تم عملة باستخدام الدالة ‪ skewY‬هو‪ ،‬هو ما تم عملة‬


matrix ‫ بواسطة‬rotate ‫عمل الـ‬
:‫انتبه! وركز في المثال بالكود! التالي‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: matrix(1, 0.1758, 0, 1, 0, 0); }
</style>
</head>
<body>
<div id="d1">skewY 10deg</div>
</body>
</html>
PAGE 744
‫واآلن انتبه! مرة أخري‪ ،‬وركز في المثال بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫;‪background:lightblue; width:290px; height:70px‬‬
‫;‪margin:60px; font-size:20px; font-weight:bold‬‬
‫;‪border:3px solid navy‬‬
‫}‬
‫} ;)‪#d1{ transform: matrix(1, 0, -0.1758, 1, 0, 0‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div id="d1">skewX Minus 10deg</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫واآلن انتبه!‪ ،‬واستنبط من المثاليين السابقين أنه تم عمل نفس الزاوية‬

‫للـ ‪ skewX‬والـ ‪ ،skewY‬ولكن واحدة بالموجب وأخري بالسالب‪،‬‬
‫ومن هنا يمكن القول بأن القيمتين متعادلتين‪ ،‬وأنهم مكملتين لبعضهم‪،‬‬
‫وأنهم عكس بعض‪ ،‬فيعود الشكل كما كان‪ ،‬ولكن يصبح مستدير في ناحية‪،‬‬
‫ولو تم تبديل الموجب والسالب‪ ،‬سوف يستدير في الناحية األخرى‪.‬‬
:‫واآلن من التوضيحات السابقة يمكن التجربة بالمثال التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: matrix(1, 0.1758, -0.1758, 1, 0, 0); }
#d2{ transform: rotate(10deg); }
</style>
</head>
<body>
<div id="d1">rotate using matrix</div>
<div id="d2">normal rotate</div>
</body>
</html>
PAGE 746
:‫ويمكن أيضاً العمل باستدارة عكس االستدارة السابقة بالمثال التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{ transform: matrix(1, -0.1758, 0.1758, 1, 0, 0); }
#d2{ transform: rotate(-10deg); }
</style>
</head>
<body>
<div id="d1">rotate using matrix</div>
<div id="d2">normal rotate</div>
</body>
</html>

matrix ‫عمل جميع التحوالت بواسطة‬
،"matrix ‫ويجب مراعاة ما في موضوع "مفهوم توزيعة التحول الكلي‬
.matrix ‫وأيضاً ما تم شرحه من قبل في الـ‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{
transform: matrix(1.5, 0.9516, -0.3516, 1.2, 50, 70);
}
</style>
</head>
<body>
<div id="d1">All transform using matrix</div>
</body>
</html>
PAGE 748
‫الحظ أنه تم عمل ‪ scale‬و‪ skew‬و‪ rotate‬و‪ translate‬في‬

‫وقت واحد باستخدام الـ ‪.matrix‬‬

Many Transform ‫أكثر من تحول‬
‫ مع‬،transform ‫يمكن كتابة أكثر من دالة تحول في نفس الخاصية‬
:‫ وسنبين كما يلي‬،‫فاصلة بين كل تحول وآخر بمسافة‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
#d1{
transform: rotate(50deg) skew(30deg) translate(150px);
}
</style>
</head>
<body>
<div id="d1">Many transform</div>
</body>
</html>
PAGE 750
‫الحظ أنه تم عمل أكثر من تأثير تحول في نفس الوقت‪.‬‬

‫المنظور ‪ perspective‬واالستخدام الثالثي األبعاد ‪3D‬‬
‫خاصية المنظور ‪ ،perspective‬يتم ضبطها لحاوية بها بعض‬
‫العناصر‪ ،‬وعند ضبطها لعنصر معين تؤثر على العناصر بداخل هذا العنصر‪،‬‬
‫وتفعل لهم إمكانية العمل الثالثي األبعاد‪ ،‬ويمكن أن نتخيل فكرة المنظور عن‬
‫طريق الشكل التالي‪:‬‬
‫الحظ أن الشكل الثالثي األبعاد الموجود في الصورة يجعلك تتخيل ما هو‬

‫المنظور‪.‬‬
‫‪PAGE 752‬‬
‫رجاء انتبه! فإن البعد للمنظور يختلف أيضاً‪ ،‬ولو تم عرضه عليك لظننت‬
‫أنه ‪ ،zoom‬ولكنه ليس كذلك‪ ،‬ويمكن أن نعبر عنه كما يلي‪:‬‬
‫رؤية المنظور بمقدار صغير‬ ‫رؤية المنظور بمقدار كبير‬

‫(نراه من مسافة قريبه)‬ ‫(نراه من مسافة بعيده)‬
‫وعند ضبط خاصية المنظور على مقدار‪ ،‬وليكن مثالً ‪ ،400px‬فإن هذه‬
‫القيمة تعتبر هي المسافة بين الرؤية والشكل‪ ،‬كما يوضح الشكل التالي‪:‬‬
‫وكلما زاد مقدار المنظور‪ ،‬أصبح لديك تحكم أكثر في األبعاد‪ ،‬وفيما يلي‬
‫سوف نقوم بعمل شكل ثالثي األبعاد عن طريق ‪ rotateX‬و‪rotateY‬‬
‫ومعهم المنظور ‪ ،perspective‬فرجاء انتبه! لما يلي جيداً‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
#main1, #main2{
width:300px; height:200px; margin:10px;
}
#d1, #d2{
background:lightblue; border:1px solid #000;
font-size:30px; transform: rotateX(50deg);
}
#main1{ perspective:200px; }
</style>
</head>
<body>
<div id="main1"> Main 1

</div>

</div>
</body>
</html>
PAGE 754
‫الحظ أن الـ ‪ Div 1‬والـ ‪ Div 2‬أخذوا نفس التنسيق‪ ،‬ولكن كل‬
‫واحدة منهم في حاوية مختلفة‪ ،‬والحظ أن الحاوية ‪ Main 1‬تم ضبط‬
‫خاصية ‪ perspective‬لها على القيمة ‪ ،200px‬فأصبح البعد‬
‫لمنظورها بمقدار ‪ ،200px‬وألن عنصر الـ ‪ Div 1‬بداخلها أصبح‬
‫الـ ‪ rotateX‬له مختلف تماماً عن الـ ‪.Div 2‬‬

<!DOCTYPE html>
<html>
<head>
<style>
#main1, #main2{
}
#d1, #d2{
font-size:30px; transform: rotateY(35deg);
}
#main1{ perspective:200px; }
</style>
</head>
<body>

</div>

</div>
</body>
</html>
PAGE 756
‫وفي هذا المثال الحظ أن الـ ‪ Div 1‬والـ ‪ Div 2‬أيضاً أخذوا نفس‬
‫التنسيق‪ ،‬ولكن كل واحدة منهم في حاوية مختلفة‪ ،‬والحظ أن الحاوية‬
‫‪ Main 1‬تم ضبط خاصية ‪ perspective‬لها على القيمة‬
‫‪ ،200px‬فأصبح البعد لمنظورها بمقدار ‪ ،200px‬ولكن ألن عنصر‬
‫الـ ‪ Div 1‬بداخلها أصبح الـ ‪ rotateY‬له مختلف تماماً عن‬
‫العنصر الـ ‪.Div 2‬‬

perspective ‫عمل منظور بالدالة‬
:‫ كما يلي‬perspective ‫يمكن عمل المنظور باستخدام دالة‬
<!DOCTYPE html>
<html>
<head>
<style>
.main{
}
#d1{
font-size:30px;
transform: perspective(200px) rotateY(45deg);
}
</style>
</head>
<body>
<div class="main"> Main <div id="d1">Div 1</div> </div>
</body>
</html>
PAGE 758
‫تحول االستدارة باستخدام ‪rotateZ‬‬
‫سوف يتم عمل وسمين ‪ div‬في المثال التالي‪ ،‬ولكن ستتم االستدارة عن‬
‫طريق ‪ ،rotate‬وأخري عن طريق ‪ ،rotateZ‬وستري أنهم مثل‬
‫بعض‪ ،‬وسنجرب بالكود! التالي‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫;‪background:lightblue; width:120px; height:70px‬‬
‫;‪margin:70px; font-size:30px; font-weight:bold‬‬
‫}‬
‫} )‪#d1{ transform: rotate(30deg‬‬
‫} )‪#d2{ transform: rotateZ(30deg‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div id="d1">Div 1</div‬‬
‫>‪<div id="d2">Div 2</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

scaleZ ‫التمدد المجسم‬
‫ وستشعر أننا نقوم بعمل‬،‫ أي أماما وخلفي‬،‫هذا التمدد يكون تمدد بالمنظور‬
‫ سوف يتم عمل مثال به‬،‫ ولكنه تمدد مجسم للداخل والخارج‬،zoom
‫ وبداخل كل‬،‫ للعمل‬perspective ‫ يحتويان على منظور‬div ‫وسمين‬
،5 ‫ لها على‬scaleZ ‫ واحدة سيتم ضبط الـ‬،‫ أخري‬div ‫وسم منهم‬
‫ ولكن‬،‫ لتالحظ الفرق‬،10 ‫ لها على‬scaleZ ‫واألخرى سيتم ضبط الـ‬
‫ مثل‬،‫ ليظهر يحتاج الى عمل شيء يجسمه‬scaleZ ‫انتبه! فإن الـ‬
:‫ وسنجرب بالكود! التالي‬،rotateY ‫ أو‬rotateX
<!DOCTYPE html>
<html>
<head>
<style>
.main{
border:3px solid navy; perspective:200px;
}
#d1, #d2{
font-size:30px;
}
#d1{ transform: scaleZ(5) rotateX(10deg); }
#d2{ transform: scaleZ(10) rotateX(10deg); }
</style>
</head>
<body>
</body>
</html>
PAGE 760
‫الحظ أن الجزء األكبر هو الذي في األسفل‪ ،‬ولو تم عمله بدرجة بالسالب‬

‫سيكون العكس‪ ،‬ويصبح الجزء األكبر هو الذي باألعلى‪.‬‬

translateZ ‫تحريك مجسم‬
ً‫ ألنه يتحرك أيضا‬،ً‫ فعال‬zoom ‫ سوف تشعر بالـ‬،‫ومع التحريك المجسم‬
:‫ وسنجرب بالكود! التالي‬،‫بالداخل والخارج‬
<!DOCTYPE html>
<html>
<head>
<style>
.main{
border:3px solid navy; perspective:200px;
}
#d1, #d2{
font-size:30px;
}
#d1{ transform: translateZ(35px); }
#d2{ transform: translateZ(100px); }
</style>
</head>
<body>
</body>
</html>
PAGE 762
‫الحظ أنه كلما زادت قيمة ‪ translateZ‬كلما اقترب العنصر أكثر من‬
‫العين‪ ،‬وكلما قلت القيمة ابتعد العنصر عن العين‪.‬‬

Cube ‫تكوين شكل مكعب ثالثي األبعاد‬
‫بداية تكوين المكعب‬

،)‫ يساري‬،‫ يميني‬،‫ سفلي‬،‫ علوي‬،‫ خلفي‬،‫ مربعات (امامي‬6 ‫المكعب يحتوي على‬
،inline-block ‫ مع حجم ولون وشفافية وظهور‬،‫واآلن نريد عملهم‬
:‫ وسوف يتم عمل ذلك بالكود! التالي‬،‫وخط ومحاذاة‬
<!DOCTYPE html>
<html>
<head>
<style>
body{ background:radial-gradient(#ea7cea, #e8aee8) left/5px 5px; }
.cube div{
width:100px; height:100px; opacity:0.5; display:inline-block;
line-height:100px; font-size:20px; font-weight:bold;
text-align:center; color:#fff;
}
.cube .front{ background:red; }
.cube .back{ background:green; }
.cube .right{ background:blue; }
.cube .left{ background:navy; }
.cube .top{ background:gold; }
.cube .bottom{ background:gray; }
</style>
</head>
<body>
<div class="cube">
<div class="front">Front</div>
<div class="back">Back</div>
<div class="right">Right</div>
<div class="left">Left</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</body>
</html>
PAGE 764
‫الحظ أن شفافية العناصر‪ ،‬ولون خلفية الوسم ‪ body‬بشكل مزخرف‬

‫أشياء متعمدة‪ ،‬للظهور فيما بعد‪.‬‬

absolute ‫ضبط الوضع الحر‬
<!DOCTYPE html>
<html>
<head>
<style>
.cube div{
text-align:center; color:#fff; position:absolute;
}
.cube .front{ background:red; }
.cube .back{ background:green; }
.cube .right{ background:blue; }
.cube .left{ background:navy; }
.cube .top{ background:gold; }
.cube .bottom{ background:gray; }
</style>
</head>
<body>
<div class="cube">
</div>
</body>
</html>
PAGE 766
‫ضبط الزوايا المناسبة‬
<!DOCTYPE html>
<html>
<head>
<style>
.cube div{
}
.cube .front{ background:red; transform:rotateY(0deg); }
.cube .back{ background:green; transform:rotateY(180deg); }
.cube .right{ background:blue; transform:rotateY(90deg); }
.cube .left{ background:navy; transform:rotateY(-90deg); }
.cube .top{ background:gold; transform:rotateX(90deg); }
.cube .bottom{ background:gray; transform:rotateX(-90deg); }
</style>
</head>
<body>
<div class="cube">
</div>
</body>
</html>

3D ‫ على‬transform-style‫زيادة المشهد وضبط المنظور و‬
<!DOCTYPE html>
<html>
<head>
<style>
.view{ width:100px; height:100px; perspective:300px; }
.cube{ width:100px; height:100px; transform-style:preserve-3d; }
.cube div{
}
</style>
</head>
<body>
<div class="view">
<div class="cube">
</div>
</div>
</body>
</html>
PAGE 768
‫الحظ أنه في الكود السابق تم زيادة وسم ‪ div‬بكالس باسم ‪ view‬يحمل‬

‫المكعب ‪ cube‬بداخلة‪ ،‬وتم ضبط المنظور له‪ ،‬كما تم ضبط الخاصية‬
‫‪ transform-style‬على القيمة ‪ preserve-3d‬والحجم‬
‫للمكعب نفسه‪.‬‬

‫ضبط اإلطار لمكونات المكعب الداخلية‬
<!DOCTYPE html>
<html>
<head>
<style>
.view{ width:100px; height:100px; perspective:300px; }
.cube div{
}
</style>
</head>
<body>
<div class="view">
<div class="cube">
</div>
</div>
</body>
</html>
PAGE 770
‫الحظ أن اإلطار ظهر بشكل متداخل‪.‬‬

‫عمل تحريك مجسم للكل بنصف قيمة كل مربع‬
<!DOCTYPE html>
<html>
<head>
<style>
.view{ width:100px; height:100px; perspective:300px; padding:30px; }
.cube div{
}
.cube .front{background:red;transform:rotateY(0deg) translateZ(50px);}
.cube .back{background:green;transform:rotateY(180deg) translateZ(50px);}
.cube .right{background:blue;transform:rotateY(90deg) translateZ(50px);}
.cube .left{background:navy;transform:rotateY(-90deg) translateZ(50px);}
.cube .top{background:gold;transform:rotateX(90deg) translateZ(50px);}
.cube .bottom{background:gray;transform:rotateX(-90deg) translateZ(50px);}
</style>
</head>
<body>
<div class="view">
<div class="cube">
</div>
</div>
</body>
</html>
PAGE 772
‫الحظ أنه يظهر اآلن وكأنه مكعب شفاف‪.‬‬

rotate3d ‫عمل استدارة ثالثية األبعاد‬
<!DOCTYPE html>
<html>
<head>
<style>
.cube{
width:100px; height:100px; transform-style:preserve-3d;
transform: rotate3d(1, 1, 1, 45deg);
}
.cube div{
}
</style>
</head>
<body>
<div class="view">
<div class="cube">
</div>
</div>
</body>
</html>
PAGE 774
‫الحظ أنه تم عمل ‪ rotate‬للمكعب‪ ،‬أي أنها استدارة ثالثية األبعاد‬

‫باستخدام الدالة ‪ ،rotate3d‬والدالة ‪ rotate3d‬تأخذ ‪ 4‬قيم‪،‬‬
‫وهم الـ ‪ ،x‬والـ ‪ ،y‬والـ ‪ ،z‬والدرجة‪ ،‬فيتم عمل استدارة كاملة للمكعب‬
‫كشكل واحد ثالثي األبعاد كما هو واضح في الشكل السابق‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
.cube{
transform: rotate3d(2, 3, -1, -55deg);
}
.cube div{
}
</style>
</head>
<body>
<div class="view">
<div class="cube">
</div>
</div>
</body>
</html>
PAGE 776
‫الحظ أنه تمت الرؤية من اعلى‪.‬‬
‫انتبه! فكلما تم تغيير الـ ‪ ،x‬والـ ‪ ،y‬والـ ‪ ،z‬والدرجة‪ ،‬تمت االستدارة‬

‫بشكل مختلف‪ ،‬ورؤية مختلفة أيضاً‪.‬‬

translate3d ‫تحريك مجسم باستخدام‬
.ً‫ معا‬z‫ و‬y‫ و‬x ‫هذه الدالة تعتبر اختصار للحركات‬
<!DOCTYPE html>
<html>
<head>
<style>
.cube{
transform: rotate3d(2, 3, -1, -55deg) translate3d(10px,10px,-200px) ;
}
.cube div{
}
</style>
</head>
<body>
<div class="view">
<div class="cube">
</div>
</div>
</body>
</html>
PAGE 778
‫الخاصية ‪ translate3d‬تأخذ ‪ x‬ثم ‪ y‬ثم ‪ ،z‬والحظ أننا اآلن نري‬

‫المكعب من بعيد‪ ،‬ألن الـ ‪ z‬أخذت القيمة ‪ -200px‬كما هو موضح في‬
‫الكود السابق‪ ،‬وكلما زادت اقتربت‪ ،‬وكلما قلت ابتعدت‪.‬‬

scale3d ‫تمدد مجسم باستخدام‬
.ً‫ معا‬z‫ و‬y‫ و‬x ‫هذه الدالة تعتبر اختصار للمتمددات‬
<!DOCTYPE html>
<html>
<head>
<style>
.cube{
transform: rotate3d(2, 3, -1, -55deg) scale3d(1,1,2.5) ;
}
.cube div{
}
</style>
</head>
<body>
<div class="view">
<div class="cube">
</div>
</div>
</body>
</html>
PAGE 780
‫الحظ أن التمدد المجسم‪ ،‬مع زيادة من ناحية واحدة‪ ،‬جعله مستطيل ثالثي‬
‫األبعاد‪ ،‬بدالً من المربع‪ ،‬مع العلم أن كل ناحية ستختلف في جهة الزيادة‪.‬‬

‫تحوالت الـ ‪ 3D‬بواسطة ‪matrix3d‬‬
‫قبل البدء في هذا الموضوع يجب تتعلم أوالً كل ما تم شرحه في موضوع‬
‫الـ ‪ transform‬حتى اآلن‪.‬‬
‫انتبه! فإن الدالة ‪ matrix3d‬مجرد اختصار للدوال‬

‫‪rotate3d(), rotateX(), rotateY(), rotateZ(),‬‬
‫‪translate3d(),‬‬ ‫‪translateZ(),‬‬ ‫‪scale3d(),‬‬
‫)(‪ ،scaleZ(), perspective‬فهي تأخذ ‪ 16‬قيمة كما يلي‪:‬‬
‫‪4‬‬ ‫• أربع قيم للدالة ‪rotate3d‬‬
‫‪1‬‬ ‫• قيمة واحدة للدالة ‪rotateX‬‬
‫‪1‬‬ ‫• قيمة واحدة للدالة ‪rotateY‬‬
‫‪1‬‬ ‫قيمة واحدة للدالة ‪rotateZ‬‬ ‫•‬
‫‪3‬‬ ‫ثالث قيم للدالة ‪translate3d‬‬ ‫•‬
‫‪1‬‬ ‫قيمة واحدة للدالة ‪translateZ‬‬ ‫•‬
‫‪3‬‬ ‫ثالث قيم للدالة ‪scale3d‬‬ ‫•‬
‫‪1‬‬ ‫قيمة واحدة للدالة ‪scaleZ‬‬ ‫•‬
‫‪1‬‬ ‫• قيمة واحدة للدالة ‪perspective‬‬
‫إذاً تكون ‪16 =1+1+3+1+3+1+1+1+4‬‬
‫انتبه! فإن هذه الدالة طويلة جداً‪ ،‬وسوف تحتاجها إذا استخدمت الجميع‬
‫معاً‪ ،‬ولذلك فلن يتم عمل أمثلة بها في هذا الكتاب‪.‬‬
‫‪PAGE 782‬‬
‫االنتقال ‪Transition‬‬
‫المقصود باالنتقال هنا‪ ،‬هو انتقال العنصر من وضع الى وضع آخر‪ ،‬مثل‬
‫أن يتم تغيير العرض‪ ،‬أو أن يتم تغيير الطول‪ ،‬أو أن يتم تغيير لون الخلفية‪،‬‬
‫أو مثل أن يتم زيادة او نقصان الحشو ‪ ،padding‬الى آخر هذه األمور‬
‫التي تخص العنصر‪ ،‬ولكن انتبه! فإن هناك بعض الخصائص تستجيب الى‬
‫تأثيرات االنتقال أي أنها ‪ ،Animatable‬وأخري ال تستجيب‪ ،‬ولكن‬
‫انتبه! فإن الهدف من االنتقال ‪ transition‬هو التحكم أثناء االنتقال‪،‬‬
‫فتتم تأثيرات جميلة بهذا التحكم الرائع‪ ،‬ولنتعلم كيفية التحكم في االنتقال‬
‫يجب معرفة ما يلي جيداً‪:‬‬
‫‪ -1‬خاصية االنتقال ‪ ،transition-property‬وهي تأخذ قيمة‬
‫باسم الخاصية التي سوف يتم التحكم فيها مثل ‪ width‬او‬
‫‪ height‬او ‪.padding-right‬‬
‫‪ -2‬مدة االنتقال ‪ ،transition-duration‬وهي تأخذ قيمة‬
‫للتعبير عن الوقت المستغرق أثناء عملية االنتقال‪ ،‬وهذه القيمة رقم‬
‫ثم حرف ‪ s‬للثانية‪ ،‬مثل ‪ 3s‬أي ثالث ثواني‪ ،‬أو ‪ 0.5s‬أي نصف‬
‫ثانية‪ ،‬أو ‪ 500ms‬أي نصف ثانية أيضاً ألن ‪ ms‬للميللي ثانية‪.‬‬
‫‪ -3‬توظيف الوقت ‪ ،transition-timing-function‬وهي‬
‫تأخذ بعض القيم للتحكم في وقت االنتقال‪.‬‬
‫‪ -4‬تأخير االنتقال ‪ ،transition-delay‬وهي تأخذ قيمة‬
‫للتأخير‪ ،‬مثل ‪ 1s‬او ‪ ،3s‬لتتأخر قبل االنتقال‪.‬‬

transition ‫الخاصية والمدة والتأخير مع الـ‬
:‫ سنجرب ما يلي‬،transition ‫واآلن قبل تجربة أكواد الـ‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
width:150px; height:150px; background:gold;
border:6px ridge orange;
}
#d1:hover{
width:300px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
PAGE 784
:‫ سيكون مثل الشكل التالي‬div ‫واآلن عند لمس عنصر‬
.‫ وال يستغرق أي وقت‬،‫ يكون لحظي‬width ‫ولكن التغير في العرض‬

<!DOCTYPE html>
<html>
<head>
<style>
#d1{
border:6px ridge orange;
transition-property:width;
transition-duration:5s;
}
#d1:hover{
width:300px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>

:‫ والحظ األشكال التالية‬،‫ وانتظر‬،‫واآلن قم بلمس العنصر‬
،300px ‫ الى‬150px ‫تم التغير في خمس ثواني لزيادة العرض من‬

‫ وتم ضبط‬width ‫ بـ‬transition-property ‫ألنه تم ضبط‬
.‫ داخل تنسيق الوسم األصلي‬،5s ‫ بـ‬transition-duration
PAGE 786
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪#d1‬‬
‫;‪width:150px; height:150px; background:gold‬‬
‫;‪border:6px ridge orange‬‬
‫;‪transition-property:width‬‬
‫;‪transition-duration:5s‬‬
‫;‪transition-delay:2s‬‬
‫}‬
‫{‪#d1:hover‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div id="d1"></div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫واآلن قم بلمس العنصر ‪ ،div‬وستالحظ أنه سوف يتأخر ثانيتين قبل‬

‫التغير‪ ،‬ثم يتغير في خمس ثواني‪ ،‬واآلن انتبه! فعند االبتعاد عنه ستالحظ‬
‫أنه سوف يتأخر ثانيتين قبل التغير‪ ،‬ثم يتغير في خمس ثواني أيضاً‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
#d1{
border:6px ridge orange; font-size:30px;
transition-property:font-size , color;
}
#d1:hover{
font-size:60px;
color:red;
}
</style>
</head>
<body>
<div id="d1">Please touch me</div>
</body>
</html>
،‫واآلن الحظ أنه تم تأثير االنتقال على خاصيتين عن طريق فاصلة‬

‫ حيث‬،color ‫ ولون النص‬font-size ‫والخاصيتين هما حجم الخط‬
.‫ وتم تغيير اللون الى األحمر‬،60px ‫ الى‬30px ‫يتم تكبير الخط من‬
PAGE 788
‫واآلن قم بلمس العنصر ‪ div‬وانتظر والحظ األشكال التالية‪:‬‬

،‫ والجواب سهل بفضل اهلل‬،!‫ ماذا مع تغيرات في خصائص كثيرة؟‬،‫واآلن‬
‫ وتعني‬،transition-property ‫ للخاصية‬all ‫وهو تعيين القيمة‬
.transition ‫كل الخصائص التي تدعم الـ‬
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin-top:50px; }
#d1{
border:6px ridge orange; font-size:30px;
transition-property:all;
}
#d1:hover{
padding-right:150px; margin-left:150px;
font-size:60px; transform:rotate(5deg);
background-color:yellow; color:red;
}
</style>
</head>
<body>
<div id="d1">Please touch me</div>
</body>
</html>
PAGE 790
‫واآلن قم بلمس العنصر ‪ div‬وانتظر والحظ األشكال التالية‪:‬‬

‫توظيف الوقت ‪transition-timing-function‬‬
‫هذه الخاصية تستخدم لتوظيف الوقت‪ ،‬أي مثالً عند بداية التحرك يكون‬
‫سريع‪ ،‬ثم يكون بطيء‪ ،‬ثم عادي‪ ،‬أو مثل هذه األمور‪ ،‬والقيمة االفتراضية‬
‫لهذه الخاصية هي ‪ ease‬أي سهل أو عادي‪ ،‬وهو ما تم تجربته فيما‬
‫سبق‪ ،‬وتأخذ أيضاً عدة قيم أخري مثل ‪ ease-in‬و‪ease-out‬‬
‫و‪ ease-in-out‬و‪ linear‬وبعض القيم األخرى‪ ،‬ولو قمت بتجربة‬
‫كل قيمة لن تالحظ الفروق إال مع التركيز الشديد‪.‬‬
‫القيمة ‪ ease‬تجعل وقت الحركة ببداية بطيئة‪ ،‬ثم يسرع ثم ينتهي ببطيء‪.‬‬
‫القيمة ‪ ease-in‬تجعل وقت الحركة بطيء في البداية فقط‪.‬‬
‫القيمة ‪ ease-out‬تجعل وقت الحركة بطيء في النهاية فقط‪.‬‬
‫القيمة ‪ ease-in-out‬تجعل وقت الحركة بطيء في البداية والنهاية‪.‬‬
‫القيمة ‪ linear‬تجعل وقت الحركة بنفس السرعة من البداية إلى النهاية‪.‬‬
‫واآلن لمالحظة الفروق بين كل قيمة وأخري‪ ،‬يجب الجمع بينهم والتأثير‬
‫عليهم معاً في نفس الوقت‪ ،‬سوف يتم عمل مثال يجمع القيم ‪ease‬‬
‫و‪ ease-in‬و‪ ease-out‬و‪ ease-in-out‬و‪ linear‬لتالحظ‬
‫الفرق بين كل قيمة وأخري عند التأثير مرة واحدة‪ ،‬والمثال إن شاء اهلل‬
‫سيكون كما يلي‪.‬‬
‫‪PAGE 792‬‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:650px; height:240px; background:lightblue;
border:3px solid navy; font-size:30px;
}
div p{
width:150px; margin:10px; background:navy; color:#fff;
}
#p1{ transition-timing-function:ease; }
#p2{ transition-timing-function:ease-in; }
#p3{ transition-timing-function:ease-out; }
#p4{ transition-timing-function:ease-in-out; }
#p5{ transition-timing-function:linear; }
div:hover p{ width:300px; }
</style>
</head>
<body>
<div>
<p id="p1">Ease</p>
<p id="p2">Ease-In</p>
<p id="p3">Ease-Out</p>
<p id="p4">Ease-In-Out</p>
<p id="p5">Linear</p>
</div>
</body>
</html>

‫واآلن للتجربة فقط قم بلمس الـ ‪ div‬والحظ كما يلي‪:‬‬
‫انتبه! والحظ اختالف معدالت الوقت‪ ،‬مع ثبات قيمة الخاصية‪ ،‬وثبات‬
‫المدة‪ ،‬لهم جميعاً‪ ،‬ولذلك في النهاية سيكون مثل الشكل التالي‪:‬‬
‫وكذلك األمر عند ترك لمس الـ ‪.div‬‬
‫‪PAGE 794‬‬
:‫ لتقسيم االنتقال الى خطوات كما يلي‬steps ‫يمكن استخدام القيمة‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
div p{
transition-duration:2500ms;
transition-timing-function:steps(3, end);
}
</style>
</head>
<body>
<div>
<p id="p1">Paragraph 1</p>
</div>
</body>
</html>

‫وعند لمس الوسم ‪ div‬ستالحظ ثالث مراحل كما يلي‪:‬‬
‫وهنا تم تقسيم وقت االنتقال على ثالث مراحل‪ ،‬كما هو موضح باألشكال‬
‫السابقة‪ ،‬والكلمة ‪ end‬التي تم وضعها بعد ‪ 3‬معناها أنك بعد اللمس ال‬
‫يتحرك سريعاً بشكل مباشر‪ ،‬يمكن عدم وضعها وستكون افتراضية‪ ،‬ولو تم‬
‫استخدام ‪ start‬بدالً منها سيتم التحرك في بداية اللمس سريعاً‪.‬‬
‫‪PAGE 796‬‬
‫كما ان الخاصية ‪ transition-timing-function‬تأخذ‬
‫أيضاً القيمة ‪ step-start‬وهي تعادل )‪،steps(1,start‬‬
‫وتأخذ أيضاً القيمة ‪ step-end‬وهي تعادل )‪.steps(1,end‬‬

‫استخدام ‪cubic-bezier‬‬
‫اعلم ان الخاصية ‪ transition-timing-function‬تأخذ‬
‫قيمة تجعلك تقوم بتأليف توظيف الوقت بنفسك‪ ،‬وهذه القيمة هي الدالة‬
‫‪ cubic-bezier‬وهي تأخذ منك أربع ارقام لتقوم بتعيين نقطتين‪،‬‬
‫ثم على أساسهم يتم رسم ‪ curve‬لتتم عليه السرعات‪ ،‬ولكن انتبه!‬
‫جيداً‪ ،‬فالبد من التركيز بشكل دقيق لفهم هذه العملية‪ ،‬ألنه في هذا‬
‫الموضوع نحتاج أربع نقاط وهم ‪ p0,p1,p2,p3‬وفي اللغة ‪css‬‬
‫تم تثبيت النقطة ‪ p0‬على القيمتين )‪ (0,0‬لتعبر عن البداية‪ ،‬وتم تثبيت‬
‫النقطة ‪ p3‬على القيمتين )‪ (1,1‬لتعبر عن النهاية‪ ،‬ثم تم ترك النقطتين‬
‫‪ p1‬و‪ p2‬لك لتتالعب كما تحب مع السرعات‪ ،‬والشكل التالي يوضح‬
‫األربع نقاط والتعامل معهم لرسم المنحني‪:‬‬
‫والدالة ‪ cubic-bezier‬تأخذ القيم كـ (‪،)x1, y1, x2, y2‬‬

‫وعني ذلك أنها تأخذ النقطة ‪ p1‬ثم النقطة ‪ p2‬لترسم منحني السرعة‪.‬‬
‫‪PAGE 798‬‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
div p{
}
#p1{
transition-timing-function:linear;
}
#p2{
transition-timing-function:cubic-bezier(0,0,1,1);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

:‫ وأخري أخذت الكود التالي‬linear ‫وهنا تم عمل فقرة على القيمة‬

transition-timing-function:cubic-bezier(0,0,1,1);
‫ سوف تالحظ‬div ‫ وإذا تم لمس العنصر‬،linear ‫وهو يعادل أيضاً الـ‬
:‫أنهم يمشون مع بعضهم البعض بنفس معدالت السرعة والحظ ما يلي‬
.ً‫ ستالحظ أنهم مثل بعضهم أيضا‬،‫بل وحتى في الرجوع‬
PAGE 800
‫ولتفاصيل أكثر الشكل التالي يعبر عن األنواع المختلفة‪:‬‬
‫انتبه! فإذا تم الزيادة عن ‪ 1‬أو تم التقليل عن الـ ‪ 0‬فسوف تخرج من‬

‫اإلطار الموضح بالصور وستنحرف السرعة‪ ،‬وسنوضح ذلك بالمثال التالي‪:‬‬

<!DOCTYPE html>
<html>
<head>
<style>
div{
}
div p{
}
#p1{
transition-timing-function:linear;
}
#p2{
transition-timing-function:cubic-bezier(0.2,-0.9,0.6,2.9);
}
</style>
</head>
<body>
<div>
<p id="p1">Paragraph_1</p>
</div>
</body>
</html>
PAGE 802
‫واآلن قم بلمس الوسم ‪ div‬وراقب الوسم الفقرة ‪ p2‬والحظ األشكال‬
‫التالية والتي تدل على انحراف معدالت السرعة‪:‬‬
‫ومن هنا يتبين لنا أن موضوع الـ ‪ cubic-bezier‬يجعلك تتحكم في‬

‫معدالت السرعة كما تريد‪.‬‬

transition ‫الخاصية‬
،transition ‫كل ما تم شرحه يمكن وضعة كاختصار داخل الخاصية‬
:‫وسوف نجرب بفضل اهلل في المثال التالي‬
<!DOCTYPE html>
<html>
<head>
<style>
div{
}
div p{
transition:all 5s linear 0.5s;
}
div:hover p{
width:400px; margin-left:200px;
background:blue; color:yellow;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
PAGE 804
‫وعند لمس الوسم ‪ div‬الحظ االختالفات كما باألشكال التالية‪:‬‬
‫وهنا نالحظ عمل اختصار ‪ shorthand‬قوي لعملية الـ‬

‫‪ transition‬وكتابة الكل أمام خاصية ‪.transition‬‬

‫الحركة ‪Animation‬‬
‫الحركة في صفحة الويب تعد من األمور الجميلة الشيقة‪ ،‬والتي تعطي مظهر‬
‫جمالي لجزء من صفحة الويب أو لصفحة الويب بشكل عام‪ ،‬والحركة هي‬
‫تغير العنصر من وضع لوضع آخر‪ ،‬مثل أن ينتقل العنصر من مكان إلى‬
‫مكان آخر‪ ،‬أو مثل أن يتغير لون العنصر من لون إلى لون آخر‪ ،‬أو مثل‬
‫أن يتم تحوله‪ ،‬إلى آخر هذه األمور‪ ،‬مثالً انظر الى الشكل التالي‪:‬‬
‫ثم سوف يتحرك العنصر كما بالشكل التالي‪:‬‬
‫وهنا الحظ حركة العنصر من اليسار الى اليمين‪.‬‬
‫‪PAGE 806‬‬
‫صناعة مؤثر الحركة بالمحدد ‪@keyframes‬‬
‫عند االحتياج لعمل حركة ‪ ،animation‬البد أوالً من صنع تلك‬
‫الحركة‪ ،‬وإعطاؤها اسم كما تريد‪ ،‬ثم النداء فيما بعد على تلك الحركة‬
‫التي صنعتها ورتبتها بنفسك‪ ،‬وعند عمل هذه الحركة يتم استخدام المحدد‬
‫‪ @keyframes‬وسنوضحها بالكود التالي‪:‬‬
‫{‪@keyframes movetoright‬‬
‫} ;‪from{ left:0‬‬
‫} ;‪to { left:300px‬‬
‫}‬
‫وكما نالحظ أوالً نكتب المحدد ‪ ،@keyframes‬ثم مسافة‪ ،‬ثم اسم‬
‫الـ ‪ ،animation‬ثم أقواس المجموعة }{‪ ،‬وبداخل تلك األقواس‬
‫تم عمل ‪ from‬بأقواسها مع تنسيقات ‪ ،css‬وتم عمل ‪ to‬بأقواسها‬
‫مع تنسيقات ‪ ،css‬ومعني ‪ from‬أي أن ما بداخلها هو بداية الحركة‪،‬‬
‫ومعني ‪ to‬أي أن ما بداخلها نهاية الحركة‪ ،‬ثم بعد تنفيذ تلك الحركة‬
‫تعود مرة ثانية إلى البداية‪ ،‬وهنا يتضح لنا أن الحركة مقسمة إلى قسمين‬
‫وهما ‪ from‬و‪ ،to‬والحظ أنه تم تسميه الـ ‪ animation‬باالسم‬
‫‪ ،movetoright‬وهو اسم اختياري حسب رغبتك أنت‪ ،‬وتبتكره كما‬
‫تريد‪ ،‬كما أننا ننصح أن تكون التسمية متوافقة مع ما يقوم الـ‬
‫‪ animation‬بعمله‪ ،‬وهنا تم تسميته بهذا االسم‪ ،‬ألنه يبدأ الـ ‪left‬‬
‫بصفر‪ ،‬ثم ينتهي الـ ‪ left‬بـ ‪ ،300px‬أي يتحرك إلى اليمين‪ ،‬وأيضاً‬
‫انتبه! فأنت تستطيع كتابة أكواد ‪ css‬كثيرة في الـ ‪ from‬والـ ‪.to‬‬

‫ الى أكثر من قسمين عن طريق‬animation ‫وأيضاً يمكن تقسيم الـ‬
‫ وهكذا بالترتيب على‬،%70‫ و‬%50‫ و‬%10 ‫ مثل‬،‫النسب المئوية‬
:‫ فمثالً سنقسمها الى أربعة بالكود التالي‬،‫األقسام التي تريدها‬
@keyframes movetoright{
0%{ left:0; }
25%{ left:99px; }
75%{ left:199px; }
100%{ left:300px; }
}
‫ وهنا‬،‫ إلى أربعة أقسام‬animation ‫وكما نالحظ تم تقسيم الـ‬
‫ ثم هناك تغيرات عند‬،25% ‫ ثم هناك تغيرات عند‬،0% ‫البداية هي‬
‫ ويمكن‬،100% ‫ ثم هناك تغيرات عند مرحلة االكتمال وهي‬،75%
:‫ الى ستة أجزاء بالكود التالي‬animation ‫أيضاً تقسم الـ‬
0%{ left:0; }
20%{ left:60px; }
40%{ left:120px; }
60%{ left:180px; }
80%{ left:240px; }
100%{ left:300px; }
}
.‫ الى أي نسب نريدها‬animation ‫وكما نالحظ أنه يمكن تقسيم الـ‬
PAGE 808
‫تشغيل الحركة‬
‫ وتطبيقه‬،‫ يمكن اآلن تشغيله‬،animation ‫بعد ان تعلمنا صناعة الـ‬
،animation ‫ ولكن البد من ضبط خاصية اسم الـ‬،‫على أحد العناصر‬
‫ ليتم ضبطها على المؤثر الذي‬animation-name ‫وهي الخاصية‬
‫ ويجب ضبط المدة الخاصة‬،movetoright ‫تم عمله من قبل وهو‬
‫ على‬animation-duration ‫ بالخاصية‬animation ‫بالـ‬
:‫ وسنجرب بالمثال التالي‬،‫ أو غير ذلك‬5s ‫ أو‬3s ‫مدة مثل‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
border:6px ridge orange; outline:3px groove yellow;
position:absolute; left:0;
animation-name:movetoright;
animation-duration:3s;
}
from{ left:0; }
to{ left:300px; }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>

:‫وبعد تشغيل الصفحة تظهر وتتحرك وتعود كما باألشكال التالية‬
PAGE 810
animation-timing-function ‫توظيف وقت الحركة‬
‫ والقيمة االفتراضية‬،animation ‫هذه الخاصية لتوظيف وقت الـ‬
‫ وتأخذ أيضاً عدة قيم‬،‫ أي سهل أو عادي‬ease ‫لهذه الخاصية هي‬
‫ ولكن انتبه! فإن هذا الموضوع تم شرحه بالتفصيل في موضوع‬،‫أخري‬
.transition ‫االنتقال‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
animation-timing-function:linear;
}
from{ left:0; }
to{ left:300px; }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
.linear ‫وبعد تشغيل الصفحة ستالحظ أن الحركة تختلف وتكون‬

animation-delay ‫تأخير الحركة‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
animation-iteration-count:3;
animation-delay:2s;
}
from{ left:0; }
to{ left:300px; }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
.‫وبعد تشغيل الصفحة ستالحظ أن الحركة لن تتنفذ إال بعد ثانيتين‬
PAGE 812
animation-iteration-count ‫عدد التكرارات‬
‫ عن طريق الخاصية‬animation ‫يمكن التحكم في عدد مرات تكرار الـ‬
‫ والتي تأخذ رقم ليتم التكرار‬animation-iteration-count
‫ وهكذا‬،‫ للتكرار خمس مرات‬5 ‫ أو‬،‫ للتكرار ثالث مرات‬3 ً‫ فمثال‬،‫على أساسه‬
:‫ وسنجرب بالكود! التالي‬،‫حسب الرغبة‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
}
from{ left:0; }
to{ left:300px; }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
.‫ ستالحظ أن الحركة تكررت ثالث مرات‬،‫وبعد تشغيل الصفحة‬

animation-direction ‫توجيه الحركة‬
‫ يتم التحكم في‬،animation-direction ‫وعن طريق الخاصية‬
‫ ثم تنتهي من حيث‬،‫ ثم تتم الحركة‬،‫ فمن الطبيعي أن تبدأ‬،‫آليه الحركة‬
‫ تأخذ القيمة‬animation-direction ‫ وهنا الخاصية‬،‫بدأت‬
‫ تجعلها تعكس‬reverse ‫ أما القيمة‬،normal ‫االفتراضية لها وهي‬
:‫ وسنجرب بالكود! التالي‬،ً‫الحركة تماما‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
animation-delay:0.2s;
animation-direction:reverse;
}
from{ left:0; }
to{ left:300px; }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
PAGE 814
‫وبعد تشغيل الصفحة تنعكس الحركة كما باألشكال التالية‪:‬‬
‫وهنا تم عكس الحركة تماماً‪ ،‬فبدالً من أن يسير العنصر من اليسار الى‬

‫اليمين‪ ،‬أصبح يبدأ من اليمين‪ ،‬ثم يذهب الى اليسار‪ ،‬وهنا الحظ التوفير‬
‫في الوقت‪ ،‬بحيث لو تم احتياج عمل حركتين عكسيتين لن تبذل الوقت‬
‫لتخطيطيهما‪ ،‬بل إن القيمة ‪ reverse‬تسهل عليك األمر‪.‬‬

،‫ ثم تعود بشكل عكسي‬،‫ويمكن توجيه الحركة بحيث تتم كما تم تخطيطها‬
‫ الذي تم‬animation-iteration-count ‫وهكذا حسب الـ‬
:‫ وسنجرب بالكود! التالي‬،‫ضبطه لها‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
animation-direction:alternate;
}
from{ left:0; }
to{ left:300px; }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
‫ ثم‬،3‫ ثم تذهب‬،2‫ ثم تعود‬،1‫وبعد تشغيل الصفحة ستالحظ أنها تذهب‬
‫ والعودة‬،6 ‫ ولماذا!؟ ألن التكرار بـ‬،6‫ ثم تعود‬،5‫ ثم تذهب‬،4‫تعود‬
.‫محسوبة من عدد التكرار‬
PAGE 816
‫ لتجمع بين الـ‬،alternate-reverse ‫ويمكن استخدام القيمة‬
‫ ثم تستكمل‬،‫ حيث تبدأ من العكس‬،alternate ‫ والـ‬reverse
:‫ وسنجرب بالكود! التالي‬،alternate ‫بطريقة الـ‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
animation-direction:alternate-reverse;
}
from{ left:0; }
to{ left:300px; }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
‫ ثم‬،3‫ ثم تعود‬،2‫ ثم تذهب‬،1‫وبعد تشغيل الصفحة ستالحظ أنها تعود‬
‫ ألن التكرار‬،‫ ثم تظهر فجأة بشكل عادي‬،6‫ ثم تذهب‬،5‫ ثم تعود‬،4‫تذهب‬
.‫ فقط‬6 ‫بـ‬
animation-fill-mode ‫نمط تتبع الحركة‬
‫ يمكن التحكم في‬animation-fill-mode ‫عن طريق الخاصية‬
:‫ فمثالً تابع الكود! التالي‬،animation ‫نمط تتبع الـ‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
animation-direction:normal;
animation-fill-mode:forwards;
}
from{ left:0; }
to{ left:300px; }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
PAGE 818
‫وبعد تشغيل الصفحة تظهر كما باألشكال التالية‪:‬‬
‫وهنا الحظ جيداً أن العنصر المتحرك ثبت على آخر وضع انتهي علية‬
‫الـ ‪ ،animation‬وهذا ما فهلته القيمة ‪ forwards‬به‪ ،‬كما‬
‫يوجد قيمة أخري وهي ‪ ،backwards‬وهي تجعل العنصر على التنسيق‬
‫األول ‪ from‬أو مثالً ‪ 0%‬مع االعتماد على اتجاه الحركة‪ ،‬حتى ولو‬
‫تم عمل تأخير ‪ delay‬للـ ‪ ،animation‬ويوجد أيضاً القيمة‬
‫‪ both‬وهي تجمع بين القيمتين ‪ forwards‬و‪backwards‬‬
‫معاً في نفس الوقت‪.‬‬

animation-play-state ‫تشغيل وإيقاف الحركة‬
‫ تأخذ قيمة افتراضية بـ‬animation-play-state ‫الخاصية‬
‫ وهناك‬،‫ في وضع التشغيل‬animation ‫ أي أن الـ‬running
،animation ‫ أي إيقاف مؤقت للـ‬paused ‫قيمة أخري وهي‬
animation ‫وكما نري هي خاصية بسيطة وتجعلك تتحكم في الـ‬
.‫سواء تريد منه أن يعمل أو تريد إيقافه‬
PAGE 820
animation ‫خاصية التحريك‬
‫ ان الخاصية األم الرئيسية تجمع بين‬css ‫كما تعودنا من اللغة الرائعة‬
‫ يمكن‬animation ‫ وهنا الخاصية األساسية‬،‫الخصائص الفرعية لها‬
timing-‫ و‬duration‫ و‬name ‫أن تأخذ قيم الخصائص‬
direction‫ و‬iteration-count‫ و‬delay‫ و‬function
.animation ‫ للـ‬play-state‫ و‬fill-mode‫و‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
animation: movetoright 3s linear 3 0.5s alternate forwards running;
}
from{ left:0; }
to{ left:300px; }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
‫وبعد تشغيل الصفحة ستالحظ أنها تعمل باالسم والمدة والتوظيف والتكرار‬
‫والتأخير والتوجيه والتتبع والحالة في نفس الوقت بخاصية واحدة وهي‬
.animation ‫الخاصية‬

Infinite animation ‫الحركة الالنهائية‬
‫ يمكن أن‬،‫ بشكل جيد وتدربنا عليه‬animation ‫وبعد أن تعرفنا الـ‬
‫نقوم بعمل مثال بسيط لجعل الحركة ال نهائية باستخدام القيمة‬
.iteration-count ‫ للعملية التكرارية‬infinite
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
border:1.5px ridge #000;
}
#d2{
width:200px; height:47px; background:#00f;
position:absolute; left:21px; top:13px;
animation: mymove 3s linear infinite alternate;
}
@keyframes mymove{
from{ left:21; }
to{ left:417px; }
}
</style>
</head>
<body>
<div id="d1"> <div id="d2"></div> </div>
</body>
</html>
PAGE 822
‫وهكذا ومثل األشكال السابقة وبدون توقف يذهب يميناً ويساراً وكأن هناك‬
‫شيء سوف ننتظره‪.‬‬

Animation ‫أمثلة على الـ‬
‫ وتدربنا كثيراً على موضوعات‬،‫ وفهمنا‬،‫ بعد أن تعرفنا‬،‫وبفضل اهلل وحده‬
.‫ سوف نقوم بعمل بعض األمثلة إن شاء اهلل‬،animation ‫الـ‬

<!DOCTYPE html>
<html>
<head>
<style>
#d1{
width:600px; height:50px; margin:10px; border:1.5px ridge #000;
}
#d2{
width:100px; height:46px; margin:2px; background:#3a3;
animation: myaction 5s linear infinite alternate;
}
@keyframes myaction{
0%{ margin-left:0; }
10%{ margin-left:50px; }
}
</style>
</head>
<body>
</body>
</html>
PAGE 824
‫وهكذا‪ ،‬ولكن انتبه!‪ ،‬فإن هذا المثال ليس مثل الذي تم تطبيقه في موضوع‬
‫الحركة الالنهائية‪ ،‬ألنه يعتمد ويتالعب على الهامش اليساري‪ ،‬أما اآلخر‬
‫فكان يتالعب مع الموضع ‪ ،left‬وهنا أفضل من حيث الترابط‪ ،‬حيث لو‬
‫قمت بوضعه في أي يمكان في الصفحة سوف يتجاوب معك‪ ،‬وال يكون مرتبط‬
‫بموضع وضبط كثير‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
input[type=submit]{
background:darkgreen; color:lightgreen; margin:10px;
border:1px solid lightgreen; border-radius:5px;
padding:10px; width:600px; font-size:30px; cursor:pointer;
}
input[type=submit]:hover{ background:#181; }
#d1{
border:1.5px ridge #000;
}
#d2{
width:0; height:46px; margin:2px; background:#3a3;
animation: mymove 5s linear forwards;
}
@keyframes mymove{
0%{ width:0; }
10%{ width:60px; }
20%{ width:120px; }
30%{ width:180px; }
40%{ width:240px; }
50%{ width:300px; }
60%{ width:360px; }
70%{ width:420px; }
80%{ width:480px; }
90%{ width:540px; }
100%{ width:596px; }
}
</style>
</head>
<body>
<form> <input type="submit"> </form>
</body>
</html>
PAGE 826
‫وبعد تشغيل الصفحة في البداية تظهر كما بالشكل التالي‪:‬‬
‫ثم تسير كما باألشكال التالية‪:‬‬
‫والزر ‪ submit‬الموجود على الصفحة‪ ،‬هو داخل الوسم ‪ ،form‬بحيث‬

‫لو تم الضغط عليه يعيد تحميل الصفحة‪ ،‬فتعمل من البداية مرة أخري‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:30px; }
#d1 , #d2{
border:1.5px ridge #000; display:inline-block;
background:linear-gradient(orange,gold,orange);
}
#d1{ animation: mymove 5s linear infinite; }

#d2{ animation: mymove 5s linear infinite reverse; }
@keyframes mymove{
0%{ transform:rotate(0deg); }
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
PAGE 828

‫رجاء انتبه! فهنا سوف نقف وقفة مع المثال السابق‪ ،‬ونفكر في فضل اهلل‬
‫األحد الصمد الذي لم يلد ولم يولد ولم يكن له كفؤاً احد‪ ،‬فاهلل من علينا‬
‫ان‪ ،‬وهنا سنركز‬
‫اها ُسلَ ْي َم َ‬
‫أن خلقنا وفهمنا‪ ،‬فقال اهلل في القرآن فَفَهَّ ْمنَ َ‬
‫على فهم آلية الحركة‪ ،‬فهنا أردنا أن نجعل العنصر يستدير عن طريق الـ‬
‫‪ ،rotate‬والـ ‪ rotate‬يستدير عن طريق الدرجة‪ ،‬والدرجة تتراوح‬
‫من صفر الى ‪ ،360‬وفي الـ ‪ animation‬قمنا بعمل خمس مراحل‬
‫بعد الصفر وهم ‪ 20%‬و‪ 40%‬و‪ 60%‬و‪ 80%‬و‪ ،100%‬ولو‬
‫تم قسمة الـ ‪ 360‬درجة عليهم سيكون ‪ ،72=5÷360‬إذاً ليتم‬
‫عمل توازن مع الـ ‪ linear‬نزيد في كل مرحلة ‪ 72‬درجة عن سابقتها‪،‬‬
‫فكانت ‪ ،0‬ثم زادت فأصبحت ‪ ،72‬ثم ‪ ،144‬ثم ‪ ،216‬ثم ‪ ،288‬ثم‬
‫أغلقت بـ ‪ ،360‬مع العلم أنه لو كان هناك ‪ 10‬مراحل في الـ‬
‫‪ animation‬لتمت القسمة على ‪ ،10‬لتكون الحركة متجانسة‪ ،‬وبنفس‬
‫األسلوب تستطيع عمل أمور كثيرة‪ ،‬سواء كنت تتعامل مع العرض أو‬
‫الطول‪ ،‬أو أي خاصية تدعم الـ ‪.animation‬‬
‫‪PAGE 830‬‬
<!DOCTYPE html>
<html>
<head>
<style>
.circle{
width:20px; height:20px; margin:0.5px;
border-radius:15px;
border:0.5px solid navy; display:inline-block;
background:linear-gradient(navy,lightblue,navy);
animation: mymove 5s cubic-bezier(0,.98,.98,.02) infinite;
}
@keyframes mymove{
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

:‫وبعد تشغيل الصفحة تظهر كما باألشكال التالية‬
.‫وهكذا فتظل تستدير الى ما ال نهاية‬
PAGE 832
<!DOCTYPE html>
<html>
<head>
<style>
.circle{
border-radius:15px; position:relative;
border:0.5px solid navy; display:inline-block;
background:linear-gradient(navy,lightblue,navy);
}
@keyframes mymove{
0%{ transform:rotate(0deg); left:0%; }
}
</style>
</head>
<body>
</body>
</html>

.‫وهكذا بفضل اهلل تستدير وتسير الى ما ال نهاية‬
PAGE 834
<!DOCTYPE html>
<html>
<head>
<style>
.circle{
background:navy; display:inline-block;
}
@keyframes mymove{
0%{ left:0%; }
25%{ left:23%; }
50%{ left:46%; }
75%{ left:69%; }
100%{ left:92%; }
}
</style>
</head>
<body>
</body>
</html>

PAGE 836
<!DOCTYPE html>
<html>
<head>
<style>
.circle{
}
#c1{ animation: mymove 2.10s linear infinite alternate; }

#c2{ animation: mymove 2.15s linear infinite alternate-reverse; }
@keyframes mymove{
0%{ left:0%; }
25%{ left:20%; }
50%{ left:40%; }
75%{ left:60%; }
100%{ left:80%; }
}
</style>
</head>
<body>
<div class="circle" id="c1"></div>
</body>
</html>

.‫وهكذا يسيرون في شكل متناثر الى ما ال نهاية‬
PAGE 838
<!DOCTYPE html>
<html>
<head>
<style>
#main{
background:navy; display:inline-block; border-radius:55px;
}
.child{ background:navy; width:200px; height:35px; border-radius:10px; }

#d1{ transform:rotate(90deg); margin-top:30px; margin-left:-50px; }
#d2{ transform:rotate(180deg); margin-top:-30px; margin-left:-50px; }
#d3{ transform:rotate(135deg); margin-top:-40px; margin-left:-50px; }
#d4{ transform:rotate(-135deg); margin-top:-35px; margin-left:-50px; }
#main{ animation: mymove 3s linear infinite; }
@keyframes mymove{
}
</style>
</head>
<body>
<div id="main">
<div id="d1" class="child"></div>
</div>
</body>
</html>

:‫وبعد تشغيل الصفحة ستالحظ أن الشكل يستدير وانظر الشكل التالي‬
PAGE 840
<!DOCTYPE html>
<html>
<head>
<style>
#main{
width:100px; height:100px; border-radius:55px;
color:red; font-size:15px; font-weight:bold;
animation: mymove 3s linear infinite;
}
@keyframes mymove{
}
</style>
</head>
<body>
<div id="main">
֎
</div>
</body>
</html>

.‫ ولكن يهيئ لك وكأن النص هو الذي يستدير حولها‬،‫وهكذا وهي تستدير‬
PAGE 842
<!DOCTYPE html>
<html>
<head>
<style>
#main{
color:navy; font-size:150px; font-weight:bold;
display:inline-block;
}
@keyframes mymove{
}
</style>
</head>
<body>
<div id="main">
֎
</div>
</body>
</html>

:‫وبعد تشغيل الصفحة ستالحظ دورانها وانظر الى الشكل التالي‬
PAGE 844
<!DOCTYPE html>
<html>
<head>
<style>
#main{
color:navy; font-size:150px; font-weight:bold;
animation: mymove 2s linear infinite alternate-reverse;
}
@keyframes mymove{
}
</style>
</head>
<body>
<div id="main">
✸
</div>
</body>
</html>

:‫وبعد تشغيل الصفحة ستالحظ دورانها وانظر الى الشكل التالي‬
PAGE 846
<!DOCTYPE html>
<html>
<head>
<style>
#main{
font-size:150px; font-weight:bold;
animation: mymove 50ms linear infinite alternate;
}
@keyframes mymove{
from{ padding-left:0; }
to{ padding-left:10px; }
}
</style>
</head>
<body>
<div id="main">
⏰
</div>
</body>
</html>
:‫وبعد تشغيل الصفحة ستالحظ أنها تهتز مثل المنبه وانظر الشكل التالي‬

<!DOCTYPE html>
<html>
<head>
<style>
.cube{
transform: rotate3d(1, 1, 1, 0deg);
}
.cube div{
}
@keyframes mymove{
0%{ transform: rotate3d(1, 1, 1, 0deg); }
}
</style>
</head>
<body>
<div class="view">
<div class="cube">
</div>
</div>
</body>
</html>
PAGE 848
‫وبعد تشغيل الصفحة يستدير شكل ‪ 3d‬كما باألشكال التالية‪:‬‬

<!DOCTYPE html>
<html>
<head>
<style>
.cube{
transform: rotate3d(1, 1, 1, 0deg); position:absolute;
}
.cube div{
text-align:center; color:#fff; position:absolute; left:10px;
}
@keyframes mymove{
0%{ transform: rotate3d(1, 1, 1, 0deg); left:10px; }
}
</style>
</head>
<body>
<div class="view">
<div class="cube">
</div>
</div>
</body>
</html>
PAGE 850
‫وبعد تشغيل الصفحة يستدير ويتحرك شكل ‪ 3d‬كما باألشكال التالية‪:‬‬

‫ على برنامج‬Digital ‫ فسوف نصنع صور ألرقام‬،!‫واآلن انتبه‬
،‫ ولو أردت تعلمه ابحث في يوتيوب بـ فوتوشوب حسونة أكاديمي‬،‫الفوتوشوب‬
:‫أو أدخل على قائمة التشغيل من الرابط التالي‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfntLWyOJQKyfR5RcuXdzfnU

<!DOCTYPE html>
<html>
<head>
<style>
#main{
box-shadow:2px 2px 60px yellow;
background-image:url('base.jpg');
animation: mymove 20s infinite alternate;
}
@keyframes mymove{
0%{ box-shadow:2px 2px 60px yellow; background-image:url('base.jpg'); }
10%{ box-shadow:2px 2px 60px aqua; background-image:url('0.jpg'); }
20%{ box-shadow:2px 2px 60px green; background-image:url('1.jpg'); }
30%{ box-shadow:2px 2px 60px red; background-image:url('2.jpg'); }
40%{ box-shadow:2px 2px 60px blue; background-image:url('3.jpg'); }
50%{ box-shadow:2px 2px 60px navy; background-image:url('4.jpg'); }
60%{ box-shadow:2px 2px 60px gold; background-image:url('5.jpg'); }
70%{ box-shadow:2px 2px 60px brown; background-image:url('6.jpg'); }
80%{ box-shadow:2px 2px 60px darkred; background-image:url('7.jpg'); }
90%{ box-shadow:2px 2px 60px darkgreen; background-image:url('8.jpg'); }
100%{ box-shadow:2px 2px 60px gray; background-image:url('9.jpg'); }
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
PAGE 852
‫وهكذا يتم العد من ‪ 0‬الى ‪ 9‬ثم يرجع من ‪ 9‬الى ‪ 0‬الى ما ال نهاية‪.‬‬

،‫واآلن سوف نستخدم نفس آلية المثال السابق لصنع مثال آخر به خانتين‬
.‫ ثم يبدأ من جديد وهكذا‬99 ‫ الى‬1 ‫فيتم العد من‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1 , #d2{
box-shadow:2px 2px 60px yellow; display:inline-block;
}
#d1{ animation: mymove 100s infinite; }

@keyframes mymove{
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
PAGE 854
‫وهكذا حتى يصل الى ‪ 99‬ثم يبدأ من جديد‪.‬‬

‫ ثم يبدأ من‬999 ‫ الى‬1 ‫واآلن سوف نصنع خانات يتم العد فيها من‬
.‫ وذلك كما يلي إن شاء اهلل‬،‫ وهكذا‬،‫جديد‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1 , #d2 , #d3{

box-shadow:2px 2px 60px yellow; display:inline-block;
}

@keyframes mymove{
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
PAGE 856
‫وهكذا حتى يصل الى ‪ 999‬ثم يبدأ من جديد‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
#myname:before{
content:""; animation:myset 3s linear infinite;
}
@keyframes myset{
0%{ content:""; color:#f00; }
7%{ content:"A"; color:#000; }
14%{ content:"Ah"; color:#f00; }
21%{ content:"Ahm"; color:#000; }
28%{ content:"Ahme"; color:#f00; }
35%{ content:"Ahmed"; color:#000; }
42%{ content:"Ahmed_"; color:#f00; }
49%{ content:"Ahmed_H"; color:#000; }
56%{ content:"Ahmed_Ha"; color:#f00; }
63%{ content:"Ahmed_Has"; color:#000; }
70%{ content:"Ahmed_Hass"; color:#f00; }
77%{ content:"Ahmed_Hasso"; color:#000; }
84%{ content:"Ahmed_Hassou"; color:#f00; }
91%{ content:"Ahmed_Hassoun"; color:#000; }
100%{ content:"Ahmed_Hassouna"; color:#f00; }
}
</style>
</head>
<body>
<h1 id="myname"><h1>
</body>
</html>
PAGE 858
‫وهكذا يكتب االسم بالتسلسل حتى يتم كتابته ثم يعيد من جديد‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
#mynum:before{
content:"0";
animation:myset 100s cubic-bezier(0,1.42,.83,.78) infinite;
}
#mynum:after{
content:"0";
animation:myset 10s infinite;
}
@keyframes myset{
10%{ color:#000; content:"0"; }
20%{ color:#f00; content:"1"; }
30%{ color:#000; content:"2"; }
50%{ color:#000; content:"4"; }
70%{ color:#000; content:"6"; }
90%{ color:#000; content:"8"; }
100%{color:#f00; content:"9"; }
}
</style>
</head>
<body>
<h1 id="mynum"><h1>
</body>
</html>
PAGE 860
‫وهكذا يظل يعد من ‪ 1‬وحتى ينتهي الى ‪ 99‬ثم يبدأ العد من البداية‪.‬‬

‫األدوات ‪Tools‬‬
‫عند العمل نحتاج كثيراً الى أدوات يتم وضعها على الشاشة‪ ،‬وفي هذا‬
‫الموضوع سوف نقوم بعمل بعض األدوات البسيطة‪.‬‬
‫واآلن سوف نقوم بعمل ملف ‪ css‬باسم ‪ styles.css‬ثم يتم اإلضافة‬

‫فيه وتعديله واستخدامه‪ ،‬ورجاء انتبه!‪ ،‬فعندما يتم اخبارك بأن تضع أي‬
‫كود داخل ملف ‪ styles.css‬ينبغي أن ال تنسي ألننا سوف نستخدم كل‬
‫ما فيه ان شاء اهلل‪ ،‬وأيضاً انتبه!‪ ،‬فلن يتم الشرح كثيراً في هذا‬
‫الموضوع‪ ،‬فاالعتماد على ما سبق من شرح‪.‬‬
‫ورجاء انتبه! ثم انتبه! ثم انتبه!‪ ،‬فإن هذا الموضوع الغرض منه التدريب‪،‬‬
‫والتعامل مع التجارب‪ ،‬وجعل الطالب أكثر جرئه مع الكود‪.‬‬
‫‪PAGE 862‬‬
Text Box ‫مربع النص‬
:‫ ثم احفظه‬styles.css ‫ضع الكود! التالي في ملف‬
.text-box-small ,
.text-box-middle ,
.text-box-large{
display:inline-block; border-radius:5px;
padding-left:5px; padding-right:5px;
border:0.5px solid lightgray;
transition:all 0.5s; outline:none;
}
.text-box-small:focus ,
.text-box-middle:focus ,
.text-box-large:focus{
box-shadow:0.5px 0.5px 2px #7ed4db,
-0.5px -0.5px 2px #7ed4db;
}
.text-box-small{
font-size:10px;
}
.text-box-middle{
font-size:16px;
}
.text-box-large{
font-size:32px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input class="text-box-large" value="Large">
<input class="text-box-middle" value="Middle">
<input class="text-box-small" value="Small">
</body>
</html>
PAGE 864
Label ‫عنوان الشاشة‬
.label-small ,
.label-middle ,
.label-large{
}
.label-small{
font-size:10px;
}
.label-middle{
font-size:16px;
}
.label-large{
font-size:32px;
}

<!DOCTYPE html>
<html>
<head>
<style>
.cust{
font-size:20px;
}
</style>
</head>
<body>
<div class="label-large">Large:</div>
<input class="text-box-large" value="Large">
<br><br>
<div class="label-middle">Middle:</div>
<input class="text-box-middle" value="Middle">
<br><br>
<div class="label-small">Small:</div>
<input class="text-box-small" value="Small">
<br><br>
<div class="label-small cust">Custom:</div>
<input class="text-box-small cust" value="Custom">
</body>
</html>
PAGE 866
Buttons ‫األزرار‬
.button-small ,
.button-middle ,
.button-large{
padding:5px 20px; cursor:pointer;
border:0.5px solid lightgray; outline:none;
background-color:#efefef;
transition:all 0.5s;
}
.button-small:hover ,
.button-middle:hover ,
.button-large:hover{
-0.5px -0.5px 2px #7ed4db;
}
.button-small{
font-size:10px;
}
.button-middle{
font-size:16px;
}
.button-large{
font-size:32px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<div class="label-large">Username:</div>
</td>
<td>
<input class="text-box-large">
</td>
</tr>
<tr>
<td>
<div class="label-large">Password:</div>
</td>
<td>
<input type="password" class="text-box-large">
</td>
</tr>
<tr>
<td>
<input type="submit" class="button-large">
</td>
</tr>
</table>
</body>
</html>
PAGE 868

Panel ‫اللوحة‬
.panel{
display:block; border-radius:5px;
margin-top:7px; margin-bottom:7px;
padding:20px; outline:none;
background-color:#fbfbfb;
overflow:auto;
-0.5px -0.5px 2px #7ed4db;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="panel">
<div class="label-large">Username:</div>
<input class="text-box-large">
</div>
</body>
</html>
PAGE 870
Check Box ‫صندوق االختيار‬
input[type=checkbox].checkbox + label{
display:block;
margin:0.3em;
}
input[type=checkbox].checkbox{
display:none;
}
input[type=checkbox].checkbox + label:before{
content:"\2714";
border:0.1em solid black;
border-radius:0.2em;
width:1em; height:1em;
padding-left:0.2em;
padding-bottom:0.4em;
margin-right:0.2em;
color:transparent;
}
input[type=checkbox].checkbox:checked + label:before{
background-color:#aaa;
color:#fff;
-0.5px -0.5px 2px #7ed4db;
}
input[type=checkbox].checkbox:not(:checked):hover + label:before{
-0.5px -0.5px 2px #7ed4db;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="panel">
<input class="checkbox" type="checkbox" id="java">
<label for="java">JAVA</label>
<input class="checkbox" type="checkbox" id="csharp">

<label for="csharp">C Sharp</label>
<input class="checkbox" type="checkbox" id="ring">

<label for="ring">Ring</label>
</div>
<div class="panel" style="font-size:32px;">

<input class="checkbox" type="checkbox" id="cpp">
<label for="cpp">C++</label>
<input class="checkbox" type="checkbox" id="php">

<label for="php">PHP</label>
<input class="checkbox" type="checkbox" id="python">

<label for="python">Python</label>
</div>
</body>
</html>
PAGE 872

Radio ‫صندوق الراديو‬
input[type=radio].radio + label{
display:block;
margin:0.3em;
}
input[type=radio].radio{
display:none;
}
input[type=radio].radio + label:before{
content:"\2b24";
padding-left:0.3em;
padding-right:0.1em;
margin-right:0.3em;
color:transparent;
}
input[type=radio].radio:checked + label:before{
color:#fff;
-0.9px -0.9px 5px #7ed4db;
}
input[type=radio].radio:not(:checked):hover + label:before{
-0.9px -0.9px 5px #7ed4db;
}
PAGE 874
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="panel">
<input class="radio" type="radio" id="java" name="lang1">
<input class="radio" type="radio" id="csharp" name="lang1">

<input class="radio" type="radio" id="ring" name="lang1">

</div>

<input class="radio" type="radio" id="cpp" name="lang2">
<input class="radio" type="radio" id="php" name="lang2">

<input class="radio" type="radio" id="python" name="lang2">

</div>
</body>
</html>

PAGE 876
Slider ‫شريط االختيار‬
.slider{
background: #eee;
-webkit-appearance: none;
height: 30px;
border:0.1px solid gray;
outline: none;
}
.slider:hover{
-0.5px -0.5px 2px #7ed4db;
}
.slider::-webkit-slider-thumb{
appearance:none;
background:#aaa;
cursor:pointer;
}
.slider::-moz-range-thumb {
background:#aaa;
cursor:pointer;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="panel">
<input class="slider" type="range"><br>
<input class="slider" type="range" style="width:50%"><br>
<input class="slider" type="range" style="width:99%"><br>
</div>
</body>
</html>
PAGE 878
Combo Box ‫صندوق االختيار‬
select.combobox{
padding:0.2em;
}
select.combobox > option{

background:#efefef;
}
select.combobox:focus{
-0.5px -0.5px 2px #7ed4db;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="panel" >
<select class="combobox" style="font-size:32px;">
<option>Ring</option>
<option>Kotlin</option>
<option>Python</option>
</select>
</div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="panel" >
</select>

<option>JAVA</option>
<option>C#</option>
<option>C++</option>
</select>
</div>
</body>
</html>
PAGE 880

Toggle ‫صندوق المفتاح‬
input[type=checkbox].toggle + label{
display:block;
margin:0.3em;
}
input[type=checkbox].toggle{
display:none;
}
input[type=checkbox].toggle + label:before{
text-align:left;
content:"\2b24";
border-radius:1em;
padding-left:0.2em;
margin-right:0.2em;
color:#bbb;
}
input[type=checkbox].toggle:checked + label:before{
text-align:right;
color:#fff;
-0.5px -0.5px 2px #7ed4db;
}
input[type=checkbox].toggle:not(:checked):hover + label:before{
-0.5px -0.5px 2px #7ed4db;
}
PAGE 882
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="panel">
<input class="toggle" type="checkbox" id="java">
<input class="toggle" type="checkbox" id="csharp">

<input class="toggle" type="checkbox" id="ring">

</div>

<input class="toggle" type="checkbox" id="cpp">
<input class="toggle" type="checkbox" id="php">

<input class="toggle" type="checkbox" id="python">

</div>
</body>
</html>

PAGE 884
‫أداة العداد المخصص ‪Custom Counter‬‬
‫ضع الكود! التالي في ملف ‪ styles.css‬ثم احفظه‪:‬‬
‫{ ‪.counter-reset‬‬
‫;‪counter-reset:mycounter‬‬
‫}‬
‫{‪.counter .counter-item::before‬‬
‫;‪counter-increment:mycounter‬‬
‫‪content:counter(mycounter) "\2236\1405‬‬ ‫;"‬
‫}‬
‫ومن الكود السابق نالحظ أنه تم عمل عداد ‪ counter‬في الـ ‪css‬‬
‫باسم ‪ ،mycounter‬وتم عمل كالس ‪ counter-reset‬والذي‬
‫يقوم بجعله يبدأ العد من البداية الستخدامه عند الحاجة لذلك لبداية ترقيم‬
‫جديد‪ ،‬وتم استخدام ‪ counter-increment‬ليزيد مع كل عنصر‪،‬‬
‫وتم استخدام ‪ counter‬وبداخل اقواسها العداد ‪mycounter‬‬
‫ليتم طباعته بالرقم الذي وصل اليه‪ ،‬ثم تم استخدام رموز مخصصة‬
‫أمامه‪ ،‬لتكون فاصل بين الرقم وبين محتوي العنصر نفسه‪ ،‬وسوف نجرب‬
‫في المثال التالي إن شاء اهلل‪.‬‬

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="counter-reset counter">
<div class="counter-item">HTML</div>
<div class="counter-item">CSS</div>
<div class="counter-item">JavaScript</div>
<div class="counter-item">J-Query</div>
<div class="counter-item">Bootstrap</div>
</div>
<hr>
<div class="counter-reset counter">
<div class="counter-item">C</div>
<div class="counter-item">C++</div>
<div class="counter-item">Java</div>
<div class="counter-item">C#</div>
<div class="counter-item">VB</div>
<div class="counter-item">PHP</div>
</div>
</body>
</html>
PAGE 886

styles.css ‫أكواد الملف‬
/* Start Text Box */
.text-box-small ,
.text-box-middle ,
.text-box-large{
}
.text-box-small:focus ,
.text-box-middle:focus ,
.text-box-large:focus{
-0.5px -0.5px 2px #7ed4db;
}
.text-box-small{
font-size:10px;
}
.text-box-middle{
font-size:16px;
}
.text-box-large{
font-size:32px;
}
/* End Text Box */
/* Start Label */
.label-small ,
.label-middle ,
.label-large{
}
.label-small{
font-size:10px;
}
PAGE 888
.label-middle{
font-size:16px;
}
.label-large{
font-size:32px;
}
/* End Label */
/* Start Button */
.button-small ,
.button-middle ,
.button-large{
padding:5px 20px; cursor:pointer;
border:0.5px solid lightgray; outline:none;
}
.button-small:hover ,
.button-middle:hover ,
.button-large:hover{
-0.5px -0.5px 2px #7ed4db;
}
.button-small{
font-size:10px;
}
.button-middle{
font-size:16px;
}
.button-large{
font-size:32px;
}
/* End Button */

/* Start Panel */
.panel{
display:block; border-radius:5px;
margin-top:7px; margin-bottom:7px;
padding:20px; outline:none;
background-color:#fbfbfb;
overflow:auto;
-0.5px -0.5px 2px #7ed4db;
}
/* End Panel */
/* Start Check Box */

input[type=checkbox].checkbox + label{
display:block;
margin:0.3em;
}
input[type=checkbox].checkbox{
display:none;
}
input[type=checkbox].checkbox + label:before{
content:"\2714";
padding-left:0.2em;
margin-right:0.2em;
color:transparent;
}
input[type=checkbox].checkbox:checked + label:before{
color:#fff;
-0.5px -0.5px 2px #7ed4db;
}
PAGE 890
input[type=checkbox].checkbox:not(:checked):hover + label:before{
-0.5px -0.5px 2px #7ed4db;
}
/* End Check Box */
/* Start Radio */
input[type=radio].radio + label{
display:block;
margin:0.3em;
}
input[type=radio].radio{
display:none;
}
input[type=radio].radio + label:before{
content:"\2b24";
padding-left:0.3em;
margin-right:0.3em;
color:transparent;
}
input[type=radio].radio:checked + label:before{
color:#fff;
-0.9px -0.9px 5px #7ed4db;
}
input[type=radio].radio:not(:checked):hover + label:before{
-0.9px -0.9px 5px #7ed4db;
}
/* End Radio */

/* Start Slider */
.slider{
background: #eee;
height: 30px;
border:0.1px solid gray;
outline: none;
}
.slider:hover{
-0.5px -0.5px 2px #7ed4db;
}
.slider::-webkit-slider-thumb{
appearance:none;
background:#aaa;
cursor:pointer;
}
.slider::-moz-range-thumb {
background:#aaa;
cursor:pointer;
}
/* End Slider */
/* Start Combo Box */

select.combobox{
padding:0.2em;
}
select.combobox > option{

background:#efefef;
}
PAGE 892
select.combobox:focus{
-0.5px -0.5px 2px #7ed4db;
}
/* End Combo Box */
/* Start Toggle */
input[type=checkbox].toggle + label{
display:block;
margin:0.3em;
}
input[type=checkbox].toggle{
display:none;
}
input[type=checkbox].toggle + label:before{
text-align:left;
content:"\2b24";
border-radius:1em;
padding-left:0.2em;
margin-right:0.2em;
color:#bbb;
}
input[type=checkbox].toggle:checked + label:before{
text-align:right;
color:#fff;
-0.5px -0.5px 2px #7ed4db;
}
input[type=checkbox].toggle:not(:checked):hover + label:before{
-0.5px -0.5px 2px #7ed4db;

}
/* End Toggle */
/* Start Counter */
.counter-reset {
counter-reset:mycounter;
}
.counter .counter-item::before{
counter-increment:mycounter;
content:counter(mycounter) "\2236\1405 ";
}
/* End Counter */
.‫ بالكامل حتى اآلن‬styles.css ‫وفيما سبق هي أكواد الملف‬
PAGE 894
‫شاشة األدوات‬
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="label-large">Full Name:</div>
<input class="text-box-large"> <br>
<input class="radio" type="radio" id="male" name="gender">

<label style="display:inline-block" for="male">Male</label>
<input class="radio" type="radio" id="female" name="gender">
<label style="display:inline-block" for="female">Female</label> <br>
<input class="toggle" type="checkbox" id="dev">

<label style="display:inline-block" for="dev">Developer</label>
<input class="toggle" type="checkbox" id="des">
<label style="display:inline-block" for="des">Designer</label> <br>

</select>
<label>Level<label> <input type="range" class="slider"> <br>
<input class="checkbox" type="checkbox" id="php">

<label style="display:inline-block" for="php">PHP</label>
<input class="checkbox" type="checkbox" id="python">
<label style="display:inline-block" for="python">Python</label>
<input class="checkbox" type="checkbox" id="java">
<label style="display:inline-block" for="java">Java</label> <br>

</div>
</body>
</html>

PAGE 896
Scroll Bar ‫شريط تمرير الصفحة‬

customscroll.css ‫ باالسم‬css ‫واآلن سوف نقوم بعمل ملف‬
:‫ثم تكتب به الكود! التالي ونحفظه‬
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
background-color:#8880e3;
}
::-webkit-scrollbar-button {
background: #444;
}
::-webkit-scrollbar-track-piece{
background-color: #c5c2eb;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="customscroll.css">
<style>
h1{ width:200%; }
</style>
</head>
<body>
<h1>Welcome to Hassouna Academy</h1>
</body>
</html>
.‫ في الصفحة‬Scroll ‫ومن الشكل السابق نالحظ تغير الـ‬

PAGE 898
customscroll.css ‫ باالسم‬css ‫واآلن سوف نقوم بعمل ملف‬
:‫ثم تكتب به الكود! التالي ونحفظه‬
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
}
::-webkit-scrollbar-thumb {
background:linear-gradient(orange,red,orange);
border-radius:10px;
}
::-webkit-scrollbar-button {
background:linear-gradient(gold,yellow,gold);
height:20px;
}
::-webkit-scrollbar-track-piece{
background-color: lightyellow;
border:0.5px solid yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="customscroll2.css">
<style>
h1{ width:200%; }
</style>
</head>
<body>
</body>
</html>
PAGE 900
،‫ويمكن إخفاء شريط التمرير للصفحة مع االحتفاظ بالتنقل بشكل طبيعي‬
‫ أو عن طريق‬،mouse wheel ‫سواء عن طريق دائرة الماوس‬
:‫ وسنجرب بالمثال التالي‬،‫أسهم الكيبورد‬
<!DOCTYPE html>
<html>
<head>
<style>
body::-webkit-scrollbar {
display:none;
}
h1{ width:200%; }
</style>
</head>
<body>
</body>
</html>

‫ سوق تتجاوب‬،‫ولكن إذا قمت بالتحريك بزر عجلة الماوس أو اسهم الكيبورد‬
.‫معك بشكل طبيعي‬
PAGE 902
‫استعالمات الميديا ‪Media Query‬‬

‫هذا الموضوع يعد من أهم موضوعات اللغة ‪ ،css‬ألنه يضبط تنسيقات‬
‫صفحة الويب من جميع الجهات‪ ،‬فيتم ضبطها أثناء العرض العادي‪ ،‬مثل‬
‫أن نفتح صفحة الويب بشكل طبيعي‪ ،‬ويتم ضبطها من ناحية العرض أثناء‬
‫الطباعة‪ ،‬مثل أن نقوم بعمل طباعة من المتصفح او نضغط ‪،Ctrl+P‬‬
‫ويتم ضبطها من ناحية العرض على الـ ‪ ،TV‬ويتم ضبطها عند العمل‬
‫على أي حجم‪ ،‬ويتم ضبطها بطرق كثيرة‪ ،‬ثم بعد فهم تلك األمور يكون‬
‫موقعك ‪ Responsive‬وهذه هي كلمة السر في موضوع استعالمات‬
‫الـ ‪ ،Media Query‬والـ ‪ Responsive‬أي هو قابل للعرض‬
‫على جميع األحوال‪ ،‬سواء شاشات‪ ،‬أو البتوب‪ ،‬أو ‪ ،TV‬أو ‪،Mobile‬‬
‫ليكون موقعك بمثابة عرض جمالي على كل الشاشات مع اختالف أحجامها‪.‬‬

Media Query ‫البداية مع الـ‬
.‫ به تنسيقات محددة‬css ‫يمكن ضبط الميديا من خالل النداء على ملف‬
‫ ليتم فيه وضع تنسيقات‬myprint.css ‫واآلن سوف نصنع ملف باسم‬
.‫معينة تظهر فقط أثناء الطباعة‬
:‫ ثم احفظه‬myprint.css ‫ضع الكود! التالي في ملف‬
div{
font-size:30px;
color:blue;
}
‫ ليتم فيه وضع‬myscreen.css ‫واآلن سوف نصنع ملف باسم‬
.‫تنسيقات معينة تظهر فقط أثناء الطباعة‬
:‫ ثم احفظه‬myscreen.css ‫ضع الكود! التالي في ملف‬
div{
font-size:50px;
background-color:darkred;
color:pink;
border:3px dashed red;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="myscreen.css" media="screen">
<link rel="stylesheet" href="myprint.css" media="print">
</head>
<body>
<p>Welcome to Media Query</p>
</body>
</html>
PAGE 904
‫واآلن قم بالضغط على ‪ Ctrl+P‬لتظهر لك شاشة الطباعة مختلفة‬

‫تماماً عن الشاشة العادية كما بالشكل التالي‪:‬‬
‫ويتبين لنا من المثال السابق ما يلي‪:‬‬

‫• عند ضبط الخاصية ‪ media‬على القيمة ‪ screen‬للوسم ‪link‬‬
‫تم اعتماد التنسيق الى شاشة العرض فقط‬
‫• عند ضبط الخاصية ‪ media‬على القيمة ‪ print‬للوسم ‪ link‬تم‬
‫اعتماد التنسيق الى وضع الطباعة فقط‬

.‫ بطريقة أخري كما يلي‬media ‫انتبه! فإنه يمكن كتابة الـ‬
<!DOCTYPE html>
<html>
<head>
<style>
@media screen{
p{
font-size:50px;
background-color:darkred;
color:pink;
}
}
@media print{
p{
font-size:30px;
color:blue;
}
}
</style>
</head>
<body>
</body>
</html>
PAGE 906
‫واآلن قم بالضغط على ‪ Ctrl+P‬لتظهر لك شاشة الطباعة مختلفة‬

‫تماماً عن الشاشة العادية كما بالشكل التالي‪:‬‬
‫واآلن الحظ أنه تم كتابة الـ ‪ media‬بطريقة مختلفة‪ ،‬عن طريق كتابة‬
‫المحدد ‪ @media‬ثم مسافة ثم الكلمة ‪ screen‬للشاشة‪ ،‬أو الكلمة‬
‫‪ print‬للطباعة‪ ،‬ثم بين األقواس }{ تكتب ما تريد من تنسيقات ‪.css‬‬

Media Query ‫تنوع االستخدامات مع الـ‬
‫ مثالً أن يتم عرضة على‬،‫يمكن أن تشرط على تنسيقك بأكثر من شرط‬
.‫ كما يلي‬،‫ بيكسل‬500 ‫ وال ينفذ لعرض أكبر من‬،‫الشاشة فقط‬
<!DOCTYPE html>
<html>
<head>
<style>
@media only screen and (max-width:500px){

p{
font-size:50px;
background-color:gold;
color:#fff;
}
}
</style>
</head>
<body>
</body>
</html>
PAGE 908
‫وبعد تشغيل الصفحة على عرض كبير تظهر كما بالشكل التالي‪:‬‬
‫الحظ أن العرض السابق أقل من الـ ‪ ،500px‬ولذلك فلم يتم عليه‬

‫التنسيق‪ ،‬وبعد تقليل العرض يطبق التنسيق‪ ،‬والحظ كما بالشكل التالي‪:‬‬
‫ولو تم عمل طباعة لن يظهر أي تنسيق في الطباعة‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
#myimage{ display:none; }
p{ color:red; font-size:20px; }
@media only screen and (min-width:600px){

p{
font-size:50px;
background-color:gold;
color:#fff;
}
#myimage{
display:block;
}
}
</style>
</head>
<body>
<img id="myimage" src="egypt.jpg">
</body>
</html>
PAGE 910
‫وبعد تشغيل الصفحة على عرض صغير تظهر كما بالشكل التالي‪:‬‬
‫الحظ أن العرض السابق أقل من الـ ‪ ،600px‬ولذلك فلم يتم عليه‬

‫التنسيق اال التنسيق األصلي له‪ ،‬وبعد زيادة العرض يطبق التنسيق‪ ،‬والحظ‬
‫ولو تم عمل طباعة لن يظهر أي تنسيق في الطباعة‪.‬‬

‫استخدام مع طبيعة الصفحة‬
‫ وإما‬،landscape ‫ إما أن تكون‬،orientation ‫طبيعة الصفحة‬
.‫ وفيما يلي مثال يوضح ذلك‬،portrait ‫أن تكون‬
<!DOCTYPE html>
<html>
<head>
<style>
p{
display:none; font-size:30px;
}
@media only screen and (orientation:landscape){

#p1{
display:block;
}
}
@media only screen and (orientation:portrait){

#p2{
display:block;
}
}
</style>
</head>
<body>
<p id="p1">Landscape</p>
<p id="p2">Portrait</p>
</body>
</html>
PAGE 912
‫وبعد تشغيل الصفحة على عرض وطول يتناسب مع الـ ‪ portrait‬تظهر‬
‫وجعل الصفحة على عرض وطول يتناسب مع الـ ‪ landscape‬تظهر‬


Min and Max ‫تنسيق بين أقصي وأقل للعرض‬
<!DOCTYPE html>
<html>
<head>
<style>
#p1{ font-size:30px; }
@media (max-width:200px){
#p1{ color:#aaa; }
}
@media (min-width:200px) and (max-width:400px){

#p1{ color:#f00; }
}

#p1{ color:#0f0; }
}

#p1{ color:#00f; }
}
@media (min-width:801px){
#p1{ color:#0ae; }
}
</style>
</head>
<body>
<p id="p1"><b>Bold Paragraph</b></p>
</body>
</html>
PAGE 914
‫وبعد تشغيل الصفحة بعرض ألقل من ‪ 200px‬تظهر كما بالشكل التالي‪:‬‬
‫واآلن سوف نجعل العرض ما بين ‪ 200‬و‪ 400‬بيكسل ليكون كما يلي‪:‬‬

:‫ بيكسل ليكون كما يلي‬600‫ و‬401 ‫واآلن سوف نجعل العرض ما بين‬
:‫ بيكسل ليكون كما يلي‬800‫ و‬601 ‫واآلن سوف نجعل العرض ما بين‬
:‫ بيكسل ليكون كما يلي‬801 ‫واآلن سوف نجعل العرض أكبر من‬
PAGE 916
‫رجاء انتبه! ألن المثال السابق يلخص قصة الـ ‪ Responsive‬بشكل‬
‫كبير‪ ،‬ألنك تستطيع اآلن أن تفعل أي تنسيقات أي كانت‪ ،‬سواء تخفي عناصر‪،‬‬
‫أو تظهر عناصر‪ ،‬أو تحرك عناصر‪ ،‬أو تغير تنسيقات عناصر‪ ،‬وذلك لكل‬
‫حجم تريده بفضل اهلل‪.‬‬
‫واآلن سوف نركز قليالً مع األكواد في المثال السابق‪ ،‬فإن الكود التالي‪:‬‬
‫)‪@media (max-width:200px‬‬
‫معناه أن التنسيقات يتم تطبيقها مع ‪ 200px‬للعرض كحد أقصي‪ ،‬أي‬
‫ما أكبر من الـ ‪ 200px‬لن يتم عليه تلك التنسيقات‪ ،‬والكود التالي‪:‬‬
‫)‪@media (min-width:200px) and (max-width:400px‬‬
‫معناه أن التنسيقات يتم تطبيقها مع عرض يتراوح من ‪ 200px‬كحد‬
‫أدني‪ ،‬و‪ 400px‬كحد أقصي‪ ،‬والكود التالي‪:‬‬
‫)‪@media (min-width:801px‬‬
‫معناه أن التنسيقات يتم تطبيقها مع ‪ 801px‬للعرض كحد أدني‪ ،‬أي ما‬
‫أقل من الـ ‪ 801px‬لن يتم عليه تلك التنسيقات‪.‬‬

Inherit ‫الوراثة‬
.parent ‫ من عنصر‬child ‫موضوع الوراثة هو أن يرث عنصر‬
:‫واآلن سوف نقوم بعمل مثال عادي بدون وراثة‬
<!DOCTYPE html>
<html>
<head>
<style>
#p1{ color:#2199fa; }
span{ font-size:15px; color:red; }
</style>
</head>
<body>
<p id="p1">
My name is <span id="s1">Mohamed Foaad</span>,
And I am a <span id="s2">web developer</span>.
</p>
<p id="p2">
The world of <span id="s3">web development</span>
of the most beautiful things
</p>
</body>
</html>
PAGE 918
:‫ لتعرف تفعيلها وأهميتها كما يلي‬،‫واآلن سوف نطبق الوراثة علية‬
<!DOCTYPE html>
<html>
<head>
<style>
#p1{ color:#2199fa; }
span{ font-size:15px; color:red; }
#s2{ color:inherit; font-size:inherit; }
</style>
</head>
<body>
<p id="p1">
My name is <span id="s1">Mohamed Foaad</span>,
And I am a <span id="s2">web developer</span>.
</p>
<p id="p2">
The world of <span id="s3">web development</span>
of the most beautiful things
</p>
</body>
</html>

:‫واآلن الحظ االختالف بين المثالية كما في الشكلين التاليين‬
‫هذا بدون وراثة‬
‫وهذا بالوراثة‬
‫ وموجه له تنسيقات‬،‫ بداخل عنصر‬span ‫ومن هنا نالحظ أن الوسم‬

‫ له بعض‬parent ‫ ورث من العنصر‬،‫ ولكن بعد الوراثة‬،‫مختلفة عنه‬
.‫الخصائص‬
PAGE 920
‫تعريف المتغيرات ‪Variables‬‬

‫كلمة متغير تشير الى شيء يتم بناؤه‪ ،‬ثم يتم تخزين او حفظ قيمة كما نريد‬
‫بداخلة‪ ،‬ثم يتم التعامل معه في أي وقت فنأخذ القيمة التي يحتفظ بها‪،‬‬
‫حيث يمكن عمل متغيرات كثيرة وتثبيت قيم مختلفة بها‪ ،‬مثل األلوان او‬
‫النصوص أو غير ذلك‪ ،‬فيكون من السهل علينا التغيير في قيمة متغير واحد‬
‫ليتم بهذا التغيير تغيرات كثيرة في الموقع‪ ،‬مثالً ألوان الفقرات في متغير‪،‬‬
‫والوان األزرار في متغير‪ ،‬وهكذا‪.‬‬
‫ويتم تعريف المتغيرات داخل الـ ‪ :root‬في تنسيقات الـ ‪ ،css‬ولتعريف‬

‫متغير يتم كتابة الرمز داش مرتين ‪ --‬ثم اسم المتغير ثم الرمز كولون ‪:‬‬
‫ثم القيمة التي نود ان يتم حفظها في ذلك المتغير للنداء عليها فيما بعد‬
‫في التنسيقات‪.‬‬
‫وللنداء على المتغيرات لالستفادة من القيم الموجودة بداخلها‪ ،‬يتم كتابة‬

‫الدالة ‪ var‬وقوسيها )( ثم بداخل القوسين نكتب اسم المتغير كما هو‪.‬‬
‫وفيما يلي سوف يتم عمل مثال شامل للتعامل مع المتغيرات إن شاء اهلل‪.‬‬

<!DOCTYPE html>
<html>
<head>
<style>
:root{
--public-word:"HA";
--margin-h1:30px;
--bg-h1:lightgray;
--name1-color:#f00;
--name2-color:#3b3;
--name3-color:#00f;
--name4-color:#fe0;
--name5-color:#a9f;
}
#name1{ color: var(--name1-color); }

h1{
margin: var(--margin-h1);
background: var(--bg-h1);
}
h1:after{
content:" - " var(--public-word);
}
</style>
</head>
<body>
<h1 id="name1">Ahmed Hassouna</h1>
<h1 id="name2">Amr ELSayed</h1>
<h1 id="name3">Adel Sabour</h1>
<h1 id="name4">Ahmed Baryyan</h1>
<h1 id="name5">Mahmoud Fayed</h1>
</body>
</html>
PAGE 922
‫ونالحظ في المثال السابق أنه تم تعريف المتغير ‪--public-word‬‬

‫وبه القيمة "‪ "HA‬وتم تعريف المتغير ‪ --margin-h1‬وبه القيمة‬
‫‪ 30px‬وتم تعريف المتغير ‪ --bg-h1‬وبه القيمة ‪ lightgray‬وتم‬
‫تعريف المتغير ‪ --name1-color‬وبه القيمة ‪ #f00‬وتم تعريف‬
‫المتغير ‪ --name2-color‬وبه القيمة ‪ #3b3‬وتم تعريف المتغير‬
‫‪ --name3-color‬وبه القيمة ‪ #00f‬ثم بعده مباشرة تم تعريف‬
‫المتغير ‪ --name4-color‬وبه القيمة ‪ #fe0‬وتم تعريف المتغير‬
‫‪ --name5-color‬وبه القيمة ‪ ،#a9f‬ونالحظ أن كل هذه‬
‫المتغيرات تم وضعها بقيمها داخل الـ ‪ :root‬في تنسيقات الـ ‪،css‬‬
‫ثم تم استخدام كل هذه المتغيرات في أماكن مختلفة فيما بعد‪.‬‬

practical examples ‫تمارين عملية‬

‫ سوف يتم وضع أمثلة‬،‫ بعد المذاكرة الشيقة لهذا الكتاب‬،‫وبفضل اهلل وحده‬
‫ ولكن انتبه! فال يتم التركيز على الشكل‬،‫كتدريب لما تعلمناه بفضل اهلل‬
.‫ ولكن يتم التركيز على بعض الجوانب العملية‬،‫الجمالي في هذه األمثلة‬
‫تمرين نص محفور‬
<!DOCTYPE html>
<html>
<head>
<style>
h1{
background-color: #666; color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text; background-clip: text;
}
</style>
</head>
<body> <h1>WELCOME</h1> </body>
</html>
PAGE 924
‫تغيير شكل الروابط‬
<html>
<head>
<style>
a:link , a:visited{
text-decoration: none;
background-color: navy;
color:lightblue;
padding:5px 20px;
border:2px solid #3dbce5;
border-radius: 15px;
}
a:hover , a:active{
background-color:#4565ae;
}
</style>
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="https://www.hassouna-academy.com">Hassouna Academy</a>
</body>
</html>

‫عمل جدول‬
<html>
<head>
<style>
th{
height:35px;
text-align:left;
vertical-align: top;
background-color:#4CAF70;
color:#fff;
}
th, td{
padding: 10px;
border-bottom:1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {background-color: #c2cbbd}
</style>
</head>
<body>
<table>
<tr><td>444</td><td>Omar</td><td>5900</td></tr>
</table>
</body>
</html>
PAGE 926

‫قائمة رأسية عادية‬
<html>
<head>
<style>
*{ font-size: 30px; }
ul{
list-style-type:none;
margin:0;
padding:0;
background: #eee;
width:300px;
border:1px solid #777;
}
li a{
padding:15px;
color:#000;
display: block;
}
li{
border-bottom:1px solid #777;
text-align: center;
}
li:last-child{ border-bottom: none; }
li a:hover{ background: #777; color:#fff; }
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
PAGE 928
‫ومع اللمس تكون مثل الشكل التالي‪:‬‬

‫قائمة جانبية والمحتوي على اليمين‬
<html>
<head>
<style>
body{ margin:0; }
ul{
margin:0; padding:0;
background: #eee;
width:30%; height:100%;
position: fixed; top:0;
overflow:auto;
}
li a{
padding:15px; color:#000;
display: block;
}
li{
border-bottom:1px solid #777;
text-align: center;
}
li a:hover{
background: #777;
color:#fff;
}
#mypage{
margin-left:30%;
padding-left:15px;
}
</style>
</head>
PAGE 930
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#store">Store</a></li>
<li><a href="#orders">Orders</a></li>
<li><a href="#about">About</a></li>
</ul>
<div id="mypage">
<hr>
<h1 id="start">Start</h1>
<p>Welcome To My Website</p>
<hr>
<h1 id="home">Home</h1>
<a href="#start">Back</a>
<p>This is Home Part</p>
<hr>
<h1 id="store">Store</h1>
<p>This is Store Part</p>
<hr>
<h1 id="orders">Orders</h1>
<p>This is Orders Part</p>
<hr>
<h1 id="about">About</h1>
<p>This is About Part</p>
</div>
</body>
</html>

PAGE 932
‫قائمة في األسفل‬
<html>
<head>
<style>
*{font-size: 30px;}
ul{
margin:0;
padding:0;
background: #eee;
width:100%;
display: inline-block;
position: fixed;
bottom:0;
left:0;
}
body{
padding-top:55px;
}
li a{
padding:15px;
color:#000;
display: block;
}
li{
/* border-right:1px solid #777; */
text-align: center;
float:left;
}
li:last-child{
border-right: none;
/* border-left:1px solid #777; */
float: right;
}

li a:hover{
background: #777;
color:#fff;
}
</style>
</head>
<body>
<ul>
</ul>
<hr>
<hr>
<hr>
<hr>
<hr>
</body>
</html>
PAGE 934

‫قائمة علوية منبثقة‬
<html>
<head>
<style>
ul{
margin:0;
padding:0;
background: #eee;
width:100%;
display: inline-block;
position: fixed;
top:0;
left:0;
}
body{
padding-top:55px;
}
li a{
padding:15px;
color:#000;
display: block;
}
li{
/* border-right:1px solid #777; */
text-align: center;
float:left;
}
li:last-child{
border-right: none;
/* border-left:1px solid #777; */
float: right;
}
li a:hover{ background: #777; color:#fff; }
#lang{
display: none;
position: absolute;
PAGE 936
background: #eee;
min-width: 160px;
}
#drop:hover #lang{ display: block; }
</style>
</head>
<body>
<ul>
<li id="drop"><a href="#">Languages</a>
<div id="lang">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JS</a>
</div>
</li>
</ul>
<hr>
<hr>
<hr>
<hr>
<hr>
</body>
</html>

:‫ تظهر كما بالشكل التالي‬Languages ‫ولكن الحظ عند لمس القائمة‬
.‫ولو تركتها تختفي مرة أخري‬
PAGE 938
‫مربع نص بأيقونة من صورة‬
<html>
<head>
<style>
#txtUser{
width:100%;
height:auto;
padding: 10px;
background: #fff; outline:none;
border-radius:5px;
font-size:50px;
background-image:url(user.png);
background-repeat: no-repeat;
background-position: 1px;
padding-left:90px;
}
</style>
</head>
<body>
<input id="txtUser" placeholder="Username" />
</body>
</html>

css ‫تنسيق أكواد برمجية بـ‬
<!DOCTYPE html>
<html>
<head>
<style>
.my{
font-family: "consolas";
font-size:20px;
color:#bbb;
background:#222;
padding:35px;
margin:20px;
}
.my:first-line{
color:green;
}
</style>
</head>
<body>
<div class="my">
//This is my first c# code -- Start<br>
string strName = "Omar";<br>
string strHello = "Hello";<br>
string strSayHello = strHello + " " + strName;<br>
MessageBox.Show(strSayHello);<br>
</div>
<div class="my">
//This is my second c# code -- Start<br>
int number1 = 55;<br>
int number2 = 77;<br>
int result = number1 + number2;<br>
MessageBox.Show(result.ToString());<br>
</div>
</body>
</html>
PAGE 940

‫الروابط المخفية‬
<!DOCTYPE html>
<html>
<head>
<style>
a{ opacity:0; }
p, a{
text-decoration:none;
font-size:30px;
letter-spacing:0;
}
p:hover{ letter-spacing:7px; }
p:hover a{ opacity:1; }
</style>
</head>
<body>
<p>Goto Google Site
<a href="https://www.google.com" target="_blank"> >
Google</a></p><br>
<p>Goto Facebook Site
<a href="https://www.facebook.com" target="_blank"> >
Facebook</a></p><br>
<p>Goto Hassouna Academy Site
<a href="https://www.hassouna-academy.com" target="_blank"> >
Hassouna Academy</a></p><br>
</body>
</html>
PAGE 942
‫ولكن عند لمس رابط منهم يظهر كما باألشكال التالية‪:‬‬

‫جدول بشريط تمرير وتلميحات‬
<html>
<head>
<style>
table{
border-collapse: collapse;
width:100%;
}
th{
height:35px;
text-align:left;
vertical-align: top;
background-color:#4CAF70;
color:#fff;
}
th, td{
padding: 10px;
border-bottom:1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {background-color: #c2cbbd}
#data{overflow: auto;width:300px}
.info{
opacity: 0;
background: yellow;
position: relative;
left:-50px;
width:170px;
border-radius:10px;
transition: all 1s;
}
tr:hover .info{
opacity: 1;
}
</style>
PAGE 944
</head>
<body>
<div id="data">
<table>
<tr>
<th>Number</th>
<th >Name</th>
<th>Salary</th>
<th>City</th>
<th>Country</th>
<th>Offer</th>
<th>Department</th>
</tr>
<tr>
<td>111</td>
<td>Ahmed Hassouna
<div class="info">This is row1 from table</div>
</td>
<td>6000</td>
<td>Cairo</td>
<td>Egypt</td>
<td>6000</td>
<td>Information Systems</td>
</tr>
<tr>
<td>222</td>
<td>Amr ELSayed
</td>
<td>6500</td>
<td>Giza</td>
<td>Egypt</td>
<td>6000</td>
</tr>
<tr>
<td>333</td>
<td>Adel Sabour
</td>
<td>6200</td>
<td>Cairo</td>
<td>Egypt</td>

<td>6000</td>
</tr>
<tr>
<td>444</td>
<td>Ahmed Omar
</td>
<td>5900</td>
<td>Alex</td>
<td>Egypt</td>
<td>6000</td>
</tr>
<tr>
<td>555</td>
<td>Ehab Ali
</td>
<td>6150</td>
<td>Cairo</td>
<td>Egypt</td>
<td>6000</td>
</tr>
<tr>
<td>666</td>
<td>Eslam Adel
</td>
<td>6350</td>
<td>Giza</td>
<td>Egypt</td>
<td>6000</td>
</tr>
</table>
</div>
</body>
</html>
PAGE 946
‫ولكن عند لمس الصف يظهر تلميح خاص به‪ ،‬كما يلي‪:‬‬

‫مربع يتحرك ويتلون‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
background: lightblue;
width:150px;
height:150px;
position:absolute;
animation-name: my3;
animation-duration: 3s;
animation-iteration-count: 3;
}
@keyframes my3{
0%{top:0;left:0;}
25%{top:0;left:200px;background: red}
75%{top:300px;left:200px;background: green}
90%{top:300px;left:0;background: blue}
100%{top:0;left:0;}
}
@keyframes my2{
0%{ background: lightblue; }
75%{ background: red; }
80%{ background: green; }
90%{ background: blue; }
}
@keyframes my1{
from{ width:150px; }
to{ width:300px; }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
PAGE 948

‫صفحة المنتجات مع استخدام صور‬
<!DOCTYPE html>
<html>
<head>
<title>Product</title>
<style>
img{ margin:10px; padding:10px; transition:all 1s; }
.header{
font-weight:bold; text-align:center; transition:all 1s;
}
#nodis{ display:none; }
@media (max-width:299px){
#all{ display:none; }
#nodis{ display:block; }
}
@media (min-width: 300px) and (max-width: 450px){
img{
width:90%; height:200px;
background-color:#84eff4;
}
.header{ font-size: 25px; color:#fff; }
body{ background-color: #072845; }
}

img{
background-color:#070750;
}
.header{ font-size: 35px; color:#000; }
body{ background-color: #58a7eb; }
}

img{
background-color:#f484f0;
}
body{ background-color: #550b16; }
PAGE 950
}

img{
background-color:#144808;
}
.header{ font-size: 55px; color:#000; }
body{ background-color: #95ef80; }
}
@media (min-width: 1201px){

img{
background-color:#eff481;
}
body{ background-color: #86900f; }
}
</style>
</head>
<body>
<p style="color:red" id="nodis">
Sorry No Display For Less Than 300px
</p>
<div id="all">
<p class="header">Welcome To Product Page</p>
<img src="pro/01.png" >
</div>
</body>
</html>

:‫ تظهر كما بالشكل التالي‬300px ‫وبعد تشغيل الصفحة بعرض اقل من‬
:‫وبعد التكبير أكثر تكون مثل الشكل التالي‬
PAGE 952
‫وبعد التكبير أكثر تكون مثل الشكل التالي‪:‬‬

PAGE 954
‫وبعد التكبير أكثر تكون مثل الشكل التالي‪:‬‬

PAGE 956
‫مربع يتقلب ويرتعش‬
<!DOCTYPE html>
<html>
<head>
<style>
#d1{
background-color: lightblue; border:3px solid navy;
position: absolute; top:10px; left:10px;
animation-name:my1; animation-duration:9s;
}
@keyframes my1{
0% {left:10px ; top:10px ;}
5% {left:300px; top:10px ;}
10% {width:150px;}
15% {width:100px;}
20% {width:150px;}
25% {width:100px;}
30% {width:150px;}
35% {width:100px;}
40% {width:150px;}
45% {width:100px;}
50% {transform: skewX(30deg)}

52% {transform: skewX(0)}
60% {transform: skewX(30deg);}
72% {left:300px; top:300px ;}
75% {transform:rotate(360deg)}
}
</style>
</head>
<body> <div id="d1"></div> </body>
</html>

PAGE 958
‫تنويع روابط وازرار ومربعات نص‬
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #fff;
}
a{
background:navy;
color:lightblue;
border:3px solid lightblue;
border-radius:7px;
padding:10px;
margin:1px;
font-size:20px;
}
a:hover{
color:navy;
font-size:25px;
margin-left:20px;
margin-right:20px;
}
input[type="text"]{
font-size:25px;
width:300px;
height:39px;
background: whitesmoke;
border-radius:7px;
outline:none;
}

input[type="text"]:focus{
background: lightblue;
width:320px;
}
input[type="button"]{
font-size:25px;
width:200px;
padding:3px;
background: darkred;
color:pink;
border:1px solid orange;
border-radius:7px;
outline:none;
}
input[type="button"]:hover{
font-size:27px;
width:210px;
padding:5px;
background: pink;
color:darkred;
border:1px solid gold;
}
#lang{
display:none;
}
#pro{
background:#6b046f;
color:#ddade6;
border:3px solid lightblue;
border-radius:7px;
padding:10px;
margin:1px;
font-size:20px;
}
#pro:hover{
padding:30px;
}
PAGE 960
#pro a{
margin-top:20px;
}
#pro:hover #lang{
display:block;
}
</style>
</head>
<body>
<a href="#">My Link 1</a>
<hr>
<input type="text" > <input type="button" value="This is button" >
<hr>
<div href="#" id="pro">Programming Languages
<div id="lang">
<a href="#">Java</a>
<a href="#">Ring</a>
<a href="#">Python</a>
<a href="#">C Sharp</a>
<a href="#">PHP</a>
<a href="#">VB</a>
<a href="#">Go</a>
</div>
</div>
</body>
</html>

:‫ولكن عند لمس الروابط تكون مثل ما يلي‬
:‫ولمس الزر يكون مثل ما يلي‬
:‫والدخول الى مربع النص يكون مثل ما يلي‬
PAGE 962
‫ولمس لغات البرمجة يفتح مثل التالي‪:‬‬
‫ولمسهم يكون مثل ما يلي‪:‬‬

💖 ‫كنوز وهدايا‬
‫ أن تنشرها في كل مكان من الروابط‬،‫ ووصيتي لك‬،‫اليك كنوز وهدايا‬
‫ وأيضاً وصيتي لك بأن تشاهدها وتنصح الجميع بمشاهدتها من‬،‫األصلية‬
.☺ ‫ لتنجح هذه الكورسات بفضل اهلل‬،‫اليوتيوب من أكاديمية حسونة‬
‫شرح في قصص نجاح‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflvUNrnmYsLPbU2t4oG0P-8
‫شرح في الكمبيوتر بشكل عام‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfm_dFhGnawAlnOOE1aSwoSN
‫شرح عن مقدمة في الحاسبات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmt3FFalD6y-UjTshUC_zXM
‫شرح في أنظمة ماك ولينكس‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmTj0gddZTgcPdqDGP1qscF
‫ من األساس وبالتفصيل‬Windows ‫شرح في الويندوز‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkKu8K8Dz603sxLa3eQ-g6G
‫ من األساس‬Word ‫شرح في برنامج وورد‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfk_q1_xWEJ8gl_nbPY_Y75A
PAGE 964
‫ من األساس‬Excel ‫شرح في برنامج اكسيل‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfmeaZUramzmRwJVLQThBiuu
Photoshop ‫شرح في برنامج الفوتوشوب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfntLWyOJQKyfR5RcuXdzfnU
‫شرح في البرامج الجاهزة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmCe0esfmzTZTQ_AfoLOH1M
‫ أمثلة‬+ ‫شرح في الخوارزميات وخرائط التدفق‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmOvX3-91zteoSP-b0VS44o
‫شرح آخر في الخوارزميات وخرائط التدفق‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflwIO8IiPxNkSSb-ezkNqDs
‫شرح في تحليل البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkDoNSoObO0s_OZn67DFAti
‫برنامج المبرمجتية‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfnLcjFtaI9O5vt1DKdSVM4K
‫برنامج أساس مبرمج‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkb-fDWH14OjJowQX_Rztgk
‫شرح في ال اعرف شيء عن الكمبيوتر وأريد أن اكون مبرمج‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnKiRVeW9H2k4TnwXZbaoc8

‫شرح في منهج الصف الثاني االعدادي‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmkYyJx1FJcSx1QOJnHanpQ
‫شرح في منهج الصف الثالث االعدادي‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmM2mbNfA_4jTI3vyK4iCOE
HTML ‫شرح في كورس قديم عن الويب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmpHW37aNxMFosXD_p1jQz0
HTML ‫شرح في كورس جديد عن الويب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnXKjZ9UcT5BVt9x19BlItX
CSS ‫شرح في كورس عن الويب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflO6xnz4jpmzzSuo5B63aJf
JavaScript ‫شرح في كورس عن الويب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmiYYwt29BG7N9zzsd-jLRQ
‫شرح في دردشة برمجة عملي‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl0CJzVbN-DHGUJ_Y2DpPim
j-query ‫شرح في الويب جي كويري‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfll3ObMFi02Ry7oRU3MJVRG
PAGE 966
bootstrap ‫شرح في الوي بوت ستراب‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfmzBcYnuLNrmdLxYCDzJgQi
JSON ‫شرح في جاسون‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflA5jVQbAAHVizSxoeOAtgq
Angular ‫شرح في انجوالر‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflbtKBrCp5U2UdbeV1c7F-5
‫ وسي شارب ومع الخدمات األساسية‬asp.net ‫شرح في الويب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflkDPHlOLTKV1daEp4pvIgA
AJAX ‫شرح في الويب ومع‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmYd8YFZtSmCzc3hcZXVua9
MySQL ‫شرح في قواعد البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflO4GPp9vMtUgry-xAQKl7i
PHP ‫شرح في الويب ولغة البرمجة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmPDQahhTDdd1DJ4PwQl3pC
‫شرح في الويب ومع دبلومة الويب الكاملة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflYXyXHNiG-hyyVaz7-9ujn
‫شرح في الويب ومع سلسلة تعلم الفيديو الواحد‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnPUohWz2vPjm0obEjzZJD8

‫شرح في الويب ومع صناعة آلة حاسبة بسيطة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkYSpySS9Czt3Dxx2rsvqcN
C# ‫شرح في البرمجة واساسيات السي شارب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfm8nQAoJF5u2aV43tMRAAmr
C# ‫شرح في شاشات السي شارب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnbNoGB0NdoRdllq9fdo6uM
C# ‫ وسي شارب‬OOP ‫شرح في البرمجة كائنية التوجه‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl6UP-PlUli03pokSc4af2S
C# ASP.NET‫شرح في الويب مع سي شارب و‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmi8jwSbqiQuVfxeXIBk-bW
C# ‫ مع‬DB ‫شرح في عالم واسع من قواعد البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflAus00vgdVEzLUBCx8ooH_
C#‫شرح في أمثلة عملية مع قواعد البيانات و‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmYdNXeeaBjt4mxSX5RWjzo
Database ‫شرح في أسرار قواعد البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnKHFH1uUwdpeW8h-A8lAI_
PAGE 968
C# ‫ مع‬LINQ ‫شرح في الـ‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfnW4RDln5tzw6htvNhnkr7t
‫شرح في عمل برنامج المطاعم واألكالت‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnK119pOw2oEDXc0AEpIfd5
‫شرح في عمل برنامج المبيعات الشامل‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfm2vgnbTfoxoUSlxoag0UHX
‫شرح في دورة السي شارب العمالقة بفضل اهلل‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkDF2xTIB5kX8gdthmLTufx
C# ‫شرح في قواعد البيانات الشامل والسي شارب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmg0C_6ON0IRFWrifni6CTq
C# ‫ مع‬MySQL ‫شرح في ربط‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkQ7fgtqD4b4VuhxV6RzNu-
C# ‫ مع‬Oracle ‫شرح في ربط‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl0vnBDg28R0DW9HBkyHvc-
‫شرح في عمل متصفح بالسي شارب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl7ToU9EDuRVYiki9C9wxnJ
‫شرح في كورس سي شارب مختصر‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmIhzWCyXnYlxz8ALlfPRAn

ASP.NET‫شرح في الويب ومع الدورة التنفيذية في سي شارب و‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfn6kI3NyvzTDm-wdw9EX7D6
VB.NET ‫شرح في البرمجة ومع اساسيات فيجوال بيسك‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflKvIMpDSgFTJsR_IO1dH9i
VB.NET ‫شرح في شاشات الفيجوال بيسك‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfn7Pz7MnzABWryuHRP9ab7O
‫شرح في دورة الفيجوال بيسك العمالقة بإذن اهلل‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmLGhFsQ1G5cPv1xokzBsbT
‫شرح في فيجوال بيسك وسكول سيرفر مع التقارير الكاملة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkkhf3ha77qccAWYMvgM7LR
VB.NET ‫ مع‬Oracle ‫شرح في ربط‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflAkiMFHY-0Jc_XXnpLWQO0
VB.NET ‫ مع‬Access ‫شرح في ربط‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkdbHPdTBpcYZzPQtPUeR7I
VB 6 ‫شرح في الفيجوال بيسك القديم‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfk5L0DQbV8DyUwfoAhQyieg
PAGE 970
JAVA ‫شرح في البرمجة مع أساسيات لغة الجافا‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIflflvzYY7B1d5CJjXpbIriU
JAVA ‫شرح في بداية البرمجة الكائنية مع جافا‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmb25mVAsCJy_Ehgu5rbbQx
JAVA ‫شرح في البرمجة الكائنية مع جافا‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnT2i7Ba4F2nrWb_ENXjyTs
‫شرح في جافا مع قواعد البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnKQjOoZc540z3fmGe-slLU
Android ‫شرح في جافا مع اندرويد‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnQ6WRvLbWok4ZZww4k3T1u
‫شرح في شاشات الجافا‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl2XxZwryDuPO5ZLkRhL-CS
‫شرح في دورة الجافا العمالقة بفضل اهلل‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfn9BnepQuzWiM_ZPIwUDawL
‫شرح في أمثلة عن جافا‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnUMvey6UAveK5msn8L_ulS
‫ للجافا‬jar ‫شرح في التعامل مع ملف الـ‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnDa6squg4OjDjYfx5YC8Zx

Kotlin ‫شرح في البرمجة مع لغة البرمجة كوتلن‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl5UHtM6DRFAVn3PBuJ7NGD
Kotlin ‫شرح في كالم عن لغة كوتلن‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl_KgeClVL_xH_JXFqIsV0Y
Android ‫شرح في كوتلن مع اندرويد‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmbpu6cVCxo98u_Yk0Hfxah
Python ‫شرح في البرمجة ومع اساسيات البايثون‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmm35tXSbxsFDouRJAPP9Y2
‫ مع البايثون‬OOP ‫شرح في البرمجة الكائنية‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmHvfmFZZ0XuzZYuoosG9kl
OOP‫ اساسيات و‬Python ‫شرح في البرمجة مع لغة البايثون‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnVNMUcSLFFyDzuLDheF99n
Python ‫شرح في شاشات البايثون‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmMhy8GltKHW5UJ_ZPnGJ0K
‫شرح في دورة البايثون العمالقة بفضل اهلل‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnM9y0sQRwjVz2-IwvnEJep
PAGE 972
Ring ‫شرح في البرمجة مع لغة الرينج‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfl6KzfLziFl650MmThnQ0jT
Ring ‫ ورينج‬OOP ‫شرح في البرمجة الكائنية‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl5TA4nTIIVWsfDyVwIBP6y
Ring ‫شرح في شاشات رينج‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmE8gCtJQpIOGmBz3bc_Nrs
C++ ‫شرح في البرمجة مع لغة السي بلس بلس‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfkz_N9aNWXRByEJOudCxSRh
‫شرح متنوع وعام في عالم البرمجة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfl6aI0bGb0zWZyGHc2ctcW7
SQL Server ‫شرح في قواعد البيانات‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIflvUe-YfDpIqqnU70BopQ3q
SQL ‫شرح في قواعد البيانات ولغة السكول‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmNd2URuqVO5Itboj_LQyrx
Access ‫شرح في قواعد البيانات مع أكسس‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnKpy1msMUPqVYdpu3nOdkY
Multimedia DB ‫شرح في قواعد بيانات الوسائط المتعددة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmMYvE8mnEH4VT-4v21XV6p

Magic DB ‫شرح في عمل برنامجك مع األداة‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnkb0hIry8E0LbA0flhaXTo
‫شرح في برنامج امتحان الطالب‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfnd5v0u8hxwTKXebJK9QpqG
‫تسالي مبرمجين‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfl_zc__duOyEhaCCPZRAuHv
‫اكاديمية حسونة‬
https://www.youtube.com/playlist?list=PLHIfW1KZRIfmxKFdzlyAna7sYE_L2hI0o
Events ‫لقاءات وأحداث‬

https://www.youtube.com/playlist?list=PLHIfW1KZRIfmFsmWKCbc_rf6qAPbVykMJ
PAGE 974
‫شكر خاص‬
‫الشكر أوالً وأخيراً وابتداء وانتهاء هلل عز وجل‪ ،‬ونشكر كل من‪:‬‬
‫• شكر ألبي وأمي اللذان ربياني صغيرا‪.‬‬
‫• شكر لكل أصدقائي واصحابي واحبابي في كل مكان‪.‬‬
‫• شكر لكل من عرف قدر العلم‪.‬‬
‫• شكر لكل طالب او طالبة او اخ او صاحب او صديق او حبيب ينشر هذا العمل‬
‫في كل مكان ليفيد الجميع بإذن اهلل‪.‬‬
‫• شكر لألستاذ احمد باريان على دعمه في نشر العلم في كل مكان‪.‬‬
‫• شكر للمهندس أحمد إبراهيم سالم (‪)Ahmed Ibrahim‬‬
‫• شكر للدكتور عادل عبد الصبور (‪.)Adel Sabour‬‬
‫• شكر للمهندس محمود سمير فايد (‪.)Mahmoud Fayed‬‬
‫• شكر للمهندس أسامة محمد (‪.)Osama Elzero‬‬
‫• شكر للقائمين على موقع ‪developer.mozilla.org‬‬
‫• شكر للقائمين على موقع ‪wikipedia.org‬‬
‫• شكر للقائمين على موقع ‪w3.org‬‬

‫نشكرك على قراءتك‬
‫أوالً‪ :‬نتقدم لك بخالص الشكر 💖 على قراءتك هذا الكتاب‪ ،‬ونتمنى لك‬
‫االستفادة الكاملة من محتواه‪.‬‬
‫ثانياً‪ :‬ال تنسى أن تسجل لنفسك حساب 💪 في أكاديمية حسونة لتنضم‬

‫إلينا وتشارك معنا كل محتويات الموقع‪ ،‬سجل من الرابط التالي‪:‬‬
‫‪https://www.hassouna-academy.com/register‬‬
‫ثالثاً‪ :‬يسر أكاديمية حسونة أن تخبرها برأيك عن هذا الكتاب من خالل‬

‫تقديم كلمة شكر 😍 من الرابط التالي‪:‬‬
‫‪https://www.hassouna-academy.com/thanks‬‬
‫‪PAGE 976‬‬
‫المراجع ‪References‬‬
‫الجدول التالي يحتوي على المراجع التي تم الرجوع إليها أثناء تأليف هذا‬
‫الكتاب‪ ،‬سواء كانت مراجع تعليمية مرئية أو مقروءة‪ ،‬أو معلوماتية‪.‬‬
‫الرابط‬ ‫المرجع‬
‫‪http://elzero.org/‬‬ ‫اكاديمية الزيرو‬
‫‪http://www.7ist.net/‬‬ ‫‪ ٧‬نظم تكنولوجيا المعلومات‬
‫‪https://www.hassouna-academy.com/‬‬ ‫اكاديمية حسونة‬
‫‪https://www.wikipedia.org/‬‬ ‫ويكيبيديا‬
‫‪https://www.w3.org‬‬ ‫منظمة الويب العالمية‬
‫‪https://developer.mozilla.org‬‬ ‫‪mozilla‬‬

‫الختام ‪The End‬‬

‫واآلن‪ ،‬أتوجه الى أحبابي بكلمة من القلب 💖‪ ،‬خالصة إن شاء اهلل‪ ،‬فكر‬
‫معي في اختراعات اإلنسان‪ ،‬فكر في تطويرات وصناعات اإلنسان‪ ،‬فكر في‬
‫اإلنسان وقدراته‪ ،‬وقل سبحان اهلل الذي خلق اإلنسان‪ ،‬فكر في قول اهلل عن‬
‫أَح َس ِن تَقْوِيٍم"‪ ،‬فكر في‬ ‫اْلنس ِ‬
‫ان في ْ‬
‫اإلنسان في القرآن الكريم "لَقَ ْد خَلَقْنَا ْ َ َ‬
‫قدرة اهلل الواحد األحد‪ ،‬الفرد الصمد‪ ،‬الذي لم يلد ولم يولد‪ ،‬ولم يكن له‬
‫كفؤاً أحد‪ ،‬فكر في اهلل العظيم‪ ،‬الذي خلق السماوات واألرض‪ ،‬فكر في رب‬
‫العزة‪ ،‬فكر في رب الكون‪ ،‬وقل‪ ،‬سبحان اهلل‪ ،‬وقل‪ ،‬سبحان الملك العظيم‪،‬‬
‫وقل سبحان ذي العزة والجبروت‪ ،‬سبحان ذو الملك والملكوت‪ ،‬سبحان اهلل‬
‫العظيم‪ ،‬سبحان اهلل الكريم‪ ،‬سبحان اهلل‪ ،‬عدد خلقه‪ ،‬ورضا نفسه‪ ،‬وزنة‬
‫عرشه‪ ،‬ومداد كلماته‪ ،‬وآخر دعوانا "الحمد هلل رب العالمين"‪.‬‬
‫‪PAGE 978‬‬

Basic Rock Css PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic Rock Css PDF

Uploaded by

Copyright:

Available Formats

‫‪CSS‬‬

‫فهرس الموضوعات ‪Subject Index‬‬

‫فهرس الموضوعات ‪1....................................... ................................ Subject Index‬‬

‫صفحة رقم ‪1‬‬

‫صفحة رقم ‪3‬‬

‫صفحة رقم ‪5‬‬

‫صفحة رقم ‪7‬‬

‫صفحة رقم ‪9‬‬

‫صفحة رقم ‪11‬‬

‫كنوز وهدايا 💖 ‪964 ............................... ................................ ................................‬‬

‫صفحة رقم ‪13‬‬

‫مقدمة أساسية – هامة جداً‬

‫صفحة رقم ‪15‬‬

‫المؤلف‪ :‬احمد حسونة‬

‫صفحة رقم ‪17‬‬

‫هام جداً ‪ Very Important‬قبل الكتاب‬

‫موقع حسونة أكاديمي ←‬

‫قـناة حسونة أكاديمي ← ‪https://www.youtube.com/user/HassounaAcademy‬‬

‫رؤية الكتاب ‪Vision of Book‬‬

‫• التعامل مع إصدارات ‪ css‬وكأنهم اصدار واحد‬

‫صفحة رقم ‪19‬‬

‫قبل البداية في عالم ‪CSS‬‬

‫محرر الكود المفضل ‪Favorite Code Editor‬‬

‫صفحة رقم ‪21‬‬

‫• ادخل على موقع جوجل ‪.www.google.com‬‬

‫ما هي لغة التصميم ‪CSS‬‬

‫الحروف ‪ CSS‬اختصار للكلمات ‪Cascading Style Sheets‬‬

‫عند كتابة ملف به أكواد لغة التصميم ‪ ،css‬يأخذ االمتداد ‪ .css‬ثم‬

‫صفحة رقم ‪23‬‬

‫تأثير ‪ CSS‬على الصفحات‬

‫• أو تخيل مصنع السيارات عند تصنيع السيارة‪ ،‬يأتي بالحديد واألسالك‬

‫• أو تخيل مصنع الهاتف عند تصنيع الهاتف‪ ،‬يحضر اللوحات اإللكترونية‬

‫بناء يتم تأسيسه‪ ،‬ثم تجهيزه‪:‬‬ ‫‪-1‬‬

‫صورة بداية تأسيس البناء‪ ،‬وكأننا نعمل على ‪ HTML‬لألساس‬

‫صورة البناء بعد الديكورات‪ ،‬وكأننا نعمل على ‪ CSS‬للتحسين‬

‫صفحة رقم ‪25‬‬

‫ لألساس‬HTML ‫ وكأننا نعمل على‬،‫صورة بداية تأسيس السيارة‬

‫ للتحسين‬CSS ‫ وكأننا نعمل على‬،‫صورة السيارة بعد الديكورات‬

‫صورة بداية تأسيس الهاتف‪ ،‬وكأننا نعمل على ‪ HTML‬لألساس‬

‫صورة الهاتف بعد الديكورات‪ ،‬وكأننا نعمل على ‪ CSS‬للتحسين‬

‫صفحة رقم ‪27‬‬

‫الشكل التالي يعرض صفحة ويب بدون تنسيقات ‪ css‬كما يلي‪:‬‬

‫الحظ أنها صفحة تم تأسيسها باللغة ‪ HTML‬فقط‪ ،‬والحظ وجود‬

‫صفحة رقم ‪29‬‬

‫مخترع لغة ‪CSS‬‬

‫وحدات القياس ‪Measurement units‬‬

‫صفحة رقم ‪31‬‬

‫مكونات لغة ‪CSS‬‬

‫صفحة رقم ‪33‬‬

‫بادئة المتصفحات ‪Vendor Prefix‬‬

‫)‪،Opera, almost all iOS browsers (including Firefox for iOS‬‬

‫أماكن كتابة لغة ‪CSS‬‬

‫بالعنصر نفسه‪ ،‬للتأثير عليه فقط ‪Inline Style‬‬ ‫‪-1‬‬

‫تم ذكر وسم ‪ style‬و‪ link‬في كتاب "صخرة األساس" ‪.HTML‬‬

‫صفحة رقم ‪35‬‬

‫صفحة رقم ‪37‬‬

‫انتبه! لو أنشأت صفحة ‪ html‬جديدة في نفس المكان‪ ،‬ثم وضعت الوسم‬

‫صفحة رقم ‪39‬‬

‫كذلك الـ ‪ selector‬داخل اللغة ‪ ،css‬ويمكن افتراض ما يلي‪:‬‬

‫وبعد تشغيل الصفحة تظهر كما بالشكل التالي‪:‬‬

‫ للتأثير على‬،id ‫ ثم وضع اسم الـ‬# ‫الحظ أنه تم استخدام الرمز‬

‫ وبعدها تأثر كل شيء باألكواد الموجودة‬،‫الحظ كتابة الرمز * ثم الكود‬

‫صفحة رقم ‪49‬‬