Css

‫مالحظات للعاملني بلغة ‪CSS‬‬
‫أتقن لغة ‪ CSS‬بأمثلة تطبيقية ومالحظات عملية متقدمة‬

‫‪Book Title: CSS Notes for Professionals‬‬ ‫اسم الكتاب‪ :‬مالحظات للعاملين بلغة ‪CSS‬‬
‫‪Author: StackOverflow Contributors‬‬ ‫المؤلف‪ :‬مساهمون من ‪Stackoverflow‬‬
‫‪Translator: Ayman Tarig Algadi‬‬ ‫المترجم‪ :‬أيمن طارق القاضي‬
‫‪Editor: Jamil Bailony‬‬ ‫المحرر‪ :‬جميل بيلوني‬
‫‪Cover Design: Mohamed Zaher Shallar‬‬ ‫تصميم الغالف‪ :‬محمد زاهر شالر‬
‫‪Publication Year:‬‬ ‫‪2023‬‬ ‫سنة النشر‪:‬‬
‫‪Edition:‬‬ ‫‪1.0‬‬ ‫رقم اإلصدار‪:‬‬
‫بعض الحقوق محفوظة ‪ -‬أكاديمية حسوب‪.‬‬
‫أكاديمية حسوب أحد مشاريع شركة حسوب محدودة المسؤولية‪.‬‬
‫مسجلة في المملكة المتحدة برقم ‪.07571594‬‬
‫‪https://academy.hsoub.com‬‬
‫‪academy@hsoub.com‬‬
Copyright Notice ‫إشعار حقوق التأليف والنشر‬
The author publishes this work under ‫ينشر المصن ِّف هذا العمل وفقا لرخصة المشاع‬
Creative Commons Attribution- ُ ‫اإلبداعي نَسب‬
‫ الترخيص‬- ‫ غير تجاري‬- ‫المصنَّف‬
NonCommercial-ShareAlike 4.0 .)CC BY-NC-SA 4.0( ‫ دولي‬4.0 ‫بالمثل‬
International (CC BY-NC-SA 4.0).
You are free to: :‫لك مطلق الحرية في‬

• Share — copy and redistribute the ‫• المشاركة — نسخ وتوزيع ونقل العمل ألي‬
material in any medium or format .‫وسط أو شكل‬
• Adapt — remix, transform, and build ‫ واإلضافة عىل‬،‫ التحويل‬،‫• التعديل — المزج‬
upon the material .‫العمل‬
This license is acceptable for Free Cultural .‫هذه الرخصة متوافقة مع أعمال الثقافة الحرة‬
Works. ‫ال يمكن للمرخِّص إلغاء هذه الصالحيات طالما‬
The licensor cannot revoke these freedoms :‫اتبعت شروط الرخصة‬
as long as you follow the license terms:
• Attribution — You must give ‫المصنَّف — يجب عليك نَسب‬ ُ ‫نَسب‬ •
appropriate credit, provide a link to ‫ وتوفير‬،‫العمل لصاحبه بطريقة مناسبة‬
the license, and indicate if changes ‫ وبيان إذا ما قد ُأجريت أي‬،‫رابط للترخيص‬
were made. You may do so in any ‫ يمكنك القيام بهذا‬.‫تعديالت عىل العمل‬
reasonable manner, but not in any ‫ ولكن عىل أال يتم ذلك‬،‫بأي طريقة مناسبة‬
way that suggests the licensor ‫بطريقة توحي بأن المؤلف أو المرخِّص‬
endorses you or your use. .‫مؤيد لك أو لعملك‬
• NonCommercial — You may not use ‫غير تجاري — ال يمكنك استخدام هذا‬ •
the material for commercial .‫العمل ألغراض تجارية‬
purposes. ،‫الترخيص بالمثل — إذا قمت بأي تعديل‬ •
• ShareAlike — If you remix, ‫ فيجب‬،‫ أو إضافة عىل هذا العمل‬،‫تغيير‬
transform, or build upon the ‫عليك توزيع العمل الناتج بنفس شروط‬
material, you must distribute your .‫ترخيص العمل األصلي‬
contributions under the same
license as the original.
No additional restrictions — You may not ‫منع القيود اإلضافية — يجب عليك أال تطبق أي‬
apply legal terms or technological ‫شروط قانونية أو تدابير تكنولوجية تقيد اآلخرين من‬
measures that legally restrict others from .‫ممارسة الصالحيات التي تسمح بها الرخصة‬
doing anything the license permits. :‫اقرأ النص الكامل للرخصة عبر الرابط التالي‬
Read the text of the full license on the
following link:
https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode
The illustrations used in this book is created ‫الصور المستخدمة في هذا الكتاب من إعداد‬
by the author and all are licensed with a ‫المؤلف وهي كلها مرخصة برخصة متوافقة مع‬
license compatible with the previously .‫الرخصة السابقة‬
stated license.
‫عن الناشـر‬
‫ُأنتج هذا الكتاب برعاية شركة حسوب وأكاديمية حسوب‪.‬‬
‫تهدف أكاديمية حسوب إىل توفير دروس وكتب عالية الجودة في مختل‪s‬ف المج‪s‬االت وتق‪ss‬دم دورات ش‪s‬املة‬
‫ً‬
‫معتم‪sss‬دة عىل التط‪sss‬بيق العملي ال‪sss‬ذي يؤه‪sss‬ل الط‪sss‬الب ل‪sss‬دخول س‪sss‬وق‬ ‫لتعلُّم البرمج‪sss‬ة بأح‪sss‬دث تقنياته‪sss‬ا‬
‫العمل بثقة‪.‬‬
‫حسوب شركة تقنية في مهمة لتطوير الع‪ss‬الم الع‪ss‬ربي‪ .‬تب‪ss‬ني حس‪ss‬وب منتج‪ss‬ات تر ِّكز عىل تحس‪ss‬ين مس‪ss‬تقبل‬
‫العمل‪ ،‬والتعليم‪ ،‬والتواصل‪ .‬تدير حسوب أكبر منصتي عمل حر في العالم العربي‪ ،‬مستقل وخمسات ويعمل في‬
‫فيها فريق شاب وشغوف من مختلف الدول العربية‪.‬‬

‫المحتويات باختصار‬
‫‪18‬‬ ‫تمهيد‬
‫‪21‬‬ ‫‪ .1‬أساسيات لغة ‪CSS‬‬
‫‪59‬‬ ‫‪ .2‬تخطيط الصفحة وضبط محاذاة العناصر‬
‫‪103‬‬ ‫‪ .3‬النموذج الصندوقي ‪Box Model‬‬
‫‪133‬‬ ‫‪ .4‬التحكم في تموضع العناصر‬
‫‪141‬‬ ‫‪ .5‬تنسيق القوائم وإضافة الظالل ورسم األشكال‬
‫‪162‬‬ ‫‪ .6‬التنسيقات األساسية للعناصر‬
‫‪183‬‬ ‫‪ .7‬تنسيق الخلفيات ‪Backgrounds‬‬
‫‪204‬‬ ‫‪ .8‬تنسيق الصور‬
‫‪217‬‬ ‫‪ .9‬العناصر العائمة ‪Floats‬‬
‫‪230‬‬ ‫‪ .10‬االنتقاالت ‪ Transitions‬والحركات ‪Animations‬‬
‫‪252‬‬ ‫‪ .11‬استعالمات الوسائط ‪Media Queries‬‬
‫‪261‬‬ ‫‪ .12‬مواضيع متقدمة في ‪CSS‬‬
‫‪272‬‬ ‫‪ .13‬تنسيقات المتصفحات المخصصة وأداءها‬

‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫جدول المحتويات‬
‫جدول المحتويات‬
‫‪18‬‬ ‫تمهيد‬
‫‪18‬‬ ‫حول الكتاب‬
‫‪19‬‬ ‫ماذا بعد هذا الكتاب‬
‫‪21‬‬ ‫‪ .1‬أساسيات لغة ‪CSS‬‬
‫‪21‬‬ ‫إضافة تنسيقات ‪ CSS‬للصفحات‬ ‫‪1.1‬‬
‫‪21‬‬ ‫التنسيقات الخارجية ‪External Styles‬‬ ‫‪1.1.1‬‬
‫‪23‬‬ ‫التنسيقات الداخلية ‪Internal Styles‬‬ ‫‪1.1.2‬‬
‫‪24‬‬ ‫القاعدة ‪@import‬‬ ‫‪1.1.3‬‬
‫‪25‬‬ ‫التنسيقات السطرية ‪Inline Styles‬‬ ‫‪1.1.4‬‬
‫‪25‬‬ ‫التحكم في تنسيقات ‪ CSS‬باستخدام جافاسكربت‬ ‫‪1.1.5‬‬
‫‪25‬‬ ‫استخدام ‪jQuery‬‬ ‫‪1.1.6‬‬
‫‪26‬‬ ‫هيكلة وصياغة قواعد ‪CSS‬‬ ‫‪1.2‬‬
‫‪27‬‬ ‫التعليقات ‪Comments‬‬ ‫‪1.3‬‬
‫‪27‬‬ ‫المحددات ‪Selectors‬‬ ‫‪1.4‬‬
‫‪28‬‬ ‫محددات الخاصيات ‪Attribute Selectors‬‬ ‫‪1.4.1‬‬
‫‪29‬‬ ‫ا‪ .‬المحدد [‪]attribute‬‬
‫‪29‬‬ ‫ب‪ .‬المحدد ["‪]attribute="value‬‬
‫‪30‬‬ ‫ج‪ .‬المحدد ["‪]attribute*="value‬‬
‫‪30‬‬ ‫د‪ .‬المحدد [ "‪]attribute~="value‬‬
‫‪31‬‬ ‫ه‪ .‬المحدد ["‪]attribute^="value‬‬
‫‪31‬‬ ‫و‪ .‬المحدد ["‪]attribute$="value‬‬
‫‪32‬‬ ‫ز‪ .‬المحدد ["‪]attribute|="value‬‬
‫‪32‬‬ ‫ح‪ .‬المحدد [‪]attribute="value" i‬‬
‫‪33‬‬ ‫جمعات ‪Combinators‬‬

‫الم ِّ‬
‫ُ‬ ‫‪1.4.2‬‬
‫‪33‬‬ ‫ا‪ُ .‬محدد العناصر السليلة ‪Descendant Combinator‬‬
‫‪34‬‬ ‫ب‪ُ .‬محدد العناصر األبناء ‪Child Combinator‬‬
‫‪34‬‬ ‫ج‪ُ .‬محدد العناصر اإلخوة المتجاورة ‪Adjacent Sibling Combinator‬‬
‫‪7‬‬
‫‪34‬‬ ‫د‪ُ .‬محدد العناصر اإلخوة العامة ‪General Sibling Combinator‬‬
‫‪35‬‬ ‫األصناف الزائفة ‪pseudo-classes‬‬ ‫‪1.4.3‬‬
‫‪37‬‬ ‫ا‪ .‬صنف االبن الزائف ‪Child Pseudo Class‬‬
‫‪38‬‬ ‫ب‪ .‬المحدد ‪last-of-type:‬‬
‫‪38‬‬ ‫ج‪ .‬المحدد ‪in-range:‬‬
‫‪39‬‬ ‫د‪ .‬المحدد ‪not:‬‬
‫‪40‬‬ ‫ه‪ .‬المحدد ‪focus-within:‬‬
‫‪41‬‬ ‫و‪ .‬إنشاء قيم منطقية باستخدام المحددات‬
‫‪42‬‬ ‫ز‪ .‬المحدد ‪only-child:‬‬
‫‪43‬‬ ‫ح‪ .‬تنسيق عناصر ‪ input‬من النوع ‪range‬‬
‫‪43‬‬ ‫المعرِّف الخاص بها ‪ID‬‬

‫ط‪ .‬تحديد العناصر باستخدام ُ‬
‫‪44‬‬ ‫محددات األصناف ‪Class Name Selectors‬‬ ‫‪1.4.4‬‬
‫‪45‬‬ ‫المعرِّفات ‪ID Selectors‬‬

‫محددات ُ‬ ‫‪1.4.5‬‬
‫‪45‬‬ ‫محددات العناصر الزائفة‬ ‫‪1.4.6‬‬
‫‪46‬‬ ‫ا‪ .‬استخدام العناصر الزائفة لتنسيق القوائم‬
‫‪47‬‬ ‫حساب عمق التحديد‬ ‫‪1.4.7‬‬
‫‪49‬‬ ‫ا‪ .‬كيفية التحكم في عُمق التحديد‬
‫‪49‬‬ ‫ب‪ُ .‬معرِّف ‪ !important‬واألنماط السطرية ‪inline styles‬‬
‫‪50‬‬ ‫توريث التنسيق ‪Cascading‬‬ ‫‪1.4.8‬‬
‫‪50‬‬ ‫ا‪ .‬الوراثة اإلجبارية‬
‫‪51‬‬ ‫ب‪ .‬كيفية معالجة تضارب قواعد ‪CSS‬‬
‫‪54‬‬ ‫الوحدات‬ ‫‪1.5‬‬
‫‪55‬‬ ‫إنشاء عناصر قابلة للتوسع باستخدام ‪ rems‬و ‪ems‬‬ ‫‪1.5.1‬‬
‫‪56‬‬ ‫ضبط حجم الخط باستخدام ‪rem‬‬ ‫‪1.5.2‬‬
‫‪57‬‬ ‫وحدات ‪ vmin‬و ‪vmax‬‬ ‫‪1.5.3‬‬
‫‪57‬‬ ‫الوحدات ‪ vh‬و ‪vw‬‬ ‫‪1.5.4‬‬
‫‪58‬‬ ‫استخدام النسب المئوية‬ ‫‪1.5.5‬‬
‫‪59‬‬ ‫‪ .2‬تخطيط الصفحة وضبط محاذاة العناصر‬
‫‪59‬‬ ‫الخاصية ‪display‬‬ ‫‪2.1‬‬
‫‪8‬‬
‫‪60‬‬ ‫العناصر السطرية ‪inline elements‬‬ ‫‪2.1.1‬‬
‫‪60‬‬ ‫العناصر الكتلية ‪block elements‬‬ ‫‪2.1.2‬‬
‫‪60‬‬ ‫القيمة ‪inline-block‬‬ ‫‪2.1.3‬‬
‫‪63‬‬ ‫إخفاء العناصر‬ ‫‪2.1.4‬‬
‫‪63‬‬ ‫إنشاء تخطيط جدول باستخدام العنصر ‪div‬‬ ‫‪2.1.5‬‬
‫‪64‬‬ ‫تخطيط ‪Flexbox‬‬ ‫‪2.2‬‬
‫‪64‬‬ ‫توسيط العناصر أفق ًيا ورأس ًيا‬ ‫‪2.2.1‬‬
‫‪65‬‬ ‫ا‪ .‬التوسيط أفق ًيا في حاوية أفقية‬
‫‪66‬‬ ‫ب‪ .‬التوسيط رأس ًيا في حاوية رأسية‬
‫‪67‬‬ ‫ج‪ .‬التوسيط رأس ًيا في حاوية أفقية‬
‫‪68‬‬ ‫د‪ .‬التوسيط أفق ًيا في حاوية رأسية‬
‫‪69‬‬ ‫ه‪ .‬التوسيط أفق ًيا ورأس ًيا في حاوية أفقية‬
‫‪70‬‬ ‫و‪ .‬التوسيط أفق ًيا ورأس ًيا في حاوية رأسية‬
‫‪71‬‬ ‫إنشاء تذييل ثابت لصفحة‬ ‫‪2.2.2‬‬
‫‪72‬‬ ‫توزيع العناصر بشكل مثالي داخل الحاوية‬ ‫‪2.2.3‬‬
‫‪74‬‬ ‫إنشاء تخطيط باستخدام حاوية ‪flex‬‬ ‫‪2.2.4‬‬
‫‪75‬‬ ‫محاذاة األزرار داخل البطاقات‬ ‫‪2.2.5‬‬
‫‪79‬‬ ‫إنشاء حاويات متداخلة بارتفاعات متساوية‬ ‫‪2.2.6‬‬
‫‪79‬‬ ‫التخطيط الشبكي ‪Grid‬‬ ‫‪2.3‬‬
‫‪81‬‬ ‫التخطيط الجدولي ‪table‬‬ ‫‪2.4‬‬
‫‪81‬‬ ‫الخاصية ‪table-layout‬‬ ‫‪2.4.1‬‬
‫‪81‬‬ ‫الخاصية ‪empty-cells‬‬ ‫‪2.4.2‬‬
‫‪82‬‬ ‫الخاصية ‪border-collapse‬‬ ‫‪2.4.3‬‬
‫‪82‬‬ ‫الخاصية ‪border-spacing‬‬ ‫‪2.4.4‬‬
‫‪82‬‬ ‫الخاصية ‪caption-side‬‬ ‫‪2.4.5‬‬
‫‪83‬‬ ‫التخطيط الكتلي السطري ‪Inline-block layout‬‬ ‫‪2.5‬‬
‫‪83‬‬ ‫إنشاء شريط تَنَ ُّقل علوي ‪navigation bar‬‬ ‫‪2.5.1‬‬
‫‪84‬‬ ‫التوسيط ‪Centering‬‬ ‫‪2.6‬‬
‫‪84‬‬ ‫توسيط العناصر باستخدام حاوية ‪Flexbox‬‬ ‫‪2.6.1‬‬
‫‪9‬‬
‫‪86‬‬ ‫توسيط العناصر باستخدام التحويالت ‪CSS Transform‬‬ ‫‪2.6.2‬‬
‫‪87‬‬ ‫التوسيط باستخدام الخاصية ‪margin‬‬ ‫‪2.6.3‬‬
‫‪89‬‬ ‫التوسيط باستخدام محاذاة النص ‪text-align‬‬ ‫‪2.6.4‬‬
‫‪90‬‬ ‫استخدام الموضع المطلق ‪position: absolute‬‬ ‫‪2.6.5‬‬
‫‪90‬‬ ‫التوسيط باستخدام الدالة ‪calc‬‬ ‫‪2.6.6‬‬
‫‪91‬‬ ‫توسيط النص رأس ًيا باستخدام ارتفاع السطر ‪line-height‬‬ ‫‪2.6.7‬‬
‫‪91‬‬ ‫محاذاة أي شيء رأس ًيا في ثالثة أسطر‬ ‫‪2.7‬‬
‫‪92‬‬ ‫ً‬
‫نسبة لعنصر آخر‬ ‫التوسيط‬ ‫‪2.7.1‬‬
‫‪93‬‬ ‫طريقة العنصر الشبح‪ :‬خدعة ‪Michat Czernow‬‬ ‫‪2.7.2‬‬
‫‪95‬‬ ‫التوسيط أفق ًيا ورأس ًيا دون القلق بشأن ارتفاع وعرض العنصر‬ ‫‪2.7.3‬‬
‫‪96‬‬ ‫محاذاة صورة رأس ًيا داخل حاوية ‪div‬‬ ‫‪2.7.4‬‬
‫‪97‬‬ ‫التوسيط مع حجم ثابت‬ ‫‪2.7.5‬‬
‫‪98‬‬ ‫ا‪ .‬التوسيط أفق ًيا مع عرض ثابت‬
‫‪98‬‬ ‫ب‪ .‬التوسيط رأس ًيا مع ارتفاع ثابت‬
‫‪99‬‬ ‫المحاذاة الرأسية للعناصر ذات االرتفاع الديناميكي‬ ‫‪2.7.6‬‬
‫‪100‬‬ ‫التوسيط أفق ًيا ورأس ًيا باستخدام تخطيط الجدول‬ ‫‪2.7.7‬‬
‫‪101‬‬ ‫التوسيط باستخدام العناصر الزائفة‬ ‫‪2.7.8‬‬
‫‪103‬‬ ‫‪ .3‬النموذج الصندوقي ‪Box Model‬‬
‫‪103‬‬ ‫ما هو النموذج الصندوقي؟‬ ‫‪3.1‬‬
‫‪106‬‬ ‫تعديل النموذج الصندوقي باستخدام الخاصية ‪box-sizing‬‬ ‫‪3.2‬‬
‫‪107‬‬ ‫الهوامش ‪Margins‬‬ ‫‪3.3‬‬
‫‪108‬‬ ‫تداخل الهوامش ‪Margin Collapsing‬‬ ‫‪3.3.1‬‬
‫‪111‬‬ ‫إضافة هامش باتجاه محدد‬ ‫‪3.3.2‬‬
‫‪112‬‬ ‫تبسيط خاصية الهوامش ‪margin‬‬ ‫‪3.3.3‬‬
‫‪113‬‬ ‫توسيط العناصر أفق ًيا باستخدام خاصية الهامش ‪margin‬‬ ‫‪3.3.4‬‬
‫‪114‬‬ ‫الهوامش السالبة‬ ‫‪3.3.5‬‬
‫‪115‬‬ ‫الحواشي ‪Paddings‬‬ ‫‪3.4‬‬
‫‪116‬‬ ‫إضافة حاشية باتجاه محدد‬ ‫‪3.4.1‬‬
‫‪117‬‬ ‫اإلطارات ‪Borders‬‬ ‫‪3.5‬‬
‫‪10‬‬
‫‪117‬‬ ‫خاصية األركان المدورة ‪border-radius‬‬ ‫‪3.5.1‬‬
‫‪119‬‬ ‫خاصية أنماط اإلطارات ‪border-style‬‬ ‫‪3.5.2‬‬
‫‪119‬‬ ‫إنشاء إطارات متعددة‬ ‫‪3.5.3‬‬
‫‪121‬‬ ‫الصياغة المختزلة إلنشاء اإلطارات‬ ‫‪3.5.4‬‬
‫‪122‬‬ ‫خاصية تداخل اإلطارات ‪border-collapse‬‬ ‫‪3.5.5‬‬
‫‪122‬‬ ‫خاصية ‪border-image‬‬ ‫‪3.5.6‬‬
‫‪123‬‬ ‫إنشاء إطارات متعددة األلوان باستخدام خاصية ‪border-image‬‬ ‫‪3.5.7‬‬
‫‪124‬‬ ‫إنشاء إطار للعنصر باتجاه محدد‬ ‫‪3.5.8‬‬
‫‪124‬‬ ‫حدود العنصر ‪Outlines‬‬ ‫‪3.6‬‬
‫‪125‬‬ ‫خاصية ‪outline-style‬‬ ‫‪3.6.1‬‬
‫‪127‬‬ ‫الخاصية ‪overflow‬‬ ‫‪3.7‬‬
‫‪127‬‬ ‫خاصية ‪overflow-wrap‬‬ ‫‪3.7.1‬‬
‫‪129‬‬ ‫خاصية ‪ overflow-x‬و ‪overflow-y‬‬ ‫‪3.7.2‬‬
‫‪130‬‬ ‫القاعدة ‪overflow: scroll‬‬ ‫‪3.7.3‬‬
‫‪130‬‬ ‫القاعدة ‪overflow: visible‬‬ ‫‪3.7.4‬‬
‫‪131‬‬ ‫سياق تنسيق العناصر الكتلية الناتج عن خاصية ‪overflow‬‬ ‫‪3.7.5‬‬
‫‪133‬‬ ‫‪ .4‬التحكم في تموضع العناصر‬
‫‪133‬‬ ‫المطلق ‪Absolute Position‬‬

‫الموضع ُ‬
‫ِ‬ ‫‪4.1‬‬
‫‪134‬‬ ‫الموضع الثابت ‪Fixed Position‬‬ ‫‪4.2‬‬
‫‪134‬‬ ‫الموضع النسبي ‪Relative Position‬‬ ‫‪4.3‬‬
‫‪134‬‬ ‫الموضع االفتراضي حيث يجب ‪Static Position‬‬ ‫‪4.4‬‬
‫‪135‬‬ ‫خاصية ‪z-index‬‬ ‫‪4.5‬‬
‫‪137‬‬ ‫سياق التطبيق ‪Stacking Context‬‬ ‫‪4.6‬‬
‫‪141‬‬ ‫‪ .5‬تنسيق القوائم وإضافة الظالل ورسم األشكال‬
‫‪141‬‬ ‫تنسيق القوائم‬ ‫‪5.1‬‬
‫‪142‬‬ ‫تموضع عناصر القائمة‬ ‫‪5.1.1‬‬
‫‪142‬‬ ‫حذف المؤشر أو الترقيم من عناصر القائمة‬ ‫‪5.1.2‬‬
‫‪143‬‬ ‫تحديد شكل المؤشر أو نوع الترقيم لعناصر القائمة‬ ‫‪5.1.3‬‬
‫‪143‬‬ ‫تنسيق العدَّادات ‪Counters‬‬ ‫‪5.1.4‬‬
‫‪11‬‬
‫‪144‬‬ ‫ا‪ .‬استخدام األرقام الرومانية عبر عدَّادات ‪CSS‬‬
‫‪144‬‬ ‫ب‪ .‬ترقيم العناصر في صفحة ‪ HTML‬باستخدام العدادات‬
‫‪146‬‬ ‫ج‪ .‬إنشاء ترقيم متعدد المستويات‬
‫‪147‬‬ ‫تطبيق ظالل عىل العنصر‬ ‫‪5.2‬‬
‫‪147‬‬ ‫إنشاء ظل أسفل العنصر باستخدام العناصر الزائفة‬ ‫‪5.2.1‬‬
‫‪148‬‬ ‫إنشاء ظالل خارجية ألوجه العنصر األربعة‬ ‫‪5.2.2‬‬
‫‪149‬‬ ‫إنشاء ظالل داخلية للعنصر‬ ‫‪5.2.3‬‬
‫‪149‬‬ ‫إضافة ظالل متعددة للعنصر‬ ‫‪5.2.4‬‬
‫‪150‬‬ ‫رسم األشكال باستخدام ‪CSS‬‬ ‫‪5.3‬‬
‫‪150‬‬ ‫رسم شبه المنحرف ‪Trapezoid‬‬ ‫‪5.3.1‬‬
‫‪151‬‬ ‫رسم المثلثات ‪Triangles‬‬ ‫‪5.3.2‬‬
‫‪155‬‬ ‫رسم الدائرة‬ ‫‪5.3.3‬‬
‫‪156‬‬ ‫رسم الشكل البيضاوي‬ ‫‪5.3.4‬‬
‫‪156‬‬ ‫شكل االنفجار‬ ‫‪5.3.5‬‬
‫‪158‬‬ ‫رسم المربع‬ ‫‪5.3.6‬‬
‫‪159‬‬ ‫رسم المكعب‬ ‫‪5.3.7‬‬
‫‪160‬‬ ‫رسم الهرم‬ ‫‪5.3.8‬‬
‫‪162‬‬ ‫‪ .6‬التنسيقات األساسية للعناصر‬
‫‪162‬‬ ‫تنسيقات الخطوط‬ ‫‪6.1‬‬
‫‪163‬‬ ‫الصياغة المختزلة لخاصية الخطوط ‪font‬‬ ‫‪6.1.1‬‬
‫‪164‬‬ ‫االقتباسات‬ ‫‪6.1.2‬‬
‫‪164‬‬ ‫حجم الخط‬ ‫‪6.1.3‬‬
‫‪164‬‬ ‫تعريف عدة أنواع من الخطوط‬ ‫‪6.1.4‬‬
‫‪165‬‬ ‫الخاصية ‪font-variant‬‬ ‫‪6.1.5‬‬
‫‪166‬‬ ‫اتجاه الكتابة‬ ‫‪6.2‬‬
‫‪167‬‬ ‫خاصيات تنسيق النصوص واألحرف‬ ‫‪6.3‬‬
‫‪167‬‬ ‫طفحان النص‬ ‫‪6.3.1‬‬
‫‪167‬‬ ‫إضافة تأثير الظالل عىل النص‬ ‫‪6.3.2‬‬
‫‪168‬‬ ‫حالة األحرف‬ ‫‪6.4‬‬
‫‪12‬‬
‫‪168‬‬ ‫التباعد بين األحرف‬ ‫‪6.4.1‬‬
‫‪169‬‬ ‫المسافة البادئة النص‬ ‫‪6.4.2‬‬
‫‪169‬‬ ‫زخرفة النص‬ ‫‪6.4.3‬‬
‫‪170‬‬ ‫التباعد بين الكلمات‬ ‫‪6.4.4‬‬
‫‪171‬‬ ‫تقسيم النص إىل أعمدة‬ ‫‪6.4.5‬‬
‫‪175‬‬ ‫مؤشر إدخال النص‬ ‫‪6.4.6‬‬
‫‪175‬‬ ‫تنسيق ألوان النصوص‬ ‫‪6.5‬‬
‫‪175‬‬ ‫استخدام ‪currentColor‬‬ ‫‪6.5.1‬‬
‫‪177‬‬ ‫الكلمات المحجوزة لأللوان‬ ‫‪6.5.2‬‬
‫‪177‬‬ ‫القيم الست عشرية لأللوان‬ ‫‪6.5.3‬‬
‫‪178‬‬ ‫الدالة ‪rgb‬‬ ‫‪6.5.4‬‬
‫‪179‬‬ ‫الدالة ‪rgba‬‬ ‫‪6.5.5‬‬
‫‪179‬‬ ‫الدالة ‪hsl‬‬ ‫‪6.5.6‬‬
‫‪180‬‬ ‫الدالة ‪hsla‬‬ ‫‪6.5.7‬‬
‫‪181‬‬ ‫التعتيم‬ ‫‪6.5.8‬‬
‫‪181‬‬ ‫شكل المؤشر ‪cursor style‬‬ ‫‪6.6‬‬
‫‪182‬‬ ‫الخاصية ‪pointer-event‬‬ ‫‪6.6.1‬‬
‫‪183‬‬ ‫‪ .7‬تنسيق الخلفيات ‪Backgrounds‬‬
‫‪183‬‬ ‫إضافة األلوان كخلفيات للعناصر‬ ‫‪7.1‬‬
‫‪183‬‬ ‫الكلمات المحجوزة لأللوان‬ ‫‪7.1.1‬‬
‫‪184‬‬ ‫القيم الست عشرية لأللوان‬ ‫‪7.1.2‬‬
‫‪184‬‬ ‫ترميز ‪ RGB‬و ‪RGBa‬‬ ‫‪7.1.3‬‬
‫‪185‬‬ ‫ترميز ‪ HSL‬و ‪HSLa‬‬ ‫‪7.1.4‬‬
‫‪185‬‬ ‫استخدام التدرجات اللونية كخلفيات للعناصر‬ ‫‪7.2‬‬
‫‪185‬‬ ‫التدرج الخطي‪ :‬الدالة ‪linear-gradient‬‬ ‫‪7.2.1‬‬
‫‪186‬‬ ‫التدرج الدائري‪ :‬الدالة ‪radial-gradient‬‬ ‫‪7.2.2‬‬
‫‪187‬‬ ‫المتكررة ‪Repeating Gradients‬‬

‫التدرجات ُ‬ ‫‪7.2.3‬‬
‫‪187‬‬ ‫استخدام الصور كخلفيات للعناصر‬ ‫‪7.3‬‬
‫‪188‬‬ ‫حجم الخلفية ‪Background Size‬‬ ‫‪7.4‬‬
‫‪13‬‬
‫‪190‬‬ ‫ا‪ .‬المحافظة عىل نسبة أبعاد الصورة‬
‫‪193‬‬ ‫نقوش الصور ‪Image Sprites‬‬ ‫‪7.4.2‬‬
‫‪194‬‬ ‫موضع الخلفية ‪Background Position‬‬ ‫‪7.5‬‬
‫‪195‬‬ ‫الخاصية ‪background-origin‬‬ ‫‪7.5.1‬‬
‫‪197‬‬ ‫إضافة صور ُمتعددة للخلفية‬ ‫‪7.5.2‬‬
‫‪198‬‬ ‫الخاصية ‪background-attachment‬‬ ‫‪7.5.3‬‬
‫‪199‬‬ ‫الخاصية ‪background-clip‬‬ ‫‪7.5.4‬‬
‫‪201‬‬ ‫الخاصية ‪background-repeat‬‬ ‫‪7.5.5‬‬
‫‪201‬‬ ‫الخاصية ‪background-blend-mode‬‬ ‫‪7.5.6‬‬
‫‪202‬‬ ‫إضافة تأثير الشفافية عىل خلفية العنصر‬ ‫‪7.6‬‬
‫‪202‬‬ ‫الخاصية المختزلة ‪background‬‬ ‫‪7.7‬‬
‫‪204‬‬ ‫‪ .8‬تنسيق الصور‬
‫‪204‬‬ ‫الم ِّ‬

‫رشحات ‪Filters‬‬ ‫ُ‬ ‫‪8.1‬‬
‫‪205‬‬ ‫الدالة‪blur‬‬ ‫‪8.2‬‬
‫‪205‬‬ ‫الدالة ‪dropshadow‬‬ ‫‪8.3‬‬
‫‪206‬‬ ‫الدالة ‪hue-rotate‬‬ ‫‪8.4‬‬
‫‪207‬‬ ‫الدالة ‪invert‬‬ ‫‪8.5‬‬
‫‪207‬‬ ‫إضافة ُم ِّ‬

‫رشحات متعددة‬ ‫‪8.6‬‬
‫‪208‬‬ ‫القواطع ‪ Clipping‬واألقنعة ‪Masking‬‬ ‫‪8.7‬‬
‫‪209‬‬ ‫القطع ‪Clipping‬‬ ‫‪8.7.1‬‬
‫‪209‬‬ ‫القناع‬ ‫‪8.7.2‬‬
‫‪210‬‬ ‫ا‪ .‬تحويل الصورة من معتمة إىل شفافة تدريج ًيا‬
‫‪211‬‬ ‫استخدام األقنعة إلنشاء ثقب في الصورة‬ ‫‪8.8‬‬
‫‪212‬‬ ‫القواطع‬ ‫‪8.8.1‬‬
‫‪213‬‬ ‫ا‪ .‬إنشاء شكل دائري باستخدام القواطع‬
‫‪214‬‬ ‫الخاصية ‪object-fit‬‬ ‫‪8.9‬‬
‫‪217‬‬ ‫‪ .9‬العناصر العائمة ‪Floats‬‬
‫‪217‬‬ ‫تعويم نص حول صورة‬ ‫‪9.1‬‬
‫‪218‬‬ ‫الرابط العجيب بين الخاصية ‪ clear‬والخاصية ‪float‬‬ ‫‪9.2‬‬
‫‪14‬‬
‫‪219‬‬ ‫مفهوم ‪Clearfix‬‬ ‫‪9.3‬‬
‫‪220‬‬ ‫تحويل حاوية ‪ div‬إىل حاوية سطرية ‪ inline‬باستخدام ‪float‬‬ ‫‪9.4‬‬
‫‪222‬‬ ‫إصالح الطوفان بضبط الطفحان‬ ‫‪9.5‬‬
‫‪222‬‬ ‫إنشاء تخطيط بسيط ذو عمودين بعرض ثابت‬ ‫‪9.6‬‬
‫‪224‬‬ ‫إنشاء تخطيط ذو ثالث أعمدة بعرض ثابت‬ ‫‪9.7‬‬
‫‪225‬‬ ‫إنشاء تخطيط ذو عمودين بعرض ديناميكي (غير ثابت)‬ ‫‪9.8‬‬
‫‪226‬‬ ‫شكل مساحة التعويم‬ ‫‪9.9‬‬
‫‪228‬‬ ‫خاصية شكل الهامش ‪shape-margin‬‬ ‫‪9.9.1‬‬
‫‪230‬‬ ‫‪ .10‬االنتقاالت ‪ Transitions‬والحركات ‪Animations‬‬
‫‪230‬‬ ‫االنتقاالت عبر الخاصية ‪transition‬‬ ‫‪10.1‬‬
‫‪231‬‬ ‫دالة التسار ع ‪cubic-bezier‬‬ ‫‪10.1.1‬‬
‫‪233‬‬ ‫إنشاء الحركات باستخدام خاصية ‪transition‬‬ ‫‪10.2‬‬
‫‪234‬‬ ‫دعم المتصفحات لخاصية ‪transition‬‬ ‫‪10.3‬‬
‫‪234‬‬ ‫تحريك العناصر عبر الخاصية ‪animation‬‬ ‫‪10.4‬‬
‫‪235‬‬ ‫إنشاء الحركات مخصصة باستخدام ‪@keyframes‬‬ ‫‪10.4.1‬‬
‫‪237‬‬ ‫أمثلة الستعمال الخاصية ‪animation‬‬ ‫‪10.5‬‬
‫‪238‬‬ ‫تحسين أداء عملية التحريك عبر ‪will-change‬‬ ‫‪10.6‬‬
‫‪238‬‬ ‫التحويالت ثُنائية األبعاد ‪2D Transforms‬‬ ‫‪10.7‬‬
‫‪239‬‬ ‫الدالة ‪rotate‬‬ ‫‪10.7.1‬‬
‫‪239‬‬ ‫الدالة ‪scale‬‬ ‫‪10.7.2‬‬
‫‪240‬‬ ‫الدالة ‪skew‬‬ ‫‪10.7.3‬‬
‫‪241‬‬ ‫المتعددة‬
‫التحويالت ُ‬ ‫‪10.7.4‬‬
‫‪242‬‬ ‫دالة ‪translate‬‬ ‫‪10.7.5‬‬
‫‪243‬‬ ‫الخاصية ‪transform-origin‬‬ ‫‪10.7.6‬‬
‫‪243‬‬ ‫التحويالت ثالثية األبعاد ‪3D Transforms‬‬ ‫‪10.8‬‬
‫‪243‬‬ ‫إنشاء شكل مؤشر البوصلة باستخدام التحويالت ثالثية األبعاد‬ ‫‪10.8.1‬‬
‫‪245‬‬ ‫إنشاء نص ثالثي األبعاد مع تأثير الظل‬ ‫‪10.9‬‬
‫‪247‬‬ ‫الخاصية ‪backface-visibility‬‬ ‫‪10.9.1‬‬
‫‪248‬‬ ‫رسم ُمك َّعب باستخدام التحويالت ثُالثية األبعاد‬ ‫‪10.9.2‬‬
‫‪15‬‬
‫‪250‬‬ ‫البوادئ ودعم المتصفحات‬ ‫‪10.10‬‬
‫‪252‬‬ ‫‪ .11‬استعالمات الوسائط ‪Media Queries‬‬
‫‪253‬‬ ‫تحديد نوع الوسط أو الجهاز عبر ‪media type‬‬ ‫‪11.1‬‬
‫‪255‬‬ ‫استعالمات الوسائط للشاشات الشبكية وغير الشبكية‬ ‫‪11.2‬‬
‫‪255‬‬ ‫خصائص الوسيط أو الجهاز ‪media features‬‬ ‫‪11.3‬‬
‫‪257‬‬ ‫العرض ‪ Width‬مقابل إطار العرض ‪Viewport‬‬ ‫‪11.4‬‬
‫‪257‬‬ ‫استخدام استعالمات الوسائط الستهداف شاشات محددة‬ ‫‪11.5‬‬
‫‪258‬‬ ‫إنشاء استعالمات الوسائط عبر العنصر ‪link‬‬ ‫‪11.6‬‬
‫‪258‬‬ ‫تقسيم الصفحات عبر استعالمات الوسائط‬ ‫‪11.7‬‬
‫‪259‬‬ ‫وسائط الميزات ‪Feature Queries‬‬ ‫‪11.8‬‬
‫‪259‬‬ ‫استخدام ‪@supports‬‬ ‫‪11.9‬‬
‫‪260‬‬ ‫االستعالم عن عدد من الميزات‬ ‫‪11.10‬‬
‫‪261‬‬ ‫‪ .12‬مواضيع متقدمة في ‪CSS‬‬
‫‪261‬‬ ‫الدوال ‪Functions‬‬ ‫‪12.1‬‬
‫‪261‬‬ ‫الدالة ‪calc‬‬ ‫‪12.1.1‬‬
‫‪262‬‬ ‫الدالة ‪attr‬‬ ‫‪12.1.2‬‬
‫‪262‬‬ ‫الدالة ‪var‬‬ ‫‪12.1.3‬‬
‫‪263‬‬ ‫الدالة ‪radial-gradient‬‬ ‫‪12.1.4‬‬
‫‪263‬‬ ‫الدالة ‪linear-gradient‬‬ ‫‪12.1.5‬‬
‫‪263‬‬ ‫المخصصة في ‪CSS‬‬

‫المتغيرات‪ :‬الخاصيات ُ‬ ‫‪12.2‬‬
‫‪264‬‬ ‫إعادة تعريف قيم المتغيرات‬ ‫‪12.2.1‬‬
‫‪265‬‬ ‫قواعد استخدام المتغيرات في ‪CSS‬‬ ‫‪12.2.2‬‬
‫‪266‬‬ ‫استخدام المتغيرات مع استعالمات الوسائط‬ ‫‪12.2.3‬‬
‫‪268‬‬ ‫نموذج الكائنات ‪CSSOM‬‬ ‫‪12.3‬‬
‫‪269‬‬ ‫أنماط التصميم ‪CSS Design Patterns‬‬ ‫‪12.4‬‬
‫‪270‬‬ ‫نمط ‪BEM‬‬ ‫‪12.4.1‬‬
‫‪272‬‬ ‫‪ .13‬تنسيقات المتصفحات المخصصة وأداءها‬
‫‪272‬‬ ‫الفرق بين ‪ normalize.css‬و ‪reset.css‬‬ ‫‪13.1‬‬
‫‪274‬‬ ‫وضع التباين العالي‬ ‫‪13.2‬‬
‫‪16‬‬
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫تمهيدجدول المحتويات‬
‫‪275‬‬ ‫أداء المتصفحات‬ ‫‪13.3‬‬
‫‪275‬‬ ‫استخدام الخاصيات ‪ transform‬و ‪ opacity‬لتجنب تنبيه التخطيط‬ ‫‪13.3.1‬‬
‫‪17‬‬
‫تمهيد‬
‫لغة ‪ CSS‬هي لغة توص‪ss‬يف ش‪ss‬هيرة ذائع‪ss‬ة الص‪ss‬يت تُس‪ss‬تخدم في تنس‪s‬يق ص‪s‬فحات ‪ HTML‬لمواق‪ss‬ع ال‪ss‬ويب‬
‫وإضفاء رونق جميل عليها وهي الركيزة الثانية األساسية من ركائز بناء صفحات ومواق‪ss‬ع ال‪ss‬ويب بع‪ss‬د لغ‪ss‬ة ‪HTML‬‬
‫عموما‪.‬‬
‫ً‬ ‫ولغة جافاسكربت ‪ JavaScript‬فال تخفى عىل أي مطور ويب أو مطلع عىل مجال الويب‬
‫تعد لغة ‪ CSS‬بسيطة سهلة التعلم لكن في الوقت نفسه احترافها ليس بالس‪ss‬هل ويحت‪ss‬اج إىل خ‪ss‬برة وتعام‪ss‬ل‬
‫طويل معها‪ ،‬إذ تنسيق صندوق أو نص أو صفحة بسيطة بلغة ‪ CSS‬أمر شديد السهولة لكن عندما تطول الصفحة‬
‫وتكثر عناصرها وتتشابك مع بعضها تبدأ الصعوبة والخروج عن النمط المألوف وحتى ظهور تعارضات وت‪ss‬داخالت‬
‫بالتنسيق قد يأخذ حلها الدقائق وحتى الساعات‪.‬‬
‫إضافي وهو أن لغة ‪ CSS‬تحتاج إىل بيئة لتنفيذها وعادة ما تكون البيئة هي متصفح الويب‪ ،‬ومتصفحات‬
‫ٌ‬ ‫أمر ٌ‬
‫الويب تعمل بمحركات داخلية مسؤولة عن تفسير اللغات وتنفيذها ومنها لغة ‪ CSS‬وهنا تظهر مشكلة التوافقي‪ss‬ة‬
‫مع تلك المحركات والحاجة إىل توحيد التنسيق عىل جميع المتصفحات وهذا أم‪ss‬ر آخ‪ss‬ر يحت‪ss‬اج مط‪ss‬ور ال‪ss‬ويب إىل‬
‫تعلمه ومعالجته‪.‬‬
‫ً‬
‫انطالقا من ذلك‪ ،‬جاء هذا الكتاب والذي يحم‪ss‬ل عن‪ss‬وان "نص‪ss‬ائح للع‪ss‬املين بلغ‪ss‬ة ‪ "CSS‬وذل‪ss‬ك لينق‪ss‬ل مط‪ss‬ور‬
‫الويب من مرحلة المعرفة بأساسيات لغة ‪ CSS‬إىل االحتراف ويختصر عليك الوقت الطويل ويغنيك عن التجريب‬
‫والوقوع في الخطأ نفسه والتعلم منه‪ ،‬ويأتي الكت‪ss‬اب عىل ش‪ss‬كل نص‪ss‬ائح ومقتطف‪ss‬ات من مط‪ss‬ورين خ‪ss‬بروا اللغ‪ss‬ة‬
‫واستعملوها مرا ًرا وتكرا ًرا في مختلف المشاريع‪.‬‬
‫حول الكتاب‬
‫ه‪sss‬ذا الكت‪sss‬اب م‪sss‬ترجم عن كت‪sss‬اب "‪ "CSS Notes For Professionals‬المب‪sss‬ني عىل توثي‪sss‬ق موق‪sss‬ع‬
‫‪ StackOverflow‬وقد ساهم في إعداده عدد كبير من المس‪s‬اهمين عىل ش‪s‬بكة ‪ StackOverflow‬الش‪s‬هيرة لح‪s‬ل‬
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫تمهيد‬
‫المش‪ss‬اكل البرمجي‪ss‬ة‪ .‬وإن أردت االطالع عىل قائم‪ss‬ة المس‪ss‬اهمين الكامل‪ss‬ة‪ ،‬ارج‪ss‬ع إىل قس‪ss‬م "‪ "Credits‬في نهاي‪ss‬ة‬
‫الكتاب األصلي‪.‬‬
‫انتبه إىل أن هذا الكتاب ليس مثل غ‪ss‬يره من الكتب والش‪ss‬روحات ال‪ss‬تي تش‪ss‬رح لغ‪ss‬ة ‪ CSS‬من البداي‪ss‬ة ش‪ss‬رحًا‬
‫بس ًطا ومتسلساًل وإنَّما يعتمد عىل مبدأ خير الكالم ما قل ودل في الشرح وترك الشيفرة تشرح نفسها بنفس‪ss‬ها‪،‬‬
‫ُم َّ‬
‫َّ‬
‫يفض ‪s‬ل‬ ‫فيحوي عىل كم كبير من الشيفرات بالموازنة مع الشرح‪ُ .‬وجِّه هذا الكتاب لمن لديه معرفة بلغة ‪ ،CSS‬ل‪ss‬ذا‬
‫أن تمتلك خبرة بلغة ‪ SQL‬لتستفيد أكبر استفادة من هذا الكتاب وتقرأ الشيفرات وتفهمها وتتعلَّم منها‪ .‬في ه‪ss‬ذه‬
‫الحالة‪ ،‬سيساهم هذا الكتاب في رفع مستواك في لغة ‪ CSS‬وس ُيملِّكك مهارات متقدمة في استعمالها باإلضافة‬
‫إىل بعض الخدع وااللتفافات المتقدمة ً‬

‫أيضا‪.‬‬
‫قد تسأل نفسك‪ ،‬هل ينف‪ss‬ع أن اق‪ss‬رأ الكت‪ss‬اب دون معرف‪ss‬ة مس‪ss‬بقة بلغ‪ss‬ة ‪CSS‬؟ س‪ss‬أقول‪ ،‬نعم‪ ،‬ولكن يجب أن‬
‫تتحىل بالصبر في قراءة الش‪ss‬يفرة وتحليله‪ss‬ا وفهمه‪ss‬ا والبحث عن أي موض‪ss‬وع لم تفهم‪ss‬ه والس‪ss‬ؤال عن ش‪ss‬رح ألي‬
‫حا كبي ًرا للمواضيع التي يتحدث عنها الكتاب‪ ،‬كما أن تسلسل المواض‪s‬يع في‬
‫كالما وشر ً‬
‫ً‬ ‫شيفرة غامضة‪ ،‬إذ لن تجد‬
‫الكتاب ال تراعي عدم امتالك القارئ معرفة بلغة ‪.CSS‬‬
‫بذكر ترتيب عناوين ومواضيع الكتاب‪ ،‬ح‪s‬اولت ت‪s‬رتيب عن‪s‬اوين الكت‪ss‬اب بأنس‪ss‬ب ش‪ss‬كل لتك‪ss‬ون متدرِّج‪ss‬ة في‬
‫الصعوبة وحاولت جمع المواضيع المتشابهة في فصل واحد رغم تشرذمها وتفرقها في الكتاب األصلي فال تش‪ss‬به‬
‫النسخة العربية النسخة األجنبية مطل ًقا‪ ،‬إذ بذلت جهدًا لتكون أفضل منها‪ .‬فإن كنت عىل معرفة بأحد المواض‪s‬يع‪،‬‬
‫فال تتخطاها بل اقرأها‪ ،‬فقد تمر معك إش‪ss‬ارة لموض‪ss‬وع متق‪ss‬دم أو مالحظ‪ss‬ة مهم‪ss‬ة لم تكن تعرفه‪ss‬ا (ت‪ss‬ذكر أنَّ اس‪ss‬م‬
‫أيضا أن تقرأ الكتاب من أي قسم تريد فه‪ss‬و من األس‪ss‬اس غ‪ss‬ير ُم‪ s‬رتَّب ترتيبً‪ss‬ا‬
‫الكتاب مالحظات متقدمة)‪ .‬يمكنك ً‬
‫متدرجًا ومتسلساًل كما أشرت رغم محاولتي في ترتيبه لك أنسب ترتيب من البداية للنهاية‪.‬‬
‫أنشئ العمل األصلي من هذا الكتاب ألغراض تعليمية وال يتبع إىل أي شركة أو مجموعة رسمية متعلقة بلغة‬
‫‪ CSS‬وال حتى ش‪ss‬بكة ‪ ،StackOverflow‬كم‪ss‬ا أن جمي‪ss‬ع العالم‪ss‬ات التجاري‪ss‬ة الم‪ss‬ذكورة في ه‪ss‬ذا الكت‪ss‬اب تتب‪ss‬ع إىل‬
‫الشركات المالكة لها‪.‬‬
‫ماذا بعد هذا الكتاب‬

‫عند االنتهاء من هذا الكتاب‪ ،‬يمكنك االطالع عىل العديد من المقاالت العملية في أكاديمي‪ss‬ة حس‪ss‬وب‪ .‬أثن‪ss‬اء‬
‫ذلك‪ ،‬يمكنك التنقل بين توثيق لغة ‪ CSS‬في موسوعة حسوب وفصول هذا الكتاب‪.‬‬
‫ي شخص ملم بالبرمجة أن يساهم في المش‪ss‬اريع مفتوح‪ss‬ة المص‪ss‬در‪ .‬ال‪ss‬برامج مفتوح‪ss‬ة المص‪ss‬در هي‬
‫يمكن أل ِّ‬
‫برامج متاحة لالستخدام وإعادة التوزيع والتعديل دون قيود‪ .‬تساعد المساهمة في المشاريع مفتوحة المصدر عىل‬
‫تحسين البرامج‪ ،‬عبر ضمان تمثيلها لقاعدة عريضة من المستخدمين‪ .‬عندما يساهم المستخدمون في المش‪ss‬اريع‬
‫مفتوحة المص‪ss‬در‪ ،‬س‪ss‬واء ع‪ss‬بر كتاب‪ss‬ة الش‪ss‬يفرة‪ ،‬أو التوثي‪ss‬ق‪ ،‬أو ص‪ss‬يانة المجل‪ss‬دات‪ ،‬ف‪ss‬إنَّهم ي‪ss‬وفرون قيم‪ss‬ة مض‪ss‬افة‬
‫للمشروع‪ ،‬ومجتمع المطورين عىل العموم‪.‬‬
‫‪19‬‬
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫تمهيد‬
‫للحصول عىل مراجع إضافية عن ‪ ،CSS‬أو للمشاركة في نقاشات مع اآلخرين‪ ،‬يمكنك االطالع عىل المق‪ss‬االت‬
‫واألسئلة والدروس عن ‪ CSS‬في أكاديمية حسوب‪.‬‬
‫مهتما بتعلم تطوير تطبيقات الويب‪ ،‬أو تعلم لغات مح ‪s‬دَّدة مث‪ss‬ل ‪ PHP‬وجافاس‪ss‬كربت‪ ،‬ف‪ss‬اطلع عىل‬
‫ً‬ ‫إذا كنت‬
‫قسم الدورات في األكاديمية‪ ،‬كما يمكنك تصفح موس‪s‬وعة حس‪s‬وب ألج‪s‬ل ق‪s‬راءة توثيق‪s‬ات ع‪s‬دد كب‪s‬ير من لغ‪s‬ات‬
‫البرمجة باللغة العربية‪.‬‬
‫جميل بيلوني‬
‫‪16/01/2023‬‬
‫‪20‬‬
‫‪ .1‬أساسيات لغة ‪CSS‬‬
‫يوضح الجدول التالي إصدارات ‪:CSS‬‬
‫تاريخ الصدور‬ ‫اإلصدار‬

‫‪17-12-1996‬‬ ‫‪CSS1‬‬
‫‪12-5-1998‬‬ ‫‪CSS2‬‬
‫‪13-10-2015‬‬ ‫‪CSS3‬‬
‫‪ 1.1‬إضافة تنسيقات ‪ CSS‬للصفحات‬
‫‪ 1.1.1‬التنسيقات الخارجية ‪External Styles‬‬

‫تُضاف ملفات ‪ CSS‬الخارجية إىل صفحات ‪ HTML‬عن طريق الوسم <‪ ،>link‬حيث تح‪s‬دد الخاص‪s‬ية ‪href‬‬
‫في‪ss‬ه إىل مس‪ss‬ار المل‪ss‬ف‪ ،‬وتأخ‪ss‬ذ الخاص‪ss‬ية ‪ rel‬القيم‪ss‬ة ‪ ،stylesheet‬أم‪ss‬ا الخاص‪ss‬ية ‪ type‬فيمكن تجاهلها أو‬
‫إعطائها القيم‪ss‬ة ‪ .text/css‬ومن األفض‪ss‬ل إض‪ss‬افة ه‪ss‬ذا الوس‪ss‬م داخ‪ss‬ل الوس‪ss‬م <‪ >head‬لض‪ss‬مان تحمي‪ss‬ل مل‪ss‬ف‬
‫نس‪s‬قة‬
‫نسقة فو ًرا‪ ،‬وفيما عدا ذلك س‪ss‬تظهر العناص‪ss‬ر غ‪ss‬ير ُم َّ‬
‫التنسيقات قبل تحميل العناصر مما يؤدي لظهورها ُم َّ‬
‫لفترة قصيرة حتى يكتمل تحميل ملف التنسيقات‪.‬‬
‫تتكون قواعد ‪ CSS‬من ُمحدَّد ‪ ،selector‬وكتلة التعريفات ‪:declaration block‬‬
‫}{ ‪h1‬‬
‫المحدد ‪/* h1:‬‬
‫كتلة التعريفات ‪{}:‬‬
‫‪*/‬‬
CSS ‫مالحظات للعاملين بلغة‬ CSS ‫أساسيات لغة‬
:‫مثال‬
HTML ‫ملف‬ •
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>I ♥ CSS</p>
</body>
</html>
style.css ‫ملف‬ •
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
‫ر‬s‫د آخ‬s‫ل مجل‬ss‫ف داخ‬s‫ان المل‬ss‫ وإذا ك‬،CSS ‫ف‬ss‫حيح لمل‬ss‫ تشير للمسار الص‬href ‫دائما أن الخاصية‬
ً ‫ تأكد‬،‫انتبه‬
:‫ينبغي تحديد ذلك المجلد كما هو موضح بالشيفرة التالية‬
<link rel="stylesheet" type="text/css" href="foldername/style.css" />
‫ل‬ss‫ع ك‬ss‫ا تجم‬ss‫ذلك ألنه‬ss‫ل ول‬ss‫ة األفض‬ss‫ارجي هي الطريق‬ss‫ خ‬CSS ‫ف‬ss‫ق مل‬ss‫يقات عن طري‬ss‫افة التنس‬ss‫بر إض‬ss‫وتعت‬
.‫التنسيقات في ملف مركزي واحد مما يُس ِّهل الرجوع إليه وتعديله في المستقبل‬
: ‫ مثاًل‬،‫ الخارجية‬CSS ‫أيضا إضافة عدد من ملفات‬

ً ‫ومن الممكن‬
<link rel="stylesheet" type="text/css" href="main.css" />
22
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫أساسيات لغة ‪CSS‬‬
‫>‪<link rel="stylesheet" type="text/css" href="override.css" /‬‬
‫وفي هذه الحالة ينبغي مراعاة ترتيب الملفات عند كتاب‪ss‬ة التنس‪ss‬يقات‪ ،‬فعىل س‪ss‬بيل المث‪ss‬ال إذا ك‪ss‬ان المل‪s‬ف‬
‫‪ main.css‬يحوي القاعدة التالية والتي تجعل جميع الفقرات ذات الصنف ‪ green‬تظهر باللون األخضر الفاتح‪.‬‬
‫} ;‪p.green { color: #00FF00‬‬
‫وكان الملف ‪ override.css‬يحوي القاعدة الموضحة أدناه والتي تجعل لون الفقرات أخضر غام ًقا‬
‫} ;‪p.green { color: #006600‬‬
‫حمل‬
‫فإن النتيجة النهائية ستكون ظهور الفقرات باللون األخضر الغامق بس‪ss‬بب أن المل‪ss‬ف ‪ override.css‬يُ َّ‬
‫إىل المتصفح بعد الملف ‪ main.css‬مما يُجبر المتصفح عىل تط‪s‬بيق القواع‪s‬د الم‪s‬ذكورة في‪ss‬ه وس‪s‬تطغى القواع‪s‬د‬
‫الموجودة فيه مع أي قواعد سابقة تتعارض معها وتلغيها‪.‬‬
‫هناك بعض القواعد والمميزات مثل القاعدة !‪ important‬والوراثة وأعماق التحديد والتي تمكنك من التحكم‬
‫في كيفية تطبيق الخواص‪ ،‬وستُناقش هذه القواعد الح ًقا‪.‬‬
‫تُ َّ‬
‫حمل ملفات ‪ CSS‬الخارجية مرة واحدة فقط عند تحميل الصفحة للمرة األوىل‪ ،‬وتبقى محفوظة في ذاكرة‬
‫المتصفح عند التنقل بين الصفحات مما يؤدي لتحميلها بشكل أسر ع‪.‬‬
‫‪ 1.1.2‬التنسيقات الداخلية ‪Internal Styles‬‬

‫يمكن إضافة تنسيقات ‪ CSS‬داخل ملف ‪ HTML‬مباشرة‪ ،‬وذلك عن طريق كتابتها بين الوسمين‪:‬‬
‫>‪<style> ... </style‬‬
‫ويجب وضعها داخل الوسم <‪ .>head‬إليك مثال‪:‬‬
‫ملف ‪HTML‬‬ ‫•‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{ ‪h1‬‬
‫;‪color: green‬‬
‫;‪text-decoration: underline‬‬
‫}‬
‫{ ‪p‬‬
‫‪23‬‬
‫;‪font-size: 25px‬‬
‫;‪font-family: 'Trebuchet MS', sans-serif‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>Hello World</h1‬‬
‫>‪<p>I ♥ CSS</p‬‬
‫>‪</body‬‬
‫‪ 1.1.3‬القاعدة ‪@import‬‬
‫تُستعمل القاعدة ‪ @import‬الستيراد قواعد ‪ CSS‬من ملفات أخ‪s‬رى‪ ،‬ويجب أن تس‪s‬بق ه‪s‬ذه القاع‪ss‬دة جمي‪ss‬ع‬
‫القواع‪ss‬د األخ‪ss‬رى ع‪ss‬دا القاع‪ss‬دة ‪ ،@charset‬وال يمكن اس‪ss‬تعمالها داخ‪ss‬ل قواع‪ss‬د @ مث‪ss‬ل قواع‪ss‬د اس‪ss‬تعالمات‬
‫الوسائط وغيرها‪.‬‬
‫يمكن استخدام القاعدة ‪ @import‬في التنسيقات الداخلية بالشكل التالي‪:‬‬
‫>‪<style‬‬
‫;)'‪@import url('/css/style.css‬‬
‫المراد استيراده‪.‬‬
‫حيث تحدد الخاصية ‪ url‬مسار الملف ُ‬
‫يمكن ً‬
‫أيضا استعمالها في ملفات التنسيقات الخارجية‪ ،‬حيث تستورد الش‪ss‬يفرة أدن‪ss‬اه المل‪ss‬ف ‪additional-‬‬
‫‪ styles.css‬إىل ملف ‪ CSS‬الرئيسي‪:‬‬
‫;'‪@import '/additional-styles.css‬‬
‫ومن الشائع استعمال القاعدة ‪ @import‬الستيراد الخطوط من الويب كما هو موضح في الشيفرة التالية‪:‬‬
‫;'‪@import 'https://fonts.googleapis.com/css?family=Lato‬‬
‫ويمكن إض‪s‬افة اس‪s‬تعالمات الوس‪s‬ائط كمع‪s‬امالت اختياري‪ss‬ة للقاع‪s‬دة ‪ ،@import‬وفي ه‪s‬ذه الحالي‪s‬ة تُس‪s‬تورد‬
‫الملفات المحددة فقط في حالة استيفاء شروط استعالمات الوسائط‪.‬‬
‫;‪@import '/print-styles.css' print‬‬

‫;)‪@import url('landscape.css') screen and (orientation: landscape‬‬
‫‪24‬‬
‫‪ 1.1.4‬التنسيقات السطرية ‪Inline Styles‬‬

‫ً‬
‫مباشرة‪ ،‬وتستبدل القواع‪ss‬د المح‪ss‬ددة‬ ‫تُستعمل التنسيقات السطرية لتطبيق األنماط عىل عنصر محدد داخله‬
‫في الملفات الخارجية أو في الوسم <‪ >style‬في حال حدوث أي تعارض‪.‬‬
‫من األفضل استخدام الملفات الخارجية أو الوسم <‪ >style‬لتطبيق التنسيقات‪ ،‬وذلك للفصل بين البنية‬
‫الهيكلية للصفحة (ملف ‪ )HTML‬والتنسيقات مما يسهل الرجوع إليها وتعديلها‪.‬‬
‫مثال‪:‬‬
‫>";‪<h1 style="color: green; text-decoration: underline‬‬

‫!‪Hello World‬‬
‫>‪</h1‬‬
‫>";'‪<p style="font-size: 25px; font-family: 'Trebuchet MS‬‬
‫‪I ♥ CSS‬‬
‫>‪</p‬‬
‫ومن مميزات التنسيقات السطرية أنَّها تضمن تطبيق التنسيقات عىل العناصر دون أن تتخطاه‪ss‬ا أي قاع‪ss‬دة‬
‫خصوص ‪s‬ا في الص‪ss‬فحات‬

‫ً‬ ‫أو خاص‪ss‬ية‪ ،‬ولكنَّه‪ss‬ا تس‪ss‬تغرق وق ًت‪ss‬ا ط‪ss‬وياًل في الكتاب‪ss‬ة وتص‪ss‬عب مراجعته‪ss‬ا وتع‪ss‬ديلها‬
‫والمواقع الكبيرة‪.‬‬
‫‪ 1.1.5‬التحكم في تنسيقات ‪ CSS‬باستخدام جافاسكربت‬

‫يمكن إضافة أو حذف أو تعديل قواعد ‪ CSS‬باستخدام جافاسكربت عن طريق الخاصية ‪.style‬‬
‫;)"‪var el = document.getElementById("element‬‬
‫;‪el.style.opacity: 0.5‬‬
‫;'‪el.style.fontFamily: 'sans-serif‬‬
‫ينبغي مالحظة استخدام نمط سنام الجمل المنخفض ‪ lower camel case‬لكتابة أس‪ss‬ماء الخاص‪ss‬يات في‬
‫جافاسكربت‪ ،‬فمثاًل الخاصية ‪ font-family‬في ‪ CSS‬تصبح ‪ fontFamily‬في جافاسكربت‪.‬‬
‫ومن الممكن ً‬
‫أيضا إنشاء عنصر <‪ >style‬وإضافة قواعد ‪ CSS‬بداخل‪ss‬ة أو إنش‪ss‬اء عنص‪ss‬ر <‪ >link‬يش‪ss‬ير إىل‬
‫ملف ‪ CSS‬ومن ثم إسناده إىل الصفحة باستخدام جافاسكربت‪،‬‬
‫‪ 1.1.6‬استخدام ‪jQuery‬‬
‫إليك المثال التالي للتحكم في خاصية واحدة‪:‬‬
‫‪25‬‬
‫;)'‪$('#element').css('margin', '5px‬‬
‫انظر ً‬
‫أيضا المثال للتحكم في عدد من الخاصيات‪:‬‬
‫{(‪$('#element').css‬‬
‫‪margin: "5px",‬‬
‫‪padding: "10px",‬‬
‫"‪color: "black‬‬
‫;)}‬
‫بالنسبة للخواص التي تتكون من أكثر من كلم‪ss‬ة مث‪ss‬ل الخاص‪ss‬ية ‪ ،font-size‬فيمكن كتابته‪ss‬ا بين عالم‪ss‬تي‬
‫تنصيص أو استعمال نمط سنام الجمل لكتابتها‪.‬‬
‫{(‪$('.example-class').css‬‬
‫‪"background-color": "blue",‬‬
‫"‪fontSize: "10px‬‬
‫;)}‬
‫للمزيد من المعلومات انظر توثيق ‪.jQuery‬‬
‫‪ 1.2‬هيكلة وصياغة قواعد ‪CSS‬‬

‫تأخذ بعض خاصيات ‪ CSS‬أكثر من قيمة واحدة‪ ،‬وتسمى مجموعة هذه القيم قائمة الخاصية‪.‬‬
‫{ ‪span‬‬
‫;‪text-shadow: yellow 0 0 3px, green 4px 4px 10px‬‬
‫}‬
‫{ ‪span‬‬
‫‪text-shadow:‬‬
‫‪yellow 0 0 3px,‬‬
‫;‪green 4px 4px 10px‬‬
‫}‬
‫تُمكنك ‪ً CSS‬‬
‫أيضا من تطبيق التنسيقات عىل عدد من العناص‪ss‬ر دون إع‪ss‬ادة كتابته‪ss‬ا لك‪ss‬ل عنص‪ss‬ر عىل ح‪ss‬دة‪،‬‬
‫وذلك عن طريق استخدام المحدِّدات المتعددة كما هو موضح في األمثلة التالية‪:‬‬
‫‪26‬‬
‫} ;‪div, p { color: blue‬‬

‫{ ‪p, .blue, #first, div span‬‬
‫;‪color: blue‬‬
‫}‬
‫ضع في بالك ما يلي‪:‬‬
‫ينبغي الفصل بين المحددات بفاصلة‪.‬‬ ‫•‬
‫في حال عدم وضع الفاصلة كما في ‪ ،div span‬فتُطبق التنسيقات عىل عناصر ‪ span‬الموجودة داخل‬ ‫•‬
‫عناصر ‪ div‬فقط‪.‬‬
‫‪ 1.3‬التعليقات ‪Comments‬‬
‫تُكتب التعليق‪ss‬ات بين العالم‪ss‬تين ‪ */‬و *‪ ، /‬ويمكن أن تك‪ss‬ون من س‪ss‬طر واح‪ss‬د (المث‪ss‬ال األول) أو ع‪ss‬دد من‬
‫األسطر (كما في المثال الثاني)‪.‬‬
‫{ ‪div‬‬
‫‪ */‬هذا تعليق من سطر واحد *‪color: red; /‬‬
‫}‬
‫*‪/‬‬
‫تعليق‬
‫من‬
‫أربعة‬
‫أسطر‬
‫‪*/‬‬
‫{ ‪div‬‬
‫;‪color: red‬‬
‫}‬
‫‪ 1.4‬المحددات ‪Selectors‬‬
‫تُستعمل المحددات لتحديد أو استهداف عناصر ‪ُ HTML‬‬

‫المراد تطبيق قواعد ‪ CSS‬عليها‪ .‬وتحت‪ss‬وي ‪ CSS‬عىل‬
‫والمعرِّف‪ss‬ات ‪،IDs‬‬
‫ُ‬ ‫أكثر من ‪ 50‬نوع من أنواع المحددات منها محددات العناصر ‪ ،elements‬واألصناف ‪،classes‬‬
‫والعناصر الزائفة ‪ ،pseudo-elements‬واألصناف الزائفة ‪.pseudo-classes‬‬
‫يوضح الجدول التالي المحددات األساسية في ‪:CSS‬‬
‫‪27‬‬
‫الوصف‬ ‫المحدد‬
‫المحدِّد العام‪ ،‬ويُحدد جميع العناصر‪.‬‬
‫ُ‬ ‫*‬
‫محدد الوسوم‪ ،‬ويُحدد جميع العناصر التي لها وسم ُمعين‪.‬‬ ‫‪div‬‬
‫صنف ‪ُ class‬معين‪.‬‬
‫ُمحدد الصنف‪ ،‬ويُحدد جميع العناصر التي لها ِ‬ ‫‪.blue‬‬
‫يُحدد جميع العناصر التي لها الصنفين ‪ blue‬و ‪ red‬معً ا‪.‬‬ ‫‪.blue.red‬‬
‫المعرِّف‪ ،‬ويُحدد جميع العناصر التي لها ُمعرِّف ‪ُ Id‬معين‪.‬‬

‫ُمحدد ُ‬ ‫‪#headline‬‬
‫محددات األصناف الزائفة‪.‬‬ ‫‪::pseudo-class‬‬
‫محددات العناصر الزائفة‪.‬‬ ‫‪::pseudo-element‬‬
‫يُحدد العناصر ذات القيمة ‪ en‬للخاصية‪ :lang‬مثاًل العنصر‪.‬‬ ‫(‪:lang(en‬‬
‫محدد األبناء‪.‬‬ ‫‪div > p‬‬
‫ً‬
‫فريدة لكل عنصر في المستند‪ ،‬وال يجوز تكرارها أبدًا‪.‬‬ ‫معيار ‪ HTML5‬يقول أنَّ قيمة الخاصية ‪ id‬يجب أن تكون‬
‫انظر قائمة محددات ‪ CSS‬في توثيق ‪ CSS‬العربي‪.‬‬
‫‪ 1.4.1‬محددات الخاصيات ‪Attribute Selectors‬‬

‫ُمحدِّد الخاصيات ‪ attribute selector‬في ‪ CSS‬يُطابِق العناصر إذ وجدت فيها خاص‪ss‬ية م‪ss‬ا أو ك‪ss‬انت تل‪ss‬ك‬
‫الخاصية تملك قيمة مع ّينة‪.‬‬
‫إصدار‬
‫الوصف‬ ‫العُ نصر المطابق‬ ‫المُ حدد‬
‫‪CSS‬‬
‫يُطابق العناصر ذات الخاصية‬
‫‪2‬‬ ‫<‪>div attr‬‬ ‫[‪]attr‬‬
‫‪.attr‬‬
‫يطابق العناصر التي لها القيمة ‪val‬‬

‫‪2‬‬ ‫<'‪>div attr='val‬‬ ‫['‪]attr='val‬‬
‫للخاصية ‪.attr‬‬
‫يطابق العناصر التي تظهر فيها‬

‫‪2‬‬ ‫<'‪ >div attr='val val2 val3‬القيمة ‪ val‬كإحدى قيم الخاصية‬ ‫['‪]attr~='val‬‬
‫‪.attr‬‬
‫يطابق العناصر التي تبدأ قيمة‬

‫‪3‬‬ ‫<'‪>div attr='val1 val2‬‬ ‫['‪]attr^='val‬‬
‫الخاصية ‪ attr‬فيها بالكلمة ‪.val‬‬
‫يطابق العناصر التي تنتهي قيمة‬

‫‪3‬‬ ‫<'‪>div attr='sth aval‬‬ ‫['‪]attr$='val‬‬
‫الخاصية ‪ attr‬فيها بالكلمة ‪.val‬‬
‫يطابق العناصر التي تحتوي قيمة‬

‫‪3‬‬ ‫الخاصية ‪ attr‬فيها عىل الكلمة‬ ‫<'‪>div attr='somevalhere‬‬ ‫['‪]attr*='val‬‬
‫‪.val‬‬
‫‪28‬‬
‫إصدار‬
‫الوصف‬ ‫العُ نصر المطابق‬ ‫المُ حدد‬
‫‪CSS‬‬
‫‪2‬‬ ‫للخاصية ‪ ،attr‬أو تبدأ بالكلمة‬ ‫['‪>div attr='val-sth etc'< ]attr\|='val‬‬
‫‪ val‬متبوعة بالمحرف (‪.)-‬‬

‫‪)2(4‬‬ ‫للخاصية ‪ ،attr‬مع تجاهل حالة‬ ‫[‪>div attr='val'< ]attr='val' i‬‬
‫األحرف‪.‬‬
‫انتبه إىل ما يلي‪:‬‬
‫‪ .1‬يجب وضع قيم الخواص بين عالمات تنصيص مزدوجة ("") أو مفردة ('')‪.‬‬
‫مقسمة إىل عدد من الوحدات‪ .‬لمزيد من المعلومات انظر دعم‬

‫َّ‬ ‫‪ .2‬ال توجد إصدارة متكاملة من ‪ ،CSS4‬ألنها‬
‫المتصفحات‪.‬‬
‫ا‪ .‬المحدد [‪]attribute‬‬
‫يُحدد العناصر التي تمتلك خاصية معينة‪.‬‬
‫>‪<style‬‬
‫{ ]‪div[data-color‬‬
‫}‬
‫>‪<div data-color="red">This will be red</div‬‬

‫>‪<div data-color="green">This will be red</div‬‬
‫>‪<div data-background="red">This will NOT be red</div‬‬
‫اطلع عىل تجربة ح َّية عىل ‪.JSBin‬‬

‫ّ‬
‫ب‪ .‬المحدد ["‪]attribute="value‬‬
‫يُحدد العناصر التي لها قيمة ُمعينة للخاصية‪.‬‬
‫‪29‬‬
<style>
div[data-color="red"] {
color: red;
}
</style>
<div data-color="red">This will be red</div>

<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>
.JSBin ‫اطلع عىل تجربة ح َّية عىل‬

َّ
]attribute*="value"[ ‫ المحدد‬.‫ج‬
.‫يُحدد العناصر التي لها تحتوي قيمة الخاصية فيها عىل كلمة معينة‬
:‫مثال‬
<style>
[class*="foo"] {
color: red;
}
</style>
<div class="foo-123">This will be red</div>

<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

َّ
]attribute~="value"[ ‫ المحدد‬.‫د‬
.‫ كإحدى قيم الخاصية‬value ‫يُحدد العناصر التي تظهر فيها القيمة‬
:‫مثال‬
<style>
[class~="color-red"] {
30
color: red;
}
</style>
<div class="color-red foo-bar the-div">This will be red</div>

<div class="color-blue foo-bar the-div">This will NOT be red</div>

َّ
]attribute^="value"[ ‫ المحدد‬.‫ه‬
.‫يُحدد العناصر التي تبدأ قيمة الخاصية فيها بكلمة معينة‬
:‫مثال‬
<style>
[class^="foo-"] {
color: red;
}
</style>

<div class="bar-123">This will NOT be red</div

ّ
]attribute$="value"[ ‫ المحدد‬.‫و‬
.‫يُحدد العناصر التي تنتهي قيمة الخاصية فيها بكلمة معينة‬
:‫مثال‬
<style>
class$="file"] {
color: red;
}
</style>
<div class="foobar-file">This will be red</div>
31
<div class="foobar-file">This will be red</div>

<div class="foobar-input">This will NOT be red</div>

َّ
]attribute|="value"[ ‫ المحدد‬.‫ز‬
.)-( ‫ متبوعة بالمحرف‬value ‫ أو تبدأ بالكلمة‬،‫ للخاصية‬value ‫يطابق العناصر التي لها القيمة‬
:‫مثال‬
<style>
[lang|="EN"] {
color: red;
}
</style>
<div lang="EN-us">This will be red</div>

<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

َّ
]attribute="value" i[ ‫ المحدد‬.‫ح‬
.‫ مع تجاهل حالة األحرف‬،‫يُحدد العناصر التي لها قيمة ُمعينة للخاصية‬
:‫مثال‬
<style>
[lang="EN" i] {
color: red;
}
</style>
<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

ّ
32
‫الم ِّ‬
‫جمعات ‪Combinators‬‬ ‫ُ‬ ‫‪1.4.2‬‬
‫الوصف‬ ‫المحدد‬
‫بفراغ واحد‬
‫ٍ‬ ‫ً‬
‫عادة‬ ‫ُمحدِّد العناصر السليلة ‪ descendant combinator‬في ‪ CSS‬الذي يُم َّثل‬
‫‪div span‬‬
‫ويطابِق العنصر الثاني إذا كان ابنًا للعنصر األول‪.‬‬
‫ويفصل بين ُمحدِّدين‪ُ ،‬‬
‫ويطابِق‬
‫ُمحدِّد العناصر األبناء ‪ child combinator‬في ‪ CSS‬رمزه > ويفصل بين ُمحدِّدين‪ُ ،‬‬
‫‪div > span‬‬
‫العنصر الثاني إذا كان ابنًا للعنصر األول‪.‬‬
‫ُمحدِّد العناصر األخوة العامة ‪ general sibling combinator‬في ‪ CSS‬رمزه ~ ويفصل بين‬
‫ُمحدِّدين‪ ،‬ويطابق العنصر الثاني إذا أتى بعد العنصر األول (وليس بالضرورة أن يأتي بعده‬ ‫‪a ~ span‬‬
‫مباشر ًة)‪ ،‬وكان كال العنصرين ابنا ًء لعنصر أب مشترك‪.‬‬
‫ُمحدِّد العناصر األخوة المتجاورة ‪ adjacent sibling combinator‬في ‪ CSS‬رمزه ‪ +‬ويفصل‬

‫ويطابِق العنصر الثاني إذا أتى مباشر ًة بعد العنصر األول وكان كال العنصرين‬
‫بين ُمحدِّدين‪ُ ،‬‬ ‫‪a + span‬‬
‫أبنا ًء لعنصر أب مشترك‪.‬‬
‫ُمحددات العناصر المتجاورة تُحدد العناصر التالية لعنصر ُمعين‪ ،‬ولكن يُمكن استعمال الخاصية ‪flex orde‬‬
‫لتحديد العناصر السابقة‪.‬‬
‫ا‪ُ .‬‬
‫محدد العنارص السليلة ‪Descendant Combinator‬‬
‫>‪<style‬‬
‫{ ‪div p‬‬
‫;‪color:red‬‬
‫}‬
‫>‪<div‬‬
‫>‪<p>My text is red</p‬‬
‫>‪<section‬‬
‫>‪</section‬‬
‫>‪</div‬‬
‫>‪<p>My text is not red</p‬‬

‫َّ‬
‫‪33‬‬
ُ .‫ب‬
Child Combinator ‫محدد العنارص األبناء‬
<style>
div > p {
color:red;
}
</style>
<div>
<p>My text is red</p>
<section>
<p>My text is not red</p>
</section>
</div>

ّ
ُ .‫ج‬
Adjacent Sibling Combinator ‫محدد العنارص اإلخوة المتجاورة‬
<style>
p + p {
color:red;
}
</style>
<hr>

َّ
ُ .‫د‬
General Sibling Combinator ‫محدد العنارص اإلخوة العامة‬
<style>
p ~ p {
color:red;
}
</style>
34
‫>‪<p>My text is not red</p‬‬

‫>‪<hr‬‬
‫>‪<h1>And now a title</h1‬‬

‫ّ‬
‫‪ 1.4.3‬األصناف الزائفة ‪pseudo-classes‬‬

‫األصناف الزائفة هي كلمات مفتاحية تس‪ss‬مح بتحدي‪ss‬د العناص‪ss‬ر بن‪ss‬ا ًء عىل معلوم‪ss‬ات غ‪ss‬ير مت‪ss‬وفرة في البني‪ss‬ة‬
‫الشجرية للصفحة‪ ،‬مثال لذلك تحديد العناصر بنا ًء عىل حالة أو ديناميكية العنصر‪ ،‬أو بنا ًء عىل الموق‪ss‬ع (األص‪ss‬ناف‬
‫الزائفة للبنية الهيكلية واالستهداف)‪ ،‬أو استعمال األصناف الزائفة لنفي تحديد عنصر معين‪ ،‬أو لتحدي‪ss‬د العناص‪ss‬ر‬
‫بنا ًء عىل اللغة المستخدمة فيها‪.‬‬
‫الصيغة العامة‪:‬‬
‫{ ‪selector:pseudo-class‬‬
‫;‪property: VALUE‬‬
‫}‬
‫إليك الجدول التالي الذي يشرح قائمة األصناف الزائفة‪.‬‬
‫الوصف‬ ‫االسم‬
‫يُحدد العناصر التي جرى تفعيلها من المستخدم ‪ ،active elements‬ويُ َفعَّل‬
‫‪:active‬‬
‫العنصر عندما يضغط المستخدم عليه بزر الفأرة الرئيسي‪.‬‬
‫يُمكن من إنشاء مجموعة من المحددات بحيث تُحدِّد العناصر التي تمتلك هذه‬
‫‪:any‬‬
‫المجموعة‪.‬‬
‫قسما من رابط الصفحة‪.‬‬

‫ً‬ ‫يُحدد عنصرًا فريدًا يُطابِق ُمعرِّفه ‪id‬‬ ‫‪:target‬‬
‫يُحدد أزرار االنتقاء ‪ radio button‬أو صناديق التأشير ‪ checkbox‬أو الخيارات‬

‫‪:checked‬‬
‫<‪ >option‬في عنصر <‪ >select‬التي قام المستخدم بتحديدها أو انتقائها‪.‬‬
‫يُم ِّثل أي عنصر ُمختار افتراض ًيا بين مجموعة من العناصر المتعلقة به‪.‬‬ ‫‪:default‬‬
‫يُم ِّثل أي عنصر ُم َّ‬

‫عطل‪ ،‬وال يمكن اختياره أو النقر عليه أو الكتابة فيه‪.‬‬ ‫‪:disabled‬‬
‫يُم ِّثل أي عنصر ليس له أبناء‪.‬‬ ‫‪:empty‬‬
‫يُم ِّثل أي عنصر ُمفعّ ل‪ ،‬أي يمكن اختياره أو النقر عليه أو الكتابة فيه‪.‬‬ ‫‪:enabled‬‬
‫ستعمل مع القاعدة ‪ ،@page‬ويُم ِّثل أ ّول صفحة من المستند عند طباعته‪.‬‬

‫َ‬ ‫يُ‬ ‫‪:first‬‬
‫يُم ِّثل أ ّول عنصر في مجموعة من العناصر األخوة‪.‬‬ ‫‪:first-child‬‬
‫‪35‬‬
‫يُم ِّثل أ ّول عنصر من نوعه في مجموعة من العناصر األخوة‪.‬‬ ‫‪:first-of-type‬‬
‫يُم ِّثل عنص ًرا (مثل عناصر النماذج) استقبل التركيز ‪ ،focus‬ويُفعَّ ل التركيز إذا‬
‫ضغط المستخدم أو لمس أحد العناصر أو وصل إليه عبر مفتاح ‪ tab‬عىل لوحة‬ ‫‪:focus‬‬
‫المفاتيح‪.‬‬
‫يُم ِّثل عنصرًا (مثل عناصر النماذج) استقبل التركيز ‪ foucs‬أو احتوى عىل عنصر قد‬
‫‪:focus-within‬‬
‫استقبل التركيز‪،‬‬
‫م ِّثل العناصر التي تُعرَض عندما يكون المتصفح في وضع ملء الشاشة‪.‬‬ ‫‪:full-screen‬‬
‫يُطابِق العناصر التي يتفاعل المستخدم معها عبر الفأرة لكن ليس بالضرورة أن‬
‫ً‬
‫عادة عندما يمرر المستخدم مؤشر الفأرة فوق‬ ‫يفعِّلها‪ ،‬ويُفعَّ ل هذا الصنف الزائف‬ ‫‪:hover‬‬
‫العنصر‪.‬‬
‫يُم ِّثل أيّة نماذج تكون حالتها غير معروفة‪.‬‬ ‫‪:indeterminate‬‬
‫يُم ِّثل أيّة عناصر <‪ >input‬التي تكون قيمتها ضمن المجال المسموح ُ‬
‫المحدَّد‬
‫‪:in-range‬‬
‫عبر الخاصيتين ‪ min‬و ‪.max‬‬
‫يُم ِّثل أيّة عناصر <‪ >input‬أو <‪ >form‬التي فشل التحقق من صحة محتوياتها‪.‬‬ ‫‪:invalid‬‬
‫يطابق العناصر اعتمادًا عىل لغتها‪.‬‬ ‫‪:lang‬‬
‫يُم ِّثل آخر عنصر في مجموعة من العناصر األخوة‪.‬‬ ‫‪:last-child‬‬
‫يُم ِّثل آخر عنصر من نوعه في مجموعة من العناصر األخوة‪.‬‬ ‫‪:last-of-type‬‬
‫ستعمل مع القاعدة ‪ ،@page‬ويُم ِّثل الصفحات اليسارية ‪ left hand pages‬من‬

‫َ‬ ‫يُ‬
‫‪:left‬‬
‫المستند عند طباعته‪.‬‬
‫يُم ِّثل عنص ًرا لم تتم زيارته من قبل‪ ،‬ويُطابِق جميع عناصر والتي لها الخاصية‬
‫‪:link‬‬
‫‪ href‬ولم تتم زيارتها بعد‪.‬‬
‫م ِّثل العناصر التي ال تُطابِق ُمح ِّ‬

‫ددًا أو أكثر‪ ،‬يسمى هذا الصنف ً‬
‫أيضا بصنف النفي‬
‫)(‪:not‬‬
‫الزائف‪.‬‬
‫طابِق عنص ًرا أو أكثر بنا ًء عىل موقعه ضمن مجموعة من العناصر األخوة‪.‬‬ ‫‪:nth-child‬‬
‫يُطابِق عنص ًرا أو أكثر بنا ًء عىل موقعه ضمن مجموعة من العناصر األخوة‬
‫‪:nth-of-type‬‬
‫‪ ،siblings‬وذلك بدءًا من نهاية المجموعة‪.‬‬
‫المحدِّد يماثل ‪:first-‬‬

‫يُطابِق عنص ًرا ال يملك أيّة عناصر أخوة‪ ،‬وهذا ُ‬
‫‪ child:last-child‬أو )‪ :nth-child(1):nth-last-child(1‬لكن‬ ‫‪:only-child‬‬
‫درجة التحديد له أقل‪.‬‬
‫يُم ِّثل أيّة عناصر <‪ >input‬أو <‪ >select‬أو <‪ >textarea‬التي لم تُضبَط‬
‫‪:optional‬‬
‫الخاصية ‪ required‬عليها‪.‬‬
‫يُم ِّثل أيّة عناصر <‪ >input‬التي ال تكون قيمتها ضمن المجال المسموح ُ‬
‫المحدَّد‬
‫‪:out-of-range‬‬
‫عبر الخاصيتين ‪ min‬و ‪.max‬‬
‫‪36‬‬
‫نصا بدياًل ‪placeholder‬‬ ‫يُم ِّثل أي عنصر <‪ >input‬أو <‪ >textarea‬الذي يُ ِ‬
‫ظهر ً‬
‫‪:placeholder-shown‬‬
‫‪.text‬‬
‫يُم ِّثل أي عنصر فيه محتوى نصي ال يمكن للمستخدم تعديله‪.‬‬ ‫‪:read-only‬‬
‫يُم ِّثل أي عنصر فيه محتوى نصي يمكن للمستخدم تعديله‪.‬‬ ‫‪:read-write‬‬
‫ستعمل مع القاعدة ‪ ،@page‬ويُم ِّثل الصفحات اليمينية ‪right hand pages‬‬

‫َ‬ ‫يُ‬
‫‪:right‬‬
‫من المستند عند طباعته‪.‬‬
‫يُطابِق العنصر الجذر في شجرة المستند‪ ،‬أي أنَّه يُطابِق العنصر <‪ >html‬في‬
‫‪:root‬‬
‫للمحدِّد ‪ html‬إال أنَّ درجة التحديد له أعىل‪.‬‬
‫مستندات ‪ ،HTML‬وهو مكافئ ُ‬
‫يُحدد العناصر التي تُمثل نقطة مرجعية للمحددات‪.‬‬ ‫‪:scope‬‬
‫يُم ِّثل عنص ًرا تمت زيارته من قبل‪ ،‬وألسباب تابعة للخصوصية فإنَّ عدد‬
‫‪:visited‬‬
‫ٌ‬
‫قليلة جدًا‪.‬‬ ‫المحدِّد‬
‫الخاصيات التي يمكن تغيير قيمتها باستخدام هذا ُ‬
‫إن أردت االستزادة أو أردت شرحًا موسعً ا ألي صنف زائ‪ss‬ف ب‪ss‬األعىل‪ ،‬ف‪ss‬ارجع إىل قس‪ss‬م األص‪ss‬ناف الزائفة من‬
‫توثيق ‪ CSS‬العربي في موسوعة حسوب‪.‬‬
‫ا‪ .‬صنف االبن الزائف ‪Child Pseudo Class‬‬
‫المحدد الزائ‪ss‬ف (‪ :nth-child(an+1b‬العناص‪ss‬ر ال‪ss‬تي تس‪ss‬بقها ‪ an+b - 1‬عنص‪ss‬ر أخ في البني‪ss‬ة‬

‫يُحدد ُ‬
‫الشجرية للصفحة‪ ،‬ويمكن أن تأخذ ‪ n‬أي عدد موجب أو الصفر‪.‬‬
‫المح‪s‬دد الزائ‪s‬ف في بني‪s‬ة هيكل‪ss‬ة تتك‪s‬ون من عنص‪s‬ر أب و عش‪s‬رة‬

‫الجدول أدناه يوضح العناصر التي يُح‪ss‬ددها ُ‬
‫عناصر أبناء‪:‬‬
‫‪10‬‬ ‫‪9‬‬ ‫‪8‬‬ ‫‪7‬‬ ‫‪6‬‬ ‫‪5‬‬ ‫‪4‬‬ ‫‪3‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫المُ حدد الزائف‬
‫×‬ ‫‪:first-child‬‬
‫×‬ ‫(‪:nth-child(3‬‬
‫×‬ ‫×‬ ‫×‬ ‫×‬ ‫×‬ ‫×‬ ‫×‬ ‫×‬ ‫(‪:nth-child(n+3‬‬
‫×‬ ‫×‬ ‫×‬ ‫(‪:nth-child(3n‬‬
‫×‬ ‫×‬ ‫×‬ ‫×‬ ‫(‪:nth-child(3n+1‬‬
‫×‬ ‫×‬ ‫×‬ ‫(‪:nth-child(-n+3‬‬
‫×‬ ‫×‬ ‫×‬ ‫×‬ ‫×‬ ‫(‪:nth-child(odd‬‬
‫×‬ ‫×‬ ‫×‬ ‫×‬ ‫×‬ ‫(‪:nth-child(even‬‬
‫×‬ ‫‪:last-child‬‬
‫×‬ ‫(‪:nth-last-child(3‬‬
‫‪37‬‬
‫ب‪ .‬المحدد ‪:last-of-type‬‬
‫المحدد ‪ :last-of-type‬لتحدي‪ss‬د آخ‪ss‬ر عنص‪ss‬ر من نوع‪ss‬ه في مجموع‪ss‬ة من العناص‪ss‬ر األخ‪ss‬وة‪ .‬في‬

‫يُستخدم ُ‬
‫المثال أدناه تُحدد آخر فقرة وآخر عنوان رئيسي ‪ h1‬في الحاوية‪.‬‬
‫>‪<style‬‬
‫{ ‪p:last-of-type‬‬
‫;‪background: #C5CAE9‬‬
‫}‬
‫{ ‪h1:last-of-type‬‬
‫;‪background: #CDDC39‬‬
‫}‬
‫>"‪<div class="container‬‬
‫>‪<p>First paragraph</p‬‬
‫>‪<p>Second paragraph</p‬‬
‫>‪<p>Last paragraph</p‬‬
‫>‪<h1>Heading 1</h1‬‬
‫>‪<h2>First heading 2</h2‬‬
‫>‪<h2>Last heading 2</h2‬‬
‫>‪</div‬‬
‫النتيجة‪:‬‬
‫اطلع عىل تجربة ح ّية عىل ‪.JsFiddle‬‬

‫ّ‬
‫ج‪ .‬المحدد ‪:in-range‬‬
‫المح‪s‬دَّد ع‪ss‬بر‬
‫المحدد ‪ :in-range‬يُحدد عناص‪ss‬ر <‪ >input‬ال‪ss‬تي تك‪ss‬ون قيمته‪ss‬ا ض‪ss‬من الم‪ss‬دى المس‪ss‬موح ُ‬
‫ُ‬
‫الخاصيتين ‪ min‬و ‪ max‬مما يُتيح عرض تنبيهات تُفيد بأنَّ القيمة ُ‬

‫المدخلة ضمن أو خارج المدى المسموح به‪.‬‬
‫‪38‬‬
:‫مثال‬
<style>
input:in-range {
border: 1px solid blue;
}
</style>
<input type="number" min="10" max="20" value="15">

<p>The border for this value will be blue</p>
:not ‫ المحدد‬.‫د‬
:‫مثال‬
<style>
input:not([disabled]):not(.example){
background-color: #ccc;
}
</style>
<form>
Phone: <input type="tel" class="example">
E-mail: <input type="email" disabled="disabled">
Password: <input type="password">
</form>
‫ك‬ss‫ وال تمتل‬،)‫ة‬ss‫ير ُمعطل‬ss‫ا (غ‬ss‫> التي يُمكن للمستخدم التفاعل معه‬input< ‫المثال أعاله يُحدد جميع عناصر‬
..example ‫الصنف‬
:‫المحددات مفصولة بفاصلة كما هو موضح بالشيفرة التالية‬

ُ ‫ قائمة من‬:not)( ‫المحدد‬
ُ ‫ يقبل‬،‫الحظ‬
input:not([disabled], .example) {
}

ّ
39
:focus-within ‫ المحدد‬.‫ه‬
:‫مثال‬
<style>
div {
height: 80px;
}
input {
margin: 30px;
}
div:focus-within {
background-color: #1565C0;
}
</style>
<h3>Background os blue if the input is focused</h3>

<div>
<input type="text" />
</div>
:‫النتيجة‬
:‫توضح الصورة التالية دعم المتصفحات لهذا المحدد‬
40
‫و‪ .‬إنشاء قيم منطقية باستخدام المحددات‬
‫يمكن إنشاء قيم منطقي‪ss‬ة (أي قيم الص‪ss‬واب والخط‪ss‬أ) عن طري‪ss‬ق اس‪ss‬تخدام المح‪s‬ددات وص‪ss‬ناديق اإلختي‪ss‬ار‪،‬‬
‫والخطوات التالية توضح كيفية ذلك‪.‬‬
‫بمعرِّف‪ss‬ات خاص‪ss‬ة‪ ،‬واجعله‪ss‬ا مخفي‪ss‬ة‬

‫الخط‪ss‬وة األوىل‪ :‬أنش ‪s‬ئ أي ع‪ss‬دد من ص‪ss‬ناديق االختي‪ss‬ار ‪ُ checkboxes‬‬
‫باستخدام الكلمة المحجوزة ‪.hidden‬‬
‫>‪<input type="checkbox" id="sidebarShown" hidden /‬‬

‫>‪<input type="checkbox" id="darkThemeUsed" hidden /‬‬
‫>‪

<style>
li {
display : inline;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>
:block ‫مثال عن قيمة‬


<style>
li {
display : block;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
61

</ul>
:inline-block ‫مثال عن قيمة‬


<style>
li {
display : inline-block;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
</ul>
62
‫‪ 2.1.4‬إخفاء العنارص‬
‫تُستخدَم القاعدة ‪ display: none‬إلخفاء العنصر ومنعه من أن يشغل مساحة في الص‪ss‬فحة‪ ،‬عىل عكس‬
‫القاعدة ‪ visibility: hidden‬والتي تُخفي العنصر ولكن تبقى المساحة ال‪ss‬تي يش‪ss‬غلها من الص‪ss‬فحة ثابت‪ss‬ة‬
‫مما يؤثر عىل موضع عرض العناصر التالية له‪.‬‬
‫>‪<div id="myDiv">some content</div‬‬
‫;‪display: none‬‬
‫}‬
‫‪ 2.1.5‬إنشاء تخطيط جدول باستخدام العنرص ‪div‬‬

‫انظر المثال‪:‬‬
‫>‪<style‬‬
‫{ ‪table‬‬
‫;‪width: 100%‬‬
‫}‬
‫>‪<table‬‬
‫>‪<tr‬‬
‫>‪<td‬‬
‫‪I'm a table‬‬
‫>‪</td‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫يُمكن الحصول عىل نفس ناتج الشيفرة أعاله باستخدام العنصر ‪ div‬كما هو موضح بالشيفرة التالية‪:‬‬
‫>‪<style‬‬
‫{ ‪.table-div‬‬
‫‪63‬‬
display: table;
}
.table-row-div {
display: table-row;
}
.table-cell-div {
display: table-cell;
}
</style>
<div class="table-div">
<div class="table-row-div">
<div class="table-cell-div">
I behave like a table
</div>
</div>
</div>
Flexbox ‫ تخطيط‬2.2
‫ لتوزيع العناصر في مساحة العرض المتاحة توزيعً ا مرنًا بحيث تتمدد أو‬Flexbox ‫يستخدم نموذج أو تخطيط‬
.‫تنكمش مع تَ َغ ُّير حجم الشاشة‬
‫ توسيط العنارص أفق ًيا ورأس ًيا‬2.2.1

:‫إليك مثال حول توسيط عنصر واحد‬
:HTML ‫ملف‬ •
<div class="aligner">
<div class="aligner-item">
some content
</div>
</div>
.aligner {
64
‫;‪display: flex‬‬
‫;‪align-items: center‬‬
‫;‪justify-content: center‬‬
‫}‬
‫{ ‪.aligner-item‬‬
‫;‪max-width: 50%‬‬
‫}‬
‫اطلع عىل تجربة ح َّية للمثال أعاله عىل ‪.Codepen‬‬

‫َّ‬
‫إليك شرح الخاصيتان في المثال‪:‬‬
‫‪ :align-items‬تأخذ القيمة ‪ center‬وتُ ِّ‬

‫وسط العناصر أفق ًيا إذا كان اتجاه الحاوي‪ss‬ة رأس‪ss‬ي‪ ،‬ورأس ‪ً s‬يا إذا‬ ‫•‬
‫كان اتجاه الحاوية أفقي‪.‬‬
‫‪:justify-content‬تأخذ القيمة ‪ center‬و تُ ِّ‬

‫وسط العناصر أفق ًيا إذا كان اتجاه الحاوية أفقي‪ ،‬ورأس ًيا‬ ‫•‬
‫إذا كان اتجاه الحاوية رأسي‪.‬‬
‫سنستعمل شيفرة ‪ HTML‬التالية في كل األمثلة الالحقة‪:‬‬
‫>"‪<div id="container‬‬
‫>‪<div></div‬‬
‫>‪</div‬‬
‫ا‪ .‬التوسيط أفق ًيا في حاوية أفقية‬
‫{ ‪div#container‬‬
‫;‪flex-direction: row‬‬
‫}‬
‫‪65‬‬
‫اطلع عىل تجربة حية للمثال عىل ‪.JSFiddle‬‬

‫َّ‬
‫ب‪ .‬التوسيط رأس ًيا في حاوية رأسية‬
‫;‪flex-direction: column‬‬
‫}‬
‫‪66‬‬

‫َّ‬
‫ج‪ .‬التوسيط رأس ًيا في حاوية أفقية‬
‫}‬
‫‪67‬‬

‫ّ‬
‫د‪ .‬التوسيط أفق ًيا في حاوية رأسية‬
‫}‬
‫‪68‬‬
‫ه‪ .‬التوسيط أفق ًيا ورأس ًيا في حاوية أفقية‬
‫}‬
‫‪69‬‬
‫و‪ .‬التوسيط أفق ًيا ورأس ًيا في حاوية رأسية‬
‫}‬
‫‪70‬‬
.JSFiddle ‫اطلع عىل تجربة حية للمثال عىل‬
‫ إنشاء تذييل ثابت لصفحة‬2.2.2

:‫انظر المثال التالي‬
<div class="header">
<h2>Header</h2>
</div>
<div class="content">
<h1>Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero.
71
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh
elementum imperdiet. Duis sagittis
ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
Mauris massa. Vestibulum lacinia
arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos
himenaeos. Curabitur sodales ligula in libero.
</p>
</div>
<div class="footer">
<h4>Footer</h4>
</div>
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.header, .footer {
background-color: grey;
color: white;
flex: none;
}
.JSFiddle ‫اطلع عىل تجربة ح َّية للمثال أعاله عىل‬

َّ
‫ توز يع العنارص بشكل مثايل داخل الحاوية‬2.2.3

72
<div class="flex-container">
<div class="flex-item">1</div>
</div>
.flex-container {
background-color: #000;
height: 100%;
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.flex-item {
background-color: #ccf;
margin: 0.1em;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
}
73
.JSFiddle ‫اطلع عىل تجربة حية لهذا المثال عىل‬
flex ‫ إنشاء تخطيط باستخدام حاوية‬2.2.4

.‫ ثابت‬footer ‫ بارتفاع ثابت وثالثة أعمدة وذيل‬header ‫أغلب التخطيطات اليوم تتكون من رأس صفحة‬
<div class="container">
<header class="header">Header</header>
<div class="content-body">
<main class="content">Content</main>
<nav class="sidenav">Nav</nav>
<aside class="ads">Ads</aside>
</div>
<footer class="footer">Footer</footer>
</div>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
74
height: 100vh;
}
.header {
flex: 0 0 50px;
}
.content-body {
flex: 1 1 auto;
display: flex;
flex-direction: row;
}
.content-body .content {
flex: 1 1 auto;
overflow: auto;
}
.content-body .sidenav {
order: -1;
flex: 0 0 100px;
overflow: auto;
}
.content-body .ads {
flex: 0 0 100px;
overflow: auto;
}
.footer {
flex: 0 0 50px;
}
.JSFiddle ‫اطلع عىل تجربة حية لهذا المثال عىل‬
‫ محاذاة األزرار داخل البطاقات‬2.2.5

:‫انظر المثال التالي الموضح في الصورة‬
75
‫ل‬ss‫ة التوص‬ss‫ ويوضح المثال التالي كيفي‬،‫التخطيط الموضح في الصورة أعاله هو من التخطيطات الشائعة جدًا‬
.flex ‫إليه باستخدام حاوية‬
<div class="cards">
<div class="card">
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur
reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui
minim.</p>
<p><button>Action</button></p>
</div>
<div class="card">
minim.</p>
minim.</p>
minim.</p>
76

minim.</p>
<p><button>Action</button></p>
</div>
</div>
.‫ عىل الحاوية للحصول عىل عمودين متساويين في االرتفاع‬display: flex ‫أواًل نُطبق القاعدة‬
.cards {
display: flex;
}
.card {
border: 1px solid #ccc;
margin: 10px 10px;
padding: 0 20px;
}
button {
height: 40px;
background: #fff;
padding: 0 40px;
border: 1px solid #000;
}p
:last-child {
text-align: center;
}
77
‫ وتحديد اتجاه الحاوية ليكون‬،‫ للبطاقة‬display: flex ‫لدفع الزر إىل أسفل البطاقة يجب إضافة القاعدة‬
‫ عىل‬margin-top: auto ‫ وأخي ًرا نُطبق القاعدة‬،flex-direction: column ‫عموديًا باستخدام القاعدة‬
.‫آخر عنصر داخل البطاقة لدفعه إىل أسفلها‬
‫ النهائي‬CSS ‫ملف‬ •
.cards {
display: flex;
}
.card {
border: 1px solid #ccc;
margin: 10px 10px;
padding: 0 20px;
display: flex;
}
button {
height: 40px;
background: #fff;
padding: 0 40px;
}p
:last-child {
text-align: center;
margin-top: auto;
}
78
‫ إنشاء حاويات متداخلة بارتفاعات متساوية‬2.2.6

<div style="background-color: red">
Some <br />
data <br />
to make <br />
a height <br />
</div>
<div style="background-color: blue">
Fewer <br />
lines <br />
</div>
</div>
.container {
display: flex;
align-items: stretch
}
.JSFiddle ‫اطلع عىل تجربة حية عىل‬
Grid ‫ التخطيط الشبكي‬2.3

.‫يُستخدم التخطيط الشبكي لتقسيم الصفحة إىل صفوف وأعمدة‬
:‫القيم المتاحة للخاصية هي‬
display: grid / inline-grid
:‫مثال‬
<section class="container">
79
‫>‪<div class="item1">Item1</div‬‬
‫>‪</section‬‬
‫{ ‪.container‬‬
‫;‪display: grid‬‬
‫}‬
‫ي‪ss‬ؤدي تط‪ss‬بيق الش‪ss‬يفرة أعاله إىل ت‪ss‬رادف العناص‪ss‬ر ف‪ss‬وق بعض‪ss‬ها البعض‪ ،‬ل‪ss‬ذلك نحت‪ss‬اج لتعري‪ss‬ف خاص‪ss‬يات‬
‫إضافية هي‪:‬‬
‫‪ :grid-columns .1‬وتستخدم لتحديد عدد األعمدة وعرض كل عمود‪.‬‬
‫‪ :grid-rows .2‬وتستخدم لتحديد عدد الصفوف وارتفاع كل صف‪.‬‬
‫;‪display: grid‬‬
‫‪ */‬إنشاء ثلاثة أعمدة كل منها بعرض ‪ 50‬بكسل *‪/‬‬
‫;‪grid-columns: 50px 50px 50px‬‬
‫‪ */‬إنشاء صفين كل منهما بإرتفاع ‪ 50‬بكسل *‪/‬‬
‫;‪grid-rows: 50px 50px‬‬
‫}‬
‫أيضا تحديد ت‪s‬رتيب العناص‪ss‬ر في التخطي‪ss‬ط الش‪ss‬بكي عن طري‪ss‬ق الخاص‪ss‬يتين ‪grid-column‬‬
‫و ‪ grid-row‬واللتان تحددان العمود والصف اللذان س ُيعرض فيهما العنصر‪.‬‬
‫{ ‪.container .item1‬‬
‫;‪grid-column: 1‬‬
‫;‪grid-row: 1‬‬
‫}‬
‫}‬
‫‪80‬‬
‫}‬
‫;‪grid-row; 2‬‬
‫}‬
‫اطلع عىل تجربة ح َّية لهذا المثال عىل ‪.JSFiddle‬‬

‫َّ‬
‫انظر دعم المتصفحات للقاعدة ‪.display: gird‬‬
‫‪ 2.4‬التخطيط الجدويل ‪table‬‬
‫‪ 2.4.1‬الخاصية ‪table-layout‬‬
‫تُس‪ss‬تخدم الخاص‪ss‬ية ‪ table-layout‬لتحدي‪ss‬د كيفي‪ss‬ة إنش‪ss‬اء الج‪ss‬دول ووض‪ss‬ع العناص‪ss‬ر بداخل‪ss‬ه‪ ،‬وتأخذ‬
‫إحدى القيمتين‪:‬‬
‫‪ :auto .1‬وتسمح للجدول بأخذ العرض الالزم لمنع طفحان المحتوى خارج الجدول‪.‬‬
‫‪ :fixed .2‬وتُعطي الجدول العرض المحدد له بالخاصية ‪ width‬فقط‪ ،‬وال تس‪ss‬مح ل‪ss‬ه بالتم‪ss‬دد مم‪ss‬ا ي‪ss‬ؤدي‬
‫لطفحان المحتوى خارج الجدول في حال عدم وجود مساحة كافية له‪.‬‬
‫‪ 2.4.2‬الخاصية ‪empty-cells‬‬
‫تحدد الخاصية ‪ empty-cells‬ما إذا كانت الخالي‪s‬ا الفارغ‪s‬ة س‪s‬تُعرض أم ال‪ ،‬وال يك‪ss‬ون له‪s‬ا أث‪s‬ر ٌ إال إذا ك‪ss‬انت‬
‫قيمة الخاصية ‪ border-collapse‬هي ‪ ،separate‬وتأخذ إحدى القيمتين ‪ show‬والتي تعني إظه‪ss‬ار الخالي‪ss‬ا‬
‫الفارغة أو ‪ hide‬والتي تعني إخفائها‪.‬‬
‫‪81‬‬
‫‪ 2.4.3‬الخاصية ‪border-collapse‬‬
‫تحدد الخاصية ‪ border-collapse‬ما إذا كان إطار الجدول منفصاًل عن إطار الخاليا (أي لك‪ٍ s‬‬
‫‪s‬ل واح ‪ٍ s‬د منه‪ss‬ا‬
‫خاص به) أم أنه مدمج معها (أي تتشارك الخاليا المتجاورة اإلطار مع بعضها ً‬
‫بعضا)‪ ،‬وتأخذ إح‪ss‬دى القيم‪ss‬تين‬ ‫ٌ‬ ‫إطارٌ‬
‫‪ separate‬والتي تفصل بين اإلطارات أو ‪ collapse‬والتي تدمج إطارات الخاليا المتجاورة‪.‬‬
‫‪ 2.4.4‬الخاصية ‪border-spacing‬‬
‫الخاصية ‪ border-spacing‬في ‪ CSS‬تُحدِّد المسافة بين إطارات خاليا الجداول المتجاورة‪ .‬لن يكون له‪ss‬ذه‬
‫الخاص‪ss‬ية أث ‪s‬ر ٌ إال إذا ك‪ss‬انت قيم‪ss‬ة الخاص‪ss‬ية ‪ border-collapse‬هي ‪ .separate‬ويمكن تحدي‪ss‬د المس‪ss‬افات‬
‫األفقية والرأسية بين اإلطارات في آن واحد عن طريق تحديد قيمة واح‪s‬دة للخاص‪s‬ية مث‪s‬ل ‪border-spacing:‬‬
‫‪ ،2px‬أو تحديد قيمة مختلفة لكل واحدة عىل حدة مث‪ss‬ل ‪ ،border-spacing: 2px 4px‬حيث تمث‪ss‬ل القيم‬
‫األوىل المسافة بين اإلطارات األفقية وتحدد القيمة الثانية المسافة بين اإلطارات الرأسية‪.‬‬
‫‪ 2.4.5‬الخاصية ‪caption-side‬‬
‫المعرَّف‪ss‬ة ع‪ss‬بر العنص‪ss‬ر <‪ ،>caption‬وتأخ‪ss‬ذ إح‪ss‬دى‬
‫تحدد الخاصية ‪ caption-side‬موضع الفتة الج‪ss‬دول ُ‬
‫القيمتين ‪ top‬والتي تُضيف الالفتة أعىل الجدول أو ‪ bottom‬والتي تُضيفها أسفل الجدول‪.‬‬
‫‪82‬‬
‫ارجع إىل توثيق تخطيط الجداول في موسوعة حسوب وراجع هذا المثال عىل ‪.Codepen‬‬
‫‪ 2.5‬التخطيط الكتيل السطري ‪Inline-block layout‬‬
‫‪ 2.5.1‬إنشاء رش يط َت َن ُّقل علوي ‪navigation bar‬‬

‫من الشائع إنشاء شريط تَنَ ُّقل علوي يحت‪ss‬وي عىل ازار للتنق‪ss‬ل بين ص‪ss‬فحات الموق‪ss‬ع المختلف‪ss‬ة‪ ،‬وفي‪ss‬ه تك‪ss‬ون‬
‫المس‪s‬افات بين األزرار متس‪s‬اوية‪ ،‬ويك‪s‬ون لل‪s‬زر األول في‪s‬ه ه‪s‬امش أيمن فق‪s‬ط (وأيس‪s‬ر إذا ك‪s‬انت الص‪s‬فحة باللغ‪s‬ة‬
‫العربية)‪ ،‬وآلخر زر هامش أيسر فقط (وأيمن إذا كانت الصفحة باللغة العربية)‪.‬‬
‫>‪<nav‬‬
‫>‪<ul‬‬
‫>‪<li>abc</li‬‬
‫>‪<li>abcdefghijkl</li‬‬
‫>‪<li>abcdef</li‬‬
‫>‪</ul‬‬
‫>‪</nav‬‬
‫{ ‪nav‬‬
‫;‪width: 100%‬‬
‫;‪line-height: 1.4em‬‬
‫}‬
‫{ ‪ul‬‬
‫;‪list-style: none‬‬
‫;‪display: block‬‬
‫;‪width: 100%‬‬
‫;‪margin: 0‬‬
‫‪83‬‬
‫;‪padding: 0‬‬
‫;‪text-align: justify‬‬
‫;‪margin-bottom: -1.4em‬‬
‫}‬
‫{ ‪ul:after‬‬
‫;‪width: 100%‬‬
‫}‬
‫{ ‪li‬‬
‫}‬
‫مالحظات‪:‬‬
‫‪ .1‬استُعملت العناصر ‪ ،nav‬و‪ ul‬و‪ li‬لمعناها الداللي فقط (عناص‪ss‬ر قائم‪ss‬ة التنق‪ss‬ل)‪ ،‬ويمكن اس‪ss‬تعمال أي‬
‫عناصر أخرى‪.‬‬
‫‪ .2‬اس‪ss‬تُخدمت قيم‪ss‬ة س‪ss‬البة مس‪ss‬اوية لقيم‪ss‬ة ارتف‪ss‬اع الس‪ss‬طر للخاص‪ss‬ية ‪ margin-bottom‬للتخلص من‬
‫المساحة الفارغة التي يتسبب فيها العنصر الزائف ‪.:after‬‬
‫‪ .3‬إذا ت َّق لص عرض الصفحة لحد ال يسمح بأن تكون جميع العناصر في سطر واحد‪ ،‬يتنقل جزء من العناصر‬
‫للسطر التالي‪.‬‬
‫‪ 2.6‬التوسيط ‪Centering‬‬
‫‪ 2.6.1‬توسيط العنارص باستخدام حاوية ‪Flexbox‬‬

‫انظر المثال التالي‪:‬‬
‫ملف ‪:HTML‬‬ ‫•‬
‫>‪<img src="http://lorempixel.com/400/200" /‬‬
‫>‪</div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫‪html,‬‬
‫‪84‬‬
‫‪body,‬‬
‫;‪height: 100%‬‬
‫}‬
‫‪ */‬التوسيط أفقيً ا *‪justify-content: center; /‬‬
‫}‬
‫{ ‪img‬‬
‫‪ */‬التوسيط رأسيً ا *‪align-self: center; /‬‬
‫}‬

‫َّ‬
‫>‪<img src="http://lorempixel.com/400/400" /‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫‪html,‬‬
‫{ ‪body‬‬
‫;‪height: 100%‬‬
‫}‬
‫{ ‪body‬‬
‫‪ */‬التوسيط أفقيً ا *‪justify-content: center; /‬‬
‫‪ */‬التوسيط رأسيً ا *‪align-items: center; /‬‬
‫}‬

‫َّ‬
‫بخصوص دعم المتصفحات‪:‬‬
‫كل المتصفحات الرئيسية تدعم حاوية ‪ ،flex‬عدا اإلصدارات التي تسبق اإلصدار العاشر من متصفح ‪.IE‬‬ ‫•‬
‫بعض إص‪ss‬دارات المتص‪ss‬فحات‪ ،‬مث‪ss‬ل ‪ Safari 8‬و ‪ ،IES10‬تتطلب اس‪ss‬تخدام الب‪ss‬وادئ الخاص‪sss‬ة بها‬ ‫•‬
‫‪.vendor prefixes‬‬
‫لتوليد البوادئ بشكل تلقائي يمكن استعمال أداة ‪.Autoprefixer‬‬ ‫•‬
‫‪85‬‬
‫يمكن تعويض نقص دعم المتصفحات القديمة لحاوية ‪ flex‬بإضافة شيفرات خاصة‪.‬‬ ‫•‬
‫لمزيد من التفاصيل حول دعم المتصفحات لحاوية ‪ ،flex‬انظر هذه اإلجابة‪.‬‬ ‫•‬
‫زُر التوثي‪ss‬ق الرس‪ss‬مي لحاوي‪ss‬ة ‪ flex‬لمزي‪ss‬د من المعلوم‪ss‬ات ح‪ss‬ول التوس‪ss‬يط األفقي والرأس‪ss‬ي‪ ،‬ومزي‪ss‬د من‬
‫المعلومات حول حاوية ‪ flex‬ومعاني األنماط المختلفة‪.‬‬
‫‪ 2.6.2‬توسيط العنارص باستخدام التحويالت ‪CSS Transform‬‬

‫تعتمد تحويالت ‪ CSS‬عىل أحجام العناصر‪ .‬إذا كنت ال تعرف طول أو ع‪s‬رض العنص‪s‬ر‪ ،‬اتَّب‪s‬ع الخط‪s‬وات التالي‪s‬ة‬
‫لتوسيطه أفق ًيا ورأس ًيا‪:‬‬
‫طبِّق القاعدة ‪ position: absolute‬عىل العنصر المراد توسيطه‪.‬‬ ‫•‬
‫حدد القيمة ‪ 50%‬للخاصيتين ‪ top‬و ‪.left‬‬ ‫•‬
‫طبِّق القاعدة (‪.transform: translate)-50%, -50%‬‬ ‫•‬
‫ً‬
‫مشوش‪s‬ا‪ ،‬وذل‪ss‬ك‬ ‫خذ في الحسبان أن استعمال هذه الطريقة ق‪ss‬د ي‪ss‬ؤدي إىل ظه‪ss‬ور العنص‪ss‬ر الم‪ss‬راد توس‪ss‬يطه‬
‫بسبب عرضه عىل بكسالت ذات قيم غير حقيقية (تحتوي عىل أرقام كسرية مثل ‪ .)5.6‬انظر هذه االجابة لمعرف‪ss‬ة‬
‫كيفية تفادي هذه المشكلة‪.‬‬
‫>‪<div class="element"></div‬‬
‫>‪</div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫;‪position: relative‬‬
‫}‬
‫{ ‪.element‬‬
‫;‪position: absolute‬‬
‫;‪top: 50%‬‬
‫;‪left: 50%‬‬
‫;)‪transform: translate(-50%, -50%‬‬
‫}‬
‫عرض المثال عىل ‪.JSFiddle‬‬
‫‪86‬‬
‫بخصوص دعم المتصفحات‪ ،‬تتطلب خاصية ‪ transform‬اس‪ss‬تخدام الب‪ss‬وادئ لكي تُ‪ss‬دعم في المتص‪ss‬فحات‬
‫القديمة‪ .‬هذه البوادئ الزمة للمتصفحات اآلتية‪:‬‬
‫‪Chrome<=35‬‬ ‫•‬
‫‪Safari<=8‬‬ ‫•‬
‫‪Opera<=22‬‬ ‫•‬
‫‪Android Browser<=4.4.4‬‬ ‫•‬
‫تحويالت ‪ CSS‬غير مدعومة في متصفح ‪ IE8‬واإلصدارات السابقة له‪.‬‬ ‫•‬
‫بعض التحويالت الشائعة للمثال السابق‪:‬‬
‫‪-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera,‬‬

‫‪Android */‬‬
‫‪-ms-transform: translate(-50%, -50%); /* IE 9 */‬‬
‫;)‪transform: translate(-50%, -50%‬‬
‫لمزيد من المعلومات حول الدعم‪ ،‬قم بزيارة ‪.caniuse‬‬
‫معلومات إضافية‪:‬‬
‫يُحدد موضع العنصر وف ًق‪ss‬ا ألول أب غ‪s‬ير ث‪s‬ابت‪ ،‬أي قيم‪s‬ة الخاص‪s‬ية ‪ position‬ل‪ss‬ه هي ‪ relative‬أو‬ ‫•‬
‫‪ absolute‬أو ‪ fixed‬استكشف المزيد عىل ‪.fiddle‬‬
‫‪ .transform:‬ك‪ss‬ذلك‬ ‫‪ left:‬و (‪translateX(-50%‬‬ ‫للتوس‪ss‬يط أفق ًي‪ss‬ا فق‪ss‬ط‪ ،‬اس‪ss‬تعمل ‪50%‬‬ ‫•‬
‫للتوسيط رأس ًيا فقط استعمل ‪ top: 50%‬و (‪.transform: translateY(-50%‬‬
‫استعمال عناصر ذات عرض أو ارتفاع غير ث‪ss‬ابت م‪ss‬ع طريق‪ss‬ة التوس‪ss‬يط ه‪ss‬ذه ق‪ss‬د يجع‪ss‬ل العنص‪ss‬ر الم‪ss‬راد‬ ‫•‬
‫مضغوطا‪ .‬غالبًا ما يحدث هذا مع العناص‪ss‬ر ال‪ss‬تي تحت‪ss‬وي عىل نص‪ss‬وص‪ ،‬ويمكن معالجته‪ss‬ا‬
‫ً‬ ‫توسيطه يبدو‬
‫بإضافة القواع‪ss‬د‪ margin-right: -50%; :‬و ‪ .margin-bottom: -50%‬لمزي‪ss‬د من المعلوم‪ss‬ات‬
‫اطلع عىل المثال التالي‪.‬‬

‫ّ‬
‫إذا كانت الصفحة باللغة العربية أو إحدى اللغات األخرى التي تُكتب من اليمين إىل اليسار ‪ rtl‬تستبدل القاعدة‬
‫‪ left: 50%‬بالقاعدة ‪.right: 50%‬‬
‫‪ 2.6.3‬التوسيط باستخدام الخاصية ‪margin‬‬

‫يمكن توسيط العناصر باستخدام ;‪ margin: 0 auto‬إذا كانت عناصر كتليه ولها عرض محدد‪.‬‬
‫‪87‬‬
<div class="containerDiv">
<div id="centeredDiv"></div>
</div>
<p id="centeredParagraph">This is a centered paragraph</p>
</div>
<img
id="centeredImage"
src="https://i.kinja-img.com/gawker-media/image/upload/s--
c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_
800/qqyvc3bkpyl3mfhr8all.jpg"
/>
</div>
:CSS ‫ملف‬ •
.container {
width: 100%;
height: 100px;
padding-bottom: 40px;
}
#centeredDiv {
margin: 0 auto;
width: 200px;
height: 100px;
}
#centeredParagraph {
width: 200px;
margin: 0 auto;
}
88
‫{ ‪#centeredImage‬‬
‫;‪margin: 0 auto‬‬
‫}‬
‫اطلع عىل تجربة ح ّية لهذا المثال عىل ‪.JSFiddle‬‬

‫ّ‬
‫‪ 2.6.4‬التوسيط باستخدام محاذاة النص ‪text-align‬‬

‫من أسهل أنواع التوسيط وأكثرها انتشا ًرا توسيط النصوص داخل عنصر معين باستخدام القاعدة‪:‬‬
‫;‪text-align: center‬‬
‫>‪<p>lorem ipsum</p‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪p‬‬
‫}‬
‫‪89‬‬
‫تس‪ss‬تعمل ‪ text-align‬لمح‪ss‬اذاة المحت‪ss‬وى الس‪ss‬طري (‪ )inline-content‬فق‪ss‬ط مث‪ss‬ل مح‪ss‬اذاة النص‪ss‬وص‬
‫والصور داخل العنصر األب لها‪ ،‬وال يمكن استعمالها لتوسيط العناصر الكتلية‪.‬‬
‫‪ 2.6.5‬استخدام الموضع المطلق ‪position: absolute‬‬

‫يمكن توسيط عنصر ذي موضع مطلق داخل العنصر األب له باستعمال الهوامش التلقائية م‪ss‬ع وض‪ss‬ع قيم‪ss‬ة‬
‫صفر لكل من الخواص ‪ ،left‬و‪ right‬و‪ top‬و ‪.bottom‬‬
‫>"‪<div class="parent‬‬
‫>‪<img class="center" src="http://lorempixel.com/400/200" /‬‬
‫>‪</div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪.parent‬‬
‫}‬
‫{ ‪.center‬‬
‫;‪margin: auto‬‬
‫;‪top: 0‬‬
‫;‪right: 0‬‬
‫;‪bottom: 0‬‬
‫;‪left: 0‬‬
‫}‬
‫ً‬
‫وعرضا ضمنيين مثل الصور إىل تحديد قيمتهما‪.‬‬ ‫تحتاج العناصر التي ال تمتلك ارتفا ًعا‬
‫يمكن ً‬
‫أيضا االطالع عىل المثال العملي التالي‪.Absolute Centering in CSS :‬‬
‫‪ 2.6.6‬التوسيط باستخدام الدالة ‪calc‬‬

‫دالة )(‪ calc‬هي صيغة جديدة تمت إضافتها في ‪ .CSS3‬تمكنك هذه الدالة من أن تحس‪s‬ب رياض‪ً s‬يا الحجم‬
‫أو الموضع الذي يشغله العنصر باستخدام عدد من القيم مثل‪ :‬البكسالت (نقاط الشاشة)‪ ،‬النسب المئوية …الخ‪.‬‬
‫انتبه‪ ،‬عند استخدام هذه الدالة‪ ،‬يجب مراعاة المسافة بين القيمتين (‪. calc(100% - 80px‬‬
‫‪90‬‬
‫>‪<div class="center"></div‬‬
‫;‪background: red‬‬
‫‪ */‬الإرتفاع مقسوم على ‪top: calc(50% - 50px / 2); /* 2‬‬
‫‪ */‬العرض مقسوم على ‪left: calc(50% - 50px / 2); /* 2‬‬
‫}‬
‫‪ 2.6.7‬توسيط النص رأس ًيا باستخدام ارتفاع السطر ‪line-height‬‬

‫يمكن استخدام خاصية ارتفاع السطر ‪ line-height‬لتوسيط نص من سطر واحد رأس ًيا داخل الحاوية‪.‬‬
‫{ ‪div‬‬
‫;‪line-height: 200px‬‬
‫}‬
‫قد ال يبدو ذلك أني ًقا‪ ،‬ولكن قد يكون مفيد إذا أردت توسيط النص رأس ًيا داخل عنصر <‪ .>input /‬خاصية‬
‫‪ line-height‬تعمل فقط إذا كان النص المراد توسيطه من سطر واحد‪ ،‬ولكن إذا كان أكثر من سطر لن يك‪ss‬ون‬
‫الناتج في الوسط‪.‬‬
‫‪ 2.7‬محاذاة أي يشء رأس ًيا في ثالثة أسطر‬

‫يمكنك باستعمال الثالثة أسطر أدناه توسيط أي شيء رأس ًيا‪ ،‬فقط تأكد أن الحاوية ‪ div‬أو الصورة التي تطبق‬
‫عليها الشيفرة لها أب ‪ parent‬ذو ارتفاع محدد‪.‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪div.vertical‬‬
‫;‪top: 50%‬‬
‫;)‪transform: translateY(-50%‬‬
‫‪91‬‬
<div class="vertical">Vertical aligned text!</div>
.‫عرض النتيجة‬
ً
‫نسبة لعنرص آخر‬ ‫ التوسيط‬2.7.1
.‫ستتعلم في هذا القسم كيفية توسيط المحتوى استنادًا إىل ارتفاع عنصر مجاور‬
<div class="position-container">
<div class="thumb">
<img src="http://lorempixel.com/400/200" />
</div>
<div class="details">
<p class="banner-title">text</p>
<p class="banner-text">content content content content</p>
<button class="btn">button</button>
</div>
</div>
</div>
.content * {
box-sizing: border-box;
}
.content .position-container {
display: table;
}
.content .details {
92
‫;‪vertical-align: middle‬‬
‫;‪width: 33.33333%‬‬
‫}‬
‫{ ‪.content .thumb‬‬
‫;‪width: 100%‬‬
‫}‬
‫{ ‪.content .thumb img‬‬

‫;‪width: 100%‬‬
‫}‬

‫ّ‬
‫النقاط الرئيسية هي الحاويات الثالث ‪ .thumb‬و ‪ .details‬و ‪:.position-container‬‬
‫يجب أن تمتلك الحاوية ‪ .position-container‬القاعدة ‪.display: table‬‬ ‫•‬
‫يجب أن تمتلك الحاوية ‪ .details‬الخاصيات‪:‬‬ ‫•‬
‫◦ ‪width‬‬
‫◦ ‪display: table-cell‬‬
‫◦ ‪vertical-align: middle‬‬
‫يجب أن تمتل‪ss‬ك الحاوي‪ss‬ة ‪ .thumb‬القاع‪ss‬دة ‪ width: 100%‬إذا كنت تري‪ss‬دها أن تأخ‪ss‬ذ ك‪ss‬ل المس‪ss‬احة‬ ‫•‬
‫المتبقية‪ ،‬وستكون محددة بعرض حاوية ‪..details‬‬
‫يجب أن تكون الصورة (في حال كان لديك ص‪ss‬ورة) داخ‪ss‬ل الحاوي‪ss‬ة ‪ .thumb‬ويجب أن تمتل‪ss‬ك القاع‪ss‬دة‬ ‫•‬
‫‪ ،width: 100%‬لكنها غير ضرورية إذا كان لديك تناسب صحيح‪.‬‬
‫‪ 2.7.2‬طريقة العنرص الشبح‪ :‬خدعة ‪Michat Czernow‬‬

‫يمكن استعمال هذه الطريقة حتى إذا كانت أبعاد الحاوية مجهولة‪.‬‬
‫قم بإنش‪ss‬اء عنص‪ss‬ر "ش‪ss‬بح" بارتف‪ss‬اع ‪ %100‬داخ‪ss‬ل الحاوي‪ss‬ة ال‪ss‬تي تري‪ss‬د توس‪ss‬يطها‪ ،‬ومن ثم طب‪ss‬ق القاع‪ss‬دة‬
‫‪ vertical-align: middle‬عليه وعىل الحاوية المراد توسيطها‪.‬‬
‫‪93‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫‪ُ */‬يمكن أن يأخذ العنصر الأب أي ارتفاع وعرض *‪/‬‬

‫{ ‪.block‬‬
‫‪ */‬انظر الملاحظة رقم ‪/* 1‬‬

‫;‪white-space: nowrap‬‬
‫}‬
‫‪ */‬العنصر الشبح *‪/‬‬

‫{ ‪.block:before‬‬
‫;‪height: 100%‬‬
‫‪ */‬انظر الملاحظة رقم ‪/* 2‬‬

‫;‪margin-right: -0.25rem‬‬
‫}‬
‫‪ */‬العنصر المراد توسيطه‪ ،‬يمكن أن يكون بأي عرض وارتفاع *‪/‬‬

‫{ ‪.centered‬‬
‫;‪white-space: normal‬‬
‫}‬
‫‪ .1‬يكون عرض الحاوية في بعض األحيان أقل من عرض العناصر الداخلي‪ss‬ة له‪ss‬ا مم‪ss‬ا ي‪ss‬ؤدي إىل قص أج‪ss‬زاء‬
‫منها‪ ،‬ويمكنك إضافة القاعدة ‪ white-space: nowrap‬لتفادي هذا األمر‪.‬‬
‫‪ .2‬يتسبب حرف المسافة الخاص بالعنصر الشبح في وجود فراغ بينه وبين الحاوي‪ss‬ة ‪ .centered‬للتخلص‬
‫من هذا الفراغ يمكن دفع الحاوية ‪ .centered‬إىل اليمين (أو إىل اليسار في حالة الص‪ss‬فحات العربي‪ss‬ة)‬
‫قلياًل (تعتمد المسافة التي يجب دفع الحاوية بها عىل نوع الخط المستخدم في الص‪ss‬فحة) أو عن طري‪ss‬ق‬
‫‪94‬‬
‫تحدي‪ss‬د قيم‪ss‬ة ص‪ss‬فر لخاص‪ss‬ية ‪ font-size‬في الحاوي‪ss‬ة ‪ .parent‬ومن ثم إع‪ss‬ادة تعيين‪ss‬ه في الحاوي‪ss‬ة‬
‫‪..centered‬‬
‫>"‪<div class="block‬‬
‫>‪<div class="centered"></div‬‬
‫>‪</div‬‬
‫‪ 2.7.3‬التوسيط أفق ًيا ورأس ًيا دون القلق بشأن ارتفاع وعرض العنرص‬
‫الطريقة التالية تمكنك من إضافة المحتوى إىل عنص‪ss‬ر ‪ HTML‬و توس‪ss‬يطه أفق ًي‪ss‬ا ورأس ‪ً s‬يا دون القل‪ss‬ق بش‪ss‬أن‬
‫ارتفاعه أو عرضه‪.‬‬
‫الحاوي‪ss‬ة الخارجي‪ss‬ة يجب أن تمتل‪ss‬ك القاع‪ss‬دة ‪ display: table‬أم‪ss‬ا الحاوي‪ss‬ة الداخلي‪ss‬ة يجب أن تمتلك‬
‫القواعد التالية‪:‬‬
‫;‪display: table-cell‬‬
‫صندوق المحتوى‪:‬‬
‫يجب أن يمتلك القاعدة ‪.display: inline-block‬‬ ‫•‬
‫يجب إعادة ضبط مح‪ss‬اذاة النص‪ ،‬مثال ً ‪ text-align-left‬أو ‪ ،text-align: right‬إال إذا كنت‬ ‫•‬
‫ترغب في أن يكون النص في الوسط‪.‬‬
‫إليك المثال التالي‪:‬‬
‫>"‪<div class="outer-container‬‬
‫>"‪<div class="inner-container‬‬
‫>"‪<div class="centered-content‬‬
‫!‪You can put anything here‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫‪95‬‬
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding: 20px;
}
.JSFiddle ‫اطلع عىل تجربة ح ّية لهذا المثال عىل‬

ّ
div ‫ محاذاة صورة رأس ًيا داخل حاوية‬2.7.4

<div class="wrap">
<img src="http://lorempixel.com/400/200" />
</div>
96
.wrap {
height: 50px;
width: 100px;
text-align: center;
}
.wrap:before {
content: "";
height: 100%;
width: 1px;
}
img {
}
‫ التوسيط مع حجم ثابت‬2.7.5

‫ف‬ss‫وامش تُقلص نص‬ss‫ع ه‬ss‫ م‬%50 ‫ة‬ss‫ق بالقيم‬ss‫ يمكن تعيين قيمة الموضع المطل‬،‫إذا كان حجم المحتوى ثابتًا‬
.‫عرض وارتفاع المحتوى‬
<div class="center">
Center vertically and horizontally
</div>
.center {
position: absolute;
background: #ccc;
left: 50;
width: 150px;
97
margin-left: -75px; /* width * -0.5 */
top: 50%;
height: 200px;
margin-top: -100px; /* height * -0.5 */
}
‫ التوسيط أفق ًيا مع عرض ثابت‬.‫ا‬
.‫يمكنك توسيط العنصر أفق ًيا حتى إذا لم تكن تعرف ارتفاع محتواه‬
Center only horizontally
</div>
.center {
position: absolute;
background: #ccc;
left: 50%;
width: 150px;
margin-left: -75px; /* width * -0.5 */
}
‫ التوسيط رأس ًيا مع ارتفاع ثابت‬.‫ب‬
.‫يمكنك توسيط العنصر رأس ًيا إذا كنت تعرف فقط ارتفاعه‬
<div class="center">
Center only vertically
</div>
98
‫;‪background: #ccc‬‬
‫;‪top: 50%‬‬
‫‪margin-top: -100px; /* width * -0.5 */‬‬
‫}‬
‫‪ 2.7.6‬المحاذاة الرأسية للعنارص ذات االرتفاع الديناميكي‬

‫تطبيق ‪ CSS‬بشكل بديهي ال يعطي النتائج المطلوبة وذلك لألسباب اآلتية‪:‬‬
‫قاعدة ‪ vertical-align: middle‬ال تنطبق عىل العناصر الكتلية‪.‬‬ ‫•‬
‫قاعدة ‪ margin-top: auto‬و ‪ margin-bottom: auto‬تُحسب القيم المستخدمة لها كأصفار‪.‬‬ ‫•‬
‫قاعدة ‪ margin-top: -50%‬يتم حساب قيمة الهامش عىل أساس النسبة المئوي‪ss‬ة بالنسبة لع‪ss‬رض‬ ‫•‬
‫الكتلة التي تحويها‪.‬‬
‫للحصول عىل دعم أغلب المتصفحات‪ ،‬هناك حل بديل باستخدام العناصر المساعدة‪:‬‬
‫>"‪<div class="vcenter--container‬‬
‫>"‪<div class="vcenter--helper‬‬
‫>"‪<div class="vcenter--content‬‬
‫>‪<!-- stuff --‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪.vcenter--container‬‬
‫;‪display: table‬‬
‫;‪height: 100%‬‬
‫;‪overflow: hidden‬‬
‫;‪width: 100%‬‬
‫‪99‬‬
‫}‬
‫{ ‪.vcenter--helper‬‬
‫;‪display: table-cell‬‬
‫}‬
‫{ ‪.vcenter--content‬‬
‫}‬
‫المصدر‪ Stackoverflow :‬وتجد المثال عىل ‪.JSFiddle‬‬
‫تعمل هذه الطريقة مع العناصر ذات االرتفاعات الديناميكية‪.‬‬ ‫•‬
‫تأخذ في االعتبار تدفق المحتوى ‪.‬‬ ‫•‬
‫مدعومة من قبل معظم المتصفحات‪.‬‬ ‫•‬
‫‪ 2.7.7‬التوسيط أفق ًيا ورأس ًيا باستخدام تخطيط الجدول‬

‫يمكن ببساطة توسيط العنصر االبن باستخدام القاعدة ‪.display: table‬‬
‫>"‪<div class="wrapper‬‬
‫>"‪<div class="parent‬‬
‫>‪<div class="child"></div‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪.wrapper‬‬
‫;‪vertical-align: center‬‬
‫‪100‬‬
background-color: #9e9e9e;
}
.parent {
text-align: center;
}
.child {
text-align: center;
width: 100px;
height: 100px;
background-color: teal;
}
‫تعملها إال إذا‬ss‫دة و يجب أاَّل تس‬ss‫ة جي‬ss‫د ممارس‬ss‫ا ال تُع‬ss‫ة إال أنه‬ss‫ذه الطريق‬ss‫هولة ه‬ss‫ بالرغم من بساطة وس‬،‫انتبه‬
.StackOverflow ‫ لمزيد من التفاصيل راجع هذه االجابة عىل‬،‫اضطررت لذلك‬
‫ التوسيط باستخدام العنارص الزائفة‬2.7.8

<div class="wrapper">
<div class="content"></div>
</div>
.wrapper{
min-height: 600px;
}
.wrapper:before{
content: "";
101
height: 100%;
}
.content {
height: 80px;
}
102
‫‪ .3‬النموذج الصندوقي ‪Box Model‬‬
‫‪ 3.1‬ما هو النموذج الصندوقي؟‬

‫ترسم المتصفحات مستطياًل حول كل عنصر في صفحة ‪ HTML‬ويصف النموذج الص‪ss‬ندوقي كي‪ss‬ف تُض‪ss‬اف‬
‫الحواشي واإلطارات والهوامش للمحتوى لرسم هذا المستطيل‪.‬‬
‫الرسم التخطيطي من ‪.CSS2.2 Working Draft‬‬

‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫النموذج الصندوقي ‪Box Model‬‬
‫ً‬
‫صندوقا معينًا‪.‬‬ ‫يسمى محيط كل مساحة من المساحات األربع ُمحدِّد‪ ،‬كل ُمحدِّد يحدد‬
‫يُسمى المستطيل الداخلي صندوق المحتوى ‪ ،content-box‬يعتمد عرض وارتفاع ه‪ss‬ذا الص‪ss‬ندوق عىل‬ ‫•‬
‫المحتوى المعروض للعنصر (النصوص‪ ،‬الصور وأي أبناء آخرين للعنصر)‪.‬‬
‫المستطيل التالي هو صندوق الحواش‪ss‬ي ‪ ،padding-box‬ويُع ‪s‬رَّف بخاص‪ss‬ية الحاش‪ss‬ية ‪ .padding‬إذا لم‬ ‫•‬
‫يتم تحديد عرض الحاشية‪ ،‬تكون حافة الحاشية مطابقة لحافة صندوق المحتوى‪.‬‬
‫يلي ذلك صندوق اإلطارات‪ ،‬ويُعرَّف بخاص‪ss‬ية اإلط‪ss‬ار ‪ .border‬إذا لم يُح‪ss‬دد ع‪ss‬رض اإلط‪ss‬ار‪ ،‬تك‪ss‬ون حاف‪ss‬ة‬ ‫•‬
‫صندوق اإلطارات مطابقة لحافة صندوق الحواشي‪.‬‬
‫المستطيل الخارجي هو صندوق الهوامش‪ ،‬ويُعرَّف بخاصية الهامش ‪ .margin‬إذا لم يتم تحدي‪ss‬د ع‪ss‬رض‬ ‫•‬
‫الهامش‪ ،‬تكون حافة صندوق الهوامش مطابقة لحافة صندوق اإلطارات‪.‬‬
‫{ ‪div‬‬
‫;‪margin: 50px‬‬
‫}‬
‫هذه الشيفرة تنشئ إطا ًرا بع‪s‬رض ‪ 5‬بكس‪ss‬الت لح‪ss‬واف العنص‪ss‬ر األرب‪s‬ع لك‪ss‬ل عناص‪ss‬ر ‪ div‬في ص‪ss‬فحة ‪،HTML‬‬
‫وكذلك تضيف هوامش بعرض ‪ 50‬بكسل و حواشي بعرض ‪ 20‬بكسل في االتجاهات األربعة‪ .‬بتجاهل المحت‪ss‬وى‪،‬‬
‫يكون النموذج الصندوقي الناتج بهذا الشكل‪:‬‬
‫‪104‬‬
‫بما أنه ال يوجد محتوى‪ ،‬سيكون صندوق المحتوى (الصندوق األزرق في الوسط) بدون ع‪ss‬رض أو ارتف‪ss‬اع‬ ‫•‬
‫(‪ 0‬بكسل × ‪ 0‬بكسل)‪.‬‬
‫بشكل ابتدائي يكون صندوق الحواشي بنفس مساحة صندوق المحتوى‪ ،‬باإلضافة إىل ع‪ss‬رض الحواش‪ss‬ي‬ ‫•‬
‫‪ 20‬بكسل في الحواف األربع‪ .‬وتكون مساحة الصندوق (‪ 40‬بكسل × ‪ 40‬بكسل)‪.‬‬
‫صندوق اإلطارات له نفس مس‪s‬احة ص‪s‬ندوق الحواش‪s‬ي‪ ،‬باإلض‪ss‬افة إىل ‪ 5‬بكس‪ss‬الت تمث‪ss‬ل ع‪s‬رض اإلط‪ss‬ار‬ ‫•‬
‫للحواف األربع‪ .‬وتكون مساحة الصندوق الكلية (‪ 50‬بكسل × ‪ 50‬بكسل)‪.‬‬
‫أخيرًا‪ ،‬صندوق اله‪ss‬وامش ل‪ss‬ه نفس مس‪ss‬احة ص‪ss‬ندوق الحواش‪ss‬ي باإلض‪ss‬افة إىل ‪ 50‬بكس‪ss‬ل تمث‪ss‬ل ع‪ss‬رض‬ ‫•‬
‫الهوامش في الحواف األربع‪ .‬وتكون مساحة صندوق العنصر الكلية (‪ 150‬بكسل × ‪ 150‬بكسل)‪.‬‬
‫إذا أضفنا أخًا للعنصر الحالي بنفس األنماط فسينظر المتصفح للنم‪ss‬وذج الص‪ss‬ندوقي للعنص‪ss‬رين ليح‪ss‬دد أين‬
‫يوضع العنصر الجديد بالنسبة لمحتوى العنصر السابق‪.‬‬
‫يفصل بين محتوى العنصرين مسافة ‪ 150‬بكسل‪ ،‬لكن النماذج الصندوقية لهما متالمسة‪.‬‬
‫إذا عدلنا العنصر األول وحذفنا الهامش األيمن‪ ،‬فسيكون حد صندوق الهوامش األيمن مطابق لحد ص‪ss‬ندوق‬
‫اإلطارات األيمن‪ .‬وسيظهر العنصرين بالشكل التالي‪:‬‬
‫‪105‬‬
‫‪ 3.2‬تعديل النموذج الصندوقي باستخدام الخاصية ‪box-sizing‬‬

‫قد يسلك النموذج الص‪ss‬ندوقي األساس‪ss‬ي (أي ‪ )content-box‬س‪ss‬لو ًكا غ‪ss‬ير متوق‪ss‬ع‪ ،‬فعن‪ss‬دما تب‪ss‬دأ بإض‪ss‬افة‬
‫حواشي أو إطارات للعنصر يصبح االرتفاع والع‪ss‬رض المح‪ss‬ددين ال يمثالن االرتف‪ss‬اع والع‪ss‬رض الحقيق‪ss‬يين للعنص‪ss‬ر‬
‫الظاهر عىل الشاشة‪ .‬ويوضح المثال التالي هذه المشكلة‪:‬‬
‫{ ‪textarea‬‬
‫;‪width: 100%‬‬
‫‪box-sizing: content-box; /* default value */‬‬
‫}‬
‫بما أن الحواشي ستضاف لعرض العنصر ‪ ،textarea‬يصبح عرض العنصر الناتج أكبر من ‪.%100‬‬
‫لحسن الحظ‪ ،‬تمكننا ‪ CSS‬من تعديل النموذج الص‪s‬ندوقي للعنص‪s‬ر باس‪ss‬تخدام خاص‪s‬ية ‪ box-sizing‬ال‪ss‬تي‬
‫يمكن أن تأخذ إحدى القيم التالية لضبط النموذج الصندوقي للعنصر‪:‬‬
‫الوصف‬ ‫المعامل‬
‫عرض وارتفاع العنصر يتضمن فقط مساحة المحتوى دون الحاشية واإلطار‪.‬‬ ‫‪content-box‬‬
‫عرض وارتفاع العنصر يتضمن مساحة المحتوى والحاشية فقط باستثناء اإلطار‬ ‫‪padding-box‬‬
‫عرض وارتفاع العنصر‪ ،‬يتضمن مساحة المحتوى والحاشية واإلطار‪.‬‬ ‫‪border-box‬‬
‫تُطبِّق القيمة االبتدائية للنموذج الصندوقي‬ ‫‪initial‬‬
‫تُ َورِّث النموذج الصندوقي للعنصر األب‪.‬‬ ‫‪inherit‬‬
‫‪106‬‬
‫لح‪ss‬ل مش‪ss‬كلة عنص‪ss‬ر ‪ textarea‬في المث‪ss‬ال الس‪ss‬ابق‪ ،‬يمكن تغي‪ss‬ير قيم‪ss‬ة الخاص‪ss‬ية ‪ box-sizing‬إىل‬
‫‪ padding-box‬أو ‪ border-box‬واألخيرة هي األكثر انتشا ًرا‪.‬‬
‫{ ‪textarea‬‬
‫;‪width: 100%‬‬
‫;‪box-sizing: border-box‬‬
‫}‬
‫لتطبيق نموذج صندوقي معين لكل العناصر في صفحة ‪ HTML‬يمكن استعمال الشيفرة التالية‪:‬‬
‫{ ‪html‬‬
‫;‪box-sizing: border-box‬‬
‫}‬
‫{ ‪*, *:before, *:after‬‬

‫;‪box-sizing: inherit‬‬
‫}‬
‫في ه‪ss‬ذه الش‪ss‬يفرة‪ ،‬ال تطب‪ss‬ق الخاص‪ss‬ية ;‪ box-sizing: border-box‬مباش‪ss‬رة عىل ك‪ss‬ل العناص‪ss‬ر (*)‪،‬‬
‫ل عىل حدة‪.‬‬
‫بالتالي يمكنك بسهولة استبدالها في العناصر ك ٌّ‬
‫‪ 3.3‬الهوامش ‪Margins‬‬
‫يوضح الجدول التالي القيم التي يمكن استعمالها مع خاصية الهامش ‪:margin‬‬
‫‪107‬‬
‫يحذف جميع الهوامش الخاصة بالعنصر‪.‬‬ ‫‪0‬‬
‫يستعمل للتوسيط بإضافة هوامش متساوية عىل الجانبين‪.‬‬ ‫‪auto‬‬
‫انظر قسم الوحدات لمعرفة الوحدات المتاحة‪.‬‬ ‫‪units‬‬
‫تُ َورِّث قيمة الهامش من العنصر األب‪.‬‬ ‫‪inherit‬‬
‫تُطبِّق القيمة االبتدائية للهامش‪.‬‬ ‫‪initial‬‬
‫‪ 3.3.1‬تداخل الهوامش ‪Margin Collapsing‬‬

‫ً‬
‫هامشا واحدًا بارتفاع يساوي ارتف‪ss‬اع اله‪ss‬امش األك‪ss‬بر‪،‬‬ ‫عند تالمس هامشين رأس ًيا فإنهما يتداخالن ويصبحان‬
‫ولكن عندما يتالمسان أفق ًيا ال يحدث تداخل ويكون عرض الهامش الناتج مساويًا لمجموع عرض الهامشين‪.‬‬
‫مثال لتداخل الهوامش الرأسية‪:‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪div‬‬
‫}‬
‫>‪<div‬‬
‫‪some content‬‬
‫>‪</div‬‬
‫>‪<div‬‬
‫‪some more content‬‬
‫>‪</div‬‬
‫وتكون المسافة الرأسية بين العنصرين ‪ 10‬بكسالت بسبب تداخل الهوامش‪.‬‬
‫مثال لتداخل الهوامش األفقية‪:‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪span‬‬
‫}‬
‫‪108‬‬
‫>‪<span>some</span><span>content</span‬‬
‫وتكون المسافة األفقية بين العنصرين ‪ 20‬بكسل‪ ،‬أي أنها تساوي مجموع الهوامش األفقية للعنصرين‪.‬‬
‫مثال تداخل الهوامش ذات األبعاد المختلفة‪:‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪.top‬‬
‫}‬
‫{ ‪.bottom‬‬
‫}‬
‫>"‪<div class="top‬‬
‫>‪</div‬‬
‫>"‪<div class="bottom‬‬
‫>‪</div‬‬
‫وتكون المسافة الرأسية بين العنصرين ‪ 15‬بكسل‪ ،‬وذلك ألن الهوامش المتداخلة تأخذ أبعاد الهامش األكبر‪.‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪.outer-top‬‬
‫}‬
‫{ ‪.inner-top‬‬
‫}‬
‫{ ‪.outer-bottom‬‬
‫}‬
‫{ ‪.inner-bottom‬‬
‫}‬
‫‪109‬‬
‫>"‪<div class="outer-top‬‬
‫>"‪<div class="inner-top‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫>"‪<div class="outer-bottom‬‬
‫>"‪<div class="inner-bottom‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫بما أنَّ جميع الهوامش متداخلة‪ ،‬تكون المسافة بين النصين ‪ 25‬بكسل‪.‬‬
‫ماذا يحدث في حال إضافة إطارات حول العناصر؟‬
‫{ ‪div‬‬
‫}‬
‫عند إضافة إطارات حول العناص‪ss‬ر كم‪ss‬ا في المث‪ss‬ال الس‪ss‬ابق‪ ،‬تص‪ss‬بح المس‪ss‬افة بين النص‪ss‬ين ‪ 59‬بكس‪ss‬ل وهي‬
‫مجموع مساحات الهوامش باإلضافة ألربعة بكسالت تمثل مجموع اإلطارات ح‪ss‬ول الحاوي‪ss‬ات األربع‪ss‬ة‪ .‬ال يح‪ss‬دث‬
‫التداخل في هذه الحالة ألن الهوامش أصبحت غير متالمسة إذ يفصل اإلطار بينها‪.‬‬
‫انظر مثال عن تداخل هوامش العنصر األب مع هوامش ابنه‪:‬‬
‫>‪<h1>Title</h1‬‬
‫>‪<div‬‬
‫>‪<p>Paragraph</p‬‬
‫>‪</div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪h1‬‬
‫;‪background-color: #cff‬‬
‫}‬
‫‪110‬‬
‫{ ‪div‬‬
‫;‪margin: 50px 0 0 0‬‬
‫;‪background: #cfc‬‬
‫}‬
‫{ ‪p‬‬
‫;‪margin: 25px 0 0 0‬‬
‫;‪background: #cf9‬‬
‫}‬
‫في المثال أعاله‪ ،‬تكون المسافة الرأسية بين عنصر العنوان الرئيسي ‪ h1‬وعنص‪ss‬ر الفق‪ss‬رات ‪ p‬هي ‪ 50‬بكس‪ss‬ل‬
‫(مساحة الهامش األكبر)‪ ،‬قد تتوقع أن تكون المسافة بينهما ‪ 75‬بكس‪ss‬ل (ألن الحاوي‪ss‬ة ‪ div‬ل‪ss‬ديها ه‪ss‬امش عل‪ss‬وي‬
‫بارتف‪ss‬اع ‪ 50‬بكس‪ss‬ل وعنص‪ss‬ر الفق‪ss‬رات ‪ p‬لدي‪ss‬ه ه‪ss‬امش عل‪ss‬وي بارتف‪ss‬اع ‪ 25‬بكس‪ss‬ل)‪ ،‬لكن ال يح‪ss‬دث ه‪ss‬ذا بس‪ss‬بب‬
‫تداخل الهوامش‪.‬‬
‫‪ 3.3.2‬إضافة هامش باتجاه محدد‬

‫يمكن إضافة هامش باتجاه محدد باستعمال إحدى الخواص األربع التالية‪:‬‬
‫‪margin-left‬‬
‫‪margin-right‬‬
‫‪margin-top‬‬
‫‪margin-bottom‬‬
‫ً‬
‫هامشا أيسر بعرض ‪ 30‬بكسل للحاوية ‪.#myDiv‬‬ ‫الشيفرة أدناه تُضيف‬
‫>‪<div id="myDiv"></div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫;‪margin-left: 30px‬‬
‫;‪background-color: red‬‬
‫}‬
‫حيث ‪ margin-left‬اتجاه إضافة الهامش والقيمة ‪ 30px‬هي عرض الهامش‪.‬‬
‫‪111‬‬
‫توضح الشيفرة التالية كيفية استخدام الصياغة المختزلة للخاصية ‪:margin‬‬
‫;>‪margin: <top> <right> <bottom> <left‬‬
‫ً‬
‫وهامشا للحاف‪ss‬ة‬ ‫ً‬
‫هامشا للحافة العليا بارتفاع صفر بكسل (أي ال يوجد هامش علوي)‪،‬‬ ‫الشيفرة التالية تُضيف‬
‫ً‬
‫وهامش‪s‬ا للحاف‪ss‬ة ال ُيس‪s‬رى بع‪ss‬رض‬ ‫الس‪s‬فلي بارتف‪ss‬اع ‪ 50‬بكس‪ss‬ل‪،‬‬ ‫ً‬
‫وهامش‪s‬ا للحاف‪ss‬ة ُ‬ ‫ال ُيم‪ss‬نى بع‪ss‬رض ‪ 10‬بكس‪ss‬الت‪،‬‬
‫‪ 100‬بكسل‪.‬‬
‫>‪<div id="myDiv"></div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫;‪margin: 0 10px 50px 100px‬‬
‫}‬
‫‪ 3.3.3‬تبسيط خاصية الهوامش ‪margin‬‬

‫{ ‪p‬‬
‫;‪margin: 1px 1px‬‬
‫;‪margin: 1px 1px 1px‬‬
‫;‪margin: 1px 1px 1px 1px‬‬
‫‪ */‬جميع القواعد أعلاه تؤدي لنفس النتيجة *‪/‬‬

‫}‬
‫مثال آخر‪:‬‬
‫{ ‪p‬‬
‫;‪margin: 10px 15px‬‬
‫;‪margin: 10px 15px 10px 15px‬‬
‫;‪margin 10px 15px 10px‬‬
‫‪112‬‬
‫‪ */‬جميع القواعد أعلاه تؤدي لنفس النتيجة *‪/‬‬

‫}‬
‫توضح الشيفرة التالية الصيغ العامة الستعمال خاصية الهامش ‪:margin‬‬
‫;>‪margin: <all‬‬
‫;>‪margin: <top and bottom> <left and right‬‬
‫;>‪margin: <top> <left and right> <bottom‬‬
‫;>‪margin: <top> <right> <bottom> <left‬‬
‫‪ 3.3.4‬توسيط العنارص أفق ًيا باستخدام خاصية الهامش ‪margin‬‬

‫تُستخدم القاعدة ‪ margin: 0 auto‬لتوسيط العناصر الكُتلية أفق ًيا عن طريق إضافة ه‪ss‬وامش متس‪ss‬اوية‬
‫المراد توسيطه أقل من عرض الحاوية‪.‬‬

‫يمين ويسار العنصر‪ ،‬ويُشترط أن يكون عرض العنصر ُ‬
‫;‪width: 80%‬‬
‫}‬
‫استخدمنا في المثال أعاله الصياغة المختزلة لكتابة الخاصية ‪ margin‬إلضافة ه‪ss‬وامش بع‪ss‬رض ص‪ss‬فر أعىل‬
‫وأسفل العنصر (يمكن أن تكون أي قيمة أخرى) ومن ثم استعملنا القيمة ‪ auto‬إلضافة هوامش متس‪ss‬اوية يمين‬
‫ويسار العنصر وبالتالي توسيطه أفق ًيا‪ .‬عرض العنصر ‪ #myDiv‬ه‪ss‬و ‪ %80‬من ع‪ss‬رض الحاوي‪ss‬ة الخارجي‪ss‬ة ل‪ss‬ه‪ ،‬مم‪ss‬ا‬
‫يترك ‪ %20‬من مساحة الحاوية فارغة‪ .‬عند تحديد القيمة ‪ auto‬لخاصية ‪ margin‬يُ َوزِّ ع المتصفح هذه المس‪ss‬احة‬
‫بالتساوي عىل يمين ويسار العنصر‪ ،‬أي تكون المسافة عىل كل جانب ‪.%10‬‬
‫ً‬
‫نس‪s‬بة إىل العنص‪ss‬ر األب‪ .‬ه‪s‬ذا االف‪s‬تراض‬ ‫مثال‪ ،‬من الشائع افتراض أن تحدي‪s‬د قيم نس‪s‬بية لله‪s‬وامش يك‪ss‬ون‬
‫ص‪ss‬حيح بالنس‪ss‬بة لله‪ss‬وامش األفقي‪ss‬ة ‪ margin-left‬و ‪ .margin-right‬حيث يك‪ss‬ون ع‪ss‬رض اله‪ss‬امش نس‪ss‬ب ًيا‬
‫لعرض العنصر األب‪.‬‬
‫}‬
‫{ ‪.child‬‬
‫‪113‬‬
‫;‪height: 100p‬‬
‫‪margin-left: 10%; /* parentWidth * 10/100 => 50px */‬‬
‫}‬
‫لكن األم‪ss‬ر يختل‪ss‬ف عن‪ss‬د الح‪ss‬ديث عن اله‪ss‬وامش الرأس‪ss‬ية ‪ margin-bottom‬و ‪ ،margin-top‬فارتف‪ss‬اع‬
‫الهامش الرأسي يكون نسب ًيا من عرض العنصر األب وليس من ارتفاعه كما يظن البعض‪.‬‬
‫}‬
‫{ ‪.child‬‬
‫;‪margin-left: 10%‬‬
‫;‪margin-top: 20%‬‬
‫}‬
‫‪ 3.3.5‬الهوامش السالبة‬
‫يمكن استعمال الهوامش السالبة إلنشاء عناصر متداخلة دون الحاجة الستعمال الموضع المطلق‪.‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪div‬‬
‫;‪display: inline‬‬
‫}‬
‫{ ‪#over‬‬
‫;‪margin-left: -20px‬‬
‫}‬
‫>‪<div>Base div</div‬‬
‫>‪<div id="over">Overlapping div</div‬‬
‫‪114‬‬
‫‪ 3.4‬الحوايش ‪Paddings‬‬
‫مساحة الحاشية هي المساحة بين محتوى العنصر واإلطار الخارجي له‪ ،‬وتُحدد باستخدام خاصية ‪.padding‬‬
‫يمكنك استعمال الصياغة المختزلة الموضحة في المثال أدناه من تعريف مساحات الحواشي للعنص‪ss‬ر ب‪ss‬داًل‬
‫عن تحديد مساحة الحاشية لكل حافة من حواف العنصر األربع بخاصية منفردة (عن طريق استخدام ‪padding-‬‬
‫‪ ،top‬أو ‪ padding-left‬أو غيرهما)‪.‬‬
‫في حالة تحديد أربع قيم للخاصية‪:‬‬
‫>‪<style‬‬
‫{ ‪.myDiv‬‬
‫‪padding: 25px 50px 75px 100px; /* top right bottom left; */‬‬
‫}‬
‫>‪<div class="myDiv"></div‬‬
‫في حالة تحديد ثالث قيم للخاصية‪:‬‬
‫>‪<style‬‬
‫‪padding: 25px 50px 75px; /* top left/right bottom; */‬‬
‫}‬
‫في حالة تحديد قيمتين للخاصية‪:‬‬
‫>‪<style‬‬
‫‪padding: 25px 50px; /* top/bottom left/right; */‬‬
‫‪115‬‬
‫}‬
‫في حالة تحديد قيمة واحدة للخاصية‪:‬‬
‫>‪<style‬‬
‫‪padding: 25px; /* top/right/bottom/left; */‬‬
‫}‬
‫‪ 3.4.1‬إضافة حاشية باتجاه محدد‬

‫يمكنك إضافة الحاشية باتجاه محدد باستعمال الخواص أدناه‪:‬‬
‫‪ */‬حاشية علوية *‪padding-top /‬‬

‫‪ */‬حاشية ُيمنى *‪padding-right /‬‬
‫‪ */‬حاشية ُيسرى *‪padding-bottom /‬‬
‫‪ */‬حاشية ُسفلية *‪padding-left /‬‬
‫تُضيف الشيفرة أدناه حاشية علوية بعرض ‪ 5‬بكسالت للعنصر‪.‬‬
‫>‪<style‬‬
‫{ ‪.myClass‬‬
‫;‪padding-top: 5px‬‬
‫}‬
‫>‪<div class="myClass"></div‬‬
‫‪116‬‬
‫‪ 3.5‬اإلطارات ‪Borders‬‬
‫‪ 3.5.1‬خاصية األركان المدورة ‪border-radius‬‬

‫تمكنك خاصية ‪ border-radius‬من تغيير شكل النموذج الصندوقي فيمكن بضبطها تغي‪ss‬ير زاوي‪ss‬ة ك‪ss‬ل ركن‬
‫من أركان حواف العنصر‪.‬‬
‫تُعرِّف المجموعة األوىل من القيم اإلنحاء األفقي لإلطار بينما تُعرِّف المجموعة الثاني‪ss‬ة االختياري‪ss‬ة (المس‪ss‬بوقة‬
‫بعالم‪ss‬ة ‪ )/‬اإلنح‪ss‬اء الرأس‪ss‬ي ل‪ss‬ه‪ .‬في ح‪ss‬ال وج‪ss‬ود مجموع‪ss‬ة واح‪ss‬دة فق‪ss‬ط فإنه‪ss‬ا تُس‪ss‬تخدم لتعري‪ss‬ف االنحن‪ss‬اءات‬
‫األفقية والرأسية‪.‬‬
‫;‪border-radius: 10px 5% / 20px 25em 30px 35em‬‬
‫تُحدِّد القيمة ‪ 10px‬اإلنحاء األفقي لإلطار من أعىل اليسار وأس‪ss‬فل اليمين‪ ،‬بينم‪ss‬ا تح ‪s‬دِّد القيم‪ss‬ة ‪ %5‬اإلنح‪ss‬اء‬
‫األفقي من أعىل اليمين وأسفل اليسار‪ .‬تُح ‪s‬دِّد األرب‪ss‬ع قيم المس‪ss‬بوقة بعالم‪ss‬ة ‪ /‬اإلنح‪ss‬اء الرأس‪ss‬ي لإلط‪ss‬ار من أعىل‬
‫اليسار‪ ،‬وأعىل اليمين‪ ،‬وأسفل اليمين وأسفل اليسار عىل الترتيب‪.‬‬
‫يُوضح المثال التالي كيفية استخدام الصياغة المختزلة لتدوير اإلطارات‪:‬‬
‫>‪<div class='box'></div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{‪.box‬‬
‫;‪width:250px‬‬
‫;‪height:250px‬‬
‫;‪background-color:black‬‬
‫;‪border-radius:10px‬‬
‫}‬
‫‪117‬‬
CSS ‫مالحظات للعاملين بلغة‬ Box Model ‫النموذج الصندوقي‬
.‫ انحناء اإلطار في االتجاهات الثمانية المذكورة في الفقرة السابقة‬10px ‫تُحدِّد القيمة‬
‫ري‬ss‫كل دائ‬ss‫ر لش‬ss‫ استخدامها لتحويل صندوق العنص‬border-radius ‫من االستخدامات الشائعة لخاصية‬
.‫عن طريق إعطائها قيمة مساوية لنصف ارتفاع الصندوق‬
.circle{
width:200px;
height:200px;
border-radius:100px;
}
.‫ لتجنُّب حسابها يدويًا‬border-raduis ‫من الشائع استخدام نسب مئوية لتحديد قيمة خاصية‬
.circle{
width:150px;
height:150px;
border-radius:50%;
}
.‫يصبح شكل صندوق العنصر بيضاويًا في حال اختالف قيمتي االرتفاع والعرض‬
:border-radius ‫إضافة البوادئ الخاصة بالمتصفحات القديمة إىل الخاصية‬
{
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
118
‫‪ 3.5.2‬خاصية أنماط اإلطارات ‪border-style‬‬

‫تُحدد خاصية ‪ border-style‬شكل خ‪ss‬ط اإلط‪ss‬ار الخ‪ss‬اص بالعنص‪ss‬ر لجمي‪ss‬ع ح‪ss‬واف (األيمن واأليس‪ss‬ر والعل‪ss‬وي‬
‫والسفلي) ويمكن أن تأخذ من قيمة واحدة إىل أربع قيم‪ ،‬تُحدد ك ٌّ‬
‫ل منها شكل خط اإلطار ألحد الحواف‪.‬‬
‫;‪border-style: dotted‬‬
‫;‪border-style: dotted solid double dashed‬‬
‫و بشكل عام يُحدَّد شكل خط اإلطار لحواف العنصر حسب الترتيب التالي‪:‬‬
‫‪*/‬القيمة الواحدة تحدد شكل خط الإطار لجميع الأوجه *‪border-style: <ALL>; /‬‬
‫;>‪border-style: <top> <right> <bottom> <left‬‬
‫يمكن أن تأخ‪sss‬ذ خاص‪sss‬ية ‪ border-style‬القيم ‪ none‬أو ‪ hidden‬ولهم‪sss‬ا نفس الت‪sss‬أثير‪ ،‬إاَّل أن ‪hidden‬‬
‫تستخدم لحل مشكلة تداخل إطارات عنصر الجداول‬
‫مع إطارات خاليا الجدول حيث تُخفي اطارات الخاليا‪ .‬بينما ‪ none‬تس‪s‬بب في ت‪s‬داخل اإلط‪s‬ارات المتالمس‪s‬ة‬
‫سمكي إطار الجدول وإطار الخلية‪.‬‬

‫بسمك يساوي مجموع ُ‬
‫وظهورها ُ‬
‫‪ 3.5.3‬إنشاء إطارات متعددة‬

‫مثال استخدام ‪:outline‬‬
‫{‪.div1‬‬
‫;‪outline: 6px solid blue‬‬
‫‪119‬‬
width: 100px;
height: 100px;
margin: 20px;
}
:box-shadow ‫استخدام‬
.div2{
border: 5px solid green;
box-shadow: 0px 0px 0px 4px #000;
width: 100px;
height: 100px;
margin: 20px;
}
:pseudo elements ‫استخدام العناصر الزائفة‬
.div3 {
position: relative;
width: 100px; height: 100px;
margin: 20px;
}
.div3:before {
content: " ";
position: absolute;
z-index: -1; top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
}
120

‫ّ‬
‫‪ 3.5.4‬الصياغة المخزتلة إلنشاء اإلطارات‬

‫تحت‪ssss‬اج في معظم الح‪ssss‬االت لتعري‪ssss‬ف العدي‪ssss‬د من الخاص‪ssss‬يات لإلط‪ssss‬ار مث‪ssss‬ل ‪،border-width‬‬
‫و‪ ،border-style‬و‪ border-color‬لكل أوجه العنصر‪ ،‬يُمكنك في هذه الحاالت استعمال الصياغة المختزلة‬
‫الموضحة في المثال التالي‪:‬‬
‫ً‬
‫عوضا عن كتابة‪:‬‬
‫;‪border-width: 1px‬‬
‫;‪border-style: solid‬‬
‫;‪border-color: #000‬‬
‫يمكنك كتابة‪:‬‬
‫;‪border:1px solid #000‬‬
‫‪121‬‬
‫يمكن استعمال هذه الطريقة إلنشاء إطار في اتجاه محدد‪ ،‬عىل سبيل المثال تُنشيء الش‪ss‬يفرة التالي‪ss‬ة إط‪ss‬ا ًرا‬
‫عُلويًا ذا خط مزدوج وثُخن بكسلين ولون رمادي‪.‬‬
‫;‪border-top: 2px double #aaaaaa‬‬
‫‪ 3.5.5‬خاصية تداخل اإلطارات ‪border-collapse‬‬

‫تعمل خاصية ‪ border-collapse‬فقط عىل الجداول والعناصر المعروض‪ss‬ة كج‪ss‬داول (أي تمتل‪ss‬ك القاع‪ss‬دة‬
‫‪ display: table‬أو ‪ ،)display: inline-table‬وتحدد م‪s‬ا إذا ك‪s‬ان إط‪s‬ار الج‪s‬دول منفص‪s‬اًل عن إط‪s‬ار‬
‫الخاليا أم أنه ُمدمج معها (أي تتشارك الخاليا المتجاورة اإلطار مع بعضها البعض)‪.‬‬
‫{ ‪table‬‬
‫‪border-collapse: separate; /* default */‬‬
‫‪ */‬تضيف فراغ بين الإطارات المتلامسة *‪border-spacing: 2px; /‬‬
‫}‬
‫لمزيد من المعلومات انظر توثيق خاصية ‪.border-collapse‬‬
‫‪ 3.5.6‬خاصية ‪border-image‬‬
‫سهِّل عملية إنشاء إط‪s‬ارات ذات مظه‪s‬ر مخص‪s‬ص‪.‬‬
‫تسمح هذه الخاصية برسم صورة عىل إطار العنصر‪ ،‬مما يُ َ‬
‫وتستخدم هذه الخاصية بداًل من أشكال اإلطارات ُ‬

‫المعرَّفة عبر الخاصية ‪.border-style‬‬
‫تتكون خاصية ‪ border-image‬من ثالث خاصيات هي‪:‬‬
‫‪ :border-image-source‬تحدد مسار الصورة المراد استخدامها كإطار‪.‬‬ ‫•‬
‫‪ :border-image-slice‬تُ ِّ‬
‫قسم الصورة المحددة عبر الخاصية ‪ border-image-source‬إىل تسع‬ ‫•‬
‫مناطق‪ ،‬األركان األربعة‪ ،‬والحواف‪ ،‬والوسط‪.‬‬
‫‪ :border-image-repeat‬تُعرِّف كيفية عرض الجزء األوس‪ss‬ط من الص‪ss‬ورة لكي تُط‪ss‬ابق أبع‪ss‬اد اإلط‪ss‬ار‪.‬‬ ‫•‬
‫ويمكن استخدام قيمة واحدة لهذه الخاصية لضبط سلوك جميع الحواف‪ ،‬أو يمكن تحديد قيمتين لضبط‬
‫سلوك الحواف األفقية والرأسية كاًل عىل حدة‪.‬‬
‫مثال باستخدام صورة بحجم ‪ 90‬بكسل × ‪ 90‬بكسل‪:‬‬
‫;‪border-image: url("border.png") 30 stretch‬‬
‫‪122‬‬
‫تُ َّ‬
‫قسم الصورة في المثال أعاله لتسع مناطق ك‪ss‬ل واح‪ss‬دة بحجم ‪ 30‬بكس‪ss‬ل × ‪ 30‬بكس‪ss‬ل‪ .‬وتس‪ss‬تخدم ح‪ss‬واف‬
‫الصورة كأركان لإلطار والجوانب األربعة لها تُمثل أوجه اإلطار‪ .‬وتتمدد الصورة لتُغطي كل العنص‪ss‬ر في ح‪ss‬ال زي‪ss‬ادة‬
‫ارتفاعه عن ‪ 30‬بكسل‪.‬‬
‫‪ 3.5.7‬إنشاء إطارات متعددة األلوان باستخدام خاصية ‪border-image‬‬

‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪.bordered‬‬
‫‪border-image: linear-gradient(to right, red 20%, green 20%, green‬‬
‫*‪40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /‬‬
‫‪gradient with required colors */‬‬
‫;‪border-image-slice: 1‬‬
‫}‬
‫>‪<div class='bordered'>Border on all sides</div‬‬
‫يرسم المثال أعاله إطا ًرا مكون من ‪ 5‬ألوان ُعرِّفت باستخدام التدرج الخطي ‪( linear-gradient‬يمكن‪ss‬ك‬
‫زيارة التوثيق لمزيد من المعلومات عن هذه الخاصية وخاصية ‪.) border-image-slice‬‬
‫الم الحظ أن لإلطار لون واحد فقط في االتجاهين األيمن واأليسر من الصندوق‪ ،‬وذلك يرجع للطريقة التي‬
‫من ُ‬
‫تعمل بها الخاصية ‪ border-image‬وهي تطبيق التدرج اللوني عىل ك‪ss‬ل الص‪ss‬ندوق ومن ثم إخف‪ss‬اء الص‪ss‬ورة من‬
‫منطقة الحواشي والمحتوى مما يجعلها تبدو كإطار للصندوق‪.‬‬
‫تُحدَّد االتجاهات التي تأخذ اللون الواحد عبر تعريف الت‪ss‬درج الل‪ss‬وني‪ ،‬إذا ك‪ss‬ان الت‪ss‬درج من اليس‪ss‬ار إىل اليمين‬
‫يأخذ اإلطار األيسر أول لون في التدرج بينما يأخذ اإلطار األيمن آخ‪ss‬ر ل‪ss‬ون في الت‪ss‬درج‪ .‬وإذا ك‪ss‬ان الت‪ss‬درج من أعىل‬
‫ألسفل يأخذ اإلطار العُ لوي أول لون في التدرج بينما يأخذ اإلطار السفلي آخر لون في التدرج‪.‬‬
‫مثال يوضح التدرج اللوني من أعىل ألسفل‪:‬‬
‫‪123‬‬
‫إذا كان المطلوب إضافة إطار باتجاه واحد فق‪ss‬ط‪ ،‬يمكن اس‪ss‬تخدام خاص‪ss‬ية ‪ border-width‬وتحدي‪ss‬د قيم‪ss‬ة‬
‫العرض بصفر بكسل في االتجاهات التي ال ترغب في إضافة إطار عليها‪.‬‬
‫;‪border-width: 5px 0px 0px 0px‬‬
‫ال يمكن تدوير إطارات العناصر التي تمتلك خاصية ‪ ،border-image‬واستخدام خاصية ‪ border-radius‬معها‬
‫يؤدي إىل تدوير الخلفية بدال ً من اإلطار‪.‬‬
‫‪ 3.5.8‬إنشاء إطار للعنرص باتجاه محدد‬

‫تس‪ss‬تخدم الخاص‪ss‬ية ]‪ border-[left|right|top|bottom‬لعم‪ss‬ل إط‪ss‬ار للعنص‪ss‬ر باتج‪ss‬اه مح‪ss‬دد‪ ،‬مثاًل‬
‫الخاصية ‪ border-left‬تُضيف اإلطار باتجاه اليسار فقط‪.‬‬
‫{ ‪#element‬‬
‫;‪border-left: 1px solid black‬‬
‫}‬
‫‪ 3.6‬حدود العنرص ‪Outlines‬‬

‫ح‪ss‬دود العنص‪ss‬ر ‪ outline‬هي الخط‪ss‬وط ال‪ss‬تي تُرس‪ss‬م خ‪ss‬ارج إط‪ss‬ار العنص‪ss‬ر‪ ،‬وال تأخ‪ss‬ذ مس‪ss‬احة في النم‪ss‬وذج‬
‫الصندوقي‪ ،‬وبالتالي ال تؤثر عىل موضع العنصر أو بقية العناصر في الصفحة‪ .‬ويوضح الجدول الت‪ss‬الي المع‪ss‬امالت‬
‫التي يمكن استعمالها لضبط حدود العنصر‪:‬‬
‫‪124‬‬
‫التفاصيل‬ ‫المعامل‬
‫خط حد ُمن َّقط‬ ‫‪dotted‬‬
‫خط حد متقطع‬ ‫‪dashed‬‬
‫خط حد متصل‬ ‫‪solid‬‬
‫خط حد مزدوج‬ ‫‪double‬‬
‫خط حد مموج ثالثي األبعاد‪ ،‬يتعمد عىل قيمة لون خط الحد ‪outline-color‬‬ ‫‪groove‬‬
‫خط حد ثالثي األبعاد‪ ،‬يعتمد عىل قيمة لون خط الحد ‪outline-color‬‬ ‫‪ridge‬‬
‫خط حد داخلي ثالثي األبعاد‪ ،‬يعتمد عىل قيمة لون خط الحد ‪outline-color‬‬ ‫‪inset‬‬
‫خط حد خارجي ثالثي األبعاد‪ ،‬يعتمد عىل قيمة لون خط الحد ‪outline-color‬‬ ‫‪outset‬‬
‫حذف خط الحد‬ ‫‪none‬‬
‫إخفاء خط الحد‬ ‫‪hidden‬‬
‫تأخذ في بعض المتصفحات حدود العنصر شكال ً آخر غير المستطيل‪ ،‬غالبًا ما يحدث هذا عند تطبيق خاصية‬
‫‪ outline‬عىل عنصر ‪ span‬يحتوى عىل نصوص ذات أحجام خ‪ss‬ط مختلف‪ss‬ة‪ .‬وعىل عكس اإلط‪ss‬ارات ‪ ،border‬ال‬
‫يمكن تدوير أركان حدود العنصر‪.‬‬
‫الخاصيات األساسية لحدود العنصر هي‪ ،outline-color :‬و‪ ،outline-style‬و‪.outline-width‬‬
‫عىل الرغم من التشابه بين حدود العنصر واإلطارات في تأثيرهما وطريقة إنشائهما‪ ،‬إاَّل أنهما خاصيتين مختلفتين‬
‫تماما‪.‬‬
‫ً‬
‫يوضح المثال التالي كيفية إنشاء حدود العنصر‪:‬‬
‫;‪outline:1px solid black‬‬
‫‪ 3.6.1‬خاصية ‪outline-style‬‬
‫تحدد هذه الخاصية شكل حدود العنص‪s‬ر ويمكن أن تأخ‪s‬ذ أيً‪s‬ا من القيم الموض‪s‬حة في الج‪s‬دول الموض‪ss‬ح في‬
‫بداية هذا الفصل‪ .‬ويُب ِّين المثال التالي كيفية استخدامها‪:‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{‪p‬‬
‫;‪border:1px solid black‬‬
‫;‪outline-color:blue‬‬
‫;‪line-height:30px‬‬
‫}‬
‫‪125‬‬
.p1{
outline-style:dotted;
}
.p2{
outline-style:dashed;
}
.p3{
outline-style:solid;
}
.p4{
outline-style:double;
}
.p5{
outline-style:groove;
}
.p6{
outline-style:ridge;
}
.p7{
outline-style:inset;
}
.p8{
outline-style:outset;
}
<p class="p1">A dotted outline</p>

<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
<p class="p6">A ridge outline</p>
<p class="p7">A inset outline</p>
<p class="p8">A outset outline</p>
126
‫‪ 3.7‬الخاصية ‪overflow‬‬
‫تأخذ الخاصية ‪ overflow‬إحدى القيم التالي‪:‬‬
‫تُظهر المحتوى الفائض عن حجم العنصر دون اقتصاص‪.‬‬ ‫‪visible‬‬
‫اقتصاص المحتوى الفائض عن حجم العنصر دون إظهار شريط تمرير ‪.scroll bar‬‬ ‫‪hidden‬‬
‫اقتصاص المحتوى الفائض عن حجم العنصر مع إظهار شريط تمرير ‪.scroll bar‬‬ ‫‪scroll‬‬
‫نفس عمل ‪ ،scroll‬لكنها ال تضيف شريط التمرير ‪ scroll bar‬في حالة كان حجم المحتوى أقل‬
‫‪auto‬‬
‫من أو يساوي حجم الحاوية‪.‬‬
‫تُ َورِّث قيمة خاصية ‪ overflow‬الخاصة بالعنصر األب لالبن‪.‬‬ ‫‪inherit‬‬
‫‪ 3.7.1‬خاصية ‪overflow-wrap‬‬
‫تُخبر الخاصية ‪ overflow-wrap‬المتصفح أنّ بإمكان‪ss‬ه تقس‪ss‬يم النص‪ss‬وص والكلم‪ss‬ات الطويل‪ss‬ة عىل ع‪ss‬دد من‬
‫األسطر لمنعها من تجاوز حدود صندوق المحتوى وتأخذ إحدى القيم التالي‪:‬‬
‫تسمح للكلمة بالخروج من الحاوية إذا كانت أطول منها‪.‬‬ ‫‪normal‬‬
‫تقسم الكلمة عىل عدد من األسطر إذا كانت أطول من الحاوية‪.‬‬ ‫‪break‬‬
‫تُ ِّورث قيمة ‪ overflow-wrap‬الخاصة بالعنصر األب لالبن‪.‬‬ ‫‪inherit‬‬
‫‪127‬‬
:‫إليك المثال التالي‬
div {
width: 100px;
outline: 1px dashed #bbb;
}
#div1 {
overflow-wrap: normal;
}
#div2 {
overflow-wrap: break-word
}
<div id="div1">
<strong>#div1</strong>: Small words are displayed normally but a
word like <span style="red;">supercalifragilisticexpialidocious</span>
is too long so it will overflow past the edge of the line-break
</div>
<div id="div2">
<strong>#div2</strong>: Small words are displayed normally, but
a long word like <span
style="red">supercalifragilisticexpialidocious</span> will be split at
the line break and continue on the next line.
</div>
128
overflow-y ‫ و‬overflow-x ‫ خاصية‬3.7.2

‫ية‬ss‫و أن الخاص‬ss‫ االختالف ه‬،‫ا‬ss‫ا نفس قيمه‬ss‫ ولهم‬overflow ‫ية‬ss‫تعمل هاتان الخاصيتان عماًل مشابهً ا لخاص‬
.‫ في المحور الرأسي‬overflow-y ‫ تعمل في المحور األفقي فقط بينما تعمل الخاصية‬overflow-x
<div id="div-x">
If this div is too small to display its contents,
the content to the left and right will be clipped
</div>
<div id="div-y">
If this div is too small to display its contents,
the content to the top and bottom will be clipped
</div>
div {
width: 200px;
height: 200px;
}
#div-x {
overflow-x: hidden;
}
129
‫{ ‪#div-y‬‬
‫;‪overflow-y: hidden‬‬
‫}‬
‫‪ 3.7.3‬القاعدة ‪overflow: scroll‬‬

‫>‪<div‬‬
‫‪This div is too small to display its contents to display the‬‬
‫‪effects of the overflow property.‬‬
‫>‪</div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪div‬‬
‫;‪overflow: scroll‬‬
‫}‬
‫في المثال أعاله‪ ،‬مساحة الحاوية أقل من مساحة المحتوى مما ي‪ss‬ؤدي إىل اقتصاص‪ss‬ه وإظه‪ss‬ار ش‪ss‬ريط تمري‪ss‬ر‬
‫أفقي وآخر رأسي‪ ،‬ويظهر المحتوى كاماًل عند الطباعة‪.‬‬
‫‪ 3.7.4‬القاعدة ‪overflow: visible‬‬

‫‪130‬‬
‫>‪<div‬‬
‫‪Even if this div is too small to display its content, the‬‬
‫‪content is not clipped‬‬
‫>‪</div‬‬
‫ملف ‪:CSS‬‬ ‫•‬
‫{ ‪div‬‬
‫;‪overflow: visible‬‬
‫}‬
‫الح‪ss‬ظ ع‪ss‬دم اقتص‪ss‬اص المحت‪ss‬وى عن‪ss‬د اس‪ss‬تعمال القاع‪ss‬دة ‪ overflow: visible‬وإنم‪ss‬ا يمت‪ss‬د خ‪ss‬ارج‬
‫صندوق المحتوى‪.‬‬
‫‪ 3.7.5‬سياق تنسيق العنارص الكتلية الناتج عن خاصية ‪overflow‬‬

‫استعمال خاصية ‪ overflow‬بقيمة غير ‪ visible‬يتسبب في إنشاء سياق جديد لتنسيق الكُتل مما يُفيد‬
‫في محاذاة العناصر الكتلية المجاورة للعناصر العائمة ‪.floated elements‬‬
‫‪131‬‬
:‫مثال‬
img {
float: left;
margin-right: 10px;
}
div {
overflow: hidden; /* ‫* ًتنشيء سياق جديد لتنسيق العناصر الكتلية‬/
}
<img src="http://placehold.it/100*100">
<div>
<p>lorem ipsum dolor sit amet, cum no paulo mollis
pertinácia.</p>
<p>Ad case omnis nam, mutat deseruisse perseqeris eos ad, in
tollit debitis sea.</p>
</div>
132
‫‪ .4‬التحكم في تموضع العنارص‬
‫تأخذ الخاصية ‪ position‬التي تضبط موضع العنصر في الصفحة القيم الموضحة في الجدول التالي والتي‬
‫سنشرح كل واحدة منها بالتفصيل مع أمثلة‪.‬‬
‫تعرض العناصر بنفس ترتيبها كتابتها عىل ملف ‪.HTML‬‬ ‫‪static‬‬
‫لموضعه األصلي‪.‬‬
‫ِ‬ ‫ً‬
‫نسبة‬ ‫‪ relative‬تُحدد موضع العنصر‬
‫ً‬
‫نسبة لنافذة المتصفح‪.‬‬ ‫تُحدد موضع العنصر‬ ‫‪fixed‬‬
‫موضع نسبي‪.‬‬
‫ِ‬ ‫ً‬
‫نسبة أل َّول عنصر ذي‬ ‫‪ absolute‬تُحدد موضع العنصر‬
‫تُ ِ‬
‫رجع القيمة االبتدائية للخاصية‪.‬‬ ‫‪initial‬‬
‫عامل العنصر كما لو أنَّه ذو موضع نسبي ‪ relative‬وبعد تجاوز حد مع ّين من التمرير ألسفل‬
‫يُ َ‬
‫‪sticky‬‬
‫عامل عىل أنه ذو موضع ثابت ‪.fixed‬‬
‫فس ُي َ‬
‫مزيج بين ‪ initial‬و ‪ .inherit‬انظر توثيق ‪.CSS‬‬ ‫‪unset‬‬
‫الموضع ُ‬
‫المطلق ‪Absolute Position‬‬ ‫ِ‬ ‫‪4.1‬‬
‫عند استخدام الموضع المطلق‪ ،‬يُزال العنصر من البنية التنظيمية للصفحة‪ ،‬وال يُحجَز له مكانٌ في تخطيطها‪،‬‬
‫ً‬
‫نسبة إىل أقرب عنصر له موضع نسبي‪ ،‬أو إىل العنصر <‪ ،>body‬ويمكن التحكم في موض‪ss‬عه‬ ‫وإنما يُحدد موضعه‬
‫عبر الخواص ‪ top‬و ‪ right‬و ‪ bottom‬و ‪.left‬‬
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫التحكم في تموضع العناصر‬
‫{ ‪.abspos‬‬
‫;‪top: 0px‬‬
‫;‪left: 500px‬‬
‫}‬
‫‪ 4.2‬الموضع الثابت ‪Fixed Position‬‬

‫عند استخدام الموضع الثابت يُزال العنصر من البنية التنظيمية للصفحة‪ ،‬وال يُحجَز له مك‪ss‬انٌ في تخطيطه‪ss‬ا‪،‬‬
‫ً‬
‫نسبة إىل إطار الع‪ss‬رض ‪ ،viewport‬يمكن التحكم في موض‪ss‬عه ع‪ss‬بر الخ‪ss‬واص ‪ top‬و ‪right‬‬ ‫وإنما يُحدد موضعه‬
‫و ‪ bottom‬و ‪ ،left‬ومن االستخدامات الشائعة للموضع الثابت استخدامه لتثبيت العنصر في مكانه عند تمرير‬
‫الصفحة ألسفل‪.‬‬
‫{ ‪#stickyDiv‬‬
‫;‪position: fixed‬‬
‫;‪top: 10px‬‬
‫;‪left: 10px‬‬
‫}‬
‫‪ 4.3‬الموضع النسيب ‪Relative Position‬‬

‫يُحدد موضع العنصر بنا ًء عىل البنية التنظيمية للصفحة‪،‬ويمكن التحكم في إزاحته عن موضعه األص‪ss‬لي ع‪ss‬بر‬
‫الخواص ‪ top‬و ‪ right‬و ‪ bottom‬و ‪ left‬وال تؤثر هذه اإلزاحة عىل مواضع بقية العناصر‪.‬‬
‫{ ‪.relpos‬‬
‫;‪top: 20px‬‬
‫}‬
‫‪ 4.4‬الموضع االفرتايض حيث يجب ‪Static Position‬‬

‫يُحدد موض‪ss‬ع العنص‪ss‬ر بن‪ss‬ا ًء عىل البني‪ss‬ة التنظيمي‪ss‬ة للص‪ss‬فحة وال يك‪ss‬ون للخ‪ss‬واص ‪ top‬و ‪ right‬و ‪bottom‬‬
‫و ‪ left‬و ‪ z-index‬أي أثر عليه‪.‬‬
‫‪134‬‬
‫{ ‪.element‬‬
‫;‪position: static‬‬
‫}‬
‫‪ 4.5‬خاصية ‪z-index‬‬
‫تُحدِّد الخاصية ‪ z-index‬ترتيب العناصر ذات الموضع ُ‬

‫المح‪ss‬دد ‪ positioned elements‬عىل المح‪ss‬ور ‪،Z‬‬
‫فعندما تتداخل العناصر تُحدد قيمة هذه الخاصية أ ّ‬

‫ي العناصر سيظهر فوق بقية العناصر‪ ،‬حيث يظهر العنص‪ss‬ر ذو‬
‫القيمة األكبر للخاصية ‪ z-index‬في األعىل ويليه العنصر ذو القيمة األقل مباشرة وهكذا‪.‬‬
‫>‪<div id="div1"></div‬‬
‫{ ‪div‬‬
‫}‬
‫{ ‪div#div1‬‬
‫;‪z-index: 1‬‬
‫;‪top: 0px‬‬
‫;‪background-color: blue‬‬
‫}‬
‫;‪left: 100px‬‬
‫;‪top: 100px‬‬
‫‪135‬‬
‫}‬
‫;‪top: 150px‬‬
‫}‬

‫َّ‬
‫الصيغة العامة لكتابة الخاصية ‪:z-index‬‬
‫;‪z-index: [number] | auto‬‬
‫حيث‪:‬‬
‫[‪ :]number‬عدد صحيح يمثل ترتيب العنصر عىل المحور ‪.Z‬‬ ‫•‬
‫‪ :auto‬تُعطي العنصر نفس ترتيب أبيه عىل المحور ‪.Z‬‬ ‫•‬
‫يمكنك الرجوع إىل توثيق الخاصية ‪ z-index‬عىل موسوعة حسوب لمزيد من التفاصيل‪.‬‬
‫‪136‬‬
‫‪ 4.6‬سياق التطبيق ‪Stacking Context‬‬

‫في المثال أدناه‪ ،‬يُنشئ كل عنصر سياق تطبيق (من طبقات) خاص به‪ ،‬وبس‪ss‬بب مواض‪ss‬ع العناص‪ss‬ر و قيم‪ss‬ة‬
‫الخاصية ‪ z-index‬لهم‪ ،‬يُنشئ سياق تطبيق بالشكل التالي‪:‬‬
‫من المهم مالحظة أن العنصرين ‪ div #4‬و ‪ div #5‬و ‪ div #6‬هم أبناء للعنصر ‪ div #3‬ل‪ss‬ذلك يُنش‪ss‬أ‬
‫سياق التطبيق لهم بالنسبة له‪ ،‬وبعد ذلك ينشأ سياق التطبيق العام للصفحة‪ .‬مثال‪:‬‬
‫>"‪<div id="div1‬‬
‫>‪<h1>Division Element #1</h1‬‬
‫>‪<code>position: relative;<br/‬‬
‫>‪z-index: 5;</code‬‬
‫>‪</div‬‬
‫>"‪<div id="div2‬‬
‫>‪<h1>Division Element #2</h1‬‬
‫>‪<code>position: relative;<br/‬‬
‫>‪z-index: 2;</code‬‬
‫>‪</div‬‬
‫‪137‬‬
CSS ‫مالحظات للعاملين بلغة‬ ‫التحكم في تموضع العناصر‬
<div id="div3">
<div id="div4">GoalKicker.com – CSS Notes for Professionals 210
<h1>Division Element #4</h1>
<code>position: relative;<br/>
z-index: 6;</code>
</div>
<code>position: absolute;<br/>
z-index: 4;</code>
<div id="div5">
<code>position: relative;<br/>
z-index: 1;</code>
</div>
<div id="div6">
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</div>
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
opacity: 0.7;
position: relative;
}
h1 {
font: inherit;
font-weight: bold;
138
}
#div1,
#div2 {
border: 1px dashed #696;
padding: 10px;
background-color: #cfc;
}
#div1 {
z-index: 5;
margin-bottom: 190px;
}
#div2 {
z-index: 2;
}
#div3 {
z-index: 4;
opacity: 1;
position: absolute;
top: 40px;
left: 180px;
width: 330px;
background-color: #fdd;
padding: 40px 20px 20px;
}
#div4,
#div5 {
background-color: #ffc;
}
#div4 {
z-index: 6;
padding: 25px 10px 5px;
}
#div5 {
139
z-index: 1;
margin-top: 15px;
padding: 5px 10px;
}
#div6 {
z-index: 3;
position: absolute;
top: 20px;
left: 180px;
width: 150px;
height: 125px;
padding-top: 125px;
background-color: #ddf;
text-align: center;
}
.stacking context ‫ توثيق‬:‫المصدر‬
140
‫‪ .5‬تنسيق القوائم وإضافة الظالل ورسم‬
‫األشكال‬
‫‪ 5.1‬تنسيق القوائم‬
‫يوضح الجدول التالي الخاصيات المستعملة في تنسيق القوائم مع وصفها‪:‬‬
‫تُحدد شكل أو نوع مؤشر القائمة‪ ،‬ويمكن أن تأخذ القيم ‪ disc‬أو ‪ circle‬أو‬
‫‪ square‬أو ‪ decimal‬أو ‪ lower-roman‬أو ‪ upper-roman‬أو ‪.none‬‬ ‫‪list-style-type‬‬
‫انظر توثيقها لمعرفة جميع القيم المتاحة‪.‬‬
‫تُحدِّد مكان مؤشر القائمة‪.‬‬ ‫‪list-style-position‬‬
‫تُحدِّد صورة تستخدم كمؤشر للقائمة‪.‬‬ ‫‪list-style-image‬‬
‫ترث أنماط القائمة من العنصر األب‪.‬‬ ‫‪inherit‬‬
‫يمكنك الرجوع إىل قسم القوائم في توثيق ‪ CSS‬الرسمي العربي لمزيد من التفاصيل‪.‬‬
‫{ ‪li‬‬
‫;‪list-style-type: square‬‬
‫}‬
‫{ ‪li‬‬
‫)'‪list-style-image: url('images/bullet.png‬‬
‫}‬
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫تنسيق القوائم وإضافة الظالل ورسم األشكال‬
‫{ ‪li‬‬
‫;‪list-style-position: inside‬‬
‫}‬
‫‪ 5.1.1‬تموضع عنارص القائمة‬

‫لكل من عناصر القائمة أي عناصر <‪ >li‬والعنصر الحاوي لها أي <‪ >ul‬أو <‪ >ol‬ه‪ss‬وامش وحواش‪ss‬ي خاص‪ss‬ة‬
‫به‪ ،‬وتؤثر هذه الهوامش والحواشي عىل موضع محت‪ss‬وى عنص‪ss‬ر القائم‪ss‬ة <‪ ،>li‬وبم‪ss‬ا أن المتص‪ss‬فحات المختلف‪ss‬ة‬
‫تضيف هوامش وحواشي بمساحات مختلفة مما يؤدي إىل اختالف شكل الصفحة حسب المتصفح الذي تُعرض‬
‫فيه‪ ،‬لذلك البد من إعادة ضبط هذه المساحات يدويًا‪ .‬لكل عنصر من عناص‪ss‬ر القائم‪ss‬ة ص‪ss‬ندوق يُس‪ss‬مى ص‪ss‬ندوق‬
‫المؤشر ‪ marker box‬يوضع بداخلة مؤشر عناصر القائمة‪ ،‬ويمكن أن يكون هذا الصندوق داخل أو خارج صندوق‬
‫عنصر القائمة <‪.>li‬‬
‫مثال عىل وضع صندوق المؤشر داخل صندوق عنصر القائمة‪:‬‬
‫;‪list-style-position: insde‬‬
‫مثال عىل وضع صندوق المؤشر خارج صندوق عنصر القائمة‪:‬‬
‫;‪list-style-position: outside‬‬

‫َّ‬
‫‪ 5.1.2‬حذف المؤرش أو الرتقيم من عنارص القائمة‬

‫في بعض األحي‪ss‬ان نح‪ss‬ذف المؤش‪ss‬ر أو ال‪ss‬ترقيم من عناص‪ss‬ر القائم‪ss‬ة‪ ،‬ويجب في ه‪ss‬ذه الح‪ss‬االت التخلص من‬
‫مساحة صندوق المؤشر كما هو موضح في المثال التالي‪:‬‬
‫>‪<ul‬‬
‫>‪<li>first item</li‬‬
‫>‪<li>second item</li‬‬
‫>‪</ul‬‬
‫{ ‪ul‬‬
‫;‪list-style-type: none‬‬
‫}‬
‫‪142‬‬
CSS ‫مالحظات للعاملين بلغة‬ ‫تنسيق القوائم وإضافة الظالل ورسم األشكال‬
li {
margin: 0;
padding: 0;
}
‫ تحديد شكل المؤرش أو نوع الرتقيم لعنارص القائمة‬5.1.3

:>ul< ‫تحديد شكل المؤشر لعناصر القائمة الغير مرتبة‬
list-style: disc; /* A filled circle (default) */

list-style: circle; /* A hollow circle */
list-style: square; /* A filled square */
list-style: '-'; /* any string */
:>li< ‫تحديد نوع الترقيم لعناصر القائمة المرتبة‬
list-style: decimal; /* Decimal numbers beginning with 1 (default) */

list-style: decimal-leading-zero;/* Decimal numbers padded by initial
zeros (01, 02, 03, … 10) */
list-style: lower-roman; /* Lowercase roman numerals (i., ii., iii.,
iv., ...) */
list-style: upper-roman; /* Uppercase roman numerals (I., II., III.,
IV., ...) */
list-style-type: lower-greek; /* Lowercase roman letters (α., β., γ.,
δ., ...) */
list-style-type: lower-alpha; /* Lowercase letters (a., b., c.,
d., ...) */
list-style-type: lower-latin; /* Lowercase letters (a., b., c.,
d., ...) */
list-style-type: upper-alpha; /* Uppercase letters (A., B., C.,
D., ...) */
list-style-type: upper-latin; /* Uppercase letters (A., B., C.,
D., ...) */
َّ ‫ تنسيق الع‬5.1.4
Counters ‫دادات‬
:‫يوضح الجدول التالي ما يتعلق بخاصيات تنسيق العدادات‬
.‫اسم العداد‬ counter-name
.‫ أو القيمة التي سيزيد العداد بمقدارها‬،‫(اختياري) يُظهر القيمة االبتدائية للعداد‬ integer
143
‫القيمة االبتدائية لجميع خاصيات العداد‪.‬‬ ‫‪none‬‬
‫تُحدد النمط الذي ستظهر به قيمة العداد‪.‬‬ ‫‪counter-style‬‬
‫تُحدد العالمة أو النص الذي س ُيعرض بين قيم العداد‪ ،‬عالمة النقطة (‪ ).‬في ‪2.1.1‬‬
‫‪connector-string‬‬
‫مثاًل ‪.‬‬
‫ا‪ .‬استخدام األرقام الرومانية عرب ع َّ‬

‫دادات ‪CSS‬‬
‫{ ‪body‬‬
‫;‪counter-reset: item-counter‬‬
‫}‬
‫{ ‪.item‬‬
‫;‪counter-increment: item-counter‬‬
‫}‬
‫{ ‪.item:before‬‬
‫;" ‪content: counter(item-counter, upper-roman) ".‬‬
‫}‬
‫>‪<div class='item'>Item No: 1</div‬‬

‫في هذا المثال ستُعرض قيم العداد باألرقام الرومانية (‪.)I، II، III‬‬
‫ب‪ .‬ترقيم العنارص في صفحة ‪ HTML‬باستخدام العدادات‬
‫>'‪<div class='item‬‬
‫>‪<div class='item-header'>Item 1 Header</div‬‬
‫>‪<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div‬‬
‫>‪</div‬‬
‫‪144‬‬
<div class='item'>
<div class='item-header'>Item 2 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 3 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
body {
counter-reset: item-counter; /* ‫* إنشاء العداد‬/
}
.item {
counter-increment: item-counter; /* ‫ تزيد قيمة العداد لكل تكرار للصنف‬item
*/
}
.item-header:before {
content: counter(item-counter) ". "; /* ‫* طباعة قيمة العداد‬/
}
item {
border: 1px solid;
height: 100px;
}
.item-header {
border-bottom: 1px solid;
height: 40px;
line-height: 40px;
padding: 5px;
}
.item-content {
padding: 8px;
}
.JSFiddle ‫اطلع عىل تجربة ح َّية لهذا المثال عىل‬

َّ
145
‫ج‪ .‬إنشاء ترقيم متعدد المستويات‬
‫>‪<ul‬‬
‫‪<li>Level 1‬‬
‫>‪<ul‬‬
‫‪<li>Level 1.1‬‬
‫>‪<ul‬‬
‫>‪<li>Level 1.1.1</li‬‬
‫>‪</ul‬‬
‫>‪</li‬‬
‫>‪</ul‬‬
‫>‪</li‬‬
‫‪<li>Level 2‬‬
‫>‪<ul‬‬
‫‪<li>Level 2.1‬‬
‫>‪<ul‬‬
‫>‪<li>Level 2.1.1</li‬‬
‫>‪<li>Level 2.1.2</li‬‬
‫>‪</ul‬‬
‫>‪</li‬‬
‫>‪</ul‬‬
‫>‪</li‬‬
‫>‪</ul‬‬
‫في هذا المثال استخدمنا مفهوم العدَّادات المتداخلة إلنشاء ت‪ss‬رقيم متع‪ss‬دد المس‪ss‬تويات‪ ،‬الفك‪ss‬رة األساس‪ss‬ية‬
‫للعدادات المتداخلة أنّه إذا كان للعنصر عدَّاد باسم معين وُأجبر عىل إنشاء عدَّاد آخر بنفس االس‪ss‬م فإن‪ss‬ه س ُي ِ‬
‫نش ‪s‬ئه‬
‫كابن للعداد الحالي‪.‬‬
‫في هذا المثال‪ ،‬عنصر <‪ >ul‬الثاني ي‪ss‬رث الع‪ss‬داد ‪ list-item-number‬من العنص‪ss‬ر األب‪ ،‬ومن ثم علي‪ss‬ه‬
‫إنشاء عداد جدي‪s‬د بنفس االس‪s‬م ألبنائ‪s‬ه‪ ،‬وبالت‪s‬الي يُنش‪s‬ئ الع‪s‬داد [‪ list-item-number[1‬كف‪s‬ر ع من الع‪s‬داد‬
‫[‪ .list-item-number[0‬ولعرض النتيجة نستخدم الدالة ()‪ counters‬بداًل عن ()‪ counter‬ألننا نمتل‪ss‬ك‬
‫أكثر من عدَّاد واحد‪.‬‬
‫‪146‬‬
‫‪ 5.2‬تطبيق ظالل عىل العنرص‬

‫تسمح الخاصية ‪ box-shadow‬بإنشاء ظالل للعنصر‪ ،‬وإذا كانت الخاص‪ss‬ية ‪ُ border-radius‬مح ‪s‬دَّدة عىل‬
‫العنصر مع هذه الخاصية‪ ،‬فستأخذ الظالل شكل الحواف المدورة‪.‬‬
‫يوضح الجدول التالي القيم التي يمكن تأخذها الخاصية ‪:box-shadow‬‬
‫تؤدي إىل إنشاء ظالل داخل إطار العنصر‪.‬‬ ‫‪inset‬‬
‫اإلزاحة األفقية للظل عن العنصر‪.‬‬ ‫‪offset-x‬‬
‫اإلزاحة الرأسية للظل عن العنصر‪.‬‬ ‫‪offset-y‬‬
‫كلما كبرت القيمة زاد تأثير الضبابية‪ ،‬وبالتالي سيصبح الظل أكبر وأكشف لونًا‪،‬‬ ‫‪blur-radius‬‬
‫القيم الموجبة لها ستؤدي إىل جعل الظل يتوسع ويكبر‪ ،‬والقيم السالبة ستجعل الظل‬
‫‪ spread-radius‬يتقلص ويصغر‪ ،‬وإذا لم تُحدَّد هذه القيمة فستكون ‪( 0‬أي أنَّ قياس الظل سيبقى‬
‫كما هو)‪.‬‬
‫لون الظل‪.‬‬ ‫‪color‬‬
‫‪ 5.2.1‬إنشاء ظل أسفل العنرص باستخدام العنارص الزائفة‬

‫>‪<div class="box_shadow"></div‬‬
‫{ ‪box_shadow‬‬
‫;‪background-color: #1C90F3‬‬
‫}‬
‫{ ‪.box_shadow:after‬‬
‫;‪margin-top: 98px‬‬
‫‪147‬‬
margin-left: 5px;
display: block;
position: absolute;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #444444;
-moz-box-shadow: 0px 0px 8px 2px #444444;
box-shadow: 0px 0px 8px 2px #444444;
}

َّ
‫ إنشاء ظالل خارجية ألوجه العنرص األربعة‬5.2.2

<div class="box_shadow"></div>
.box_shadow {
-webkit-box-shadow: 0px 0px 10px -1px #444444;
-moz-box-shadow: 0px 0px 10px -1px #444444;
box-shadow: 0px 0px 10px -1px #444444;
}

َّ
148
‫ إنشاء ظالل داخلية للعنرص‬5.2.3

box_shadow {
background-color: #1C90F3;
width: 200px;
height: 100px;
margin: 50px;
-webkit-box-shadow: inset 0px 0px 10px 0px #444444;
-moz-box-shadow: inset 0px 0px 10px 0px #444444;
box-shadow: inset 0px 0px 10px 0px #444444;
}

َّ
‫ إضافة ظالل متعددة للعنرص‬5.2.4

149
‫{ ‪box_shadow‬‬
‫‪box-shadow:‬‬
‫‪-52px -52px 0px 0px #f65314,‬‬
‫‪52px -52px 0px 0px #7cbb00,‬‬
‫‪-52px 52px 0px 0px #00a1f1,‬‬
‫;‪52px 52px 0px 0px #ffbb00‬‬
‫}‬

‫َّ‬
‫‪ 5.3‬رسم األشكال باستخدام ‪CSS‬‬
‫‪ 5.3.1‬رسم شبه المنحرف ‪Trapezoid‬‬

‫لرسم شكل شبه المنحرف‪ ،‬أنشئ عنصر كتلي بارتفاع صفر‪ ،‬وعرض أكبر من الص‪ss‬فر‪ ،‬وإط‪ss‬ار ش‪ss‬فاف لجمي‪ss‬ع‬
‫األوجه عدا وجه واحد‪.‬‬
‫‪150‬‬
<div class="trapezoid"></div>
.trapezoid {
width: 50px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid black;
}
Triangles ‫ رسم المثلثات‬5.3.2

.‫ ويُرسم الشكل باستخدام اإلطارات‬،‫لرسم المثلث أنشئ عنصر كتلي بارتفاع وعرض صفر‬
:‫مثال عىل رأس المثلث إىل أعىل‬
<div class="triangle-up"></div>
<style>
.triangle-up {
width: 0;
height: 0;
border-bottom: 50px solid rgb(246, 156, 85);
}
</style>
:‫مثال عىل رأس المثلث إىل أسفل‬
151
<div class="triangle-down"></div>
<style>
.triangle-down {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 156, 85);
}
</style>
:‫مثال عىل رأس المثلث إىل اليمين‬
<div class="triangle-right"></div>
<style>
.triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 50px solid rgb(246, 156, 85);
}
</style>
152
:‫مثال عىل رأس المثلث إىل اليسار‬
<div class="triangle-left"></div>
<style>
.triangle-left {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 50px solid rgb(246, 156, 85);
}
</style>
:‫مثال عىل المثلث يشير إىل أعىل اليمين‬
<div class="triangle-up-right"></div>
<style>
.triangle-up-right {
width: 0;
height: 0;
}
</style>
153
:‫مثال عىل المثلث يشير إىل أعىل اليسار‬
<div class="triangle-up-left"></div>
<style>
.triangle-up-left {
width: 0;
height: 0;
}
</style>
:‫مثال عىل المثلث يشير إىل أسفل اليمين‬
<div class="triangle-down-right"></div>
<style>
.triangle-down-right {
width: 0;
height: 0;
}
</style>
154
:‫مثال عىل المثلث يشير إىل أسفل اليسار‬
<div class="triangle-down-left"></div>
<style>
.triangle-down-left {
width: 0;
height: 0;
}
</style>
‫ رسم الدائرة‬5.3.3
border-radius ‫ية‬s‫ة الخاص‬ss‫دد قيم‬s‫ ومن ثم ح‬،‫لرسم الدائرة أنشئ عنصر كتلة بارتفاع وعرض متساويين‬
.%50 ‫لتكون‬
<div class="circle"></div>
<style>
.circle {
width: 50px;
height: 50px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
</style>
155
‫ رسم الشكل البيضاوي‬5.3.4

border- ‫ية‬s‫ة الخاص‬s‫ ومن ثم حدد قيم‬،‫لرسم الشكل البيضاوي أنشئ عنصر كتلة بارتفاع وعرض مختلفين‬
.%50 ‫ لتكون‬radius
<div class="oval"></div>
<style>
.circle {
width: 50px;
height: 80px;
border-radius: 50%;
}
</style>
‫ شكل االنفجار‬5.3.5
:‫مثال عىل رسم شكل انفجار بثماني نقاط‬
<div class="burst-8"></div>
<style>
.burst-8 {
width: 40px;
height: 40px;
position: relative;
text-align: center;
-ms-transform: rotate(20deg);
transform: rotate(20eg);
}
156
.burst-8::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
transform: rotate(135deg);
}
</style>
:‫مثال عىل رسم شكل انفجار باثنتي عشر نقطة‬
<div class="burst-12"></div>
<style>
burst-12 {
width: 40px;
height: 40px;
position: relative;
text-align: center;
}
.burst-12::before, .burst-12::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
157
width: 40px;
}
.burst-12::before {
}
.burst-12::after {
}
</style>
‫ رسم المربع‬5.3.6
.‫لرسم مربع أنشئ عنصر كتلة بارتفاع وعرض متساويين‬
:‫مثال‬
<div class="square"></div>
<style>
.square {
width: 100px;
height: 100px;
}
</style>
158
‫ رسم المكعب‬5.3.7
.‫ عىل العناصر الزائفة لرسم المكعب‬skewY() ‫ و‬skewX() ‫تستخدم خاصيات التحويالت ثنائية األبعاد‬
:‫مثال‬
<div class="cube"></div>
<style>
cube {
background: #dc2e2e;
width: 100px;
height: 100px;
position: relative;
margin: 50px;
}
.cube::before {
content: '';
background: #f15757;
width: 100px;
height: 20px;
transform: skewX(-40deg);
position: absolute;
top: -20px;
left: 8px;
}
.cube::after {
content: '';
159
background: #9e1515;
width: 16px;
height: 100px;
transform: skewY(-50deg);
position: absolute;
top: -10px;
left: 100%;
}
</style>
‫ رسم الهرم‬5.3.8
‫ة لرسم‬ss‫ر الزائف‬ss‫ عىل العناص‬rotate() ‫ و‬skewY() ‫اد‬ss‫ة األبع‬ss‫ويالت ثنائي‬ss‫ع التح‬ss‫ارات م‬ss‫تخدم اإلط‬ss‫تس‬
.‫شكل الهرم‬
<div class="pyramid"></div>
<style>
.pyramid {
width: 100px;
height: 200px;
position: relative;
margin: 50px;
}
160
.pyramid::before,.pyramid::after {
content: '';
width: 0;
height: 0;
border: 50px solid;
position: absolute;
}
.pyramid::before {
border-color: transparent transparent #ff5656 transparent;
transform: scaleY(2) skewY(-40deg) rotate(45deg);
}
.pyramid::after {
border-color: transparent transparent #d64444 transparent;
transform: scaleY(2) skewY(40deg) rotate(-45deg);
}
</style>
161
‫‪ .6‬التنسيقات األساسية للعنارص‬
‫‪ 6.1‬تنسيقات الخطوط‬
‫يمكن استعمال الخاصيات التالية في ‪ CSS‬لتنسيق الخطوط‪:‬‬
‫الوصف‬ ‫الخاصية‬
‫نمط الخط‪ ،‬مائل ‪ italics‬أو منحرف ‪.oblique‬‬ ‫‪font-style‬‬
‫تأخذ إحدى القيمتين ‪ normal‬أو ‪.small-caps‬‬ ‫‪font-variant‬‬
‫ثُخن الخط‪ ،‬وتأخذ القيم ‪ normal‬أو ‪ bold‬أو قيم رقمية بين ‪ 100‬و ‪.900‬‬ ‫‪font-weight‬‬
‫حجم الخط ويمكن أن يكون نسبة مئوية أو بالوحدات ‪ px‬أو ‪ em‬أو غيرها من الوحدات‪.‬‬ ‫‪font-size‬‬
‫ارتفاع السطر ويمكن أن يكون نسبة مئوية أو بالوحدات ‪ px‬أو ‪ em‬أو غيرها من وحدات‬
‫‪line-height‬‬
‫‪.CSS‬‬
‫نوع الخط‪.‬‬ ‫‪font-family‬‬
‫لون الخط‪.‬‬ ‫‪color‬‬
‫سعة ‪ expanded‬من الخط‪.‬‬

‫تختار نسخة ضيقة ‪ condensed‬أو عادية ‪ normal‬أو ُم َو َّ‬ ‫‪font-stretch‬‬
‫محاذاة النص‪ ،‬ارجع إىل توثيقها لمعرفة جميع القيم التي تأخذها‪.‬‬ ‫‪text-align‬‬
‫‪ text-decoration‬زخرفة الخط‪ ،‬ارجع إىل توثيقها لمعرفة جميع القيم التي تأخذها‪..‬‬
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫التنسيقات األساسية للعناصر‬
‫‪ 6.1.1‬الصياغة المخزتلة لخاصية الخطوط ‪font‬‬

‫يُمكن تعريف جميع خاصيات الخط في سطر واحد باستخدام الصياغة المختزلة الموضحة في المثال التالي‪:‬‬
‫{ ‪element‬‬
‫‪font: [font-style] [font-variant] [font-weight] [font-size/line-‬‬
‫;]‪height] [font-family‬‬
‫}‬
‫{ ‪p‬‬
‫;‪font-weight: bold‬‬
‫;‪font-family: Arial, sans-serif‬‬
‫}‬
‫يُمكن إع‪ss‬ادة كتاب‪ss‬ة الش‪ss‬يفرة أعاله في س‪ss‬طر واح‪ss‬د باس‪ss‬تخدام الص‪ss‬ياغة المختزل‪ss‬ة كم‪ss‬ا ه‪ss‬و موض‪ss‬ح في‬
‫المثال التالي‪:‬‬
‫{ ‪p‬‬
‫;‪font: bold 20px Arial, sans-serif‬‬
‫}‬
‫انتبه إىل أن الخاص‪ss‬يات ‪ font-style‬و‪ font-variant‬و‪ font-weight‬و‪ line-height‬خاص‪ss‬يات‬
‫اختيارية وعدم تحديدها في الصياغة المختزلة يعني استخدام القيم االبتدائية له‪ss‬ا‪ ،‬أم‪ss‬ا الخاص‪ss‬يتين ‪font-size‬‬
‫و ‪ font-family‬فهما خاصيتين ضروريتين وعدم تحديدهما يؤدي إىل تجاهل الشيفرة وعدم تطبيقها‪.‬‬
‫القيم االبتدائية لخاصيات الخطوط‪:‬‬
‫;‪font-style: normal‬‬
‫;‪font-variant: normal‬‬
‫;‪font-weight: normal‬‬
‫;‪font-stretch: normal‬‬
‫;‪font-size: medium‬‬
‫;‪line-height: normal‬‬
‫‪ */‬يعتمد على نوع الجهاز المستخدم لعرض الصفحة *‪font-family: /‬‬
‫‪163‬‬
‫‪ 6.1.2‬االقتباسات‬
‫تستخدم الخاصية ‪ quotes‬لتحديد شكل عالمات التنصيص للعنصر <‪:>q‬‬
‫{ ‪q‬‬
‫;">" "<" ‪quotes:‬‬
‫}‬
‫‪ 6.1.3‬حجم الخط‬
‫تستخدم الخاصية ‪ font-size‬لتحديد حجم الخط ويوضح المثال التالي كيفية استخدامها‪:‬‬
‫>‪<div id="element-one">Hello I am some text.</div‬‬

‫>‪<div id="element-two">Hello I am some smaller text.</div‬‬
‫{ ‪#element-one‬‬
‫}‬
‫{ ‪#element-two‬‬
‫}‬
‫بتطبيق الشيفرة أعاله يصبح حجم الخ‪ss‬ط داخ‪ss‬ل العنص‪ss‬ر ‪ #element-one‬ه‪ss‬و ‪ 30‬بكس‪ss‬ل‪ ،‬و ‪ 10‬بكس‪ss‬الت‬
‫داخل العنصر ‪.#element-two‬‬
‫‪ 6.1.4‬تعريف عدة أنواع من الخطوط‬

‫يمكن تحديد عدد من أنواع الخطوط عبر الخاصية ‪ ،font-family‬ويُعطي المتص‪ss‬فح األولوي‪ss‬ة للخ‪ss‬ط األول‬
‫في التعريف وفي حال عدم توفره ينتقل للخط الثاني وهكذا‪.‬‬
‫;‪font-family: 'Segoe UI', Tahoma, sans-serif‬‬

‫;‪font-family: Consolas, 'Courier New', monospace‬‬
‫إذا تكون اسم الخط من أكثر من كلمة واحدة فيجب وضعه بين عالمتي تنصيص‪.‬‬
‫‪164‬‬
‫‪ 6.1.5‬الخاصية ‪font-variant‬‬
‫تأخذ القيم الموضحة بالجدول التالي‪:‬‬
‫تستعمل الخاصيات العادية للخط‪.‬‬ ‫‪normal‬‬
‫تُحول الحروف الصغيرة لحروف كبيرة ولكن بنفس حجم الخطوط الصغيرة مع تصغير الحروف‬
‫‪small-caps‬‬
‫الصغيرة قلياًل ‪.‬‬
‫>"‪<p class="smallcaps‬‬
‫‪Documentation about CSS Fonts‬‬
‫>‪<br‬‬
‫‪aNd ExAmpLe‬‬
‫>‪</p‬‬
‫{ ‪.smallcaps‬‬
‫;‪font-variant: small-caps‬‬
‫}‬
‫الحظ أن الخاصية ‪ font-variant‬خاصية ُمختزلة‪ ،‬وتضم الخاصيات التالية‪:‬‬
‫‪font-variant-caps‬‬
‫‪font-variant-numeric‬‬
‫‪font-variant-alternates‬‬
‫‪font-variant-ligatures‬‬
‫‪font-variant-east-asian‬‬
‫‪165‬‬
‫‪ 6.2‬اتجاه الكتابة‬
‫{ ‪div‬‬
‫اتجاه الكتابة من اليسار لليمين *‪/‬‬ ‫‪*/‬‬
‫;‪direction: ltr‬‬
‫}‬
‫{ ‪.ex‬‬
‫‪ */‬اتجاه الكتابة من اليمين لليسار *‪/‬‬
‫;‪direction: rtl‬‬
‫}‬
‫{ ‪.horizontal-tb‬‬
‫‪ */‬اتجاه الكتابة أفقي من اليمين إلى اليسار *‪/‬‬
‫;‪writing-mode: horizontal-tb‬‬
‫}‬
‫{ ‪.vertical-rtl‬‬
‫‪ */‬اتجاه الكتابة رأسيً ا من أعلى لأسفل وأفقيً ا من اليمين إلى اليسار *‪/‬‬
‫;‪writing-mode: vertical-rl‬‬
‫}‬
‫{ ‪.vertical-ltr‬‬
‫‪ */‬اتجاه الكتابة رأسيً ا من أعلى لأسفل وأفقيً ا من اليسار إلى اليمين *‪/‬‬
‫;‪writing-mode: vertical-lr‬‬
‫}‬
‫تستخدم الخاصية ‪ direction‬لتحديد االتجاه األفقي للكتابة (من اليمين إىل اليسار أو العكس)‪ ،‬ولها أرب‪ss‬ع‬
‫قيم هي‪:‬‬
‫;‪direction: ltr | rtl | initial | inherit‬‬
‫تستخدم الخاصية ‪ writing-mode‬لتغي‪ss‬ير مح‪ss‬اذاة النص‪ ،‬فإم‪ss‬ا أن يُكتب من أعىل ألس‪ss‬فل أو من اليس‪ss‬ار‬
‫إىل اليمين‪.‬‬
‫;‪writing-mode: horizontal-tb | vertical-rl | vertical-lr‬‬
‫‪166‬‬
‫‪ 6.3‬خاصيات تنسيق النصوص واألحرف‬
‫‪ 6.3.1‬طفحان النص‬
‫تُحدِّد الخاصية ‪ text-overflow‬ماذا سيحدث عن‪s‬د زي‪s‬ادة النص عن مس‪s‬احة ص‪s‬ندوقه‪ ،‬فيمكن أن يُقص‬
‫المحتوى‪ ،‬أو أن تُعرض ثالث نقاط (…)‪ ،‬أو أن تُعرض سلسلة نصية خاصة‪.‬‬
‫{ ‪.text‬‬
‫;‪overflow: hidden‬‬
‫;‪text-overflow: ellipsis‬‬
‫}‬
‫تستخدم القيمة ‪ ellipsis‬لتمثيل النص المقصوص بثالث نقاط تُع‪ss‬رض داخ‪ss‬ل ص‪ss‬ندوق المحت‪ss‬وى مم‪ss‬ا‬
‫يؤدي إىل تقليل كمية النص المعروض إذا لم تكن هناك مساحة كافية لعرض النقاط‪.‬‬
‫‪ 6.3.2‬إضافة تأثري الظالل عىل النص‬

‫فص‪ss‬ل بين‬
‫تستخدم الخاصية ‪ text-shadow‬إلضافة تأثير الظالل عىل النص‪ ،‬وتقبل تحديد أكثر من ظل (يُ َ‬
‫قيمها بفاصلة)‪ ،‬ويُطبَّق الظل عىل النص وعىل خطوط الزخرفة ‪ text-decoration‬التابع‪ss‬ة للعنص‪ss‬ر‪ ،‬وتوض‪ss‬ح‬
‫الشيفرة التالية الصيغة العامة الستخدامها‪:‬‬
‫;‪text-shadow: horizontal-offset vertical-offset blur color‬‬
‫مثال عن إضافة ظِ ل بلون معين‪:‬‬
‫{ ‪h1‬‬
‫;‪text-shadow: 2px 2px #0000FF‬‬
‫}‬
‫مثال عن إضافة ظل مع تأثير ضبابي‪:‬‬
‫{ ‪h1‬‬
‫;‪text-shadow: 2px 2px 10px #0000FF‬‬
‫}‬
‫مثال عن إضافة ظالل متعددة‪:‬‬
‫{ ‪h1‬‬
‫;‪text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF‬‬
‫}‬
‫‪167‬‬
CSS ‫مالحظات للعاملين بلغة‬ ‫التنسيقات األساسية للعناصر‬
‫ حالة األحرف‬6.4
‫رض‬ss‫ا أن تُع‬ss‫ر؛ فإم‬ss‫ا العنص‬ss‫ لتحديد حالة األحرف التي س ُيع َرض فيه‬text-transform ‫تستخدم الخاصية‬
‫ة‬ss‫ل كلم‬ss‫رف من ك‬s‫رض أول ح‬ss‫ أو أن يُع‬lowercase ‫غيرة‬ss‫ة الص‬ss‫ أو بالحال‬uppercase ‫كل األحرف بالحالة الكبيرة‬
.‫كبيرًا‬
:‫إليك مثال‬
<p class="example1">
all letters in uppercase
</p>
all letters in Capitalize
</p>
all letters in lowercase
</p>
.example1 {
text-transform: uppercase;
}
.example2 {
text-transform: capitalize;
}
.example3 {
text-transform: lowercase;
}
‫ التباعد بني األحرف‬6.4.1

.‫ التباعد بين األحرف النصية‬letter-spacing ‫تحدد الخاصية‬
168
‫{ ‪h2‬‬
‫‪ */‬تزيد المسافة بين الأحرف بمقدار ‪ 1‬بكسل *‪/‬‬
‫;‪letter-spacing: 1px‬‬
‫}‬
‫{ ‪p‬‬
‫القيمة السالبة تعني تقليل المسافة بين الأحرف *‪/‬‬ ‫‪*/‬‬
‫;‪letter-spacing: -1px‬‬
‫}‬
‫يمكنك الرجوع إىل توثيق ‪ letter-spacing‬في موسوعة حسوب لمزيد من التفصيل‪.‬‬
‫‪ 6.4.2‬المسافة البادئة النص‬

‫تُحَ َدِد الخاصية ‪ text-indent‬مقدار المسافة التي توضع قبل أول سطر في النص داخل عناصر الكتلة‪.‬‬
‫{ ‪p‬‬
‫;‪text-indent: 50px‬‬
‫}‬
‫يمكنك الرجوع إىل توثيق ‪ text-indent‬في موسوعة حسوب لمزيد من التفصيل‪.‬‬
‫‪ 6.4.3‬زخرفة النص‬
‫تحدد الخاصية ‪ text-decoration‬شكل خطوط الزخرفة (‪ )decorative lines‬المستخدمة عىل النص؛‬
‫ٌ‬
‫خاصية مختصرة تضبط كل من الخاصيات‪:‬‬ ‫وهي‬
‫‪text-decoration-line‬‬
‫‪text-decoration-color‬‬
‫‪text-decoration-style‬‬
‫‪ */‬لا توجد زخرفة *‪h1 { text-decoration: none; } /‬‬

‫‪ */‬إضافة خط فوق النص *‪h2 { text-decoration: overline; } /‬‬
‫‪ */‬إضافة خط يمر عبر النص *‪h3 { text-decoration: line-through; } /‬‬
‫‪ */‬إضافة خط تحت النص *‪h4 { text-decoration: underline; } /‬‬
‫‪ */‬الشيفرتان أدناه متكافئتان *‪/‬‬
‫{ ‪.title‬‬
‫‪169‬‬
text-decoration: underline dotted blue;

}
.title {
text-decoration-style: dotted;
text-decoration-line: underline;
text-decoration-color: blue;
}
‫ة‬s‫ياغة المختزل‬s‫ ولكن يُمكن استخدام الص‬،Firefox ‫انتبه إىل أن الخاصيات التالية مدعومة فقط في متصفح‬
:‫في بقية المتصفحات‬
text-decoration-line
text-decoration-color
text-decoration-style
‫ التباعد بني الكلمات‬6.4.4

:‫المتاحة التي تأخذها‬
ُ ‫ والقيم‬،‫ التباعد بين الكلمات والوسوم‬word-spacing ‫تحدد الخاصية‬
.)CSS ‫ أو غيرها من وحدات‬em ‫ أو‬px( ‫رقم صحيح موجب أو سالب يحدد المسافة بإحدى الوحدات‬ •
.‫نسبة مئوية‬ •
.normal ‫الكلمة المحجوزة‬ •
.inherit ‫الكلمة المحجوزة‬ •
:‫مثال‬
<p>
<span class="normal">This is an example, showing the effect of
"word-spacing".</span><br>
<span class="narrow">This is an example, showing the effect of
<span class="extensive">This is an example, showing the effect of
</p>
170
.normal { word-spacing: normal; }

.narrow { word-spacing: -3px; }
.extensive { word-spacing: 10px; }
.JSFiddle ‫اطلع عىل تجربة حية للمثال أعاله عىل‬
.‫ في موسوعة حسوب لمزيد من التفصيل‬word-spacing ‫يمكنك الرجوع إىل توثيق‬
‫ تقسيم النص إىل أعمدة‬6.4.5

.‫ لفصل النص لعدد من األعمدة‬column-count ‫يُمكن استخدام الخاصية‬
:‫مثال‬
<div id="multi-columns">Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est
laborum</div>
<style>
.multi-columns {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
</style>
171
.‫ أقل عرض ممكن للعمود‬column-width ‫تُحدد الخاصية‬
:‫مثال‬
<div id="multi-columns">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborumGoalKicker.com
– CSS Notes for Professionals 194
</div>
<style>
.multi-columns {
-moz-column-width: 100px;
-webkit-column-width: 100px;
column-width: 100px;
}
</style>
172
.‫ سينشئ المتصفح اكبر عدد ممكن من األعمدة‬column-count ‫ إذا لم تُعرَّف الخاصية‬،‫انتبه‬
:‫مثال‬
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugiat
nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil
imperdiet doming id quod mazim placerat facer possim assum.
</div>
173
<style>
content {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
</style>
:‫مثال‬
<section>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et
justo duo dolores et ea rebum.</p>
<p> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum
dolor sit amet.</p>
</section>
<style>
section {
columns: 3;
column-gap: 40px;
column-rule: 2px solid gray;
}
</style>
174

‫َّ‬
‫‪ 6.4.6‬مؤرش إدخال النص‬

‫تحدد الخاصية ‪ caret-color‬لون مؤشر اإلدخال النص‪ss‬ي (وه‪ss‬و العالم‪ss‬ة ال‪ss‬تي تظه‪ss‬ر لإلش‪ss‬ارة إىل موض‪ss‬ع‬
‫الحرف النصي الذي سيدخله المستخدم)‪ .‬الشكل االفتراضي لمؤش‪ss‬ر اإلدخ‪ss‬ال ه‪ss‬و خ‪ss‬ط رأس‪ss‬ي ي‪ss‬ومض لتس‪ss‬هيل‬
‫مالحظته‪ ،‬ويكون لونه االفتراضي هو األسود‪ ،‬لكن يمكن تعديله باستخدام هذه الخاصية‪.‬‬
‫>‪<style‬‬
‫{ ‪#example‬‬
‫;‪caret-color: red‬‬
‫}‬
‫>‪<input id="example" /‬‬
‫يمكنك الرجوع إىل توثيق ‪ caret-color‬في موسوعة حسوب لمزيد من التفصيل‪.‬‬
‫‪ 6.5‬تنسيق ألوان النصوص‬

‫تستخدم خاصية ‪ color‬لضبط القيمة اللونية األمامي‪s‬ة ‪ foreground‬للمحت‪s‬وى النص‪s‬ي للعنص‪s‬ر والزخرف‪s‬ة‬
‫النص‪ss‬ية ‪ ،text-decoration‬وتض‪ss‬بط ً‬
‫أيض‪ss‬ا قيم‪ss‬ة الكلم‪ss‬ة المحج‪ss‬وزة ‪ ،currentColor‬وال‪ss‬تي يمكن أن‬
‫تستخدم كقيم‪s‬ة غ‪s‬ير مباش‪s‬رة في الخاص‪s‬يات األخ‪s‬رى ال‪s‬تي ال تأخ‪s‬ذ لونه‪ss‬ا من الخاص‪s‬ية ‪ color‬مباش‪s‬ر ًة (مث‪s‬ل‬
‫الخاصية ‪.)border-color‬‬
‫‪ 6.5.1‬استخدام ‪currentColor‬‬
‫{ ‪div‬‬
‫;‪border: 5px solid currentColor‬‬
‫;‪box-shadow: 0 0 5px currentColor‬‬
‫}‬
‫في المثال أعاله‪ ،‬اس‪s‬تُخدمت الكلم‪ss‬ة المحج‪ss‬وزة ‪ currentColor‬إلعط‪ss‬اء اإلط‪ss‬ار نفس الل‪ss‬ون المحس‪ss‬وب‬
‫‪ computed color‬للعنصر (اللون األحمر)‪.‬‬
‫‪175‬‬
‫{ ‪div‬‬
‫;‪border: 3px solid currentColor‬‬
‫}‬
‫بما أن ‪ currentColor‬تأخذ القيمة المحسوبة ‪ computed value‬للخاصية‪ ،‬فإنَّها في هذا المثال ستأخذ‬
‫القيمة ‪ ،green‬ويكون لون اإلطار الناتج أخضر‪.‬‬
‫هنالك حاالت يرث االبن اللون من العنصر األب‪ ،‬في المثال أدن‪ss‬اه تَ‪ss‬رِث الخاص‪ss‬ية ‪ currentColor‬الل‪ss‬ون‬
‫األزرق من العنصر األب‪.‬‬
‫{ ‪.parent-class‬‬
‫}‬
‫{ ‪.parent-class .child-class‬‬
‫;‪border-color: currentColor‬‬
‫}‬
‫يُمكن اس‪sss‬تخدام ‪ currentColor‬لت‪sss‬وريث الل‪sss‬ون للخ‪sss‬واص ال‪sss‬تي ال ترث‪sss‬ه ع‪sss‬اد ًة مث‪sss‬ل الخاص‪sss‬ية‬
‫‪ ،background-color‬يوضح المثال التالي كيفية ذلك‪:‬‬
‫{ ‪.parent-class‬‬
‫}‬
‫{ ‪.parent-class .child-class‬‬
‫;‪background-color: currentColor‬‬
‫}‬
‫النتيجة (شاهد الصورة متحركة بالضغط عليها)‪:‬‬
‫‪176‬‬
‫‪ 6.5.2‬الكلمات المحجوزة لأللوان‬

‫تستخدم العديد من المتصفحات كلمات محجوزة لتعريف األلوان‬
‫{ ‪.some-class‬‬
‫}‬
‫الكلمات المحجوزة في ‪ CSS‬غير حساسة لحالة األحرف‪ ،‬فالقيم ‪ ،blue‬و‪ ،Blue‬و‪ BLUE‬كلها تشير للون الست‬
‫عشري ‪.#0000FF‬‬
‫إن أردت االطالع عىل قائمة كل الكلمات المحجوزة لأللوان‪ ،‬فارجع إىل قسم الكلمات المحج‪s‬وزة لألل‪s‬وان من‬
‫توثيق اللون في ‪ CSS‬في موسوعة حسوب‪.‬‬
‫‪ 6.5.3‬القيم الست عرش ية لأللوان‬

‫يُمكن تمثيل األل‪ss‬وان في ‪ CSS‬عن طري‪ss‬ق ثالث أزواج من القيم الس‪ss‬ت عش‪ss‬رية‪ ،‬تُمث‪ss‬ل قيم األل‪ss‬وان األحم‪ss‬ر‪،‬‬
‫واألخض‪sss‬ر‪ ،‬واألزرق المكون‪sss‬ة لل‪sss‬ون‪ ،‬ويأخ‪sss‬ذ ك‪sss‬ل زوج قيم‪sss‬ة ت‪sss‬تراوح بين ‪ 00‬إىل ‪( FF‬أو بين ‪ 0‬و ‪ 255‬في‬
‫النظام العشري)‪.‬‬
‫عدد األلوان التي يُمكن تمثيلها باستخدام النظام الست عشري هو ‪ 256^3‬أي ‪ 16,777,216‬لون‪.‬‬
‫الصياغة‪:‬‬
‫;‪color: #rrggbb‬‬
‫‪color: #rgb‬‬
‫‪177‬‬
‫حيث‪:‬‬
‫‪ :rr‬قيمة بين ‪ 00‬و ‪ ،FF‬تحدد كمية اللون األحمر‪.‬‬ ‫•‬
‫‪ :gg‬قيمة بين ‪ 00‬و ‪ ،FF‬تحدد كمية اللون األخضر‪.‬‬ ‫•‬
‫‪ :bb‬قيمة بين ‪ 00‬و ‪ ،FF‬تحدد كمية اللون األزرق‪.‬‬ ‫•‬
‫;‪color: #0000FF‬‬
‫}‬
‫{ ‪.also-blue‬‬
‫;‪color: #00F‬‬
‫}‬
‫القيم الست عشرية لأللوان غير حساسة لحالة األحرف‪ ،‬فالقيمتان ‪ 0000FF‬و ‪ #0000ff‬تشيران لنفس اللون‪.‬‬
‫مصادر إضافية‪:‬‬
‫النظام الست عشري‬ ‫•‬
‫القيم الرقمية لأللوان‬ ‫•‬
‫‪ 6.5.4‬الدالة ‪rgb‬‬
‫ترميز ‪ rgb‬هو المكافئ العشري للترميز الست عش‪ss‬ري لألل‪ss‬وان‪ ،‬ويُعَ بِّر عن األل‪ss‬وان األحم‪ss‬ر واألخض‪ss‬ر واألزرق‬
‫بقيم رقمي‪ss‬ة بين ‪ 0‬و ‪( 255‬تمث‪ss‬ل المكافئ‪ss‬ات العش‪ss‬رية للقيم ‪ 00‬و ‪ FF‬عىل الت‪ss‬والي)‪ ،‬أو بنس‪ss‬ب مئوي‪ss‬ة بين ‪%0‬‬
‫و ‪.%100‬‬
‫‪color: rgb(0, 0, 255); /* blue color */‬‬
‫}‬
‫{ ‪.also-blue‬‬
‫‪color: rgb(0%, 0%, 100%); /* blue color */‬‬
‫}‬
‫‪178‬‬
‫;)>‪rgb(<red>, <green>, <blue‬‬
‫‪ 6.5.5‬الدالة ‪rgba‬‬
‫ترميز ‪ rgba‬هو نفس ترميز ‪ rgb‬مع إضافة قيمة أخيرة تُمثل نس‪ss‬بة تع‪ss‬تيم الل‪ss‬ون ‪ ،opacity‬وتأخ‪ss‬ذ قيم بين‬
‫صفر (شفاف بالكامل) وواحد (معتم بالكامل)‪.‬‬
‫{ ‪.red‬‬
‫‪ */‬أحمر معتم بالكامل *‪color: rgba(255, 0, 0, 1); /‬‬
‫}‬
‫{ ‪.red-50p‬‬
‫‪% */‬أحمر شفاف بنسبة ‪color: rgba(255, 0, 0, 0.5); /* 50‬‬
‫}‬
‫;)>‪rgba(<red>, <green>, <blue>, <opacity‬‬
‫‪ 6.5.6‬الدالة ‪hsl‬‬
‫ترمز ‪ hsl‬للكلمات صبغة (‪ )hue‬وتستعمل لتحديد الل‪ss‬ون‪ ،‬إش‪ss‬باع (‪ )saturation‬وتس‪ss‬تعمل لتحدي‪ss‬د ترك‪ss‬يز‬
‫اللون‪ ،‬إضاءة (‪ )lightness‬وتستعمل لتحديد كمية اللون األبيض في اللون‪ ،‬تحدد قيمة الصبغة بزاوية بين ص‪ss‬فر‬
‫و ‪ 360‬درجة‪ ،‬بينما تحدد قيم اإلشباع واإلضاءة بنسب مئوية‪.‬‬
‫{ ‪p‬‬
‫‪color: hsl(240, 100%, 50%); /* Blue */‬‬
‫}‬
‫الصورة أدناه توضح األسطوانة اللونية المستخدمة في ترميز ()‪.rgb‬‬
‫‪179‬‬
‫;)‪color: hsl(<hue>, <saturation>%, <lightness>%‬‬
‫يوضح الجدول التالي وصف القيم‪:‬‬
‫تُحدد زاوية بين صفر و‪ 360‬درجة‪ ،‬حيث تمثل الزاوية ‪ 0‬اللون األحمر‪ ،‬و‪ 60‬للون األصفر‪،‬‬
‫و‪ 120‬للون األخضر‪ ،‬و‪ 180‬للون األزرق السماوي‪ ،‬و‪ 240‬لألزرق‪ ،‬و‪ 300‬للبنفسجي‪ ،‬و‪360‬‬ ‫<‪>hue‬‬
‫لألحمر ً‬
‫أيضا‪.‬‬
‫تُحدد درجة َ‬
‫تشبُّع اللون بنسبة مئوية‪ ،‬حيث ‪ %0‬تعني أن اللون غير مشبع (تدرج رمادي)‪،‬‬
‫<‪>saturation‬‬
‫و‪ %100‬تعني أن اللون مشبع بالكامل (لون واضح)‪.‬‬
‫تُحدد إضاءة اللون بنسبة مئوية‪ ،‬حيث تشير ‪ %0‬للون األسود (مظلم بالكامل)‪ ،‬وتشير‬
‫<‪>lightness‬‬
‫‪ %100‬للون األبيض‪.‬‬
‫‪ 6.5.7‬الدالة ‪hsla‬‬
‫ترميز ‪ hsla‬هو نفس ترميز ‪ hsl‬مع إضافة قيمة أخ‪ss‬يرة تُمث‪ss‬ل نس‪ss‬بة تع‪ss‬تيم الل‪ss‬ون ‪ ،opacity‬وتأخ‪ss‬ذ قيم بين‬
‫صفر (شفاف بالكامل) وواحد (معتم بالكامل)‪.‬‬
‫‪ */‬شفاف بالكامل *‪hsla(240, 100%, 50%, 0) /‬‬

‫‪% */‬شفاف بنسبة ‪hsla(240, 100%, 50%, 0.5) /* 50‬‬
‫‪ */‬معتم بالكامل *‪hsla(240, 100%, 50%, 1) /‬‬
‫‪180‬‬
‫;)>‪hsla(<hue>, <saturation>, <lightness>, <opacity‬‬
‫‪ 6.5.8‬التعتيم‬
‫تستخدم الخاصية ‪ opacity‬لتحديد درجة تعتيم العنصر وتأخذ قيم رقمية بين صفر (شفاف بالكامل أو غير‬
‫مرئي) وواحد (معتم بالكامل)‪.‬‬
‫>";‪<div style="opacity: 0.8‬‬

‫هذا عنصر شفاف جزئيً ا‬
‫>‪</div‬‬
‫حيث‪:‬‬
‫الوصف‬ ‫قيمة الخاصية‬

‫معتم بالكامل‪.‬‬ ‫‪1.0‬‬
‫شفاف بنسبة ‪.%25‬‬ ‫‪0.75‬‬
‫شفاف بنسبة ‪.%50‬‬ ‫‪0.5‬‬
‫شفاف بنسبة ‪.%25‬‬ ‫‪0.25‬‬
‫شفاف بنسبة ‪.%100‬‬ ‫‪0.0‬‬
‫‪ 6.6‬شكل المؤرش ‪cursor style‬‬

‫تُحدد الخاصية ‪ cursor‬شكل مؤشر الفأرة الذي س ُيعرَض عندما تمر الفأرة فوق العنصر‪.‬‬
‫;‪cursor: value‬‬
‫يوضح الجدول التالي القيم التي تأخذها الخاصية ‪:cursor‬‬
‫تُخفي مؤشر الفأرة‪.‬‬ ‫‪none‬‬
‫س ُيحدِّد المتصفح شكل المؤشر األفضل للعنصر‪.‬‬ ‫‪auto‬‬
‫يشير المؤشر إىل توفر معلومات مساعدة‪.‬‬ ‫‪help‬‬
‫البرنامج يجري مهمة في الخلفية‪ ،‬وال يمكن أن يتفاعل المستخدم معه‪.‬‬ ‫‪wait‬‬
‫‪181‬‬
‫يشير المؤشر إىل أنَّ شيًئا ما تحَرَّك‪.‬‬ ‫‪move‬‬
‫يمكن التفاعل مع العنصر بالضغط عليه‪ ،‬كما في الروابط واألزرار‪.‬‬ ‫‪pointer‬‬
‫األشكال المتاحة‪:‬‬
‫‪ 6.6.1‬الخاصية ‪pointer-event‬‬
‫تُحدد الخاصية ‪ pointer-event‬كيف سيتعامل العنصر مع مؤشر الفأرة‪ .‬مثال‪:‬‬
‫{ ‪.disabled‬‬
‫;‪pointer-events: none‬‬
‫}‬
‫القيمة ‪ none‬توقِف كل أحداث الفأرة مثال الضغط والتمرير وغيرها‪.‬‬
‫مصادر أجنبية إضافية‪:‬‬
‫‪CSS tricks‬‬ ‫•‬
‫توثيق ‪MDN‬‬ ‫•‬
‫‪davidwalsh‬‬ ‫•‬
‫‪182‬‬
‫‪ .7‬تنسيق الخلفيات ‪Backgrounds‬‬
‫تُمكنك ‪ CSS‬من اختيار ألوان‪ ،‬أو تدرجات لونية‪ ،‬أو صور كخلفيات للعناصر‪ ،‬والتحكم في حجمها‪ ،‬وموضعها‪،‬‬
‫وعدد مرات تكرارها‪.‬‬
‫‪ 7.1‬إضافة األلوان كخلفيات للعنارص‬

‫تُس‪ssss‬تعمل الخاص‪ssss‬ية ‪ background-color‬إلض‪ssss‬افة خلفي‪ssss‬ة بل‪ssss‬ون معين للعنص‪ssss‬ر‪ ،‬وتقب‪ssss‬ل القيم‬
‫‪ transparent‬و ‪ inherit‬و ‪ً initial‬‬

‫أيض‪ssssss‬ا‪ ،‬ويمكن تطبيقه‪ssssss‬ا عىل العناص‪ssssss‬ر و العناص‪ssssss‬ر الزائفة‬
‫‪ ::first-letter‬و ‪.::first-line‬‬
‫‪ :transparent‬تجعل خلفية العنصر شفافة‪ ،‬وهي القيمة االفتراضية للخاصية‪.‬‬ ‫•‬
‫‪ :inherit‬تَرِث قيمة الخاصية من العنصر األب‪.‬‬ ‫•‬
‫‪ :initial‬تُرجع القيمة االبتدائية للخاصية‪.‬‬ ‫•‬
‫تُعرَّف األلوان في ‪ CSS‬بعدد من ُ‬

‫الطرق نذكرها تال ًيا‪.‬‬
‫‪ 7.1.1‬الكلمات المحجوزة لأللوان‬
‫>‪<style‬‬
‫{ ‪div‬‬
‫}‬
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫تنسيق الخلفيات ‪Backgrounds‬‬
‫>‪<div>This will have a red background</div‬‬
‫‪ 7.1.2‬القيم الست عرش ية لأللوان‬

‫تُستعمل القيم الست عشرية لتمثيل مكونات األلوان (أو م‪ss‬ا يُع‪ss‬رف بترم‪ss‬يز ‪ )RGB‬بالنظ‪ss‬ام الس‪ss‬ت عش‪ss‬ري‪.‬‬
‫فمثاًل يكون اللون ‪ #ff0000‬هو اللون األحمر‪ ،‬حيث يُمثل ب‪ss‬الحرفين ‪ ff‬الل‪ss‬ذان يمثالن المقاب‪ss‬ل الس‪ss‬ت عش‪ss‬ري‬
‫للرقم ‪.256‬‬
‫يُمكن تقسم الترميز الست عشري لأللوان إىل ثالثة أقسام‪ ،‬كل منها يتكون من ح‪ss‬رفين ويُمث‪ss‬ل أح‪ss‬د األل‪ss‬وان‬
‫األحمر أو األخضر أو األزرق (عىل الترتيب من اليسار إىل اليمين)‪ ،‬وفي ح‪ss‬ال ك‪ss‬انت الح‪ss‬روف الممثل‪ss‬ة لك‪ss‬ل ل‪ss‬ون‬
‫متش‪ss‬ابهه‪ ،‬يمكن اختص‪ss‬ار الترم‪ss‬يز الس‪ss‬ت عش‪ss‬ري إىل ثالث أح‪ss‬رف‪ ،‬فعىل س‪ss‬بيل المث‪ss‬ال يُمكن اختص‪ss‬ار الل‪ss‬ون‬
‫‪ #ff0000‬إىل ‪.#f00‬‬
‫انتبه إىل أن الترميز الست عشري غير حساس لحالة األحرف‪.‬‬
‫{ ‪body‬‬
‫‪background-color: #de1205; /* red */‬‬
‫}‬
‫{ ‪.main‬‬
‫‪background-color: #00f; /* blue */‬‬
‫}‬
‫‪ 7.1.3‬ترمزي ‪ RGB‬و ‪RGBa‬‬

‫ترمز ‪ RGB‬إىل األلوان األحمر واألخضر واألزرق (عىل ال‪ss‬ترتيب من اليس‪ss‬ار إىل اليمين)‪ ،‬وتس‪ss‬تخدم ثالث قيم‬
‫ُ‬
‫تُم َّثل كل منها القيمة العشرية ألحد األلوان الثالثة‪ ،‬وتتراوح هذه القيم بين صفر و ‪.255‬‬
‫يُمكِّن ترميز ‪ RGBa‬من إضافة ُمعامل أخير يُسمى معامل ألفا‪ ،‬ويُحدد درجة تعتيم‪/‬شفافية العنصر‪ ،‬وت‪ss‬تراوح‬
‫قيمته بين ‪ 0.0‬و ‪.1.0‬‬
‫{ ‪header‬‬
‫‪background-color: rgba(0, 0, 0); /* black */‬‬
‫}‬
‫{ ‪footer‬‬
‫‪background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */‬‬
‫}‬
‫‪184‬‬
‫‪ 7.1.4‬ترمزي ‪ HSL‬و ‪HSLa‬‬

‫ترمز ‪ hsl‬للكلمات صبغة ‪ hue‬وتستعمل لتحديد اللون‪ ،‬إشباع ‪ saturation‬وتستعمل لتحديد ترك‪ss‬يز الل‪ss‬ون‪،‬‬
‫إضاءة ‪ lightness‬وتستعمل لتحديد كمية اللون األبيض في اللون‪ ،‬وتحدد قيمة الصبغة بزاوي‪s‬ة بين ص‪ss‬فر و ‪360‬‬
‫درجة‪ ،‬بينما تحدد قيم اإلشباع واإلضاءة بنسب مئوية‪.‬‬
‫يُمكِّن ترميز ‪ HSLa‬من إضافة ُمعامل أخير يُسمى معامل ألفا‪ ،‬ويُحدد درجة تعتيم‪/‬شفافية العنصر‪ ،‬وت‪ss‬تراوح‬
‫قيمته بين ‪ 0.0‬و ‪.1.0‬‬
‫{ ‪li a‬‬
‫‪ */‬أخضر *‪background-color: hsl(120, 100%, 50%); /‬‬
‫}‬
‫{ ‪#p1‬‬
‫‪ */‬أخضر مع شفافية *‪background-color: hsla(120, 100%, 50%, 0.3); /‬‬
‫}‬
‫‪ 7.2‬استخدام التدرجات اللونية كخلفيات للعنارص‬

‫ُأض‪sss‬يفت الت‪sss‬درجات اللوني‪sss‬ة كإح‪sss‬دى أن‪sss‬واع الص‪sss‬ور في ‪ ،CSS3‬ويُمكن اس‪sss‬تعمالها كقيم‪sss‬ة للخاص‪sss‬ية‬
‫المختزلة ‪ .background‬ويوجد نوعين من التدرجات اللونية هما التدرجات‬

‫‪ background-image‬أو الخاصية ُ‬
‫ل منهما يمكن أن يكون متكرر أو غير متكرر‪.‬‬
‫الخطية ‪ linear‬و التدرجات الدائرية ‪ ،radial‬وك ٌّ‬
‫الدوال التي يمكن استعمالها لتوليد تدرجات‪:‬‬
‫)(‪linear-gradient‬‬ ‫•‬
‫)(‪repeating-linear-gradient‬‬ ‫•‬
‫)(‪radial-gradient‬‬ ‫•‬
‫)(‪repeating-radial-gradient‬‬ ‫•‬
‫‪ 7.2.1‬التدرج الخطي‪ :‬الدالة ‪linear-gradient‬‬

‫‪background: linear-gradient(<direction>?, <color-stop-1>, <color-stop-‬‬

‫;)‪2>, ...‬‬
‫يشرح الجدول التالي القيم التي تأخذها‪:‬‬
‫‪185‬‬
‫يُمكن أن يأخذ قيم مثل ‪ ،to top‬أو ‪ ،to bottom‬أو ‪ ،to right‬أو ‪ ،to left‬أو تأخذ‬
‫زاوية تبدأ من األعىل وتدور في اتجاه عقارب الساعة‪ ،‬وتُقاس بالوحدات ‪ ،deg‬أو‬ ‫<‪>direction‬‬
‫‪ ،grad‬أو ‪ ،rad‬أو ‪ .turn‬وإذا لم تُحدد هذه القيمة يكون التدرج من أعىل ألسفل‪.‬‬
‫تُحدد قائمة من األلوان‪ ،‬ويُمكن إتباع كل لون بنسبة مئوية أو مسافة تُحدد‬
‫الموضع الذي س ُيعرض فيه اللون (اختاري)‪ ،‬مثل‪:‬‬ ‫<‪>color-stop-list‬‬
‫‪yellow 10% rgba(0,0,0, 0.5) 40px, #fff 100%‬‬
‫مثال عىل إ نشاء تدرج لوني يتجه من اليمين إىل اليسار ويتدرج بين اللونين األحمر واألزرق‪:‬‬
‫{ ‪.linear-gradient‬‬
‫‪background-color: linear-gradient(to left, red, blue); /* you can‬‬
‫‪also use 270deg */‬‬
‫}‬
‫إنشاء تدرج لوني يتجه من أسفل اليمين إىل أعىل اليسار‪:‬‬
‫{ ‪.diagonal-linear-gradient‬‬
‫;)‪background-color: linear-gradient(to left top, red, yellow 10%‬‬
‫}‬
‫يُمكنك تحديد أي عدد من النقاط اللوني‪ss‬ة في الت‪s‬درج الل‪ss‬وني والفص‪s‬ل بينه‪s‬ا بفاص‪s‬لة‪ ،‬كم‪s‬ا ه‪s‬و موض‪s‬ح في‬
‫المثال التالي‪:‬‬
‫{ ‪.linear-gradient-rainbow‬‬
‫‪background-color: linear-gradient(to left, red, orange, yellow,‬‬
‫;)‪green ,blue, indigo, violet‬‬
‫}‬
‫‪ 7.2.2‬التدرج الدائري‪ :‬الدالة ‪radial-gradient‬‬

‫{ ‪.radial-gradient-simple‬‬
‫;)‪background: radial-gradient(red, blue‬‬
‫}‬
‫{ ‪.radial-gradient‬‬
‫‪background: radial-gradient(circle farthest-corner at top left,‬‬
‫;)‪red, blue‬‬
‫‪186‬‬
‫}‬
‫حيث‪:‬‬
‫‪ :circle‬شكل التدرج اللوني‪ ،‬ويمكن أن تكون ‪ circle‬أو ‪ ellipse‬وهي القيمة االفتراضية‪.‬‬ ‫•‬
‫‪ :farthest-corner‬كلمة محجوزة تُحدد حجم الشكل النهائي‪ ،‬ويمكن أن تكون ‪ closest-side‬أو‬ ‫•‬
‫‪ farthest-side‬أو ‪ closest-corner‬أو ‪.farthest-corner‬‬
‫‪ :top left‬تُحدد موضع مركز التدرج اللوني‪.‬‬ ‫•‬
‫‪ 7.2.3‬التدرجات ُ‬
‫المتكررة ‪Repeating Gradients‬‬
‫تأخذ التدرجات اللونية المتكررة نفس معامالت التدرجات اللونية العادي‪ss‬ة‪ ،‬ولكنه‪ss‬ا تُك‪ss‬رر الت‪ss‬درج الل‪ss‬وني عىل‬
‫خلفية العنصر‪.‬‬
‫{ ‪.bullseye‬‬
‫‪background: repeating-radial-gradient(red, red 10%, white 10%,‬‬
‫;)‪white 20%‬‬
‫}‬
‫{ ‪.warning‬‬
‫‪background: repeating-linear-gradient(-45deg, yellow, yellow 10%,‬‬
‫;)‪black 10%, black 20%‬‬
‫}‬
‫حيث‪:‬‬
‫‪ :-45deg‬زاوية تبدأ من األعىل وتدور في اتجاه عقارب الساعة‪ ،‬وتُقاس بالوحدات ‪ deg‬أو ‪ grad‬أو ‪rad‬‬ ‫•‬
‫أو ‪.turn‬‬
‫‪ :top left‬اتجاه التدرج اللوني‪ ،‬وتأخذ ‪ top‬أو ‪ bottom‬عىل المحور ‪ Y‬والقيمة ‪ left‬أو ‪ right‬عىل‬ ‫•‬
‫المحور ‪.X‬‬
‫‪ :yellow 10%‬قائمة األل‪ss‬وان‪ ،‬ويُمكن إتب‪ss‬اع ك‪ss‬ل ل‪ss‬ون بنس‪ss‬بة مئوي‪ss‬ة أو مس‪ss‬افة تُح‪ss‬دد الموض‪ss‬ع ال‪ss‬ذي‬ ‫•‬
‫س ُيعرض فيه اللون (اختاري)‪.‬‬
‫‪ 7.3‬استخدام الصور كخلفيات للعنارص‬
‫تُستخدم الخاصية ‪ background-image‬لوضع صورة كخلفية للعنصر ُ‬

‫المحدد‪.‬‬
‫‪187‬‬
‫;)'‪background-image: url('/path/to/image.jpg‬‬
‫}‬
‫ويُمكن تحديد عدد من الصور والفصل بينها بفاصلة‪ ،‬وتكون النتيجة أن تظهر الصور مترادفة حس‪ss‬ب ت‪ss‬رتيب‬
‫كتابتها في الشيفرة‪.‬‬
‫‪background-image: url('/path/to/image.jpg'),‬‬
‫;)'‪url('/path/to/image2.jpg‬‬
‫}‬
‫حيث‪:‬‬
‫)‪ :url(...‬تُحدد مسار الصورة ُ‬

‫المراد استخدامها‪.‬‬ ‫•‬
‫‪ :none‬تحذف صورة الخلفية‪.‬‬ ‫•‬
‫‪ :initial‬تُرجع القيمة االفتراضية للخاصية‪.‬‬ ‫•‬
‫‪ :inherit‬تَرِث قيمة الخاصية من العنصر األب‪.‬‬ ‫•‬
‫بعض الخاصيات التي تُستخدم مع الخاصية ‪:background-image‬‬
‫;‪background-size: xpx ypx | x% y%‬‬

‫;‪background-repeat: no-repeat | repeat | repeat-x | repeat-y‬‬
‫‪background-position: left offset (px/%) right offset (px/%) | center‬‬
‫;‪center | left top | right bottom‬‬
‫‪ 7.4‬حجم الخلفية ‪Background Size‬‬

‫تُستخدم الخاصية ‪ background-size‬للتحكم في تكبير وتصغير صورة الخلفية‪ ،‬وتأخذ قيم‪ss‬ة واح‪ss‬دة تُح‪ss‬دد‬
‫التكبير أو التصغير في االتجاهين األفقي والرأسي‪ ،‬أو تأخذ قيمتين تحددان التكبير أو التصغير في كل اتج‪ss‬اه عىل‬
‫حدة‪.‬‬
‫تُحافظ القيمة ‪ auto‬للخاصية ‪ background-size‬عىل نسبة أبعاد الصورة (نسبة االرتف‪ss‬اع إىل الع‪ss‬رض)‪،‬‬
‫فعىل سبيل المثال إذا كان لدينا صورة بحجم ‪ ،256px * 256px‬فإن جميع القواعد أدناه متكافئة وتؤدي لعرض‬
‫الصورة بارتفاع وعرض ‪ 50‬بكسل‪.‬‬
‫;‪background-size: 50px‬‬
‫‪188‬‬
CSS ‫مالحظات للعاملين بلغة‬ Backgrounds ‫تنسيق الخلفيات‬
background-size: 50px auto;

background-size: auto 50px;
background-size: 50px 50px;
:265px × 256px ‫الصورة االبتدائية ذات األبعاد‬
:‫ محتواة في خلفية العنصر‬50px × 50px ‫النتيجة صورة بأبعاد‬
ً ‫ويُمكن‬
.‫أيضا استعمال نسب مئوية لتحديد التكبير أو التصغير للصورة‬
#withbackground {
background-image: url('to/some/background.png');
background-size: 100% 66%;
width: 200px;
height: 200px;
padding: 0;
margin: 0;
}
189
‫يعتمد سلوك الخاصية ‪ background-size‬عىل الخاصية ‪.background-origin‬‬
‫ا‪ .‬المحافظة عىل نسبة أبعاد الصورة‬
‫للمحافظة عىل نسبة أبعاد الصورة عن‪ss‬د اس‪ss‬تخدامها لتغطي‪ss‬ة عنص‪ss‬ر أو وض‪ss‬عها داخل‪ss‬ه يجب اس‪ss‬تخدام القيم‬
‫‪ cover‬أو ‪ contain‬للخاصية ‪.background-size‬‬
‫افترض أن المساحة البيضاء في الصورة أعاله تُمثل شاشة العرض الخاصة بك‪ ،‬استخدام القيم‪ss‬ة ‪contain‬‬
‫للخاص‪ss‬ية ‪ background-size‬س‪ss‬يؤدي إىل تكب‪s‬ير أو تص‪ss‬غير الص‪s‬ورة بحيث يُط‪ss‬ابق أح‪s‬د أبعاده‪ss‬ا أح‪s‬د بُع‪ss‬دي‬
‫الصندوق مع المحافظة عىل نسبة أبعاد الصورة‪.‬‬
‫أما القيمة ‪ cover‬فستؤدي إىل تكبير الصورة بحيث تطابق أبعادها أبعاد الصندوق‪ ،‬مع قص األجزاء الزائ‪ss‬دة‬
‫عن مساحة الصندوق للمحافظة عىل نسبة أبعاد الصورة‪.‬‬
‫‪190‬‬
:‫مثال‬
div > div {

background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {

margin: 0 1ex 1ex 0;
float: left;
191
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole
region, but it's fully
<em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the
water is cut, as well as a part
of the sky. You don't see the complete image anymore, but
neither do you see any background color;
the image <em>covers</em> all of the <code><div></code>.</p>
</div>
192
‫‪ 7.4.2‬نقوش الصور ‪Image Sprites‬‬

‫نقوش الصور هي مجموعة من الصور ُمخزَّنة في صورة واحدة‪ ،‬ويمكن استعمال كل صوره منها عىل حدة‪.‬‬
‫الصورة أعاله تحتوي عىل عدد من الص‪ss‬ور‪ ،‬ويمكن اس‪ss‬تعمال ك‪ss‬ل واح‪ss‬دة منه‪ss‬ا منف‪ss‬ردة كم‪ss‬ا ه‪ss‬و موض‪ss‬ح في‬
‫الشيفرة التالية‪:‬‬
‫>‪<div class="icon icon1"></div‬‬

‫‪193‬‬
‫{ ‪.icon‬‬
‫;)”‪background: url(“icons-sprite.png‬‬
‫}‬
‫{ ‪.icon1‬‬
‫;‪background-position: 0px 0px‬‬
‫}‬
‫{ ‪.icon2‬‬
‫;‪background-position: -20px 0px‬‬
‫}‬
‫{ ‪.icon3‬‬
‫;‪background-position: -40px 0px‬‬
‫}‬
‫تُفصل الصور عن طريق تحديد مواقعها بالخاصية ‪.background-position‬‬
‫‪ 7.5‬موضع الخلفية ‪Background Position‬‬

‫تُستخدم الخاصية ‪ background-position‬لتحديد نقطة بداية الخلفية سواء ك‪ss‬انت ص‪ss‬ورة أو ت‪ss‬درج ل‪ss‬وني‪،‬‬
‫ويوضح الجدول التالي القيم التي تأخذها‪:‬‬
‫الوصف‬ ‫الوحدة‬
‫تُحدد اإلزاحة األفقية لصورة الخلفية كنسبة من عرض الصورة‪ ،‬واإلزاحة الرأسية كنسبة من‬
‫‪%value% value‬‬
‫ارتفاعها‪.‬‬
‫‪valuepx‬‬
‫تُحدد اإلزاحات األفقية والرأسية بالبكسالت‪ ،‬وتُقاس المسافة من أعىل ويسار الصورة‪.‬‬
‫‪valuepx‬‬
‫;)'‪background-image: url('path/to/image.jpg‬‬
‫;‪background-position: 50% 50%‬‬
‫}‬
‫باإلضافة للخاصية المختزلة ‪ background-position‬والتي تُحدد اإلزاحتان األفقية والرأسية معً ‪ s‬ا‪ ،‬يُمكن‬
‫استخدام‪:‬‬
‫‪194‬‬
‫ لتحديد اإلزاحة األفقية‬background-position-x ‫الخاصية‬ •
‫ لتحديد اإلزاحة الرأسية‬background-position-y ‫الخاصية‬ •
background-origin ‫ الخاصية‬7.5.1
‫ية‬ss‫ة الخاص‬ss‫انت قيم‬ss‫ال ك‬ss‫ وفي ح‬،‫ة‬ss‫ورة الخلفي‬ss‫ع ص‬ss‫ موض‬background-origin ‫ية‬ss‫دد الخاص‬ss‫تُح‬
‫ا هي‬ss‫ية له‬ss‫ة االفتراض‬ss‫ والقيم‬،‫أثير‬ss‫ية أي ت‬ss‫ذه الخاص‬ss‫ون له‬ss‫ فلن يك‬fixed ‫ هي‬background-attachment
.padding-box
ً
.‫نسبة لصندوق الحواشي‬ ‫يُحدد الموضع‬ padding-box
ً
.‫نسبة لصندوق اإلطارات‬ ‫يُحدد الموضع‬ border-box
ّ
.‫نسبة لصندوق المحتوى‬ ‫يُحدد الموضع‬ context-box
.‫تُرجع القيمة االبتدائية للخاصية‬ initial
.‫ترث قيمة الخاصية من العنصر األب‬ inherit
:‫مثال‬
<p>No background-origin (padding-box is default):</p>

<div class="example example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: border-box:</p>
195

</div>
<p>background-origin: content-box:</p>
</div>
.example {
width: 300px;
border: 20px solid black;
padding: 50px;
background: url(https://static.pexels.com/photos/6440/magazines-
desk-work-workspace-medium.jpg);
background-repeat: no-repeat;
}
.example1 {}
.example2 { background-origin: border-box; }
.example3 { background-origin: content-box; }
196
.‫ في موسوعة حسوب‬background-origin ‫للمزيد ارجع إىل توثيق‬
‫ إضافة صور ُمتعددة للخلفية‬7.5.2

‫ا‬ss‫رتيب ظهوره‬s‫ها البعض بنفس ت‬ss‫وق بعض‬ss‫ وتوضع الصور ف‬،‫يُمكن إضافة عدد من الصور كخلفيات للعنصر‬
‫في الشيفرة كما هو موضح في المثال أدناه‬
#mydiv {
background-image: url(img_1.png), /* top image */
url(img_2.png), /* middle image */
url(img_3.png); /* bottom image */
background-position: right bottom,
left top,
right top;
background-repeat: no-repeat,
repeat,
no-repeat;
197
‫}‬
‫أيضا استخدام الصياغة المختزلة للخاصية كما هو موضح في المثال التالي‪:‬‬
‫{ ‪#mydiv‬‬
‫‪background: url(img_1.ong) right bottom no-repeat,‬‬
‫‪url(img_2.png) left top repeat,‬‬
‫;‪url(img_3.png) right top no-repeat‬‬
‫}‬
‫يُمكنك ً‬
‫أيضا إضافة تدرج لوني مع الصورة‪:‬‬
‫{ ‪#mydiv‬‬
‫‪background: url(image.png) right bottom no-repeat,‬‬
‫;)‪linear-gradient(to bottom, #fff 0%, #000 100%‬‬
‫}‬
‫اطلع عىل تجربة حية لهذه األمثلة عىل ‪.JSFiddle‬‬

‫َّ‬
‫‪ 7.5.3‬الخاصية ‪background-attachment‬‬
‫تُحدد الخاصية ‪ background-attachment‬ما إذا كانت صورة الخلفي‪ss‬ة ثابت‪ss‬ة ‪ fixed‬أم أنه‪ss‬ا تتح‪ss‬رك م‪ss‬ع‬
‫بقية الصفحة‪ ،‬ويوضح الجدول التالي القيم التي تأخذها‪:‬‬
‫تتحرك صورة الخلفية مع العنصر‪.‬‬ ‫‪scroll‬‬
‫صورة الخلفية ثابتة بالنسبة لشاشة العرض‪.‬‬ ‫‪fixed‬‬
‫تتحرك صورة الخلفية مع محتوى العنصر‪.‬‬ ‫‪local‬‬
‫{ ‪body‬‬
‫;)'‪background-image: url('img.jpg‬‬
‫;‪background-attachment: fixed‬‬
‫}‬
‫‪198‬‬
:‫أمثلة‬
background-attachment: scroll •
body {
background-image: url('image.jpg');
background-attachment: scroll;
}
background-attachment: fixed •
body {
background-attachment: fixed;
}
background-attachment: local •
div {
background-attachment: local;
}
background-clip ‫ الخاصية‬7.5.4
‫ة‬s‫انت الخلفي‬s‫ سوا ًء ك‬،‫ أين ستتوقف خلفية العنصر عىل حدود العنصر‬background-clip ‫تُحدد الخاصية‬
ً
.>image< ‫صورة‬ ‫> أو‬color< ‫لونًا‬
.‫ لكنها ستقع تحته‬،)border( ‫ستمتد الخلفية إىل الحافة الخارجية لإلطار‬ border-box
َ ُ‫ ولن ت‬،)padding( ‫ستمتد الخلفية إىل الحافة الخارجية لمنطقة الحواشي‬

‫رسم الخلفية‬
padding-box
.‫تحت اإلطار‬
.)content box( ‫ستكون حدود الخلفية هي صندوق المحتوى‬ content-box
.‫ترث قيمة الخاصية من العنصر األب‬ inherit
:‫مثال‬
<p>No background-origin (padding-box is default):</p>

199

</div>
<p>background-origin: border-box:</p>
</div>
<p>background-origin: content-box:</p>
</div>
.example {
width: 300px;
padding: 50px;
background: url(https://static.pexels.com/photos/6440/magazines-
desk-work-workspace-medium.jpg);
200
‫;‪background-repeat: no-repeat‬‬
‫}‬
‫}{ ‪.example1‬‬
‫} ;‪.example2 { background-origin: border-box‬‬
‫} ;‪.example3 { background-origin: content-box‬‬
‫‪ 7.5.5‬الخاصية ‪background-repeat‬‬
‫تُحدد الخاصية ‪ background-repeat‬كيف ستتكرر صورة الخلفية؛ إذ يمكن أن تتكرر صورة الخلفية عىل‬
‫المحور األفقي‪ ،‬أو عىل المحور الرأسي‪ ،‬أو عىل كال المحوري‪ ،‬ويمكن أاّل تتكرر أبدًا‪.‬‬
‫مثال عىل تكرار الخلفية عىل المحور الرأسي‪:‬‬
‫{ ‪div‬‬
‫;)"‪background-image: url("image.jpg‬‬
‫;‪background-repeat: repeat-y‬‬
‫}‬
‫‪ 7.5.6‬الخاصية ‪background-blend-mode‬‬
‫ً‬
‫بعضا ومع لون الخلفية‬ ‫تُحدد الخاصية ‪ background-blend-mode‬كيف تمتزج صور الخلفية مع بعضها‬
‫المحدَّد للعنصر‪.‬‬
‫ُ‬
‫‪201‬‬
‫{ ‪.my-div‬‬
‫;‪background-size: 100%‬‬
‫;‪background-repeat: no-repeat‬‬
‫‪background-image: linear-gradient(to right, black 0%,white 100%),‬‬
‫‪url('https://static.pexels.com/photos/54624/strawberry-fruit-red-‬‬
‫;)'‪sweet-54624-medium.jpeg‬‬
‫;‪background-blend-mode:saturation‬‬
‫}‬

‫ّ‬
‫لمزيد من المعلومات حول الخاصية ‪ background-blend-mode‬انظر موسوعة حسوب‪.‬‬
‫‪ 7.6‬إضافة تأثري الشفافية عىل خلفية العنرص‬

‫إذا أضفت تأثير الشفافية عىل العنصر فستتأثر جميع العناصر األبناء له بهذا التأثير‪ ،‬وإلضافة تأثير الش‪ss‬فافية‬
‫عىل الخلفية فقط يجب استخدام ترميز ‪ RGBa‬لأللوان كما هو موضح في المثال أدناه‬
‫‪/* Fallback for web browsers that don't support RGBa */‬‬
‫;)‪background-color: rgb(0, 0, 0‬‬
‫‪/* RGBa with 0.6 opacity */‬‬

‫;)‪background-color: rgba(0, 0, 0, 0.6‬‬
‫‪ 7.7‬الخاصية المخزتلة ‪background‬‬

‫المختزلة ‪ background‬لتحديد خاص‪ss‬ية واح‪ss‬دة أو ع‪ss‬دد من الخاص‪ss‬يات المرتبط‪ss‬ة‬
‫يُمكن استخدام الخاصية ُ‬
‫بالخلفيات‪.‬‬
‫إصدار‬
‫‪CSS‬‬
‫‪1+‬‬ ‫المراد استخدامها كخلفية‪.‬‬
‫الصورة ُ‬ ‫‪background-image‬‬
‫‪1+‬‬ ‫المراد استخدامه كخلفية‪.‬‬

‫اللون ُ‬ ‫‪background-color‬‬
‫‪1+‬‬ ‫موضع الخلفية‪.‬‬ ‫‪background-position‬‬
‫‪3+‬‬ ‫حجم صورة الخلفية‪.‬‬ ‫‪background-size‬‬
‫‪1+‬‬ ‫كيفية تكرار صورة الخلفية‪.‬‬ ‫‪background-repeat‬‬
‫‪202‬‬
‫إصدار‬
CSS
3+ .‫مركز الخلفية‬ background-origin
ً
‫نسبة لصندوق المحتوى أو صندوق‬ ‫تحدد كيف ستعرض الخلفية‬
3+ background-clip
.‫اإلطارات أو صندوق الحواشي‬
‫ أم أنها‬،‫تُحدد ما إذا كانت الخلفية ستتحرك مع العنصر الحاوي لها‬

1+ background-attachment
.‫ثابتة‬
3+ .‫تُرجع القيمة االبتدائية للخاصية‬ initial
2+ ‫ترث قيمة الخاصية من العنصر األب‬ inherit
:‫الصيغة العامة‬
background: [<background-image>] [<background-color>] [<background-

position>]/[<background-size>]
[<background-repeat>] [<background-origin>] [<background-clip>]
[<background-attachment>]
[<initial|inherit>];
.‫ والترتيب غير مهم‬،‫جميع الخواص اختيارية‬
:‫مثال عىل إضافة خلفية بلون أحمر للعنصر‬
background: red;
:background-clip ‫مثال عىل استعمال الخاصية‬
background: border-box red;
:‫مثال عىل تحديد تكرار ومركز الخلفية‬
background: no-repeat center url('somepng.png');
:‫مثال عىل إضافة أكثر من خلفية للعنصر‬
background: url('pattern.png') green;

background: #000 url(picture.png) top left / 00px auto no-repeat;
203
‫‪ .8‬تنسيق الصور‬
‫الم ِّ‬
‫رشحات ‪Filters‬‬ ‫ُ‬ ‫‪8.1‬‬
‫تُستخدم الخاص‪ss‬ية ‪ filter‬لتط‪ss‬بيق ت‪ss‬أثيرات مث‪ss‬ل تغي‪ss‬ير الل‪ss‬ون وت‪ss‬أثير الض‪ss‬بابية عىل الص‪ss‬ور والخلفي‪ss‬ات‬
‫واإلطارات ويوضح الجدول التالي الدوال التي يمكن استخدامها معها‪.‬‬
‫الوصف‬ ‫الدالة‬
‫تُ َط ِبق تأثير الضبابية عىل الصورة ُ‬
‫المحدَّدة‪.‬‬ ‫()‪blur‬‬
‫تُغ ِّير سطوع الصورة‪.‬‬ ‫(‪brightness(x‬‬
‫تُغ ِّير تباين الصورة‪.‬‬ ‫(‪contrast(x‬‬
‫تُطبِّق تأثير الظالل عىل الصورة‪.‬‬ ‫(‪dropshadow(h,v,x,y,z‬‬
‫تُحَ ِّول ألوان الصورة إىل التدرج الرمادي‪.‬‬ ‫(‪gray-scale(x‬‬
‫تُ َد ِّور القيمة اللونية لجميع ألوان الصورة‪.‬‬ ‫(‪hue-rotate(x‬‬
‫تعكس ألوان الصورة‪،‬‬ ‫(‪invert(x‬‬
‫تُطبِّق تأثير الشفافية عىل الصورة‪.‬‬ ‫(‪opacity(x‬‬
‫تُغ ِّير إشباع الصورة‪.‬‬ ‫(‪saturate(x‬‬
‫تُحَ ِّول ألوان الصورة إىل البني الداكن‪.‬‬ ‫(‪sepia(x‬‬
‫الم ِّ‬
‫رشحات ‪ filter‬في المتصفحات القديمة‪.‬‬ ‫يجب استخدام البادئة ‪ -webkit‬لدعم خاصية ُ‬
CSS ‫مالحظات للعاملين بلغة‬ ‫تنسيق الصور‬
blur‫ الدالة‬8.2
:‫مثال‬
<img src="donald-duck.png" alt="donald duck" title="donald duck" />
img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
dropshadow ‫ الدالة‬8.3
:‫مثال‬
<p>
My shadow always follows me.
</p>
205
p {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}
hue-rotate ‫ الدالة‬8.4
:‫مثال‬
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
206
invert ‫ الدالة‬8.5
:‫مثال‬
<div></div>
div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}
ِّ ‫ إضافة ُم‬8.6
‫رشحات متعددة‬
ِّ ‫الم‬
.‫رشحات والفصل بينها بفاصلة‬ ُ ‫يُمكن تطبيق عدد من‬
:‫مثال‬
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
img {
-webkit-filter: brightness(200%) grayscale(100%) sepia(100%)
invert(100%);
207
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫تنسيق الصور‬
‫)‪filter: brightness(200%) grayscale(100%) sepia(100%‬‬

‫;)‪invert(100%‬‬
‫}‬
‫‪ 8.7‬القواطع ‪ Clipping‬واألقنعة ‪Masking‬‬

‫تستخدم خواص القطع ‪ clip-path‬واألقنع‪ss‬ة ‪ mask‬لجع‪ss‬ل أج‪ss‬زاء من العنص‪ss‬ر ش‪ss‬فافة أو معتم‪ss‬ة ويوض‪ss‬ح‬
‫الجدول التالي المعامالت التي يمكن استخدامها‪.‬‬
‫رابط يُشير لعنصر ‪ SVG‬أو ملف ‪ SVG‬خارجي يحوي تعريف مسار القطع‪.‬‬ ‫‪clip-source‬‬
‫تُحدد شكل مسار القطع‪ ،‬وتأخذ القيمة ()‪ inset‬أو ()‪ circle‬أو ()‪ ellipse‬أو‬
‫‪basic-shape‬‬
‫()‪.polygon‬‬
‫تأخذ إحدى القيم ‪ content-box‬أو ‪ padding-box‬أو ّ أو ‪ margin-box‬أو‬

‫‪clip-geometry-‬‬
‫‪ fill-box‬أو ‪ stroke-box‬أو ‪ ،view-box‬وتستعمل حواف الصندوق المحدد‬
‫‪box‬‬
‫كمسار للقطع‪.‬‬
‫تُشير إىل الصورة التي ستُستخدم كقناع‪.‬‬ ‫‪mask-reference‬‬
‫تُحدد كيف ستُكرر صورة القناع عىل المحورين األفقي والرأسي‪ ،‬وتأخذ القيمة‬
‫‪repeat-style‬‬
‫‪ repeat-x‬أو ‪ repeat-y‬أو ‪ repeat‬أو ‪ space‬أو ‪ round‬أو ‪.no-repeat‬‬
‫تأخذ إحدى القيم ‪ alpha‬أو ‪ luminance‬أو ‪.auto‬‬ ‫‪mask-mode‬‬
‫تُحدد موضع القناع‪ ،‬وتسلك سلوك مشابه لسلوك الخاصية ‪background-‬‬

‫‪position‬‬
‫‪.position‬‬
‫تُحدد الصندوق الذي سيأخذ شكل القطع‪ ،‬وتأخذ القيمة ‪ content-box‬أو‬ ‫‪geometry-box‬‬
‫‪ padding-box‬أو ّ أو ‪ margin-box‬أو ‪ fill-box‬أو ‪ stroke-box‬أو‬
‫‪208‬‬
‫‪ .view-box‬لمزيد من المعلومات انظر توثيق ‪.W3C‬‬
‫تُحدد حجم صورة القناع‪ ،‬ولها صياغة مماثلة لصياغة الخاصية ‪background-‬‬
‫‪bg-size‬‬
‫‪.size‬‬
‫تُحدد عملية التركيب التي ستُطبَّق عىل طبقات القناع‪ ،‬وتأخذ إحدى القيم ‪ add‬أو‬ ‫‪compositing-‬‬
‫‪ substract‬أو ‪ exclude‬أو ‪ .multiply‬لمزيد من المعلومات انظر توثيق ‪.W3C‬‬ ‫‪operator‬‬
‫‪ 8.7.1‬القطع ‪Clipping‬‬
‫تجهة‪ ،‬ويكون العنصر خ‪ss‬ارج ه‪ss‬ذه المس‪ss‬ارات ش‪ss‬فا ًفا‪ ،‬أم‪ss‬ا الش‪ss‬كل ُ‬
‫المح‪ss‬دد بالمس‪ss‬ار‬ ‫القواطع هي مسارات ُم ِ‬
‫معتما‪.‬‬
‫ً‬ ‫فيكون‬
‫)‪clip-path: circle(100px at center‬‬
‫المعتم (المرئي) من العنصر عىل شكل دائرة مركزها هو نفس مركز العنصر وقطرها ‪ 100‬بكسل‪.‬‬
‫يكون الجزء ُ‬
‫‪ 8.7.2‬القناع‬
‫تستخدم لتحديد قناع يوضع فوق العنصر ويحدد األجزاء المرئية والمعتمة من‪ss‬ه‪ ،‬وهن‪ss‬اك نوع‪ss‬ان من األقنع‪ss‬ة‪،‬‬
‫أقنعة اإلضاءة ‪ luminance masks‬وأقنعة ألفا ‪.alpha masks‬‬
‫أما أقنعة اإلضاءة‪ ،‬فيمكنك هذا النوع من وضع قناع ذو ت‪ss‬درج رم‪ss‬ادي ف‪ss‬وق العنص‪ss‬ر‪ ،‬بحيث يك‪ss‬ون العنص‪ss‬ر‬
‫معتما‪ ،‬بينما يكون الج‪ss‬زء الواق‪ss‬ع تحت الج‪ss‬زء األبيض من القن‪ss‬اع ش‪ss‬فا ًفا‪ ،‬ويت‪ss‬درج‬
‫ً‬ ‫تحت الجزء األسود من القناع‬
‫العنصر من التعتيم إىل الشفافية حسب تدرج القناع‪.‬‬
‫;‪mask: url(masks.svg#rectangle) luminance‬‬
‫‪209‬‬
‫وأما أقنعة ألفا‪ ،‬فيكون الجزء من العنصر الواق‪ss‬ع تحت الج‪ss‬زء الش‪ss‬فاف من القن‪ss‬اع مرئ ًي‪ss‬ا بينم‪ss‬ا يك‪ss‬ون ب‪ss‬اقي‬
‫العنصر شفا ًفا‪.‬‬
‫ا‪ .‬تحويل الصورة من معتمة إىل شفافة تدريج ًيا‬
‫في المثال التالي‪ ،‬استُخ ِدم قناع بتدرج خطي ذو لون أبيض في أقصى اليس‪ss‬ار ويص‪ss‬بح ش‪ss‬فا ًفا كلم‪ss‬ا اتجهت‬
‫لليمين‪ ،‬وتصبح الصورة شفافة في المكان الذي يكون فيه القناع شفا ًفا‪.‬‬
‫>‪<style‬‬
‫{ ‪div‬‬
‫;)'‪background: url('http://lorempixel.com/200/200/nature/1‬‬
‫;)‪mask-image: linear-gradient(to right, white, transparent‬‬
‫}‬
‫يجب استخدام البادئة ‪ -webkit‬لدعم الخاصية ‪ mask-image‬في بعض المتصفحات‪.‬‬
‫‪210‬‬
‫ استخدام األقنعة إلنشاء ثقب في الصورة‬8.8

ِ ‫ ُأ‬،‫في المثال التالي‬
،linear-gradient ‫ية‬ss‫تخدام الخاص‬ss‫ورة باس‬ss‫ف الص‬ss‫فافة في منتص‬ss‫نشئت دائرة ش‬
.‫مما يؤدي إلنشاء ثقب شفاف في الصورة‬
<style>
div {
width: 200px;
height: 200px;
background: url(http://lorempixel.com/200/200/abstract/6);
mask-image: radial-gradient(circle farthest-side at center,
transparent 49%, white 50%);
}
</style>
<div></div>
:‫الصورة األصلية وبجانبها الصورة بعد إنشاء الثقب‬
:‫مثال استخدام األقنعة إلنشاء صور بأشكال غير منتظمة‬
<style>
div {
height: 200px;
width: 400px;
background-image: url(http://lorempixel.com/400/200/nature/4);
mask-image: linear-gradient(to top right, transparent 49.5%,
white 50.5%), linear-gradient(to top
211
left, transparent 49.5%, white 50.5%), linear-gradient(white,

white);
mask-size: 75% 25%, 25% 25%, 100% 75%;
mask-position: bottom left, bottom right, top left;
mask-repeat: no-repeat;
}
</style>
<div></div>
‫ القواطع‬8.8.1
<style>
div {
width: 200px;
height: 200px;
212
‫;‪background: teal‬‬
‫;)‪clip-path: polygon(0 0, 0 100%, 100% 50%‬‬
‫}‬
‫المثال أعاله يوضح كيفية استخدام الخاصية ‪ clip-path‬لقطع الشكل المربع إىل شكل مثلث‪ ،‬يبدأ القطع‬
‫في الحافة العُ ليا باتجاه اليسار (عند النقطة ‪ ،)0 0‬ومن ثمة يتجه إىل أسفل اليسار (النقطة ‪ ،)0 %100‬وأخيرًا إىل‬
‫منتصف الضلع األيمن (عند النقطة ‪ ،)%50 %100‬وتحدد هذه النقاط الثالث رؤوس المثلث‪.‬‬
‫ا‪ .‬إنشاء شكل دائري باستخدام القواطع‬
‫>‪<style‬‬
‫{ ‪div‬‬
‫;)‪clip-path: circle(30% at 50% 50%‬‬
‫}‬
‫المثال أعاله يوضح كيفية إنشاء شكل دائري باستخدام الخاصية ‪ ،clip-path‬ويكون الناتج هو شكل دائري‬
‫نصف قطره ‪ %30‬من عرض العنصر األصلي‪ ،‬ومركزه هو نفس مركز العنصر‪.‬‬
‫‪213‬‬
‫اطلع عىل تجربة حية للمثال أعاله عىل ‪.JSFiddle‬‬
‫الصيغة العامة لرسم الشكل الدائري‪:‬‬
‫)‪circle(radius at x y‬‬
‫‪ 8.9‬الخاصية ‪object-fit‬‬
‫تُحدد الخاصية ‪ object-fit‬كيف يتناسب العنصر مع صندوق ذو ارتفاع وعرض محددين‪ ،‬وغالبًا ما تستخدم‬
‫مع الصور والفيديوهات‪ ،‬ويمكن أن تأخذ إحدى القيم التالية‪:‬‬
‫مثال مع القيمة ‪:fill‬‬
‫;‪object-fit: fill‬‬
‫تُمدد ‪ fill‬الصورة لملء صندوق المحتوى بغض النظر عن نسبة العرض إىل االرتفاع األصلية للصورة‪.‬‬
‫مثال مع القيمة ‪:contain‬‬
‫;‪object-fit: contain‬‬
‫‪214‬‬
‫تُحافظ ‪ contain‬عىل نسبة االرتفاع إىل العرض األصلية للصورة عن طريق مالئمتها ألحد بُع‪ss‬دي الص‪ss‬ندوق‬
‫وضبط البعد اآلخر بنا ًء عىل نسبة االرتفاع إىل العرض األصلية‪.‬‬
‫مثال باستخدام القيمة ‪:COVER‬‬
‫;‪object-fit: cover‬‬
‫تُمدد ‪ cover‬الصورة لملء صندوق المحتوى‪ ،‬مع الحفاظ عىل نسبة الع‪ss‬رض إىل االرتف‪ss‬اع األص‪s‬لية للص‪ss‬ورة‬
‫عن طريق قصها‪.‬‬
‫مثال باستخدام القيمة ‪:none‬‬
‫;‪object-fit: none‬‬
‫‪215‬‬
‫تتجاهل ‪ none‬حجم الصندوق وتُحافظ عىل الحجم األصلي للصورة‪.‬‬
‫مثال باستخدام القيمة ‪:scale-down‬‬
‫;‪object-fit: scale-down‬‬
‫تختار تلقائ ًيا قيمة ‪ object-fit‬التي تُنتج الصورة األصغر‪.‬‬
‫‪216‬‬
Floats ‫ العنارص العائمة‬.9
‫ تعويم نص حول صورة‬9.1

:‫ كما هو موضح بالمثال التالي‬،‫ تعويم نص حول صورة‬float ‫من أبسط استعماالت خاصية‬
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer

nec odio. Praesent libero. Sed
cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
imperdiet. Duis sagittis
arcu eget nulla.</p>
<img src="https://loremflickr.com/200/100" />
<p>Class aptent taciti sociosqu ad litora torquent per conubia

nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
Curabitur tortor. Pellentesque
nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed
convallis tristique sem. Proin
ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis
vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula
lacinia aliquet.</p>
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫العناصر العائمة ‪Floats‬‬
‫{ ‪img‬‬
‫;‪float:left‬‬
‫;‪margin-right:1rem‬‬
‫}‬
‫اطلع عىل تجربة حية لهذا المثال عىل ‪.Codepen‬‬

‫ّ‬
‫‪ 9.2‬الرابط العجيب بني الخاصية ‪ clear‬والخاصية ‪float‬‬

‫ارتباطا وثي ًقا خاصية ‪ ،float‬وتستخدم لمن‪ss‬ع تع‪ss‬ويم العناص‪ss‬ر عىل ج‪ss‬انب معين من‬
‫ً‬ ‫ترتبط خاصية ‪clear‬‬
‫الحاوية‪ ،‬ويمكن أن تأخذ القيم التالية‪:‬‬
‫تسمح بتعويم العناصر عىل الجانبين‪.‬‬ ‫‪none‬‬
‫تمنع تعويم العناصر عىل الجانب األيسر من الحاوية‪.‬‬ ‫‪left‬‬
‫تمنع تعويم العناصر عىل الجانب األيمن من الحاوية‪.‬‬ ‫‪right‬‬
‫‪218‬‬
CSS ‫مالحظات للعاملين بلغة‬ Floats ‫العناصر العائمة‬
.‫تمنع تعويم العناصر عىل الجانبين‬ both
.float ‫تسترجع القيمة االبتدائية لخاصية‬ initial
.‫ من العنصر األب لالبن‬float ‫تُ َورِّث قيمة خاصية‬ inherit
:‫مثال‬
<html>
<head>
<style>
img {
float: left;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="https://static.pexels.com/photos/69372/pexels-photo-
69372-medium.jpeg" width="100">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem
ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<p class="clear">Lorem ipsum Lorem ipsum Lorem ipsum Lorem
ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum </p>
</body>
</html>
Clearfix ‫ مفهوم‬9.3
:‫ واألمثلة التالية توضح كيفية استخدامه‬،float ‫ هو مفهوم آخر مرتبط خاصية‬clearfix ‫مفهوم‬
:‫ مع هوامش متداخلة‬Clearfix ‫استخدام‬ •
.cf:after {
content: "";
219
‫}‬
‫{ ‪.cf:after‬‬
‫;‪clear: both‬‬
‫}‬
‫استخدام ‪ Clearfix‬لمنع تداخل الهوامش العلوية‬ ‫•‬
‫‪cf:before,‬‬
‫‪ */‬انظر الملاحظة رقم ‪content: " "; /* 1‬‬
‫‪ */‬انظر الملاحظة رقم ‪display: table; /* 2‬‬
‫}‬
‫;‪clear: both‬‬
‫}‬
‫اطلع عىل تجربة ح َّية الستخدامات ‪ clearfix‬عىل ‪.codepen‬‬

‫َّ‬
‫‪ .1‬إضافة حرف الفراغ للعناصر الزائفة ‪ :after‬و‪ :before‬يمنع ظهور فراغات حول العنصر‪.‬‬
‫‪ .2‬يجب استعمال ‪ table‬بدال ً عن ‪ block‬في حال استخدام ‪ :before‬الحتواء هوامش العنصر االبن‪.‬‬
‫‪ 9.4‬تحويل حاوية ‪ div‬إىل حاوية سطرية ‪ inline‬باستخدام ‪float‬‬

‫عنص‪ss‬ر ‪ div‬ه‪ss‬و عنص‪ss‬ر ُكتَلي‪ ،‬أي أن‪ss‬ه يأخ‪s‬ذ ك‪ss‬ل ع‪ss‬رض الشاش‪ss‬ة‪ ،‬وتوض‪ss‬ع العناص‪ss‬ر اإلخ‪ss‬وة ل‪ss‬ه رأس‪ً s‬يا ف‪ss‬وق‬
‫بعضها البعض‪.‬‬
‫>‪<div‬‬
‫>‪<p>This is DIV 1</p‬‬
‫>‪</div‬‬
‫>‪<div‬‬
‫>‪<p>This is DIV 2</p‬‬
‫>‪</div‬‬
‫‪220‬‬
:‫ويكون ناتج الشيفرة أعاله‬
‫ اىل حاوية سطرية (أي تأخذ فقط عرض محتواها وتوضع العناصر اإلخوة لها متجاورة‬div ‫يمكن تحويل عنصر‬
.float ‫أفق ًيا) باستخدام خاصية‬
:‫مثال‬
<div class="outer-div">
<div class="inner-div1">
<p>This is DIV 1</p>
</div>
<div class="inner-div2">
<p>This is DIV 2</p>
</div>
</div>
.inner-div1 {
width: 50%;
margin-right:0px;
float:left;
background : #337ab7;
padding:50px 0px;
221
‫}‬
‫{ ‪.inner-div2‬‬
‫;‪width: 50%‬‬
‫;‪margin-right:0px‬‬
‫;‪background : #dd2c00‬‬
‫;‪padding:50px 0px‬‬
‫}‬
‫{ ‪p‬‬
‫;‪text-align:center‬‬
‫}‬
‫اطلع عىل تجربة ح َّية لهذا المثال عىل ‪.Codepen‬‬

‫ّ‬
‫‪ 9.5‬إصالح الطوفان بضبط الطفحان‬

‫تحصل مشاكل بين العناص‪s‬ر عن‪s‬دما يطب‪ss‬ق الطوف‪s‬ان عىل عنص‪ss‬ر بينه‪s‬ا ل‪s‬ذا يمكن ض‪ss‬بط خاص‪s‬ية الطفح‪ss‬ان‬
‫‪ overflow‬إىل القيمة ‪ hidden‬أو ‪ auto‬أو ‪ scroll‬لعنصر محدد إلصالح تلك المشاكل‪.‬‬
‫استخدام القاعدة ‪ overflow: scroll‬سيظهر شريط التمرير بشكل دائم‪.‬‬
‫‪ 9.6‬إنشاء تخطيط بسيط ذو عمودين بعرض ثابت‬

‫المثال أدناه يوضح طريقة إنشاء تخطيط ذو عمودين بعرضين ثابتين باستخدام خاصية ‪.float‬‬
‫>"‪<div class="wrapper‬‬
‫>"‪<div class="sidebar‬‬
‫>‪<h2>Sidebar</h2‬‬
‫‪222‬‬
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Integer nec odio.</p>
</div>
<h1>Content</h1>
<p>Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia
nunc. Curabitur tortor. Pellentesque
nibh. Aenean quam. In scelerisque sem at dolor. Maecenas
mattis. Sed convallis tristique sem. Proin
ut ligula vel nunc egestas porttitor. Morbi lectus risus,
iaculis vel, suscipit quis, luctus non,
massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
</div>
</div>
.wrapper {
width: 600px;
padding: 20px;
background-color: pink;
/* 1 ‫* انظر الملاحظة‬/
overflow:hidden;
}
.sidebar {
width: 150px;
float: left;
background-color: blue;
}
.content {
width: 450px;
float: right;
background-color: yellow;
223
overflow: hidden ‫ ليس لديها ارتفاع محدد وي ُجبر استعمال القاعدة‬floating elements ‫العناصر العائمة‬
.‫العنصر األب عىل التمدد وأخذ ارتفاع العناصر األبناء‬
‫ إنشاء تخطيط ذو ثالث أعمدة بعرض ثابت‬9.7

<div class="wrapper">
<div class="left-sidebar">
<h1>Left Sidebar</h1>
</p>
</div>
<h1>Content</h1>
<p>Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia
nunc. Curabitur tortor. Pellentesque
nibh. Aenean quam. In scelerisque sem at dolor. Maecenas
mattis. Sed convallis tristique sem. Proin
massa. </p>
</div>
<div class="right-sidebar">
<h1>Right Sidebar</h1>
<p>Fusce ac turpis quis ligula lacinia aliquet.</p>
</div>
</div>
.wrapper {
224
width:600px;
background-color:pink;
padding:20px;
overflow:hidden;
}
.left-sidebar {
width:150px;
background-color:blue;
float:left;
}
.content {
width:300px;
background-color:yellow;
float:left;
}
.right-sidebar {
width:150px;
background-color:green;
float:right;
}
)‫ إنشاء تخطيط ذو عمودين بعرض ديناميكي (غري ثابت‬9.8

‫ة‬ss‫ذ الحاوي‬ss‫ تأخ‬.‫اميكي‬ss‫رض دين‬ss‫ودين بع‬ss‫ط ذي عم‬ss‫اء تخطي‬ss‫د إلنش‬ss‫ ا واح‬s‫عائم‬
ً ‫المثال التالي يستخدم عنصرًا‬
.‫ كل المساحة المتبقية من الشاشة‬.content ‫ بينما تأخذ الحاوية‬،‫ فقط مساحة محتواها‬.sidebar
<div class="sidebar">
<h1>Sidebar</h1>
<img src="http://lorempixel.com/150/200/" />
</div>
<h1>Content</h1>
Integer nec odio. Praesent libero. Sed
225
cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh
elementum imperdiet. Duis sagittis
arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
Curabitur tortor. Pellentesque
nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis.
Sed convallis tristique sem. Proin
massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris
ipsum. Nulla metus metus, ullamcorper
vel, tincidunt sed, euismod in, nibh.</p>
</div>
.sidebar {
/* `display:table;` shrink-wraps the column */
display:table;
float:left;
background-color:blue;
}
.content {
/* `overflow:hidden;` prevents `.content` from flowing under
`.sidebar` */
overflow:hidden;
background-color:yellow;
}

َّ
‫ شكل مساحة التعويم‬9.9
ُ ‫ر‬ss‫ط بالعنص‬ss‫تي تُحي‬ss‫احة ال‬ss‫ وهي المس‬،‫ويم‬ss‫احة التع‬ss‫كل مس‬ss‫ ش‬shape-outside ‫ية‬ss‫تُحدد الخاص‬
‫ َّوم‬sَ‫المع‬
:‫ويوضح الجدول التالي القيم التي تأخذها‬
226
.‫ (المساحة حول العنصر العائم) ال تتأثر‬float area ‫تعني أن مساحة التعويم‬ none
،ellipse)( ‫ أو‬،circle)( ‫ أو‬inset)( ‫تُحدد شكل مساحة التعويم وتأخذ إحدى القيم‬
basic-shape
.polygon)( ‫أو‬
border- ‫ أو‬،margin-box ‫ وتأخذ إحدى القيم‬،‫تحدد الصندوق الذي سيأخذ الشكل‬

shape-box
.content-box ‫ أو‬،padding-box ‫ أو‬،box
.‫تُحدد صورة توضع داخل الشكل‬ image
:‫مثال‬
img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px;
}
<img src="http://images.clipartpanda.com/circle-clip-art-
circlergb.jpg">
circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such
that it follows the curve of
the circle on either side. And then there is some filler text just
to make the text long enough.
Lorem Ipsum Dolor Sit Amet....</p>
227
‫دائم‪ ss‬ا مرب‪ss‬ع‪ ،‬ففي ح‪ss‬ال ع‪ss‬دم اس‪ss‬تخدام الخاص‪ss‬ية‬

‫ً‬ ‫بم‪ss‬ا أن ش‪ss‬كل النم‪ss‬وذج الص‪ss‬ندوقي للص‪ss‬ورتين ه‪ss‬و‬
‫‪ shape-outside‬لن يطفو النص حول الشكل ال‪ss‬دائري للص‪ss‬ورة وإنم‪ss‬ا س‪ss‬يطفو ح‪ss‬ول النم‪ss‬وذج الص‪ss‬ندوقي ذو‬
‫الشكل المربع‪ ،‬كما هو موضح في الصورة أدناه‪.‬‬
‫ولكن عند استخدام الخاصية ‪ shape-outside‬يُعاد تعريف الشكل الخارجي للعنص‪ss‬ر ويص‪ss‬بح دائريً‪ss‬ا مم‪ss‬ا‬
‫يجعل النص يطفو حول الدائرية التخيلية التي ترسمها هذه الخاصية‪ ،‬كما هو موضح في الصورة التالية‪:‬‬
‫‪ 9.9.1‬خاصية شكل الهامش ‪shape-margin‬‬

‫تُس‪ss‬تخدم الخاص‪ss‬ية ‪ shape-margin‬لتعري‪ss‬ف ش‪ss‬كل اله‪ss‬وامش للعنص‪ss‬ر‪ ،‬وتأخ‪ss‬ذ نفس قيم الخاص‪ss‬ية‬
‫‪ .shape-outside‬مثال‪:‬‬
‫{ ‪img:nth-of-type‬‬
‫;)‪shape-outside: circle(80px at 50% 50%‬‬
‫;‪shape-margin: 10px‬‬
‫;‪float: left‬‬
‫}‬
‫{ )‪img:nth-of-type(2‬‬
‫;)‪shape-outside: circle(80px at 50% 50%‬‬
‫;‪shape-margin: 10px‬‬
‫;‪float: right‬‬
‫}‬
‫{ ‪p‬‬
‫;‪line-height: 30px‬‬
‫}‬
‫‪228‬‬
circlergb.jpg">
circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such
that it follows the curve of
the circle on either side. And then there is some filler text just
to make the text long enough.
Lorem Ipsum Dolor Sit Amet....</p>
‫ندوق‬ss‫كل ص‬ss‫روف أن ش‬ss‫و مع‬ss‫ا ه‬ss‫ وكم‬،‫ر‬ss‫ول العنص‬ss‫الت ح‬ss‫ بكس‬10 ‫رض‬ss‫امش بع‬ss‫في هذا المثال ُأضيف ه‬
.‫ إلعادة تعريف الشكل وجعله دائريًا‬shape-margin ‫ لذلك يجب استخدام الخاصية‬،‫الهوامش مربع‬
229
‫‪ .10‬االنتقاالت ‪ Transitions‬والحركات‬
‫‪Animations‬‬
‫‪ 10.1‬االنتقاالت عرب الخاصية ‪transition‬‬

‫يوضح الجدول التالي خاصيات االنتقال ‪ transition‬التفصيلية‪:‬‬
‫تُستعمل لتحديد خاصيات ‪ CSS‬التي ستخضع لتأثير االنتقال‪.‬‬ ‫‪transition-property‬‬
‫تُحدِّد الزمن الذي سيستغرقه تأثير االنتقال للوصول إىل القيمة‬

‫‪transition-duration‬‬
‫النهائية للخاصية‪ ،‬والقيمة االفتراضية ‪ 0s‬ستلغي تأثير االنتقال‬
‫تُستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات ‪ CSS‬بتأثير‬

‫االنتقال‪ ،‬أي أنها تسمح لك بتحديد منحني التسار ع‬
‫‪transition-timing-function‬‬
‫‪ acceleration curve‬لتأثير االنتقال‪ .‬انظر التوثيق لمزيد من‬
‫المعلومات‪.‬‬
‫تُحدِّد الزمن الذي يجب انتظاره بين وقوع الحدث الذي سيؤدي إىل‬
‫‪transition-delay‬‬
‫بدء تأثير االنتقال وبين بداية التأثير‬
‫إليك مثال بس‪ss‬يط لتغي‪ss‬ير ل‪ss‬ون العنص‪ss‬ر من الل‪ss‬ون األحم‪ss‬ر إىل الل‪ss‬ون األخض‪ss‬ر ت‪ss‬دريجًا باس‪ss‬تعمال الخاص‪ss‬ية‬
‫‪ transition‬خالل ثانية واحدة عند تمرير مؤشر الفأرة فوقه‪:‬‬
‫{ ‪div‬‬
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫االنتقاالت ‪ Transitions‬والحركات ‪Animations‬‬
‫;‪transition: background-color 1s‬‬

‫}‬
‫{ ‪div:hover‬‬
‫}‬
‫‪ 10.1.1‬دالة التسارع ‪cubic-bezier‬‬

‫تس‪ss‬مح ل‪ss‬ك دال‪ss‬ة ‪ cubic-bezier‬بتخص‪ss‬يص منحى التس‪ss‬ار ع للحص‪ss‬ول عىل انتق‪ss‬االت سلس‪ss‬ة‪ ،‬وتأخذ‬
‫أربعة معامالت‪:‬‬
‫)‪cubic-bezier(P1_x, P1_y, P2_x, P2_y‬‬
‫ودائما ما يكون المعاملين ‪ P0‬و ‪ P3‬ثابتين‪ ،‬يكون ‪ P0‬في النقطة‬

‫ً‬ ‫تُرسم هذه المعامالت عىل ُمنحنى ‪،bezier‬‬
‫(‪ )0،0‬و ‪ P3‬في النقطة (‪ ،)1،1‬وبالتالي يجب أن تكون قيم معامالت الدالة ‪ cubic-bezier‬بين صفر وواحد‪.‬‬
‫‪231‬‬
CSS ‫مالحظات للعاملين بلغة‬ Animations ‫ والحركات‬Transitions ‫االنتقاالت‬
‫ح في‬ss‫و موض‬ss‫ا ه‬ss‫ كم‬cubic-bezier ‫ة‬ss‫تخدام دال‬ss‫ار ع باس‬ss‫ات التس‬ss‫ع منحني‬ss‫ير عن جمي‬ss‫يُمكن التعب‬
:‫المثال التالي‬
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0)
:‫مثال‬
div {
height: 100px;
width: 100px;
232
‫;‪border: 1px solid‬‬

‫;‪transition-property: height, width‬‬
‫;‪transition-duration: 1s, 500ms‬‬
‫;‪transition-timing-function: linear‬‬
‫;‪transition-delay: 0s, 1s‬‬
‫}‬
‫{ ‪div:hover‬‬
‫}‬
‫شرح الخاصيات‪:‬‬
‫‪ :transition-property‬تُحدِّد هذه الخاصية الخاصيات التي ستخض‪ss‬ع لت‪ss‬أثير االنتق‪ss‬ال‪ .‬وفي ه‪ss‬ذا‬ ‫•‬
‫المثال سيزيد ارتفاع وعرض الحاوية تدريج ًيا عند تمرير مؤشر الفأرة فوقها‪.‬‬
‫‪ :transition-duration‬تُحدِّد الزمن الذي سيستغرقه تأثير االنتقال للوص‪ss‬ول إىل القيم‪ss‬ة النهائي‪ss‬ة‬ ‫•‬
‫للخاصية‪ .‬وفي هذا المثال تستغرق الخاصية ‪ height‬ثانية واحدة لالنتقال من القيم‪ss‬ة ‪ 100‬بكس‪ss‬ل إىل‬
‫‪ 200‬بكسل‪ ،‬بينما تستغرق الخاصية ‪ width‬نصف ثانية (‪ 500‬ملي ثانية)‪.‬‬
‫‪ :transition-timing-function‬تُحدد منحى التسار ع لالنتقال‪ .‬القيمة الخطي‪ss‬ة (‪ )linear‬تع‪ss‬ني‬ ‫•‬
‫أن لعملية االنتقال سرعة ثابتة‪.‬‬
‫‪ :transition-delay‬تُحدِّد الزمن الذي يجب انتظاره بين وقوع الحدث الذي س‪ss‬يؤدي إىل ب‪ss‬دء ت‪ss‬أثير‬ ‫•‬
‫االنتقال وبين بداية التأثير‪ .‬وفي هذا المثال يبدأ تأثير االنتقال للخاصية ‪ height‬لحظ ًي‪ss‬ا (أي ف‪ss‬ور تمري‪ss‬ر‬
‫مؤشر الفأرة فوق الحاوية)‪ ،‬بينما يبدأ تأثير االنتقال للخاصية ‪ width‬بعد مرور ثانية واحدة من ذلك‪.‬‬
‫‪ 10.2‬إنشاء الحركات باستخدام خاصية ‪transition‬‬

‫يُمكن استخدام الخاصية ‪ transition‬إلنشاء الحركات البسيطة والغير معقدة‪.‬‬
‫‪233‬‬
‫{ ‪.example‬‬
‫;‪background: #fff‬‬
‫}‬
‫{ ‪.example:hover‬‬
‫;‪background: #ff0000‬‬
‫}‬

‫َّ‬
‫عند تمرير مؤشر الفأرة عىل أي عنصر يمتلك الصنف ‪ .example‬يتحول االرتف‪ss‬اع مباش‪ss‬رة إىل ‪ 120‬بكس‪ss‬ل‬
‫ويتغير لون الخلفية إىل اللون األحمر ‪ ،#ff0000‬وبإضافة خاصية ‪ transition‬يُمكن التحكم في المدة الزمنية‬
‫التي يستغرقها هذا االنتقال‪.‬‬
‫‪...‬‬
‫;‪transition: all 400ms ease‬‬
‫}‬
‫اطلع عىل تجربة حية لهذا المثال عىل ‪.JSFiddle‬‬

‫َّ‬
‫‪ 10.3‬دعم المتصفحات لخاصية ‪transition‬‬

‫خاصية ‪ transition‬مدعومة في جميع المتصفحات األساسية وبعض اإلصدارات القديم‪ss‬ة من متص‪ss‬فح‬
‫‪ ،Firefox‬ويُمكن اس‪sssssss‬تعمال الب‪sssssss‬وادئ الخاص‪sssssss‬ة به‪sssssss‬ذه المتص‪sssssss‬فحات ل‪sssssss‬دعم خاص‪sssssss‬ية‬
‫‪ transition‬فيها‪.‬‬
‫;‪transition: all 400ms ease‬‬
‫;‪-moz-transition: all 400ms ease‬‬
‫;‪-webkit-transition: all 400ms ease‬‬
‫}‬
‫‪ 10.4‬تحريك العنارص عرب الخاصية ‪animation‬‬

‫تستعمل الخاصية ‪ animation‬لتطبيق حركة محددة عىل عنصر‪ ،‬وتأخذ إحدى القيم التالية‪:‬‬
‫‪234‬‬
‫تحدِّد خاصيات ‪ CSS‬التي ستتأثر بالحركات‪.‬‬ ‫‪property‬‬
‫تحدِّد الزمن الالزم إلكمال دورة كاملة من الحركة‪.‬‬ ‫‪duration‬‬
‫تُستَعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات ‪ CSS‬بالحركة‪ ،‬أي أنها تسمح لك‬
‫‪timing-‬‬
‫بتحديد منحني التسار ع ‪ acceleration curve‬للحركة خالل دورة واحدة‪ .‬انظر دليل‬
‫‪function‬‬
‫منحنيات التسار ع‪.‬‬
‫ً‬
‫مباشرة‪ ،‬أو‬ ‫ً‬
‫فترة من الزمن‪ ،‬أو البدء‬ ‫تُحدِّد متى ستبدأ الحركة‪ ،‬ويمكنك تأخير بدء الحركة‬
‫‪delay‬‬
‫ً‬
‫مباشرة لكن مع تجاوز جزء من دورة الحركة‪.‬‬ ‫البدء‬
‫‪ 10.4.1‬إنشاء الحركات مخصصة باستخدام ‪@keyframes‬‬

‫تستخدم القاع‪ss‬دة ‪ @keyframes‬للتحكم ب‪ss‬الخطوات البيني‪ss‬ة ‪ )intermediate steps‬في سلس‪ss‬لة حرك‪ss‬ات‬
‫تحكم‪ s‬ا كب‪ss‬يرًا في أنم‪ss‬اط العنص‪ss‬ر في‬

‫ً‬ ‫‪ CSS‬عبر تعريف أنماط لإلط‪ss‬ارات المفتاحي‪ss‬ة (‪ ،)keyframes‬مم‪ss‬ا يعطين‪ss‬ا‬
‫الخطوات البينية بالموازنة مع االنتقاالت ‪.transition‬‬
‫{ ‪@keyframes rainbow-background‬‬
‫} ;‪{ background-color: #ff0000‬‬
‫‪8.333%‬‬ ‫} ;‪{ background-color: #ff8000‬‬
‫} ;‪16.667% { background-color: #ffff00‬‬
‫} ;‪25.000% { background-color: #80ff00‬‬
‫} ;‪50.000% { background-color: #00ffff‬‬
‫} ;‪58.333% { background-color: #0080ff‬‬
‫} ;‪83.333% { background-color: #ff00ff‬‬
‫} ;‪91.667% { background-color: #ff0080‬‬
‫} ;‪100.00% { background-color: #ff0000‬‬
‫}‬
‫{ ‪.RainbowBackground‬‬
‫;‪animation: rainbow-background 5s infinite‬‬
‫}‬
‫اطلع عىل تجربة ح َّية للمثال أعاله عىل ‪.JSFiddle‬‬

‫َّ‬
‫‪235‬‬
‫الحظ أن القاعدة ‪ @keyframes‬تُكتب بالصيغة الموضحة بالشيفرة أدناه حُيث ‪rainbow-background‬‬
‫هو اسم الحركة‪.‬‬
‫{ ‪@keyframes rainbow-background‬‬
‫} ;‪{background-color: #ff0000‬‬
‫}‬
‫تمثل القيمة ‪ %0‬نُقطة بداية الحركة‪ ،‬أي األنماط التي ستُطبق عند بدء الحركة‪ ،‬وتنتقل الحركة تلقائ ًيا للنُقطة‬
‫الثاني‪sss‬ة عن‪sss‬د م‪sss‬رور ‪ %8.333‬من زمن الحرك‪sss‬ة‪ ،‬ومن ثم إىل النقط‪sss‬ة الثالث‪sss‬ة عن‪sss‬د م‪sss‬رور ‪ %16.667‬من زمن‬
‫الحركة وهكذا‪.‬‬
‫{ ‪.Rainbowbackground‬‬
‫;‪animation: rainbow-background 5s infinite‬‬
‫}‬
‫تُض‪sss‬يف ه‪sss‬ذه الش‪sss‬فرة الحرك‪sss‬ة ‪ rainbow-background‬لك‪sss‬ل العناص‪sss‬ر ال‪sss‬تي تمتل‪sss‬ك الص‪sss‬نف‬
‫‪..RainbowBackground‬‬
‫تأخذ خاصية ‪ animation‬عدد من المعامالت هي‪:‬‬
‫‪ : animation-name‬يُحدِّد اسم الحركة‪.‬‬ ‫•‬
‫‪ : animation-duration‬يُحدِّد الزمن الالزم إلكمال دورة كاملة من الحركة‪.‬‬ ‫•‬
‫‪( : animation-iteration-count‬اختياري) يُحدِّد عدد تكرارات الحركة‪ ،‬ويأخذ القيمة ‪infinite‬‬ ‫•‬
‫في حال كانت الحركة النهائية (مستمرة)‪.‬‬
‫‪( : animation-delay‬اختياري) يُحدِّد متى س‪ss‬تبدأ الحرك‪ss‬ة‪ ،‬ويُمكن أن يأخ‪ss‬ذ قيم موجب‪ss‬ة أو س‪ss‬البة أو‬ ‫•‬
‫صفر وهي القيمة االفتراضية له‪ .‬القيم الس‪ss‬البة تع‪ss‬ني أن الحرك‪ss‬ة س‪ss‬تبدأ ُمتقدم‪ss‬ة قلياًل حس‪ss‬ب المق‪ss‬دار‬
‫المحدد‪.‬‬
‫‪( : animation-timing-function‬اختي‪ss‬اري) يُح‪ss‬دِّد منح‪ss‬ني التس‪ss‬ار ع (‪)acceleration curve‬‬ ‫•‬
‫للحركة خالل دورة واحدة‪.‬‬
‫تأخذ الخاصية ‪ background-color‬في المث‪s‬ال الت‪ss‬الي القيم‪s‬ة ‪ FF0000#‬عن‪s‬د النقط‪s‬تين ‪ %0‬و ‪%100‬‬
‫لذلك يُمكن تعريف هاتين النقطتين بسطر واحد كما هو موضح بالشيفرة التالية‪:‬‬
‫} ‪0%, 100% { background-color: #ff000-‬‬
‫‪236‬‬
-webkit ‫ة‬ss‫افة البادئ‬ss‫ة يجب إض‬ss‫فحات القديم‬ss‫@ في المتص‬keyframes ‫ إن أردت استعمال قاعدة‬،‫انتبه‬
:‫كما هو موضح في الشيفرة التالية‬
@-webkit-keyframes {}
-webkit-animation: ...
animation ‫ أمثلة الستعمال الخاصية‬10.5

:animation ‫مثال عىل الصيغة المختزلة لخاصية‬
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* ‫* ترتيب الخاصيات‬/
animation: <duration> <timing-function> <delay> <iteration-count>
<direction> <fill-mode> <play-state> <name>
:animation ‫مثال عىل حذف بعض الخاصيات االختيارية للخاصية‬
animation: 3s linear 1s slidein;
animation: <duration> <linear> <delay> <name>
:animation ‫مثال عىل أبسط تعريف لخاصية‬
animation: 3s slidein;
animation: <duration> <name>
:‫مثال عىل كتابة خاصيات الحركات منفصلة‬
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
237
‫‪animation-name: slidein‬‬
‫‪ 10.6‬تحسني أداء عملية التحريك عرب ‪will-change‬‬

‫تستعمل خاص‪ss‬ية ‪ transition‬وقاع‪ss‬دة ‪ @keyframes‬مع‪ss‬الج الرس‪ss‬ومات ‪ GPU‬اس‪ss‬تعمااًل ثقياًل ‪ ،‬ويمكن‬
‫تحسين أداء هاتين الخاص‪ss‬يتين باس‪ss‬تخدام الخاص‪ss‬ية ‪ will-change‬ال‪ss‬تي تُخ‪ss‬بر المتص‪ss‬فح أن هن‪ss‬اك ج‪ss‬زء من‬
‫الصفحة قابل للتغيير في لحظ‪ss‬ة زمني‪ss‬ة معين‪ss‬ة‪ .‬تأخ‪ss‬ذ الخاص‪ss‬ية ‪ will-change‬أس‪ss‬ماء الخاص‪ss‬يات ال‪ss‬تي تت‪ss‬أثر‬
‫بالخاصية ‪ transition‬أو بالقاعدة ‪ @keyframes‬وتخبر المتصفح أن هذه الخاصيات ستتغير في لحظة ما‪.‬‬
‫‪...‬‬
‫;‪will-change: transform, opacity‬‬
‫}‬
‫‪ 10.7‬التحويالت ُثنائية األبعاد ‪2D Transforms‬‬

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

‫تُستخدم لتدوير العنصر حول المحور ‪.Z‬‬ ‫(‪rotate(x‬‬
‫تُستخدم لتحريك العنصر عىل المحورين ‪ X‬و ‪.Y‬‬ ‫(‪translate(x,y‬‬
‫تُستخدم لتحريك العنصر عىل المحور ‪.X‬‬ ‫(‪translateX(x‬‬
‫تُستخدم لتحريك العنصر عىل المحور ‪.Y‬‬ ‫(‪translateY(y‬‬
‫تُستخدم إلعادة تحجيم أحد العناصر عىل المحورين ‪ X‬و ‪ Y‬مما يؤدي إىل تكبيره‬
‫(‪scale(x,y‬‬
‫أو تصغيره‪.‬‬
‫تُستخدم إلعادة تحجيم أحد العناصر عىل المحور ‪.X‬‬ ‫(‪scaleX(x‬‬
‫تُستخدم إلعادة تحجيم أحد العناصر عىل المحور ‪.Y‬‬ ‫(‪scaleY(y‬‬
‫تستخدم لجعل العنصر منحر ًفا‪ ،‬أي كأنَّنا أمسكنا بضلعين متقابلين من‬
‫المستطيل وحركناهما باتجاهين مختلفين‪ ،‬مما يؤدي إىل تحويل المستطيل‬ ‫(‪skew(x,y‬‬
‫إىل متوازي أضالع‪.‬‬
‫تستخدم لجعل العنصر منحر ًفا في االتجاه األفقي (محور ‪.)X‬‬ ‫(‪skewX(x‬‬
‫تستخدم لجعل العنصر منحر ًفا في االتجاه الرأسي (محور ‪.)Y‬‬ ‫(‪skewY(y‬‬
‫تستخدم الدالة )(‪ matrix‬لتطبيق مصفوفة تحويالت في الفضاء ثنائي‬

‫)(‪matrix‬‬
‫آن واحد‪.‬‬
‫األبعاد‪ ،‬ويمكن أن تحتوي المصفوفة عىل أكثر من تحويل في ٍ‬
‫‪238‬‬
‫الوصف‬ ‫الدالة أو المعامل‬

‫تُحدد زاوية التحويل التي ستُمرَّر إىل الدالة‪ ،‬ويمكن أن تكون بالدرجات أو‬
‫‪angle‬‬
‫بالتقدير الدائري (راديان) أو بعدد الدورات‪.‬‬
‫تُحدد مسافة التحويل التي ستُمرَّر إىل الدالة‪.‬‬ ‫‪length-or-percentage‬‬
‫يُحدد عدد مرات تكبير أو تصغير العنصر‪.‬‬ ‫‪scale-factor‬‬
‫‪ 10.7.1‬الدالة ‪rotate‬‬
‫المم‪ss‬رَّرة إلي‪ss‬ه‪،‬‬
‫تستخدم الدالة )(‪ rotate‬لتدوير العنصر في الفضاء ثنائي األبعاد بمقدار الزاوية <‪ُ >angle‬‬
‫القيم الموجبة للزاوية ستؤدي إىل تدوير العنصر باتجاه عقارب الساعة‪ ،‬أما القيم السالبة تُ ‪َ s‬د ِّور العنص‪ss‬ر في عكس‬
‫اتجاه عقارب الساعة‪.‬‬
‫>‪<div class="rotate"></div‬‬
‫{ ‪.rotate‬‬
‫;)‪transform: rotate(45deg‬‬
‫}‬
‫ويك‪ss‬ون مرك‪ss‬ز ال‪ss‬دوران بش‪ss‬كل افتراض‪ss‬ي في منتص‪ss‬ف العنص‪ss‬ر‪ ،‬ويمكن تغي‪ss‬يره عن طري‪ss‬ق الخاص‪ss‬ية‬
‫‪ transform-origin‬كما هو موضح في المثال التالي‪:‬‬
‫;‪transform-origin: 100% 50%‬‬
‫‪ 10.7.2‬الدالة ‪scale‬‬
‫تستخدم الدالة )(‪ scale‬إلعادة تحجيم أحد العناصر مما ي‪ss‬ؤدي إىل تكب‪ss‬يره أو تص‪ss‬غيره‪ ،‬وتأخ‪ss‬ذ ه‪ss‬ذه الدال‪ss‬ة‬
‫قيمتين رقميتين <‪ ،>number‬القيمة األوىل ‪ sx‬تؤدي إىل إعادة تحجيم العنصر عىل المحور ‪ ،X‬أما القيمة الثاني‪ss‬ة‬
‫ً‬
‫واحدة سيفترض المتصفح أن القيمتان ‪ sx‬و ‪ sy‬متساويتان‪.‬‬ ‫ً‬
‫قيمة‬ ‫‪ sy‬فتُعيد تحجيمه عىل المحور ‪ ،Y‬وإذا و ّفرنا‬
‫وأم‪ s‬ا إذا ك‪ss‬انت مس‪ً s‬‬

‫‪s‬اوية لل‪ss‬رقم ‪1‬‬ ‫المح‪s‬دَّد‪ّ ،‬‬
‫إذا كانت القيمة أك‪ss‬بر من ‪ ،1‬س‪ss‬يزداد حجم العنص‪ss‬ر عىل المح‪ss‬ور ُ‬
‫المحدَّد‪ ،‬أما إذا كانت القيمة بين الص‪ss‬فر والواح‪ss‬د‬
‫فسيبقى العنصر عىل حاله (بدون تصغير أو تكبير) عىل المحور ُ‬
‫‪239‬‬
‫‪s‬مح باس‪ss‬تخدام القيم‬

‫تمام‪ s‬ا من الص‪ss‬فحة؛ ويُس‪َ s‬‬
‫ً‬ ‫فستؤدي إىل تص‪ss‬غير العنص‪ss‬ر‪ ،‬أم‪ss‬ا القيم‪ss‬ة ‪ 0‬فس‪ss‬تخفي العنص‪ss‬ر‬
‫المحدَّد‪.‬‬
‫السالبة‪ ،‬لكنها لن تؤدي إىل إعادة تحجيم العنصر وإنما قلبه (‪ )flip‬في االتجاه ُ‬
‫>‪<div class="scale"></div‬‬
‫{ ‪.scale‬‬
‫;)‪transform: scale(0.5, 1.3‬‬
‫}‬
‫‪ 10.7.3‬الدالة ‪skew‬‬
‫تس‪ss‬تخدم الدال‪ss‬ة )(‪ skew‬لجع‪ss‬ل العنص‪ss‬ر منحر ًف‪ss‬ا‪ ،‬أي كأنَّن‪ss‬ا أمس‪ss‬كنا بض‪ss‬لعين متق‪ss‬ابلين من المس‪ss‬تطيل‬
‫وحرَّكناهما باتجاهين مختلفين‪ ،‬مما يردي إىل تحويل المستطيل إىل متوازي أضالع‪.‬‬
‫ً‬
‫قيمة واحد ًة أو قيمتين‪ ،‬وكال القيمتين هي زاوية ‪ ،‬تؤدي القيم‪ss‬ة األوىل إىل انح‪ss‬راف العنص‪ss‬ر‬ ‫تأخذ هذه الدالة‬
‫عىل المحور ‪ ،X‬وتؤدي الثانية إىل انحراف العنصر عىل المحور ‪ ،Y‬إذا لم تتوافر القيمة الثانية فستُع ّد أنها صفر‪.‬‬
‫>‪<div class="skew"></div‬‬
‫{ ‪.skew‬‬
‫;)‪transform: skew(20deg, -30deg‬‬
‫}‬

‫َّ‬
‫‪240‬‬
‫‪ 10.7.4‬التحويالت ُ‬
‫المتعددة‬
‫يُمكن إضافة عدد من التحويالت للعنصر كما هو موضح في المثال التالي‪:‬‬
‫;)‪transform: rotate(15deg) translateX(200px‬‬
‫هذه الشيفرة تُ َد ِّور العنص‪s‬ر ‪ 15‬درج‪s‬ة في اتج‪s‬اه عق‪s‬ارب الس‪s‬اعة ومن ثم تحرك‪s‬ه التج‪s‬اه اليمين بمق‪s‬دار ‪200‬‬
‫بكسل‪ ،‬ويجب مالحظة أن المحاور ستُدور مع العنصر مما يجعل اتجاه التحريك مائل بزاوية ‪ 15‬درجة‪.‬‬
‫لتحريك العنصر أفق ًيا يجب تغيير ترتيب الخواص كما هو موضح في المثال التالي‪:‬‬
‫>‪<style‬‬
‫{ ‪.transform‬‬
‫;)‪transform: translateX(200px) rotate(15deg‬‬
‫}‬
‫>‪<div class="transform"></div‬‬
‫‪241‬‬
‫‪ 10.7.5‬دالة ‪translate‬‬
‫المم‪s‬رَّرة إىل الدال‪ss‬ة‪ ،‬إذ تمث‪s‬ل القيم‪s‬ة األوىل‬
‫تس‪ss‬تخدم الدال‪ss‬ة )(‪ translate‬لتحري‪s‬ك العنص‪s‬ر وف‪s‬ق القيم ُ‬
‫التحريك عىل المحور ‪ ،X‬وتمثل القيمة الثانية التحري‪ss‬ك عىل المح‪ss‬ور ‪ ،Y‬وإذا لم تُح‪ss‬دد القيم‪ss‬ة الثاني‪ss‬ة فس‪ss‬يتحرَّك‬
‫ً‬
‫مئوي‪sss‬ة‬ ‫ً‬
‫نس‪sss‬بة‬ ‫العنص‪sss‬ر عىل المح‪sss‬ور ‪ X‬فق‪sss‬ط؛ ويمكن أن تك‪sss‬ون كال القيم‪sss‬تين ط‪sss‬واًل مطل ًق‪sss‬ا <‪ >length‬أو‬
‫<‪ >percentage‬من أبعاد صندوق العنصر‪.‬‬
‫القيم الموجبة ستؤدي إىل تحريك العنصر في االتجاه الموجب للمحور‪ ،‬والقيم السالبة ستحركه عكس ذلك‪.‬‬
‫>‪<div class="translate"></div‬‬
‫{ ‪.translate‬‬
‫;)‪transform: translate(200px, 50%‬‬
‫}‬
‫ويمكن تحري‪ss‬ك العنص‪ss‬ر عىل مح‪ss‬ور ‪ X‬فق‪ss‬ط باس‪ss‬تعمال الخاص‪ss‬ية ‪ translateX‬أو عىل مح‪ss‬ور ‪ Y‬فق‪ss‬ط‬
‫باستعمال الخاصية ‪.translateY‬‬
‫مثال عىل تحريك العنصر عىل محور ‪ X‬فقط‪:‬‬
‫;)‪transform: translateX(200px‬‬
‫}‬
‫مثال عىل تحريك العنصر عىل محور ‪ Y‬فقط‪:‬‬
‫;)‪transform: translateY(50%‬‬
‫}‬
‫‪242‬‬
transform-origin ‫ الخاصية‬10.7.6
،‫ر‬ss‫تجرى عىل العنص‬ss‫تي س‬ss‫ويالت ال‬ss‫داثيات للتح‬ss‫ بتحديد مبدأ اإلح‬transform-origin ‫تسمح الخاصية‬
‫داثيات عىل‬ss‫ددان اإلح‬ss‫ان تح‬ss‫ية قيمت‬ss‫ذه الخاص‬ss‫ وتأخذ ه‬،‫والقيمة االفتراضية لمبدأ اإلحداثيات هي مركز العنصر‬
.‫ عىل التوالي‬Y ‫ و‬X ‫المحورين‬
:‫مثال‬
<div class="transform originl"></div>

<div class="transform origin2"></div>
transform {
width: 200px;
height: 100px;
background: teal;
transition: transform 1s;
}
.origin1 {
transform-origin: 0 0;
}
.origin2 {
transform-origin: 100% 0;
}
.transform:hover {
}
3D Transforms ‫ التحويالت ثالثية األبعاد‬10.8
‫ إنشاء شكل مؤرش البوصلة باستخدام التحويالت ثالثية األبعاد‬10.8.1

:‫مثال‬
243
‫{ ‪div.needle‬‬
‫;)‪transform: rotateY(85deg) rotateZ(45deg‬‬
‫‪background-image: linear-gradient(to top left, #555 0%, #555‬‬
‫;)‪40%, #444 50%, #333 97%‬‬
‫;‪box-shadow: inset 6px 6px 22px 8px #272727‬‬
‫}‬
‫>‪<div class="needle"></div‬‬
‫عندما نُطبق خاصية التدوير ‪ ،rotate‬يحدث الدوران حول محور ‪ Z‬فقط‪ ،‬وفي أفضل األحوال يكون الش‪ss‬كل‬
‫الناتج هو شكل الماس (‪ ،)diamond shape‬لذلك نُض‪ss‬يف الخاص‪ss‬ية ‪ rotateY‬لض‪ss‬غط العنص‪ss‬ر في مح‪ss‬ور ‪Y‬‬
‫إلنتاج شكل اإلبرة أو مؤشر البوصلة‪.‬‬
‫ناتج هذا المثال هو إبرة (مؤشر بوصلة) ترتكز عىل طرفها‪ ،‬وإلنش‪ss‬اء إب‪ss‬رة ترتك‪ss‬ز عىل قاع‪ss‬دتها يجب اس‪ss‬تبدال‬
‫الخاصية ‪ rotateY‬بالخاصية ‪ rotateX‬مع إبقاء نفس قيم الزوايا‪.‬‬
‫الصور أدناه توضح ناتج هذا المثال‪:‬‬
‫صورة العنصر قبل تطبيق التحويالت‬ ‫•‬
‫صورة العنصر في حال استخدام التحويالت ثنائية األبعاد‬ ‫•‬
‫‪244‬‬
‫صورة العنصر بعد تطبيق التحويالت ثالثية األبعاد‬ ‫•‬
‫‪ 10.9‬إنشاء نص ثالثي األبعاد مع تأثري الظل‬

‫>"‪<div id="title‬‬
‫>"‪<h1 data-content="HOVER‬‬
‫‪Hover‬‬
‫>‪</h1‬‬
‫>‪</div‬‬
‫‪245‬‬
*{margin:0;padding:0;}
html,body{
height:100%;
width:100%;
overflow:hidden;
background:#0099CC;
}
#title{
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
perspective-origin:50% 50%;
perspective:300px;
}
h1{
text-align:center;
font-size:12vmin;
font-family: 'Open Sans', sans-serif;
color:rgba(0,0,0,0.8);
line-height:1em;
transform:rotateY(50deg);
perspective:150px;
perspective-origin:0% 50%;
}
h1:after{
content:attr(data-content);
position:absolute;
left:0;top:0;
transform-origin:50% 100%;
transform:rotateX(-90deg);
color:#0099CC;
}
#title:before{
content:'';
position:absolute;
top:-150%; left:-25%;
246
‫;‪width:180%; height:328%‬‬
‫;)‪background:rgba(255,255,255,0.7‬‬
‫;‪transform-origin: 0 100%‬‬
‫;)‪transform: translatez(-200px) rotate(40deg) skewX(35deg‬‬
‫;‪border-radius:0 0 100% 0‬‬
‫}‬
‫اطلع عىل تجربة ح َّية لهذا المثال عىل ‪.Codepen‬‬

‫َّ‬
‫‪ 10.9.1‬الخاصية ‪backface-visibility‬‬
‫تُحدد الخاصية ‪ backface-visibility‬م‪s‬ا إذا ك‪s‬ان الوج‪s‬ه الخلفي للعنص‪s‬ر ظ‪s‬اه ًرا للمس‪s‬تخدم‪ ،‬ويك‪s‬ون‬
‫الوجه الخلفي للعنصر ذو خلفية شفافة‪ ،‬ويسمح بعرض ص‪ss‬ورة معكوس‪ss‬ة (‪ )mirrored‬للوج‪ss‬ه األم‪ss‬امي للعنص‪ss‬ر‪،‬‬
‫ويمكن أن تأخذ إحدى القيم اآلتية‪:‬‬
‫‪ :visible‬يكون الوجه الخلفي للعنصر ظاهرًا‪.‬‬ ‫•‬
‫‪ :hidden‬تُخفي الوجه الخلفي للعنصر‪.‬‬ ‫•‬
‫‪ :inherit‬ترث قيمة الخاصية من العنصر األب‪.‬‬ ‫•‬
‫‪ :initial‬تُ ِ‬
‫رجع القيمة االبتدائية للخاصية‪.‬‬ ‫•‬
‫‪247‬‬
<style>
.flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
}
.flip.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
</style>
<div class="flip">Loren ipsum</div>

<div class="flip back">Lorem ipsum</div>

َّ
‫كعب باستخدام التحويالت ُثالثية األبعاد‬

َّ ‫ رسم ُم‬10.9.2
:‫مثال‬
<div class="cube">
<div class="cubeFace"></div>
<div class="cubeFace face2"></div>
</div>
body {
perspective-origin: 50% 100%;
perspective: 1500px;
overflow: hidden;
}
248
.cube {
position: relative;
padding-bottom: 20%;
transform-style: preserve-3d;
transform-origin: 50% 100%;
transform: rotateY(45deg) rotateX(0);
}
.cubeFace {
position: absolute;
top: 0;
left: 40%;
width: 20%;
height: 100%;
margin: 0 auto;
transform-style: inherit;
background: #C52329;
box-shadow: inset 0 0 0 5px #333;
transform: rotateX(90deg);
backface-visibility: hidden;
}
.face2 {
transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform-origin: 0 0;
background: inherit;
box-shadow: inherit;
backface-visibility: inherit;
}
.cubeFace:before {
249
top: 100%;
left: 0;
transform: rotateX(-90deg);
}
.cubeFace:after {
top: 0;
left: 100%;
transform: rotateY(90deg);
}

َّ
‫ البوادئ ودعم المتصفحات‬10.10

:‫يوضح الجدول التالي البوادئ الخاصية بكل متصفح‬
‫المتصفحات‬ ‫البادئة‬
Android, ,‫ وما بعد‬Opera 12 ‫ اإلصدارات األحدث من‬,Google Chrome, Safari
-webkit-
Blackberry, UC
Mozilla Firefox -moz-
Internet Explorer, Edge -ms-
-o-
12 ‫ حتى اإلصدار‬Opera
-xv-
:‫مثال‬
transition ‫خاصية‬ •
div {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
}
transform ‫خاصية‬ •
div {
-webkit-transform: rotate(45deg);
250
‫;)‪-moz-transform: rotate(45deg‬‬
‫;)‪-ms-transform: rotate(45deg‬‬
‫;)‪-o-transform: rotate(45deg‬‬
‫;)‪transform: rotate(45deg‬‬
‫}‬
‫للمزيد من التفاصيل حول التحريك‪ ،‬ننصحك بقراءة هذه السلسلة‪ ،‬المرجع الشامل إىل التحريك عبر ‪.CSS‬‬
‫‪251‬‬
‫‪ .11‬استعالمات الوسائط ‪Media Queries‬‬
‫تسمح استعالمات الوسائط ‪ media queries‬بتط‪ss‬بيق أنم‪ss‬اط ‪ CSS‬مختلف‪ss‬ة بن‪ss‬ا ًء عىل ن‪ss‬وع جه‪ss‬از الع‪ss‬رض‬
‫(شاشة أو طابعة أو غير ذلك) وحجمه‪ ،‬ف ُيحدَّد نوع الجه‪ss‬از عن طري‪ss‬ق ن‪s‬وع الوس‪ss‬ط ‪ ،media type‬بينم‪ss‬ا تُح‪s‬دد‬
‫مواصفات الجهاز األخرى مثل اللون وأبعاد شاشة العرض باستخدام خاصيات الوسط ‪.media features‬‬
‫الصيغة العامة لكتابة وسائط االستعالمات ‪:media queries‬‬
‫{ ]‪@media [...‬‬
‫‪ */‬القواعد التي ُ‬
‫ستطبق عند استيفاء شروط استعلامات الوسيط *‪/‬‬
‫}‬
‫تحديد نوع الجهاز‪:‬‬
‫{ ‪@media print‬‬
‫}‬
‫تحديد نوع وخصائص الجهاز‪:‬‬
‫{ )‪@media screen and (max-width: 600px‬‬

‫}‬
‫تحديد وضعية الجهاز (أفقي أم رأسي)‪:‬‬

‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫استعالمات الوسائط ‪Media Queries‬‬
‫{ )‪@media (orientation: portrait‬‬

‫}‬
‫{ )‪@media screen and (min-width: 720px‬‬

‫{ ‪body‬‬
‫;‪background-color: skyblue‬‬
‫}‬
‫}‬
‫تُحدد استعالمات الوسائط في المثال أعاله شرطين لتطبيق قواعد ‪ CSS‬هما‪:‬‬
‫‪ .1‬يجب عرض الصفحة عىل شاشة‪ ،‬أي أاَّل تكون مطبوعة أو ما شابه ذلك‪.‬‬
‫‪ .2‬يجب أن يكون عرض الشاشة ‪ 720‬بكسل عىل األقل‪.‬‬
‫تُطبق القاعدة ‪ background-color: skyblue‬في حال تحقق الشرطين أعاله ويُص‪ss‬بح ل‪ss‬ون الص‪ss‬فحة‬
‫أزرق سماوي‪.‬‬
‫تطبق قواعد استعالمات الوسائط بشكل ديناميكي‪ ،‬أي أنه إذا ُعرضت الصفحة عىل جهاز يستوفي ش‪s‬روطها‬
‫فإنها تُطبق قواعد ‪ CSS‬الخاصة به‪ ،‬ويتوقف تطبيق هذه القواعد عند تغيير جهاز العرض‪.‬‬
‫في المثال أعاله‪ ،‬إذا كان عرض شاشة العرض في البداية أقل من ‪ 720‬بكسل تُطب‪ss‬ق القاع‪ss‬دة ويُص‪ss‬بح ل‪ss‬ون‬
‫الصفحة أزرق سماوي‪ .‬إذا َقلَّص المستخدم عرض الشاشة (عن طريق تصغير حجم المتص‪ss‬فح مثاًل ) إىل أق‪ss‬ل من‬
‫‪ 720‬بكسل يتوقف تطبيق القاعدة ويتغير لون الصفحة للون المحدد خارج ‪.media query‬‬
‫ملخص القول‪ ،‬المعامالت التي تأخذها القاعدة ‪ @media‬هي باختصار‪:‬‬
‫(اختياري) يُعرِّف الوسط (الجهاز) الذي تُعرض عليه الصفحة‪،‬‬ ‫‪mediatype‬‬
‫(اختياري) يُطبِّق أنماط ‪ CSS‬عىل كل األجهزة عدا الجهاز المحدد به‪.‬‬ ‫‪not‬‬
‫يُحدِّد خاصيات استعالمات الوسائط‪ .‬الجدول التالي يبين الخاصيات المتاحة‪.‬‬ ‫‪media feature‬‬
‫‪ 11.1‬تحديد نوع الوسط أو الجهاز عرب ‪media type‬‬

‫المراد تطبيق قواعد ‪ CSS‬عليه‪ ،‬وه‪s‬و معام‪s‬ل اختي‪s‬اري‬
‫يستخدم المعامل ‪ media type‬لتحديد نوع الجهاز ُ‬
‫يُوضع مباشرة بعد التعريف ‪ .@media‬يوضح المثال التالي كيفية استخدامه‪:‬‬
‫‪253‬‬
‫{ ‪html‬‬
‫;‪background-color: white‬‬
‫}‬
‫}‬
‫تُعطي الشيفرة أعاله صفحة ‪ HTML‬خلفية بيضاء عند الطباعة‪.‬‬
‫يُمكن إضافة المعامل ‪ not‬قبل نوع الجه‪s‬از لتط‪s‬بيق قواع‪s‬د ‪ CSS‬عىل ك‪ss‬ل األجه‪s‬زة ع‪s‬دا الجه‪ss‬از المح‪s‬دد‪ ،‬أو‬
‫المعامل ‪ only‬والذي يُطبق قواعد ‪ CSS‬عىل الجهاز المحدد فقط كما هو موضح في األمثلة التالية‪:‬‬
‫{ ‪@media not print‬‬

‫{ ‪html‬‬
‫}‬
‫}‬
‫{ ‪@media only screen‬‬
‫{ ‪.fadeInEffects‬‬
‫}‬
‫}‬
‫يوضح الجدول التالي أنواع األجهزة‪:‬‬
‫الوصف‬ ‫نوع الجهاز أو الوسط‬

‫كل األجهزة‪.‬‬ ‫‪all‬‬
‫أجهزة الحاسوب‪.‬‬ ‫‪screen‬‬
‫الطابعات‪ ،‬وتستخدم لعمل نسخة مطبوعة من الصفحة‪.‬‬ ‫‪print‬‬
‫تشمل الهواتف المحمولة واألجهزة ذات الشاشات الصغيرة‪.‬‬ ‫‪handheld‬‬
‫تستعمل لعمل العروض المرئية ‪ ،presentations‬مثل جهاز اإلسقاط ‪projector‬‬ ‫‪projection‬‬
‫األجهزة الصوتية‪.‬‬ ‫‪aural‬‬
‫أجهزة برايل اللمسية‪.‬‬ ‫‪braille‬‬
‫طابعات برايل‪.‬‬ ‫‪embossed‬‬
‫أجهزة التلفاز‪.‬‬ ‫‪tv‬‬
‫األجهزة ذات شبكات األحرف الثابتة‪.‬‬ ‫‪tty‬‬
‫‪254‬‬
‫‪ 11.2‬استعالمات الوسائط للشاشات الشبكية وغري الشبكية‬

‫عىل ال‪ss‬رغم من أن ه‪ss‬ذا الن‪ss‬وع من اس‪ss‬تعالمات لوس‪ss‬ائط يعم‪ss‬ل فق‪ss‬ط عىل مص‪ss‬فحات المبني‪ss‬ة عىل ُمح ‪s‬رِّك‬
‫‪ Webkit‬إاَّل انه قد يكون مفيدًا في بعض األحيان‪ ،‬يوضح المثال التالي كيفية استعمالها‪:‬‬
‫‪ ---- */‬الشاشات غير الشبكية ‪/* ----‬‬

‫‪@media screen‬‬
‫)‪and (min-width: 1200px‬‬
‫)‪and (max-width: 1600px‬‬
‫{ )‪and (-webkit-min-device-pixel-ratio: 1‬‬
‫‪/* CSS rules */‬‬
‫}‬
‫‪ ---- */‬الشاشات الشبكية ‪/* ----‬‬

‫‪@media screen‬‬
‫)‪and (min-width: 1200px‬‬
‫)‪and (max-width: 1600px‬‬
‫)‪and (-webkit-min-device-pixel-ratio: 2‬‬
‫{ )‪and (min-resolution: 192dpi‬‬
‫‪/* CSS rules */‬‬
‫}‬
‫معلومات أساسية‪:‬‬
‫المس‪ss‬تخدمة في شاش‪ss‬ات الع‪ss‬رض‪ ،‬البكس‪ss‬الت المنطقي‪ss‬ة والبكس‪ss‬الت‬

‫يوج‪ss‬د نوع‪ss‬ان من البكس‪ss‬الت ُ‬ ‫•‬
‫الفيزيائية‪ ،‬وغالبًا ما تكون البكسالت الفيزيائية ثابتة لكل أجهزة العرض بينما تتغير البكسالت المنطقي‪ss‬ة‬
‫مع وضوح الشاشة‪ ،‬فكلَّما زاد وضوح الشاشة تزيد جودة البكسالت‪.‬‬
‫نسبة بكسالت الجهاز (‪ )device pixel ratio‬هي نسبة البكسالت الفيزيائية إىل المنطقية‪ .‬عىل سبيل‬ ‫•‬
‫المثال األجه‪s‬زة ‪ ،MacBook Pro Retina‬و ‪ iPhone4‬له‪s‬ا نس‪s‬بة بكس‪ss‬الت ‪ ،2‬أي أن ع‪ss‬دد البكس‪s‬الت‬
‫الفيزيائية ضعف عدد البكسالت المنطقية‪.‬‬
‫‪ 11.3‬خصائص الوسيط أو الجهاز ‪media features‬‬
‫‪255‬‬
‫يوضح الجدول التالي خاصيات الوسيط أو الجهاز ‪ media features‬التي يمكن التعامل معها‪:‬‬
‫‪ aspect-ratio‬نسبة ارتفاع الجهاز إىل عرضه‪.‬‬
‫تُشير إىل عدد ال ِبتَّات (الثنائيات) المستعملة لتمثيل اللون في جهاز العرض المستهدف‪،‬‬
‫‪color‬‬
‫وتكون قيمتها صفر إذا كان الجهاز غير ملون‪.‬‬
‫المدخالت في جدول ألوان جهاز العرض المستهدف‪.‬‬

‫تشير إىل عدد ُ‬ ‫‪color-index‬‬
‫تُحدِّد ما إذا كان الجهاز شبكي أم انه يستخدم الصور النقطية‪.‬‬ ‫‪gird‬‬
‫تُحدد ارتفاع مساحة العرض الخاصة بالجهاز‪.‬‬ ‫‪height‬‬
‫تُحدد أكبر عرض تُطبق عليه قواعد ‪.CSS‬‬ ‫‪max-width‬‬
‫تُحدد أقل عرض تُطبق عليه قواعد ‪.CSS‬‬ ‫‪min-width‬‬
‫تُحدد أكبر ارتفاع تُطبق عليه قواعد ‪.CSS‬‬ ‫‪max-height‬‬
‫تُحدد أقل ارتفاع تُطبق عليه قواعد ‪.CSS‬‬ ‫‪min-height‬‬
‫تشير إىل عدد ال ِبتَّات (الثنائيات) في البكسل الواحد عىل جهاز عرض ذو تدرج رمادي‪.‬‬ ‫‪monochrome‬‬
‫تُحدد اتجاه التدوير (أفقي أو رأسي) الذي تُطبَّق فيه قواعد ‪.CSS‬‬ ‫‪orientation‬‬
‫تشير إىل وضوح (كثافة بكسالت) جهاز العرض‪.‬‬ ‫‪resolution‬‬
‫تشير إىل عملية المسح الضوئي ألجهزة العرض التلفازية‪.‬‬ ‫‪scan‬‬
‫تُحدد عرض مساحة العرض الخاصة بالجهاز‪.‬‬ ‫‪width‬‬
‫يوضح الجدول التالي بعض الخاصيات الملغية‪:‬‬
‫تُطبق أنماط ‪ CSS‬فقط عىل األجهزة التي تطابق نسبة ارتفاعها إىل عرضها‬
‫‪device-aspect-ratio‬‬
‫النسبة المحددة بهذه الخاصية‪.‬‬
‫مماثلة لخاصية ‪ max-width‬لكنها تقيس عرض الشاشة الكُلي بداًل عن عرض‬

‫‪max-device-width‬‬
‫شاشة المتصفح‪.‬‬
‫مماثلة لخاصية ‪ min-width‬لكنها تقيس عرض الشاشة الكُلي بداًل عن عرض‬

‫‪min-device-width‬‬
‫مماثلة لخاصية ‪ max-height‬لكنها تقيس ارتفاع الشاشة الكُلي بداًل عن‬

‫‪max-device-height‬‬
‫ارتفاع شاشة المتصفح‪.‬‬
‫مماثلة لخاصية ‪ min-height‬لكنها تقيس ارتفاع الشاشة الكُلي بداًل عن ارتفاع‬

‫‪min-device-height‬‬
‫‪256‬‬
‫‪ 11.4‬العرض ‪ Width‬مقابل إطار العرض ‪Viewport‬‬

‫من المهم تحديد عرض الصفحة ‪ viewport‬ليكون مواف ًقا لعرض الجهاز ‪ device-width‬باستخدام البيانات‬
‫الوصفية ‪ .meta tags‬توضع البيانات الوصفية داخل رمز‬
‫وتُكتب بالطريقة الموضحة في المثال التالي‪:‬‬
‫>"‪<meta name="viewport" content="width=device-width, initial-scale=1‬‬
‫تُحدد خاصية ‪ width‬في استعالمات الوسائط عرض المساحة الفعلية المستعملة لع‪ss‬رض المحت‪ss‬وى‪ ،‬بينم‪ss‬ا‬
‫تحدد ‪ view-port‬عرض الجهاز نفسه‪.‬‬
‫تستخدم العديد من األجهزة عدد من البكسالت الفيزيائية لتمثيل بكسل فيزي‪ss‬ائي واح‪s‬د‪ .‬عىل س‪ss‬بيل المث‪s‬ال‬
‫وضوح شاشة جهاز ‪ iPhone 6 Plus‬هو ‪ 1242 × 2208‬لكنَّ مساحة العرض الفعلية هي ‪ ،414 × 736‬أي أن‬
‫كل ثالثة بكسالت منطقية تُمثل بكسل فيزيائي واحد‪.‬‬
‫ضبطا صحيحًا يؤدي إىل عرض الص‪ss‬فحة بوض‪ss‬وحها الحقيقي مم‪ss‬ا‬

‫ً‬ ‫عدم ضبط البيانات الوصفية ‪meta tag‬‬
‫يتسبب في ظهورها ُم َّ‬
‫صغرة (نصوص وصور بحجم أصغر)‪.‬‬
‫‪ 11.5‬استخدام استعالمات الوسائط الستهداف شاشات محددة‬

‫غالبً‪sss‬ا م‪sss‬ا تس‪sss‬تخدم اس‪sss‬تعالمات الوس‪sss‬ائط في إنش‪sss‬اء التص‪sss‬ميم المس‪sss‬تجيب لمواق‪sss‬ع ال‪sss‬ويب‬
‫‪ ،Responsive web design‬وذلك ألنها تمكن من تط‪ss‬بيق قواع‪ss‬د ‪ CSS‬مختلف‪ss‬ة بن‪ss‬ا ًء عىل حجم ون‪ss‬وع الجه‪ss‬از‬
‫المستخدم لعرض الصفحة‪.‬‬
‫{ )‪@meida only screen and (min-width: 300px) and (max-width: 767‬‬

‫*‪/‬‬
‫تطبق القواعد المحددة في هذا الجزء فقط إذا كان عرض الشاشة بين ‪ 300‬بكسل و ‪ 767‬بكسل‬
‫‪*/‬‬
‫{ ‪.site-title‬‬
‫;‪font-size: 80%‬‬
‫}‬
‫}‬
‫{ )‪@meida only screen and (min-width: 768px) and (max-width: 1023‬‬

‫*‪/‬‬
‫تطبق القواعد المحددة في هذا الجزء فقط إذا كان عرض الشاشة بين ‪ 768‬بكسل و ‪ 1023‬بكسل‬
‫‪*/‬‬
‫‪257‬‬
‫}‬
‫}‬
‫{ )‪@media only screen and (min-width: 1024‬‬

‫*‪/‬‬
‫تطبق القواعد المحددة في هذا الجزء فقط إذا كان عرض الشاشة أكبر من ‪ 1024‬بكسل‬
‫‪*/‬‬
‫}‬
‫}‬
‫‪ 11.6‬إنشاء استعالمات الوسائط عرب العنرص ‪link‬‬

‫حمل ملف ‪ CSS‬المحدد في الرابط أعاله في كل الحاالت ولكن ال يُطبق إال إذا كان عرض شاشة الجهاز أك‪ss‬بر‬
‫يُ َّ‬
‫من ‪ 600‬بكسل‪.‬‬
‫>‪<link rel="stylesheet" media="min-width: 600px" href="example.css" /‬‬
‫‪ 11.7‬تقسيم الصفحات عرب استعالمات الوسائط‬

‫يوضح الجدول التالي القيم التي يمكن استخدامها عبر استعالمات الوسائط‪:‬‬
‫تُضاف فواصل الصفحات تلقائ ًيا‪.‬‬ ‫‪auto‬‬
‫دائما‪.‬‬
‫ً‬ ‫تُضيف فواصل الصفحات‬ ‫‪always‬‬
‫تتجنب إضافة فواصل الصفحات ما أمكن‪.‬‬ ‫‪avoid‬‬
‫تُضيف فواصل الصفحات‪ ،‬وتعتبر الصفحة التالية صفحة يُسرى‪.‬‬ ‫‪left‬‬
‫تُضيف فواصل الصفحات‪ ،‬وتعتبر الصفحة التالية صفحة يُمنى‪.‬‬ ‫‪right‬‬
‫تستخدم هذه الخواص عند طباعة صفحات الويب‪ ،‬لذلك من الشائع استخدامها مع استعالمات الوسائط‬
‫‪258‬‬
‫{ ‪p‬‬
‫;‪page-break-inside: avoid‬‬
‫}‬
‫{ ‪h1‬‬
‫;‪page-break-before: always‬‬
‫}‬
‫{ ‪h2‬‬
‫;‪page-break-after: avoid‬‬
‫}‬
‫}‬
‫القاعدة األوىل تمنع إضافة فواصل الصفحات داخل الفقرة‪ ،‬وبمع‪ss‬نى آخ‪ss‬ر أنه‪ss‬ا تمن‪ss‬ع فص‪ss‬ل الفق‪ss‬رة عىل‬ ‫•‬
‫صفحتين‪.‬‬
‫القاعدة الثانية تضيف تبدأ صفحة جديدة قبل ك‪ss‬ل عناص‪ss‬ر ‪ h1‬أي أن ك‪ss‬ل عنص‪ss‬ر ‪ h1‬س‪ss‬يبدأ في ص‪ss‬فحة‬ ‫•‬
‫جديدة‪.‬‬
‫القاعدة الثالثة تمنع بدء صفحة جديدة بعد عناصر ‪.h2‬‬ ‫•‬
‫‪ 11.8‬وسائط المزيات ‪Feature Queries‬‬

‫يوضح الجدول التالي المعامالت التي يمكن استخدامها مع وسائط الميزات‪:‬‬
‫تكون صحيحة إذا كانت الخاصية المحددة مدعومة في المتصفح الذي تُعرض عليه‬
‫(‪)property: value‬‬
‫الصفحة‪.‬‬
‫تكون صحيحة إذا وفقط إذا تحقق الشرطان معً ا‪.‬‬ ‫‪and‬‬
‫تكون صحيحة إذا لم يتحقق الشرط‪.‬‬ ‫‪not‬‬
‫تكون صحيحة إذا تحقق أحد الشروط‪.‬‬ ‫‪or‬‬
‫مجموعة الشروط‪.‬‬ ‫(‪)...‬‬
‫‪ 11.9‬استخدام ‪@supports‬‬
‫تس‪ss‬تعمل ‪ @supports‬لمعرف‪ss‬ة م‪ss‬ا إذا ك‪ss‬انت الخاص‪ss‬ية مدعوم‪ss‬ة في المتص‪ss‬فح أم ال وتطبيقه‪ss‬ا إذا ك‪ss‬انت‬
‫مدعومة‪ ،‬مثال‪:‬‬
‫‪259‬‬
CSS ‫مالحظات للعاملين بلغة‬ Media Queries ‫استعالمات الوسائط‬
@supports (display: flex) {

.my-container {
display: flex;
}
}
‫ االستعالم عن عدد من المزيات‬11.10

.‫ لالستعالم عن عدد من الميزات‬or‫ و‬not‫ و‬and ‫تستخدم العمليات‬
@supports (transform: translateZ(1px)) and (transform-style: preserve-

3d) and (perspective: 1px) {
/* Probably do some fancy 3d stuff here */
}
@supports (display: flex) or (display: table-cell) {

/* Will be used if the browser supports flexbox or display: table-
cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
/* Will *not* be used if the browser supports -webkit-transform:
translate(...) */
}
‫ من الجيد وضع الجمل المنطقية بين قوسين كما هو موضح في المثال التالي‬،‫ولتسهيل قراءة الشيفرة‬
@supports ((display: block) and (zoom: 1)) or ((display: flex) and

(not (display: table-cell))) or
(transform: translateX(1px)) {
/* ... */
}
:‫تُطبَّق الشيفرة المحددة داخل هذا االستعالم إذا كان‬
‫ أو إذا كان‬،zoom: 1 ‫ و‬display: block ‫ يدعم المتصفح الخاصيتين‬.1
‫ أو إذا كان‬،display: table-cell ‫ وال يدعم الخاصية‬display: flex ‫ يدعم الخاصية‬.2
.transform: translate(1px) ‫ يدعم الخاصية‬.3
260
CSS ‫ مواضيع متقدمة في‬.12
Functions ‫ الدوال‬12.1
calc ‫ الدالة‬12.1.1
‫ع‬ss‫تخدامها في أي موض‬ss‫ ويمكن اس‬،CSS ‫يات‬ss‫ابية عىل قيم خاص‬ss‫ بإجراء عمليات حس‬calc)( ‫تسمح الدالة‬
>number< ‫> و‬time< ‫> و‬angle< ‫> و‬percentage< ‫> و‬length< ‫ات‬ss‫واع البيان‬ss‫تخدام أن‬s‫ه باس‬ss‫مح في‬s‫س‬
َ ُ‫ي‬
.>integer< ‫و‬
:‫ لحساب عرض الحاوية‬calc)( ‫مثال عىل استخدام دالة‬
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
background-color: yellow;
padding: 5px;
text-align: center
}
:‫ لتحديد موضع صورة الخلفية‬calc)( ‫استخدام الدالة‬
background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;
:‫ لحساب ارتفاع العنصر‬calc)( ‫استخدام الدالة‬

‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫مواضيع متقدمة في ‪CSS‬‬
‫;)‪height: calc(100% - 20px‬‬
‫لمزيد من المعلومات انظر توثيق ‪.calc‬‬
‫‪ 12.1.2‬الدالة ‪attr‬‬
‫المحدَّد واس‪ss‬تخدامها في أنم‪ss‬اط ‪،CSS‬‬
‫تستخدم الدالة ()‪ attr‬للحصول عىل قيمة إحدى خاصيات العنصر ُ‬
‫ويمكن استعمالها ً‬
‫أيضا عىل العناص‪s‬ر الزائف‪s‬ة ‪ pseudo-elements‬وفي ه‪s‬ذه الحال‪s‬ة ستُس‪s‬تخدَم قيم‪s‬ة خاص‪s‬ية‬
‫العنصر األصل‪.‬‬
‫>‪<blockquote data-mark='"'></blockquote‬‬
‫‪blockquote[data-mark]::before,‬‬
‫{ ‪blockquote[data-mark]::after‬‬
‫;)‪content: attr(data-mark‬‬
‫}‬
‫لمزيد من المعلومات انظر توثيق ‪.attr‬‬
‫‪ 12.1.3‬الدالة ‪var‬‬
‫تستخدم الدالة ()‪ var‬للوصول لمتغيرات ‪.CSS‬‬
‫{ ‪:root‬‬
‫;‪--primary-color: blue‬‬
‫}‬
‫{ ‪selector‬‬
‫;)‪color: var(--primary-color‬‬
‫}‬
‫لمزيد من المعلومات انظر توثيق ‪.var‬‬
‫‪262‬‬
‫‪ 12.1.4‬الدالة ‪radial-gradient‬‬
‫تستخدم الدالة )(‪ radial-gradient‬إلنشاء ت‪s‬درج ل‪s‬وني بين ل‪s‬ونين أو أك‪s‬ثر عىل ش‪s‬كل أش‪s‬عة تب‪s‬دأ من‬
‫المركز‪ ،‬ويمكن أن يكون شكلها دائريًا أو عىل شكل قطع ناقص‪.‬‬
‫;)‪radial-gradient(red, orange, yellow‬‬
‫لمزيد من المعلومات انظر توثيق ‪.radial-gradient‬‬
‫‪ 12.1.5‬الدالة ‪linear-gradient‬‬
‫تستخدم الدالة )(‪ linear-gradient‬إلنشاء تدرج لوني بين لونين أو أكثر عىل امتداد خط مستقيم‪،‬‬
‫;)‪linear-gradient( 0deg, red, yellow 50%, blue‬‬
‫لمزيد من المعلومات انظر توثيق ‪.linear-gradient‬‬
‫‪ 12.2‬المتغريات‪ :‬الخاصيات ُ‬
‫المخصصة في ‪CSS‬‬
‫أس‪ss‬ماء الخاص‪ss‬يات ال‪ss‬تي تُس‪ss‬بَق بش‪ss‬رطتين ‪ --‬مث‪ss‬ل ‪ --example-name‬تُم ِّثل الخاص‪ss‬يات المخصص‪ss‬ة‬
‫ٌ‬
‫قيمة يمكن إعادة استخدامها في المستند عبر الدالة )(‪.var‬‬ ‫‪ custom properties‬التي تُسنَد لها‬
‫مثااًل من الشائع إعادة استخدام نفس اللون في عدة أم‪s‬اكن في الص‪ss‬فحة‪ ،‬ل‪s‬ذلك من األفض‪s‬ل إنش‪s‬اء متغ‪s‬ير‬
‫يحمل قيمة هذا اللون واستخدامه مما يُس ِّهل البحث عنه وتعديله في المستقبل‪.‬‬
‫{ ‪:root‬‬
‫;‪--red: #b00‬‬
‫;‪--blue: #4679bd‬‬
‫;‪--grey: #ddd‬‬
‫}‬
‫{ ‪.Bx1‬‬
‫;)‪color: var(--red‬‬
‫;)‪background-color: var(--grey‬‬
‫;)‪border: 1px solid var(--red‬‬
‫}‬
‫‪263‬‬
CSS ‫مالحظات للعاملين بلغة‬ CSS ‫مواضيع متقدمة في‬
:‫مثال‬
:root {
--W200: 200px;
--W100: 10px;
}
.Bx2 {
width: var(--W200);
height: var(--W200);
margin: var(--W10);
}
‫ إعادة تعريف قيم المتغريات‬12.2.1

:‫مثال‬
<a class="button">Button Green</a>

<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>
.button {
--color: green;
padding: .5rem;
border: 1px solid var(--color);
color: var(--color);
}
.button:hover {
--color: blue;
}
.button-red {
--color: red;
}
264
‫‪ 12.2.2‬قواعد استخدام المتغريات في ‪CSS‬‬

‫يجب أن تحتوي أسماء المتغيرات عىل الحروف وعالمة (‪ )-‬فقط‪ ،‬مثال‪:‬‬
‫‪/* Invalid variables names */‬‬

‫;‪--123color: blue‬‬
‫;‪--#color: red‬‬
‫‪--bg_color: yellow‬‬
‫;‪--$width: 100px‬‬
‫‪/* Valid variable names */‬‬

‫;‪--color: red‬‬
‫‪--bg-color: yellow‬‬
‫‪--width: 100px‬‬
‫أسماء المتغيرات حساسة لحالة األحرف‪ ،‬مثال‪:‬‬
‫‪/* The variable names below are all different variables */‬‬
‫; ‪--pcolor:‬‬
‫; ‪--Pcolor:‬‬
‫; ‪--pColor:‬‬
‫يجب أن يكون لكل متغير قيمة (حرف المسافة (‪ )space‬قيمة صالحة للمتغير)‪ ،‬مثال‪:‬‬
‫‪/* Invalid */‬‬

‫;‪--color:‬‬
‫‪/* Valid */‬‬

‫‪--color: ; /* space is assigned */‬‬
‫متغيرات ‪ CSS‬ال تدعم التسلسل‪ ،‬أي ال يمكن استخدام الدالة )(‪ var‬داخل دالة أخرى‪ ،‬مثال‪:‬‬
‫‪/* Invalid */‬‬

‫{‪.logo‬‬
‫;'‪--logo-url: 'logo‬‬
‫‪265‬‬
background: url('assets/img/' var(--logo-url) '.png');

}
/* Invalid */
.logo{
--logo-url: 'assets/img/logo.png';
background: url(var(--logo-url));
}
/* Valid */
.logo{
--logo-url: url('assets/img/logo.png');
background: var(--logo-url);
}
:‫يجب وضع الوحدات داخل تعريف المتغير‬
/* Invalid */
--width: 10;
width: var(--width)px;
/* Valid */
--width: 10px;
width: var(--width);
/* Valid */
--width: 10;
width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
width: calc(1em * var(--width));
‫ استخدام المتغريات مع استعالمات الوسائط‬12.2.3

.‫يُمكن إعادة تعريف قيم المتغيرات في استعالمات الوسائط للحصول عىل صفحات متجاوبة‬
:‫مثال‬
<div></div>
266
<div></div>
<div></div>
<div></div>
:root{
--width: 25%;
--content: 'This is desktop';
}
@media only screen and (max-width: 767px){

:root{
--width:50%;
--content: 'This is mobile';
}
}
@media only screen and (max-width: 480px){

:root{
--width:100%;
}
}
div{
width: calc(var(--width) - 20px);
height: 100px;
}
div:before{
content: var(--content);
}
/* Other Styles */
body {
padding: 10px;
}
div{
267
‫;‪font-weight:bold‬‬
‫;‪background: red‬‬
‫}‬
‫ً‬
‫كاملة في المتصفح)‪:‬‬ ‫النتيجة (الصورة متحركة اضغط عليها لرؤيتها‬
‫اطلع عىل تجربة ح َّية لهذا المثال عىل ‪.CodePen‬‬

‫َّ‬
‫‪ 12.3‬نموذج الكائنات ‪CSSOM‬‬

‫يحدد المتصفح جميع الرموز في ملف ‪ CSS‬ويحولها إىل عُقد مرتبطة في شكل بنية شجرية‪ ،‬وتُ َك ِّون مجموعة‬
‫هذه العقد ما يُعرف بنموذج كائنات ‪ CSS‬أو ‪ CSSOM‬وهو اختصار ‪. CSS Object Model‬‬
‫لعرض أي صفحة ويب‪ ،‬ينفذ المتصفح الخطوات التالية‪:‬‬
‫‪ .1‬يفحص المتصفح وثيقة ‪ HTML‬ويبني ‪.DOM‬‬
‫‪ .2‬يفحص المتصفح وثيقة ‪ CSS‬ويبني نموذج الكائنات ‪.CSSOM‬‬
‫‪268‬‬
‫‪ .3‬يدمج المتصفح بين ‪ DOM‬و ‪ CSSOM‬إلنشاء شجرة العرض التي تُمثل الصفحة‪.‬‬
‫إليك المثال التالي حول إضافة صورة الخلفية ‪ background-image‬باستخدام نموذج الكائنات ‪.CSSOM‬‬
‫أواُل يجب الحصول عىل نقاط مرجعية تمثل بداية ونهاية القواعد في وثيقة ‪.CSS‬‬
‫;‪var stylesheet = document.stylesheet[0].cssRules‬‬

‫;‪var end = stylesheet.length - 1‬‬
‫ومن ثم تُضاف القاعدة ‪ background-image‬للعنصر ‪ body‬في نهاية وثيقة ‪.CSS‬‬
‫‪stylesheet.insertRule("body { background-image:‬‬
‫‪url('http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico'); }",‬‬
‫;)‪end‬‬
‫‪ 12.4‬أنماط التصميم ‪CSS Design Patterns‬‬

‫أنماط التصميم ‪ Design Patterns‬هي أساليب نموذجي‪ss‬ة تح‪s‬ل المش‪ss‬اكل ال‪s‬تي تتك‪s‬رر كث‪s‬يرًا في تص‪ss‬ميم‬
‫البرمجي‪ss‬ات‪ ،‬ويمكن تش‪ss‬بيهها بالمخطط‪ss‬ات ال‪ss‬تي تس‪ss‬تخدمها ‪-‬وتُع‪s‬دَّلها ً‬

‫أيض‪s‬ا‪ -‬من أج‪ss‬ل إص‪ss‬الح مش‪ss‬كلة بعينها‬
‫في شيفرتك‪.‬‬
‫بعض أنماط التصميم الشائعة في ‪:CSS‬‬
‫‪BEM‬‬ ‫•‬
‫‪OOCSS‬‬ ‫•‬
‫‪SMACSS‬‬ ‫•‬
‫‪269‬‬
‫‪ 12.4.1‬نمط ‪BEM‬‬
‫هي منهجية ُصممت من قب‪ss‬ل ش‪ss‬ركة التكنولوجي‪ss‬ا الروس‪ss‬ية ‪ ،Yandex‬ومن ثم اكتس‪ss‬بت ش‪ss‬عبية كب‪ss‬يرة بين‬
‫مبرمجين الويب في الواليات المتحدة و أوروبا الغربية ومنها إىل بقية العالم‪ ،‬وتُش‪ss‬ير ‪ BEM‬إىل الكلم‪ss‬ات ‪،Block‬‬
‫و‪ Elements‬و ‪ Modifiers‬عىل التوالي‪.‬‬
‫المس‪ss‬تقلة وله‪ss‬ا مع‪ss‬نى مح‪ss‬دد‪ ،‬مث‪ss‬ل العناص‪ss‬ر ‪،header‬‬

‫‪ :Blocks‬أو الكتل‪ ،‬وهي العناص‪ss‬ر أو الكيان‪ss‬ات ُ‬ ‫•‬
‫و ‪ ،container‬و‪ ،menu‬وغيرها‪.‬‬
‫‪ :Elements‬أو العناصر‪ ،‬وهي أجزاء من الكُتل والتي ليس لها معنى محدد‪ ،‬مثل ‪ ،menu item‬و‪list‬‬ ‫•‬
‫‪ item‬وغيرها‪.‬‬
‫‪ :Modifiers‬أو الصفات التعريفية‪ ،‬وتستخدم لتغي‪ss‬ير طريق‪ss‬ة ع‪ss‬رض أو س‪ss‬لوك العنص‪ss‬ر‪ ،‬مث‪ss‬ل الخ‪ss‬واص‬ ‫•‬
‫‪ ،disabled‬و‪ ،highlighted‬و‪ ،checked‬وغيرها‪.‬‬
‫هناك بعض القواعد لتطبيق منهجية أو نمط ‪ BEM‬وهي‪:‬‬
‫أنماط الكتل ال تعتمد بأي شكل من األشكال عىل بقية العناصر في الصفحة‪.‬‬ ‫•‬
‫يجب أن تكون أسماء الكُتل قصيرة‪ ،‬مع تجنب استخدام المحارف (‪ )-‬و (_)‪.‬‬ ‫•‬
‫يجب أن تأخذ أسماء ُمحددات العناصر الشكل ‪.blockname__elementname‬‬ ‫•‬
‫يجب أن تأخ‪ss‬ذ أس‪ss‬ماء ُمح‪ss‬ددات الص‪ss‬فات التعريفي‪ss‬ة الش‪ss‬كل ‪ blockname--modifiername‬أو‬ ‫•‬
‫‪.blockname__element-name--modifiername‬‬
‫>‪<style‬‬
‫‪form { } // Block‬‬
‫‪.form--theme-xmas { } // Block + modifier‬‬
‫‪.form--simple { } // Block + modifier‬‬
‫‪.form__input { } // Block > element‬‬
‫‪.form__submit { } // Block > element‬‬
‫‪.form__submit--disabled { } // Block > element + modifier‬‬
‫>"‪<form class="form form--theme-xmas form--simple‬‬

‫>‪<input class="form__input" type="text" /‬‬
‫‪270‬‬
‫"‪<input class="form__submit form__submit--disabled" type="submit‬‬

‫>‪/‬‬
‫‪</form‬‬
‫للتفصيل أكثر حول ‪ ،BEM‬ننصحك باإلطالع عىل مقال «دليلك إىل منهجية ‪.»BEM‬‬
‫‪271‬‬
‫‪ .13‬تنسيقات المتصفحات المخصصة‬
‫وأداءها‬
‫تُضيف المتصفحات تلقائ ًيا بعض األنماط عىل عناصر ‪ ،HTML‬وتختل‪ss‬ف ه‪ss‬ذه األنم‪ss‬اط ب‪ss‬اختالف المتص‪ss‬فح‬
‫مما يتسبب في ظهور الصفحة بأشكال مختلفة عند عرضها عىل متصفحات مختلفة‪ ،‬ولتف‪ss‬ادي ه‪ss‬ذا األم‪ss‬ر يجب‬
‫توحيد أنماط المتصفحات‪ ،‬ومن الشائع استخدام مكتبة ‪ normalize.css‬والتي تض‪ss‬بط بعض األنم‪ss‬اط وتُص‪ss‬حح‬
‫بعض األخطاء الشائعة في بعض المتصفحات‪.‬‬
‫‪ 13.1‬الفرق بني ‪ normalize.css‬و ‪reset.css‬‬

‫الف‪ss‬رق األساس‪ss‬ي بين مكتب‪ss‬ة ‪ normalize.css‬ومكتب‪ss‬ة ‪ reset.css‬ه‪ss‬و أن األوىل تض‪ss‬بط بعض األنم‪ss‬اط‬
‫لتوحيدها في جميع المتصفحات‪ ،‬بينما تُزي‪s‬ل الثاني‪s‬ة جمي‪s‬ع األنم‪s‬اط االفتراض‪s‬ية من العناص‪s‬ر‪ ،‬مم‪s‬ا يع‪s‬ني أن‪s‬ك‬
‫ستضطر لكتابة جميع القواعد من الصفر‪.‬‬
‫مثال عىل استخدام ‪:Eric Meyer's reset.css‬‬
‫‪html, body, div, span, applet, object, iframe,‬‬

‫‪h1, h2, h3, h4, h5, h6, p, blockquote, pre,‬‬
‫‪a, abbr, acronym, address, big, cite, code,‬‬
‫‪del, dfn, em, img, ins, kbd, q, s, samp,‬‬
‫‪small, strike, strong, sub, sup, tt, var,‬‬
‫‪b, u, i, center,‬‬
‫‪dl, dt, dd, ol, ul, li,‬‬
‫‪fieldset, form, label, legend,‬‬
‫‪table, caption, tbody, tfoot, thead, tr, th, td,GoalKicker.com – CSS‬‬
‫‪Notes for Professionals 224‬‬
CSS ‫مالحظات للعاملين بلغة‬ ‫تنسيقات المتصفحات المخصصة وأداءها‬
article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.Eric Meyer's reset.css ‫مزيد من المعلومات حول‬
:normalize.css ‫مثال عىل استخدام‬
/**
* 1. ‫توحيد نوع الخط في جميع المتصفحات‬
* 2. ‫تصحيح ارتفاع السطر وتوحيده في جميع المتصفحات‬
* 3. Safari ‫منع تعديل حجم الخط عند تغيير اتجاه العرض في متصفح‬
*/
/* Document
======================================================================
==== */
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/*
======================================================================
==== */
/**
* ‫إزالة الهوامش‬
*/
body {
273
‫مالحظات للعاملين بلغة ‪CSS‬‬ ‫تنسيقات المتصفحات المخصصة وأداءها‬
‫}‬
‫**‪/‬‬
‫تصحيح طريقة العرض *‬
‫‪*/‬‬
‫‪article,‬‬
‫‪aside,‬‬
‫‪footer,‬‬
‫‪header,‬‬
‫‪nav,‬‬
‫{ ‪section‬‬
‫}‬
‫**‪/‬‬
‫تصحيح حجم الخط والهوامش *‬
‫‪*/‬‬
‫{ ‪h1‬‬
‫;‪font-size: 2em‬‬
‫;‪margin: 0.67em 0‬‬
‫}‬
‫‪ 13.2‬وضع التباين العايل‬

‫ُأضيف محدد الوسائط ‪ -ms-high-contrast‬في متصفحات ‪ Internet Explorer‬ابتدا ًء من اإلص‪ss‬دار‬
‫العاشر واإلصدارات التي تليه‪ ،‬مما يسمح للمبرمج بضبط األنماط بنا ّء عىل ما إذا كان المستخدم يس‪ss‬تخدم وض‪ss‬ع‬
‫التباين العالي أم ال‪.‬‬
‫للمحدد ‪ -ms-high-contrast‬ثالث حاالت هي‪:‬‬
‫‪active‬‬ ‫•‬
‫‪black-on-white‬‬ ‫•‬
‫‪white-on-black‬‬ ‫•‬
‫‪@media screen and (-ms-high-contrast: active), (-ms-high-contrast:‬‬

‫{ )‪black-on-white‬‬
‫{ ‪.header‬‬
‫‪274‬‬
‫;‪background: #fff‬‬
‫;‪color: #000‬‬
‫}‬
‫}‬
‫في هذا المثال يتغير لون خلفية العنصر ‪ header‬إىل اللون األبيض ولون الكتابة للون األسود إذا كان وض‪ss‬ع‬
‫التباين العالي ُمفعَّ اًل وفي الحالة ‪.black-on-white‬‬
‫{ )‪@media screen and (-ms-high-contrast: white-on-black‬‬

‫{ ‪.header‬‬
‫;‪background: #000‬‬
‫;‪color: #fff‬‬
‫}‬
‫}‬
‫في هذا المثال يتغير لون خلفية العنصر ‪ header‬إىل اللون األسود ولون الكتابة للون األبيض إذا كان وض‪ss‬ع‬
‫التباين العالي ُمفعَّ اًل وفي الحالة ‪.white-on-black‬‬
‫لمزيد من المعلومات زر توثيق مايكروسوفت‪.‬‬
‫‪ 13.3‬أداء المتصفحات‬
‫‪ 13.3.1‬استخدام الخاصيات ‪ transform‬و ‪ opacity‬لتجنب تنبيه التخطيط‬

‫تغي‪ss‬ير بعض الخاص‪ss‬يات في ‪ CSS‬يُنبِّه المتص‪ss‬فح إلع‪ss‬ادة حس‪s‬اب القيم النهائي‪ss‬ة لألنم‪ss‬اط و التخطي‪ss‬ط‪ ،‬مم‪ss‬ا‬
‫يتسبب في تبطيء تحميل الصفحة‪.‬‬
‫مثال عىل التحريك باستخدام ‪ left‬و ‪:top‬‬
‫{ ‪#box‬‬
‫;‪left: 0‬‬
‫;‪top: 0‬‬
‫;‪transition: left 0.5s, top 0.5s‬‬
‫;‪background-color: gray‬‬
‫‪275‬‬
‫}‬
‫{ ‪#box.active‬‬
‫;‪left: 100px‬‬
‫;‪top: 100px‬‬
‫}‬
‫تستغرق الصفحة حوالي ‪ 11.7‬ملي ثانية للتحميل‪ ،‬ومن ثم تستغرق ‪ 9.8‬ملي ثانية إلع‪ss‬ادة رس‪ss‬م الص‪ss‬ندوق‬
‫في الموضع الجديد‪.‬‬
‫ولتحسين األداء وتسريع تحميل الصفحة يجب استخدام الخ‪ss‬واص ‪ transform‬و‪ opacity‬للحص‪ss‬ول عىل‬
‫نفس النتيجة كما هو موضح في المثال التالي‪:‬‬
‫‪276‬‬
‫{ ‪#box‬‬
‫;‪left: 0‬‬
‫;‪top: 0‬‬
‫;‪background-color: gray‬‬
‫;‪transition: transform 0.5s‬‬
‫;)‪transform: translate3d(0, 0, 0‬‬
‫}‬
‫‪#box.active‬‬
‫;)‪transform: translate3d(100px, 100px, 0‬‬
‫}‬
‫تستغرق الصفحة حوالي ‪ 1.3‬ملي ثانية للتحميل‪ ،‬ومن ثم تستغرق ‪ 2.0‬ملي ثانية إلعادة رسم الصندوق في‬
‫الموضع الجديد‪.‬‬
‫‪277‬‬
‫‪278‬‬
‫أحدث إصدارات أكاديمية حسوب‬

Css

Uploaded by

Document Information

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

Css

Uploaded by

Copyright:

Available Formats

‫مالحظات للعاملني بلغة ‪CSS‬‬

‫أتقن لغة ‪ CSS‬بأمثلة تطبيقية ومالحظات عملية متقدمة‬

‫‪Author: StackOverflow Contributors‬‬ ‫المؤلف‪ :‬مساهمون من ‪Stackoverflow‬‬

‫‪Translator: Ayman Tarig Algadi‬‬ ‫المترجم‪ :‬أيمن طارق القاضي‬

‫‪Editor: Jamil Bailony‬‬ ‫المحرر‪ :‬جميل بيلوني‬

‫‪Publication Year:‬‬ ‫‪2023‬‬ ‫سنة النشر‪:‬‬

‫‪Edition:‬‬ ‫‪1.0‬‬ ‫رقم اإلصدار‪:‬‬

‫بعض الحقوق محفوظة ‪ -‬أكاديمية حسوب‪.‬‬

‫أكاديمية حسوب أحد مشاريع شركة حسوب محدودة المسؤولية‪.‬‬

‫مسجلة في المملكة المتحدة برقم ‪.07571594‬‬

You are free to: :‫لك مطلق الحرية في‬

‫فيها فريق شاب وشغوف من مختلف الدول العربية‪.‬‬

‫‪21‬‬ ‫‪ .1‬أساسيات لغة ‪CSS‬‬

‫‪59‬‬ ‫‪ .2‬تخطيط الصفحة وضبط محاذاة العناصر‬

‫‪103‬‬ ‫‪ .3‬النموذج الصندوقي ‪Box Model‬‬

‫‪133‬‬ ‫‪ .4‬التحكم في تموضع العناصر‬

‫‪141‬‬ ‫‪ .5‬تنسيق القوائم وإضافة الظالل ورسم األشكال‬

‫‪162‬‬ ‫‪ .6‬التنسيقات األساسية للعناصر‬

‫‪183‬‬ ‫‪ .7‬تنسيق الخلفيات ‪Backgrounds‬‬

‫‪204‬‬ ‫‪ .8‬تنسيق الصور‬

‫‪217‬‬ ‫‪ .9‬العناصر العائمة ‪Floats‬‬

‫‪230‬‬ ‫‪ .10‬االنتقاالت ‪ Transitions‬والحركات ‪Animations‬‬

‫‪252‬‬ ‫‪ .11‬استعالمات الوسائط ‪Media Queries‬‬

‫‪261‬‬ ‫‪ .12‬مواضيع متقدمة في ‪CSS‬‬

‫‪272‬‬ ‫‪ .13‬تنسيقات المتصفحات المخصصة وأداءها‬

‫‪18‬‬ ‫حول الكتاب‬

‫‪19‬‬ ‫ماذا بعد هذا الكتاب‬

‫‪21‬‬ ‫‪ .1‬أساسيات لغة ‪CSS‬‬

‫‪21‬‬ ‫إضافة تنسيقات ‪ CSS‬للصفحات‬ ‫‪1.1‬‬

‫‪21‬‬ ‫التنسيقات الخارجية ‪External Styles‬‬ ‫‪1.1.1‬‬

‫‪23‬‬ ‫التنسيقات الداخلية ‪Internal Styles‬‬ ‫‪1.1.2‬‬

‫‪24‬‬ ‫القاعدة ‪@import‬‬ ‫‪1.1.3‬‬

‫‪25‬‬ ‫التنسيقات السطرية ‪Inline Styles‬‬ ‫‪1.1.4‬‬

‫‪25‬‬ ‫التحكم في تنسيقات ‪ CSS‬باستخدام جافاسكربت‬ ‫‪1.1.5‬‬

‫‪25‬‬ ‫استخدام ‪jQuery‬‬ ‫‪1.1.6‬‬

‫‪26‬‬ ‫هيكلة وصياغة قواعد ‪CSS‬‬ ‫‪1.2‬‬

‫‪27‬‬ ‫التعليقات ‪Comments‬‬ ‫‪1.3‬‬

‫‪27‬‬ ‫المحددات ‪Selectors‬‬ ‫‪1.4‬‬

‫‪28‬‬ ‫محددات الخاصيات ‪Attribute Selectors‬‬ ‫‪1.4.1‬‬

‫‪29‬‬ ‫ا‪ .‬المحدد [‪]attribute‬‬

‫‪29‬‬ ‫ب‪ .‬المحدد ["‪]attribute="value‬‬

‫‪30‬‬ ‫ج‪ .‬المحدد ["‪]attribute*="value‬‬

‫‪30‬‬ ‫د‪ .‬المحدد [ "‪]attribute~="value‬‬

‫‪31‬‬ ‫ه‪ .‬المحدد ["‪]attribute^="value‬‬

‫‪31‬‬ ‫و‪ .‬المحدد ["‪]attribute$="value‬‬

‫‪32‬‬ ‫ز‪ .‬المحدد ["‪]attribute|="value‬‬

‫‪32‬‬ ‫ح‪ .‬المحدد [‪]attribute="value" i‬‬

‫‪33‬‬ ‫جمعات ‪Combinators‬‬

‫‪33‬‬ ‫ا‪ُ .‬محدد العناصر السليلة ‪Descendant Combinator‬‬

‫‪34‬‬ ‫ب‪ُ .‬محدد العناصر األبناء ‪Child Combinator‬‬

‫‪34‬‬ ‫ج‪ُ .‬محدد العناصر اإلخوة المتجاورة ‪Adjacent Sibling Combinator‬‬

‫‪34‬‬ ‫د‪ُ .‬محدد العناصر اإلخوة العامة ‪General Sibling Combinator‬‬

‫‪35‬‬ ‫األصناف الزائفة ‪pseudo-classes‬‬ ‫‪1.4.3‬‬

‫‪37‬‬ ‫ا‪ .‬صنف االبن الزائف ‪Child Pseudo Class‬‬

‫‪38‬‬ ‫ب‪ .‬المحدد ‪last-of-type:‬‬

‫‪38‬‬ ‫ج‪ .‬المحدد ‪in-range:‬‬

‫‪39‬‬ ‫د‪ .‬المحدد ‪not:‬‬

‫‪40‬‬ ‫ه‪ .‬المحدد ‪focus-within:‬‬

‫‪41‬‬ ‫و‪ .‬إنشاء قيم منطقية باستخدام المحددات‬

‫‪42‬‬ ‫ز‪ .‬المحدد ‪only-child:‬‬

‫‪43‬‬ ‫ح‪ .‬تنسيق عناصر ‪ input‬من النوع ‪range‬‬

‫‪43‬‬ ‫المعرِّف الخاص بها ‪ID‬‬

‫‪45‬‬ ‫المعرِّفات ‪ID Selectors‬‬

‫‪45‬‬ ‫محددات العناصر الزائفة‬ ‫‪1.4.6‬‬