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
>> তাই CSS এর ঠিক কি না?

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
ওয়েব পৃষ্ঠা aesthetically দেখায় কিভাবে পরিবর্তন.

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 এর CSS এর কিভাবে ব্যবহার করবেন?

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
"ডিফল্ট টাইমস ফন্ট ব্যবহার করছেন? Helvetica তাই অনেক ভালো."

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 উপাদান এর 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
তারপর ডাবল কোট ভিতরে একটি CSS ঘোষণা করা:

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
উদাহরণস্বরূপ, রব একটি নীল পটভূমি সঙ্গে Helvetica তার হেডার টেক্সট চায়

34
00:02:05,650 --> 00:02:09,270
এবং টেক্সট কাছাকাছি আরও জায়গা, আমরা এই নির্বাচন করতে পারেন:

35
00:02:09,270 --> 00:02:19,800
শৈলী = "ফন্ট পরিবারের: Helvetica; ব্যাকগ্রাউন্ড রঙ: নীল; প্যাডিং: 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
আমরা ইনলাইন স্টাইলিং styling এই ধরনের কল.

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
আপনি যদি এই সব দেখে মনে হচ্ছে কত নোংরা এ peeved একটু পেয়ে শুরু হতে পারে.

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 সিলেক্টর নামক ব্যবহার করে তাদের CSS স্টাইলিং থেকে.

53
00:03:26,370 --> 00:03:31,780
CSS সিলেক্টর যা ঘোষণা প্রয়োগ করা হয় উপাদান নির্বাচন করুন ব্যবহার করা হয়.

54
00:03:31,780 --> 00:03:38,600
CSS এর ঘোষণা একটি তালিকা সঙ্গে মিলিত একটি নির্বাচক প্রায়ই একটি CSS শাসন হিসাবে উল্লেখ করা হয়.

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
তাই একটি সহজ CSS এর নিয়ম তৈরি করে শুরু করা যাক.

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
যা তার আইডি অ্যাট্রিবিউট দ্বারা একটি 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
এবং, শান্ত, রব এর মুখ্য পৃষ্ঠা Privacy Policy এখনও এটি প্রায় কালো সীমানা বিয়োগ নোংরা ইনলাইন কদর্যতা আছে.

69
00:04:34,160 --> 00:04:39,380
>> এখন, আমরা কি রব এর মুখ্য পৃষ্ঠা Privacy Policy এর H1 ভিতরে নির্বাচন করতে চেয়েছিলেন?

70
00:04:39,380 --> 00:04:44,400
আপনি "এর উপর একটি আইডি করা এবং তারপর আমাদের আগে শৈলী সরানো যাক." মনে হতে পারে

71
00:04:44,400 --> 00:04:48,760
যে কাজ করে, কিন্তু আপনি CSS এর উপাদান নির্বাচন করুন লেট অন্য উপায় আছে

72
00:04:48,760 --> 00:04:53,490
আমরা combinators সহজ নির্বাচক মিশ্রিত কল কি ব্যবহার করে.

73
00:04:53,490 --> 00:04:57,740
উদাহরণস্বরূপ, একটি হোয়াইটস্পেস অক্ষর একটি combinator হিসাবে ব্যবহার করা যাবে

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
স্থান সকল CSS ঘোষণা আবেদন, আমাদের 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
>> এই প্রবন্ধে CSS এর রূপে এই নতুন ফাইল অন্তর্ভুক্ত করার জন্য আমি শুধু এইচটিএমএল এর লিঙ্ক ট্যাগ ব্যবহার করব.

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 মার্কআপ এবং CSS, সম্পূর্ণরূপে পৃথক ফাইলের মধ্যে চমত্কারভাবে সংগঠিত

92
00:06:20,290 --> 00:06:26,090
যা প্রায় সবসময় ডিজাইনার HTML এবং CSS এর সাথে কাজ করা পছন্দ করে উপায়.

93
00:06:26,090 --> 00:06:30,180
>> আপনি ভাবছি করছি ক্ষেত্রে, সহজ নির্বাচক আইডি সিলেক্টর অন্তর্ভুক্ত

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
উপাদান পরে যে ঘটতে সমস্ত ভাইবোনের জন্য tilde,

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
>> Uh, আমি যেখানে শুরু করবেন?

112
00:07:40,780 --> 00:07:44,140
[Laughs] ঠিক আছে - আমাকে ছাড়া যে কাজ করা যাক.

113
00:07:44,140 --> 00:07:47,300
একটি কে - আমাকে যে বাক্যে কথন পরিবর্তন করা যাক.

114
00:07:50,580 --> 00:07:52,470
Ooh. দুঃখিত.