সিএসএস এর পার্ট- ২৪| প্রথম অক্ষর সিউডো ইলিমেন্ট


প্রথম অক্ষর সিউডো ইলিমেন্ট

আমরা বিভিন্ন দৈনিক পত্রিকা সহ অনেক জায়গায় দেখি যে, কোন প্যারাগ্রাফ এর ফার্স্ট ওয়ার্ডের ফার্স্ট ওয়ার্ড বিভিন্ন স্টাইল করা। কখনো হয়তবা বোল্ড বা ইটালিক বা একটু বড় ফন্ট সাইজের।

কোন প্যারাগ্রাফের বা হেডিং এর শুরুতে প্রথম অক্ষর অন্যান্য অক্ষর থেকে একটু ভিন্ন আকার, আকৃতি, রং এবং ডিজাইনে প্রদর্শন করার জন্য ফাস্ট লেটার সিউডো ইলিমেন্ট ব্যবহার করা হয়।

এজন্য ফাস্ট লেটার সিউডো ইলিমেন্ট সিলেক্টর ব্যবহার করতে হবে; p:first-letter এর অনুরূপ।

p এর স্থানে h1,h2,h3 সহ বিভিন্ন ট্যাগের নাম হতে পারে।

এটি সাধারণত নিচের মত হয়।

<head>
<style>
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
</style>
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
</style>
</head>
<body>

<p>এটা একটা বাক্য।</p>

</body>
</html>




প্রথম লাইন সিউডো ইলিমেন্ট

এটা সেই আগের প্রথম অক্ষর সিউডো ক্লাসের মতই। তবে এর মৌলিক পার্থক্য জল প্রথম অক্ষর সিউডো ক্লাস কোন প্যারাগ্রাফ এর প্রথম অক্ষরের জন্য হয়। আর এটা কোন প্যারাগ্রাফের শুরুতে প্রথম লাইন অন্যান্য লাইন থেকে একটু ভিন্ন আকার, আকৃতি, রং এবং ডিজাইনে প্রদর্শন করার জন্য ব্যবহার করা হয়।এজন্য ফাস্ট লাইন সিউডো ইলিমেন্ট সিলেক্টর ব্যবহার করতে হবে; p:first-line এর অনুরূপ।

এটি সাধারণত এমন হয় দেখতে।

<head>
<style>
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
</style>
</head>


উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text.</p>

</body>
</html>

বিফোর সিউডো ইলিমেন্ট

অনেক সময় কোন একটা পেজের সকল প্যারাগ্রাফের অথবা হেডিং এর শুরুতেই একই টেক্সট বা ইমেজ যুক্ত করার প্রয়োজন পরে এক্ষেত্রে বিফোর সিউডো ইলিমেন্ট ব্যবহার করা হয়।এজন্য বিফোর সিউডো ইলিমেন্ট এর সিলেক্টর ব্যবহার করতে হবে; p:before । এবং স্ট্যাইল সিটে আপনি যে লেখাটি দেখাতে চান তা content:"About Tutohost-"; এর অনুরূপভাবে ডিক্লারেশন করতে হবে। যদি ইমেজ প্রদর্শন করতে চান তাহলে h2:before {content:url(icon/box.png);} এর অনুরূপে স্ট্যাইল সিটে লেখতে হবে।


এটা সাধারণত এমন দেখতে হয়।

<head>
<style>
h1::before {
    content: url(smiley.gif);
}
</style>
</head>


উদাহরণ :-

<!DOCTYPE html>
<html>
<head>
<title>CS
<style>
h3::before {
    content: url(icon/box.png);
}
</style>
</head>
<body>

<h3>This is a heading</h3>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

</body>
</html>




আফটার সিউডো ইলিমেন্ট


অনেক সময় কোন একটা পেজের সকল প্যারাগ্রাফের অথবা হেডিং এর শেষে একই টেক্সট বা ইমেজ যুক্ত করার প্রয়োজন পরে এক্ষেত্রে আফটার সিউডো ইলিমেন্ট ব্যবহার করা হয়।এজন্য আফটার সিউডো ইলিমেন্ট এর সিলেক্টর ব্যবহার করতে হবে; p:after । এবং স্ট্যাইল সিটে আপনি যে লেখাটি দেখাতে চান তা content:"Thank You"; এর অনুরূপভাবে ডিক্লারেশন করতে হবে। যদি ইমেজ প্রদর্শন করতে চান তাহলে h2:after {content:url(icon/box.png);} অনুরূপে স্ট্যাইল সিটে লেখতে হবে।


এটা সাধারণত এমন দেখতে হয়।


<head>
<style>
h1::after {
    content: url(icon/box.png);
}
</style>
</head>

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>


<style>
h1::after {
    content: url(icon/box.png);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>

</body>
</html>


আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন। এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন



Comments

Popular posts from this blog

How to Show Your Posts on Google's First Page?

31 True Science Facts You Didn't Know...Until Now -

সৌরজগৎ এ প্রথম আন্তঃনাক্ষত্রিক গ্রহাণু