1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [سی ایس ایس]

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 حصوں میں نیچے مدت سی ایس ایس کو توڑنے کے ہیں:

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
لیکن شروعات کے لئے، سٹائل شیٹس سی ایس ایس کیا کرتا ہے میں بہت اشارے.

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
>> تو ہم ایچ ٹی ایم ایل کے ساتھ سی ایس ایس کو کس طرح استعمال کرتے ہیں؟

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
"واہ! میرا تعارف terrible لگ رہا ہے. جوزف، آپ کو ایک خوفناک ڈیزائنر ہو."

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
لوگوں کی سب سے واضح طریقہ بہت سے ابتدائی طور پر سی ایس ایس لکھا

22
00:01:13,530 --> 00:01:17,470
عنصر اپنے آپ میں ہم سٹائل کے ڈیکلیریشنز حق کہتے ڈال کرنے کے لئے تھا

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

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

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
>> ہم کولر اور زیادہ پیچیدہ سی ایس ایس کی خصوصیات میں سے کچھ کی وضاحت کو بچانے گے

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

39
00:02:34,140 --> 00:02:38,780
آپ کے دماغ میں کچھ ہے تو، صرف سی ایس ایس کے بعد آپ چاہتے اثر 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
سی ایس ایس شاید کر سکتے ہیں.

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
پلس اب آپ کی ایچ ٹی ایم ایل اور سی ایس ایس کے تمام intermixed اور cluttered کر رہے ہیں.

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

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

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

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

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

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

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
سب سے پہلے، ہماری ایچ ٹی ایم ایل کے سربراہ کے حصے میں سٹائل کے ٹیگز ڈال دو.

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
جس سے اس کے شناختی وصف کی طرف سے ایک HTML عنصر کو منتخب کرتا ہے.

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

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

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
اور ID = "روب" کے ساتھ عنصر کے اندر رہتے ہیں 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
>> اس دستاویز میں سی ایس ایس کے طور پر اس نئی فائل شامل کرنے کے لئے میں نے صرف ایچ ٹی ایم ایل کی لنک کے ٹیگ استعمال کریں گے.

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
تم مجھے یہاں ٹائپ دیکھنے سی ایس ایس کی لائنز کی صرف ایک جوڑے کے ساتھ،

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
ؤہ. معاف کیجئے گا.