شرح بالتفاصيل css وفائدة كل كود وطريقة الاستخدام

--------------------------------------------------------------------------------

السلام عليكم ورحمة الله وبركاته

طريقة تصميم موقع بدون استخدام الجداول مطابق لمواصفات المواقع القياسية *** 2.0

مثال : موقع أنين

http://www.an1n.net/

البداية نفتح الفرونت بيج نضيف الكود في head


رمز Code:
<link href="style.css" rel="stylesheet" type="****/css" />
و نبدا في اكواد body


اتجاة الصفحة طبعا يمين


رمز Code:
DIRECTION: rtl;الخلفية


رمز Code:
background: #000000;واذا حاب تسوي الخلفية صورة


رمز Code:
background:url(back.gif) #000000;لون خطوط body


رمز Code:
color:#FFFFFF;نوع الخطوط والحجم و ستايل الخط


رمز Code:
font: normal 8pt tahoma;

اذا حاب تغير normal الى قوي تغيره bold

حجم الخط استخدامنا 8pt وهذا افضل والمستخدم كثيرا ونحب نوضح بعض الانواع

em و % و px

واذا جاب تغير نوع الخط يمكنك استخدام خطوط متوفره في اجهزة الجميع مثل MS Sans Serif و
Arial

الابعاد او الهوامش


خارجي

رمز Code:
margin:0;داخلي

رمز Code:
padding:0;
الان نقفل body بالاقواس مثال


رمز Code:
body
{
DIRECTION: rtl;
background: #000000;
color:#FFFFFF;
margin:0;
padding:0;
font: normal 8pt tahoma;
}
الان نسوي لنا اعلى الصفحه هيدر بالطريقة التالية

نفتح الفرونت بيج ونضيف الكود التالي


رمز Code:
<div id="header">مرحبا</div>

وملف style.css

طول وعرض البنر


رمز Code:
width:770x;
height:200px;
ونختار لون الخلفيه حقة الهيدر


رمز Code:
background:#cccccc;,ويمكنك تستخدم الخلفيه صوره بدل اللون


رمز Code:
background:url(header.gif) #cccccc;واذا حاب تسوي لها حدود بلون ثاني


BORDER: #ff0000 1px solid;

بكذا نقفل الهيدر


رمز Code:
#header
{
width:770x;
height:200px;
background:#cccccc;
BORDER: #ff0000 1px solid;
}

راح انتظر الاسئلة في الدرس الاول