ফ্ল্যাক্স মডেল: CSS হাড়কোট

উপাদানের হাড়কোট (border) হল উপাদানের বিষয় এবং প্রত্যন্ততার চারপাশে একটি বা একাধিক লাইন

CSS border প্রতিশ্রুতি আপনাকে উপাদানের হাড়কোটের শৈলী, প্রস্থ এবং রঙ নির্ধারণ করতে দেয়

CSS বর্তন

HTML-এ, আমরা টেবিল ব্যবহার করে লেখার চারপাশে হাড়কোট তৈরি করি, কিন্তু CSS হাড়কোট প্রতিশ্রুতির মাধ্যমে, আমরা শুধুমাত্র শুভেচ্ছাসারণীর হাড়কোট তৈরি করতে পারি, এবং এটা কোনও উপাদানের উপরই প্রয়োগ করা যেতে পারে。

উপাদানের প্রত্যন্ততার ভিতরে হল উপাদানের হাড়কোট (border)。উপাদানের হাড়কোট হল উপাদানের বিষয় এবং প্রত্যন্ততার চারপাশে একটি বা একাধিক লাইন

প্রত্যেক হাড়কোট তিনটি দিক আছে: প্রস্থ, শৈলী এবং রঙ। নিচের অংশে, আমরা এই তিনটি দিককে বিস্তারিতভাবে ব্যাখ্যা করব।

হাড়কোট এবং প্রকৃতি

CSS নির্দেশ করে যে, হাড়কোট উপাদানের প্রকৃতির উপর প্রসারিত হয়। এটা খুবই গুরুত্বপূর্ণ, কারণ কিছু হাড়কোট 'অন্তর্বর্তী' (যেমন, পঙ্কটি হাড়কোট বা শুষ্কান্তর হাড়কোট) আছে, উপাদানের প্রকৃতি হাড়কোটের দেখা যাওয়া অংশের মধ্যে দেখানো হবে。

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

হাড়কোটের শৈলী

শৈলী হল হাড়কোটের সবচেয়ে গুরুত্বপূর্ণ পদক্ষেপ, এটা কারণ শৈলী হাড়কোটকে দেখাতে নিয়ন্ত্রণ করে (কিন্তু, শৈলী হাড়কোটকে দেখাতে নিয়ন্ত্রণ করে), কারণ যদি শৈলী না থাকলে, তবে কোনও হাড়কোট থাকবে না。

CSS-এর border-style প্রতিশ্রুতিপ্রত্যক্ষ ধরণ নয় এবং none নামক ১০টি ভিন্ন শৈলী নির্ধারণ করা হয়েছে。

যেমন, আপনি একটি ছবির হাড়কোটকে outset হিসাবে নির্ধারণ করতে পারেন, তারপর তা 'উঠোয়া বাটন' হিসাবে দেখানো হবে:

a:link img {border-style: outset;}

একাধিক শৈলী নির্ধারণ

আপনি একটি হাড়কোট কেবল একটি শৈলী নির্ধারণ করতে পারেন, যেমন:

p.aside {border-style: solid dotted dashed double;}

উপরের এই নিয়মটি ক্লাস নাম 'aside' এর পারা নির্ধারণ করেছে চারটি হাড়কোট শৈলী: সত্যান্তর উপরোক্ত হাড়কোট, পঙ্কটি ডানদিকের হাড়কোট, শুষ্কান্তর নিচের হাড়কোট এবং দ্বিগুণ ডানদিকের হাড়কোট。

আমরা আবার এখানে এই মান পরিবর্তন করেছি top-right-bottom-left ক্রম, এই ক্রম ব্যবহার করে একাধিক মান নির্ধারণ করার সময়ও দেখেছি。

একক পাশের শৈলী নির্ধারণ

আপনি যদি এলিমেন্ট বক্সের একটি পাশের হাড়কোট শৈলী নির্ধারণ করতে চান, না তবে চারটি পাশের হাড়কোট শৈলী নির্ধারণ করতে, নিচের একটি একক পাশের হাড়কোট শৈলী প্রতিশ্রুতি ব্যবহার করতে পারেন:

তাই, এই দুটি পদ্ধতি সমান:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

মন্তব্য:যদি আপনি দ্বিতীয়তা ব্যবহার করতে চান, তবে একক পাশের বৈশিষ্ট্যকে সংক্ষেপিত বৈশিষ্ট্যের পরে রাখতে হবে। কারণ যদি একক পাশের বৈশিষ্ট্যকে border-style পূর্বে রাখা হয়, তবে সংক্ষেপিত বৈশিষ্ট্যের মানটি একক পাশের মানকে মুক্তি দেবে none。

বর্ডার প্রশস্ততা

আপনি border-width বৈশিষ্ট্যবর্ডার প্রশস্ততা নির্ধারণ করুন。

বর্ডার প্রশস্ততা নির্ধারণ করার দুটি পদ্ধতি রয়েছে: আপনি দৈর্ঘ্য মান নির্ধারণ করতে পারেন, যেমন ২px বা ০.১em; বা ৩টি শব্দের একটি ব্যবহার করতে পারেন, যেগুলি thin 、medium (ডিফল্ট) এবং thick।

মন্তব্য：CSS ৩টি শব্দকে নির্দিষ্ট প্রশস্ততা নির্ধারণ করে না, তাই একটি ব্যবহারকারী প্রতিনিধি তিনটি শব্দকে thin 、medium (ডিফল্ট) এবং thick হিসাবে ৫px, ৩px এবং ২px হিসাবে সেট করতে পারে, আর আরেকটি ব্যবহারকারী প্রতিনিধি তিনটি শব্দকে ৩px, ২px এবং ১px হিসাবে সেট করতে পারে。

তাই, আমরা এভাবেই বর্ডার প্রশস্ততা সেট করতে পারি:

p {border-style: solid; border-width: 5px;}

বা:

p {border-style: solid; border-width: thick;}

একটি পাশের প্রশস্ততা নির্ধারণ

আপনি top-right-bottom-left ক্রমে প্রতিটি পাশের বর্ডার সেট করতে পারেন:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

উপরোক্ত উদাহরণটি এভাবেও সংক্ষেপ করা যেতে পারে (এই লেখাকেও সংক্ষেপ লেখাবলী বলা হয়):মূল্য কপি）：

p {border-style: solid; border-width: 15px 5px;}

আপনি নিম্নলিখিত বৈশিষ্ট্যের মাধ্যমেও বর্ডার প্রতিটি পাশের প্রশস্ততা সেট করতে পারেন:

তাই, নিচের নিয়মগুলি উপরের উদাহরণের সমতুল্য:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

বর্ডার নেই

আগের উদাহরণে, আপনি দেখলেছেন, যদি কোনও ধরণের বর্ডার দেখতে চান, তবে বর্ডার স্টাইল সেট করতে হবে, যেমন solid বা outset。

তাহলে যদি বর্ডার-স্টাইল নিনা হবে কী হবে:

p {border-style: none; border-width: 50px;}

যদি হাড়টির প্রশস্ততা ৫০পিক্সেল, কিন্তু হাড় শৈলী none হয়।এই ক্ষেত্রে, হাড়টির শৈলীটি গুম হয়ে যায়, তার পাশাপাশি, প্রশস্ততা ০ হয়।হাড়টি কেন গুম হয়?

এইজন্য যদি হাড় শৈলী none, যার মান হাড়টির প্রকৃত অস্তিত্ব নেই, তবে হাড়টির প্রশস্ততা স্বয়ংক্রিয়ভাবে ০ হয়, যেমন কোনও নির্দিষ্ট মান না থাকলেও。

এইটা খুবই গুরুত্বপূর্ণ দিক মনে রাখুন।ফ্যাক্ট হল যে, হাড় শৈলী ঘোষণা করা ভুল করা একটি সাধারণ ভুল।নিচের নিয়ম অনুযায়ী, সকল h1 এলাকাগুলির কোনও হাড় নেই, ২০ পিক্সেল প্রশস্ততার কথা বললেও না:

h1 {border-width: 20px;}

কারণ border-style এর ডিফল্ট মান none, যদি কোনও শৈলী ঘোষণা করা হয়নি, তবে border-style: none হবে।আরও, যদি আপনি হাড়টি দেখতে হয়, তবে একটি হাড় শৈলী ঘোষণা করতে হবে。

হাড় রঙ

হাড় রঙ নির্ধারণ করা খুবই সহজ।CSS একটি সরল border-color এসপেক্টএটি একবারে ৪টির বেশি রঙ মান গ্রহণ করতে পারে।

যে কোনও রঙের মান ব্যবহার করা যেতে পারে, যেমন নামকৃত রঙ, সবুজ এবং RGB মান:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

যদি রঙ মান ৪টির কম হোক, তবে মান কপি করা কার্যকর হবে।উদাহরণস্বরূপ, নিচের শেষনিয়াম একটি প্যারাগ্রাফের উপরের এবং নিচের হাড়টি নীল রঙের, বাম এবং ডানদিকের হাড়টি লাল রঙের হয়:

p {
  border-style: solid;
  border-color: blue red;
  }

মন্তব্য：ডিফল্ট হাড় রঙটি এলাকার প্রকৃত ফরেস্ট হয়।যদি হাড়কে কোনও রঙ ঘোষণা করা হয়নি, তবে হাড়টির টেক্সট রঙের সমান হবে।অন্যদিকে, যদি এলাকার কোনও টেক্সট না থাকে, যেমন একটি ট্যাবল, যার মধ্যে শুধুমাত্র ছবি আছে, তবে এই ট্যাবলের হাড় রঙটি তার প্রকৃত পারিতোষক এলাকার টেক্সট রঙের সমান হবে (কারণ color প্রকৃত পারিতোষক)।এই পারিতোষক এলাকাটি সম্ভবত body, div বা আরও একটি table হতে পারে。

একদিকের রঙ নির্দিষ্ট করা

আরও কিছু একদিকের হাড় রঙ এসপেক্টস রয়েছে।এগুলির মূল নীতি একদিকের শৈলী এবং প্রশস্ততা এসপেক্টসের সমান:

হৃদয়কে হৃদয়ের এলাকায় বৃত্তাকার আকারের হাড় হিসাবে তৈরি করতে হবে, আর ডানদিকের হাড়টিকে লাল রঙের হিসাবে তৈরি করতে হবে, এমনভাবে নির্দিষ্ট করতে হবে：

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

ট্রানসপারেন্ট হাড়

আমরা এখনও বলেছিলাম, যদি হাড় কোনও শৈলী না হোক, তবে কোনও প্রশস্ততা নেই।কিন্তু কিছু কিছু ক্ষেত্রে আপনি একটি অদৃশ্য হাড় তৈরি করতে চান।

CSS2 এ একটি ট্রানসপারেন্ট বর্ণমান প্রবর্তন করেছে।এই মানটি একটি প্রশস্ত অদৃশ্য হাড় তৈরির জন্য ব্যবহৃত হয়।দৃশ্যতঃ নিচের উদাহরণ দেখুন：

AAA
BBB
CCC

我们为上面的链接定义了如下样式：

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

亲自试一试

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

CSS 边框实例：

所有边框属性在一个声明之中
本例演示用简写属性来将所有四个边框属性设置于同一声明中。
চারটি সীমানার শৈলী নিয়ন্ত্রণ
চারটি সীমানার শৈলী নিয়ন্ত্রণ করার জন্য এই উদাহরণটি দিয়ে দেখানো হয়。
প্রত্যেক দিকের বিভিন্ন সীমানা নিয়ন্ত্রণ
প্রত্যেক দিকের বিভিন্ন সীমানার নিয়ন্ত্রণ করার জন্য এই উদাহরণটি দিয়ে দেখানো হয়。
সমস্ত সীমানার প্রশস্ততা উপাদানগুলি একই স্বীকৃতিতে
এই উদাহরণটি সমস্ত সীমানার প্রশস্ততা উপাদানকে একই স্বীকৃতিতে সংস্থান করার জন্য একটি সংক্ষিপ্ত বৈশিষ্ট্য ব্যবহার করে。
চারটি সীমানার রঙ নিয়ন্ত্রণ
চারটি সীমানার রঙ নিয়ন্ত্রণ করার জন্য এই উদাহরণটি দিয়ে দেখানো হয়। একটি থেকে চারটি রঙ নিয়ন্ত্রণ করা যায়。
সমস্ত নিচসীমার সীমানার উপাদানগুলি একই স্বীকৃতিতে
এই উদাহরণটি সমস্ত নিচসীমার সীমানার উপাদানকে একই স্বীকৃতিতে সংস্থান করার জন্য একটি সংক্ষিপ্ত বৈশিষ্ট্য ব্যবহার করে。
নিচসীমার সীমানার রঙ নিয়ন্ত্রণ
এই উদাহরণটি দিয়ে দেখানো হয় কিভাবে নিচসীমার সীমানার রঙ নিয়ন্ত্রণ করা যায়。
নিচসীমার সীমানার শৈলী নিয়ন্ত্রণ
এই উদাহরণটি দিয়ে দেখানো হয় কিভাবে নিচসীমার সীমানার শৈলী নিয়ন্ত্রণ করা যায়。
নিচসীমার সীমানার প্রশস্ততা নিয়ন্ত্রণ
এই উদাহরণটি দিয়ে দেখানো হয় কিভাবে নিচসীমার সীমানার প্রশস্ততা নিয়ন্ত্রণ করা যায়。
সমস্ত বামদিকের সীমানার উপাদানগুলি একই স্বীকৃতিতে
সমস্ত বামদিকের সীমানার উপাদানগুলি একই স্বীকৃতিতে
বামদিকের সীমানার রঙ নিয়ন্ত্রণ
এই উদাহরণটি দিয়ে দেখানো হয় কিভাবে বামদিকের সীমানার রঙ নিয়ন্ত্রণ করা যায়。
বামদিকের সীমানার শৈলী নিয়ন্ত্রণ
এই উদাহরণটি দিয়ে দেখানো হয় কিভাবে বামদিকের সীমানার শৈলী নিয়ন্ত্রণ করা যায়。
বামদিকের সীমানার প্রশস্ততা নিয়ন্ত্রণ
এই উদাহরণটি দিয়ে দেখানো হয় কিভাবে বামদিকের সীমানার প্রশস্ততা নিয়ন্ত্রণ করা যায়。
সমস্ত ডানদিকের সীমানার উপাদানগুলি একই স্বীকৃতিতে
এই উদাহরণটি সমস্ত ডানদিকের সীমানার উপাদানকে একই স্বীকৃতিতে সংস্থান করার জন্য একটি সংক্ষিপ্ত বৈশিষ্ট্য ব্যবহার করে。
ডানদিকের সীমানার রঙ নিয়ন্ত্রণ
এই উদাহরণটি দিয়ে দেখানো হয় কিভাবে ডানদিকের সীমানার রঙ নিয়ন্ত্রণ করা যায়。
ডানদিকের সীমানার শৈলী নিয়ন্ত্রণ
এই উদাহরণটি দিয়ে দেখানো হয় কিভাবে ডানদিকের সীমানার শৈলী নিয়ন্ত্রণ করা যায়。
ডানদিকের সীমানার প্রশস্ততা নিয়ন্ত্রণ
এই উদাহরণটি দিয়ে দেখানো হয় কিভাবে ডানদিকের সীমানার প্রশস্ততা নিয়ন্ত্রণ করা যায়。
সমস্ত উপরসীমার উপাদানগুলি একই স্বীকৃতিতে
এই উদাহরণটি সমস্ত উপরসীমার উপাদানকে একই স্বীকৃতিতে সংস্থান করার জন্য সংক্ষিপ্ত বৈশিষ্ট্য ব্যবহার করে দেখায়。
设置上边框的颜色
本例演示如何设置上边框的颜色。
উপরসীমার শৈলী সংযোজন করা
এই উদাহরণটি উপরসীমার শৈলী সংযোজন করার জন্য প্রদর্শন করে。
উপরসীমার প্রশস্ততা সংযোজন করা
এই উদাহরণটি উপরসীমার প্রশস্ততা সংযোজন করার জন্য প্রদর্শন করে。

CSS কিনারা বৈশিষ্ট্য

বৈশিষ্ট্য বর্ণনা
border সংক্ষিপ্ত বৈশিষ্ট্য, যা চারটি দিকের বৈশিষ্ট্যকে একটি বিবৃতিতে সংযোজন করতে ব্যবহৃত হয়。
border-style এলিমেন্টের সকল সীমান্তের শৈলী সংযোজন করতে ব্যবহৃত হয়, কিংবা পৃথকপৃথক সীমান্তের শৈলী সংযোজন করতে ব্যবহৃত হয়。
border-width সংক্ষিপ্ত বৈশিষ্ট্য, যা এলিমেন্টের সকল সীমান্তের প্রশস্ততা সংযোজন করতে ব্যবহৃত হয়, কিংবা পৃথকপৃথক সীমান্তের প্রশস্ততা সংযোজন করতে ব্যবহৃত হয়。
border-color সংক্ষিপ্ত বৈশিষ্ট্য, যা এলিমেন্টের সকল সীমান্তের দৃশ্যমান অংশের রঙ সংযোজন করতে ব্যবহৃত হয়, কিংবা ৪টি সীমান্তের জন্য পৃথকপৃথক রঙ সংযোজন করতে ব্যবহৃত হয়。
border-bottom সংক্ষিপ্ত বৈশিষ্ট্য, যা নিচেরসীমান্তের সকল বৈশিষ্ট্যকে একটি বিবৃতিতে সংযোজন করতে ব্যবহৃত হয়。
border-bottom-color এলিমেন্টের নিচেরসীমান্তের রঙ সংযোজন করুন。
border-bottom-style এলিমেন্টের নিচেরসীমান্তের শৈলী সংযোজন করুন。
border-bottom-width এলিমেন্টের নিচেরসীমান্তের প্রশস্ততা সংযোজন করুন。
border-left সংক্ষিপ্ত বৈশিষ্ট্য, যা ডানদিক সীমান্তের সকল বৈশিষ্ট্যকে একটি বিবৃতিতে সংযোজন করতে ব্যবহৃত হয়。
border-left-color এলিমেন্টের ডানদিক সীমান্তের রঙ সংযোজন করুন。
border-left-style এলিমেন্টের ডানদিক সীমান্তের শৈলী সংযোজন করুন。
border-left-width এলিমেন্টের ডানদিক সীমান্তের প্রশস্ততা সংযোজন করুন。
border-right সংক্ষিপ্ত বৈশিষ্ট্য, যা ডানদিক সীমান্তের সকল বৈশিষ্ট্যকে একটি বিবৃতিতে সংযোজন করতে ব্যবহৃত হয়。
border-right-color এলিমেন্টের ডানদিক সীমান্তের রঙ সংযোজন করুন。
border-right-style এলিমেন্টের ডানদিক সীমান্তের শৈলী সংযোজন করুন。
border-right-width এলিমেন্টের ডানদিক সীমান্তের প্রশস্ততা সংযোজন করুন。
border-top সংক্ষিপ্ত বৈশিষ্ট্য, যা উপরসীমার সকল বৈশিষ্ট্যকে একটি বিবৃতিতে সংযোজন করতে ব্যবহৃত হয়。
border-top-color এলিমেন্টের উপরসীমার রঙ সংযোজন করুন。
border-top-style এলিমেন্টের উপরসীমার শৈলী সংযোজন করুন。
border-top-width এলিমেন্টের উপরসীমার প্রশস্ততা সংযোজন করুন。