কেন্দ্র নির্মাণের সময় ইমেজ, পাঠ্য এবং ব্লক উপাদানগুলি
আপনি ওয়েবসাইটগুলি কিভাবে তৈরি করবেন তা শিখলে, ব্রাউজার উইন্ডোর আইটেমগুলি কীভাবে মার্কেটিং করতে হবে তা হল সবচেয়ে সাধারণ কৌশলগুলির মধ্যে একটি। এই পৃষ্ঠার একটি চিত্র কেনার অর্থ হতে পারে, অথবা এটি নকশা হিসাবে অংশ হিসাবে শিরোনাম মত কেন্দ্র-সমর্থনযোগ্য পাঠ্য হতে পারে।
ক্যাসকেডিং স্টাইল শীটস (সিএসএস) ব্যবহার করে কেন্দ্রীভূত চিত্র বা টেক্সট বা এমনকি আপনার পুরো ওয়েবপেজের এই চাক্ষুষ চেহারাটি সম্পন্ন করার সঠিক উপায়। কেন্দ্রীয়করণের অধিকাংশ বৈশিষ্ট্যগুলি সংস্করণ 1.0 থেকে CSS এ রয়েছে এবং তারা CSS3 এবং আধুনিক ওয়েব ব্রাউজারগুলির সাথে চমৎকার কাজ করে ।
ওয়েব ডিজাইনের অনেক দিকের মতো, ওয়েব পৃষ্ঠায় কেন্দ্র উপাদানগুলির CSS ব্যবহার করার একাধিক উপায় আছে। আসুন এই ভিজ্যুয়াল দেখার জন্য সিএসএস ব্যবহার করার কিছু ভিন্ন উপায় দেখুন।
এইচটিএমএল এ সেন্টারে এলিমেন্টের সিএসএস ব্যবহারের সংক্ষিপ্ত বিবরণ
সিএসএস এর সাথে কেন্দ্রীকরণ ওয়েব ডিজাইনারদের শুরুতে একটি চ্যালেঞ্জ হতে পারে কারণ এই একটি ভিজ্যুয়াল স্টাইলটি সম্পন্ন করার অনেকগুলি ভিন্ন উপায় রয়েছে। যদিও বিভিন্ন পদ্ধতি চমৎকার বা ঋতুপূর্ণ ওয়েব ডেভেলপার হতে পারে, তবে তারা জানেন না যে সমস্ত কৌশল প্রত্যেকটি উপায়ে কাজ করে, নতুন ওয়েব পেশাদারদের জন্য এটি অত্যন্ত চ্যালেঞ্জিং হতে পারে কারণ বিভিন্ন ধরণের পদ্ধতিগুলি থেকে বোঝা যায় যে কোন পদ্ধতিটি ব্যবহার করার সময় তারা জানতে হবে। কয়েকটি পন্থা সম্পর্কে একটি বোঝার অর্জন করা সবচেয়ে ভাল জিনিস। আপনি তাদের ব্যবহার করা শুরু করার সময়, আপনি যা পদ্ধতি শিখতে হবে যা দৃষ্টান্ত যা সর্বোত্তম।
উচ্চ পর্যায়ে, আপনি CSS ব্যবহার করতে পারেন:
- কেন্দ্র পাঠ্য
- একটি ব্লক-স্তর উপাদান কেন্দ্র (একটি বিভাগ মত)
- একটি ইমেজ কেন্দ্র
- উল্লম্বভাবে একটি ব্লক বা একটি চিত্র কেন্দ্র
অনেক (বহু) বছর আগে, ওয়েব ডিজাইনাররা
সিএসএস এর সাথে পাঠ্য কেন্দ্র
একটি ওয়েবপৃষ্ঠা কেন্দ্র সবচেয়ে সহজ জিনিস টেক্সট হয়। শুধুমাত্র একটি শৈলী সম্পত্তি আছে যা আপনাকে জানাতে হবে: টেক্সট-সারিবদ্ধ। উদাহরণস্বরূপ, সিএসএস শৈলী নীচে নিন:
p.center {text-align: center; }
CSS এর এই লাইন দিয়ে, কেন্দ্র শ্রেণির সাথে লিখিত প্রত্যেক অনুচ্ছেদটি তার প্যারেন্ট উপাদানের মধ্যে অনুভূমিকভাবে কেন্দ্রীভূত হবে। উদাহরণস্বরূপ, যদি অনুচ্ছেদটি একটি বিভাগের ভিতরে থাকে, তবে এর অর্থ এই বিভাগের একটি সন্তান, এটি
এখানে এইচটিএমএল ডকুমেন্টে প্রয়োগ করা এই ক্লাসের একটি উদাহরণ:
এই পাঠটি কেন্দ্রীভূত।
পাঠ্য-সংমিশ্রণ সম্পত্তির সাথে পাঠ্য কেন্দ্র স্থাপন করার সময়, মনে রাখবেন যে এটিটি তার বিদ্যমান উপাদানটির মধ্যে কেন্দ্রীভূত হবে এবং সম্পূর্ণ পৃষ্ঠাতে নিজেই কেন্দ্রীভূত হবে না। এছাড়াও মনে রাখবেন কেন্দ্রীকরণযোগ্য পাঠ্য সামগ্রী বড় ব্লকের জন্য পড়তে কঠিন হতে পারে, তাই এই শৈলীটি স্পষ্টভাবে ব্যবহার করুন। শিরোনাম এবং পাঠের ছোট ব্লকগুলি, একটি নিবন্ধ বা অন্যান্য সামগ্রীতে টিজার পাঠের মতো, কেন্দ্রীভূত করার সময় প্রায়ই পড়া ও জরিমানা করা যায়, তবে সম্পূর্ণ নিবন্ধের মত পাঠের বৃহত্তর ব্লকটি সামগ্রিকভাবে সম্পূর্ণ কেন্দ্রবিন্দুতে ব্যবহারের জন্য চ্যালেঞ্জ হবে। সমর্থনযোগ্য। মনে রাখবেন, ওয়েবপেজের পাঠ্যবই যখন সর্বদা সর্বদা পাঠযোগ্যতা !
সিএসএস এর সাথে বিষয়বস্তুগুলির কেন্দ্রবিন্দু ব্লক
ব্লকগুলি আপনার পৃষ্ঠার যেকোনো উপাদানের একটি নির্দিষ্ট প্রস্থ রয়েছে এবং একটি ব্লক-স্তরীয় উপাদান হিসাবে স্থাপন করা হয় বেশিরভাগ সময়, এইচটিএমএল
div.center {
মার্জিন: 0 টি স্বয়ংক্রিয়;
প্রস্থ: 80 এম;
}
মার্জিন সম্পত্তিটির জন্য এই CSS শর্টহ্যান্ড শীর্ষ ও নীচের মার্জিনকে 0 এর মান পর্যন্ত সেট করবে, যখন বাম এবং ডান "অটো" ব্যবহার করবে। এটি আনুষ্ঠানিকভাবে কোন স্পেস উপলব্ধ করে এবং ভিউপোর্ট উইন্ডোর দুই পক্ষের মধ্যে সমানভাবে এটি ভাগ করে নেয়, কার্যকরীভাবে পৃষ্ঠার উপাদানকে কেন্দ্র করে।
এখানে এইচটিএমএল এ প্রয়োগ করা হয়:
কিন্তু এটির ভিতরের লেখাটি বাম পাশে রেখেছে।
যতক্ষণ পর্যন্ত আপনার ব্লক একটি সংজ্ঞায়িত প্রস্থ আছে, এটি ধারণকারী উপাদান ভিতরে নিজেই কেন্দ্র হবে সেই ব্লকের অন্তর্গত পাঠ্য এটির মধ্যে কেন্দ্রীভূত হবে না, তবে বাম-ন্যায়সঙ্গত হবে। এই কারণে ওয়েব ব্রাউজারে ডিফল্টভাবে পাঠ্যটি বামপন্থী। আপনি যদি পাঠ্যকে কেন্দ্রীয় হিসাবেও চান তবে আপনি পাঠ্য-সংমিশ্রণ সম্পত্তির ব্যবহার করতে পারেন যা আমরা এই পদ্ধতির সাথে সংযুক্ত করার জন্য বিভাগটি কেন্দ্রে অন্তর্ভুক্ত করেছি।
সিএসএস এর সাথে চিত্রগুলি কেন্দ্রে
যদিও বেশিরভাগ ব্রাউজার একই টেক্স-অ্যালাইন সম্পত্তি ব্যবহার করে চিত্রগুলি তুলে ধরেছে যা আমরা ইতিমধ্যে অনুচ্ছেদের জন্য দেখেছি, এটি W3C দ্বারা প্রস্তাবিত নয় এমন কৌশলটি নির্ভর করে এমন একটি ভাল ধারণা নয়। যেহেতু এটি সুপারিশ করা হয় না, তাই ব্রাউজারের ভবিষ্যতের সংস্করণ এই পদ্ধতিটি উপেক্ষা করতে পারে এমন একটি সুযোগ সবসময়ই রয়েছে।
একটি চিত্র কেন্দ্রে টেক্সট-সারিবদ্ধ ব্যবহার করার পরিবর্তে, আপনি স্পষ্টভাবে ব্রাউজারকে বলবেন যে চিত্র একটি ব্লক-স্তর উপাদান। এই ভাবে, আপনি এটি অন্য কোন ব্লক হিসাবে এটি কেন্দ্র করতে পারেন। এখানে এই সিএসএস তৈরি করা হয়:
img.center {
প্রদর্শন ব্লক;
মার্জিন বাম: অটো;
মার্জিন-ডান: অটো;
}
এবং এখানে এইচটিএমএল যে ইমেজ জন্য যে আমরা কেন্দ্রস্থল হতে চাই:
আপনি ইন-লাইন CSS (নীচের দেখুন) ব্যবহার করে বস্তুগুলি সন্নিবেশ করতে পারেন, তবে এটি আপনার এইচটিএমএল মার্কআপের মধ্যে ভিজ্যুয়াল স্টাইল যোগ করার পরে এই পদ্ধতিটি সুপারিশ করা হয় না। মনে রাখবেন, আমরা শৈলী এবং কাঠামো আলাদা করতে চাই, তাই আপনার এইচটিএমএল কোডে বিভাজক বিচ্ছিন্নতার সাথে সিএসএস শৈলী যোগ করা উচিত এবং, যেহেতু, সম্ভব হলে এটি এড়িয়ে যাওয়া উচিত।
সিএসএস এর সাথে উল্লম্বভাবে সেন্সিং এলিমেন্ট
সীমাবদ্ধ বস্তুগুলি উল্লম্বভাবে সবসময় ওয়েব ডিজাইনের মধ্যে চ্যালেঞ্জিং ছিল, কিন্তু সিএসএস এর নমনীয় বক্স বিন্যাস মডিউলটি প্রকাশের সাথে সাথে এখন এটি করার উপায় রয়েছে।
উল্লম্ব প্রান্তিককরণ উপরে উল্লিখিত অনুভূমিক প্রান্তিককরণ অনুরূপ কাজ করে। CSS সম্পত্তিটি উল্লম্ব-মধ্যম মানের সঙ্গে সারিবদ্ধ।
.vcenter {
উল্লম্ব-সারিবদ্ধ: মধ্যম;
}
এই পদ্ধতিতে নেতিবাচক দিক হল যে সমস্ত ব্রাউজার সিএসএস ফ্লেক্সবক্সকে সমর্থন করে না, যদিও এই নতুন CSS লেআউট পদ্ধতিতে আরো অনেক কিছু আসে! আসলে, আজকের সমস্ত আধুনিক ব্রাউজারগুলি এই সিএসএস শৈলীটি সমর্থন করে। এটি Flexbox সঙ্গে আপনার শুধুমাত্র উদ্বেগ অনেক পুরোনো ব্রাউজার সংস্করণ হবে মানে।
যদি আপনার পুরোনো ব্রাউজারগুলির সাথে সমস্যা থাকে, W3C প্রস্তাব দেয় যে আপনি নিম্নলিখিত পদ্ধতি ব্যবহার করে একটি ধারকটিতে উল্লম্বভাবে পাঠ্য কেন্দ্র স্থাপন করুন:
- একটি উপাদান ধারণকারী কেন্দ্র স্থাপন করা উপাদান রাখুন, যেমন একটি div হিসাবে
- ধারণকারী উপাদান একটি সর্বনিম্ন উচ্চতা নির্ধারণ করুন
- একটি টেবিলের সেল হিসাবে যে ধারণকারী উপাদান ঘোষণা।
- উল্লম্ব প্রান্তিককরণ সেট করুন "মধ্য"।
উদাহরণস্বরূপ, এখানে CSS রয়েছে:
.vcenter {
মিনি-উচ্চতা: 1২ ইএম;
প্রদর্শন: টেবিল-কোষ;
উল্লম্ব-সারিবদ্ধ: মধ্যম;
}
এবং এখানে এইচটিএমএল:
এই পাঠ্যটি বাক্সে উল্লম্বভাবে কেন্দ্রিক।
উল্লম্ব কেন্দ্রে এবং ইন্টারনেট এক্সপ্লোরার এর পুরোনো সংস্করণ
ইন্টারনেট এক্সপ্লোরার (IE) কেন্দ্রে কেন্দ্র করার জন্য কিছু উপায় আছে এবং তারপর শর্তাধীন মন্তব্যগুলি ব্যবহার করে যাতে শুধুমাত্র IE স্টাইলগুলি দেখতে পায়, তবে এটি একটি বিরাট অক্ষর এবং কুশ্রী। ভাল খবর হল মাইক্রোসফটের IE এর পুরোনো ভার্সনগুলির জন্য সমর্থন হ্রাস করার সাম্প্রতিক সিদ্ধান্তের সাথে, যারা অসমর্থিত ব্রাউজারগুলি শীঘ্রই তাদের পথ হতে হবে, ওয়েব ডিজাইনারগণ সিএসএস ফ্লেক্সবক্সের মতো আধুনিক লেআউট পদ্ধতির ব্যবহার সহজ করে তুলবে যা সমস্ত সিএসএস লেআউট তৈরি করবে, সব ওয়েব ডিজাইনারদের জন্য শুধু কেন্দ্রিক নয়, আরও সহজ।