[Powered by Google Translate] [CSS] [یوسف Ong - ہارورڈ یونیورسٹی] یہ [CS50 ہے. CS50.TV] - 

آج ہم نے سی ایس ایس کے بارے میں بات کریں گے یا سٹایل شیٹس جھرن کاری. 

تو بالکل وہی جو سی ایس ایس کیا ہے؟ ٹھیک ہے، 2 حصوں میں نیچے کی اصطلاح CSS ٹوٹنے: جھرن کاری اور سٹائل شیٹس. جھرن کاری تھوڑا سا زیادہ پیچیدہ ہے، اور یہ کچھ ہم ایک اور ویڈیو میں احاطہ کرتا ہوں. لیکن شروع کے لئے، انداز شیٹس جو CSS ہے میں بہت زیادہ اشارہ ہے. یہ ایک ویب کے صفحے کے HTML کے سٹائل کہتے ہیں، تبدیل کر کہ ویب کے صفحے کس طرح خوبصورت لگ رہا ہے. اس صفحے پر سب کچھ متن کا فونٹ سے مواد کی پوزیشننگ کا مطلب ہے کہ ایک گول کے باکس کے کونے کونے کرنے یا متن کے سائے انہوں نے مزید کہا کی طرح دیگر ٹھنڈی چیزیں. تم پاگل چیزیں بھی طرح چیزیں سکرین پر ذی کر سکتے ہیں. 

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

تو اسٹائل روب چاہتا ہے کا اطلاق کرنے کا آسان ترین طریقہ کیا ہو سکتا ہے؟ شروع میں سب سے واضح لوگوں کی راہ بہت CSS لکھا عنصر میں ہی ڈال جو ہم طرز کا اعلان صحیح کہتے ہیں HTML طرز وصف کا استعمال کرتے ہوئے. ایک سٹائل کا اعلان صرف HTML عنصر CSS جائیداد کی پر مشتمل ہوتا ہے ہم کو تبدیل کرنا چاہتے ہیں کے بعد آخر میں جائیداد اور ایک نیم وقفہ کی نئی قیمت کی طرف سے بڑی آنت کی طرف سے کے بعد. مثال کے طور پر، دو کا کہنا ہے کہ روب ان کے تعارف کے ارد گرد ایک سیاہ سرحد چاہتا ہے. ہم سب سے پہلے روب div انداز وصف یہاں ڈال پھر ڈبل واوین کے اندر سی ایس ایس کے اعلان ڈال: "سرحد: 1px ٹھوس سیاہ" ٹھوس پکسل 1 سرحد کی چوڑائی سے مراد، سرحد کے سٹائل سے مراد ہے، اور آخر میں رنگ کا تعین کرتا ہے، بارڈر کا رنگ کیا ہے. 

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

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

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

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

اب، کیا ہوا اگر ہم روب تعارف کی H1 اندر کو منتخب کرنے کے لئے کرنا چاہتا تھا؟ تمہیں لگتا ہے کہ، "چلو، اس پر ایک ID ڈال دیا اور اس کے بعد ہمارے پہلے سٹائل منتقل." ہو سکتا ہے اس کا کام کرتا ہے، لیکن اس کی سی ایس ایس میں آپکو عناصر منتخب کرنے کے دیگر طریقوں ہیں. کا استعمال کرتے ہوئے جو ہم combinators آسان سلیکٹرز اختلاط فون کی طرف سے. مثال کے طور پر، ایک وائٹ کردار ایک امتزاج کے طور پر استعمال کیا جا سکتا ہے 1 سلیکٹر کہ دوسرے سلیکٹر کے اندر رہتے تمام مثالوں کی وضاحت. یہ بہت زیادہ پیچیدہ سے یہ اصل میں ہے لگتا ہے. یہ ایک مثال ہے. ہم ٹائپ #، ایک جگہ شامل کریں لوٹنے، اور ایک H1 کے ساتھ اس کی پیروی، ایک اور سادہ سلیکٹر ٹیگ سلیکٹر عناصر کی اقسام کا انتخاب قرار دیا divs یا پیرا طرح. خلا میں میں ہمارے 2 سادہ سلیکٹرز کو اکٹھا، میں تمام سی ایس ایس کا اعلان کا اطلاق H1 ٹیگ جو کی شناخت = "روب" کے ساتھ عناصر کے اندر رہتے ہیں گھوبگھرالی منحنی خطوط وحدانی. بس آپ کو قائل ہے کہ یہ کام کرتا ہے، میں سفید، تازہ کرنے کیلئے فونٹ کا رنگ تبدیل کریں گے، اور، دیکھو، روب ہیڈر اب سفید ہے. 

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

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

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

عام combinators تمام بچوں کے لئے وائٹ شامل ہیں اور کوما سلیکٹرز کو ممتاز کرنے کے لئے. دوسروں نے آپ کا سامنا کر سکتے ہیں براہ راست صرف بچوں کے لئے تیر کو شامل کریں، تمام بہن بھائیوں کے لئے جو عنصر کے بعد ہوتے ہیں ٹلڈا، 1 بھائی جو عنصر کے بعد فوری طور پر آتا ہے کے لئے پلس سائن ان کریں. 

ان سلیکٹرز اور combinators کو ملا کر، آپ کو آپ کو دیئے گئے ویب کے صفحے پر حاصل کر سکتے ہیں کے لئے اسٹائل کی حد بڑھانے کے کر سکتے ہیں سی ایس ایس اور زیادہ مؤثر طریقے سے لکھتے ہیں. CSS کی لائنیں تم نے دیکھا ہے مجھے یہاں ٹائپ کے ایک جوڑے کے ساتھ، میں کچھ اس طرح کی طرح اس نظر کی طرح کچھ فوری طور پر کر سکتے ہیں. 

میں یوسف ہوں، اور اس CS50 ہے. 

[CS50.TV] 

اہ، میں کہاں سے آغاز کروں؟ میرے بغیر ایسا - [ہنسی] ٹھیک ہے. ایک کو شامل کریں - مجھے اس الفاظ کو تبدیل. ؤہ. معاف کیجئے گا.