Module‌‌ ‌‌5.5 ‌‌এ‌‌ ‌‌আমরা‌‌ ‌‌যাকিছু‌‌ ‌‌শিখেছি‌‌ ‌‌‌

Module‌‌ ‌‌5.5 ‌‌এ‌‌ ‌‌আমরা‌‌ ‌‌যাকিছু‌‌ ‌‌শিখেছি‌‌ ‌‌‌

Bonus box model, pseudo-class, position

• Display property এর কাজ সিএসএস এর মাধ্যমে অ্যাপ্লাই

• display : inline-block এর কাজ কি ? (এটা inline element গুলোতে যদি height,width দিতে চাই তখন এটা ব্যাবহার করতে হয় । এখানে যদি  height, width এর যেকোনো একটা থাকলেও অ্যাপ্লাই হয়ে যাবে  )

• Block element গুলকে চাইলেই আমরা যেকোনো সিএসএস দিতে পারি কিন্তু inline element এ টা কখন পারব না । inline element এ  যেকোনো সিএসএস  অ্যাপ্লাই করতে চাইলে আমরা  display : inline-block ব্যাবহার করব

• display : inline-block মানে একটা  inline element, ব্লক লেভেল এলেমেন্ট এর মত ব্যাবহার করবে

• CSS box model কি?

• div এবং span এর মধ্যে পারতক্ষ কি ?

• border image slice কিভেবে করে ? ঠিক যেমনটা আমরা food-nwtword এর assignment এ করেছি ।

• Pseudo-class কোণ গুলোকে বলে ?

• Hover er ব্যাবহার কিভাবে করে ? (এটা h1-h6 ও p ট্যাগ এর মত ট্যাগ গুলোতে ব্যাবহার করতে পারব)

• Focus এর ব্যাবহার কিভাবে করতে হয় ? (আমরা focus pseudo-class টা input এর ক্ষেত্রে ব্যাবহার করতে পারি)

• Visited এর ব্যাবহার কিভাবে করে ? (আমরা visited pseudo-class টা a ট্যাগ এর ক্ষেত্রে ব্যাবহার করতে পারি )

• First child, last child,  nth-child, pseudo-element before after এর ব্যাবহার কিভাবে করে?

• তবে মনে রাখবে pseudo-class এ একটা কোলন : ব্যাবহার করতে হয় । আর pseudo-element এ ২ টা :: ব্যাবহার করতে হয় । বুঝার সুবিধার্থে  আমি কোড দিয়ে দিলাম

  li:first-child {

        color: wheat;

      }

      li:last-child {

        color: yellow;

      }

      li:nth-child(2n) {

        color: blue;

        list-style-type: none;

        background-color: #aaa;

      }

      li:nth-child(2n + 1) {

        background-color: chartreuse;

      }

      h3::before {

        content: "hello ";

      }

      h3::after {

        content: " welcome to our web development course";

      }

• এখানে h3 ও ul  li বানিয়ে নিয়ে এই সিএসএস গুলো অ্যাপ্লাই করবেন

• Position এর ব্যাবহার কিভাবে করে ?

• position : relative এর কাজ কি ? (ধর head sir ছুটিতে গেছে । তখন কিন্তু তার চেয়ার ফাকা থাকবে । আর এই ফাকা থাকার কাজই হল relative এর খেলা )

• কিন্তু head sir যদি retired হয়ে যায় তাহলে কি তাড় চেয়ার ফাকা  থাকবে  ? সেখনে কেও না কেও তাড় দায়িত্ব নিয়ে সেই চেয়ার এই বসবে । এটা হল absulute এর খেলা

 

absolute এর উদাহরণ

 

.swimming {         position: relative;       }         .swimming div {         border: 1px dashed palevioletred;         width: 200px;       }       #boy {         position: relative;         top: 75px;         z-index: 20;       }       #ring {         position: relative;         z-index: 10;       }         #water {         position: relative;         top: -75px;       } <section class="swimming">       <div id="boy">         <img src="../SVG/position/boy.svg" alt="" />       </div>       <div id="ring">         <img src="../SVG/position/ring.svg" alt="" />       </div>       <div id="water"><img src="../SVG/position/water.svg" alt="" /></div>     </section>

• Position:sticky এর কাজ কি ? (যদি web-page এ scrolling bar থাকে তবে জাকে আমরা sticky করে দিব সে তাড় যায়গায় থাকবে কোণ যায়গায় নড়া চড়া করবে না )

 

• Position: fixed এর কাজ কি ? (এর কাজ হল জাকে আমরা ফিক্সড করব সেটা সবসময় সেখানেই থাকবে কোণ যায়গায় নড়া চড়া করবে না )

• আমরা যদি কিছু বুজতে না পারি তাহলে programming heror github এর এই repository তে ঘুরে আস্তে পারি ।  সেখানে module 5.5 এর সব কোড দেওয়া আছে

• Z-index এর কাজ কি ? কখন ব্যাবহার করতে হয় ?

All module link

 

আর আমার github এ যাইতে চাইলে এই লিঙ্কে ক্লিক করুন

About

Md: Rashedul Islam Shihab Writer of this note Batch4 Social accounts