ایچ ٹی (افقی قاعدہ) ٹیگ اسٹائلنگ

ایچ ٹی ٹیگ کے ساتھ ویب صفحات پر دلچسپ لگتے ہوئے لائنز بنانا

اگر آپ کو اپنی ویب سائٹس پر افقی، علیحدگی پسند طرز لائنیں شامل کرنے کی ضرورت ہے تو، آپ کے پاس چند اختیارات ہیں. آپ ان صفحات کی اصل تصویر فائلوں کو آپ کے صفحے میں شامل کرسکتے ہیں، لیکن یہ آپ کے براؤزر کو ان فائلوں کو دوبارہ لوڈ کرنے اور لوڈ کرنے کے لئے کی ضرورت ہوگی، جس میں سائٹ کی کارکردگی پر منفی اثر پڑ سکتا ہے.

آپ سی ایس ایس کی سرحد کی جائیداد کو سرحدوں کو شامل کرنے کے لۓ استعمال کرسکتے ہیں جو ایک یا عنصر کے سب سے اوپر یا سب سے اوپر پر لائنوں کے طور پر کام کرتے ہیں، مؤثر طریقے سے آپریٹر لائن تشکیل دے سکتے ہیں.

آخر میں، آپ افقی قاعدہ کے لئے HTML عنصر کا استعمال کرسکتے ہیں

افقی اصول عنصر

اگر آپ نے کبھی ایک ویب صفحہ پر ایک عنصر ڈال دیا ہے تو، آپ کی شناخت کی گئی ہے کہ یہ لائنز ظاہر کئے گئے ڈیفالٹ طریقہ مثالی نہیں ہیں. اس کا مطلب یہ ہے کہ آپ کو ان عناصر کے بصری ظہور کو ایڈجسٹ کرنے کے لئے سی ایس ایس کو تبدیل کرنے کی ضرورت ہے تاکہ آپ اپنی سائٹ کو کس طرح دیکھنا چاہتے ہیں.

ایک بنیادی HR ٹیگ اس طرح ظاہر ہوتا ہے کہ براؤزر اسے ظاہر کرنا چاہتا ہے. جدید براؤزر عام طور پر غیر معمولی ایچ ٹی ٹیگز 100٪ کی چوڑائی، 2px کی اونچائی، اور لائن بنانے کے لئے سیاہ میں ایک 3D سرحد کے ساتھ ظاہر کرتا ہے.

یہاں ایک معیاری ایچ ڈی عنصر کا ایک مثال ہے یا آپ اس تصویر میں دیکھ سکتے ہیں کہ جدید براؤزرز میں کیسے بے ترتیب انسانی نظر آتی ہے.

چوڑائی اور اونچائی برعکس براؤزرز پر مشتمل ہے

واحد شیلیوں جو ویب براؤزرز کے مطابق مطابقت رکھتے ہیں وہ چوڑائی اور شیلیوں ہیں. یہ وضاحت کرتے ہیں کہ لائن کتنی بڑی ہوگی. اگر آپ چوڑائی اور اونچائی کی وضاحت نہیں کرتے تو پہلے سے طے شدہ چوڑائی 100٪ ہے اور پہلے سے طے شدہ اونچائی 2px ہے.

اس مثال میں چوڑائی والدین عنصر کا 50 فیصد ہے (ان ذیل میں ذیل میں درج ذیل مثالیں ملاحظہ کریں کہ ان لائن شیلیوں میں شامل ہیں. ایک پروڈکشن کی ترتیب میں، یہ سٹائل اصل میں آپ کے تمام صفحات میں مدیریت کے آسانی کے لئے ایک بیرونی طرز شیٹ میں لکھے جائیں گے):

سٹائل = "چوڑائی: 50٪؛">

اور اس مثال میں اونچائی دوائی ہے:

طرز = "اونچائی: 2em؛">>

سرحدوں کو تبدیل کرنے میں چیلنج ہوسکتا ہے

جدید براؤزر میں، براؤزر کو سرحد کو ایڈجسٹ کرکے لائن بناتا ہے. لہذا اگر آپ سٹائل کی جائیداد کے ساتھ سرحد کو ہٹائیں تو، اس صفحے پر صفحہ غائب ہو جائے گا. جیسا کہ آپ دیکھ سکتے ہیں (اچھی طرح سے، آپ کچھ بھی نہیں دیکھیں گے، جیسے لائنیں پوشیدہ ہوں گے) اس مثال میں:

سٹائل = "سرحد: کوئی نہیں".>

سرحد کا سائز، رنگ اور سٹائل کو ایڈجسٹ لائن لائن نظر آئیں گی اور تمام جدید براؤزروں پر بھی اثر پڑے گا. مثال کے طور پر، اس مظاہرے میں سرحدی سرخ، دھندلاہٹ اور 1px وسیع ہے:

سٹائل = "سرحد: 1px ڈراؤنڈ # 000؛">

لیکن اگر آپ سرحد اور اونچائی کو تبدیل کرتے ہیں تو، جدید براؤزرز میں ایسا کرنے کے بجائے سٹائل بہت پرانے براؤزرز میں تھوڑا مختلف نظر آتے ہیں. جیسا کہ آپ اس مثال میں دیکھ سکتے ہیں، اگر آپ IE7 اور اس میں درج ذیل ہیں (جو براؤزر جس طرح پر مبنی ہے اور اب مائیکروسافٹ کی طرف سے اس کی حمایت نہیں کی جاتی ہے) ایک بیولڈ اندرونی لائن ہے جس میں دوسرے براؤزرز میں (یعنی IE8 اور اپ سمیت) :

انداز = "اونچائی: 1.5 ملی میٹر؛ چوڑائی: 25em؛ سرحد: 1px ٹھوس # 000؛">

ان قدیم براؤزر واقعی ویب ڈھانچے میں بہت زیادہ تشویش نہیں ہیں، کیونکہ وہ زیادہ تر جدید اختیارات کے ساتھ تبدیل کر چکے ہیں.

ایک پس منظر کی تصویر کے ساتھ آرائشی لائن بنائیں

رنگ کے بجائے، آپ اپنے ایچ آر کے لئے ایک پس منظر کی تصویر کی وضاحت کرسکتے ہیں تاکہ یہ بالکل ٹھیک ہو جاسکتا ہے جیسے آپ اسے چاہتے ہیں، لیکن اب بھی آپ کے مارک اپ میں بنیادی طور پر دکھاتا ہے.

اس مثال میں ہم ایک ایسی تصویر کا استعمال کرتے ہیں جو تین لہروں میں سے ایک ہے. کسی بار پھر پس منظر کی تصویر کے طور پر اسے ترتیب دینے سے، اس مواد میں ایک وقفے پیدا ہوتا ہے جو آپ جیسے کتابوں میں دیکھتا ہے جیسے لگ رہا ہے.

طرز = "اونچائی: 20 پی پی، پس منظر: #fff url (aa010307.gif) کوئی دوبارہ طومار مرکز؛ سرحد: کسی بھی نہیں؛">

HR عناصر کو تبدیل کرنا

CSS3 کے ساتھ، آپ اپنی لائنز مزید دلچسپ بنا سکتے ہیں. HR عنصر روایتی طور پر ایک افقی لائن ہے، لیکن سی ایس ایس کو جائیداد تبدیل کرنے کے ساتھ، آپ تبدیل کرسکتے ہیں کہ وہ کس طرح نظر آتے ہیں. HR عنصر پر ایک پسندیدہ تبدیلی گردش کو تبدیل کرنا ہے.

آپ اپنے HR عنصر کو گھوم سکتے ہیں تاکہ یہ تھوڑا سا اختیاری ہے.

hr {
مووم تبدیل کریں: باری باری دکھائیں (10 ڈگری)؛
ویب ٹیٹ ٹرانسمیشن: گھمائیں (10 ڈگری)؛
تبدیل کرنے: گھومنے (10 ڈگری)؛
حساس تبدیلیاں: گھمائیں (10 ڈگری)؛
تبدیل کریں: گھمائیں (10 ڈگری)؛
}

یا آپ اسے گھوم کر سکتے ہیں تاکہ یہ عمودی طور پر عمودی ہے.

hr {
موومنٹ تبدیل کرنا: گھومنے (90 ڈگری)؛
ویب ٹیٹ ٹرانسمیشن: گھومنے (90 ڈگری)؛
تبدیل کرنے: گھومنے (90 ڈگری)؛
حساس تبدیلیاں: گھومنے (90 ڈگری)؛
تبدیل کریں: گھومنے (90 ڈگری)؛
}

یاد رکھو کہ اس دستاویز میں اپنے موجودہ مقام پر مبنی HR کو گھومتا ہے، لہذا آپ اسے پوزیشننگ کو ایڈجسٹ کرنے کی ضرورت ہوسکتی ہے جہاں آپ چاہتے ہیں. اس ڈیزائن کو عمودی لائنوں کو شامل کرنے کے لئے اس کا استعمال کرنے کی سفارش نہیں کی جاتی ہے، لیکن یہ ایک دلچسپ اثر حاصل کرنے کا ایک طریقہ ہے.

اپنے صفحات پر لائنز حاصل کرنے کا ایک اور طریقہ

ایک چیز جسے کچھ لوگ انسانی حقوق کے عناصر کے بجائے استعمال کرتے ہیں، دوسرے عناصر کی سرحدوں پر بھروسہ کرنا ہے. لیکن بعض اوقات ایچ آر سرحدوں کو قائم کرنے کی کوشش کرنے سے کہیں زیادہ آسان اور استعمال کرنے میں آسان ہے. کچھ براؤزرز کے باکس ماڈل کے مسئلے کو بھی حد تک بھی مشکل بنا سکتے ہیں.