Css

|

اموزش کلاس و ایدی

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

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

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

به طور کلی برای نوشتن تگ های css باید از style در head استفاده کرد. برای مثال :

<DOCTYPE html!>
<"html xmlns="http://www.w3.org/1999/xhtml>
<head>
</"meta http-equiv="Content-Type" content="text/html; charset=utf-8>
<title/>کلاس و ایدی | داتینه<title>
<style>

<style/>
<head/>
<body>

<body/>
<html/>

کلاس در css

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

مثلا میخوایم در یک صفحه 2 نوع نوشته داشته باشیم یکی به رنگ مشکی و یکی به رنگ قرمز

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

{p.black {color: black
{p.red {color:red

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

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

و اگر در تگ p کلاس هایی بود که اسم آن red بود به رنگ قرمز در بیار.

حال باید هر پاراگرافی که میخواهیم به رنگ مشکی باشد از "class="black در تگ <p> استفاده کرد و برای پاراگراف قرمز از "class="red .

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

کلاس ها در css

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

کلاس در css

نتیجه :

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

این متن به رنگ قرمز نمایش داده می شود.

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

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

در این مثال از استایل زیر در استفاده می کنیم:

class داتینه

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

کلاس در html

کدهای html کلی به این صورت قرار میگیرد:

کلاس در css

ایدی (ID) در css

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

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

id css

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

ids css

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

css اموزش css

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
m
masoud
21:40 1394/07/30

جالب بود

داتینه
بهار شهسواری
13:28 1394/08/07

ممنون.موفق باشید

نظر بدهید