Readable CSS

This article needs a technical review. How you can help.

This article needs an editorial review. How you can help.

This is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

তথ্য: পাঠযোগ্য CSS

আপনি এগুলো আরো পাঠযোগ্য করার জন্য আপনার স্টাইলশীট  এ সাদা স্থান এবং মন্তব্য যুক্ত করতে পারেন।  You can also group selectors together? যখন একই স্টাইল নিয়ম বিভিন্ন ভাবে নির্বাচিত উপাদানের উপর প্রয়োগ করা যায়

সাদা স্থান

হোয়াইট স্পেস মানে প্রকৃত স্পেস, ট্যাব ও নতুন লাইন . আপনি আপনার স্টাইলশীট আরো পাঠযোগ্য করতে সাদা স্থান যোগ করতে পারেন।

পৃষ্ঠা বিন্যাস এবং গঠন context এর মধ্যে সাদা স্থান হচ্ছে পৃষ্ঠার অচিহ্নিত অংশ : কলাম এবং টাইপ লাইনের মধ্যে  মার্জিন, gutters, এবং স্থান

 আপনার নমুনা সিএসএস ফাইল বর্তমানে এক নিয়ম প্রতি লাইনে এবং প্রায় সর্বনিম্ন সাদা স্থান  আছে। একটি জটিল স্টাইলশীটে এই বিন্যাস পড়া কঠিন হয়ে দাড়াবে এবং স্টাইলশীট বজায় রাখাকঠিন হবে

আপনার নির্বাচিত বিন্যাস সাধারণত একটি ব্যক্তিগত পছন্দ, কিন্তু আপনার স্টাইলশীট যদি ভাগ প্রকল্পের অংশ হয়, তাহলে ঐসব প্রকল্পের তাদের নিজস্ব নিয়মাবলী থাকতে পারে।
 

উদাহরণ

কিছু মানুষ যেমন কম্প্যাক্ট বিন্যাস আমরা  ব্যবহার করছি , শুধুমাত্র একটি লাইন বিভাজন যখন এটা খুব দীর্ঘ হয়ে যায় :

.carrot {color: orange; text-decoration: underline; font-style: italic;}

কিছু মানুষ প্রতি লাইনে একটি মান পছন্দ করে :

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

কিছু মানুষ  indention ব্যবহার করে যেমন- দুই স্পেস, চার স্পেস  অথবা একটি ট্যাব  হচ্ছে সাধারণ:

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

 কিছু মানুষ সবকিছু  ঊর্ধ্বাভাবে  লাইনে লিখতে পছন্দ করে (কিন্তু এর মত একটি বিন্যাস বজায় রাখা কঠিন):

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

কিছু মানুষ পাঠযোগ্যতা উন্নত করার লক্ষে্য  মিশ্র হোয়াইটস্পেস ব্যবহার করে।

.vegetable         { color: green; min-height:  5px; min-width:  5px }
.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }

কিছু মানুষ বিন্যাসের জন্য ট্যাব ব্যবহার করেন । কিছু মানুষ শুধুমাত্র ফাঁকা স্থান ব্যবহার করেন।

মন্তব্য

CSS এর মধ্যে মন্তব্য শুরু হয় /* এবং শেষ হয় */ দিয়ে ।

আপনি আপনার স্টাইলশীটপ্রকৃত মন্তব্য করতে মন্তব্য ব্যবহার করতে পারেন, এবং এছাড়াও  সাময়িকভাবে উদ্দেশ্যে পরীক্ষার জন্য একটা অংশ মন্তব্য করতে  পারেন

স্টাইলশীট  মন্তব্য অংশ আউট  করার জন্য, সে অংশ একটি একটি মন্তব্যে লিখুন যাতে ব্রাউজার এটি উপেক্ষা করেআপনি সতর্ক থাকুন যেখানে মন্তব্য  শুরু এবং শেষ বাকি স্টাইলশীটসঠিক স্যনটেক্স থাকতে হবে।

উদাহরণ
/* প্রথম অনুচ্ছেদে প্রাথমিক অক্ষর C এর জন্য শৈলী  */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

দলবদ্ধ নির্বাচক

যখন অনেক উপাদানের একই শৈলী থাকে, আপনি নির্বাচক একটি গ্রুপ উল্লেখ করে কমা দিয়ে তাদের পৃথক করতে পারেন ঘোষণা সমস্ত নির্বাচিত উপাদানের ক্ষেত্রে প্রযোজ্য।

অন্যত্র আপনার স্টাইলশীট আপনি আবার পৃথকভাবে একই নির্বাচক নির্দিষ্ট করতে পারেন, তাদের ব্যক্তিগত শৈলী নিয়ম প্রযোজ্য।

উদাহরণ

এই নিয়ম  <h1>, <h2>, এবং <h3> উপাদান একই রং তৈরি করে

 শুধুমাত্র এক জায়গায় রঙ উল্লেখ করা সুবিধাজনক, যদি না এটি পরিবর্তন করা হয়।

/* color for headings */
h1, h2, h3 {color: navy;}

প্রক্রিয়া: মন্তব্য যোগ এবং বিন্যাস উন্নতি

  1. আপনার CSS ফাইল সম্পাদনা করুন, এবং এটি এই নিয়ম আছে কিনা তা নিশ্চিত করুন (in any order):
    strong {color: red;}
    .carrot {color: orange;}
    .spinach {color: green;}
    #first {font-style: italic;}
    p {color: blue;}
    
  2. এটি আরো পাঠযোগ্য করুন সাজানোর দ্বারা এমন একটি উপায়ে যেএটি আপনি যৌক্তিক খুঁজে  পান , এবং হোয়াইটস্পেস এবং মন্তব্য যুক্ত করে যাই হোক না কেন  যে উপায়  আপনি সেরা মনে করেন।
  3. আপনার ব্রাউজারে প্রদর্শন ফাইল সংরক্ষণ করুন এবং রিফ্রেশ করুন,নিশ্চিত করুন যে স্টাইলশীট যেভাবে কাজ করে আপনার পরিবর্তন তাকে প্রভাবিত না করেঃ 
    Cascading Style Sheets
    Cascading Style Sheets
চ্যালেঞ্জ

আপনার স্টাইলশীট অংশের আউট মন্তব্য, অন্য কিছু পরিবর্তন ছাড়া, আপনার নথির খুব প্রথম অক্ষর লাল করা,

Cascading Style Sheets
Cascading Style Sheets

(এই কাজ করতে একাধিক উপায় আছে ।)

Possible solution
One way to do this is to put comment delimiters around the rule for .carrot:
/*.carrot {
  color: orange;
}*/
Hide solution
See a solution for the challenge.

What next?

Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

ডকুমেন্ট ট্যাগ এবং অবদানকারী

ট্যাগ: 
 Contributors to this page: teoli, amena-synthia
 সর্বশেষ হালনাগাদ করেছেন: teoli,