সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪

6
443

 

আজ আমি আবার ফিরে আসলাম আপনাদের মাঝে :) কারন আমি আপনাদের ছাড়া বেশি দিন দূরে থাকতে পারিনা :) আমি আজ আপনাদের কাছে নিয়ে আসলাম সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪ :) :) আমি জানি আপনারা আমার আগের পর্ব গুলো এতদিনে পড়ে ফেলেছেন । কি বলেন পড়েননি তাহলে এখনিই পড়ে নিন দেরি করবেন না কিন্তু কারন না পড়ে থাকলে আপনার বিশাল মিস হয়ে যাবে :) তাহলে দেখে নিন :) :) :)

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪:D :D :D :D সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব-১ :P :P :P :P

:D :D :D :D সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব-২ :P :P :P :P

:P :P :P :Pসহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব- ৩ :D :D :D :D

তাহলে এই বার সহজ বাংলায় সি এস এস/ CSS (CASCADING STYLE SHEET ) শিখুন : পর্ব- ৪ শুরু করা যাক কি বলেন ? আমার এই পর্ব শুরু করার আগে আমি আপনাদের কাছে একটি ছোট  অনুরোধ করবো ,আশা করি আপনারা আমার এই ছোট অনুরোধটি রাখার চেষ্টা করবেন ।অনুরোধটি হচ্ছে আমার টিউটোরিয়ালটি যদি কারো বুজতে সমস্যা হয় তাহলে একটু কষ্ট করে কমেন্ট করে জানাবেন ।আমি চেষ্টা করবো তাহার সমাধান দেয়ার :P ধন্যবাদ তাহলে শুরু করা যাক  :D :D :D

:) :) :) সি এস এস /C S S ব্যাক গ্রাউন্ড :) :) :)

>>>>ব্যাক গ্রাউন্ড কালার নির্ধারণ<<<<<

আমাদের এই পর্বের শিখার বিষয় হচ্ছে সি এস এস /C S S ব্যাক গ্রাউন্ড । সি এস এস  ব্যাক গ্রাউন্ড প্রোপার্টি গুলো  একটি এলিমেন্টের  ব্যাক গ্রাউন্ড ইফেক্ট নির্ধারণ করে । তাহলে দেখা যাক কিভাবে আমাদের ব্যাক গ্রাউন্ড ইফেক্ট নির্ধারণ করতে হবে। আপনারা নিশ্চয় এতদিন কালার প্রকাশ করেছেন কালারের নিদিষ্ট নাম দিয়ে এখন থেকে আপনি ইচ্ছা করেলে কালার প্রকাশ করতে পারবেন কোড এর মাধ্যমে ।কালার কোডে প্রকাশের আগে অবশ্যই আমাদের জানতে হবে কোন কালারের কি কোড । এজন্য আপনাদের আমিও একটি দিচ্ছি আপনারা একটু কষ্ট করে লিংকে ঢুকে কোডটি দেখে নিন >>>>>>>>>>>>

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪…………… ওয়েব সাইড লিংক……………

আসুন তাহলে আজ আমরা আমাদের ক্লাস শুরু করি :-

  • নোটপ্যাড খুলুন :)
  • নিচের মত করে কোড গুলো লিখুন :)

<html>
           <head>
                    <style type=”text/css”>
                            body
                                       {
                                       background-color:#B8860B;
                                        }
                                       h1
                                      {
                                       background-color:#5F9EA0;
                                       }
                                      p
                                     {
                                     background-color:#808080;
                                     }

                 </style>
           </head>

                       <body>

                                  <h1>IslamForUniverse.com</h1>
                                 <p>Mohammod Ikhtiar Hossain</p>

                      </body>

</html>

  • ফাইলটি আপনার নিজস্ব একটি নাম দিয়ে সেভ করুন অবশ্যই মনে রাখবেন নামের শেষে অবশ্যই .html লিখবেন ।
  • এই বার ফাইলটি খুলুন । নিচের মত ফলাফল দেখতে পারবেন ।ব্যাক গ্রাউন্ড কালার হবে DarkGoldenRod এবং হেডিং কালার হচ্ছে CadetBlueআর প্যারাগ্রাফ কালার হচ্ছে Grey

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪

>>>>>>>>> কোন ইমেজকে ব্যাক গ্রাউন্ড হিসেবে নির্ধারণ <<<<<<<<<<

আপনারা তো বুজতেই পারছেন আমি এখন আপনাদের দেখাব কিভাবে ইমেজকে ব্যাক গ্রাউন্ড ইমেজ হিসেবে  নির্ধারণ করবেন  । তাহলে দেরি কেন শুরু করে দেয়া যাক …

 

  • প্রথমেই নোট প্যাড ওপেন করুন
  • নিচের মত করে কোড লিখুন

<html>
           <head>
                    <style type=”text/css”>
                           body
                                     {
                                     background-image:url(‘534987_3268625511805_1152354651_32686274_1601375275_n.jpg’);
                                      }
                   </style>
           </head>

                        <body>
                                  <h1> TUNER PAGE </h1>
                        </body>
</html>

  • এই বার ফাইলটি আপনার নির্দিষ্ট একটি নামে সেভ করুন অবশ্যই মনে রাখবেন যে নামের শেষে .html যুক্ত করবেন
  • আমি এখানে আমার পছন্দের একটি ইমেজ ব্যবহার করেছি । আপনি ইচ্ছা করলে আপনার নিজের পছন্দের একটি ছবি ব্যবহার করতে পারবেন । ছবিটি নির্ধারণ করতে হলে প্রথমে আপনার ছবিটির প্রপার্টি তে প্রবেশ করতে হবে সেখান থেকে আপনি আপনার ছবিটির নাম নিতে হবে ।অতপর নামটির সাথে আপনি ছবিটির নিদিষ্ট ফরমেট যুক্ত করে দিতে হবে তাহলে আপনার কাজ শেষ ।
  • একটি কথা অবশ্যই মনে রাখবেন যে HTML ফাইল এবং আপনার সিলেক্ট করা ছবিটি একই ফোল্ডারে রাখতে হবে ।নাহলে কিন্তু আপনার পরিশ্রম পণ্ড শ্রম হিসেবে দাঁড়াবে ।
  • মনে  রাখবেন একটি কথা আমার সিলেক্ট করা ইমেজ টি ছোট ছিল তাই এটি অনেক বার দেখা যাচ্ছে আপনার ইমেজটির আকৃতি যদি বড় হয়ে থাকে তাহলে আপনারটিতে মাত্র একবারই ইমেজ টি আসবে ।

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪

 

>>>>ব্যাকগ্রাউন্ড ইমেজ কে ভার্টিক্যাল রিপিট করা <<<
  • নোটপ্যাড খুলুন
  • তাতে কোড লিখুন
<html>
 <head>
 <style type="text/css">
 body
 {
 background-image:url('course-escargot-image-maternelle-poesie.jpg');
 background-repeat:repeat-y;
 }
 </style>
 </head>

 <body>
 <h1>TUNER PAGE </h1>
 </body>

</html>
  • ফাইলটি ঠিক আগের নিয়মেই সেভ করুন
  • দেখুন তো নিচের মত ফলাফল দেখতে পারছেন কিনা ?
  • সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪
  •  আপানার ব্যাকগ্রাউন্ড ইমেজটি একটি নির্দিষ্ট পাশে অবস্থান করবে ।
>>>>>>ব্যাকগ্রাউন্ড  ইমেজকে হরাইজন্টালি রিপিট করা <<<<<<<<
  • নোটপ্যাড খুলুন
  • নিচের কোড লিখুন
<html>
 <head>
 <style type="text/css">
 body
 {
 background-image:url('534987_3268625511805_1152354651_32686274_1601375275_n.jpg');
 background-repeat:repeat-x;
 }
 </style>
 </head>

 <body>
 <h1>TUNER PAGE </h1>
 </body>
</html>
  • আপনি আপনার নিদিষ্ট নামে সেভ করুন ঠিক আগের নিয়মে
  • দেখুন নিচের মত দেখা যাচ্ছে কিনা :)
সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪>>>>>>ব্যাকগ্রাউন্ড ইমেজকে শুধু একবার প্রদর্শন  করা এবং একটি নির্দিষ্ট স্থানে স্থাপন করা <<<<<<
  • নোটপ্যাড খুলুন
  • নিচের কোড গুলো লিখুন

<html>

           <head>

                        <style type=”text/css”>
                                body
                                    {
                                       background-image:url(‘Zeus–greek-mythology-687267_1024_768.jpg’);
                                       background-repeat:no-repeat;
                                      background-position:left top;

                                     }
                       </style>

              </head>

                                 <body>
                    <h1>TUNER PAGE</h1>
                    <p>MOHA PLABON</p>
                             </body>

</html>

  • আপনারা ইচ্ছা করলে আমার মত সাজিয়ে নিতে পারেন বুঝার সুবিধার জন্য । আমি আমার  ইমেজটি LEFT এ দিয়েছি আপনি ইচ্ছা করলে আপনার ইমেজটি সেন্টার কিংবা রাইটে দিতে পারেন । দেখুনতো আপনার ইমেজটি আমার ইমেজের মত হয়েছে কিনা :)

 

 সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪

 

>>>>>> পিক্সেল ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজের পজিশন নির্ধারণ <<<<<<
  • নোটপ্যাড খুলুন :)
  • নিচের কোড গুলো লিখুন :)

<html>
               <head>

                           <style type=”text/css”>
                                         body
                                                  {
                                                   background-image:url(‘facebook image.jpg’);
                                                   background-repeat:no-repeat;

                                                    background-attachment:fixed;
                                                   background-position:20px 40px;
                                                   }
                         </style>

                </head>

                                      <body>
                                               <h1>TUNER PAGE</h1>
                                               <p>TJ JIBON(DT).</p>

                                      </body>

</html>

  • এই বার ফাইলটি আপনার নিদিষ্ট একটি নামে সেভ করুন :)
  • একটি কথা অবশ্যই মনে রাখবেন যে  background attachment শুধু মাত্র মজিলা এবং অপেরার fixed background হিসেবে কাজ করবে । আপনি কিন্তু ইচ্ছা করলে পজিশনের পিক্সেলের হার কমিয়ে বাড়িয়ে পজিশনের পরিবর্তন আনতে পারেন ।
  • এই বার দেখুন আপনারটি ইমেজটি সঠিক হয়েছে :)

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪:) :) :) :) :) :) :P :P :P :P :P :P :D :D :D :D :D :D :D

            আজ আপনাদের জন্য এই পর্যন্তই ।আপনাদের সকলকে অসংখ্য ধন্যবাদ আপনাদের এতক্ষণ মুল্যবান সময় আমার সাথে কাটানোর জন্য ।

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪

 

 

 

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

6 মন্তব্য

  1. বরাবরের মত চমৎকার পোষ্ঠ । চালাই জান , আপনাকে ধন্যবাদ।

  2. osadharon. . . . . . .bhai apnar tutorial to tp fataya dibo. . . .:-P. . . .keep it up. .brother

  3. আমার বুঝতে একটুও কষ্ট হইনাই । আপনি ধারাবাহিক টিউন টা চালাই জান , আপনাকে ধন্যবাদ।

  4. ভাই অসাধারণ একটি পোস্ট । আপনাকে অনেক ধন্যবাদ । আপনাদের মত কিছু মহৎ লোক তাদের মূল্ল্যবান সময় আমাদের সেখানর কাজে বেয় করছেন এজন্ন্য আমি খুবিই খুশি। আপনাদের অবদান ভাষায় প্রকাশ করতে পারবনা।

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

five × 5 =