CSS লেখা

সিএসএস টেক্সট এট্রিবিউট টেক্সট আকৃতি নির্ধারণ করতে পারে。

টেক্সট এট্রিবিউট দ্বারা, আপনি টেক্সট রঙ, গ্রাফিক্স মাঝারি, টেক্সট আয়নিং, টেক্সট ডেকরেশন, টেক্সট ইনডেন্ট ইত্যাদি পরিবর্তন করতে পারেন。

টেক্সট ইনডেন্ট নিয়ন্ত্রণ

ওয়েব পেজের প্যারাগ্রাফের প্রথম পয়েন্টকে সরিয়ে আনা, এটি সবচেয়ে ব্যবহৃত টেক্সট ফরম্যাটিং ইফেক্টের একটি।

সিএসএস একটি টেক্সট-ইনডেন্ট এট্রিবিউটএই এট্রিবিউট টেক্সট সূচক করতে সুবিধা প্রদান করে。

টেক্সট-ইনডেন্ট এট্রিবিউট ব্যবহার করে, সব উপাদানের প্রথম পয়েন্ট একটি নির্দিষ্ট দূরত্বে সরিয়ে আনা যেতে পারে, যেমন এটি নেতিবাচক মানও হতে পারে。

এই প্রক্রিয়াটির সবচেয়ে সাধারণ ব্যবহারটি হল প্যারাগ্রাফের প্রথম লাইনকে ইনক্রিমেন্ট করা, নিচের নিয়মটি সব প্যারাগ্রাফকে 5 em ইনক্রিমেন্ট করবে:

p {text-indent: 5em;}

Note:সাধারণত, সব ব্লক ইলেমেন্টকে text-indent প্রক্রিয়াটি প্রয়োগ করা যেতে পারে, কিন্তু এই প্রক্রিয়াটিকে লাইনকে প্রয়োগ করা যায় না, ছবির মতো প্রতিস্থাপনাকারী ইলেমেন্টগুলিতেও text-indent প্রক্রিয়াটি প্রয়োগ করা যায় না। কিন্তু একটি ব্লক ইলেমেন্ট (যেমন প্যারাগ্রাফ) প্রথম লাইনের একটি ছবি থাকলে, তা প্রথম লাইনের বাকি টেক্সটের সাথে সরতে পারে。

提示：যদি একটি লাইনকে ইনক্রিমেন্ট করতে হয়, তবে একটি লেফট ইনক্রিমেন্ট বা মার্জিন ব্যবহার করে এই প্রভাব তৈরি করা যেতে পারে。

নেতিবাচক মাত্রা ব্যবহার

text-indent প্রক্রিয়াটিকে নেতিবাচক মাত্রা সেট করা যেতে পারে। এই প্রক্রিয়াটির মাধ্যমে, বহুবিধ আকর্ষক প্রভাব করা যেতে পারে, যেমন 'স্লিংহল্ড ইনক্রিমেন্ট' বা প্রথম লাইনটি ইলেমেন্টের বাকি অংশের বামদিকে স্থাপন করা:

p {text-indent: -5em;}

কিন্তু text-indent প্রক্রিয়াটির নেতিবাচক মাত্রা সেট করার সময় সতর্ক হতে হবে, যদি একটি প্যারাগ্রাফকে নেতিবাচক মাত্রা সেট করা হয়, তবে প্রথম লাইনের কিছু টেক্সট ব্রাউজার উইন্ডোর বামদিকের বাইরে বেরিয়ে আসতে পারে। এই ধরনের প্রদর্শন সমস্যা এড়াড়াতে, নেতিবাচক ইনক্রিমেন্টের জন্য একটি মার্জিন বা ইনক্রিমেন্ট প্রদান করার পরামর্শ দেওয়া হয়:

p {text-indent: -5em; padding-left: 5em;}

প্রতিশত মাত্রা ব্যবহার

text-indent প্রক্রিয়াটি সব ধরনের লঙ্ঘনমাত্রা ব্যবহার করতে পারে, যেমন প্রতিশত মাত্রা।

প্রতিশত ইনক্রিমেন্টটি সাথে ইনক্রিমেন্ট ইলেমেন্টের পিতৃ ইলেমেন্টের প্রস্থকে সম্পর্কিত করা হবে। অন্যভাবে বললে, যদি ইনক্রিমেন্ট মাত্রা 20% হয়, তবে প্রভাবিত ইলেমেন্টের প্রথম লাইনটি তার পিতৃ ইলেমেন্টের প্রস্থের 20% ইনক্রিমেন্ট করবে。

এই উদাহরণে, ইনক্রিমেন্ট মাত্রা পিতৃ ইলেমেন্টের 20% হবে, অর্থাৎ 100 পিক্সেল:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

উত্তরণ

text-indent প্রক্রিয়াটি উত্তরণ করা যেতে পারে, যদি তো নিচের ট্যাগটি ভালোভাবে চিন্তা করেন:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>

এই ট্যাগগুলিতে আইসিডি হলে inner ডিভ ইলেমেন্টের সাথে সাথে 50 পিক্সেল ইনক্রিমেন্ট হবে, কারণ এই প্যারাগ্রাফটি তার বাবা ইলেমেন্টের ইনক্রিমেন্ট ভালো করে নিয়েছে。

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align:center এবং <CENTER>

আপনি হয়তো মনে করেছেন যে, text-align:center এবং <CENTER> তত্ত্বটির কাজ একই, কিন্তু তারা অসমান হয়。

<CENTER> শুধুমাত্র লেখা নয়, বরং সমগ্র তত্ত্বকেও কেন্দ্রস্থলে রাখে। text-align প্রতিশত তত্ত্বকে কেন্দ্রস্থলে সাজাতে পারে না, তা শুধুমাত্র তার মধ্যবর্তী কনটেন্টকে প্রভাবিত করে। তত্ত্বটি একটি পড়ার দিক থেকে অন্যটি পড়ার দিকে স্থানান্তরিত হবে না, তা শুধুমাত্র তার মধ্যবর্তী লেখা প্রভাবিত হবে。

justify

শেষ সমস্ত সমানভাবে সামঞ্জস্যপূর্ণ লক্ষ্য হল justify。

দ্বৈতমুখী সামঞ্জস্যপূর্ণ লেখায়, লেখার পড়ার দিকটি পিতৃতন্ত্রের অভ্যন্তরীণ সীমানায় থাকবে। এরপর, শব্দ এবং অক্ষরগুলির মধ্যে স্পেসিং সমান করতে সাজানো হবে, যাতে প্রত্যেক পড়ার দিকটির দৈর্ঘ্য একই হয়। আপনি হয়তো মনে করেছেন যে, দ্বৈতমুখী সামঞ্জস্যপূর্ণ লেখা প্রিন্টিং ক্ষেত্রে ব্যবহৃত হয়。

লক্ষ্য করা উচিত যে, দ্বৈতমুখী সামঞ্জস্যপূর্ণ লেখা কিভাবে সম্পূর্ণ পিতৃতন্ত্রের বাঁদিক এবং ডানদিকের মধ্যে স্থান পাবে, তা ব্যবহারকারীর দ্বারা (না CSS) নির্ধারিত হবে। বিস্তারিত জানতে, দেখুন CSS text-align প্রতিশত পৃষ্ঠা。

শব্দ স্পেসিং

word-spacing প্রতিশতশব্দ (শব্দ) এর মধ্যে স্তন্ধারূপ স্পেসিং পরিবর্তন করা যেতে পারে। তার ডিফল্ট মান normal এবং 0 সমান।

word-spacing প্রতিশত একটি পজিটিভ লঙ্ঘন বা নেগেটিভ লঙ্ঘন গ্রহণ করে। যদি একটি পজিটিভ লঙ্ঘন প্রদান করা হয়, তবে শব্দগুলির মধ্যে স্পেসিং বাড়বে। word-spacing-কে একটি নেগেটিভ মান সজ্জিত করলে, তা কমাবে:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
এটি একটি অনুচ্ছেদ। শব্দগুলির মধ্যে স্পেসিং বাড়ানো হবে。
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

প্রয়োগ টিআইইয় : শব্দ বা অক্ষরের বিচ্ছেদ (word spacing) বৃদ্ধি ও হ্রাস করুন

Note:যদি আপনি CSS-এর 'শব্দ' (word) এর বিশদ বোঝাতে চান, তবে CSS word-spacing অ্যাট্রিবিউট রেফারেন্স পেজ。

অক্ষর বিচ্ছেদ

letter-spacing অ্যাট্রিবিউটword-spacing-এর সম্পর্কে, letter-spacing অ্যাট্রিবিউট হারফ ও অক্ষরের মধ্যের দূরত্বকে সংশোধিত করে。

word-spacing অ্যাট্রিবিউটের মতো, letter-spacing অ্যাট্রিবিউটের মানগুলোও সব ধরনের দূরত্বকে মান্য করে। ডিফল্ট কীওয়ার্ড হল normal (এটি letter-spacing:0-র সমতুল্য)। উপস্থিত দূরত্ব মানটি অক্ষর ও হারফের মধ্যের দূরত্বকে বৃদ্ধি ও হ্রাস করবে:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

প্রয়োগ টিআইইয় : অক্ষরের দূরত্ব (হারফের বিচ্ছেদ) নির্ধারণ করুন

অক্ষর রূপান্তর

text-transform অ্যাট্রিবিউটটেক্সটের বর্ণ হারফের পরিবর্তন করা। এই অ্যাট্রিবিউটের 4টি মান আছে:

  • none
  • uppercase
  • lowercase
  • capitalize

ডিফল্ট মান none টেক্সটকে কোনও পরিবর্তন করে না, সূত্রসামগ্রীতে উপস্থিত প্রকৃত বর্ণসারণকে ব্যবহার করবে। নামের মতো, uppercase ও lowercase টেক্সটকে সমস্ত বর্ণকে বড় ও ছোট বর্ণে রূপান্তরিত করবে। শেষত, capitalize কেবল প্রত্যেক শব্দের প্রথম বর্ণকে বড় করবে。

এই অ্যাট্রিবিউট হিসাবে, text-transform খুবই গুরুত্বপূর্ণ নয়, কিন্তু আপনি যদি একদিকে সমস্ত h1 ইলেকট্রনটিকে বড় বর্ণে রূপান্তরিত করার সিদ্ধান্ত নিতে চান, তবে এই অ্যাট্রিবিউট খুবই উপযোগী হবে। সমস্ত h1 ইলেকট্রনটির কনটেন্টকে এককভাবে সংশোধিত করতে হবে না, কেবল আপনাকে text-transform এর মাধ্যমে এই সংশোধনকে করতে হবে:

h1 {text-transform: uppercase}

text-transform এর দুটি লাভ আছে। প্রথমত, এই সংশোধনকে করার জন্য একটি সরল নিয়ম লিখতে হবে, যদিও h1 ইলেকট্রনটির কিছুই সংশোধিত হবে না। দ্বিতীয়ত, আপনি যদি পরবর্তীতে সব বর্ণকে পূর্ববর্তী বর্ণসারণকে ফিরিয়ে দেওয়ার সিদ্ধান্ত নিতে চান, তবে এই সংশোধনকে সহজেই করতে পারবেন。

প্রয়োগ টিআইইয় : টেক্সটের বর্ণ হারফের বৃদ্ধি ও হ্রাস করুন

টেক্সট ডেকরেশন

আগামীতে আমরা নিম্নোক্ত আলোচনা করবো text-decoration 属性এটা একটি অত্যন্ত আগ্রহ্য প্রতিভা,যা অনেক আগ্রহ্য প্রক্রিয়া প্রদান করে।

text-decoration এর 5টি মান রয়েছে:

  • none
  • underline
  • overline
  • line-through
  • blink

এটা একটি উল্লেখযোগ্য প্রতিভা,যা অনেক আগ্রহ্য প্রক্রিয়া প্রদান করে。

none মানটি একটি নিয়ম সরাবে,যা একটি এলাকাকে সরাবে,যা প্রথমে প্রয়োগ করা হয়েছে।সাধারণত,নকশা না থাকা টেক্সট ডিফল্ট অবস্থা,কিন্তু এটা সবসময়ই এইভাবে নয়।উদাহরণস্বরূপ,লিঙ্কটি ডিফল্টভাবে নীচের নকশা থাকবে।যদি আপনি লিঙ্কের নীচের নকশা সরানো হয়,তবে নিম্নরূপের CSS ব্যবহার করতে পারেন:

a {text-decoration: none;}

Note:যদি একটি নিয়মকে স্পষ্টভাবে লিঙ্কের নীচের নকশা সরানো হয়,তবে আঙ্কন এবং সাধারণ টেক্সটের মধ্যে দৃশ্যমান পার্থক্যটি কেবল রঙের মাধ্যমে হবে (এটা সাধারণভাবে এইভাবে হবে,কিন্তু রঙটির নিশ্চিতভাবে পার্থক্য থাকবে না)。

একটি নিয়মে একাধিক নকশা মিশ্রণ করা যেতে পারে।যদি সবগুলো লিঙ্কগুলোকে উপরের নকশা এবং নীচের নকশা দেওয়া হয়,তবে নিম্নরূপের নিয়মটি হতে পারে:

a:link a:visited {text-decoration: underline overline;}

কিন্তু এটা খুবই ধারণামূলক যে,যদি দুটি ভিন্ন নকশা একই এলাকায় মিলিত হয়,তবে একটি নকশা আরেকটি নকশা সরাবে।যেমন নিম্নরূপের নিয়মটি হতে পারে:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

যেকোনো নিয়ম প্রতিষ্ঠা করা হলে,সকল class হলেও stricken এর হুকিমুকুকির মধ্যে কেবল একটি সরল নতুন লাইন নকশা দেখানো হবে,কোনো লাইন নকশা এবং নীচের লাইন নকশা নেই,কারণ text-decoration মানটি বদলাবে না, এটা সংগঠিত হবে。

শুধুমাত্র স্পেস প্রক্রিয়াকরণ

white-space প্রতিভাএটি ব্যবহারকারীর উপদেষ্টককে সূত্রসমূহের মধ্যে স্পেস,নিলামবন্ধন এবং ট্যাব চার্জের পদ্ধতিতে প্রভাবিত করে。

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

<p>This     paragraph has    many
    spaces           in it.</p>

এই ডিফল্ট আচরণটি মন্তব্য করে নিয়ে নিম্নলিখিত ডিক্টাট ব্যবহার করা যেতে পারে:

p {white-space: normal;}

উপরোক্ত নিয়মগুলি ব্রাউজারকে সাধারণভাবে টেক্সট প্রক্রিয়াকরণ করতে বলে; অতিরিক্ত ভাস্কীয়াল সিকোয়েন্সকে ত্যাগ করা হবে।এই মানটি দেওয়ার ক্ষেত্রে, লাইন সেপারেটর (এন্টার) গুলি স্পেস হিসাবে পরিবর্তিত হবে, এবং একটি লাইনে বেশিরভাগ স্পেসকে একটি স্পেসে পরিবর্তিত হবে。

উদাহরণ TIY: white-space: normal

মান pre

কিন্তু, white-space প্রকৃতির মানটি pre করা হলে, এই প্রকৃতির প্রভাবে থাকা ইলিমেন্টগুলিতে ভাস্কীয়াল সিকোয়েন্সের হালনাগাদ ভিন্ন, তার আচরণ একটি XHTML প্রে ইলিমেন্টের মতো; ভাস্কীয়াল সিকোয়েন্সগুলি অণুসরণ করা হবে না。

white-space প্রকৃতির মানটি pre, তবে ব্রাউজার অতিরিক্ত স্পেস, যেমন enter-কেও গুরুত্ব দেবে।এই দিক থেকে এবং এই দিকমাত্র কোনও ইলিমেন্টকে একটি pre ইলিমেন্টের মতো গণ্য করা যেতে পারে。

উদাহরণ TIY: white-space: pre

Note:পরীক্ষা করা হয়েছে যে, IE 7 এবং এর আগের সংস্করণের ব্রাউজারগুলি এই মানটির সহায়তা করে না, তাই উপরোক্ত উদাহরণটি দেখার জন্য IE-র বাইরের ব্রাউজার ব্যবহার করুন。

মান nowrap

এর বিপরীত মান nowrap, যা এলিমেন্টের মধ্যের টেক্সটকে লাইনভাগ রাখবে, যদি একটি br ইলিমেন্ট ব্যবহার করা হয় না।CSS-এ nowrap-এর ব্যবহার nowrap-এর HTML 4-এ <td nowrap> একটি টেবিল সেলকে লাইনভাগ না করতে সমান, কিন্তু white-space মানটি কোনও ইলিমেন্টে প্রয়োগ করা যেতে পারে。

উদাহরণ TIY: white-space: nowrap

মান pre-wrap এবং pre-line

CSS2.1-এ প্রে-ওয়ার্প এবং pre-line-এর মতো মান আনা হয়, যেগুলিকে আগের CSS সংস্করণগুলিতে ছিল না।এই মানগুলির কাজ হল সৃষ্টিকারকদেরকে ভাস্কীয়াল সিকোয়েন্স নিয়ন্ত্রণ করাতে বেশি করে সহায়তা করা。

যদি এলিমেন্টের white-space সেট করা হয় pre-wrap, তবে এলিমেন্টের মধ্যের টেক্সটটি ভাস্কীয়াল সিকোয়েন্সগুলিকে সংরক্ষণ করবে, কিন্তু টেক্সট লাইনগুলি সাধারণভাবে ভাগ হবে।যদি এই মানটি সেট করা হয়, সোর্স টেক্সটের লাইন সেপারেটর এবং তৈরী হওয়া লাইন সেপারেটরও সংরক্ষণ করা হবে।pre-line প্রে-ওয়ার্প-এর বিপরীত, যেটি সাধারণ টেক্সটের মতোই ভাস্কীয়াল সিকোয়েন্সগুলিকে মিলিয়ে দেবে, কিন্তু লাইন সেপারেটরকে সংরক্ষণ করবে。

Example TIY: white-space: pre-wrap

Example TIY: white-space: pre-line

Note:We tested the two examples above in IE7 and FireFox2.0 browsers, but the result is that the values pre-wrap and pre-line are not well supported.

Summary

The following table summarizes the behavior of the white-space attribute:

Value Space character Line feed Auto-wrap
pre-line Merge Preserve Allow
normal Merge Ignore Allow
nowrap Merge Ignore Disallow
pre Preserve Preserve Disallow
pre-wrap Preserve Preserve Allow

Text direction

If you are reading an English book, you will read it from left to right and from top to bottom, which is the flow direction of English. However, not all languages are like this. We know that ancient Chinese is read from right to left, of course, including Hebrew and Arabic, etc. CSS2 introduced an attribute to describe its directionality.

direction attributeIt affects the writing direction of block-level elements in Chinese text, the layout direction of table columns, the direction of horizontal filling of its element box, and the position of the last line in the two-aligned elements.

Note:For inline elements, only when unicode-bidi attributeThe direction attribute will only take effect when set to embed or bidi-override.

The direction attribute has two values: ltr and rtl. Most of the time, the default value is ltr, which displays text from left to right. If you want to display text from right to left, you should use the value rtl.

CSS text example:

text color set
This example demonstrates how to set the color of text.
Set the background color of text
This example demonstrates how to set the background color of part of the text.
Specify character spacing
This example demonstrates how to increase or decrease character spacing.
Set line spacing using percentage
This example demonstrates how to set line spacing in a paragraph using percentage values.
Set line spacing using pixel values
This example demonstrates how to set line spacing in a paragraph using pixel values.
Set line spacing using a number
This example demonstrates how to set line spacing in a paragraph using a numerical value.
Align text
This example demonstrates how to align text.
Decorate text
This example demonstrates how to add decorations to text.
টেক্সট ইনডেন্ট নিয়ন্ত্রণ
This example demonstrates how to indent the first line of text.
Control letters in text
This example demonstrates how to control letters in text.
Prevent text wrapping in an element
This example demonstrates how to prevent text wrapping within an element.
Increase word spacing
This example demonstrates how to increase the spacing between words in a paragraph.

CSS text attribute

attribute description
color text color set
direction টেক্সট দিক সেট
line-height লাইন হাইগন্টি সেট
letter-spacing অক্ষর স্পেসিং সেট
text-align এলিমেন্টের মধ্যে টেক্সট অবস্থান নিয়ন্ত্রণ
text-decoration টেক্সটের মধ্যে সাজসজ্জা যোগ করুন
text-indent এলিমেন্টের মধ্যে টেক্সটের প্রথম লাইনের ইনডেন্ট নিয়ন্ত্রণ
text-shadow টেক্সট শ্যাডো সেট
text-transform এলিমেন্টের মধ্যে অক্ষর নিয়ন্ত্রণ
unicode-bidi টেক্সট দিক সেট
white-space এলিমেন্টের মধ্যে খালি স্থানের পদ্ধতি নিয়ন্ত্রণ
word-spacing কালি স্পেসিং সেট