Anticom >> آموزشهای حیرت انگیز!!
..:: The Best Way to Learn ::..Anticom >> آموزشهای حیرت انگیز!!
..:: The Best Way to Learn ::..آموزش CSS - قسمت 3
CSS How To ….
How to Insert Style Sheets
کار Style Sheet ها ؟
زمانی که مرورگر به Style Sheet ها می رسد ، آن ها را می خواند و تمام صفحه وب شما را مطابق آن تنظیم می کند. برای بار سوم ، مجددا انواع Style Sheet ها را معرفی می کنیم.
External Style Sheet
این روش زمانی کاربرد دارد که ما چندین صفحه وب داریم و می خواهیم برای هم یک نوع Style Sheet داشته باشیم . خوبی این روش این است که اگر زمانی شما خواستید چهره سایت خودتون را عوض کنید ، فقط کافی است یک فایل را تغییر دهید. در این روش کل کدهای CSS که طراحی صفحات شما در آن قرار می گیرد و شامل همان کلاس هایی است که قبلا توضیح داده بودیم ، در فایلی جدا با پسوند .css ذخیره می شود و به کد صفحه اصلی شما با یک لینک پیوند می شود. برای نوشتن یک External Style Sheet به نکات زیر دقت کنید:
1- این فایل را می توانید در هر ویرایشگر متن بنویسید ، فقط در هنگام ذخیره آن باید آن را با پسوند .css ذخیره کنید. 2- در این فایل نباید هیچ گونه تگ HTML وجود داشته باشد. به این مثال توجه کنید : body {background-color: yellow}
در Body{}
هر چه شما قرار دهید ، فرم کلی بدنه صفحه وب شما را تشکیل می دهد ، به
عنوان مثال چون ما در این جا برای بدنه صفحه مورد نظرمون رنگ پس زمینه زرد
را انتخاب کردیم ، صفحه مورد نظر ما کامل به رنگ زرد در می آید. با تعریف h1 {font-size: 36pt} ، اگر شما در صفحه وب خود از تگ <h1> استفاده کنید ، همه آن ها با سایز 36 به نمایش در می آیند.
با تعریف h2 {color: blue} ، اگر شما در صفحه وب خود از تگ <h2>استفاده کنید ، همه آن ها با رنگ آبی ظاهر می شوند. با تعریف p {margin-left: 50px} ، اگر شما در صفحه وب خود از تگ <p>استفاده کنید ، همه پاراگراف های شما 50 پیکسل از سمت چپ فاصله پیدا می کنند. Margin به معنی حاشیه است ، و شما به عنوان یک مشخصه (Attribute) می توانید از آن برای به نظم درآوردن قسمت های مختلف صفحه وبتان استفاده کنید. کدهای بالا را به همان شکل در NotePad تایپ می کنم و آن را با پسوند .css و به نام example ذخیره می کنم. حالا من یک External Style Sheet به نام Example دارم.
حالا برای این که من بتونم از این External Style Sheet استفاده کنم باید آن را در جایی از وب ذخیره کنم تا یک لینک ( آدرسی در وب ) برای آن به دست آورم . من این فایل را در وب ذخیره کردم و لینک زیر را به دست آوزدم .
در مرحله آخر به فایل HTMl ای که محتویات صفحه مورد نظرم در آن جا بود بر می گردم و این External Style Sheet را به کدهای HTML به شکل زیر اضافه می کنم.
( یادتونه که برای نوشتن کدهای HTML هم نیازی به برنامه ی خاصی نداشتیم ، من کدهای زیر را هم در NotePad تایپ کردم . فقط یادتون باشه آن را با پسوند .html ذخیره کنید.) <html> <head> <link rel="stylesheet" type="text/css" href=" http://aartaa.persiangig.com/example.css " /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html>
برای پیوند زدن یک External Style Sheet به کدهای HTML ، باید در تگ <head> عبارت زیر را قرا دهیم :
<link rel="stylesheet" type="text/css" href=" …..." />
در بین علامت نقل قول لینک مورد نظر را قرار می دهیم ، که لینک فایل External Style Sheet ما این بود :
در قسمت های بعدی به سراغ Internal , Inline Style Sheet می رویم.
با ما باشید ---- همه با هم برای هم تلاش برای اثبات
