Css tutohost e book
- 2. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 1 িস এস এস �াইল মা�াা েলখকঃ অসীম কমাা পাল স�াদক মাহাবুব িটউেটা ��দ অসীম কমাা পাল �কাশক িটউেটােহা� �ুফ িািডং ি্লুফাা ইয়াসিম্ বইিটা অ্লাই্ সং�াণঃ http://tutorialbd.com/css কিপাাইট বইিটা ��ািধকাা িটউেটােহা� এবং েলখেকা। বইিট িব্ামূেলয িবতাণ কাা যােব এবং েলখক ও �কাশেকা ্াম িঠক োেখ �েয়াজে্ মু�ণ কাা যােব। িক� বইিটা েকা্ অংশ পিাবতর্ কো মু�ণ কাা এবং বইেয়া েকা্ অংশ �গ বা ওেয়ব সাইেট �কাশ কাা যােব ্া। তেব বইিটা ডাউ্েলাড িলংক �কাশ কাা যােব। েযাগােযাগ েলখকঃ ashimkumar50@yahoo.com ওেয়বঃ http://technologybd.org �কাশকঃ tutohost@gmail.com ওেয়বঃ http://tutohost.com েফা্ঃ 01975634328 েফসবুকঃ https://www.facebook.com/TutoHost বইিট িব�েয়া জ� ্য়, িব্ামূেলয িবতােণা উে�ে� ৈতিা কাা হেয়েছ। �থম �কাশ ১৫ আগ� ২০১৩ আিথর্ সহেযািগতায় িটউেটােহা� ওেয়ব পাটর্নার http://tutohost.com http://tutorialbd.com http://technologybd.org
- 3. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 2 েলখেকা কথা বতরমা্ সমেয় ওেয়ব িডজাইে্া উপা সম� িব� জুেড় গেবষণা চলেছ। একটা ওেয়ব সাইট এখন শুধুমা� তথয �চাোা মাধযম ্য়। েকা্ একটা ওেয়ব সাইট কত সহজভােব এবং সু�াভােব বযবহাাকাাীা চািহদা পূাণ কােত পাােব, এ িবষয়িটই সবেচেয় েবিশ আেলািচত। বযবহাাকাাীা চািহদাা িবষয়িট িবেবচ্ায় োেখ একটা সু�া ওেয়ব ইনটাােফস ৈতিা কাাা ে�ে� িস এস এস এা ভূিমকা অপিাশীম। িস এস এস এা �েয়াজ্্ীয় িবষয় সমূহ িব�ািাতভােব, সহেজ এবং মাি�ভাষায় েশখাা জ� আশা কািছ “িস এস এস �াইল মা�াা” বইিট সবাইেক সাহাযয কােব। বইিটেত �িতটা িবষয় বা�ব �েজ�িভি�ক আেলাচ্াা মাধযেম এবং �েয়াজ্ীয় ইেমজ ও ি�্শটর বযবহাোা মাধযেম সহজভােব উপ�াপ্াা েচ�া কোিছ,যা ্তু্েদােক সহেজ এবং �ত েশখাা ে�ে� সহায়ক ভূিমকা পাল্ কােব বেল আশা কািছ। বইিটেত ে্িভেগশ্ বাা, ইেমজ স্�াইটস,বাট্ এবং একটা ইেমজ গযালািাাা �েফশ্াল �েজ� িব�ািাতভােব আেলাচ্াা েচ�া কোিছ ,যা �েফশ্াল িডজাই্ ৈতিাা ধাাণা ৈতিা কােব। িস এস এস এা িবিভ� েকৗশল অয়� কাাা ে�ে� ২০০+ পৃ�াা এই বইিট যিদ কাোা সামা�তম উপকাো আেস আমাা �েচ�া সাথরক হেব। আা বইিটা �থম সং�ােণ েবশ িকছু ভুল্ুিট থাকাটা অ�াভািবক িকছু ্য়। অনু�হ কো এধােণা আপ্াাা ভুল্ুিট �মাসু�া দৃি�েত েদখেব্। - - অসীম কমাা পাল- - েলখক পিরিচিত: েলখক, অসীম কুমা পাল ১৯৮৭ সােল কুি�য়া অ�গর্ েচৗঁড়হাঁস �ােম জ��হণ কেরন। বতর্মাে িতিন ঢাকা �েকৗশল ও �যুি� িব�িবদয্া(DUET)এ EEE েত েলখাপড়া করেছন। িতিন িটউেটািরয়ালিবিড ,েটকিটউনস, িব�ান �যুি� �েগ ওেয়ব িডজাইন এবং েডভলপেমন্ , মাইে�াকেন্�ালা, ইেলক�িন� ও েটকেনালিজর িবিভ� িবষেয়র উপর �গ, িটউটিরয়াল এবং ই-বুক িলেখেছন। িতিন বতর্মাে েলখাপড়ার পাশাপািশ িটউেটােহাে� কমর্র আেছন। এডভা�ড ওেয়ব িডজাইন এন্ েডভলপেমন্, �িগং, ে�া�ািমং, UI/UX, ইেলক�িন�, মাইে�াকেন্�ালা এবং আরডুইেনা েবজড কেন্�র্ িসে�ম এবং েরাবিট� েটকেনালিজেক সবার মােঝ ছিড়েয় েদয়ার জ� গেবষণা করেছন। িতিন ইেতামেধয্ িটউেটােহাে�র হেয় • এইচ িট এম এল • িস এস এস • জাভাি�� • িপ এইচ িপ এর উপর বাংলা ভাষায় িটউেটািরয়াল িলেখেছন। যা নতুন এবং এডভা� ওেয়ব িডজাইনার এবং েডভলপারেদর মােঝ ইেতামেধয্ জনি�য়তা অজর্ কেরেছ।তার েলখা িটউেটােহা� এইচ িট এম এল ই-বুক ১.০ বইিটও পাঠকেদর কােছ এখেনা েবশ জনি�য়। ======================== েলখেকর ই-েমইল এে�স: ashimkumar50@yahoo.com েলখেকর ওেয়ব সাইট: technologybd.org েলখেকর েফসবুক েপজ: http://www.facebook.com/ashim.kumar.9803
- 4. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 3 কৃত�তা �ীকাা িটউেটােহা� মা্স�� ও �তগিতা েহাি�ং েসবা �দা্কাাী িহেসেব আমােদা মােঝ িবেশষ পিািচত। িটউেটােহা� ওেয়ব িডজাই্ এনড েডভলপেমনট িশখেত আ�হীেদা জ� সহজ বাংলা ভাষায় মা্স�ত �েজ�িভি�ক িটউেটািায়াল এবং ই- বুক �কােশা উে�াগ �হণ কোেছ। ইেতাপূেবর HTML এবং WordPress এর উপর ই- বুক �কািশত হেয়েছ । িপ এইচ িপ , জাভাি��, েজ েকােয়িা, জুমলা, এইচ িট এম এল ৫, িস এস এস ৩ এর মত এডভা� িবষেয়া উপর বাংলাভাষায় সহজ িটউেটািায়াল ৈতিাা জ� িটউেটা েহাে�া ে�া�ামাাগণ কাজ কো যাে�।এরই ধাাাবািহকতায় িটউেটােহাে�া সািবরক সহেযািগতায় আিম বাংলাভাষায় িস এস এস িটউেটািায়াল েলখা শুরু কিা। িটউেটােহাে�া ��াধীকাাী মাহাবুব িটউেটা ভাই আিথরক সহেযািগতা সহ সকল �কাা সহেযািগতা কো আমাা কাজেক অে্ক সহজ কো িদেয়েছ্, এজ� িটউেটােহা� এবং মাহাবুব িটউেটা ভাইেয়া কােছ আিম কৃত�। বযা�তাা কাােণ যিদও অে্ক আেগই িস এস এস িটউেটািায়াল েলখাা কাজ েশষ হেয়িছেলা, িক� ই- বুক িহেসেব বইিটেক সবাা কােছ েপৗেছ েদয়াা উপেযাগী কো তুলেত েবশ সময় েলেগেছ, এরই মেধয পাঠকেদা কাছ েথেক অে্ক মযােসজ েপেয়িছ, যা আমােক বইিট স�� কােত অনু�ািণত কোেছ।অবেশেষ “িস এস এস �াইল মা�াা” বইিট আপ্ােদা কােছ েপৗেছ িদেত েপো আিম আ্ি�ত।আপ্ােদা েয েকা্ পাামশর আ�িাকতাা সােথ িবেবচ্া কাা হেব। অসীম কমাা পাল
- 5. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 4 স�াদেকা ব�বয বাংলােদেশর িশ�ামূলক অ্লাই্ �কাশ্াগুেলা এেকবাো হােতগুে্ েফলা যায়। এেদেশা তরু্ সমাজ তথয �যুি�েত ্তু্ ্তু্ েমধা একি�ত হেয় �া্ অজরে্া জ� কাজ কো যাে�। িবষয়িট একটা ি্াব িব�েবা মত। আর এই সৃজ্শীল বযাি�েদা িশ�া কাযর�ম ও উ�াব্ী শি�া �কাশ্া ধাাাবািহক িস এস এস িটউেটািায়াল যা এখন ই বুক আকাো �কাশ কাা হল। �যুি�ে�মী েলখক অসীম কমাোা হাত ধো ৈতিা “িস এস এস �াইল মা�াা” বইিট ওেয়ব িডজাই্ েশখাা ে�ে� সকেলা িবেশষ সহায়ক হেব বেল আশা কািছ। মাহাবুব িটউেটা
- 6. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 5 িটউেটােহা� িদে� …………… o একিট টপ েলেভল েডােমই্ এবং এক িগগাবাইট এেয়ব েহাি�ং মা� ৮০০ টাকায়। o িােসলাা, মা�াা িােসলাা এবং িভিপএস – এ ৩০% পযর� ছাড়। o এছাড়াও ােয়েছ ২৪ ঘনটা কা�মাা সািভরস এবং ৯৯. ৯% আপটাইম গযাাািনট। তাই সময় ফুিােয় যাওয়াা আেগই আপ্াা জ� উপযু� অফাািট লুেফ ি্্। েফা্ঃ ০১৭৭০৮৪৮৮৮৮ ওেয়ব সাইটঃ www.tutohost.com
- 7. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 6 সূিচপ�ঃ িস এস এস েবিসক িসএসএস িক? (What is CSS) টযাগ িসেল�া (Tag Selector) �াস িসেল�া (Class Selector) আইিডিসেল�া (ID Selector) েকাড েলখাা প�িত (Syntax) ইমেবেডড �াইল শীট (Embeded Style Sheet) এ�টা্রাল �াইল শীট ( External Style Sheet) ইন-লাই্ �াইল শীট (Inline Style Sheet) �াইলঃ বযাক�াউনড (Background) েট�ট কালাা (Text Color) েট�ট এলাই্েমনট (Text Alignment) েট�ট েডকোশ্ (Text Decoration) েট�ট ্া�ফােমশ্ (Text Transformation) ফনট ফযািমিল (Font family) ফনট সাইজ(Font size) ফনট েভিােয়নট (Font variant) ফনট ওেয়ট (font-weight) িলংক (Link) অডরাা িল� (Ordered List)
- 8. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 7 আ্অডরাা িল� (Unrdered List) িলে� ইেমেজা বযবহাা েটিবল এবং েটিবল বডরাা (Table & Table Border) েটিবল ওয়াইডথ এনড হাইট (Table Width and Height) েটিবল েট�ট এলাই্েমনট (Table Text Alignment) েটিবল কালাা (Table Color) ব্� ও েলআউটঃ বডরাা এবং বডরাা �াইল বডরাা ওয়াইডথ (Border Width) বডরাা কালাা (Border Color) পৃথক বডরাা ( Individual Border ) মািজর্ (Margin) পযািডং (Padding) আউট লাই্ এবং আউট লাই্ �াইল আউট লাই্ ওয়াইডথ (Outline Width) আউট লাই্ কালাা (Outline Color) ব� মেডল (Box Model)
- 9. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 8 এডভা�ঃ �িপং িসেল�া (Grouping Selector) ে্ি�ং িসেল�া (Nesting Selector) ডাইেম্শ্ (Dimention) �দশরণ প�িত (Display) িডসে� ইন লাই্ (display:inline) িডসে� �ক (display:block) িভিজিবিলিট (visibility)) িভিজিবিলিট িহেড্(visibility:hidden) িভিজিবিলিট কলাপস্(visibility:collapse) অব�া্ (Positioning) পিজশ্ �যািটক (position:static) পিজশ্ িফ�ড (position:fixed) পিজশ্ িােলিটভ (position:relative) পিজশ্ এবসিলউট (position:absolute) ওভাা ে�া (Overflow) ওভাা ে�া িভিজবল (overflow:visible) ওভাা ে�া িহেড্ (overflow:hidden) ওভাা ে�া অেটা (overflow:auto) ওভাা ে�া �ল(overflow:scroll) ি�প (Clip) অেটা ি�প এবং োকেটংগুলাা ি�প েজড ই্েড� (Z-index)
- 10. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 9 ে�ািটং (Floating) বাম িদেক �ট(float:left) ডা্ িদেক �ট(float:right) �িটং �াাা পযাাা�ােফ ইেমেজা অব�া্ ি্েদরশ এলাই্ (Align) মািজর্ ে�াপািটর �াাা েসনটাা এলাই্ পিজশ্ �পািটর �াাা েলফট বা াাইট এলাই্ �ট ে�াপািটর �াাা েলফট বা াাইট এলাই্ কাসরাা ইেফ� (cursor effect) চাই� িসেল�া (child selector ) িসউেডা �াস (Psudo Class) এংকা িসউেডা �াস (Anchor Pseudo class) ফা� চাই� িসউেডা �াস (First child Pseudo-class) লযা�ুেয়জ িসউেডা �াস (lang Pseudo-class) িশোা্ােম িসউেডা �ােসা বযবহাা সাধাাণ িশোা্ােম িসউেডা �ােসা বযবহাা িসউেডা ইিলেমনট (Psudo Element) �থম অ�া িসউেডা ইিলেমনট-(First letter Pseudoelement) �থম লাই্ িসউেডা ইিলেমনট-(First first line Pseudoelement) িবেফাা িসউেডা ইিলেমনট (Before Pseudo element) আফটাা িসউেডা ইিলেমনট (After Pseudo element)
- 11. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 10 ছিব ও িমিডয়াঃ ইেমজ গযালািা (Image Gallery) ছিবা অপািসিট (Opasity) ইেমজ স্�াইটস্ (Image Sprites) ইেমজ স্�াইটস্ েক্ কাা হয় ইেমজ স্�াইটস্ কাাা েকৗশল ইেমজ স্�াইটস্ কাাা ি�তীয় েকৗশল িমিডয়া টাইপ (Media Type) স�ূণর �েজ�ঃ ে্িভেগশ্ বাা ে্িভেগশ্ (Navigation) ে্িভেগশ্ বাোা সাধাাণ গঠন ে্িভেগশ্ বাোা বাটে্ িলংক যু� করন ে্িভেগশ্ বাোা div উপাদাে্া িডজাই্ ে্িভেগশ্ বাো ul,li উপাদাে্া িডজাই্ ে্িভেগশ্ বাো a উপাদাে্া িডজাই্ ে্িভেগশ্ বাোা মাউস ইেফ� ে্িভেগশ্ বাো ইেমজ িািপেটশ্ ভািটরকযাল ে্িভেগশ্ বাা হিাজনটাল ে্িভেগশ্ বাা
- 12. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 11 ইেমজ গযালািা ইেমজ গযালািা (Image Gallery) ইেমজ গযালািাা ৈবিশ�য সমূহ ইেমজ গযালািাা ইেমেজা গঠন স�ূণর ইেমজ গযালািাা গঠন স�ূণর ইেমজ গযালািাা এিায়া,বযাক�াউনড এবং বডরাা ি্ধরাাণ ইেমজ গযালািােত ি্িদর� আকৃিতা ইেমজ সংেযাজ্ সাধাাণ অব�ায় ইেমজ গযালািােত বড় আকৃিতা ইেমজ লুকাে্া ইেমজ গযালািােত েছাট ইেমেজা বডরাা এবং মািজর্ গযালাাী ি�্ (Gallery Screen) ইেমজ গযালাাীা েছাট ইেমেজা বডরাা পিাবতর্ ইেমজ গযালাাীেত বড় ইেমজ �দশর্ ইেমজ গযালাাীেত বড় ইেমেজা জ� �যাইল ৈতিা ইেমজ গযালাাীেত বড় ইেমেজা ি্েচ ইেমজ স�িকরত েলখা �দশর্ ইেমজ গযালাাী পূণরা� �েজ� ওেয়ব েপেজ ইেমজ গযালাাী যু� কাাা �ণালী ইেমজ স্�াইটস্ বাট্ ইেমজ স্�াইটস্ এর মাধযেম বাট্ ৈতিা-(১ম অংশ) ইেমজ স্�াইটস্ বাটে্া HTML �াকচাা এবং িলংক ৈতিা-(২য় পবর) ইেমজ স্�াইটস্ এর মাধযেম বাট্ ৈতিা-(েশষ অংশ)
- 13. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 12 িস এস এস েবিসক
- 14. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 13 িসএসএস িক ? Cascading Style Sheet এর সংি�� রূপ হে� CSS । সহজ ভাষায় ওেয়ব েপেজা িবিভ� উপাদাে্া গঠন, আকাা, আকৃিত, অব�া্, াং, গিতশীলতা ইতযািদ ি্ধরাােণা সহজ েকৗশল হে� CSS । িসএসএস েক্ �েয়াজ্ ? একটা সময় িছল যখন শুধুমা� HTML িদেয়ই একিট ওেয়ব সাইেটা িডজাই্ কাা হেতা । েস সমেয় িডজাই্ বলেত একটা ওেয়ব েপেজা িবিভ� ফনট এর কালাা, সাইজ, েটিবেলা িবিভ� েসেলা কালাা, পুোা পৃ�াা বযাক�াউনড কালাা, এবং �েয়াজ্ীয় ইেমজ সংেযাজ্েক েবাঝাে্া হেতা। এবং �িতটা েপেজা �িতটা উপাদাে্া জ�ই আলাদা আলাদাভােব কালাা, সাইজ ি্ধরাাণ কােত হেতা। যা িছল একটা জিটল �ি�য়া, এবং সময় সােপ� বযাপাা । বতরমাে্ যিদ একটা ওেয়ব সাইেট ১০০০ বা এর অিধক একই ধাে্া েপজ থােক তাহেলও একিট মা� CSS ি�� বযবহাা কো িডজাই্ স�ূণর কাা হয়। িসএসএস বযবহাা কো ৈতিা একিট ে্িভেগশ্ বাা িসেল�া CSS এর মাধযেম HTML �াাা ৈতিা কাা ওেয়ব েপেজা িবিভ� অংশেক ি্িদর� কো গঠন, আকাা, আকৃিত, অব�া্, াং, গিতশীলতা ইতযািদ ি্ধরাাণ কাা হয়। HTML �াাা ৈতিা ওেয়ব েপেজা েকা্ অংশেক ি্িদর�ভােব িচি�ত কাাা জ� িসেল�া বযবহাা কাা হয়। CSS এ েবশ কেয়ক ধােণা িসেল�া বযবহাা কাা হয় । এগুেলাা মেধয উে�খেযাগয হে� .... টযাগ িসেল�া �াস িসেল�া আইিড িসেল�া
- 15. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 14 টযাগ িসেল�া CSS এওেয়ব েপেজা েকা্ অংশেক ি্িদর�ভােব িচি�ত কাাা জ� যখন HTML টযাগ সমূহ বযবহাা কাা হয় তােক টযাগ িসেল�া বেল। েযম্ body { background: #FC9; font-family: Tahoma; color: #F60; } অনুশীল্ �েজ� <html> <head> <title> Selectors</title><style> body{background: #FC9; font-family: Tahoma; color: #F60;} </style> </head> <body > <marquee> <h1>www.tutohost.com</h1> </marquee> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। উপোা উদাহাণিটেত body{background: #FC9; font-family: Tahoma; color: #F60;} এখাে্ body টযাগ িসেল�া।
- 16. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 15 �াস িসেল�া CSS এ ওেয়ব েপেজা েকা্ অংশ বা এক বা একািধক উপাদা্েক ি্িদর�ভােব িচি�ত কাাা একিট অ�তম প�িত �াস িসেল�া । একািধক উপাদা্েক একই �াস িসেল�া �াাা িচি�ত কাা যায়, তাই ইহা েকািডং এর পিামাণ �াস কােত সাহাযয কো। েযম্ <p class="mar"> 24 / 7 Support</p> এর জ� css েকাড .mar{color: #C03; font-size:36px} �াস িসেল�া ি্েদরশ কাাা জ� HTML টযােগা মেধয class িক-ওয়াডর বযবহাা কাা হয় এর পর = িচ� িদেয় ডাবল েকােটশ্ এর েভতো �াস এর ্াম েলখা হয়। েযম্ <p class="mar">। এখাে্ mar �ােসা ্াম। �াইল শীেট �াসেক িচি�ত কােত (.) ডট িচ� বযবহাা কাা হয়। অনুশীল্ �েজ� <html> <head> <title> Selectors</title> <style> body{background: #FFC} .post{color:#066; font-family:Tahoma; text-align:justify;} .mar{color: #C03; font-size:36px} </style> </head> <body > <h1>www.tutohost.com</h1> <p class="post"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> <p class="post"> We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care of more than 1000 Bangladeshi websites and their huge information. </p> <marquee> <p class="mar"> 24 / 7 Support</p> </marquee> </body> </html>
- 17. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 16 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। �েজ� িবে�ষণ <p class="post"> এর মাধযেম একিট পযাাা�ােফা জ� post ্ােম একিট �াস ি্ধরাাণ কাা হেয়েছ। <p class="post"> এর মাধযেম অপর একিট পযাাা�ােফা জ� post ্ােম একিট �াস ি্ধরাাণ কাা হেয়েছ। .post{color:#066; font-family:Tahoma; text-align:justify;} এর মাধযেম post ্ােম ি্ধরািাত �াসযু� উভয় পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ। <p class="mar">এর মাধযেম একিট পযাাা�ােফা জ� mar ্ােম একিট �াস ি্ধরাাণ কাা হেয়েছ। .mar{color: #C03; font-size:36px} এর মাধযেম mar ্ােম ি্ধরািাত �াসযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।
- 18. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 17 আইিড িসেল�া CSS এ ওেয়ব েপেজা েকা্ অংশ বা েকা্ উপাদা্েক ি্িদর�ভােব িচি�ত কাাা একিট জ্ি�য় প�িত আইিড িসেল�া । একািধক উপাদা্েক �াস িসেল�া এর মত একই আইিড িসেল�া �াাা িচি�ত কাা যায় ্া। েযম্ <p id="post1"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. information. </p>এর জ� css েকাড #post1{ color:#066; font-family:Tahoma; text-align:justify; } অনুশীল্ �েজ� <html> <head> <title> Selectors</title> <style> body{background: #FFC} #post1{color:#066; font-family:Tahoma; text-align:justify;} #post2{color: #639; font-family:Tahoma; text-align:justify;} #mar{color: #C03; font-size:36px} </style> </head> <body > <h1>www.tutohost.com</h1> <p id="post1"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> <p id="post2"> We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care
- 19. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 18 of more than 1000 bangladeshi websites and their huge information. </p> <marquee> <p id="mar"> 24 / 7 Support</p> </marquee> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবর মত েদখােব। �েজ� িবে�ষণ <p id="post1"> এর মাধযেম একিট পযাাা�ােফা জ� post1 ্ােম একিট আইিড ি্ধরাাণ কাা হেয়েছ। <p id="post2"> এর মাধযেম অপর একিট পযাাা�ােফা জ� post2 ্ােম একিট আইিড ি্ধরাাণ কাা হেয়েছ। #post1{color:#066; font-family:Tahoma; text-align:justify;} এর মাধযেম post1 ্ােম ি্ধরািাত আইিডযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ। #post2{color:#639; font-family:Tahoma; text-align:justify;} এর মাধযেম post2 ্ােম ি্ধরািাত আইিডযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ। েকাড েলখাা প�িত েয েকা্ ে�া�াম েলখাা জ�ই েকা্ একটা এিডটা বযবহাা কো েকািডং কােত হয়। িস এস এস এর জ� �াথিমকভােব এিডটা িহেসেব উইেনডাজ অপাোিটং িসে�েমা িডফ� এিডটা notepad বযবহাা কাা েযেত পাো এবং বাড়িত সুিবধা পাবাা জ� এডভা� এিডটা িহেসেব Dreamweaver বযবহাা কােল কাজ অে্ক সহজহেয় যােব।
- 20. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 19 িস এস এস Syntax িস এস এস syntax দুিট অংেশ িবভ� । যথা Selector এবং Declaration । Selector অংেশ টযাগ িসেল�া িহেসেব HTML টযাগ বা �াস িসেল�া িহেসেব HTML টযাগ এর �াস এর ্াম অথবা আইিড িসেল�া িহেসেব HTML টযাগ এর আইিড এর ্াম বেস। �িতটা Declaration এর একিট property এবং একিট value থােক। অনুশীল্ �েজ� <html> <head> <title> Syntax</title> <style> body{background: #FFC} #post1{color:#066; font-family:Tahoma; text-align:justify;} #post2{color: #639; font-family:Tahoma; text-align:justify;} #mar{color: #C03; font-size:36px} </style> </head> <body > <h1>www.tutohost.com</h1> <p id="post1"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> <p id="post2"> We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care of more than 1000 bangladeshi websites and their huge information. </p>
- 21. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 20 <marquee> <p id="mar"> 24 / 7 Support</p> </marquee> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। এইচ িট এম এল এবং িস এস এস এইচ িট এম এল এর সােথ িস এস এস যু� কাাা িবষয়িট খুবই গুরু�পূণর। এইচ িট এম এল এর সােথ িস এস এস যু� কাাা জ� িত্িট প�িত ােয়েছ। যথা ইমেবেডড বা ইনটাা্রাল �াইল শীট ইন-লাই্ �াইল শীট এ�টা্রাল �াইল শীট
- 22. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 21 ইমেবেডড �াইল শীট এ প�িতেত <head>………….</head> এর মেধয <style>..</style> বা �াইল টযাগ বযাবহাা কাা হয়। এবং <style>….</style> এর মেধযই িস এস এস এর জ� �েয়াজ্ীয় Selector এবং Declaration সমূহ াাখা হয়। েযম্ <style> .post{color:#066; font-family:Tahoma; text-align:justify;} </style> ইমেবেডড �াইল শীটেক ইন লাই্ �াইল শীটও বলা হয়। অনুশীল্ �েজ� <html> <head> <title> Selectors</title> <style> .post{color:#066; font-family:Tahoma; text-align:justify;} </style> </head> <body > <h1>www.tutohost.com</h1> <p class="post">We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 23. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 22 কখন ইমেবেডড �াইল শীট বযবহাা কাা উিচৎ যখন েকা্ ওেয়ব সাইেট এমন েকা্ একিট সত� েপজ থােক যাা িডজাই্ অ�া� েপজ েথেক িভ� এে�ে� ইমেবেডড �াইল শীট বযবহাা কাা উিচৎ । এ�টা্রাল �াইল শীট এ প�িতেত িস এস এস এর জ� �েয়াজ্ীয় Selector এবং Declaration সমূহ আলাদা ি�ে� াাখা হয় এবং ি��িটেক বা �াইল শীটিটেক style.css বা এর অনুরূপ ্ােম save কাা হয়। <head>………….</head> এর মেধয <link rel="stylesheet" type="text/css" href="css.css"> যু� কো এ�টা্রাল �াইল শীট এর সােথ এইচ িট এম এল এর িলংক ৈতিা কাা হয়। অনুশীল্ �েজ�: HTML Code: <html> <head> <title> Selectors</title> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body > <h1>www.tutohost.com</h1> <p class="post"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কােত হেব। CSS Code : .post{color:#066; font-family:Tahoma; text-align:justify;}
- 24. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 23 �াইল িসটিটেক style.css ্ােম save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। কখন এ�টা্রাল �াইল শীট বযবহাা কাা উিচৎ েয েকা্ ওেয়ব সাইেটা অিধকাংশ েপজই একই িডজাইে্া হয়। এে�ে� এ�টা্রাল �াইল শীট বযবহাা কােল �িতটা েপেজা জ� আলাদা �াইল শীেটা �েয়াজ্ হয় ্া। অথরাৎ যখন েকা্ ওেয়ব সাইেটা অিধকাংশ েপজই একই িডজাইে্া তখন এ�টা্রাল ই�াইল শীট বযবহাা কাা উিচৎ । ইন-লাই্ �াইল শীট এ প�িতেত এইচ িট এম এল এর �িতটা টযােগা এি্িবউটস িহেসেব style এি্িবউটস যু� কো এর মেধয িস এস এস এর জ� �েয়াজ্ীয় Declaration সমূহ যু� কাা হয়। েযম্<p style="color:#066; font-family:Tahoma; text-align:justify;">
- 25. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 24 অনুশীল্ �েজ� HTML Code <head> <title> Selectors</title> </head> <body > <h1>www.tutohost.com</h1> <p style="color:#066; font-family:Tahoma; text-align:justify;"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। কখন ইন-লাই্ �াইল শীট বযবহাা কাা উিচৎ েকা্ ওেয়ব েপেজা িডজাই্ ৈতিাা জ� যখন এ�টা্রাল ই�াইল শীট বা ইমেবেডড �াইল শীট থােক অথবা েকা্ �াইল শীটই থােক ্া এে�ে� েকা্ িবেশষ HTML টযােগা �াইল ি্ধরাােণা জ� ই্লাই্ �াইল শীট বযবহাা কাা উিচৎ । স্টাইল
- 26. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 25 স্টাইল
- 27. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 26 বযাক�াউনড (Background) ওেয়বেপেজা িবিভ� উপাদা্ েযম্ Body, Pragaph, Table ইতযািদা জ� বযা�াউনড একিট অপিাহাযর উপাদা্। এ সকল উপাদা্ সমূেহা বযাক�াউনড িহেসেব কালাা অথবা ইেমজ বযবহাা কাা্ যায়। বযাক�াউনড িহেসেব কালাা বযবহাা বযাক�াউনড িহেসেব কালাা বযবহাোা জ� Declaration হেত পাো background:#900; অথবা background-color:#900; । েযম্ body{ background-color:#900; } বযাক�াউনড িহেসেব ইেমজ বযবহাা বযাক�াউনড িহেসেব ইেমজ বযবহাোা জ� Declaration হেব background: url(../images/4.png);।েযম্ body{ background: url(../images/4.png);} বযাক�াউনড িহেসেব ইেমজ বযবহাোা ে�ে� আোা কেয়কিট িবষয় Declaration এ উে�খ কােত হয়। এগুেলা হে� বযাক�াউনড িািপেটশ্ (Background repeatation ) বযাক�াউনড পিজশ্ (Background position ) বযাক�াউনড এটাচেমনট (Background attachment ) বযাক�াউনড িািপেটশ্ বযা�াউনড ইেমজিট কতবাা বযবহৃত হেব তা ি্েদরশ কাাা জ� বযাক�াউনড িািপেটশ্ বযবহাা কাা হয়। যিদ পুোা বযাক�াউনড জুেড় ইেমজিটেক বাাবাা িািপট কােত হয় তাহেল Declaration হেব background-repeat:repeat; যিদ ইেমজিটেক মা� একবাা বযবহাা কােত হয় তাহেল Declaration হেব background-repeat:no-repeat ; যিদ ইেমজিটেক X-অ� বাাবা বাাবাা িািপট কােত হয় তাহেল Declaration হেব background-repeat:repeat-x ; ইেমজিটেক Y-অ� বাাবা বাাবাা িািপট কােত হয় তাহেল Declaration হেব background-repeat:repeat-y ; । েযম্ body { background: url(images/4.png); background-repeat:repeat-x;} । যিদ body { background: url(images/4.png); } এভােব Declaration কাা হয় তাহেল পুোা বযাক�াউনড জুেড় ইেমজিট বাাবাা িািপট হেব।
- 28. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 27 বযাক�াউনড পিজশ্ বযাক�াউনড ইেমজিটা অব�া্ েকাথায় হেব তা ি্েদরশ কাাা জ� বযাক�াউনড পিজশ্ বযবহাা কাা হয়। যিদ ইেমজিটেক বােম াাখেত হয় তাহেল Declaration হেব background-position:left ; এখাে্ left এর �াে্ right, center, bottom, top ইতযািদ হেত পাো। যিদ ইেমজিটেক উপর িদক েথেক বােম াাখেত হয় তাহেল Declaration হেব background-position:top-left; । বযাক�াউনড এটাচেমনট বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং হেব িক্া তা �কাশ কাাা জ� বযাক�াউনড এটাচেমনট বযবহাা কাা হয়। বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং কাাা জ� Declaration হেব background-attachment:scroll ; । সাধাাণত িকছু উে�খ ্া কােল বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং হয়। বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং ্া কাাা জ� Declaration হেব background- attachment: fixed; । অনুশীল্ �েজ� <html> <head> <title> Selectors</title> <style> body{ background: url(../images/bg.png); background-attachment:fixed;} p{background: #C0C ; color: #fff; margin-left:50px;} h1{ margin-top:50px; color:#C00} </style> </head> <body > <h1>www.tutohost.com</h1> <p id="post1"> We are bangladeshi Hostgator hosting provider. <br /> We are bangladeshi Hostgator hosting provider. <br /> We are bangladeshi Hostgator hosting provider. <br /> We are bangladeshi Hostgator hosting provider. <br /> We are bangladeshi Hostgator hosting provider. <br /> We are bangladeshi Hostgator hosting provider. <br /> We are bangladeshi Hostgator hosting provider. <br /> We are bangladeshi Hostgator hosting provider. <br /> </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 29. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 28 েট�ট (Text) ওেয়ব সাইেটা �ধা্ উপাদা্ হে� েট�ট। েসৗ�যর বৃি�া জ� এবং িবেশষ িকছু সুিবধা পাবাা জ� css এর মাধযেম েট�ট এর �াইল ৈতিা কাা হয়। েট�ট এর �াইল ৈতিাা জ� েবশ কেয়কিট িবষয় Declaration এ উে�খ কােত হয়। এগুেলা হে� েট�ট কালাা (Text Color) েট�ট এলাই্েমনট (Text Alignment) েট�ট েডকোশ্ (Text Decoration) েট�ট ্া�ফােমশ্ (Text transformation) েট�ট কালাা (Text Color) আমাা সাধাাণত HTML এর মাধযেম েট�ট বযবহাোা জ� <P>, <h1>,<h2>,<a> সহ আোা িকছু টযাগ বযবহাা কিা। এসকল েট�ট এর কালাা ি্ধরাােণা জ� Declaration কােত হেব p { color: #FC9 } বা এর অনুরূপ। p এর �াে্ অ�া� টযােগা ে�ে� h1, h2 , a, body, অথবা েকা্ টযােগা id বা class বসেত পাো। েট�ট এর কালাা ি্ধরাােণা জ� িত্ ধােণা Declaration হেত পাো। েযম্ p { color: #FC9} p {color:blue;} p {color:rgb(255,0,0);}
- 30. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 29 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#090} h1{color:#C00;} p{color:blue;} .mar{color:rgb(150,0,0); font-size:25px;} </style> </head> <body > <h1>www.tutohost.com</h1> <p> We are bangladeshi Hostgator hosting provider.<br /> We are bangladeshi Hostgator hosting provider. <br /> We are bangladeshi Hostgator hosting provider. <br /> </p> <marquee> <p class="mar"> 24 / 7 Support</p> </marquee> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 31. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 30 েট�ট এলাই্েমনট (Text Alignment) ওেয়ব েপেজ েট�টেক সাজাে্াা জ� েট�ট এলাই্েমনট বযবহাা কাা হয়। েট�টেক েপেজা বাম পােশ াাখাা জ� Declaration কােত হেব text- align:left; অনুরূপভােব ডা্ পােশ াাখাা জ� Declaration কােত হেব text-align:right; মধয�াে্ াাখাা জ� Declaration কােত হেব text- align:center; । যিদ েট�ট এর �িতটা লাই্ একই আকাো সাজােত চাই তাহেল Declaration কােত হেব text-align:justify । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#090} #right{text-align:right;} #left{text-align:left;} #center{text-align:center} #justify{text-align: justify;} </style> </head> <body > <h2>Example of right align </h2> <p id="right"> We are bangladeshi <br />Hostgator hosting provider. <br /> We are bangladeshi <br />Hostgator hosting provider. </p> <h2>Example of left align </h2> <p id="left"> We are bangladeshi <br />Hostgator hosting provider. <br /> We are bangladeshi <br />Hostgator hosting provider. </p> <h2>Example of center align </h2> <p id="center"> We are bangladeshi <br />Hostgator hosting provider. <br /> We are bangladeshi <br />Hostgator hosting provider. </p> <h2>Example of justify align </h2>
- 32. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 31 <p id="justify"> We are bangladeshi Hostgator hosting provider. We are bangladeshi Hostgator hosting provider. We are bangladeshi Hostgator hosting provider. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 33. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 32 েট�ট েডকোশ্ (Text Decoration) েকা্ েট�ট এর সােথ HTML এর <a> টযােগা মাধযেম িলংক যু� কােল ঐ েট�টিটা ি্েচ ে�ট লাই্ আেস ঐ ে�ট লাই্ �া্া�িাত কাাা জ�, েট�ট েডকোশ্ বযবহাা কাা হয়। ে�ট লাই্েক েট�ট এর উপো �া্ েদয়াা জ� Declaration কােত হেব text-decoration:overline; হয়। ে�ট লাই্েক েট�ট এর মধয�াে্ �া্ েদয়াা জ� Declaration কােত হেব text-decoration:line- through; হয়। ে�ট লাই্েক েট�ট এর ি্েচ �া্ েদয়াা জ� Declaration কােত হেব text- decoration:underline; েট�ট েক পযরয়�িমকভােব দৃ�মা্ এবং অদৃ� কাাা জ� Declaration কােত হেব text-decoration:blink; ে�ট লাই্েক স�ূণররূেপ দূা কাাা জ� Declaration কােত হেব text-decoration:none;। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#090} h3 {text-decoration:overline;} h4{text-decoration:line-through;} h5{text-decoration:underline;} h6 {text-decoration:blink;} #none{text-decoration:none} </style> </head> <body > <h3>This is an example of overline</h3> <h4>This is an example of line-through</h4> <h5>This is an example of underline</h5> <h6>This is an example of blink</h6> <a href="www.tutohost.com"id="none"><h2>This is a link and an example of text-decoration none </h2></a> </body> </html>
- 34. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 33 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। েট�ট ্া�ফােমশ্ (Text Transformation) েট�ট অ�ভূর� অ�া সমূহেক বড় হােতা বা েছাট হােতা অ�ো অথবা �িতিট শে�া �থম অ�া বড় হােতা অ�ো রূপা�োা জ� েট�ট ্া�ফােমশ্ বযবহাা কাা হয়। েট�ট এর অ�ভূর� সকল অ�ােক বড় হােতা অ�ো রূপা�োা জ� Declaration কােত হেব text- transform:uppercase; েছাট হােতা অ�ো রূপা�োা জ� Declaration কােত হেব text- transform:lowercase; �িতিট শে�া �থম অ�া বড় হােতা অ�ো রূপা�োা জ� Declaration কােত হেব text-transform:capitalize; । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#090} p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style>
- 35. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 34 </head> <body > <p class="uppercase">This is an example of uppercase.</p> <p class="lowercase">This is an example of lowercase.</p> <p class="capitalize">This is an example of capitalize.</p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ফনট (Font) একটা ওেয়ব সাইেটা �ধা্ উে�� হে� বযবহাাকাাীেক �েয়াজ্ীয় তথয েসবা �দা্ কাা। েকা্ ওেয়ব সাইেট তথয �দশরে্া ে�ে� �ধা্ ভূিমকা পাল্ কো েট�ট । সাইেট েকাথায় িক ধােণা েট�ট বযবহাা কাা হেব, আকাা আকৃিত েকম্ হেব এ সকল িকছুই ি্য়ি�ত হয় িস এস এস এর ফনট এর মাধযেম। েট�ট এর ফনট �াইল ৈতিাা জ� েবশ কেয়কিট িবষয় Declaration এ উে�খ কােত হয়। এগুেলা হে� ফনট ফযািমিল (Font family) ফনট সাইজ(Font size) ফনট েভিােয়নট (Font variant) ফনট ওেয়ট (font-weigh)
- 36. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 35 ফনট ফযািমিল (Font family) েট�ট সমূেহ িক ধােণা ফনট বযবহাা কাা হেব, তা ি্েদরশ কাাা জ� ফনট ফযািমিল বযবহাা কাা হয়। েট�ট সমূেহা জ� Arial ফনট িসেল� কাাা জ� Declaration কােত হেব font-family:Arial; অনুরূপভােব Tahoma ফনট িসেল� কাাা জ� Declaration কােত হেব font-family:Tahoma; । অে্ক সময় েট�ট সমূেহা জ� একিটা পিাপূাক িহেসেব একািধক ফনট Declaration এ উে�খ কাা হয় েযম্ font-family:Verdana, Geneva, Tahoma; । যখন �াউজাা �থম ফনট সােপাটর কােব ্া তখন েট�ট সমূহ ২য় বা ৩য় ফেনট �দিশরত হেব। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#090} h1{font-family:Arial;} h2{font-family:Tahoma; color: #C00} p{ font-family:Verdana, Geneva, Tahoma} </style> </head> <body > <h1>This text is written by Arial font.</h1> <h2>This text is written by Tahoma font.</h2> <p>Normaly,this text is written by Verdana font, But when browser does not support Verdana font, this text will be displayed by Geneva font or Tahoma font. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 37. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 36 ফনট সাইজ (Font size) েট�ট সমূেহ বযবহৃত ফনট সমূেহা আকাা বা সাইজ েকম্ হেব, তা ি্েদরশ কাাা জ� ফনট সাইজ বযবহাা কাা হয়। েট�ট সমূেহা জ� 25px এর ফনট িসেল� কাাা জ� Declaration কােত হেব font-size:25px; অনুরূপভােব 20px ফনট িসেল� কাাা জ� Declaration কােত হেব font-size:20px;। েট�ট সমূেহ বযবহৃত ফনট সমূেহা আকাা বা সাইজ িপে�েল বা px এ ্া িদেয় শতকাা িহেসেবও েদযা েযেত পাো, এে�ে� Declaration কােত হেব font-size:100% এর অনুরূপ। েট�ট সমূেহা ফনট সাইজ Declaration এর আোা েবশ িকছু প�িত আেছ েযম্ font-size:larger; font- size:medium; font-size:small; font-size:smaller; font-size:xx-large; font-size:large; font-size:x-large; font-size:x-small; font-size:xx- small; ইতযািদ। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#090} p{font-size:25px;} h3{font-size:20p;} #100{ font-size:100%} #250{ font-size:150%} #xx-large{ font-size:xx-large;} </style> </head> <body > <p> The font size of the text is 25px. </p> <h3>The font size of the text is 20px.</h3> <p id="100">The font size of the text is 100%.</p> <p id="250">The font size of the text is 150%.</p> <p id="xx-large">The font size of the text is xx-large</p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 38. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 37 ফনট েভিােয়নট (Font variant) যিদ েকা্ ওেয়ব েপেজ িবেশষ েকা্ িশোা্াম এম্ভােব �দশরে্া �েয়াজ্ পেড়, েযখাে্ �াভািবকভােব েলখা েট�ট সমূেহা সবগুেলা অ�া বড় হােতা হেব িক� েয�াে্ েছাট হােতা অ�া হওয়াা কথা েসই �াে্া বড় হােতা অ�াগুেলাা ফনট সাইজ তুল্ামূলক �াভািবক ফনট সাইেজা েচেয় েছাট হেব, এে�ে� ফনট েভিােয়নট বযবহাা কাা হয়।This Is an Example Of Variant Text েলখািটা ভািােয়নট �াইল ৈতিাা জ� Declaration কােত হেব font-variant: small-caps; । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#090} #variant{ font-variant: small-caps; color:#C00;} </style> </head> <body > <h2>This is an example of normal h2 text .</h2> <h2 id="variant">This Is an Example Of h2 Variant Text .</h2> </body> </html>
- 39. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 38 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ফনট ওেয়ট (font-weigh) েকা্ ওেয়ব েপেজ বযবহৃত েট�ট সমূহ কতটা েমাটা হেব বা িচক্ হেব তা ি্ধরাাণ কাাা জ� ফনট ওেয়ট বযবহাা কাা হয়। েবা� েট�ট ৈতিাা জ� Declaration কােত হেব font-weight:bold; । েট�ট সমূহ কতটা েমাটা হেব তা ি্ধরাােণা জ� সংখযা বযবহাা কাা েযেত পাো, েযম্ font-weight:900; অথবা font-weight:800; । এছাড়া ফনট ওেয়ট �াইল িহেসেব font-weight:lighter; এবং font-weight:bolder; বযবহাা কাা হয়।
- 40. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 39 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#090} #normal{font-weight:normal;} #bold{font-weight:bold;} #lighter{font-weight:lighter;} #ni{font-weight:900;} </style> </head> <body > <p id="normal"> This is an example of normal p text . </p> <p id="bold"> This is an example of bold p text . </p> <p id="lighter"> This is an example of lighter p text . </p> <p id="ni"> This is an example of 900 p text . </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 41. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 40 িলংক (Link) HTML এ অ�া� েপেজা সােথ সংেযাগ �াপে্া জ� <a></a> বা এ�া টযাগ বযবহাা কো িলংক ৈতিা কাা হয়। আর িলংক সবেচেয় েবিশ বযবহাা কাা হয় ে্িভেগশ্বাো। সাধাাণত েকা্ একিট িলংক এর চাািট অব�া থােক। যথা িলংেকা সাধাাণ অব�া (Normal Condition of link) িলংেকা িভিজেটড অব�া (Visited Condition of link) িলংেকা েহাবাা অব�া (Hover Condition of link) িলংেকা সি�য় অব�া (Active Condition of link) িলংেকা সাধাাণ অব�া (Normal Condition of link) েকা্ একিট িলংক �থমবাা বযবহাা ্া কাা পযর� েযভােব �দিশরত হয় তােক ঐ িলংেকা সাধাাণ অব�া বেল। এঅব�ায় িলংকিট েকম্ েদখােব তাা �াইল ৈতিা কাাা জ� �াইল শীেট েলখেত হেব a:link {color: #090;} । িলংেকা িভিজেটড অব�া (Visited Condition of link ) েকা্ একিট িলংক এক বা একািধক বাা বযবহাা কাা হেল এবং িলংেকা উপর মাউস ্া াাখেল িলংকিট েযভােব �দিশরত হয় তােক ঐ িলংেকা িভিজেটড অব�া বেল।এ অব�ায় িলংকিট েকম্ েদখােব তাা �াইল ৈতিা কাাা জ� �াইল শীেট েলখেত হেব a:visited {color:#303} । িলংেকা েহাবাা অব�া (Hover Condition of link) েকা্ একিট িলংক বযবহাা কাা েহাক বা ্া েহাক, িলংেকা উপর মাউস াাখেল িলংকিট েযভােব �দিশরত হয় তােক ঐিলংেকা েহাবাা অব�া বেল।এ অব�ায় িলংকিট েকম্ েদখােব তাা �াইল ৈতিা কাাা জ� �াইল শীেট েলখেত হেব a:hover { background: #639} । িলংেকা সি�য় অব�া (Active Condition of link) যখন িলংকিট সি�য় অব�ায় থােক, অথরাৎ মাউস ি�ক কাাা মূহেতর িলংকিট েযভােব �দিশরত হয় তােক ঐ িলংেকা সি�য় অব�া বেল।এ অব�ায় িলংকিট েকম্ েদখােব তাা �াইল ৈতিা কাাা জ� �াইল শীেট েলখেত হেব a:active {color:#960;} চাািট অব�ােতই িলংেকা বয�াউনড পিাবতর্ কাা যায়। এবং ে্িভেগশ্ বাো এই লিজকিটই েবিশ বযবহৃত হয়। িলংেকা বয�াউনড পিাবতর্ কাাা জ� �াইল িসেট েলখেত হেব a:hover{background:#F60; এর অনুরূপ।
- 42. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 41 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#090} a:link {color:#F00;} a:visited {color:#303} a:hover {color: #fff;} a:active {color:#960;} #nav ul li {float:left; list-style:none;} #nav ul li a {padding:10px; display:block; text-decoration:none;} #nav ul li a:link{background:#FCC;} #nav ul li a:hover{background:#F60;} #nav ul li a:hover { background: #639} #nav ul li a:active { background:#39F;} </style> </head> <body > <a href="https://www.tutohost.com"><h1>This is a Link.</h1></a><br> <div id="nav"> <ul> <li><a href="https://www.tutohost.com"><h2>HTML</h2></a></li> <li><a href="https://www.tutohost.com"><h2>CSS </h2></a></li> <li><a href="https://www.tutohost.com"><h2>PHP</h2></a></li> <li><a href="https://www.tutohost.com"><h2>Wordpress</h2></a></li > </ul> </div> </body> </html>
- 43. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 42 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। িল� (List) ওেয়ব েপেজ তথয উপ�াপ্াা একিট অ�তম প�িত িল� । CSS �াাা িত্ ধােণা িল� ৈতিা কাা যায়, একিট হে� অডরাা িল� এবং অপািট হে� আ্অডরাা িল� । অডরাা িলে� িবিভ� তথযেক পযরায়�িমকভােব সািজেয় উপ�াপ্ কাা হয় এবং �িতটা লাইে্া শুরুেত �িমক সংখযা থােক, আন অডরাা িলে� �িতটা লাইে্া সামে্ েছাট বৃ�াকাা বা বগরাকাা িচ� থােক। এছাড়া িলে� েযেকা্ িস�েলা পিাবেতর েছাট আকাোা ইেমজ বযবহাা কাা যায়।
- 44. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 43 অডরাা িল� (Ordered List) অডরাা িলে� িবিভ� তথযেক পযরায়�িমকভােব সািজেয় উপ�াপ্ কাা হয় এবং �িতটা লাইে্া শুরুেত �িমক সংখযা থােক।অডরাা িল� েবশ কেয়ক ধােণা হেত পাো। েযম্ এযালফােবিটক, েডিসমাল, োামা্ ইতযািদ। এযালফােবিটক �াইল িল� ৈতিা কাাা জ� Declaration কােত হেব list-style-type:upper-alpha; অথবা list-style-type:lower-alpha; । েডিসমাল �াইল িল� ৈতিা কাাা জ� Declaration কােত হেব list-style-type:decimal; োামা্ �াইল িল� ৈতিা কাাা জ� Declaration কােত হেব list-style-type:upper-roman; অথবা list-style-type:lower- roman; । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99; margin-left:120px;} h1{color:#F00;} #alphabet {list-style-type:lower-alpha;} #decimal {list-style-type:decimal;} #roman {list-style-type:lower-roman; } </style> </head> <body > h1>Ordered list</h1> <h3>Alphabet Type list</h3> <ol id="alphabet"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ol> <h3>Number Type list</h3> <ol id="decimal"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ol> <h3>Roman Number Type list</h3> <ol id="roman"> <li>Pragaph</li> <li>Table</li> <li>List</li> </ol> </body> </html>
- 45. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 44 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। আ্অডরাা িল� (Unrdered List) আন অডরাা িলে� �িতটা লাইে্া সামে্ েছাট বৃ�াকাা বা বগরাকাা িচ� থােক, আন অডরাা িল� েবশ কেয়ক ধােণা হেত পাো। েযম্ িড� �াইল, সােকরল �াইল, �য়াা �াইল ইতযািদ। িড� �াইল িল� ৈতিা কাাা জ� Declaration কােত হেব list-style-type:disc;। সােকরল �াইল িল� ৈতিা কাাা জ� Declaration কােত হেব list-style-type:circle; �য়াা �াইল িল� ৈতিা কাাা জ� Declaration কােত হেব list-style-type:square;।
- 46. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 45 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99; margin-left:120px;} h1{color:#F00;} #disc {list-style-type:disc;} #circle {list-style-type:circle} #square {list-style-type:square;} </style> </head> <body > <h1>Unordered list</h1> <h4>Disc Type list</h4> <ul id="disc"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> <h4>Circle Type list</h4> <ul id="circle"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ul><h4>Square Type list</h4> <ul id="square"> <li>Pragaph</li> <li>Table</li> <li>List</li> </ul> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 47. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 46 িলে� ইেমেজা বযবহাা িলে� েযেকা্ িস�েলা পিাবেতর েছাট আকাোা ইেমজ বযবহাা কাা যায়।ে্িভেগশ্ বাো িলে�া বযবহাা খুবই জ্ি�য়। সাধাাণত সাইডবাা ে্িভেগশে্ বযবহৃত িলে� িল� �াইল িহেসেব ইেমেজা বযবহাা েবিশ েদখা যায়।িল� �াইল িহেসেব ইেমজ বযবহাোা জ� Declaration কােত হেব list-style-image:url(images/b.png)।
- 48. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 47 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#c9f3fa; margin-left:120px;} h1{color:#F00;} ul{list-style-image:url(images/b.png)} </style> </head> <body > <h1>List Style Image</h1> <ul id="disc"> <li><a href="www.tutohost.com">Home</a></li> <li><a href="www.tutohost.com">About Us</a></li> <li><a href="www.tutohost.com">HTML</a></li> <li><a href="www.tutohost.com">CSS</a></li> <li><a href="www.tutohost.com">PHP</a></li> <li><a href="www.tutohost.com">Contact Us</a></li> </ul> </body> </html> কাযর�ণালী imstyle ্ােম একটা folder ৈতিা কো তাা মেধয images ্ােম ্তু্ একটা folder ৈতিা কােত হেব। images folder এর মেধয েয ইেমজিট িলে� �দশর্ কাা হেব তা াাখেত হেব।এই �েজ�িটেত b.png ্ােম একটা ইেমজ বযবহাা কাা হেয়েছ।ইেমজিটা ডাউ্েলাড িলংক http://www.tutohost.com/bangla/css/images/pic/b.png ।এর পর imstyle ্ােম ৈতিা folder এর মেধয একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 49. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 48 েটিবল (Table) ওেয়ব েপেজ েটিবল বযাবহাা কো খুব সহেজই তথয-উপা�,পিাসংখযা্ উপ�াপ্ কাা যায়। েটিবল খুবই গুরু�পূণর একিট উপাদা্।িস এস এস বযবহাা কো এইচ িট এম এল এ ৈতিাকৃত েটিবলেক আোা আকষরণীয় এবং বযবহাা বা�ব কাা যায়। িস এস এস বযবহাা কো েটিবেলা �াইল ৈতিাা জ� েবশ কেয়কিট িবষেয়া উপর কাজ কােত হয়। এগুেলা হে�, েটিবল বডরাা (Table Border) েটিবল ওয়াইডথ এনড হাইট (Table Width and Height) েটিবল েট�ট এলাই্েমনট (Table Text Alignment) েটিবল কালাা (Table Color) েটিবল বডরাা (Table Border) মূলত েটিবেলা দৃ�মা্ মূল গঠন ৈতিা কাা হয় েটিবল বডরাা �াাা।েটিবেলা �িতটা সািা ৈতিাা জ� HTML এ <tr></tr> বযবহাা কাা হয়, এবং �িতটা েসল ৈতিাা জ� <td></td>বযবহাা কাা হয়। <th></th> এর মাধযেম েটিবল েহডাা ৈতিা কাা হয়।CSS �াাা েটিবল বডরাা �াইল ৈতিাা জ� �যাইল শীেট েলখেত হেব, table,th,td { border:1px solid #F00; } এখাে্ মূল েটিবল, েটিবেলা �িতটা সািা এবং �িতটা েসল এর জ� একই �যাইেলা বডরাা ি্ধরাাণ কাা হেয়েছ। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99; margin-left:120px;} table,th,td { border:1px solid #F00;} </style> </head>
- 50. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 49 <body > <table> <tr> <th>SL</th> <th>Book</th> <th>Pen</th> <th>Box</th> </tr> <tr> <td>01</td> <td>100</td> <td>200</td> <td>400</td> </tr> <tr> <td>02</td> <td>300</td> <td>600</td> <td>300</td> </tr> </table> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ছিবটােত আসেল সাধাাণ েটিবেলা মত বডরাা ৈতিা হয়ি্। �িতটা েসল পা�া েথেক আলাদা হেয়েছ। { border-collapse:collapse; } এখন যিদ �াইল শীেট উপোা েকাড টুক যু� কাা হয় তাহেল েটিবলিট েদখেত সাধাাণ েটিবেলা মত হেব এবং Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 51. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 50 েটিবল ওয়াইডথ এনড হাইট (Table Width and Height) েটিবল িডজাইে্া ে�ে� েয িবষয়িট �থেম িচ�া কােত হয়, তা হে� েটিবলিট কতটুক চওড়া হেব এবং এর উ�তা কতটুক হেব, েটিবল েহডাা তথা �থম সািাা �িতটা েসল েকম্ হেব। েটিবেলা চওড়া েকম্ হেব এবং এর উ�তা ি্ধরাােণা জ� �াইল শীেট েলখেত হেব, table { width:300px; height:100px; } মা্সমূহ px তথা িপে�েল অথবা েপেজা শতকাা িহেসেব েদয়া েযেত পাো।েযম্, table { width:50%; height:20%; } শতকাা িহেসেব মা্ িদেল মি্টোা সাইজ অনুসাো েটিবেলা আকাা পিাবিতরত হেব িক� িপে�েল মা্ িদেল েকা্ পিাবতর্ হেব ্া। েটিবল েহডাা তথা �থম সািাা �িতটা েসল এর উ�তা ি্ধরাােণা জ� �াইল শীেট েলখেত হেব, th { height:50px; } এে�ে�ও মা্সমূহ px তথা িপে�েল অথবা েপেজা শতকাা িহেসেব েদয়া েযেত পাো। সাধাাণত েটিবল েহডাা তথা �থম সািাা �িতটা েসল এর উ�তা ি্ধরাাণ কো িদেল বািক েসল গুেলাা আকাা েটিবেলা width �াাা ি্ধরািাত হয়।
- 52. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 51 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;margin-left:120px; } table{ border-collapse:collapse; } table,th,td { border:1px solid #F00; } table { width:300px; height:100px; } th { height:50px; } </style> </head> <body > <table> <tr> <th>SL</th> <th>Book</th> <th>Pen</th> <th>Box</th> </tr> <tr> <td>01</td> <td>100</td> <td>200</td> <td>400</td> </tr> <tr> <td>02</td> <td>300</td> <td>600</td> <td>300</td> </tr> </table> </body> </html>
- 53. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 52 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। েটিবল েট�ট এলাই্েমনট (Table Text Alignment) েটিবেল েট�ট সমূহ িকভােব থাকেব তা ি্েদরশ কাাা জ� েটিবল েট�ট এলাই্েমনট বযবহাা কাা হয়। �িতটা েসেলা েট�ট সমূহ বােম াাখেত হেল �াইল শীেট েলখেত হেব, td { text-align:right; } ডাে্ াাখেত হেল Declaration কােত হেব text-align:left; মাঝখাে্ াাখেত হেল Declaration কােত হেব text-align:center; এখন যিদ �িতটা েসেলা েট�ট সমূেহা ভািটরকযাল এলাই্েমনট অথরাৎ �িতটা েসেলা মেধয েট�ট সমূহ উপোা িদেক থাকেব ্া ি্েচা িদেক থাকেব অথবা মাঝামািঝ অব�াে্ থাকেব িক্া ি্ধরাাণ কােত হয় তাহেল Declaration এ vertical-align ি্ধরাাণ কো িদেত হেব।েট�ট সমূহ ি্েচা িদেক াাখাা জ� Declaration কােত হেব, td { vertical-align:bottom; }
- 54. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 53 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;margin-left:120px; } table{ border-collapse:collapse; } table,th,td { border:1px solid #F00; } table { width:300px; height:200px; } th { height:50px; } td { text-align:center; } td { vertical-align:bottom; } </style> </head> <body > <table> <tr> <th>SL</th> <th>Book</th> <th>Pen</th> <th>Box</th> </tr> <tr> <td>01</td> <td>100</td> <td>200</td> <td>400</td> </tr> <tr>
- 55. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 54 <td>02</td> <td>300</td> <td>600</td> <td>300</td> </tr> </table> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। েটিবল কালাা (Table Color) বতরমাে্ একটা ওেয়ব সাইট শুধুমা� তথয �কােশা উে�ে� িডজাই্ কাা হয় ্া।তথযিট কতটা সু�াভােব এবং সহেজ বযবহাােযাগয কো বযবহাাকাাীা ি্কট উপ�াপ্ কাা হল, েসটাও অিধক গুরু�পূণর। ওেয়ব েপেজ েটিবেল উপ�ািপত পিাসংখযা্ বা তািলকােক িস এস এস বযবহাা কো আকষরণীয়রূেপ বযবহাাকাাীা ি্কট �দশর্ কাা যায়।এে�ে� েটিবেলা েহডাা এবং �িতটা েসেলা কালাা অিধক গুরু�পূণর ভূিমকা পাল্ কো। েটিবল েহডাা এর বযক�াউনড কালাা ি্ধরাােণা জ� �াইল শীেট েলখেত হেব, th { background:#F69; }
- 56. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 55 েটিবেলা �িতটা েসেলা বযক�াউনড কালাা ি্ধরাােণা জ� �াইল শীেট েলখেত হেব, td { background:#FAC; } অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;margin-left:120px; } table{ border-collapse:collapse; width:300px; height:200px; } table,th,td { border:1px solid #F00; } th { height:50px; } td { text-align:center; vertical-align:bottom; } th { background: #F69; } td { background:#FAC; } </style> </head> <body > <table> <tr> <th>SL</th> <th>Book</th> <th>Pen</th>
- 57. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 56 <th>Box</th> </tr> <tr> <td>01</td> <td>100</td> <td>200</td> <td>400</td> </tr> <tr> <td>02</td> <td>300</td> <td>600</td> <td>300</td> </tr> </table> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 58. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 57 ব্ক্স ও লেআউট
- 59. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 58 বডরাা এবং বডরাা �াইল বডরাা ওেয়ব েপেজা একিট গুরু�পূণর উপাদা্।এইচ িট এম এল এবং িস এস এস বযবহাা কো েটমে�ট িডজাই্ কাাা সময় িবিভ� উপাদাে্া জ� সিঠক াং এবং আকৃিতা বডরাা ৈতিা কাাা উপর িডজাইে্া মাধুযর অে্কাংেশ ি্ভরা কো।িস এস এস বযবহাা কো িবিভ� ধােণা বডরাা ৈতিা কাা যায়। িবিভ� ধােণা বডরাা ৈতিাা ে�ে� েবশ িকছু িবষেয়া উপর কাজ কােত হয়। এগুেলা হে�, বডরাা �াইল (Border Style) বডরাা ওয়াইডথ (Border Width) বডরাা কালাা (Border Color) পৃথক বডরাা ( Individual Border )
- 60. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 59 বডরাা �াইল বডরাা �যাইল ি্েদরশ কো বডরাািট েদখেত েকম্ হেব।বডরাা �যাইল ৈতিাা জ� Declaration কােত হেব, border-style:dotted এর অনুরূপ। িস এস এস বযবহাা কো িবিভ� ধােণা বডরাা �যাইল ৈতিা কাা যায়। ডেটড �যাইল বডরাা ৈতিাা জ� Declaration কােত হেব, border- style:dotted ; ডযােসড �যাইল বডরাা ৈতিাা জ� Declaration কােত হেব, border-style:dashed; ডাবল �যাইল বডরাা ৈতিাা জ� Declaration কােত হেব, border-style:double; ে�াভ �যাইল বডরাা ৈতিাা জ� Declaration কােত হেব, border-style:groove; িাডজ �যাইল বডরাা ৈতিাা জ� Declaration কােত হেব, border-style:ridge; ই্েসট �যাইল বডরাা ৈতিাা জ� Declaration কােত হেব, border-style:inset; আউটেসট �যাইল বডরাা ৈতিাা জ� Declaration কােত হেব, border-style:outset; । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} #dotted{border-style:dotted ;} #dashed{border-style:dashed;} #double{border-style:double;} #groove{border-style:groove;} #ridge{border-style:ridge;} #inset{border-style:inset;} #outset{border-style:outset;} </style> </head> <body > <h3 id="dotted">This is an example of dotted border</h3> <h3 id="dashed">This is an example of dashed border</h3> <h3 id="double">This is an example of double border</h3> <h3 id="groove">This is an example of groove border</h3> <h3 id="ridge">This is an example of ridge border</h3> <h3 id="inset">This is an example of inset border</h3> <h3 id="outset">This is an example of outset border</h3> </body> </body> </html>
- 61. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 60 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। বডরাা ওয়াইডথ (Border Width) বডরাা ওয়াইডথ ি্েদরশ কো বডরাািট কতটা েমাটা হেব।বডরাা ওয়াইডথ ি্ধরাােণা জ� Declaration কােত হেব, border-width:thin; এর অনুরূপ। িস এস এস বযবহাা কো িবিভ� ধােণা বডরাা ওয়াইডথ ি্ধরাাণ কাা যায়।িথ্ বডরাা ৈতিাা জ� Declaration কােত হেব, border-width:thin; িমিডয়াম বডরাা ৈতিাা জ� Declaration কােত হেব, border- width:medium; িথক বডরাা ৈতিাা জ� Declaration কােত হেব, border-width:thick; 1px বা ১ িপে�ল চওড়া বডরাা ৈতিাা জ� Declaration কােত হেব,border-width:1px; 15px বা ১৫ িপে�ল চওড়া বডরাা ৈতিাা জ� Declaration কােত হেব, border-width:15px; ।
- 62. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 61 েকা্ HTML উপাদাে্া চাাপােশা বডরাা চাা ধােণা ওয়াইডথ এর হেত পাো, এধােণা বডরাা ৈতিাা জ� Declaration কােত হেব, border-width:2px 8px 6px 4px; এখাে্ ১ম 2px ি্েদরশ কো top border ; ২য় 8px ি্েদরশ কো right border; ৩য় 6px ি্েদরশ কো down border ; ৪থর 4px ি্েদরশ কো left border। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} h3{border-style:solid;} #thin{border-width:thin;} #medium{border-width:medium;} #thick{border-width:thick;} #1px{border-width:1px;} #15px{border-width:15px;} div{border-style:solid; border-width:2px 8px 6px 4px;} </style> </head> <body > <h3 id="thin">This is an example of thin border</h3> <h3 id="medium">This is an example of medium border</h3> <h3 id="thick">This is an example of thick border</h3> <h3 id="1px">This is an example of 1px border</h3> <h3 id="15px">This is an example of 15px border</h3> <div> <p> <h2>This is an example of multi size border</h2> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 63. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 62 বডরাা কালাা (Border Color) বডরাা কালাা ি্েদরশ কো বডরাািটা াং েকম্ হেব।বডরাা কালাা ি্ধরাােণা জ� Declaration কােত হেব, border- color:yellow; এর অনুরূপ। িস এস এস বযবহাা কো িবিভ� ধােণা বডরাা কালাা ি্ধরাাণ কাা যায়।হলুদ ােঙা বডরাা ৈতিাা জ� Declaration কােত হেব, border- color:yellow; িপংক কালাোা বডরাা ৈতিাা জ� Declaration কােত হেব, border- color:pink; rgb প�িতেতও বডরাা কালাা িাধরাাণ কাা যায়, এ প�িতেত বডরাা ৈতিাা জ� Declaration কােত হেব, border- color:rgb(240,060,155); hex প�িতেতও বডরাা কালাা িাধরাাণ কাা যায়, এ প�িতেত বডরাা ৈতিাা জ� Declaration কােত হেব, border- color:#ff0000; বডরাা কালাা ্া�পাোনট হেত পাো, ্া�পাোনট বডরাা ৈতিাা জ� Declaration কােত হেব,border-color:transparent; ।
- 64. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 63 েকা্ HTML উপাদাে্া চাাপােশা বডরাা চাা ধােণা ােঙা হেত পাো, এধােণা বডরাা ৈতিাা জ� Declaration কােত হেব, border-color:#a03090 #f00000 #C06000 #0030F0; এখাে্ ১ম #a03090 ি্েদরশ কো top border color ; ২য় #f00000 ি্েদরশ কো right border color; ৩য় #C06000 ি্েদরশ কো down border color; ৪থর #0030F0; ি্েদরশ কো left border color ; অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} h3{border-style:solid;} #yellow{border-color:yellow;} #pink{border-color:pink;} #rgb{border-color:rgb(240,060,155);} #hex{border-color:#ff0000;} #transparent{border-color:transparent;} div{border-style:solid; border-color:#a03090 #f00000 #C06000 #0030F0;} </style> </head> <body > <h3 id="yellow">This is an example of yellow border</h3> <h3 id="pink">This is an example of pink border</h3> <h3 id="rgb">This is an example of rgb border</h3> <h3 id="hex">This is an example of hex border</h3> <h3 id="transparent">This is an example of transparent border</h3> <div> <p> <h2>This is an example of multi colour border</h2> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 65. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 64 পৃথক বডরাা ( Individual Border ) েকা্ HTML উপাদাে্া চাাপােশা বডরাা এর �াইল, ওয়াইডথ এবং কালাা এসবই িভ� হেত পাো।এ এধােণা বডরাা ৈতিাা ে�ে� উপোা িদেকা বডরাোা জ� Declaration কােত হেব, border-top:dotted 8px #F00 ; ডা্ িদেকা বডরাোা জ� Declaration কােত হেব, border-right:dashed 6px #F60 ; ি্েচা িদেকা বডরাোা জ� Declaration কােত হেব, border- bottom:double 6px #C09; বাম িদেকা বডরাোা জ� Declaration কােত হেব, border-left:solid 5px #960;।
- 66. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 65 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} div{ border-top:dotted 8px #F00 ; border-right:dashed 6px #F60 ; border-bottom:double 6px #C09; border-left:solid 5px #960;} </style> </head> <body > <div> <p> <h2>This is an example of individual style border</h2> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 67. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 66 মািজর্ (Margin) িবিভ� HTML উপাদাে্া চাাপােশ কতটুক �া্ ফাঁকা থাকেব তা ি্েদরশ কাাা জ� মািজর্ বযবহাা কাা হয়।এজ� CSS এ margin Property বযবহাা কাা হয়। সাধাাণভােব েকা্ HTML উপাদাে্া চাাপােশ সমা্ পিামা্ মািজর্ ৈতিা কাাা জ� Declaration কােত হয় margin:15px;এর অনুরূপ।এখাে্ px এর পিাবেতর cm, pt, auto, % বযবহাা কাা যায়।যিদ উপোা িদেক মািজর্ িদেত হয় তাহেল Declaration কােত হেব margin-top:20px; ি্েচা িদেক মািজর্ েদয়াা জ� Declaration কােত হেব margin-bottom:25px; বাম িদেক মািজর্ েদয়াা জ� Declaration কােত হেব margin-left:30px; ডা্ িদেক মািজর্ েদয়াা জ� Declaration কােত হেব margin- right:35px;।চাািদেকা মািজর্ একইসােথ Declaration কাা যায় েযম্ margin:20px 25px 30px 35px এখাে্ 20px উপোা িদেকা মািজর্ ি্েদরশ কো, 25px ডা্ িদেকা মািজর্ ি্েদরশ কো, 30px ি্েচা িদেকা মািজর্ ি্েদরশ কো, 35px বাম িদেকা মািজর্ ি্েদরশ কো। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} h3,div{border-style:solid; border-color:rgb(240,060,155);} #auto{margin-left:auto;} #px{margin-left:50px;} #cm{margin-left:3cm;} #pt{ margin-left:120pt;} #per{ margin-left:25%;} div{margin:20px 25px 30px 35px; } </style> </head> <body > <h3 id="auto">This is an example of auto left margin.</h3> <h3 id="px">This is an example of 50px left margin.</h3> <h3 id="cm">This is an example of 3cm left margin.</h3> <h3 id="pt">This is an example of 120 pt left margin.</h3> <h3 id="per">This is an example of 25% left margin.</h3> <div> <h2>This is an example of multi margin.</h2> <p> We are bangladeshi Hostgator hosting provider. The world wide
- 68. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 67 technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। পযািডং (Padding) িবিভ� HTML উপাদাে্া যিদ বডরাা থােক, তাহেল বডরাা েথেক ক্েটনট এর চাাপােশ কতটুক �া্ ফাঁকা থাকেব তা ি্েদরশ কাাা জ� পযািডং বযবহাা কাা হয। পযািডং মূলত িবিভ� HTML উপাদাে্া বযক�াউনড এিায়া বৃি� কো থােক । পযািডং বযবহাা কাাা জ� CSS এ padding Property বযবহাা কাা হয়। সাধাাণভােব েকা্ HTML উপাদাে্া চাাপােশ সমা্ পিামা্ পযািডং ৈতিা কাাা জ� Declaration কােত হয় padding:15px;এর অনুরূপ।এখাে্ px এর পিাবেতর cm, pt, auto, % বযবহাা কাা যায়।যিদ
- 69. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 68 উপোা িদেক পযািডং িদেত হয় তাহেল Declaration কােত হেব padding-top:20px; ি্েচা িদেক পযািডং েদয়াা জ� Declaration কােত হেব padding-bottom:25px; বাম িদেক পযািডং েদয়াা জ� Declaration কােত হেব padding-left:30px; ডা্ িদেক পযািডং েদয়াা জ� Declaration কােত হেব padding-right:35px;।চাািদেকা পযািডং একইসােথ Declaration কাা যায় েযম্ padding:20px 25px 30px 35px এখাে্ 20px উপোা িদেকা পযািডং ি্েদরশ কো, 25px ডা্ িদেকা পযািডং ি্েদরশ কো, 30px ি্েচা িদেকা পযািডং ি্েদরশ কো, 35px বাম িদেকা মািজর্ ি্েদরশ কো। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} h3,div{border-style:solid; border-color:rgb(240,060,155);} #auto{padding-left:auto;} #px{padding-left:50px;} #cm{padding-left:3cm;} #pt{padding-left:120pt;} #per{padding-left:25%} div{padding:20px 25px 30px 35px; } </style> </head> <body > <h3 id="auto">This is an example of auto left padding.</h3> <h3 id="px">This is an example of 50px left padding.</h3> <h3 id="cm">This is an example of 3cm left padding.</h3> <h3 id="pt">This is an example of 120 pt left padding.</h3> <h3 id="per">This is an example of 25% left padding.</h3> <div> <h2>This is an example of multi padding.</h2> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html>
- 70. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 69 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। আউট লাই্ এবং আউট লাই্ �াইল বডরাা এর অ্ূরূপ ওেয়ব েপেজা অপর একিট গুরু�পূণর উপাদা্ আউট লাই্।এইচ িট এম এল এবং িস এস এস বযবহাা কো েটমে�ট িডজাই্ কাাা সময় িবিভ� েমেসজ ব�, সাইডবাা ইতযািদ িডজাইে্া ে�ে� আউট লাই্ বযবহাা কাা হয়।িস এস এস বযবহাা কো িবিভ� ধােণা আউট লাই্ ৈতিা কাা যায়।
- 71. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 70 িবিভ� ধােণা আউট লাই্ ৈতিাা ে�ে� েবশ িকছু িবষেয়া উপর কাজ কােত হয়। এগুেলা হে�, আউট লাই্ �াইল (Outline Style) আউট লাই্ ওয়াইডথ (Outline Width) আউট লাই্ কালাা (Outline Color) আউট লাই্ �যাইল আউট লাই্ �যাইল ি্েদরশ কো আউট লাই্িট েদখেত েকম্ হেব।আউট লাই্ �যাইল ৈতিাা জ� Declaration কােত হেব, outline-style:dotted; এর অনুরূপ। িস এস এস বযবহাা কো িবিভ� ধােণা আউট লাই্ ৈতিা কাা যায়। ডেটড �যাইল আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline-style:dotted; ডযােসড �যাইল আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline-style:dashed; ডাবল �যাইল আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline- style:double; ে�াভ �যাইল আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline- style:groove; িাডজ �যাইল আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline- style:ridge; ই্েসট �যাইল আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline- style:inset; আউটেসট �যাইল আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline- style:outset; । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} h3{border:solid #666 10px;} #dotted{outline-style:dotted;} #dashed{outline-style:dashed;} #double{outline-style:double;} #groove{outline-style:groove;} #ridge{outline-style:ridge;} #inset{outline-style:inset;} #outset{ outline-style:outset;} </style> </head> <body > <h3 id="dotted">This is an example of dotted outline.</h3> <h3 id="dashed">This is an example of dashed outline.</h3> <h3 id="double">This is an example of double outline.</h3> <h3 id="groove">This is an example of groove outline.</h3> <h3 id="ridge">This is an example of ridge outline.</h3> <h3 id="inset">This is an example of inset outline.</h3> <h3 id="outset">This is an example of outset outline.</h3>
- 72. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 71 </body> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। আউট লাই্ ওয়াইডথ (Outline Width) আউট লাই্ ওয়াইডথ ি্েদরশ কো আউট লাই্িট কতটা েমাটা হেব।আউট লাই্ ওয়াইডথ ি্ধরাােণা জ� Declaration কােত হেব, outline-width:thin; এর অনুরূপ। িস এস এস বযবহাা কো িবিভ� ধােণা আউট লাই্ ওয়াইডথ ি্ধরাাণ কাা যায়।িথ্ আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline- width:thin; িমিডয়াম আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline- width:medium; িথক আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline- width:thick; 1px বা ১ িপে�ল চওড়া আউট
- 73. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 72 লাই্ ৈতিাা জ� Declaration কােত হেব, outline-width:1px; 10px বা ১০ িপে�ল চওড়া আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline-width:10px;। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} div,h3{border:solid #666 10px; outline:dotted #C30; } #thin{outline-width:thin;} #medium{outline-width:medium;} #thick{outline-width:thick;} #apx{outline-width:1px;} #bpx{outline-width:10px;} div{outline:solid #C30; outline-width:5px; } </style> </head> <body > <h3 id="thin">This is an example of thin outline.</h3> <h3 id="medium">This is an example of mediumoutline.</h3> <h3 id="thick">This is an example of thick outline.</h3> <h3 id="apx">This is an example of 1px outline.</h3> <h3 id="bpx">This is an example of 10px outline.</h3> <div> <p> <h2>This is an example of solid 5px outline.</h2> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </body> </html>
- 74. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 73 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। আউট লাই্ কালাা (Outline Color) আউট লাই্ কালাা ি্েদরশ কো আউট লাই্িটা াং েকম্ হেব।আউট লাই্ কালাা ি্ধরাােণা জ� Declaration কােত হেব, outline-color:yellow; এর অনুরূপ। িস এস এস বযবহাা কো িবিভ� ধােণা আউট লাই্ কালাা ি্ধরাাণ কাা যায়।হলুদ ােঙা আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline-color:yellow; িপংক কালাোা আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline-color:pink; rgb প�িতেতও
- 75. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 74 আউট লাই্ কালাা িাধরাাণ কাা যায়, এ প�িতেত আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline-color:rgb(240,060,155); hex প�িতেতও আউট লাই্ কালাা িাধরাাণ কাা যায়, এ প�িতেত আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline-color:#ff0000; । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} div,h3{border:solid #666 10px; outline:dashed #C03; padding:5px;} #yellow{outline-color:yellow;} #pink{outline-color:pink;} #rgb{outline-color:rgb(240,060,155);} #hex{outline-color:#ff0000;} div{outline:red 10px double} </style> </head> <body > <h3 id="yellow">This is an example of yellow outline.</h3> <h3 id="pink">This is an example of pink outline.</h3> <h3 id="rgb">This is an example of rgb outline.</h3> <h3 id="hex">This is an example of hex outline.</h3> <div> <p> <h2>This is an example of 10px red double outline.</h2> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 76. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 75 ব� মেডল (Box Model) সকল HTML উপাদা্েক CSS �াাা �যাইল যু� কাাা ে�ে� ব� িহেসেব িবেবচ্া কাা হয়।ওেয়ব েপেজা েল আউট িডজাইে্া ে�ে� ব� মেডল খুবই গুরু�পূণর।িস এস এস ব� মেডল �কৃত পে� একটা ব� যা, েকা্ HTML উপাদা্েক আবৃত কো াােখ।
- 77. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 76 ব� মেডল ৈতিা কাাা জ� Declaration একেয়কিট �পািটর ি্ধরাাণ কো িদেত হয়।এগুেলা হে�, width - ( বে�া ��) border - ( বডরাা এর াং, আকাা এবং �যাইল ি্ধরাাণ কো িদেত হয়।) padding - ( বে�া েভতো িদেক েয পিামা্ ফাঁকা �া্ থাকেব ) margin – ( বে�া বাইোা িদেক েয পিামা্ ফাঁকা �া্ থাকেব) অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> body{ font-family:Arial, Helvetica, sans-serif; font-size:13px;} .info, .success, .warning, .error, .validation { border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center;} .info { color:#00529B; background-color: #BDE5F8; background-image: url('info.png');} .success { color:#4F8A10; background-color:#DFF2BF;} .warning { color:#9F6000; background-color:#FEEFB3;} .error { color:#D8000C; background-color:#FFBABA;} div{width:350px; border:#F5D349 10px solid; margin:15px; padding:8px; background:#FEEFB3;} </style> </head> <body > <div class="info">Information message.</div> <div class="success">Successful operation message.</div> <div class="warning">Warning message.</div> <div class="error">Error message.</div> <div> <p><h2 style="color:#C33;">This is an example of Box Model.</h2>We are bangladeshi Hostgator hosting provider.
- 78. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 77 The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 79. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 78 এডভান্স
- 80. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 79 �িপং িসেল�া (Grouping Selector) একজন ভাল েকাডাা বা ে�া�ামাোা অ�তম ৈবিশ�য হে�, িতি্ যেতাটা স�ব েকাডেক সি�� কােব্। �িপং িসেল�া বযবহাা কো CSS এর েকাডেক অে্কাংেশ কমাে্া স�ব হয়। অে্ক সময় েবশ িকছু HTML উপাদাে্া জ� একই ধােণা �যাইল বযবহাা কাাা �েয়াজ্ হয়। েযম্ h1,h2,p ইতযািদা জ� একই color, font-family, text- align ইতযািদ ে�াপািটর বযবহাোা �েয়াজ্ হেল সবগুেলাা জ� আলাদা আলাদা ভােব �যাইল ্া কো, একই সােথ িসেল�া সমূহেক কমা িদেয় িলেখ �যাইল ি্ধরাাণ কােল েকাড অে্ক কম হেব।
- 81. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 80 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} h1,h2,p{color:#333; font-family:Tahoma; text-align:justify;} </style> </head> <body > <h1>www.tutohost.com</h1> <h2>Reliable & Fast Web Hosting</h2> <p> We are relaibale Bangladeshi hosting provider. The world wide technical and support team is working for your best movement. We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care of more than 1000 bangladeshi websites and their huge information. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 82. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 81 ে্ি�ং িসেল�া (Nesting Selector) িস এস এস এ একিট িসেল�োা অ�ভূর� অপর একিট িসেল�োা জ� �যাইল ি্ধরাাণ কাাা ে�ে� ে্ি�ং িসেল�া বযবহাা কাা হয়।ধাা যাক �যাইল শীেট পযাাা�াফ P এর জ� �যাইল ি্ধরাাণ কাা হল। rap ্ােমা id িবিশ�য একটা div উপাদাে্া মেধয অপর একটা পযাাা�াফ আেছ। rap এর জ�ও �যাইল ি্ধরাাণ কাা হল। এখন যিদ rap মেধয অবি�ত পযাাা�াফিটা জ� অলাদা �যাইল ৈতিা কাাা �েয়াজ্ হয় তাহেল ে্ি�ং িসেল�া বযবহাা কােত হয়। এজ� িসেল�ো িলখেত হেব rap p । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#00CC99;} p{color:#333; font-family:Tahoma; text-align:justify;} #rap{ background:#00bbaa; padding:15px;} #rap p{color:#F00;} </style> </head> <body > <p>www.tutohost.com</p> <h2>Reliable & Fast Web Hosting</h2> <p> We are relaibale Bangladeshi hosting provider. The world wide technical and support team is working for your best movement. We are dedicated with client requrement. </p> <div id="rap"> <h2>24/7 World Class Support</h2> <p>Reliable and fast server is here. You will get 99.99% uptime guaranty. Many Bangladeshi techie people have no ability to make their site with huge taka. So we are also offering Free hosting plan.</p>
- 83. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 82 </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ডাইেম্শ্ (Dimention) েকা্ HTML উপাদাে্া �� এবং উ�তা ি্য়�েণা জ� িস এস এস এ ডাইেম্শ্ বযবহাা কাা হয়।িস এস এস এ ডাইেম্শ্ ি্ধরাােণা জ� েবশ িকছু ে�াপািটর বযবহাা কাা হয়।এগুেলা হে�, height, width, max-height, max-width, min-width, min-height ।
- 84. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 83 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background: #FFC} h2{height:50px; background:#C30;} p{max-height:100px; max-width:250px; background:#C03} h3{background:#C60; margin-left:150px;} #main{min-height:350px; min-height:250px; background:#F99; padding:10px;} </style> </head> <body > <h2>This is an example of Box Model.</h2> <p>We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> <h3>24/7 World Class Support</h3> <p id="main">Reliable and fast server is here. You will get 99.99% uptime guaranty. Many Bangladeshi techie people have no ability to make their site with huge taka. So we are also offering Free hosting plan.</p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 85. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 84 েকািডং িবে�ষণ: �থম পযাাা�াফিটা ে�ে� max-height:100px; এবং max-width:250px; ফেল �থম পযাাা�াফিটা জ� েয ডাইেম্শ্ উে�খ কাা হেয়েছ সম� েলখাা জ� তা যেথ� ্য়, এজ� বযাক�াউনড কালাা ডাইেম্শ্ অনুযায়ী �দিশরত হে�, িক� েলখা বযাক�াউনড অিত�ম কো েগেছ। 24/7 World Class Support েলখািটা িকছু অংশ �থম পযাাা�াফিটা মেধয �েবশ কোেছ।িক� 24/7 World Class Support েলখািট �থম পযাাা�াফিটা পো �দিশরত হওয়া উিচৎ। কাাণ �কৃত অেথর �থম পযাাা�াফিটা বযাক�াউনড েযখাে্ েশষ হেয়েছ, �াাা�াফিটও ঐ �াে্ই েশষ হেয় িগেয়েছ, েয কাােণ World Class Support েলখািট সিঠক �াে্ শুরু হেলও এর িকছু অংশ �থম পযাাা�াফিটা মেধয �েবশ কোেছ। ি�তীয় পযাাা�াফিটা ে�ে� বযাক�াউন্ড অে্ক ি্েচ পযর� �দশর্ কােছ কাাণ এ পযাাা�াফিটা জ� min-height:350px; ি্ধরাাণ কাা হেয়েছ যা পযাাা�াফিটা েট�ট এর উ�তাা েচেয় অে্ক েবিশ।
- 86. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 85 �দশর্ প�িত (display) িস এস এস এ িডসে� ে�াপািটর �কাশ কো েকা্ একটা উপাদা্ িকভােব �দিশরত হেব।িডসে� ে�াপািটরা েবশ িকছু value হেত পাো, এেদা মেধয সবেচেয় েবিশ বযাবহৃত হয়, িডসে� ্া্ -(display:none) িডসে� ইন লাই্ -(display:inline) িডসে� �ক – (display:block) িডসে� ্া্ -(display:none) েকা্ িবেশষ উপদা্েক �দশর্ ্া কাাা জ� িডসে� ্া্ বযবহাা কাা হয়, এজ� Declaration কােত হয় display:none;। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background: #FFC} #none{width:265px; background:#F30; padding:10px;} #none:hover{display:none;} </style> </head> <body > <h2>www.tutohost.com</h2> <div id="none"> <h1>Please Touch Me.</h1></div> <h2>We are bangladeshi Hostgator hosting provider.</h2> </body> </html>
- 87. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 86 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। েকািডং িবে�ষণ: উপোা উদাহাণিটেত Please Touch Me. েলখািটা উপো মাউস পেয়নটাা ি্েয় েগেল এিট অদৃ� হেয় যায় এজ� েকািডং এ েলখা হেয়েছ #none:hover{display:none;} । অথরাৎ none ্ােমা div িটা মাউস েহাবাা display:none । িডসে� ইন লাই্ - (display:inline) িস এস এস এর মাধযেম HTML উপাদা্ সমূহেক একই লাইে্ �দশরে্া জ� িডসে� ইন লাই্ বযবহাা কাা হয়। এটা মূলত সবেচেয় েবিশ বযাবহৃত হয় ে্িভেগশ্ বাো। HTML উপাদা্ সমূহেক একই লাইে্ �দশরে্া জ� Declaration কােত হয় display:inline; এর অনুরূপ।
- 88. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 87 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background: #FFC} li{display:inline; background:#C06; color:#FFC; padding:10px;} a{color:#FCC; font-size:24px;} </style> </head> <body > <ul> <li><a href="http://tutohost.com/bangla/html/" target="_blank">HTML</a></li> <li><a href="http://tutohost.com/bangla/css/" target="_blank">CSS</a></li> <li><a href="http://www.tutohost.com" target="_blank">PHP</a></li> <li><a href="http://www.tutohost.com" target="_blank">Wordpress</a></li> </ul> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 89. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 88 িডসে� �ক (display:block) িস এস এস এর মাধযেম HTML উপাদা্ সমূহেক একই কলােম �দশরে্া জ� িডসে� �ক বযবহাা কাা হয়। এটা মূলত সবেচেয় েবিশ বযাবহৃত হয় ভািটরকযাল ে্িভেগশ্ বাো, তথা সাইডবাা ে্িভেগশ্ বাো। HTML উপাদা্ সমূহেক একই কলােম �দশরে্া জ� Declaration কােত হয় display:block; এর অনুরূপ। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background: #FFC} li{display:block; background:#C06; color:#FFC; padding:10px; width:140px; border:#600 solid 1px;} a{color:#FCC; font-size:24px;} </style> </head> <body > <ul> <li><a href="http://tutohost.com/bangla/html/" target="_blank">HTML</a></li> <li><a href="http://tutohost.com/bangla/css/" target="_blank">CSS</a></li> <li><a href="http://www.tutohost.com" target="_blank">PHP</a></li> <li><a href="http://www.tutohost.com" target="_blank">Wordpress</a></li> </ul> </body> </html>
- 90. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 89 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। িভিজিবিলিট (visibility) েকা্ উপাদা্েক �দশর্ কাা হেব িক ্া তা ি্েদরশ কাাা জ� িস এস এস এ িভিজিবিলিট ে�াপািটর বযবহাা কাা হয়।েযম্ েকা্ উপাদা্েক �দশর্ কাাা জ� Declaration কােত হয় visibility:visible; । েকা্ উপাদা্েক �দশর্ ্া কাাা জ� Declaration কােত হয়, visibility:hidden; । িভিজিবিলিট ে�াপািটরা েবশ িকছু value হেত পাো, এেদা মেধয উে�খেযাগয হে�, িভিজিবিলিট িহেড্ – (visibility:hidden) িভিজিবিলিট িভিজবল – (visibility:visible) িভিজিবিলিট কলাপস্ –(visibility:collapse)
- 91. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 90 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC} #hide{width:245px; background:#F30; visibility:hidden; } #show{width:245px; background:#F30; visibility:visible;} </style> </head> <body > <h2>Hidden Text & Visible Text.</h2> <div id="hide"> <h1>Hidden Text.</h1></div> <div id="show"> <h1>Visible Text.</h1></div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। েকািডং িবে�ষণ: Hidden Text & Visible Text. িটা ি্েচ েবশ িকছুটা ফাঁকা অংশ �দিশরত হে�। েকািডং এর HTML অংেশ <div id="hide"><h1>Hidden Text.</h1></div> িছেলা এবং CSS অংেশ #hide{width:245px;background:#F30;} । visibility:hidden; থাকাা জ� Hidden Text. েলখািট �দিশরত হে� ্া।
- 92. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 91 Visible Text. েলখািট �দিশরত হে� কাাণ CSS অংেশ #show{width:245px; background:#F30; visibility:visible;} আেছ। িভিজিবিলিট িহেড্ – (visibility:hidden) িডসে� ্া্ -(display:none) এবং িভিজিবিলিট িহেড্ – (visibility:hidden;)উভই HTML উপাদা্েক লুকাে্াা জ� বযবহাা কাা হয়।িক� উভেয়া মেধয পাথরকয ােয়েছ। েকা্ HTML উপাদাে্া জ� CSS এ visibility:hidden; কােল HTML উপাদা্িট �দিশরত হয় ্া িঠকই িক� HTML উপাদা্িট সমপিামা্ �া্ ফাঁকা াােখ। িক� েকা্ HTML উপাদাে্া জ� CSS এ display:none;কােল HTML উপাদা্িট �দিশরত হয় ্া এবং েকা্ ফাঁকা �া্ ৈতিা হয় ্া। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC;} #none{width:245px; background:#C6C; } #none:hover{display:none;} #hidde{width:245px; background:#F30; } #hidde:hover{visibility:hidden;} </style> </head> <body > <div id="none"><h1>Please touch me.</h1></div> <br /><br /> <div id="hidde"> <h1>Please touch me.</h1></div> <h2>Please touch me.</h2> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 93. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 92 েকািডং িবে�ষণ: উপোা Please Touch Me. েট�িটা উপর মাউস ি্েয় েগেল তা অদৃ� হেয় যায় এবং তাা ি্েচা েট�টিট উপো উেঠ আেস। কাাণ এ েট�িটেত display:none; বযবহাা কাা হেয়েছ। মােঝা Please Touch Me. েট�িটা উপর মাউস ি্েয় েগেল তা অদৃ� হেয় যায়। িক� েলখািটা সমপিামা্ �া্ ফাঁকা থােক। কাাণ এেট�িটেত visibility:hidden; বযবহাা কাা হেয়েছ। িভিজিবিলিট কলাপস্ – (visibility:collapse) সাধাাণত েকা্ েটিবেলা েকা্ সািড় বা কলাম েক অদৃ� কাাা জ� িভিজিবিলিট কলাপস্ বযবহাা কাা হয়। এজ� Declaration কােত হয় visibility:collapse; ।এটা অে্কটা display:none এর মত কাজ কো থােক। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background: #FFC} table{border:1px #C00 solid; font-size:24px;} td{border:1px #C00 solid;
- 94. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 93 background:#F63; color:#CFF; } tr.col:hover{visibility:collapse;} </style> </head> <body > <table> <tr> <td>HTML</td> <td>CSS</td> <td>PHP</td> </tr> <tr class="col"> <td>Text</td> <td>Audio</td> <td>Video</td> </tr> </table> <h2>Please put your mouse pointer on text/audio/video.</h2> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। অব�া্ (Positioning) ওেয়ব েপেজ িবিভ� HTML উপাদা্ সমূহ েকাথায় িকভােব �দিশরত হেব তা �কাশ কাাা জ� position ে�াপািটর বযবহাা কাা হয়। এর সােথ top, bottom, left, and right ে�াপািটর সমূহ বযবহাা কো েকা্ HTML উপাদাে্া �কৃত অব�া্ ি্ধরাাণ কাা হয়।
- 95. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 94 position ে�াপািটরা চাা ধােণা মা্ হেত পাো। এগুেলা হে�, পিজশ্ �যািটক (position:static) পিজশ্ িফ�ড (position:fixed) পিজশ্ িােলিটভ (position:relative) পিজশ্ এবসিলউট (position:absolute) অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC} h1 { color:#F09; background:#CC9; padding:10px; border:#960 1px solid; } #static{ position:static; left:100px; top:70px;} #absolute{position: absolute; left:150px; top:100px;} #fixed{position: fixed; left:0px; top:70px;} #relative{position: relative; left:150px; top:100px;} p{background:#FCF; padding:10px; border:#F09 1px solid;} </style> </head> <body > <h1 id="static">Position static</h1> <h1 id="absolute">Position absolute</h1> <h1 id="fixed">Position fixed</h1> <h1 id="relative">Position relative</h1> <p>We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The
- 96. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 95 world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। পিজশ্ �যািটক (position:static) েকা্ একিট HTML উপাদাে্া পিজশ্ ে�াপািটর যিদ �যািটক কো েদওয়া হয়; তাহেল তা HTML উপাদা্ সমূেহা সাধাাণ এবং �ভািবক পিজশ্ ি্েদরশ কােব। এে�ে� top, bottom, left, and right ে�াপািটর সমূহ িড�াোশ্ কােলও এ অনুযায়ী েকা্ কাজ হেব ্া; অথরাৎ top, bottom, left, and right ে�াপািটর সমূহ ি্ি�য় হেয় যােব। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC;} h1{color:#F06; background:#CC9; border:#960 1px solid;
- 97. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 96 padding:10px; position:static; top:30px; leftt:5px; } p{ margin-top:100px; background:#FCF; border:#F0F 1px solid; padding:10px; text-align:justify;} </style> </head> <body > <h1>www.tutohost.com</h1> <p>We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 98. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 97 পিজশ্ িফ�ড (position:fixed) েকা্ একিট HTML উপাদা্েক মি্টা ি�ে্া সােপে� েকা্ ি্িদর� �াে্ ি�াভােব �াপ্ কাাা জ� পিজশ্ িফ�ড বযবহাা কাা হয়। এজ� �থেম position:fixed; িড�াোশ্ কো, এর পর top, bottom, left, and right ে�াপািটর সমূহ িড�াোশ্ কােত হয়। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background: #FFC} h1{color:#F06; background:#CC9; border:#960 1px solid; padding:10px; position:fixed; top:30px; leftt:5px; } p{ margin-top:100px; background:#FCF; border:#F0F 1px solid; padding:10px; text-align:justify;} </style> </head> <body > <h1>www.tutohost.com</h1> <p>We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p> </body> </html>
- 99. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 98 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। �ল কােলও www.tutohost.com েলখািটা অব�াে্া েকা্ পিাবতর্ হয় ্া। পিজশ্ িােলিটভ (position:relative) HTML উপাদা্ সমূেহা �াভািবক অব�াে্া সােপে� top, bottom, left, and right ে�াপািটর বযবহাোা মাধযেম েকা্ ব�া অব�া্ ি্ধরাােণা জ� িােলিটভ পিজশ্ ে�াপািটর বযবহাা কাা হয়। পিজশ্ ে�াপািটর যিদ �যািটক কো েদওয়া হয়, তাহেল তা HTML উপাদা্ সমূেহা সাধাাণ এবং �ভািবক পিজশ্ ি্েদরশ কো, িক� পিজশ্ িােলিটভ এবং পিজশ্ �যািটক ে�াপািটরা মেধয পাথরকয হে� পিজশ্ �যািটক ে�াপািটরা ে�ে� top, bottom, left, and right ে�াপািটর সমূহ ি্ি�য় থােক; আর পিজশ্ িােলিটভ ে�াপািটরা ে�ে� top, bottom, left, and right ে�াপািটর সমূেহা মাধযেমই েকা্ ব�া অব�া্ ি্েদরশ কাা হয়। পিজশ্ িােলিটভ ে�াপািটরা ে�েত সকল িহসাব শুরু হয় ঐ উপাদা্িটা �াভািবক অব�া্ েথেক। অথরাৎ পিজশি্ং ্া কাা হেল উপাদা্িট েয �াে্ অব�া্ কােতা েসখা্ েথেক।
- 100. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 99 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC; } h3 { color:#F09; background:#CC9; padding:10px; border:#960 1px solid; width:370px; } #right{position:relative; left:100px;} #left{position:relative; right:100px; } #down{position:relative; top:150px;} </style> </head> <body > <h1>Normal Position</h1> <h1 id="right">Position 100px right from Normal Position. </h1> <h1 id="left">Position 100px left from Normal Position. </h1> <h1 id="down">Position 150px down from Normal Position.</h1> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 101. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 100 পিজশ্ এবসিলউট (position:absolute) HTML উপাদা্ সমূেহা �কৃত অব�া্ ি্ধরাােণা জ� পিজশ্ এবসিলউট ে�াপািটর বযবহাা কাা হয়। েকা্ একিট HTML উপাদাে্া পিজশ্ ে�াপািটর যিদ এবসিলউট কো েদওয়া হয় তাহেল তাা অব�া্ �ভািবক �েম ি্েদরিশত হয় ্া, এে�ে� top, bottom, left, and right ে�াপািটর সমূেহা মাধযেম ঐ উপাদা্িটা অব�া্ ি্ধরািাত হয়। এে�ে� অ� একিট উপাদাে্া উপোও ওভাালযাপ কো ঐউপাদা্িটা অব�া্ ি্ধরাাণ কাা স�ব হয়। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC} h1 {position:absolute; left:100px; top:70px; color:#F09; background:#CC9; padding:10px; border:#960 1px solid; } p{background:#FCF; padding:10px; border:#F09 1px solid;} </style> </head> <body > <h1>www.tutohost.com</h1> <p>We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html>
- 102. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 101 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ওভাা ে�া (Overflow) top, left, height,width, padding, border ইতযািদ ে�াপািটর বযবহাা কো একিট ব� িডজাই্ কাাা পর যিদ বে�া আকাা �েয়াজ্ীয় ক্েটনট এর আকৃিতা েচেয় েছাট হয়, তাহেল বাড়িত ক্েটনট িকভােব �দিশরত হেব তা ওভাা ে�া ে�াপািটরা মাধযেম ি্ধরাাণ কাা হয়। ওভাা ে�া ে�াপািটরা েবশ িকছু মা্ হেত পাো তাা মেধয উে�খেযাগয হে�, ওভাা ে�া িভিজবল (overflow:visible) ওভাা ে�া িহেড্ (overflow:hidden) ওভাা ে�া অেটা (overflow:auto) ওভাা ে�া �ল(overflow:scroll) অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC} h3{color:red;} p{background:#FCF; left:100px;
- 103. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 102 top:70px; height:90px; width:350px; padding:10px; border:#F09 1px solid;} #visible{overflow:visible; margin-bottom:60px;} #hidden{overflow:hidden;} #auto{overflow:auto;} #scroll{overflow:scroll;} </style> </head> <body > <h3> This is an example of visible overflow</h3> <p id="visible"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> <h3> This is an example of hidden overflow</h3> <p id="hidden"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p> <h3> This is an example of auto overflow</h3> <p id="auto"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p> <h3> This is an example of scroll overflow</h3> <p id="scroll"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p> </body> </html>
- 104. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 103 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 105. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 104 ওভাা ে�া িভিজবল (overflow:visible) ওভাা ে�া ে�াপািটরা মা্ িভিজবল কােল top, left, height,width, padding, border ইতযািদ ে�াপািটর বযবহাা কো একিট ব� িডজাই্ কাাা পর যিদ বে�া আকাা �েয়াজ্ীয় ক্েটনট এর আকৃিতা েচেয় েছাট হয়, তাহেল বাড়িত ক্েটনট বে�া বাইো �দিশরত হেব। েযম্ একটা p এর জ� ব� িডজাই্ কাা হল এখন এর অ�ভূর� েট�ট এর এিায়া বে�া এিায়া এর েচেয় বড় হেল এর �াইল িসেট ওভাা ে�া ে�াপািটরা মা্ িভিজবল (overflow:visible;) কােল বাড়িট েট�ট এর ওভাা ে�া িভিজবল হেব, অথরাৎ বে�া বাইো �দিশরত হেব। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC} h3{color:red;} p{background:#FCF; left:100px; top:70px; height:90px; width:350px; padding:10px; border:#F09 1px solid;} #visible{overflow:visible;} </style> </head> <body > <h3> This is an example of visible overflow</h3> <p id="visible"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html>
- 106. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 105 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ওভাা ে�া িহেড্ (overflow:hidden) ওভাা ে�া ে�াপািটরা মা্ িহেড্ কােল top, left, height,width, padding, border ইতযািদ ে�াপািটর বযবহাা কো একিট ব� িডজাই্ কাাা পর যিদ বে�া আকাা �েয়াজ্ীয় ক্েটনট এর আকৃিতা েচেয় েছাট হয়, তাহেল বাড়িত ক্েটনট �দিশরত হেব ্া। েযম্ একটা p এর জ� ব� িডজাই্ কাা হল এখন এর অ�ভূর� েট�ট এর এিায়া বে�া এিায়া এর েচেয় বড় হেল এর �াইল িসেট ওভাা ে�া ে�াপািটরা মা্ িহেড্ (overflow:hidden;) কােল বাড়িট েট�ট এর ওভাা ে�া হাইড হেব, অথরাৎ বাড়িট েট�ট �দিশরত হেব ্া। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC} h3{color:red;} p{background:#FCF; left:100px; top:70px;
- 107. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 106 2Theight:90px;2T 2Twidth:350px;2T 2Tpadding:10px;2T 2Tborder:#F09 1px solid;}2T 2Tmargin-bottom:60px;}2T 2T#hidden{overflow:hidden;}2T 2T</style>2T 2T</head>2T 2T<body >2T 2T<h3> This is an example of hidden overflow</h3>2T 2T<p id="hidden">2T 2TWe are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p>2T 2T</body>2T 2T</html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ওভাা ে�া অেটা (overflow:auto) ওভাা ে�া ে�াপািটরা মা্ অেটা কােল top, left, height,width, padding, border ইতযািদ ে�াপািটর বযবহাা কো একিট ব� িডজাই্ কাাা পর যিদ বে�া আকাা �েয়াজ্ীয় ক্েটনট এর আকৃিতা েচেয় েছাট হয়, তাহেল বে�া মেধয �লবাা েদখা যােব এবং বাড়িত ক্েটনট �লবাা েটে্ েদখা যােব।আা যিদ বে�া আকাা �েয়াজ্ীয় ক্েটনট এর আকৃিতা েচেয় বড় হয় তাহেল �লবাা েদখা যােব ্া।
- 108. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 107 েযম্ একটা p এর জ� ব� িডজাই্ কাা হল এখন এর অ�ভূর� েট�ট এর এিায়া বে�া এিায়া এর েচেয় বড় হেল এর �াইল িসেট ওভাা ে�া ে�াপািটরা মা্ অেটা (overflow:auto;) কােল বে�া মেধয �লবাা েদখা যােব বাড়িট েট�ট �লবাা েটে্ েদখা যােব। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC} h3{color:red;} p{background:#FCF; left:100px; top:70px; height:90px; width:350px; padding:10px; border:#F09 1px solid;} #auto{overflow:auto;} </style> </head> <body > <h3> This is an example of auto overflow</h3> <p id="auto"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 109. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 108 ওভাা ে�া �ল (overflow:scroll) ওভাা ে�া ে�াপািটরা মা্ অেটা কােল top, left, height,width, padding, border ইতযািদ ে�াপািটর বযবহাা কো একিট ব� িডজাই্ কাাা পর বে�া আকাা �েয়াজ্ীয় ক্েটনট এর আকৃিতা েছাট বা বড় যাই েহাক ্া েক্ বে�া মেধয �লবাা েদখা যােব। েযম্ একটা p এর জ� ব� িডজাই্ কাা হল এখন এর অ�ভূর� েট�ট এর এিায়া বে�া এিায়া এর েচেয় েছাট বা বড় যাই েহাক ্া েক্ �াইল িসেট ওভাা ে�া ে�াপািটরা মা্ (overflow:scroll) কােল বে�া মেধয �লবাা েদখা যােব বাড়িট েট�ট থাকেল তা �লবাা েটে্ েদখা যােব। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC} h3{color:red;} p{background:#FCF; left:100px; top:70px; height:90px; width:350px; padding:10px; border:#F09 1px solid;} #scroll{overflow:scroll;} </style> </head> <body > <h3> This is an example of scroll overflow</h3> <p id="scroll"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 110. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 109 ি�প (Clip) েকা্ HTML উপাদাে্া স�ূণর অংশ �দশর্ কাা হেব, ্া েকা্ িবেশষ অংশ �দশর্ কাা হেব তা ি্েদরশ কাাা জ� ি�প ে�াপািটর বযবহাা কাা হয়। এজ� Declaration কােত হয় clip:rect(20px,200px,200px,20px); এর অনুরূপ। ি�প ে�াপািটর বযবহাা কােত হেল সােথ পিজশ্ এবসিলউট (position:absolute) অব�ই বযবহাা কােত হয়।ি�প ে�াপািটরা দুিট উে�খেযাগয মা্ হে�, অেটা ি�প (clip:auto) োকেটংগুলাা ি�প (clip:ract) ি�প ে�াপািটর বযবহাা কো সহেজই একিট মা� ইেমজ বযবহাা কো েকা্ বাটে্া েহাভাা ইেফ� েদয়া যায়।ি্েচা উদাহাণিট ি�প ে�াপািটর বযবহাা কো ৈতিাকৃত একিট ইন্াকিটভ বাটে্া। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC} a #clip{ position:absolute; top:50px; clip: rect(27 130 69 30);} a #clip:hover { position:absolute; top:50px; clip:auto;} </style> </head>
- 111. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 110 <body > <h3> This is an example of clip image.</h3> <a href="www.tutohost.com"><img id="clip"src="http://www.tutohost.com/bangla/css/images/pic/cl ip.png"/></a> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। অেটা ি�প েকা্ HTML উপাদাে্া স�ূণর অংশ �দশর্ কাাা জ� ি�প ে�াপািটর মা্ অেটা বযবহাা কাা হয়। এজ� Declaration কােত হয় clip:auto; । এিট েকা্ ইেমেজা বা েকা্ HTML উপাদাে্া িডফ� ি�প মা্। োকেটংগুলাা ি�প েকা্ HTML উপাদাে্া স�ূণর অংশ �দশর্ ্া কো িবেশষ েকা্ অংশ �দশর্ কাাা জ� ি�প ে�াপািটর মা্ োকেটংগুলাা ফােম েদয়া হয়। এজ� Declaration কােত হয় clip:rect(20px,100px,200px,30px); এর অনুরূপ। এখাে্ 20px �কাশ কো উপর েথেক কতটুক অংশ ি�প হেব, 100px �কাশ কো বাম েথেক ডাে্ 100px এর পোা বাঁকী অংশ ি�প হেব, 100px �কাশ কো উপর েথেক ি্েচ 200px এর পোা বাঁকী অংশ ি�প হেব, 30px �কাশ কো বাম িদেক শুরু েথেক 30px ি�প হেব।
- 112. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 111 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC} #auto{ position:absolute; top:50px; clip:auto;} #rect { position:absolute; top:350px; clip:rect(20px,200px,200px,20px);} </style> </head> <body > <h3> This is an example of auto clip image.</h3> <img id="auto"src="http://www.tutohost.com/bangla/css/images/pic/2 2cc.png"/> <h3 style=" position:absolute; top:320px;"> This is an example of rect clip image.</h3> <img id="rect" src="http://www.tutohost.com/bangla/css/images/pic/22cc.png"/ > </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 113. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 112 েজড ই্েড� (Z-index) পিজশ্ এবসিলউট (position:absolute) কো এবং top, bottom, left, and right ইতযািদ ে�াপািটর বযবহাা কো একািধক HTML উপাদা্েক পা�োা উপর ওভাালযাপ কাা যায়। একািধক HTML উপাদা্েক পা�োা উপর ওভাালযাপ কাা েকা্ উপাদা্িট কাা উপো অব�া্ কােব তা েজড ই্েড� (Z-index) ে�াপািটর বযবহাা কো ি্ধরাাণ কাা হয়। (Z-index) ে�াপািটরা মা্ িহেসেব আমাা auto এবং েকা্ সংখযা েযম্ 1,2,3,-1 �ভৃিত বযবহাা কাা হয়। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFC;} h2{color:#ffc;} h1{color:#F30;} div{ padding:10px; border:#000 1px solid; width:230px; height:230px; margin:30px;} #box1{background:#F00; position:absolute; left:20px; top:20px; z-index:1; } #box2{background:#F06; position:absolute; left:90px; top:90px; z-index:2; } #box3{background:#F3F; position:absolute; left:160px; top:160px; z-index:3; } #box4{background:#F9C; position:absolute; left:250px; top:250px;
- 114. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 113 z-index:4; } </style> </head> <body > <h1>This is an example of Z-index.</h1> <div id="box1"><h2>First box. Z-index 1</h2></div> <div id="box2"><h2>Second box. Z-index 2</h2></div> <div id="box3"><h2>Third box. Z-index 3</h2></div> <div id="box4"><h2>Forth box. Z-index 4</h2></div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 115. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 114 ে�ািটং (Floating) ওেয়ব েপেজা েল-আউট ৈতিাা ে�ে� েপেজা িবিভ� উপাদা্েক ডা্িদেক এবং বামিদেক াাখাা �েয়াজ্ পো। এে�ে� �ট (Float) বযবহাা কাা হয়। েকা্ উপাদা্েক বামিদেক �াপ্ কাাা জ� Declaration কােত হয় float:left; আর বামিদেক �াপ্ কাাা জ� Declaration কােত হয় float:right; । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD; font-family:Arial, Helvetica, sans-serif; font-size:13px; text-align:justify;} div{width:180px; border:#F5D349 10px solid; padding:8px; background:#FEEFB3; outline:#F60 1px solid;} #first{float:left;} #second{float:right;} </style> </head> <body > <div id="first"> <h2 style="color:#C33;">Float Left <br />First Box.</h2> <hr> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> <div id="second"> <h2 style="color:#C33;">Float Right<br /> Second Box.</h2>
- 116. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 115 <hr> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। বাম িদেক �ট(float:left) ওেয়ব েপেজা েল-আউট ৈতিাা ে�ে� অে্ক সময় সাইডবাােক মূল কেনটনট বে�া িঠক বামিদেক াাখাা �েয়াজ্ পো।এে�ে� বাম িদেক �ট কােত হয়। �থেম সাইডবাােক োেখ উভয় ব�েক বাম িদেক �ট কােত হয়। এজ� উভয় বে�া জ� Declaration কােত হয় float:left;। �থেম সাইডবাােক াাখাা জ� সাইডবাা এর অব�া্ হেব সবরবােম।
- 117. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 116 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD; font-family:Arial, Helvetica, sans-serif; font-size:13px; text-align:justify;} div{width:180px; height:310px; margin:3px; border:#F99 10px solid; padding:8px; background:#ddEFB3; outline:#F60 1px solid;} #first{float:left;} #second{float:left;} </style> </head> <body > <div id="first"> <h2 style="color:#C33;">Sidebar</h2> <hr> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Wordpress</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">Tutorials</a></li> </ul> </div> <div id="second"> <h2 style="color:#C33;">Main Content</h2> <hr> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html>
- 118. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 117 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ডা্ িদেক �ট(float:right) ওেয়ব েপেজা েল-আউট ৈতিাা ে�ে� অে্ক সময় সাইডবাােক মূল কেনটনট বে�া িঠক ডা্িদেক াাখাা �েয়াজ্ পো। িবেশষ কো ওয়াডরে�স এর জ� েটমে�ট িডজাইে্া ে�ে� সাধাাণত সাইডবাােক ডা্ িদেক াাখা হয়। এে�ে� ডা্ িদেক �ট কােত হয়। �থেম সাইডবাােক োেখ উভয় ব�েক ডা্ িদেক �ট কােত হয়, এজ� উভয় বে�া জ� Declaration কােত হয় float:right;। �থেম সাইডবাােক াাখাা জ� সাইডবাা এর অব�া্ হেব সবরডাে্।
- 119. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 118 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD; font-family:Arial, Helvetica, sans-serif; font-size:13px; text-align:justify;} div{width:180px; height:310px; margin:3px; border:#099 10px solid; padding:8px; background:#C9F; outline:#F60 1px solid;} #first{float:right;} #second{float:right;} </style> </head> <body > <div id="first"> <h2 style="color:#C33;">Sidebar </h2> <hr> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Wordpress</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">Tutorials</a></li> </ul> </div> <div id="second"> <h2 style="color:#033;">Main Content</h2> <hr> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html>
- 120. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 119 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। �িটং �াাা পযাাা�ােফ ইেমেজা অব�া্ ি্েদরশ ে�ািটং �াাা েয ওেয়ব েপেজা div তথা আয়তাকাা খনড সমূহ এর অব�া ি্ধরাাণ কাা হয় এম্টা ্য়, আমাা যখন ওেয়ব েপেজ ক্েটনট যু� কিা তখন পযাাা�ােফা মেধয ডাে্ বা বােম ইেমজ বযবহাা কো থািক এে�ে�ও ে�ািটং বযবহাা কাা হেয় থােক।েকা্ ইেমজেক যিদ েকা্ পযাাা�ােফা সবরবােম �াপ্ কােত হয় তাহেল �থেম ইেমজ টযাগ াাখেত হেব এবং তাাপা পযাাা�াফ াাখেত হেব এবং শুধুমা� ইেমজ টযােগা �যাইল িসেট েলখেত হেব img{float:left;}।অনুরূপভােব েকা্ ইেমজেক পযাাা�ােফা সবরডাে্ �াপ্ কাাা �েয়াজ্ হয় তাহেলও �থেম ইেমজ োেখ ইেমজ টযােগা �যাইল িসেট েলখেত হেব img{float:right;}।
- 121. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 120 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD; font-family:Arial, Helvetica, sans-serif; font-size:13px; text-align:justify;} div{width:380px; margin:3px; border:#F99 10px solid; padding:8px; background:#ddEFB3; outline:#F60 1px solid;} img{width:150px; height:150px; margin:5px; border:#C30 1px solid;} #second{float:left;} #right{float:right;} #left{float:left;} </style> </head> <body > <div id="second"> <h2 style="color:#C33;">Main Content</h2> <hr> <img id="right" src="http://www.tutohost.com/bangla/css/images/pic/22hh.png" width="150px" height="150px" /> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p><br /> <img id="left" src="http://www.tutohost.com/bangla/css/images/pic/22hh.png" /> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html>
- 122. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 121 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। এলাই্ (Align) ওেয়ব েপেজা েল-আউট ৈতিাা ে�ে� এলাই্ অতয� গুরু�পূণর িবষয়। একটা ওেয়ব েপেজ ওেয়ব সাইটিট েকা্ িদেক �দিশরত হেব ডা্ িদেক বাম িদেক ্া মাঝখাে্ তা েযম্ এলাই্ কো ি্ধরাাণ কাা হয়, এছাড়া সাইডবাা ে্িভেগশ্ বাা, ফুটাা, েহডাা ইেমেজা পিজশ্ও এলাই্ কো ি্ধরাাণ কাা হয়। এলাই্ কাাা েবশ িকছু প�িত ােয়েছ। েযম্;
- 123. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 122 • মািজর্ ে�াপািটর �াাা এলাই্ • পিজশ্ ে�াপািটর �াাা এলাই্ • �ট ে�াপািটর �াাা এলাই্ অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#066; text-align:justify;} div{width:200px; height:250px; border:#099 10px solid; padding:8px; outline:#063 1px solid;} #rap1{background:#F99; margin-left:auto; margin-right:auto;} #rap2{background:#C9F; position:absolute; left:0px;} #rap3{background:#b0e0e6; float:right; right:0px;} </style> </head> <body > <div id="rap1"> <h2 style="color:#666;">Center align</h2> <hr> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> <br /> <div id="rap2"> <h2 style="color:#666;">Left align</h2> <hr> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.
- 124. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 123 We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> <div id="rap3"> <h2 style="color:#666;">Right align</h2> <hr> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 125. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 124 মািজর্ ে�াপািটর �াাা েসনটাা এলাই্ েয েকা্ ভাল একিট ওেয়ব েটমে�ট েখয়াল কােল েদখা যায়, েটমে�টিট �াউজাো �দশর্ কােল িঠক মাঝখাে্ �দশর্ কো, একটা ওেয়ব সাইটেক সু�া ভােব �দশরে্া জ� িবষয়িট খুবই গুরু�পূণর।মািজর্ ে�াপািটর বযবহাা কো েসনটাা এলাই্ কাাা মাধযেম এর গুরু�পূণর কাজিট কাা হয়।েকা্ ওেয়ব সাইটেক �াউজাো িঠক মাঝখাে্ �দশর্ কাাা জ� �যাইল িসেট উে�খ কােত হয়, margin-left:auto; margin- right:auto; । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#066; text-align:justify;} div{width:400px; height:280px; border:#099 10px solid; padding:8px; background:#b0e0e6; outline:#063 1px solid;} #rap{margin-left:auto; margin-right:auto;} </style> </head> <body > <div id="rap"> <h2 style="color:#666;">Main Content</h2> <hr> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html>
- 126. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 125 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। পিজশ্ �পািটর �াাা েলফট বা াাইট এলাই্ ওেয়ব সাইেটা েটমে�ট এর েসৗ�যর অে্কাংেশ ি্ভরা কো সাইডবাোা উপা। সাইডবাা িটেক সাধাাণত সাইেটা ক্েটনট এিায়াা ডা্িদেক অথবা বাম িদেক াাখা হয়। আবাা অে্ক ে�ে� একািধক সাইডবাাও বযবহাা কাা হয়।সাইডাা এলাইে্া িবষয়িটও তাই একজন ওেয়ব িডজাই্াােক েবশ সতকরতাা সােথ কােত হয়। এ কাজিট সিঠকভােব কাা ্া হেল িবিভ� �াউজাো বা িবিভ� সাইেজা মি্টো সাইেটা সাইডবাোা অব�া্ পিাবিতরত হেয় েযেত পাো।সাইড বাা
- 127. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 126 তথা েকা্ div উপাদা্েক পিজশ্ ে�াপািটর বযবহাা কো েলফট বা াাইট এলাই্ কাা যায়। েলফট এলাই্ কাাা জ� �যাইল িসেট উে�খ কােত হেব position:absolute; left:0px; অনুরূপভােব াাইট এলাই্ কাাা জ� �যাইল িসেট উে�খ কােত হেব position:absolute; right:0px;। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#066; text-align:justify;} div{width:400px; height:310px; border:#099 10px solid; padding:8px; outline:#0631px solid;} #rap{background:#C9F; position:absolute; left:0px;} </style> </head> <body > <div id="rap"> <h2 style="color:#666;">Main Content</h2> <hr> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 128. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 127 �ট ে�াপািটর �াাা েলফট বা াাইট এলাই্ �ট ে�াপািটর বযবহাা কোও সাইড বাা তথা েকা্ div উপাদা্েক েলফট বা াাইট এলাই্ কাা যায়। েলফট এলাই্ কাাা জ� �যাইল িসেট উে�খ কােত হেব float:left; left:0px; অনুরূপভােব াাইট এলাই্ কাাা জ� �যাইল িসেট উে�খ কােত হেব float:right; right:0px;। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD; font-family:Arial, Helvetica, sans-serif;
- 129. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 128 font-size:13px; color:#066; text-align:justify;} div{width:400px; height:310px; border:#099 10px solid; padding:8px; outline:#0631px solid;} #rap{background:#b0e0e6; float:right; right:0px;} </style> </head> <body > <div id="rap"> <h2 style="color:#666;">Main Content</h2> <hr> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 130. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 129 কাসরাা ইেফ� (cursor effect) িস এস এস বযবহাা কো সহেজই িবিভ� উপাদাে্া জ� িবিভ� ধােণা মাউস এর কাসরাা ইেফ� ৈতিা কাা যায়। তাহেল মাউসিটেক ঐ উপাদাে্া উপর ি্েয় েগেল মাউস পেয়নটাোা আকৃিত পিাবিতরত হেব।এজ� �যাইল শীেট Declaration কােত হেব cursor:move এর অনুরূপ। এখাে্ move এর পিাবেতর auto, crosshair, e-resize, move,default,help,n-resize,ne-resize,nw- resize,pointer, wait ,progress,s-resize, se- resize,sw-resize, w-resize ,text বযবহাা কাা যােব। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD; font-family:Arial, Helvetica, sans-serif; color:#066;} </style> </head> <body > <h2 style="cursor:auto">Touche me and see auto mouse effect</h2> <h2 style="cursor:help">Touche me and see help mouse effect</h2> <h2 style="cursor:s-resize">Touche me and see s-resize mouse effect</h2> <h2 style="cursor:e-resize">Touche me and see e-resize mouse effect</h2> <h2 style="cursor:progress">Touche me and see progress mouse effect</h2> <h2 style="cursor:move">Touche me and see move mouse effect</h2> <h2 style="cursor:crosshair">Touche me and see crosshair mouse effect</h2> <h2 style="cursor:default">Touche me and see default mouse effect</h2> <h2 style="cursor:wait">Touche me and see wait mouse effect</h2> <h2 style="cursor:n-resize">Touche me and see n-resize mouse effect</h2> <h2 style="cursor:nw-resize">Touche me and see nw-resize
- 131. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 130 mouse effect</h2> <h2 style="cursor:ne-resize">Touche me and see ne-resize mouse effect</h2> <h2 style="cursor:pointer">Touche me and see pointer mouse effect</h2> <h2 style="cursor:se-resize">Touche me and see se-resize mouse effect</h2> <h2 style="cursor:sw-resize">Touche me and see sw- resize</h2> <h2 style="cursor:text">Touche me and see text mouse effect</h2> <h2 style="cursor:w-resize">Touche me and see w-resize mouse effect</h2> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। এবং �িতটা লাইে্া উপা মাউস াাখেল িভ� িভ� আকাা ধাাণ কােব।
- 132. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 131 চাই� িসেল�া (child selector ) একিট ভাল িস এস এস �যাইল শীট ৈতিাা জ� চাই� িসেল� িবষয়িট স�েকর ে�া�ামাােক অব�ই ভাল ধাাণা থাকেত হেব।আমাা HTML এএকিট টযােগা মেধযই অ� আোা িকছু টযাগ বযবহাা কো থািক েযম্, <div><h2></h2><p></p></div> এে�ে� �যাইল শীেট div এর চাই� িসেল�া হেব p এবং h2 । �যাইল শীেট p এর জ� চাই� িসেল�া িলখেত হেব div>p । তাহেল div>p এর জ� �যাইল ি্ধরাাণ কাা হেল শুধুমা� p এর জ�ই �যাইল ি্ধরািাত হেব। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} div>p{font-family:Arial, Helvetica, sans-serif; color:#066; background:#FCC; border:#F39 5px solid; padding:10px;} </style> </head> <body > <div> <h2>www.tutohost.com</h2> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 133. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 132 শুধুমা� p এর জ�ই �যাইল ি্ধরািাত হেয়েছ h2 এর জ� েকা্ পিাবতর্ হয় ি্। িসউেডা �াস (Psudo Class) িবিভ� উপাদাে্া অব�া্, অব�া ইতযািদ িসেল�া �াাা িসেল� কো, িবেশষ ইেফ� েদয়াা জ� িসউেডা �াস বযবহাা কাা হয়।িসউেডা �াস এর িস্টযা� হে� selector:pseudo-class {property:value;} । িস এস এস �াস িসেল�াও িসউেডা �ােসা সােথ বযবহাা কাা যায়, এে�ে� িস্টযা� হেব selector.class:pseudo-class {property:value;} । ে্িভেগশ্ বাোা িবিভ� েমনু িবিভ� অব�ায় েকম্ েদখােব তা িসউেডা �াস �াাা ি্ধরাাণ কাা হয়। এছাড়া িবিভ� চাই� িসেল�োা ফা� চাই� িসেল� কাা সহ আোা অে্ক ধােণা কাজ িসউেডা �াস �াাা কাা যায়। িবিভ� ধােণা িসউেডা �াস • এংকা িসউেডা �াস (Anchor Pseudo class) • ফা� চাই� িসউেডা �াস (First child Pseudo-class) • ফলযা�ুেয়জ িসউেডা �াস (lang Pseudo-class)
- 134. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 133 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} p:first-child{ font-family:Arial, Helvetica, sans-serif; color:#066; background:#FCC; border:#F39 5px solid; padding:10px;} </style> </head> <body > <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> <h2>www.tutohost.com</h2> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 135. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 134 এংকা িসউেডা �াস (Anchor Pseudo class) সাধাাণত HTML এ িলংক ৈতিাা জ� এংকা টযাগ(<a></a>) বযবহাা কাা হয়। িস এস এস বযবহাা কো �যাইল ৈতিাা জ� �যাইল শীেট িসেল�া িহেসেব a বযবহাা কাা হয়। িক� একিট িলংেকা চাািট িভ� অব�া হেত পাো যা শুধু মা� িসেল�া িহেসেব a বযবহাা কো ি্েদরশ কাা যায় ্া। এজ� এংকা িসউেডা �াস বযবহাা কাা হয়; েযম্ a:link , a:visited, a:hover এবং a:active । • a:link িসেল�া ি্েদরশ কো �থমবাা বযবহাা ্া কাা পযর� িলংকিট িকভােব �দিশরত হেব। • a:visited িসেল�া ি্েদরশ কো িলংকিট একবা একািধক বাা বযবহাা কাা হেল এবং িলংেকা উপর মাউস ্া াাখেল িলংকিট িকভােব �দিশরত হেব। • a:hover িসেল�া ি্েদরশ কো িলংকিট বযবহাা কাা েহাক বা ্া েহাক, িলংেকা উপর মাউস ্া াাখেল িলংকিট িকভােব �দিশরত হেব। • a:active িসেল�া ি্েদরশ কো িলংকিটেত মাউস ি�ক কাাা মূহেতর িলংকিট িকভােব �দিশরত হেব। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#090} a:link {color:#F00;} a:visited {color:#303} a:hover {color: #fff;} a:active {color:#960;} #nav ul li {float:left; list-style:none;} #nav ul li a {padding:10px; display:block; text-decoration:none;} #nav ul li a:link{background:#FCC;} #nav ul li a:hover{background:#F60;} #nav ul li a:hover { background: #639} #nav ul li a:active { background:#39F;} </style> </head> <body > <a href="www.tutohost.com"><h1>This is a Link.</h1></a><br> <div id="nav">
- 136. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 135 <ul> <li><a href="www.tutohost.com"><h2>HTML</h2></a></li> <li><a href="www.tutohost.com"><h2>CSS </h2></a></li> <li><a href="www.tutohost.com"><h2>PHP</h2></a></li> <li><a href="www.tutohost.com"><h2>Wordpress</h2></a></li> </ul> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ফা� চাই� িসউেডা �াস (First child Pseudo-class) একটা িসেল�োা আনডাো অে্কগুেলা একই ইিলেমনট এর চাই� িসেল�া থাকেত পাো। েযম্ <body><p></p><h2></h2><p></p></body> এখাে্ body এর মেধয দুইিট p চাই� িহেসেব আেছ। এখন যিদ শুধুমা� �থম p এর জ� �যাইল ৈতিা কােত চাওয়া হয় তাহেল p এর ফা� চাই� িসউেডা �াস িসেল�া বযবহাা কােত হেব; েযম্ p:first-child ।
- 137. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 136 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} p:first-child{ font-family:Arial, Helvetica, sans-serif; color:#066; background:#FCC; border:#F39 5px solid; padding:10px;} </style> </head> <body > <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> <h2>www.tutohost.com</h2> <p> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 138. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 137 শুধুমা� �থম p েত �যাইল যু� হেয়েছ। ি�তীয় p এর েকা্ পিাবতর্ হয় ি্। লযা�ুেয়জ িসউেডা �াস (lang Pseudo-class) েকা্ িবেশষ লযা�ুেয়জ বা ভাষায় িলিখত েকা্ লাই্ েক িবেশষ েকা্ ি্য়েম বা িবেশষ উপােয় �দশরে্া জ� লযা�ুেয়জ িসউেডা �াস বযবহাা কাা হয়। েযম্ “এই েলখািট বাংলা ভাষায় েলখা।তাই এখাে্ েকােটশে্ দুিট �াা িচ� েদখা যােব।” েলখািটা ডাবল েকােটশ্ (**) িচ� �াাা পিাবিতরত হেব।এজ� �থেম HTML এেলখািটেক এর মেধয াাখােত হেব।q:lang(bn) লযা�ুেয়জ িসউেডা �াস �াাা �যাইল শীেট িসেল� কো �যাইল ি্ধরাাণ কো িদেত হেব। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} q:lang(bn) { quotes:"**" "**"; color:#C06; font-size:20px; } </style> </head> <body > <p>This is a paragaph.<q lang="bn">এই েলখািট বাংলা ভাষায় েলখা।তাই এখাে্ েকােটশে্ দুিট �াা িচ� েদখা যােব।</q> This is a paragaph.</p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 139. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 138 িশোা্ােম িসউেডা �ােসা বযবহাা েকা্ একিট ওেয়ব েপেজ অে্কগুেলা আিটরেকল থাকেত পাো এবং �েতযকিট আিটরেকেলা একিট কো মূল িশোা্াম থাকেত পাো। এে�ে� শুধুমা� একটা মূল িশোা্ােমা জ� �যাইল ৈতিা কােলই সব গুেলাা জ� �যাইল ৈতিা হেয় যােব এজ� িসউেডা �াস বযবহাা কাা হয়। উদাহাণ �রূপ আিটরেকল গুেলা <p></p> টযােগা মেধয াাখা হল।এখ্ মূল িশোা্াম ৈতিাা জ� <b></b>বযবহাা কাা হল।যিদ b িসেল�া �াাা �যাইল ৈতিা কাা হয় তাহেল, পযাা�ােফা মেধয আোা <b></b> থাকেত পাো তাহেল তােদাও �যাইল ৈতিা হেয় যােব।তাই শুধুমা� িশোা্াম তথা েযেকা্ <p></p> এর �থম <b></b> এর জ� �যাইল ৈতিা কাাা জ� িসেল�া ি্ধরাাণ কােত হেব p > b:first-child । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} p{font-family:Arial, Helvetica, sans-serif; background:#9CF; border:#F39 5px solid; padding:10px;} p > b:first-child {color:red; font-size:28px;} </style> </head> <body > <p> <b>www.tutohost.com</b><br/ ><br/ > We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. </p> <p> <b>www.tutohost.com</b><br/ ><br/ > We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. </p>
- 140. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 139 <p> <b>www.tutohost.com</b><br/ ><br/ > We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 141. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 140 সাধাাণ িশোা্ােম িসউেডা �ােসা বযবহাা েকা্ একিট ওেয়ব েপেজ অে্কগুেলা আিটরেকল থাকেত পাো এবং �েতযকিট আিটরেকেলা একিট কো মূল িশোা্াম থাকেত পাো।আিটরেকল গুেলা <p></p> টযােগা মাধযেম ৈতিা। িচ�া কাা হল েয েপেজা শুরুেত একটা <p></p> টযাগ ি্েয় সকল িশোা্াম গুেলা �দশর্ কাা হেব।িশোা্াম গুেলা <b></b> �াাা ৈতিা ।তাহেল �থম <p></p> এর সবগুেলা <b></b> এর জ� �যাইল ৈতিা কােত হেব।এজ� �যাইলশীেট িসেল�া িহেসেব েলখেত হেব p:first-child b। েপেজ আোা অে্ক <p></p> এবং এর মেধয <b></b> থাকেত পাো েসগুেলাা জ� েকা্ �যাইল ৈতিা হেব ্া। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} p{font-family:Arial, Helvetica, sans-serif; background:#FCF; font-size:12px; border:#F39 5px solid; padding:10px;} p > b:first-child {color:#366; font-size:16px;} p:first-child b {color:#F00; font-size:20px;} </style> </head> <body > <p> <b>First Heading</b><br/ ><br/ > <b>Second Heading</b><br/ ><br/ > <b>Third Heading</b><br/ ><br/ > </p> <p> <b>First Heading</b><br/ ><br/ > We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. </p> <p> <b>Second Heading</b><br/ ><br/ > We are bangladeshi <b>Hostgator</b> hosting provider. The
- 142. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 141 world wide technical and support team is working for your best movement. </p> <p> <b>Third Heading</b><br/ ><br/ > We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 143. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 142 িসউেডা ইিলেমনট (Psudo Element) িসউেডা �ােসা মতই িবিভ� উপাদাে্া অব�া্, অব�া ইতযািদ িসেল�া �াাা িসেল� কো, িবেশষ ইেফ� েদয়াা জ� িসউেডা ইিলেমনট বযবহাা কাা হয়।িসউেডা ইিলেমনট এর িস্টযা� হে� selector:pseudo-element {property:value;} । িস এস এস �াস িসেল�াও িসউেডা ইিলেমনট এর সােথ বযবহাা কাা যায়, এে�ে� িস্টযা� হেব selector.class:pseudo-element {property:value;} । েকা্ পযাাা�ােফা �থম অ�া বা �থম লাই্ েকম্ েদখােব তা িসউেডা ইিলেমনট �াাা ি্ধরাাণ কাা হয়। এছাড়া েকা্ পযাাা�াফ বা েহিডং এর শুরুেত েকা্ ইেমজ, বা িবেশষ েকা্ েট�ট যু� কাা সহ আোা অে্ক ধােণা কাজ িসউেডা ইিলেমনট �াাা কাা যায়। িবিভ� ধােণা িসউেডা ইিলেমনট • �থম অ�া িসউেডা ইিলেমনট-(First letter Pseudoelement) • �থম লাই্ িসউেডা ইিলেমনট-(First first line Pseudoelement) • িবেফাা িসউেডা ইিলেমনট (Before Pseudo element) • আফটাা িসউেডা ইিলেমনট (After Pseudo element) অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} p{font-family:Arial, Helvetica, sans-serif; background:#9CF; border:#F39 5px solid; padding:10px;} p:after{ content:"Thank You"; background-color:#900; color:#FCC; font-weight:bold;} h2:after {content:url(http://tutohost.com/images/services- icons/green.png);} h2:first-letter {color:#ff0000; font-size:70px;} </style>
- 144. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 143 </head> <body > <h2>WWW.TUTOHOST.COM</h2> <p> www.tutohost.com.We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। �থম অ�া িসউেডা ইিলেমনট-(First letter Pseudoelement) েকা্ পযাাা�ােফা বা েহিডং এর শুরুেত �থম অ�া অ�া� অ�া েথেক একটু িভ� আকাা, আকৃিত, াং এবং িডজাইে্ �দশর্ কাাা জ� ফা� েলটাা িসউেডা ইিলেমনট বযবহাা কাা হয়।এজ� ফা� েলটাা িসউেডা ইিলেমনট িসেল�া বযবহাা কােত হেব; p:first-letter এর অনুরূপ।p এর �াে্ h1,h2,h3 ইতযািদ হেত পাো।
- 145. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 144 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} p{font-family:Arial, Helvetica, sans-serif; background:#9CF; border:#F39 5px solid; padding:10px;} p:first-letter {color:#ff0000; font-size:70px;} </style> </head> <body > <p> <b>www.tutohost.com</b><br/ ><br/ > We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 146. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 145 �থম লাই্ িসউেডা ইিলেমনট-(First first line Pseudoelement) েকা্ পযাাা�ােফা শুরুেত �থম লাই্ অ�া� লাই্ েথেক একটু িভ� আকাা, আকৃিত, াং এবং িডজাইে্ �দশর্ কাাা জ� ফা� লাই্ িসউেডা ইিলেমনট বযবহাা কাা হয়।এজ� ফা� লাই্ িসউেডা ইিলেমনট িসেল�া বযবহাা কােত হেব; p:first-line এর অনুরূপ। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} p{font-family:Arial, Helvetica, sans-serif; background:#9CF; border:#F39 5px solid; padding:10px;} p:first-line {color:#C60; font-size:30px;} </style> </head> <body > <p> www.tutohost.com.We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 147. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 146 িবেফাা িসউেডা ইিলেমনট (Before Pseudo element) অে্ক সময় েকা্ একটা েপেজা সকল পযাাা�ােফা অথবা েহিডং এর শুরুেতই একই েট�ট বা ইেমজ যু� কাাা �েয়াজ্ পো এে�ে� িবেফাা িসউেডা ইিলেমনট বযবহাা কাা হয়।এজ� িবেফাা িসউেডা ইিলেমনট এর িসেল�া বযবহাা কােত হেব; p:before । এবং �যাইল িসেট আপি্ েয েলখািট েদখােত চা্ তা content:"About Tutohost-"; এর অনুরূপভােব িড�াোশ্ কােত হেব। যিদ ইেমজ �দশর্ কােত চা্ তাহেল h2:before {content:url(http://tutohost.com/bangla/images/logo2.png );} এর অনুরূেপ �যাইল িসেট েলখেত হেব। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} p{font-family:Arial, Helvetica, sans-serif; background:#9CF; border:#F39 5px solid; padding:10px;} p:before{ content:"About Tutohost-"; background-color:#900; color:#FCC; font-weight:bold;} h2:before {content:url(http://tutohost.com/bangla/images/logo2.png);}</sty le> </head> <body > <h2>www.tutohost.com.</h2>
- 148. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 147 <p> www.tutohost.com.We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। আফটাা িসউেডা ইিলেমনট (After Pseudo element) অে্ক সময় েকা্ একটা েপেজা সকল পযাাা�ােফা অথবা েহিডং এর েশেষ একই েট�ট বা ইেমজ যু� কাাা �েয়াজ্ পো এে�ে� আফটাা িসউেডা ইিলেমনট বযবহাা কাা হয়।এজ� আফটাা িসউেডা ইিলেমনট এর িসেল�া বযবহাা কােত হেব; p:after । এবং �যাইল িসেট আপি্ েয েলখািট েদখােত চা্ তা content:"Thank You"; এর অনুরূপভােব িড�াোশ্ কােত হেব। যিদ ইেমজ �দশর্ কােত চা্ তাহেল h2:after {content:url(http://tutohost.com/images/services- icons/green.png);} অনুরূেপ �যাইল িসেট েলখেত হেব।
- 149. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 148 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> body{background:#FFD;} p{font-family:Arial, Helvetica, sans-serif; background:#9CF; border:#F39 5px solid; padding:10px;} p:after{ content:"Thank You"; background-color:#900; color:#FCC; font-weight:bold;} h2:after {content:url(http://tutohost.com/images/services- icons/green.png);} </style> </head> <body > <h2>WWW.TUTOHOST.COM</h2> <p> www.tutohost.com.We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. </p> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 150. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 149 ইেমজ গযালািা (Image Gallery) ইেমজ গযালািা হে� ওেয়ব েপেজ ইেমজ �দশরে্া একটা িবেশষ প�িত।ফযাশা্ িডজাই্, কমািশরয়াল ওেয়ব সাইট, ই্েটিায়া, এ�টিায়াা িডজাই্, েসলস েসনটাা, �ুল- কেলজ, অাগা্াইেজশ্, ওেয়ব েডভলপেমনট এবং িডজাই্ িভি�ক ওেয়ব সাইট সমূেহ তােদা ে�াডা�, �েজ�, িডজাই্, িবিভ� ইেভনট, অনু�া্ এর ছিব ওেয়ব গযালািাা মাধযেম �দশর্ কো থােক্।একসােথ অে্কগুেলা ছিব �দশরে্া মাধযম ও বলা েযেত পাো। সাধাাণত ওেয়ব গযালািােত েছাট েছাট সাইেজা অে্কগুোা ছিব �দশর্ কাা হয়। একজন বযবহাাকাাী েয ছিবটা ভালভােব েদখেত চায় েসই ছিবা উপর মাউস পেয়নটাা ি্েয় েগেল তা বড় আকাো �দশর্ কো। একটা সাধাাণ ইেমজ গযালািা
- 151. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 150 ছিবা অপািসিট (Opasity) আপািসিট �াাা ি্ধাাণ কাা হয় অবেজ�িট কতটা ��।সাধাাণত েকা্ ইেমেজা অপািসিট ি্য়�েণা মাধযেম ঐ ইেমেজা উপর িবিভ� ইেফ� েদয়া যায়।অপািসিট ি্য়�েণা জ� CSS এ ইনটাাে্ট এ�ে�াাাা-৯ সহ ্তু্ সকল বযাউজাোা জ� opacity ে�াপািটর বযবহৃত হয়। েযম্ opacity:0.5; । িক� ইনটাাে্ট এ�ে�াাাা-৮ এর জ� েলখেত হয় filter:alpha(opacity=50);। েকা্ ইেমেজ op আইিড যু� েকা্ ইেমেজা জ� যিদ �যাইল শীেট েলখা হয় #op{opacity:0.5; filter:alpha(opacity=50);} তাহেল তা 50% �� হেয় যােব এবং েপছে্া বযক�াউনড েদখা যােব। অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> body{background:#fff;} #op{opacity:0.5; filter:alpha(opacity=50);} </style> </head> <body> <h1>সাধাাণ ইেমজ</h1> <img src="http://www.tutohost.com/bangla/css/example/gallery/1.jpg" > <h1> অপািসিট 50% </h1> <img id="op" src="http://www.tutohost.com/bangla/css/example/gallery/1.jpg" > </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 152. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 151 ইেমজ স্�াইটস্ (Image Sprites) ওেয়ব সাইেটা জ� আকষরণীয় বাট্ ৈতিাা জ� এবং ে্িভেগশ্ বাা ৈতিাা ে�ে� ইেমজ স্�াইটস একটা ভােলা েকৗশল। এে�ে� অে্কগুেলা ইেমজ একে� কো একটা িসে�ল ইেমজ ৈতিা কাা হয়। এবং �েয়াজ্ অনুসাো ইেমেজা িবেশষ অংশ �দশর্ কাা হয়। সাধাাণত একটা বাট্ ৈতিাা ে�ে� দুইিট অব�া িবেবচ্া কাা হয়। একটা হে� সাধাাণ অব�া এবং বাটে্া উপর মাউস ি্েয় েগেল বাট্িট েকম্ েদখােব েস অব�া। দুইিট অব�াা জ�, সাধাাণত দুইিট ইেমজ বযবহাা কাা হয়। িক� ইেমজ স্�াইটস এর মাধযেম একটা ইেমজ বযবহাা কোই বাট্িট ৈতিা কাা যােব।
- 153. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 152 ইেমজ স্�াইটস্ েকৗশল বযবহাা কো ৈতিা একিট বাট্ <html> <head> <title> Gallery</title> <style> body{background:#FC9} #nav a{height:130px;display:block;} #nav li{list-style:none;} li#s1 { width:108px; height:106px; background:url('button.png') 0 0 ;} li#s1:hover { width:108px; height:106px; background:url('button.png') 0 115px;} </style> </head> <body> <h2>Full single image.</h2> <img src="button.png"> <h2>Button: Click on the button.</h2> <ul id="nav"> <li id="s1"><a href="#"></a></li> <li id="s2"><a href="#"></a></li> </ul> </body> </html> উপোা �েজ�িট ৈতিা কাাা জ� button ্ােম একটা েফা�াা ৈতিা কােত হেব। েফা�াািটা মেধয button.png ইেমজিট াাখেত হেব। button.png ইমজিট এখা্ েথেক ডাউ্েলাড করু্। button ্ােম ৈতিাকৃত েফা�াোা মেধযই একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 154. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 153 স�ূণর �েজ�িট এখা্ েথেক Zip আকাো ডাউ্েলাড করু্। ইেমজ স্�াইটস্ েক্ কাা হয় যখন েকা্ একটা ওেয়ব েপেজ অসংখয ইেমজ থােক তখন েপজিট �ভািবক ভােবই েলাড হেত েবিশ সময় লােগ । শুধু তাই ্য় �িত বাা �িতিট ইেমজ েলাড হওয়াা জ� সাভরাা িােকােয়� যায়, ফেল বাড়িত বযানডওয়াইডথ খরচ খরচ হয়। এে�ে� ইেমজ স্�াইটস এর মাধযেম অে্কগুেলা ইেমজ একে� কো একটা িসে�ল ইেমজ ৈতিা কােল মা� একবাা সাভরাা িােকােয়ে�ই কাজ হেয় যায়। ফলাফল িহেসেব বাড়িত বযানডওয়াইডথ খরচ ব� কাা স�ব হয়।
- 155. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 154 ইেমজ স্�াইটস্ এর মাধযেম �দিশরত চাািট আইকন <html> <head> <title> Gallery</title> <style> body{background:#FC9} #nav li{list-style:none;} li#s1 { width:130px; height:130px; background:url('f1.png') 0 0 ;} li#s2 { width:130px; height:130px; background:url('f1.png') -130px 0;} li#s3 { width:130px; height:118px; background:url('f1.png') -30px -130px ;} li#s4 { width:130px; height:115px; background:url('f1.png') -160px -130px;} </style> </head> <body> <h2>Full single image.</h2> <img src="f1.png"> <h2>Sprites image.</h2> <ul id="nav"> <li id="s1"></li> <li id="s2"></li> <li id="s3"></li> <li id="s4"></li> </ul> </body> </html> উপোা �েজ�িট ৈতিা কাাা জ� sprites ্ােম একটা েফা�াা ৈতিা কােত হেব । েফা�াািটা মেধয f1.png ইেমজিট াাখেত হেব। f1.png ইেমজিট এখা্ েথেক ডাউ্েলাড করু্। sprites ্ােম ৈতিাকৃত েফা�াোা মেধযই একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 156. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 155 ইেমজ স্�াইটস্ কাাা েকৗশল ইেমজ ইেমজ স্�াইটস েকৗশল িট বযবহাোা জ� েকা্ একিট HTML ইিলেমনট েযম্ <div> <li> <p> এর বযাক�াউনড ইেমজ িহেসেব এমন একিট িসে�ল ইেমজ বযবহাা কােত হেব েযখাে্ একটা েপেজা েমাটামিট সকল ইেমজ একটু দূা� োেখ অব�া্ কােব। েযম্, এখা্ েথেক ইেমজিট ডাউ্েলাড কো েদখু্। আইকন িহেসেব বযবহাা কাাা জ� িসে�ল ইেমেজা বযাক�াউনড ্া থাকেল ভাল হয় এবং .png ফােমেটা ইেমজ হেল ভাল হয়।ধো ে্য়া যাক চাািট আইকন এর
- 157. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 156 সম�েয় একটা িসে�ল ইেমজ ৈতিা কাা হল। এখন এগুেলােক আলাদা আলাদা ভােব পযরা�েম �দশর্ কােত হেব। এজ� HTML ইিলেমনট িহেসেব আন অডরাা িল� বযবহাা কাা েযেত পাো। েযম্ <ul id="nav"><li id="s1"></li><li id="s2"></li><li id="s3"></li><li id="s4"></li></ul> । ইেমজ স্�াইটস্ এর মাধযেম �দিশরত চাািট আইকন <html> <head> <title> Gallery</title> <style> body{background:#FC9} #nav li{list-style:none;} li#s1 { width:130px; height:130px; background:url('f1.png') 0 0 ;} li#s2 { width:130px; height:130px; background:url('f1.png') -130px 0;} li#s3 { width:130px; height:118px; background:url('f1.png') -30px -130px ;} li#s4 { width:130px; height:115px; background:url('f1.png') -160px -130px;} </style> </head> <body> <h2>Full single image.</h2> <img src="f1.png"> <h2>Sprites image.</h2> <ul id="nav"> <li id="s1"></li> <li id="s2"></li> <li id="s3"></li> <li id="s4"></li> </ul> </body> </html> উপোা �েজ�িট ৈতিা কাাা জ� sprites ্ােম একটা েফা�াা ৈতিা কােত হেব । েফা�াািটা মেধয f1.png ইেমজিট াাখেত হেব। f1.png ইেমজিট এখা্ েথেক ডাউ্েলাড করু্। sprites ্ােম ৈতিাকৃত েফা�াোা মেধযই একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 158. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 157 স�ূণর �েজ�িট এখা্ েথেক Zip আকাো ডাউ্েলাড করু্। �েজ� িবে�ষণ উপোা �েজ�িটেত চাা লাইে্া একটা আন অডরাা িল� ে্য়া হেয়েছ। �েতযকিট িলে� আইিড িসেল�া যু� কাা হেয়েছ। �যাইল শীেট <style>……… </style> এর মেধয #nav li{list- style:none;} যু� কােত হয় িল� এর িস�ল দূা কাাা জ�। li#s1{ width:130px; height:130px; background:url('f1.png') 0 0 ;} এর অনুরূপ যু� কােত হয় ইেমেজা কতটুক অংশ �দিশরত হেব তা ি্েদরশ কাাা জ�। এখাে্ width:130px; height:130px; �াাা ি্ধরািাত হেয়েছ ইেমেজা �দিশরত অংেশা উ�তা হেব 130px এবং চওড়া হেব 130px ।li#s4{width:130px; height:115px; background:url('f1.png') -160px -130px;} এখাে্ background:url('f1.png')
- 159. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 158 এর মাধযেম �েয়াজ্ীয় ইেমেজা িলংক যু� কাা হেয়েছ। -160px -130px; এর �থম -160px �াাা ি্েদরশ কোা হেয়েছ উপর েথেক 160px বােদ �দিশরত হেব, ি�তীয় -130px; �াাা ি্েদরশ কাা হেয়েছ বাম িদক েথেক 130px বােদ �দিশরত হেব। অথরাৎ চতুথর কণরাোা ইেমজিট �দিশরত হেব। ইেমজ স্�াইটস্ কাাা ি�তীয় েকৗশল ইেমজ স্�াইটস্ প�িত বযবহাোা জ� এমন একটা িসে�ল ইেমজ ৈতিা কাা হয় েযখাে্ িত্িট একই মােপা ইেমজ পযরায়�েম যথা�েম top, center এবং bottom পিজশে্ থােক তাহেল background- position ে�াপািটর বযবহাা কো ইেমজ স্�াইটস্ কাা যায়।েযম্ এখা্ েথেক ইেমজিট ডাউ্েলাড কো েদখু্। ইেমজিটেত িত্িট ইেমজ ােয়েছ; যিদ একিট েপেজ �থেম স�ূণর ইেমজিট �থেম তাাপা ৩য় ইেমজিট এবং তাাপা ১ম ইেমজিট এবং েশেষ ২য় ইেমজিট আলাদাভােব �দশর্ কাাা �েয়াজ্ হয় তাহেল HTML অংেশ ি্েচা েকাড অংশটুক যু� কােত হেব। <h1>Single image</h1> <div id="img"></div> <h1>3rd image</h1> <div id="img3"></div> <h1>1st image</h1> <div id="img1"></div> <h1>2nd image</h1> <div id="img2"></div> এখাে্ <h1></h1>বযবহাা কাা হেয়েছ ইেমজ স�িকরত তথয যু� কাা এবং ইেমজ গুেলােক েয্ আলাদাভােব সহেজই েবাঝা যায়। মূলত �িতটা <div></div> এর বযাক�াউনড িহেসেব ইেমজ সমূহ যু� কাা হেব এবং �দশর্ কাা হেব। এখাে্ �িতটা <div></div> েক আলাদাভােব িচি�ত কাাা জ� id িসেল�া যু� কাা হেয়েছ।
- 160. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 159 ইেমজ স্�াইটস্ এর মাধযেম �দিশরত চাািট ইেমজ <html> <head> <title> Gallery</title> <style> * { margin: 0; padding: 0; /* Reset */ } body{background:#9CC;} div {margin:20px;} h1{color:#C00;} #img {width: 207px; height: 253px; background-image: url(img.png);} #img1 {display: block; width: 207px; height: 70px; background-image: url(img.png);} #img2{display: block; width: 207px; height: 70px; background-image: url(img.png); background-position: center;} #img3{display: block; width: 207px; height: 70px; background-image: url(img.png); background-position: bottom;} </head> <body> <center> <h1>Single image</h1> <div id="img"></div> <h1>3rd image</h1> <div id="img3"></div> <h1>1st image</h1> <div id="img1"></div> <h1>2nd image</h1> <div id="img2"></div> </center> </body> </html> উপোা �েজ�িট ৈতিা কাাা জ� sprites ্ােম একটা েফা�াা ৈতিা কােত হেব । েফা�াািটা মেধয img.png ইেমজিট াাখেত হেব। img.png ইেমজিট এখা্ েথেক ডাউ্েলাড করু্। sprites ্ােম ৈতিাকৃত েফা�াোা মেধযই একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 161. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 160 �েজ� িবে�ষণ িস এস এস অংেশ #img {width: 207px; height: 253px; background-image: url(button.png);} উপোা েকাড �াাা স�ূণর ইেমেজা আকাা আকৃিত এবং বযাক�াউনড িহেসেব ইেমজ েলােকশ্ েদখাে্া হেয়েছ। #img1 {display: block; width: 207px; height: 70px; background-image: url(button.png);}
- 162. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 161 উপোা েকাড �াাা ১ম ইেমেজা আকাা আকৃিত এবং বযাক�াউনড িহেসেব ইেমজ েলােকশ্ েদখাে্া হেয়েছ। েযেহেত এই ইেমজিট সকেলা �থেম আেছ তাই background-position ে�াপািটর বযবহাা কাাা �েয়াজ্ হয়ি্।সুতাাং স�ূ্র button.png ইেমেজা �থম েথেক width: 207px; height: 70px; অংশ পযর� �দিশরত হেব। #img2{display: block; width: 207px; height: 70px; background-image: url(button.png); background-position: center;} উপোা েকাড �াাা ২য় ইেমেজা আকাা আকৃিত এবং বযাক�াউনড িহেসেব ইেমজ েলােকশ্ center েদখাে্া হেয়েছ। সুতাাং button.png ইেমেজা মােঝা 207px; height: 70px; অংশ পযর� �দিশরত হেব । #img3{display: block; width: 207px; height: 70px; background-image: url(button.png); background-position: bottom;} উপোা েকাড �াাা ২য় ইেমেজা আকাা আকৃিত এবং বযাক�াউনড িহেসেব ইেমজ েলােকশ্ bottom েদখাে্া হেয়েছ। সুতাাং button.png ইেমেজা েশেষা 207px; height: 70px; অংশ পযর� �দিশরত হেব । িমিডয়া টাইপ (Media Type) েকা্ একিট ওেয়ব েপজ িবিভ� িমিডয়ায় েকম্ েদখােব তা �াইল শীেট ি্ধরাাণ কাাা জ� িমিডয়া টাইপ বযবহাা কাা হয়। িমিডয়া সমূহ হে� ি�নট (print), ি�্ (screen), আউাাল (aural), ে�ইিল (braille), �ানডেহ� (handheld), �েজকশ্ (projection), িটিভ (tv) ইতযািদ।সাধাাণত িবিভ� িমিডয়ায় �দশরে্া ে�ে� েট�ট সমূেহা ফনট, ফনট সাইজ, লাই্-হাইট, েট�ট কালাা েকম্ হেব তা িমিডয়া টাইেপা মাধযেম ি্ধরাাণ কাা হয়। এজ� �যাইল শীেট @media print{ } এর অ্ূাপ যু� কো তাা মেধয �যাইল সমূহ েলখা হয়।
- 163. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 162 অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> @media screen { body{background: #FFC} .post{color:#066; font-family:Tahoma; text-align:justify;} .mar{color: #C03; font-size:36px} } @media print{ body{background:#fff;} .post{color:#000; font-family:Verdana, Geneva, sans-serif; text-align:justify;} } </style> </head> <body> <h1>www.tutohost.com</h1> <p class="post"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p> <p class="post"> We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care of more than 1000 bangladeshi websites and their huge information. </p> <marquee> <p class="mar"> 24 / 7 Support</p> </marquee> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 164. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 163 ে্িভেগশ্ (Navigation) েযেকা্ ওেয়ব সাইেটা জ�ই ে্িভেগশ্ একিট গুরু�পূণর িবষয়। কাাণ ঐওেয়ব সাইেট িক ধােণা তথয আেছ এবং েকা্ ধােণা তথয েকাথায় আেছ তা সহেজ খুঁেজ পাওয়াা অ�তম সহজ মাধযম হে� ে্িভেগশ্ বাা। মূলত ে্িভেগশ্ বাো একটা ওেয়ব সাইেটা সকল েপেজা িলংক িবেশষ প�িতেত, আকষরণীয়ভােব �দশর্ কাা হয়।আেগা িদে্ HTML েটিবেলা মাধযেম ে্িভেগশ্ বাা ৈতিা কাা হেতা, যা বযবহাা বা�ব এবং েদখেতও সু�া িছেলা ্া, িক� বতরমাে্ CSS বযবহাোা মাধযেম অে্ক সু�া ে্িভেগশ্ বাা ৈতিা কাা যায়।�কৃত পে� ে্িভেগশ্ বাা হে� কতগুেলা িলংক এর িল�।ে্িভেগশ্ বাা দুই ধােণা হেয় থােক। েযম্; • ভািটরকযাল ে্িভেগশ্ বাা (Vertical Navigation Bar) • হিাজনটাল ে্িভেগশ্ বাা (Horizontal Navigation Bar) অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> *{margin:auto; padding:auto;} body { background: #C99} #navigation{background:url(images/navigation.png) repeat-x; margin-top:20px; width:650px;
- 165. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 164 height:40px; font-family:Tahoma; font-size:14px;} #navigation ul { list-style-type:none; margin-left:auto;} #navigation ul li { float:left; background:url(images/border.png) no-repeat; background-position:right; } #navigation ul li a { padding:10px 28px 10px 20px ; display:block; text-decoration:none; text-align:center; color: #F69; font-weight:bold;} #navigation ul li a:hover { background: url(images/navov.png) repeat-x; padding:10px 27px 13px 19px ; margin:0px 1px 0px 1px; color:#F3C;} #home{background:url(images/border.png) left no-repeat;} </style> </head> <body > <div id="navigation"> <ul> <li><a href="#"> HOME</a></li> <li ><a href="#">ABOUT US</a></li> <li><a href="#">CONTACT US</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">FORAM</a></li></ul> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 166. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 165 ে্িভেগশ্ বাোা সাধাাণ গঠন ে্িভেগশ্ বাা হে� কতগুেলা িলংক এর িল�। তাই সাধাাণত ে্িভেগশ্ বাা ৈতিােত HTML এর <body></body> এর মেধয একটা <div></div> এবং তাা মেধয আ্অডরাা িল� <ul><li></li><li></li></ul> এর অনুরূেপ ৈতিা কােত হয়।ওেয়ব সাইেট ে্িভেগশ্ বাা �দশরে্া সময় বাটে্া মত কাজ কো। স�ূণর ে্িভেগশ্ বাািট েবশ িকছু বাটে্ িবভ� থােক। একিট ে্িভেগশ্ বাো কতিট বাট্ থাকেব তা মূলত <li></li> টযােগা সংখযাা উপর ি্ভরা কো।িঠক যতিট বাট্ �েয়াজ্ ততিট <li></li> টযাগ ি্েত হয়।িবিভ� েপেজা সােথ িলংক ৈতিাা জ� <li></li> টযােগা মেধয <a></a>টযাগ বযবহাা কাা হয়।তাহেল একটা ে্িভেগশ্ বাোা সাধাাণ গঠন হে� <div><ul><li><a></a></li><li><a></a></li></ul></div> এর অনুরূপ। েপেজ আোা অে্ক div উপাদা্ থাকেত পাো তাই ে্িভেগশ্ বাোা div েক আলাদাভােব েদখাে্াা জ� id যু� কােত হয়।েযম্ <div id="navigation">। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> </head> <body > <div id="navigation"> <ul> <li><a></a></li> <li><a></a></li>
- 167. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 166 </ul> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ে্িভেগশ্ বাোা বাটে্ িলংক যু� করন ে্িভেগশ্ বাোা েকা্ বাটে্ ি�ক কােলই ্তু্ একিট েপজ ওেপ্ হয়।এজন্য বাটে্া সােথ ঐ েপেজা িলংক ৈতিা কােত হয়।আা এ কাজিট কাাা জ� �িতটা <li></li> এর মেধয <a href="#">HOME</a>এর অনুরূপ এযাংকা টযাগ বযবহাা কাা হয়। href="#" এর েযখাে্ # িচ�িট ােয়েছ েসখাে্ েয েপেজা সােথ িলংক ৈতিা কােত হেব তাা এে�স েলখেত হেব। েযম্ href="www.tutohost.com" । অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> </head> <body > <div id="navigation"> <ul> <li><a href="#"> HOME</a></li> <li ><a href="www.tutohost.com">ABOUT US</a></li>
- 168. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 167 <li><a href="www.tutohost.com">CONTACT US</a></li> <li><a href="www.tutohost.com">BLOG</a></li> <li><a href="www.tutohost.com">FORAM</a></li></ul> </div> </body> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ে্িভেগশ্ বাোা div উপাদাে্া িডজাই্ ে্িভেগশ্ বাা এখন শুধুমা� িলংক �কােশা জ� বযবহাা হয় ্া। এটা ওেয়ব সাইেটা েসৗ�যরেক অে্কাংেশ বিধরত কো।ে্িভেগশ্ বাোা সাধাাণ গঠন <div id="navigation"><ul><li><a></a></li><li><a></a ></li></ul></div> এর অনুরূপ। �থেমই এজ� css �াাা div এর আইিড িসেল�া # navigation এর মাধযেম স�ূণর ে্িভেগশ্ বাোা width, height, font-family, font-size, background ইতযািদ ি্ধরাাণ কো েদয়া হয়।
- 169. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 168 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> *{margin:auto; padding:auto;} body { background: #C99} #navigation{background:url(images/navigation.png) repeat-x; margin-top:20px; width:600px; height:40px; font-family:Tahoma; font-size:14px;} </style> </head> <body > <div id="navigation"> <ul> <li><a href="#"> HOME</a></li> <li ><a href="#">ABOUT US</a></li> <li><a href="#">CONTACT US</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">FORAM</a></li></ul> </div> </body> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 170. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 169 ে্িভেগশ্ বাো ul,li উপাদাে্া িডজাই্ েযেহতু ে্িভেগশ্ বাো আ্অডরাা িল� বযবহাা কাা হয়। আন অডরাা িল� ৈতিা কােল �িতিট লাইে্া শুরুেত একটা বৃ�াকাা িস�ল যু� হয়, যা ে্িভেগশ্ বাো �েয়াজ্ ে্ই।ে্িভেগশ্ বাোা সাধাাণ গঠন <div id="navigation"><ul><li><a></a></li><li><a></a ></li></ul></div> তাই এই বৃ�াকাা িস�ল দূা কাাা জ� �যাইল শীেট েলখেত হেব, #navigation ul {list- style-type:none;}। যিদ হিাজনটাল ে্িভেগশ্ বাা ৈতিা কােত হয় তাহেল �যাইল শীেট েলখেত হেব,#navigation ul li {float:left; }। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> *{margin:auto; padding:auto;} body { background: #C99} #navigation{background:url(images/navigation.png) repeat-x; margin-top:20px; width:600px; height:40px; font-family:Tahoma; font-size:14px;} #navigation ul { list-style-type:none;} #navigation ul li { float:left; background:url(images/border.png) no-repeat; background-position:right;} </style> </head> <body > <div id="navigation"> <ul> <li><a href="#"> HOME</a></li> <li ><a href="#">ABOUT US</a></li> <li><a href="#">CONTACT US</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">FORAM</a></li></ul> </div> </body> </body> </html>
- 171. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 170 একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ে্িভেগশ্ বাো a উপাদাে্া িডজাই্ েযেহেতু ে্িভেগশ্ বাা কতগুেলা িলংক এর সমি�, তাই এর িডজাই্ প�িতও মূলত এংকা টযাগ ি্ভরা।সাধাাণত েকা্ েট�ট �াাা িলংক কােল েট�টিটা ি্েচ একটা আনডাা লাই্ আেস।ে্িভেগশ্ বাোা েমনুেত েসটাা �েয়াজ্ ে্ই। তাই এই আনডাা লাই্েক দূা কাাা জ� �যাইল শীেট েলখেত হেব,#navigation ul li a {text- decoration:none; } এছাড়া padding, color, font- weight, text-align,ইতযািদ ে�াপািটর ি্ধরাাণ কো েমনুা িডজাই্ ৈতিা কাা হয়। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> *{margin:auto; padding:auto;} body { background: #C99} #navigation{background:url(images/navigation.png) repeat-x;
- 172. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 171 margin-top:20px; width:600px; height:40px; font-family:Tahoma; font-size:14px;} #navigation ul { list-style-type:none;} #navigation ul li { float:left; background:url(images/border.png) no-repeat; background-position:right;} #navigation ul li a { padding:10px 28px 10px 20px ; display:block; text-decoration:none; text-align:center; color: #F69; font-weight:bold;} </style> </head> <body > <div id="navigation"> <ul> <li><a href="#"> HOME</a></li> <li ><a href="#">ABOUT US</a></li> <li><a href="#">CONTACT US</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">FORAM</a></li></ul> </div> </body> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 173. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 172 ে্িভেগশ্ বাোা মাউস ইেফ� বতরমাে্ �ায় সকল ে্িভেগশ্বাোই কমেবিশ মাউস ইেফ� থােক। সাধাাণত আমাা েকা্ ে্িভেগশ্বাোা উপর মাউস ি্েয় েগেল বাটে্া িডজাই্,কালাা, েমনুা েট�ট কালাা, অে্ক সময় েট�ট এর সাইজ, ে�িডেয়নট ইতযািদ পিাবতর্ হেত েদিখ। এটা কাাা জ� এংকা টযােগা a:hover িসউেডা িসেল�ািট বযবহাা কাা হয়। background,color,padding, color, font- weightইতযািদ ে�াপািটর ি্ধরাাণ কো েমনুা মাউস েহাবাা ইেফ� িডজাই্ ৈতিা কাা হয়। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> *{margin:auto; padding:auto;} body { background: #C99} #navigation{background:url(images/navigation.png) repeat-x; margin-top:20px; width:600px; height:40px; font-family:Tahoma; font-size:14px;} #navigation ul { list-style-type:none;} #navigation ul li { float:left; background:url(images/border.png) no-repeat; background-position:right; } #navigation ul li a { padding:10px 28px 10px 20px ; display:block; text-decoration:none; text-align:center; color: #F69; font-weight:bold;} #navigation ul li a:hover { background: url(images/navov.png) repeat-x; padding:10px 27px 13px 19px ; margin:0px 1px 0px 1px; color:#F3C;} </style> </head> <body >
- 174. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 173 <div id="navigation"> <ul> <li><a href="#"> HOME</a></li> <li ><a href="#">ABOUT US</a></li> <li><a href="#">CONTACT US</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">FORAM</a></li></ul> </div> </body> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ে্িভেগশ্ বাো ইেমজ িািপেটশ্ ে্িভেগশ্ বাোা সাইজ একটা গুরু�পূণর িবষয়। যিদ ে্িভেগশ্ বাোা িডজাই্ সু�া কােত িগেয় সাইজ বৃি� কো েফলা হয়, তাহেল েয েপেজ ে্িভেগশ্ বাািট বযবহাা কাা হেব তাা সাইজ বৃি� পােব।আা ফলাফল িহেসেব েপজিট �দশর্ হেত েবশ সময় ে্েব, যা আমােদা কাংি�ত ্য়।আমােদা �তযাশা হে� আমাা িডজাই্ও
- 175. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 174 সু�া করব িক� েপেজা সাইজ বৃি� করব ্া।http://tutohost.com/bangla/css/26g.php েত েয ে্িভেগশ্ বাািট ৈতিা কাা হেয়েছ, এখাে্ স�ূণর ে্িভেগশ্ বাোা বযাক�াউেনড background:url(images/navigation.png) repeat-x; এর অনুরূপ 1px এর ইেমজ িািপড কো বযবহাা কাা হেয়েছ। repeat-x �াাা ি্েদরশ কাা হয় েয 1px এর ইেমজিট x অ� বাাবা বাাবাা width অনুসাো িািপড হেব।অথরাৎ স�ূণর ে্িভেগশ্ বাা আমাা 1px এর 1Kb এর একটা ইেমজ িািপট কো ৈতিা কোিছ।ইেমজ িািপেটশ্ ্া কােল যাা সাইজ হেত পাাত 500Kb-600Kb। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> *{margin:auto; padding:auto;} body { background: #C99} #navigation{background:url(images/navigation.png) repeat-x; margin-top:20px; width:600px; height:40px; font-family:Tahoma; font-size:14px;} #navigation ul { list-style-type:none;} #navigation ul li { float:left; background:url(images/border.png) no-repeat; background-position:right; } #navigation ul li a { padding:10px 28px 10px 20px ; display:block; text-decoration:none; text-align:center; color: #F69; font-weight:bold;} #navigation ul li a:hover { background: url(images/navov.png) repeat-x; padding:10px 27px 13px 19px ; margin:0px 1px 0px 1px; color:#F3C;} </style> </head> <body > <div id="navigation"> <ul> <li><a href="#"> HOME</a></li> <li ><a href="#">ABOUT US</a></li> <li><a href="#">CONTACT US</a></li> <li><a href="#">BLOG</a></li>
- 176. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 175 <li><a href="#">FORAM</a></li></ul> </div> </body> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। ভািটরকযাল ে্িভেগশ্ বাা (Vertical Navigation Bar) েয সকল ে্িভেগশ্ বাা ভািটরকযালী অব�া্ কো তােদােক ভািটরকযাল ে্িভেগশ্ বাা বলা হয়। সধাাণত সাইড বাা এবং ফুটাো এ ধােণা ে্িভেগশ্ বাা বযবহাা কাা হয়।এ ধােণা ে্িভেগশ্ বাা ৈতিা কােত সাধাাণত এংকা a িসেল�োা display: block; অথরাৎ display ে�াপািটরা মা্ block বযবহাা কাা হয়। এর ফেল শুধু মা� এংকা �াাা েয েট�িটেত িলংক যু� কাা হেয়েছ শুধুমা� েসই েট�িটই ্য় বাং পুোা বযক�াউন্ড সহ এিায়া ি�েকবল হয় এবং width ে�াপািটর বযবহাা কো বযক�াউনড এিায়া কতটুক হেব তা ি্ধরাাণ কো েদয়া যায়।
- 177. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 176 অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> *{margin:auto; padding:auto;} body { background: #C99} #navigation {margin-top:50px;} #navigation li {list-style:none;} #navigation a {background:#04A3B5; border:1px solid #165A69; color:#eee; font-family:Tahoma, Geneva, sans-serif; font-size:20px; padding:5px; display: block; width: 150px; text-decoration:none; padding-left: 10px;} #navigation a:hover { background:#a2b3a1; color:#C09;} </style> </head> <body > <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Products</a></li> </ul> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 178. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 177 হিাজনটাল ে্িভেগশ্ বাা (Horizontal Navigation Bar) েয সকল ে্িভেগশ্ বাা হিাজনটালী অব�া্ কো তােদােক হিাজনটাল ে্িভেগশ্ বাা বলা হয়। সধাাণত েকা্ ওেয়ব সাইেটা েমই্ েমনু িহেসেব এধােণা ে্িভেগশ্ বাা বযবহাা কাা হয়।এ ধােণা ে্িভেগশ্ বাা ৈতিা কােত সাধাাণত িল� li িসেল�োা display:inline; অথরাৎ display ে�াপািটরা মা্ inline বযবহাা কাা হয়। আবাা িল� li িসেল�োা float:left; বযবহাা কো এংকা a িসেল�োা display: block; বযবহাা কোও হিাজনটাল ে্িভেগশ্ বাা ৈতিা কাা যায়। অনুশীল্ �েজ� <html> <head> <title> www.tutohost.com</title> <style> *{margin:auto; padding:auto;} body { background:#C99} #navigation ul { list-style:none; width:580px; margin-top:50px;} #navigation ul li { display:inline;} #navigation ul li a {
- 179. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 178 text-decoration:none; padding:5px 0; width:110px; font-family:Tahoma, Geneva, sans-serif; font-size:20px; background:#04A3B5; color:#eee; float:left; text-align:center; border:1px solid #165A69;} #navigation ul li a:hover { background:#a2b3a1; color:#C09;} </style> </head> <body > <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Products</a></li> </ul> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবর মত েদখােব।
- 180. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 179 ইেমজ গযালািা (Image Gallery) ইেমজ গযালািা হে� ওেয়ব েপেজ ইেমজ �দশরে্া একটা িবেশষ প�িত।ফযাশা্ িডজাই্, কমািশরয়াল ওেয়ব সাইট, ই্েটিায়া, এ�টিায়াা িডজাই্, েসলস েসনটাা, �ুল- কেলজ, অাগা্াইেজশ্, ওেয়ব েডভলপেমনট এবং িডজাই্ িভি�ক ওেয়ব সাইট সমূেহ তােদা ে�াডা�, �েজ�, িডজাই্, িবিভ� ইেভনট, অনু�া্ এর ছিব ওেয়ব গযালািাা মাধযেম �দশর্ কো থােক্।একসােথ অে্কগুেলা ছিব �দশরে্া মাধযম ও বলা েযেত পাো। সাধাাণত ওেয়ব গযালািােত েছাট েছাট সাইেজা অে্কগুোা ছিব �দশর্ কাা হয়। একজন বযবহাাকাাী েয ছিবটা ভালভােব েদখেত চায় েসই ছিবা উপর মাউস পেয়নটাা ি্েয় েগেল তা বড় আকাো �দশর্ কো। একটা সাধাাণ ইেমজ গযালািা
- 181. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 180 ইেমজ গযালািাা ৈবিশ�য সমূহ একটা ইেমজ গযলািােত িবিভ� ধােণা িফচাা বা ৈবিশ�য থাকেত পাো। বতরমাে্ CSS3 বযবহাা কো অে্ক সু�া সু�া ইেফ� ইেমজ গযালািােত যু� কাা হে�।এখাে্ CSS3 ্য়, CSS বযবহাা কো িক ধােণা ইেমজ গযালািা ৈতিা কাা যায় এবং এেত িক ধােণা িফচাা যু� কাা যায় এক্জো েদেখ ে্য়া যাক। HTML এবং CSS �াাা ৈতিাকৃত একিট ইেমজ গযালািা
- 182. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 181 ইেমজ গযালািাা িফচাা সমূহ • স�ূণর ইেমজ গযালািাা একটা ি্িদর� এিায়া, বযাক�াউনড কালাা এবং বডরাা থাকেব। • ইেমজ গযালািােত ি্িদর� সংখযক, ি্িদর� সাইেজা েছাট আকৃিতা ইেমজ থাকেব। • �েতযকিট ইেমেজ ি্িদর� াং এর বডরাা থাকেব। • �েতযকিট ইেমেজা উপর মাউস পেয়নটাা ি্েয় েগেল তা বড় কো �দশরে্া জ� একিট কমন গযালািা ি�্ থাকেব। • গযালািা ি�ে্া ি্িদর� এিায়া, বযাক�াউনড কালাা এবং বডরাা থাকেব। • �েতযকিট ইেমেজা উপর মাউস পেয়নটাা ি্েয় েগেল, েছাট আকৃিতা ইেমজ সমূেহা বডরাা পিাবতর্ হেব। • গযালািা ি�ে্া মেধয েয বড় আকৃিতা ইেমজ সমূহ �দিশরত হেব তা ি্িদর� আকাোা হেব। • গযালািা ি�ে্া মেধয েয বড় আকৃিতা ইেমজ সমূহ �দিশরত হওয়াা সময় �িতিট ইেমেজা ি্েচ ইেমজ স�িকরত িকছু েলখা থাকেব। ইেমজ গযালািাা ইেমেজা গঠন সাধাাণত ইেমজ গযালািােত <a></a> বা এংকা টযােগা মেধয িকছু <image></image>ইেমজ টযাগ থােক। �াথিমক পযরােয় েছাট আকৃিতা ইেমজ শুধুমা� <image></image>ইেমজ টযাগ বযবহাা কো �দশর্ কাা হয়। েছাট আকৃিতা ইেমজ সমূেহা উপর মাউস পেযনটাা ি্েয় েগেল েয বড় ইেমজ �দিশরত হয় তাা জ� <span><image></image></span> বযবহাা কাা হয় এবং বড় ইেমজ এর ি্েচ েলখা �দশরে্া জ� <span></span> এর মেধযই শুধুমা� েট�টিট িলেখ িদেলই চেল। যিদ েলখাটােক ইটািলক েদখেত চাওয়া হয় তাহেল <i> text </i> বযবহাা কাা েযেত পাো। তাহেল �িতটা ইেমজ এর জ� গঠন হেব <a><img /><span><img /><br /><i> text </i></span></a> এর অনুরূপ। ইেমজ গযালািাা �িতিট <a></a> বা এংকা টযাগেক আলাদাভােব িচি�ত কাাা জ� <a class="galpic"> এর অনুরূপ �াস িসেল�া বযবহাা কাা হয়। যিদ ইেমজ গযালািােত দুই বা ততিধক লাই্ থােক তাহেল �িতটা লাইে্া েশেষ একটা কো <br /> বযবহাা কােত হেব।
- 183. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 182 ইেমজ গযালািাা ইেমেজা HTML গঠন <a class="galpic"> <img /> <span> <img /> <br /> <i> text </i> </span> </a> স�ূণর ইেমজ গযালািাা গঠন স�ূণর ইেমজ গযালািািট �থেম একটা <div> </div> এর মেধয াাধা হয়।এই িডভ টযাগিটেক আলাদাভােব িচি�ত কাাা জ� <div id="container"> এর অনুরূপ আইিড িসেল�া বযবহাা কাা হয়। <div> </div> এর মেধয ইেমজ সমূহ �াপ্ কাা হয়।�িতটা ইেমেজা লাইে্া েশেষ একটা কো <br /> বযবহাা কােত হয়।এাপা বড় ইেমজ সমূহ েকাথায় �দিশরত হেব তাা জ� একটা গযালািা ি�্ ৈতিা কােত হয় এজ� একিট <div> </div> টযাগ ে্য়া হয় হয়।এই িডভ টযাগিটেক আলাদাভােব িচি�ত কাাা জ� <div id="screen">এর অনুরূপ আইিড িসেল�া বযবহাা কাা হয়।যিদ গযালািা ি�ে্া মেধয Gallery Screen এর অনুরূপ েকা্ েট�ট �ভািবক আব�ায় �দশর্ কােত চাওয়া হয় তাহেল <div id="screen"><h1>Gallery<br />Screen</h1></div> এর অনুরূপ বযবহাা কাা েযেত পাো। ইেমজস�ূণর ইেমজ গযালািাা HTML গঠন <html> <head> <title> Gallery</title> </head> <body> <div id="container"> <a class="galpic"><img /><span><img /><br /><i> text </i></span></a> <a class="galpic"><img /><span><img /><br /><i> text </i></span></a> <br /> <a class="galpic"><img /><span><img /><br /><i> text </i></span></a>
- 184. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 183 <a class="galpic"><img /><span><img /><br /><i> text </i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 185. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 184 স�ূণর ইেমজ গযালািাা এিায়া,বযাক�াউনড এবং বডরাা ি্ধরাাণ স�ূণর ইেমজ গযালািািট <div id="container"></div> এর মেধয অবি�ত।একটা 345px X 425px এর ইেমজ গযালািাা জ� �যাইল শীেট েলখেত হেব #container{width:345px; height:425px;}। #999 অথরাৎ ে� কালাা এর বযাক�াউনড ৈতিাা জ� েলখেত হেব background:#999; এবং 1px এর কােলা ােঙা বডরাা ৈতিাা জ� েলখেত হেব border:1px #000 solid;।ইেমজ সমূহেক পা�া েথেক িকছুটা দূাে� াাখাা জ� padding:7px 2px 7px 7px; েলখেত হয়। স�ূণর ইেমজ গযালািাা এিায়া,বযাক�াউনড এবং বডরাা এর জ� �যাইল #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} </style> </head> <body> <div id="container"> <a class="galpic"><img /><span><img /><br /><i> text </i></span></a> <a class="galpic"><img /><span><img /><br /><i> text
- 186. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 185 </i></span></a> <br /> <a class="galpic"><img /><span><img /><br /><i> text </i></span></a> <a class="galpic"><img /><span><img /><br /><i> text </i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 187. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 186 ইেমজ গযালািােত ি্িদর� আকৃিতা ইেমজ সংেযাজ্ ইেমজ গযালািােত �িতিট ইেমজ সংেযাজ্ এর জ� <a class="galpic"><img /><span><img /><br /><i> text </i></span></a> এর দুইিট img টযােগা মেধযই src="1.jpg" বা src="../images/8d.png" অথবা src="http://www.tutohost.com/bangla/css/imag es/pic/27e.png" এর অনুরূপ এি্িবউট যু� কো ইেমজ যু� কােত হেব। েছাট ইেমেজা জ� �থম img টযােগা মেধয width="163px" height="80px" এর অনুরূপ এি্িবউট যু� কো ইেমজ এর আকৃিত ি্ধরাাণ কােত হেব।েছাট ইেমজিটা উপর মাউস ি্েয় েগেল েয বড় ইেমজিট �দিশরত হেব তাা জ� span টযােগা মেধয অবি�ত img টযােগা মেধয width="300px" height="185px" এর অনুরূপ এি্িবউট যু� কো ইেমজ এর আকৃিত ি্ধরাাণ কােত হেব। অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} </style> </head> <body> <div id="container"> <a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i> text </i></span></a> <a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br />
- 188. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 187 <i>text</i></span></a> <a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 189. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 188 সাধাাণ অব�ায় ইেমজ গযালািােত বড় আকৃিতা ইেমজ লুকাে্া ইেমজ গযালািােত বড় ইেমজিটেক �ভািবক অব�ায় লুিকেয় াাখা হয়। একজন বযবহাাকাাী যখন ইেমজিটা উপর মাউস পেয়নটাা ি্েয় যায় তখন তা �দিশরত হয়।এ কাজিট কাাা জ� �যাইল শীেট .galpic span{ position:absolute; left: 0px; visibility:hidden;} যু� কােত হেব। এখাে্ position:absolute; left: 0px; এর মাধযেম বড় ইেমজিটেক সবরবােম �া্ েদয়া হেয়েছ। visibility:hidden; এর মাধযেম বড় ইেমজ গুেলােক লুকাে্া বা হাইড কাা হেয়েছ। এখাে্ একটা �� থাকেত পাো “ইেমজ গুেলােক যখন �দশর্ কাা হে� ্া তখন েক্ পিজশ্ এবসিলউট কো পিজশ্ ি্েদরশ কাা হল? আমােদা �েজে� ইেমজ গুেলাা �ম িছল “েছাট ইেমজ, বড় ইেমজ, েছাট ইেমজ, বড় ইেমজ, েছাট ইেমজ, বড় ইেমজ,েছাট ইেমজ, বড় ইেমজ” এাকম। তাই বড় ইেমেজা পিজশ্ এবসিলউট কো েদয়ায় বড় ইেমজগুেলা �াভািবক পযরায়�ম েথেক েবিড়েয় এসেছ এবং এ কাােণই েছাট ইেমজ সমূহ একে� পাশাপািশ অব�া্ কােত েপোেছ। অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} .galpic span{ position:absolute; left: 0px; visibility:hidden;} </style> </head> <body> <div id="container"> <a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i> text </i></span></a> <a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x"
- 190. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 189 height="185px" /><br /> <i>text</i></span></a> <br /> <a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 191. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 190 ইেমজ গযালািােত েছাট ইেমেজা বডরাা এবং মািজর্ ইেমজ গযালািােত েছাট ইেমেজা চাাপােশ সাধাাণত সরু মািজর্ বযবহাা কাা হয় এবং ইেমজ সমূহেক সু�াভােব সিঠক �াে্ �াপ্ কাাা জ� মািজর্ বযবহাা কাা হয়।েযেহতু ইেমজ গযালািাা container আইিড িসেল�া যু� div এ padding:7px 2px 7px 7px; বযবহাা কাা হেয়িছেলা সুতাাং েছাট ইেমজ গুেলােক সিঠক �াে্ ি্িদর� দূাে� াাখাা জ� top এবং left মািজর্ �েয়াজ্ ে্ই িক� ইেমেজা দুিট লাইে্া মেধয দূা� াাখাা জ� 5px এবং পাশাপািশ দুিট ইেমেজা মােঝ দূা� াাখাা জ� 5px মািজর্ �েয়াজ্। এজ� margin: 0 5px 5px 0; �যাইল শীেট যু� কাা হেয়েছ।border: 1px solid #f00; এর মাধযেম �িতিট েছাট ইেমেজা চাািদেক 1px এর লাল ােঙা বডরাা ৈতিা কাা হেয়েছ। বডরাা এবং মািজরে্া জ� �যাইল শীেট যু� কােত হেয়েছ .galpic img{border: 1px solid #f00; margin: 0 5px 5px 0;}। অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} .galpic span{ position:absolute; left: 0px; visibility:hidden;} .galpic img{ border: 1px solid #f00; margin: 0 5px 5px 0;} </style> </head> <body> <div id="container"> <a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px"
- 192. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 191 height="185px" /><br /><i> text </i></span></a> <a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 193. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 192 গযালাাী ি�্ (Gallery Screen) ইেমজ গযালাাীা েছাট ইেমজ গুেলাা উপর মাউস পেয়নটাা ি্েয় েগেল বড় ইেমজ সমূহ েযখাে্ �দিশরত হেব েসই �া্িট একটা ি�ে্া মত েদখাে্াা জ� একিট div উপাদা্েক িডজাই্ কাা হয়,আর এটাই হে� গযালাাী ি�্।আা এই গযালাী ি�ে্ কােলাােঙা বযক�াউনড এর জ� background:#000; আকৃিত ি্ধরাােণা জ� width:320px; height:223px; আর 8px এর বডরাা ৈতিাা জ� border:8px #960 solid; আর সব িমিলেয় #screen{background:#000; width:320px; height:223px; border:8px #960 solid;} �যাইল শীেট যু� কাা হেয়েছ। গযালাাী �ীে্া মােঝ Gallery Screen েলখািট ােয়েছ। েলখািটা কালাা ি্ধরাােণা জ� color:#F00; ফনট ি্ধরাােণর জ� font-family:Tahoma; এলাই্ ি্ধরাােণা জ� text- align:center; সব িমিলেয় #screen h1{color:#F00; font-family:Tahoma; text-align:center;} �যাইল শীেট যু� কাা হেয়েছ। অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} .galpic span{ position:absolute; left: 0px; visibility:hidden;} .galpic img{ border: 1px solid #f00; margin: 0 5px 5px 0;} #screen{background:#000; width:320px; height:223px; border:8px #960 solid;} #screen h1{color:#F00; font-family:Tahoma; text-align:center;}
- 194. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 193 </style> </head> <body> <div id="container"> <a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i> text </i></span></a> <a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 195. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 194 ইেমজ গযালাাীা েছাট ইেমেজা বডরাা পিাবতর্ ইেমজ গযালাাী �েজ�িটা িফচাো িছল েয �েতযকিট েছাট ইেমেজা উপর মাউস পেয়নটাা ি্েয় েগেল, েছাট আকৃিতা ইেমেজা বডরাা পিাবতর্ হেব।এ কাজিট কাাা জ� েছাট ইেমেজা উপর েহাবাা ইেফ� িদেত হেব। এজ� িসউেডা িসেল�া বযবহাা কােত হেব .galpic:hover img এবং েছাট আকৃিতা ইেমেজা জ� ্তু্ একিট বডরাা border: 1px solid blue; িড�াোশ্ কােত হেব।তাহেল �েতযকিট েছাট ইেমেজা উপর মাউস পেয়নটাা ি্েয় েগেল তাা বডরাা লাল েথেক ্ীল াং এপিাবিতরত হেব। অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} .galpic span{ position:absolute; left: 0px; visibility:hidden;} .galpic img{ border: 1px solid #f00; margin: 0 5px 5px 0;} #screen{background:#000; width:320px; height:223px; border:8px #960 solid;} #screen h1{color:#F00; font-family:Tahoma; text-align:center;} .galpic:hover img{ border: 1px solid blue;} </style>
- 196. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 195 </head> <body> <div id="container"> <a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i> text </i></span></a> <a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 197. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 196 ইেমজ গযালাাীেত বড় ইেমজ �দশর্ ইেমজ গযালাাী �েজ�িটা মূল িফচাা িছল েয �েতযকিট েছাট ইেমেজা উপর মাউস পেয়নটাা ি্েয় েগেল গযালাাী ি�ে্ ঐ ইেমজিট বড় আকাাো �দিশরত হেব।সাধাাণ অব�ায় ইেমজ গযালািােত বড় আকৃিতা ইেমজিট লুকাে্া অব�ায় াাখা হেয়িছল, তাই এটােক েহাবাা ইেফ� িদেয় িভিজবল কােত হেব। এজ� িসউেডা িসেল�া বযবহাা কােত হেব .galpic:hover span । বড় ইেমজিট িভিজবল কােত visibility: visible; ইেমজিট েকাথায় �দিশরত হেব তা ি্ধরাাণ কােত top: 196px; left: 14px; সবিমিলেয় �যাইল শীেট .galpic:hover span{visibility: visible; top: 196px; left: 14px;} যু� কাা হেয়েছ। মূলত এখাে্ span েক িভিজবল কাা হেয়েছ। অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} .galpic span{ position:absolute; left: 0px; visibility:hidden;} .galpic img{ border: 1px solid #f00; margin: 0 5px 5px 0;} #screen{background:#000; width:320px; height:223px; border:8px #960 solid;} #screen h1{color:#F00; font-family:Tahoma; text-align:center;} .galpic:hover img{ border: 1px solid blue;} .galpic:hover span{ visibility: visible;
- 198. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 197 top: 196px; left: 14px;} </style> </head> <body> <div id="container"> <a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i> text </i></span></a> <a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 199. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 198 ইেমজ গযালাাীেত বড় ইেমেজা জ� �যাইল ৈতিা �কৃতপে� বড় ইেমজিট েয span এর মেধয আেছ তাা জ� �যাইল ৈতিা কােত হেব।বড় ইেমজিটা েপছে্ চাাপােশ একটা হালকা হলুদ বেণরা বযাক�াউনড ৈতিাা জ� background:#EBEDBA; বড় ইেমজিটা েপছে্ েয্ ৬ িপে�ল পযর� হালকা হলুদ বেণরা বযাক�াউনড েদখা যায় এজ� ৬ িপে�ল এর পযািডং ৈতিা কােত padding:6px; এবং বাইো চািািদেক লাল ােঙা ১ িপে�ল এর বডরাা ৈতিা কােত border:1px solid #f00; সব িমিলেয় �যাইল শীেট .galpic:hover span{background:#EBEDBA; padding:6px; border:1px solid #f00;} যু� কাা হেয়েছ। অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} .galpic span{ position:absolute; left: 0px; visibility:hidden;} .galpic img{ border: 1px solid #f00; margin: 0 5px 5px 0;} #screen{background:#000; width:320px; height:223px; border:8px #960 solid;} #screen h1{color:#F00; font-family:Tahoma; text-align:center;} .galpic:hover img{ border: 1px solid blue;}
- 200. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 199 .galpic:hover span{ visibility: visible; top: 196px; left: 14px; background:#EBEDBA; padding:6px; border:1px solid #f00;} </style> </head> <body> <div id="container"> <a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i> text </i></span></a> <a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 201. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 200 ইেমজ গযালাাীেত বড় ইেমেজা ি্েচ ইেমজ স�িকরত েলখা �দশর্ সাধাাণত ইেমজ গযালাাীেত ইেমজেক যখন বড় কো �দশর্ কাা হয়, তখন এর ি্েচ ইেমজ স�িকরত িকছু েক�ট �দশর্ কাা হয়। এই েট�ট হেত পাো ইেমজিট িকেসা? বা ইেমজিট �াাা িক �কাশ কাা হেয়েছ?, ইেমজিট কখন েতালা, েকা্ বযাি� বা �াে্া ছিব হেল তাা পিাচয় ইতযািদ।এটা কাাা জ� HTML অংেশ েযখাে্ text েলখা আেছ ঐ �াে্ �েয়াজ্ীয় েট�ট েলখেত হেব েযম্ �িমকভােব েলখা হেয়েছ Action, Concentration, Intention, এবং Nobility ।আর েলখািটেত আোা িকছু �যাইল েদওয়া েযেত পাো। েলখািটা ি্েচ িলংক এর আনডাালাই্ দূা কাাা জ� text-decoration:none; ফনট ি্ধরাােণা জ� font- family:Tahoma; ফনট সাইজ বড় কাাা জ� font-size:18px; ফনট েমাটা কাাা জ� font- weight:bold; সব িমিলেয় �যাইল শীেট .galpic:hover span{text-decoration:none; font- family:Tahoma; font-size:18px; font-weight:bold;} যু� কাা হেয়েছ। অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} .galpic span{ position:absolute; left: 0px; visibility:hidden;} .galpic img{ border: 1px solid #f00; margin: 0 5px 5px 0;} #screen{background:#000; width:320px; height:223px; border:8px #960 solid;} #screen h1{color:#F00; font-family:Tahoma; text-align:center;} .galpic:hover img{
- 202. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 201 border: 1px solid blue;} .galpic:hover span{ visibility: visible; top: 196px; left: 14px; background:#EBEDBA; border:1px solid #f00; padding:6px; text-decoration:none; font-family:Tahoma; font-size:18px; font-weight:bold; } </style> </head> <body> <div id="container"> <a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i> text </i></span></a> <a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 203. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 202 ইেমজ গযালাাী পূণরা� �েজ� একটা ইেমজ গযালাাী ৈতিাা জ� �থেম gallery ্ােম একটা েফা�াা ৈতিা কােত হেব।এা মেধয �েয়াজ্ীয় 1.png , 2.jpg, 3.jpg, 4.jpg এর ইেমজ সমূহ াাখেত হেব।এা পর �েয়াজ্ীয় েকাড সমূহ ে্াটপযাড এর মাধযেম েলখাা পর file েমনু েথেক Save as এ ি�ক কো File name: gallery.html , Save as type : All files, িদেয় save কােত হেব। gallery.html ফাইলিট gallery েফা�াোা মেধয াাখেত হেব। gallery.html ফাইলিট Mozilla Firefox িদেয় ওেপ্ কােল ইেমজ গযালাাীিট েদখা যােব।
- 204. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 203 েসাসর েকাড ডাউ্েলাড করু্ অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> #container{ background:#999; width:345px; height:425px; padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} .galpic span{ position:absolute; left: 0px; visibility:hidden;} .galpic img{ border: 1px solid #f00; margin: 0 5px 5px 0;} #screen{background:#000; width:320px; height:223px; border:8px #960 solid;} #screen h1{color:#F00; font-family:Tahoma; text-align:center;} .galpic:hover img{ border: 1px solid blue;} .galpic:hover span{ visibility: visible; top: 196px; left: 14px; background:#EBEDBA; border:1px solid #f00; padding:6px;
- 205. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 204 text-decoration:none; font-family:Tahoma; font-size:18px; font-weight:bold; } </style> </head> <body> <div id="container"> <a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i> text </i></span></a> <a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> ইেমজ গযালাাীিট ি্েচ �দিশরত ছিবা মত েদখােব।
- 206. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 205 ওেয়ব েপেজ ইেমজ গযালাাী যু� কাাা �ণালী যিদ এই ইেমজ গযালাাীিটই একিট স�ূণর েপজ িহেসেব েকা্ সাইেট বযবহাা কােত হয় তাহেল েতম্ িবেশষ িকছু কাাা �েয়াজ্ ে্ই। িক� যিদ েকা্ েপেজা মেধয বযবহাা কােত হয় তাহেল <style></style> এর মেধযা েকাড সমূহ ঐ েপেজা �যাইল শীেট যু� কো িদেত হেব । এে�ে� েখয়াল াাখেত হেব েকা্ িসেল�া েয্ ঐেপেজা িসেল�োা সােথ িমেল ্া যায়। যিদ দুই একটা িসেল�া িমেল িগেয় থােক, তাহেল তা অ� ্ােম পিাবতর্ কো িদেত হেব এবং HTML অংেশও পিাবতর্ কােত হেব।এছাড়া .galpic:hover span িসেল�োা �যাইেলা বড় ইেমজিটা top: 196px; left: 14px; পিাবতর্ কােত হেত পাো।<body> </body> এর মেধযা অংশটুক ঐ েপেজা এর মেধযা েকাড সমূহ ঐ <body> </body> এর মেধয েয ইিলেমনট এর পো ইেমজ গযালাীিট াাখেত হেব তাা পো যু� কো িদেত হেব।এম্ হেত পাো েকা্ একটা েপেজা শুরুেত একটা <h1></h1> এর পর <p></p>এর তাাপা আবাা <h1></h1> আেছ, তাা পর ইেমজ গযালাাীিট �দশর্ কােত হেব। তাহেল <h2></h2> এর পো gallery.html এর <body> </body> এর মেধয অ�ভূর� েকাড সমূহ াাখেত হেব।তাহেল ইেমজ গযালাাীিট ঐেপেজ যু� হেয় যােব। অনুশীল্ �েজ� <html> <head> <title> Gallery</title> <style> body{background:#FCC; padding-left:15px;} p{color:#036; font-family:Tahoma; font-size:12px; text-align:justify;} h1{color:#C03; font-family:Tahoma; font-size:24px;} h2{color:#960; font-family:Tahoma; font-size:20px;} #container{ background:#999; width:345px; height:425px;
- 207. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 206 padding:7px 2px 7px 7px; border:1px #000 solid; position:relative;} .galpic span{ position:absolute; left: 0px; visibility:hidden;} .galpic img{ border: 1px solid #f00; margin: 0 5px 5px 0;} #screen{background:#000; width:320px; height:223px; border:8px #960 solid;} #screen h1{color:#F00; font-family:Tahoma; text-align:center;} .galpic:hover img{ border: 1px solid blue;} .galpic:hover span{ visibility: visible; top: 196px; left: 14px; background:#EBEDBA; border:1px solid #f00; padding:6px; text-decoration:none; font-family:Tahoma; font-size:18px; font-weight:bold; } </style> </head> <body> <h1>Welcome to www.tutowebs.com</h1> <p>TutoWebs is leading outsourcing company that provides creative Graphics and Web Design, interactive and responsive Web Development, IT consultancy, Domain Registration and Web Hosting service.</p> <h2>Our example Image Gallery </h2> <div id="container"> <a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i> text </i></span></a> <a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <a class="galpic"><img src="3.jpg" width="163px"
- 208. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 207 height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br /> <i>text</i></span></a> <br /> <div id="screen"><h1>Gallery<br />Screen</h1></div> </div> </body> </html> একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
- 209. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 208 ইেমজ স্�াইটস্ এর মাধযেম বাট্ ৈতিা(১ম অংশ) বাটে্া সাধাাণত চাািট অব�া থাকেত পাো। এগুেলা হে� সাধাাণ অব�ায় বাট্িট েকম্ হেব, মাউস বাটে্া উপর ি্েয় েগেল েকম্ হেব,মাউস ি�ক কােল েকম্ হেব এবং মাউস ি�ক কাাা পর েকম্ হেব। �েজ�িটেত বাটে্া �থম িত্িট অব�া �দশর্ কাা হেব।ইেমজ স্�াইটস প�িতেত বাট্ ৈতিাা ে�ে� বাটে্া �িতিট অব�া �দশর্ কো এমন িত্টা ইেমজ পাশাপািশ �াপ্ কো একটা িসে�ল ইেমজ ৈতিা কাা হয়। বাটে্ �েয়াজ্ অনুসাো ইেমেজা িত্িট অংশ পযরায়�েম �দশর্ কাা হয়। ইেমজ স্�াইটস্ প�িতেত বাট্ ৈতিাা কাযর�ি�য়া • ইেমজ স্�াইটস্ েকৗশল �েয়াগ কো বাট্ ৈতিাা জ� �থেম ফেটাশেপ বাটে্া �িতিট অব�া �দশর্ কো এমন িত্টা ইেমজ পাশাপািশ �াপ্ কো একটা িসে�ল ইেমজ ৈতিা কােত হয়। • এইচ িট এম এল বযবহাা কো বাটে্া জ� �াথিমক গঠন ৈতিা কােত হয় এবং বাটে্ িলংক যু� কাা হয়। • িস এস এস বযবহাা কো বাটে্া আকাা আকৃিত, মািজর্ এবং বাটে্াা িবিভ� অব�া অথরাৎ সাধাাণ অব�ায় বাট্িট েকম্ েদখােব, মাউস ি্েয় েগেল অথরাৎ hover কিনডশে্ বাট্িট েকম্ েদখােব এবং মাউস ি�ক কােল অথরাৎ active কিনডশে্ বাট্িট েকম্ েদখােব ইতযািদ ি্ধরাাণ কাা হয়। ফেটাশেপ বাটে্া জ� িসে�ল ইেমজ ৈতিা �থেম ফেটাশপ ওেপ্ কো File েমনু েথেক New েত ি�ক কো width:435px এবং height:525px এর একটা ডকেমনট ৈতিা কােত হেব। এর পর Rounded rectangle tool িসেল� কো, উপোা ে�াপািটরস বাা েথেক width:420px এবং height:150px এর একটা Rounded rectangle ৈতিা কােত হেব। Rounded rectangle এর েলয়াা িসেল� কো Layer েমনু েথেক Layer Style এবং তাাপা stroke এি�ক কােত হেব। একটা Layer Style উইেনডা ওেপ্ হেল েসখাে্ size:3px এবং color এ ি�ক কো #959595 কো িদেত হেব। এরপর ঐ Layer Style উইেনডােতই Gradient Overlay েত ি�ক কো িটক িচ� িদেয় ে�িডেয়নট �েয়াগ কােত হেব।
- 210. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 209 এরপর িকেবাডর এ T েচেপ বা tools বাা হেত text টুল িসেল� কো Download েলখািট েলখেত হেব েলখাা কালাা হেব সাদা অথরাৎ #ffffff। এখই ভােব text এর েলয়াা িসেল� কো Layer েমনু েথেক Layer Style এবং তাাপা stroke এ ি�ক কো size:1px এবং color এ ি�ক কো #000000 কো িদেত হেব।একটা বাট্ ৈতিাা কাজ স��। এখন Ctrl েচেপ োেখ Rounded rectangle এবং text এর েলয়াা িসেল� কো Layer েমনু েথেক Group layers িসেল� কো �প কােত হেব। এরপর Group layer িট িসেল� কো Alt এবং Shift একসােথ েচেপ োেখ একবাা িক েবাডর এর down arrow key চাপেত হেব এর পর Alt েছেড় িদেয় শুধুমা� Shift এবং down arrow key ১৬ বাা েচেপ ি্েচ ্ামােত হেব। এরপর এই ্তু্ বাটে্া েলয়াা �েপ Group 1 copy েলখা থাকেব এটা পূণাায় িসেল� কো একই প�িতেত তৃতীয় ইেমজ ৈতিা কােত হেব। তাহেল Group 1 copy 2 ৈতিা হেব। এখন Group 1 copy এর পােশ ি�ভুেজ ি�ক কো Rounded rectangle এর Gradient Overlay েত ডাবল ি�ক কােল Layer Style উইেনডা আসেব এখা্ েথেক Gradient বে� ি�ক কােত হেব। Gradient বাোা বাম িদেক ি্েচ েয কােলা াং এর color stop িট আেছ,েসটােত ডাবল ি�ক কো #িচে�া পােশা 000000 েলখা গুেলােক ffffff কো ok েত ি�ক কােত হেব। আর বাম িদেক ি্েচ েয সাদা াং এর color stop িট আেছ,েসটােত ডাবল ি�ক কো #িচে�া পােশা ffffff েলখা গুেলােক 000000 কো ok েত ি�ক কােত হেব। অথরাৎ উ�া কােত হেব।
- 211. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 210 একই ভােব Group 1 copy 2 এর ে�ে� Gradient Overlay েত ডাবল ি�ক কােল Layer Style উইেনডা আসেব এখা্ েথেক Gradient বে� ি�ক কােত হেব। Gradient বাোা বাম িদেক ি্েচ েয কােলা াং এর color stop িট আেছ,েসটােত ডাবল ি�ক কো #িচে�া পােশা 000000 েলখা গুেলােক ffffff কো ok েত ি�ক কােত হেব। আর বাম িদেক ি্েচ েয সাদা াং এর color stop িট আেছ,েসটােত ডাবল ি�ক কো #িচে�া পােশা ffffff েলখা গুেলােক 6a0c67 কো ok েত ি�ক কােত হেব।
- 212. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 211 এরপর File েমনু েথেক save for web এি�ক কো ডা্িদেক উপো preset এর ি্েচা �পডাউ্ েথেক PNG-24 িসেল� কো ি্েচা িদেক save বাটে্ ি�ক কােত হেব।File name িদেত হেব button ।তাহেল িসে�ল ইেমজিট ৈতিা হেয় যােব। িসে�ল ইেমজ
- 213. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 212 ইেমজ স্�াইটস্ বাটে্া HTML �াকচাা এবং িলংক ৈতিা-(২য় পবর) ইেতামেধযই িসে�ল ইেমজ ৈতিাা মাধযেম স্�াইটস্ বাট্ ৈতিাা �থম ধাপ স�� হেয়েছ। এখন বাট্ ৈতিাা জ� এইচ িট এম এল �াকচাা এবং িলংক ৈতিা কােত হেব। মূলত বাট্িট ৈতিা কােত id="button" এর অনুরূপ আইিড িসেল�া যু� এাকটা <div></div> িডভ টযাগ বযবহাা কাা হয় এর মেধয <p></p>এর মাধযেম পযাাা�াফ ি্েয় তাা মেধয class="push" এর অনুরূপ �াস িসেল�া যু� এযংকা টযাগ <a href="#" class="push"></a> বযবহাা কাা হয়। href="#" এর মাধযেম িলংক ৈতিা কাা হয়। বাটে্া জ� এইচিট এম এল �াকচাািট হেব ি্�রূপ। <html> <head> <title>www.tutohost.com</title> <style> </style> </head> <body> <div id="button"> <p> <a href="#" class="push"></a> </p> </div> </body> </html> স্�াইটস্ বাট্ মূলত ইনটাা্রাল অথরাৎ েফা�াোা মাধযেম িলংক ৈতিাা জ� বযবহৃত হয়। আর িলংেকা আকৃিত হয় সাধাাণত demo.html বা download/demo.zip এর অনুরূপ । অথরাৎ সাভরাো বা েলাকাল কি�উটাো েযখাে্ই একটা ওেয়ব সাইট েডভলপ কাা েহাক ্া েক্, সাইেটা জ� ৈতিাকৃত সকল এইচ িট এম এল, িস এস এস, িপ এইচ িপ, জাভাি��, ইেমজ ইতযািদ ফাইল সমূহ িকছু েফা�াোা মেধয াাখা হয়। এে�ে� স্�াইটস্ বাটে্ িলংক কাাা জ� েযম্ demo.html বা demo.zip েয ধােণা ফাইলই েহাক ্া েক্ বযবহাা কাা যােব। মে্ কাা যাক বাট্িট index.html েপেজ আেছ, বাটে্া মাধযেম demo.html েপেজা সােথ িলংক কােত হেব এবং index.html ও demo.html একই েফা�াোা মেধয আেছ। তাহেল বাটে্ িলংক কাাা জ� <a href="#" class="push"></a> েত # এর �াে্ শুধুমা� demo.html অথরাৎ <a href="demo.html" class="push"></a> েলখেলই চেল। িক� মে্ কাা যাক site ্ােম একটা েফা�াোা মেধয বাট্ যু� index.html ফাইলিট আেছ আর site েফা�াোা মেধয একটা download
- 214. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 213 ্ােম েফা�াোা মেধয demo.zip ফাইলিট আেছ। এে�ে� িলংক কােত হেব <a href=" download/demo.zip এর অনুরূপ" class="push"></a> ইেমজ স্�াইটস্ এর মাধযেম বাট্ ৈতিা-(েশষ পবর) ইেতামেধযই িসে�ল ইেমজ ৈতিাা মাধযেম স্�াইটস্ বাট্ ৈতিাা �থম ধাপ এবং এইচ িট এম এল �াকচাা এবং িলংক ৈতিাা মাধযেম ি�তীয় ধাপ স�� হেয়েছ।এ পযরােয় িস এস এস বযবহাা কো বাটে্া আকাা আকৃিত, মািজর্ এবং বাটে্াা িবিভ� অব�ায় বাট্িট েকম্ েদখােব ইতযািদ ি্ধরাাণ কােত হেব।মূলত বাটে্াা িবিভ� অব�া ি্েদরেশা জ� এংকা টযােগা background- image:url(button.png); এর অনুরূপ বয�াউনড ইেমজ এবং background- position:center; এর অনুরূপ বযক�াউনড পিজশ্ বযবহাা কাা হয়। ইেমজ স্�াইটস্ বাট্ �েজ� <html> <head> <title> Gallery</title> <style> * { margin: 0; padding: 0; /* Reset */ } #button {width: 433px; margin: 100px auto;} #button p a.push { display: block; width:433px; height:174px; background-image:url(button.png);} #button p a.push:hover { background-position:center;} #button p a.push:active { background-position:bottom;} </style> </head> <body> <div id="button"> <p><a href="button.zip" class="push"></a></p> </div>
- 215. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 214 </body> </html> �েজ�িট ৈতিা কাাা জ� sprites-button ্ােম একটা েফা�াা ৈতিা কােত হেব । েফা�াািটা মেধয button.png ইেমজিট াাখেত হেব। button.png ইেমজিট এখা্ েথেক ডাউ্েলাড করু্। একই েফা�াোা মেধয button.zip ফাইলিট এখা্েথেক ডাউ্েলাড কো াাখু্। sprites-button ্ােম ৈতিাকৃত েফা�াোা মেধযই একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। বাট্িটেত ি�ক কােল button.zip িট ডাউ্েলাড হেব। স�ূণর �েজ�িট এখা্ েথেক Zip আকাো ডাউ্েলাড করু্। �েজ� িবে�ষণ * {margin: 0; padding: 0; /* Reset */} উপোা েকাডটুকা মাধযেম েপজেক িােসট কাা হেয়েছ । #button {width: 433px; margin: 100px auto;} উপোা েকাডটুকা মাধযেম বাটে্া �� এবং মািজর্ ি্ধরাাণ কাা হেয়েছ। #button p a.push { display: block; width:433px; height:174px; background-image:url(button.png);} উপোা েকাডটুকা মাধযেম �ভািবক অব�ায় বাট্িট েকম্ েদখােব অথরাৎ িসে�ল ইেমেজা কতটুক
- 216. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 215 অংশ �দশর্ কােব তা ি্েদরশ কাা হেয়েছ এবং background-image:url(button.png); এর মাধযেম ফেটাশেপ ৈতিাকৃত button.png িসে�ল ইেমজিট যু� কাা হেয়েছ। #button p a.push:hover { background-position:center;} উপোা েকাডটুকা মাধযেম বাটে্া উপর মাউস পেয়নটাা ি্েয় েগেল অথরাৎ hover কিনডশে্ বাট্িট েকম্ েদখােব তা ি্েদরশ কাা হেয়েছ। background-position:center; এর মাধযেম button.png িসে�ল ইেমজিটা মােঝা অংশ �দশর্ কােব িবষয়িটা ি্েদরশ কাা হেয়েছ। #button p a.push:active { background-position:bottom;} উপোা েকাডটুকা মাধযেম বাটে্া উপর মাউস ি�ক কাাা সময় অথরাৎ active কিনডশে্ বাট্িট েকম্ েদখােব তা ি্েদরশ কাা হেয়েছ। background-position:bottom; এর মাধযেম button.png িসে�ল ইেমজিটা েশেষা অংশ �দশর্ কােব িবষয়িটা ি্েদরশ কাা হেয়েছ।
- 217. সমাপ্ত