[Powered by Google Translate] [সিএসএস] [জোসেফ Ong - হার্ভার্ড বিশ্ববিদ্যালয়] [এটি CS50. - CS50.TV] 

আজ আমরা সিএসএস সম্পর্কে কথা বলা বা ক্যাসকেডিং স্টাইল শীট হবে. 

তাই CSS এর ঠিক কি না? ওয়েল, 2 ভাগে নিচে শব্দটি সিএসএস বিরতি যাক: ক্যাসকেডিং স্টাইল শীট এবং. ক্যাসকেডিং একটি সামান্য বিট আরো জটিল, এবং এটা আমরা অন্য ভিডিওতে আবরণ করব কিছু. কিন্তু নতুনদের জন্য, স্টাইল শীট সিএসএস আছে কি খুব নির্দেশ. এটি একটি ওয়েব পৃষ্ঠার HTML যাও শৈলী যোগ করা হয়েছে ওয়েব পৃষ্ঠা aesthetically দেখায় কিভাবে পরিবর্তন. এই পৃষ্ঠাতে পাঠ্যের থেকে বিষয়বস্তু পজিশনিং সবকিছু মানে বৃত্তাকার একটি বক্স কোণে তৈরীর অথবা টেক্সট ছায়া যোগ করার মত অন্যান্য শান্ত জিনিষ. জিনিষ পর্দায় সজীব করতে চাই এমনকি আপনি পাগল জিনিস করতে পারি. 

সুতরাং আমরা HTML এর CSS এর কিভাবে ব্যবহার করবেন? আমি ঠিক লিখেছে এই দরিদ্র সুদর্শন সাইট নিন. রব এখনই এই মুহূর্তে এই সাইট তাকান ছিল, তিনি সম্ভবত, কিছু মত বলতে চাই "বাহ! আমার ভূমিকা ভয়ানক দেখায়. জোসেফ, আপনি একটি ভয়াবহ ডিজাইনার হন." "ডিফল্ট টাইমস ফন্ট ব্যবহার করছেন? Helvetica তাই অনেক ভালো." 

তাই রব চায় স্টাইলিং প্রয়োগ করার সবচেয়ে সহজ উপায় হতে পারে? মানুষের সবচেয়ে সুস্পষ্ট পথ প্রচুর প্রাথমিকভাবে সিএসএস লিখেছেন উপাদান নিজেই আমরা শৈলী ঘোষণা ডান কল করা ছিল এইচটিএমএল শৈলী বৈশিষ্ট্য ব্যবহার করে. একটি শৈলী ঘোষণা শুধুমাত্র HTML উপাদান এর CSS এর সম্পত্তি নিয়ে গঠিত আমরা পরিবর্তন চাই শেষে সম্পত্তি এবং একটি সেমিকোলন নতুন মান অনুসরণ একটি কোলন দ্বারা অনুসরণ. উদাহরণস্বরূপ, এর যাক রব তার ভূমিকা চারপাশে কালো সীমানা চায় বলে. আমরা প্রথম এখানে রব এর DIV নেভিগেশন শৈলী অ্যাট্রিবিউট করা তারপর ডাবল কোট ভিতরে একটি CSS ঘোষণা করা: "সীমানা: 1px কঠিন কালো;" 1 পিক্সেল সীমানা প্রস্থ উল্লেখ করে, কঠিন, সীমানার ধরন উল্লেখ করে এবং শেষে রং সীমানা এর রঙ কি নির্ধারণ করে. 

আমরা একটি উপাদান একাধিক শৈলী চান, ক্রম এই ঘোষণা লিখুন. উদাহরণস্বরূপ, রব একটি নীল পটভূমি সঙ্গে Helvetica তার হেডার টেক্সট চায় এবং টেক্সট কাছাকাছি আরও জায়গা, আমরা এই নির্বাচন করতে পারেন: শৈলী = "ফন্ট পরিবারের: Helvetica; ব্যাকগ্রাউন্ড রঙ: নীল; প্যাডিং: 5px;" শেষ সেমিকোলন আসলে ঐচ্ছিক, কিন্তু মানুষ সাধারণত দৃঢ়তা দোহাই জন্য এটা রাখা. 

আমরা শীতল এবং আরো জটিল CSS এর অনেকগুলি বৈশিষ্ট্য কিছু ব্যাখ্যা সংরক্ষণ করব অন্য ভিডিওর জন্য. আপনি মনে কিছু আছে, শুধু CSS এর দ্বারা অনুসরণ আপনি চান প্রভাব Googling সম্ভবত বেশ ভাল ফলাফল দেবে. শীতল জিনিস, সিএসএস বেশ বিস্তৃত হয় যে আপনি কাজ করতে চান কিছু আছে তাই যদি মতভেদ হয় - কারণ মধ্যে - CSS এর সম্ভবত এটি করতে পারেন. আমরা ইনলাইন স্টাইলিং styling এই ধরনের কল. উপাদান শৈলী স্টার্ট ট্যাগ এবং সঙ্গে লাইন, ভাল, না. 

সত্যিই সংগঠিত করতে চাই যারা ভাবেন জন্য, আপনি যদি এই সব দেখে মনে হচ্ছে কত নোংরা এ peeved একটু পেয়ে শুরু হতে পারে. আপনি পৃষ্ঠার নেভিগেশন প্রত্যেক উপাদান জন্য এই কাজ করতে ছিল, কল্পনা প্লাস এখন আপনার HTML এবং CSS সমস্ত intermixed এবং cluttered হয়. গ্রস, ডান? এই সমাধানের জন্য, মানুষ শেষ পর্যন্ত তাদের HTML মার্কআপ পৃথক উপর আকর্ষণীয় শুরু CSS সিলেক্টর নামক ব্যবহার করে তাদের CSS স্টাইলিং থেকে. CSS সিলেক্টর যা ঘোষণা প্রয়োগ করা হয় উপাদান নির্বাচন করুন ব্যবহার করা হয়. CSS এর ঘোষণা একটি তালিকা সঙ্গে মিলিত একটি নির্বাচক প্রায়ই একটি CSS শাসন হিসাবে উল্লেখ করা হয়. এই নিয়ম, খোলা এবং বন্ধ এইচটিএমএল ট্যাগ শৈলী মধ্যে রাখা হবে প্রায়ই নথির মাথা. 

এটি একটি উদাহরণ দেখতে অনেক সহজ তাই একটি সহজ CSS এর নিয়ম তৈরি করে শুরু করা যাক. প্রথমত, আমাদের HTML-এর মাথা বিভাগে শৈলী ট্যাগ করা যাক. এর পরে, নির্বাচক. আমরা সহজ নির্বাচক এক, হ্যাশ চিহ্ন ব্যবহার করে বন্ধ করা শুরু করব যা তার আইডি অ্যাট্রিবিউট দ্বারা একটি HTML উপাদান নির্বাচন করা হয়. এই ক্ষেত্রে আমরা রব এর সূচনার প্রতিনিধিত্ব করে DIV নির্বাচন করব DIV এর আইডি, রব দ্বারা অনুসরণ হ্যাশ চিহ্ন টাইপ করে. এখন ঘোষণা. আমরা খোলা এবং বন্ধ ধনুর্বন্ধনী যোগ এবং রব এর DIV আমাদের আগে ইনলাইন ঘোষণা নামান এই ধনুর্বন্ধনী ভিতরে, রিফ্রেশ করুন, এবং, শান্ত, রব এর মুখ্য পৃষ্ঠা Privacy Policy এখনও এটি প্রায় কালো সীমানা বিয়োগ নোংরা ইনলাইন কদর্যতা আছে. 

এখন, আমরা কি রব এর মুখ্য পৃষ্ঠা Privacy Policy এর H1 ভিতরে নির্বাচন করতে চেয়েছিলেন? আপনি "এর উপর একটি আইডি করা এবং তারপর আমাদের আগে শৈলী সরানো যাক." মনে হতে পারে যে কাজ করে, কিন্তু আপনি CSS এর উপাদান নির্বাচন করুন লেট অন্য উপায় আছে আমরা combinators সহজ নির্বাচক মিশ্রিত কল কি ব্যবহার করে. উদাহরণস্বরূপ, একটি হোয়াইটস্পেস অক্ষর একটি combinator হিসাবে ব্যবহার করা যাবে অন্য নির্বাচক ভিতরে বাস 1 নির্বাচক সব দৃষ্টান্ত উল্লেখ করার. যে আসলে এটা তুলনায় অনেক বেশি জটিল শোনাচ্ছে. এখানে একটি উদাহরণ. আমরা #,, রব একটি স্থান যুক্ত করুন, এবং একটি H1 সঙ্গে এটি অনুসরণ টাইপ হবে অন্য সহজ নির্বাচক উপাদানের ধরনের নির্বাচন করা হয় যে একটি ট্যাগ নির্বাচক বলা divs বা অনুচ্ছেদ ভালো লেগেছে. স্থান সকল CSS ঘোষণা আবেদন, আমাদের 2 সহজ নির্বাচক সম্মিলন এবং আইডি = "রব" সঙ্গে উপাদান ভিতরে বাস যে H1 ট্যাগ কোঁকড়া ধনুর্বন্ধনী. এটা কাজ করে যে আপনি সন্তুষ্ট, আমি হোয়াইট, রিফ্রেশ করুন, আপনি ফন্টের রং পরিবর্তন করব এবং, তাকান, রব এর হেডার এখন সাদা. 

এই কাজের সকল বিধি পরিবর্তে ইনলাইন শৈলী ব্যবহার করে দেখাতে যায় আমরা অনেক ক্লিনার কোড পেতে পারেন. এই বিন্যাসে ব্লক শুরু হয় বস্তুত, যদি, একটি সামান্য বিট বড় পেয়ে আমি এমনকি সম্পূর্ণভাবে একটি পৃথক ফাইলে এই শৈলী টান আউট করতে পারেন. 

এই প্রবন্ধে CSS এর রূপে এই নতুন ফাইল অন্তর্ভুক্ত করার জন্য আমি শুধু এইচটিএমএল এর লিঙ্ক ট্যাগ ব্যবহার করব. এখানে আমি,, আমি একটি বহিস্থিত স্টাইল শীট মধ্যে লিঙ্ক করছি যে rel অ্যাট্রিবিউট এটি কহন করছি এবং আমার href অ্যাট্রিবিউট সঙ্গে ফাইলের পাথ উল্লেখ. এখন আমার HTML মার্কআপ এবং CSS, সম্পূর্ণরূপে পৃথক ফাইলের মধ্যে চমত্কারভাবে সংগঠিত যা প্রায় সবসময় ডিজাইনার HTML এবং CSS এর সাথে কাজ করা পছন্দ করে উপায়. 

আপনি ভাবছি করছি ক্ষেত্রে, সহজ নির্বাচক আইডি সিলেক্টর অন্তর্ভুক্ত আমরা শুধু দেখেছি বেশী ভালো এবং ট্যাগ সিলেক্টর সেইসাথে বর্গ একটি নির্দিষ্ট শ্রেণীর সঙ্গে উপাদান নির্বাচন নির্বাচক, টাইপ মত অন্যান্য বৈশিষ্ট্যাবলী দ্বারা উপাদান নির্বাচন অ্যাট্রিবিউট নির্বাচক = "রেডিও" রেডিও বাটন ইনপুট, এবং ভালো pseudoselectors জন্য বিলম্ব এবং ফোকাস কথাবার্তাও একটি উপাদান ঘটতে ওভার mousing না যখন স্টাইলিং উল্লেখ জন্য. 

সাধারণ combinators সব শিশুদের জন্য হোয়াইটস্পেস অন্তর্ভুক্ত এবং কমা নির্বাচক প্রভেদ. আপনি সম্মুখীন হতে পারে অন্যদের, শুধুমাত্র সরাসরি শিশুদের জন্য তীর অন্তর্ভুক্ত উপাদান পরে যে ঘটতে সমস্ত ভাইবোনের জন্য tilde, এবং উপাদান পর অবিলম্বে যে আসে 1 সহোদর জন্য প্লাস সাইন ইন করুন. 

এই নির্বাচক এবং combinators কো, আপনি একটি প্রদত্ত ওয়েব পেজের নেভিগেশন অর্জন করতে পারেন স্টাইলিং পরিসীমা প্রসারিত করতে পারেন এবং আরও দক্ষতার সিএসএস লিখুন. আপনি আমাকে এখানে টাইপ দেখতে CSS এর লাইন মাত্র একটি দম্পতি সঙ্গে, আমি দ্রুত ভালো কিছু মত এই বর্ণন ভালো কিছু করতে পারেন. 

আমি জোসেফ আছি, এবং এই CS50 হয়. 

[CS50.TV] 

Uh, আমি যেখানে শুরু করবেন? [Laughs] ঠিক আছে - আমাকে ছাড়া যে কাজ করা যাক. একটি কে - আমাকে যে বাক্যে কথন পরিবর্তন করা যাক. Ooh. দুঃখিত.