1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [CSS]

2
00:00:02,000 --> 00:00:04,810
[یوسف Ong - ہارورڈ یونیورسٹی]

3
00:00:04,810 --> 00:00:07,160
یہ [CS50 ہے. CS50.TV] -

4
00:00:07,160 --> 00:00:11,430
>> آج ہم نے سی ایس ایس کے بارے میں بات کریں گے یا سٹایل شیٹس جھرن کاری.

5
00:00:11,430 --> 00:00:14,330
>> تو بالکل وہی جو سی ایس ایس کیا ہے؟

6
00:00:14,330 --> 00:00:17,120
ٹھیک ہے، 2 حصوں میں نیچے کی اصطلاح CSS ٹوٹنے:

7
00:00:17,120 --> 00:00:19,510
جھرن کاری اور سٹائل شیٹس.

8
00:00:19,510 --> 00:00:23,900
جھرن کاری تھوڑا سا زیادہ پیچیدہ ہے، اور یہ کچھ ہم ایک اور ویڈیو میں احاطہ کرتا ہوں.

9
00:00:23,900 --> 00:00:27,930
لیکن شروع کے لئے، انداز شیٹس جو CSS ہے میں بہت زیادہ اشارہ ہے.

10
00:00:27,930 --> 00:00:30,880
یہ ایک ویب کے صفحے کے HTML کے سٹائل کہتے ہیں،

11
00:00:30,880 --> 00:00:33,720
تبدیل کر کہ ویب کے صفحے کس طرح خوبصورت لگ رہا ہے.

12
00:00:33,720 --> 00:00:38,310
اس صفحے پر سب کچھ متن کا فونٹ سے مواد کی پوزیشننگ کا مطلب ہے کہ

13
00:00:38,310 --> 00:00:43,800
ایک گول کے باکس کے کونے کونے کرنے یا متن کے سائے انہوں نے مزید کہا کی طرح دیگر ٹھنڈی چیزیں.

14
00:00:43,800 --> 00:00:48,230
تم پاگل چیزیں بھی طرح چیزیں سکرین پر ذی کر سکتے ہیں.

15
00:00:48,230 --> 00:00:51,700
>> تو ہم HTML کے ساتھ کس طرح سی ایس ایس استعمال کرتے ہیں؟

16
00:00:51,700 --> 00:00:53,620
اس سائٹ غریب نظر میں صرف لکھا لے لو.

17
00:00:53,620 --> 00:00:57,290
اگر روب اس سائٹ پر ابھی نظر آئے تھے، وہ شاید جیسے کچھ کہنا چاہتے ہیں،

18
00:00:57,290 --> 00:01:01,730
"واہ میرا تعارف خوفناک لگتا ہے. یوسف، آپ کو ایک خوفناک ڈیزائنر ہو."

19
00:01:01,730 --> 00:01:05,110
"ڈیفالٹ بارشکریہ فونٹ کا استعمال کرتے ہوئے ہیلویٹکا اتنا بہتر ہے.؟"

20
00:01:05,110 --> 00:01:09,600
>> تو اسٹائل روب چاہتا ہے کا اطلاق کرنے کا آسان ترین طریقہ کیا ہو سکتا ہے؟

21
00:01:09,600 --> 00:01:13,530
شروع میں سب سے واضح لوگوں کی راہ بہت CSS لکھا

22
00:01:13,530 --> 00:01:17,470
عنصر میں ہی ڈال جو ہم طرز کا اعلان صحیح کہتے ہیں

23
00:01:17,470 --> 00:01:20,560
HTML طرز وصف کا استعمال کرتے ہوئے.

24
00:01:20,560 --> 00:01:26,420
ایک سٹائل کا اعلان صرف HTML عنصر CSS جائیداد کی پر مشتمل ہوتا ہے ہم کو تبدیل کرنا چاہتے ہیں

25
00:01:26,420 --> 00:01:32,140
کے بعد آخر میں جائیداد اور ایک نیم وقفہ کی نئی قیمت کی طرف سے بڑی آنت کی طرف سے کے بعد.

26
00:01:32,140 --> 00:01:36,600
مثال کے طور پر، دو کا کہنا ہے کہ روب ان کے تعارف کے ارد گرد ایک سیاہ سرحد چاہتا ہے.

27
00:01:36,600 --> 00:01:40,040
ہم سب سے پہلے روب div انداز وصف یہاں ڈال

28
00:01:40,040 --> 00:01:43,830
پھر ڈبل واوین کے اندر سی ایس ایس کے اعلان ڈال:

29
00:01:43,830 --> 00:01:47,880
"سرحد: 1px ٹھوس سیاہ"

30
00:01:47,880 --> 00:01:52,480
ٹھوس پکسل 1 سرحد کی چوڑائی سے مراد، سرحد کے سٹائل سے مراد ہے،

31
00:01:52,480 --> 00:01:56,640
اور آخر میں رنگ کا تعین کرتا ہے، بارڈر کا رنگ کیا ہے.

32
00:01:56,640 --> 00:02:01,220
>> اگر ہم ایک عنصر پر ایک سے زیادہ شیلیوں چاہتے ہیں، تسلسل میں یہ اعلان کیا لکھنا.

33
00:02:01,220 --> 00:02:05,650
مثال کے طور پر، اگر روب ایک نیلے رنگ کے پس منظر کے ساتھ ہیلویٹکا میں اپنے ہیڈر متن کی ضرورت ہے

34
00:02:05,650 --> 00:02:09,270
اور متن کے ارد گرد کی جگہ، ہم یہ کر سکتے ہیں:

35
00:02:09,270 --> 00:02:19,800
سٹائل = "5px فونٹ خاندان: ہیلویٹکا.:، پس منظر کا رنگ نیلے بھرتی"

36
00:02:22,150 --> 00:02:28,010
گزشتہ نیم وقفہ اصل اختیاری ہے، لیکن لوگوں کی مستقل مزاجی کے لئے عام طور پر اس میں رکھ.

37
00:02:28,010 --> 00:02:32,180
>> ہم ٹھنڈے اور زیادہ پیچیدہ CSS خصوصیات میں سے کچھ کی وضاحت کو بچانے گے

38
00:02:32,180 --> 00:02:34,140
ایک اور ویڈیو کے لئے.

39
00:02:34,140 --> 00:02:38,780
اگر آپ کے دماغ میں کچھ ہے، صرف اثر آپ چاہتے ہیں CSS کے بعد Googling

40
00:02:38,780 --> 00:02:41,590
آپ کو شاید کافی اچھے نتائج دے گا.

41
00:02:41,590 --> 00:02:44,530
ڈاؤن لوڈ، اتارنا بات یہ ہے کہ سی ایس ایس بہت وسیع ہے،

42
00:02:44,530 --> 00:02:48,470
وجہ کے اندر اندر - تو مشکلات ہیں اگر تم کچھ کرنا چاہتے ہیں ہے -

43
00:02:48,470 --> 00:02:51,350
CSS شاید یہ کر سکتے ہیں.

44
00:02:51,350 --> 00:02:54,750
ہم اس طرح کی ان لائن اسٹائل اسٹائل کے کہتے ہیں.

45
00:02:54,750 --> 00:02:59,030
عنصر انداز ہے، اچھی طرح شروع ٹیگ کے ساتھ لائن میں ہے.

46
00:02:59,030 --> 00:03:01,770
>> لوگ جو واقعی منظم رکھا جائے پسند کے لئے،

47
00:03:01,770 --> 00:03:05,800
آپ کو یہ کس طرح گندا لگتا ہے بالکل ناراج بہت کم ہو رہی شروع کر سکتے ہیں.

48
00:03:05,800 --> 00:03:09,810
اگر آپ کو اس صفحے پر ہر عنصر کے لئے کرنا پڑا کلپنا

49
00:03:09,810 --> 00:03:13,690
کے علاوہ اب آپ HTML اور CSS سب intermixed ہیں اور cluttered ہے.

50
00:03:13,690 --> 00:03:15,500
مجموعی، ہے نا؟

51
00:03:15,500 --> 00:03:21,110
اس کو حل کرنے کے لئے، لوگوں کو آخر میں ان HTML مارک اپ کو الگ کرنے پر پکڑنے شروع کر دیا

52
00:03:21,110 --> 00:03:26,370
کہا جاتا CSS سلیکٹرز کچھ کا استعمال کرتے ہوئے کی طرف سے ان کی سی ایس ایس اسٹائل سے.

53
00:03:26,370 --> 00:03:31,780
CSS سلیکٹرز عناصر جس کا اعلان لاگو ہوتے ہیں کو منتخب کرنے کے لئے استعمال کیا جاتا ہے.

54
00:03:31,780 --> 00:03:38,600
سی ایس ایس کا اعلان کی ایک فہرست کے ساتھ مل کر سلیکٹر اکثر CSS حکمرانی کے طور پر کہا جاتا ہے.

55
00:03:38,600 --> 00:03:43,260
ان قوانین کھلے اور قریبی HTML طرز کے ٹیگز کے درمیان دی جائے گی،

56
00:03:43,260 --> 00:03:46,120
اکثر دستاویز کے سربراہ.

57
00:03:46,120 --> 00:03:49,000
>> یہ بہت آسان ہے ایک مثال کے ساتھ دیکھنے کے لئے،

58
00:03:49,000 --> 00:03:53,000
ایک سادہ سی ایس ایس حکمرانی کی تشکیل کی طرف سے شروع کرتے ہیں.

59
00:03:53,000 --> 00:03:58,180
پہلے، ہمارے HTML کے سربراہ کے حصے میں انداز ٹیگز ڈال.

60
00:03:58,180 --> 00:04:00,020
اگلا، سلیکٹر.

61
00:04:00,020 --> 00:04:03,490
ہم آسان سلیکٹرز میں سے ایک، ہیش کی علامت کا استعمال کرتے ہوئے کی طرف سے شروع کر دیں گے،

62
00:04:03,490 --> 00:04:08,080
جو اس ID کے وصف کی طرف سے ایک HTML عنصر منتخب کرتا ہے.

63
00:04:08,080 --> 00:04:11,850
اس صورت میں ہم div ہے کہ روب تعارف کی نمائندگی کرتا ہے کو منتخب کریں گے.

64
00:04:11,850 --> 00:04:16,740
div ID، روب کی طرف سے کے بعد ہیش کی علامت ٹائپ کرکے.

65
00:04:16,740 --> 00:04:18,579
اب اعلان کیا.

66
00:04:18,579 --> 00:04:24,090
ہم کھلے اور بند منحنی خطوط وحدانی شامل ہیں اور روب div پر ہمارے پہلے ان لائن کا اعلان منتقل

67
00:04:24,090 --> 00:04:26,880
ان منحنی خطوط وحدانی کے اندر، تازہ کریں،

68
00:04:26,880 --> 00:04:34,160
ڈاؤن لوڈ، اتارنا، روب تعارف اب بھی اس کے ارد گرد ایک سیاہ سرحد کے بغیر گندا ان لائن بدسورتی ہے.

69
00:04:34,160 --> 00:04:39,380
>> اب، کیا ہوا اگر ہم روب تعارف کی H1 اندر کو منتخب کرنے کے لئے کرنا چاہتا تھا؟

70
00:04:39,380 --> 00:04:44,400
تمہیں لگتا ہے کہ، "چلو، اس پر ایک ID ڈال دیا اور اس کے بعد ہمارے پہلے سٹائل منتقل." ہو سکتا ہے

71
00:04:44,400 --> 00:04:48,760
اس کا کام کرتا ہے، لیکن اس کی سی ایس ایس میں آپکو عناصر منتخب کرنے کے دیگر طریقوں ہیں.

72
00:04:48,760 --> 00:04:53,490
کا استعمال کرتے ہوئے جو ہم combinators آسان سلیکٹرز اختلاط فون کی طرف سے.

73
00:04:53,490 --> 00:04:57,740
مثال کے طور پر، ایک وائٹ کردار ایک امتزاج کے طور پر استعمال کیا جا سکتا ہے

74
00:04:57,740 --> 00:05:03,510
1 سلیکٹر کہ دوسرے سلیکٹر کے اندر رہتے تمام مثالوں کی وضاحت.

75
00:05:03,510 --> 00:05:06,630
یہ بہت زیادہ پیچیدہ سے یہ اصل میں ہے لگتا ہے.

76
00:05:06,630 --> 00:05:08,830
یہ ایک مثال ہے.

77
00:05:08,830 --> 00:05:13,900
ہم ٹائپ #، ایک جگہ شامل کریں لوٹنے، اور ایک H1 کے ساتھ اس کی پیروی،

78
00:05:13,900 --> 00:05:18,840
ایک اور سادہ سلیکٹر ٹیگ سلیکٹر عناصر کی اقسام کا انتخاب قرار دیا

79
00:05:18,840 --> 00:05:21,200
divs یا پیرا طرح.

80
00:05:21,200 --> 00:05:26,140
خلا میں میں ہمارے 2 سادہ سلیکٹرز کو اکٹھا، میں تمام سی ایس ایس کا اعلان کا اطلاق

81
00:05:26,140 --> 00:05:32,560
H1 ٹیگ جو کی شناخت = "روب" کے ساتھ عناصر کے اندر رہتے ہیں گھوبگھرالی منحنی خطوط وحدانی.

82
00:05:32,560 --> 00:05:38,290
بس آپ کو قائل ہے کہ یہ کام کرتا ہے، میں سفید، تازہ کرنے کیلئے فونٹ کا رنگ تبدیل کریں گے،

83
00:05:38,290 --> 00:05:42,090
اور، دیکھو، روب ہیڈر اب سفید ہے.

84
00:05:42,090 --> 00:05:47,510
>> کی بجائے قوانین ان لائن سٹائل کا استعمال کرتے ہوئے کی طرف سے اس کام کا سب دکھا جاتا ہے

85
00:05:47,510 --> 00:05:50,510
ہم بہت صاف کوڈ حاصل کر سکتے ہیں.

86
00:05:50,510 --> 00:05:53,900
اصل میں، اگر اس انداز بلاک شروع تھوڑا سا بڑی ہو رہی ہے،

87
00:05:53,900 --> 00:05:58,340
میں یہ سٹائل بھی ایک مختلف فائل میں مکمل طور پر ھیںچو کر سکتے ہیں.

88
00:05:58,340 --> 00:06:05,120
>> اس دستاویز میں سی ایس ایس کے طور پر اس نئی فائل شامل میں HTML لنک ٹیگ استعمال کریں گے.

89
00:06:05,120 --> 00:06:10,320
یہاں میں نے اسے کہہ رہا ہوں کہ میں ایک بیرونی سٹائل شیٹ میں منسلک کر رہا ہوں رہا ہوں، rel وصف،

90
00:06:10,320 --> 00:06:14,840
اور میرے href کی وصف کے ساتھ فائل کی راہ کی وضاحت.

91
00:06:14,840 --> 00:06:20,290
اب میری HTML مارک اپ اور مکمل طور پر علیحدہ فائلوں میں سی ایس ایس اچھی طرح منعقد کی جاتی ہیں،

92
00:06:20,290 --> 00:06:26,090
جس میں تقریبا ہمیشہ ہی طرح ڈیزائنرز اسکے لیے سی ایس ایس اور ایچ ٹی ایم ایل کے ساتھ کام کرنے کو ترجیح دیتے ہیں.

93
00:06:26,090 --> 00:06:30,180
>> اگر آپ سوچ رہے ہیں، سادہ سلیکٹرز ID سلیکٹرز میں شامل ہیں

94
00:06:30,180 --> 00:06:33,100
اور وہ ہم نے ابھی دیکھا جیسے ٹیگ سلیکٹرز

95
00:06:33,100 --> 00:06:38,610
کے طور پر اچھی طرح سے کے طور پر ایک مخصوص طبقے کے ساتھ عناصر کو منتخب کرنے کے لئے کلاس کے سلیکٹرز،

96
00:06:38,610 --> 00:06:44,000
قسم طرح دیگر صفات کی طرف سے عناصر کو منتخب کرنے کے لئے وصف سلیکٹرز = "ریڈیو"

97
00:06:44,000 --> 00:06:49,180
ریڈیو بٹن آدانوں، اور اس طرح pseudoselectors کے لئے گھمائیں اور توجہ مرکوز

98
00:06:49,180 --> 00:06:55,260
عنصر پائے جاتے ہیں پر جب بات چیت mousing طرح اسٹائل کی وضاحت کرنے کے لئے.

99
00:06:55,260 --> 00:06:58,950
>> عام combinators تمام بچوں کے لئے وائٹ شامل ہیں

100
00:06:58,950 --> 00:07:02,080
اور کوما سلیکٹرز کو ممتاز کرنے کے لئے.

101
00:07:02,080 --> 00:07:06,370
دوسروں نے آپ کا سامنا کر سکتے ہیں براہ راست صرف بچوں کے لئے تیر کو شامل کریں،

102
00:07:06,370 --> 00:07:10,440
تمام بہن بھائیوں کے لئے جو عنصر کے بعد ہوتے ہیں ٹلڈا،

103
00:07:10,440 --> 00:07:16,010
1 بھائی جو عنصر کے بعد فوری طور پر آتا ہے کے لئے پلس سائن ان کریں.

104
00:07:16,010 --> 00:07:18,540
>> ان سلیکٹرز اور combinators کو ملا کر،

105
00:07:18,540 --> 00:07:22,910
آپ کو آپ کو دیئے گئے ویب کے صفحے پر حاصل کر سکتے ہیں کے لئے اسٹائل کی حد بڑھانے کے کر سکتے ہیں

106
00:07:22,910 --> 00:07:25,050
سی ایس ایس اور زیادہ مؤثر طریقے سے لکھتے ہیں.

107
00:07:25,050 --> 00:07:28,370
CSS کی لائنیں تم نے دیکھا ہے مجھے یہاں ٹائپ کے ایک جوڑے کے ساتھ،

108
00:07:28,370 --> 00:07:34,460
میں کچھ اس طرح کی طرح اس نظر کی طرح کچھ فوری طور پر کر سکتے ہیں.

109
00:07:34,460 --> 00:07:37,080
>> میں یوسف ہوں، اور اس CS50 ہے.

110
00:07:37,080 --> 00:07:39,260
>> [CS50.TV]

111
00:07:39,260 --> 00:07:40,780
>> اہ، میں کہاں سے آغاز کروں؟

112
00:07:40,780 --> 00:07:44,140
میرے بغیر ایسا - [ہنسی] ٹھیک ہے.

113
00:07:44,140 --> 00:07:47,300
ایک کو شامل کریں - مجھے اس الفاظ کو تبدیل.

114
00:07:50,580 --> 00:07:52,470
ؤہ. معاف کیجئے گا.