CSS Book

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‬‬
‫}‬
‫‪12 | P a g e‬‬

‫>‪<div> Style This Too! </div‬‬
‫يوضح هذا المثال عنصر نمط واحد يحدد قاعدة ‪ CSS‬التي يتم تطبيقها على جميع عناصر ‪ div.‬وبالتالي‪ ،‬يتم تطبيق خاصية ‪ CSS‬الموجودة‬
‫داخل عنصر النمط (خاصية الحدود) على كال عنصري ‪ div‬في المثال‪.‬‬
‫يمكنك تحديد أكثر من قاعدة ‪ CSS‬داخل نفس عنصر النمط‪ .‬هنا مثال‪:‬‬
‫>‪<style‬‬
‫{ ‪div‬‬
‫}‬
‫{ ‪span‬‬
‫;‪border: 1px solid blue‬‬
‫}‬
‫يحدد هذا المثال قاعدتين من قواعد ‪ CSS.‬يتم تطبيق قاعدة ‪ CSS‬األولى على جميع عناصر‪ ، div‬ويتم تطبيق قاعدة ‪ CSS‬الثانية على جميع‬
‫عناصر االمتداد‪.‬‬
‫يمكنك أيضًا تضمين أكثر من عنصر نمط في نفس صفحة ‪ HTML.‬هنا مثال‪:‬‬
‫>‪<style‬‬
‫{ ‪div‬‬
‫}‬
‫>‪<style‬‬
‫{ ‪span‬‬
‫}‬
‫يوضح هذا المثال قواعد ‪ CSS‬من المثال السابق المضمنة في عنصر النمط الخاص بها‪.‬‬
‫يمكن تضمين عناصر النمط إما داخل عنصر رأس ‪ HTML‬أو عنصر النص‪ .‬هنا مثال‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{ ‪div‬‬
‫‪13 | P a g e‬‬

‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<style‬‬
‫{ ‪span‬‬
‫}‬

‫>‪<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‬خارجي باستخدام عنصر االرتباط (داخل عنصر الرأس)‪ .‬فيما يلي مثال على ذلك‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>"‪<link rel="stylesheet" type="text/css" href="my-css-file.css‬‬
‫‪14 | P a g e‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<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‬‬
‫}‬
‫{ ‪span‬‬
‫}‬
‫الحظ أن ملف ‪ CSS‬ال يحتوي على عنصر النمط ‪ . style‬فهو ال يحتوي إال على قواعد ‪ (rules) CSS‬نفسها‪.‬‬
‫تعليمات ‪@IMPORT‬‬
‫يمكنك أيضًا استيراد ملف ‪ CSS‬خارجي من داخل عنصر النمط باستخدام تعليمات ‪ @import.‬إليك مثال ‪: CSS @import‬‬
‫>‪<style‬‬
‫;)'‪@import url('http://mydomain.com/my-website/my-css-file.css‬‬
‫سيتضمن هذا المثال ملف ‪ 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‬‬
‫}‬
‫جزء محدد ‪ 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‬‬
‫}‬
‫{ ‪p‬‬
‫}‬
‫{ ‪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‬‬

‫}‬
‫يستخدم هذا المثال ‪ #‬لإلشارة إلى أن المحدد هو محدد معرف‪ ،‬ثم معرف ‪ 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‬‬
‫}‬
‫يحدد هذا المثال لقاعدة ‪ 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://‬‬
‫}‬
‫سيحدد هذا المثال جميع عناصر ‪ 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‬‬
‫}‬
‫الحظ الجزء |= من المحدد في قاعدة ‪ CSS‬أعاله‪ .‬يشير هذا الجزء إلى أن قيمة السمة يجب أن تكون إما ‪ en‬أو تبدأ بـ ‪ en-‬في رمز اللغة‪.‬‬
‫‪ATTRIBUTE ENDS WITH‬‬
‫الً من كتابة ^= تكتب ‪ =$‬بين اسم السمة وقيمتها‪ .‬هنا مثال آخر‪:‬‬
‫يمكنك أيضًا تحديد عناصر ‪ HTML‬بنا ًءّ على ما تنتهي به قيمة السمة‪ .‬بد ّ‬
‫>‪<a href="./example.html"></a‬‬
‫>‪<style‬‬
‫{ ]"‪[href$=".png‬‬
‫}‬
‫يحدد هذا المثال لقاعدة ‪ CSS‬جميع عناصر ‪ HTML‬التي تحتوي على سمة ‪ href‬والتي تنتهي قيمتها بـ‪.png.‬‬
‫‪ATTRIBUTE CONTAINS‬‬
‫‪21 | P a g e‬‬
‫يتم استخدام سمة ‪ CSS‬التي تحتوي على محدد لتحديد جميع عناصر ‪ HTML‬ذات سمة معينة تحتوي على السلسلة الفرعية المحددة‪ .‬فيما يلي‬
‫سمة ‪ CSS‬تحتوي على مثال محدد‪:‬‬
‫{ ]"‪[href*="google.com‬‬
‫}‬
‫يحدد هذا المثال لقاعدة ‪ 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‬‬
‫}‬
‫تحدد قاعدة ‪ CSS‬هذه حجم الخط لكل من عناصر ‪ div‬و‪p.‬‬
‫الحظ كيف يحتوي المثال على محددين ‪ div‬و ‪ p‬مفصولين بفاصلة‬
‫الفاصلة هي محدد مجموعة‪ ،‬مما يعني أنه يتم تطبيق قاعدة ‪ CSS‬على جميع العناصر المطابقة لواحد (أو أكثر) من المحددات المجمعة معًا‪.‬‬
‫محدد العناصر األبناء ‪CHILD SELECTOR‬‬
‫يتم استخدام محدد ‪ CSS‬الفرعي لتحديد جميع العناصر التي تعتبر أبناء مباشرين لعنصر آخر‪ .‬فيما يلي مثال لمحدد ‪ CSS‬الفرعي‪:‬‬
‫{ ‪li>a‬‬
‫}‬
‫يحدد هذا المثال جميع العناصر التي هي عناصر فرعية من عناصر ‪ 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‬‬
‫}‬
‫يحدد هذا المثال فقط العناصر ‪ a‬التي هي أبناء لعناصر ‪ li‬والتي هي أيضًا عناصر أبناء ل ‪ ol‬وبالتالي‪ ،‬ال يتم تطبيق قاعدة ‪ CSS‬على العناصر‬
‫المتداخلة داخل قائمة غير مرتبة ‪. ul‬‬
‫محدد السل يل او العنصر الحفيد ‪DESCENDANT SELECTOR‬‬
‫يتم استخدام محدد ‪ CSS‬المنحدر لتحديد العناصر المنحدرة من عناصر أخرى‪ .‬ال يلزم أن تكون العناصر المحددة أبناء مباشرين للسلف المحدد‪.‬‬
‫يجب فقط أن يكونوا متداخلين داخل السلف في مكان ما‪ .‬هذه هي الطريقة التي تختلف بها المحددات السليلة عن المحددات الفرعية‪ .‬انظر إلى‬
‫‪HTML‬هذا‪:‬‬
‫‪23 | P a g e‬‬
‫يمكنك تحديد جميع العناصر المتداخلة داخل عنصر ‪ ol‬باستخدام قاعدة ‪ CSS‬هذه‪:‬‬
‫{ ‪ol a‬‬
‫}‬
‫يتم وضع عالمة على المحدد السليل عبر حرف المسافة‪ .‬الحظ المسافة بين ‪ 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‬‬
‫}‬
‫تحدد قاعدة ‪ 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‬‬
‫>‪</div‬‬
‫>‪<style‬‬
‫{ )‪p:nth-child(2n‬‬
‫;‪background-color: #ffff00‬‬
‫}‬
‫في هذا المثال‪ ،‬تحدد قاعدة ‪ 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‬‬
‫}‬
‫{ ‪p:last-of-type‬‬
‫}‬
‫يحتوي هذا المثال على قاعدتين من قواعد ‪ 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‬‬
‫}‬
‫تحدد قاعدة ‪ 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‬‬
‫}‬
‫قبل اإلصدار ‪ 3.0‬من‪ ، CSS‬كان المعيار عبارة عن نقطتين مفردتين‪ ،‬كما يلي‪:‬‬
‫{ ‪p:first-letter‬‬
‫}‬
‫للتوافق مع اإلصدارات السابقة‪ ،‬ال تزال عالمة النقطتين المفردة تعمل في معظم المتصفحات‪ ،‬ولكن ننصحك باستخدام عالمة النقطتين المزدوجتين‪.‬‬
‫هناك العديد من العناصر الزائفة المختلفة التي يمكنك استخدامها‪ .‬يتم تناول عناصر ‪ CSS‬الزائفة في األقسام التالية‪.‬‬
‫‪::FIRST-LETTER‬‬
‫يمكن استخدام العنصر الزائف ‪ :first-letter‬لتحديد الحرف األول من عناصر ‪HTML.‬على سبيل المثال‪ ،‬لتحديد الحرف األول من جميع‬
‫عناصر‪ ، p‬عليك أن تكتب‪:‬‬
‫{ ‪p::first-letter‬‬
‫}‬
‫يقوم هذا المثال بتعيين الحرف األول داخل جميع عناصر ‪ p‬إلى حجم الخط ‪ 20‬بكسل‪.‬‬
‫‪::FIRST-LINE‬‬
‫كما هو الحال مع‪ ،:first-letter‬يمكنك تحديد السطر األول من عنصر‪ ، HTML‬وتصميمه بشكل مختلف‪ .‬السطر األول ليس الجملة األولى‪.‬‬
‫وهو السطر األفقي األول من النص‪ ،‬بغض النظر عما إذا كان يشكل جملة كاملة أو أقل‪.‬‬
‫فيما يلي مثال على عنصر زائف في السطر األول‪:‬‬
‫{ ‪p::first-line‬‬
‫‪31 | P a g e‬‬
‫}‬
‫يقوم هذا المثال بتعيين السطر األول لجميع عناصر ‪ 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‬‬
‫}‬
‫يقوم هذا المثال بإدراج المحتوى المحدد في خاصية ‪ 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‬‬
‫}‬
‫في هذا المثال‪ ،‬يحتوي عنصر ‪ div‬على خاصية عائلة الخطوط المعينة على ‪. Arial‬‬
‫يتم توريث خاصية ‪ CSS‬هذه من للعنصر ‪ p‬المتداخل‪ ،‬لذلك سيتم أيضًا تعيين عائلة خطوطه الى ‪Arial‬‬
‫طا من أسالف بعيدين أيضًا‪ ،‬وليس فقط من آبائهم‪ .‬انظر إلى هذا المثال‪:‬‬
‫يمكن لعناصر ‪ HTML‬أن ترث أنما ً‬
‫>‪<body‬‬
‫>‪<div‬‬
‫>‪<p‬‬
‫‪This text inherits the font-size of the parent div element.‬‬
‫>‪</p‬‬
‫>‪</div‬‬
‫>‪<style‬‬
‫{ ‪body‬‬
‫}‬
‫>‪</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‬‬
‫}‬
‫{ ‪p‬‬
‫}‬
‫{ ‪.logo‬‬
‫;‪font-family: Helvetica‬‬
‫‪font-size‬‬ ‫;‪: 20px‬‬
‫}‬
‫>‪</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-size: 16px !important‬‬
‫}‬
‫{ ‪.specialText‬‬
‫‪36 | P a g e‬‬
‫}‬
‫>"‪<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‬‬
‫‪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‬‬
‫ويتم تحديد كل جزء من هذه األجزاء عند تعيين خاصية الحدود‪ ،‬مفصولة بمسافة‪ .‬هنا مثال‪:‬‬
‫;‪border : 1px solid #000000‬‬
‫}‬
‫القيمة األولى هي ‪px 1‬وهو عرض الحدود‪ .‬تقوم هذه القيمة بتعيين الحد حول عنصر ‪ HTML‬بعرض ‪ 1‬بكسل‪ .‬يتم تحديد عروض الحدود‬
‫باستخدام أي من وحدات ‪ CSS‬الصالحة‪.‬‬
‫طا (غير متقطع‪ ،‬بدون تأثير ثالثي األبعاد وما‬ ‫القيمة الثانية صلبة وهي نمط الحدود‪ .‬تقوم هذه القيمة بتعيين الحدود لتكون ثابتة‪ ،‬مما يعني خ ً‬
‫طا بسي ً‬
‫إلى ذلك)‪ .‬هناك العديد من األساليب التي يمكنك االختيار من بينها‪ .‬سيتم تغطية هذه في وقت الحق‪.‬‬
‫القيمة الثالثة هي ‪ 000000#‬وهو لون الحدود‪ .‬تقوم هذه القيمة بتعيين لون الحدود إلى اللون األسود‪ .‬يتم تحديد ألوان الحدود باستخدام تنسيقات‬
‫ألوان‪CSS.‬‬
‫‪BORDER-WIDTH‬‬
‫يمكن استخدام خاصية ‪ border-width CSS‬لتعيين عرض الحدود حول عنصر ‪ HTML.‬يتم تحديد قيم خاصية ‪Border-width‬‬
‫‪CSS‬باستخدام أي من وحدات ‪ CSS‬الصالحة‪ .‬هنا مثال‪:‬‬
‫;‪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‬هذه تقوم فقط بتكوين جزء واحد من الحد (الحد العلوي‪ ،‬أو األيسر‪ ،‬أو السفلي‪ ،‬أو األيمن)‪ .‬يتم تكوين‬
‫هذه الخصائص بنفس الطريقة‪ .‬هنا مثال‪:‬‬
‫;‪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‬باستثناء هذه الحدود األخيرة يتم تعيين‬
‫الخصائص فقط على جزء من الحدود (أعلى أو يمين أو أسفل أو يسار‪).‬‬
‫;‪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‬تنقذنا من هذا البؤس‪.‬‬
‫فيما يلي مثال لنصف القطر الحدودي‪:‬‬
‫‪border‬‬ ‫;‪: 1px solid #cccccc‬‬
‫;‪border-radius : 10px‬‬
‫‪padding‬‬ ‫;‪: 10px‬‬
‫}‬
‫إليك كيف يبدو عنصر ‪ div‬مع أنماط ‪ CSS‬المطبقة‪:‬‬
‫كما ترون‪ ،‬أصبح عنصر ‪ div‬اآلن ذو زوايا مستديرة‪ .‬نصف قطر االستدارة هو ‪ 10‬بكسل ألنني قمت بتعيين ‪ 10‬بكسل كنصف قطر (قيمة) في‬
‫إعالن خاصية ‪ CSS‬لنصف القطر الحدودي‪.‬‬
‫تعمل الخاصية ‪ border-radius‬في ‪ CSS‬أيضًا مع ألوان الخلفية‪ ،‬حتى لو لم يكن لعنصر ‪ HTML‬أي حدود‪ .‬فيما يلي مثال لنصف قطر‬
‫الحدود ولون الخلفية‪:‬‬
‫‪50 | P a g e‬‬
‫;‪border-radius : 20px‬‬
‫‪padding‬‬ ‫;‪: 10px‬‬
‫}‬
‫وإليك ما يبدو عليه نصف قطر الحدود ولون الخلفية عند العرض‪:‬‬
‫يمكنك تحديد نصف قطر التقريب عموديًا وأفقيًا‪ .‬بهذه الطريقة يمكنك جعل زوايا الصندوق بيضاوية الشكل ً‬
‫بدالّ من الدائرية‪ .‬هنا مثال‪:‬‬
‫;‪border-radius : 20px / 10px‬‬
‫‪padding‬‬ ‫;‪: 20px‬‬
‫}‬
‫إليك ما تبدو عليه الحدود عند عرضها‪:‬‬
‫كما ترون‪ ،‬يكون التقريب أطول أفقيًا (‪ 20‬بكسل) منه عموديًا (‪ 10‬بكسل)‪.‬‬
‫يمكنك أيضًا ضبط تقريب كل زاوية على حدة عن طريق تحديد أربع قيم لخاصية ‪ Border-radius‬في ‪ CSS.‬هنا مثال‪:‬‬
‫;‪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‬‬
‫إن بناء الجملة الخاص بتعيين نصف قطر التقريب للزاوية هو نفسه بالنسبة لنصف قطر الحدود‪ .‬وفيما يلي بعض األمثلة على ذلك‪:‬‬
‫‪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‬‬
‫}‬
‫>"‪<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‬‬
‫}‬
‫يستخدم هذا المثال بكسل (بكسل) كوحدة لخاصية حجم الخط‪ .‬وهذا يعني أن ‪ 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‬‬
‫}‬
‫تقوم قاعدة ‪ 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‬‬
‫}‬
‫‪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‬‬
‫}‬
‫{ ‪table.withSpace‬‬
‫;‪border-spacing : 10px‬‬
‫}‬
‫{ ‪table.withSpace td‬‬
‫}‬
‫إليك كيف سيبدو الجدوالن إذا تم تقديمهما مع تباعد الحدود أعاله باإلضافة إلى حد على الجدول وخاليا الجدول‪:‬‬
‫‪77 | P a g e‬‬
‫الحظ التباعد المختلف بين خاليا الجدول‪.‬‬
‫‪BORDER-COLLAPSE‬‬
‫إذا نظرت إلى الجدولين الموضحين في القسم السابق (حول تباعد الحدود) ستالحظ وجود حدين بين خاليا الجدول‪ .‬وجود حد واحد حول كل خلية‬
‫في الجدول يعني أنه سيكون هناك حدين بين خاليا الجدول‪ .‬يمكن لخاصية ‪ border-collapse‬التحكم في رسم حد أو حدين بين خاليا الجدول‪.‬‬
‫يمكن أن تأخذ خاصية ‪ border-collapse CSS‬القيم التالية‪:‬‬
‫‪‬‬ ‫‪separate‬‬
‫‪‬‬ ‫‪collapse‬‬
‫القيمة المنفصلة هي القيمة االفتراضية‪ .‬تعني هذه القيمة أنه يجب رسم الحدود الموجودة على خاليا الجدول كما لو كانت خاليا الجدول عبارة عن‬
‫عناصر ‪ HTML‬منفصلة‪.‬‬
‫تعني قيمة االنهيار أنه يجب طي الحدود بين خاليا الجدول ‪.‬وبالتالي‪ ،‬سيتم رسم حد واحد فقط حتى لو كانت كافة خاليا الجدول لها حدود ‪.‬فيما يلي‬
‫مثاالن النهيار الحدود‪:‬‬
‫‪border-spacing‬‬ ‫;‪: 10px‬‬
‫‪border-collapse : separate‬‬
‫}‬
‫}‬
‫‪border-spacing‬‬ ‫;‪: 10px‬‬
‫‪border-collapse : separate‬‬
‫‪78 | P a g e‬‬
‫}‬
‫}‬
‫إليك ما يبدو عليه الجدوالن عند عرضهما باستخدام أنماط ‪ 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‬‬
‫}‬
‫تقوم قاعدة ‪ 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-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 {
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‬‬
‫}‬
‫{ ]'‪input[type='submit‬‬
‫;‪border : 1px solid #00ff00‬‬
‫}‬
‫يعين هذا المثال حدًا رماديًا حول حقول إدخال النص‪ ،‬وحدًا أخضر حول أزرار اإلرسال‪.‬‬
‫ستشرح األقسام التالية بمزيد من التفصيل كيفية تصميم حقول النماذج المختلفة‪.‬‬
‫‪TEXT FIELDS‬‬
‫الحقول النصية هي عناصر إدخال مع تعيين سمة النوع على النص‪ .‬إليك كيف يبدو ‪HTML‬‬
‫>"‪<input type="text‬‬
‫وإليك كيفية ظهور حقل النص عند عرضه في المتصفح (ال تعرض جميع المتصفحات الحقول النصية بنفس الطريقة)‪:‬‬
‫‪TEXT FIELD CSS SELEC TOR‬‬
‫لتحديد نمط جميع الحقول النصية (> "‪ )<input type="text‬تحتاج إلى استخدام مجموعة من محددات ‪ CSS‬للعناصر والسمات‪ .‬هنا‬
‫مثال‪:‬‬
‫‪/* set CSS properties here*/‬‬
‫}‬
‫‪TEXT FIELD BORDERS‬‬
‫من الممكن ضبط نمط الحدود لحقل النص‪ .‬يعين هذا المثال حدًا رماديًا حول جميع حقول النص‪:‬‬
83 | P a g e
input[type='text'] {
border : 3px solid #cccccc;
}
:‫إليك كيف يبدو ذلك عند تطبيقه على حقل نصي‬
TEXT FIELD BACKGROUND COLOR
:‫الً من لون الحدود والخلفية لحقل النص‬

ّ ‫ فيما يلي مثال يعين ك‬.‫يمكنك أيضًا تعيين لون الخلفية لحقل النص‬
border : 1px solid #cccccc;
background-color : #e0e0e0;
}
TEXT FIELD WIDTH AND HEIGHT
:‫ فيما يلي بعض األمثلة‬CSS. ‫يمكنك أيضًا تعيين العرض واالرتفاع لحقل النص باستخدام خصائص العرض واالرتفاع في‬
width: 50px;
height: 10px;
}
width: 100px;
height: 15px;
}
width: 150px;
height: 20px;
}
TEXT FIELD FONT

‫‪84 | P a g e‬‬
‫من الممكن ضبط عائلة الخط وحجم الخط المستخدم في حقل النص‪ .‬هنا مثال‪:‬‬
‫;‪font-family: Times‬‬
‫}‬
‫‪TEXT AREAS‬‬
‫يمكنك تصميم عنصر ‪ HTML‬الخاص بمنطقة النص بنفس الطريقة التي يمكنك بها استخدام حقل النص‪ .‬يمكنك تصميم الحدود ولون الخلفية‬
‫والعرض واالرتفاع كما يلي‪:‬‬
‫{ ‪textarea‬‬
‫;‪background-color: #eeeeee‬‬
‫‪width‬‬ ‫;‪: 400px‬‬
‫‪height‬‬ ‫;‪: 200px‬‬
‫}‬
‫‪RESIZE : NONE‬‬
‫افتراضيًا‪ ،‬يسمح المتصفح للمستخدم بتغيير حجم منطقة النص عن طريق السحب في الزاوية اليمنى السفلية من منطقة النص‪ .‬إلزالة مؤشر تغيير‬
‫الحجم هذا‪ ،‬يمكنك تعيين خاصية تغيير الحجم في ‪ CSS‬على ال شيء‪ ، none‬مثل هذا‪:‬‬
‫{ ‪textarea‬‬
‫;‪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‬‬
‫‪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‬‬
‫}‬
‫>‪<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‬‬
‫}‬
‫تقوم قاعدة ‪ 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‬‬
‫}‬
‫إليك ما ستبدو عليه الصور مع تطبيق األنماط المذكورة أعاله‪ .‬الصورة األولى توضح الحجم الطبيعي للصورة‪ .‬تم تكبير الصورتين التاليتين‬
‫وتصغيرهما‪.‬‬
‫‪90 | P a g e‬‬
‫‪KEEPING IMAGE ASPECT RATIO‬‬
‫قد يؤدي تغيير حجم الصور عن طريق ضبط العرض واالرتفاع إلى ظهور صور مشوهة‪ ،‬مما يعني احتمال فقدان نسبة العرض إلى االرتفاع بين‬
‫العرض واالرتفاع ‪.‬لتغيير حجم صورة مع الحفاظ على نسبة العرض إلى االرتفاع‪ ،‬قم بتعيين خاصية العرض أو االرتفاع في ‪ CSS‬فقط‪ .‬سيقوم‬
‫المتصفح بعد ذلك بحساب الجانب اآلخر (االرتفاع‪ ،‬إذا تم تعيين العرض‪ ،‬أو العرض‪ ،‬إذا تم تعيين االرتفاع) بنا ًّء على العرض أو االرتفاع المحدد‪،‬‬
‫بحيث يتم االحتفاظ بنسبة العرض إلى االرتفاع للصورة‪ .‬فيما يلي مثاالن يحددان العرض واالرتفاع فقط‪:‬‬
‫{ ‪img.scaledUp‬‬
‫}‬
‫{ ‪img.scaledDown‬‬
‫}‬
‫‪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‬لموضع الخلفية‪ ،‬يمكنك تعيين قيمة واحدة للموضع األفقي وقيمة واحدة للموضع الرأسي‪ .‬هنا مثال‪:‬‬
‫‪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‬بكسل‪:‬‬
‫;‪background-position : 100px 50px‬‬
‫}‬
‫يتم وضع الحافة اليسرى لصورة الخلفية على بعد ‪ 100‬بكسل على يمين الحافة اليسرى لعنصر ‪ HTML.‬يتم وضع الحافة العلوية لصورة الخلفية‬
‫على بعد ‪ 50‬بكسل من الحافة العلوية لعنصر‪HTML.‬‬
‫يمكنك أيضًا استخدام النسب المئوية لتحديد الموضع األفقي والرأسي‪ .‬عندما تفعل ذلك‪ ،‬سيقوم المتصفح بمحاذاة النقطة التي تمثل‪y% ، X%‬في‬
‫صورة الخلفية مع النقطة التي تمثل‪Y% ، X%‬في عنصر ‪ HTML.‬هنا مثال‪:‬‬
‫‪95 | P a g e‬‬
‫;‪background-position : 50% 50%‬‬
‫}‬
‫سيقوم هذا المثال بمحاذاة النقطة التي تمثل ‪ %50‬في صورة الخلفية أفقيًا وعموديًا‪ ،‬مع النقطة التي تمثل ‪ %50‬في عنصر ‪ HTML‬أفقيًا‬
‫وعموديًا‪ .‬إليك كيف يبدو ذلك عند تطبيقه على عنصر ‪div‬‬
‫والنتيجة هي صورة خلفية مركزية ألن المركز (‪ )%50 ،%50‬من صور الخلفية تتم محاذاته مع المركز (‪ )%50 ،%50‬لعنصر‪HTML.‬‬
‫يمكنك مزج القيم الرقمية الثابتة (مثل وحدات البكسل) مع قيم النسبة المئوية‪ .‬وهنا مثال على ذلك‪:‬‬
‫;‪background-position : 20px 50%‬‬
‫}‬
‫يمكنك أيضًا استخدام القيم السالبة في حالة رغبتك في نقل صورة الخلفية إلى يسار عنصر ‪ HTML‬أو أعلىه‪ .‬هنا مثال‪:‬‬
‫;‪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‬إذا كان العنصر يمكنه تمرير محتواه‪.‬‬
‫‪background-position‬‬ ‫;‪: 20px 20px‬‬
‫;‪background-attachment : fixed‬‬
‫}‬
‫هذا المثال سيجعل صورة الخلفية المرفقة بعنصر النص ثابتة داخل إطار عرض المتصفح‪ ،‬حتى لو قام المستخدم بالتمرير ألعلى أو ألسفل الصفحة‪.‬‬
‫‪BACKGROUND-SIZE‬‬
‫يتم استخدام خاصية حجم الخلفية في ‪ CSS‬لتحديد حجم صورة الخلفية التي تم تعيينها على عنصر ‪ HTML.‬فيما يلي مثال لحجم الخلفية‪:‬‬
‫‪background-size‬‬ ‫;‪: 200px 100px‬‬
‫}‬
‫يقوم هذا المثال بتعيين خاصية حجم الخلفية في ‪ CSS‬إلى ‪ 200‬بكسل ‪ 100‬بكسل‪ ،‬مما يعني عرض ‪ 200‬بكسل (الرقم األول) وارتفاع ‪100‬‬
‫بكسل (الرقم الثاني)‪.‬‬
‫يمكنك أيضًا استخدام النسب المئوية كعرض وارتفاع لصورة الخلفية‪ .‬هنا مثال‪:‬‬
‫‪97 | P a g e‬‬
‫‪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‬‬
‫}‬
‫>‪<div id="gradient1"></div‬‬
‫يستخدم المثال دالة )(‪ CSS Linear-gradient‬كقيمة لخاصية ‪ CSS‬لصورة الخلفية ‪.‬وهذا يجعل المتصفح يقوم بتلوين خلفية عنصر‬
‫‪HTML‬بتدرج خطي‪.‬‬
‫تأخذ الدالة الخطية المتدرجة () ثالث معلمات‪ .‬المعلمة األولى هي زاوية التدرج ‪.‬في المثال أعاله استخدمت ‪ 180‬درجة وهو ما يعني ‪180‬‬
‫درجة‪ .‬المعلمتان الثانية والثالثة هما األلوان 'من' و'إلى'‪ .‬في المثال أعاله‪ ،‬يتغير التدرج من اللون ‪( 666666#‬رمادي داكن) إلى ‪000000#‬‬
‫(أسود)‪.‬‬
‫فيما يلي مثال يتغير من األخضر إلى األزرق باستخدام زاوية ‪ 45‬درجة‪:‬‬
‫‪COLOR STOPS‬‬
‫تسمى معلمات اللون في وظيفة التدرج الخطي () 'توقفات اللون'‪ .‬تتكون محطة اللون من لون وموقع بالنسبة المئوية حيث يتم تطبيق اللون بالكامل‪.‬‬
‫ألق نظرة على مثال التدرج الخطي هذا‪:‬‬
‫>‪<style‬‬
‫;)‪background-image: linear-gradient(180deg, #00ff00 20%, #0000ff 80%‬‬
‫}‬
‫الحظ كيف أن اللونين لديهما اآلن نسبة مئوية بعدهما (‪ %20‬و‪ .)%80‬هذا يعني أن التدرج يبدأ بنسبة ‪ %20‬في المنطقة ذات اللون األخضر‪،‬‬
‫وينتهي بنسبة ‪% 80‬في المنطقة ذات اللون األزرق‪ .‬إليك كيف يبدو التدرج الخطي عند تطبيقه على عنصر‪HTML:‬‬
‫‪100 | P a g e‬‬
‫الحظ كيف يتم تلوين المنطقة قبل بدء التدرج باللون األول‪ ،‬والمنطقة بعد انتهاء التدرج يتم تلوينها باللون الثاني‪.‬‬
‫يمكنك استخدام أكثر من توقفين لونيين‪ .‬فيما يلي مثال للتدرج الخطي الذي يستخدم ‪ 3‬توقفات لونية‪:‬‬
‫>‪<style‬‬
‫‪background-image: linear-gradient(45deg, #00ff00 20%, #ff0000 50%,‬‬
‫;)‪#0000ff 80%‬‬
‫}‬
‫يحتوي هذا المثال على لون أحمر في منتصف التدرج (بنسبة ‪ .)%50‬إليك ما يبدو عليه التدرج الخطي عند تطبيقه على عنصر‪HTML:‬‬
‫‪RADIAL GRADIENTS‬‬
‫تعمل التدرجات القطرية على تمديد تغير لونها من النقطة المركزية إلى الخارج بطريقة دائرية أو إهليلجية‪ .‬هنا مثال مرئي‪:‬‬
‫يتم تعريف التدرجات الشعاعية باستخدام وظيفة ‪ radial-gradient() CSS.‬إليك الكود الذي أنشأ المثال أعاله‪:‬‬
‫>‪<style‬‬
‫‪background-image: radial-gradient(ellipse farthest-corner at 50% 50%‬‬
‫;)‪, #00FFFF 0%, #0000FF 95%‬‬
‫}‬
‫‪101 | P a g e‬‬
‫‪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‬‬
‫;)‪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>
<style>
#gradient8 {
background-image: radial-gradient(circle 100px at 200px 50px, #FF0000 0%,
#0000FF 100%);
height: 100px;
}
</style>
<style>
#gradient9 {
background-image: radial-gradient(circle closest-side at 200px 50px,
#FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
103 | P a g e
<style>
#gradient10 {
background-image: radial-gradient(circle closest-corner at 200px 50px,
#FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<style>
#gradient11 {
background-image: radial-gradient(ellipse, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<style>
#gradient12 {
background-image: radial-gradient(ellipse 100px 50px, #FF0000 0%, #0000FF
100%);
height: 100px;
}
</style>
<style>
#gradient13 {
104 | P a g e
background-image: radial-gradient(ellipse 100px 50px at 200px 50px,

#FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<style>
#gradient14 {
background-image: radial-gradient(ellipse farthest-side at 200px 50px,
#FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<style>
#gradient15 {
background-image: radial-gradient(ellipse farthest-corner at 200px 50px,
#FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
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‬‬
‫>"‪<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‬‬
‫}‬
‫‪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="float: left; border: 2px solid red;">This is box 1</div‬‬

‫>‪<div style="border: 2px solid green;">This is box 2</div‬‬

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

‫>‪<div style="float: left; border: 2px solid green;">This is box 2</div‬‬

‫‪114 | P a g e‬‬
‫>‪</div‬‬
‫اآلن يطفو عنصر ‪ div‬المتداخل األول والثاني إلى اليسار داخل العنصر األصلي‪ .‬يلتف النص بشكل جيد حول العنصرين العائمين‪.‬‬
‫‪FLOAT : RIGHT‬‬
‫الً من ذلك ‪.‬نقوم بذلك عن طريق تعيين خاصية ‪ float CSS‬الخاصة بها إلى‬
‫اآلن دعونا نحاول جعل القسم المتداخل الثاني يطفو إلى اليمين بد ّ‬
‫الً من اليسار‪ .‬هنا هو الرمز‪:‬‬
‫اليمين بد ّ‬

‫>‪<div style="float: right; border: 2px solid green;">This is box 2</div‬‬

‫>‪</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="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‬‬

‫>‪</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.‬‬
‫}‬
‫>‪<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‬‬
‫}‬
‫>"‪<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‬‬
‫}‬
‫{ ‪#theInnerDiv‬‬
‫;‪position: absolute‬‬
‫‪top‬‬ ‫;‪: 0px‬‬
‫‪right‬‬ ‫;‪: 0px‬‬
‫;‪background-color: #ccffcc‬‬
‫‪border‬‬ ‫;‪: 1px solid #99cc99‬‬
‫}‬
‫>"‪<div id="theOuterDiv‬‬
‫‪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‬وتطبيقه‪.‬‬

‫‪/* 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‬‬
‫‪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‬‬
‫}‬
‫تتطابق استعالمات الوسائط الثالثة هذه مع عروض مختلفة لنافذة المتصفح ‪.‬يتطابق استعالم الوسائط األول مع جميع عروض المتصفح التي تقل عن‬
‫أو تساوي ‪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‬‬
‫‪src: local('Roboto Bold'),‬‬
‫‪local('Roboto-Bold'),‬‬
‫‪url(http://themes.googleusercontent.com/static/fonts/roboto/v11/d-‬‬
‫)‪6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff‬‬
‫}‬
‫{ ‪@font-face‬‬
‫;'‪font-family: 'Roboto‬‬
‫;‪font-style: italic‬‬
‫‪src: local('Roboto Italic'),‬‬
‫‪local('Roboto-Italic'),‬‬
‫‪url(http://themes.googleusercontent.com/static/fonts/roboto/v11/1pO9eUAp8pSF8‬‬
‫)‪VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff‬‬
‫}‬
‫يمكنك اآلن استخدام أنماط الخطوط الثالثة هذه في صفحة ‪ HTML‬الخاصة بك عن طريق تعيين نمط الخط ووزن الخط المستخدم في تعريفات‬
‫خطوط الويب‪ .‬على سبيل المثال‪ ،‬الستخدام النسخة المائلة من الخط‪ ،‬يمكنك كتابة هذا‪:‬‬
‫{ ‪p‬‬
‫;‪font-family: Roboto‬‬
‫;‪font-style : italic‬‬
‫}‬
‫كما ترون‪ ،‬تتطابق هذه اإلعدادات مع إعدادات مجموعة الخطوط ونمط الخط ووزن الخط المعلنة لإلصدار المائل من الخط‪ .‬إليك كيفية ظهور النص‬
‫عند عرضه باستخدام اإلصدار المائل لخط الويب‪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‬وملف خط الويب‪.‬‬

CSS Book

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Book

Uploaded by

Copyright:

Available Formats

CSS FUNDAMENTALS

Brief introduction into essentials of CSS

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

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

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

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

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

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

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

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

‫‪USING CSS IN HTML‬‬

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

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

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

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

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

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

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

‫;‪border: 1px solid black‬‬

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

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

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

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

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

‫‪CSS PROPERTIES AND CSS RULES‬‬

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

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

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

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

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

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

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

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

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

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

‫;‪border: 1px solid blue‬‬

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

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

‫‪ATTRIBUTE BEGINS WITH‬‬

‫‪ATTRIBUTE BEGINS WITH LANGUAGE CODE‬‬

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

‫‪ATTRIBUTE ENDS WITH‬‬

‫‪ATTRIBUTE CONTAINS WORD‬‬

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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