الفصل 1

                                                            (مظھر النصوص والخطوط )

                                                    text-align:

تستخدم لمساوة الاسطر و تأخد الاشكال التالية 

لمحاذاة النص إلى جھة الیسار . left .1

لمحاذاة النص إلى جھة الیمین . right .2

لمحاذاة النص إلى الأعلى . top .3

لمحاذاة النص إلى الأسفل . bottom .4

لمحاذاة النص إلى المنتصف . center .5

تجعل جمیع اسطر الفقرة متساویة . justify .6

مثال/

p { text-align:left; }

                                                                             خصائص الخطوط

font-style: 

تستخدم ھذه الخاصیة للتحكم بالخطوط وتأخذ احد القیم التالیة :-

تجعل الخط مائل . italic .1

تجعل اخط عادي وھي القیمة الافتراضیة . normal .2

مثال/

p { font-style:italic; }

font-size: 

10pt وھي تستخدم لتحدید حجم الخط وتأخذ قیمة رقمیة مثلا

مثال/

p { font-size:13pt; }

font-family: 

ویمكن أن , andalus وھي تستخدم لتحدید نوع الخط وتكون قیمتھا عبارة عن اسم الخط مثلا

تأخذ قیم أخرى بالإضافة إلى اسم الخط وھي اسم عائلة من العوائل الثلاثة وھي :-

یفضل استعمالھا مع اللغة الانجلیزیة . sans-serif .1

ینصح باستعمالھا مع الشیفرات الحاسوبیة مثل شیفرات لغات monospace .2

البرمجة .

serif .3

مثال/

body { font-family:tahoma; }

                                                                            الفصل 2

(الحدود والھوامش والحشو )

border-collapse 

ھذه الخاصیة تستخدم مع الجداول فقط , وھي تحدد ھل سیتم طي حدود الخلایا واعتبار وجود

أم سیتم اعتبار حد كل خلیة ( collapse حد واحد بین الخلیتین ( القیمة المسئولة عن ذلك ھي

مستقلا عن الآخر ( مسافة بین حد كل خلیة وأخرى ) .

مثال/

table { border-collapse:collapse; }

border-style 

وھي تستخدم لوضع إطار حول فقرة معینة أو نص معین , وتأخذ احد القیم التالیة لتحدید نوع

ھذا الاطار :-

تستخدم للحدود ثلاثیة الابعاد . outset .1

تستخدم للحدود ثلاثیة الابعاد . inset .2

تستخدم للحدود ثلاثیة الابعاد . groove .3

تستخدم للحدود المضاعفة . double .4

تستخدم للحدود العادیة . solid .5

تستخدم للحدود ثلاثیة الابعاد . ridge .6

تستخدم للحدود المتقطعة . dashed .7

تستخدم للخطوط المنقطة . dotted .8

مثال/

div { border-style:groove; }

                                                                           الفصل 3

( مظھر القوائم والخلفیات )

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

background-color: 

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

مثال/

h1 { background-color:red; }

background-image:url( ); 

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

مثال/

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

background-repeat: 

وھي تستعمل للتحكم بتكرار الصورة في الخلفیة  :-

لتكرار الصورة بشكل أفقي . repeat-x .1

لتكرار الصورة بشكل عمودي . repeat-y .2

لتكرار الصورة عمودیا وأفقیا . repeat .3

لعدم تكرر الصورة . no-repeat .4

(

                                                                            الفصل 4

              ( خصائص منوعة )

width 

pxوھي تستخدم لتحدید عرض فقرة او اطار معین وھي تاخذ قیمة نسبة مئویة او رقم .

مثال/

div { width:40px; }

وفي ھذه الحالة سیكون العرض بنفس عرض ( auto ) یمكن أن نعطیھا القیمة 

الشاشة مھما كبرت او صغرت ولا یظھر شریط التمریر في حالة تصغیر الشاشة .

min-width 

  %وھي تستخدم لتحدید أقل عرض ممكن للإطار وھي تأخذ رقم بكسل او .

max-width 

%وھي تستخدم لتحدید أكبر عرض ممكن للإطار وھي تأخذ رقم بالبیكسل او .

height 

وھي تستخدم لتحدید طول فقرة او اطار معین وھي تأخذ قیمة % او رقم بالبیكسل .

مثال/

div { height:50px; }

                                                                               الفصل 5

                                                                              ( الوسوم الزائفة )

a:hover 

من خلال ھذه الخاصیة  یمكن أن نضیف تأثیر على العنصر عند ملامسة

 <a> مؤشر الفأرة ذلك العنصر ویمكن أن نكتب اسم أي وسم ولیس فقط الوسم

مثال/

div { background-color:blue; }

div:hover { background-color:#585;

font-size:60px; }

الخاص بالوسم ھكذا :- (class ) أو ( id ) یمكن أن نكتب اسم 

( #name:hover { } ) مثلا

a:active 

 فقط , ومن خلالھ نستطیع  <a> ھذه الخاصیة  یستخدم مع الوسم

أن نضیف بعض التأثیرات على الرابط الذي یتم النقر علھ في ھذه اللحظة .

مثال/

a:active { color:yellow; }

@media 

من خلال ھذه الخاصیة  یمكن تخصیص شكل ومظھر الصفحة بناءً على ما

یقوم بعرضھا من شاشة حاسوب او آلة طابعة او غیرھا .

مثال/

<html>

<head>

<style type="text/css" >

@media screen {

p { text-align:justfy;

direction:rtl; }

body { background-color:blue; }

}

@media print {

p { text-align:justfy; } }

</style>

</head>

<body>

<p> paragraphe </p>

</body>

</html>