تجارت الکترونیکطراحی وب

آموزش CSS – سری اول

طراحی وب - آی تی پورت

در خدمتتون هستیم با آموزش های متفاوت از سی اس اس

به علت کم حجم بودن آموزش ها در هر سری از آموزش CSS چندین آموزش را در اختیار دوستان قرار می دهیم.

چند ستونه کردن متن در سی اس اس

با این روش میتونید متونتون رو به هر چند تعداد ستونی که بخواهید بچینید.

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

و حالا کد:

این کد برای مرورگر فایرفاکس:

-moz-column-count:5;

این کد برای مرورگر کروم و سافاری:

-webkit-column-count:5;

این کد برای سایر مرورگرها:

column-count:5;

 

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

مثلا قبل و بعد از لینک های وبتون به صورت خودکار *** قرار بگیره! به این صورت:

*** itport ***

اما کد نویسی:

در این کد به لینک ها این خواصیت رو میدیم:

a:after {content: "*";}

a:before {content: "*";}

 

نمایش خودکار آدرس لینک در ادامه متن لینک به کمک سی اس اس

با کمک این آموزش میتونید کاری کنید که در ادامه لینک های موردنظرتون آدرس اون لینک به نمایش گذاشته بشه!

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

نوع نمایش لینک به دست شما خواهد بود مثلا میتونید لینک رو در بین () یا هر چیز دیگری قرار بدید.

اما کد نویسی:

در این نمونه آدرس لینک ها در پرانتز نمایش داده میشوند:

a:after {content: " (" attr(href) ")";}

برای درج لینک در کاراکترهای دیگه هم کافیه به جای پرانتزهای کد بالا اونا رو قرار بدیم

a:after {content: " *" attr(href) "*";}

امیدوارم این مطلب براتون مفید واقع شده باشه. ما رو از نظراتتون بی نصیب نذارید.

 

گفتگو ها
    بهاره

    سلام

    خیلی عالی و مفید بود . ممنون

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

    واقعا عالی بود تشکر از مطلب خوبتون