বেশি কিছু না, সিএসএস (CSS) ১০টি টিপস দেখুন:সিএসএস টিউটরিয়াল-৫ | টিউটোরিয়ালবিডি
টিউটোরিয়ালবিডিতে আপনাকে স্বাগতম

টিউটোরিয়ালবিডি একটি শিক্ষমূলক ওয়েবসাইট

এখানে বিভিন্ন টিউটোরিয়াল পাঠদান করা হয়। আপনি নিজেও অংশগ্রহণ করে শিক্ষাবিস্তারে এগিয়ে আসতে পারেন...

Member Login
Lost your password?
Not a member yet? Sign Up!

বেশি কিছু না, সিএসএস (CSS) ১০টি টিপস দেখুন:সিএসএস টিউটরিয়াল-৫

মার্চ 6, 2010
By

কারনে অকারনে ছেলেবেলায়, ছাত্র জীবনে আর চাকুরী জীবনে বক্তব্য শুনতে হয়েছে অনেকবার। একটা কথা শুনেছি বেশি-তা হচ্ছে -”বেশি কিছু বলবো না” যারা এই কথা দিয়ে বক্তব্য শুরু করে তাদের বক্তব্যই বিরক্তকর লম্বা হয়। যাই হোক কিছুদিন আগে CSS টিউটরিয়াল (প্রাথমিক ধারণা ও সহজ একটি প্রজেক্ট)এর মাধ্যমে যে টিউটরিয়ালগুলো শুরু করেঝিলাম তা অনেকটা শেষ পর্যায়ে এসে পরেছে। এই সময়ে নতুন কোন আইডিয়ার দিকে হাত না বাড়িয়ে টিপসের দিকেই মনোযোগ দেই।

আগেই সিএসএস সিন্টেক্স (কোড লেখার নিয়ম কানুন) এর মধ্যমে কোড লেখার প্রাথমিক পদ্ধতির কথার ফাকে অনেক গুরুত্বপূর্ণ কথাই বাদ পরে গেছে তার একটা অংশও আজ আলোচনা করবো। কথায় কথা না বাড়িয়ে শুরু হোক মূল আলোচনা

১. শর্ট হ্যান্ড কোডিং

কোড লিখুন শর্ট হ্যান্ডে এতে দ্রুত কাজ হয় যেমন-

/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}

h1 {margin-top:1em;
   	margin-right:0;
   	margin-bottom:2em;
   	margin-left:0.5em;
}

/* BORDER */
h1 {border:1px solid #000;}

h1 {border-width:1px;
    border-style:solid;
    border-color:#000;
}

/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}

h1 {border-top-width:1px;
	border-right-width:2px;
	border-bottom-width:3px;
	border-left-width:4px;
}

/* BACKGROUND */
div	{background:#f00 url(background.gif) no-repeat fixed 0 0;}

div	{background-color:#f00;
	 background-image:url(background.gif);
	 background-repeat:no-repeat;
	 background-attachment:fixed;
	 background-position:0 0;
}

/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}

h1 {font-style:italic;
	font-variant:small-caps;
	font-weight:bold;
	font-size:1em;
	line-height:140%;
	font-family:"Lucida Grande",sans-serif;
}

/* LIST STYLE */
ul {list-style:square inside url(image.gif);}

ul {list-style-type:square;
	list-style-position:inside;
	list-style-image:url(image.gif);
}

/* OUTLINE */
h1 {outline:#f00 solid 2px;}

h1 {outline-color:#f00;
	outline-style:solid;
	outline-width:2px;
}

২. classএবং id ‘র সঠিক ব্যবহার পদ্ধতি

id প্রকাশের ক্ষেত্রে # এবং class প্রকাশের ক্ষেত্রে . ব্যবহৃত হয়। এর যথাযথ ব্যবহার নিশ্চিত করুন।

৩. টেবিলের ব্যবহার ভুলে যান

টেবিল ব্যবহারের অনেক গুলো অসুবিধা আছে যা পরে বলবো। আপাতত: জেনে রাখুন,টেবিল অনেক স্লো এবং এর ব্যাবহারে চেয়ে div ব্যাবহার করুন।

৪. সিএসএস টুলের ব্যবহার

সিএসএস ভুলগুলো শুধরে নিন নিচের টুলগুলো ব্যবহার করে।
সিএসএস টুলের ব্যবহার

FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug.

৫. !important এর ব্যবহার

আপনার মনে হতে পারে কোন কোড পরিবর্তনে সমস্যা হতে পারে সেই কোডের সাথে জুরে দিন !important ঠিক এইভাবে-
.page { background-color:blue !important; background-color:red;}

৬. সিএসএস দিয়ে ফর্ম ডিজাইন করা

সিএসএস দিয়ে ফর্ম ডিজাইন করুন

৭. লিঙ্ক ও টেক্সট বক্সের হাইলাইট বন্ধ করুন

a, input {
outline:none;
}

৮. লিঙ্কের সৌন্দর্য বর্ধনের ব্যবস্থা করুন

নিচের মতো করে লিংকের ডিজাইন করুন
a:link {
color: #000;
text-decoration: underline
}
a:visited {
color: #666;
}
a:hover {
color: #333;
text-decoration: none;
}
a:active {
color: #333;
text-decoration: none;
}

a, input {
outline:none;
}

৯. একসাথে কোডিং করুন যেমন-

h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}

১০. সিএসএস এর উপর অনলাইনে পড়ালেখা করুন

পড়ালেখার নাকি বিকল্প নেই । তাই পড়ালেখা করুন নিচের সাইটগুলো দেখুন

সিএসএস টিউটরিয়াল সূচিপত্র:

CSS টিউটরিয়াল (প্রাথমিক ধারণা ও সহজ একটি প্রজেক্ট)

সিএসএস সিন্টেক্স (কোড লেখার নিয়ম কানুন) CSS পাঠ-২

ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা

সুন্দর সুন্দর বক্স মডেল

সহজেই বানিয়ে ফেলি ছবির গ্যালারী

বেশি কিছু না, সিএসএস (CSS) ১০টি টিপস

৭ টি সিএসএস গরম মসলা
কৃতজ্ঞতা
hongkiat
queness

Tags: , ,



This entry was posted on মার্চ 6, 2010 at 3:15 অপরাহ্ন and is filed under সিএসএস (CSS). You can follow any responses to this entry through the RSS 2.0 feed.

8 Responses to বেশি কিছু না, সিএসএস (CSS) ১০টি টিপস দেখুন:সিএসএস টিউটরিয়াল-৫

  1. [...] আন্ডার লাইনের পরিবর্তে নিচের মতো করে প্যারার হেডলাইনকে প্রকাশ করতে পারেন। এ জন্য নিচের কোড p { border-bottom:solid #006699; } পূর্বের পোস্ট: বেশি কিছু না, সিএসএস (CSS) ১০টি টিপস দেখুন [...]

  2. হিমেল on মার্চ 8, 2010 at 7:23 অপরাহ্ন

    ভাল লাগল।

  3. টিউটো on মার্চ 7, 2010 at 6:38 অপরাহ্ন

    আরমানের সমস্যার সমাধানটা দেয়ার জন্য ধন্যবাদ। আশা করি আপনি টিউটরিয়ালবিডিতে লিখবেন। আশা করি আমরা বাংলা ভাষায় মানসম্পন্ন শিক্ষাদানে ভাল অবস্থান রাখতে পারবো।

    • শহীদ on মার্চ 8, 2010 at 11:21 অপরাহ্ন

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

  4. আরমান on মার্চ 7, 2010 at 3:29 অপরাহ্ন

    ভাইয়া,em ভ্যালু বলতে আসলে কি বুঝায় ? আর !important কি কাজ করে ঠিক বুঝতে পারলাম না…

    • শহীদ on মার্চ 7, 2010 at 5:48 অপরাহ্ন

      @আরমান, Font-size এর বিভিন্ন unit এর মধ্যে সম্পর্ক জানার জন্য এই লিংকটি দেখুন।
      আর !important যেই style টার সাথে দেয়া হবে display এর ক্ষেত্রে সেটাকেই অগ্রাধিকার দেয়া হবে। যেমন উপরের example এর ক্ষেত্রে background-color red না দেখিয়ে blue দেখাবে। এক্ষেত্রে সুবিধা হচ্ছে আপনার পরবর্তীতে red color দেখানোর প্রয়োজন হলে !important টার্মটি red এর সাথে জুড়ে দিন। ফলে Code পরিবর্তনের ঝামেলা কমে গেল।

    • saklayeen on এপ্রিল 18, 2010 at 6:41 অপরাহ্ন

      @আরমান,
      em বলতে emphasis বুঝায়। HTML-এ যাকে আপনি i দিয়ে লিখবেন। এর মানে হচ্ছে italics . অর্থাৎ লেখাকে বাঁকা করে দেখানোর জন্যে এটা ব্যবহৃত হয়।

      • টিউটো on এপ্রিল 20, 2010 at 2:53 অপরাহ্ন

        @saklayee,শহীদ, আপনাদের মতামতের জন্য ধন্যবাদ, সময়ের অভাবে অনেক প্রশ্নেরই উত্তর দিতে পারি নি। আপনারা কাছে থাকলে এ সমস্যা হবে না।

Leave a Reply

Your email address will not be published. Required fields are marked *


6 − দুই =