TAHA
10-14-2009, 07:39 PM
فرض کنید می خواهیم برای چندین صفحه از یک سری استایل استفاده کنیم که درهمه صفحات مشابه هستند. در این مورد می توانیم از یک فایل استایل خارجیاستفاده کنیم تا نیازی به چندین بار نوشتن استایلها نباشد. هم چنین اینکار باعث میشه تا صفحات سایت بسیار سریعتر بالا بیان ، زیرا یکبار فایلبارگزاری شده و دیگه نیازی به بارگزاری مجدد نیست
برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یکفایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:
کد:
حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هرنامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشتهباشید که پسوند فایل باید css. باشد. )
برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یکنمونه از این تگ را می توانید در اینجا ببینید:
کد:
شناسه “rel=”stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.
شناسه “type=”text/css مشخص کننده نوع متن فایل برای مرورگر است.
شناسه ” “=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما میتوانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ایاست که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.
حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شویدکه آدرس فایل CSS را درست وارد کرده اید:
کد:
<link rel=”stylesheet” type=”text/css” href=”http://www.pnu-club.com/css/example.css”>
یا به صورت تعریف نسبی :
<link rel=”stylesheet” type=”text/css” href=”css/example.css”>
دقت کنید که روش دوم روش صحیح تری است چون در هر آدرسی جواب خواهد داد ( در روش دوم فایل example.css در همان مسیر فایل html شما و در دایرکتوری Css قرار دارد . )
شما باید این کد را در همه صفحاتی که می خواهید از استایل تعریف شدهدر فایل قبل استفاده کنید وارد کنید وگرنه صفحات آنگونه که طراحی شده اندنمایش داده نمی شوند.
حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Tahomaخواهد داشت.
( به فایل exampl.css که ابتدای این آموزش نوشته شده دقت کنید )
کد:
<div>
این متن با فونت tahoma نمایش داده خواهد شد.
</div>
همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش داده می شود:
کد:
<p class=”redtext”>
این متن به رنگ قرمز نمایش داده خواهد شد
.<p>
نتیجه به این صورت خواهد بود:
این متن به رنگ قرمز نمایش داده خواهد شد.
در قسمت بعدی در مورد Class و ID بحث می کنیم
برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یکفایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:
کد:
حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هرنامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشتهباشید که پسوند فایل باید css. باشد. )
برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یکنمونه از این تگ را می توانید در اینجا ببینید:
کد:
شناسه “rel=”stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.
شناسه “type=”text/css مشخص کننده نوع متن فایل برای مرورگر است.
شناسه ” “=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما میتوانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ایاست که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.
حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شویدکه آدرس فایل CSS را درست وارد کرده اید:
کد:
<link rel=”stylesheet” type=”text/css” href=”http://www.pnu-club.com/css/example.css”>
یا به صورت تعریف نسبی :
<link rel=”stylesheet” type=”text/css” href=”css/example.css”>
دقت کنید که روش دوم روش صحیح تری است چون در هر آدرسی جواب خواهد داد ( در روش دوم فایل example.css در همان مسیر فایل html شما و در دایرکتوری Css قرار دارد . )
شما باید این کد را در همه صفحاتی که می خواهید از استایل تعریف شدهدر فایل قبل استفاده کنید وارد کنید وگرنه صفحات آنگونه که طراحی شده اندنمایش داده نمی شوند.
حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Tahomaخواهد داشت.
( به فایل exampl.css که ابتدای این آموزش نوشته شده دقت کنید )
کد:
<div>
این متن با فونت tahoma نمایش داده خواهد شد.
</div>
همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش داده می شود:
کد:
<p class=”redtext”>
این متن به رنگ قرمز نمایش داده خواهد شد
.<p>
نتیجه به این صورت خواهد بود:
این متن به رنگ قرمز نمایش داده خواهد شد.
در قسمت بعدی در مورد Class و ID بحث می کنیم