CSS

/* -------------------------------------------------------- */

/*------------- */
/*Default Value=   */
/* */
/* -------------------------------------------------------- */
background
/*------------- */ {
    background-color: #DDD;
 /* 140 color normal type*/ /* hexcode : #fff */ /*rgba (148,38,12,0,6)*/
/*Default Value= transparent */
    background-image: url("");
 /* لوضع صورة من http or local PC*/
/*Default Value= none  */
    background-repeat: no-repeat;
 /* no-repeat لعدم تكرار الصورة , repeat-x تكرار الصورة من العرض , repeat-y تكرار الصورة بي الطول */
/*Default Value=  repeat  */
    background-attachment: fixed;
/* fixed يجعل الصورة ثابته في مكانها, scroll يجعل الصورة */
/*Default Value= scroll  */
    background-position: ;/* top right bottom left center or 1% to 100% */
/*Default Value=  0% 0% */
اختصار الكود
-----------
background: color / url / repeat / attachment / position
}
/* -------------------------------------------------------- */
Text
/*------------- */ {
    color: #fff;
/*Default Value= transparent */
    letter-spacing: 10px;
 /*المسافات بين الحروف */
/*Default Value=  normal */
    line-height: 14px;
 /* التباعد بين الاسطر*/
/*Default Value= normal  */
    text-align: ; /* محازاه النص من اليمين الى الشمال او الوسط Right - left - center*/
/*Default Value=   */
direction:ltr;
 /* يستخدم لي اتجاة الكتابه  rtl - ltr*/
/*Default Value=   */
    text-decoration: none;
/* ديكور للكتابه underline , overline , line-through , blink*/
/*Default Value=  none */
    text-transform: capitalize;
 /* uppercase ,lowercase, capitalize  */
/*Default Value=  none */
    white-space: normal;
/*  nowrap */
/*Default Value=  normal */
    word-spacing: 1px;
/*Default Value= normal  */
}
/* -------------------------------------------------------- */
Font
/*------------- */ {
    font-family: arial, "time new roman";
 /*لوضع عائله من الخطوط المناسبه للمتصفحات*/
/*Default Value=  تعتمد علي المتصفح */
    font-style: italic;
 /* يوضع style  كمثال  italic , oblique  */
/*Default Value= normal  */
    font-size: 16px;
/* 16px %هو نوع الخط العادي , 100 , large - xx-large - x-large - small - x-small - xx-small*/
/*Default Value=  medium */
    font-weight: ;/* هي سماكه الخط و خواصها هي bold , bolder , lighter , او قيم من اول 100-900*/
/*Default Value=  normal */
}
اختصار الكود
--------------
font: font-style / font-weight / font-size / line-height / font-family
/* -------------------------------------------------------- */
link
/*------------- */
a:hover {
    يغير الشكر عند مرور الموس علي اللينك
}

a:active {
    يغير الشكل بعد الضعط غلي اللينك
}

a:before {
}

p:first-letter {
}

/* -------------------------------------------------------- */
lists items ul - ol
/*------------- */
ul {
    list-style-type: none;
 /* يغير شكل الدوائر بجانب ul*/
/*Default Value= disc  */
    list-style-position: ; /* inside , outside*/
/*Default Value=  outside */
list-style-image: url() /* لوضع صورة داخل ال ul */
/*Default Value=  none */
}
اختصار الكود
----------
list-style: type / position / image;
/* -------------------------------------------------------- */
border
/*------------- */
border-top:; /* */
border-right: ; /* */
border-bottom: ; /* */
border-left: ; /* */
border-width: ; /* */
border-style: ; /* */
border-radius: ; /* */
border:5px dotted #DDD;
border-radius:; /* لعمل حواف للعنصر */
border-top-right-radius:; /* */
/*Default Value=   */
/* */
/* -------------------------------------------------------- */
margin - الهوامش الخارجيه للعنصر
/*------------- */
margin: auto ;/* يستخدم لتوسيط العنصر من مجموع البيكسل الموقع كامل */
margin-top:; /* */
margin-right: ; /* */
margin-bottom: ; /* */
margin-left: ; /* */
/*Default Value=   */
/* */
/* -------------------------------------------------------- */
/* padding - الهوامش الدخاليه للعنصر */
/*------------- */
padding: auto ;/* يستخدم لتوسيط العنصر من مجموع البيكسل الموقع كامل */
padding-top:; /* */
padding-right: ; /* */
padding-bottom: ; /* */
padding-left: ; /* */
/*Default Value=   */
/* */
/* -------------------------------------------------------- */
outline:  هو نسخه من ال border ولاكن هو لا يحسب من مساحه border الخاص بالعنصر;
/*------------- */
outline:auto;
outline-top:; /* */
outline-right: ; /* */
outline-bottom: ; /* */
outline-left: ; /* */
/*Default Value=   */
/* */
/* -------------------------------------------------------- */
width - height طول و عرض العنصر
/*------------- */
width: ;
/*Default Value=  auto */
min-width:10px ;/* اقل عرض في العنصر  */
max-width: 400px;  /* اكثر عرض للعنصر */

height:  ;
/*Default Value=  auto */
height-width:10px ;/* اقل طول للعنصر  */
height-width: 400px;  /* اكثر طول للعنصر */

/* */
/* -------------------------------------------------------- */
display:;
/*------------- */
display:none; /* يخفي العنصر تمامآ و يمحية*/
display:inline; /* يجعل العنصار علي خط واحد */
display:block; /* يجعل العنصر يأتي ف صف لوحدة*/
display:inline-block; /* يجل العنصر علي خط واحد ولاكن يعني عناصر block*/
/* -------------------------------------------------------- */
position:;
/*------------- */
position:fixed; /* fixed يجعل مكان ال div ثابت لا يتحرك, ويكمن تحديدة بي top right bottom left  */
top:;
right:;
bottom:;
left:;
position:relative; /* */
top:;
right:;
bottom:;
left:;
position:absolute; /* */
top:;
right:;
bottom:;
left:;
/*Default Value= static */
/* -------------------------------------------------------- */
float:;
/*------------- */
float:left;
float:right;
clear: both;
/*Default Value= none  */
/* */
/* -------------------------------------------------------- */
overflow:;
/*------------- */
overflow: hidden; /* يستخدم لعدم اخراج النصوص خارج النعصر */
overflow: scroll; /* يستخدم لعمل scroll داخل العصنر */
overflow-x: hidden; /* CSS3*/
overflow-y: visible;/* CSS3*/
overflow: auto; /* */

/*Default Value= visible */
/* -------------------------------------------------------- */
visibility:;
/*------------- */
visibility: hidden; /* يجفي العنصر ولكن يحفظ مكانه */
/*Default Value= visible  */
/* -------------------------------------------------------- */
z-index: نظام الطبقات لكيفيه وضع عنصر فوق او تحت الاخر و من الذي يظهر و غيرة و هو يتعامل مع عناصر ال position;
/*------------- */
z-index: 1;
z-index: 2;
z-index: 3;
/*Default Value= auto  */
/* */
/* -------------------------------------------------------- */
content: تستخدم لي اضافه محتوي باضافه ال css ويعمل مع ال pefor , after;
/*------------- */
div:after
/*Default Value= none  */

    content:"Your can type here from css xD";

/* -------------------------------------------------------- */
cursor:يستخدم لتغير شكل الماوس في الموقع;
/*------------- */
cursor:pointer;
cursor: url("");
/*Default Value= auto  */
/* */
/* -------------------------------------------------------- */
prefixes:بدايات تكتب في الخواص;
-webkit-element:; // Google Chrome , Safari , IOS , Android
-moz-element; ; // FireFox
-o-element:; // Opera
-ms-element: ; //Internet Explorer
/* -------------------------------------------------------- */
box-shadow:;
/*------------- */
box-shadow:Horizontal Shadow | Vertical Shadow | Blue | Spread | Color;
/*Default Value= none - color=black */
    box-shadow: -5px 0 10px #f00,
                5px 5px 10px #00f,
                5px -5px 10px #0FF;
/* -------------------------------------------------------- */
text-shadow: ;
/*------------- */
text-shadow:Horizontal Shadow | Vertical Shadow | Blue | Spread | Color;
/*Default Value= none - color=black */
    text-shadow: -5px 0 10px #f00,
                5px 5px 10px #00f,
                5px -5px 10px #0FF;
/* -------------------------------------------------------- */
box-sizing: ;
/*------------- */
box-sizing: border-box;
box-sizing: content-box;
box-sizing: padding-box;
/* -------------------------------------------------------- */
text-overflow: يستخدم لعمل نقاط لتعريف المستخدم ان هناك تكلمه لباقي الكلام لقرائه المزيد ;
/*------------- */
text-overflow: ellipsis;
/*Default Value=clip*/
/* -------------------------------------------------------- */
word-wrap: ;
/*------------- */
/*Default Value= normal  */
word-wrap:brack-word; /* لكسر الكلمه او بمعني اصح لجل السطر يكمل للاسف */
/* -------------------------------------------------------- */
transform: 2D  3D;
 /*------------- */
transform: rotate(1deg); /* يستخم  لقلب المحتوي */
transform: rotatex(1deg); /* 3D */
transform: rotatey(1deg); /* 3D */
transform: rotatez(1deg); /* 3D */
transform: scale(1,1); /* يستخدم لضعف حجم مساحه الطول و العرض */
transform: scaleX(1,1); /* للمين و الشمال*/
transform: scaleY(1,1); /* للطول و العرض */
transform: translate(10px,10px); /* يستخدم لتحريك المحتوي و يجب اعطائه القيمتين كاملين 10px, 10px */
transform: translateX(10px,10px);
transform: translateY(10px,10px);
transform: skwe; /*ميلان او انحراف للعنصر */
transform:skew(10deg,10deg); /* و يجب ان يطبق علي القيمتين*/
transform: skwex();
transform: skwey();
transform: matrix(); /*تجمع كل العناصر */
/* transform: matrix( ScaleX, SkewY, SkewX, ScaleY ,translateX , translateY); */
/*Default Value=  none */
/* */
/* -------------------------------------------------------- */
resize; /* تستخدم هذة الخاصيه للتحكم في الطول و العرض عن طريق سحب بي الماوس*/
/*------------- */
resize:both;
resize:horizontal;
resize:vertical;
/*Default Value= none  */
/* */
/* -------------------------------------------------------- */
opacity:  /* شفافيه العنصر*/
/*------------- */
opacity:0.6;
/*Default Value=  1 */
/* */
/* -------------------------------------------------------- */
flex-box /* مرونه البوكس */
/*------------- */
/*Default Value=   */
/* */
/* -------------------------------------------------------- */
animation: ;
/*------------- */
animation: none 0 ease 0 1 normal none running;
/* animation [animation name]
             [animation duration]
             [timaing function]
             [animation delay]
             [animation iteraion]
             [animation diraction]
             [animation fill mode]
             [animation play state]*/
animation:;/* keyframes:
            * /*Default Value= none  */
            * animation name=> Required
            * (from (0%) to (100%) or (0%, 10%, 20%, 50%, 100%)
            * CSS attribute */
animation-name:mynameanimeton;
/*Default Value= none  */
animation-direction: 5s;  /* عدد الثوانى التي يتحرك فيها سرعه الفريم*/
animation-iteration-count:infinite; /*عدد تكراك الانميشن , infinite بلا حدود , او ارقام */
/*Default Value=  1 */
animation-direction:normal; /* reverse يبدا من اخر الانميشن, alternate يبدا من الاول و اول ما يوصل للاخر يبدا من الاخر , alternate-reverse alternate و ولكن يبدآ من الاخر هو هو مثل ال  */
animation-delay: 4s; /* تاخير وقت الانميشن*/
/*Default Value= 0  */
animation-fill-mode: none; /*forwards يوقف الانيمشين عند اخر كي فريم , backwards ياخد اول كي فريم وبعدها يتحرك , both يبدآ من اول كي و يتوقف عند اخر كي */
/*Default Value=  none */
animation-play-state:paused; /* paused لي ايقاف و تحريك الانميشن و من الافضل له ان يستخدم جافا  */
/*Default Value=  running */
animation-timing-function:;
/*Default Value=  ease */


@kayframes mynameanimeton {
    /*Default Value=  normal */
    0%{
        top:10px;
    }
    10%{
        top:10px;
    }
    20%{
        top:10px;
    }
    30%{
        top:10px;
    }
    40%{
        top:10px;
    }
}
/* */
/* -------------------------------------------------------- */