آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 19) : ویژگی content - قسمت 1

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۸ اسفند ۱۳۹۵

css3 attributes

در این مطلب قصد داریم در مورد ویژگی جالب و قدرتمند content براتون توضیح بدیم و شما رو بصورت کامل با قابلیتهای اون آشنا کنیم. ما برای این مطلب از این لینک به عنوان مرجع استفاده میکنیم.

چیزی که باید در رابطه با ویژگی content بدونین اینه که از این ویژگی فقط میشه درون کلاسهای کاذب before و after استفاده کرد. از اون میتونین برای اضافه کردن چیزی قبل یا بعد از المنت مورد نظر استفاده کنید. مثلا کد HTML زیر رو در نظر بگیرید:

<p class="email-address">[email protected]</p>

همونطور که دیدید یک ایمیل رو قرار دادیم. حالا مثلا میتونیم یک متن رو قبل از اون بصورت زیر اضافه کنیم:

.email-address:before {
   content: "Email address: ";
}

با اینکار متن Email address به قبل از ایمیل مورد نظر اضافه میشه و خروجی در مرورگر بصورت زیر خواهد بود:

Email address: [email protected]

دیدید که چقدر راحت میتونین اینکارو انجام بدین. با ما همراه باشید تا مثالهایی رو از قابلیتهای این ویژگی بگیم تا از اون بیشتر خوشتون بیاد.

استفاده از کاراکترهای خاص

شما میتونین بصورت حرفه ای و جالب از کارکترهای خاص درون CSS استفاده کنید. چطور میتونیم کد اسکی یا ASCII رو برای کارکتر یا Symbol مورد نظرمون پیدا کنیم؟ لیست کامل کاراکترهای خاص در این لینک قرار داده شده است. مثلا اگر کارکتر © یا کپی رایت رو بخوایم مورد استفاده قرار بدیم در ابتدا اون رو درون لینک بیان شده پیدا میکنیم. همونطور که دیدید کد HTML برای این کارکتر &#169; هست. پس کد اسکی این کاراکتر 169 هست. اگر بخوایم از این مورد درون CSS استفاده کنیم باید اون رو تبدیل کنیم. برای این کار میتونیم Entity Conversion Calculator استفاده کنیم. کد اسکی رو قرار میدیم و بر روی convert کلیک میکنیم. با اینکار چنین مواردی تولید میشن:entity convertor

دیدید که موارد مختلف مساوی با کد اسکی 169 نمایش داده شده که میتونین برای استفاده از این کاراکتر در CSS از \00A9 استفاده کنید. تعدادی از کارکترهای خاص متداول به شرح زیر هستند:

  • کپی رایت : \00A9
  • check mark یا علامت تیک : \2713
  • پیکان به سمت راست : \2192
  • پیکان به سمت چپ : \2190

مثلا فرض کنید میخوایم زمانی که بر روی متن مورد نظر هاور میکنیم، یک کارکتر Check mark در آخر اون نمایش داده بشه. برای اینکار بصورت زیر عمل میکنیم:

.email-address:hover:after {
   content: " \2713";
   color: red;
}

همونطور که دیدیم آیکون رو هم قرمز کردیم. خروجی بصورت زیر خواهد بود:special character on hover

همونطور که دیدید زمانی که بر روی متن مورد نظر هاور میشه، کارکتر مورد نظر به رنگ قرمز در انتهای اون نمایش داده میشه.

استفاده از Attribute یا ویژگی

شما میتونین به Attribute‌های هر المنتی که با استفاده از Selector اون رو هدف قرار گرفته اید، درون Content دسترسی داشته باشید. مثلا لینک زیر رو در نظر بگیرید:

<a title="A web design community." href="http://css-tricks.com">CSS-Tricks</a>

همونطور که دیدید ویژگی title رو برای اون مشخص کردیم و یک عنوان برای لینک مورد نظر قرار دادیم. خروجی در مرورگر بصورت زیر هست:attribute in content

همونطور که دیدید یک لینک نمایش داده شده و زمانی که بر روی اون هاور میکنیم، عنوان اون نمایش داده میشه. حالا شما میتونین به ویژگی title درون content دسترسی داشته باشید و کارای جالبی رو انجام بدین. برای اینکار از ویژگی attr بصورت زیر استفاده میکنیم:

a:before {
   content: attr(title) ": ";
}

همونطور که دیدید با استفاده از تابع attr به ویژگی title مربوط به لینک دسترسی پیدا کردیم و اون رو درون Content قرار دادیم و با اینکار خروجی بصورت زیر خواهد شد:attribute in content 2

همونطور که دیدید متن مربوط به ویژگی title قبل از متن لینک قرار داده شده و خیلی حرفه ای‌تر شده و کاربر بهتر لینک رو متوجه میشه. شما میتونین هر ویژگی یا attribute رو با استفاده از attr مورد استفاده قرار بدین. بهمین راحتی. در جلسه بعد مثالهای بیشتری رو براتون قرار میدیم.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.