সিএসএস element selector গুলোর value এর কাজ

কোড:
display:block
display:none
display:inline
এবং
কোড:
overflow:auto
overflow:hidden
overflow:inherit

CSS element selector গুলোর value এর কাজ নিম্নরুপ :

display:block - মার্ক আপ এর কোন এলিমেন্টকে ব্লক আকারে দেখানোর জন্য এটার ব্যবহার। এটা ব্যবহার করলে আপনি padding, margin দিতে পারবেন অনায়াসেই। এটা ব্যবহার করলে ওই এলিমেন্ট তার div এ পুরো

জায়গা দখল করবে।

display:none -
এটা দ্বারা কোন এলিমেন্টকে হাইড করা হই মুলত এই কাজটা আরেক ভাবে করা যাই সেটা হল visibility:hidden/visibility:none কিন্তু এর ফলে এলিমেন্ট যেই জাইগা নিয়ে তাহকে তা ঠিকি ধরে রাখে কিন্তু তার ভিতরে কোন কিছু সদৃশ্য আবস্থাই থাকে না। আর display:none যেমন এলিমেন্টকে হাইড করে পাশাপাশি এলিমেন্টর সকল জাইগাও অদৃশ্য/ছেরে দেয়। অর্থাৎ পুরাটাই অব্যাবহারিত আবস্থাই থাকে এবং যখন ইচ্ছা তা ব্যাবহার করার সম্ভব।

display:inline -
এটা দ্বারা কোন এলিমেন্ট এর ভিতরে এক লাইনের কাজ করার জন্যে বেহারিত হইয়ে তাহকে। এইচটিএমল এর অনেক inline element আছে যেমন span. উদাহরণ হিসাবে বলা যাই যে আপনি একটা বাক্য ব্যাবহার করছেন যাতে একাধিক শব্দ আছে এখন এর মধ্যে একটাকে একটু বেতিক্রম করতে চাইছি। আমারা এক্ষেত্রে বেশী span ব্যাবহার করে থাকি। স্বাভাবিক ভাবে এক্টাকে span দিয়ে স্টাইলাইজ করলাম এখন আমরা যদি ওখানে display:block ইউজ করি তাহলে ওটা অটোমেটিক লাইন ভেঙে নিচে চলে আসবে যদি জাইগা থাকেও। আর ওখানে display:inline ব্যাবহার করলে ওটা লাইন এর যদি জাইগা থাকে তাহলে ততটুকু নিয়ে সেখানে থাকবে। অর্থাৎ display:inline যতটুকু width ততটুকু নিবে এবং নতুন লাইনের জন্যে কোন পেশার সৃষ্টি করবে না। তবে এর মত আরেকটা এলিমেন্ট এইচটিএমল এ আছে সেটা হচ্চে display: inline-block এর কাজও একই তবে এটা পুরাতন ভার্সন গুলাতে সমস্যা করে। আর display:inline মুটামুটি সব ভার্সনেই সাপোর্ট করে।

overflow:auto
- এর কাজ অনেকটা overflow:scroll এর মতন । আর overflow:scroll হচ্ছে এটা এলিমেন্ট/ডিভ এর বাইরের আংশকে ভিতরে এনে scroll বারের সৃষ্টি করে। তবে এটা ব্যাবহার করলে scroll বার এর প্রয়োজন হইলেও এটা প্রতিফলিত হবে না হলেও আংশিক প্রতিফলিত হবে। তবে overflow:auto ব্যাবহার করলে এই সমস্যা সমাধান পাওয়া যাই। অর্থাৎ এটা ব্যাবহার করলে যদি scroll বারের মত প্রয়োজন হই তাহলে এটা প্রতিফলিত হানে অন্যথাই হবে না। এটা মুলত ডিভ/এলিমেন্ট এর ভিতরের কোন এলিমেন্ট এর width বা height বড় না হইয়ে থাকে তাহলে এটা scroll বারের সৃষ্টি করে না। আর width বা height যেটা বড় হবে সেটার উপর ভিত্তি করে scroll তৈরি হবে ।

overflow:hidden -
এটা ব্যবহার করা হয় যাতে দুটি ডিভ বা এলিমেন্ট যেন একটা আরেকটার গায়ের উপর উঠে না যায়, অর্থাৎ প্রতিটা যেন যার যার যায়গা ঠিক মত দখল করে এবং অন্যের যায়গায় প্রতিবন্ধকতা সৃষ্টি না করে।

overflow:inherit - এর কাজ হলো divর ভেতরে যদি আরো কয়েকটি divর মাধ্যমে এলিমেন্ট set কর এবং overflow এর value যদি inherit দওয়া হয়, তবে ভেতরে divগুলোর মধ্যে margin+padding অংশকে ছেড়ে দিয়ে পরের div গুলো set হবে....যেমন
newspeparএ খবরের কলামে ছবি (div 1) হলে ছবিটির margin, padding ছেড়ে লেখা গুলো (div 2) ঘিরে থাকে......আমার মতে
newspaper এর একদিকে ছবি আর ছবিকে ঘিরে লেখে এমন style করতে চাইলে এটির প্রয়োজন হতে পারে| inherit দিয়ে upper div এর style কে lower div তে নিয়ে আসা হয়|

যেমন:
কোড:
class="div_one">
.div_one{overflow: none;}
.div_two{overflow:inherit;}
এখানে div two তে div one এর
overflow এর style টা div_two তে apply হবে|

:first-child :first-line :first-letter :active :focus :link :visited :long(var) :before :after এই CSS selector গুলোর কাজ গুলোর একটু আলোচনা চাই please:first-child

>>> এটি কোনো সিলেক্টর/ট্যাগ যেমন p, li ইত্যাদি ব্যবহৃত অনেক গুলো এর মধ্যে থেকে প্রথম সিলেক্টর/ ট্যাগ এর CSS style এর জন্য ব্যবহার হয়. যেমন -

this is first paragraph
this is second paragraph
this is third paragraph
:first-line

>>> এটি কোনো সিলেক্টর/ ট্যাগ যেমন p, span ইত্যাদি এর মধ্যে একাধিক line এর প্রথম line কে CSS style পরিবর্তন করার জন্য ব্যবহৃত হয়. যেমন -
this
is first paragraph this is first paragraph this is first paragraph this
is first paragraph this is first paragraph this is first paragraph this
is first paragraph this is first paragraph this is first paragraph
this is a paragraph

উল্লেখ্য : এখানে ব্যবহৃত প্রতিটি p ট্যাগ এর প্রথম line এর color red হবে যেহেতু আমি first-line এর color red ব্যবহার করেছি.:first-letter

>>> এটি কোনো সিলেক্টর/ ট্যাগ যেমন p, span ইত্যাদি এর মধ্যে

ব্যবহৃত text এর প্রথম letter এর CSS style পরিবর্তন করার জন্য ব্যবহৃত হয়. যেমন -
this
is first paragraph this is first paragraph this is first paragraph this
is first paragraph this is first paragraph this is first paragraph this
is first paragraph this is first paragraph this is first paragraph
this is a paragraph
উল্লেখ্য

: এখানে ব্যবহৃত প্রতিটি p ট্যাগ এর প্রথম letter এর color red and font-size 50px হবে যেহেতু আমি first-line এর color red ব্যবহার করেছি.:active

>>> এটি কোনো সিলেক্টর/ট্যাগ যেমন a, p, span ইত্যাদি এর কোনো টার উপর ক্লিক করলে তার CSS style পরিবর্তন করার জন্য ব্যবহৃত হয়. অর্থাৎ আপনি যে ট্যাগ এর সাথে এই active pseudo-class ব্যবহার করবেন সেই ট্যাগ এর CSS পরিবর্তন হবে.যেমন -
this
is first paragraph this is first paragraph this is first paragraph this
is first paragraph this is first paragraph this is first paragraph this
is first paragraph this is first paragraph this is first paragraph
this is a paragraph

:focus
>>> এটি শুধু input ট্যাগ যেমন কোনো text field, button, list item ইত্যাদি এর উপর যখন ক্লিক করা হয় তখন তার CSS style পরিবর্তন হয়.যেমন - :link >>> এটি a ট্যাগ এর যে সকল link এখন পর্যন্ত দেখা হয় নাই তার CSS style এর জন্য ব্যবহৃত হয়.যেমন - linkউল্লেখ্য : যখন browser refresh করবেন তখন এই effect টা দেখতে পাবেন. তাছাড়া না দেখতে পাবার সম্ভাবনা বেশি. :visited >>> এটি a ট্যাগ এর যে সকল link দেখা হয়েছে তার CSS style এর জন্য ব্যবহৃত হয়.যেমন - link:lang

( variable ) >>> এটি দিয়ে একটা লেখার দুই পাশে symbol বা কোনোবিশেষ কিছু use করা যায়. এটি দিয়ে বিভিন্ন ভাষার symbol ব্যবহার করা যায়.যেমন -

Untitled Document Untitled "Document Untitled" Document ntitled Document
উল্লেখ্য : এই pseudo-class ব্যবহার করার জন্য ট্যাগ খুবই সীমিত. সব ট্যাগ এ ব্যবহার করা যায় না.

:before >>> এটি দিয়ে কোনো ট্যাগ এর মধ্যে ব্যবহৃত text বা অন্য কিছু এর আগে কিছু text বা image add করা হয়. যেমন -

Untitled Document Untitled "Document Untitled" Document ntitled Document
উল্লেখ্য: :before use করলে CSS এ content এর মধ্যে যে লেখাটি লিখবেন তা ওই ট্যাগ এর প্রথমে দেখাবে .:after>>> এটি দিয়ে কোনো ট্যাগ এর মধ্যে ব্যবহৃত text বা অন্য কিছু এর শেষে কিছু text বা image add করা হয়. যেমন -

Untitled Document Untitled "Document Untitled" Document ntitled Document
উল্লেখ্য: :after use করলে CSS এ content এর মধ্যে যে লেখাটি লিখবেন তা ওই ট্যাগ এর শেষে দেখাবে .


সৌজন্যে : Hex Code
-যেতে হবে বুহদূর, কিছুটা পথ চেনা বাকিটা অজানা-
(পোস্টটি পরিমার্জিত হয়েছে: 06-06-2013 03:20 PM দ্বারা নূরুল্লাহ হোসাইন.