|
آموشهای تخصصی کامپیوتر و طراحی سایت درباره وبلاگ  آخرین مطالب آرشیو وبلاگ
لینک های ویژه پیوندها آمار وبلاگ
 دوشنبه 91 اسفند 7 :: 6:12 عصر :: نویسنده : smfatemi
چگونگی اعمال استایل ها در CSS : به سه روش می توان استایل های CSS را اعمال کرد که در ادامه به توضیح مختصر این روش ها می پردازیم. روش اول : استفاده از استایل های درونی (Internal Stylesheet) : در این روش هیچ فایل جداگانه ای برای دستورات CSS ایجاد نمی شود بلکه دستورات CSS درون یک تگ <style> و در درون تگ <head> فایل HTML قرار داده می شوند. به طور مثال کد زیر را که بخشی از کد HTML است را زیر را در نظر بگیرید : <head> <title> A Simple Document with CSS </title> <style> body { background-color: white; margin: 5px; font-family: helvetica, arial, sans-serif; }
div#content { width: 75%; margin: 0 auto; padding: 10px; border: 1px solid #ccc; } </style> </head> همانطور که گفته شد استایل ها درون فایل HTML و در تگ head قرار گرفته اند. حالا این بخش از کد را در نظر بگیرید : body { background-color: white; margin: 5px; font-family: helvetica, arial, sans-serif; } کلمه body به مرورگر می گوید که کلیه دستوراتی که مابین {} می آید را بر روی تمام بخش های تگ body اعمال کند. هر خط که با ; خاتمه می یابد کک قانون یا دستور CSS است که خود از یک ویژگی و یک مقدار تشکیل شده است که با : از هم جدا شده اند. اگر متوجه این دستورات نمی شوید نگران نباشید چون بعدا به طور مفصل آنها را توضیح خواهم داد. روش دوم : استایل های درون خطی (inline stylesheets): در این روش استایل های مد نظر، درون تگ بازکننده المنت مورد نظر نوشته می شوند. به مثال زیر توجه کنید : <p style="color: red;"> This is a Sample Paragraph </p> همانطور که گفته شد دستورات CSS مانند مثال بالا درون تگ باز کننده پاراگراف قرار می گیرند و باعث می شود که متن این پاراگراف به رنگ قرمز نمایش داده شود. روش سوم : استایل های خارجی (external stylesheets) : در این روش کلیه دستورات CSS درون یک فایل جداگانه با پسوند css ذخیره می شوند سپس برای اعمال این دستورات روی یک فایل HTML در تگ head آن فایل به فایل css اشاره می شود. نحوه اشاره به صورت زیر است : <link rel="stylesheet" type="text/css" href="main.css" /> قسمتی از کد که درون href=”" قرار می گیرد اشاره به محل قرار گیری فایل CSS دارد. مزیت اصلی استفاده از فایل استایل خارجی این است که برای تغییر در یک جزء خاص در کل یک وب سایت می توان فقط در فایل CSS آن تغییر را ایجاد کرد و تغییرات روی همه سایت اعمال می شود. توصیه برای چگونگی اعمال استایل ها : همیشه استایل های عمومی تر را در بالای فایل css خود قرار دهید و سپس قسمت های دیگر را به ترتیب اهمیت اضافه کنید. مانند مثال زیر : body { background-color: white; margin: 5px; font-family: helvetica, arial, sans-serif; }
div#content { width: 75%; margin: 0 auto; padding: 10px; border: 1px solid #ccc; } همانطور که مشخص است ابتدا یک سری استایل عمومی در بالای فایل css و برای body در نظر گرفته شده است و سپس یک سری استایل روی یک div که id آن content است اعمال شده است. در مورد div و id بعدا توضیح خواهم داد. خوب این درس اول CSS بود. تا اینجا باید متوجه شده باشید که از CSS برای چه منظوری استفاده می شود و همچنین یک تصویر کلی (هر چند مبهم) از دستورات CSS در ذهن شما شکل گرفته باشد. اگر این طور نیست این مطلب را باز هم مرور کنید و اگر احساس می کنید بخشی از آن ناواضح توضیح داده شده است، از طریق نظرات به من اطلاع دهید تا یا آن را اصلاح کنم و یا در درس های بعدی تاکید بیشتری روی آن داشته باشم. موضوع مطلب : |
||
 |
