برای ایجاد سایت های چند ستونه  توسط CSS یکی از بهترین خاصیت هایی که میتوانید به تگ ها بدهید ، خاصیت Float است.

• اگر میخواهید المان های دیگر اطراف المان float شده را بگیرند باید بصورت inline باشند یا اگر float دارند باید جهت float آنها با جهت float المان اولیه یکی باشد.
•  المان هایی که خاصیت float می گیرند، اندازه شان به اندازه محتوای داخلشون بستگی دارد و اگر محتوا کم باشد، المان مورد نظر کوچک میشه . برای رفع این مشکل باید width رو به المانی که float دارد بدهید.
• اگر در یک المان block چند تا المان float داشته باشید ، المان بلاک جمع میشه و گاهی المان های float از پایین ، از المان parent خود بیرون می زنند. برای رفع این مشکل اینجا را بخوانید .
• اگر المانی که بعد ازالمان float شده میاد، خاصیت clear داشته باشد، دیگه اطراف المان فلوت شده را فرا نمی گیرد.
• المانی که خاصیت clear=both دارد و float نیز شده است، فقط المان هایی را که قبل از خودش آمده است، clear میکند . نه المان های بعدی را . (آشنایی با تگ clear )

الگوهای آبشاری یا روی‌انداز آبشاری سَبْک یا سی‌اس‌اس (Cascading Style Sheets)، روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب اند. الگوهای آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن ساده رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره‌ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.

بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب HTML و XHTML است ولی آن را می‌توان بر هر نوع مستند XML از جمله SVG و XUL اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر (W3C) است.

استانداردهای تازه:

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

برتری های CSS:

با اینکه در سال‌های نخست پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان سازی آنها برای چیدمان کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده. چیدمان از اکنون، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (TABLE) دارند. انجام می‌شود، هر دیواره، یک موزاییک مجازی بخش کننده صفحه است که کار چیدمان را آسان‌تر انجام می‌دهد. جدول ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آنها برای چیدن داده‌های صفحه‌های وب استفاده نمی‌شود. الگوهای آبشاری، افزون بر سبک تر کردن هر صفحه وب و پاک‌تر کردن آن از داده‌های تصویری و نمایشی بی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر، و دسترسی و کارایی وب را بهتر کرده اند.

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

نسخه‌های استاندارد CSS :

الگوهای آبشاری، روش چاپ شدن، روش شنیده شدن صدا برای کاربرانی با مشکل دسترسی، و دستورهای فراوان دیگری را برای چگونگی نمایش سایه زیر قلم ها و پس زمینه‌های هر صفحه وب را در خود جای می‌دهند. آخرین نسخه پیشنهاد شده از استاندارد CSS، نسخه ۳ می‌باشد که هنوز در مسیر پیشنهادی قرار دارد و مرورگرهای اینترنتی، هنوز تمام دستورهایش را پشتیبانی نمی‌کنند.

نحوه استفاده از CSS:

برای درج CSS در یک سند Html از یکی از سه روش زیر می توان بهره گرفت:

• الگو نامه خارجی

در این روش برای اتصال یک سند CSS که با پسوند css شناخته می‌شود، از تگ link در قسمت head استفاده می شود. مثال:

• الگو نامه داخلی

الگو نامه داخلی در قسمت head در سند Html، با استفاده از تگ style معین می گردد. مانند زیر:

• الگوی خطی

در این روش مشخصات الگو در تگ مربوطه ذکر می شود. مانند زیر:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

منبع: دانشنامه ویکی پدیا

<style type="text/css"> a { color: #008000; } a:visited { color: #00FF00; } a:active { color: #FF00FF; } a:hover { color: #00FFFF; } </style>

در این کد بعد از کلمه ی   a   و آکولاد (دو ابرو) می توانید رنگ لینک رو مشخص کنید.

در قسمت   a:visited   مشخصات لینکی را که کاربر قبلا دیده است می بینید.

در قسمت   a:active   مشخصات لینکی که وقتی کاربر روی آن کلیک کرده ولی آن را ول نمی کند.

در قسمت   a:hover   مشخصات لینکی که وقتی کاربر ماوس رو روی لینک نگه می دارد به اون حالت در می آید.

برای دیدن کد رنگ های مختلف اینجا کلیک کنید.

در این کد کاربر نه می تونه صفحه وب شما رو ذخیره کنه نه می تونه از روی متن شما کپی کنه (متنتون رو انتخاب کنه)

<!-- moisrex.r98.ir --> <SCRIPT language=JavaScript1.2> //Disable select-text script (IE4+, NS6+) //Exclusive permission granted to Dynamic Drive to feature script function disableselect(e){ return false } function reEnable(){ return true } //if IE4+ document.onselectstart=new Function ("return false") //if NS6 if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </SCRIPT> <!-- moisrex.r98.ir -->