css_part12
প্রোপার্টির
কোডিং ছোট করে লেখা
Background Image প্রোপার্টিজ এর সাথে Valueগুলি পর পর বসিয়ে
ছোট করে দেওয়া যাবে। এজন্য সর্টিং অর্ডার হচ্ছে নিম্নরুপ
background color/
image
background repeat
background
attachment
background
position.
নিচের মত প্রোগ্রাম তৈরী করুন।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<head>
<title>CSS
background properties</title>
<style>
h1
{background-color:#6495ed;}
p{background-color:#e0ffff;}
div{background-color:#b0c4de;}
body
{background:#ff0000 url('My_Logo.jpg') no-repeat fixed center;
margin-right:50px;
}
</style>
</head>
<body>
<h1>Heading
with CSS background-image</h1>
<div>
This
is a div element with CSS background-image </div>
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
<p>This
is a paragraph with CSS background-image </p> <br />
This
is Normal Text.
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
এখন আমরা আগে তৈরী করে রাখা Profession Web পেজে নতুন কিছু কোডিং , ইমেজ ও টেক্সট সংযোগ করবো । নিচের মত প্রোগ্রাম
তৈরী করুন।
নিচের মত কোডিংসহ একটি ফাইল তৈরী করে Style031(mystyle_04).css নাম দিয়ে সেভ করুন।
/*
CSS Document */
body{background:#CCCCCC;}
#wrapper{width:850px;
height:900px;}
#head{background-image:url('top_bg.jpg');
background-repeat:repeat-x;
width:850px;
height:400px;
margin:0px;}
#logo{width:300px;
height:70px;
font-size:24px;
float:left;}
#menu{width:450px;
height:30px;
float:right;
font-size:24px;
margin-top:100px;}
#image{width:850px;
height:300px;}
#content{background-color:#00ff00;
width:850px;
height:400px;
border:2px solid #ff0000;}
#content_left{width:250px;
height:400px;
float:left;
font-size:24px;
border:2px solid #ff0000;}
#content_mid{width:338px;
height:400px;
float:left;
font-size:24px;
border:2px solid #ff0000;}
#content_right{width:250px;
height:400px;
float:right;
font-size:24px;
border:2px solid #ff0000;}
#footer{background-color:PowderBlue;
width:850px;
height:100px;
font-size:50px;
border:2px solid #ff0000;}
(MyIndex_04.html) Special Project
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>web
example</title>
<link
href="Style031(mystyle_04).css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div
id="wrapper">
<div
id="head">
<div
id="logo"> <img src = "Logo.jpg" height="75"
width="75" align="left"/> Nova Computer <br/>
<span style="color:blue; font-size:14px;"> Learn from
Beginning..... Don't late....late.. late.</span><br /> </div>
<div
id="menu">Menu Menu Menu </div>
<div
id="image"><img src="images/banner.jpg"
height="300"
width="850" align="left"/></div>
</div>
<div
id="content">
<div
id="content_left"> Left Bar. Look! here is some link. </div>
<div
id="content_mid">About Nova Computer, Main content here
</div>
<div
id="content_right">Right Bar. Look! here is some link.
</div>
</div>
<div
id="footer"> This is Footer </div>
</div>
</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...
Next_
