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

CSS چیست؟

CSS Cascade Style Sheets)) به معنی «برگه‌های سبک آبشار» یا «برگه‌های آبشاری» است. علت این نام‌گذاری این است که اعمال هر تغییر روی قسمتی از صفحات CSS، این تغییر روی سایر بخش‌‌های صفحه نیز اعمال می‌شود.

CSS یک زبان نشانه گذاری‎است که برای ایجاد زیبایی‌‌های ظاهری و بهتر شدن طراحی وب سایت استفاده می‌شود. تمام چیزی که به ظاهر متن و محتوای ایجاد شده با HTML مربوط است مانند رنگ، اندازه، محل قرارگیری و سایر ویژگی‌‌ها به CSS ارتباط دارد. قبلا در مقاله HTML چیست و چه کاربردی دارد به طور کامل در مورد HTML توضیح داده ایم. در واقع CSS مرحله بعد از HTML را تشکیل می‌دهد.

مروری بر تاریخچه  CSS

در سال 1994 شرکت‌‌ها و افراد مختلف به معرفی زبان‌‌های ‌‌برنامه‌نویسی گوناگونی پرداختند که به استایل وب سایت مربوط می‌شد. در همین سال Hakon Wium Lie به همراه تیم برنرز لی زبان ‌‌برنامه‌نویسی CSS را معرفی کرد. در نهایت از بین تمام این زبان‌‌ها در سال 1996 به صورت رسمی‌زبان ‌‌برنامه‌نویسی CSS به عنوان زبان برتر در این زمینه معرفی شد.

برتری CSS نسبت به دیگر زبان‌های Style Sheet این بود که، شما می‌توانید با استایل یا ظاهر یک داکیومنت را با چندین برگه CSS‌طراحی کرده و تحت تاثیر قرار بدهید. بنابراین، CSS توانست تمام رقبا را کنار بزند و خود را در جایگاه زبان برتر استایل در کنار HTML قرار بدهد.

هنگامی که CSS 1 در سال ۱۹۹۶ معرفی شد، مایکروسافت هم نسخه ۳ از اینترنت اکسپلورر را معرفی کرد. این مرورگر در آن زمان از تعداد کمی از ویژگی‌های CSS پشتیبانی می‌کرد. پس از آن اینترنت اکسپلورر ۴ و Netscape 4.x معرفی شدند که قابلیت‌های بیشتری را پشتیبانی می‌کردند؛ اما تداخل CSS با این مرورگرها اصلا مناسب نبود و باگ‌های بسیار زیادی داشت.

در نهایت انقلاب مرورگرها اتفاق افتاد و اینترنت اکسپلورر ۵ با پشتیبانی از سیستم عامل مکینتاش در سال ۲۰۰۰ معرفی شد. این مرورگر با کنار زدن مرورگر Opera که تا آن زمان بیشترین پشتیبانی از CSS 1 را داشت، توانست جایگاه مقتدرانه‌ای برای خود به دست بیاورد و بیش از ۹۹٪ از قابلیت‌های CSS در آن اجرا می‌شدند.

همانطور که می‌دانید امروزه مرورگرهای پیشرفته‌ای مثل گوگل کروم یا فایرفاکس به بازار عرضه شده‌اند که از تمام قابلیت‌های CSS‌ پشتیبانی می‌کنند و کار طراحی سایت راحت‌تر از قبل انجام می‌شود.

بطور خلاصه اگر شما بدن یک انسان را در نظر بگیرید:

• استخوان ها و اسکلت بندی بدن انسان را میشود به HTML تشبیه کرد

• و ظاهر، لباس، مو، چهره و… را میتوان به CSS تشبیه کرد. 

اجرای کدهای CSS

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

CSS یک زبان ‌‌برنامه‌نویسی نیست!

شاید به اصطلاح عام CSS را بتوانیم یک زبان ‌‌برنامه‌نویسی بدانیم اما با جلو رفتن و حرفه ای‌تر شدن در می‌یابید که نباید CSS را در زمره زبان‌‌های ‌‌برنامه‌نویسی قرار داد. یک زبان ‌‌برنامه‌نویسی شامل متغیر‌‌ها، توابع، شرط‌‌ها، حلقه‌‌ها و… است اما چنین چیزهایی در CSS دیده نمی‌شود. در واقع CSS یک ابزار برای تکمیل کردن زبان‌‌های ‌‌برنامه‌نویسی است که بر پایه XTML می‌باشند، که معروف‌ترین و کاربردی‌ترین آن HTML است.

ساختار کدهای CSS 

همان‌طور که گفته شد، کدنویسی با CSS به منظور ایجاد تغییرات بر روی ظاهر خروجی‌‌های کد‌‌های نوشته شده با HTML است. بنابراین باید این دو را با یکدیگر‌ترکیب کنیم تا بتوانیم تغییرات را اعمال کنیم.

به دو صورت می‌توان این‌ترکیب را انجام داد. روش اول به صورت inline است که با این روش استایل مورد نظر را تنها به تگ مورد نظر خود در آموزش html css اعمال می‌کنید.  برای مثال در کد زیر رنگ قرمز را تنها برای جمله « این عنوان قرمز است» انتخاب کرده ایم.

این عنوان قرمز است

روش دوم‌، ترکیب کردن CSS و HTML، روش inteal CSS نام دارد. در این حالت استایل یا تغییرات مورد نظر بر روی یک صفحه از HTML اعمال می‌شود. کد زیر نمونه ای از این روش است.

 دلیل استفاده ازCSS

 استفاده از این کد می تواند در زمینه طراحی و حجم کدهای سایت برای شما صرفه جویی ایجاد کند. شما تنها با یک بار مشخص کردن خصوصیات ظاهری در وبسایت خود به وسیله CSS این امکان را برای خود به وجود می آورید که هر کجا از وب سایت نیاز به این داشتید که از آن عنصر استفاده کنید تنها کافی است که خصوصیات مورد نیاز را برای آن عنصر اعمال کنید.

بد نیست که این موضوع را هم بدانید که گوگل برای رتبه بندی وب سایت به سئو سایت، سرعت سایت و کیفیت کدهای آن اهمیت بسیاری می دهد هر چه این مواردبا دقت بهتری در طراحی و بسایت اجرا شده باشند جایگاه و رتبه مناسب تری را در نتایج گوگل بدست خواهید آورد.

کاربرد اصلی CSS

حال که تا حدودی متوجه شدید که CSS چیست؟ بد نیست کاربرد اصلی CSS را نیز بدانید. همانطور که گفتیم CSS ابزاری است که به وسیله آن می توانید صفحات وب سایت خود را زیبا کنید. همانطور که HTML در ساختار کلی صفحه وب اثر دارد و در واقع اسکلت بندی صفحات وب را بر عهده دارد CSS میتوانید این ساختار را زیبا کند یعنی به آنها رنگ اضافه کند، اندازه های آن را مشخص کند و روش نمایش را تنظیم نماید.

برای بررسی سئو سایت خود با سئو ایران همراه باشید.

روش های مختلف استفاده کردن از کدهای استایل دهی در آکادمی آی تی : 

روش اول: که بسیار هم پرکاربرد می باشد و تاثیر بسیار زیادی روی سرعت لود وب سایت داره روش خارجی یا Exteal هست، توی این روش یک فایل جداگانه داریم که اون رو به فایل های HTML خودمون اصطلاحا لینک یا attach می کنیم به این صورت که توی Head صفحات Html از تگ لینک استفاده می کنیم.

روش دوم: استفاده از روش داخلی یا inteal هست که داخل هر صفحه html به صورت مجزا کدهای سی اس اس  رو می نویسیم که در آموزش طراحی سایت گفته شده است.

روش سوم: هم که کمترین استفاده رو داره درون خطی یا Inline هست که داخل تگ های html و با استفاده از خصوصیت style می نویسیم.

در صورتی که به آموزش سی اس اس علاقه مند هستید می توانید با استفاده از دوره آموزش ویدئویی آکادمی آی تی به این زبان و کلیه خصوصیت هاش کاملا مسلط باشید.