CSS3 এর প্রধান পরিবর্তনগুলি বোঝা
CSS2 এবং CSS3 এর মধ্যে সবচেয়ে বড় পার্থক্য হল যে CSS3কে বিভিন্ন বিভাগে বিভক্ত করা হয়েছে, যা মডিউল নামে পরিচিত। প্রতিটি মডিউল সুপারিশ প্রক্রিয়ার বিভিন্ন পর্যায়ে W3C এর মাধ্যমে তার পথ তৈরি করছে। এই প্রক্রিয়াটি বিভিন্ন নির্মাতারা দ্বারা CSS3 মধ্যে গৃহীত এবং প্রয়োগ করা হবে বিভিন্ন টুকরা জন্য এটি সহজ করেছে।
যদি আপনি এই প্রক্রিয়াটির সাথে সিএসএস 2-এর সাথে কি ঘটে তাহলে, যেখানে সবকিছুই একক নথির আকারে জমা দেওয়া হয় সব ক্যাসকেডিং স্টাইল শীট এর মধ্যে তথ্য, আপনি সুপারিশটি ভেঙ্গে যাওয়ার ক্ষুদ্রতম, স্বতন্ত্র টুকরোগুলোগুলির সুবিধাগুলি দেখতে শুরু করেন। কারন প্রতিটি মডিউল পৃথকভাবে কাজ করা হচ্ছে, আমরা CSS3 মডিউলগুলির জন্য ব্রাউজার সাপোর্টের অনেক বিস্তৃত পরিসর পেয়েছি।
যেকোনো নতুন এবং পরিবর্তনীয় স্পেসিফিকেশন হিসাবে, আপনার ব্রাউজার এবং অপারেটিং সিস্টেমে আপনার CSS3 পৃষ্ঠাগুলিকে পুঙ্খানুপুঙ্খভাবে পরীক্ষা করতে ভুলবেন না। লক্ষ্য করুন যে ওয়েব ব্রাউজার তৈরি করা উচিত নয় যা প্রত্যেক ব্রাউজারে ঠিক একই রকম দেখায় কিন্তু CSS3 স্টাইলস সহ আপনি যে কোনও শৈলী ব্যবহার করেন তা নিশ্চিত করতে ব্রাউজারগুলি যে তাদের সমর্থন করে এবং তাদের পুরোনো ব্রাউজারগুলির জন্য পুরোপুরিভাবে ফিরে যায় তা নিশ্চিত করে। করো না.
নতুন CSS3 নির্বাচক
CSS3 আপনাকে নতুন সিএসএস সিলেক্টরস, নতুন সংযোজক এবং কিছু নতুন ছদ্ম-উপাদান দিয়ে CSS নিয়মগুলি লিখতে পারে এমন একটি নতুন উপায় অফার দেয়।
তিনটি নতুন বৈশিষ্ট্য নির্বাচনকারী:
- অ্যাট্রিবিউটের প্রারম্ভে ঠিক উপাদানের সাথে মিলছে [foo ^ = "bar"] উপাদানটির নাম "foo" নামে একটি বৈশিষ্ট্য যা "বার" এর সাথে শুরু হয়
- অ্যাট্রিবিউটের শেষ উপাদানের সাথে মিল রয়েছে [foo $ = "bar"] উপাদানটিতে "বি" নামক একটি বৈশিষ্ট্য আছে যা "বার" এর সাথে শেষ হয়
- অ্যাট্রিবিউটটিতে মিলের উপাদান রয়েছে [foo * = "bar"] উপাদানটির একটি বৈশিষ্ট্য আছে যা foo নামে থাকে যার মধ্যে স্ট্রিং "বার" উদাহরণ রয়েছে
16 নতুন ছদ্ম-ক্লাস:
- : রুট
- নথির মূল উপাদান এইচটিএমএল এই সবসময় হয়।
- : n তম সন্তান (ঢ)
- যথাযথ শিশু উপাদানগুলি মেলাতে বা বিকল্প মিল পেতে ভেরিয়েবল ব্যবহার করতে এটি ব্যবহার করুন।
- : n তম-গত সন্তান (ঢ)
- শেষ এক থেকে গণনা সঠিক শিশু উপাদান মেলে
- : n তম অফ-টাইপ (ঢ)
- ডকুমেন্ট বৃক্ষের আগে তার সাথে একই নামের সাথে বন্ধুত্বপূর্ণ উপাদানগুলি মিলুন।
- : n তম-গত অফ-টাইপ (ঢ)
- নীচের থেকে গণনা একই নামের সঙ্গে ভাইবোনদের উপাদানগুলি মেলে।
- :শেষ সন্তান
- পিতা বা মাতা শেষ সন্তানের উপাদান মেলে।
- : প্রথম-ধরনের
- ঐ ধরনের প্রথম ভাইবোন উপাদানটি মিলিয়ে দিন।
- : শেষ-টাইপ অফ
- যে টাইপ শেষ ভাইবোন উপাদান মেলে।
- :শুধুমাত্র বাচ্চা
- উপাদান যে তার পিতা বা মাতা একমাত্র সন্তানের সাথে মেলে।
- : শুধুমাত্র-টাইপ অফ
- যে উপাদানটি তার ধরন মাত্র এক একত্রিত করুন।
- : খালি
- কোনও সন্তান নেই (যে পাঠ্য নং সহ) সেই উপাদানটি মেলে
- : টার্গেট
- উল্লেখ্য যে URI এর লক্ষ্যটি লক্ষ্যমাত্রার সাথে মেলে।
- : সক্রিয়
- এটি সক্রিয় করা হলে উপাদানটি মেলে।
- : প্রতিবন্ধী
- এটি নিষ্ক্রিয় যখন উপাদান মেলে
- : চেক করা
- যখন এটি পরীক্ষা করা হয় (রেডিও বোতাম বা চেকবক্স) উপাদানটি মেলে
- : না (গুলি)
- যখন উপাদানটি সহজ নির্বাচক গুলি মেলে না তখন ম্যাচ
একটি নতুন সমন্বয়কারী:
- উপাদান A ~ উপাদান B
- এলএলএলএর পর কোন উপাদান এল এর পরে আসে, তা অপরিহার্যভাবে অবিলম্বে নয়।
নতুন বৈশিষ্ট্যাবলী
CSS3 এছাড়াও একটি নতুন CSS বৈশিষ্ট্য সংখ্যা চালু এই বৈশিষ্ট্যগুলি অনেকগুলি দৃশ্যমান শৈলী তৈরি করা হতে পারে যা ফটোশপের মত গ্রাফিক্স প্রোগ্রামের সাথে আরও বেশি সহযোগিতা করবে। এর মধ্যে কিছু, যেমন সীমান্ত-ব্যাসার্ধ বা বক্স-শেড, CSS3 এর প্রবর্তন থেকে প্রায় হয়েছে। অন্যদের, flexbox বা এমনকি CSS গ্রিডের মত নতুন শৈলী যা এখনও প্রায়ই CSS3 সংযোজন বলে বিবেচিত হয়।
CSS3 এ, বক্স মডেল পরিবর্তন করা হয়নি। কিন্তু আপনার শৈলী আপনার বক্সের ব্যাকগ্রাউন্ড এবং সীমানা সাহায্য করতে পারে যে নতুন শৈলী বৈশিষ্ট্য একটি গুচ্ছ আছে।
একাধিক ব্যাকগ্রাউন্ড আমি mages
ব্যাকগ্রাউন্ড-ইমেজ, ব্যাকগ্রাউন্ড-পজিশন এবং ব্যাকগ্রাউন্ড-পুনরাবৃত্ত স্টাইলগুলি ব্যবহার করে আপনি একাধিক ব্যাকগ্রাউন্ড ইমেজগুলি বাক্সে একে অপরের উপরে স্তরযুক্ত করতে পারেন। প্রথম ইমেজটি ব্যবহারকারীর নিকটতম স্তর, পিছনে আঁকা নিম্নোক্ত লোকেদের সাথে। যদি একটি পটভূমির রং থাকে, তবে এটি সমস্ত চিত্র স্তরগুলির নীচে আঁকা হয়।
নতুন ব্যাকগ্রাউন্ড স্টাইল বৈশিষ্ট্যাবলী
CSS3 এ কিছু নতুন ব্যাকগ্রাউন্ড বৈশিষ্ট্য আছে
- পশ্চাদপট-ক্লিপ
- এই সম্পত্তিটি কিভাবে পটভূমি চিত্র ক্লিপ করা উচিত তা নির্ধারণ করে। ডিফল্ট সীমানা বাক্স, কিন্তু এটি প্যাডিং বক্স বা কন্টেন্ট বাক্সে পরিবর্তন করা যায়।
- পটভূমি বংশোদ্ভূত
- এই বৈশিষ্ট্যটি নির্ধারণ করে যে পটভূমি প্যাডিং বক্স, সীমানা বাক্সে বা বিষয়বস্তু বাক্সে স্থান হওয়া উচিত কিনা।
- পটভূমি আকার
- এই সম্পত্তি আপনি পটভূমির ইমেজ আকার ইঙ্গিত করতে পারবেন। এটি আপনাকে পৃষ্ঠার মাপের ছোট ছবি প্রসারিত করতে দেয়।
বিদ্যমান পংক্তি শৈলী বৈশিষ্ট্যাবলী পরিবর্তন
বিদ্যমান পটভূমি শৈলী বৈশিষ্ট্যের কয়েকটি পরিবর্তন আছে:
- পটভূমি পুনরাবৃত্তি
- এই সম্পত্তি জন্য দুটি নতুন মান আছে: স্থান এবং বৃত্তাকার। স্পেসটি টাইল্ড ইমেজটি ছাপানো নাও থাকতে পারে। বৃত্তাকার ব্যাকগ্রাউন্ড ইমেজকে পুনঃসেক্ট করে যাতে এটি বক্সের একটি সম্পূর্ণ সংখ্যা টাইল করতে পারে।
- পৃষ্ঠভূমি সংযুক্তি
- একটি নতুন মান "স্থানীয়" যোগ করা হয় যাতে উপাদানটি উপাদানটির সাহায্যে ব্যাকগ্রাউন্ড স্ক্রোল করবে যখন এই উপাদানটির স্ক্রোল দণ্ড থাকবে।
- পটভূমি
- ব্যাকগ্রাউন্ড শর্টদন্ড সম্পত্তি আকার এবং উত্সের বৈশিষ্ট্য যোগ করা হয়েছে।
CSS3 সীমান্ত বৈশিষ্ট্যাবলী
CSS3 সীমানা আমরা ব্যবহার করা হয় শৈলী হতে পারে (কঠিন, ডবল, ড্যাশ, ইত্যাদি) বা তারা একটি ইমেজ হতে পারে প্লাস, CSS3 গোলাকার কোণ তৈরি করার ক্ষমতা নিয়ে আসে। বর্ডার ইমেজগুলি আকর্ষণীয় কারণ আপনি চারটি সীমান্তের একটি ছবি তৈরি করেন এবং তারপর CSS কে আপনার সীমানাতে যে চিত্র প্রয়োগ করতে হয় তা বলুন।
নতুন সীমানা স্টাইল বৈশিষ্ট্যাবলী
CSS3 এর কিছু নতুন সীমানা বৈশিষ্ট্য আছে:
- সীমান্তে ব্যাসার্ধ
- সীমানা-শীর্ষ-ডান-ব্যাসার্ধ , সীমান্ত-তল-ডান-ব্যাসার্ধ , সীমান্ত-তল-বাম-ব্যাসার্ধ , সীমানা-শীর্ষ-বাম-ব্যাসার্ধ
- এই বৈশিষ্ট্যগুলি আপনাকে আপনার সীমানায় বৃত্তাকার কোণ তৈরি করতে দেয়।
- সীমান্ত-চিত্র সোর্স
- পূর্বনির্ধারণকৃত সীমানা শৈলীগুলির পরিবর্তে ব্যবহৃত চিত্র উৎস ফাইল সুনির্দিষ্ট করে।
- সীমান্ত-চিত্র-ছে
- সীমানা ইমেজ প্রান্ত থেকে অভ্যন্তরীণ অফসেট প্রতিনিধিত্ব করে
- সীমান্ত-চিত্র-প্রস্থের
- আপনার সীমানা ইমেজ জন্য প্রস্থ মান নির্ধারণ করে
- সীমান্ত-চিত্র-গোড়াতেই
- বর্ধিত চিত্র এলাকা সীমানা বাক্স অতিক্রম প্রসারিত যে পরিমাণ সুনির্দিষ্ট করে
- সীমান্ত-চিত্র-প্রসারিত
- সীমান্ত ইমেজের পক্ষ এবং মাঝের অংশ টাইল্ড বা মাপসই করা হবে তা নির্ধারণ করে।
- সীমান্ত-চিত্র
- সমস্ত সীমানা ইমেজ বৈশিষ্ট্য জন্য লেনদেন সম্পত্তি।
সীমানা এবং পৃষ্ঠভূমি সংক্রান্ত অতিরিক্ত CSS3 বৈশিষ্ট্যাবলী
যখন একটি বাক্সে একটি পৃষ্ঠা বিরতিতে ভাঙ্গা হয়, লাইন বিরতির জন্য কলাম বিরতি (ইনলাইন উপাদানগুলির জন্য) বক্স-প্রসাধন-বিরতি সম্পত্তি সংজ্ঞায়িত করে কিভাবে নতুন বাক্সগুলি সীমানা এবং প্যাডিং দিয়ে আবৃত হয়। এই সম্পত্তিটি ব্যবহার করে ব্যাকগ্রাউন্ডগুলি একাধিক ভাঙা বাক্সের মধ্যে ভাগ করা যায়।
বক্স-ছায়া সম্পত্তিও রয়েছে যা বক্স উপাদানে ছায়া যোগ করতে ব্যবহার করা যায়।
CSS3 সহ, আপনি এখন সহজেই টেবিল বা জটিল DIV ট্যাগ স্ট্রাকচার ছাড়া একাধিক কলাম সহ একটি ওয়েব পৃষ্ঠা সেট আপ করতে পারেন। আপনি কেবল ব্রাউজারটিকে বলুন যে শরীরের উপাদান কতগুলি কলাম থাকা উচিত এবং কতগুলি বিস্তৃত হওয়া উচিত। প্লাস আপনি সীমানা (নিয়মাবলী), পটভূমিতে রং যোগ করতে পারেন যা কলামের উচ্চতা স্প্যান করা যায় এবং আপনার পাঠ্য স্বয়ংক্রিয়ভাবে সমস্ত কলামের মাধ্যমে প্রবাহিত হবে।
CSS3 কলাম - কলাম সংখ্যা এবং প্রস্থ নির্ধারণ করুন
তিনটি নতুন বৈশিষ্ট্য আছে যা আপনাকে আপনার কলামের সংখ্যা ও প্রস্থ নির্ধারণ করতে দেয়:
- কলাম প্রস্থ
- আপনার কলামটি হওয়া উচিত প্রস্থ নির্ধারণ করে। ব্রাউজার তারপর যে কলামে যে স্থান বিস্তৃত পূরণ করতে পাঠ্য প্রবাহিত হবে।
- কলাম গোনা
- পৃষ্ঠায় কলাম সংখ্যা সংজ্ঞায়িত করে ব্রাউজারটি তখন স্থানটিতে ফিট করার জন্য পর্যাপ্ত পরিমাণে কলাম তৈরি করবে, তবে আপনি যে নম্বরটি নির্দিষ্ট করেছেন তার মাত্র।
- কলাম
- শর্টদন্ড সম্পত্তি যেখানে আপনি চতুর্থাংশ বা সংখ্যা (বা উভয়ই সংজ্ঞায়িত করতে পারেন, কিন্তু খুব কমই বোঝা যায়)।
CSS3 কলাম বিফল এবং বিধি
একই multicolumn অবস্থানে কলামের মধ্যে ব্যবধান এবং নিয়মগুলি স্থাপন করা হয়। ভাঁজগুলি কলামগুলি পৃথক্ করে দেবে, তবে নিয়ম কোনও স্থান গ্রহণ করবে না। যদি একটি কলাম নিয়ম তার ফাঁক থেকে বিস্তৃত হয়, এটি সন্নিহিত কলামগুলির উপর ওভারল্যাপ করবে। কলাম নিয়ম এবং ফাঁকির জন্য পাঁচটি নতুন বৈশিষ্ট্য আছে:
- কলাম-ফাঁক
- কলামের মধ্যবর্তী ফাঁকির প্রস্থ নির্ধারণ করে
- কলাম-নিয়ম-রঙ
- নিয়ম রং নির্ধারণ করে
- কলাম-নিয়ম-শৈলী
- নিয়ম শৈলী (কঠিন, বিন্দু, ডবল, ইত্যাদি) নির্ধারণ করে।
- কলাম-নিয়ম-প্রস্থের
- নিয়ম প্রস্থ নির্ধারণ করে।
- কলাম-নিয়ম
- একদম তিনটি কলাম নিয়ম বৈশিষ্ট্যগুলি সংজ্ঞায়িত একটি শর্টদন্ডের সম্পত্তি।
CSS3 কলাম বিরতি, বিস্তার কলাম, এবং কলাম ভর্তি
কলাম বিভাজক একই CSS2 বিকল্পগুলি ব্যবহার করে প্যাড সামগ্রীর বিরতি সংজ্ঞায়িত করার জন্য ব্যবহার করা হয়েছে, তবে তিনটি নতুন বৈশিষ্ট্যগুলির সাথে: বিরতির আগে , বিরতির পরে এবং ভঙ্গের ভেতরে
টেবিল সহ, আপনি কলাম-স্প্যান সম্পত্তি সঙ্গে কলাম স্প্যানিং উপাদান সেট করতে পারেন। এটি আপনাকে শিরোনাম তৈরি করতে দেয় যা একটি সংবাদপত্রের মত একাধিক কলামকে স্প্যান করা যায়।
কলামগুলি পূরণ করে প্রতিটি কলামে কতটা বিষয়বস্তু হবে তা নির্ধারণ করে। সুষম কলামগুলি প্রতিটি কলামে একই পরিমাণ পরিমাণে উপাদান রাখার চেষ্টা করে যখন স্বয়ংক্রিয়ভাবে কলামটি পূর্ণ না হওয়া পর্যন্ত সামগ্রীটি প্রবাহিত হয় এবং তারপর পরবর্তীতে যায়
CSS3 এ আরো বৈশিষ্ট্য যা CSS2 এ অন্তর্ভুক্ত না
CSS3 এ অতিরিক্ত অতিরিক্ত বৈশিষ্ট্য রয়েছে যা CSS2 এ বিদ্যমান নেই:
- CSS টেমপ্লেট লেআউট মডিউল এবং CSS3 গ্রিড পজিশনিং মডিউল : CSS দিয়ে গ্রিড তৈরি করা।
- CSS3 টেক্সট মডিউল : রেজাল্ট টেক্সট এবং সিএসএস এর সাথে ড্রপ-শেডও তৈরি করুন।
- CSS3 রঙ মডিউল : এখন অপাসিটি সঙ্গে।
- বক্স মডেল পরিবর্তন : IE ট্যাগ মত কাজ করে এমন একটি marquee সম্পত্তি সহ।
- CSS3 ইউজার ইন্টারফেস মডিউল : আপনাকে নতুন কার্সার, কর্মের প্রতিক্রিয়া, প্রয়োজনীয় ক্ষেত্রগুলি প্রদান করা এবং এমনকি উপাদানগুলো পুনরায় আকার প্রদান করে ।
- মিডিয়া প্রশ্নসমূহ : একটি স্টাইল শীট কিভাবে ব্যবহার করা উচিত তা সংজ্ঞায়িত করার সময় মিডিয়া ক্যোয়েন্স আপনাকে আরো নমনীয়তা অনুমোদন করে। উদাহরণস্বরূপ, আপনি একটি স্টাইল শীট সংজ্ঞায়িত করতে পারেন যা শুধুমাত্র হ্যান্ডহেল্ড ডিভাইসের জন্য যা ভিউপোর্টটি ২0ম এর থেকে বড়।
- CSS3 রুবি মডিউল : যে ভাষাগুলি ডকুমেন্টগুলি টীকা করতে পাঠ্য রেখার ব্যবহার করে তা সমর্থন করে।
- CSS3 প্যাড মিডিয়া মডিউল : পেজযুক্ত মিডিয়া (কাগজ, স্বচ্ছতা, ইত্যাদি) এর জন্য আরও বেশি সহায়তা পেতে
- উত্পাদিত সামগ্রী : এল চলমান শিরোলেখ এবং পাদচরণ, পাদটীকা এবং অন্যান্য সামগ্রী যা প্রোগ্রামারেটিকভাবে উত্পন্ন হয়, বিশেষ করে পৃষ্ঠাযুক্ত মিডিয়াগুলির জন্য
- CSS3 বক্তৃতা মডিউল : সাহিত্য CSS এ পরিবর্তন।