آموزش تخصصی CSS (قسمت یازدهم)
Pseudo-elements چندگانه
می توان چندین pseudo-elements را نیز با هم ترکیب کرد.
در مثال زیر، حرف اول پاراگراف قرمز خواهد شد، با سایز فونت xx-large. بقیه خط اول، آبی و بصورت حروف کوچک خواهد بود. بقیه پاراگراف دارای اندازه فونت و رنگ پیش فرض خواهد بود.
p:first-letter{color:#ff0000;
font-size:xx-large;
}p:first-line
{color:#0000ff;
font-variant:small-caps;
}
:before Pseudo-element
":before" pseudo-element را می توان برای insert کردن مقداری content قبل از content یک عنصر استفاده کرد.
مثلا زیر، تصویری را قبل از هر عنصر <h1> درج کرد.
h1:before { content:url(smiley.gif); }Pseudo-elements
ستون CSS نشان می دهد پراپرتی در کدام ورژن CSS تعریف می شود (CSS1 یا CSS2).
نام pseudo | شرح |
|
After |
بعد از عنصر ، content اضافه می کند |
|
Before |
قبل از عنصر ، content اضافه می کند |
|
First-letter |
یک استایل به اولین کاراکتر متن اضافه می کند |
|
First-line |
یک استایل به اولین حرف متن اضافه می کند |
نوار پیمایش (Navigation Bar) در CSS
نوارهای پیمایش
داشتن نوار پیمایش که استفاده از آن آسان باشد، برای هر وب سایتی مهم است.
با CSS می توان منوهای کسل کننده HTML را تبدیل به نوارهای پیمایش زیبا و جذاب کرد.
نوار پیمایش – لیست لینک ها
نوار پیمایش نیاز به HTML استاندارد بعنوان پایه اش دارد.
ما در مثال هایمان، نوار پیمایش را از روی لیست استاندارد HTML می سازیم.
اساساً نوار پیمایش لیستی از لینک هاست، پس استفاده از عنصرهای <ul> و <li> بسیار مناسب است:
<ul><li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
حالا بیایید bulletها و marginها و padding را از لیست حذف کنیم:
ul{list-style-type:none;
margin:0;padding:0;
}
مثال بالا توضیح می دهد:
- list-style-type:none — بولت ها را حذف می کند. نوار پیمایش نیاز به لیستmarker ها ندارد.
- تنظیم marginها و padding روی 0، تنظیمات پیش فرض مرورگر را حذف می کند.
کد موجود در مثال بالا، کدی استاندارد است که هم در نوارهای پیمایش افقی و هم عمودی بکار می رود.
نوار پیمایش عمودی
برای ساختن نوار پیمایش عمودی، فقط به استایل کردن عنصرهای <a> نیاز داریم، بعلاوه کد بالا:
a{display:block;
width:60px;
}
مثال بالا توضیح می دهد:
- display:block — لینک ها را بصورت عنصرهای block نمایش می دهد و کل ناحیه لینک را قابل کلیک می کند.
- width:60px — عنصرهای block، کل پهنای موجود پیش فرض را اشغال می کند. ما قصد داریم 60px پهنا تعیین کنیم.
نکته مهم: همیشه پهنای عنصرهای <a> را در نوار پیمایش عمودی تعیین کنید.اگر پهنا را حذف کنید، IE می تواند نتایج غیر منتظره ای تولید کند.
نوار پیمایش افقی
دو راه برای ایجاد نوار پیمایش افقی وجود دارد. استفاده از list itemهای inline و floating.
هر دو متد بخوبی کار می کند، اما اگر می خواهید لینک ها دارای یک سایز باشند، باید از متد floating استفاده کنید.
List Itemهای Inline
یک راه ساختن نوار پیمایش افقی، تعیین عنصرهای <li> بصورت inline است، بعلاوه کدهای استاندارد بالا:
li{display:inline;
}
مثال بالا توضیح می دهد:
- display:inline — بطور پیش فرض، عنصرهای <li>، عنصرهایی block هستند. در اینجا ما breakهای خط را قبل و بعد از هر list item حذف می کنیم تا آنها را روی یک خط نمایش دهیم.
list itemهای Floating
در مثا بالا، لینک ها پهناهای متفاوتی دارند.
برای همه لینک هایی که قر ار است پهنای مساوی داشته باشند، عنصر <li> را حرکت دهید و پهنایی بر ای عنصر <a> تعیین کنید:
li{ float:left;
}
a {display:block;
width:60px;
}
مطالب مشابه :
آگهی استخدام شرکت پروشات شمال
این سایت با جدیدترین اخبار استخدامی زیر نظر نیازمندی بویور راه اندازی شده است تا پل
سریال نامبر یا لایسنس فتوشاپ Adobe Photoshop CS6
کارت وزیت برای پروشات آموزش قدم به قدم طراحی گرافیکی وب سایت .:. .:.
آموزش تخصصی CSS (قسمت یازدهم)
طراحي وب سايت و المانهای تبلیغاتی - آموزش تخصصی css (قسمت یازدهم) - طراحی و پیاده سازی سایت
لیست تگ ها (دستورات) HTML5
طراحي وب سايت و المانهای تبلیغاتی - لیست تگ ها (دستورات) html5 - طراحی و پیاده سازی سایت، طراحی
برچسب :
سایت پروشات