جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش کامل شبه عناصر در CSS همراه با مثال

آموزش کامل شبه عناصر در CSS همراه با مثال

6 مهر 1400
ارسال شده توسط همیار من
دوره های رایگان
315 بازدید
css

آموزش کامل شبه عناصر در CSS

ما در جلسه قبلی از سری آموزش های قدم به قدم زبان CSS بطور کامل با شبه کلاس ها در CSS آشنا شدیم، حال در این جلسه میخوایم بطور کامل با شبه عناصر در CSS آشنا شویم.

حال اصلا شبه عناصر یعنی چی ؟ یعنی اینکه ما بتونیم بخش یا قسمتی از یک عنصر ( عنصر یا همون تگ های HTML ) را انتخاب کنیم سپس با استفاده از CSS به اون استایل بدهیم.

برای مثال : من میخوام توی صفحه وبم تمامی تگ های پاراگرافم حرف اولشون اندازشون بزرگ و مثلا رنگشون آبی باشه ، یا مثلا میخوام قبل از تمامی پاراگراف های درون صفحه کلمه ( سلام ) چاپ بشه، به راحتی با شبه عناصر میشه اینکارو کرد.

شکل کلی استفاده از شبه عناصر در CSS

ما برای استفاده از شبه عناصر در یک صفحه وب باید بصورت زیر عمل نماییم :

1
2
3
Selector::pseudo-element {
  property:value;
}

که Selector میشه همون انتخابگر ما بعدش یه :: میزاریم و بعدش شبه عنصر رو مینویسیم و در نهایت ویژگی های CSS مورد نظرمون رو وارد مینماییم.

اگه توجه کرده باشید شبه عناصر :: دارند ولی شبه کلاس ها : دارند، این در واقع برای متمایز کردن شبه کلاس ها با شبه عناصر می باشد که در CSS3 اضافه شده است.

اگر شما شبه کلاس ها و شبه عناصر هردوتاییشون رو با : بنویسید، بازم مشکلی نداره و خروجی میده ولی خب درکل برای شبه عناصر :: در CSS3 اضافه شده است و پیشنهاد میشه شماهم برای شبه عناصر از :: استفاده نمایید.

از شبه عناصر نمیتوان درون صفت Style بصورت استایل درون تگی / خطی استفاده کرد.

لیست کامل شبه عناصر در CSS

در جدول زیر میتوانید لیست کامل شبه عناصر CSS را مشاهده نمایید و همچنین توضیح هرکدام را نیز در جلوی آن مطالعه نمایید، همچنین برای مشاهده مثال هر یک از شبه عناصر زیر لطفا بروی دکمه مثال کلیک نمایید.

شبه عنصر توضیح
::after برای گذاشتن محتوا یا دادن استایل به (بعد از) یک عنصر.
::before برای گذاشتن محتوا یا دادن استایل به (قبل از) یک عنصر.
::first-letter اولین حرف از یک عنصر را انتخاب میکند.
::first-line اولین خط (لاین) یا سطر از یک عنصر را انتخاب میکند.
::selection مواردی را که توسط کاربر انتخاب می شود را انتخاب میکند.
(مثلا میتونیم مشخص کنیم که اگر کاربر با ماوس متنی را انتخاب کرد اون متن آبی شود و..)
::placeholder متن زمینه ای عناصر ورودی را انتخاب میکند

خب دوستان خسته نباشید، من سعی کردم به بهترین حالت ممکن براتون توضیح بدم و امیدوارم که هیچ مشکلی در این جلسه با شبه عناصر ها نداشته باشید.

بیشتر بخوانید:

  • نحوه کار با شبه کلاس ها در CSS
  • قالب بندی متون در HTML
  • داستان سرایی چیست؟
  • آموزش کار با کلاس‌های کمکی Utility Classes در بوت‌استرپ 4
  • آموزش کار با عناصر Block و Inline در CSS
  • سرویس های ایمیل مارکتینگ رایگان
  • راه کارهای کاهش نرخ پرش یا Bounce Rate
  • روش های واقعی افزایش فالوور اینستاگرام
  • راه‌های بهبود برنامه نویسی
اشتراک گذاری:
برچسب ها: CSSآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش CSS مقدماتیآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانتعیین موقعیت عناصر در cssجابجایی عناصر در cssچرخش عناصر در cssشبه عناصر css چیستشبه عناصر در cssشبه عناصر در css چیستعناصر در cssعناصر در css چیستوسط قرار دادن عناصر در css
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

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

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت