تعلم CSS : عناصر التحكم في CSS صفحات الأنماط الإنسيابية

font-family

<family-name>

الخط أو الخطوط المفضلة

بالإمكان إدراج عدة خطوط يفصلها فاصلة

والخط المركب يكون محاط بعلامتي تنصيص

لإدراج أسماء الخطوط المراد عرضها

font-style

normal

italic

oblique

إلغاء أي أنماط أخرى

مائل

إمالة النص إلى اليمين

نمط الخط

font-variant

normal

small-caps

إلغاء أي أنماط أخرى

لتحويل الأحرف الصغيرة لكبيرة

التحكم بحجم الخط (كبتل-سمول)

font-weight

normal

bold

100-900*

إلغاء أي أنماط أخرى

عريض

زيادة العرض اعتماداً على النسخ البديلة المتاحة

عرض الخط

font-size

<length>

<percentage>

smaller

larger

xx-small

x-small

small

medium

large

x-large

xx-large

بالنقطة pt أو البيكسل px

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

           تحسب بالنسبة للحجم الافتراضي

حجم الخط

font

<font-style>

<font-variant>

<font-weight>

<font-size>

<line-height>

<font-family>

قيمة font-style نمط الخط

قيمة font-variant الأحرف الكبيرة

قيمة font-weight عرض الخط

قيمة font-size حجم الخط

قيمة line-height المسافة بين الأسطر

قيمة font-family أسماء الخطوط

لإدراج العديد من القيم في خاصية واحدة

word-spacing

normal

<length>

إلغاء أي أنماط أخرى

بالأرقام

مسافة التباعد بين الكلمات

letter-spacing

normal

<length>

إلغاء أي أنماط أخرى

بالأرقام

مسافة التباعد بين الأحرف

vertical-align

baseline

<percentage>

sub

super

top

text-top

middle

bottom

text-bottom

الحالة الطبيعية للنص

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

النص منخفضاً تحت الخط الأساسي

النص مرتفعاً فوق الخط الأساسي

الأعلى نسبة إلى أكثر العناصر ارتفاعاً في السطر

إلى الأعلى نسبة إلى أعلى نص العنصر الأصلي

الوسط نسبة إلى وسط العنصر الأصلي

الأسفل نسبة إلى أكثر العناصر انخفاضاً

إلى الأسفل نسبة إلى أسفل نص العنصر الأصلي

المحاذاة العمودية للنص

line-height

normal

<length>

<percentage>

الوضع الطبيعي

بالأرقام

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

المسافة بين الأسطر

text-decoration

none

underline

overline

line-through

blink

إلغاء أي قيم ممنوحة سابقاً

خط تحت النص

خط فوق النص

خط وسط النص

تحويل النص إلى نص وامض

زخرفة النص

text-transform

none

capitalize

uppercase

lowercase

إلغاء أي قيم ممنوحة سابقاً

إظهار الحرف الأول من كل كلمة بحرف كبير

إظهار كل الأحرف كبيرة

إظهار كل الأحرف صغيرة

إعداد حالة النص

text-align

left

right

center

justify

محاذاة النص للهامش الأيسر

محاذاة النص للهامش الأيمن

محاذاة النص في الوسط

كشيدة - محاذاة النص للجانبين الأيمن والأيسر

محاذاة النص

text-indent

<length>

<percentage>

بالأرقام

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

إضافة مسافة بادئة للفقرات

white-space

normal

pre

nowrap

تسمح لبرنامج الاستعراض بتحديد كيفية معاملة المسافات

تحتفظ بالعديد من المسافات

تمنع التفاف النص بدون علامة فاصل

تعريف مسافة بيضاء لمحدد ما

list-style-type

disc

circle

square

decimal

lower-roman

upper-roman

lower-alpha

upper-alpha

none

?

?

?

.

I

i

A

a

لا شيء

شكل نقاط القائمة

list-style-image

none

url(<url>)

لا شيء

رابط صورة

صورة لنقاط القائمة

list-style-position

inside

outside

محاذاة الأسطر المتعاقبة مع الرمز النقطي

محاذاة الأسطر المتعاقبة مع بداية السطر

موضع القائمة

list-style

<list-style-type>

<list-style-position>

<list-style-image>

شكل نقاط القائمة

موضع القائمة

صورة لنقاط القائمة

إدراج جميع الخصائص في موضع واحد

cursor

auto

crosshair

hand

pointer

move

n-resize

se-resize

e-resize

se-resize

s-resize

sw-resize

w-resize

nw-resize

w-resize

text

help

تلقائي - مرر الماوس على كلمة "مثال" 

مثال

مثال

مثال

مثال

مثال

مثال

مثال

مثال

مثال

مثال

مثال

مثال

مثال

مثال

مثال

لتغيير شكل الماوس عند المرور على القائمة أو الكلمة

color

<color>

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

لون الخط

background-color

transparent

<color>

اللون الافتراضي

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

لون الخلفية

background-image

none

url(<url>)

عدم استخدام أي خلفية

رابط صورة الخلفية

صورة للخلفية

background-repeat

repeat-x

repeat-y

no-repeat

تكرار أفقياً

تكرار عمودياً

عدم التكرار

تكرار الخلفية

background-attachment

scroll

fixed

توجيه رسم الخلفية بحيث يتم تمريره مع العنصر

عدم تصفح محتوى الخلفية مع باقي العناصر

كيفية معالجة الخلفية

background-position

<percentage>

<length>

top

center

bottom

left

right

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

بالأرقام

محاذاة الخلفية من الأعلى

محاذاة الخلفية من الوسط

محاذاة الخلفية من الأسفل

محاذاة الخلفية من اليسار

محاذاة الخلفية من اليمين

موضع الخلفية

background

<background-color>

<background-image>

<background-repeat>

<background-attachment>

<background-position>

لون الخلفية

صورة للخلفية

تكرار الخلفية

كيفية معالجة الخلفية

موضع الخلفية

استخدام جميع الخصائص في موضع واحد

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

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

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%)

مثال:

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

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

overflow

visible

hidden

scroll

auto

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

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

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

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

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

visibility

inherit

visible

hidden

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

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

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

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