কোন কিছুতেই আমি স্থির থাকতে পারি না। একটি বিষয়ে অনেকদূর পর্যন্ত যাওয়ার প্রস্তুতি নিয়ে অর্ধেক পথে গিয়েই পথ অন্য পথে পা বাড়াই। চাকরী পরিবর্তন আর জায়গা পরিবর্তনের আবর্তে আমার টিউটরিয়ালের বিষয়েরও ঠিক ঠিকানা থাকে না। তবুও চেস্টা করবো সিএসএস নিয়ে ধারাবাহিকতা বজায় রাখতে। তবে সিএসএসএর প্রাথমিক আলোচনা আর কোড লেখার নিয়ম কানুনের উপর যে কয়টা কথা বলেছি তা কিন্তু জানতে হবে। সিএসএস দিয়ে খুবই সুন্দর ও মনমুগ্ধকর ব্যাগ্রাউন্ড ডিজাইন করা যায়। এরই কিছু নমুনা দেখবো। সেই সাথে দেখবো টাইপোগ্রাফির আরও কিছু রকমারি বাহারি ব্যবহার প্রনালী।
আমরা নিচের মতো করে কোন লেখার রঙের পরিবর্তন করতে চাইলে সিএসএস কোড লিখতে হবে তা দেয়া হলো:
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;}
এতক্ষন আমাদের সাথে থাকার জন্য ধন্যবাদ আশা করি আমার সব কয়টি টিউটরিয়াল দেখবেন আর মতামত দিবেন। এই টিউটরিয়ালটি এখান থেকে বাংলায় অনুবাদকৃত।
Pingback: ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা: সিএসএস টিউটরিয়াল-৩ « টিউটোরিয়াল
Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » সুন্দর সুন্দর বক্স
Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » বেশি কিছু না, সিএসএস
ইন্ডেন্টেশন
p {text-indent:50px;}
এটা সম্প্রর্কে যদি বিস্তারিত বলতেন , অনেক যায়গায় দেখেছি এর value -9999px বসানো হয়
Wow, superb blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is magnificent, let alone the content!. Thanks For Your article about বà§à¦¯à¦¾à¦—à§à¦°à¦¾à¦‰à¦¨à§à¦¡ ও টেকà§à¦¸à¦Ÿà§‡à¦° ডিজাইনে আনà§à¦¨ নতà§à¦¨ মাতà§à¦°à¦¾: সিà¦à¦¸à¦à¦¸ টিউটরিয়াল-৩ | টিউটোরিয়ালবিডি .