সিএসএস (CSS) ১০টি টিপস দেখুন
পোস্ট করেছেন Md.Kawsar , রবিবার, ৭ মার্চ, ২০১০ ৫:৫৯:০০ PM
১. শর্ট হ্যান্ড কোডিং
কোড লিখুন শর্ট হ্যান্ডে এতে দ্রুত কাজ হয় যেমন-
/* 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
৫. !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 Remix
CSS Reboot
CSS Beauty
CSS Elite
CSS Mania
CSS Leak
একটি মন্তব্য পোস্ট করুন