مولاتى

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


<meta name="propeller" content="7edb445ea1f8a84d8d2c566f754a8268" />
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا


او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي


سنتشرف بتسجيلك


شكرا
ادارة المنتدي

مولاتى


 
البوابةالرئيسيةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

شاطر | 
 

 الدرس 12: الارتفاع والعرض

اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
Admin
avatar

الساعة الأن :
الدوله :
ذكر عدد المساهمات : 210
نقاط : 6835
تاريخ التسجيل : 25/11/2014
العمر : 31
الموقع : www.moulati.arab.st

مُساهمةموضوع: الدرس 12: الارتفاع والعرض   الثلاثاء ديسمبر 16, 2014 4:39 am

حتى الآن لم نهتم كثيراً بأمر أبعاد العناصر التي قمنا بتعديل تصاميمها، في هذا الدرس سنلقي نظرة على كيفية تحديد ارتفاع وعرض العناصر.

  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


تحديد العرض "width"

الخاصية 

الكود:
width

 تحدد عرضاً معيناً لعنصر محدد.

المثال البسيط أدناه يقدم لنا صندوقاً يمكن أن نكتب فيه نصاً:

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   div.box {[/size][/center]

[center][size=16]      width: 200px;[/size][/center]

[center][size=16]      border: 1px solid black;[/size][/center]
      background: orange;
   }

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


تحديد الارتفاع "height"

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

الكود:
height

، فمثلاً لنجرب أن نجعل ارتفاع الصندوق في المثال يبلغ 500 بكسل:


الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   div.box {[/size][/center]

[center][size=16]      height: 500px;[/size][/center]
      width: 200px;

[center][size=16]      border: 1px solid black;[/size][/center]
      background: orange;
   }

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


ملخص

في الدروس [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]، [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]، [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط] و[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط] أعطيناك مقدمة لنموذج الصندوق في CSS، كما ترى نموذج الصندوق يعطيك الكثير من الخيارات الجديدة، ربما قمت باستخدام الجداول في HTML لإنشاء التصاميم، لكن الآن ومع CSS ونموذج الصندوق يجب أن تتمكن من إنشاء تصاميم أنيقة وأكثر دقة وتتوافق أكثر مع المعايير القياسية لمنظمة W3C.


قناة المعلم التعليميه للشروحات المصوره والشروحات التعليميه والثقافيه والفنيه والتكنلوجيا
نحن نؤمن بأنه ليس هناك رجلا يعرف كل شئ ولكننا نؤمن بتبادل الافكار
اذا اعجبكم الشرح ارجو ان تضغطو على زر ( اعجاب + مشاركه )
ومتابعتنا على قناة المعلم عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

ومتابعتنا عبر صفحتنا فى الفيس بوك عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://moulati.arab.st
 
الدرس 12: الارتفاع والعرض
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
مولاتى :: youtube :: قناة المُعلم :: دروس شامله وكامله لتتعلم كل شئ عن الـ CSS وكيفية التعامل بيها وما هيا الـ CSS-
انتقل الى: