این آموزش در تاریخ ۱۴۰۰/۱۰/۳۰ آپدیت شده است.
آموزش ویژگی content در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی content در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی content در CSS
با استفاده از ویژگی content در CSS ، همونطور که از اسم این ویژگی مشخصه میتوان ( متن ، تصویر ، شمارنده خودکار و.. ) به قبل ( شبه عنصر before ) و بعد ( شبه عنصر after ) یک تگ اضافه کرد.
پیشنهاد میکنم حتما آموزش کامل شبه عناصر را در CSS مشاهده نمایید.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی content را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : قرار دادن یک عکس در قبل و بعد از تگ ( استفاده از شبه عنصرafter و before )
|
1 2 3 4 5 6 7 |
h2::after { content:url(files/logo-small.png); } h2::before { content: url(files/logo-small.png); } |
مثال شماره ۲ : ایجاد شمارنده خودکار ( عدد ) به ردیف های یک جدول
|
1 2 3 |
#My-Item::before { content: counter(My-Item); } |
مثال شماره ۳ : ایجاد شماره آیتم، بصورت خودکار قبل از آیتم های یک لیست نامرتب
|
1 2 3 |
ul li::before { content: counter(My-Item)") : "; } |
مثال شماره ۴ : وقتی ماوس بروی لینک قرار میگیره، آدرس URL لینک نمایش داده میشه
|
1 2 3 4 5 |
a::after { content: " (" attr(href) ") "; display:none; color:red; } |
Free-Learn
جدول مشخصات ویژگی content در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | normal |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | نمیتوان استفاده کرد ( ترفند ) |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی content در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| content | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی content در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| normal | مقدار پیش فرض – میشه همون مقدار none |
| none | عدم نمایش محتوا به قبل یا بعد از یک تگ |
| counter | ایجاد یک شمارنده خودکار به قبل یا بعد از یک تگ |
| attr(attribute) | فراخوانی صفت یک تگ |
| string | اضافه کردن متن / محتوا به به قبل یا بعد از یک تگ |
| open-quote | اضافه کردن علامت نقل قول باز به قبل یا بعد از یک تگ |
| close-quote | اضافه کردن علامت نقل قول بسته به قبل یا بعد از یک تگ |
| no-open-quote | حذف نقل قول باز ( در صورتی که تعریف شده باشد ) |
| no-close-quote | حذف نقل قول بسته ( در صورتی که تعریف شده باشد ) |
| url(url) | برای اضافه کردن تصویر، ویدئو و .. به قبل یا بعد از یک تگ |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- برای اضافه کردن محتوا به قبل یا بعد از یک عنصر ما باید از شبه عناصر Before و After استفاده نماییم.
- از این ویژگی نمیتوان بصورت مستقیم در جاوااسکریپت استفاده کرد ولی خب میشه در جاوا اسکریپت از روش های مختلفی همانند این ویژگی عمل کرد. ( مثال )
