Css چیست ؟

[Bad Sector]

CSS چیست ؟

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

از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت ( مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر ) را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.

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

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

مزایای استفاده از CSS به صورت خلاصه به شرح زیر است :

1- کوتاه تر شدن کدهای برنامه (حتی تا نصف)
2- سرعت بار گذاری صفحات وب سایت افزایش یافته و صفحات وب شما سریع لود می شود
3- ایجاد تغییرات در صفحات وبسایت به سادگی انجام می گیرد. (شما یک فایل را تغییر میدهید و کل قالب سایت شما تغییر میکند)
4- محتوی و مطالب سایت از قالب تفکیک و جدا می شود

[Bad Sector]

css چیست؟

آیا تا به حال به این فکر افتاده اید که صفحه وب چیست؟ منظور من این است که “واقعا صفحه وب چیست؟”
بعضی از مردم به صفحه وب به عنوان یک رسانه تصویری نگاه می کنند که صرفا دارای یکسری تصاویر زیباست و ممکن است محتوای خوبی داشته یا حتی نداشته باشد.
بعضی دیگر به آن به عنوان یک منبع برای اطلاع رسانی نگاه می کنند و جنبه های تصویری و تبلیغاتی آن را در نظر نمی گیرند.
از دید فنی و تکنیکی تفسیر صفحه وب به شکل زیر تعبیر می شود:

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


لایه محتوا (Content Layer)
لایه نمایش (Presentation Layer)
لایه رفتار (Behavior Layer)

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


http://www.the-webart.com/blog/wp-content/uploads/2011/01/css-layers.jpg
لایه محتوا در ساختار وب سایت:

لایه محتوا در سی اس اس همیشه حاضر بوده و شامل اطلاعاتی است که نویسنده در نظر دارد که به خواننده خود انتقال دهد و در ساختار سند html یا xhtml قرار می گیرد. امروزه متن ها اساسی ترین قسمت وب را تشکیل می دهند اما محتوای سایت می تواند شامل تصاویر ، موسیقی ، ویدیو ها و انیمیشن ها و هر آنچه که نویسنده نیاز داشته باشد نیز باشد.
لایه نمایش در ساختار وب سایت:

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


لایه رفتار در سی اس اس شامل تعامل مستقیم کاربر با صفحه وب می باشد. معمولا این کار ها توسط جاوا اسکریپت انجام می شود. این عملیات از ساده ترین آنها مانند تایید محتوای فرم ها که توسط کاربران پر می شوند تا نوشتن برنامه های پیچیده تحت وب که همانند نرم افزار های روی سیستم شما به نظر می رسند امکان پذیر است.
البته ادغام کردن این سه لایه در غالب یک لایه امکان پذیر است اما جدا نگاه داشتن آنها یک مزیت فوق العاده دارد : می توانیم هر یک از لایه ها را بدون نیاز به تغییر در لایه های دیگر تغییر دهیم .
بعضی از ورژن های html , xhtml همچنین شامل انواعی از تگ هایی هستند که جنبه نمایشی دارند مثل تگ <b> و <i> که شکل متن را در صفحه وب تغییر می دهند و یا <hr> که باعث نمایش یک خط افقی در صفحه می شود.
از انجایی که این تگ ها جنبه نمایش دارند لذا جدا نگه داشتن آنها از لایه محتوا و قرار دادن معادل آنها در لایه نمایش و فایل های css مزایایی را برای تویسندگان به وجود می آورد.
Cascading style sheet یا همان سی اس اس ، یکی از راه های پیشنهادی در جهت کنترل لایه نمایش و مدیریت این لایه در سند وب و صفحات وب سایت است.
از مزایای مهم css ، جدا نگاه داشتن لایه محتوا از لایه نمایش می باشد و در این حالت شما تنها با داشتن یک فایل Css می توانید یک سایت با ۱۰۰۰۰ هزار صفحه را بدون نیاز به لایه نمایش مجزا و یا فایل css مجزا بسازید و در واقع با مجزا کردن لایه نمایش از محتوا می توانید لایه نمایش را با بقیه صفحات وب سایت به اشتراک بگذارید.
با مجزا کردن لایه نمایش وب سایت و استفاده از css خارجی مزایای زیر نصیب شما خواهد شد:



تمامی استایل های شما در قالب یک فایل css قابل استفاده است و مطمئنا تغییر این فایل خیلی راحت تر از تغییر ۱۰۰۰۰ فایل است (برای تغییرات وب سایت این مورد همیشه به شما کمک خواهد کرد)
مقدار پهنای باند قابل ملاحظه ای را صرفه جویی می کنید و با جدا نگه داشتن فایل های css، حجم فایل ها را کمتر می کنید و از طرفی با باز کردن اولین صفحه وب سایت فایل css شما داخل کش مرورگر قرا خواهد گرفت و برای صفحات دیگر سایت نیاز به لود شدن دوباره فایل css نخواهید داشت
با جدا نگه داشتن لایه نمایش و استایل های سایت خود از محتوای وب سایت قادر خواهید بود این محتوا را در مواقعی مثل استفاده از rss و … به راحتی استفاده کنید .
با جدا نگه داشتن فایل css از محتوای سایت قادر خواهید بود تنها با نوشتن یک فایل css جدید برای هر چاپگر محتوای سایت را برای چاپگر آماده کنید و نیاز به نوشتن دوباره محتوای سایت نخواهید داشت.

اگر چه استفاده از سی اس اس برای تغییر ظاهر صفحه وب سایت و مدیریت لایه نمایش استفاده می شود ، اما معمولا از استایل شیت ها برای xhtml استفاده می شود

[Bad Sector]

در دسامبر ۱۹۹۶ اولین ورژن css با نام css1 توسط کنسرسیوم استاندارد های جهانی وب (w3c) (http://www.w3.org/) پیشنهاد شد.
این ورژن از css شامل امکاناتی برای کنترل شکل و فونت کلمات و کاراکتر ها (typography) از قبیل :همتراز کردن متن ها ، فاصله بین کلمات و امکاناتی از این قبیل را در وب سایت دارا بود .
این ورژن به کاربران امکان تعیین طول و عرض باکس های (block level) در صفحات وب را فراهم می آورد و همچنین امکان تعیین بردار برای باکس ها در وب سایت به وجود می آورد.
اما زمانی که صبحت به چیدمان باکس ها و لیوت می رسید ،css1 چیزی زیادی برای نشان دادن نداشت ، شما تنها قادر بودید که برای المان ها پس زمینه عکس و پس زمینه از نوع رنگ تعیین کنید و یا یک باکس(box) را به چپ یا راست شناور کنید و متن ها را اطراف آن باکس قرار دهید.
ورژن css2

CSS2 درسال ۱۹۹۸ وارد بیرون داده شد ، و شامل کلیه امکاناتی بود که طراحان مدت زیادی را منتظر آن بودند . باکس ها (box) قادر بودند به عنوان سلول های table تعریف شوند و دقیقا رفتار آن سلول ها را از خود نشان دهند یا باکس ها به شکل های بیشتری امکان قرار گرفتن در صفحه را داشتند.
در css2 انتخاب کننده ها(selector) خیلی قوی تر شدند. استایل شیت ها (stylesheet) قادر بودند توسط استایل شیت های دیگر فراخوانی شوند.
حتی قوانین css، قادر بودند برای دستگاه هایی مثل پرینتر و … تعریف شوند و لایه نمایش در صفحه وب را برای دستگاه های دیگر تعریف کنند.
امکانات بسیار زیادی در css2 برای دستگاه های چاپگر پیاده سازی شد.
پس از گذشت مدتی css2 نیز نشان داد که در بعضی جهات خیلی سختی هایی را به وجود می آورد و در پیاده سازی بعضی از بخش ها سختی هایی را به همراه می آورد ، پس از مدتی w3c سازمان استاندارد جهانی تصمیم گرفت که در این ورژن css2 تجدید نظر به عمل آورد وتغییراتی را دوباره به آن اعمال کرد تا با برای مشکلات پیاده سازی راحل کند.
در نسخه تجدید شده css2 ،خیلی از امکانات برای کار با چاپگر حذف شد و برای ایجاد محتوا در صفحه تنها انتخاب کننده های :before و :after به جای ماند و محدودیت هایی برای تغییر ظاهر این محتوای تولید شده در css به وجود آمد.
نام جدید این ورژن از css تجدید نظر شده بود: “cascading style sheet , level 2 revision 1″ یا به اختصار css2.1

ورژن css2 همان css2.1 است

از آنجایی که ورژن css2 توسط هیچ مرورگری پیاده سازی نشد ، لذا هر جا صحبت از css2 می شود اصطلاحا منظور همان css2.1 است

ورژن css3

کار بر روی css3 چندین سال است که شروع شده است ، اما به نظر می رسد که خیلی کند در حال رشد است.
Css3 به ماژول های تقسیم شده است و ایده این تئوری آن است که هر یک از این ماژول ها به شکل مجزا و مستقل از بقیه کار می کند ، تا به حال هیچ یک از ماژول ها به آن مرحله نرسیده است.
اما در حال حاضر بعضی از ویژگیهای css3 توسط تعدادی از مرورگرها پیاده سازی شده است.
بعضی از ویژگیهای css3 که هنوز در حال بررسی است و تایید نشده اند توسط تعدادی مرورگر پیاده سازی شده است همانند: متن های چند ستونی ، ایجاد بردار های لبه گرد (rounded corners) ،کنترل محو شدن المان ها (opacity) ، رنگ های hsl/hsla/rgba و سایه برای متن ها (text shadow) که البته سایه متن ها در css2 در نظر گرفته شده بود اما در css2.1 حذف گردید.
ماژول انتخاب کننده css3 به صورت مستقل از css3 منتشر خواهد شد ، که بعضی از این انتخاب کننده ها (selectors) در بعضی از مرورگرها پیاده سازی شده اند.

[Bad Sector]

وارد کردن یا لینک دادن به فایل css در صفحه وب

در این جلسه آموزش css (http://www.the-webart.com/blog/category/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%d8%a8%d8%b3%db%8c-%d9%88%d8%a8/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-css/) به ادامه آموزش های قبلی خود در خصوص مباحث اولیه لینک دادن به فایل های استایل شیت خواهیم پرداخت.
ما سه راه برای الحاق فایل CSS و استایل شیت به صفحه وب داریم ، اما برای سند های XML تنها یک را ه موجود است تا بتوان المان های داخل سند xml را استایل داد.
تفاوت بین Html و xhtml را می توانید در بخش مربوطه آن مشاهده کنید.
کلیه روش های لینک دادن به فایل های css و استایل شیت:



قرار دادن استایل ها در یک فایل css مجزا و ارجاع به آن از طریق المان link یا دستور @import در داخل فایل استایل شیت
قرار دادن قوانین css در داخل سند های html یا xhtml در داخل المان و بلوک style به شکل inline
قرار دادن قوانین Css در داخل خصیصه style مربوط به هر المان
قرار دادن قوانین در داخل یک فایل مجزا و ارجاع به آن از طریق دستور العمل های پردازش (pi) برای سند های xml

استایل شیت های مجزا خواه در داخل فایل مجزا و خواه در داخل المان style در داخل همان سند html قابل تعبیه شدن برای یک یا چند دستگاه از قبیل پروژکتور ، پرینتر و .. می باشند.
استایل شیت های خارجی (external stylesheet) می توانند به عنوان alternate یا جایگزین مشخص شوند یعنی به طور پیش فرض به صفحه اعمال نمی شوند اما کاربران قادرند آنها را در مرورگرهایی که استایل شیت های جایگزین را ساپورت می کنند انتخاب کنند.
انواع دستگاه های جانبی که می توانیم در استایل شیت تعریف کنیم به صورت زیر تعریف شده اند



نوع دستگاه توضیحات
All این نوع به همه دستگاه ها اعمال می شود
Braille دستگاه های مربوط به نابینایان
Embossed برای چاپ برای نابینایان
Handheld کامپیوتر های دستی
Print برای چاپ در پرینتر
Projection برای پروژکتور (مد fullscreen مرورگر اپرا نیز این خاصیت را داراست)
Screen برای نمایش در مانیتور های رنگی
Speech برای خوانده شدن در دستگاه های صوتی نابینایان
Tty دستگاه هایی با صفحه نمایشی ثابت و کوچک
Tv دستگاه های از نوع تلوزیون

استفاده از یک یا چند نوع از استایل شیت های خروجی (external stylesheet) یکی از بهترین تمرین هاست.
چرا که این روش تاکید بر روی جدا سازی محتوا از نمایش دارد.
آیا بایستی هر استایل شیت برای یک دستگاه نوشته شود یا آیا بایستی یک استایل شیت را برای کلیه دستگاه ها نوشت و برای هر قانون توسط دستور @media نوع دستگاه را مشخص کرد؟
برای پاسخ به این سوال بایستی در نظر گرفت که کدام دستگاه ها برای پردازش استایل شیت تقریبا شبیه به هم عمل می کنند .
معمولا استایل شیت هایی که برای screen و projection نوشته می شوند با هم ترکیب می شوند ، در حالی که استایل شیت های print و handheld بایستی مجزا نگه داشته شوند.
معمولا استایل شیت های درونی (internal stylesheet) زمانی استفاده می شوند که یک صفحه دارای المان هایی است که مجزا از کلیه صفحات وب سایت است و به همین دلیل برای آن صفحه استایل شیت درونی نوشته می شود.
البته می توان برای صفحاتی که مجزا از صفحات دیگر وب سایت نوشته می شوند در داخل استایل شیت های خارجی این کار را انجام داد.
استفاده از استایل شیت های درونی در حین پیاده سازی وب سایت در اولین فاز پیاده سازی وب سایت معمولا از استایل شیت های درونی استفاده می شود تا از مشکلاتی که برای استایل شیت های خارجی در cache شدن در مرورگر رخ می دهد جلوگیری کنند.
در زمانی که طراحی سایت کامل می شود می توانید استایل شیت های داخلی را به استایل شیت های خارجی انتقال بدهید.
استفاده از استایل شیت های درونی به طور کلی بایستی خود داری شود ، چرا که باعث ادغام شدن لایه نمایش با لایه محتوا می شوند و مشکلاتی که در جلسات قبلی گفته شد رخ می دهند.
درباره استایل شیت های aural یا شنوایی

استایل شیت های شنوایی به شکل رسمی در ورژن css2.1 تعریف نشده اند .
در مستندات نوع رسانه شنوایی قید شده است اما جایی ذکر نشده که چه ویژگیهایی را میتوان برای این نوع دستگاه ها پیاده سازی کرد و چه ویژگیهایی را نمی توان پشتیبانی کرد لذا در این مرجع آموزشی Css از ذکر آن خودداری می کنیم و در آینده در باره آن در وبلاگ آموزشی صحبت خواهد شد.




استفاده از المان link و دستور @import برای ارجاع به یک فایل استایل شیت در این مثال بیان شده است که چطور می توان از المان link در سند html استفاده کرد


<link rel="stylesheet" type="text/css" href="/style.css"
media="screen">

المان link که در داخل head سند html قرار می گیرد یک فایل استایل شیت را به صفحه پیوند می زند.
برای تعریف چند نوع دستگاه مختلف می توانید در خاصیت media نام دستگاه ها را که در جدول بالا ذکر شده است با کاما جدا کنید.


برای مثال : media=”screen,projection”



اگر این خصوصیت از المان link حذف شود به طور پیش فرض media=”all” در نظر گرفته می شود.
در مثال زیر مثالی از شیوه استفاده از دستور @import آورده شده است.


<style type="text/css">
@import url(/style.css);
</style>

المان style همانند المان link بایستی داخل تگ head قرا گیرد.
توجه داشته باشید که استفاده از آدرس های نسبی برای خصوصیت href بر اساس مکان جاری همان سندی که در حال کار کردن در آن هستیم بر آورد می شود مثلا استفاده از دستور @import در داخل فایل css نسبت به مکان همان فایل css آدرس دهی محاسبه می شود
از المان لینک نیز می توان برای تعیین استایل شیت جایگزین alternate stylesheet که پیش تر صحبت شد به صورت زیر استفاده کرد


<link rel="alternate stylesheet" type="text/css"
href="/contrast.css" media="screen" title="High contrast">

این استایل شیت جایگرین که به طور پیش فرض غیر فعال است ، می تواند در صورت ساپورت کردن مرورگر از alternate stylessheet توسط کاربر فعال شود.
اگر استایل شیت ها با یک title یکسان تعریف شوند می توانند به صورت گروهی فعال یا غیر فعال شوند. از طرفی استایل شیت ها به شکلی عمل می کنند که فعال کردن هر کدام از آنها یا هر گروه از آنها گروه های دیگر را غیر فعال می کند.
مراقب شکل نوشتاری Alternative باشید

مستندات css از اصطلاح alternate به جای alternative استفاده می کند. لذا کلید واژه ای که در ویژگی rel نوشته می شود بایستی همان کلمه alternate باشد نه چیز دیگری.

[Bad Sector]

در ادامه جلسات آموزش css (http://www.the-webart.com/blog/category/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%d8%a8%d8%b3%db%8c-%d9%88%d8%a8/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-css/) خود در این جلسه آموزشی به مباحث استایل شیت های داخلی و چگونگی تعیین چند فایل css جایگزین برای صفحه خواهیم پرداخت.
استایل شیتی که توسط خصوصیت rel=”stylesheet” به صفحه لینک شده باشد امافاقد خصوصیت title باشد همانند اولین مثال جلسه قبل (لینک دادن به استایل شیت های داخلی و خارجی در صفحه وب) به عنوان استایل شیت های دائم (persistent style sheet)معروفند و این بدان معناست که همیشه این استایل شیت ها به صفحه وب اعمال می شوند حتی اگر کاربر یک استایل شیت جایگزین را فعال کند.
استایل شیتی که توسط rel=”stylesheet” لینک شده باشد و همچنین title برای آن مشخص شده باشد ، به عنوان استایل شیت های ترجیحی (preferred stylesheet) معروفند و زمانی به صفحه وب اعمال خواهد شد که کاربر آن را فعال کرده باشد و در صورت انتخاب استایل شیت های جایگزین غیرفعال خواهد شد.
اجازه دهید که به یک مثال پیچیده تر نگاهی بیندازیم


<link rel="stylesheet" type="text/css"
href="/base.css" media="all">
<link rel="stylesheet" type="text/css"
href="/def_layout.css" media="screen" title="Default">
<link rel="stylesheet" type="text/css"
href="/def_colour.css" media="screen" title="Default">
<link rel="alternate stylesheet" type="text/css"
href="/alt_layout.css" media="screen" title="Custom">
<link rel="alternate stylesheet" type="text/css"
href="/alt_colour.css" media="screen" title="Custom">
<link rel="stylesheet" type="text/css" href="/print.css" media="print">

در این مثال base.css یک استایل شیت دائم (persistent stylesheet) است چرا که خصوصه title ندارد و به تمام رسانه های اعمال خواهد شد چرا که خصوصیت media=”all”.
به طور پیش فرض ، def_layout.css و def_colour.css به رسانه صفحه نمایش اعمال خواهند شد چرا که از نوع استایل شیت ترجیحی هستند.
اگر کاربر در مرورگر خود استایل شیت Custom را انتخاب کند فایل های def_layout و def_colour.css غیرفعال خواهند شد و alt_layout.css و alt_colour.css فعال خواهند شد.


http://www.the-webart.com/blog/wp-content/uploads/2011/01/screen1.jpg


در زمان چاپ فایل print.css فعال خواهد شد چرا که این فعال ویژگی media=”print” را شامل شده است.
توجه داشته باشید که base.css نیز اعمال خواهد شد چرا که این استایل شیت خصوصیت media=”alt” را داراست و بقیه استایل شیت ها اعمال نخواهند شد چرا که همگی آنها دارای خصوصیت media=”screen” هستند.
همواره می توانیم از استایل شیت های جایگزین استفاده کنیم تا چندین مد نمایش را آزادانه برای کاربر فراهم کرده باشیم .
در مثال “اریک می یر (http://meyerweb.com/eric/css/edge/complexspiral/demo.html)” می توانید ببینید که چطور آقای اریک چندین انتخاب را برای کاربر فراهم کرده است تا کاربر آزادانه انتخاب کند.


http://www.the-webart.com/blog/wp-content/uploads/2011/01/screen2.jpg
استفاده از استایل شیت های درونی (توکار)

استفاده از المان style که در داخل تگ head صفحه وب قرار می گیرد به عنوان استفاده درونی از استیل شیت نام برده می شود و تغییرات استایل فقط به صفحه ای که این المان را شامل شده است اعمال می گردد.


<style type="text/css" media="screen,projection">
CSS rules…
</style>

خصوصیت type ضروری است و باید با مقدار “text/css” مقدار دهی شود.
با توجه به قوانین مشخص شده در مستندات html4 که بیان می کند اگر شما نوع رسانه را برای استایل شیت خارجی تعریف نکنید ، نوع media=”screen” به آن اعمال می شود ، این مورد در عمل صادق نیست و مرورگر ها media=”all” را به استایل شیت های خارجی اعمال می کنند اگر خصوصیت media تعریف نشده باشد.
مرورگر هایی که قبل از html4 وجود داشته اند المان <style> را پشتیبانی نمی کردند و آنها محتوای استایل را همانند متن و text می دیدند و به همان صورت رندر می کردند و برای حل این مشکل در آن مرورگرها تگ style را مابین کامنت های SGML قرار می دادند اما امروزه به دلیل ساپورت این تگ در مرورگر ها و xhtml شما نیازی به این کار نمی بینید و در صورت قرار دادن استایل در بین کامنت مانع از اعمال شدن ظاهر خواهید شد.
کامنت کردن محتوای داخل تگ style امروزه منسوخ شده به شمار می آید و غیر ضروری است.
در زیر مثالی از استایل شیت های درونی را می بینیم که از دید مرورگر های قدیمی پنهان است


<style type="text/css" media="screen,projection">
<!-
CSS rules…
-->
</style>

استایل شیت های درون خطی (inline stylesheet)

در مثال زیر قوانین css نوشته شده باعث می شود که اندازه قلم محتوای لیست نامرتب زیر به ۱۲۰% و رنگ آن به سبز تیره تبدیل شود.



<ul style="font-size:120%; color:#060">
list items…
</ul>

استفاده از این روش به دلیل یکی کردن لایه محتوا و لایه نمایش اصولا غیر قابل توجیه است وبایستی صرف نظر شود.
روش استایل شیت های درون خطی (inline stylesheet) خیلی محدودتر از استایل شیت های خارجی و داخلی است و برای آنها نمی توان نوع رسانه media را مشخص نمود و به طور پیش فرض استایل ها به تمام رسانه ها اعمال خواهند شد.
از طرفی برای استایل شیت های درون خطی نمی توانید قوانین شبه کلاس ها (pseudo-class)را اعمال کنید.
مستندات html بیان می کند که اگر شما می خواهید از استایل شیت ها درون خطی در سند وب استفاده کنید بایستی زبان استایل شیت را در آن صفحه توسط http header مشخص کنید که نمونه آن را در زیر آورده ایم


<meta http-equiv="Content-Style-Type" content="text/css">

البته مرورگر های امروزه مستندات Html را مد نظر قرار نمی دهند و به طور پیش فرض نوع محتوای استایل شیت ها را به “text/css” قرار می دهند.
استفاده از استایل شیت های خارجی برای سند های xml توسط XML PI

در سند های xml از جمله xhtml استایل شیت های خارجی توسط دستورات پردازشی (pi) قابل آدرس دهی هستند. این دستورات پردازشی بخشی از دستورات xml هستند که بعد از خط تعریف xml و قبل از خط تعریف نوع سند xml در صورت وجود آورده می شوند.
در مثال زیر می توانید یک استایل شیت دائم base.css و یک استایل شیت ترجیحی default.css و یک استایل شیت جایگزین custome.css را ببینید.



<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="/base.css"?>
<?xml-stylesheet type="text/css" href="/default.css" title="Default"?>
<?xml-stylesheet type="text/css" href="/custom.css"
title="Custom" alternate="yes"?>

ادامه دارد ...



منبع (http://www.the-webart.com/blog/%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%D8%A8%D8%B3%DB%8C-%D9%88%D8%A8/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-css/%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D8%B4%DB%8C%D8%AA-%D9%87%D8%A7%DB%8C-%D8%AF%D8%A7%D8%AE%D9%84%DB%8C-%D9%88-%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8%AA%D8%B9%DB%8C%DB%8C%D9%86-%DA%86%D9%86%D8%AF/)

[uody]

تكنيك ها در Css

اولين تكنيك: تغيير رنگ در انتخاب
--وقتي شما روي يه متن توي يه وب سايت يا وبلاگ رو ميگيريد به طور استاندارد و از پيش تعريف شده آبي يا سفيد ميشه. يعني وقتي روي يه نوشته درگ ميكنيد براي كپي كردن. اگر دوست داريد براي انتخاب رنگ مورد علاقه تون مثه بنفش صورتي يا قرمز نمايش داده بشه از كد زير تو style.css سايتتون استفاده كنيد:

کد:

::selection {
background:#رنگ بك گراند;
color:#رنگ فونت; }
::-moz-selection {
background:#رنگ بك گراند;
color:#رنگ فونت; }
پ.ن: توجه داشته باشيد كه اين كد تو همه مرور گرها ساپورت ميشه، اما IE از اين كد تبعيت نميكنه.

دومين تكنيك: جلوگيري از نقطه چين شدن لينك در فايرفاكس:

حتما كساني كه از فايرفاكس استفاده ميكنن ميدونن كه وقتي روي يه لينك كليك ميكنيد يه كادر نقطه چين دور لينك ظاهر ميشه، شايد بعضيا دوست داشته باشن و شايد بعضيا اين قضيه رو ضعف تو طراحيشون بدونن، براي اينكار فقط كافي كد پائين رو زير كد hover يا visited يا link كلستون قرار بديد:

کد:

اسم كلستون a:focus {
outline:none; }


منبع: p30city.net

[uody]

‌ زباني همه فن حريف يك زبان براي برنامه‌نويسان با سليقه
CSS‌ ‌ زباني همه فن حريف
يك زبان براي برنامه‌نويسان با سليقه

‌CSS‌ يك زبان استايل‌شيت ‌(Stylesheet)‌ است كه براي توصيف شيوه نمايش فايل‌هاي متني نوشته شده به زبان‌هاي مارك‌آپ ‌(Markup)‌ استفاده مي‌شود. زبان‌هاي استايل‌شيت همان‌طور كه از نام آنها بر‌مي‌آيد، فرم نمايش فايل‌ها را مشخص مي‌كنند. مهم‌ترين كاربرد اين زبان ايجاد استيل و فرم براي صفحات وب نوشته شده به‌زبان ‌HTML‌ و ‌XHTML‌ است. با اين وجود ‌CSS‌ را مي‌توان در مورد هر نوع متن نوشته شده به زبان ‌XML‌ از جمله ‌SVG‌ و ‌XUL‌ اعمال كرد. ‌ ‌


‌ويژگي‌ها ‌ ‌
از مهم‌ترين مزاياي ‌CSS‌ اين است كه كاربران مي‌توانند رنگ، فونت، ساختار و ديگر وجوه نمايش متن را تغيير دهند. هدف اصلي از طراحي ‌CSS‌ جدا كردن محتواي متني فايل‌ها از شيوه نمايش آنها است. محتواي متني فايل‌ها به زبان ‌HTML‌ و ديگر زبان‌هاي مارك‌آپ و شيوه نمايش متن با استفاده از زبان ‌CSS‌ نوشته مي‌شود. اين جداسازي مي‌تواند دسترسي به محتواي متني را بهبود بخشد، انعطاف‌پذيري و كنترل روي مشخصات و ويژگي‌هاي نمايش را افزايش دهد و پيچيدگي و تكرارمحتواي ساختاري را از طريق ايجاد امكاناتي مانند طراحي وب بدون استفاده از جدول كاهش دهد. با استفاده از ‌CSS‌ مي‌توان يك صفحه مارك‌آپ را به شيوه‌‌هاي ‌(Style)‌ گوناگون و با شيوه‌هاي رندرينگ متفاوت نمايش داد. روش‌هاي مختلف رندرينگ فايل را به اشكال مختلف مناسب براي كاربردهاي مختلف آماده مي‌كند. ‌به‌عنوان مثال، نسخه‌هاي قابل چاپ، نسخه‌هاي قابل تبديل به صوت كه با مرورگرهاي مبتني بر صدا يا خواننده صفحه نمايش قابل خواندن هستند توسط ‌CSS‌ آماده مي‌شوند. از مهم‌ترين ويژگي‌هاي ‌CSS‌ مي‌توان به امكان رندرينگ صفحه براي تبديل به خط بريل اشاره كرد. ‌ ‌
دستور زبان ‌CSS‌
دستور زبان ‌CSS‌ ساده است و از تعداد اندكي كلمات كليدي انگليسي تشكيل مي‌شود كه براي مشخص كردن اسامي مشخصات فرم‌هاي گوناگون استفاده مي‌شوند. يك استايل‌شيت در حقيقت يك ليست از قوانين است. هر قانون يا مجموعه قوانين از يك يا چند انتخاب كننده و يك بلوك تعريف‌كننده تشكيل مي‌شود. بلوك تعريف‌كننده شامل يك ليست از تعريف‌هاي جدا شده توسط سمي‌كالن‌(‌ است كه درون دو كروشه قرار مي‌گيرند. هر تعريف خود شامل يك مشخصه، يك كولون، يك مقدار و در انتها يك سمي كولون است. ‌ ‌
‌CSS‌ داراي يك الگوي تعيين تقدم براي مشخص كردن تقدم قوانين فرم‌هاي مختلف است. زماني كه چند قانون مرتبط با يك استيل قابل اعمال هستند، ‌CSS‌ تقدم آنها را تعيين مي‌كند و سپس با محاسبه وزن يا تقدم هر قانون، اين تقدم را به آنها اختصاص مي‌دهد. اين عمل كه به ‌Cascade‌ به معناي «آبشار» معروف است نتايج اعمال قوانين را قابل پيش‌بيني مي‌سازد. يكي از ويژگي‌هاي قابل توجه در ‌CSS‌ اين است كه اجازه مي‌دهد فرم و استيل يك فايل تحت تاثير چند استايل‌شيت باشد. يك استايل‌شيت مي‌تواند برخي از ويژگي‌هاي خود را از يك استايل‌شيت ديگر به ارث ببرد. اين ويژگي امكان ايجاد تركيب منحصر‌به‌فردي از انواع فرم‌ها را فراهم مي‌كند. ‌ ‌
كاربرد ‌CSS‌
پيش از پيدايش ‌CSS‌ تقريبا همه ويژگي‌هاي نمايشي اسناد ‌HTML‌ در كد ‌HTML‌ نوشته شده به‌زبان مارك‌آپ درج مي‌شد. رنگ فونت، فرم و استيل پس زمينه، مرزها و اندازه‌ها و نيز نحوه قرار گرفتن اجزاي مختلف نسبت به هم بايد به‌طور مستقيم و اغلب به‌طور تكرارشونده در كد ‌HTML‌ گنجانيده مي‌شدند. ‌CSS‌ به برنامه‌نويسان اجازه مي‌دهد كه بخش بزرگي از اين اطلاعات را به يك استايل‌شيت مجزا منتقل كنند و با اين كار كد ‌HTML‌ را ساده‌تر كنند و كارايي آن را افزايش دهند در حالي كه كدهاي پيش از پيدايش ‌CSS‌ علاوه بر پيچيدگي زياد انعطاف‌پذيري اندكي داشتند و نگهداري كد نيز با دشواري و هزينه زياد همراه بود. ‌ ‌
تاريخچه
پيدايش استايل‌شيت‌ها به دهه 1970 باز مي‌گردد. در آن زمان اين نوع فايل‌ها ‌SGML‌ ناميده مي‌شدند. آبشاري كردن اين صفحات به‌عنوان ابزاري براي ايجاد يك روش سازگار و مناسب براي فراهما~وري اطلاعات فرم و استيل براي صفحات وب به‌وجود آمد. با گذشت زمان، رشد زبان ‌HTML‌ آن را به يكي از مهم‌ترين ابزارهاي كار توسعه‌دهندگان وب تبديل كرد. هرچند اين روند تكاملي قدرت كنترل طراح بر ظاهر سايت را تا حد زيادي افزايش مي‌داد، اين امر به‌قيمت پيچيدگي كد ‌HTML‌ و افزايش هزينه‌هاي نوشتن كد و نگهداري آن تمام مي‌شد. گوناگوني در پياده‌سازي مرورگرهاي وب ايجاد يك وضعيت ثابت و پايدار در ظاهر سايت را ناممكن مي‌ساخت و كاربران كنترل كمتري بر شيوه نمايش صفحات وب داشتند و نمي‌توانستند در صورت لزوم تغييري در آن به‌وجود آورند. ‌براي بهبود قابليت‌هاي نمايش صفحات وب، 9 زبان مختلف به ‌C3W‌ پيشنهاد شد. از ميان اين 9زبان، دو زبان انتخاب شدند كه پايه‌هاي اصلي ‌CSS‌ را تشكيل مي‌دهند. اين دو زبان عبارت بودند از: ‌CHSS‌ و ‌SSP‌. طراحي و توسعه ‌CSS‌ در سال 1995 آغاز شد و پيش از پايان سال 1996 رسما با نام ‌CSS‌ سطح يك منتشر شد. نسخه كنوني ‌CSS‌ به‌نام ‌CSS‌ سطح 3 كه در سال 1998 پديد آمد، همچنان در حال توسعه است. ‌
پشتيباني مرورگرها
***** ‌CSS‌ يك فن كدگذاري است كه هدف آن نمايش يا مخفي كردن بخش‌هايي از ‌CSS‌ در مرورگرهاي مختلف است. با استفاده از ***** ‌CSS‌ مي‌توان كدهاي ‌CSS‌ را به‌نحوي تغيير داد كه در مرورگرهاي مختلف به‌درستي نمايش داده شود.
محدوديت ها ‌ ‌
مرورگرهاي مختلف كدهاي ‌CSS‌ را به‌روش‌هاي مختلف رندر مي‌كنند. اين امر نتيجه اشكالات موجود در طراحي مرورگرها يا عدم پشتيباني برخي از مرورگرها از ويژگي‌هاي ‌CSS‌ است. به‌عنوان مثال ‌IE‌ كه از نسخه 3 تاكنون نسخه ‌2.0 CSS‌ را پياده‌سازي كرده است، در اغلب نسخه‌هاي پيش از نسخه 8 بسياري از خصوصيات بسيار مهم مانند طول و عرض را به‌درستي تفسير نمي‌كرد. اكنون اكثر مرورگرها با موفقيت بر اين مشكل غلبه كرده‌اند اما ‌CSS‌ هنوز نيازمند اعمال تغييرات زيادي است تا به ساختار قابل نمايش يكساني روي همه مرورگرها دست يابد. ‌ ‌به‌نظر مي‌رسد كه تا دستيابي به ساختاري كه با دقتي در حد پيكسل روي همه مرورگرها يكسان نمايش داده شود، راه درازي در پيش است. عدم وجود عبارت‌هاي محاسباتي در ‌CSS‌ انجام عمليات محاسباتي را امكان‌ناپذير مي‌سازد. اگرچه ‌CSS‌ براي انجام محاسبات طراحي نشده است، اما در مواردي مانند تعيين حاشيه صفحه بر حسب تعداد ستون‌ها يا پيكسل‌ها انجام محاسبات ساده لازم است. ‌ ‌
عدم وجود متغيرها در ‌CSS‌ نيز از مواردي است كه بايد در مورد آن چاره‌انديشي شود. در زبان ‌CSS‌ تنها مي‌توان از مقادير ثابت استفاده كرد. به اين ترتيب وقتي مقدار يكي از ثابت‌هاي موجود در كد تغيير مي‌كند تنها با استفاده از دستور ‌Replace-all‌ مي‌توان مقدار آن را در همه قسمت‌هاي كد تغيير داد. تغيير مقدار از طريق جابجايي چندان منطقي نيست واغلب مشكل ايجاد مي‌كند. مثلا اگر بخواهيم برخي از مقادير ارتفاع را كه 50 پيكسل هستند، تغيير دهيم و برخي ديگر را ثابت نگهداريم، استفاده از اين شيوه عملي نيست. انجام اين كار در ‌CSS‌ تنها از طريق عبارات منظم بسيار پيچيده امكان‌پذير است. بسياري از توسعه‌دهندگان كد براي حل اين مشكل از ‌PHP‌ براي كنترل و تغيير خروجي ‌CSS‌ استفاده مي‌كنند. امروزه بسياري از توسعه‌دهندگان كد معتقدند كه ‌CSS‌ نيازمند پياده‌سازي برخي از المان‌ها و ويژگي‌هاي زبان‌هاي برنامه‌نويسي است.
‌ ‌مزايا
با تركيب ‌CSS‌ با امكانات يك سيستم مديريت محتوا، مي‌توان سيستم را به‌نحوي برنامه‌ريزي كرد كه انعطاف‌پذيري سيستم افزايش يافته و قابل تطبيق با محتواي صفحه باشد. اين مساله به كاربران و برنامه‌نويساني كه آشنايي زيادي با مفاهيم ‌CSS‌ و با ويرايش كد ‌CSS‌ و ‌HTML‌ ندارند، كمك مي‌كند بدون ايجاد تغييرات زياد صفحات جديد را به فرمي يكسان با صفحات قبلي ايجاد كنند. براي نمونه، نويسنده يك مقاله مي‌تواند تعداد ستون‌هاي مقاله را تعيين كند يا تصميم بگيرد كه كدام صفحات مقاله داراي تصوير باشند. اين اطلاعات به سيستم مديريت محتوا منتقل مي‌شود و منطق برنامه اطلاعات دريافتي را ارزيابي مي‌كند و بر اساس تعداد مشخصي از پارامترها تعيين مي‌كند كه چطور مجموعه‌اي از قوانين و كلاس‌ها را به المان‌هاي ‌HTML‌ اعمال كند. بنابراين مكان و فرم المان‌ها توسط سيستم مديريت محتوا تعيين مي‌شود. ‌ ‌اهميت اين مزيت بزرگ زماني مشخص مي‌شود كه در مقياس‌هاي خيلي بزرگ و با سايت‌هاي پيچيده سر و كار داشته باشيم. سايت‌هاي خبري نمونه بارزي از اين نوع سايت‌ها هستند، تعداد افرادي كه اين نوع سايت‌ها را به‌روز مي‌كنند و يا به‌نوعي به آنها اطلاعات ارسال مي‌كنند، نسبتا زياد باشد و اين امتياز بزرگ طراحي و نگهداري آنها را تا حد زيادي آسان مي‌كند. ‌ ‌
وقتي ‌CSS‌ از ديدگاه ارث‌بري و ‌Cascading‌ به‌طور كارآمد استفاده شود، يك استايل‌شيت يكنواخت و يك‌دست به‌دست مي‌آيد كه مي‌توان فرم و استيل آن را بر همه المان‌هاي سايت اعمال كرد. در صورت نياز به تغيير فرم و استيل برخي از المان‌ها، اعمال اين تغييرات با استفاده از سيستم مديريت محتوا بسيار ساده و با استفاده از ويرايش تعداد اندكي از قوانين امكان‌پذير است؛ در حالي‌كه پيش از پيدايش ‌CSS‌، اين نوع نگهداري از سيستم بسيار دشوار، پرهزينه و وقت‌گير بود. ‌
آويد افضل

[mehran_7418]

سلام
ممنون از پستی که گذاشتی