CSS

Elzero Web School ‫ملخص كورس الـ ـ‬

“CSS & CSS3”

A Lot of Thanks To Osama Mohamed

Created By: Ahmed Adel
 Contents
4 ............................................................................................................................................... ‫المقدمة‬

5.............................................................................................................................. Syntax ‫طريقة الكتابة‬

6 .................................................................................................. Name Conventions Rules, Comment

7.............................................................................................................................. Background ‫الخلفية‬

9 ....................................................................................................... Padding, Margin, Border, Outline

11................................................................................................... Display “block, inline-block, inline”

12............................................................................................................................. Element Visibility

13................................................................................................ Grouping Multiple Selectors, Nesting

14.............................................................................................................. Dimensions 'Width, Height'

15.......................................................................................................................................... Overflow

16.......................................................................................................................................... Text ‫النص‬

20 ........................................................................................................................... Inheritance ‫التوريث‬

21......................................................................................................................................... Font ‫الخط‬

23....................................................................................................................... CSS Units ‫وحداد القياس‬

‫ر‬
24 .................................................................................................................. Mouse Cursor‫مؤش الماوس‬

25................................................................................................................................. Float and Clear

26 ............................................................................................................................... CSS Calculation

27................................................................................................................................. Opacity ‫الشفافية‬

28 ............................................................................................................................. Position, Z-index

30........................................................................................................................ “Lists, Table” Styling

31............................................................................................................... Pseudo “Classes, Element”

32................................................................................................................................ Vendor Prefixes

33.................................................................................................................................. Border Radius

34..................................................................................................................................... Box Shadow

35............................................................................................................... The Box Model, Box Sizing

36........................................................................................................................................ Transition

37 ...................................................................................................................... Important Declaration

38................................................................................................................... Vertical Margin Collapse

39................................................................................................................................... CSS Variables

40 ............................................................................................................................. Flex Box ‘Parent’

43................................................................................................................................. Flex Box ‘Child’

46 ............................................................................................................................................. Filters

47...................................................................................................................... Gradients ‫تدرجات االلوان‬

48 ........................................................................................................... Pointer Events & Caret Color

49 .................................................................................................................................. Grid “Parent”

52....................................................................................................................................... Grid ‘Child’

54................................................................................................................................ Transform “2D”

56........................................................................................................................ Transform Origin 2D

57 ................................................................................................................................... Transform 3D

60 ....................................................................................................................................... Animation

63................................................................................................................................... CSS Selectors

66 ............................................................................................... Media Queries & Responsive Designs

67............................................................................................................................ CSS Global Values

68 ................................................................................................................................ Important links

3
 ‫المقدمة‬
‫معلومات عن لغة ‪- :CSS‬‬

‫‪ CSS‬هي اختصار لـــ ‪ , Cascading Style Sheet‬وهي اللغة المسؤولة عن تنسيقات صفحة‬
‫الويب وعن الطريقة التي سيعرض بها كود الــ ‪ HTML‬في الصفحة‪.‬‬

‫نصائح أثناء تعلم ‪- :CSS‬‬

‫‪ - 1‬أنشاء مجلد خاص لكل عناصر الموقع مثل الملفات أو الصور‪.‬‬

‫‪ Google it - 2‬ابحث قبل ان تسأل‪.‬‬
‫‪ - 3‬مصادر مهمة للمعلومات ‪ W3Schools‬و ‪.MDN‬‬

‫كيف تعمل ‪ CSS‬مع ‪- :HTML‬‬

‫يتم ربط صفحة ‪ HTML‬بملف ‪ CSS‬بوضع واختيار مسار ملف ‪ CSS‬في ‪.href‬‬

‫مثال‪:‬‬

‫>‪<link rel="stylesheet" href="CSS/main.css"><!-- External Style --‬‬

‫>‪<style>p {color:blue;}</style><!-- Internal Style --‬‬

‫إضافة التنسيق داخل عنصر ‪.HTML‬‬

‫>‪<p style="color: red;">Lorem, ipsum.</p><!-- Inline Style --‬‬

‫‪4‬‬
 ‫طريقة الكتابة ‪Syntax‬‬

‫‪ :Selector‬هو الجزء الخاص باستدعاء عنصر ‪.HTML‬‬

‫‪ :Property‬خاصية يتم اضافتها للعنصر‪,‬‬

‫مثل "اللون‪ ,‬الحجم"‪.‬‬

‫‪ :Value‬القيمة التي يتم تحديدها‬

‫للخاصية مثال “اللون‪ :‬أزرق"‪.‬‬

‫} { ‪ :‬هي االقواس التي يكتب بداخلها الخصائص والقيم‪ ,‬وتسمي ‪.Curly Braces‬‬

‫‪.‬‬

‫استدعاء باسم العنصر‪.‬‬

‫‪p {color: red;font-size: 14px}/* Select by element name */‬‬

‫استدعاء باستخدام ‪,Class‬‬

‫ملحوظة! ال يجب البدء باألرقام عند تسمية الـ‪.Class‬‬

‫‪.test {color: gold} /* Select by Class */‬‬

‫استدعاء باستخدام ‪.ID‬‬

‫‪#test {color: blue} /*Select by ID */‬‬

‫‪5‬‬
 Name Conventions Rules, Comment

:‫ اخر كالتالي‬identifier ‫ او أي‬Class‫شروط تسمية الـ‬

."class: $test" ، "class: 1test"‫ تجنب بدأ التسمية بأرقام او رموز محجوزة مثال‬- 1
."class: _test" , "class: -test" ‫ يمكن البدء ببعض الرموز مثل‬- 2

.‫ لكن ال يختلف في الوظيفة‬HTML‫ تختلف طريقة كتابة التعليق عن الـ‬:‫التعليق‬

div {
background-color: red; /* This is comment */
}

:‫يمكن استخدام التعليق في تهميش الكود‬

/*
div {
background-color: red;
}
*/

:‫مثال اخر‬

div {
/* background-color: red;*/
background-color: blue;
}

6
 Background ‫الخلفية‬

- :Background Color ‫لون الخلفية‬

.W3School ،‫ ويمكن تحديد مدي شفافية اللون‬،‫تحديد لون خلفية العنصر بطرق مختلفة‬

div {
background-color: red; /* Color Name */
background-color: rgba(18, 50, 192, 0.5); /* Red Green Blue Alpha Channel*/
background-color: #1231bb; /* Hex Code Color */
}

- :Background image ‫صورة الخلفية‬

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

div {
background-image: url(/img/233231.jpg);
background: no-repeat; /* Repeat is default value, repeat-x, repeat-y */
}

7
 - :Background Attachment

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

div {
background-attachment: fixed; /* default value: scroll */
}

.‫ التحكم في مكان عرض الصورة‬:Background Position

div {
background-position: left center;
background-position: 10px 30px;
background-position: 10% 40%;
}

- :Background Size

‫يسمح بالتحكم في حجم‬

.‫الصورة وطريقة وعرضها‬

div {
background-size: cover; /* default value: auto */
background-size: contain;
}

8
 Padding, Margin, Border, Outline

‫ الهوامش الداخلية تعتبر جزء‬:Padding

‫ تحديد لون‬,‫من عرض وطول العنصر‬
‫خلفية للعنصر سيتم تحديده للهوامش‬
.‫أيضا‬

‫ التحكم في الهوامش الخارجية‬:Margin

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

div {
padding: 10px; /* top, right, bottom, left 'px, %'*/
margin: auto; /* top, right, bottom, left 'px, %' can use negative num*/
}

.‫ يقوم بالتحكم في شكل وحجم ولون الحواف الخارجية للعنصر‬:Border

div {
border-width: 2px; /* top, right, bottom, left */
border-color: red green; /* top, right, bottom, left */
border-style: solid dashed; /* top, right, bottom, left */
border: 2px solid red; /* Shorthand code */
}

9
 ‫ ويمكن تجنب ذلك باستخدا م‬،‫" مساحتهم تضاف لمساحة العنصر‬padding, border“ ‫ملحوظة! الـ‬

*{box-sizing: border-box}

‫ يقوم بإضافة خط خارجي للعنصر لكن ال‬:Outline

.‫يحسب من ضمن مساحه العنصر‬

div {
outline-width: 10px; /* one value for all declaration */
outline-color: blue; /* one value for all declaration */
outline-style: dashed; /* one value for all declaration */

outline: 10px dashed blue; /* Shorthand code*/

}

10
 Display “block, inline-block, inline”

‫ التحكم في‬:Display
.‫طريقة عرض العنصر‬

/*

Block
- Take Full width if there no width set
- Add Line Break
- Respect Padding, Margin, Width, Height

Inline
- Dose not Respect Width, Height
- Respect Padding and Margin [Just left + right]
- Dose not Add Line Break
- Allow Element Before and After it

Inline-Block
- Allow Element Before and After it
- Respect Padding, Margin, Width, Height

*/

:‫مثال‬

div {
background-color: #eee;
border: 3px solid #333;
width: 200px;
padding: 15px;
margin: 5px;
display: block
}

11
 ‫‪Element Visibility‬‬

‫طرق إخفاء العنصر‪- :‬‬

‫باستخدام ’‪ :‘Display: none‬سيتم إخفاء العنصر نهائيا ولن يكون له مكان محجوز‬
‫داخل الصفحة‪.‬‬

‫{ ‪.div2‬‬
‫;‪display: none‬‬
‫}‬

‫باستخدام ’‪ : ‘visibility: hidden‬سيتم إخفاء العنصر لكن سيكون له مكان محجوز‬

‫داخل الصفحة‪.‬‬

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

‫‪12‬‬
 Grouping Multiple Selectors, Nesting

‫ طريقة تستخدم لربط العناصر المتشابهة في الخواص ببعضها وكتابة‬:Selector Grouping

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

.div1, .div2, .div3 {

width: 100px;
background-color: #eaeaea;
border: 2px solid #333;
padding: 10px;
margin: 10px;
}

.div2 {
color: red;
}

‫ استدعاء عنصر محدد من داخل عنصر اخر او من بين‬:Nesting

.‫مجموعة عناصر متشابهة‬

<div>
<p>Paragraph Inside Div</p>
<p class="test">Paragraph Inside Div with Class</p>
</div>
<p class="test">Paragraph Outside Div</p>

div .test {
color: red;
}

13
 ‫'‪Dimensions 'Width, Height‬‬

‫‪ :Width - Height‬تحديد الطول والعرض للعنصر‪ ,‬تفاصيل ا كثر‪.‬‬

‫{ ‪div‬‬
‫;‪width: 70px‬‬
‫;‪height: 70px‬‬
‫}‬

‫’‪ :Min ‘Width Height‬تحديد الحد األدنى لمساحة العنصر‪ ,‬وتتمدد مساحة العنصر مع مساحة المحتوي‪.‬‬

‫{ ‪div‬‬
‫;‪min-width: 150px‬‬
‫;‪min-height: 100px‬‬
‫}‬

‫’‪ :Max ‘Width Height‬تحديد الحد األقصى لمساحة العنصر‪ ,‬ال تتمدد مساحة العنصر بازدياد‬
‫مساحة المحتوي‪.‬‬

‫{ ‪div‬‬
‫;‪max-width: 100px‬‬
‫;‪max-height: 100px‬‬
‫}‬

‫مالحوظة! اذا كان العنصر ‪ block‬ستتغير مساحة العنصر وتتمدد مع مساحة المحتوي‪.‬‬

‫}‪div {width: fit-content‬‬

‫‪14‬‬
 ‫‪Overflow‬‬

‫‪ :Overflow‬يتحكم في الجزء الذي تجاوز العنصر‪,‬‬

‫يمكن إخفاء هذا الجزء او إظهاره بطرق مختلفة‪.‬‬

‫‪ :Hidden‬يقوم ب إخفاء المحتوي الذي تجاوز العنصر‪.‬‬

‫}‪div { overflow: hidden; /* Default: visible */‬‬

‫‪ :Scroll‬يقوم بإضافة ‪ Scroll-bar‬حتي اذا كان المحتوي لم يتجاوز العنصر‪.‬‬

‫} ‪div { overflow: scroll‬‬

‫‪ :Auto‬هو االختيار األفضل ألنه يضيف ‪ Scroll-bar‬فقط في حالة اذا تجاوز‬

‫المحتوي العنصر‪.‬‬

‫}‪div { overflow: auto‬‬

‫ملحوظة! يمكن اختيار اتجاه محدد والتحكم به‪.‬‬

‫}‪div { overflow-x: hidden; overflow-y: auto‬‬

‫‪15‬‬
 Text ‫النص‬

.‫ يقوم بتحديد لون النصوص فقط‬:Color

div { color: #e03e3e; /* Color: 'Color name' or 'Hex color' or 'RGBA' */ }

.‫ إضافة ظل للنص والتحكم فيه‬:Shadow

/* Text-Shadow: H-shadow V-shadow Blur Color */

div { text-shadow: -6px 4px 6px rgba(62, 73, 224, 0.8) }

.‫ تحديد اتجاه محاذة النص أفقيا‬:Text Align

div { text-align: center } /* left Center Right and more */

‫ المزيد‬.‫ التحكم في المحاذة العمودية‬:Vertical align

div img { vertical-align: middle }

16
 .‫ تحديد اتجاه النص‬:Direction

div { direction: rtl } /* rtl => right to left or ltr => left to right */

.‫ التحكم في شكل وزخرفة النص‬:Text Decoration

.one { text-decoration: none } .two { text-decoration: underline }

.three { text-decoration: overline } .four { text-decoration: line-through }

‫ تحويل حجم حروف النص وطريقة‬:Text Transform

.‫عرضها‬

.one { text-transform: uppercase } .two { text-transform: lowercase }

.three { text-transform: capitalize }

‫ يمكن تزويدها‬,‫ المسافة بين الحروف‬:Letter Spacing

.‫او أنقصها‬

div { letter-spacing: 5px } /* You can use negative value EX: '-2px' */

17
 .‫ إضافة مسافة قبل النص‬:Text Indent

div { text-indent: 130px } /* You can use negative value */

.‫ يستخدم لتحديد المسافة بين السطور‬:Line Height

div { line-height: 1.6 } /* Default: normal , px , em , % , num EX: 1.5 */

‫ يستخدم للتحكم في المسافة بين‬:Word Spacing

.‫الكلمات‬

div { word-spacing: 10px } /* Default: normal , px , rem , % , ch */

‫ التحكم في المسافات بين‬:White Space

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

div { white-space: nowrap }

18
 .‫ التحكم في طريقة فصل الكلمة في حالة تخطيها العنصر‬:Word Break

div { word-break: break-all }

‫ يتحكم في النص الذي‬:Text Overflow

.‫تجاوز المحتوي وطريقة عرضة‬

div {
overflow: hidden;
text-overflow: ellipsis
}

19
 Inheritance ‫التوريث‬

‫ تجعل العنصر يأخذ‬:Inheritance ‫التوريث‬

.‫خواص العنصر االب الذي بداخلة‬

‫المزيد‬

<div>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>

div { border: solid 3px rgb(202, 52, 52) }

h1 { border: inherit }

20
 Font ‫الخط‬

‫ وكل نوع له‬,‫ يمكنك من اختيار نوع الخط‬:Font Family

.‫شكل مختلف‬

div.one { font-family: 'Oswald', sans-serif } /* Oswald Google font */

div.two { font-family: arial }
div.three { font-family: serif }

‫ يمكن استخدام أنواع خطوط كثيرة من هذا الموقع عن طريق اضافتها وربطها‬:Google Font
.‫ او يمكن تنزيل الخطوط واضفتها في ملف الموقع‬, <head> ‫ داخل وسم‬HTML‫بملف الـ‬

Google Font

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=
Oswald:wght@300;400;700&display=swap">

‫ القيمة االفتراضية لحجم الخط‬,"px"‫ يتم تحديد حجم الخط بالوحدات مثل الــ‬:Font Size
.16px ‫العادي هي‬

div { font-size: 20px }

21
 .‫ تحديد شكل للخط مثل النص المائل‬:Font Style

div { font-style: italic } /* default: normal */

.‫ تحويل شكل الخط‬:Font Variant

div.two { font-variant: small-caps } /* default: normal */

.‫ تحديد وزن الخط‬:Font Weight

div.three { font-weight: bold } /* default: normal */

22
 ‫وحداد القياس ‪CSS Units‬‬

‫تقسم الوحدات الي نوع ثابت مثل ”‪ “Absolute length units‬وهذا النوع يضم الـ‪, px‬‬
‫اما النوع الثاني هو "‪ “Relative length units‬هي وحدات طولية نسبية يحدد طولها بالنسبة‬
‫لطول عنصر اخر ويتغير طولها مع تغير طول العنصر االخر‪.‬‬

‫الوصف‬ ‫‪Unit‬‬
‫‪ :Pixels‬قياس ثابت ال يتغير‪.‬‬ ‫‪Px‬‬
‫نسبة الي العنصر االب‪.‬‬ ‫‪%‬‬
‫‪ 2 = 2em‬ضعف الحجم الحالي ‪.‬‬ ‫‪em‬‬
‫‪ 2 = 2rem‬ضحف حجم خط بالنسبه للحجم في الـ‪.Root‬‬ ‫‪rem‬‬
‫”‪ %1 = 1vw “Viewport Width‬من المساحة الظاهره من عرض الشاشة‪.‬‬ ‫‪vw‬‬
‫”‪ %1 = 1vh “Viewport Hight‬من المساحة الظاهره من طول الشاشة‪.‬‬ ‫‪vh‬‬

‫المزيد‪.‬‬

‫‪23‬‬
 Mouse Cursor ‫مؤشر الماوس‬

.‫ تغير شكل المؤشر‬:Cursor

div { cursor: not-allowed }

24
 Float and Clear

‫ لكن تحدث مشاكل واخطاء عند‬,‫ التحكم في مكان العناصر وتوزيعها علي اليسار او اليمين‬:Float
.‫استخدام هذه الخاصية لكن يمكن حلها‬

.box { float: left }

.Float‫ يجب وضعة بعد نهاية عناصر الـ‬, Float‫ يستخدم لتصحيح أخطاء الـ‬:Clear

.clearfix { clear: both }

<div class="parent">
<div class="box">Lorem, ipsum.</div>
<div class="box">Lorem, ipsum.</div>
<div class="box">Lorem, ipsum.</div>
<div class="clearfix"></div> <!-- Fixing float problems -->
</div>
<p>Lorem ipsum dolor sit amet.</p>

25
 CSS Calculation

.‫ تحديد حجم العناصر بطريقة حسابية سهله‬:Calc

.box {
width: calc( (100% - 50px) / 4 );
margin-left: 10px;
}

26
 Opacity ‫الشفافية‬

.‫ تستخدم لتحديد شفافية العنصر‬:Opacity

div.two { opacity: 0.5 } /* Default => 1 */

27
 ‫‪Position, Z-index‬‬

‫‪ :Position‬التحكم في تحديد مكان ووضع العنصر من جميع الجهات‬

‫”‪ “left, top, right, bottom‬ويمكن التحديد باستخدام الـ‪ Px‬او ‪.%‬‬

‫‪ :Relative‬يتم تحديد مكان العنصر بالنسبة لمكانة الحالي وحتي‬

‫اذا تحرك العنصر يكون حاجز المكان الذي تم إنشاؤه فيه‪.‬‬

‫} ‪div.one { position: relative; left: 40px; top: 100px‬‬

‫‪ :Absolute‬العنصر يكون مطلق ويتحرك بالنسبة‬

‫لصفحة الويب بالكامل وليس بالنسبة للمكان الذي‬

‫به‪ ,‬ال يعتبر مكانة محجوزا‪.‬‬

‫} ‪div.one { position: absolute; top: 0; right: 0‬‬

‫ملحوظة! إضافة ‪ Relative‬الي العنصر االب سيمنع خروج العناصر‬

‫التي بداخلة عند استخدام ‪.absolute‬‬

‫}‪.parent {position: relative‬‬

‫‪28‬‬
‫‪ :Fixed‬يكون العنصر ثابت في المكان الذي سيتم تحديده له‪ ,‬يستخدم في انشاء زر ‪.Go To Top‬‬

‫} ‪div.one { position: fixed; top: 0; right: 0‬‬

‫‪ :Sticky‬يكون العنصر ثابت بمكانة لكن عند الوصل للعنصر بمؤشر الشاشة يبدأ بالتفاعل‬
‫ويتغير مكانة علي حسب المكان الذي قمت بتحديده يستخدم كثيرا في الـ‪.Navbar‬‬

‫} ‪div.one { position: sticky; top: 0‬‬

‫‪ :Z Index‬تحديد ترتيب الطبقات‪ ,‬عناصر الـ‪HTML‬‬

‫دئما يكون اخر عنصر مكتوب هو ذا األعلى طبقة‪ ,‬ال‬
‫يعمل ‪ z-index‬اال مع استخدام الـ‪.position‬‬

‫}‪div.one { position: relative; z-index: 1‬‬

‫‪29‬‬
 “Lists, Table” Styling

.‫ تغيير شكل الرموز الخاصة بالقائمة او ازالتها‬:List Style

ul { list-style: none; padding-left: 0 }

‫ من االسهال إضافة تنسيقات الجدول‬:Table

.CSS ‫باستخدام‬

‫ تستخدم لتحديد المسافة بين خاليا‬: border-spacing !‫ملحوظة‬

.‫الجدول‬

table { border-spacing: 0; border: 1px solid #ccc }

th, td { padding: 10px 25px; text-align: left}

td { border-top: 1px solid #ccc }

tbody tr:nth-child(odd) { background-color: #f2f2f2 }

tfoot { font-weight: 700 }

30
 Pseudo “Classes, Element”

.‫ أدوات تستخدم ألضافة والتحكم في وظائف العناصر‬:Pseudo Classes

“ :hover, :focus, :active, :disabled ” ‫مثل‬

.All Pseudo Classes

h1:hover { color: #fdb925; cursor: pointer }

.‫ عناصر وهمية لكل منها وظيفة محددة ومختلفة‬:Pseudo Element

“ ::after, ::before, ::selection ” ‫مثال‬

.All Pesudo Element

31
 Vendor Prefixes

.‫ أدوات تسخدم لضمان عمل الكود في متصفحات القديمة‬:Prefixes

.box {
transition: all .8s;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-ms-transition: all .8s;
-o-transition: all .8s;
}

.‫ " للتأكد من دعم الخصائص في إصدارات المتصفحات‬Can I Use" ‫موقع‬

32
 Border Radius

.‫ يستخدم لتحديد قطر الحواف الخارجية‬:Border Radius

.box {
width: 100px;
height: 100px;
background-color: #f1f1f1;
border: 2px solid #333;
border-radius: 50%; /* Default => 0 */
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}

.‫ويمكن تحديد القطر من جوانب معينة‬

.box {
border-top-left-radius: 20px;
border-bottom-right-radius: 20px
}

33
 Box Shadow

.‫ يقوم بأضافة ظل خارجي للعنصر ويمكن التحكم في اتجاة الظل ومدي وضوحه‬:Box Shadow

/* H-Shadow, V-Shadow, Blur, Color, inset 'if you want an inner shadow' */
.box { box-shadow: 0px 13px 11px -10px #00000031 }

.inset ‫ألضافة ظل داخلي للعنصر يجب استخدام‬

.box { box-shadow: 0px 13px 11px -10px inset #00000031 }

34
 The Box Model, Box Sizing

‫ هو الطريقة التي يتعامل بها المتصفح مع طول وعرض العنصر والهوامش‬:Box Model
.‫والحواف الخاصه به‬

‫ يقوم المتصفح بي‬:Content Box

‫إضافة مساحة الهوامش والحواف الي‬
.‫مساحة العنصر األساسية‬

.parent { width: 600px; padding: 20px }

.one {
width: 300px;
padding: 10px; /* padding left + Right = 20px */
border: solid 10px red; /* border left + Right = 20px */
box-sizing: content-box; /* Default */
}

‫ والمساحة النهائية‬,‫ ال تحسب مساحة الهوامش والحواف من مساحة العنصر‬:Border Box

‫للعنصر تكون مساوية لنفس المساحة‬
.‫التي تم تحديدها له‬

.one {
width: 300px;
padding: 10px; /* padding left + Right = 20px */
border: solid 10px red; /* border left + Right = 20px */
box-sizing: border-box;
}

35
 Transition

.‫ التحكم في مدة انتقال العنصر من حالة الي حالة‬:Transition

.box {
width: 300px;
height: 200px;
background-color: #eee;
transition-duration: .5s ; /* or by ms = '500ms' */
transition-delay: 1s;
transition-property: width, background-color; /* or all */
transition-timing-function: linear; /* Default ease */
}

.‫االختصار‬

.box {
/* transition: Property, Duration, Delay, Timing Function */
transition: width .5s 1s linear;
}

.‫مثال اخر‬

.box { transition: all .5s 1s linear; }

36
 Important Declaration

.‫ ويعبر عن أهميتها وسيقوم المتصف بتطبيقها‬,‫ تصريح يتم اعطائة لخاصية معينة‬:Important

.HTML ‫ تم تحديد اللون من داخل‬:‫مثال‬

<div class="box" style="background-color: red;">

<h2>Test</h2>
</div>

.!important ‫بدون استخدام‬

.box { background-color: green }

.!important ‫بعد استخدام‬

.box { background-color: green !important }

37
 Vertical Margin Collapse

/*
Margin Collapse

[1] Only Vertical Margin Collapse

[2] Bigger Margin Wins
[3] Margin Collapsing With Elements Without Anything Between
[4] Nesting Does Not Prevent Collapse
*/

38
 ‫‪CSS Variables‬‬

‫‪ :Variable‬يتم تحديد قيمة لمتغير واستخدام هذا المتغير في الكثير من العناصر‪ ,‬بتغير قيمة‬
‫المتغير ستتغير كل التنسيقات التي تم استخدام فيها المتغير‪.‬‬

‫تفاصيل ا كثر عن المتغيرات‪.‬‬

‫‪:root { --mainColor: red; } /* Global Variable */‬‬

‫} ;)‪.box { background-color: var(--mainColor, #333‬‬

‫‪.box { --mainColor: blue; } /* Local Variable */‬‬

‫‪39‬‬
 Flex Box ‘Parent’

‫ يتم توزيع مساحة‬:Display Flex

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

.parent { display: flex; /* display: flex => To Start Flexible Box */ }

‫ تحديد اتجاة‬:Flex Direction

,‫ أعمدة او صفوف‬,‫العناصر ظهور العناصر‬

.‫او صفوص وأعمدة معكوسة‬

.parent {
display: flex;
flex-direction: row-reverse; /*row, row-reverse, column, column-revers*/
}

‫ يتعامل مع العنصر‬:Flex Wrap

.‫الزائد اما انزالة في سطر جديد او ال‬

.parent {
display: flex;
flex-wrap: wrap; /* nowrap, warp, wrap-reverse */
}

40
 .‘flex-diraction, flex-wrap’ ‫ هو اختصار لي‬:Flex Flow

.parent {
display: flex;
flex-flow: row wrap; /* flex-flow: [Flex-Direction] + [Flex-Wrap] */
}

.flex box‫ توزيع العناصر افقيا داخل الـ‬:Justify Content

.parent {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}

41
 .flex box‫ توزيع العناصر عموديا داخل الـ‬:Align Items

.parent {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center; /* Default stretch */
}

‫ يقوم بمحاذه المحتوي ككل في االتجاه‬:Align Content

.‫العمودي‬

.parent {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}

42
 ‫’‪Flex Box ‘Child‬‬

‫‪ :Flex Grow‬تمدد عنصر محدد عن باقي العناصر التي بجانبه‪.‬‬

‫‪.child-2 { flex-grow: 1 } /* Default => 0 */‬‬

‫‪ :Flex Shrink‬انكماش العنصر‬

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

‫‪.child-2 { flex-shrink: 2 } /* Default => 1 */‬‬

‫‪ :Order‬تحديد ترتيب العناصر‪.‬‬

‫‪.child-2 { order: 1; } /* Default => 0 */‬‬

‫‪43‬‬
 Flex Direction ‘row’ ‫ اذا كانت قيمة الـ‬,‫ يقوم بتحديد عرض او طول للعنصر‬:Flex Basis
.‫‘ سيتعامل مع الطول‬column’ ‫سيتعامل مع عرض العنصر ما اذا كانت‬

.flex direction: row ‫في حالة‬

.parent { flex-direction: row }

.child-2 { flex-basis: 220px;} /* Default => auto */

.flex direction: column ‫في حالة‬

.parent { flex-direction: column }

.child-2 { flex-basis: 220px;} /* Default => auto */

.‫ الكود المختصر‬:Flex Shorthand

/* flex: [Flex Grow] [Flex Shrink] [Flex Basis] */

.child-2 { flex: 0 1 auto ; } /* Default => 0 1 auto */

44
 .‫ محاذه العنصر نفسة عموديا‬:Align Self

/* flex: flex-start | flex-end | center | baseline | stretch */

.child-2 { align-self: center } /* Default auto */

-:Flex Box‫العاب ممتعة لتعلم الـ ـ‬

.FLEXBOX FROGGY •
.Flexbox Zombies •

45
 Filters

.‫ ألضافة تأثيرات علي الوان الصور‬:Filters

.Filters‫المزيد عن الــ‬

img {
filter: grayscale(100%); /* Default => none */
-webkit-filter: grayscale(100%);
}

img:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
}

46
 Gradients ‫تدرجات االلوان‬

.‫ يقوم بأضافة األلوان وعمل تدريج بينهم‬:Gradients Color

div {
background-image: linear-gradient(90deg,
#d16ba5, #c777b9, #ba83ca, #aa8fd8,
#9a9ae1, #8aa7ec, #79b3f4, #69bff8,
#52cffe, #41dfff, #46eefa, #5ffbf1);
}

‫مثال اخر ألستخدام التدريج في انشاء حواف من جانب‬

.‫واحد‬

div::before {
content: '';
position: absolute;
top: -5px;
height: 5px;
width: 100%;
background-image: linear-gradient(to right, #9c27b0 20%,
#2196f3 20%, #2196f3 40%, #3f51b5 40%, #3f51b5 60%,
#ff5722 60%, #ff5722 80%, #4caf50 80% );
}

47
 Pointer Events & Caret Color

.‫ التحكم في لون مؤشر الكتابة‬:Caret Color

p {
/* Default => Auto */
caret-color: red;
}

‫ التحكم في االحداث التي يقوم بها المؤشر تغيريها‬: Pointer Events

.‫او منعها‬

a { pointer-events: none;/* Default => Auto */ }

48
 Grid “Parent”
.grid‫ يجب استخدامة لتفعيل استخدام خواص الـ‬:Display Grid

.‫ يستخدم لتحديد عدد االعمدة‬:Grid Template Columns

.‫ تحديد عدد الصفوف‬:Grid Template Rows

.‫ تحديد المسافات بين الصفوف واالعمدة‬:Gap

.grid-parent {

/* grid | inline-grid */
display: grid;

/* Num Of Columns 'Px, %, Auto, fr, repeat()' */

grid-template-columns: repeat(3, 1fr);

/* Num Of Rows 'Px, %, Auto, fr, repeat()' */

grid-template-rows: repeat(3, 1fr);

/* [Row Gap] [Column Gap] */

gap: 10px 20px;
}

49
 .‫ التحكم في لمحتوي بشكل افقي‬:Justify Content

.‫ التحكم في المحتوي بشكل عمودي‬:Align Content

.grid-parent {
justify-content: space-between;
align-content: flex-end;
}

50
 ‫ يستخدم لتقسيم محتوي‬:Template Areas
‫ يتم ربط القيمة بالعناصر باستخدام‬, grid‫الـ‬
.‫ واعطئها نفس االسم الذي تم مسبقا‬grid area

-:‫مثال‬

.page {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 60px auto 50px;
height: 100vh;
grid-template-areas: /* Layout */
"logo logo . nav nav nav nav nav nav nav"
"cont cont cont cont cont cont . aside aside aside"
"foot foot foot foot foot foot foot foot foot foot";
}

h1 { grid-area: logo; background: #92A9BD }

nav { grid-area: nav; background-color: #D3DEDC }

section { grid-area: cont; background-color: #c0c0c0 }

aside { grid-area: aside; background-color: #ffd700 }

footer { grid-area: foot; background-color: #17223B;color: #fff }

51
 Grid ‘Child’

.‫ تحديد بداية وناهية العنصر من االعمدة‬:Grid Column

.‫ تحديد بداية ونهاية العنصر من الصفوف‬:Grid Row

/*
- grid-column: 'start / end' | 'span [Num Of Colmun]'
- grid-row: 'start / end' | 'span [Num Of Row]'
*/

.child-1 { grid-column: 1 / 3 }

.child-6 { grid-column: span 2 }

.child-4 { grid-row: span 3 }

.child-7 { grid-column: span 2; grid-row: span 2 }

Grid Template Areas ‫ ويمكن استخدام‬, grid column ‫ و‬grid row‫ اختصار لـ‬:Grid Area
.‫للعنصر االب واستخدام األسماء بدال من األرقام‬

/* grid-area: [Row Start] [Column Start] [Row end] [Column end] */

.child-7 { grid-area: 3 / 2 / 5 / 4 }

52
 ,‫ يقوم بتحديد عدد االعمدة المتاحة بشكل تلقائي‬auto-fill :Min, Max And Auto Fill
.‫ تحديد الحد االدني واالقصي لعرض العمود‬minmax

.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) /* Magic */}

"GRID GARDEN" grid‫لعبة تساعد في تعلم الـ‬

53
 ‫”‪Transform “2D‬‬

‫‪ :Scale‬إمكانية تمدد العنصر‪ ,‬يمكن تحديد نسبه‬

‫التمدد من االتجاه الرأسي أو االفقي‪.‬‬

‫ملحوظه يتمدد العنصر ويتمدد معه العناصر التي‬

‫بداخلة‪ ,‬ويتمدد الـ ‪ Margin‬أيضا مع العنصر‪.‬‬

‫‪/* scale(X,Y) | scaleX() | ScaleY()*/‬‬

‫{ ‪.child‬‬
‫‪transform: scale(1.5,-1); /* scale( [+Num or -Num] ) */‬‬
‫}‬

‫‪ :Rotate‬امكانية تدوير العنصر بقيمة محددة‪.‬‬

‫ملحوظة! يمكنك استخدام خاصية ‪ scale‬و ‪ rotate‬مع بعض‬

‫لكن في سطر واحد‪ ,‬ويمكن استخدام خاصية ‪ transition‬لعمل‬
‫تأثير أجمل‪.‬‬

‫‪/* Rotate( deg=> Degrees | rad=> Radians | grad=> Gradians | turn=> Turn) */‬‬
‫};)‪.child {transform: rotate(45deg‬‬

‫‪54‬‬
 .‫ تحريك العنصر في االتجاه االفقي والرأسي‬:Translate

/* Translate(X,Y) | TranslateX() | TranslateY() */

.child { transform: translate(50px, -50px); }

.‫ امكانية انحارف العنصر من االتجاه االفقي او الرأسي‬: Skew

/* Skew(X,Y) | SkewX() | SkewY() */

.child { transform: skew(20deg); }

Scale, Skew, ( ‫ اختصار ألضافة قيم مختلفة معا‬:Matrix

.) translate

/* matrix( scaleX, skewY, skewX, scaleY, translateX, translateY ) */

.child { transform: matrix(1, 0, 0.22, 1, 50, 50) }

55
 ‫‪Transform Origin 2D‬‬

‫‪ :Transform Origin‬هي النقطة التي يبدأ منها تأثير الــ‪ , transform‬وبستخدام هذه الخاصية‬
‫يمكنك اختيار المكان الذي تريد ان يبدة منه الــ‪.transform‬‬

‫معلومات أ كثر‪.‬‬

‫‪56‬‬
 Transform 3D

.‫ تدوير العنصر بشكل ثالثي األبعاد‬:Rotate 3D

/* rotate3d(x, y, z, deg) */
.child { transform: rotate3d(0, 1, 0, 60deg)}

57
 ‫‪ :Translate 3D‬تحريك العنصر في األتجاه االفقي والرأسي واألمامي‪.‬‬

‫ملحوظة! ال يعمل الـ ‪ Translate 3D‬في االتجاة ‪ ,Z‬يجب اضافة خاصية ‪ Prespactive‬لألب أوال‪.‬‬

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

‫‪ : Perspective Origin‬تحديد النقطة التي ننظر منها الي العنصر‪.‬‬

‫} ‪.parent { perspective: 500px‬‬

‫‪.child { transform: translate3d(25px, 25px, 50px)} /* X Y Z */‬‬

‫‪58‬‬
 ‫ يستخدم ألخفاء او اظهار الوجه‬:Backface Visibility
‫ وهذا في حالة كنت تستخدم‬,‫الخلفي للعنصر‬
.Transform Rotate

/* Default Visible */
.face { backface-visibility: hidden }

‫ ال يعمل‬Backface-visibility , ‫ علي العانصر‬3D‫ يقوم بتفعيل تأثيرات الـ‬: Transform Style

.‫بدون تفعيل هذا التأثير‬

/* Default: flat */
.box { transform-style: preserve-3d }

59
 Animation
‫ تحدث‬Animoation ‫ يستخدم ألنشاء عدد معين من االطارات المكون من تأثيرات‬:Keyframes
.‫بالترتيب‬

.‫ التي تم انشئها لتعمل علي العنصر‬Keyframes‫ يوضع به اسم الــ‬:Animation Name

.‫ وال يعمل بدونها‬Animation‫ مدة تنفيذ الـ‬:Animation Duration

.box {
animation-name: change-color;
animation-duration: 6s; /* Default: 0 */
}

/* @keyframes Name */
@keyframes change-color {

0% { background-color: blue } /* from {} */

50% { background-color: gold }

100% { background-color: red } /* to {} */

60
 .Animation‫ تستخدم لتحديد عدد مرات تنفيذ تأثير الـ‬:Animation Iteration Count

.Animation‫ التحكم في كيفية عرض تأثير الـ‬:Animation Timing Function

-:Loading Spinner ‫مثال عن تنفيذ‬

.spinner {
background-color: #eee;
width: 50px;
height: 50px;
margin: 300px auto;
border: solid 4px rgb(61, 107, 233);
border-left: solid 4px #eee ;
border-radius: 50%;

animation-name: spinner;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;

@keyframes spinner {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

61
 ‫ يمكن التنفيذ بشكل عكسي او بشكل‬,Animation‫ أتجاة تنفيذ الـ‬:Animation Direction
.‫ترددي‬

.‫ لوقت محدد‬Animation‫ تأخير بدأ الــ‬:Animation Delay

.KeyFrames‫ تجعل العنصر يحتفظ بأخر تأثير من الـ‬:Fill Mode

.box {

/* Default => normal | reverse | alternate | alternate-reverse */

animation-direction: reverse;

/* Default => 0 | second | milliseconds */

animation-delay: 2s;

/* Default => none | forwards | backwards | both */

animation-fill-mode: both ;

/* Default => running | paused*/

animation-play-state: paused;

.‫ الطريقة المختصرة‬:Animation

.box {

/* name duration timing-function delay iteration-count direction fill-mode */

animation: spinner 5s linear 0 infinite reverse both;

62
 ‫‪CSS Selectors‬‬

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

‫تحديد كل العناصر التي تحتوي علي‬
‫} { ‪.box‬‬ ‫‪.class‬‬
‫”‪class=”box‬‬
‫تحديد كل العناصر التي تحتوي علي‬
‫} { ‪.box.red‬‬ ‫‪.class1.class2‬‬
‫”‪ class=”box red‬معا‪.‬‬
‫تحديد العناصر التي تحتوي علي ‪ child‬التي‬
‫} { ‪.parent .child‬‬ ‫‪.class1 .class2‬‬
‫تكون داخل ‪parent‬‬
‫‪,‬‬
‫تحديد العنصر الذي يحتوي علي‬
‫} { ‪#box‬‬ ‫‪#id‬‬
‫”‪Id=”box‬‬
‫تحديد كل العناصر‪.‬‬ ‫} { *‬ ‫*‬
‫تحديد كل عناصر الـ>‪<p‬‬ ‫} { ‪P‬‬ ‫‪Element‬‬
‫تحديد كل عناصر الـ ـ >”‪<P class=”red‬‬ ‫} { ‪p.red‬‬ ‫‪Element.class‬‬
‫تحديد كل عناصر ال ـ‪ p‬علي ان تكون من‬
‫} { ‪Div > p‬‬ ‫>‬
‫االبناء المباشرين داخل الـ ـ‪Div‬‬
‫تحديد اول عنصر بعد الـ‪ Div‬علي نفس‬
‫} { ‪Div + p‬‬ ‫‪+‬‬
‫المستوي‪.‬‬
‫تحديد كل عناصر الـ ‪ Div‬التي تسبق عنصر‬
‫‪ P‬علي ان تكون شقيقة لة علي نفس‬ ‫} { ‪P ~ Div‬‬ ‫~‬
‫المستوي‪.‬‬
‫كل العناصر التي تحتوي علي ‪Attribute‬‬
‫} { ]‪[title‬‬ ‫]‪[Attribute‬‬
‫‪= title‬‬
‫تحديد كل عناصر الـ‪ div‬التي تحتوي علي‬
‫‪title‬‬ ‫} { ]‪Div[title‬‬ ‫]‪Element[Attribute‬‬
‫>” ”=‪<div title‬‬

‫‪63‬‬
 ‫تحديد كل العناصر التي تحتوي علي‬
‫} { ]”‪[title=”test‬‬ ‫]‪[Atrribute=value‬‬
‫”‪title=”test‬‬
‫]‪ Input[type=”text”] { } Element[Atrribute=value‬تحديد كل عناصر >‪<input type=”text‬‬
‫تحديد كل عناصر ال ـ‪ title‬التي تحتوي علي‬
‫} { ]‪[title~=box‬‬ ‫]‪[Attribute~=value‬‬
‫كلمة ‪.box‬‬
‫تحديد كل عناصر الـ‪ title‬التي تحتوي علي‬
‫{ ]‪[title*=bo‬‬ ‫}‬ ‫]‪[Attribute*=value‬‬
‫الحروف المحددة مثل ”‪“bo‬‬
‫تحديد كل عناصر الـ‪ title‬التي تبدأ بـ ”‪“b‬‬ ‫{ ]‪[title^=b‬‬ ‫}‬ ‫]‪[Attribute^=value‬‬
‫تحديد كل عناصر الـ>‪ <p‬بشرط ان تكون‬
‫{ ‪p:first-child‬‬ ‫}‬ ‫‪:frist-child‬‬
‫االبن االول داخل االب الخاص بها‪.‬‬
‫تحديد كل عناصر الـ>‪ <p‬بشرط ان تكون‬
‫{ ‪p:last-child‬‬ ‫}‬ ‫‪:last-child‬‬
‫االبن االخير داخل االب الخاص بها‪.‬‬
‫تحديد عنصر الـ>‪ <p‬االول من نوعه داخل‬
‫{ ‪p:first-fo-type‬‬ ‫}‬ ‫‪:first-fo-type‬‬
‫االب الخاص به‪.‬‬
‫تحديد عنصر الـ>‪ <div‬االخير من نوعة داخل‬
‫{ ‪div:last-of-type‬‬ ‫}‬ ‫‪:last-fo-type‬‬
‫االب الخاص بة‪.‬‬
‫تحديد عنصر الـ>‪ <p‬بشرط ان يكون الطفل‬
‫{ ‪p:only-child‬‬ ‫}‬ ‫‪:only-child‬‬
‫الوحيد داخل االب الخاص به‪.‬‬
‫تحديد كل عناصر الـ>‪ <p‬معدا التي تحتوي‬
‫علي ‪.class‬‬
‫{ )‪p:not(.class‬‬ ‫}‬ ‫)‪:not(Selector‬‬
‫ملحوظه! يمكن استخدام كل انواع‬
‫الـ‪ ,Selector‬المزيد‪.‬‬
‫تحديد كل عناصر الـ>‪ <p‬بشرط ان يكون‬
‫االبن الثاني داخل االب الخاص به‪.‬‬
‫{ )‪p:nth-child(2‬‬ ‫}‬ ‫)‪:nth-child(n‬‬
‫ملحوظه! هناك طريق لتحديد العناصر مثل‬
‫‪ odd‬و ‪ even‬المزيد‪.‬‬
‫تحديد عنصر الـ>‪ <p‬بشرط ان يكون االبن‬
‫{ )‪p:nth-last-child(2‬‬ ‫}‬ ‫)‪:nth-last-child( n‬‬
‫الثاني من االسفل‪.‬‬
‫تحديد عنصر الـ>‪ <p‬الرابع من نوعه داخل‬
‫{ )‪p:nth-of-type(4‬‬ ‫}‬ ‫)‪:nth-fo-type(n‬‬
‫االب الخاص به‪.‬‬

‫‪64‬‬
 -: Selectors‫امثلة عن استخدامات بعض الـ‬

:‫ يمكن استخدامة بشكل مفيش في اضافت تعليمات عامة مثال‬:Root •

.‫تم انشاء متغيرات تحتوي علي االلوان االساسية للموقع ويمكن استخدمها لحقا‬

:root {
--mainColor: #673ab7;
--mainColorLight: #9c56ff
}

div { color: var(--mainColor) }

.Selection •

::selection {
background-color: var(--mainColorLight);
color: #fff
}

.Placeholder •
‫يمكن استخدمها لحديد وأضافة‬
.placeholder ‫التنسيقات علي خاصية‬

::placeholder {color: #818181;}

input:focus::placeholder { color: transparent; }

65
 ‫‪Media Queries & Responsive Designs‬‬

‫‪ :Media Queries‬قواعد يتم استخدامها لتنفيذ تطبيق متجاوب مع وسائط وأبعاد الشاشات‬
‫المختلفة‪.‬‬

‫وهناك انواع من الـ ‪ Media Queries‬مثل الـ‪ Print‬وهي مسؤوله عن وضع الطباعه والتنسيقات‬
‫التي ستوضع بها ستكون خاصه بوضع الطباعه فقط‪.‬‬

‫ملحوظة! يجب استخدام ‪ meta viewport‬وهي تعبر عن المساحة المرئيه من الموقع لدي‬
‫المستخدم وهي تساعد علي انشاء موقع متجاوب‪ ,‬المزيد‪.‬‬

‫>"‪<meta name="viewport" content="width=device-width, initial-scale=1.0‬‬

‫مثال عن طريقة االستخدام‪:‬‬

‫المزيد‪.‬‬

‫‪66‬‬
 ‫‪CSS Global Values‬‬

‫‪ :Inherit‬يرث العنصر قيمة الخاصية من قيمة خصية العنصر االب الذي بداخلة‪.‬‬

‫} ‪.child { color: inherit‬‬

‫‪ :Initial‬يقوم بأرجاع قيمة الخاصية الي القيمة األفتراضية التي تم انشائة عليها‪.‬‬

‫} ‪.child { color: initial‬‬

‫‪ :Unset‬سيعمل عمل الـ‪ inherit‬اذا كانت الخاصية قابلة للتوريث‪ ,‬وسيعمل عمل الـ‪ initial‬اذا‬
‫كانت الخاصية غير قابلة للتوريث‪.‬‬

‫} ‪.child { color: unset‬‬

‫‪ :Revert‬يقوم بإعادة قيمة الخواص الي الوضع االفتراضي الخاص بالمتصفح "‪"User Agent‬‬
‫وتختلف القيمة االفتراضية بأختالف المتصفحات احيانا‪.‬‬

‫} ‪.child { color: revert‬‬

‫‪ :All‬يرمز الي كل خواص الـ‪ CSS‬وتحديد قيمة هذه الخاصية يؤثر علي كل خواص ال‪.CSS‬‬

‫} ‪.child { all: initial‬‬

‫‪67‬‬
 ‫‪Important links‬‬

‫‪ Color hunt‬موقع خاص الختيار األلوان وبه تشكيالت تتناسب مع بعضها‪.‬‬

‫‪ Eggradients‬خاص بتدرجات االلوان‪.‬‬

‫‪ Pexels‬موقع مجاني للحصول علي صور عالية الجودة‪.‬‬

‫‪ Flaticon‬موقع جيد للحصول علي ‪.icons‬‬

‫‪ Google Font‬موقع به الكثير من أنواع الخطوط‪.‬‬

‫‪ Frontend Mentor‬و ‪ CSS Battle‬مواقع ممتازه جدا لتطوير مهراتك في ‪.CSS‬‬

‫‪68‬‬