‫‪1‬‬

‫اوال ‪ :‬لغة الـ ‪CSS‬‬

‫الستدعاء اكواد ال ‪ CSS‬يوجد ثالث طرق ‪:‬‬ ‫‪‬‬

‫كتابة الكود فى ملف خارجى وحفظة بامتداد ‪ css.‬ومثال ‪ style.css‬ثم استدعاء الملف من داخل صفحة الـ ‪ HTML‬فى وسم ال<‬ ‫‪‬‬
‫‪ >head‬كالتالى‬
‫>‪<link rel="stylesheet" href="style.css"/‬‬
‫كتابة اكواد الـ ‪ CSS‬داخل وسم ال<‪ >head‬فى صفحة ال‪ html‬مباشرة وذلك بانشاء وسم <‪ >style‬كالتالى‬ ‫‪‬‬
‫>‪<style>Css Codes</style‬‬
‫او كتابة كود الـ ‪ style‬مباشرة اثناء انشاء العنصر فى صفحة ال‪ Html‬كالتالى‬ ‫‪‬‬
‫>‪<p style="color:red ; font-size:20px">this is styled text</p‬‬
‫مثال على العمليات التنسيقية ‪ :‬اذا كان لدينا ‪ 3‬فقرات فى صفحة ال ‪ html‬كالتالى‬ ‫‪‬‬
‫>‪<p>this is first paragraph</p‬‬
‫>‪<p class="one">this is second paragraph</p‬‬
‫>‪<p class="tow">this is third paragraph</p‬‬
‫وفى وسم التنسيق <‪ >style‬هنكتب التالى‬

‫على كــل‬
‫;‪P{color:red‬‬ ‫ســيتم تطــبيق التنســيق ‪ p‬وهــو تغــير لــون وحجم الخــط‬
‫}‪font-size:20px‬‬
‫االوسمه من نوع <‪ >p‬لكن سيتم استثناء خاصــية اللــون ‪.‬لالوســمه‬
‫}‪one{color:blue‬‬
‫‪two{color: black}.‬‬ ‫ذات الكالس ‪ one‬و ‪two‬‬

‫بمعنى ان اخر قيمه تنسيقيه هى التى سيتم اعتمادها وتطبيقها وكذلك عند استخدام اكثر من ملف تنسيقي فمثال لو لدينا ملفي تنسيق وتم‬
‫ربطهم كالتالى فى وسم ال <‪ >head‬لصفحة ال ‪html‬‬
‫>‪<link rel="StyleSheet" href="style.css"/‬‬ ‫} ‪// p{color:gray‬‬
‫>‪<link rel="StyleSheet" href="main.css"/‬‬ ‫} ‪// p{color:brown‬‬
‫>‪<style> p{color:green } </style‬‬
‫>‪Inline Style Ex: <p style="color:red">amir</p‬‬
‫هنا ستكون النتيجة ان لون ‪ amir‬هو اللون االحمر النه اخر قيمه تمت رؤيتها من المحرر‬
‫ترتيب التنسيق من االضعف الى االقوي كالتالى ‪ External Style‬ثم ‪ Internal Style‬ثم ‪InLine Style‬‬ ‫‪‬‬
‫بدال من انشاء كالس للعنصر كالتالى <‪ >"p class="one‬وذلك الستخدامه فى التنسيق لملف ال ‪ css‬فانه يمكن تعريفه او تمييزه بواسطه‬ ‫‪‬‬
‫ال ‪ id‬كالتالى <‪ >"p id="one‬ولكن هنا عند تنسيق العنصر يكون كالتالى ‪one{color:green} #‬‬
‫تنسيقات الـ ‪Background‬‬ ‫‪‬‬

‫‪Background-color:#ff0000‬‬ ‫اعطاء لون للخلفية‬

‫‪redcolor‬‬
‫)'‪Background-image:url('icon.png‬‬ ‫تحديد صورة للخلفية‬
‫‪Background-repeat:no-repeat‬‬ ‫وهى خاصية مرتبطة بوجود صورة بالخلفية ولها مجموعة قيم‬
‫‪ : No-repeat‬وتعنى انها لن تتكرر‬ ‫‪‬‬
‫‪ : Repeat-y‬وتعنى عمل تكرار طولى للصورة اى عمودى‬ ‫‪‬‬
‫‪ : Repeat-y‬وتعنى عمل تكرار عرضى للصوره اى افقى‬ ‫‪‬‬
‫‪ : Repeat‬وتعنى عمل تكرار طولى وعرضى للصورة‬ ‫‪‬‬
‫‪Background-attachment : fixed‬‬ ‫وهى مرتبطة بوجود صورة ولها مجموعة قيم منها‬
‫‪ : Scroll‬وتعنى ان الصورة ستتحرك مع المحتوى‬ ‫‪‬‬
‫‪ : Fixed‬ويمكن عملها لصورة ثابته فى الخلفية ومحتوى متحرك العلى‬ ‫‪‬‬
‫واسفل‬
‫‪Background-position: top left‬‬ ‫وهى تعنى وضع الصورة فى المحتوى‬
‫‪Or background-position:50% 50%‬‬ ‫* * *‬
‫عالمة * تعبر عن الوضع وهنا سنختار مابين ‪:‬‬
‫* * *‬
‫‪Top - bottom – center – left - right‬‬
‫* * *‬
‫كما يمكن كتابة كل ما سبق فى كود واحد كالتالى‬ ‫‪‬‬
‫‪Background:#0000ff url('icon.png) repeat scroll‬‬ ‫‪50% 50%‬‬
‫‪Background:color photo path repeat attachment position‬‬

‫لو عاوز اختصر كود اللون مثال ‪ 0000ff#‬هناخد من كل حرفين متكررين حرف واحد فقط كالتالى ‪00f#‬‬ ‫‪‬‬
 ‫‪2‬‬

‫تنسيقات الـ ‪ text‬مثال لو عندنا < ‪>div>amir</div‬‬ ‫‪‬‬

‫‪Color:red‬‬ ‫لتنسيق لون الخط‬

‫‪Direction: rtl‬‬ ‫لتنسيق شكل واتجاه الخط ولها قيمتان ‪:‬‬
‫‪ Rtl‬وهى ‪ right to left‬لو هنكتب عربي واقواس ورموز‬ ‫‪‬‬
‫‪ Ltr‬وهى ‪ left to right‬لو هنكتب باالنجليزي ورموز واقواس‬ ‫‪‬‬
‫‪Letter-spacing:5px or 10%‬‬ ‫الفاصل بين حروف الكلمة الواحده‬
‫‪Line-height:10px or 7%‬‬ ‫الفاصل بين االسطر‬
‫‪Word-spacing:7px or 15%‬‬ ‫الفاصل بين الكلمات‬
‫‪Text-align:center‬‬ ‫محازاة الكالم ولها قيم ‪left – center – right‬‬
‫‪Text-decoration:none‬‬ ‫وهى عمل ديكور للكلمات برسم خط ولها قيم‬
‫‪ None‬وهى تعنى عدم وجود تنسيق‬ ‫‪‬‬
‫فهنا مثال ممكن انسق الوسم <‪ >a href‬بحذف الخط السفلى او اضاقة خط علوي وهكذا‬
‫‪ Underline‬وضع خط اسفل الكلمة‬ ‫‪‬‬
‫}‪A{text-decoration:None‬‬ ‫‪ Overline‬وضع خط فوق الكلمة‬ ‫‪‬‬
‫}‪A:hover{text-decoration:overline‬‬ ‫‪ Line-through‬وضع خط على الكلمة‬ ‫‪‬‬
‫‪Text-indent:20px‬‬ ‫المسافة البادئة اى قبل بداية الكالم مثل الفقرات‬
‫‪Text-transform:captalize‬‬ ‫حالة الحروف ولها القيم‪:‬‬
‫‪ captalize‬وهى ان اول حرف كابيتال من كل كلمة‬ ‫‪‬‬
‫‪ Uppercase‬وهى ان كل الحروف كابيتال‬ ‫‪‬‬
‫‪ lowercase‬وهى ان كل الحروف صغيرة‬ ‫‪‬‬

‫‪White-space:normal‬‬ ‫هى خاصية للتحكم فى طريقة عرض الكالم‬

‫‪ Normal‬اذا كان الكالم كثير وهذا الكالم فى ‪ div‬فسوف ينزل للسطر الثانى‬ ‫‪‬‬
‫بنهاية قيمة ‪ width‬للـ ‪div‬‬
‫‪ Nowarp‬اذا كان الكالم كثير وهذا الكالم فى ‪ div‬فسوف يخرج عن قيمة‬ ‫‪‬‬
‫‪ width‬للـ ‪ div‬ليكمل السطر‬

‫ملحوظة ‪ :‬لو عاوز تصميم الصفحة نفسه يكون عاليمين بنعمل للبدي الكود ده }‪body{direction:rtl‬‬ ‫‪‬‬
‫ملحوظة ‪ :‬لو عندى ‪ div‬وداخله ‪ span‬فيمكن تنسيق ال ‪ span‬كالتالى‬ ‫‪‬‬
‫}‪Div span {color:red‬‬
‫ملحوظة ‪ :‬لو عندى عدد ‪ span 2‬كالتالى‪:‬‬ ‫‪‬‬
‫>‪<span class="one">amir</span‬‬
‫>‪<span class="two">ahmed</span‬‬
‫وعاوز انسقهم هيكون كالتالى‬
‫}‪Span.old{color:red‬‬
‫}‪Span.two{color:green‬‬
‫الـ ‪Font Properties‬‬ ‫‪‬‬

‫"‪Font-Family:arial,Tahoma,"pt bolding‬‬ ‫اسم الخط ‪ :‬حيث يجب مالحظة اختيار خطوط موجوده على كل االجهزه مثل ‪ arial‬و ‪san-‬‬
‫‪ serif‬ولمعرفة الخطوط االمنه نبحث عن ‪web safe fonts‬‬
‫لو اسم الخط اكثر من كلمه نضعه بين عالمتى تنصيص‬
‫‪Font-style:italic‬‬ ‫تنسيق الخط وله قيمتان ‪ normal‬و ‪italic‬‬
‫‪Font-Size:16px‬‬ ‫حجم الخط‪:‬قد يكون على شكل قيمة مثل ‪ 16Px:‬وهى القيمة االفتراضيه‬
‫او ان يكون ‪ smalle‬او ان يكون ‪smaller‬اى اصغر من المحتوي االب له وكذلك ‪large‬‬
‫‪Font-Weight:bold‬‬ ‫وزن الخط وله قيم كثيره تتدرج سماكتها مثل ‪ border‬وهكذا وايضا يوجد تدرج من‬
‫الخفيف الى السميك من ‪ 100‬الى ‪900‬‬

‫ولعمل اختصار لكتابة الخط‬

‫"‪Font:italic bold 30px/40px arial,Tahoma,"pt bolding‬‬
‫‪Font:style /weight/size/height/family‬‬

‫لتنسيق الـ‪ Link‬وعمل عرض لحدث ال ‪ hover‬و‪active‬‬ ‫‪‬‬

 ‫‪3‬‬

‫}‪A{color:red;text-decoration:none‬‬ ‫فى الوضع العادى‬

‫}‪a.hover{color:green;font-weight:bold‬‬ ‫عند المرور عليه‬
‫}‪a.active{color:blue;font-weight:normal‬‬ ‫عند الضغط عليه‬

‫تنسيق الـ ‪ list‬وهى <‪ >ul‬او <‪>ol‬‬ ‫‪‬‬

‫}‪Ul{list-style-type:decimal‬‬ ‫للتحكم فى شكل العالمة التى تظهر بجانب عناصر القائمة ويوجد لها اشكال‬
‫كثيرة‬
‫}'‪List-style-image:url('a.png‬‬ ‫كما يوجد خاصية تبديل العالمة بصورة‬

‫ولكتابة الكود المختصر لها‬

‫};‪Ul{list-Style:disk inside none‬‬
‫};شكل العالمة داخل المحتوي صورة بدل العالمة‪Ul{list-style:‬‬
‫ملحوظة مهمة ‪:‬كل جزء يتم كتابتة ‪ HTML‬مثل <‪ >div‬او <‪ >p‬او <‪..… >h‬يمكن التحكم فى خصائصه العامة مثل‬ ‫‪‬‬
‫‪Borders,Margin,Padding,Dimintions(height-width),Display,Positions(top- right -bottom- left),float,clear‬‬
‫‪ Border‬او الحدود الى وسم او ‪Tag‬‬ ‫‪‬‬
‫;‪Borders-width:2px‬‬
‫;‪Border-style:dotted‬‬
‫;‪Border-color:red‬‬
‫ولكتابة الكود المختصر‬ ‫‪‬‬
‫;‪Border: 2px solid red‬‬
‫;‪Border:width style color‬‬
‫ولتنسيق جمالى مثال نعمل ‪ border‬بلون الخلفية ثم اثناء خاصية الـ ‪ hover‬وذلك لتفادى اى تأثيرات على المحتوى‬ ‫‪‬‬
‫وممكن اعمل ‪ border‬للجزء العلوي او اليمين او الجزء السفلى او الشمال كالتالى‬ ‫‪‬‬
‫;‪Border-top:2px dashed red‬‬
‫لقص الحواف‬ ‫‪‬‬
‫‪border-radius:10px‬‬
‫ملحوظة اى خاصية تأخذ ‪ 4‬قيم فهى بالترتيب ‪ :‬فوق – يمين – تحت – شمال مثل ‪border-width‬‬ ‫‪‬‬
‫‪Border-width:1px 2px 1px 2px‬‬
‫‪Border-style: dashed dotted dashed dotted‬‬
‫‪Border-color:red green red green‬‬
‫‪Border-color:top right bottom left‬‬
‫خاصية الـ ‪ Margins‬او الهوامش‬ ‫‪‬‬
‫الزالة الهوامش االفتراضية للصفحة‬ ‫‪‬‬
‫}‪.{margen:0px;padding:0px‬‬
‫خاصية ال ‪ Margin‬من الخصائص التى تأخذ ‪ 4‬قيم فوق يمين تحت شمال‬ ‫‪‬‬
‫‪Mergin:10px 10px 10px 10px‬‬
‫الـ ‪ margin‬تأخذ قيم سالبة وهنا تبدأ فى الخروج من التصميم‬ ‫‪‬‬
‫لتجنب عمل ‪ double‬في الـ‪ margin‬ممكن نعمل ‪ margin‬فوق وشمال عشان يعمل نفس المسافة بين الديفات‬ ‫‪‬‬
‫عشان نعمل العنصرفى وسط المحتوى هنعمل الـ ‪margin:auto‬‬ ‫‪‬‬
‫ملحوظة يقدم موقع ‪ placehold.it/100/100‬احجام جاهزة للصور لعرضها فى الموقع اثناء التصميم‬ ‫‪‬‬
‫الـ ‪ Padding‬او الهوامش الداخلية‬ ‫‪‬‬
‫‪Padding:7px‬‬
‫‪Padding:10px 10px 10px 10px‬‬
‫ال يأخذ الـ ‪ padding‬قيم سالبة النه هيودى امحتوى فين !!!‬
‫الـ ‪ Dimention‬اي الطول والعرض‬ ‫‪‬‬
‫;‪Width:400 px‬‬
‫‪Height:100px‬‬

‫كما يوجد ‪ min-width‬و ‪ max-width‬و ‪ min-height‬و ‪max-height‬‬ ‫‪‬‬

‫وعند استخدام خاصية ال‪ max‬سواء لل ‪ height‬و ‪ width‬نعمل معها خاصية الـ ‪ overflow:auto‬اي ‪ scroll‬وذلك يعنى ان‬ ‫‪‬‬
‫الزائد من المحتوى عن حجم الـ ‪ container‬يتم عمل ‪scrolling‬‬

‫خاصية الـ ‪ display‬وهى الخاصة بكيفية ظهور العناصر حيث يوجد عناصر تظهر جانب بعضها مثل <‪ >img > - <a>-<span‬وبعض‬ ‫‪‬‬
‫العناصر تظهر كبلوكات لحالها فى السطر مثل <‪ >p> - <div> - <h1‬فبهذة الخاصية نستطيع اظهار العناصر بجانب بعضها‬
 ‫‪4‬‬

‫‪Display:inline‬‬ ‫‪ Inline‬وتعنى ظهور العناصر بجانب بعضها‬

‫‪ Block‬ويعنى ظهور العنصر فى سطر لواحدها‬
‫‪ None‬وهى تخفى العنصر من التصميم اى ‪invisble‬‬

‫وضع العنصر الـ ‪position‬وقيمها ‪ static – fixed – relative-absolute :‬وقيمة االفتراضية هى ‪static‬‬ ‫‪‬‬
‫قيمة الـ ‪fixed‬ثجعله ثابت على مستوي الصفحة او التصميم حتى مع اال‪ scrolling‬فهو يفيد فى عمل خلفيات ثابتة على مستوى الصفحة‬
‫;‪Top:100px‬‬
‫;‪Right:20%‬‬
‫;‪Bottom:200px‬‬
‫;‪Left:200px‬‬
‫لو انا عملت <‪ >div‬وعملت خاصية ال ‪ posion:relative‬بيفضل مكانة محجوز على الصفحة حتى لو انا حركتة بخاصيتى ال ‪ top‬وال‬
‫‪bottom‬‬
‫لو عملت <‪ >div‬داخل ال <‪ >div‬السابق وعملت خاصية ا‪ position:absolute‬هيكون االول اب للثانى ولن يخرج عن محتواه بمعنى‬
‫انه بيدور على االب اللى فيه ال‪ position:relative‬عشان يكون ابن ليه وال يخرج عن محتواه‬
‫ال‪ float‬وهو الذى يجعل العنصر يعوم على الفورم وقيمة االفتراضية هى ‪none‬‬ ‫‪‬‬
‫‪Float:none‬‬ ‫القيمة ‪ none‬تجعله بقيمه العنصر االفتراضة‬ ‫‪‬‬
‫القيمة ‪ left‬تجعل العناصر تظهر جنب بعضها‬ ‫‪‬‬
‫القيمة ‪ right‬تجعل العناصر تظهر على الشمال‬ ‫‪‬‬
‫لو عندى عدد ‪ 3‬من <‪ >div‬وعملت التنين منهم خاصية ‪ float:left‬والثالث عملتله خاصية الـ ‪ float:right‬فسوف يظهر اول ‪< 2‬‬
‫‪ >div‬على الشمال والثالث على اليمين فى نفس السطر‬
‫ممكن اعمل مثال لعدد للمشاهدات مثال‬
‫>‪<div class="views">this is the views number<span>35 view</span></div‬‬
‫}‪.views{float:left‬‬
‫}‪.views span{float:right‬‬
‫الخصيه ‪ clear‬وهى مرتبطه بالـ ‪ float‬فمثال لو عاوزين نعمل ‪ 3‬من <‪ >div‬ونرين ان نصمم مثلهم ثالثه تانين‬ ‫‪‬‬
‫>‪<h1>programming Langs</h1‬‬
‫>‪<div class="left">c# lang</div‬‬
‫>‪<div class="left">vb lang</div‬‬
‫>‪<div class="left">F# lang</div‬‬
‫>‪<div class="clearFloat"></div‬‬
‫>‪<h1>databases</h1‬‬
‫>‪<div class="left">oracle</div‬‬
‫>‪<div class="left">sql</div‬‬
‫>‪<div class="left">access</div‬‬
‫وفى وسم ال <‪>style‬‬
‫};‪.left{width:400;color=white;background:blue;Float:left‬‬
‫}‪.clearFloat{clear:Both‬‬
‫و ‪ both‬تعنى الغاء الـ ‪ float‬من االتجاه اليمين والشمال‬
‫عمل ‪ grouping‬لسهوله عمل تنسيق للعناصر ومثال على ذلك‬ ‫‪‬‬
‫>‪<div class="one">amir</div‬‬
‫‪<div class="two">ahmed</div‬‬
‫>‪<div class="three">enas</div‬‬
‫وهم كلهم هياخدو نفس التنسيق مثل الخط و والهوامش وال‪ float‬وهيختلفو فى اللون‬
‫};‪.one,.two,.three{width:400px;padding:10px;margin:20px;Float:left‬‬
‫};‪.one{background:red‬‬
‫};‪.two{background:blue‬‬
‫};‪.three{background:yellow‬‬
‫ويمكن عمل لل‪ two.‬خاصية ال‪ float:right‬حيث سيتم وضعه على اليمين‬
‫وكذلك يمكن عمل جمع عند تنسيق العناصر كالتالى‬
‫};‪H1,span,div{color:red‬‬

‫عمل ‪ Nasting‬وهو ايضا طريقة طريقة للوصول الى العناصر‬ ‫‪‬‬

‫>"‪<Div class="container‬‬
‫‪This is the container div‬‬
 ‫‪5‬‬

‫>‪<p>paragraph child from container</p‬‬

‫>‪</div‬‬
‫>‪<p>this a parent paragraph</p‬‬

‫وفى ملف الـ ‪ style.css‬او الوسم <‪>style‬‬

‫};‪P{color:blue‬‬
‫};‪.container p{color:red‬‬
‫الـ ‪ OverFlow‬هو يحدث عندما يزيد المحتوى عن حجم العنصر اى عن منطقة الـ ‪ workflow‬للعنصر وذلك عند تحديد خاصيتى الطول‬ ‫‪‬‬
‫والعرض للعنصر ولكن المحتوي اكبر من الطول والعرض‬
‫;‪Div {width:200px;height:200px:background:red;padding:5px‬‬
‫‪Overflow:visible‬‬ ‫القيمة ‪ visible‬اى ان المحتويالزائد يخرج عن حدود العنصر‬ ‫‪‬‬
‫القيمة ‪ hidden‬تعنى ان المحتوى الزائد مخفى وال يمكن رؤيته‬ ‫‪‬‬
‫القيمة ‪ scroll‬سيعمل ‪ scrolling‬ولكن ثابته حتى فى حالة عدم وجدود محتوى زائد‬ ‫‪‬‬
‫القيمة ‪ auto‬النها فى حالة وجود محتوى زائد تعمل ‪ scrolling‬طولى او عرضى وان لم‬ ‫‪‬‬
‫يوجد محتوى زائد تخفى الـ ‪scrolling bar‬‬

‫ملحوظة ‪ :‬لو عملت <‪ >div‬وفيه عدد ‪ 2‬من الـ <‪ >p‬وعملت لتنسيق الـ ‪ p‬ان خاصية ال ‪ float:left‬فسوف تعوم ال<‪ p> 2‬على‬ ‫‪‬‬
‫الصفحة وتخرج عن حجم العنصر ويكون طول ال<‪= >div‬صفر ولعالج ذلك هنحكمهم جوه ال <‪ >div‬بتنسيقة وجعله ال يسمح بخروج‬
‫عنصر من دالخله‬
‫};‪.dev1{overflow:hidden‬‬
‫خاصية الـ ‪ visibility‬والفرق بينها وبين خاصية ال‪display:nome‬‬ ‫‪‬‬
‫>‪<div class="div1">this is div 1</div‬‬
‫>‪<div Class="div2">this is div 2</div‬‬
‫وفى ال ‪css‬‬
‫};‪Div { float:left;background:red;color:white;width:100px;padding:10px‬‬
‫}‪.div1 {visibility:heddin‬‬
‫هنا هيقوم باخفاء ال ‪ div1‬ولكن سيظل مكانة موجود على التصميم‬ ‫‪‬‬
‫}‪.div2 {display:none‬‬
‫هنا هقيوم بازالة العنصر من التصميم وبيشيل مكانه من على ال‪workflow‬‬ ‫‪‬‬
‫‪ Z-Index‬وهى قيمة تشير الى العناصر التى تظهر على الوش حيث القيمه االعلي تشير الى الطبقة اللى على الوش‬ ‫‪‬‬
‫وهو يتعامل مع العناصر اللى معمول لها ‪ manual positions‬فمثال لو عندى ‪ div 3‬وحبيت انسقهم وهنعملهم خاصية‬ ‫‪‬‬
‫‪ position :absolute‬لكى نعطيهم حرية الحركة‬
‫}‪.div1,.div2,div3{position:absolute;width:100px;height:100px‬‬
‫};‪.div1{ z-index:1;backcolor:red;top:0px;left:0px‬‬
‫};‪.div2{ z-index:2;backcolor:blue;top:20px;left:20px‬‬
‫};‪.div3{z-index:3;backcolor:green;top40px;left:40px‬‬
‫هنا ال‪ div1‬هو الطبقة السفلية و ‪ div2‬فوق ال‪ div1‬و ‪ div3‬فوقهم جميعا النه صاحب القيمة االعلى‬
‫خاصية ال‪ content‬وهى تقوم باضافة محتوى الى صفحة الـ ‪ html‬ولكن من ال ‪ css‬فلو عندى ‪ div‬وعاوز اضيف فيه نص معين‬ ‫‪‬‬
‫};"‪Div:after{content:"hello‬‬
‫};"‪Div:before{content:"iam here from css‬‬
‫‪ Mouse cursor‬ويوجد له مجموعة اشكال يمكن االختيار من بينها‬ ‫‪‬‬
‫>‪<a href="http:/www.google.com">google</a‬‬
‫>‪<span>amir</span‬‬
‫وقى ال ‪css‬‬
‫};‪Span{cursor:pointer‬‬

‫الـ ‪ outline‬وهى نسخه طبق االصل من تنسيقات ال ‪ border‬ولكنه من الخارج فال ياخذ مساحه من العنصر وال ال ‪ box aria‬اما ال‬ ‫‪‬‬
‫‪ padding‬وال ‪ border‬تأخذ من مساحة العنصر‬
‫ممكن اعمل اشكال جمالية على شكل ‪ borders‬و ‪outline‬‬ ‫‪‬‬
‫ال ‪ outline‬ال يؤثر على حجم العنصر النه تأثير خارجى‬ ‫‪‬‬
‫>"‪<div class:"parent‬‬
‫‪This is parent div‬‬
‫>‪<aside‬‬
‫‪this is child aside‬‬
 ‫‪6‬‬

‫>‪<div>this is child div from a side</div‬‬

‫>‪</aside‬‬
‫>‪<p>this is child paragraph</p‬‬
‫>‪<div>this is child div</div‬‬
‫>‪<div‬‬
‫}{‪.parent{} OR div .parent‬‬ ‫لتنسيق الـ ‪parent‬‬
‫}{‪Div .parent div‬‬ ‫هينسق كل ال‪ div‬اللى داخل ال‪parent‬‬
‫}{‪.parent p‬‬ ‫هينسق كل ال ‪ P‬اللى داخل ال ‪parent‬‬
‫}{‪.parent > div‬‬ ‫هينسق اى ‪ only child div‬داخل ال ‪ parent‬ولكن بدون التأثير على ال‪div‬‬
‫> وهى تعنى الـ ‪direct child‬‬ ‫االحفاد اى اللى داخل عناصر اخري‬
‫}{‪.parent aside div‬‬ ‫هنا هينسق ال‪ div‬الى جوه ‪aside‬‬
‫}{*‬ ‫هيعمل تنسيق لكل العناصر‬
‫}{‪P + div‬‬ ‫العالمة ‪ +‬تعنى نسق بس ال ‪ p‬اللى بعدة مباشرة ‪div‬‬
‫}{‪P~div‬‬ ‫العالمة ~ يعنى نسق كل االشقاء للـ ‪ p‬شرط نوعها ‪ div‬وبعد ‪ p‬مباشرة‬
‫}{* ‪Div‬‬ ‫تنسيق كل العناصر اللى جوه ال‪div‬‬
‫};‪P:first-letter{border-radius:10px‬‬ ‫‪ First-letter‬تعنى اول حرف فى الفقرة والمثال لعمل حواف للعنصر‬
‫};‪P:first-line{color:red‬‬ ‫لتنسيق اول سطر فى الباراجراف‬
‫}{‪Div p:first-child‬‬ ‫هيعمل تنسيق الول ابن من نوع ‪ p‬فى كل ‪div‬‬

‫ملحوظة ‪ :‬ممكن انسق بداللة القيمة كالتالى‬ ‫‪‬‬

‫}‪A[target:"_blank"]{color:red‬‬ ‫يعنى بقوله نسق عنصر ‪ a‬اللى فيه ‪ "target:"_blank‬خلي لون الخط احمر‬
‫‪ Media‬وتعنى مكان تطبيق التنسيق هل فى وضع الطباعة او وضع العرض العادى ونمررها كالتالى‬ ‫‪‬‬
‫>‪<link rel="stylesheet" ahref="style.css" media="print"/‬‬
‫>‪<link rel="stylesheet" ahref="style.css" media="screen"/‬‬
‫وممكن اكتبه فى ملف ال ‪ css‬كالتالى‬
‫} };‪@media print{ p{colot:red‬‬
‫} };‪@media screen{ p{color:blue‬‬
‫عند كتابة خاصية ال ‪ float‬لمحتوى داخل عنصر او مثال عنصر داخل ال‪ body‬فالبد من الكتابة فى العنصر االب ان المحتوى الزائد عن‬ ‫‪‬‬
‫العنصر يكون مخفى كالتالى‬
‫;‪Overflow:hidden‬‬
‫عشان الصورة تمال ال‪ div‬اللى هى جواه هنعمل للصورة خاصية ال ‪width:100%‬‬ ‫‪‬‬
‫عشان انسق اخر عنصر من نوع ‪ p‬فى ‪div‬معين‬ ‫‪‬‬
‫}{‪.info p:last-of-type‬‬
‫بدل كل مره اعمل فيها ال‪ float:left‬فى ملف ال ‪ css‬فممكن اعمله فى ملف ال‪ html‬كالتالى‬ ‫‪‬‬
‫‪# In CSS File :‬‬
‫}‪.FloatLeft{float:left‬‬
‫}‪.FloatRight{Float:right‬‬
‫}‪.ClearFloat{clear:float‬‬
‫‪# In Html File:‬‬
‫>‪<h2 class="FloatLeft">hi html</h2‬‬
‫>‪<h2 class="FloatRight">iam css</h2‬‬
‫>‪<p class="ClearFloat">hi all</p‬‬
‫وهنا ممكن اعمل مثال تنسيقات معينه ل ‪ textbox‬باسم ‪formattextbox‬وانادى على التنسيقات اثناء انشاء عنصر ال‪text‬‬ ‫‪‬‬
‫لو عاوز انادى على ‪ 2‬كالس بعمل بينهم مسافة كالتالى‬ ‫‪‬‬
‫>‪<div class="info floatleft"></div‬‬
‫لو عاوز اعمل المنيو اللى على يمين الصفحة ‪:‬هنعمل ‪ div‬وبداخلة ‪ ul‬او ‪ ol‬ونعمل خاصية الـ ‪ display:none‬ونتحكم في اظهارها او اخفائها بعد‬
‫كده باستخدام ال ‪ #c‬وممكن نستخدم الكود ده (‪)menuDiv.visible=false‬‬
‫‪ }{P + div‬شرح اكتر‪:‬مثال لو عندنا ‪ 2p‬وبعدهم ‪ div‬هنا هينسق الـ ‪ p‬رقم ‪ 2‬الن بعده ‪div‬‬ ‫‪‬‬

‫ثانيا الـ ‪CSS3‬‬

‫الحواف او ال ‪border-radius‬‬ ‫‪‬‬
‫;‪Border-radius: top | right | bottom | left‬‬
‫;‪Border-radius:10px 10px 10px 10px‬‬
‫)‪Border-radius:10px; (For All‬‬
 ‫‪7‬‬

‫وممكن اعمل لكل حافه لحالها كالتالى‬ ‫‪‬‬

‫;‪Border-top-right-radius:10px‬‬
‫;‪Border-top-left-radius:10px‬‬
‫;‪Border-bottom-right-radius:10px‬‬
‫;‪Border-bottom-left-radius:10px‬‬
‫هى من الخواص التى يتم تحديد ال ‪ provider‬لها (~‪)~webkit~ - ~moz~ - ~o~ - ~ms‬‬ ‫‪‬‬
‫‪ Box-shadow‬والقيمة االفتراضيه لها هى ‪none‬‬ ‫‪‬‬
‫‪Box-shadow: H-Value|V-value|spread|blur|color|inset-outset‬‬
‫;‪Box-shadow:-5px 5px 8px 5px #ddd‬‬
‫ممكن اغير مكان الشادو باعطاء قيم موجبه وساليه لقيم ‪ H:Horizontal‬و ‪V:Vertical‬‬ ‫‪‬‬
‫لو عاوز الشادو يكون داخلي بكتب القيمة ‪ inset‬حيث ان لم اكتبها فاالفتراضي ‪outset‬‬ ‫‪‬‬
‫‪ Blur‬هى القيمة الضبابية و ‪ spread‬هى درجة االنتشار‬ ‫‪‬‬
‫لو عاوز اعمل الشادو على الديف كله بكتب القيم مرتين وبفصل بينهم بكومه مع االخذ فى االعتبار القيم الموجبه والسالبه كالتالى ‪:‬‬ ‫‪‬‬
‫;‪Box-shadow:-5px 5px 8px 5px #ddd , 5px -5px 8px 5px #ff0‬‬
‫وممكن اعمل شادو فوق الشادو بانى اكتب نفس القيم بنفس السالب والموجب مع تغيير اللون كالتالى‬ ‫‪‬‬
‫;‪Box-shadow:-5px 5px 8px 5px #ddd , 5px -5px 8px 5px #ff0‬‬
‫هى من الخواص التى يتم تحديد ال ‪ provider‬لها (~‪)~webkit~ - ~moz~ - ~o~ - ~ms‬‬ ‫‪‬‬
‫ال ‪ border-box‬ويتم تطبيقة على كل العناصر وهو تنسيق يفيد فى ظبط المساحات بعد عمل ال ‪margin-border-outline-padding‬‬ ‫‪‬‬
‫بحيث ان هذه الخصائص ال تؤثر على مساحة العنصر وبعمله كالتالى‬
‫};‪*{ box-sizing: border-box‬‬
‫افكار ‪css‬‬ ‫‪‬‬
‫ممكن اعمل صورة على شكل دائرة‬ ‫‪‬‬
‫};‪Img{border-radius:50%‬‬
‫ال ‪ text-shadow‬هو زي ال ‪ box-shadow‬فيمكن تطبيقة على جميع العناصر التى تحتوى على نصوص مثل <‪ >h1‬و <‪ >p‬كالتالى‬ ‫‪‬‬
‫} ‪H1{text=shadow: 1px 2px 3px #fff , 1px 2px 3px #00f , 1px 2px 3px #ddd‬‬
‫واغير القيم واعمل ‪ hover‬ودلع الدنيا باه‬ ‫‪‬‬
‫‪ Text-overflow‬وهى تقوم بتعريف المستخدم بان الكالم لسه له باقى بوضع ثالث نقاط اخر الجمله‬ ‫‪‬‬
‫>‪</div‬كالم كتييييير>‪<div‬‬
‫};‪Div{overflow:hidden;text-overflow:ellipsis‬‬
‫};‪Div:hover{overflow:visible‬‬
‫ال ‪ word-warp‬وهى خاصية تقسم الكلمة او الجمله فى حال انتهاء المساحة المخصصة لكتابتها وتنزل فى سطر جديد والفرق بينها وبين‬ ‫‪‬‬
‫‪ ;white-space:normal‬هى ان ال ‪ white-space‬ال تفصل او تقطع الكلمة وتنزل فى سطر جديد اال بعد انتهاء الكلمةوعمل مسافة‬
‫وطريقة استخدام الخاصية كالتالى‬
‫;‪Word-warp:break-word‬‬
‫ال ‪ transform‬وتاخذ مجموعه من القيم وكل قيمة لها نوعان ‪ 2d – 3d‬وهى من العناصر التى لها ‪provider‬‬ ‫‪‬‬
‫‪ Rotate‬اى التدوير‬ ‫‪‬‬
‫;)‪Transform:rotate(30deg‬‬
‫‪ Scale‬اى عمل تمديد ويستخدم كالتالى‬ ‫‪‬‬
‫)‪Transform :scale(width,height‬‬
‫هنا القيم (‪ )1 , 1‬هنا مش هيحصل حاجه الن ‪ 1‬و ‪ 1‬تعنى الطول والعرض الحالى فممكن نخليها ‪ 1.2‬و ‪ 1.4‬فممكن‪ -‬نستخدمه مع ال ‪hover‬‬

‫وممكن اعمل )‪ scaleX(1.1‬وهى تعنى ال ‪ with‬و ‪ scaleY‬وهى تعنى الطول او ‪height‬‬

‫ال ‪ translate‬وى خصية تعمل على تحريك العنصر وهو يضا تعتمد على ال ‪ x‬و ‪ y‬فال ‪ y‬تعنى تحريق العنصر فوق وتحت ام ‪X‬‬ ‫‪‬‬
‫تعنى تحريك العنصر يمينا ويسارا‬
‫)‪Transform:translate(20px,10px‬‬
‫ويمكن عمل ‪ translateX‬فقط او ‪ translateY‬فقط‬

‫كما يمكن استخدام اكثر من خاصية فى ال ‪ transform‬كالتالى‬ ‫‪‬‬

‫;)‪Transform:translate(10px 10px) scale(.5,.6‬‬
‫ال ‪ skew‬وهى خاصية تقوم بعمل ميالن او انحراف للعنصر‬ ‫‪‬‬
‫)‪Transform:skew(y,x) (10deg,10deg‬‬
‫ال ‪ matrix‬وهى تشمل كل القيم السابقة ولكن فى سطر واحد كالتالى‬ ‫‪‬‬
‫)‪transform:matrix(scaleX | skewY | skewX | ScaleY | translateX | translate‬‬
‫لعمل ‪ flip‬لصورة مثال كالتالى بجعل خاصية ال )‪scale(-1,1‬‬ ‫‪‬‬
‫ال‪ rotate 3d‬والفرق بينه وبين التدوير ال ‪ 2d‬هو ان ال ‪ 2d‬يعمل تدوير يمينا ويسارا اما ‪ 3d‬يعمل تدوير فوق وتحت ويمكن كتابتة‬ ‫‪‬‬
‫باشكال مختله كالتالى‬
 ‫‪8‬‬

‫;)‪Transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg‬‬

‫)‪Transform:rotate3d(180deg,180deg,180deg‬‬
‫;)‪Transform:rotateX(180deg‬‬
‫;)‪Transform:rotateY(180deg‬‬
‫;)‪Transform:rotateZ(180deg‬‬
‫الـ ‪translate 3d‬‬ ‫‪‬‬
‫;)‪Transform:translate3D(x,y,z‬‬
‫;)‪Transform:translate3D(10px,5px,20px‬‬
‫‪ Z‬هو البعد الثالث وتطبيقة يعنى انه لو قيمتة موجبه فالشكل نفسة هيدخل عليا ويكأنه بيقرب منى ول سالبة فالشكل هيبعد عنى‬ ‫‪‬‬
‫وممكن اعمل لكل بعد من االباد الثالثه لواحده كالتالى‬ ‫‪‬‬
‫;)‪Transform:translateX(10px‬‬
‫;)‪Transform:translateY(5px‬‬
‫;)‪Transform:translateZ(20px‬‬
‫الـ ‪scale 3D‬‬ ‫‪‬‬
‫)‪Transform:scale3d(x,y,z‬‬
‫)‪Transform:scale3d(10px,20px,10px‬‬
‫وممكن يتكتب كل بعد لواحده من االبعاد الثالثه كالتالى‬ ‫‪‬‬
‫;)‪Transform:ScaleX(10px‬‬
‫;)‪Transform:ScaleY(5px‬‬
‫;)‪Transform:ScaleZ(20px‬‬
‫والزم يكون معاها خاصية ثانية عشان يبان الفرق‬ ‫‪‬‬
‫والزم يتعمله هو وال‪ translate‬نعملهم منظور للديف االب ‪ perspective:600px‬يعنى المساحه الى هيتم تطبيق خواص ال‬ ‫‪‬‬
‫‪ 3d‬فيها‬
‫‪ Matrix 3d‬ودى هنعملها اسهل من موقع ‪ ds-overdesign.com‬ويكون بداخلها ‪ 16‬قيمة كالتالى‬ ‫‪‬‬
‫)‪Transform:Matrix3d(16 value‬‬
‫الـ ‪ perspective‬او المنظور وهى خاصية تسمح للعناصر بتشغيل خواص ال ‪ 3d‬فمثال هنعمل ‪ matrix3d‬لالبناء ونعمل لالب‬ ‫‪‬‬
‫‪ perspective=600px‬واالفتراضى لها هو القيمة ‪none‬‬
‫لو هنعمل مثال صورة تقريب من المستخدم اى تكبر فانا هنا بحددلها المسافه او المساحه اللى هتكبر فيها يعنى ال ‪ perspective‬هوو‬
‫المسافه اللى بيني وبين العنصر نفسه فمثال هنعمل )‪ transform:translate(599px‬نالحظ ان القيمة اللى هيعمل فيها العنصر‬
‫‪ translate‬وهى ‪ 599‬اقل من مساحة المنظور اللى هو ‪ 600‬ولو قيمة الترانسالت ‪ 600‬هنا مش هنقدر نشوف العنصر النه خرج‬
‫بره المنظور‬
‫للوصول اسرع للعناصر لتنسيقها فى ال ‪ css‬فلو عندنا‬ ‫‪‬‬
‫>‪<div><img src="a.png"/></div‬‬
‫>‪<div><img src="a.png"/></div‬‬
‫>‪<div><img src="a.png"/></div‬‬
‫};‪Div:first-of-type{perspective:500px‬‬
‫};‪Div:nth-of-type{perspective:300px‬‬
‫}‪Div:last-of-type{perspective:200px‬‬
‫};‪Div img:{display:block;margin:50px auto;transition:all .5s ease-in-out‬‬
‫})‪Div img:hover{transform:translateZ(100px‬‬
‫هنا كل صوره من الثالث صور هتقرب منى ‪ 100px‬حسب المنظر الخاص بها‬
‫الصورة االولى هتقترب منى ‪ 100px‬من ‪500px‬‬ ‫‪‬‬
‫الصورة الثانية هتقترب منى ‪ 100px‬من ‪300px‬‬ ‫‪‬‬
‫الصورة الثالثه هتقترب منى ‪ 100px‬من ‪200px‬‬ ‫‪‬‬
‫ويوجد للـ ‪ perspective‬عنصر مساعد وهو‬ ‫‪‬‬
‫;‪Perspective="500px‬‬
‫‪Perspective-origin:x y DefaultValue 50% 50%‬‬
‫والـ ‪ perspective-origin‬تعنى المكان اللى هبص فيه على العنصر‬ ‫‪‬‬
‫الـ ‪ transform-origin‬هو المكان اللى هيبدا يعمل منه العنصر خواص ال ‪ 3d‬مثل ال ‪rotate – scale‬‬
‫‪;Div:hover{transform:rotate(360deg);transform-origin:top center‬‬
‫‪;transform-origin:50% 50%‬‬
‫‪;transform-origin:top center‬‬
‫‪;transform-origin:30% 90%‬‬
‫الـ ‪ transform-style‬وهو تنسيق يتم وضعه فى ال‪ div‬االب للمحافظ على خواص لب ‪ 3d‬لالبناء اى انها تقوم بتفعيل خواص ال‬ ‫‪‬‬
‫‪ 3d‬للعناصر وقيمتها االفتراضيه ‪ flat‬فنغيرها كالتالى‬
‫‪Transform-style:preserve-3d‬‬
‫الـ ‪ backface-visibility‬وهى ظهر العنصر هل تريد اظهاره ام ال يعنى لو عملنا ‪ div‬وكتبنا فيه شوية كالم وعملنا ‪ rotate‬هنا‬ ‫‪‬‬
‫ظهر ال‪ div‬هيظهر وبه الكالم مقلوب فاذا كنا النريد اظهار ضهر ‪ div‬هنكتب التالى‬
 ‫‪9‬‬

‫;‪Backface-visibility:visible‬‬ ‫)‪ hidden‬و ‪(visible‬‬

‫‪ Overflow‬ممكن احدد الـ ‪ overflow‬للـ ‪ X‬او ‪y‬حيث يمكن اعطائهم قيم محتلفة‬ ‫‪‬‬
‫;‪Overflow-x:scroll‬‬
‫;‪Overflow=y:hidden‬‬
‫ال ‪ resize‬وهى غير مدعومة فى الـ ‪ I-E‬وهى مرتبطة بخاصية الـ ‪overflow‬‬ ‫‪‬‬
‫;‪Resize:both‬‬ ‫هتخلى المستخدم‪ -‬يعنل ‪ resize‬افقى وراسى للعنصر‬
‫;‪Resize:vertical‬‬ ‫هتخلى المستخدم‪ -‬يعمل ‪ resize‬عمودى للعنصر‬
‫;‪Resize:horizontal‬‬ ‫هتخلى المستخدم‪ -‬يعمل ‪ resize‬افقى للعنصر‬
‫القيمة االفتراضية للخاصية ‪ resize‬هى ‪ none‬فمثال لو عندى <‪ >textaria‬فالقيمة االفتراضية للخاصية ‪ resize‬لها هى ‪ both‬فلو‬ ‫‪‬‬
‫عاوزين نعملها ‪ reset‬بننسق خاصية ال ‪;resize:none‬‬
‫‪ Opacity‬او درجة الشفافية وقيمتها االفتراضية لها هى ‪ 1‬وهى تقبل من صفر الى واحد‬ ‫‪‬‬
‫;‪Opacity:.3‬‬
‫وممكن بدل ما نعمل للعنصر ‪ ;visibility:hidden‬نعمل الـ ‪;opacity:0‬‬ ‫‪‬‬
‫الـ ‪ flexbox‬او الصندوق المرنفهو يستخدم لعمل ‪ layout‬متجاوب وهى خاصية تعمل على المتصفحات الحديثه وهو ينقسم الى‬ ‫‪‬‬
‫جزئين ‪:‬خواص ُت غطى لالباء وخواص لالبناء عشان يشتغل مظبوط‬
‫>”‪<div class=”container‬‬
‫>‪<div class=”one”>div1</div‬‬
‫>‪<div class=”two”>div2</div‬‬
‫>‪<div class=”three”>div3</div‬‬
‫>‪</div‬‬
‫وفى ملف ال ‪ css‬هننسق ال الديف االب كالتالى‬ ‫‪‬‬
‫;‪.container{width:800px;margin:50px auto;background-color=#eee ;padding:10px;display:flex‬‬
‫;‪Flex-direction : row‬‬ ‫هنا ال ‪ div 3‬هتظهر جنب بعضها وهى القيمة االفتراضية‬
‫;‪: row-reverse‬‬ ‫يعكس اتجاه الصفوف يمينا ويسارا‬
‫;‪: column‬‬ ‫هنا ال ‪ div 3‬هيظهرو فوق بعض بشكل عمودى‬
‫‪: column-reverse‬‬ ‫هيعكس اتجاه الديفيات عموديا فوق وتحت‬
‫;‪Flex-warp : nowarp‬‬ ‫هى القيمة االفتراضية‬
‫;‪: warp‬‬ ‫هنا فى حالة الضرورة هيعمل ‪ warp‬او التفاف للعناصر‬
‫;‪: warp-reverse‬‬ ‫هنا لو عمل ‪ warp‬هيعكس ترتيب االلتفاف‬
‫;‪Flex-flow:flex-direction | flex-warp‬‬ ‫االختصار الكودى لكتابة اتجاه الفلكس والفلكس وارب‬
‫;‪: row nowarp‬‬ ‫مثال‬
‫;‪Justify-content : flex-start‬‬ ‫محازاه المحتوى بداية‬
‫;‪: flex-end‬‬ ‫محازاه المحتوى نهاية‬
‫‪: center‬‬ ‫محازاة المحتوى بالوسط‬
‫;‪: space-between‬‬ ‫بتعمل مسافة‪ -‬بين الديفات‬
‫;‪: space-around‬‬ ‫بتعمل مسافات حول العنصر يمينا ويسارا‬

‫;‪Align-item : stretch‬‬ ‫وهى القيمة االفتراضية‬

‫;‪: flex-start‬‬ ‫بيخلى الديف على اد المحتوى يعنى حسب عدد االسطر‬
‫;‪: flex-end‬‬ ‫هنا الديفات هتنزل تحت فى ال ‪container‬‬
‫;‪: center‬‬ ‫هنا الديفات هتظهر فى نص الديف الرئيسي‬

‫وفى ملف ال ‪ css‬هننسق ال الديفات االبناء كالتالى‬ ‫‪‬‬

‫‪ Order‬لترتيب ظهور العناصرالداخلية كالتالى‬ ‫‪‬‬

‫};‪.one{order:3‬‬ ‫‪ Div1‬هيظهر تالت عنصر‬

‫};‪.two{order:2‬‬ ‫‪ Div2‬هيظهر تانى عنصر‬
‫};‪.three{order:1‬‬ ‫‪ Div3‬هيظهر اول عنصر‬
‫‪ Flex-grow‬هو يعمل نمو للعنصر يعنى لو عندى الديف االب عرضه ‪ 400‬وعندى جواه ‪ 3‬ديف ابناء وكل عنصر عرضه ‪50‬‬ ‫‪‬‬
‫وعملت ‪ tow{flex-grow:1;}.‬هنا ال ‪ two‬هيفضل يعرض عشان يكمل عرض الديف االب‬
‫‪ Flex-shrink‬هو يعمل على تقليص او تصغير عرض العنصر وقيمة االفتراضية هى ‪ 1‬اى ال يعمل‬ ‫‪‬‬
 ‫‪10‬‬

‫يعنى لو عملت ‪ two{flex-shrink:0;}.‬وهذا يعنى خلى العرض للعنصر زى ما انا محدده وذلك فى حالة ان الديف االب عرضه‬ ‫‪‬‬
‫بيصغر‬
‫الـ ‪ transition‬تتحكم فى وقت االنتقال او وقت تنفيذ حركات ال ‪ 3d‬والكود المختصر كالتالى‬ ‫‪‬‬
‫; ‪Transition : property | duration | timing |delay‬‬
‫مثال ‪ :‬لوعندى ديف وعاوز ازود مساحته بشكل انيق‬ ‫‪‬‬
‫}; ‪Div{width:200px;height:100px;background-color:red;transition:width .5s ease,background-color:2s ease‬‬
‫};‪Div:hover{width:300px; background-color:blue‬‬
‫اما الكود تفصيليا‬ ‫‪‬‬
‫; ‪Transition-property : width , background‬‬ ‫الخواص اللى هعمل عليها تأثر االنتقال‬
‫; ‪Transition-duration : .5s , 2s‬‬ ‫مدة التنفيذ‬
‫]‪Transition-timing-function : ease [Default‬‬ ‫يبدأ وينتهى تدريجيا‬
‫‪: ease-in‬‬ ‫يبدأ تدريجيا وينتهى فجأه‬
‫‪: ease-out‬‬ ‫يبدأ فجأه وينتهى تدريجيا‬
‫‪: ease-in-out‬‬ ‫يبدأ وينتهى تدريجيا‬
‫‪: ease-linear‬‬ ‫يبدأ فجأه وينتهى فجأه‬
‫; ‪Transition-delay : . 5s‬‬ ‫مدة التأخير قبل التنفيذ‬
‫‪ Column-count‬وهى خاصية لها ‪ provider‬وهى تقسم مثال المقال الكر من عمود‬ ‫‪‬‬
‫>‪</div‬كالااااااااااااااااااام كتييييييييييييييييييييير>‪<div‬‬
‫فلو عاوز الكالم الكتير ده يتقسم على اكتر من عمود‬ ‫‪‬‬
‫;‪Div{~webkit~column-count:3‬‬ ‫عدد االعمدة‬
‫;‪~webkit~column-gap:100px‬‬ ‫المسافة او الفرق بين االعمدة‬
‫;‪~webkit~column-rule:4px solid #080‬‬ ‫الفواصل بين االعمدة‬
‫;‪~webkit~column-width:100px‬‬ ‫عرض العمود الواحد‬
‫ولو عندى مع الكالم الكتير ده اللى فى الديف هنحط فيه ‪ h1‬وننسقه كالتالى‬ ‫‪‬‬
‫};‪Div h1{~webkit~column-span:all‬‬
‫هنا الـ ‪ h1‬هيبقى فوق كل االعمده وبدون هذا الكود سيصبح ال ‪ h1‬جزء من االعمده‬

‫‪ Animation‬وفكرتها انى بعمل ‪ function‬مثال ‪ moving‬وبعدين اطبقا على العنصر واعطيله من ضمن القيم اسم ال‪ function‬اللى هى‬ ‫‪‬‬
‫‪ moving‬كالتالى‬
‫{ ‪@keyframes moving‬‬
‫};‪0% {left:0 ; top: 0‬‬
‫};‪25%{left:200px;top:0‬‬
‫};‪50%{left:200px ;top:200px‬‬
‫};‪75%{left:0 ; top:200px‬‬
‫} };‪100%{left:0 ; top:0‬‬
‫};‪Div{width:100px;height:100px;position:absolute;animation:moving 3s 6 linear‬‬
‫والخصائص منفرده كالتالى‬ ‫‪‬‬
‫; ‪Animation-name : moving‬‬ ‫اسم الـ ‪ function‬اللى عملتها بال ‪keyframes‬‬
‫; ‪Animation-duration : 3s‬‬ ‫مدة االنيميشن‬
‫; ‪Animation-iteration-count : 2‬‬ ‫عدد مرات التكرار‬
‫; ‪:infinite‬‬ ‫عملية االنيميشن متكررة باستمرار‬
‫;‪Animation-direction:reverse‬‬ ‫اتجاه االنيميشن‬
‫;‪:alternate‬‬ ‫هنا هيبدا من االول لالخر وبعدين من االخر لالول وهكذا‬
‫;‪Animation-delay:3s‬‬ ‫مدة التأخير‬
‫;‪Animation-fill-mode : normal‬‬ ‫[‪]default‬‬
‫;‪: forwards‬‬ ‫هنا هيقف عند اخر ‪ kewframe‬انت عطيتهوله يعنى هيقف عند قيم ال ‪%100‬‬
‫;‪: backwards‬‬ ‫هنا هيقف عند اول قيم ال ‪ keyframe‬يعنى هيقف على قيم ال ‪%0‬‬
 ‫‪11‬‬

‫;‪: both‬‬ ‫هنا هينفذ ال ‪ forwards‬وال ‪backwards‬‬

‫; ‪Animation-play-state:running‬‬ ‫حالة االنيميشن ‪ :‬يعمل[‪]default‬‬
‫‪:paused‬‬ ‫حالة االنيميشن ‪:‬متوقف‬
‫‪Animation-timing-function:ease‬‬ ‫يبدأ وينتهى تدريجيا‬
‫‪:ease-in‬‬ ‫يبدأ تدريجيا وينتهى فجأه‬
‫‪:ease-out‬‬ ‫يبدأ فجأه وينتهى تدريجيا‬
‫‪:ease-in-out‬‬ ‫يبدأ وينتهى تدريجيا‬
‫‪:ease-linear‬‬ ‫يبدأ فجأه وينتهى فجأه‬

‫ال ‪ shorthand code‬للـ ‪animation‬‬ ‫‪‬‬

‫; ‪Animation:PropertyName | Duration | Timing | Delay | Iteration | Direction | FillMode | PlayState‬‬

‫; ‪Animation:moving 4s ease 0s 3 normal none running‬‬

‫بعض الـ ‪selectors‬‬ ‫‪‬‬
‫}{ ‪P ~ span‬‬ ‫~ وتعنى ‪ next‬يعنى اى ‪ P‬ييجي بعده ‪ span‬ومشتركين فى نفس االب نفذ التنسيق‬
‫} {]”‪[class ^ = ”osama‬‬ ‫وتعنى شوف االتربيوت اللى من نوع ‪ class‬وبيبدا ب‪ osama‬ونسقه‬
‫} {]”‪[name ^ = ”os‬‬ ‫وتعنى شوف االتربيوت اللى من نوع ‪ name‬وبيبدا ب‪ osama‬ونسقه‬
‫} {]”‪[class $ = ”ma‬‬ ‫وتعنى شوف االتربيوت اللى من نوع ‪ class‬وينتهى بـ ‪ma‬‬
‫} {]”‪[class * = ”s‬‬ ‫وتعنى شوف االتربيوت اللى من نوع ‪ class‬وتحتوى على ‪S‬‬
‫};‪:checked {color:red‬‬ ‫يعنى لو لقيت ‪ checkbox‬او ‪ radio‬اتعمله ‪ check‬خلى لون الخط احمر‬
‫}{ ‪Input[type=”radio”] :checked‬‬ ‫وممكن اوصل للعناصر كده يعنى العنصر اللى نوع ‪ radio‬واتعمله ‪checked‬‬
‫} {‪:disabled‬‬ ‫يعنى اى عنصر معمول له ‪ disabled‬نفقذ التنسيق‬
‫} {‪:enabled‬‬ ‫يعنى اى عنصر معمول له ‪ enabled‬نفذ التنسيق‬
‫} { ‪:empty‬‬ ‫يعنى اى عنصر فاضى من غير قيم نفذ عليه التنسيق مثل ‪ p‬او ‪div‬‬