Rezaei
۱۳۹۲-۰۱-۱۴, 11:40
مهمترين مزيت کدهاي css از ديدگاه يک طراح حرفه اي استفاده از ويژگيهاي آن جهت دسته بندي و کادربندي صفحه است. يک وب نويس تازه کار براي دسته بندي و مديريت مطالب از جدول و برچسب table استفاده مي کند. استفاده و مديريت جدول براي وب نويس بسيار ساده و راحت است اما براي يک مرورگر وب واقعا پيچيده است . مرورگرها و کراولرها از جدول بيزار هستند و دليل آن را خوب نمي دانم. بنابراين استفاده از توانمنديهاي ترسيم کادر و دسته بندي مطالب با css را خوب ياد بگيريد و کم.کم جايگزين جدول کنيد. در ترسيم کادر هم از class و id استفاده ميشود.
پروژه 1: قطعه کد طراحي يک کادر با css
#boxtext {border-right: #dddddd 1px solid; border-left: #dddddd 1px solid; border-top: #dddddd 1px solid; border-bottom: #dddddd 1px solid; padding-right: 2px;
padding-bottom: 8px; padding-left: 2px; padding-top: 8px; background-color: #ffffff; margin-top:0px; margin-bottom: 8px;
}
ويژگي boreder: ويژگي border اندازه، ضخامت و رنگ کادر را تعيين ميکند. در مثال بالا BORDER-RIGHT: #dddddd 1px solid; قسمت اول يعني #dddddd معادل هگز رنگ بردار است که رنگ نيلي را برمي گرداند. همچنين 1px ضخامت کادر را 1 پيکسل تعيين کرده است. کلمه کليدي solid يز مي تواند با مقاديري مانند Thick, thin, dashed, medium, inset, outset و ... تعيين شود که نرم افزارهاي طراحي سايت مانند dreamweaver همه را نشان مي دهد.ويژگي padding: براي تعيين فاصله مندرجات يک کلاس از لبه کادر از ويژگي padding به صورت زير استفاده مي شود:
padding-right:2px; padding-bottom:8px; padding-left:2px; padding-top:1px;
ويژگي margin:براي تعيين فاصله يک کلاس از هاي کلاس ديگر از ويژگي margin به صورت زير استفاده مي شود:
margin-right: 0px; margin-left: 0px; margin-bottom: 0px; margin-top: 0px;
علامت px يعني پيکسل، در اين مثالها همه حاشيه ها 0px درجشده است که مي توانيد آن را تغيير دهيد.
پروژه 2: قطعه کد منوي لغزانبراي تهيه چنين منوئي ابتدا کلاس زير را تعريف کنيد:
.navigation:link, .navigation:visited {
font-size: 13px; font-style: normal; font-weight: normal; text-decoration: none; text-align:center; color: #FFFFFF; background-color: #239180; display: inline; border: none; padding-bottom: 5px; padding-top:5px; padding-left: 20px; padding-right: 20px; float:right; margin-right: 3px
}
.navigation:hover {
background-color: #74c699; color: #333333
}
سپس براي برچسب a از اين کلاس استفاده کنيد:
<a href="../index.html" class="navigation"> برگ نخست </a>
منبع : پارس مدیر
پروژه 1: قطعه کد طراحي يک کادر با css
#boxtext {border-right: #dddddd 1px solid; border-left: #dddddd 1px solid; border-top: #dddddd 1px solid; border-bottom: #dddddd 1px solid; padding-right: 2px;
padding-bottom: 8px; padding-left: 2px; padding-top: 8px; background-color: #ffffff; margin-top:0px; margin-bottom: 8px;
}
ويژگي boreder: ويژگي border اندازه، ضخامت و رنگ کادر را تعيين ميکند. در مثال بالا BORDER-RIGHT: #dddddd 1px solid; قسمت اول يعني #dddddd معادل هگز رنگ بردار است که رنگ نيلي را برمي گرداند. همچنين 1px ضخامت کادر را 1 پيکسل تعيين کرده است. کلمه کليدي solid يز مي تواند با مقاديري مانند Thick, thin, dashed, medium, inset, outset و ... تعيين شود که نرم افزارهاي طراحي سايت مانند dreamweaver همه را نشان مي دهد.ويژگي padding: براي تعيين فاصله مندرجات يک کلاس از لبه کادر از ويژگي padding به صورت زير استفاده مي شود:
padding-right:2px; padding-bottom:8px; padding-left:2px; padding-top:1px;
ويژگي margin:براي تعيين فاصله يک کلاس از هاي کلاس ديگر از ويژگي margin به صورت زير استفاده مي شود:
margin-right: 0px; margin-left: 0px; margin-bottom: 0px; margin-top: 0px;
علامت px يعني پيکسل، در اين مثالها همه حاشيه ها 0px درجشده است که مي توانيد آن را تغيير دهيد.
پروژه 2: قطعه کد منوي لغزانبراي تهيه چنين منوئي ابتدا کلاس زير را تعريف کنيد:
.navigation:link, .navigation:visited {
font-size: 13px; font-style: normal; font-weight: normal; text-decoration: none; text-align:center; color: #FFFFFF; background-color: #239180; display: inline; border: none; padding-bottom: 5px; padding-top:5px; padding-left: 20px; padding-right: 20px; float:right; margin-right: 3px
}
.navigation:hover {
background-color: #74c699; color: #333333
}
سپس براي برچسب a از اين کلاس استفاده کنيد:
<a href="../index.html" class="navigation"> برگ نخست </a>
منبع : پارس مدیر