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

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

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

Free-Learn

ویژگی content در CSS

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

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

Free-Learn

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

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

مثال شماره ۱ : استفاده از متن / رشته در قبل و بعد از تگ P

امتحان کنید

مثال شماره ۲ : بدست آوردن صفت یک تگ و نمایش آن در قبل از تگ ، هنگامی که ماوس بروی تگ قرار میگیرد

امتحان کنید

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

امتحان کنید

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

امتحان کنید

مثال شماره ۵ : قرار دادن تصویر در قبل و بعد از تگ H2

امتحان کنید

Free-Learn

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

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

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

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
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 استفاده نماییم، میتوانید آموزش شبه عناصر موجود در CSS را مشاهده نمایید.

در مثال شماره ۴ با استفاده از شبه کلاس not: تعریف کردیم که شمارنده بروی سطر اول جدول که شامل سرستون ها می باشد اعمال نشود، درنتیجه شمارنده از سطر دوم شروع میشود.

از این ویژگی نمیتوان بصورت مستقیم در جاوااسکریپت استفاده کرد ولی خب میشه در جاوااسکریپت از روش های مختلفی همانند این ویژگی عمل کرد. ( مثال )

Free-Learn

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