সিএসএস
🌈সিএসএস কি?
📋সিএসএস হলো বৈশিষ্ট্য নির্দিষ্ট করার পদ্ধতি।
⚒️সিএসএস বৈশিষ্ট্য নির্দিষ্ট করতে ব্যবহৃত হয়।
সিএসএস সমূহ
সিএসএস এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ accent-color - ফর্ম অ্যাকসেন্টের রঙ নির্ধারণ করা
- ➡️ all - সমস্ত বৈশিষ্ট রিসেট করা
- ➡️ aspect-ratio - উচ্চতা এবং প্রস্থ অনুপাত নির্ধারণ করা
- ➡️ backdrop-filter - পেছনে ফিল্টার প্রয়োগ করা
- ➡️ backface-visibility - ত্রিমাত্রিক ঘোরানোর সময় নির্ধারণ করা
- ➡️ block-size - ব্লক আকার নির্ধারণ করা
- ➡️ position - অবস্থান নির্ধারণ করা
- ➡️ left - বাম পাশের অবস্থান নির্ধারণ করা
- ➡️ right - ডান অবস্থান নির্ধারণ করা
- ➡️ top - উপরের অবস্থান নির্ধারণ করা
- ➡️ bottom - নিচের অবস্থান নির্ধারণ করা
- ➡️ caption-side - ক্যাপশনের সাইড অবস্থান নির্ধারণ করা
- ➡️ caret-color - ক্যারটের রং নির্ধারণ করা
- ➡️ clear - উপাদানের প্রভাব মুক্ত করা
- ➡️ clip - উপাদানের ক্লিপ নির্ধারণ করা
- ➡️ clip-path - উপাদানর ক্লিপ পথ নির্ধারণ করা
- ➡️ color - রঙের মান নির্ধারণ করা
- ➡️ color-scheme - রঙের পরিকল্পনা নির্ধারণ করা
- ➡️ content - কন্টেন যুক্ত করা
- ➡️ cursor - কার্সর বৈশিষ্ট নির্ধারণ করা
- ➡️ direction - লেখার দিক নির্ধারণ করা
- ➡️ display - পদ্ধতি বৈশিষ্ট নির্ধারণ করা
- ➡️ empty-cells - খালি সেল স্টাইল যুক্ত করা
- ➡️ filter - ফিল্টার প্রয়োগ নির্ধারণ করা
- ➡️ float - ভাসমান অবস্থান নির্ধারণ করা
- ➡️ gap - সারি ও কলামের মধ্যবর্তী ফাঁক নির্ধারণ করা
- ➡️ height - উচ্চতা নির্ধারণ করা
- ➡️ image-rendering - ছবি রেন্ডার পদ্ধতি নির্ধারণ করা
- ➡️ initial-letter - অক্ষরের আকার নির্ধারণ করা
- ➡️ inline-size - ইনলাইনের আকার নির্ধারণ করা
- ➡️ isolation - স্ট্যাকিং কনটেক্সট পৃথক করার নিয়ম নির্ধারণ করা
- ➡️ letter-spacing - অক্ষরের দূরত্ব নির্ধারণ করা
- ➡️ line-height - লাইনের উচ্চতা নির্ধারণ করা
- ➡️ object-fit - অবজেক্ট সুনির্দিষ্ট করা
- ➡️ object-position - অবজেক্ট অবস্থান নির্ধারণ করা
- ➡️ opacity - স্বচ্ছতার মাত্রা নির্ধারণ করা
- ➡️ order - আইটেমের প্রদর্শনের ক্রম নির্ধারণ করা
- ➡️ orphans - পৃষ্ঠা বা কলামের শেষে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করা
- ➡️ paint-order - অঙ্কনের ক্রম নির্ধারণ করা
- ➡️ perspective - ত্রিমাত্রিক দৃষ্টিকোণ নির্ধারণ করা
- ➡️ perspective-origin - দৃষ্টিকোণের উৎসবিন্দু নির্ধারণ করা
- ➡️ pointer-events - পয়েন্টার ইভেন্টের আচরণ নির্ধারণ করা
- ➡️ quotes - উদ্ধৃতি চিহ্ন নির্ধারণ করা
- ➡️ resize - আকার পরিবর্তন নির্ধারণ করা
- ➡️ rotate - ঘূর্ণনের কোণ নির্ধারণ করা
- ➡️ row-gap - সারির মধ্যবর্তী ফাঁক নির্ধারণ করা
- ➡️ scale - আকার পরিবর্তনের অনুপাত নির্ধারণ করা
- ➡️ tab-size - ট্যাব অক্ষরের আকার নির্ধারণ করা
- ➡️ table-layout - টেবিলের বিন্যাস নির্ধারণ করা
- ➡️ translate - স্থানান্তরের মান নির্ধারণ করা
- ➡️ unicode-bidi - দ্বিমুখী লেখার নিয়ম নির্ধারণ করা
- ➡️ user-select - লেখা নির্বাচন করার নিয়ম নির্ধারণ করা
- ➡️ vertical-align - উল্লম্ব সারিবিন্যাস নির্ধারণ করা
- ➡️ visibility - দৃশ্যমানতা নির্ধারণ করা
- ➡️ white-space - সাদা স্থানের ব্যবহারের নিয়ম নির্ধারণ করা
- ➡️ widows - কলামের শুরুতে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করা
- ➡️ width - প্রস্থ নির্ধারণ করা
- ➡️ writing-mode - লেখার মোড নির্ধারণ করা
- ➡️ z-index - স্তরের ক্রম নির্ধারণ করা
- ➡️ zoom - জুম প্রদর্শনের মাত্রা নির্ধারণ করা
accent-color - ফর্ম অ্যাকসেন্টের রঙ নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
input {
accent-color: red;
}
</style>
</head>
<body>
<input type="checkbox" checked>
</body>
</html>
all - সমস্ত বৈশিষ্ট রিসেট করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
all: unset;
display: block;
padding: 20px;
background: lightblue;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
aspect-ratio - উচ্চতা এবং প্রস্থ অনুপাত নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
aspect-ratio: 16 / 9;
background: lightblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
backdrop-filter - পেছনে ফিল্টার প্রয়োগ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linear-gradient(45deg, pink, tomato);
}
div {
width: 250px;
padding: 30px;
background: rgb(255 255 255 / 30%);
backdrop-filter: blur(10px);
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
backface-visibility - ত্রিমাত্রিক ঘোরানোর সময় নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 100px;
background: lightblue;
transform: rotateY(180deg);
backface-visibility: hidden;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
block-size - ব্লক আকার নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
block-size: 150px;
background: lightblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
position - অবস্থান নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
width: 200px;
height: 100px;
background: lightblue;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
left - বাম পাশের অবস্থান নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
left: 50px;
width: 150px;
padding: 20px;
background: lightblue;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
right - ডান অবস্থান নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
right: 30px;
width: 150px;
padding: 20px;
background: lightblue;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
top - উপরের অবস্থান নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
top: 30px;
width: 150px;
padding: 20px;
background: lightblue;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
bottom - নিচের অবস্থান নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
bottom: 20px;
width: 150px;
padding: 20px;
background: lightblue;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
caption-side - ক্যাপশনের সাইড অবস্থান নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
caption {
caption-side: bottom;
}
</style>
</head>
<body>
<table border="1">
<caption>ব্যবহারকারীর তথ্য</caption>
<tr>
<th>নাম</th>
<th>দেশ</th>
</tr>
<tr>
<td>আরিফ</td>
<td>বাংলাদেশ</td>
</tr>
</table>
</body>
</html>
caret-color - ক্যারটের রং নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
input {
caret-color: red;
}
</style>
</head>
<body>
<input value="প্রোগ্রামিং শিখুন">
</body>
</html>
clear - উপাদানের প্রভাব মুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
width: 100px;
height: 100px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<img src="/images/author.jpg">
<p class="clear">প্রোগ্রামিং শিখুন</p>
</body>
</html>
clip - উপাদানের ক্লিপ নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: absolute;
width: 200px;
height: 100px;
background: lightblue;
clip: rect(0, 100px, 80px, 0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
clip-path - উপাদানর ক্লিপ পথ নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 50px;
background: lightblue;
clip-path: circle(50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
color - রঙের মান নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
color-scheme - রঙের পরিকল্পনা নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
html {
color-scheme: light dark;
}
</style>
</head>
<body>
<input placeholder="প্রোগ্রামিং শিখুন">
</body>
</html>
content - কন্টেন যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p::before {
content: "→ ";
}
</style>
</head>
<body>
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
cursor - কার্সর বৈশিষ্ট নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
button {
cursor: pointer;
}
</style>
</head>
<body>
<button>এইচটিএমএল</button>
</body>
</html>
direction - লেখার দিক নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p {
direction: rtl;
}
</style>
</head>
<body>
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
display - পদ্ধতি বৈশিষ্ট নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>প্রোগ্রামিং শিখুন</span>
<span>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</span>
</body>
</html>
empty-cells - খালি সেল স্টাইল যুক্ত করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
empty-cells: hide;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>নাম</th>
<th>দেশ</th>
</tr>
<tr>
<td>তানিম</td>
<td>সাকিব</td>
</tr>
<tr>
<td>জোহান</td>
<td></td>
</tr>
</table>
</body>
</html>
filter - ফিল্টার প্রয়োগ নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
img {
filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="/images/author.jpg" width="200">
</body>
</html>
float - ভাসমান অবস্থান নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
width: 100px;
margin-right: 10px;
}
</style>
</head>
<body>
<img src="/images/author.jpg">
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
gap - সারি ও কলামের মধ্যবর্তী ফাঁক নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
ul {
display: flex;
list-style: none;
gap: 20px;
}
</style>
</head>
<body>
<ul>
<li>পিএইচপি</li>
<li>জাভা</li>
<li>পাইথন</li>
<li>জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>
height - উচ্চতা নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
background: lightblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
image-rendering - ছবি রেন্ডার পদ্ধতি নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 300px;
image-rendering: pixelated;
}
</style>
</head>
<body>
<img src="/images/author.jpg">
</body>
</html>
initial-letter - অক্ষরের আকার নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
initial-letter: 3;
}
</style>
</head>
<body>
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
inline-size - ইনলাইনের আকার নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
inline-size: 250px;
background: lightblue;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
isolation - স্ট্যাকিং কনটেক্সট পৃথক করার নিয়ম নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
isolation: isolate;
background: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
letter-spacing - অক্ষরের দূরত্ব নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p {
letter-spacing: 5px;
}
</style>
</head>
<body>
<p>এইচটিএমএল</p>
</body>
</html>
line-height - লাইনের উচ্চতা নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p {
line-height: 2;
}
</style>
</head>
<body>
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
object-fit - অবজেক্ট সুনির্দিষ্ট করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 150px;
object-fit: cover;
}
</style>
</head>
<body>
<img src="/images/author.jpg">
</body>
</html>
object-position - অবজেক্ট অবস্থান নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 150px;
object-fit: cover;
object-position: right top;
}
</style>
</head>
<body>
<img src="/images/author.jpg">
</body>
</html>
opacity - স্বচ্ছতার মাত্রা নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div{
opacity: 0.5;
background: lightblue;
padding: 30px;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
order - আইটেমের প্রদর্শনের ক্রম নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
display: flex;
gap: 10px;
}
.css {
order: -1;
}
</style>
</head>
<body>
<ul>
<li>এইচটিএমএল</li>
<li class="css">সিএসএস</li>
</ul>
</body>
</html>
orphans - পৃষ্ঠা বা কলামের শেষে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p {
orphans: 3;
}
</style>
</head>
<body>
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
paint-order - অঙ্কনের ক্রম নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
-webkit-text-stroke: 3px blue;
paint-order: stroke fill;
}
</style>
</head>
<body>
<h1>সিএসএস</h1>
</body>
</html>
perspective - ত্রিমাত্রিক দৃষ্টিকোণ নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 300px;
}
.box {
width: 150px;
height: 100px;
background: lightblue;
transform: rotateY(30deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
perspective-origin - দৃষ্টিকোণের উৎসবিন্দু নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 300px;
perspective-origin: right top;
}
.box {
width: 150px;
height: 100px;
background: lightblue;
transform: rotateY(30deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
pointer-events - পয়েন্টার ইভেন্টের আচরণ নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
button {
pointer-events: none;
}
</style>
</head>
<body>
<button>সিএসএস</button>
</body>
</html>
quotes - উদ্ধৃতি চিহ্ন নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
q {
quotes: "«" "»";
}
</style>
</head>
<body>
<q>প্রোগ্রামিং শিখুন</q>
</body>
</html>
resize - আকার পরিবর্তন নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<textarea>প্রোগ্রামিং শিখুন</textarea>
</body>
</html>
rotate - ঘূর্ণনের কোণ নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
padding: 20px;
background: lightblue;
rotate: 40deg;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
row-gap - সারির মধ্যবর্তী ফাঁক নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
row-gap: 20px;
}
</style>
</head>
<body>
<div class="container">
<div>এইচটিএমএল</div>
<div>সিএসএস</div>
</div>
</body>
</html>
scale - আকার পরিবর্তনের অনুপাত নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
padding: 20px;
background: lightblue;
scale: 1.2;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
tab-size - ট্যাব অক্ষরের আকার নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
pre {
tab-size: 4;
}
</style>
</head>
<body>
<pre>এইচটিএমএল সিএসএস</pre>
</body>
</html>
table-layout - টেবিলের বিন্যাস নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 300px;
table-layout: fixed;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>এইচটিএমএল</td>
<td>সিএসএস</td>
</tr>
</table>
</body>
</html>
translate - স্থানান্তরের মান নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
padding: 20px;
background: lightblue;
translate: 30px 20px;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
unicode-bidi - দ্বিমুখী লেখার নিয়ম নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
user-select - লেখা নির্বাচন করার নিয়ম নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p {
user-select: none;
}
</style>
</head>
<body>
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
vertical-align - উল্লম্ব সারিবিন্যাস নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
span {
vertical-align: super;
}
</style>
</head>
<body>
<p>এইচটিএমএল<span>সিএসএস</span></p>
</body>
</html>
visibility - দৃশ্যমানতা নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
visibility: hidden;
}
</style>
</head>
<body>
<div>সিএসএস</div>
</body>
</html>
white-space - সাদা স্থানের ব্যবহারের নিয়ম নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
widows - কলামের শুরুতে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p {
widows: 3;
}
</style>
</head>
<body>
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
width - প্রস্থ নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
background: lightblue;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
writing-mode - লেখার মোড নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
p {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<p>প্রোগ্রামিং শিখুন</p>
</body>
</html>
z-index - স্তরের ক্রম নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
.tomato,
.orange {
position: absolute;
width: 100px;
height: 100px;
}
.tomato {
background: tomato;
z-index: 1;
}
.orange {
background: orange;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="tomato"></div>
<div class="orange"></div>
</body>
</html>
zoom - জুম প্রদর্শনের মাত্রা নির্ধারণ করার উদাহরণ।
<!DOCTYPE html>
<html>
<head>
<style>
div {
zoom: 1.5;
width: 150px;
padding: 20px;
background: lightblue;
}
</style>
</head>
<body>
<div>প্রোগ্রামিং শিখুন</div>
</body>
</html>
সিএসএস সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| accent-color | ফর্ম অ্যাকসেন্টের রঙ নির্ধারণ করতে ব্যবহৃত হয়। |
| all | সমস্ত বৈশিষ্ট রিসেট করতে ব্যবহৃত হয়। |
| aspect-ratio | উচ্চতা এবং প্রস্থ অনুপাত নির্ধারণ করতে ব্যবহৃত হয়। |
| backdrop-filter | পেছনে ফিল্টার প্রয়োগ করতে ব্যবহৃত হয়। |
| backface-visibility | ত্রিমাত্রিক ঘোরানোর সময় নির্ধারণ করতে ব্যবহৃত হয়। |
| block-size | ব্লক আকার নির্ধারণ করতে ব্যবহৃত হয়। |
| position | অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। |
| left | বাম পাশের অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। |
| right | ডান অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। |
| top | উপরের অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। |
| bottom | নিচের অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। |
| caption-side | ক্যাপশনের সাইড অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। |
| caret-color | ক্যারটের রং নির্ধারণ করতে ব্যবহৃত হয়। |
| clear | উপাদানের প্রভাব মুক্ত করতে ব্যবহৃত হয়। |
| clip | উপাদানের ক্লিপ নির্ধারণ করতে ব্যবহৃত হয়। |
| clip-path | উপাদানর ক্লিপ পথ নির্ধারণ করতে ব্যবহৃত হয়। |
| color | রঙের মান নির্ধারণ করতে ব্যবহৃত হয়। |
| color-scheme | রঙের পরিকল্পনা নির্ধারণ করতে ব্যবহৃত হয়। |
| content | কন্টেন যুক্ত করতে ব্যবহৃত হয়। |
| cursor | কার্সর বৈশিষ্ট নির্ধারণ করতে ব্যবহৃত হয়। |
| direction | লেখার দিক নির্ধারণ করতে ব্যবহৃত হয়। |
| display | পদ্ধতি বৈশিষ্ট নির্ধারণ করতে ব্যবহৃত হয়। |
| empty-cells | খালি সেল স্টাইল যুক্ত করতে ব্যবহৃত হয়। |
| filter | ফিল্টার প্রয়োগ নির্ধারণ করতে ব্যবহৃত হয়। |
| float | ভাসমান অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। |
| gap | সারি ও কলামের মধ্যবর্তী ফাঁক নির্ধারণ করতে ব্যবহৃত হয়। |
| height | উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়। |
| image-rendering | ছবি রেন্ডার পদ্ধতি নির্ধারণ করতে ব্যবহৃত হয়। |
| initial-letter | অক্ষরের আকার নির্ধারণ করতে ব্যবহৃত হয়। |
| inline-size | ইনলাইনের আকার নির্ধারণ করতে ব্যবহৃত হয়। |
| isolation | স্ট্যাকিং কনটেক্সট পৃথক করার নিয়ম নির্ধারণ করতে ব্যবহৃত হয়। |
| letter-spacing | অক্ষরের দূরত্ব নির্ধারণ করতে ব্যবহৃত হয়। |
| line-height | লাইনের উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়। |
| object-fit | অবজেক্ট সুনির্দিষ্ট করতে ব্যবহৃত হয়। |
| object-position | অবজেক্ট অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। |
| opacity | স্বচ্ছতার মাত্রা নির্ধারণ করতে ব্যবহৃত হয়। |
| order | আইটেমের প্রদর্শনের ক্রম নির্ধারণ করতে ব্যবহৃত হয়। |
| orphans | পৃষ্ঠা বা কলামের শেষে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করতে ব্যবহৃত হয়। |
| paint-order | অঙ্কনের ক্রম নির্ধারণ করতে ব্যবহৃত হয়। |
| perspective | ত্রিমাত্রিক দৃষ্টিকোণ নির্ধারণ করতে ব্যবহৃত হয়। |
| perspective-origin | দৃষ্টিকোণের উৎসবিন্দু নির্ধারণ করতে ব্যবহৃত হয়। |
| pointer-events | পয়েন্টার ইভেন্টের আচরণ নির্ধারণ করতে ব্যবহৃত হয়। |
| quotes | উদ্ধৃতি চিহ্ন নির্ধারণ করতে ব্যবহৃত হয়। |
| resize | আকার পরিবর্তন নির্ধারণ করতে ব্যবহৃত হয়। |
| rotate | ঘূর্ণনের কোণ নির্ধারণ করতে ব্যবহৃত হয়। |
| row-gap | সারির মধ্যবর্তী ফাঁক নির্ধারণ করতে ব্যবহৃত হয়। |
| scale | আকার পরিবর্তনের অনুপাত নির্ধারণ করতে ব্যবহৃত হয়। |
| tab-size | ট্যাব অক্ষরের আকার নির্ধারণ করতে ব্যবহৃত হয়। |
| table-layout | টেবিলের বিন্যাস নির্ধারণ করতে ব্যবহৃত হয়। |
| translate | স্থানান্তরের মান নির্ধারণ করতে ব্যবহৃত হয়। |
| unicode-bidi | দ্বিমুখী লেখার নিয়ম নির্ধারণ করতে ব্যবহৃত হয়। |
| user-select | লেখা নির্বাচন করার নিয়ম নির্ধারণ করতে ব্যবহৃত হয়। |
| vertical-align | উল্লম্ব সারিবিন্যাস নির্ধারণ করতে ব্যবহৃত হয়। |
| visibility | দৃশ্যমানতা নির্ধারণ করতে ব্যবহৃত হয়। |
| white-space | সাদা স্থানের ব্যবহারের নিয়ম নির্ধারণ করতে ব্যবহৃত হয়। |
| widows | কলামের শুরুতে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করতে ব্যবহৃত হয়। |
| width | প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়। |
| writing-mode | লেখার মোড নির্ধারণ করতে ব্যবহৃত হয়। |
| z-index | স্তরের ক্রম নির্ধারণ করতে ব্যবহৃত হয়। |
| zoom | জুম প্রদর্শনের মাত্রা নির্ধারণ করতে ব্যবহৃত হয়। |