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

خانه » مطالب عمومی » آموزش سی اس اس:کانتنت 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

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

مثال:

<!DOCTYPE html><html> <head> <style> p:before {content: "Read this -";} p#hometown:before {content: normal;} style="text-align: left;"></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></code>

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

Read this-My name is Donald

I live in Ducksburg

counter.3

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

مثال:

<style> p:before } ; counter-increment: myIndex { } p:before

; ( :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 آشنا میشوید.با ما همراه باشید. جهت آگاهی از آخرین آموزش های سایت ما را در پیج اینستاگرام وب یار دنبال کنید. کد های سی اس اس خیلی وسیع هستند و با چند کار ساده می توانیم آن ها را بهینه کنیم. این کار باعث می شود تا سرعت سایت شما افزایش پیدا کند و در مدت کوتاه تری بالا بیاید. اگر میخواهید کد های سی اس اس سایت خود را بهینه کنید بهتر است با یک تیم متخصص همکاری کنید. اما اگر تیم متخصصی را نمیشناسید با وبیار تماس بگیرید تا خود این عمل را در دست بگیریم و به بهترین نحو این کار را برای شما انجام بدهیم.

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