آموزش CSS (قسمت ۲ : اصول نوشتن کدهای CSS) | خدمات کامپیوتری امداد133
خانه / کامپیوتر / اموزش / آموزش CSS (قسمت ۲ : اصول نوشتن کدهای CSS)

آموزش CSS (قسمت ۲ : اصول نوشتن کدهای CSS)

 

امیدواریم قبل از شروع CSS آموزش اچ تی ام ال را تمام کرده باشید چون از تگ ها و شناسه های اچ تی ام ال استفاده های زیادی میکنیم در این بخش و عمدتاً در مورد تگ های اچ تی ام ال در این بخش توضیح نمیدیم. و اینکه کلمه Class رو به صورت کلاس ممکنه بنویسیم در جریان باشید.

یکی از شناسه هایی که در تمام تگ های HTML قابل استفاده است شناسه Class هست که توسط این شناسه ما استایل سی اس اس را به تگ ها و محتوای صفحه اضافه می کنیم . با استفاده از class می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته باشیم؛ یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور class استفاده کنیم. ابتدا استایل را به صورت زیر می نویسیم :

 

در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه“class=”black در تگ <pp> استفاده کنیم و برای پاراگراف قرمز از شناسه“class=”red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا زمانیکه حجم کد استایل شما بیشتر شد به صورت گنگ و نامعلوم نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید :

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

 

نکته : شما می توانید بیش از یک کلاس برای یک تگ HTML تعریف کنید اما برای این کار نباید دو بار از شناسه class استفاده کرد. بلکه باید در یک شناسه class نام دو کلاس مورد نظر را با یک فاصله بین آنها وارد کرد.

برای مثال برای پاراگراف زیر از دو کلاس فرضی red و center استفاده شده است :

 

در نوشتن استایل می توان از نوشتن نام تگ در سلکتور کلاس چشم پوشی کرد. در این صورت ویژگیهای تعریف شده در آن کلاس بر هر تگ HTML که از کلاس مربوطه در شناسه class آن استفاده شده باشد اثر می گذارد. برای مثال در کلاس زیر ویژگی وسط چین را تعریف می کنیم و از نام تگ در سلکتور کلاس استفاده نمی کنیم :

اکنون برای هر تگی که احتیاج به وسط چین داشته باشد می توانیم از کلاس بالا استفاده کنیم. به چند نمونه در زیر توجه کنید :

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

 

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

 

ما می تونیم از سلکتور کلاس برای تگی که حاوی شناسه class است استفاده کنیم که در بالا در این مورد توضیح داده شد. علاوه بر این می توانیم از ویژگیهای تعریف شده در سلکتور کلاس برای تگهایی که در یک تگ محتوی شناسه class قرار دارند نیز استفاده کنیم. به مثال زیر توجه کنید :

 

 

نکته » کلمه Hover : یعنی حالتی که نشانگر ماوس روی گزینه مورد نظر قرار گرفته است.

 

کد HTML زیر برای این مثال مورد استفاده قرار می گیرد :

 

به این شکل ما به تگ Div کلاس Test دادیم ، و تعریف کردیم که هر جزئی که دارای کلاس Test بود اگر لینک باشد (a استفاده شده به معنای لینک) به رنگ سبز نشان داده شود و در نهایت تعریف کردیم که اگر لینک بود و ماوس بر روی آن رفت یک کادر زرد دور آن کشیده شود.

اما بر روی لینک شماره دو هیچ کلاسی اعمال نمی شود زیرا تحت تأثیر شناسه Test قرار نمی گیرد.

 


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

همانطور که می دانید با وجود اینکه برخی از عناصر در صفحه با هم تفاوت دارند، از یک تگ HTML برای ایجاد آنها استفاده می شود. برای مثال برخی از این عناصر را که از تگ <input> در به وجود آوردن آنها استفاده می شود می توانید در زیر مشاهده کنید :

 

  • <“input type=”text>
    کادرهای متنی که در فرمها استفاده می شود.
  • <“input type=”checkbox>
    چک باکس هم با استفاده از تگ <inputt> به وجود می آید.
  • <“input type=”radio>
    در ساختن دکمه های رادیو هم از همان تگ استفاده می شود.
  • <“input type=”button>
    این تگ در ساختن هم استفاده می شود.
  • <“input type=”submit>
    برای ساختن دکمه ارسال فرم هم از تگ <inputt> استفاده می شود.

 

حالا فرض کنید ما در یک صفحه از چند نمونه از عناصر بالا استفاده کرده ایم ولی فقط می خواهیم ویژگیهای یکی از آنها را تغییر دهیم. دو روش برای این کار وجود دارد: یکی استفاده از کلاس است که در این روش اگر تعداد زیادی از عنصر مورد نظر در صفحه وجود داشته باشد باید به همان تعداد از شناسه class در تگهای آنها استفاده کنیم و ممکن است این کار باعث افزایش حجم صفحه یا موجب سختی در نوشتن کد شود. روش دوم تعریف کردن سلکتور input برای عناصر مورد نظر است،  فرض کنید می خواهیم فقط عرض کادرهای متنی را در صفحه تغییر دهیم. در صورتی که در استایل از سلکتور input به تنهایی استفاده کنیم عرض همه چک باکسها ، دکمه ارسال، دکمه های رادیو و سایر عناصری که از تگ <input> استفاده کرده اند نیز تغییر می کند. برای انجام این کار می توانید سلکتور را به صورت زیر تعریف کنیم :

کد استایلی که در بالا نوشتیم فقط بر روی کادر های متنی که در آنها از شناسه“type=”text استفاده شده است اثر می گذارد. همین کار را می توانید برای دیگر اجزا با شناسه های typee متفاوت انجام دهید ، با انجام این کار دیگر نیازی نیست چندین باز از کلمه class و اعمال استایل بر روی تمام تگ ها استفاده کنید .

 


سلکتور id

روش دیگری که برای تعریف استایل وجود دارد استفاده از id است. شناسه id احتمالاً در آینده جایگزین شناسه name در تگهای HTML می شود بنابراین در هر صفحه نباید بیش از یک بار از هر ID استفاده شود. اگر بیش از یک بار از یک id استفاده شود کارایی صفحه تغییری نمی کند ولی صفحه اعتبار خود را از دست می دهد. سلکتور id با علامت # مشخص می شود.

مثال : با استایل زیر همه عناصر که شناسه “id=”border دارند با کادری سبز رنگ نمایش داده می شوند :

برای مثال فرض کنید ما از استایل بالا در یک صفحه استفاده کرده ایم. حالا کد زیر را در صفحه وارد می کنیم :

 

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

 

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

استایل بالا فقط روی پاراگرافی که شناسه “id=”green در آن به کا رفته اثر می گذارد.

 

توجه : هرگز نام ID را با عدد شروع نکنید زیرا برخی از مرورگر ها نمیتوانند آنها را تشخیص بدهند .

 

موفق باشید.

درباره ی nasimazadi

مطلب پیشنهادی

واحد پردازش مركزي CPU 

واحد پردازش مركزي CPU مدت زمان انجام يك كار بوسيله كامپيوتر، به عوامل متعددي بستگي …

پاسخ دهید