CSS সিলেক্টর। নির্বাচকরা ধরনের

সিএসএস নথির চেহারা বর্ণনা জন্য একটি ভাষা ক্রমাগত পরিবর্তিত হয়ে চলেছে। সময়ের সাথে সাথে, কেবল ক্ষমতা ও কার্যকারিতা বৃদ্ধি, এছাড়াও নমনীয়তা এবং ব্যবহার কর্মের সুবিধার বৃদ্ধি পায়।

CSS সিলেক্টর

আমাদের বুঝতে শুরু। কোন সিএসএস টিউটোরিয়াল খুলুন, এটা অন্তত এক অধ্যায় নির্বাচকরা ধরনের অনুগত করা হবে না। এই বিস্ময়কর হিসাবে তারা বিষয়বস্তু পৃষ্ঠাগুলি পরিচালনা সবচেয়ে সুবিধাজনক উপায়ে এক নয়। তাদের সাহায্যে, আপনি একেবারে কোনো HTML উপাদানের সঙ্গে ইন্টারঅ্যাক্ট করতে পারবেন। এখন সেখানে নির্বাচকদের 7 ধরনের হয়:

• ট্যাগ;

• ক্লাস জন্য;

• ID- র জন্য;

• সার্বজনীন;

• বৈশিষ্ট্যাবলী;

• সিউডো-শ্রেণীর সঙ্গে বিক্রিয়া ঘটাতে;

• ছদ্ম নিয়ন্ত্রন করতে পারেন।

সিনট্যাক্স সহজ। কিভাবে ব্যবহার করতে হয় শিখতে , সিএসএস নির্বাচকরা তাদের সম্বন্ধে যথেষ্ট পড়ুন। কোন বিকল্পটি আপনার ক্ষেত্রে সামগ্রীর নিয়ন্ত্রণে জন্য সবচেয়ে ভালো? বুঝতে চেষ্টা করুন।

নির্বাচকরা ট্যাগ

এটা হল সবচেয়ে সহজ সংস্করণে দেখানো হয় বিশেষ জ্ঞান লিখতে প্রয়োজন হয় না হয়। ট্যাগ পরিচালনা করতে, আপনি তাদের নামটি ব্যবহার করতে হবে। ধরুন যে, "টুপি" আপনার সাইটের একটি ট্যাগ <হেডার> জড়িয়ে রাখা হয়েছে। সিএসএস এটা নিয়ন্ত্রণ করার জন্য যদি আপনি শিরোলেখে {} নির্বাচক ব্যবহার করতে হবে।

উপকারিতা - ব্যবহারের স্বাচ্ছন্দ, বহুমুখিতা।

অসুবিধেও - নমনীয়তা সম্পূর্ণ অভাব। উদাহরণে উপরে একবার সমস্ত শিরোলেখ ট্যাগ নির্বাচিত করা হবে। কিন্তু কি আপনি যদি শুধুমাত্র একটি পরিচালনা করতে দরকার কি?

বর্গ নির্বাচকরা

সবচেয়ে সাধারণ বৈকল্পিক। অ্যাট্রিবিউট বর্গ সঙ্গে ট্যাগ পরিচালনা পরিকল্পিত। ধরুন, আপনার কোডে তিনটি ব্লক হয়

, প্রতিটি যা আপনি একটি নির্দিষ্ট রং সেট করতে চান। এটা কিভাবে করতে হবে? স্ট্যান্ডার্ড CSS সিলেক্টর, ট্যাগ জন্য উপযুক্ত নয় তারা একবারে সমস্ত ব্লক জন্য পরামিতি নির্দেশ করে। সমাধান সহজ। বর্গ সদস্যদের ধার্য করুন। বর্গ = 'নীল', তৃতীয় - - শ্রেণী = 'সবুজ' উদাহরণস্বরূপ, প্রথম 'রেড', দ্বিতীয় div class পেয়েছি =। এখন তারা সিএসএস টেবিল ব্যবহার নির্বাচন করা যাবে।

সিনট্যাক্স নিম্নরূপ: একটি বিন্দু ( "।"), ক্লাসের নাম লিখে অনুসরণ চিহ্নিত করে। প্রথম ইউনিট পরিচালনা করতে, নির্মাণ .red ব্যবহার করুন। দ্বিতীয়ত - ব্লু ইত্যাদি।

গুরুত্বপূর্ণ! এটা বর্গ অ্যাট্রিবিউট এর অর্থপূর্ণ মান ব্যবহার বাঞ্ছনীয়। এটা তোলে লিপ্যন্তর (যেমন, krasiviy-Blok) অথবা অক্ষর / সংখ্যার র্যান্ডম সমন্বয় (ojfh834871) ব্যবহার করতে খারাপ ফর্ম বিবেচনা করা হয়। এই কোড, আপনি বিভ্রান্ত পেতে, অসুবিধা যে যারা তোমার পরে প্রকল্পে জড়িত করা হবে সম্মুখীন হবে উল্লেখ না আবদ্ধ হয়। সবচেয়ে ভাল বিকল্প - যেমন BEM কোন পদ্ধতি ব্যবহার করতে।

উপকারিতা - অপেক্ষাকৃত উচ্চ নমনীয়তা।

অসুবিধেও - একাধিক উপাদানের এক এবং একই বর্গ, যার মানে তারা একযোগে সম্পাদিত হবে হতে পারে। সমস্যা পদ্ধতি সেইসাথে preprocessors উত্তরাধিকার ব্যবহার মীমাংসিত হয়। আপনার হাত কম, Sass অথবা অন্য কোনো প্রাক প্রসেসর পেতে করতে ভুলবেন না, তারা ব্যাপকভাবে কাজ সহজ করে।

আইডি নির্বাচক

এই সংস্করণ সম্পর্কে মতামত পরিকল্পনাটি এবং প্রোগ্রামারদের দ্ব্যর্থক হয়। CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. কারণ বেঠিক অ্যাপ্লিকেশনে তারা উত্তরাধিকার সমস্যা সৃষ্টি করতে পারে কিছু সিএসএস টিউটোরিয়াল, আইডি কোন তথ্য নেই। যদিও, অনেক বিশেষজ্ঞদের সক্রিয়ভাবে হয় বিন্যাস সর্বত্র তাদের ব্যবস্থা করে। আপনি ঠিক। # »), затем имя блока. পাউন্ড চিহ্ন ( "#"), তারপর ব্লক নাম: সিনট্যাক্স নিম্নরূপ। #red. উদাহরণস্বরূপ, #red।

отличается от класса по нескольким параметрам. আইডি বিভিন্নভাবে বর্গ থেকে আলাদা। ID. প্রথমত, পৃষ্ঠা একই রকম দুটি আইডি হতে পারে না। তারা একটি অনন্য নাম নির্ধারিত হয়। দ্বিতীয়ত, এই ধরনের একটি নির্বাচক একটি উচ্চ অগ্রাধিকার আছে। red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. এর মানে হল যে আপনি যদি একটি ইউনিট বর্গ লাল উল্লেখ এবং CSS টেবিল লাল উল্লেখ পটভূমির রঙ, এবং তারপর এটি একই আইডি নীল বরাদ্দ এবং রঙ নীল উল্লেখ, ইউনিট নীল চালু হবে।

উপকারিতা - আপনি নির্দিষ্ট উপাদানের নিয়ন্ত্রণ করতে পারেন, ট্যাগ এবং ক্লাস শৈলী উপেক্ষা।

ID и class. অসুবিধেও - সহজ আইডি এবং বর্গ সংখ্যক মধ্যে হারিয়ে পেতে।

গুরুত্বপূর্ণ! ID вам, в общем-то, не нужны. আপনি BEM পদ্ধতি (বা তার অনুরূপ উদাহরণ), আইডি ব্যবহার করে থাকেন, সাধারণভাবে, প্রয়োজন হয় না। এই কৌশলটি বিন্যাস অনন্য ক্লাস যে আরো অনেক সুবিধাজনক ব্যবহার রয়েছে।

সার্বজনীন নির্বাচক

{}. শব্দবিন্যাস: starlets চিহ্ন ( "*") এবং ধনুর্বন্ধনী, অর্থাত্, {*} ...

নির্দিষ্ট বৈশিষ্ট্য একবার পৃষ্ঠার সব উপাদান দায়িত্ব অর্পণ করা ব্যবহৃত হয়। যখন এই উপযোগী হতে পারে? box-sizing: border-box. উদাহরণস্বরূপ, যদি আপনি পৃষ্ঠা সম্পত্তি বক্স নির্ধারন সেট করতে চান যদি: সীমান্তে বাক্স। div *{}. কেবলমাত্র দস্তাবেজের সব উপাদান, পরিচালনা করতে নির্দিষ্ট ব্লক সব শিশুদের, উদাহরণস্বরূপ নিয়ন্ত্রণ করতে ব্যবহার করা যাবে না কিন্তু DIV আছে * {}।

উপকারিতা - আপনি একটি সময়ে আইটেম সংখ্যক নিয়ন্ত্রণ করতে পারেন।

কনস - যথেষ্ট নয় নমনীয় বিকল্প। উপরন্তু, এই নির্বাচক ব্যবহার, কিছু ক্ষেত্রে নিচে পৃষ্ঠা কাজ মন্থর।

গুণাবলী দ্বারা

এটা সম্ভব একটি নির্দিষ্ট বৈশিষ্ট্য সঙ্গে উপাদান নিয়ন্ত্রণ করুন। উদাহরণস্বরূপ, যদি আপনি একটি ভিন্ন বৈশিষ্ট্য ধরনের সঙ্গে ইনপুট ট্যাগ একটি নম্বর আছে। তাদের মধ্যে একজন - পাঠ্য, দ্বিতীয় - পাসওয়ার্ড, তৃতীয় - সংখ্যা। অবশ্যই, আপনি প্রতিটি বর্গ বা ID সেট করতে পারেন, কিন্তু এটা সবসময় সুবিধাজনক নয়। গুণাবলীর CSS সিলেক্টর এটা সম্ভব সর্বোচ্চ স্পষ্টতা সঙ্গে নির্দিষ্ট ট্যাগ মান উল্লেখ করা। উদাহরণ হিসেবে বলা যায়, এভাবে:

ইনপুট [টাইপ = 'টেক্সট'] {}

এই নির্বাচক পাঠ্য ইনপুট ধরণ আছে এমন সমস্ত বৈশিষ্ট্যাবলী নির্বাচন করব।

টুল বেশ নমনীয় এবং ট্যাগ, যা বৈশিষ্ট্যাবলী হতে পারে সাথে ব্যবহার করা যাবে। কিন্তু যে সব নয়! সিএসএস স্পেসিফিকেশন আরও বেশি সুবিধার সাথে সাথে উপাদান নিয়ন্ত্রণ করার ক্ষমতা আছে!

কল্পনা করুন আপনার পৃষ্ঠার বৈশিষ্ট্য স্থানধারক ইনপুট আছে যা = "একটি নাম লিখুন" এবং ইনপুট স্থানধারক = "পাসওয়ার্ড লিখুন"। তারা নির্বাচক ব্যবহার নির্বাচিত করা যেতে পারে! এটি করার জন্য, নিম্নলিখিত গঠন ব্যবহার করুন:

ইনপুট [প্লেসহোল্ডার = "নাম লিখুন"] {} বা ইনপুট [প্লেসহোল্ডার = "পাসওয়ার্ড লিখুন"]

সম্ভবত বৈশিষ্ট্যাবলী সঙ্গে আরো নমনীয় হবে। ধরুন, আপনি অনুরূপ বৈশিষ্ট্য শিরোনাম (উদাহরণস্বরূপ, "কাস্পিয়ান" এবং "কাস্পিয়ান") সঙ্গে ট্যাগের একটি সংখ্যা দিন। উভয় নির্বাচন করতে, নিম্নলিখিত পছন্দসই মান নির্বাচন করে ব্যবহার করুন:

[শিরোনাম * = "Kaspiysk"]

সিএসএস শিরোনামে সব আইটেম যার সেখানে "কাস্পিয়ান", অর্থাত। ই, এবং "কাস্পিয়ান" এবং "কাস্পিয়ান" প্রতীক বেছে নেবেন।

এছাড়াও আপনি ট্যাগ করে একটি নির্দিষ্ট অক্ষর দিয়ে বৈশিষ্ট্যাবলী শুরু একটি নির্বাচন করুন:

[TITLE ^ = "চরিত্র যদি আপনি চান"] {}

অথবা তাদের বিনষ্ট:

[TITLE $ = "ডান চরিত্র"] {}।

উপকারিতা - সর্বাধিক নমনীয়তা। আপনি ক্লাস সঙ্গে তালগোল পাকানো ছাড়া কোনো বিদ্যমান পৃষ্ঠা উপাদানগুলি নির্বাচন করতে পারেন।

অসুবিধেও - কেবলমাত্র নির্দিষ্ট ক্ষেত্রে অপেক্ষাকৃত কদাচিৎ ব্যবহৃত। অনেক ওয়েব ডিজাইনার, পদ্ধতি পছন্দ যেহেতু বিন্দু বর্গ সহজ অসংখ্য ব্যবস্থা চেয়ে বর্গাকার বন্ধনী এবং লক্ষণ "সমান"। উপরন্তু, এই নির্বাচক ইন্টারনেট এক্সপ্লোরার সংস্করণ 7 এবং নীচের কাজ করে না। যাইহোক, যারা এখন পুরাতন ইন্টারনেট এক্সপ্লোরার হবে?

সিউডো-বর্গ নির্বাচকরা

একটি সিউডো-অবস্থা উপাদান উল্লেখ করে। উদাহরণস্বরূপ ,: হোভার জন্য - কোন পৃষ্ঠাটি অংশ ঘটবে যখন আপনি কার্সার রেখে ,: পরিদর্শণে গিয়েছেন - পরিদর্শন লিঙ্ক। প্রথম সন্তান এবং: গত সন্তান এটি যেমন উপাদানের অন্তর্ভুক্ত করা হয়েছে।

নির্বাচক এই ধরনের সক্রিয়ভাবে কারণ এটি ধন্যবাদ জাভাস্ক্রিপ্ট ব্যবহার না করে একটি পৃষ্ঠায় "লাইভ" করতে পারেন, আধুনিক বিন্যাস ব্যবহার করা হয়। উদাহরণস্বরূপ, যদি আপনি যে যখন তোমাদের মধ্যে btn তার রঙ পরিবর্তিত বর্গ বোতাম তার সঙ্গে আরো উপর কার্সার রেখে নিশ্চিত করতে চাই। এই কাজের জন্য, আমরা নিম্নলিখিত গঠন ব্যবহার করুন:

.btn: হোভার {

পটভূমি-রঙ: লাল;

}

সৌন্দর্য বোতাম, রূপান্তরটি সম্পত্তির মৌলিক বৈশিষ্ট্য উল্লেখ করা যেতে পারে, উদাহরণস্বরূপ, 0.5s - এই ক্ষেত্রে, বোতাম সঙ্গে সঙ্গে blush হবে না, এবং অর্ধেক একটি দ্বিতীয় মধ্যে।

ফজিলত - ব্যাপকভাবে পৃষ্ঠাগুলির "রেনেসাঁ" জন্য ব্যবহার করা হয়। ব্যবহার করা সহজ।

অসুবিধেও - তারা নয়। এটি একটি সত্যিই কুশলী হাতিয়ার। যাইহোক, অনভিজ্ঞ ওয়েব ডিজাইনার সিউডো-ক্লাস প্রাচুর্য মধ্যে হারিয়ে যেতে পারে। সমস্যা নিয়ে অনুসন্ধান ও অনুশীলন মীমাংসিত হয়।

সিউডো-নির্বাচকরা

"ছদ্ম" - এই পৃষ্ঠায় HTML এ নয় অংশগুলি, কিন্তু তারা এখনও পরিচালনা করা যেতে পারে। আপনি বোঝেন না? এটা অনেক সহজ তুলনায় মনে হয় না। উদাহরণস্বরূপ, যদি আপনি স্ট্রিং প্রথম অক্ষর বড় বড় এবং লাল করা, অন্যান্য ছোট এবং কালো টেক্সট যাব চাই। অবশ্যই, এটি একটি নির্দিষ্ট বর্গ সঙ্গে কোনও স্প্যান যে চিঠি পর্যবসিত হতে পারে, কিন্তু এটা দীর্ঘ ও বিরক্তিকর। এটা তোলে সমগ্র অনুচ্ছেদ নির্বাচন করুন ও ছদ্ম :: প্রথম অক্ষর ব্যবহার করতে অনেক সহজ। এটা প্রথম চিঠির চেহারা নিয়ন্ত্রণ করার সুযোগ দেয়।

বেশ সিউডো-উপাদানের একটি বৃহৎ নম্বর আছে। তাদের একটি একক প্রবন্ধে তালিকাভুক্ত সফল করার সম্ভাবনা কম। আপনি আপনার প্রিয় সার্চ ইঞ্জিন প্রাসঙ্গিক তথ্য পেতে পারেন।

উপকারিতা - পৃষ্ঠাটির চেহারাটি কাস্টমাইজ করতে নমনীয়তা প্রদান।

অসুবিধেও - তাদের নতুন প্রায়ই বিভ্রান্ত হয়। শুধুমাত্র নির্দিষ্ট ব্রাউজারে কাজ এই ধরনের অনেক পছন্দসই মান নির্বাচন করে।

সারসংক্ষেপে

নির্বাচক - ডকুমেন্ট প্রবাহ নিয়ন্ত্রণের জন্য একটি শক্তিশালী হাতিয়ার। তাঁকে ধন্যবাদ, আপনি পৃষ্ঠার প্রতিটি কম্পোনেন্ট নির্বাচন করতে পারেন (এমনকি শুধুমাত্র আংশিকভাবে হয়)। প্রাপ্তিসাধ্য সমস্ত বিকল্প শিখতে, অথবা এমনকি তাদের লিখে ভুলবেন না। এটি অত্যন্ত গুরুত্বপূর্ণ যদি আপনি একটি আধুনিক নকশা সঙ্গে জটিল পৃষ্ঠাগুলি এবং ইন্টারেক্টিভ উপাদান প্রচুর তৈরি হয়।