اگر شما هم از جمله علاقه مندان به برنامه نویسی وب هستند قطعا نام زبان CSS به گوشتان خورده است.

امروزه این زبان یک پایه اساسی و مهم در ساختار صفحات وب است که برای شروع به کار برنامه نویسی حتما باید با آن آشنا باشید.

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

#1 زبان CSS چیست؟

دانلود pdf مقاله

اگر علاقه مند به موضوع طراحی وب هستید، به احتمال زیاد قبل از این، نام زبان CSS را جایی شنیده اید.

زبان CSS که زبانی بسیار کاربردی در دنیای طراحی وب می باشد، مخفف (Cascading Style Sheets) به معنای برگه های سبک آبشار می باشد.

امکان دارد برای شما هم سوال باشد که چرا این نام به روی چنین بخش و عنصر مهمی از طراحی وبسایت گذاشته شده؟

این موضوع آبشاری بودن یعنی این که هر موردی که به یک برگه CSS مربوط می شود، روی عنصرهای زیر مجموعه این برگه ها هم اثر می گذارد.

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

اگر بخواهیم به این موضوع به شکل حرفه ای تری نگاه کنیم، زبان CSS زبان برنامه نویسی می باشد که
به صورت ظاهری (Style Sheet Language) است.

css چیست

زبان CSS در کنار HTML است که معنا و مفهوم پیدا می کند تا در کنار هم یک وبسایت با هسته ای قوی را به وجود بیاورند.

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

این را هم ببینید
زبان HTML چیست؟

#2 دلیل به وجود آمدن زبان CSS چه بود؟

زمانی که در سال ۱۹۹۶ زبان CSS پا به جهان وب گذاشت، قصد از ایجاد آن به وجود آوردن دسته بندی و منتشر کردن قوی تر محتوا های گوناگون بود.

این کار با عامل هایی مانند لایه بندی، رنگ و فونت به وجود آمد.

استفاده از برگه های CSS باعث می شود که شما این توانایی را داشته باشید که
از محتوایی که با زبان نشانه گذاری ایجاد شده، در قسمت های مختلفی از سایت استفاده کنید.

در اصل وقتی که از زبان CSS استفاده می کنید، این توانایی را دارید که
یک سند نوشته شده به زبان نشانه گذاری مانند HTML را تنها با تغییر چند خط در هر برگه CSS برای استفاده در هدف های گوناگون به کار ببرید.

#3 تفاوت html و CSS

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

اما این دو همیشه با هم هستند و یک وب سایت بدون وجود این دو در کنار هم ایجاد نمی شود.

فایل های html با پسوند html. و فایل های CSS با پسوند css. ذخیره می شوند.

جهت آشنایی بیشتر با تفاوت HTML ، CSS و Java script کلیپ زیر را تماشا کنید.

#4 تاثیر CSS بر سئو سایت

سئوی سایت بسیار مهم است زیرا هر سایتی که دارای سئو بهتری باشد می تواند در صفحات بالاتر گوگل قرار بگیرد و
بازدید کاربران از سایت شما چند برابر می شود.

اگر به جای استفاده از تصاویر برای بک گراند از کد های سی اس اس استفاده کنید حجم وب سایت کم تر می شود و
وب سایت دارای سرعت بهتری می شود، هر چه سرعت سایت بهتر باشد وب سایت دارای نمره سئو بهتری خواهد بود.

#5 تفاوت CSS با CSS3

نسخه اول سی اس اس فقط با اینترنت اکسپلور 6 سازگاری داشت اما
نسخه آخر سی اس اس که همان css3 می باشد با اکثر مرورگرها سازگاری دارد و
ویژگی هایی مانند animation ,transform ,transition ,box-shadow ,border-radius text-shadow و غیره به آن اضافه شده است.

#6 چگونه زبان CSS یاد بگیریم؟

برای یادگیری CSS در ابتدا لازم است شما html را بصورت کامل بلد باشید.

در مرحله بعد اگر زبان انگلیسی شما خوب است می توانید از وب سایت w3schoool.com یا با سرچ کردن CSS tutorial در یوتیوب ویدیوهای آموزشی CSS را ببینید.

همچنین می توانید با شرکت در دوره های آنلاین یا حضوری فنی حرفه ای یا آموزشگاه هاCSS  را یاد بگیرید.

#7 ساختار زبان CSS

کد های CSS از دو قسمت تشکیل می شوند:

  • Selector (انتخابگر)
  • قسمتی که بین آکولاد قرار گرفته است

ساختار

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

همچنین می توانیم برای کدهای سی اس اس خود کامنت هایی بگذاریم تا
افرادی که کدهای ما را بعدا می خواهند بخوانند راحت تر بتوانند تحلیل کنند.

#8 چرا سی اس اس برای صفحات وب لازم است؟

زیرا صفحات وب بدون استفاده از زبان CSS بسیار ساده و فاقد جذابیت های بصری هستند.

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

#9 انواع به کارگیری زبان CSS

CSS به سه روش در درون صفحات وب قرار می گیرد که شامل موارد زیر می باشد:

#1-9 Inline (برخط)

CSS بر خط

در این روش در همان خط که تگ html قرار دارد از style برای شکل دادن و ایجاد تغییرات ظاهری استفاده می شود.

مزایا :

  • دارای الویت بالایی می باشد.

معایب :

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

#2-9 درونی یا توسعه یافته (Internal or Embedded)

css خارجی

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

در قسمت تگ head اچ تی ام ال تگ استایل قرار می دهیم و
کدهای سی اس اس مربوطه را در آن می نویسیم.

مزایا

  • نیاز به فایل جدا CSS ندارد
  • سرعت بالا دانلود صفحات

معایب

  • تغییرات فقط روی یک صفحه اعمال می شود

#3-9 استایل خارجی (External)

استایل درونی

در این روش کدهای سی اس اس در یک فایل جدا نوشته می شود و
با پسوند css. ذخیره می شود.

پس از آن در قسمت تگ head اچ تی ام ال با استفاده از تگ href فایل سی اس اس به فایل اچ تی ام ال اتصال داده می شود.

تغییرات CSS در هر صفحه ای که لینک داده شود اجرا می شود.

مزایا

  • لازم نیست برای هر صفحه کد سی اس اس جدا بنویسیم.

معایب

  • سرعت بارگذاری صفحات کاهش می یابد.

#10 معایب و مزایا زبان CSS

مزایا

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

معایب

  • ناسازگاری با مرورگرها: به علت مختلف بودن ورژن های زبان CSS ممکن است CSS با همه مرورگرها سازگاری نداشته باشند و
    کمی بطور متفاوت نشان داده شوند و
    به همین خاطر توسعه دهندگان مجبورند تا CSS نوشته شده را روی مرورگرهای مختلف تست کنند.
  • امنیت پایین: CSS یک زبان متن باز است و
    از امنیت بالایی برخورد دار نمی باشد و
    افراد دیگر به راحتی می توانند به فایل های قالب دست پیدا کنند.

مقاله بالا بخشی از مطالب گسترده شناسایی هوشمند است.

برای یادگیری صفر تا صد این حوزه به آموزش جامع شناسایی هوشمند نماتک مراجعه کنید.

برای مشاهده توضیحات کامل بسته کلیک کنید.

مشاهده بسته شناسایی هوشمند
بسته شناسایی هوشمند

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

برای دریافت آموزش های رایگان مرتبط با حوزه علاقه‌مندی خود فقط کافیه فرم رو تکمیل کنید.

لطفا موبایل خود را وارد نمایید

نظرتون درباره این مقاله چیه؟
ما رو راهنمایی کنید تا اون رو کامل تر کنیم و نواقصش رو رفع کنیم.
توی بخش دیدگاه ها منتظر پیشنهادهای فوق العاده شما هستیم.