HTML <style> ট্যাগ
নির্দিষ্টকরণ ও ব্যবহার
<style>
ট্যাগটি ডকুমেন্টের শৈলীতে নির্দিষ্টকরণ (CSS) প্রদর্শন করে。
এখানে <style>
এলিমেন্টে, আপনি এইচটিএমএল এলিমেন্টকে ব্রাউজারের প্রদর্শনকে নির্দিষ্ট করতে পারেন。
মনতোষ্টক, style এলিমেন্ট HTML ডকুমেন্টের ভুত ভূমিতে স্থাপিত CSS শৈলী নির্দিষ্ট করে, যখন link এলিমেন্ট বাইরের শৈলীসূচীকে আয়োজিত করে।
style এলিমেন্ট HTML ডকুমেন্টের কোনও অংশে বিদ্যমান হতে পারে।একটি ডকুমেন্টে একাধিক style এলিমেন্ট থাকতে পারে, তাই সবগুলো শৈলী নির্দিষ্ট হেড অংশে প্রবেশ করতে হবে না।টেমপ্লেট ইঞ্জিন দ্বারা পাতা তৈরি করার ক্ষেত্রে এই বৈশিষ্ট্য অত্যন্ত সাহায্যকারী, কারণ এভাবে পৃষ্ঠার বিশেষ শৈলী টেমপ্লেটের শৈলীকে পূরক করা যায়。
অন্যান্য পড়ুন:
HTML শিক্ষাক্রম:HTML CSS
CSS শিক্ষাক্রম:CSS শিক্ষাক্রম
HTML DOM পরিচ্ছেদক:Style অবজেক্ট
প্রয়াস
উদাহরণ 1
ব্যবহার করুন <style>
এলিমেন্ট এইচটিএমএল ডকুমেন্টের জন্য সরল শৈলীসূচী প্রয়োগ করে:
<html> <head> <style> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>এটি শিরোনাম</h1> <p>এটি একটি অনুচ্ছেদ</p> </body> </html>
উদাহরণ 2
একই এলিমেন্টের বিভিন্ন শৈলী:
<html> <head> <style> h1 {color:red;} p {color:blue;} </style> <style> h1 {color:green;} p {color:pink;} </style> </head> <body> <h1>এটি শিরোনাম</h1> <p>এটি একটি অনুচ্ছেদ</p> </body> </html>
সূচনা ও মন্তব্য
মনতোষ্টক:ব্রাউজার শৈলীসূচী পড়তে যখন, তা এইচটিএমএল ডকুমেন্টটি ফরম্যাট করে।যদি একই সেলেক্টর (এলিমেন্ট) জন্য আলাদা শৈলীসূচীতে কিছু এটা নির্দিষ্ট করা হয়, তবে সর্বশেষ পড়া শৈলীসূচীর মান ব্যবহার করা হবে (দেখুন উপরের উদাহরণ)!
তুলনায়:বাইরের স্টাইলশীটে লিঙ্ক করতে, ব্যবহার করুন <link> ট্যাগ。
তুলনায়:সাইটের স্টাইলশীটের বিষয়ে আরও তথ্য জানতে, আমাদের CSS শিক্ষাক্রম。
বৈশিষ্ট্য
বৈশিষ্ট্য | মান | বর্ণনা |
---|---|---|
media | মিডিয়া কোয়াইয়ার | স্টাইল ব্যবহারের মিডিয়াটি নির্ধারণ করে |
type | text/css | ডিফলেট মিডিয়া টাইপটি নির্ধারণ করে <style> ট্যাগ |
গ্লোবাল বৈশিষ্ট্য
<style>
ট্যাগটি ইভেন্ট বৈশিষ্ট্যও সমর্থন করে HTML-তে গ্লোবাল বৈশিষ্ট্য。
ইভেন্ট বৈশিষ্ট্য
<style>
ট্যাগটি ইভেন্ট বৈশিষ্ট্যও সমর্থন করে HTML-তে ইভেন্ট বৈশিষ্ট্য。
ডিফল্ট সিএসএস সেটিং
অধিকাংশ ব্রাউজারগুলো নিম্নলিখিত ডিফল্ট মান দেখাবে: <style>
এলিমেন্ট:
style { display: none; }
ব্রাউজার সমর্থন
চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
---|---|---|---|---|
চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
সহায়তা | সহায়তা | সহায়তা | সহায়তা | সহায়তা |