Css Explation

‫مٕ خ ‪ CSS‬؟‬ ‫ِب ٘‬
‫س ن‪Cascading Style Sheets. ٙ‬‬ ‫‪ ْٙ CSS‬ا خ‬
‫ٕ ‪ ،‬ا نٕاٌ‪ ،‬انٓ ي ‪،‬‬ ‫ٔ ‪ٛ‬مت‪ ٙٓ ، HTML‬حٓخى ن‬ ‫‪ٛ‬ى ح ذد‬ ‫‪ ْٙCSS‬ن ت ح‬

‫ٕسة ه ‪ٛ‬ت ان ٕ ‪ٛ ٛ ٔ ،‬ت حٕص‪ ٚ‬ان غ ث ٔأ ‪ ٛ‬ء أ شٖ ‪ٛ‬شة‪،‬‬ ‫ٔانؼشض ٔا سح ع‪،‬‬
‫ِب اٌ شق ث ٓ ‪HTMLٚ CSS‬؟‬

‫‪ٛ‬ى نٓزِ‬ ‫تح‬ ‫ْ‪ ٛ‬ه‪ٛ‬ت َٔ و يُ م‪ ٙ‬نه خٕ‪ ٚ‬ث‪ ،‬أي ‪ ٙٓ CSS‬حغخ ذو‬ ‫حغخ ذو نٕ‬
‫ان خٕ‪ ٚ‬ث‪.‬‬
‫انمشاءة ٔ خ ٓى ي شأحّ ش‪.ً ٚ‬‬ ‫غًُ‪ ،‬ذ ‪ ٚ‬ذٔ ْزا يش ً ن ٍ أ‬
‫َ‬ ‫ت انٕ‪ٚ‬ب‪ ٙ ،‬رن انٕ‬ ‫ا ّ ح‪ٛ‬ى ‪ٛ‬شَشص ن‪ٙ‬‬ ‫‪ ٙ‬انمش‪ٚ‬ب ا خشع س‬ ‫‪ ٙ‬ان‬
‫ٌ‬ ‫ت يؼُٗ نهُ‬ ‫‪ ،‬ان حب ‪ ُّ ٚ‬أٌ ‪ٚ‬مٕو‬ ‫ت ْ‪ ٛ‬ه‪ٛ‬ت نهُ‬ ‫‪HTML‬حغخ ذو م‬
‫>‪<p>.ٔ<h1‬‬ ‫‪ٚ‬مٕل ي ً "ْزا ػُٕاٌ" أٔ "ْزِ مشة" ٔ‪ٚ‬غخ ذو ٔ ٕو ‪ HTML‬ي‬
‫‪ٛ‬ى نهٕ ك‪،‬‬ ‫تح‬ ‫ػٍ شق‬ ‫ٌٕ ‪ ٙ‬ان‬ ‫ت انٕ‪ٚ‬ب ذأ ان‬ ‫ي اصد‪ ٚ‬د ٓشة‬
‫خشاع ٔ ٕو‬ ‫‪-‬‬ ‫ث ‪َٛ -‬خ غ‪ٛ‬ب ٔي ‪ ٚ‬شٔ ٕ‬ ‫حٓى و ي شي ٕا ان خ‬ ‫ٔنخه ‪ٛ‬ت س‬
‫ه‪ٛ‬ت َّ ‪ٓٚ‬خى ن‬ ‫ػٍ ٔ ٕو ‪ HTML‬ا‬ ‫>‪<font‬انز٘ ‪ ٚ‬خه‬ ‫‪ HTML‬ذ‪ٚ‬ذة ي‬
‫نٓ‪ ٛ‬ه‪ٛ‬ت‪.‬‬
‫ئ‪ ٛ ،‬ا خ ذاو ْزا انٕ ى‬ ‫>‪<table‬‬ ‫أدٖ رن إنٗ أٌ حغخ ذو ٔ ٕو ْ‪ ٛ‬ه‪ٛ‬ت ي‬
‫‪ٔ ،‬ان ‪ٛ‬ش يٍ انٕ ٕو انخ‪ ٙ‬ا خشػ ي‬ ‫ت يؼُٗ نهُ‬ ‫ت ذ ً يٍ إ‬ ‫‪ٛ‬ى ان‬ ‫نخ ذ‪ٚ‬ذ ح‬
‫هت " خ خ ج إنٗ ان خ‬ ‫ٔا ذ‪ ،‬أ‬ ‫يخ‬ ‫م يذػٕيت يٍ‬ ‫>‪َ <blink‬‬
‫ت‪.‬‬ ‫ت" ي نٕ ت ‪ ٙ‬يٕا ان‬ ‫ان َ‪ ٙ‬نشؤ‪ٚ‬ت ْزِ ان‬
‫ي‪ٛ‬ى‬ ‫‪ ٍٛ‬ش ً ؼ نت ٔػ ه‪ٛ‬ت َ ء انخ‬ ‫هت َٓ حٕ ش نه‬ ‫ا خ شث ‪ CSS‬نؼ ج ْزِ ان‬
‫‪ٍٛ‬‬ ‫ث ‪ َ ٙ‬ظ انٕ ‪ٔ ،‬ان‬ ‫‪ ٛ‬ان خ‬ ‫ي‪ٛ‬ى خ ٌٕ يذػٕيت يٍ‬ ‫ْٔزِ انخ‬
‫‪ٛ‬ش‪.‬‬ ‫ت ٔي خٕ‪ ٚ‬حٓ ‪ ٚ‬غ ػ ه‪ٛ‬ت إداسة ان ٕ‬ ‫ان‬
‫ز ٔ ‪ CSS‬؟‬ ‫و‬
‫‪١‬خ ٘‪:ٟ‬‬ ‫ّ‪ ُ١‬اٌّ‪ٛ‬ال ‪ٛ ٚ ،‬ا ٘ ا‬ ‫ٌُ‬ ‫زج ‪ ٛ CSS‬ح ‪ٟ‬‬
‫‪.‬‬ ‫‪ٚ‬ا‬ ‫ي ٍِ‬ ‫اٌزؾىُ ث ٌز ّ‪ِٓ ُ١‬‬ ‫‪‬‬
‫‪ ١‬اٌز ّ‪. ُ١‬‬ ‫ئِى ٔ‪١‬خ أوج ‪ٚ‬أ ق ٌٍزؾىُ ثز‬ ‫‪‬‬
‫د ‪ٚ‬اٌ ث د‬ ‫ع اٌّ‪ٛ‬ل ِض اٌ‬ ‫‪ٚ‬‬ ‫خ ٌّ زٍ‬ ‫ِ‪ُ١‬‬ ‫ئٔ ء‬ ‫‪‬‬
‫إٌم ٌخ ‪ ..‬ئٌ‬ ‫‪ٚ‬اٌ‪ٛٙ‬ا‬

‫ٌ‪١‬ت اٌّزم ِخ ‪ ٟ‬اٌزؾىُ ث ٌز ّ‪. ُ١‬‬ ‫اٌ ‪ ِٓ ٠‬اٌزمٕ‪ ١‬د ‪ٚ‬ا‬ ‫‪‬‬
‫ؼّ مٕ خ‪ CSS‬؟‬ ‫سط ‪ :2‬و‬

‫‪ ٛ‬ث ‪ٔ CSS‬ي ْ‪ٙ‬‬ ‫‪ٛ‬ى ا ٔل‪ ،‬خخؼهى أ‬ ‫انخ‬ ‫حمٕو َ ء يه‬ ‫‪ْ ٙ‬زا انذسط خخؼهى ‪ٛ‬‬
‫انٕ ٕو ان صيت نخغخ ذو ‪ٛ ٔ ٙ CSS‬مت‪HTML.‬‬
‫‪HTML‬‬ ‫‪ CSS‬ح ّ حه ان غخ ذيت ‪ ، HTML ٙ‬نزن إرا حؼه‬ ‫ان ‪ٛ‬ش يٍ‬
‫‪ ٙ‬ان نب خخ ٍ يٍ حؼهى ‪ CSS‬غٕٓنت‪ ،‬نُهم‪ َ ٙ‬شة‬ ‫ي‪ٛ‬ى َ‬ ‫َ ء انخ‬ ‫ٔا خ ذايخٓ‬
‫‪.ٙ‬‬ ‫ػهٗ ْزا ان ل ا‬
‫ب خ ٌىزبثخ‪CSS‬‬ ‫اٌم‪ٛ‬اػ ا‬
‫ت‪:‬‬ ‫ش ن‪ ٌٕ ٛ‬ه ‪ٛ‬ت نه‬ ‫نُم أَُ َش‪ٚ‬ذ انهٌٕ ا‬

‫ٓزِ ان ش‪ٚ‬مت‪:‬‬ ‫رن‬ ‫خ ذاو ‪ ُُ ٚHTML‬أٌ َُ‬
‫>"‪<body bgcolor="#FF0000‬‬
‫ي ‪ ٍ ٚCSS‬ح م‪ٛ‬ك َ ظ انُخ‪ ٛ‬ت خ ت ْزِ ا ٔايش‪:‬‬
‫};‪body {background-color: #FF0000‬‬
‫ٍ‪ٛ‬ة‬ ‫ٖ ‪ ٛ٠‬ؼ ٌه ا‬ ‫‪ ،‬أ‪ٚ‬اِ ‪ CSS‬ز ثٗ وض‪ ١‬اً ِ ‪ٚ ، HTML‬اٌّض ي أ‬ ‫وّ‬

‫‪ٌ ٟ‬ىز ثخ‪CSS:‬‬ ‫ا‬
‫ٕز ٍّٗ ا‪.ْ٢‬‬ ‫أ‪ٚ‬اِ ‪ CSS‬؟ ٘ ا ٘‪ِ ٛ‬‬ ‫ٌىٓ أ‪ٔ ٓ٠‬‬
HTML‫خ‬ CSS ‫ؼ‬
‫ ؿ ق ٌىز ثخ اٌــ‬3 ( HTML‫ؾخ‬ ٟ CSS ١ ‫ ٌز‬ِٙ ‫ز‬ ْ‫ّىٓ أ‬٠ ‫س ؿ ق‬ ‫ٕ٘ ن‬

،‫مخ اٌض ٌضخ‬٠ ٌ‫ ز َ ا‬ٚ ‫ٔؾٓ ٕٔ ؼ ث ْ و‬ٚ ،ٖ ٔ ‫ خ أ‬ٚ ِ‫ق‬ ٌ‫ ) ٘ ٖ ا‬STYLE
) ِٕ ٍِ ٟ CSS ْ‫ (أ‬. ِٕ ٍِ ٟ CSS ْ‫ أ‬ٟ٘ٚ
style‫خ‬١ َ‫ ث ز ا‬HTML َٛ ٚ ّٓ :1 ‫مخ‬٠ ٌ‫ا‬
ٍٝ ً ‫ِض‬ ٌٕ ،style ‫خ‬١ َ‫ ث ز ا‬ٟ٘ HTML ٟ CSS ١ ‫ق ٌز‬ ٌ‫ ا‬ٜ ‫ئ‬

‫ك ٘ ا‬١‫ج‬ ٓ‫ّى‬٠ ،‫ؾخ‬ ٌٍ ‫خ‬١ ٍ‫ّ و‬ ‫ْ ا‬ٌٍٛ‫ٗ ا ز اَ ا‬١ ٔ ‫ أ‬ٞ ٌ‫ٖ ا‬ ‫اٌّض ي أ‬ ‫أ‬
‫ ا اٌ ى‬ٙ‫ا ِ ث‬
<html>
<head>
<title>Example<title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
styleُ ٚ َ‫ ث ز ا‬HTML ٍِ ‫ّذ‬ :2 ‫مخ‬٠ ٌ‫ا‬
:‫مخ‬٠ ٌ‫ك ٘ ٖ ا‬١‫ج‬ ‫خ‬١ ١‫٘ ا ِض ي ٌى‬ٚ ،<style> ُ ٚ َ ‫ز‬ ٙٔ ‫مخ ِ زٍ خ ث‬٠ ‫٘ ٖ ؿ‬
<html>
<head>
<title>Example<title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
‫‪ٟ‬‬ ‫‪٠‬مخ ‪ٍِ :3‬‬ ‫اٌ‬
‫‪٠ ٟ‬ؾ‪ ٞٛ‬أ‪ٚ‬اِ ‪، CSS‬‬ ‫اث ٌٍّ‬ ‫‪ ٟ٘ٚ ،‬أْ م‪ َٛ‬ث‪ٛ‬‬ ‫‪٠‬مخ ا‬ ‫٘ ٖ ٘‪ ٟ‬اٌ‬
‫‪٠‬مخ ٌغّ‪ ١‬ا ِضٍخ‪.‬‬ ‫ٕم‪ َٛ‬ث ز اَ ٘ ٖ اٌ‬ ‫ي ٘ ا اٌ‬
‫‪ّ٠ ٜ‬ىٕه‬ ‫مخ ‪ِٚ ،.css‬ض اٌٍّ د ا‬ ‫ٔ ‪ ٠ ٟ‬ز َ اٌ‬ ‫‪ ٛ٘ ٟ‬ثج ؿخ ٍِ‬ ‫اٌ‬ ‫اٌٍّ‬
‫اٌ ٍت‪.‬‬ ‫ٗ ‪ِٛ ٚ ِ ٟ‬ل ه أ‪ ٍٝ ٚ‬اٌم‬ ‫أْ‬
‫اٌز ّ‪٠ ٌ ُ١‬ه ا ّٗ ‪ِ ٟ ٛ ِٛ ٛ٘ٚstyle.css‬غٍ ا ّٗ ‪ٖ ٘ ،style‬‬ ‫ِض ً‪ٌٕ ،‬م أْ ٍِ‬

‫ي ٘ ا اٌ ُ‬ ‫اٌؾ ٌخ ‪ّ٠‬ىٓ ‪١ ٛ‬ؾ‪ ٙ‬أوض ِٓ‬
‫اٌز ّ‪ِ ، (style.css)ُ١‬ض ٘ ا اٌ اث‬ ‫‪ٍِٚ HTML‬‬ ‫اٌّ‪ ٛ٘ ٕ٘ ُٙ‬ئٔ ء اث ث‪ٍِ ٓ١‬‬
‫‪HTML: ٟ‬‬ ‫‪ٚ‬ا‬ ‫ي‬ ‫‪ّ٠‬ىٓ ئٔ ءٖ ِٓ‬
‫>‪<link rel="stylesheet" type="text/css" href="style/style.css" /‬‬
‫ا ى يه انــ ‪ css‬انزٖ حى‬

‫نٕ ُ َ ء يه‬ ‫اَ ت‬
‫ى ‪ٕ as.css‬ف ‪ٚ‬خى خ خت‬
‫‪ٟ‬‬ ‫‪١‬خ ‪ ٘ href.‬ا ا ِ ‪٠‬غت أْ ‪ٛ٠‬‬ ‫ٔ ٖ ث ز اَ‬ ‫اٌٍّ‬ ‫أْ ِ‬ ‫و‪١‬‬

‫ؾخ‪ ،‬أ‪ ٞ‬ث‪</head> ٚ<head> ّٟ ٚ ٓ١‬وّ ‪ ٟ‬اٌّض ي ا‪:ٟ ٢‬‬ ‫اٌ‬ ‫ل ُ أ‬
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
‫َ ث ع‬ٛ‫م‬٠ ِ ٕ CSS ٍِ ِٓ ُ١ّ ‫ٗ ا ز اَ اٌز‬١ٍ ْ ‫ؼ ث‬ ‫ ج اٌّز‬٠ ‫٘ ا اٌ اث‬
، ‫ا‬ٚ ُ١ّ ٍّ‫ ث‬HTML ‫ ِٓ ٍِ د‬٠ ٌ‫ث ا‬ ١ ‫ز‬ ‫ ٕ٘ أٔه‬١ّ‫ اٌغ‬. HTML ٍِ
HTML. ‫ ِٓ ٍِ د‬٠ ٌ‫ُ ا‬١ّ ‫ ز َ ٌٍزؾىُ ثز‬٠ ْ‫أ‬ ‫ا‬ٚ ُ١ّ ٌٍّ ٓ‫ّى‬٠ ‫ آ‬ٕٝ ّ‫ث‬
‫ٍت‬ ‫ت‬ ٍ
‫خ‬١ ٍ ٌْٛ ١ ْ‫ ئرا أ د ِض ً أ‬، ٙ‫اٌغ‬ٚ ‫لذ‬ٌٛ‫ ِٓ ا‬١‫ه اٌىض‬١ٍ ٛ ْ‫ أ‬ٕٙ‫ّى‬٠ ‫٘ ٖ اٌ ى ح‬
٠ ٌٝ‫ؾز ط ئ‬ ‫لذ‬ٌٛ‫ه ا‬١ٍ ٛ٠ ْ‫ّىٕٗ أ‬٠ ُ١ّ ‫ ؾخ ٍّ اٌز‬100 ٞٛ‫ؾ‬٠ ‫ل‬ِٛ
ٟ ‫ا‬ٚ ١١ ‫ ثز‬ٟٔ‫ا‬ٛ ‫ي‬ ٠ ِ ١١ ٓ‫ّى‬٠ CSS َ‫ ث ز ا‬،‫ ٍِ ثٕ ه‬100
.ُ١ّ ‫ٍِ اٌز‬
.ْ٢‫ ا‬ٝ‫ٍّٕ ٖ ز‬ ِ ٍٝ ‫ٌٕز ة‬
‫ة ثٕ ه‬
ّ٘ ‫ أ‬،ٓ١ ٍِ ‫لُ ث ٔ ء‬ٚ ،ٟ ٔ ‫ ِؾ‬ٞ‫ أ‬ٚ‫( أ‬Notepad) ‫ ث ٔ ِظ اٌّ ى ح‬١ ‫لُ ثز‬
:‫ د‬٠ٛ‫ّ ٘ ٖ اٌّؾز‬ٙ١ ٚ CSS ٢‫ا‬ٚHTML
default.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
style.css
body {
background-color: #FF0000;
}
‫ؾخ‬١‫مخ اٌ ؾ‬ ٌ‫ٓ ث ز اَ ا‬١ ٌٍّ‫ا‬ ‫ و أْ ؾ‬، ٍ‫اٌّغ‬ ٔ ٟ ٓ١ ٌٍّ‫ا‬ ٛ‫ْ لُ ث‬٢‫ا‬

. ٍِ ‫ٌى‬
ّ ‫ْ ا‬ٌٍٛ‫ ا‬ٞٛ‫ ؾ‬ٟ٘ٚ ‫ؾخ‬ ٌ‫ ا‬ٌٝ‫أ ئ‬ٚ ‫ ِز ؾه‬ٟ default.htm ٍِ ‫لُ ث زؼ‬
!‫ي‬ٚ ‫ُ ا‬١ّ ‫ٕ ! ٌم لّذ ث ٔ ء ٍِ اٌز‬١ٔ ٙ ،‫خ‬١ ٍ ‫و‬
‫اٌ ٍ بد‬ٚ ْ‫ا‬ٌٛ ‫ ا‬:3 ‫اٌ سط‬
‫ ً ثز ٍُ ؿ ق ِزم ِخ‬٠‫َ أ‬ٛ‫ ٕم‬،‫ل ه‬ٌّٛ ‫ د‬١ ٍ ٌ‫ا‬ٚ ْ‫ا‬ٌٛ ‫ ا‬١ ‫خ‬١ ١‫ٕز ٍُ و‬ ٌ‫ ٘ ا ا‬ٟ
CSS:ٟ ٌ‫ ٔ ػ ٘ ٖ ا‬،‫خ‬١ ٍ ٌ‫ ح ا‬ٛ ‫ل‬ِٛ ٠ ‫ٌزؾ‬
color 
background-color 
background-image 
background-repeat 
background-attachment 
background-position 
background 
'color'‫خ‬١ :‫ْ اٌّم ِخ‬ٌٛ

HTML. ٕ ٌْٛ color ‫خ‬١
ٓ٠ٚ ٕ ٌ‫ و ا‬،ٓ‫او‬ ّ ‫ْ أ‬ٍٛ‫ٔخ ث‬ٍِٛ ‫ؾخ‬ ٌ‫ ا‬ٟ ٓ٠ٚ ٕ ٌ‫ْ و ا‬ٛ‫ أْ ى‬٠ ‫ أٔه‬ٛ ً ‫ّض‬
ٌٍْٛ‫ ا‬ٌٝ‫<ئ‬h1> ‫ و‬٠ٛ‫خ ؾ‬١ ١‫ؼ و‬١ ٛ‫َ ثز‬ٛ‫م‬١ ٖ ٔ ‫ اٌّض ي أ‬،<h1> ُ ٚ َ‫ِ د ث ز ا‬
) css ‫اٌــ‬ ٍِ ٝ ٌٝ ‫ اٌز‬ٛ‫ىزت اٌى‬٠ ( : ّ ‫ا‬
style.css
h1 {
color: #00ff00;
}
default.htm
<html>
<head>
</head>
<body>
</body>
‫اٌــ ‪ HTML‬وّ ‪: ٍٝ٠‬‬ ‫‪ٍِ ٝ ٌٕ ٙ ٠ٚ‬‬
‫وّ ‪: ٍٝ٠‬‬ ‫‪ ٝ ٌٕ ٙ ٠ٚ‬اٌّ ز ع وّ ‪ٍٝ٠‬‬

،ٖ ‫ اٌّض ي أ‬ٟ ّ‫ و‬ٞ ‫ل َ اٌ ذ‬ ‫ّىٓ أْ ؾ ث ز اَ ٔ َ ا‬٠ ْ‫ا‬ٌٛ ‫ ا‬: ‫ خ‬ٛ ٍِ
Green ٚ Red ٟٕ ٟ‫اٌز‬ٚ RGB ‫ّخ‬١‫ي ل‬ ِٓ ٚ‫ أ‬، "red"ٌٍْٛ‫ز ا ُ ا‬ ْ ‫ ث‬ٚ‫أ‬
: (rgb(255,0,0)).‫ ِض ي‬،Blueٚ
'background-color'‫خ‬ ‫ب‬
. ٕ ٞ‫خ أ‬١ ٍ ٌْٛ ‫ ؾ‬background-color ‫خ‬١
ٍّٙ‫ؾخ ث و‬ ٌ‫خ ا‬١ ٍ ١١ ‫ ٌ ٌه ٌز‬، HTML ‫مخ‬١ ٚ ‫ د‬٠ٛ‫ ُ و ِؾز‬٠<body> ٕ ٌ‫ا‬

<body>. ٕ ٌ‫ ا‬ٍٝ background-color ‫خ‬١ ٔ ْ‫غت أ‬٠
ٟ ، ٛ ٌٕ‫ا‬ٚ ٓ٠ٚ ٕ ٌ‫ ِض ا‬ٜ ‫أ‬ ٕ ٍٝ ‫خ‬١ ٍ ٌ‫ْ ا‬ٌٛ ‫خ‬١ ١ ً ٠‫ّىٕه أ‬٠
<h1>.ٚ<body> ٞ ٕ ٌ ‫خ‬١ ٍ ْ‫ا‬ٌٛ‫ أ‬١‫اٌّض ي أ ٔ ٖ لّٕ ث ز‬
style.css
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
ٓ١‫ث‬ ٌ ‫لّٕ ث‬ٚ <h1> ٕ ٌٍ ٓ١‫ز‬١ ١ ‫إٔٔ لّٕ ثز‬ : ‫ خ ٘ ِخ‬ٛ‫ٍِؾ‬

) ‫ٔ غخ‬ ٌٍ ‫ْ ٍ خ‬ٌٛٚ ٌ‫ْ ا‬ٌٛ ‫ز ٓ ِؼب‬ ‫ؿخ ( ب‬ٛ‫ٍخ ِٕم‬ َ‫ٓ ث ز ا‬١‫ز‬١ ٌ‫ا‬
default.htm
<html>
<head>
</head>
<body>
</body>
</html>
: ٍٝ٠ ّ‫ و‬HTML ‫اٌــ‬ ٍِ ٝ ٌٕ ٙ ٠ٚ

‫اٌــ ‪ CSS‬وّ ‪: ٍٝ٠‬‬ ‫‪ٍِ ٝ ٌٕ ٙ ٠ٚ‬‬
‫وّ ‪: ٍٝ٠‬‬ ‫‪ ٝ ٌٕ ٙ ٠ٚ‬اٌّ ز ع وّ ‪ٍٝ٠‬‬

‫ث‪ٓ١‬‬ ‫>‪ٚ <h1‬لّٕ ث ٌ‬ ‫‪١‬ز‪ٕ ٌٍ ٓ١‬‬ ‫إٔٔ لّٕ ثز ‪١‬‬ ‫ٍِؾ‪ ٛ‬خ ٘ ِخ ‪:‬‬
‫ٍخ ِٕم‪ٛ‬ؿخ‬ ‫‪١‬ز‪ ٓ١‬ث ز اَ‬ ‫اٌ‬
‫اٌ ‪ٛ‬سح و ٍ خ "‪"background-image‬‬
‫‪.‬‬ ‫‪ ٛ‬ح و ٍ ‪١‬خ ‪ٕ ٞ‬‬ ‫‪١‬خ ‪ background-image‬ز َ ٌ‪ٛ‬‬
‫ا خ ‪ ٟ‬اٌّض ي أ ٔ ٖ‪ّ٠ ،‬ىٕه ئٔ اي اٌ ‪ ٛ‬ح ٌزغ ة ثٕ ه ٍ‪ٝ‬‬ ‫‪ ٛ‬ح‬ ‫ّض ً لّٕ ث ز َ‬

‫‪ ٙ ٟ ٙ‬صن‪ ،‬أ‪ّ٠ ٚ‬ىٕه ا ز اَ أ‪ٞ‬‬ ‫ا ‪ٚ ّٓ٠‬ا‬ ‫ٍ‪ ٝ‬اٌ ‪ ٛ‬ح ث ٌ‬ ‫خثه‪ ،‬لُ ث ٌ‬
‫‪ ٛ‬ح ٕ جه‪.‬‬
‫‪١‬خ ‪ٕ ٌٍ background-image‬‬ ‫ؾخ لُ ثز ‪١‬‬ ‫‪ ٛ‬ح اٌ ا خ و ٍ ‪١‬خ ٌٍ‬ ‫ي‬

‫اٌ ‪ ٛ‬ح‪:‬‬ ‫ِ‬ ‫>‪ٚ<body‬‬
ٕ ٌٍ background-image ‫خ‬١ ١ ‫ؾخ لُ ثز‬ ٌٍ ‫خ‬١ ٍ ‫ ح اٌ ا خ و‬ٛ ‫ي‬
:‫ ح‬ٛ ٌ‫ا‬ ِ ٚ<body>
style.css
body {
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
}
‫ ثخ ٔ ظ‬ٛ ٌّٛ‫ اٌّ ٍ ا‬ٚ‫ٌ س ا‬ٛ ٌ‫ ٔ ظ ا‬ٝ ‫سح اٌ شا خ‬ٛ ‫ خ ٘بِخ ت ا ساج‬ٛ ٍِ
CSS ‫ٍِ اٌــ‬ٚ HTML ‫ٍِ بد اٌــ‬
‫٘ ا‬، ‫ ا اٌ ى‬ٙ‫سح ث‬ٛ ٌ‫ٔب ِغبس ا‬ ‫و‬ :ٗ ‫أز‬

‫ِغبس‬ ْ‫ ّىٕه أ‬،ُ ّ ‫اٌز‬ ٍِ ِ ٍ ٌّ‫ٔ ظ ا‬ ‫ ؼذ‬ٚ ‫سح‬ٛ ٌ‫ؼٕ أْ ا‬
ٚ‫أ‬ َ‫ ثب ز ا‬ٜ‫ِ ٍ اد أ ش‬ ‫س‬ٛ ٌ‫ا‬
: ٌٍٍّ ِ‫اْ اٌىب‬ٕٛ‫ اٌؼ‬ٝ‫ز‬
.
: ٍٝ٠ ّ‫ و‬ٛ‫ اٌى‬CSS ‫اٌــ‬ ٍِ ٝ ٙ ٠ٚ
: ٍٝ٠ ّ‫ و‬ٛ‫ اٌى‬CSS ‫اٌــ‬ ٍِ ٝ ٙ ٠ٚ
"background-repeat"‫سح اٌ ٍ خ‬ٛ ‫ىشاس‬

‫ؾخ؟‬ ٌ‫ و ِ ا‬ٟ ‫ً ٌز‬١‫أ م‬ٚ ً١ ‫أ‬ ‫ ح اٌ ا خ زى‬ٛ ْ‫ٖ أ‬ ‫ اٌّض ي أ‬ٟ ‫ذ‬ ٘
.‫ ح‬ٛ ٌ‫ زؾىُ ثزى ا ا‬background-repeat ‫خ‬١ ٌ‫ا‬
background-repeat. ‫خ‬١ ٌٍ ٙ ْ‫ّىٓ أ‬٠ ُ١‫ث ل‬ ٍِ ٖ ٔ ‫ي أ‬ٚ ‫ اٌغ‬ٟ
‫ت‬ ‫اى‬ ‫ف‬ ‫اى‬ ‫ٍ ه‬
Background-repeat: repeat-x ًٛ‫ان ٕسة خخ شس أ م‬ ‫ْذ ان ل‬
background-repeat: repeat-y ًٚ‫ان ٕسة خخ شس ػ ٕد‬ ‫ْذ ان ل‬
background-repeat: repeat ًٚ‫ً ٔػ ٕد‬ٛ‫ان ٕسة خخ شس أ م‬ ‫ْذ ان ل‬
background-repeat: no-repeat ٘ ‫نٍ حخ شس‬ ‫ْذ ان ل‬

‫ ت‬ٛ‫انم‬ ٕ‫ان‬ ‫ي ل‬
Background-repeat: repeat-x ًٛ‫ْذ ان ل ان ٕسة خخ شس أ م‬
background-repeat: repeat-y ًٚ‫ْذ ان ل ان ٕسة خخ شس ػ ٕد‬
background-repeat: repeat ًٚ‫ً ٔػ ٕد‬ٛ‫ْذ ان ل ان ٕسة خخ شس أ م‬
background-repeat: no-repeat ٘ ‫ْذ ان ل نٍ حخ شس‬
:: ‫ ا اٌ ى‬ٙ‫اِ ث‬ٚ ‫غت أْ ىزت ا‬٠ ‫خ‬١ ٍ ٌ‫ ح ا‬ٛ ‫ِض ً ٌزغٕت ى ا‬
style.css
body {
background-repeat: no-repeat;
}
h1 { ‫ذة ن ُ ح شاس‬ٚ‫ ت ان ذ‬ٛ‫ت ْزة انم‬ ‫حى ا‬

color: #990000; ‫ان ٕسة‬
}
‫‪ٛ‬سح اٌ ٍ خ "‪"background-attachment‬‬ ‫ذ‬
‫‪ ٛ‬ح اٌ ٍ ‪١‬خ ثزخ أ‪ِ ٚ‬زؾ وخ‬ ‫‪١‬خ ‪ background-attachment‬ؾ ِ ئرا و ٔذ‬ ‫اٌ‬
‫‪.‬‬ ‫ِ ِؾز‪ ٠ٛ‬د اٌ ٕ‬
‫ؾخ‪ ،‬ث‪ ّٕ١‬اٌ ‪ ٛ‬ح‬ ‫ٕ ِ ‪٠‬م‪ َٛ‬اٌم ب ثزؾ ‪٠‬ه اٌ‬ ‫اٌ ‪ ٛ‬ح اٌض ثزخ ٌٓ زؾ ن ِ إٌ‬
‫ؾخ ثّؾز‪. ٙ ٠ٛ‬‬ ‫اٌّزؾ وخ ززؾ ن ِ اٌ‬
‫‪١‬خ ‪،background-attachment‬‬ ‫‪ٌ ٙ‬‬ ‫ٌٍم‪ ُ١‬اٌز‪ّ٠ ٟ‬ىٕه ‪ٚ‬‬ ‫‪ ٟ‬اٌغ ‪ٚ‬ي أ ٔ ٖ ٍِ‬
‫ز ف ث‪ ٓ١‬اٌ ‪ ٛ‬ح اٌض ثزخ ‪ٚ‬اٌّزؾ وخ‪.‬‬ ‫ا‬ ‫٘ ا ِضٍخ ‪ٚ‬‬
‫اٌم‪ّ١‬خ‬ ‫اٌ‪ٛ‬‬ ‫ِض ي‬

‫‪Background-attachment: scroll‬‬ ‫ؾخ‬ ‫اٌ ‪ ٛ‬ح ززؾ ن ِ اٌ‬ ‫٘ اٌّض ي‬
‫‪Background-attachment: fixed‬‬ ‫اٌ ‪ ٛ‬ح زجم‪ ٝ‬ثزخ‬ ‫٘ اٌّض ي‬
‫‪ ٛ‬ح اٌ ٍ ‪١‬خ‪:‬‬ ‫اٌّض ي ا ٔ ٖ ‪٠‬ج‪ ٓ١‬و‪١ ١‬خ ا ز‪ ١‬اٌم‪ّ١‬خ إٌّ جخ ٌزضج‪١‬ذ‬

:‫خ‬١ ٍ ٌ‫ ح ا‬ٛ ‫ذ‬١‫ّخ إٌّ جخ ٌزضج‬١‫ اٌم‬١‫خ ا ز‬١ ١‫ٓ و‬١‫ج‬٠ ٖ ٔ ‫اٌّض ي ا‬
style.css
body {
background-attachment: fixed;
}
‫ذة ن ؼ‬ٚ‫ ت ان ذ‬ٛ‫ت ْزة انم‬ ‫حى ا‬
h1 { ‫ان ٕسة خت‬
color: #990000;
}
‫‪ٛ‬سح اٌ ٍ خ"‪"background-position‬‬ ‫ِىبْ‬
‫‪١‬خ ‪background-position‬‬ ‫ؾخ‪ ،‬اٌ‬ ‫اٌ‬ ‫‪ ٛ‬ح اٌ ٍ ‪١‬خ ‪ ٟ‬أ ٍ‪٠ ٝ‬‬ ‫ٍم ‪ٛ ً١‬‬
‫خ‪.‬‬ ‫اٌ ‪ ٛ‬ح ‪ ٟ‬أ‪ِ ٞ‬ى ْ ‪ ِٓ ٖ ٠‬اٌ‬ ‫ّؼ ٌه ثز ‪ ٖ ٘ ١١‬اٌم‪ّ١‬خ اٌزٍم ‪١‬خ ‪ٚٚ‬‬
‫ٕ٘ ن ؿ ق ِ زٍ خ ٌزؾ ‪ ٠‬ل‪ّ١‬خ ‪ٌ ،background-position‬ىٓ وٍ‪ ٔ ٍٝ ُ ٕ ٙ‬ك ‪ٚ‬ا ‪،‬‬

‫ٔ ح‬ ‫ِٓ ‪٠‬‬ ‫اٌ ‪ ٛ‬ح اٌ ٍ ‪١‬خ ٍ‪ ٝ‬ث ‪ 100‬ثى‬ ‫ّض ً اٌم‪ّ١‬خ '‪'100px 200px‬‬
‫ؼ‪.‬‬ ‫ِٓ أ ٍ‪ ٔ ٝ‬ح اٌّز‬ ‫ؼ ‪ 200ٚ‬ثى‬ ‫اٌّز‬
‫ِؾ ح ِض‬ ‫خ ‪ٚ‬و ٌه ِم ‪١٠‬‬ ‫ع اٌ‬ ‫٘ ا إٌ ك ‪ّ٠‬ىٓ ؾ ‪ ٖ ٠‬أ‪ ً ٠‬ث ٌٕ جخ اٌّإ‪٠‬خ ِٓ‬
‫ي ا ز اَ وٍّ د ِض ‪left ٚcenter ٚbottom ٚ top‬‬ ‫‪ٚ‬اٌ ٕز‪١ّ١‬ز ‪ ،‬أ‪ِٓ ٚ‬‬ ‫اٌجى‬
‫‪right.ٚ‬‬
‫اٌغ ‪ٚ‬ي أ ٔ ٖ ‪ ٛ٠‬ؼ ث ٌّ ‪ ِٓ ٠‬ا ِضٍخ‬

‫ ِٓ ا ِضٍخ‬٠ ٌّ ‫ ؼ ث‬ٛ٠ ٖ ٔ ‫ي أ‬ٚ ‫اٌغ‬
‫ت‬ ‫اى‬ ‫ف‬ ‫اى‬ ‫ٍ ه‬
background-position: 2cm ٍ‫ ُخى ي‬2ٔ ‫ت‬ ‫غ س ان‬ٚ ٍ‫ ُخى ي‬2 ‫ػهٗ ؼذ‬ ‫ْزِ ان ٕسة ٔ ؼ‬
‫ْذ ان ل‬
2cm; ‫أػهٗ ان ت‬
background-position: 50% ‫ت ٔس‬ ‫غ س ان‬ٚ ٍ‫ان غ ت ي‬ ‫ يُخ‬ٙ ‫ْزِ ان ٕسة ٔ ؼ‬

‫ْذ ان ل‬
25%; ‫ت‬ ‫ان غ ت يٍ أػهٗ ان‬
background-position: top
‫ت‬ ‫ٍ ان‬ٛ ٚ ٗ‫ أػه‬ٙ ‫ْذ ان ل ْزِ ان ٕسة ٔ ؼ‬
right;
:‫خ‬ ٌ‫ٓ ا‬١ّ٠ ٍٝ ‫ أ‬ٟ ‫خ‬١ ٍ ٌ‫ ح ا‬ٛ ٚ ‫خ‬١ ١‫ ؼ و‬ٛ٠ ٖ ٔ ‫اٌّض ي أ‬
style.css
body {
background-position: right bottom;
}
h1 {
color: #990000;
}
‫ّىٓ وز ثزخ وز ث‬٠ ٠‫ا‬ٚ ) %25 %50 ( ‫خ ث ٌٕ جخ‬١ ٌ‫ّىٓ وز ثخ ا‬٠ : ‫ خ ٘بِخ‬ٛ ٍِ
(right bottom)
"background" ‫ب‬ ٌ‫ّ و ا‬

‫ ٘ ا‬ٟ ٙ ‫ ل أ‬ٟ‫اٌز‬ ٕ ٌ‫خ ا‬١ ٍ ‫ٌى‬ ‫ ا ز‬ٟ٘ background ‫خ‬١ ٌ‫ا‬
. ٌ‫ا‬
ٙ‫ ىزج‬ٟ‫اٌز‬ ‫ا‬ ١ٍ‫ م‬ٌٟ ‫ث ٌز‬ٚ ‫ح‬ ّ ‫ّىٕه‬٠background َ‫ث ز ا‬

.‫ ٌٍم اءح‬ٙ ‫أ‬ ٌٍّ‫ا‬ ‫غ‬٠ ‫٘ ا‬ٚ ُ١ّ ‫اٌز‬ ٍِ ٟ
: ‫٘ ٖا‬ ‫ّىٓ ا ز‬٠ ً ‫ّض‬
style.css
: ‫م‬ ‫ا‬ٚ َ‫غخ ث ز ا‬١‫إٌز‬ ٔ ‫ك‬١‫ّىٓ ؾم‬٠ background َ‫ث ز ا‬
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
:ٓ١ّ١ٌ‫ ا‬ٌٝ‫ئ‬ ١ٌ‫ ِٓ ا‬- ‫ ا اٌ ى‬ٙ‫ت ث‬ ‫اٌم ّخ‬

background-color | background-image | background-repeat |
background-attachment | background-position
ٔ ٌُ ً ‫ ّض‬،‫خ‬١ ٌ‫ ٖ ا‬ٌٙ ‫خ‬١ ‫ّخ اٌزٍم‬١‫اٌم‬ ٛ‫ؼ ث‬ ‫َ اٌّز‬ٛ‫م‬١ ِ ‫خ‬١ ‫ئرا ٌُ ىزت‬
:‫ اٌّض ي‬ٟ background-position ٚ background-attachment ‫خ‬١ ٌ‫ا‬
background: #FFCC66 url("butterfly.gif") no-repeat;
‫ف‬ ّ‫ و‬ٟ٘ ُ١‫اٌم‬ٚ ٌّٙ ‫خ‬١ ‫ّخ اٌزٍم‬١‫اٌم‬ ٛ‫ؼ ث‬ ‫َ اٌّز‬ٛ‫م‬١ ٚ ‫ٓ ٌُ ؾ ا‬١‫ز‬١ ٌ‫ا‬
top left.ٚscroll
ٍِ
ّ‫ز‬ ‫ اٌّز خ‬، ‫ م‬HTML َ‫ ث ز ا‬ٙ‫م‬١‫ج‬ ‫ّىٕه‬٠ ‫ح‬٠ ً ‫ٍّذ ؿ ل‬ ٌ‫ ٘ ا‬ٟ

٠ ‫ ٌزؾ‬CSS َ ‫ د ٕ ِ ٔ ز‬١ٔ ‫ا ً ِٓ ا ِى‬ٚ ً ١‫ٗ ؿ‬١ ‫ ٕ زج‬ٞ ٌ‫ا‬ٚ َ ‫اٌم‬ ٌ‫ ا‬ٟ
.‫ن‬ٛ ٌ‫ا‬
‫‪ٛ‬‬ ‫اٌ سط ‪ :4‬اٌ‬
‫ٍ‪ ٙ‬ث ز اَ‪ٕ ٚ ، CSS‬م‪ َٛ‬أ‪ ً ٠‬ثّ ٌغخ ِ ىٍخ‬ ‫‪ٛ‬ؽ ‪ٚ‬و‪١‬‬ ‫زز ٍُ اٌ‬ ‫‪ ٘ ٟ‬ا اٌ‬
‫ؾ‪١‬ؼ ِ ٌُ ىٓ ِضجزخ ٍ‪ ٝ‬اٌؾ ‪ٛ‬ة‪،‬‬ ‫‪ ٙ‬ث ى‬ ‫‪ٛ‬ؽ اٌز‪ٌٓ ٟ‬‬ ‫اٌ‬ ‫عث‬ ‫و‪١ ١‬خ‬
‫‪:‬‬ ‫‪ ٘ ٟ‬ا اٌ‬ ‫ٕز ٍُ ٘ ٖ اٌ‬
‫‪font-family‬‬
‫‪font-style‬‬
‫‪font-variant‬‬
‫‪font-weight‬‬
‫‪font-size‬‬
‫‪font‬‬
‫‪"font-family" ٛ‬‬ ‫ٔ‪ ٛ‬اٌ‬
‫ت ا ‪٠ٌٛٚ‬خ ٍ‪ٕ ٝ‬‬ ‫جك ٍ‪ٝ‬‬ ‫‪ٛ‬ؽ‬ ‫ل ّخ‬ ‫‪١‬خ ‪ font-family‬ز َ ٌ‪ٛ‬‬ ‫اٌ‬
‫‪ٛ‬ؽ ‪١‬م‪ َٛ‬ث ز اَ اٌ‬ ‫ّٓ ل ّخ اٌ‬ ‫ا ‪ٚ‬ي‬ ‫ؼ اٌ‬ ‫ؾخ ِ ‪ ،‬ئرا ٌُ ‪٠‬غ اٌّز‬ ‫أ‪ٚ‬‬
‫إٌّ ت‪.‬‬ ‫اٌز ٌ‪٘ٚ ،ٟ‬ى ا ز‪٠ ٝ‬غ اٌ‬ ‫ع اٌ‬ ‫اٌض ٔ‪ ٟ ٟ‬اٌم ّخ ‪ٚ‬ئرا ٌُ ‪٠‬غ ٖ ‪١‬ؾ ‪ٚ‬ي‬
‫ِخ‪،‬‬ ‫‪ٛ‬ؽ ث ّ ء ِؾ ح أ‪ ٚ‬أ ّ ء‬ ‫ز َ ٌز ٕ‪، ٙ ١‬‬ ‫‪ٛ‬ؽ‬ ‫ٕ٘ ن ٔ‪ ِٓ ْ ٛ‬أ ّ ء اٌ‬

‫مخ‪.‬‬ ‫‪ ٟ ّٙ‬اٌ م اد اٌ‬ ‫ٍؾ‪ٕ ٓ١‬‬ ‫اٌّ‬
‫‪ٛ‬ؽ‬ ‫أ ّ ء اٌ‬
‫‪ٛ‬ؽ ث ّ ء ِؾ ح ٘‪"Times New Roman" ٚ "Arial" ٟ‬أ‪"Tahoma". ٚ‬‬ ‫أِضٍخ ٌ‬
‫أ ّ ء ِخ‬
‫ى ِزّ س‪ّ ،‬ض ً ‪sans-‬‬ ‫‪ٛ‬ؽ اٌز‪ٌٙ ٟ‬‬ ‫‪ٛ‬ؽ ؾ اٌّغّ‪ ٛ‬خ ِٓ اٌ‬ ‫ّ ء اٌ ِخ ٌٍ‬ ‫ا‬
‫‪ٛ‬ؽ ِٕ جخ ٌ ع‬ ‫ف ‪ٟ٘ٚ‬‬ ‫ٍ‪ ٝ‬ا‬ ‫ؾ‪ ٞٛ‬ص‪ٚ‬ا‬ ‫‪ٛ‬ؽ‬ ‫‪ِ ٟ٘serif‬غّ‪ ٛ‬خ ِٓ اٌ‬
‫خ‪.‬‬ ‫ٍ‪ ٝ‬اٌ‬ ‫إٌ‬
‫‪ٛ‬ؽ ‪ ٛ٠‬ؼ ‪ ٟ‬اٌّض ي اٌز ٌ‪:ٟ‬‬ ‫ز ف ث‪ ٓ١‬أٔ‪ٛ‬ا اٌ‬ ‫ا‬
‫ٌ ‪٠‬ه ُ اٌ ‪ِٓٚ ،ٗ١ٍ٠ ٞ‬‬ ‫اٌّ‬ ‫‪ٛ‬ؽ ‪ِٛ ٟ‬ل ه ٔذ ج أ ِ اٌ‬ ‫ل ّخ ث ٌ‬ ‫ِٕ‬
‫ؾخ‬ ‫ّٓ أْ اٌ‬ ‫‪٠‬مخ‬ ‫‪ٛ‬ؽ‪ ،‬ث‪ ٖ ٙ‬اٌ‬ ‫أْ ٕ‪ ٟٙ‬اٌم ّخ ث ُ ِغّ‪ ٛ‬خ ِخ ِٓ اٌ‬ ‫ا‬
‫اٌ ‪ ٞ‬لّذ ثزؾ ‪.ٖ ٠‬‬ ‫ؼ اٌ‬ ‫ٌ ‪٠‬ه ئرا ٌُ ‪٠‬غ اٌّز‬ ‫اٌّ‬ ‫إٌ‪ ِٓ ٛ‬اٌ‬ ‫ز ع ثٕ‬
‫‪ٛ‬ؽ ِ جخ زى‪ ْٛ‬ث‪ ٙ‬ا اٌ ى ‪:‬‬ ‫ّض ً ل ّخ ِ جخ ِٓ اٌ‬
‫‪style.css‬‬
‫};‪h1 {font-family: arial, verdana, sans-serif‬‬

‫};‪h2 {font-family: "Times New Roman", serif‬‬
ٓ‫ى‬٠ ٌُ ‫ ئرا‬،"Arial" َ‫< ز ع ث ز ا‬h1> ٕ ٌ‫د ث ز اَ ا‬ ٟ‫ٓ اٌز‬٠ٚ ٕ ٌ‫ا‬
ٓ‫ى‬٠ ٌُ ‫ئرا‬ٚ"Verdana" ِٕٗ ً ‫ ع ث‬١ َ ‫ة اٌّ ز‬ٛ ٟ ً‫ِضجز‬ ٌ‫٘ ا ا‬
sans-serif ‫ؽ‬ٛ ٌ‫ٍخ ا‬ ِٓ ١‫زُ ا ز‬١ َ ‫ة اٌّ ز‬ٛ ٍٝ ْ‫ ا‬ٛ ِٛ ْ ٕ ‫ا‬
.ٓ٠ٚ ٕ ٌ‫ٌ ع ا‬
ّٗ ‫ْ ا‬ ١ ٕ ٟ‫ِز‬ ٓ١‫" ث‬Times New Roman" ُ ‫ٕ ا‬ ٚ ٕٔ‫أ‬ ١‫و‬

. ١ ٕ ٟ‫ِز‬ ٓ١‫ث‬ ٛ٠ ْ‫غت أ‬٠ ‫ٌ ٌه‬ٚ ‫د‬ ِ ٞٛ‫ؾ‬٠
"font-style" ٌ‫شاص ا‬
ٚ‫أ‬italic ٚ‫أ‬normal ‫ّخ‬١‫ؾّ اٌم‬١ ٌ‫ ؾ ِ ئرا و ْ ا‬font-style ‫خ‬١ ٌ‫ا‬
. ِ ‫ ث ى‬ٙ ‫< ز‬h2> ٓ٠ٚ ٕ ‫ اٌّض ي أ ٔ ٖ و‬ٟ ،oblique
h1 {font-style:italic;}
"font-variant" ٌ‫ب ٓ ا‬
ٌٍsmall-caps ٚ‫أ‬normal ٓ١‫ّز‬١‫ٓ اٌم‬١‫ ث‬١‫ز‬ ٌ َ ‫ ز‬font-variant ‫خ‬١ ٌ‫ا‬
‫ف‬ٚ ‫ىزت ثؾ‬١ ٌٕ‫ أْ ا‬ٟٕ small-caps ‫ّخ‬١‫ اٌم‬،‫خ‬١‫ث‬ٚ ٚ ‫ ِز ٍمخ م ث ٌٍ د ا‬ٟ٘ٚ
ٟ‫ ٌى‬ٟ ٢‫٘ اٌّض ي ا‬ ْ‫ه أ‬١ٍ ،ً‫ ا ِ ِ ثى‬ٚ ‫ج‬٠ ، ،‫ ح‬١ ُ‫خ اٌؾغ‬١ ٔ ِٓ ٕٙ‫ ح ٌى‬١‫وج‬
: ‫ُ أوض‬ٙ
ٖ ُ٘ ٠ ‫ىٓ ٕ٘ ن‬٠ ٌُٚfont-variant ‫خ‬١ ٌٍsmall-caps ‫ّخ‬١‫ د اٌم‬١‫ئرا ا ز‬

‫ ح م‬١‫ف وج‬ٚ ‫ثؾ‬ ٌٕ‫ؼ ث ع ا‬ ‫َ اٌّز‬ٛ‫م‬١ ‫خ‬١ ٌ‫ا‬
style.css
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
"font-weight" ٌ‫صْ ا‬ٚ
ّ‫ؾ‬٠ ْ‫أ‬ ٌٍ ٓ‫ّى‬٠ ، ٌ‫ " م " ا‬ٚ‫ْ ّ وخ أ‬ٛ‫وُ زى‬ font-weight ‫خ‬١ ٌ‫ا‬
900 ٌٝ‫ ئ‬100 ِٓ َ ‫ل‬ ‫ُ ا ز اَ ا‬ ‫ؾد‬ ‫ٕ٘ ن ِز‬ٚ ،bold ٚ‫أ‬normal ‫ّخ‬١‫اٌم‬
. ٌ‫م ا‬ ٌٛ
style.css
p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}
"font-size" ٌ‫ُ ا‬
font-size. ‫خ‬١ ٌ ‫ ٖ ث‬٠ ‫ّىٓ ؾ‬٠ ٌ‫غُ ا‬
ُ‫غ‬ ٌٛ ِٙ‫ّىٓ ا ز ا‬٠ ٟ‫خ) اٌز‬٠‫ إٌ جخ اٌّإ‬، ‫ ثى‬:‫ اد (ِض ي‬ٌٛ‫ ِٓ ا‬٠ ٌ‫ٕ٘ ن ا‬
:ّٓ ‫ز‬٠ ‫اٌّض ي‬ٚ ،ًِ‫ اد ا وض ا ز ا‬ٌٛ‫ ا‬ٍٝ ‫ ٘ ا اٌّض ي ٕ و‬ٟ ، ٌ‫ا‬
style.css
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
‫) '‪ٔ( 'pt' ٚ 'px‬م خ‬ ‫ث ‪ ٟ٘ٚ ،‬أْ و ِٓ (اٌج‪١‬ى‬ ‫ا‬ ‫ث‪ ٚ ٓ١‬اد اٌم‪١‬‬ ‫ق ‪ٚ‬ا‬ ‫ٕ٘ ن‬
‫غُ اٌ‬ ‫ِؾ اً ث لخ ‪ ٚ‬ثذ ث‪ّ 'em' ٚ'%' ّٕ١‬ؼ ٌٍّ ز َ ثز ‪١١‬‬ ‫غُ اٌ‬ ‫) غ‬
‫خ أ‪ ٚ‬وج‬ ‫ز‪ ١‬د اٌ‬ ‫ئٌ‪ ٝ‬اٌّ ز‪ ٜٛ‬إٌّ ت ٌٗ‪ ٕ٘ ،‬ن اٌ ‪ ِٓ ٠‬اٌّ ز ِ‪ ِٓ ٓ١‬ر‪ ٞٚ‬ا‬
‫‪ ٠‬خ‪ٌٚ ،‬ى ٔ ؼ اٌّ‪ٛ‬ل‬ ‫خ راد ‪ ٛ‬ح‬ ‫أ‪ٍّ٠ ٚ‬ه‬ ‫‪ ٟ‬اٌج‬ ‫اٌ ٓ أ‪ِٓ ٟٔ ٠ ِٓ ٚ‬‬
‫‪ِ ٍٙ٠‬ض '‪ '%‬أ‪ٚ‬‬ ‫‪ّ٠‬ىٓ‬ ‫ث ِٓ ا ز اَ ‪ ٚ‬اد ل‪١‬‬ ‫لبث ً ٌٍ‪ٛ ٛ‬ي ٌ‪ ٖ ٙ‬اٌ بد ‪ٌٍٚ‬غّ‪١‬‬
‫‪'em'.‬‬
‫‪١‬خ‬ ‫‪ٚ‬ئو جٍ‪، ٛ‬‬ ‫‪ٛ ٠‬و‬ ‫‪ِٛ ٟ‬ص‪٠‬‬ ‫غُ اٌ‬ ‫‪٠‬‬ ‫‪ ٟ‬اٌّض ي أ ٔ ٖ ‪١ ٛ‬ؼ ٌى‪١ ١‬خ‬
‫ٓ رٌه؟‬ ‫ا خ‪ ،‬أ‬
"font" ٌ‫ا‬ ‫ب‬ ‫ّ و‬
. ‫ا‬ٚ ٟ ‫ؽ‬ٛ ٌ‫ا‬ ‫و‬ ‫ز‬ ْ‫ أ‬ٕٙ‫ّى‬٠ ٟ‫خ اٌز‬١ ٌ‫ا‬font َ‫ا ز ا‬
<p>: ٕ ٌٍ ‫ؽ‬ٛ ‫ثخ‬ ‫ ا‬ٛ ٌ‫ ٘ ٖ ا‬ٛ ً ‫ّض‬
style.css
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
‫ ا‬ٙ‫ث‬ ‫ث خ أْ ج‬ ‫ ا‬ٛ ٌٍ ٓ‫ّى‬٠ ٜ ‫ا‬ ٌ‫ا‬ ‫ز‬ ٟ‫خ اٌز‬١ ٌ‫ث ز اَ ا‬

: ‫اٌ ى‬
style.css
p{
font: italic bold 30px arial, sans-serif;
}
: ‫ ا اٌ ى‬ٙ‫ت ث‬ font ‫خ‬١ ٌ‫ُ ا‬١‫ل ّخ ل‬

font-style | font-variant | font-weight | font-size | font-family
‫ٍِ‬
‫أُ٘ ِّ‪ ١‬اد‬ ‫‪ٛ‬ؽ‪ ،‬و أْ أ‬ ‫ا ِى ٔ‪ ١‬د اٌّز ٍمخ ث ٌ‬ ‫ث‬ ‫ٍّذ ‪ ٘ ٟ‬ا اٌ‬
‫ي ل ك‬ ‫ؾ د اٌّ‪ٛ‬ل‬ ‫ٌى‬ ‫‪ٛ‬ؽ ٘‪ ٛ‬ئِى ٔ‪١‬خ ‪ ١١‬اٌ‬ ‫ا ز اَ ‪ٌ CSS‬زؾ ‪ ٠‬اٌ‬
‫ك ٍٕم‪ٟ‬‬ ‫اٌ‬ ‫‪ٌٛٙ‬خ‪ ٟ ،‬اٌ‬ ‫‪ ١‬ه أوض‬ ‫اٌ‪ٛ‬لذ ‪ ٚ‬غ‬ ‫لٍ‪ٍ١‬خ‪ّ٠CSS ،‬ىٕ‪ ٙ‬أْ ‪ٛ‬‬
‫‪.‬‬ ‫اٌزؾىُ ث ٌٕ‬ ‫ح ٍ‪ٝ‬‬ ‫ٔ‬
‫اٌ سط ‪ :5‬إٌ ‪ٛ‬‬
‫‪١‬خ ٌّ ّّ‪ ٟ‬اٌّ‪ٛ‬ال ‪ ٘ ٟ ،‬ا اٌ‬ ‫٘‪ٍ ِ ٟ‬خ أ‬ ‫خ ؿ اص ئٌ‪ ٝ‬إٌ ‪ٛ‬‬ ‫ٕ ‪١‬ك ‪ٚ‬ئ‬
‫‪ٕ ،‬زؾ س ٓ ٘ ٖ‬ ‫ٌ‪١‬ت اٌ غ‪١‬جخ اٌز‪ ٟ‬م ِ‪ٌ CSS ٙ‬زٕ ‪١‬ك إٌ‬ ‫ِم ِخ ‪ٛ‬ي ا‬ ‫ز‬
‫‪:‬‬ ‫‪ ٘ ٟ‬ا اٌ‬ ‫اٌ‬
‫‪text-indent‬‬
‫‪text-align‬‬
‫‪text-decoration‬‬
‫‪letter-spacing‬‬
‫‪text-transform‬‬
‫ش"‪"text-indent‬‬ ‫بسؽ ل أ‪ٚ‬ي‬ ‫‪ٚ‬‬
‫خ لج‬ ‫خ‬ ‫ِ‬ ‫خ ٌّ خ أٔ‪١‬مخ ئٌ‪ ٝ‬اٌ م اد ث‪ٛ‬‬ ‫‪١‬خ ‪ّ text-indent‬ؼ ٌه ث‬ ‫اٌ‬
‫ز َ اٌ ٕ‬ ‫ٕ اٌم‪ّ١‬خ ‪ٌ30px‬ى اٌ م اد اٌز‪ٟ‬‬ ‫ِٓ اٌ م ح‪ ٟ ،‬اٌّض ي أ ٔ ٖ ‪ٚ‬‬ ‫أ‪ٚ‬ي‬
‫‪<p>:‬‬
‫{‪p‬‬
‫;‪text-indent: 30px‬‬
‫}‬
‫‪ ٝ ٙ ٠ٚ‬اٌّ ز ع وّ ‪: ٍٝ٠‬‬
‫"‪"text-align‬‬ ‫ِ براح إٌ‬
‫‪،ٟ‬‬ ‫ز َ ‪ ٟ‬اٌّ‬ ‫‪١‬خ "‪ "align‬اٌز‪ ٟ‬و ٔذ‬ ‫جٗ ‪HTML ٟ‬‬ ‫‪١‬خ ‪text-align‬‬
‫"‪"centred‬‬ ‫"‪ "left‬أ‪ ٚ‬اٌ‪"right" ٓ١ّ١‬أ‪ ٟ ٚ‬إٌّز‬ ‫‪ّ٠‬ىٓ ِؾ را ٗ ٔؾ‪ ٛ‬اٌ‪١‬‬ ‫إٌ‬
‫ث‬ ‫ِٓ اٌغ ٔج‪ ٓ١‬وّ‬ ‫خ ئٌ‪ ٝ‬رٌه اٌم‪ّ١‬خ ‪ justify‬زم‪ َٛ‬ثّؾ راح إٌ‬ ‫‪ٚ‬ث‬
‫‪ٚ‬اٌّغ د‪.‬‬ ‫اٌ ؾ‬
‫اٌغ ‪ٚ‬ي >‪<th‬لّٕ ثّؾ را ٗ ٔؾ‪ ٛ‬اٌ‪ ،ٓ١ّ١‬ث‪ ّٕ١‬اٌج‪ ٔ ١‬د ‪ٟ‬‬ ‫‪ ٟ‬أ‬ ‫‪ ٟ‬اٌّض ي أ ٔ ٖ إٌ‬
‫‪ ٟ‬اٌ م اد مّٕ ثّؾ را ٗ ِٓ اٌغ ٔج‪:ٓ١‬‬ ‫أِ إٌ‬ ‫اٌغ ‪ٚ‬ي >‪ <td‬ر‪ٔ ٘ ٕ٠‬ؾ‪ ٛ‬إٌّز‬
‫{ ‪th‬‬
‫;‪text-align: right‬‬
‫}‬
‫{ ‪td‬‬
‫;‪text-align: center‬‬
‫}‬
‫{‪p‬‬
‫;‪text-align: justify‬‬
‫}‬
‫اٌــ‬ ‫ٍِ‬ ‫‪ٚ‬ي ا‬ ‫ٍِ ‪ ٛ‬خ ٘بِخ ‪ ٌّ :‬ب٘ ح ب ش اٌى‪ ٛ‬اٌغبثك ث ِٓ اا ب خ‬

‫‪ HTML‬وّب ٍ‪: ٝ‬‬
default.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="as.css" />
</head>
<body>
<table width="100%" border="3">
<tr>
<td>help</td>
<td>more</td>
<td>self</td>
</tr>
<tr>
<td>share</td>
<td>us</td> ‫حى ا ت ٕد ذٔال دا يه‬
<td>our</td> HTML ‫انــ‬
</tr>
</table>
</body>
</html>
<table width="100%" border="3">
<tr>
<td>help</td>
<td>more</td>
<td>self</td>
</tr>
<tr>
<td>share</td>
<td>us</td>
<td>our</td>
</tr>
</table>
</body>
</html>
HTML ‫اٌــ‬ ٍِ ‫ا‬ ٔ ‫< زُ ا ب خ‬P> ٌٕ‫ ا‬ٛ‫س ب ش و‬ٛٙ ‫اَ ارا اس ٔب‬
"text-decoration" ٌٕ‫ص ش خ ا‬
ً ‫ ّض‬، ٌٕ‫ ا‬ٍٝ ‫ اد‬١ ٚ‫ف أ‬ ‫خص‬ ‫ ّىٕه ِٓ ئ‬text-decoration ‫خ‬١ ٌ‫ا‬
<h1> ٕ ‫ و‬ٟ ٢‫ اٌّض ي ا‬ٟ ،ٗ١ٍ ٚ‫لٗ أ‬ٛ ٚ‫ أ‬، ٌٕ‫ا‬ ‫اً أ‬ ١ ْ‫ّىٕه أ‬٠
ٌ‫ا‬ ٛ‫<لّٕ ث‬h3> ٚ ٙ‫ل‬ٛ ٟ‫ٓ اٌز‬٠ٚ ٕ ٌ‫ ا‬ٟٙ <h2> ِ‫ً أ‬ ٍٙ ‫ٕ أ‬ ٚ
. ٙ١ٍ
style.css
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
"letter-spacing"‫ف‬ٚ‫اٌّغب خ ث ٓ اٌ ش‬
The spacing between text characters can be specified using the

ٟ‫خ اٌز‬ ٌّ‫ع ا‬ ‫ ثج ؿخ‬ٟ٘ ‫خ‬١ ٌ‫ ٖ ا‬ٌٙ ‫ّخ اٌّؾ ح‬١‫ اٌم‬،property letter-spacing
<p> ‫ اٌ م اد‬ٟ ‫ف‬ٚ ‫ٓ اٌؾ‬١‫ث‬3px ‫خ‬ ِ ‫ ّض ً ئرا أ د‬، ‫آ‬ٚ ‫ف‬ ‫ٓ و‬١‫ ٘ ث‬٠
: ‫ ا اٌ ى‬ٙ‫ث‬ ٌ‫ه أْ ىزت ا‬١ٍ <h1> ٓ٠ٚ ٕ ٌ‫ ا‬ٟ ‫ف‬ٚ ‫ٓ اٌؾ‬١‫ث‬6px ٚ
style.css
h1 {
letter-spacing: 6px;
}
p{
}
"text-transform" ٌٕ‫ ا‬ٛ
ُ١‫ٓ اٌم‬١‫ز ث‬ ْ‫ّىٕه أ‬٠ ،‫خ‬١‫ اٌٍ د اٌ ث‬ٟ ٌ‫ زؾىُ ثؾغُ ا‬text-transform ‫خ‬١
ٌٕ‫ ا‬ٛٙ ‫خ‬١ ١‫ٓ و‬ ٌٕ‫ا‬ ‫ث‬ٚ ،lowercase ٚ‫أ‬uppercase ٚ‫أ‬capitalize
.ٍٟ ‫ا‬
‫ ا‬ٙ‫ ث‬ٚ‫" أ‬HEADLINE" ‫ ا اٌ ى‬ٙ‫ ٌٍّ ز َ ث‬ٙ ْ‫ّىٓ أ‬٠ "headline" ‫ّض ً وٍّخ‬
text-transform:ُ١‫ ِ اٌم‬ِٙ‫ّىٕه ا ز ا‬٠ ُ١‫ ٕ٘ ن أ ث ل‬، "Headline" ‫اٌ ى‬
capitalize
"John Doe". ‫ ز جؼ‬: "john doe" ‫ي ِٓ و وٍّخ ِض ي‬ٚ ‫ اٌؾ ف ا‬١‫َ ثزىج‬ٛ‫م‬
uppercase
"JOHN DOE". ‫ ز جؼ‬: "john doe" ‫ ِض ي‬،‫ ح‬١‫ف وج‬ٚ ‫و اٌؾ‬ ‫غ‬
lowercase
"john doe". ‫ ز جؼ‬: "JOHN DOE" ‫ ِض ي‬،‫ ح‬١ ‫ف‬ٚ ‫و اٌؾ‬ ‫زغ‬
none
HTML. ٍِ ٟ ‫ وّ وزت‬ٙ ١ ٌٕ‫ ا‬، ١ ٞ‫َ ث ّ أ‬ٛ‫ٌٓ م‬
،<li> (list-item) ٕ ٌ‫ز َ ا‬ ٍٙ‫ّ ء و‬ ‫ ا‬،‫َ ث ز اَ ل ّخ أ ّ ء‬ٛ‫ ٕم‬،‫وّض ي‬

.‫ ح‬١‫ وج‬ٙ ٚ ‫ و‬٠ ٕ ٓ٠ٚ ٕ ٌ‫ اً أِ ا‬١‫ي وج‬ٚ ‫ ا‬ٙ ٙ ٠ ْ‫ّ ء أ‬ ‫ ا‬٠ ٔ ٕٔ‫ٌٕم أ‬ٚ
‫ف‬ٚ‫ٍ وزت ث ش‬ ‫ا‬ ٌٕ‫ أْ ا‬ٜ‫ زش‬ٚ ‫ ا اٌّ بي‬ٌٙ HTML ٍٝ‫أٌم ٔ شح ػ‬ٚ ‫شة‬
.‫شح‬
style.css
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
ٍِ
ٖ ٘ ٟ ١‫ ٌىٓ ٕ٘ ن اٌىض‬، CSS ِٓ ١‫ ح ٍّٕ اٌىض‬١ ‫اٌض خ ا‬ ٚ ٌ‫ ا‬ٟ

. ‫اث‬ٚ ٌ‫ ا‬ٍٝ ‫ح‬ ٔ ٟ‫ك ٍٕم‬ ٌ‫ا‬ ٌ‫ ا‬ٟ ،‫خ‬١ٕ‫اٌزم‬
‫اٌ سط ‪ :6‬اٌش‪ٚ‬اث‬
‫اٌ ثمخ ٍ‪ ٝ‬اٌ ‪ٚ‬ث (ِض ي‪ ١١ :‬ا ٌ‪ٛ‬اْ‪،‬‬ ‫ً ‪ ٟ‬اٌ ‪ٚ‬‬ ‫ٍّزٗ‬ ‫جك ِ‬ ‫‪ّ٠‬ىٕه أْ‬
‫ّؼ ٌه ثزؾ ‪٠‬‬ ‫اٌ ‪ٚ‬اث ‪ ،‬ئٌ ) اٌغ ‪ ٕ٘ ٠‬أْ ‪CSS‬‬ ‫أ‬ ‫‪ٛ‬ؽ‪ٚ ،‬‬ ‫اٌ‬
‫ً أ‪ ٚ‬و ْ ِإ‬ ‫اٌّ ز َ اٌ اث أ‪ ٚ‬صا ٖ أ‪ ٚ‬و ْ ٔ‬ ‫ِ زٍ خ ثؾ ت ٌخ اٌ اث ئْ ٌُ ‪٠‬‬
‫خ ِإ اد ّ‪ٍ١‬خ ‪ ١ ِٚ‬ح ٍ‪ ٝ‬اٌ ‪ٚ‬اث ‪ٌٍ ،‬زؾىُ‬ ‫اٌ ح ‪ٛ‬ق اٌ اث ‪ ،‬و ٘ ا ‪ّ٠‬ىٕه ِٓ ئ‬
‫ز َ ِ ‪pseudo-classes .ّٝ ٠‬‬ ‫ث‪ ٖ ٙ‬اٌز ‪ ١‬اد ‪٠‬غت أْ‬
‫ِب ٘ اٌ خ اٌّض خ؟‬

‫اٌؾ د‬ ‫زج ِ زٍ‬ ‫‪ ٓ١ ٟ‬ا‬ ‫اٌ خ اٌّ ‪ ٠‬خ أ‪ّ ٠ pseudo-class ٚ‬ؼ ٌه ث ْ‬
‫‪HTML. ٟ‬‬ ‫ٌٕ‬ ‫اس ٕ ِ م‪ َٛ‬ثزؾ ‪٠‬‬ ‫‪ٚ‬ا‬
‫ي اٌ‪ٌ ٌ<a> ُ ٛ‬ه‬ ‫‪ِٓ HTML‬‬ ‫ٌٍٕم ٔ شح ػٍ‪ ٝ‬اٌّ بي‪ ،‬وّب ؼشف اٌش‪ٚ‬اث‬
‫‪CSS:‬‬ ‫ّىٕٕب أْ ٔغز َ ‪a‬وّٕزم‬
‫{‪a‬‬
‫;‪color: blue‬‬
‫}‬
‫اٌــ ‪ html‬وّب ٍ‪ ٝ‬ن‬ ‫‪ٍِ ٝ‬‬ ‫ث ِٓ ا ب خ س‪ٚ‬اث‬ ‫خ ٘بِخ ٌّ ب٘ ح ب ش ا و‪ٛ‬‬ ‫ِ‬
‫‪default .html‬‬
‫‪<a href="http://www.yahoo.com"> yahoo.com‬‬
‫>‪</a‬‬
‫ز َ‬ ‫‪ٌ ٌ ،‬ه ‪ّ٠‬ىٕه أْ‬ ‫‪٠‬‬ ‫د‪ّ ،‬ض ً ‪ّ٠‬ىٓ أْ ‪ ٖ ٚ ٠‬اٌّ ز َ أ‪ٚ‬‬ ‫ح‬ ‫اٌ اث ٌٗ‬
‫ى ً ِ زٍ ً ٌٍ اث اٌ ‪ ٞ‬صا ٖ اٌّ ز َ ٓ اٌ اث اٌ ‪ ٖ ٠ ٌُ ٞ‬ث ‪.‬‬ ‫خ ِ ‪ ٠‬خ ٌى‪ ٟ‬ؾ‬
‫{ ‪a:link‬‬
‫;‪color: blue‬‬
‫}‬
‫{ ‪a:visited‬‬
‫;‪color: red‬‬
‫}‬
‫ّىٓ‬ ‫ا ز َ ‪ٌٍ a:visited ٚ a:link‬ش‪ٚ‬اث اٌز صاس٘ب أ‪ ٌُ ٚ‬ضس٘باٌّغز َ‪ ،‬اٌش‪ٚ‬اث‬

‫‪ a:active‬أِب ‪ ٙ a:hover‬اٌ بٌخ اٌز‬ ‫خ ٌ‪ٙ‬ب خ ِض خ ب خ ‪٘ٚ‬‬ ‫أْ ى‪ٔ ْٛ‬‬
‫ى‪ٙ ْٛ‬ب ِؤ ش اٌ سح ‪ٛ‬ق اٌشاث ‪.‬‬
‫ػ ‪ٚ‬ا ِضٍخ‪.‬‬ ‫ث ٌٍ ‪ٚ‬اث ِ اٌّ ‪ ِٓ ٠‬اٌ‬ ‫ٕم‪ َٛ‬ا‪ ْ٢‬ث ع اٌؾ د ا‬

‫اٌ خ اٌّض خ‪: link‬‬
‫ؾ د ٌُ ‪. ٘ ٠‬‬ ‫اٌ خ اٌّ ‪ ٠‬خ ‪ :link‬ز َ ٌٍ ‪ٚ‬اث اٌز‪ ٟ‬م‪ ٛ‬اٌّ ز َ ئٌ‪ٝ‬‬
‫ؼ‪.‬‬ ‫‪ ٟ‬اٌّض ي أ ٔ ٖ اٌ ‪ٚ‬اث اٌز‪ ٘ ٠ ٌُ ٟ‬اٌّ ز َ ز ‪ ٙ‬ثٍ‪ ْٛ‬أص ق‬
‫{ ‪a:link‬‬
‫;‪color: #6699CC‬‬
‫}‬
‫اٌ خ اٌّض خ‪: visited‬‬

‫و‬ ‫ز َ ٌٍ ‪ٚ‬اث اٌز‪ ٟ‬صا ٘ اٌّ ز َ‪ ،‬اٌّض ي أ ٔ ٖ ‪١‬غ‬ ‫اٌ خ اٌّ ‪ ٠‬خ ‪:visited‬‬
‫ِك‪:‬‬ ‫اٌ ‪ٚ‬اث اٌز‪ ٟ‬صا ٘ اٌّ ز َ ثٍ‪ ْٛ‬ثٕ غ‪ٟ‬‬
‫{ ‪a:visited‬‬
‫;‪color: #660099‬‬
‫}‬
: ٍٝ٠ ّ‫ اٌّ ز ع و‬ٝ ٙ ٠ٚ
: active‫اٌ خ اٌّض خ‬
.‫خ‬ ٌٕ‫اث ا‬ٚ ٌٍ َ ‫ز‬ :active ‫ خ‬٠ ٌّ‫اٌ خ ا‬
:‫اء‬ ‫خ‬١ ٍ ‫ ث‬ٙ ‫خ ز‬ ٌٕ‫اث ا‬ٚ ٌ‫ اٌّض ي أ ٔ ٖ و ا‬ٟ
style.css
a:active {
background-color: #FFFF00;
}
: ‫ اٌّ ز ع‬ٝ ٍٝ٠ ّ‫ اٌ اث و‬ٙ ٠ٚ

‫‪ ٙ ٠ٚ‬اٌ اث وّ ‪ ٝ ٍٝ٠‬اٌّ ز ع ‪:‬‬
‫اٌ خ اٌّض خ‪: hover‬‬
‫اٌ ح ‪ٛ‬ق اٌ اث ‪.‬‬ ‫اٌ خ اٌّ ‪ ٠‬خ ‪ :hover‬ز َ ٕ ِ ‪٠‬ى‪ِ ْٛ‬إ‬
‫‪ّ٠‬ىٓ ا ز اَ ٘ ٖ اٌ خ ٔ ء ِإ اد ّ‪ٍ١‬خ‪ّ ،‬ض ً ئرا أ ٔ أْ ى‪ ْٛ‬اٌ ‪ٚ‬اث ٍِ‪ٔٛ‬خ‬

‫ٍ‪ ٕ١‬أْ ٔىزت ‪ CSS‬ث‪ ٙ‬ا اٌ ى ‪:‬‬ ‫ح اٌ ح ٍ‪ٙ١‬‬ ‫ِإ‬ ‫ث ٌج م ٌ‪ٍ ِٚ ٟ‬خ ٕ ِ ٔ‬
‫{ ‪a:hover‬‬
‫;‪color: orange‬‬
‫;‪font-style: italic‬‬
‫}‬
‫ِؤ ش اٌ سح ػٍ‪ ٝ‬اٌشاث‬ ‫‪ٙ‬ش ػٕ ِب ‪ٛ‬‬ ‫اٌّ بي ‪ :1‬اٌّؤ شاد‬
‫ِؤ ش اٌ سح ػٍ‪ ٝ‬اٌشاث ‪ٌ ٌ ،‬ه ٍٕم‬ ‫٘ ٖ ِ ‪ٛٙ‬سح ٔ بء ِؤ شاد ِ زٍ خ ػٕ ِب ‪ٛ‬‬

‫ٔ شح ػٍ‪ ٝ‬اٌّض ِٓ ا ِ ٍخ اٌّزؼٍمخ ثبٌ خ اٌضا خ ‪:hover.‬‬
‫ف‬ٚ‫ِغب بد ث ٓ اٌ ش‬ ٚ :‫أ‬1 ‫ِ بي‬
‫خ‬١ ٌ‫ ث ز اَ ا‬ٍٙ٠ ْ‫ّىٓ أ‬٠ ‫ف‬ٚ ‫ٓ اٌؾ‬١‫خ ث‬ ٌّ‫ ٍّٕ أْ ا‬5 ٌ‫ ا‬ٟ ‫وّ ز و‬
:‫خ‬ ‫ٔ ء ِإ اد‬ ‫اث‬ٚ ٌ‫ ا‬ٍٝ ٗ‫م‬١‫ج‬ ٓ‫ّى‬٠ ‫ ٘ ا‬،letter-spacing
style.css
a:hover {
font-weight:bold;
color:red;
}
: ‫ ث ٌّ ز ع‬ٍٝ٠ ّ‫ و‬ٙ ٠ٚ
‫شح‬ ٌ‫ا‬ٚ ‫ف اٌى شح‬ٚ‫ اٌ ش‬:‫ة‬1 ‫ِ بي‬
‫ف‬ ‫ٌخ ا‬ ١١ ٕٙ‫ّى‬٠ ٟ‫اٌز‬ٚtext-transform ‫خ‬١ ٌ‫ ا‬ٍٝ ‫ح‬ ٔ ٕ١‫ أٌم‬5 ٌ‫ ا‬ٟ
: ‫اث‬ٚ ٌ‫ ا‬ٍٝ ‫ ً وّإ‬٠‫ّىٓ ا ز اِٗ أ‬٠ ‫ ٘ ا‬،‫ ح‬١‫اٌىج‬ٚ ‫ ح‬١ ٌ‫ٓ ا‬١‫ث‬
style.css
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
‫‪،‬‬ ‫ى ح ٓ ا ِى ٔ‪ ١‬د اٌ ِزٕ ٘‪١‬خ ٌ ِظ ث‪ ٓ١‬اٌ ‪ ِٓ ٠‬اٌ‬ ‫‪ ٟ‬اٌّض ٌ‪ّ٠ ٓ١‬ىٓ أْ‬
‫ة!‬ ‫‪ّ٠‬ىٕه أْ م‪ َٛ‬ث ٔ ء ِإ اد ِٓ اثزى ن‪،‬‬
‫اٌشاث‬ ‫ِ بي ‪ :2‬إصاٌخ اٌغ ش ِٓ أ‬

‫اٌشاث ؟‬ ‫ِٓ أ‬ ‫أص اٌ‬ ‫ٍخ ىشاساً ٘‪ ٛ‬و‬ ‫أو ش ا‬ ‫أ‬
‫ؼ ا ز اَ ِ‪ٛ‬لؼه أو ش‬ ‫اٌشاث ‪ ٗٔ ،‬ل‬ ‫ِٓ أ‬ ‫اً ل أْ ض اٌ‬ ‫ت أْ ىش‬
‫ٓ ثم‪١‬خ‬ ‫أ ٍ‪٘ ١ّ٠ ٙ‬‬ ‫‪ٛ‬ؽ ثٍ‪ ْٛ‬أص ق ‪ٚ‬ث‬ ‫ا ز ‪ٚ‬ا ٍ‪ ٝ‬أْ ‪ ٚ ٠‬اٌ‬ ‫ؼ‪ٛ‬ثخ‪ ،‬إٌ‬
‫ز‪ٚ ٝ‬اٌ ‪ ٍُ ٟ‬رٌه! ئرا أصٌذ‬ ‫ٍ‪ٙ١‬‬ ‫‪ ٍّْٛ ٠ٚ ،ٜ‬أٔ‪ ٠ ُٙ‬ز ‪ ْٛ ١‬اٌ‬ ‫ا‬ ‫إٌ ‪ٛ‬‬
‫َ ‪ ُٙ‬اٌ ا ٌّ‪ٛ‬ل ه ‪ ٚ‬ززٗ‬ ‫خ‬ ‫اٌ ‪ٚ‬اث ‪ ١ ٚ‬د أٌ‪ٛ‬أ‪ٔ ٙ‬ذ ‪ِٓ ٠‬‬ ‫ِٓ أ‬ ‫اٌ‬
‫‪ٚ‬ث‪ ٙ‬ا ٌٓ ‪ ٠‬ز ‪ٚ ١‬ا ِٓ ِؾز‪ ٠ٛ‬د ِ‪ٛ‬ل ه‪.‬‬
‫‪١‬خ‬ ‫‪ 5‬اٌ‬ ‫‪ ٟ‬اٌ‬ ‫اً‪ ،‬وّ ز و‬ ‫‪ٙ‬‬ ‫اٌ ‪ٚ‬اث‬ ‫ِٓ أ‬ ‫ٍ‪ ٝ‬أ‪ ٞ‬ي‪ ،‬ئصاٌخ اٌ‬
‫أَ ‪،‬‬ ‫إٌ‬ ‫‪ ٙ ١‬أ‬ ‫ز َ ٌزؾ ‪ ِ ٠‬ئرا و ْ ٕ٘ ن‬ ‫‪ّ٠text-decoration‬ىٕ‪ ٙ‬أْ‬
‫‪١‬خ ‪text-decoration.‬‬ ‫اٌم‪ّ١‬خ ‪ٌٍ none‬‬ ‫اٌ ٍ‪ ٟ‬لُ ث‪ٛ‬‬ ‫صاٌخ اٌ‬
‫{‪a‬‬
‫;‪text-decoration:none‬‬
‫}‬
‫ث ٌٍ اث ‪:‬‬ ‫رٌه ِ اٌؾ د ا‬ ‫‪ّ٠‬ىٕه أ‪ ً ٠‬أْ‬

: ‫ث ٌٍ اث‬ ‫رٌه ِ اٌؾ د ا‬ ْ‫ ً أ‬٠‫ّىٕه أ‬٠
style.css
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
}
a:active {
background-color: yellow;
}
a:hover {
color:red;
}

‫ٍِ‬
‫اٌ ثمخ‪ ٘ ،‬ا‬ ‫ِٓ اٌ ‪ٚ‬‬ ‫اٌ‬ ‫ٍّٕ اٌ خ اٌ ا خ‪ٚ ،‬ا ز ِٕ ث‬ ‫‪ ٘ ٟ‬ا اٌ‬
‫ز ‪ CSS ١‬أْ م ِ‪. ٙ‬‬ ‫‪٠‬غت أْ ‪١ ٠‬ه ى ح ٓ ا ِى ٔ‪ ١‬د اٌز‪ٟ‬‬
‫أ‪ٕ ٌ ٚ‬‬ ‫ِ ‪ٕ١‬خ ٌّغّ‪ ٛ‬خ ِٓ اٌ ٕ‬ ‫ؾ‬ ‫ك ٕ ٍّه و‪١‬‬ ‫اٌ‬ ‫‪ ٟ‬اٌ‬
‫ِ ‪.ٓ١‬‬
‫خ اٌــ‬ ‫ب‬ line-height
. ‫خ‬١ ٌ‫ ا ز اَ ٘ ح ا‬ٌٝ ‫اٌّض ي اٌز‬ ٛ٠ٚ ‫ٓ ا‬١‫خ ث‬ ٌّ‫ ا‬ٕٝ ٝ٘
default .html
<p>Here is some content <br /> and more <br /> and more</p>
<hr /> p.class1 {
<p class="class1">Here is some content <br /> and more <br />2.5em;
line-height: and
}
more</p> p.class2 {
line-height: 50px;
<hr /> }
p.class3 {
<p class="class2">Here is some content <br /> and more <br /> and
line-height: 300%;
more</p> }
<hr />
<p class="class3">Here is some content <br /> and more <br /> and
more</p>
style.css
p.class1 {
line-height: 2.5em;
}
p.class2 {
line-height: 50px;
}
p.class3 {
line-height: 300%;
}
list-style-position‫خ اٌــ‬ ‫ب‬
. ‫خ‬١ ٌ‫ ا ز اَ ٘ ح ا‬ٌٝ ‫اٌّض ي اٌز‬ ٛ٠ٚ ‫ل اٌم ّخ‬ِٛ ٕٝ ٝ٘
HTML
<ul id="list1">
<li>My list item</li>
<li>Another list item</li>
<li>Final list item</li>
</ul>
<ul id="list2">
</ul>
<ul id="list3">
</ul>
style.css
#list1 {
list-style-position: outside;
}
#list2 {
list-style-position: inside;
}
#list3 {
list-style-position: hanging;
}

list-style-type ‫خ اٌــ‬ ‫ب‬
. ‫خ‬١ ٌ‫ ا ز اَ ٘ ح ا‬ٌٝ ‫اٌّض ي اٌز‬ ٛ٠ٚ ُ١‫ اٌز ل‬ٛٔٚ ‫ى‬ ‫ ؾ‬ٝ٘
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
style.css
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
ol.d {list-style-type: upper -alpha;} ‫خ‬ ‫ ٔ شٔف‬ٚ ‫نٕ ػ‬

list-style-image ‫خ اٌــ‬ ‫ب‬
. ‫خ‬١ ٌ‫ ا ز اَ ٘ ح ا‬ٌٝ ‫اٌّض ي اٌز‬ ٛ٠ٚ ‫ ح‬ٛ ُ١‫اٌز ل‬ ‫ز َ ٌغ‬
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
style.css
ul
list-style-image:url('sqpurple.gif');
}
COFFE
TEE
COCA COLA
idٚ class ‫اٌز ّ ٌٍؼٕب ش‬ٚ ‫ اٌّ بثمخ‬:7 ‫اٌ سط‬
ٟ٘ ، ٕ ٌ‫ك ِٓ ا‬٠ ٚ‫ خ أ‬ّٛ‫ ِغ‬ٍٝ ِ ْ‫ أ‬ٛ ْ ١ ‫ا‬ ‫ث‬ٟ

‫ٕخ‬١ ِ ٠ ‫ٌزؾ‬id ‫د‬ ٌّ‫ا‬ٚclass ‫خ ا ز اَ اٌ د‬١ ١‫ و‬ٍٝ ‫ح‬ ٔ ٟ‫ٍٕم‬ ٌ‫ا‬
.‫ِ ز ح‬ ٌٕ
ٓ١‫ّىٕه أْ غّ ث‬٠ ١‫ل ه؟ و‬ِٛ ٟ ٓ٠ٚ ٕ ٌ‫خ ا‬١‫ٓ ثم‬ ٍ‫ ز‬٠ ْ‫ا‬ٕٛ ٌ ً‫ًٔ ِؾ ا‬ٌٛ ‫ز‬ ١‫و‬
‫؟ ٘ ٖ أِضٍخ‬ ُ١ّ ٌٗ ُ ‫و ل‬ٚ ٍ‫ ل ُ ِ ز‬ٟ ٙ ‫ خ‬ّٛ‫و ِغ‬ٚ ‫اث ِ زٍ خ‬ٚ
. ٌ‫ ٘ ا ا‬ٟ ٙ١ٍ ‫ت‬١‫ٕغ‬
"class" ‫ّ اٌؼٕب ش ثب ز اَ اٌ بد‬

ٓ١‫ اٌم ّز‬،ٗ‫او‬ٛ ٌ‫ا‬ٚ ٌ‫ ا‬، ّ‫ٕ ف ِ زٍ خ ِٓ اٌض‬ ‫اث‬ٚ ٌ‫ٓ ِٓ ا‬١‫ٕ ل ّز‬٠ ٌ ْ ‫ٌٕم ث‬
: ‫ ا اٌ ى‬ٙ‫ٔ ْ ث‬ٛ‫ زى‬HTML ٍِ ٟ
default .html
<p>‫ر‬ ‫اى‬:</p>
<ul>
<li><a href="ab.htm">‫<َ ذوّض‬/a></li>
<li><a href="cd.htm">‫< شر‬/a></li>
<li><a href="ef.htm">‫< ر‬/a></li>
</ul>
<p> ‫ ام‬:</p>
<ul>
<li><a href="gh.htm">‫< ح‬/a></li>
<li><a href="ij.htm">‫<أّ ّ ص‬/a></li>
<li><a href="kl.htm">‫< خ‬/a></li>
</ul>
‫ّ ‪ٚ‬ثم‪١‬خ‬ ‫‪ٚ ،‬ل ّخ اٌ ‪ٛ‬اوٗ ث ٌٍ‪ ْٛ‬ا‬ ‫‪ٚ‬اد ث ٌٍ‪ ْٛ‬ا‬ ‫ٔ ‪ ٠‬أْ ى‪ ْٛ‬ل ّخ ‪ٚ‬اث اٌ‬
‫جم‪ ٝ‬ث ٌٍ‪ ْٛ‬ا ص ق‪.‬‬ ‫اٌ ‪ٚ‬اث‬
‫اث ث ز اَ‬ ‫خ ٌى‬ ‫رٌه ثزؾ ‪٠‬‬ ‫ٔغ ص ٘ ا ٔم ُ اٌ ‪ٚ‬اث ئٌ‪ِ ٝ‬غّ‪ ٛ‬ز‪ّ٠ ،ٓ١‬ىٓ‬
‫‪١‬خ ‪class.‬‬ ‫اٌ‬
‫ٖ‪:‬‬ ‫د ٌٍّض ي أ‬ ‫ٌٕمُ ثزؾ ‪٠‬‬

:ٖ ‫د ٌٍّض ي أ‬ ٠ ‫ٌٕمُ ثزؾ‬
default .html
<p>‫ر‬ :</p>
<ul>
<li><a href="ab.htm" class="veg">‫< ذوّض‬/a></li>
<li><a href="cd.htm" class="veg">‫< شر‬/a></li>
<li><a href="ef.htm" class="veg">‫< ر‬/a></li>
</ul>
<p> ‫ ام‬:</p>
<ul>
<li><a href="gh.htm" class="fru">‫< ح‬/a></li>
<li><a href="ij.htm" class="fru">‫<أّ ّ ص‬/a></li>
<li><a href="kl.htm" class="fru">‫< خ‬/a></li>
</ul>
: ‫ ا اٌ ى‬ٙ‫اوٗ ث‬ٛ ٌ‫ ا‬ٚ‫اد أ‬ٚ ٌ‫خ ا‬ ‫ زج‬ٟ‫اث اٌز‬ٚ ٌٍ ‫ِؾ ح‬ ٠ ‫ْ ؾ‬٢‫ّىٓ ا‬٠
style.css
a{
color: blue;
}
a.veg {
color: #FFBB00;
}
a.fru {
color: #800000;
}
‫ِ ‪ٕ١‬خ زج ِغّ‪ ٛ‬خ ِؾ ح ث ز اَ‬ ‫ٌٕ‬ ‫‪ ٟ ٜ‬اٌّض ي‪ّ٠ ،‬ىٕه أْ ؾ‬ ‫وّ‬

‫اٌز ّ‪.ُ١‬‬ ‫اٌ ذ ‪ٍِ ٟ .classname‬‬
‫ي‪id‬‬ ‫ٌؼٕ ش ِؼ ٓ ِٓ‬ ‫ِؼشف ب‬
‫‪١‬خ‬ ‫ت ‪ ٟ‬ؾ ‪ ِ ٠‬فٌ‬ ‫ي اٌ د‪ٍ ٌ ،‬ه‬ ‫ِٓ‬ ‫خ ئٌ‪ ٝ‬غّ‪ ١‬اٌ ٕ‬ ‫ث‬
‫‪١‬خ ‪id.‬‬ ‫ي اٌ‬ ‫ِؾ ح‪ ٘ ،‬ا ‪ّ٠‬ىٓ ئٔغ صٖ ِٓ‬
‫اٌٍّ ‪ ،‬أ‪ٞ‬‬ ‫‪ ٠ ٓ٠‬ز ِ ٔٗ ‪ٔ ٟ‬‬ ‫ٕ‬ ‫َ ئِى ٔ‪١‬خ ‪ٛ ٚ‬‬ ‫‪١‬خ ‪ٛ٘id‬‬ ‫‪ ٟ‬اٌ‬ ‫اٌّّ‪١‬‬
‫ؾخ‪ ،‬و ِ ف ‪٠id‬غت أْ ‪٠‬ى‪ْٛ‬‬ ‫اٌ‬ ‫ً ‪ٚid‬ا اً ‪ٔ ٟ‬‬ ‫‪ ٓ٠‬أْ ‪ ٠‬ز ِ ِ‬ ‫‪ّ٠‬ىٓ ٌ ٕ‬
‫ح ٍ‪ِ ٝ‬ض ي ِؾزّ‬ ‫ٕ ٍٔم‪ٔ ٟ‬‬ ‫‪ ١‬رٌه ٍ‪١‬ه ا ز اَ اٌ د ‪، class‬‬ ‫ِّ‪ ١‬اً ‪ ٠ ٚ‬اً‪ ،‬أِ‬
‫ٌى‪١ ١‬خ ا ز اَ اٌّ ف ‪: id‬‬
‫‪<h1>1‬‬ ‫>‪</h1‬‬
‫‪...‬‬
‫‪<h2>1.1‬‬ ‫>‪</h2‬‬
‫‪...‬‬
‫‪<h2>1.2‬‬ ‫>‪</h2‬‬
‫‪...‬‬
‫‪<h1>2‬‬ ‫>‪</h1‬‬
‫‪...‬‬
‫‪<h2>2.1‬‬ ‫>‪</h2‬‬
‫‪...‬‬
‫‪<h3>2.1.2‬‬ ‫>‪</h3‬‬
‫‪...‬‬
‫‪ٛ‬ي‪ ِٓ ،‬اٌ ج‪ ٟ ١‬أْ‬ ‫ؾخ ئٌ‪ ٝ‬أث‪ٛ‬اة ‪ٚ‬‬ ‫ٖ ل ‪٠‬ى‪١ ٌٛ ٓ٠ٚ ٕ ْٛ‬مخ ِ م ُ اٌ‬ ‫اٌّض ي أ‬
‫ً ‪id‬وّ ‪ ٟ‬اٌّض ي ا‪:ٟ ٢‬‬ ‫ً‬ ‫ِ‬ ‫ٔؾ ٌى‬
default .html
<h1 id="c1">1 </h1>
...
<h2 id="c1-1">1.1 </h2>
...
<h2 id="c1-2">1.2 </h2>
...
<h1 id="c2">2 </h1>
...
<h2 id="c2-1">2.1 </h2>
...
<h3 id="c2-1-2">2.1.2 </h3>
...
‫ ا‬ٙ‫ ث‬CSS ٟ ‫ّىٓ ئٔغ ص رٌه‬٠ ، ّ ‫ْ ا‬ٌٍٛ ‫ْ ث‬ٛ‫ى‬٠ ْ‫غت أ‬٠ 1.2 ٌ‫اْ ا‬ٕٛ ْ‫ٌٕم أ‬
: ‫اٌ ى‬
style.css
#c1-2 {
color: red;
}

‫ِ ‪ ٓ١‬ث ز اَ ‪١ ٚ ٟ #id‬مخ‬ ‫ِ ‪ٕ١‬خ ٌ ٕ‬ ‫ٖ ‪ّ٠‬ىٓ ؾ ‪٠‬‬ ‫‪ ٟ ٜ‬اٌّض ي أ‬ ‫وّ‬

‫اٌز ّ‪.ُ١‬‬
‫ٍِ‬
‫‪ّ٠ ، idٚclass‬ىٕه ا‪ ْ٢‬أْ ؾ‬ ‫ٔ ز َ إٌّزم‪ٛٔ ِٓ ٟ‬‬ ‫ٍّٕ و‪١‬‬ ‫‪ ٘ ٟ‬ا اٌ‬
‫ِ ‪ٕ١‬خ‪.‬‬ ‫ِؾ ح ٌ ٕ‬
‫‪ ٠ ٌّٙ HTML ٟ ٓ٠‬ز ِ ْ وض‪ ١‬اً ِ‬ ‫ح أل ة ٍ‪ٕ ٝ‬‬ ‫ك‪ٍٕ ،‬م‪ٔ ٟ‬‬ ‫اٌ‬ ‫‪ ٟ‬اٌ‬
‫>‪<div>.ٚCSS: <span‬‬
divٚ span َ‫ّ اٌؼٕب ش ثب ز ا‬ :8 ‫اٌ سط‬
ّ٘ٚ ‫ ك‬ٌٍٛ ‫خ‬١ٍ‫ى‬١٘ ‫ئٔ ء‬ٚ ٕ ٌ‫ ز ِ ْ ٌغّ ا‬٠<div> ٚ<span> ْ‫ا‬ ٕ ٌ‫ا‬
id.ٚ class ٓ١‫ز‬١ ٌ‫ ز ِ ْ ِ ً ِ ا‬٠
ْ‫ا‬ ٕ ٌ‫ّ ا‬ٙٔ <div> ٚ<span> َ‫ ا ز ا‬ٍٝ ‫ت‬٠ ‫ح ٓ ل‬ ٔ ٟ‫ ٍٕم‬، ٌ‫ ٘ اا‬ٟ

CSS. ِ ِ ‫خ ٕ ِ ز‬١ّ٘‫ا وض أ‬
<span> ٕ ٌ ‫ ث‬١ّ‫اٌزغ‬ 
<div> ٕ ٌ ‫ ث‬١ّ‫اٌزغ‬ 
<span> ‫ثبٌؼٕ ش‬ ّ ‫اٌز‬

‫مخ‬١ ٌٍٛ ً ١ ١ ٠ ٞ ٌ‫ا‬ٚ ٠ ‫اٌّؾ‬ ٕ ٌ‫ٗ ا‬١ّ ْ‫ّىٓ أ‬٠ ِ ٛ٘<span> ٕ ٌ‫ا‬
ٌٕ‫اء ِؾ ح ِٓ ا‬ ‫ أ‬ٍٝ ‫ّىٓ ا ز اِٗ ٔ ء ِإ اد‬٠ CSS <span> ِ ٓ‫ ٌى‬، ٙ ٔ
.‫ ك‬ٌٛ‫ ا‬ٟ
:ٓ١ٍ‫ٓ أى‬١ِ ‫ ثٕغ‬ٌٙ ‫ِٓ ٍّخ ل‬ ‫ الزج‬ٛ٘ ‫ِض ي ٘ ا‬
default .html
<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>
ٍٙٔٛٔ ْ ‫ ث‬ٌٕٙ‫ ا‬ٟ ٌَٕٛ‫َ ا‬ ‫ا‬ٛ ‫ي‬ٛ ٓ١ٍ‫أى‬ ١ ٌ‫ ِ ل ٌٗ ا‬ٍٝ ‫ أْ ٔإو‬٠ ٔ ٕٔ‫ٌٕم أ‬
‫ خ‬ٌٙ ٕ ‫أ‬span ‫ و‬،<span> ّٟ ٚ ٓ١‫اٌىٍّ د ث‬ ٚ ٓ‫ّى‬٠ ‫ ا اٌ ع‬ٌٙ ، ّ ‫ث‬
: CSS‫ي‬ ِٓ ٌٙ ‫خ‬ ‫ ّىٕٕ ث رٌه ِٓ ئ‬ٟ‫اٌز‬ٚclass
default .html
<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
:‫ اٌّز ٍمخ ث ٌّض ي‬CSS ِ‫ا‬ٚ‫أ‬
style.css
span.benefit {
color:red;
}

‫خ ا ٌ‪ٛ‬اْ ٍ‪ٌ<span> ٝ‬ىٓ و أْ ا ز اَ‬ ‫ث ٌ ج ‪ّ٠‬ىٕه ا ز اَ اٌّ ف ‪id‬‬
‫ٖ ٍ‪١‬ه أْ‬ ‫ؾخ اٌ‪ٛ‬ا ح‪ٌ ٌ ،‬ه ‪ ٟ‬اٌّض ي أ‬ ‫اٌّ ف ‪٠‬غت أْ ‪٠‬ى‪ ٌّ ْٛ‬ح ‪ٚ‬ا ح ‪ ٟ‬اٌ‬
‫‪.ٟ‬‬ ‫اٌّ‬ ‫ٍّذ ‪ ٟ‬اٌ‬ ‫>‪<span‬وّ‬ ‫د ِزّ‪ ١‬ح ٌى‬ ‫سِ‬ ‫ز َ‬
‫ثبٌؼٕ ش >‪<div‬‬ ‫اٌز ّ‬

‫>‪<div‬‬ ‫وّ أ‪٠‬ذ ‪ ٟ‬اٌّض ي اٌ ثك‪ ،‬اٌ ٕ‬ ‫>‪ ٠ <span‬ز َ ‪ ٟ‬اٌ ٕ‬ ‫اٌ ٕ‬
‫‪.‬‬ ‫‪ ٠‬ز َ ٌزغّ‪ ١‬اٌ ٕ‬
‫ث ز اَ >‪ ّ ٠<div‬ثٕ اٌ ‪٠‬مخ‪ٌٍٕ ،‬م‪ٟ‬‬ ‫٘ ا ٘‪ ٛ‬ا ز ف اٌ‪ ، ١ ٛ‬غّ‪ ١‬اٌ ٕ‬

‫اة اٌز‪ٟ‬‬ ‫ٔ ح ٍ‪ِ ٝ‬ض ي ٌم ّز‪ ٓ١‬ؾ‪ ْ ٠ٛ‬أ ّ ء اٌ ؤ ء ا ِ ‪٠‬ى‪ِ ٓ١١‬م ّخ ت ا‬
‫‪ٕ٠‬زّ‪: ٌٙ ْٛ‬‬
‫>"‪<div id="democrats‬‬
‫>‪<ul‬‬
‫>‪ </li‬زاّن ِ روس >‪<li‬‬
‫>‪ </li‬رٌ زوٍِ>‪<li‬‬
‫>‪ ُ </li‬م ْ ذٌ>‪<li‬‬
‫>‪</li‬ى ْذوُ ّظ ُ>‪<li‬‬
‫م ر ز>‪<li‬‬ ‫>‪</li‬‬
‫>‪ </li‬م ْ ُ>‪<li‬‬
‫>‪</ul‬‬
‫>‪</div‬‬
‫>"‪<div id="republicans‬‬
‫>‪<ul‬‬
‫>‪</li‬دواَ أَشّ ور>‪<li‬‬
‫>‪</li‬رَ رد ّ نظ ُ>‪<li‬‬
‫>‪ </li‬زاىذ رد>‪<li‬‬
‫>‪</li‬روّ ىذ رَغ ُ>‪<li‬‬
‫>‪ </li‬رج ع>‪<li‬‬
‫ع>‪<li‬‬ ‫>‪ </li‬رج د‬
‫>‪</ul‬‬
‫>‪</div‬‬
:‫مخ‬٠ ٌ‫ا‬ ٕ‫ٖ ث‬ ‫ اٌّض ي أ‬ٟ ّ‫ و‬١ّ‫ ٕ ز َ اٌزغ‬CSS ٍِ ٟ ٚ
style.css
#democrats {
background:blue;
}
#republicans {
background:red;
}
: ٍٝ٠ ّ‫ ث ٌّ ز ع و‬ٙ ٠ٚ
‫خ‬١ ٍ ٌ‫ْ ا‬ٌٛ ٠ ‫ ثز‬،ً‫ا‬ ١ ‫<ث ى ث‬span> ٚ<div> ِٕ‫ثمخ ا ز ا‬ ‫ ا ِضٍخ‬ٟ

‫ ٌٓ ٔزؾ س‬،‫ ي‬ٞ‫ أ‬ٍٝ ،‫ د اٌّزم ِخ‬١ٔ ‫ ِٓ ا ِى‬١‫م ِ اٌىض‬٠ ْ‫ٓ أ‬٠ ٕ ٌٍ ٓ‫ّى‬٠ ، ٌٕ‫ا‬ٚ
.ٟ ً ‫م‬ ٛ ٌّٛ‫ي ٘ ا ا‬ٚ ٕ‫ ٕز‬،ً١ٌ ‫ٓ٘ ا‬
‫ٍِ‬
‫‪div.ٚspan ٓ٠‬‬ ‫‪ٍّ ،8ٚ 7‬ذ ‪ٛ‬ي إٌّزم‪ٚclass ٚid ٟ‬اٌ ٕ‬ ‫‪ ٟ‬اٌ‬
‫‪ٛ‬ح‬ ‫ٍِ د ‪ٖ ٘ٚ ، HTML‬‬ ‫ٕ‬ ‫اً ٍ‪ ٝ‬غّ‪ ٚ ١‬ؾ ‪ ٠‬و‬ ‫‪٠‬غت أْ ى‪ ْٛ‬ا‪ ْ٢‬ل‬
‫‪ 9‬زز ف ٍ‪ّٛٔ ٝ‬رط اٌ ٕ ‪ٚ‬ق‪.‬‬ ‫وج‪ ١‬ح ‪ ٟ‬ا غ ٖ ئ م ْ‪ ٟ ، CSS‬اٌ‬
‫اٌ سط ‪ّٛٔ :9‬رج اٌ ٕ ‪ٚ‬ق‬
‫‪ّٛٔ ، HTML‬رط‬ ‫ي ٕ‬ ‫ِٓ‬ ‫اٌ ٕ ‪٠‬ك اٌز‪ٕ ٟ‬‬ ‫ّٔ‪ٛ‬رط اٌ ٕ ‪ٚ‬ق ‪٠ CSS ٟ‬‬
‫‪ ٠‬اٌؾ ‪١‬خ‪ ،‬ا ؿ ‪ ،‬اٌؾ ‪ٚ ٛ‬اٌّؾز‪ ٠ٛ‬د ٌى‬ ‫ٍخ ‪ٛ‬ي‬ ‫اٌ ٕ ‪ٚ‬ق ‪٠‬ؾ‪ ٞٛ‬أ‪ ١ ً ٠‬اد ِ‬
‫اء ّٔ‪ٛ‬رط اٌ ٕ ‪ٚ‬ق‪:‬‬ ‫‪ ٟ ،‬اٌّض ي اٌز‪١ ٛ‬ؾ‪ ٟ‬أ ٔ ٖ ٕ ع أ‬ ‫ٕ‬
‫‪CSS‬‬ ‫ّٔ‪ٛ‬رج اٌ ٕ ‪ٚ‬ق‬
‫اٌ ‪ٟ‬ء‪ٌ ٌ ،‬ه ٌٕمُ ث ز اَ ّٔ‪ٛ‬رط اٌ ٕ ‪ٚ‬ق ‪ِ ٟ‬ض ي ٍ‪ٟ‬‬ ‫ٖ ‪٠‬ج ‪ ِ ٚ‬ثىً ث‬ ‫ُأ‬ ‫اٌ‬
‫ٕ ٔ ً ِمزج ً ِٓ اٌّ‪١‬ض ق اٌ ٌّ‪ٟ‬‬ ‫‪ٚ HTML ٟ ،‬‬ ‫إٌ ‪ٛ‬‬ ‫ث ز اَ ٕ‪ٛ‬اْ ‪ٚ‬ث‬
‫ٌؾم‪ٛ‬ق ا ٔ ْ‪:‬‬
default .html
<h1>Article 1:</h1>
<p>All human beings are born free

and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>
‫ ا‬ٙ‫ جؼ ث‬٠ ْ‫ّىٓ ٌٍّض ي أ‬٠ ‫ؽ‬ٛ ٌ‫ي ا‬ٛ ‫ِ د‬ٍٛ ٌّ‫ا‬ ‫ ث‬٠ ‫ ؾ‬ٚ ْ‫ا‬ٌٛ ‫ا‬ ‫خث‬ ‫ث‬
: ‫اٌ ى‬
: ‫ ا اٌ ى‬ٙ‫ ث‬ٙ ١ ٓ٠ ٕ ٌٍ ‫ق‬ٚ ٕ ٌ‫رط ا‬ّٛٔ ،<p>ٚ<h1> ٓ٠ ٕ ٞٛ‫ؾ‬٠ ‫اٌّض ي‬

‫‪ِ HTML ٟ‬ؾ ؽ ث ٕ ‪٠‬ك‪ ،‬اٌ ٕ ‪٠‬ك‬ ‫ٕ‬ ‫ُ ‪ ٛ٠‬ؼ و‬ ‫ز‪ ٌٛ ٝ‬ث ‪ ٜ‬اٌّض ي ِ م اً‪ ،‬اٌ‬
‫ي‪CSS.‬‬ ‫‪ِٓ ٍٙ٠‬‬ ‫‪ّ٠‬ىٓ‬
‫اٌز‪ ٟ‬زؾىُ ث ٌ ٕ ‪٠‬ك اٌّ زٍ خ ٘‪ٟ ،borderٚmargin ٚ: padding ٟ‬‬ ‫اٌ‬

‫اٌض خ‪.‬‬ ‫م‪ٕ ٓ١‬ز ِ ِ ٘ ٖ اٌ‬ ‫‪ ٓ١‬اٌ‬ ‫اٌ‬
‫‪ّٛٔ :10‬رط اٌ ٕ ‪ٚ‬ق ‪padding ٚmargin‬‬ ‫اٌ‬ ‫‪‬‬
‫‪ّٛٔ :11‬رط اٌ ٕ ‪ٚ‬ق ‪border‬‬ ‫اٌ‬ ‫‪‬‬
‫‪ ٓ١‬ززّىٓ ِٓ اٌزؾىُ ثّٕ‪ٛ‬رط اٌ ٕ ‪ٚ‬ق ‪ ٚ‬م‪ َٛ‬ثز ‪ ٍِ ٠‬د ‪HTML‬‬ ‫ٕ ِ ٕز‪ ِٓ ٟٙ‬اٌ‬
‫ٍ‪ ٝ‬اٌغ ا‪ٚ‬ي ‪ٟ‬‬ ‫ٍ‪ٛ‬ة اٌم ‪ ُ٠‬اٌ ‪ ٠ ٞ‬زّ‬ ‫لخ ِم ٔخ ِ ا ز اَ ا‬ ‫‪ٚ‬أوض‬ ‫ث ى أ‬
‫‪HTML.‬‬
‫ٍِ‬
‫ح أل ة ٍ‪ ٝ‬و‪١ ١‬خ‬ ‫اٌم ِخ ٍٕم‪ٔ ٟ‬‬ ‫ٍّذ ّٔ‪ٛ‬رط اٌ ٕ ‪ٚ‬ق‪ ٟ ،‬اٌ ‪ٚ‬‬ ‫‪ ٘ ٟ‬ا اٌ‬
‫ئٔ ء ‪ٚ‬اٌزؾىُ ثّٕ‪ٛ‬رط اٌ ٕ ‪ٚ‬ق‪.‬‬
‫‪ٛ‬‬ ‫اٌ سط ‪ :10‬اٌ ب خ ‪ٚ‬اٌ‬
‫ح ٍ‪ ٝ‬و‪١ ١‬خ‬ ‫ٍٕم‪ٔ ٟ‬‬ ‫ٍ‪ّٛٔ ٝ‬رط اٌ ٕ ‪ٚ‬ق‪ ٘ ٟ ،‬اٌ‬ ‫ٕ‬ ‫‪ٟ‬‬ ‫اٌّ‬ ‫‪ ٟ‬اٌ‬
‫‪١‬خ ‪padding.ٚmargin‬‬ ‫ثز ‪ ١١‬ئ ا اد‬ ‫ى اٌ ٕ‬ ‫‪١١‬‬
‫ِ‬ ‫‪١‬خ ‪ٕ ٌ margin‬‬ ‫‪٠‬‬ ‫‪‬‬
‫ِ‬ ‫‪١‬خ ‪ٕ ٌ padding‬‬ ‫‪٠‬‬ ‫‪‬‬
‫خ ‪ٌ margin‬ؼٕ ش ِب‬ ‫ب‬ ‫ؼ‬

‫‪، bottom‬‬ ‫ٍ‪ ، topٝ‬ا‬ ‫‪ ، left‬ا‬ ‫‪ٛ‬أت‪ ،‬اٌ‪ ، rightٓ١ّ١‬اٌ‪١‬‬ ‫ٌٗ أ ث‬ ‫ٕ‬ ‫و‬
‫اٌّؾ ر‪ ،ٌٗ ٞ‬أ‪ٚ‬‬ ‫ٓ اٌ ٕ‬ ‫ٔت ِٓ ‪ٛ‬أت اٌ ٕ‬ ‫‪١‬خ ‪ margin‬زؾىُ ثج و‬ ‫اٌ‬
‫‪ ِٓ ٠ ٌٍّ 9‬اٌز‪١ ٛ‬ؼ‪.‬‬ ‫ُ اٌز‪١ ٛ‬ؾ‪ ٟ ٟ‬اٌ‬ ‫ئٌ‪ ٝ‬اٌ‬ ‫ؾخ‪ ،‬أٔ‬ ‫ئؿ اٌ‬
‫ؾخ ٔ ‪ ٙ‬أ‪ٞ‬‬ ‫ح ٍ‪ ٝ‬و‪١ ١‬خ ؾ ‪ ٠‬اٌؾ ‪١‬خ "‪ٌٍ "margin‬‬ ‫‪ ٟ‬اٌّض ي ا ‪ٚ‬ي ٌٍٕم‪ٔ ٟ‬‬
‫ؾخ‪.‬‬ ‫ٔ ‪ٌٍ ٠‬ؾ ‪١‬خ أْ ى‪ ٟ ْٛ‬اٌ‬ ‫>‪ ،<body‬اٌ ُ أ ٔ ٖ ‪ ٛ٠‬ؼ و‪١‬‬ ‫ٌٍ ٕ‬
:ٌٟ ‫ ٕىزت اٌز‬CSS ٍِ ٟ
style.css
body {
margin-top: 100px; 6
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
:‫ك‬١ٔ‫أ‬ ‫ا‬ٚ ٟ ٛ ٌ‫ و ٘ ٖ ا‬١ّ‫ّىٕٕ غ‬٠ ٚ‫أ‬
style.css
body {
margin: 100px 40px 10px 70px;
}
‫خ ٌى‬١ ‫ اٌؾ‬٠ ‫ّىٕه ؾ‬٠ ً ‫ ّض‬، ٕ ٌ‫مخ ٌّ ُ ا‬٠ ٌ‫خ ثٕ ا‬١ ‫ اٌؾ‬٠ ‫ّىٕه ؾ‬٠
<p>: ٕ ٌٍ ‫خ‬١ ٌٕ‫اٌ م اد ا‬
style.css
body {
}
p{
}
‫ ٌؼٕ ش ِب‬padding ‫خ‬ ‫ب‬ ‫ؼ‬
ٓ١‫خ ث‬١ ٌّ‫ ا‬ٟ ‫إ‬٠ ٛ ‫اٌؾ‬ٚ "ٗ ٔ ٕ ٌ‫ا‬ ‫ ا‬ٟ ِ" ٗٔ ‫ٕٗ ث‬ ١‫ّىٓ اٌز ج‬٠ ٛ ‫اٌؾ‬
. ‫ا ؿ‬ٚ ٕ ٌ‫ د ا‬٠ٛ‫ٓ ِؾز‬١‫ٔ ٗ ث‬ ٕ ٌ‫ ا‬ٟ ‫خ‬ ٌّ‫ؾ ا‬٠ ‫ ث‬، ٢‫ا‬ٚ ٕ ٌ‫ا‬
:‫خ‬١ ٍ ْ‫ا‬ٌٛ‫ أ‬ٌٙ ٓ٠ٚ ٕ ٌ‫ش و ا‬١ ١ ‫ؾٗ ثّض ي ث‬١ ٛ ٓ‫ّى‬٠ "padding" ٛ ‫ا ز اَ اٌؾ‬
style.css
h1 {
background: yellow;
}
h2 {
background: orange;
}
: ٍٝ٠ ّ‫ ٌز ِ ز ع و‬ٙ ٠ٚ
:‫خ‬ٙ ‫اْ ِٓ و‬ٕٛ ٌ ‫ ث‬١‫ؾ‬٠ ٞ ٌ‫ ا‬ٍٟ ‫اٌ ا‬ ٕ ٌ‫غُ ا‬ ١١ ٓ‫ّى‬٠ ْ‫ا‬ٕٛ ‫ ٌى‬ٛ ‫ اٌؾ‬٠ ‫ثزؾ‬
style.css
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
‫ٍِ‬
‫ح‬ ‫اٌز ٌ‪ٍٕ ٟ‬م‪ٔ ٟ‬‬ ‫أٔذ ‪ ٟ‬ؿ ‪٠‬مه ْ زمٓ ا ز اَ ّٔ‪ٛ‬رط اٌ ٕ ‪ٚ‬ق ‪ ٟ ، CSSٟ‬اٌ‬
‫‪.‬‬ ‫ٔ ز ِ‪ٌٕ ٙ‬ؾ أ ى ي اٌ ٕ‬ ‫ٔؾ ٌ‪ ٙ‬أٌ‪ٛ‬أ ً ِ زٍ خ ‪ٚ‬و‪١‬‬ ‫أل ة ٍ‪ ٝ‬ا ؿ اد ‪ٚ‬و‪١‬‬
‫بساد ‪: Borders11‬‬ ‫ّٔ‪ٛ‬رج اٌ ٕ ‪ٚ‬ق ‪ -‬ا‬
‫ث‪CSS ،ٓ١ ١ ٓ١‬‬ ‫ز َ ٌٍ ‪ٕ٠‬خ أ‪ٌٍ ٚ‬‬ ‫اع ِ زٍ خ‪ ،‬م‬ ‫اٌغ ا‪ٚ‬ي ‪ّ٠‬ىٓ ا ز اِ‪ٙ‬‬
‫ؾزه‪.‬‬ ‫ز َ ا ؿ اد ‪ٟ‬‬ ‫ِزٕ ٘‪١‬خ ٕ ِ‬ ‫‪١‬ه ‪ ١‬اد‬
‫‪border-width‬‬
‫‪border-color‬‬
‫‪border-style‬‬
‫أِضٍخ ؿ اد‬
‫‪border‬‬
‫بس"‪"border-width‬‬ ‫ّبوخ ا‬
‫ي‬ ‫ي اٌم‪ّ١‬خ ‪ٚborder-width‬اٌ ‪ّ٠ ٞ‬ىٓ ؾ ‪ ٠‬ل‪ّ١‬زٗ ِٓ‬ ‫ؾ ِٓ‬ ‫ّ وخ ا ؿ‬
‫ُ‬ ‫‪ ،‬اٌ‬ ‫ّىٗ ث ٌجى‬ ‫ي ل‪ّ١‬خ لّ‪١‬خ ؾ‬ ‫اٌىٍّ د ‪ ، thickٚmedium ٚ thin‬أ‪ِٓ ٚ‬‬
‫اٌز‪١ ٛ‬ؾ‪٠ ٟ‬ج‪ ٖ ٘ ٓ١‬اٌم‪ٔٚ ُ١‬ز غ‪: ٙ‬‬
‫بساد"‪"border-color‬‬ ‫أٌ‪ٛ‬اْ ا‬
‫‪١‬خ ٘‪ ٟ‬ل‪ ُ١‬ا ٌ‪ٛ‬اْ اٌ ‪٠‬خ ِض‬ ‫‪١‬خ ‪ border-color‬ؾ ٌ‪ ْٛ‬ا ؿ ح‪ ،‬ل‪ّ١‬خ ٘ ٖ اٌ‬ ‫اٌ‬
‫"‪"rgb(123,123,123)" ٚ"#123456‬أ‪ ٚ‬أ ّ ء ا ٌ‪ٛ‬اْ ِض ‪"yellow".‬‬
‫أٔ‪ٛ‬ا اٌ ا‪ٚ‬ي "‪"border-style‬‬

‫ز ِٕ‪ ٟ ، ٙ‬اٌّض ي اٌز‪١ ٛ‬ؾ‪ ٟ‬أ ٔ ٖ ٕ٘ ن ‪8‬‬ ‫ٕ٘ ن أٔ‪ٛ‬ا ِ زٍ خ ِٓ ا ؿ اد ‪ّ٠‬ىٕه أْ‬
‫ز َ اٌٍ‪ْٛ‬‬ ‫‪ ،5.5‬و ا ِضٍخ اٌّ ‪ ٚ‬خ‬ ‫‪ ٙ‬ئو جٍ‪ٛ‬‬ ‫أٔ‪ٛ‬ا ِٓ ا ؿ اد وّ ‪٠‬‬
‫عا ؿ‬ ‫ز ‪١‬‬ ‫"‪ٚ"gold‬ل‪ّ١‬خ ّ وخ ا ؿ ِؾ ح ث ٌم‪ّ١‬خ "‪ ٚ "thick‬و أٔه‬
‫ث ٌ‪ٛ‬اْ ‪ ّ ٚ‬وخ ِ زٍ خ‪.‬‬
‫ءا ؿ ‪.‬‬ ‫‪ ٠‬ئ‬ ‫ز َ ِٕ‬ ‫اٌم‪ none ُ١‬أ‪ّ٠ hiddem ٚ‬ىٓ أْ‬
‫بساد‬ ‫أِ ٍخ‬

،‫ي ِ زٍ خ‬ٚ‫ا‬ ‫ٔ ء‬ ‫ اٌج‬ٙ ‫ ِ ث‬ٙ ٚ ٓ‫ّى‬٠ ٖ ‫ رو د أ‬ٟ‫اٌض خ اٌز‬ ٌ‫ا‬
<h1> ٕ ٌٍ ‫ا ِ زٍ خ ِٓ ا ؿ اد‬ٛٔ‫ أ‬٠ ‫مخ لّٕ ثزؾ‬١ ٚ ٍٝ ‫ح‬ ٔ ٟ‫ؼ رٌه ٍٕم‬١ ٛ‫ٌز‬
:‫ح‬ ‫ د اٌّز‬١ٔ ‫ ؼ ا ِى‬ٛ٠ ‫ٍخ ٌىٓ اٌّض ي‬١ّ ْٛ‫ى‬ ‫غخ ل‬١‫ إٌز‬،<p>ٚ<ul> ٚ<h2> ٚ
: ٍٝ٠ ّ‫ و‬١‫ز‬ ‫ا‬ ٍِ ٚ‫ُ ا‬١ّ ‫اٌز‬ ٍِ ٝ ٌٝ ‫ اٌز‬ٛ‫ىزت اٌى‬٠ٚ
style.css
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p{
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
‫‪ ٙ ٠ٚ‬ث ٌّ ز ع وّ ‪: ٍٝ٠‬‬
،ٍٞٛ ٌ‫ ٌ ؿ ا‬top َ ‫ ز ز‬، ‫ا ح ِٓ ا ؿ‬ٚ ‫خ‬ٙ‫خ ز ٍك ثغ‬١ ٠ ‫ ً ؾ‬٠‫ّىٕه أ‬٠
:‫ري‬ ‫خ‬١ ١‫ ؼ و‬ٛ٠ ‫٘ ا ِض ي‬ٚ ،ّٓ٠ ٌright ٚ ، ٠ ٌleft ٚ ،ٍٟ ٌ‫ٌ ؿ ا‬bottom ٚ
style.css
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}

"border" ‫ب‬ ٌ‫ّ و ا‬

ٟ ‫ي اٌّ زٍ خ‬ٚ‫اٌغ ا‬ ٓ١‫ّىٓ أْ غّ ث‬٠ ،‫ِ زٍ خ‬ ِ ‫ اٌؾ ي‬ٛ٘ ّ‫و‬
:‫ ٘ ا اٌّض ي‬ٍٝ ‫ح‬ ٔ ٟ‫ أٌم‬،‫ا ح‬ٚ ‫خ‬١
style.css
p{
border-width: 1px;
border-style: solid;
border-color: blue;
}
:‫٘ ٘ى ا‬ ‫ّىٓ ا ز‬٠

‫٘ ٘ى ا‪:‬‬ ‫‪ّ٠‬ىٓ ا ز‬
‫{‪p‬‬
‫;‪border: 1px solid blue‬‬
‫}‬
‫ٍِ‬
‫ِؾ ‪ ِٓ ٚ‬اٌ ‪ ١‬اد‪.‬‬ ‫ٍّذ أْ ا ؿ اد ‪ٌٙ CSS ٟ‬‬ ‫‪ ٘ ٟ‬ا اٌ‬
‫‪.‬‬ ‫ح ٍ‪ّٛٔ ٝ‬رط اٌ ٕ ‪ٚ‬ق ‪ٚ‬ث ٌزؾ ‪ ٠‬اٌ ع ‪ٚ‬ا‬ ‫اٌز ٌ‪ٍٕ ٟ‬م‪ٔ ٟ‬‬ ‫‪ ٟ‬اٌ‬
‫اٌؼشع‬ٚ ‫ ا س ب‬:12 ‫اٌ سط‬
ٌ‫ ٘ ا ا‬ٟ ، ّٙ١ِ ٠ ‫ لّٕ ثز‬ٟ‫اٌز‬ ٕ ٌ‫ا‬ ‫ اً ث ِ أث‬١‫زُ وض‬ٙٔ ٌُ ْ٢‫ ا‬ٝ‫ز‬
. ٕ ٌ‫ع ا‬ ٚ ‫ ا‬٠ ‫خ ؾ‬١ ١‫ و‬ٍٝ ‫ح‬ ٔ ٟ‫ٍٕم‬
width
height
"width"‫اٌؼشع‬
. ‫ِؾ‬ ٕ ٌ ًٕ١ ِ ً ‫ ؾ‬width ‫خ‬١ ٌ‫ا‬
:ً ٔ ٗ١ ‫ّىٓ أْ ٔىزت‬٠ ً‫ل‬ٚ ٕ ٌٕ َ ‫م‬٠ ٖ ٔ ‫ أ‬١ ‫اٌّض ي اٌج‬
style.css
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}

"height" ‫ا س ب‬
‫ ا‬ٍٝ ١ ‫ّىٓ اٌز‬٠ ،ٗ ٠ٛ‫ق ؾ ٖ ِؾز‬ٚ ٕ ٌ‫ا‬ ‫ٕ أْ ا‬ ٖ ‫ اٌّض ي أ‬ٟ
ٍ‫ج‬٠ ‫ اٌّض ي‬ٟ ‫ق‬ٚ ٕ ٌ‫ا‬ ‫ا‬ ‫ ّض ً ٌٕغ ة أْ ٔغ‬،height ‫خ‬١ ٌ‫ث ز اَ ا‬ ٕ ٌ‫ا‬
: ‫ ثى‬500
style.css
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
ٍٝ٠ ّ‫ اٌّ ز ع و‬ٝ ٙ ٠ٚ

‫‪ ٝ ٙ ٠ٚ‬اٌّ ز ع وّ ‪ٍٝ٠‬‬
‫ٍِ‬
‫‪ّٛٔ ٜ‬رط‬ ‫‪ ٕ١‬ن ِم ِخ ٌّٕ‪ٛ‬رط اٌ ٕ ‪ٚ‬ق ‪ ، CSSٟ‬وّ‬ ‫‪12 ٚ11 ،10 ،9‬أ‬ ‫‪ ٟ‬اٌ ‪ٚ‬‬
‫اٌ ٕ ‪ٚ‬ق ‪١ ٠‬ه اٌىض‪ ِٓ ١‬اٌ ‪ ١‬اد اٌغ ‪ ٠‬ح‪ ،‬ثّ لّذ ث ز اَ اٌغ ا‪ٚ‬ي ‪HTML ٟ‬‬
‫ِ‪ُ١‬‬ ‫ِ‪ٌ ،ُ١‬ىٓ ا‪ّٛٔٚ CSS ِٚ ْ٢‬رط اٌ ٕ ‪ٚ‬ق ‪٠‬غت أْ زّىٓ ِٓ ئٔ ء‬ ‫ٔ ء اٌز‬
‫لخ ‪ ٚ‬ز‪ٛ‬ا ك أوض ِ اٌّ ‪ ١٠‬اٌم‪١ ١‬خ ٌّٕ ّخ ‪W3C.‬‬ ‫أٔ‪١‬مخ ‪ٚ‬أوض‬
‫اٌ سط ‪ :13‬ؼ‪ ُ ٛ‬اٌؼٕب ش)‪(floats‬‬
‫‪١‬خ ‪ ٘ ،float‬ا ‪ ٟٕ ٠‬أْ‬ ‫ث ز اَ اٌ‬ ‫‪ّ٠‬ىٓ ‪ ّٙ٠ٛ‬ئٌ‪ ٝ‬اٌ‪ ٓ١ّ١‬أ‪ ٚ‬اٌ‪١‬‬ ‫اٌ ٕ‬
‫ؾخ‪ ،‬أ‪ ِٓ ٚ‬ز ‪ َٛ‬ئٌ‪ ٝ‬ئ ‪ٜ‬‬ ‫ِٓ اٌ‬ ‫اٌ ٕ ‪ٚ‬ق ‪ِٚ‬ؾز‪ ٗ ٠ٛ‬ز ‪ َٛ‬ئٌ‪ ٝ‬اٌ‪ ٓ١ّ١‬أ‪ ٚ‬اٌ‪١‬‬
‫‪ٛ‬ي ّٔ‪ٛ‬رط اٌ ٕ ‪ٚ‬ق‪ ،‬اٌّض ي‬ ‫‪٠ ٌٍّ 9‬‬ ‫اٌ‬ ‫‪ ،‬أٔ‬ ‫ٕ ‪ٚ‬ق آ‬ ‫ّٓ ٕ‬ ‫اٌغ‪ٙ‬ز‪ٓ١‬‬
‫‪:‬‬ ‫اٌز ٌ‪ ٛ٠ ٟ‬ؼ ِج أ ‪ ُ٠ٛ‬اٌ ٕ‬
‫‪ ٛ‬ح ز ‪ ٙ‬إٌز‪١‬غخ ث‪ ٙ‬ا اٌ ى ‪:‬‬ ‫‪ٛ‬ي‬ ‫‪ٍ٠‬ز‬ ‫ئرا و ْ ٌ ‪ِ ٕ٠‬ض ً ٔ‬

‫ّىٓ ؼ رٌه؟‬ ‫و‬
‫ٖ ‪١‬ى‪ ْٛ‬ث‪ ٙ‬ا اٌ ى ‪:‬‬ ‫‪ٌٍّ HTML‬ض ي أ‬ ‫ٍِ‬

: ‫ ا اٌ ى‬ٙ‫ْ ث‬ٛ‫ى‬١ ٖ ‫ ٌٍّض ي أ‬HTML ٍِ
default .html
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p>
‫ق‬ٚ ٕ ٌ‫ع ا‬ ٠ ‫ ً ؾ‬ٚ‫ًٕ أ‬١ٍ ٙ‫ ث‬١‫ؾ‬٠ ٌٕ‫ا‬ٚ ١ٌ‫ ا‬ٌٝ‫ ئ‬ٛ ‫ ح‬ٛ ٌ‫ا‬ ‫ ٔغ‬ٟ‫ٌى‬
left:‫ّخ‬١‫اٌم‬float ‫خ‬١ ٌٍ ٟ ٔ ُ ‫ ح‬ٛ ٌ ‫ ث‬١‫اٌّؾ‬
style.css
#picture {
float:left;
width: 100px;
}

‫ ا ػّ ح‬:‫ِ بي آ ش‬
ْ‫ه ثج ؿخ أ‬١ٍ ّٛ ‫ ٔ ء‬،‫ؾخ‬ ٌ‫ ا‬ٟ ‫ّ ح‬ ٌ ِٙ‫ّىٓ ا ز ا‬٠ ُ٠ٛ ‫خ اٌز‬١
:ٍٟ٠ ّ‫<و‬div> َ‫ ث ز ا‬HTML ٟ ‫ّ ح‬ ٌ ‫خ‬١ٍ‫ى‬١٘
default .html
<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
</div>
<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
١ٌ‫ ا‬ٌٝ‫ّ ح ئ‬ ‫َ و ا‬ٛ ٔ ْ‫ّىٕٕ ثج ؿخ أ‬٠ٚ %33 ٛ٘ ٠ ٔ ٞ ٌ‫ ا‬ّٛ ٌ‫ع ا‬ ْ٢‫ا‬

float: ‫خ‬١ ٌ‫ث ز اَ ا‬
: ٍٝ٠ ّ‫ و‬css ‫اٌـ‬ ٍِ ٚ‫ُ ا‬١ّ ‫اٌز‬ ٍِ ٝ ْٛ‫ى‬٠ٚ

style.css
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}

none. ٚ‫أ‬right ٚ‫أ‬left ‫ّخ‬١‫ّىٓ أْ ؾّ اٌم‬٠float
clear ‫خ‬ ‫اٌ ب‬

.ّٗ٠ٛ ُ ‫ؾخ‬ ٌ‫ا‬ ٕ ٞ ‫مخ‬ ٌ‫ا‬ ٕ ٌ‫خ ا‬١ ٛ‫ ز َ ٌٍزؾىُ ث‬clear ‫خ‬١
ٌٝ‫ئ‬ ٔ‫ أ‬،ّٗ٠ٛ ُ ٞ ٌ‫ا‬ ٕ ٌ‫ي ا‬ٛ ‫خ‬ ٌّ‫ ا‬ٟ ‫مخ ؾ ن ٌز‬ ٌ‫ا‬ ٕ ٌ‫ً ا‬١ ‫ٍم‬
. ‫ز‬١ ١‫ ح ث‬ٛ ‫ً ثغ ٔت‬١ ‫ٍم‬ ‫ل اٌز‬ ٌٕ‫ ا‬ٜ ‫ش‬١ ٖ ‫اٌّض ي أ‬
‫ اٌّج أ ٕ٘ ئرا‬،none ٚ‫أ‬both ٚ‫أ‬right ٚ‫أ‬left ‫ّخ‬١‫ أْ ؾّ اٌم‬ٕٙ‫ّى‬٠clear ‫خ‬١ ٌ‫ا‬

‫ز جؼ أ‬ ٕ ٌٍ ‫خ‬٠ٍٛ ٌ‫خ ا‬١ ‫" ِض ً ْ اٌؾ‬both" ‫ّخ‬١‫ل‬clear ‫خ‬١ ٌ ٕ ٚ
.ٍٖٛ ٠ ٕ ٌ ‫خ‬١ٍ ٌ‫خ ا‬١ ‫اٌؾ‬
default .html
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes,

CSS:ٟ ‫خ‬١ ٌ‫خ ٘ ٖ ا‬ ‫ّىٕه ئ‬٠ ‫ ح‬ٛ ٌ‫ي ا‬ٛ ٌٕ‫ا‬ ‫ٍز‬٠ ْ‫ أ‬ٟ ‫ت‬ ٌُ ‫ئرا‬
CSS:ٟ ‫خ‬١ ٌ‫خ ٘ ٖ ا‬ ‫ّىٕه ئ‬٠ ‫ ح‬ٛ ٌ‫ي ا‬ٛ ٌٕ‫ا‬ ‫ٍز‬٠ ْ‫ أ‬ٟ ‫ت‬ ٌُ ‫ئرا‬
style.css
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}

‫ٍِ‬
‫ك ٍٕم‪ٟ‬‬ ‫اٌ‬ ‫‪ ٟ ،‬اٌ‬ ‫‪١‬خ اٌ ٕ‬ ‫د وض‪ ١‬ح‪ ٠ٚ ،‬ز َ ٌجً ِ ‪ٚ‬‬ ‫اٌز ‪ٟ ١ ِ ُ٠ٛ‬‬
‫‪ِ ٟ‬ى ْ ِ ث ى ٔ ج‪ ٟ‬أ‪ٍ ِ ٚ‬ك‪.‬‬ ‫اٌ ٕ‬ ‫ح ٍ‪ ٝ‬و‪١ ١‬خ ‪ٚ‬‬ ‫ٔ‬
‫اٌ سط ‪ ٚ :14‬ؼ خ اٌؼٕب ش‬

‫‪ ٟ‬اٌّى ْ اٌ ‪ِٓ ٖ ٠ ٞ‬‬ ‫أ‪ٕ ٞ‬‬ ‫‪ّ٠ CSS ٟ‬ىٓ أْ‬ ‫‪١‬خ اٌ ٕ‬ ‫ث ز اَ ‪ٚ‬‬
‫‪١‬خ‬ ‫‪ٚ ،)13‬‬ ‫رٌه أ‪( ً ٠‬ئل أ اٌ‬ ‫ن ٍ‪ٝ‬‬ ‫أْ ‪٠‬‬ ‫ؾخ ‪ّ٠ٚ‬ىٓ ٌز ‪ ُ٠ٛ‬اٌ ٕ‬ ‫اٌ‬
‫ِ‪ِ ُ١‬زم ِخ ‪١ٌ ٚ‬خ اٌ لخ‪.‬‬ ‫‪١ ٠ CSS ٟ‬ه اٌىض‪ ِٓ ١‬اٌ ‪ ١‬اد ٔ ء‬ ‫اٌ ٕ‬
‫‪:‬‬ ‫ٕز ٍّٗ ‪ ٟ‬اٌ‬ ‫٘ اِ‬
‫‪CSS ٟ‬‬ ‫‪١‬خ اٌ ٕ‬ ‫ِج ب ‪ٚ‬‬
‫اٌّ ٍمخ‬ ‫‪١‬خ اٌ ٕ‬ ‫‪ٚ‬‬
‫إٌ ج‪١‬خ‬ ‫‪١‬خ اٌ ٕ‬ ‫‪ٚ‬‬
‫‪CSS‬‬ ‫ِ ب ئ ‪ ٚ‬ؼ خ اٌؼٕب ش‬

‫ؼ ِٕ مخ ث‪ ٙ‬ا إٌ َ ‪:‬‬ ‫‪ ٛ‬أْ ٔ ح اٌّز‬
‫ئ ا‪١‬د‬ ‫ٕ ‪ٚ‬ق ٍ‪ ٝ‬أ‬ ‫أ‪ٞ‬‬ ‫ز ‪ٚ ١‬‬ ‫‪ ٛ٘ CSS ٟ‬أٔه‬ ‫‪١‬خ اٌ ٕ‬ ‫ِج أ ‪ٚ‬‬
‫‪ِ َ ٔٚ‬ؾ ‪.‬‬
‫‪-9‬‬ ‫ٕ‪ٛ‬أً ‪ِ ٟ‬ى ْ ِؾ ‪ ،‬ث ز اَ ّٔ‪ٛ‬رط اٌ ٕ ‪ٚ‬ق ‪ -‬ئل أ اٌ‬ ‫ٌٕم ث ٕٔ ٔ ‪ ٠‬أْ ٔ‬
‫‪ّ٠‬ىٓ ٌٍ ٕ‪ٛ‬اْ أْ ‪ ٙ ٠‬ث‪ ٙ‬ا اٌ ى ‪:‬‬
‫ِٓ‬ ‫ؾخ‪ 200ٚ ،‬ثى‬ ‫ِٓ أ ٍ‪ ٝ‬اٌ‬ ‫ئرا أ ٔ ٌٍ ٕ‪ٛ‬اْ أْ ‪٠‬ى‪ِٛ ْٛ‬ل ٗ ٍ‪ ٝ‬ث ‪ 100‬ثى‬
‫‪٠‬مخ‪:‬‬ ‫ؾخ ٍ‪ ٕ١‬أْ ٔىزت أ‪ٚ‬اِ ‪ CSS‬ث‪ ٖ ٙ‬اٌ‬ ‫اٌ‬ ‫‪٠‬‬
‫{ ‪h1‬‬
‫;‪position:absolute‬‬
‫;‪top: 100px‬‬
‫;‪left: 200px‬‬
‫}‬
‫‪ٚ‬إٌز‪١‬غخ زى‪ ْٛ‬ث‪ ٙ‬ا اٌ ى ‪:‬‬

‫ء‪ٛ٘ٚ ،‬‬ ‫‪١‬ش‬ ‫اٌ ٕ‬ ‫اً ٌ‪ٛ‬‬ ‫‪ CSS ٟ‬أ ٍ‪ٛ‬ة ل‪١‬ك‬ ‫‪١‬خ اٌ ٕ‬ ‫‪ٜٚ‬‬ ‫وّ‬
‫‪.‬‬ ‫خ أ‪ ٚ‬أ‪ٟ ٞ‬ء آ‬ ‫رٌه أ‪ ٚ‬اٌ ‪ ٛ‬اٌ‬ ‫أ ‪ ٙ‬ثىض‪ ِٓ ١‬غ ثخ ا ز اَ اٌغ ا‪ٚ‬ي ٌ‬
‫ ؼ خ اٌؼٕب ش اٌّ ٍمخ‬ٚ
‫ز ن ا ً ث‬٠ ٗٔ‫ أ‬ٟٕ ٠ ‫ ٘ ا‬،‫ؾخ‬ ٌ‫ ا‬ٟ ‫خ‬ ِ ٠ ‫ث ى ِ ٍك‬ ٚ ٕ ٞ‫أ‬
.‫ث ى ِ ٍك‬ ٛ٠ ْ‫أ‬
،absolute ‫ّخ‬١‫اٌم‬position ‫خ‬١ ٌ‫ ا‬ٟ ْ‫غت أ‬٠ ‫ث ى ِ ٍك‬ ٕ ٞ‫أ‬ ٌٛ

.‫ق‬ٚ ٕ ٌ‫خ ا‬١ ٚ ٠ ‫ٌزؾ‬bottom ٚtop ٚright ٚleft ٌ‫ ً ا ز اَ ا‬٠‫ّىٓ أ‬٠ٚ
:‫ؾخ‬ ٌٍ ‫ث خ‬ ‫خ ا‬٠‫ا‬ٚ ٌ‫ ا‬ٟ ‫ك‬٠ ٕ ‫أ ث‬ ٛ‫خ اٌّ ٍمخ لّٕ ث‬١ ٌٍٛ ‫وّض ي‬
style.css
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
‫‪ٚ‬ث ‪ ٝ ٙ‬اٌّ ز ع وّ ‪: ٍٝ٠‬‬
‫ ؼ خ اٌؼٕب ش إٌغ خ‬ٚ
‫ز ف‬ ‫ ا‬، relative ‫ّخ‬١‫اٌم‬position ‫خ‬١ ٌ‫ ا‬ٟ ْ‫ه أ‬١ٍ ٟ‫ث ى ٔ ج‬ ٕ ٌ‫ا‬ ٌٛ
.ٗ ٔ ٕ ٌ‫ا‬ ٚ ِ ِ ‫خ اٌز‬١ ١‫ و‬ٟ٘ ‫اٌّ ٍمخ‬ٚ ‫خ‬١‫خ إٌ ج‬١ ٌٛ‫ٓ ا‬١‫ث‬
‫ أٔه ئرا‬ٟٕ ٠ ‫ ٘ ا‬،‫ؾخ‬ ٌ‫ ا‬ٟ ٍٟ ‫ٗا‬ ٚ ‫ أ‬ٍٝ ‫خ ؾ ت‬١‫إٌ ج‬ ٕ ٌ‫خ ا‬١ ٚ

‫ث‬ ٌٕ‫خ ِٓ ا‬ ِ ١ ٗٔ ‫ ا‬ٚ‫ أ‬ٍٝ ‫ ا‬ٚ‫أ‬ ١ٌ‫ ا‬ٚ‫ٓ أ‬١ّ١ٌ‫ ا‬ٌٝ‫ئ‬ ٕ ٌ‫وذ ا‬
. ‫ ِى ٔٗ اٌّؾ‬ٟ ٗ ٚ
،‫ؾخ‬ ٌ‫ ا‬ٟ ٟ‫ ث ى ٔ ج‬ٛ ‫س‬ ٚ ‫ّىٕٕ أْ ٔغ ة‬٠ ‫خ‬١‫خ إٌ ج‬١ ٌٛ‫ ا‬ٍٝ ‫وّض ي‬
:‫ؾخ‬ ٌ‫خ ِٓ ا‬١ٍ ‫ ا‬ٕٙ‫ أِ و‬ٟ ‫خ‬ ‫خ‬ ِ ‫ ز ن‬ٛ ٌ‫أْ ا‬
style.css
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}

‫ٍِ‬
‫‪ٔ ١‬ه‬ ‫‪ِ ٟ ٙ‬ى ْ ِؾ ‪ ،‬ؿ ‪٠‬مز ْ‬ ‫‪ٚٚ‬‬ ‫‪ ُ٠ٛ‬اٌ ٕ‬ ‫‪ ٓ١‬اٌ ثم‪ٍّٕ ٓ١‬‬ ‫‪ ٟ‬اٌ‬
‫ٍ‪ٛ‬ة اٌم ‪ ُ٠‬اٌّزّض‬ ‫ؾ د ِ‪ٛ‬ل ه ث ‪ ْٚ‬اٌؾ خ ئٌ‪ ٝ‬ا ز اَ ا‬ ‫اٌىض‪ ِٓ ١‬ا ِى ٔ‪ ١‬د ٌجٕ ء‬
‫لخ‬ ‫خ ِ اٌغ ا‪ٚ‬ي ‪ ، HTMLٟ‬ا ز ا ث ً ِٓ رٌه ‪ ٟٙ CSS‬أوض‬ ‫‪ ٟ‬اٌ ‪ ٛ‬اٌ‬
‫ٍ‪١‬ه اٌىض‪ ِٓ ١‬اٌغ‪. ٙ‬‬ ‫‪ٟ‬ا ا ح‪ٛٚ‬‬ ‫‪١‬ه اٌىض‪ ِٓ ١‬اٌ ‪ ١‬اد اٌّزم ِخ‪ ٟ٘ٚ ،‬أ ‪ٙ‬‬ ‫‪ٚ‬‬
‫مخ ثب ز اَ ‪z-index‬‬ ‫مخ ‪ٛ‬ق‬ ‫اٌ سط ‪:15‬‬
‫‪ٚ‬اٌ ّك‪ٚ ،‬ل ؾ ٕ ثّ ‪ ٗ١‬اٌى ‪٠‬خ ٓ‬ ‫اٌض س‪ ,‬اٌ ع ‪ٚ‬ا‬ ‫‪ّ٠‬ىٕ‪ ٙ‬أْ زؾىُ ث ث‬
‫ِ زٍ خ ‪ٟ‬‬ ‫ٕ‬ ‫ٔ‬ ‫ٕز ٍُ و‪١‬‬ ‫اٌ ثمخ‪ ٘ ٟ ،‬ااٌ‬ ‫‪ ٟ‬اٌ ‪ٚ‬‬ ‫اٌ ع ‪ٚ‬ا‬
‫‪.‬‬ ‫‪ٛ ٙ‬ق ث‬ ‫ث‬ ‫ٌى‪ٔ ٟ‬‬ ‫‪١‬ت اٌ ٕ‬ ‫٘ ا ‪ٟٕ ٠‬‬ ‫ؿجم د‪ ،‬ث ز‬
‫ّؼ ٌٍ ٕ‬ ‫‪١‬خ‬ ‫ِ لُ )‪ ٘ٚ ، (z-index‬ا اٌ‬ ‫‪ٕ ٌٟ‬‬ ‫ٌ‪ ٙ‬ا اٌ ع ‪ّ٠‬ىٕه أْ‬
‫اٌز‪ ٟ‬راد اٌ لُ ا ٔ‪.ٝ‬‬ ‫ٍ‪ ٝ‬ث ْ ى‪ٛ ْٛ‬ق اٌ ٕ‬ ‫راد اٌ لُ ا‬
‫‪ ٌٍ ٛ‬جخ اٌ‪ ٛ‬ق‪٠ ،‬غت أْ ٔ ‪ٌ ٟ‬ى ‪ ٚ‬لخ لُ ‪z-index:‬‬ ‫‪١‬ت‬ ‫ٌٕم ث ٕٔ ٔ ‪٠‬‬
‫إٌز‪١‬غخ ث ز اَ ّ خ‬ ‫ل َ ِزز ث خ (ِٓ ‪ 1‬ئٌ‪ٌ )5 ٝ‬ىٓ ‪ّ٠‬ىٓ ؾم‪١‬ك ٔ‬ ‫‪ ٖ ٘ ٟ‬اٌؾ ٌخ ا‬

‫‪.‬‬ ‫أ ل َ ِ زٍ خ‪ ،‬اٌّ‪ ٛ٘ ُٙ‬اٌز ‪١‬ت اٌّز‬
‫‪١‬ت اٌج ل د‪:‬‬ ‫اٌّض ي أ ٔ ٖ ‪ ٛ٠‬ؼ و‪١ ١‬خ‬

style.css
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
: ٗ‫ه‬ٚ ‫ ٓش ن غخؼشض‬ٚٔ
‫‪ ٙ ٠ٚ‬ث ٌّ ز ع وّ ‪: ٍٝ٠‬‬
‫‪ٛ‬ق‬ ‫اٌ ‪ٛ‬‬ ‫‪ٚ ٙ‬ا ِى ٔ‪ ١‬د وض‪ ١‬ح‪ّ٠ ،‬ىٕه أْ‬ ‫‪ ٙ‬اٌج‬ ‫‪ٛ‬ق ث‬ ‫‪١‬ت اٌ ٕ‬
‫‪ ...‬ئٌ ‪.‬‬ ‫ٔ ً ‪ٛ‬ق ٔ‬ ‫‪ٛ‬ق اٌ ‪ ٛ‬أ‪ٚ‬‬ ‫أ‪ ٚ‬إٌ‬ ‫إٌ‬
‫ٍِ‬
‫ة ا ز اَ ‪ ٔ z-index‬ء‬ ‫اٌ جم د ‪ّ٠‬ىٓ ا ز اِ‪ ٟ ٙ‬اٌىض‪ ِٓ ١‬اٌؾ د‪ّ ،‬ض ً‬
‫خ ‪ٗ١ ٠ٚ‬‬ ‫اٌّ‪ٛ‬ل أوض‬ ‫ِإ اد ٍ‪ ٝ‬اٌ ٕ ‪ ٓ٠ٚ‬ث ً ِٓ ا ز اَ اٌ ‪ ٙ ، ٛ‬ا ‪٠‬غ‬
‫خ ٌٍ ‪ِ ٟ ٛٙ‬ؾ و د اٌجؾش‪.‬‬
‫اٌ سط ‪ :16‬اٌّؼب ش اٌم ب خ‬
‫اٌّ ‪١٠‬‬ ‫ِٕ ّخ ‪ W3C‬أ‪ّ ِٕ ٟ٘World Wide Web Consortium, ٚ‬خ ِ زمٍخ‬
‫اٌزمٕ‪١‬خ ٌ جىخ اٌ‪٠ٛ‬ت (ِض ي‪٠ ِ ،) ٘ ١ ٚXML ،CSS ،: HTML‬ى ‪ ٛ ٚ‬ذ ‪ّ ِٕٚ‬خ‬
‫جىخ‬ ‫ن ‪ّ ِٕ ٟ‬خ ‪ٚ W3C‬ا مذ ٍ‪ ٝ‬أْ ِ زمج‬ ‫و د وٍ‪ٙ‬‬ ‫ِ‪ٛ‬ص‪ ِٓ ٘ ١ ٚ ٠‬اٌ‬
‫اٌ‪٠ٛ‬ت ‪٠‬ىّٓ ‪ ٟ‬اٌّ ‪ ١٠‬اٌم‪١ ١‬خ‪.‬‬
‫ف أْ ٕ٘ ن ا زّ ي وج‪ ١‬ث ‪ٛٙ‬‬ ‫ٔذ ‪ ٟ‬اٌ ٌت‬ ‫ّ‪ ُ١‬اٌّ‪ٛ‬ل‬ ‫ثذ‬ ‫ئرا جك ٌه أْ‬
‫ؾ‪١‬ؼ ‪ ٟ‬و‬ ‫ؾ د ِ زٍ خ‪ٚ ،‬ئٔ ء ِ‪ٛ‬ل ‪ ٙ ٠‬ث ى‬ ‫‪ِ ٟ‬ز‬ ‫اٌّ‪ٛ‬ل ث ى ِ زٍ‬
‫ثه‪.‬‬ ‫ؾ د اٌؾ ‪٠‬ضخ اٌ‪ َٛ١‬ل ‪ ٠‬ز‪ٍٙ‬ه اٌىض‪ ِٓ ١‬اٌ‪ٛ‬لذ ‪٠ٚ‬ض‪ ١‬أ‬ ‫اٌّز‬
‫اٌ ى ح ِٓ ‪ ٛ ٚ‬اٌّ ‪ ١٠‬اٌم‪١ ١‬خ اٌّز ك ٍ‪ ٛ ٚ ٛ٘ ٙ١‬مٕ‪ ١‬د ‪٠ٚ‬ت ِ‪ ٛ‬ح‪ ٘ ،‬ا ‪ ٟٕ ٠‬أْ‬
‫ؾد‬ ‫ِ ‪ ٛ‬اٌّ‪ٛ‬ل ئرا ل َ ث ٔ ء ِ‪ٛ‬ل ‪ ٍُ ٠ ٛٙ‬أٔٗ ‪ ٙ ١‬ث ٌ ى اٌّ ٍ‪ٛ‬ة ‪ ٟ‬و اٌّز‬
‫أْ م‪ َٛ‬ثب ز اَ اٌّؼب ش اٌم ب خ ‪ ٚ‬م‪ َٛ‬ثبٌز و ِٓ أْ‬ ‫‪ٚ‬أٔ ّخ اٌز ‪ٌ ٌ ، ١‬ه ٔ‬
‫ٍِ بد ‪ CSS‬اٌز لّذ ثىزبثز‪ٙ‬ب ز‪ٛ‬ا ك ِ ٘ ٖ اٌّؼب ش‪..‬‬
‫ِ لك‪CSS‬‬
‫ٍّ‪١‬خ ٍُ ِ ‪ CSS ١٠‬ل ِذ ِٕ ّخ ‪ W3C‬ثز ‪ ٠ٛ‬أ اح ل‪١‬ك م‪ َٛ‬ثم اءح ٍِ د‬ ‫ٌزج‬
‫‪.‬‬ ‫‪٠ CSS‬ؾ‪ ٞٛ‬أ‪ٞ‬‬ ‫ء ‪ٚ‬اٌزؾ ‪ ٠‬اد ئْ و ْ ٍِ‬ ‫‪١‬ه إٌز ظ ِ ا‬ ‫‪ٚ CSS‬‬
‫ح ِٓ ٘ ٖ‬ ‫ؾخ ٍِ د ‪ِ CSS‬ج‬ ‫ٍ‪١‬ه ا ِ ‪ّ٠‬ىٕه أْ ز و ثٕ ه ِٓ‬ ‫‪ٌٚ‬ى‪ٔ ٟ‬ج‬

‫ٍ‪ ٝ‬ص " ل‪١‬ك"‬ ‫ثّ‪ٛ‬ل ه ‪ٚ‬ا‬ ‫‪ CSS‬اٌ‬ ‫ّ‪ٛ‬اْ ٍِ‬ ‫ؾخ‪ ،‬ثج ؿخ‬ ‫اٌ‬
‫ء ئْ ‪ ٚ‬د ‪.‬‬ ‫فا‬ ‫‪ ٚ‬زٕزم ئٌ‪ِٛ ٝ‬ل ‪ٌ W3C‬ز ‪ ٜ‬إٌز‪١‬غخ ‪ٚ‬‬
‫‪http://www.html.net/site/style/screen.css‬‬
‫‪ِٛ ٟ ٙ‬ل ه‬ ‫ء ز ‪ٌ ٙ‬ه ٘ ٖ اٌ ‪ ٛ‬ح ‪ٚ‬اٌز‪ّ٠ ٟ‬ىٕه أْ‬ ‫ئرا ٌُ ‪٠‬غ اٌّ لك أ‪٠‬خ أ‬
‫ز َ اٌّ ‪ ١٠‬اٌم‪١ ١‬خ‪:‬‬ ‫ٌزج‪ ٓ١‬ث ٔه‬
‫اٌّ لك ‪ّ٠‬ىٓ ئ‪٠‬غ ٖ ٍ‪ ٘ ٝ‬ا اٌ اث ‪: http://jigsaw.w3.org/css-validator/‬‬
‫س ؿ ق ‪ّ٠‬ىٓ‬ ‫خ ‪ ِٓ 3‬اٌ ػ ) اْ ٕ٘ ن‬ ‫ٔ ِٓ لج ( ‪ ٝ‬اٌ‬ ‫جك ‪ٚ‬ل ا‬

‫ؾخ ‪ 3 ( HTML‬ؿ ق ٌىز ثخ اٌــ ‪) STYLE‬‬ ‫ز ِ‪ٌ ٙ‬ز ‪ٟ CSS ١‬‬ ‫أْ‬
‫‪٠‬مخ اٌض ٌضخ‪ٟ٘ٚ ،‬‬ ‫‪ ٚ‬خ أ ٔ ٖ‪ٔٚ ،‬ؾٓ ٕٔ ؼ ث ْ و ‪ ٚ‬ز َ اٌ‬ ‫قِ‬ ‫٘ ٖ اٌ‬
‫) ‪ٚ‬ل لّٕ ‪ٝ‬‬ ‫ِٕ‬ ‫‪ٍِ ٟ CSS‬‬ ‫‪ ( .‬أْ‬ ‫ِٕ‬ ‫‪ٍِ ٟ CSS‬‬ ‫أْ‬
‫اْ ٘ ٖ ٘‪ٟ‬‬ ‫ٔ اٌ‪ٝ‬‬ ‫‪ ٚ‬جك اْ ا‬ ‫‪٠‬مخ ث ٌز‬ ‫ػ ٘ ح اٌ‬ ‫‪ٛ‬ي اٌ ثمخ ث‬ ‫اٌ‬
‫‪٠ ٟ‬ؾ‪ ٞٛ‬أ‪ٚ‬اِ ‪. CSS‬‬ ‫اث ٌٍّ‬ ‫‪ ٟ٘ٚ ،‬أْ م‪ َٛ‬ث‪ٛ‬‬ ‫‪٠‬مخ ا‬ ‫اٌ‬
‫‪ِٚ ،.css‬ض اٌٍّ د‬ ‫مخ‬ ‫ٔ ‪ ٠ ٟ‬ز َ اٌ‬ ‫‪ ٛ٘ ٟ‬ثج ؿخ ٍِ‬ ‫اٌ‬ ‫اٌٍّ‬
‫اٌ ٍت‪.‬‬ ‫ٗ ‪ِٛ ٚ ِ ٟ‬ل ه أ‪ ٍٝ ٚ‬اٌم‬ ‫‪ّ٠ ٜ‬ىٕه أْ‬ ‫ا‬
‫‪ٌ ١‬خ‬ ‫ز اَ ا‪ٚ‬‬ ‫‪٠‬مخ اٌض ٔ‪١‬خ‬ ‫ػ اٌ‬ ‫ؾ د اٌم ِخ ‪ٛ‬ف ٔم‪ َٛ‬ث‬ ‫‪ ٝ ٚ‬اٌ‬
‫‪١‬خ ‪ٖ ٘ style‬‬ ‫‪ HTML‬ث ز اَ ‪ ُ ٚ‬ا‪ٚ‬‬ ‫ّذ ٍِ‬ ‫اٌز ّ‪ٝ٘ٚ css ُ١‬‬
‫‪ ٝ‬اَ اي‬ ‫ا‬ ‫ٍِ‬ ‫ز َ ‪ <style> ُ ٚ‬ا‬ ‫ؿ ‪٠‬مخ ِ زٍ خ ث ٔ‪ٙ‬‬
style ‫خ‬١ ٚ‫ ُ ا‬ٚ َ‫ ث ز ا‬HTML ٍِ ّٓ : ‫خ‬١ٔ ‫مخ اٌض‬٠ ٌ‫ا‬
'background-color'‫خ‬ ‫ب‬
. ٕ ٞ‫خ أ‬١ ٍ ٌْٛ ‫ ؾ‬background-color ‫خ‬١
ٍّٙ‫ؾخ ث و‬ ٌ‫خ ا‬١ ٍ ١١ ‫ ٌ ٌه ٌز‬، HTML ‫مخ‬١ ٚ ‫ د‬٠ٛ‫ ُ و ِؾز‬٠<body> ٕ ٌ‫ا‬

<body>. ٕ ٌ‫ ا‬ٍٝ background-color ‫خ‬١ ٔ ْ‫غت أ‬٠
ٟ ، ٛ ٌٕ‫ا‬ٚ ٓ٠ٚ ٕ ٌ‫ ِض ا‬ٜ ‫أ‬ ٕ ٍٝ ‫خ‬١ ٍ ٌ‫ْ ا‬ٌٛ ‫خ‬١ ١ ً ٠‫ّىٕه أ‬٠
ٛ‫زُ وز ثخ اٌى‬٠ ‫ٍخ‬١ ‫ٌز‬ٚ <h1>.ٚ<body> ٞ ٕ ٌ ‫خ‬١ ٍ ْ‫ا‬ٌٛ‫ أ‬١‫اٌّض ي أ ٔ ٖ لّٕ ث ز‬
: html ‫اٌــ‬ ٍِ ٝ ٌٝ ‫اٌز‬
: html ‫اٌــ‬ ٍِ ٝ ٌٝ ‫ اٌز‬ٛ‫زُ وز ثخ اٌى‬٠ ‫ٍخ‬١ ‫ٌز‬ٚ
<html>
<head>
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
</body>
</html>
‫ خ ٘ ِخ‬ٛ‫ٍِؾ‬
‫‪١‬خ‬ ‫ؾخ ث وٍّ‪٠ ٙ‬غت أْ ٔ‬ ‫ٍ ‪١‬خ اٌ‬ ‫إٔٔ ثز ‪ٌ ١‬ز ‪١١‬‬ ‫ٍِؾ‪ ٛ‬خ ٘ ِخ ‪:‬‬
‫ٍ ‪١‬خ اٌّ ز‪ ٜٛ‬ا ‪ٚ‬ي ‪ ٝ‬اٌىز ثخ‬ ‫‪ٌ ٚ <body>.‬ز ‪١١‬‬ ‫‪ ٍٝ background-color‬اٌ ٕ‬
‫ٍ ‪١‬خ‬ ‫‪ٌ ٚ <h1>.‬ز ‪١١‬‬ ‫‪١‬خ ‪ ٍٝ background-color‬اٌ ٕ‬ ‫)‪٠ (h1‬غت أْ ٔ‬
‫‪. <p>.‬‬ ‫‪١‬خ ‪ ٍٝ background-color‬اٌ ٕ‬ ‫اٌ م ح ث وٍّ‪٠ ٙ‬غت أْ ٔ‬
‫‪ٙ‬ش ثبٌّغزؼشع وّب ٍ‪: ٝ‬‬ ‫اٌــ ‪html‬‬ ‫‪ٚ‬ثىزبثخ اٌى‪ ٛ‬اٌغبثك ‪ٍِ ٝ‬‬
"background-image" ‫سح و ٍ خ‬ٛ ٌ‫ا‬
. ٕ ٞ ‫خ‬١ ٍ ‫ ح و‬ٛ ٌٛ َ ‫ ز‬background-image ‫خ‬١
ٍٝ ‫ ح ٌزغ ة ثٕ ه‬ٛ ٌ‫ّىٕه ئٔ اي ا‬٠ ،ٖ ٔ ‫ اٌّض ي أ‬ٟ ‫ا خ‬ ‫ ح‬ٛ َ ‫ّض ً لّٕ ث ز‬

ٞ‫ّىٕه ا ز اَ أ‬٠ ٚ‫ أ‬،‫ صن‬ٙ ٟ ٙ ‫ا‬ٚ ّٓ٠ ‫ا‬ ٌ ‫ ح ث‬ٛ ٌ‫ ا‬ٍٝ ٌ ‫ لُ ث‬،‫خثه‬
.‫ ح ٕ جه‬ٛ
ٕ ٌٍ background-image ‫خ‬١ ١ ‫ؾخ لُ ثز‬ ٌٍ ‫خ‬١ ٍ ‫ ح اٌ ا خ و‬ٛ ‫ي‬

html : ‫اٌـ‬ ٍِ ٝ ٌٝ ‫ اٌز‬ٛ‫لُ ثىز ثخ اٌى‬ٚ ‫ ح‬ٛ ٌ‫ا‬ ِ ٚ<body>
<html>
<head>
body {background-image:url("butterfly.gif" )}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
‫ ٘ ا‬،url("butterfly.gif") ‫ ا اٌ ى‬ٙ‫ ح ث‬ٛ ٌ‫ا‬ ِ ٔ ١‫و‬ :ٗ‫أزج‬

‫ّىٕه أْ ؾ‬٠ ، ‫ اَ اي‬ٝ ‫ا‬ ٍِ ِ ٍ‫اٌّغ‬ ٟٔ ‫ذ‬ ٚ ‫ ح‬ٛ ٌ‫ أْ ا‬ٟٕ ٠
ٚ‫أ‬url("../images/butterfly.gif") َ‫ ث ز ا‬ٜ ‫ ِغٍ اد أ‬ٟ ٛ ٌ‫ا‬ ِ
: url("http://www.html.net/butterfly.gif"). ٌٍٍّ ِ ‫اْ اٌى‬ٕٛ ٌ‫ ا‬ٝ‫ز‬
"background-repeat"‫سح اٌ ٍ خ‬ٛ ‫ىشاس‬
‫ؾخ؟‬ ٌ‫ و ِ ا‬ٟ ‫ً ٌز‬١‫أ م‬ٚ ً١ ‫أ‬ ‫ ح اٌ ا خ زى‬ٛ ْ‫ٖ أ‬ ‫ اٌّض ي أ‬ٟ ‫ذ‬ ٘
.‫ ح‬ٛ ٌ‫ زؾىُ ثزى ا ا‬background-repeat ‫خ‬١ ٌ‫ا‬
‫ ت‬ٛ‫انم‬ ٕ‫ان‬ ‫ي ل‬
Background-repeat: repeat-x ًٛ‫ْذ ان ل ان ٕسة خخ شس أ م‬
background-repeat: repeat-y ًٚ‫ْذ ان ل ان ٕسة خخ شس ػ ٕد‬
background-repeat: repeat ًٚ‫ً ٔػ ٕد‬ٛ‫ْذ ان ل ان ٕسة خخ شس أ م‬
background-repeat: no-repeat ٘ ‫ْذ ان ل نٍ حخ شس‬
:: ‫ ا اٌ ى‬ٙ‫اِ ث‬ٚ ‫غت أْ ىزت ا‬٠ ‫خ‬١ ٍ ٌ‫ ح ا‬ٛ ‫ِض ً ٌزى ا‬
<html>
<head>
body
background-image:url("butterfly.gif");
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
:: ‫ ا اٌ ى‬ٙ‫اِ ث‬ٚ ‫غت أْ ىزت ا‬٠ ‫خ‬١ ٍ ٌ‫ ح ا‬ٛ ‫ِض ً ٌزغٕت ى ا‬
<html>
<head>
body
background-image:url("butterfly.gif" );
}
</style>
</head>
<body>
<p>By default, a background image will be repeated both

vertically and horizontally.</p>
</body>
</html>
‫‪ٛ‬سح اٌ ٍ خ "‪"background-attachment‬‬ ‫ذ‬
‫‪ ٛ‬ح اٌ ٍ ‪١‬خ ثزخ أ‪ِ ٚ‬زؾ وخ‬ ‫‪١‬خ ‪ background-attachment‬ؾ ِ ئرا و ٔذ‬ ‫اٌ‬
‫‪.‬‬ ‫ِ ِؾز‪ ٠ٛ‬د اٌ ٕ‬
‫ؾخ‪ ،‬ث‪ ّٕ١‬اٌ ‪ ٛ‬ح‬ ‫ٕ ِ ‪٠‬م‪ َٛ‬اٌم ب ثزؾ ‪٠‬ه اٌ‬ ‫اٌ ‪ ٛ‬ح اٌض ثزخ ٌٓ زؾ ن ِ إٌ‬
‫ؾخ ثّؾز‪. ٙ ٠ٛ‬‬ ‫اٌّزؾ وخ ززؾ ن ِ اٌ‬
‫‪١‬خ ‪،background-attachment‬‬ ‫‪ٌ ٙ‬‬ ‫ٌٍم‪ ُ١‬اٌز‪ّ٠ ٟ‬ىٕه ‪ٚ‬‬ ‫‪ ٟ‬اٌغ ‪ٚ‬ي أ ٔ ٖ ٍِ‬
‫ز ف ث‪ ٓ١‬اٌ ‪ ٛ‬ح اٌض ثزخ ‪ٚ‬اٌّزؾ وخ‪.‬‬ ‫ا‬ ‫٘ ا ِضٍخ ‪ٚ‬‬
‫اٌم‪ّ١‬خ‬ ‫اٌ‪ٛ‬‬ ‫ِض ي‬

‫‪Background-attachment: scroll‬‬ ‫ؾخ‬ ‫اٌ ‪ ٛ‬ح ززؾ ن ِ اٌ‬ ‫٘ اٌّض ي‬
‫‪Background-attachment: fixed‬‬ ‫اٌ ‪ ٛ‬ح زجم‪ ٝ‬ثزخ‬ ‫٘ اٌّض ي‬
‫‪ ٛ‬ح اٌ ٍ ‪١‬خ‪:‬‬ ‫اٌّض ي ا ٔ ٖ ‪٠‬ج‪ ٓ١‬و‪١ ١‬خ ا ز‪ ١‬اٌم‪ّ١‬خ إٌّ جخ ٌزضج‪١‬ذ‬

:‫خ‬١ ٍ ٌ‫ ح ا‬ٛ ‫ذ‬١‫ّخ إٌّ جخ ٌزضج‬١‫ اٌم‬١‫خ ا ز‬١ ١‫ٓ و‬١‫ج‬٠ ٖ ٔ ‫اٌّض ي ا‬
<html>
<head>
Body {
h1 {
color: #990000;
}
</style>
</head>
</body>
</html>
‫‪ٙ ٚ‬ش ‪ ٝ‬اٌّغزؼشع وّب ٍ‪: ٝ‬‬
‫‪ٛ‬سح اٌ ٍ خ"‪"background-position‬‬ ‫ِىبْ‬
‫‪١‬خ ‪background-position‬‬ ‫ؾخ‪ ،‬اٌ‬ ‫اٌ‬ ‫‪ ٛ‬ح اٌ ٍ ‪١‬خ ‪ ٟ‬أ ٍ‪٠ ٝ‬‬ ‫ٍم ‪ٛ ً١‬‬
‫خ‪.‬‬ ‫اٌ ‪ ٛ‬ح ‪ ٟ‬أ‪ِ ٞ‬ى ْ ‪ ِٓ ٖ ٠‬اٌ‬ ‫ّؼ ٌه ثز ‪ ٖ ٘ ١١‬اٌم‪ّ١‬خ اٌزٍم ‪١‬خ ‪ٚٚ‬‬
‫ٕ٘ ن ؿ ق ِ زٍ خ ٌزؾ ‪ ٠‬ل‪ّ١‬خ ‪ٌ ،background-position‬ىٓ وٍ‪ ٔ ٍٝ ُ ٕ ٙ‬ك ‪ٚ‬ا ‪،‬‬

‫ٔ ح‬ ‫ِٓ ‪٠‬‬ ‫اٌ ‪ ٛ‬ح اٌ ٍ ‪١‬خ ٍ‪ ٝ‬ث ‪ 100‬ثى‬ ‫ّض ً اٌم‪ّ١‬خ '‪'100px 200px‬‬
‫ؼ‪.‬‬ ‫ِٓ أ ٍ‪ ٔ ٝ‬ح اٌّز‬ ‫ؼ ‪ 200ٚ‬ثى‬ ‫اٌّز‬
‫ِؾ ح ِض‬ ‫خ ‪ٚ‬و ٌه ِم ‪١٠‬‬ ‫ع اٌ‬ ‫٘ ا إٌ ك ‪ّ٠‬ىٓ ؾ ‪ ٖ ٠‬أ‪ ً ٠‬ث ٌٕ جخ اٌّإ‪٠‬خ ِٓ‬
‫ي ا ز اَ وٍّ د ِض ‪left ٚcenter ٚbottom ٚ top‬‬ ‫‪ٚ‬اٌ ٕز‪١ّ١‬ز ‪ ،‬أ‪ِٓ ٚ‬‬ ‫اٌجى‬
‫‪right.ٚ‬‬

‫ت‬ ‫اى‬ ‫ف‬ ‫اى‬ ‫ٍ ه‬
‫ت ٔ‪ُ 2‬خى يٍ ‪background-position: 2cm‬‬ ‫ػهٗ ؼذ ‪ُ 2‬خى يٍ ‪ٚ‬غ س ان‬ ‫ْزِ ان ٕسة ٔ ؼ‬
‫ْذ ان ل‬
‫;‪2cm‬‬ ‫أػهٗ ان ت‬
‫‪background-position: 50%‬‬ ‫ت ٔس‬ ‫ان غ ت يٍ ‪ٚ‬غ س ان‬ ‫‪ ٙ‬يُخ‬ ‫ْزِ ان ٕسة ٔ ؼ‬

‫ْذ ان ل‬
‫;‪25%‬‬ ‫ت‬ ‫ان غ ت يٍ أػهٗ ان‬
‫‪background-position: top‬‬
‫ت‬ ‫‪ ٙ‬أػهٗ ‪ ٍٛ ٚ‬ان‬ ‫ْذ ان ل ْزِ ان ٕسة ٔ ؼ‬
‫;‪right‬‬
‫خ‪:‬‬ ‫‪ ٛ‬ح اٌ ٍ ‪١‬خ ‪ ٟ‬أ ٍ‪ ٓ١ّ٠ ٝ‬اٌ‬ ‫اٌّض ي أ ٔ ٖ ‪ ٛ٠‬ؼ و‪١ ١‬خ ‪ٚ‬‬
:‫خ‬ ٌ‫ٓ ا‬١ّ٠ ٍٝ ‫ أ‬ٟ ‫خ‬١ ٍ ٌ‫ ح ا‬ٛ ٚ ‫خ‬١ ١‫ ؼ و‬ٛ٠ ٖ ٔ ‫اٌّض ي أ‬
<html>
<head>
body {
}
h1 {
color: #990000;
}
</style>
</head>
</body>
</html>
‫ّىٓ وز ثزخ وز ث‬٠ ٠‫ا‬ٚ ) %25 %50 ( ‫خ ث ٌٕ جخ‬١ ٌ‫ّىٓ وز ثخ ا‬٠ : ‫ خ ٘بِخ‬ٛ ٍِ
(right bottom)
"background" ‫ب‬ ٌ‫ّ و ا‬

‫ ٘ ا‬ٟ ٙ ‫ ل أ‬ٟ‫اٌز‬ ٕ ٌ‫خ ا‬١ ٍ ‫ٌى‬ ‫ ا ز‬ٟ٘ background ‫خ‬١ ٌ‫ا‬
. ٌ‫ا‬
ٙ‫ ىزج‬ٟ‫اٌز‬ ‫ا‬ ١ٍ‫ م‬ٌٟ ‫ث ٌز‬ٚ ‫ح‬ ّ ‫ّىٕه‬٠background َ‫ث ز ا‬

.‫ ٌٍم اءح‬ٙ ‫أ‬ ٌٍّ‫ا‬ ‫غ‬٠ ‫٘ ا‬ٚ ُ١ّ ‫اٌز‬ ٍِ ٟ
: ‫٘ ٖا‬ ‫ّىٓ ا ز‬٠ ً ‫ّض‬
: ‫م‬ ‫ا‬ٚ َ‫غخ ث ز ا‬١‫إٌز‬ ٔ ‫ك‬١‫ّىٓ ؾم‬٠ background َ‫ث ز ا‬
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
:ٓ١ّ١ٌ‫ ا‬ٌٝ‫ئ‬ ١ٌ‫ ِٓ ا‬- ‫ ا اٌ ى‬ٙ‫ت ث‬ ‫اٌم ّخ‬

background-color | background-image | background-repeat |
background-attachment | background-position
ٔ ٌُ ً ‫ ّض‬،‫خ‬١ ٌ‫ ٖ ا‬ٌٙ ‫خ‬١ ‫ّخ اٌزٍم‬١‫اٌم‬ ٛ‫ؼ ث‬ ‫َ اٌّز‬ٛ‫م‬١ ِ ‫خ‬١ ‫ئرا ٌُ ىزت‬
:‫ اٌّض ي‬ٟ background-position ٚ background-attachment ‫خ‬١ ٌ‫ا‬
background: #FFCC66 url("butterfly.gif") no-repeat;
‫ف‬ ّ‫ و‬ٟ٘ ُ١‫اٌم‬ٚ ٌّٙ ‫خ‬١ ‫ّخ اٌزٍم‬١‫اٌم‬ ٛ‫ؼ ث‬ ‫َ اٌّز‬ٛ‫م‬١ ٚ ‫ٓ ٌُ ؾ ا‬١‫ز‬١ ٌ‫ا‬
top left.ٚscroll
ٛ ٌٕ‫ ا‬:‫بٌ ب‬
ٌ‫ ٘ ا ا‬ٟ ، ‫ال‬ٌّٛ‫ ا‬ّّٟ ٌّ ‫خ‬١ ‫ ِ ٍخ أ‬ٟ٘ ٛ ٌٕ‫ ا‬ٌٝ‫خ ؿ اص ئ‬ ‫ئ‬ٚ ‫ك‬١ ٕ

ٖ ٘ ٓ ‫ ٕزؾ س‬، ٌٕ‫ك ا‬١ ٕ‫ ٌز‬CSS ِٙ ‫ م‬ٟ‫جخ اٌز‬١‫ت اٌ غ‬١ٌ ‫ي ا‬ٛ ‫ِم ِخ‬ ‫ز‬
: ٌ‫ ٘ ا ا‬ٟ ٌ‫ا‬
text-color
text-indent
text-align
text-decoration
letter-spacing
text-transform
ٌ‫ْ ا‬ٌٛ : ٚ‫ا‬
" ٍٝ٠ ّ‫و‬ ٌ‫ْ ا‬ٌٛ ‫ ثىز ثخ‬ٌٛ " 0000ff " ٍٝ٠ ّ‫ و‬valuo ُ١‫اَ ث ٌم‬ ٌ‫ْ ا‬ٌٛ ٠ ‫زُ ؾ‬٠
: html ‫اٌـ‬ ٍِ ٝ ٌٝ ‫ اٌز‬ٛ‫زُ وز ثخ اٌى‬٠ ‫ش‬١ ٌٝ ‫ اٌّض ي اٌز‬ٝ ‫ رٌه‬ٙ ٠ٚ " red
<html>
<head>
body {color:red;}
h1 {color:#00ff00;}
p {color:red;}
</style>
</head>
<body>
<p>This is an ordinary paragraph. Notice that this text is red. The

default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is

blue.</p>
</body>
</html>
"text-align" ٌٕ‫ِ براح ا‬
،ٟ ٌّ‫ ا‬ٟ َ ‫ز‬ ‫ و ٔذ‬ٟ‫" اٌز‬align" ‫خ‬١ HTML ٟ ٗ‫ج‬ text-align ‫خ‬١
"centred" ‫ إٌّز‬ٟ ٚ‫"أ‬right" ٓ١ّ١ٌ‫ ا‬ٚ‫" أ‬left" ١ٌ‫ ا‬ٛ‫ّىٓ ِؾ را ٗ ٔؾ‬٠ ٌٕ‫ا‬
‫ث‬ ّ‫ٓ و‬١‫ِٓ اٌغ ٔج‬ ٌٕ‫َ ثّؾ راح ا‬ٛ‫ زم‬justify ‫ّخ‬١‫ رٌه اٌم‬ٌٝ‫خ ئ‬ ‫ث‬ٚ
،ٓ١ّ١ٌ‫ ا‬ٛ‫< لّٕ ثّؾ را ٗ ٔؾ‬th> ‫ي‬ٚ ‫اٌغ‬ ‫ أ‬ٟ ٌٕ‫ اٌّض ي أ ٔ ٖ ا‬ٟ .‫اٌّغ د‬ٚ ‫اٌ ؾ‬
ٗ ‫ اٌ م اد مّٕ ثّؾ را‬ٟ ٌٕ‫أِ ا‬ ‫ إٌّز‬ٛ‫ٕ ٘ ٔؾ‬٠‫< ر‬td> ‫ي‬ٚ ‫ اٌغ‬ٟ ‫ ٔ د‬١‫ّٕ اٌج‬١‫ث‬
:ٓ١‫ِٓ اٌغ ٔج‬
<html>
<head>
h1 {text-align:center}
p.date {text-align:right}
p.main {text-align:justify}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my

father gave me some advice that I've been turning over in my
mind ever since. 'Whenever you feel like criticizing anyone,' he
told me, just remember that all the people in this world haven't
had the advantages that you've had.'</p>
"text-decoration" ٌٕ‫ص ش خ ا‬
ً ‫ ّض‬، ٌٕ‫ ا‬ٍٝ ‫ اد‬١ ٚ‫ف أ‬ ‫خص‬ ‫ ّىٕه ِٓ ئ‬text-decoration ‫خ‬١ ٌ‫ا‬
<h1> ٕ ‫ و‬ٟ ٢‫ اٌّض ي ا‬ٟ ،ٗ١ٍ ٚ‫لٗ أ‬ٛ ٚ‫ أ‬، ٌٕ‫ا‬ ‫اً أ‬ ١ ْ‫ّىٕه أ‬٠
ٌ‫ا‬ ٛ‫<لّٕ ث‬h3> ٚ ٙ‫ل‬ٛ ٟ‫ٓ اٌز‬٠ٚ ٕ ٌ‫ ا‬ٟٙ <h2> ِ‫ً أ‬ ٍٙ ‫ٕ أ‬ ٚ
html ‫اٌـ‬ ٍِ ٝ ٌٝ ‫ اٌز‬ٛ‫ىزت اٌى‬٠ٚ . ٙ١ٍ
<html>
<head>
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
</style>
<h1>CSS text-align Example</h1>
<h2>CSS text-decoration: overline</h2>
</head>
</body>
</html>
"text-transform" ٌٕ‫ ا‬ٛ
ُ١‫ٓ اٌم‬١‫ز ث‬ ْ‫ّىٕه أ‬٠ ،‫خ‬١‫ اٌٍ د اٌ ث‬ٟ ٌ‫ زؾىُ ثؾغُ ا‬text-transform ‫خ‬١
ٌٕ‫ ا‬ٛٙ ‫خ‬١ ١‫ٓ و‬ ٌٕ‫ا‬ ‫ث‬ٚ ،lowercase ٚ‫أ‬uppercase ٚ‫أ‬capitalize
.ٍٟ ‫ا‬
‫ ا‬ٙ‫ ث‬ٚ‫" أ‬HEADLINE" ‫ ا اٌ ى‬ٙ‫ ٌٍّ ز َ ث‬ٙ ْ‫ّىٓ أ‬٠ "headline" ‫ّض ً وٍّخ‬
text-transform:ُ١‫ ِ اٌم‬ِٙ‫ّىٕه ا ز ا‬٠ ُ١‫ ٕ٘ ن أ ث ل‬، "Headline" ‫اٌ ى‬
capitalize
"John Doe". ‫ ز جؼ‬: "john doe" ‫ي ِٓ و وٍّخ ِض ي‬ٚ ‫ اٌؾ ف ا‬١‫َ ثزىج‬ٛ‫م‬
uppercase
"JOHN DOE". ‫ ز جؼ‬: "john doe" ‫ ِض ي‬،‫ ح‬١‫ف وج‬ٚ ‫و اٌؾ‬ ‫غ‬
lowercase
"john doe". ‫ ز جؼ‬: "JOHN DOE" ‫ ِض ي‬،‫ ح‬١ ‫ف‬ٚ ‫و اٌؾ‬ ‫زغ‬
none
HTML. ٍِ ٟ ‫ وّ وزت‬ٙ ١ ٌٕ‫ ا‬، ١ ٞ‫َ ث ّ أ‬ٛ‫ٌٓ م‬
،<li> (list-item) ٕ ٌ‫ز َ ا‬ ٍٙ‫ّ ء و‬ ‫ ا‬،‫َ ث ز اَ ل ّخ أ ّ ء‬ٛ‫ ٕم‬،‫وّض ي‬

.‫ ح‬١‫ وج‬ٙ ٚ ‫ و‬٠ ٕ ٓ٠ٚ ٕ ٌ‫ اً أِ ا‬١‫ي وج‬ٚ ‫ ا‬ٙ ٙ ٠ ْ‫ّ ء أ‬ ‫ ا‬٠ ٔ ٕٔ‫ٌٕم أ‬ٚ
‫ف‬ٚ‫ٍ وزت ث ش‬ ‫ا‬ ٌٕ‫ أْ ا‬ٜ‫ زش‬ٚ ‫ ا اٌّ بي‬ٌٙ HTML ٍٝ‫أٌم ٔ شح ػ‬ٚ ‫شة‬
.‫شح‬
<html>
<head>
p.uppercase {text-transform:uppercase}
p.lowercase {text-transform:lowercase}
p.capitalize {text-transform:capitalize}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
‫‪ ٙ ٠ٚ‬ث ٌّ ز ع وّ ‪: ٍٝ٠‬‬
"text-indent"‫ش‬ ‫ي‬ٚ‫بسؽ ل أ‬ ٚ
‫خ لج‬ ‫خ‬ ِ ٛ‫ اٌ م اد ث‬ٌٝ‫مخ ئ‬١ٔ‫خ ٌّ خ أ‬ ‫ ّؼ ٌه ث‬text-indent ‫خ‬١ ٌ‫ا‬
ٕ ٌ‫ز َ ا‬ ٟ‫ٌى اٌ م اد اٌز‬px 50 ‫ّخ‬١‫ٕ اٌم‬ ٚ ٖ ٔ ‫ اٌّض ي أ‬ٟ ،‫ِٓ اٌ م ح‬ ‫ي‬ٚ‫أ‬
<p>:
<html>
<head>
p {text-indent:50px}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some

advice
‫ ثخ اٌــ‬that
‫ ق ٌىز‬I've
‫ ؿ‬3been turning
( HTML ‫ ؾخ‬over in my١ mind
ٟ CSS ‫ ٌز‬ِٙ ever since.
‫أْ ز‬ ٓ‫ّى‬٠ 'Whenever
‫ٕ٘ ن س ؿ ق‬you
feel like criticizing anyone,' he told me, just remember that all the
،‫مخ اٌض ٌضخ‬٠ ٌ‫ ز َ ا‬ٚ ‫ٔؾٓ ٕٔ ؼ ث ْ و‬ٚ ،ٖ ٔ ‫ خ أ‬ٚ ِ ‫ ) ٘ ٖ اٌ ق‬STYLE
people in this world haven't had the advantages that you've had.'</p>
) ِٕ ٍِ ٟ CSS ْ‫ (أ‬. ِٕ ٍِ ٟ CSS ْ‫ أ‬ٟ٘ٚ
</body> style‫خ‬١ َ‫ ث ز ا‬HTML َٛ ٚ ّٓ :1 ‫مخ‬٠ ٌ‫ا‬
</html>
"letter-spacing"‫ف‬ٚ‫اٌّغب خ ث ٓ اٌ ش‬
The spacing between text characters can be specified using the

ٟ‫خ اٌز‬ ٌّ‫ع ا‬ ‫ ثج ؿخ‬ٟ٘ ‫خ‬١ ٌ‫ ٖ ا‬ٌٙ ‫ّخ اٌّؾ ح‬١‫ اٌم‬،property letter-spacing
( ‫ي‬ٚ ‫اْ ا‬ٕٛ ٌ‫ ا‬ٟ ‫ف‬ٚ ‫ٓ اٌؾ‬١‫ ث‬px 2 ‫خ‬ ِ ‫ ّض ً ئرا أ د‬، ‫آ‬ٚ ‫ف‬ ‫ٓ و‬١‫ ٘ ث‬٠
‫ه أْ ىزت‬١ٍ <h2> ٓ٠ٚ ٕ ٌ‫ ا‬ٟ ‫ف‬ٚ ‫ٓ اٌؾ‬١‫ث‬3px ٚ<h1> ‫ي ِٓ اٌىز ثخ‬ٚ ‫ ا‬ٜٛ‫اٌّ ز‬
: ‫ ا اٌ ى‬ٙ‫ث‬ ٌ‫ا‬
<html>
<head>
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
</style>
</head>
<body>
</body>
</html>
ٛ ٌ‫ ا‬: ‫ساثؼب‬
‫ ً ثّ ٌغخ ِ ىٍخ‬٠‫َ أ‬ٛ‫ ٕم‬ٚ ، CSSَ‫ ث ز ا‬ٍٙ ١‫و‬ٚ ‫ؽ‬ٛ ٌ‫زز ٍُ ا‬ ٌ‫ ٘ ا ا‬ٟ
،‫ة‬ٛ ‫ اٌؾ‬ٍٝ ‫ؼ ِ ٌُ ىٓ ِضجزخ‬١‫ؾ‬ ‫ ث ى‬ٙ ٌٓ ٟ‫ؽ اٌز‬ٛ ٌ‫ا‬ ‫عث‬ ‫خ‬١ ١‫و‬
: ٌ‫ ٘ ا ا‬ٟ ٌ‫ٕز ٍُ ٘ ٖ ا‬
font-family
font-style
font-variant
font-weight
font-size
font
Difference Between Serif and Sans-serif Fonts

‫‪"font-family" ٛ‬‬ ‫ٔ‪ ٛ‬اٌ‬
‫ت ا ‪٠ٌٛٚ‬خ ٍ‪ٕ ٝ‬‬ ‫جك ٍ‪ٝ‬‬ ‫‪ٛ‬ؽ‬ ‫ل ّخ‬ ‫‪١‬خ ‪ font-family‬ز َ ٌ‪ٛ‬‬ ‫اٌ‬
‫‪ٛ‬ؽ ‪١‬م‪ َٛ‬ث ز اَ اٌ‬ ‫ّٓ ل ّخ اٌ‬ ‫ا ‪ٚ‬ي‬ ‫ؼ اٌ‬ ‫ؾخ ِ ‪ ،‬ئرا ٌُ ‪٠‬غ اٌّز‬ ‫أ‪ٚ‬‬
‫إٌّ ت‪.‬‬ ‫اٌز ٌ‪٘ٚ ،ٟ‬ى ا ز‪٠ ٝ‬غ اٌ‬ ‫ع اٌ‬ ‫اٌض ٔ‪ ٟ ٟ‬اٌم ّخ ‪ٚ‬ئرا ٌُ ‪٠‬غ ٖ ‪١‬ؾ ‪ٚ‬ي‬
‫ِخ‪،‬‬ ‫‪ٛ‬ؽ ث ّ ء ِؾ ح أ‪ ٚ‬أ ّ ء‬ ‫ز َ ٌز ٕ‪، ٙ ١‬‬ ‫‪ٛ‬ؽ‬ ‫ٕ٘ ن ٔ‪ ِٓ ْ ٛ‬أ ّ ء اٌ‬

‫مخ‪.‬‬ ‫‪ ٟ ّٙ‬اٌ م اد اٌ‬ ‫ٍؾ‪ٕ ٓ١‬‬ ‫اٌّ‬
‫‪ٛ‬ؽ‬ ‫أ ّ ء اٌ‬
‫‪ٛ‬ؽ ث ّ ء ِؾ ح ٘‪"Times New Roman" ٚ "Arial" ٟ‬أ‪"Tahoma". ٚ‬‬ ‫أِضٍخ ٌ‬
‫أ ّ ء ِخ‬
‫ى ِزّ س‪ّ ،‬ض ً ‪sans-‬‬ ‫‪ٛ‬ؽ اٌز‪ٌٙ ٟ‬‬ ‫‪ٛ‬ؽ ؾ اٌّغّ‪ ٛ‬خ ِٓ اٌ‬ ‫ّ ء اٌ ِخ ٌٍ‬ ‫ا‬
‫‪ٛ‬ؽ ِٕ جخ ٌ ع‬ ‫ف ‪ٟ٘ٚ‬‬ ‫ٍ‪ ٝ‬ا‬ ‫ؾ‪ ٞٛ‬ص‪ٚ‬ا‬ ‫‪ٛ‬ؽ‬ ‫‪ِ ٟ٘serif‬غّ‪ ٛ‬خ ِٓ اٌ‬
‫خ‪.‬‬ ‫ٍ‪ ٝ‬اٌ‬ ‫إٌ‬
‫‪ٛ‬ؽ ‪ ٛ٠‬ؼ ‪ ٟ‬اٌّض ي اٌز ٌ‪:ٟ‬‬ ‫ز ف ث‪ ٓ١‬أٔ‪ٛ‬ا اٌ‬ ‫ا‬

‫ٌ ‪٠‬ه ُ اٌ ‪ِٓٚ ،ٗ١ٍ٠ ٞ‬‬ ‫اٌّ‬ ‫‪ٛ‬ؽ ‪ِٛ ٟ‬ل ه ٔذ ج أ ِ اٌ‬ ‫ل ّخ ث ٌ‬ ‫ِٕ‬
‫ؾخ‬ ‫ّٓ أْ اٌ‬ ‫‪٠‬مخ‬ ‫‪ٛ‬ؽ‪ ،‬ث‪ ٖ ٙ‬اٌ‬ ‫أْ ٕ‪ ٟٙ‬اٌم ّخ ث ُ ِغّ‪ ٛ‬خ ِخ ِٓ اٌ‬ ‫ا‬
‫اٌ ‪ ٞ‬لّذ ثزؾ ‪.ٖ ٠‬‬ ‫ؼ اٌ‬ ‫ٌ ‪٠‬ه ئرا ٌُ ‪٠‬غ اٌّز‬ ‫اٌّ‬ ‫إٌ‪ ِٓ ٛ‬اٌ‬ ‫ز ع ثٕ‬
‫‪ٛ‬ؽ ِ جخ زى‪ ْٛ‬ث‪ ٙ‬ا اٌ ى ‪:‬‬ ‫ّض ً ل ّخ ِ جخ ِٓ اٌ‬
‫};‪h1 {font-family: arial, verdana, sans-serif‬‬

‫};‪h2 {font-family: "Times New Roman", serif‬‬
‫"‪ ،"Arial‬ئرا ٌُ ‪٠‬ىٓ‬ ‫>‪ <h1‬ز ع ث ز اَ‬ ‫د ث ز اَ اٌ ٕ‬ ‫اٌ ٕ ‪ ٓ٠ٚ‬اٌز‪ٟ‬‬

‫"‪ٚ"Verdana‬ئرا ٌُ ‪٠‬ىٓ‬ ‫‪ٛ‬ة اٌّ ز َ ‪ ١‬ع ث ً ِٕٗ‬ ‫ِضجزً ‪ٟ‬‬ ‫٘ ا اٌ‬
‫‪ٛ‬ؽ ‪sans-serif‬‬ ‫ٍخ اٌ‬ ‫ِٓ‬ ‫‪ٛ‬ة اٌّ ز َ ‪١‬زُ ا ز‪١‬‬ ‫ا ٕ ْ ِ‪ ٛ ٛ‬اْ ٍ‪ٝ‬‬
‫ٌ ع اٌ ٕ ‪.ٓ٠ٚ‬‬
‫ْ ا ّٗ‬ ‫ِز‪١ ٕ ٟ‬‬ ‫"‪ "Times New Roman‬ث‪ٓ١‬‬ ‫ٕ ا ُ‬ ‫إٔٔ ‪ٚ‬‬ ‫و‪١‬‬
‫‪.‬‬ ‫ِز‪١ ٕ ٟ‬‬ ‫ث‪ٓ١‬‬ ‫د ‪ٌ ٌٚ‬ه ‪٠‬غت أْ ‪ٛ٠‬‬ ‫‪٠‬ؾ‪ِ ٞٛ‬‬
: ٌٝ ‫ وّ ث ٌّض ي اٌز‬ٙ ٠ٚ
<html>
<head>
p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
</style>
</head>
<body>
<h1>CSS font family example</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman
font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
"font-style" ٌ‫شاص ا‬
ٚ‫أ‬italic ٚ‫أ‬normal ‫ّخ‬١‫ؾّ اٌم‬١ ٌ‫ ؾ ِ ئرا و ْ ا‬font-style ‫خ‬١ ٌ‫ا‬
. ِ ‫ ث ى‬ٙ ‫< ز‬h2> ٓ٠ٚ ٕ ‫ اٌّض ي أ ٔ ٖ و‬ٟ ،oblique
<html>
<head>
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>
</html>
‫‪ ٙ ٠ٚ‬ث ٌّ ز ع وّ ‪: ٍٝ٠‬‬
‫"‪"font-variant‬‬ ‫ب ٓ اٌ‬
‫ز‪ ١‬ث‪ ٓ١‬اٌم‪ّ١‬ز‪normal ٓ١‬أ‪ٌٍsmall-caps ٚ‬‬ ‫‪١‬خ ‪ font-variant‬ز َ ٌ‬ ‫اٌ‬
‫‪١‬ىزت ثؾ ‪ٚ‬ف‬ ‫‪ِ ٟ٘ٚ‬ز ٍمخ م ث ٌٍ د ا ‪ٚ ٚ‬ث‪١‬خ‪ ،‬اٌم‪ّ١‬خ ‪ ٟٕ small-caps‬أْ إٌ‬
‫٘ اٌّض ي ا‪ٌ ٟ ٢‬ى‪ٟ‬‬ ‫‪ ١‬ح‪٠ ، ،‬ج ‪ ٚ‬ا ِ ِ ثىً‪١ٍ ،‬ه أْ‬ ‫وج‪ ١‬ح ٌىٕ‪١ ٔ ِٓ ٙ‬خ اٌؾغُ‬
‫‪ ُٙ‬أوض ‪:‬‬
ٖ ُ٘ ٠ ‫ىٓ ٕ٘ ن‬٠ ٌُٚfont-variant ‫خ‬١ ٌٍsmall-caps ‫ّخ‬١‫ د اٌم‬١‫ئرا ا ز‬
‫ ح م‬١‫ف وج‬ٚ ‫ثؾ‬ ٌٕ‫ؼ ث ع ا‬ ‫َ اٌّز‬ٛ‫م‬١ ‫خ‬١ ٌ‫ا‬
style.css
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
"font-weight" ٌ‫صْ ا‬ٚ

ّ‫ؾ‬٠ ْ‫أ‬ ٌٍ ٓ‫ّى‬٠ ، ٌ‫ " م " ا‬ٚ‫ْ ّ وخ أ‬ٛ‫وُ زى‬ font-weight ‫خ‬١ ٌ‫ا‬
900 ٌٝ‫ ئ‬100 ِٓ َ ‫ل‬ ‫ُ ا ز اَ ا‬ ‫ؾد‬ ‫ٕ٘ ن ِز‬ٚ ،bold ٚ‫أ‬normal ‫ّخ‬١‫اٌم‬
. ٌ‫م ا‬ ٌٛ
style.css
p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}
‫"‪"font-size‬‬ ‫ُ اٌ‬
‫‪١‬خ ‪font-size.‬‬ ‫‪ّ٠‬ىٓ ؾ ‪ ٖ ٠‬ث ٌ‬ ‫غُ اٌ‬
‫غُ‬ ‫‪ ،‬إٌ جخ اٌّإ‪٠‬خ) اٌز‪ّ٠ ٟ‬ىٓ ا ز اِ‪ٌٛ ٙ‬‬ ‫ٕ٘ ن اٌ ‪ ِٓ ٠‬اٌ‪ ٛ‬اد (ِض ي‪ :‬ثى‬
‫ٍ‪ ٝ‬اٌ‪ ٛ‬اد ا وض ا ز اًِ‪ٚ ،‬اٌّض ي ‪٠‬ز ّٓ‪:‬‬ ‫‪ ٘ ٟ ،‬ا اٌّض ي ٕ و‬ ‫اٌ‬
‫};‪h1 {font-size: 30px‬‬

‫};‪h2 {font-size: 12pt‬‬
‫};‪h3 {font-size: 120%‬‬
‫};‪p {font-size: 1em‬‬
‫) '‪ٔ( 'pt' ٚ 'px‬م خ‬ ‫ث ‪ ٟ٘ٚ ،‬أْ و ِٓ (اٌج‪١‬ى‬ ‫ا‬ ‫ث‪ ٚ ٓ١‬اد اٌم‪١‬‬ ‫ق ‪ٚ‬ا‬ ‫ٕ٘ ن‬
‫غُ اٌ‬ ‫ِؾ اً ث لخ ‪ ٚ‬ثذ ث‪ّ 'em' ٚ'%' ّٕ١‬ؼ ٌٍّ ز َ ثز ‪١١‬‬ ‫غُ اٌ‬ ‫) غ‬
‫خ أ‪ ٚ‬وج‬ ‫ز‪ ١‬د اٌ‬ ‫ئٌ‪ ٝ‬اٌّ ز‪ ٜٛ‬إٌّ ت ٌٗ‪ ٕ٘ ،‬ن اٌ ‪ ِٓ ٠‬اٌّ ز ِ‪ ِٓ ٓ١‬ر‪ ٞٚ‬ا‬
‫‪ ٠‬خ‪ٌٚ ،‬ى ٔ ؼ اٌّ‪ٛ‬ل‬ ‫خ راد ‪ ٛ‬ح‬ ‫أ‪ٍّ٠ ٚ‬ه‬ ‫‪ ٟ‬اٌج‬ ‫اٌ ٓ أ‪ِٓ ٟٔ ٠ ِٓ ٚ‬‬
‫‪ِ ٍٙ٠‬ض '‪ '%‬أ‪ٚ‬‬ ‫‪ّ٠‬ىٓ‬ ‫ث ِٓ ا ز اَ ‪ ٚ‬اد ل‪١‬‬ ‫لبث ً ٌٍ‪ٛ ٛ‬ي ٌ‪ ٖ ٙ‬اٌ بد ‪ٌٍٚ‬غّ‪١‬‬
‫‪'em'.‬‬
‫‪١‬خ‬ ‫‪ٚ‬ئو جٍ‪، ٛ‬‬ ‫‪ٛ ٠‬و‬ ‫‪ِٛ ٟ‬ص‪٠‬‬ ‫غُ اٌ‬ ‫‪٠‬‬ ‫‪ ٟ‬اٌّض ي أ ٔ ٖ ‪١ ٛ‬ؼ ٌى‪١ ١‬خ‬
‫ٓ رٌه؟‬ ‫ا خ‪ ،‬أ‬
: Borders‫بساد‬ ‫ ا‬: ‫بِغب‬
CSS ،ٓ١ ١ ٓ١‫ث‬ ٌٍ ٚ‫ٕخ أ‬٠ ٌٍ َ ‫ز‬ ‫ م‬،‫اع ِ زٍ خ‬ ِٙ‫ّىٓ ا ز ا‬٠ ‫ي‬ٚ‫اٌغ ا‬
.‫ؾزه‬ ٟ ‫ز َ ا ؿ اد‬ ِ ٕ ‫خ‬١٘ ٕ‫ِز‬ ‫ اد‬١ ‫ه‬١
border-width
border-color
border-style
‫أِضٍخ ؿ اد‬
border
Border Style ‫بساد‬ ‫ا ىبي ا‬
‫ ح‬ٛ ٌ ‫ ؼ ث‬ِٛ ٛ٘ ّ‫ا ى ي ا ؿ اد و‬
a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same
as the border-width value
groove: Defines a 3D grooved border. The effect depends on the

border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-

color value
inset: Defines a 3D inset border. The effect depends on the border-color
value
outset: Defines a 3D outset border. The effect depends on the border-

color value
"border-style" ‫ي‬ٚ‫ا اٌ ا‬ٛٔ ‫بساد ثــ‬ ‫ ّىٓ غّ خ ا ىبي ا‬ٚ‫ا‬

8 ‫ أ ٔ ٖ ٕ٘ ن‬ٟ‫ؾ‬١ ٛ‫ اٌّض ي اٌز‬ٟ ، ِٕٙ ‫ز‬ ْ‫ّىٕه أ‬٠ ‫ا ِ زٍ خ ِٓ ا ؿ اد‬ٛٔ‫ٕ٘ ن أ‬
ٌٍْٛ‫ز َ ا‬ ‫ خ‬ٚ ٌّ‫ و ا ِضٍخ ا‬،5.5 ٍٛ‫ ئو ج‬ٙ ٠ ّ‫ا ِٓ ا ؿ اد و‬ٛٔ‫أ‬
‫عا ؿ‬ ١ ‫ز‬ ‫ و أٔه‬ٚ "thick" ‫ّخ‬١‫ّخ ّ وخ ا ؿ ِؾ ح ث ٌم‬١‫ل‬ٚ"gold"
.‫ ّ وخ ِ زٍ خ‬ٚ ْ‫ا‬ٌٛ ‫ث‬
. ‫ءا ؿ‬ ‫ ئ‬٠ ِٕ َ ‫ز‬ ْ‫ّىٓ أ‬٠ hiddem ٚ‫ أ‬none ُ١‫اٌم‬
‫بساد‬ ‫أِ ٍخ‬

"border-width"‫بس‬ ‫ّبوخ ا‬
‫ي‬ ِٓ ٗ‫ّز‬١‫ ل‬٠ ‫ّىٓ ؾ‬٠ ٞ ٌ‫ا‬ٚborder-width ‫ّخ‬١‫ي اٌم‬ ِٓ ‫ؾ‬ ‫ّ وخ ا ؿ‬
ُ ٌ‫ ا‬، ‫ّىٗ ث ٌجى‬ ‫خ ؾ‬١ّ‫ّخ ل‬١‫ي ل‬ ِٓ ٚ‫ أ‬، thickٚmedium ٚ thin ‫اٌىٍّ د‬
: ٙ‫ٔز غ‬ٚ ُ١‫ٓ ٘ ٖ اٌم‬١‫ج‬٠ ٟ‫ؾ‬١ ٛ‫اٌز‬
"border-color"‫بساد‬ ‫اْ ا‬ٌٛ‫أ‬
‫خ ِض‬٠ ٌ‫اْ ا‬ٌٛ ‫ُ ا‬١‫ ل‬ٟ٘ ‫خ‬١ ٌ‫ّخ ٘ ٖ ا‬١‫ ل‬،‫ْ ا ؿ ح‬ٌٛ ‫ ؾ‬border-color ‫خ‬١ ٌ‫ا‬
"yellow". ‫اْ ِض‬ٌٛ ‫ أ ّ ء ا‬ٚ‫"أ‬rgb(123,123,123)" ٚ"#123456"
،‫ي ِ زٍ خ‬ٚ‫ا‬ ‫ٔ ء‬ ‫ اٌج‬ٙ ‫ ِ ث‬ٙ ٚ ٓ‫ّى‬٠ ٖ ‫ رو د أ‬ٟ‫اٌض خ اٌز‬ ٌ‫ا‬

<h1> ٕ ٌٍ ‫ا ِ زٍ خ ِٓ ا ؿ اد‬ٛٔ‫ أ‬٠ ‫مخ لّٕ ثزؾ‬١ ٚ ٍٝ ‫ح‬ ٔ ٟ‫ؼ رٌه ٍٕم‬١ ٛ‫ٌز‬
:‫ح‬ ‫ د اٌّز‬١ٔ ‫ ؼ ا ِى‬ٛ٠ ‫ٍخ ٌىٓ اٌّض ي‬١ّ ْٛ‫ى‬ ‫غخ ل‬١‫ إٌز‬،<p>ٚ<ul> ٚ<h2> ٚ
: ٍٝ٠ ّ‫ و‬html ٍِ ٝ ٌٝ ‫ اٌز‬ٛ‫ىزت اٌى‬٠ٚ
Note: The "border-color" property does not work if it

is used alone. Use the "border-style" property to set
the borders first.
<html>
: ٍٝ٠ ّ‫ و‬html ٍِ ٝ ٌٝ ‫ اٌز‬ٛ‫ىزت اٌى‬٠ٚ
<head>
p.one
border-style:solid;
border-width:5px;
p.two
border-style:solid;
border-width:medium;
p.three
border-style:solid;
border-width:1px;
</style>
</head><body><p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
</body>
‫بس‬ ‫ْ ا‬ٌٛ Border Color
<html>
<head>
p.one
border-style:solid;
border-color:red;
p.two
border-style:solid;
border-color:#98bf21;
</style>
</head>
<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
</body>
</html>
: ٍٝ٠ ّ‫و‬ ‫ا‬ٚ ٝ ‫اٌ ثمخ‬ ٌ‫ ا‬١ّ ‫ّىٓ وز ثخ‬٠ٚ
<html>
<head>
border:5px solid red;
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
Outlines ‫ مشح‬ٚ‫ ٍّخ ا‬ٜ‫ي ا‬ٛ ّ‫ ٌؼ‬: ‫ب ب‬
: ٌٝ ‫ اٌز‬ٛ‫زُ وز ثخ اٌى‬٠ ‫ ٍّخ‬ٚ‫ م ح ا‬ٜ‫ي ا‬ٛ ٌّ
<html>
<head>
border:red solid thin;
outline:#00ff00 dotted thick;
</style>
</head>
<body>
<p><b>Note: </b>Internet Explorer does not support the outline properties.</p>
</body>
</html>
ٌ‫ْ ا‬ٌٛ Outlines Color
<html>
<head>
outline-style:dotted;
outline-color:#00ff00;
</style>
</head>
<body>
</body>
</html>
ٛ ٌ‫ا ا‬ٛٔ‫ ا‬Outlines Color
<html>
<head>
outline-color:#00ff00;
</style>
</head>
<body>
</body>
</html>
ٛ ٌ‫بَ ا‬ ‫ا‬outline-width
<html>
<head>
p.one
outline-style:solid;
outline-width:thin;
p.two
outline-width:3px;
</style>
</head>
<body>
<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>
</body>
</html>
‫‪ HTML‬ث ز اَ ‪styleُ ٚ‬‬ ‫ّذ ٍِ‬ ‫‪٠‬مخ ‪:2‬‬ ‫اٌ‬
‫‪٠‬مخ‪:‬‬ ‫ج‪١‬ك ٘ ٖ اٌ‬ ‫ز َ ‪ ٘ٚ ،<style> ُ ٚ‬ا ِض ي ٌى‪١ ١‬خ‬ ‫٘ ٖ ؿ ‪٠‬مخ ِ زٍ خ ث ٔ‪ٙ‬‬

‫ؾخ لُ ‪5‬‬ ‫ثٌ‬
‫‪ٟ‬‬ ‫‪٠‬مخ ‪ٍِ :3‬‬ ‫اٌ‬
‫‪٠ ٟ‬ؾ‪ ٞٛ‬أ‪ٚ‬اِ ‪، CSS‬‬ ‫اث ٌٍّ‬ ‫‪ ٟ٘ٚ ،‬أْ م‪ َٛ‬ث‪ٛ‬‬ ‫‪٠‬مخ ا‬ ‫٘ ٖ ٘‪ ٟ‬اٌ‬
‫‪٠‬مخ ٌغّ‪ ١‬ا ِضٍخ‪.‬‬ ‫ٕم‪ َٛ‬ث ز اَ ٘ ٖ اٌ‬ ‫ي ٘ ا اٌ‬
‫‪ّ٠ ٜ‬ىٕه‬ ‫مخ ‪ِٚ ،.css‬ض اٌٍّ د ا‬ ‫ٔ ‪ ٠ ٟ‬ز َ اٌ‬ ‫‪ ٛ٘ ٟ‬ثج ؿخ ٍِ‬ ‫اٌ‬ ‫اٌٍّ‬
‫اٌ ٍت‪.‬‬ ‫ٗ ‪ِٛ ٚ ِ ٟ‬ل ه أ‪ ٍٝ ٚ‬اٌم‬ ‫أْ‬

Css Explation

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Explation

Uploaded by

Copyright:

Available Formats

‫مٕ خ ‪ CSS‬؟‬ ‫ِب ٘‬

‫س ن‪Cascading Style Sheets. ٙ‬‬ ‫‪ ْٙ CSS‬ا خ‬

‫ٕ ‪ ،‬ا نٕاٌ‪ ،‬انٓ ي ‪،‬‬ ‫ٔ ‪ٛ‬مت‪ ٙٓ ، HTML‬حٓخى ن‬ ‫‪ٛ‬ى ح ذد‬ ‫‪ ْٙCSS‬ن ت ح‬

‫ِب اٌ شق ث ٓ ‪HTMLٚ CSS‬؟‬

‫انمشاءة ٔ خ ٓى ي شأحّ ش‪.ً ٚ‬‬ ‫غًُ‪ ،‬ذ ‪ ٚ‬ذٔ ْزا يش ً ن ٍ أ‬

‫‪.‬‬ ‫‪ٚ‬ا‬ ‫ي ٍِ‬ ‫اٌزؾىُ ث ٌز ّ‪ِٓ ُ١‬‬ ‫‪‬‬

‫د ‪ٚ‬اٌ ث د‬ ‫ع اٌّ‪ٛ‬ل ِض اٌ‬ ‫‪ٚ‬‬ ‫خ ٌّ زٍ‬ ‫ِ‪ُ١‬‬ ‫ئٔ ء‬ ‫‪‬‬

‫إٌم ٌخ ‪ ..‬ئٌ‬ ‫‪ٚ‬اٌ‪ٛٙ‬ا‬

‫ؼّ مٕ خ‪ CSS‬؟‬ ‫سط ‪ :2‬و‬

‫ت‪:‬‬ ‫ش ن‪ ٌٕ ٛ‬ه ‪ٛ‬ت نه‬ ‫نُم أَُ َش‪ٚ‬ذ انهٌٕ ا‬

‫ي ‪ ٍ ٚCSS‬ح م‪ٛ‬ك َ ظ انُخ‪ ٛ‬ت خ ت ْزِ ا ٔايش‪:‬‬

‫};‪body {background-color: #FF0000‬‬

‫ٍ‪ٛ‬ة‬ ‫ٖ ‪ ٛ٠‬ؼ ٌه ا‬ ‫‪ ،‬أ‪ٚ‬اِ ‪ CSS‬ز ثٗ وض‪ ١‬اً ِ ‪ٚ ، HTML‬اٌّض ي أ‬ ‫وّ‬

‫ ؿ ق ٌىز ثخ اٌــ‬3 ( HTML‫ؾخ‬ ٟ CSS ١ ‫ ٌز‬ِٙ ‫ز‬ ْ‫ّىٓ أ‬٠ ‫س ؿ ق‬ ‫ٕ٘ ن‬

style‫خ‬١ َ‫ ث ز ا‬HTML َٛ ٚ ّٓ :1 ‫مخ‬٠ ٌ‫ا‬

ٍٝ ً ‫ِض‬ ٌٕ ،style ‫خ‬١ َ‫ ث ز ا‬ٟ٘ HTML ٟ CSS ١ ‫ق ٌز‬ ٌ‫ ا‬ٜ ‫ئ‬

‫اٌز ّ‪٠ ٌ ُ١‬ه ا ّٗ ‪ِ ٟ ٛ ِٛ ٛ٘ٚstyle.css‬غٍ ا ّٗ ‪ٖ ٘ ،style‬‬ ‫ِض ً‪ٌٕ ،‬م أْ ٍِ‬

‫>‪<link rel="stylesheet" type="text/css" href="style/style.css" /‬‬

‫ا ى يه انــ ‪ css‬انزٖ حى‬

‫‪ٟ‬‬ ‫‪١‬خ ‪ ٘ href.‬ا ا ِ ‪٠‬غت أْ ‪ٛ٠‬‬ ‫ٔ ٖ ث ز اَ‬ ‫اٌٍّ‬ ‫أْ ِ‬ ‫و‪١‬‬

‫ؾخ‬١‫مخ اٌ ؾ‬ ٌ‫ٓ ث ز اَ ا‬١ ٌٍّ‫ا‬ ‫ و أْ ؾ‬، ٍ‫اٌّغ‬ ٔ ٟ ٓ١ ٌٍّ‫ا‬ ٛ‫ْ لُ ث‬٢‫ا‬

'color'‫خ‬١ :‫ْ اٌّم ِخ‬ٌٛ

‫وّ ‪: ٍٝ٠‬‬ ‫‪ ٝ ٌٕ ٙ ٠ٚ‬اٌّ ز ع وّ ‪ٍٝ٠‬‬

ٍّٙ‫ؾخ ث و‬ ٌ‫خ ا‬١ ٍ ١١ ‫ ٌ ٌه ٌز‬، HTML ‫مخ‬١ ٚ ‫ د‬٠ٛ‫ ُ و ِؾز‬٠<body> ٕ ٌ‫ا‬

ٓ١‫ث‬ ٌ ‫لّٕ ث‬ٚ <h1> ٕ ٌٍ ٓ١‫ز‬١ ١ ‫إٔٔ لّٕ ثز‬ : ‫ خ ٘ ِخ‬ٛ‫ٍِؾ‬

: ٍٝ٠ ّ‫ و‬HTML ‫اٌــ‬ ٍِ ٝ ٌٕ ٙ ٠ٚ

‫وّ ‪: ٍٝ٠‬‬ ‫‪ ٝ ٌٕ ٙ ٠ٚ‬اٌّ ز ع وّ ‪ٍٝ٠‬‬

‫اٌ ‪ٛ‬سح و ٍ خ "‪"background-image‬‬

‫‪.‬‬ ‫‪ ٛ‬ح و ٍ ‪١‬خ ‪ٕ ٞ‬‬ ‫‪١‬خ ‪ background-image‬ز َ ٌ‪ٛ‬‬

‫ا خ ‪ ٟ‬اٌّض ي أ ٔ ٖ‪ّ٠ ،‬ىٕه ئٔ اي اٌ ‪ ٛ‬ح ٌزغ ة ثٕ ه ٍ‪ٝ‬‬ ‫‪ ٛ‬ح‬ ‫ّض ً لّٕ ث ز َ‬

‫‪١‬خ ‪ٕ ٌٍ background-image‬‬ ‫ؾخ لُ ثز ‪١‬‬ ‫‪ ٛ‬ح اٌ ا خ و ٍ ‪١‬خ ٌٍ‬ ‫ي‬

‫٘ ا‬، ‫ ا اٌ ى‬ٙ‫سح ث‬ٛ ٌ‫ٔب ِغبس ا‬ ‫و‬ :ٗ ‫أز‬

"background-repeat"‫سح اٌ ٍ خ‬ٛ ‫ىشاس‬

background-repeat. ‫خ‬١ ٌٍ ٙ ْ‫ّىٓ أ‬٠ ُ١‫ث ل‬ ٍِ ٖ ٔ ‫ي أ‬ٚ ‫ اٌغ‬ٟ

‫ت‬ ‫اى‬ ‫ف‬ ‫اى‬ ‫ٍ ه‬

Background-repeat: repeat-x ًٛ‫ان ٕسة خخ شس أ م‬ ‫ْذ ان ل‬

background-repeat: repeat-y ًٚ‫ان ٕسة خخ شس ػ ٕد‬ ‫ْذ ان ل‬

background-repeat: repeat ًٚ‫ً ٔػ ٕد‬ٛ‫ان ٕسة خخ شس أ م‬ ‫ْذ ان ل‬

background-repeat: no-repeat ٘ ‫نٍ حخ شس‬ ‫ْذ ان ل‬

Background-repeat: repeat-x ًٛ‫ْذ ان ل ان ٕسة خخ شس أ م‬

background-repeat: repeat-y ًٚ‫ْذ ان ل ان ٕسة خخ شس ػ ٕد‬

background-repeat: repeat ًٚ‫ً ٔػ ٕد‬ٛ‫ْذ ان ل ان ٕسة خخ شس أ م‬

background-repeat: no-repeat ٘ ‫ْذ ان ل نٍ حخ شس‬

:: ‫ ا اٌ ى‬ٙ‫اِ ث‬ٚ ‫غت أْ ىزت ا‬٠ ‫خ‬١ ٍ ٌ‫ ح ا‬ٛ ‫ِض ً ٌزغٕت ى ا‬

h1 { ‫ذة ن ُ ح شاس‬ٚ‫ ت ان ذ‬ٛ‫ت ْزة انم‬ ‫حى ا‬

‫اٌم‪ّ١‬خ‬ ‫اٌ‪ٛ‬‬ ‫ِض ي‬

‫‪Background-attachment: fixed‬‬ ‫اٌ ‪ ٛ‬ح زجم‪ ٝ‬ثزخ‬ ‫٘ اٌّض ي‬

‫‪ ٛ‬ح اٌ ٍ ‪١‬خ‪:‬‬ ‫اٌّض ي ا ٔ ٖ ‪٠‬ج‪ ٓ١‬و‪١ ١‬خ ا ز‪ ١‬اٌم‪ّ١‬خ إٌّ جخ ٌزضج‪١‬ذ‬

‫ٕ٘ ن ؿ ق ِ زٍ خ ٌزؾ ‪ ٠‬ل‪ّ١‬خ ‪ٌ ،background-position‬ىٓ وٍ‪ ٔ ٍٝ ُ ٕ ٙ‬ك ‪ٚ‬ا ‪،‬‬

‫اٌغ ‪ٚ‬ي أ ٔ ٖ ‪ ٛ٠‬ؼ ث ٌّ ‪ ِٓ ٠‬ا ِضٍخ‬

background-position: 50% ‫ت ٔس‬ ‫غ س ان‬ٚ ٍ‫ان غ ت ي‬ ‫ يُخ‬ٙ ‫ْزِ ان ٕسة ٔ ؼ‬

:‫خ‬ ٌ‫ٓ ا‬١ّ٠ ٍٝ ‫ أ‬ٟ ‫خ‬١ ٍ ٌ‫ ح ا‬ٛ ٚ ‫خ‬١ ١‫ ؼ و‬ٛ٠ ٖ ٔ ‫اٌّض ي أ‬

"background" ‫ب‬ ٌ‫ّ و ا‬

ٙ‫ ىزج‬ٟ‫اٌز‬ ‫ا‬ ١ٍ‫ م‬ٌٟ ‫ث ٌز‬ٚ ‫ح‬ ّ ‫ّىٕه‬٠background َ‫ث ز ا‬

: ‫٘ ٖا‬ ‫ّىٓ ا ز‬٠ ً ‫ّض‬

: ‫م‬ ‫ا‬ٚ َ‫غخ ث ز ا‬١‫إٌز‬ ٔ ‫ك‬١‫ّىٓ ؾم‬٠ background َ‫ث ز ا‬

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

:ٓ١ّ١ٌ‫ ا‬ٌٝ‫ئ‬ ١ٌ‫ ِٓ ا‬- ‫ ا اٌ ى‬ٙ‫ت ث‬ ‫اٌم ّخ‬

background: #FFCC66 url("butterfly.gif") no-repeat;

ّ‫ز‬ ‫ اٌّز خ‬، ‫ م‬HTML َ‫ ث ز ا‬ٙ‫م‬١‫ج‬ ‫ّىٕه‬٠ ‫ح‬٠ ً ‫ٍّذ ؿ ل‬ ٌ‫ ٘ ا‬ٟ

‫ِخ‪،‬‬ ‫‪ٛ‬ؽ ث ّ ء ِؾ ح أ‪ ٚ‬أ ّ ء‬ ‫ز َ ٌز ٕ‪، ٙ ١‬‬ ‫‪ٛ‬ؽ‬ ‫ٕ٘ ن ٔ‪ ِٓ ْ ٛ‬أ ّ ء اٌ‬

‫‪ٛ‬ؽ ث ّ ء ِؾ ح ٘‪"Times New Roman" ٚ "Arial" ٟ‬أ‪"Tahoma". ٚ‬‬ ‫أِضٍخ ٌ‬

‫‪ٛ‬ؽ ‪ ٛ٠‬ؼ ‪ ٟ‬اٌّض ي اٌز ٌ‪:ٟ‬‬ ‫ز ف ث‪ ٓ١‬أٔ‪ٛ‬ا اٌ‬ ‫ا‬