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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[CS50.TV] 

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