آموزش تخصصی 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 - طراحی و پیاده سازی سایت، طراحی




برچسب :