آموزش سی اس اس:کانتنت css content property

آخرین بروز رسانی: دی ۱, ۱۳۹۴

Css:content property

سی اس اس کانتنت یک خصوصیت جدید میباشد که به تازگی به css اضافه شده است و با این قابلیت بسیاری از کدهایی که در html   مینویسیم حذف شده و به سمت استایل (style)دهی سوق پیدا میکند.

آموزش  سی اس اس:کانتنت css content property

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

Contenet property  بسیار جالب بوده و برنامه نویسان را راغب به یادگیری آن میکند.

توجه کنید که content property فقط قبل و بعد از یک تگ میاد و خود به تنهایی نمیتواند تغییری ایجاد کند در واقع تغییرات را قبل و یا بعد از یک تگ اعمال میکند,با مثال های جامع و کاملی که در زیر آورده شده است شما میتوانید قابلیت های css content property  را به راحتی درک کنید, با آموزشی دیگر از تیم وب یار همراه ما باشید.

اول آنکه بدانید که content شامل syntax ها  یا مقادیر زیر میشود.

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

۱.content:normal این مقدار در صورتی که قبل یا بعد از تگی تعریف نشده باشد آن تگ مقدار پیش فرض اش را در خروجی نمایش میدهد و در صورتی که بعد از تگی تعریف شده باشد ,آن تگ به صورت معمولی نمایش داده میشود.

مثال:

 

<!DOCTYPE html>

<html>

<head>

<style>

p:before {

    content: “Read this -“;

}

p#hometown:before {

    content: normal;

}

</style>

</head>

<body>

<p>My name is Donald</p>

<p id=”hometown”>I live in Ducksburg</p>

که خروجی آن به شکل زیر میباشد

Read this-My name is Donald

I live in Ducksburg

content:none.2

این مقدار در صورتی که قبل یا بعد از تگی درج شود , قبل  یا بعد از آن تگ هیچ چیزی نمایش داده نمیشود همان طور که از اسمش پیداست

:مثال

 <style>

p:before {

    content: “Read this -“;

}

p#hometown:before {

    content: none;

}

</style>

<body>

<p>My name is Donald</p>

<p id=”hometown”>I live in Ducksburg</p>

<b>Note:</b> For :before to work in IE8, a DOCTYPE must be declared.

</body>

که نتیجه آن به صورت زیر میباشد:

Read this-My name is Donald

I live in Ducksburg

Content:counter.3

این مقادر باعث میشود که قبل یا بعد از تگ مورد نظرمان مقادیر افزایشی یا کاهشی قرار بگیرد

مثال:

<style>

p:before

}

;    counter-increment: myIndex

{

}   p:before

;  (  content:counter(myIndex

{

</style>

</head>

<body>

<p>First make a variable (myIndex) and make it increase every time a p element occurs.</p>

<p>Then insert the counter in front of all p elements</p>

که خروجی آن به شکل زیر میباشد:

۱First make a variable (myIndex) and make it increase every time a p element occurs

۲Then insert the counter in front of all p elements

امیدوارم تا این جای کار خسته نشده باشید در پست های بعدی با آموزش هایی دیگه از content property آشنا میشوید.با ما همراه باشید.

مطالب مرتبط

موقتا امکان ارسال ديدگاه وجود ندارد

موقتا امکان ارسال ديدگاه وجود ندارد

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017

بالا