CSS چیست؟





CSS مخفف کلمات Cascading Style Sheets ، در واقع نوعی زبان اسکریپت نویسی است که جهت مشخص کردن و نمایش خصوصیات کدهای نوشته شده در یکی از زبان های موسوم به Markup Language بکار می رود. البته تصور اکثر افرادی که با وب و طراحی سایت سر و کار دارند این است که CSS برای نمایش خصوصیات صفحات HTML مورد استفاده قرار می گیرد. در صورتی که علاوه بر HTML ، صفحات XHTML  و همچنین داده های مربوط به XML نیز می توانند از آن استفاده کنند. 
همانطور که در مقالات پیشین ذکر شد، در کنار HTML و Javascript این زبان نیز یکی از 3 بخش و رکن اصلی طراحی وب سایت است. یک فایل CSS در واقع باعث جدا سازی خصوصیات تگ های بکار رفته در سورس Html و غیره است. به این تریتب که شما با استفاده از تگ های Html اقدام به طراحی سایت می کنید ولی ویژگی های آنها (مانند رنگ، فاصله، سایز، نوع فونت، نوع حاشیه ها و غیره) را در این فایل تعریف می کنید. اینکار علاوه بر بهبود ساختار Html ، به طراحان وب سایت کمک می کند که راحت تر و منظم تر خصوصیات المان های صفحات Html که به آنها Style گفته می شود را تعریف کنند و علاوه بر این کدهای سایت، خوانا تر باشند و تغییر آنها نیز راحت تر. ضمنا فایل CSS نیز مانند فایل های Html ، نوعی فایل متنی (Text) است. 

طرز نوشتن این کدها در فایل CSS به این صورت است که در ابتدا نام آن المان مربوطه نوشته شده و سپس در آکولادها { } خصوصیات مورد نظرمان را به آن تخصیص می دهیم. مثلا: 


H1
{
Color:red;
text-align:center;
}

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

<style> 
H1
{
Color:red;
text-align:center;
}
</style>

هر یک از این خصوصیات باید با استفاده از سِمی کالون ";" از یکدیگر جدا شوند. ضمنا بهترین راه برای استفاده از المان های Html و تخصیص ویژگی ها به آنها در فایل CSS مربوطه، استفاده از دو عنصر Class و یا id است. به این ترتیب براحتی هر المانی که می خواهیم به آن خصوصیاتی را نسبت بدهیم را مشخص نماییم.
مثلا در مورد مثال بالا، اگر چند تگ H1 در صفحه Html داشته باشیم، همه آنها دو ویژگی بالا را بدست می آورند اما اگر یک جا (مثلا وسط صفحه) در یک مورد خاص می خواهیم که آن تگ H1 به رنگ آبی نشان داده شود و یا مکانش متفاوت باشد، در این صورت به آن تگ، id و یا Class اختصاص می دهیم تا خصوصیات آن از بقیه المان ها جدا تعریف بشود. 

این کار دست طراحان وب را باز می گذارد تا با استفاده از فایل های CSS براحتی بتوانند برای تک تک المان ها و Tag های بکار رفته در سورس Html سایت شان، ویژگی ها و Style مورد نظرشان را تعریف کنند و هیچ محدودیتی نداشته باشند. 

اگر بخواهیم در مورد تاریخچه CSS صحبت کنیم، بطور خلاصه باید خدمتتان بگوییم که در ابتدا طرح اولیه این فایل، توسط یکی از همکاران "تیم برنزلی"  (Tim Berners-Lee ، طراح و مخترع وب) در سازمان CERN ، بنام Håkon Wium Lie در اکتبر سال 1994 طراحی شد ولی اولین نسخه آن در 17 ام دسامبر سال 1996 میلادی عرضه شد.  
در سالهای بعد با ارتقاء نرم افزارهای مرورگر، کم کم همه آنها این استاندارد را پذیرفته و در حال حاضر تمام مرورگرها از آن استفاده می کنند. در حال  حاضر نسخه های جدیدتر و استانداردهای روز CSS توسط یک گروه و کنسرسیوم شامل World Wide Web Consortium و همینطور Håkon Wium Lie مرتب توسعه پیدا کرده و به روز می شود. 

از جمله  CSS2 که در سال 1998 عرضه شد و شامل امکانات و المان های جدیدی (از جمله Z-index) بود. همچنین نسخه CSS3 هم از ماه June سال 2012 عرضه شده و تا کنون بسیاری از طراحان وب سایت سراسر جهان از آن جهت طراحی سایت، استفاده می کنند. البته نسخه CSS4 نیز عرضه شده ولی بدلیل اینکه دارای یک استاندارد یکسان و یکدست نیست، هنوز مرجع و نسخه کامل و تعریف شده ای از آن ارائه نشده. 

امروزه به دلیل مزایای فراوان، بیشتر طراحان سایت در جهان از CSS در کنار Html استفاده می کنند و زیباترین و جذاب ترین وب سایت ها را با استفاده از جدیدترین استانداردهای آنها یعنی CSS3 و HTML5 طراحی کرده و به روی اینترنت و دنیای وب، می فرستند. حتی بازی های آنلاین تحت وب نیز با استفاده از این دو استاندارد (و صد البته با کمک زبان برنامه نویسی جاوااسکریپت) نوشته می شوند

زبان های برنامه نویسی برای طراحی سایت
زبان های برنامه نویسی برای طراحی سایت
زبان های برنامه نویسی برای طراحی سایت
مقایسه ASPnet و PHP در طراحی سایت
مقایسه ASPnet و PHP در طراحی سایت
مقایسه ASPnet و PHP در طراحی سایت
تگ های HTML
تگ های HTML
تگ های HTML
 ACCELERATED MOBILE PAGE به چه معناست؟
ACCELERATED MOBILE PAGE به چه معناست؟
ACCELERATED MOBILE PAGE به چه معناست؟