সিএসএস সহ এইচটিএমএল এইচআর ট্যাগ স্টাইলিং

আপনি যদি আপনার ওয়েবসাইটগুলিতে অনুভূমিক, বিভাজক-শৈলী লাইন যুক্ত করতে চান তবে আপনার সাধারণ বিকল্পগুলিতে আপনার পৃষ্ঠাগুলিতে সেই লাইনের চিত্র ফাইলগুলি যুক্ত করা অন্তর্ভুক্ত, তবে আপনার ব্রাউজারকে সেগুলি পুনরুদ্ধার এবং লোড করতে হবে, যা সাইটটিতে নেতিবাচক প্রভাব ফেলতে পারে। কর্মক্ষমতা. আপনি সিএসএস সীমানা সম্পত্তিটি সীমানা যোগ করতেও ব্যবহার করতে পারেন যা লাইনের উপরে বা নীচে তলের নীচে কাজ করে, কার্যকরভাবে আপনার বিভাজক লাইন তৈরি করে।

অথবা - এখনো ভাল - অনুভূমিক নিয়মটির জন্য HTML উপাদানটি ব্যবহার করুন।

অনুভূমিক নিয়ম উপাদান

অনুভূমিক নিয়ম লাইন ডিফল্ট চেহারা আদর্শ নয়। তাদের নিকার দেখানোর জন্য, আপনি কীভাবে আপনার সাইটটি দেখতে চান তার সাথে লাইন থাকা এই উপাদানগুলির দৃশ্যমান চেহারাটি সমন্বয় করতে CSS যোগ করুন।

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

প্রস্থ এবং উচ্চতা ব্রাউজার জুড়ে সঙ্গতিপূর্ণ হয়

ওয়েব ব্রাউজার জুড়ে সামঞ্জস্যপূর্ণ একমাত্র শৈলী প্রস্থ এবং শৈলী হয়। এই লাইন কত বড় হবে সংজ্ঞায়িত। আপনি যদি প্রস্থ এবং উচ্চতা নির্ধারণ না করেন তবে ডিফল্ট প্রস্থটি 100 শতাংশ এবং ডিফল্ট উচ্চতা ২ পিক্সেল।

এই উদাহরণে প্রস্থটি মূল উপাদানগুলির 50 শতাংশ। (নীচের এই উদাহরণগুলি ইনলাইন শৈলীগুলি সহ সকল উদাহরণগুলি নোট করুন। একটি উত্পাদন সেটিংসে, এই শৈলীগুলি আসলে আপনার সমস্ত পৃষ্ঠায় পরিচালনার স্বচ্ছন্দে বহিরাগত স্টাইল শীটে লেখা হবে):

শৈলী = "প্রস্থ: 50%;">

এবং এই উদাহরণে উচ্চতা 2em হয়:

শৈলী = "উচ্চতা: 2em;">

সীমানা পরিবর্তন চ্যালেঞ্জ হতে পারে

আধুনিক ব্রাউজারে, ব্রাউজার সীমানা সামঞ্জস্য করে লাইন তৈরি করে। তাই যদি আপনি শৈলী সম্পত্তির সীমানাটি সরিয়ে ফেলেন, তবে লাইনটি পৃষ্ঠাতে অদৃশ্য হয়ে যাবে। আপনি দেখতে পারেন (ওয়েল, আপনি কিছু দেখতে পাবেন না, যেমন লাইন অদৃশ্য হয়ে যাবে) এই উদাহরণে:

শৈলী = "সীমানা: none;">

সীমানা আকার, রঙ এবং শৈলী সামঞ্জস্য করা লাইনটিকে আলাদা করে তুলবে এবং এটি সমস্ত আধুনিক ব্রাউজারগুলিতে একই প্রভাব ফেলবে। উদাহরণস্বরূপ, এই বিক্ষোভের মধ্যে সীমানা লাল, ড্যাশ এবং 1px প্রশস্ত:

শৈলী = "সীমানা: 1px ড্যাশ # 000;">

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

শৈলী = "উচ্চতা: 1.5em; প্রস্থ: 25em; সীমানা: 1px কঠিন # 000;">

যারা antiqued ব্রাউজার সত্যিই আজ ওয়েব ডিজাইন একটি উদ্বেগের বিষয় না, তারা মূলত আরো আধুনিক বিকল্প সঙ্গে প্রতিস্থাপিত হয়েছে।

একটি ব্যাকগ্রাউন্ড ইমেজ সঙ্গে একটি শোভাকর লাইন করুন

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

শৈলী = "উচ্চতা: 20px; পটভূমি: #fff url (aa010307.gif) কোন পুনরাবৃত্তি স্ক্রোল কেন্দ্র; সীমানা: none;">

এইচআর উপাদান রূপান্তর

CSS3 দিয়ে, আপনি আপনার লাইন আরও আকর্ষণীয় করতে পারেন। এইচআর উপাদান ঐতিহ্যগতভাবে একটি অনুভূমিক লাইন, কিন্তু সিএসএস সম্পত্তি পরিবর্তন সঙ্গে, আপনি কিভাবে তারা চেহারা পরিবর্তন করতে পারেন। এইচআর উপাদান একটি প্রিয় রূপান্তর ঘূর্ণন পরিবর্তন হয়।

আপনি আপনার এইচআর উপাদানটি ঘোরানতে পারেন যাতে এটি সামান্য বিজোড় হয়:

ঘন্টা {-মোজ-রূপান্তর: ঘোরা (10 ডিগ্রী);-webkit- রূপান্তর: ঘোরা (10 ডিগ্রী);-ও-রূপান্তর: ঘোরা (10 ডিগ্রী);-এমএস-ট্রান্সফর্ম: ঘোরা (10 ডিগ্রী);রূপান্তর: ঘোরা (10 ডিগ্রী);}

অথবা আপনি এটি ঘোরাতে পারেন যাতে এটি সম্পূর্ণ উল্লম্ব হয়:

ঘন্টা {-মোজ-রূপান্তর: ঘোরা (90 ডিগ্রী);-webkit- রূপান্তর: ঘোরা (90 ডিগ্রী);-ও-রূপান্তর: ঘোরা (90 ডিগ্রী);-এমএস-ট্রান্সফর্ম: ঘোরান (90 ডিগ্রী);রূপান্তর: ঘোরা (90 ডিগ্রী);}

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

আপনার পেজে লাইন পেতে আরেকটি উপায়

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