সিএসএস দিয়ে ওয়েবপৃষ্ঠা তৈরি করে নোটপ্যাড স্টাইল করছে

10 এর 10

CSS স্টাইল শীট তৈরি করুন

CSS স্টাইল শীট তৈরি করুন। জেনিফার কিরিন

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

  1. একটি ফাঁকা উইন্ডো পেতে নোটপ্যাড ফাইল নির্বাচন করুন
  2. ফাইলটি সিলেক্ট করে ফাইলটি সংরক্ষণ করুন <এভাবে সংরক্ষণ করুন ...
  3. আপনার হার্ড ড্রাইভে My_website ফোল্ডারে নেভিগেট করুন
  4. "সকল ফাইল" হিসাবে "রূপে সংরক্ষণ করুন" পরিবর্তন করুন
  5. আপনার ফাইল "styles.css" নাম দিন (উদ্ধৃতি বন্ধ করুন) এবং সংরক্ষণ করুন ক্লিক করুন

10 এর 02

CSS এইচটিএমএল স্টাইল শীট লিঙ্ক করুন

CSS এইচটিএমএল স্টাইল শীট লিঙ্ক করুন জেনিফার কিরিন

একবার আপনি আপনার ওয়েব সাইট জন্য একটি স্টাইল শীট পেয়েছেন, আপনি ওয়েব পৃষ্ঠা নিজেই এটি সংযুক্ত করতে হবে। এটি করার জন্য আপনি লিঙ্ক ট্যাগ ব্যবহার করেন। আপনার পোষা প্রাণী.htm ডকুমেন্টের ট্যাগগুলির মধ্যে যেকোনো জায়গায় নিম্নোক্ত লিঙ্ক ট্যাগটি রাখুন:

10 এর 03

পৃষ্ঠা মার্জিনগুলি ঠিক করুন

পৃষ্ঠা মার্জিনগুলি ঠিক করুন জেনিফার কিরিন

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

আমি আমার পৃষ্ঠার উপরে বাম কোণে শুরু করতে পছন্দ করি, পাঠের পার্শ্ববর্তী কোনো অতিরিক্ত প্যাডিং বা মার্জিন না। এমনকি যদি আমি বিষয়বস্তু প্যাড করতে যাচ্ছি, আমি মার্জিনটি শূন্যে সেট করে দিই যাতে আমি একই ফাঁকা স্লেট দিয়ে শুরু করি। এটি করার জন্য, আপনার styles.css ডকুমেন্টে নিম্নলিখিতটি যোগ করুন:

html, শরীর {
মার্জিন: 0 পিএক্স;
প্যাডিং: 0 পিএক্স;
সীমানা: 0 পিএক্স;
বামে: 0 পিএক্স;
শীর্ষ: 0 পিএক্স;
}

10 এর 04

পৃষ্ঠা ফন্ট পরিবর্তন

পৃষ্ঠা ফন্ট পরিবর্তন জেনিফার কিরিন

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

সাধারণত, আপনি অনুচ্ছেদের ফন্ট পরিবর্তন করবেন, অথবা কখনো কখনো সম্পূর্ণ নথি নিজেই। এই সাইটের জন্য আমরা হেডার এবং অনুচ্ছেদ স্তর এ ফন্ট নির্ধারণ করব। আপনার styles.css নথিতে নিম্নলিখিতটি যোগ করুন:

পি, লি {
ফন্ট: 1em এরিয়েল, হেললেটিকা, সান-সেরিফ;
}
h1 {
ফন্ট: 2em এরিয়েল, হেলিটিটা, সান-সেরিফ;
}
h2 {
ফন্ট: 1.5ম আরিয়াল, হেললেটিকা, সানসিরফ;
}
h3 {
ফন্ট: 1.25em আরিয়াল, হেললেটিকা, সানসিরফ;
}

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

05 এর 10

আপনার লিংক আরও আকর্ষণীয় তৈরীর

আপনার লিংক আরও আকর্ষণীয় তৈরীর জেনিফার কিরিন

লিঙ্কগুলির জন্য ডিফল্ট রং নিখুঁত এবং পরিদর্শন লিঙ্কগুলির জন্য যথাক্রমে নীল ও বেগুনি। যদিও এটি প্রমিত, এটি আপনার পৃষ্ঠার রঙের স্কিমের মাপসই হতে পারে না, তাই এর পরিবর্তে এটি পরিবর্তন করা যাক। আপনার styles.css ফাইলে, নিম্নলিখিতগুলি যোগ করুন:

একটি লিংক {
ফন্ট-পরিবার: এরিয়েল, হেলিটিটা, সান-সেরিফ;
রঙ: # FF9900;
পাঠ্য-প্রসাধন: নিম্নরেখা;
}
একটি: পরিদর্শন {
রঙ: # FFCC66;
}
একটি: হভার {
পটভূমি: #FFFFCC;
ফন্ট-ওজন: বোল্ড;
}

আমি তিনটি লিঙ্ক শৈলী সেট আপ, একটি: ডিফল্ট হিসাবে লিঙ্ক, একটি: পরিদর্শন করা হয় যখন দেখার জন্য, আমি রঙ পরিবর্তন, এবং একটি: হভার। একটি সঙ্গে: হভার আমি লিঙ্কটি একটি ব্যাকগ্রাউন্ড রং পেতে এবং এটি ক্লিক করতে হবে একটি লিংক জোরাজুরি যেতে যান।

10 থেকে 10

ন্যাভিগেশন বিভাগ স্টাইলিং

ন্যাভিগেশন বিভাগ স্টাইলিং জেনিফার কিরিন

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

আপনার styles.css নথিতে নিম্নলিখিত CSS যুক্ত করুন:

#nav {
প্রস্থ: 225 পিএক্স;
মার্জিন-ডান: 15px;
সীমান্ত: মাঝারি কঠিন # 000000;
}
#nav li {
তালিকা স্টাইল: কেউ না;
}
.footer {
ফন্ট সাইজ: .75em;
স্পষ্ট উভয়;
প্রস্থ: 100%;
পাঠ্য সাইনইন: কেন্দ্র;
}

তালিকার স্টাইলের সম্পত্তি তালিকাটি কোনও বুলেট বা সংখ্যা না নিয়ে ন্যাভিগেশন বিভাগের ভিতরে সেট আপ করে এবং .footer শৈলীটি কপিরাইট বিভাগকে ছোট এবং কেন্দ্রে কেন্দ্রে কেন্দ্রীভূত করে।

10 এর 07

প্রধান বিভাগ অবস্থান

প্রধান বিভাগ অবস্থান জেনিফার কিরিন

আপনার পজিশনটি সম্পূর্ণ পজিশনিং দ্বারা স্থির করে আপনি নিশ্চিত হতে পারেন যে এটি আপনার ওয়েব পৃষ্ঠাতে থাকতে চান তা ঠিক থাকবে। আমি বড় মনিটরের পরিমাপের জন্য 800px চওড়া তৈরি করেছি, কিন্তু যদি আপনার একটি ছোট মনিটর থাকে, তবে আপনি এটি সংকীর্ণ করতে চান

আপনার styles.css ডকুমেন্টে নিম্নলিখিতটি রাখুন:

# পুরুষ {
প্রস্থ: 800 পিক্স;
শীর্ষ: 0 পিএক্স;
অবস্থান: পরম;
বাম: 250 পিক্স;
}

10 এর 10

আপনার অনুচ্ছেদ স্টাইলিং

আপনার অনুচ্ছেদ স্টাইলিং জেনিফার কিরিন

যেহেতু আমি ইতিমধ্যেই অনুচ্ছেদ ফন্টটি সেট করে দিয়েছি, আমি প্রতিটি অনুচ্ছেদের একটি সামান্য অতিরিক্ত "কিক" দিতে চেয়েছিলাম যাতে এটি ভালভাবে দাঁড়ায়। আমি উপরের একটি সীমানা নির্বাণ দ্বারা যে এই শুধুমাত্র একা ইমেজ একা অনুচ্ছেদের হাইলাইট দ্বারা এটি।

আপনার styles.css ডকুমেন্টে নিম্নলিখিতটি রাখুন:

.শীর্ষ লাইন {
সীমান্তে শীর্ষ: পুরু কঠিন # FFCC00;
}

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

10 এর 09

ছবি স্টাইলিং

ছবি স্টাইলিং জেনিফার কিরিন

চিত্রগুলি সাধারণত তাদের চারপাশে একটি সীমানা থাকে, যদি এটি একটি লিঙ্ক না হয় তবে এটি সর্বদা দৃশ্যমান হয় না, তবে আমার CSS স্টাইলশীটের মধ্যে এমন একটি শ্রেণী আছে যা স্বয়ংক্রিয়ভাবে সীমানাটি বন্ধ করে দেয়। এই স্টাইলশীটের জন্য, আমি "noborder" ক্লাস তৈরি করেছি এবং নথির অধিকাংশ ছবি এই ক্লাসের অংশ।

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

আপনার styles.css ডকুমেন্টে নিম্নলিখিতটি রাখুন:

# মেইন আইএমজি {
ভাসা: বাম;
মার্জিন-ডান: 5px;
মার্জিন-নীচে: 15px;
}
.সীমানা নেই {
সীমানা: 0 পিএক্স কেউ;
}

যেমন আপনি দেখতে পারেন, ছবিগুলিতে মার্জিন বৈশিষ্ট্যাবলীও রয়েছে, যাতে নিশ্চিত করা যায় যে অনুচ্ছেদে তাদের পাশে থাকা ফ্লাটেড টেক্সটের বিরুদ্ধে তারা সরে যায় না।

10 এর 10

এখন আপনার সম্পন্ন পাতা তাকান

এখন আপনার সম্পন্ন পাতা তাকান জেনিফার কিরিন

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

এই সাইটের জন্য আপনার সমস্ত অভ্যন্তরীণ পৃষ্ঠাগুলির জন্য এই একই পদক্ষেপ অনুসরণ করুন। আপনি আপনার নেভিগেশনে প্রতিটি পৃষ্ঠার জন্য একটি পৃষ্ঠা থাকতে চান।