‫اﻟﺳﻼم ﻋﻠﯾﻛم ورﺣﻣﺔ ﷲ وﺑرﻛﺎﺗﮫ‬

‫ﻓﻰ ھدف ﻣﻧﺎ ﻟﺗﺳﮭﯾل ﻟﻐﺎت اﻟﺑرﻣﺟﺔ ﻋﻠﻰ ﻛل ﻣن ﯾود ﺗﻌﻠﻣﮭﺎ اﻟﯾوم اﻗدم ﻟﻛم‬
‫ھذا اﻟﻣﻠف وھو ﻣﺣﺗوى ﺷﺎﻣل ﻟﺟﻣﯾﻊ اﻟﻌﻧﺎﺻر ﻓﻰ ﻟﻐﺔ ‪ ، css‬ﺟﺎءت ﻓﻛره‬
‫ھذا اﻟﻛﺗﺎب ﻣن ﻣﻧﺑﻊ اﻧﻧﻰ اﺣﯾﺎﻧﺎ اﻧﺳﻰ اﺣد اﻟﻌﻧﺎﺻر واﺑﺣث ﻋﻧﮭﺎ طوﯾﻼ‬
‫ﺣﺗﻰ اﺟدھﺎ ‪ ،‬اﻟﯾوم ھذا اﻟﻛﺗﺎب ﺳوف ﯾﺣﺗوى ﻋﻠﻰ ﻛل اﻟﻌﻧﺎﺻر ﺑطرﯾﻘﺔ‬
‫ﻣﺑﺳطﺔ و ﻟﻣن ﻻ ﯾﻌرف ﻣﺎ ھﻰ ﻟﻐﺔ ‪ css‬ھﻰ ﻟﻐﺔ ﺗﻧﺳﯾﻖ ﺻﻔﺣﺎت اﻟوﯾب‬
‫ﯾﻌﻧﻰ اﻻﻟون واﻟﺧﻠﻔﯾﺎت وﺗﻧﺳﯾﻖ اﻟﻧﺻوص واﻟﻣﺣﺎذاة وﻏﯾرھﺎ ﻣن اﻻدوات‬
‫اﻟﺗﺟﻣﯾﻠﺔ اﻟﺗﻰ ﺗﺣﺗﺎﺟﮭﺎ ﺻﻔﺣﺎت اﻟوﯾب
وﺷﻛل ﻛل ﺧﺎﺻﯾﺔ ﯾﻛون ﻛﺎﻟﺗﺎﻟﻰ
‬

‫اﻟﻠﻐﺔ ﻋﺑﺎرة ﻋن ﻋدد ﻣن اﻟﻌﻧﺎﺻر ھدﻓﻧﺎ اﻟﯾوم ھو ﺷرﺣﮭﺎ وﻛﺗﺎﺑﺔ وظﯾﻔﺔ‬

‫ﻛل ﺧﺎﺻﯾﺔ‬
‫اﻟﺟدول اﻟﺗﺎﻟﻰ ﺳوف ﯾﺣﺗوى ﻋﻠﻰ ﺟﻣﯾﻊ اﻟﻌﻧﺎﺻر
‬
‫اﻟﻌﻧﺻر ‪element‬‬ ‫اﻟوظﯾﻔﺔ ‪function‬‬ ‫طرﯾﻘﺔ اﻟﻛﺗﺎﺑﺔ ‪syntax‬‬
‫‪Background-color‬‬ ‫};‪ Body{background-color:black‬ﺗﺿﻊ ﻟون اﻟﺧﻠﻔﯾﺔ‬
‫‪Background-image‬‬ ‫ﺗﺿﻊ ﺻورة ﻓﻰ اﻟﺧﻠﻔﯾﺔ‬ ‫};)‪Body{background-iamge:url(1.png‬‬
‫‪Background-repeat:-‬‬ ‫ﻟﺗﻛرار اﻟﺻورة اﻓﻘﻰ او رأﺳﻰ‬
‫‪Repeat-x‬‬ ‫ﻟﺗﻛرار اﻻﻓﻘﻰ‬ ‫};‪Body{background-repeat:repeat-x‬‬
‫‪Repeat-y‬‬ ‫ﻟﺗﻛرار اﻟرأﺳﻰ‬ ‫};‪Body{background-repeat:repeat-y‬‬
‫‪No-repeat‬‬ ‫ﻟن ﯾﺗم ﺗﻛرار اﻟﺻورة‬ ‫};‪Body{background-repeat:no-repeat‬‬
‫‪Background-attachment:-‬‬ ‫ﺗﺣرﯾك اﻟﺧﻠﻔﯾﺔ ﻣﻊ اﻟﻣﺣﺗوى ام ﺛﺑوﺗﮭﺎ‬
‫‪Scroll‬‬ ‫ﺗﺗﺣرك اﻟﺧﻠﻔﯾﺔ ﻣﻊ اﻟﻣﺣﺗوى‬ ‫};‪Body{background-attachment:scroll‬‬
‫‪Fixed‬‬ ‫اﻟﺧﻠﻔﯾﺔ ﺛﺎﺑﺗﺔ‬ ‫};‪Body{background-attachment:fixed‬‬
‫‪Local‬‬ ‫ﺗﺗﺣرك اﻟﺧﻠﻔﯾﺔ ﻣﻊ ﻣﺣﺗوي ﻋﻧﺎﺻرھﺎ‬ ‫};‪Body{background-attachment:local‬‬
‫‪Background-position:-‬‬ ‫ﻟﺗﺣدﯾد ﻣﻛﺎن اﻟﺧﻠﻔﯾﺔ‬
‫‪Left top‬‬ ‫ﺗﺿﻊ اﻟﺧﻠﻔﯾﺔ اﻋﻠﻰ اﻟﯾﺳﺎر‬ ‫};‪Body{background-position:left top‬‬
‫‪Left center‬‬ ‫ﺗﺿﻊ اﻟﺧﻠﻔﯾﺔ اوﺳط اﻟﯾﺳﺎر‬ ‫};‪Body{background-position:left center‬‬
‫‪Left bottom‬‬ ‫ﺗﺿﻊ اﻟﺧﻠﻔﯾﺔ اﺳﻔل اﻟﯾﺳﺎر‬ ‫};‪Body{background-position:left bottom‬‬
‫‪Right top‬‬ ‫ﺗﺿﻊ اﻟﺧﻠﻔﯾﺔ اﻋﻠﻰ اﻟﯾﻣﯾن‬ ‫};‪Body{background-position:right top‬‬
‫‪Right center‬‬ ‫ﺗﺿﻊ اﻟﺧﻠﻔﯾﺔ اوﺳط اﻟﯾﻣﯾن‬ ‫};‪Body{background-position:right center‬‬
‫‪By: abdelhakeem kasem‬‬
 element ‫اﻟﻌﻧﺻر‬ function ‫اﻟوظﯾﻔﺔ‬ syntax ‫طرﯾﻘﺔ اﻟﻛﺗﺎﺑﺔ‬
Right bottom ‫ﺗﺿﻊ اﻟﺧﻠﻔﯾﺔ اﺳﻔل اﻟﯾﻣﯾن‬ Body{background-position:right bottom;}
Center top ‫ﺗﺿﻊ اﻟﺧﻠﻔﯾﺔ اﻋﻠﻰ اﻟوﺳط‬ Body{background-position:center top;}
Center center ‫ﺗﺿﻊ اﻟﺧﻠﻔﯾﺔ اوﺳط اﻟوﺳط‬ Body{background-position:center center;}
Center bottom ‫ﺗﺿﻊ اﻟﺧﻠﻔﯾﺔ اﺳﻔل اﻟوﺳط‬ Body{background-position:center
bottom;}
X% y% ‫ ﻟﺗﺣدﯾد اﻟﻧﺳﺑﺔ اﻟﻣﺋوﯾﺔ ﻟوﺿﻌﯾﺔ اﻟﺧﻠﻔﯾﺔ‬Body{background-position:50% 50%;}
‫ﻣن اﻻﻓﻘﻰ واﻟرأﺳﻰ‬
X px y px px ‫ ﻟﺗﺣدﯾد وﺿﻌﯾﺔ اﻟﺧﻠﻔﯾﺔ ﻋن طرﯾﻖ‬Body{background-position:50 px 50 px;}
Text:- ‫اﻟﺗﺣﻛم ﻓﻰ ﺗﻧﺳﯾﻖ اﻟﻧﺻوص‬
color ‫ ﻟﺗﻐﯾﯾر ﻟون اﻟﺧط‬P{color:#ffff;}
Direction:- ‫ﻟﺗﺣدﯾد اﺗﺟﺎه اﻟﻛﺗﺎﺑﺔ‬
ltr ‫ اﺗﺟﺎه اﻟﻛﺗﺎﺑﺔ ﻣن اﻟﯾﺳﺎر اﻟﻰ اﻟﯾﻣﯾن‬Body{direction:ltr;}
rtl ‫ اﺗﺟﺎه اﻟﻛﺗﺎﺑﺔ ﻣن اﻟﯾﻣﯾن اﻟﻰ اﻟﯾﺳﺎر‬Body{direction:rtl;}
Letter-spacing:- ‫ﻟزﯾﺎدة او ﺗﻘﻠﯾل اﻟﻔراﻏﺎت ﺑﯾن اﻟﺣروف‬
normal ‫ ﻻ ﯾوﺟد ﻓراﻏﺎت ﺑﯾن اﻟﺣروف‬H1{letter-spacing:normal;}
length ‫ ﺗﺣدﯾد ﻗﯾﻣﺔ اﻟﻔراغ ﺑﺎﻟﺳﺎﻟب او اﻟﻣوﺟب‬H1{letter-spacing:-3px;}
Line-height:- ‫ﺗﺣدﯾد ارﺗﻔﺎع اﻟﺧط‬
normal ‫ اﻻرﺗﻔﺎع ﻋﺎدى اﻟﻘﯾﻣﺔ اﻻﻓﺗراﺿﯾﺔ‬H1{letter-height:normal;}
number ‫ﻗﯾﻣﺔ اﻻرﺗﻔﺎع اﻟرﻗم
ﺣﺟم اﻟﺧط اﻻن‬ H1{letter-height:0.5;}
lenght ‫ﺿﻊ اﻻرﺗﻔﺎع ﺑﺄﺳﺗﺧدام ارﻗﺎم‬ H1{letter-height:30px;}

‫اﺳﺗﺧدم اﻟﻧﺳﺑﺔ اﻟﻣﺋوﯾﺔ ﻟﺗﺣدﯾد اﻻرﺗﻔﺎع‬ H1{letter-height:10%;}
Text-align:- ‫ﺗﺣدﯾد ﻣﻛﺎن اﻟﻧص اﻓﻘﯾﺎ‬
left ‫ﯾﻛون اﻟﻧص ﺑﺎﻟﯾﺳﺎر‬ H1{text-align:left;}
right ‫ﯾﻛون اﻟﻧص ﺑﺎﻟﯾﻣﯾن‬ H1{text-align:right;}
center ‫ﯾﻛون اﻟﻧص ﺑﺎﻟوﺳط‬ H1{text-align:center;}
justify ‫ﺗﻣدد اﻟﺳطور ﺑﺣﯾث ﯾﻛون ﻟﻛل ﻛﻠﻣﺔ‬ H1{text-align:justify;}
‫ﻋرض ﻣﺗﺳﺎوى‬
Text-decoration:- ‫ﺗﺣدﯾد اﻟﺗزﯾن اﻟﻣﺿﺎف اﻟﻰ اﻟﻧص‬
none ‫ﻟﯾس ھﻧﺎك ﺗزﯾﯾن ﯾﺿﺎف اﻟﻰ اﻟﻧص‬ H1{text-decoration:none;}
underline ‫اﺿﺎﻓﺔ ﺧط ﺗﺣت اﻟﻧص‬ H1{text-decoration:underline;}
overline ‫اﻟﺧط ﻓوق اﻟﻧص‬ H1{text-decoration:overline;}
linethrough
‫اﻟﺧط ﻋﻠﻰ اﻟﻛﻠﻣﺔ
ﺷطب‬ H1{text-decoration:linethrough;}
Line-indent:- ‫اﺿﺎﻓﺔ ﻣﺳﺎﻓﺔ ﻗﺑل اول ﺳطر ﻓﻰ اﻟﻔﻘرة‬
lenght ‫اﺿﺎﻓﺔ ﻗﯾﻣﺔ اﻟﻣﺳﺎﻓﺔ ﺑﺎﻻرﻗﺎم‬ p{line-indent:30px;}

‫اﺿﺎﻓﺔ اﻟﻣﺳﺎﻓﺔ ﺑﺎﻟﻧﺳﺑﺔ اﻟﻣﺋوﯾﺔ‬ p{line-indent:30%;}
Text-shadow:- ‫اﺿﺎﻓﺔ ظل ﻟﻧص‬
none ‫ﻻ ﯾوﺟد ظل‬
h-shadow ‫ﻗﯾﻣﺔ اﻟظل ﺑﺎﻻﺗﺟﺎه اﻻﻓﻘﻰ
ﯾﺟب‬ p{text-shadow:30px 40px;}

‫اﺿﺎﻓﺗﮫ‬
v-shadow ‫ﻗﯾﻣﺔ اﻟظل ﺑﺎﻻﺗﺟﺎه اﻟراﺳﻰ
ﯾﺟب‬ p{text-shadow:30px 40px;}

‫اﺿﺎﻓ ﺗﮫ‬
Blur-raduis
‫ ﻗطر اﻟظل
اﺧﺗﯾﺎرى‬p{text-shadow:30px 40px 5px;}
color
‫ ﻟون اﻟظل
اﺧﺗﯾﺎرى‬p{text-shadow:30px 40px 5px #ffff;}
By: abdelhakeem kasem
 ‫اﻟﻌﻧﺻر ‪element‬‬ ‫اﻟوظﯾﻔﺔ ‪function‬‬ ‫طرﯾﻘﺔ اﻟﻛﺗﺎﺑﺔ ‪syntax‬‬
‫‪Text-transform:-‬‬ ‫ﺗﻛﺑﯾر اﻟﺣروف اﻟﺻﻐﯾرة ﻓﻰ اﻻﻧﺟﻠﯾزﯾﺔ‬
‫‪none‬‬ ‫ﻻ ﺗﻛﺑﯾر‬ ‫};‪p{text-transformation:none‬‬
‫‪Capitalize‬‬ ‫ﺗﺣوﯾل اول ﺣرف ﻓﻰ اﻟﻛﻠﻣﺔ اﻟﻰ ﻛﺑﯾرة‬ ‫};‪p{text-transformation:capitalize‬‬
‫‪Uppercase‬‬ ‫ﺗﺣوﯾل اﻟﺣروف ﻛﻠﮭﺎ اﻟﻰ ﻛﺑﯾرة‬ ‫};‪p{text-transformation:uppercase‬‬
‫‪lowercase‬‬ ‫ﺗﺣوﯾل اﻟﺣروف ﻛﻠﮭﺎ اﻟﻰ ﺻﻐﯾرة‬ ‫};‪p{text-transformation:lowercase‬‬
‫‪Unicode-bidi:-‬‬ ‫ﻗﻠب اﺗﺟﺎه اﻟﺣروف‬
‫‪Normal‬‬ ‫ﯾﺑﻘﻰ اﻻﺗﺟﺎه اﻟﻣﺣدد ﻛﻣﺎ ھو‬ ‫};‪p{unicode-bidi:normal‬‬
‫‪Bidi-override‬‬ ‫ﺗطﺑﻖ ﻗﻠب اﻟﺣروف ﺣﺳب اﻻﺗﺟﺎه‬ ‫};‪p{unicode-bidi:bidi-override‬‬
‫‪Vertical-align:-‬‬ ‫اﻟﻣﺣﺎذاة اﻟرأﺳﯾﺔ ﻟﻧص ﻣﻌﯾن‬
‫‪baseline‬‬ ‫ﯾﻛون اﻟﻧص ﺑﻣﺣﺎذاة اﻟﺳطر اﻟﺗﺎﺑﻊ ﻟﮫ‬ ‫};‪p{vetical-align:baseline‬‬
‫‪top‬‬ ‫ﯾﻛون ھﻧﺎ اﻋﻠﻰ ﻣن اﻋﻠﻰ ﻋﻧﺻر ﺑﺎﻟﺳطر‬ ‫};‪p{vetical-align:top‬‬
‫‪sub‬‬ ‫ﯾﻛون اﻟﻧص اﺳﻔل اﻟﻧص وﺗﺎﺑﻊ ﻟﮫ‬ ‫};‪p{vetical-align:sub‬‬
‫‪super‬‬ ‫اﻟﻧص اﻋﻠﻰ ﻣن اﻋﻠﻰ ﻋﻧﺻر ﺑﺎﻟﺳطر‬ ‫};‪p{vetical-align:super‬‬
‫
‬ ‫رﻓﻊ او ﺗﻧزﯾل اﻟﻧص ﺑﻧﺳﺑﺔ ﻣن ارﺗﻔﺎع‬ ‫};‪p{vetical-align: -20%‬‬
‫اﻟﺳطر ‪ line heigh‬ﺑﺎﻟﺳﺎﻟب او ﻣوﺟب‬
‫‪lenght‬‬ ‫اﺿﺎﻓﺔ اﻟﺗﺳوﯾﺔ ﺑﺎﻟﺳﺎﻟب اﺳﻔل اﻟﺳطر او‬ ‫};‪p{vetical-align:-20px‬‬
‫ﺑﺎﻟﻣوﺟب اﻋﻠﻰ اﻟﺳطر‬
‫‪Text-top‬‬ ‫ﺗﺳوﯾﺔ اﻋﻠﻰ اﻟﻧص ﻣﻊ اﻋﻠﻰ ﻋﻧﺻر ﻓﻰ‬ ‫};‪p{vetical-align:text-top‬‬
‫اﻟﺳطر‬
‫‪middle‬‬ ‫وﺿﻊ اﻟﻧص ﻓﻰ ﻧﺻف اﻟﻣﺳﺎﻓﺔ‬ ‫};‪p{vetical-align:middle‬‬
‫‪Text-bottom‬‬ ‫ﺗﺳوﯾﺔ اﺳﻔل اﻟﻧص ﻣﻊ اﺳﻔل اﻟﺳطر‬ ‫};‪p{vetical-align:text-bottom‬‬
‫‪White-spacing:-‬‬ ‫اﻟﻣﺳﺎﻓﺔ اﻟﺑﯾﺿﺎء داﺧل ﻋﻧﺻر ﻣﻌﯾن‬
‫‪normal‬‬ ‫ﺗﺗﻧﻘل اﻟﻛﺗﺎﺑﺔ اﻟﻰ ﺳطر ﺟدﯾد ﻋن اﻛﺗﻣﺎل‬ ‫};‪p{white-spacing:normal‬‬
‫اﻟﺳطر‬
‫‪nowrap‬‬ ‫ﻻ ﺗﻧﺗﻘل اﺑدا اﻟﻰ ﺳطر ﺟدﯾد ﻗﺑل اﺿﺎﻓﺔ‬ ‫};‪p{white-spacing:nowrap‬‬
‫>‪ </br‬اﻟﻣﺳﺎﻓﺔ‬
‫‪Pre-line‬‬ ‫ﺗﻧﺗﻘل اﻟﻛﺗﺎﺑﺔ اﻟﻰ ﺳطر ﺟدﯾد ﻋﻧدﻣﺎ ﯾﻠزم‬ ‫};‪p{white-spacing:pre-line‬‬
‫اﻻﻣر وﻋﻧد اﻟﻣﺳﺎﻓﺎت ‪breaks‬‬
‫‪Pre-wrap‬‬ ‫ﺳوف ﺗﻛون ھﻧﺎك ﻣﺳﺎﺣﺔ ﯾﻔﺗرﺿﮭﺎ‬ ‫};‪p{white-spacing:pre-wrap‬‬
‫اﻟﻣﺗﺻﻔﺢ ﻗﺑل اﻟﻔﻘرة وﺗﺗﻧﻘل اﻟﻛﺗﺎﺑﺔ اﻟﻰ‬
‫ﺳطر ﺟدﯾد ﻋﻧدﻣﺎ ﯾﻠزم اﻻﻣر او‪breaks‬‬
‫‪Word-spacing:-‬‬ ‫زﯾﺎدة او اﻧﻘﺎص اﻟﻣﺳﺎﻓﺔ ﺑﯾن اﻟﻛﻠﻣﺎت‬
‫‪normal‬‬ ‫اﻟﻘﯾﻣﺔ اﻻﻓﺗراﺿﯾﺔ‬ ‫};‪p{word-spacing:normal‬‬
‫‪lenght‬‬ ‫اﺿﺎﻓﺔ ﻗﯾﻣﺔ ﺑﻌﯾﻧﺔ ﺑﺎﻻرﻗﺎم‬ ‫};‪p{word-spacing:5px‬‬
‫‪Font:-‬‬ ‫ﺗﻌﻌﯾن ﺧﺻﺎﺋص اﻟﺧط‬
‫‪Font-family‬‬ ‫};‪ p{font-family:georgia‬اﺿﺎﻓﺔ ﻋﺎﺋﻠﺔ ﺧطوط ﻣﺛﻼ ‪geogria‬‬
‫ﯾﻣﻛﻧك اﻟﺑﺣث ﻋن اﻟﺧطوط ھﻧﺎ‬
‫‪Font-size‬‬ ‫};‪ p{font-size:30px‬ﺣﺟم اﻟﺧط‬
‫};‪p{font-size:30%‬‬
‫‪Font-style:-‬‬ ‫ﻧﻣط اﻟﺧط‬
‫‪normal‬‬ ‫};‪ p{font-style:normal‬اﻟﻣﺗﺻﻔﺢ ﯾﻌرض اﻟﺷﻛل اﻟﻌﺎدى‬
‫‪Italic‬‬ ‫};‪ p{font-style:italic‬اﻟﺧط اﻟﻣﺎﺋل‬
‫‪Font-variant:-‬‬ ‫ﺗﺟﻌل اﻟﺧطوط ‪small-caps‬‬
‫‪normal‬‬ ‫};‪ p{font-variant:normal‬اﻟﺧط اﻟﻌﺎدى‬

‫‪By: abdelhakeem kasem‬‬

 ‫اﻟﻌﻧﺻر ‪element‬‬ ‫اﻟوظﯾﻔﺔ ‪function‬‬ ‫طرﯾﻘﺔ اﻟﻛﺗﺎﺑﺔ ‪syntax‬‬
‫‪Small-caps‬‬ ‫};‪ p{font-variant:small-caps‬ﺗﺟﻌل اﻟﺧطوط ‪small caps‬‬
‫‪Font-weight:-‬‬ ‫وزن اﻟﺧط
ﺗرﻛﯾز اﻟﻛﺗﺎﺑﺔ
‬
‫‪bold‬‬ ‫};‪ p{font-weight:bold‬اﻟﺧط اﻟﺛﻘﯾل اﻟﻣﻌروف‬
‫‪value‬‬ ‫"‪ p{font-weight:400;} = "light‬اﺿﺎﻓﺔ ﻗﯾﻣﺔ ‪400‬اﻟﺧﻔﯾف وال ‪700‬‬
‫"‪ p{font-weight:700;} = "bold‬اﻟﺛﻘﯾل‬
‫‪Links:-‬‬ ‫ﺗﻧﺳﯾﻖ اﻟرواﺑط
ﺧط ‪ ،‬ﺧﻠﻔﯾﺔ ‪








،‬‬
‫‪visited‬‬ ‫};‪ A{ color:green‬ﺗﻧﺳﯾﻖ اﻟرواﺑط اﻟﺗﻰ ﺗم زﯾﺎرﺗﮭﺎ ﻣﺛﻼ‬
‫};‪ a:visited{color:red‬ﻟﺟﻌل اﻟراﺑط ﺗم زﯾﺎرﺗﮫ ﺑﺎﻻﺣﻣر‬
‫‪hover‬‬ ‫};‪ a:hover{color:red‬ﺗﻧﺳﯾﻖ اﻟوﻗوف ﺑﺎﻟﻣﺎوس ﻋﻠﻰ اﻟراﺑط‬
‫‪active‬‬ ‫};‪ a:active{color:red‬اﻟﺗﻧﺳﯾﻖ ﻟﺣظﺔ اﻟﺿﻐط ﻋﻠﻰ اﻟراﺑط‬
‫‪borders:-‬‬ ‫اﺿﺎﻓﺔ اﻟﺣدود وﺗﻧﺳﯾﻘﮭﺎ وﻟﺗطﺑﯾﻖ‬
‫‪border-top‬ﺣد ﻣن اﻋﻠﻰ‬ ‫اﻟﺣدود ﯾﺟب ﺗﺣدﯾد ﺣﺟﻣﮭﺎ ﻣﺛﻼ ‪5px‬‬
‫‪ border-bottom‬ﺣد ﻣن اﺳﻔل‬ ‫وﻟوﻧﮭﺎ ﺛم اﺣد اﺷﻛﺎل اﻟﺣدود اﻟﺗﺎﻟﯾﺔ

‬
‫‪ border-left‬ﺣد ﻣن اﻟﺷﻣﺎل‬
‫‪ border-right‬ﺣد ﻣن اﻟﯾﻣﯾن‬
‫‪dotted‬‬ ‫ﺷﻛل اﻟﺣدود اﻟﻣﻧﻘط















‬ ‫};‪P{border-top: 5px red dotted‬‬
‫‪dashed‬‬ ‫ﺷﻛل اﻟﻣﺗﻘطﻊ





















‬ ‫};‪P{border-bottom: 5px red dashed‬‬
‫‪solid‬‬ ‫ﺷﻛل اﻟﻣﺗﺻل ــــــــــــــــــــــــــــــــــــ‬ ‫};‪P{border-left: 5px red solid‬‬
‫‪groove‬‬ ‫ﺷﻛل ﺛﻼﺛﻰ اﻻﺑﻌﺎد وﺗﺧﺗﻠف ﺑﺎﻻﻟوان‬ ‫};‪P{border-right: 5px red groove‬‬
‫‪ridge‬‬ ‫ﺷﻛل ﺛﻼﺛﻰ اﻻﺑﻌﺎد وﺗﺧﺗﻠف ﺑﺎﻻﻟوان‬ ‫};‪P{border-top: 5px red ridge‬‬
‫‪inset‬‬ ‫ﺷﻛل ﺛﻼﺛﻰ اﻻﺑﻌﺎد ﻟداﺧل ﺣﺳب اﻟﻠون‬ ‫};‪P{border-left: 5px red inset‬‬
‫‪outset‬‬ ‫ﺷﻛل ﺛﻼﺛﻰ اﻻﺑﻌﺎد ﻟداﺧل ﺣﺳب اﻟﻠون‬ ‫};‪P{border-right: 5px red outset‬‬
‫‪Margin:-‬‬ ‫ﻣﺣﺎذاه اﻟﻌﻧﺻر ﻣن اﻟﺧﺎرج ﻣن اﻟﯾﻣﯾن‬
‫‪Margin-top‬ﻣﺣﺎذاة ﻣن اﻻﻋﻠﻰ‬ ‫او اﻟﯾﺳﺎر او اﻻﻋﻠﻰ او اﻻﺳﻔل‬
‫‪ Margin-bottom‬ﻣﺣﺎذاة اﺳﻔل‬
‫‪ Marign-right‬ﻣﺣﺎذاة ﻣن ﯾﻣﯾن‬
‫‪Marign-left‬ﻣﺣﺎذاة ﯾﺳﺎر‬
‫‪auto‬‬ ‫};‪ P{margin:auto‬ﯾﺿﻊ اﻟﻣﺗﺻﻔﺢ ﻗﯾﻣﺔ اﻓﺗراﺿﯾﺔ‬
‫‪lenght‬‬ ‫};‪ P{margin-left:5px‬ﺿﻊ ﻗﯾﻣﺔ ﻣﻌﯾﻧﺔ ب ‪ px‬ﻣﺛﻼ‬
‫
‬ ‫};‪ P{margin-right:5%‬ﺿﻊ ﻗﯾﻣﺔ ﺑﺎﻟﻧﺳﺑﺔ اﻟﻣﺋوﯾﺔ‬
‫‪Padding:-‬‬ ‫ﻟﻌﻣل ﻣﺣﺎذاة ﻟﻠﻌﻧﺻر ﻣن اﻟداﺧل اى ﻣن‬
‫‪Padding-right‬ﻣﺣﺎذاة ﯾﻣﯾن‬ ‫داﺧل ﺣدود اﻟﺗﻰ ﯾﻘﻊ ﺑﮭﺎ اﻟﻌﻧﺻر‬
‫‪Padding-left‬ﻣﺣﺎذاة ﯾﺳﺎر‬
‫‪Padding-top‬ﻣﺣﺎذاة اﻋﻠﻰ‬
‫‪ Padding-bottom‬ﻣﺣﺎذاة اﺳﻔل‬
‫‪lenght‬‬ ‫ﺿﻊ ﻗﯾﻣﺔ ﻣﻌﯾﻧﺔ ب ‪ px‬ﻣﺛﻼ‬ ‫};‪P{padding-left:5px‬‬
‫
‬ ‫ﺿﻊ ﻗﯾﻣﺔ ﺑﺎﻟﻧﺳﺑﺔ اﻟﻣﺋوﯾﺔ‬ ‫};‪P{padding-left:5px‬‬
‫‪Dimentions:-‬‬ ‫ﻟوﺿﻊ ﻗﯾم اﺑﻌﺎد ﻋﻧﺻر ﻣﻌﯾن‬
‫‪height‬‬ ‫طول اﻟﻌﻧﺻر‬ ‫};‪B{height:10px‬‬
‫‪Max-height‬‬ ‫اﻗﺻﻰ ﻗﯾﻣﺔ ﻟطول ﻋﻧﺻر‬ ‫};‪B{max-height:10px‬‬
‫‪Min-height‬‬ ‫اﻗل ﻗﯾﻣﺔ ﻟطول ﻋﻧﺻر‬ ‫};‪B{min-height:10px‬‬
‫‪width‬‬ ‫ﻋرض اﻟﻌﻧﺻر‬ ‫};‪B{width:10px‬‬
‫‪Max-width‬‬ ‫اﻗﺻﻰ ﻋرض ﻟﻌﻧﺻر ﻣﺎ‬ ‫};‪B{max-width:10px‬‬
‫‪Min-width‬‬ ‫اﻗل ﻋرض ﻟﻌﻧﺻر‬ ‫};‪B{min-width:10px‬‬
‫‪By: abdelhakeem kasem‬‬
 element ‫اﻟﻌﻧﺻر‬ function ‫اﻟوظﯾﻔﺔ‬ syntax ‫طرﯾﻘﺔ اﻟﻛﺗﺎﺑﺔ‬
Display:- ‫ﺗوﺿﺢ اذا ﻣﺎ ﻛﺎن ﺳﯾﺗم ﻋرض اﻟﻌﻧﺻر‬
‫وﻛﯾف ﯾﺗم ذﻟك واﻟﻘﯾم اﻻﻓﺗراﺿﯾﺔ ﺗﻛون‬
block ‫ او‬inline
inline ‫ﯾﺗم ﻋرض اﻟﻌﻧﺎﺻر ﺑﺟﺎﻧب ﺑﻌﺿﮭﺎ‬ Li{display:inline;}
block ‫ﯾﺗم ﻋرض اﻟﻌﻧﺎﺻر ﺗﺣت ﺑﻌﺿﮭﺎ‬ Li{display: inline;}
none ‫ﻻﺧﻔﺎء اﻟﻌﻧﺻر‬ Li{display: none;}
Visibility: hidden; ‫ﻻﺧﻔﺎء اﻟﻌﻧﺻر اﯾﺿﺎ‬ Li{visibility: hidden;}
Position:- ‫اﻟﺗﺣﻛم ﻓﻰ ﻣوﺿﻊ اﻟﻌﻧﺻر‬
static ‫وﺿﻌﮭﺎ ھو ﻧﻔس وﺿﻊ ﺑﻘﯾﺔ اﻟﺻﻔﺣﺔ‬ Div{position:static;}
relative ‫ﯾﻛون اﻟﻌﻧﺻر ﻓﻰ اﻟوﺿﻊ اﻟﻌﺎدى‬ Div{position:relative;}
absolute ‫ﯾﻛون ﻣﺗﻌﻠﻖ ﺑﺄﻗرب ﺟد ﻟﮫ ﻣوﺿﻊ ﻣﺣدد‬ Div{position:absolute;}
fixed ‫ﯾﺑﻘﻰ اﻟﻌﻧﺻر ﻓﻰ ﻧﻔس اﻟﻣﻛﺎن ﺣﺗﻰ ﻋﻧد‬ Div{position:fixed;}
‫ﺗﺣرﯾك اﻟﺻﻔﺣﺔ‬
Float:- ‫ﯾﺗم اﻧﺗﻘﺎل اﻟﻌﻧﺻر ﻛﻠﯾﺎ اﻟﻰ اﻟﻣﻛﺎن‬ Div{float:left;}
‫ ﯾﻧﺗﻘل اﻟﻌﻧﺻر اﻟﻰ‬left ‫اﻟﻣطﻠوب ﻣﺛﻼ‬ Div2{float:right;}
‫ اﻟﻰ اﻟﯾﻣﯾن وھﻛذا‬right ‫اﻟﯾﺳﺎر‬
Clear:- ‫ ﻟﻠﻌﻧﺻر‬float ‫ﯾﺗﺣﻛم ﻓﻰ ﺧﺎﺻﯾﺔ‬ Div2{float:both;}
Div2{float:left;}
Div2{float:right;}

‫ﺗم ﺑﺣﻣد ﷲ ﺗﻌﺎﻟﻰ ﻻى اﺿﺎﻓﺔ او ﻓﻛرة او اذا ﻛﻧت ﺗود‬

qassemblog ‫اﻻﻧﺿﻣﺎم اﻟﻰ ﻓرﯾﻖ‬

‫راﺳﻠﻧﻰ ھﻧﺎ‬
https://www.facebook.com/abdelhakeem.kasem

http://qassemblog.blogspot.com.eg
Abdelhakeem2020@outlook.com

By: abdelhakeem kasem