CSS سلیکٹرز. سلیکٹرز کی اقسام

، آپ کو ایک مخصوص رنگ قائم کرنا چاہتے ہیں جس میں سے ہر ایک. یہ کس طرح کرنا ہے؟ سٹینڈرڈ سی ایس ایس سلیکٹرز وہ ایک بار میں تمام بلاکس کے لئے پیرامیٹرز کی نشاندہی، ٹیگ کے لئے موزوں نہیں ہیں. حل بہت سادہ ہے. کلاس کے ارکان تفویض کریں. کلاس = 'نیلے'، تیسری - - کلاس = 'سبز' مثال کے طور پر، سب سے پہلے 'سرخ'، دوسری div کلاس موصول =. اب وہ CSS میزیں کا استعمال کرتے ہوئے منتخب کیا جا سکتا ہے.

مندرجہ ذیل کے طور نحو ہے: ایک نقطہ ( ".")، کلاس کے نام لکھنے کے بعد اشارہ کرتا. سب سے پہلے یونٹ کو منظم کرنے کے لئے، تعمیر .ریڈ استعمال کرتے ہیں. دوسرا - اسی .بلیو اور.

اہم! اس طبقے کے وصف کے بامعنی اقدار استعمال کرنے کے لئے سفارش کی جاتی ہے. اس حرفی (مثلا، krasiviy کی-بلاک) یا حروف / نمبرز کے بے ترتیب مجموعے (ojfh834871) استعمال کرنے کے برے فارم سمجھا جاتا ہے. اس کوڈ میں، آپ کو الجھن میں حاصل کرنے کے لئے مشکلات آپ کے بعد اس منصوبے میں مصروف ہو جائے گا ان لوگوں کو جو کا سامنا کریں گے کہ ذکر کرنا نہیں پابند ہیں. سب سے بہترین آپشن - اس طرح BEM طور پر، کسی بھی طریقہ کار کو استعمال کرنے کے لئے.

فوائد - نسبتا زیادہ لچک.

نقصانات - ایک سے زیادہ عناصر میں سے ایک ہے اور جس کو وہ ایک ہی وقت میں ترمیم کی جائے گی مطلب یہ ہے کہ ایک ہی کلاس، ہو سکتا ہے. مسئلہ طریقہ کار کے طور پر بھی preprocessors کی میراث کا استعمال کرتے ہوئے حل کیا جاتا ہے. وہ بہت کام کو آسان بنانے کے اپنے ہاتھوں سے کم، SASS یا کسی اور پریپروسیسر حاصل کرنا نہ بھولیں.

ID سلیکٹر

اس ورژن کے بارے میں رائے coders کے اور پروگرامرز مبہم ہیں. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. کچھ CSS سبق، ID کے استعمال کی سفارش نہیں کرتے غلط درخواست میں وہ میراث کے ساتھ مسائل پیدا کر سکتا ہے کیونکہ. تاہم، بہت سے ماہرین فعال طور پر ہیں ترتیب بھر میں ان کا بندوبست. تم فیصلہ کرو. # »), затем имя блока. پونڈ نشانی ( "#")، بلاک کے تو نام: نحوی طور پر مندرجہ ذیل ہے. #red. مثال کے طور پر #red.

отличается от класса по нескольким параметрам. ID کئی طریقوں سے طبقے سے مختلف ہے. ID. سب سے پہلے، صفحہ دو ایک جیسی ID نہیں ہو سکتا. انہوں نے ایک منفرد نام تفویض کر رہے ہیں. دوم، اس طرح ایک سلیکٹر ایک اعلی ترجیح ہے. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. اس کا مطلب یہ ہے کہ آپ کو سرخ ایک اکائی کلاس کی وضاحت تو اور CSS ٹیبل میں سرخ وضاحت پس منظر کا رنگ، اور پھر اسی ID نیلے جو کو تفویض اور رنگ نیلا وضاحت، یونٹ نیلے کردے گا.

فوائد - آپ کو نظر انداز ٹیگ اور کلاسوں کے سٹائل، مخصوص عنصر کو کنٹرول کر سکتے ہیں.

ID и class. نقصانات - آسان ID اور کلاس کی ایک بڑی تعداد میں کھو کرنے کے لئے.

اہم! ID вам, в общем-то, не нужны. کیا آپ کو BEM طریقہ کار (یا اس کے اینالاگز)، شناختی استعمال کر رہے ہیں تو، عام طور پر، کی ضرورت نہیں کر رہے ہیں. اس ٹیکنالوجی ترتیب منفرد کلاسوں کہ بہت زیادہ آسان کے استعمال شامل ہے.

عالمگیر سلیکٹر

{}. نحو: Starlets کی نشانی ( "*") اور منحنی خطوط وحدانی، یعنی {*} ...

بعض صفات ایک بار صفحے کے تمام عناصر کو تفویض کرنے کے لئے استعمال. جب یہ مفید ہو سکتا ہے؟ box-sizing: border-box. مثلا، آپ کے صفحے جائیداد باکس sizing مقرر کرنا چاہتے ہیں تو: سرحد باکس. div *{}. صرف تمام دستاویز کے اجزاء، انتظام کرنے کے لئے استعمال نہیں کیا جا سکتا لیکن یہ بھی مثال کے طور پر بیان کردہ بلاک کے تمام بچوں، کو کنٹرول کرنے کے لئے، div کے * {}.

فوائد - آپ ایک وقت میں اشیاء کی ایک بڑی تعداد کو کنٹرول کر سکتے ہیں.

cons کے - کافی نہیں لچکدار اختیار. کے علاوہ، اس سلیکٹر کے استعمال، بعض صورتوں میں نیچے صفحے کا کام سست.

صفات کی طرف سے

یہ ممکن ہے ایک مخصوص وصف کے ساتھ عنصر کو کنٹرول کرنے کے یقینی بنائیں. مثلا، اگر آپ کو ایک مختلف وصف کی قسم کے ساتھ ان پٹ ٹیگ کی ایک بڑی تعداد ہے. ان میں سے ایک - متن، دوسرا - پاس ورڈ، تیسری - تعداد. کورس کے، آپ ہر کلاس یا ID مقرر کر سکتے ہیں، لیکن یہ ہمیشہ آسان نہیں ہے. صفات میں سی ایس ایس سلیکٹرز یہ ممکن زیادہ سے زیادہ صحت سے متعلق کے ساتھ مخصوص ٹیگ کے لئے اقدار کی وضاحت کرنے بناتے ہیں. مثال کے طور پر اس طرح:

ان پٹ [کی قسم = 'متن'] {}

یہ سلیکٹر پٹ متن کی قسم کے ساتھ تمام صفات کو منتخب کریں گے.

آلے کافی لچکدار ہے اور ٹیگز، جس میں صفات ہو سکتی ہے کسی کے ساتھ استعمال کیا جا سکتا ہے. لیکن یہ سب نہیں ہے! CSS تصریح بھی زیادہ سہولت کے ساتھ عناصر کو کنٹرول کرنے کی صلاحیت ہے!

آپ کے صفحے وصف پلیس ہولڈر کے ساتھ ان پٹ ہے کہ ذرا تصور کریں "ایک نام درج کریں" اور ان پٹ پلیس ہولڈر = "پاس ورڈ درج کریں" =. انہوں نے یہ بھی سلیکٹر کا استعمال کرتے ہوئے منتخب کیا جا سکتا ہے! ایسا کرنے کے لئے، استعمال میں مندرجہ ذیل کی ساخت:

ان پٹ [پلیس ہولڈر = "نام درج کریں"] {} یا ان پٹ [پلیس ہولڈر = "پاس ورڈ درج کریں"]

شاید صفات کے ساتھ زیادہ لچک دار کام. کی آپ کو اسی طرح صفات عنوان (مثال کے طور پر، "کیسپین" اور "کیسپین") کے ساتھ ٹیگ کی ایک بڑی تعداد ہے کہنے دو. دونوں کو منتخب کرنے کے لئے، درج ذیل انتخابات کا استعمال:

[عنوان * = "Kaspiysk"]

سی ایس ایس "کیسپین"، یعنی. E.، اور "کیسپین" اور "کیسپین" کے معانی میں سے ہیں جس کے عنوان میں تمام اشیاء کو منتخب کریں گے.

آپ کو بھی ٹیگ کے ایک مخصوص کردار کی صفات کے ساتھ شروع ہے کہ منتخب کر سکتے ہیں:

[عنوان ^ = "کردار آپ چاہتے ہیں"] {}

یا ان کو ختم کردے:

[عنوان $ = "صحیح کردار"] {}.

فوائد - زیادہ سے زیادہ لچک. تم کلاس کے ساتھ الجھ کے بغیر کسی بھی موجودہ صفحہ عناصر کو منتخب کر سکتے ہیں.

نقصانات - نسبتا شاذ و نادر ہی استعمال کیا جاتا ہے، صرف مخصوص صورتوں میں. کئی ویب ڈیزائنرز، طریقہ کار کو ترجیح دیتے نقطہ کلاس متعدد بندوبست کرنے سے زیادہ آسان ہے کے بعد مربع بریکٹ اور نشانیاں "برابر". اس کے علاوہ، ان سلیکٹرز انٹرنیٹ ایکسپلورر ورژن 7 اور ذیل میں کام نہیں کرتے. تاہم، اب پرانے انٹرنیٹ ایکسپلورر کی ضرورت کون ہیں؟

چھدم کلاس سلیکٹرز

ایک چھدم کی حیثیت عنصر پر کرنا. مثال ،: ہور کے لئے - تم ہوور جب صفحے کے ایک حصے کے ساتھ کیا ہوتا ہے کا دورہ کیا،: - دورہ کیا لنک. پہلے بچے اور: آخری بچے یہ بھی اس طرح کے عناصر شامل ہیں.

سلیکٹر اس قسم کے فعال طور پر اس کی بدولت آپ کو جاوا سکرپٹ کے استعمال کے بغیر ایک صفحے "لائیو" بنا سکتے ہیں، کیونکہ جدید ترتیب میں استعمال کیا جاتا ہے. مثال کے طور پر، آپ کو آپ BTN اس کا رنگ تبدیل کر کے کلاس کے ساتھ بٹن پر ہوور جب اس بات کو یقینی بنانا چاہتے ہیں. ایسا کرنے کے لئے، ہم نے مندرجہ ذیل کی ساخت کا استعمال:

btn کے: ہور {

پس منظر کا رنگ: سرخ،

}

خوبصورتی بٹن، منتقلی جائیداد کی بنیادی خصوصیات میں مخصوص کیا جا سکتا ہے، مثال کے طور پر، 0.5s - اس صورت میں، بٹن کو فوری طور پر شرمانا نہیں کرے گا، اور نصف ایک سیکنڈ کے اندر اندر.

فضائل - وسیع پیمانے صفحات کی "بحالی" کے لئے استعمال ہوتے ہیں. استعمال کرنے کے لئے آسان ہے.

نقصانات - وہ نہیں ہیں. یہ واقعی ایک آسان آلہ ہے. تاہم، ناتجربہ کار ویب ڈیزائنرز چھدم کلاس کی کثرت میں کھو کر سکتے ہیں. مسئلہ مطالعہ اور مشق کو حل کیا جاتا ہے.

چھدم سلیکٹرز

"چھدم" - ان کہ ایچ ٹی ایم ایل میں نہیں ہیں صفحے کے حصوں ہیں، لیکن وہ اب بھی منظم کیا جا سکتا ہے. تم سمجھ میں نہیں آیا؟ یہ لگتا ہے کے مقابلے میں بہت آسان ہے. مثلا، اگر آپ دوسرے چھوٹے اور سیاہ متن کو چھوڑ کر، سٹرنگ میں پہلا حرف بڑا اور سرخ بنانا چاہتے ہیں. کورس کے، یہ ایک خاص طبقے کے ساتھ ایک عرصہ میں وہ خط سے یہ نتیجہ اخذ کیا جا سکتا ہے، لیکن یہ طویل اور بورنگ ہے. اس پورے پیراگراف کو منتخب کریں اور چھدم :: پہلی حرفی استعمال کرنے کے لئے بہت آسان ہے. اس سے پہلے حرف کے ظہور کو کنٹرول کرنے کا موقع فراہم کرتا ہے.

چھدم عناصر کی بہت بڑی تعداد میں موجود ہیں. ایک واحد مضمون میں ان کی فہرست کامیاب ہونے کا امکان ہے. آپ کو آپ کے پسندیدہ تلاش کے انجن میں متعلقہ معلومات حاصل کر سکتے ہیں.

فوائد - صفحہ کی ہیئت کو بہتر کرنے کی لچک ہے.

نقصانات - ان کے لئے نئے اکثر الجھن میں ہیں. صرف بعض براؤزرز میں کام کی اس قسم کے بہت سے کے انتخاب.

مختصر کرنے کے لئے

سلیکٹر - دستاویز بہاؤ کنٹرول کے لئے ایک طاقتور آلہ. اس کا شکریہ، آپ کو صفحے کے ہر ایک جزو کو منتخب کر سکتے ہیں (صرف جزوی طور پر بھی موجود ہیں). تمام دستیاب اختیارات کو جاننے کے لئے، یا یہاں تک کہ ان کو لکھ بھولیں. یہ خاص طور پر اہم ہے اگر آپ کو اور ایک جدید ڈیزائن کے ساتھ پیچیدہ صفحات کو انٹرایکٹو عناصر کے بہت سے تشکیل ہو.