greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/arabic/css/units/index.md

6.9 KiB
Raw Blame History

title localeTitle
Units وحدات

وحدات

العديد من خصائص CSS مثل width ، margin ، padding ، font-size إلخ. يحتوي CSS على طريقة للتعبير عن الطول في وحدات متعددة. الطول عبارة عن مزيج من رقم ووحدة بدون مسافات بيضاء. على سبيل المثال ، 5px و 0.9em ذلك

الطول

وحدات طول العام

هناك عدة وحدات تستخدم من قبل CSS للتعبير عن الطول. الأقدم منها ، مدعومة من جميع المتصفحات ، هي:

  • rem - "r" تعني "root": "root em" - والتي تساوي حجم الخط الثابت لعنصر الجذر (دائمًا <html> ).
  • vh و vw - تعتمد العديد من تقنيات تصميم الويب سريع الاستجابة بشكل كبير على قواعد النسبة المئوية. ومع ذلك ، لا تكون مقاييس النسبة المئوية CSS دائمًا أفضل حل لجميع المشكلات. يساوي التدبير vh 1/100 من ارتفاع منفذ العرض. لذلك ، على سبيل المثال ، إذا كان ارتفاع المتصفح 800 بكسل ، وقيمة 1vh تساوي 8 بكسل ، وبالمثل ، إذا كان عرض إطار العرض هو 650 بكسل ، فإن 1vw يعادل 6.5 بكسل.
  • vmin و vmax - ترتبط هذه الوحدات بالقيمة القصوى أو الدنيا لـ vh و vw . على سبيل المثال ، إذا كان المتصفح قد تم تعيينه على 1200px عريضًا وكان الارتفاع 600 بكسل ، فإن 1vmin سيكون 6px وسيكون 1vmax 12px. ومع ذلك ، إذا تم ضبط العرض على 700 بكسل وتعيين الارتفاع على 1080 بكسل ، فسوف يساوي vmin 7px و vmax 10.8px.
  • ex and ch - تعتمد هذه الوحدات ، مثل em و rem ، على الخط وحجم الخط الحاليين. ومع ذلك ، على عكس em و rem ، تعتمد هذه الوحدات أيضًا على font-family حيث يتم تحديدها استنادًا إلى إجراءات خاصة بكل خط. يتم تعريف الوحدة ch ("وحدة الأحرف") على أنها عرض الحرف صفر ("0"). يتم تعريف الوحدة السابقة بأنها "x الحالي ارتفاع الخط الحالي أو نصف 1em". ارتفاع x لخط معين هو ارتفاع "x" من هذا الخط. وغالبًا ما تكون العلامة المتوسطة للخط.

| الوحدة الوصف | | --------------- | ----------------------- | | em | 1 em هي القيمة الحسابية لحجم الخط على العنصر الذي يتم استخدامه فيه. | | ex | 1 ex هو ارتفاع الخط الحالي x. يكون x-height عادة (ولكن ليس دائمًا ، على سبيل المثال ، إذا لم يكن هناك "x" في الخط) مساوياً لارتفاع الحرف الصغير "x" | | ch | 1 ch هو تقدم الحرف الرسومي '0' (صفر) في الخط الحالي. "ch" تعني الحرف. | | rem | 1 rem هي القيمة المحسوبة لخاصية حجم الخط لعنصر المستند الأساسي | vw | 1vw هو 1٪ من عرض إطار العرض. "vw" تعني "عرض إطار العرض". | | vh | 1vh هو 1٪ من ارتفاع إطار العرض. "vh" تعني "ارتفاع إطار العرض". | | vmin | يساوي الأصغر من "vw" أو "vh" | | vmax | يساوي أكبر من "vw" أو "vh" |

هناك نوعان عامان من الوحدات المستخدمة للطول والحجم في CSS: نسبي ومطلق.

الوحدات النسبية

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

  • em
  • عرض حرف كبير M font-size العنصر الحالي.
  • يتم تعداد أحجام الخطوط من العناصر الرئيسية.
  • مثال: html div { font-size: 16px; } div h3 { font-size: 2rem; } هنا يساوي <h3> 32px لأن font-size للعنصر الحالي أو الأصل هو 16 16px .
  • rem
  • الجذر em ، أو عرض حرف كبير حرف M من font-size الأساسي الافتراضي.
  • لن يكون لأحجام الخطوط الأصل أي تأثير.
  • مثال: html body { font-size: 16px; } p { font-size: 1.5rem; } هنا يساوي <p> 24px لأن font-size الأساسي الافتراضي هو 16 16px .
  • %
  • حجم النسبة المئوية لحجم الوالد.
  • مثال: html div { width: 400px; } div p { width: 75%; } نظرًا لأن عرض الوالد هو 400px ، فإن عرض الخط البارد الداخلي سيكون 300px ، أو 75٪ من 400px 300px .
  • vw
  • عرض العرض ، أو 1/100 من عرض إطار العرض
  • مثال: html body { width: 100vw; } يملأ body عرض إطار العرض ، سواء أكان 417 بكسل ، أو 690 بكسل ، أو أي عرض.
  • vh
  • أو ارتفاع العرض ، أو 1/100 من ارتفاع إطار العرض
  • مثال: html div { height: 50vh; } سيعمل هذا div على ملء نصف ارتفاع إطار العرض ، سواء كان 1080 بكسل أو 1300 بكسل أو أي ارتفاع.

وحدات مطلقة

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

  • px
  • بكسل
  • عدد البكسل ترتبط بجودة شاشة جهاز العرض
  • in ، cm ، mm
  • بوصة ، سنتيمتر ، مليمتر
  • بوصة واحدة إنش على شاشة صغيرة أو شاشة كبيرة
  • pt ، pc
  • نقاط (1/72 من البوصة) و picas (12 نقطة)

مثال

p { font-size: 24px; } div { width: 3in; border-width: 3pt; }

ستظهر font-size: 24px بكسل على أنها 24 بكسل على الهاتف أو الجهاز اللوحي أو شاشة سطح المكتب.

سيظهر div بعرض 3 بوصات ، border على div ستكون 3/72 من سماكة بوصة ، بغض النظر عن حجم الشاشة.

معلومات اكثر: