و اما مطالب اين قسمت كه از جمله مهمترين مباحث طراحي وب به شمار مي رود كه به مبحث دستورات CSS و ايجاد شيوه نامه آبشاري اختصاص دارد ما قبل از پرداختن به موضوعاتي همچون فرمها و رفتارها بايد با اين مقوله آشنا شويم اگر قصد داريد بدون يادگيري دستورات و كد نويسي هاي CSS طراح وب حرفه اي باشيد بايد بگويم سخت در اشتباهيد و امكان ندارد كسي كه علاقه به كد نويسي ندارد بتواند طراح وب حرفه ايي شود پس چند قسمتي كه به اين موضوع اختصاص دارد را با جديت و پشتكار بيشتري دنبال كنيد.CSS مخفف عبارت Cascade style sheet است كه بصورت شيوه نامه آبشاري ترجمه شده است پس از اين به بعد ما به CSS شيوه نامه خواهیم گفت.
مباني و انواع شيوه نامه ها
در كل دو نوع شيوه نامه وجود دارد
۱ – ش يوه نامه هاي داخلي : اين شيوه ها مستقيما در خود صفحه ايجاد مي شود و قادر است مشخصات همان صفحه و يا يه قسمت از صفحه را
در دست بگيرد
اين شيوه نامه ها اگر در قسمت سرآيند صفحه قرار گيرد كل صفحه را و اگر در ساير قسمتها قرار گيرد همان قسمت را تحت تاثير قرار style را ديديد بدانيد با دستورات شيوه نامه سر و كار داريد مثلا به اين قطعه كد نگاه كنيد.
<table border="1" width="100%" style="font-family: Tahoma; font-size: 10px; font-weight: bold>
فعلا به مفهو م اين كد كاري نداريم فقط بدانيد اين كد جدولي ترسيم ميكند كه تمام متون داخل آن با فونت تاهوما با سايز ۱۰ پيكسل و بصورت تو پر يا bold ايجاد مي شود اين كد فقط متون داخل همين جدول را كنترل خواهد كرد و در ساير موارد هيچ تاثيري نخواهد داشت حال اين كد را ببينيد.
<style type="text/css">
font-family: Tahoma;
font-size: 10px;
font-style: bold;
</style>
اين كدي است كه در قسمت سرآيند يعني بين تگهاي <head>و </head> قرار دارد و همان مشخصات قبلي را در مورد فونت اعمال مي كند با اين تقاوت كه اين كار در كل متن صفحه اعمال مي شود .
2 – شيوه نامه هاي خارجي : اين شيوه نامه ها تحت يك فايل با فرمت css ايجاد مي گردد و مي توان در هر صفحه اي به همين فايل لينك داد كه اين گونه شيوه نامه ها مي توانند كنترل تمام صفحاتي كه از آن استفاده مي كنند را در دست گيرد
هر گونه تغييري در اين فا يل مستقيما در تمام صفحاتي كه از اين شيوه نامه استفاده مي كنند تاثير خواهد گذاشت شيوه نامه ها تقدم و تاخر دارند يعني مرورگر ابتدا اگر شيوه منحصري بيابد آن را اعمال ميكند ( شيوه هايي كه براي يك قسمت از صفحه تعريف شده اند ) سپس به شيوه نامه داخلي صفحات مي رسد مثلا ما در صفحه اي در قسمت سر آيند اين كد را قرار داديم.
<style type="text/css">
{
font-family: Tahoma;
font-size: 10px;
font-style: bold
}
</style>
و در قسمت ديگري از صفحه اين كد را
<table border="1" width="100%" style="font-family: Verdana; font-size: 12px; font-weight: italic>
حال اگر متني را در اين جدول قرار دهيم آن متن به چه صورت نمايش خواهد يافت بله مرورگر شيوه انحصاري را اعمال ميكند و عملا شيوه كلي اعمال نخواهد شد يعني فقط متن داخل جدول با فونت وردانا و سايز ۱۲ پيكسل و بصورت ايتاليك نمايش مي يابد
اما قبل از اين كه ببينيم دريم ويور چگونه كدهاي شيوه نامه را ايجاد و مديريت مي كند بايد با قوانين و كدهاي آن آشنا شويم ما ابتدا به اصول ايجاد كدهاي شيوه نامه در قسمت سر آيند كه در كل صفحه اعمال مي شود مي پردازيم
<style type="text/css">
</style>
تمامي دستورات شيوه نامه مابين اين تگها قرار ميگيرد <style type="text/css">اين كد به مرورگر مي فهماند كه كدهايي كه بعد از اين وجود دارد دستورات شيوه نامه است اين تگ </style> علامت اتمام كدهاي شيوه نامه است .
در دستورات html براي تعيين مقدار براي خواص از علامت مساوي استفاده مي شود و مقادير هم داخل كوتيشن "…" قرار مي گيرند اما در css براي تعيين خواص شيوه نامه آنها را داخل آكولاد {…} قرار مي دهيم و مقادير آنها را با : تعيين مي كنيم و براي تعيين چند خاصيت بايد آنها را با ; از هم جدا كنيم.
اين همان مثالي است كه د ر بالا هم به آن اشاره كرديم منتها تمام خواص و مقدار آنها را در يك خط قرار داديم هيچ فرقي نمي كند كه كدها در يك خط باشد يا چند خط چيزي كه هست شما بايد قوانين كد نويسي رارعايت كنيد ولي اصولي اين هست كه هر خاصيت در يك خط قرار گيرد
و براي آكولاد هم يك خط در نظر بگيريد در اين صورت مرور كد و رفع خطاهاي احتمالي آسانتر خواهد بود خواص در شيوه نامه به چند دسته تقسيم مي شود خواص فونت ، خواص رنگ و بك گراند ، خواص متن ، خواص كادر بندي ، خواص دسته بندي و خواص ليستها و...
هر كدام از خواص صفاتي دارند و هر صفت مقدار ميگيرد كه خودمان تعيين ميكنيم مثلا Font-size: 18px در اين مثال font يك خاصيت است و size صفتي براي فونت و18px هم مقداري است كه ما براي سايز فونت تعيين كرده ايم خاصيت با صفت توسط – از هم جدا مي شوند
خواص و صفات مربوط به فونت
تا اينجا ما با مباني شيوه نامه آشنا شديم حال بايد با يك سري از خواص و نحوه مقدار گيري هر كدام آشنا شويم كه در اين قسمت به خواص مورد استفاده در فونت اشاره ميكنيم
صفت خانواد : font-family
اين صفت به خانواده فونت اشاره دارد و مقدار آن ميتواند هر فونتي كه دوست داريد باشد و ميتوانيد چند فونت را هم تعيين كنيد مانند اين font-family: Arial, Helvetica, sans-serif
font-size : صفت سازی
اين صفت به سايز فونت اشاره دارد و مقدار دهي آن وسيع تر است
شما مي توانيد مقادير پيكسلي ارائه بدهيدpx
شما مي توانيد مقادير نقطه اي تعيين كنيد pt
همچنين امكان تعيين سايز فونت بر حسب اينچ و سانتيمتر و ميلي متر و... را هم داريد كه چندان توصيه نمي شود
مي توانيد مقدار دهي را به درصد هم تعيين كنيد كه در اين صورت فونت بر حسب مقدار پيش فرض درصد مي گيرد
ميتوان مقدار را با كلمات نسبي همانند larger و smaller هم تعيين كرد
و مقادير ديگر هم هستند منتها توصيه ميكنم هميشه از مقدار پوينت استفاده كنيد
صفت وزن و سنگيني فونتfont-weight
وزن فونت از ديگر صفاتي است كه مي توان براي فونت تعريف كرد مقاديري كه مي گيرد هم ميتواند عددي باشد بين ۱۰۰ تا ۹۰۰ و هم از كلمات كليدي مانند bolder و bold و ... اما اگر از مقدار عددي استفاده كرديد فقط اين را بياد داشته باشيد مقادير عددي با افزايش ۱۰۰ بايد باشد مانند ۳۰۰ و ۴۰۰ و ... و نميتوانيد بر فرض مقدار ۳۵۰ را بكار ببريد
صفت شيوه و سبك و روش font-style
اين صفت به شيوه هاي يك فونت اشاره دارد مانند توپر بودن يا مورب بودن فونت و مقادير آن هم همين موارد است
normal كه حالت عادي است
italic كه حالت مورب فونت است
oblique شكل ديگري از مورب است كه ميزان اريب را مرورگر تعيين ميكند
font-variant صفت متغيير
در حال حاضر اين صفت ۲ مقدار بيشتر ندارد مقدارذ normal كه حالت عادي است و مقدار small-caps كه مي تواند تمام حروف بزرگ را بصورت كوچك نمايش دهد
font-color صفت رنگ
اين صفت هم به رنگ فونت اشاره دارد و مقدار آن هم ميتواند بصورت نام مانند red و يا كد رنگي باشد
چون در اين قسمت هدف ما آموزش css نيست بيشتر از اين توضيح نميدهيم و مي پردازيم به نحوه ايجاد شيوه نامه ها در دريم ويور.
ايجاد شيوه نامه در دريم ويور
ابتدا پانل css style را باز كنيد اين پانل زير مجموعه Design است اگر هم پانلها را دست كاري كرده باشيد مي توانيد از طريق آدرس به اين پانل برسيد. Window / CSS Styles
خب حال در اين پانل بر روي آيكن New CSS Style كليك كنيد تا مراحل ايجاد يك css جديد آغاز شود.
در اين لحظه با كادر زير مواجه مي شويد
ما در قسمتهاي بعد كليه قسمتهاي اين كادر را توضيح مي دهيم منتها در اين جا شما گزينه ها را همانند شكل تنظيم كنيد و بر روي ok كليك کنید.
توجه كنيد در قسمت name مي توانيد يك نام دلخواه تايپ كنيد ( شما بعدا مي آموزيد كه نام مناسب بشدت در كارتان تاثير دارد )حال شما با كادر زير روبرو مي شويد
|