آموزش CSS

نمایش دادن همه 2 نتیجه

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

لغت CSS مخفف عبارت Cascading Style Sheets به معنای شیوه نامه آبشاری می باشد و در اصل برای زیبا سازی گرافیک وب سایت ها استفاده می شود. و بدون CSS وب سایت ها بدون روح و زیبایی خواهند بود.

همه ما زیبایی و مرتب بودن را دوست داریم و این ویژگی انسان ها باعث شده که از طبعیت الگو گرفته و انواع رنگ ها را تولید نماییم و همچنین از تمام امکانات برای زیبا سازی دکوراسیون منزل، زیبایی فضای شهر ها، زیبایی در ساخت وسایل مختلف همانند اتوموبیل ها و … استفاده نماییم. 

در دنیای وب نیز کار زیبا سازی وب سایت ها و اینترنت بر عهده زبان CSS می باشد که این زبان درکنار زبان نشانه گذاری HTML پایه و اساس طراحی وب سایت را تشکل می دهند.

اگر شما قصد یادگیری طراحی سایت را دارید حتماً ابتدا باید HTML و CSS را یادبگیرید. و با ترکیب این دو در کنار هم می توانید یک وب سایت زیبا را طراحی نمایید.

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

CSS نیز همانند زبان نشانه گذاری HTML توسط سازمان جهانی وب توسعه داده می شود.

پیشنیاز های یادگیری CSS چه هستند؟

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

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

 

مفهوم رسپانسیو یا واکنشگرا در وب سایت

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

امروزه اگر یک سایت واکنشگرا نباشد (یعنی ظاهری متناسب با دستگاه های مختلف نداشته باشد) جایی برای رقابت نخواهد داشت و قطعاً شکست خواهد خورد.

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

 

آیا یادگیری CSS سخت است؟

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

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

مثال کوچکی از کد های CSS :

 } input

      background-color: red      

      color: white;

      border: 1px solid black;

}

چقدر طول میکشه کدنویس CSS بشم؟

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

به طور میانگین آشنایی با دستورات CSS بین 1 تا 2 ماه طول می کشد و بعد از برای اینکه شما یک طراح حرفه ایی شوید می بایست تمرین داشته باشید و با تمرین و طراحی انواع سایت ها شما در این کار حرفه ایی خواهید شد که البته این کارها سخت نیست و فقط به انگیزه و پشتکار نیاز دارد.

 

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

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

ویرایشگر متن چیست ؟

هر نرم افزاری که به ما کمک می کند یک متن را در کامپیوتر ویرایش نماییم، ویرایشگر گفته می شود. برای مثال نرم افزار مایکروسافت ورد یک ویرایشگر است که ساخته شرکت مایکروسافت می باشد و همه ما تقریباً با آن کار کرده ایم. یا نرم افزار WordPad ویندوز نیز یک ویرایشگر می باشد که در تمام کامپیوتر ها به صورت پیش فرض وجود دارد. (برای مشاهده WordPad این کلمه را در استارت ویندوز خود جستجو کنید)

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

با استفاده از Notepad ساده می تونید برای CSS کدنویسی کنید و در واقع نیاز به انجام هزینه ایی ندارید و این خود می تواند به شما کمک کند که بدون هزینه کدنویسی را شروع نمایید.

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

اگر بخواهم یک ویرایشگر زیبا، کم حجم و رایگان به شما معرفی کنم، ویرایشگر Visual Studio Code را معرفی می کنم که جدیترین ویرایشگر رایگانی می باشد که ساخته شرکت مایکروسافت است. برنامه نویسان و طراحان حرفه ایی سایت از آن استفاده می کنند.

 

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

همانند زبان نشانه گذاری HTML شما بعد از پیاده سازی کدهای CSS خود بر روی عناصر HTML با استفاده از مرورگر می توانید نتیجه کار خود را مشاهده نمایید. فایل های CSS با یک فرمت به همین نام (css.) ذخیره می شوند و بر روی همه مرورگر ها قابل پشتیبانی و اجرا هستند.

 

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

تمامی کارهای گرافیکی انجام شده بر روی سایت ها یا با CSS است و یا با ترکیب CSS و جاوا اسکریپت (یا کتابخانه های مرتب با آن) انجام می شود.

رنگ بندی متن ها : با استفاده از ویژگی های تعریف شده در CSS می توانید به متن ها رنگ های مختلف ارائه دهید.

رنگ بندی پس زمینه عناصر : برای رنگ بندی پس زمینه قسمت های مختلف از CSS استفاده می شود.

متحرک سازی : برخی از متحرک سازی های محدود با سی اس اس انجام می شود.

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

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

و …

 

بازار کار CSS چطوره ؟

زبان CSS به تنهایی کاربردی ندارد و در کنار HTML به عنوان پایه و اساس طراحی سایت به کار می رود و شما با یادگیری این دو مبحث در کنار هم می توانید به عنوان طراح سایت مشغول به کار شوید.

در واقع یک طراح وب سایت خوب هرگز بیکار نخواهد ماند.

شغل طراحی سایت مزایای زیادی دارد که به برخی از آنها در زیر اشاره کرده ایم:

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