تبلیغات در اینترنتclose
آموزش کامل طراحي سايت
سفارش تبليغات در انجــمن قالب گراف ورود به تاپيک اطلاعيه هاي تابستانه قالب گراف
امور گرافيکي و کدنويسي وب خود را به جي جي ميزبان بسپاريد
نام کاربري : پسورد : فراموش




آموزش CSS

واژه CSS مخفف Cascade Style Sheets جهت طراحي انواع سبک يا استايل
براي صفحه هاي وب است. با استفاده از کدهاي CSS ميتوان براي صفحه وب طرح‌ها
و قالب‌هاي متنوعي طراحي کرد. کدهاي CSS را مي‌توان درون يک صفحه وب يا در
يک فايل خارجي درج و استفاده کرد. مهمترين ويژگي و اهميت CSS تشخيص سريع
دستورات آن توسط مرورگرهاي اينترنت است که باعث مي شود صفحه وب سريع و درست
بارگذاري شود.





کدنويسي css داخلي

اگر بخواهيد در صفحه موجود از کدهاي css استفاده کنيد در بخش head از
برچسب style به صورت زير استفاده کنيد. کدهاي css در اين تگ درج ميشوند.


کدهاي موردنظر


کدنويسي css خارجي

با استفاده از css خارجي ميتوانيد سبکهاي مختلفي را طراحي کرده و در
تمامي صفحات از آن سبکها استفاده کنيد. براي ساخت يک فايل css نياز به هيچ
نرم افزار ويژه‌اي نيست. کدهاي css موردنظر را در يک صفحه notepad وارد
کرده و با نامي مانند style.css ذخيره کنيد. البته اگر از dreamweaver
استفاده کنيد کارتان ساده تر است. حالا براي اعمال کدها در هر صفحه تنها در
بخش head صفحه به اين فايل css خارجي لينک دهيد. به ابتداي بحث طراحي
سايت بر مي گرديم. فرض کنيد مجموعه فايلهاي سايت ما به صورت زير است.


فرض کنيد فايل css خارجي ما با نام style.css در پوشه css ذخيره شده
است. براي لينک به اين فايل در بخش head هر صفحه دستور زير را وارد کنيد:



در تهيه css خارجي
نيازي به استفاده از برچسب style نيست و مستقيماً مي توانيد کدنويسي را
انجام دهيد. يک نمونه فايل CSS براي دانلود قرار داده شده است. به هر تعداد
که بخواهيد مي توانيد به فايلهاي css خارجي لينک دهيد و همزمان style
دروني نيز طراحي کنيد.

دانلود نمونه css خارجي





1- تغيير قالب برچسب‌هاي‌ موجود

برچسب هاي body, p, div, a, ... همه کلاس هاي وب هستند که از قبل
طراحي شده اند. با استفاده از کدهاي css مي‌توان اين کلاسها را تغيير داد.
با ذکر چند مثال تغيير قالب برچسب هاي استاندارد HTML توضيح داده مي‌شود:

1-1- فرض کنيد مي خواهيد در تمام بدنه از قلم tahoma استفاده کنيد چون
براي فارسي‌نويسي ايده آل است و در تمامي نسخه هاي ويندوز به طور پيش فرض
وجود دارد. براي اين کار از کد زير استفاده کنيد. اين کد دستور ميدهد قلم
پيش فرض tahoma است. اگر قلم tahoma پيدا نشد از arial استفاده شود و اگر
نبود از verdana استفاده شود.

body {
font-family: tahoma, arial, verdana;
}



1-2- حالا فرض کنيد بخواهيد دستور دهيد تا اندازه پيش فرض قلم 13 و رنگ قلم سفيد و زمينه صفحه نارنجي باشد.


body {
font-size:13px; font-family: tahoma, arial; color:#000033; background-color: #FF9900
}


براي مشاهده هگز تمامي رنگ ها مي توانيد از نرم افزارهاي dreamweaver,photoshop, corel,... استفاده کنيد يا به سايت web-source.net رجوع کنيد. برنامه RGBFinder با حجم 40 کيلوبايت نيز مي تواند کمک کند.

برنامه نمايش هگز رنگها


1-3- براي آنکه دستور دهيد صفحه وب فارسي و راست چين است از کد زير نيز در مجموعه بالا استفاده کنيد.

body{ direction:rtl; }

1-4- در اين تمرين مي خواهيم دستور دهيم هايپرلينک در تمام صفحه سبز و
به underline آن حذف شود. بنابراين از کلاس ترکيبي body و a استفاده مي
شود. به خاطر داشته باشيد ويژگي text-decoration براي تعيين افکت هاي قلم
استفاده مي شود.

body a{ text-decoration:none; color: #009966; }

1-5- با کد زير هنگاميکه ماوس روي لينک قرار گيرد رنگ لينک آجري مي شود:

a:hover{ color: #ff3300; }

کد بالا رويداد hover تمامي لينک هاي صفحه را تحت تاثير قرار مي دهد. فرض کنيد بخواهيد اين کد تنها براي پاراگراف ها قابل اعمال باشد:

p a:hover{ color: #ff3300; }





2- طراحي class و id

وقتي شما قالب يک برچسب را تغيير دهيد هميشه وقتي از آن برچسب استفاده
کنيد با ويژگيهاي جديدي که طراحي کرده ايد ظاهر مي‌شود. فرض کنيد شما قالب
يک برچسب p را تغيير را داده ايد در اينصورت تمامي پاراگراف هاي شما با
قالب جديد ظاهر مي شود. حالا فرض کنيد بخواهيد فقط قالب يک پاراگراف خاص را
دهيد حال چه بايد کرد؟


هر برچسب دو ويژگي به نام id و class
دارد. با استفاده از کدهاي css مي توان class و id طراحي کرد و در صورت
نياز به برچسب‌ها منسوب کرد. با اين روش انعطاف شما بالا مي رود. مي توانيد
کلاس هاي متعددي طراحي و براي هر پاراگراف، div يا برچسب ديگر استفاده
کنيد. تنها براي قالب هاي کلي مانند راست چين بودن صفحه، رنگ پس زمينه
صفحه يا نوع و اندازه قلم صفحه مانند مثالهاي 1 تا 3 برچسب body را تغيير
دهيد و براي تغيير ساير برچسب ها از طراحي کلاس جديد استفاده کنيد.

مثال: فرض کنيد بخواهيد فقط يک پاراگراف سبز با قلم
14 و bold داشته باشيد. براي انجام اين کار يک کلاس جديد با نام دلخواه
مانند headgreen طراحي کنيد. در طراحي class جديد از علامت نقطه قبل از نام کلاس استفاده مي شود.

.headgreen {font-size: 12px; font-weight: bold; color: #009966;}

براي استفاده از اين کلاس جديد در هر پاراگراف دلخواه ويژگي class پاراگراف مورد نظر را برابر نام کلاس جديد قرار دهيد:

عنوان

علاوه بر کلاس مي توان ID جديد را با همان روش طراحي کلاس جديد استفاده کرد. در اينجا فقط به جاي . از علامت # قبل از نام id استفاده ميشود.


#headgreen {font-size: 12px; font-weight: bold; color: #009966;}

براي استفاده از اين id جديد در برچسب دلخواه ويژگي id برچسب مورد نظر را برابر نام id جديد قرار دهيد:

عنوان




تفاوت کلاس و id چيست؟ در يک صفحه HTML تنها بايد يکبار از هر id استفاده شود درحاليکه استفاده از هر کلاس به هر تعداد آزاد است.

براي اعمال تغييرات مربوط به هايپرلينک کلاس ها مانند قبل از روش ترکيبي استفاده کنيد.







3- طراحي کادرها با CSS

مهمترين مزيت کدهاي 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 از اين کلاس استفاده کنيد:


برگ نخست

امضاي کاربر :
گچبری گیت فروشگاهی

تشکر شده:

4 کاربر از saharrahin به خاطر اين مطلب مفيد تشکر کرده اند: ramin0098 / mahdio77 / 78nbm78 / mohamd /

پاسخ ها

براي نمايش پاسخ جديد نيازي به رفرش صفحه نيست روي تازه سازي پاسخ ها کليک کنيد !



برای ارسال پاسخ ابتدا باید لوگین یا ثبت نام کنید.