CSS یا Cascading Style Sheets ، یک زبان برنامهنویسی وب است که برای توصیف و استایلدهی به صفحات وب به کار میرود. با استفاده از CSS، میتوانید ظاهر و استایل صفحات وب خود را بهبود ببخشید و آنها را قابل فهمتر و جذابتر کنید.
css به عنوان یکی از اصلیترین زبانهای وب، به شما اجازه میدهد تا طرح بندی، رنگ، فونت، فاصله بین خطوط، حاشیه، پسزمینه، تصاویر، انواع انیمیشن و تأثیرات دیگر را بر روی صفحات وب خود تنظیم کنید. همچنین، با استفاده از این زبان میتوانید ساختار HTML را بهبود بخشید و صفحات وبی سازگار را بهبود ببخشید.
البته یک نکته که حائز اهمیت است این است که CSS همانند زبان HTML یک زبان برنامه نویسی نیست به این دلیل که از قواعد و ساختار های یک زبان برنامه نویسی پشتیبانی نمیکند. به همین علت css یک زبان تحت وب به شمار میرود نه یک زبان برنامه نویسی تحت وب !
تاریخچه CSS
این زبان برای اولین بار در سال ۱۹۹۶ توسط Håkon Wium Lie و Bert Bos ارائه شد. ایده اصلی پشت ساخت این زبان، جداسازی محتوا (Content) از طرح بندی (Presentation) بود.
قبل از css، طراحی وب سایت ها با استفاده از جداول (Tables) و تگ های HTML (HTML Tags) صورت میگرفت. این روش باعث شده بود که طراحی وب سایت ها بسیار پیچیده و سخت باشد و تغییر آنها نیز مشکل بود. با ارائه CSS، این مشکلات حل شد و طراحی وب سایت ها بهبود یافت.
در ابتدا، سی اس اس به عنوان یک پیشنهاد از سوی W3C ارائه شد و در سال ۱۹۹۸ به عنوان یک استاندارد رسمی تأیید شد. در طول سالها، ویژگیهای جدیدی به CSS اضافه شد که باعث شده است که این زبان به یکی از مهمترین ابزارهای طراحی وب تبدیل شود.
با اضافه شدن ویژگیهای جدید css به یکی از پیچیدهترین زبانهای برنامهنویسی وب تبدیل شده است. از جمله ویژگیهای جدید میتوان به ترکیبپذیری (Flexbox)، شبکه (Grid)، انیمیشن (Animation) و رنگهای شیبی (Gradient) اشاره کرد.
آشنایی با CSS
سی اس اس یک زبان ساده و قابل فهم است که برای توصیف استایل صفحات وب استفاده میشود. هر کدام از قواعد CSS یک انتخابگر از نوعی عنصر HTML است که به آنها قواعد استایل اعمال میشود. به عنوان مثال، شما میتوانید یک قانون برای تغییر رنگ پسزمینه یک صفحه وب در زمان بارگیری اعمال کنید. این کد به شکل زیر است:
body {
background-color: #FFFFFF;
}
این کد CSS، پسزمینه صفحه وب را به رنگ سفید (#FFFFFF) تغییر میدهد.
CSS چگونه عمل میکند؟
زبان سی اس اس در یک صفحه HTML با سه روش کار میکند.
روش اول به صورت درون خطی(inline) است که درون تگ های HTML با استفاده از صفت استایل میتوان خصوصیات مربوط به آن تگ را نوشت و تنظیم نمود
روش دوم درون صفحه ای یا (internal) نام دارد. این روش با استفاده از یک تگ به نام ” <style> ” شکل میگیرد که کد های cssدرون آن قرار میگیرند.
روش سوم به صورت برون صفحه ای (external) عمل میکند. در این روش کد های سی اس اس درون یک فایل دیگر که با پسوند css. مشخص شده قرار میگیرند. و با استفاده از یک تگ به نام ” </link> ” به صفحه اچ تی ام ال لینک میشوند.
CSS در سمت کلاینت کار میکند یا سرور؟
این زبان در سمت کلاینت (مرورگر وب) کار میکند. این به این معنی است که سرور وب فقط اطلاعات HTML و CSS را به مرورگر کاربر ارسال میکند و سپس مرورگر با استفاده از CSS، صفحه وب را ظاهری دلخواه برای کاربر نمایش میدهد.
به عنوان مثال، سرور ممکن است یک فایل HTML را به مرورگر ارسال کند که در آن به یک فایل CSS دیگر هم ارجاع داده شده است. مرورگر، پس از دریافت این دو فایل، HTML را برای نمایش محتوا استفاده کرده و سی اس اس را برای تنظیم ظاهر صفحه وب اعمال میکند. در نتیجه، سی اس اس در سمت کلاینت برای تغییر ظاهر و تنظیمات صفحه وب استفاده میشود.
سخن پایانی
امروزه ،CSS به همراه HTML و JavaScript به عنوان سه عنصر اصلی طراحی وب سایتها شناخته میشوند و بسیاری از سایتهای بزرگ و محبوب دنیا از سی اس اس برای طراحی خود استفاده میکنند. با وجود فریمورک ها و کتابخانه های مخصوص که برای این زبان نوشته شده ، وجود این زبان را کمی کمرنگ نشان میدهند اما به هر حال فعلا سی اس اس یک عنصر جدا نشدنی صفحات وب میباشد.