آموزش تخصصی CSS (قسمت هشتم)
سلکتورهای Grouping
در style sheetها، اغلب عناصری با یک استایل وجود دارند.
h1
{color:green;
}h2
{color:green;
}p
{color:green;
}
برای کوتاه کردن کد، می توان سلکتورها را group کرد.
هر سلکتور را باید با یک علامت ویرگول جدا کرد.
در مثلا زیر، سلکتورهای کد بالا با هم group شده اند:
h1,h2,p
{color:green;
}
Nest کردن سلکتورها
اعمال کردن استایل برای سلکتور درون سلکتوری دیگر امکان پذیر است.
در مثال زیر، یک استایل برای همه عنصرهای p، تعیین شده است، و استایلی دیگر نیز برای عنصرهای p، که درون کلاس "marked" نست شده اند، تعیین شده است.
p
{color:blue;
text-align:center;
}
.marked
{background-color:blue;
}
.marked p
{color:white;
}
نمایش و قابلیت دیده شدن در CSS
پراپرتی display تعیین می کند چگونه/آیا یک عنصر نمایش داده می شود، و پراپرتی visibility تعیین می کند آیا یک عنصر با قابل دیدن (visible) یا مخفی (hidden) باشد.
مخفی کردن عنصر
Display: none
یا
Visibility: hidden
مخفی کردن عنصر را می توان با تنظیم پراپرتی display روی "none" یا تنظیم پراپرتی visibility
روی "hidden" انجام داد. اما توجه داشته باشید که این دو متد نتایج متفاوتی دارد:
visibility:hidden، عنصری را مخفی کرد، اما همان فضای سابق را اشغال می کند. آن عنصر مخفی می شود، اما روی layout تاثیر خواهد گرفت.
h1.hidden {visibility:hidden;}
نمایش CSS – عنصرهای Block و Inline
عنصر block، عنصری است که کل پهنای موجود را اشغال می کند، و دارای فاصله ای (line break) قبل و بعد از کنترل است.
نمونه هایی از عنصر block:
- <h1>
- <p>
- <div>
عنصر inline، فقط پهنایی را اشغال می کتد که لازم است، و فاصله ای ندارد.
نمونه هایی ار عنصر inline:
- <span>
- <a>
تغییر چگونگی نمایش عنصر
تغییر دادن عنصر inline به یک عنصر block یا بالعکس، می تواند برای ظاهر صفحه مفید باشد، و همچنان از استانداردهای وب تبعیت می کند.
li {display:inline;}
مثال زیر، عنصرهای span را بصورت عناصر block نمایش می دهد:
span {display:block;}
نکته مهم: تغییر نوع نمایش عنصر تنها چگونگی نمایش عنصر را نشان می دهد، دهد نه نوع عنصر را. مثلاً، عنصر Inline که display:block تنظیم شده است، اجازه ندارد عنصر block را درون خودش nest کند.
موقعیت یابی در CSS
موقعیت یابی
پراپرتی موقعیت یابی در CSS، به شما اجازه می دهد موقعیت عنصری را پیدا کنید. همچنین می تواند عنصری را پشت عنصری دیگر قرار دهد، و تعیین می کند هنگامی که محتویات یک عنصر زیاد است چه اتفاقی باید بیافتد.
می توان عنصرها را با استفاده از پراپرتی top، bottom، left، و right نیز موقعیت یابی کرد. اما، این پراپرتی ها اثر نخواهند داشت مگر اینکه ابتدا پراپرتی position تنظیم و تعیین شود. همچنین این پراپرتی ها بسته به متد موقعیت یابی، عملکرد متفاوتی دارند.
چهار متد متفاوت موقعیت یابی وجود دارد.
موقعیت یابی استاتیک (Static Positioning)
عنصرهای HTML به طور پیش فرض بصورت استاتیک موقعیت یابی می شوند. عنصری که بصورت استاتیک موقعیت یابی شده، همیشه طبق جریان نرمال صفحه موقعیت یابی می شود.
عنصرهایی که بصورت استاتیک موقعیت یابی شده اند، تحت تاثیر پراپرتی های top، bottom، left، و right قرار نمی گیرند.
موقعیت یابی ثابت (Fixed Positioning)
عنصری با موقعیت ثابت، نسبت به پنجره مرورگر موقعیت یابی می شود.
حتی اگر پنجره scroll نیز بشود، حذف نخواهد شد:
p.pos_fixed
{position:fixed;
top:30px;
right:5px;
}
نکته: IE، فقط زمانی valueهای fixed ساپورت می کند که یک !DOCTYPE تعیین شده باشد.
عنصرهای موقعیت یابی شده ثابت، از جریان (flow) صفحه حذف می شوند.
این عنصرها ممکن است با عنصرهای دیگر تداخل داشته باشند.
موقعیت یابی نسبی (Relative Positioning)
عنصر موقعیت یابی شده نسبی، بسبت به موقعیت نرمالش موقعیت یابی می شود.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{position:relative;
left:20px;
}
محتوای عنصرهایی که بصورت نسبی موقعیت یابی شده اند را می توان جابجا و روی عنصرهای دیگر انداخت، اما فضای اشغال شده برای عنصر در جریان اصلی صفحه حفظ می شود.
h2.pos_top
{position:relative;
top:-50px;
}
موقعیت یابی مطلق (Absolute Positioning)
عنصر موقعیت مطلق، نسبت به عنصر اصلی اول؛ که موقعیتی غیر از استاتیک دارد، موقعیت یابی می شود. اگر چنین عنصری پیدا نشود، آنگاه containing block، <html> خواهد بود:
h2
{position:absolute;
left:100px;
top:150px;
}
عنصرهایی که بصورت مطلق موقعیت یابی شده اند، از جریان نرمال حذف می شوند.
این عنصرها ممکن است با عنصرهای دیگر تداخل داشته باشند.