اﻟﺳﻼم ﻋﻠﯾﻛم ورﺣﻣﺔ ﷲ وﺑرﻛﺎﺗﮫ
ﻓﻰ ھدف ﻣﻧﺎ ﻟﺗﺳﮭﯾل ﻟﻐﺎت اﻟﺑرﻣﺟﺔ ﻋﻠﻰ ﻛل ﻣن ﯾود ﺗﻌﻠﻣﮭﺎ اﻟﯾوم اﻗدم ﻟﻛم
ھذا اﻟﻣﻠف وھو ﻣﺣﺗوى ﺷﺎﻣل ﻟﺟﻣﯾﻊ اﻟﻌﻧﺎﺻر ﻓﻰ ﻟﻐﺔ ، 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
