اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › ویژگی › ویژگی content در CSS

ویژگی content در CSS

content Property

عناصر مرتبط:
::after  ::first-letter  ::first-line  ::before

ویژگی content در CSS توسط سودو المنت های before:: و after:: برای درج محتوای مورد نظر در عنصر استفاده می شود.

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

نکته: توجه داشته باشیدکه ویژگی content باید همراه در سودو المنت های before:: و after:: استفاده شود و در غیر اینصورت این عناصر نشان داده نخواهند شد. شما همیشه باید این ویژگی را استفاده کنید. در بسیاری موارد اگر نخواهیم محتوای این ویژگی را نشان دهیم آن را خالی می گذاریم. این موارد اکثرا زمانیست که می خوایم از این ویژگی استفاده بصری و گرافیکی کنیم.

در مثال های زیر می توانیم به نحوه عملکرد این ویژگی بپردازیم:
برای دیدن مثال های بیشتر می توانید به سودو کلاس های after:: و before:: نگاه کنید:

html

<h2>عناوین مطالب</h2>
<ol>
  <li>مقالات موبوط به طراحی وب</li>
  <li class="new-entry">مرجع CSS</li>
  <li>مقلالات موبوط با جاوااسکریپت</li>    
  <li class="new-entry">مرجع HTML</li>
</ol>

css

.new-entry::after {
    content: " جدید!";
    color: red;
}

مشاهده و ویرایش کد در حالت تمام صفحه

همچنین در مثال زیر میبینیم:

html

<h1>5</h1>
<p>According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
    lucky enough to invent the Web at the time when the Internet
    already existed - and had for a decade and a half.</q>
  We must understand that there is nothing fundamentally wrong
  with building on the contributions of others.
</p>

<h1>6</h1>
<p>According to the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
    must have the ability to shape the Internet and
    their own experiences on the Internet.</q>
  Therefore, we can infer that contributing to the open web
  can protect our own individual experiences on it.
</p>

css

q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before  {
  content: "Chapter ";  /* فاصله گذاشته شده یک فاصله خالی بین این محتوا و */
                        /* قرار می دهد html مابقی محتوا در ساختار */
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این سودو کلاس در CSS پشتیبانی می کنند.

پست قبلی

شبه کلاس visited: در CSS

پست بعدی

ویژگی all در CSS

پست بعدی
css-all-property

ویژگی all در CSS

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن