این آموزش در تاریخ ۱۴۰۰/۱۰/۳۰ آپدیت شده است.

آموزش ویژگی content در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی content در CSS با من همراه باشید.

آموزش ویژگی content در CSS

Free-Learn

ویژگی content در CSS

با استفاده از ویژگی content در CSS ، همونطور که از اسم این ویژگی مشخصه میتوان ( متن ، تصویر ، شمارنده خودکار و.. ) به قبل ( شبه عنصر before ) و بعد ( شبه عنصر after ) یک تگ اضافه کرد.

پیشنهاد میکنم حتما آموزش کامل شبه عناصر را در CSS مشاهده نمایید.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی content را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : قرار دادن یک عکس در قبل و بعد از تگ ( استفاده از شبه عنصرafter و before )

امتحان کنید

مثال شماره ۲ : ایجاد شمارنده خودکار ( عدد ) به ردیف های یک جدول

امتحان کنید

مثال شماره ۳ : ایجاد شماره آیتم، بصورت خودکار قبل از آیتم های یک لیست نامرتب

امتحان کنید

مثال شماره ۴ : وقتی ماوس بروی لینک قرار میگیره، آدرس URL لینک نمایش داده میشه

امتحان کنید

Free-Learn

جدول مشخصات ویژگی content در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض normal
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS2
نحوه استفاده در جاوااسکریپت نمیتوان استفاده کرد ( ترفند )

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی content در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari Edge
content بله بله بله بله بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

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 استفاده نماییم.
  • از این ویژگی نمیتوان بصورت مستقیم در جاوااسکریپت استفاده کرد ولی خب میشه در جاوا اسکریپت از روش های مختلفی همانند این ویژگی عمل کرد. ( مثال )

Free-Learn

دریافت PDF یا پرینت این مطلب