CSS

What is CSS ?
CSS ‫ هي اختصار لـ‬Cascading Style Sheets .‫ وهي لغة تنسيقية ُت ستخَد م لإضفاء مظهر جمالي على صفحات الويب‬،‫أو الأنماط الإنسيابية‬
‫ تسمح‬CSS ‫ تعمل‬.‫ بالتحكم في خصائص مثل الألوان والخطوط والخلفيات والتخطيط والحركات وغيرها من العناصر البصرية‬CSS ‫ مع‬HTML ‫و‬
JavaScript ‫لإنشاء صفحات وتطبيقات ويب متفاعلة ومبتكرة‬. 🌐
Dr. Muhammad Ahmed Muhammad Abd al-Rahman Auf

‫السالم عليكم ورحمه هللا وبركاته‬

CSS

CSS Syntax
CSS Selectors
CSS How To
CSS Comments
CSS Colors
CSS Backgrounds
CSS Borders
CSS Margins
CSS Padding
CSS Height/Width
CSS Box Model
CSS Outline
CSS Text
CSS Fonts
CSS Icons
CSS Links
CSS Lists
CSS Tables
CSS Display
CSS Max-width
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block

CSS 1
 CSS Align
CSS Combinators
CSS Pseudo-class
CSS Pseudo-element
CSS Opacity
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Image Sprites
CSS Attr Selectors
CSS Forms
CSS Counters
CSS Website Layout
CSS Units
CSS Specificity
CSS !important
CSS Math Functions

CSS Advanced
CSS Rounded Corners
CSS Border Images
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Text Effects
CSS Web Fonts
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions
CSS Animations
CSS Tooltips
CSS Style Images
CSS Image Reflection
CSS object-fit
CSS object-position
CSS Masking
CSS Buttons
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Variables
CSS Box Sizing
CSS Media Queries
CSS Flexbox
CSS Grid

CSS Syntax

‫تتكون قاعدة‬ CSS ‫من محدد وكتلة إعالن‬.

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

‫تحتوي كتلة الإعالن على إعالن واحد أو أكثر مفصولة بفواصل منقوطة‬.

CSS 2
 ‫يتضمن كل إعالن اسم خاصية‬ ‫‪CSS‬‬ ‫‪.‬وقيمة‪ ،‬مفصولة بنقطتين‬
‫يتم فصل إعالنات‬ ‫‪CSS‬‬ ‫‪.‬المتعددة بفواصل منقوطة‪ ،‬وتحاط كتل الإعالنات بأقواس متعرجة‬

‫{ ‪p‬‬
‫;‪color: red‬‬
‫;‪text-align: center‬‬
‫}‬

‫وأوضح المثال‬

‫‪: <p>).‬الذي تريد تصميمه ‪ HTML‬يشير إلى عنصر( ‪ CSS‬هو محدد في ‪p‬‬
‫اللون هو خاصية‪ ،‬والأحمر هو قيمة الخاصية‬
‫محاذاة النص هي خاصية‪ ،‬والمركز هو قيمة الخاصية‬

‫‪CSS Selectors‬‬

‫يقوم محدد‬ ‫‪CSS‬‬ ‫بتحديد عنصر (عناصر)‬ ‫‪HTML‬‬ ‫‪.‬الذي تريد تصميمه‬

‫‪CSS Selectors‬‬

‫يتم استخدام محددات‬ ‫‪CSS‬‬ ‫للبحث" (أو تحديد) عناصر"‬ ‫‪HTML‬‬ ‫‪.‬التي تريد تصميمها‬

‫يمكننا تقسيم محددات‬ ‫‪CSS‬‬ ‫‪:‬إلى خمس فئات‬

‫محددات بسيطة (حدد العناصر بناًء على الاسم والمعرف والفئة)‬

‫)تحديد العناصر بناًء على عالقة محددة بينها( ‪ Combinator‬محددات‬

‫محددات الفئة الزائفة (حدد العناصر بناًء على حالة معينة)‬

‫محددات العناصر الزائفة (تحديد وتصميم جزء من عنصر)‬

‫محددات السمات (حدد العناصر بناًء على سمة أو قيمة سمة)‬

‫‪The CSS element Selector‬‬

‫يقوم محدد العنصر بتحديد عناصر‬ ‫‪HTML‬‬ ‫‪.‬بناًء على اسم العنصر‬

‫مثال‬

‫هنا‪ ،‬سيتم محاذاة جميع عناصر‬ ‫>‪<p‬‬ ‫‪:‬الموجودة في الصفحة إلى المنتصف‪ ،‬مع لون نص أحمر‬

‫{ ‪p‬‬
‫;‪text-align: center‬‬

‫‪CSS‬‬ ‫‪3‬‬
 ‫;‪color: red‬‬
‫}‬

‫‪The CSS id Selector‬‬

‫يستخدم محدد المعرف سمة المعرف لعنصر‬ ‫‪HTML‬‬ ‫‪.‬لتحديد عنصر معين‬

‫!معرف العنصر فريد داخل الصفحة‪ ،‬لذلك يتم استخدام محدد المعرف لتحديد عنصر فريد واحد‬
‫‪.‬لتحديد عنصر بمعرف محدد‪ ،‬اكتب رمز التجزئة (‪ ،)#‬متبوًع ا بمعرف العنصر‬

‫مثال‬

‫سيتم تطبيق قاعدة‬ ‫‪CSS‬‬ ‫أدناه على عنصر‬ ‫‪HTML‬‬ ‫‪ = " para1 ":‬بالمعرف‬

‫{ ‪#para1‬‬
‫;‪text-align: center‬‬
‫;‪color: red‬‬
‫}‬

‫‪The CSS class Selector‬‬

‫يقوم محدد الفئة بتحديد عناصر‬ ‫‪HTML‬‬ ‫‪.‬ذات سمة فئة معينة‬

‫‪.‬لتحديد عناصر ذات فئة معينة‪ ،‬اكتب حرف النقطة (‪ ،).‬متبوًع ا باسم الفئة‬

‫مثال‬

‫في هذا المثال‪ ،‬ستكون جميع عناصر‬ ‫‪HTML‬‬ ‫‪:‬باللون الأحمر ومحاذاتها للوسط " ‪ = " center‬ذات الفئة‬

‫{ ‪.center‬‬
‫;‪text-align: center‬‬
‫;‪color: red‬‬
‫}‬

‫يمكنك أيًض ا تحديد أن عناصر‬ ‫‪HTML‬‬ ‫‪.‬المحددة فقط هي التي يجب أن تتأثر بالفئة‬

‫مثال‬

‫في هذا المثال‪ ،‬ستكون عناصر‬ ‫>‪<p‬‬ ‫‪:‬فقط باللون الأحمر ومحاذاتها للوسط " ‪ = " center‬ذات الفئة‬

‫{ ‪p.center‬‬
‫;‪text-align: center‬‬
‫;‪color: red‬‬
‫}‬

‫‪CSS‬‬ ‫‪4‬‬
 ‫‪The CSS Universal Selector‬‬

‫يقوم المحدد العام (*) بتحديد كافة عناصر‬ ‫‪HTML‬‬ ‫‪.‬الموجودة في الصفحة‬
‫مثال‬
‫ستؤثر قاعدة‬ ‫‪CSS‬‬ ‫أدناه على كل عنصر‬ ‫‪HTML‬‬ ‫‪:‬في الصفحة‬

‫{ *‬
‫;‪text-align: center‬‬
‫;‪color: blue‬‬
‫}‬

‫‪The CSS Grouping Selector‬‬

‫يقوم محدد التجميع بتحديد كافة عناصر‬ ‫‪HTML‬‬ ‫‪.‬التي لها نفس تعريفات النمط‬
‫انظر إلى كود‬ ‫‪CSS‬‬ ‫العناصر( التالي‬ ‫‪p‬و ‪h2‬و ‪h1‬‬ ‫‪):‬لها نفس تعريفات النمط‬

‫{ ‪h1‬‬
‫;‪text-align: center‬‬
‫;‪color: red‬‬
‫}‬

‫{ ‪h2‬‬
‫;‪text-align: center‬‬
‫;‪color: red‬‬
‫}‬

‫{ ‪p‬‬
‫;‪text-align: center‬‬
‫;‪color: red‬‬
‫}‬

‫‪.‬سيكون من الأفضل تجميع المحددات لتقليل الكود‬

‫لتجميع المحددات‪ ،‬افصل بين كل محدد بفاصلة‬

‫مثال‬

‫‪:‬في هذا المثال قمنا بتجميع المحددات من الكود أعاله‬

‫{ ‪h1, h2, p‬‬

‫;‪text-align: center‬‬
‫;‪color: red‬‬
‫}‬

‫‪Selector‬‬ ‫‪Example‬‬ ‫‪Example description‬‬

‫‪.class‬‬ ‫‪.intro‬‬ ‫”تحديد جميع العناصر ذات الفئة = "مقدمة‬

‫‪name2‬و ‪ name1‬يحدد كافة العناصر التي تحتوي على مجموعة‬

‫‪.class1.class2‬‬ ‫‪.name1.name2‬‬
‫ضمن سمة فئتها‬

‫‪ an‬التي هي من ساللة ‪ name2‬يحدد كافة العناصر ذات‬

‫‪.class1 .class2‬‬ ‫‪.name1 .name2‬‬
‫العنصر بالاسم‪1‬‬

‫‪#id‬‬ ‫‪#firstname‬‬ ‫”تحديد العنصر بالمعرف = "الاسم الأول‬

‫‪CSS‬‬ ‫‪5‬‬
 ‫*‬ ‫*‬ ‫يختار كافة العناصر‬

‫‪element‬‬ ‫‪p‬‬ ‫>‪ <p‬يختار كل عناصر‬

‫‪element.class‬‬ ‫‪p.intro‬‬ ‫”‪ = "intro‬ذات الفئة >‪ <p‬تحديد جميع عناصر‬

‫‪element.element‬‬ ‫‪div, p‬‬ ‫>‪ <p‬وجميع عناصر >‪ <div‬تحديد جميع عناصر‬

‫‪element element‬‬ ‫‪div p‬‬ ‫>‪ <div‬داخل عناصر >‪ <p‬تحديد جميع عناصر‬

‫‪element>element‬‬ ‫‪div > p‬‬ ‫>‪ <div‬حيث يكون الأصل عنصًر ا >‪ <p‬يحدد جميع عناصر‬

‫‪element +element‬‬ ‫‪div + p‬‬ ‫>‪ <div‬الأول الذي يتم وضعه مباشرة بعد عناصر >‪ <p‬تحديد العنصر‬

‫‪element1~element2‬‬ ‫‪p ~ ul‬‬ ‫>‪ <p‬يسبقه عنصر >‪ <ul‬تحديد كل عنصر‬

‫]‪[attribute‬‬ ‫]‪[target‬‬ ‫تحديد جميع العناصر ذات السمة المستهدفة‬

‫]‪[attribute=value‬‬ ‫]"‪[target="_blank‬‬ ‫”تحديد كافة العناصر ذات الهدف = "_ فارغة‬

‫]‪[attribute~=value‬‬ ‫]"‪[title~="flower‬‬ ‫”تحديد كافة العناصر ذات سمة العنوان التي تحتوي على كلمة "زهرة‬

‫أو "‪ "en‬التي تساوي ‪ lang‬يحدد كافة العناصر ذات قيمة سمة‬
‫]‪[attribute|=value‬‬ ‫]"‪[lang|="en‬‬
‫”‪ "en-‬بدءًا بـ‬

‫]‪[attribute^=value‬‬ ‫]"‪a[href^="https‬‬ ‫”‪ "https‬الخاصة به بـ ‪ href‬تبدأ قيمة سمة >‪ <a‬تحديد كل عنصر‬

‫]‪[attribute$=value‬‬ ‫]"‪a[href$=".pdf‬‬ ‫”‪ ".pdf‬الخاصة به بـ ‪ href‬تنتهي قيمة سمة >‪ <a‬تحديد كل عنصر‬

‫]‪[attribute*=value‬‬ ‫]"‪a[href*="udemy‬‬ ‫”‪ "udemy‬على السلسلة الفرعية ‪ href‬تحتوي قيمة سمة >‪ <a‬تحديد كل عنصر‬

‫‪:active‬‬ ‫‪a:active‬‬ ‫يختار الرابط النشط‬

‫‪::after‬‬ ‫‪p::after‬‬ ‫>‪ <p‬أدخل شيًئ ا بعد محتوى كل عنصر‬

‫‪::before‬‬ ‫‪p::before‬‬ ‫>‪ <p‬أدخل شيًئ ا ما قبل محتوى كل عنصر‬

‫‪:checked‬‬ ‫‪input:checked‬‬ ‫محدد >‪ <input‬يحدد كل عنصر‬

‫‪:default‬‬ ‫‪input:default‬‬ ‫الافتراضي >‪ <input‬يحدد عنصر‬

‫‪:disabled‬‬ ‫‪input:disabled‬‬ ‫معطل >‪ <input‬يحدد كل عنصر‬

‫‪:empty‬‬ ‫‪p:empty‬‬ ‫لا يحتوي على عناصر فرعية (بما في ذلك العقد النصية) >‪ <p‬تحديد كل عنصر‬

‫‪:enabled‬‬ ‫‪input:enabled‬‬ ‫ممّك ن >‪ <input‬يحدد كل عنصر‬

‫‪:first-child‬‬ ‫‪p:first-child‬‬ ‫يمثل الابن الأول لوالده >‪ <p‬تحديد كل عنصر‬

‫‪::first-letter‬‬ ‫‪p::first-letter‬‬ ‫>‪ <p‬تحديد الحرف الأول من كل عنصر‬

‫‪::first-line‬‬ ‫‪p::first-line‬‬ ‫>‪ <p‬تحديد السطر الأول من كل عنصر‬

‫‪:first-of-type‬‬ ‫‪p:first-of-type‬‬ ‫الأول من أصله >‪ <p‬يمثل العنصر >‪ <p‬تحديد كل عنصر‬

‫‪:focus‬‬ ‫‪input:focus‬‬ ‫تحديد عنصر الإدخال الذي له التركيز‬

‫‪:fullscreen‬‬ ‫‪:fullscreen‬‬ ‫تحديد العنصر الموجود في وضع ملء الشاشة‬

‫‪:hover‬‬ ‫‪a:hover‬‬ ‫تحديد الروابط على الماوس فوق‬

‫‪:in-range‬‬ ‫‪input:in-range‬‬ ‫تحديد عناصر الإدخال ذات القيمة ضمن نطاق محدد‬

‫‪:indeterminate‬‬ ‫‪input:indeterminate‬‬ ‫يحدد عناصر الإدخال الموجودة في حالة غير محددة‬

‫‪:invalid‬‬ ‫‪input:invalid‬‬ ‫تحديد جميع عناصر الإدخال ذات القيمة غير الصالحة‬

‫)‪:lang(language‬‬ ‫)‪p:lang(it‬‬ ‫)الإيطالية( "‪ "it‬تساوي ‪ lang‬بسمة >‪ <p‬تحديد كل عنصر‬

‫‪:last-child‬‬ ‫‪p:last-child‬‬ ‫الذي يمثل العنصر الفرعي الأخير لوالده >‪ <p‬يحدد كل عنصر‬

‫‪:last-of-type‬‬ ‫‪p:last-of-type‬‬ ‫الأخير في الأصل >‪ <p‬يمثل العنصر >‪ <p‬تحديد كل عنصر‬

‫‪:link‬‬ ‫‪a:link‬‬ ‫تحديد جميع الروابط التي لم تتم زيارتها‬

‫‪::marker‬‬ ‫‪::marker‬‬ ‫يحدد عالمات عناصر القائمة‬

‫)‪:not(selector‬‬ ‫)‪:not(p‬‬ ‫>‪ <p‬تحديد كل عنصر ليس عنصًر ا‬

‫)‪:nth-child(n‬‬ ‫)‪p:nth-child(2‬‬ ‫يمثل الابن الثاني لوالده >‪ <p‬تحديد كل عنصر‬

‫)‪:nth-last-child(n‬‬ ‫)‪p:nth-last-child(2‬‬ ‫يمثل الابن الثاني لوالده‪ ،‬ويتم العد من الطفل الأخير >‪ <p‬تحديد كل عنصر‬

‫‪p:nth-last-of-‬‬ ‫الثاني لوالده‪ ،‬ويتم العد من العنصر الفرعي >‪ <p‬يمثل العنصر >‪ <p‬يحدد كل عنصر‬
‫)‪:nth-last-of-type(n‬‬
‫)‪type(2‬‬ ‫الأخير‬

‫)‪:nth-of-type(n‬‬ ‫)‪p:nth-of-type(2‬‬ ‫الثاني من أصله >‪ <p‬يمثل العنصر >‪ <p‬تحديد كل عنصر‬

‫‪:only-of-type‬‬ ‫‪p:only-of-type‬‬ ‫الوحيد من أصله >‪ <p‬وهو العنصر >‪ <p‬يحدد كل عنصر‬

‫‪:only-child‬‬ ‫‪p:only-child‬‬ ‫الذي يعتبر الابن الوحيد لوالده >‪ <p‬تحديد كل عنصر‬

‫‪:optional‬‬ ‫‪input:optional‬‬ ‫‪".‬تحديد عناصر الإدخال التي لا تحتوي على سمة "مطلوبة‬

‫‪CSS‬‬ ‫‪6‬‬
 ‫‪:out-of-range‬‬ ‫‪input:out-of-range‬‬ ‫تحديد عناصر الإدخال بقيمة خارج نطاق محدد‬

‫‪::placeholder‬‬ ‫‪input::placeholder‬‬ ‫‪".‬يحدد عناصر الإدخال مع تحديد سمة "العنصر النائب‬

‫‪:read-only‬‬ ‫‪input:read-only‬‬ ‫تحديد عناصر الإدخال ذات السمة "للقراءة فقط" المحددة‬

‫‪:read-write‬‬ ‫‪input:read-write‬‬ ‫تحديد عناصر الإدخال ذات السمة "للقراءة فقط" غير المحددة‬

‫‪:required‬‬ ‫‪input:required‬‬ ‫تحديد عناصر الإدخال ذات السمة "المطلوبة" المحددة‬

‫‪:root‬‬ ‫‪:root‬‬ ‫يحدد العنصر الجذر للمستند‬

‫‪::selection‬‬ ‫‪::selection‬‬ ‫يحدد جزء العنصر الذي تم تحديده بواسطة المستخدم‬

‫الذي يحتوي على اسم ‪ URL‬النقر فوق عنوان( النشط الحالي ‪ #news‬تحديد عنصر‬
‫‪:target‬‬ ‫‪#news:target‬‬
‫)المرساة هذا‬

‫‪:valid‬‬ ‫‪input:valid‬‬ ‫تحديد كافة عناصر الإدخال بقيمة صالحة‬

‫‪:visited‬‬ ‫‪a:visited‬‬ ‫تحديد جميع الروابط التي تمت زيارتها‬

‫??‪How To Add CSS‬‬

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

‫‪Three Ways to Insert CSS‬‬

‫‪:‬هناك ثالث طرق لإدراج ورقة الأنماط‬

‫الخارجية ‪CSS‬‬
‫الداخلي ‪CSS‬‬
‫‪ CSS‬مضمنة‬

‫‪External CSS‬‬
‫!باستخدام ورقة الأنماط الخارجية‪ ،‬يمكنك تغيير مظهر موقع الويب بأكمله عن طريق تغيير ملف واحد فقط‬

‫يجب أن تتضمن كل صفحة‬ ‫‪HTML‬‬ ‫مرج ًع ا لملف ورقة الأنماط الخارجية داخل عنصر‬ ‫>‪<link‬‬ ‫‪.‬داخل قسم الرأس ‪،‬‬

‫مثال‬
‫يتم تعريف الأنماط الخارجية ضمن عنصر‬ ‫>‪<link‬‬ ‫داخل قسم ‪،‬‬ ‫>‪<head‬‬ ‫في صفحة‬ ‫‪HTML‬‬ ‫‪:‬‬

‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>"‪<link rel="stylesheet" href="mystyle.css‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫>‪<h1>This is a heading</h1‬‬
‫>‪<p>This is a paragraph.</p‬‬

‫>‪</body‬‬
‫>‪</html‬‬

‫‪CSS‬‬ ‫‪7‬‬
 ‫‪ . css .‬يمكن كتابة ورقة الأنماط الخارجية في أي محرر نصوص‪ ،‬ويجب حفظها بامتداد‬

‫الخارجي على أية عالمات ‪ . css‬يجب ألا يحتوي ملف‬ ‫‪HTML‬‬ ‫‪.‬‬
‫إليك كيف يبدو الملف‬ ‫"‪"mystyle.css‬‬ ‫‪:‬‬

‫{ ‪body‬‬
‫;‪background-color: lightblue‬‬
‫}‬

‫{ ‪h1‬‬
‫;‪color: navy‬‬
‫;‪margin-left: 20px‬‬
‫}‬

‫‪Internal CSS‬‬

‫يمكن استخدام ورقة الأنماط الداخلية إذا كانت صفحة‬ ‫‪HTML‬‬ ‫‪.‬واحدة تحتوي على نمط فريد‬
‫يتم تعريف النمط الداخلي داخل عنصر‬ ‫>‪<style‬‬ ‫‪.‬داخل قسم الرأس ‪،‬‬
‫مثال‬

‫يتم تعريف الأنماط الداخلية ضمن عنصر‬ ‫>‪<style‬‬ ‫داخل قسم ‪،‬‬ ‫>‪<head‬‬ ‫في صفحة‬ ‫‪HTML‬‬ ‫‪:‬‬

‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{ ‪body‬‬
‫;‪background-color: linen‬‬
‫}‬

‫{ ‪h1‬‬
‫;‪color: maroon‬‬
‫;‪margin-left: 40px‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫>‪<h1>This is a heading</h1‬‬
‫>‪<p>This is a paragraph.</p‬‬

‫>‪</body‬‬
‫>‪</html‬‬

‫‪Inline CSS‬‬

‫‪.‬يمكن استخدام النمط المضّم ن لتطبيق نمط فريد على عنصر واحد‬

‫‪CSS‬‬ ‫‪8‬‬
 ‫لاستخدام الأنماط المضمنة‪ ،‬قم بإضافة سمة النمط إلى العنصر ذي الصلة‪ .‬يمكن أن تحتوي سمة النمط على أي خاصية‬ ‫‪CSS‬‬ ‫‪.‬‬
‫مثال‬
‫‪:‬يتم تعريف الأنماط المضمنة ضمن سمة "النمط" للعنصر ذي الصلة‬

‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<body‬‬

‫>‪<h1 style="color:blue;text-align:center;">This is a heading</h1‬‬

‫>‪<p style="color:red;">This is a paragraph.</p‬‬

‫>‪</body‬‬
‫>‪</html‬‬

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

‫‪CSS Comments‬‬

‫‪ُ.‬ت ستخدم التعليقات لشرح التعليمات البرمجية‪ ،‬وقد تساعدك عندما تقوم بتحرير التعليمات البرمجية المصدر في وقت لاحق‬
‫‪.‬يتم تجاهل التعليقات من قبل المتصفحات‬
‫يتم وضع تعليق‬ ‫‪CSS‬‬ ‫داخل العنصر‬ ‫>‪<style‬‬ ‫وينتهي بـ ‪،‬‬ ‫‪*/‬‬ ‫ويبدأ بـ‬ ‫‪*/‬‬ ‫‪:‬‬

‫‪/* This is a single-line comment */‬‬

‫{ ‪p‬‬
‫;‪color: red‬‬
‫}‬

‫‪CSS Colors‬‬
‫يتم تحديد الألوان باستخدام أسماء الألوان المحددة مسبًق ا‪ ،‬أو قيم‬ ‫‪RGB‬‬ ‫‪،‬‬ ‫‪HEX‬و‬ ‫‪،‬‬ ‫‪HSL‬و‬ ‫‪،‬‬ ‫‪RGBA‬و‬ ‫‪،‬‬ ‫‪HSLA‬و‬ ‫‪.‬‬

‫‪CSS Color Names‬‬

‫في‬ ‫‪CSS‬‬ ‫‪:‬يمكن تحديد اللون باستخدام اسم اللون المحدد مسبًق ا ‪،‬‬

‫‪CSS‬‬ ‫‪9‬‬
 CSS Background Color
‫يمكنك ضبط لون الخلفية لعناصر‬ HTML :

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color

‫يمكنك ضبط لون النص‬:

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS RGB Colors

‫تمثل قيمة اللون‬ RGB ‫مصادر الضوء الأحمر والأخضر والأزرق‬.

RGB Value
‫في‬ CSS ، ‫يمكن تحديد اللون كقيمة‬ RGB ، ‫باستخدام هذه الصيغة‬:

rgb (red, green, blue)

255‫ و‬0 ‫تحدد كل معلمة (الأحمر والأخضر والأزرق) شدة اللون بين‬.

CSS 10
 ‫على سبيل المثال‪ ،‬يتم عرض‬ ‫‪rgb‬‬ ‫‪( 255 ,‬‬ ‫‪0‬‬ ‫‪,‬‬ ‫‪0‬‬ ‫باللون الأحمر‪ ،‬لأنه تم تعيين اللون الأحمر على أعلى قيمة له ( ‪ ) 255‬وتم تعيين القيم الأخرى )‬
‫‪.‬على ‪0‬‬

‫‪ ،‬مثل هذا‬ ‫‪0‬‬ ‫‪:‬لعرض اللون الأسود‪ ،‬قم بتعيين كافة معلمات الألوان على‬ ‫‪rgb‬‬ ‫‪(0,‬‬ ‫‪0‬‬ ‫‪,‬‬ ‫‪0‬‬ ‫‪).‬‬

‫‪ ،‬مثل هذا‬ ‫‪255‬‬ ‫‪:‬لعرض اللون الأبيض‪ ،‬اضبط كافة معلمات الألوان على‬ ‫‪rgb‬‬ ‫‪( 255 ,‬‬ ‫‪255‬‬ ‫‪,‬‬ ‫‪255‬‬ ‫‪).‬‬
‫قم بالتجربة عن طريق مزج قيم‬ ‫‪RGB‬‬ ‫‪:‬أدناه‬

‫‪RGBA Value‬‬
‫تعد قيم ألوان‬ ‫‪RGBA‬‬ ‫امتداًد ا لقيم ألوان‬ ‫‪RGB‬‬ ‫‪.‬مع قناة ألفا ‪ -‬والتي تحدد عتامة اللون‬
‫يتم تحديد قيمة لون‬ ‫‪RGBA‬‬ ‫‪:‬باستخدام‬

‫)‪rgba(red, green, blue, alpha‬‬

‫(غير شفاف على الإطالق)‬ ‫‪1.0‬‬ ‫(شفاف تماًم ا) و‬ ‫‪0.0‬‬ ‫‪:‬معلمة ألفا هي رقم يقع بين‬

‫قم بالتجربة عن طريق مزج قيم‬ ‫‪RGBA‬‬ ‫‪:‬أدناه‬

‫‪CSS HEX Colors‬‬

‫‪:‬يتم تحديد اللون السداسي العشري باستخدام‬ ‫‪#RRGGBB‬‬ ‫حيث تحدد الأعداد الصحيحة السداسية العشرية ‪،‬‬ ‫‪RR‬‬ ‫) الأحمر (‬ ‫‪GG‬و‬ ‫) الأخضر (‬ ‫‪BB‬و‬

‫‪.‬مكونات اللون ) الأزرق (‬

‫‪HEX Value‬‬

‫في‬ ‫‪CSS‬‬ ‫‪:‬يمكن تحديد اللون باستخدام قيمة سداسية عشرية في النموذج ‪،‬‬
‫‪#rrggbb‬‬

‫حيث‬ ‫‪rr‬‬ ‫‪ )،‬أحمر (‬ ‫‪gg‬‬ ‫و ) أخضر (‬ ‫‪bb‬‬ ‫) أزرق (‬ ‫‪ 00‬و‬ ‫‪).‬مثل العالمة العشرية ‪ff ( 255 - 0‬هي قيم سداسية عشرية تتراوح بين‬
‫على سبيل المثال‪ ،‬يتم عرض‬ ‫‪#ff0000‬‬ ‫ويتم تعيين الألوان الأخرى على أدنى ) ‪ ( ff‬باللون الأحمر‪ ،‬لأنه تم تعيين اللون الأحمر على أعلى قيمة له‬
‫‪.‬قيمة ( ‪) 00‬‬

‫‪000000‬‬ ‫‪ ،‬مثل هذا‪# :‬‬ ‫‪00‬‬ ‫‪.‬لعرض اللون الأسود‪ ،‬اضبط كافة القيم على‬
‫لعرض اللون الأبيض‪ ،‬قم بتعيين كافة القيم على‬ ‫‪ff‬‬ ‫‪:‬مثل هذا ‪،‬‬ ‫‪#ffffff‬‬ ‫‪.‬‬
‫قم بالتجربة عن طريق خلط قيم‬ ‫‪HEX‬‬ ‫‪:‬أدناه‬

‫‪3 Digit HEX Value‬‬

‫‪ CSS.‬في بعض الأحيان سترى رمًز ا سداسًي ا مكوًن ا من ‪ 3‬أرقام في مصدر‬

‫‪.‬الرمز السداسي المكون من ‪ 3‬أرقام هو اختصار لبعض الرموز السداسية المكونة من ‪ 6‬أرقام‬
‫‪:‬يحتوي الرمز السداسي المكون من ‪ 3‬أرقام على النموذج التالي‬

‫‪CSS‬‬ ‫‪11‬‬
 ‫‪#rgb‬‬
‫حيث تمثل‬ ‫‪b‬و ‪g‬و ‪r‬‬ ‫و‬ ‫‪0‬‬ ‫‪ f .‬المكونات الحمراء والخضراء والزرقاء بقيم تتراوح بين‬
‫لا يمكن استخدام الرمز السداسي المكون من ‪ 3‬أرقام إلا عندما تكون القيم‬ ‫)‪BB‬و ‪GG‬و ‪(RR‬‬ ‫هي نفسها لكل مكون‪ .‬لذا‪ ،‬إذا كان لدينا‬ ‫‪#ff00cc‬‬ ‫‪،‬‬
‫‪: #f0c .‬فيمكن كتابته على النحو التالي‬
‫‪:‬هنا مثال‬

‫{ ‪body‬‬
‫‪background-color: #fc9; /* same as #ffcc99 */‬‬
‫}‬

‫{ ‪h1‬‬
‫‪color: #f0f; /* same as #ff00ff */‬‬
‫}‬

‫{ ‪p‬‬
‫‪color: #b58; /* same as #bb5588 */‬‬
‫}‬

‫‪CSS HSL Colors‬‬

‫يرمز‬ ‫‪HSL‬‬ ‫‪.‬إلى اللون والتشبع والخفة‬

‫‪HSL Value‬‬

‫في‬ ‫‪CSS‬‬ ‫‪:‬في النموذج )‪ (HSL‬يمكن تحديد اللون باستخدام الصبغة والتشبع والخفة ‪،‬‬

‫‪HSL‬‬ ‫)درجة اللون والتشبع والخفة(‬

‫‪Hue‬‬ ‫أزرق‬ ‫‪240‬‬ ‫أخضر‪،‬‬ ‫‪120‬‬ ‫إلى ‪ 0 . 360‬أحمر‪،‬‬ ‫‪0‬‬ ‫‪.‬هي درجة على عجلة الألوان من‬
‫يعني الظل الرمادي‪ ،‬و‪ %100‬هو اللون الكامل‬ ‫‪%0‬‬ ‫‪.‬التشبع هو قيمة مئوية‪.‬‬

‫أبيض‬ ‫‪%100‬‬ ‫ليس فاتًح ا أو داكًن ا‪،‬‬ ‫‪%50‬‬ ‫أسود‪،‬‬ ‫‪%0‬‬ ‫الخفة هي أيضا نسبة مئوية‪.‬‬
‫قم بالتجربة عن طريق خلط قيم‬ ‫‪HSL‬‬ ‫‪:‬أدناه‬

‫‪CSS Backgrounds‬‬

‫ُت ستخدم خصائص الخلفية في‬ ‫‪CSS‬‬ ‫‪.‬لإضافة تأثيرات الخلفية للعناصر‬

‫‪CSS‬‬ ‫‪12‬‬
 ‫‪CSS background-color‬‬
‫‪.‬تحدد خاصية لون الخلفية لون خلفية العنصر‬

‫{ ‪body‬‬
‫;‪background-color: lightblue‬‬
‫}‬

‫‪Opacity / Transparency‬‬

‫إلى ‪ . 1.0‬كلما كانت القيمة أقل‪ ،‬كلما كانت أكثر شفافية‬ ‫‪0.0‬‬ ‫‪:‬تحدد خاصية العتامة عتامة‪/‬شفافية العنصر‪ .‬يمكن أن تأخذ قيمة من‬

‫{ ‪div‬‬
‫;‪background-color: green‬‬
‫;‪opacity: 0.3‬‬
‫}‬

‫‪CSS Background Image‬‬

‫‪CSS Background Image‬‬

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

‫{ ‪p‬‬
‫;)"‪background-image: url("paper.gif‬‬
‫}‬

‫‪CSS‬‬ ‫‪13‬‬
 body{
background-image: url("photo.jpg");
}

CSS Background Image Repeat

CSS Background Image Repeat

‫ تقوم خاصية صورة الخلفية بتكرار الصورة أفقًي ا وعمودًي ا‬،‫افتراضًي ا‬.

‫ هكذا‬،‫ وإلا ستبدو غريبة‬،‫بعض الصور يجب أن تتكرر أفقيًا أو رأسيًا فقط‬:

body {
background-image: url("gradient_bg.png");
}

‫إذا تم تكرار الصورة أعاله أفقًي ا فقط‬ (background-repeat: repeat-x;) ، ‫فستبدو الخلفية أفضل‬:

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

‫ قم بضبطها‬،‫ لتكرار صورة عمودًي ا‬:‫تلميح‬

background-repeat: repeat-y;

CSS background-repeat: no-repeat

‫يتم أيًض ا تحديد عرض صورة الخلفية مرة واحدة فقط بواسطة‬
background-repeat

‫إظهار صورة الخلفية مرة واحدة فقط‬:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

CSS background-position

The background-position ‫يتم استخدام الخاصية لتحديد موضع صورة الخلفية‬.

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;

CSS 14
 background-position: right top;
}

left top center top right top

left center center center right center

left bottom center bottom rigth bottom

CSS Background Attachment

CSS background-attachment

)‫ما إذا كان يجب تمرير صورة الخلفية أو تثبيتها (لن يتم التمرير مع بقية الصفحة‬ ‫الخلفية المرفقة‬ ‫تحدد خاصية‬:
‫حدد أن صورة الخلفية يجب أن تكون ثابتة‬:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

‫حدد أن صورة الخلفية يجب أن تنتقل مع بقية الصفحة‬:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}

Property Values
Value Description

scroll ‫ هذا هو الافتراضي‬.‫سيتم تمرير صورة الخلفية مع الصفحة‬

fixed ‫لن يتم تمرير صورة الخلفية مع الصفحة‬

local ‫سيتم تمرير صورة الخلفية مع محتويات العنصر‬

initial ‫يضبط هذه الخاصية على قيمتها الافتراضية‬

inherit ‫يرث هذه الخاصية من العنصر الأصلي الخاص بها‬.

CSS background-origin Property

CSS background-origin Property

‫دع صورة الخلفية تبدأ من الزاوية اليسرى العليا للمحتوى‬:

CSS 15
 ‫{ ‪#example1‬‬
‫;‪border: 10px dashed black‬‬
‫;‪padding: 25px‬‬
‫;)‪background: url(paper.gif‬‬
‫;‪background-repeat: no-repeat‬‬
‫;‪background-origin: content-box‬‬
‫}‬

‫التعريف والاستخدام‬
‫‪.‬تحدد خاصية الخلفية الأصل الموضع الأصلي (منطقة تحديد موضع الخلفية) لصورة الخلفية‬

‫‪Property Values‬‬
‫‪Value‬‬ ‫‪Description‬‬

‫‪padding-box‬‬ ‫القيمة الافتراضية‪ .‬تبدأ صورة الخلفية من الزاوية اليسرى العليا لحافة الحشو‬

‫‪border-box‬‬ ‫تبدأ صورة الخلفية من الزاوية اليسرى العليا من الحدود‬

‫‪content-box‬‬ ‫تبدأ صورة الخلفية من الزاوية اليسرى العليا للمحتوى‬

‫‪initial‬‬ ‫‪.‬يضبط هذه الخاصية على قيمتها الافتراضية‬

‫‪inherit‬‬ ‫‪.‬يرث هذه الخاصية من العنصر الأصلي الخاص بها‬

‫‪CSS background-clip Property‬‬

‫‪CSS background-clip Property‬‬
‫‪:‬حدد المدى الذي يجب أن تمتد به الخلفية داخل العنصر‬

‫{ ‪div‬‬
‫;‪border: 10px dotted black‬‬
‫;‪padding: 15px‬‬
‫;‪background: lightblue‬‬
‫;‪background-clip: padding-box‬‬
‫}‬

‫التعريف والاستخدام‬
‫الصورة ) داخل العنصر‬ ‫اللون أو‬ ‫‪.‬تحدد خاصية مقطع الخلفية المدى الذي يجب أن تمتد به الخلفية (‬

‫‪Property Values‬‬
‫‪Value‬‬ ‫‪Description‬‬

‫‪padding-box‬‬ ‫القيمة الافتراضية‪ .‬تبدأ صورة الخلفية من الزاوية اليسرى العليا لحافة الحشو‬

‫‪border-box‬‬ ‫تبدأ صورة الخلفية من الزاوية اليسرى العليا من الحدود‬

‫‪content-box‬‬ ‫تبدأ صورة الخلفية من الزاوية اليسرى العليا للمحتوى‬

‫‪initial‬‬ ‫‪.‬يضبط هذه الخاصية على قيمتها الافتراضية‬

‫‪inherit‬‬ ‫‪.‬يرث هذه الخاصية من العنصر الأصلي الخاص بها‬

‫‪CSS background-size Property‬‬

‫‪CSS‬‬ ‫‪16‬‬
 ‫‪CSS background-size Property‬‬

‫‪:‬حدد حجم صورة الخلفية باستخدام "تلقائي" وبالبكسل‬

‫{ ‪#example1‬‬
‫;)‪background: url(mountain.jpg‬‬
‫;‪background-repeat: no-repeat‬‬
‫;‪background-size: auto‬‬
‫}‬

‫{ ‪#example2‬‬
‫;)‪background: url(mountain.jpg‬‬
‫;‪background-repeat: no-repeat‬‬
‫;‪background-size: 300px 100px‬‬
‫}‬

‫التعريف والاستخدام‬

‫‪.‬تحدد خاصية حجم الخلفية حجم صور الخلفية‬

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

‫‪CSS Borders‬‬

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

‫‪CSS Border Style‬‬

‫تحدد الخاصية‬ ‫‪border-style‬‬ ‫‪.‬نوع الحدود التي سيتم عرضها‬

‫‪:‬القيم التالية مسموح بها‬

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

‫‪dashed‬‬ ‫يحدد الحدود المتقطعة ‪-‬‬

‫‪solid‬‬ ‫يحدد الحدود الصلبة ‪-‬‬

‫‪double‬‬ ‫يحدد الحدود المزدوجة ‪-‬‬

‫‪groove‬‬ ‫يحدد حدوًد ا محززة ثالثية الأبعاد‪ .‬يعتمد التأثير على قيمة لون الحدود ‪-‬‬

‫‪ridge‬‬ ‫يحدد حدوًد ا ثالثية الأبعاد‪ .‬يعتمد التأثير على قيمة لون الحدود ‪-‬‬

‫‪inset‬‬ ‫يحدد الحدود الداخلية ثالثية الأبعاد‪ .‬يعتمد التأثير على قيمة لون الحدود ‪-‬‬

‫‪outset‬‬ ‫يحدد حدود البداية ثالثية الأبعاد‪ .‬يعتمد التأثير على قيمة لون الحدود ‪-‬‬

‫‪none‬‬ ‫لا يحدد أي حدود ‪-‬‬

‫‪hidden‬‬ ‫يحدد الحدود المخفية ‪-‬‬

‫‪The border-style‬‬
‫‪.‬يمكن أن تحتوي الخاصية على قيمة واحدة إلى أربع قيم (للحد العلوي‪ ،‬والحد الأيمن‪ ،‬والحد السفلي‪ ،‬والحد الأيسر)‬

‫‪:‬عرض لأنماط الحدود المختلفة‬

‫};‪p.dotted {border-style: dotted‬‬

‫};‪p.dashed {border-style: dashed‬‬
‫};‪p.solid {border-style: solid‬‬
‫};‪p.double {border-style: double‬‬
‫};‪p.groove {border-style: groove‬‬
‫};‪p.ridge {border-style: ridge‬‬
‫};‪p.inset {border-style: inset‬‬
‫};‪p.outset {border-style: outset‬‬
‫};‪p.none {border-style: none‬‬
‫};‪p.hidden {border-style: hidden‬‬
‫};‪p.mix {border-style: dotted dashed solid double‬‬

‫‪CSS Border Width‬‬

‫‪CSS Border Width‬‬

‫‪The‬‬ ‫‪border-width‬‬

‫‪.‬تحدد الخاصية عرض الحدود الأربعة‬

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

‫‪:‬عرض عرض الحدود المختلفة‬

‫{ ‪p.one‬‬
‫;‪border-style: solid‬‬
‫;‪border-width: 5px‬‬
‫}‬

‫{ ‪p.two‬‬
‫;‪border-style: solid‬‬
‫;‪border-width: medium‬‬
‫}‬

‫‪CSS‬‬ ‫‪18‬‬
 p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

Specific Side Widths

The border-width

)‫ والحد الأيسر‬،‫ والحد السفلي‬،‫ والحد الأيمن‬،‫يمكن أن تحتوي الخاصية على قيمة واحدة إلى أربع قيم (للحد العلوي‬:

p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

Property Values
Value Description

medium ‫ هذا هو الافتراضي‬.‫يحدد حًد ا متوسًط ا‬

thin ‫يحدد حدوًد ا رفيعة‬

thick ‫يحدد حدوًد ا سميكة‬

length ‫يسمح لك بتحديد سمك الحدود‬.

initial ‫يضبط هذه الخاصية على قيمتها الافتراضية‬.

inherit ‫يرث هذه الخاصية من العنصر الأصلي الخاص بها‬.

CSS 19
 CSS Border Color
CSS Border Color
The border-color ‫يتم استخدام الخاصية لتعيين لون الحدود الأربعة‬
‫يمكن ضبط اللون عن طريق‬:
‫ مثل "أحمر‬،‫ حدد اسم اللون‬- ‫"الاسم‬

HEX - ‫حدد قيمة‬ HEX ، ‫" مثل‬#ff0000"

RGB - ‫حدد قيمة‬ RGB ، ‫" مثل‬rgb(255,0,0)"

HSL- ‫حدد قيمة‬ HSL ، ‫" مثل‬hsl(0, 100%, 50%)"

‫شفاف‬
border-color

‫ فإنه يرث لون العنصر‬،‫لم يتم تعيينه‬.

‫عرض لألوان الحدود المختلفة‬:

p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}

Specific Side Colors

border-color ) ‫ والحد الأيسر‬، ‫السفلي‬ ‫ والحد‬، ‫الأيمن‬ ‫ والحد‬، ‫العلوي‬ ‫يمكن أن تحتوي الخاصية على قيمة واحدة إلى أربع قيم (للحد‬.

p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right,
blue bottom and yellow left

CSS 20
 CSS Border Sides
CSS Border - Individual Sides
‫ رأيت أنه من الممكن تحديد حدود مختلفة لكل جانب‬،‫من الأمثلة الواردة في الصفحات السابقة‬.
‫في‬ CSS ، )‫ ويسار‬،‫ أسفل‬،‫ يمين‬،‫هناك أيًض ا خصائص لتحديد كل حد من الحدود (أعلى‬:

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

‫المثال أعاله يعطي نفس النتيجة كما يلي‬:

p {
border-style: dotted solid;
}

If the border-style property has four values:

border-style: dotted soild double dashed ;

top border is dotted

right border is solid

bottom border is double

left border is dashed

If the border-style property has three values:

border-style: dotted solid double ;

top border is dotted

right and left borders are solid

bottom border is double

If the border-style property has two values:

border-style: dotted solid ;

top and bottom borders are dotted

right and left borders are solid

If the border-style property has one value:

border-style: dotted ;

all four borders are dotted

/* Four values */
p {
border-style: dotted solid double dashed;
}

CSS 21
 /* Three values */
p {
border-style: dotted solid double;
}

/* Two values */
p {
border-style: dotted solid;
}

/* One value */
p {
border-style: dotted;
}

CSS Border - Shorthand Property

CSS Border - Shorthand Property

‫ هناك العديد من الخصائص التي يجب مراعاتها عند التعامل مع الحدود‬،‫كما رأيت في الصفحة السابقة‬.
‫ من الممكن أيًض ا تحديد كافة خصائص الحدود الفردية في خاصية واحدة‬،‫لتقصير الكود‬.
‫الخاصية‬ border ‫هي خاصية مختصرة لخصائص الحدود الفردية التالية‬:

border-width

border-style (required)

border-color

p {
border: 5px solid red;
}
p {
border-left: 6px solid red;
}
p {
border-bottom: 6px solid red;
}

‫ جميع خصائص حدود‬CSS

‫وصف العقار‬

border ‫يضبط كل خصائص الحدود في إعالن واحد‬

border-bottom ‫يضبط كافة خصائص الحدود السفلية في إعالن واحد‬

border-bottom-color ‫يضبط لون الحد السفلي‬

border-bottom-style ‫يعين نمط الحد السفلي‬

border-bottom-width ‫يضبط عرض الحد السفلي‬

border-color ‫يضبط لون الحدود الأربعة‬

CSS 22
 ‫‪border-left‬‬ ‫يضبط كافة خصائص الحدود اليسرى في إعالن واحد‬

‫‪border-left-color‬‬ ‫يضبط لون الحد الأيسر‬

‫‪border-left-style‬‬ ‫يعين نمط الحد الأيسر‬

‫‪border-left-width‬‬ ‫يضبط عرض الحد الأيسر‬

‫‪border-radius‬‬ ‫الأربعة للزوايا المستديرة ‪ border-*-radius‬يضبط جميع خصائص‬

‫‪border-right‬‬ ‫يضبط كل خصائص الحدود الصحيحة في إعالن واحد‬

‫‪border-right-color‬‬ ‫يضبط لون الحد الأيمن‬

‫‪border-right-style‬‬ ‫يعين نمط الحدود اليمنى‬

‫‪border-right-width‬‬ ‫يضبط عرض الحد الأيمن‬

‫‪border-style‬‬ ‫يعين نمط الحدود الأربعة‬

‫‪border-top‬‬ ‫يضبط كافة خصائص الحدود العليا في إعالن واحد‬

‫‪border-top-color‬‬ ‫يضبط لون الحد العلوي‬

‫‪border-top-style‬‬ ‫يعين نمط الحد العلوي‬

‫‪border-top-width‬‬ ‫يضبط عرض الحد العلوي‬

‫‪border-width‬‬ ‫يضبط عرض الحدود الأربعة‬

‫‪CSS Margins‬‬

‫‪ُ.‬ت ستخدم الهوامش لإنشاء مساحة حول العناصر‪ ،‬خارج أي حدود محددة‬

‫‪CSS Margins‬‬

‫ُت ستخدم خصائص‬ ‫‪Margins CSS‬‬ ‫‪.‬لإنشاء مساحة حول العناصر‪ ،‬خارج أي حدود محددة‬

‫مع‬ ‫‪CSS‬‬ ‫‪.‬لديك السيطرة الكاملة على الهوامش‪ .‬هناك خصائص لتحديد الهامش لكل جانب من عناصر العنصر (أعلى‪ ،‬يمين‪ ،‬أسفل‪ ،‬ويسار) ‪،‬‬

‫الجوانب الفردية ‪Margins -‬‬

‫‪:‬على خصائص لتحديد الهامش لكل جانب من العنصر ‪ CSS‬يحتوي‬

‫‪margin-top‬‬

‫‪margin-right‬‬

‫‪margin-bottom‬‬

‫‪CSS‬‬ ‫‪23‬‬
 ‫‪margin-left‬‬

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

‫يقوم المتصفح بحساب الهامش ‪auto-‬‬

‫‪.‬وما إلى ذلك ‪cm‬و ‪pt‬و ‪ px‬يحدد هامًش ا في ‪length -‬‬
‫يحدد هامًش ا بنسبة ‪ %‬من عرض العنصر المحتوي ‪% -‬‬
‫يحدد أن الهامش يجب أن يكون وراثة من العنصر الأصلي ‪inherit-‬‬

‫‪The auto Value‬‬

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

‫‪The inherit Value‬‬

‫يتيح هذا المثال وراثة الهامش الأيسر للعنصر‬ ‫>"‪<p class="ex1‬‬ ‫‪ ( <div> ):‬من العنصر الأصلي‬

‫‪All CSS Margin Properties‬‬

‫‪Property‬‬ ‫‪Description‬‬

‫‪margin‬‬ ‫خاصية مختصرة لتعيين كافة خصائص الهامش في إعالن واحد‬

‫‪margin-bottom‬‬ ‫لتعيين الهامش السفلي للعنصر‬

‫‪margin-left‬‬ ‫لتعيين الهامش الأيسر للعنصر‬

‫‪margin-right‬‬ ‫لتعيين الهامش الأيمن للعنصر‬

‫‪margin-top‬‬ ‫لتعيين الهامش العلوي للعنصر‬

‫‪CSS Margin Collapse‬‬

‫‪.‬في بعض الأحيان ينهار هامشان في هامش واحد‬

‫‪Margin‬‬ ‫‪Collapse‬‬
‫‪.‬يتم أحياًن ا طي الهوامش العلوية والسفلية للعناصر في هامش واحد يساوي أكبر الهامشين‬
‫!هذا لا يحدث على الهوامش اليسرى واليمنى! الهوامش العلوية والسفلية فقط‬
‫‪:‬ننظر إلى المثال التالي‬

‫{ ‪h1‬‬
‫;‪margin: 0 0 50px 0‬‬
‫}‬

‫{ ‪h2‬‬
‫;‪margin: 20px 0 0 0‬‬
‫}‬

‫‪CSS‬‬ ‫‪24‬‬
 ‫‪CSS Padding‬‬

‫يتم استخدام‬ ‫‪padding‬‬ ‫‪.‬لإنشاء مساحة حول محتوى العنصر‪ ،‬داخل أي حدود محددة‬

‫‪CSS Padding‬‬

‫ُت ستخدم خصائص‬ ‫‪padding‬‬ ‫في‬ ‫‪CSS‬‬ ‫‪.‬لإنشاء مساحة حول محتوى العنصر‪ ،‬داخل أي حدود محددة‬
‫مع‬ ‫‪CSS‬‬ ‫‪ ،‬ويسار ) ‪،‬‬ ‫أسفل‬ ‫‪،‬‬ ‫يمين‬ ‫‪،‬‬ ‫أعلى‬ ‫‪.‬لديك السيطرة الكاملة على الحشو‪ .‬هناك خصائص لتعيين الحشو لكل جانب من العنصر (‬

‫‪Padding - Individual Sides‬‬

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

‫‪padding-top‬‬

‫‪padding-right‬‬

‫‪padding-bottom‬‬

‫‪padding-left‬‬

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

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

‫يقوم المتصفح بحساب الهامش ‪auto-‬‬

‫‪.‬وما إلى ذلك ‪cm‬و ‪pt‬و ‪ px‬يحدد هامًش ا في ‪length -‬‬
‫يحدد هامًش ا بنسبة ‪ %‬من عرض العنصر المحتوي ‪% -‬‬
‫يحدد أن الهامش يجب أن يكون وراثة من العنصر الأصلي ‪inherit-‬‬

‫‪CSS Height, Width and Max-width‬‬

‫‪The CSS‬‬ ‫‪height‬‬ ‫‪and‬‬ ‫‪width‬‬ ‫‪ُ.‬ت ستخدم الخصائص لتعيين ارتفاع وعرض العنصر‬
‫‪The CSS‬‬ ‫‪max-width‬‬ ‫‪ُ.‬ت ستخدم الخاصية لتعيين الحد الأقصى لعرض العنصر‬

‫‪CSS‬‬ ‫‪25‬‬
 ‫‪CSS Setting height and width‬‬

‫يتم استخدام خصائص‬ ‫‪height‬‬ ‫والعرض لتعيين ارتفاع‬ ‫‪width‬‬ ‫‪.‬العنصر‬

‫لا تتضمن خصائص الارتفاع والعرض الحشو أو الحدود أو الهوامش‪ .‬يقوم بتعيين ارتفاع‪/‬عرض المنطقة داخل الحشوة والحدود والهامش‬
‫‪.‬للعنصر‬

‫‪CSS height and width Values‬‬

‫‪:‬قد تحتوي الخصائص على القيم التالية ‪The height and width‬‬

‫يقوم المتصفح بحساب الهامش ‪auto-‬‬

‫‪.‬وما إلى ذلك ‪cm‬و ‪pt‬و ‪ px‬يحدد هامًش ا في ‪length -‬‬
‫يحدد هامًش ا بنسبة ‪ %‬من عرض العنصر المحتوي ‪% -‬‬
‫يحدد أن الهامش يجب أن يكون وراثة من العنصر الأصلي ‪inherit-‬‬

‫‪Setting max-width‬‬

‫وما إلى ذلك‪ ،‬أو بالنسبة المئوية (‪ )%‬للكتلة التي تحتوي عليها‪ ،‬أو تعيينها على ‪cm‬و ‪ px‬يمكن تحديدها بقيم الطول‪ ،‬مثل ‪The max-width‬‬
‫‪.‬لا شيء (هذا هو الإعداد الافتراضي‪ .‬ويعني أنه لا يوجد حد أقصى للعرض)‬

‫بكسل)‪ .‬يقوم المتصفح بعد ذلك بإضافة شريط تمرير >‪ <div‬تحدث مشكلة‬ ‫‪500‬‬ ‫أعاله عندما تكون نافذة المتصفح أصغر من عرض العنصر (‬
‫‪.‬أفقي إلى الصفحة‬

‫‪max-width‬‬ ‫‪.‬بدلًا من ذلك‪ ،‬في هذه الحالة‪ ،‬سيتم تحسين معالجة المتصفح للنوافذ الصغيرة‬

‫‪All CSS Dimension Properties‬‬

‫‪Property‬‬ ‫‪Description‬‬

‫‪height‬‬ ‫يضبط ارتفاع العنصر‬

‫‪max-height‬‬ ‫يضبط الحد الأقصى لارتفاع العنصر‬

‫‪max-width‬‬ ‫يضبط الحد الأقصى لعرض العنصر‬

‫‪min-height‬‬ ‫يضبط الحد الأدنى لارتفاع العنصر‬

‫‪min-width‬‬ ‫يحدد الحد الأدنى لعرض العنصر‬

‫‪width‬‬ ‫يضبط عرض العنصر‬

‫‪CSS‬‬ ‫‪26‬‬
 ‫‪CSS Box Model‬‬

‫يمكن اعتبار كافة عناصر‬ ‫‪HTML‬‬ ‫‪.‬كمربعات‬

‫‪The CSS Box Model‬‬

‫في‬ ‫‪CSS‬‬ ‫‪.‬يتم استخدام مصطلح "نموذج الصندوق" عند الحديث عن التصميم والتخطيط ‪،‬‬

‫هو في الأساس مربع يلتف حول كل عنصر ‪ CSS‬نموذج مربع‬ ‫‪HTML‬‬ ‫ويتكون من‪ :‬المحتوى والحشو والحدود والهوامش‪ .‬الصورة أدناه توضح ‪.‬‬
‫‪:‬نموذج الصندوق‬

‫‪:‬شرح الأجزاء المختلفة‬

‫محتوى المربع حيث تظهر النصوص والصور ‪Content -‬‬

‫يمسح منطقة حول المحتوى‪ .‬الحشوة شفافة ‪Padding -‬‬

‫حد يدور حول الحشو والمحتوى ‪Border -‬‬

‫مسح منطقة خارج الحدود‪ .‬الهامش هو شفاف ‪Margin -‬‬

‫‪:‬هنا هو الحساب‬

‫‪:‬يجب حساب العرض الإجمالي للعنصر على النحو التالي‬

‫إجمالي عرض العنصر = العرض ‪ +‬الحشو الأيسر ‪ +‬الحشو الأيمن ‪ +‬الحد الأيسر ‪ +‬الحد الأيمن‬

‫‪CSS‬‬ ‫‪27‬‬
 ‫‪:‬يجب حساب الارتفاع الإجمالي للعنصر على النحو التالي‬
‫إجمالي ارتفاع العنصر = الارتفاع ‪ +‬الحشو العلوي ‪ +‬الحشو السفلي ‪ +‬الحد العلوي ‪ +‬الحد السفلي‬

‫‪CSS Outline‬‬

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

‫‪CSS Outline‬‬
‫مميًز ا‬ ‫‪".‬المخطط التفصيلي هو خط يتم رسمه حول العناصر‪ ،‬خارج الحدود‪ ،‬لجعل العنصر "‬

‫يحتوي‬ ‫‪CSS‬‬ ‫‪:‬على خصائص المخطط التفصيلي التالية‬

‫‪outline-style‬‬

‫‪outline-color‬‬

‫‪outline-width‬‬

‫‪outline-offset‬‬

‫‪outline‬‬

‫‪CSS Outline Style‬‬

‫‪The‬‬ ‫‪outline-style‬‬ ‫‪:‬تحدد الخاصية نمط المخطط التفصيلي‪ ،‬ويمكن أن تحتوي على إحدى القيم التالية‬

‫‪:‬القيم التالية مسموح بها‬

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

‫‪dashed‬‬ ‫يحدد الحدود المتقطعة ‪-‬‬

‫‪solid‬‬ ‫يحدد الحدود الصلبة ‪-‬‬

‫‪double‬‬ ‫يحدد الحدود المزدوجة ‪-‬‬

‫‪groove‬‬ ‫يحدد حدوًد ا محززة ثالثية الأبعاد‪ .‬يعتمد التأثير على قيمة لون الحدود ‪-‬‬

‫‪ridge‬‬ ‫يحدد حدوًد ا ثالثية الأبعاد‪ .‬يعتمد التأثير على قيمة لون الحدود ‪-‬‬

‫‪inset‬‬ ‫يحدد الحدود الداخلية ثالثية الأبعاد‪ .‬يعتمد التأثير على قيمة لون الحدود ‪-‬‬

‫‪outset‬‬ ‫يحدد حدود البداية ثالثية الأبعاد‪ .‬يعتمد التأثير على قيمة لون الحدود ‪-‬‬

‫‪none‬‬ ‫لا يحدد أي حدود ‪-‬‬

‫‪hidden‬‬ ‫يحدد الحدود المخفية ‪-‬‬

‫‪CSS Outline Width‬‬

‫‪:‬تحدد الخاصية عرض المخطط التفصيلي‪ ،‬ويمكن أن تحتوي على إحدى القيم التالية ‪outline-width‬‬

‫‪Property Values‬‬
‫‪Value‬‬ ‫‪Description‬‬

‫‪medium‬‬ ‫يحدد حًد ا متوسًط ا‪ .‬هذا هو الافتراضي‬

‫‪thin‬‬ ‫يحدد حدوًد ا رفيعة‬

‫‪thick‬‬ ‫يحدد حدوًد ا سميكة‬

‫‪length‬‬ ‫‪.‬يسمح لك بتحديد سمك الحدود‬

‫‪initial‬‬ ‫‪.‬يضبط هذه الخاصية على قيمتها الافتراضية‬

‫‪inherit‬‬ ‫‪.‬يرث هذه الخاصية من العنصر الأصلي الخاص بها‬

‫{ ‪p.ex1‬‬
‫;‪border: 1px solid black‬‬
‫;‪outline-style: solid‬‬
‫;‪outline-color: red‬‬
‫;‪outline-width: thin‬‬
‫}‬

‫{ ‪p.ex2‬‬
‫;‪border: 1px solid black‬‬
‫;‪outline-style: solid‬‬
‫;‪outline-color: red‬‬
‫;‪outline-width: medium‬‬
‫}‬

‫‪CSS Outline Color‬‬

‫‪CSS Outline Color‬‬

‫‪.‬يتم استخدام خاصية لون المخطط التفصيلي لتعيين لون المخطط التفصيلي‬

‫‪CSS‬‬ ‫‪29‬‬
 p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}

CSS Outline Shorthand

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

‫خاصية المخطط التفصيلي هي خاصية مختصرة لتعيين خصائص المخطط التفصيلي الفردية التالية‬:

CSS Outline Offset

CSS Outline Offset

The outline-offset ‫ المسافة بين العنصر ومخططه الخارجي شفافة‬.‫حدود العنصر‬/‫تضيف الخاصية مسافة بين المخطط التفصيلي وحافة‬.
‫ بكسل خارج حافة الحدود‬15 ‫يحدد المثال التالي مخطًط ا تفصيلًي ا بحجم‬:

p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

‫يوضح المثال التالي أن المسافة بين العنصر ومخططه الخارجي شفافة‬:

p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

CSS 30
 ‫‪All CSS Outline Properties‬‬
‫‪Property‬‬ ‫‪Description‬‬

‫خاصية مختصرة لتعيين عرض المخطط التفصيلي ونمط المخطط التفصيلي و‬

‫‪outline‬‬
‫لون المخطط التفصيلي في إعالن واحد‬

‫‪outline-color‬‬ ‫يضبط لون المخطط التفصيلي‬

‫‪outline-offset‬‬ ‫يحدد المسافة بين المخطط التفصيلي وحافة أو حدود العنصر‬

‫‪outline-style‬‬ ‫يضبط نمط المخطط التفصيلي‬

‫‪outline-width‬‬ ‫يضبط عرض المخطط التفصيلي‬

‫‪CSS Text‬‬
‫‪.‬على الكثير من الخصائص لتنسيق النص ‪ CSS‬يحتوي‬

‫‪Text Color‬‬
‫‪:‬يتم استخدام خاصية اللون لتعيين لون النص‪ .‬يتم تحديد اللون بواسطة‬

‫{ ‪body‬‬
‫;‪color: blue‬‬
‫}‬

‫{ ‪h1‬‬
‫;‪color: green‬‬
‫}‬

‫‪Text Color and Background Color‬‬

‫‪:‬في هذا المثال‪ ،‬نحدد كًال من خاصية لون الخلفية وخاصية اللون‬

‫{ ‪body‬‬
‫;‪background-color: lightgrey‬‬
‫;‪color: blue‬‬
‫}‬

‫{ ‪h1‬‬
‫;‪background-color: black‬‬

‫‪CSS‬‬ ‫‪31‬‬
 ‫;‪color: white‬‬
‫}‬

‫{ ‪div‬‬
‫;‪background-color: blue‬‬
‫;‪color: white‬‬
‫}‬

‫‪CSS Text Alignment‬‬

‫‪Text Alignment and Text Direction‬‬

‫‪:‬ستتعرف في هذا الفصل على الخصائص التالية‬

‫‪text-align‬‬

‫‪text-align-last‬‬

‫‪direction‬‬

‫‪unicode-bidi‬‬

‫‪vertical-align‬‬

‫‪Text Alignment‬‬
‫‪.‬يتم استخدام خاصية محاذاة النص لضبط المحاذاة الأفقية للنص‬
‫‪.‬يمكن محاذاة النص إلى اليسار أو اليمين أو توسيطه أو ضبطه‬
‫يوضح المثال التالي محاذاة للوسط‪ ،‬ومحاذاة لليسار ولليمين (تكون المحاذاة لليسار افتراضية إذا كان اتجاه النص من اليسار إلى اليمين‪،‬‬
‫‪:‬وتكون المحاذاة لليمين افتراضية إذا كان اتجاه النص من اليمين إلى اليسار)‬

‫{ ‪h1‬‬
‫;‪text-align: center‬‬
‫}‬

‫{ ‪h2‬‬
‫;‪text-align: left‬‬
‫}‬

‫{ ‪h3‬‬
‫;‪text-align: right‬‬
‫}‬

‫تم ضبط الخاصية على "ضبط"‪ ،‬ويتم تمديد كل سطر بحيث يكون لكل سطر عرض متساٍو ‪ ،‬وتكون الهوامش اليمنى واليسرى‬
‫‪text-align‬‬

‫‪:‬مستقيمة (كما هو الحال في المجالت والصحف)‬

‫{ ‪div‬‬
‫;‪text-align: justify‬‬
‫}‬

‫‪Text Align Last‬‬

‫‪CSS‬‬ ‫‪32‬‬
 text-align-last ‫تحدد الخاصية كيفية محاذاة السطر الأخير من النص‬.

‫< محاذاة السطر الأخير من النص في ثالثة‬p>

p.a {
text-align-last: right;
}

p.b {
text-align-last: center;
}

p.c {
text-align-last: justify;
}

Text Direction
direction and unicode-bidi ‫يمكن استخدام الخصائص لتغيير اتجاه النص لعنصر ما‬:

p {
direction: rtl;
unicode-bidi: bidi-override;
}

Vertical Alignment
vertical-align ‫تحدد الخاصية المحاذاة الرأسية للعنصر‬.

‫ضبط المحاذاة العمودية للصورة في النص‬:

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}

CSS 33
 CSS Text Decoration

Text Decoration
‫ستتعرف في هذا الفصل على الخصائص التالية‬:

text-decoration-line

text-decoration-color

text-decoration-style

text-decoration-thickness

text-decoration

Add a Decoration Line to Text

text-decoration-line

‫ُت ستخدم الخاصية لإضافة سطر زخرفة إلى النص‬.

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

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

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p {
text-decoration-line: overline underline;
}

Specify a Color for the Decoration Line

text-decoration-color ‫ُت ستخدم الخاصية لتعيين لون خط الزخرفة‬.

h1 {
text-decoration-line: overline;
text-decoration-color: red;
}

h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}

h3 {

CSS 34
 text-decoration-line: underline;
text-decoration-color: green;
}

p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}

Specify a Style for the Decoration Line

text-decoration-style ‫يتم استخدام الخاصية لضبط نمط خط الزخرفة‬.

h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}

h2 {
text-decoration-line: underline;
text-decoration-style: double;
}

h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}

p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}

p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}

p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}

Specify the Thickness for the Decoration Line

text-decoration-thickness ‫يتم استخدام الخاصية لضبط سمك خط الزخرفة‬.

h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}

CSS 35
 h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}

h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}

p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}

The Shorthand Property

text-decoration ‫الخاصية هي خاصية مختصرة لـ‬:

text-decoration-line (required)

text-decoration-color (optional)

text-decoration-style (optional)

text-decoration-thickness (optional)

h1 {
text-decoration: underline;
}

h2 {
text-decoration: underline red;
}

h3 {
text-decoration: underline red double;
}

p {
text-decoration: underline red double 5px;
}

A Small Tip
‫ يتم وضع خط تحت كافة الروابط في‬HTML ‫ لا شيء؛‬:‫ زخرفة النص‬.‫ في بعض الأحيان ترى أن الروابط مصممة بدون تسطير‬.‫بشكل افتراضي‬
‫ مثل هذا‬،‫يستخدم لإزالة التسطير من الروابط‬:

a {
text-decoration: none;
}

CSS 36
 CSS Text Transformation

Text Transformation

text-transform ‫ُت ستخدم الخاصية لتحديد الأحرف الكبيرة والصغيرة في النص‬.

‫ أو تكبير الحرف الأول من كل كلمة‬،‫ويمكن استخدامه لتحويل كل شيء إلى أحرف كبيرة أو صغيرة‬:

p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

CSS Text Spacing

Text Spacing
‫ستتعرف في هذا الفصل على الخصائص التالية‬:

text-indent

letter-spacing

line-height

word-spacing

white-space

Text Indentation
text-indent ‫ُت ستخدم الخاصية لتحديد المسافة البادئة للسطر الأول من النص‬:

p {
text-indent: 50px;
}

Letter Spacing

letter-spacing ‫ُت ستخدم الخاصية لتحديد المسافة بين الأحرف في النص‬.

‫أ‬ ‫أ‬
CSS 37
 ‫‪:‬يوضح المثال التالي كيفية زيادة أو تقليل المسافة بين الأحرف‬

‫{ ‪h1‬‬
‫;‪letter-spacing: 5px‬‬
‫}‬

‫{ ‪h2‬‬
‫;‪letter-spacing: -2px‬‬
‫}‬

‫‪Line Height‬‬
‫‪line-height‬‬ ‫‪ُ:‬ت ستخدم الخاصية لتحديد المسافة بين الأسطر‬

‫{ ‪p.small‬‬
‫;‪line-height: 0.8‬‬
‫}‬

‫{ ‪p.big‬‬
‫;‪line-height: 1.8‬‬
‫}‬

‫‪Word Spacing‬‬

‫‪word-spacing‬‬ ‫‪ُ.‬ت ستخدم الخاصية لتحديد المسافة بين الكلمات في النص‬

‫‪:‬يوضح المثال التالي كيفية زيادة المسافة بين الكلمات أو تقليلها‬

‫{ ‪p.one‬‬
‫;‪word-spacing: 10px‬‬
‫}‬

‫{ ‪p.two‬‬
‫;‪word-spacing: -2px‬‬
‫}‬

‫‪White Space‬‬
‫‪white-space‬‬ ‫‪.‬تحدد الخاصية كيفية التعامل مع المسافة البيضاء داخل العنصر‬
‫‪:‬يوضح هذا المثال كيفية تعطيل التفاف النص داخل عنصر‬

‫{ ‪p‬‬
‫;‪white-space: nowrap‬‬
‫}‬

‫‪CSS‬‬ ‫‪38‬‬
 CSS Text Shadow
Text Shadow
text-shadow ‫الخاصية تضيف الظل إلى النص‬.
)‫ بكسل‬2( ‫ بكسل) والظل الرأسي‬2( ‫ يمكنك فقط تحديد الظل الأفقي‬،‫في أبسط استخدام‬:

h1 {
text-shadow: 2px 2px;
}

‫ أضف اللون (الأحمر) إلى الظل‬،‫بعد ذلك‬:

h1 {
text-shadow: 2px 2px red;
}

‫ بكسل) إلى الظل‬5( ‫ثم أضف تأثير التمويه‬:

h1 {
text-shadow: 2px 2px 5px red;
}

More Text Shadow Examples

h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

h1 {
text-shadow: 0 0 3px #ff0000;
}

h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

CSS 39
 ‫‪CSS Fonts‬‬
‫!من المهم اختيار الخط المناسب لموقعك الإلكتروني‬

‫‪Font Selection is Important‬‬

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

‫‪Generic Font Families‬‬

‫يوجد في‬ ‫‪CSS‬‬ ‫‪:‬خمس عائالت خطوط عامة‬

‫تحتوي الخطوط‬ ‫‪Serif‬‬ ‫‪.‬على حد صغير عند حواف كل حرف‪ .‬أنها تخلق شعورا بالشكليات والأناقة‬
‫تحتوي خطوط‬
‫‪Sans-serif‬‬ ‫‪.‬على خطوط نظيفة (لا توجد حدود صغيرة مرفقة)‪ .‬أنها تخلق نظرة حديثة وأضيق الحدود‬
‫خطوط‬
‫‪Monospace‬‬ ‫‪.‬هنا جميع الحروف لها نفس العرض الثابت‪ .‬أنها تخلق نظرة ميكانيكية ‪-‬‬
‫‪.‬الخطوط المخطوطة تحاكي الكتابة اليدوية البشرية‬
‫‪.‬الخطوط الخيالية هي خطوط زخرفية‪/‬مرحة‬

‫‪.‬تنتمي جميع أسماء الخطوط المختلفة إلى إحدى عائالت الخطوط العامة‬

‫الفرق بين الخطوط‬ ‫‪Serif‬‬ ‫و‬ ‫‪Sans-serif‬‬

‫‪Some Font Examples:‬‬

‫‪CSS‬‬ ‫‪40‬‬
 ‫‪The CSS font-family Property‬‬

‫في‬ ‫‪CSS‬‬ ‫‪.‬نستخدم خاصية عائلة الخطوط لتحديد خط النص ‪،‬‬

‫‪font-family‬‬ ‫يجب أن تحتوي الخاصية على عدة أسماء خطوط كنظام "احتياطي"‪ ،‬لضمان أقصى قدر من التوافق بين المتصفحات‪/‬أنظمة‬
‫التشغيل‪ .‬ابدأ بالخط الذي تريده‪ ،‬وانتهي بعائلة عامة (للسماح للمتصفح باختيار خط مماثل في العائلة العامة‪ ،‬في حالة عدم توفر خطوط‬
‫أخرى)‪ .‬يجب فصل أسماء الخطوط بفاصلة‪ .‬اقرأ المزيد عن الخطوط الاحتياطية في‬

‫‪:‬حدد بعض الخطوط المختلفة لثالث فقرات‬

‫{ ‪.p1‬‬
‫;‪font-family: "Times New Roman", Times, serif‬‬
‫}‬

‫{ ‪.p2‬‬
‫;‪font-family: Arial, Helvetica, sans-serif‬‬
‫}‬

‫{ ‪.p3‬‬
‫;‪font-family: "Lucida Console", "Courier New", monospace‬‬
‫}‬

‫‪CSS Web Safe Fonts:‬‬

‫?‪What are Web Safe Fonts‬‬

‫‪.‬خطوط الويب الآمنة هي خطوط مثبتة عالمًي ا عبر جميع المتصفحات والأجهزة‬

‫‪CSS‬‬ ‫‪41‬‬
 ‫‪Fallback Fonts‬‬
‫‪.‬ومع ذلك‪ ،‬لا توجد خطوط آمنة تماًم ا للويب بنسبة ‪ . %100‬هناك دائًم ا احتمال عدم العثور على الخط أو عدم تثبيته بشكل صحيح‬
‫‪.‬لذلك‪ ،‬من المهم جًد ا استخدام الخطوط الاحتياطية دائًم ا‬
‫هذا يعني أنه يجب عليك إضافة قائمة "بالخطوط الاحتياطية" المشابهة في خاصية عائلة الخطوط‪ .‬إذا لم يعمل الخط الأول‪ ،‬فسيقوم‬
‫‪.‬المتصفح بتجربة الخط التالي‪ ،‬ثم الخط التالي‪ ،‬وهكذا‪ .‬قم دائًم ا بإنهاء القائمة باسم عائلة الخطوط العامة‬

‫مثال‬
‫‪:‬يوجد هنا ثالثة أنواع من الخطوط‬ ‫‪Tahoma‬‬ ‫الخطان الثاني والثالث هما نسخ احتياطية‪ ،‬في حالة عدم العثور على ‪ sans-serif.‬و ‪ Verdana‬و‬
‫‪.‬الخط الأول‬

‫{ ‪p‬‬
‫;‪font-family: Tahoma, Verdana, sans-serif‬‬
‫}‬

‫‪Best Web Safe Fonts for HTML and CSS‬‬

‫)‪Arial (sans-serif‬‬

‫)‪Verdana (sans-serif‬‬

‫)‪Tahoma (sans-serif‬‬

‫)‪Trebuchet MS (sans-serif‬‬

‫)‪Times New Roman (serif‬‬

‫)‪Georgia (serif‬‬

‫)‪Garamond (serif‬‬

‫)‪Courier New (monospace‬‬

‫)‪Brush Script MT (cursive‬‬

‫‪CSS Font Fallbacks‬‬

‫الخطوط الاحتياطية شائعة الاستخدام‬

‫‪Serif‬‬

‫‪Sans-serif‬‬

‫‪Monospace‬‬

‫‪Cursive‬‬

‫‪Fantasy‬‬

‫‪CSS Font Style‬‬

‫‪.‬يتم استخدام خاصية نمط الخط في الغالب لتحديد النص المائل‬

‫‪:‬هذه الخاصية لها ثالث قيم‬

‫يظهر النص بشكل طبيعي ‪normal -‬‬

‫يظهر النص بخط مائل ‪italic -‬‬
‫"النص "يميل ‪oblique -‬‬

‫‪CSS‬‬ ‫‪42‬‬
 p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

Font Weight

font-weight ‫تحدد الخاصية وزن الخط‬:

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

Font Variant

font-variant ‫تحدد الخاصية ما إذا كان يجب عرض النص بخط صغير الحجم أم لا‬.
‫ تظهر الأحرف الكبيرة المحولة بحجم خط أصغر من الأحرف‬،‫ ومع ذلك‬.‫ يتم تحويل كافة الأحرف الصغيرة إلى أحرف كبيرة‬،‫في الخط الصغير‬
‫الكبيرة الأصلية في النص‬.

p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}

CSS Font Size

Font Size
font-size ‫الخاصية تحدد حجم النص‬.

CSS 43
 ‫تعد القدرة على إدارة حجم النص أمًر ا مهًم ا في تصميم الويب‪ .‬ومع ذلك‪ ،‬يجب ألا تستخدم تعديالت حجم الخط لجعل الفقرات تبدو مثل‬
‫‪.‬العناوين‪ ،‬أو العناوين تبدو مثل الفقرات‬
‫استخدم دائًم ا عالمات‬ ‫‪HTML‬‬ ‫المناسبة‪ ،‬مثل‬ ‫>‪<h1> - <h6‬‬ ‫‪.‬للفقرات >‪<p‬للعناوين و‬
‫‪.‬يمكن أن تكون قيمة حجم الخط حجًم ا مطلًق ا أو نسبًي ا‬
‫‪:‬الحجم المطلق‬

‫يضبط النص على حجم محدد‬

‫لا يسمح للمستخدم بتغيير حجم النص في جميع المتصفحات (سيء لأسباب تتعلق بإمكانية الوصول)‬
‫يكون الحجم المطلق مفيًد ا عندما يكون الحجم الفعلي لإلخراج معروًف ا‬

‫‪:‬الحجم النسبي‬

‫يضبط الحجم بالنسبة للعناصر المحيطة‬

‫يسمح للمستخدم بتغيير حجم النص في المتصفحات‬

‫‪Set Font Size With Pixels‬‬

‫{ ‪h1‬‬
‫;‪font-size: 40px‬‬
‫}‬

‫{ ‪h2‬‬
‫;‪font-size: 30px‬‬
‫}‬

‫{ ‪p‬‬
‫;‪font-size: 14px‬‬
‫}‬

‫‪Set Font Size With Em‬‬

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

‫{ ‪h1‬‬
‫‪font-size: 2.5em; /* 40px/16=2.5em */‬‬
‫}‬

‫{ ‪h2‬‬
‫‪font-size: 1.875em; /* 30px/16=1.875em */‬‬
‫}‬

‫{ ‪p‬‬
‫‪font-size: 0.875em; /* 14px/16=0.875em */‬‬
‫}‬

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

‫‪CSS‬‬ ‫‪44‬‬
 ‫{ ‪body‬‬
‫;‪font-size: 100%‬‬
‫}‬

‫{ ‪h1‬‬
‫;‪font-size: 2.5em‬‬
‫}‬

‫{ ‪h2‬‬
‫;‪font-size: 1.875em‬‬
‫}‬

‫{ ‪p‬‬
‫;‪font-size: 0.875em‬‬
‫}‬

‫‪Responsive Font Size‬‬

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

‫>‪<h1 style="font-size:10vw">Hello World</h1‬‬

‫‪CSS Google Fonts‬‬

‫‪Google Fonts‬‬

‫إذا كنت لا تريد استخدام أي من الخطوط القياسية في‬ ‫‪HTML‬‬ ‫‪ Google.‬فيمكنك استخدام خطوط ‪،‬‬
‫خطوط‬ ‫‪Google‬‬ ‫‪ 1000‬خط لالختيار من بينها‬ ‫‪.‬مجانية الاستخدام‪ ،‬ولديها أكثر من‬

‫‪How To Use Google Fonts‬‬

‫ما عليك سوى إضافة رابط ورقة أنماط خاص في قسم‬ ‫>‪<head‬‬ ‫ثم الرجوع إلى الخط في‬ ‫‪CSS‬‬ ‫‪.‬‬

‫‪CSS‬‬ ‫‪45‬‬
 EX.
Here, we want to use a font named "Sofia" from Google Fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>

Here, we want to use a font named "Trirong" from Google Fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>

Use Multiple Google Fonts

‫لاستخدام خطوط‬ Google ‫ كما يلي‬،)|( ‫ ما عليك سوى فصل أسماء الخطوط باستخدام حرف الأنبوب‬،‫متعددة‬:

Request multiple fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family
=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

Enabling Font Effects

‫قامت‬ Google ‫أيًض ا بتمكين تأثيرات الخطوط المختلفة التي يمكنك استخدامها‬.
‫قم أولًا بإضافة‬ Effect=effectname ‫إلى‬ Google API ، ‫ يبدأ اسم الفئة‬.‫ثم قم بإضافة اسم فئة خاصة إلى العنصر الذي سيستخدم التأثير الخاص‬
‫ دائًم ا بـ‬Font-effect- ‫وينتهي باسم‬ Effectname .

Add the fire effect to the "Sofia" font:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=
Sofia&effect=fire">

CSS 46
 ‫>‪<style‬‬
‫{ ‪body‬‬
‫;‪font-family: "Sofia", sans-serif‬‬
‫;‪font-size: 30px‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫>‪<h1 class="font-effect-fire">Sofia on Fire</h1‬‬

‫>‪</body‬‬

‫‪CSS Great Font Pairings‬‬

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

‫تكملة ‪1.‬‬

‫‪.‬من الآمن دائًم ا العثور على أزواج الخطوط التي تكمل بعضها البعض‬
‫‪.‬يجب أن تكون مجموعة الخطوط الرائعة متناغمة‪ ،‬دون أن تكون متشابهة أو مختلفة جًد ا‬
‫استخدم عائالت الخطوط الفائقة ‪2.‬‬
‫عائلة الخطوط الفائقة هي مجموعة من الخطوط المصممة للعمل بشكل جيد م ًع ا‪ .‬لذلك‪ ،‬يعد استخدام خطوط مختلفة ضمن نفس العائلة‬
‫‪.‬أمًر ا آمًن ا‬
‫على سبيل المثال‪ ،‬تحتوي عائلة‬ ‫‪Lucida‬‬ ‫‪:‬الفائقة على الخطوط التالية‬ ‫‪Lucida Sans‬‬ ‫‪ Lucida‬و‬ ‫‪Serif‬‬ ‫‪Lucida Typewriter Sans‬و‬ ‫‪ Lucida‬و‬
‫‪Typewriter Serif‬‬‫‪ Lucida‬و‬ ‫‪Math‬‬ ‫‪.‬‬
‫التباين هو الملك ‪3.‬‬
‫‪.‬غالًب ا ما يتعارض الخطان المتشابهان جًد ا‪ .‬ومع ذلك‪ ،‬فإن التباينات‪ ،‬إذا تمت بالطريقة الصحيحة‪ ،‬تبرز الأفضل في كل خط‬
‫مثال‪ :‬الجمع بين‬ ‫‪serif‬‬ ‫‪ sans‬و‬ ‫‪serif‬‬ ‫‪.‬هو مزيج معروف‬

‫تتضمن العائلة الفائقة القوية كال من أشكال‬ ‫‪serif‬‬ ‫‪ sans‬و‬ ‫‪serif‬‬ ‫مثل( لنفس الخط‬ ‫‪Lucida‬‬ ‫‪ Lucida‬و‬ ‫‪Sans‬‬ ‫‪).‬‬
‫اختر رئيًس ا واحًد ا فقط ‪4.‬‬
‫يجب أن يكون خط واحد هو الرئيس‪ .‬يؤدي هذا إلى إنشاء تسلسل هرمي للخطوط الموجودة على صفحتك‪ .‬يمكن تحقيق ذلك من خالل تغيير‬
‫‪.‬الحجم والوزن واللون‬

‫‪No doubt "Georgia" is the boss here:‬‬

‫{ ‪body‬‬
‫;‪background-color: black‬‬
‫;‪font-family: Verdana, sans-serif‬‬
‫;‪font-size: 16px‬‬
‫;‪color: gray‬‬
‫}‬

‫{ ‪h1‬‬
‫;‪font-family: Georgia, serif‬‬
‫;‪font-size: 60px‬‬
‫;‪color: white‬‬
‫}‬

‫‪CSS‬‬ ‫‪47‬‬
 ‫‪CSS Font Property‬‬
‫‪The CSS Font Property‬‬

‫‪.‬لتقصير الكود‪ ،‬من الممكن أيًض ا تحديد كافة خصائص الخط الفردية في خاصية واحدة‬
‫‪:‬خاصية الخط هي خاصية مختصرة لـ‬

‫‪font-style‬‬

‫‪font-variant‬‬

‫‪font-weight‬‬

‫‪font-size/line-height‬‬

‫‪font-family‬‬

‫‪Example‬‬
‫‪Use‬‬ ‫‪font‬‬ ‫‪to set several font properties in one declaration:‬‬

‫{ ‪p.a‬‬
‫;‪font: 20px Arial, sans-serif‬‬
‫}‬

‫{ ‪p.b‬‬
‫;‪font: italic small-caps bold 12px/30px Georgia, serif‬‬
‫}‬

‫‪CSS Links‬‬
‫باستخدام‬ ‫‪CSS‬‬ ‫‪.‬يمكن تصميم الروابط بعدة طرق مختلفة ‪،‬‬

‫‪Styling Links‬‬
‫يمكن تصميم الروابط باستخدام أي خاصية‬ ‫‪CSS‬‬ ‫‪color‬‬ ‫‪,‬‬ ‫‪font-family‬‬ ‫‪,‬‬ ‫‪background‬‬ ‫‪, etc.‬‬

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

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

‫‪a:link‬‬ ‫رابط عادي لم تتم زيارته ‪-‬‬

‫‪a:visited‬‬ ‫الرابط الذي زاره المستخدم ‪-‬‬

‫‪a:hover‬‬ ‫رابط عندما يقوم المستخدم بتمرير الماوس فوقه ‪-‬‬

‫‪CSS‬‬ ‫‪48‬‬
 a:active - ‫الرابط لحظة النقر عليه‬

/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */

a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

Text Decoration
text-decoration ‫ُت ستخدم الخاصية في الغالب لإزالة التسطير من الروابط‬:

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

Background Color
background-color ‫يمكن استخدام الخاصية لتحديد لون خلفية الروابط‬:

a:link {
background-color: yellow;
}

CSS 49
 a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}

Link Buttons
‫يوضح هذا المثال مثاًل ا أكثر تقدًم ا حيث نقوم بدمج العديد من خصائص‬ CSS ‫أزرار‬/‫لعرض الروابط كمربعات‬:

a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}

CSS Lists

HTML Lists and CSS List Properties

‫في‬ HTML ، ‫هناك نوعان رئيسيان من القوائم‬:

‫<( القوائم غير المرتبة‬ul>) - ‫يتم تمييز عناصر القائمة بالرصاص‬

CSS 50
 ‫يتم تمييز عناصر القائمة بأرقام أو أحرف ‪ (<ol>) -‬القوائم المرتبة‬

‫تسمح لك خصائص قائمة‬ ‫‪CSS‬‬ ‫‪:‬بما يلي‬

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

‫قم بتعيين عالمات مختلفة لعناصر القائمة للقوائم غير المرتبة‬
‫قم بتعيين صورة كعالمة لعنصر القائمة‬
‫إضافة ألوان الخلفية إلى القوائم وعناصر القائمة‬

‫‪Different List Item Markers‬‬

‫‪list-style-type‬‬ ‫‪.‬تحدد الخاصية نوع عالمة عنصر القائمة‬

‫{ ‪ul.a‬‬
‫;‪list-style-type: circle‬‬
‫}‬

‫{ ‪ul.b‬‬
‫;‪list-style-type: square‬‬
‫}‬

‫{ ‪ol.c‬‬
‫;‪list-style-type: upper-roman‬‬
‫}‬

‫{ ‪ol.d‬‬
‫;‪list-style-type: lower-alpha‬‬
‫}‬

‫‪An Image as The List Item Marker‬‬

‫‪list-style-image‬‬ ‫‪:‬تحدد الخاصية صورة كعالمة لعنصر القائمة‬

‫{ ‪ul‬‬
‫;)'‪list-style-image: url('sqpurple.gif‬‬
‫}‬

‫‪Position The List Item Markers‬‬

‫‪list-style-position‬‬ ‫‪.‬تحدد الخاصية موضع عالمات عناصر القائمة (النقاط النقطية)‬
‫موضع نمط القائمة‪ :‬بالخارج؛" يعني أن النقاط النقطية ستكون خارج عنصر القائمة‪ .‬سيتم محاذاة بداية كل سطر من عنصر القائمة عمودًي ا‪".‬‬
‫‪:‬هذا هو الافتراضي‬

‫‪CSS‬‬ ‫‪51‬‬
 ‫موضع نمط القائمة‪ :‬بالخارج؛" يعني أن النقاط النقطية ستكون خارج عنصر القائمة‪ .‬سيتم محاذاة بداية كل سطر من عنصر القائمة عمودًي ا‪".‬‬
‫‪:‬هذا هو الافتراضي‬

‫{ ‪ul.a‬‬
‫;‪list-style-position: outside‬‬
‫}‬

‫{ ‪ul.b‬‬
‫;‪list-style-position: inside‬‬
‫}‬

‫‪Remove Default Settings‬‬

‫يمكن أيًض ا استخدام الخاصية لإزالة العالمات‪/‬التعداد النقطي‪ .‬لاحظ أن القائمة تحتوي أيًض ا على هامش ومساحة‬
‫‪list-style-type:none‬‬

‫‪ <ol> :‬أو >‪ <ul‬افتراضية‪ .‬لإزالة هذا‪ ،‬أضف الهامش‪ 0:‬والحشوة‪ 0:‬إلى‬

‫{ ‪ul‬‬
‫;‪list-style-type: none‬‬
‫;‪margin: 0‬‬
‫;‪padding: 0‬‬
‫}‬

‫‪List - Shorthand property‬‬

‫‪list-style‬‬ ‫‪:‬الخاصية هي خاصية مختصرة‪ .‬يتم استخدامه لتعيين جميع خصائص القائمة في إعالن واحد‬

‫{ ‪ul‬‬
‫;)"‪list-style: square inside url("sqpurple.gif‬‬
‫}‬

‫‪EX.‬‬
‫{ ‪ol‬‬
‫;‪background: #ff9999‬‬
‫;‪padding: 20px‬‬
‫}‬

‫{ ‪ul‬‬
‫;‪background: #3399ff‬‬
‫;‪padding: 20px‬‬
‫}‬

‫‪CSS‬‬ ‫‪52‬‬
 ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}

CSS Tables
Table Borders

‫لتحديد حدود الجدول في‬ CSS ، ‫استخدم خاصية الحدود‬.

‫يحدد المثال أدناه حًد ا مصمًت ا لعناصر‬ <table> ‫< و‬th> ‫< و‬td> :

table, th, td {
border: 1px solid;
}

Full-Width Table
‫ أضف‬،)‫ إذا كنت بحاجة إلى جدول يمتد على الشاشة بأكملها (بعرض كامل‬.‫قد يبدو الجدول أعاله صغيًر ا في بعض الحالات‬ width: 100% ‫إلى‬
‫عنصر‬ <table> :

CSS 53
 ‫{ ‪table‬‬
‫;‪width: 100%‬‬
‫}‬

‫‪Collapse Table Borders‬‬

‫تحدد الخاصية‬ ‫‪border-collapse‬‬ ‫‪:‬ما إذا كان يجب طي حدود الجدول في حد واحد أم لا‬

‫{ ‪table‬‬
‫;‪border-collapse: collapse‬‬
‫}‬

‫إذا كنت تريد حدوًد ا حول الجدول فقط‪ ،‬فحدد فقط خاصية الحدود لـ‬ ‫>‪<table‬‬ ‫‪:‬‬

‫{ ‪table‬‬
‫;‪border: 1px solid‬‬
‫}‬

‫‪CSS Table Size‬‬

‫‪Table Width and Height‬‬
‫‪.‬يتم تحديد عرض وارتفاع الجدول من خالل خصائص العرض والارتفاع‬
‫‪ ،‬وارتفاع العناصر‬ ‫‪%100‬‬ ‫المثال التالي يضبط عرض الجدول على‬ ‫>‪<th‬‬ ‫بكسل‬ ‫‪70‬‬ ‫على‬

‫{ ‪table‬‬
‫;‪width: 100%‬‬

‫‪CSS‬‬ ‫‪54‬‬
 ‫}‬

‫{ ‪th‬‬
‫;‪height: 70px‬‬
‫}‬

‫لإنشاء جدول يمتد لنصف الصفحة فقط‪ ،‬استخدم‬ ‫‪width: 50%‬‬ ‫‪:‬‬

‫{ ‪table‬‬
‫;‪width: 50%‬‬
‫}‬

‫‪CSS Table Alignment‬‬

‫‪Horizontal Alignment‬‬
‫تقوم خاصية محاذاة النص بتعيين المحاذاة الأفقية (مثل اليسار أو اليمين أو الوسط) للمحتوى في‬ ‫>‪<th‬‬ ‫أو‬ ‫>‪<td‬‬ ‫‪.‬‬
‫افتراضًي ا‪ ،‬يكون محتوى العناصر‬ ‫>‪<th‬‬ ‫محاذاة إلى المنتصف ويكون محتوى العناصر‬ ‫>‪<td‬‬ ‫‪.‬محاذاة إلى اليسار‬
‫لمحاذاة محتوى عناصر‬ ‫>‪<td‬‬ ‫إلى المنتصف أيًض ا‪ ،‬استخدم‬ ‫‪text-align: center‬‬ ‫‪:‬‬

‫{ ‪td‬‬
‫;‪text-align: center‬‬
‫}‬

‫إلى اليسار >‪ <th‬لمحاذاة المحتوى إلى اليسار‪ ،‬افرض محاذاة العناصر‬ ‫‪text-align: left‬‬

‫{ ‪th‬‬
‫;‪text-align: left‬‬
‫}‬

‫‪Vertical Alignment‬‬
‫‪vertical-align‬‬ ‫‪ (like‬الخاصية تحدد المحاذاة العمودية‬ ‫‪top‬‬ ‫‪,‬‬ ‫‪bottom‬‬ ‫‪, or‬‬ ‫‪middle‬‬ ‫)‬
‫للمحتوى الموجود في‬ ‫>‪<th‬‬ ‫أو‬ ‫>‪<td‬‬ ‫‪.‬‬
‫لكل من العنصرين( افتراضًي ا‪ ،‬تكون المحاذاة الرأسية للمحتوى في الجدول في المنتصف‬ ‫>‪<th‬‬ ‫‪ <td> ).‬و‬
‫يقوم المثال التالي بتعيين محاذاة النص الرأسي إلى الأسفل لعناصر‬ ‫>‪<td‬‬ ‫‪:‬‬

‫‪CSS‬‬ ‫‪55‬‬
 ‫{ ‪td‬‬
‫;‪height: 50px‬‬
‫;‪vertical-align: bottom‬‬
‫}‬

‫‪CSS Layout - The display Property‬‬

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

‫‪The display Property‬‬

‫‪display‬‬ ‫‪ُ.‬ت ستخدم الخاصية لتحديد كيفية ظهور العنصر على صفحة الويب‬
‫كل عنصر‬ ‫‪HTML‬‬ ‫له قيمة عرض افتراضية‪ ،‬اعتماًد ا على نوع العنصر‪ .‬قيمة العرض الافتراضية لمعظم العناصر هي‬ ‫‪block‬‬ ‫‪or‬‬ ‫‪inline‬‬ ‫‪.‬‬

‫‪display‬‬ ‫ُت ستخدم الخاصية لتغيير سلوك العرض الافتراضي لعناصر‬ ‫‪HTML‬‬ ‫‪.‬‬

‫‪Block-level Elements‬‬
‫‪block-level‬‬ ‫يبدأ العنصر دائًم ا في سطر جديد ويشغل العرض الكامل المتاح‬
‫يمتد إلى‬ ‫‪left and right‬‬ ‫بقدر ما يستطيع‬

‫‪EX . block-level‬‬
‫>‪<div‬‬

‫>‪<h1> - <h6‬‬

‫>‪<p‬‬

‫>‪<form‬‬

‫>‪<header‬‬

‫>‪<footer‬‬

‫>‪<section‬‬

‫‪Inline Elements‬‬

‫‪.‬لا يبدأ في سطر جديد ويشغل فقط القدر الالزم من العرض ‪Inline Elements‬‬

‫‪EX. Inline Elements‬‬

‫‪CSS‬‬ ‫‪56‬‬
 ‫>‪<span‬‬

‫>‪<a‬‬

‫>‪<img‬‬

‫‪The display Property Values‬‬

‫‪display‬‬ ‫‪:‬الملكية لها العديد من القيم‬

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

‫‪Override The Default Display Value‬‬

‫‪.‬كما ذكرنا سابًق ا‪ ،‬كل عنصر له قيمة عرض افتراضية‪ .‬ومع ذلك‪ ،‬يمكنك تجاوز هذا‬
‫‪.‬يمكن أن يكون تغيير عنصر مضمن إلى عنصر كتلة‪ ،‬أو العكس‪ ،‬مفيًد ا لجعل الصفحة تبدو بطريقة معينة‪ ،‬مع الاستمرار في اتباع معايير الويب‬
‫من الأمثلة الشائعة إنشاء عناصر‬ ‫>‪<li‬‬ ‫‪:‬مضّم نة للقوائم الأفقية‬

‫{ ‪li‬‬
‫;‪display: inline‬‬
‫}‬

‫يعرض المثال التالي عناصر‬ ‫>‪<span‬‬ ‫‪:‬كعناصر كتلة‬

‫{ ‪span‬‬
‫;‪display: block‬‬
‫}‬

‫يعرض المثال التالي عناصر‬ ‫>‪<a‬‬ ‫‪:‬كعناصر كتلة‬

‫{ ‪a‬‬
‫;‪display: block‬‬
‫}‬

‫‪CSS display Property‬‬

‫};‪p.ex1 {display: none‬‬
‫};‪p.ex2 {display: inline‬‬
‫};‪p.ex3 {display: block‬‬
‫};‪p.ex4 {display: inline-block‬‬

‫‪Value‬‬ ‫‪Description‬‬

‫‪inline‬‬ ‫يعرض عنصًر ا كعنصر مضّم ن‬

‫‪block‬‬ ‫يعرض عنصًر ا كعنصر كتلة‬

‫يجعل الحاوية تختفي‪ ،‬مما يجعل العناصر التابعة أبناء‬

‫‪contents‬‬
‫‪ DOM‬عنصر المستوى التالي في‬

‫‪CSS‬‬ ‫‪57‬‬
 ‫‪flex‬‬ ‫يعرض عنصًر ا كحاوية مرنة على مستوى الكتلة‬

‫‪grid‬‬ ‫يعرض عنصًر ا كحاوية شبكة على مستوى الكتلة‬

‫يعرض عنصًر ا كحاوية كتلة ذات مستوى مضّم ن‪ .‬يتم تنسيق العنصر نفسه كمضمنة‬
‫‪inline-block‬‬
‫عنصر‪ ،‬ولكن يمكنك تطبيق قيم الارتفاع والعرض‬

‫‪inline-flex‬‬ ‫يعرض عنصًر ا كحاوية مرنة ذات مستوى مضّم ن‬

‫‪inline-grid‬‬ ‫يعرض عنصًر ا كحاوية شبكة ذات مستوى مضّم ن‬

‫‪inline-table‬‬ ‫يتم عرض العنصر كجدول المستوى المضمن‬

‫‪list-item‬‬ ‫>‪ <li‬دع العنصر يتصرف كعنصر‬

‫‪run-in‬‬ ‫يعرض عنصًر ا إما على شكل كتلة أو سطرًي ا‪ ،‬اعتماًد ا على السياق‬

‫‪table‬‬ ‫>‪ <table‬دع العنصر يتصرف كعنصر‬

‫‪table-caption‬‬ ‫>‪ <caption‬دع العنصر يتصرف مثل عنصر‬

‫‪table-column-group‬‬ ‫>‪ <colgroup‬دع العنصر يتصرف مثل عنصر‬

‫‪table-header-group‬‬ ‫>‪ <thead‬دع العنصر يتصرف مثل عنصر‬

‫‪table-footer-group‬‬ ‫>‪ <tfoot‬دع العنصر يتصرف مثل عنصر‬

‫‪table-row-group‬‬ ‫>‪ <tbody‬دع العنصر يتصرف مثل عنصر‬

‫‪table-cell‬‬ ‫>‪ <td‬دع العنصر يتصرف كعنصر‬

‫‪table-column‬‬ ‫>‪ <col‬دع العنصر يتصرف مثل عنصر‬

‫‪table-row‬‬ ‫>‪ <tr‬دع العنصر يتصرف مثل عنصر‬

‫‪none‬‬ ‫تتم إزالة العنصر بالكامل‬

‫‪initial‬‬ ‫يضبط هذه الخاصية على قيمتها الافتراضية‬

‫‪inherit‬‬ ‫يرث هذه الخاصية من العنصر الأصلي الخاص بها‬

‫‪visibility‬‬

‫;‪visibility:hidden‬‬ ‫يخفي أيًض ا عنصًر ا‬

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

‫{ ‪h1.hidden‬‬
‫;‪visibility: hidden‬‬
‫}‬

‫;‪visibility: visible|hidden|collapse|initial|inherit‬‬

‫‪Property Values‬‬
‫‪Value‬‬ ‫‪Description‬‬

‫‪visible‬‬ ‫العنصر مرئي‪ .‬هذا هو الافتراضي‬

‫‪hidden‬‬ ‫العنصر غير مرئي‪ ،‬ولكنه لا يزال يؤثر على التخطيط‬

‫عند استخدامه في صف أو خلية في الجدول‪ ،‬يكون العنصر غير مرئي (مثل‬

‫‪collapse‬‬
‫"مخفي")‬

‫‪initial‬‬ ‫‪.‬يضبط هذه الخاصية على قيمتها الافتراضية‬

‫‪CSS‬‬ ‫‪58‬‬
 ‫‪inherit‬‬ ‫‪.‬يرث هذه الخاصية من العنصر الأصلي الخاص بها‬

‫‪CSS Layout - The position Property‬‬

‫‪position‬‬ ‫تحدد الخاصية نوع طريقة تحديد الموضع المستخدمة لعنصر ما‬
‫‪static, relative, fixed, absolute or sticky‬‬

‫‪The position Property‬‬

‫‪position‬‬ ‫‪.‬تحدد الخاصية نوع طريقة تحديد الموضع المستخدمة لعنصر ما‬

‫‪:‬مختلفة ‪ position‬هناك خمس قيم‬

‫‪static‬‬

‫‪relative‬‬

‫‪fixed‬‬

‫‪absolute‬‬

‫‪sticky‬‬

‫ثم يتم وضع العناصر باستخدام‬ ‫‪top‬‬ ‫‪,‬‬ ‫‪bottom‬‬ ‫‪,‬‬ ‫‪left‬‬ ‫‪, and‬‬ ‫‪right‬‬ ‫ملكيات‪ .‬ومع ذلك‪ ،‬فإن هذه الخصائص لن تعمل إلا إذا تم‬ ‫‪position‬‬ ‫يتم‬
‫تعيين الملكية أولا‪ .‬كما أنها تعمل بشكل مختلف اعتمادا على‬ ‫‪position value.‬‬

‫;‪position: static‬‬

‫يتم وضع عناصر‬ ‫‪HTML‬‬ ‫‪.‬بشكل ثابت بشكل افتراضي‬

‫لا تتأثر العناصر الموضوعة الثابتة بـ‬ ‫‪top, bottom, left, and right‬‬

‫عنصر ذو‬ ‫;‪position: static‬‬ ‫‪:‬لم يتم وضعه بأي طريقة خاصة؛ يتم وضعه دائًم ا وفًق ا للتدفق الطبيعي للصفحة‬

‫{ ‪div.static‬‬
‫;‪position: static‬‬
‫;‪border: 3px solid #73AD21‬‬
‫}‬

‫;‪position: relative‬‬

‫;‪position: relative‬‬ ‫‪.‬يتم وضعه بالنسبة إلى وضعه الطبيعي‬

‫‪top‬‬ ‫‪,‬‬ ‫‪right‬‬ ‫‪,‬‬ ‫‪bottom‬‬ ‫‪, and‬‬ ‫‪left‬‬ ‫ستؤدي خصائص العنصر ذي الموضع النسبي إلى تعديله بعيًد ا عن موضعه الطبيعي‪ .‬لن يتم تعديل‬
‫‪.‬المحتوى الآخر ليناسب أي فجوة يتركها العنصر‬

‫‪CSS‬‬ ‫‪59‬‬
 ‫{ ‪div.relative‬‬
‫;‪position: relative‬‬
‫;‪left: 30px‬‬
‫;‪border: 3px solid #73AD21‬‬
‫}‬

‫;‪position: fixed‬‬
‫;‪position: fixed‬‬ ‫يتم وضعه بالنسبة إلى إطار العرض‪ ،‬مما يعني أنه يظل دائًم ا في نفس المكان حتى إذا تم تمرير الصفحة‪ .‬ال‬ ‫‪top‬‬ ‫‪,‬‬
‫‪right‬‬ ‫‪,‬‬ ‫‪bottom‬‬ ‫‪, and‬‬ ‫‪left‬‬

‫‪.‬لا يترك العنصر الثابت فجوة في الصفحة في المكان الذي كان من المفترض أن يوجد فيه عادًة‬
‫لاحظ العنصر الثابت في الركن الأيمن السفلي من الصفحة‪ .‬هنا هو‬ ‫‪CSS‬‬ ‫‪:‬المستخدم‬

‫{ ‪div.fixed‬‬
‫;‪position: fixed‬‬
‫;‪bottom: 0‬‬
‫;‪right: 0‬‬
‫;‪width: 300px‬‬
‫;‪border: 3px solid #73AD21‬‬
‫}‬

‫;‪position: absolute‬‬
‫;‪position: absolute‬‬

‫‪.‬يتم وضعه بالنسبة إلى أقرب سلف متوضع (بدلًا من وضعه بالنسبة إلى إطار العرض‪ ،‬مثل الثابت)‬
‫‪.‬لكن؛ إذا كان العنصر ذو الموضع المطلق ليس له أسالف محددين‪ ،‬فإنه يستخدم نص المستند‪ ،‬ويتحرك مع تمرير الصفحة‬
‫‪.‬مالحظة‪ :‬تتم إزالة العناصر ذات الموضع المطلق من التدفق الطبيعي‪ ،‬ويمكن أن تتداخل مع العناصر‬

‫{ ‪div.relative‬‬
‫;‪position: relative‬‬
‫;‪width: 400px‬‬
‫;‪height: 200px‬‬
‫;‪border: 3px solid #73AD21‬‬
‫}‬

‫{ ‪div.absolute‬‬
‫;‪position: absolute‬‬
‫;‪top: 80px‬‬
‫;‪right: 0‬‬
‫;‪width: 200px‬‬
‫;‪height: 100px‬‬

‫‪CSS‬‬ ‫‪60‬‬
 ‫;‪border: 3px solid #73AD21‬‬
‫}‬

‫;‪position: sticky‬‬
‫;‪position: sticky‬‬ ‫يتم وضعه بناًء على موضع التمرير الخاص بالمستخدم‪.‬يتم تبديل العنصر اللزج‬
‫‪ relative and‬بين‬ ‫‪fixed‬‬

‫اعتمادا على موقف التمرير‪ .‬يتم وضعه بشكل نسبي حتى يتم استيفاء موضع إزاحة معين في إطار العرض ‪ -‬ثم "يلتصق" في مكانه‬

‫{ ‪div.sticky‬‬
‫‪position: -webkit-sticky; /* Safari */‬‬
‫;‪position: sticky‬‬
‫;‪top: 0‬‬
‫;‪background-color: green‬‬
‫;‪border: 2px solid #4CAF50‬‬
‫}‬

‫‪CSS Layout - The z-index Property‬‬

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

‫‪The z-index Property‬‬

‫‪.‬عندما يتم تحديد موضع العناصر‪ ،‬فإنها يمكن أن تتداخل مع عناصر أخرى‬
‫تحدد الخاصية‬ ‫‪z-index‬‬ ‫‪.‬ترتيب المكدس للعنصر (العنصر الذي يجب وضعه أمام العناصر الأخرى أو خلفها)‬
‫‪:‬يمكن أن يكون للعنصر ترتيب مكدس إيجابي أو سلبي‬

‫{ ‪img‬‬
‫;‪position: absolute‬‬
‫;‪left: 0px‬‬
‫;‪top: 0px‬‬
‫;‪z-index: -1‬‬
‫}‬

‫‪Another z-index Example‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{ ‪.container‬‬
‫;‪position: relative‬‬
‫}‬

‫‪CSS‬‬ ‫‪61‬‬
 .black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}

.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}

.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>

<div class="container">
<div class="black-box">Black box</div>
<div class="gray-box">Gray box</div>
<div class="green-box">Green box</div>
</div>

</body>
</html>

Without z-index
‫ فسيتم عرض‬،‫إذا تداخل عنصران متوضعان مع بعضهما البعض دون تحديد‬ z-index ‫العنصر المحدد الأخير في كود‬ HTML ‫في الأعلى‬.

<html>
<head>
<style>
.container {
position: relative;
}

.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;

CSS 62
 }

.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}

.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>

<div class="container">
<div class="black-box">Black box</div>
<div class="gray-box">Gray box</div>
<div class="green-box">Green box</div>
</div>

</body>
</html>

CSS Layout - Overflow

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

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

‫الخاصية‬ overflow ‫لديها القيم التالية‬:

visible

‫تقصير‬.
‫لم يتم قص الفائض‬.

‫يتم عرض المحتوى خارج مربع العنصر‬

hidden

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

scroll

CSS 63
 ‫يتم قص الفائض وإضافة شريط تمرير لرؤية بقية المحتوى‬

‫‪auto scroll‬‬

‫مشابه لـ‬

‫لكنه يضيف أشرطة التمرير فقط عند الضرورة ‪،‬‬

‫‪overflow: visible‬‬
‫بشكل افتراضي‪ ،‬التجاوز هو‬ ‫‪visible‬‬ ‫‪:‬مما يعني أنه لا يتم قصه ويتم عرضه خارج مربع العنصر ‪،‬‬

‫{ ‪div‬‬
‫;‪width: 200px‬‬
‫;‪height: 65px‬‬
‫;‪background-color: coral‬‬
‫;‪overflow: visible‬‬
‫}‬

‫‪overflow: hidden‬‬
‫باستخدام القيمة‬ ‫‪hidden‬‬ ‫‪:‬يتم قص الفائض‪ ،‬ويتم إخفاء باقي المحتوى ‪،‬‬

‫{ ‪div‬‬
‫;‪overflow: hidden‬‬
‫}‬

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

‫{ ‪div‬‬
‫;‪overflow: scroll‬‬
‫}‬

‫‪overflow: auto‬‬
‫القيمة‬ ‫‪auto‬‬ ‫مشابهة لـ‬ ‫‪scroll‬‬ ‫‪:‬ولكنها تضيف أشرطة التمرير فقط عند الضرورة ‪،‬‬

‫{ ‪div‬‬
‫;‪overflow: auto‬‬
‫}‬

‫‪overflow-x and overflow-y‬‬

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

‫‪overflow-x‬‬ ‫‪.‬يحدد ما يجب فعله بالحواف اليسرى‪/‬اليمنى للمحتوى‬

‫‪CSS‬‬ ‫‪64‬‬
 ‫‪overflow-y‬‬ ‫‪.‬يحدد ما يجب فعله بالحواف العلوية‪/‬السفلية للمحتوى‬

‫{ ‪div‬‬
‫‪overflow-x: hidden; /* Hide horizontal scrollbar */‬‬
‫‪overflow-y: scroll; /* Add vertical scrollbar */‬‬
‫}‬

‫‪CSS Layout - float and clear‬‬

‫‪ CSS‬تحدد خاصية‬ ‫‪float‬‬ ‫‪.‬كيفية تعويم العنصر‬

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

‫‪The float Property‬‬

‫يتم استخدام الخاصية‬ ‫‪float‬‬ ‫‪.‬لتحديد موضع المحتوى وتنسيقه‪ ،‬على سبيل المثال‪ ،‬دع الصورة تطفو يساًر ا إلى النص الموجود في الحاوية‬

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

‫‪left‬‬

‫يطفو العنصر على يسار الحاوية الخاصة به‬

‫‪right‬‬

‫يطفو العنصر على يمين الحاوية الخاصة به‬

‫‪none‬‬

‫‪.‬العنصر لا يطفو (سيتم عرضه في مكان ظهوره في النص)‬

‫هذا هو الافتراضي‬

‫‪inherit‬‬

‫يرث العنصر القيمة العائمة لأصله‬

‫‪،‬في أبسط استخدام لها‬ ‫‪float‬‬ ‫‪.‬يمكن استخدام الخاصية لالتفاف النص حول الصور‬

‫;‪Example - float: right‬‬

‫‪:‬يحدد المثال التالي أن الصورة يجب أن تطفو إلى اليمين في النص‬

‫‪CSS‬‬ ‫‪65‬‬
 ‫{ ‪img‬‬
‫;‪float: right‬‬
‫}‬

‫;‪Example - float: left‬‬

‫‪:‬يحدد المثال التالي أن الصورة يجب أن تطفو إلى اليسار في النص‬

‫{ ‪img‬‬
‫;‪float: left‬‬
‫}‬

‫‪Example - No float‬‬
‫في المثال التالي‪ ،‬سيتم عرض الصورة في مكان تواجدها في النص‬ ‫‪(float: none;):‬‬

‫{ ‪img‬‬
‫;‪float: none‬‬
‫}‬

‫‪Example - Float Next To Each Other‬‬

‫عادًة ما يتم عرض عناصر‬ ‫‪div‬‬ ‫فوق بعضها البعض‪ .‬ومع ذلك‪ ،‬إذا استخدمنا‬ ‫‪float: left‬‬ ‫‪:‬يمكننا ترك العناصر تطفو بجانب بعضها البعض‬

‫‪CSS‬‬ ‫‪66‬‬
 ‫{ ‪div‬‬
‫;‪float: left‬‬
‫;‪padding: 15px‬‬
‫}‬

‫{ ‪.div1‬‬
‫;‪background: red‬‬
‫}‬

‫{ ‪.div2‬‬
‫;‪background: yellow‬‬
‫}‬

‫{ ‪.div3‬‬
‫;‪background: green‬‬
‫}‬

‫‪CSS Layout - clear and clearfix‬‬

‫‪The clear Property‬‬

‫عندما نستخدم‬ ‫‪float‬‬ ‫الخاصية‪ ،‬ونريد العنصر التالي أدناه (وليس على اليمين أو اليسار)‪ ،‬سيتعين علينا استخدام الخاصية‬ ‫‪clear‬‬ ‫‪.‬‬

‫تحدد الخاصية‬ ‫‪clear‬‬ ‫‪.‬ما يجب أن يحدث للعنصر المجاور للعنصر العائم‬
‫يمكن أن تحتوي الخاصية‬ ‫‪clear‬‬ ‫‪:‬على إحدى القيم التالية‬

‫‪none‬‬

‫‪.‬لا يتم دفع العنصر أسفل العناصر العائمة اليسرى أو اليمنى‬

‫هذا هو الافتراضي‬

‫‪left‬‬

‫يتم دفع العنصر أسفل العناصر العائمة اليسرى‬

‫‪right‬‬

‫يتم دفع العنصر أسفل العناصر العائمة اليمنى‬

‫‪both‬‬

‫يتم دفع العنصر أسفل العناصر العائمة اليسرى واليمنى‬

‫‪inherit‬‬

‫يرث العنصر القيمة الواضحة من والده‬

‫عند مسح العوامات‪ ،‬يجب عليك مطابقة الوضوح مع العوامات‪ :‬إذا تم تعويم عنصر إلى اليسار‪ ،‬فيجب عليك مسحه إلى اليسار‪ .‬سيستمر العنصر‬
‫‪.‬العائم في الطفو‪ ،‬لكن العنصر الذي تم مسحه سيظهر أسفله على صفحة الويب‬

‫يقوم هذا المثال بمسح التعويم إلى اليسار‪ .‬هذا يعني أنه تم دفع العنصر‬ ‫>‪<div2‬‬ ‫أسفل العنصر‬ ‫>‪<div1‬‬ ‫العائم الأيسر‬

‫{ ‪div1‬‬
‫;‪float: left‬‬
‫}‬

‫{ ‪div2‬‬

‫‪CSS‬‬ ‫‪67‬‬
 ‫;‪clear: left‬‬
‫}‬

‫‪The clearfix Hack‬‬

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

‫{ ‪.clearfix‬‬
‫;‪overflow: auto‬‬
‫}‬

‫الواضح بشكل جيد طالما أنك قادر على التحكم في الهوامش والمساحة المتروكة (وإلا قد ترى أشرطة ‪ overflow: auto‬يعمل الإصالح‬
‫‪:‬الجديدة والحديثة أكثر أماًن ا‪ ،‬ويتم استخدام الكود التالي لمعظم صفحات الويب ‪ Clearfix‬التمرير)‪ .‬ومع ذلك‪ ،‬فإن استخدام أداة‬

‫{ ‪.clearfix::after‬‬
‫;"" ‪content:‬‬
‫;‪clear: both‬‬
‫;‪display: table‬‬
‫}‬

‫‪CSS Layout - Float Examples‬‬

‫‪.‬تحتوي هذه الصفحة على أمثلة تعويم شائعة‬

‫‪Grid of Boxes / Equal Width Boxes‬‬

‫باستخدام‬ ‫‪float‬‬ ‫‪:‬الخاصية‪ ،‬من السهل وضع مربعات المحتوى جنًب ا إلى جنب‬

‫‪CSS‬‬ ‫‪68‬‬
 * {
box-sizing: border-box;
}

.box {
float: left;
width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
padding: 50px; /* if you want space between the images */
}

Images Side By Side

‫يمكن أيًض ا استخدام شبكة المربعات لعرض الصور جنًب ا إلى جنب‬:

.img-container {
float: left;
width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
padding: 5px; /* if you want space between the images */
}

Equal Height Boxes

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

.box {
height: 500px;
}

CSS 69
 ‫ومع ذلك ‪ ،‬هذه ليست مرنة للغاية‪ .‬لا بأس إذا كان بإمكانك ضمان أن المربعات ستحتوي دائًم ا على نفس القدر من المحتوى بداخلها‪ .‬ولكن‬
‫في كثير من الأحيان‪ ،‬المحتوى ليس هو نفسه‪ .‬إذا قمت بتجربة المثال أعاله على الهاتف المحمول‪ ،‬فسوف ترى أنه سيتم عرض محتوى‬
‫مفيًد ا ‪ -‬حيث يمكنه تمديد المربعات تلقائًي ا لتصبح بطول المربع ‪ CSS3 Flexbox‬المربع الثاني خارج الصندوق‪ .‬هذا هو المكان الذي يكون فيه‬
‫‪:‬الأطول‬

‫‪All CSS Float Properties:‬‬

‫‪Property‬‬ ‫‪Description‬‬

‫‪box-sizing‬‬ ‫يحدد كيفية حساب عرض العنصر وارتفاعه‪ :‬هل يجب أن يتضمنا حشوة وحدود أم لا‬

‫‪clear‬‬ ‫يحدد ما يجب أن يحدث مع العنصر الموجود بجانب العنصر العائم‬

‫‪float‬‬ ‫يحدد ما إذا كان العنصر يجب أن يطفو إلى اليسار أو اليمين أو لا يطفو على الإطالق‬

‫‪overflow‬‬ ‫يحدد ما يحدث إذا تجاوز المحتوى مربع العنصر‬

‫‪overflow-x‬‬ ‫يحدد ما يجب فعله بالحواف اليسرى‪/‬اليمنى للمحتوى إذا تجاوز مساحة محتوى العنصر‬

‫‪overflow-y‬‬ ‫يحدد ما يجب فعله بالحواف العلوية‪/‬السفلية للمحتوى إذا تجاوز مساحة محتوى العنصر‬

‫‪CSS Layout - display: inline-block‬‬

‫‪The display: inline-block Value‬‬
‫بالمقارنة مع‬ ‫‪display: inline‬‬ ‫فإن الاختالف الرئيسي هو أنه ‪،‬‬ ‫‪display: inline-block‬‬ ‫‪.‬يسمح بتعيين العرض والارتفاع على العنصر‬
‫أيًض ا‪ ،‬مع‬ ‫‪display: inline-block‬‬ ‫يتم احترام الهوامش‪/‬الحشوات العلوية والسفلية‪ ،‬لكن ‪،‬‬ ‫‪display: inline‬‬ ‫‪.‬لا يتم ذلك‬

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

‫يوضح المثال التالي السلوك المختلف لـ و‬ ‫‪display: inline‬‬ ‫‪: display:‬‬ ‫‪inline-block display: block‬‬

‫{ ‪span.a‬‬
‫‪display: inline; /* the default for span */‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪padding: 5px‬‬
‫;‪border: 1px solid blue‬‬
‫;‪background-color: yellow‬‬
‫}‬

‫{ ‪span.b‬‬
‫;‪display: inline-block‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪padding: 5px‬‬
‫;‪border: 1px solid blue‬‬
‫;‪background-color: yellow‬‬
‫}‬

‫{ ‪span.c‬‬
‫;‪display: block‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪padding: 5px‬‬
‫;‪border: 1px solid blue‬‬

‫‪CSS‬‬ ‫‪70‬‬
 background-color: yellow;
}

Using inline-block to Create Navigation Links

‫أحد الاستخدامات الشائعة لـ‬ display: inline-block ‫ يقوم المثال التالي بإنشاء روابط تنقل‬.‫هو عرض عناصر القائمة أفقًي ا بدلًا من عمودًي ا‬
‫أفقية‬:

.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}

.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}

CSS Layout - Horizontal & Vertical Align

Center Align Elements

‫< مثل( لتوسيط عنصر كتلة أفقًي ا‬div>)، ‫ استخدم‬margin: auto;

‫سيؤدي ضبط عرض العنصر إلى منعه من التمدد إلى حواف الحاوية الخاصة به‬.

‫ وسيتم تقسيم المساحة المتبقية بالتساوي بين الهامشين‬،‫سيأخذ العنصر بعد ذلك العرض المحدد‬:

CSS 71
 .center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

‫ ليس للمحاذاة المركزية أي تأثير إذا‬:‫مالحظة‬ width )%100 ‫لم يتم تعيين الخاصية (أو تم ضبطها على‬.

Center Align Text

‫ استخدم‬،‫ لتوسيط النص داخل عنصر ما فقط‬text-align: center;

.center {
text-align: center;
border: 3px solid green;
}

Center an Image
‫ قم بتعيين الهامش الأيسر والأيمن‬،‫لتوسيط الصورة‬ auto ‫وجعلها في‬ block ‫عنصر‬:

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}

CSS 72
 Left and Right Align - Using position
‫إحدى طرق محاذاة العناصر هي استخدام‬ position: absolute; :

.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

Left and Right Align - Using float

‫هناك طريقة أخرى لمحاذاة العناصر وهي استخدام‬ float ‫الخاصية‬:

.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

The clearfix Hack

‫ثم يمكننا إضافة اختراق‬ Clearfix ‫إلى العنصر المحتوي لإصالح هذه المشكلة‬:

.clearfix::after {
content: "";
clear: both;
display: table;
}

CSS 73
 Center Vertically - Using padding
‫ هناك العديد من الطرق لتوسيط عنصر عمودًي ا في‬CSS. ‫الحل البسيط هو استخدام العلوي والسفلي‬ padding :

.center {
padding: 70px 0;
border: 3px solid green;
}

‫ استخدم‬،‫للتوسيط عمودًي ا وأفقًي ا‬ padding ‫و‬ text-align: center :

.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}

Center Vertically - Using line-height

‫الحيلة الأخرى هي استخدام‬ line-height ‫الخاصية بقيمة تساوي الخاصية‬ height :

.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}

/* If the text has multiple lines, add the following: */

.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

CSS 74
 Center Vertically - Using position & transform
‫إذا‬ padding ‫لم‬ line-height ‫ فالحل الآخر هو استخدام تحديد المواقع والخاصية‬،‫تكن هناك خيارات‬ transform :

.center {
height: 200px;
position: relative;
border: 3px solid green;
}

.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Center Vertically - Using Flexbox

‫يمكنك أيًض ا استخدام‬ flexbox ‫ لاحظ فقط أن‬.‫لتوسيط الأشياء‬ flexbox ‫غير مدعوم في‬ IE10 ‫والإصدارات السابقة‬:

.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}

CSS 75
 ‫‪CSS Combinators‬‬
‫‪CSS Combinators‬‬
‫‪.‬على أكثر من محدد بسيط‪ .‬بين المحددات البسيطة‪ ،‬يمكننا تضمين أداة الدمج ‪ CSS‬يمكن أن يحتوي محدد‬

‫‪ CSS:‬هناك أربعة أدوات دمج مختلفة في‬

‫محدد السليل (مسافة)‬

‫)>( محدد الطفل‬

‫)‪ (+‬محدد الأخوة المجاورين‬

‫)~( محدد الأخوة العام‬

‫‪Descendant Selector‬‬
‫‪.‬يطابق المحدد السليل جميع العناصر المنحدرة من عنصر محدد‬
‫المثال التالي يحدد جميع عناصر‬ ‫>‪<p‬‬ ‫داخل عناصر‬ ‫>‪<div‬‬ ‫‪:‬‬

‫{ ‪div p‬‬
‫;‪background-color: yellow‬‬
‫}‬

‫)>( ‪Child Selector‬‬

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

‫يحدد المثال التالي جميع عناصر‬ ‫>‪<p‬‬ ‫التي هي عناصر فرعية لعنصر‬ ‫>‪<div‬‬ ‫‪:‬‬

‫{ ‪div > p‬‬

‫;‪background-color: yellow‬‬
‫}‬

‫)‪Adjacent Sibling Selector (+‬‬

‫‪.‬يتم استخدام محدد الأخوة المجاور لتحديد عنصر يقع مباشرة بعد عنصر محدد آخر‬
‫‪".‬يجب أن تحتوي العناصر الشقيقة على نفس العنصر الأصلي‪ ،‬و"المجاور" يعني "المتابعة فوًر ا‬

‫يحدد المثال التالي العنصر‬ ‫>‪<p‬‬ ‫الأول الذي يتم وضعه مباشرة بعد عناصر‬ ‫>‪<div‬‬ ‫‪:‬‬

‫{ ‪div + p‬‬
‫;‪background-color: yellow‬‬
‫}‬

‫)~( ‪General Sibling Selector‬‬

‫‪.‬يختار محدد الأخوة العام جميع العناصر التي هي الأشقاء التاليين لعنصر محدد‬
‫يحدد المثال التالي جميع عناصر‬ ‫>‪<p‬‬ ‫التي هي الأخوة التاليين لعناصر‬ ‫>‪<div‬‬ ‫‪:‬‬

‫‪CSS‬‬ ‫‪76‬‬
 ‫{ ‪div ~ p‬‬
‫;‪background-color: yellow‬‬
‫}‬

‫‪CSS Pseudo-classes‬‬
‫?‪What are Pseudo-classes‬‬
‫‪.‬يتم استخدام فئة زائفة لتحديد حالة خاصة للعنصر‬

‫‪:‬على سبيل المثال‪ ،‬يمكن استخدامه من أجل‬

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

‫قم بتصميم الروابط التي تمت زيارتها وغير التي تمت زيارتها بشكل مختلف‬

‫قم بتصميم عنصر عندما يتم التركيز عليه‬

‫‪Syntax‬‬
‫‪:‬بناء جملة الفئات الزائفة‬

‫{ ‪selector:pseudo-class‬‬
‫;‪property: value‬‬
‫}‬

‫‪Anchor Pseudo-classes‬‬
‫‪:‬يمكن عرض الروابط بطرق مختلفة‬

‫‪/* unvisited link */‬‬

‫{ ‪a:link‬‬
‫;‪color: #FF0000‬‬
‫}‬

‫‪/* visited link */‬‬

‫{ ‪a:visited‬‬
‫;‪color: #00FF00‬‬
‫}‬

‫‪/* mouse over link */‬‬

‫{ ‪a:hover‬‬
‫;‪color: #FF00FF‬‬
‫}‬

‫‪/* selected link */‬‬

‫{ ‪a:active‬‬
‫;‪color: #0000FF‬‬
‫}‬

‫‪Pseudo-classes and HTML Classes‬‬

‫يمكن دمج الفئات الزائفة مع فئات‬ ‫‪HTML‬‬ ‫‪:‬‬
‫‪:‬عند تمرير مؤشر الماوس فوق الرابط الموجود في المثال‪ ،‬سيتغير لونه‬

‫‪CSS‬‬ ‫‪77‬‬
 a.highlight:hover {
color: #ff0000;
}

Hover on <div>
‫مثال على استخدام‬ :hover ‫الفئة الزائفة على عنصر‬ <div> :

div:hover {
background-color: blue;
}

Simple Tooltip Hover

‫قم بالتمرير فوق عنصر‬ <div> ‫لإظهار عنصر‬ <p> (‫)مثل تلميح الأداة‬:

p {
display: none;
background-color: yellow;
padding: 20px;
}

div:hover p {
display: block;
}

CSS - The :first-child Pseudo-class

‫تتطابق الفئة‬ :first-child ‫الزائفة مع عنصر محدد وهو الابن الأول لعنصر آخر‬.

Match the first <p> element

‫ يطابق المحدد أي عنصر‬،‫في المثال التالي‬ <p> ‫يمثل الابن الأول لأي عنصر‬:

p:first-child {
color: blue;
}

Match the first <i> element in all <p> elements

‫ يطابق المحدد العنصر‬،‫في المثال التالي‬ <i> ‫الأول في جميع عناصر‬ <p> :

p i:first-child {
color: blue;
}

Match all <i> elements in all first child <p> elements

CSS 78
 ‫‪:‬التي تمثل الابن الأول لعنصر آخر >‪ <p‬الموجودة في العناصر >‪ <i‬في المثال التالي‪ ،‬يطابق المحدد جميع العناصر‬

‫{ ‪p:first-child i‬‬
‫;‪color: blue‬‬
‫}‬

‫‪CSS - The :lang Pseudo-class‬‬

‫تتيح لك الفئة‬ ‫‪:lang‬‬ ‫‪.‬الزائفة تحديد قواعد خاصة للغات مختلفة‬

‫‪،‬في المثال أدناه‬ ‫‪:lang‬‬ ‫يحدد عالمات الاقتباس للعناصر‬ ‫>‪<q‬‬ ‫ذات‬ ‫"‪lang="no‬‬ ‫‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{ )‪q:lang(no‬‬
‫;"~" "~" ‪quotes:‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫>‪<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p‬‬

‫>‪</body‬‬
‫>‪</html‬‬

‫‪CSS Pseudo-elements‬‬
‫?‪What are Pseudo-Elements‬‬
‫يتم استخدام عنصر‬ ‫‪CSS‬‬ ‫‪.‬الزائف لتصميم أجزاء محددة من العنصر‬

‫‪:‬على سبيل المثال‪ ،‬يمكن استخدامه من أجل‬

‫قم بتصميم الحرف الأول أو السطر الأول من العنصر‬

‫إدراج محتوى قبل محتوى العنصر أو بعده‬

‫‪Syntax‬‬
‫‪:‬بناء جملة العناصر الزائفة‬

‫{ ‪selector::pseudo-element‬‬
‫;‪property: value‬‬
‫}‬

‫‪The ::first-line Pseudo-element‬‬

‫يتم استخدام العنصر‬ ‫‪::first-line‬‬ ‫‪.‬الزائف لإضافة نمط خاص إلى السطر الأول من النص‬

‫يقوم المثال التالي بتنسيق السطر الأول من النص في جميع عناصر‬ ‫>‪<p‬‬ ‫‪:‬‬

‫‪CSS‬‬ ‫‪79‬‬
 p::first-line {
color: #ff0000;
font-variant: small-caps;
}

‫ لا يمكن تطبيق العنصر‬:‫ملحوظة‬ ::first-line ‫الزائف إلا على عناصر مستوى الكتلة‬.
‫تنطبق الخصائص التالية على‬ ::first-line ‫العنصر الزائف‬:

font properties

color properties

background properties

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

The ::first-letter Pseudo-element

‫يتم استخدام العنصر‬ ::first-letter ‫الزائف لإضافة نمط خاص إلى الحرف الأول من النص‬.

‫يقوم المثال التالي بتنسيق الحرف الأول من النص في جميع عناصر‬ <p> :

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

‫ لا يمكن تطبيق العنصر‬:‫ملحوظة‬ ::first-letter ‫الزائف إلا على عناصر مستوى الكتلة‬.
‫الحرف الأول‬:: ‫تنطبق الخصائص التالية على العنصر الزائف‬:

font properties

color properties

background properties

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

CSS 80
 ‫‪Pseudo-elements and HTML Classes‬‬
‫‪ HTML:‬يمكن دمج العناصر الزائفة مع فئات‬

‫{ ‪p.intro::first-letter‬‬
‫;‪color: #ff0000‬‬
‫;‪font-size: 200%‬‬
‫}‬

‫‪Multiple Pseudo-elements‬‬
‫‪.‬يمكن أيًض ا دمج العديد من العناصر الزائفة‬

‫كبير‪ .‬سيكون باقي السطر الأول باللون الأزرق وبالأحرف ‪ xx‬في المثال التالي‪ ،‬سيكون الحرف الأول من الفقرة باللون الأحمر‪ ،‬بحجم خط‬
‫‪:‬الصغيرة‪ .‬ستكون بقية الفقرة بحجم الخط ولونه الافتراضيين‬

‫{ ‪p::first-letter‬‬
‫;‪color: #ff0000‬‬
‫;‪font-size: xx-large‬‬
‫}‬

‫{ ‪p::first-line‬‬
‫;‪color: #0000ff‬‬
‫;‪font-variant: small-caps‬‬
‫}‬

‫‪CSS - The ::before Pseudo-element‬‬

‫يمكن استخدام العنصر‬ ‫‪::before‬‬ ‫‪.‬الزائف لإدراج بعض المحتوى قبل محتوى العنصر‬

‫يقوم المثال التالي بإدراج صورة قبل محتوى كل عنصر‬ ‫>‪<h1‬‬ ‫‪:‬‬

‫{ ‪h1::before‬‬
‫;)‪content: url(smiley.gif‬‬
‫}‬

‫‪CSS - The ::after Pseudo-element‬‬

‫يمكن استخدام العنصر‬ ‫‪::after‬‬ ‫‪.‬الزائف لإدراج بعض المحتوى بعد محتوى العنصر‬

‫يقوم المثال التالي بإدراج صورة بعد محتوى كل عنصر‬ ‫>‪<h1‬‬ ‫‪:‬‬

‫{ ‪h1::after‬‬
‫;)‪content: url(smiley.gif‬‬
‫}‬

‫‪CSS - The ::marker Pseudo-element‬‬

‫يحدد العنصر‬ ‫‪::marker‬‬ ‫‪.‬الزائف عالمات عناصر القائمة‬
‫‪:‬المثال التالي يصمم عالمات عناصر القائمة‬

‫‪CSS‬‬ ‫‪81‬‬
 ‫{ ‪::marker‬‬
‫;‪color: red‬‬
‫;‪font-size: 23px‬‬
‫}‬

‫‪CSS - The ::selection Pseudo-element‬‬

‫يتطابق العنصر‬ ‫‪::selection‬‬ ‫‪.‬الزائف مع جزء العنصر الذي تم تحديده بواسطة المستخدم‬
‫يمكن تطبيق خصائص‬ ‫‪CSS‬‬ ‫التالية على‬ ‫‪::selection‬‬ ‫‪:‬‬ ‫‪color‬‬ ‫و‬ ‫‪background‬‬ ‫و‬ ‫‪cursor‬‬ ‫و‬ ‫‪outline‬‬ ‫‪.‬‬

‫‪:‬المثال التالي يجعل النص المحدد باللون الأحمر على خلفية صفراء‬

‫{ ‪::selection‬‬
‫;‪color: red‬‬
‫;‪background: yellow‬‬
‫}‬

‫‪CSS Opacity / Transparency‬‬

‫تحدد الخاصية‬ ‫‪opacity‬‬ ‫‪.‬عتامة‪/‬شفافية العنصر‬

‫‪Transparent Image‬‬
‫يمكن أن تأخذ الخاصية‬ ‫‪opacity‬‬ ‫‪:‬قيمة من ‪ 0.0‬إلى ‪ .1.0‬كلما انخفضت القيمة‪ ،‬زادت الشفافية‬

‫{ ‪img‬‬
‫;‪opacity: 0.5‬‬
‫}‬

‫‪Transparent Hover Effect‬‬

‫غالًب ا ما يتم استخدام الخاصية‬ ‫‪opacity‬‬ ‫مع‬ ‫‪:hover‬‬ ‫‪:‬المحدد لتغيير العتامة عند تمرير الماوس‬

‫‪CSS‬‬ ‫‪82‬‬
 ‫{ ‪img‬‬
‫;‪opacity: 0.5‬‬
‫}‬

‫{ ‪img:hover‬‬
‫;‪opacity: 1.0‬‬
‫}‬

‫الأولى تشبه الكود الموجود في المثال ‪ .1‬بالإضافة إلى ذلك‪ ،‬أضفنا ما يجب أن يحدث عندما يقوم المستخدم بالتمرير فوق إحدى ‪ CSS‬كتلة‬
‫‪ opacity:1; .‬لهذا هو ‪. CSS‬الصور‪ .‬في هذه الحالة‪ ،‬نريد ألا تكون الصورة شفافة عندما يقوم المستخدم بالتمرير فوقها‬
‫‪.‬عندما يتحرك مؤشر الماوس بعيًد ا عن الصورة‪ ،‬ستصبح الصورة شفافة مرة أخرى‬

‫‪:‬مثال على تأثير التمرير العكسي‬

‫{ ‪img:hover‬‬
‫;‪opacity: 0.5‬‬
‫}‬

‫‪Transparent Box‬‬
‫عند استخدام‬ ‫‪opacity‬‬ ‫الخاصية لإضافة شفافية إلى خلفية عنصر ما‪ ،‬فإن جميع عناصره الفرعية ترث نفس الشفافية‪ .‬قد يؤدي ذلك إلى‬
‫‪:‬صعوبة قراءة النص الموجود داخل عنصر شفاف بالكامل‬

‫{ ‪div‬‬
‫;‪opacity: 0.3‬‬
‫}‬

‫‪Transparency using RGBA‬‬

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

‫‪CSS‬‬ ‫‪83‬‬
 ‫ لقد تعلمت من فصل ألوان‬CSS ، ‫ أنه يمكنك استخدام‬RGB ‫ بالإضافة إلى‬.‫ كقيمة لون‬RGB، ‫ يمكنك استخدام قيمة لون‬RGB ‫مع قناة ألفا‬
(RGBA) - ‫التي تحدد عتامة اللون‬.

‫ يتم تحديد قيمة لون‬RGBA ‫باستخدام‬: rgba(red, green, blue, alpha ). ‫ (معتم‬1.0‫ (شفاف بالكامل) و‬0.0 ‫معلمة ألفا هي رقم يقع بين‬
)‫ بالكامل‬.

‫ سوف تتعلم المزيد عن ألوان‬:‫ نصيحة‬RGBA ‫ في فصل ألوان‬CSS ‫ الخاص بنا‬.

div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

Text in Transparent Box

<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}

div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}

div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

CSS 84
 <div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>
</html>

Example explained
‫ نقوم بإنشاء عنصر‬، ‫أولًا‬ <div> (class="background") ‫مع صورة خلفية وحدود‬.
‫ثم نقوم بإنشاء‬ <div> (class = "transbox" ) ‫آخر داخل‬ <div> ‫الأول‬.

‫يحتوي‬ <div class="transbox"> ‫ يكون‬- ‫على لون خلفية وحدود‬ div ‫شفاًف ا‬.

‫داخل‬ <div> ‫ نضيف بعض النص داخل عنصر‬،‫الشفاف‬ <p> .

CSS Navigation Bar

Demo: Navigation Bars

Navigation Bars
‫يعد التنقل سهل الاستخدام أمًر ا مهًم ا لأي موقع ويب‬.
‫باستخدام‬ CSS ، ‫يمكنك تحويل قوائم‬ HTML ‫المملة إلى أشرطة تنقل جيدة المظهر‬.

Navigation Bar = List of Links

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

‫ لذا فإن استخدام العنصرين‬،‫شريط التنقل هو في الأساس قائمة من الروابط‬ <ul> ‫و‬ <li> ‫أمر منطقي تماًم ا‬:

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

CSS 85
 ‫‪:‬لنقم الآن بإزالة التعداد النقطي والهوامش والحشوة من القائمة‬

‫{ ‪ul‬‬
‫;‪list-style-type: none‬‬
‫;‪margin: 0‬‬
‫;‪padding: 0‬‬
‫}‬

‫‪:‬وأوضح المثال‬

‫;‪list-style-type: none‬‬

‫‪.‬يزيل الرصاص‬
‫لا يحتاج شريط التنقل إلى عالمات القائمة‬

‫ضبط‬ ‫;‪margin: 0; padding: 0‬‬

‫وإزالة‬

‫الإعدادات الافتراضية للمتصفح‬

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

‫‪CSS Vertical Navigation Bar‬‬

‫‪Vertical Navigation Bar‬‬

‫‪:‬داخل القائمة‪ ،‬بالإضافة إلى التعليمات البرمجية من الصفحة السابقة >‪ <a‬لإنشاء شريط تنقل رأسي‪ ،‬يمكنك تصميم عناصر‬

‫{ ‪li a‬‬
‫;‪display: block‬‬
‫;‪width: 60px‬‬
‫}‬

‫‪:‬وأوضح المثال‬

‫;‪display: block‬‬

‫عرض الروابط كعناصر كتلة يجعل منطقة الارتباط بأكملها قابلة للنقر (وليس النص فقط)‪ ،‬ويسمح لنا بتحديد العرض (والحشوة‪،‬‬
‫والهامش‪ ،‬والارتفاع‪ ،‬وما إلى ذلك إذا كنت تريد ذلك)‬

‫;‪width: 60px‬‬

‫‪.‬تشغل عناصر الكتلة العرض الكامل المتاح افتراضًي ا‬

‫نريد تحديد عرض ‪ 60‬بكسل‬

‫يمكنك أيًض ا ضبط عرض‬ ‫>‪<ul‬‬ ‫وإزالة عرض ‪،‬‬ ‫>‪<a‬‬ ‫حيث سيشغل العرض الكامل المتاح عند عرضه كعناصر كتلة‪ .‬سيؤدي هذا إلى نفس النتيجة ‪،‬‬
‫‪:‬مثل مثالنا السابق‬

‫‪CSS‬‬ ‫‪86‬‬
 ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}

li a {
display: block;
}

Vertical Navigation Bar Examples

‫قم بإنشاء شريط تنقل رأسي أساسي بلون خلفية رمادية وقم بتغيير لون خلفية الروابط عندما يقوم المستخدم بتحريك الماوس فوقها‬:

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */

li a:hover {
background-color: #555;
color: white;
}

Active/Current Navigation Link

‫أضف فئة "نشطة" إلى الرابط الحالي للسماح للمستخدم بمعرفة الصفحة التي يتواجد فيها‬:

CSS 87
 .active {
background-color: #04AA6D;
color: white;
}

Center Links & Add Borders

‫أضف‬ text-align:center ‫إلى‬ <li> ‫أو‬ <a> ‫لتوسيط الروابط‬.

‫ أضف‬border ‫< الخاصية إلى‬ul> ‫ فأضف‬،‫ إذا كنت تريد أيًض ا حدوًد ا داخل شريط التنقل‬.‫ لإضافة حد حول شريط التنقل‬a border-bottom ‫إلى‬
‫< جميع عناصر‬li> ، ‫باستثناء العنصر الأخير‬:

ul {
border: 1px solid #555;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}

li:last-child {
border-bottom: none;
}

Full-height Fixed Vertical Navbar

‫قم بإنشاء تنقل جانبي "لزج" كامل الارتفاع‬:

CSS 88
 ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

CSS Horizontal Navigation Bar

Horizontal Navigation Bar

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

Inline List Items

‫إحدى الطرق لإنشاء شريط تنقل أفقي هي تحديد العناصر‬ <li> ‫ بالإضافة إلى الكود "القياسي" من الصفحة السابقة‬،‫كمضمنة‬:

li {
display: inline;
}

‫وأوضح المثال‬:

display: inline;

‫ العناصر‬،‫بشكل افتراضي‬ <li> ‫هي عناصر كتلة‬.

‫ لعرضها في سطر واح‬،‫ نقوم بإزالة فواصل الأسطر قبل وبعد كل عنصر في القائمة‬،‫هنا‬

CSS 89
 ‫‪Floating List Items‬‬
‫هناك طريقة أخرى لإنشاء شريط تنقل أفقي وهي تعويم العناصر‬ ‫>‪<li‬‬ ‫‪:‬وتحديد تخطيط لروابط التنقل‬

‫{ ‪li‬‬
‫;‪float: left‬‬
‫}‬

‫{ ‪a‬‬
‫;‪display: block‬‬
‫;‪padding: 8px‬‬
‫;‪background-color: #dddddd‬‬
‫}‬

‫‪:‬وأوضح المثال‬

‫;‪float: left‬‬

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

‫;‪display: block‬‬

‫يسمح لنا بتحديد المساحة المتروكة (والارتفاع والعرض والهوامش وما إلى ذلك إذا أردت ذلك)‬

‫;‪padding: 8px‬‬

‫لجعلها تبدو جيدة >‪ <a‬حدد بعض المساحة المتروكة بين كل عنصر‬

‫;‪background-color: #dddddd‬‬

‫>‪ <a‬أضف لون خلفية رمادي لكل عنصر‬

‫نصيحة‪ :‬أضف لون الخلفية إلى‬ ‫>‪<ul‬‬ ‫بدلًا من كل عنصر‬ ‫>‪<a‬‬ ‫‪:‬إذا كنت تريد لون خلفية كامل العرض‬

‫{ ‪ul‬‬
‫;‪background-color: #dddddd‬‬
‫}‬

‫‪Horizontal Navigation Bar Examples‬‬

‫‪:‬قم بإنشاء شريط تنقل أفقي أساسي بلون خلفية داكن وقم بتغيير لون خلفية الروابط عندما يقوم المستخدم بتحريك الماوس فوقها‬

‫{ ‪ul‬‬
‫;‪list-style-type: none‬‬
‫;‪margin: 0‬‬
‫;‪padding: 0‬‬
‫;‪overflow: hidden‬‬
‫;‪background-color: #333‬‬
‫}‬

‫{ ‪li‬‬
‫;‪float: left‬‬
‫}‬

‫{ ‪li a‬‬

‫‪CSS‬‬ ‫‪90‬‬
 display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */

li a:hover {
background-color: #111;
}

Active/Current Navigation Link

‫أضف فئة "نشطة" إلى الرابط الحالي للسماح للمستخدم بمعرفة الصفحة التي يتواجد فيها‬:

.active {
background-color: #04AA6D;
}

Right-Align Links
‫( محاذاة الروابط إلى اليمين عن طريق تحريك عناصر القائمة إلى اليمين‬ float:right; ):

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Border Dividers
‫أضف‬ border-right ‫< الخاصية إلى‬li> ‫لإنشاء فواصل الارتباط‬:

CSS 91
 /* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

Fixed Navigation Bar

‫ حتى عندما يقوم المستخدم بتمرير الصفحة‬،‫اجعل شريط التنقل يظل في أعلى الصفحة أو أسفلها‬:

Gray Horizontal Navbar

‫مثال على شريط تنقل أفقي رمادي ذو حدود رمادية رفيعة‬:

ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}

li a {
color: #666;
}

CSS 92
 ‫‪Sticky Navbar‬‬
‫أضف‬ ‫;‪position: sticky‬‬ ‫‪.‬لإنشاء شريط تنقل ثابت >‪ <ul‬إلى‬

‫يقوم العنصر الثابت بالتبديل بين النسبي والثابت‪ ،‬اعتماًد ا على موضع التمرير‪ .‬يتم وضعه بشكل نسبي حتى يتم استيفاء موضع إزاحة معين‬
‫‪.‬في إطار العرض ‪ -‬ثم "يثبت" في مكانه (مثل الموضع‪ :‬ثابت)‬

‫{ ‪ul‬‬
‫‪position: -webkit-sticky; /* Safari */‬‬
‫;‪position: sticky‬‬
‫;‪top: 0‬‬
‫}‬

‫‪Dropdown Navbar‬‬
‫‪ CSS .‬أنشئ قائمة منسدلة قابلة للتمرير باستخدام‬

‫‪Basic Dropdown‬‬
‫‪.‬قم بإنشاء مربع منسدل يظهر عندما يقوم المستخدم بتحريك الماوس فوق عنصر ما‬

‫>‪<style‬‬
‫{ ‪.dropdown‬‬
‫;‪position: relative‬‬
‫;‪display: inline-block‬‬
‫}‬

‫{ ‪.dropdown-content‬‬
‫;‪display: none‬‬
‫;‪position: absolute‬‬

‫‪CSS‬‬ ‫‪93‬‬
 ‫;‪background-color: #f9f9f9‬‬
‫;‪min-width: 160px‬‬
‫;)‪box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2‬‬
‫;‪padding: 12px 16px‬‬
‫;‪z-index: 1‬‬
‫}‬

‫{ ‪.dropdown:hover .dropdown-content‬‬
‫;‪display: block‬‬
‫}‬
‫>‪</style‬‬

‫>"‪<div class="dropdown‬‬
‫>‪<span>Mouse over me</span‬‬
‫>"‪<div class="dropdown-content‬‬
‫>‪<p>Hello World!</p‬‬
‫>‪</div‬‬
‫>‪</div‬‬

‫‪Example Explained‬‬
‫‪HTML‬‬ ‫‪ <button>.‬أو عنصر ‪ <span>،‬استخدم أي عنصر لفتح محتوى القائمة المنسدلة‪ ،‬على سبيل المثال عنصر )‬
‫مثل( استخدم عنصر الحاوية‬ ‫>‪<div‬‬ ‫‪.‬لإنشاء محتوى القائمة المنسدلة وإضافة ما تريده بداخله )‬

‫لف عنصر‬ ‫>‪<div‬‬ ‫حول العناصر لوضع محتوى القائمة المنسدلة بشكل صحيح باستخدام‬ ‫‪CSS‬‬ ‫‪.‬‬

‫‪CSS‬‬ ‫‪ ،‬يستخدم الفصل ‪) .dropdown‬‬ ‫‪position:relative‬‬ ‫وهو أمر ضروري عندما نريد وضع محتوى القائمة المنسدلة مباشرة أسفل زر القائمة‬
‫باستخدام( المنسدلة‬ ‫‪position:absolute‬‬ ‫‪).‬‬
‫يحتفظ الفصل‬ ‫بمحتوى القائمة المنسدلة الفعلي‪ .‬يكون مخفًي ا بشكل افتراضي‪ ،‬وسيتم عرضه عند التمرير (انظر‬
‫‪.dropdown-content‬‬

‫تم ضبطه على ‪ 160‬بكسل‪ .‬لا تتردد في تغيير هذا‪ .‬نصيحة‪ :‬إذا كنت تريد أن يكون عرض محتوى القائمة المنسدلة ‪ min-width‬أدناه)‪ .‬لاحظ أنه‬
‫‪).‬ولتمكين التمرير على الشاشات الصغيرة ‪ width 100% ( overflow:auto‬بنفس عرض زر القائمة المنسدلة‪ ،‬فاضبط على‬

‫بدلًا من استخدام الحدود‪ ،‬استخدمنا‬ ‫‪box-shadow‬‬ ‫‪".‬لجعل القائمة المنسدلة تبدو وكأنها "بطاقة ‪ CSS‬خاصية‬
‫يتم استخدام المحدد‬ ‫‪:hover‬‬ ‫‪.‬لإظهار القائمة المنسدلة عندما يقوم المستخدم بتحريك الماوس فوق زر القائمة المنسدلة‬

‫‪Dropdown Menu‬‬
‫‪:‬قم بإنشاء قائمة منسدلة تسمح للمستخدم باختيار خيار من القائمة‬

‫‪:‬هذا المثال مشابه للمثال السابق‪ ،‬باستثناء أننا نضيف روابط داخل مربع القائمة المنسدلة ونصممها لتناسب زر القائمة المنسدلة المصمم‬

‫>‪<style‬‬
‫‪/* Style The Dropdown Button */‬‬
‫{ ‪.dropbtn‬‬
‫;‪background-color: #4CAF50‬‬
‫;‪color: white‬‬
‫;‪padding: 16px‬‬
‫;‪font-size: 16px‬‬
‫;‪border: none‬‬
‫;‪cursor: pointer‬‬
‫}‬

‫‪/* The container <div> - needed to position the dropdown content */‬‬
‫{ ‪.dropdown‬‬

‫‪CSS‬‬ ‫‪94‬‬
 position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
display: block;
}

/* Change the background color of the dropdown button when the dropdown
content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

Right-aligned Dropdown Content

‫ أضف‬،‫ بدلًا من اليسار إلى اليمين‬،‫ إذا كنت تريد أن تنتقل القائمة المنسدلة من اليمين إلى اليسار‬right: 0;

.dropdown-content {
right: 0;
}

CSS 95
 CSS Image Gallery
Image Gallery
‫تم إنشاء معرض الصور التالي باستخدام‬ CSS :

<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_mountains.jpg">

CSS 96
 ‫>"‪<img src="img_mountains.jpg" alt="Mountains" width="600" height="400‬‬
‫>‪</a‬‬
‫>‪<div class="desc">Add a description of the image here</div‬‬
‫>‪</div‬‬

‫>‪</body‬‬
‫>‪</html‬‬

‫‪CSS Image Sprites‬‬

‫‪Image Sprites‬‬
‫‪.‬الصورة المتحركة عبارة عن مجموعة من الصور الموضوعة في صورة واحدة‬

‫‪.‬يمكن أن تستغرق صفحة الويب التي تحتوي على العديد من الصور وقًت ا طويًال للتحميل وتؤدي إلى إنشاء طلبات خادم متعددة‬
‫‪.‬سيؤدي استخدام الصور المتحركة إلى تقليل عدد طلبات الخادم وتوفير النطاق الترددي‬

‫‪Image Sprites - Simple Example‬‬

‫‪ (" img_navsprites.gif "):‬بدلًا من استخدام ثالث صور منفصلة‪ ،‬نستخدم هذه الصورة الواحدة‬

‫باستخدام‬ ‫‪CSS‬‬ ‫‪.‬يمكننا إظهار الجزء الذي نحتاجه فقط من الصورة ‪،‬‬

‫في المثال التالي‪ ،‬يحدد‬ ‫‪CSS‬‬ ‫‪:‬سيتم عرضه " ‪ " img_navsprites.gif‬أي جزء من الصورة‬

‫{ ‪#home‬‬
‫;‪width: 46px‬‬
‫;‪height: 44px‬‬
‫;‪background: url(img_navsprites.gif) 0 0‬‬
‫}‬

‫‪:‬وأوضح المثال‬

‫>"‪<img id="home" src="img_trans.gif‬‬

‫يحدد فقط صورة شفافة صغيرة لأن السمة‬ ‫‪src‬‬ ‫‪.‬لا يمكن أن تكون فارغة‬
‫ستكون الصورة المعروضة هي صورة الخلفية التي نحددها في‬ ‫‪CSS‬‬

‫;‪width: 46px; height: 44px‬‬

‫يحدد جزء الصورة الذي نريد استخدامه‬

‫;‪background: url(img_navsprites.gif) 0 0‬‬

‫تحديد صورة الخلفية وموضعها (يسار ‪ 0‬بكسل‪ ،‬أعلى ‪ 0‬بكسل)‬

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

‫‪Image Sprites - Create a Navigation List‬‬

‫‪.‬لإنشاء قائمة التنقل )" ‪ (" img_navsprites.gif‬نريد استخدام الصورة المتحركة‬
‫سوف نستخدم قائمة‬ ‫‪HTML‬‬ ‫‪:‬لأنها يمكن أن تكون رابًط ا وتدعم أيًض ا صورة الخلفية ‪،‬‬

‫‪CSS‬‬ ‫‪97‬‬
 #navlist {
position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {

height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}

#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}

‫وأوضح المثال‬:

#navlist {position:relative;}

‫تم ضبط الموضع على نسبة للسماح بتحديد الموضع المطلق بداخله‬

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

- ‫ وتم تحديد موضع جميع عناصر القائمة بشكل مطلق‬،‫ وتمت إزالة نمط القائمة‬،0 ‫تم تعيين الهامش والحشو على‬

#navlist li, #navlist a {height:44px;display:block;}

‫ بكسل‬44 ‫ارتفاع جميع الصور هو‬

‫ابدأ الآن في تحديد الموضع والأسلوب لكل جزء محدد‬:

#home {left:0px;width:46px;}

‫ بكسل‬46 ‫ ويبلغ عرض الصورة‬،‫تم وضعه على طول الطريق إلى اليسار‬

#home {background:url(img_navsprites.gif) 0 0;}

)‫ بكسل‬0 ‫ أعلى‬،‫ بكسل‬0 ‫تحديد صورة الخلفية وموضعها (يسار‬

#prev {left:63px;width:43px;}

‫ بكسل‬43 ‫ والعرض‬،)‫ بعض المساحة الإضافية بين العناصر‬+ ‫ بكسل‬46 ‫عرض المنزل‬#( ‫ بكسل‬63 ‫تم وضعه على اليمين بمقدار‬

#prev {background:url('img_navsprites.gif') -47px 0;}

)‫ بكسل‬1 ‫ فاصل خط‬+ ‫ بكسل‬46 ‫عرض المنزل‬#( ‫ بكسل على اليمين‬47 ‫تحديد صورة الخلفية بمقدار‬

CSS 98
 ‫};‪#next {left:129px;width:43px‬‬

‫والعرض ‪)، 43‬بكسل ‪ +‬مساحة إضافية ‪ #prev 43‬هي ‪ 63‬بكسل ‪ +‬عرض ‪ #prev‬بداية( تم وضعه على اليمين بمقدار ‪ 129‬بكسل‬
‫بكسل‬

‫};‪#next {background:url('img_navsprites.gif') -91px 0‬‬

‫تحديد صورة الخلفية ‪ 91‬بكسل إلى اليمين (‪#‬عرض المنزل ‪ 46‬بكسل ‪ 1 +‬بكسل خط مقسم ‪ +‬عرض ‪#‬السابق ‪ 43‬بكسل ‪ 1 +‬بكسل‬
‫خط مقسم)‬

‫‪Image Sprites - Hover Effect‬‬

‫‪.‬نريد الآن إضافة تأثير التمرير إلى قائمة التنقل الخاصة بنا‬
‫‪ .‬يمكن استخدام المحدد على كافة العناصر‪ ،‬وليس على الروابط فقط ‪: :hover‬نصيحة‬

‫‪:‬على ثالث صور تنقل وثالث صور لاستخدامها في تأثيرات التمرير )" ‪ (" img_navsprites_hover.gif‬تحتوي صورتنا الجديدة‬
‫نظًر ا لأن هذه صورة واحدة وليست ستة ملفات منفصلة‪ ،‬فلن يكون هناك تأخير في التحميل عندما يقوم المستخدم بتحريك الماوس فوق‬
‫‪.‬الصورة‬

‫‪:‬نضيف فقط ثالثة أسطر من التعليمات البرمجية لإضافة تأثير التمرير‬

‫{ ‪#home a:hover‬‬
‫;‪background: url('img_navsprites_hover.gif') 0 -45px‬‬
‫}‬

‫{ ‪#prev a:hover‬‬
‫;‪background: url('img_navsprites_hover.gif') -47px -45px‬‬
‫}‬

‫{ ‪#next a:hover‬‬
‫;‪background: url('img_navsprites_hover.gif') -91px -45px‬‬
‫}‬

‫‪:‬وأوضح المثال‬

‫};‪#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px‬‬

‫بالنسبة لجميع الصور الثالث‪ ،‬نحدد نفس موضع الخلفية‪ ،‬فقط ‪ 45‬بكسل لألسفل‬

‫‪CSS Attribute Selectors‬‬

‫‪Style HTML Elements With Specific Attributes‬‬
‫من الممكن تصميم عناصر‬ ‫‪HTML‬‬ ‫‪.‬التي لها سمات أو قيم سمات محددة‬

‫‪CSS [attribute] Selector‬‬

‫يتم استخدام المحدد‬ ‫]‪[attribute‬‬ ‫‪.‬لتحديد العناصر ذات السمة المحددة‬

‫يحدد المثال التالي جميع عناصر‬ ‫>‪<a‬‬ ‫‪:‬ذات السمة المستهدفة‬

‫{ ]‪a[target‬‬
‫;‪background-color: yellow‬‬
‫}‬

‫‪CSS [attribute="value"] Selector‬‬

‫يتم استخدام المحدد‬ ‫]"‪[attribute="value‬‬ ‫‪.‬لتحديد العناصر ذات السمة والقيمة المحددة‬

‫‪CSS‬‬ ‫‪99‬‬
 ‫‪ target="_blank":‬ذات السمة >‪ <a‬يحدد المثال التالي كافة عناصر‬

‫{ ]"‪a[target="_blank‬‬
‫;‪background-color: yellow‬‬
‫}‬

‫‪CSS [attribute~="value"] Selector‬‬

‫يتم استخدام المحدد‬ ‫]"‪[attribute~="value‬‬ ‫‪.‬لتحديد العناصر ذات قيمة السمة التي تحتوي على كلمة محددة‬
‫‪":‬يحدد المثال التالي جميع العناصر ذات سمة العنوان التي تحتوي على قائمة كلمات مفصولة بمسافات‪ ،‬إحداها "زهرة‬

‫{ ]"‪[title~="flower‬‬
‫;‪border: 5px solid yellow‬‬
‫}‬

‫‪CSS [attribute|="value"] Selector‬‬

‫يتم استخدام المحدد‬ ‫]"‪[attribute|="value‬‬ ‫لتحديد العناصر ذات السمة المحددة‪ ،‬والتي يمكن أن تكون قيمتها هي القيمة المحددة بالضبط‪،‬‬
‫‪ (-).‬أو القيمة المحددة متبوعة بواصلة‬
‫‪ class = "top-text".‬أو متبوعة بواصلة ( ‪ ،) -‬مثل ‪ class = "top"،‬مالحظة‪ :‬يجب أن تكون القيمة كلمة كاملة‪ ،‬إما بمفردها‪ ،‬مثل‬

‫{ ]"‪[class|="top‬‬
‫;‪background: yellow‬‬
‫}‬

‫‪CSS [attribute^="value"] Selector‬‬

‫يتم استخدام المحدد‬ ‫]"‪[attribute^="value‬‬ ‫‪.‬لتحديد العناصر ذات السمة المحددة‪ ،‬والتي تبدأ قيمتها بالقيمة المحددة‬

‫‪ "top":‬يحدد المثال التالي جميع العناصر ذات قيمة سمة الفئة التي تبدأ بـ‬
‫!مالحظة‪ :‬لا يجب أن تكون القيمة كلمة كاملة‬

‫{ ]"‪[class^="top‬‬
‫;‪background: yellow‬‬
‫}‬

‫‪CSS [attribute$="value"] Selector‬‬

‫يتم استخدام المحدد‬ ‫]"‪[attribute$="value‬‬ ‫‪.‬لتحديد العناصر التي تنتهي قيمة سماتها بقيمة محددة‬

‫‪":‬يحدد المثال التالي جميع العناصر ذات قيمة سمة الفئة التي تنتهي بـ "اختبار‬

‫!مالحظة‪ :‬لا يجب أن تكون القيمة كلمة كاملة‬

‫{ ]"‪[class$="test‬‬
‫;‪background: yellow‬‬
‫}‬

‫‪CSS‬‬ ‫‪100‬‬
 ‫‪CSS [attribute*="value"] Selector‬‬
‫يتم استخدام المحدد‬ ‫]"‪[attribute*="value‬‬ ‫‪.‬لتحديد العناصر التي تحتوي قيمة سمتها على قيمة محددة‬

‫‪ "te":‬يحدد المثال التالي جميع العناصر ذات قيمة سمة الفئة التي تحتوي على‬
‫!مالحظة‪ :‬لا يجب أن تكون القيمة كلمة كاملة‬

‫{ ]"‪[class*="te‬‬
‫;‪background: yellow‬‬
‫}‬

‫‪Styling Forms‬‬
‫‪:‬يمكن أن تكون محددات السمات مفيدة لتصميم النماذج بدون فئة أو معرف‬

‫{ ]"‪input[type="text‬‬
‫;‪width: 150px‬‬
‫;‪display: block‬‬
‫;‪margin-bottom: 10px‬‬
‫;‪background-color: yellow‬‬
‫}‬

‫{ ]"‪input[type="button‬‬
‫;‪width: 120px‬‬
‫;‪margin-left: 35px‬‬
‫;‪display: block‬‬
‫}‬

‫‪CSS Forms‬‬
‫يمكن تحسين مظهر نموذج‬ ‫‪HTML‬‬ ‫بشكل كبير باستخدام‬ ‫‪CSS‬‬ ‫‪:‬‬

‫‪Styling Input Fields‬‬

‫استخدم‬ ‫‪width‬‬ ‫‪:‬الخاصية لتحديد عرض حقل الإدخال‬

‫‪CSS‬‬ ‫‪101‬‬
 ‫{ ‪input‬‬
‫;‪width: 100%‬‬
‫}‬

‫‪:‬إذا كنت تريد فقط تصميم نوع إدخال محدد‪ ،‬فيمكنك استخدام محددات السمات ‪ <input>.‬ينطبق المثال أعاله على كافة عناصر‬

‫]‪input[type=text‬‬

‫سيتم تحديد حقول النص فقط‬

‫]‪input[type=password‬‬

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

‫]‪input[type=number‬‬

‫سيتم تحديد حقول الأرقام فقط‬

‫‪..‬إلخ‬

‫‪Padded Inputs‬‬
‫استخدم‬ ‫‪padding‬‬ ‫‪.‬الخاصية لإضافة مساحة داخل حقل النص‬

‫نصيحة‪ :‬عندما يكون لديك العديد من المدخالت تلو الأخرى‪ ،‬قد ترغب أيًض ا في إضافة بعضها‬ ‫‪margin‬‬ ‫‪:‬لإضافة مساحة أكبر خارجها‬

‫{ ]‪input[type=text‬‬
‫;‪width: 100%‬‬
‫;‪padding: 12px 20px‬‬
‫;‪margin: 8px 0‬‬
‫;‪box-sizing: border-box‬‬
‫}‬

‫‪Bordered Inputs‬‬
‫استخدم‬ ‫‪border‬‬ ‫الخاصية لتغيير حجم الحدود ولونها‪ ،‬واستخدم الخاصية‬ ‫‪border-radius‬‬ ‫‪:‬لإضافة زوايا مستديرة‬

‫‪CSS‬‬ ‫‪102‬‬
 ‫{ ]‪input[type=text‬‬
‫;‪border: 2px solid red‬‬
‫;‪border-radius: 4px‬‬
‫}‬

‫‪:‬الخاصية ‪ border-bottom‬إذا كنت تريد حًد ا سفلًي ا فقط‪ ،‬فاستخدم‬

‫{ ]‪input[type=text‬‬
‫;‪border: none‬‬
‫;‪border-bottom: 2px solid red‬‬
‫}‬

‫‪Colored Inputs‬‬
‫استخدم‬ ‫‪background-color‬‬ ‫الخاصية لإضافة لون خلفية إلى الإدخال‪ ،‬واستخدم الخاصية‬ ‫‪color‬‬ ‫‪:‬لتغيير لون النص‬

‫{ ]‪input[type=text‬‬
‫;‪background-color: #3CBC8D‬‬
‫;‪color: white‬‬
‫}‬

‫‪Focused Inputs‬‬
‫افتراضًي ا‪ ،‬ستضيف بعض المتصفحات مخطًط ا تفصيلًي ا أزرق حول الإدخال عندما يتم التركيز عليه (النقر عليه)‪ .‬يمكنك إزالة هذا السلوك عن‬
‫‪.‬إلى الإدخال ;‪ outline: none‬طريق الإضافة‬
‫استخدم‬ ‫‪:focus‬‬ ‫‪:‬المحدد للقيام بشيء ما بحقل الإدخال عندما يتم التركيز عليه‬

‫‪Input with icon/image‬‬

‫‪CSS‬‬ ‫‪103‬‬
 ‫ فاستخدم‬،‫إذا كنت تريد رمًز ا داخل الإدخال‬ background-image ‫الخاصية وقم بوضعها مع‬ background-position ‫ لاحظ أيًض ا أننا أضفنا‬.‫الخاصية‬
‫حشوة يسرى كبيرة لحجز مساحة الأيقونة‬:

input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}

Animated Search Input

‫ نستخدم‬،‫في هذا المثال‬ transition ‫ خاصية‬CSS ‫ سوف تتعلم المزيد عن‬.‫لتحريك عرض مدخالت البحث عندما يتم التركيز عليها‬ transition

input[type=text] {
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}

Styling Textareas
‫ استخدم‬:‫نصيحة‬ resize )‫الخاصية لمنع تغيير حجم مناطق النص (قم بتعطيل "الملتقط" في الزاوية اليمنى السفلية‬:

textarea {
width: 100%;
height: 150px;
padding: 12px 20px;

CSS 104
 box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}

Styling Select Menus

select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}

Styling Input Buttons

input[type=button], input[type=submit], input[type=reset] {

background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

/* Tip: use width: 100% for full-width buttons */

CSS Counters

CSS 105
 ‫تتيح لك ‪).‬لتتبع عدد مرات استخدامها( ‪ CSS‬والتي يمكن زيادة قيمها بواسطة قواعد ‪ CSS‬هي "متغيرات" يحتفظ بها ‪ CSS‬عدادات‬
‫‪.‬العدادات ضبط مظهر المحتوى بناًء على موضعه في المستند‬

‫‪Automatic Numbering With Counters‬‬

‫‪).‬والتي ستتتبع عدد مرات استخدامها( ‪ CSS‬تشبه "المتغيرات"‪ .‬يمكن زيادة قيم المتغيرات بواسطة قواعد ‪ CSS‬عدادات‬

‫‪:‬سوف نستخدم الخصائص التالية ‪ CSS‬للعمل مع عدادات‬

‫‪counter-reset‬‬

‫إنشاء أو إعادة تعيين العداد‬

‫‪counter-increment‬‬

‫زيادات قيمة العداد‬

‫‪content‬‬

‫إدراج المحتوى الذي تم إنشاؤه‬

‫)(‪counter() counters‬‬

‫أو‬
‫الوظيفة ‪ -‬تضيف قيمة العداد إلى عنصر ما‬

‫يجب أولًا إنشاؤه باستخدام ‪ CSS،‬لاستخدام عداد‬ ‫‪counter-reset‬‬ ‫‪.‬‬

‫ويضيف "القسم < قيمة العداد >‪ ":‬إلى >‪ <h2‬يقوم المثال التالي بإنشاء عداد للصفحة (في محدد النص)‪ ،‬ثم يزيد قيمة العداد لكل عنصر‬
‫‪ <h2>:‬بداية كل عنصر‬

‫{ ‪body‬‬
‫;‪counter-reset: section‬‬
‫}‬

‫{ ‪h2::before‬‬
‫;‪counter-increment: section‬‬
‫;" ‪content: "Section " counter(section) ":‬‬
‫}‬

‫‪Nesting Counters‬‬
‫سيتم حساب عداد "القسم" لكل عنصر ‪).‬القسم الفرعي( >‪ <h1‬يقوم المثال التالي بإنشاء عداد واحد للصفحة (القسم) وعداد واحد لكل عنصر‬
‫مع "< قيمة عداد القسم >‪ <.> ".‬قيمة >‪ <h2‬مع "القسم < قيمة عداد القسم >‪ ،".‬وسيتم حساب عداد "القسم الفرعي" لكل عنصر >‪<h1‬‬
‫‪ >":‬عداد القسم الفرعي‬

‫{ ‪body‬‬
‫;‪counter-reset: section‬‬
‫}‬

‫{ ‪h1‬‬

‫‪CSS‬‬ ‫‪106‬‬
 ‫;‪counter-reset: subsection‬‬
‫}‬

‫{ ‪h1::before‬‬
‫;‪counter-increment: section‬‬
‫;" ‪content: "Section " counter(section) ".‬‬
‫}‬

‫{ ‪h2::before‬‬
‫;‪counter-increment: subsection‬‬
‫;" " )‪content: counter(section) "." counter(subsection‬‬
‫}‬

‫يمكن أن يكون العداد مفيًد ا أيًض ا في إنشاء قوائم محددة لأنه يتم إنشاء مثيل جديد للعداد تلقائًي ا في العناصر الفرعية‪ .‬نستخدم‬
‫‪:‬الدالة لإدراج سلسلة بين مستويات مختلفة من العدادات المتداخلة )(‪ counters‬هنا‬

‫{ ‪ol‬‬
‫;‪counter-reset: section‬‬
‫;‪list-style-type: none‬‬
‫}‬

‫{ ‪li::before‬‬
‫;‪counter-increment: section‬‬
‫;" " )"‪content: counters(section,".‬‬
‫}‬

‫‪CSS Website Layout‬‬

‫‪Website Layout‬‬
‫‪:‬غالًب ا ما يتم تقسيم موقع الويب إلى رؤوس وقوائم ومحتوى وتذييل‬

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

‫‪Header‬‬
‫عادًة ما يوجد الرأس في الجزء العلوي من موقع الويب (أو أسفل قائمة التنقل العلوية مباشرة)‪ .‬غالًب ا ما يحتوي على شعار أو اسم موقع‬
‫‪:‬الويب‬

‫{ ‪.header‬‬
‫;‪background-color: #F1F1F1‬‬
‫;‪text-align: center‬‬
‫;‪padding: 20px‬‬
‫}‬

‫‪CSS‬‬ ‫‪107‬‬
 ‫‪Navigation Bar‬‬
‫‪:‬يحتوي شريط التنقل على قائمة من الروابط لمساعدة الزائرين على التنقل عبر موقع الويب الخاص بك‬

‫‪/* The navbar container */‬‬

‫{ ‪.topnav‬‬
‫;‪overflow: hidden‬‬
‫;‪background-color: #333‬‬
‫}‬

‫‪/* Navbar links */‬‬

‫{ ‪.topnav a‬‬
‫;‪float: left‬‬
‫;‪display: block‬‬
‫;‪color: #f2f2f2‬‬
‫;‪text-align: center‬‬
‫;‪padding: 14px 16px‬‬
‫;‪text-decoration: none‬‬
‫}‬

‫‪/* Links - change color on hover */‬‬

‫{ ‪.topnav a:hover‬‬
‫;‪background-color: #ddd‬‬
‫;‪color: black‬‬
‫}‬

‫‪Content‬‬
‫‪:‬غالًب ا ما يعتمد التخطيط في هذا القسم على المستخدمين المستهدفين‪ .‬التخطيط الأكثر شيوًع ا هو واحد (أو الجمع بينهما) مما يلي‬

‫عمود واحد‬

‫)غالًب ا ما يستخدم لمتصفحات الجوال(‬

‫عمودان‬
‫)يستخدمان غالًب ا لألجهزة اللوحية وأجهزة الكمبيوتر المحمولة(‬

‫تخطيط ثالثي الأعمدة‬

‫)يستخدم فقط لأجهزة الكمبيوتر المكتبية(‬

‫‪CSS‬‬ ‫‪108‬‬
 ‫ وتغييره إلى تخطيط عمود واحد على الشاشات الأصغر‬،‫ أعمدة‬3 ‫سنقوم بإنشاء تخطيط مكون من‬:

/* Create three equal columns that float next to each other */

.column {
float: left;
width: 33.33%;
}

/* Clear floats after the columns */

.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns stack on top of

each other instead of next to each other on smaller screens
(600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

Unequal Columns
‫المحتوى الرئيسي هو الجزء الأكبر والأكثر أهمية في موقعك‬.

‫ غالًب ا ما يتم استخدام المحتوى الجانبي (إن‬.‫ بحيث يتم حجز معظم المساحة للمحتوى الرئيسي‬، ‫ومن الشائع أن يكون عرض الأعمدة غير متساٍو‬
‫ تذكر فقط أنه يجب أن يصل‬،‫ قم بتغيير العرض كما تريد‬.‫وجد) كوسيلة تنقل بديلة أو لتحديد المعلومات ذات الصلة بالمحتوى الرئيسي‬
100 ‫إجمالي العرض إلى‬%:

.column {
float: left;
}

/* Left and right column */

.column.side {
width: 25%;
}

/* Middle column */
.column.middle {
width: 50%;
}

CSS 109
 /* Responsive layout - makes the three columns stack
on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}

Footer
‫ غالًب ا ما يحتوي على معلومات مثل حقوق الطبع والنشر ومعلومات الاتصال‬.‫يتم وضع التذييل في أسفل صفحتك‬:

.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

Responsive Website Layout

‫ باستخدام بعض أكواد‬CSS ‫ والذي يتنوع بين عمودين وأعمدة كاملة العرض‬،‫ قمنا بإنشاء تخطيط موقع ويب سريع الاستجابة‬،‫المذكورة أعاله‬
‫اعتماًد ا على عرض الشاشة‬:

CSS Units
CSS Units

CSS 110
 ‫ لدى‬CSS ‫عدة وحدات مختلفة للتعبير عن الطول‬.

‫ تأخذ العديد من خصائص‬CSS ‫ مثل‬،"‫قيم "الطول‬ width ، margin ‫و‬ padding ،‫و‬ font-size ، ‫وما إلى ذلك‬.

10 ‫ مثل‬،‫الطول هو رقم متبوع بوحدة طول‬px ، 2em ، ‫وما إلى ذلك‬.

h1 {
font-size: 60px;
}

p {
font-size: 25px;
line-height: 50px;
}

‫ يمكن حذف الوحدة‬، 0 ‫ إذا كانت القيمة هي‬،‫ ومع ذلك‬.‫ لا يمكن أن تظهر مسافة بيضاء بين الرقم والوحدة‬:‫ملحوظة‬.
‫ بالنسبة لبعض خصائص‬CSS، ‫ُي سمح بالأطوال السالبة‬.

‫ المطلقة والنسبية‬: ‫ هناك نوعان من وحدات الطول‬.

Absolute Lengths
‫وحدات الطول المطلق ثابتة وسيظهر الطول المعبر عنه في أي منها بهذا الحجم بالضبط‬.
‫ يمكن استخدامها إذا كانت وسيلة‬،‫ ومع ذلك‬.‫ لأن أحجام الشاشات تختلف كثيًر ا‬،‫لا ُي نصح باستخدام وحدات الطول المطلق على الشاشة‬
‫ مثل تخطيط الطباعة‬،‫الإخراج معروفة‬.

Unit Description

cm centimeters

mm millimeters

in inches (1in = 96px = 2.54cm)

px * pixels (1px = 1/96th of 1in)

pt points (1pt = 1/72 of 1in)

pc picas (1pc = 12 pt)

Relative Lengths
Unit Description

Relative to the font-size of the element (2em means 2 times the size of the
em
current font)

ex Relative to the x-height of the current font (rarely used)

ch Relative to width of the "0" (zero)

rem Relative to font-size of the root element

vw Relative to 1% of the width of the viewport*

vh Relative to 1% of the height of the viewport*

vmin Relative to 1% of viewport's* smaller dimension

vmax Relative to 1% of viewport's* larger dimension

% Relative to the parent element

CSS 111
 ‫‪CSS The !important Rule‬‬
‫?‪What is !important‬‬
‫ُت ستخدم القاعدة‬ ‫‪!important‬‬ ‫‪.‬لإضافة أهمية أكبر للخاصية‪/‬القيمة أكثر من المعتاد ‪ CSS‬في‬

‫في الواقع‪ ،‬إذا استخدمت القاعدة‬ ‫‪!important‬‬ ‫!فإنها ستتجاوز جميع قواعد التصميم السابقة لتلك الخاصية المحددة على هذا العنصر ‪،‬‬
‫‪:‬دعونا ننظر على سبيل المثال‬

‫{ ‪#myid‬‬
‫;‪background-color: blue‬‬
‫}‬

‫{ ‪.myclass‬‬
‫;‪background-color: gray‬‬
‫}‬

‫{ ‪p‬‬
‫;‪background-color: red !important‬‬
‫}‬

‫وأوضح المثال‬
‫في المثال أعاله‪ .‬ستحصل جميع الفقرات الثالث على لون خلفية أحمر‪ ،‬على الرغم من أن محدد المعرف ومحدد الفئة يتمتعان بخصوصية‬
‫‪.‬أعلى‬ ‫‪!important‬‬ ‫وتتجاوز القاعدة الخاصية‬ ‫‪background-color‬‬ ‫‪.‬في كلتا الحالتين‬

‫هام حول !مهم‬

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

‫{ ‪#myid‬‬
‫;‪background-color: blue !important‬‬
‫}‬

‫{ ‪.myclass‬‬
‫;‪background-color: gray !important‬‬
‫}‬

‫{ ‪p‬‬
‫;‪background-color: red !important‬‬
‫}‬

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

‫‪Maybe One or Two Fair Uses of !important‬‬

‫هي إذا كان عليك تجاوز نمط لا يمكن تجاوزه بأي طريقة أخرى‪ .‬قد يحدث هذا إذا كنت تعمل على نظام إدارة ‪ !important‬إحدى طرق الاستخدام‬
‫‪ CMS.‬ثم يمكنك تعيين بعض الأنماط المخصصة لتجاوز بعض أنماط ‪ CSS.‬ولا يمكنك تحرير كود )‪ (CMS‬المحتوى‬

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

‫‪CSS‬‬ ‫‪112‬‬
 .button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}

‫ هنا مثال على ذلك‬.‫ وتتعارض خصائصه‬،‫يمكن أن يتغير مظهر الزر أحياًن ا إذا وضعناه داخل عنصر آخر ذي خصوصية أعلى‬:

.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}

#myDiv a {
color: red;
background-color: yellow;
}

"‫ يمكننا إضافة القاعدة‬،‫ بغض النظر عن ذلك‬،‫لإجبار" جميع الأزرار على أن يكون لها نفس الشكل‬ !important ‫ مثل هذا‬،‫إلى خصائص الزر‬:

.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}

#myDiv a {
color: red;
background-color: yellow;
}

CSS Math Functions

‫ تسمح وظائف‬CSS ‫ وهنا سنشرح‬.‫الرياضية باستخدام التعبيرات الرياضية كقيم خاصية‬ calc() ‫الوظائف‬ max() ‫والوظائف‬ min() .

The calc() Function

‫تقوم الدالة‬ calc() ‫بإجراء عملية حسابية لاستخدامها كقيمة الخاصية‬.

CSS Syntax

CSS 113
 ‫ استخدم‬calc() ‫< لحساب عرض عنصر‬div>:

#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}

The max() Function

‫تستخدم الدالة‬ max() ‫ كقيمة الخاصية‬،‫ من قائمة قيم مفصولة بفواصل‬،‫القيمة الأكبر‬.

CSS Syntax

‫ استخدم‬max() ‫ لتعيين عرض‬#div1 ‫ بكسل‬300 ‫ أو‬%50 ،‫لأي قيمة أكبر‬:

#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}

The min() Function

‫تستخدم الدالة‬ min() ‫ كقيمة الخاصية‬،‫ من قائمة قيم مفصولة بفواصل‬،‫أصغر قيمة‬.

CSS Syntax

‫ استخدم‬min() ‫ لتعيين عرض‬#div1 ‫ بكسل‬300 ‫ أو‬%50 ،‫على أي قيمة أصغر‬:

#div1 {
background-color: yellow;
height: 100px;

CSS 114
 width: min(50%, 300px);
}

CSS Advanced

CSS Rounded Corners

CSS Rounded Corners
‫ باستخدام خاصية‬CSS border-radius ، ‫"يمكنك إعطاء أي عنصر "زوايا مستديرة‬.

CSS border-radius Property

‫ تحدد خاصية‬CSS border-radius ‫نصف قطر زوايا العنصر‬.

‫ تتيح لك هذه الخاصية إضافة زوايا مستديرة للعناصر‬:‫!نصيحة‬

‫فيما يلي ثالثة أمثلة‬:

1. ‫زوايا مستديرة لعنصر ذو لون خلفية محدد‬:

#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

2. ‫زوايا مستديرة لعنصر ذو حدود‬:

#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;

CSS 115
 padding: 20px;
width: 200px;
height: 150px;
}

3. ‫زوايا مستديرة لعنصر ذو صورة خلفية‬:

#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}

‫ الخاصية‬:‫نصيحة‬ border-radius ‫هي في الواقع خاصية مختصرة للخصائص‬ border-top-left-radius ‫و‬ border-top-right-radius ‫و‬ border-bottom-

right-radius ‫و‬ border-bottom-left-radius .

CSS border-radius - Specify Each Corner

‫يمكن أن تحتوي الخاصية‬ border-radius ‫ وهنا القواعد‬.‫على قيمة واحدة إلى أربع قيم‬:

15 :‫ نصف قطر الحدود‬- ‫أربع قيم‬px 50px 30px 5px‫ وتنطبق القيمة الثانية على‬،‫؛ (تنطبق القيمة الأولى على الزاوية العلوية اليسرى‬
)‫ وتنطبق القيمة الرابعة على الزاوية السفلية اليسرى‬،‫ وتنطبق القيمة الثالثة على الزاوية اليمنى السفلية‬،‫الزاوية العلوية اليمنى‬:

#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;

CSS 116
 ‫;‪height: 150px‬‬
‫}‬

‫؛ (تنطبق القيمة الأولى على الزاوية العلوية اليسرى‪ ،‬وتنطبق القيمة الثانية على الزوايا‪px 50px 30px‬ثالث قيم ‪ -‬نصف قطر الحدود‪15 :‬‬
‫‪:‬العلوية اليمنى والسفلية اليسرى‪ ،‬وتنطبق القيمة الثالثة على الزاوية اليمنى السفلية)‬

‫{ ‪#rcorners2‬‬
‫;‪border-radius: 15px 50px 30px‬‬
‫;‪background: #73AD21‬‬
‫;‪padding: 20px‬‬
‫;‪width: 200px‬‬
‫;‪height: 150px‬‬
‫}‬

‫قيمتان ‪ -‬نصف قطر الحدود‪ 15 :‬بكسل ‪ 50‬بكسل؛ (تنطبق القيمة الأولى على الزوايا العلوية اليسرى والسفلية اليمنى‪ ،‬وتنطبق القيمة‬
‫‪:‬الثانية على الزوايا العلوية اليمنى والسفلية اليسرى)‬

‫{ ‪#rcorners3‬‬
‫;‪border-radius: 15px 50px‬‬
‫;‪background: #73AD21‬‬
‫;‪padding: 20px‬‬
‫;‪width: 200px‬‬
‫;‪height: 150px‬‬
‫}‬

‫‪:‬قيمة واحدة ‪ -‬نصف قطر الحدود‪ 15 :‬بكسل؛ (تنطبق القيمة على جميع الزوايا الأربع‪ ،‬والتي يتم تقريبها بالتساوي‬

‫‪CSS‬‬ ‫‪117‬‬
 #rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

‫يمكنك أيًض ا إنشاء زوايا بيضاوية‬:

#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

CSS Border Images

‫ باستخدام خاصية‬CSS border-image ، ‫يمكنك تعيين صورة لاستخدامها كحدود حول عنصر ما‬.

CSS border-image Property

‫ تتيح لك خاصية‬CSS border-image ‫تحديد صورة لاستخدامها بدلًا من الحدود العادية حول العنصر‬.
‫الملكية مكونة من ثالثة أجزاء‬:

1. ‫الصورة لاستخدامها كحدود‬

2. ‫حيث لقطع الصورة‬

3. ‫تحديد ما إذا كان ينبغي تكرار المقاطع الوسطى أو تمديدها‬

‫" تسمى( سوف نستخدم الصورة التالية‬border.png"):

CSS 118
 ‫ يأخذ العقار‬border-image ‫ ويتم تكرار المقاطع‬،‫ ثم يقوم بوضع الزوايا عند الزوايا‬.‫ مثل لوحة تيك تاك تو‬،‫الصورة ويقسمها إلى تسعة أقسام‬
‫الوسطى أو تمديدها كما تحددها‬.

‫ لكي‬:‫مالحظة‬ border-image ‫ يحتاج أيًض ا إلى‬،‫يعمل العنصر‬ border ‫!مجموعة الخصائص‬

‫ يتم تكرار الأقسام الوسطى من الصورة لإنشاء الحدود‬،‫هنا‬:

#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}

‫ يتم تمديد الأقسام الوسطى من الصورة لإنشاء الحدود‬،‫هنا‬:

#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}

‫ الخاصية‬:‫ نصيحة‬border-image ‫هي في الواقع خاصية مختصرة للخصائص‬ border-image-source ‫و‬ border-image-slice ‫و‬ border-image-

width ‫ و‬border-image-outset ‫ و‬border-image-repeat .

CSS border-image - Different Slice Values

‫تؤدي قيم الشرائح المختلفة إلى تغيير مظهر الحدود تماًم ا‬:

1 ‫مثال‬:

#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}

CSS 119
 ‫‪:‬مثال ‪2‬‬

‫{ ‪#borderimg2‬‬
‫;‪border: 10px solid transparent‬‬
‫;‪padding: 15px‬‬
‫;‪border-image: url(border.png) 20% round‬‬
‫}‬

‫‪:‬مثال ‪3‬‬

‫{ ‪#borderimg3‬‬
‫;‪border: 10px solid transparent‬‬
‫;‪padding: 15px‬‬
‫;‪border-image: url(border.png) 30% round‬‬
‫}‬

‫‪CSS Multiple Backgrounds‬‬

‫‪CSS Multiple Backgrounds‬‬

‫إضافة صور خلفية متعددة لعنصر ما‪ ،‬من خالل ‪ CSS‬يتيح لك‬ ‫‪background-image‬‬ ‫‪.‬الخاصية‬

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

‫يحتوي المثال التالي على صورتين للخلفية‪ ،‬الصورة الأولى عبارة عن زهرة (محاذاة إلى الأسفل واليمين) والصورة الثانية عبارة عن خلفية‬
‫‪:‬ورقية (محاذاة إلى الزاوية العلوية اليسرى)‬

‫{ ‪#example1‬‬
‫;)‪background-image: url(img_flwr.gif), url(paper.gif‬‬
‫;‪background-position: right bottom, left top‬‬
‫;‪background-repeat: no-repeat, repeat‬‬
‫}‬

‫يمكن تحديد صور خلفية متعددة باستخدام خصائص الخلفية الفردية (كما هو مذكور أعاله) أو‬ ‫‪background‬‬ ‫‪.‬خاصية الاختصار‬

‫‪CSS‬‬ ‫‪120‬‬
 ‫يستخدم المثال التالي‬ ‫‪background‬‬ ‫‪:‬الخاصية المختصرة (نفس نتيجة المثال أعاله)‬

‫{ ‪#example1‬‬
‫‪background: url(img_flwr.gif) right bottom no-repeat,‬‬
‫;‪url(paper.gif) left top repeat‬‬
‫}‬

‫‪CSS Background Size‬‬

‫‪ CSS‬تتيح لك خاصية‬ ‫‪background-size‬‬ ‫‪.‬تحديد حجم صور الخلفية‬

‫‪.‬يمكن تحديد الحجم بالأطوال أو النسب المئوية أو باستخدام إحدى الكلمتين الرئيسيتين‪ :‬يحتوي أو يغطي‬
‫‪:‬يقوم المثال التالي بتغيير حجم صورة الخلفية إلى حجم أصغر بكثير من الصورة الأصلية (باستخدام وحدات البكسل)‬

‫{ ‪#div1‬‬
‫;)‪background: url(img_flower.jpg‬‬
‫;‪background-size: 100px 80px‬‬
‫;‪background-repeat: no-repeat‬‬
‫}‬

‫القيمتان الأخريان المحتملتان لـ‬ ‫‪background-size‬‬ ‫هما‬ ‫‪contain‬‬ ‫و‬ ‫‪cover‬‬ ‫‪.‬‬

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

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

‫يوضح المثال التالي استخدام‬ ‫‪contain‬‬ ‫و‬ ‫‪cover‬‬ ‫‪:‬‬

‫{ ‪#div1‬‬
‫;)‪background: url(img_flower.jpg‬‬
‫;‪background-size: contain‬‬
‫;‪background-repeat: no-repeat‬‬
‫}‬

‫{ ‪#div2‬‬
‫;)‪background: url(img_flower.jpg‬‬
‫;‪background-size: cover‬‬
‫;‪background-repeat: no-repeat‬‬
‫}‬

‫‪Define Sizes of Multiple Background Images‬‬

‫تقبل الخاصية‬ ‫‪background-size‬‬ ‫‪.‬أيًض ا قيًم ا متعددة لحجم الخلفية (باستخدام قائمة مفصولة بفواصل)‪ ،‬عند العمل مع خلفيات متعددة‬

‫‪:‬يحتوي المثال التالي على ثالث صور خلفية محددة‪ ،‬مع قيمة مختلفة لحجم الخلفية لكل صورة‬

‫{ ‪#example1‬‬
‫‪background: url(img_tree.gif) left top no-repeat,‬‬
‫;‪url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat‬‬
‫;‪background-size: 50px, 130px, auto‬‬
‫}‬

‫‪CSS‬‬ ‫‪121‬‬
 ‫‪Full Size Background Image‬‬
‫‪.‬نريد الآن الحصول على صورة خلفية على موقع ويب تغطي نافذة المتصفح بأكملها في جميع الأوقات‬
‫‪:‬المتطلبات هي كما يلي‬

‫امأل الصفحة بأكملها بالصورة (بدون مساحة بيضاء)‬

‫حجم الصورة حسب الحاجة‬

‫مركز الصورة على الصفحة‬

‫لا تسبب أشرطة التمرير‬

‫ثم قم ‪).‬دائًم ا على الأقل بارتفاع نافذة المتصفح >‪ <html‬يكون العنصر( >‪ <html‬يوضح المثال التالي كيفية القيام بذلك؛ استخدم العنصر‬
‫‪:‬بتعيين خلفية ثابتة ومركزة عليها‪ .‬ثم اضبط حجمه باستخدام خاصية حجم الخلفية‬

‫{ ‪html‬‬
‫;‪background: url(img_man.jpg) no-repeat center fixed‬‬
‫;‪background-size: cover‬‬
‫}‬

‫‪Hero Image‬‬
‫لإنشاء صورة رئيسية (صورة كبيرة تحتوي على نص)‪ ،‬ووضعها في المكان الذي >‪ <div‬يمكنك أيًض ا استخدام خصائص خلفية مختلفة على‬
‫‪.‬تريده‬

‫{ ‪.hero-image‬‬
‫;‪background: url(img_man.jpg) no-repeat center‬‬
‫;‪background-size: cover‬‬
‫;‪height: 500px‬‬
‫;‪position: relative‬‬
‫}‬

‫‪CSS background-origin Property‬‬

‫‪ CSS‬تحدد خاصية‬ ‫‪background-origin‬‬ ‫‪.‬مكان وضع صورة الخلفية‬
‫‪:‬تأخذ الخاصية ثالث قيم مختلفة‬

‫مربع الحدود ‪ -‬تبدأ صورة الخلفية من الزاوية اليسرى العليا من الحدود‬

‫مربع الحشو ‪( -‬افتراضي) تبدأ صورة الخلفية من الزاوية اليسرى العليا لحافة الحشو‬

‫مربع المحتوى ‪ -‬تبدأ صورة الخلفية من الزاوية اليسرى العليا للمحتوى‬

‫المثال التالي يوضح‬ ‫‪background-origin‬‬ ‫‪:‬الخاصية‬

‫{ ‪#example1‬‬
‫;‪border: 10px solid black‬‬
‫;‪padding: 35px‬‬
‫;)‪background: url(img_flwr.gif‬‬
‫;‪background-repeat: no-repeat‬‬
‫;‪background-origin: content-box‬‬
‫}‬

‫‪CSS background-clip Property‬‬

‫‪CSS‬‬ ‫‪122‬‬
 ‫‪ CSS‬تحدد خاصية‬ ‫‪background-clip‬‬ ‫‪.‬منطقة طالء الخلفية‬

‫‪:‬تأخذ الخاصية ثالث قيم مختلفة‬

‫مربع الحدود ‪( -‬افتراضي) يتم رسم الخلفية على الحافة الخارجية للحدود‬

‫صندوق الحشو ‪ -‬يتم رسم الخلفية على الحافة الخارجية للحشوة‬

‫مربع المحتوى ‪ -‬يتم رسم الخلفية داخل مربع المحتوى‬

‫المثال التالي يوضح‬ ‫‪background-clip‬‬ ‫‪:‬الخاصية‬

‫{ ‪#example1‬‬
‫;‪border: 10px dotted black‬‬
‫;‪padding: 35px‬‬
‫;‪background: yellow‬‬
‫;‪background-clip: content-box‬‬
‫}‬

‫‪CSS Color Keywords‬‬

‫ستشرح هذه الصفحة الكلمات الرئيسية‬ ‫‪transparent‬‬ ‫و‬ ‫‪currentcolor‬‬ ‫وو‬ ‫‪inherit‬‬ ‫‪.‬‬

‫‪The transparent Keyword‬‬

‫يتم استخدام الكلمة‬ ‫‪transparent‬‬ ‫‪.‬الأساسية لجعل اللون شفاًف ا‪ُ .‬ي ستخدم هذا غالًب ا لإنشاء لون خلفية شفاف لعنصر ما‬
‫هنا‪ ،‬سيكون لون خلفية العنصر‬ ‫>‪<div‬‬ ‫‪:‬شفاًف ا بالكامل‪ ،‬وستظهر صورة الخلفية من خالل‬

‫{ ‪body‬‬
‫;)"‪background-image: url("paper.gif‬‬
‫}‬

‫{ ‪div‬‬
‫;‪background-color: transparent‬‬
‫}‬

‫‪The currentcolor Keyword‬‬

‫الكلمة‬ ‫‪currentcolor‬‬ ‫‪.‬الأساسية تشبه المتغير الذي يحمل القيمة الحالية لخاصية اللون لعنصر ما‬
‫‪.‬يمكن أن تكون هذه الكلمة الأساسية مفيدة إذا كنت تريد أن يكون لون معين متسًق ا في عنصر أو صفحة‬

‫‪:‬هو اللون الأزرق >‪ <div‬باللون الأزرق‪ ،‬لأن لون نص العنصر >‪ <div‬في هذا المثال‪ ،‬سيكون لون حدود العنصر‬

‫{ ‪div‬‬
‫;‪color: blue‬‬
‫;‪border: 10px solid currentcolor‬‬
‫}‬

‫‪:‬على قيمة اللون الحالية لعنصر النص >‪ <div‬في هذا المثال‪ ،‬تم تعيين لون خلفية‬

‫{ ‪body‬‬
‫;‪color: purple‬‬
‫}‬

‫‪CSS‬‬ ‫‪123‬‬
 ‫{ ‪div‬‬
‫;‪background-color: currentcolor‬‬
‫}‬

‫‪:‬ولون الظل إلى قيمة اللون الحالية لعنصر النص >‪ <div‬في هذا المثال‪ ،‬تم تعيين لون حدود‬

‫{ ‪body‬‬
‫;‪color: green‬‬
‫}‬

‫{ ‪div‬‬
‫;‪box-shadow: 0px 0px 15px currentcolor‬‬
‫;‪border: 5px solid currentcolor‬‬
‫}‬

‫‪The inherit Keyword‬‬

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

‫يمكن استخدام الكلمة‬ ‫‪inherit‬‬ ‫‪ HTML.‬وعلى أي عنصر ‪ CSS،‬الأساسية لأي خاصية‬

‫‪:‬من العنصر الأصلي >‪ <span‬في هذا المثال‪ ،‬سيتم توريث إعدادات حدود‬

‫{ ‪div‬‬
‫;‪border: 2px solid red‬‬
‫}‬

‫{ ‪span‬‬
‫;‪border: inherit‬‬
‫}‬

‫‪CSS Gradients‬‬
‫‪.‬عرض انتقالات سلسة بين لونين محددين أو أكثر ‪ CSS‬تتيح لك تدرجات‬
‫‪:‬ثالثة أنواع من التدرجات ‪ CSS‬يحدد‬

‫التدرجات الخطية (ينزل ‪ /‬أعلى ‪ /‬يسار ‪ /‬يمين ‪ /‬قطرًي ا)‬

‫التدرجات الشعاعية (التي يحددها مركزها)‬

‫التدرجات المخروطية (تدور حول نقطة مركزية)‬

‫‪CSS Linear Gradients‬‬

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

‫الاتجاه ‪ -‬من أعلى إلى أسفل (هذا هو الإعداد الافتراضي)‬

‫‪:‬يوضح المثال التالي تدرًج ا خطًي ا يبدأ من الأعلى‪ .‬يبدأ باللون الأحمر ويتحول إلى اللون الأصفر‬

‫{ ‪#grad‬‬
‫;)‪background-image: linear-gradient(red, yellow‬‬

‫‪CSS‬‬ ‫‪124‬‬
 ‫}‬

‫الاتجاه ‪ -‬من اليسار إلى اليمين‬

‫‪:‬يوضح المثال التالي تدرًج ا خطًي ا يبدأ من اليسار‪ .‬يبدأ باللون الأحمر ويتحول إلى اللون الأصفر‬

‫{ ‪#grad‬‬
‫;)‪background-image: linear-gradient(to right, red , yellow‬‬
‫}‬

‫الاتجاه ‪ -‬قطري‬
‫‪.‬يمكنك عمل تدرج قطري عن طريق تحديد موضعي البداية الأفقي والرأسي‬

‫‪:‬يوضح المثال التالي تدرًج ا خطًي ا يبدأ من أعلى اليسار (وينتقل إلى أسفل اليمين)‪ .‬يبدأ باللون الأحمر ويتحول إلى اللون الأصفر‬

‫{ ‪#grad‬‬
‫;)‪background-image: linear-gradient(to bottom right, red, yellow‬‬
‫}‬

‫‪Using Angles‬‬
‫إذا كنت تريد المزيد من التحكم في اتجاه التدرج‪ ،‬يمكنك تحديد زاوية‪ ،‬بدلًا من الاتجاهات المحددة مسبًق ا (إلى الأسفل‪ ،‬إلى الأعلى‪ ،‬إلى‬
‫تعادل "إلى الأعلى"‪ .‬قيمة ‪ 90‬درجة تعادل "إلى اليمين"‪ .‬قيمة ‪ 180‬درجة ‪deg‬اليمين‪ ،‬إلى اليسار‪ ،‬إلى أسفل اليمين‪ ،‬وما إلى ذلك)‪ .‬قيمة ‪0‬‬
‫‪".‬تعادل "إلى الأسفل‬

‫{ ‪#grad‬‬
‫;)‪background-image: linear-gradient(180deg, red, yellow‬‬
‫}‬

‫‪Using Multiple Color Stops‬‬

‫‪:‬يوضح المثال التالي تدرًج ا خطًي ا (من الأعلى إلى الأسفل) مع توقفات لونية متعددة‬

‫{ ‪#grad‬‬
‫;)‪background-image: linear-gradient(red, yellow, green‬‬
‫}‬

‫‪:‬يوضح المثال التالي كيفية إنشاء تدرج خطي (من اليسار إلى اليمين) بلون قوس قزح وبعض النصوص‬

‫{ ‪#grad‬‬
‫‪background-image: linear-gradient(to right,‬‬
‫;)‪red,orange,yellow,green,blue,indigo,violet‬‬
‫}‬

‫‪Using Transparency‬‬
‫‪.‬أيًض ا الشفافية‪ ،‬والتي يمكن استخدامها لإنشاء تأثيرات التالشي ‪ CSS‬تدعم تدرجات‬

‫‪CSS‬‬ ‫‪125‬‬
 ‫قيمة من ‪ 0‬إلى ‪ rgba() ،1‬لتحديد توقفات الألوان‪ .‬يمكن أن تكون المعلمة الأخيرة في الدالة )(‪ rgba‬لإضافة الشفافية‪ ،‬نستخدم الدالة‬
‫‪.‬وهي تحدد شفافية اللون‪ :‬يشير ‪ 0‬إلى الشفافية الكاملة‪ ،‬ويشير ‪ 1‬إلى اللون الكامل (بدون شفافية)‬

‫‪:‬يوضح المثال التالي تدرًج ا خطًي ا يبدأ من اليسار‪ .‬يبدأ بالشفافية الكاملة‪ ،‬وينتقل إلى اللون الأحمر الكامل‬

‫{ ‪#grad‬‬
‫;))‪background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1‬‬
‫}‬

‫‪Repeating a linear-gradient‬‬
‫‪:‬لتكرار التدرجات الخطية )(‪ُ Repeating-linear-gradient‬ت ستخدم الدالة‬

‫{ ‪#grad‬‬
‫;)‪background-image: repeating-linear-gradient(red, yellow 10%, green 20%‬‬
‫}‬

‫‪CSS Box Shadow‬‬

‫‪CSS box-shadow Property‬‬
‫‪box-shadow‬‬ ‫‪.‬لتطبيق ظل واحد أو أكثر على عنصر ما ‪ُ CSS‬ت ستخدم خاصية‬

‫‪Specify a Horizontal and a Vertical Shadow‬‬

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

‫{ ‪div‬‬
‫;‪box-shadow: 10px 10px‬‬
‫}‬

‫‪Specify a Color for the Shadow‬‬

‫تحدد المعلمة‬ ‫‪color‬‬ ‫‪.‬لون الظل‬

‫{ ‪div‬‬
‫;‪box-shadow: 10px 10px lightblue‬‬

‫‪CSS‬‬ ‫‪126‬‬
 }

Add a Blur Effect to the Shadow

‫تحدد المعلمة‬ blur ‫ كلما أصبح الظل أكثر ضبابية‬،‫ كلما زاد الرقم‬.‫نصف قطر التمويه‬.

div {
box-shadow: 10px 10px 5px lightblue;
}

Set the Spread Radius of the Shadow

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

div {
box-shadow: 10px 10px 5px 12px lightblue;
}

Set the inset Parameter

‫تقوم المعلمة‬ inset ‫بتغيير الظل من الظل الخارجي (البداية) إلى الظل الداخلي‬.

div {
box-shadow: 10px 10px 5px lightblue inset;
}

Add Multiple Shadows

CSS 127
 ‫يمكن أن يكون للعنصر أيًض ا ظالل متعددة‬:

div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Cards
‫يمكنك أيًض ا استخدام‬ box-shadow ‫الخاصية لإنشاء بطاقات تشبه الورق‬:

div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

CSS Text Effects

CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes
‫ستتعرف في هذا الفصل على الخصائص التالية‬:

text-overflow

word-wrap

word-break

writing-mode

CSS Text Overflow

‫ تحدد خاصية‬CSS text-overflow ‫كيفية إرسال المحتوى الفائض غير المعروض إلى المستخدم‬.
‫يمكن قصها‬:

p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;

CSS 128
 ‫;‪text-overflow: clip‬‬
‫}‬

‫‪ (...):‬أو يمكن تقديمه كعالمة حذف‬

‫{ ‪p.test2‬‬
‫;‪white-space: nowrap‬‬
‫;‪width: 200px‬‬
‫;‪border: 1px solid #000000‬‬
‫;‪overflow: hidden‬‬
‫;‪text-overflow: ellipsis‬‬
‫}‬

‫‪:‬يوضح المثال التالي كيف يمكنك عرض المحتوى الزائد عند المرور فوق العنصر‬

‫{ ‪div.test:hover‬‬
‫;‪overflow: visible‬‬
‫}‬

‫‪CSS Word Wrapping‬‬

‫‪ CSS‬تتيح خاصية‬ ‫‪word-wrap‬‬ ‫‪.‬إمكانية تقسيم الكلمات الطويلة والتفافها في السطر التالي‬
‫‪:‬إذا كانت الكلمة طويلة جًد ا بحيث لا يمكن احتواؤها داخل منطقة ما‪ ،‬فإنها تتوسع للخارج‬

‫‪:‬بإجبار النص على الالتفاف ‪ -‬حتى لو كان ذلك يعني تقسيمه في منتصف الكلمة ‪ word-wrap‬تسمح لك الخاصية‬

‫{ ‪p‬‬
‫;‪word-wrap: break-word‬‬
‫}‬

‫‪CSS‬‬ ‫‪129‬‬
 ‫‪CSS Word Breaking‬‬
‫‪ CSS‬تحدد خاصية‬ ‫‪word-break‬‬ ‫‪.‬قواعد كسر الأسطر‬

‫{ ‪p.test1‬‬
‫;‪word-break: keep-all‬‬
‫}‬

‫{ ‪p.test2‬‬
‫;‪word-break: break-all‬‬
‫}‬

‫‪CSS Writing Mode‬‬

‫‪ CSS‬تحدد خاصية‬ ‫‪writing-mode‬‬ ‫‪.‬ما إذا كانت أسطر النص سيتم وضعها أفقًي ا أو رأسًي ا‬

‫{ ‪p.test1‬‬
‫;‪writing-mode: horizontal-tb‬‬
‫}‬

‫{ ‪span.test2‬‬
‫;‪writing-mode: vertical-rl‬‬
‫}‬

‫{ ‪p.test2‬‬
‫;‪writing-mode: vertical-rl‬‬
‫}‬

‫‪CSS Web Fonts‬‬

‫‪The CSS @font-face Rule‬‬
‫‪.‬تسمح خطوط الويب لمصممي الويب باستخدام الخطوط غير المثبتة على جهاز الكمبيوتر الخاص بالمستخدم‬

‫عندما تجد‪/‬تشتري الخط الذي ترغب في استخدامه‪ ،‬ما عليك سوى تضمين ملف الخط على خادم الويب الخاص بك‪ ،‬وسيتم تنزيله تلقائًي ا‬
‫‪.‬للمستخدم عند الحاجة‬
‫يتم تعريف الخطوط "الخاصة بك" ضمن‬ ‫‪@font-face‬‬ ‫‪ CSS.‬قاعدة‬

‫‪CSS‬‬ ‫‪130‬‬
 ‫‪Using The Font You Want‬‬
‫في‬ ‫‪@font-face‬‬ ‫‪،‬على سبيل المثال( القاعدة؛ قم أولًا بتعريف اسم للخط‬ ‫‪myFirstFont‬‬ ‫‪.‬ثم قم بالإشارة إلى ملف الخط )‬

‫لاستخدام الخط لعنصر‬ ‫‪HTML‬‬ ‫من خالل ) ‪ ( myFirstFont‬قم بالرجوع إلى اسم الخط ‪،‬‬ ‫‪font-family‬‬ ‫‪:‬الخاصية‬

‫{ ‪@font-face‬‬
‫;‪font-family: myFirstFont‬‬
‫;)‪src: url(sansation_light.woff‬‬
‫}‬

‫{ ‪div‬‬
‫;‪font-family: myFirstFont‬‬
‫}‬

‫‪Using Bold Text‬‬

‫يجب عليك إضافة‬ ‫‪@font-face‬‬ ‫‪:‬قاعدة أخرى تحتوي على واصفات للنص الغامق‬

‫{ ‪@font-face‬‬
‫;‪font-family: myFirstFont‬‬
‫;)‪src: url(sansation_bold.woff‬‬
‫;‪font-weight: bold‬‬
‫}‬

‫‪ Sansation.‬هو ملف خط آخر يحتوي على الأحرف الغامقة لخط "‪ "sansation_bold.woff‬الملف‬

‫‪.‬باللون الغامق "‪ "myFirstFont‬ستستخدم المتصفحات هذا عندما يتم عرض جزء من النص الذي يحتوي على عائلة الخطوط‬
‫بهذه الطريقة يمكنك الحصول على العديد من‬ ‫‪@font-face‬‬ ‫‪.‬القواعد لنفس الخط‬

‫‪CSS 2D Transforms‬‬
‫‪CSS 2D Transforms‬‬
‫‪.‬نقل العناصر وتدويرها وقياسها وانحرافها ‪ CSS‬تتيح لك تحويالت‬
‫‪:‬قم بتمرير الماوس فوق العنصر أدناه لرؤية تحول ثنائي الأبعاد‬
‫‪:‬التالية ‪ CSS‬ستتعرف في هذا الفصل على خاصية‬

‫‪transform‬‬

‫‪CSS 2D Transforms Methods‬‬

‫‪ CSS،‬باستخدام خاصية‬ ‫‪transform‬‬ ‫‪:‬يمكنك استخدام طرق التحويل ثنائية الأبعاد التالية‬

‫)(‪translate‬‬

‫)(‪rotate‬‬

‫)(‪scaleX‬‬

‫)(‪scaleY‬‬

‫)(‪scale‬‬

‫)(‪skewX‬‬

‫‪CSS‬‬ ‫‪131‬‬
 ‫)(‪skewY‬‬

‫)(‪skew‬‬

‫)(‪matrix‬‬

‫‪The translate() Method‬‬

‫تقوم الطريقة‬ ‫)(‪translate‬‬ ‫‪ Y).‬والمحور ‪ X‬وفًق ا للمعلمات المعطاة للمحور( بنقل العنصر من موضعه الحالي‬
‫‪:‬بمقدار ‪ 50‬بكسل إلى اليمين‪ ،‬و‪ 100‬بكسل إلى الأسفل من موضعه الحالي >‪ <div‬يقوم المثال التالي بنقل العنصر‬

‫{ ‪div‬‬
‫;)‪transform: translate(50px, 100px‬‬
‫}‬

‫‪The rotate() Method‬‬

‫تقوم الطريقة‬ ‫)(‪rotate‬‬ ‫‪.‬بتدوير عنصر في اتجاه عقارب الساعة أو عكس اتجاه عقارب الساعة وفًق ا لدرجة معينة‬
‫‪:‬في اتجاه عقارب الساعة بمقدار ‪ 20‬درجة >‪ <div‬يقوم المثال التالي بتدوير العنصر‬

‫{ ‪div‬‬
‫;)‪transform: rotate(20deg‬‬
‫}‬

‫‪.‬سيؤدي استخدام القيم السالبة إلى تدوير العنصر عكس اتجاه عقارب الساعة‬
‫‪:‬عكس اتجاه عقارب الساعة بمقدار ‪ 20‬درجة >‪ <div‬يقوم المثال التالي بتدوير العنصر‬

‫{ ‪div‬‬
‫;)‪transform: rotate(-20deg‬‬
‫}‬

‫‪The scale() Method‬‬

‫تعمل الطريقة‬ ‫)(‪scale‬‬ ‫‪.‬على زيادة أو تقليل حجم العنصر (وفًق ا للمعلمات المعطاة للعرض والارتفاع)‬
‫‪:‬ليكون ضعف عرضه الأصلي وثالثة أضعاف ارتفاعه الأصلي >‪ <div‬يزيد المثال التالي العنصر‬

‫{ ‪div‬‬
‫;)‪transform: scale(2, 3‬‬
‫}‬

‫‪:‬إلى نصف عرضه وارتفاعه الأصلي >‪ <div‬المثال التالي يقلل عنصر‬

‫{ ‪div‬‬
‫;)‪transform: scale(0.5, 0.5‬‬
‫}‬

‫‪The scaleX() Method‬‬

‫‪CSS‬‬ ‫‪132‬‬
 ‫تعمل الطريقة‬ ‫)(‪scaleX‬‬ ‫‪.‬على زيادة أو تقليل عرض العنصر‬

‫‪:‬ليكون ضعف عرضه الأصلي >‪ <div‬يزيد المثال التالي عنصر‬

‫{ ‪div‬‬
‫;)‪transform: scaleX(2‬‬
‫}‬

‫‪:‬إلى نصف عرضه الأصلي >‪ <div‬المثال التالي يقلل عنصر‬

‫{ ‪div‬‬
‫;)‪transform: scaleX(0.5‬‬
‫}‬

‫‪The scaleY() Method‬‬

‫تعمل الطريقة‬ ‫)(‪scaleY‬‬ ‫‪.‬على زيادة أو تقليل ارتفاع العنصر‬
‫‪:‬ليكون ثالثة أضعاف ارتفاعه الأصلي >‪ <div‬يزيد المثال التالي عنصر‬

‫{ ‪div‬‬
‫;)‪transform: scaleY(3‬‬
‫}‬

‫‪:‬إلى نصف ارتفاعه الأصلي >‪ <div‬المثال التالي يقلل العنصر‬

‫{ ‪div‬‬
‫;)‪transform: scaleY(0.5‬‬
‫}‬

‫‪The skewX() Method‬‬

‫تقوم الطريقة‬ ‫)(‪skewX‬‬ ‫‪.‬بتحريف عنصر على طول المحور السيني بالزاوية المحددة‬
‫‪:‬بمقدار ‪ 20‬درجة على طول المحور السيني >‪ <div‬المثال التالي يحرف العنصر‬

‫{ ‪div‬‬
‫;)‪transform: skewX(20deg‬‬
‫}‬

‫‪The skewY() Method‬‬

‫تقوم الطريقة‬ ‫)(‪skewY‬‬ ‫‪.‬بالزاوية المحددة ‪ Y‬بتحريف عنصر على طول المحور‬
‫‪ Y:‬بمقدار ‪ 20‬درجة على طول المحور >‪ <div‬المثال التالي يحرف العنصر‬

‫{ ‪div‬‬
‫;)‪transform: skewY(20deg‬‬
‫}‬

‫‪The skew() Method‬‬

‫تقوم الطريقة‬ ‫)(‪skew‬‬ ‫‪.‬بالزوايا المحددة ‪ Y‬و ‪ X‬بتحريف عنصر على طول المحورين‬

‫‪CSS‬‬ ‫‪133‬‬
 ‫‪ Y:‬و‪ 10‬درجات على طول المحور ‪ X،‬بمقدار ‪ 20‬درجة على طول المحور >‪ <div‬المثال التالي يحرف العنصر‬

‫{ ‪div‬‬
‫;)‪transform: skew(20deg, 10deg‬‬
‫}‬

‫بمقدار ‪ 20‬درجة على طول المحور >‪ <div‬إذا لم يتم تحديد المعلمة الثانية‪ ،‬فستكون قيمتها صفًر ا‪ .‬لذلك‪ ،‬فإن المثال التالي يحرف العنصر‬
‫‪:‬السيني‬

‫{ ‪div‬‬
‫;)‪transform: skew(20deg‬‬
‫}‬

‫‪The matrix() Method‬‬

‫تجمع الطريقة‬ ‫)(‪matrix‬‬ ‫‪.‬بين جميع طرق التحويل ثنائية الأبعاد في طريقة واحدة‬

‫‪.‬تأخذ طريقة المصفوفة () ستة معلمات‪ ،‬تحتوي على وظائف رياضية‪ ،‬والتي تسمح لك بتدوير العناصر وقياسها ونقلها (ترجمتها) وتحريفها‬
‫المعلمات هي كما يلي‪ :‬المصفوفة‬
‫))(‪matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY‬‬

‫{ ‪div‬‬
‫;)‪transform: matrix(1, -0.3, 0, 1, 0, 0‬‬
‫}‬

‫‪CSS 3D Transforms‬‬
‫‪CSS 3D Transforms‬‬
‫‪.‬أيًض ا التحويالت ثالثية الأبعاد ‪ CSS‬يدعم‬
‫‪:‬قم بتمرير الماوس فوق العناصر أدناه لمعرفة الفرق بين التحويل ثنائي الأبعاد وثالثي الأبعاد‬
‫‪:‬التالية ‪ CSS‬ستتعرف في هذا الفصل على خاصية‬

‫‪transform‬‬

‫‪CSS 3D Transforms Methods‬‬

‫‪ CSS،‬باستخدام خاصية‬ ‫‪transform‬‬ ‫‪:‬يمكنك استخدام طرق التحويل ثالثية الأبعاد التالية‬

‫)(‪rotateX‬‬

‫)(‪rotateY‬‬

‫)(‪rotateZ‬‬

‫‪The rotateX() Method‬‬

‫تقوم الطريقة‬ ‫)(‪rotateX‬‬ ‫‪:‬بتدوير عنصر حول المحور السيني بدرجة معينة‬

‫{ ‪#myDiv‬‬
‫;)‪transform: rotateX(150deg‬‬
‫}‬

‫‪CSS‬‬ ‫‪134‬‬
 ‫‪The rotateY() Method‬‬
‫تقوم الطريقة‬ ‫)(‪rotateY‬‬ ‫‪:‬بدرجة معينة ‪ Y‬بتدوير عنصر حول محوره‬

‫{ ‪#myDiv‬‬
‫;)‪transform: rotateY(150deg‬‬
‫}‬

‫‪The rotateZ() Method‬‬

‫تقوم الطريقة‬ ‫)(‪rotateZ‬‬ ‫‪:‬بدرجة معينة ‪ Z‬بتدوير عنصر حول المحور‬

‫{ ‪#myDiv‬‬
‫;)‪transform: rotateZ(90deg‬‬
‫}‬

‫‪CSS Transitions‬‬
‫‪CSS Transitions‬‬
‫‪.‬بتغيير قيم الخاصية بسالسة خالل مدة محددة ‪ CSS‬تسمح لك انتقالات‬

‫‪:‬ستتعرف في هذا الفصل على الخصائص التالية‬

‫‪transition‬‬

‫‪transition-delay‬‬

‫‪transition-duration‬‬

‫‪transition-property‬‬

‫‪transition-timing-function‬‬

‫?‪How to Use CSS Transitions‬‬

‫‪:‬لإنشاء تأثير انتقالي‪ ،‬يجب عليك تحديد شيئين‬

‫التي تريد إضافة تأثير إليها ‪ CSS‬خاصية‬

‫مدة التأثير‬

‫‪.‬مالحظة‪ :‬إذا لم يتم تحديد جزء المدة‪ ،‬فلن يكون لالنتقال أي تأثير‪ ،‬لأن القيمة الافتراضية هي ‪0‬‬
‫‪:‬أيًض ا تأثيًر ا انتقالًي ا لخاصية العرض‪ ،‬بمدة ثانيتين >‪ <div‬أحمر بحجم ‪ 100‬بكسل * ‪ 100‬بكسل‪ .‬حدد العنصر >‪ <div‬يوضح المثال التالي عنصر‬

‫{ ‪div‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪background: red‬‬
‫;‪transition: width 2s‬‬
‫}‬

‫‪.‬المحددة (العرض) ‪ CSS‬سيبدأ تأثير الانتقال عندما تتغير قيمة خاصية‬

‫‪ <div>:‬الآن‪ ،‬دعونا نحدد قيمة جديدة لخاصية العرض عندما يقوم المستخدم بتمرير الماوس فوق العنصر‬

‫‪CSS‬‬ ‫‪135‬‬
 ‫{ ‪div:hover‬‬
‫;‪width: 300px‬‬
‫}‬

‫‪Change Several Property Values‬‬

‫‪:‬يضيف المثال التالي تأثير انتقال لكل من خاصية العرض والارتفاع‪ ،‬بمدة ‪ 2‬ثانية للعرض و‪ 4‬ثواني لالرتفاع‬

‫{ ‪div‬‬
‫;‪transition: width 2s, height 4s‬‬
‫}‬

‫‪Specify the Speed Curve of the Transition‬‬

‫تحدد الخاصية‬ ‫‪transition-timing-function‬‬ ‫‪.‬منحنى السرعة لتأثير الانتقال‬
‫‪:‬يمكن أن تحتوي خاصية وظيفة توقيت النقل على القيم التالية‬

‫‪ease‬‬

‫يحدد تأثير الانتقال ببداية بطيئة‪ ،‬ثم سريعة‪ ،‬ثم تنتهي ببطء (هذا هو الإعداد الافتراضي)‬

‫‪linear‬‬

‫يحدد تأثير الانتقال بنفس السرعة من البداية إلى النهاية‬

‫‪ease-in‬‬

‫يحدد تأثير انتقالي مع بداية بطيئة‬

‫‪ease-out‬‬

‫يحدد تأثير انتقالي بنهاية بطيئة‬

‫‪ease-in-out‬‬

‫يحدد تأثير انتقالي ببداية ونهاية بطيئتين‬

‫)‪cubic-bezier(n,n,n,n‬‬

‫يتيح لك تحديد القيم الخاصة بك في وظيفة مكعب بيزير‬

‫};‪#div1 {transition-timing-function: linear‬‬

‫};‪#div2 {transition-timing-function: ease‬‬
‫};‪#div3 {transition-timing-function: ease-in‬‬
‫};‪#div4 {transition-timing-function: ease-out‬‬
‫};‪#div5 {transition-timing-function: ease-in-out‬‬

‫‪Delay the Transition Effect‬‬

‫تحدد الخاصية‬ ‫‪transition-delay‬‬ ‫‪.‬تأخيًر ا (بالثواني) لتأثير الانتقال‬

‫{ ‪div‬‬
‫;‪transition-delay: 1s‬‬
‫}‬

‫‪CSS‬‬ ‫‪136‬‬
 Transition + Transformation
div {
transition: width 2s, height 2s,
transform 2s;
}

More Transition Examples

div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

div {
transition: width 2s linear 1s;
}

CSS Animations
CSS Animations
‫ يسمح‬CSS ‫ بالرسوم المتحركة لعناصر‬HTML ‫ دون استخدام‬JavaScript!
‫ستتعرف في هذا الفصل على الخصائص التالية‬:

@keyframes

animation-name

animation-duration

animation-delay

animation-iteration-count

animation-direction

animation-timing-function

animation-fill-mode

animation

What are CSS Animations?

‫تسمح الرسوم المتحركة للعنصر بالتغيير تدريجًي ا من نمط إلى آخر‬.
‫ يمكنك تغيير أي عدد تريده من خصائص‬CSS، ‫وبالعدة مرات التي تريدها‬.
‫ لاستخدام الرسوم المتحركة‬CSS، ‫يجب عليك أولًا تحديد بعض الإطارات الرئيسية للرسوم المتحركة‬.
‫تحتوي الإطارات المفتاحية على الأنماط التي سيحتوي عليها العنصر في أوقات معينة‬.

CSS 137
 ‫‪The @keyframes Rule‬‬
‫داخل ‪ CSS‬عند تحديد أنماط‬ ‫‪@keyframes‬‬ ‫‪.‬القاعدة‪ ،‬ستتغير الرسوم المتحركة تدريجًي ا من النمط الحالي إلى النمط الجديد في أوقات معينة‬
‫‪.‬لكي تعمل الرسوم المتحركة‪ ،‬يجب عليك ربط الرسوم المتحركة بعنصر ما‬
‫>‪ <div‬ستستمر الرسوم المتحركة لمدة ‪ 4‬ثواٍن ‪ ،‬وسيتغير لون خلفية عنصر ‪ <div>.‬يربط المثال التالي الرسوم المتحركة "المثالية" بالعنصر‬
‫‪":‬تدريجًي ا من "الأحمر" إلى "الأصفر‬

‫‪/* The animation code */‬‬

‫{ ‪@keyframes example‬‬
‫};‪from {background-color: red‬‬
‫};‪to {background-color: yellow‬‬
‫}‬

‫‪/* The element to apply the animation to */‬‬

‫{ ‪div‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪background-color: red‬‬
‫;‪animation-name: example‬‬
‫;‪animation-duration: 4s‬‬
‫}‬

‫المدة التي يجب أن يستغرقها الرسم المتحرك حتى يكتمل‪ .‬إذا ‪ animation-duration‬مالحظة‪ :‬تحدد الخاصية‬ ‫‪animation-duration‬‬ ‫لم يتم تحديد‬
‫‪.‬الخاصية‪ ،‬فلن تحدث أي حركة‪ ،‬لأن القيمة الافتراضية هي ‪ 0‬ثانية (‪ 0‬ثانية)‬

‫‪.‬في المثال أعاله‪ ،‬حددنا متى سيتغير النمط باستخدام الكلمات الرئيسية "من" و"إلى" (والتي تمثل ‪( %0‬البدء) و‪( %100‬الاكتمال))‬
‫‪.‬من الممكن أيًض ا استخدام النسبة المئوية‪ .‬باستخدام النسبة المئوية‪ ،‬يمكنك إضافة أي عدد تريده من تغييرات النمط‬
‫عندما تكتمل الحركة بنسبة ‪ ،%25‬وتكتمل بنسبة ‪ ،%50‬ومرة أخرى عندما تكتمل الحركة >‪ <div‬سيغير المثال التالي لون خلفية العنصر‬
‫‪%:‬بنسبة ‪100‬‬

‫‪/* The animation code */‬‬

‫{ ‪@keyframes example‬‬
‫‪0%‬‬ ‫‪{background-color:‬‬ ‫};‪red‬‬
‫‪25%‬‬ ‫‪{background-color:‬‬ ‫};‪yellow‬‬
‫‪50%‬‬ ‫‪{background-color:‬‬ ‫};‪blue‬‬
‫‪100%‬‬ ‫‪{background-color:‬‬ ‫};‪green‬‬
‫}‬

‫‪/* The element to apply the animation to */‬‬

‫{ ‪div‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪background-color: red‬‬
‫;‪animation-name: example‬‬
‫;‪animation-duration: 4s‬‬
‫}‬

‫عندما تكتمل الحركة بنسبة ‪ ،%25‬وتكتمل بنسبة ‪ ،%50‬ومرة أخرى عندما >‪ <div‬سيغير المثال التالي كًال من لون الخلفية وموضع العنصر‬
‫‪%:‬تكتمل الحركة بنسبة ‪100‬‬

‫‪CSS‬‬ ‫‪138‬‬
 /* The animation code */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Delay an Animation
‫تحدد الخاصية‬ animation-delay ‫تأخيًر ا لبدء الرسوم المتحركة‬.
‫يحتوي المثال التالي على تأخير لمدة ثانيتين قبل بدء الرسم المتحرك‬:

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

‫ ستبدأ الحركة كما لو كانت قد تم تشغيلها بالفعل لمدة‬،‫ في حالة استخدام قيم سالبة‬.‫ القيم السلبية مسموح بها أيًض ا‬N ‫ثانية‬.
‫ ستبدأ الرسوم المتحركة كما لو تم تشغيلها بالفعل لمدة ثانيتين‬،‫في المثال التالي‬:

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}

Set How Many Times an Animation Should Run

CSS 139
 ‫تحدد الخاصية‬ ‫‪animation-iteration-count‬‬ ‫‪.‬عدد المرات التي يجب أن يتم فيها تشغيل الرسوم المتحركة‬

‫‪:‬المثال التالي سوف يقوم بتشغيل الرسوم المتحركة ‪ 3‬مرات قبل أن تتوقف‬

‫{ ‪div‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪position: relative‬‬
‫;‪background-color: red‬‬
‫;‪animation-name: example‬‬
‫;‪animation-duration: 4s‬‬
‫;‪animation-iteration-count: 3‬‬
‫}‬

‫‪:‬يستخدم المثال التالي القيمة "لا نهائية" لجعل الرسوم المتحركة تستمر إلى الأبد‬

‫{ ‪div‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪position: relative‬‬
‫;‪background-color: red‬‬
‫;‪animation-name: example‬‬
‫;‪animation-duration: 4s‬‬
‫;‪animation-iteration-count: infinite‬‬
‫}‬

‫‪Run Animation in Reverse Direction or Alternate Cycles‬‬

‫تحدد الخاصية‬ ‫‪animation-direction‬‬ ‫‪.‬ما إذا كان يجب تشغيل الرسوم المتحركة لألمام أو للخلف أو في دورات بديلة‬

‫‪:‬على القيم التالية ‪ Animation-direction‬يمكن أن تحتوي خاصية‬

‫‪normal‬‬

‫‪.‬يتم تشغيل الرسوم المتحركة كالمعتاد (إلى الأمام)‬

‫هذا هو الافتراضي‬

‫‪reverse‬‬

‫يتم تشغيل الرسوم المتحركة في الاتجاه العكسي (للخلف)‬

‫‪alternate‬‬

‫يتم تشغيل الرسوم المتحركة لألمام أولًا ‪ ،‬ثم للخلف‬

‫‪alternate-reverse‬‬

‫يتم تشغيل الرسوم المتحركة إلى الخلف أولًا ‪ ،‬ثم إلى الأمام‬

‫‪:‬سيقوم المثال التالي بتشغيل الرسوم المتحركة في الاتجاه العكسي (للخلف)‬

‫{ ‪div‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪position: relative‬‬
‫;‪background-color: red‬‬
‫;‪animation-name: example‬‬
‫;‪animation-duration: 4s‬‬
‫;‪animation-direction: reverse‬‬
‫‪}1‬‬

‫‪:‬لجعل الرسوم المتحركة تعمل لألمام أولًا ‪ ،‬ثم للخلف "‪ "alternate‬يستخدم المثال التالي القيمة‬

‫‪CSS‬‬ ‫‪140‬‬
 div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}

‫" يستخدم المثال التالي القيمة‬alternate-reverse" ‫ ثم لألمام‬، ‫لجعل الرسم المتحرك يعمل للخلف أولًا‬:

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}

Specify the Speed Curve of the Animation

‫تحدد الخاصية‬ animation-timing-function ‫منحنى سرعة الرسوم المتحركة‬.
‫ يمكن أن تحتوي خاصية‬Animation-timing-function ‫على القيم التالية‬:

ease

)‫ ثم تنتهي ببطء (هذا هو الإعداد الافتراضي‬،‫ ثم سريعة‬،‫تحديد الرسوم المتحركة ببداية بطيئة‬

linear

‫يحدد رسًم ا متحرًك ا بنفس السرعة من البداية إلى النهاية‬

ease-in

‫يحدد رسًم ا متحرًك ا ببداية بطيئة‬

ease-out

‫يحدد رسًم ا متحرًك ا بنهاية بطيئة‬

ease-in-out

‫يحدد رسًم ا متحرًك ا ببداية ونهاية بطيئتين‬

cubic-bezier(n,n,n,n)

‫يتيح لك تحديد القيم الخاصة بك في وظيفة مكعب بيزير‬

‫يوضح المثال التالي بعض منحنيات السرعة المختلفة التي يمكن استخدامها‬:

#div1 {animation-timing-function: linear;}

#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

CSS 141
 ‫‪Specify the fill-mode For an Animation‬‬
‫على أي عنصر قبل تشغيل الإطار الرئيسي الأول أو بعد تشغيل الإطار الرئيسي الأخير‪ .‬يمكن لخاصية وضع ‪ CSS‬لا تؤثر الرسوم المتحركة لـ‬
‫‪.‬تعبئة الرسوم المتحركة تجاوز هذا السلوك‬

‫تحدد الخاصية‬ ‫‪animation-fill-mode‬‬ ‫نمًط ا للعنصر المستهدف عندما لا يتم تشغيل الرسوم المتحركة (قبل أن تبدأ‪ ،‬أو بعد انتهائها‪ ،‬أو‬
‫‪.‬كليهما)‬
‫‪:‬يمكن أن تحتوي خاصية وضع تعبئة الرسوم المتحركة على القيم التالية‬

‫‪none‬‬

‫‪.‬القيمة الافتراضية‬

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

‫‪forwards‬‬

‫سيحتفظ العنصر بقيم النمط التي تم تعيينها بواسطة الإطار الرئيسي الأخير (يعتمد على اتجاه الرسوم المتحركة وعدد تكرار‬
‫الرسوم المتحركة)‬

‫‪backwards‬‬

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

‫‪both‬‬

‫ستتبع الرسوم المتحركة القواعد لكل من الأمام والخلف‪ ،‬مما يؤدي إلى توسيع خصائص الحركة في كال الاتجاهين‬

‫‪:‬الاحتفاظ بقيم النمط من الإطار الرئيسي الأخير عند انتهاء الرسم المتحرك >‪ <div‬يتيح المثال التالي للعنصر‬

‫{ ‪div‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪background: red‬‬
‫;‪position: relative‬‬
‫;‪animation-name: example‬‬
‫;‪animation-duration: 3s‬‬
‫;‪animation-fill-mode: forwards‬‬
‫}‬

‫الحصول على قيم النمط التي تم تعيينها بواسطة الإطار الرئيسي الأول قبل بدء الحركة (أثناء فترة تأخير >‪ <div‬يتيح المثال التالي للعنصر‬
‫‪:‬الحركة)‬

‫{ ‪div‬‬
‫;‪width: 100px‬‬
‫;‪height: 100px‬‬
‫;‪background: red‬‬
‫;‪position: relative‬‬
‫;‪animation-name: example‬‬
‫;‪animation-duration: 3s‬‬
‫;‪animation-delay: 2s‬‬
‫;‪animation-fill-mode: backwards‬‬
‫}‬

‫الحصول على قيم النمط التي تم تعيينها بواسطة الإطار الرئيسي الأول قبل بدء الرسم المتحرك‪ <div> ،‬يتيح المثال التالي للعنصر‬
‫‪:‬والاحتفاظ بقيم النمط من الإطار الرئيسي الأخير عند انتهاء الرسم المتحرك‬

‫{ ‪div‬‬
‫;‪width: 100px‬‬

‫‪CSS‬‬ ‫‪142‬‬
 height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}

Animation Shorthand Property

‫يستخدم المثال أدناه ستة من خصائص الرسوم المتحركة‬:

div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

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

div {
animation: example 5s linear 2s infinite alternate;
}

CSS Tooltip
‫ إنشاء تلميحات الأدوات باستخدام‬CSS.

Basic Tooltip
‫قم بإنشاء تلميح أداة يظهر عندما يقوم المستخدم بتحريك الماوس فوق عنصر ما‬:

<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

CSS 143
 ‫‪/* Position the tooltip text - see examples below! */‬‬
‫;‪position: absolute‬‬
‫;‪z-index: 1‬‬
‫}‬

‫‪/* Show the tooltip text when you mouse over the tooltip container */‬‬
‫{ ‪.tooltip:hover .tooltiptext‬‬
‫;‪visibility: visible‬‬
‫}‬
‫>‪</style‬‬

‫‪<div class="tooltip">Hover over me‬‬

‫>‪<span class="tooltiptext">Tooltip text</span‬‬
‫>‪</div‬‬

‫‪Example Explained‬‬
‫وأضف )>‪ <div‬مثل( استخدم عنصر حاوية ‪HTML:‬‬ ‫"‪"tooltip‬‬ ‫فإنه ‪ <div>،‬الفئة إليه‪ .‬عندما يقوم المستخدم بتمرير الماوس فوق هذا‬
‫‪.‬سُي ظهر نص تلميح الأداة‬

‫مع )>‪ <span‬مثل( يتم وضع نص تلميح الأداة داخل عنصر مضمن‬ ‫"‪class="tooltiptext‬‬ ‫‪.‬‬
‫‪ ،‬استخدام الفئة ‪CSS: tooltip‬‬ ‫‪position:relative‬‬ ‫( وهو ضروري لوضع نص تلميح الأداة‬ ‫‪position:absolute‬‬ ‫مالحظة‪ :‬راجع الأمثلة أدناه حول ‪).‬‬
‫‪.‬كيفية وضع تلميح الأداة‬
‫يحتفظ الفصل‬ ‫بنص تلميح الأداة الفعلي‪ .‬يكون مخفًي ا بشكل افتراضي‪ ،‬وسيكون مرئًي ا عند التمرير (انظر أدناه)‪ .‬لقد أضفنا أيًض ا‬
‫‪tooltiptext‬‬

‫‪.‬بعض الأنماط الأساسية إليه‪ :‬عرض ‪ 120‬بكسل‪ ،‬ولون خلفية أسود‪ ،‬ولون نص أبيض‪ ،‬ونص في المنتصف‪ ،‬وحشو علوي وسفلي ‪ 5‬بكسل‬
‫‪ CSS‬يتم استخدام خاصية‬ ‫‪border-radius‬‬ ‫‪.‬لإضافة زوايا مستديرة إلى نص تلميح الأداة‬
‫يتم استخدام المحدد‬ ‫‪:hover‬‬ ‫باستخدام >‪ <div‬لإظهار نص تلميح الأداة عندما يقوم المستخدم بتحريك الماوس فوق‬ ‫"‪class="tooltip‬‬ ‫‪.‬‬

‫‪Positioning Tooltips‬‬
‫يتم استخدامه ‪ top:-5px‬لاحظ أيًض ا أنه ‪" (<div>).‬النص "القابل للتمرير ) ‪ ( left:105%‬في هذا المثال‪ ،‬يتم وضع تلميح الأداة على يمين‬
‫لوضعه في منتصف عنصر الحاوية الخاص به‪ .‬نستخدم الرقم ‪ 5‬لأن نص تلميح الأداة يحتوي على حشوة علوية وسفلية تبلغ ‪ 5‬بكسل‪ .‬إذا قمت‬
‫للتأكد من بقائها في المنتصف (إذا كان هذا هو الشيء الذي ‪ top‬بزيادة المساحة المتروكة لها‪ ،‬قم أيًض ا بزيادة قيمة الخاصية‬
‫‪.‬تريده)‪ .‬وينطبق الشيء نفسه إذا كنت تريد وضع تلميح الأداة على اليسار‬

‫تلميح الأدوات الصحيح‬

‫{ ‪.tooltip .tooltiptext‬‬
‫;‪top: -5px‬‬
‫;‪left: 105%‬‬
‫}‬

‫تلميح الأدوات الأيسر‬

‫{ ‪.tooltip .tooltiptext‬‬
‫;‪top: -5px‬‬

‫‪CSS‬‬ ‫‪144‬‬
 ‫;‪right: 105%‬‬
‫}‬

‫الخاصية بقيمة ناقص ‪ margin-left 60‬إذا كنت تريد أن يظهر تلميح الأداة في الأعلى أو في الأسفل‪ ،‬فراجع الأمثلة أدناه‪ .‬لاحظ أننا نستخدم‬
‫‪.‬بكسل‪ .‬يهدف هذا إلى توسيط تلميح الأداة أعلى‪/‬أسفل النص القابل للتمرير‪ .‬تم ضبطه على نصف عرض تلميح الأداة (‪)60 = 120/2‬‬

‫تلميح الأدوات العلوي‬

‫{ ‪.tooltip .tooltiptext‬‬
‫;‪width: 120px‬‬
‫;‪bottom: 100%‬‬
‫;‪left: 50%‬‬
‫‪margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */‬‬
‫}‬

‫تلميح الأدوات السفلي‬

‫{ ‪.tooltip .tooltiptext‬‬
‫;‪width: 120px‬‬
‫;‪top: 100%‬‬
‫;‪left: 50%‬‬
‫‪margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */‬‬
‫}‬

‫‪Tooltip Arrows‬‬
‫لإنشاء سهم يجب أن يظهر من جانب معين من تلميح الأداة‪ ،‬قم بإضافة محتوى "فارغ" بعد تلميح الأداة‪ ،‬مع فئة العنصر‬
‫‪.‬الخاصية‪ .‬يتم إنشاء السهم نفسه باستخدام الحدود‪ .‬سيؤدي هذا إلى جعل تلميح الأداة يبدو مثل فقاعة الكالم ‪ content‬مع ‪ ::after‬الزائف‬
‫‪:‬يوضح هذا المثال كيفية إضافة سهم إلى أسفل تلميح الأداة‬

‫السهم السفلي‬
‫{ ‪.tooltip .tooltiptext::after‬‬
‫;" " ‪content:‬‬
‫;‪position: absolute‬‬
‫‪top: 100%; /* At the bottom of the tooltip */‬‬
‫;‪left: 50%‬‬
‫;‪margin-left: -5px‬‬
‫;‪border-width: 5px‬‬
‫;‪border-style: solid‬‬
‫;‪border-color: black transparent transparent transparent‬‬
‫}‬

‫‪CSS‬‬ ‫‪145‬‬
 Example Explained
‫ضع السهم داخل تلميح الأداة‬: top: 100% ‫سيتم وضع السهم أسفل تلميح الأداة‬. left: 50% ‫سوف توسيط السهم‬.
‫ تحدد الخاصية‬:‫ مالحظة‬border-width ‫ قم أيًض ا بتغيير‬،‫ إذا قمت بتغيير هذا‬.‫حجم السهم‬ margin-left ‫ سيؤدي هذا‬.‫القيمة إلى نفس القيمة‬
‫إلى إبقاء السهم في المنتصف‬.

‫ يتم‬border-color ‫ إذا كانت جميع‬.‫ والباقي إلى شفاف‬،‫ قمنا بتعيين الحد العلوي إلى اللون الأسود‬.‫استخدامه لتحويل المحتوى إلى سهم‬
‫ فسينتهي بك الأمر بصندوق مربع أسود‬،‫الجوانب سوداء‬.
‫ لاحظ أننا قمنا بتعيين لون الحدود السفلية هذه المرة‬.‫يوضح هذا المثال كيفية إضافة سهم إلى أعلى تلميح الأداة‬:

‫السهم العلوي‬
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

‫السهم الايسر‬
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

‫السهم الأيمن‬
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;

CSS 146
 border-color: transparent transparent transparent black;
}

Fade In Tooltips (Animation)

‫ فيمكنك استخدام‬،‫ إذا كنت تريد أن يتالشى نص تلميح الأداة عندما يكون على وشك أن يكون مرئًي ا‬transition ‫ خاصية‬CSS
‫ مع‬opacity )‫ في عدد من الثواني المحددة (ثانية واحدة في مثال‬،%100 ‫ والانتقال من كونه غير مرئي تماًم ا إلى مرئي بنسبة‬،‫الخاصية‬:

.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
opacity: 1;
}

CSS Styling Images

‫ تعلم كيفية تصميم الصور باستخدام‬CSS.

Rounded Images
‫استخدم‬ border-radius ‫الخاصية لإنشاء صور مستديرة‬:

img {
border-radius: 8px;
}

CSS 147
 img {
border-radius: 50%;
}

Thumbnail Images
‫استخد‬ border ‫الخاصية لإنشاء صور مصغرة‬.

img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

<img src="paris.jpg" alt="Paris">

img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>

Responsive Images

‫سيتم ضبط الصور المستجيبة تلقائًي ا لتناسب حجم الشاشة‬.

‫قم بتغيير حجم نافذة المتصفح لرؤية التأثير‬:

CSS 148
 img {
max-width: 100%;
height: auto;
}

Center an Image
‫ قم بتعيين الهامش الأيسر والأيمن‬،‫لتوسيط الصورة‬ auto ‫وجعلها في‬ block ‫عنصر‬:

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

Polaroid Images / Cards

div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
text-align: center;
padding: 10px 20px;
}

Image Filters
‫ تضيف خاصية‬CSS filter ‫تأثيرات مرئية (مثل التمويه والتشبع) إلى العنصر‬.

CSS 149
 ‫‪ Edge 12.‬أو ‪ Internet Explorer‬مالحظة‪ :‬خاصية التصفية غير مدعومة في‬

‫مثال‬
‫‪:‬تغيير لون جميع الصور إلى الأبيض والأسود (رمادي ‪)%100‬‬

‫{ ‪img‬‬
‫;)‪filter: grayscale(100%‬‬
‫}‬

‫‪Image Hover Overlay‬‬

‫‪:‬حرك مؤشر الفأرة فوق الصورة‬

‫{ ‪img:hover‬‬
‫;)‪transform: scaleX(-1‬‬
‫}‬

‫‪CSS Image Reflection‬‬

‫‪.‬ستتعلم في هذا الفصل كيفية عكس الصورة‬

‫‪CSS Image Reflection‬‬

‫يتم استخدام الخاصية‬ ‫‪box-reflect‬‬ ‫‪.‬لإنشاء انعكاس الصورة‬

‫‪box-reflect‬‬ ‫يمكن أن تكون قيمة الخاصية‬ ‫‪below‬‬ ‫‪:‬‬ ‫‪above‬‬ ‫أو‬ ‫‪left‬‬ ‫أو‬ ‫‪right‬‬ ‫‪.‬‬

‫‪Example:‬‬

‫‪:‬نريد هنا الانعكاس الموجود أسفل الصورة‬

‫{ ‪img‬‬
‫;‪-webkit-box-reflect: below‬‬
‫}‬

‫‪:‬نريد هنا الانعكاس على يمين الصورة‬

‫{ ‪img‬‬
‫;‪-webkit-box-reflect: right‬‬
‫}‬

‫‪CSS Reflection Offset‬‬

‫لتحديد الفجوة بين الصورة والانعكاس‪ ،‬أضف حجم الفجوة إلى الخاصية‬ ‫‪box-reflect‬‬ ‫‪.‬‬

‫‪CSS‬‬ ‫‪150‬‬
 ‫{ ‪img‬‬
‫;‪-webkit-box-reflect: below 20px‬‬
‫}‬

‫‪CSS Reflection With Gradient‬‬

‫‪:‬إنشاء تأثير التالشي على الانعكاس‬

‫{ ‪img‬‬
‫‪-webkit-box-reflect: below 0px linear-gradient(to bottom,‬‬
‫;))‪rgba(0,0,0,0.0), rgba(0,0,0,0.4‬‬
‫}‬

‫‪CSS The object-fit Property‬‬

‫‪ CSS‬يتم استخدام خاصية‬ ‫‪object-fit‬‬ ‫‪.‬ليناسب الحاوية الخاصة به >‪ <video‬أو >‪ <img‬لتحديد كيفية تغيير حجم‬

‫‪The CSS object-fit Property‬‬

‫‪ CSS‬يتم استخدام خاصية‬ ‫‪object-fit‬‬ ‫‪.‬ليناسب الحاوية الخاصة به >‪ <video‬أو >‪ <img‬لتحديد كيفية تغيير حجم‬
‫تخبر هذه الخاصية المحتوى بملء الحاوية بعدة طرق؛ مثل "الحفاظ على نسبة العرض إلى الارتفاع هذه" أو "التمدد وشغل أكبر مساحة‬
‫‪".‬ممكنة‬
‫‪:‬أنظر إلى الصورة التالية من باريس‪ .‬هذه الصورة بعرض ‪ 400‬بكسل وارتفاع ‪ 300‬بكسل‬

‫‪:‬ومع ذلك‪ ،‬إذا صممنا الصورة أعاله لتكون نصف عرضها (‪ 200‬بكسل) ونفس الارتفاع (‪ 300‬بكسل)‪ ،‬فستبدو كما يلي‬

‫‪CSS‬‬ ‫‪151‬‬
 ‫{ ‪img‬‬
‫;‪width: 200px‬‬
‫;‪height: 300px‬‬
‫}‬

‫‪.‬نرى أنه يتم ضغط الصورة لتناسب الحاوية التي يبلغ حجمها ‪ 300 × 200‬بكسل (تم إتالف نسبة العرض إلى الارتفاع الأصلية)‬
‫هنا‬ ‫‪object-fit‬‬ ‫‪.‬يأتي دور الخاصية‬ ‫‪object-fit‬‬ ‫‪:‬يمكن أن تأخذ الخاصية إحدى القيم التالية‬

‫‪fill‬‬

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

‫‪.‬يتم تغيير حجم الصورة لملء البعد المحدد‬

‫إذا لزم الأمر‪ ،‬سيتم تمديد الصورة أو سحقها لتناسب‬

‫‪contain‬‬

‫تحافظ الصورة على نسبة العرض إلى الارتفاع‪ ،‬ولكن يتم تغيير حجمها لتتناسب مع البعد المحدد‬

‫‪cover‬‬

‫‪.‬تحافظ الصورة على نسبة العرض إلى الارتفاع وتمأل البعد المحدد‬

‫سيتم قص الصورة لتناسب‬

‫‪none‬‬

‫الصورة لم يتم تغيير حجمها‬

‫‪scale-down none‬‬ ‫‪contain‬‬

‫تم تصغير الصورة إلى أصغر نسخة من‬

‫أو‬

‫;‪Using object-fit: cover‬‬

‫إذا استخدمنا‬ ‫;‪object-fit: cover‬‬ ‫‪:‬الصورة‪ ،‬فإنها تحافظ على نسبة العرض إلى الارتفاع وتمأل البعد المحدد‪ .‬سيتم قص الصورة لتناسب‬

‫{ ‪img‬‬
‫;‪width: 200px‬‬
‫;‪height: 300px‬‬
‫;‪object-fit: cover‬‬
‫}‬

‫;‪Using object-fit: contain‬‬

‫إذا استخدمنا‬ ‫;‪object-fit: contain‬‬ ‫‪:‬الصورة‪ ،‬فإنها تحافظ على نسبة العرض إلى الارتفاع‪ ،‬ولكن يتم تغيير حجمها لتناسب البعد المحدد‬

‫{ ‪img‬‬
‫;‪width: 200px‬‬
‫;‪height: 300px‬‬

‫‪CSS‬‬ ‫‪152‬‬
 object-fit: contain;
}

Using object-fit: fill;

‫إذا استخدمنا‬ object-fit: fill; ‫ سيتم تمديد الصورة أو سحقها لتناسب‬،‫ إذا لزم الأمر‬.‫الصورة يتم تغيير حجمها لملء البعد المحدد‬:

img {
width: 200px;
height: 300px;
object-fit: fill;
}

Using object-fit: none;

‫إذا استخدمنا‬ object-fit: none; ‫الصورة لم يتم تغيير حجمها‬:

img {
width: 200px;
height: 300px;
object-fit: none;
}

Using object-fit: scale-down;

CSS 153
 ‫إذا استخدمنا‬ ‫;‪object-fit: scale-down‬‬ ‫الصورة يتم تصغيرها إلى أصغر نسخة من‬ ‫‪none‬‬ ‫أو‬ ‫‪contain‬‬ ‫‪:‬‬

‫{ ‪img‬‬
‫;‪width: 200px‬‬
‫;‪height: 300px‬‬
‫;‪object-fit: scale-down‬‬
‫}‬

‫‪CSS The object-position Property‬‬

‫‪ CSS‬يتم استخدام خاصية‬ ‫‪object-position‬‬ ‫‪.‬داخل الحاوية الخاصة به >‪ <video‬أو >‪ <img‬لتحديد كيفية وضع‬

‫‪The Image‬‬
‫‪:‬انظر إلى الصورة التالية من باريس‪ ،‬وهي بمقاس ‪ 300×400‬بكسل‬

‫بعد ذلك‪ ،‬نستخدم‬ ‫;‪object-fit: cover‬‬ ‫للحفاظ على نسبة العرض إلى الارتفاع وملء البعد المحدد‪ .‬ومع ذلك‪ ،‬سيتم قص الصورة لتناسب‪ ،‬مثل‬
‫‪:‬هذا‬

‫{ ‪img‬‬
‫;‪width: 200px‬‬
‫;‪height: 300px‬‬

‫‪CSS‬‬ ‫‪154‬‬
 ‫;‪object-fit: cover‬‬
‫}‬

‫‪Using the object-position Property‬‬

‫لنفترض أن جزء الصورة المعروض لم يتم وضعه كما نريد‪ .‬لتحديد موضع الصورة‪ ،‬سوف نستخدم‬ ‫‪object-position‬‬ ‫‪.‬الخاصية‬

‫سنستخدم هنا‬ ‫‪object-position‬‬ ‫‪:‬الخاصية لوضع الصورة بحيث يكون المبنى القديم الرائع في المركز‬

‫{ ‪img‬‬
‫;‪width: 200px‬‬
‫;‪height: 300px‬‬
‫;‪object-fit: cover‬‬
‫;‪object-position: 80% 100%‬‬
‫}‬

‫سنستخدم هنا‬ ‫‪object-position‬‬ ‫‪:‬الخاصية لوضع الصورة بحيث يكون برج إيفل الشهير في المركز‬

‫{ ‪img‬‬
‫;‪width: 200px‬‬
‫;‪height: 300px‬‬
‫;‪object-fit: cover‬‬
‫;‪object-position: 15% 100%‬‬
‫}‬

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

‫‪CSS‬‬ ‫‪155‬‬
 ‫‪The CSS mask-image Property‬‬
‫‪ CSS‬تحدد خاصية‬ ‫‪mask-image‬‬ ‫‪.‬صورة طبقة القناع‬

‫‪Use an Image as the Mask Layer‬‬

‫‪.‬لتمرير صورة طبقة القناع )(‪ url‬كطبقة القناع‪ ،‬استخدم قيمة ‪ SVG‬أو ‪ PNG‬لاستخدام صورة‬
‫‪.‬يجب أن تحتوي صورة القناع على منطقة شفافة أو شبه شفافة‪ .‬يشير اللون الأسود إلى الشفافية الكاملة‬
‫‪:‬التي سنستخدمها )‪ PNG‬صورة( هذه هي صورة القناع‬

‫{ ‪.mask1‬‬
‫;)‪-webkit-mask-image: url(photo.png‬‬
‫;)‪mask-image: url(photo.png‬‬
‫;‪-webkit-mask-repeat: no-repeat‬‬
‫;‪mask-repeat: no-repeat‬‬
‫}‬

‫‪Example Explained‬‬
‫تحدد الخاصية‬ ‫‪mask-image‬‬ ‫‪.‬الصورة التي سيتم استخدامها كطبقة قناع لعنصر ما‬
‫ما إذا كان سيتم تكرار صورة القناع أم لا‪ .‬تشير القيمة ‪ mask-repeat‬تحدد الخاصية‬ ‫‪no-repeat‬‬ ‫إلى أن صورة القناع لن تتكرر (سيتم عرض صورة‬
‫‪.‬القناع مرة واحدة فقط)‬

‫{ ‪.mask1‬‬
‫;)‪-webkit-mask-image: url(w3logo.png‬‬
‫;)‪mask-image: url(w3logo.png‬‬
‫}‬

‫‪Use Gradients as the Mask Layer‬‬

‫‪.‬الخطية والشعاعية كصور قناع ‪ CSS‬يمكن أيًض ا استخدام تدرجات‬

‫‪Linear Gradient Examples‬‬

‫‪:‬هنا‪ ،‬نستخدم التدرج الخطي كطبقة قناع لصورتنا‪ .‬ينتقل هذا التدرج الخطي من الأعلى (الأسود) إلى الأسفل (الشفاف)‬

‫‪CSS‬‬ ‫‪156‬‬
 .mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}

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

‫استخدم تدرًج ا خطًي ا مع إخفاء النص كطبقة قناع‬:

.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}

Radial Gradient Examples

‫ نستخدم التدرج الشعاعي (على شكل دائرة) كطبقة قناع لصورتنا‬،‫هنا‬:

CSS 157
 )‫استخدم التدرج الشعاعي كطبقة قناع (دائرة‬:

.mask2 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

‫ نستخدم التدرج الشعاعي (على شكل قطع ناقص) كطبقة قناع لصورتنا‬،‫هنا‬:

.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

CSS Buttons
‫ تعرف على كيفية تصميم الأزرار باستخدام‬CSS.

Basic Button Styling

.button {
background-color: #04AA6D; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;

CSS 158
 display: inline-block;
font-size: 16px;
}

Button Colors
‫استخدم‬ background-color ‫الخاصية لتغيير لون خلفية الزر‬:

.button1 {background-color: #04AA6D;} /* Green */

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

Button Sizes
‫استخدم‬ font-size ‫الخاصية لتغيير حجم خط الزر‬:

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Rounded Buttons
‫استخدم‬ border-radius ‫الخاصية لإضافة زوايا مستديرة إلى الزر‬:

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Colored Button Borders

‫استخدم‬ border ‫الخاصية لإضافة حد ملون إلى زر‬:

.button1 {
background-color: white;
color: black;
border: 2px solid #04AA6D; /* Green */
}
...

CSS 159
 ‫‪Hoverable Buttons‬‬
‫استخدم‬ ‫‪:hover‬‬ ‫‪.‬المحدد لتغيير نمط الزر عند تحريك الماوس فوقه‬
‫نصيحة‪ :‬استخدم‬ ‫‪transition-duration‬‬ ‫‪":‬الخاصية لتحديد سرعة تأثير "التحويم‬

‫{ ‪.button‬‬
‫;‪transition-duration: 0.4s‬‬
‫}‬

‫{ ‪.button:hover‬‬
‫‪background-color: #04AA6D; /* Green */‬‬
‫;‪color: white‬‬
‫}‬
‫‪...‬‬

‫‪Shadow Buttons‬‬
‫استخدم‬ ‫‪box-shadow‬‬ ‫‪:‬الخاصية لإضافة ظالل إلى زر‬

‫{ ‪.button1‬‬
‫;)‪box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19‬‬
‫}‬

‫{ ‪.button2:hover‬‬
‫;)‪box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19‬‬
‫}‬

‫‪Disabled Buttons‬‬
‫استخدم‬ ‫‪opacity‬‬ ‫‪.‬الخاصية لإضافة الشفافية إلى الزر (إنشاء مظهر "معطل")‬
‫نصيحة‪ :‬يمكنك أيًض ا إضافة‬ ‫‪cursor‬‬ ‫الخاصية بقيمة "غير مسموح بها"‪ ،‬والتي ستعرض "عالمة ممنوع ركن السيارة" عند تمرير الماوس فوق‬
‫‪:‬الزر‬

‫{ ‪.disabled‬‬
‫;‪opacity: 0.6‬‬
‫;‪cursor: not-allowed‬‬
‫}‬

‫‪Button Width‬‬
‫افتراضًي ا‪ ،‬يتم تحديد حجم الزر حسب محتوى النص الخاص به (بقدر محتواه)‪ .‬استخدم‬ ‫‪width‬‬ ‫‪:‬الخاصية لتغيير عرض الزر‬

‫};‪.button1 {width: 250px‬‬

‫};‪.button2 {width: 50%‬‬
‫};‪.button3 {width: 100%‬‬

‫‪CSS‬‬ ‫‪160‬‬
 ‫‪Button Groups‬‬
‫قم بإزالة الهوامش وأضفها‬ ‫‪float:left‬‬ ‫‪:‬إلى كل زر لإنشاء مجموعة أزرار‬

‫{ ‪.button‬‬
‫;‪float: left‬‬
‫}‬

‫‪Bordered Button Group‬‬

‫استخدم‬ ‫‪border‬‬ ‫‪:‬الخاصية لإنشاء مجموعة أزرار ذات حدود‬

‫{ ‪.button‬‬
‫;‪float: left‬‬
‫;‪border: 1px solid green‬‬
‫}‬

‫‪Vertical Button Group‬‬

‫استخدم‬ ‫‪display:block‬‬ ‫بدلًا من‬ ‫‪float:left‬‬ ‫‪:‬تجميع الأزرار الموجودة أسفل بعضها البعض‪ ،‬بدلًا من تجميعها جنًب ا إلى جنب‬

‫{ ‪.button‬‬
‫;‪display: block‬‬
‫}‬

‫‪CSS Pagination Examples‬‬

‫‪ CSS.‬تعرف على كيفية إنشاء ترقيم صفحات سريع الاستجابة باستخدام‬

‫‪Simple Pagination‬‬
‫‪:‬إذا كان لديك موقع ويب يحتوي على الكثير من الصفحات‪ ،‬فقد ترغب في إضافة نوع من ترقيم الصفحات إلى كل صفحة‬

‫{ ‪.pagination‬‬
‫;‪display: inline-block‬‬
‫}‬

‫{ ‪.pagination a‬‬
‫;‪color: black‬‬
‫;‪float: left‬‬
‫;‪padding: 8px 16px‬‬
‫;‪text-decoration: none‬‬
‫}‬

‫‪Active and Hoverable Pagination‬‬

‫قم بتمييز الصفحة الحالية بفصل دراسي‬ ‫‪.active‬‬ ‫واستخدم ‪،‬‬ ‫‪:hover‬‬ ‫‪:‬المحدد لتغيير لون كل رابط صفحة عند تحريك الماوس فوقها‬

‫‪CSS‬‬ ‫‪161‬‬
 .pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

Rounded Active and Hoverable Buttons

‫أضف‬ border-radius ‫الخاصية إذا كنت تريد زر "نشط" و"تحويم" مستديًر ا‬:

.pagination a {
border-radius: 5px;
}

.pagination a.active {
border-radius: 5px;
}

Hoverable Transition Effect

‫أضف‬ transition ‫الخاصية إلى روابط الصفحة لإنشاء تأثير انتقال عند التمرير‬:

.pagination a {
transition: background-color .3s;
}

Bordered Pagination
‫استخدم‬ border ‫الخاصية لإضافة حدود إلى ترقيم الصفحات‬:

.pagination a {
border: 1px solid #ddd; /* Gray */
}

Rounded Borders
‫ أضف حدوًد ا مستديرة إلى الرابط الأول والأخير في الصفحة‬:‫نصيحة‬:

.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.pagination a:last-child {
border-top-right-radius: 5px;

CSS 162
 border-bottom-right-radius: 5px;
}

Space Between Links

‫ أضف‬:‫نصيحة‬ margin ‫الخاصية إذا كنت لا تريد تجميع روابط الصفحة‬:

.pagination a {
margin: 0 4px; /* 0 is for top and bottom.
Feel free to change it */
}

Pagination Size
‫تغيير حجم الصفحة مع‬ font-size ‫الخاصية‬:

.pagination a {
font-size: 22px;
}

Centered Pagination
‫ قم بلف عنصر الحاوية‬،‫< مثل( لتوسيط ترقيم الصفحات‬div>) ‫ حوله‬text-align:center

.center {
text-align: center;
}

Breadcrumbs
‫"شكل آخر من ترقيم الصفحات يسمى "فتات الخبز‬:

ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}

CSS 163
 ‫‪CSS Multiple Columns‬‬
‫‪CSS Multi-column Layout‬‬
‫‪:‬متعدد الأعمدة تعريًف ا سهًال لأعمدة نصية متعددة ‪ -‬تماًم ا كما هو الحال في الصحف ‪ CSS‬يتيح تخطيط‬

‫‪CSS Multi-column Properties‬‬

‫‪:‬ستتعرف في هذا الفصل على خصائص الأعمدة المتعددة التالية‬

‫‪column-count‬‬

‫‪column-gap‬‬

‫‪column-rule-style‬‬

‫‪column-rule-width‬‬

‫‪column-rule-color‬‬

‫‪column-rule‬‬

‫‪column-span‬‬

‫‪column-width‬‬

‫‪CSS Create Multiple Columns‬‬

‫تحدد الخاصية‬ ‫‪column-count‬‬ ‫‪.‬عدد الأعمدة التي يجب تقسيم العنصر إليها‬
‫‪:‬إلى ثالثة أعمدة >‪ <div‬المثال التالي سوف يقسم النص الموجود في العنصر‬

‫{ ‪div‬‬
‫;‪column-count: 3‬‬
‫}‬

‫‪CSS Specify the Gap Between Columns‬‬

‫تحدد الخاصية‬ ‫‪column-gap‬‬ ‫‪.‬الفجوة بين الأعمدة‬
‫‪:‬يحدد المثال التالي فجوة قدرها ‪ 40‬بكسل بين الأعمدة‬

‫‪CSS‬‬ ‫‪164‬‬
 div {
column-gap: 40px;
}

CSS Column Rules

‫تحدد الخاصية‬ column-rule-style ‫نمط القاعدة بين الأعمدة‬:

div {
column-rule-style: solid;
}

‫تحدد الخاصية‬ column-rule-width ‫عرض القاعدة بين الأعمدة‬:

div {
column-rule-width: 1px;
}

‫تحدد الخاصية‬ column-rule-color ‫لون القاعدة بين الأعمدة‬:

div {
column-rule-color: lightblue;
}

‫الخاصية‬ column-rule ‫ هي خاصية مختصرة لتعيين كافة خصائص‬column-rule-* ‫أعاله‬.

‫يعين المثال التالي عرض القاعدة ونمطها ولونها بين الأعمدة‬:

div {
column-rule: 1px solid lightblue;
}

Specify How Many Columns an Element Should Span

‫تحدد الخاصية‬ column-span ‫عدد الأعمدة التي يجب أن يمتد العنصر عبرها‬.

‫< يحدد المثال التالي أن العنصر‬h2> ‫يجب أن يمتد عبر كافة الأعمدة‬:

h2 {
column-span: all;
}

Specify The Column Width

CSS 165
 ‫تحدد الخاصية‬ ‫‪column-width‬‬ ‫‪.‬عرًض ا مثالًي ا مقترًح ا لألعمدة‬

‫‪:‬يحدد المثال التالي أن العرض الأمثل المقترح لألعمدة يجب أن يكون ‪ 100‬بكسل‬

‫{ ‪div‬‬
‫;‪column-width: 100px‬‬
‫}‬

‫‪CSS User Interface‬‬

‫‪:‬التالية ‪ CSS‬ستتعرف في هذا الفصل على خصائص واجهة مستخدم‬

‫‪resize‬‬

‫‪outline-offset‬‬

‫‪CSS Resizing‬‬
‫تحدد الخاصية‬ ‫‪resize‬‬ ‫‪.‬ما إذا كان (وكيف) يجب على المستخدم تغيير حجم العنصر‬

‫{ ‪div‬‬
‫;‪resize: horizontal‬‬
‫;‪overflow: auto‬‬
‫}‬

‫‪:‬فقط >‪ <div‬يتيح المثال التالي للمستخدم تغيير حجم ارتفاع عنصر‬

‫{ ‪div‬‬
‫;‪resize: vertical‬‬
‫;‪overflow: auto‬‬
‫}‬

‫‪ <div>:‬يتيح المثال التالي للمستخدم تغيير حجم ارتفاع وعرض عنصر‬

‫{ ‪div‬‬
‫;‪resize: both‬‬
‫;‪overflow: auto‬‬
‫}‬

‫‪:‬افتراضًي ا‪ .‬هنا‪ ،‬استخدمنا خاصية تغيير الحجم لتعطيل إمكانية تغيير الحجم >‪ <textarea‬في العديد من المتصفحات‪ ،‬يمكن تغيير حجم‬

‫{ ‪textarea‬‬
‫;‪resize: none‬‬
‫}‬

‫‪CSS‬‬ ‫‪166‬‬
 ‫‪CSS Outline Offset‬‬
‫تضيف الخاصية‬ ‫‪outline-offset‬‬ ‫‪.‬مسافة بين المخطط التفصيلي وحافة أو حدود العنصر‬

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

‫يستخدم المثال التالي‬ ‫‪outline-offset‬‬ ‫‪:‬الخاصية لإضافة مسافة بين الحد والمخطط التفصيلي‬

‫{ ‪div.ex1‬‬
‫;‪margin: 20px‬‬
‫;‪border: 1px solid black‬‬
‫;‪outline: 4px solid red‬‬
‫;‪outline-offset: 15px‬‬
‫}‬

‫{ ‪div.ex2‬‬
‫;‪margin: 10px‬‬
‫;‪border: 1px solid black‬‬
‫;‪outline: 5px dashed blue‬‬
‫;‪outline-offset: 5px‬‬
‫}‬

‫‪CSS Variables - The var() Function‬‬

‫‪CSS Variables‬‬
‫يتم استخدام الدالة‬ ‫)(‪var‬‬ ‫‪ CSS.‬لإدراج قيمة متغير‬

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

‫‪The Traditional Way‬‬

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

‫} ;‪body { background-color: #1e90ff‬‬

‫} ;‪h2 { border-bottom: 2px solid #1e90ff‬‬

‫{ ‪.container‬‬
‫;‪color: #1e90ff‬‬
‫;‪background-color: #ffffff‬‬
‫;‪padding: 15px‬‬
‫}‬

‫{ ‪button‬‬
‫;‪background-color: #ffffff‬‬
‫;‪color: #1e90ff‬‬

‫‪CSS‬‬ ‫‪167‬‬
 ‫;‪border: 1px solid #1e90ff‬‬
‫;‪padding: 5px‬‬
‫}‬

‫‪CSS Box Sizing‬‬

‫‪CSS Box Sizing‬‬
‫‪ CSS‬تسمح لنا خاصية‬ ‫‪box-sizing‬‬ ‫‪.‬بتضمين الحشو والحدود في العرض والارتفاع الإجمالي للعنصر‬

‫‪How var() Works‬‬

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

‫‪.‬لإنشاء متغير بنطاق محلي‪ ،‬قم بإعالنه داخل المحدد الذي سيستخدمه‬
‫المثال التالي يساوي المثال أعاله‪ ،‬ولكن هنا نستخدم الدالة‬ ‫)(‪var‬‬ ‫‪.‬‬
‫بعد ذلك‪ ،‬نستخدم ‪--white).‬و ‪ (--blue‬أولًا ‪ ،‬نعلن عن متغيرين عالميين‬ ‫)(‪var‬‬ ‫‪:‬الدالة لإدراج قيمة المتغيرات لاحًق ا في ورقة الأنماط‬

‫{ ‪:root‬‬
‫;‪--blue: #1e90ff‬‬
‫;‪--white: #ffffff‬‬
‫}‬

‫} ;)‪body { background-color: var(--blue‬‬

‫} ;)‪h2 { border-bottom: 2px solid var(--blue‬‬

‫{ ‪.container‬‬
‫;)‪color: var(--blue‬‬
‫;)‪background-color: var(--white‬‬
‫;‪padding: 15px‬‬
‫}‬

‫{ ‪button‬‬
‫;)‪background-color: var(--white‬‬
‫;)‪color: var(--blue‬‬
‫;)‪border: 1px solid var(--blue‬‬
‫;‪padding: 5px‬‬
‫}‬

‫‪:‬هي )(‪ var‬مزايا استخدام‬

‫يجعل قراءة الكود أسهل (أكثر قابلية للفهم)‬

‫يجعل تغيير قيم الألوان أسهل بكثير‬

‫‪:‬لتغيير اللون الأزرق والأبيض إلى اللون الأزرق والأبيض الأكثر نعومة‪ ،‬تحتاج فقط إلى تغيير القيمتين المتغيرتين‬

‫{ ‪:root‬‬
‫;‪--blue: #6495ed‬‬
‫;‪--white: #faf0e6‬‬

‫‪CSS‬‬ ‫‪168‬‬
 }

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}

button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}

CSS Overriding Variables

Override Global Variable With Local Variable
‫ بينما يمكن استخدام المتغيرات‬،‫استخدام المتغيرات العامة من خالل المستند بأكمله‬/‫لقد تعلمنا من الصفحة السابقة أنه يمكن الوصول إلى‬
‫المحلية فقط داخل المحدد الذي تم الإعالن عنه‬.
‫انظر إلى المثال من الصفحة السابقة‬:

:root {
--blue: #1e90ff;
--white: #ffffff;
}

body {
background-color: var(--blue);
}

h2 {
border-bottom: 2px solid var(--blue);
}

.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}

button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}

‫في بعض الأحيان نريد أن تتغير المتغيرات فقط في قسم معين من الصفحة‬.

CSS 169
 ‫ يمكننا إعادة تعريف المتغير‬،‫ بعد ذلك‬.‫ لنفترض أننا نريد لوًن ا مختلًف ا من اللون الأزرق لعناصر الزر‬--blue ‫ عندما نستخدم‬.‫ داخل محدد الزر‬var(--
blue) ‫ فإنه سيستخدم قيمة المتغير المحلي‬،‫ داخل هذا المحدد‬--blue ‫المعلنة هنا‬.

‫ نرى أن المتغير المحلي‬--blue ‫ سيتجاوز المتغير‬--blue ‫العام لعناصر الزر‬:

:root {
--blue: #1e90ff;
--white: #ffffff;
}

body {
background-color: var(--blue);
}

h2 {
border-bottom: 2px solid var(--blue);
}

.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}

button {
--blue: #0000ff; /* local variable will override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}

Add a New Local Variable

‫ مثل هذا‬،‫ فيمكننا أيًض ا الإعالن عن متغير محلي جديد‬،‫إذا كان سيتم استخدام متغير في مكان واحد فقط‬:

:root {
--blue: #1e90ff;
--white: #ffffff;
}

body {
background-color: var(--blue);
}

h2 {
border-bottom: 2px solid var(--blue);
}

.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}

button {
--button-blue: #0000ff; /* new local variable */

CSS 170
 ‫;)‪background-color: var(--white‬‬
‫;)‪color: var(--button-blue‬‬
‫;)‪border: 1px solid var(--button-blue‬‬
‫;‪padding: 5px‬‬
‫}‬

‫‪Without the CSS box-sizing Property‬‬

‫‪:‬بشكل افتراضي‪ ،‬يتم حساب العرض والارتفاع للعنصر كما يلي‬

‫العرض ‪ +‬الحشو ‪ +‬الحدود = العرض الفعلي لارتفاع العنصر‬

‫الحشو ‪ +‬الحدود = الارتفاع الفعلي للعنصر ‪+‬‬
‫هذا يعني‪ :‬عندما تقوم بتعيين عرض‪/‬ارتفاع عنصر ما‪ ،‬غالًب ا ما يظهر العنصر أكبر مما قمت بتعيينه (نظًر ا لأنه تتم إضافة حدود العنصر والحشوة‬
‫‪.‬إلى العرض‪/‬الارتفاع المحدد للعنصر)‬

‫‪:‬لهما نفس العرض والارتفاع المحددين >‪ <div‬يوضح الرسم التوضيحي التالي عنصرين‬

‫{ ‪.div1‬‬
‫;‪width: 300px‬‬
‫;‪height: 100px‬‬
‫;‪border: 1px solid blue‬‬
‫}‬

‫‪):‬يحتوي على مساحة حشو محددة ‪ div2‬لأن( أعاله بأحجام مختلفة في النتيجة >‪ <div‬ينتهي عنصرا‬

‫{ ‪.div2‬‬
‫;‪width: 300px‬‬
‫;‪height: 100px‬‬
‫;‪padding: 50px‬‬
‫;‪border: 1px solid red‬‬
‫}‬

‫الملكية‬ ‫‪box-sizing‬‬ ‫‪.‬تحل هذه المشكلة‬

‫‪With the CSS box-sizing Property‬‬

‫تسمح لنا الخاصية‬ ‫‪box-sizing‬‬ ‫‪.‬بتضمين الحشو والحدود في العرض والارتفاع الإجمالي للعنصر‬
‫إذا قمت بتعيين‬ ‫;‪box-sizing: border-box‬‬ ‫‪:‬عنصر‪ ،‬فسيتم تضمين الحشو والحدود في العرض والارتفاع‬

‫‪CSS‬‬ ‫‪171‬‬
 ‫{ ‪.div1‬‬
‫;‪width: 300px‬‬
‫;‪height: 100px‬‬
‫;‪border: 1px solid blue‬‬
‫;‪box-sizing: border-box‬‬
‫}‬

‫إليك نفس المثال المذكور أعاله‪ ،‬مع‬ ‫;‪box-sizing: border-box‬‬ ‫‪:‬إلى كليهما >‪ <div‬إضافة عنصري‬

‫{ ‪.div2‬‬
‫;‪width: 300px‬‬
‫;‪height: 100px‬‬
‫;‪padding: 50px‬‬
‫;‪border: 1px solid red‬‬
‫;‪box-sizing: border-box‬‬
‫}‬

‫‪ the‬نظًر ا لأن نتيجة استخدام‬ ‫;‪box-sizing: border-box‬‬ ‫هي أفضل بكثير‪ ،‬يرغب العديد من المطورين في أن تعمل جميع العناصر الموجودة على‬
‫‪.‬صفحاتهم بهذه الطريقة‬

‫‪ box-sizing:‬يضمن الكود أدناه أن يتم تحديد حجم جميع العناصر بهذه الطريقة الأكثر سهولة‪ .‬تستخدم العديد من المتصفحات بالفعل‬
‫‪.‬العديد من عناصر النماذج (ولكن ليس كلها ‪ -‬ولهذا السبب تبدو المدخالت ومناطق النص مختلفة عند العرض‪%100 :‬؛) ;‪border-box‬‬

‫‪:‬إن تطبيق هذا على جميع العناصر أمر آمن وحكيم‬

‫{ *‬
‫;‪box-sizing: border-box‬‬
‫}‬

‫‪CSS Media Queries‬‬

‫‪CSS Media Queries‬‬
‫أتاحت القاعدة‬ ‫‪@media‬‬ ‫‪.‬تحديد قواعد نمط مختلفة لأنواع الوسائط المختلفة ‪ CSS2،‬التي تم تقديمها في ‪،‬‬
‫‪.‬فبدلًا من البحث عن نوع الجهاز‪ ،‬فإنهم ينظرون إلى قدرة الجهاز ‪ CSS2:‬بتوسيع فكرة أنواع وسائط ‪ CSS3‬قامت استعالمات الوسائط في‬

‫‪:‬يمكن استخدام استعالمات الوسائط للتحقق من أشياء كثيرة‪ ،‬مثل‬

‫عرض وارتفاع إطار العرض‬

‫اتجاه إطار العرض (أفقي أو عمودي)‬

‫دقة‬

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

‫‪CSS Media Types‬‬

‫‪Value‬‬ ‫‪Description‬‬

‫‪all‬‬ ‫يستخدم لجميع أجهزة نوع الوسائط‬

‫‪print‬‬ ‫يستخدم لوضع معاينة الطباعة‬

‫‪screen‬‬ ‫‪.‬يستخدم لشاشات الكمبيوتر والأجهزة اللوحية والهواتف الذكية وما إلى ذلك‬

‫‪CSS‬‬ ‫‪172‬‬
 ‫‪CSS Common Media Features‬‬
‫‪:‬فيما يلي بعض ميزات الوسائط الشائعة الاستخدام‬

‫‪Value‬‬ ‫‪Description‬‬

‫‪orientation‬‬ ‫اتجاه إطار العرض‪ .‬المناظر الطبيعية أو صورة‬

‫‪max-height‬‬ ‫أقصى ارتفاع لإطار العرض‬

‫‪min-height‬‬ ‫الحد الأدنى لارتفاع إطار العرض‬

‫‪height‬‬ ‫ارتفاع إطار العرض (بما في ذلك شريط التمرير)‬

‫‪max-width‬‬ ‫أقصى عرض لإطار العرض‬

‫‪min-width‬‬ ‫الحد الأدنى لعرض إطار العرض‬

‫‪width‬‬ ‫عرض إطار العرض (بما في ذلك شريط التمرير)‬

‫‪Media Query Syntax‬‬

‫‪.‬يتكون استعالم الوسائط من نوع الوسائط ويمكن أن يحتوي على ميزة وسائط واحدة أو أكثر‪ ،‬والتي يتم تحليلها إما إلى صواب أو خطأ‬
‫{ )‪@media not|only mediatype and (media feature) and (media feature‬‬ ‫};‪CSS-Code‬‬

‫أو فقط ‪ ،‬فيجب عليك أيًض ا تحديد نوع ‪ not‬نوع الوسائط اختياري (إذا تم حذفه‪ ،‬فسيتم تعيينه على الكل)‪ .‬ومع ذلك‪ ،‬إذا كنت تستخدم‬
‫‪ .‬الوسائط‬
‫تكون نتيجة الاستعالم صحيحة إذا كان نوع الوسائط المحدد يطابق نوع الجهاز الذي يتم عرض المستند عليه وكانت كافة ميزات الوسائط في‬
‫استعالم الوسائط صحيحة‪ .‬عندما يكون استعالم الوسائط صحيًح ا‪ ،‬يتم تطبيق ورقة الأنماط أو قواعد النمط المقابلة‪ ،‬باتباع القواعد المتتالية‬
‫‪.‬العادية‬
‫‪ :‬و ‪ Only‬و ‪ not‬معنى الكلمات الرئيسية‬
‫‪.‬لا‪ :‬هذه الكلمة الأساسية تعكس معنى استعالم الوسائط بالكامل‬

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

‫>"‪<link rel="stylesheet" media="print" href="print.css‬‬

‫>"‪<link rel="stylesheet" media="screen" href="screen.css‬‬
‫>"‪<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css‬‬
‫‪<link rel="stylesheet" media="screen and (min-width: 701px) and‬‬
‫>"‪(max-width: 900px)" href="example2.css‬‬
‫‪etc....‬‬

‫‪Media Queries Simple Examples‬‬

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

‫يغير المثال التالي لون الخلفية إلى اللون الأخضر الفاتح إذا كان عرض إطار العرض ‪ 480‬بكسل أو أكثر (إذا كان إطار العرض أقل من ‪480‬‬
‫‪:‬بكسل‪ ،‬فسيكون لون الخلفية وردًي ا)‬

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

‫{ ‪body‬‬
‫;‪background-color: lightgreen‬‬

‫‪CSS‬‬ ‫‪173‬‬
 }
}

480 ‫ بكسل أو أكثر (إذا كان إطار العرض أقل من‬480 ‫يوضح المثال التالي قائمة ستطفو على يسار الصفحة إذا كان عرض إطار العرض‬
)‫ فستكون القائمة أعلى المحتوى‬،‫بكسل‬:

@media screen and (min-width: 480px) {

#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}

CSS Media Queries - More Examples

CSS Media Queries - More Examples
‫دعونا نلقي نظرة على بعض الأمثلة الإضافية لاستخدام استعالمات الوسائط‬.

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

/* Set the background color of body to tan */

body {
background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}

CSS 174
 Media Queries For Menus
‫ والتي تختلف في التصميم باختالف أحجام الشاشات‬،‫ نستخدم استعالمات الوسائط لإنشاء قائمة تنقل سريعة الاستجابة‬،‫في هذا المثال‬.

/* The navbar container */

.topnav {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack on top
of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}

Media Queries For Columns

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

/* Create four equal columns that floats next to each other */

.column {
float: left;

CSS 175
 width: 25%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}

/* On screens that are 600px wide or less, make the columns stack on top of
each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

‫ وهي استخدام‬،‫ هناك طريقة أكثر حداثة لإنشاء تخطيطات الأعمدة‬:‫ نصيحة‬CSS Flexbox (‫)انظر المثال أدناه‬. ‫ فهو غير مدعوم في‬،‫ومع ذلك‬
Internet Explorer 10 ‫ إذا كنت بحاجة إلى دعم‬.‫ والإصدارات السابقة‬IE6-10، )‫استخدم العوامات (كما هو موضح أعاله‬.
‫لمعرفة المزيد حول وحدة تخطيط الصندوق المرن‬، .
‫لمعرفة المزيد حول تصميم الويب سريع الاستجابة‬، .

/* Container for flexboxes */

.row {
display: flex;
flex-wrap: wrap;
}

/* Create four equal columns */

.column {
flex: 25%;
padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}

/* On screens that are 600px wide or less, make the columns stack on
top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}

Hide Elements With Media Queries

‫الاستخدام الشائع الآخر لاستعالمات الوسائط هو إخفاء العناصر الموجودة على أحجام مختلفة للشاشات‬:

CSS 176
 /* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}

Change Font Size With Media Queries

‫يمكنك أيًض ا استخدام استعالمات الوسائط لتغيير حجم خط عنصر ما على أحجام شاشات مختلفة‬:

/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}

/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}

Orientation: Portrait / Landscape

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

@media only screen and (orientation: landscape) {

body {
background-color: lightblue;
}
}

CSS 177
 ‫‪Min Width to Max Width‬‬
‫‪. (max-width:‬يمكنك أيًض ا استخدام القيم لتعيين الحد الأدنى للعرض والحد الأقصى للعرض‬ ‫‪.. ) and (min-width:‬‬ ‫) ‪..‬‬

‫‪ <div>:‬على سبيل المثال‪ ،‬عندما يتراوح عرض المتصفح بين ‪ 600‬و‪ 900‬بكسل‪ ،‬قم بتغيير مظهر عنصر‬

‫{ )‪@media screen and (max-width: 900px) and (min-width: 600px‬‬

‫{ ‪div.example‬‬
‫;‪font-size: 50px‬‬
‫;‪padding: 50px‬‬
‫;‪border: 8px solid black‬‬
‫;‪background: yellow‬‬
‫}‬
‫}‬

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

‫‪/* When the width is between 600px and 900px or above 1100px - change the‬‬
‫‪appearance of <div> */‬‬
‫{ )‪@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px‬‬
‫{ ‪div.example‬‬
‫;‪font-size: 50px‬‬
‫;‪padding: 50px‬‬
‫;‪border: 8px solid black‬‬
‫;‪background: yellow‬‬
‫}‬
‫}‬

‫‪CSS Flexbox‬‬

‫‪CSS Flexbox Layout Module‬‬

‫‪:‬كان هناك أربعة أوضاع للتخطيط ‪ Flexbox،‬قبل وحدة تخطيط‬

‫حظر‪ ،‬لألقسام الموجودة في صفحة الويب‬

‫مضمنة‪ ،‬للنص‬

‫الجدول‪ ،‬لبيانات الجدول ثنائي الأبعاد‬

‫تم وضعه‪ ،‬لموضع واضح للعنصر‬

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

‫‪Flexbox Elements‬‬
‫‪.‬عليك أولًا تحديد حاوية مرنة ‪ Flexbox،‬للبدء في استخدام نموذج‬

‫‪CSS‬‬ ‫‪178‬‬
 ‫‪.‬يمثل العنصر أعاله حاوية مرنة (المنطقة الزرقاء) تحتوي على ثالثة عناصر مرنة‬

‫مثال‬
‫‪:‬حاوية مرنة تحتوي على ثالثة عناصر مرنة‬

‫>"‪<div class="flex-container‬‬
‫>‪<div>1</div‬‬
‫>‪<div>2</div‬‬
‫>‪<div>3</div‬‬
‫>‪</div‬‬

‫‪CSS Flex Container‬‬

‫)‪Parent Element (Container‬‬
‫‪ :‬كما حددنا في الفصل السابق‪ ،‬هذه حاوية مرنة (المنطقة الزرقاء) تحتوي على ثالثة عناصر مرنة‬

‫تصبح الحاوية المرنة مرنة عن طريق ضبط‬ ‫‪display‬‬ ‫الخاصية على‬ ‫‪flex‬‬ ‫‪:‬‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫}‬

‫‪:‬خصائص الحاوية المرنة هي‬

‫‪flex-direction‬‬

‫‪flex-wrap‬‬

‫‪flex-flow‬‬

‫‪justify-content‬‬

‫‪align-items‬‬

‫‪align-content‬‬

‫‪The flex-direction Property‬‬

‫تحدد الخاصية‬ ‫‪flex-direction‬‬ ‫‪.‬الاتجاه الذي تريد الحاوية تكديس العناصر المرنة فيه‬

‫‪CSS‬‬ ‫‪179‬‬
 ‫‪Example:‬‬

‫تقوم القيمة‬ ‫‪column‬‬ ‫‪:‬بتكديس العناصر المرنة عمودًي ا (من الأعلى إلى الأسفل)‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪flex-direction: column‬‬
‫}‬

‫تقوم القيمة‬ ‫‪column-reverse‬‬ ‫‪:‬بتكديس العناصر المرنة عمودًي ا (ولكن من الأسفل إلى الأعلى)‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪flex-direction: column-reverse‬‬
‫}‬

‫تقوم القيمة‬ ‫‪row‬‬ ‫‪:‬بتكديس العناصر المرنة أفقًي ا (من اليسار إلى اليمين)‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪flex-direction: row‬‬
‫}‬

‫تقوم القيمة‬ ‫‪row-reverse‬‬ ‫‪:‬بتكديس العناصر المرنة أفقًي ا (ولكن من اليمين إلى اليسار)‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪flex-direction: row-reverse‬‬
‫}‬

‫‪The flex-wrap Property‬‬

‫تحدد الخاصية‬ ‫‪flex-wrap‬‬ ‫‪.‬ما إذا كان يجب التفاف العناصر المرنة أم لا‬
‫تحتوي الأمثلة أدناه على ‪ 12‬عنصًر ا مرًن ا لتوضيح‬ ‫‪flex-wrap‬‬ ‫‪.‬الخاصية بشكل أفضل‬

‫‪CSS‬‬ ‫‪180‬‬
 Example:

‫تحدد القيمة‬ wrap ‫أن العناصر المرنة سوف تلتف إذا لزم الأمر‬:

.flex-container {
display: flex;
flex-wrap: wrap;
}

‫تحدد القيمة‬ nowrap )‫أن العناصر المرنة لن تلتف (هذا هو الإعداد الافتراضي‬:

.flex-container {
display: flex;
flex-wrap: nowrap;
}

‫تحدد القيمة‬ wrap-reverse ‫ بترتيب عكسي‬،‫أن العناصر المرنة سوف تلتف إذا لزم الأمر‬:

.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}

The flex-flow Property

‫الخاصية‬ flex-flow ‫هي خاصية مختصرة لتعيين كل من الخصائص‬ flex-direction ‫و‬ flex-wrap .

.flex-container {
display: flex;
flex-flow: row wrap;
}

The justify-content Property

‫يتم استخدام الخاصية‬ justify-content ‫لمحاذاة العناصر المرنة‬:

CSS 181
 Example:

‫تقوم القيمة‬ center ‫بمحاذاة العناصر المرنة في وسط الحاوية‬:

.flex-container {
display: flex;
justify-content: center;
}

‫تقوم القيمة‬ flex-start )‫بمحاذاة العناصر المرنة في بداية الحاوية (هذا هو الإعداد الافتراضي‬:

.flex-container {
display: flex;
justify-content: flex-start;
}

‫تقوم القيمة‬ flex-end ‫بمحاذاة العناصر المرنة في نهاية الحاوية‬:

.flex-container {
display: flex;
justify-content: flex-end;
}

‫تعرض القيمة‬ space-around ‫العناصر المرنة مع وجود مسافة قبل الأسطر وبينها وبعدها‬:

.flex-container {
display: flex;
justify-content: space-around;
}

‫تعرض القيمة‬ space-between ‫العناصر المرنة مع وجود مسافة بين السطور‬:

.flex-container {
display: flex;
justify-content: space-between;
}

The align-items Property

‫يتم استخدام الخاصية‬ align-items ‫لمحاذاة العناصر المرنة‬.

CSS 182
 ‫في هذه الأمثلة‪ ،‬نستخدم حاوية بارتفاع ‪ 200‬بكسل لتوضيح‬ ‫‪align-items‬‬ ‫‪.‬الخاصية بشكل أفضل‬

‫‪Example:‬‬

‫تقوم القيمة‬ ‫‪center‬‬ ‫‪:‬بمحاذاة العناصر المرنة في منتصف الحاوية‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪height: 200px‬‬
‫;‪align-items: center‬‬
‫}‬

‫تقوم القيمة‬ ‫‪flex-start‬‬ ‫‪:‬بمحاذاة العناصر المرنة الموجودة أعلى الحاوية‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪height: 200px‬‬
‫;‪align-items: flex-start‬‬
‫}‬

‫تقوم القيمة‬ ‫‪flex-end‬‬ ‫‪:‬بمحاذاة العناصر المرنة الموجودة أسفل الحاوية‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪height: 200px‬‬
‫;‪align-items: flex-end‬‬
‫}‬

‫تقوم القيمة‬ ‫‪stretch‬‬ ‫‪:‬بتمديد العناصر المرنة لملء الحاوية (هذا هو الإعداد الافتراضي)‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪height: 200px‬‬
‫;‪align-items: stretch‬‬
‫}‬

‫تقوم القيمة‬ ‫‪baseline‬‬ ‫‪:‬بمحاذاة العناصر المرنة مثل محاذاة خطوط الأساس الخاصة بها‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪height: 200px‬‬

‫‪CSS‬‬ ‫‪183‬‬
 ‫;‪align-items: baseline‬‬
‫}‬

‫‪:‬مالحظة‪ :‬يستخدم المثال حجم خط مختلًف ا لتوضيح أن العناصر تتم محاذاتها بواسطة الخط الأساسي للنص‬

‫‪The align-content Property‬‬

‫يتم استخدام الخاصية‬ ‫‪align-content‬‬ ‫‪.‬لمحاذاة الخطوط المرنة‬

‫في هذه الأمثلة‪ ،‬نستخدم حاوية بارتفاع ‪ 600‬بكسل‪ ،‬مع‬ ‫‪flex-wrap‬‬ ‫تعيين الخاصية على‬ ‫‪wrap‬‬ ‫لتوضيح ‪،‬‬ ‫‪align-content‬‬ ‫‪.‬الخاصية بشكل أفضل‬

‫‪Example:‬‬

‫تعرض القيمة‬ ‫‪space-between‬‬ ‫‪:‬الخطوط المرنة مع وجود مسافة متساوية بينها‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪height: 600px‬‬
‫;‪flex-wrap: wrap‬‬
‫;‪align-content: space-between‬‬
‫}‬

‫تعرض القيمة‬ ‫‪space-around‬‬ ‫‪:‬الخطوط المرنة مع وجود مسافة قبلها وبينها وبعدها‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪height: 600px‬‬
‫;‪flex-wrap: wrap‬‬
‫;‪align-content: space-around‬‬
‫}‬

‫تقوم القيمة‬ ‫‪stretch‬‬ ‫‪:‬بتمديد الخطوط المرنة لتشغل المساحة المتبقية (هذا هو الإعداد الافتراضي)‬

‫‪CSS‬‬ ‫‪184‬‬
 .flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}

‫تعرض القيمة‬ center ‫الخطوط المرنة في منتصف الحاوية‬:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}

‫تعرض القيمة‬ flex-start ‫الخطوط المرنة في بداية الحاوية‬:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}

‫تعرض القيمة‬ flex-end ‫الخطوط المرنة في نهاية الحاوية‬:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}

Perfect Centering
‫ التوسيط المثالي‬:‫في المثال التالي سوف نقوم بحل مشكلة نمطية شائعة جًد ا‬.

‫ قم بتعيين كل من الخصائص‬:‫الحل‬ justify-content ‫و‬ align-items ‫على‬ center ، ‫وسيتم توسيط العنصر المرن بشكل مثالي‬:

CSS 185
 ‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪height: 300px‬‬
‫;‪justify-content: center‬‬
‫;‪align-items: center‬‬
‫}‬

‫‪CSS Flex Items‬‬

‫)‪Child Elements (Items‬‬
‫‪.‬تصبح العناصر الفرعية المباشرة للحاوية المرنة تلقائًي ا عناصر مرنة (مرنة)‬

‫‪.‬يمثل العنصر أعاله أربعة عناصر مرنة زرقاء داخل حاوية مرنة رمادية اللون‬

‫>"‪<div class="flex-container‬‬
‫>‪<div>1</div‬‬
‫>‪<div>2</div‬‬
‫>‪<div>3</div‬‬
‫>‪<div>4</div‬‬
‫>‪</div‬‬

‫‪:‬خصائص العنصر المرن هي‬

‫‪order‬‬

‫‪flex-grow‬‬

‫‪flex-shrink‬‬

‫‪flex-basis‬‬

‫‪flex‬‬

‫‪align-self‬‬

‫‪The order Property‬‬

‫تحدد الخاصية‬ ‫‪order‬‬ ‫‪.‬ترتيب العناصر المرنة‬

‫‪.‬ليس من الضروري أن يظهر العنصر المرن الأول في الكود كعنصر أول في التخطيط‬
‫‪.‬يجب أن تكون قيمة الطلب رقًم ا‪ ،‬والقيمة الافتراضية هي ‪0‬‬

‫‪:‬يمكن لخاصية الطلب تغيير ترتيب العناصر المرنة‬

‫‪CSS‬‬ ‫‪186‬‬
 <div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>

The flex-grow Property

‫تحدد الخاصية‬ flex-grow ‫مقدار نمو العنصر المرن مقارنة ببقية العناصر المرنة‬.

0 ‫ والقيمة الافتراضية هي‬،‫يجب أن تكون القيمة رقًم ا‬.

<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>

The flex-shrink Property

‫تحدد الخاصية‬ flex-shrink ‫مقدار انكماش العنصر المرن مقارنة ببقية العناصر المرنة‬.

1 ‫ والقيمة الافتراضية هي‬،‫يجب أن تكون القيمة رقًم ا‬.

‫لا تدع العنصر المرن الثالث يتقلص بقدر العناصر المرنة الأخرى‬:

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

CSS 187
 ‫>‪<div>10</div‬‬
‫>‪</div‬‬

‫‪The flex-basis Property‬‬

‫تحدد الخاصية‬ ‫‪flex-basis‬‬ ‫‪.‬الطول الأولي للعنصر المرن‬

‫‪:‬اضبط الطول الأولي للعنصر المرن الثالث على ‪ 200‬بكسل‬

‫>"‪<div class="flex-container‬‬
‫>‪<div>1</div‬‬
‫>‪<div>2</div‬‬
‫>‪<div style="flex-basis: 200px">3</div‬‬
‫>‪<div>4</div‬‬
‫>‪</div‬‬

‫‪The flex Property‬‬

‫الخاصية‬ ‫‪flex‬‬ ‫عبارة عن خاصية مختصرة لـ و‬ ‫‪flex-grow‬‬ ‫و‬ ‫‪flex-shrink‬‬ ‫وخصائص‬ ‫‪flex-basis‬‬ ‫‪.‬‬

‫‪:‬اجعل العنصر المرن الثالث غير قابل للنمو (‪ ،)0‬وغير قابل للتقلص (‪ ،)0‬وبطول أولي يبلغ ‪ 200‬بكسل‬

‫>"‪<div class="flex-container‬‬
‫>‪<div>1</div‬‬
‫>‪<div>2</div‬‬
‫>‪<div style="flex: 0 0 200px">3</div‬‬
‫>‪<div>4</div‬‬
‫>‪</div‬‬

‫‪The align-self Property‬‬

‫تحدد الخاصية‬ ‫‪align-self‬‬ ‫‪.‬محاذاة العنصر المحدد داخل الحاوية المرنة‬
‫تتجاوز الخاصية‬ ‫‪align-self‬‬ ‫المحاذاة الافتراضية التي تم تعيينها بواسطة خاصية الحاوية‬ ‫‪align-items‬‬ ‫‪.‬‬

‫في هذه الأمثلة‪ ،‬نستخدم حاوية بارتفاع ‪ 200‬بكسل لتوضيح‬ ‫‪align-self‬‬ ‫‪:‬الخاصية بشكل أفضل‬

‫‪:‬قم بمحاذاة العنصر المرن الثالث في منتصف الحاوية‬

‫‪CSS‬‬ ‫‪188‬‬
 ‫>"‪<div class="flex-container‬‬
‫>‪<div>1</div‬‬
‫>‪<div>2</div‬‬
‫>‪<div style="align-self: center">3</div‬‬
‫>‪<div>4</div‬‬
‫>‪</div‬‬

‫‪:‬قم بمحاذاة العنصر المرن الثاني في أعلى الحاوية‪ ،‬والعنصر المرن الثالث في أسفل الحاوية‬

‫>"‪<div class="flex-container‬‬
‫>‪<div>1</div‬‬
‫>‪<div style="align-self: flex-start">2</div‬‬
‫>‪<div style="align-self: flex-end">3</div‬‬
‫>‪<div>4</div‬‬
‫>‪</div‬‬

‫‪CSS Flex Responsive‬‬

‫‪Responsive Flexbox‬‬
‫أنه يمكنك استخدام استعالمات الوسائط لإنشاء تخطيطات مختلفة لأحجام الشاشات والأجهزة ‪ CSS Media Quires‬لقد تعلمت من فصل‬
‫‪.‬المختلفة‬

‫على سبيل المثال‪ ،‬إذا كنت تريد إنشاء تخطيط من عمودين لمعظم أحجام الشاشات‪ ،‬وتخطيط من عمود واحد لأحجام الشاشات الصغيرة (مثل‬
‫‪:‬نقطة توقف محددة (‪ 800‬بكسل في المثال أدناه) ‪ column‬عند ‪ row‬إلى ‪ flex-direction‬الهواتف والأجهزة اللوحية)‪ ،‬فيمكنك تغيير من‬

‫{ ‪.flex-container‬‬
‫;‪display: flex‬‬
‫;‪flex-direction: row‬‬
‫}‬

‫‪/* Responsive layout - makes a one column layout instead of a two-column layout */‬‬
‫{ )‪@media (max-width: 800px‬‬
‫{ ‪.flex-container‬‬
‫;‪flex-direction: column‬‬
‫}‬
‫}‬

‫العناصر المرنة لإنشاء تخطيطات مختلفة لأحجام الشاشات المختلفة‪ .‬لاحظ أنه ‪ flex‬هناك طريقة أخرى وهي تغيير النسبة المئوية لخاصية‬
‫‪:‬الحاوية المرنة حتى يعمل هذا المثال ;‪ flex-wrap: wrap‬يتعين علينا أيًض ا تضمين‬

‫‪CSS‬‬ ‫‪189‬‬
 .flex-container {
display: flex;
flex-wrap: wrap;
}

.flex-item-left {
flex: 50%;
}

.flex-item-right {
flex: 50%;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */

@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}

CSS Grid Layout Module

Grid Layout
‫ توفر وحدة تخطيط الشبكة‬CSS ‫ مما يسهل تصميم صفحات الويب دون الحاجة إلى‬،‫ مع صفوف وأعمدة‬،‫نظام تخطيط قائم على الشبكة‬
‫استخدام العوامات وتحديد المواقع‬.

Grid Elements
‫ مع عنصر فرعي واحد أو أكثر‬،‫يتكون تخطيط الشبكة من عنصر أصل‬.

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

CSS 190
 ‫‪Display Property‬‬
‫حاوية شبكية عند ‪ HTML‬يصبح عنصر‬ ‫‪display‬‬ ‫تعيين الخاصية الخاصة به على‬ ‫‪grid‬‬ ‫أو‬ ‫‪inline-grid‬‬ ‫‪.‬‬

‫{ ‪.grid-container‬‬
‫;‪display: grid‬‬
‫}‬

‫{ ‪.grid-container‬‬
‫;‪display: inline-grid‬‬
‫}‬

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

‫‪Grid Columns‬‬
‫‪ .‬تسمى الخطوط الرأسية لعناصر الشبكة بالأعمدة‬

‫‪Grid Rows‬‬
‫‪ .‬تسمى الخطوط الأفقية لعناصر الشبكة بالصفوف‬

‫‪CSS‬‬ ‫‪191‬‬
 ‫‪Grid Gaps‬‬
‫‪ .‬تسمى المسافات بين كل عمود‪/‬صف بالفجوات‬

‫‪:‬يمكنك ضبط حجم الفجوة باستخدام إحدى الخصائص التالية‬

‫‪column-gap‬‬

‫‪row-gap‬‬

‫‪gap‬‬

‫تحدد الخاصية‬ ‫‪column-gap‬‬ ‫‪:‬الفجوة بين الأعمدة‬

‫{ ‪.grid-container‬‬
‫;‪display: grid‬‬
‫;‪column-gap: 50px‬‬
‫}‬

‫تقوم الخاصية‬ ‫‪row-gap‬‬ ‫‪:‬بتعيين الفجوة بين الصفوف‬

‫{ ‪.grid-container‬‬
‫;‪display: grid‬‬

‫‪CSS‬‬ ‫‪192‬‬
 ‫;‪row-gap: 50px‬‬
‫}‬

‫الخاصية‬ ‫‪gap‬‬ ‫هي خاصية مختصرة‬ ‫‪row-gap‬‬ ‫للخصائص‬ ‫‪column-gap‬‬ ‫‪:‬‬

‫{ ‪.grid-container‬‬
‫;‪display: grid‬‬
‫;‪gap: 50px 100px‬‬
‫}‬

‫يمكن أيًض ا استخدام الخاصية‬ ‫‪gap‬‬ ‫‪:‬لتعيين فجوة الصف ومسافة العمود في قيمة واحدة‬

‫{ ‪.grid-container‬‬
‫;‪display: grid‬‬
‫;‪gap: 50px‬‬
‫}‬

‫‪Grid Lines‬‬
‫‪ .‬تسمى الخطوط الموجودة بين الأعمدة بخطوط الأعمدة‬
‫‪ .‬تسمى الخطوط الموجودة بين الصفوف بخطوط الصف‬

‫‪:‬ارجع إلى أرقام الأسطر عند وضع عنصر الشبكة في حاوية الشبكة‬

‫‪:‬ضع عنصر الشبكة في سطر العمود ‪ ،1‬واتركه ينتهي في سطر العمود ‪3‬‬

‫{ ‪.item1‬‬
‫;‪grid-column-start: 1‬‬
‫;‪grid-column-end: 3‬‬
‫}‬

‫‪:‬ضع عنصر الشبكة في سطر الصف ‪ ،1‬واتركه ينتهي عند سطر الصف ‪3‬‬

‫‪CSS‬‬ ‫‪193‬‬
 ‫{ ‪.item1‬‬
‫;‪grid-row-start: 1‬‬
‫;‪grid-row-end: 3‬‬
‫}‬

‫‪CSS Grid Container‬‬

‫‪Grid Container‬‬
‫يتصرف كحاوية شبكة‪ ،‬يجب عليك تعيين ‪ HTML‬لجعل عنصر‬ ‫‪display‬‬ ‫الخاصية على‬ ‫‪grid‬‬ ‫أو‬ ‫‪inline-grid‬‬ ‫‪.‬‬
‫‪.‬تتكون حاويات الشبكة من عناصر الشبكة‪ ،‬الموضوعة داخل الأعمدة والصفوف‬

‫‪The grid-template-columns Property‬‬

‫تحدد الخاصية‬ ‫‪grid-template-columns‬‬ ‫‪.‬عدد الأعمدة في تخطيط الشبكة‪ ،‬ويمكنها تحديد عرض كل عمود‬

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

‫‪:‬اصنع شبكة مكونة من ‪ 4‬أعمدة‬

‫{ ‪.grid-container‬‬
‫;‪display: grid‬‬
‫;‪grid-template-columns: auto auto auto auto‬‬
‫}‬

‫‪.‬مالحظة‪ :‬إذا كان لديك أكثر من ‪ 4‬عناصر في شبكة مكونة من ‪ 4‬أعمدة‪ ،‬فستضيف الشبكة تلقائًي ا صًف ا جديًد ا لوضع العناصر فيه‬

‫يمكن أيًض ا استخدام الخاصية‬ ‫‪grid-template-columns‬‬ ‫‪.‬لتحديد حجم (عرض) الأعمدة‬

‫‪:‬قم بتعيين حجم لألعمدة الأربعة‬

‫{ ‪.grid-container‬‬
‫;‪display: grid‬‬
‫;‪grid-template-columns: 80px 200px auto 40px‬‬
‫}‬

‫‪CSS‬‬ ‫‪194‬‬
 The grid-template-rows Property
‫تحدد الخاصية‬ grid-template-rows ‫ارتفاع كل صف‬.

‫ حيث تحدد كل قيمة ارتفاع الصف المعني‬،‫القيمة عبارة عن قائمة مفصولة بمسافات‬:

.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}

The justify-content Property

‫يتم استخدام الخاصية‬ justify-content ‫لمحاذاة الشبكة بأكملها داخل الحاوية‬.

‫ يجب أن يكون العرض الإجمالي للشبكة أقل من عرض الحاوية‬:‫مالحظة‬ justify-content ‫حتى يكون للخاصية أي تأثير‬.

.grid-container {
display: grid;
justify-content: space-evenly;
}

.grid-container {
display: grid;
justify-content: space-around;
}

.grid-container {
display: grid;
justify-content: space-between;
}

.grid-container {
display: grid;

CSS 195
 justify-content: center;
}

.grid-container {
display: grid;
justify-content: start;
}

.grid-container {
display: grid;
justify-content: start;
}

.grid-container {
display: grid;
justify-content: end;
}

The align-content Property

align-content ‫يتم استخدام الخاصية لمحاذاة الشبكة بأكملها عمودًي ا داخل الحاوية‬.

‫ يجب أن يكون الارتفاع الإجمالي للشبكة أقل من ارتفاع الحاوية‬:‫مالحظة‬ align-content ‫حتى يكون للخاصية أي تأثير‬.

.grid-container {
display: grid;
height: 400px;
align-content: center;
}

.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}

CSS 196
 .grid-container {
display: grid;
height: 400px;
align-content: space-around;
}

.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}

.grid-container {
display: grid;
height: 400px;
align-content: start;
}

.grid-container {
display: grid;
height: 400px;
align-content: end;
}

CSS Grid Item

Child Elements (Items)

‫ تحتوي حاوية الشبكة على عناصر الشبكة‬.
/‫ ولكن يمكنك تصميم عناصر الشبكة بحيث تمتد إلى أعمدة و‬،‫ في كل صف‬،‫ تحتوي الحاوية على عنصر شبكة واحد لكل عمود‬،‫بشكل افتراضي‬
‫أو صفوف متعددة‬.

The grid-column Property:

‫تحدد الخاصية‬ grid-column ‫العمود (الأعمدة) الذي سيتم وضع العنصر عليه‬.
‫يمكنك تحديد أين سيبدأ العنصر وأين سينتهي العنصر‬.

CSS 197
 ‫مالحظة‪ :‬الخاصية‬ ‫‪grid-column‬‬ ‫هي خاصية مختصرة‬ ‫‪grid-column-start‬‬ ‫للخصائص‬ ‫‪grid-column-end‬‬ ‫‪.‬‬

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

‫‪:‬اجعل "العنصر ‪ "1‬يبدأ من العمود ‪ 1‬وينتهي قبل العمود ‪5‬‬

‫{ ‪.item1‬‬
‫;‪grid-column: 1 / 5‬‬
‫}‬

‫‪:‬يبدأ من العمود ‪ 1‬ويمتد إلى ‪ 3‬أعمدة "‪ "item1‬اجعل‬

‫{ ‪.item1‬‬
‫;‪grid-column: 1 / span 3‬‬
‫}‬

‫‪:‬يبدأ من العمود ‪ 2‬ويمتد إلى ‪ 3‬أعمدة "‪ "item2‬اجعل‬

‫{ ‪.item2‬‬
‫;‪grid-column: 2 / span 3‬‬
‫}‬

‫‪The grid-row Property:‬‬

‫تحدد الخاصية‬ ‫‪grid-row‬‬ ‫‪.‬الصف الذي سيتم وضع العنصر فيه‬
‫‪.‬يمكنك تحديد أين سيبدأ العنصر وأين سينتهي العنصر‬

‫مالحظة‪ :‬الخاصية‬ ‫‪grid-row‬‬ ‫هي خاصية مختصرة‬ ‫‪grid-row-start‬‬ ‫للخصائص‬ ‫‪grid-row-end‬‬ ‫‪.‬‬

‫‪:‬لتحديد عدد الصفوف التي سيمتدها العنصر "‪ "span‬لوضع عنصر‪ ،‬يمكنك الرجوع إلى أرقام الأسطر ‪ ،‬أو استخدام الكلمة الأساسية‬

‫‪CSS‬‬ ‫‪198‬‬
 ‫‪:‬يبدأ في سطر الصف ‪ 1‬وينتهي في سطر الصف ‪ "item1" 4‬اجعل‬

‫{ ‪.item1‬‬
‫;‪grid-row: 1 / 4‬‬
‫}‬

‫‪:‬يبدأ من الصف ‪ 1‬ويمتد إلى صفين "‪ "item1‬اجعل‬

‫{ ‪.item1‬‬
‫;‪grid-row: 1 / 4‬‬
‫}‬

‫‪The grid-area Property‬‬

‫يمكن استخدام الخاصية‬ ‫‪grid-area‬‬ ‫كخاصية مختصرة‬ ‫‪grid-row-start‬‬ ‫للخصائص‬ ‫‪grid-column-start‬‬ ‫و‬ ‫‪grid-row-end‬‬ ‫و‬ ‫‪grid-column-end‬‬ ‫‪.‬‬

‫‪:‬اجعل "العنصر ‪ "8‬يبدأ في سطر الصف ‪ 1‬وسطر العمود ‪ ،2‬وينتهي في سطر الصف ‪ 5‬وسطر العمود ‪6‬‬

‫{ ‪.item8‬‬
‫;‪grid-area: 1 / 2 / 5 / 6‬‬
‫}‬

‫‪:‬يبدأ من سطر الصف ‪ 2‬وسطر العمود ‪ ،1‬ويمتد إلى صفين و‪ 3‬أعمدة "‪ "item8‬اجعل‬

‫{ ‪.item8‬‬
‫;‪grid-area: 2 / 1 / span 2 / span 3‬‬
‫}‬

‫‪Naming Grid Items‬‬

‫يمكن أيًض ا استخدام الخاصية‬ ‫‪grid-area‬‬ ‫‪.‬لتعيين أسماء لعناصر الشبكة‬

‫‪CSS‬‬ ‫‪199‬‬
 ‫يمكن الإشارة إلى عناصر الشبكة المسماة بواسطة‬ ‫‪grid-template-areas‬‬ ‫‪.‬خاصية حاوية الشبكة‬

‫‪:‬ويمتد على جميع الأعمدة الخمسة في تخطيط شبكة مكون من خمسة أعمدة "‪ "myArea‬يحصل العنصر ‪ 1‬على الاسم‬

‫{ ‪.item1‬‬
‫;‪grid-area: myArea‬‬
‫}‬
‫{ ‪.grid-container‬‬
‫;'‪grid-template-areas: 'myArea myArea myArea myArea myArea‬‬

‫) ' ' ( يتم تعريف كل صف بواسطة الفواصل العليا‬

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

‫‪:‬بتوسيع عمودين في تخطيط شبكة مكون من خمسة أعمدة (تمثل عالمات الفترة عناصر بدون اسم) "‪ "myArea‬اسمح لـ‬

‫{ ‪.item1‬‬
‫;‪grid-area: myArea‬‬
‫}‬
‫{ ‪.grid-container‬‬
‫;'‪grid-template-areas: 'myArea myArea . . .‬‬
‫}‬

‫‪:‬لتحديد صفين‪ ،‬حدد عمود الصف الثاني داخل مجموعة أخرى من الفواصل العليا‬

‫‪ :‬يمتد إلى عمودين وصفين "‪ "item1‬اجعل‬

‫{ ‪.grid-container‬‬
‫;'‪grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .‬‬
‫}‬

‫‪:‬قم بتسمية كافة العناصر‪ ،‬وقم بإنشاء قالب صفحة ويب جاهز لالستخدام‬

‫‪.item1‬‬ ‫{‬ ‫‪grid-area:‬‬ ‫} ;‪header‬‬

‫‪.item2‬‬ ‫{‬ ‫‪grid-area:‬‬ ‫} ;‪menu‬‬
‫‪.item3‬‬ ‫{‬ ‫‪grid-area:‬‬ ‫} ;‪main‬‬
‫‪.item4‬‬ ‫{‬ ‫‪grid-area:‬‬ ‫} ;‪right‬‬
‫} ;‪.item5 { grid-area: footer‬‬

‫{ ‪.grid-container‬‬
‫‪grid-template-areas:‬‬
‫'‪'header header header header header header‬‬
‫'‪'menu main main main right right‬‬

‫‪CSS‬‬ ‫‪200‬‬
 'menu footer footer footer footer footer';
}

The Order of the Items

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

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

‫يمكنك إعادة ترتيب أحجام شاشات معينة باستخدام استعالمات الوسائط‬:

@media only screen and (max-width: 500px) {

.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}

End CSS

CSS 201