التخطي إلى المحتوى
شرح دورة الـ CSS للمبتدئين – الدرس التاسع

الخواص او الاوامر المؤثره فى القوائم الغير مرتبه:
1-marginleft: هى الخاصيه التى تحدد المسافه بين حد الصفحه وبين القائمه نفسها .. ويمكن استبدال left ب right , top , bottom
وتتغير على حد الهدف المطلوب تحقيقه والقيم المعطاه لها تكون بوحدات قياس px , cm

ul{margin-left : 76px ;}
ul { margin-right : 50 cm ;}  
—————————————————————————————————
2-liststyletype : هى الخاصيه التى تحدد شكل الترقيم فى القوائم ..القيم المعطاه لها اما ان تكون دائره او مربع مصمت او a b
small or capital
ul{ list-style-type : circle ;}                 فى حاله الدائره المفرغه  
ul{ list-style-type : square ;}              فى حاله المربع المصمت
ul{ list-style-type : upper-roman ;}    I فى حاله الشكل 
ul{ list-style-type : upper-alpha ;}     a b c d small   فى حاله
ul{ list-style-type : lower-alpha ;}     A B C D capital  فى حاله
—————————————————————————————————-
3-liststyleImage : فى حاله اضافه صوره للترقيم بدل من list-style-type والقيم المعطاه لها يكون مسار الصوره
ul {list-style-image : url(“mm.jpg”) ;}    mm.jpg اسم الصوره 
—————————————————————————————————-
ملحوظه .. تذكر الخاصيه الثانيه او الثالثه للقائمه الواحده .. بمعنى ان يكون الترقيم اما بصوره او باحدى رموز الخاصيه الثانيه

التطبيق بالطريقه الثانيه

<html>
<head>
<title>Minds</title>
<style >
ul 
{
margin-left:5cm;
list-style-image:url('fd.JPG')
}
</style>
</head>
<body >
 <ul>
<li>ASp
<li>CSS
<li>Java
 </ul>
</body>
</html>


نموذج للنتيجه ..


 التطبيق بالطريقه الثالثه
كود ملف CSS

ul 
{
margin-left:5cm;
list-style-type:upper-roman;
}

كود ملف HTML

<html>
<head>
<title>Minds</title>
<link rel="stylesheet" type="text/css" href="ss.css">
</head>
<body >
 <ul>
<li>ASp
<li>CSS
<li>Java
 </ul>
</body>
</html>

نموذج للنتيجه ..


الآن .. أختبـــــــــــــــــــــــــــــ(ـنفسك)ــــــــــــــــــــــــــــــــــــــر..
1- قم بتجربه الكود بنفسك
2-استخدم استخدم الطريقه الاولى لكتابه كود CSS  لتجربه هذه الخصائص

عن الكاتب

التعليقات

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Shares