There is no item in the cart. If you want to buy, Please click here.
সিএসএস(CSS) টিউটোরিয়াল
তালিকাভুক্ত বা বুলেট পয়েন্টের একটি সেট জানাতে খুব সহায়ক। এই অধ্যায়ে আপনাকে সিএসএস ব্যবহার করে তালিকার ধরণ, অবস্থান, স্টাইল ইত্যাদি নিয়ন্ত্রণ করতে শেখায়।
1.তালিকা-শৈলীর ধরণের সম্পত্তি
তালিকা-শৈলীর ধরণের বৈশিষ্ট্যটি আপনাকে আদেশবিহীন তালিকার ক্ষেত্রে এবং বুলেট পয়েন্টের আকার বা শৈলী (চিহ্নিতকারী হিসাবেও পরিচিত) এবং আদেশযুক্ত তালিকায় অক্ষরের সংখ্যা নির্ধারণের শৈলীর নিয়ন্ত্রণ করতে দেয়
উদাহরনঃ
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
2.তালিকা-শৈলী-অবস্থানের সম্পত্তি
তালিকা-শৈলী-অবস্থানের বৈশিষ্ট্যটি চিহ্নিত করে যে বুলেট পয়েন্টগুলি সম্বলিত বাক্সের ভিতরে বা বাইরে চিহ্নিতকারী উপস্থিত হওয়া উচিত। এটির দুটি মান থাকতে পারে
উদাহরনঃ
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
3.তালিকা-শৈলী-চিত্র সম্পত্তি
তালিকা-শৈলী-চিত্র আপনাকে একটি চিত্র নির্দিষ্ট করতে দেয় যাতে আপনি নিজের বুলেট শৈলীটি ব্যবহার করতে পারেন। সিনট্যাক্স হ'ল ইউআরএল পরে বন্ধনীতে থাকা সম্পত্তিটির মান শুরু হওয়া অক্ষর url সহ পটভূমি-চিত্রের বৈশিষ্ট্যের সাথে সমান। যদি এটি প্রদত্ত চিত্রটি না খুঁজে পায় তবে ডিফল্ট বুলেটগুলি ব্যবহৃত হয়।
উদাহরনঃ
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
4.তালিকা-শৈলীর সম্পত্তি
তালিকা-শৈলী আপনাকে সমস্ত তালিকা বৈশিষ্ট্যকে একক অভিব্যক্তিতে নির্দিষ্ট করতে দেয়। এই বৈশিষ্ট্যগুলি যে কোনও ক্রমে উপস্থিত হতে পারে।
উদাহরনঃ
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
5.চিহ্নিতকারী অফসেট সম্পত্তি
চিহ্নিতকারী-অফসেট সম্পত্তি আপনাকে চিহ্নিতকারী এবং সেই চিহ্নিতকারী সম্পর্কিত টেক্সটের মধ্যে দূরত্ব নির্দিষ্ট করতে দেয়। নিম্নলিখিত মান হিসাবে এটির মান দৈর্ঘ্য হওয়া উচিত
উদাহরনঃ
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
