1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: Readable CSS
slug: Web/CSS/Getting_Started/Readable_CSS
tags:
- NeedsReview
translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">This is the 6th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> 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.</span></p>
<h2 class="clearLeft" id="তথ্য_পাঠযোগ্য_CSS"><span class="short_text" id="result_box" lang="bn"><span class="hps">তথ্য</span></span>: <span class="short_text" id="result_box" lang="bn"><span class="hps">পাঠযোগ্য</span> </span>CSS</h2>
<p><span id="result_box" lang="bn"><span class="hps">আপনি এগুলো</span> <span class="hps">আরো পাঠযোগ্য</span> <span class="hps">করার জন্য আপনার</span> <span class="hps">স্টাইলশীট</span> এ <span class="hps">সাদা</span> <span class="hps">স্থান এবং</span> <span class="hps">মন্তব্য যুক্ত করতে পারেন</span></span>। <span id="result_box" lang="bn"><span class="hps">You can also group selectors together? যখন একই</span> <span class="hps">স্টাইল নিয়ম</span> <span class="hps">বিভিন্ন ভাবে</span> <span class="hps">নির্বাচিত</span> <span class="hps">উপাদানের উপর প্রয়োগ করা যায় </span>।</span></p>
<h3 id="সাদা_স্থান">সাদা স্থান</h3>
<p><span id="result_box" lang="bn"><span class="hps">হোয়াইট স্পেস</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">মানে </span></span>প্রকৃত</span> <span class="hps">স্পেস,</span> <span class="hps">ট্যাব ও</span> <span class="hps">নতুন লাইন</span> <span class="hps">.</span> <span class="hps">আপনি আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">আরো পাঠযোগ্য করতে</span> <span class="hps">সাদা স্থান</span> <span class="hps">যোগ করতে পারেন।</span></span></p>
<p>পৃষ্ঠা বিন্যাস এবং গঠন context এর মধ্যে <span id="result_box" lang="bn"><span class="hps">সাদা স্থান হচ্ছে পৃষ্ঠার </span></span><span id="result_box" lang="bn"><span class="hps">অচিহ্নিত </span></span><span id="result_box" lang="bn"><span class="hps">অংশ </span></span><span id="result_box" lang="bn"><span>: <span id="result_box" lang="bn"><span class="hps">কলাম</span> <span class="hps">এবং টাইপ</span> <span class="hps">লাইনের মধ্যে </span></span></span></span> <span id="result_box" lang="bn"><span class="hps">মার্জিন,</span> <span class="hps">gutters</span><span>, এবং স্থান</span></span>।</p>
<p><span id="result_box" lang="bn"> <span><span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="hps">সিএসএস ফাইল</span> <span class="hps">বর্তমানে</span> <span class="hps">এক</span> <span class="hps"><span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">নিয়ম <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">প্রতি</span></span></span></span> </span></span></span></span>লাইনে </span><span>এবং <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">প্রায়</span> <span class="hps">সর্বনিম্ন </span></span></span></span>সাদা</span> <span class="hps">স্থান</span> <span class="hps"> আছে।</span> <span class="hps">একটি জটিল</span> <span class="hps">স্টাইলশীটে</span> <span class="hps">এই</span> <span class="hps">বিন্যাস</span><span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps"> পড়া</span> <span class="hps">কঠিন হয়ে দাড়াবে এবং</span></span></span></span> <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">স্টাইলশীট</span> </span></span></span> <span class="hps">বজায় রাখা</span>ও <span class="hps">কঠিন হবে</span> <span class="hps">।</span> </span></span></span></p>
<p><span id="result_box" lang="bn"><span class="hps">আপনার নির্বাচিত</span> <span class="hps">বিন্যাস</span> <span class="hps">সাধারণত একটি</span> <span class="hps">ব্যক্তিগত পছন্দ</span><span>, কিন্তু আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">যদি</span> ভাগ <span class="hps">প্রকল্পের</span> <span class="hps">অংশ হয়</span><span>, তাহলে ঐসব</span> <span class="hps">প্রকল্পের</span> <span class="hps">তাদের নিজস্ব</span> <span class="hps">নিয়মাবলী</span> <span class="hps">থাকতে পারে।</span></span><br>
</p>
<div class="tuto_example">
<div class="tuto_type">
<span id="result_box" lang="bn"><span class="hps">উদাহরণ</span><br>
<br>
<span class="hps"><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ যেমন <span id="result_box" lang="bn"><span class="hps">কম্প্যাক্ট বিন্যাস </span></span></span></span>আমরা <span id="result_box" lang="bn"><span class="hps">ব্যবহার করছি</span></span> , <span id="result_box" lang="bn"><span class="hps">শুধুমাত্র</span> <span class="hps">একটি লাইন</span> <span class="hps">বিভাজন</span><span> <span id="result_box" lang="bn"><span class="hps">যখন</span></span></span></span> এটা</span> <span class="hps">খুব দীর্ঘ</span> <span class="hps">হয়ে</span> যায় <span>:</span></span></div>
<br>
<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
</pre>
<p><span class="short_text" id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">প্রতি লাইনে একটি</span> <span class="hps">মান</span> <span class="hps">পছন্দ </span><span>করে :</span></span></p>
<pre class="brush: css">.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
<p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">indention ব্যবহার করে যেমন- দুই</span> <span class="hps">স্পেস,</span> <span class="hps">চার</span> <span class="hps">স্পেস</span> <span class="hps"> অথবা</span> <span class="hps">একটি ট্যাব</span> হচ্ছে <span class="hps">সাধারণ</span></span>:</p>
<pre class="brush: css">.carrot {
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
<p><span id="result_box" lang="bn"> <span class="hps">কিছু মানুষ</span> <span class="hps">সবকিছু </span>ঊর্ধ্বাভাবে লাইনে লিখতে পছন্দ করে <span class="hps">(কিন্তু</span> <span class="hps">এর মত একটি</span> <span class="hps">বিন্যাস</span> <span class="hps">বজায় রাখা কঠিন</span><span>):</span></span></p>
<pre class="brush: css">.carrot
{
color : orange;
text-decoration : underline;
font-style : italic;
}
</pre>
<p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">পাঠযোগ্যতা</span> <span class="hps">উন্নত করার লক্ষে্য </span> <span class="hps">মিশ্র</span> <span class="hps">হোয়াইটস্পেস</span> <span class="hps">ব্যবহার করে।</span></span></p>
<pre class="brush: css">.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 }
</pre>
</div>
<p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">বিন্যাসের</span> <span class="hps">জন্য ট্যাব</span> <span class="hps">ব্যবহার করেন ।</span> <span class="hps">কিছু মানুষ শুধুমাত্র</span> <span class="hps">ফাঁকা স্থান ব্যবহার</span><span> করেন।</span></span></p>
<h3 id="মন্তব্য"><span class="short_text" id="result_box" lang="bn"><span class="hps">মন্তব্য</span></span></h3>
<p><span class="short_text" id="result_box" lang="bn"><span class="hps">CSS এর মধ্যে</span> <span class="hps">মন্তব্য</span> <span class="hps">শুরু</span></span> <code>হয় /*</code> <span class="short_text" id="result_box" lang="bn"><span class="hps">এবং</span> <span class="hps">শেষ হয়</span></span> <code>*/</code> দিয়ে ।</p>
<p><span id="result_box" lang="bn"><span class="hps">আপনি <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> এ <span class="hps">প্রকৃত</span> <span class="hps">মন্তব্য</span> <span class="hps">করতে</span> <span class="hps">মন্তব্য ব্যবহার</span> <span class="hps">করতে পারেন, <span id="result_box" lang="bn"><span class="hps">এবং </span></span></span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">এছাড়াও</span> <span id="result_box" lang="bn"><span class="hps">সাময়িকভাবে</span> <span class="hps">উদ্দেশ্যে</span> <span class="hps">পরীক্ষার জন্য</span> </span><span class="hps"><span id="result_box" lang="bn"><span class="hps">একটা </span></span>অংশ</span> <span class="hps">মন্তব্য </span></span></span><span class="hps"> করতে</span> পারেন<span class="hps"> </span><span>।</span></span></p>
<p><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">স্টাইলশীট</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">মন্তব্য </span></span></span></span>অংশ</span> <span class="hps">আউট </span> <span class="hps">করার জন্য,</span></span></span><span> <span id="result_box" lang="bn"><span class="hps">সে অংশ</span></span> একটি</span> <span class="hps">একটি মন্তব্যে</span> <span class="hps">লিখুন <span id="result_box" lang="bn"><span>যাতে </span></span><span id="result_box" lang="bn"><span class="hps">ব্রাউজার এটি</span> <span class="hps">উপেক্ষা করে</span><span>। </span></span></span><span class="hps">আপনি <span id="result_box" lang="bn"><span class="hps">সতর্ক থাকুন </span></span><span id="result_box" lang="bn"><span class="hps">যেখানে</span></span> <span id="result_box" lang="bn"><span class="hps">মন্তব্য</span> <span class="hps"> </span></span>শুরু</span> <span class="hps">এবং </span><span class="hps">শেষ</span><span class="hps">।</span> <span id="result_box" lang="bn"><span class="hps">বাকি </span></span><span class="hps">স্টাইলশীট</span> এ <span class="hps">সঠিক স্যন</span></span><span lang="bn"><span class="hps">টেক্স</span> <span class="hps">থাকতে হবে।</span></span></p>
<div class="tuto_example">
<div class="tuto_type">
<span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></div>
<pre class="brush: css">/* <span class="short_text" id="result_box" lang="bn"><span class="hps"><span class="short_text" id="result_box" lang="bn"><span class="hps">প্রথম</span> <span class="hps">অনুচ্ছেদে </span></span>প্রাথমিক</span> <span class="hps">অক্ষর C এর জন্য</span> <span class="hps">শৈলী </span></span> */
.carrot {
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
</div>
<h3 id="দলবদ্ধ_নির্বাচক"><span class="short_text" id="result_box" lang="bn"><span class="hps">দলবদ্ধ</span> <span class="hps">নির্বাচক</span></span></h3>
<p><span id="result_box" lang="bn"><span class="hps">যখন অনেক উপাদানের</span> <span class="hps">একই</span> <span class="hps">শৈলী</span> <span class="hps">থাকে, <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">আপনি </span></span>নির্বাচক</span> <span class="hps">একটি গ্রুপ</span> <span class="hps">উল্লেখ করে </span></span></span><span class="hps">কমা দিয়ে</span> <span class="hps">তাদের পৃথক<span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"> করতে পারেন</span></span></span>।</span></span> <span class="hps">ঘোষণা</span> <span class="hps">সমস্ত নির্বাচিত</span> <span class="hps">উপাদানের ক্ষেত্রে</span> <span class="hps">প্রযোজ্য।</span></span></p>
<p><span id="result_box" lang="bn"><span class="hps">অন্যত্র</span> <span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">আপনি আবার</span> <span class="hps">পৃথকভাবে</span> <span class="hps">একই</span> <span class="hps">নির্বাচক</span> <span class="hps">নির্দিষ্ট করতে পারেন</span>, <span class="hps">তাদের</span> <span class="hps">ব্যক্তিগত</span> <span class="hps">শৈলী নিয়ম</span> <span class="hps">প্রযোজ্য।</span></span></p>
<div class="tuto_example">
<div class="tuto_type">
<span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></div>
<p><span class="short_text" id="result_box" lang="bn"><span class="hps">এই নিয়ম</span> </span> {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, এবং {{ HTMLElement("h3") }} <span class="short_text" id="result_box" lang="bn"><span class="hps">উপাদান</span> <span class="hps">একই রং</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">তৈরি করে</span></span>।</p>
<p><span class="short_text" id="result_box" lang="bn"><span class="hps"> শুধুমাত্র</span> <span class="hps">এক জায়গায়</span> <span class="hps">রঙ উল্লেখ</span> <span class="hps">করা সুবিধাজনক</span></span>,<span class="short_text" id="result_box" lang="bn"><span class="hps"> যদি না এটি</span> <span class="hps">পরিবর্তন করা</span> <span class="hps">হয়।</span></span></p>
<pre class="brush: css">/* color for headings */
h1, h2, h3 {color: navy;}
</pre>
</div>
<h2 id="প্রক্রিয়া_মন্তব্য_যোগ_এবং_বিন্যাস_উন্নতি">প্রক্রিয়া: মন্তব্য যোগ এবং বিন্যাস উন্নতি</h2>
<ol>
<li>আপনার CSS ফাইল সম্পাদনা করুন, এবং এটি এই নিয়ম আছে কিনা তা নিশ্চিত করুন (in any order):
<pre class="brush: css">strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}
</pre>
</li>
<li><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">এটি আরো</span> <span class="hps">পাঠযোগ্য</span> <span class="hps">করুন <span id="result_box" lang="bn"><span class="hps">সাজানোর দ্বারা এমন <span id="result_box" lang="bn"><span class="hps">একটি উপায়ে </span></span></span></span></span></span><span id="result_box" lang="bn"><span class="hps">যে</span>ন <span id="result_box" lang="bn"><span class="hps">এটি</span></span> </span>আপনি যৌক্তিক</span> <span class="hps">খুঁজে</span> পান </span>, এবং <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">হোয়াইটস্পেস</span> <span class="hps">এবং মন্তব্য</span> <span class="hps">যুক্ত করে </span></span>যাই হোক না কেন</span> <span class="hps">যে উপায়</span> <span class="hps">আপনি</span> <span class="hps">সেরা</span> <span class="hps">মনে </span></span>করেন।</li>
<li><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span>আপনার ব্রাউজারে</span> <span class="hps">প্রদর্শন</span> <span class="hps">ফাইল সংরক্ষণ করুন</span> <span class="hps">এবং রিফ্রেশ করুন,</span></span>নিশ্চিত করুন যে </span></span>স্টাইলশীট</span> যে<span class="hps">ভাবে কাজ করে</span> <span class="hps">আপনার</span> <span class="hps">পরিবর্তন</span> তাকে <span class="hps">প্রভাবিত না করেঃ </span></span>
<table style="border: 2px outset #36b; padding: 1em;">
<tbody>
<tr>
<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
</tr>
<tr>
<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
</li>
</ol>
<div class="tuto_details">
<div class="tuto_type">
চ্যালেঞ্জ</div>
<p><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">অংশের</span> <span class="hps">আউট মন্তব্য</span></span>,<span id="result_box" lang="bn"> <span class="hps">অন্য কিছু</span> <span class="hps">পরিবর্তন ছাড়া</span></span>,<span id="result_box" lang="bn"><span class="hps"> আপনার নথির</span> <span class="hps">খুব প্রথম</span> <span class="hps">অক্ষর <span id="result_box" lang="bn"><span class="hps">লাল</span></span></span> <span class="hps">করা,</span></span></p>
<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
<tbody>
<tr>
<td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
</tr>
<tr>
<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
<p>(<span class="short_text" id="result_box" lang="bn"><span class="hps">এই কাজ করতে</span> <span class="hps">একাধিক</span> <span class="hps">উপায় আছে </span></span>।)</p>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">
Possible solution</div>
One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:
<pre class="brush: css">/*.carrot {
color: orange;
}*/</pre>
<a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
<h2 id="What_next">What next?</h2>
<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">specify the appearance of text</a> in your document<strong>.</strong></p>
|
