عنوان : آموزش کامل طراحی سایت(متخصصین ایران) - درس شش
متخصصین ایران طراحی سایت

آموزش 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 درونی نیز طراحی کنید.

 

 

 

طراحی کادرها

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

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

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

 

 

 

 

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

 

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

 

 

 

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

 

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

 

 

 

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

 

 

 

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

 

 

 

کلاس و id

 

 

2- طراحی class و id

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

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

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

 

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

 

 

 

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

 

 

 

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

 

 

 

 

 

 

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

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

 

طراحی کادرها

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

مهمترین مزیت کدهای css از دیدگاه یک طراح حرفه ای استفاده از ویژگیهای آن جهت دسته بندی و کادربندی صفحه است. یک وب نویس تازه کار برای دسته بندی و مدیریت مطالب از جدول و برچسب table استفاده می کند. استفاده و مدیریت جدول برای وب نویس بسیار ساده و راحت است اما برای یک مرورگر وب واقعا پیچیده است . مرورگرها و کراولرها از جدول بیزار هستند و دلیل آن را خوب نمی دانم. بنابراین استفاده از توانمندیهای ترسیم کادر و دسته بندی مطالب با css را خوب یاد بگیرید و کم‌کم جایگزین جدول کنید. در ترسیم کادر هم از class و id استفاده میشود.

پروژه 1: قطعه کد طراحی یک کادر با css

 

یادگیری طراحی سایت به توانمندیهای تحلیل شما بستگی دارد و هیچ کس نمی تواند همه چیز را به شما بیاموزد. ادامه مطلب چراغ راه شما خواهد بود.

 

 

 

ویژگی boreder: ویژگی border اندازه، ضخامت و رنگ کادر را تعیین میکند. در مثال بالا BORDER-RIGHT: #dddddd 1px solid; قسمت اول یعنی #dddddd معادل هگز رنگ بردار است که رنگ نیلی را برمی گرداند. همچنین 1px ضخامت کادر را 1 پیکسل تعیین کرده است. کلمه کلیدی solid یز می تواند با مقادیری مانند Thick, thin, dashed, medium, inset, outset و ... تعیین شود که نرم افزارهای طراحی سایت مانند dreamweaver همه را نشان می دهد.

ویژگی padding: برای تعیین فاصله مندرجات یک کلاس از لبه کادر از ویژگی padding به صورت زیر استفاده می شود:

 

ویژگی margin:برای تعیین فاصله یک کلاس از های کلاس دیگر از ویژگی margin به صورت زیر استفاده می شود:

 

 

 

علامت px یعنی پیکسل، در این مثالها همه حاشیه ها 0px درجشده است که می توانید آن را تغییر دهید.

 

 

 

پروژه 2: قطعه کد منوی لغزان

صفحه اول

برای تهیه چنین منوئی ابتدا کلاس زیر را تعریف کنید:

 

سپس برای برچسب a از این کلاس استفاده کنید:

 

 

 



نظر شما درباره این مطلب:




مطالب مشابه

2

آموزش کامل طراحی سایت (متخصصین ایران)- درس نخست


متخصصین ایران طراحی سایت

اساس آموزش طراحی سایت ارائه شده در این بخش .....


آموزش کامل طراحی سایت (متخصصین ایران)- درس نخست                  (اطلاعات بیشتر)

4

آموزش کامل طراحی سایت (متخصصین ایران)- درس سه


متخصصین ایران طراحی سایت

مدیریت پیوندها: کار با HyperLink


آموزش کامل طراحی سایت (متخصصین ایران)- درس سه                  (اطلاعات بیشتر)

3

آموزش کامل طراحی سایت (متخصصین ایران)- درس دو


متخصصین ایران طراحی سایت

 

اصول درج متن

تابحال توانسته اید یک صفحه فارسی برای شروع کار تهیه کنید. حال برای نوشتن متن.....

 

 

 

 

 

 


آموزش کامل طراحی سایت (متخصصین ایران)- درس دو                  (اطلاعات بیشتر)

5

آموزش کامل طراحی سایت (متخصصین ایران)- درس چهار


متخصصین ایران طراحی سایت

معرفی تگ های متا

بدون شک وقتی اقدام به فراگیری طراحی سایت نموده اید آنقدر هوشمند...


آموزش کامل طراحی سایت (متخصصین ایران)- درس چهار                  (اطلاعات بیشتر)

6

آموزش کامل طراحی سایت(متخصصین ایران) - درس پنجم


متخصصین ایران طراحی سایت

طراحی جدول

به طور کلی از جدول برای طراحی فضای قالب وب...


آموزش کامل طراحی سایت(متخصصین ایران) - درس پنجم                  (اطلاعات بیشتر)

10

آموزش کامل طراحی سایت (متخصصین ایران)- درس نه


متخصصین ایران طراحی سایت

به عنوان یک طراح سایت باید توانائی کار با...


آموزش کامل طراحی سایت (متخصصین ایران)- درس نه                  (اطلاعات بیشتر)