التخطي إلى المحتوى
شرح دورة الـ 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- Zindex : هى الخاصيه التى تحدد اى صوره تكون فوق الاخرى
الفائده .. عندما اريد ان اضع كلام فوق صوره .. سأعطى الصوره (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
img{
position:relative;
top:50px;
left:50px;
visibility:visible;
width=159 height=190;
}

كود ملف HTML

<html>
<head>
<title>Minds</title>
<link rel="stylesheet" type="text/css" href="csss.css">
</head>
<body >
<img src=fd.jpg >
</body>
</html>
 

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

عن الكاتب

التعليقات

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Shares