‫ور‬
‫م ور‬
‫م‬
‫ا‬
‫ا وم ا دم م‬
‫ل ن ود‬
‫ل تا ر‬
‫! ھدف‬
‫ ءت ! ره‬، css
! ‫" ا &ر‬
‫ ل‬# ‫ھذا ا ف وھو وى‬
‫طو‬
‫ا د ا &ر وا ث‬
‫ا‬
‫ھذا ا ب ن " ا ا‬
- ‫ل ا &ر طر‬
‫ ا وم ھذا ا ب وف وى‬، ‫ا دھ‬
‫ ت ا و ب‬/& ‫ق‬
‫ ھ‬css
‫ رف ھ‬. ‫و ن‬. ‫ط‬
‫دوات‬.‫ رھ ن ا‬3‫ ت و ق ا &وص وا ذاة و‬/ 1 ‫ ون وا‬.‫ا‬
:
‫ون‬
& 1 ‫ ل ل‬#‫ و‬. ‫ ت ا و ب‬/&
‫ا‬
‫ا‬
‫وظ‬
‫و‬
‫ا وم ھو ر‬
:‫ر‬
element ‫ر‬
‫ا‬
Background-color
Background-image
Background-repeat :-
‫ر ھد‬
‫ا‬
function
!"
‫ا وظ‬
‫( ون ا‬
‫ورة " ا‬
"%‫ورة ا &" او رأ‬
‫رة ن دد ن ا‬
.
‫وى‬
‫ا‬
‫ل‬
‫وف‬% " ‫ا !دول ا‬
syntax
‫طر & ا‬
Body{background-color:black;}
(
Body{background-iamge:url(1.png);}
‫رار ا‬
Repeat-x
"& *‫رار ا‬
Body{background-repeat:repeat-x;}
Repeat-y
"%‫رار ا رأ‬
Body{background-repeat:repeat-y;}
By: eng. Abdelhakeem Qassem
‫ورة‬
No-repeat
Background-attachment:-
‫ن م رار ا‬
‫ و‬+ ‫وى ام‬
‫وى‬
Scroll
Local
‫ا‬
‫ا‬
+
Fixed
‫رھ‬
‫ركا‬
‫رك ا‬
Body{background-attachment:scroll;}
‫ا‬
Body{background-attachment:fixed;}
‫وي‬
‫رك ا‬
‫نا‬
Background-position:-
Body{background-repeat:no-repeat;}
Body{background-attachment:local;}
‫دد‬
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;}
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
By: eng. Abdelhakeem Qassem
bottom;}
‫ا‬
X% y%
(‫و‬
‫و‬. ‫ ا‬% ‫د د ا‬
Body{background-posi'on:50% 50%;}
"%‫ن ا* &" وا رأ‬
X px y px
px ‫ن طر ق‬
‫وص‬
Text:-
‫ا‬
(‫د د و‬
‫قا‬% " ‫م‬
‫ا‬
‫ر ون ا ط‬
color
P{color:#ffff;}
‫ددا!ها‬
Direction:-
ltr
‫ن‬
rtl
‫ر‬% ‫نا"ا‬
‫را"ا‬% ‫نا‬
‫نا‬
‫ا!ها‬
Body{direction:ltr;}
‫ا!ها‬
Body{direction:rtl;}
Letter-spacing:-
‫ ت ن ا روف‬3‫ز دة او & ل ا را‬
normal
‫ ت ن ا روف‬3‫* و!د را‬
length
Line-height:-
normal
number
Body{background-posi'on:50 px 50 px;}
‫ ب او ا و!ب‬%
‫ا راغ‬
H1{le1er-spacing:normal;}
7‫دد‬
H1{le1er-spacing:-3px;}
‫د د ار ع ا ط‬
(‫ا* را‬
& ‫دى ا‬
‫ا*ر ع‬
‫م * !م ا ط ا*ن‬7‫ا*ر ع =ا ر‬
By: eng. Abdelhakeem Qassem
H1{le1er-height:normal;}
7
H1{le1er-height:0.5;}
lenght
%
Text-align:-
‫ م‬7‫ دام ار‬%9 ‫( ا*ر ع‬
‫د د ا*ر ع‬
H1{le1er-height:30px;}
‫و‬. ‫ ا‬% ‫ دم ا‬%‫ا‬
&‫نا صا‬
H1{le1er-height:10%;}
‫دد‬
left
‫ر‬%
‫ون ا ص‬
H1{text-align:left;}
right
‫ن‬
‫ون ا ص‬
H1{text-align:right;}
‫ط‬%‫و‬
‫ون ا ص‬
H1{text-align:center;}
center
justify
‫ث ون ل‬
‫طور‬% ‫دد ا‬
H1{text-align:justify;}
‫ وى‬% ‫رض‬
Text-decoration:-
‫ددا زنا (فا"ا ص‬
none
‫سھ ك ز ن (فا"ا ص‬
underline
‫تا ص‬
Line-indent:-
lenght
(‫ا‬
H1{text-decoration:underline;}
‫ا ط وق ا ص‬
overline
linethrough
‫ط‬
H1{text-decoration:none;}
"‫" طب‬
‫"ا‬
H1{text-decoration:overline;}
‫ا ط‬
‫طر " ا &رة‬% ‫ ل اول‬7
‫ م‬7‫*ر‬
% ‫ا‬
%
7
By: eng. Abdelhakeem Qassem
H1{text-decoration:linethrough;}
(‫ا‬
(‫ا‬
p{line-indent:30px;}
‫و‬. ‫ ا‬%
%
% ‫ا‬
‫ظل ص‬
Text-shadow:-
(‫ا‬
p{line-indent:30%;}
(‫ا‬
‫* و!د ظل‬
none
‫ا ظل * ! ه ا* &"" !ب‬
h-shadow
7
p{text-shadow:30px 40px;}
7
p{text-shadow:30px 40px;}
"= (‫ا‬
‫"" !ب‬%‫ا ظل * ! ه ا را‬
v-shadow
"= (‫ا‬
Blur-raduis
"‫رى‬
‫طر ا ظل "ا‬7
p{text-shadow:30px 40px 5px;}
color
" ‫رى‬
‫ون ا ظل " ا‬
p{text-shadow:30px 40px 5px #ffff;}
Text-transform:-
‫رة " ا* ! ز‬
‫ر‬
none
Capitalize
‫رة‬
"‫ا‬
‫ر ا روف ا‬
*
p{text-transformation:none;}
‫و ل اول رف " ا‬
p{text-transformation:capitalize;}
Uppercase
‫رة‬
"‫ا‬
‫و ل ا روف‬
p{text-transformation:uppercase;}
lowercase
‫رة‬
"‫ا‬
‫و ل ا روف‬
p{text-transformation:lowercase;}
Unicode-bidi :-
‫ ب ا ! ه ا روف‬7
By: eng. Abdelhakeem Qassem
‫ھو‬
Normal
‫ن‬
Vertical-align:-
top
‫&" ا* ! ه ا‬
p{unicode-bidi:normal;}
‫ب ا* ! ه‬% ‫ ب ا روف‬7 ‫ط ق‬
Bidi-override
baseline
‫دد‬
=
‫ص‬
%‫ذاة ا رأ‬
‫طر ا‬% ‫ذاة ا‬
‫ر‬
p{unicode-bidi:bidi-override;}
‫ا‬
‫ون ا ص‬
p{vetical-align:baseline;}
" ‫ون ھ ا " ن ا‬
p{vetical-align:top;}
‫طر‬%
sub
=
super
‫طر‬%
%
‫ ل ا ص و‬%‫ون ا ص ا‬
‫ر‬
p{vetical-align:sub;}
" ‫ا صا " نا‬
‫ن ار ع‬
% ‫او ز ل ا ص‬
‫ ب او‬%
p{vetical-align:super;}
‫ر‬
p{vetical-align: -20%;}
(‫ا‬
p{vetical-align:-20px;}
line heigh ‫طر‬% ‫ا‬
‫و!ب‬
lenght
‫طر‬% ‫ ل ا‬%‫ ب ا‬%
‫و‬% ‫ا‬
‫طر‬% ‫و!ب ا " ا‬
Text-top
" ‫ر‬
" ‫ا‬
‫او‬
‫و ا " ا ص‬%
p{vetical-align:text-top;}
‫طر‬% ‫ا‬
middle
% ‫فا‬
" ‫و( ا ص‬
By: eng. Abdelhakeem Qassem
p{vetical-align:middle;}
‫طر‬% ‫ ل ا‬%‫ا‬
Text-bottom
‫ن‬
White-spacing:-
normal
‫ل‬
‫ر‬
‫ ل ا ص‬%‫و ا‬%
‫ا ( ء دا ل‬
p{vetical-align:text-bottom;}
% ‫ا‬
‫طر !د د ن ا‬% " ‫ا‬
‫&ل ا‬
p{white-spacing:normal;}
‫طر‬% ‫ا‬
(‫ ل ا‬7 ‫طر !د د‬% " ‫&ل ا دا ا‬
nowrap
*
p{white-spacing:nowrap;}
% ‫< ا‬/br>
‫د‬
Pre-line
‫طر !د د‬% " ‫ا‬
‫&ل ا‬
p{white-spacing:pre-line;}
breaks ‫ ت‬% ‫زم ا* ر و د ا‬
(‫ر‬
Pre-wrap
"‫ا‬
% ‫وف ون ھ ك‬%
‫ ل ا &رة و &ل ا‬7 @
‫زم ا* ر‬
‫د‬
p{white-spacing:pre-wrap;}
‫ا‬
‫طر !د د‬%
breaks‫او‬
Word-spacing:-
‫ت‬
‫نا‬
(‫ا* را‬
normal
lenght
Font:-
% ‫ز دة او ا & ص ا‬
‫ م‬7‫*ر‬
‫ص ا ط‬.
&‫ا‬
7
‫ن‬
By: eng. Abdelhakeem Qassem
p{word-spacing:normal;}
(‫ا‬
p{word-spacing:5px;}
Font-family
geogria A+ ‫طوط‬
‫ث ن ا طوط ھ‬
.
(‫ا‬
‫كا‬
‫!م ا ط‬
Font-size
p{font-family:georgia;}
p{font-size:30px;}
p{font-size:30%;}
‫طا ط‬
Font-style:-
normal
‫ل ا دى‬
‫@ رض ا‬
‫ا‬
p{font-style:normal;}
Italic
‫ل‬. ‫ا ط ا‬
Font-variant:-
small-caps ‫! ل ا طوط‬
normal
‫ا ط ا دى‬
p{font-variant:normal;}
Small-caps
small caps ‫! ل ا طوط‬
p{font-variant:small-caps;}
Font-weight:-
p{font-style:italic;}
‫وزن ا ط " ر ز ا‬
"
bold
‫روف‬
value
700 ‫ف وال‬
‫& ل ا‬+ ‫ا ط ا‬
‫ا‬400
7
p{font-weight:bold;}
(‫ا‬
p{font-weight:400;}
= "light"
p{font-weight:700;}
= "bold"
‫& ل‬+ ‫ا‬
Links :-
"........،
، ‫ ق ا روا ط " ط‬%
By: eng. Abdelhakeem Qassem
‫ ق ا روا ط ا " م ز ر‬%
visited
A{ color:green;}
a:visited{color:red;}
hover
‫" ا را ط‬
‫" ا را ط‬
active
‫وس‬
‫وف‬7‫ ق ا و‬%
‫ظ ا( ط‬
‫ق‬% ‫ا‬
‫ & و ط ق‬% ‫ا دود و‬
borders:-
5px A+
! ‫دد‬
(‫ا‬
a:hover{color:red;}
a:active{color:red;}
P{border-top: 5px red dotted;}
‫ا دود !ب‬
" ‫ د ن ا‬border-top
-:
‫ل ا دود ا‬
‫م ا د ا‬+
‫وو‬
‫ ل‬%‫ د ن ا‬border-bottom
‫ل‬
‫ د ن ا‬border-left
‫ن‬
‫ د ن ا‬border-right
dotted
................ ‫ل ا دود ا &ط‬
P{border-top: 5px red do1ed;}
dashed
---------------------- ‫ل ا &ط‬
P{border-bo1om: 5px red dashed;}
solid
‫ل ــــــــــــــــــــــــــــــــــــ‬
‫لا‬
P{border-leE: 5px red solid;}
groove
‫ب ا ون‬% ‫" ا* د‬+A+ ‫ل‬
P{border-right: 5px red groove;}
ridge
‫ب ا ون‬% ‫" ا* د‬+A+ ‫ل‬
P{border-top: 5px red ridge;}
inset
‫ب ا ون‬% ‫" ا* د دا ل‬+A+ ‫ل‬
P{border-leE: 5px red inset;}
By: eng. Abdelhakeem Qassem
outset
Margin:-
‫ب ا ون‬% ‫" ا* د دا ل‬+A+ ‫ل‬
‫ن‬
‫ر ن ا رج ن ا‬
P{ border-right: 5px red outset; }
‫ذاه ا‬
‫ ل‬%*‫ ر او ا* " او ا‬% ‫او ا‬
" *‫ذاة ن ا‬
‫ ل‬%‫ذاة ا‬
‫ن‬
Margin-top
Margin-bottom
‫ذاة ن‬
‫ ر‬% ‫ذاة‬
Marign-right
Marign-left
(‫ا را‬
auto
A+ px ‫ب‬
lenght
‫و‬. ‫ ا‬%
%
Padding:-
‫ر ن ا دا ل اى ن‬
‫ر‬
‫ن‬
‫ذاة‬
Padding-right
‫ ر‬% ‫ذاة‬
Padding-left
" ‫ذاة ا‬
Padding-top
‫ ل‬%‫ذاة ا‬
7@
‫ا‬
‫( ا‬
P{ margin:auto; }
7 (
P{ margin-leE:5px; }
7 (
‫ذاة‬
P { margin-right:5%; }
‫ل‬
& " ‫دا ل دود ا‬
Padding-bottom
lenght
px ‫ب‬
7 (
By: eng. Abdelhakeem Qassem
P{padding-leE:5px;}
‫و‬. ‫ ا‬%
%
‫ن‬
Dimentions:-
‫ر‬
‫ر‬
Max-height
‫طول ا‬
‫طول‬
‫ر‬
Min-height
‫ر‬
B{ height:10px; }
7 " 7‫ا‬
B{max-height:10px;}
7 ‫ل‬7‫ا‬
B{min-height:10px;}
‫طول‬
width
P{padding-leE:5px;}
‫ م ا د‬7 (‫و‬
‫ر‬
height
7 (
‫رض ا‬
B{width:10px;}
Max-width
‫ر‬
‫ " رض‬7‫ا‬
B{max-width:10px;}
Min-width
‫ر‬
‫ل رض‬7‫ا‬
B{min-width:10px;}
Display:-
‫ر‬
‫ون‬
‫ م رض ا‬% ‫ن‬
‫و(@ اذا‬
(‫و ف م ذ ك وا & م ا* را‬
block ‫ او‬inline
inline
( ‫ر ! ب‬
‫م رض ا‬
Li{display:inline;}
block
( ‫ت‬
‫م رض ا‬
Li{display: inline;}
none
‫ر‬
Visibility: hidden;
(‫را‬
‫ر‬
‫ءا‬
‫ءا‬
*
Li{display: none;}
*
By: eng. Abdelhakeem Qassem
Li{visibility: hidden;}
‫ر‬
Position:-
‫م " و( ا‬
static
‫ن & ا‬
relative
‫ر " ا و( ا دى‬
absolute
‫دد‬
fixed
‫د‬
‫ا‬
‫ھو س‬
(‫و‬
‫ون ا‬
(‫رب د = و‬79 ‫ق‬
"
‫ن‬
Div{position:static;}
‫ر " سا‬
Div{position:relative;}
‫ون‬
Div{position:absolute;}
‫&" ا‬
Div{position:fixed;}
‫ركا‬
Float:-
‫ن‬
"‫را‬
‫ا"ا‬
‫ر‬
‫&ل ا‬
‫ما &لا‬
Div{float:left;}
left A+ ‫ا ط وب‬
Div2{float:right;}
‫ن وھ ذا‬
Clear:-
‫ر‬
‫ ا " ا‬right ‫ ر‬% ‫ا‬
float
" ‫م‬
Div2{ float:both; }
Div2{ float:left; }
Div2{ float:right; }
5‫د‬
‫م‬
-: ‫ب‬
‫ا وا&ل " ا‬
Abdelhakeem2020@outlook.com
. ☺ ‫! ود‬
‫در ☺ &د را‬
‫ر دون ذ ر ا‬
By: eng. Abdelhakeem Qassem
‫وع ا &ل او ا‬
By: eng. Abdelhakeem Qassem