বিফোর সিউডো ইলিমেন্ট (Before Pseudo element)| সি এস এস বাংলা টিউটোরিয়াল

বিফোর সিউডো ইলিমেন্ট (Before Pseudo element)

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

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
p{font-family:Arial, Helvetica, sans-serif;
background:#9CF;
border:#F39 5px solid;
padding:10px;}
p:before{
content:"About Tutohost-";
background-color:#900;
color:#FCC;
font-weight:bold;}
h2:before {content:url(http://tutohost.com/bangla/images/logo2.png);}</style>

</head>
<body >
<h2>www.tutohost.com.</h2>
<p>
www.tutohost.com.We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত