kayto-kid
عضو جديد
 |  موضوع: شرح أساسية لغة css برمجة الموقع و المنتديات  السبت أغسطس 29, 2009 1:51 pm | |
| السلام عليكم ورحمة الله وبركاته
طريقة تصميم موقع بدون استخدام الجداول مطابق لمواصفات المواقع القياسية web 2.0
و سنرى ذلك باستعمال البرنامج المساعد frontpage
البداية نفتح الفرونت بيج نضيف الكود في head
كود:
<**--** href="style.css" rel="stylesheet" type="text/css" />
و نبدا في اكواد body
اتجاة الصفحة طبعا يمين
كود:
DIRECTION: rtl;
الخلفية
كود:
background: #000000;
واذا حاب تسوي الخلفية صورة
كود:
background:url(back.gif) #000000;
لون خطوط body
كود:
color:#FFFFFF;
نوع الخطوط والحجم و ستايل الخط
كود:
font: normal 8pt tahoma;
اذا حاب تغير normal الى قوي تغيره bold
حجم الخط استخدامنا 8pt وهذا افضل والمستخدم كثيرا ونحب نوضح بعض الانواع
em و % و px
واذا جاب تغير نوع الخط يمكنك استخدام خطوط متوفره في اجهزة الجميع مثل MS Sans Serif و
Arial
الابعاد او الهوامش
خارجي
كود:
margin:0;
داخلي
كود:
padding:0;
الان نقفل body بالاقواس مثال
كود:
body { DIRECTION: rtl; background: #000000; color:#FFFFFF; margin:0; padding:0; font: normal 8pt tahoma; }
الان نسوي لنا اعلى الصفحه هيدر بالطريقة التالية
نفتح الفرونت بيج ونضيف الكود التالي
كود:
<div id="header">مرحبا</div>
وملف style.css
طول وعرض البنر
كود:
width:770x; height:200px;
ونختار لون الخلفيه حقة الهيدر
كود:
background:#cccccc;
,ويمكنك تستخدم الخلفيه صوره بدل اللون
كود:
background:url(header.gif) #cccccc;
واذا حاب تسوي لها حدود بلون ثاني
BORDER: #ff0000 1px solid;
بكذا نقفل الهيدر
كود:
#header { width:770x; height:200px; background:#cccccc; BORDER: #ff0000 1px solid; } | |
|
Waseem
نائب المدير
| | موضوع: رد: شرح أساسية لغة css برمجة الموقع و المنتديات الأحد أغسطس 30, 2009 4:33 am | |
| مشكور * * * مشكور * * * مشكور * * * مشكور * * * مشكور
مشكور * * * مشكور * * * مشكور * * * مشكور
مشكور * * * مشكور * * * مشكور
حلو * * * حلو * * * مشكور * * * مشكور * * * حلو * * * حلو
يسلمو * * * يسلمو * * * يسلمو * * * مشكور * * * يسلمو * * * يسلمو * * * يسلمو
حلو * * * حلو * * * مشكور * * * مشكور * * * حلو * * * حلو
مشكور * * * مشكور * * * مشكور
مشكور * * * مشكور * * * مشكور * * * مشكور
مشكور * * * مشكور * * * مشكور * * * مشكور * * * مشكور | |
|
Hitskin.com
