সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়। তারা নির্দেশ করে, যে কোন এইচটিএমএল এইলমেন্ট কে আপনি কিভাবে সিএসএস কোড এর সাথে সম্পৃক্ত করবেন। অতএব তাদের ( CSS selectors) সম্বন্ধে ভাল ধারনা থাকতে হবে।
সিএসএস সিলেক্টর এর গঠন:
SELECTOR { PROPERTY: VALUE }
"Property" হল এমন একটা সিএসএস এলিমেন্ট যা আপনি ইচ্ছামত পরিচালনা করতে পারেন। আর "VALUE" হল, যা নির্দিষ্ট property র মান নির্দেশ করে।
সিএসএস Selector Name:
selector name দ্বারা এইচটিএমএল ট্যাগ এর সাথে সরাসরি সম্পর্ক তৈরী করা যায় যা আপনি ইচ্ছানুযায়ী সম্পাদন করতে পারেন।
p { PROPERTY: VALUE }
selector name হিসাবে p দ্বারা paragraph tag কে নির্দেশ করছে।
ইন্টারনাল সিএসএস টিউটোরিয়াল (Internal CSS)
| লেখক মো: ফেরদৌস আলম |
Cascading Style Sheets লেখার তিনটি ধরন আছে যেমন - internal, external এবং inline। যখন আপনারা ইন্টারনাল সিএসএস ব্যবহার করবেন তখন অবশ্যই একটা নতুন ট্যাগ যোগ করতে হবে যেটা হচ্ছে <style> tag এবং যা HTML <head> ট্যাগ এর ভিতরে রাখতে হবে। নিচে উদাহরন দেয়া হলো।
01.<html>
02.<head>
03.<style>
04.</style>
05.</head>
06.<body>
07.<p>Your page's content!</p>
08.</body>
09.</html>
এমত অবস্থায় পেজে নতুন কিছু দেখাবে না। এই style ট্যাগ টি শুধু ব্রাউজার কে বলবে যে তারা এই পেজে নতুন কিছু CSS element যোগ করতে যাচ্ছে ।
ইন্টারনাল সিএসএস কোড তৈরী:
HTML code এর মত করে CSS code লেখা হয় না, যার অর্থ এই দাড়ায় CSS যা HTML এর মত নয়।
নিচে উদাহরন দেয়া হলো।
01.<html>
02.<head>
03.<style>
04.p {color: white; }
05.body {background-color: black; }
06.</style>
07.</head>
08.<body>
09.<p>White text on a black background!</p>
10.</body>
11.</html>
প্রদর্শন:
White text on a black background!
উপরের উদাহরনে আপনারা দেখেছেন CSS code এর মাধ্যমে <body> and <p> HTML tags এর এলিমেন্ট পরিবর্তিত হয়ে গেছে।
সাধারন সিএসএস ফরমেট
"HTML tag" { "CSS Property" : "Value" ; }
- বিষয়টি পরিস্কার করতে ধাপে ধাপে দেখা যাক কিভাবে সিএসএস কোড দিয়ে এইচটিএমএল এলিমেন্ট পরিবর্তিত হয়ে গেছে।
প্রথমে একটা এইচটিএমএল এলিমেন্ট বাছাই করেছি যাকে নিয়ে আমরা কাজ করেছি - p{ : ; }
তারপর CSS attribute color নির্বাচন করেছি - p { color: ; }
পরে Value হিসাবে আমরা ফন্ট এর color নির্বাচন করেছি - p { color: white; }
এসব করার ফলে কি হয়েছে paragraph tag এর মধ্যে অবস্থিত সকল লেখা সাদা হয়ে গেছে ।
- এখন আমরা আলোচনা করবো সিএসএস কোড কিভাবে <body> ট্যাগের background কে পরিবর্তন করেছে।
প্রথমে একটা HTML Body element বাছাই করেছি - body { : ; }
তারপর CSS attribute, background-color নির্বাচন করেছি - body { background-color: ; }
CSS attribute background-color এর রং নির্বাচন করেছি - body { background-color: black; }
অনেক সময় দেখা যাবে যে সিএসএস স্টাইল প্রয়োগ করার পরও তা প্রদর্শন করছে না তখন আমাদের যেসব বিষয় লক্ষ রাখতে তা হলো আমরা সিএসএস attribute এর পর কোলন এবং সিএসএস attribute এর ভেলুর পর সেমিকোলন ঠিক মত দিয়েছে কিনা { CSS attribute : value;}। |
এক্সটার্নাল সিএসএস (External CSS)
| লেখক মো: ফেরদৌস আলম |
সিএসএস কার্সর (CSS Cursor)
| লেখক মো: ফেরদৌস আলম |
আমরা উইন্ডোজ, লিনাক্স ব্যবহার সময় বিভিন্ন মাউস কার্সর আইকন দেখেছি। বিভিন্ন পরিস্থিতি সাপেক্ষে মাউস কার্সর এর আইকন বিভিন্ন হয়। জনসাধারন যখন আপনার site visit করবে সেখানেও বিভিন্ন পরিস্থিতি সাপেক্ষে মাউস এর আইকন বিভিন্ন করে তৈরী করা যায়। যা সিএসএস দ্বারা করা সম্ভব ।
সিএসএস কার্সর আইকন:
এবার আপনাদের দেখাবো কিভাবে বিভিন্ন এইচটিএমএল এলিমেন্ট এর জন্য মাউস কার্সর আইকন পরিবর্তন করা যায়।
১ default - normal mouse cursor icon প্রদর্শন করে।
২ wait – এই mouse icon নির্দেশ করে যে computer চিন্তা করছে।
৩ crosshair - cross hair চিহ্ন প্রদর্শন করে।
৪ text - এই "I" shape icon টি নির্দেশ করে যে, যখন আপনি কোন text কে select করবেন।
৫ pointer – এই hand icon টি নির্দেশ করে যে, যখন আপনি কোন এইচটিএমএল link ঊপর hover করবেন।
৬ help- এই icon টি নির্দেশ করে যে আপনি কোন বিষয়ে সাহায্য বা প্রশ্ন করতে চাচ্ছেন (question mark)
1.p { cursor: wait }
2.h4 { cursor: help }
3.h5 { cursor: crosshair }
প্রদর্শন:
Please Wait While this Web Page Loads
How May I Help You?
Stick Your Hands in the Air!
সিএসএস প্রোপর্টিজ টিউটোরিয়াল(CSS Properties)
| লেখক মো: ফেরদৌস আলম |
এইচটিএমএল এ তার ট্যাগ ( <b>, <body>, <a>, ইত্যাদি) গুলো হল এইচটিএমএল language এর গোসত এবং আলু। সিএসএস এ আপনারা tutorial পড়ার সময় অনেক গুলো property ( Font, Text, Box, Color ইত্যাদি) লক্ষ্য করেছেন ।নিচে আলোচনা করা হলো।
সিএসএস ফন্ট প্রোপার্টিজ:
সিএসএস ফন্ট প্রোপার্টিজ এর সাহায্যে এর টেক্সট এর graphical representation কে নিয়ন্ত্রন করা যায়।
নিচে সিএসএস ফন্ট property গুলো দেয়া হলো ।
- font
- font-family
- font-size
- font-style
- font-weight
- font-variant
সিএসএস টেক্সট প্রোপার্টিজ:
সিএসএস টেক্সট প্রোপার্টিজ যা টেক্সট এর spacing, alignment, decoration ইত্যাদি বিষয়গুলো নিয়ন্ত্রন করে। নিচে সিএসএস টেক্সট property গুলো দেয়া হলো ।
- letter-spacing
- word-spacing
- text-decoration
- vertical-align
- text-transform
- text-align
- text-indent
- line-height
সিএসএস বক্স প্রোপার্টিজ:
সিএসএস বক্স প্রোপার্টিজ যা এইচটিএমএল এলিমেন্ট এর ভিতরে এবং চারপাশের অংশকে নির্দেশ করে।এদের মধ্যে Border, Margin এবং Padding property গুলোর আবার চারটি property রয়েছে সেগুলো হল top, right, bottom এবং left ।নিচে সিএসএস box property গুলো দেয়া হলো ।
- Margin
- Padding
- Border
- Border-width
- Border-color
- Border-style
- Width
- Height
- Float
- Clear
সিএসএস কালার প্রোপার্টিজ:
সিএসএস কালার property নির্দেশ করে যে, কি ধরনের কালার আমরা নির্দিষ্ট এইচটিএমএল এলিমেন্ট এর টেক্সট এর জন্য ব্যবহার করবো। নিচে সিএসএস কালার property দেয়া হলো ।
Color
সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টিজ:
সিএসএস background প্রোপার্টিজ যা background এর এমন বিষয় নিয়ন্ত্রন করে ,তা হলো যদি background টি single color বা image হয়ে থাকে । যদি তা image হয়ে থাকে তাহলো আপনি image এর position ঠিক করতে পারেন । আপনি image কে repeat left-to-right অথবা top-to-bottom করতে পারেন। নিচে সিএসএস background property গুলো দেয়া হলো ।
- Background
- Background Color
- Background Image
- Background Repeat
- Background Attachment
- Background Position
সিএসএস Classification প্রোপার্টিজ:
Display
Whitespace
List Style
List Style Type
List Style Image
List Style Position
সিএসএস পজিশন টিউটোরিয়াল (CSS Position)
| লেখক মো: ফেরদৌস আলম |
সিএসএস পজিশন এর মাধ্যমে আমরা এইচটিএমএল এলিমেন্টs এর exact পজিশন নির্দেশ করতে পারি।
Position Relative:
Relative position দ্বারা এইচটিএমএল এলিমেন্ট এর position অন্য এলিমেন্ট এর সাপেক্ষে পরিবর্তন করা যায়।
01.h3 {
02.position: relative;
03.top: 15px;
04.left: 150px;
05.}
06.p {
07.position: relative;
08.left: -10px;
09.}
Move Left - এক্ষেত্রে left এর জন্য negative value ব্যবহার করতে হবে।
Move Right - এক্ষেত্রে left এর জন্য positive value ব্যবহার করতে হবে।
Move Up - এক্ষেত্রে top এর জন্য negative value ব্যবহার করতে হবে। .
Move Down - এক্ষেত্রে left এর জন্য positive value ব্যবহার করতে হবে।
উদাহরন:
সিএসএস দেয়ার আগে সিএসএস দিয়ে পজিশন ঠিক করার পর
Position Absolute:
absolute position দ্বারা এইচটিএমএল এলিমেন্ট এর exact position (pixel value) নির্দেশ করা যায়।
01.h3 {
02.position: absolute;
03.top: 50px;
04.left: 45px;
05.}
06.p{
07.position: absolute;
08.top: 75px;
09.left: 75px;
10.}
উদাহরন:
সিএসএস দেয়ার আগে সিএসএস দিয়ে পজিশন ঠিক করার পর
Position Fixed
একটা এলিমেন্টের পজিশন যদি ফিক্সড করে দেন তাহলে সেটা ব্রাউজারের উইন্ডো সাপেক্ষে অবস্থান করবে এবং ব্রাউজার যদি স্ক্রল করেন তবুও সেটা স্থির (fixed) থাকবে।
উদাহরন:এখানে দেখুন "স্ক্রল করলেও আমি সরবনা" এই লাইনটির পজিশন ফিক্সড করে দেয়া হয়েছে তাই স্ক্রল করলেও এটি তার অবস্থান থেকে সরবেনা।
স্ক্রল করলেও আমি সরবনা
Note: Internet Explorer 7 (and higher) supports the fixed value if a !DOCTYPE is specified.
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
নোট:Internet Explorer এ এটি support করবে যদি এর !DOCTYPE নির্দিষ্ট করে দেন। |
সিএসএস লেয়ার (CSS Layers)
| লেখক মো: ফেরদৌস আলম |
এবার আমরা দেখবো লেয়ার ব্যবহার করার মাধ্যমে কোন এলিমেন্ট টি উপরে দেখাবে, যা সিএসএস লেয়ার এর মাধ্যমে আমরা নিয়ন্ত্রন করতে পারি। সিএসএস এ প্রত্যেক এলিমেন্ট কে priority দেয়া হয়ে থাকে। যদি দুটি overlapping CSS positioned elements থাকে, তাহলে যার priority বেশি তাকে আগে উপরে দেখাবে।
Priority নির্ধারন করতে আমরা z-index value সেট করে থাকি ।যার z-index value যত বেশি তার priority তত বেশি।
01.h4{
02.position: relative;
03.top: 30px;
04.left: 50px;
05.z-index: 2;
06.background-color: #336699;
07.}
08.
09.
10.p {
11.position: relative;
12.z-index: 1;
13.background-color: #FFCCCC;
14.}
প্রদর্শন:
 |
সিএসএস ফ্লট টিউটোরিয়াল (CSS Float)
| লেখক মো: ফেরদৌস আলম |
ফ্লট দ্বারা ছবি কে এক পাশে বা অন্য পাশে অবস্থান করানো যায়। ছবি এর চারপাশে টেক্সক্ট থাকে । যেমনটি দেখা যায় magazines বা সংবাদপত্রে বিভিন্ন আকারের ছবির চারপাশে টেক্সট এর অবস্থান ।
Float Image:
সিএসএস Float attribute এর সাহায্যে খুব সহজে টেক্সট কে ছবির চারপাশে Wrapping করা যায়।
আপনি ইচ্ছামত ছবি কে বাম বা ডানে Float করতে পারেন। নিচে ঊদাহরন দেয়া হলো ।
1.img.floatLeft {
2.float: left;
3.margin: 4px;
4.}
5.img.floatRight {
6.float: right;
7.margin: 4px;
8.}
1.<body>
2.<img src="/sunset.gif">
3.<p>The images are contained with...</p>
4.
5.
6.<img src="/sunset.gif">
7.<p>This second paragraph has an...</p>
8.</body>
প্রদর্শন:
 The images are contained within the paragraph tag. The image has floated to the left, and also to the right because we have used both types of image floating in this example. Notice how the text wraps around the images quite nicely. The images are contained within the paragraph tag. The image has floated to the left, and also to the right because we have used both types of image floating in this example. Notice how the text wraps around the images quite nicely.
This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content. This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content.
Floating Multiple Images:
যদি আমরা অনেক গুলো ছবি কে float করতে চাই যেন একটার নিচে আরেকটা অবস্থান করবে সেক্ষেত্রে আমরা সিএসএস Clear attribute এর মাধ্যমে তা করতে পারি। নিচের ঊদাহরনে আমরা ডানদিকে float করেছি ।
1.img.floatRightClear {
2.float: right;
3.clear: right;
4.margin: 4px;
5.}
1.<body>
2.<img src="/sunset.gif">
3.<img src="/sunset.gif">
4.<p>The images are appearing...</p>
5.<p>If we had specified...</p>
6.<p>The number of paragraphs...</p>
7.</body>
প্রদর্শন:
The images are appearing below one another because the CSS clear attribute was used with the value of "right". This forces all right floating items to appear below any previous right floating items.
If we had specified clear:left in our CSS code, then there would be no effect on the images, and they would appear in their default pattern, next to each other, all on one line.
The number of paragraphs, and the size of the paragraphs, will not effect how these images will appear. |
|
| | | |
|
|
|
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন