সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

মিডিয়া কুয়েরি - Media-Queries


মিডিয়া কুয়েরি কি?

মিডিয়া কুয়েরি হলো সিএসএস(৩) এ সংযোজিত একটি পদ্ধতি যা ওয়েব পেজকে রেস্পন্সিভ করার জন্য ব্যবহার করা হয়।

সিএসএস মিডিয়া কুয়েরি ব্যবহারের জন্য @media ব্যবহার করা হয় এবং একটি প্রস্থ নির্ধারণ করা হয় এবং ঐ প্রস্থের সকল ডিভাইসের জন্য স্টাইল ডিফাইন করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
body {
    background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p> ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করা হয়; যখন ডকুমেন্টের প্রস্থ 500 pixel হয়, তখন background-color হয় "lightblue" , অন্যথায় "lightgreen".
    </p>
</body>
</html>

ফলাফল




একটি ব্রেকপয়েন্ট যোগ করি

এর আগের টিউটোরিয়ালে সারি এবং কলাম দিয়ে একটি রেস্পন্সিভ ওয়েব পেজ তৈরি করেছিলাম, কিন্তু তা ছোট ডিভাইসে ভালো দেখায়নি।

মিডিয়া কুয়েরির সাহায্যে আমরা তা ঠিক করবোঃ


ডেস্কটপ

মোবাইল

৭৬৮পিক্সেলের নিচের ডিভাইসের জন্য মিডিয়া কুয়েরি ডিফাইন করিঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}
</style>
</head>
<body>

<div class="header">
<h1>ঢাকা</h1>
</div>

<div class="row">

<div class="col-3 menu">
<ul>
<li>ফ্লাইট</li>
<li>সিটি</li>
<li>দ্বীপসমুহ</li>
<li>খাদ্য</li>
</ul>
</div>

<div class="col-6">
<h1>সিটি</h1>
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়। 
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।</p>
</div>
<div class="col-3 right">
<div class="aside">
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।
প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে।  </p>
</div>
</div>

</div>

<div class="footer">
<p>ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়।</p>
</div>

</body>
</html>

ফলাফল




মোবাইল ফার্স্ট ডিজাইন

মোবাইল ফার্স্ট মানে হচ্ছে, কম্পিউটার বা অন্যান্য বড় ডিভাইসের পূর্বে মোবাইলের জন্য ডিজাইন করা।

এর অর্থ এই যে আমাদের সিএসএস-এ কিছু পরিবর্তন করতে হবে।

স্ক্রিন সাইজ ৭৬৮ পিক্সেলের চেয়ে ছোট হলে স্টাইল পরিবর্তন না করে,৭৬৮ পিক্সেলের চেয়ে বড় হলে পরিবর্তন করবো। এটা আমাদের ডিজাইনকে মোবাইল ফার্স্ট করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
<h1>ঢাকা</h1>
</div>

<div class="row">
<div class="col-3 menu">
<ul>
<li>ফ্লাইট</li>
<li>সিটি</li>
<li>দ্বীপসমুহ</li>
<li> খাদ্য</li>
</ul>
</div>

<div class="col-6">
<h1>সিটি</h1>
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।</p>
</div>

<div class="col-3 right">
<div class="aside">

<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়। 
কাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।
প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে।</p>

</div>
</div>

</div>

<div class="footer">
<p>ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়।</p>
</div>
</body>
</html>

ফলাফল




ট্যাবলেটের জন্য ডিজাইন

আমরা ট্যাবলেট এবং মোবাইল ফোনের মাঝেও একটি ব্রেকপয়েন্ট যোগ করবো।


কম্পিউটার

ট্যাবলেট

মোবাইল

এই রকম করার জন্য আমরা আরেকটি মিডিয়া কুয়েরি (৬০০পিক্সেলে) এবং একসেট নতুন ক্লাস ব্যবহার করবো ৬০০ পিক্সেলের বড় (কিন্তু ৭৬৮ পিএক্সেলের ছোট) ডিভাইসের জন্যঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
<h1>ঢাকা</h1>
</div>

<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>ফ্লাইট</li>
<li>সিটি</li>
<li>দ্বীপসমুহ</li>
<li>খাদ্য</li>
</ul>
</div>

<div class="col-6 col-m-9">
<h1>সিটি</h1>
<p>ঢাকা বাংলাদেশের রাজধানী।দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।</p>
</div>

<div class="col-3 col-m-12">
<div class="aside">

<p>ঢাকা বাংলাদেশের রাজধানী। 
দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।

প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে।</p>

</div>
</div>

</div>

<div class="footer">
<p> ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়।</p>
</div>
</body>
</html>

ফলাফল



ইহা দেখতে অদ্ভুত হলেও আমরা একই রকম দুই সেট ক্লাস ব্যবহার করেছি,কিন্তু ইহা আমাদেরকে প্রতিটি ব্রেকপয়েন্টে কি ঘটবে তা নিয়ন্ত্রণ করার সুযোগ করে দিয়েছেঃ

এইচটিএমএল


<div class="row">
    <div class="col-3 col-m-3">...</div>
    <div class="col-6 col-m-9">...</div>
    <div class="col-3 col-m-12">...</div>
</div> 

উদাহরণের বর্ণনা

কম্পিউটারের জন্যঃ

প্রথম ও তৃতীয় সেকশন উভয়ে ৩ টি কলামে ভাগ হবে, আর মাঝেরটি ৬টি কলামে ভাগ হবে।

ট্যাবলেটের জন্যঃ

প্রথম সেকশন ৩টি কলামে ভাগ হবে, দ্বিতীয়টি ৯টি কলামে ভাগ হবে এবং তৃতীয়টি 12 টি কলামে ভাগ হবে আর প্রথম ও দ্বিতীয় কলামটির নিচে প্রদর্শিত হবেঃ


ওরিয়েন্টেশনঃ Portrait / Landscape

ব্রাউজার ওরিয়েন্টেশনের ফলে পেজের লে-আউট পরিবর্তন করতে মিডিয়া কুয়েরি ব্যবহার করা যায়ঃ

আপনি একসেট সিএসএস প্রোপার্টি রাখতে পারেন যেগুলো "Landscape" ওরিয়েন্টেশন বা ব্রাউজার উইন্ডোর উচ্চতা যখন প্রস্থের চেয়ে কম হবে তখন কাজ করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
 <style>
body {
    background-color: lightgreen;
}

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}
 </style>
 </head>
 <body>
 <p>ব্রউজার উইন্ডোতে মাপ পরিবর্তন  করা হয়ঃযখন ডকুমেন্টটের প্রস্থ দৈঘ্য অপেক্ষা বড় হয়,
তখন background-color হয় "lightblue" অন্যথায় "lightgreen".</p>
</body>
</html>

ফলাফল