• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش CSS (فصل اول-جلسه 3) : گزینشگرهای CSS

33429 ۶ آبان ۹۱
1 2

گزینشگرهای CSS

در زبان  CSS از 6 طریق می توان یک تگ را انتخاب کرد یا به عبارتی 6 نوع گزینشگر وجود دارد :

  1. گزینشگرهای برچسب  (Tag Selectors)
  2. گزینشگرهای کلاس کاذب (Pseudo-Class Selectors)
  3. گزینشگرهای کلاس (Class Selectors)
  4. گزینشگرهای مفهومی (Contextual Selectors)
  5. گزینشگرهای خصوصی (ID Selectors)
  6. گزینشگر عمومی (Universal Selector)

حال به تشریح هر کدام از این گزینشگرها به همراه مثال می پردازیم :

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

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

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

توجه داشته باشید که دو کلاس link  و visited فقط برای تگ های <a> استفاده می شوند و بقیه کلاسهای کاذب را می توان برای همه ی تگ ها استفاده کرد.

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

نکته : یک روش برای به خاطر سپردن ترتیب کلاسهای کاذب، به خاطر داشتن کلمه ی LoVe HAte است. (به ترتیب حروف بزرگ در کلمه دقت  کنید) این کلمه به آن معناس که اول link سپس visited پس از آن hover سپس active و در آخر نیز focus  قرار می گیرد.

به مثال زیر دقت کنید :

3.  گزینشگرهای کلاس : تا به اینجا شما یاد گرفتید که چگونه برای هر تگی از تگ های HTML استایل مورد نظر را تعریف کنید، اما اگر خواستید به دو تگ یکسان دو استایل مختلف را اختصاص دهید باید چه کنید ؟؟؟؟؟؟ فرض کنید ما کد HTML زیر را داریم :

حال می خواهیم 7learn  به رنگ قرمز و javascript and web design tutorials به رنگ آبی باشد:

اما این کد هر دو کلمه را به رنگ آبی در می آورد؛ اینجاست که باید از کلاس استفاده کرد تا بتوانیم به هر یک از تگ ها، حتی اگر یکسان باشند، استایل مختلفی را اختصاص داد. مانند کد زیر :

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

نتیجه کد در مرورگر :

 ::. چند نکته در استفاده از کلاس ها :

  1. در انتخاب نام کلاس ها باید دقت داشته باشید که اولین حرف نباید عدد یا نقطه و یا علامت ؟ باشد مثلا کلاس 7learn اشتباه است و هنگام تعریف استایل کار نخواهد کرد.
  2. هنگام نوشتن نام کلاس در زبان CSS قبل از نام باید یک . (نقطه) قرار دهید مانند مثالی که در بالا زده شد.
  3.  شما می توانید بیش از یک کلاس برای یک تگ تعریف کنید به این صورت که بین هر نام یک فاصله (space) قرار دهید، مانند مثال زیر  از 3 کلاس استفاده شده  :

1 2
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 23 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

    • ‏‏
      لقمان آوند(۶ آبان ۱۳۹۱)

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

  • ‏‏
    سامان(۷ آبان ۱۳۹۱)

    خیلی ساده و روان توضیح داده بودید متشکرم

  • ‏‏
    mahdi.khadem(۷ آبان ۱۳۹۱)

    سلام
    یک سوال داشتم. ببخشد اگر اینجا جاش نیست
    من یک قالب برای جوملا دانلود کردم، میخوام یه تغییراتی تو هدرش بدم. البته عکسش و سایز هدر و از این قبیل رو تغییر دادم. ولی میخواستم ببینم چه جوری میشه روی هدر headerobject اضافه کرد.

    • ‏‏
      لقمان آوند(۷ آبان ۱۳۹۱)

      سلام
      توی انجمن سایت بپرسید …
      ممنون

  • ‏‏
    mahdi.khadem(۷ آبان ۱۳۹۱)

    البته ببخشید اول سوالم رو مطرح کردم
    آموزش هاتون هم بسیار عالیه دستتون درد نکنه

  • ‏‏

    سلام امکانش هست همه را در قالب پی دی اف بگذارید و سریعتر اپلود کنید خیلی مننون از لطفتون

    • ‏‏
      سجاد دریس(۲۳ آذر ۱۳۹۱)

      سلام.
      بعد از اینکه سری آموزشی تموم شد، چشم، اینکارو انجام میدیم.
      اما فعلا شما میتونید از دکمه “دانلود مقاله به صورت PDF” که در انتهای هر پست وجود داره استفاده کنید.

  • ‏‏

    بقیه آموزش ها را هم زود آماده کنید.!

  • ‏‏
    آموزش سئو(۱۷ خرداد ۱۳۹۲)

    thank

  • ‏‏
    سید مهدی(۶ تیر ۱۳۹۲)

    سخته داداش سخته! مخم ترکید! 😯 😯 :sad: ❓ ❓ ❓

    • ‏‏
      سجاد دریس(۷ تیر ۱۳۹۲)

      اگه درک مطلب براتون سخته، مرحله به مرحله برید جلو، یعنی مطلب رو چند قسمت کنید.!!!
      این دیگه آخرین راه حله.

      • ‏‏
        سید مهدی(۹ تیر ۱۳۹۲)

        باشه. چشم. سعی می کنم ایشالله بره تو مغزم!
        ولی خداییش مطالبتون حرف نداره. دستتون درد نکه. خیلی آقایید

  • ‏‏
    الهام(۲۳ تیر ۱۳۹۲)

    سلام و خسته نباشید !
    تفاوت id و class در چیه ؟!
    برداشت من این بود:
    class و میشه به بیش از یک تگ اختصاص داد ولی id این امکان و نداره و فقط برای یه تگ استفاده میشه
    ممنون میشم اگه جواب بدین

    • ‏‏
      لقمان آوند(۲۳ تیر ۱۳۹۲)

      بله دوست عزیز .
      دقیقا تفاوتشون همینه .

    • ‏‏
      کیوان علی محمدی(۲۳ تیر ۱۳۹۲)

      سلام برداشت شما کاملا درسته.

  • ‏‏

    سلام. من این کد رو نوشتم… قسمت hover اجرا نمیشه برام.میشه بگین چرا

    • ‏‏
      سجاد دریس(۱۲ مرداد ۱۳۹۲)

      سلام شما در قسمت hover بین mdiv و :hover یک فاصله (space) قرار دادین که باعث شده کدتون کار نکنه.
      فاصله رو حذف کنید

      • ‏‏

        فاصله رو برداشتم ولی بازهم نشد. اینم سایتم هست:
        http://shoosha.persiangig.com/index.html
        مثلا وقتی روی خانه میرید رنگش عوض میشه ولی وقتی کمی ماوس رو میارین سمت چت تر،روی اون دایو، دیگه رنگش بنفش نمیشه… اگه برین میبین 😳

        • ‏‏
          کیوان علی محمدی(۱۳ مرداد ۱۳۹۲)

          سلام،اولا که شما اصلا اون منو رو به صورت استاندارد ننوشتید،بعدش مشکل شما به خاطر اینه که اون حالت تغییر رنگ رو فقط برای تگ a نوشتید نه برای li که باید تگ a رو توی خودش نگه داره.

        • ‏‏

          اره میدونم.من منو ساختن یاد نگرفتم.
          اما اینو هم ک گذاشتم درست نشد

        • ‏‏

          آقا درست شد! حق با شما بود کد منو مشکل داشت اصلا. درست نوشتمش حل شد.خیلی ممنونم :smile:

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram