CSS

CSS – مظھر القوائم والخلفیات

أولا ً :- خصائص الخلفیات

background-color:

وھي تستخدم لتحدید لون الخلفیة , وتأخذقیمة لونیة مثلا ً 333 . #

مثال:

h1 { background-color:red; }

background-image:url( );

تستخدم لتجعل الخلفیة عبارة عن صورة حیث نكتب بین قوسیھا اسم وامتداد الصورة وان كانت
في مجلد آخر نضیف اسم المجلد قبل الصورة .

مثال:

p { background-image:url(” الصورة اسم.الامتداد{ ;(“

background-repeat:

وھي تستعمل للتحكم بتكرار الصورة في الخلفیة , وتأخذ احد ھذه القیم :-
1 .x-repeat لتكرار الصورة بشكل أفقي .
2 .y-repeat لتكرار الصورة بشكل عمودي .
3 .repeat تقوم بتكرار الصورة عمودیا ً و أفقیا ً .
4 .repeat-no لعدم تكرر الصورة

مثال:

div { background-repeat:no-repeat; }

background-position:

وھي تستخدم لتحدید موقع الصورة في الخلفیة إن كانت لا تملأ الشاشة , وتكون قیمتھا عبارة
عن اتجاه :

1 .left تقوم بمحاذاة الصورة إلى الجھة الیسرى.
2 .right تقوم بمحاذاة الصورة إلى الجھة الیمنى.
3 .top لمحاذاة الصورة إلى الأعلى .
4 .bottom لمحاذاة الصورة إلى الأسفل .
5 .center لمحاذاة الصورة إلى المنتصف .

كما یمكننا أيضا أن نستخدم اتجاھین لتحدید موقع الصورة كمثال :

left top او center center او أي اتجاھین آخرین .

مثال:

p { background-position:bottom right; }

  • ویمكن اعطائھا قیم رقمیة بالبیكسل حیث سیكون رقمان الأول یمثل البعد الأفقي والثاني یمثل
    البعد عمودي الذي سیبدأ منھ العرض ( ظھور الصورة ) ویمكن أن تكون الأرقام بالسالب .

مثال:

p { background-position:bottom: 10px 50px; }

ویمكن ان نضیف قیمة لجھة واحدة فقط x-position-background تمثل البعد الأفقي
y-position-background تمثل البعد العمودي .

مثال:

background-position-x:30px;
background-position-y:-44px;

background:

تستخدم ھذه الخاصیة لعمل اختصار بدلا من كتابة مجموعة من الخواص للخلفیة نجعلھا كلھا
في ھذه الخاصیة حیث سنعطیھا عدة قیم القیمة الأولى ھي قیمة الخاصیة -background
:color والقیمة الثانیة ھي قیمة الخاصیة :image-background والقیمة الثالثة ھي قیمة
الخاصیة repeat-background والقیمة الرابعة ھي قیمة الخاصیة -background
:position , مع ملاحظة أن ھذه القیم تكتب بالتتابع و ان أي قیمة لا نحتاجھا یمكن فقط عدم كتابتها.

مثال:

div { background:#333 url(‘image.gif’) repeat-x top left; }

  • وكذلك یمكن اضافة بعض القیم الأخرى مثلا transparent وھي تستخدم لتجعل الخلفیة
    شفافة او یمكن ان نضیف القیمة fixed لتجعل الخلفیة ثابتة .

مثال:

div { background: transparent url(‘image.gif’) repeat-x fixed; }

background-size:

ھذه الخاصیة تسمح بتحدید أبعاد الصورة في الخلفیة وھي خاصیة جدیدة في CSS3 ویجب أن
نسبقھا بالبادئة الخاصة بكل متصفح لتعرض في المتصفحات المختلفة , وھي تأخذ قیم رقمیة
بالبیكسل حیث الرقم الأول یشیر إلى العرض والثاني یشیر إلى ارتفاع الصورة .

مثال:

body { background-size:80px 60px; }

background-origin:

ھذه الخاصیة جدیدة في CSS3 ویجب أن نسبقھا بالبادئة الخاصة بكل متصفح لتعرض في
المتصفحات المختلفة , وھذه الخاصیة تحدد احد أجزاء نموذج الصندوق لیتم تطبیق الخلفیة على
أساسھ , وھي تأخذ احد ھذه القیم :

1 -box-context لتطبیق الخلفیة على المستطیل المحدد بالمحتوى .
2 -box-padding لتطبیق الخلفیة على المستطیل المحدد بالمحتوى وبالإزاحة الداخلیة
معا ً .
3 -box-border لتطبیق الخلفیة على المستطیل المحدد بالمحتوى وبالإزاحة الداخلیة
وبالحدود معا ً .

إضافة خلفیتان

من التحسینات الجدیدة التي أضیفت إلى خاصیة الخلفیة في CSS3 ھو السماح بإضافة أكثر من
صورة في نفس الوقت كخلفیة لنفس العنصر وذلك عبر الفصل بین كل خلفیة أخرى بفاصلة .

مثال:

body { background-image:url(name.gif) , url(name.gif); }

linear-gradient( ) :

ھذه الخاصیة جدیدة في CSS3 ویجب أن نسبقھا بالبادئة الخاصة بكل متصفح لتعرض في
المتصفحات المختلفة , وھذه الخاصیة مسئولة عن عمل تدرج لوني بشكل خطي , حیث أنھا
تكتب كقیمة للخاصیة ( :background ( لأنھا تمثل لون الخلفیة , وسوف نضع في داخل
قوسیھا مجموعة قیم حیث إن القیمة الأولى تمثل الجھة التي ستبدأ منھا الألوان , top(
( left , right , bottom ویمكن أن لا نكتب ھذه القیمة لتبدأ بشكل افتراضي من الأعلى ,
القیمة الثانیة تمثل اللون الأول ویمكن أن نكتب بجانبھا نسبة مئویة او رقم بالبیكسل یمثل مساحة
تمدد ھذا اللون والقیمة الثالثة تمثل اللون الثاني وأیضا یمكن أن نكتب بجانبھا نسبة مئویة او رقم
بالبیكسل یمثل مساحة تمدد ھذا اللون وھكذا یمكن إضافة قیم أخرى كلھا تمثل ألوان إضافیة مع
ملاحظة أنھ نفصل بین قیمة وأخرى بفارزة .

مثال:

div { background:-webkit-linear-gradient( top , black 50% , #f33 , #ccc 20px ); }

radial-gradient( ):

ھذه الخاصیة جدیدة في CSS3 ویجب أن نسبقھا بالبادئة الخاصة بكل متصفح لتعرض في
المتصفحات المختلفة , وھذه الخاصیة مسئولة عن عمل تدرج لوني بأشكال مختلفة وھي تكتب
كقیمة للخاصیة ( background ( لأنھا تمثل لون الخلفیة , ونضع بین قوسیھا مجموعة من
القیم حیث إن القیمة الأولى تمثل موقع ھذا التدرج وتكون بشكل نسبتین مئویتین حیث إن النسبة
الأولى تمثل الإحداثي السیني والنسبة الثانیة تمثل الإحداثي الصادي ویمكن أن لا نضع ھذه
النسب لتأخذ بشكل افتراضي النسبتین ( %50% 50 ( والقیمة الثانیة تمثل شكل التدرج اللوني
اللون تمثل الثالثة والقیمة ) circle , closest-corner , farthest-corner , ellipse ) ً

مثلا
الأول والقیمة الرابعة تمثل اللون الثاني ویمكن أن نضیف قیم أخرى تمثل الألوان , مع ملاحظة
أنھ نفصل بین كل قیمة وأخرى بفارزة .

مثال:

div { background:-webkit-radial-gradient( 20% 50% , farthest-corner , green , white ); }

ثانیا ً :- خصائص مظھر القوائم

list-style-type:

تستخدم لتحدید نوع الرمز ( الترقیم ) أمام كل عنصر من عناصر القائمة .
قیم القائمة الغیر مرتبة :

1 .circle لتكون بشكل دائري .
2 .square لتكون بشكل مربع .
3 .disc لتكون بشكل قرص فارغ .
4 .none لعدم وضع أي شيء .

قیم القائمة المرتبة :

upper-roman .1
upper-alpha .2
upper-latin .3
lower-roman .4
lower-alpha .5
lower-latin .6
decimal .7

list-style-image:url( );

وھي تستخدم لوضع صورة خاصة أمام كل عنصر من عناصر القائمة كرمز لھ , حیث نضع
بین قوسیھا اسم وامتداد الصورة واسم المجلد إذا كانت في مجلد آخر .

مثال:

ul { list-style-image:url(” الصورة اسم.الامتداد{ ;(“
list-style-position: 
ھذه الخاصیة تستخدم لتحریك القائمة إلى الداخل ( ترك مسافة عن البدایة ) وھي تأخذ قیمتین
ھما :

1 .inside لتحریك القائمة إلى داخل الصفحة .
2 .outside وھي تمثل القیمة الافتراضیة .

مثال:

list-style-position:inside;

list-style:

تستخدم ھذه الخاصیة كاختصار لبعض خصائص القائمة حیث نسند لھا عدة قیم , القیمة الأولى
تمثل قیمة الخاصیة position-style-list والقیمة الثانیة تمثل قیمة الخاصیة -style-list
image , مع ملاحظة الترتیب في القیم .

مثال:

list-style:inside url(‘image.gif’);