النتائج 1 إلى 3 من 3

الموضوع: قوائم بـCSS - شرح مُفصل

  1. 06-12-2007 #1

    owner
    تاريخ التسجيل
    Jun 2005
    المشاركات
    1,922

    قوائم بـCSS - شرح مُفصل



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

    اليوم جبت لكم طريقة شلون نسوي قائمة للموقع بأستخدام الـCSS

    اولا .

    نفتح صفحة جديدة

    في هذا الشرح راح استخدم هيدر خفيف وسهل .

    , اما ان نضع ملفات الـCSS في نفس الملف عن طريق وضع

    كود HTML:
    <style type="text/css">
    في هيدر الصفحة او نخليه في ملف خاص ونستدعيه في الهيدر
    بالكود التالي
    كود HTML:
    <link rel="stylesheet" type="text/css" href="stylefile/style.css" />
    حيث style.css اسم الملف اللي راح نستدعيه و stylefile المجلد الموجود فيه الملف .

    المهم . انا راح اضعه في هيدر الصفحة .

    راح تضع
    كود HTML:
    body {
 margin: 0px;
}
.H {
 background-color: #D7EDFD;
 height: 100px;
}
    في خانة الستايلات .
    حيث الستايل الاول خاص بالصفحة ككل وسوف يطبق :
    - لا توجد هوامش للصفحة margin: 0px

    الستايل H خاص بالهيدر ومواصفاته
    - خلفيته تحمل اللون #D7EDFD
    - طول الهيدر 100px

    بعدين ننزل الى محتويات الصفحة <body>
    ونضع
    كود HTML:
    <div class="H">
</div>
    # حاليا محتويات الصفحة .
    كود HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEst</title>
<style type="text/css">
body {
 margin: 0px;
}
.H {
 background-color: #D7EDFD;
 height: 100px;
</style>
</head>
<body>
<div class="H">
</div>
</body>
</html>
    والناتج من الصفحة هو .


    الان هو المهم . وهو كيف نعمل قائمة .

    اول شي نسوي الستايلات الخاصة بـالقائمة
    كود HTML:
    #SubMenu {
 margin-top: 0px;
 text-align: left;
 height: 30px;
 font-family: arial, Helvetica, sans-serif;
 font-size: 17px;
 color: #FFFFFF;
 margin-left: 5px;
 font-weight: bold;
 direction: rtl;
 position: relative;
}
html #SubMenu {
 height: 1%;
}
#SubMenu ul li {
 float: left;
 color: #003399;
 font-family: arial, Helvetica, sans-serif;
 list-style-type: none;
 font-size: 17px;
 font-weight: bold;
 text-align: right;
 padding-right: 15px;
 padding-left: 15px;
 margin-top: 71px;
}
#SubMenu ul li a{
 font-family: arial, Helvetica, sans-serif;
 font-size: 17px;
 padding: 0px;
 color: #3399FF;
 font-weight: bold;
 display: block;
 text-decoration: none;
 letter-spacing: 0px;
 margin-top: 6px;
}
#SubMenu ul li a:hover {
 border-bottom-style: solid;
 border-bottom-width: 4px;
 border-bottom-color: #5399FF;
 font-weight: bold;
}
#SubMenu ul li a:active{
 color: #B3CAFF;
}
    سميت القائمة انا SubMenu
    وراح اشرح وحدة وحده .

    كود HTML:
    #SubMenu {
 margin-top: 0px;
 text-align: left;
 height: 30px;
 font-family: arial, Helvetica, sans-serif;
 font-size: 17px;
 color: #FFFFFF;
 margin-left: 5px;
 font-weight: bold;
 direction: rtl;
 position: relative;
}
    هذا الستايل الاول وخصائصه كالتالي .
    - ارتفاع القائمة 30 بكسل
    - خط arial و حجمه 17 بكسل واللون #FFFFFF
    - هامش يسار 7 بكسل وفوق صفر
    - واتجاه الكتابة : اليمين الى اليسار rtl

    كود HTML:
    #SubMenu ul li {
 float: left;
 color: #003399;
 font-family: arial, Helvetica, sans-serif;
 list-style-type: none;
 font-size: 17px;
 font-weight: bold;
 text-align: right;
 padding-right: 15px;
 padding-left: 15px;
 margin-top: 71px;
}
    هذا الستايل الخاص بشكل القائمة . وخصائصه
    - الخط : arial والحجم : 17 بكسل و اللون #003399 و بولد
    - والهامش العلوي : 71 بكسل << حتى ينزل تحت الهيدر ويكون في نهايته .
    - والمسافة بين اللنك والاخر 15 يسار و15 يمين بالبكسل

    كود HTML:
    #SubMenu ul li a{
 font-family: arial, Helvetica, sans-serif;
 font-size: 17px;
 padding: 0px;
 color: #3399FF;
 font-weight: bold;
 display: block;
 text-decoration: none;
 letter-spacing: 0px;
 margin-top: 6px;
}
    هذا الستايل يتحكم بالقائمة الي تحمل لنك HyperLink

    كود HTML:
    #SubMenu ul li a:hover {
 border-bottom-style: solid;
 border-bottom-width: 4px;
 border-bottom-color: #5399FF;
 font-weight: bold;
}
    وهذا الستايل يتحكم في اللنك لما تقرب الماوس جنبه . وخصائصه
    - خط اسفل اللنك بحجم 4 بكسل بلون #5399FF

    كود HTML:
    #SubMenu ul li a:active{
 color: #B3CAFF;
}
    والاخير يتحكم باللنك اللي دخله الزائر من قبل ويحمل اللون #B3CAFF

    الحين نضع القائمة
    كود HTML:
    <div id="SubMenu">
  <ul>
 <li><a href="index.php">الرئيسية</a></li>
 <li><a href="link1.php">رابط اول</a></li>
 <li><a href="link2.php">رابط ثاني</a></li>
 <li><a href="contactus.php">اتصل بنا</a></li>
 </ul>
 </div>
    وممكن تزيدها عن طريق اضافة سطر
    كود:
     <li><a href="contactus.php">اتصل بنا</a></li>
    نضيف كود القائمة داخل الكود
    كود HTML:
    <div class="H">
</div>
    وبكون ناتج الكود

    كود HTML:
    <div class="H">
<div id="SubMenu">
  <ul>
 <li><a href="index.php">الرئيسية</a></li>
 <li><a href="link1.php">رابط اول</a></li>
 <li><a href="link2.php">رابط ثاني</a></li>
 <li><a href="contactus.php">اتصل بنا</a></li>
 </ul>
 </div>
</div>
    وشكله


    وهذا كود الصفحة بالكامل
    كود:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
body {
 margin: 0px;
}
.H {
 background-color: #D7EDFD;
 height: 100px;
}
#SubMenu {
 margin-top: 0px;
 text-align: left;
 height: 30px;
 font-family: arial, Helvetica, sans-serif;
 font-size: 17px;
 color: #FFFFFF;
 margin-left: 5px;
 font-weight: bold;
 direction: rtl;
 position: relative;
}
html #SubMenu {
 height: 1%;
}
#SubMenu ul li {
 float: left;
 color: #003399;
 font-family: arial, Helvetica, sans-serif;
 list-style-type: none;
 font-size: 17px;
 font-weight: bold;
 text-align: right;
 padding-right: 15px;
 padding-left: 15px;
 margin-top: 71px;
}
#SubMenu ul li a{
 font-family: arial, Helvetica, sans-serif;
 font-size: 17px;
 padding: 0px;
 color: #3399FF;
 font-weight: bold;
 display: block;
 text-decoration: none;
 letter-spacing: 0px;
 margin-top: 6px;
}
#SubMenu ul li a:hover {
 border-bottom-style: solid;
 border-bottom-width: 4px;
 border-bottom-color: #5399FF;
 font-weight: bold;
}
#SubMenu ul li a:active{
 color: #B3CAFF;
}
</style>
</head>
<body>
<div class="H">
<div id="SubMenu">
  <ul>
 <li><a href="index.php">الرئيسية</a></li>
 <li><a href="link1.php">رابط اول</a></li>
 <li><a href="link2.php">رابط ثاني</a></li>
 <li><a href="contactus.php">اتصل بنا</a></li>
 </ul>
 </div>
</div>
</body>
</html>
    وشكل الصفحة النهائي


    السموحة على التقصير

    بالتوفيق ان شاء الله
    owner





    __________________
    ownersınnı
    ALdiraZi BLoOoG | Contact Me | lt.tl - shorten your URL
    رد مع اقتباس رد مع اقتباس owner غير متواجد حالياً

  2. 06-12-2007 #2
    عضو سوبر نشيط
    الثلج
    تاريخ التسجيل
    Mar 2000
    المشاركات
    762


    تمام مع انه في الكثير من الخصائص لم يتم شرحها
    لكن لدي تعليق ماهي الفائده من

    html #SubMenu {
    height: 1%;
    }
    نستطيع وضعها دخل ال submenu

    ما معنى هذه
    position: relative;






    __________________
    Eng.Fedail
    Computer and Electronics Engineer
    رد مع اقتباس رد مع اقتباس الثلج غير متواجد حالياً
  3. 11-12-2007 #3
    عضو نشيط
    mark_cool5
    تاريخ التسجيل
    Aug 2007
    المشاركات
    242


    مشكور





    رد مع اقتباس رد مع اقتباس mark_cool5 غير متواجد حالياً




« المساعدة بتعريب هذا الكود | عمل تحديث لجزء معين فى الصفحة بــ Ajax »

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

قوانين المنتدى


أضف موقعك هنا | اضافة محتوى فريد لموقعك