شرح دورة الـ CSS للمبتدئين - الدرس الحادى عشر

الاوامر المتحكمه فى الصور:
# الفرق بين ..

1- Position : خاصيه تحدد احداثيات الصوره فى الصفحه كلها

للتعرف على وحده قياس PX

Img{ position : Absolute ; top: 3px ; left:10px ;}    HTML وسم يتم دراسته فى Img

Img{ position : relative ;} حيث ان الوضع الذى ينتسب اليه .. هو الاحداثيات الافتراضيه او الاساسيه

-----------------------------------------------------------------------------------------------

2-Width : خاصيه تحدد عرض الصوره

Img{ width : 30px ;} 

       ملحوظه .. لا تعمل الا مع  position : Absolute 

-----------------------------------------------------------------------------------------------

3-height : خاصيه تحدد طول الصوره

Img{ height : 30px ;} 

       ملحوظه .. لا تعمل الا مع  position : Absolute 

-----------------------------------------------------------------------------------------------

4- Z-index : هى الخاصيه التى تحدد اى صوره تكون فوق الاخرى

الفائده .. عندما اريد ان اضع كلام فوق صوره .. سأعطى الصوره (Z-index :1) واعطى الكلام(Z-index : 2)

ستكون النتيجه .. الصوره هى الطبقه الاولى .. والكلام الطبقه الثانيه 

Img{ position : relative ; z-index:1;}

h2 { color: black; z-index:2 ;}

ملحوظه : هذه الخاصيه قد لا تظهر مع المتصفحات الحديثه .. ولكن خذها حتى للعلم

------------------------------------------------------------------------------------------------

5-Visibility: الخاصيه المتحكمه فى اظهار او اخفاء الصور 

Img{ visibility : hidden ;} فى حاله اخفاء الصوره .. ولكن مكانها سيظهر فارغ

Img{ visibility : visible ;} فى حاله اظهار الصوره

Img{ visibility : inherit ;}      اذا كان الاصل ظاهر هيظهر او العكسposition : relative فى حاله

بمعنى .. ان الابن  يرث ظهور او اخفاء الاب 

-------------------------------------------------------------------------------------------------

6-Overflow : فى حاله ان يكون الطول والعرض للصوره اكبر من الطول والعرض لقيم الخصايتين width , height

Img{ overflow : hidden ;}   width , height يظهر الطول والعرض المحدد من الخاصيتن 

Img{ overflow : visible ;}    width , height يظهر الطول والعرض الاساسين ويتجاهل القيم المحدده من الخاصيتن 

Img{ overflow : outo ;}       visible  تكون شبيهه بالخاصيه 

Img{ overflow : scroll ;}

                                     يضيف مسطره للتحرك لاعلى واسفل بحيث يطبق قيم الخاصين ويظهر الطول والعرض الاساسين

ملحوظه : هذه الخاصيه قد لا تظهر مع المتصفحات الحديثه .. ولكن خذها حتى للعلم

-----------------------------------------------------------------------------------------------

التطبيق .. بالطريقه الثالثه

كود ملف CSS

كود ملف HTML

الآن .. أختبـــــــــــــــــــــــــــــ(ـنفسك)ــــــــــــــــــــــــــــــــــــــر..
انسخ الكود السابق على برنامج Notpad++
لك مطلق الحريه فى تطبيق هذا الكود بالطريقه الاولى و الطريقه الثانيه او احداهما