There is no item in the cart. If you want to buy, Please click here.
সিএসএস(CSS) টিউটোরিয়াল
সীমানা বৈশিষ্ট্যগুলি আপনাকে কোনও উপাদানটির প্রতিনিধিত্বকারী বাক্সের সীমানাটি কীভাবে দেখা উচিত তা নির্দিষ্ট করতে দেয়। আপনি পরিবর্তন করতে পারেন এমন একটি সীমানার তিনটি বৈশিষ্ট্য রয়েছে -
সীমানা বর্ণের সম্পত্তি
সীমানা বর্ণের বৈশিষ্ট্য আপনাকে কোনও উপাদানকে ঘিরে সীমানার রঙ পরিবর্তন করতে দেয়। বৈশিষ্ট্যগুলি ব্যবহার করে আপনি পৃথকভাবে কোনও উপাদানের সীমানার নীচে, বাম, উপরে এবং ডান দিকগুলির রঙ পরিবর্তন করতে পারেন -
উদাহরনঃ
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>
সীমানা-শৈলীর সম্পত্তি
সীমানা-শৈলীর বৈশিষ্ট্য আপনাকে সীমান্তের নিম্নলিখিত শৈলীর একটি নির্বাচন করতে দেয় -
আপনি নীচের বৈশিষ্ট্যগুলি ব্যবহার করে কোনও উপাদানটির নীচে, বাম, শীর্ষ এবং ডান সীমানার স্বতন্ত্রভাবে পরিবর্তন করতে পারেন -
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>
সীমানা প্রস্থের সম্পত্তি
সীমানা-প্রস্থের সম্পত্তি আপনাকে একটি মৌলিক সীমানার প্রস্থ নির্ধারণ করতে দেয়। এই সম্পত্তিটির মান হয় px, pt বা সেমি দৈর্ঘ্যের হতে পারে বা এটি পাতলা, মাঝারি বা ঘনতে সেট করা উচিত।
নীচের বৈশিষ্ট্যগুলি ব্যবহার করে আপনি পৃথকভাবে একটি উপাদানের নীচে, শীর্ষ, বাম এবং ডান সীমানার প্রস্থ পরিবর্তন করতে পারেন -
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>
শর্টহ্যান্ড ব্যবহার করে সীমান্তের সম্পত্তি
সীমানা সম্পত্তি আপনাকে একটি বৈশিষ্ট্যে রঙ, স্টাইল এবং রেখার প্রস্থ নির্দিষ্ট করতে দেয় -
নিম্নলিখিত উদাহরণটি দেখায় যে কীভাবে তিনটি বৈশিষ্ট্যকে একক সম্পত্তি হিসাবে ব্যবহার করতে হয়। এটি যে কোনও উপাদানকে ঘিরে সীমানা নির্ধারণ করতে সবচেয়ে বেশি ব্যবহৃত হয়।
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>
