آموزش تخصصی CSS (قسمت نهم)

عنصرهای روی هم افتاده (Overlapping Elements)

هنگامی که عنصرها خارج از جریان نرمال موقعیت یابی می شوتد، ممکن است با عنصرهای دیگر تداخل د اشته باشند.

پراپرتی z-index، stack order یک عنصر را تعیین می کند ( که باید در جلو، پشت دیگران قرار گیرد)

عنصر ممکن است stack order مثبت یا منفی داشته باشد:

img
{position:absolute;
left:0px;
top:0px;
z-index:-1
}

عنصری با stack order بیشتر همیشه در جلوی عنصری با stack order کمتر قرار می گیرد.

CSS Float

CSS Float چیست؟

با CSS Float می توان عنصری را به چپ یا راست هل یا حرکت داد، که به عناصر دیگر اجازه می دهد اطرافش را wrap کنند.

از float اکثرا برای تصاویر استفاده می شود، اما هنگام کار کردن با layoutها نیز مفید است.

چگونگی حرکت (float) عنصرها

عنصرها به صورت افقی float می کنند، بدین معنا که یک عنصر فقط در جهات چپ یا راست حرکت می کند نه در جهات بالا یا پایین.

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

عنصر بعد از عنصر حرکت کننده، در اطراف آن flow خواهد کرد.

عنصر بعد از عنصر حرکت کننده، تحت تاثیر قرار نخواهد گرفت.

اگر تصویری به سمت راست حرکت کند، متنی نیز در اطراف آن به سمت چپ حرکت می کند:

img
{
float:right;
}

عنصرهای حرکت کننده کنار یکدیگر

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

در اینجا، ما یک گالری عکس با استفاده از پراپرتی float درست کرده ایم:

thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}

غیر فعال کردن Float- استفاده از Clear

عنصرهای بعد از عناصر متحرک در اطراف آن flow خواهند کرد. برای پرهیز از این موضوع، از پراپرتی clear استفاده کنید.

این پراپرتی تعیین می کند عنصرهای متحرک دیگر به کدام سمت های یک عنصر اجازه ندارند.

با استفاده از پراپرتی clear، یک text line به گالری عکس اضافه کنید:

.text_line
{
clear:both;
}

تراز کردن افقی CSS

تراز کردن عنصرهای block

عنصر block، عنصری است که کل پهنای موجود را اشغال می کند، و دارای فاصله ای (line break) قبل و بعد از کنترل است.

نمونه هایی از عنصر block:

<h1>
<p>
<div>

برای تراز کردن متن به قسمت اول مقاله مراجعه کنید.

در این بخش، به شما نشاه می دهیم چگونه عنصر block را برای استفاده در layout تراز کنید.

تراز کردن در مرکز با استفاده از پراپرتی margin

عنصرهای block را می توان با تنظیم مارجین های چپ و راست روی "auto" تراز کرد.

نکته مهم: استفاده از margin:auto در IE کار نمی کند مگر اینکه یک !DOCTYPE تعریف شود.

تنظیم مارجین های چپ و راست روی auto، تعیین می کند که آنها باید مارجین موجود را بطور مساوی تقسیم کنند. نتیجه این کار، عنصری در مرکز خواهد بود:

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

اگر پهنا 100% باشد، تراز کردن اثر نخواهد داشت.

در IE، یک margin handling bug برای عنصرهای block وجود دارد. برای اینکه مثال های بالا در IE5 کارکند، باید کدهای بیشتری وارد کنید.

تراز چپ و راست با استفاده از پراپرتی Position

یکی از متدهای تراز کردن عنصرها، استفاده از موقعیت یابی مطلق (absolute positioning) است:

.right
{position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;

}

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

مسئله سازگاری Crossbrowser

هنگام تراز کردن عناصری مانند این، از پیش تعریف کردن margin و padding برای عنصر <body> ایده خوبی است. این کار بمعنای پرهیز از تفاوتهای visual در مرورگرهای مختلف است.

IE هنگام استفاده از از پراپرتی position مشکل دیگری نیز دارد. اگر عنصر دربرگیرنده (در caseما، <div class="container">) دارای پهنایی مشخص است، و هیچ !DOCTYPE تعریف نشده است؛ IE یک مارجین 17px در سمت راست اضافه خواهد کرد. ظاهراً این فضا برای scrollbar رزرو شده است. هنگام استفده از پراپرتی position، !DOCTYPE تعریف کنید:

body
{
margin:0;padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

تراز چپ و راست با استفاده از پراپرتی float

یکی از متدهای تراز کردن عنصرها، استفاده از از پراپرتی float است:

.right
{float:right;
width:300px;
background-color:#b0e0e6;
}

مسئله سازگاری Crossbrowser

IE هنگام استفاده از از پراپرتی float مشکل دیگری نیز دارد. اگر هیچ !DOCTYPE تعریف نشده باشد، IE یک مارجین 17px در سمت راست اضافه خواهد کرد. ظاهراً این فضا برای scrollbar رزرو شده است. هنگام استفده از پراپرتی float، !DOCTYPE تعریف کنید:

body
{
margin:0;padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

کلاس های قلابی در CSS( CSS Pseudo-classes)

از این کلاس ها در CSS برای اضافه کردن جلوه های ویژه به بعضی از سلکتورها استفاده می شود.

سینتکس (syntax)

سیتتکس این کلاس:

selector:pseudo-class {property:value;}

همچنین می توان کلاس های CSS را با pseudo-classes نیز استفاده کرد:

selector.class:pseudo-class {property:value;}

Anchor Pseudo-classes

لینک ه8ا را می توان به روش های مختلفی در مرورگری که CSS را ساپورت می کند، نمایش داد:

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

نکته مهم: یک hover باید بعد از a:link و a:visited در تعریف CSS قرار گیرد تا موثر واقع شود.

نکته مهم: a:active باید بعد از a:hover در تعریف CSS قرار گیرد تا موثر واقع شود.

نکته مهم: نام های Pseudo-class به حروف بزرگ حساس نیستند.

+ نوشته شده در ساعت توسط web design |

طراحي وب سايت و المانهای تبلیغاتی

طراحی و پیاده سازی سایت، طراحی کارت ویزیت، بروشور، آرم و پوستر