تصميم مواقع الويب
Photo
لو تتعامل مع CSS اكيد مرّت عليك الوحدات:
[ px - em - rem - % - vh - vw ]
- ايش معناهم؟
- وايش الفرق بينهم؟
حتلاقي الجواب هنا ⬇️
1️⃣ وحدة القياس px
- وهي اختصار لكلمة Pixel، وحدة قياس ثابتة لا تتغير بتغيّر حجم الشاشة
يعني لو أعطيت لنص الحجم 20px حيظهر بالحجم 20px في كل الشاشات
*
2️⃣ وحدة القياس em
- وحدة قياس نسبية غير ثابتة تعتمد قيمتها بالقياس على الأب المباشر
مثلًا عندك div حجم الخط له 20px ( الأب )
داخل هذا الـ div لو أنشئت p وضبطت حجم الخط على 1em راح يساوي حجم الخط للعنصر الأب 20px
أما لو ضبطته على 2em راح يساوي 40px (ضعف حجم الأب)، وهكذا..
*
3️⃣ وحدة القياس rem
- وتعني root em وتعتمد في قياسها على الجذر الأساسي في عناصر DOM وهو غالبًا العنصر html ولا تعتمد على الأب المباشر مثل em
فمثلًا لو ضبطت حجم الخط في صفحة html على 16px فإن 1rem لأي عنصر داخله راح يساوي 16px و 2rem راح يساوي 32px وهكذا..
*
4️⃣ وحدة القياس % ( النسبة المئوية )
- مشابهة لحدّ كبير وحدة القياس em فهي تأخذ قيمتها بناءً على العنصر الأب المباشر.
*
5️⃣ وحدات القياس vh و vw
- لا تعتمد قيمتها على عناصر الصفحة الأعلى منها، إنما على الحجم الكلي لصفحة المتصفح (viewport)
- وحدة vh تساوي 1/100 من طول صفحة المتصفح، ووحدة vw تساوي 1/100 من عرض صفحة المتصفح
- نستخدمها عادةً في السلايدر، لتكون بكامل حجم الشاشة نعطيها الارتفاع 100vh
يوجد وحدات قياس أخرى لكنها قليلة الاستخدام مثل:
pt - in - ex - ch - vmin - vmax - cm - mm
ـــــہہـ٨ـــــــــــــــــــ❥ــہہ00:00:00
╭─┅═ঊঈ⚠ঊঈ═┅─╮
☛ @alhussini_IT ☚
╰─┅═ঊঈ☠ঊঈ═┅─╯
[ px - em - rem - % - vh - vw ]
- ايش معناهم؟
- وايش الفرق بينهم؟
حتلاقي الجواب هنا ⬇️
1️⃣ وحدة القياس px
- وهي اختصار لكلمة Pixel، وحدة قياس ثابتة لا تتغير بتغيّر حجم الشاشة
يعني لو أعطيت لنص الحجم 20px حيظهر بالحجم 20px في كل الشاشات
*
2️⃣ وحدة القياس em
- وحدة قياس نسبية غير ثابتة تعتمد قيمتها بالقياس على الأب المباشر
مثلًا عندك div حجم الخط له 20px ( الأب )
داخل هذا الـ div لو أنشئت p وضبطت حجم الخط على 1em راح يساوي حجم الخط للعنصر الأب 20px
أما لو ضبطته على 2em راح يساوي 40px (ضعف حجم الأب)، وهكذا..
*
3️⃣ وحدة القياس rem
- وتعني root em وتعتمد في قياسها على الجذر الأساسي في عناصر DOM وهو غالبًا العنصر html ولا تعتمد على الأب المباشر مثل em
فمثلًا لو ضبطت حجم الخط في صفحة html على 16px فإن 1rem لأي عنصر داخله راح يساوي 16px و 2rem راح يساوي 32px وهكذا..
*
4️⃣ وحدة القياس % ( النسبة المئوية )
- مشابهة لحدّ كبير وحدة القياس em فهي تأخذ قيمتها بناءً على العنصر الأب المباشر.
*
5️⃣ وحدات القياس vh و vw
- لا تعتمد قيمتها على عناصر الصفحة الأعلى منها، إنما على الحجم الكلي لصفحة المتصفح (viewport)
- وحدة vh تساوي 1/100 من طول صفحة المتصفح، ووحدة vw تساوي 1/100 من عرض صفحة المتصفح
- نستخدمها عادةً في السلايدر، لتكون بكامل حجم الشاشة نعطيها الارتفاع 100vh
يوجد وحدات قياس أخرى لكنها قليلة الاستخدام مثل:
pt - in - ex - ch - vmin - vmax - cm - mm
ـــــہہـ٨ـــــــــــــــــــ❥ــہہ00:00:00
╭─┅═ঊঈ⚠ঊঈ═┅─╮
☛ @alhussini_IT ☚
╰─┅═ঊঈ☠ঊঈ═┅─╯
خاصية css overview في Google DevTools خاصية كتير محترمة، بتقدر من خلالها تعرف الألوان المستخدمة ضمن الصفحة، الألوان الأساسية وامور كتير.
لتفعيل الخاصية انتقل على inspect ثم settings ثم experiments وبعدها اعمل تفعيل css overview.
بعدها رح يظهر tab جديد ادخل عليه واضغط capture css
ـــــہہـ٨ـــــــــــــــــــ❥ــہہ00:00:00
╭─┅═ঊঈ⚠ঊঈ═┅─╮
☛ @alhussini_IT ☚
╰─┅═ঊঈ☠ঊঈ═┅─╯
لتفعيل الخاصية انتقل على inspect ثم settings ثم experiments وبعدها اعمل تفعيل css overview.
بعدها رح يظهر tab جديد ادخل عليه واضغط capture css
ـــــہہـ٨ـــــــــــــــــــ❥ــہہ00:00:00
╭─┅═ঊঈ⚠ঊঈ═┅─╮
☛ @alhussini_IT ☚
╰─┅═ঊঈ☠ঊঈ═┅─╯
ملخص رائع لكل خصائص وقيم CSS Flexbox 👌😍
•┈┈┈•❈••✦✾✦••❈•┈┈┈•
❥➺┊@Web_Programming_Design
•┈┈┈•❈••✦✾✦••❈•┈┈┈•
•┈┈┈•❈••✦✾✦••❈•┈┈┈•
❥➺┊@Web_Programming_Design
•┈┈┈•❈••✦✾✦••❈•┈┈┈•
- ملخص لجميع الدوال الخاصة بالarray في JavaScript.
•┈┈┈•❈••✦✾✦••❈•┈┈┈•
❥➺┊@Web_Programming_Design
•┈┈┈•❈••✦✾✦••❈•┈┈┈•
•┈┈┈•❈••✦✾✦••❈•┈┈┈•
❥➺┊@Web_Programming_Design
•┈┈┈•❈••✦✾✦••❈•┈┈┈•
الدرس الأول ✅
الأكواد الأساسية لكل صفحة html
html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
هذه الأكواد أساسية بكل صفحة
!؟ ـــــہہـ٨ــ♡ـــــــــــــ❥ــہہ00:00:00
✍✍ محمد الحسيني
╭─┅═ঊঈ⚠ঊঈ═┅─╮
☛ @alhussini_IT ☚
╰─┅═ঊঈ☠ঊঈ═┅─╯
الأكواد الأساسية لكل صفحة html
html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
هذه الأكواد أساسية بكل صفحة
!؟ ـــــہہـ٨ــ♡ـــــــــــــ❥ــہہ00:00:00
✍✍ محمد الحسيني
╭─┅═ঊঈ⚠ঊঈ═┅─╮
☛ @alhussini_IT ☚
╰─┅═ঊঈ☠ঊঈ═┅─╯
الدرس الثاني
الكود المستعمل 💚✅
<img
src="هنا الرابط" width="عرض الصورة "
height="طول الصورة"
/>
مختصر الدرس كيف تضيف صورة بموقعك
!؟ ـــــہہـ٨ــ♡ـــــــــــــ❥ــہہ00:00:00
✍✍ محمد الحسيني
╭─┅═ঊঈ⚠ঊঈ═┅─╮
☛ @alhussini_IT ☚
╰─┅═ঊঈ☠ঊঈ═┅─╯
الكود المستعمل 💚✅
<img
src="هنا الرابط" width="عرض الصورة "
height="طول الصورة"
/>
مختصر الدرس كيف تضيف صورة بموقعك
!؟ ـــــہہـ٨ــ♡ـــــــــــــ❥ــہہ00:00:00
✍✍ محمد الحسيني
╭─┅═ঊঈ⚠ঊঈ═┅─╮
☛ @alhussini_IT ☚
╰─┅═ঊঈ☠ঊঈ═┅─╯
❤1