CSS কি? এই টুলের প্রধান কাজ!

¿CSS কি? আসুন এবং এই আকর্ষণীয় নিবন্ধে খুঁজে বের করুন। ওয়েব পেজের নকশা এবং কার্যকারিতার ধারণা চিরতরে পরিবর্তনের জন্য CSS এর জন্ম হয়েছিল।

¿CSS কি?

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

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

অন্যদিকে, CSS সম্পূর্ণরূপে সংজ্ঞায়িত নথি তৈরির অনুমতি দেয়, সম্পূর্ণ অর্থ সহ, কিন্তু কম জটিল, সহজেই অ্যাক্সেসযোগ্য এবং বজায় রাখা সহজ। উপরন্তু, এটি এই নথিগুলি যে কোনও মাধ্যম বা ডিভাইস থেকে দেখার অনুমতি দেয়।

বিবর্তন

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

সিএইচএসএস এবং এসএসপির মিলনের ফলে সিএসএস ১ formal৫ সালে আনুষ্ঠানিকভাবে আবির্ভূত হয়।

এক বছর পরে, W3C তার প্রথম আনুষ্ঠানিক সুপারিশ প্রকাশ করে, যার নাম CSS লেভেল 1। তবে 1997 সালে এটি CSS কাজকে DOM এবং HTML এর কাজ থেকে আলাদা করার সিদ্ধান্ত নেয়। সুতরাং, 1998 সালে, CSS ওয়ার্কিং গ্রুপ তার প্রথম পৃথক পরামর্শ প্রকাশ করে, যা এটি CSS লেভেল 2 নামে পরিচিত।

প্রায় দশ বছর পরে, 2007 সালে, CSS লেভেল 2 এর সর্বশেষ পরিচিত আপডেট করা হয়েছিল, যাকে CSS 2.1 বলা হয়। প্রকৃতপক্ষে, এই সংস্করণটি এমন একটি যা আজও ব্রাউজারে ব্যবহার করা হচ্ছে।

এটা জানা যায় যে, সমান্তরালভাবে, W3C CSS লেভেল 3 এর সুপারিশ কী হবে তা বিকাশ করছে।

এটাও জানা যায় যে এইচটিএমএল এবং সিএসএস কোডের ব্যাখ্যার দায়িত্বে থাকা ব্রাউজারদের দ্বারা অভিযোজন যাতে ছবিগুলি তাদের ইঞ্জিনের মাধ্যমে প্রদর্শিত হয়, তা সহজ ছিল না। এতটাই যে CSS- এর পূর্ণ সমর্থনের প্রথম সংস্করণ 2000 সালে প্রকাশিত হয়েছিল। এটি CSS লেভেল 1 -কে উল্লেখ করে এবং ম্যাকের জন্য ইন্টারনেট এক্সপ্লোরার 5 ব্রাউজারের অন্তর্গত।

এই বিষয়ে, এটি দেখা যাচ্ছে যে বর্তমানে, সাফারি এবং অপেরা ব্রাউজারগুলিই CSS এর জন্য কাঙ্ক্ষিত সহায়তার সবচেয়ে কাছাকাছি আসে, কারণ সেগুলি অসম্পূর্ণ CSS 3 সংশোধন সম্পর্কিত কিছু দিক অন্তর্ভুক্ত করে এবং সংস্করণ 2.1 এর জন্য প্রায় নিখুঁত সমর্থন প্রদান করে। তারা ফায়ারফক্স এবং গুগল ক্রোম দ্বারা অনুসরণ করা হয়, কিন্তু সংস্করণ 3 এর জন্য তাদের সমর্থন এখনও কম উন্নত।

এর অংশ হিসাবে, সংস্করণ 6 পর্যন্ত ইন্টারনেট এক্সপ্লোরার CSS 2.1 দ্বারা প্রয়োজনীয় সমর্থনে উল্লেখযোগ্য ঘাটতি উপস্থাপন করেছে।

কিভাবে CSS কাজ করে?

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

বৈশিষ্ট্য

CSS এমন একটি ভাষা যার ব্যবহার ওয়েব ডিজাইনারদের মধ্যে বিস্ফোরিত হয়েছে। এটি তার অবিশ্বাস্য সুবিধার জন্য ধন্যবাদ, তাদের মধ্যে রয়েছে:

• এটি নমনীয়, একই কাজ সম্পাদনের জন্য বিভিন্ন বিকল্প প্রদান করে। এটি একটি বৈদ্যুতিন HTML নথিতে CSS অন্তর্ভুক্ত করার তিনটি উপায় তৈরি করে: নথিতে নিজেই, একটি বাহ্যিক ফাইলে এবং HTML উপাদানগুলির মধ্যে।
• প্রজেক্টর, স্ক্রিন, মনিটর এবং মোবাইল ডিভাইস ইত্যাদি বিভিন্ন মিডিয়ার জন্য বিভিন্ন স্টাইল সংজ্ঞায়িত করা যেতে পারে।
• নির্দিষ্ট মিডিয়াগুলির জন্য নির্দিষ্ট বৈশিষ্ট্যগুলি সংজ্ঞায়িত করে, যা আপনাকে ডিভাইসের কার্যকারিতার উপর নির্ভর করে একটি পৃষ্ঠার শৈলী পরিবর্তন করতে দেয়। এটি মিডিয়া প্রতিষ্ঠার জন্য চারটি নিয়মের অস্তিত্ব সৃষ্টি করে যেখানে CSS স্টাইলগুলি প্রয়োগ করা হবে: @media, @import, tag , এবং এক বিভিন্ন মিডিয়া মিশ্রণ উল্লেখ।
• যখন একটি উপাদানের উপর একটি সম্পত্তির মান নির্ধারণ করা হয়, তখন সেই উপাদানটির সমস্ত বংশধর একই মূল্যের উত্তরাধিকারী হয়।

উপাদান

CSS শীট শৈলী নিম্নলিখিত মৌলিক উপাদান দিয়ে গঠিত:

• নিয়ম: এটি একটি CSS স্টাইল শীটের অন্তর্গত প্রতিটি শৈলী গঠন করে। পরিবর্তে, এটি নির্বাচক এবং ঘোষণা দ্বারা গঠিত।
• নির্বাচক: HTML উপাদানকে বোঝায় যার উপর শৈলী প্রয়োগ করা হবে।
• ঘোষণা: এটি উপাদানগুলিতে প্রয়োগ করা শৈলীর স্পেসিফিকেশন। এতে এক বা একাধিক বৈশিষ্ট্য থাকতে পারে। বিবৃতিগুলির মাধ্যমে, এটি পরিষ্কার করা হয়েছে যে কী করা দরকার।
• সম্পত্তি: এটি এক বা একাধিক উপাদানের চেহারা পরিবর্তন করা সম্ভব করে তোলে।
• মূল্য: এটি উপাদানগুলির বৈশিষ্ট্যগুলির পরিবর্তনের ফলাফল।

সাধারণত, একটি CSS ফাইলে বেশ কয়েকটি শৈলী থাকে, যার প্রতিটিতে প্রচুর সংখ্যক উপাদান থাকতে পারে। একইভাবে, একটি স্টাইল স্পেসিফিকেশনে বিভিন্ন প্রপার্টি / ভ্যালু কম্বিনেশন থাকতে পারে।

নির্বাচকরা

ওয়েব পেজ তৈরির জন্য নির্বাচকদের প্রয়োজন হয়, কারণ তারাই সিএসএস শৈলী কোন উপাদানটি প্রয়োগ করতে হবে তা নির্দেশ করে। তারা এটি করার সঠিক উপায় গ্যারান্টি দেয়, একটি ওয়েব পেজের মধ্যে উপাদানগুলির সঠিক নির্বাচন করার অনুমতি দেয়।

বিভিন্ন ধরণের নির্বাচকদের অস্তিত্ব থাকা সত্ত্বেও, পাঁচটি প্রধানের নাম নীচে দেওয়া হবে:

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

এটা মনে রাখা গুরুত্বপূর্ণ যে CSS এই মৌলিক নির্বাচকদের থেকে শুরু করে বিভিন্ন সংমিশ্রণ ব্যবহারের অনুমতি দেয়।

Propiedades

ইতিমধ্যে উল্লেখ করা হয়েছে, বৈশিষ্ট্যগুলি আপনাকে HTML পৃষ্ঠাগুলির চেহারা ডিজাইন করতে দেয়। প্রধান কৌশলগুলির মধ্যে রয়েছে:

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

HTML- এ CSS অন্তর্ভুক্ত করার উপায়

CSS এর নমনীয়তার কারণে, ডিজাইনার বেছে নিতে পারেন কিভাবে তারা HTML নথিতে স্টাইল শীট অন্তর্ভুক্ত করতে চান। এইগুলো:

• একই এইচটিএমএল ডকুমেন্টে: এটি আদর্শ যখন আপনার কিছু শৈলী সংজ্ঞায়িত করা হয় অথবা যখন আপনি একটি নির্দিষ্ট HTML পৃষ্ঠায় পরিপূরক শৈলী অন্তর্ভুক্ত করতে চান। এটি ট্যাগ ব্যবহার করে অর্জন করা হয় y sólo pueden ubicarse en la cabecera del documento.
• একটি বাহ্যিক ফাইলে: ট্যাগ দ্বারা শৈলীগুলি একটি সাধারণ CSS ফাইলের মাধ্যমে HTML পৃষ্ঠাগুলির সাথে সংযুক্ত থাকে। সিএসএস ফাইলে সমস্ত শৈলী রয়েছে যা অন্তর্ভুক্ত হতে চলেছে এবং পৃষ্ঠাটি প্রয়োজনীয় সমস্ত ফাইলের লিঙ্ককে অনুমতি দেয়। একই ফাইল একই সময়ে বেশ কয়েকটি পৃষ্ঠায় অন্তর্ভুক্ত করা যেতে পারে, যা তাদের সকলের বিষয়বস্তুর একজাতীয়তার নিশ্চয়তা দেয়। এটি আজ সর্বাধিক ব্যবহৃত ফর্ম।
• এইচটিএমএল উপাদানগুলিতে: এর জন্য প্রতিটি উপাদানের শৈলী আলাদাভাবে সংজ্ঞায়িত করা প্রয়োজন, যা এটি এইচটিএমএল ডিজাইনারদের দ্বারা সর্বনিম্ন ব্যবহৃত পদ্ধতি। এটি শুধুমাত্র ডকুমেন্টের মধ্যে একটি একক উপাদান অনুসারে একটি খুব নির্দিষ্ট শৈলী অন্তর্ভুক্ত করতে ব্যবহৃত হয়।

মাধ্যমের সংজ্ঞা

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

এখন, যেমনটি আমরা আগে উল্লেখ করেছি, CSS একটি নথির শৈলী পরিবর্তন করার অনুমতি দেয়, এটি প্রদর্শন করার জন্য ব্যবহৃত মাধ্যম বা ডিভাইসের কার্যকারিতার উপর নির্ভর করে। এইভাবে, নিম্নলিখিত মিডিয়া সংজ্ঞা নিয়ম আছে:

• Edমিডিয়া শৈলী: আপনাকে দ্রুত এবং সরাসরি সেই মাধ্যমটি শনাক্ত করার অনুমতি দেয় যেখানে নিয়ম তৈরি করা শৈলী প্রয়োগ করা হবে। এর নাম immediatelymedia এর পরপরই লেখা। যদি একই স্টাইলের জন্য বেশ কয়েকটি মিডিয়া থাকে, তাহলে সবার নাম কমা দিয়ে আলাদা করে লেখা হয়। এই ধরণের সংজ্ঞার একটি উদাহরণ হল: screen মিডিয়া স্ক্রিন {body {font - size: 13px}}, যার অর্থ স্ক্রিনে ফন্টের ডিসপ্লে সাইজ 13 পিক্সেল হতে হবে।
• port আমদানি: বাহ্যিক ফাইলগুলিকে HTML ডকুমেন্টের সাথে লিঙ্ক করার সময় ব্যবহৃত হয়। এটি করার জন্য, @import টাইপ করার পরে, CSS ফাইলের URL সংজ্ঞায়িত করা হয়, তারপরে সেই মাধ্যমের নাম অনুসারে যে স্টাইলটি প্রয়োগ করা হবে। উদাহরণস্বরূপ: portimport url ("printer_styles.css") প্রিন্ট। এর মানে হল যে যখন ডকুমেন্টটি প্রিন্ট করা হয়, তখন বহিরাগত CSS ফাইলে অন্তর্ভুক্ত শৈলীগুলি অবশ্যই লোড করতে হবে। একাধিক মিডিয়ার জন্য, তাদের নামগুলি কমা দ্বারা পৃথক করা আবশ্যক। যদি মিডিয়া নিয়মে নির্দিষ্ট করা না থাকে, ব্রাউজার বুঝতে পারে যে স্টাইলটি সকল মিডিয়াতে সমানভাবে প্রয়োগ করতে হবে।
• <link>: যখন আপনি বিভিন্ন বহিরাগত CSS ফাইলের মাধ্যমে সংযুক্ত শৈলীগুলি অন্তর্ভুক্ত করতে চান তখন এটি ব্যবহার করা হয়। এর কাঠামোটি একটু বেশি জটিল, কারণ এর জন্য প্রতিটি ফাইলের প্রতিটি স্টাইলের জন্য মিডিয়া অ্যাট্রিবিউট অন্তর্ভুক্ত করা প্রয়োজন। এর মৌলিক রূপটি নিম্নরূপ: <link rel = "stylesheet" type = "text / css" media = "screen" href = "basic.css" />। যা নির্দেশ করে যে যখন নথিটি একটি পর্দার মাধ্যমে দেখা হয়, তখন CSS ফাইলের অন্তর্ভুক্ত শৈলীগুলি বিবেচনা করা উচিত।
• পদ্ধতির মিশ্রণ: মূলত, এটি পূর্ববর্তী তিনটি পদ্ধতির যে কোন একটির সংমিশ্রণের মাধ্যমে অর্থের সংজ্ঞা দেয়। portimport url ("section_styles.css") স্ক্রিন; @মিডিয়া প্রিন্ট { / * প্রিন্টার নির্দিষ্ট স্টাইল * /}। এর মানে হল যে স্ক্রিনে প্রদর্শিত শৈলীগুলি <link> ট্যাগের সাথে সংযুক্ত একটি ফাইল থেকে আসে এবং portimport নিয়মের অন্তর্ভুক্ত। উপরন্তু, মুদ্রণ শৈলী @media নিয়ম দ্বারা সংজ্ঞায়িত করা হয়।