css_part40
Focus – pseudo-code এর ব্যবহার
সাধারন Input জাতীয় বক্সের
জন্য এই কোড ব্যাহার করা হয়। নিচের মত প্রোগ্রাম লিখুন। এখন Input বক্সে (Name বা email বা passward)
কিছু লিখতে গেলে focus এর color আসবে।
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<html>
<head><title> CSS Pseudo class
and element </title>
<style>
input:focus{color:red;}
</style>
</head>
<body>
<form>
Name or Email: <input
type="text"/><br>
Password: <input
type="password" /><br>
<input type="submit"
value="Submit" />
</form>
</body>
</html>
ব্রাউজার দিয়ে
খুললে নিচের মত ফলাফল পাওয়া যাবে।
First-line সুডো এলিমেন্টের ব্যবহার
এটি পেজের প্রথম লাইনে বিশেষ ইফেক্ট দিবে। যদি ব্রাউজার ডান দিকে ছোট/বড়
করেন তবে প্রথম লাইনের Text কম/বেশী হবে
কিন্তু শুধুমাত্র সে টুকুতেই অ্যাসাইন করা value দেখাবে।
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title> CSS Pseudo class and element
</title>
<style>
p:first-line{color:#ff0000;font-size:40px;}
</style></head>
<body>
<p>This is sample text with
first-line pseudo code.This is sample text with first-line pseudo code.This is
sample text with first-line pseudo code.</p>
</body>
</html>
ব্রাউজার দিয়ে
খুললে নিচের মত ফলাফল পাওয়া যাবে।
first- line সুডো এলিমেন্ট যে সমসত্ম প্রোপার্টিজ গুলি
ব্যবহার করা যাবে সে গুলি হচ্ছে first,
color, background, word-spacing, letter-spicing, text-decoration,
Vertical-align, text- transform, line-height, clear.
First- letter সুডো এলিমেন্টের ব্যবহার
এটির দ্বারা লাইনের প্রথম letterকে আলাদা ইফেক্ট দেওয়া যায়। first- letter এলিমেন্ট যে প্রোপার্টিজগুলি সার্পোট করে সেগুলি হচ্ছে font-family, color, background,
margin, padding, border, text- decoration, vertical-align (if float is none)
text- transform, line-height, float: clear। নিচের প্রোগ্রাম লক্ষ্য
করুন।
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title> CSS Pseudo class and element
</title>
<style>
p:first-letter{color:#ff0000;font-size:48px;}
</style>
</head>
<body>
<p>This is sample text with
first-letter pseudo code.This is sample text with first-letter pseudo code.This
is sample text with first-letter pseudo code.</p>
</body>
</html>
ব্রাউজার দিয়ে
খুললে নিচের মত ফলাফল পাওয়া যাবে।
একসাথে একাধিক
সুডো এলিমেন্ট এর ব্যবহার
এখন আমরা first–letter ও
first–line এই ২ টা সুডো এলিমেন্ট
একসাথে ব্যবহার করবো। নিচের প্রোগ্রাম লক্ষ্য করুন।
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head><title> CSS Pseudo class
and element </title>
<style>
p:first-letter{color:#ff0000;font-size:48px;}
p:first-line
{color:#0000ff;font-size:30px;}
</style>
</head>
<body>
<p>This is sample text with
first-letter and first-line pseudo code.This is sample text with first-letter
and first-line pseudo code.This is sample text with first-letter and first-line
pseudo code.</p>
</body>
</html>
ব্রাউজার দিয়ে
খুললে নিচের মত ফলাফল পাওয়া যাবে।
Before সুডো এলিমেন্টের ব্যবহার
এটির দ্বারা অরিজিন্যাল এলিমেন্টের কনটেন্ট এর আগে কিছু কনটেন্ট বসিছে দেয়।
আমরা আমাদের প্রোগ্রামে একটি ইমেজ বসিয়ে দিয়েছি
এবং <h1> ট্যাগ ব্যবহার
করেছি । নিচের প্রোগ্রাম লক্ষ্য করুন।
<!DOCTYPE html>
<html>
<head><title> CSS Pseudo class
and element </title>
<style>
h1:before {content:url(nav_button.gif);}
</style></head>
<body>
<h1>This is sample text.</h1>
<h1>This is sample text.</h1>
</body></html>
ব্রাউজার দিয়ে
খুললে নিচের মত ফলাফল পাওয়া যাবে।
After সুডো এলিমেন্টের ব্যবহার
এটির দ্বারা before এর ঠিক উল্টো কাজ
হয়। এলিমেন্টের অরিজিন্যাল কনটেন্টর পরে কিছু কনটেন্ট বয়িছে দেয়। আমরা এই
প্রোগ্রামে আগের ইমেজটিই ব্যবহার করেছি । নিচের প্রোগ্রাম লক্ষ্য করুন।
Program_CSS137
<!DOCTYPE html>
<html>
<head><title> CSS Pseudo class
and element </title>
<style>
h1:after{content:url(nav_button.gif);}
</style></head>
<body>
<h1>This is sample text.</h1>
<h1>This is sample text.</h1>
</body></html>ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
RELATED POST LINKS BELOW ********************************************
Next_
