সিএসএসে বিভিন্ন সীমানা কীভাবে প্রয়োগ করা যায়?

সীমানা এইচটিএমএল পৃষ্ঠাগুলিতে সামগ্রীর সীমাবদ্ধকরণ এবং হাইলাইট করতে ব্যবহৃত হয়। যখন কোনও পৃষ্ঠায় প্রচুর তথ্য থাকে এবং আপনি ব্যবহারকারীর মনোযোগ নির্দিষ্ট অংশগুলিতে আকর্ষণ করতে চান, তবে সেই সামগ্রীর চারপাশে সীমানা ব্যবহার করুন। সিএসএসে সীমান্ত সম্পর্কিত এই নিবন্ধে আমি নিম্নলিখিত বিষয়গুলি নিয়ে আলোচনা করব:

• বর্ডার কখন ব্যবহার করবেন
• সিএসএসে সীমানা
• সিএসএস বর্ডারের বৈশিষ্ট্য
• সীমানা বৈশিষ্ট্যের জন্য ডিফল্ট মান
• শর্টহ্যান্ডে সীমানা নির্ধারণ করুন
• সিএসএসে সীমানা ডিজাইনের সময় বিবেচনার জন্য পয়েন্টগুলি

বর্ডার কখন ব্যবহার করবেন

মানক অনুশীলন হ'ল এইচটিএমএল পৃষ্ঠাগুলিতে সীমানা নির্ধারণ করতে CSS সীমানা ট্যাগগুলি ব্যবহার করা:

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

আপনি পড়তে চাইতে পারেন সিএসএস সীমানা সম্পর্কে শিখতে যাওয়ার আগে

একটি বিস্তৃত সিএসএস টিউটোরিয়াল জন্য, দেখুন প্রাথমিকদের জন্য এডুরেকা সিএসএস টিউটোরিয়াল । এইচটিএমএল ওয়েব ডিজাইন বৃদ্ধিতে যেভাবে সিএসএস ব্যবহার করতে হবে তা আপনি একটি দুর্দান্ত হেড-আপ পাবেন।

সিএসএসে সীমানা

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

বডি {ব্যাকগ্রাউন্ড-রঙ: লাইটব্লিউ} এইচ 1 {টেক্সট-সারিবদ্ধ: সেন্টার বর্ডার-স্টাইল: সলিড} p {ফন্ট-পরিবার: রায়দান ফন্ট-আকার: 20px সীমানা-স্টাইল: বিন্দুযুক্ত}
অনুচ্ছেদ চারপাশেও সীমান্ত!
 

সিএসএস বর্ডারের বৈশিষ্ট্য

সিএসএস সীমানায় তাদের 3 টি প্রধান বৈশিষ্ট্য রয়েছে

• শৈলী:দ্যস্টাইলবৈশিষ্ট্য সীমানার প্যাটার্নটি নির্ধারণ করে।
• রঙ: রঙ সিএসএস রঙ দ্বারা নির্ধারিত সেট থেকে যে কোনও একটি হতে পারে।
• প্রস্থ: প্রস্থটি সীমানার বেধকে আরও বিশিষ্ট করতে ব্যবহার করতে ব্যবহৃত হয়।

উপরের উদাহরণে, আমরা দেখেছি যে কেবলমাত্র একটি সীমানা বিশিষ্টতা সংজ্ঞায়িত করা হয়, এটি এর শৈলী। অন্যান্য বৈশিষ্ট্যগুলি যখন সংজ্ঞায়িত না হয় তখন ডিফল্ট মানগুলি গ্রহণ করে। রেডিয়াস নামে আরও একটি বৈশিষ্ট্য রয়েছে, যা কম ঘন ঘন ব্যবহৃত হয়। এটি সীমানার প্রান্তগুলি বৃত্তাকার তৈরি করতে ব্যবহৃত হয়।

• সীমানা শৈলী গুণ

আপনি লক্ষ্য করবেন যে সেখানে একটি 'সীমান্ত নেই' এবং 'লুকানো সীমান্ত' বিকল্প রয়েছে। একজন বিকাশকারী কেবল কোনও সীমানা সংজ্ঞায়িত করতে এড়াতে পারেন, কেন এটি স্পষ্টভাবে একটি ‘লুকানো সীমানা’ হিসাবে সংজ্ঞায়িত করা যায়? এটি পৃষ্ঠার অন্যান্য উপাদানগুলির সাথে স্থান ব্যবহার এবং প্রান্তিককরণের উদ্দেশ্যে করা হয়।

সীমানার শৈলীগুলি একটি উপাদানের মধ্যেও মিশ্রিত করা যায়। এই উদ্দেশ্যে, 4 স্বতন্ত্র সীমান্তের দিকগুলি পৃথক পৃথক শৈলীর সাথে সংজ্ঞায়িত করা যেতে পারে। এটি 2 উপায়ে করা যেতে পারে। হয় একক ট্যাগে 4 টি দিক নির্ধারণ করুন। এই ক্ষেত্রে, গণনাটি শীর্ষ লাইন থেকে শুরু হয় এবং তারপরে ঘড়ির কাঁটার দিকে চলে যায়। বিকল্পভাবে, 4 টির প্রতিটি সীমান্তরেখা পৃথক ট্যাগগুলিতেও সংজ্ঞায়িত করা যায়। উভয় ক্ষেত্রে পরবর্তী উদাহরণে প্রদর্শিত হয়।

• সীমান্ত রঙ গুণ

সীমানার জন্য রঙ বৈশিষ্ট্যটি একাধিক উপায়ে সেট করা যেতে পারে। এটি অন্যান্য উপাদানগুলির জন্য রঙ সেট করার অনুরূপ। রঙগুলি নিম্নলিখিত একটি পদ্ধতির দ্বারা সেট করা যেতে পারে:

• নাম - 'নীল' এর মতো রঙের নাম উল্লেখ করুন। আপনি 'ব্ল্যানচেডআলমন্ড' এর মতো কিছু অভিনব রঙের বিকল্পও ব্যবহার করে দেখতে পারেন!
• হেক্স - '# ff0000' এর মতো একটি হেক্স মান উল্লেখ করুন
• আরজিবি - আরজিবি কোড সেট করুন। উদাহরণস্বরূপ, আরজিবি (255,255,0) এর অর্থ হলুদ।
• বিন্যাস - যেমন 'স্বচ্ছ' বা 'অস্বচ্ছ'

• সীমানার প্রশস্থতা বৈশিষ্ট্য:

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

প্রস্থটি স্ট্যান্ডার্ড ইউনিটে যেমন পিক্সেল (‘পিক্স’), পয়েন্ট (‘পিটি’) বা সেন্টিমিটারে (‘সেমি’) নির্দিষ্ট করা যায়। আপনি ‘মোটা’, ‘পাতলা’ এবং ‘মাঝারি’ এর পূর্বনির্ধারিত মানগুলি ব্যবহার করে প্রস্থও নির্দিষ্ট করতে পারেন।

• সীমানা ব্যাসার্ধ গুণ

ব্যাসার্ধ নির্ধারণের উদ্দেশ্য সীমানার জন্য বৃত্তাকার কোণগুলি পাওয়া। ব্যাসার্ধের গুণকটি বৃত্তাকারতার মাত্রা নির্ধারণ করে। মানটি বৃহত্তর, আরও বাঁকা কোণে পরিণত হয়। একটি আদর্শ অনুশীলন হিসাবে, ব্যাসার্ধের মানগুলি সীমানা প্রস্থের 1-3 গুনের মধ্যে রাখা হয়।

নিম্নলিখিত কোডটি উত্পন্ন করবে:

সীমানা প্রস্থ: 10px
সীমানা ব্যাসার্ধ: 30px

সীমানা বৈশিষ্ট্যের জন্য ডিফল্ট মান

• একমাত্র বাধ্যতামূলক গুণাবলী স্টাইল । শৈলী অনুপস্থিত থাকলে, সীমান্তটি প্রদর্শিত হবে না।

• যদি রঙটি নির্দিষ্ট না করা হয় তবে অন্তর্নিহিত উপাদান থেকে রঙটি ডিফল্ট মান হিসাবে নেওয়া হয়। উদাহরণস্বরূপ, যদি কোনও অনুচ্ছেদের পাঠ্য রঙকে ‘নীল’ হিসাবে সংজ্ঞায়িত করা হয়, তবে ডিফল্ট সীমানা-বর্ণটিও নীল হবে। এমনকি যদি উপাদানটির জন্য কোনও রঙ সংজ্ঞা না থাকে তবে ডিফল্ট রঙটি 'কালো'।

• প্রস্থের ডিফল্ট মান হ'ল 'মাঝারি'।

শর্টহ্যান্ডে সীমানা নির্ধারণ করুন

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

কিভাবে জাভা প্রোগ্রাম শেষ করতে

নিম্নলিখিত কোড ব্যবহার করা হয়:

সীমানা-শৈলী: ড্যাশড
সীমানা-রঙ: সবুজ
সীমানা প্রস্থ: 5px
সীমানা: ড্যাশড সবুজ 5px

সিএসএসে সীমানা ডিজাইনের সময় বিবেচনার জন্য পয়েন্টগুলি

• কোনও পৃষ্ঠায় খুব বেশি সীমানা ব্যবহার করবেন না, এটি বিভ্রান্তিকর হতে পারে এবং ব্যবহারকারীর ফোকাস করা কঠিন করে তুলতে পারে।

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

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

আশা করি সিএসএস সীমানায় আপনি যে তথ্যটি সন্ধান করছেন তা পেয়ে গেছেন এবং ডাব্লুএই সাথে, আমরা সিএসএস নিবন্ধে এই সীমানাগুলির শেষ করছি।

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

আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে 'সীমান্তে সীমান্ত' ব্লগের মন্তব্য বিভাগে এটি উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।