آموزش CSS ( قسمت سوم ) انتخاب گر ها

با سلام خدمت کاربران گرامی یک لرن

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

شما میتوانید آموزش CSS قسمت دوم را از نوشته های قبلی یک لرن دنبال کنید

در ادامه همراه ما باشید …

آموزش CSS ( قسمت سوم ) انتخاب گر ها

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

در یک صفحه html ما عناصر زیادی داریم که برای استایل دهی به ان ها باید ابتدا آنها را انتخاب کنیم و سپس استایل های مورد نظر را بر روی آن ها اعمال کنیم

warning دقت کنید تگ , المنت و عنصر هم معنی هستند

در CSS انتخاب گرهای فراوانی داریم به خصوص در CSS3 انتخاب گرهای مفید و زیادی  اضافه شد ( حدود 50 سلکتور مختلف در CSS تا هم اکنون ارائه شده است )

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

1- انتخاب گر المنت

2- انتخاب گر کلاس

3- انتخاب گر آی دی

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

 انتخاب گر المنت ( سلکتور تگ )

ما در html تگ های فراونی داریم مثلا تگ p یا h1 یا …

در این حالت از انتخاب گر ما همان نام تگ را به عنوان سلکتور انتخاب میکنیم مثلا اگر تگی با نام p داریم سلکتور ما نیز همان p است که با توجه به اینکه ساختار کدهای CSS را در جلسه دوم گفتیم هم اکنون میتوانیم استایل زیر را بنویسیم

فعلا فقط به سلکتور دقت کنید و به مقادیر و ویژگی ها کاری نداشته باشید

p {
	color: red;
	font-family: tahoma;
}

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

انتخاب گر id ( سلکتور آی دی)

انتخاب گر دومی که قصد معرفی آن را داریم , انتخاب گر id میباشد شما برای اینکه بعضی از عناصر در صفحه html را استایل دهی کنید میتوانید اتریبیوت یا شناسه آی دی را در تگ html به صورت زیر وارد کنید سپس در CSS استایل دهی خواهیم کرد

<p id="myid">انتخاب گر id</p>

در مثال بالا میبینید ابتدا برای تگ html یک آی دی تعریف کردیم که دستور کلی آن به این صورت میباشد

id="نام آی دی دلخواه شما"

و حالا در CSS برای استایل دهی باید قبل از نام آی دی یک علامت # استفاده کنید به مثال زیر توجه کنید

#myid{
	color:red;
}

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

انتخاب گر class ( سلکتور کلاس )

سومین سلکتوری که قصد معرفی آن را داریم سلکتور کلاس میباشد با استفاده از این سلکتور شما میتوانید به عناصر html اتریبیوت کلاس را دهید و سپس ان را استایل دهی کنید

مثلا کد html  زیر را داریم

<p class="myclass">class</p>

به کد خود شناسه “”=class را دادیم و هم اکنون با نام کلاس myclass آن را استایل دهی میکنیم فقط فراموش نکنید که قبل از نام کلاس از . استفاده کنید

.myclass{
	color:red;
}

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

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

warning در انتخاب نام کلاس و آی دی دقت کنید به عنوان اولین حرف از عدد نمیتوانید استفاده کنید مثلا نام کلاس 1learn غلط میباشد زیرا با عدد شروع شده است

warning تفاوت کلاس و آی دی در این است که شما ای دی را میتوانید فقط به یک تگ خاص دهید ولی کلاس را میتوانید به چندین تگ دهید مثلا شما در صفحه خود نام آی دی myid را اگر به تگ p دهید دیگر نمیتوانید آن را به تگ h1 دهید ولی در کلاس این چنین مشکلی وجود ندارد

استایل دهی گروهی

شما میتوانید یک استایل مشترک را به جای اینکه جداگانه به هر عنصر دهید به صورت گروهی بنویسید به عنوان مثال ما به تگ h1 و h2 و p میخواهیم استایل مشترک رنگ قرمز را دهیم لذا اولین روش به صورت زیر میباشد .

h1 {
    color: red;
}

h2 {
    color: red;
}

p {
    color: red;
}

اما شما میتوانید با استفاده از ” , ” کل استایل بالا را به صورت گروهی اعمال کنید مثلا استایل بالا به صورت گروهی به صورت زیر میشود

h1 , h2 , p{
    color: red;
}

در اینجا قسمت سوم اموزش CSS به پایان رسید
به عنوان مکمل این قسمت آموزشی میتوانید آموزش ویدیویی CSS قسمت سوم را تماشا کنید
هم چنین پیشنهاد میکنیم برای درک بهتر این جلسه اولویت استایل ها را نیز مطالعه کنید .( مورد 1 و 3 و 4)

فرادرس

برچسب ها : ، ، ، ، ، ، ، ، ، ، ، ، ،