CSS মৌলিক বিন্যাস

CSS 语法

CSS নিয়ম দুটি প্রধান অংশ নিয়ে গঠিত: সিলেক্টর, এবং একটি বা বেশি ঘোষণা。

selector {declaration1; declaration2; ... declarationN }

সিলেক্টর (selector) সাধারণত হল আপনি যে HTML ইউনিটের স্টাইল পরিবর্তন করতে চান。

প্রত্যেক ঘোষণা একটি অ্যাট্রিবিউট এবং মান নিয়ে গঠিত।

অ্যাট্রিবিউট (property) হল আপনি নির্দিষ্ট করতে চানো স্টাইল অ্যাট্রিবিউট (style attribute)।প্রত্যেক অ্যাট্রিবিউটকে একটি মান রয়েছে।অ্যাট্রিবিউট এবং মানকে দশমূলীয় সমাপ্তকরণ দিয়ে বিভাজিত করা হয়。

selector {property: value}

নিচের এই কোডটি হল, h1 ইউনিটের লিখিত রঙকে লাল করে, এবং ফন্ট সাইজকে ১৪ পিক্সেল করে。

এই উদাহরণে, h1 হল সিলেক্টর, color এবং font-size হল অ্যাট্রিবিউট, red এবং 14px হল মান。

h1 {color:red; font-size:14px;}

নিচের শেষের উদাহরণ দেখে উপরের কোডের স্ট্রাকচারকে দেখানো হয়:

CSS 语法

সুঝাওয়া:ঘোষণাকে হোমোগ্রাফ দিতে হবে。

মানের বিভিন্ন লেখা ও ইউনিট

বর্ণ red ইংরেজিতে ছাড়াও, আমরা #ff0000 এক্সটেনশনাল রঙ মান ব্যবহার করতে পারি:

p { color: #ff0000; }

বাইট সাশ্রয় করতে, আমরা CSS-এর সংক্ষিপ্ত রূপকে ব্যবহার করতে পারি:

p { color: #f00; }

আমরা দুইভাবেই RGB মান ব্যবহার করতে পারি:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

মনে রাখুন, যখন RGB শতপ্রতিশত ব্যবহার করছেন, মান ০ হলেও শতপ্রতিশত সমাপ্তকরণ লিখতে হবে।কিন্তু, অন্যান্য ক্ষেত্রে এইভাবে করা নয়।যেমন, মাপ ০ পিক্সেল হলে, ০ পরে px ইউনিট ব্যবহার করা নয়, কারণ ০ সরাসরি ০, বেশিরভাগ ইউনিট কী?

মনে রাখুন চিহ্ন লিখুন

সুঝাওয়া:যদি মানটি কিছু শব্দ, তবে মানকে চিহ্ন দিতে হবে:

p {font-family: "sans serif";}

বহুঘোষণা:

সুঝাওয়া:যদি একাধিক ঘোষণা নির্দিষ্ট করতে হয়, তবে প্রত্যেক ঘোষণাকে সমাপ্ত করতে সমস্ত ঘোষণাকে সেপারাটরি সমাপ্তকরণ ব্যবহার করতে হবে।নিচের উদাহরণ দেখে কিভাবে একটি লাল লিখিত মধ্যস্থানীয় প্যারাগ্রাফকে নির্দিষ্ট করা যায়, সর্বশেষ নিয়মটি হল সমাপ্তকরণ ব্যবহার করা নয়, কারণ সমাপ্তকরণ ইংরেজিতে একটি বিভাজক নিশান, না শেষ নিশান।কিন্তু, অধিকাংশ অভিজ্ঞ ডিজাইনাররা প্রত্যেক ঘোষণার শেষেও সমাপ্তকরণ ব্যবহার করেন, এর সুবিধা হল, আপনি বর্তমান নিয়মগুলিতে ঘোষণা যোগ করা বা সরানোর সময় ভুল করার সম্ভাবনা কম হয়।এমনকি এইভাবে:

p {text-align:center}; color:red;}

你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。