حالت موضوعی | حالت خطی

**Reza Ganji**

توجه:اين آموزش به كتاب الكتروني (ايبوك) تبديل شده و در آخرين پست لينك دانلود قرار گرفته است

سلام
در این پست به آموزش سی اس اس از منابع مختلف میپردازم و هر از چندگاهی که فرصت شد تاپیک را ادامه میدهم و از دوستان خواهش میکنم در این تاپیک پستی ارسال نکنند تا طبق روال این تاپیک رو به پیش ببرم !

در مورد تاریخچه سی اس اس دوست عزیزم آقای سمیع عادل مطالبی را در تاپیک تاریخچه سی اس اس گفتند و ما وارد جزئیات نمیشیم و مطاب آموزشی را شروع میکنیم.
البته برای یادگیری سی اس اس لازم است اچ تی ام ال هم یاد گرفت!

سی اس اس چیست؟

زبان HTML براي ايجاد يك سيستم كد سازي جهاني به وجود آمد تا بوسيله آن بتوان صفحات وب را بدون توجه به نوع كامپيوتر طراحي كرد. خاصيت مهم HTML قالب بندي ساختاري مي‌باشد ولی متاسفانه به طراحان قابلیت کنترل در همه زوایای صفحه را نمی‌دهد. برای قالب بندی و ایجاد افکت های بیشتر از CSS استفاده می‌کنیم.
در واقع CSS این امکان را ایجاد می‌کند تا طراح بتواند چندین مشخصه در طراحی صفحه را به یکباره تعیین کند بعنوان مثال خصوصیات تمامی تگهای h1 موجود در صفحه اعم از اندازه، فونت و رنگ را مشخص نمايد. و يا مشخصات ظاهري چندين صفحه را در يك فايل CSS تعيين نمايد.
CSS مخفف کلمه Cascading Style Sheets یا همان برگه سبک آبشاری ميباشند.
نسخه های مختلف CSS به شرح زیر می‌باشد:

CSS1
CSS2
CSS3
CSS-P

روشهای به کارگیری CSS

سه روش برای به کارگیری CSS وجود دارد:

1- محلی: (Inline)
در صورتیکه تا به حال از CSS استفاده نکرده‌اید بهتر است از این روش ساده استفاده کنید، اگر چه با این روش نمی‌توان یک style را برای یک مجموعه تگ در آن واحد اعمال کرد.
در این روش درون تگ HTML ای که می‌خواهیم قالب آن را تغییر دهیم ویژگی style را مانند زیر تایپ می‌کنیم.

کد: (انتخاب همه)

<tag style="css declarations"...>content </tag>



<p style="color:red"> content </p>



<p style="color:red;font-size:14pt;border:1pt blue dashed" p>

2-داخلی: (Internal)

این روش برای صفحات مجزایی که متن طولانی دارند بسیار مناسب می‌باشد. بدین صورت می‌توان style را در بالای سند HTML برای کل متن تعریف نمود.
در اینحالت در داخل تگ < head > تگ < style > را مانند زیر تایپ کنید.

کد: (انتخاب همه)

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

  <title>

   <style type="text/css">codhaye css</style>

  </title>

</head>



<body>



</body>



</html>

نمونه حاوی کدهای سی اس اس:

کد: (انتخاب همه)

<head>

  <title>

   <style type="text/css">

   p{

   font-family:arial; color:red; font-size:12px;

   border:1px

 }



</style>

  </title>

</head>

3-خارجی: (External)

در صورتیکه بخواهید از یک style در چندین صفحه استفاده کنید این روش را به کار ببرید. در این حالت می‌توان برای تمام صفحات وب ظاهر متداول و یکسانی بوجود آورد. یعنی به جای آنکه برای هر صفحه از style های داخلی استفاده کنید می‌توانید تمام صفحات را با یک style خارجی طراحی کنید.
برای اینکار در برچسب head یک لینک به فایل سی اس اس میدهیم و توجه داشته باشید که فایل سی اس اس هم بر روی همان سرور قرار دارد.
نکته: url در یک style sheet خارجی(HREF)، مرتبط با محل فایل مذکور بر روی server می‌باشد.

[تصویر: 1294346234_1_29896e446a.gif]

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

[تصویر: 1294346327_1_b9c9bd49df.gif]

اکنون هر تغییری که در فایل سی اس اس دهید در تمامی صفحات به طور اتوماتیک اجرا خواهد شد.