‫ص‬

‫‪2017‬‬

‫ملخص كورس لغة‬

‫‪CSS‬‬
 ‫‪CSS‬‬
‫‪CSS‬هي اختصار لـ ‪ Cascading Style Sheet‬و هي تعني صفحات‬
‫اﻷنماط اﻻنسيابية ‪ ،‬و تستخدم تقنية ‪ CSS‬في تصميم صفحات الويب بحيث يتم من‬
‫خﻼلها التحكم في شكل الموقع بالكامل من حيث نوع الخط المستخدم أو لونه أو‬
‫حجمه و ذلك دون الحاجة لكتابة تلك اﻷكواد أو تكرارها في كل صفحة داخل‬
‫الموقع‪ ،‬و بالتالي فيمكن من خﻼل ملف واحد فقط إجراء أي تعديﻼت على كافة‬
‫الملفات مما يوفر الكثير من الجهد و الوقت ‪ .‬و وظيفة هذه التقنية هي التحكم بكيفية‬
‫عرض صفحة الويب دون التدخل في المحتوى‪ ،‬مما يسهل من عملية إدارة الموقع‪،‬‬
‫فتعديل ملف ‪ CSS‬واحد سيؤثر على تصميم كافة صفحات الموقع‬

‫‪CSS Comments‬‬
‫* لكتابة كومنت ‪ comment‬نكتب ‪/* ……… */ :‬‬

‫يتم استخدام التعليقات لشرح التعليمات البرمجية وقد تساعدك عند تحرير‬
‫التعليمات البرمجية المصدر في وقت ﻻحق‪.‬‬
‫فائدة ‪ :‬والكومنت في الحقيقة هو مهم جدا ً جدا ً‬

‫فائدة مهمة‪ /‬في حالة تشابه الكﻼسات في ال ‪ css‬فالكﻼسات التي تكتب‬

‫في اﻷسفل تكون أقوى من الكﻼسات التي تكتب في اﻷعلى أو بمعنى أخر‬
‫الخصائص التي في الكﻼسات التي في اﻷسفل تطبق وتلغى الخصائص‬
‫التي في الكﻼسات التي باﻷعلى في حاله تشابه الكﻼسات‬

‫‪2‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫هناك ‪ ٣‬طرق لكتابة ال ‪CSS‬‬
‫اﻷولى ‪:‬‬
‫نقوم بكتابة كود ‪ style‬في ‪head‬‬

‫الثانية ‪:‬‬
‫نقوم بعمل لينك داخل ال >‪<head‬‬
‫بحيث يكون ملف ال ‪ Css‬منفصل عن ملف ‪html‬‬
‫>"‪<link rel="stylesheet" href="##‬‬
‫وهي أفضل طريقة‪.‬‬

‫الثالثة ‪:‬‬
‫نقوم بالكتابة مباشرة داخل كود العنصر مستخدمين ‪style‬‬
‫>‪<"body style="color:red></body‬‬

‫مﻼحظة ‪:‬‬
‫يتم كتابة ‪ id‬مسبوقا بهشتاج ‪#‬‬
‫يتم كتابة ‪ class‬مسبوقا ب نقطة ‪.‬‬

‫‪3‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫إذا كتبت ‪ Selectors‬معين فإنه سيطبق على الكل‬
‫مثال‬
‫فسوف يطبق على كل ‪ h1‬ما لم تقم بإعطائه‬
‫‪ id‬أو ‪ class‬أخر وتغير قيمته‬

‫‪4‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪CSS Syntax‬‬
‫بناء ال ‪Css‬‬

‫‪ : Selector‬يشير المحدد إلى عنصر ‪ HTML‬الذي تريده‪.‬‬

‫‪ :Property‬يمكن إضافة أكتر من خاصية ولكن ﻻبد من وضع‬
‫‪ semicolon‬فاصلة منقوطة بين كل خاصية وأخرى‪.‬‬
‫وﻻبد من وضعهم في النهاية داخل اقواس معقوقة‪.‬‬

‫‪5‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Background‬‬
‫الخلفية‬
‫‪Background-color‬‬
‫يوجد في ال ‪ ١٤٠ Css‬لون ثابتين نستطيع كتابة أسمائهم مباشرة‬

‫ممكن كتابة اللون في ال ‪ background‬بكذا طريقة منها كتابة اللون‬

‫مباشرة اسم اللون "‪ "red‬أوكذلك كتابة كود اللون "‪"#ff0000‬‬

‫‪Background-repeat‬‬
‫‪ : Repeat‬التكرار فالصور تكرر بشكل افتراضي‬
‫وﻹلغاء التكرار نكتب ‪no-repeat‬‬
‫‪ : repeat-x‬تكرار أفقي يتم التكرار افقيا فقط‪.‬‬
‫‪ : repeat-y‬تكرار عمودي يتم التكرار عموديا فقط‪.‬‬
‫;‪Background-repeat:repeat-x‬‬
‫‪Background-attachment‬‬
‫وهذا للتحكم في الصور هل نجعلها ثابته دائما وﻻ يتغير موضعها أما‬
‫تتحرك مع السكرول‬
‫;‪ : Fixed‬يجعل الخلفية ثابته الصورة‬

‫‪6‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫;‪ : Scroll‬يجعل الصورة الخلفية متحركة مع المتصفح‬

‫‪Background-position‬‬
‫نستطيع التحكم في خلفية الصورة بوضعها في أي مكان في المتصفح‬
‫‪ : Top right‬أعلى يمين‬
‫‪ : center right‬يمين في الوسط‬
‫‪ : Bootom right‬اسفل يمين‬
‫ويمكن التحكم في الخلفية عن طريق النسب المئوية كاالقيم المكتوبة تماما ً‬

‫‪Background-imge‬‬
‫)" **** "(‪Background-imge:url‬‬

‫ولكتابة كود ال ‪ background‬في سطر واحد‬

‫ويكون ترتيبهم بالتوالي هكذا‬

‫‪1.‬‬ ‫‪background-color‬‬
‫‪2.‬‬ ‫‪background-image‬‬
‫‪3.‬‬ ‫‪background-repeat‬‬
‫‪4.‬‬ ‫‪background-attachment‬‬
‫‪5.‬‬ ‫‪background-position‬‬

‫‪7‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪TEXT FORMATTING‬‬
‫تنسيق النصوص‬
‫‪ : Direction‬اتجاه الكﻼم‬
‫أما الديفولت أي اﻹفتراضي في الصفحة هو من الشمال لليمين‬
‫يعني‬
‫ولو عايزينها تبقي من اليمين للشمال لضبط اللغه العربية‬

‫ويمكن أن يكون التنسيق العام للصفحة عربي ونضع تنسيق خاص باللغه‬
‫اﻹنجليزية ﻷحد الديفات أو البوكس أو غيرها‪.‬‬
‫‪ :letter-spacing‬المسافات بين الحروف‬
‫يتم استخدام هذه الخاصية لتحديد المسافه بين الحروف في النص‪.‬‬

‫نﻼحظ ‪ :‬تباعد الحروف مع استخدام القيم الموجبة وتقاربها مع القيم السالبة‬

‫‪ Normal‬القيمةاﻹفتراضية‬
‫‪ : Word-spacing‬المسافات بين الكلمات‬
‫يتم استخدام خاصية تباعد الكلمات لتحديد المسافة بين الكلمات في النص‬
‫تم استخدام نفس المثال السابق‪.‬‬

‫‪8‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫نﻼحظ ‪ :‬مدى التباعد بين الكلمات عند استخدام القيم الموجبة وتقارب‬
‫الكلمات مع القيم السالبة‬
‫‪ : Line-height‬التباعد بين السطر‬
‫يتم استخدام الخاصية ‪ line-height‬لتحديد المسافة بين السطور‬
‫مثال ‪/‬‬

‫نﻼحظ في المثال‬
‫مدى تقارب وتباعد اﻷسطر عند استخدام اﻷرقام المختلفة‬
‫‪ Normal‬القيمةاﻹفتراضية‬
‫وممكن كتابته بالقيمة المئوية ‪%١٠٠‬‬
‫مﻼحظة‪ :‬في درس في القناة بيتكلم عن ‪em‬و البيكسل والنسبة المئوية‬
‫‪ : Text-align‬محاذاة النص‬
‫يتم استخدام الخاصية محاذاة النص لتعيين المحاذاة اﻷفقية للنص‪.‬‬
‫‪right & left & center‬‬
‫مثال ‪/‬‬

‫‪9‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Justify‬عندما يتم تعيين خاصية محاذاة النص إلى "ضبط" ‪ ،‬يتم‬
‫تمديد كل سطر بحيث يكون لكل سطر عرض متساوي ‪ ،‬وتكون الهوامش‬
‫اليمنى واليسرى مستقيمة )كما هو الحال في المجﻼت والصحف(‬

‫‪ : Text-decoration‬التنسيق‬
‫يتم استخدام خاصية زخرفة النص لتعيين الزخارف أو إزالتها من النص‪.‬‬
‫;‪ Text-decoration: none‬القيمة اﻹفتراضية )بدون خط(‬

‫‪10‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ :Underline‬اضافة خط تحت الكﻼم‬
‫‪ : Overline‬يضع الخط فوق الكﻼم‬
‫‪ : Line-through‬وهي شطب الكلمة‬

‫‪ : Text-inndent‬لعمل ازاحة ولبدء الكﻼم بعيدا ً عن أول السطر‬

‫ومن الممكن كتابة نسبئة مئوية‬
‫;‪Text-inndent : 20px‬‬

‫‪11‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Text-transform‬‬
‫يتم استخدام خاصية تحويل النص لتحديد اﻷحرف الكبيرة والصغيرة في‬
‫النص‪.‬‬
‫يمكن استخدامه لتحويل كل شيء إلى أحرف كبيرة أو صغيرة ‪ ،‬أو تكبير‬
‫الحرف اﻷول من كل كلمة‪.‬‬

‫‪ : Capitalize‬لجعل أول الحروف من الكلمات كابتل‬

‫‪ : Uppercase‬حروف كبيره ‪ :Lowercase /‬حروف صغيره‬

‫‪ : writing-mode‬وضع الكتابة‬
‫تحدد الخاصية ‪ CSS‬لوضع الكتابة ما إذا كانت أسطر النص مرتبة أفقيًا‬
‫أو رأسيًا ‪ ،‬باﻹضافة إلى اﻻتجاه الذي تتقدم به الكتل‪.‬‬
‫لمزيد من المعلومات‬
‫‪https://developer.mozilla.org/en-‬‬
‫‪US/docs/Web/CSS/writing-mode‬‬

‫‪12‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪writing-mode: horizontal-tb‬‬
‫وهي القيمة اﻹفتراضية أو الوضع الطبيعي التر تيب أفقي‬

‫‪13‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Font‬‬
‫الفرق بين ‪ Serif‬و ‪Sans-serif Fonts‬‬

‫‪ : CSS Font Families‬عائ ت خط ‪Css‬‬

‫يوجد نوعان من أسماء عائلة الخط في ‪CSS‬‬
‫‪ : generic family‬اﻷسرة العامة‬
‫وهي مجموعة من عائﻼت الخطوط ذات مظهر مماثل مثل )"‪ "Serif‬أو‬
‫"‪("Monospace‬‬
‫‪ : font family‬خط العائلة‬
‫عائلة خطوط محددة مثل )"‪ "Times New Roman‬أو"‪( "Arial‬‬

‫تعتبر الخطوط ‪ sans-serif‬أسهل في القراءة من الخطوط ‪ serif‬على‬

‫شاشات الكمبيوتر‬

‫‪14‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Font-family‬عائلة الخط‬

‫يتم تعيين عائلة الخط من النص مع خاصية الخط اﻷسرة‪.‬‬

‫يجب أن تحمل الخاصية ‪ font-family‬عدة أسماء الخطوط كنظام‬
‫‪ "fallback".‬إذا كان المستعرض ﻻ يدعم الخط اﻷول ‪ ،‬فإنه يحاول‬
‫الخط التالي ‪ ،‬وهكذا‪.‬‬
‫مهم ‪ :‬إذا كان اسم عائلة الخطوط أكثر من كلمة واحدة ‪ ،‬يجب أن يكون‬
‫في عﻼمات اقتباس ‪ ،‬مثل‪: "Times New Roman".‬‬
‫الخطوط البديلة‪ :‬وهي التي يلجئ إليها المتصفح في حالة فشلة في قرائة‬
‫الخط الذي قمت بوضعه فتقوم بوضع مجموعة أخرى من الخطوط‬
‫احتياطيا ً وتضيف الكومه‬
‫مثال‪Arial, Tahoma, serif; /‬‬
‫مثال على الخطوط البديلة و الخط الذي اسمه يتكون من أكتر من كلمة‬

‫‪ : Font-style‬شكل الخط‬
‫يتم استخدام الخاصية ‪ font-style‬لتحديد النص المائل‪.‬‬
‫هذه الخاصية لديها ثﻼث قيم ‪:‬‬
‫] ‪[ normal & italic & oblique‬‬

‫‪15‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Font-siez‬حجم الخط‬
‫تحدد خاصية حجم الخط حجم النص‪.‬‬
‫القدرة على إدارة حجم النص مهم في تصميم الويب‪ .‬ومع ذلك ‪ ،‬يجب أﻻ‬
‫تستخدم تعديﻼت حجم الخط لجعل الفقرات تبدو مثل العناوين ‪ ،‬أو أن‬
‫العناوين تبدو مثل الفقرات‪.‬‬

‫استخدم دو ًما عﻼمات ‪ HTML‬المناسبة ‪ ،‬مثل >‪<h1> - <h6‬‬

‫للعناوين و >‪ <p‬للفقرات‪.‬‬

‫مﻼحظة‪ :‬إذا لم تقم بتعيين حجم خط ‪ ،‬يكون الحجم اﻻفتراضي‬

‫للنص العادي ‪ ،‬مثل الفقرات ‪16px (16px = 1em). ،‬‬

‫يمنحك ضبط حجم النص بالبكسل التحكم الكامل في حجم النص‬

‫والقيمة اﻹفتراضية له هي ‪medium‬‬

‫‪ default‬الخط ‪ px١٦‬فإذا كتبنا ‪ %٢٠٠‬فإنه يأخذ ‪32px‬‬
‫‪Font-siez: 32px = Font-siez :200%‬‬
‫وهكذا كل ‪16px = %100‬‬

‫تعيين حجم الخط مع ‪Set Font Size With Em : em‬‬

‫للسماح للمستخدمين بتغيير حجم النص )في قائمة المتصفح( ‪ ،‬يستخدم‬
‫العديد من المطورين ‪ em‬بدﻻً من وحدات البكسل‪.‬‬
‫يوصى باستخدام وحدة حجم ‪ em‬بواسطة‪W3C.‬‬
‫حجم النص اﻻفتراضي في المتصفحات هو ‪ ١٦‬بكسل‪ .‬لذا ‪ ،‬الحجم‬
‫اﻻفتراضي ل ‪ em ١‬هو ‪ ١٦‬بكسل يساوي ‪ em ١‬حجم الخط الحالي‪.‬‬
‫يمكن حساب الحجم من وحدات البكسل إلى ‪ em‬باستخدام هذه الصيغة ‪:‬‬
‫‪pixels / 16 = em‬‬

‫‪16‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪font-size: 2.5em; /* 40px/16=2.5em */‬‬

‫استخدم مزيج من النسبة المئوية و‪Em‬‬

‫الحل الذي يعمل في جميع المتصفحات ‪ ،‬هو تعيين حجم خط افتراضي في‬
‫النسبة المئوية لعنصر ‪<body>:‬‬

‫رمز لدينا يعمل اﻵن عظيم! فإنه يظهر نفس حجم النص في جميع‬
‫المتصفحات ‪ ،‬ويسمح لجميع المتصفحات لتكبير أو تغيير حجم النص!‬
‫حجم الخط المستجيبة‬
‫يمكن ضبط حجم النص بوحدة ‪ ، vw‬مما يعني "عرض إطار العرض"‪.‬‬
‫وبهذه الطريقة ‪ ،‬سيتبع حجم النص حجم نافذة المتصفح‪.‬‬

‫إطار العرض هو حجم نافذة المتصفح‪ vw = 1٪ ١ .‬من عرض إطار‬

‫العرض‪ .‬إذا كان إطار العرض بعرض ‪ ٥٠‬سم ‪ ،‬يكون ‪ vw 0.5 ١‬سم‪.‬‬

‫‪17‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Font-weight‬وزن الخط‬
‫‪ : bold‬سميك ‪ : bolder /‬أكثر سماكه‬
‫‪ :Lighter‬خفيف‬
‫وممكن نستخدم اﻷرقام من ‪ ١٠٠‬حتى ‪٩٠٠‬‬
‫القيمة ‪ normal‬تساوي ‪400‬‬
‫وقيمة ‪ bold‬تساوي ‪٧٠٠‬‬
‫‪ : Font Variant‬الخط البديل‬
‫تحدد خاصية ‪ font-variant‬ما إذا كان يجب عرض النص في‬
‫خط صغير الحجم‪.‬‬
‫في خط صغير ‪ ، caps‬يتم تحويل كافة اﻷحرف الصغيرة إلى أحرف‬
‫كبيرة‪ .‬ومع ذلك ‪ ،‬تظهر اﻷحرف الكبيرة المحولة في حجم خط أصغر من‬
‫اﻷحرف الكبيرة اﻷصلية في النص‪.‬‬

‫لكتابة كود كامل احترافي لل ‪ Font‬في سطر واحد‬

‫‪18‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Link‬‬
‫‪ : visited‬سبق زيارته‬
‫إي أنه اللينك اللذي قام المستخدم بالضغط عليه مسبقا ً تنفذ فيه هذه‬
‫الخصائص حتى عند عمل الرفرش‬
‫}‪a:visited{color: gray‬‬
‫فنﻼحظ أن اللينك ذي اللون اﻷبيض لم يتم‬
‫زيارته مسبقا ً فبقي كما هو‪.‬‬
‫‪ : Hover‬التحويم‬
‫بمجرد مرور مؤشر المأوس على اللينك يحدث التغيير‬
‫ويطبق ال ‪ hover‬على أي عنصر وﻻ يختص بال ‪ a‬فقط‬
‫يعني ﻻ يتربط باللينكات فقط بل أي عنصر‬

‫};‪a:hover {color:blue‬‬
‫‪ : Active‬أي أثناء الضغط على اللينك‬

‫}‪a:active {color: hotpink‬‬

‫‪ : focus‬التركيز‬
‫أي بعد الضغط على اللينك أو العنصر أعمل لي تركيز على العنصر‬
‫{ ‪input:focus‬‬
‫;‪background-color: yellow‬‬
‫}‬

‫‪19‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫وهذا هو ترتيب كتابتهم‬
‫فاﻷول يكتب ‪a:link‬‬
‫ثم يأتي بعده‬
‫‪a:vistited‬‬
‫ثم‬
‫‪a:hover‬‬
‫ثم ‪a:active‬‬
‫وأخيرا‬
‫‪a:focus‬‬

‫‪20‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫تنسيق القوائم‬
‫‪ : List-style-type‬تغيير البوينت‬
‫تحدد الخاصية نوع عﻼمة عنصر القائمة‪.‬‬
‫‪ default‬الخاص بها ‪ : disc‬نجمة‪.‬‬
‫‪ : Square‬مربع‬
‫‪ : None‬بدون أي عﻼمة‬

‫ويوجد العديد من العﻼمات سوف تجدهم في برنامج البريكتس‬

‫‪ : List-style-position‬موقع البوينت من القائمة‬
‫وهو يقوم بتحديد موقع العﻼمات " النقاط " داخل القائمة أو خارجها‬
‫‪ : Outside‬خارج المحتوى‬
‫‪ : Inside‬داخل المحتوى‬

‫‪21‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : List-style-image‬لجعل صورة أو ايكونة بدﻻً عن البيونت‬
‫;) " " ( ‪url‬‬

‫‪Shorthand‬‬
‫‪ :‬لكتابة الكود في سطر واحد فقط‬

‫الكود‬

‫الشرح‬

‫عند استخدام خاصية ‪shorthand‬‬

‫إذا كانت إحدى قيم الخاصية الموجودة أعﻼه مفقودة ‪ ،‬فسيتم إدراج القيمة‬
‫اﻻفتراضية للخاصية المفقودة ‪ ،‬إن وجدت‪.‬‬

‫‪22‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Border‬الحدود‬

‫تسمح لك خصائص حدود ‪ CSS‬بتحديد نمط وحجم ولون حد العنصر‪.‬‬

‫بعض قيم ال ‪ border‬المسموح بها‬

‫‪‬‬ ‫يحدد الحدود المنقطة ‪dotted -‬‬

‫‪‬‬ ‫يحدد حدود متقطع ‪dashed -‬‬
‫‪‬‬ ‫يعرف حد متين ‪solid -‬‬ ‫ّ‬
‫‪‬‬ ‫يحدد حدود مزدوجة ‪double -‬‬
‫‪‬‬ ‫‪groove -‬‬
‫يحدد حدودًا محززة ثﻼثية اﻷبعاد‪ .‬يعتمد التأثير على قيمة لون الحدود‬
‫‪‬‬ ‫‪ridge -‬‬
‫مخدد‪ .‬يعتمد التأثير على قيمة لون الحدود ‪D‬يحدد حدود ‪٣‬‬
‫‪‬‬ ‫يحدد حدود ثﻼثية اﻷبعاد‪ .‬يعتمد التأثير على قيمة لون ‪inset -‬‬
‫الحدود‬
‫‪‬‬ ‫يحدد حدود ثﻼثية اﻷبعاد‪ .‬يعتمد التأثير على قيمة لون ‪outset -‬‬
‫الحدود‬
‫‪‬‬ ‫ﻻ يحدد حدود ‪none -‬‬
‫‪‬‬ ‫يحدد حدود مخفية – ‪hidden‬‬

‫‪ border‬أمثلة‬
‫‪‬‬ ‫};‪p.dotted {border-style: dotted‬‬
‫};‪p.dashed {border-style: dashed‬‬
‫};‪p.solid {border-style: solid‬‬
‫};‪p.double {border-style: double‬‬
‫};‪p.groove {border-style: groove‬‬
‫};‪p.ridge {border-style: ridge‬‬
‫};‪p.inset {border-style: inset‬‬
‫};‪p.outset {border-style: outset‬‬
‫};‪p.none {border-style: none‬‬
‫};‪p.hidden {border-style: hidden‬‬
‫‪23‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪p.mix {border-style: dotted dashed solid‬‬
‫};‪double‬‬
‫‪‬‬

‫‪ : Border-width‬حجم ال‪border‬‬
‫تحدد عرض الحدود اﻷربعة‬
‫يمكن ضبط العرض كحجم معين‬
‫في ‪ ،em ،cm ،pt ، px‬إلخ‬
‫)أو باستخدام واحدة من القيم الثﻼثة المحددة مسبقًا‪ :‬رقيقة أو متوسطة أو سميكة(‪.‬‬

‫مثال‪/‬‬

‫‪24‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Border-coloer‬لون الحدود‬
‫يتم استخدام الخاصية لون الحدود لتعيين لون الحدود اﻷربعة‪.‬‬
‫يمكن ضبط اللون بواسطة‬
‫‪ - ١‬اسم اللون مباشرة مثال ‪" red" /‬‬
‫‪ – ٢‬كود اللون ‪ /‬مثال " ‪" ff0000#‬‬
‫‪ /rbg – ٣‬مثال ")‪"rgb(255,0,0‬‬
‫‪25‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫مﻼحظة‪ :‬يمكن إعطاء الون مختلفة للحدود اﻷربعة وإن تم وضع لون‬
‫واحد فسيتم توزيعه على جميع الحدود‬

‫ضا خصائص لتحديد كل من الحدود )اﻷعلى ‪ ،‬اليمين‬

‫في ‪ ، CSS‬هناك أي ً‬
‫‪ ،‬اﻷسفل ‪ ،‬واليسار(‪:‬‬

‫ويمكن كتابته بكود مختصر من قيمتين ويعطي نفس النتيجة‬

‫التفسير ‪ :‬ﻷن ‪ default‬الطبيعي لها ] فوق ‪ +‬شمال ‪ +‬تحت ‪ +‬يمين [‬

‫فعند كتابة قيمتين فقط فالمتصفح يعطي القيمة الثالثة من اﻷولى والقيمة‬
‫الرابعة تأخذها من القيمة الثانية‬

‫‪26‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫وهذا لجميع الخصائص التي تأخذ اربع قيم‬
‫مﻼحظة ‪ : ١‬وإذا تم وضع قيمة واحده فقط فسوف تطبق على جميع القيم‬
‫مﻼحظة ‪ :٢‬إذا تم وضع ثﻼث قيم فالقيمة الثانية يمين تأخذها القيمة الرابعة‬
‫يسار تلقائياً‪.‬‬

‫للحدود‬ ‫‪ : Shorthand‬الكود المخت‬

‫‪‬‬ ‫‪border-width‬‬
‫‪‬‬ ‫مطلوب)‪border-style (required‬‬
‫‪‬‬ ‫‪border-color‬‬

‫ضا تحديد جميع خصائص الحدود الفردية لجانب واحد‬

‫يمكنك أي ً‬

‫‪27‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Rounded Borders‬تقريب الحدود‬
‫يتم استخدام الخاصية‪ border-radius‬ﻹضافة حدود مستديرة إلى‬
‫عنصر‬

‫مﻼحظة‪ :‬ﻻ يتم دعم خاصية ‪ border-radius‬في ‪ IE8‬واﻹصدارات‬

‫السابقة‪.‬‬

‫‪28‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ :Margin‬الهوامش الخارجية‬

‫يتم استخدام خصائص هامش ‪ CSS‬ﻹنشاء مساحة حول العناصر ‪،‬‬

‫خارج أي حدود محددة‪.‬‬
‫ويتم بها التحكم في الهوامش الخارجية للعنصر‬
‫الجوانب الفردية‬

‫يمكن أن تحتوي كل خصائص الهامش على القيم التالية‪:‬‬

‫‪ : auto – ١‬يحسب المتصفح الهامش تلقائيا ً‬

‫‪ – ٢‬الطول ‪ :‬يحدد الهامش في ‪ ،cm ،pt ، px‬وما إلى ذلك‪.‬‬

‫‪ : % - ٣‬يحدد هام ً‬
‫شا بنسبة‪ ٪‬من عرض العنصر المحتوي‬
‫‪ : inherit – ٤‬يحدد أن الهامش يجب أن يكون موروثًا من العنصر‬
‫الرئيسي‬
‫مﻼحظة ‪:‬يمكن كتابه قيمة بالسالب للـ ‪margin‬‬

‫‪29‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪:Shorthand‬‬

‫ويكون هذا الكود اختصار هكذا‪:‬‬

‫ولو كان ال ‪ margin‬ثﻼث قيم فقط فسيكون شرحه هكذا‬

‫نﻼحظ ‪ :‬أن اليمين والشمال يأخذا نفس القيمة ‪ 50px‬كما بينا من قبل‪.‬‬
‫ولو كان ال ‪ margin‬قيمتين فقط فقط فسيكون شرحه هكذا‬

‫ولو كان ‪ margin‬قيمه واحده فستؤخذ للجميع‪.‬‬

‫‪30‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : The auto Value‬توسيط العناصر وخاصية‬

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

‫ومعنى هذا الكود‬

‫أننا نقول له أعطيني ‪ 10px‬من فوق‬
‫وباقي القيم قم أنت بتنسيقها ‪ auto‬بالتساوي‬
‫القيمة الموروثة‪The inherit Value :‬‬
‫يسمح هذا المثال بتوارث الهامش اﻷيسر لعنصر >"‪<p class = "ex1‬‬
‫من العنصر الرئيسي‪(<div>):‬‬

‫‪31‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫انهيار الهوامش ‪Margin Collapse :‬‬
‫أحيانًا يتم طي هوامش العلوية والسفلية للعناصر في هامش واحد يساوي‬
‫أكبر الهوامش‪.‬‬
‫هذا ﻻ يحدث في هوامش اليمين واليسار! فقط الهوامش العلوية والسفلية!‬

‫في المثال أعﻼه ‪ ،‬يحتوي العنصر >‪ <h1‬على هامش سفلي مقداره ‪٥٠‬‬
‫بكسل ويحتوي العنصر >‪ <h2‬على مجموعة هامش أعلى بقيمة ‪٢٠‬‬
‫بكسل‪.‬‬
‫يبدو أن الحس السليم يشير إلى أن الهامش الرأسي بين >‪ <h1‬و >‪<h2‬‬
‫نظرا ﻻنهيار الهامش‬
‫سيكون إجمالي ‪ px (50px + 20px). ٧٠‬ولكن ً‬
‫‪ ،‬ينتهي الهامش الفعلي بكونه ‪ ٥٠‬بكسل‪.‬‬

‫‪32‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Padding‬الهوامش الداخلية‬
‫يتم استخدام خصائص ‪ padding CSS‬ﻹنشاء مساحة حول محتوى عنصر‬
‫داخل أي حدود معرفة‪.‬‬

‫ويتم بها التحكم في الهوامش الداخلية للعنصروتتم كتابته بنفس طريقة ال‬
‫‪ margin‬وممكن كتابتها منفردة مثل ‪margin‬‬

‫يمكن أن تحتوي جميع خصائص المساحة على القيم التالية‪:‬‬

‫‪ – ١‬الطول ‪ :‬يحدد الهامش في ‪ ،cm ،pt ، px‬وما إلى ذلك‪.‬‬

‫‪ : % - ٢‬يحدد هام ً‬
‫شا بنسبة‪ ٪‬من عرض العنصر المحتوي‬
‫‪ : inherit – ٣‬يحدد أن الهامش يجب أن يكون موروثًا من العنصر‬
‫الرئيسي‬

‫‪33‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫مﻼحظة‪ :‬القيم السلبية غير مسموح بها‪.‬مثل ال ‪ margin‬ﻷنه هامش داخلي عكس‬
‫ال ‪ margin‬فهو هامش خارجي‪.‬‬

‫‪Shorthand‬‬
‫وهو نفس ما قمنا بشرحه في ال ‪ margin‬من طريقة التعامل‬

‫ويكون هذا الكود اختصار هكذا‪:‬‬

‫وهكذا إذا كانوا ثﻼث قيم أو قيمتين أو قيمة واحده‪.‬‬

‫‪Padding and Element Width‬‬
‫الهامش الداخلي وعنصر العرض‬

‫تحدد خاصية عرض ‪ CSS‬عرض مساحة محتوى العنصر‪ .‬منطقة المحتوى هي‬
‫الجزء الموجود داخل المساحة ‪ ،‬والحدود ‪ ،‬والهامش لعنصر‬
‫لذا ‪ ،‬إذا كان للعنصر عرض محدد ‪ ،‬فسيتم إضافة المساحة المضافة إلى هذا‬
‫العنصر إلى العرض الكلي للعنصر‪ .‬هذا غالبا ما يكون نتيجة غير مرغوب فيها‪.‬‬
‫في المثال التالي ‪ ،‬يكون عنصر >‪<div‬‬
‫في المثال التالي ‪ ،‬يتم عرض العنصر >‪ <div‬بعرض ‪ ٣٠٠‬بكسل‪ .‬ومع ذلك ‪،‬‬
‫فإن العرض الفعلي للعنصر >‪ <div‬سيكون ‪ ٣٥٠‬بكسل )‪ ٣٠٠‬بكسل ‪٢٥ +‬‬
‫بكسل من الحشو اﻷيسر ‪ ٢٥ +‬بكسل من المساحة اليمنى(‪:‬‬

‫‪34‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫شرح المثال‪/‬‬
‫أن ‪ padding‬عندما يعطي للعنصر فإنه يقوم بزيادة مساحة ال ‪width‬‬
‫فإن كان ال ‪ width‬مثﻼ ‪ ٣٠٠ :‬بيكسل ‪ ٢٥ : padding +‬بيكسل‬
‫فستكون مساحة ال ‪ width‬في المتصفح ‪ ٣٥٠‬بيكسل‪.‬‬

‫ولحل هذه اﻹشكالية فإننا نقوم بإستخدام ‪box-sizing‬‬

‫‪35‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Dimension‬اﻷبعاد‬
‫‪ : Width‬العرض‬

‫تحدد خاصية العرض عرض عنصر‬

‫ﻻ يشمل عرض العنصر ‪ padding‬أو ‪ border‬أو ‪margin‬‬
‫مﻼحظة ‪ :‬تتجاوز خصائص ‪ min-width‬و ‪ max-width‬خاصية العرض‪.‬‬

‫‪ : Min-widht‬أقل عرض‬
‫‪ : max-widht‬أكبر عرض‬
‫‪Property Values‬‬
‫‪ width Default value - ١‬وهي ‪ auto‬و هي كامل عرض الصفحة‬
‫‪ – ٢‬يحدد العرض ب ‪ px‬و ‪ cm‬و ‪etc‬‬
‫‪ - ٣‬ويمكن كتابة ‪ min&max-widht‬بالنسبة المئوية ‪0%‬‬

‫‪ : Inherit‬يرث هذه الخاصية من العنصر الرئيسي‬

‫‪: Height‬اﻹرتفاع‬

‫تحدد خاصية اﻻرتفاع ارتفاع عنصر‪.‬‬

‫ﻻ يشمل ارتفاع العنصر ‪ padding‬أو ‪ border‬أو ‪margin‬‬

‫إذا كان اﻻرتفاع ‪: auto‬؛ سيقوم العنصر بتعديل ارتفاعه تلقائيًا للسماح بعرض‬
‫المحتوى الخاص به بشكل صحيح‪.‬‬
‫إذا تم ضبط اﻻرتفاع على قيمة رقمية مثل ] البكسل ‪ ،(r) ،‬النسب المئوية [‪ ،‬إذا‬
‫كان المحتوى ﻻ يتناسب مع اﻻرتفاع المحدد ‪ ،‬فسيتم تجاوزه ‪ ،‬يتم تعريف كيفية‬
‫معالجة الحاوية للمحتوى الفائض بواسطة الخاصية‪overflow‬‬

‫‪36‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫مﻼحظة‪ :‬تتجاوز خصائص ‪ min-height‬و ‪ max-height‬خاصية اﻻرتفاع‪.‬‬

‫‪ : Min-height‬أقل ارتفاع‬
‫‪ : max-height‬أكبر ارتفاع‬

‫‪Property Values‬‬
‫‪ auto - ١‬يحسب المتصفح اﻻرتفاع‪ .‬هذا هو اﻻفتراضي‬

‫‪ – ٢‬يحدد اﻷرتفاع ب ‪ px‬و ‪ cm‬و ‪etc‬‬

‫‪ - ٣‬ويمكن كتابة ‪ min&max-height‬بالنسبة المئوية ‪0%‬‬

‫‪ : Inherit‬يرث هذه الخاصية من العنصر الرئيسي‬

‫‪Display‬‬
‫‪inline & block & nano‬‬

‫خاصية العرض هي خاصية ‪ CSS‬اﻷكثر أهمية للتحكم في التخطيط‪.‬‬

‫تحدد خاصية العرض ما إذا كان ‪ /‬يتم عرض العنصر‪.‬‬
‫يحتوي كل عنصر ‪ HTML‬على قيمة عرض افتراضية بنا ًء على نوع العنصر‪.‬‬
‫قيمة العرض اﻻفتراضية لمعظم العناصر هي ‪block or inline.‬‬
‫تحدد خاصية ‪ display‬سلوك العرض )نوع مربع التجسيد( الخاص بعنصر‪.‬‬
‫في ‪ ، HTML‬يتم أخذ قيمة خاصية العرض اﻻفتراضية من مواصفات ‪ HTML‬أو‬
‫من المستعرض أو ورقة أنماط المستخدم اﻻفتراضية‪ .‬القيمة اﻻفتراضية في ‪XML‬‬
‫مضمنة ‪ ،‬بما في ذلك عناصر‪SVG.‬‬

‫‪ Display: nano‬يقوم بإخفاء العنصر من الصفحة‬

‫تقوم بإخفاء العناصر ويستفاد منها في الجيكويري‬

‫‪37‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Block‬‬
‫يبدأ عنصر مستوى الكتلة دائ ًما على سطر جديد ويأخذ العرض الكامل متا ًحا )يمتد‬
‫إلى اليسار واليمين قدر اﻹمكان(‪.‬‬

‫أمثلة لعناصر ‪: block‬‬

‫‪Inline‬‬

‫كبيرا فقط حسب الضرورة‪.‬‬

‫ً‬ ‫ضا‬
‫ﻻ يبدأ عنصر مض ّمن في سطر جديد ويستهلك عر ً‬

‫أمثلة على عناصر ‪: inline‬‬

‫;‪Display: none‬‬
‫يستخدم بشكل شائع مع ‪ JavaScript‬ﻹخفاء العناصر وعرضها دون حذفها‬
‫وإعادة إنشائها‪.‬‬
‫وهو يقوم بإخفاء العناصر من الصفحة دون ترك أثر لها كأنها غير موجودة في‬
‫الصفحة‬

‫ﻻحظ ‪ :‬كيف تم إخفاء عنصر >‪ <h1‬من الصفحة ولم يترك له أثر فيها نهائياً‪.‬‬

‫‪38‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫;‪ visibility:hidden‬أيضا ً يقوم بإخفاء العناصر ولكن أثرها يكون‬
‫موجود في الصفحة‬

‫نﻼحظ ‪ :‬في هذا المثال أنه تم إخفاء >‪ <h1‬ولكن مازالت مساحته المتصفح محتفظ‬
‫بها عكس ;‪display : none‬‬

‫الفرق بين عناصر ‪inline & block‬‬

‫‪ :Inline‬معناها أنها عناصر تكون على خط واحد‬
‫مثل ‪link + span + strong + b (bold txet) + em(emphasis) /‬‬
‫‪+ i(italic txet) + img‬‬
‫‪ :Block‬معناها أنها عناصر تكون على سطر منفصل لوحدها‬
‫وﻻ تأتي بجوار عناصر ال ‪ inline‬ما لم يتم التعديل فيه‬
‫مثل ‪ div + h1 + p /‬وغيرها‬
‫فعنصر ال ‪ block‬فيعطي مسافة قبله ومسافة بعده‬

‫‪ -١‬العناصر ‪ inline‬تأخذ العرض ‪ width‬بمقدار الكﻼم المكتوب فقط وﻻ‬

‫تتعداه‬
‫عكس العناصر ال ‪ bolock‬فإنها تأخذ كامل عرض الصفحة‬
‫‪– ٢‬العناصر ‪ inline‬تأخذ الهوامش ‪ margin‬من ال اليسار واليمين فقط‬
‫بينما العناصر ‪ bolock‬تأخذ ال ‪ margin‬من جميع الجهات‬

‫‪39‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
‫‪ – ٣‬العناصر ‪ inline‬ﻻ تعترف بال ‪ height‬اﻹرتفاع الخاص بالعناصر‬
‫ال ‪block‬‬
‫‪ – ٤‬عند اضافة ‪ float‬لعناصر ال ‪ inline‬تتحول تلقائيا ل ‪ block‬لكنه ﻻ‬
‫يأخذ ال ‪ full weidht‬الخاص ب ‪block‬‬
‫ﻻ يصلح أن أكتب داخل ال ‪ span‬برجراف كبير ﻻ يخرج بشكل جيد‬
‫العناصر ‪inline-block‬‬
‫تأخذ خواص ال ‪ inline & block‬ما عدا ‪ fullwidth‬وهذا كي يأتي‬
‫العنصرين بجوار بعضهما‬
‫ومن عيوب عناصر ‪ inline-block‬أنه يضع مسافة بينه وبين العنصر‬
‫الذي بجواره على نفس السطر‬
‫واﻷفضل استخدام ‪ float‬لجعل العناصر بجوار بعضها أفضل من‬
‫‪inline-block‬‬
‫‪display:inline-block‬‬
‫وتكون هذه العناصر تأخذ خصائص اﻹنﻼين‬
‫وكذلك تأخذ خصائص ال ‪block‬‬

‫‪40‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Position‬‬

‫من أهم دروس ال‪ CSS‬وأهم شئ هينفع في التصميم‪ ،‬وسوف يجعلك تتحكم‬
‫في العنصر أكثر من التحكم العادي الذي يعطيه لك ‪CSS‬‬
‫هناك ‪ ٥‬قيم مختلفة ‪position‬‬
‫يتم التحكم في العناصر مع القيم بواسطة‬
‫] ‪[ top, bottom, left, right‬‬

‫‪ : Static‬ثابته‬
‫تكون عناصر ‪ html‬بشكل افتراضي ثابته ‪static‬‬
‫;‪position:static‬‬
‫ﻻ تتأثر العناصر الثابتة ‪ static‬بالخصائص اﻷعلى واﻷسفل واليسار واليمين‪.‬‬

‫‪ : Fixed‬ثابت‬
‫;‪position:fixed‬‬
‫يقوم بثبيت العنصر في الصفحة وﻻ يتحرك مع تحرك السكرول للصفحة‬
‫يتم استخدام الخصائص ] ‪ [ Top Right Bootom Left‬لوضع العنصر‬

‫‪41‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Relative‬‬
‫سيؤدي ضبط الخصائص العلوية والسفلية واليمنى واليسرى لعنصر ذو وضع نسبي‬
‫إلى تعديله بعيدًا عن موضعه الطبيعي‪.‬‬
‫لن يتم تعديل المحتوى اﻵخر ليتناسب مع أي فجوة خلفها العنصر‪.‬‬
‫ﻻ يقوم بثبيت العنصر في الصفحة بل يأخذ قيمته فقط‬

‫ﻻحظ ‪ :‬كيف خرج العنصر ‪ relative‬خارج المتصفح ولم يتم تعديل المحتوى‬
‫ليتناسب مع الفجوة التي أحدثها‬
‫‪ : Absolute‬وضع مطلق‬
‫يتم وضعه بالنسبة إلى أقرب موضع تموضع فيه )بدﻻً من وضعه بالنسبة إلى منفذ‬
‫العرض ‪ ،‬مثل ‪.(fixed‬‬
‫ومع ذلك؛ إذا لم يكن للعنصر المطلق موقعًا له أسﻼف متموضع ‪ ،‬فإنه يستخدم نص‬
‫المستند ‪ ،‬ويتحرك مع تمرير الصفحة‪.‬‬
‫مﻼحظة ‪ :‬العنصر "الموضع" هو الذي يكون موضعه أي شيء ما عدا ‪.static‬‬

‫يثبت في الصفحة ولكنه ﻻ ينزل معك في السكرول‬

‫‪42‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Sticky‬لزج‬
‫;‪position: sticky‬‬
‫يتم وضعه بنا ًء على موضع التمرير الخاص بالمستخدم‪.‬‬
‫تبديل عنصر لزج بين ‪ relative‬و‪ ، fixed‬اعتمادا على موقف التمرير‪.‬‬
‫يتم وضعه نسبيًا حتى يتم استيفاء موضع إزاحة معين في إطار العرض ‪ -‬ثم يتم‬
‫"التمسك" في مكانه )مثل ‪.(position:fixed‬‬
‫فائدة‪ :‬هو يجعل العنصر يتحرك معك في الصفحة ثم يقوم بتثبيته فيها‬

‫مﻼحظة ‪ :‬لكي يعمل مع ‪ Safari‬فإنه يتطلب ‪-webkit- prefix‬‬

‫ﻻ يدعم ‪ Internet Explorer‬و ‪ Edge 15‬واﻹصدارات اﻷقدم المواقع الثابتة‬

‫‪43‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Float‬العائم‬
‫تحدد خاصية ‪ float CSS‬كيفية تعويم العنصر‪.‬‬

‫يتم استخدام الخاصية العائمة لتحديد المواقع والتخطيط على صفحات الويب‪.‬‬
‫يمكن أن تحتوي الخاصية ‪ float‬على إحدى القيم التالية ‪:‬‬
‫‪ : Left‬العنصر يطفو على يسار الحاوية الخاصة به ;‪float:left‬‬

‫‪ : Right‬العنصر يطفو على يمين الحاوية الخاصة به ;‪Float:right‬‬

‫‪ : None‬ﻻ يطفو العنصر )سيتم عرضه فقط حيث يحدث في النص(‪ .‬هذا هو‬
‫‪ default‬القيمة اﻹفتراضية لل ‪ float‬هي ‪none‬‬

‫‪ : Inherit‬يرث العنصر قيمة عائم اﻷصل الخاص به‬

‫‪44‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫ميزة ال ‪ float‬أنه ياتي بالعناصر بجوار بعض ‪ ،‬فإذا قمت بحذف عنصر ياتي‬
‫مكانه عنصر اخر‬
‫إذا أردنا ان ناتي بنص فقط أو كلمات معدودة على اليسار نستخدم ‪float‬‬
‫ونستخدم ‪span‬‬
‫مثال ‪ /‬نستطيع بال ‪ float‬أن نجعل عبارة المشاهدة على اليمين في حين العنوان‬
‫الرئيسي على اليسار كما هو وهذا ﻻ نستطيع أن نفعله ب ‪ text-aling‬نهائيا ً‬

‫التطبيق‪Css‬‬

‫‪html‬‬

‫‪ : clear‬يحذف ‪float‬‬
‫تحدد الخاصية ‪ clear CSS‬العناصر التي يمكن أن تطفو بجانب العنصر الذي‬
‫تم تطهيره وعلى أي جانب‪.‬‬

‫يمكن أن تحتوي الخاصية ‪ clear‬على إحدى القيم التالية‪:‬‬

‫‪ : None‬يسمح العناصر العائمة على كﻼ الجانبين‪ .‬هذا هو ‪default‬‬

‫‪ : Left‬ﻻ يسمح بعناصر متحركة على الجانب اﻷيسر ;‪Clear:left‬‬

‫‪ : Right‬ﻻ يسمح بالعناصر العائمة على الجانب اﻷيمن ;‪clear:right‬‬

‫‪ : Both‬ﻻ يسمح بعناصر متحركة على اليسار أو الجانب اﻷيمن ;‪clear:both‬‬

‫‪ : Inherit‬يرث العنصر القيمة الواضحة ﻷصله الرئيسي‬

‫عا ﻻستخدام الخاصية ‪ clear‬هي بعد استخدام خاصية‬

‫الطريقة اﻷكثر شيو ً‬
‫‪ float‬على عنصر‪.‬‬

‫‪45‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫عند إزالة العوامات ‪ ،‬يجب أن تتطابق مع مسح العوامة ‪.‬إذا تم تعويم عنصر إلى‬
‫اليسار ‪ ،‬فعليك مسح إلى اليسار ‪.‬سيستمر العنصر ‪ floated‬في التعويم ‪ ،‬ولكن‬
‫سيظهر العنصر الذي تم مسحه أسفله في صفحة الويب‪.‬‬
‫المثال التالي يزيل التعويم إلى اليسار‪ .‬يعني أنه ﻻ توجد عناصر عائمة مسموح بها‬
‫على الجانب اﻷيسر( من‪(div):‬‬

‫تم استخدام ‪ clear:left‬مع ‪div4‬‬

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

‫نﻼحظ أننا استخدمنا ;‪ overflow:auto‬مع ‪ div‬الذي يحتوي على ‪ img2‬وهذا‬

‫حتى ﻻ تخرج الصورة عن المحتوى الخاص به ولم يتم استخدامها مع ‪img1‬‬
‫فنﻼحظ أنها خرجت عن محتوى ‪div‬‬

‫‪46‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
‫\الخﻼصة ‪ :‬يمكننا إضافة ;‪ overflow: auto‬؛ لحل مشكلة خروج العنصر‬
‫عن المحتوى عند استخدام ‪float‬‬

‫‪ : The overflow:auto clearfix‬يعمل بشكل جيد طالما أنك قادر على السيطرة على‬
‫هوامشك وحشوها‬
‫ومع ذلك ‪ ،‬فإن اﻻختراق الجديد ‪ ،clearfix hack ،‬آمن لﻼستخدام ‪ ،‬ويتم استخدام الكود التالي‬
‫لمعظم صفحات الويب‪:‬‬

‫وهذا لعدم خروج العناصر التي تم استخدام‬

‫‪ float‬لها عن المحتوى‬

‫وطريقة كتابته في >‪html<div class="clear"></div‬‬

‫مثال تطبيقي‬
‫لحذف ‪ float‬بين العنصرين والبدء من جديد‬

‫‪47‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫طالما العناصر في نفس ‪ container‬فﻼبد من عمل ‪ clear‬لحسن التنسيق‬
‫مع خاصية العوامة ‪ ،‬من السهل تعويم الصور جنبًا إلى جنب‪:‬‬

‫استخدم تعوي ًما مع قائمة باﻻرتباطات التشعبية ﻹنشاء قائمة أفقي‪:‬‬

‫ضا إجراء تخطيطات ويب كاملة باستخدام خاصية‪Float:‬‬

‫من الشائع أي ً‬
‫‪48‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Overflow‬‬

‫تتحكم الخاصية ‪ overflow‬لـ ‪ CSS‬بما يحدث للمحتوى كبير جدًا بحيث ﻻ‬

‫يتناسب مع منطقة معينة‪.‬‬

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

‫‪ .Default : visible‬ﻻ يتم قص الفائض‪ .‬يتم عرضه خارج مربع العنصر‬

‫بشكل افتراضي ‪ ،‬يكون الفائض مرئيًا ‪ ،‬بمعنى أنه ﻻ يتم قصه وعرضه خارج‬
‫مربع العنصر‪:‬‬

‫‪ : hidden‬يتم قص الفائض ‪ ،‬وسيكون باقي المحتوى‬

‫غير مرئي‬
‫باستخدام القيمة المخفية ‪ ،‬يتم قص الفائض‬
‫‪ ،‬ويتم إخفاء بقية المحتوى من الصفحة ويختفي‬
‫كذلك مكانه منها‪.‬‬

‫‪49‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
‫‪ : scroll‬يتم قص الزائد ‪ ،‬ولكن تتم إضافة شريط التمرير لرؤية بقية المحتوى‬
‫تعيين القيمة للتمرير ‪ ،‬يتم قص الفائض‬
‫ويتم إضافة شريط التمرير للتمرير داخل المربع‬
‫ﻻحظ أن هذا سيضيف شريط التمرير أفقيا ً ورأسيا ً‬

‫)حتى إذا لم تكن بحاجة إليه(‬

‫‪ : auto‬في حالة اقتصاص التجاوز ‪ ،‬يجب إضافة شريط تمرير لرؤية بقية‬
‫المحتوى‬
‫تشبه القيمة التلقائية التمرير‬
‫‪ ،‬فقط تضيف أشرطة التمرير عند الضرورة‬

‫القيمة اﻹفتراضية له ‪ visible‬يعني ظاهر وعكسها ‪ hidden‬يعني مخفي‬

‫مﻼحظة‪ :‬تعمل الخاصية ‪ overflow‬فقط لعناصر الحظر ذات اﻻرتفاع المحدد‪.‬‬
‫مﻼحظة‪ :‬في نظام ) ‪ OS X Lion‬على نظام التشغيل ‪ ، (Mac‬يتم إخفاء أشرطة‬
‫التمرير افتراضيًا وتظهر فقط عند استخدامها( على الرغم من ضبط ‪"overflow:‬‬
‫‪scroll").‬‬

‫‪overflow-x and overflow-y‬‬

‫تحدد خصائص ‪ overflow-x‬و‪ overflow-y‬ما إذا كنت تريد تغيير‬
‫تدفق المحتوى فقط أفقيًا أو رأسيًا )أو كليهما(‬
‫‪ :overflow-x‬يحدد ما يجب فعله مع الحواف اليمنى ‪ /‬اليمنى للمحتوى‪.‬‬

‫‪ : overflow-y‬يحدد ما يجب القيام به مع الحواف العلوية والسفلية للمحتوى‬

‫‪50‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Visibility‬‬
‫تحدد خاصية ‪ visibility‬ما إذا كان عنصر ما مرئيًا أم ﻻ‪.‬‬
‫نصيحة‪ :‬تشغل العناصر المخفية مساحة على الصفحة‪ .‬استخدم خاصية ‪display‬‬
‫ﻹخفاء عنصر وإزالته من تخطيط المستند!‬

‫‪ : Visible‬القيمة اﻻفتراضية ‪ .Default‬العنصر مرئي‬

‫‪ : Hidden‬العنصر مخفي )ولكنه ﻻ يزال يشغل مساحة(‬
‫‪ : Collapse‬فقط لصفوف الجدول )>‪ ، (<tr‬مجموعات الصفوف )>‪ ، (<tbody‬اﻷعمدة‬
‫)>‪ ،(<col‬مجموعات اﻷعمدة‪(<colgroup>).‬‬
‫تقوم هذه القيمة بإزالة صف أو عمود ‪ ،‬ولكنها ﻻ تؤثر على تخطيط الجدول‪.‬‬
‫ستكون المساحة التي يتم التقاطها بواسطة الصف أو العمود متاحة للمحتوى اﻵخر‪.‬‬
‫إذا تم استخدام اﻻنهيار على عناصر أخرى ‪ ،‬فسيتم عرضه كـ "مخفي"‬

‫‪ : Initial‬يعيّن هذه الخاصية إلى قيمتها اﻻفتراضية‬

‫‪ : inherit‬يرث هذه الخاصية من العنصر الرئيسي‬

‫عند استخدام ‪ hidden‬العنصر يختفي ويظل حاجز مكانه في الورك فلو‬

‫ولكن إذا استخدمنا ‪ display:nano‬فسوف يختفي العنصر ويختفي مكانه من‬
‫التصميم تماما ً‬

‫‪51‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Grouping‬‬

‫وهو عمل جروب لمجموعة كﻼسات مشتركة في خاصية الواحده‬

‫كمثﻼً مجموعة أكواد مشتركة في لون واحد أو ‪ font‬واحد‬
‫فنقوم بتجميع الخواص المشتركة في جروب واحد لسهولة لتعديل عليها‬
‫والصور بعدين‬
‫‪.class, .class‬فهذه الكﻼسات لعناصر مختلفة‬

‫ولكنها متفقة في خصائص معينة‬

‫فنضيفها ونكتب بينهم الكوما‪,‬‬

‫‪Nesting‬‬

‫أما لزيادة تحديد العنصر المراد عمل خصائص معينة لها فنقوم بتتبع العنصر‬
‫وتحديده أكثر‬
‫كما في الكﻼس‪.container p‬فهذا يعني تحديد البرجراف الذي هو بداخل ال‬
‫‪class container‬‬

‫‪52‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫ويمكن كذلك عمل‪ grouping‬مع ‪ nesting‬في حالة اشتراك الخصائص‬
‫فنشاهد هنا أن الخصائص مشتركة بين‬
‫البرجراف في الكﻼس اﻷول وكذلك‬
‫البرجراف في الكﻼس الثاني‬

‫عند عمل كﻼس داخل القائمة فعند كتابته يكتب مباشرة في ‪ CSS‬من دون مسافة‬
‫حتى يعمل‬
‫مثال‪/‬‬

‫‪Z-Index‬‬

‫تحدد خاصية ‪ z-index‬ترتيب مكدس عنصر‪.‬‬

‫يوجد دائما ً عنصر يحتوي على ترتيب أكبر للمكدس أمام عنصر به ترتيب رصة‬
‫أقل‪.‬‬
‫مﻼحظة‪ :‬يعمل ‪ z-index‬فقط على العناصر الموضعية‬
‫] ‪position:absolute‬‬
‫‪[,position:relative,position:fixed‬‬
‫وهو نظام الطبقات ‪،‬يعلمك كيف تضع عنصر فوق الثاني ‪،‬أو كيف أضع عنصر‬
‫اسفل العنصر اﻷخر ومن له اﻷولوية ‪ ،‬وأي عنصر يكون مشاهد لي وأي عنصر‬
‫يكون مختفي خلف اﻷخر‪.‬‬
‫‪ Z-index‬يشتغل مع ‪ Position‬وباﻷرقام في ترتيب العناصر‬

‫‪ : Auto‬يضبط ترتيب المكدس مساويا ً لوالديه‬

‫‪ .‬هذا هو اﻻفتراضي ‪default‬‬

‫‪53‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Namber‬لتعيين ترتيب المكدس للعنصر‪ .‬اﻷرقام السلبية مسموح بها‬

‫‪ : Initial‬يعيّن هذه الخاصية إلى قيمتها اﻻفتراضية‬

‫‪ : Inherit‬يرث هذه الخاصية من العنصر الرئيسي‬

‫مثال‬

‫فأعلى رقم مثﻼً ‪ ١٢‬يكون هو العنصر اللذي يظهر‬

‫اوﻻ ثم الرقم اﻷقل يكون هو العنصر الثاني وهكذا‬

‫‪54‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Content‬المحتوى‬
‫وتتم بواسطتها كتابة محتوى ولكن داخل ال ‪ CSS‬من غير كتابته داخل ال ‪html‬‬

‫يتم استخدام الخاصية ‪ content‬مع ‪ :: before‬و ‪، :: after‬‬

‫‪ pseudo-elements‬ﻹدراج المحتوى الذي تم إنشاؤه‪.‬‬
‫مﻼحظة‪ content :‬له مستويات متقدمة جدا ً لم تذكر في هذا الكورس‬

‫‪: : after‬‬

‫يدرج ‪ ::after selector‬شيئا بعد محتوى كل عنصر )عناصر( محدد‪.‬‬

‫استخدم خاصية المحتوى لتحديد المحتوى المراد إدراجه‪.‬‬

‫‪: : before‬‬

‫يقوم الخيار " ‪ " ::before‬بإدراج شيء ما قبل محتوى كل عنصر محدد‬
‫استخدم خاصية المحتوى لتحديد المحتوى المراد إدراجه‪.‬‬

‫‪55‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Property Values content‬‬
‫‪ : Normal‬القيمة اﻻفتراضية‪ .‬لتعيين المحتوى ‪ ،‬إذا تم تحديده ‪ ،‬إلى الوضع العادي ‪ ،‬ويكون‬
‫اﻹعداد اﻻفتراضي هو "بﻼ" )وهو ﻻ شيء(‬

‫‪ : None‬يضبط المحتوى ‪ ،‬إذا تم تحديده ‪ ،‬إلى ﻻ شيء‬

‫ونتيجته نفس المثال السابق‬

‫‪ :Counter‬يضبط المحتوى كعداد‬

‫‪56‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫)‪ :Attr(attribute‬لتعيين المحتوى كأحد سمات المحدد‬

‫‪ :String‬يضبط المحتوى على النص الذي تحدده‬

‫نﻼحظ أننا ﻻ نستطيع تحديد النص بالماوس وﻻ نستطيع نسخة‬

‫‪ :Open-quote‬لتعيين المحتوى ليكون اقتبا ًسا لﻺفتتاح‬

‫‪ :Close-quote‬لتعيين المحتوى ليكون اقتبا ً‬

‫سا لﻺغﻼق‬

‫‪ :No-open-quote‬يزيل عﻼمة اقتباس اﻻفتتاح من المحتوى ‪ ،‬إذا تم تحديدها‬

‫‪ :No-close-quote‬يزيل اﻻقتباس الختامي من المحتوى ‪ ،‬إذا كان محددًا‬

‫‪57‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫)‪ :url(url‬يضبط المحتوى ليكون نو ً‬
‫عا من الوسائط )صورة ‪ ،‬صوت ‪ ،‬فيديو‬
‫‪ ،‬إلخ( جربه»‬

‫‪ :initial‬يعيّن هذه الخاصية إلى قيمتها اﻻفتراضية‬

‫‪ :inherit‬يرث هذه الخاصية من العنصر الرئيسي‬

‫نﻼحظ‪ :‬أن ال ‪ content‬المحتوى يأتي بعد ال ‪ div‬و أنه ‪inline‬‬

‫كذلك إذا قمنا بعمل تحديد للنص ال ‪ content‬فإنه ﻻ يعمل تحديد له ﻷنه ليس ب‬
‫‪ text‬في الصفحة وإنما هو نص في ال ‪css‬‬

‫نﻼحظ‪ :‬أن القيم التي يأخذها ال ‪ div‬تطبق على ‪after & before content‬‬
‫وإن تمت كتابة قيم لهما فإنهما تطبق عليهما وﻻ يأخذوا قيم ال ‪div‬‬

‫إضافات عن ‪ after‬من درس د‪.‬نور حمصي‬

‫المتصفحات الحديثة تقرأ ‪ ::after‬ما عدى اﻷنترنت أكسبلولر‬

‫‪58‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Cursor‬‬

‫تحدد خاصية ‪ cursor‬مؤشر الماوس الذي سيتم عرضه عند اﻹشارة فوق‬
‫عنصر‪.‬‬

‫يمكن لـ ‪ CSS‬إنشاء مجموعة من مؤشرات الماوس المختلفة‪:‬‬

‫‪59‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪Outline‬‬

‫ً‬
‫"بارزا‪".‬‬ ‫المخطط العام هو خط يتم رسمه حول عناصر ‪ ،‬خارج الحدود ‪ ،‬لجعل العنصر‬
‫ﻻ يحسب من مساحة العنصراللذي تعمل عليه‬
‫خاصية المخطط التفصيلي هي خاصية اختصار لتعيين الخصائص التالية‬

‫إذا تم حذف لون المخطط التفصيلي ‪ ،‬فسيكون اللون المطبق هو لون النص‪.‬‬
‫ويسري عليه نفس خصائص ال ‪border‬‬

‫‪60‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪CSS Selector Reference‬‬

‫في ‪ ، CSS‬تكون المحددات هي اﻷنماط المستخدمة لتحديد العنصر )العناصر(‬

‫الذي تريد نمطه‪.‬‬
‫عﻼمة النجمة ) * (‬
‫وهي تعني العموم أي كامل وكل الصفحة‬

‫نﻼحظ في المثال‪ /‬أنه عند استخدام ال * فإنه قام بتطبيق الخصائص على كل‬
‫الروابط التي بداخلها رابط دكتور نور‬

‫‪ element‬وهي تعنى عنصر ويقصد بها كل العناصر‬

‫فعند كتابة ‪ h1‬في ‪ css‬فهي تعنى كل ‪ h1‬ما لم يضف اليها ‪id & class‬‬

‫‪div, p : element,element‬‬

‫والعن‬ ‫حدد العن‬

‫حدد جميع العناصر >‪ <h1‬وأضفها وجميع عناصر >‪<p‬‬

‫‪div p : element element‬‬

‫داخل عن‬ ‫حدد العن‬

‫تحديد كل عنصر >‪ <p‬داخل عناصر >‪ <div‬ونمطه‪:‬‬

‫‪61‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪div > p element > element‬‬
‫يتم استخدام العنصر > محدد العناصر لتحديد العناصر ذات اﻷصل المحدد‪.‬‬
‫ومعناها طبق لي هذه الخصائص على العنصر الذي يقع مباشرة في داخل هذا‬
‫العنصر اﻷب‬

‫مﻼحظة ‪ :‬ﻻ يتم تحديد العناصر التي ﻻ تكون مباشرة تابعة للوالد المحدد‪.‬‬

‫‪div + p element + element‬‬

‫وهي تعني العنصر الذي بعده مباشرة طبق عليه‬

‫وهي تعني أن أول براجراف بعد ‪ div‬مباشرة ً طب عليه هذه الخصائص‬

‫‪p ~ ul : element1~element2‬‬
‫ومعناها أن العناصر الذي تأتي بعده طبق عليها هذه الخصائص أما العناصر التي‬
‫تأتي قبله ﻻ تطبق عليها هذه الخصائص‬

‫ومعناه أن أي براجراف يأتي بعد ال ‪ div‬طب عليه الخصائص أما من ياتي قبله‬
‫فﻼ تطب عليه الخصائص‪.‬‬

‫]‪ [attribute‬عﻼمة ] [‬
‫يستخدم لتحديد العناصر ذات السمة المحددة‬
‫وتستخدم في استهداف ‪ attributes‬معينه‬

‫‪62‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫]‪[attribute^=value‬عﻼمة ) ^ (‬
‫وهي تعنى أن تقوم بتنفيذ الخصائص في ‪ attributes‬التي ببدايتها شيء معين‬
‫يتطابق المحدد مع كل عنصر تبدأ قيمته بقيمة محددة‪.‬‬

‫]‪ [attribute$=value‬عﻼمة ) ‪( $‬‬

‫وهي تعنى أن تقوم بتنفيذ الخصائص في ‪ attributes‬التي بنهايتها شيء معين‬
‫يتطابق المحدد مع كل عنصر تنتهي قيمة صحته بقيمة محددة‪.‬‬

‫‪63‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫]‪[attribute=value‬‬
‫يستخدم لتحديد العناصر ذات السمة والقيمة المحددة‪.‬‬

‫‪first-letter‬‬
‫يستخدم ﻹضافة نمط إلى الحرف اﻷول من المحدد المحدد‪.‬‬

‫‪: first-line‬‬

‫ومعناها السطر اﻷول من الصفحة يطبق عليه هذه الخصائص‬

‫‪64‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : first-child‬معناها أول عنصر من العناصر الموجودة المكرره‬
‫يستخدم لتحديد المحدد المحدد ‪ ،‬فقط إذا كان هو الطفل اﻷول من أصله‪.‬‬

‫‪CSS @media Rule‬‬

‫التعريف واﻻستخدام ‪:‬‬
‫يتم استخدام قاعدة ‪ @media‬في استعﻼمات الوسائط لتطبيق أنماط مختلفة ﻷنواع‬
‫‪ /‬أجهزة وسائط مختلفة‪.‬‬
‫يمكن استخدام استعﻼمات الوسائط للتحقق من العديد من اﻷشياء ‪ ،‬مثل ‪:‬‬
‫‪ - ١‬عرض وطول إطار العرض‬
‫‪ - ٢‬العرض والطول من الجهاز‬
‫‪ - ٣‬اﻻتجاه )هل الجهاز اللوحي ‪ /‬الهاتف في الوضع اﻷفقي أو العمودي؟(‬

‫‪ - ٤‬القرار ‪resolution‬‬

‫يعد استخدام استعﻼمات الوسائط تقنية شائعة لتقديم ورقة أنماط مخصصة )تصميم‬
‫ويب سريع اﻻستجابة( ﻷجهزة سطح المكتب وأجهزة الكمبيوتر المحمولة واﻷجهزة‬
‫اللوحية والهواتف المحمولة‪.‬‬
‫ضا استخدام استعﻼمات الوسائط لتحديد أنماط معينة فقط للمستندات‬
‫يمكنك أي ً‬
‫المطبوعة أو لقارئات الشاشة‬

‫] ‪[ mediatype: print ،screen ،or speech.‬‬

‫‪65‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫ضا ميزات وسائط‪ .‬توفر ميزات الوسائط‬
‫باﻹضافة إلى أنواع الوسائط ‪ ،‬هناك أي ً‬
‫تفاصيل أكثر تحديدًا ﻻستعﻼمات الوسائط ‪ ،‬وذلك عن طريق السماح باختبار ميزة‬
‫معينة لوكيل المستخدم أو جهاز العرض‪.‬‬
‫على سبيل المثال ‪ ،‬يمكنك تطبيق اﻷنماط على الشاشات التي تكون أكبر أو أصغر‬
‫من عرض معين فقط‪.‬‬

‫‪Media Types‬‬
‫‪ Default : All‬تستخدم لجميع أجهزة نوع الوسائط‬
‫‪ : Print‬تستخدم للطابعات‬

‫‪66‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬
 ‫‪ : Screen‬تستخدم لشاشات الكمبيوتر ‪ ،‬واﻷجهزة اللوحية ‪ ،‬والهواتف الذكية‬
‫وغيرها‬

‫نﻼحظ إخفاء العنصر ‪ screen‬عندما صغر حجم الشاشة‬

‫‪ : Speech‬تستخدم لبرامج قراءة "يقرأ" الصفحة بصوت مرتفع‬

‫‪67‬‬ ‫ملخص كورس لغة ‪ CSS‬من كورس الزيرو وترجمة موقع ‪ w3‬وموقع ‪mozilla‬‬