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
>> আজ আমরা CSS এর সম্পর্কে কথা বলা বা করা স্টাইল শীট Cascading করব.

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
Cascading এবং স্টাইল শীট.

8
00:00:19,510 --> 00:00:23,900
Cascading একটি সামান্য বিট আরো জটিল, এবং এটা আমরা অন্য কিছু ভিডিওতে আবরণ করব.

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
যদি Rob এই সাইট এ মুহূর্তে চেহারা ছিল, তিনি সম্ভবত এরকম কিছু একটা বলতে চাই,

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
>> তাই সহজ উপায় styling Rob চায় প্রযোজ্য হতে পারে?

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

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

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 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
আপনি একটু মলিন কিভাবে এই সব দেখতেও বিরক্ত পেতে শুরু হতে পারে.

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 এর ব্যবহার করে তাদের থেকে সিএসএস styling.

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
এই নিয়মগুলি খোলা এবং বন্ধ 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
তাই CSS এর একটি সহজ নিয়ম তৈরি করে দেওয়া এর শুরু.

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
আপনি, মনে হয় "এর এটি একটি আইডি এবং তারপর আমাদের আগে করা শৈলী সরানো যাক." হতে পারে

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
আমরা #, Rob একটি স্থান যুক্ত, এবং একটি 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 সহজ নির্বাচক সম্মিলন, সকল CSS এর ঘোষণা আবেদন

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
>> এই নথিতে এই সিএসএস হিসাবে নতুন ফাইল অন্তর্ভুক্ত আমি শুধু এইচটিএমএল এর লিংক ট্যাগ ব্যবহার করব.

89
00:06:05,120 --> 00:06:10,320
এখানে আমি এটা বলছে না যে আমি একটি বহিস্থিত স্টাইল শীট এ লিঙ্ক করছি, এখন rel বৈশিষ্ট্য,

90
00:06:10,320 --> 00:06:14,840
এবং ফাইল যাও আমার href attribute এর সঙ্গে পাথ উল্লেখ.

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
জন্য styling উল্লেখ যখন পারস্পরিক ক্রিয়ার একটি উপাদান ঘটতে উপর 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
আপনি styling সীমার আপনি একটি প্রদত্ত ওয়েব পৃষ্ঠাতে অর্জন করতে পারেন প্রসারিত করতে পারেন

106
00:07:22,910 --> 00:07:25,050
এবং CSS এর লিখুন আরো দক্ষতার সাথে.

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
বিস্ময়. দুঃখিত.