آخر الأخبار

المختصر المفيد في css

المقدمة
نتيجة بحث الصور عن ‪css‬‏



كیف فكرت بانشاء ھذا الكتاب ؟
فكرت بتعلم تصمیم مواقع الإنترنت وأنا لم یكن لي أي خلفیة مسبقة في البرمجة ولست
صاحب أختصاص في ھذا المجال وانا مجرد ھاوي أعشق البرمجة ولازلت أتعلم الى حد ھذه
اللحظة عندما بدأت أتعلم البرمجة ( ولا ازال ) أحببتھا بشكل جنوني وأصبحت البرمجة تأخذ كل
وقتي حیث أصبحت أمضي في الیوم من 10 الى 15 ساعة امام شاشة اللابتوب وفي بعض
الأحیان استمر لأكثر من 30 ساعة بشكل متواصل , في البدایة أكبر مشكلة واجھتني ھي أنھ لا
توجد كتب ضخمة وتشمل كل جوانب لغة البرمجة والمحتوى العربي ضعیف للغایة والمشكلة
الأكبر ھي أني لا أجید اللغة الإنجلیزیة بشكل جید لذا تقریبا ً قرأت أكثر الكتب العربیة التي كتبت
في ھذه اللغة وبما أن أكثرھا ھو عبارة عن مجموعة صفحات لیس إلا وأغلب المعلومات التي
فیھ ھي فقط أساسیات اللغة وعند قراءة كتاب تجد إن كل مافیھ تقریبا ً ھو موجود في كتاب آخر
مع إضافة بسیطة لذا فكرت بأن أجمع كل معلومة جدیدة أتعلمھا في ھذه اللغة وادونھا بشكل
مختصر لیسھل علي الوصول لھا عند نسیانھا لذا أنشأة مرجع بسیط خاص بي لھذ الغة , وبعد
فترة أصبح فیھ مجموعة لا بأس بھا من المعلومات ففكرت أن أنشرھا بشكل كتاب لیستفاد منھا
كل من یحب تعلم لغة الـ CSS , لذا قد تجدون في ھذا الكتاب الكثیر من الإختصار في شرح
الأوامر ولم أضع أمثلة مطولھ بل فقط أمثلة بسیطة لتصل الفكرة .
وبنفس الطریقة أنشأت مراجع خاصة بي تشمل عدة لغا ت وتقنیات منھا مرجع للغة HTML
ومرجع للغة PHP ومرجع للغة JavaScript وسأنشرھذه الكتب قریبا ً لتكون متاحة للجمیع .
ملاحظة/ ھذه ھي الطبعة الأولى من الكتاب نشرت بتاریخ 20/4/2014 ومن المحتمل أن
أضیف على ھذا المرجع الصغیر بعض الإضافات وأجري علیھ بعض التعدیلات وأنشره كطبعھ
ثانیة ( في المستقبل ) .
ارحب بكل أسئلتكم واستفساراتكم وأیضا ً كل أقتراحاتكم لأنھ كما قلت سابقا ً إني لازلت في بدایة
طریقي في البرمجة ولا زلت اتعلم شيء جدید كل یوم .
یمكنكم التواصل معي على العنوان التالي :ms,simoessendoubi@gmail.com

ملاحظة/ یفترض بالقارئ أن یعرف كیفیة التعامل مع لغة html قبل أن یقراء ھذا الكتاب .




البدایة مع CSS

CSS تعني بالانجلیزیة ( Sheets Style Cascading ( ومعناھا بالعربیة ( صفحات الأنماط
الانسیابیة ) وھي لیست لغة برمجة وإنما تساعد على تنسیق وترتیب صفحة html لأفضل
شكل .

طرق كتابة اكواد CSS
توجد ثلاثة طرق لكتابة اكواد CSS -:
1 -كتابة التنسیق في القسم style في داخ أي وسم من وسوم html ) في داخل صفحة
html , ( مثال/
 <p style="font-size:20pt; font-family:Tahoma; > the text </p>

2 -كتابة كود CSS في الجزء <head <في صفحة html , وذلك بكتابة وسم البدایة
<"css/text="type style <ووسم النھایة <style </وبینھم نضع التنسیق , مثال/
<html> <head>
<style type="text/css">
p { font-size:20pt; color:#000; }
</style> </head>
<body>
<p> the text </p>
</body> </html>



البدایة مع CSS ) 5 (

3 -كتابة الكود في ملف خارجي عن صفحة html -: وھذه أفضل طریقة إذا كانت لدینا عدة
صفحات ( صفحات كثیرة ) حیث فرضا ً لو أردت تعدیل لون الجدول لن تتعب وتغیر جمیع
الصفحات ! بل ستقوم بتعدیل ملف CSS فقط ! ألیس ھذا رائعا ً ؟
لكتابة CSS في صفحة مستقلة ومن ثم استدعائھا :-
أولا ً :- عند كتابة صفحة CSS لا نكتب الوسوم بین وسمي النھایة والبدایة الخاصة ب CSS
 ً مباشرتا الھوتمیل وسوم وتكتب>style type="text/css" > - - - - - - </style>
p { color:red;
 background-color:yello; }
 h1 { color:black; }
ثانیا ً :- عند استدعاء صفحة CSS یجب أن یكتب كود الاستدعاء بین وسمي <head <وكود
الاستدعاء ھو :-
 <link rel="stylesheet" type="text/css" href=" الملف اسم. css " />










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

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

أولا ً :- خصائص مظھر النصوص ( text(
Text-transform: 
ھذه الخاصیة تستخدم لتغییر حالة الأحرف ما بین صغیرة او كبیرة , وتأخذ احد ھذه القیم :-
1 .Uppercase لجعل الحروف كبیرة .
2 .lowercase لجعل الحروف صغیر .
3 .capitalize لجعل الحرف الاول فقط من كل كلمة حرفا ً كبیرا ً .
مثال/
p { text-transform:uppercase; }


text-indent: 
تستخدم ھذه الخاصیة لترك مسافة فاصلة في بدایة كل فقرة , وھي تأخذ قیمة رقمیة مثلا ً :-
 20px
مثال/
p { text-indent:10px; }
* ویمكن اعطاء قیمة رقمیة كبیرة بالسالب لیختفي النص الظاھر من على العنصر وھذا یستخدم
غالبا ً مع الأزرار والروابط , مثال /
a{ text-indent:-9999px; }
الفصل الأول ( مظھر النصوص والخطوط ) ( 7 (

text-decoration: 
وھي تضع خط تحت الوصلة التشعبیة او النص المكتوب وتحدد مكان الخط في الاسفل او
الاعلى او المنتصف او عدم ظھور اي خط , وھي تأخذ احد الخواص التالیة :-
1 .underline تجعل خط اسفل النص .
2 .overline تجعل خط فوق النص .
3 .through-line تجعل الخط في منتصف النص .
4 .none تخفي الخط ولا تجعلھ ظاھر .
مثال/
a { text-decoration:none; }

text-align: 
وھي تستخدم لمحاذاة النص وتحدید مكانھ وكذلك لمساواة اسطر الفقرة , وھي تأخذ احد القیم
التالیة :-
1 .left لمحاذاة النص إلى جھة الیسار .
2 .right لمحاذاة النص إلى جھة الیمین .
3 .top لمحاذاة النص إلى الأعلى .
4 .bottom لمحاذاة النص إلى الأسفل .
5 .center لمحاذاة النص إلى المنتصف .
6 .justify تجعل جمیع اسطر الفقرة متساویة .
مثال/
p { text-align:left; }






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

direction 
تستخدم ھذه الخاصیة لتحدید اتجاه النص من الیمین إلى الیسار او بالعكس , وتأخذ القیمتین
التالیتین :-
1 .rtl من الیمین إلى الیسار .
2 .ltr من الیسار إلى الیمین .
مثال/
 body { direction:rtl; }

letter-spacing: 
تستخدم ھذه الخاصیة لتبعد بین الحروف في الكلمة الواحدة وتأخذ قیمة رقمیة .
مثال/
 p { letter-spacing:10px; }

word-spacing: 
تستخدم ھذه الخاصیة للتبعید بین الكلمات ( بین كلمة وكلمة أخرى ) وھي تأخذ قیمة رقمیة .
مثال/
p { word-spacing:10px; }
 white-space 
في الـ html اذا كتبنا نص وضغطنا enter من لوحة المفاتیح كتبنا نص آخر فأنھ سیظھر في
الموقع وكأنھ نص واحد أي وكأننا لم نضغط على enter ) وطبعا ً حتى لو ضغطنا أكثر من
مرة ) وإذا أردنا أن یظھر في الموقع سطر جدید كلما نضغط على enter نستخدم ھذه
الخاصیة ونسند لھا القیمة pre , ولاحظ أن في ھذه القیمة سیحسب الفراغات وكل المسافات
المتروكة , وإذا أردناه أن یحسب فقط الالأسطر الجدیدة ولا یحسب الفراغات نضع القیمة
 pre-line
الفصل الأول ( مظھر النصوص والخطوط ) ( 9 (

مثال
white-space:pre-line;
line-height: 
تستخدم ھذه الخاصیة لتحدید التباعد بین اسطر الكتابة , بمعنى لو كان لدینا نص كبیر یمتد لعدة
اسطر یمكننا التحكم بتباعد ھذه الأسطر من خلال ھذه الخاصیة , مع ملاحظة أن ھذه الخاصیة
تطبق إذا كان ھذا النص الكبیر في فقرة واحدة ( وسم html واحد ) ولیس في أكثر من فقرة ,
وھي تأخذ قیمة رقمیة .
مثال/
 p { line-height:30px; }

text-shadow: 
ھذه خاصیة جدیدة في CSS3 , وھي تستخدم لإظھار ظل للنصوص وتأخذ ثلاثة قیم رقمیة
وقیمة لونیة , حیث إن القیمة الأولى تمثل بعد الظل عن النص بشكل أفقي والقیمة الثنیة تمثل
بعد الظل عن النص بشكل عمودي والقیمة الثالثة تمثل شدة وضوح الظل أما الأخیرة وھي
القیمة اللونیة فھي تمثل لون الظل .
مثال/
 h2 { text-shadow:10px 10px 5px #333; }

 ویمكن أن نضیف أكثر من ظل لنفس النص وذلك بكتابة القیم الأربعة أسفل قیم
خاصیة الظل الأولى مع استبدال الفارزة المنقوطة في نھایة الخاصیة الأولى إلى
فارزة فقط .
مثال/
text-shadow:7px 5px 3px #333,
 10px 10px 3px #fff;
وبنفس الطریقة یمكن إضافة ظل ثالث أو رابع أو أكثر كما نشاء . 
الفصل الأول ( مظھر النصوص والخطوط ) ( 10 (

 ھناك مجموعة جدیدة من الخصائص تستخدم في CSS3 للتعدیل على النصوص ویجب أن
نسبقھا بالبادئة الخاصة بكل متصفح لتعرض في المتصفحات المختلفة , وھي موضحة في
الجدول في الأسفل :-
الخاصیة القیم الممكنة الشرح
hangingpunctuation
none / last / allow-end /
first / force-end
تحدد موضع علامة الترقیم خارج
حدود العنصر <p<
start / end / allow-end / punctuation-trim
adjacent / none
تزیل علامة الترقیم الافتتاحیة من
بدایة كل سطر من اسطر <p<
auto / inter-word / text-justify
inter-ideograph / kashida /
distribute / inter-cluster /
trim /
تحدد طریقة تحدید المحاذاة عندما
تكون قیمة الخاصیة ( align-text(
تساوي ( justify(
outline-text قیمة بالبیكسل تعبر عن العرض
وقیمة لونیة تعبر عن اللون
تحدد عرض ولون الحدود الخارجیة
للنص
overflow-text string / ellipsis / clip تحدد ما الذي یتم عملھ عندما یصبح
طول النص اكبر من النص الحاوي
لھ
none / normal / text-wrap
unrestricted / suppress
تحدد طریقة تحقق التفاف النصوص
normal / break-all / word-break
hyphenate
تحدد طریقة تقسیم الكلمات الطویلة
warp-word break-word / normal تقوم بتحقیق التفاف النصوص عبر
تقسیم الكلمات الطویلة بناءً على
الطریقة المحددة في الخاصیة
word-break








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

ثانیا ً :- خصائص الخطوط
font-style: 
تستخدم ھذه الخاصیة للتحكم بالخطوط وتأخذ احد القیم التالیة :-
1 .italic تجعل الخط مائل .
2 .normal تجعل اخط عادي وھي القیمة الافتراضیة .
مثال/
p { font-style:italic; }

font-size: 
وھي تستخدم لتحدید حجم الخط وتأخذ قیمة رقمیة مثلا ً 10pt
مثال/
p { font-size:13pt; }

font-family: 
وھي تستخدم لتحدید نوع الخطوتكون قیمتھا عبارة عن اسم الخط مثلا ً andalus , ویمكن أن
تأخذ قیم أخرى بالإضافة إلى اسم الخط وھي اسم عائلة من العوائل الثلاثة وھي :-
1 .serif-sans یفضل استعمالھا مع اللغة الانجلیزیة .
2 .monospace ینصح باستعمالھا مع الشیفرات الحاسوبیة مثل شیفرات لغات
البرمجة .
 serif .3
مثال/
body { font-family:tahoma; }


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

font-weight: 
وھي تستخدم لتحدید سماكة الخط , ونأخذ احد القیم التالیة :-
1 .bold تجعل الخط سمیك .
2 .normal لیكون النص طبیعي ( القیمة الافتراضیة ).
مثال/
p { font-weight:bold; }

font: 
تمكننا ھذه الخاصیة من تطبیق مجموعة من تأثیرات الخط بشكل مختصر حیث إنھا ستأخذ عدة
قیم وكل قیمة تمثل تأثیر خاصیة معینة .
مثال/
 p { font:italic bold 15px Tahoma; }
مع ملاحظة أن ھذه القیم یتم كتابتھا بالترتیب وأي قیمة لا نریدھا یمكن أن لا نكتبھا , حیث إن
القیمة الأولى تمثل شكل الخط والثانیة تمثل سمك الخط والثالثة تمثل حجم الخط والرابعة تمثل
نوع الخط .

color: 
تستخدم ھذه الخاصیة لتحدید لون الخط وھي تاخذ قیمة لونیة .
مثال/
 p { color:#00ffcc; }





الفصل الثاني ( الحدود والھوامش والحشو ) ( 13 (

الفصل الثاني
(الحدود والھوامش والحشو )


border-collapse 
ھذه الخاصیة تستخدم مع الجداول فقط , وھي تحدد ھل سیتم طي حدود الخلایا واعتبار وجود
حد واحد بین الخلیتین ( القیمة المسئولة عن ذلك ھي collapse ( أم سیتم اعتبار حد كل خلیة
مستقلا ً عن الآخر ( مسافة بین حد كل خلیة وأخرى ) .
مثال/
 table { border-collapse:collapse; }
border-style 
وھي تستخدم لوضع إطار حول فقرة معینة أو نص معین , وتأخذ احد القیم التالیة لتحدید نوع
ھذا الاطار :-
1 .outset تستخدم للحدود ثلاثیة الابعاد .
2 .inset تستخدم للحدود ثلاثیة الابعاد .
3 .groove تستخدم للحدود ثلاثیة الابعاد .
4 .double تستخدم للحدود المضاعفة .
5 .solid تستخدم للحدود العادیة .
6 .ridge تستخدم للحدود ثلاثیة الابعاد .
7 .dashed تستخدم للحدود المتقطعة .
8 .dotted تستخدم للخطوط المنقطة .
مثال/
 div { border-style:groove; }
الفصل الثاني ( الحدود والھوامش والحشو ) ( 14 (

ویمكن ان نعطي لكل جھة من الاطار نوع اطار مختلف وذلك بكتابة الاتجاه ما بین كلمة
border و style ھكذا
style-الاتجاه-border , مثال/
 dive { border-top-style:solid; }
ویمكن ان نكتب كل الاتجاھات بشكل مختصر وذلك عن طریق اسناد اربع قیم للخاصیة حیث
ان القیمة الاولى تمثل الجھة العلویة والثانیة تمثل الیمین والثالثة الاسفل والرابعة الیسار ( بأتجاه
عقرب الساعة ) ونفصل بین كل قیمة واخرى بفاصلة واحدة , مثال/
div { border-style:solid dotted ridge double; }

border-width: 
وھي تستخدم لتحدید سمك الاطار , وتأخذ قیمة رقمیة مثلا ً 2px او تاخذ احد ھذه القیم :-
1 .thin للإطار الضعیف .
2 .Medium للإطار متوسط السمك .
3 .thick للإطار السمیك .
مثال/
p { border-width:1px; }
ویمكن ان نعطي لكل جھة من الاطار سمك معین وذلك بكتابة الاتجاه ما بین كلمة border و
width ھكذا
width-الاتجاه-border , مثال/
p { border-left-width:2px; }
ویمكن ان نكتب كل الاتجاھات بشكل مختصر وذلك عن طریق اسناد اربع قیم للخاصیة حیث
ان القیمة الاولى تمثل الجھة العلویة والثانیة تمثل الیمین والثالثة الاسفل والرابعة الیسار ( بأتجاه
عقرب الساعة ) ونفصل بین كل قیمة واخرى بفاصلة واحدة , مثال/
p { border-width:1px 2px 6px 1px; }

الفصل الثاني ( الحدود والھوامش والحشو ) ( 15 (

border-color 
وھي تستخدم لتحدید لون الاطار وتاخذ قیمة لونیة , مثال/
 p { border-color:#e3e; }
ویمكن ان نعطي لكل جھة من الاطار لون معین وذلك بكتابة الاتجاه ما بین كلمة border و
color ھكذا :-
color-الاتجاه-border , مثال/
p { border-bottom-color:red; }
ویمكن ان نكتب كل الاتجاھات بشكل مختصر وذلك عن طریق اسناد اربع قیم للخاصیة حیث
ان القیمة الاولى تمثل الجھة العلویة والثانیة تمثل الیمین والثالثة الاسفل والرابعة الیسار ( بأتجاه
عقرب الساعة ) ونفصل بین كل قیمة واخرى بفاصلة واحدة , مثال/
p { border-color:#e3e #333 #fff red; }
border: 
تستعمل ھذه الخاصیة لتحدید سمك ونوع ولون حدود الإطار , وھي عبارة عن اختصار
للخواص السابقة حیث یمكن أن نجمع في ھذه الخاصیة الثلاث خواص السابقة وھي (
width-border و style-border و color-border ( حیث تكون قیمتھا عبارة عن ثلاثة
قیم كل قیمة تمثل خاصیة لكن یجب الانتباه إلى الترتیب في وضع القیم حیث أن القیمة الأولى
تمثل سمك الإطار والثانیة تمثل نوع الإطار والثالثة تمثل لون الإطار , ونفصل بین كل قیمة
وأخرى بفاصلة واحدة .
مثال/
 p { border:1px solid #333; }





الفصل الثاني ( الحدود والھوامش والحشو ) ( 16 (

outline: 
ھذه الخاصیة نمثل الحدود الخارجیة للإطار حیث یمكن مثلا ً أن نعطي لفقرة معینة إطار لكنھ
یكون ذو لونین حیث إن اللون الأول یمثلھ الإطار ( border ( واللون الثاني یمثلھ ما ھو خارج
الإطار ( outline ( وھذه الخاصیة تأخذ قیم الخاصیة ( border ( نفسھا .
مثال/
p { border:2px solid red;
 outline:5px ridge #3ff; }
 ویمكن أن نكتب الخاصیة ( outline ( لوحدھا أي لیس من الضروري أن نستخدمھا
ھي والخاصیة ( border(معا ً في نفس الفقرة .

padding: 
تستخدم ھذه الخاصیة لتحدید المسافة المحیطة بالنص او الصورة أو المسافة الفاصلة بین النص
والإطار وھي تأخذ قیمة رقمیة مثلا 5em , وفي ھذه الحالة سوف یترك المسافة المحیطة
بالعنصر من جمیع الاتجاھات لكن ویمكن أن نحدد المسافة من جھة واحدة او اكثر وذلك
باضافة الاتجاه بعد الخاصیة padding ھكذا :- الاتجاه-padding .
مثال/
p { padding-left:4em;
 padding-top:3em; }
ویمكن أن نضیف قیم الاتجاھات الأربعة إلى الخاصیة :padding وذلك بإعطائھا أربع قیم
حیث إن القیمة الأولى تمثل الجھة العلویة والثانیة تمثل الیمین والثالثة تمثل الأسفل والرابعة
تمثل الیسار ( باتجاه عقارب الساعة ) حیث سوف نترك بین كل قیمة وأخرى بفاصلة واحدة
مثال/
p { padding:5px 3px 8px 3px; }



الفصل الثاني ( الحدود والھوامش والحشو ) ( 17 (

margin: 
تستخدم ھذه الخاصیة لتحدد المسافة بین حدود الفقرة وما یحیط بھا من الخارج ( من فقرات
أخرى أو حدود صفحة ) وھي تأخذ قیمة رقمیة , مثال/
 p { margin:20px; }
لكن في ھذه الحالة سوف تضیف المسافة الفارغة من جمیع الاتجاھات لكن إذا أردنا ترك مسافة
من جھة واحدة فقط سوف نكتب الاتجاه بعد الخاصیة ھكذا :- ( :right-margin (
مثال/
p { margin-top:20px;
 margin-left:8px; }
وكذلك یمكننا أن نضیف مسافة لكل جھة بشكل مختلف عن طریق إضافة أربع قیم ( تمثل
الاتجاھات الأربعة ) إلى الخاصیة :margin حیث إن القیمة الأولى تمثل الجھة العلویة والثانیة
تمثل الیمین والثالثة تمثل الأسفل والرابعة تمثل الیسار ( باتجاه عقارب الساعة ) حیث سوف
نترك فاصلة واحدة بین كل قیمة وأخرى .
مثال/
 p { margin:5px 10px 0 4px; }
 إذا أردنا أن نحدد مكان فقرة في منتصف الصفحة یمكن أن نفعل ذلك من خلال إسناد
القیمة ( auto ( و ( 0 ( إلى الخاصیة ( :margin. (
مثال/
div { margin:0 auto; }

border-radius: 
وھي تستعمل لتقویس زاویة الإطار وتأخذ قیمة رقمیة مثلا ً 20px , مع ملاحظة أن ھذه
الخاصیة جدیدة في CSS3 .
مثال/
 div { border-radius:20px; }
الفصل الثاني ( الحدود والھوامش والحشو ) ( 18 (

ویمكن أن نضع اتجاه لتتقوس زاویة معینة فقط , مثال/
 div { border-top-right-radius:20px; }

border-image:url( ); 
ھذه الخاصیة جدیدة في CSS3 وھي مسئولة عن إنشاء إطار عنصر بالاعتماد على صورة
صغیرة تمثل الإطار والصیغة العامة لھذه الخاصیة ھي :-
 border-image:source slice width outside repeat;
Source تمثل مصدر الصورة بین قوسین مسبوقة ب url
slice & outside قیمة تمثل جزء الصورة الذي سیتم تكراره او تمدده لصنع الإطار ( رقم )
width عرض الإطار ( رقم )
repeat نضع مكانھا احد ھذین القیمتین :- 1 -repeat لتكرار جزء من الصورة .
 2 -stretch لتمدد جزء من الصورة .
ویجب أن نسبقھا بالبادئة الخاصة بكل متصفح لتعرض في المتصفحات المختلفة .
مثال/
 div { border-image:url(name.gif) 30 30 20 stretch ; }

box-shadow 
ھذه خاصیة جدیدة في CSS3 , وھذه الخاصیة تستخدم لصنع ظل حول إطار معین ( فقرة او
نص او قسم معین ) ویمكننا التحكم بحجم ولون الظل , وھذه الخاصیة تأخذ ثلاث قیم رقمیة
وواحدة لونیة حیث إن القیمة الأولى تحدد سمك الظل إذا أعطیناھا قیمة سالبة سیكون الظل من
جھة الیسار وإذا أعطیناھا قیمة موجبة سیكون الظل من جھة الیمین , القیمة الثانیة تحدد سمك
الظل وإذا أعطیناھا قیمة سالبة سیكون الظل في الأعلى أما إذا أعطیناھا قیمة موجبة سیكون
الظل من الأسفل , القیمة الثالثة تمثل شدة وضوح الظل ولا یمكن أن تأخذ قیمة سالبة وأما القیمة
الرابعة فھي تحدد لون الظل .
مثال/
 p { box-shadow:10px 10px 5px #888; }
الفصل الثاني ( الحدود والھوامش والحشو ) ( 19 (

 ویمكن أن نضیف أكثر من ظل لنفس النص وذلك بكتابة القیم الأربعة أسفل قیم
خاصیة الظل الأولى مع استبدال الفارزة المنقوطة في نھایة الخاصیة الأولى إلى
فارزة فقط .
مثال/
box-shadow:7px 5px 3px #333,
 10px 10px 3px #fff;
وبنفس الطریقة یمكن إضافة ظل ثالث أو رابع أو أكثر كما نشاء .

















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

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


أولا ً :- خصائص الخلفیات
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 لعدم تكرر الصورة .

الفصل الثالث ( مظھر القوائم والخلفیات ) ( 21 (
مثال/
 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;



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

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 ویجب أن نسبقھا بالبادئة الخاصة بكل متصفح لتعرض في
المتصفحات المختلفة , وھذه الخاصیة تحدد احد أجزاء نموذج الصندوق لیتم تطبیق الخلفیة على
أساسھ , وھي تأخذ احد ھذه القیم :-


الفصل الثالث ( مظھر القوائم والخلفیات ) ( 23 (
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 ); }




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

radial-gradient( ) 
ھذه الخاصیة جدیدة في CSS3 ویجب أن نسبقھا بالبادئة الخاصة بكل متصفح لتعرض في
المتصفحات المختلفة , وھذه الخاصیة مسئولة عن عمل تدرج لوني بأشكال مختلفة وھي تكتب
كقیمة للخاصیة ( background ( لأنھا تمثل لون الخلفیة , ونضع بین قوسیھا مجموعة من
القیم حیث إن القیمة الأولى تمثل موقع ھذا التدرج وتكون بشكل نسبتین مئویتین حیث إن النسبة
الأولى تمثل الإحداثي السیني والنسبة الثانیة تمثل الإحداثي الصادي ویمكن أن لا نضع ھذه
النسب لتأخذ بشكل افتراضي النسبتین ( %50% 50 ( والقیمة الثانیة تمثل شكل التدرج اللوني
 اللون تمثل الثالثة والقیمة ) circle , closest-corner , farthest-corner , ellipse ) ً مثلا
الأول والقیمة الرابعة تمثل اللون الثاني ویمكن أن نضیف قیم أخرى تمثل الألوان , مع ملاحظة
أنھ نفصل بین كل قیمة وأخرى بفارزة .
مثال/
div { background:-webkit-radial-gradient( 20% 50% , farthest-corner , green , white ); }
















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

ثانیا ً :- خصائص مظھر القوائم
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(" الصورة اسم.الامتداد{ ;("




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

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');












الفصل الرابع ( خصائص منوعة ) ( 27 (

الفصل الرابع
( خصائص منوعة )

width 
وھي تستخدم لتحدید عرض فقرة او اطار معین وھي تاخذ قیمة نسبة مئویة او رقم بالبیكسل .
مثال/
 div { width:400px; }
 یمكن أن نعطیھا القیمة ( auto ( وفي ھذه الحالة سیكون العرض بنفس عرض
الشاشة مھما كبرت او صغرت ولا یظھر شریط التمریر في حالة تصغیر الشاشة .
min-width 
وھي تستخدم لتحدید أقل عرض ممكن للإطار وھي تأخذ رقم بالبیكسل او نسبة مئویة .
max-width 
وھي تستخدم لتحدید أكبر عرض ممكن للإطار وھي تأخذ رقم بالبیكسل او نسبة مئویة .

height 
وھي تستخدم لتحدید طول فقرة او اطار معین وھي تأخذ قیمة نسبة مئویة او رقم بالبیكسل .
مثال/
div { height:500px; }


الفصل الرابع ( خصائص منوعة ) ( 28 (
min-height 
وھي تستخدم لتحدید أقل ارتقاع ممكن للإطار وھي تأخذ رقم بالبیكسل او نسبة مئویة .
max-height 
وھي تستخدم لتحدید أكبر ارتفاع ممكن للإطار وھي تأخذ رقم بالبیكسل او نسبة مئویة .
opacity 
من خلال ھذه الخاصیة یمكننا التحكم بدرجة الشفافیة عبر اسناد قیمة من 0.0 الى 0.1 حیث ان
القیمة 0.0 تعني عدم الظھور والقیمة 0.1 تعني الظھور الكامل والقیم الاخرى تكون مابین
ھذین القیمتین .

resize 
من خلال ھذه الخاصیة یمكن التحكم بالحجم من حیث التكبیر والتصغیر ویمكن أن نعطیھا
القیمة none لعدم السماح للمستخدم بتغییر الحجم
مثال/
textarea { resize:none; }

float 
تسمى خاصیة التعویم وھي تستخدم للحفاظ على تموضع متناسق للعناصر حیث یتم تعویم جمیع
العناصر إلى جھة واحدة بالنسبة لعنصر محدد والتعویم یكون أما إلى الیسار left او إلى الیمین
right بمعنى انھ من خلال ھذه الخاصیة یمكن تحدید اتجاه ( مكان ) عنصر معین في الصفحة
یمین او یسار الصفحة , ویمكن أن تأخذ القیمة ( none ( لإلغاء التعویم .
مثال/
 ul { float:right; }

الفصل الرابع ( خصائص منوعة ) ( 29 (

 عند تعویم عنصر ما فأن العناصر التي تلیھ سوف تلتف حولھ ( تعوم ) بما یتلاءم مع
تعویمھ أما العناصر التي قبلھ لا تتأثر بالتعویم . أي مثلا یتم تعویم صورة ویوضع
بجوارھا نص وذلك حتى یكون النص مرتب بجوارھا .

clear 
تستخدم ھذه الخاصیة لمنع تعویم عناصر بجوار عنصر معین , وھي تأخذ القیمة left لمنع
التعویم من الیسار والقیمة right لمنع التعویم من الیمین والقیمة both لمنع التعویم من
الطرفین

position:relative; 
تستخدم ھذه الخاصیة على إزاحة عنصر معین إلى جھة معینة بمقدار معین بالنسبة للعنصر
الذي فوقھ أو الذي بجواره ولیس بالنسبة إلى الصفحة , مع ملاحظة إنھ عندما یتم إزاحة
العنصر إلى مكان جدید فأنھ یبقى شاغر حیز مكانھ القدیم وكأنھ لا یزال موجود فیھ وذلك
بخلاف الخاصیة ( absolute-position , ( وھي تأخذ احد ھذه القیم :-
top: رقم px .1
 bottom: رقم px .2
 left: رقم px .3
right: رقم px .4
 ویمكن أن تأخذ رقم مسبوق بإشارة سالب لیعمل بشكل عكسي .
مثال/ یمكن أن یكتب ھذا المثال بطریقتین :- الطریقة الأولى :-
position:relative; bottom:-100px; right:70px;
الطریقة الثانیة :-
position:relative;
bottom:-100px;
right:70px;

الفصل الرابع ( خصائص منوعة ) ( 30 (

position:absolute; 
تستخدم ھذه الخاصیة لإزاحة عنصر معین إلى جھة معینة بمقدار معین بالنسبة إلى الصفحة
وتستخدم في الغالب مع الصور ویمكن استخدامھا مع غیر الصور , مع ملاحظة إنھ عندما یتم
إزاحة عنصر معین إلى مكان جدید فأنھ لا یبقى یشغل حیز مكانھ القدیم بل یشغل مكانھ الجدید
فقط بخلاف الخاصیة ( relative-position , ( وھي تأخذ احد القیم التالیة :-
top: رقم px .1
 bottom: رقم px .2
 left: رقم px .3
right: رقم px .4
 ویمكن أن تأخذ رقم مسبوق بإشارة سالب لیعمل بشكل عكسي .
مثال/ یمكن أن یكتب المثال بطریقتین :- الطریقة الأولى :-
position:absolute; top:150px; left:100px;
الطریقة الثانیة :-
 position:absolute;
 top:150px;
 left:100px;

position: 
تستخدم ھذه الخاصیة لجعل عنصر معین ثابت في الصفحة ولا یتغیر مكانھ عند النزول أو
الصعود في داخل الصفحة إذا كانت الصفحة كبیرة , وھي تأخذ القیمة fixed .
مثال/
div { position:fixed; }




الفصل الرابع ( خصائص منوعة ) ( 31 (

z-index: 
تعمل ھذه الخاصیة فقط مع الخاصیة ( :position ( حیث إنھا سوف تحدد أي من العناصر
سیظھر فوق الآخر ( إذا كانت العناصر متداخلة ) حیث سوف نعطي للعنصر الذي یظھر في
الأسفل الخاصیة :index-z تحمل القیمة ( 1 (وللعنصر الذي سیكون فوقھ القیمة ( 2 ( والذي
فوقھ القیمة ( 3 ( وھكذا , مع ملاحظة أن الكلام السابق ینطبق إذا كان العنصران یحملان
الخاصیة ( :position ( أما إذا كان عنصر واحد فقط ھو الذي یحمل الخاصیة ( :position(
وأردناه أن یظھر في الأعلى فوق بقیة العناصر نعطیھ الخاصیة :index-z حاملة القیمة ( 1(
( مع ملاحظة انھ یظھر في الأعلى فوق بقیة العناصر بشكل افتراضي ) أما إذا أردناه أن یظھر
في الأسفل تحت بقیة العناصر نعطیھ الخاصیة :index-z حاملة القیمة ( 1 . ( -
 عندما أتحدث ھنا عن الخاصیة ( position ( أقصد بھا كل خصائص ( position(
 . ( position: ) أو ) position-absolute: ) او ) position-relative: ) مثلا
مثال/
p { position:absolute;
 top:20px;
 z-index:-1; }

overflow: 
وھي تستخدم لإظھار مقبض الحركة وتأخذ الخاصیة scroll , اوتأخذ الخاصیة hidden
لأخفاء مقبض الحركة .

 cursor 
وھي تستخدم للتحكم بشكل سھم الفأرة وھي تأخذ عدة قیم منھا .
1 -pointer لتظھر شكل الید للأختیار .
2 -none لیختفي السھم .
3 -auto لیظھر السھم بالشكل الطبیعي لھ ( أي بحسب المكان الذي سیقف فیھ ) .
4 -default لیبقى بشكل سھم دائما ً .
5 -progress لیظھر وكأنھ یحمل شيء ما .
6 -url وھي تستخدم لوضع صورة لتظھر مكان السھم .
الفصل الرابع ( خصائص منوعة ) ( 32 (
مثال/
Cursor:pointer;

 إخفاء العناصر
من الممكن إخفاء عناصر HTML باستخدام CSS بطریقتین :-
1 .إسناد القیمة none إلى الخاصیة display.
2 .إسناد القیمة hidden إلى الخاصیة visibility ) . ملاحظة// اذا اسندنا القیمة visible
الى ھذه الخاصیة فأن العنصر المحدد سیظھر )
والاختلاف بینھما ھو أنالطریقة الثانیة تخفي العنصر مع الحفاظ على الحیز الذي یشغلھ فارغا ً
أما الطریقة الأولى تخفي العنصر مع عدم الحفاظ على الحیز الذي یشغلھ مما یؤثر على
تموضع العناصر .

 أنواع عرض العناصر
یتم عرض العناصر في HTML بطریقتین :-
1 .بشكل كتلة block -: حیث یتم النزول سطرا ً قبل العنصر وسطر بعد العنصر ھذه
الحالة نراھا مع عناصر مثل <h1 <و <p <و <div <وفي ھذه الحالة ستكون كلھا
كجزء واحد مترابطة فیما بینھا .
2 .بشكل سطري inline -: حیث یتم وضع العنصر ضمن نفس السطر دون الحاجة
للنزول سطرا ً وھذه الحالة نراھا مع عناصر مثل <a <و <span , <حیث أن في ھذه
الحالة تكون مقسمة إلى أجزاء .
تسمح CSS بتغییر نوع العرض للعناصر من block إلى inline وبالعكس عن طریق إسناد
إحدى القیمتین block و inline إلى الخاصیة display ویمكن أن نعرض العناصر بخط واحد
( سطر أفقي ) وفي نفس الوقت تكون جزء واحد , ھنا سنستخدم ھذه الخاصیة block-inline
 .



الفصل الرابع ( خصائص منوعة ) ( 33 (

 الأعمدة المتعددة
ھذه الخاصیة جدیدة في CSS3 ویجب أن نسبق الخاصیة بالبادئة الخاصة بكل مستعرض لیتم
عرضھا على المستعرضات المختلفة , ومن خلال ھذه الخاصیة یمكن عرض محتوى العناصر
على شكل أعمدة متعددة ( بشكل الجرائد ) وذلك بطریقتین :-
1 .عدد أعمدة ثابت وعرض عمود متغیر :- ویتم ذلك من خلال إسناد عدد الأعمدة إلى
الخاصیة ( count-column ( التي تقسم المحتوى إلى العدد المذكور من الأعمدة
ویتغیر عرض الأعمدة مع تغیر حجم نافذة المستعرض , والخاصیة ( gap-column(
تستخدم لتحدید المسافة بین العمودین , والخاصیة ( rule-column ( تمكننا من وضع
فواصل ذات مظھر ولون محددین بین الأعمدة .
مثال/
-webkit-column-cont:2;
 -webkit-column-gap:20px;
 -webkit-column-rule:4px dotted black;

2 .عرض عمود ثابت وعدد أعمدة متغیر :- ویتم ذلك من خلال إضافة عرض العمود
الواحد إلى الخاصیة ( width-column ( وفي ھذه الطریقة تحافظ الأعمدة على
عرض ثابت لكل منھا ویتغیر عددھا مع تغیر حجم نافذة المستعرض , والخاصیة
( gap-column (تستخدم لتحدید المسافة بین العمودین , والخاصیة ( rule-column(
تمكننا من وضع فواصل ذات مظھر ولون محددین بین الأعمدة .
مثال/
-ms-column-width:200px;
-ms-column-gap:30px;
 -ms-column-rule:4px dotted black;



الفصل الخامس ( التحویلات الھندسیة وخصائص الحركة ) ( 34 (

الفصل الخامس
( التحویلات الھندسیة وخصائص الحركة )

 ھذا الموضوع ( الفصل الخامس ) جدید في CSS3 ویجب أن نسبق خواصھ بالبادئة
الخاصة بكل متصفح لتعرض في المتصفحات المختلفة .


أولاً :- التحویلات الھندسیة ذات البعدین 2D
transform الخاصیة 
وھي تأخذ احد ھذه التوابع الموضحة في الجدول
التابع الشرح
(y,x(translate ینقل العنصر إلى الإحداثیات الممررة إلیھ
(n(translateX ینقل العنصر على المحور X مسافة n
(n(translateY ینقل العنصر على المحور Y مسافة n
(y,x(scale یغیر بعدي العنصر إلى البعدین الممررین إلیھ
(n(scaleX یغیر بعد العنصر X إلى القیمة n
(n(scaleY یغیر بعد العنصر Y إلى القیمة n
( α(rotate یقوم بتدویر العنصر بزاویة α
(Yα , Xα(skew یقوم بإجراء تحویل الانحراف وفق الزاویتین Xα و Yα
(α(skewX یقم بإجراء تحویل الانحراف على المحور X وفق الزاویة α
(α(skewY یقم بإجراء تحویل الانحراف على المحور Y وفق الزاویة α



الفصل الخامس ( التحویلات الھندسیة وخصائص الحركة ) ( 35 (

مثال/
div { -webkit-transform:skew(30deg , 20deg);
 width:100px; height:75px;
 background-color:red; }
ملاحظة/ الحرف ( deg ( في المثال السابق التي تم تمریرھا بعد الارقام إلى تابع التحویل تعني
درجة ( degree( وذلك تمییزا ً عن الرادیان والذي یرمز لھ بالأحرف ( rad . (



ثانیاً :- التحویلات الھندسیة ثلاثیة الأبعاد 3D
 transform الخاصیة 
تتم التحویلات ثلاثیة الأبعاد بنفس الخاصیة السابقة ( transform ( لكن تأخذ ھذه التوابع
المختلفة قلیلا ً
التابع الشرح
(z,y,x(translate3d ینقل العنصر إلى الإحداثیات الممررة إلیھ
(n(translateX ینقل العنصر على المحور X مسافة n
(n(translateY ینقل العنصر على المحور Y مسافة n
(n(translateZ ینقل العنصر على المحور Z مسافة n
(z,y,x(scale3d یغیر أبعاد العنصر إلى الأبعاد الممررة إلیھ
(n(scaleX یغیر بعد العنصر X إلى القیمة n
(n(scaleY یغیر بعد العنصر Y إلى القیمة n
(n(scaleZ یغیر بعد العنصر Z إلى القیمة n
( α,z,y,x(rotate3d یقوم بتدویر العنصر على المحاور الثلاثة بزاویة α
( α(rotateX یقوم بتدویر العنصر على المحور X بزاویة α
( α(rotateY یقوم بتدویر العنصر على المحور Y بزاویة α
( α(rotateZ یقوم بتدویر العنصر على المحور Z بزاویة α
perspective یحدد منظور الرؤیة

الفصل الخامس ( التحویلات الھندسیة وخصائص الحركة ) ( 36 (

ثالثاً :- الانتقال المتحرك
transition 
یمكن إنشاء تأثیر حركة على عناصر المستند تحت تأثیر زمني معین والذي یتم تحقیقھ عبر ھذه
الخاصیة ( transition ( والصیغة العامة لھا ھي :-
 transition:property1 duration1 , property2 duration2 , …… etc ;
حیث أن property تمثل اسم الخاصیة التي ستتغیر و duration تعبر عن الزمن , ویمكن
تغییر خاصیة واحدة فقط أو عدة خواص معا ً او كل الخواص وسنكتب all وبعدھا الزمن .
مثال/
<html> <head>
<style type="text/css" >
div { width:100px;
 height:100px;
 background:red;
 -webkit-transition:width 2s , height 2s; }
div:hover { width:200px;
 height:200px;
 -webkit-transform:rotate(180deg); }
</style> </head> <body>
<div> Hello world </div>
 </body> </html>

حیث إن s تشیر إلى الثانیة second



الفصل السادس ( الوسوم الزائفة ) ( 37 (

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

a:hover 
من خلال ھذه الخاصیة ( الوسم الزائف ) یمكن أن نضیف تأثیر على العنصر عند ملامسة
مؤشر الفأرة ذلك العنصر ویمكن أن نكتب اسم أي وسم ولیس فقط الوسم <a ) <كتبناه كمثال
ویمكن استخدام غیره من الأوسمة ) .
مثال/
div { background-color:red; }
div:hover { background-color:#333;
 font-size:20px; }
 یمكن أن نكتب اسم ( id ( أو ( class (الخاص بالوسم ھكذا :-
( #name:hover { } ) ً مثلا

a:active 
ھذه الخاصیة ( الوسم الزائف ) یستخدم مع الوسم <a ) <الروابط ) فقط , ومن خلالھ نستطیع
أن نضیف بعض التأثیرات على الرابط الذي یتم النقر علھ في ھذه اللحظة .
مثال/
 a:active { color:red; }



الفصل السادس ( الوسوم الزائفة ) ( 38 (

a:visited 
ھذه الخاصیة ( الوسم الزائف ) یستخدم مع الوسم <a ) <الروابط ) فقط , ومن خلالھ نستطیع
أن نضیف بعض التأثیرات على الرابط الذي تم زیارتھ .
مثال/
 a:visited { color:yello; }

a:link 
ھذه الخاصیة ( الوسم الزائف ) یستخدم مع الوسم <a ) <الروابط ) فقط ,ومن خلالھ نستطیع
أن نتحكم بالرابط أو الوصلة التشعبیة .
مثال/
 a:link { color:#f03; }
input:focus 
من خلال ھذه الخاصیة ( الوسم الزائف ) یمكن تطبیق التأثیرات على حقول الإدخال input .
مثال/
input:focus { border:3px solid #333;
 background-color:#ff0; }

first-letter 
من خلال ھذه الخاصیة ( الوسم الزائف ) نستطیع أن نطبق تأثیر معین على الحرف الأول من
كل فقرة ( النص ) , حیث یجب أن نسبق ھذه الخاصیة باسم الوسم ونضع التأثیر بین القوسین .
مثال/
p:first-letter { color:red;
 font-size:10pt: }
الفصل السادس ( الوسوم الزائفة ) ( 39 (
first-line 
من خلال ھذه الخاصیة ( الوسم الزائف ) نستطیع التحكم وتطبیق تأثیر معین على أول سطر
من الفقرة ( النص ) , حیث یجب أن نسبق ھذه الخاصیة باسم الوسم ونضع التأثیر بین القوسین
مثال/
p:first-line { color:green;
 font-size:20px: }
before 
من خلال ھذه الخاصیة ( الوسم الزائف ) یمكننا إدراج محتوى قبل العنصر , حیث یجب أن
نسبق ھذه الخاصیة باسم الوسم ونضع التأثیر بین القوسین .
مثال/ لإضافة صورة قبل كل فقرة
 p:before { content:url('image.gif'); }
 ویمكن أن نضع قبلھا اسم class أو idالوسم بدلا ً من اسم الوسم , مثال /
 .tt:before { content:url('image.gif'); }

after 
من خلال ھذه الخاصیة ( الوسم الزائف ) یمكننا إدراج محتوى بعد العنصر , حیث یجب أن
نسبق ھذه الخاصیة باسم الوسم ونضع التأثیر بین القوسین .
مثال/ إضافة علامة تعجب بعد كل فقرة
 p:after { content:" !"; }
 ویمكن أن نضع قبلھا اسم class أو idالوسم بدلا ً من اسم الوسم , مثال /
 .tt:after { content:" !"; }



الفصل السادس ( الوسوم الزائفة ) ( 40 (
@media 
من خلال ھذه الخاصیة ( الوسم الزائف ) یمكن تخصیص شكل ومظھر الصفحة بناءً على ما
یقوم بعرضھا من شاشة حاسوب او آلة طابعة او غیرھا .
مثال/
<html>
<head><style type="text/css" >
@media screen {
p { text-align:justfy;
direction:rtl; }
body { background-color:green; }
}
@media print {
p { text-align:justfy; } }
</style></head><body>
<p> My Text </p>
</body>
 </html>
یمكن ان نضع بعد media @احد القیم التالیة :-
القیمة الشرح
all جمیع اجھزة العرض
aural للاجھزة الناطقة
braille الاجھزة المعتمدة على اللمس
embossed طابعات الاجھزة المعتمدة على اللمس
handheld للاجھزة الكفیة
print كل الطابعات
projection لاجھزة الإسقاط ( الراشق مثلا ً )
screen لشاشات الحاسوب
ttv لكل الاجھزة التي تستخدم شاشات ذات عرض محرف ثابت ( كالمبرقة
الكاتبة )
tv لكل الاجھزة الشبیھھ بالتلفاز




الفصل السادس ( الوسوم الزائفة ) ( 41 (

@media screen and( ) 
من خلال ھذه الخاصیة یمكننا التحكم بالموقع بحسب حجم الشاشة المفتوحة حیث سنضع بداخل
ھذین القوسین أكبر أو أصغر مقدار لحجم الشاشة قبل تنفیذ ھذه الخاصیة مثلا ً :-
( 400px:width-max ( او ( 400px:width-min ( وبعدھا نضع قوسین معقوفین ونكتب
بداخلھم الخواص وما سیجري علیھا من تغیرات في حال تغیر حجم الشاشة إلى أصغر او أكبر
من ھذا المقدار بحسب القیمة المعطاة .
مثال/
p { font-size:40pt; }
@media screen and ( max-width:300px ) {
 p { font-size:10pt;
 color:red; } }
 یمكن أن نكتب ھذه الخاصیة بكل ما تحتویھ من خصائص وتغییرات داخلھا في صفحة
CSS جدیدة ( ثانیة ) مع ملاحظة عدم كتابة اسم ھذه الخاصیة في البدایة بل نكتب
الخصائص التي في داخلھا مباشرتا ً ( كأي صفحة CSS عادیة ) لأننا سنكتب اسم ھذه
الخاصیة عند استدعائھا من داخل صفحة html , وسوف نستدعیھا في صفحة html
من خلال وسم خاص یكتب داخل الوسم <head <وھذا الوسم ھو

 <link rel="stylesheet" type="text/css" media="screen and ( max-width:300px )"
</ "css.اسم الصفحة"=href
 ھذه القیم تتغیر بحسب القیمة التي
 نرغب في إعطائھا للخاصیة

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


الفصل السادس ( الوسوم الزائفة ) ( 42 (

 إذا أردنا أن یطبق التأثیر فقط إذا كانت الشاشة تحمل ھذه الدقة ولیس تصغیر او تكبیر
الشاشة , مثلا نعطي دقة قلیلة بحیث لا یمكن أن یحمل ھذه الدقة جھاز حاسوب بل تتوفر
فقط على الھاتف الجوال في ھذه الحالة یجب أن نضیف ( device ( إلى الخاصیة لتكون
بھذا الشكل :-
مثال/ یطبق التأثیر فقط على الجوال
 @media screen and ( max-device-width:400px ) { ……… }
وكذلك إذا وضعناھا في ملف CSS مستقل واستدعیناھا من داخل ملف html سنضیف )
( device إلى وسم الاستدعاء .
مثال/
 <link rel="stylesheet" type="text/css" href="الملف اسم.css"
 media="screen and (max-device-width:400px)" />

@font-face 
ھذه الخاصیة جدیدة في CSS3 , من خلال ھذه الخاصیة ( الوسم الزائف ) یمكننا إضافة خطوط
جدیدة حتى وإن لم تكن موجودة في متصفح زائر الموقع حیث في السابق كان یجب الالتزام
بالخطوط الشائعة لكن ھذه الخاصیة حلت المشكلة حیث یتم وضع ملف الخط ضمن ملفات
الموقع ویتم إسناد مساره إلى الخاصیة src لقاعدة face-font @وتستخدم كما یلي :-
أولا ً :- یتم تعریف اسم عائلة جدیدة باستخدام القاعدة face-font . @
ثانیا ً :-یسند اسم العائلة الذي انشأ سابقا ً إلى الخاصیة family-font بشكل تقلیدي .
ملاحظة/ المستعرض Explorer یدعم الخطوط ذات النوع eot .فقط بینما تدعم باقي
المستعرضات النوعین ttf .و otf .




الفصل السادس ( الوسوم الزائفة ) ( 43 (

مثال/
یمكن أن نضع أي اسم <"css/text="type style<
@font-face { font-family:myfont;
src:url("name.ttf") , url("name.eot") format("opentype"); /* IE */
نفس الاسم السابق {
div { font-family:myfont; }
 </style>

ملاحظة/ یمكن تغییر صیغ الخط ( نوع الخط ) من خلال الذھاب إلى الموقع التالي :-
com.freefontconverter.www الذي یتیح لنا إمكانیة التحویل بین صیغ الخطوط المختلفة


@keyframes 
ھذه الخاصیة جدیدة في CSS3 ویجب أن نكتب البادئات الخاصة بكل متصفح لكي تعرض في
المتصفحات المختلفة , وھذه الخاصیة ( الوسم الزائف ) مسئول بالتعاون مع الخاصیة
( animation ( لإنشاء حركات , ویتم إنشاء الحركة بخطوتین :-
1 -یتم تعریف اسم خاص للحركة في القاعدة keyframes @وتحدید ماھیتھا عبر تحدید
الوضع الابتدائي from والوضع النھائي to وعند تطبیق الحركة یتم الانتقال من
الوضع الابتدائي إلى الوضع النھائي للعنصر خلال فترة زمنیة مما یجعلنا نشعر
بالحركة.
2 -یتم إسناد الحركة وزمن تنفیذھا إلى الخاصیة animation الخاصة بالعنصر .




الفصل السادس ( الوسوم الزائفة ) ( 44 (
مثال/
<html> <head>
<style type="text/css" >
div { width:100px;
 height:100px;
 background:red;
 -webkit-animation:myAnimation 5s; }
@-webkit-keyframes myAnimation {
 frome { background:red; }
 to { background:yello; }
</style> </head> <body>
<div> </div>
 </body> </html>
حیث إن s تشیر إلى الثانیة second
 یمكن تخصیص شكل العنصر في كل لحظة من لحظات الحركة عبر إنشاء قاعدة CSS
خاصة بھذه اللحظة ضمن قاعدة keyframes. @
مثال/
@-webkit-keyframes myAnimation {
 0% { background:red; }
 15% { background:green; width:150px; color:white; }
 50% { height:350px; }
 100% { background:yello; } }
حیث إن ( %0 ( تعني لحظة بدایة الحركة و ( %100 ( تعني لحظة نھایة الحركة والقیم
الأخرى تعبر عن فترات أثناء حدوث الحركة .
 تحدث ھذه التغیرات أثناء الحركة ویعود العنصر إلى شكلھ الطبیعي عند انتھاء الحركة .

ملاحظات عامة ( 45 (

( ملاحظات عامة )

أولاً :- في بعض الخصائص الجدیدة في CSS3 یجب أن نستخدم البادئة الخاصة بكل متصفح
لكي یتم عرض ھذه الخاصیة بشكل صحیح في المتصفحات المختلفة ولكي تظھر الخاصیة في
كل المتصفحات یجب أن نكتبھا عدة مرات مع تغییر بادئة المتصفح , ویجب أن نكتبھا مرة
بدون أي بادئة لتعرض في بعض المتصفحات الأخرى , المتصفح فایرفوكس یستخدم البادئة
( -moz ( -والمتصفح أوبرا یستخدم البادئة ( -o ( -والمتصفح جوجل كروم وسفاري یستخدمان
البادئة ( -webkit ( -والمتصفح اكسبلورر یستخدم البادئة ( -ms . ( -

ثانیاً :- یتم كتابة التعلیق في CSS بواسطة النجمة والشطرة المائلة .
مثال/
/* التعلیق */


ثالثاً :- یمكن أن نستخدم في CSS مجموعة من وحدات القیاس وھي موضحة في الجدول
بالأسفل :-
الوحدة الشرح
px بیكسل
% بالنسبة المئویة
( 16 px ) یساوي ) 1 em ) كل em
in إنش
cm سنتي متر
mm ملي متر
pt نقطة ( النقطة = 72/1إنش )
pc بیكا ( البیكا = 12 نقطة = 6/1 إنش )

ملاحظات عامة ( 46 (

رابعاً :- id و class
إذا أردنا أن نصمم تأثیر خاص في CSS ونضیف ھذا التأثیر على بعض الوسوم فیجب أن
نعطي ھذا الوسم الذي نرید تطبیق التأثیر علیھ اسم معین في صفحة html باستخدام ( id ( او
( class ( ومن ثم نستدعیھ في صفحة CSS بذكر اسمھ لكن نسبق اسمھ بنقطة ( . ) إذا كنا
نستخدم ( class ( او نسبقھ بعلامة شباك ( # ) إذا كنا نستخدم ( id . (
مثال/
<html> <head>
<style type="text/css" >
.myclass { color:red; }
#myid { color:yello; }
</style> </head> <body >
<p id="myid"> the text </p>
<p class="myclass"> the text </p>
</body> </html>
 الفرق بین ( id ( و ( class ( ھو أننا إذا استخدمنا طریقة ( id )) ( أي وضعنا ( # ) في
صفحة CSS وأعطیناه اسم معین واستدعیناه باستخدام ( id ( بذكر اسمھ )) في ھذه
الطریقة لا یمكن أن نذكر ھذا الاسم باستخدام ( id ( في وسم آخر لتطبیق نفس الخواص
علیھ , أما في طریقة ( class )) ( أي وضعنا ( . ) في صفحة CSS وأعطیناه اسم معین
واستدعیناه باستخدام ( class ( بذكر اسمھ )) في ھذه الطریقة نستطیع أن نذكر ھذا
الاسم باستخدام ( class ( في وسم آخر لتطبیق نفس التأثیرات ( الخواص ) علیھ .






ملاحظات عامة ( 46 (

خامساً :- التداخل
إذا أردنا تطبیق تنسیق معین على عدة أوسمة یمكننا أن نذكر أسماء ھذه الأوسمة قبل التنسیق
ونفصل بینھا بفارزة وبعدھا فاصلة واحدة ثم اسم الوسم التالي وھكذا , وھذا الكلام ینطبق حتى
على أسماء ( class ( و ( id . (

مثال/
h1, p, .MyClass { color:#333; }
 إذا كتبنا وسمین وفصلنا بینھم بفاصلة فقط فھذا التأثیر یطبق إذا كان الوسم الثاني بداخل
الوسم الأول وسیطبق التأثیر على الوسم الثاني فقط .
مثال/
 ul ul { color:red; }
ولیس بالضرورة أن یكون الوسمین من نفس النوع , یمكن أن یكونا مختلفین .
 إذا طبقنا تأثیر معین على الوسم <div <فأن ھذا التأثیر سیشمل كل الوسوم الأخرى
الموجودة داخلھ وإذا أردنا تطبیق التأثیر على وسم معین في داخل <div <یمكن ذكر
الوسم div ثم نذكر اسم الوسم .
مثال/
div p {color:white; }
وإذا كنا نستخدم طریقة class او id لتطبیق التأثیر فأننا سوف نذكر الاسم ثم فاصلة ثم اسم
الوسم الذي نرید تطبیق التأثیر علیھ .
مثال/
.My-class p {color:red; }





ملاحظات عامة ( 47 (

سادساً :- ملاحظات حول القوائم
1 .إذا كانت لدینا قائمة ( <ul ( <مكونھ من عدة نقاط ( <li ( <وأردنا أن نعطي لكل ھذه
النقط في القائمة عرض أو ارتفاع معین ( نجعل كل نقطة في إطار ونحدد عرضھا أو
ارتفاعھا كلھا لتكون بشكل متساوي ) فیجب أن نضیف الخاصیة ( display ( حاملة
القیمة ( block ( وذلك لكي یتم اعتبار كل نقطة من ھذه النقاط ھي كتلة لوحدھا وفي
ھذه الحالة سیعطي كل النقاط عرض واحد او ارتفاع واحد , ( نستخدم ھذا الكلام إذا كنا
نرید أن نكون قائمة ھي عبارة عن أزرار للانتقال عبر صفحات الموقع من خلال وسم
القائمة حیث سنجعل كل نقطة من نقاط القائمة ھي عبارة عن وصلة تشعبیة ( رابط )
ونحیطھا بإطار لتكون مثل الزر )
مثال/
ul li a { display:block;
 width:100px;
 background-color:red; }

2 .إذا كانت لدینا قائمة وأردنا أن نعرض النقاط الموجودة فیھا بشكل أفقي ( الواحدة بجانب
الأخرى ) ولیس بشكل عمودي فیجب أن نضیف الخاصیة ( float ( في وسم تعداد
النقاط <li <ونسند لھا القیمة ( left ( إذا كان اتجاه القائمة من الیسار إلى الیمین, ونسند
لھا القیمة ( right ( إذا كان اتجاه القائمة من الیمین إلى الیسار , مع ملاحظة أنھ من
الضروري أن نكون وسم <div <داخل وسم ال <div <الرئیسي ( الوسم الذي یحتوي
كامل القائمة ) ومن ثم نعطیھ الخاصیة ;both:clear وذلك لكي نمنع التعویم من
التأثیر على باقي الوسوم .
أو یمكننا أن نجعل ترتیب النقاط في القائمة بشكل أفقي بطریقة أخرى وذلك بإضافة الخاصیة
( direction ( ونسند لھا القیمة ( inline-block , ( لكن یفضل استخدام الطریقة الأولى .

3 .لإنشاء قائمة منبثقة عند الوقوف على زر في القائمة الرئیسیة , أولا ً ننشأ أزرار القائمة
الرئیسیة من خلال وسم القائمة والنقاط تكون عبارة عن روابط تشعبیة والقائمة المنبثقة
تكون عبارة عن قائمة أخرى ننشئھا داخل النقطة التي نرید أن تظھر القائمة الفرعیة
عند الوقوف على ھذه النقطة من القائمة الرئیسیة حیث إننا سنخفي القائمة الفرعیة من 
ملاحظات عامة ( 49 (
خلال الخاصیة ( display ( حاملة القیمة ( none , ( ثم بعد ذلك نستخدم الخاصیة display(
( حاملة القیمة ( block ( لإظھارھا وذلك داخل الوسم الزائف ( hover:li (لكي تظھر عند
وقوف مؤشر الفأرة علیھا .
 #li_menu:hover #ul2 { display:block; }
حیث أن ( menu_li ( #ھو اسم الوسم <li <الموجود في القائمة الرئیسیة الذي یحمل القائمة
الثانیة ( المنبثقة ) المسماة ( ul2 , ( #حیث أن معنى الكود السابق ھو عند وقوف مؤشر الفأرة
على النقطة المسماة ( menu_li ( #أجري التأثیر على القائمة المسماة ( ul2 . (#


ملاحظة/ لكي نتمكن من التحكم بعرض وارتفاع القائمة الثانیة ( المنبثقة ) یجب أن نضیف
الخاصیة ( :position ( تحمل القیمة ( ;absolute ( وبدون أي قیم أخرى إلى وسم القائمة
الثانیة ( المنبثقة ) <ul <في صفحة CSS
ul { position:absolute; }


سابعاً :- الوسم الزائف ( * )
للتحكم بالصفحة ككل نستخدم الخاصیة ( * ) وھي علامة النجمة حیث من خلال ھذه الخاصیة
( الوسم الزائف ) یمكننا التحكم بكامل الصفحة , مثلا لو أردنا أن نتخلص من الحاشیة العلویة
التي تظھر بین أعلى الصفحة وأول عنصر موجود في الأعلى سنضیف لھا الخاصیة
( :margin (ونسند لھا القیمة ( 0 , ( كما في ھذا المثال/
* { margin:0; }