সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস আউটলাইন (outline)


সিএসএস আউটলাইন

সিএসএস outline প্রোপার্টির মাধ্যমে আউটলাইনের স্টাইল, কালার এবং প্রস্থ সেট করা হয়।

আউটলাইন হলো একটি লাইন যা একটি এলিমেন্টকে আলাদাভাবে উপস্থাপন করার জন্য এলিমেন্টের বর্ডারের বাহিরে আঁকা হয়।

যাইহোক, আউটলাইন প্রোপার্টি বর্ডার হতে ভিন্ন একটি প্রোপার্টি। আউটলাইন একটি এলিমেন্টের মার্জিনের অংশ নয় এবং আউটলাইনের প্রস্থের(width) মাধ্যমে এলিমেন্টের সম্পূর্ন দৈর্ঘ্য এবং প্রস্থের উপরে কোন প্রভাব পড়ে না।


এই এলিমেন্টটিতে একটি লাল সরু বর্ডার এবং 7px চওড়া সবুজ কালারের একটি ডট আউটলাইন সেট করা হয়েছে।



এক নজরে সিএসএস আউটলাইন প্রোপার্টিসমূহ

outline

একটি ডিক্লেয়ারেশনের মাধ্যমে আউটলাইনের সবগুলো প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি।

outline-style

আউটলাইনের স্টাইল সেট করার জন্য ব্যবহার করা হয়।

outline-width

আউটলাইনের প্রস্থ(width) সেট করার জন্য ব্যবহার করা হয়।

outline-color

আউটলাইনের কালার সেট করার জন্য ব্যবহার করা হয়।

outline-offset

একটি এলিমেন্টের আউটলাইন এবং বর্ডারের মাঝখানে স্পেস বা ফাঁকা রাখার জন্য এটি ব্যবহার করা হয়।



আউটলাইন স্টাইল

outline-style প্রোপার্টি দ্বারা আউটলাইনের স্টাইল নির্ধারণ করা হয়।

outline-style প্রোপার্টিতে নিচের ভ্যালুসমূহ ব্যবহার করা যায়ঃ

  • solid - একটি সলিড আউটলাইন নির্দেশ করে।
  • double - একটি ডাবল আউটলাইন নির্দেশ করে।
  • dotted - একটি ডটেড আউটলাইন নির্দেশ করে।
  • dashed - একটি ড্যাশ আউটলাইন নির্দেশ করে।
  • inset - একটি 3D inset আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
  • outset - একটি 3D outset আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
  • groove - একটি 3D groove আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
  • ridge - একটি 3D ridge আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
  • hidden - আউটলাইনকে হাইড করার জন্য ব্যবহার করা হয়।
  • none - কোন আউটলাইন না প্রদর্শনের জন্য ব্যবহার করা হয়।

এই উদাহরণে, প্রত্যেকটি <p> এলিমেন্টের চারপাশে একটি সরু কালো বর্ডার সেট করে, ভিন্ন ভিন্ন outline-style প্রোপার্টির ভ্যালুসমূহ সেট করে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {
    color: blue;
    background: white;
    border: 3px solid red;
    outline-color: blue;
  }
  p.dotted {outline-style: dotted;}
  p.dashed {outline-style: dashed;}
  p.solid {outline-style: solid;}
  p.double {outline-style: double;}
  p.groove {outline-style: groove;}
  p.ridge {outline-style: ridge;}
  p.inset {outline-style: inset;}
  p.outset {outline-style: outset;}
  </style>
</head>
<body>

  <h2>outline-style প্রোপার্টির ব্যবহার</h2>
  <p class="dotted">ডটেড আউটলাইন</p>
  <p class="dashed">dashed আউটলাইন</p>
  <p class="solid">সলিড আউটলাইন</p>
  <p class="double">ডাবল আউটলাইন</p>
  <p class="groove">groove আউটলাইন</p>
  <p class="ridge">ridge আউটলাইন</p>
  <p class="inset">inset আউটলাইন</p>
  <p class="outset">outset আউটলাইন</p>

</body>
</html>

ফলাফল





আউটলাইনের প্রস্থ(width)

আউটলাইনের প্রস্থ সেট করার জন্য outline-width প্রোপার্টিটি ব্যবহার করা হয়।

সিএসএসে প্রস্থ নির্ণয়ের বিভিন্ন একক যেমন- px, pt, cm, em ইত্যাদি ব্যবহার করে আউটলাইনের প্রস্থ সেট করা হয় অথবা পূর্ব নির্দিষ্ট ভ্যালু যেমনঃ- thin, medium এবং thick ইত্যাদি ব্যবহার করেও আউটলাইনের প্রস্থ সেট করা যায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {border: 4px solid green;}
  p.para1 {
    outline-style: solid;
    outline-color: royalblue;;
    outline-width: thick;
  }
  p.para2 {
    outline-style: solid;
    outline-color: red;
    outline-width: 4px;
  }
  </style>
</head>
<body>

  <h2>outline-width প্রোপার্টির ব্যবহার</h2>
  <p class="para1">প্রাকৃতিক সৌন্দর্যের দেশ বাংলাদেশ।</p>
  <p class="para2">প্রাকৃতিক সৌন্দর্যের দেশ বাংলাদেশ।</p>

</body>
</html>

ফলাফল





আউটলাইন কালার

আউটলাইনের কালার সেট করার জন্য outline-color প্রোপার্টিটি ব্যবহার করা হয়।

নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ

  • name - কালারের নাম ব্যবহার করে, যেমন "red"
  • Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন "#ff0000"
  • RGB - RGB ভ্যালু ব্যবহার করে, যেমন "rgb(255,0,0)"


উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {
    color: blue;
    border: 3px solid red;
    outline-style: solid;
    outline-color: black;
  }
  </style>
</head>
<body>

  <h1>outline-color প্রোপার্টির ব্যবহার</h1>
  <p>প্রাকৃতিক সৌন্দর্যের দেশ বাংলাদেশ।</p>

</body>
</html>

ফলাফল





আউটলাইন শর্টকাট প্রোপার্টি

আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, আউটলাইনের কিছু উপ-আউটলাইন প্রোপার্টি রয়েছে এবং এক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।

তাই কোড সংক্ষিপ্ত করার জন্য, একটি আউটলাইন প্রোপার্টির মধ্যে সবগুলো আউটলাইন প্রোপার্টি ব্যবহার করা হয়।

নিচের উপ-আউটলাইন প্রোপার্টিসমূহের শর্টকাট প্রোপার্টি হলো outline

  • outline-width
  • outline-style(আবশ্যক)
  • outline-color


উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {
    color: green;
    border: 3px solid blue;
    outline: 4px dotted brown;
  }
  </style>
</head>
<body>

  <h1>outline প্রোপার্টি</h1>
  <p>প্রাকৃতিক সৌন্দর্যের দেশ বাংলাদেশ।</p>

</body>
</html>

ফলাফল