عناصر تحكم 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>

لون الخلفية

صورة للخلفية

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

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

موضع الخلفية

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