১:১৫ PM
খুব সাধারন বিষয়গুলো অনেক সময় অসাধারন ভূমিকা পালন করে । যেকোন একটা পিএসডি ডিজাইন যদি দশজন ডেভেলপারকে দেয়া হয়, দশজন দশভাবে কোডিং করবে । হ্যাঁ সবাই এইচটিএমএল দিয়ে মার্কআপ করবে সিএসএস দিয়ে ডিজাইন করবে । কিন্তু এই এইচটিএমএল এবং সিএসএস ব্যবহার করার মধ্যেও অনেক কৌশল আছে যা দ্রুত এবং নির্ভুল কোডিংএ সহায়তা করে । সিএসএস শর্টহ্যান্ড এরকমই একটি কৌশল যা আপনাকে আরও বেশি প্রফেশনাল করে গড়ে তুলবে । আসুন জেনে নেই এরকম কিছু সিএসএস শর্টহ্যান্ড সম্পর্কে ।
BACKGROUND
____________________________________________________
ধরুন কোন একটি এলিমেন্টের background দিতে হবে । আমরা অনেক ভাবেই কাজটি করতে পারি । background দেয়ার সময় আমরা অনেক ধরনের property ব্যবহার করি । যেমন -
element {
background-color: color || #hex || (rgb / % || 0-255);
background-image:url(URI);
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;
}
উপরে যে background property গুলো ব্যবহার করা হয়েছে সেগুলো মাত্র একটি লাইনের মাধম্যেও দেয়া যায় । যেমন -
BACKGROUND SHORTHAND:
element {
background: #fff url(image.png) no-repeat 20px 100px fixed;
}
***এখানে ধারাবাহিকতা আপনাকে ঠিক রাখতে হবে । color >> image >> repeat >> position >> attachment
আর একটি ব্যাপার হচ্ছে কোন একটি property যদি আমরা না দেই তাহলে কি হবে । default background property গুলো হচ্ছে -
DEFAULT BACKGROUND PROPERTY VALUES:
element {
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}
যেমন ধরুন আপনি শুধু background property হিসেবে color এবং image দিলেন ।
element {
background:red url(image.png);
}
আসলে ব্রাউজার এটা দেখাবে এভাবে -
element {
background:red url(image.png) repeat top left scroll;
}
লক্ষ্য করুন এখানে repeat, positon এবং attachment property এর default values দেখাবে ।
FONT
________________________________________
Font এর ব্যাপারটা অনেকটা background এর মতই । Font এর আমরা সাধারনত যেসব property ব্যবহার করি -
FONT PROPERTIES:
element {
font-style: normal || italic || oblique;
font-variant:normal || small-caps; font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large); line-height: normal || (number+unit); font- family:name,"more names";
}
FONT DEFAULT PROPERTIES:
element {
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}
FONT SHORTHAND PROPERTY:
element {
font: normal normal normal inhert/ normal inherit;
}
// font-style >> font-variant >> font-weight >> font-size >> line-height >> font-family
BORDER
_____________________________________________________________________
BORDER PROPERTIES:
element {
border-width: number+unit;
border-style: (numerous);
border-color: color || #hex || (rgb / % || 0-255);
}
THE BORDER SHORTHAND PROPERTIES:
element {
border: 4px groove #fff;
}
// width >> style >> color
একটা উদাহরন দেখলে এই ব্যাপারগুলো বুঝতে সুবিধা হবে -
p { border:solid blue; }/* will create a '3px' solid blue border... who knows where 3px came from?? */
p { border:5px solid; }/* will create 5px solid 'black' border... default must be black?? */
p { border:dashed; } /* will create a '3px' dashed 'black' border... 3px black lines unite! */
p { border:10px red; } p { border:10px; } p { border:red; } /* তিনটি কোড কাজ করবে না কারন হচ্ছে আপনাকে অবশ্যই border-style দিতে হবে । যদি color না দেন তবে ডিফল্টভাবে black color দেখাবে । */
এই উদাহরনটি দেখেন -
p { border:dotted; color:red; } /* will create a 3px dotted red border */
body { color:blue; } body p { border:5px solid; } /* will create a 5px solid blue border */
***একটা বিষয় লক্ষ্য করেন, এখানে p কালার red এবং body এর কালার blue কিন্তু আমরা যখন body p এর border দিলাম color property না দিয়ে তখন default ভাবে body কালার border এর কালার হিসেবে নিবে।
MARGIN AND PADDING:
_________________________________________________________
Margin এবং Padding এর জন্য সবচেয়ে সহজ উদাহরন হচ্ছে ঘড়ি ।
MARGIN PROPERTIES:
element {
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
}
MARGIN SHORTHAND PROPERTY:
element { margin: auto auto auto auto; } /* top >> right >> bottom >> left */
যেকোন এলিমেন্টে মার্জিন শর্টহ্যান্ড দেয়ার সময় ঘড়ির কাটার কথা খেয়াল রাখবেন । প্রথমে উপরের মার্জিন, ডান, নিচে এবং সবশেষে বায়ে এর মার্জিন । Margin কে আরও সুন্দর এবং সহজভাবে দেয়া যায় ।
element { margin:10px; }/* adds a 10px margin to all four sides */
element { margin:20px 5px; }/* adds a 20px margin to top and bottom and a 5px margin to left and right */
element { margin:50px 10px 300px; }/* adds a 50px margin to top and a 10px margin to left and right and a 300px margin to bottom */
Padding এর ক্ষেত্রে একই ভাবে দিতে হবে।
(collected)
0 মন্তব্য(গুলি):
একটি মন্তব্য পোস্ট করুন