مولاتى

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


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


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


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


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

مولاتى


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

شاطر | 
 

 نموذج الصندوق - الإطارات 11: Borders

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

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

مُساهمةموضوع: نموذج الصندوق - الإطارات 11: Borders   الثلاثاء ديسمبر 16, 2014 4:33 am

الجداول يمكن استخدامها لأغراض مختلفة، فقد تستخدم للزينة أو للفصل بين شيئين، CSS تعطيك خيارات لا متناهية عندما تستخدم الإطارات في صفحتك.

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

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

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

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

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


سماكة الإطار "border-width"

سماكة الإطار تحدد من خلال القيمة 

الكود:
border-width

 والذي يمكن تحديد قيمته من خلال الكلمات thin وmedium وthick، أو من خلال قيمة رقمية تحدد سمكه بالبكسل، الرسم التوضيحي يبين هذه القيم ونتائجها:

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

ألوان الإطارات "border-color"

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الخاصية border-color تحدد لون الإطارة، قيمة هذه الخاصية هي قيم الألوان العادية مثل "[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]" و"rgb(123,123,123)" أو أسماء الألوان مثل "yellow".

تصميم الإطارات "border-style"

هناك أنواع مختلفة من الإطارات يمكنك أن تختار منها، في المثال التوضيحي أدناه هناك 8 أنواع من الإطارات كما يعرضها إكسبلورر 5.5، كل الأمثلة المعروضة تستخدم اللون "gold" وقيمة سماكة الإطار محددة بالقيمة "thick" وتذكر أنك تستطيع عرض الإطار بألوان وسماكة مختلفة.
القيم none أو hiddem يمكن أن تستخدم عندما تريد إخفاء الإطار.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

أمثلة لإطارات

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

الكود:
<h1>

 و

الكود:
<h2>

و

الكود:
<ul>

 و

الكود:
<p>

، النتيجة قد لا تكون جميلة لكن المثال يوضح الإمكانيات المتعددة:


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

[center][size=16]   h1 {[/size][/center]

[center][size=16]      border-width: thick;[/size][/center]

[center][size=16]      border-style: dotted;[/size][/center]
      border-color: gold;

[center][size=16]      border-width: 20px;[/size][/center]
   }

   h2 {

[center][size=16]      border-color: red;[/size][/center]
      border-style: outset;
   }

   p {

[center][size=16]      border-style: dashed;[/size][/center]
      border-width: 1px;
      border-color: blue;
   }

   ul {

[center][size=16]      border-color: orange;[/size][/center]
      border-width: thin;
      border-style: solid;
   }

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







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


يمكنك أيضاً تحديد خاصية تتعلق بجهة واحدة من الإطار، فتستخدم top للإطار العلوي، وbottom للإطار السفلي، وleft للأيسر، وright للأيمن، وهذا مثال يوضح كيفية فعل ذل:

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

[center][size=16]   h1 {[/size][/center]

[center][size=16]      border-top-width: thick;[/size][/center]
      border-top-style: solid;

[center][size=16]      border-bottom-width: thick;[/size][/center]
      border-top-color: red;


[center][size=16]      border-bottom-color: blue;[/size][/center]
      border-bottom-style: solid;


[center][size=16]      border-right-style: solid;[/size][/center]
      border-right-width: thick;
      border-right-color: green;


[center][size=16]      border-left-color: orange;[/size][/center]
      border-left-width: thick;
      border-left-style: solid;
   }

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







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


جمع كل الخصائص "border"

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

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

[center][size=16]   p {[/size][/center]

[center][size=16]      border-width: 1px;[/size][/center]

[center][size=16]      border-style: solid;[/size][/center]
      border-color: blue;

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

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






يمكن اختصارها هكذا:

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

[center][size=16]   p {[/size][/center]

[center][size=16]      border: 1px solid blue;[/size][/center]
   }

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






ملخص

في هذا الدرس تعلمت أن الإطارات في CSS لها عدد لا محدود من الخيارات.
في الدرس التالي سنلقي نظرة على نموذج الصندوق وبالتحديد العرض والارتفاع.


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

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


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

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