عناصر التحكم بالهوامش والحدود

الاسم

القيمة

توضيح القيمة

وصف

margin-top, -right, -bottom, -left

<length>

<percentage>

auto

بالأرقام

بالنسبة المئوية

تلقائي

هامش العنصر-أعلى، يمين، أسفل، يسار

margin

<length>

<percentage>

auto

بالأرقام

بالنسبة المئوية

تلقائي

هوامش العنصر

padding-top, -right, -bottom, -left

<length>

<percentage>

بالأرقام

بالنسبة المئوية

حاشية العنصر-أعلى، يمين، أسفل، يسار

padding

<length>

<percentage>

بالأرقام

بالنسبة المئوية

حواشي العنصر

border-color

<color>

اسم اللون أو رمزه

لون حدود العنصر

border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

إزالة أي أنماط تم إضافتها مسبقاً









نمط حدود العنصر

border-width-top, -right, -bottom, -left

<length>

medium

thin

thick

بالأرقام

متوسط

رفيع

سميك

عرض حد العنصر-أعلى، يمين، أسفل، يسار

border-width

<length>

medium

thin

thick

بالأرقام

متوسط

رفيع

سميك

عرض حدود العنصر

border-top, -right, -bottom, -left

<border-width>

<border-style>

<color>

عرض حد العنصر

نمط حد العنصر

لون حد العنصر

حد العنصر-أعلى، يمين، أسفل، يسار

border

<border-width>

<border-style>

<color>

عرض حد العنصر

نمط حد العنصر

لون حد العنصر

حدود العنصر

width

auto

<length>

<percentage>

تلقائي

بالأرقام

بالنسبة المئوية

العرض

height

auto

<length>

تلقائي

بالأرقام

الطول

float

none

left

right

الإعداد الافتراضي

محاذاة العنصر لليسار

محاذاة العنصر لليمين

محاذاة العنصر

clear

none

left

right

both

إلغاء أي أنماط مضافة مسبقاً

يسار

يمين

كلاهما (اليمين واليسار)

منع التفاف النص

display

block

 

inline

 

list-item

 

 

none

يقوم بتعريف العلامة كعلامة مستوى كتلة ويضع فاصل أسطر أعلى العنصر وأسفله

يقوم بتعريف العلامة كعلامة داخلية ويمنع وجود فواصل أسطر

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

يؤدي لعدم عرض العنصر وسيبدو وكأنه غير موجود في الصفحة

كيفية عرض العنصر

 

عناصر التحكم بالمواضع

الاسم

القيمة

توضيح القيمة

وصف

position

static

 

absolute

 

 

relative

 

 

fixed

تؤدي إلى انسياب المحتوى داخلياً، ولكن لا يمكن تغيير الموضع بواسطة سمات top و left في JavaScript.

تقوم بتعيين موضع العنصر بشكل مستقل عن أي محتوى آخر في عنصره الأصلي، وإذا لم يكن العنصر متداخلاً في عنصر آخر ، سيتم تحديد موضعه نسبة إلى نص المستند.

تقوم بتعيين موضع العنصر داخلياً وتسمح بإعداد الموضع نسبة إلى الموضع الأصلي من خلال سمات top و left في JavaScript.

تقوم بوضع العنصر بشكل مستقل عن أي محتوى في عنصره الأصلي، تماماً مثل العنصر الذي يتم تعيين موضعه تعييناً مطلقاً

موضع العنصر

left

auto

<length>

<percentage>

تلقائي

بالأرقام

بالنسبة المئوية

موضع العنصر من اليسار

top

auto

<length>

<percentage>

تلقائي

بالأرقام

بالنسبة المئوية

موضع العنصر من الأعلى

bottom

auto

<length>

<percentage>

تلقائي

بالأرقام

بالنسبة المئوية

موضع العنصر من الأسفل

right

auto

<length>

<percentage>

تلقائي

بالأرقام

بالنسبة المئوية

موضع العنصر من اليمين

z-index

auto

number

تلقائي

رقم سالب أو موجب (غير مسموح بكتابة أرقام عشرية)

رصف الكائنات

(التعيين ثلاثي الأبعاد للمواضع)

 

عناصر التحكم بالوضوح

الاسم

القيمة

توضيح القيمة

وصف

clip

auto

<shape>

تسمح لبرنامج الاستعراض بتحديد حجم القطع عادة (100%)

مثال:

style {

position: absolute;

clip: rect(15 350 195 50);

top: 0px;

left: 0px;

}

إعداد المنطقة المرئية للعنصر (القطع)

((تحديد القدر الذي سيكون مرئياً من العنصر في النافذة))

overflow

visible

 

hidden

scroll

 

auto

يتم استخدامها لإظهار الجزء المقطوع من العنصر، وتخبر هذه الكلمة الأساسية برنامج الاستعراض بتجاهل القطع.

تقوم بإخفاء الانسياب الزائد وتمنع شريط التمرير من الظهور

تقوم بإعداد أشرطة تمرير حول المنطقة المرئية للسماح للزائر بتصفح محتوى العنصر

تسمح برنامج الاستعراض بتحديد الكيفية التي ستتم معاملة المواد الإضافية بها بعد القطع

أعداد مكان الانسياب الزائد

visibility

inherit

visible

hidden

 

تؤدي إلى أن يتم منح العنصر حالة رؤية عنصره الأصلي

تؤدي إلى أن يكون العنصر مرئياً

تؤدي إلى أن يكون العنصر غير مرئياً عندما تتم معالجته مبدئياً على الشاشة

حالة رؤية العنصر