Delete
Do Record
Setting
Add New Item
Menu List
| Title | Content Type | Order | Action | ||||||
|---|---|---|---|---|---|---|---|---|---|
| {{kb_content.name}} {{kb_content.name}} | {{setValue(content_types, kb_content.content_type)}} | {{kb_content.sort_order}} | Preview Edit Edit Content | ||||||
| {{kb_content.name}} | {{setValue(content_types, kb_content.content_type)}} | {{kb_content.sort_order}} | Preview Edit Edit Content | ||||||
| No record | |||||||||
Status: published
Programming, Software and application
2020-10-03 12:17:22
CSS - Lists
247
সিএসএস একটি সহজ এবং সহজ উপায়ে ওয়েব ডকুমেন্টের স্টাইল নিয়ন্ত্রণ করতে ব্যবহৃত হয়। সিএসএস হ'ল "ক্যাসকেডিং স্টাইল শীট" এর সংক্ষিপ্ত রূপ। এই টিউটোরিয়ালটি সিএসএস 1, সিএসএস 2 এবং সিএসএস 3 উভয় সংস্করণকে কভার করে এবং সিএসএসের সম্পূর্ণ ধারণা দেয়, এটির প্রাথমিক থেকে শুরু করে উন্নত ধারণাগুলি পর্যন্ত
এই কোর্সে যা থাকছে
৩টি বিষয়
৮০টি লাইভ ক্লাস
তালিকাভুক্ত বা বুলেট পয়েন্টের একটি সেট জানাতে খুব সহায়ক। এই অধ্যায়ে আপনাকে সিএসএস ব্যবহার করে তালিকার ধরণ, অবস্থান, স্টাইল ইত্যাদি নিয়ন্ত্রণ করতে শেখায়।
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>