برای مطالعه بخش دوم برنامه نویسی کلاینت ساید وب اینجا کیلیک کنید

برنامه نویسی کلاینت ساید وب

مقدمه

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

زبان CSS:

CSS یا Cascade Style Sheets زبان برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML بوجود آمده است پیشنهاد داده است. عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد.

با استفاده از زبان ساده ی CSS شما می تونید تنظیمات خاصی رو روی تگ های html  یا زبان های Murkup دیگر مثل xml اعمال نمایید!
هدف CSS جداسازی طراحی بدنه ی یک فایل html از شیوه ی نمایش آن فایل html است . با CSS شما می تونید تعیین کنید که هر تگ html به چه صورتی نمایش داده شود . مثلا رنگ ، اندازه و نوع فونت متن درون تگ را مشخص نمایید . یا اینکه پس زمینه و ویژگی های دیگر تگ را تعیین کنید .

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

راه های یاد گیری css :

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

با توجه به همین مورد یکی از ساده ترین راه های یاد گیری باز هم مطالعه سورس می باشد. شما می توانید به راحتی هر جه تمام تر یک بلوک از یک سایت را انتخاب و به برسی استایل نوشته شده برا آن بپردازید. البته این روش صرفا جهت یادگیری اولیه نمی باشد و همواره سورس هایی هستند که شما نیاز به یادگیری شان داشته باشید. شاید پیش خود بگویید که این حرکت یک حرکت غیر حرفه ایست و مهارتتان را به مرور زیر سوال خواهد برد، اما این فکر کاملا غلط است، چرا که با گسترش وسیع و بی کرانی که صنعت برنامه نویسی علی الخصوص برنامه نویسی وب در این سالا ها داشته است یاد گیری کامل یک زبان را بدون مطالعه و کپی سورس های موجود، عملا غیر ممکن ساخته است. حتی فعل جالب googling نیز در همین راستا (جستجوی هر آنجه که برای کار خود لازم دارید در گوگل) بوجود آمده و وارد فرهنگ لغات دنیای فناوری اطلاعات شده است. پس نگران غیر حرفه ای بودنش نباشید! حرفه ای ها هم سورس می خوانند و حتی کپی می کنند.

اما راه دیگری نیز هست که شاید هرگز جواب ندهد! خواندن تک تک تگ های موجود در CSS و حفظ آنها به همراه مقادیری که می پذیرند و توضیح مفصلی که هر یک در جه شرایطی چه نقشی را ایفا میکنند!

قضاوت با شما!

و اما بعد:

معرفی منبع و آموزش روش استفاده از آن :

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

• WrapBootstrap : این سایت یک فروشگاه بزرگ قالب های bootstarp است که می توانید از دمو های موجود در آن به عنوان منبع استفاده کنید. به این شکل:

اول به سایت https://wrapbootstrap.com مراجه نموده و به صورت دلخواه یکی از قالب ها را انتخاب کنید. ( برای مشاهده در اندازه واقعی روی عکس کلیک کنید)

سپس گزینه Live Preview  کلیک کنید:

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

حالا شما می توانید یک قسمت از سایت را انتخاب و به این شکل به بررسی استایل های موثر بر آن قسمت بپردازید. در اینجا این فرم مورد نظر است:

حالا راست کلیک کرده و گزینه Inspect را بزنید.

در نهایت ما جنین پنجره ای داریم که هم تگ های html و هم تگ های css نوشته شده در دسترسمان است.

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

• مرور کتابخانه های آماده css مانند bootstarp شما می توانید این فریمورک را دانود کرده و کد های درون آن را مطالعه نمایید. توجه داشته باشید که برای مطالعه موثر باید همزمان از قسمت components در خود سایت bootstrap استفاده نمایید تا کلاس های مورد مطالعه را بشناسید.

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

موفق باشید!

نویسنده: مهندس علیرضا دادرس