Feb 08

এক্সেল এবং এসকিউএল সার্ভারের জন্য ডেটা মাইনিং টুলস সংক্ষিপ্ত বিবরণ . Data Mining Tools Overview for Excel and SQL Server

Data Mining Tools Overview for Excel and SQL Server
[youtube http://www.youtube.com/watch?v=4RZ30Y8Qz_A]

Feb 08

multiple Mysql query ব্যবহার করে পিএইচপি দিয়ে ডাটাবেস টেবিল এ অধিক ডাটা একসাথে অ্যাড করা যায়. PHP Insert Multiple Records Into MySQL

নাম-শরিফুল ইসলাম
Job category-Php Coder
Email-bappiislam1988@gmail.com
Mob-01722806467
বিষয়- PHP Insert Multiple Records Into
multiple Mysql query ব্যবহার করে পিএইচপি দিয়ে ডাটাবেস টেবিল এ অধিক ডাটা একসাথে অ্যাড করা যায়

পিএইচপি ব্যবহার করে ফলাফল
< ?php $servername = "localhost";/*mysql এর সার্ভার নাম*/ $username = "username";/*ইউজার নাম*/ $password = "password";/*পাসওয়ার্ড*/ $dbname = "myDB";/*তৈরিকৃত ডাটাবেসের নাম*/ // mysql এর সাথে সঠিক কানেকশন তৈরি করা $conn = new mysqli($servername, $username, $password, $dbname); //কানেকশন চেক করা if ($conn->connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}
/*প্রধান SQL query ডাটাবেস এ ডাটা যোগ করার জন্য প্রথমে টেবিল এর নাম উল্লেখ করা হয়েছে এরপর ব্র্যাকেটের মধ্যে কলাম এর নাম উল্লেখ করা হয়েছে পরবর্তী ব্রাকেট এর মধ্যে data গুলো যোগ করতে হবে এই নির্দেশ দেয়া হয়েছে*/
$sql = “INSERT INTO MyGuests (firstname, lastname, email)
VALUES (‘John’, ‘Doe’, ‘john@example.com’);”;
$sql .= “INSERT INTO MyGuests (firstname, lastname, email)
VALUES (‘Mary’, ‘Moe’, ‘mary@example.com’);”;
$sql .= “INSERT INTO MyGuests (firstname, lastname, email)
VALUES (‘Julie’, ‘Dooley’, ‘julie@example.com’)”;
if ($conn-> multi_query ($sql) === TRUE)
/query যদি ঠিকঠাক মতন হয়ে থকে তাহলে সফল বার্তা দেখাবে/
{
echo “New record created successfully”;
} else
/*তা না হলে বিফল বার্তা দেখাবে* /
{
echo “Error: ” . $sql . “
” . $conn->error;
}

$conn->close();/*কানেকশন বন্ধ করা হবে*/
?>

Feb 08

সিএসএস৩ পরিচিতি (CSS3 Introduction)

Ali Hossain

Student of English Literature, Jahangirnagar University.

 
CSS (সিএসএস) এর আধুনিক মানদন্ড বা নিশান হচ্ছে CSS3 (সিএসএস৩)

পূর্বের CSS (সিএসএস) এর ভার্সন এর সাথে CSS3 (সিএসএস৩) সম্পূর্নভাবে সামঞ্জস্যপূর্ণ । এই অধ্যায়ে আপনি CSS3 (সিএসএস৩) এর নতুন বৈশিষ্ট্য সম্পর্কে জানতে পারবেন।

 

CSS3 Modules (সিএসএস৩ মডিউলস)

CSS3 (সিএসএস৩) কে “Modules” (মডিউলস) এ বিভক্ত করা হয়েছে।

এটিতে “পুরাতন CSS (সিএসএস) এর বৈশিষ্ট্য রয়েছে (যে গুলোকে ছোট ছোট ভাগে বিভক্ত করা হয়েছে)। উপরন্তু, নতুন Modules (মডিউলস) যোগ করা হয়েছে।

CSS3 (সিএসএস৩) এর সবচেয়ে গুরুত্বপুর্ন কিছু Modules (মডিউলস) হচ্ছে :

  1. Selectors
  2. Box Model
  3. Backgrounds and Borders
  4. Image Values and Replaced Content
  5. Text Effects
  6. 2D/3D Transformations
  7. Animations
  8. Multiple Column Layout
  9. User Interface

 

CSS3 (সিএসএস৩) এর সুপারিশ

CSS3 (সিএসএস৩) এর অধিকাংশ Module (মডিউল) এ W3C এর প্রস্তাবনা রয়েছে, এবং CSS3 (সিএসএস৩) এর বৈশিষ্ট্য সব আধুনিক ব্রাওজারগুলুতে প্রয়োগ করা হয়েছে।

 

Feb 08

সিএসএস এট্রিবিউট সিলেক্টরস (CSS Attribute Selectors)

সিএসএস সিলেক্টর টিউটোরিয়াল

সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়। বিভিন্ন ধরনের সিলেক্টর আছে, এসব দিয়ে এইচটিএমএল পেজের এলিমেন্ট সিলেক্ট করা যায় এবং সিলেক্ট করার পর নিজের ইচ্ছেমত স্টাইলিং করা যায়। সিএসএস সিলেক্টর এর ব্যাপারে খুব গভীর এবং স্বচ্ছ ধারনা থাকতে হবে। সিলেক্টর নিয়ে কাজ করার আগে কিছু টার্ম জানতে হবে যেমনঃ

১। এইচটিএমএল এলিমেন্ট
২। এট্রিবিউট

রুল সেট বা রুল (css rule)

Selector আর declaration block দুটি মিলে একটা রুল। অর্থ্যাৎ কোন একটা এইচটিএমএল এলিমেন্টকে সিলেক্ট করে সেটার জন্য যেসব সিএসএস লেখা হয় তা হচ্ছে একটা রুল।

পুরো সিএসএস টিউটোরিয়াল জুড়ে শুধু মুলত ৩টি জিনিসের আলোচনা হবেঃ

সিলেক্টর : কোন একটা এইচটিএমএল এলিমেন্টকে সিলেক্ট বা টার্গেট করে সেটার জন্য সিএসএস রুল লেখা হয়। এলিমেন্টে id, class এট্রিবিউটের যে মান দেয়া থাকে সেটা দিয়েই সিলেক্ট/টার্গেট করা যায়।

প্রেপার্টি : সিএসএস এ শত শত প্রোপার্টি আছে। এক একটি দিয়ে এক এক কাজ হয় যেমন “background-color” প্রোপার্টি দিয়ে কোন এলিমেন্টের ব্যাকগ্রাউন্ডে রং দেয়া যায়। “font-family” দিয়ে এলিমেন্ট টির ফন্ট কি হবে সেটা ঠিক করা যায় ইত্যাদি।

মান (value) : প্রত্যেকটি প্রোপার্টির নির্দিষ্ট মান আছে। এই প্রোপার্টি এবং প্রোপার্টিগুলির মান কি কি হবে সেগুলি যত বেশি মুখস্থ থাকবে তত ভাল কাজ করতে পারবেন। তবে কাজ করে করে প্রফেশনাল হয়ে গেলে শত শত প্রোপার্টি এবং এদের মানগুলি মুখস্থই থাকে।

01.h4
02.{
03.background-color:white;
04.font-size:12px;
05.}
06.p
07.{
08.color:red;
09.}

এখানে h4, p এসব হচ্ছে সিলেক্টর, h4 এর দ্বারা এইচটিএমএল পেজের <h4></h4> এর ভিতরে যা আছে তা সিলেক্ট করবে বা বলা যায় h4 এলিমেন্ট সিলেক্ট করবে।
h4 এর পর সেকেন্ড ব্রাকেট যেখান থেকে শুরু হয়েছে এবং p এর আগে যেখানে সেকেন্ড ব্রাকেট শেষ হয়েছে এইটুকু ডিক্লেয়ারেশন ব্লক।
সেকেন্ড ব্রাকেটের ভিতরে সবটুকু হচ্ছে ডিক্লেয়ারেশন।
background-color হচ্ছে প্রোপার্টি এবং white হচ্ছে এর ভ্যালু।
আর পুরোটা অর্থ্যাৎ h4 থেকে শুরু করে এর সেকেন্ড ব্রাকেট যেখানে শেষ হয়েছে এইটুকু রুল বা রুল সেট। উপরের কোডে দুটি রুল আছে h4 এবং p।

নিচে বিভিন্ন সিলেক্টর এর নাম এবং এরা কিভাবে কাজ করে তা দেয়া হলঃ

১। ইউনিভার্সাল সিলেক্টর

ইউনিভার্সাল সিলেক্টর এইচটিএমএল পেজের প্রতিটি এলিমেন্ট কে সিলেক্ট করে। যেমনঃ নিচের কোডটি সব এইচটিএমএল এলিমেন্ট এর রং লাল করে দেবে।

1.* {color:red;}

অনেকে padding, margin এখানে 0 করে দেন যেমনঃ

1.*{
2.margin:0;
3.padding:0;
4.}

এই কাজটি করা অপ্রোয়জনীয়, এতে ব্রাউজারের উপর চাপ বেশি পরে তাই অনেকে এটা করতে নিষেধ করেন।

২। টাইপ সিলেক্টরঃ

1.p{
2.background-color:orange;
3.}
4.a{
5.color:maroon;
6.}

p, a হচ্ছে এখানে টাইপ সিলেক্টর। p সিলেক্টর এইচটিএমএল পেজের সব এলিমেন্ট কে সিলেক্ট করবে এবং এদের ব্যাকগ্রাউন্ড রং কমলা করে দেবে আর a সিলেক্টর এইচটিএমএল সব লিংক কে সিলেক্ট করে রং খয়েরি করে দেবে।

 

Feb 08

সিএসএস মিডিয়া টাইপস (CSS Media Types)

মৃত্যুঞ্জয় বিশ্বাস

 
এই @media পদ্ধতি ব্যবহার করে, একটি ওয়েবসাইট এর স্কৃণ্, মুদ্রণ, মোবাইল ফোন, ট্যাবলেট ইত্যাদি জন্য একটি ভিন্ন লেআউট করতে পাড়বো।

মিডিয়ার ধরন সমূহ

কিছু CSS এর বৈশিষ্ট্য শুধুমাত্র একটি নির্দিষ্ট মিডিয়া জন্য ডিজাইন করা হয়। উদাহরণস্বরূপ “voice-family” বৈশিষ্ট শ্রবণেন্দ্রিয় সংক্রান্ত ব্যবহারকারী এজেন্ট এর জন্য ডিজাইন করা হয়েছে। অন্যান্য বেশ কয়েকটি বৈশিষ্ট্য বিভিন্ন মিডিয়া ধরনের জন্য ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, “font-size” বৈশিষ্ট স্কৃণ্ এবং প্রিন্ট মিডিয়ার জন্য ব্যবহার করা হয়ে থাকে। যদিও এর বিভিন্ন ব্যবহার আসে। একটি নথিতে সাধারণত কাগজ থেকে একটি স্কৃণ্ এ বড় ফন্টের প্রয়োজন হয়। sans-serif ফন্ট এর মাধমে স্কৃণ্ এ সহজে পড়তে পারা যায় , যদিও কাগজেও সহজে পড়া যায়।

 

@ মিডিয়া রুল সমূহ

এই @media রুল, একই স্টাইল শীট এ বিভিন্ন মিডিয়ার জন্য বিভিন্ন নিয়ম তৈরি করে। উদাহরণস্বরূপ এই স্টাইল এ নীচের ব্রাউজার এর বর্ণনাই একটি ১৪14 পিক্সেল Verdana ফন্ট এর স্কৃণ্ প্রদর্শন করা হল। যদি পাতাগুলো প্রিন্ট করা হয়। তবে এটি একটি ২০20 পিক্সেল ফন্ট এবং লাল রঙের হবে।

উদাহরণঃ

@media screen {
      p {
      font-family: verdana,sans-serif;
      font-size: 14px;
      }
 }
@media print {
      p {
      font-size: 20px;
      color: red;
      }
 }

 

নীচে অন্যান্য মিডিয়া ধরন সম্পর্কে আলোচনা করা হলঃ

  1. all= সবধরনের মিডিয়া ডিভাইসের জন্য ব্যবহৃত হয়।
  2. aural= এটি বক্তৃতা এবং শব্দ synthesizers জন্য ব্যবহৃত হয়।
  3. braille= ব্রেইল স্পৃশ্য প্রতিক্রিয়া ডিভাইসের জন্য ব্যবহৃত হয়।
  4. embossed= পেজড ব্রেইল প্রিন্টার জন্য ব্যবহৃত করা হয়।
  5. handheld= এটি ছোট বা হ্যান্ডহেল্ড ডিভাইসের জন্য ব্যবহৃত হয়।
  6. print= প্রিন্টার জন্য ব্যবহৃত হয়।
  7. projection= প্রোজেক্ট উপস্থাপনা জন্য ব্যবহৃত হয়, সাদারনত স্লাইডের মত।
  8. screen= কম্পিউটার পর্দা জন্য ব্যবহৃত হয়
  9. tty= Teletypes এবং টার্মিনালের মত, যা মিডিয়ার নির্দিষ্ট পিচ প্রকৃতির গ্রিড এ ব্যবহার করা হয়।
  10. tv= টেলিভিশন -টাইপ ডিভাইসের জন্য ব্যবহৃত হয়।

Feb 08

সিএসএস এ অস্বচ্ছতা / স্বচ্ছতা (CSS Image Opacity / Transparency)

অঞ্জন দাস (American international univetsity)

 

আপাসিটি দ্বারা নিধারণ করা হয় অবজেক্টটি কতটা স্বচ্ছ। সাধারণত কোন ইমেজের অপাসিটি নিয়ন্ত্রণের মাধ্যমে ঐ ইমেজের উপর বিভিন্ন ইফেক্ট দেয়া যায়।

CSS এর মাধ্যমে সহজে স্বচ্ছ ইমেজ তৈরি করা। CSS এর অস্বচ্ছতা (Opacity) CSS 3 এর একটি একটি অংশ।

উদাহরণ 1 – একটি স্বচ্ছ ইমেজ তৈরি করাঃ

CSS 3 বৈশিষ্ট্য হল এর স্বচ্ছতা ও অস্বচ্ছতা। প্রথম আমরা কিভাবে CSS এর সঙ্গে একটি স্বচ্ছ ইমেজ তৈরি করতে হয় তা দেখব ।
নিয়মিত চিত্র:

Transparency তে একই চিত্র:

উদাহরণঃ

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

অপাসিটি নিয়ন্ত্রণের জন্য CSS এ ইন্টারনেট এক্সপ্লোরার-৯, ফায়ারফক্স, ক্রোম, অপেরা এবং সাফারি সহ নতুন সকল ব্যাউজারের জন্য opacity প্রোপার্টি ব্যবহৃত হয়। opacity প্রোপার্টি র মান 0.0 থেকে 1.0 গ্রহণ করতে পারে। IE8 এবং তার আগের ব্যাউজার filter:alpha(opacity=x) ব্যবহার করে। এর নিম্ন মান উপাদান আরো স্বচ্ছ করে তোলে।

উদাহরণ 2 – চিত্র ট্রান্সপারেন্সি এর হভার (Hover) প্রভাব

ইমেজ এর উপর মাউস রাখেন
উদাহরণঃ

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

এটি প্রথম CSS ব্লক উদাহরণ ১ এর অনুরূপ কোড। উপরন্তু, আমরা যখন ইমেজ এ hover ওভার asযোগ করবো। এই ক্ষেত্রে যদি স্বচ্ছ ইমেজ না চান তাহলে hover over রেখে দেখুন।
এই জন্য সিএসএস হল: opacity=1
IE8 এবং আগের জন্য filter:alpha(opacity=100)
যখন মাউস পয়েন্টার ইমেজ থেকে দূরে চলে আসে, তখন ইমেজ আবার স্বচ্ছ হতে পারে।

উদাহরণ 3 – Transparent বক্স-এর লেখাটি

উদাহরণঃ

 <html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

 

প্রথমত, আমরা <div> element (class=”background”) এর সাথে একটি ব্যাকগ্রাউন্ড ইমেজ এবং একটি পার্শ্ব তৈরি করবো। তারপর আমরা <div> (class=”transbox”) তৈরি করবো । যার পাশে <div>. The <div class=”transbox”> এ আগের পটভূমির রঙ এবং একটি স্বচ্ছ DIV সীমানা (bbBBBGGH4141444 border)rderr আছে। ভিতরের transparent <div> এ আমরা একটি <p> উপাদান ভিতরে কিছু লেখা যোগ করবো।

 

Feb 08

সি এস এস ইমেজ স্প্রাইটস্ (CSS Image Sprites)

মৃত্যুঞ্জয় বিশ্বাস

 

ইমেজ স্প্রাইটস্ কি?

ওয়েব সাইটের জন্য আকর্ষণীয় বাটন তৈরির জন্য এবং নেভিগেশন বার তৈরির ক্ষেত্রে ইমেজ স্প্রাইটস একটা ভালো কৌশল। এক্ষেত্রে অনেকগুলো ইমেজ একত্রে করে একটা সিঙ্গেল ইমেজ তৈরি করা হয় এবং প্রয়োজন অনুসারে ইমেজের বিশেষ অংশ প্রদর্শন করা হয়। সাধারণত একটা বাটন তৈরির ক্ষেত্রে দুইটি অবস্থা বিবেচনা করা হয়। একটা হচ্ছে সাধারণ অবস্থা এবং বাটনের উপর মাউস নিয়ে গেলে বাটনটি কেমন দেখাবে সে অবস্থা। দুইটি অবস্থার জন্য, সাধারণত দুইটি ইমেজ ব্যবহার করা হয়। কিন্তু ইমেজ স্প্রাইটস এর মাধ্যমে একটা ইমেজ ব্যবহার করেই বাটনটি তৈরি করা যাবে।

 

ইমেজ স্প্রাইটস্ এর কিছু সহজ উদাহরণ

তিনটি পৃথক ইমেজ এর পরিবর্তে, আমরা এই একক চিত্র ব্যবহার করতে পারব (“img_navsprites.gif”) এর মাধমে:

CSS এর সঙ্গে, আমরা শুধু প্রয়োজনীয় ইমেজ প্রদর্শন করতে পারব।

নিম্নলিখিত উদাহরণে সিএসএস এর ” img_navsprites.gif ” ছবিটি কোন নির্দিষ্ট অংশ প্রদর্শন করে তা দেখব :
উদাহরণঃ

#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}

উদাহরণ ব্যাখ্যা:

  • <img id=”home” src=”img_trans.gif”> – Src অ্যাট্রিবিউট খালি হতে পারে না, কারণ শুধুমাত্র একটি ছোট স্বচ্ছ ইমেজ সংজ্ঞায়িত করে। প্রদর্শিত ইমেজ এ CSS এর মধ্যে নির্দিষ্ট পটভূমি চিত্র হতে হবে।
  • width: 46px; height: 44px; – ইমেজ এর অংশ সংজ্ঞায়িত করার জন্য ব্যবহৃত করা হয়।
  • background: url(img_navsprites.gif) 0 0; – Defines the background image and its position (left 0px, top 0px) – ব্যাকগ্রাউন্ড ইমেজ এবং তার অবস্থান (বাম ০ 0px, শীর্ষ ০ 0px ) সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।

এটি হল ইমেজ স্প্রাইটস্ ব্যবহার করার সবচেয়ে সহজ উপায়। এখন আমরা এই প্রভাব ব্যবহার করে লিঙ্ক এবং কার্সার প্রসারিত করতে পারব।

 

ইমেজ স্প্রাইটস্ এর ন্যাভিগেশন তালিকা তৈরি

ইমেজ স্প্রাইটস্ ব্যবহার (“img_navsprites.gif”) করতে প্রথমে নেভিগেশন তালিকা তৈরি করতে হবে।

আমেদের একটি HTML তালিকা ব্যবহার করা হবে, কারণ এটি একটি লিঙ্ক এবং একটি ব্যাকগ্রাউন্ড ইমেজ সমর্থন করে।

উদাহরণঃ

#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}

উদাহরণ ব্যাখ্যা:

  • #navlist {position:relative;} – আপেক্ষিক অবস্থান সেট করা হয়, ভিতরে পরম অবস্থান অনুমতি করার জন্য।
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} – তালিকা-স্টাইল মুছে ফেলা জন্য মার্জিন এবং প্যাডিং ০0 সেট করা হয় এবং সব তালিকার আইটেম নিশ্চিত করা হয়।
  • #navlist li, #navlist a {height:44px;display:block;} – সব ছবি উচ্চতা 44 44px হয়।

 

এখন প্রতিটি নির্দিষ্ট অংশ জন্য অবস্থান বর্ণনা করবো।

  • #home {left:0px;width:46px;} – বাম সব স্থান বাম পথ এ এবং ইমেজ প্রস্থ 44 46px হয়।
  • #home {background:url(img_navsprites.gif) 0 0;} – ব্যাকগ্রাউন্ড ইমেজ এবং তার অবস্থান (বাম ০ 0px, শীর্ষ ০ 0px ) সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।
  • #prev {left:63px;width:43px;} – ডানে 63px এবং প্রস্থ 43px স্থান হবে (#home width 46px + some extra space between items)।
  • #prev {background:url(‘img_navsprites.gif’) -47px 0;} – ডান ব্যাকগ্রাউন্ড ইমেজ 47px সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় (#home width 46px + 1px line divider)
  • #next {left:129px;width:43px;}- ডানে 129px এবং প্রস্থ 43px স্থান হবে (start of #prev is 63px + #prev width 43px + extra space)
  • #next {background:url(‘img_navsprites.gif’) -91px 0;} – ডান ব্যাকগ্রাউন্ড ইমেজ 91px সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )

 

ইমেজ স্প্রাইটস্ এ হভের (Hover) প্রভাব

এখন আমরা আমাদের নেভিগেশন তালিকায় একটি হভের (Hover) প্রভাব যোগ করবো। হভের নির্বাচক শুধুমাত্র লিঙ্ক না, সমস্ত উপাদান, ব্যবহার করা যেতে পারে।

আমাদের নতুন ইমেজ (” img_navsprites_hover.gif “) তিন নেভিগেশন ইমেজ এর উপস্থিত রয়েছে। কারণ এটি একটি একক চিত্র না বরঞ্চ ছয়টি পৃথক ফাইল। যখন কোন লোড দেরী হবে না, কারন ব্যবহারকারী ইমেজ উপর hovers থাকে।

আমরা এখন শুধুমাত্র হভের (Hover) প্রভাব এ তিন লাইন কোড যোগ করবো:

উদাহরণঃ

#home a:hover {
    background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
    background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
    background: url('img_navsprites_hover.gif') -91px -45px;
}

উদাহরণ ব্যাখ্যা:

  • #home a:hover {background: transparent url(‘img_navsprites_hover.gif’) 0 -45px;} – আমরা তিনটি সব হভার ইমেজ এ 45px এর নিচে একই পটভূমি অবস্থান উল্লেখ করেছি।

Feb 08

সিএসএস Pseudo-classes

Pseudo-classes কি ???

Pseudo-classes ব্যবহার করা হয় একটি উপাদান এর একটি বিশেষ state নির্ধারণ করতে ।

উদাহরণস্বরূপ এটি ব্যবহার করা হয়ঃ

  • যখন user এর উপর মাউস নিয়ে নাড়াচাড়া করে তখন ভিন্ন Style প্রদর্শন করে ।
  • visited লিঙ্ক এবং unvisited লিঙ্ক ভিন্ন ভিন্ন Style প্রদর্শন করে।

 

Syntax বা শব্দবিন্যাস

pseudo-classes এর শব্দবিন্যাসঃ

selector:pseudo-class {
        property:value;
 }

 

Anchor Pseudo-classes

লিংক বিভিন্ন উপায়ে প্রদর্শিত হতে পারে:

উদাহরনঃ

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Note: a:link এর পরে অবশ্যই a:hover আসবে এবং a:visited আসে যাতে সিএসএস সংজ্ঞা কার্যকর করা হয় !!

CSS definition অনুযায়ী a:hover এর পরে সব সময় a:active আসবে যা গুরুত্বপূর্ণ অর্থ বহন করে ।

Pseudo-class নাম সংবেদনশীল নয় ।

 

Pseudo-classes এবং CSS Classes

Pseudo-classes , CSS classes এর সাথেও যুক্ত হতে পারেঃ

উদাহরনঃ

a.highlight:hover {
       color: #ff0000;
 }

উদাহরণস্বরূপ আপনি যখন লিঙ্ক এর উপর কার্সার রাখবেন, এর রং পরিবর্তন হবে

 

CSS – The :first-child Pseudo-class

the :first-child pseudo-class সেই সব উপাদানের সাথে মিলিত হয় যা অন্য উপাদানের first child

Note: প্রথমে :first-child IE8 এ কাজ করলেও পরবর্তীতে সেটা < !DOCTYPE> এ ঘোষণা করা হয়

 

Match the first <p> element

নিম্নলিখিত উদাহরণে, Selector যে কোনো উপাদান সাথে মেলে যেটা কিনা কোন <p> উপাদান এর First-child :

উদাহরনঃ

p:first-child {
      color: blue;
 }

 

Match the first <i> element in all <p>elements

নিম্নলিখিত উদাহরণে, selector সমস্ত <p> উপাদান এর প্রথম প্রথম উপাদানের সাথে মিলিত হয়

উদাহরনঃ

p:first-child i {
       color: blue;
 }

 

CSS – The :lang Pseudo-class

The : Lang pseudo-class আপনাকে বিভিন্ন ভাষার জন্য বিশেষ নিয়ম নির্ধারণ করতে সাহায্য করবে

Note: IE8 , :lang pseudo-class কে তখনই সাপোর্ট করবে যখন এটি < !DOCTYPE> হবে

নীচের উদাহরণে,: Lang ক্লাস = “না” lang এর সঙ্গে<p>উপাদানের জন্য উদ্ধৃতি চিহ্ন সংজ্ঞায়িত করে:

উদাহরনঃ

p i:first-child {
    color: blue;
}

 

Feb 08

সিএসএস কম্বিনেটরস (CSS Combinators)

শেখ মাহফুজুর রহমান

সিএসএস কম্বিনেটর সিলেক্টরগুলোর মধ্যে সম্পর্ক নির্দেশ করে। একটি সিএসএস সিলেক্টর একাধিক সিম্পল সিলেক্টর ধারণ করতে পারে। এই সিম্পল সিলেক্টরগুলোর মধ্যে আমরা একটি কম্বিনেটর যোগ করতে পারি। সিএসএস-থ্রি’তে চার প্রকার কম্বিনেটর রয়েছেঃ

  • ডিসেন্ডেন্ট সিলেক্টর
  • চাইল্ড সিলেক্টর
  • অ্যাডজাসেন্ট সিবলিং সিলেক্টর
  • জেনেরাল সিবলিং সিলেক্টর

 

ডিসেন্ডেন্ট সিলেক্টর

ডিসেন্ডেন্ট সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সবগুলো ডিসেন্ডেন্ট এলিমেন্টকে ম্যাচ বা সিলেক্ট করে। নিচের উদাহরণে <div> এলিমেন্টের ভিতরের সবগুলো <p> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ

div p {
background-color: yellow;
}

 

চাইল্ড সিলেক্টর

চাইল্ড সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের ঠিক ভিতরের চাইল্ড এলিমেন্টগুলোকে সিলেক্ট করে। নিচের উদাহরণে <div> এলিমেন্টের ঠিক ভিতরের অর্থাৎ এর ইমিডিয়েট সন্তান <p> (এখানে p ভিতর অন্য কোন p থাকলে সিলেক্ট হবেনা) এলিমেন্টগুলোকে সিলেক্ট করা হয়েছেঃ

div > p {
      background-color: yellow;
}

 

অ্যাডজাসেন্ট সিবলিং সিলেক্টর

অ্যাডজাসেন্ট সিবলিং সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের অ্যাডজাসেন্ট সিবলিং ( যেমন <div> এর পর <p> এলিমেনটি থাকলে <p> হলো <div> এর সিবলিং বা সহোদর) এলিমেন্টগুলোকে সিলেক্ট করে। সিবলিং এলিমেন্টগুলোর অবশ্যই একই প্যারেন্ট থাকতে হবে অর্থাৎ সেগুলোকে একই এলিমেন্টের ভিতরে অন্তঃভূর্ক্ত হতে হবে এবং অ্যাডজাসেন্টের মানে হলো ঠিক পরে এসেছে। নিচের উদাহরণে <div> এলিমেন্টের ঠিক পরের সবগুলো <p> এলিমেন্টগুলোকে সিলেক্ট করা হয়েছেঃ

div + p {
background-color: yellow;
}

 

জেনারেল সিবলিং সিলেক্টর

জেনারেল সিবলিং সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সবগুলো সিবলিংকে সিলেক্ট করে। নিচের উদাহরণে

এলিমেন্টের সবগুলোএলিমেন্টকে সিলেক্ট করা হয়েছেঃ

div ~ p {
background-color: yellow;
}

Feb 08

সিএসএস আনুভূমিক সারি (CSS Horizontal Align)

ইন্দ্র ভূষণ শুভ

 

CSS এ, উপাদানকে আনুভূমিক ভাবে সারিবদ্ধ করার জন্য বিভিন্ন ধরনের বৈশষ্ট্য ব্যবহার করা হয়।

সারিবদ্ধ ব্লক উপাদানসমূহ

ব্লক উপাদান হলো এক ধরণের উপাদান যা ব্যবহারযোগ্য সব width ব্যবহার করে, এবং আগে ও পরে একটি লাইন বিরতি থাকে।

 

ব্লক উপাদানের উদাহরণ

সারিবদ্ধ টেক্সটের জন্য, CSS Text অধ্যায় দেখুন।
এই অধ্যায়ে আমরা দেখব কিভাবে বিন্যাসের উদ্দেশ্যে উপাদানগুলোকে আনুভূমিক ভাবে সারিবদ্ধ করা হয়।

মার্জিন বৈশিষ্ট্য ব্যবহার করে কেন্দ্রে সারিবদ্ধ করা

বাম এবং ডান মার্জিনকে “auto” সেট করে ব্লক উপদানকে কেন্দ্রে সারিবদ্ধ করা যায়।

বিশেষ দ্রষ্টব্যঃ মার্জিন ব্যবহারঃ auto; IE8 এবং পুর্বের গুলোতে কাজ করে না যতক্ষণ না !DOCTYPE ধরা হয়।

বাম এবং ডান মার্জিন সয়ংক্রিয় ধরা হয় যাতে তারা ব্যবহারযোগ্য মার্জিন সমান ভাগে বিভক্ত করে। এর ফলে কেন্দ্রীভূত উপাদান পাওয়া যায়ঃ

উদাহরণ

.center {
     margin-left: auto;
     margin-right: auto;
     width: 70%;
     background-color: #b0e0e6;
 }

নির্দেশঃ প্রস্থ যদি ১০০% হয় তবে কেন্দ্রে সারির কনো প্রভাব নেই।

 

স্থান বৈশিষ্ট্যকে ব্যবহার করে বাম এবং ডানে সারিবদ্ধ করা

পূর্ণ অবস্থানের জন্য সারিবদ্ধ উপাদানে একটি পদ্ধতি ব্যবহার কর হয়ঃ
উদাহরণ

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
 }

বিশেষ দ্রষ্টব্যঃ পূর্ণ অবস্থানের উপাদানকে স্বাভাবিক প্রবাহ থেকে সরিয়ে নেওয়া হয়, এবং উপাদানকে আবৃত করতে পারে।

 

Crossbrowser সামঞ্জস্যের সমস্যা

যখন উপাদানকে সারিবদ্ধ করা হয়,<body> উপাদানের জন্য মার্জিন এবং প্যাডিংকে পূর্বনির্ধারণ করা সর্বদাই একটি ভাল ধারণা। এটি করা হয় বিভিন্ন ব্রাউজেরের দৃশ্যমান পার্থক্য এড়ানোর জন্য।
যখন স্থান বৈশিষ্ট্য ব্যবহার করা হয় তখন IE8 এবং পুর্বের গুলোতে কিছু সমস্যা দেখা দেয়। যদি ধারক উপাদানটিতে ( এক্ষত্রে<div class=”container”>) নির্ধারিত প্রস্থ থাকে এবং !DOCTYPE না ধরা হয়, IE8 এবং পুর্বের গুলো ডান দিকে 17px এর একটি মার্জিন যোগ করে। এটি একটি স্ক্রলবারের জন্য সংরক্ষিত স্থান মনে করা হয়। স্থান বৈশিষ্ট্যে সবসময় !DOCTYPE সেট করতে হয়ঃ

 উদাহরন
body {
     margin: 0;
     padding: 0;
 }


.container {
     position: relative;
     width: 100%;
 }


.right {
     position: absolute;
     right: 0px;
     width: 300px;
     background-color: #b0e0e6;
 }




 


ফ্লট বৈশিষ্ট্য ব্যবহার করে বামে এবং ডানে সারিবদ্ধ করা


ফ্লট বৈশিষ্ট্যের জন্য সারিবদ্ধ উপাদানে একটি পদ্ধতি ব্যবহার কর হয়ঃ


উদাহরণ




.right {
     float: right;
     width: 300px;
     background-color: #b0e0e6;
 }




 


Crossbrowser সামঞ্জস্যের সমস্যা


যখন উপাদানকে সারিবদ্ধ করা হয়,<body> উপাদানের জন্য মার্জিন এবং প্যাডিংকে পূর্বনির্ধারণ করা সর্বদাই একটি ভাল ধারণা। এটি করা হয় বিভিন্ন ব্রাউজেরের দৃশ্যমান পার্থক্য এড়ানোর জন্য।


যখন ফ্লট বৈশিষ্ট্য ব্যবহার করা হয় তখন IE8 এবং পুর্বের গুলোতে কিছু সমস্যা দেখা দেয়। যদি উপাদানটিতে !DOCTYPE না ধরা হয়, IE8 এবং পুর্বের গুলো ডান দিকে 17px এর একটি মার্জিন যোগ করে। এটি একটি স্ক্রলবারের জন্য সংরক্ষিত স্থান মনে করা হয়। স্থান বৈশিষ্ট্যে সবসময় !DOCTYPE সেট করতে হয়ঃ


উদাহরণ




body {
     margin: 0;
     padding: 0;
 }


.right {
     float: right;
     width: 300px;
     background-color: #b0e0e6;
 }