نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 2097
تاریخ بروزرسانی ۱ دی ۱۳۹۴

آموزش css content property

در آموزش قبلی با تیم وب یار سه خصوصیت از css content به شما آموزش داده شد,با آموزشی دیگر با ما همراه باشید تا به راحتی این property تازه اضافه شده به css را بهتر بشناسید.

آموزش css content property

css content property

css content property

  1. attr(attraibute):content:

این مقدار چنانچه قبل یا بعد از یک تگ آورده شود,به قبل یا بعد از آن تگ لینک مورد نظر شما را اضافه میکند,در واقع این مقدار برای افزودن آدرس لینک به قبل یا بعد از مکان دلخواه شما میباشد, و شما با این خاصیت دیگر نیازی ندلرید که در html از تگ <a>نیست.

مثال:

 

<style>

a:before {

   content: attr(href);

}

</style>

</head>

<body>

<a href=”http://www.webyar.net”>(WEBYAR)</a>

<p>The attr() property inserts a specified attribute’s value before or after the selected element(s).</p>

که نتیجه ی آن به صورت زیر خواهد بود.

(http://www.webyar.com(webyar

The attr() property inserts a specified attribute’s value before or after the selected element(s).

۲.content:string

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

مثال:

<Style>

p:befor{

   content: “Read this -“;}

</style>

</head>

<body>

<p>My name is Donald</p>

<p>I live in Ducksburg</p>

که نتیجه ی آن به صورت زیر خواهد بود.

Readthis- My name is Donald

Readthis- I live in Ducksburg

  1. content: open-quoteو content: close-quote

همان طور که از اسم این مقادیر پیداست چنانچه این مقادیر قبل یا بعد از تگ خاصی آورده شوند ,open- quote کوتیشن را قبل از عبارت مورد نظر ما باز میکند و close-quote کوتیشن را بعد از تگ مورد نظر ما میبندد.در ضمن یک نکته مورد توجه شما باشد که زمانیکه شما از open- quote استفاده نکرده باشید حق استفاده از close-quote را ندارید.

مثال:

<style>

p:before{    content: open-quote;

}

p:after {

   content: close-quote;

}

</style>

</head>

<body>

<p>My name is Donald</p>

<p>I live in Ducksburg</p>

<p><b>Note:</b> You cannot have “close-quote” without “open-quote”.</p>

که نتیجه ی آن به صورت زیر خواهد بود.

“My name is Donald”

“I live in Ducksburg”

Note: You cannot have “close-quote” without “open-quote”.

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

مقالات مرتبط