[Powered by Google Translate] [সিএসএস]
[জোসেফ Ong - হার্ভার্ড বিশ্ববিদ্যালয়]
[এটি CS50. - CS50.TV]
>> আজ আমরা CSS এর সম্পর্কে কথা বলা বা করা স্টাইল শীট Cascading করব.
>> তাই ঠিক হল CSS সমর্থন করে?
ভাল, এর মধ্যে 2 অংশ নিচে শব্দ সিএসএস বিরতি দিন:
Cascading এবং স্টাইল শীট.
Cascading একটি সামান্য বিট আরো জটিল, এবং এটা আমরা অন্য কিছু ভিডিওতে আবরণ করব.
কিন্তু নতুনদের জন্য, স্টাইল শীট কি সিএসএস আছে এ অনেক ইঙ্গিত.
এটি একটি ওয়েব পৃষ্ঠার HTML যাও শৈলী যোগ,
পরিবর্তন কিভাবে aesthetically ওয়েব পেজ দেখায়.
এই পাতা থেকে পাঠ্যের বিষয়বস্তুর পজিশনিং সবকিছু অর্থ
অন্য একটি বক্স বৃত্তাকার এর কোণ তৈরি বা টেক্সট ছায়ার যুক্ত করার মত দুর্দান্ত জিনিস.
এমনকি আপনি ছবি জিনিষ ভালো জিনিস পর্দায় সজীব করতে করতে পারেন.
>> কিভাবে যাতে আমরা আপনাকে HTML CSS এর সাথে ব্যবহার?
এই দরিদ্র সুদর্শন সাইট আমি লিখেছেন নিন.
যদি Rob এই সাইট এ মুহূর্তে চেহারা ছিল, তিনি সম্ভবত এরকম কিছু একটা বলতে চাই,
"বাহ! আমার দেখায় ভূমিকা ভয়ানক. জোসেফ, আপনি একটি ভয়াবহ ডিজাইনার."
"টাইমস ডিফল্ট ফন্ট ব্যবহার করছেন? Helvetica হয় তাই অনেক ভালো."
>> তাই সহজ উপায় styling Rob চায় প্রযোজ্য হতে পারে?
অধিকাংশ মানুষের সুস্পষ্ট পথ অনেক প্রথমে সিএসএস লিখেছেন
যাও উপাদান নিজেই কি আমরা কল শৈলী ঘোষণা ঠিক ছিল
HTML শৈলী বৈশিষ্ট্য ব্যবহার করে.
একটি শৈলী ঘোষণা কেবলমাত্র HTML এলিমেন্ট এর CSS এর সম্পত্তি গঠিত আমরা পরিবর্তন চাই
একটি কোলন শেষে সেমিকোলন সম্পত্তি এবং একটি নতুন মান অনুসরণ করুন.
উদাহরণস্বরূপ, এর যাক বলতে Rob একটি ভূমিকা তার কাছাকাছি কালো সীমানা চায়.
আমরা প্রথম রব এর div উপর শৈলী বৈশিষ্ট্য এখানে রাখুন
পরে উদ্ধৃতি চিহ্ন ভিতরে একটি CSS এর ঘোষণা করা:
"সীমানা: 1px কঠিন কালো;"
1 পিক্সেল প্রস্থ সীমানা চিহ্নিত করা, কঠিন সীমানা শৈলী বোঝায়,
এবং শেষে তার রং নির্ধারণ করে কি সীমানা এর রঙ হয়.
>> যদি আমরা একটি উপাদান একাধিক শৈলী চান, ক্রম এই ঘোষণা লিখুন.
উদাহরণস্বরূপ, যদি Rob একটি নীল পটভূমি সঙ্গে তার Helvetica মধ্যে হেডার টেক্সট চায়
এবং টেক্সট আশেপাশে আরো স্থান, আমরা এটা করতে পারেন:
শৈলী = "ফন্ট পরিবার: Helvetica;-ব্যাকগ্রাউন্ড রং: নীল; প্যাডিং: 5px;"
শেষ সেমিকোলন হয় আসলে ঐচ্ছিক, কিন্তু মানুষ সাধারণত এটি সঙ্গতিপূর্ণ রাখতে দোহাই জন্য.
>> আমরা শীতল এবং আরো জটিল CSS এর বৈশিষ্ট্য কিছু ব্যাখ্যা সংরক্ষণ করব
জন্য অন্য একটি ভিডিও.
আপনি যদি মনে কিছু ঠিক আছে, প্রভাব চান CSS এর দ্বারা অনুসরণ Googling
সম্ভবত দিতে প্রশংসনীয় ভাল ফলাফল করতে হবে.
শীতল ব্যাপার হল CSS এর বেশ বিস্তৃত,
তাই অমিল হল আপনি যদি কিছু করে যেতে চাই হয় - কারণ মধ্যে -
CSS এর সম্ভবত এটা করতে পারেন.
আমরা ইনলাইন styling styling এই ধরনের কল.
উপাদান শৈলী হয়, ভাল শুরু ট্যাগ সঙ্গে সঙ্গতিপূর্ণ,.
>> জন্য লোকেরা যারা সত্যি পছন্দ করা সংগঠিত যাও,
আপনি একটু মলিন কিভাবে এই সব দেখতেও বিরক্ত পেতে শুরু হতে পারে.
যদি আপনি পৃষ্ঠাটি প্রতি উপাদান জন্য এই কাজ করে ভাবুন,
প্লাস এখন সব আপনার HTML এবং CSS এর intermixed হয় এবং cluttered.
গ্রস, ডান?
এই সমাধানের জন্য, অবশেষে শুরু মানুষ তাদের HTML মার্কআপ পৃথক যাও সংক্রামক উপর
কিছু বলা নির্বাচক CSS এর ব্যবহার করে তাদের থেকে সিএসএস styling.
CSS এর নির্বাচক যাও উপাদানগুলি যা ঘোষণা প্রযুক্ত হয় চয়ন করতে ব্যবহৃত হয়.
একটি নির্বাচক CSS এর একটি তালিকা ঘোষণা সঙ্গে মিলিত হিসাবে একটি CSS এর নিয়ম প্রায়শই বলা হয়.
এই নিয়মগুলি খোলা এবং বন্ধ HTML শৈলী ট্যাগ মধ্যে স্থাপন করা হবে,
প্রায়ই ডকুমেন্টের মাথা.
>> এটা অনেক সহজ একটি উদাহরণ দেখুন,
তাই CSS এর একটি সহজ নিয়ম তৈরি করে দেওয়া এর শুরু.
প্রথম, যাক আমাদের এইচটিএমএল এর মাথা বিভাগে শৈলী ট্যাগ করা.
এর পরে, নির্বাচক.
আমরা এক সহজ করে সারাংশ, হ্যাশ চিহ্ন ব্যবহার করে আরম্ভ করা বন্ধ করব,
যার একটি তার আইডি বৈশিষ্ট্য অনুসারে HTML উপাদান নির্বাচন করা হয়.
এই ক্ষেত্রে আমরা div যে রব এর সূচনার প্রতিনিধিত্ব করে নির্বাচন করব
হ্যাশ চিহ্ন দ্বারা div এর আইডি, বখিল অনুসরণ টাইপ.
এখন ঘোষণা.
আমরা খোলা এবং বন্ধ ধনুর্বন্ধনী যোগ এবং রব এর div আমাদের আগে ইনলাইন ঘোষণা নামান
এই ধনুর্বন্ধনী ভেতরে, রিফ্রেশ করা,
এবং, শান্ত, এখনও রব এর ইন্ট্রো একটি চারপাশের কালো সীমানা বিয়োগ অগোছালো ইনলাইন কদর্যতা আছে.
>> এখন, যদি আমরা রব এর ইন্ট্রো h1 এর ভিতর নির্বাচন চেয়েছিলেন?
আপনি, মনে হয় "এর এটি একটি আইডি এবং তারপর আমাদের আগে করা শৈলী সরানো যাক." হতে পারে
যে কাজ করে, কিন্তু CSS এর লেট আপনি উপাদান নির্বাচন অন্যান্য উপায় রয়েছে
ব্যবহার করে কি আমরা combinators সহজ নির্বাচক যাও মিশ্রিত করা কল.
উদাহরণস্বরূপ, একটি হোয়াইটস্পেস অক্ষর একটি combinator হিসাবে ব্যবহার করা যেতে পারে
যাও 1 নির্বাচক যে অন্য নির্বাচক ভেতরে বাস সমস্ত উদাহরণ নির্দিষ্ট.
শোনাচ্ছে যে আরো অনেক বেশী জটিল আসলে এটা.
এখানে একটি উদাহরণ.
আমরা #, Rob একটি স্থান যুক্ত, এবং একটি h1 সঙ্গে এটি অনুসরণ টাইপ করা,
আরেকটি সহজ একটি নির্বাচক ট্যাগ নির্বাচক যে উপাদানের ধরনের নির্বাচন নামক
ভালো divs অথবা অনুচ্ছেদ.
স্থান আমাদের 2 সহজ নির্বাচক সম্মিলন, সকল CSS এর ঘোষণা আবেদন
এবং H1 ট্যাগ আইডি = "রব" সঙ্গে উপাদান ভিতর যে বাস কোঁকড়া ধনুর্বন্ধনী.
শুধু আপনি যে এটি কাজ করে সন্তুষ্ট, আমি ফন্টের রং সাদা, রিফ্রেশ পরিবর্তন করব,
এবং,, চেহারা রব এর হেডার এখন সাদা.
>> এই কাজের জন্য যে সমস্ত নিয়ম প্রদর্শন পরিবর্তে ইনলাইন শৈলী ব্যবহার করা যায়
আমরা অনেক ক্লিনার কোড পেতে পারেন.
বস্তুত, যদি এই শৈলী ব্লক আরম্ভ পেয়ে অল্প বড়,
আমি এমনকি বৈঠাচালনা এই শৈলী একটি ভিন্ন ফাইলে লেখা হবে পুরাপুরি আউট করতে পারেন.
>> এই নথিতে এই সিএসএস হিসাবে নতুন ফাইল অন্তর্ভুক্ত আমি শুধু এইচটিএমএল এর লিংক ট্যাগ ব্যবহার করব.
এখানে আমি এটা বলছে না যে আমি একটি বহিস্থিত স্টাইল শীট এ লিঙ্ক করছি, এখন rel বৈশিষ্ট্য,
এবং ফাইল যাও আমার href attribute এর সঙ্গে পাথ উল্লেখ.
এখন আমার HTML মার্কআপ এবং CSS এর সম্পূর্ণরূপে পৃথক ফাইলের মধ্যে চমত্কারভাবে সংগঠিত হয়,
যা প্রায় সর্বদা উপায় ডিজাইনার HTML এবং CSS এর সাথে কাজ করা পছন্দ করে.
>> ইন কেস আপনি হতাশ করছি, সহজ নির্বাচক আইডি নির্বাচক অন্তর্ভুক্ত
এবং বেশী আমরা দেখেছি ঠিক মত ট্যাগ নির্বাচক
সেইসাথে একটি নির্দিষ্ট শ্রেণীর উপাদানের সঙ্গে নির্বাচনের জন্য নির্বাচক বর্গ,
টাইপ মত অন্যান্য বৈশিষ্ট্যাবলী দ্বারা উপাদান নির্বাচনের জন্য নির্বাচক অ্যাট্রিবিউট = "রেডিও"
রেডিও বাটন নির্বাচন করে রইলাম, এবং pseudoselectors ভালো জন্য এবং বিলম্ব ফোকাস
জন্য styling উল্লেখ যখন পারস্পরিক ক্রিয়ার একটি উপাদান ঘটতে উপর mousing না.
>> সাধারণ combinators সব শিশুর জন্য হোয়াইটস্পেস অন্তর্ভুক্ত
এবং কমা নির্বাচক পার্থক্য.
অন্যান্য আপনি সম্মুখীন হতে পারে সরাসরি শুধুমাত্র শিশুদের জন্য তীর অন্তর্ভুক্ত,
সব ভাইবোন উপাদান পরে যে ঘটতে জন্য টিল্ড,
এবং 1 সহোদর যে উপাদান পরে অবিলম্বে আসে জন্য ধনচিহ্ন.
>> এই নির্বাচক এবং combinators মিশ্রন,
আপনি styling সীমার আপনি একটি প্রদত্ত ওয়েব পৃষ্ঠাতে অর্জন করতে পারেন প্রসারিত করতে পারেন
এবং CSS এর লিখুন আরো দক্ষতার সাথে.
শুধু লাইন CSS এর মধ্যে আপনি দেখতে সম্পর্কে এখানে টাইপ একটি দম্পতি,
আমি দ্রুত ভালো ভালো কিছু এই চেহারা ভালো কিছু করতে পারেন.
>> আমি জোসেফ, এবং এই CS50.
>> [CS50.TV]
>> Uh যেখানে, আমি শুরু করবেন?
আমাকে ছাড়া যে - [laughs] ঠিক আছে.
একটি যুক্ত করুন - সম্পর্কে যে বাক্যে কথন পরিবর্তন করা যাক.
বিস্ময়. দুঃখিত.