ط´ط±ط* ط®طµط§ط¦طµ css ظ„ظ„طµظˆط±


بسم الله الرحمن الرحيم ،،

الحمد لله والصلاة والسلام على رسول الله ،،
أما بعد
فقد قدمنا دروس في مجال خاصية css للمبتدئين
وهذه الدروس السابقة
شرح طريقة الـ div وشرح طريقة الـ class
شرح طريقة خصائص الـ class


هذه الدروس اعلاه كل درس مفصل متعلق بـ الثاني ويجب على الجميع
اتباع الدروس السابقة لكي تستطيع ان تفهم الدروس التالية ،،

سوف نتطرق اليوم بإذن الله عن شرح طريقة
شرح طريقة خصائص css للصور ،،

بسم الله نبدأ

اولا اخر شيء قد توصلنا اليه بالنسبه لـ الأكواد ،،
رمز Code:
.rot3n{ هنا تكون الأوامر } <div class=&quot;rot3n&quot;></div>
طبعا زي ما تعلمنا انه نفتح الديف وتعلمنا كيف نعطي خصائص لـ الكلاس
عشان نقدر نضيف له الأوامر عشان يشتغل الشي المطلوب ،،

طيب الحين نتابع ونركز لكي نشرح طريقة خصائص css للصور

فالنفترض ان الديف الي فتحناه هو عباره عن مربع نريد ان نعرض فيه صورة ،
يعني الديف هذا ،

رمز Code:
<div class=&quot;rot3n&quot;></div>
هو عباره عن مربع ،،
والصورة هي
rot3n

طيب الى الان ماشين تمام ،،
الأن عندنا اكواد الـ css أخر ما توصلنا له هو


رمز Code:
.rot3n{ هنا تكون الأوامر }


طيب زي ما هو موضح ان في النص تكون الأوامر ،،
مثلا مسار الصورة عرض الصورة مقاس الصورة اتجاه الصورة الخ،،،،

نبدأ على بركة الله بـ شرح طريقة كيفية اضافة هذه الخصائص لكي تشتغل معاك ،!

طيب ،
أول شي
[ مسار الصورة ]
فالنفترض مثلا ان الصورة اسمها hooo1
إسم المجلد الي فيه الصورة هو images
يعني راح يكون مسار الصورة كذا
images/hooo1
المجلد الي فيه الصورة ومن ثم اسم الصورة
طيب نسينا شي مهم .!
صيغة الصورة
صيغ الصورة كثيرة
راح نتطرق في هذا الشرح طريقة
عن صيغه معروفه لـدى الجميع
وهي صيغة png
يعني الحين اسم الصورة عندنا hooo1
الصيغه راح تكون png
طيب معناها اسم الصورة راح يكون على هذا الشكل
hooo1.png
حلو طيب الحين المسار كيف راح يكون ؟
كذا
images/hooo1.png
طيب الحين كل شي واضح بالنسبه لـ مسار الصورة
طيب الحين راح نعرف كيف راح نسوي هذا الكود code في تعاريف css
طبعا الكود code قبل التعديل وقبل اضافة اي شي له راح يكون بهذا الشكل

رمز Code:
.rot3n{ }
وزي ما قلنا راح تكون الأكواد في النص

طيب الحين لازم نعرف شي اخير الي هو
background-image
هذا هو امر الصور في تعاريف css
حبيت اوضحها لكم عشان ما تلخبطوا ،

طيب الحين راح يكون عندنا الكود code css بهذا الشكل


رمز Code:
.rot3n{ background-image: url('images/hooo1.PNG') }
لآحظ معي انو الكود code في المنتصف ولا تنسى
}

هذي اهم شي

طيب كذا عرفنا كيف نضيف مسار الصورة ،
باقي شي مهم جدا جدا جدا قبل البدء في عملية
وضع خصائص اخرى
طبعا شي يغفل عنه معظم المبتدئين في التكويد وهو
;

هذه الفاصلة المنقطه مهمه جدا جدا في عمليه ما بعد الإنتهاء من اي كود code
يعني في اخر الكود code بعد الإنتهاء منه لازم ولا بد ان تضع هذه الفاصلة المنقطة ،

يعني الحين راح يكون عندنا الكود code بالشكل التالي


رمز Code:
.rot3n{ background-image: url('images/hooo1.PNG'); }
لآحظت معي النقطة في اخر الكود code هذه مهم جدا جدا جدا ولا تسناها
لأنو لو سويتها ماراح تستفيد شي وماراح يشتغل معك الكود code بعد وضع الديف في المكان المطلوب

طيب الحين انتيهنا بشكل كامل من إضافة مسار الصورة
طيب الحين بما انه فهما كيف نضيف الكود code وعملية التنقيط لـ الكود code بعد الإنتهاء منه
كذا راح تكون باقي الخصائص سهله عليك
بس انا فصلت في البدايه لكي يسهل عليك استيعاب كيف تسوي الأكواد الباقية ،،

طيب الحين راح نشرح طريقة باقي الخصائص
الي هي
عرض الصورة
إرتفاع الصورة
إتجاه الصورة

طيب الحين بعد ما اضفنا مسار الصورة راح نشرح طريقة الخاصية الي بعدها
الي هي عرض الصورة و إرتفاع الصورة ،

طبعا شي بديهي ان بالأنجلش
العرض width
الإرتفاع height

طيب اليوم راح نشرح طريقة العرض والإرتفاع بـ نسبة البيكسل الي هي
px

وفي شروحنا القادمة راح نطرق في النسب الأخرى بس
نسبة البيكسل هي اكثر نسبة شائعه والكل يستخدمها
طبعا ناهيك عن النسب المئوية ،،
راح نتكلم اليوم عن مسبة الـ بيكسل ،
فالنفترض ان نسبة عرض الصورة الي نبي نعرضها بالبكسل مثلا



العرض : 400px
والطول : 300px

طيب راح تكون الأكواد على الشكل التالي :

width:400px
height:300px

الأولى هي العرض والثانية هي الإرتفاع

حلو طيب الحين راح نضيف هذه الأكواد الي تعاريف css
وراح تكون على هذا الشكل


رمز Code:
.rot3n{ background-image: url('images/hooo1.PNG'); width:400px; height:300px; }
طيب الحين شفنا مع بعض كيف الطول والإرتفاع ،،
في الأول مسار الصورة
والثاني عرض الصورة
والثالث إرتفاع الصورة

طيب
الحين باقي علينا اإضافة إتجاه الصورة

مثلا يمين يسار
الوسط راح يكون لها شرح طريقة ثاني بعدين راح نشرح طريقةه ان شاء الله
راح نكتفي اليوم بـ شرح طريقة يمين يسار عشان ما يصير لخبطه عليكم

طيب الإتجاه شي معرف انه في الإنجليزي هو
float
هو الإتجاه ،،
طيب ومعروف ان
يمين right
يسار left

طيب راح نقول ان الصورة نبيها يمين
راح يكون الكود code بـ هذا الشكل

float: right

ولو كان يسار راح تبدل rightالى leftt

طيب

الحين نضيف الكود code هذا الى كود code css

وراح يكون بهذا الشكل


رمز Code:
.rot3n{ background-image: url('images/hooo1.PNG'); width:400px; height:300px; float:right; }


لآحظ ان في نهاية كل كود code توجد الفاصلة المنقطة ;

اهم شي لا تنساها ،،


كذا الكود code كامل عندنا الي اشتغلنا عليه للآن هو

رمز Code:
.rot3n{ background-image: url('images/hooo1.PNG'); width:400px; height:300px; float:right; }
رمز Code:
<div class=&quot;rot3n&quot;></div>

كذا نكون انتيهنا من شرح طريقةنا في خصائص الصورة

وفي الشرح طريقة الجاي ان شاء الله راح نتطرق لـ باقي التفاصيل بإذن الله ،،

كان معكم أخوكم إسماعيل روتين ،،

أطيب التحايا لكم،،


العبره ليست بالتكرار ولكن العبره هي طرق الشرح طريقة ،،

في آمان الله ,~


رابط الموضوع الأصلي
شرح طريقة خصائص css للصور - روتين اعمال ©









©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©