قواعد طرح بندي در Css

در این قسمت با قواعدي آشنا می شویم که اجازه کنترل رویت ، مکان و رفتار کادر ها را براي تگ هایی که درون آنها قرار می گیرند مشخص می کنند . قواعد این بخش جزء مهمترین قواعد براي طراحی قالب در سایت ها به شمار می روند .

 

♦ display

این قاعده نوع کادري را که ایجاد می شود مشخص می کند . در مثال زیر لینک هایی که در تگی قرار دارند که مقدار صفت  class آنها برابر menu است به جاي آنکه inline در نظر گرفته شوند ، همانند یک بلوك درنظر گرفته می شوند :

 

پارامتر هایی که این خاصیت می گیرد در زیر توضیح داده شده است :

• block : طرح کادر به صورت یک بلوك خواهد بود . معمولا در فضاي بالا و پایین تگ هاي نوع block کمی فضاي خالی وجود دارد و همیشه از یک خط جدید شروع می شوند .
• inline : مقصود از این مقدار ، قرار گرفتن تگ ، درون بلوك جاري و در همان خطی است که بلوك مجاور قرار دارد .
• inline-block : همانند مقدار قبل است با این تفاوت که به عنوان یک بلوك با آن رفتار می شود بیشترین کاربرد این مقدار هنگامی است که می خواهید به تگی که درون تگ دیگر قرار دارد پهنایی اختصاص دهید .
• list-item : این مقدار موجب می شود تا تگ فرزند به صورت یک گزینه از لیست درون تگ پدرش نمایش داده شود .
• none : این مورد باعث می شود که تگ به عنوان یک کادر در نظر گرفته نشود . درواقع این مقدار باعث عدم نمایش تگ و تمامی فرزندان آن می شود . از این قاعده براي حذف عناصر از صفحه مخصوصا در جاوااسکریپت زیاد استفاده می شود .

 

♦ position 

این قاعده همانند قاعده float نحوه قرار گیري کادر را مشخص می کند . به کادر هایی که مقادیري غیر از  static براي این قاعده آنها تعیین شده باشد ، اصطلاحا کادر هاي مکان دار گفته می شود . در مثال زیر تگی با نام sidebar دقیقا در گوشه بالا و سمت راست کادري که در آن وجود دارد قرار می گیرد :

 

پارامترهای position :

• absolute : این مقدار مکان قرارگیري کادر را به طور مطلق نسبت به کادر دربر گیرنده آن تعیین می کند . مکان کادر می تواند با استفاده از یکی از چهار قاعده bottom ، right ، topو left تعیین شود .
• fixed : این مقدار مکان قرار گیري کادر را به طور مطلق نسبت به فضاي کل صفحه تعیین میکند .
• relative : کادر هایی که این مقدار را دارند ابتدا مکان قرارگیري آنها بر طبق نحوه چیدمانشان درکنار تگ هاي دیگر به طور معمول تعیین می شود و سپس از آن مکان ، قواعد bottom ، right ، topو left مکان دقیق کادر را مشخص می کند .
• static : کادر هایی که مکان آن ها به طور معمول با توجه به نحوه قرارگیري آن ها درکنار کادر ها یا تگ هاي دیگر مشخص می شود این مقدار را می پذیرند .

 

♦ float

float به حالتی گفته می شود که تگی حالت شناور به خود می گیرد و نسبت به جهتی متمایل می شود . این قاعده اولا مشخص می کند که آیا تگی حالت شناور داشته باشد یا خیر و دوما در صورت شناور بودن آیا به سمت چپ متمایل شود یا به سمت راست .

پارامتر ها :

• left : تگ را در سمت چپ پدرش قرار می دهد .
• right : تگ را در سمت راست تگ پدرش قرار می دهد .
• none : تگ را بدون حالت شناور در نظر می گیرد.

این قاعده یکی از مهمترین قواعدي است که این روز ها در طرح بندي صفحات نیز کاربرد داشته و ارزش بررسی بیشتر را دارد ، شناور ساختن عناصر (که در اصطلاح به آن  floating می گویند) یکی از روش هاي تعیین موقعیت عناصر داخل عناصر دیگر است . یک عنصر شناور می تواند به سمت چپ یا راست عنصر در برگیرنده خود برود تا لبه هاي آن با لبه هاي عنصر پدر(همان عنصر در برگیرنده) یا عناصر شناور دیگر مماس شود.

 

♦ clear

با استقاده از این قاعده می توان تعیین کرد که آیا یک تگ می تواند در کنار تگی که قاعده float را دارد قرار بگیرد یا خیر .

پارامتر ها :

• left : هیچ تگ شناوري نمی تواند در سمت چپ تگ مورد نظر قرار گیرد .
• right : هیچ تگ شناوري نمی تواند در سمت راست تگ مورد نظر قرار گیرد .
• both : هیچ تگ شناوري نمی تواند در سمت راست یا چپ تگ مورد نظر قرار گیرد .
• none : تگ هاي شناور می توانند درکنار تگ مورد نظر قرار بگیرند .

 

♦ Visibility

این قاعده مشخص می کند که یک تگ نمایش داده شود یا نه . توجه داشته باشید که اگر حتی تگی با استفاده از این قاعده نمایش داده نشود ، بازهم فضا را اشغال می کند و بر روي عناصر دیگر صفحه نیز اثر خواهد گذاشت . دقت داشته باشید که اگر تگ هایی به عنوان فرزندان تگ دیگري باشندکه از این تگ با استفاده از مقدار hidden براي قاعده visibility خود مقدار دهی شده باشند که موجب می شود تگ نمایش داده نشود اما تگ هاي فرزند درون این تگ ، مقدار visible را براي این قاعده داشته باشند تگ هاي فرزند نمایش داده خواهند شد .

پارامتر ها :

• visible : تگ نمایش داده می شود .
• hidden : تگ نمایش داده نمی شود .
• collapse : این مقدار فقط براي برخی از اجزاي تشکیل دهنده تگ table کاربرد دارد . اجزایی همانند ردیف ها ، گروهی از ردیف ها ، ستون ها و گروهی از ستون ها . استفاده از این مقدار براي این اجزا موجب خواهد شد تا نمایش داده نشوند و فضاي آنها بوسیله دیگر تگ هاي مجاورشان پر خواهد شد .

 

♦ top , right , bottom , left

این قواعد براي تگ هایی که مقدار قاعده position آن ها برابر با absolute یا relative است به ترتیب میزان فاصله حاشیه بالا ، راست ، پایین و چپ را کنترل می کند.

 

♦ z-index

اگر چه که به نظرمی رسد که تگ ها ي یک صفحه حالتی دو بعدي (شامل محور x و y) را دارند اما در حقیقت این عناصر ، سه بعدي هستند و داراي محور z نیز هستند . مقدار z یک عنصر با استفاده از قاعده z-index تعیین می شود . از آنجا که مکان دو کادر ممکن است با هم تداخل داشته باشد ، حق تقدم قرار گیري کادري بر روي کادر دیگر با استفاده از قاعده z-index مشخص می شود . در مثال زیر تگی با نام warning حق تقدم بیشتري براي نمایش نسبت به تگ هاي مجاورش خواهد داشت:

پارامتر ها:

یک عدد صحیح که منفی نیز می تواند باشد و نمایانگر سطح تقدم کادر نسبت به کادر هاي دیگر است . مقدار auto براي قاعده z-index  مشخص می کند که عنصر داراي همان سطح z ایست که تگ پدر آن دارد و مقدار جدیدي را نخواهد پذیرفت .

 

♦ Overflow

این قاعده نحوه رفتار یک تگ را در زمانی که اندازه محتویات درونش از ابعاد آن تجاوز می کند مشخص می کند .

پارامتر ها :

• auto : مرورگر ها با این مقدار ، در زمانی که نیاز باشد به تگ scrollbar اضافه می کنند و تا زمانی که محتویات درون تگ از ابعاد آن تجاوز نکرده اند scrollbar ظاهر نمی شود .
• hidden : موجب می شود تا محتویاتی که از ابعاد تگ پدرشان تجاوز می کنند نمایش داده نشوند .
• scroll : این مقدار هم مانند hidden عمل می کند اما در عین حا ل یک scrollbar عمودي نیز به تگ اضافه می کند تا کاربر بتواند با پیمایش آن ، محتویاتی که نمایش داده نشده اند را نیز ببیند .
• visible : موجب می شود تا محتویات متجاوز از ابعاد تگ پدر کاملا نمایش داده شوند .

 

♦ Opacity

یکی از جالب ترین و پرکاربردترین قواعدي که در CSS3  ارائه شده است قاعده opacity است که از آن براي کنترل میزان شفافیت عناصر استفاده می شود . این قاعده می تواند مقداري بین 0.0 (شفاف ترین حالت)  تا 1.0 (واضح ترین حالت) را به عنوان مقدار بپذیرد. سینتکس استفاده از این قاعده باید به صورت opacity : x است که X می تواند یکی از مقادیر فوق باشد . به عنوان مثال در دستور زیر میزان شفافیت تمامی عکس هاي صفحه 0.8 در نظر گرفته شده است :

این نوع استفاده از این قاعده در مرورگر Internet Explorer پشتیبانی نمی شود و به جاي آن باید از دستور  (filter:alpha(opacity=x استفاده کنیم که در این قاعده X می تواند بین 0 (شفاف ترین ) تا 100 (واضح ترین) باشد . چنانچه می خواهید این قاعده در تمامی مرورگر ها به درستی کار کند باید از هر دو روش به صورت همزمان استفاده کنیم . مثال بالا به روش زیر در تمامی مرورگر ها کار می کند: