সিএসএসে একটি পটভূমি চিত্র কীভাবে সেট করবেন

একটি ওয়েবসাইট তৈরি করা নিজেকে প্রকাশ করার দুর্দান্ত উপায়। যদিও অনেকগুলি ওয়েবসাইট তৈরির সরঞ্জাম রয়েছে, তবে ওয়েবসাইটগুলি কীভাবে পর্দার আড়ালে কাজ করে সে সম্পর্কে আরও জানার একটি মজাদার উপায় এটি নিজের লেখা। একটি ভাল শিক্ষানবিস প্রকল্প হ'ল একটি ওয়েবসাইট তৈরি করা এবং CSS সহ একটি পটভূমি চিত্র যুক্ত করা। এই প্রকল্প আপনাকে এইচটিএমএল এবং সিএসএস উভয়ই দিয়ে চলেছে running

সিএসএস কি?

সিএসএস মানে ক্যাসকেডিং স্টাইল শীট। এটি এমন একটি প্রোগ্রামিং ভাষা যা আপনাকে মার্কআপ ভাষাগুলিকে স্টাইল করতে দেয় style এই জাতীয় একটি চিহ্নআপ ভাষা হ'ল এইচটিএমএল বা হাইপার-টেক্সট মার্কআপ ল্যাঙ্গুয়েজ। এইচটিএমএল ওয়েবসাইট তৈরি করতে ব্যবহৃত হয়। যদিও আপনি এইচটিএমএল ব্যবহার করে ওয়েবসাইটের কিছু স্টাইল নিয়ন্ত্রণ করতে পারেন, সিএসএস আরও অনেকগুলি নিয়ন্ত্রণ এবং নকশার বিকল্প সরবরাহ করে।

এইচটিএমএল দিয়ে একটি বেসিক ওয়েবসাইট তৈরি করা

সিএসএস যেহেতু কেবল স্টাইলের ভাষা তাই এটি র জন্য আমাদের প্রথমে স্টাইল করার জন্য কিছু দরকার something সিএসএস নিয়ে খেলতে শুরু করার জন্য একটি খুব প্রাথমিক ওয়েবসাইটই যথেষ্ট। আমাদের পৃষ্ঠাটি "হ্যালো ওয়ার্ল্ড" প্রদর্শন করবে।

 <html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>

আপনি যদি এইচটিএমএলের সাথে পরিচিত না হন তবে আসুন দ্রুত সমস্ত উপাদানগুলি কী করে তা দেখি। উল্লিখিত হিসাবে, এইচটিএমএল একটি মার্কআপ ভাষা, যার অর্থ এটি পাঠ্যটি কী তা চিহ্নিত করতে ট্যাগ ব্যবহার করে mark যখনই আপনি কোনও শব্দ ঘিরে দেখেন <> এটি একটি ট্যাগ। দুটি ধরণের ট্যাগ রয়েছে, একটি ট্যাগ যা <> ব্যবহার করে একটি বিভাগের শুরু চিহ্নিত করে এবং </> ব্যবহার করে একটি বিভাগের শেষ চিহ্নিত করে। একটি বিভাগের মধ্যে থাকা পাঠ্যটিও এই পার্থক্যটি দেখতে আরও সহজ করে তোলা।

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

সম্পর্কিত: 10 টি সিএসএস কোড উদাহরণ আপনি 10 মিনিটে শিখতে পারেন

এইচটিএমএলে সিএসএস যুক্ত করা হচ্ছে

এখন আমাদের একটি সহজ পৃষ্ঠা রয়েছে, আমরা সিএসএসের সাহায্যে স্টাইলটি কাস্টমাইজ করতে পারি। আমাদের পৃষ্ঠা এখনই খুব সহজ, এবং আমরা অনেক কিছুই করতে পারি না, তবে আসুন আমরা আমাদের অনুচ্ছেদটিকে আলাদা করে শুরু করি যাতে আমরা একটি সীমানা যুক্ত করে পটভূমি থেকে আলাদা করতে পারি।

 <html>
<head>
</head>
<body>
<p style="border-style: solid;" >Hello World</p>
</body>
</html>

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

 <html>
<head>
</head>
<body>
<p style="border-style: solid; padding: 30px; text-align: center" >Hello World</p>
</body>
</html>

আমাদের ওয়েবসাইটটি আরও ভাল দেখাচ্ছে, তবে আমাদের এইচটিএমএল অনুচ্ছেদে ট্যাগটিতে সমস্ত বিবরণ দিয়ে অগোছালো দেখা শুরু করছে। আমরা এই তথ্যটি আমাদের শিরোনামে স্থানান্তর করতে পারি। আমাদের শিরোনাম এমন তথ্যের জন্য যা আমাদের ওয়েবসাইটটি সঠিকভাবে প্রদর্শন করা দরকার।

 <html>
<head>
<style>
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
</style>
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>

এখন আমাদের এইচটিএমএল পড়া সহজ। আপনি লক্ষ্য করবেন যে আমাদের চারপাশে কিছু জিনিস পরিবর্তন করতে হয়েছিল। স্টাইল ট্যাগ ওয়েব ব্রাউজার শৈলীর তথ্য জানায়, তবে কী কী স্টাইল করতে হয় তাও জানায়। আমাদের উদাহরণে, কী স্টাইল করতে হবে তা জানানোর জন্য আমরা দুটি ভিন্ন উপায় ব্যবহার করেছি। স্টাইল ট্যাগের পি ওয়েব ব্রাউজারকে সমস্ত অনুচ্ছেদে ট্যাগগুলিতে সেই স্টাইলটি প্রয়োগ করতে বলছে। #OurParagraph অধ্যায় আইডি ourParagraph সঙ্গে শুধুমাত্র শৈলী উপাদান এটা বলে। লক্ষ্য করুন যে আইডি তথ্যটি আমাদের দেহের পি ট্যাগটিতে যুক্ত হয়েছিল।

আপনার ওয়েবসাইটে একটি সিএসএস ফাইল আমদানি করা হচ্ছে

শিরোনামে শৈলীর তথ্য যুক্ত করা আমাদের কোডটি পড়া সহজ করে তোলে। তবে, আমরা যদি একইভাবে অনেকগুলি ভিন্ন পৃষ্ঠাগুলি স্টাইল করতে চাই তবে আমাদের সেই পাঠ্যটি প্রতিটি পৃষ্ঠার শীর্ষে যুক্ত করতে হবে। এটি খুব বেশি কাজের মতো মনে হচ্ছে না, আপনি এটি অনুলিপি করে শেষ করতে পারেন তবে আপনি যদি পরে কোনও উপাদান পরিবর্তন করতে চান তবে এটি অনেক কাজ তৈরি করে।

পরিবর্তে, আমরা একটি পৃথক ফাইলে সিএসএস তথ্য রাখতে যাচ্ছি এবং পৃষ্ঠাটি স্টাইল করার জন্য ফাইলটি আমদানি করব। স্টাইল ট্যাগের মধ্যে থাকা তথ্যটি একটি নতুন সিএসএস ফাইল আমাদের সিএসএসফাইএলএসএসে অনুলিপি করুন এবং আটকান।

 p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

তারপরে, এইচটিএমএল ফাইলটিতে ফাইলটি আমদানি করুন।

 <html>
<head>
<link rel="stylesheet" href="ourCSSfile.css">
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>

সিএসএস সহ একটি পটভূমি চিত্র যুক্ত করা হচ্ছে

এখন আপনার এইচটিএমএল এবং সিএসএসে একটি শক্ত বেস রয়েছে, একটি পটভূমি চিত্র যুক্ত করা একটি পিষ্টক হবে। প্রথমে আপনি কোন উপাদানটিকে একটি পটভূমি চিত্র দিতে চান তা শনাক্ত করুন। আমাদের উদাহরণে, আমরা পুরো পৃষ্ঠায় একটি পটভূমি যুক্ত করব will এর অর্থ হ'ল আমরা শরীরের স্টাইল পরিবর্তন করতে চাই। মনে রাখবেন, বডি ট্যাগগুলিতে সমস্ত দৃশ্যমান উপাদান থাকে।

 body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

সিএসএসে বডি স্টাইল পরিবর্তন করতে প্রথমে বডি কীওয়ার্ডটি ব্যবহার করুন। তারপরে কোঁকড়া বন্ধনী যুক্ত করুন যা আমরা {} এর আগে করেছি} শরীরের জন্য সমস্ত স্টাইলের তথ্য অবশ্যই কোঁকড়ানো বন্ধনীগুলির মধ্যে হওয়া উচিত। আমরা যে স্টাইলের বৈশিষ্ট্যটি পরিবর্তন করতে চাই তা হ'ল ব্যাকগ্রাউন্ড-চিত্র । শৈলীর অনেকগুলি বৈশিষ্ট্য রয়েছে। এগুলি সব মুখস্থ করার আশা করবেন না। আপনি মনে রাখতে চান এমন বৈশিষ্ট্য সহ একটি সিএসএস বৈশিষ্ট্য প্রতারণা-শীট বুকমার্ক করুন।

সম্পর্কিত: 8 টি এইচটিএমএল প্রভাবগুলি যে কেউ তাদের ওয়েবসাইটে যুক্ত করতে পারে

বৈশিষ্ট্যের পরে, আপনি কীভাবে বৈশিষ্ট্যটি পরিবর্তন করবেন তা নির্দেশ করতে একটি কোলন ব্যবহার করুন। একটি চিত্র আমদানি করতে, ইউআরএল () ব্যবহার করুন। এটি ইঙ্গিত দেয় যে আপনি ইমেজটিতে নির্দেশ করতে একটি লিঙ্ক ব্যবহার করছেন। উদ্ধৃতি চিহ্নের মধ্যে বন্ধনীগুলিতে ফাইলের অবস্থানটি রাখুন। অবশেষে, সেমিকোলন দিয়ে লাইনটি শেষ করুন। যদিও সিএসএসে সাদা জায়গার কোনও অর্থ নেই, তবে সিএসএসকে আরও সহজ করে তুলতে ইন্ডেন্টেশন ব্যবহার করুন।

আমাদের উদাহরণটি এরকম দেখাচ্ছে:

যদি চিত্রটি আকারের কারণে আপনার চিত্রটি সঠিকভাবে প্রদর্শন না করে তবে আপনি সরাসরি চিত্রটি পরিবর্তন করতে পারেন। তবে সিএসএসে ব্যাকগ্রাউন্ড স্টাইলের বৈশিষ্ট্য রয়েছে যা আপনি ব্যাকগ্রাউন্ড পরিবর্তন করতে ব্যবহার করতে পারেন। পটভূমির চেয়ে ছোট চিত্রগুলি স্বয়ংক্রিয়ভাবে পটভূমিতে পুনরাবৃত্তি হবে। এটি বন্ধ করতে, ব্যাকগ্রাউন্ড-পুনরাবৃত্তি যুক্ত করুন : নো-রিপিট ; আপনার উপাদান যাও।

পুরো পটভূমিটি কোনও চিত্রকে কভার করার দুটি উপায়ও রয়েছে। প্রথমত, আপনি ব্যাকগ্রাউন্ড-আকারটি পটভূমির আকারের সাথে পর্দার আকারে সেট করতে পারেন : 100% 100%; , তবে এটি চিত্রটিকে প্রসারিত করবে এবং চিত্রটিকে খুব বেশি বিকৃত করতে পারে। আপনি যদি চিত্রটির অনুপাত পরিবর্তন করতে না চান তবে আপনি ব্যাকগ্রাউন্ড-আকারটি কভার করতেও পারেন। কভার ব্যাকগ্রাউন্ড চিত্রটি পটভূমিকে কভার করবে, তবে চিত্রটি বিকৃত করবে না।

পটভূমির রঙ পরিবর্তন করা

একটি শেষ জিনিস পরিবর্তন করা যাক। এখন যেহেতু আমাদের একটি পটভূমি রয়েছে, আমাদের অনুচ্ছেদটি পড়া শক্ত। এর ব্যাকগ্রাউন্ড সাদা করা যাক। প্রক্রিয়াটিও একই রকম। আমরা যে উপাদানটি সংশোধন করতে চাই তা হ'ল # আমাদের অনুচ্ছেদ। # টি নির্দেশ করে যে "আমাদের অনুচ্ছেদ" একটি আইডি নাম। এরপরে, আমরা ব্যাকগ্রাউন্ড-রঙের বৈশিষ্ট্যটি সাদা করতে চাই।

 body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

অনেক ভাল.

সিএসএস সহ আপনার ওয়েবসাইট ডিজাইন করা অবিরত

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