شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي
avatar
مؤسسي المركز
مؤسسي المركز
القوس
عدد المساهمات : 330
متصفح الويب : Chrome
منتدى نسخة : PhpBB3
النقاط : 518
السٌّمعَة : 49
تاريخ التسجيل : 03/06/2015
العمر : 23
معاينة صفحة البيانات الشخصي للعضوhttp://www.t-mrkz.com/

default شرح الفرق بين Px - Em - % - Pt تعرف عليهم [ شروحات CSS ]

في الخميس ديسمبر 31, 2015 3:27 pm
[ شروحات CSS ] شرح الفرق بين Px - Em - % - Pt و تعريف بهم

عندما تري تصميمات مواقع او اكواد Css فانك كثيرا ترى مثلا

الكود:
font-size:20px;
font-size:2em;
margin:100px;
margin:10em;

ما هو الفرق بين هذه القياسيات ؟

نأتي لأول شيء

Em

و هي قياس متغير على حسب حجم الخط الخاص بالملف الذي تعمل فيه لنفترض مثلا ان جسم الصفحة Body حجم الخط الموجود به هو 15px معني هذا ان كل 1em يساوي 15px اذا في حالة استعملنا لعنصر حجم الخط 3em سوف يكون حجم الخط 45px

ثاني شيء

Px

و هي قياس ثابت ولا يتغير و هو عبارة عن نقطة في حجم الشاشة كل واحد بيكسل يساوي نقطة من النقاط الموجودة في حجم الشاشة مثلا لو كانت شاشتك الابعاد الخاصة بها 800X600 إذا 800px هو عرض شاشتك و 600px هو الطول

ثالث شيء

Pt

و هي تعتبر مثل Px و لكن تستخدم في الطباعة او في تصميم اي شي يختص بالطباعة على الورق مثلا و هي تساوي حوالي 1/72 من ال Inch

آخر شي هي

النسبة المئوية ( % )

و هي من معناها واضحة لنفترض مثلا ان جسم الصفحة Body حجم الخط الموجود به هو 15px اذا لو كان حجم الخط 100% سوف يكون 15px لو كان حجم الخط 200% سوف يكون حجم الخط 30px و هكذا

المثال الحي التالي يوضح كل شي بالتفصيل الممل

مثال باللغة العربية px-em-%-pt ar - CodePen

تم كتابة الدرس كاملا و المثال عن طريقي

اتمني من الله يكون الدرس مفيد وواضح
المصدر
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
عضو جديد
عدد المساهمات : 47
النقاط : 49
السٌّمعَة : 0
تاريخ التسجيل : 20/07/2015
معاينة صفحة البيانات الشخصي للعضو

default رد: شرح الفرق بين Px - Em - % - Pt تعرف عليهم [ شروحات CSS ]

في الثلاثاء مارس 01, 2016 6:57 am
طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى