CSS (سی اس اس) چیست؟

CSS مخفف عبارت (Cascading Sheet Style) و به معنی برگه های به سبک آبشاری می‎باشد. سی اس اس یک زبان برنامه نویسی ظاهری است که وظیفه سنگین طراحی ظاهر سایت‌ها را برعهده دارد. CSS در سال ۱۹۹۶ توسط کنسرسیوم جهانی وب ایجاد و توسعه داده شد که طی این سال‌ها کمک بزرگی به دنیای وب و طراحی سایت‌ها کرده است. به طور خلاصه زبانی برای شکل دادن و تنظیم نحوه‌ی آرایش عناصر مختلف صفحات وب است.
به طور کلی می‎توان گفت که این زبان برنامه نویسی، به شرح عناصر HTMLمی‌پردازد. به این صورت که خصوصیاتی مانند رنگ‌ها، سایز، جاگیری و چیدمان را به به برچسب‌های HTML اختصاص می‎دهد.

کاربرد زبان CSS:

برگه‌های CSS در واقع مسئولیت ایجاد ظاهر سایت را به عهده دارند و رنگ، اندازه و محل قرارگیری متون و دیگر تگ‌ های تعریف شده در HTML را تعیین می نمایند.
شما به کمک زبان CSS می توانید برای صفحه خود در مدیا های مختلف ویژگی های مختلفی در نظر بگیرید (ریسپانسیو سازی). بنابراین به کمک سی اس اس شما این قدرت را خواهید داشت که ظاهر وب سایت خودتان را به هر شکل دلخواهی درآورید.

پیشنهاد مطالعه: معرفی AMP و نحوه تاثیر آن بر سایت

کاربردهای رایج سی اس اس:

• تعین فونت
• تعین رنگ پیش زمینه و پس زمینه
• تعیین فاصله و حاشیه عناصر صفحه
• تعیین عرض و ارتفاع
• تعیین تصویر پس زمینه
• تغییر موقعیت قرار گیری عناصر صفحه
• چپ چین و راست چین کردن عناصر

چرا باید از کدهای CSS استفاده کنیم؟

کدهای CSS می‌تونن تو بسیاری از کارهای تکراری، زمان طراحی و حجم کدهای سایت صرفه‌جویی کنن.
خوبه که بدونین گوگل در رتبه بندی وب‌سایت‌ها یعنی همون سئو، سرعت بارگذاری سایت و کیفیت کدها رو هم مدنظر قرار می‌ده و وب سایت‌هایی رو که سرعت بارگذاری اون‌ها مناسب نباشه، کمتر به جستجو کنندگان معرفی می‌کنه.
نکته: در گذشته طراحی سایت و چیدمان عناصر صفحات وب، از طریق جدول انجام می‌گرفت. جداول مشکلات زیادی داشتن و به این خاطر با ظهور CSS کاملا منسوخ شدن. از جمله مشکلات جداول می‌توان به حجم بالای پردازش آنها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد. این ویژگی منفی وب‌سایت‌هایی است که با جدول پیاده سازی می‌شدن.
در مقابل در وب‌سایتی که با کدهای CSS پیاده‌سازی بشه، عناصر یکی بعد از دیگری در هنگام بارگزاری بر روی صفحه پدیدار می‌شن و کاربر از لحظه درخواست می‌تونه مشغول مطالعه و مشاهده وب‌سایت تا زمانی که بارگزاری کامل بشه، باشه.
همچنین ناگفته نمونه که CSS در ۹۰٪ از مرورگرها، می‌تونه به خوبی عمل کنه.

پیشنهاد مطالعه: معرفی تگ ALT و بررسی تاثیر آن بر سئو

مزایای سی اس اس:

• CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)
• تغیییرات مجدد تگ های HTML بسیار راحت میشه.
• طراحی صفحه بدون نیاز به تگ های قالب بندی HTML
• طراحی صفحات دینامیک به کمک javascript

معایب سی اس اس:

• سطوح و لول های مختلف
• تقسیم بندی
• مشکلات امنیتی

چگونه یک سند CSS ایجاد کنیم؟

ایجاد یک سند CSS:

بعد از اینکه سند HTML مان را ایجاد کردیم ، نوبت به ایجاد سند CSS مان میرسد. یعنی سندی که به وسیله آن بتوانیم سایتمان را رنگ آمیزی کنیم و به ظاهرش رنگ و لعاب ببخشیم. خب همانطور که قبلا هم گفتیم ، ما در این دوره آموزشی از ادیتور ++notepad استفاده میکنیم. شما می توانید از هر ادیتور دیگری که دوست دارید استفاده کنید!

نکته: معمولا فایل css را در کنار فایل html و در root قرار میدهند. یعنی فایل css را در داخل یک پوشه جداگانه دیگر قرار نمی دهند.

دستور کار:

گام اول : ++notepad را باز کنید!

گام دوم : از منوی file گزینه new را بزنید.

گام سوم : از منوی file گزینه save as را بزنید.

گام چهارم : نام فایل را style.css بگذارید و پسوند آن را CSS. قرار دهید.

گام پنجم : در نهایت فایل را در پوشه mihanwp که قبلا ایجاد کرده بودید ذخیره کنید.

کار تمام است! به همین راحتی یک سند CSS را ایجاد کردید که می توانید در آن کد نویسی انجام دهید.

HTML و CSS پیوندتان مبارک!

پیشنهاد مطالعه: تاثیر SSL بر سئو

خب حالا سوال این است که چطور فایل cssمان را به فایل htmlمان پیوند دهیم؟ به عبارتی چه کار کنیم که هر کدی که در فایل cssمان می نویسیم ، به فابل htmlمان اعمال شود؟

سه روش برای استفاده از css در html وجود دارد که هر سه روش را به طور کامل برایتان توضیح می دهم و باید به خوبی روش های گفته شده را فرا بگیرید چون بعدها خیلی به دردتان میخورد!

. استفاده از تگ بسته یا همان روش اکسترنال.

. استفاده از روش مستقیم یعنی تگ باز و بسته

. استایل نویسی در درون خود تگ. روش درون تگی.

» استفاده از تگ بسته یا همان روش اکسترنال:

در این روش با استفاده از تگ بسته که درون تگ بستهقرار میگیرد فایل cssمان را به فایل htmlمان پیوند میدهیم. بهترین روش همین روش است و همواره توصیه شده از این روش برای استایل نویسی استفاده کنیم. این روش به دلیل منظم تر کردن کدها استفاده بسیاری دارد و تقریبا 90 درصد وبسایت ها از این روش استفاده میکنند. کد زیر را به خوبی حفظ کنید و چند بار بنویسید تا ملکه ذهنتان شود ، چون بسیار مهم است.

پیشنهاد مطالعه: HTML چیست و چه کاربردی دارد؟

» استفادi از روش مستقیم یعنی تگ باز و بسته:

با استفاده از این روش می توانیم به صورت مستقیم در داخل فایل htmlمان کدهای cssمان را قرار بدهیم. البته یادتان باشد که تگ استایل باید حتما در داخل تگ head باشد.

» استایل نویسی در درون خود تگ. روش درون تگی:

در این روش با استفاده از اتربیوت(ویژگی یا صفت) style می توانیم در درون تگ ها استایل بنویسیم. این روش به دلیل به هم ریختگی کد ها توصیه نمیشود.