در حال حاضر، طراحی یک وب سایت، بدون استفاده از CSS ها، کاریست بس بیهوده. همان طور که دوستان می دانند، مهمترین قابلیت زبان HTML نمایش متن بر روی مرورگر است و برای صفحه آرایی و طراحی یک صفحه، امکانات خوبی را در اختیار طراح قرار نمی دهد. برای همین منظور، در سال 1996، CSS به تایید کنسرسیوم جهانی وب درآمد تا بر این مشکلات فائق آید.
حال به خاطر اهمیت این موضوع و اینکه دوستان زیادی در این مورد از بنده سوال کردند، ترجیح دادم یک پست به این موضوع اختصاص دهم و با معرفی چند تا سایت بسیار عالی در این زمینه، مشکل دوستان را تا حدی رفع کنم.

CSS یا Cascading Style Sheets در واقع نحوه ی نمایش عناصر را در صفحه مشخص می کند و به شما اختیار می دهد تمام قسمت ها و عناصر موجود در یک صفحه را به کنترل خود در بیاورید. شما در استفاده از CSS ها یا شیوه نامه ی آبشاری، دو راه پیش رو دارید. هم می توانید مستقیم از آن در داخل کد ها ی صفحه استفاده کنید و هم می توانید به صورت خارجی از آن استفاده کنید. در صورتی که راه اول را انتخاب کنید، کد شما به صورت زیر در خواهد آمد:

<P style=”font-style: tahoma; font-weight: bold; letter-spacing: 5em;”s>

اما بنابر گفته ی W3C، بهتر است کد ها و محتوای یک صفحه ی وب، به طور کامل از یکدیگر مجزا باشند. برای حل این مشکل هم CSS چاره ای اندیشید و آن استفاده از شیوه نامه های خارجی است. بدین صورت که شما ابتدا شیوه نامه ی خود را تعریف کرده و در یک فایل متنی به صورت Style.css ذخیره می کنید و سپس به صفحه ی مذکور ارجاع می دهید. به عنوان مثال:

body {
font-size: 8pt; font-family: Tahoma, Arial;
} A:hover {
font-weight: normal; color: #0000C0; text-decoration: none;s
}s

و بعد باید در صفحه ی مورد نظر، بدین صورت به این شیوه نامه ارجاع می دهید:

<link href=”style.css” type=”text/css” rel=”stylesheet”s>

همان طور که مشاهده می کنید، اگر با زبان HTML آشنایی داشته باشید، درک CSS اصلا کار دشواری نیست. فقط شما باید با کد ها و فرامین آن آشنا شوید و بدانید که از هر کدام در کجا و به چه نحوی باید استفاده کنید. برای این منظور شما می توانید از کتاب های موجود در این رابطه استفاده کنید. به خاطر اهمیت این موضوع، حتی در کتاب های آموزش HTML و یا Java script نیز فصلی به این موضوع اختصاص داده شده است. اما بنده با جست و جویی در اینترنت، چند وب سایت بسیار مفید پیدا کردم که برای درک کردن اساس CSS، بسیار به شما کمک خواهد کرد.

W3C CSS2.1 Spec و The Box Model به درد کسانی می خورد که هنوز با مفاهیمی از جمله Padding و یا Margin آشنایی ندارند. در این دو سایت شما به صورت خیلی ساده، با این مفاهیم آشنا می شوید.
Clearing floats ، Faux Columns و Creating Liquid Faux Columns شما را با نحوه ی مرتب کردن عناصر در جهت های مختلف صفحه آشنا می کنند.

در IE 6 و نسخه ی های قبل از آن، شما نمی توانید فونت ها را با استفاده از px بزرگ و کوچک کنید و برای این منظور باید از ems استفاده کنید. How to size text using ems ، Elastic Design و Fixed or fluid width? Elastic شما را چگونگی انجام این کار آشنا می کنند. چون یکی از مهمترین دغدغه های طراحان سایت، هماهنگی سایت طراحی شده با همه ی مرورگر ها می باشد و برای این منظور شما باید با این نکات ریز آشنا باشید.

شما در Revised Image Replacement با چگونگی استفاده از تصاویر آشنا می شوید و نحوه ی به کار گیری آنها را در هر جای صفحه از جمله بک گرند خواهید آموخت.

شما می توانید با سر زدن به Floatorial تمام مطالب بالا و همچنین بسیاری از مطالب دیگر مربوط به CSS را فرا بگیرید. زیرا دارای آرشیو بسیار خوبی در این زمینه است. همچنین فراموش نکنید که سایت های معرفی شده تنها برای کمک به شما به منظور درک بیشتر از CSS بوده. وگرنه کاملترین مرجع برای همه ی ما، W3C می باشد. همچنین Learning CSS که متعلق به W3C است، را از دست ندهید. جدا از تمام اینها، بهترین و جامع ترین آموزش CSS را می توانید در اینجا پیدا کنید.

در پایان اگر یک CSS نوشتید و می خواهید آن را چک کنید، به CSS Validation service سری بزنید. امیدوارم این مقاله تا حدی به دوستانی که سوال کرده بودند و همچنین دیگر دوستان، کمک کرده باشد و اگر باز هم سوالی بود مطرح کنید.