سی اس اس (CSS) یک زبان برنامه نویسی است که به کمک آن می توان ویژگی های زیبایی شناختی صفحات یک وب سایت را طراحی کرد و چیدمان و ظاهر صفحات را با کمک این زبان برنامه نویسی تغییر داد. در این مقاله سعی داریم شما را با زبان برنامه نویسی CSS و اهمیت آن بیشتر آشنا کنیم. پس تا انتهای این مطلب با ما همراه باشید.
سی اس اس چیست؟
سی اس اس مخفف عبارت Cascading Style Sheets است و همان چیزی است به یک صفحه رنگ و لعاب می دهد. در حالی که HTML ساختار یک فایل را با پاراگراف ها، سرصفحه ها و تصاویر کنترل می کند، CSS به شما امکان می دهد رنگ ها، فونت ها، طرح بندی ها و ویژگی های ظاهری دیگر را کنترل کنید. برای درک بهتر این موضوع، اگر HTML را اسکلت یک ساختمان در نظر بگیرید و CSS نمای بیرونی آن می باشد.
در مبحث طراحی وب سایت، CSS و HTML دو عنصر اصلی هستند و نمی توان برای آنها جداگانه ارزش گذاری کرد. چراکه بدون CSS، و تنها با HTML صفحات وب به صورت متن ساده، روی پس زمینه سفید هستند که هیچ جذابیت بصری نیز ندارند.
تاریخچه سی اس اس
قبل از توسعه CSS در سال 1996 توسط کنسرسیوم جهانی وب (W3C)، صفحات وب از نظر شکل و عملکرد بسیار محدود بودند. در آن زمان مرورگرهای اولیه یک صفحه را به صورت هایپرتکست – با متن ساده، تصاویر و لینک هایی به سایر صفحات هایپرتکست – نشان می دادند. اصلاً طرح بندی وجود نداشت و ظاهر صفحات بی روح و یکنواخت بود؛ فقط پاراگراف ها در ستون هایی در سراسر صفحه دیده می شدند. اما با ظهور سی اس اس چندین نوآوری در صفحات وب سایت روی داد. مثل:
- فونت هایی غیر از فونت های پیش فرض برای مرورگر تعریف کرد.
- قابلیت تغییر رنگ و اندازه متن لینک ها فراهم شد.
- امکان تغییر رنگ پس زمینه ایجاد شد.
- امکان تغییر مکان و طریقه قرار گرفتن عناصر مختلف یک صفحه نیز فراهم شد.
اولین مرورگری که این زبان برنامه نویسی را خواند و از آن استفاده کرد اینترنت اکسپلورر 3 مایکروسافت در سال 1998 بود.
کنسرسیوم جهانی وب که هنوز استانداردهای وب را نظارت و ایجاد می کند، اخیراً استاندارد جدیدی به نام CSS3 را برای این زبان کد نویسی منتشر کرد. با CSS3، توسعه دهندگان امیدوارند که همه مرورگرهای اصلی تمام عملکردهای سی اس اس را به یک شکل بخوانند و نمایش دهند.
سی اس اس چطور کار می کند؟
برای درک اصول اولیه نحوه کار زبان برنامه نویسی CSS، ابتدا باید کمی در مورد HTML مدرن بدانید. توسعه دهندگان وب سایت، چیدمان یک صفحه را بر اساس «مدل جعبه ای» انجام می دهند. طبق این مدل یک صفحه وب مجموعه ای از جعبه هایی است که هر کدام حاوی یک عنصر مجزا هستند. این جعبه ها تو در تو هستند، یعنی هر کدام در داخل دیگری قرار دارند.
برای مثال header صفحه یک باکس است و باکس های کوچک تر که اجزای هدر را در بر دارند، نیز در آن قرار می گیرند. مثل لوگو، منو ناوبری، دکمه های رسانه های اجتماعی، دکمه سبد خرید، علاقه مندی ها و… .
یک طراح وب سایت، با کمک کدهای سی اس اس، به این جعبه هدر، استایل اختصاصی می دهد. برای مثال رنگ آن را بنفش می کند، فونت آن را تغییر می دهد و یا اندازه آن را بزرگ می کند. اینجاست که تاثیر زبان برنامه نویسی CSS مشخص می شود.
تغییری که طراح سایت در جعبه هدر ایجاد کرده، به جعبه های کوچکتر داخل هدر نیز اعمال می شود. یعنی آنها نیز بنفش می شوند و فونت و اندازه شان به همان نسبت تغییر می کند.
مزایای زبان برنامه نویسی CSS
علاوه بر فراهم کردن امکانات لازم برای شخصی سازی ظاهر یک وب سایت، زبان برنامه نویسی CSS مزایای دیگری هم دارد که در ادامه با یکدیگر بررسی می کنیم.
صرفه جویی در زمان
می توانید یک بار کدهای سی اس اس را بنویسید و در چندین صفحه HTML از آنها استفاده کنید. می توانید برای هر عنصر HTML یک سبک تعریف کنید و آن را بر هر تعداد صفحه که می خواهید اعمال کنید و در واقع با این کار در زمان خود صرفه جویی کنید.
اصلاح و نگهداری آسان
با کمک زبان کد نویسی CSS می توانید به سادگی سبک طراحی خود را تغییر دهید. در نتیجه این کار همه عناصر دیگر در تمام صفحات به طور خودکار بروز می شوند.
استاندارد جهانی
اکنون HTML تقریبا منسوخ شده است و همه در حال استفاده از زبان برنامه نویسی CSS هستند. بنابراین شما نیز بهتر است رویه خود را تغییر دهید تا با مرورگرهای آینده سازگار شوید.
انواع سی اس اس
در این قسمت قصد داریم با انواع کدهای سی اس اس آشنا شویم:
داخلی: برای این نوع کد سی اس اس، باید تگ <style> را در بخش <head> سند HTML خود اضافه کنید. این سبک CSS یک روش موثر برای استایل دادن به یک صفحه است. با این حال، استفاده از این سبک برای چندین صفحه زمان بر است زیرا باید قوانین CSS را در هر صفحه از وب سایت خود قرار دهید.
خارجی: در این نوع CSS، صفحه وب سایت به یک فایل سی اس اس خارجی لینک می شود. این فایل می تواند توسط هر ابزار ادیت متن بر روی گوشی ایجاد شود. این نوع CSS روش کارآمدتری است، به خصوص برای طراحی یک وب سایت بزرگ. با ویرایش یک فایل css می توانید کل سایت خود را به یکباره تغییر دهید.
درون خطی: CSS درون خطی برای استایل دادن به یک عنصر HTML خاص استفاده می شود. برای این سبک CSS، فقط باید ویژگی style را به هر تگ HTML بدون استفاده از انتخابگر (selector) اضافه کنید.
این نوع CSS توصیه نمی شود، زیرا به هر تگ HTML باید به صورت جداگانه استایل داده شود. اگر فقط از CSS درون خطی استفاده کنید، ممکن است مدیریت وب سایت شما خیلی سخت شود.
با این حال، CSS درون خطی در HTML می تواند در برخی شرایط مفید باشد. به عنوان مثال، در مواردی که به فایل های CSS دسترسی ندارید یا نیاز به اعمال سبک ها فقط برای یک عنصر دارید.
فایل سی اس اس چیست؟
این فایل در حقیقت پسوندی است که صفحات وب ما را قالب بندی می کند. فایل های مختلف به عناصر موجود در سایت ها و برنامه های ما سبک های متفاوتی می دهند. یک فایل CSS می تواند مانند یک الگو باشد که دارای ویژگی های سفارشی شده برای نحوه استایل دادن به عناصر HTML یک وب سایت است.
فایل های CSS توسط طراحان برای حفظ یک سبک مشابه در کل وب سایت استفاده می شود. این فایل ویژگی های هر صفحه از سایت را در یک مکان ذخیره می کند. هنگامی که در حال طراحی یا طراحی مجدد یک وب سایت هستید، این فایل فوق العاده مفید است زیرا به این معنی است که مجبور نیستید به هر صفحه را به صورت جداگانه استایل دهید.
شما می توانید به سرعت و به راحتی همه عناصر مشخص شده را در یک صفحه یا حتی تمام صفحات سایت مورد را به استایل دلخواه خود تغییر دهید.
حرف آخر
اگر شما هم یک وب سایت برای برند یا کسب و کار خود دارید، بدون شک دغدغه زیادی درباره ظاهر آن دارید. هر ویژگی ظاهری یک وب سایت بر روی بازدید کننده تاثیر گذار است، بنابراین توجه به آن از موضوعات اصلی در طراحی سایت است. رنگ، اندازه و نوع فونت، هدر صفحه و … همه و همه از ویژگی های ظاهری یک وب سایت هستند؛ که به کمک زبان برنامه نویسیCSS می توان هر کدام را تغییر داد و به شیوه دلخواه استایل داد. در این مقاله سعی کردیم به زبان ساده توضیحاتی درباره این زبان برنامه نویسی کارآمد و محبوب ارائه دهیم. امیدواریم توضیحات ارائه شده برایتان مفید باشد و در جای مناسب به کارتان بیاید.
سوالات متداول
سی اس اس چیست؟
CSS مخفف Cascading Style Sheet است و یک زبان برنامه نویسی است که برای تعریف سبک و استایل یک وب سایت همراه با HTML استفاده می شود.
کاربرد آن چیست؟ کجا استفاده می شود؟
این زبان برنامه نویسی برای مرورگرها مشخص می کند یک وب سایت باید چگونه به نظر برسد. به زبان ساده تر، استایل و سبک ظاهری وب سایت ها را به کمک سی اس اس طراحی می کنند.
چند نوع CSS داریم؟
سه شکل مختلف زبان برنامه نویسی CSS عبارتند از داخلی، خارجی و درون خطی که هر کدام ویژگی خاص خود را دارند و در مواقع خاصی بهتر از دیگری عمل می کنند.
تفاوت بین HTML و CSS چیست؟
زبان نشانه گذاری فرامتن (HTML) ساختار یک صفحه را مشخص می کند. به کمک آن می توان چیزهایی مانند عنوان ها و پاراگراف ها را برای یک صفحه تعریف کرد و در آن عکس و ویدیو جاسازی کرد. این در حالی است که زبان برنامه نویسی CSS یا Cascading Style Sheet استایل و ویژگی های ظاهری یک صفحه را مشخص می کند. از سی اس اس در تم، رنگ قسمت های مختلف صفحه، فونت و … استفاده می شود.
در حالی که HTML پایه و اساس و چارچوب ساختاری یک صفحه به حساب می آید، CSS بیشتر درگیر ویژگی های ظاهر و زیبایی شناختی یک صفحه است. برای درک بهتر این موضوع، می توانید اولی را اسکلت یک ساختمان، و دومی را نمای بیرونی آن در نظر گرفت. البته توجه داشته باشید که هر دو زبان برنامه نویسی در کنار هم استفاده می شوند.
منبع: w3schools.com