গতপর্বে
আমরা আলোচনা করেছিলাম, ক্লাস নিয়ে। আজ আমরা আলোচনা করব
এক্সটারনাল,ইন্টারনাল এবং ইনলাইন স্টাইলশীট নিয়ে, কিভাবে এদের ডিক্লেয়ার
করতে হয় ইত্যাদি নিয়ে।এক্সটারনাল স্টাইল শীট মূলত html ডকুমেন্টের বাইরে ডিক্লেয়ার করা হয় যে কোনো টেক্সট এডিটরে(যেমন, নোটপ্যাড)। এই শীট .css এক্সটেনশান দিয়ে সেভ করতে হয়। এই ফাইলে সাধারণত কোনো html ইলিমেণ্ট থাকে না।
নিচে একটি এক্সটারনাল স্টাইলশীটের উদাহরন দেয়া হল।
h1{align:center; color:blue}
p{color:red}
#pr{align:right;color:pink}
এ কোডটুকু একটি টেক্সট এডিটরে লিখে sample.css নামে সেভ করা হলে sample নামে একটি এক্সটারনাল স্টাইলশীট তৈরি হয়ে যাবে।
এখন একটি html ডকুমেন্ট খুলে তাতে <head> ট্যাগের মধ্যে নিচের মত sample স্টাইলশীটটিকে লিঙ্ক করে দেয়া যায়।
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css” />
</head>
আমি নিচের html ডকুমেন্টকে এভাবেই sample.css স্টাইলশীটের সাথে লিঙ্ক করলাম
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css” />
</head>
<body>
<h1 class=”cn”> HELLO EVERYBODY </h1>
<p> this is a center align paragraph</p>
<p> this is normal</p>
<p id=”pr”> this is another thing </p>
</body>
<html>
ফলে নিচের মত রেজাল্ট পাওয়া গেল
লক্ষ্য করুন, শেষের লাইনটা সবুজ হয়েছে। কেন? কারণ, sample নামের এক্সটারনাল স্টাইলশীটে আমি #pr{align:right;color:pink} লেখার মাধ্যমে pr id বিশিষ্ট সকল html ইলিমেন্টেকে সবুজ রঙে দেখানোর ইন্সট্রাকশন দিয়েছি। এর ফলে শেষের লাইনটা সবুজ, কারণ এর <p> ট্যাগের id হল pr.
ইন্টারনাল এবং ইনলাইন স্টাইলশীট সম্পর্কেতো আগের পর্বেই জেনেছেন।
এখন একএকটি পেইজে যদি ইন্টারনাল স্টাইল, ইনলাইন স্টাইল এবং এক্সটারনাল স্টাইল শীট একই সাথে ডিফাইন করা থাকে, তাহলে কি হবে ? নিচের কোডটি দেখলেই বুঝতে পারবেন।
১) <html>
২) <head>
৩) <link rel=”stylesheet” type=”text/css” href=”sample.css” />
৪) <style type=”text/css”>
৫) p{color:yellow}
৬) </style>
৭) </head>
৮) <body>
৯) <h1> HELLO EVERYBODY </h1>
১০) <p>this is the new day<p>
১১) <p id=”pr”> this is a center align paragraph</p>
১২) <p id=”pr”> this is normal</p>
১৩) <p id=”pr” style=”color:grey”> this is another thing </p>
১৪) </body>
১৫) <html>
এই কোডে এক্সটারনাল sample.css শীটকে লিঙ্ক করে দেয়া হয়েছে ৩নং লাইনে।
৪,৫,৬ নং লাইনে ইন্টারনাল স্টাইল ডিক্লেয়ার করা হয়েছে। ৫নং লাইনে p{color:yellow} এর মাধ্যমে সকল প্যারাগ্রাফকে হলুদ রঙ বিশিষ্ট করতে বলা হয়েছে।
১৩ নং লাইনে pr id বিশিষ্ট <p> ট্যাগের লেখাকে ধূসর রঙের লেখা প্রদর্শন করতে বলা হয়েছে।
Sample.css এক্সটারনাল শীটের কোড
h1{align:center; color:blue}
p{color:red}
#pr{align:right;color:green}
নিচের মত রেজাল্ট পাবেন।
এখানে দেখা যাচ্ছে এক্সটারনাল শীটে p{color:red} এর মাধ্যমে প্যারাগ্রাফের লাইনকে লাল রঙ এ দেখাতে বলা হলেও এইচটিএমএল ডকুমেন্টের <head> ট্যাগে ডিক্লেয়ার করা ইন্টারনাল স্টাইলে p{color:yellow} লেখার ফলে প্রথম প্যারাটি হলুদ দেখাচ্ছে।
২য় ও ৩য় প্যারার “pr” id বিশিষ্ট প্যারার জন্য ইন্টারনাল স্টাইল শীটে কোনো নির্দেশনা নেই,নির্দেশনা আছে এক্সটারনাল sample.css শীটের #pr{align:right;color:green} লাইনে,যেখানে এদের কালার সবুজ করতে বলা হয়েছে। তাই এদের রঙ সবুজ। যদি এক্সটারনাল শীটে এদের জন্য কোনো নির্দেশনা না থাকত,তবে এরা ইন্টারনাল শীটের {color:yellow} অনুসারে হলুদ রঙ প্রদর্শন করত।
১৩ নং লাইনে <p id=”pr” style=”color:grey”> অংশের মাধ্যমে <p> ট্যাগের মধ্যেই ধূসর রঙ নির্ধারন করা হয়েছে,তাই pr id বিশিষ্ট হওয়া সত্বেও এর sample.css এক্সটারনাল শীটের নির্দেশনা অনুসরন না করে প্রথমে লাইনের ভেতরের এই স্টাইল অনুসরন করল।
উপরের এই উদাহরন থেকে আমরা বলতে পারি, প্রায়োরিটি অনুসারে উপর থেকে নিচের দিকে সাজালে আমরা পাই,
১) ইনলাইন স্টাইল
২) ইন্টারনাল স্টাইল
৩) এক্সটারনাল স্টাইল
৪) ব্রাউজার ডিফল্ট
অর্থাৎ, যদি লাইনেই স্টাইল ডিফাইন করা থাকে তবে তার কাজ আগে হবে, এরপর যথাক্রমে ইন্টারনাল স্টাইল,এক্সটারনাল স্টাইল এবং সব শেষে ব্রাউজার ডিফল্ট স্টাইল প্রাধান্য পাবে যদি কোনো স্টাইলই ডিফাইন করা না থাকে।
আজ এ পর্যন্তই,কেমন লাগলো জানাবেন। ধন্যবাদ।
No comments:
Post a Comment