Author Topic: Background and text design bring a new dimension: CSS  (Read 7687 times)

bbasujon

  • Administrator
  • VIP Member
  • *****
  • Posts: 1827
  • I want to show my performance at any where
    • View Profile
    • Higher Education
Background and text design bring a new dimension: CSS
« on: January 11, 2012, 06:55:30 AM »
ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা: সিএসএস



h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}

সম্পূর্ণ কোড হবে নিচের মতো করে:

<html>
<head>
<style type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has it's own background color.</p>
We are still in the div element.
</div>

</body>
</html>

ব্যাগ্রাউন্ডে কোন ছবি ব্যবহার করতে চাইলে

body {background-image:url(‘paper.gif’);}
আপনি চাইলে ছবিটি (নিচের মতো ) ডানে, বামে বা মাঝে রাখতে পারেন।


ডানে

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:top right;
}
নিচে

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}
নিচের টেবিলে ব্যাগ্রাউন্ডের প্রপারটিগুলো এক নজরে দেখে নিন।
Property    Description    Values    CSS
background    Sets all the background properties in one declaration    background-color
background-image
background-repeat background-attachment background-position
inherit    1
background-attachment    Sets whether a background image is fixed or scrolls with the rest of the page    scroll
fixed
inherit    1
background-color    Sets the background color of an element    color-rgb
color-hex
color-name
transparent
inherit    1
background-image    Sets the background image for an element    url(URL)
none
inherit    1
background-position    Sets the starting position of a background image    top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
inherit    1
background-repeat    Sets if/how a background image will be repeated    repeat
repeat-x
repeat-y
no-repeat
inherit
এবার আমরা দেখবো লেখার সৌন্দর্য বৃদ্ধির পদ্ধতি
টেক্সট এলাইনমেন্ট:

h1 {text-align:center;} /* মাঝ বরাবর */
p.date {text-align:right;} /* ডানে*/
p.main {text-align:justify;} /*জাস্টিফাইড*/
টেক্সট ডেকোরেশন

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
ইন্ডেন্টেশন

p {text-indent:50px;}
বড়/ছোট হাতের লেখা করতে চাইলে

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Acquire the knowledge and share the knowledge so that knowing,learning then sharing - all are the collection