CSS FUNDAMENTALS

Brief introduction into essentials of CSS

DECEMBER 4, 2023
LAKHFIF YAHIA ABDERRAOUF
STAIACDADEMY
1|Page
2|Page

TABLE OF CONTENTS

7.............................................................................................................. CSS Tutorial

7............................................................................................................. CSS‫إصدارات‬
7.................................................................................................................. CSS‫مثال‬
11 ................................................................................................... Using CSS in HTML
11 .................................................................... CSS in style Attributes-‫في سمات النمط‬CSS
11 ........................................................................... <style></style> ‫ في عناصر النمط‬CSS
13 ................................................................................................. ‫ في الملفات الخارجية‬CSS
13 ..................................................................................... The link Element‫عنصر االرتباط‬
14 ....................................................................................................... @import‫تعليمات‬
15 ................................................................................... CSS Properties and CSS Rules
15 .................................................................................... CSS Properties –CSS ‫خصائص‬
15 ............................................................................................. CSS Rules -CSS‫قواعد‬
17 .......................................................................................................... CSS Selectors
17 ...................................................................................... Universal Selector- ‫محدد عام‬
17 ..................................................................................... Element Selector-‫محدد العنصر‬
18 ............................................................................................. Class Selector ‫محدد الفئة‬
18 ........................................................................................................... ID Selector
19 ..................................................................................... Attribute Selector‫محدد السمات‬
21 ....................................................................................... Group Selector‫محدد المجموعة‬
22 .................................................................................... Child Selector ‫محدد العناصر األبناء‬
22 .................................................................. Descendant Selector ‫محدد السليل او العنصر الحفيد‬
23 ................................................................... Adjacent Sibling Selector ‫محدد األخوة المجاورة‬
24 ........................................................................ General Sibling Selector‫محدد األخوة العام‬
24 ....................................................................................... Pseudo Classes ‫أشباه الصنوف‬
30 .................................................................................... Pseudo Elements ‫العناصر الزائفة‬
32 ....................................................................................................... CSS Inheritance
34 ....................................................................................................... CSS Precedence
34 .....................................................................CSS Precedence Example-CSS ‫مثال أسبقية‬
35 ............................................................................... CSS Precedence Rules‫قواعد أسبقية‬
39 ........................................................................................................ CSS Box Model
39 ................................................................................................... CSS‫تصور نموذج مربع‬
39 .................................................................................. width and height‫العرض واالرتفاع‬
40 ............................................................................................. box-sizing‫تحجيم الصندوق‬
3|Page

42 ............................................................................................................. CSS margin

44 ............................................................................................................ CSS padding
46 .............................................................................................................. CSS border
46 ..................................................................................................... CSS‫خصائص الحدود‬
48 .............................................................................Additional Border CSS Properties
51 ...................................................................................................... Border Images
55 ................................................................................................................ CSS Units
56 .............................................................................................................. CSS Colors
56 .................................................................................................. ‫رموز األلوان المحددة مسبقًا‬
57 ....................................................................................................... ‫ الست عشري‬RGB
57 ........................................................................................................... RGB Colors
57 ......................................................................................................... RGBA Colors
58 ........................................................................................................... HSL Colors
59 ...................................................................................................... CSS Text Styling
59 ........................................................................................................... font-family
59 .................................................................... Serif, Sans-Serif and Monospace Fonts
60 ................................................................................................. font-family Values
60 .............................................................................................................. font-size
61 ................................................................................................................... Color
61 ............................................................................................................. font-style
62 .......................................................................................................... font-weight
63 ...................................................................................................... text-transform
64 .......................................................................................................... font-variant
64 ..................................................................................................... text-decoration
65 ....................................................................................................... letter-spacing
65 ........................................................................................................... line-height
66 ............................................................................................................. text-align
66 ........................................................................................................... text-indent
67 ......................................................................................................... text-shadow
69 ....................................................................................................... CSS List Styling
69 ....................................................................................................... list-style-type
71 .................................................................................................. list-style-position
72 ............................................................................................................... padding
74 ..................................................................................................... CSS Table Styling
4|Page

74 .................................................................................................. Width and Height

74 ................................................................................................................Margins
74 ................................................................................................................ Borders
74 ........................................................................................... Padding on Table Cells
74 ............................................................................................................. text-align
75 ........................................................................................................ vertical-align
76 ................................................................................................ background-image
76 ..................................................................................................... border-spacing
77 ..................................................................................................... border-collapse
78 ...................................................................................................... CSS Link Styling
78 .................................................................................................. Styling Text Links
79 ............................................................................................... Styling Image Links
79 ................................................................................................ Styling Block Links
79 ......................................................................................... Styling Links As Buttons
82 ..................................................................................................... CSS Form Styling
82 ........................................................................................... Styling input Elements
82 ........................................................................................................... Text Fields
82 .......................................................................................... Text Field CSS Selector
82 ................................................................................................. Text Field Borders
83 ................................................................................... Text Field Background Color
83 .................................................................................... Text Field Width and Height
83 ...................................................................................................... Text Field Font
84 ............................................................................................................Text Areas
85 ................................................................................................................ Buttons
86 .................................................................................................................. Labels
86 ................................................................................................ fieldset and legend
88 ................................................................................................... CSS Image Styling
88 ................................................................................................................. Margin
88 ................................................................................................................. Border
88 ............................................................................................................... Padding
89 .................................................................................................. Width and height
90 ................................................................................... Keeping Image Aspect Ratio
90 ............................................................................ Width and Height as Percentages
91 ...................................................................................... min-width and min-height
5|Page

91 ............................................................................................... Responsive Images

92 ........................................................................................... CSS Background Images
92 ................................................................................................ Background-repeat
93 .............................................................................................. Background-position
95 ......................................................................................... Background-attachment
96 ................................................................................................... Background-size
97 ................................................................................................. Background-origin
97 .................................................................................................... Background-clip
98 ......................................................................................................... CSS Gradients
98 ................................................................................................... Linear Gradients
99 .......................................................................................................... Color Stops
100 ................................................................................................. Radial Gradients
101 ........................................................................................ Radial Gradient Syntax
104 .......................................................................... CSS Gradients vs. SVG Gradients
106 .................................................................................................... CSS Box Shadow
108 ........................................................................................................... CSS display
108 ..................................................................................................... display : none
109 .................................................................................................... display : block
109 .................................................................................................... display : inline
110 ........................................................................................... display : inline-block
111 ...................................................................................................... display : grid
111 .............................................................. Default display Values For HTML Elements
112 ............................................................................................................... CSS float
112 .............................................................................................. CSS Float Example
112 ...........................................................................................................float : left
114 .........................................................................................................float : right
115 .................................................................................................................. clear
118 .......................................................................................................... CSS position
118 ................................................................................................... position : static
118 ................................................................................................ position : relative
119 ....................................................................................................position : fixed
120 ...............................................................................................position : absolute
122 ............................................ position : absolute Inside Other Positioned Elements
124 ................................................................................................. CSS Media Queries
6|Page

124 ....................................................................................... Inserting Media Queries

124 ............................................................................................ Media Query Syntax
126 .........................................................................................Media Query Examples
128 ........................................................................................................... CSS opacity
128 .................................................................................. Opacity of Nested Elements
129 ...................................................................................................... CSS Web Fonts
129 ............................................................................................... Finding Web Fonts
129 ................................................................................................. Using Web Fonts
130 ........................................................................................... @font-face Explained
132 ...................................................................................... Using Google Web Fonts
‫‪7|Page‬‬

‫‪CSS TUTORIAL‬‬

‫‪ CSS‬اختصار لـ ‪ Cascading Style Sheets.‬يتم استخدام ‪ CSS‬داخل ‪ HTML‬أو ‪ SVG‬لتصميم محتوى صفحة ‪ HTML‬الخاصة‬
‫بك‪.‬‬

‫يتكون موقع الويب أو تطبيق الويب الحديث من ‪ HTML‬و ‪CSS‬و ‪JavaScript‬وربما ‪ SVG.‬يتم استخدام ‪ HTML‬لتحديد المحتوى‬
‫الموجود في موقع الويب أو تطبيق الويب ‪ -‬محتواه وتكوينه‪ .‬يتم استخدام ‪ CSS‬لتحديد كيفية عرض هذا المحتوى باأللوان والحدود والخطوط‬
‫والخلفيات وما إلى ذلك‪ .‬ويتم استخدام ‪ JavaScript‬إلضفاء الحيوية على موقع الويب أو تطبيق الويب‪ .‬يتم استخدام ‪ SVG‬إلنشاء رسومات‬
‫متجهة قابلة للتطوير للمخططات واأليقونات والشعارات‪.‬‬

‫تحتاج إلى معرفة ‪ HTML‬بشكل معقول قبل أن تتعلم ‪ CSS.‬إذا لم تكن تستخدم لغة ‪ HTML‬اآلن‪ ،‬فلديّ برنامج تعليمي لـ ‪ HTML4‬وبرنامج‬
‫‪HTML5‬التعليمي أيضًا ‪ -‬وكالهما مجاني‪.‬‬

‫يركز هذا البرنامج التعليمي لـ ‪ CSS‬على استخدام ‪ CSS‬مع ‪ HTML.‬إذا كنت تريد استخدام ‪ CSS‬مع‪ ، SVG‬فاطلع على البرنامج التعليمي‬
‫الخاص بـ ‪SVG‬و ‪CSS.‬‬

‫إصدارات ‪CSS‬‬

‫في وقت كتابة هذا التقرير‪ ،‬كان هناك إصداران رئيسيان من ‪ CSS‬قيد االستخدام ‪. CSS 2.1‬و ‪ CSS 3.0.‬سأصف الميزات من كال‬
‫اإلصدارين في هذا البرنامج التعليمي‪ .‬بعد كل شيء‪ ،‬بمجرد دعم ميزة ‪ CSS‬معينة‪ ،‬ينسى األشخاص ما إذا كانت هذه الميزة جاءت من ‪CSS‬‬
‫‪2.1‬أو‪CSS 3.0.‬‬

‫مثال ‪CSS‬‬

‫فيما يلي مثال سريع لـ ‪ CSS‬داخل صفحة‪ ، HTML‬حتى تتمكن من رؤية كيف تبدو‪:‬‬

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

‫>‪<body‬‬

‫>‪<style‬‬
‫{ ‪div‬‬
‫;‪border: 1px solid black‬‬
‫}‬
‫>‪</style‬‬

‫>‪<div> Style This! </div‬‬

‫>‪</body‬‬
‫‪8|Page‬‬

‫>‪</html‬‬
‫يوضح هذا المثال الحد األدنى من صفحة ‪ HTML‬مع عنصر ‪ style‬وعنصر ‪ div.‬يحتوي عنصر ‪ style‬على كود‪CSS‬‬

‫يوضح مثال ‪ CSS‬هذا أن جميع عناصر ‪ div‬يجب أن يتم تصميمها بحدود عرضها ‪ 1‬بكسل‪ ،‬صلبة وسوداء اللون‪.‬‬

‫إليك كيف سيبدو ‪ HTML + CSS‬أعاله في المتصفح‪:‬‬

‫امثلة عن ‪:CSS‬‬
9|Page
‫‪10 | P a g e‬‬

‫نفس صفحة الويب بدون أي ‪:CSS‬‬

‫‪11 | P a g e‬‬

‫‪USING CSS IN HTML‬‬

‫تم تصميم ‪ CSS‬لالستخدام مع‪ HTML‬أو ‪ SVG‬هناك ثالث طرق يمكنك من خاللها تضمين ‪ CSS‬في ملف ‪ HTML‬الخاص بك‪:‬‬

‫قم بتضمين ‪ CSS‬داخل سمة النمط لعناصر‪HTML.‬‬ ‫‪‬‬

‫تضمين ‪ CSS‬داخل عناصر ‪ HTML‬النمطية‬ ‫‪‬‬
‫االرتباط بملفات ‪ CSS‬الخارجية‪.‬‬ ‫‪‬‬

‫سيتم وصف كل خيار من هذه الخيارات أدناه‪.‬‬

‫‪ CSS‬في سمات النمط ‪CSS IN STYLE ATTRIB UTES-‬‬

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

‫>‪<div style="border: 1px solid black;"> Style This! </div‬‬

‫يقوم هذا المثال بإدراج حدود خاصية ‪ CSS‬في سمة النمط الخاصة بعنصر ‪ div.‬قيمة خاصية الحدود هي ‪ 1‬بكسل أسود خالص‪ ،‬مما يعين حدود‬
‫عنصر ‪ div‬إلى حد أسود بعرض بكسل واحد‪.‬‬

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

‫>‪<div style="border: 1px solid black; font-size: 18px;"> Style This! </div‬‬

‫الً من خاصية ‪( Border‬الحدود) وخاصية ‪( Font-size‬حجم الخط)‬

‫يعين هذا المثال ك ّ‬

‫‪ CSS‬في عناصر النمط >‪<STYLE></STYLE‬‬

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

‫>‪<style‬‬
‫{ ‪div‬‬
‫;‪border: 1px solid black‬‬
‫}‬
‫>‪</style‬‬
‫‪12 | P a g e‬‬

‫>‪<div> Style This! </div‬‬

‫>‪<div> Style This Too! </div‬‬

‫يوضح هذا المثال عنصر نمط واحد يحدد قاعدة ‪ CSS‬التي يتم تطبيقها على جميع عناصر ‪ div.‬وبالتالي‪ ،‬يتم تطبيق خاصية ‪ CSS‬الموجودة‬
‫داخل عنصر النمط (خاصية الحدود) على كال عنصري ‪ div‬في المثال‪.‬‬

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

‫>‪<style‬‬
‫{ ‪div‬‬
‫;‪border: 1px solid black‬‬
‫}‬
‫{ ‪span‬‬
‫;‪border: 1px solid blue‬‬
‫}‬
‫>‪</style‬‬
‫يحدد هذا المثال قاعدتين من قواعد ‪ CSS.‬يتم تطبيق قاعدة ‪ CSS‬األولى على جميع عناصر‪ ، div‬ويتم تطبيق قاعدة ‪ CSS‬الثانية على جميع‬
‫عناصر االمتداد‪.‬‬

‫يمكنك أيضًا تضمين أكثر من عنصر نمط في نفس صفحة ‪ HTML.‬هنا مثال‪:‬‬

‫>‪<style‬‬
‫{ ‪div‬‬
‫;‪border: 1px solid black‬‬
‫}‬
‫>‪</style‬‬

‫>‪<style‬‬
‫{ ‪span‬‬
‫;‪border: 1px solid blue‬‬
‫}‬
‫>‪</style‬‬
‫يوضح هذا المثال قواعد ‪ CSS‬من المثال السابق المضمنة في عنصر النمط الخاص بها‪.‬‬
‫يمكن تضمين عناصر النمط إما داخل عنصر رأس ‪ HTML‬أو عنصر النص‪ .‬هنا مثال‪:‬‬

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

‫>‪<head‬‬
‫>‪<style‬‬
‫{ ‪div‬‬
‫‪13 | P a g e‬‬

‫;‪border: 1px solid black‬‬

‫}‬
‫>‪</style‬‬
‫>‪</head‬‬

‫>‪<body‬‬

‫>‪<style‬‬
‫{ ‪span‬‬
‫;‪border: 1px solid blue‬‬
‫}‬
‫>‪</style‬‬

‫>‪<div> Style This! </div‬‬

‫>‪<span> Style This Too! </span‬‬

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

‫في هذا المثال‪ ،‬يتم تضمين قاعدة ‪ CSS‬لعناصر ‪ div‬داخل عنصر النمط الخاص بها داخل عنصر ‪ HTML‬الرئيسي‪ ،‬ويتم تضمين قاعدة‬
‫‪CSS‬لعناصر االمتداد داخل عنصر النمط الخاص بها داخل عنصر‪body HTML‬‬

‫‪ CSS‬في الملفات الخارجية‬

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

‫عبر عنصر االرتباط ‪ link‬داخل عنصر الرأس ‪. Head‬‬ ‫‪‬‬

‫عبر تعليمات ‪ @import‬داخل عنصر النمط ‪.style‬‬ ‫‪‬‬

‫يتم شرح هاتين اآلليتين في األقسام التالية‪.‬‬

‫عنصر االرتباط ‪THE LINK ELEMENT‬‬

‫قم باإلشارة إلى ملف ‪ CSS‬خارجي باستخدام عنصر االرتباط (داخل عنصر الرأس)‪ .‬فيما يلي مثال على ذلك‪:‬‬

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

‫>‪<head‬‬
‫>"‪<link rel="stylesheet" type="text/css" href="my-css-file.css‬‬
‫‪14 | P a g e‬‬

‫>‪</head‬‬

‫>‪<body‬‬
‫>‪<div> Style This! </div‬‬
‫>‪<span> Style This Too! </span‬‬

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

‫يرتبط هذا المثال بملف ‪ CSS‬خارجي يسمى ‪ my-css-file.css.‬يجب أن يكون هذا الملف متا ًحا عبر اإلنترنت‪ ،‬وفي هذه الحالة يجب أن‬
‫يكون موجودًا في نفس المجلد ‪ directory‬الذي يوجد به ملف ‪ HTML.‬وبالتالي‪ ،‬إذا كان ملف ‪ HTML‬موجودًا على‬
‫‪ ،http://mydomain.com/my-website/my-html-file.html‬فيجب أن يكون ملف ‪ CSS‬متا ًحا على‬
‫‪http://mydomain.com/my-website/my -css-file.css.‬‬

‫في الواقع‪ ،‬يمكن أن تحتوي سمة ‪ href‬لعنصر االرتباط على عنوان ‪ URL‬مطلق أو نسبي‪ .‬لمزيد من المعلومات حول عناوين ‪ URL‬المطلقة‬
‫والنسبية‪ ،‬راجع ‪ HTML‬وعناوين ‪ URL‬في برنامج ‪ HTML4‬التعليمي‪.‬‬

‫إذا قمنا بنقل قواعد ‪ CSS‬من األمثلة السابقة إلى ملف‪ ، my-cess-file.css‬فستبدو المحتويات كما يلي‪:‬‬

‫{ ‪div‬‬
‫;‪border: 1px solid black‬‬
‫}‬
‫{ ‪span‬‬
‫;‪border: 1px solid blue‬‬
‫}‬
‫الحظ أن ملف ‪ CSS‬ال يحتوي على عنصر النمط ‪ . style‬فهو ال يحتوي إال على قواعد ‪ (rules) CSS‬نفسها‪.‬‬

‫تعليمات ‪@IMPORT‬‬

‫يمكنك أيضًا استيراد ملف ‪ CSS‬خارجي من داخل عنصر النمط باستخدام تعليمات ‪ @import.‬إليك مثال ‪: CSS @import‬‬

‫>‪<style‬‬
‫;)'‪@import url('http://mydomain.com/my-website/my-css-file.css‬‬
‫>‪</style‬‬
‫سيتضمن هذا المثال ملف ‪ CSS http://mydomain.com/my-website/my-css-file.css‬في صفحة ‪ HTML‬التي تحتوي‬
‫على عنصر النمط‪.‬‬
‫‪15 | P a g e‬‬

‫‪CSS PROPERTIES AND CSS RULES‬‬

‫يمكنك تصميم عناصر ‪ HTML‬عبر خصائص ‪ CSS.‬قد تحتوي عناصر ‪ HTML‬المختلفة على خصائص ‪ CSS‬مختلفة يمكنك تعيينها‪ .‬يمكن‬
‫تنظيم خصائص ‪ CSS‬في قواعد ‪ CSS.‬تقوم قاعدة ‪ CSS‬بتجميع مجموعة من خصائص ‪ CSS‬معًا‪ ،‬وتطبق جميع الخصائص على عناصر‬
‫‪HTML‬المطابقة لقاعدة ‪ CSS.‬سيتم تغطية كل من خصائص ‪ CSS‬وقواعد ‪ CSS‬بالتفصيل في هذا النص‪.‬‬

‫خصائ ص ‪CSS PROPERTIES –CSS‬‬

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

‫;‪<div style="border: 1px solid black‬‬

‫" ;‪font-size: 18px‬‬
‫>‬
‫‪Style This‬‬
‫>‪</div‬‬

‫في هذا المثال‪ ،‬تم تطبيق خاصيتين ‪ CSS‬على عنصر ‪ div:‬خصائص الحدود وحجم الخط‪.‬‬

‫الً‪ ،‬ثم النقطتان‪ ،‬ثم القيمة‪ .‬فيما يلي النمط العام الذي يتبعه‬
‫يتكون إعالن خاصية ‪ CSS‬من اسم الخاصية وقيمة الخاصية‪ .‬يأتي اسم الخاصية أو ّ‬
‫إعالن خاصية ‪CSS‬‬

‫‪property-name : property-value‬‬

‫إذا قمت بتحديد أكثر من خاصية‪ ، CSS‬فسيتم فصل كل زوج من االسم والقيمة بفاصلة منقوطة‪ ،‬كما يلي‪:‬‬

‫;‪property1 : property-value1‬‬
‫;‪property2 : property-value2‬‬

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

‫هناك العديد من خصائص ‪ CSS‬التي يمكنك تحديدها لعناصر ‪ HTML‬المختلفة‪ .‬يتم تغطية خصائص ‪ CSS‬هذه في نصوصها الخاصة‪.‬‬

‫قواعد ‪CSS RULES -CSS‬‬

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

‫تتكون قاعدة ‪ CSS‬من محدد ‪ CSS‬ومجموعة من خصائص ‪ CSS.‬يحدد محدد ‪ CSS‬عناصر ‪ HTML‬التي سيتم استهدافها باستخدام قاعدة‬
‫‪CSS.‬تحدد خصائص ‪ CSS‬نمط عناصر ‪ HTML‬المستهدفة‪.‬‬
‫‪16 | P a g e‬‬

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

‫{ ‪div‬‬
‫‪border‬‬ ‫;‪: 1px solid black‬‬
‫;‪font-size : 18px‬‬
‫}‬

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

‫جزء محدد‪ ، CSS‬قاعدة ‪ CSS‬هي الجزء الذي يسبق أول {‪ .‬في المثال أعاله‪ ،‬هذا هو الجزء ‪ div‬من قاعدة ‪ CSS.‬يتم إدراج خصائص‬
‫‪CSS‬داخل الكتلة‪{ ... }.‬‬

‫يجب تحديد قواعد ‪ CSS‬إما داخل عنصر النمط أو داخل ملف ‪ CSS‬خارجي‪.‬‬
‫‪17 | P a g e‬‬

‫‪CSS SELECTORS‬‬

‫محددات ‪ CSS‬هي جزء من قواعد ‪ CSS‬التي تحدد عناصر ‪ HTML‬التي تتأثر بقاعدة ‪ CSS.‬فيما يلي مثال لقاعدة ‪:CSS‬‬

‫{ ‪div‬‬
‫;‪border: 1px solid black‬‬
‫}‬
‫جزء محدد ‪ CSS‬من قاعدة ‪ CSS‬أعاله هو‪:‬‬

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

‫هناك عدة أنواع مختلفة من محددات ‪ CSS.‬أضاف كل من ‪ CSS 1.0‬و ‪CSS 2.1‬و ‪CSS 3.0‬محددات إلى معيار ‪ CSS.‬سيتم تمرير‬
‫بقية هذا النص عبر محددات ‪ CSS‬هذه‪.‬‬

‫محدد عام ‪UNIVERSAL SELECTOR -‬‬

‫يتم استخدام محدد ‪ CSS‬العالمي لتحديد جميع العناصر‪ .‬تم وضع عالمة *‪ .‬فيما يلي مثال لمحدد ‪ CSS‬الكلي ‪:‬‬

‫{ *‬
‫;‪font-size: 18px‬‬
‫}‬
‫يحدد هذا المثال جميع عناصر ‪ HTML‬ويعين خاصية ‪ CSS‬الخاصة بحجم الخط‪.‬‬

‫ال يتم استخدام محدد ‪ CSS‬العالمي بمفرده في كثير من األحيان‪ .‬يتم استخدامه غالبًا مع محدد فرعي أو محدد سليل‪.‬‬

‫محدد العنص ر ‪ELEMENT SELECTOR-‬‬

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

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

‫{ ‪div‬‬
‫;‪border: 1px solid black‬‬
‫}‬
‫{ ‪p‬‬
‫;‪font-size: 18px‬‬
‫}‬
‫{ ‪input‬‬
‫;‪border: 1px solid #cccccc‬‬
‫}‬
‫‪18 | P a g e‬‬

‫تحتوي كل قواعد ‪ CSS‬الثالث هذه على محدد يحدد كل نوع معين من عناصر ‪ HTML.‬يقوم محدد ‪ CSS‬األول بتحديد جميع عناصر ‪div.‬‬
‫محدد ‪ CSS‬الثاني يحدد جميع عناصر ‪ p.‬محدد ‪ CSS‬الثالث يحدد جميع عناصر اإلدخال‪.‬‬

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

‫محدد الفئة ‪CLASS SELECTOR‬‬

‫محدد الفئة هو محدد ‪ CSS‬آخر شائع االستخدام‪ .‬يقوم محدد الفئة بتحديد كافة عناصر ‪ HTML‬التي تم تعيين فئة ‪ CSS‬عليها‪ .‬يمكنك تعيين فئة‬
‫‪CSS‬على عنصر ‪HTML‬عن طريق إعطاء عنصر ‪ HTML‬سمة فئة‪ .‬هنا مثال‪:‬‬

‫>‪<div class="green"> Text... </div‬‬

‫>‪<p class="green"> Paragraph... </p‬‬

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

‫يمكنك استهداف عناصر ‪ HTML‬هذه عن طريق إنشاء قاعدة ‪ CSS‬بنفس اسم فئة ‪ CSS‬لتحديدها‪ ،‬والبادئة بنقطة (‪ .).‬فيما يلي مثال لقاعدة‬
‫‪ CSS‬التي تحدد عنصري ‪HTML‬من المثال أعاله‪:‬‬

‫{ ‪.green‬‬
‫;‪border: 1px solid green‬‬
‫}‬

‫يحدد مثال قاعدة ‪ CSS‬جميع عناصر ‪ HTML‬مع تعيين فئة ‪ CSS‬باللون األخضر عليها‪ .‬الحظ ال ‪ .‬في الجزء األول من محدد ‪CSS‬‬
‫(‪.‬األخضر) لقاعدة ‪ CSS.‬يشير هذا إلى المتصفح أن هذا هو محدد فئة‪ ، CSS‬وأن االسم الموجود بعد ‪ .‬هو اسم فئة ‪ CSS‬المراد تحديدها‪.‬‬

‫يمكنك استخدام أي اسم كفئة ‪ CSS.‬ال توجد أسماء فئات ‪ CSS‬مضمنة‪ .‬استخدم أسماء فئات ‪ CSS‬التي تبدأ بأحرف ‪ -‬وليس أرقا ًما أو أحرف‬
‫خاصة أخرى‪ .‬أسماء فئات ‪ CSS‬حساسة لحالة األحرف‪ ،‬لذا فإن ‪GREEN‬ليس هو نفس فئة ‪ CSS‬مثل األخضر أو األخضر‪.‬‬

‫‪ID SELECTOR‬‬

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

‫>‪<div id="myElement"> My Element </div‬‬

‫يمكنك تحديد عنصر ‪ HTML‬هذا باستخدام محدد المعرف‪ ،‬وذلك عن طريق بادئة محدد ‪CSS‬بـ ‪ #‬ثم كتابة معرف عنصر ‪ HTML.‬فيما يلي‬
‫مثال يحدد عنصر ‪ HTML‬أعاله بواسطة معرفه‪:‬‬

‫{ ‪#myElement‬‬
‫‪19 | P a g e‬‬

‫;‪border: 1px solid blue‬‬

‫}‬

‫يستخدم هذا المثال ‪ #‬لإلشارة إلى أن المحدد هو محدد معرف‪ ،‬ثم معرف ‪ myElement‬مباشرة بعد ‪ #‬لتحديد المعرف الذي سيتم تحديده‪.‬‬

‫محدد السمات ‪ATTRIBUTE SELECTOR‬‬

‫يتم استخدام محدد سمات ‪ CSS‬لتحديد عناصر ‪ HTML‬حسب سماتها‪ .‬انظر إلى ‪ HTML‬هذا‪:‬‬

‫>‪<a href="http://tutorials.jenkov.com"> Java and Web Development Tutorials</a‬‬

‫>‪<a name="jump-here"></a‬‬

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

‫يمكنك تحديد هذين العنصرين بشكل فردي باستخدام محدد السمات‪ .‬فيما يلي مثال لمحدد سمات ‪CSS‬‬

‫{ ]‪[href‬‬
‫;‪font-size: 18px‬‬
‫}‬
‫يحدد هذا المثال لقاعدة ‪ CSS‬جميع عناصر ‪ HTML‬التي تحتوي على سمة ‪ href.‬وهذا يعني أن العنصر األول في ‪ HTML‬الموضح سابقًا‬
‫سيتم استهدافه بواسطة قاعدة ‪ ،CSS‬لكن العنصر الثاني لن يتم استهدافه‪.‬‬

‫]‪ [attrName‬هو الذي يشكل محدد السمة‪ .‬داخل األقواس المربعة )] [( تكتب اسم السمة المراد استهدافها‪.‬‬

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

‫‪ATTRIBUTE EQUALS‬‬

‫يمكنك تحديد عنصر ‪ HTML‬بنا ًّء على قيمة السمة الخاصة به مثل هذا‪:‬‬

‫]"‪[href="http://jenkov.com‬‬

‫يمكنك إضافة = بعد اسم السمة‪ ،‬ثم تكتب قيمة السمة المطلوبة‪ .‬في هذه الحالة أريد تحديد كافة عناصر ‪ HTML‬التي تحتوي على سمة ‪href‬‬
‫بالقيمة ‪http://jenkov.com.‬‬

‫‪ATTRIBUTE BEGINS WITH‬‬

‫الً من استخدام عالمة = بين اسم السمة وقيمة السمة‪ ،‬اكتب ^=‪ .‬هنا مثال‪:‬‬
‫يمكنك تحديد عنصر ‪ HTML‬بنا ًءّ على ما تبدأ به قيمة السمة‪ .‬بد ّ‬

‫>‪<a href="http://jenkov.com"></a‬‬
‫‪20 | P a g e‬‬

‫>‪<style‬‬
‫{ ]"‪[href^="http://‬‬
‫;‪font-size: 18px‬‬
‫}‬
‫>‪</style‬‬
‫سيحدد هذا المثال جميع عناصر ‪ HTML‬التي تحتوي على سمة ‪ href‬والتي تبدأ قيمتها بـ‪http://.‬‬

‫‪ATTRIBUTE BEGINS WITH LANGUAGE CODE‬‬

‫تبدأ سمة ‪ CSS‬بمحدد رمز اللغة الذي يتم استخدامه لتحديد عناصر ‪ HTML‬برمز لغة معين‪ .‬انظر إلى ‪ HTML‬هذا‪:‬‬

‫"‪<p lang="en‬‬ ‫>‪> English text</p‬‬

‫>‪<p lang="en-UK"> UK English text</p‬‬
‫>‪<p lang="en-US"> US English text</p‬‬

‫يمكنك بعد ذلك استخدام سمة ‪ CSS‬التي تبدأ بمحدد رمز اللغة لتحديد جميع عناصر ‪ HTML‬برمز لغة يبدأ بـ‪ ، en-‬كما يلي‪:‬‬

‫{ ]"‪[lang|="en‬‬
‫;‪font-size: 18px‬‬
‫}‬
‫الحظ الجزء |= من المحدد في قاعدة ‪ CSS‬أعاله‪ .‬يشير هذا الجزء إلى أن قيمة السمة يجب أن تكون إما ‪ en‬أو تبدأ بـ ‪ en-‬في رمز اللغة‪.‬‬

‫‪ATTRIBUTE ENDS WITH‬‬

‫الً من كتابة ^= تكتب ‪ =$‬بين اسم السمة وقيمتها‪ .‬هنا مثال آخر‪:‬‬
‫يمكنك أيضًا تحديد عناصر ‪ HTML‬بنا ًءّ على ما تنتهي به قيمة السمة‪ .‬بد ّ‬

‫>‪<a href="./example.html"></a‬‬

‫>‪<style‬‬
‫{ ]"‪[href$=".png‬‬
‫;‪font-size: 18px‬‬
‫}‬
‫>‪</style‬‬
‫يحدد هذا المثال لقاعدة ‪ CSS‬جميع عناصر ‪ HTML‬التي تحتوي على سمة ‪ href‬والتي تنتهي قيمتها بـ‪.png.‬‬

‫‪ATTRIBUTE CONTAINS‬‬
‫‪21 | P a g e‬‬

‫يتم استخدام سمة ‪ CSS‬التي تحتوي على محدد لتحديد جميع عناصر ‪ HTML‬ذات سمة معينة تحتوي على السلسلة الفرعية المحددة‪ .‬فيما يلي‬
‫سمة ‪ CSS‬تحتوي على مثال محدد‪:‬‬

‫{ ]"‪[href*="google.com‬‬
‫;‪font-size: 18px‬‬
‫}‬

‫يحدد هذا المثال لقاعدة ‪ CSS‬جميع عناصر ‪ HTML‬مع سمة ‪ href‬التي تحتوي على السلسلة الفرعية ‪ google.com‬في مكان ما في قيمة‬
‫السمة الخاصة بها ‪.‬وبالتالي‪ ،‬فإنه سيختار العنصرين األولين من العناصر أدناه‪ ،‬وليس العنصر الثالث‪:‬‬

‫>‪<a href="http://courses.com">courses.com</a‬‬
‫>‪<a href="http://tutorials.courses.com">Tutorials</a‬‬
‫>‪<a href="http://google.com">Google</a‬‬

‫‪ATTRIBUTE CONTAINS WORD‬‬

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

‫انظر إلى عنصري ‪ HTML‬هذين‪:‬‬

‫>‪<div myattr="iamaprogrammer"></div‬‬

‫>‪<div myattr="i am a programmer"></div‬‬

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

‫{ ]"‪[myattr~="programmer‬‬

‫}‬

‫‪...‬سيحدد فقط العنصر الثاني من عناصر ‪ div‬الموضحة أعاله‪.‬‬

‫محدد المجموعة ‪GROUP SELECTOR‬‬

‫يتم استخدام محدد مجموعة ‪ CSS‬لتجميع محددات متعددة معًا في محدد ‪ CSS‬كبير واحد‪ .‬وهذا يعني أن جميع العناصر المستهدفة بواسطة أي‬
‫من المحددات ستتأثر بقاعدة ‪ CSS.‬فيما يلي مثال لمحدد مجموعة‪CSS:‬‬
‫‪22 | P a g e‬‬

‫{ ‪div, p‬‬
‫;‪font-size : 18px‬‬
‫}‬
‫تحدد قاعدة ‪ CSS‬هذه حجم الخط لكل من عناصر ‪ div‬و‪p.‬‬

‫الحظ كيف يحتوي المثال على محددين ‪ div‬و ‪ p‬مفصولين بفاصلة‬

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

‫محدد العناصر األبناء ‪CHILD SELECTOR‬‬

‫يتم استخدام محدد ‪ CSS‬الفرعي لتحديد جميع العناصر التي تعتبر أبناء مباشرين لعنصر آخر‪ .‬فيما يلي مثال لمحدد ‪ CSS‬الفرعي‪:‬‬

‫{ ‪li>a‬‬
‫;‪font-size: 18px‬‬
‫}‬

‫يحدد هذا المثال جميع العناصر التي هي عناصر فرعية من عناصر ‪ li.‬وبالتالي‪ ،‬سيتم تحديد العنصر الثاني فقط في ‪ HTML‬هذا‪:‬‬

‫>‪<a href="...">This will not be selected</a‬‬

‫>‪<ul‬‬
‫>‪<li><a href="...">This WILL be selected</a></li‬‬
‫>‪</ul‬‬

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

‫إنه الحرف الذي يحدد المحدد كمحدد فرعي‪ .‬الحظ الحرف بين ‪ li‬و ‪a‬في المحدد في المثال أعاله‪.‬‬

‫يمكنك استخدام أكثر من مستوى واحد من محددات األطفال‪ .‬هنا مثال‪:‬‬

‫{ ‪ol>li>a‬‬
‫;‪font-size: 18px‬‬
‫}‬

‫يحدد هذا المثال فقط العناصر ‪ a‬التي هي أبناء لعناصر ‪ li‬والتي هي أيضًا عناصر أبناء ل ‪ ol‬وبالتالي‪ ،‬ال يتم تطبيق قاعدة ‪ CSS‬على العناصر‬
‫المتداخلة داخل قائمة غير مرتبة ‪. ul‬‬

‫محدد السل يل او العنصر الحفيد ‪DESCENDANT SELECTOR‬‬

‫يتم استخدام محدد ‪ CSS‬المنحدر لتحديد العناصر المنحدرة من عناصر أخرى‪ .‬ال يلزم أن تكون العناصر المحددة أبناء مباشرين للسلف المحدد‪.‬‬
‫يجب فقط أن يكونوا متداخلين داخل السلف في مكان ما‪ .‬هذه هي الطريقة التي تختلف بها المحددات السليلة عن المحددات الفرعية‪ .‬انظر إلى‬
‫‪HTML‬هذا‪:‬‬
‫‪23 | P a g e‬‬

‫يمكنك تحديد جميع العناصر المتداخلة داخل عنصر ‪ ol‬باستخدام قاعدة ‪ CSS‬هذه‪:‬‬

‫{ ‪ol a‬‬
‫;‪font-size : 18px‬‬
‫}‬
‫يتم وضع عالمة على المحدد السليل عبر حرف المسافة‪ .‬الحظ المسافة بين ‪ ol‬و ‪a‬في المحدد في قاعدة ‪ CSS‬أعاله‪ .‬تحدد هذه المساحة أن هذا‬
‫المحدد هو محدد سليل‪ ،‬وأنه يحدد جميع العناصر التي هي من نسل (متداخلة داخل) عناصر ‪ ol.‬ال يهم مدى تداخل ‪ a‬في أسفل التسلسل الهرمي‬
‫للعنصر‪ ،‬طالما أنه يحتوي على ‪ ol‬كسلف في مكان أعلى في التسلسل الهرمي‪.‬‬

‫‪ ADJACENT SIBLING SEL ECTOR‬محدد األخوة المجاورة‬

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

‫>‪<body‬‬
‫>‪<h1>Headline</h1‬‬

‫>‪<p‬‬

‫>‪</p‬‬

‫>‪<p‬‬

‫>‪</p‬‬

‫>‪<table‬‬

‫>‪</table‬‬

‫>‪<table‬‬

‫>‪</table‬‬
‫>‪</body‬‬
‫‪24 | P a g e‬‬

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

‫يمكنك تحديد العنصر ‪ p‬األول بعد ‪ h1‬باستخدام محدد األخوة المجاور‪:‬‬

‫{ ‪p+table‬‬

‫}‬

‫محدد األخوة العام ‪GENERAL SIBLING SEL ECTOR‬‬

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

‫انظر إلى مثال ‪ HTML‬هذا‪:‬‬

‫>‪<body‬‬
‫>‪<h1>Headline</h1‬‬

‫>‪<p‬‬

‫>‪</p‬‬

‫>‪<p‬‬

‫>‪</p‬‬

‫>‪</body‬‬

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

‫{ ‪p~p‬‬

‫}‬
‫الحظ الحرف ~ الموجود بين حرفي ‪ p‬في الجزء المحدد من قاعدة ‪ CSS.‬الحرف ~ هو ما يميز هذا المحدد كمحدد عام لألخوة‪.‬‬

‫أشباه الصنوف ‪PSEUDO CLASSES‬‬

‫لقد عرفت ‪ CSS‬مجموعة من ‪ Pseudo Classes‬التي يمكنك استخدامها في محددات ‪CSS‬الخاصة بك‪ .‬فئة ‪ CSS‬الزائفة هي في الواقع‬
‫حالة لعنصر ‪ HTML.‬وبالتالي‪ ،‬يمكنك تعيين أنماط ‪ CSS‬مختلفة لعناصر ‪ HTML‬اعتمادًا على حالة عنصر ‪HTML.‬‬

‫أضاف ‪ CSS 3.0‬عددًا ال بأس به من فئات ‪ CSS‬الزائفة الجديدة إلى المعيار ‪.‬سأغطي كل فئة من فئات ‪ CSS‬الزائفة في األقسام التالية‪.‬‬
‫‪25 | P a g e‬‬

‫‪A:LINK, A:VISTED, A:HOVER, A:ACTIVE‬‬

‫طا) في أربع حاالت مختلفة‪ ،‬ولكل منها فئة زائفة مرتبطة‪:‬‬

‫يمكن أن يكون العنصر ‪( a‬الذي يمثل راب ً‬
‫‪ a:link‬يحدد كافة الروابط التي لم تتم زيارتها بعد‪.‬‬
‫‪ a:visited‬يحدد كافة الروابط التي تمت زيارتها بالفعل‪.‬‬
‫‪ a:hover‬يختار كافة الروابط التي يمرر الماوس فوقها‪.‬‬
‫‪ a:active‬يختار كافة الروابط التي تم النقر عليها ‪ -‬حتى يتم تحميل الصفحة الجديدة‪.‬‬

‫طا)‪ ،‬وحتى يقوم‬

‫الفئة الزائفة ‪ a:active‬ال 'تعيش طويالًّ'‪ .‬يتم تطبيقه فقط في الوقت القصير بين نقر المستخدم على الرابط (وبالتالي يصبح نش ً‬
‫المتصفح بتحميل الصفحة التي يشير إليها االرتباط‪.‬‬

‫فيما يلي بعض األمثلة على العناصر الزائفة‪:‬‬

‫‪a:link‬‬ ‫} ;‪{ color: #00ff00‬‬

‫} ;‪a:visited { color: #009900‬‬
‫‪a:hover‬‬ ‫} ;‪{ color: #66ff66‬‬
‫‪a:active‬‬ ‫} ;‪{ color: #ffff00‬‬

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

‫‪:FIRST-CHILD, :LAST-CHILD‬‬

‫تحدد الفئة الزائفة ‪ :first-child CSS‬جميع العناصر التي تمثل االبن األول لبعض عناصر ‪ HTML‬األصلية‪ .‬تحدد الفئة الزائفة‪:last-‬‬
‫‪child CSS‬جميع العناصر التي تمثل العنصر الفرعي األخير لبعض عناصر ‪ HTML‬األصلية‪ .‬هنا مثال‪:‬‬
‫‪26 | P a g e‬‬

‫>‪<div‬‬
‫>‪<p>First child</p‬‬
‫>‪<p>Second child</p‬‬
‫>‪</div‬‬

‫>‪<style‬‬
‫{ ‪p:first-child‬‬
‫;‪background-color: #ff00ff‬‬
‫}‬
‫{ ‪p:last-child‬‬
‫;‪background-color: #00ff00‬‬
‫}‬
‫>‪</style‬‬
‫تحدد قاعدة ‪ CSS‬األولى في هذا المثال جميع عناصر ‪ p‬التي تمثل االبن األول للعناصر األصلية‪ .‬في هذا المثال سيكون العنصر ‪ p‬مع الجسم‬
‫‪First Child.‬تم تعيين لون الخلفية لعنصر ‪ HTML‬هذا على‪#ff00ff.‬‬

‫تحدد قاعدة ‪ CSS‬الثانية في المثال جميع العناصر ‪ p‬التي تمثل العنصر الفرعي األخير للعناصر األصلية‪ .‬في هذا المثال سيكون العنصر ‪ p‬مع‬
‫الجسم ‪Second Child‬‬

‫)(‪:NTH-CHILD‬‬

‫تحدد الفئة الزائفة )(‪ :nth:child‬العناصر ‪ n‬من بعض العناصر األصلية ‪.‬يمكن أن يكون ‪ n‬كل عنصر‪ ،‬كل عنصر ثاني‪ ،‬كل عنصر ثالث‬
‫وما إلى ذلك‪ .‬هنا مثال‪:‬‬

‫>‪<div‬‬
‫>‪<p>1st child</p‬‬
‫>‪<p>2nd child</p‬‬
‫>‪<p>3rd child</p‬‬
‫>‪<p>4th child</p‬‬
‫>‪<p>5th child</p‬‬
‫>‪<p>6th child</p‬‬
‫>‪</div‬‬

‫>‪<style‬‬
‫{ )‪p:nth-child(2n‬‬
‫;‪background-color: #ffff00‬‬
‫}‬
‫>‪</style‬‬

‫في هذا المثال‪ ،‬تحدد قاعدة ‪ CSS‬كل عنصر ‪ p‬ثاني داخل العناصر األباء‪ .‬وهذا يعني كل العناصر ‪ p‬التي تعتبر اإلبن الثاني واإلبن الرابع‬
‫واإلبن السادس‪.‬‬
‫‪27 | P a g e‬‬

‫إن الرقم ‪ 2‬في )‪ p:nth-child(2n‬هو الذي يحدد أنه سيتم تحديد كل عنصر ‪ p‬زوجي الترتيب داخل العنصر األب‬

‫الً من ذلك‪ ،‬فستختار كل عنصر ‪ p‬ترتيبه هو أحد مضاعفات ‪ 3‬داخل العنصر الذي يحتويه‪.‬‬
‫إذا كتبت )‪ p:nth-child(3n‬بد ّ‬

‫‪:FIRST-OF-TYPE, :LAST-OF-TYPE‬‬

‫تختار الفئة ‪ :first-of-type‬العناصر التي تعتبر االبن األول من نوعها داخل العنصر األب‪ .‬تختار الفئة ‪ :last-of-type‬العناصر األخيرة‬
‫من نوعها داخل العنصر األب‪ .‬هنا مثال‪:‬‬

‫>‪<div‬‬
‫>‪<h2>1st h2</h2‬‬
‫>‪<p>1st p</p‬‬

‫>‪<h2>2nd h2</h2‬‬
‫>‪<p>2nd p</p‬‬

‫>‪<h2>3rd h2</h2‬‬
‫>‪<p>3rd p</p‬‬
‫>‪</div‬‬

‫>‪<style‬‬
‫{ ‪p:first-of-type‬‬
‫;‪background-color: #ffff00‬‬
‫}‬
‫{ ‪p:last-of-type‬‬
‫;‪background-color: #00ff00‬‬
‫}‬
‫>‪</style‬‬

‫يحتوي هذا المثال على قاعدتين من قواعد ‪ CSS.‬سيحدد ‪ p:first-of-type‬عناصر ‪ p‬التي تمثل العناصر ‪ p‬األولى لوالديها‪ ،‬بغض النظر‬
‫عن العناصر األخرى التي يحتوي عليها العنصر األب‪ .‬في هذا المثال العنصر ‪ p‬مع الجسم ‪1 st p‬‬

‫سيحدد ‪ p:last-of-type‬العناصر ‪ p‬التي تمثل العناصر ‪ p‬األخيرة لوالديها‪ .‬في هذا المثال سيكون العنصر ‪ p‬مع النص الذي يحتوي‬
‫‪.3rd p‬‬

‫)(‪:NTH-OF-TYPE‬‬

‫تحدد الفئة )(‪ nth-of-type‬جميع العناصر التي تمثل المرتبة ‪ n‬من نوعها داخل العنصر األب‪.‬‬

‫األقواس تحدد ما إذا كانت ستكون كل اول ‪ ،‬كل ثاني ‪ ،‬كل ثالث ‪...‬عنصر من نوعه‪.‬‬
‫‪28 | P a g e‬‬

‫إليك مثال )(‪: CSS nth-of-type‬‬

‫>‪<div‬‬
‫>‪<h2>1st h2</h2‬‬

‫>‪<p>1st p</p‬‬
‫>‪<p>2nd p</p‬‬

‫>‪<p>3rd p</p‬‬
‫>‪<p>4th p</p‬‬

‫>‪<p>5th p</p‬‬
‫>‪<p>6th p</p‬‬
‫>‪</div‬‬

‫>‪<style‬‬
‫{ )‪p:nth-of-type(2n‬‬
‫;‪background-color: #ffff00‬‬
‫}‬
‫>‪</style‬‬
‫تحدد قاعدة ‪ CSS‬في هذا المثال كل عنصر ‪ p‬ثاني داخل العناصر االباء‪ .‬وهكذا فإن العناصر ‪ p‬ذات األجسام‬

‫>‪<p>2nd p</p‬‬
‫>‪<p>4th p</p‬‬
‫>‪<p>6th p</p‬‬
‫هي التي سيتم تحديدها‬

‫)(‪:NTH-LAST-CHILD‬‬

‫تحدد الفئة )(‪ :nth-last-child‬العنصر األخير داخل العنصر الذي يحتويه‪ .‬إنه يعمل بشكل مشابه للفئة الزائفة )(‪ ، :nth-child‬باستثناء‬
‫أنه يقوم بعد العناصر بشكل عكسي من األخير إلى األول‪.‬‬

‫)(‪:NTH-LAST-OF-TYPE‬‬

‫تحدد الفئة )(‪ :nth-last-of-type‬العنصر األخير من نوعه داخل والديه‪ ..‬إنه يعمل بشكل مشابه للفئة‬

‫)(‪ :nth-of-type‬باستثناء أنه يقوم بعد العناصر بشكل عكسي من األخير إلى األول‪.‬‬

‫‪:ONLY-CHILD‬‬

‫تحدد الفئة الزائفة ‪:only-child‬كافة العناصر التي تعتبر االبن الوحيد لوالدها‪.‬‬
‫‪29 | P a g e‬‬

‫‪:ONLY-OF-TYPE‬‬

‫تحدد الفئة الزائفة ‪ :only-of-type‬كافة العناصر التي تعتبر االبن الوحيد من نوعها‪.‬‬

‫‪:EMPTY‬‬

‫تحدد الفئة الزائفة ‪ :empty‬جميع عناصر ‪ HTML‬الفارغة‪ ،‬مما يعني أنها ال تحتوي على نص أو عناصر فرعية داخل نصها‪ .‬فيما يلي مثال‪:‬‬

‫{ ‪div:empty‬‬

‫}‬
‫تحدد قاعدة ‪ CSS‬هذه جميع عناصر ‪ div‬الفارغة‪.‬‬

‫)(‪:NOT‬‬

‫تحدد الفئة الزائفة )(‪ :not‬جميع عناصر ‪ HTML‬التي ال تتطابق مع محدد ‪ CSS‬المعطى كمعلمة (داخل األقواس) للفئة‬

‫هنا مثال‪:‬‬

‫{ )‪p:not(:last-child‬‬
‫;‪border-bottom: 1px solid #cccccc‬‬
‫}‬
‫تحدد قاعدة ‪ CSS‬هذه جميع عناصر ‪ p‬التي ليست الطفل األخير لوالديها‪.‬‬

‫‪:CHECKED‬‬

‫تحدد الفئة ‪:checked‬جميع حقول اإلدخال التي تم تحديدها‪ ،‬مما يعني جميع مربعات االختيار‪ .‬إليك مثال‪ :‬تم التحقق منه‪:‬‬

‫{ ‪input[type="checkbox"]:checked‬‬

‫}‬

‫تحدد قاعدة ‪ CSS‬هذه جميع حقول اإلدخال التي لها سمة نوع المدخل كخانة اختيار ‪ ،‬والتي تم تحديدها‪.‬‬

‫‪:ENABLED, :DISABLED‬‬

‫تحدد الفئات ‪:enabled‬و ‪:disabled‬عناصر ‪ HTML‬التي تم تمكينها أو تعطيلها‪ .‬ستكون هذه عادّة ً حقول اإلدخال‪ .‬هنا مثال‪:‬‬

‫{ ‪input:enabled‬‬
‫;‪border: 1px solid #6666ff‬‬
‫}‬
‫‪30 | P a g e‬‬

‫{ ‪input:disabled‬‬
‫;‪border: 1px solid #666666‬‬
‫}‬

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

‫العناصر الزائفة ‪PSEUDO ELEMENTS‬‬

‫عناصر ‪ CSS‬الزائفة هي عناصر جزئية يمكن تصميمها‪ ،‬ولكنها ليست في حد ذاتها عناصر ‪ HTML‬حقيقية‪.‬‬

‫يتم تحديد العناصر الزائفة في محدد ‪ CSS‬باستخدام نقطتين مزدوجتين (‪ )::‬ثم اسم العنصر الزائف‪ .‬بناء الجملة هذا جديد من ‪ CSS 3.0.‬فيما‬
‫يلي مثال لعنصر زائف ‪CSS 3.0:‬‬

‫{ ‪p::first-letter‬‬
‫;‪font-size : 20px‬‬
‫}‬

‫قبل اإلصدار ‪ 3.0‬من‪ ، CSS‬كان المعيار عبارة عن نقطتين مفردتين‪ ،‬كما يلي‪:‬‬

‫{ ‪p:first-letter‬‬
‫;‪font-size : 20px‬‬
‫}‬

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

‫هناك العديد من العناصر الزائفة المختلفة التي يمكنك استخدامها‪ .‬يتم تناول عناصر ‪ CSS‬الزائفة في األقسام التالية‪.‬‬

‫‪::FIRST-LETTER‬‬

‫يمكن استخدام العنصر الزائف ‪ :first-letter‬لتحديد الحرف األول من عناصر ‪HTML.‬على سبيل المثال‪ ،‬لتحديد الحرف األول من جميع‬
‫عناصر‪ ، p‬عليك أن تكتب‪:‬‬

‫{ ‪p::first-letter‬‬
‫;‪font-size: 20px‬‬
‫}‬
‫يقوم هذا المثال بتعيين الحرف األول داخل جميع عناصر ‪ p‬إلى حجم الخط ‪ 20‬بكسل‪.‬‬

‫‪::FIRST-LINE‬‬

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

‫فيما يلي مثال على عنصر زائف في السطر األول‪:‬‬

‫{ ‪p::first-line‬‬
‫‪31 | P a g e‬‬

‫;‪font-size: 19px‬‬
‫}‬
‫يقوم هذا المثال بتعيين السطر األول لجميع عناصر ‪ p‬إلى حجم الخط ‪ 19‬بكسل‪.‬‬

‫‪::BEFORE, ::AFTER‬‬

‫تتطابق العناصر الزائفة ‪ :before‬و ‪:after CSS‬مع الطفل الظاهري األول واألخير لعنصر ‪ HTML‬المحدد‪ .‬يُستخدم هذا عادّة ً إلدراج‬
‫بعض المحتوى اإلضافي (نص أو‪ ) HTML‬قبل أو بعد ذلك االبن األخير االفتراضي باستخدام خاصية المحتوى ‪CSS.‬‬

‫يتم استخدام خاصية ‪ CSS content‬إلنشاء المحتوى وإدراجه في ‪ DOM‬عبر ‪ CSS.‬هنا مثال‪:‬‬

‫>"‪<div id="#theId‬‬
‫‪HTML Text‬‬
‫>‪</div‬‬

‫>‪<style‬‬
‫{ ‪#theId::after‬‬
‫;"‪content : " - Generated Content‬‬
‫}‬
‫>‪</style‬‬
‫يقوم هذا المثال بإدراج المحتوى المحدد في خاصية ‪ CSS‬للمحتوى بعد العنصر التابع األخير (المحتوى األخير) للعنصر الذي يحمل المعرف ‪.‬‬
‫‪theId‬‬

‫الً من ذلك‪ ،‬فسيتم إدراج المحتوى الذي تم إنشاؤه قبل المحتوى األول بد ّ‬
‫الً من بعد المحتوى‬ ‫إذا كنت قد استخدمت العنصر الزائف ‪ :before‬بد ّ‬
‫األخير‪.‬‬

‫‪::SELECTION‬‬

‫يشير العنصر الزائف ‪ ::selection‬إلى المحتوى المحدد عندما يختار المستخدم (على سبيل المثال‪ .‬جزء نصي باستخدام الماوس‪ ).‬هذا‬
‫العنصر الزائف مدعوم في ‪ IE‬و ‪ ،Chrome‬ولكن ليس في ‪ Firefox.‬لقد كان جز ًءا من اقتراح ‪ ،CSS 3.0‬لكنه لم يعد جز ًءا من‬
‫المواصفات‪.‬‬

‫فيما يلي مثال لعنصر ‪ ::selection CSS‬الزائف‪:‬‬

‫{ ‪::selection‬‬
‫;‪background-color: #ff00ff‬‬
‫}‬
‫يقوم هذا المثال بتعيين لون خلفية النص المحدد إلى اللون األرجواني‪.‬‬
‫‪32 | P a g e‬‬

‫‪CSS INHERITANCE‬‬

‫يمكن لعناصر ‪ HTML‬أن ترث أنماط ‪ CSS‬من العناصر األصلية‪ .‬وهذا ما يسمى وراثة ‪. CSS‬‬

‫فيما يلي مثال على وراثة ‪:CSS‬‬

‫>‪<div‬‬
‫>‪<p‬‬
‫‪This text inherits the font-size of the parent div element.‬‬
‫>‪</p‬‬
‫>‪</div‬‬
‫>‪<style‬‬
‫{ ‪div‬‬
‫;‪font-family: Arial‬‬
‫}‬
‫>‪</style‬‬

‫في هذا المثال‪ ،‬يحتوي عنصر ‪ div‬على خاصية عائلة الخطوط المعينة على ‪. Arial‬‬

‫يتم توريث خاصية ‪ CSS‬هذه من للعنصر ‪ p‬المتداخل‪ ،‬لذلك سيتم أيضًا تعيين عائلة خطوطه الى ‪Arial‬‬

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

‫>‪<body‬‬
‫>‪<div‬‬
‫>‪<p‬‬
‫‪This text inherits the font-size of the parent div element.‬‬
‫>‪</p‬‬
‫>‪</div‬‬
‫>‪<style‬‬
‫{ ‪body‬‬
‫;‪font-family: Arial‬‬
‫}‬
‫>‪</style‬‬
‫>‪</body‬‬

‫في هذا المثال‪ ،‬تم تعيين عائلة خطوط خاصية ‪ CSS‬على عنصر ‪ .body‬يتم بعد ذلك توريث خاصية ‪ CSS‬هذه للعنصرين ‪ div‬و‪p.‬‬

‫ليست كل األنماط موروثة من عنصر األب أو السلف‪ .‬بشكل عام‪ ،‬يتم توريث األنماط التي تنطبق على النص‪ ،‬في حين ال يتم توريث الحدود‬
‫والهوامش والفواصل واألنماط المشابهة‪.‬‬
33 | P a g e
‫‪34 | P a g e‬‬

‫‪CSS PRECEDENCE‬‬

‫عندما تستهدف قواعد ‪ CSS‬متعددة نفس عناصر‪ ، HTML‬وتقوم قواعد ‪ CSS‬هذه بتعيين بعض خصائص ‪ CSS‬نفسها‪ ،‬ما هي األنماط التي‬
‫سيتم تطبيقها في نهاية المطاف على عنصر‪ HTML‬؟ بمعنى آخر‪ ،‬ما هي قواعد ‪ CSS‬التي لها األسبقية؟‬

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

‫مثال أسبقية ‪CSS PRECEDENCE EXAMPLE - CSS‬‬

‫قبل القفز إلى قواعد أسبقية‪ ، CSS‬دعونا نلقي نظرة على مثال‪:‬‬

‫>‪<head‬‬
‫>‪<style‬‬
‫{ ‪body‬‬
‫;‪font-family: Arial‬‬
‫;‪font-size: 14px‬‬
‫}‬
‫{ ‪p‬‬
‫;‪font-size: 16px‬‬
‫}‬
‫{ ‪.logo‬‬
‫;‪font-family: Helvetica‬‬
‫‪font-size‬‬ ‫;‪: 20px‬‬
‫}‬

‫>‪</style‬‬
‫>‪</head‬‬

‫>‪<body‬‬

‫>"‪<div id="header‬‬
‫>‪<span class="logo">Super Co</span‬‬
‫>‪</div‬‬

‫>"‪<div id="body‬‬
‫>‪<p‬‬
‫‪This is the body of my page‬‬
‫>‪</p‬‬
‫>‪</div‬‬
‫‪35 | P a g e‬‬

‫>‪</body‬‬
‫يحتوي هذا المثال على ثالث قواعد ‪ CSS.‬تقوم جميع قواعد ‪ CSS‬الثالثة بتعيين حجم خط خاصية‪ ، CSS‬وتقوم اثنتين من قواعد ‪CSS‬‬
‫بتعيين عائلة خطوط خاصية ‪ CSS.‬يتم توريث قاعدة ‪ CSS‬الخاصة بعنصر النص بواسطة كل من العنصر ‪ div‬و ‪ span‬و ‪ p.‬باإلضافة إلى‬
‫ذلك‪ ،‬يحتوي عنصر االمتداد على قاعدة ‪ CSS‬تستهدفه من خالل فئة ‪ CSS‬الخاصة به)‪ ، (.logo‬ويحتوي العنصر ‪ p‬على قاعدة ‪CSS‬‬
‫تستهدف جميع عناصر ‪p.‬ما هي األنماط التي سيتم تطبيقها في نهاية المطاف على عناصر االمتداد و‪p‬؟‬

‫قواعد أسبقية ‪CSS PRECEDENCE RULES‬‬

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

‫‪!important‬بعد خصائص‪CSS.‬‬ ‫‪‬‬

‫درجة تخصيص محددات قواعد‪CSS.‬‬ ‫‪‬‬
‫تسلسل اإلعالن عن القاعدة‬ ‫‪‬‬

‫وسأشرح ما تعنيه هذه القواعد في األقسام التالية‪.‬‬

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

‫‪!IMPORTANT‬‬

‫إذا كنت تريد أن يكون لخاصية ‪ CSS‬معينة األسبقية على كافة قواعد ‪ CSS‬األخرى التي تقوم بتعيين نفس خاصية ‪ CSS‬لنفس عناصر‬
‫‪ ،HTML‬فيمكنك إضافة التعليمة ‪!important‬بعد خاصية ‪ CSS‬عندما تعلن عنها‪ .‬التعليمة الهامة لها األسبقية األعلى بين كافة عوامل‬
‫األسبقية‪ .‬هنا مثال مهم‪:‬‬

‫>‪<style‬‬
‫{ ‪div‬‬
‫;‪font-family: Arial‬‬
‫;‪font-size: 16px !important‬‬
‫}‬
‫{ ‪.specialText‬‬
‫‪36 | P a g e‬‬

‫;‪font-size: 18px‬‬
‫}‬
‫>‪</style‬‬

‫>"‪<div class="specialText‬‬
‫‪This is special text.‬‬
‫>‪</div‬‬
‫يحتوي هذا المثال على قاعدتين من قواعد ‪ CSS‬تستهدفان عنصر‪div.‬‬

‫عادّة ً‪ ،‬تتمتع قاعدة ‪ CSS‬مع محدد فئة ‪ CSS‬بخصوصية أعلى من قاعدة ‪ CSS‬مع محدد عنصر‪ ،‬لذا عادّة ً ما تكون لقاعدة ‪ CSS‬الثانية‬
‫) }‪(.specialText {...‬األسبقية على قاعدة ‪ CSS‬األولى ‪ (div {... } ).‬وهذا يعني أن قاعدة ‪ .specialText‬ستحدد حجم الخط‬
‫لعنصر ‪ div‬على ‪ 18‬بكسل‪.‬‬

‫نظرا ألن قاعدة ‪ div {...} CSS‬تحتوي على التعليمة ‪ !important‬بعد خاصية ‪ CSS‬لحجم الخط‪ ،‬فإن إعالن خاصية‬
‫ومع ذلك‪ً ،‬‬
‫‪CSS‬هذا له األسبقية على جميع التعريفات األخرى دون التعليمة ‪!important‬التي تستهدف نفس عنصر‪HTML.‬‬

‫اولوية محددات قواعد ‪SPECIFICITY OF CSS RULE SELECTORS - CSS‬‬

‫في بعض األحيان ال يتمكن المتصفح من تحديد قاعدة ‪ CSS‬أو أسبقية الخاصية بنا ًّء على ‪ .!important‬إما ألنه ال تحتوي إعالنات‬
‫خصائص ‪ CSS‬على التعليمة ‪ ،!important‬أو ألن إعالنات خصائص ‪ CSS‬المتعددة تحتوي على التعليمات ‪!important‬لنفس‬
‫خاصية ‪CSS‬‬

‫في هذه الحاالت‪ ،‬يلجأ المتصفح إلى استخدام أولوية محددات قواعد ‪ CSS‬لتحديد خصائص ‪ CSS‬التي لها األولوية‪.‬‬

‫تعتمد خصوصية قاعدة ‪ CSS‬على محددها‪ .‬كلما كان محدد ‪ CSS‬أكثر تحديدًا‪ ،‬زادت أسبقية إعالنات خصائص ‪ CSS‬داخل قاعدة ‪ CSS‬التي‬
‫تمتلك المحدد‪.‬‬

‫بشكل عام‪ ،‬كلما كان محدد ‪ CSS‬أكثر تحديدًا (فريدًا) يستهدف عنصر‪ ، HTML‬كلما زادت خصوصيته‪.‬‬

‫أنواع محددات ‪ CSS‬المختلفة لها خصوصية مختلفة‪ .‬يُقصد بالخصوصية مدى تحديد محدد ‪ CSS‬الذي يستهدف العنصر الذي يتم تحديده‪ .‬فيما‬
‫يلي قائمة بخصوصية محدد ‪:CSS‬‬
‫‪37 | P a g e‬‬

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

‫إن فهم الخصوصية من هذه القائمة وحدها أمر صعب‪ ،‬لذا اسمحوا لي أن أتابع ذلك ببعض األمثلة‪ .‬أوالًّ‪ ،‬انظر إلى مثال ‪HTML + CSS‬‬

‫>‪<body‬‬

‫>‪<style‬‬
‫‪body‬‬ ‫} ;‪{ font-size: 10px‬‬
‫‪div‬‬ ‫} ;‪{ font-size: 11px‬‬
‫} ;‪[myattr] { font-size: 12px‬‬
‫‪.aText‬‬ ‫} ;‪{ font-size: 13px‬‬
‫‪#myId‬‬ ‫} ;‪{ font-size: 14px‬‬
‫>‪</style‬‬
‫‪38 | P a g e‬‬

‫‪<div‬‬ ‫>‪> Text 1 </div‬‬

‫‪<div myattr‬‬ ‫>‪> Text 2 </div‬‬
‫"‪<div myattr class="aText‬‬ ‫>‪> Text 3 </div‬‬
‫>‪<div myattr class="aText" id="myId" > Text 4 </div‬‬

‫>‪</body‬‬
‫يحتوي هذا المثال على ‪ 5‬قواعد ‪ CSS‬مختلفة تستهدف جميعها واحدًا أو أكثر من عناصر ‪ div‬في المثال‪.‬‬

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

‫تستهدف قاعدة ‪ CSS‬الثانية عناصر ‪ div.‬تعد قاعدة ‪ CSS‬هذه أكثر تحديدًا لعناصر ‪ div‬التي ورثتها األنماط من عنصر النص‪.‬‬

‫تستهدف قاعدة ‪ CSS‬الثالثة كافة عناصر ‪ HTML‬باستخدام سمة تسمى ‪ myattr.‬هذا أكثر تحديدًا من جميع عناصر ‪ div.‬وبالتالي‪ ،‬فإن‬
‫عنصر ‪ div‬الذي يحتوي على السمة ‪myattr‬يتم تطبيق قاعدة ‪ CSS‬هذه عليه‪ .‬إذا قمت بتعيين قيمة سمة في محدد السمات‪ ،‬لكانت أكثر‬
‫تحديدًا‪.‬‬

‫تستهدف قاعدة ‪ CSS‬الرابعة جميع عناصر ‪HTML‬ذات فئة ‪ CSS‬المسماة ‪ aText.‬يعد محدد فئة ‪ CSS‬أكثر تحديدًا من محدد عنصر‬
‫‪div‬ومحدد السمة]‪ ، [myattr‬لذلك سيتم تطبيق قاعدة ‪ CSS‬هذه على عنصر ‪div‬الذي يحتوي على فئة‪CSS aText.‬‬

‫تستهدف قاعدة ‪ CSS‬الخامسة عنصر ‪HTML‬بالمعرف ‪ myId.‬يعتبر محدد المعرف أكثر تحديدًا من محدد العناصر ومحدد السمات ومحدد‬
‫الفئة‪ ،‬لذا فإن عنصر ‪ div‬الذي يحمل المعرف ‪ myId‬يتم تطبيق قاعدة ‪ CSS‬هذه عليه‪.‬‬

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

‫} { ‪div‬‬
‫]‪div[myattr‬‬
‫} { ‪div[myattr].aText‬‬

‫قاعدة ‪ CSS‬األولى هي مجرد محدد العناصر القياسي‪ .‬ال شيء جديد هنا‪ .‬أما المحدد الثاني فهو عبارة عن مزيج من محدد العناصر ومحدد‬
‫السمات‪ .‬سيكون هذا المحدد أكثر تحديدًا من محدد السمات بمفرده‪ .‬تجمع قاعدة ‪ CSS‬الثالثة بين محدد العناصر ومحدد السمات ومحدد الفئة‪ .‬يعد‬
‫محدد ‪ CSS‬هذا أكثر تحديدًا من محدد الفئة بحد ذاته‪.‬‬

‫بمجرد البدء في دمج أنواع محددات ‪ CSS‬في قواعد ‪CSS‬الخاصة بك‪ ،‬ستحتاج إلى فحص أسبقية تلك المحددات بعناية أكبر‪ ،‬أو التأكد من عدم‬
‫وجود تداخل بينها في العناصر المستهدفة‪ ،‬من أجل تحقيق التصميم المطلوب‪.‬‬
‫‪39 | P a g e‬‬

‫‪CSS BOX MODEL‬‬

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

‫تصور نموذج مربع ‪CSS‬‬

‫يبدو نموذج مربع ‪ CSS‬كما يلي‪:‬‬

‫يعتبر كل عنصر ‪ HTML‬يتم تقديمه بمثابة مربع‪ .‬يحتوي الصندوق على أربعة أجزاء (أو طبقات)‪.‬‬

‫الهامش‪ :‬الجزء الخارجي هو الهامش بين عنصر ‪ HTML‬هذا وعناصر ‪ HTML‬األخرى‪.‬‬

‫الحدود‪ :‬الجزء الثاني هو الحدود‪ .‬تقع الحدود داخل الهامش‪ ،‬وتحيط بالحشوة ومحتوى عنصر‪HTML.‬‬
‫الحشو‪ :‬الجزء الثالث هو الحشو‪ .‬تقع الحشوة داخل الحدود وتحيط بمحتوى عنصر‪HTML.‬‬
‫المحتوى‪ :‬الجزء الرابع هو المحتوى‪ .‬محتوى عنصر ‪ HTML‬هو ما يتم عرضه داخل عنصر ‪ HTML.‬عادّة ً ما يكون هذا مزي ًجا من النصوص‬
‫والصور وعناصر ‪ HTML‬األخرى‪.‬‬

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

‫‪CSS Margins‬‬ ‫‪‬‬

‫‪CSS Padding‬‬ ‫‪‬‬
‫‪CSS Border‬‬ ‫‪‬‬

‫كبيرا جدًا بحيث ال‬

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

‫العرض واالرتفاع ‪WIDTH AND HEIGHT‬‬

‫‪40 | P a g e‬‬

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

‫{ ‪#theDiv‬‬
‫‪width‬‬ ‫;‪: 300px‬‬
‫;‪height : 200px‬‬
‫}‬
‫تقوم قاعدة ‪ CSS‬هذه بتعيين العرض إلى ‪ 300‬بكسل واالرتفاع إلى ‪ 200‬بكسل لعنصر ‪ HTML‬بالمعرف‪theDiv.‬‬

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

‫‪total width‬‬ ‫‪= width‬‬ ‫‪+ margin-left + margin-right‬‬

‫‪+ border-left-width + border-right-width‬‬
‫‪+ padding-left + padding-right‬‬

‫‪total height = height + margin-top + margin-bottom‬‬

‫‪+ border-top-width + border-bottom-width‬‬
‫‪+ padding-top + padding-bottom‬‬

‫العرض اإلجمالي = العرض ‪ +‬الهامش األيسر ‪ +‬الهامش األيمن‬

‫‪+‬عرض الحدود اليسرى ‪ +‬عرض الحدود اليمنى‬
‫‪+‬الحشو لليسار ‪ +‬الحشو لليمين‬

‫االرتفاع اإلجمالي = االرتفاع ‪ +‬الهامش العلوي ‪ +‬الهامش السفلي‬

‫‪+‬عرض الحدود من األعلى ‪ +‬عرض الحدود من األسفل‬
‫‪+‬حشوة أعلى ‪ +‬حشوة أسفل‬

‫إذا كان عنصر ‪ HTML‬يحتوي على حشوة ‪ 5‬بكسل‪ ،‬وحدود ‪ 1‬بكسل وهامش ‪ 10‬بكسل (جميعها من جميع الجوانب)‪ ،‬فإن إجمالي العرض‬
‫واالرتفاع لعنصر ‪ HTML‬سيكون‪:‬‬

‫‪total width‬‬ ‫‪= width‬‬ ‫‪+ 10 + 10 + 1 + 1 + 5 + 5 = width‬‬ ‫‪+ 32‬‬

‫‪total height = height + 10 + 10 + 1 + 1 + 5 + 5 = height + 32‬‬

‫تحجيم الصندوق ‪BOX-SIZING‬‬

‫يمكنك تغيير كيفية قيام المتصفحات بحساب حجم عنصر ‪ HTML‬باستخدام خاصية تغيير حجم الصندوق في ‪ box-sizing CSS.‬خاصية‬
‫تغيير حجم ‪ box-sizing‬الصندوق في ‪ CSS‬جديدة في ‪CSS 3.0‬‬

‫في‪ ، Firefox‬سيتعين عليك استخدام البادئة ‪ ،-moz-‬لذلك تسمى الخاصية ‪ -moz-box-sizing.‬ما عليك سوى تعيين خصائص‬

‫‪ box-sizing‬و ‪-moz-box-sizing‬على نفس القيمة‪ ،‬لجعل هذا يعمل في كل من ‪ IE‬و ‪Chrome‬و‪Firefox.‬‬

‫يمكن لخاصية تغيير حجم الصندوق أن تأخذ هذه القيم‪:‬‬

‫‪41 | P a g e‬‬

‫‪content-box‬‬ ‫‪‬‬
‫‪border-box‬‬ ‫‪‬‬
‫‪inherit‬‬ ‫‪‬‬

‫مربع المحتوى‬ ‫‪‬‬

‫مربع الحدود‬ ‫‪‬‬
‫يرث‬ ‫‪‬‬

‫قيمة مربع المحتوى ‪ content-box‬هي القيمة االفتراضية‪ .‬وهذا يجعل خصائص العرض واالرتفاع في ‪ CSS‬تحدد عرض وارتفاع مربع‬
‫المحتوى وحده‪.‬‬

‫تعني قيمة الوراثة أن عنصر ‪ HTML‬يرث قيمة خاصية ‪ CSS‬هذه من عنصر ‪ HTML‬األصلي الخاص به‪.‬‬

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

‫عند استخدام‪ ، box-sizing : border-box‬سيتم حساب عرض وارتفاع مربع المحتوى على النحو التالي‪:‬‬

‫‪content-box-width‬‬ ‫‪= border-box-width‬‬ ‫‪- border-width‬‬ ‫‪- padding width‬‬

‫‪content-box-height = border-box-height - border-height - padding height‬‬

‫عرض مربع المحتوى = عرض مربع الحدود ‪ -‬عرض الحدود ‪ -‬عرض الحشو‬
‫ارتفاع مربع المحتوى = ارتفاع مربع الحدود ‪ -‬ارتفاع الحدود ‪ -‬ارتفاع الحشو‬

‫إذا كان عرض عنصر ‪ ، 200 HTML‬وارتفاعه ‪ ،180‬حشو ب ‪ 5‬بكسل وحدود ‪ 1‬بكسل (جميعها من جميع الجوانب)‪ ،‬فسيكون عرض‬
‫وارتفاع مربع المحتوى كما يلي‪:‬‬

‫‪content-box-width‬‬ ‫‪= 200‬‬ ‫‪- (2 * 1) - (2 * 5) = 200 - 2 - 10‬‬ ‫‪= 188‬‬

‫‪content-box-height = 180‬‬ ‫‪- (2 * 1) - (2 * 5) = 180 - 2 - 10‬‬ ‫‪= 168‬‬
‫عرض صندوق المحتوى = ‪188 = 10 - 2 - 200 = )5 * 2( - )1 * 2( - 200‬‬
‫ارتفاع صندوق المحتوى = ‪168 = 10 - 2 - 180 = )5 * 2( - )1 * 2( - 180‬‬

‫سيشغل ‪ 200 × 180 HTML‬بكسل (باإلضافة إلى الهوامش أيضًا‪ ،‬إذا كان العنصر يحتوي على أي منها) والتي تم تعيينها بواسطة خصائص‬
‫العرض واالرتفاع في ‪ CSS.‬سيشغل مربع المحتوى ‪ 168 × 188‬بكسل فقط ألنه يتم طرح الحدود والحشوة من عرض وارتفاع مربع الحدود‬
‫للحصول على عرض وارتفاع مربع المحتوى‪.‬‬
‫‪42 | P a g e‬‬

‫‪CSS MARGIN‬‬

‫كما هو موضح في النص الخاص بنموذج مربع ‪ ،CSS‬يمكن أن يحتوي عنصر ‪ HTML‬على هوامش حوله‪.‬‬

‫يمكنك التحكم في الهامش حول عنصر ‪ HTML‬عبر خصائص ‪ CSS‬التالية‪:‬‬

‫هامِ ش‬ ‫‪‬‬
‫أعلى الهامش‬ ‫‪‬‬
‫الهامش األيمن‬ ‫‪‬‬
‫الهامش السفلي‬ ‫‪‬‬
‫الهامش األيسر‬ ‫‪‬‬

‫‪‬‬ ‫‪margin‬‬
‫‪‬‬ ‫‪margin-top‬‬
‫‪‬‬ ‫‪margin-right‬‬
‫‪‬‬ ‫‪margin-bottom‬‬
‫‪‬‬ ‫‪margin-left‬‬

‫تقوم كل من خصائص ‪ CSS‬هذه بتعيين الهامش حول عنصر ‪ HTML‬باستخدام أي من وحدات ‪ CSS‬القياسية ‪ (px‬و ‪em‬وما إلى ذلك ‪).‬‬
‫وهنا بعض األمثلة‪:‬‬

‫تقوم كل من خصائص ‪ CSS‬هذه بتعيين الهامش حول عنصر ‪ HTML‬باستخدام أي من وحدات ‪ CSS‬القياسية ‪ px‬و ‪ em‬وما إلى ذلك‬

‫‪.‬وهنا بعض األمثلة‪:‬‬

‫{ ‪#divOne‬‬
‫;‪margin : 20px‬‬
‫}‬

‫{ ‪#divTwo‬‬
‫;‪margin : 20px 10px 20px 10px‬‬
‫}‬

‫{ ‪#divThree‬‬
‫‪margin-top‬‬ ‫;‪: 20px‬‬
‫‪margin-right‬‬ ‫;‪: 10px‬‬
‫;‪margin-bottom : 20px‬‬
‫‪margin-left‬‬ ‫;‪: 10px‬‬
‫}‬
‫‪43 | P a g e‬‬

‫يقوم أول أمثلة هامش ‪ CSS‬هذه بتعيين الهامش على الجوانب األربعة لعنصر ‪ HTML‬بالمعرف ‪ divOne‬إلى ‪ 20‬بكسل‪ .‬ويتم ذلك عن طريق‬
‫تعيين القيمة ‪ 20‬بكسل لخاصية ‪ CSS‬الخاصة بالهامش‪.‬‬

‫المثال الثاني يحدد الهامش العلوي بـ ‪ 20‬بكسل‪ ،‬والهامش األيمن بـ ‪ 10‬بكسل‪ ،‬والهامش السفلي بـ ‪ 20‬بكسل‪ ،‬والهامش األيسر بـ ‪ 10‬بكسل‪ .‬يتم‬
‫ذلك عن طريق تعيين خاصية الهامش ‪ CSS‬على ‪px 10px 20px 10px. 20‬تحدد القيم األربع الهوامش العلوية واليمنى والسفلى واليسار‬
‫بشكل فردي‪.‬‬

‫المثال الثالث يحدد الهامش العلوي بـ ‪ 20‬بكسل‪ ،‬والهامش األيمن بـ ‪ 10‬بكسل‪ ،‬والهامش السفلي بـ ‪ 20‬بكسل‪ ،‬والهامش األيسر بـ ‪ 10‬بكسل ‪.‬‬
‫ويتم ذلك عن طريق تعيين كل من خصائص ‪ CSS‬األربعة هامش أعلى‪ ،‬هامش يمين‪ ،‬هامش أسفل‪ ،‬هامش يسار بشكل منفصل‪.‬‬
‫‪44 | P a g e‬‬

‫‪CSS PADDING‬‬

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

‫يتم تحديد الحشو لعنصر ‪ HTML‬باستخدام خصائص الحشو ‪ CSS.‬خصائص الحشو ‪ CSS‬هي‪:‬‬

‫حشوة‬
‫أعلى الحشو‬
‫الحشو الصحيح‬
‫أسفل الحشو‬
‫الحشو لليسار‬

‫‪‬‬ ‫‪padding‬‬
‫‪‬‬ ‫‪padding-top‬‬
‫‪‬‬ ‫‪padding-right‬‬
‫‪‬‬ ‫‪padding-bottom‬‬
‫‪‬‬ ‫‪padding-left‬‬

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

‫{ ‪#divOne‬‬
‫;‪padding : 20px‬‬
‫}‬

‫{ ‪#divTwo‬‬
‫;‪padding : 20px 10px 20px 10px‬‬
‫}‬

‫{ ‪#divThree‬‬
‫‪padding-top‬‬ ‫;‪: 20px‬‬
‫‪padding-right‬‬ ‫;‪: 10px‬‬
‫;‪padding-bottom : 20px‬‬
‫‪padding-left‬‬ ‫;‪: 10px‬‬
‫}‬

‫يقوم أول أمثلة الحشو في ‪ CSS‬بتعيين المساحة المتروكة على الجوانب األربعة لعنصر ‪ HTML‬بالمعرف ‪ divOne‬إلى ‪ 20‬بكسل‪ .‬ويتم ذلك‬
‫عن طريق تعيين القيمة ‪ 20‬بكسل لخاصية الحشو‪CSS.‬‬

‫المثال الثاني يعين الحشو العلوي إلى ‪ 20‬بكسل‪ ،‬والحشو األيمن إلى ‪ 10‬بكسل‪ ،‬والحشو السفلي إلى ‪ 20‬بكسل‪ ،‬والحشو األيسر إلى ‪ 10‬بكسل‪.‬‬
‫يتم ذلك عن طريق ضبط خاصية الحشو ‪ CSS‬على ‪px 10px 20px 10px. 20‬تحدد القيم األربع الحشو العلوي واليمين والسفلي واليسار‬
‫بشكل فردي‪.‬‬
‫‪45 | P a g e‬‬

‫المثال الثالث يعين الحشو العلوي إلى ‪ 20‬بكسل‪ ،‬والحشو األيمن إلى ‪ 10‬بكسل‪ ،‬والحشو السفلي إلى ‪ 20‬بكسل‪ ،‬والحشو األيسر إلى ‪ 10‬بكسل‪.‬‬
‫يتم ذلك عن طريق تعيين كل من خصائص ‪ CSS‬األربع‪ :‬الحشو العلوي‪ ،‬والحشو األيمن‪ ،‬والحشو السفلي‪ ،‬والحشو اليساري بشكل منفصل‪.‬‬
46 | P a g e

CSS BORDER

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

.‫ يغطي هذا النص خصائص الحدود هذه‬.‫ المتنوعة‬CSS ‫يتم تحديد الحدود باستخدام خصائص حدود‬

CSS ‫خصائص الحدود‬

:border ‫ الخاصة بالحدود‬CSS ‫يتم تصميم الحدود باستخدام خصائص‬

 border-width
 border-style
 border-color

 border-top
 border-right
 border-bottom
 border-left

 border-top-width
 border-top-style
 border-top-color
 border-right-width
 border-right-style
 border-right-color
 border-bottom-width
 border-bottom-style
 border-bottom-color
 border-left-width
 border-left-style
 border-left-color

 border-radius
 border-top-left-radius
 border-top-right-radius
 border-bottom-left-radius
 border-bottom-right-radius

BORDER

‫ تتكون قيمة‬.)‫ ويسار‬،‫ أسفل‬،‫ يمين‬،‫ وهذا يعني جميع الحدود األربعة (أعلى‬، HTML‫ بتعيين الحدود حول عنصر‬border CSS ‫تقوم الخاصية‬
:‫ من ثالثة أجزاء‬border CSS ‫خاصية‬

‫عرض الحدود‬
‫نمط الحدود‬
‫لون الحدود‬
‫‪47 | P a g e‬‬

‫ويتم تحديد كل جزء من هذه األجزاء عند تعيين خاصية الحدود‪ ،‬مفصولة بمسافة‪ .‬هنا مثال‪:‬‬

‫{ ‪#theDiv‬‬
‫;‪border : 1px solid #000000‬‬
‫}‬
‫القيمة األولى هي ‪px 1‬وهو عرض الحدود‪ .‬تقوم هذه القيمة بتعيين الحد حول عنصر ‪ HTML‬بعرض ‪ 1‬بكسل‪ .‬يتم تحديد عروض الحدود‬
‫باستخدام أي من وحدات ‪ CSS‬الصالحة‪.‬‬

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

‫القيمة الثالثة هي ‪ 000000#‬وهو لون الحدود‪ .‬تقوم هذه القيمة بتعيين لون الحدود إلى اللون األسود‪ .‬يتم تحديد ألوان الحدود باستخدام تنسيقات‬
‫ألوان‪CSS.‬‬

‫‪BORDER-WIDTH‬‬

‫يمكن استخدام خاصية ‪ border-width CSS‬لتعيين عرض الحدود حول عنصر ‪ HTML.‬يتم تحديد قيم خاصية ‪Border-width‬‬
‫‪CSS‬باستخدام أي من وحدات ‪ CSS‬الصالحة‪ .‬هنا مثال‪:‬‬

‫{ ‪#theDiv‬‬
‫;‪border-width: 2px‬‬
‫}‬
‫يقوم هذا المثال لقاعدة ‪ CSS‬بتعيين عرض الحدود إلى ‪ 2‬بكسل لعنصر ‪ HTML‬المحدد بواسطة قاعدة ‪CSS‬‬

‫‪BORDER-STYLE‬‬

‫يمكن استخدام خاصية ‪ Border-style CSS‬لتعيين نمط الحدود الخاص بالحدود حول عنصر ‪ HTML.‬القيم الصالحة التي يمكنك استخدامها‬
‫لخاصية ‪ CSS‬ذات النمط الحدودي هي‪:‬‬

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

‫ال شيء والقيم المخفية لها نفس التأثير‪ .‬ال يظهر أي حدود‪.‬‬
‫‪48 | P a g e‬‬

‫فيما يلي بعض األمثلة المرئية لكيفية ظهور أنماط الحدود هذه عند عرضها‪:‬‬

‫الحظ أنه تم ضبط عرض الحدود على ‪ 2‬بكسل لألمثلة الثالثة األولى‪ ،‬و‪ 6‬بكسل لألمثلة األخيرة‪ .‬تتطلب بعض أنماط الحدود عرض حدود أكبر من‬
‫‪ 2‬بكسل قبل أن تتمكن من رؤية تأثيرها فعليًا‪.‬‬

‫‪BORDER-COLOR‬‬

‫الخاصية ‪ border-color CSS‬تحدد لون الحدود‪ .‬يمكن لخاصية ‪ Border-color CSS‬قبول أي لون ‪ CSS‬صالح‪ .‬فيما يلي مثال على‬
‫لون الحدود ‪:‬‬

‫‪BORDER-TOP, BORDER-RIGHT, BORDER-BOTTOM, BORDER-LEFT‬‬

‫تعمل خصائص‪ ، border-top‬و‪ ، border-right‬و‪ ، border-bottom‬و ‪ border-left‬بنفس الطريقة التي تعمل بها خاصية‬
‫‪ ،border‬باستثناء أن خصائص ‪ CSS‬هذه تقوم فقط بتكوين جزء واحد من الحد (الحد العلوي‪ ،‬أو األيسر‪ ،‬أو السفلي‪ ،‬أو األيمن)‪ .‬يتم تكوين‬
‫هذه الخصائص بنفس الطريقة‪ .‬هنا مثال‪:‬‬

‫{ ‪#theDiv‬‬
‫;‪border-left: 1px solid #000000‬‬
‫}‬

‫يقوم هذا المثال بتعيين الحد األيسر لعنصر ‪ HTML‬المحدد إلى حد أسود خالص بعرض ‪ 1‬بكسل‪ .‬إليك كيف يبدو ذلك عند عرضه في المتصفح‪:‬‬

‫عنصر ذو حد يسار‪ 1 :‬بكسل صلب ‪000000#‬‬

‫‪ADDITIONAL BORDER CS S PROPERTIES‬‬

‫‪49 | P a g e‬‬

‫تعمل خصائص ‪ CSS‬األخيرة للحدود‪ ،border-top-width‬و‪ ، border-top-style‬و ‪ ،border-top-color‬وما إلى ذلك بنفس‬
‫الطريقة التي تعمل بها خصائص ‪ ،border-width‬و‪ ، border-style‬و‪ ، border-color‬باستثناء هذه الحدود األخيرة يتم تعيين‬
‫الخصائص فقط على جزء من الحدود (أعلى أو يمين أو أسفل أو يسار‪).‬‬

‫هنا مثال‪:‬‬

‫{ ‪#theDiv‬‬
‫;‪border-top-width: 2px‬‬
‫;‪border-top-style: dashed‬‬
‫;‪border-top-color: #cccccc‬‬
‫}‬
‫يقوم هذا المثال بتعيين الحد العلوي للعنصر المحدد إلى حد رمادي متقطع بعرض ‪ 4‬بكسل‪ .‬إليك كيف يبدو ذلك عند عرضه في المتصفح‪:‬‬

‫‪BORDER-RADIUS‬‬

‫خاصية ‪ Border-radius CSS‬جديدة في ‪ CSS 3.0.‬تُستخدم الخاصية ‪ border-radius‬في ‪ CSS‬إلنشاء زوايا مستديرة من‬
‫الحدود على عناصر ‪ HTML.‬قبل ذلك‪ ،‬كانت الزوايا الدائرية ذات نصف القطر الحدودي في عناصر ‪ HTML‬ممكنة فقط باستخدام الجداول‬
‫والصور‪ ،‬وكانت ثقيلة في ‪ HTML‬وثقيلة للتنزيل للمتصفح‪ .‬لحسن الحظ‪ ،‬فإن خاصية ‪ Border-radius CSS‬تنقذنا من هذا البؤس‪.‬‬

‫فيما يلي مثال لنصف القطر الحدودي‪:‬‬

‫{ ‪#theDiv‬‬
‫‪border‬‬ ‫;‪: 1px solid #cccccc‬‬
‫;‪border-radius : 10px‬‬
‫‪padding‬‬ ‫;‪: 10px‬‬
‫}‬
‫إليك كيف يبدو عنصر ‪ div‬مع أنماط ‪ CSS‬المطبقة‪:‬‬

‫كما ترون‪ ،‬أصبح عنصر ‪ div‬اآلن ذو زوايا مستديرة‪ .‬نصف قطر االستدارة هو ‪ 10‬بكسل ألنني قمت بتعيين ‪ 10‬بكسل كنصف قطر (قيمة) في‬
‫إعالن خاصية ‪ CSS‬لنصف القطر الحدودي‪.‬‬

‫تعمل الخاصية ‪ border-radius‬في ‪ CSS‬أيضًا مع ألوان الخلفية‪ ،‬حتى لو لم يكن لعنصر ‪ HTML‬أي حدود‪ .‬فيما يلي مثال لنصف قطر‬
‫الحدود ولون الخلفية‪:‬‬

‫{ ‪#theDiv‬‬
‫;‪background-color: #66ff66‬‬
‫‪50 | P a g e‬‬

‫;‪border-radius : 20px‬‬
‫‪padding‬‬ ‫;‪: 10px‬‬
‫}‬
‫وإليك ما يبدو عليه نصف قطر الحدود ولون الخلفية عند العرض‪:‬‬

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

‫{ ‪#theDiv‬‬
‫‪border‬‬ ‫;‪: 1px solid #cccccc‬‬
‫;‪border-radius : 20px / 10px‬‬
‫‪padding‬‬ ‫;‪: 20px‬‬
‫}‬
‫إليك ما تبدو عليه الحدود عند عرضها‪:‬‬

‫كما ترون‪ ،‬يكون التقريب أطول أفقيًا (‪ 20‬بكسل) منه عموديًا (‪ 10‬بكسل)‪.‬‬

‫يمكنك أيضًا ضبط تقريب كل زاوية على حدة عن طريق تحديد أربع قيم لخاصية ‪ Border-radius‬في ‪ CSS.‬هنا مثال‪:‬‬

‫{ ‪#theDiv‬‬
‫‪border‬‬ ‫;‪: 1px solid #cccccc‬‬
‫;‪border-radius : 20px 15px 10px 5px‬‬
‫‪padding‬‬ ‫;‪: 20px‬‬
‫}‬

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

‫إليك ما تبدو عليه الزوايا عند تقديمها‪:‬‬

‫‪51 | P a g e‬‬

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

‫يمكنك أيضًا ضبط التقريب أفقيًا وعموديًا لكل زاوية مثل هذا‪:‬‬

‫تما ًما كما هو الحال مع خاصية ‪ ، Border‬تحتوي خاصية ‪ border-radius‬على مجموعة من الخصائص الفرعية التي يمكنها تعيين نصف‬
‫قطر كل زاوية على حدة ‪.‬هذه الخصائص الفرعية هي‪:‬‬

‫الحدود‪-‬أعلى‪-‬يسار‪-‬نصف القطر‬
‫الحدود‪-‬أعلى‪-‬يمين‪-‬نصف القطر‬
‫نصف القطر الحدودي السفلي األيمن‬
‫نصف القطر الحدودي السفلي األيسر‬

‫‪‬‬ ‫‪border-top-left-radius‬‬
‫‪‬‬ ‫‪border-top-right-radius‬‬
‫‪‬‬ ‫‪border-bottom-right-radius‬‬
‫‪‬‬ ‫‪border-bottom-left-radius‬‬

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

‫{ ‪#theDiv‬‬
‫‪border‬‬ ‫;‪: 1px solid #cccccc‬‬
‫‪border-top-left-radius‬‬ ‫;‪: 40px‬‬
‫;‪border-top-right-radius : 40px / 20px‬‬
‫}‬

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

‫‪BORDER IMAGES‬‬

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

‫مصدر صورة الحدود‬

‫شريحة صورة الحدود‬
‫تكرار صورة الحدود‬

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

‫‪‬‬ ‫‪border-image-source‬‬
‫‪‬‬ ‫‪border-image-slice‬‬
‫‪52 | P a g e‬‬

‫‪‬‬ ‫‪border-image-repeat‬‬

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

‫‪BORDER-IMAGE-SOURCE‬‬

‫يتم استخدام الخاصية ‪ border-image-source CSS‬لإلشارة إلى الصورة الستخدامها كصورة حدودية‪ .‬فيما يلي مثال لمصدر صورة‬
‫الحدود‪:‬‬

‫;)'‪border-image-source: url('/images/css/border-image.png‬‬
‫‪BORDER-IMAGE-SLICE‬‬

‫الخاصية ‪ border-image-slice‬في ‪ CSS‬يمكن أن تأخذ ما بين قيمة واحدة وأربع قيم‪ .‬هذه القيم من واحد إلى أربع هي إحداثيات‬
‫الشريحة‪ .‬معنى إحداثيات الشريحة ‪ y2 ،x2 ،y1 ، x1‬موضحة في هذه الصورة‪:‬‬

‫طا رأسيًا واحدًا عبر كل من ‪ x1‬و‪ ،x2‬وخ ً‬

‫طا أفقيًا عبر كل من ‪ y1‬و‪،y2‬‬ ‫الحظ اإلحداثيات األربعة‪y2. ،x2 ،y2 ، x1‬عندما ترسم خ ً‬
‫الً‪ .‬تقطع هذه الخطوط الصورة إلى ‪ 9‬شرائح‪ .‬سيتم تطبيق هذه الشرائح التسعة على حدود عنصر ‪HTML‬‬
‫سينتهي بك األمر بأربعة خطوط إجما ّ‬
‫المستهدف‪.‬‬
‫‪53 | P a g e‬‬

‫إذا قمت بتحديد أقل من ‪ 4‬إحداثيات‪ ،‬فسيقوم المتصفح باستقراء اإلحداثيات األربعة جميعها من القيم التي تحددها‪ .‬على سبيل المثال‪ ،‬إذا كتبت ‪50‬‬
‫فقط‪ ،‬فسيفترض المتصفح أنك تقصد ‪50‬بكسل من كل حافة من حواف الصورة‪ .‬إذا كتبت ‪ ،50100‬يفترض المتصفح أنك تعني ‪ 50‬بكسل من‬
‫الحافة اليسرى واليمنى‪ ،‬و‪ 100‬بكسل من الحافة العلوية والسفلية للصورة‪.‬‬

‫فيما يلي مثال حي لصورة الحدود‪ .‬إذا قمت بتغيير حجم نافذة المتصفح‪ ،‬يمكنك رؤية كيفية توسيع صورة الحدود لتناسب عنصر ‪ div‬الذي تم‬
‫تطبيقه عليه‪.‬‬

‫إليك الكود المستخدم إلنشاء هذه الصورة الحدودية‪:‬‬

‫>‪<style‬‬
‫‪#withBorderImage1‬‬ ‫{‬
‫;)'‪border-image-source: url('/images/css/border-image.png‬‬
‫;‪border-image-slice: 70‬‬
‫;‪border-image-repeat: stretch‬‬
‫;‪height : 300px‬‬
‫;‪border-width: 70px‬‬
‫;‪border-style: solid‬‬
‫}‬
‫>‪</style‬‬

‫>"‪<div id="withBorderImage1‬‬
‫‪Here is a <code>div</code> with border image.‬‬
‫>‪</div‬‬
‫الحظ كيف يتم تعيين شريحة الصورة الحدودية على قيمة واحدة فقط‪ .70 :‬وهذا يعني أنه يجب تقطيع الصورة بمقدار ‪ 70‬بكسل من كل حافة من‬
‫حواف الصورة‪.‬‬
‫‪54 | P a g e‬‬

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

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

‫‪BORDER-IMAGE-REPEAT‬‬

‫تُستخدم الخاصية ‪ border-image-repeat CSS‬لتحديد كيفية تكرار أجزاء الصورة الحدودية داخل حدود عنصر‪ ، HTML‬إذا كانت‬
‫أبعاد صورة الحدود وأبعاد عنصر ‪HTML‬غير متماثلة‪.‬‬

‫يمكن أن تقبل الخاصية ‪ border-image-repeat CSS‬إحدى هذه القيم‪:‬‬

‫تمتد‬
‫يكرر‬
‫دائري‬
‫فضاء‬

‫‪‬‬ ‫‪stretch‬‬
‫‪‬‬ ‫‪repeat‬‬
‫‪‬‬ ‫‪round‬‬
‫‪‬‬ ‫‪space‬‬

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

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

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

‫الً من تمديد الشرائح (كما هو الحال في الجولة)‪ ،‬سيتم إدراج مسافة‬

‫تعني مساحة القيمة أنه سيتم تكرار الشريحة لعدد صحيح من المرات‪ ،‬ولكن بد ّ‬
‫بين الشرائح المتكررة‪.‬‬
‫‪55 | P a g e‬‬

‫‪CSS UNITS‬‬

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

‫{ ‪p‬‬
‫;‪font-size: 18px‬‬
‫}‬
‫يستخدم هذا المثال بكسل (بكسل) كوحدة لخاصية حجم الخط‪ .‬وهذا يعني أن ‪ 18‬بكسل يعني ‪ 18‬بكسل‪.‬‬

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

‫بكسل‬
‫النسبة المئوية لبعد العنصر األصلي (أو بُعد نافذة المتصفح لعنصر النص)‪ ،‬على سبيل المثال‪%25 .‬‬
‫يعتمد البعد على حجم الخط القياسي في المتصفح‪ = 1.0em ( .‬الحجم القياسي‪).‬‬
‫سم سنتيمترا‬
‫ملم ملليمتر‬
‫بالبوصة‬
‫نظرا ألن المعيار السابق لشاشات الكمبيوتر كان ‪ 72‬نقطة في البوصة)‪.‬‬
‫نقطة نقطة ‪ -‬تساوي ‪ 72/1‬بوصة ( ً‬
‫كمبيوتر بيكا ‪ -‬يساوي ‪ 12‬نقطة‪.‬‬
‫‪56 | P a g e‬‬

‫‪CSS COLORS‬‬

‫هناك العديد من خصائص ‪ CSS‬التي تحدد األلوان ألجزاء من عناصر ‪ HTML.‬على سبيل المثال‪ ،‬اللون‪ ،‬لون الخلفية‪ ،‬الحدود وما إلى ذلك‪.‬‬

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

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

‫رموز األلوان المحددة مسبقًا‬

‫‪ RGB‬الست عشري‬
‫‪RGB‬‬
‫‪RGBA‬‬
‫‪HSL‬‬

‫الً بعض األمثلة على تنسيقات األلوان المختلفة المستخدمة في قواعد‪CSS:‬‬

‫سيتم تغطية كل من هذه الطرق في األقسام أدناه‪ .‬فيما يلي أو ّ‬

‫‪#one‬‬ ‫{‬ ‫;‪background-color: red‬‬ ‫}‬

‫‪#two‬‬ ‫{‬ ‫;‪background-color: #ff0000‬‬ ‫}‬
‫{ ‪#three‬‬ ‫;)‪background-color: rgb(255, 0, 0‬‬ ‫}‬
‫‪#four‬‬ ‫{‬ ‫;)‪background-color: rgba(255, 0, 0, 1.0‬‬ ‫}‬
‫‪#five‬‬ ‫{‬ ‫} ;)‪background-color: hsl(0%, 100%, 0%‬‬

‫تقوم جميع قواعد ‪ CSS‬هذه بتعيين لون خلفية عنصر ‪ HTML‬إلى اللون األحمر ولكنها تفعل ذلك باستخدام رمز لون محدد مسبقًا ورمز لون‬
‫سداسي عشري ورمز لون ‪ RGB‬ورمز لون ‪ RGBA‬ورمز لون‪HSL‬‬

‫رموز األلوان المح ددة مسب ق ً ا‬

‫يحتوي ‪ CSS‬على مجموعة من األلوان المحددة مسبقًا مثل األحمر واألخضر وما إلى ذلك‪ .‬فيما يلي بعض رموز األلوان األكثر شيوعًا‪:‬‬

‫أحمر‬
‫أخضر‬
‫أزرق‬
‫أسود‬
‫أبيض‬
‫رمادي‬
‫أرجواني‬
‫أرجواني‬
‫البنفسجي‬

‫‪‬‬ ‫‪red‬‬
‫‪‬‬ ‫‪green‬‬
‫‪‬‬ ‫‪blue‬‬
‫‪57 | P a g e‬‬

‫‪‬‬ ‫‪black‬‬
‫‪‬‬ ‫‪white‬‬
‫‪‬‬ ‫‪gray‬‬
‫‪‬‬ ‫‪magenta‬‬
‫‪‬‬ ‫‪purple‬‬
‫‪‬‬ ‫‪violet‬‬

‫هناك ألوان محددة مسب ًقا أكثر من هذه‪ ،‬ولكن على الرغم من أن رموز األلوان المحددة مسبقًا قد تبدو مفيدة‪ ،‬إال أنها ً‬
‫نادرا ما تلبي احتياجاتك‪.‬‬
‫سيتطلب نظام األلوان لموقع الويب الخاص بك في أغلب األحيان ألوانًا ال تحتوي على رموز محددة مسبقًا‪ .‬لذلك ستستخدم في أغلب األحيان رمز‬
‫األلوان السداسي العشري أو‪RGB / RGBA.‬‬

‫‪ RGB‬الست عشري‬

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

‫عند تحديد لون ‪ RGB‬سداسي عشري‪ ،‬فإنك تكتب قيم األلوان األحمر واألخضر واألزرق بأرقام سداسية عشرية‪ .‬يتكون رقم مكون اللون السداسي‬
‫العشري من رقم يتراوح بين ‪ 0‬و‪ ،255‬ولكن يتم تحديده باستخدام رقمين سداسي عشري‪.‬‬

‫فيما يلي مثال لرمز اللون السداسي العشري‪:‬‬

‫;‪#ff00ff‬‬

‫يتكون هذا الرمز من ثالث قيم لمكونات األلوان‪ :‬األحمر)‪ ، (ff‬واألخضر)‪ ، (00‬واألزرق ‪ (ff).‬وبالتالي فإن هذا اللون هو مزيج من اللون‬
‫األحمر واألزرق‪ ،‬مما ينتج عنه اللون األرجواني‪.‬‬

‫الحظ ‪ #‬أمام رمز اللون‪ .‬يشير هذا الحرف إلى المتصفح بأن هذا رمز لوني سداسي عشري‪.‬‬

‫‪RGB COLORS‬‬

‫الً من‬
‫تنسيق األلوان ‪ RGB‬يشبه إلى حد كبير تنسيق األلوان السداسي العشري‪ .‬يتم تحديد كل لون كمزيج بين األحمر واألخضر واألزرق‪ .‬بد ّ‬
‫استخدام األرقام السداسية العشرية‪ ،‬يمكنك استخدام األرقام العشرية بين ‪ 0‬و‪ .255‬فيما يلي مثال لأللوان‪RGB:‬‬

‫;)‪rgb(255, 0, 255‬‬

‫يضبط هذا المثال فارق اللون األحمر (األول) على ‪ ،255‬وفارق اللون األخضر (الثاني) على ‪ ،0‬وفارق اللون األزرق (الثالث) على ‪.255‬‬
‫وسينتج عن ذلك نفس اللون األرجواني مثل اللون المدرج في مثال اللون السداسي العشري‪. .‬‬

‫‪RGBA COLORS‬‬

‫ألوان ‪ RGBA‬تعني األحمر واألخضر واألزرق وألفا‪ .‬جزء ‪ RGB‬هو نفسه الموجود في ألوان ‪ RGB.‬تحدد ‪( A‬قناة ألفا) عتامة اللون‪ .‬يمكن‬
‫تعيين قيمة قناة ألفا بين ‪( 0‬شفافة بالكامل) و‪( 1.0‬معتمة بالكامل)‪ .‬فيما يلي مثال لأللوان‪RGBA‬‬

‫;)‪RGBA (255, 0, 255, 1.0‬‬

‫‪58 | P a g e‬‬

‫يقوم هذا المثال بتعيين مكون اللون األحمر (األول) على ‪ ،255‬ومكون اللون األخضر (الثاني) على ‪ ،0‬ومكون اللون األزرق (الثالث) على‬
‫‪ ،255‬وقيمة ألفا (الرابعة) على ‪ 1.0‬مما يعني معت ًما تما ًما‪.‬‬

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

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

‫‪HSL COLORS‬‬

‫تعد ألوان ‪( HSL‬درجة اللون والتشبع والخفة) جديدة في ‪ CSS 3.0.‬إذا كنت مصم ًما‪ ،‬فقد تكون معتادًا على العمل بألوان ‪ HSL‬أكثر من‬
‫ألوان ‪ RGB.‬يمكنك تحديد ألوان ‪ HSL‬مثل هذا‪:‬‬

‫;))‪hsl(0%, 100%, 0%‬‬

‫يخبر رمز ‪ hsl‬المتصفح أنك تحدد لون ‪ HSL.‬المكونات الثالثة الموجودة داخل األقواس هي قيم‪ Lightness ،Saturation ، Hue‬بهذا‬
‫الترتيب‬

‫لن أشرح كيف يعمل مقياس األلوان ‪ HSL.‬يمكنك العثور على ذلك عبر اإلنترنت‪.‬‬
‫‪59 | P a g e‬‬

‫‪CSS TEXT STYLING‬‬

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

‫‪FONT-FAMILY‬‬

‫يتم استخدام خاصية ‪ Font-family CSS‬لتحديد عائلة الخطوط المستخدمة بواسطة عنصر ‪ HTML‬الذي يحتوي على نص‪ .‬هنا مثال‪:‬‬

‫{ ‪p‬‬
‫;‪font-family: Arial‬‬
‫}‬
‫تقوم قاعدة ‪ CSS‬هذه بتعيين خاصية عائلة الخطوط على ‪ Arial‬لجميع عناصر ‪ p.‬وهذا يعني أن النص المعروض داخل عناصر ‪ p‬يتم عرضه‬
‫باستخدام الخط‪Arial.‬‬

‫يمكن لخاصية ‪ CSS‬لمجموعة الخطوط أن تأخذ أكثر من قيمة واحدة‪:‬‬

‫{ ‪p‬‬
‫;‪font-family: Arial, Helvetica‬‬
‫}‬
‫في حالة أن المتصفح ال يعرف عائلة الخطوط األولى‪ ، Arial‬فسيقوم المتصفح باالطالع على عائلة الخطوط التالية في القائمة وهي‬
‫‪Helvetica‬لمعرفة ما إذا كان المتصفح يدعم ذلك‪ .‬يمكنك إضافة أي عدد تريده من عائالت الخطوط في القائمة‪ ،‬مفصولة بفواصل‪.‬‬

‫‪SERIF, SANS-SERIF AND MONOSPACE FONTS‬‬

‫يمكن تقسيم الخطوط إلى ثالث فئات رئيسية‪:‬‬

‫‪Serif fonts‬‬ ‫‪‬‬

‫‪Sans-Serif fonts‬‬ ‫‪‬‬
‫‪Monospace fonts‬‬ ‫‪‬‬

‫خطوط ‪Serif‬هي جميع الخطوط التي تحتوي الحروف الرسومية (األحرف) على 'أقدام ‪'.‬على سبيل المثال‪Times New Roman ،‬هو‬
‫خط ‪ Serif.‬تُستخدم خطوط ‪ Serif‬عادّة ً للنص العادي عند طباعته في الكتب‪ .‬يتم تقديم القسم أدناه بخط‪Serif:‬‬

‫خطوط ‪ Sans-Serif‬هي جميع الخطوط التي ال تحتوي على حروف رسومية‪ .‬على سبيل المثال‪Arial ،‬هو خط ‪ Sans-Serif.‬غالبًا ما‬
‫تُستخدم خطوط ‪ Sans-serif‬للعناوين الرئيسية والنص العادي عند عرضها على الشاشة‪ .‬يتم تقديم القسم أدناه بخط ‪Sans-Serif‬‬

‫إذا نظرت إلى حرف ‪ T‬في بداية النصين‪ ،‬يمكنك رؤية 'القدم' وغياب القدم بوضوح‪.‬‬
‫‪60 | P a g e‬‬

‫خطوط ‪Monospace‬هي خطوط يكون فيها كل حرف رسومي (حرف ‪ /‬حرف) متساويًا في العرض ‪.‬وبالتالي فإن ‪ i‬أو ‪ l‬يشغل نفس المساحة‬
‫أفقيًا مثل ‪ m.‬تُستخدم خطوط ‪Monospace‬عادّة ً في التعليمات البرمجية‪ .‬يتم تقديم القسم أدناه بخط ‪Monospace‬‬

‫يمكنك استخدام القيم ‪ Serif‬و ‪Sans-Serif‬و ‪Monospace‬كقيمة لخاصية ‪ CSS‬لمجموعة الخطوط‪ .‬سيختار المتصفح بعد ذلك خ ً‬
‫طا‬
‫مطابقًا مثل )‪ Times (Serif‬أو ‪Arial‬أو )‪ Helvetica (Sans-Serif‬أو )‪ Courier (Monospace‬كعائلة خطوط ‪.‬وهنا‬
‫بعض األمثلة‪:‬‬

‫{ ‪p‬‬
‫;‪font-family: Arial, Sans-Serif‬‬
‫}‬

‫{ ‪div‬‬
‫;‪font-family: Times, Serif‬‬
‫}‬

‫{ ‪code‬‬
‫;‪font-family: Courier, Monospace‬‬
‫}‬

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

‫‪FONT-FAMILY VALUES‬‬

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

‫‪FONT-SIZE‬‬

‫تحدد الخاصية ‪ Font-size CSS‬حجم النص المعروض‪ .‬هنا مثال‪:‬‬

‫{ ‪p‬‬
‫;‪font-size: 20px‬‬
‫}‬
‫‪61 | P a g e‬‬

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

‫وحدة أخرى مفيدة لحجم الخط هي ‪ em.‬وحدة ‪ em‬هي وحدة نسبية‪em 1 .‬يساوي حجم الخط القياسي‪ ،‬والذي كان وقت كتابة هذا المقال ‪16‬‬
‫بكسل ‪.‬يمكنك بعد ذلك تحديد أحجام الخطوط مثل ‪em 0.8‬أو ‪em 1.2‬أو ‪em 2‬أو جزء آخر ‪.‬يمكن أن يكون استخدام وحدة ‪ em‬فكرة جيدة‬
‫إذا كان سيتم عرض موقع الويب الخاص بك بشكل معقول عبر أحجام مختلفة للشاشات‪ .‬في هذه الحالة‪ ،‬يمكن للمتصفح اختيار حجم الخط القياسي‪،‬‬
‫وما عليك سوى تحديد أحجام خطوط موقع الويب الخاص بك نسبيًا لحجم الخط القياسي للجهاز المحدد‪ .‬هنا مثال‪:‬‬

‫{ ‪h2‬‬
‫;‪font-size : 1.4em‬‬
‫}‬
‫{ ‪p‬‬
‫;‪font-size : 1em‬‬
‫}‬

‫يقوم هذا المثال بتعيين حجم خط عنصر ‪ HTML h2‬إلى ‪em 1.4‬وهو ‪ 1.4‬ضعف حجم الخط القياسي‪ .‬يقوم المثال أيضًا بتعيين حجم خط‬
‫العنصر ‪ p‬على ‪em 1‬وهو حجم الخط القياسي للمتصفح المحدد على الجهاز المحدد‪.‬‬

‫‪COLOR‬‬

‫تقوم الخاصية ‪ color CSS‬بتعيين لون النص المعروض داخل عنصر ‪ HTML.‬هنا مثال اللون‪:‬‬

‫{ ‪p‬‬
‫;‪color : #333333‬‬
‫}‬

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

‫تمت تغطية األلوان في ‪ CSS‬بمزيد من التفاصيل في النص الخاص بي حول ألوان‪CSS.‬‬

‫‪FONT-STYLE‬‬

‫يمكن لخاصية نمط الخط في ‪ CSS‬ضبط نمط الخط على واحدة من أربع قيم مختلفة‪:‬‬

‫‪normal‬‬ ‫‪‬‬
‫‪italic‬‬ ‫‪‬‬
‫‪oblique‬‬ ‫‪‬‬
‫‪inherit‬‬ ‫‪‬‬

‫فيما يلي ثالثة أمثلة‪:‬‬

‫{ ‪p‬‬
‫;‪font-style: normal‬‬
‫‪62 | P a g e‬‬

‫}‬
‫{ ‪p#emphasized‬‬
‫;‪font-style: italic‬‬
‫}‬
‫{ ‪p#ob‬‬
‫;‪font-style: oblique‬‬
‫}‬

‫تقوم أول قواعد ‪ CSS‬الثالث هذه بتعيين نمط الخط لجميع عناصر ‪ p‬إلى الوضع الطبيعي‪ .‬تقوم قاعدة ‪ CSS‬الثانية بتعيين نمط الخط للعنصر‬
‫‪p‬مع التركيز على المعرف بخط مائل‪ .‬تقوم قاعدة ‪ CSS‬الثالثة بتعيين نمط الخط للعنصر ‪ p‬مع وضع المعرف ‪ ob‬بشكل مائل‪.‬‬

‫فيما يلي ثالثة أمثلة حية توضح كيف تبدو أنماط الخطوط الثالثة المختلفة‪:‬‬

‫هذا النص ذو نمط خط عادي‪ ،‬ولكن به قسم مائل وقسم مائل‪.‬‬

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

‫تعني قيمة نمط الخط األخيرة الموروثة أن عنصر ‪ HTML‬يرث خاصية نمط الخط الخاصة به من عنصر ‪ HTML‬األصلي الخاص به‪.‬‬

‫‪FONT-WEIGHT‬‬

‫تقوم الخاصية ‪ Font-weight CSS‬بتعيين سمك النص المعروض داخل عنصر ‪ HTML.‬يمكن أن تأخذ الخاصية ‪Font-weight‬‬
‫‪CSS‬القيم التالية‪:‬‬
‫‪63 | P a g e‬‬

‫في أغلب األحيان يتم استخدام القيمة ‪ bold‬فقط‪ .‬القيمة العادية هي القيمة االفتراضية‪ ،‬لذلك إذا لم يتم تحديد قيمة لوزن الخط‪ ،‬فسيتم استخدام هذه‬
‫القيمة‪.‬‬
‫فيما يلي مثال لوزن الخط‪ :‬بالخط العريض‪:‬‬

‫{ ‪span#fat‬‬
‫;‪font-weight: bold‬‬
‫}‬

‫تقوم قاعدة ‪ CSS‬هذه بتعيين خاصية ‪ CSS‬لوزن الخط إلى غامق لعنصر االمتداد ذو المعرف الدهني‪ .‬إليك كيفية ظهور النص الغامق في‬
‫المتصفح‪:‬‬

‫‪TEXT-TRANSFORM‬‬

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

‫‪lowercase‬‬ ‫‪‬‬
‫‪uppercase‬‬ ‫‪‬‬
‫‪capitalize‬‬ ‫‪‬‬

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

‫{ ‪span#lc‬‬
‫;‪text-transform: lowercase‬‬
‫}‬
‫{ ‪span#uc‬‬
‫;‪text-transform: uppercase‬‬
‫}‬
‫{ ‪span#cap‬‬
‫;‪text-transform: capitalize‬‬
‫}‬

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

‫جملة حالة مختلطة‪,‬‬

‫جملة حالة مختلطة‪,‬‬
‫جملة حالة مختلطة‪,‬‬

‫تحتوي جميع عناصر االمتداد على نفس النص‪ ،‬لكن الحظ كيف يتم عرضها بشكل مختلف (يحتوي كل سطر على عنصر امتداد واحد)‪.‬‬
‫‪64 | P a g e‬‬

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

‫‪FONT-VARIANT‬‬

‫تأخذ خاصية ‪ Font-variant CSS‬إحدى القيمتين‪:‬‬

‫‪normal‬‬ ‫‪‬‬
‫‪small-caps‬‬ ‫‪‬‬

‫الً من ذلك‪ .‬فيما يلي مثال ‪: font-variant‬‬

‫تؤدي ‪ small-caps‬إلى عرض كافة األحرف الصغيرة كأحرف صغيرة كبيرة بد ّ‬

‫{ ‪p#special‬‬
‫;‪font-variant: small-caps‬‬
‫}‬

‫تقوم قاعدة ‪ CSS‬هذه بتعيين خاصية ‪ CSS‬لمتغير الخط إلى أحرف صغيرة للعنصر ‪ p‬الذي له المعرف الخاص‪ .‬إليك كيفية ظهور النص‬
‫المعروض بأحرف صغيرة‪:‬‬

‫‪TEXT-DECORATION‬‬

‫يمكن استخدام خاصية زخرفة النص في ‪ CSS‬لتسطير النص أو تسطيره أو تشطيبه ‪.‬يمكن أن تأخذ الخاصية ‪text-decoration CSS‬‬
‫إحدى القيم التالية‪:‬‬

‫‪none‬‬ ‫‪‬‬
‫‪underline‬‬ ‫‪‬‬
‫‪overline‬‬ ‫‪‬‬
‫‪line-through‬‬ ‫‪‬‬
‫‪blink‬‬ ‫‪‬‬

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

‫{ ‪span#none‬‬
‫;‪text-decoration: none‬‬
‫}‬
‫{ ‪span#under‬‬
‫;‪text-decoration: underline‬‬
‫}‬
‫‪65 | P a g e‬‬

‫{ ‪span#over‬‬
‫;‪text-decoration: overline‬‬
‫}‬
‫{ ‪span#through‬‬
‫;‪text-decoration: overline‬‬
‫}‬
‫{ ‪span#blnk‬‬
‫;‪text-decoration: blink‬‬
‫}‬

‫فيما يلي خمسة أقسام من النص توضح تأثير إعدادات زخرفة النص ‪ text-decoration‬أعاله‪:‬‬

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

‫‪LETTER-SPACING‬‬

‫يتم استخدام خاصية ‪ letter-spacing‬في ‪ CSS‬لزيادة أو تقليل التباعد بين الحروف عند عرض النص‪ .‬ستؤدي القيمة الموجبة إلى زيادة‬
‫تباعد األحرف بمقدار مقارنة بتباعد األحرف العادي‪ .‬ستؤدي القيمة السالبة إلى تقليل تباعد األحرف بمقدار مقارنة بتباعد األحرف العادي‪ .‬فيما يلي‬
‫مثاالن‪:‬‬

‫{ ‪span#more‬‬
‫;‪letter-spacing : 2px‬‬
‫}‬
‫{ ‪span#less‬‬
‫;‪letter-spacing : -2px‬‬
‫}‬

‫فيما يلي ثالث جمل توضح لك الفرق بين النص العادي والقيمة الموجبة والقيمة السالبة‪:‬‬

‫‪LINE-HEIGHT‬‬

‫تقوم الخاصية ‪ line-height CSS‬بتعيين ارتفاع أسطر النص عند عرضها‪ .‬هنا مثال‪:‬‬

‫{ ‪p‬‬
‫;‪line-height: 2.0em‬‬
‫}‬
‫‪66 | P a g e‬‬

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

‫‪TEXT-ALIGN‬‬

‫يمكن لخاصية محاذاة النص في ‪ CSS‬محاذاة النص داخل عنصر ‪ HTML‬إلى اليسار أو اليمين أو المركز‪ .‬يمكن لخاصية محاذاة النص في‬
‫‪CSS‬أن تأخذ القيم التالية‪:‬‬

‫‪‬‬ ‫‪left‬‬
‫‪‬‬ ‫‪right‬‬
‫‪‬‬ ‫‪center‬‬
‫‪‬‬ ‫‪justify‬‬

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

‫فيما يلي مثال لمحاذاة النص‪:‬‬

‫{ ‪p#alignleft‬‬
‫;‪text-align: left‬‬
‫}‬
‫{ ‪p#alignright‬‬
‫;‪text-align: right‬‬
‫}‬
‫{ ‪p#aligncenter‬‬
‫;‪text-align: center‬‬
‫}‬

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

‫‪TEXT-INDENT‬‬

‫يمكن استخدام خاصية ‪ text-indent‬في ‪ CSS‬لوضع مسافة بادئة للسطر األول من الفقرة‪ ،‬تما ًما كما تفعل الفقرات في العديد من الكتب‬
‫المطبوعة‪ .‬يمكن لخاصية ‪CSS‬ذات المسافة البادئة للنص أن تأخذ رق ًما كقيمة‪ .‬على سبيل المثال‪px 32 ،‬أو ‪em. 2‬يمكنك أيضًا استخدام قيمة‬
‫‪67 | P a g e‬‬

‫‪ ،%‬وفي هذه الحالة يتم تفسير ‪ %‬على أنها نسبة مئوية من عرض الفقرة‪.‬‬

‫فيما يلي مثال للمسافة البادئة للنص‪:‬‬

‫{ ‪p#indent‬‬
‫;‪text-indent: 2em‬‬
‫}‬

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

‫‪TEXT-SHADOW‬‬

‫تتيح لك خاصية ‪ text-shadow CSS‬إضافة ظل إلى النص‪ .‬تأخذ خاصية ‪ text-shadow‬أربع معلمات‪ :‬إزاحة الظل ‪ x‬و ‪y‬من النص‪،‬‬
‫ونصف قطر التمويه الذي يوضح مدى حدة أو نعومة الظل‪ ،‬ولون ظل النص‪ .‬هنا مثال‪:‬‬

‫{ ‪p.withShadow‬‬
‫;‪text-shadow : 5px 10px 0px #999999‬‬
‫}‬

‫يقوم هذا المثال بتعيين ظل النص على جميع عناصر ‪ p‬التي تحتوي على فئة ‪ CSS‬مع الظل‪ .‬يقع الظل على بعد ‪ 5‬بكسل إلى اليمين و‪ 10‬بكسل‬
‫أسفل النص‪ .‬يبلغ نصف قطر التمويه ‪ 0‬بكسل مما يعني أن الظل حاد قدر اإلمكان‪ .‬لون الظل هو ‪#999999‬وهو لون رمادي‪ .‬إليك كيفية‬
‫ظهور ظل النص عند تطبيقه على النص‪:‬‬

‫إليك كيف يبدو النص نفسه مع ظل بنصف قطر تمويه يبلغ ‪ 5‬بكسل‪:‬‬
‫‪68 | P a g e‬‬

‫‪MULTIPLE TEXT SHADOWS‬‬

‫يمكن أن يكون لديك ظالل نصية متعددة‪ .‬ما عليك سوى فصل مجموعات المعلمات بفاصلة‪ .‬هنا مثال‪:‬‬

‫{ ‪p.withShadows‬‬
‫;‪text-shadow : 5px 10px 2px #ff0000, -3px 6px 5px #0000ff‬‬
‫}‬

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

‫‪REALISTIC SHADOW‬‬

‫لجعل ظل النص يبدو واقعيًا‪ ،‬تذكر خصائص الظل القليلة التالية‪:‬‬

‫عادّة ً ال يكون الظل القريب من النص غير واضح مثل الظل البعيد عن النص ‪.‬عادّة ً ما يشير الظل البعيد عن النص إلى مصدر ضوء بعيد أيضًا عن‬
‫النص‪.‬‬

‫عادّة ً ما يشير الظل القريب من النص إلى أن السطح السفلي قريب (أو أن الضوء قريب‪ ،‬أو كليهما)‪ .‬غالبًا ما يكون الظل القريب أغمق من الظل‬
‫البعيد‪ ،‬ألن الضوء األقل يمكن أن يدخل بين الشكل والسطح األساسي‪.‬‬

‫الً‪ ،‬واجعل الظالل البعيدة أكثر ضبابية وأكثر سطوعًا‪.‬‬

‫لذلك‪ ،‬اجعل الظالل القريبة أقل ضبابية وأكثر قتامة قلي ّ‬
‫‪69 | P a g e‬‬

‫‪CSS LIST STYLING‬‬

‫يحتوي ‪ CSS‬على مجموعة من الخصائص التي تستهدف بشكل خاص تصميم قوائم ‪ HTML.‬بواسطة قوائم ‪ HTML‬أعني عناصر ‪ ul‬و ‪ol.‬‬
‫سأغطي في هذا النص ماهية خصائص ‪ CSS‬لتصميم القائمة هذه‪ ،‬وما يمكنك فعله بها‪.‬‬

‫‪LIST-STYLE-TYPE‬‬

‫تتحكم الخاصية ‪ list-style-type‬في ‪ CSS‬في التعداد النقطي الذي يستخدمه عنصر ‪ ،ul‬والترقيم الذي يستخدمه عنصر ‪ ol.‬تتناول األقسام‬
‫الً من عنصر ‪ul‬و‪ol.‬‬
‫التالية ك ّ‬

‫‪LIST-STYLE-TYPE : UL‬‬

‫بالنسبة لعنصر‪ ، ul‬يمكنك استخدام قيم الخصائص التالية‪:‬‬

‫القرص‬
‫دائرة‬
‫مربع‬

‫إليك كيفية تعيين نوع نمط القائمة لعنصر القائمة‪:‬‬

‫{ ‪ul‬‬
‫;‪list-style-type: disc‬‬
‫}‬
‫يقوم هذا المثال بتعيين خاصية ‪ CSS‬من نوع ‪ list-style-type‬على القرص لجميع عناصر‪ul.‬‬

‫إليك كيفية ظهور القيم المحتملة (القرص والدائرة والمربع) عند تطبيقها على عنصر‪ul:‬‬

‫الً من تطبيقها على عنصر ‪ ul‬بأكمله‪ .‬إليك كيف‬

‫من الممكن بالفعل تطبيق خاصية ‪ CSS‬من نوع ‪ list-style-type‬على كل عنصر‪ ، li‬بد ّ‬
‫يبدو ذلك في الكود‪:‬‬

‫>‪<ul‬‬
‫>‪<li style="list-style-type: disc;"><code>disc</code></li‬‬
‫>‪<li style="list-style-type: circle;"><code>circle</code></li‬‬
‫>‪<li style="list-style-type: square;"><code>square</code></li‬‬
‫>‪</ul‬‬
‫ستبدو النتيجة كالمثال أعاله الذي يوضح أنواع التعداد النقطي الثالثة المختلفة (القرص والدائرة والمربع)‪.‬‬

‫‪LIST-STYLE-TYPE : OL‬‬
‫‪70 | P a g e‬‬

‫يمكن أيضًا استخدام خاصية ‪ list-style-type‬في ‪ CSS‬لتصميم عناصر ‪ .ol‬بدالً من التعداد النقطي‪ ،‬يمكنك تعيين نوع نظام الترقيم الذي‬
‫سيستخدمه عنصر ‪ .ol‬القيم الصالحة لخاصية نوع نمط القائمة لعناصر ‪ ol‬هي‪:‬‬

‫‪‬‬ ‫‪decimal‬‬
‫‪‬‬ ‫‪decimal-leading-zero‬‬
‫‪‬‬ ‫‪upper-alpha‬‬
‫‪‬‬ ‫‪lower-alpha‬‬
‫‪‬‬ ‫‪upper-roman‬‬
‫‪‬‬ ‫‪lower-roman‬‬
‫‪‬‬ ‫‪lower-greek‬‬

‫فيما يلي قاعدة ‪ CSS‬تحدد نوع نمط القائمة على ألفا العلوي‪:‬‬

‫{ ‪ol‬‬
‫;‪list-style-type : upper-alpha‬‬
‫}‬
‫توضح هذه القوائم التالية كيف يبدو نظام األرقام مع القيم الستة المختلفة المحتملة‪.‬‬
‫‪71 | P a g e‬‬

‫‪LIST-STYLE-POSITION‬‬

‫يتم استخدام خاصية ‪ list-style-position CSS‬لتعيين موضع التعداد النقطي أو األرقام‪ .‬الخاصية ‪ list-style-position‬في ‪CSS‬‬
‫يمكن أن تأخذ إحدى القيمتين‪:‬‬

‫‪inside‬‬ ‫‪‬‬
‫‪outside‬‬ ‫‪‬‬
‫‪‬‬ ‫{ ‪ul‬‬
‫‪‬‬ ‫;‪list-style-position: outside‬‬
‫‪‬‬ ‫}‬
‫فيما يلي قائمتان غير مرتبة ‪ -‬واحدة مع ضبط موضع نمط القائمة على الداخل واألخرى على الخارج‪..‬‬
‫‪72 | P a g e‬‬

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

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

‫‪PADDING‬‬

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

‫>‪<ul‬‬
‫>‪<li style="padding-left: 20px">With padding</li‬‬
‫>‪<li>Without padding</li‬‬
‫>‪</ul‬‬
‫يحتوي على موضع نمط القائمة مضبو ً‬
‫طا على الخارج (أو ‪ol‬أو ‪ ul‬يضبط هذا المثال المساحة المتروكة لليسار على ‪ 20‬بكسل‪ .‬إذا كان عنصر‬
‫‪ ul‬سيزيد المسافة بين التعداد النقطي‪/‬الرقم والنص‪ .‬إليك كيف يبدو ذلك على عنصر ‪ li‬لعنصر ‪ padding-left‬محذوفًا)‪ ،‬فإن تعيين خاصية‬
‫المباشر‬

‫المعينة في الداخل‪ ،‬فسيتم تطبيق الحشو قبل الرمز ‪ list-style-position CSS‬يحتوي على خاصية ‪ ol‬أو ‪ ul‬ومع ذلك‪ ،‬إذا كان عنصر‬
‫على يسار الرمز ‪ li‬يتم بعد ذلك عرض الحشوة المضبوطة على عنصر ‪ li.‬النقطي‪/‬الرقم‪ ،‬ألن الرمز النقطي‪/‬الرقم يعتبر معروضًا داخل عنصر‬
‫‪:‬المباشر ‪ ul‬النقطي‪ .‬إليك كيف يبدو ذلك على عنصر‬

‫{ ‪ul>li‬‬
‫‪padding-left‬‬ ‫;‪: 25px‬‬
‫‪background-image‬‬ ‫;)'‪: url('/images/arrow-right.png‬‬
‫;‪background-position : 5px 5px‬‬
‫‪background-repeat‬‬ ‫;‪: no-repeat‬‬
‫}‬
‫‪73 | P a g e‬‬

‫إليك كيف ستبدو القائمة مع تطبيق‪CSS:‬‬

‫يمكنك قراءة المزيد حول إعداد صور الخلفية لعناصر ‪ HTML‬في البرنامج التعليمي الخاص بي حول إعداد صور الخلفية في‬

‫يمكنك قراءة المزيد حول إعداد صور الخلفية لعناصر ‪ HTML‬في البرنامج التعليمي الخاص بي حول إعداد صور الخلفية‬

‫‪DISPLAY‬‬

‫يمكنك استخدام خاصية العرض ‪ CSS‬لتغيير كيفية عرض القوائم‪ .‬من خالل ضبط عرض عناصر ‪ li‬على السطر‪ ،‬سيتم عرض عناصر القائمة‬
‫الً من قائمة رأسية‪ .‬فيما يلي عرض القائمة‪ :‬مثال مضمن‪:‬‬
‫كقائمة أفقية بد ّ‬

‫{ ‪ul>li‬‬
‫;‪display: inline‬‬
‫}‬
‫إليك كيف تبدو القائمة عند تقديمها‪:‬‬

‫الحظ كيف يتم اآلن عرض عناصر القائمة 'واحد' و'اثنان' و'ثالثة' على نفس الخط األفقي‪ ،‬بد ّ‬
‫الً من عرض كل عنصر على السطر الخاص به‪.‬‬
‫الحظ أيضًا أنه ال يتم عرض الرموز النقطية‪ .‬هذا هو السلوك االفتراضي عندما يعرض المتصفح قائمة باستخدام العرض‪ :‬مضمن على عناصر‪li.‬‬

‫الً من القيمة المضمنة‪ .‬بعد ذلك يمكنك ضبط عرض وارتفاع العناصر ‪ li (display: inline‬يؤدي‬
‫يمكنك أيضًا استخدام قيمة الكتلة المضمنة بد ّ‬
‫عادّة ً إلى تعطيل التحكم في عرض العناصر وارتفاعها)‪ .‬هنا مثال‪:‬‬

‫{ ‪ul>li‬‬
‫;‪display: inline-block‬‬
‫}‬
‫إليك كيفية ظهور القائمة عند عرضها مع العرض‪ :‬يتم تطبيق الكتلة المضمنة على عناصر ‪ li‬الخاصة بها‪:‬‬

‫يبدو مشاب ًها تما ًما للعرض‪ :‬مضمن‪ ،‬كما هو متوقع‪ ،‬ولكنه يمنحك التحكم في عرض وارتفاع عناصر ‪ li‬باستخدام خصائص العرض واالرتفاع في‬
‫‪CSS.‬فيما يلي مثال يضبط عرض كل عنصر ‪ li‬على ‪ 100‬بكسل‪:‬‬
‫‪74 | P a g e‬‬

‫‪CSS TABLE STYLING‬‬

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

‫‪WIDTH AND HEIGHT‬‬

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

‫يمكنك أيضًا ضبط عرض وارتفاع خاليا الجدول الفردية عناصر ‪ td‬و‪th‬‬

‫‪MARGINS‬‬

‫يمكنك تعيين الهوامش على جدول ‪ HTML‬تما ًما كما هو الحال مع عنصر ‪ div‬أو ‪ p‬أو أي عنصر آخر‪ .‬تمت تغطية الهوامش في البرنامج‬
‫التعليمي الخاص بي حول هوامش‪CSS.‬‬

‫‪BORDERS‬‬

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

‫يمكنك تعيين حدود لعنصر الجدول بأكمله‪ ،‬أو يمكنك تعيين حدود لخاليا الجدول( العنصران ‪ th‬و ‪td).‬يمكنك أيضًا تعيين الحدود العلوية واليمنى‬
‫والسفلية واليسرى للجدول بأكمله ولخاليا الجدول الفردية‪.‬‬

‫‪PADDING ON TABLE CEL LS‬‬

‫ال يمكنك تعيين المساحة المتروكة مباشرة على جدول‪ ، HTML‬ولكن يمكنك تعيين المساحة المتروكة على خاليا الجدول‪ .‬هذا يعني أنه يمكنك‬
‫ضبط الحشو على العنصرين ‪ th‬و‪td.‬‬

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

‫تم تناول إعداد الحشو عبر ‪ CSS‬في النص الخاص حول الحشو في‪CSS.‬‬

‫‪TEXT-ALIGN‬‬

‫تتيح لك خاصية محاذاة النص في ‪ CSS‬إمكانية ضبط كيفية محاذاة النص الموجود داخل خاليا الجدول‪ .‬يمكن تطبيق خاصية محاذاة النص على‬
‫الجدول ككل (عنصر الجدول)‪ ،‬أو على خاليا الجدول الفردية (عناصر ‪ td‬و‪th).‬‬

‫يمكن أن تأخذ خاصية محاذاة النص القيم التالية‪:‬‬

‫‪‬‬ ‫‪start‬‬
‫‪‬‬ ‫‪end‬‬
‫‪‬‬ ‫‪left‬‬
‫‪‬‬ ‫‪right‬‬
‫‪‬‬ ‫‪center‬‬
‫‪‬‬ ‫‪justify‬‬
‫‪75 | P a g e‬‬

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

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

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

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

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

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

‫فيما يلي جدول يوضح لك كيفية تأثير كل هذه القيم على محاذاة النص داخل خاليا الجدول‪:‬‬

‫‪VERTICAL-ALIGN‬‬

‫تتيح لك خاصية المحاذاة العمودية في ‪ CSS‬إمكانية تحديد كيفية محاذاة النص عموديًا داخل خاليا الجدول‪ .‬يمكنك إما تعيين خاصية المحاذاة‬
‫الرأسية لـ ‪ CSS‬للجدول بأكمله‪ ،‬أو لخاليا الجدول بشكل فردي‪.‬‬

‫يمكن لخاصية ‪ CSS‬ذات المحاذاة العمودية قبول القيم التالية‪:‬‬

‫‪‬‬ ‫‪top‬‬
‫‪‬‬ ‫‪middle‬‬
‫‪‬‬ ‫‪bottom‬‬

‫في الواقع‪ ،‬يمكن لخاصية ‪ CSS‬ذات المحاذاة العمودية أن تأخذ قي ًما أكثر من هذه‪ ،‬ولكن هذه هي األكثر استخدا ًما مع الجداول‪ .‬يمكن أيضًا استخدام‬
‫خاصية المحاذاة الرأسية في ‪ CSS‬مع عناصر ‪ HTML‬أخرى غير الجداول‪.‬‬
‫‪76 | P a g e‬‬

‫فيما يلي جدول ‪ HTML‬يوضح تأثير قيم المحاذاة الرأسية‪:‬‬

‫‪BACKGROUND-IMAGE‬‬

‫يمكن استخدام خاصية صورة الخلفية في ‪ CSS‬لتعيين صورة خلفية للجدول‬

‫‪BORDER-SPACING‬‬

‫عندما تقوم بتعيين حدود على خاليا الجدول‪ ،‬عادّة ً ما تحتوي خاليا الجدول على مسافة صغيرة بينها‪ .‬هذا هو ما يمكنك التحكم فيه باستخدام سمة‬
‫تباعد الخاليا لعنصر الجدول‪ .‬يمكنك أيضًا التحكم في هذه المساحة باستخدام خاصية ‪border-spacing‬في‪CSS.‬‬

‫فيما يلي مثاالن على تباعد الحدود‪:‬‬

‫{ ‪table.noSpace‬‬
‫;‪border-spacing : 0px‬‬
‫;‪border : 1px solid #cccccc‬‬
‫}‬
‫{ ‪table.noSpace td‬‬
‫;‪border : 1px solid #cccccc‬‬
‫}‬

‫{ ‪table.withSpace‬‬
‫;‪border-spacing : 10px‬‬
‫;‪border : 1px solid #cccccc‬‬
‫}‬
‫{ ‪table.withSpace td‬‬
‫;‪border : 1px solid #cccccc‬‬
‫}‬
‫إليك كيف سيبدو الجدوالن إذا تم تقديمهما مع تباعد الحدود أعاله باإلضافة إلى حد على الجدول وخاليا الجدول‪:‬‬
‫‪77 | P a g e‬‬

‫الحظ التباعد المختلف بين خاليا الجدول‪.‬‬

‫‪BORDER-COLLAPSE‬‬

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

‫يمكن أن تأخذ خاصية ‪ border-collapse CSS‬القيم التالية‪:‬‬

‫‪‬‬ ‫‪separate‬‬
‫‪‬‬ ‫‪collapse‬‬

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

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

‫{ ‪table.withSpace‬‬
‫‪border-spacing‬‬ ‫;‪: 10px‬‬
‫‪border‬‬ ‫;‪: 1px solid #cccccc‬‬
‫‪border-collapse : separate‬‬
‫}‬
‫{ ‪table.withSpace td‬‬
‫‪border‬‬ ‫;‪: 1px solid #cccccc‬‬
‫}‬

‫{ ‪table.withSpace‬‬
‫‪border-spacing‬‬ ‫;‪: 10px‬‬
‫‪border‬‬ ‫;‪: 1px solid #cccccc‬‬
‫‪border-collapse : separate‬‬
‫‪78 | P a g e‬‬

‫}‬
‫{ ‪table.withSpace td‬‬
‫‪border‬‬ ‫;‪: 1px solid #cccccc‬‬
‫}‬
‫إليك ما يبدو عليه الجدوالن عند عرضهما باستخدام أنماط ‪ CSS‬المطبقة أعاله‪:‬‬

‫‪CSS LINK STYLING‬‬

‫يمكنك تصميم روابط ‪( HTML‬عناصر) باستخدام خصائص ‪ CSS‬ومحددات ‪ CSS.‬يمكن أن تكون روابط ‪ HTML‬إما روابط نصية أو روابط‬
‫صور أو روابط كتلة( كتلة ‪ HTML).‬فيما يلي ثالثة أمثلة لرابط ‪HTML‬‬

‫>‪<a href="/next-page.html">Text link</a‬‬

‫>‪<a href="/next-page.html"><img src="next.png"></a‬‬

‫>"‪<a href="/next-page.html‬‬
‫>‪<div‬‬
‫>"‪<img src="next.png‬‬
‫‪Next page‬‬
‫>‪</div‬‬
‫>‪</a‬‬

‫العنصر األول هو رابط نصي ألن نص العنصر يحتوي فقط على نص‪.‬‬

‫العنصر الثاني هو رابط صورة ألن نص العنصر يحتوي فقط على عنصر‪img.‬‬

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

‫‪STYLING TEXT LINKS‬‬

‫‪79 | P a g e‬‬

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

‫>‪<style‬‬
‫{ ‪a‬‬
‫;‪font-family: Helvetica‬‬
‫‪font-size:‬‬ ‫;‪1em‬‬
‫;‪font-weight: bold‬‬
‫‪color‬‬ ‫;‪: #000099‬‬
‫;‪text-decoration: none‬‬
‫}‬
‫>‪</style‬‬

‫تقوم قاعدة ‪ CSS‬هذه بتعيين عائلة الخطوط إلى‪ ، Helvetica‬وحجم الخط إلى ‪ ،em1‬وتعيين وزن الخط إلى غامق‪ ،‬واللون إلى‬
‫‪( 000099#‬أزرق داكن)‪ ،‬وإزالة التسطير االفتراضي‪ ،‬لجميع العناصر‪.‬‬

‫إليك كيفية ظهور الرابط النصي مع تطبيق هذه األنماط‪:‬‬

‫‪STYLING IMAGE LINKS‬‬

‫عندما يحتوي الرابط على صورة‪ ،‬يمكنك تصميم إما العنصر ‪ a‬أو العنصر ‪ img.‬يمكن تصميم الصور باستخدام أي من خصائص ‪CSS‬‬
‫القياسية لتصميم الصور‪.‬‬

‫‪STYLING BLOCK LINKS‬‬

‫عندما تقوم بتصميم روابط كتلية‪ ،‬فإنك عادّة ً ما تقوم بتصميم ‪ HTML‬داخل العنصر‪ ، a‬وليس العنصر ‪ a‬نفسه‪.‬‬

‫‪A:LINK , A:VISITED , A:HOVER , A:ACTIVE‬‬

‫‪a:link‬‬ ‫} ;‪{ color: #00ff00‬‬

‫} ;‪a:visited { color: #009900‬‬
‫‪a:hover‬‬ ‫} ;‪{ color: #66ff66‬‬
‫‪a:active‬‬ ‫} ;‪{ color: #ffff00‬‬

‫‪STYLING LINKS AS BUTTONS‬‬

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

‫{ ‪a.greenButton‬‬
‫;‪border: 2px solid #006600‬‬
‫;‪background-color: #009900‬‬
80 | P a g e

color: #ffffff;
text-decoration: none;
margin : 20px;
padding: 10px 20px 10px 20px;
display: inline-block;
}
a.greenButton:hover {
border: 2px solid #009900;
background-color: #00cc00;
}

.‫الحظ كيف يتغير لون الزر عند تحريك الماوس فوقه‬

:‫ فيما يلي مثال على الكود‬CSS. ‫ في‬border-radius ‫يمكنك أيضًا جعل الزوايا مستديرة باستخدام خاصية‬

a.greenButtonRound {
border: 2px solid #006600;
border-radius: 5px;
background-color: #009900;
color: #ffffff;
font-weight: bold;
text-decoration: none;
margin : 20px;
padding: 10px 20px 10px 20px;
display: inline-block;
}
a.greenButtonRound:hover {
border: 2px solid #009900;
background-color: #00cc00;
}
:)‫وإليك ما يبدو عليه الزر مع الزوايا الدائرية (والنص الغامق‬
81 | P a g e
‫‪82 | P a g e‬‬

‫‪CSS FORM STYLING‬‬

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

‫تمت تغطية نماذج ‪ HTML‬في البرنامجين التعليميين اآلخرين حول حقول نماذج ‪ HTML 4‬وحقول نماذج‪HTML 5.‬‬

‫‪STYLING INPUT ELEMENTS‬‬

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

‫{ ]'‪input[type='text‬‬
‫;‪border : 1px solid #cccccc‬‬
‫}‬
‫{ ]'‪input[type='submit‬‬
‫;‪border : 1px solid #00ff00‬‬
‫}‬

‫يعين هذا المثال حدًا رماديًا حول حقول إدخال النص‪ ،‬وحدًا أخضر حول أزرار اإلرسال‪.‬‬

‫ستشرح األقسام التالية بمزيد من التفصيل كيفية تصميم حقول النماذج المختلفة‪.‬‬

‫‪TEXT FIELDS‬‬

‫الحقول النصية هي عناصر إدخال مع تعيين سمة النوع على النص‪ .‬إليك كيف يبدو ‪HTML‬‬

‫>"‪<input type="text‬‬
‫وإليك كيفية ظهور حقل النص عند عرضه في المتصفح (ال تعرض جميع المتصفحات الحقول النصية بنفس الطريقة)‪:‬‬

‫‪TEXT FIELD CSS SELEC TOR‬‬

‫لتحديد نمط جميع الحقول النصية (> "‪ )<input type="text‬تحتاج إلى استخدام مجموعة من محددات ‪ CSS‬للعناصر والسمات‪ .‬هنا‬
‫مثال‪:‬‬

‫{ ]'‪input[type='text‬‬
‫‪/* set CSS properties here*/‬‬
‫}‬

‫‪TEXT FIELD BORDERS‬‬

‫من الممكن ضبط نمط الحدود لحقل النص‪ .‬يعين هذا المثال حدًا رماديًا حول جميع حقول النص‪:‬‬
83 | P a g e

input[type='text'] {
border : 3px solid #cccccc;
}
:‫إليك كيف يبدو ذلك عند تطبيقه على حقل نصي‬

TEXT FIELD BACKGROUND COLOR

:‫الً من لون الحدود والخلفية لحقل النص‬

ّ ‫ فيما يلي مثال يعين ك‬.‫يمكنك أيضًا تعيين لون الخلفية لحقل النص‬

input[type='text'] {
border : 1px solid #cccccc;
background-color : #e0e0e0;
}

TEXT FIELD WIDTH AND HEIGHT

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

input[type='text'] {
width: 50px;
height: 10px;
}
input[type='text'] {
width: 100px;
height: 15px;
}
input[type='text'] {
width: 150px;
height: 20px;
}

TEXT FIELD FONT

‫‪84 | P a g e‬‬

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

‫{ ]'‪input[type='text‬‬
‫;‪font-family: Times‬‬
‫‪font-size‬‬ ‫;‪: 24px‬‬
‫}‬

‫‪TEXT AREAS‬‬

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

‫{ ‪textarea‬‬
‫;‪border: 1px solid #cccccc‬‬
‫;‪background-color: #eeeeee‬‬
‫‪width‬‬ ‫;‪: 400px‬‬
‫‪height‬‬ ‫;‪: 200px‬‬
‫}‬

‫‪RESIZE : NONE‬‬

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

‫{ ‪textarea‬‬
‫;‪border: 1px solid #cccccc‬‬
‫;‪background-color: #eeeeee‬‬
‫‪width‬‬ ‫;‪: 400px‬‬
‫‪height‬‬ ‫;‪: 100px‬‬
85 | P a g e

resize : none;
}

BUTTONS

‫ فيما يلي‬.‫ األزرار هي عناصر إدخال مع ضبط النوع على الزر أو اإلرسال أو عناصر الزر‬.‫يمكنك تصميم األزرار المستخدمة في النماذج أيضًا‬
:‫ لألزرار‬HTML ‫بعض األمثلة لكيفية ظهور‬

<input type="button" value="A Button">

<input type="submit" value="A Submit Button">
<button>A Button</button>
BUTTON CSS SELECTORS

:‫ الثالثة‬CSS ‫يمكنك تصميم عناصر األزرار الثالثة هذه باستخدام محددات‬

input[type='button'] { }
input[type='submit'] { }
button { }

BUTTON STYLES

:‫ هنا مثال‬.‫يمكنك تعيين الحدود وألوان الخلفية والخطوط وغير ذلك الكثير على األزرار‬

button {
font-family : Helvetica;
font-size : 24px;
color : #ffffff;
background-color : #009900;
border : 3px solid #006600;
padding : 10px;
}

BUTTON HOVER STYLES

‫‪86 | P a g e‬‬

‫يمكنك تعيين األنماط عندما يحوم الماوس فوق الزر أيضًا‪ .‬هنا مثال‪:‬‬

‫{ ‪#theButton‬‬
‫‪font-family‬‬ ‫;‪: Helvetica‬‬
‫‪font-size‬‬ ‫;‪: 24px‬‬
‫‪color‬‬ ‫;‪: #ffffff‬‬
‫;‪background-color : #009900‬‬
‫‪border‬‬ ‫;‪: 3px solid #006600‬‬
‫‪padding‬‬ ‫;‪: 5px‬‬
‫}‬
‫{ ‪#theButton:hover‬‬
‫;‪background-color : #00cc00‬‬
‫‪border‬‬ ‫;‪: 3px solid #009900‬‬
‫}‬

‫الحظ كيف يتغير لون الخلفية ولون الحدود عند تحريك الماوس فوق الزر‪.‬‬

‫‪LABELS‬‬

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

‫>‪<style‬‬
‫{ ‪label‬‬
‫;‪display: inline-block‬‬
‫‪width‬‬ ‫;‪: 200px‬‬
‫}‬
‫>‪</style‬‬
‫>‪<label>Name</label> <input type="text"> <br‬‬
‫>"‪<label>Address</label> <input type="text‬‬

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

‫‪FIELDSET AND LEGEND‬‬

‫‪87 | P a g e‬‬

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

‫>‪<fieldset‬‬
‫>‪<legend>Input Form</legend‬‬

‫>‪<label style="display: inline-block; width: 150px;">First name</label‬‬

‫>‪<input type="text"><br/‬‬
‫>‪<label style="display: inline-block; width: 150px;">Last name</label‬‬
‫>‪<input type="text"><br/‬‬

‫>‪</fieldset‬‬

‫يمكنك تعيين لون الحدود ولون الخلفية وما إلى ذلك لعنصر مجموعة الحقول‪ ،‬تما ًما كما لو كان ً ّ‬
‫حقال نصيًا‪ .‬يمكنك أيضًا تعيين خط عنصر وسيلة‬
‫عنصرا نصيًا‪.‬‬
‫ً‬ ‫اإليضاح كما لو كان‬
‫‪88 | P a g e‬‬

‫‪CSS IMAGE STYLING‬‬

‫يمكن استخدام ‪ CSS‬لتصميم الصور داخل صفحات ‪ HTML.‬أعني بالصور الصور المضمنة باستخدام عنصر ‪ HTML img.‬في هذا النص‬
‫سوف نغطي الخيارات المتاحة لك لتصميم الصور عبر عنصر ‪ img‬باستخدام‪CSS.‬‬

‫‪MARGIN‬‬

‫تتيح لك خاصية هامش ‪ CSS‬إمكانية ضبط المسافة بين الصورة وعناصر ‪ HTML‬المجاورة‪ .‬تمت تغطية هوامش ‪ CSS‬بمزيد من التفاصيل في‬
‫البرنامج التعليمي الخاص بي حول الهوامش في‪CSS.‬‬

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

‫‪BORDER‬‬

‫يمكنك تعيين الحدود على الصورة( عنصر )‪ img‬باستخدام خاصية ‪ border CSS.‬تمت تغطية حدود ‪ CSS‬بمزيد من التفاصيل في البرنامج‬
‫التعليمي الخاص بي حول حدود ‪CSS.‬‬

‫فيما يلي مثال لتعيين حد على الصورة‪:‬‬

‫{ ‪img.withBorder‬‬
‫;‪border: 1px solid #cccccc‬‬
‫}‬
‫تقوم قاعدة ‪ CSS‬هذه بتعيين حد رمادي يبلغ ‪ 1‬بكسل حول جميع عناصر ‪ img‬التي تحتوي على فئة ‪CSS withBorder ( img‬‬
‫‪class='withBorder').‬إليك كيفية ظهور الصورة مع تطبيق نمط الحدود أعاله‪:‬‬

‫‪PADDING‬‬

‫تقوم خاصية الحشو في ‪ CSS‬بتعيين المسافة بين الصورة وحدودها‪ .‬تمت تغطية الحشو بمزيد من التفاصيل في البرنامج التعليمي الخاص بي حول‬
‫الحشو في‪CSS.‬‬

‫فيما يلي مثال يقوم بتعيين كل من المساحة المتروكة والحدود حول الصورة‪:‬‬
‫‪89 | P a g e‬‬

‫‪WIDTH AND HEIGHT‬‬

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

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

‫{ ‪img.scaledUp‬‬
‫;‪width: 300px‬‬
‫;‪height: 150px‬‬
‫}‬
‫{ ‪img.scaledDown‬‬
‫;‪width: 300px‬‬
‫;‪height: 150px‬‬
‫}‬
‫إليك ما ستبدو عليه الصور مع تطبيق األنماط المذكورة أعاله‪ .‬الصورة األولى توضح الحجم الطبيعي للصورة‪ .‬تم تكبير الصورتين التاليتين‬
‫وتصغيرهما‪.‬‬
‫‪90 | P a g e‬‬

‫‪KEEPING IMAGE ASPECT RATIO‬‬

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

‫{ ‪img.scaledUp‬‬
‫;‪width: 300px‬‬
‫}‬
‫{ ‪img.scaledDown‬‬
‫;‪height: 150px‬‬
‫}‬

‫‪WIDTH AND HEIGHT AS PERCENTAGES‬‬

‫يمكنك ضبط العرض واالرتفاع على النسب المئوية‪ .‬في هذه الحالة‪ ،‬ستحصل الصورة على عرض و‪/‬أو ارتفاع وهو عبارة عن نسبة مئوية من‬
‫عرض أو ارتفاع عنصر ‪ HTML‬األصلي الخاص بها‪ .‬هنا مثال‪:‬‬

‫{ ‪img.percentages‬‬
‫;‪width: 25%‬‬
‫}‬

‫تقوم قاعدة ‪ CSS‬هذه بتعيين عرض عنصر ‪ img‬مع فئة ‪ CSS withMaxWidth‬إلى ‪% 100‬من العنصر األصلي‪ .‬ومع ذلك‪ ،‬يحدد‬
‫المثال الصورة بحد أقصى لعرض ‪ 500‬بكسل ‪.‬بمجرد أن يصل عرض الصورة إلى ‪ 500‬بكسل‪ ،‬لن يقوم المتصفح بزيادة حجمها‪ ،‬بغض النظر‬
‫عن عرض العنصر األصلي‪.‬‬
‫‪91 | P a g e‬‬

‫‪MIN-WIDTH AND MIN-HEIGHT‬‬

‫تعمل خصائص ‪ min-width‬و ‪min-height‬في ‪ CSS‬مثل خصائص ‪ max-width‬و ‪max-height‬في‪ ، CSS‬باستثناء تعيين‬
‫الحد األدنى للعرض واالرتفاع للصورة (أو أي عنصر ‪HTML‬يتم تطبيقهما عليه(‪.‬‬

‫‪RESPONSIVE IMAGES‬‬

‫الصور سريعة االستجابة هي الصور التي تشكل جز ًءا من تصميم الويب سريع االستجابة ‪ responsive web design‬والتي تتصرف وفقًا‬
‫لذلك‪ .‬تصميم الويب سريع االستجابة هو تصميم ويب قادر على االستجابة بشكل معقول للجهاز الذي يتم عرضه عليه‪ ،‬سواء كان هذا الجهاز هاتفًا‬
‫ًّ‬
‫محموال أو سطح مكتب أو تلفزيون‪.‬‬ ‫ً‬
‫جهازا لوحيًا أو كمبيوتر‬ ‫الً أو‬
‫محمو ّ‬

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

‫كجزء من البرنامج التعليمي لتصميم الويب سريع االستجابة والمتوافق مع األجهزة المحمولة‪ ،‬لدي نص يشرح على وجه التحديد كيفية تنفيذ الصور‬
‫سريعة االستجابة‪.‬‬
‫‪92 | P a g e‬‬

‫‪CSS BACKGROUND IMAGES‬‬

‫يمكنك استخدام خاصية صورة الخلفية في ‪ CSS‬لتعيين صور الخلفية لعناصر ‪ HTML.‬هنا مثال‪:‬‬

‫{ ‪#withImage‬‬
‫;)'‪background-image : url('/images/css/bg-image-small.jpg‬‬
‫}‬
‫تقوم قاعدة ‪ CSS‬النموذجية هذه بتعيين خاصية ‪ CSS‬لصورة الخلفية لعنصر ‪ HTML‬بالمعرف ‪ withImage.‬تتم اإلشارة إلى عنوان‬
‫‪URL‬للصورة التي سيتم عرضها كصورة خلفية داخل إعالن ‪ url('').‬في المثال أعاله‪ ،‬عنوان ‪ URL‬هو ‪/images/css/bg-image-‬‬
‫‪small.png.‬‬

‫إليك كيف سيبدو عنصر ‪ div‬عند عرضه مع تطبيق قيمة خاصية ‪ CSS‬لصورة الخلفية المذكورة أعاله (لقد أضفت حدًا منق ً‬
‫طا لتظهر لك حدود‬
‫عنصر‪(div‬‬

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

‫‪BACKGROUND-REPEAT‬‬

‫تكرار الخلفية‬

‫تتحكم خاصية تكرار الخلفية في ‪ CSS‬في كيفية تكرار صورة الخلفية داخل عنصر ‪ HTML‬الذي يتم تطبيقها عليه‪ .‬يمكن لخاصية ‪ CSS‬تكرار‬
‫الخلفية قبول القيم التالية‪:‬‬

‫‪‬‬ ‫‪no-repeat‬‬
‫‪‬‬ ‫‪repeat‬‬
‫‪‬‬ ‫‪repeat-x‬‬
‫‪‬‬ ‫‪repeat-y‬‬

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

‫قيمة التكرار تجعل صورة الخلفية تتكرر عموديًا وأفقيًا‪ .‬وبالتالي‪ ،‬إذا كان ارتفاع عنصر ‪ HTML 300‬بكسل وعرضه ‪ 200‬بكسل‪ ،‬وكان‬
‫ارتفاع صورة الخلفية ‪ 150‬بكسل وعرضها ‪ 100‬بكسل‪ ،‬فسيتم تكرار صورة الخلفية مرتين أفقيًا (‪ ، = 2)150 / 300‬ومرتين عموديًا‬
‫(‪).2 = 100 / 200‬‬

‫قيمة التكرار ‪ x‬تجعل صورة الخلفية تتكرر أفقيًا‪ ،‬ولكن ليس رأسيًا‪.‬‬
‫‪93 | P a g e‬‬

‫قيمة التكرار ‪ y‬تجعل صورة الخلفية تتكرر عموديًا‪ ،‬ولكن ليس أفقيًا‪.‬‬

‫‪BACKGROUND-POSITION‬‬

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

‫‪PREDEFINED BACKGROUND-POSITION VALUES‬‬

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

‫قيم الموضع األفقي هي‪:‬‬

‫‪‬‬ ‫‪left‬‬
‫‪‬‬ ‫‪center‬‬
‫‪‬‬ ‫‪right‬‬

‫قيم الموضع الرأسي هي‪:‬‬

‫‪‬‬ ‫‪top‬‬
‫‪‬‬ ‫‪center‬‬
‫‪‬‬ ‫‪bottom‬‬

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

‫{ ‪#withImage‬‬
‫‪background-image‬‬ ‫;)'‪: url('/images/css/bg-image-small.jpg‬‬
‫;‪background-position : left top‬‬
‫}‬
‫تقوم قاعدة ‪ CSS‬هذه بتعيين موضع الخلفية إلى اليسار أفقيًا واألعلى عموديًا‪ .‬سيؤدي هذا إلى وضع الحافة العلوية اليسرى لصورة الخلفية في‬
‫أعلى يسار عنصر ‪ HTML‬الذي يتم تطبيقه عليه‪ .‬إليك كيف يبدو ذلك مع تكرار الخلفية ‪: background-repeat: none‬‬

‫انظر ماذا يحدث إذا غيرنا موضع الخلفية إلى األسفل األيمن؛‬
‫‪94 | P a g e‬‬

‫تتم اآلن محاذاة الحافة اليمنى للصورة مع الحافة اليمنى لعنصر‪ ، HTML‬كما تتم محاذاة الحافة السفلية للصورة مع الحافة السفلية لعنصر‬
‫‪HTML.‬‬

‫ستقوم القيمتان المركزيتان بمحاذاة مركز صورة الخلفية مع مركز عنصر ‪ HTML‬أفقيًا وعموديًا‪ .‬هنا هو كيفية وضع الخلفية‪ :‬مركز المركز؛‬
‫تبدو؛‬

‫يمكنك الجمع بين القيم األفقية والرأسية بأي طريقة تناسب احتياجاتك‪.‬‬

‫‪NUMERICAL BACKGROUND-POSITION VALUES‬‬

‫الً من القيم المحددة مسبقًا‪ ،‬يمكنك أيضًا استخدام القيم الرقمية لخاصية ‪CSS‬الخاصة بموضع الخلفية‪ .‬كما هو الحال مع القيم المحددة مسبقًا‪،‬‬
‫بد ّ‬
‫يمكنك تعيين قيمة واحدة للموضع األفقي وقيمة واحدة للموضع الرأسي‪ .‬فيما يلي مثال يضبط الموضع األفقي على ‪ 100‬بكسل والموضع الرأسي‬
‫على ‪ 50‬بكسل‪:‬‬

‫{ ‪#withImage‬‬
‫‪background-image‬‬ ‫;)'‪: url('/images/css/bg-image-small.jpg‬‬
‫;‪background-position : 100px 50px‬‬
‫}‬

‫يتم وضع الحافة اليسرى لصورة الخلفية على بعد ‪ 100‬بكسل على يمين الحافة اليسرى لعنصر ‪ HTML.‬يتم وضع الحافة العلوية لصورة الخلفية‬
‫على بعد ‪ 50‬بكسل من الحافة العلوية لعنصر‪HTML.‬‬

‫يمكنك أيضًا استخدام النسب المئوية لتحديد الموضع األفقي والرأسي‪ .‬عندما تفعل ذلك‪ ،‬سيقوم المتصفح بمحاذاة النقطة التي تمثل‪y% ، X%‬في‬
‫صورة الخلفية مع النقطة التي تمثل‪Y% ، X%‬في عنصر ‪ HTML.‬هنا مثال‪:‬‬
‫‪95 | P a g e‬‬

‫{ ‪#withImage‬‬
‫‪background-image‬‬ ‫;)'‪: url('/images/css/bg-image-small.jpg‬‬
‫;‪background-position : 50% 50%‬‬
‫}‬

‫سيقوم هذا المثال بمحاذاة النقطة التي تمثل ‪ %50‬في صورة الخلفية أفقيًا وعموديًا‪ ،‬مع النقطة التي تمثل ‪ %50‬في عنصر ‪ HTML‬أفقيًا‬
‫وعموديًا‪ .‬إليك كيف يبدو ذلك عند تطبيقه على عنصر ‪div‬‬

‫والنتيجة هي صورة خلفية مركزية ألن المركز (‪ )%50 ،%50‬من صور الخلفية تتم محاذاته مع المركز (‪ )%50 ،%50‬لعنصر‪HTML.‬‬

‫يمكنك مزج القيم الرقمية الثابتة (مثل وحدات البكسل) مع قيم النسبة المئوية‪ .‬وهنا مثال على ذلك‪:‬‬

‫{ ‪#withImage‬‬
‫‪background-image‬‬ ‫;)'‪: url('/images/css/bg-image-small.jpg‬‬
‫;‪background-position : 20px 50%‬‬
‫}‬
‫يمكنك أيضًا استخدام القيم السالبة في حالة رغبتك في نقل صورة الخلفية إلى يسار عنصر ‪ HTML‬أو أعلىه‪ .‬هنا مثال‪:‬‬

‫{ ‪#withImage‬‬
‫‪background-image‬‬ ‫;)'‪: url('/images/css/bg-image-small.jpg‬‬
‫;‪background-position : -20px -20px‬‬
‫}‬
‫إليك كيف يبدو ذلك عند تطبيقه على عنصر‪div:‬‬

‫الحظ كيف أصبحت صورة الخلفية اآلن مرئية جزئيًا فقط‪.‬‬

‫‪BACKGROUND-ATTACHMENT‬‬
‫‪96 | P a g e‬‬

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

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

‫‪‬‬ ‫‪fixed‬‬
‫‪‬‬ ‫‪scroll‬‬
‫‪‬‬ ‫‪local‬‬

‫'ثابت' يعني أن صورة الخلفية ثابتة داخل إطار عرض المتصفح‪ .‬إذا تم تمرير المحتوى‪ ،‬فلن يتم تمرير صورة الخلفية مع المحتوى‪.‬‬

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

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

‫هنا مثال‪:‬‬

‫{ ‪#withImage‬‬
‫‪background-image‬‬ ‫;)'‪: url('/images/css/bg-image-small.jpg‬‬
‫‪background-position‬‬ ‫;‪: 20px 20px‬‬
‫;‪background-attachment : fixed‬‬
‫}‬

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

‫‪BACKGROUND-SIZE‬‬

‫يتم استخدام خاصية حجم الخلفية في ‪ CSS‬لتحديد حجم صورة الخلفية التي تم تعيينها على عنصر ‪ HTML.‬فيما يلي مثال لحجم الخلفية‪:‬‬

‫{ ‪#withImage‬‬
‫‪background-image‬‬ ‫;)'‪: url('/images/css/bg-image-small.jpg‬‬
‫‪background-position‬‬ ‫;‪: 20px 20px‬‬
‫‪background-size‬‬ ‫;‪: 200px 100px‬‬
‫}‬

‫يقوم هذا المثال بتعيين خاصية حجم الخلفية في ‪ CSS‬إلى ‪ 200‬بكسل ‪ 100‬بكسل‪ ،‬مما يعني عرض ‪ 200‬بكسل (الرقم األول) وارتفاع ‪100‬‬
‫بكسل (الرقم الثاني)‪.‬‬

‫يمكنك أيضًا استخدام النسب المئوية كعرض وارتفاع لصورة الخلفية‪ .‬هنا مثال‪:‬‬
‫‪97 | P a g e‬‬

‫{ ‪#withImage‬‬
‫‪background-image‬‬ ‫;)'‪: url('/images/css/bg-image-small.jpg‬‬
‫‪background-position‬‬ ‫;‪: 20px 20px‬‬
‫‪background-size‬‬ ‫;‪: 50% 50%‬‬
‫}‬
‫يضبط هذا المثال كال من العرض واالرتفاع بنسبة ‪ %50‬من منطقة تحديد موضع الخلفية (راجع أصل الخلفية أسفل هذه الصفحة)‪.‬‬

‫‪BACKGROUND-ORIGIN‬‬

‫خلفية األصل‬

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

‫مربع الحدود‬
‫صندوق الحشو‬
‫مربع المحتوى‬

‫‪‬‬ ‫‪border-box‬‬
‫‪‬‬ ‫‪padding-box‬‬
‫‪‬‬ ‫‪content-box‬‬

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

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

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

‫فيما يلي ثالثة عناصر ‪ div‬بنفس صورة الخلفية‪ ،‬باستخدام قيمة مختلفة لخاصية ‪ CSS‬الخاصة بأصل الخلفية‪ .‬يستخدم اليسار مربع الحدود‪،‬‬
‫ويستخدم الوسط مربع الحشو‪ ،‬ويستخدم اليمين مربع المحتوى‪.‬‬

‫‪BACKGROUND-CLIP‬‬
‫‪98 | P a g e‬‬

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

‫‪‬‬ ‫‪border-box‬‬
‫‪‬‬ ‫‪padding-box‬‬
‫‪‬‬ ‫‪content-box‬‬

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

‫تعني قيمة مربع الحشو أن الجزء الوحيد من مربع الحشو في عنصر ‪ HTML‬يحتوي على صورة الخلفية المعروضة‪.‬‬

‫تعني قيمة مربع المحتوى أن الجزء الوحيد من مربع المحتوى في عنصر ‪ HTML‬يحتوي على صورة الخلفية المعروضة‪.‬‬

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

‫فيما يلي ثالثة عناصر ‪ div‬جميعها مع تعيين أصل الخلفية على مربع الحدود‪ ،‬وتعيين مقطع الخلفية على مربع الحدود‪ ،‬ومربع الحشو‪ ،‬ومربع‬
‫المحتوى‪ ،‬لتظهر لك تأثير الجمع بين خاصيتي ‪CSS‬‬

‫‪CSS GRADIENTS‬‬

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

‫تأتي تدرجات ‪ CSS‬في نوعين مختلفين‪ :‬التدرجات الخطية والتدرجات الشعاعية‪ .‬التدرجات الخطية تغير اللون بطريقة خطية‪ .‬التدرجات الشعاعية‬
‫تغير اللون بطريقة دائرية‪ .‬سيتم تغطية كل من التدرجات الخطية والشعاعية في هذا النص‪.‬‬

‫‪LINEAR GRADIENTS‬‬

‫تقوم التدرجات الخطية بتلوين منطقة أو نص بطريقة خطية مما يعني أن اللون يتغير خطيًا من لون إلى آخر‪ .‬فيما يلي مثال للتدرج الخطي المرئي‬
‫لـ‪CSS:‬‬
‫‪99 | P a g e‬‬

‫>‪<style‬‬
‫{ ‪#gradient1‬‬
‫;)‪background-image: linear-gradient(180deg, #666666, #000000‬‬
‫;‪height: 100px‬‬
‫}‬
‫>‪</style‬‬
‫>‪<div id="gradient1"></div‬‬
‫يستخدم المثال دالة )(‪ CSS Linear-gradient‬كقيمة لخاصية ‪ CSS‬لصورة الخلفية ‪.‬وهذا يجعل المتصفح يقوم بتلوين خلفية عنصر‬
‫‪HTML‬بتدرج خطي‪.‬‬

‫تأخذ الدالة الخطية المتدرجة () ثالث معلمات‪ .‬المعلمة األولى هي زاوية التدرج ‪.‬في المثال أعاله استخدمت ‪ 180‬درجة وهو ما يعني ‪180‬‬
‫درجة‪ .‬المعلمتان الثانية والثالثة هما األلوان 'من' و'إلى'‪ .‬في المثال أعاله‪ ،‬يتغير التدرج من اللون ‪( 666666#‬رمادي داكن) إلى ‪000000#‬‬
‫(أسود)‪.‬‬

‫فيما يلي مثال يتغير من األخضر إلى األزرق باستخدام زاوية ‪ 45‬درجة‪:‬‬

‫‪COLOR STOPS‬‬

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

‫>‪<style‬‬
‫{ ‪#gradient3‬‬
‫;)‪background-image: linear-gradient(180deg, #00ff00 20%, #0000ff 80%‬‬
‫;‪height: 100px‬‬
‫}‬
‫>‪</style‬‬
‫>‪<div id="gradient3"></div‬‬

‫الحظ كيف أن اللونين لديهما اآلن نسبة مئوية بعدهما (‪ %20‬و‪ .)%80‬هذا يعني أن التدرج يبدأ بنسبة ‪ %20‬في المنطقة ذات اللون األخضر‪،‬‬
‫وينتهي بنسبة ‪% 80‬في المنطقة ذات اللون األزرق‪ .‬إليك كيف يبدو التدرج الخطي عند تطبيقه على عنصر‪HTML:‬‬
‫‪100 | P a g e‬‬

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

‫يمكنك استخدام أكثر من توقفين لونيين‪ .‬فيما يلي مثال للتدرج الخطي الذي يستخدم ‪ 3‬توقفات لونية‪:‬‬

‫>‪<style‬‬
‫{ ‪#gradient4‬‬
‫‪background-image: linear-gradient(45deg, #00ff00 20%, #ff0000 50%,‬‬
‫;)‪#0000ff 80%‬‬
‫;‪height: 100px‬‬
‫}‬
‫>‪</style‬‬
‫>‪<div id="gradient4"></div‬‬

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

‫‪RADIAL GRADIENTS‬‬

‫تعمل التدرجات القطرية على تمديد تغير لونها من النقطة المركزية إلى الخارج بطريقة دائرية أو إهليلجية‪ .‬هنا مثال مرئي‪:‬‬

‫يتم تعريف التدرجات الشعاعية باستخدام وظيفة ‪ radial-gradient() CSS.‬إليك الكود الذي أنشأ المثال أعاله‪:‬‬

‫>‪<style‬‬
‫{ ‪#gradient5‬‬
‫‪background-image: radial-gradient(ellipse farthest-corner at 50% 50%‬‬
‫;)‪, #00FFFF 0%, #0000FF 95%‬‬
‫;‪height: 100px‬‬
‫}‬
‫‪101 | P a g e‬‬

‫>‪</style‬‬
‫>‪<div id="gradient5"></div‬‬

‫‪RADIAL GRADIENT SYNTAX‬‬

‫تتبع الدالة )(‪ radial-gradient‬بناء الجملة التالي‪:‬‬

‫(‪radial-gradient‬‬
‫‪shape‬‬
‫]‪[length | percentage] [| extent-keyword‬‬
‫]‪[at position‬‬
‫‪,color stop‬‬
‫‪,color stop‬‬
‫]‪[,color stop‬‬
‫;)‬
‫يمكن أن تأخذ معلمة الشكل قيمة الدائرة ‪ circle‬أو القطع الناقص ‪ .ellipse‬يحدد هذا ما إذا كان شكل التدرج القطري ي دائريًا أو‬
‫بيضاويًا‪.‬‬

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

‫يحدد الموضع مركز التدرج‪ .‬إذا لم يتم تحديد هذه المعلمات‪ ،‬فسيتم افتراض أن الموضع يكون في مركز عنصر ‪ HTML.‬تتم كتابة الكلمة‬
‫األساسية ‪ at‬كنص ويتم كتابة الموضع كإحداثيتين‪ .‬على سبيل المثال عند ‪ 200‬بكسل ‪ 50‬بكسل‪ .‬وهذا يعني 'عند النقطة ‪x=200,y=50'.‬‬

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

‫‪‬‬ ‫‪closest-side‬‬
‫‪‬‬ ‫‪closet-corner‬‬
‫‪‬‬ ‫‪farthest-side‬‬
‫‪‬‬ ‫‪farthest-corner‬‬

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

‫تتكون معلمات إيقاف األلوان من تعريفين أو أكثر إليقاف األلوان‪ ،‬مفصولة بفاصلة ‪.‬مرة أخرى‪ ،‬يتكون تعريف توقف اللون من قيمة اللون ونسبة‬
‫مئوية توضح مدى وضع هذا اللون في التدرج‪ .‬أعني بـ 'الموضع' المكان الذي يكون فيه التدرج بهذا اللون ‪ -‬إما بالبدء من هذا اللون أو االنتهاء‬
‫بهذا اللون‪.‬‬

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

‫>‪<style‬‬
‫{ ‪#gradient6‬‬
‫;)‪background-image: radial-gradient(circle, #FF0000 0%, #0000FF 100%‬‬
102 | P a g e

height: 100px;
}
</style>
<div id="gradient6"></div>

<style>
#gradient7 {
background-image: radial-gradient(circle 100px, #FF0000 0%, #0000FF
100%);
height: 100px;
}
</style>
<div id="gradient7"></div>

<style>
#gradient8 {
background-image: radial-gradient(circle 100px at 200px 50px, #FF0000 0%,
#0000FF 100%);
height: 100px;
}
</style>
<div id="gradient8"></div>

<style>
#gradient9 {
background-image: radial-gradient(circle closest-side at 200px 50px,
#FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient9"></div>
103 | P a g e

<style>
#gradient10 {
background-image: radial-gradient(circle closest-corner at 200px 50px,
#FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient10"></div>

<style>
#gradient11 {
background-image: radial-gradient(ellipse, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient11"></div>

<style>
#gradient12 {
background-image: radial-gradient(ellipse 100px 50px, #FF0000 0%, #0000FF
100%);
height: 100px;
}
</style>
<div id="gradient12"></div>

<style>
#gradient13 {
104 | P a g e

background-image: radial-gradient(ellipse 100px 50px at 200px 50px,

#FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient13"></div>

<style>
#gradient14 {
background-image: radial-gradient(ellipse farthest-side at 200px 50px,
#FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient14"></div>

<style>
#gradient15 {
background-image: radial-gradient(ellipse farthest-corner at 200px 50px,
#FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient15"></div>

CSS GRADIENTS VS. SVG GRADIENTS

.‫ وهي قوية جدًا‬،‫ أيضًا على ميزات متدرجة مدمجة‬SVG ‫يحتوي‬. ‫ ليست الخيار الوحيد المتاح لديك لتلوين منطقة أو شكل بتدرج‬CSS ‫تدرجات‬
SVG.‫ في البرنامج التعليمي لتدرجات‬SVG ‫يمكنك القراءة عن تدرجات‬

‫ وإنشاء مستطيل بتدرج داخل‬HTML ‫ كصورة خلفية لعنصر‬SVG ‫ يمكنك استخدام صورة‬، HTML‫ كخلفية لعنصر‬SVG ‫الستخدام تدرج‬
.‫ لمزيد من المعلومات‬CSS ‫ راجع صور خلفية‬HTML. ‫ ثم قم بقياس صورة الخلفية لملء عنصر‬SVG. ‫صورة‬
105 | P a g e
‫‪106 | P a g e‬‬

‫‪CSS BOX SHADOW‬‬

‫يمكن لخاصية ‪ box-shadow‬في ‪ CSS‬إضافة ظل أسفل عنصر ‪ HTML‬بحيث يبدو وكأنه مرفوع فوق عناصر ‪ HTML‬األخرى في‬
‫الصفحة‪ ،‬مثل ثالثي األبعاد تقريبًا‪.‬‬

‫تأخذ الخاصية ‪ box-shadow CSS 5‬معلمات‪ .‬يبدو التنسيق كالتالي‪:‬‬

‫‪box-shadow : inset‬‬ ‫‪offsetX‬‬ ‫‪offsetY‬‬ ‫‪blurRadius spreadRadius shadowColor‬‬

‫الً من ذلك‪ ،‬مما يجعل عنصر ‪ HTML‬يبدو‬

‫الكلمة األساسية الداخلية اختيارية‪ .‬إذا قمت بوضعه‪ ،‬فسيتم رسم ظل المربع داخل عنصر ‪ HTML‬بد ّ‬
‫الً من رفعه من الشاشة‪.‬‬
‫وكأنه مضغوط داخل الشاشة بد ّ‬

‫تحدد معلمات ‪ offsetX‬و ‪offsetY‬مقدار الظل الذي 'يبرز' من عنصر ‪ HTML.‬تحدد المعلمة ‪ offsetX‬المسافة على طول المحور ‪X‬‬
‫وتحدد المعلمة ‪ offsetY‬المسافة على طول المحور ‪ Y.‬يمكنك استخدام األرقام الموجبة والسالبة للتحكم في مكان عرض الظل‪.‬‬

‫يحدد ‪ BlurRadius‬مدى تمويه الظل‪ .‬كلما زاد نصف قطر التمويه‪ ،‬كلما أصبح ظل الصندوق أكثر ضبابية‪.‬‬

‫يحدد ‪SpreadRadius‬مقدار انتشار الظل‪ .‬يمكنك استخدام نصف قطر االنتشار اإليجابي والسلبي‪ .‬سيؤدي نصف قطر االنتشار السلبي إلى‬
‫حصر الظل في الظهور أسفل إحدى حواف عنصر ‪ HTML‬فقط‪.‬‬

‫يحدد ‪ ShadowColor‬لون الظل‪ .‬هذا مجرد لون ‪ CSS‬قياسي محدد باستخدام بناء جملة ‪ CSS‬القياسي‪ .‬الحظ أن نصف قطر التمويه يؤثر‬
‫على اللون الحقيقي أيضًا‪ ،‬من خالل تشويش لون ظل الصندوق‪.‬‬

‫فيما يلي مثال لظل مربع ‪CSS‬‬

‫;‪<div style="box-shadow: 5px 5px 6px #cccccc‬‬

‫>";‪padding: 10px; border: 1px solid #eeeeee‬‬
‫‪A box with a CSS box shadow‬‬
‫>‪</div‬‬

‫فيما يلي مثال بنصف قطر انتشار سلبي (‪ 6-‬بكسل) و‪offsetX 0‬‬

‫;‪<div style="box-shadow: 0px 8px 6px -6px #cccccc‬‬

‫>";‪padding: 10px; border: 1px solid #eeeeee‬‬
‫‪A box with a CSS box shadow with negative spread radius.‬‬
‫>‪</div‬‬

‫فيما يلي مثال مع إضافة الكلمة األساسية الداخلية أيضًا‪ .‬الحظ كيف يتم اآلن رسم ظل المربع داخل عنصر ‪ HTML‬في الجزء العلوي من عنصر‬
‫‪ ،HTML‬مما يجعله يبدو وكأنه مضغوط داخل الصفحة‪.‬‬
107 | P a g e

<div style="box-shadow: inset 6px 6px 6px -6px #cccccc;

padding: 10px; border: 1px solid #eeeeee;">
A box with a CSS box shadow using inset
</div>
‫‪108 | P a g e‬‬

‫‪CSS DISPLAY‬‬

‫تحدد خاصية عرض ‪ CSS‬كيفية عرض عنصر ‪ HTML‬في تدفق عناصر ‪ HTML‬على الصفحة‪ .‬يمكن لخاصية العرض في ‪ CSS‬أن تأخذ‬
‫إحدى القيم‪:‬‬

‫‪‬‬ ‫‪none‬‬
‫‪‬‬ ‫‪block‬‬
‫‪‬‬ ‫‪inline‬‬
‫‪‬‬ ‫‪inline-block‬‬
‫‪‬‬ ‫‪grid‬‬

‫كيفية تأثير كل من قيم خصائص عرض ‪ CSS‬على عرض عنصر ‪ HTML‬موضح في األقسام التالية‪.‬‬

‫‪DISPLAY : NONE‬‬

‫ستؤدي قيمة خاصية عرض ‪ CSS‬إلى عدم عرض عنصر ‪ HTML‬في الصفحة في المتصفح‪ .‬كما أنها لن تشغل أي مساحة مرئية في صفحة‬
‫‪HTML.‬فيما يلي مثال لعنصر ‪ HTML‬مع تعيين خاصية عرض ‪ CSS‬الخاصة به على ال شيء‪:‬‬

‫>‪<style‬‬
‫} ;‪#myElement { display: none‬‬
‫>‪</style‬‬

‫>"‪<div id="myElement‬‬
‫‪This DIV element is not displayed‬‬
‫>‪</div‬‬
‫‪/div‬‬

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

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

‫>‪<style‬‬
‫{ )‪@media only screen and (max-width: 600px‬‬
‫} ;‪#myElement { display: none‬‬
‫}‬
‫{ )‪@media only screen and (min-width: 601px‬‬
‫} ;‪#myElement { display: inline‬‬
‫}‬
‫>‪</style‬‬
‫‪109 | P a g e‬‬

‫>"‪<div id="myElement‬‬
‫‪This DIV is only displayed on larger screens‬‬
‫>‪</div‬‬
‫سيخفي هذا المثال عنصر ‪ HTML‬بالمعرف ‪ myElement‬عندما يكون عرض نافذة المتصفح ‪ 600‬بكسل أو أقل‪.‬‬

‫الموقف الثاني هو عندما تستخدم ‪ JavaScript‬إلظهار عنصر ‪ HTML‬وإخفائه عن طريق ضبط خاصية العرض الخاصة به على ال شيء‬
‫وشيء آخر‪ .‬فيما يلي مثال لتبديل قيمة خاصية عرض ‪ CSS‬باستخدام‪JavaScript:‬‬

‫;)"‪var element = document.getElementById("myElement‬‬

‫;"‪element.style.display = "none‬‬

‫‪DISPLAY : BLOCK‬‬

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

‫>‪<p‬‬
‫‪This text contains‬‬
‫>‪<span>display : block</span‬‬
‫‪elements.‬‬
‫>‪</p‬‬
‫يحتوي هذا المثال على عنصر االمتداد ‪ . span‬عادّة ً ما يتم عرض عنصر االمتداد كجزء من تدفق النص‪ .‬هذه هي الطريقة التي يبدو بها‬
‫‪HTML‬أعاله عند تقديمه‪:‬‬

‫اآلن‪ ،‬دعونا نضبط خاصية العرض في ‪ CSS‬لحظر عنصر االمتداد‪:‬‬

‫>‪<p‬‬
‫‪This text contains‬‬
‫>‪<span style="display:block">display : block</span‬‬
‫‪elements.‬‬
‫>‪</p‬‬

‫كما ترون‪ ،‬يتم اآلن عرض االمتداد ككتلة منفصلة منفصلة رأسيًا‪ .‬هذا هو تأثير قيمة الكتلة لخاصية عرض‪CSS.‬‬

‫‪DISPLAY : INLINE‬‬

‫تعرض القيمة المضمنة عنصر ‪ HTML‬كجزء من تدفق النص العادي‪ .‬انظر إلى مثال ‪ HTML‬هذا‪:‬‬

‫>‪<div>This text is written </div‬‬

‫>‪<div>Inside two div elements.</div‬‬
‫‪110 | P a g e‬‬

‫عادّة ً ما يتم عرض عناصر ‪ div‬بتنسيق ‪ HTML‬ككتلة افتراضيًا‪ .‬وبالتالي‪ ،‬سيتم عرض كل عنصر من عنصري ‪ div‬ككتل منفصلة‪ .‬هنا كيف‬
‫يبدو ذلك‪:‬‬

‫اآلن‪ ،‬الحظ ما يحدث عندما نقوم بتعيين خاصية العرض ‪ CSS‬لتضمين عنصري ‪ div.‬هنا هو رمز ‪HTML‬‬

‫‪DISPLAY : INLINE-BLOCK‬‬

‫إن قيمة الكتلة المضمنة ‪ inline-block‬لخاصية العرض ‪ CSS‬تجعل عنصر ‪ HTML‬يظهر ككتلة‪ ،‬ولكن يتم عرضه كجزء من تدفق‬
‫النص العادي‪ .‬ماذا يعني ذالك؟‬

‫عند استخدام القيمة المضمنة ‪ ، inline‬ال يمكنك التحكم في عرض وارتفاع عناصر ‪ HTML.‬ويحدد المتصفح ذلك بنا ًّء على محتوى العناصر‪.‬‬

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

‫انظر إلى مثال ‪ HTML‬هذا‪:‬‬

‫>‪<p‬‬
‫‪This text contains a‬‬
‫>‪<span style="width: 150px;">span element</span‬‬
‫‪and another‬‬
‫>‪<span style="width: 150px">span element</span‬‬
‫‪and some text.‬‬
‫>‪</p‬‬

‫نظرا ألنه يتم‬

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

‫يتم تجاهل خصائص عرض‪CSS.‬‬

‫لكن الحظ ما يحدث عندما نقوم بتعيين خاصية العرض في ‪ CSS‬على ‪ inline-block‬لعنصري ‪.span‬‬

‫إليك كود ‪HTML‬‬

‫>‪<p‬‬
‫‪This text contains a‬‬
‫;‪<span style="display: inline-block‬‬
‫>‪width: 150px;">span element</span‬‬
‫‪and another‬‬
‫‪111 | P a g e‬‬

‫;‪<span style="display: inline-block‬‬

‫>‪width: 150px">span element</span‬‬
‫‪and some text.‬‬
‫>‪</p‬‬

‫يمكنك اآلن أن ترى أن عرض عنصري االمتداد يبلغ ‪ 150‬بكسل‪.‬‬

‫نظرا لكون عرض النص الموجود داخل عناصر االمتداد أقل من ‪ 150‬بكسل‪ ،‬فإن عناصر االمتداد تترك فجوة بيضاء في تدفق النص‪.‬‬
‫ً‬

‫‪DISPLAY : GRID‬‬

‫تجعل قيمة خاصية شبكة العرض ‪ CSS‬محتوى عنصر( ‪ HTML‬عادّة ً )‪ DIV‬ينسق عناصره في شبكة ثنائية األبعاد‪ .‬يعد تخطيط شبكة‬
‫قويًا جدًا وبالتالي فهو معقد إلى حد ما في الوصف والفهم‪ .‬لذلك قررت أن أتركه خارج هذا البرنامج التعليمي لعرض‪CSS.‬‬

‫‪DEFAULT DISPLAY VALU ES FOR HTML ELEMENTS‬‬

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

‫بغض النظر عن القيمة االفتراضية التي يستخدمها عنصر ‪ HTML‬لقيمة خاصية عرض ‪CSS‬الخاصة به‪ ،‬يمكنك دائ ًما تجاوزها عن طريق تعيين‬
‫قيمة خاصية عرض ‪ CSS‬إلى القيمة المطلوبة‪.‬‬
‫‪112 | P a g e‬‬

‫‪CSS FLOAT‬‬

‫يمكن لخاصية ‪ CSS float‬أن تجعل عناصر ‪ HTML‬تطفو إلى اليسار أو اليمين داخل العنصر األصلي‪ .‬سيتحرك المحتوى الموجود داخل نفس‬
‫العنصر األصلي ألعلى ويلتف حول العنصر العائم‪ .‬في هذا البرنامج التعليمي لـ ‪ CSS float‬سأشرح كيفية عمل خاصية ‪ CSS float‬بمزيد‬
‫من التفاصيل‪.‬‬

‫‪CSS FLOAT EXAMPLE‬‬

‫الً على مثال‪HTML:‬‬

‫لتوضيح كيفية عمل الخاصية العائمة في‪ ، CSS‬دعونا نلقي نظرة أو ّ‬

‫>";‪<div style="border:1px solid #cccccc‬‬

‫‪This is the first text‬‬

‫>‪<div style="border: 2px solid red;">This is box 1</div‬‬

‫>‪<div style="border: 2px solid green;">This is box 2</div‬‬

‫‪This is the last text‬‬

‫>‪</div‬‬

‫يحتوي كود ‪ HTML‬على عنصر ‪ div‬الذي يحتوي على نص وعنصري ‪ div‬ونص آخر داخل نصه‪ .‬عندما يتم تقديمه‪ ،‬إليك ما يبدو‪:‬‬

‫يسارا ويمينًا داخل العنصر األصلي باستخدام خاصية‪CSS float.‬‬

‫ً‬ ‫سأوضح لك في األقسام التالية كيفية جعل عنصري ‪ div‬المتداخلين يطفوان‬

‫‪FLOAT : LEFT‬‬
‫‪113 | P a g e‬‬

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

‫‪ CSS float‬لعنصر ‪ HTML‬على القيمة المتبقية‪ .‬فيما يلي مثال يوضح عنصر ‪ div‬مع تعيين خاصية ‪ CSS float‬على اليسار‪:‬‬

‫>";‪<div style="border:1px solid #cccccc‬‬

‫‪This is the first text‬‬

‫>‪<div style="float: left; border: 2px solid red;">This is box 1</div‬‬

‫>‪<div style="border: 2px solid green;">This is box 2</div‬‬

‫‪This is the last text‬‬

‫>‪</div‬‬

‫الحظ كيف يطفو عنصر ‪ div‬األول (ذو الحد األحمر) اآلن إلى اليسار داخل العنصر األصلي‪ .‬يتم اآلن التفاف النص األول بشكل جيد حول‬
‫عنصر ‪ div‬األول‪ ،‬الموجود على يمينه‪ .‬يظل عنصر ‪ div‬الثاني موجودًا أسفل عنصر ‪ div‬األول‪ ،‬والنص األخير أسفله‪.‬‬

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

‫>";‪<div style="border:1px solid #cccccc‬‬

‫‪This is the first text‬‬

‫>‪<div style="float: left; border: 2px solid red;">This is box 1</div‬‬

‫>‪<div style="float: left; border: 2px solid green;">This is box 2</div‬‬

‫‪This is the last text‬‬

‫‪114 | P a g e‬‬

‫>‪</div‬‬

‫اآلن يطفو عنصر ‪ div‬المتداخل األول والثاني إلى اليسار داخل العنصر األصلي‪ .‬يلتف النص بشكل جيد حول العنصرين العائمين‪.‬‬

‫‪FLOAT : RIGHT‬‬

‫الً من ذلك ‪.‬نقوم بذلك عن طريق تعيين خاصية ‪ float CSS‬الخاصة بها إلى‬
‫اآلن دعونا نحاول جعل القسم المتداخل الثاني يطفو إلى اليمين بد ّ‬
‫الً من اليسار‪ .‬هنا هو الرمز‪:‬‬
‫اليمين بد ّ‬

‫>";‪<div style="border:1px solid #cccccc‬‬

‫‪This is the first text‬‬

‫>‪<div style="float: left; border: 2px solid red;">This is box 1</div‬‬

‫>‪<div style="float: right; border: 2px solid green;">This is box 2</div‬‬

‫‪This is the last text‬‬

‫>‪</div‬‬
115 | P a g e

‫ بل إنها تقع في نفس الموضع الرأسي (باتجاه الجزء العلوي من العنصر‬.‫انظر كيف يتحرك العنصران اآلن في كل اتجاه داخل العنصر األصلي‬
div.‫ من خالل عرضه بين عنصري‬div ‫ يلتف النص اآلن حول عنصري‬.)‫األصلي‬

CLEAR

:‫ ثالثًا والذي يطفو أيضًا إلى اليسار‬div ‫ دعونا نضيف عنصر‬،‫اآلن‬

<div style="border:1px solid #cccccc;">

This is the first text

<div style="float: left; border: 2px solid red;">This is box 1</div>

<div style="float: right; border: 2px solid green;">This is box 2</div>
<div style="float: left; border: 2px solid red;">This is box 3</div>

This is the last text

</div>
‫‪116 | P a g e‬‬

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

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

‫يمكن أن تأخذ خاصية ‪ CSS‬الواضحة إحدى هذه القيم‪:‬‬

‫‪‬‬ ‫‪left‬‬
‫‪‬‬ ‫‪right‬‬
‫‪‬‬ ‫‪both‬‬
‫‪‬‬ ‫‪none‬‬

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

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

‫>";‪<div style="border:1px solid #cccccc‬‬

‫‪This is the first text‬‬

‫;‪<div style="float: left‬‬ ‫>‪border: 2px solid red;">This is box 1</div‬‬

‫>‪<div style="float: right; border: 2px solid green;">This is box 2</div‬‬
‫‪<div style="float: left; clear: left border: 2px solid red;">This is box‬‬
‫>‪3</div‬‬
‫‪117 | P a g e‬‬

‫‪This is the last text‬‬

‫>‪</div‬‬

‫الحظ كيف أن عنصر ‪ div‬األخير ال يزال يطفو إلى اليسار‪ ،‬لكنه يبقى تحت (خاليًا) من أول عنصر ‪ div‬عائم على اليسار‪.‬‬
‫‪118 | P a g e‬‬

‫‪CSS POSITION‬‬

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

‫يمكن تعيين خاصية الموضع ‪ CSS‬على إحدى هذه القيم‪:‬‬

‫‪‬‬ ‫‪static‬‬
‫‪‬‬ ‫‪relative‬‬
‫‪‬‬ ‫‪fixed‬‬
‫‪‬‬ ‫‪absolute‬‬

‫‪POSITION : STATIC‬‬

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

‫‪POSITION : RELATIVE‬‬

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

‫‪‬‬ ‫‪top‬‬
‫‪‬‬ ‫‪left‬‬
‫‪‬‬ ‫‪bottom‬‬
‫‪‬‬ ‫‪right‬‬

‫فيما يلي مثال يضع عنصر ‪ HTML‬بمقدار ‪ 20-‬بكسل إلى اليسار و‪ 20-‬بكسل فوق موضعه الطبيعي في التدفق‪:‬‬

‫>‪<style‬‬
‫{ ‪#theRelativeSpan‬‬
‫;‪position : relative‬‬
‫‪top‬‬ ‫;‪: -20px‬‬
‫‪left‬‬ ‫;‪: -20px‬‬
‫‪border‬‬ ‫‪: 1px solid #cccccc; //shows the boundaries of the element.‬‬
‫}‬
‫>‪</style‬‬
‫>‪<p‬‬
‫‪This is a paragraph with a lot of text inside, and a‬‬ ‫‪<span‬‬
‫>‪id="theRelativeSpan">relative span element</span‬‬
‫‪as part of the text.‬‬
‫>‪</p‬‬
‫‪119 | P a g e‬‬

‫الحظ كيف يتم عرض عنصر االمتداد إلى اليسار وفوق المكان الذي كان من المفترض أن يتم وضعه فيه عادّة ً‪ .‬الحظ أيضًا أن المساحة الفارغة ال‬
‫تزال تظهر في المكان الذي كان من المفترض أن يُعرض فيه النطاق عاد ّةً‪.‬‬

‫‪POSITION : FIXED‬‬

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

‫فيما يلي لقطتان لشاشة المتصفح توضحان تأثير الموضع‪ :‬إعالن خاصية ‪ CSS‬الثابتة‪:‬‬
‫‪120 | P a g e‬‬

‫الً (تم تغيير حجم المتصفح) في لقطة الشاشة الثانية‪ ،‬ولكن عنصر ‪ HTML‬ذو الخلفية الرمادية ال يزال موجودًا في‬
‫الحظ أن المتصفح أطول قلي ّ‬
‫أسفل نافذة المتصفح‪.‬‬

‫‪POSITION : ABSOLUTE‬‬

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

‫انظر إلى هذا الكود المثال‪:‬‬

‫>‪<style‬‬
‫{ ‪#theAbsoluteDiv‬‬
‫;‪position: absolute‬‬
‫‪bottom‬‬ ‫;‪: 0px‬‬
‫;‪background-color: #cccccc‬‬
‫}‬
‫>‪</style‬‬

‫>"‪<div id="theAbsoluteDiv‬‬
‫‪This text is positioned with <code>absolute</code> at the bottom of the‬‬
‫‪browser window.‬‬
‫>‪</div‬‬

‫يقوم هذا المثال بتعيين عنصر ‪ div‬إلى الموضع‪ :‬مطلق‪ ،‬مع تحديد موضع عنصر ‪ div‬على بعد ‪ 0‬بكسل من أسفل المتصفح‪ .‬إليك كيف يبدو ذلك‬
‫عند عرضه داخل صفحة تحتوي على المزيد من النص‪:‬‬
‫‪121 | P a g e‬‬

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

‫الً مرة أخرى‪ ،‬ثم تقوم بالتمرير قلي ّ‬

‫الً إلى أسفل الصفحة‪ .‬اآلن يتم تمرير عنصر ‪div‬‬ ‫ولكن‪ ،‬الحظ ما يحدث عندما تجعل نافذة المتصفح أصغر قلي ّ‬
‫فجأة ألعلى في منتصف الشاشة‪:‬‬
‫‪122 | P a g e‬‬

‫‪POSITION : ABSOLUTE INSIDE OTHER POSITIONED ELEMENTS‬‬

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

‫هنا مثال‪:‬‬

‫>‪<style‬‬
‫{ ‪#theOuterDiv‬‬
‫;‪position: relative‬‬
‫‪top‬‬ ‫;‪: 0px‬‬
‫‪left‬‬ ‫;‪: 0px‬‬
‫‪border‬‬ ‫;‪: 1px solid #cccccc‬‬
‫;‪padding : 10px‬‬
‫}‬

‫{ ‪#theInnerDiv‬‬
‫;‪position: absolute‬‬
‫‪top‬‬ ‫;‪: 0px‬‬
‫‪right‬‬ ‫;‪: 0px‬‬
‫;‪padding : 10px‬‬
‫;‪background-color: #ccffcc‬‬
‫‪border‬‬ ‫;‪: 1px solid #99cc99‬‬
‫}‬

‫>‪</style‬‬

‫>"‪<div id="theOuterDiv‬‬
‫‪This is the outer div element.‬‬
‫‪This is the outer div element.‬‬
‫‪This is the outer div element.‬‬
‫‪This is the outer div element.‬‬

‫>"‪<div id="theInnerDiv‬‬
‫‪This is the inner div element.‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫نظرا ألنه تم ضبط األعلى واليسار على ‪ ،px0‬فسيتم وضع عنصر ‪div‬‬
‫يقوم هذا المثال بتعيين الموضع إلى نسبة نسبية لعنصر ‪ div‬الخارجي‪ً .‬‬
‫الخارجي تما ًما في المكان الذي كان سيتم وضعه فيه بدون تعيين الموضع إلى نسبي‪.‬‬

‫تم ضبط موضع عنصر ‪ div‬الداخلي على القيمة المطلقة واألعلى على ‪px 0‬واليمين على ‪0px.‬يؤدي هذا إلى وضع القسم الداخلي في الزاوية‬
‫‪123 | P a g e‬‬

‫اليمنى العليا داخل العنصر األصلي الخاص به (ألن العنصر األصلي له الموضع‪ :‬مجموعة نسبية)‪.‬‬

‫إليك كيفية ظهور ذلك عند عرضه في متصفح داخل صفحة تحتوي على المزيد من النص‪:‬‬

‫الحظ كيف أصبح موضع القسم الداخلي اآلن مطلقًا داخل العنصر األصلي‪.‬‬
‫‪124 | P a g e‬‬

‫‪CSS MEDIA QUERIES‬‬

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

‫‪INSERTING MEDIA QUER IES‬‬

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

‫إدراجه في عنصر رابط يشير إلى ورقة أنماط‪CSS.‬‬

‫إدراجه قبل تعليمات ‪ @import CSS‬في ورقة أنماط‪CSS.‬‬
‫إدراجه داخل ورقة أنماط‪CSS.‬‬

‫ويرد أدناه مثال لكل من هذه الطرق‪:‬‬

‫‪<link rel="stylesheet" href="mycss.css" media="only screen and (max-width:‬‬

‫>")‪1200px‬‬

‫يوضح هذا المثال كيفية إضافة استعالمات الوسائط إلى عنصر االرتباط‪ .‬فقط في حالة استيفاء الشروط في استعالم الوسائط‪ ،‬يتم تطبيق ملف‬
‫‪CSS‬على مستند ‪HTML.‬‬

‫;)‪@import url('my-other-css.css') only screen and (max-width: 1200px‬‬

‫يوضح هذا المثال كيفية استيراد ورقة أنماط ‪ CSS‬من داخل ورقة أنماط ‪ CSS‬أخرى‪ .‬يمكنك إلحاق استعالم وسائط بتعليمات ‪ @import.‬فقط‬
‫في حالة استيفاء الشروط الموجودة في استعالم الوسائط‪ ،‬يتم استيراد ملف ‪ CSS‬وتطبيقه‪.‬‬

‫{ )‪@media only screen and (max-width: 1200px‬‬

‫‪/* css rules */‬‬
‫}‬

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

‫‪MEDIA QUERY SYNTAX‬‬

‫إن بناء جملة استعالم الوسائط هو نفسه بغض النظر عما إذا كنت تستخدمه داخل عنصر رابط‪ ،‬أو بعد تعليمات‪ ، @import‬أو داخل ورقة‬
‫أنماط ‪CSS‬‬

‫تتبع استعالمات الوسائط بناء الجملة هذا‪:‬‬

‫‪[logic] [media] [and (condition)] [and (condition)] ...‬‬

‫بالنسبة للرمز [المنطقي]]‪ ، [logic‬يمكنك استخدام إحدى القيم‪:‬‬
‫‪125 | P a g e‬‬

‫يمكنك استخدام إحدى هذه القيم‪:‬‬ ‫رمز [الوسائط]]‪[media‬‬

‫هناك المزيد من أنواع الوسائط‪ ،‬ولكن ليس جميعها مدعومة من قبل المتصفح في وقت كتابة هذا التقرير‪ .‬يمكنك العثور على القائمة الكاملة على‬
‫‪http://www.w3.org/TR/CSS21/media.html.‬‬

‫تقوم الكتل ])‪ [and (condition‬بتعيين الشروط للشاشة‪ .‬على سبيل المثال‪ ،‬يمكنك استخدام هذه الخصائص داخل كتلة الشرط‪:‬‬
‫‪126 | P a g e‬‬

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

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

‫‪MEDIA QUERY EXAMPLES‬‬

‫فيما يلي بعض األمثلة على استعالم الوسائط‪:‬‬

‫>‪<style‬‬
‫{ )‪@media only screen and (max-width: 600px‬‬
‫‪127 | P a g e‬‬

‫‪/* CSS rules for browser widths equal to or less than 600px */‬‬
‫} ;‪body { background-color: #ffffff‬‬
‫}‬
‫{ )‪@media only screen and (min-width: 601px) and (max-width: 1200px‬‬
‫‪/* CSS rules for browser widths from 601px to 1200 px */‬‬
‫} ;‪body { background-color: #ff0000‬‬
‫}‬
‫{ )‪@media only screen and (min-width: 1201px‬‬
‫‪/* CSS rules for browser widths from 1201px and up */‬‬
‫} ;‪body { background-color: #0000ff‬‬
‫}‬
‫>‪</style‬‬

‫تتطابق استعالمات الوسائط الثالثة هذه مع عروض مختلفة لنافذة المتصفح ‪.‬يتطابق استعالم الوسائط األول مع جميع عروض المتصفح التي تقل عن‬
‫أو تساوي ‪600‬بكسل‪ .‬وهذا يعني أن جميع قواعد ‪ CSS‬المدرجة داخل نص استعالم الوسائط (داخل } ‪ ) { ...‬لن يتم تطبيقها إال إذا كان‬
‫عرض نافذة المتصفح ‪ 600‬بكسل أو أقل‪.‬‬

‫يتطابق استعالم الوسائط الثاني مع عرض نافذة المتصفح من ‪ 601‬بكسل إلى ‪ 1200‬بكسل‪ .‬لن يتم تطبيق قواعد ‪ CSS‬داخل نص استعالم‬
‫الوسائط إال إذا كان عرض نافذة المتصفح يقع في هذه الفترة الزمنية‪.‬‬

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

‫في األمثلة‪ ،‬يحتوي كل استعالم عن الوسائط على قاعدة ‪ CSS‬واحدة فقط داخل النص األساسي‪ ،‬تحدد لون الخلفية‪ .‬في تطبيق ويب حقيقي أو موقع‬
‫ويب‪ ،‬يمكن أن يكون لديك المزيد من قواعد ‪CSS‬‬
‫‪128 | P a g e‬‬

‫‪CSS OPACITY‬‬

‫يمكن استخدام خاصية العتامة ‪ CSS‬لتعيين العتامة‪/‬الشفافية لعنصر ‪ HTML.‬العتامة هي عكس الشفافية‪ ،‬لذا كلما كان عنصر ‪ HTML‬أكثر‬
‫عتامة‪ ،‬كلما كان أقل شفافية‪.‬‬

‫يتم تحديد العتامة كرقم بين ‪ 0‬و‪ .1‬القيمة ‪ 0‬تعني شفافية كاملة (بدون عتامة)‪ ،‬والقيمة ‪ 1‬تعني معتمة تما ًما‪ .‬وبالمثل‪ ،‬فإن القيمة ‪ 0.5‬تعني شبه‬
‫معتم‪ ،‬وهي نفس القيمة شبه شفافة‪.‬‬

‫فيما يلي مثال لخاصية ‪:Opacity CSS‬‬

‫{ ‪.withOpacity‬‬
‫;‪opacity: 0.5‬‬
‫}‬
‫تحدد هذه األمثلة عتامة جميع عناصر ‪ HTML‬مع فئة ‪ CSS‬ذات العتامة إلى ‪ 0.5‬مما يعني أن عناصر ‪ HTML‬تصبح شبه شفافة‪.‬‬

‫فيما يلي مثال مرئي لعنصر ‪ div‬مع صورة خلفية‪ ،‬ويحتوي على عنصر ‪ div‬آخر بخلفية حمراء وبعض النصوص البيضاء‪ .‬تم ضبط عتامة‬
‫عنصر ‪ div‬الداخلي على ‪:0.7‬‬

‫الحظ كيف يمكنك رؤية صورة الخلفية لعنصر ‪ div‬الخارجي من خالل الخلفية الحمراء والنص األبيض لعنصر ‪ div‬الداخلي‪.‬‬

‫الكود المستخدم إلنشاء مثال عتامة ‪ CSS‬أعاله هو‪:‬‬

‫;)'‪<div style="background-image: url('/images/css/border-image.png‬‬

‫>";‪background-size: 100% 100%; height: 200px‬‬
‫;‪<div style="opacity: 0.7; font-size: 3.0em‬‬
‫>";‪background-color: #ff0000; color: #ffffff‬‬
‫‪This <code>div</code> element is semi-transparent.‬‬
‫>‪</div‬‬
‫>‪</div‬‬

‫‪OPACITY OF NESTED EL EMENTS‬‬

‫إذا قمت بتعيين عتامة عنصر ‪ HTML‬وكان لهذا العنصر عناصر فرعية (عناصر متداخلة)‪ ،‬فإن الحد األقصى من العتامة التي يمكن أن تتمتع بها‬
‫العناصر المتداخلة هو نفس العنصر األصلي‪ .‬على سبيل المثال‪ ،‬إذا قمت بتعيين عتامة بمقدار ‪ 0.7‬على العنصر الخارجي (األصل)‪ ،‬فيمكن أن‬
‫‪129 | P a g e‬‬

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

‫هناك طرق للتغلب على هذا‪ .‬على سبيل المثال‪ ،‬يمكنك تعيين لون خلفية العنصر األصلي إلى لون ذو شفافية (راجع ألوان ‪ CSS).‬عندها سيكون‬
‫لون خلفية الوالدين فقط شفافًا‪ .‬ستكون جميع العناصر المتداخلة معتمة تما ًما‪.‬‬

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

‫‪CSS WEB FONTS‬‬

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

‫‪FINDING WEB FONTS‬‬

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

‫‪USING WEB FONTS‬‬

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

‫{ ‪@font-face‬‬
‫;'‪font-family: 'Roboto‬‬
‫;‪font-style: normal‬‬
‫;‪font-weight: 400‬‬
‫‪src: local('Roboto Regular'),‬‬
‫‪local('Roboto-Regular'),‬‬

‫‪url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8T‬‬
‫)‪clTUvlFyQ.woff‬‬
‫;)'‪format('woff‬‬
‫}‬

‫يحدد هذا المثال خط الويب ‪ Roboto‬من ‪ Google.‬يمكنك اآلن استخدام اسم عائلة الخط عند تصميم النص‪ ،‬كما يلي‪:‬‬

‫{ ‪p‬‬
‫;‪font-family: Roboto‬‬
‫}‬
130 | P a g e

‫ يتم تعيين الفقرة التالية باستخدام خط الويب‬p. ‫ خط الويب المحدد مسبقًا )لجميع عناصر‬Roboto (‫يقوم هذا المثال بتعيين عائلة الخط إلى‬
:‫ حتى تتمكن من رؤية كيف تبدو عند عرضها‬،‫هذا‬Roboto

Roboto.‫تم تعيين هذا النص باستخدام خط الويب‬

.‫تم تعيين هذا النص بخط عادي‬

:‫ لذا إليك خط ويب حيث يكون الفرق أكثر وضو ًحا‬،‫قد يكون من الصعب رؤية الفرق بين الخطين‬

@font-face {
font-family: 'Shadows Into Light';
font-style: normal;
font-weight: 400;
src: local('Shadows Into Light'),
local('ShadowsIntoLight'),

url(http://fonts.gstatic.com/s/shadowsintolight/v5/clhLqOv7MXn459PTh0gXYFK2TS
YBz0eNcHnp4YqE4Ts.woff2)
format('woff2'),

url(http://fonts.gstatic.com/s/shadowsintolight/v5/clhLqOv7MXn459PTh0gXYHW1xg
lZCgocDnD_teV2lMU.woff)
format('woff');
}
Shadows Into Light.‫تم ضبط هذا النص باستخدام‬

@FONT-FACE EXPLAINED

‫ فسيتعين عليك تحديد ثالثة‬،‫ إذا كنت بحاجة إلى أنماط خطوط عادية ومائلة وغليظة‬.‫ بنمط خط واحد‬،‫@ خط ويب واحدًا‬font-face ‫يحدد إعالن‬
:‫ هنا كيف سيبدو ذلك‬.‫ خط ويب واحد لكل نمط‬.‫خطوط ويب مختلفة‬

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'),
local('Roboto-Regular'),

url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8T
clTUvlFyQ.woff)
format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
‫‪131 | P a g e‬‬

‫;‪font-weight: 700‬‬
‫‪src: local('Roboto Bold'),‬‬
‫‪local('Roboto-Bold'),‬‬
‫‪url(http://themes.googleusercontent.com/static/fonts/roboto/v11/d-‬‬
‫)‪6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff‬‬
‫;)'‪format('woff‬‬
‫}‬
‫{ ‪@font-face‬‬
‫;'‪font-family: 'Roboto‬‬
‫;‪font-style: italic‬‬
‫;‪font-weight: 400‬‬
‫‪src: local('Roboto Italic'),‬‬
‫‪local('Roboto-Italic'),‬‬

‫‪url(http://themes.googleusercontent.com/static/fonts/roboto/v11/1pO9eUAp8pSF8‬‬
‫)‪VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff‬‬
‫;)'‪format('woff‬‬
‫}‬
‫يمكنك اآلن استخدام أنماط الخطوط الثالثة هذه في صفحة ‪ HTML‬الخاصة بك عن طريق تعيين نمط الخط ووزن الخط المستخدم في تعريفات‬
‫خطوط الويب‪ .‬على سبيل المثال‪ ،‬الستخدام النسخة المائلة من الخط‪ ،‬يمكنك كتابة هذا‪:‬‬

‫{ ‪p‬‬
‫;‪font-family: Roboto‬‬
‫;‪font-style : italic‬‬
‫;‪font-weight: 400‬‬
‫}‬

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

‫تشير سمة ‪ src‬لإلعالن ‪ @font-face‬إلى مصدر خط الويب (ملف خط الويب)‪ .‬تحتوي سمة ‪ src‬على ثالث معلمات مختلفة‪:‬‬

‫‪‬‬ ‫‪local‬‬
‫‪‬‬ ‫‪url‬‬
‫‪‬‬ ‫‪format‬‬

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

‫كما ترون‪ ،‬كل إصدار من الخط له اسمه المحلي الخاص ‪.‬على سبيل المثال‪'Roboto Regular' ،‬و '‪'Roboto Bold‬و ‪'Roboto‬‬
‫‪Italic'.‬وذلك ألن كل إصدار من الخط يتم تعريفه بشكل صريح كخط منفصل في الملف الخاص به ‪.‬وبالتالي‪ ،‬يتم استخدام ‪'Roboto‬‬
‫‪132 | P a g e‬‬

‫'‪Italic‬فقط لعرض النص المائل‪.‬‬

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

‫تحتوي معلمة ‪ url‬ببساطة على عنوان ‪ URL‬لملف خط الويب‪ ،‬تما ًما مثل عنوان ‪ URL‬لملف صورة‪.‬‬

‫تخبر معلمة التنسيق ‪ format‬الذي تم ترميز خط الويب فيه داخل ملف خط الويب‪ .‬يجب أن يخبرك موفر ملف خط الويب بالتنسيق‪format‬‬
‫الذي تم ترميز ملف خط الويب به‪.‬‬

‫‪USING GOOGLE WEB FON TS‬‬

‫نظرا ألن خطوط الويب الخاصة بـ ‪ Google‬مجانية ولديها عدد كبير جدًا‪ ،‬فهناك احتمال كبير بأن ينتهي بك األمر إلى استخدام خطوط الويب‬
‫ً‬
‫الخاصة بـ ‪ Google‬يو ًما ما‪ .‬عند استخدام خط ويب‪ ، Google‬يمكنك اختياره من موقع خطوط‪ ، Google‬ثم النقر فوق الزر 'استخدام'‪ .‬ثم‬
‫ستزودك ‪ Google‬بـ ‪ CSS‬الستخدامه‪.‬‬

‫عادّة ً ما يبدو الرمز الذي يقدمه لك ‪ Google‬كما يلي‪:‬‬

‫'‪<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet‬‬

‫>'‪type='text/css‬‬
‫يمكنك إدراج هذا الرمز في العنصر الرئيسي لصفحة ‪ HTML‬الخاصة بك‪ .‬يشير الرمز إلى ملف ‪ CSS‬على خادم خطوط ‪ Google‬والذي‬
‫يحتوي على تعريف ‪ @font-face‬الصحيح للخط الذي اخترته‪.‬‬

‫أمرا سهالًّ‪ ،‬إال أنه يؤدي إلى طلب إضافي للشبكة‪ .‬أوالًّ‪ ،‬يحتاج المتصفح إلى‬
‫على الرغم من أن إدراج عنصر الرابط في عنصر رأسك قد يكون ً‬
‫تنزيل ملف ‪ CSS‬بتعريف( ‪ @font-face‬الملف يشير إلى عنصر الرابط)‪ .‬ثم يحتاج المتصفح إلى تنزيل ملف خط الويب نفسه المشار إليه‬
‫من تعريف‪@font-face.‬‬

‫الً من تضمين عنصر الرابط الذي يقدمه لك ‪ ،Google‬يمكنك فتح ملف ‪ CSS‬الذي يشير إليه عنصر الرابط في المتصفح (عنوان ‪URL‬‬ ‫بد ّ‬
‫الموجود داخل سمة ‪ href‬لعنصر الرابط)‪ .‬ثم يمكنك نسخ ملف( ‪ CSS‬تعريف (تعريفات ) ‪) @font-face‬إلى ملف ‪ CSS‬الخاص بك‪.‬‬
‫وبهذه الطريقة يمكنك حفظ طلب الشبكة لتنزيل ملف صغير جدًا‪ .‬اآلن يتعين على المتصفح فقط تنزيل ملف ‪ CSS‬وملف خط الويب‪.‬‬