ওয়েব ডিজাইন (পর্ব ১৩) হাইট ওয়াইড, টেক্সট, ফন্ট, লিংক

ওয়েব ডিজাইন (পর্ব ১৩) হাইট ওয়াইড, টেক্সট, ফন্ট, লিংক
শুক্রবার, ২১ আগস্ট, ২০২০
আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো হাইট ওয়াইড, টেক্সট, ফন্ট, লিংক।

হাইট ওয়াইডঃ

উচ্চতা ও প্রস্থ অনুযায়ী আমাদের ডিজাইন করার জন্য এই হাইট ও ওয়াইড সিএসএস ইউজ করার প্রয়োজন হয়।

প্রথমে আমরা পিকচার দিয়ে হাইট ওয়াইড করবো যাতে করে আমরা সহজেই কিছুটা অনুধাবণ করতে পারি।
<style type="text/css">
#exauto { width: auto;
#ex300 {
height: auto; } width: 300px; }
width: 100%;
#ex150 { width: 150px; } #ex100 {
</style>
height: 133px; }
<p><img src="image.jpg" alt="Example" id="exauto"> (width:auto, height:auto)</p>
<p><img src="image.jpg" alt="Example" id="ex300"> (width:300px, height:auto)</p>
<p><img src="image.jpg" alt="Example" id="ex150"> (width:150px, height:auto)</p>
<p><img src="image.jpg" alt="Example" id="ex100"> (width:100%, height:133px)</p>
কোনো div কে যদি আমরা ওয়াইড হাইট করতে চাই তবে নিচের মতো করে করবো।
<style>
div {
height: 100px;
width: 500px;
background-color: #000000;
}
</style>
<div></div>

সিএসএস TEXT:

টেক্সট সিএসএস দিয়ে আপনারা আপনার HTML এর কন্টেন্ট গুলো কে ডিজাইন করতে পারবেন।
টেক্সট কে ডিজাইন করতে বেশি প্রয়োজন হয়, Text Alignment, Decoration, Transformation

টেক্সট কালারঃ

আমাদের ওয়েব পেজের যেকোনো লেখা বা কন্টেন্ট কে কালার করতে আমাদের এই সিএসএস কোড দিয়ে কালার করে থাকি।
  color: green;

ব্যাকগ্রাউন্ড কালারঃ

আমাদের কন্টেন্টের তলদেশে কোনো কালার দেওয়ার জন্য এই ব্যকগ্রাউন্ড কালার কোড ইউজ করে থাকি।
  background-color: lightgrey;

টেক্সট এলাইনমেন্টঃ

আমাদের লেখা গুলোকে ডান পাশ, বাম পাশ ও মাঝে দেখাতে এই CSS ইউজ করা হয়।

text-align: center;
 text-align: left; 
 text-align: right; 
 text-align: justify;

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

টেক্সট ডেকোরেশন আসলে আন্ডার লাইন ওভার লাইন করার জন্য ইউজ করা হয়।এছাড়াও
আমরা যখন লিংকিং করি তখন আমাদের লিংক করা টেক্সট এর নিচেতে আন্ডার লাইন থাকে অটোমেটিক তা আমরা সরানোর জন্য এই টেক্সট ডেকোরেশন নান ইউজ করে থাকি।
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
text-decoration: none;

Text ট্রান্সফরমেশনসঃ

আমাদের লেখা গুলো কে একাধারে বড় হাতের নাকি ছোট হাতের দেখাতে চান তা বুঝানোর জন্য এই সিএসএস ইউজ করা হয়।
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

ফন্টঃ

আমাদের ওয়েব পেজের লেখার ধরণ বা স্টাইল চেন্জ করার জন্য আমরা ফন্ট ইউজ করে থাকি।আমরা ফন্ট গুলো ওয়েব পেজকে নির্দেশ করি নিচের এই সিএসএস দিয়ে।
font-family: Times New Roman;

Google Font:

আমরা এখানে দেখবো গুগল ফন্ট ইউজ করা তবে এভাবে আপনারা যেকোনো ফন্ট ইউজ করতে পারবেন।
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton">
<style>
body {
font-family: "Anton";
font-size: 50px; }
</style>
<p>Lorem ipsum</p>

লিংকঃ

আমাদের ওয়েব পেজের লিংক গুলো কে ডিজাইন করার জন্য নিচের এই সি এসএস কোড গুলো অবশ্যই জানতে হবে।
<style>
a:visited {
color: green;
} a:hover {
color: hotpink;
} a:active { color: blue; }
</style>
<p><b><a href="#">This is a link</a></b></p>
 এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে। 






Samrat Raihan

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time. If you can learn something from this blog, then I will be successful.