بايد بدانيد كهHTMLاز ۳ نوع ليست پشتيباني مي كند ۱- ليستهاي مرتب ۲- ليستهاي نامرتب ۳- ليستهاي تعريفي
حال خواص ليستها در شيوه نامه مي تواند امكاناتي را براي دستكاري ليستها فراهم كند امكاناتي كه شيوه نامه دارد در مورد ليستها دارد عبارتند از
List-style-type
List-style-image
List-style-position
كه خاصيت كلي list-style مي تواند بجاي هر ۳ مورد فوق كاربرد داشته باشد.
با اين توضيحات به قسمت list از کادر CSS Style Definition در دریم ویور می رویم.
همان گونه كه مي بينيد هر ۳ خاصيت در اين جا قرار داده شده اند
type : در اين فيلد مقادير مورد نظرتان براي خاصيت list-style-type را انتخاب كنيد كه مقادير آن مطابق جدول زير است
Bullet image :
در اين فيلد مي توانيد تصويري را انتخاب كرده تا به عنوان بر چسب عناصر ليس ت انتخاب كنيد البته تصويرتان هر چه كوچكتر باشد بهتر است مقدار none هم كه از اين خاصيت صرفنظر مي كند.
Position :
در اين كادر كه خاصيت list-image-position را تعيين مي كند دو مقدار وجود دارد كه تعيين مي كنند برچسب عناصر ليست نسبت به كادر دستورات چگونه قرار گيرد
مقدار inside موجب مي شود تا برچسب در داخل كادر و مقدار outside موجب مي شود تا برچسب در خارج كادر قرار گيرد
حال به گزينه Positioning از قسمت Category می پردازیم.
خاصيت position در شيوه نامه اين قدرت را به شما مي دهد تا مكاني را كه مرورگر بايد يك عنصر وب را در صفحه قرار دهدمشخص كنيد.
اگر بياد داشته باشيد در مبحث لايه ها ما مباحثي پيرامون چگونگي انجام كار و قرار دادن تصاوير در لايه هاي گوناگون و بر روي هم داشتيم در اين قسمت ما مي توانيم عملي شبيه لايه ها را با شيوه نامه ها پياده سازي كنيم.
علرغم اين كه توضيح اين گزينه ها كم و ساده است منتها تسلط بر آنها وقت گير و دشوار خواهد بود براي شروع ابتدا قسمت چهارم آموزش و بحث لايه ها را كاملا مطالعه كنيد و با فراگيري كامل آن قسمت به ادامه اين بحث بپردازيد.
ابتدا نوع موقعيت را از كادر type انتخاب كنيد.
مقادير عبارتند از :
Absolute : لايه با موقعيت مطلق ( با اين انتخاب كه اصلي ترين انتخاب هم هست شما يك لايه ايجاد مي كنيدو موقعيت آن را در كادرهاي placementبصورت قاطع تعريف مي كنيد)
Visibility : با موقعيت نسبي كه موقعيت آن در اختيار مرورگر خواهد بود
Static : يك لايه ساكن ايجاد خواهد كرد كه نمي تواند نسبت به سرريزي از خود واكنش نشان دهد ( اين مطلب در مبحث لايه ها بحث شد )
قاطعانه پيشنهادم انتخاب حالت Absolute در اين مرحله است
كادر هاي overflow و Z-index ، Visibility در قسمت لايه ها توضيح داده شده
در كادرهاي hight و width هم طول و عرض لايه خود را وارد كنيد.
اما در كادرهاي Placement در صورتي كه در فيلد type گزينه absolute را انتخاب كرده باشيد در اين كادرها موقعيت قرار گيري لايه تان را بايد تعريف كنيد.
كادرهاي قسمت clip هم كه قبلا اشاره شده و به برش خوردگي آبجكتهاي داخل لايه مربوط است
مبحث لايه ها در شيوه نامه به اتمام رسيد منتها مسلط شدن به نحوه كاربرد همين چند گزينه خود زمان زيادي طلب خواهد كرد ولي اگر تسلط پيدا كنيد از ايجاد طرحهاي زيباي خود كاملا به وجد خواهيد آمد.
براي آشنايي بيشتر دوستان من كدهاي شيوه نامه هاي ايجاد شده را در اين جا قرار مي دهم تا درك مطالب ذكر شده بهتر صورت بگيرد
<style type="text/css">
<!—
.layer1 {
position: absolute;
z-index: 1;
height: 305px;
width: 326px;
left: 80px;
top: 30px;
}
.layer2 {
z-index: 2;
font-family: tahoma;
font-size: 10pt;
color: #FF0000;
height: 35px;
width: 650px;
left: 160px;
top: 225px;
position: absolute;
}
.layer3 {
position: absolute;
z-index: 3;
height: 93px;
width: 208px;
left: 130px;
top: 200px;
}
</style>
|
