forked from m4hi2/weeks-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
lesson5.html
177 lines (119 loc) · 21.4 KB
/
lesson5.html
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>এইটা আমার ওয়েবের : অনুশীলনী 5</title>
<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy|Alfa+Slab+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="prism/prism.css">
</head>
<body>
<hgroup>
<h1>বেসিক সি.এস.এস</h1>
<h2>এইটা আমার ওয়েবের : অনুশীলনী 5</h2>
</hgroup>
<nav>
<p>Previous:<br><a href="lesson4.html">আরো এইচ.টি.এম.এল</a></p>
<p><a href="index.html">প্রধান সূচী</a></p>
<p>Next:<br><a href="lesson6.html">সি.এস.এস কিভাবে কাজ করে?</a></p>
</nav>
<main>
<p>আবারো স্বাগতম! আমি আশাকরি, আপনারা গত কয়েক সপ্তাহ ধরে অনেক মজা করে এইচ.টি.এম.এল শিখেছেন। এই সপ্তাহে আমরা এইচ.টি.এম.এল ছেড়ে এর পরিবর্তে সি.এস.এস শিখবো। সি.এস.এস এম একটি ভাষা যার মাধ্যমে আমরা আমাদের এইচ.টি.এম.এল কে বিভিন্ন রকম ডিজাইন করতে পারি, আমরা রং পরিবর্তন করতে চাই কি না, লেখা বড় করতে চাই কি না, এইচ.টি.এম.এল উপাদানগুলোর আকার বা অবস্থার পরিবর্তন করতে চাই কি না, অথবা, এইচ.টি.এম.এল যে কোন উপাদান কে আরো সুন্দর করার কাজে ব্যবহার করা হয় সি.এস.এস।</p>
<p class="note"> আপনি সি.এস.এস এর সবচেয়ে সাধারণ বৈশিষ্ট্য ব্যবহার করতে চাইলে, সহজে খুজে পেতে পারেন একটি দরকারী উল্লেখ্য: এই <a href="https://mozteach.makes.org/thimble/css-cheatsheet">চিটশিীটটি দেখুন</a>.</p>
<h2>সি.এস.এস এর মৌলিক বিশ্লেষণ</h2>
<p>আবারও পুনরায় সি.এস.এস এর সাধারণ বৈশিষ্ট্য দেখি , এইবার একটু বিস্তারিত দেখবো.</p>
<ol>
<li>সর্বপ্রথমে, একটি নতুন <a href="https://thimble.webmaker.org/">থিম্বল পেজ</a> তৈরি করি কাজ করার জন্য ।. আপনার এইচ.টি.এম.এল এর <code>বডি</code> এর মধ্যে আগে থেকেই একটি একক অনুচ্ছেদ আছে । চলুন এটি সি.এস.এস এর মাধ্যমে ডিজাইন করি।</li>
<li>একটি <code><style></code> ট্যাগ ওপেন করি <code></head></code> এর আগে। তারপর দুইবার Enter দিন , তারপর একটি ক্লোজিং <code></style></code> দিন।. এই <code>style</code> এর মধ্যে আমরা আমাদের সি.এস.এস গুলো লিখবো।</li>
<li>এই<code>style</code>এর মধ্যে এই নিচের সি.এস.এস গুলো লিখুন : </li>
</ol>
<pre><code class="language-css"><span class="highlight1" data-label="This is the selector">p</span> {
<span class="highlight2" data-label="This is a declaration">color: blue</span>;
<span class="highlight4" data-label="Curly braces contain the declarations">}</span></code></pre>
<p>এখন আপনার একক অনুচ্ছেদ এর রং নীল হবে! বিভিন্ন অংশগুলো আরো বিস্তারিতভাবে ব্যাখ্যা :</p>
<ul>
<li>এই সম্পূর্ণ অংশকে <em>ruleset</em> বলে (যদিও প্রায় মানুষই এটিকে শুধু<em>rule</em> বলে।)</li>
<li>এইখানে<code>p</code>হচ্ছে<em>একটি selector</em>. এই selector এর মাধ্যমে এইচ.টি.এম.এল এর কোন উপাদান সিএসএস রুল দ্বারা স্টাইল করা হবে তা নির্বাচন করা হয়. এই ক্ষেত্রে, এই পেজের সকল <code>p</code> উপাদানগুলোকে নির্বাচন করা হচ্ছে।</li>
<li>এইখানে <code>color: blue</code> একটি ঘোষণাপত্র বলা হয় । আপনি একটি ঘোষণাপত্র দিচ্ছেন যে,আপনি একটি নিদিষ্ট <em>property</em> এইচ.টি.এম.এল এ দিতে চাচ্ছেন, সি.এস.এস <em>value</em> এর মাধ্যমে।.
<ul>
<li><code>color</code> সি.এস.এস এর একটি অংশ যার মাধ্যমে আপনি একটি value দিবেন।</li>
<li><code>blue</code> হচ্ছে সেই value যা আপনি সি.এস.এস দিচ্ছেন।.</li>
</ul>
</li>
<li>আপনার সি.এস.এস rule গুলো অবশ্যই curly braces ( <code>{ ... }</code> ) দ্বরা আবৃত থাকবে।</li>
</ul>
<p class="note">বিশেষ দ্রষ্টব্যঃ "color" এর আমেরিকার বানান. যখন ওয়েব প্রোগ্রামিং ভাষা উদ্ভাবিত হয়েছিল, চুক্তিতে ছিল যে আমরা সকলেই আমেরিকান বানান ব্যবহার করবো বিভ্রান্তি এড়াতে এবং ওয়েব প্রোগ্রামিংকে সহজ করতে।</p>
<p>আপনি চাইলে আপনার লেখা সি.এস.এস rule এর মধ্যে অনেকগুলি declarations যোগ করতে পারেন। আপনাকে শুধু মনে রেখে colon (:) ব্যবহার করতে হবে প্রত্যেক property এবং এর মান এর মধ্যে । (;) এর মাধ্যমে প্রতিটি declaration আলাদা করতে হবে। আপনার সিএসএস rule এর মধ্যে আরও কিছু property যুক্ত করার চেষ্টা করুন:</p>
<pre><code class="language-css">p {
color: blue;
font-size: 30px;
background-color: yellow;
border-radius: 10px;
border: 2px solid green;
padding: 10px;
}</code></pre>
<p>সবকিছু শেষে নিচের ছবির মতো ফলাফল আসবে</p>
<img src="images/5a.png" alt="large blue text on a yellow background with a green border; the text says Make something amazing with the web">
<p> আপনি দুইটি bits এর মধ্যে কতটুকু শূন্য স্থান দিবেন, এই ব্যাপারে সি.এস.এস এ কোন প্রকর সমস্যা নাই। সুতরাং</p>
<pre><code class="language-css">p {color:blue;}</code></pre>
<p>বাস্তবিক হিসাবে ঠিক একই প্রভাব রয়েছে</p>
<pre><code class="language-css">p {
color: blue;
}</code></pre>
<p>আপনি কেমনভাবে লিখবেন এটা আপনার উপর নির্ভর করে। আমি দ্বিতীয় রকমভাবে লিখতে পছন্দ করি, এটা খুব সহজেই পড়া যায়। কি হচ্ছে এইসব</p>
<h2>সি.এস.এস গুলো কোথায় যেতে পারে?</h2>
<p>আমরা ইতিপূর্বে সি.এস.এস কে <code>style</code> উপাদান এর মাধ্যমে এইচ.টি.এম.এল এর head অংশে দিয়েছিলাম।. এটাকে<em>Internal stylesheet</em> বলে, কারন এটি এইচ.টি.এম এল এর মধ্যে দেওয়া হয়েছে।</p>
<p>পৃথক পৃথক এইচ.টি.এম.এল মধ্যে সি.এস.এস দেওয়া সম্ভব <code>style</code> attribute এর মাধ্যমে. উদাহরণস্বরুপ, আপনার এইচ.টি.এম.এল এর body মধ্যে নিচের উপাদানগুলো দিন:</p>
<pre><code class="language-markup"><h1 style="text-shadow: 2px 2px 1px green;">My text rocks</h1></code></pre>
<p>একটি শিরোনাম সাধারণত সবুজ drop shadow থাকে না, আমরা এটি দিয়েছি<code>text-shadow</code> property এর মাধ্যমে আমাদের <code>style</code> attribute এর মধ্যে। এটাকে <em>inline CSS</em> বলে, আলাদা ভাবে রাখার চেয়ে, এটিকে সোজা এইচটিএমএল লাইনের ভিতরে রাখা হয়। এটি করা <strong>সত্যিই খারাপ</strong> ভাবনা, আপনি যদি না পারেন আপনার এইটা করা উচিত হবে না।.</p>
<p class="note">কেউ কী বলতে পারেন কেন ঠিক হবে না?</p>
<p>এটিকে চূড়ান্ত ভাবে একটি <em>external stylesheet</em> এর মাধ্যমে করা হবে, যা একটি পৃথক সিএসএস ফাইলে, পুরাপুরি আপনার এইচ.টি.এম.এল এর বাইরে থাকবে। সুতরাং আপনি <code>example.html</code> নামক একটি ফাইলে আপনার সব এইচ.টি.এম.এল save করতে পারেন , তারপর আপনি আপনার এইচ.টি.এম.এল ফাইল থেকে সি.এস.এস গুলো আলাদা করে<code>style.css</code> নামক ফাইল করে তার মধ্যে save করতে পারেন। (শুধু সি.এস.এস গুলো<code><style></style></code> এই tags গুলো না. তারপর আপনি আপনার সি.এস.এস ফাইলটিকে <code>link</code> করবেন এইচ.টি.এম.এল এর head অংশে, এটি নিচের মতো দেখাবে:</p>
<pre><code class="language-markup"><link href="style.css" type="text/css" rel="stylesheet"></code></pre>
<p> আমরা এই আধ্যয় এর বেশি আলোচনা করবো না, আমরা internal stylesheets নিয়ে Thimble এ কাজ করবো.</p>
<h2>বিভিন্ন ধরনের নির্বাচক </h2>
<p>আমরা এই কোর্সে কয়েকটি ভিন্ন নির্বাচক নিয়ে কাজ করবো . এ পর্যন্ত আপনি শুধু <em>element</em> নির্বাচক দেখেছেন। উদহারণস্বরুপ <code>p</code> এবং <code>h1</code>, যা একটি এইচ.টি.এম.এল এর মধ্যে একই ধরনের সকল উপাদান কে নির্বাচন করে। অপর দুইটি প্রধান নির্বাচক হচ্ছে <em>class</em> এবং <em>id</em>, যা এইচ.টি.এম.এল এ অবস্থিত যে কোন<code>id</code> or <code>class</code> কে নির্বাচন করে।</p>
<p class="note"> আইডি এবং ক্লাশ এর মধ্যে পার্থক্য হচ্ছে যে, আপনি অনেকগুলো এইচ.টি.এম.এল উপাদান যদি একই value দিতে চান তাহলে class ব্যবহার করতে হবে। কিন্তু আপনার একটি মাত্র উপাদান শুধুমাত্র একটি মাত্র value দিতে id ব্যবহার করতে হবে। ids হচ্ছে <em> একটি বিশেষ নির্বাচক</em>, প্রতিটি এইচ.টি.এম.এল পেজে শুধুমাত্র একটি id হতে পারে.</p>
<p>চলুন একটি উদহারণ দেখি. আপনার এইচটিএমএল এ অনেকগুলো paragraphs আছে, যেমন:</p>
<pre><code class="language-markup"><p>Make something amazing with the web</p>
<p>My third paragraph</p>
<p>And another one!</p>
<p>Annnnd another...</p>
<p>My word there are loads of these!</p></code></pre>
<p>আপনি যদি কোন paragraph selector (<code>p</code>) ব্যবহার করেন তাহলে আপনি একসাথে সকল paragraph কে select এবং style করতে পারবেন, কিন্তু আপনি যদি শুধু একটিকে select করতে চান , অথবা তাদের মধ্যে কয়েকটি? এই ক্ষেত্রে classes এবং ids খুব সহজেই ব্যবহার করা যায়। আমাদের উপরোক্ত উদাহরণে কয়েকটি যোগ করি।</p>
<pre><code class="language-markup"><p>Make something amazing with the web</p>
<p class="special">My third paragraph</p>
<p>And another one!</p>
<p class="special">Annnnd another...</p>
<p id="the-end">My word there are loads of these!</p></code></pre>
<p>আমরা এখন শুধু দ্বিতীয় এবং চতুর্থ paragraphs নির্বাচন করতে পারি class selector এর মাধ্যমে। class এর নামের পূর্বে (.) দিয়ে শুরু করতে হয়। উদহারণস্বরুপ:</p>
<pre><code class="language-css">.special {
color: blue;
}</code></pre>
<p>এবং আমরা এখন পঞ্চম নম্বর paragraph নির্বাচন করতে পারি id selector এর মাধ্যমে। id এর নামের পূর্বে (#) দিয়ে শুরু করতে হয়। উদহারণস্বরুপ</p>
<pre><code class="language-css">#the-end {
color: blue;
}</code></pre>
<p class="note">বিভিন্ন ধরনের নির্বাচক রয়েছে আরো জানার জন্য: এটি দেখুন <a href="http://docs.webplatform.org/wiki/css/selectors">WebPlatform.org CSS selectors reference</a>.</p>
<h2>খেলার সময়</h2>
<p>আমাদের পাঠ চূড়ান্ত অংশে আমরা আমাদের প্রকল্প চালু করব এবং কিছু আকর্ষণীয় সিএসএস বৈশিষ্ট্য নিয়ে কাজ করবো। কিছু content এইসব যুক্ত করার চেষ্টা করবো এবং কী পাওয়া যায় সেইটা দেখবো। আমি নিচে প্রতিটি property এর নাম এবং সাথে বর্ণনা দিয়েছি যে কোনটার কোন value দরকার। উদাহরণস্বরুপ:</p>
<ul>
<li><code>color</code>: আপনার উপাদানের ভিতরে text এর রং নির্ধারণ করেন। এর একটি একক <a href="http://docs.webplatform.org/wiki/css/color">সি.এস.এস colour value</a> দিতে হবে, উদাহারণস্বরুপ <code>color: blue;</code>.</li>
<li><code>background-color</code>: কোন উপাদানের পটভূমি রং নির্ধারন করেন। এর একটি একক<a href="http://docs.webplatform.org/wiki/css/color">সি.এস.এস colour value</a> দিতে হবে, উদাহারণস্বরুপ <code>background-color: red;</code></li>
<li><code>font-size</code>: text বড় বা ছোট করতে । এই যেমন একটি নির্দিষ্ট আকার (24px) হতে পারে, একটি আপেক্ষিক মাপ (400%) অথবা অন্যান্য <a href="http://docs.webplatform.org/wiki/css/data_types/length">সি.এস.এস length values</a>. উদাহারণস্বরুপ, <code>font-size: 48px;</code></li>
<li><code>padding</code>: এই কমান্ডের সাহায্যে আপনি আপনার এইচ.টি.এম.এল এর উপাদান এর চারপাশে শূণ্য স্থান এর পরিমাণ নির্ধারন করে। এই যেমন একটি নির্দিষ্ট আকার (24px) হতে পারে, একটি আপেক্ষিক আকার (30%) অথবা অন্যান্য <a href="http://docs.webplatform.org/wiki/css/data_types/length">সি.এস.এস length values</a>. উদাহারণস্বরুপ, <code>padding: 10px;</code> চারটি পক্ষের একই সেট, অথবা <code>padding: 5px 20px 10px 30px;</code> আলাদা আলাদা করে।</li>
<li><code>margin</code>: ই কমান্ডের সাহায্যে আপনি আপনার এইচ.টি.এম.এল এর উপাদান এর চারপাশে শূণ্য স্থান এর পরিমাণ নির্ধারন করে। এই যেমন একটি নির্দিষ্ট আকার (24px) হতে পারে, একটি আপেক্ষিক আকার (30%) অথবা অন্যান্য<a href="http://docs.webplatform.org/wiki/css/data_types/length">সি.এস.এস length values</a> উদাহারণস্বরুপ, <code>margin: 10px;</code>চারটি পক্ষের একই সেট, অথবা <code>margin: 5px 20px 10px 30px;</code> আলাদা আলাদা করে।</li>
<li><code>border</code>: এটি আপানার উপাদানের চারপাশে border দিবে।. এটিতে তিন ধরনের উপাদান রয়েছে— a <a href="http://docs.webplatform.org/wiki/css/data_types/length">সি.এস.এস length value</a> border কতটুকু পাতলা হবে, এটি কোন ধরনের ডিজাইন হবে (<code>solid</code>, <code>dotted</code>, <code>dashed</code>?) এবং একটি <a href="http://docs.webplatform.org/wiki/css/color">সি.এস.এস colour value</a> এটি কোন colour হবে এটি বলতে হবে। উদাহারণস্বরুপ: <code>border: 5px dashed purple;</code>.</li>
<li><code>border-radius</code>: এই কমান্ডের সাহায্যে আপনি আপনার CSS এর উপাদান বৃত্তাকার কোণে দিতে পারবেন. এটি একটি <a href="http://docs.webplatform.org/wiki/css/data_types/length">সি.এস.এস length value</a>round টি কতটুকু বড় হবে। উদাহারণস্বরুপ <code>border-radius: 10px;</code> চারটি কোণে একই সেট দিতে পারেন, অথবা <code>border-radius: 5px 20px 10px 30px;</code> আলাদা আলাদা করে দিতে পারবেন।</li>
</ul>
<p class="note">রঙ তত্ত্ব এবং পরিভাষা, এবং আরো রঙ সম্পদ সম্পর্কে আরো জানতে, পড়ুন <a href="https://mozteach.makes.org/thimble/color-collapse">Color collapse</a> on Thimble.</p>
</main>
<nav>
<p>Previous:<br><a href="lesson4.html">More HTML</a></p>
<p><a href="index.html">Main index</a></p>
<p>Next:<br><a href="lesson6.html">How CSS works</a></p>
</nav>
<hr>
<p><a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>. Share it, make it better, use it for good.</p>
</body>
<script src="prism/prism.js"></script>
</html>