:: دورة برنامج خبير العقود والاتفاقيات الدولية|المشتريات والمخازن:مركزitr (آخر رد :منتجع التدريب)       :: اشتراك كانفا برو canva pro مدى الحياة (آخر رد :ضياء روحي)       :: # دورة إدارة الشراكات الاستراتيجية #5 يناير 2025م #اسطنبول#metc (آخر رد :جهاد سعيد)       :: # دورة أخصائي الإعلام الرقمي وشبكات التواصل الاجتماعي#29ديسمبر 2024م #دبي#metc (آخر رد :جهاد سعيد)       :: دورة اجراءات التوعية بالسلامة الكهربائية (آخر رد :بيسان احمد)       :: دورة الأداء المؤسسي وفقاً لمعايير الأوروبي efqm (آخر رد :AHMEDBBMF)       :: دورة التكنولوجيا المتقدمة لعمليات الصيانة (آخر رد :مصطفى فلفل)       :: دورة الإحتراف في إدارة الجودة|الجودة والإنتاج:مركزitr (آخر رد :منتجع التدريب)       :: دورة الرؤية الإستراتيجية لإدارة الموارد البشرية وقياس الأداء فى ظل منهجية الجودة الشا (آخر رد :منتجع التدريب)       :: دورة إدارة تكنولوجيا الأداء البشرى وجودة العمل|الموارد البشرية:مركزitr (آخر رد :منتجع التدريب)      
اختر لونك:
وَقُلِ اعْمَلُوا فَسَيَرَى اللَّهُ عَمَلَكُمْ وَرَسُولُهُ وَالْمُؤْمِنُونَ ۖ وَسَتُرَدُّونَ إِلَىٰ عَالِمِ الْغَيْبِ وَالشَّهَادَةِ فَيُنَبِّئُكُم بِمَا كُنتُمْ تَعْمَلُونَ [ التوبة : ( 105 )] كلمة الإدارة

يرجى إختيار القسم المناسب قبل النشر وسيعاقب المخالف بإنذار أول مرة وسيتم حظره إذا تكرر ذلك كلمة الإدارة

يُمنع كتابة مواضيع السحر والشعوذة والروحانيات والابراج بكافة الأشكال والمخالف سيعاقب بحظر مؤقت وإذا تكرر سيكون حظر دائم تنبيه هام جداً



أضف رد جديد
 
LinkBack أدوات الموضوع انواع عرض الموضوع

قديم 09-04-2019, 10:36 AM   #1
تاريخ التسجيل: Feb 2019
المشاركات: 1,010
التقييم: 10
تاريخ التسجيل: Feb 2019
المشاركات: 1,010
التقييم: 10
افتراضي Borders الجداول يمكن استخدامها لأغراض مختلفة

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

سماكة الإطار "border-width"
ألوان الإطارات "border-color"
تصميم الإطار "border-style"
أمثلة لإطارات
جمع كل الخصائص "border"
سماكة الإطار "border-width"
سماكة الإطار تحدد من خلال القيمة border-width والذي يمكن تحديد قيمته من خلال الكلمات thin وmedium وthick، أو من خلال قيمة رقمية تحدد سمكه بالبكسل، الرسم التوضيحي يبين هذه القيم ونتائجها:

أمثلة لخاصية border-width

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

الخاصية border-color تحدد لون الإطارة، قيمة هذه الخاصية هي قيم الألوان العادية مثل "#123456" و"rgb(123,123,123)" أو أسماء الألوان مثل "yellow".

تصميم الإطارات "border-style"
هناك أنواع مختلفة من الإطارات يمكنك أن تختار منها، في المثال التوضيحي أدناه هناك 8 أنواع من الإطارات كما يعرضها إكسبلورر 5.5، كل الأمثلة المعروضة تستخدم اللون "gold" وقيمة سماكة الإطار محددة بالقيمة "thick" وتذكر أنك تستطيع عرض الإطار بألوان وسماكة مختلفة.

القيم none أو hiddem يمكن أن تستخدم عندما تريد إخفاء الإطار.

أنواع مختلفة من الإطارات

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


h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}


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


h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}


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

p {
border-width: 1px;
border-style: solid;
border-color: blue;
}


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


p {
border: 1px solid blue;
}


ملخص
في هذا الدرس تعلمت أن الإطارات في CSS لها عدد لا محدود من الخيارات.

في الدرس التالي سنلقي نظرة على نموذج الصندوق وبالتحديد العرض والارتفاع.

الفارس غير متواجد حالياً   اقتباس
أضف رد جديد

الكلمات الدلالية (Tags)
منتديات رحيل, رحيل, شبكة رحيل, r7il, r7il.com


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
الدليل الشامل في استخدام استعلامات WP_Query الفارس قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 27-07-2019 10:39 AM
الجداول (Tables) في CSS القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 27-02-2019 05:27 PM
التعامل مع أجهزة العرض المختلفة والمطبوعات في css القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 27-02-2019 05:25 PM
تأثيرات الانتقال والحركة في css القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 27-02-2019 05:15 PM
الدليل السريع إلى لغة البرمجة Kotlin القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 27-02-2019 04:55 PM


الساعة الآن 05:21 AM

 


Content Relevant URLs by vBSEO ©2010, Crawlability, Inc.