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

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

در این قسمت با آموزش و معرفی زبان css و ساختار آن درخدمت شما هستیم! با ما همراه باشید!

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

 ساختار زبان CSS:

 سینتکس زبان css به طور کلی به سه صورت زیر میباشد میتوان برحسب نیاز هریک را استفاده کرد:

  {… ;Selector {Property1: value1 ; Property2: value2

 {… ;class {Property1: value1 ; Property2: value2

 {… ;id {Property1: value1 ; Property2: value2

 Selector: با استفاده از selector می توان تگ هایی را که قرار است استایل نوشته شده را بگیرند مشخص کنید (مثلا تگ div ). توجه داشته باشید که در صورت استفاده از این روش استایل نوشته شده بر روی تمام تگها (div) درتمام صفحاتی که فایل استایل لینک شده است اعمال می شود.

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

 Property یا خاصیت : همان تگ های css است. خاصیت ها تغریبا به زبان انسان نزدیک هستند و تقریبا می توان از روی نامشان فهمید که چه کاری انجام می دهند.

 هر خاصیت دارای یک مقدار است که با استفاده از ‘:’ مقدار به خاصیت اختصاص می یابد. در انتها بعد از آخرین مقدار نیز ‘;’ نشان دهنده پایان دستور می باشد.

 Class: همانظور که در بخش اول اشاره شد هر تگ html یک خاصیت به نام کلاس را دارا می باشد.

 کلاس در css به صورت زیر نوشته می شود:

 {} class.

 توجه داشته باشید که دات در ابتدای نام class مشخصه کلاس می باشد.

 Id: این خاصیت نیز همانند کلاس در تمامی تگ های html در دسترس می باشد. تعریف خاصیت برای id به صورت زیر می باشد :

 {} id#

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

 کامنت ها در css با علامت “*/” شروع و با “/*” خاتمه می یابند.

 در ادامه با یک مثال توضیحات بالا را به صورت عملی پیاد ه سازی خواهیم کرد.

 مثال: طراحی یک باکس عضویت در خبرنامه:

 باکس عضویت در خبرنامه در html ترکیب دیویژن و فرم می باشد که در نهایت به یک فیلد متن و دکمه ختم می شود. با نوشتن ساختار html شروع می کنیم:

تا اینجا ساختار باکس نوشته شد. یک دیویژن با کلاس box درون آن یک دیویژن دیگر با کلاس header و بعد از آن یک فرم با کلاس form که داخل آن یک فیلد متن با کلاس input و یک دکمه با کلاس

در تصویر زیر خروجی فعلی باک را مشاهده می کنید:

حالا نوبت به طراحی استایل باکس می رسد. ابتدا دیویژن بیرونی:

استایل نوشته شده برای کلاس box شامل رنگ پس زمینه در خط دوم, فاصله المان های داخلی از حاشیه دیویژن در خط سوم, عرض و طول به ترتیب خط چهارم و پنجم, فاصله باکس از بالای صفحه در خط ششم, قرار گرفتن باکس در وسط عرض صفحه در خط هفتم و درنهایت راست چین شدن کل باکس در خط هشتم می باشد.

و در نهایت خروجی تا این مرحله:

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

خاصیت border در این قسمت مربوط به ایجاد حاشیه برای المان html می باشد.

و در خروجی:

در انتها دکمه!

در خروجی:

مثال بالا یک نمونه بسیار ساده و ابتدایی از ساختار css می باشد.

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

شما می توانید سورس این مثال را از اینجا دانلود کنید.

در قسمت بعد به ادامه معرفی css  خواهیم پرداخت.

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